/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

video-player {
  display: contents;
}

/*
Required to override any default video and image styles (such as
Tailwind's CSS reset) and ensure they fill the container as expected.
*/
video-player video,
video-player [slot="poster"] {
  display: block;
  width: 100%;
  height: 100%;
}

video-player video::-webkit-media-text-track-container {
  transition: translate var(--media-caption-track-duration, 0) ease-out;
  transition-delay: var(--media-caption-track-delay, 0);
  translate: 0 var(--media-caption-track-y, 0);
  scale: 0.98;
  z-index: 1;
  font-family: inherit;
}

media-tooltip-group {
  display: contents;
}

:host {
  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */
  display: grid;
  width: 100%;
}

/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */
.media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
  display: none;
}

/* ==========================================================================
   Reset
   ========================================================================== */

.media-minimal-skin *,
.media-minimal-skin *::before,
.media-minimal-skin *::after {
  box-sizing: border-box;
}
.media-minimal-skin img,
.media-minimal-skin video,
.media-minimal-skin svg {
  display: block;
  max-width: 100%;
}
.media-minimal-skin button {
  font: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .media-minimal-skin {
    interpolate-size: allow-keywords;
  }
}

/* ==========================================================================
   Root Container
   ========================================================================== */

.media-minimal-skin {
  container: media-root / inline-size;
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--media-border-radius, 0.75rem);
  outline: 2px solid transparent;
  outline-offset: 2px;

  &:focus-visible {
    outline-color: currentColor;
  }
  font-family:
    Inter Variable,
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;

  & > * {
    font-size: 0.75rem; /* 12px at 100% font size */
  }

  @container media-root (width > 48rem) {
    & > * {
      font-size: 0.875rem; /* 14px at 100% font size */
    }
  }
}

/* ==========================================================================
   Media Element
   ========================================================================== */

.media-minimal-skin ::slotted(video),
.media-minimal-skin video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
}
.media-minimal-skin ::slotted(video) {
  border-radius: var(--media-video-border-radius);
}
.media-minimal-skin video {
  border-radius: inherit;
}

.media-minimal-skin:fullscreen ::slotted(video),
.media-minimal-skin:fullscreen video {
  object-fit: contain;
}

/* ==========================================================================
   Overlay / Scrim
   ========================================================================== */

.media-minimal-skin .media-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
  backdrop-filter: blur(0) saturate(1);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity, backdrop-filter;
  transition-duration: var(--media-controls-transition-duration);
  transition-timing-function: ease-out;
}

.media-minimal-skin .media-error ~ .media-overlay {
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-delay: var(--media-error-dialog-transition-delay);
}

.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,
.media-minimal-skin .media-error[data-open] ~ .media-overlay {
  opacity: 1;
}

.media-minimal-skin .media-error[data-open] ~ .media-overlay {
  backdrop-filter: blur(16px) saturate(1.2);
}

/* ==========================================================================
   Buffering Indicator
   ========================================================================== */

.media-minimal-skin .media-buffering-indicator {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: oklch(1 0 0);
  pointer-events: none;

  &[data-visible] {
    display: flex;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-minimal-skin .media-error:not([data-open]) {
  display: none;
}

.media-minimal-skin .media-error__title {
  font-weight: 600;
  line-height: 1.25;
}

.media-minimal-skin .media-error__description {
  opacity: 0.7;
  overflow-wrap: anywhere;
}

.media-minimal-skin .media-error__actions {
  display: flex;
  gap: 0.5rem;

  & > * {
    flex: 1;
  }
}

.media-minimal-skin .media-error[data-open] ~ .media-controls * {
  visibility: hidden;
}

/* ==========================================================================
   Controls
   ========================================================================== */

.media-minimal-skin .media-controls {
  container: media-controls / inline-size;
  display: flex;
  align-items: center;
  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
  --media-controls-current-shadow-color-subtle: oklch(
    from var(--media-controls-current-shadow-color) l c h /
    calc(alpha * 0.4)
  );
  background-color: var(--media-controls-background-color);
  backdrop-filter: var(--media-controls-backdrop-filter);
  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
}

/* ==========================================================================
   Time Controls & Display
   ========================================================================== */

.media-minimal-skin .media-time-controls {
  container: media-time-controls / inline-size;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
}

.media-minimal-skin .media-time-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.media-minimal-skin .media-time {
  font-variant-numeric: tabular-nums;
}

.media-minimal-skin .media-time--current,
.media-minimal-skin .media-time-separator {
  display: none;
}

@container media-root (width > 42rem) {
  .media-minimal-skin .media-time-controls {
    flex-direction: row;
  }

  .media-minimal-skin .media-time--duration,
  .media-minimal-skin .media-time-separator {
    color: oklch(from currentColor l c h / 0.6);
  }

  .media-minimal-skin .media-time--current,
  .media-minimal-skin .media-time-separator {
    display: inline;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base button */
.media-minimal-skin .media-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition-property: background-color, outline-offset, scale;
  will-change: scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  cursor: pointer;
  user-select: none;
  text-align: center;
  touch-action: manipulation;

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }

  &:active {
    scale: 0.98;
  }

  &[disabled] {
    opacity: 0.5;
    filter: grayscale(1);
    cursor: not-allowed;
  }

  &[data-availability="unavailable"] {
    display: none;
  }
}

@supports (corner-shape: squircle) {
  .media-minimal-skin .media-button {
    border-radius: 1rem;
    corner-shape: squircle;
  }
}

.media-minimal-skin .media-button--primary {
  background: oklch(1 0 0);
  color: oklch(0 0 0);
  font-weight: 500;
  text-shadow: none;
}

.media-minimal-skin .media-button--subtle {
  background: transparent;
  color: inherit;
  text-shadow: inherit;

  &:hover,
  &:focus-visible,
  &[aria-expanded="true"] {
    background: oklch(from currentColor l c h / 0.1);
  }
}

.media-minimal-skin .media-button--icon {
  display: grid;
  width: 2.375rem;
  padding: 0;
  aspect-ratio: 1;

  &:active {
    scale: 0.9;
  }

  & .media-icon {
    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));
  }
}

