:root {
  --bg: #05080d;
  --text: #e7eef8;
  --muted: #8a9bb4;
  --accent: #00caff;
  --accent-2: #1e6bff;
  --warn: #ff9f43;
  --mute: #ff3b3b;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(900px 520px at 50% 115%, #10243d 0%, transparent 70%),
    radial-gradient(1200px 700px at 50% -20%, #0b1626 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the room: just the speaker ---------- */
.room { height: 100%; display: grid; place-items: center; position: relative; }
.device {
  position: relative; width: min(340px, 70vw); aspect-ratio: 1 / 1.05;
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.device-body {
  position: absolute; inset: 10% 0 0 0; border-radius: 50% / 21%;
  background:
    repeating-linear-gradient(90deg, #ffffff07 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #1c2536 0%, #0e131d 65%, #090c13 100%);
  box-shadow: 0 40px 80px #000c, inset 0 -24px 40px #000a;
}
.device-top {
  position: absolute; left: 3.5%; right: 3.5%; top: 0; aspect-ratio: 1 / 0.42; z-index: 3;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #273348, #131b29 72%);
  box-shadow: inset 0 2px 0 #ffffff12, inset 0 -6px 14px #000a;
}
/* the four Echo buttons */
.device-top .dot { position: absolute; width: 7%; aspect-ratio: 1 / .45; border-radius: 50%; background: #0c121c; box-shadow: inset 0 1px 0 #ffffff10; }
.device-top .dot:nth-child(1) { left: 24%; top: 45%; }
.device-top .dot:nth-child(2) { right: 24%; top: 45%; }
.device-top .dot:nth-child(3) { left: 46.5%; top: 22%; }
.device-top .dot:nth-child(4) { left: 46.5%; top: 68%; }

.ring { position: absolute; left: 1%; right: 1%; top: -1%; aspect-ratio: 1 / 0.44; border-radius: 50%; z-index: 2; pointer-events: none; }
.ring-glow, .ring-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(ellipse, transparent 63%, #000 65%, #000 72%, transparent 74%);
          mask: radial-gradient(ellipse, transparent 63%, #000 65%, #000 72%, transparent 74%);
}
.ring-glow { background: #161f2e; transition: background .35s, filter .35s, opacity .35s; }
.ring-sweep { opacity: 0; background: conic-gradient(from 0deg, transparent 0 55%, #8ff6ff 78%, transparent 95%); transition: opacity .3s; }

.floor { position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, #00000066); pointer-events: none; }

/* ---------- light ring states (like a real Echo) ---------- */
.device[data-state="off"] .ring-glow { opacity: .4; }
.device[data-state="idle"] .ring-glow { background: #161f2e; }
.device[data-state="awake"] .ring-glow,
.device[data-state="followup"] .ring-glow {
  background: linear-gradient(90deg, var(--accent-2), var(--accent) 50%, var(--accent-2));
  filter: drop-shadow(0 0 16px var(--accent));
}
.device[data-state="awake"] .ring-sweep { opacity: 1; animation: spin 1.4s linear infinite; }
.device[data-state="followup"] .ring-glow { opacity: .55; }
.device[data-state="thinking"] .ring-glow {
  background: conic-gradient(var(--accent) 0 25%, var(--accent-2) 25% 50%, var(--accent) 50% 75%, var(--accent-2) 75%);
  animation: think .9s linear infinite;
}
.device[data-state="speaking"] .ring-glow { background: var(--accent); animation: speak .5s ease-in-out infinite alternate; }
.device[data-state="muted"] .ring-glow { background: var(--mute); filter: drop-shadow(0 0 14px var(--mute)); }
.device[data-state="error"] .ring-glow { background: var(--warn); filter: drop-shadow(0 0 14px var(--warn)); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes think { from { transform: rotate(0); filter: drop-shadow(0 0 10px var(--accent-2)); } to { transform: rotate(360deg); filter: drop-shadow(0 0 18px var(--accent)); } }
@keyframes speak { from { filter: drop-shadow(0 0 6px var(--accent)) brightness(.8); } to { filter: drop-shadow(0 0 24px var(--accent)) brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .ring-sweep, .ring-glow { animation: none !important; } }

/* ---------- one-time start overlay ---------- */
.start { position: fixed; inset: 0; display: grid; place-items: center; background: #05080dd9; backdrop-filter: blur(6px); z-index: 10; padding: 16px; }
.start[hidden] { display: none; }
.start-card { max-width: 380px; text-align: center; }
.start-card h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: .3px; }
.start-card p { color: var(--muted); margin: 0 0 18px; }
.start-card strong { color: var(--text); }
.start-btn {
  border: 0; border-radius: 999px; padding: 14px 30px; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #00131f;
  box-shadow: 0 0 30px #00caff55;
}
.small { font-size: 12px; }

/* ---------- hidden debug drawer ---------- */
.debug {
  position: fixed; right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px)); max-height: 60vh;
  background: #0d1420f2; border: 1px solid #22314a; border-radius: 14px; z-index: 5;
  display: flex; flex-direction: column; font-size: 12px; box-shadow: 0 20px 50px #000a;
}
.debug[hidden] { display: none; }
.debug header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #22314a; flex-wrap: wrap; }
.debug header strong { margin-right: auto; }
.debug select, .debug button, .debug input { background: #111a28; border: 1px solid #22314a; border-radius: 8px; padding: 4px 8px; }
.debug button { cursor: pointer; }
.debug form { padding: 8px 10px; border-bottom: 1px solid #22314a; }
.debug input { width: 100%; }
.debug ol { list-style: none; margin: 0; padding: 8px 10px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 8px; }
.debug li { border-left: 2px solid #22314a; padding-left: 8px; }
.debug .you { color: #9fd8ff; }
.debug .alts { color: var(--muted); }
.debug .tools { color: #c8a2ff; font-family: ui-monospace, Consolas, monospace; }
.debug .meta { color: var(--muted); }
.debug li.note { color: var(--muted); font-style: italic; }

/* ---------- always-visible debug screen (debugscreen.js; ?debug=0 hides it) ---------- */
#debugscreen {
  position: fixed; z-index: 5; right: 0; top: 0; bottom: 0; width: min(420px, 42vw);
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: #070c14f0; border-left: 1px solid #ffffff1a;
  font: 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text);
}
body.with-debugscreen .room { margin-right: min(420px, 42vw); width: auto; }
.ds-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-status { color: var(--muted); }
.ds-status.bad { color: var(--warn); }
.ds-meter { flex: 0 0 90px; height: 8px; border-radius: 4px; background: #ffffff14; overflow: hidden; }
.ds-meter > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ecc71, #f1c40f 75%, #e74c3c); transition: width 90ms linear; }
.ds-mode { flex-basis: 100%; color: var(--accent); }
.ds-hearing-label { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ds-hearing { min-height: 2.6em; padding: 8px 10px; border-radius: 8px; background: #ffffff0d; font-size: 20px; line-height: 1.3; color: #ffffffaa; font-family: var(--font); }
.ds-hearing.live { color: #fff; box-shadow: 0 0 0 1px var(--accent) inset; }
.ds-hearing[data-note]:not([data-note=""])::after { content: "  (" attr(data-note) ")"; font-size: 13px; color: var(--warn); }
.ds-list { list-style: none; margin: 6px 0 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ds-list li { padding: 4px 6px; border-radius: 6px; background: #ffffff08; word-break: break-word; }
.ds-time { color: #ffffff55; font-size: 11px; }
.ds-detail { color: var(--muted); }
.ds-heard .ds-text { color: #fff; }
.ds-sent .ds-text { color: #7ee2a8; }
.ds-ignored .ds-text, .ds-dropped .ds-text { color: #ffb86b; }
.ds-reply .ds-text { color: #8fd3ff; }
.ds-error .ds-text { color: #ff7b7b; }
.ds-interrupt .ds-text { color: #e0a8ff; }
@media (max-width: 760px) {
  #debugscreen { top: auto; left: 0; width: auto; height: 46vh; border-left: 0; border-top: 1px solid #ffffff1a; }
  body.with-debugscreen .room { margin-right: 0; height: 54%; }
  .ds-hearing { font-size: 17px; }
}