/* ============================================================================
 * dock-geometry.css  ·  v644  ·  数字人「琍璇」dock 几何唯一权威层
 * ----------------------------------------------------------------------------
 * 为什么存在（审计实证）：
 *   v643 实测 chain_probe —— 单个 .ai-dock-avatar-area 命中 62 条 CSS 规则
 *   （theme 16 / v285-layout 41 / nav-refined 3 / inline 2），历史补丁层层叠加，
 *   同一选择器被重复定义 6 次，末尾 `aspect-ratio:auto!important`、
 *   `flex:1 1 auto!important`、`min-width:280px!important` 互相覆盖：
 *     · desk expanded 宽高比 0.84306（被 flex 挤压 10.95px，应为 0.81612）
 *     · mob expanded area 280px 宽撑破 fab 150px 宽 → 右溢出 137px
 *   → 结论：靠"再加一条规则"永远打不赢层叠战争。
 *   v644 已从 theme/v285-layout/nav-refined 中物理剥离 285 条几何声明，
 *   本文件是 dock 几何的唯一真源，最后加载。
 *
 * 铁律：
 *   1. 素材真值 host-full.webp = 648×794 → 比例 0.816120（禁止再出现 812/1132）
 *   2. area 宽度跟随 fab 内宽，高度由 aspect-ratio 派生（禁 flex 挤压：flex:0 0 auto）
 *   3. canvas 用 cover + 顶部对齐（object-position:50% 0%）吸收亚像素取整 → 零黑边
 *   4. 任何几何值只允许改本文件；JS 不得写 width/height/aspect-ratio 内联
 *   5. tv-mode / body-mode 由各自专属规则负责，本层不介入
 * ========================================================================= */

:root {
  /* 素材真值比例：648 / 794 */
  --dock-ar: 648 / 794;
}

/* ---------------------------------------------------------------------------
 * 1) collapsed —— 64×64 圆形小头像（保持既有形态）
 * ------------------------------------------------------------------------ */
html body #ai-avatar-fab.fab-ai.ai-dock.dock-collapsed .ai-dock-avatar-area {
  width: 64px !important;
  height: 64px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 64px !important;
  max-height: 64px !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
html body #ai-avatar-fab.fab-ai.ai-dock.dock-collapsed .ai-avatar-living-canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 12% !important;
}

/* ---------------------------------------------------------------------------
 * 2) expanded（非全屏 / 非 TV / 非 body）—— 竖版数字人主形态
 *    fab 宽度定档，高度 auto 由内容决定（杜绝 flex 挤压 area）
 * ------------------------------------------------------------------------ */
html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded:not(.fullscreen-mode):not(.tv-mode):not(.body-mode) {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 94vh !important;
  overflow: hidden !important;
}

html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded:not(.fullscreen-mode):not(.tv-mode):not(.body-mode) .ai-dock-avatar-area {
  /* 宽度跟随 fab 内宽；高度严格由素材比派生；flex 不可收缩 */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--dock-ar) !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 10px auto 0 !important;
}

html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded:not(.fullscreen-mode):not(.tv-mode):not(.body-mode) .ai-avatar-living-canvas {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  /* cover + 顶对齐：吸收 aspect-ratio 亚像素取整，杜绝上下黑边 */
  object-fit: cover !important;
  object-position: 50% 0% !important;
}

/* 笔记本 / 窄桌面 768–1319px：略收窄，保持竖版比例 */
@media (min-width: 768px) and (max-width: 1319px) {
  html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded:not(.fullscreen-mode):not(.tv-mode):not(.body-mode) {
    width: 268px !important;
    max-width: 268px !important;
  }
}

/* 移动端 ≤767px：宽度按视口比例，防止 area 撑破 fab（v643 实测右溢出 137px） */
@media (max-width: 767px) {
  html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded:not(.fullscreen-mode):not(.tv-mode):not(.body-mode) {
    width: min(208px, 56vw) !important;
    max-width: min(208px, 56vw) !important;
    max-height: 88vh !important;
  }
  html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded:not(.fullscreen-mode):not(.tv-mode):not(.body-mode) .ai-dock-avatar-area {
    margin: 8px auto 0 !important;
    border-radius: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
 * 3) fullscreen —— 居中最大化竖版，比例锁定，零黑边
 *    高度以视口为基准，宽度由比例派生；窄屏由 max-width 反向约束高度
 * ------------------------------------------------------------------------ */
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-dock-avatar-area {
  /* 宽度双约束取小：既不超过 94vw，高度也不超过 84vh（84vh×0.81612=推导宽度上限）；
     高度由 aspect-ratio 从宽度派生 → 桌面/移动全比例零失真 */
  width: min(94vw, calc(84vh * 0.81612)) !important;
  min-width: 0 !important;
  max-width: 94vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 84vh !important;
  aspect-ratio: var(--dock-ar) !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 auto !important;
}
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-avatar-living-canvas {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
}
@media (max-width: 767px) {
  html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-dock-avatar-area {
    width: min(96vw, calc(84vh * 0.81612)) !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 84vh !important;
  }
}

/* ===========================================================================
 * AUTHORITATIVE fullscreen-mode (v685) — 沉浸式全屏 · 零黑边
 * 覆盖 theme.css:1418/1421/1437/1445 与 nav-refined.css:748/981/1755 的冲突：
 *   - fab 强制铺满 100vw x 100vh（此前仅 550x674 浮动盒 → 大片深底黑边）
 *   - ::before 用 host-full.webp 做模糊铺底（整屏满是头像，根除黑边空隙）
 *   - .ai-dock-avatar-area 居中显示清晰竖版（AR 一致 → object-fit 不裁切）
 * ======================================================================== */
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode {
  position: fixed !important;
  inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: transparent !important;
  z-index: 99999 !important; overflow: hidden !important;
  border-radius: 0 !important;
}
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; z-index: 0 !important;
  background-image:
    linear-gradient(180deg, rgba(10,15,28,.20), rgba(10,15,28,.40)),
    url(/static/img/host-full.webp?v=v686) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: blur(42px) brightness(.62) saturate(1.12) !important;
  -webkit-filter: blur(42px) brightness(.62) saturate(1.12) !important;
  transform: scale(1.25) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-dock-avatar-area {
  position: relative !important; transform: none !important; z-index: 5 !important;
  width: min(94vw, calc(92vh * 0.81612)) !important;
  min-width: 0 !important; max-width: 94vw !important;
  height: auto !important; min-height: 0 !important; max-height: 92vh !important;
  aspect-ratio: var(--dock-ar) !important;
  flex: 0 0 auto !important; flex-shrink: 0 !important;
  border-radius: 18px !important; overflow: hidden !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
  margin: 0 auto !important;
}
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-avatar-living-canvas {
  position: static !important; display: block !important;
  width: 100% !important; height: 100% !important;
  min-height: 0 !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: cover !important; object-position: 50% 0% !important;
}
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-avatar-fs-bg {
  z-index: 1 !important;
}
@media (max-width: 767px) {
  html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-dock-avatar-area {
    width: min(96vw, calc(92vh * 0.81612)) !important;
    max-width: 96vw !important; max-height: 92vh !important;
  }
}