/* ════════════════════════════════════════════════
   player-fullscreen.css — DOM 页面内全屏样式（Phase 2.2-C）

   两套机制并存：
     - 标准 Fullscreen API：`:fullscreen` / `:-webkit-full-screen` 选择器生效
     - 伪全屏（iOS / 拒绝标准 API 时兜底）：`.video-wrapper.lp-mock-fullscreen`

   关键约束：
     - iOS Safari 的 `Element.requestFullscreen()` 对非 `<video>` 元素一律
       reject（WebKit 硬性限制），所以 iOS 上几乎一定走伪全屏
     - iOS 伪全屏受浏览器视口约束，**无法覆盖系统状态栏**——只有用户把
       页面添加到主屏（PWA standalone）才能突破
     - 真正"全屏沉浸"在 iOS Safari 浏览器中不可达；本机制提供的是
       "最大化的页面内全屏"，学习层完整保留
════════════════════════════════════════════════ */

/* ─── 共用：全屏容器（标准 + 伪全屏共用同一套布局） ───
   不用 flex，用 block + 子元素 absolute 定位。

   重要：不设 width/height 为 100vw/100vh。iOS Safari 中 100vh 算的是
   Layout Viewport，在 URL 栏动态隐藏后与 Visual Viewport 不一致，
   子元素 bottom 定位会被裁到可见区之外。靠 fixed + inset: 0 让浏览器
   自然计算为 Visual Viewport 边界，遵循 URL 栏动态变化。 */
.video-wrapper:fullscreen,
.video-wrapper:-webkit-full-screen,
.video-wrapper.lp-mock-fullscreen {
  max-height: none;
  background: #000;
  display: block;
}

/* 伪全屏专属：手动 fixed 占满 + 高 z-index。
   inset: 0 赋予 top/right/bottom/left = 0，使 fixed 元素拉伸到 Visual Viewport 边界。 */
.video-wrapper.lp-mock-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
}

/* 标准 fullscreen API 下，浏览器 UA stylesheet 已为 :fullscreen 设为 100% width/height，
   但某些 WebKit 版本在深嵌套子节点上表现不一致。显式补一份： */
.video-wrapper:fullscreen,
.video-wrapper:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

/* 视频 absolute 占满 wrapper */
.video-wrapper:fullscreen .lp-video-element,
.video-wrapper:-webkit-full-screen .lp-video-element,
.video-wrapper.lp-mock-fullscreen .lp-video-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
}

/* 控制栏：safe-area 适配 + 抬高高度 */
.video-wrapper:fullscreen .lp-controls,
.video-wrapper:-webkit-full-screen .lp-controls {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(56px + env(safe-area-inset-bottom));
}

/* 伪全屏（手机端）：控制栏保持固定高度，避免工具栏被推太高 */
.video-wrapper.lp-mock-fullscreen .lp-controls {
  padding-bottom: 0;
  height: 56px;
}

/* 迁移进来的工具栏：放到底部安全位置（控制栏之上）。
   工具栏 height: 40px（player.css）。 */
.video-wrapper:fullscreen .player-tool-bar,
.video-wrapper:-webkit-full-screen .player-tool-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--lp-controls-h, 0px) + env(safe-area-inset-bottom));
  z-index: 24;                /* 低于控制栏 25 */
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

/* 伪全屏（手机端）：去掉 safe-area-inset-bottom 避免工具栏被推太高遮挡字幕 */
.video-wrapper.lp-mock-fullscreen .player-tool-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--lp-controls-h, 0px);
  z-index: 24;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

/* 悬浮字幕：位于工具栏之上（工具栏 40px + 8px gap = 48px 累加） */
.video-wrapper:fullscreen .lp-floating-subtitle-host,
.video-wrapper:-webkit-full-screen .lp-floating-subtitle-host {
  bottom: calc(var(--lp-controls-h, 0px) + env(safe-area-inset-bottom) + 48px);
}

/* 伪全屏（手机端）：去掉 safe-area-inset-bottom 同步调整 */
.video-wrapper.lp-mock-fullscreen .lp-floating-subtitle-host {
  bottom: calc(var(--lp-controls-h, 0px) + 48px);
}

/* body 锁滚动（仅伪全屏；标准 fullscreen 由浏览器自动锁视口） */
body.lp-fullscreen-active {
  overflow: hidden;
}