/* ============================================================================
   Video Viewer — a QuickTime-Player-style window: numbered thumbnail rail on
   the left, a single embedded YouTube stage on the right. Opened from the
   dock's Video Viewer icon or by clicking one of the desktop .mov
   icons (see video-viewer.js). Every selector is prefixed .vv- / #win-video.
   ========================================================================== */

#win-video {
  height: auto;
  min-width: 640px;
  cursor: default;      /* only the title bar drags */
  touch-action: auto;
}

.vv-chrome {
  --vv-line: #000000;
  --vv-bar: #97928B;
  --vv-rail: #2B2B2E;
  --vv-stage: #000000;

  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vv-bar);
  border: 1px solid var(--vv-line);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Title bar --- */
.vv-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 40px;
  padding: 0 12px;
  background: var(--vv-bar);
  cursor: grab;
}
.vv-chrome .vv-titlebar:active { cursor: grabbing; }

.vv-lights { display: flex; gap: 6px; flex: none; }
.vv-lights i {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--vv-line);
}
.vv-lights i:nth-child(1) { background: #FF8875; }
.vv-lights i:nth-child(2) { background: #FFE78E; }
.vv-lights i:nth-child(3) { background: #94E9BC; }

.vv-name {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vv-clapper { flex: none; }

/* --- Body: rail + stage ---
   The window bottoms out exactly where the video does, and the rail scrolls
   inside that height (2026-08-11). Both fall out of taking the rail OUT OF
   FLOW: absolutely positioned content does not contribute to its container's
   height, so .vv-body measures only the stage — 16:9 of whatever width is left
   — while top/bottom:0 stretches the rail to that same height and its
   overflow-y finally has a bound to scroll against.

   The rail used to be an in-flow flex item with align-items:flex-start, which
   meant the taller of the two won: five 16:9 thumbnails stack well past a
   single 16:9 stage, so the window grew to fit the rail and left a slab of
   dead chrome beside the video, and overflow-y:auto never fired because
   nothing ever constrained the rail's height. */
.vv-body {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

.vv-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 220px;
  overflow-y: auto;
  background: #FFFFFF;
  border-right: 1px solid var(--vv-line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vv-rail::-webkit-scrollbar { width: 8px; }
.vv-rail::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 4px; }

.vv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* No-text-selection on tap-hold, scoped to the TEXT spans only — never on
   .vv-item itself: on mobile the row hosts the playing YouTube iframe, and
   -webkit-user-select:none on an iframe's ancestor is a known WebKit quirk
   that can leave the embedded player untappable on iOS. */
.vv-item-index,
.vv-item-title {
  user-select: none;
  -webkit-user-select: none;
}

.vv-item-index {
  flex: none;
  width: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #55585A;
  text-align: center;
}

/* Filename label per item — mobile-only (the phone layout is a numbered
   list of titles with big thumbnails); the desktop rail stays compact. */
.vv-item-title { display: none; }

.vv-item-frame {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--vv-rail);
}
.vv-item:hover .vv-item-frame { border-color: rgba(0, 0, 0, .35); }
.vv-item.is-active .vv-item-frame { border-color: #FF4052; }

/* "Coming soon" placeholder row — asset not shipped yet (youtubeId: null in
   video-viewer.js). Dimmed with the same .35 this codebase already uses for
   an unavailable control (browser.js's back/forward arrows), and inert for
   real: pointer-events here, no role=button/tabindex in the markup, and no
   listeners attached in the JS. Belt and braces on purpose — a stray tap must
   never blank the player or re-parent the iframe out of the row that's
   currently playing. */
.vv-item--soon {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* Grey tile standing in for the YouTube thumbnail: with no video id,
   img.youtube.com/vi/null/hqdefault.jpg would render as a broken image. */
.vv-item-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D9D7D2;
  color: #1E1E1E;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.vv-item-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Stage: single embedded player ---
   The only in-flow child of .vv-body, so its 16:9 is what sets the window's
   height. margin-left clears the out-of-flow rail (220px + its 1px border);
   solo mode drops the rail, so it drops the margin with it. */
.vv-stage {
  flex: 1;
  min-width: 0;
  margin-left: 221px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vv-stage);
}

.vv-player {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Solo mode: one video, no rail ---
   Set by video-viewer.js's window.openVideoSolo, used by the rejects folder
   for clips that aren't part of the rail's launch set. Only the rail goes
   away; the stage already flexes to fill what's left. */
.vv-solo .vv-rail { display: none; }
.vv-solo .vv-stage { margin-left: 0; }

/* ============================================================================
   Mobile (<=767px) — a numbered LIST of videos (per the user's mockup): each
   row is "N  filename" with a large tappable thumbnail beneath it, hairline
   separators between rows, no standing player pane. Tapping a row moves the
   YouTube iframe into that row's frame and plays inline (video-viewer.js).
   ========================================================================== */
@media (max-width: 767px) {
  #win-video {
    min-width: 0;
  }

  /* Edge-to-edge app, not a floating card. */
  .vv-chrome { border-radius: 0; }

  /* Titlebar per the mockup: just the clapper mark, left-aligned. */
  .vv-titlebar { justify-content: flex-start; padding: 12px 16px; }
  .vv-name { display: none; }
  .vv-clapper { width: 36px; height: 31px; }

  .vv-body { flex-direction: column; }

  /* No standing player — the iframe lives inside whichever item is
     playing (moved there by video-viewer.js). */
  .vv-stage { display: none; }

  /* ...except in solo mode, which has no rail rows to move the iframe into,
     so the stage IS the player here exactly as on desktop (video-viewer.js's
     playSolo keeps it parented there). The titlebar's filename is hidden on
     mobile by the .vv-name rule above, and solo mode is reached by tapping a
     named row in the rejects folder, so nothing is lost by leaving that as
     is. */
  .vv-solo .vv-stage {
    display: flex;
    width: 100%;
    flex: none;
  }

  /* Back in flow: the desktop rule takes the rail out of it so the window can
     end where the video does, but here the rail IS the page — it stacks under
     the (hidden) stage and owns the scroll. position/margin are reset
     explicitly rather than left to inherit the desktop geometry. */
  .vv-body { position: static; }
  .vv-stage { margin-left: 0; }
  .vv-rail {
    position: static;
    flex: 1;
    width: 100%;
    min-width: 0;
    overflow-y: auto;
    border-right: none;
    padding: 0 0 var(--m-bottom-inset);
    gap: 0;
  }

  .vv-item {
    display: block;
    width: 100%;
    padding: 22px 16px 26px;
    border-bottom: 1px solid var(--vv-line);
  }

  .vv-item-index {
    display: inline-block;
    width: auto;
    font-size: 17px;
    font-weight: 500;
    color: #1E1E1E;
  }

  .vv-item-title {
    display: inline-block;
    margin-left: 26px;
    font-size: 17px;
    font-weight: 500;
    color: #1E1E1E;
  }

  .vv-item-frame {
    display: block;
    flex: none;
    margin: 16px 0 0 42px;
    width: min(72vw, 420px);
    aspect-ratio: 16 / 9;
  }

  /* The mobile tile is min(72vw, 420px), not the compact desktop rail thumb —
     the 10px label would be lost on it. */
  .vv-item-soon { font-size: 15px; }

  /* The relocated player fills the frame exactly like the thumbnail it
     covers (the frame is already position:relative + overflow:hidden).
     z-index + pointer-events are belt-and-braces for iOS: nothing may sit
     above the player, and taps over it must always reach YouTube's own
     controls. */
  .vv-item-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
    pointer-events: auto;
  }
}