/* ============================================================
   Redesign skin — Standby "live signal" treatment on top of the
   app's components. The token rewrite recolors everything dark; this
   sheet adds the SHARP, technical details that kill the "soft" look:
   mono uppercase labels, signal-green CTAs, defined cards, glows,
   plus the mobile layout fix. Loaded last so it wins.
   ============================================================ */

/* ---- Mono technical labels (the anti-soft signature) ---- */
.rings-label, .field-label, .meter-label, .spark-label, .nb-label, .cm-label,
.lg, .bf-tag, .brand-tag, .tx-who {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}
.rings-label { letter-spacing: 0.26em; color: var(--text-4); }
.field-label { color: var(--text-4); font-size: var(--text-2xs); }
.tx-who { letter-spacing: 0.12em; }
.mic-state, .nb-source, .spark-delta, .call-clock, .level-xp, .dim-val { font-family: var(--font-mono); }
.dim-val { font-weight: 600; letter-spacing: -0.01em; }

/* ---- Cards: defined gradient-dark surface, crisper edges ---- */
.card {
  background: linear-gradient(180deg, oklch(20.5% 0.017 250 / 0.7), oklch(15.5% 0.014 250 / 0.7));
  border-radius: var(--r-2xl);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--hairline-strong); }
.card::before { height: 1px; background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent); border-radius: 0; }
[data-theme="dark"] .card::before { background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent); }

/* sharper panel-title kicker tick → signal glow */
.card-head h2 { font-size: var(--text-base); letter-spacing: -0.01em; }
.card-head h2::before { width: 3px; height: 15px; box-shadow: 0 0 10px oklch(84% 0.18 152 / 0.6); }

