/**
 * Shared Benefit Path media player - audio scrubber + video chrome.
 * Loaded with CORE_STYLESHEETS and SURVEY_STYLESHEETS.
 */

/* Shared media player (Voice AI audio + platform video) */
.bp-media {
  /* Do not redefine --bp-media-jelly-accent here - that blocked inheritance from
     the video seat (data-bp-video-accent). Derived tokens fall back to brand primary. */
  --bp-jelly-accent: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  --bp-jelly-accent-light: color-mix(in srgb, var(--bp-jelly-accent) 15%, var(--c-surface));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--bp-jelly-accent);
  --bp-jelly-shadow: none;
  --bp-media-jelly-bg: var(--bp-jelly-bg);
  --bp-media-jelly-shadow: var(--bp-shadow);
  --bp-media-jelly-shadow-hover: var(--bp-shadow-hover);
  --bp-media-fill: color-mix(in srgb, var(--bp-jelly-fg) 42%, var(--bp-card-bg, var(--c-surface)));
  position: relative;
}

[data-theme="dark"] .bp-media {
  --bp-jelly-accent-light: color-mix(in srgb, var(--bp-jelly-accent) 25%, #292c3c);
}

.bp-media--video {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: #0b1220;
  box-shadow: var(--bp-shadow);
  /* Stacking context so absolute chrome can sit above the <video> layer. */
  isolation: isolate;
  transform: translateZ(0);
  /* Self-reference keeps a seat-authored accent (data-bp-video-accent); otherwise
     media-library video tint, then brand primary. */
  --bp-media-jelly-accent: var(--bp-media-jelly-accent, var(--media-accent-video, var(--c-primary-color, var(--c-primary))));
}

.bp-media--audio {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .85rem 1rem;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: #0b1220;
  box-shadow: var(--bp-shadow);
  overflow: hidden;
  /* Match video seat stage - dark panel with floating chrome. */
  --bp-media-jelly-accent: var(--bp-media-jelly-accent, var(--media-accent-audio, var(--c-primary-color, var(--c-primary))));
}

.bp-media--audio .bp-media-bar {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  color: #e5e7eb;
}

.bp-media--audio .bp-media-time {
  color: color-mix(in srgb, #f9fafb 78%, transparent);
}

.bp-media--audio .bp-media-wave .bp-media-seek-thumb {
  box-shadow: 0 0 0 1px color-mix(in srgb, #0b1220 55%, transparent);
}

.bp-media--audio .bp-media-seek-track:not(.bp-media-wave) {
  background: color-mix(in srgb, #f9fafb 18%, transparent);
}

.bp-media--audio .bp-media-seek-fill {
  background: var(--bp-media-jelly-accent, var(--c-primary, #5050ff));
}

/* SVG waveform seek scrubber (black-bar mask + --media-progress). */
.bp-media-seek-wrap--wave {
  align-self: stretch;
}

.bp-media-wave.bp-media-seek-track {
  position: relative;
  height: 2.85rem;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  outline: none;
  --media-progress: 0%;
}

.bp-media-wave.bp-media-seek-track:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bp-media-wave-accent, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)))) 45%, transparent);
}

.bp-media-wave::before,
.bp-media-wave::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--media-wave);
  mask-image: var(--media-wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  pointer-events: none;
}

.bp-media-wave::before {
  background-color: color-mix(in srgb, var(--bp-media-wave-accent, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)))) 26%, transparent);
}

.bp-media-wave::after {
  background-color: var(--bp-media-wave-accent, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary))));
  clip-path: inset(0 calc(100% - var(--media-progress, 0%)) 0 0);
}

.bp-media-wave .bp-media-seek-rail {
  position: absolute;
  inset: 0;
  height: auto;
  background: transparent;
  overflow: visible;
}

.bp-media-wave .bp-media-seek-fill {
  /* Progress is painted by ::after clip - keep fill for geometry/jelly only. */
  opacity: 0;
  pointer-events: none;
}

.bp-media-wave .bp-media-seek-thumb {
  width: 2px;
  height: 78%;
  top: 50%;
  border-radius: 1px;
  background: var(--bp-media-wave-accent, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary))));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bp-card-bg, #fff) 55%, transparent);
  opacity: .95;
}

.bp-media-bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--bp-card-section-radius, var(--radius));
  background: var(--bp-card-section-bg, color-mix(in srgb, var(--c-border) 40%, var(--c-bg)));
  box-shadow: var(--bp-shadow);
}

