/**
 * 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 {
  position: relative;
}

.bp-media--audio {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.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 {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  background: #0b1220;
  box-shadow: var(--bp-shadow);
  /* Clip <video> to the radius - browsers often leave black corner fringes otherwise. */
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.bp-media--video .bp-media-el {
  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 */
.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: 2;
  height: var(--topbar-h, 56px);
  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);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(.35rem);
  transition:
    opacity var(--dur, 200ms) var(--ease, ease),
    visibility var(--dur, 200ms) var(--ease, ease),
    transform var(--dur, 200ms) var(--ease, ease);
}

.bp-media--video.is-chrome-visible .bp-media-bar,
.bp-media--video.is-paused .bp-media-bar,
.bp-media--video:focus-within .bp-media-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.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(--c-primary-color, var(--c-primary));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--bp-shadow);
  transition: box-shadow var(--dur, 200ms) var(--ease, ease), transform var(--dur, 200ms) var(--ease, ease);
}

.bp-media-icon-btn {
  width: 2rem;
  height: 2rem;
  background: var(--btn-chrome-bg, var(--c-primary-light));
  color: var(--c-primary-color, var(--c-primary));
}

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

.bp-media-play:focus-visible,
.vai-audio-play:focus-visible,
.bp-media-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-shadow-focus);
}

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

.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(--c-primary-color, var(--c-primary));
  pointer-events: none;
}

.bp-media-seek-thumb,
.vai-audio-seek-thumb,
.bp-media-vol-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--c-primary-color, var(--c-primary));
  box-shadow: var(--bp-shadow);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  pointer-events: none;
  transition: box-shadow var(--dur, 200ms) var(--ease, ease);
}

.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: var(--bp-shadow-hover);
}

.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;
  font-size: .8rem;
}

.bp-media--video .bp-media-error {
  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-shell-bg, var(--c-surface, #fff));
  box-shadow: var(--bp-shadow);
  color: var(--c-danger, #ef4444);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
}

.bp-media--video .bp-media-play,
.bp-media--video .bp-media-icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  background: var(--bp-card-bg, var(--c-surface));
  color: var(--c-text-muted);
  box-shadow: none;
  border: 1px solid transparent;
}

.bp-media--video .bp-media-play {
  background: var(--c-primary-color, var(--c-primary));
  color: #fff;
}

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

.bp-media--video .bp-media-play:hover {
  color: #fff;
  background: var(--c-primary-color, var(--c-primary));
}

.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-seek-wrap,
.bp-media--video.bp-media--compact-sm .bp-media-time {
  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;
}