.media-minimal-skin .media-button--seek {
  & .media-icon__label {
    position: absolute;
    right: -1px;
    bottom: -3px;
    font-size: 10px;
    font-weight: 480;
    font-variant-numeric: tabular-nums;
  }

  &:has(.media-icon--flipped) .media-icon__label {
    right: unset;
    left: -1px;
  }
}

.media-minimal-skin .media-button--playback-rate {
  padding: 0;

  &::after {
    content: attr(data-rate) "\00D7";
    width: 4ch;
    font-variant-numeric: tabular-nums;
  }
}

/* ==========================================================================
   Button Groups
   ========================================================================== */

.media-minimal-skin .media-button-group {
  display: flex;
  align-items: center;
  gap: 0.075rem;

  @container media-root (width > 42rem) {
    gap: 0.125rem;
  }
}

/* ==========================================================================
   Icons
   ========================================================================== */

.media-minimal-skin .media-icon__container {
  position: relative;
}
.media-minimal-skin .media-icon {
  display: block;
  flex-shrink: 0;
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition-behavior: allow-discrete;
  transition-property: display, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.media-minimal-skin .media-icon--flipped {
  scale: -1 1;
}

/* ==========================================================================
   Poster Image
   ========================================================================== */

.media-minimal-skin media-poster,
.media-minimal-skin > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s;
  pointer-events: none;
}
.media-minimal-skin media-poster:not([data-visible]),
.media-minimal-skin > img:not([data-visible]) {
  opacity: 0;
}
.media-minimal-skin media-poster ::slotted(img),
.media-minimal-skin media-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: var(--media-video-border-radius);
}
.media-minimal-skin > img {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: inherit;
}

.media-minimal-skin:fullscreen media-poster ::slotted(img),
.media-minimal-skin:fullscreen media-poster img,
.media-minimal-skin:fullscreen > img {
  object-fit: contain;
}

/* ==========================================================================
   Media preview
   ========================================================================== */
.media-minimal-skin .media-preview {
  pointer-events: none;

  & .media-preview__thumbnail-wrapper {
    position: relative;
    border-radius: 0.5rem;
    background-color: oklch(0 0 0 / 0.9);
  }
  & .media-preview__thumbnail {
    display: block;
    border-radius: inherit;
  }

  & .media-preview__time {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
  }

  & .media-overlay {
    opacity: 1;
  }

  & .media-preview__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    opacity: 0;
  }

  & .media-preview__thumbnail,
  & .media-preview__spinner {
    transition: opacity 150ms ease-out;
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    & .media-preview__thumbnail {
      opacity: 0;
    }
    & .media-preview__spinner {
      opacity: 1;
    }
  }
}

/* ==========================================================================
   Slider
   ========================================================================== */

.media-minimal-skin .media-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  border-radius: calc(infinity * 1px);
  outline: none;
  cursor: pointer;

  &[data-orientation="horizontal"] {
    min-width: 5rem;
    width: 100%;
    height: 2rem;
  }

  &[data-orientation="vertical"] {
    width: 2rem;
    height: 4.5rem;
  }
}

.media-minimal-skin .media-slider__track {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: inherit;
  user-select: none;
  background-color: oklch(from currentColor l c h / 0.2);

  &[data-orientation="horizontal"] {
    width: 100%;
    height: 0.1875rem;
  }

  &[data-orientation="vertical"] {
    width: 0.1875rem;
    height: 100%;
  }
}

.media-minimal-skin .media-slider__thumb {
  position: absolute;
  translate: -50% -50%;
  z-index: 10;
  width: 0.75rem;
  height: 0.75rem;
  background-color: currentColor;
  border-radius: calc(infinity * 1px);
  box-shadow:
    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),
    0 1px 3px 0 oklch(0 0 0 / 0.15),
    0 1px 2px -1px oklch(0 0 0 / 0.15);
  opacity: 0;
  scale: 0.7;
  transform-origin: center;
  transition-property: opacity, scale, outline-offset;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -2px;

  &[data-orientation="horizontal"] {
    top: 50%;
    left: var(--media-slider-fill);
  }

  &[data-orientation="vertical"] {
    left: 50%;
    top: calc(100% - var(--media-slider-fill));
  }

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }
}

