/* story-player.css — Custom media player styles */

/* ── Wrapper ──────────────────────────────────────────────────────── */
.sp-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface, #f9f6f2);
  border: 1px solid var(--color-border, #e8e0d8);
}

.sp-wrap:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-glow);
}

/* ── Native media element ────────────────────────────────────────── */
.audio-player .sp-wrap audio {
  width: 100%;
  height: 0;
  overflow: hidden;
  display: block;
}

.video-player .sp-wrap video {
  width: 100%;
  display: block;
  max-height: 480px;
  background: #000;
  object-fit: contain;
}

/* Audio-only video (no visual track) — collapse the black box */
.sp-wrap.sp-audio-only video {
  height: 0;
  max-height: 0;
  background: transparent;
}

/* ── Waveform canvas ─────────────────────────────────────────────── */
.sp-waveform {
  display: block;
  width: 100%;
  height: 60px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Controls bar ────────────────────────────────────────────────── */
.sp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-surface, #f9f6f2);
  border-top: 1px solid var(--color-border, #e8e0d8);
  /* The bar wraps rather than clip: the player hides what spills, and a
     real recording's bar (Skip Silence, a long time) is about 350px, wider
     than most theme cards give it (OMB-245). Where the row fits it is one
     row. Wrapping also lets a card sized by its content keep the theme's
     own width (Gift tags' tag, Corkboard's note) instead of growing to the
     bar. Never make the bar, or a frame around it, a size container: that
     collapses a content-sized card. */
  flex-wrap: wrap;
  row-gap: var(--space-xs);
  min-height: 44px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.sp-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text, #1A1614);
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.sp-btn:hover {
  color: var(--color-primary-text);
  background: var(--color-primary-glow);
}

.sp-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sp-play {
  min-width: 44px;
  min-height: 44px;
}

/* ── Speed button ────────────────────────────────────────────────── */
.sp-speed {
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #7A6F66);
  padding: 2px 6px;
  border: 1px solid var(--color-border, #e8e0d8);
  border-radius: 4px;
  min-width: 36px;
  text-align: center;
  white-space: nowrap;
}

.sp-speed:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  background: var(--color-primary-glow);
}

/* ── Time display ────────────────────────────────────────────────── */
.sp-time {
  display: inline-flex;
  flex-direction: column;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #7A6F66);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0 2px;
}

/* A hidden, zero-height copy of the longest label ("00:00 / 00:00", set by
   story-player.js) gives the time its widest width from the start, so the
   bar's wrap point never moves while it plays (OMB-245 review). */
.sp-time::after {
  content: attr(data-room);
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* ── Timeline ────────────────────────────────────────────────────── */
/* A small basis keeps play, the timeline and its time on the first row
   (the timeline grows into what is left) and sends the buttons to the
   next row when the bar wraps; a basis of 0 let the timeline shrink to its
   minimum beside the buttons instead (OMB-245 review: 45px). */
.sp-timeline-wrap {
  flex: 1 1 5rem;
  min-width: 40px;
}

.sp-timeline {
  position: relative;
  height: 4px;
  background: var(--color-border, #e8e0d8);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Animate transform instead of height: avoids layout reflow on every frame.
     The bar visually grows 4px → 6px via scaleY(1.5) without shifting siblings. */
  transform: scaleY(1);
  transform-origin: center;
  transition: transform 0.15s var(--ease-out, ease-out);
  will-change: transform;
}

.sp-timeline:hover,
.sp-timeline:focus-visible {
  transform: scaleY(1.5);
}

.sp-timeline:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-glow);
}

.sp-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ── Sprite preview ──────────────────────────────────────────────── */
.sp-sprite-preview {
  position: absolute;
  bottom: calc(100% + 8px);
  display: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  pointer-events: none;
  z-index: 10;
  flex-direction: column;
}

.sp-sprite-preview--visible {
  display: flex;
}

.sp-sprite-preview__time {
  display: block;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  padding: 2px 4px;
  line-height: 1.4;
}

/* ── Transcript word spans ───────────────────────────────────────── */
.tw {
  display: inline;
  border-radius: 2px;
  transition: background 0.1s, color 0.1s;
}

.tw:hover {
  background: var(--color-primary-glow);
  color: var(--color-primary-text);
}

.tw-active {
  background: var(--color-primary);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Dark mode adjustments ───────────────────────────────────────── */
[data-theme="dark"] .sp-wrap {
  background: var(--color-surface, #1e1a17);
  border-color: var(--color-border, #3a3028);
}

[data-theme="dark"] .sp-controls {
  background: var(--color-surface, #1e1a17);
  border-color: var(--color-border, #3a3028);
}

[data-theme="dark"] .sp-timeline {
  background: var(--color-border, #3a3028);
}

[data-theme="dark"] .sp-speed {
  border-color: var(--color-border, #3a3028);
}

[data-theme="dark"] .sp-btn {
  color: var(--color-text, #f0ebe4);
}

[data-theme="dark"] .sp-time {
  color: var(--color-text-muted, #9a8f84);
}

[data-theme="dark"] .sp-sprite-preview {
  border-color: var(--color-border, #3a3028);
}

[data-theme="dark"] .sp-sprite-preview__time {
  background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .tw-active {
  background: var(--color-primary);
  color: var(--color-bg, #1A1614);
}

[data-theme="dark"] .sp-chapter-marker:hover::after {
  background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .sp-chapter-list__label {
  color: var(--color-text, #F0EBE5);
}

/* ── Fullscreen ──────────────────────────────────────────────────── */
/* The video takes what the bar leaves: the bar may wrap to two rows on a
   phone held upright, and a fixed 44px reserve let it cover the video
   (OMB-245 review). */
.sp-wrap:fullscreen,
.sp-wrap:-webkit-full-screen {
  display: flex;
  flex-direction: column;
}

.sp-wrap:fullscreen .sp-controls,
.sp-wrap:-webkit-full-screen .sp-controls {
  background: rgba(0, 0, 0, 0.75);
  border-top: none;
  color: #fff;
  z-index: 10;
}

.sp-wrap:fullscreen video,
.sp-wrap:-webkit-full-screen video {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
}

/* ── Mini-player (fixed bottom bar) ─────────────────────────────── */
.sp-mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #1a1614;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  z-index: 900;
  color: #fff;
}

.sp-mini-player .sp-btn {
  color: #fff;
  background: none;
  border: none;
}

.sp-mini-player .sp-btn:hover {
  color: var(--color-primary-text);
  background: rgba(255, 255, 255, 0.1);
}

.sp-mini-player__progress-wrap {
  flex: 1 1 0;
  min-width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.sp-mini-player__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
  will-change: transform;
}

.sp-mini-player__speed {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
  color: #fff;
}

.sp-mini-player__scroll {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
}

.sp-mini-player__scroll:hover {
  color: #fff;
}

.sp-mini-player__close {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.sp-mini-player__close:hover {
  color: #fff;
}

/* ── Chapter markers ─────────────────────────────────────────────── */
.sp-chapter-marker {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 1px;
  cursor: pointer;
  z-index: 5;
  transform: translateX(-50%);
}

.sp-chapter-marker:hover::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
}

.sp-chapter-list {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
}

.sp-chapter-list__toggle {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-muted, #7A6F66);
  user-select: none;
  list-style: none;
  padding: 2px 0;
}

.sp-chapter-list__toggle::-webkit-details-marker {
  display: none;
}

.sp-chapter-list details[open] .sp-chapter-list__toggle {
  margin-bottom: 0.25rem;
}

.sp-chapter-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 3px 0;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}

.sp-chapter-list__item:hover {
  background: var(--color-primary-glow);
}

.sp-chapter-list__time {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-text);
  min-width: 36px;
  flex-shrink: 0;
}

.sp-chapter-list__label {
  font-size: var(--text-xs);
  color: var(--color-text, #1A1614);
}

/* ── Skip-silence button ─────────────────────────────────────────── */
.sp-btn.sp-skip-silence {
  font-size: 0.65rem;
  opacity: 0.8;
}

.sp-btn.sp-skip-silence.sp-skip-silence--active {
  opacity: 1;
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sp-controls {
    gap: 4px;
    padding: 4px 8px;
  }

  .sp-time {
    font-size: 0.65rem;
  }

  .sp-speed {
    font-size: 0.68rem;
    padding: 2px 4px;
    min-width: 30px;
  }
}