/* video-immersion.css
 * Styles for the video player mode on index.html (loaded after hiru02.css).
 * Word spans inside the subtitle are the normal .zh-words / a[rel=popover]
 * elements, so the existing dictionary popup, marking and
 * "send to flashcards" styles apply unchanged.
 *
 * Layout
 *  - desktop: subtitle and control bar are overlaid on the video (bottom).
 *  - phones (<= 600px, the same breakpoint hiru02.css uses): the video keeps its full
 *    16:9 area; the control bar and the subtitle sit BELOW it, so neither covers the picture.
 */

/* ---- while the video function is on: the EPUB / URL import row would overwrite the text under the player.
        (hiru02.css forces #import-buttons-row visible on phones with !important, hence !important here too) ---- */
body.vi-video-on #import-buttons-row { display: none !important; }

/* ---- panel ---- */
#vi-panel { margin-bottom: 14px !important; }
#vi-panel .vi-sources { display: flex; gap: 8px; margin-bottom: 8px; }
#vi-panel .vi-sources .btn { flex: 1 1 0; min-width: 0; font-size: 15px; margin: 0; text-align: center; }
#vi-panel .vi-url-row { display: flex; gap: 8px; margin-bottom: 10px; }
#vi-panel .vi-url-row input { flex: 1; min-width: 0; box-sizing: border-box; padding: 6px 8px; font-size: 14px; margin: 0; height: auto; }
#vi-panel .vi-url-row .btn { margin: 0; font-size: 14px; }

/* status line: a <div>, not a <p> (hiru02.css numbers every "#article p" via p:before) */
#vi-status { font-size: 12px; line-height: 1.5; color: #888; margin: 6px 0 0; text-align: center; }
#vi-status:empty { display: none; }
#vi-status .vi-st { display: inline-block; }
#vi-status .vi-st + .vi-st::before { content: '・'; opacity: .6; margin: 0 2px; }
#vi-status .vi-note { display: block; margin-top: 2px; }

