/* =========================================================================
   ROSIE — Live call-flow component fixes (theme-aware)

   The palette now lives in ONE place (styles/tokens.css), light by default
   with a dark override, so the whole app — including this call-flow subtree —
   re-themes from <html data-theme>. This file therefore NO LONGER redefines
   any colour tokens. It keeps only the handful of live-flow rules that a token
   alone can't express: a couple of native controls and the feature panels with
   their own fixed treatment. Everything here routes through the theme tokens,
   so it works in both light and dark.
   ========================================================================= */

/* Range sliders (Agent / Customer Speed) — draw a flat track on the track
   pseudo-elements (not the input) and a teal thumb, so the thumb centres
   cross-browser. Track + thumb read from the theme tokens. */
.live-screen .speed-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
  cursor: pointer;
}
.live-screen .speed-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-emph);
}
.live-screen .speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;            /* (track 4px − thumb 14px) / 2 → centre on track */
  border: none;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
}
.live-screen .speed-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-emph);
}
.live-screen .speed-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
}

/* Inline code / preformatted blocks (QA reasoning) — sit on a raised surface
   rather than a fixed black/white tint. */
.live-screen .qa-kb-detail code { background: var(--surface-raised); }

/* Training Results summary banner — a page card, light or dark per theme. */
.live-screen .tr-summary {
  background: linear-gradient(120deg, var(--surface) 0%, var(--surface-hover) 100%);
}

/* "Close the loop" CTA — the key feature panel. Intentionally a filled teal
   gradient in BOTH themes so it pops as a feature panel; its inner content is
   white-on-teal regardless of theme. */
.live-screen .tr-retry {
  background: linear-gradient(150deg, #2A9D8F 0%, #1B7163 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(42, 157, 143, 0.28);
}
.live-screen .tr-retry-eyebrow { color: rgba(255, 255, 255, 0.82); }
.live-screen .tr-retry-h { color: #fff; }
.live-screen .tr-retry-p { color: rgba(255, 255, 255, 0.85); }
.live-screen .tr-retry .tr-prog-top { color: rgba(255, 255, 255, 0.82); }
.live-screen .tr-retry .tr-prog-top b { color: #fff; }
.live-screen .tr-retry .tr-prog-track { background: rgba(255, 255, 255, 0.22); }
.live-screen .tr-retry .tr-prog-fill { background: #fff; }
/* Primary action (Retry Practice): solid white pill on the teal panel. */
.live-screen .tr-retry .training-action-btn {
  background: #fff;
  border-color: #fff;
  color: var(--teal-dark);
}
.live-screen .tr-retry .training-action-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--teal-dark);
  border-color: #fff;
}
/* Secondary actions (New Live Call / Contact supervisor): ghost/outline. */
.live-screen .tr-retry .training-action-btn.is-dark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.live-screen .tr-retry .training-action-btn.is-dark:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
}

/* Coach input disabled submit — theme-aware neutral. */
.live-screen .coach-input__submit:disabled { color: var(--text-faint); }