:root{--bg:#0f1115;--panel:#171a21;--line:#262b36;--txt:#e8eaed;--mut:#9aa3b2;--acc:#c8860a;--acch:#f5c842;--ok:#3fb950;--err:#f85149}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.center{min-height:100dvh;display:grid;place-items:center;padding:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px;width:min(360px,92vw);text-align:center}
.card h1{margin:0 0 4px;font-size:1.6rem}.sub{color:var(--mut);margin:0 0 20px;font-size:.9rem}
input,textarea{width:100%;background:#0d0f14;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:12px 14px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.card input{text-align:center;letter-spacing:.4em;font-size:1.3rem;margin-bottom:14px}
button{background:var(--acc);color:#1a1205;border:0;border-radius:10px;padding:12px 16px;font:600 1rem/1 inherit;cursor:pointer}
button:hover{background:var(--acch)}.ghost{background:transparent;color:var(--mut);border:1px solid var(--line)}.ghost:hover{background:var(--line);color:var(--txt)}
.err{color:var(--err);min-height:1.2em;margin:.6em 0 0;font-size:.9rem}
.app{display:flex;flex-direction:column;height:100dvh}
.bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.bar strong{font-size:1.1rem}.bar form{margin:0 0 0 auto}
.pill{font-size:.72rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.pill.code{color:var(--acch);border-color:var(--acc)}
.messages{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.welcome{margin:auto;max-width:660px;width:100%;display:flex;flex-direction:column;gap:26px;align-items:center;padding:24px 8px;animation:fade .5s ease}
.hero{text-align:center}
.hero .mark{font-size:2rem;color:var(--acch);line-height:1}
.hero h1{margin:.15em 0 0;font-size:2rem;letter-spacing:.02em}
.hero .lead{color:var(--mut);margin:.5em auto 0;font-size:1.02rem;line-height:1.55;max-width:34em}
.capline{color:var(--acc);font-size:.82rem;margin:.9em 0 0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.capline span{border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:10px 15px;font:inherit;font-size:.92rem;cursor:pointer;transition:border-color .15s,transform .1s,background .15s}
.chip:hover{border-color:var(--acc);background:#1d2530;transform:translateY(-1px)}
.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg{max-width:min(760px,94%);padding:12px 14px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:#1d2530;border:1px solid var(--line)}
.msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.msg.bot pre{background:#0d0f14;border:1px solid var(--line);border-radius:10px;padding:12px;overflow-x:auto}
.trace{align-self:flex-start;color:var(--mut);font-size:.82rem;font-family:ui-monospace,monospace}
.trace.ok{color:var(--ok)}
.trace.think{color:var(--acch);animation:pulse 1.2s infinite}
.msg.bot.pending::after{content:'●●●';letter-spacing:2px;color:var(--mut);animation:pulse 1.1s infinite}
.msg.bot.pending{color:var(--mut)}
.composer{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--panel)}
.composer textarea{flex:1;resize:none;max-height:160px}
.composer button{padding:0 18px;font-size:1.2rem}
.iconbtn{padding:6px 10px;font-size:1.1rem;line-height:1}
.iconbtn[aria-pressed="true"]{background:var(--acc);color:#1a1205}
.iconbtn.rec{background:#d1242f;color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.approval{align-self:stretch;background:#1a1508;border:1px solid var(--acc);border-radius:12px;padding:14px 16px;margin:4px 0}
.approval pre{background:#0d0f14;border:1px solid var(--line);border-radius:8px;padding:10px;overflow-x:auto;margin:8px 0;font-size:.85rem}
.approval pre.diff{max-height:300px;overflow:auto;white-space:pre}
.approval details{margin:8px 0}.approval summary{cursor:pointer;color:var(--acch);font-size:.9rem}
.approval.ok{border-color:#2ea043}.approval.no{border-color:#d1242f;opacity:.7}
.approw{display:flex;gap:8px}.approw button{flex:1;padding:8px}
@media(max-width:520px){.messages{padding:14px 10px}.msg{max-width:96%}}