/* ---- Buttons: signal-green primary, rectangular (pro, not pill) ---- */
.btn { border-radius: var(--r-md); letter-spacing: -0.01em; }
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 6px 22px -6px oklch(84% 0.18 152 / 0.55);
  text-shadow: none;
}
.btn-primary::after { background: linear-gradient(180deg, oklch(100% 0 0 / 0.18), transparent 50%); }
.btn-primary:hover { background: var(--signal-bright); box-shadow: 0 10px 34px -8px oklch(84% 0.18 152 / 0.7); }
.btn-primary.is-live { background: var(--danger); color: #fff; box-shadow: 0 8px 26px -8px oklch(72% 0.19 28 / 0.6); }
.btn-send { background: var(--accent); color: var(--bg); box-shadow: 0 4px 16px -4px oklch(84% 0.18 152 / 0.55); }

/* ---- Transcript: dark text on the bright signal bubble ---- */
.tx-line.rep { color: var(--bg); box-shadow: 0 4px 18px -6px oklch(84% 0.18 152 / 0.4); }
.tx-line.rep .tx-who { opacity: 0.62; }

/* ---- Dimension bars: technical track + glow on strong scores ---- */
.dim-track, .cm-track { background: oklch(100% 0 0 / 0.06); box-shadow: none; }
.dim-fill { box-shadow: 0 0 10px -2px currentColor; }
.dim-val { color: var(--text-2); }

/* ---- Segmented controls + selects: darker, sharper ---- */
.segmented { background: oklch(0% 0 0 / 0.25); border: 1px solid var(--hairline); }
.mode-active, .spk-active { background: var(--surface-2); box-shadow: 0 1px 2px oklch(0% 0 0 / 0.4); }
.select, .text-input { background: oklch(0% 0 0 / 0.22); }
.select:focus, .text-input:focus { box-shadow: 0 0 0 3px oklch(84% 0.18 152 / 0.18); }

/* ---- Live pill / coach pulse glow ---- */
.coach-pulse.active { box-shadow: 0 0 0 4px oklch(84% 0.18 152 / 0.16), 0 0 14px oklch(84% 0.18 152 / 0.5); }

/* ---- Thin, on-brand scrollbars ---- */
.transcript, .dim-bars, .coach-cards, .sheet, .menu-popover { scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
.transcript::-webkit-scrollbar, .dim-bars::-webkit-scrollbar, .coach-cards::-webkit-scrollbar { width: 7px; }
.transcript::-webkit-scrollbar-thumb, .dim-bars::-webkit-scrollbar-thumb, .coach-cards::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }

/* ---- Less playful: rectangular nav/chrome + tighter chips (no consumer-app pills) ---- */
.icon-btn { border-radius: var(--r-md); }
.streak-pill, .level-pill { border-radius: var(--r-md); }
.menu-popover { border-radius: var(--r-lg); }
.rings-grade { border-radius: var(--r-sm); }
.mic-state, .nb-source { border-radius: var(--r-sm); }
.segmented { border-radius: var(--r-md); }
.segmented .mode, .segmented .spk { border-radius: var(--r-sm); }
.tailor-btn, .demo-chip, .tmpl-chip, .script-chip, .tx-tag, .rp-indicator, .bf-tag { border-radius: var(--r-sm); }
.tx-line { border-radius: var(--r-xl); }   /* chat bubbles: less round (tail corners kept) */
.toast { border-radius: var(--r-md); }     /* toast: rounded rect, not a pill */

/* ---- Customizable live-metric widget bar ---- */
.widget-bar { display: flex; gap: var(--s-2); align-items: stretch; padding: 0 clamp(1rem, 3vw, 2.25rem) var(--s-2); overflow-x: auto; scrollbar-width: none; }
.widget-bar::-webkit-scrollbar { display: none; }
.widget {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 8px 15px; min-width: 122px; border-radius: var(--r-md);
  background: linear-gradient(180deg, oklch(20.5% 0.017 250 / 0.6), oklch(15.5% 0.014 250 / 0.6));
  border: 1px solid var(--hairline); box-shadow: 0 1px 0 var(--highlight) inset;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.widget:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.w-icon { font-size: 1.05rem; opacity: 0.9; line-height: 1; }
.w-body { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.w-val { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--text); }
.w-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; color: var(--text-4); margin-top: 2px; white-space: nowrap; }
.widget[data-tone="accent"] .w-val { color: var(--accent); }
.widget[data-tone="orange"] .w-val { color: var(--orange); }
.widget-add {
  flex: 0 0 auto; width: 42px; border-radius: var(--r-md);
  background: var(--fill-subtle); border: 1px dashed var(--hairline-strong); color: var(--text-3);
  font-size: 1.05rem; cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.widget-add:hover { background: var(--fill); color: var(--accent); border-color: var(--accent); }

/* ---- Trained-voice roster (Settings → speaker detection) ---- */
.closer-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.closer-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-subtle); font-size: var(--text-sm); }
.closer-remove { width: 22px; height: 22px; flex: none; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.closer-remove:hover { background: var(--danger); color: #fff; }

/* ---- Live "say this" — the next move reacting to the prospect in real time ---- */
.next-best.nb-live {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  background: linear-gradient(180deg, oklch(22% 0.06 152 / 0.5), var(--card-2));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent), 0 10px 28px -12px oklch(84% 0.18 152 / 0.55);
  animation: nb-live-pop 0.3s var(--spring);
}
.next-best.nb-live .nb-text { color: var(--text); font-weight: 600; }
.nb-source.src-live { color: var(--bg); background: var(--accent); border-color: transparent; }
.nb-source.kind-signal { background: var(--orange); color: oklch(22% 0.03 80); }
.nb-source.kind-stall { background: var(--blue); color: oklch(18% 0.03 250); }
@keyframes nb-live-pop { from { transform: scale(0.985); } }

/* ---- Listener status pill (Discord / extension / OS capture) ---- */
.listen-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--fill-subtle); border: 1px solid var(--hairline); font-size: var(--text-xs); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.listen-pill .listen-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; }
.listen-pill.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.listen-pill.on .listen-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: listen-pulse 1.8s ease-in-out infinite; }
@keyframes listen-pulse { 50% { opacity: 0.35; } }
@media (max-width: 640px) { .listen-pill .listen-text { display: none; } }

.widget-modal .wc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: var(--s-2) 0 var(--s-3); }
.wc-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-sm); color: var(--text-2); padding: 5px 2px; }
.wc-row input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; }
.wc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .widget-modal .wc-list { grid-template-columns: 1fr; } }

/* ============================================================
   Mobile fix — the desktop cockpit is a fixed-height flex region
   (panels scroll internally). On narrow screens that squished all
   three panels into the viewport; here we let them flow + the page
   scroll naturally.
   ============================================================ */
@media (max-width: 1080px) {
  .cockpit { flex: 0 0 auto; }
  .card { min-height: auto; }
  .transcript { min-height: 220px; max-height: 52vh; }
  .dim-bars, .coach-cards { overflow: visible; flex: 0 0 auto; min-height: 0; }
  .score-panel { padding-bottom: var(--s-4); }
}

@media (max-width: 560px) {
  .toolbar .btn, .toolbar .field { flex: 1 1 auto; }
  .rings-wrap { width: min(220px, 70%); }
  .speaker-toggle .spk { padding: 8px 6px; font-size: var(--text-xs); white-space: nowrap; }
}

/* Tighten the nav so the profile pill never clips on small phones. */
@media (max-width: 440px) {
  .navbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .nav-right { gap: 6px; }
  .streak-pill { display: none; }
}