/* ============================================================
   On-Device-Voice-Agent — dev drawer (devpanel.js). Dev-only chrome: nothing
   here renders unless devpanel.js built it (?dev=1).
   Token roles from tokens.css.
   ============================================================ */

.real-chip {
  position: fixed; right: 14px; bottom: 14px; z-index: 210;
  padding: 7px 12px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--cyan-dim, #1a8aa0);
  background: var(--bg-base, #0A1020); color: var(--cyan, #2AE5FF);
  font: 600 var(--fs-micro, 12px)/1 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.14em; cursor: pointer;
}
.real-chip[hidden] { display: none; }
.real-chip.open { background: var(--cyan-glow, rgba(42, 229, 255, 0.2)); }

.real-panel {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 200;
  width: min(440px, 100vw); max-width: 100vw;
  box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px 56px; border-radius: 0;
  background: var(--bg-base, #0A1020); color: var(--ink, #F4F8FF);
  border-left: 1px solid var(--panel-edge, rgba(148, 196, 255, 0.13));
  box-shadow: var(--elev-3, none);
  font: var(--fs-micro, 12px)/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: normal; text-transform: none;
  display: none;
}
.real-panel.open { display: block; }
@media (min-width: 600px) {
  body.dev-open .real-chip { right: calc(min(440px, 100vw) + 14px); }
}
/* docked (>= 1280 px, devpanel.js DOCK_MIN_W): the page is laid out in the
   space LEFT of the drawer instead of under it — every customer control stays
   clickable. Narrower screens have no room: the drawer is an opt-in overlay. */
@media (min-width: 1280px) {
  body.dev-open .stage-viewport { right: min(440px, 100vw); }
  body.dev-open .real-chip { right: 14px; }          /* in the drawer's reserved foot, not over the page's STOP */
}

.real-panel .dp-head {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--cyan, #2AE5FF); letter-spacing: var(--track-label, 0.14em);
  margin-bottom: 8px;
}
.real-panel .dp-close { padding: 2px 9px; font-size: 16px; line-height: 1; }
.real-panel .dp-sec {
  border-top: 1px solid var(--hairline, rgba(148, 196, 255, 0.2));
  padding: 10px 0 8px;
}
.real-panel h4 {
  margin: 0 0 8px; font-weight: 600; font-size: var(--fs-micro, 12px);
  color: var(--ink-label, rgba(199, 224, 255, 0.66)); letter-spacing: var(--track-label, 0.14em);
  text-transform: uppercase;
}
.real-panel .dp-sub { color: var(--ink-faint, rgba(244, 248, 255, 0.55)); margin: 4px 0; }
.real-panel .dp-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.real-panel .dp-grid {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 10px; align-items: center; margin: 8px 0;
}
.real-panel .dp-grid > label, .real-panel .dp-grid > span:nth-child(odd) { color: var(--ink-label, rgba(199, 224, 255, 0.66)); }
.real-panel .dp-ro { color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }
.real-panel .dp-check { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }

.real-panel select, .real-panel input[type="text"], .real-panel input[type="number"] {
  min-width: 0; width: 100%; max-width: none; box-sizing: border-box;
  background: var(--bg-lift, #101A30); color: var(--ink, #F4F8FF);
  border: 1px solid var(--panel-edge, rgba(148, 196, 255, 0.13));
  border-radius: var(--r-sm, 8px); padding: 5px 7px; font: inherit;
}
.real-panel .dp-row input[type="text"] { flex: 1 1 160px; width: auto; }
.real-panel input[type="range"] { flex: 1 1 auto; accent-color: var(--cyan, #2AE5FF); }
.real-panel button {
  background: var(--bg-lift, #101A30); color: var(--cyan, #2AE5FF);
  border: 1px solid var(--cyan-dim, #1a8aa0); border-radius: var(--r-sm, 8px);
  padding: 5px 10px; font: inherit; cursor: pointer;
}
.real-panel button:hover { background: var(--cyan-glow, rgba(42, 229, 255, 0.2)); }
.real-panel button:disabled { opacity: 0.45; cursor: default; }
.real-panel button.on { color: var(--lime, #BFFF46); border-color: var(--lime, #BFFF46); }

/* stage chips with a progress underline */
.real-panel .rp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.real-panel .rp-chip {
  letter-spacing: 0.04em;
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 5px; border-radius: var(--r-pill, 999px);
  background: var(--panel, rgba(148, 196, 255, 0.06)); color: var(--ink-dim, rgba(244, 248, 255, 0.8));
  overflow: hidden;
}
.real-panel .rp-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint, #888); }
.real-panel .rp-chip.loading i { background: var(--amber, #FFC53D); animation: dp-blink 0.9s infinite; }
.real-panel .rp-chip.ready i { background: var(--ok, #46E8A0); }
.real-panel .rp-chip.error i { background: var(--danger, #FF4D5E); }
.real-panel .rp-chip .dp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.real-panel .rp-chip .dp-bar u { background: var(--cyan, #2AE5FF); }
.real-panel .rp-chip.ready .dp-bar u { width: 100%; background: var(--ok, #46E8A0); }
.real-panel .rp-chip.indet .dp-bar u { width: 30%; animation: dp-slide 1.2s linear infinite; }
@keyframes dp-blink { 50% { opacity: 0.3; } }
@keyframes dp-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .real-panel .rp-chip.loading i, .real-panel .rp-chip.indet .dp-bar u { animation: none; }
}
.real-panel .rp-detail { min-height: 18px; color: var(--ink-label, rgba(199, 224, 255, 0.66)); overflow-wrap: anywhere; }

.real-panel .dp-bar { display: block; background: var(--panel, rgba(148, 196, 255, 0.06)); height: 6px; border-radius: 3px; overflow: hidden; }
.real-panel .dp-bar u { display: block; height: 100%; width: 0; text-decoration: none; background: var(--cyan, #2AE5FF); }
.real-panel .dp-meters { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.real-panel .dp-meters .rp-lvl-out { background: var(--lime, #BFFF46); }

/* latency waterfall: eos → verdict → stt → llm first token → first audio */
.real-panel .dp-legend { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--ink-faint, #888); margin-bottom: 6px; }
.real-panel .dp-legend i { display: inline-block; width: 10px; height: 6px; border-radius: 2px; margin-right: -6px; }
.real-panel .k-verdict { background: var(--violet, #A88BFF); }
.real-panel .k-stt { background: var(--cyan, #2AE5FF); }
.real-panel .k-llm { background: var(--amber, #FFC53D); }
.real-panel .k-tts { background: var(--lime, #BFFF46); }
.real-panel .dp-turn { padding: 5px 0; border-bottom: 1px dashed var(--panel-edge, rgba(148, 196, 255, 0.13)); }
.real-panel .dp-turn-h { display: flex; justify-content: space-between; gap: 8px; }
.real-panel .dp-heard { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim, #ccc); }
.real-panel .dp-total { color: var(--ink, #fff); white-space: nowrap; }
.real-panel .dp-bars { display: flex; height: 8px; margin: 3px 0; background: var(--panel, rgba(148, 196, 255, 0.06)); border-radius: 2px; overflow: hidden; }
.real-panel .dp-bars i { display: block; height: 100%; }
.real-panel .dp-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.real-panel .dp-badge {
  font-style: normal; padding: 0 6px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--panel-edge, rgba(148, 196, 255, 0.13)); color: var(--ink-dim, #ccc);
}
.real-panel .dp-badge.p1 { color: var(--ok, #46E8A0); border-color: var(--ok, #46E8A0); }
.real-panel .dp-badge.p2 { color: var(--violet, #A88BFF); border-color: var(--violet, #A88BFF); }
.real-panel .dp-badge.p3, .real-panel .dp-badge.warn { color: var(--amber, #FFC53D); border-color: var(--amber, #FFC53D); }
.real-panel .dp-badge.tool { color: var(--cyan, #2AE5FF); }
.real-panel .dp-tps { color: var(--lime, #BFFF46); text-transform: none; letter-spacing: 0; }

.real-panel .rp-diag { min-height: 16px; color: var(--lime, #BFFF46); overflow-wrap: anywhere; margin-bottom: 4px; }
.real-panel pre {
  margin: 6px 0; padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--bg-abyss, #070B14); border-radius: var(--r-sm, 8px);
  color: var(--ink-dim, #ccc); font: inherit; max-height: 240px; overflow: auto;
}
.real-panel .dp-links a { color: var(--cyan, #2AE5FF); }
.real-panel .rp-note {
  position: sticky; bottom: -56px; margin: 8px -16px -56px; padding: 8px 16px;
  min-height: 18px; background: var(--bg-lift, #101A30);
  color: var(--amber, #FFC53D); overflow-wrap: anywhere;
}

/* ---- trace sections (VE_TRACE) ---- */
.real-panel .dp-diag-top .dp-ds-line { margin: 2px 0; color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }
.real-panel .dp-diag-top b { color: var(--ink, #F4F8FF); }
.real-panel .dp-anoms { list-style: none; margin: 6px 0 0; padding: 0; }
.real-panel .dp-anoms li { padding: 3px 0; cursor: pointer; overflow-wrap: anywhere; color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }
.real-panel .dp-anoms li:hover { background: var(--panel, rgba(148, 196, 255, 0.06)); }
.real-panel .dp-anoms a { color: var(--cyan, #2AE5FF); }
.real-panel .dp-badge.bad { color: var(--danger, #FF4D5E); border-color: var(--danger, #FF4D5E); }
.real-panel .dp-badge.bott { color: var(--ink, #F4F8FF); border-color: var(--amber, #FFC53D); }

/* breakdown stage colours — one role per stage */
.real-panel .b-endpoint { background: var(--ink-faint, rgba(244, 248, 255, 0.55)); }
.real-panel .b-stt { background: var(--cyan, #2AE5FF); }
.real-panel .b-verdict { background: var(--violet, #A88BFF); }
.real-panel .b-routing { background: var(--cyan-dim, #1a8aa0); }
.real-panel .b-llmTtft { background: var(--amber, #FFC53D); }
.real-panel .b-llmRest { background: var(--amber, #FFC53D); opacity: 0.55; }
.real-panel .b-ttsSynth { background: var(--lime, #BFFF46); }
.real-panel .b-playout { background: var(--ok, #46E8A0); }
.real-panel .b-unexplained { background: var(--danger, #FF4D5E); opacity: 0.7; }
.real-panel .dp-legend i[class^="b-"] { display: inline-block; width: 10px; height: 6px; border-radius: 2px; margin-right: 2px; }

.real-panel .dp-card { padding: 5px 4px; border-bottom: 1px dashed var(--panel-edge, rgba(148, 196, 255, 0.13)); border-radius: var(--r-sm, 8px); }
.real-panel .dp-card.has-anom { box-shadow: inset 2px 0 0 var(--danger, #FF4D5E); }
.real-panel .dp-card.flash { background: var(--cyan-glow, rgba(42, 229, 255, 0.2)); }
.real-panel .dp-card-h { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; }
.real-panel .dp-card.open { background: var(--panel, rgba(148, 196, 255, 0.06)); }
.real-panel .dp-bd { border-collapse: collapse; margin: 4px 0; }
.real-panel .dp-bd td { padding: 0 10px 0 0; color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }
.real-panel .dp-bd tr.hot td { color: var(--amber, #FFC53D); font-weight: 600; }
.real-panel .dp-bd i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.real-panel .dp-raw { max-height: 120px; }
.real-panel .dp-evs { max-height: 220px; overflow: auto; margin-top: 4px; font-size: 11px; }
.real-panel .dp-evs > div, .real-panel .dp-timeline > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.real-panel .dp-t { color: var(--ink-faint, rgba(244, 248, 255, 0.55)); }
.real-panel .dp-timeline {
  height: 220px; overflow: auto; font-size: 11px; padding: 4px 6px;
  background: var(--bg-abyss, #070B14); border-radius: var(--r-sm, 8px);
}
.real-panel .dp-timeline > .bad, .real-panel .dp-timeline > .bad b { color: var(--danger, #FF4D5E); }
.real-panel .dp-tbl { border-collapse: collapse; width: 100%; margin-bottom: 4px; }
.real-panel .dp-tbl th, .real-panel .dp-tbl td { text-align: right; padding: 1px 6px; }
.real-panel .dp-tbl th:first-child, .real-panel .dp-tbl td:first-child { text-align: left; color: var(--ink-label, rgba(199, 224, 255, 0.66)); }
.real-panel .dp-tbl th { color: var(--ink-faint, rgba(244, 248, 255, 0.55)); font-weight: 600; }
.real-panel .dp-meters .rp-lvl-vad { background: var(--violet, #A88BFF); }
.real-panel .rp-meter-txt { color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }

/* the drawer switched a safety net off: said on the page, in the red role, not only inside the drawer */
.dp-safety-badge {
  position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2147483000;
  padding: 4px 12px; border-radius: var(--r-pill, 999px);
  font: 700 var(--fs-micro, 12px)/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em;
  color: var(--bg-base, #0A1020); background: var(--danger); border: 1px solid var(--danger);
}
.dp-safety-badge[hidden] { display: none; }

/* presenter section: the safety-key demo button (danger role while the key is out) + the demo script */
.real-panel .rp-key[aria-pressed="true"] { color: var(--danger, #FF4D5E); border-color: var(--danger, #FF4D5E); background: var(--danger-wash, rgba(255, 77, 94, 0.14)); }
.real-panel .dp-script summary { cursor: pointer; color: var(--ink-dim, rgba(244, 248, 255, 0.8)); margin: 6px 0; }
.real-panel .dp-script ol { margin: 6px 0; padding-left: 20px; color: var(--ink-dim, rgba(244, 248, 255, 0.8)); }
.real-panel .dp-script li { margin: 4px 0; }