/* ============================================================
   Cards: chrome, transcript (iMessage-style), VU, coach feed
   ============================================================ */
.card {
  position: relative;
  background: var(--card);
  backdrop-filter: saturate(150%) blur(20px); -webkit-backdrop-filter: saturate(150%) blur(20px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2xl);
  padding: var(--s-3);
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: var(--sh-2), 0 1px 0 var(--highlight) inset;
  animation: card-rise var(--dur-3) var(--ease) both;
  animation-delay: var(--rise-delay, 0s);
}
/* hairline top sheen for tactile depth */
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 50%; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.05), transparent); pointer-events: none; }
[data-theme="dark"] .card::before { background: linear-gradient(180deg, oklch(100% 0 0 / 0.04), transparent); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.card-head h2 { font-size: var(--text-lg); display: inline-flex; align-items: center; gap: 9px; }
/* small accent tick before each panel title */
.card-head h2::before { content: ""; width: 4px; height: 16px; border-radius: var(--r-pill);
  background: linear-gradient(var(--accent), var(--accent-press)); box-shadow: 0 0 8px oklch(70% 0.18 150 / 0.5); }
.coach-panel .card-head h2::before { background: linear-gradient(var(--blue), oklch(54% 0.19 256)); box-shadow: 0 0 8px oklch(60% 0.19 256 / 0.5); }
.empty-state { color: var(--text-3); font-size: var(--text-sm); margin: auto; text-align: center; max-width: 80%; padding: var(--s-4) 0; }

/* ---------- Transcript ---------- */
.mic-cluster { display: flex; align-items: center; gap: 9px; }
.call-clock { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.call-clock.is-live { color: var(--danger); }
.vu-meter { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.vu-meter span { width: 3px; height: 16%; background: var(--text-4); border-radius: 2px; transition: height 70ms linear, background var(--dur-1); }
.vu-meter.active span { background: var(--accent); }
.mic-state { font-size: var(--text-xs); color: var(--text-3); font-weight: 500; padding: 4px 10px; border-radius: var(--r-pill); background: var(--fill-subtle); white-space: nowrap; }
.mic-state.live { color: #fff; background: var(--danger); }
.mic-state.live::before { content: "● "; animation: blink 1.2s infinite; }
.mic-state.warn { color: var(--warn); background: oklch(78% 0.15 75 / 0.16); }

.speaker-toggle { align-self: stretch; justify-content: center; margin-bottom: var(--s-2); }
.speaker-toggle .spk { flex: 1; justify-content: center; }

.transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); padding-right: 4px; min-height: 200px; scroll-behavior: smooth; }
.tx-line { max-width: 88%; padding: 9px 13px; border-radius: 18px; animation: bubble-in var(--dur-2) var(--spring); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.tx-line.rep { align-self: flex-end; background: linear-gradient(165deg, color-mix(in oklab, var(--accent) 92%, white), var(--accent-press)); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 2px 10px oklch(70% 0.18 150 / 0.22); }
.tx-line.prospect { align-self: flex-start; background: var(--fill); color: var(--text); border-bottom-left-radius: 6px; }
.tx-who { font-size: var(--text-2xs); font-weight: 700; opacity: 0.7; letter-spacing: 0.02em; display: block; margin-bottom: 1px; }
.tx-text { font-size: var(--text-sm); line-height: 1.4; }
.tx-text.interim { opacity: 0.6; font-style: italic; }
.tx-line.typing .tx-text { opacity: 0.7; font-style: italic; }
.tx-line.typing { animation: bubble-in var(--dur-2) var(--spring), typing-pulse 1.3s ease-in-out infinite; }
@keyframes typing-pulse { 50% { opacity: 0.55; } }
.rp-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--violet); padding: 4px 11px; border-radius: var(--r-pill); background: oklch(58% 0.2 295 / 0.12); }
.tx-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tx-tag { font-size: 0.6rem; padding: 2px 7px; border-radius: var(--r-pill); background: oklch(100% 0 0 / 0.25); font-weight: 600; letter-spacing: 0.02em; }
.tx-line.prospect .tx-tag { background: oklch(0% 0 0 / 0.06); color: var(--text-2); }
.tx-tag.warn { background: oklch(78% 0.15 75 / 0.22); color: var(--text); }

.manual-input { display: flex; gap: var(--s-2); margin-top: var(--s-2); align-items: center; }
.manual-input .text-input { flex: 1; }

/* ---------- Coach feed ---------- */
.briefing-card { margin-bottom: var(--s-2); padding: 12px 14px; border-radius: var(--r-lg); background: linear-gradient(135deg, oklch(76% 0.16 64 / 0.12), var(--card-2)); border: 1px solid oklch(76% 0.16 64 / 0.35); animation: slide-in var(--dur-2) var(--ease); }
.bf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.bf-tag { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--orange); }
.bf-x { background: none; border: none; color: var(--text-4); font-size: var(--text-sm); line-height: 1; }
.bf-x:hover { color: var(--text); }
.bf-item { font-size: var(--text-sm); line-height: 1.5; margin-top: 5px; }

.coach-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--text-4); transition: background var(--dur-2); }
.coach-pulse.active { background: var(--accent); box-shadow: 0 0 0 4px oklch(68% 0.17 152 / 0.18); animation: pulse-soft 1.6s infinite; }
@keyframes pulse-soft { 50% { box-shadow: 0 0 0 7px oklch(68% 0.17 152 / 0); } }

.coach-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); min-height: 150px; padding-right: 2px; }
.coach-card { position: relative; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--hairline); padding-left: 16px; animation: slide-in var(--dur-2) var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateX(10px); } }
.coach-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: var(--r-pill); }
.coach-card.info::before { background: var(--blue); }
.coach-card.good::before { background: var(--accent); }
.coach-card.warn::before { background: var(--warn); }
.coach-card.danger::before { background: var(--danger); }
.coach-card.danger { background: oklch(60% 0.22 25 / 0.06); }
.coach-card.compliance::before { background: var(--violet); }
.coach-card.compliance { background: oklch(58% 0.2 295 / 0.08); border-color: oklch(58% 0.2 295 / 0.3); }
.coach-card.compliance .cc-title { color: var(--violet); }
.cc-title { font-weight: 600; font-size: var(--text-sm); }
.cc-msg { font-size: var(--text-xs); color: var(--text-2); margin-top: 3px; line-height: 1.45; }

.coach-mode-bar { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-2); }
.coach-mode { flex: 1; margin-bottom: 0; }
.coach-mode .mode { flex: 1; justify-content: center; padding: 7px 6px; font-size: var(--text-xs); }
.coach-admin-btn { white-space: nowrap; font-size: var(--text-xs); padding: 7px 11px; }

.next-best { margin-top: var(--s-2); padding: 13px 15px; border-radius: var(--r-lg); background: linear-gradient(135deg, oklch(62% 0.19 256 / 0.1), oklch(68% 0.17 152 / 0.08)); border: 1px solid var(--hairline); }
.nb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-label { font-size: var(--text-2xs); color: var(--blue); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.nb-source { font-size: var(--text-2xs); font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); background: var(--card-solid); border: 1px solid var(--hairline); white-space: nowrap; }
.nb-source.src-ai { color: var(--violet); }
.nb-source.src-script { color: var(--violet); }
.nb-source.src-training { color: var(--accent); }
.nb-source.src-custom { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 45%, var(--hairline)); }
.nb-text { font-size: var(--text-sm); margin-top: 6px; line-height: 1.45; }
.nb-text.thinking { color: var(--text-3); font-style: italic; }