.media-minimal-skin .media-slider:hover .media-slider__thumb,
.media-minimal-skin .media-slider:focus-within .media-slider__thumb,
.media-minimal-skin .media-slider__thumb--persistent {
  opacity: 1;
  scale: 1;
}

.media-minimal-skin .media-slider__buffer,
.media-minimal-skin .media-slider__fill {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"],
.media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
  inset-block: 0;
  left: 0;
}

.media-minimal-skin .media-slider__buffer[data-orientation="vertical"],
.media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
  inset-inline: 0;
  bottom: 0;
}

.media-minimal-skin .media-slider__buffer {
  background-color: oklch(from currentColor l c h / 0.2);
  transition-duration: 0.25s;
  transition-timing-function: ease-out;

  &[data-orientation="horizontal"] {
    width: var(--media-slider-buffer);
    transition-property: width;
  }

  &[data-orientation="vertical"] {
    height: var(--media-slider-buffer);
    transition-property: height;
  }
}

.media-minimal-skin .media-slider__fill {
  background-color: currentColor;

  &[data-orientation="horizontal"] {
    width: var(--media-slider-fill);
  }

  &[data-orientation="vertical"] {
    height: var(--media-slider-fill);
  }
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
  left: var(--media-slider-pointer);
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
  top: calc(100% - var(--media-slider-pointer));
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
  width: var(--media-slider-pointer);
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
  height: var(--media-slider-pointer);
}

/* ==========================================================================
   Popups & Animations
   ========================================================================== */

.media-minimal-skin .media-popover,
.media-minimal-skin .media-tooltip {
  margin: 0;
  border: 0;
  color: inherit;
  overflow: visible;
  transition-property: scale, opacity, filter;
  transition-duration: var(--media-popup-transition-duration);
  transition-timing-function: var(--media-popup-transition-timing-function);

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    scale: 0.5;
    filter: blur(8px);
  }

  &[data-instant] {
    transition-duration: 0ms;
  }

  &[data-side="top"] {
    transform-origin: bottom;
  }
  &[data-side="bottom"] {
    transform-origin: top;
  }
  &[data-side="left"] {
    transform-origin: right;
  }
  &[data-side="right"] {
    transform-origin: left;
  }

  &::before {
    content: "";
    position: absolute;
    pointer-events: inherit;
  }

  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    width: 100%;
    inset-inline: 0;
  }
  &[data-side="top"]::before {
    top: 100%;
  }
  &[data-side="bottom"]::before {
    bottom: 100%;
  }

  &[data-side="left"]::before,
  &[data-side="right"]::before {
    height: 100%;
    inset-block: 0;
  }
  &[data-side="left"]::before {
    left: 100%;
  }
  &[data-side="right"]::before {
    right: 100%;
  }
}

.media-minimal-skin .media-popover {
  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    height: var(--media-popover-side-offset);
  }
  &[data-side="left"]::before,
  &[data-side="right"]::before {
    width: var(--media-popover-side-offset);
  }
}

.media-minimal-skin .media-tooltip {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--media-tooltip-background-color);
  backdrop-filter: var(--media-tooltip-backdrop-filter);
  box-shadow:
    0 0 0 1px var(--media-tooltip-border-color),
    0 4px 6px -1px oklch(0 0 0 / 0.1),
    0 2px 4px -2px oklch(0 0 0 / 0.1);
  color: var(--media-tooltip-text-color);
  font-size: 0.75rem;
  white-space: nowrap;

  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    height: var(--media-tooltip-side-offset);
  }
  &[data-side="left"]::before,
  &[data-side="right"]::before {
    width: var(--media-tooltip-side-offset);
  }
}

.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
  display: none;
}

/* ==========================================================================
   Native Caption Track
   ========================================================================== */

.media-minimal-skin {
  --media-caption-track-duration: var(--media-controls-transition-duration);
  --media-caption-track-delay: 25ms;
  --media-caption-track-y: -0.5rem;

  &:has(.media-controls[data-visible]) {
    --media-caption-track-y: -5rem;
  }

  @container media-root (width > 42rem) {
    &:has(.media-controls[data-visible]) > * {
      --media-caption-track-y: -3rem;
    }
  }
}

.media-minimal-skin video::-webkit-media-text-track-container {
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
  translate: 0 var(--media-caption-track-y);
  scale: 0.98;
  z-index: 1;
  font-family: inherit;
}

/* ==========================================================================
   Icon State Visibility for Video Skins
   ========================================================================== */

