/* AURA — dual theme.
   Dark: carbon & warm amber, instrument-panel calm.
   Light: warm paper & burnt sienna, an editorial notebook.
   One accent hue across both; serif is reserved for AURA's SPOKEN voice,
   so the type itself carries the two-channel idea. Squarer geometry, hairline
   rules, and flat fills keep it reading as a crafted tool, not a template. */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-display: swap; src: url("/fonts/InstrumentSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-display: swap; src: url("/fonts/InstrumentSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexSerif-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexSerif-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("/fonts/IBMPlexMono-Bold.ttf") format("truetype"); }

:root {
  /* dark is the default (also the no-JS fallback) */
  --bg: #0d0f11;
  --panel: #14171a;
  --panel-2: #191d21;
  --sunk: #0a0c0e;
  --border: #272d33;
  --border-strong: #39424a;
  --text: #e7e3d9;
  --dim: #8b8578;
  --faint: #5d584f;
  --accent: #e3a44a;
  --accent-hover: #eab35f;
  --accent-ink: #181206;
  --accent-soft: rgba(227, 164, 74, 0.12);
  --accent-line: #7d5b28;
  --info: #8ab6d8;
  --info-soft: rgba(138, 182, 216, 0.12);
  --ok: #63b06b;
  --err: #e0574d;
  --warn: #e3a44a;
  --shadow: none;
  --hover-tint: rgba(255, 255, 255, 0.03);

  --radius: 7px;
  --radius-pill: 999px;
  --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;

  color-scheme: dark;
  font-family: var(--sans);
}

:root[data-theme="light"] {
  --bg: #f3efe7;
  --panel: #fbf9f4;
  --panel-2: #efeade;
  --sunk: #ebe5d9;
  --border: #e2daca;
  --border-strong: #cabfa9;
  --text: #242019;
  --dim: #6d665a;
  --faint: #9a9080;
  --accent: #b0542a;
  --accent-hover: #9c4823;
  --accent-ink: #fdf8f0;
  --accent-soft: #f1e3d5;
  --accent-line: #d8bda2;
  --info: #3f6a8a;
  --info-soft: #e6edf2;
  --ok: #4b7c46;
  --err: #a83b30;
  --warn: #a86a20;
  --shadow: 0 1px 2px rgba(60, 45, 20, 0.05);
  --hover-tint: rgba(40, 30, 15, 0.035);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.ph { vertical-align: -0.125em; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------ header ------------------------------ */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.brand { display: flex; gap: 13px; align-items: center; }
.logo { font-size: 24px; color: var(--accent); }
.brand h1,
h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.34em;
  font-weight: 700;
  padding-left: 0.34em; /* optical: balance the tracking on the right */
}
.sub { color: var(--dim); font-size: 12px; font-family: var(--mono); margin-top: 1px; }

.status { display: flex; align-items: center; gap: 9px; }

.pill {
  padding: 4px 12px;
  border-radius: var(--radius);
  font-size: 10.5px;
  border: 1px solid var(--border);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--mono);
}
.pill::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 7px;
  vertical-align: 1px;
  opacity: 0.9;
}
.pill[data-state="listening"] { color: var(--accent); border-color: var(--accent-line); }
.pill[data-state="hearing"] { color: var(--info); border-color: var(--info); }
.pill[data-state="thinking"] { color: var(--text); border-color: var(--border-strong); }
.pill[data-state="speaking"] { color: var(--ok); border-color: var(--ok); }
.pill[data-state="disconnected"] { color: var(--err); border-color: var(--err); }

/* ------------------------------ main grid ------------------------------ */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  padding: 14px 22px;
  min-height: 0;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel-title {
  padding: 10px 15px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.panel-title .hint {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--faint);
}
.scroll { flex: 1; overflow-y: auto; padding: 15px; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* ------------------------------ conversation ------------------------------ */
.bubble {
  max-width: 88%;
  margin-bottom: 12px;
  padding: 9px 13px;
  border-radius: var(--radius);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
}
.bubble.user {
  background: var(--info-soft);
  border-color: transparent;
  border-left: 2px solid var(--info);
  margin-left: auto;
}
.bubble.aura { background: var(--panel-2); border-left: 2px solid var(--accent); }
.bubble.interrupted { opacity: 0.5; }
.bubble .tag {
  display: block;
  font-size: 9.5px;
  color: var(--faint);
  margin-bottom: 4px;
  letter-spacing: 0.16em;
  font-family: var(--mono);
}
/* AURA's answer is what gets SPOKEN — set it in the serif so the voice is
   legible as voice. User turns stay in the sans (typed/heard, not spoken). */
.bubble.aura > span:not(.tag) {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
}

.partial {
  padding: 9px 15px;
  color: var(--info);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  border-top: 1px dashed var(--border);
}

/* ------------------------------ empty state ------------------------------ */
#empty-state {
  margin: 8vh auto 0;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  color: var(--dim);
  padding: 0 10px;
}
#empty-state .es-icon { font-size: 38px; color: var(--accent); }
#empty-state h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text);
}
#empty-state p { margin: 0; font-size: 13.5px; line-height: 1.6; }
#empty-state .examples {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  margin-top: 6px;
}
button.example {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  text-align: left;
  font-weight: 400;
  font-size: 13.5px;
  padding: 11px 14px;
  display: flex;
  gap: 11px;
  align-items: center;
}
button.example:hover:not(:disabled) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
button.example .ph { color: var(--accent); font-size: 16px; }
#empty-state .empty-sub { font-size: 12px; }
#empty-conn-hint { font-size: 12px; color: var(--warn); }
#empty-conn-hint code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--mono);
}

