/*
 * media-chrome theme.
 *
 * The video canvas is ALWAYS a black surface, so the control chrome is
 * themed against on-black contrast — icons/text stay light in both the
 * light and dark app themes. Only the accent (progress bar / thumb) and
 * the scrub-time popover follow semantic tokens, since the popover is a
 * detached surface that should match the rest of the platform.
 *
 * media-chrome ships its own focus-ring + tooltip styles; we only override
 * what's needed to match the rest of the platform.
 */

media-controller {
  /* On-black control chrome — fixed regardless of app theme. */
  --video-on-canvas: rgb(245 245 245);

  /* Surfaces */
  --media-control-background: transparent;
  --media-control-hover-background: rgb(255 255 255 / 0.14);
  --media-control-padding: 0;

  /* Foreground / accent */
  --media-primary-color: var(--primary);
  --media-secondary-color: rgb(255 255 255 / 0.6);
  --media-text-color: var(--video-on-canvas);
  --media-icon-color: var(--video-on-canvas);
  --media-loading-icon-color: var(--video-on-canvas);

  /* Range / progress bar — thin translucent rail, small accent thumb.
     The range element keeps a tall hit-area; only the painted track is
     4px so it reads as a slim progress line over the video. */
  --media-range-track-background: color-mix(in oklab, white 28%, transparent);
  --media-range-track-border-radius: 9999px;
  --media-range-track-height: 4px;
  --media-range-track-pointer-background: color-mix(in oklab, white 40%, transparent);
  --media-range-bar-color: var(--primary);
  --media-range-thumb-background: var(--primary);
  --media-range-thumb-border-radius: 9999px;
  --media-range-thumb-width: 12px;
  --media-range-thumb-height: 12px;
  --media-range-thumb-opacity: 0;
  --media-range-thumb-transition: opacity 0.15s ease;

  /* Tooltip */
  --media-tooltip-background: var(--popover);
  --media-tooltip-color: var(--popover-foreground);
  --media-tooltip-border-radius: 6px;

  /* Font */
  --media-font-family: inherit;
  --media-font-size: 12px;

  /* Layout */
  display: block;
  position: relative;
  width: 100%;
}

/* Square icon buttons should size to the wrapper. */
media-controller .media-control-square::part(button) {
  width: 100%;
  height: 100%;
}

/*
 * Control buttons / text — fixed on-black colours. The video canvas is
 * always dark, so these never follow the app's light/dark theme.
 */
.video-player__control {
  color: var(--video-on-canvas, rgb(245 245 245));
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.video-player__control:hover {
  background-color: rgb(255 255 255 / 0.14);
}

.video-player__time {
  color: rgb(255 255 255 / 0.72);
}

/* Hide the default control bar background — we paint our own gradient
   scrim via the <ControlsBar> wrapper. */
media-control-bar {
  background: transparent;
}

/*
 * Auto-hide. media-chrome flags inactivity by setting `userinactive` on
 * the <media-controller>; it only does so while playback is running, and
 * removes it on mousemove / pause / focus. We fade the whole control bar
 * (controls + gradient scrim) together with a smooth opacity transition.
 */
.video-player__control-bar {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

media-controller[userinactive]:not([mediapaused]) .video-player__control-bar {
  opacity: 0;
  pointer-events: none;
}

/*
 * Seek-bar hover preview. `<media-time-range>` exposes two slotted
 * boxes: `preview-box` (a 120×109 thumbnail panel) and `current-box`
 * (the scrub time label). With no `thumbnails` track wired up the
 * preview-box has zero slotted content but still paints its default
 * dark `rgb(31,31,31)` background — it shows as a stray empty
 * rectangle floating over the video.
 *
 * Hide the empty preview-box entirely; keep `current-box` and style
 * its time label as a compact popover chip.
 */
media-time-range {
  /* media-chrome's own preview/box vars — point them at our popover
     surface so the scrub time chip matches the rest of the controls. */
  --media-preview-background: var(--popover);
  --media-preview-border-radius: 6px;
  --media-text-color: var(--popover-foreground);
}

/* Reveal the accent thumb only while hovering / scrubbing the rail. */
media-time-range:hover {
  --media-range-thumb-opacity: 1;
}

media-time-range::part(preview-box) {
  display: none;
}

media-time-range::part(current-box) {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--popover) !important;
  color: var(--popover-foreground);
  font-size: 11px;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--foreground) 18%, transparent);
}