.media-button--play .media-icon--restart,
.media-button--play .media-icon--play,
.media-button--play .media-icon--pause,
.media-button--mute .media-icon--volume-off,
.media-button--mute .media-icon--volume-low,
.media-button--mute .media-icon--volume-high,
.media-button--fullscreen .media-icon--fullscreen-enter,
.media-button--fullscreen .media-icon--fullscreen-exit,
.media-button--pip .media-icon--pip-enter,
.media-button--pip .media-icon--pip-exit,
.media-button--captions .media-icon--captions-off,
.media-button--captions .media-icon--captions-on {
  display: none;
  opacity: 0;
}

.media-button--play[data-ended] .media-icon--restart,
.media-button--play:not([data-ended])[data-paused] .media-icon--play,
.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
.media-button--mute[data-muted] .media-icon--volume-off,
.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
.media-button--pip:not([data-pip]) .media-icon--pip-enter,
.media-button--pip[data-pip] .media-icon--pip-exit,
.media-button--captions:not([data-active]) .media-icon--captions-off,
.media-button--captions[data-active] .media-icon--captions-on {
  display: block;
  opacity: 1;
}


/* ==========================================================================
   Root
   ========================================================================== */

.media-minimal-skin--video {
  overflow: clip;
  background: oklch(0 0 0);
  --media-border-color: oklch(0 0 0 / 0.15);
  --media-video-border-radius: var(--media-border-radius, 0.75rem);
  --media-controls-background-color: transparent;
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: 150ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: ease-out;
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-background-color: oklch(1 0 0 / 0.1);
  --media-tooltip-border-color: transparent;
  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
  --media-tooltip-text-color: currentColor;
  --media-tooltip-side-offset: 0.5rem;
  --media-popover-side-offset: 1.5rem;

  @media (prefers-reduced-motion: reduce) {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0ms;
    --media-popup-transition-duration: 0ms;
  }

  @media (prefers-color-scheme: dark) {
    --media-border-color: oklch(1 0 0 / 0.15);
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    --media-controls-background-color: oklch(0 0 0);
    --media-tooltip-background-color: oklch(0 0 0);
  }

  @container media-root (width > 42rem) {
    & > * {
      /* Keep a small invisible bridge between the mute button and the
         volume popover so the pointer doesn't fall into dead space when
         moving toward the slider. The default here was 0, which made
         the volume slider feel like it vanished. */
      --media-popover-side-offset: 0.75rem;
    }
  }

  &:has(.media-controls:not([data-visible])) {
    @media (pointer: fine) {
      --media-controls-transition-duration: 300ms;
    }
    @media (pointer: coarse) {
      --media-controls-transition-duration: 150ms;
    }
    @media (prefers-reduced-motion: reduce) {
      --media-controls-transition-duration: 50ms;
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--media-border-color);
    pointer-events: none;
  }

  &:fullscreen {
    --media-border-radius: 0;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-minimal-skin--video .media-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  outline: none;
}

.media-minimal-skin--video .media-error__dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 16rem;
  padding: 1rem;
  color: oklch(1 0 0);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
  transition-property: opacity, scale;
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
  pointer-events: auto;
}

.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: 0.5;
}
.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-minimal-skin--video .media-error__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.375rem 0;
}

.media-minimal-skin--video .media-error__title {
  font-size: 1.125rem;
}

.media-minimal-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

/* ==========================================================================
  Controls (hide/show behavior)
  ========================================================================== */

.media-minimal-skin--video .media-controls {
  padding: 0.25rem;
  column-gap: 0.5rem;
  flex-wrap: wrap;
  position: absolute;
  bottom: 0.25rem;
  inset-inline: 0.25rem;
  z-index: 10;
  color: oklch(1 0 0);
  border-radius: 0.75rem;
  transition-duration: var(--media-controls-transition-duration);
  transition-timing-function: var(--media-controls-transition-timing-function);

  @media (pointer: fine) {
    will-change: translate, filter, opacity;
    transition-property: translate, filter, opacity;
  }

  @media (pointer: coarse) {
    will-change: translate, opacity;
    transition-property: translate, opacity;
  }

  &:not([data-visible]) {
    opacity: 0;
    pointer-events: none;
    translate: 0 100%;

    @media (pointer: fine) {
      filter: blur(8px);
    }

    @media (prefers-reduced-motion: reduce) {
      translate: 0 0;
      filter: blur(0);
    }
  }

  & .media-time-controls {
    order: -1;
    flex: 0 0 100%;
    padding-inline: 0.625rem;
  }

  & .media-button-group:first-child {
    flex: 1;
    text-align: left;
  }

  & .media-button-group:last-child {
    flex: 1;
    justify-content: end;
  }

  @container media-root (width > 42rem) {
    flex-wrap: nowrap;
    bottom: 0.5rem;
    inset-inline: 0.5rem;

    & .media-time-controls {
      order: unset;
      flex: 1;
    }

    & .media-button-group:first-child,
    & .media-button-group:last-child {
      flex: 0 0 auto;
    }
  }
}

.media-minimal-skin--video:has(.media-controls:not([data-visible])) {
  cursor: none;
}

/* ==========================================================================
   Sliders
   ========================================================================== */

.media-minimal-skin--video .media-slider__track {
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}

