/*
 * 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;
  /* Pointer-fill (the lit rail from start → cursor on hover). The default
     `white 40%` paints a muddy light bar over a bright video frame; keep
     it barely above the base track so hover reads as a subtle highlight,
     not a slab. */
  --media-range-track-pointer-background: color-mix(in oklab, white 12%, 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;
}

/*
 * Big centered play affordance (YouTube / Telegram style). A translucent
 * dark disc + white glyph so it reads on ANY poster, light or dark. Shown
 * only while paused; fades out smoothly once playback starts. The
 * `centered-chrome` slot is centered by media-chrome; we size the disc and
 * scale the icon up via the play-button's `::part(button)`.
 */
.vp-center-play {
  --media-control-background: rgb(0 0 0 / 0.55);
  --media-control-hover-background: rgb(0 0 0 / 0.7);
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 9999px;
  color: rgb(255 255 255);
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.vp-center-play svg {
  width: 28px;
  height: 28px;
}

/* Hide the big play once the video is actually playing. */
media-controller:not([mediapaused]) .vp-center-play {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* The gesture receiver catches click/tap anywhere on the video to toggle
   play. It covers the whole frame (`inset: 0`) and must sit BELOW the
   control bar / center play — otherwise it overlays those buttons and
   swallows their clicks (the bug: clicking center-play did nothing while
   the spacebar still worked). z-index:0 keeps it above the canvas but
   under the controls, which we lift to z-index:2 below. */
media-gesture-receiver {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Controls sit ABOVE the gesture receiver so their clicks land on them. */
.vp-center-play,
.video-player__control-bar {
  z-index: 2;
}

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

/*
 * Control-bar visibility — YouTube-style, exactly one play affordance.
 *
 * - PAUSED (incl. before first play): the big center-play owns the frame;
 *   the bottom bar is hidden so there are never TWO play buttons at once.
 * - PLAYING: center-play is gone (faded by the rule above); the bottom bar
 *   reveals on hover / interaction and auto-hides after media-chrome flags
 *   inactivity (`userinactive`, driven by `autohide` on <media-controller>),
 *   so the frame stays clean while watching. It reappears on mousemove /
 *   focus.
 *
 * media-chrome sets `userinactive` only while playback runs and removes it
 * on mousemove / pause / focus. We fade the whole bar (controls + gradient
 * scrim) together.
 */
.video-player__control-bar {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

/* Hide the bar while paused — center-play is the sole control then. */
media-controller[mediapaused] .video-player__control-bar {
  opacity: 0;
  pointer-events: none;
}

/* Auto-hide the bar after inactivity while playing. */
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.
 *
 * Both the empty `preview-box` and the `current-box` scrub chip are hidden
 * (see the `::part` rules below) — without a thumbnails track neither
 * carries useful content, and the elapsed time already shows in
 * `<MediaTimeDisplay>`.
 */
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;
}

/*
 * `current-box` (the scrub-time chip) renders as a small white box ABOVE
 * the rail at the pointer position. Without a thumbnails track it carries
 * no useful preview, and the elapsed time already lives in
 * `<MediaTimeDisplay>` — so it only ever shows as a stray white dash over
 * the video. Hide it entirely, same as `preview-box`.
 */
media-time-range::part(current-box) {
  display: none;
}

/*
 * Provider embeds (YouTube / Vimeo) own their native controls.
 *
 * media-chrome cannot reliably drive an opaque provider iframe, and
 * YouTube's ToS chrome (title bar, branding tray, share/clock icons)
 * bleeds through and can't be hidden — layering OUR controls on top
 * produced a duplicate, jittery UI. So we render NO media-chrome control
 * surface for these sources (see `showControls` in VideoPlayer.tsx) and
 * let the native player handle playback, hover-reveal and fullscreen.
 *
 * The provider iframe must stay fully interactive so its native controls
 * work — so we explicitly DON'T disable pointer events here.
 */
youtube-video iframe,
vimeo-video iframe {
  pointer-events: auto;
}