/* Pi · black, bone and a red that only shows up when it's speaking */
:root { --bg: #000; --ink: #f2e6cf; --dim: #a8987e; --mute: #6b5f4e; --line: rgba(242,230,207,.12); --hot: #d94030; --gold: #c8a96e; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; }
button, input { font: inherit; color: inherit; }
.top { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 8px; }
.logo { font: 400 26px/1 Georgia, serif; letter-spacing: .2em; } .logo span { color: var(--hot); }
.tier { font: 600 11px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 5px 9px; border-radius: 999px; }
.tier.t1 { color: #ffb4a0; border-color: rgba(217,64,48,.5); } .tier.t2 { color: var(--gold); } .tier.t3 { color: var(--mute); }
.grow { flex: 1; } .ic { border: 1px solid var(--line); background: transparent; border-radius: 12px; width: 40px; height: 40px; cursor: pointer; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; width: min(720px, 100%); margin: 0 auto; padding: 0 16px; }
.stage { position: relative; width: min(56vh, 74vw, 320px); aspect-ratio: 1; margin: 6px 0 4px; cursor: pointer; flex: none; }
.stage canvas { width: 100%; height: 100%; }
.stage .state { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font: 500 12px/1.3 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.stage.listen .state { color: #ffb4a0; } .stage.think .state { color: var(--gold); }
.log { flex: 1; min-height: 80px; width: 100%; overflow-y: auto; padding: 14px 2px; display: flex; flex-direction: column; gap: 10px; mask-image: linear-gradient(transparent, #000 24px); -webkit-mask-image: linear-gradient(transparent, #000 24px); }
.m { max-width: 86%; } .m.me { align-self: flex-end; text-align: right; color: var(--dim); } .m.pi { align-self: flex-start; font-size: 18px; line-height: 1.5; }
.m.sys { align-self: center; color: var(--mute); font: 500 12px/1.4 ui-monospace, monospace; text-align: center; }
.m img { max-width: 160px; border-radius: 10px; display: block; margin-top: 6px; }
.gate { width: 100%; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(217,64,48,.45); background: rgba(217,64,48,.08); margin-bottom: 8px; }
.gate[hidden] { display: none; } .gate span { flex: 1; } .gate button { border: 1px solid var(--line); background: #111; border-radius: 10px; padding: 7px 14px; cursor: pointer; } .gate .yes { background: var(--hot); border-color: transparent; color: #fff; }
.say { width: 100%; display: flex; gap: 8px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.say input { flex: 1; min-width: 0; height: 48px; border-radius: 24px; border: 1px solid var(--line); background: #0b0b0b; padding: 0 18px; outline: none; } .say input:focus { border-color: var(--gold); }
.mic, .send { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #111; cursor: pointer; font-size: 18px; flex: none; }
.mic.on { background: var(--hot); border-color: transparent; box-shadow: 0 0 24px rgba(217,64,48,.6); }
.tools { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); font: 500 11.5px/1 ui-monospace, monospace; color: var(--mute); }
.tools span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; } .tools span.used { color: var(--gold); border-color: rgba(200,169,110,.5); }