/* ==========================================================================
   Popups & Animations
   ========================================================================== */

.media-minimal-skin--video .media-popover--volume {
  background: transparent;
  padding-block: 0.75rem;
  border-radius: 0.75rem;

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    background: var(--media-controls-background-color);
  }
}

/* Volume slider fill — Media Chrome reflects the current volume through
   `--media-slider-fill`, but only sets `data-orientation` on the
   <media-volume-slider> root (not on the inner fill element), so the
   generic `.media-slider__fill[data-orientation="vertical"]` selector
   above never matches here. These rules scope by the popover class
   instead, which is guaranteed to be the volume one. Without this the
   audio was actually changing but the fill stayed empty. */
.media-popover--volume media-volume-slider .media-slider__track {
  position: relative;
  width: 0.1875rem;
  height: 100%;
  background-color: oklch(from currentColor l c h / 0.2);
  border-radius: calc(infinity * 1px);
  overflow: hidden;
}
.media-popover--volume media-volume-slider .media-slider__fill {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: var(--media-slider-fill, 0%);
  background-color: currentColor;
  border-radius: inherit;
}
.media-popover--volume media-volume-slider .media-slider__thumb {
  top: unset;
  bottom: var(--media-slider-fill, 0%);
  left: 50%;
  translate: -50% 50%;
}

/* ==========================================================================
   Slider preview
   ========================================================================== */

.media-minimal-skin--video .media-slider__preview {
  --media-preview-max-width: 11rem;
  --media-preview-padding: -0.5rem;
  --media-preview-inset: calc(100cqi - 100%);

  position: absolute;
  left: clamp(
    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),
    var(--media-slider-pointer),
    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))
  );
  bottom: 100%;
  translate: -50%;
  opacity: 0;
  scale: 0.8;
  filter: blur(8px);
  transition-property: scale, opacity, filter;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  transform-origin: bottom;

  @container media-root (width > 42rem) {
    bottom: calc(100% + 0.25rem);
    left: var(--media-slider-pointer);
  }

  & .media-preview__thumbnail-wrapper {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow:
        0 0 0 1px oklch(0 0 0 / 0.05),
        0 1px 3px 0 oklch(0 0 0 / 0.2),
        0 1px 2px -1px oklch(0 0 0 / 0.2);
    }
  }

  & .media-preview__thumbnail {
    max-width: var(--media-preview-max-width);
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    max-height: 6rem;
  }
}
.media-minimal-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

/* ==========================================================================
   Jambo wrapper — 16:9 hero frame around the <video-player>
   ========================================================================== */
.jambo-player-frame {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Hero wrapper: position:relative so the frame can overlay the sentinel
   with inset:0 while the sentinel reserves layout height. */
.jambo-watch-hero {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.jambo-player-frame .media-minimal-skin {
  border-radius: 0.75rem;
}

/* Mini-mode: the frame gets portalled to <body> (see player JS), so a
   descendant selector off the frame's original parent would no longer
   apply. We instead key off a `.jambo-player-frame--mini` modifier the
   JS toggles on the frame itself. Portalling to <body> also escapes any
   ancestor's transform/filter/contain stacking context that would
   otherwise cap our z-index. */
.jambo-player-frame--mini {
  position: fixed;
  inset: auto 16px 16px auto;
  width: min(380px, 80vw);
  aspect-ratio: 16/9;
  height: auto;
  z-index: 2147483647;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  max-width: none;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Sentinel left behind when the frame goes mini — keeps the hero layout
   height stable so the IntersectionObserver (which watches the sentinel)
   doesn't bounce between in-view / out-of-view as the frame moves. */
.jambo-player-sentinel {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.75rem;
}
.jambo-mini-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 20;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.jambo-mini-close:hover { background: rgba(0,0,0,0.85); }
.jambo-player-frame--mini .jambo-mini-close { display: flex; }

/* ==========================================================================
   Jambo Settings Menu — YouTube-style gear with nested panes.
   Lives as a position:absolute popover anchored to the bottom-right of the
   player frame, matching the minimal-skin tooltip visual language.
   ========================================================================== */

.jambo-settings-popover {
    position: absolute;
    right: 0.5rem;
    bottom: calc(2.5rem + 0.5rem); /* above the control bar */
    min-width: 16rem;
    max-width: 18rem;
    background: oklch(0 0 0 / 0.75);
    backdrop-filter: blur(16px) saturate(1.5);
    border-radius: 0.75rem;
    box-shadow:
        0 0 0 1px oklch(1 0 0 / 0.08),
        0 10px 30px oklch(0 0 0 / 0.5);
    color: oklch(1 0 0);
    z-index: 15;
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 0.375rem 0;
    overflow: hidden;
    transform-origin: bottom right;
    transition: opacity 120ms ease-out, scale 120ms ease-out, filter 120ms ease-out;
}
.jambo-settings-popover[hidden] { display: none; }
.jambo-settings-popover[data-open="false"] {
    opacity: 0;
    scale: 0.92;
    filter: blur(4px);
    pointer-events: none;
}
.jambo-settings-popover[data-open="true"] {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}

/* Only one pane visible at a time: main list OR one of the drill-downs. */
.jambo-settings-pane[hidden] { display: none; }

/* A row in the menu — used for main-list rows and drill-down options alike. */
.jambo-settings-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    padding: 0.625rem 0.875rem;
    font: inherit;
    cursor: pointer;
    transition: background-color 100ms ease-out;
}
.jambo-settings-row:hover,
.jambo-settings-row:focus-visible {
    background: oklch(1 0 0 / 0.08);
    outline: none;
}
.jambo-settings-row .jambo-settings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: oklch(1 0 0 / 0.9);
    flex-shrink: 0;
}
.jambo-settings-row .jambo-settings-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}
.jambo-settings-row .jambo-settings-label {
    flex: 1;
    font-weight: 500;
}
.jambo-settings-row .jambo-settings-value {
    color: oklch(1 0 0 / 0.55);
    font-size: 0.75rem;
    font-weight: 400;
}
.jambo-settings-row .jambo-settings-chev {
    color: oklch(1 0 0 / 0.5);
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.125rem;
}

