/* =====================================================================
   Speech replay annotation strip — anchor-faithful
   ---------------------------------------------------------------------
   Lives on the BACK face of the replay flip card. The card reveal is
   the act of asking for the breakdown. The strip itself is calm:
   hairline track, slim playhead, small frosted dots. No scoreboard,
   no legend chips, no metric labels.
   ===================================================================== */

/* Reset the default flip-card face chrome inside the replay card so
   the existing dark gradient / radial glow on .speech-replay-card
   carries through both faces. The base .ted-flip-card-front/-back
   rule lives in speech-mode-results.css and applies a card-like
   surface, which would double up with the replay card's. */
.speech-replay-card.ted-flip-card {
  background:
    radial-gradient(circle at 24% 0%, rgba(167, 139, 250, 0.14), transparent 34%),
    rgba(13, 13, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.speech-replay-card.ted-flip-card .ted-flip-card-inner {
  border-radius: inherit;
}

.speech-replay-card.ted-flip-card .ted-flip-card-front,
.speech-replay-card.ted-flip-card .ted-flip-card-back {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: inherit;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Keep the existing kicker / title / subtitle typography on both faces.
   The base flip-card rule sets `.ted-flip-card-front p` to 0.92rem and
   `.ted-flip-card-front h3` to 1.05rem, which would override the
   existing speech-replay-card typography. Re-assert it here at higher
   specificity. */
.speech-replay-card.ted-flip-card .speech-replay-card-kicker {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.48);
}
.speech-replay-card.ted-flip-card .speech-replay-card-title {
  margin: 0;
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.94);
}
.speech-replay-card.ted-flip-card .speech-replay-card-subtitle {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.64);
}

/* Front-face hint, anchor-faithful: small uppercase coaching nudge,
   matches the other coach cards' "Tap to see breakdown" hint. */