/* ------------------------------ trace ------------------------------ */
.trace-line { padding: 2px 0; color: var(--dim); }
.trace-line .t-name { color: var(--accent); }
.trace-line.ok .t-mark { color: var(--ok); }
.trace-line.fail .t-mark { color: var(--err); }
.trace-line.confirm { color: var(--warn); }
.trace-line.error { color: var(--err); }

details.trace-turn {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--panel-2);
}
details.trace-turn > summary {
  cursor: pointer;
  padding: 7px 11px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  list-style: none;
}
details.trace-turn > summary::-webkit-details-marker { display: none; }
details.trace-turn > summary::before { content: "▸"; color: var(--faint); font-size: 10px; }
details.trace-turn[open] > summary::before { content: "▾"; }
details.trace-turn > summary:hover { background: var(--hover-tint); border-radius: var(--radius); }
.tt-id {
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tt-label {
  color: var(--text);
  opacity: 0.85;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-stats { color: var(--faint); font-size: 11px; white-space: nowrap; }
.turn-body { padding: 5px 11px 9px; border-top: 1px solid var(--border); }

details.t-call { margin: 2px 0; }
details.t-call > summary {
  cursor: pointer;
  list-style: none;
  padding: 3px 0;
  color: var(--dim);
}
details.t-call > summary::-webkit-details-marker { display: none; }
details.t-call > summary:hover { color: var(--text); }
.t-name { color: var(--info); }                 /* tier 0 — auto-runs */
.t-name.tier1 {
  color: var(--accent);                          /* tier 1 — confirmation-gated */
  border-bottom: 1px dotted var(--accent-line);
}
.t-args { color: var(--faint); }
.t-mark.ok { color: var(--ok); }
.t-mark.fail { color: var(--err); }
.t-body pre {
  margin: 5px 0 7px 18px;
  padding: 9px 11px;
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.t-body pre.t-result { color: var(--dim); }

.file-link { color: var(--info); text-decoration: underline dotted; cursor: pointer; }
.file-link:hover { color: var(--text); }

/* latency / cost strip */
.hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 15px;
  border-top: 1px solid var(--border);
}
.chip {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: var(--mono);
}
.chip.accent { color: var(--accent); border-color: var(--accent-line); }

.cost-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--mono);
}

/* ------------------------------ footer + buttons ------------------------------ */
footer {
  display: flex;
  gap: 10px;
  padding: 13px 22px;
  border-top: 1px solid var(--border);
  align-items: center;
  flex-wrap: wrap;
  background: var(--panel);
}

button {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-family: var(--sans);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 9px 15px;
  cursor: pointer;
  font-size: 13.5px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  font-weight: 400;
}
button.ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--hover-tint);
}
button.ghost.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
button.small { padding: 6px 9px; font-size: 12px; }

/* the mic is the one hero control — the only pill on the page */
.mic {
  border-radius: var(--radius-pill);
  padding: 10px 20px;
}
.mic.active { background: var(--err); border-color: var(--err); color: #fff; }

.bubble.watch { border-left-color: var(--ok); }
.bubble.watch.red { border-left-color: var(--err); }

#context-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 11px;
  border: 1px solid var(--info);
  border-radius: var(--radius);
  color: var(--info);
  background: var(--info-soft);
  font-family: var(--mono);
  font-size: 12.5px;
}
#context-chip button {
  background: transparent;
  border: none;
  color: var(--dim);
  padding: 0 2px;
  font-size: 12px;
}
#context-chip button:hover { color: var(--err); background: transparent; }

#text-form { flex: 1; display: flex; gap: 8px; min-width: 240px; }
#text-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 13px;
  font-size: 14px;
  font-family: var(--sans);
}
#text-input::placeholder { color: var(--faint); }
#text-input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ------------------------------ confirm overlay ------------------------------ */
#confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 8, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.confirm-card {
  background: var(--panel);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  padding: 20px 22px;
  width: min(560px, 92vw);
}
.confirm-title { color: var(--warn); font-weight: 700; margin-bottom: 10px; }
#confirm-desc { line-height: 1.5; }
#confirm-argv {
  display: block;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--info);
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-x: auto;
}
#confirm-diff {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  max-height: 40vh;
  overflow: auto;
  white-space: pre;
}
#confirm-diff .del { color: var(--err); }
#confirm-diff .add { color: var(--ok); }
#confirm-diff .ctx { color: var(--dim); }
.confirm-hint { color: var(--dim); font-size: 12px; margin-top: 14px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #trace-panel { max-height: 34vh; }
}