/* ══════════════════════════════════════
   电脑版布局 · 第 3 阶段：播放器三栏（复习播放器、仓库 / 学习播放器）
   只把播放页现有的直接子节点用 grid 重新摆位，不改它们的 DOM：
     左：今日队列（只有复习播放器，srs-queue-panel.js 挂进来）
     中：视频 / 工具条 / 评分条（或底部进度条）
     右：搜索 + 字幕（训练模式时训练区占同一格）
   断点与 desktop-shell.css 一致（≥1100px 且 html.lp-shell）。规划：进行中的任务/电脑版布局-方案A落地.md
══════════════════════════════════════ */

/* 队列栏、专注模式的按钮与焦点字幕只在宽屏出现 */
.srs-queue-panel,
.lp-focus-bar,
.lp-focus-caption { display: none; }

@media (min-width: 1100px) {
  html.lp-shell #page-srs-player { --queue-w: 280px; }
  html.lp-shell #page-srs-player.sqp-collapsed { --queue-w: 52px; }
  html.lp-shell #page-repo-player { --queue-w: 0px; }

  html.lp-shell #page-srs-player.active,
  html.lp-shell #page-repo-player.active {
    --transcript-w: clamp(340px, 30vw, 440px);
    display: grid;
    grid-template-columns: var(--queue-w) minmax(0, 1fr) var(--transcript-w);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "nav   nav    nav"
      "queue video  trans"
      "queue tools  trans"
      "queue .      trans"
      "queue bottom trans";
    /* 页面上的 inline background:#000 是手机版「视频顶天」的底色；三栏里中栏是浅色工作区 */
    background: var(--bg) !important;
  }
  /* 没点名的子节点默认落中栏，免得被 grid 自动摆进队列栏或字幕栏 */
  html.lp-shell :where(#page-srs-player, #page-repo-player) > * { grid-column: 2; }

  html.lp-shell #page-srs-player .player-nav-bar,
  html.lp-shell #page-repo-player .player-nav-bar { grid-area: nav; }

  html.lp-shell #page-srs-player .video-wrapper,
  html.lp-shell #page-repo-player .video-wrapper {
    grid-area: video;
    margin: 16px 20px 0;
    border-radius: 14px;
    overflow: hidden;
  }
  /* 手机版把视频压在 38vh 以内；三栏里中栏够宽，按宽度撑满，只防竖屏视频把工具条挤出屏 */
  html.lp-shell #page-srs-player .lp-video-element,
  html.lp-shell #page-repo-player .lp-video-element {
    max-height: calc(100vh - 44px - var(--safe-top) - 200px);
  }

  html.lp-shell #page-srs-player .player-tool-bar,
  html.lp-shell #page-repo-player .player-tool-bar {
    grid-area: tools;
    margin: 12px 20px 0;
    border: 1px solid var(--separator);
    border-radius: 12px;
    overflow: hidden;
  }

  html.lp-shell #page-srs-player .transcript-container,
  html.lp-shell #page-repo-player .transcript-container,
  html.lp-shell #srsTrainingArea,
  html.lp-shell #repoTrainingArea {
    grid-area: trans;
    min-height: 0;
    border-left: 1px solid var(--separator);
  }
  /* 搜索条叠在字幕栏顶上（grid 里给它单独一行会在关闭时留空），打开时字幕让出它的高度 */
  html.lp-shell #page-srs-player .search-bar,
  html.lp-shell #page-repo-player .search-bar {
    position: absolute;
    grid-area: auto; /* 同上：以整个播放页为包含块 */
    top: calc(44px + var(--safe-top));
    right: 0;
    z-index: 3;
    width: var(--transcript-w);
    box-sizing: border-box;
    border-left: 1px solid var(--separator);
  }
  html.lp-shell .search-bar.open + .transcript-container { padding-top: 51px; }

  html.lp-shell #srsRatingBar,
  html.lp-shell #repoProgressBar {
    grid-area: bottom;
    margin: 0 20px 16px;
    border: 1px solid var(--separator);
    border-radius: 16px;
    overflow: hidden;
  }

  /* ── 今日队列栏 ── */
  html.lp-shell #page-srs-player .srs-queue-panel {
    grid-area: queue;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
    border-right: 1px solid var(--separator);
  }
  .sqp-head {
    flex-shrink: 0;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--separator);
  }
  .sqp-title-row { display: flex; align-items: center; gap: 8px; }
  .sqp-title { flex: 1; font-size: 16px; font-weight: 800; color: var(--text); }
  .sqp-toggle {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--separator);
    border-radius: 8px;
    background: var(--card);
    color: #3a3a3c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .sqp-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .sqp-count { font-size: 12px; color: #3a3a3c; }
  .sqp-meter { height: 4px; border-radius: 2px; background: #e2e2e7; overflow: hidden; }
  .sqp-meter-fill { height: 4px; background: var(--green); transition: width 0.3s; }
  .sqp-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sqp-item {
    display: flex;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
  }
  .sqp-dot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1.5px solid #c7c7cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
  }
  .sqp-item.is-due .sqp-dot { border-color: #ff8a00; }
  .sqp-item.is-new .sqp-dot { border-color: var(--blue); }
  .sqp-item.is-done .sqp-dot { border: 0; background: rgba(52, 199, 89, 0.16); color: #1f7a37; }
  .sqp-item.is-current { background: rgba(255, 138, 0, 0.12); }
  .sqp-item.is-current .sqp-dot { border: 0; background: #ff8a00; }
  .sqp-body { flex: 1; min-width: 0; }
  .sqp-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sqp-item.is-current .sqp-text { font-weight: 700; white-space: normal; }
  .sqp-item.is-done .sqp-text { color: #6e6e73; }
  .sqp-meta { margin-top: 2px; font-size: 11px; color: #3a3a3c; }
  .sqp-item.is-current .sqp-meta { color: #b45000; font-weight: 700; }

  /* 收起成窄条 */
  #page-srs-player.sqp-collapsed .sqp-head { padding: 12px 0; align-items: center; border-bottom: 0; }
  #page-srs-player.sqp-collapsed .sqp-title,
  #page-srs-player.sqp-collapsed .sqp-count,
  #page-srs-player.sqp-collapsed .sqp-meter,
  #page-srs-player.sqp-collapsed .sqp-list { display: none; }
  .sqp-remaining { display: none; }
  #page-srs-player.sqp-collapsed .sqp-remaining {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #b45000;
    text-align: center;
  }

  /* ── 剪辑时的「捕获到复习」窗口：宽屏不遮罩，停靠在字幕栏底部，可以一边看字幕一边填 ── */
  html.lp-shell[data-lp-shell="rail"] #cardCreatorModal {
    padding: 0;
    align-items: flex-end;
    justify-content: flex-end;
    background: transparent;
    pointer-events: none;
  }
  html.lp-shell[data-lp-shell="rail"] #cardCreatorModal .modal-sheet {
    pointer-events: auto;
    width: clamp(340px, 30vw, 440px);
    max-width: none;
    max-height: 72vh;
    border-radius: 16px 0 0 0;
    border: 1px solid var(--separator);
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
  }
}

/* ══ 专注模式（第 4 阶段）：html.lp-focus 由 player-focus-mode.js 切换，只作用于两个播放页 ══ */
@media (min-width: 1100px) {
  /* 视频右上角的按钮条：平时「专注」，专注时加「全部字幕」 */
  html.lp-shell .lp-focus-bar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9; /* 压过触摸层（5）与起播失败提示（7） */
    display: flex;
    gap: 6px;
  }
  .lp-focus-btn {
    height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .lp-focus-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  html.lp-shell:not(.lp-focus) .lp-focus-btn[data-role="focus-drawer"] { display: none; }

  /* 侧栏图标栏收起 */
  html.lp-shell.lp-focus:is([data-lp-page="srs-player"], [data-lp-page="repo-player"]) { --shell-w: 0px; }
  html.lp-shell.lp-focus:is([data-lp-page="srs-player"], [data-lp-page="repo-player"]) .desktop-shell { display: none; }

  /* 舞台：去掉队列栏与字幕栏，中栏居中，加一行焦点字幕 */
  html.lp-shell.lp-focus #page-srs-player.active,
  html.lp-shell.lp-focus #page-repo-player.active {
    --queue-w: 0px;
    grid-template-columns: 0 minmax(0, 1fr) 0;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "nav   nav     nav"
      "queue video   trans"
      "queue caption trans"
      "queue tools   trans"
      "queue .       trans"
      "queue bottom  trans";
    background: #0d0d0f !important;
  }
  html.lp-shell.lp-focus #page-srs-player .srs-queue-panel { display: none; }
  html.lp-shell.lp-focus :is(#page-srs-player, #page-repo-player) :is(.video-wrapper, .player-tool-bar, #srsRatingBar, #repoProgressBar) {
    justify-self: center;
    width: calc(100% - 40px);
    max-width: 920px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  /* 当前句改由下方焦点字幕显示，画面里的悬浮字幕收起 */
  html.lp-shell.lp-focus :is(#page-srs-player, #page-repo-player) .lp-floating-subtitle-host { display: none; }
  html.lp-shell.lp-focus :is(#page-srs-player, #page-repo-player) .lp-video-element {
    max-height: calc(100vh - 44px - var(--safe-top) - 330px);
  }

  html.lp-shell.lp-focus :is(#page-srs-player, #page-repo-player) .lp-focus-caption {
    grid-area: caption;
    justify-self: center;
    width: calc(100% - 40px);
    max-width: 920px;
    padding: 18px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .lp-focus-line { min-height: 1.4em; }
  .lp-focus-line.is-side { font-size: 15px; color: rgba(242, 242, 247, 0.5); }
  .lp-focus-line.is-current {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
  }
  .lp-focus-line .content { display: inline; }

  /* 完整字幕（与搜索条）默认收起；L 或「全部字幕」打开成右侧抽屉，盖在舞台上、不推开视频 */
  html.lp-shell.lp-focus :is(#page-srs-player, #page-repo-player) :is(.transcript-container, .search-bar) { display: none; }
  html.lp-shell.lp-focus.lp-focus-drawer :is(#page-srs-player, #page-repo-player) .transcript-container {
    display: block;
    position: absolute;
    /* 绝对定位的 grid 子项会以自己的 grid 区域为包含块（字幕格从 44px 起算，top 会叠成 88）；
       撤掉区域，改以整个播放页为包含块 */
    grid-area: auto;
    top: calc(44px + var(--safe-top));
    right: 0;
    bottom: 0;
    z-index: 12;
    width: var(--transcript-w);
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
  }
  html.lp-shell.lp-focus.lp-focus-drawer :is(#page-srs-player, #page-repo-player) .search-bar.open {
    display: flex;
    z-index: 13;
  }
}