/* Live dialer copilot HUD — a right-docked panel that streams the running score of
   a real call captured by the extension. Uses the app's instrument-grade tokens. */

.live-dialer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(420px, 92vw);
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  background: color-mix(in oklch, var(--card, #14181f) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-left: 1.5px solid var(--hairline);
  box-shadow: -24px 0 60px oklch(0% 0 0 / 0.35);
  animation: ld-slide var(--dur-2, 320ms) cubic-bezier(.16,1,.3,1) both;
  overflow-y: auto;
}
@keyframes ld-slide { from { transform: translateX(100%); } to { transform: none; } }
@media (max-width: 560px) { .live-dialer { width: 100vw; } }

.ld-head { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.ld-head b { font-family: var(--font-display); letter-spacing: .01em; }
.ld-dot { width: 9px; height: 9px; border-radius: 50%; background: oklch(64% 0.22 25); box-shadow: 0 0 0 0 oklch(64% 0.22 25 / 0.6); animation: ld-pulse 1.4s ease-out infinite; }
@keyframes ld-pulse { to { box-shadow: 0 0 0 10px oklch(64% 0.22 25 / 0); } }
.ld-elapsed { font: 600 var(--text-xs)/1 var(--font-mono); color: var(--text-3); }
.ld-close { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--hairline); background: transparent; color: var(--text-3); cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1); }
.ld-close:hover { color: var(--text); border-color: var(--accent); }

/* Score gauge */
.ld-score { display: grid; gap: 10px; }
.ld-overall { display: flex; align-items: baseline; gap: 12px; }
.ld-num { font: 800 3.4rem/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ld-grade { font: 700 1.5rem/1 var(--font-display); color: var(--text-2); }
.live-dialer[data-tier="good"] .ld-num { color: oklch(84% 0.16 152); }
.live-dialer[data-tier="mid"]  .ld-num { color: oklch(85% 0.15 90); }
.live-dialer[data-tier="low"]  .ld-num { color: oklch(72% 0.19 30); }
.ld-momentum { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ld-momentum-fill { height: 100%; width: 50%; border-radius: 999px; background: linear-gradient(90deg, oklch(70% 0.14 152), oklch(86% 0.16 152)); transition: width var(--dur-2, 320ms) cubic-bezier(.16,1,.3,1); }

/* Close-o-meter (prospect temperature) */
.ld-meter { display: flex; align-items: center; gap: 10px; }
.ld-meter-cap { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ld-meter-track { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ld-meter-fill { height: 100%; width: 50%; border-radius: 999px; background: linear-gradient(90deg, oklch(70% 0.13 250), oklch(80% 0.14 250)); transition: width var(--dur-2, 320ms) cubic-bezier(.16,1,.3,1), background var(--dur-1); }
.ld-meter-fill[data-temp="warm"] { background: linear-gradient(90deg, oklch(85% 0.15 90), oklch(82% 0.16 60)); }
.ld-meter-fill[data-temp="hot"]  { background: linear-gradient(90deg, oklch(82% 0.16 60), oklch(84% 0.17 40)); }
.ld-meter-fill[data-temp="cold"] { background: linear-gradient(90deg, oklch(66% 0.10 250), oklch(74% 0.11 250)); }
.ld-meter-label { font: 600 var(--text-xs)/1 var(--font-mono); color: var(--text-2); min-width: 78px; text-align: right; }

/* Next move — the hero line */
.ld-next { border: 1.5px solid var(--accent); border-radius: var(--r-lg); padding: 12px 14px; background: oklch(68% 0.17 152 / 0.08); }
.ld-next-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700; }
.ld-next-text { margin: 4px 0 0; font-size: var(--text-base); line-height: 1.4; color: var(--text); }

/* Coaching cue */
.ld-coach { font-size: var(--text-xs); line-height: 1.4; color: var(--text-2); padding: 9px 11px; border-radius: 10px; border-left: 3px solid var(--text-4); background: var(--card-2); }
.ld-coach.sev-danger { border-left-color: oklch(64% 0.22 25); }
.ld-coach.sev-compliance { border-left-color: oklch(82% 0.16 60); }
.ld-coach.sev-warn { border-left-color: oklch(85% 0.15 90); }
.ld-coach.sev-good { border-left-color: oklch(84% 0.16 152); }
.ld-coach.sev-info { border-left-color: var(--blue); }   /* mirrors .coach-card.info */

/* Live transcript feed */
.ld-feed { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; flex: 1; min-height: 60px; }
.ld-line { display: grid; grid-template-columns: 60px 1fr; gap: 8px; font-size: var(--text-xs); line-height: 1.4; }
.ld-who { font-weight: 700; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.ld-line.rep .ld-who { color: var(--accent); }
.ld-line.prospect .ld-who { color: oklch(74% 0.12 250); }
.ld-txt { color: var(--text-2); }

/* End state */
.live-dialer.ended .ld-dot { animation: none; background: var(--text-4); }
.ld-final { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card-2); border: 1.5px solid var(--hairline); }
.ld-final b { font-family: var(--font-display); }
.ld-final-sub { font-size: var(--text-xs); color: var(--text-3); }