/* Drill-down pane header: back-arrow + section title. */
.jambo-settings-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0.625rem 0.875rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.jambo-settings-back:hover,
.jambo-settings-back:focus-visible {
    background: oklch(1 0 0 / 0.06);
    outline: none;
}
.jambo-settings-back .jambo-settings-chev {
    color: oklch(1 0 0 / 0.85);
    font-size: 1.125rem;
}

/* Options in a drill-down pane. Selected item shows a check in the icon slot. */
.jambo-settings-options { display: flex; flex-direction: column; padding: 0.25rem 0; }
.jambo-settings-options .jambo-settings-row {
    padding-block: 0.5rem;
}
.jambo-settings-options .jambo-settings-row .jambo-settings-icon {
    color: oklch(0.76 0.19 240);
    opacity: 0;
}
.jambo-settings-options .jambo-settings-row.is-active .jambo-settings-icon {
    opacity: 1;
}

.jambo-settings-options .jambo-settings-row .jambo-settings-sup {
    color: oklch(1 0 0 / 0.55);
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.25rem;
    vertical-align: super;
    letter-spacing: 0.03em;
}

/* Data Saver badge inside the quality option row. */
.jambo-datasaver-badge {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: oklch(0.55 0.15 145 / 0.2);
    color: oklch(0.8 0.15 145);
    line-height: 1.2;
}

/* ================================================================== */
/* Gesture zones + keyboard shortcut feedback                         */
/* ================================================================== */

/* Invisible touch/click zones on left and right thirds of the player. */
.jambo-gesture-zone {
    position: absolute;
    top: 0;
    width: 30%;
    height: calc(100% - 3rem); /* above controls */
    z-index: 6;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jambo-gesture-zone--left  { left: 0; }
.jambo-gesture-zone--right { right: 0; }

/* Ripple on double-tap. */
.jambo-gesture-zone::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 5rem; height: 5rem;
    border-radius: 50%;
    background: oklch(1 0 0 / 0.15);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.jambo-gesture-zone.jambo-ripple::after {
    animation: jambo-ripple-anim 0.5s ease-out forwards;
}
@keyframes jambo-ripple-anim {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Center feedback overlay — play/pause/seek icon + text. */
.jambo-gesture-feedback {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: oklch(1 0 0);
    pointer-events: none;
    opacity: 0;
    transition: none;
}
.jambo-gesture-feedback.jambo-feedback-show {
    animation: jambo-feedback-pop 0.6s ease-out forwards;
}
@keyframes jambo-feedback-pop {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
    30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
.jambo-gesture-icon {
    width: 3rem;
    height: 3rem;
    filter: drop-shadow(0 2px 8px oklch(0 0 0 / 0.5));
}
.jambo-gesture-text {
    font-size: 0.875rem;
    font-weight: 600;
    text-shadow: 0 1px 4px oklch(0 0 0 / 0.6);
}

/* Green gear icon when Data Saver is active. */
.jambo-settings-trigger.jambo-datasaver-active {
    color: oklch(0.8 0.18 145);
}

/* Data Saver "On" indicator dot on the main menu row. */
.jambo-settings-row .jambo-ds-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: oklch(0.72 0.19 145);
    margin-left: auto;
    flex-shrink: 0;
}

/* --- Episode prev/next buttons ---------------------------------------- */

/* Ensures the <a> tag styling matches sibling <media-*-button> components.
   Media Chrome buttons set their own display/align; anchors need these
   explicit props so they sit flush in the control-bar row. */
.jambo-episode-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.jambo-episode-button:hover,
.jambo-episode-button:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* Disabled (no previous or no next episode): still visible for layout
   stability, but clearly inert — dimmed, cursor blocked, no hover glow. */
.jambo-episode-button.is-disabled,
.jambo-episode-button[disabled] {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* --- Autoplay-next iOS-style toggle switch (control bar) -------------- */

/* Inline-flex wrapper so the switch sits flush next to surrounding
   media-* buttons. Transparent background — only the pill itself is
   visible. */
.jambo-autoplay-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0 0.5rem;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
}

.jambo-autoplay-switch:focus-visible {
    outline: 2px solid #7C6FF5;
    outline-offset: 3px;
    border-radius: 999px;
}

/* iOS-style pill track. Soft grey when off, indigo when on — matches
   the screenshotted reference design. Dimensions picked so the thumb
   sits with a clean 3px inset on all sides. */
.jambo-autoplay-switch__track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    transition: background 0.2s ease-in-out;
}

.jambo-autoplay-switch:hover .jambo-autoplay-switch__track {
    background: rgba(255, 255, 255, 0.42);
}

.jambo-autoplay-switch.is-on .jambo-autoplay-switch__track {
    background: #7C6FF5;
}

.jambo-autoplay-switch.is-on:hover .jambo-autoplay-switch__track {
    background: #8C80FF;
}

/* Thumb: white circle, 18px, inset 3px. The 20px translate lines up
   the thumb with a symmetrical 3px gap on the right edge when on. */
.jambo-autoplay-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease-in-out;
}