/* ---- stage ---- */
.vi-stage {
  position: relative; width: 100%; background: #000; border-radius: 8px;
  overflow: hidden; user-select: none;
  --vi-font: 24px;   /* = #article font-size; video-immersion.js re-reads it from #textOutput */
}
.vi-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vi-media video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.vi-media .vi-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #aaa; font-size: 14px; text-align: center; padding: 20px; pointer-events: none;
}
.vi-stage.vi-has-video .vi-empty { display: none; }
.vi-stage.vi-drag { outline: 3px dashed #5bb75b; outline-offset: -6px; }

/* embedded players (YouTube / bilibili iframes) */
.vi-media .vi-embed { position: absolute; inset: 0; display: none; }
.vi-media .vi-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vi-stage.vi-mode-embed video { display: none; }
.vi-stage.vi-mode-embed .vi-embed { display: block; }
.vi-stage .vi-subtitle { z-index: 3; }
.vi-stage .vi-controls { z-index: 4; }
/* bilibili gives no play position: no subtitle sync, and keep its own control bar usable */
.vi-stage.vi-nosync .vi-controls, .vi-stage.vi-nosync .vi-subtitle { display: none; }

/* subtitle (desktop: overlay above the control bar) */
.vi-subtitle {
  position: absolute; left: 0; right: 0; bottom: 52px; text-align: center;
  padding: 0 10px; pointer-events: none; font-size: calc(var(--vi-font) * var(--vi-scale, 1)); line-height: 150%;   /* same as #article */
}
.vi-subtitle > * { pointer-events: auto; }
.vi-subtitle .vi-cue, .vi-subtitle .vi-plain {
  display: inline-block; max-width: 96%; background: rgba(0, 0, 0, .72);
  border-radius: 6px; padding: 2px 12px; color: #fff; user-select: text;
}
.vi-subtitle .vi-plain { opacity: .75; }
.vi-subtitle .vi-cue sent { display: inline; }
/* hiru02.css numbers every "#article p" (p:before + counter). /api/process wraps text in <p>,
   so cue text picked up those numbers; switch it off inside the player only (text mode keeps it).
   "#article" in the selector makes this beat the original rule's specificity. */
#article .vi-subtitle p, #article .vi-cue p { display: inline; margin: 0; padding: 0; }
#article .vi-subtitle p:before, #article .vi-subtitle p::before,
#article .vi-cue p:before, #article .vi-cue p::before { content: none !important; counter-increment: none !important; }
/* unmarked words must stay readable on the dark strip (marked words keep their own colours) */
body .vi-subtitle .zh-words:not(.marked) { color: #fff !important; }
body .vi-subtitle .zh-words:not(.marked):hover { color: #8fd0ff !important; background: rgba(255,255,255,.15); }
.vi-stage.vi-subs-off .vi-subtitle { display: none; }

/* control bar (desktop: overlay at the bottom of the video) */
.vi-controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 14px;
}
.vi-controls button, .vi-controls select {
  background: transparent; border: 0; color: #fff; font-size: 16px; line-height: 1; padding: 6px 7px;
  cursor: pointer; border-radius: 4px; margin: 0; height: auto; width: auto;
}
.vi-controls select { font-size: 12px; background: rgba(255,255,255,.12); padding: 4px 2px; }
.vi-controls select option { color: #000; }
.vi-controls button:hover { background: rgba(255,255,255,.18); }
.vi-controls button.vi-on { background: #5bb75b; }
.vi-controls input[type=range] { flex: 1; min-width: 40px; margin: 0; height: 18px; padding: 0; }
.vi-controls .vi-time { font-size: 12px; white-space: nowrap; min-width: 84px; text-align: center; }

/* pseudo fullscreen: kept below the popover z-index (1010) so dictionary popups stay visible */
.vi-stage.vi-full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; width: 100vw; height: 100vh; }
.vi-stage.vi-full .vi-media { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.vi-stage.vi-full .vi-subtitle { font-size: calc(var(--vi-font) * var(--vi-scale, 1) * 1.3); }
body.vi-noscroll { overflow: hidden; }

/* ---- toolbar under the stage: two groups that wrap as units ---- */
.vi-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: #666; }
.vi-tool-group { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.vi-toolbar .btn { font-size: 13px; padding: 3px 9px; margin: 0; }
.vi-toolbar .vi-offset-label { min-width: 44px; text-align: center; }

/* ---- night mode ---- */
body.night-mode #vi-panel .vi-url-row input { background: #2a2a2a; color: #e8e8e8; border: 1px solid #555; }
body.night-mode .vi-toolbar, body.night-mode #vi-status { color: #aaa; }
.night-mode #video-settings-modal .epub-modal-box p { color: #bbb !important; }
.night-mode #video-settings-modal .epub-modal-box,
.night-mode #video-settings-modal .epub-modal-close { color: #e8e8e8; }

/* ---- phones: video keeps its whole picture; controls and subtitle go below it ---- */
@media screen and (max-width: 600px) {
  #vi-panel { margin-top: 10px !important; }
  #vi-panel .vi-sources { gap: 5px; }
  #vi-panel .vi-sources .btn { display: flex; align-items: center; justify-content: center; height: 35px; padding: 0 4px; font-size: 14px; }
  #vi-panel .vi-sources .vi-hint { display: none; }

  .vi-stage { display: flex; flex-direction: column; }
  .vi-media { order: 0; }

  /* control bar: row 1 = seek bar + time, row 2 = the buttons */
  .vi-controls {
    order: 1; position: static; flex-wrap: wrap; justify-content: space-between; gap: 2px 2px;
    padding: 6px 6px 8px; background: #161616;
  }
  .vi-controls input[type=range] { order: -2; flex: 1 1 calc(100% - 96px); min-width: 0; }
  .vi-controls .vi-time { order: -1; flex: 0 0 90px; min-width: 0; font-size: 11px; }
  .vi-controls button { flex: 1 1 34px; min-width: 34px; padding: 8px 2px; font-size: 17px; }
  .vi-controls #vi-cc { font-size: 13px; }
  .vi-controls select { flex: 0 0 54px; }

  /* subtitle strip below the controls; two lines are reserved so the layout does not jump between cues */
  .vi-subtitle {
    order: 2; position: static; display: flex; align-items: center; justify-content: center;
    min-height: calc(var(--vi-font) * var(--vi-scale, 1) * 3 + 12px);
    padding: 6px 8px; background: #000; pointer-events: auto;
  }
  .vi-stage.vi-subs-off .vi-subtitle { display: none; }
  .vi-stage.vi-nosync .vi-controls, .vi-stage.vi-nosync .vi-subtitle { display: none; }

  /* full screen on a phone: the picture takes the remaining height, controls and subtitle stay below it */
  .vi-stage.vi-full { flex-direction: column; }
  .vi-stage.vi-full .vi-media { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%; }
  .vi-stage.vi-full .vi-subtitle { font-size: calc(var(--vi-font) * var(--vi-scale, 1)); }

  /* toolbar and status */
  .vi-toolbar { font-size: 12px; gap: 6px 10px; }
  .vi-toolbar .btn { font-size: 12px; padding: 3px 8px; }
  .vi-toolbar .vi-offset-label { min-width: 36px; }
  #vi-status { font-size: 11px; }
}

/* ---- subtitle paging bar: same look as continue-reading.js's bar (‹ 前へ  3 / 12  次へ ›) ---- */
#vi-pagebar { margin: 10px auto; max-width: 640px; }
#vi-pagebar .vi-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
#vi-pagebar .vi-pg-progress { font-size: 14px; color: #666; min-width: 56px; text-align: center; }
#vi-pagebar .btn[disabled] { opacity: .5; cursor: default; }
#vi-pagebar .vi-pg-status { font-size: 13px; text-align: center; margin-top: 6px; min-height: 1.2em; color: #666; }
#vi-pagebar .vi-follow { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: normal; cursor: pointer; }
#vi-pagebar .vi-follow input { margin: 0; }

/* While subtitles are loaded, continue-reading's own bar slot is used by the subtitle pages:
   its 続きを読む buttons (old EPUB/URL text) are hidden, the slot itself stays visible. */
body.vi-subs-active .cr-bar-wrap { display: block !important; }
body.vi-subs-active .cr-bar-wrap > .cr-bar,
body.vi-subs-active .cr-bar-wrap > .cr-status { display: none !important; }