/* ============================================================================
 * immersive.css：全屏沉浸式分层布局系统
 * ----------------------------------------------------------------------------
 * 参照 3d-doctor 的多层 fixed 叠加方案，为数字人对话页提供：
 *   1. 占满整个视口的全屏沉浸式容器（无滚动条）
 *   2. 多层 fixed 定位元素叠加，统一由 --z-* 变量管理层级
 *   3. 背景层（数字人视频）→ 遮罩层 → 内容层 → 浮层 的清晰堆叠
 *   4. 响应式适配：PC 端左右分栏，移动端数字人全屏背景 + 内容叠加
 *   5. 性能优化：背景层 pointer-events:none，will-change 声明，避免重绘
 * ========================================================================== */

/* ============================================================
 * 1. 全屏沉浸式根容器
 * ============================================================ */
.immersive-app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
  overflow: hidden;
  /* 防止 iOS 橡皮筋效果 */
  overscroll-behavior: none;
}

/* ============================================================
 * 2. 背景层（数字人视频/图片） — z-index: 0
 *    铺满全屏，不响应指针事件，作为视觉基底
 * ============================================================ */
.immersive-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
  /* 性能：提示浏览器将背景层提升为独立合成层 */
  will-change: transform;
  backface-visibility: hidden;
}

/* 背景媒体（img/video）适配规则 */
.immersive-bg__media {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 竖屏（手机）：以宽度为基准铺满，保证人物完整 */
@media (max-aspect-ratio: 3/4) {
  .immersive-bg__media {
    width: 100%;
    height: auto;
    min-height: 100%;
  }
}

/* 横屏（PC/自助机）：以高度为基准，两侧留黑保持比例 */
@media (min-aspect-ratio: 1/1) {
  .immersive-bg__media {
    width: auto;
    height: 100%;
    min-width: 100%;
  }
}

/* ============================================================
 * 3. 渐变遮罩层 — z-index: 1
 *    底部/顶部渐变蒙层，提升前景文字与按钮的可读性
 * ============================================================ */
.immersive-mask {
  position: fixed;
  inset: 0;
  z-index: var(--z-mask);
  pointer-events: none;
  /* 底部渐变：从透明过渡到深色，保证底部操作区清晰 */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 18%,
      transparent 62%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

/* ============================================================
 * 4. 内容层容器 — z-index: 10
 *    承载 header / main / footer，叠加在背景与遮罩之上
 * ============================================================ */
.immersive-content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================================
 * 5. 固定顶部导航 — z-index: 10
 * ============================================================ */
.immersive-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-content);
  /* 安全区：适配刘海屏 */
  padding-top: env(safe-area-inset-top);
  pointer-events: auto;
}

/* ============================================================
 * 6. 固定底部操作区 — z-index: 10
 * ============================================================ */
.immersive-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-content);
  /* 安全区：适配底部小黑条 */
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: auto;
}

/* ============================================================
 * 7. 主屏内容区 — z-index: 50
 *    浮在背景之上，透明背景让数字人透出
 * ============================================================ */
.immersive-main {
  position: relative;
  z-index: var(--z-main);
  flex: 1;
  min-height: 0;
  /* 顶部避开 header，底部避开 footer */
  padding-top: var(--header-height);
  padding-bottom: var(--input-area-height);
  pointer-events: auto;
}

/* ============================================================
 * 8. PC 端左右分栏：数字人占 40%，对话占 60%
 * ============================================================ */
.immersive-split {
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
  height: 100%;
}

/* 左栏：数字人面板（仅 PC 端显示，移动端隐藏改由背景层承载） */
.immersive-split__left {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
}

/* 右栏：对话主区域 */
.immersive-split__right {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
 * 9. 移动端适配：数字人全屏背景 + 内容叠加
 * ============================================================ */
@media (max-width: 768px) {
  .immersive-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* PC 端的左栏在移动端隐藏，改由 .immersive-bg 承载数字人 */
  .immersive-split__left {
    display: none;
  }

  .immersive-split__right {
    /* 透明背景，让背景层的数字人透出 */
    background-color: transparent;
  }

  /* 主内容区：顶部/底部安全区 + 半透明毛玻璃面板 */
  .immersive-main {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top));
    padding-bottom: calc(var(--input-area-height) + env(safe-area-inset-bottom));
  }
}

/* ============================================================
 * 10. 性能优化工具类
 * ============================================================ */

/* 声明为独立合成层，避免重绘时影响其他层 */
.immersive-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* 背景层专用：禁止捕获事件 + GPU 加速 */
.immersive-bg,
.immersive-mask {
  transform: translateZ(0);
}

/* 尊重用户减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .immersive-bg,
  .immersive-mask {
    will-change: auto;
  }
}