.jambo-autoplay-switch.is-on .jambo-autoplay-switch__thumb {
    transform: translateX(20px);
}

/* Subtle press-down on click for tactile feedback. */
.jambo-autoplay-switch:active .jambo-autoplay-switch__thumb {
    transform: scale(0.92);
}

.jambo-autoplay-switch.is-on:active .jambo-autoplay-switch__thumb {
    transform: translateX(20px) scale(0.92);
}

/* ====================================================================== */
/* Mobile layout (< 768px): YouTube-style center overlay + cleaner bar    */
/* ====================================================================== */

/* Center overlay hidden on desktop — only shows on phones / small
   tablets in portrait, or whenever the frame goes mini. Buttons are
   bigger, with translucent backgrounds for tap visibility on busy
   footage. */
.jambo-mobile-center {
    display: none;
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

/* Faded out when the idle timer fires (JS toggles this class). Pointer
   events are disabled so taps pass through to the video — which wakes
   Media Chrome's activity detector and re-shows the overlay. Kept
   visible while paused / ended by the JS, so this class never gets
   added in those states. */
.jambo-mobile-center.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Play/pause icon swap — wired via JS (toggles [data-playing] on the
   center play button). One icon visible at a time regardless of where
   the overlay shows (mobile viewport, mini-player, etc.). Placed here
   outside the media query so the rule applies in every context. */
.jambo-mobile-center__btn--play .media-icon--pause { display: none; }
.jambo-mobile-center__btn--play .media-icon--play  { display: block; }
.jambo-mobile-center__btn--play[data-playing] .media-icon--play  { display: none; }
.jambo-mobile-center__btn--play[data-playing] .media-icon--pause { display: block; }

@media (max-width: 767px) {
    .jambo-mobile-center {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.25rem;
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none; /* let taps on empty area reach video */
    }

    /* Each button is a round dark-backed target. pointer-events re-enabled
       on the button itself so taps register despite the parent opt-out. */
    .jambo-mobile-center__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        border: none;
        cursor: pointer;
        pointer-events: auto;
        transition: background 0.15s, transform 0.1s;
        -webkit-tap-highlight-color: transparent;
    }

    .jambo-mobile-center__btn:active {
        background: rgba(0, 0, 0, 0.75);
        transform: scale(0.94);
    }

    .jambo-mobile-center__btn--play {
        width: 72px;
        height: 72px;
    }

    /* ---- Bottom-bar cleanup on mobile ---- */

    /* Hide seek ±10s buttons in the bar — duplicated in the overlay. */
    media-seek-button.media-button--seek {
        display: none;
    }

    /* Hide the main play button in the bar — overlay handles play/pause. */
    .media-controls media-play-button.media-button--play {
        display: none;
    }

    /* Picture-in-Picture is a desktop affordance — drop it on phones. */
    .media-button--pip,
    media-pip-button {
        display: none !important;
    }

    /* Captions and mute — keep these off the mobile bar for breathing
       room; users can still enable captions through the settings gear. */
    .media-button--captions,
    media-captions-button {
        display: none;
    }

    .media-button--mute,
    media-mute-button {
        display: none;
    }

    /* Episode skip buttons hidden on phones — they duplicate the flow
       the Autoplay switch handles automatically at episode end, and
       they clutter the narrow bar. Users who want manual control still
       have the episode carousel below the player. */
    .jambo-episode-button {
        display: none;
    }

    /* Autoplay switch stays — it's the headline control on a mobile
       series session. Slightly bigger tap target. */
    .jambo-autoplay-switch {
        padding: 0 0.35rem;
    }

    /* Give the remaining bar more breathing room so it doesn't look
       stuffed: time, slider, autoplay, settings, fullscreen. */
    .media-controls .media-button-group {
        gap: 0.25rem;
    }

    /* The time-controls block: stack time + slider less tight so it
       reads clearly on narrow screens. */
    .media-time-controls {
        gap: 0.5rem;
    }
}