.bp-media--video .bp-media-el {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  max-height: min(70vh, 720px);
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

/* Empty seat (no src) - keep a 16:9 black stage so the chrome is visible. */
.bp-media--video .bp-media-el:not([src]),
.bp-media--video .bp-media-el[src=""],
.bp-el-video-player--empty .bp-media-el,
.bp-el-video-player--empty.bp-media--video .bp-media-el {
  aspect-ratio: 16 / 9;
  min-height: 10rem;
  max-height: none;
  background: #0b1220;
  object-fit: cover;
}

/* Video chrome - floats like the dashboard topbar, fades when idle while playing */
.bp-media--video .bp-media-bar {
  position: absolute;
  left: var(--sidebar-inset, .5rem);
  right: var(--sidebar-inset, .5rem);
  bottom: var(--sidebar-inset, .5rem);
  z-index: 5;
  display: flex;
  align-items: center;
  height: 3.5rem;
  min-height: 3.5rem;
  padding: 0 1.1rem;
  gap: .55rem;
  border: none;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: var(--bp-shell-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-shadow);
  /* Promote above the video compositor layer. */
  transform: translateZ(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur, 200ms) var(--ease, ease),
    visibility var(--dur, 200ms) var(--ease, ease);
}

/* Show controls when paused, focused in the bar, or JS-revealed (mousemove).
 * While playing, resting the mouse does NOT keep chrome up - idle hide is JS-driven.
 * On coarse pointers, skip :focus-within - sticky button focus would block auto-hide.
 * .is-chrome-dismissed lets a fullscreen tap hide chrome even while paused. */
.bp-media--video.is-chrome-visible .bp-media-bar,
.bp-media--video.is-paused:not(.is-chrome-dismissed) .bp-media-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .bp-media--video:focus-within:not(.is-chrome-dismissed) .bp-media-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Fullscreen idle hide is JS-driven via .is-chrome-visible (hover/move reveals). */

.bp-media-play,
.vai-audio-play,
.bp-media-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--bp-media-jelly-bg);
  color: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  cursor: pointer;
  box-shadow: var(--bp-media-jelly-shadow);
  transition: box-shadow var(--dur, 200ms) var(--ease, ease), background var(--dur, 200ms) var(--ease, ease), color var(--dur, 200ms) var(--ease, ease);
  transform-origin: center center;
  will-change: transform;
}

.bp-media-icon-btn {
  width: 2rem;
  height: 2rem;
  background: var(--bp-media-jelly-bg);
  color: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  box-shadow: var(--bp-media-jelly-shadow);
}

.bp-media-play:hover,
.vai-audio-play:hover,
.bp-media-icon-btn:hover {
  box-shadow: var(--bp-media-jelly-shadow-hover);
}

.bp-media-play:focus-visible,
.vai-audio-play:focus-visible,
.bp-media-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-media-jelly-shadow), 0 0 0 3px color-mix(in srgb, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary))) 22%, transparent);
}

.bp-media-play svg,
.vai-audio-play svg,
.bp-media-icon-btn svg {
  width: 1rem;
  height: 1rem;
  display: none;
  fill: none;
  stroke: currentColor;
}

.bp-media-play:not(.is-playing) .bp-media-play-icon,
.bp-media-play:not(.is-playing) .vai-audio-play-icon,
.vai-audio-play:not(.is-playing) .vai-audio-play-icon,
.vai-audio-play:not(.is-playing) .bp-media-play-icon,
.bp-media-play.is-playing .bp-media-pause-icon,
.bp-media-play.is-playing .vai-audio-pause-icon,
.vai-audio-play.is-playing .vai-audio-pause-icon,
.vai-audio-play.is-playing .bp-media-pause-icon {
  display: block;
}

.bp-media-mute:not(.is-muted) .bp-media-vol-icon,
.bp-media-mute.is-muted .bp-media-mute-icon,
.bp-media-fs:not(.is-fullscreen) .bp-media-fs-icon,
.bp-media-fs.is-fullscreen .bp-media-fs-exit-icon {
  display: block;
}

.bp-media-fs.is-fullscreen .bp-media-fs-exit-icon {
  transform: rotate(180deg);
}

.bp-media-seek-wrap,
.vai-audio-seek-wrap {
  flex: 1;
  min-width: 0;
}

.bp-media-seek-track,
.vai-audio-seek-track,
.bp-media-vol-track {
  display: flex;
  align-items: center;
  padding: .65rem 0;
  margin: -.65rem 0;
  cursor: pointer;
  touch-action: none;
}

