/* ============================================================================
 * 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: #0a0f1c !important;  /* v692 不透明品牌深底：杜绝透出页面=真黑边空隙 */
  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-color: #0a0f1c !important;  /* v692 图片失败兜底：绝不留黑空洞 */
  background-image:
    linear-gradient(180deg, rgba(10,15,28,.30), rgba(10,15,28,.58)),
    url(/static/img/host-full.webp?v=v691) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: blur(26px) brightness(.82) saturate(1.22) !important;
  -webkit-filter: blur(26px) brightness(.82) saturate(1.22) !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(96vw, calc(94vh * 0.81612)) !important;
  min-width: 0 !important; max-width: 96vw !important;
  height: auto !important; min-height: 0 !important; max-height: 94vh !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(98vw, calc(94vh * 0.81612)) !important;
    max-width: 98vw !important; max-height: 94vh !important;
  }
}

/* ========================================================================
 * v689 hotfix —— 根治数字人椭圆/黑角遮挡（#1299）
 * .ai-avatar-img-base / .ai-avatar-living-canvas 携带内联 border-radius:50%
 * （非 important）。在竖版 area（高>宽，如 601×736）下被裁成竖直椭圆，
 * 四角落在椭圆之外 → 透出父级背景 = 纯黑角 = 用户所见「数字人被遮挡/被切」。
 * 统一重置为 0，由父级 .ai-dock-avatar-area 的 overflow:hidden + 自身
 * border-radius 负责裁剪：
 *   - collapsed(64×64): 父级 50% → 干净圆形头像（保持既有形态）
 *   - expanded/fullscreen: 父级 12px/18px → 圆角矩形头像填满，零黑角
 * ====================================================================== */
html body #ai-avatar-fab.fab-ai.ai-dock .ai-dock-avatar-area .ai-avatar-img-base,
html body #ai-avatar-fab.fab-ai.ai-dock .ai-dock-avatar-area .ai-avatar-living-canvas {
  border-radius: 0 !important;
}

/* ========================================================================
 * v689 hotfix —— fs-mini（退出/进入全屏按钮）原无 CSS 定位规则，被 flex 流
 * 推到人脸正中心遮挡头像。固定到右上角（expanded + fullscreen 两态），
 * z-index 高于头像层，绝不压脸。collapsed 态不作用（保持既有行为）。
 * ====================================================================== */
html body #ai-avatar-fab.fab-ai.ai-dock.dock-expanded .ai-avatar-fs-mini,
html body #ai-avatar-fab.fab-ai.ai-dock.fullscreen-mode .ai-avatar-fs-mini {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 30 !important;
}