/* Very small phones (<= 400px) — squeeze the overlay gap tighter. */
@media (max-width: 400px) {
    .jambo-mobile-center {
        gap: 1.5rem;
    }

    .jambo-mobile-center__btn {
        width: 48px;
        height: 48px;
    }

    .jambo-mobile-center__btn--play {
        width: 64px;
        height: 64px;
    }
}

/* ====================================================================== */
/* Mini-player: same YouTube-style overlay at any viewport size           */
/* ====================================================================== */

/* When the frame portals into mini-mode (via the IntersectionObserver in
   the episode / watch page scripts), reuse the mobile overlay so the
   user keeps the big tap targets at small player size. Scaled down to
   fit the miniature frame without overwhelming it. */
.jambo-player-frame--mini .jambo-mobile-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.jambo-player-frame--mini .jambo-mobile-center__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.jambo-player-frame--mini .jambo-mobile-center__btn:active {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(0.94);
}

.jambo-player-frame--mini .jambo-mobile-center__btn--play {
    width: 44px;
    height: 44px;
}

/* Shrink the SVG icons inside the mini-player overlay so they don't
   spill out of the tiny buttons. */
.jambo-player-frame--mini .jambo-mobile-center__btn svg {
    width: 18px;
    height: 18px;
}

.jambo-player-frame--mini .jambo-mobile-center__btn--play svg {
    width: 24px;
    height: 24px;
}

/* In mini-mode, also slim the bottom bar: most buttons would be
   unreadable at that size anyway. Keep progress, autoplay switch,
   settings gear, fullscreen, plus episode prev/next (reordered to the
   right-hand side below). */
.jambo-player-frame--mini .media-button--seek,
.jambo-player-frame--mini .media-controls media-play-button.media-button--play,
.jambo-player-frame--mini .media-button--pip,
.jambo-player-frame--mini media-pip-button,
.jambo-player-frame--mini .media-button--captions,
.jambo-player-frame--mini media-captions-button,
.jambo-player-frame--mini .media-button--mute,
.jambo-player-frame--mini media-mute-button {
    display: none;
}

/* Move the first button group (which holds the episode prev/next pair)
   to the end of the control row, so they sit to the right of autoplay,
   settings, and fullscreen — matches the user's requested placement.
   Default flex-order is 0; bumping the first group to 3 pushes it past
   the time-controls (0) and the second button group (0). */
.jambo-player-frame--mini .media-tooltip-group .media-button-group:first-child {
    order: 3;
    margin-left: 0.5rem;
}

/* Re-show the episode prev/next buttons inside the mini-player bar —
   they were hidden along with play/seek elsewhere, but here they're
   the whole point of the group we just reordered. */
.jambo-player-frame--mini .jambo-episode-button {
    display: inline-flex;
}

/* Compact sizing for the episode buttons so they fit the mini frame
   without crowding the time/slider. */
.jambo-player-frame--mini .jambo-episode-button {
    width: 32px;
    height: 32px;
    padding: 0;
}

.jambo-player-frame--mini .jambo-episode-button .media-icon {
    width: 16px;
    height: 16px;
}

/* ====================================================================== */
/* "Now playing" indicator on the episode carousel                        */
/* ====================================================================== */

/* Subtle primary-colored glow + NOW PLAYING badge on the slide that
   matches the episode currently loaded in the player. Applied at the
   .swiper-slide level so we don't have to touch the card partial. */
.swiper-slide.is-playing {
    position: relative;
}

.swiper-slide.is-playing > * {
    outline: 2px solid var(--bs-primary, #1A98FF);
    outline-offset: -2px;
    border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(26, 152, 255, 0.15);
}

.swiper-slide.is-playing::after {
    content: 'NOW PLAYING';
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: var(--bs-primary, #1A98FF);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    pointer-events: none;
}

/* Animated pulse to draw the eye, but subtle — don't want it to feel
   like an alert. */
@keyframes jamboNowPlayingPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(26, 152, 255, 0.15); }
    50%      { box-shadow: 0 0 0 10px rgba(26, 152, 255, 0.22); }
}

.swiper-slide.is-playing > * {
    animation: jamboNowPlayingPulse 2.4s ease-in-out infinite;
}

/* -------------------------------------------------------------------------- */
/* Bottom-bar seek buttons hidden on mobile when prev/next nav is present     */
/* -------------------------------------------------------------------------- */
/*
 * Episode + watchlist players show prev / next item buttons in the same
 * control row as the ±10s seek. On phones that's too many icons crammed
 * into a single bar, so the seek pair collapses below 992px. Mid-screen
 * overlay seek buttons (.jambo-mobile-center__btn--seek) stay visible
 * for touch, and edge-zone tap gestures still seek ±10s, so users keep
 * the functionality without the visual clutter.
 */
@media (max-width: 991.98px) {
    .jambo-bar-seek--mobile-hide {
        display: none !important;
    }
}