/*
 * 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;

  /* 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;
}

/*
 * Suppress media-chrome's built-in tooltips. They are sticky elements
 * slotted under each control button's shadow root (exposed via
 * `part="tooltip"`) and paint a permanent "Play" / "Mute" / "Enter
 * fullscreen" label below the bar. We wrap each control with our own
 * Radix-backed <Tooltip> from @djangocfg/ui-core, which fires only on
 * hover/focus and matches the rest of the platform. Reach into the
 * shadow DOM via ::part(tooltip) — a global `media-tooltip` selector
 * cannot pierce the boundary.
 */
media-play-button::part(tooltip),
media-mute-button::part(tooltip),
media-fullscreen-button::part(tooltip),
media-pip-button::part(tooltip),
media-playback-rate-button::part(tooltip),
media-captions-button::part(tooltip),
media-airplay-button::part(tooltip),
media-cast-button::part(tooltip),
media-seek-forward-button::part(tooltip),
media-seek-backward-button::part(tooltip) {
  display: none !important;
}

/*
 * 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);

  /* Kill media-chrome's default blue focus rectangle on the range track.
     media-chrome paints a `box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9)`
     via `--media-focus-box-shadow` whenever the inner `<input type=range>`
     matches `:focus-visible`, which wraps the entire seek-bar in a big
     blue rectangle on click/Tab. We opt out of the track-wide ring and
     surface focus on the thumb instead (see :focus-visible below). */
  --media-focus-box-shadow: none;
}

/* Reveal the accent thumb only while hovering / scrubbing the rail, OR
   when the rail is keyboard-focused so a11y keyboard users still see
   where focus lives. */
media-time-range:hover,
media-time-range:focus-within {
  --media-range-thumb-opacity: 1;
}

/* Keyboard focus indicator: a ring around the thumb (not the track).
   Uses the platform `--ring` semantic token so it matches every other
   focusable surface. */
media-time-range:focus-within {
  --media-range-thumb-box-shadow: 0 0 0 2px var(--ring);
}

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

/*
 * YouTube iframe bleed-through suppression.
 *
 * YouTube's IFrame embed ToS requires showing some chrome that cannot be
 * hidden via player params: the title bar at the top, the large pause
 * button on the pause screen, and the bottom branding/share tray on
 * hover/pause. We can't remove them, but we CAN make them non-interactive
 * — so the user never triggers YouTube's hover-state, never gets a
 * "More videos" overlay, and clicks never reach the YT iframe.
 *
 * The <youtube-video> custom element renders an inner <iframe>; disable
 * pointer events on it (and on the wrapper itself, just in case the
 * element later swaps layout). The companion `.vp-yt-click-shield` div
 * inside <media-controller> absorbs clicks and converts them into
 * media-chrome play/pause requests — so click-to-toggle still works.
 *
 * Our control bar lives above the shield and re-enables pointer events
 * for the slot, so the controls stay clickable.
 */
youtube-video,
youtube-video iframe {
  pointer-events: none;
}

.vp-yt-click-shield {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: transparent;
  pointer-events: auto;
  /* Sit above the iframe but below the slotted control bar. */
  z-index: 1;
}

/* media-chrome slots its control surfaces directly under
   <media-controller>; raise them above the click-shield and restore
   pointer events so buttons remain interactive. */
media-controller > media-control-bar,
media-controller > [slot='centered-chrome'],
media-controller > [slot='top-chrome'] {
  z-index: 2;
  pointer-events: auto;
}

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);
}