.speech-replay-card.ted-flip-card .ted-flip-card-hint {
  margin: 0 18px 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

/* Back-face content padding so the breakdown sits inside the card
   rounded rect with consistent inset. */
.speech-replay-back-content {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
}

.speech-replay-back-header {
  margin: 0 0 14px;
}

.speech-replay-back-header .speech-replay-card-kicker {
  margin: 0 0 4px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.speech-replay-back-header .speech-replay-card-subtitle {
  margin: 0;
  line-height: 1.45;
}

.speech-replay-back-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.speech-replay-back-play {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  flex: 0 0 auto;
  min-height: 0;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.speech-replay-back-play:hover,
.speech-replay-back-play:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.96);
}

/* Back button override scoped to the replay card so the wide-bottom
   border doesn't read as a divider in this card. */
.speech-replay-card.ted-flip-card .ted-flip-card-back-btn {
  margin: 14px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

/* =====================================================================
   The annotation strip itself.
   Hairline track + slim playhead caret + small frosted dot markers.
   No fill bar, no legend chips, no per-marker labels in the bar — the
   coach copy beneath replaces itself when a dot is tapped.
   ===================================================================== */

.speech-replay-annotations {
  position: relative;
  color: rgba(255, 255, 255, 0.92);
}

.speech-replay-annotations-bar {
  position: relative;
  width: 100%;
  height: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.speech-replay-annotations-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  z-index: 1;
}

/* Pace zones — coloured 2px segments under the hairline track. Honest
   only when word-level timings are available; otherwise the JS module
   omits them entirely. Sweet-spot windows are intentionally left
   uncolored so the bar stays calm and only flags drift / outliers. */
.speech-replay-pace-zone {
  position: absolute;
  top: calc(50% + 2px);
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 220ms ease;
}

.speech-replay-pace-zone--sweet {
  background: transparent;
}

.speech-replay-pace-zone--drift-slow {
  background: rgba(96, 165, 250, 0.28);
}

.speech-replay-pace-zone--slow {
  background: rgba(96, 165, 250, 0.6);
}

.speech-replay-pace-zone--drift-fast {
  background: rgba(244, 195, 96, 0.32);
}

.speech-replay-pace-zone--fast {
  background: rgba(244, 195, 96, 0.7);
}

.speech-replay-annotations-playhead {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: rgba(167, 139, 250, 0.85);
  pointer-events: none;
  transition: left 120ms linear;
  z-index: 3;
}

.speech-replay-marker {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: var(--marker-left, 0%);
  width: 9px;
  height: 9px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(167, 139, 250, 0.78);
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, box-shadow 160ms ease;
  z-index: 4;
}

.speech-replay-marker:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.speech-replay-marker:hover,
.speech-replay-marker.is-active {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

.speech-replay-marker--strong {
  background: rgba(94, 234, 212, 0.78);
  border-color: rgba(94, 234, 212, 0.55);
}

.speech-replay-marker--strong:hover,
.speech-replay-marker--strong.is-active {
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.42);
}

.speech-replay-marker--filler {
  background: rgba(244, 195, 96, 0.85);
  border-color: rgba(244, 195, 96, 0.55);
}

.speech-replay-marker--filler:hover,
.speech-replay-marker--filler.is-active {
  box-shadow: 0 0 12px rgba(244, 195, 96, 0.42);
}

.speech-replay-marker--fix {
  background: rgba(232, 121, 198, 0.85);
  border-color: rgba(232, 121, 198, 0.55);
}

.speech-replay-marker--fix:hover,
.speech-replay-marker--fix.is-active {
  box-shadow: 0 0 12px rgba(232, 121, 198, 0.42);
}

/* Pause = LLM-suggested "try a beat here" moments (Stage 2.1). Soft
   sky-blue, deliberately distinct from the cyan filler-free Strong
   markers. Pinned to real time via Whisper word timings. */
.speech-replay-marker--pause {
  background: rgba(96, 165, 250, 0.82);
  border-color: rgba(96, 165, 250, 0.55);
}

.speech-replay-marker--pause:hover,
.speech-replay-marker--pause.is-active {
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.42);
}

/* Coach copy beneath the bar. Always one fixed minimum height so
   the layout doesn't jump when copy changes. */
.speech-replay-annotations-copy {
  margin: 8px 0 0;
  min-height: 1.4em;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

.speech-replay-annotations-empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Compact filler / pause tally above the timeline. Honest counts from
   xAI STT (verbatim disfluencies + word-timestamp pauses). */
.speech-replay-annotations-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.speech-replay-signal {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  line-height: 1.3;
}

.speech-replay-signal strong {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.92rem;
  font-weight: 700;
}

.speech-replay-signal-sub {
  color: rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   Back-face composition: scrubber + (hairline divider) + transcript
   details. Both the audio and video flip cards share this layout so
   the results page only ever shows ONE replay+transcript card.
   ===================================================================== */

.speech-replay-back-divider {
  margin: 14px 0 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
}

/* The transcript on the back face is collapsible. data-no-flip="true"
   on the <details> is what stops the flip-card click delegation from
   toggling the card when the user expands or copies the transcript. */
.speech-replay-card.ted-flip-card .speech-replay-back-transcript {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript > summary::-webkit-details-marker {
  display: none;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript > summary::after {
  content: '+';
  font-size: 1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 200ms ease;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript[open] > summary::after {
  content: '–';
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript > summary:hover,
.speech-replay-card.ted-flip-card .speech-replay-back-transcript > summary:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript > summary small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript .ted-results-transcript-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 2px 6px;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript .ted-results-transcript-toolbar button {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript .ted-results-transcript-toolbar button:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript .transcription-content {
  margin: 0;
  padding: 6px 4px 2px;
  max-height: 38vh;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.92rem;
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}

.speech-replay-card.ted-flip-card .speech-replay-back-transcript .transcription-content p {
  margin: 0;
}

@media (max-width: 640px) {
  .speech-replay-card.ted-flip-card .speech-replay-back-transcript .transcription-content {
    font-size: 0.88rem;
    max-height: 44vh;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .speech-replay-card.ted-flip-card .ted-flip-card-hint {
    background: rgba(8, 8, 16, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .speech-replay-annotations-playhead,
  .speech-replay-marker {
    transition: none;
  }
}

@media (max-width: 640px) {
  .speech-replay-card.ted-flip-card .ted-flip-card-hint {
    margin: 0 14px 12px;
    padding: 10px 12px;
    font-size: 0.62rem;
  }

  .speech-replay-back-content {
    padding: 16px 16px 12px;
  }

  .speech-replay-back-header-row {
    align-items: flex-start;
  }

  .speech-replay-back-play {
    padding: 6px 10px;
    font-size: 0.68rem;
  }
}