/* ══════════════════════════════════════════════════════════════
   Voice Player — Torad Labs Light Theme Bridge
   Provides CSS variables that blog-components.css expects
   and overrides hardcoded dark-theme colors.
   Load BEFORE blog-components.css.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Variables blog-components.css uses */
  --bg-raised: #FFFFFF;
  --bg-elevated: #F5F5F3;
  --gold: #A07830;
  --gold-dim: #8A6520;
  --text-dim: #9B9890;
  --mono: 'DM Mono', monospace;
}

/* ── Listen card — light surface ── */
.listen-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(43, 45, 110, 0.15);
  box-shadow: 0 2px 16px rgba(43, 45, 110, 0.08);
}
.listen-card.active {
  border-color: rgba(43, 45, 110, 0.25);
}

/* ── Play button — accent-colored ── */
.listen-play-btn {
  border-color: rgba(43, 45, 110, 0.3);
  background: rgba(43, 45, 110, 0.04);
}
.listen-play-btn:hover {
  border-color: #2B2D6E;
  background: rgba(43, 45, 110, 0.08);
}
.listen-play-btn svg {
  fill: #2B2D6E;
}
.listen-play-btn.playing {
  border-color: #2B2D6E;
  background: rgba(43, 45, 110, 0.1);
  animation: listen-pulse-labs 2s ease-in-out infinite;
}

@keyframes listen-pulse-labs {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 45, 110, 0.15); }
  50% { box-shadow: 0 0 0 8px rgba(43, 45, 110, 0); }
}

/* ── Progress bar ── */
.listen-progress {
  background: rgba(26, 25, 23, 0.06);
}
.listen-progress-fill {
  background: #2B2D6E;
}
.listen-progress-fill::after {
  background: #2B2D6E;
}

/* ── Labels ── */
.listen-label {
  color: #2B2D6E;
}
.listen-narrator {
  color: #9B9890;
}
.listen-time {
  color: #9B9890;
}

/* ── Follow button ── */
.listen-follow-btn {
  color: #6B6860;
  border-color: rgba(26, 25, 23, 0.12);
}
.listen-follow-btn:hover {
  color: #2B2D6E;
  border-color: rgba(43, 45, 110, 0.25);
}
.listen-follow-btn.active {
  color: #2B2D6E;
  border-color: rgba(43, 45, 110, 0.4);
  background: rgba(43, 45, 110, 0.04);
}
.listen-follow-btn.active.free-read {
  color: #9B9890;
  border-color: rgba(43, 45, 110, 0.15);
  background: rgba(43, 45, 110, 0.02);
}

/* ── Section markers ── */
.section-marker {
  background: rgba(26, 25, 23, 0.15);
}
.section-marker--h2 {
  background: rgba(26, 25, 23, 0.3);
}
.section-marker:hover {
  background: #2B2D6E;
}

/* ── Seekable content ── */
.voice-seekable {
  -webkit-tap-highlight-color: rgba(43, 45, 110, 0.1);
}
body.voice-active-session .voice-seekable:hover {
  border-left-color: #2B2D6E !important;
}

/* ── Visual highlighting ── */
.voice-visual-active {
  border-color: rgba(43, 45, 110, 0.25) !important;
  box-shadow:
    0 0 20px rgba(43, 45, 110, 0.06),
    inset 0 0 0 1px rgba(43, 45, 110, 0.08);
}

/* ── Word-level highlighting ── */
.voice-phrase-active {
  background: rgba(43, 45, 110, 0.1);
  color: #2B2D6E;
}

/* ── Upcoming phrase preview ── */
.voice-upcoming {
  opacity: 0.55 !important;
}

/* ── Checkpoint pulse ── */
@keyframes voiceCheckpointPulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 45, 110, 0.2); }
  50% { box-shadow: 0 0 16px 4px rgba(43, 45, 110, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(43, 45, 110, 0); }
}

/* ── Irony annotation ── */
.voice-ironic {
  color: #9B9890 !important;
  background: rgba(26, 25, 23, 0.04) !important;
}

/* ── Mini-player ── */
.voice-mini-player {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(43, 45, 110, 0.12);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
}

.mini-play-btn {
  border-color: rgba(43, 45, 110, 0.25);
  background: rgba(43, 45, 110, 0.04);
}
.mini-play-btn:hover {
  border-color: #2B2D6E;
  background: rgba(43, 45, 110, 0.08);
}
.mini-play-btn svg {
  fill: #2B2D6E;
}
.mini-play-btn.playing {
  border-color: #2B2D6E;
  background: rgba(43, 45, 110, 0.1);
}

.mini-progress {
  background: rgba(26, 25, 23, 0.06);
}
.mini-progress-fill {
  background: #2B2D6E;
}

.mini-current {
  color: #9B9890;
}

.mini-follow-btn {
  border-color: rgba(26, 25, 23, 0.12);
  color: #6B6860;
}
.mini-follow-btn:hover {
  color: #2B2D6E;
  border-color: rgba(43, 45, 110, 0.25);
}
.mini-follow-btn.active {
  color: #2B2D6E;
  border-color: rgba(43, 45, 110, 0.4);
  background: rgba(43, 45, 110, 0.04);
}

/* ── Hints ── */
.listen-hints {
  color: #9B9890;
}
/* v2 */