static/nova.css

/* Palette and rhythm from the in-car Qt HMI (hmi_qt/NovaUI/Theme.qml). */
:root {
  --base: #07080b; --surface: #0e1016; --surface-hi: #151922; --hairline: #1e2330;
  --cyan: #4cd6ff; --violet: #b66bff; --red: #ff5e7e; --green: #4dffb4; --yellow: #ffd84d;
  --text-hi: #eef1f7; --text-mid: #8b93a7; --text-lo: #4d5566;
  --idle: #2a3242; --accent: var(--idle);
  --u: 8px; --radius: 14px;
  --font: "SF Pro Text", Inter, Roboto, system-ui, sans-serif;
  color-scheme: dark;
}
[data-state="listening"] { --accent: var(--cyan); }
[data-state="thinking"]  { --accent: var(--violet); }
[data-state="speaking"]  { --accent: var(--green); }
[data-state="error"]     { --accent: var(--red); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--base); color: var(--text-hi); font: 15px/1.45 var(--font); }
#app { max-width: 560px; min-height: 100%; margin: 0 auto; padding: calc(2 * var(--u)); display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; gap: var(--u); padding-block: var(--u); }
.brand { font-weight: 700; letter-spacing: .28em; font-size: 14px; }
.phase { margin-left: auto; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: color .3s; }
[data-state="idle"] .phase { color: var(--text-lo); }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--hairline); background: var(--surface-hi); border-radius: 999px; padding: 6px 14px; }
button:hover:not(:disabled) { border-color: var(--text-lo); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.chip { font-size: 12px; color: var(--text-mid); padding: 3px 10px; }
.chip[data-mode="local"] { color: var(--yellow); }
.chip[data-mode="openrouter"] { color: var(--cyan); }
.ghost { background: transparent; }
.danger { border-color: #3a1d27; color: var(--red); }

.gate { margin-top: 18vh; }
.lede { color: var(--text-mid); margin: 0 0 calc(3 * var(--u)); }
#login { display: flex; flex-wrap: wrap; gap: var(--u); align-items: center; }
#login label { width: 100%; font-size: 12px; color: var(--text-mid); letter-spacing: .08em; text-transform: uppercase; }
#passcode { flex: 1 1 200px; min-width: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 14px; }
#connect { background: var(--cyan); color: var(--base); border: 0; font-weight: 600; padding: 10px 20px; }
.msg { min-height: 1.45em; color: var(--text-mid); font-size: 13px; }
.msg.bad { color: var(--red); }

.live { flex: 1; display: flex; flex-direction: column; }
.orb-wrap { display: grid; place-items: center; padding-block: calc(2 * var(--u)); }
#orb { width: min(260px, 60vw); aspect-ratio: 1; max-width: 100%; }
.transcript { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; max-height: 38vh; display: flex; flex-direction: column; gap: var(--u); }
.transcript li { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 8px 12px; max-width: 88%; }
.transcript li.you { align-self: flex-end; color: var(--text-mid); }
.transcript li.nova { align-self: flex-start; }
.transcript li::before { display: block; font-size: 10px; letter-spacing: .14em; color: var(--text-lo); margin-bottom: 2px; }
.transcript li.you::before { content: "YOU"; }
.transcript li.nova::before { content: "NOVA"; }
.controls { display: flex; align-items: center; gap: var(--u); padding-top: calc(2 * var(--u)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.metrics { flex: 1; text-align: center; font: 12px "SF Mono", "JetBrains Mono", monospace; color: var(--text-lo); }
#mute[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }
#orb { cursor: pointer; }