.bp-media-seek-rail,
.vai-audio-seek-rail,
.bp-media-vol-rail {
  position: relative;
  flex: 1;
  height: .3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text-muted) 22%, var(--bp-card-bg, var(--c-surface)));
  /* Let primary fill jelly stretch past the rail slightly. */
  overflow: visible;
}

.bp-media-seek-fill,
.vai-audio-seek-fill,
.bp-media-vol-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--bp-media-fill);
  pointer-events: none;
  transform-origin: left center;
  will-change: transform, width;
}

.bp-media--video .bp-media-seek-fill,
.bp-media--video .bp-media-vol-fill {
  background: var(--bp-media-fill);
}

.bp-media-seek-thumb,
.vai-audio-seek-thumb,
.bp-media-vol-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  /* Match .bp-color-picker-slider thumbs */
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: none;
  background: var(--bp-media-jelly-accent, var(--c-primary, #5050ff));
  box-shadow: none;
  outline: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  transition: box-shadow var(--dur, 200ms) var(--ease, ease);
  will-change: transform, left;
  box-sizing: border-box;
}

.bp-media--video .bp-media-seek-thumb,
.bp-media--video .bp-media-vol-thumb {
  background: var(--bp-media-jelly-accent, var(--c-primary, #5050ff));
  box-shadow: none;
}

.bp-media-seek-track:hover .bp-media-seek-thumb,
.bp-media-seek-track:active .bp-media-seek-thumb,
.vai-audio-seek-track:hover .vai-audio-seek-thumb,
.vai-audio-seek-track:active .vai-audio-seek-thumb,
.bp-media-vol-track:hover .bp-media-vol-thumb,
.bp-media-vol-track:active .bp-media-vol-thumb {
  box-shadow: none;
}

.bp-media-time,
.vai-audio-time {
  flex-shrink: 0;
  min-width: 10ch;
  font-size: .78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  text-align: right;
  white-space: nowrap;
}

.bp-media-vol {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  min-width: 5.5rem;
  max-width: 7.5rem;
}

.bp-media-vol-track {
  flex: 1;
  min-width: 3rem;
  padding: .5rem 0;
  margin: -.5rem 0;
}

.bp-media-error,
.vai-audio-error {
  margin: .35rem 0 0;
  padding: .45rem .75rem;
  border-radius: var(--bp-card-section-radius, var(--radius));
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.35;
  background: var(--bp-jelly-bg);
  color: var(--bp-jelly-fg);
  box-shadow: none;
}

.bp-media--audio .bp-media-error,
.vai-audio-error {
  --bp-jelly-accent: var(--c-danger);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-danger);
  --bp-jelly-shadow: none;
}

.bp-media--video .bp-media-error {
  --bp-jelly-accent: var(--c-danger);
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 15%, var(--c-surface, #eff1f5));
  --bp-jelly-bg: color-mix(in srgb, var(--bp-jelly-accent-light) 72%, var(--bp-card-bg, var(--c-surface)));
  --bp-jelly-fg: var(--c-danger);
  --bp-jelly-shadow: none;
  position: absolute;
  top: var(--sidebar-inset, .5rem);
  left: var(--sidebar-inset, .5rem);
  right: var(--sidebar-inset, .5rem);
  z-index: 3;
  margin: 0;
  padding: .55rem .85rem;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: var(--bp-jelly-bg);
  box-shadow: none;
  color: var(--bp-jelly-fg);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
}

[data-theme="dark"] .bp-media--audio .bp-media-error,
[data-theme="dark"] .vai-audio-error,
[data-theme="dark"] .bp-media--video .bp-media-error {
  --bp-jelly-accent-light: color-mix(in srgb, var(--c-danger) 25%, #292c3c);
}

.bp-media--video .bp-media-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, #0b1220 35%, transparent);
}

.bp-media--video.is-loading .bp-media-loading {
  display: flex;
}

.bp-media--video.has-error .bp-media-loading {
  display: none;
}

.bp-media-loading-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, #fff 25%, transparent);
  border-top-color: #fff;
  animation: bp-media-spin .7s linear infinite;
}

@keyframes bp-media-spin {
  to { transform: rotate(360deg); }
}

/* Giant center play CTA - only before the viewer has started playback */
.bp-media--video .bp-media-big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Size from width only - % height would squash the circle in widescreen frames. */
  width: clamp(3.75rem, 18%, 5.5rem);
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bp-media-jelly-bg);
  color: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  box-shadow: var(--bp-media-jelly-shadow);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(.92);
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  transition:
    opacity var(--dur, 200ms) var(--ease, ease),
    visibility var(--dur, 200ms) var(--ease, ease),
    transform var(--dur, 200ms) var(--ease, ease),
    box-shadow var(--dur, 200ms) var(--ease, ease);
}

.bp-media--video .bp-media-big-play.is-jelly {
  /* blobSpring owns transform while pressing. */
  transition:
    opacity var(--dur, 200ms) var(--ease, ease),
    visibility var(--dur, 200ms) var(--ease, ease),
    box-shadow var(--dur, 200ms) var(--ease, ease);
}

.bp-media--video .bp-media-big-play svg {
  width: 52%;
  height: 52%;
  display: block;
  /* Optical center: play triangle reads slightly left otherwise */
  margin-left: 6%;
  stroke: currentColor;
  fill: none;
}

.bp-media--video.is-paused:not(.has-started):not(.is-loading):not(.has-error) .bp-media-big-play {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.bp-media--video.is-paused:not(.has-started):not(.is-loading):not(.has-error) .bp-media-big-play:hover {
  box-shadow: var(--bp-media-jelly-shadow-hover);
}

.bp-media--video.is-paused:not(.has-started):not(.is-loading):not(.has-error) .bp-media-big-play:focus-visible {
  outline: 2px solid var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  outline-offset: 3px;
}

.bp-el-video-player--empty .bp-media-big-play {
  display: none;
}

.bp-media--video.is-loading .bp-media-big-play,
.bp-media--video.has-started .bp-media-big-play {
  display: none;
}

.bp-media--video .bp-media-play,
.bp-media--video .bp-media-icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  background: var(--bp-media-jelly-bg);
  color: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  box-shadow: var(--bp-media-jelly-shadow);
  border: 1px solid transparent;
}

.bp-media--video .bp-media-play:hover,
.bp-media--video .bp-media-icon-btn:hover {
  color: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  background: color-mix(in srgb, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary))) 22%, var(--bp-card-bg, var(--c-surface)));
  box-shadow: var(--bp-media-jelly-shadow-hover);
}

.bp-media--video .bp-media-play:hover {
  color: var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary)));
  background: color-mix(in srgb, var(--bp-media-jelly-accent, var(--c-primary-color, var(--c-primary))) 22%, var(--bp-card-bg, var(--c-surface)));
}

.bp-media--video .bp-media-time {
  color: var(--c-text-muted);
  font-size: .8125rem;
}

.bp-media:fullscreen,
.bp-media:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 0;
}

.bp-media:fullscreen .bp-media-bar,
.bp-media:-webkit-full-screen .bp-media-bar {
  left: max(var(--sidebar-inset, .5rem), env(safe-area-inset-left, 0px));
  right: max(var(--sidebar-inset, .5rem), env(safe-area-inset-right, 0px));
  bottom: max(var(--sidebar-inset, .5rem), env(safe-area-inset-bottom, 0px));
}

.bp-media:fullscreen .bp-media-el,
.bp-media:-webkit-full-screen .bp-media-el {
  flex: 1;
  max-height: none;
  height: 100%;
  object-fit: contain;
}

.lander-hero-visual .bp-media--video {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: var(--bp-card-radius, var(--radius-lg));
}

.lander-hero-visual .bp-media-el {
  min-height: 360px;
  max-height: none;
  object-fit: cover;
}

@media (max-width: 520px) {
  .bp-media-vol-track {
    display: none;
  }

  .bp-media-vol {
    min-width: 0;
    max-width: none;
  }

  .bp-media-time {
    min-width: 8ch;
    font-size: .72rem;
  }
}

/* Progressive chrome - classes set by ResizeObserver in bp-media-player.js */
.bp-media--video.bp-media--compact-md .bp-media-vol-track {
  display: none;
}

.bp-media--video.bp-media--compact-md .bp-media-vol {
  min-width: 0;
  max-width: none;
}

.bp-media--video.bp-media--compact-md .bp-media-time {
  min-width: 8ch;
  font-size: .72rem;
}

.bp-media--video.bp-media--compact-md .bp-media-bar {
  gap: .4rem;
  padding: 0 .75rem;
}

.bp-media--video.bp-media--compact-sm .bp-media-time {
  display: none;
}

.bp-media--video.bp-media--compact-sm .bp-media-vol {
  display: none;
}

.bp-media--video.bp-media--compact-xs .bp-media-vol {
  display: none;
}

.bp-media--video.bp-media--compact-xs .bp-media-bar {
  gap: .35rem;
  padding: 0 .55rem;
  justify-content: space-between;
}