:root{--bg:#080b0d;--panel:#11171a;--line:#2a3a3e;--text:#d5e7df;--muted:#779189;--green:#8af0bf;--amber:#f0c36c;--red:#ff7676}
*{box-sizing:border-box;min-width:0}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(circle at 20% 0,#172226,#060809 55%);color:var(--text);font-family:Consolas,"Courier New",monospace}
button,input,textarea,select{font:inherit}
button{background:#172126;color:var(--green);border:1px solid #36524b;padding:.55rem .72rem;cursor:pointer}
button:hover{background:#22332f}
#app{display:grid;grid-template-rows:clamp(58px,9vh,76px) minmax(0,1fr)}
header{min-height:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#0b1012;overflow:hidden}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.sigil{width:44px;height:44px;flex:0 0 44px;border:2px solid var(--green);display:grid;place-items:center;font-weight:bold;box-shadow:0 0 18px #8af0bf33}
.brand h1{margin:0;font-size:clamp(16px,1.5vw,20px);letter-spacing:2px;white-space:nowrap}
.brand p{margin:3px 0 0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{display:flex;align-items:center;gap:9px;font-size:12px;white-space:nowrap}
.light{width:9px;height:9px;border-radius:50%;background:#596267;flex:0 0 auto}.light.ok{background:var(--green);box-shadow:0 0 10px var(--green)}.light.bad{background:var(--red)}
main{min-height:0;height:100%;display:grid;grid-template-columns:clamp(205px,16vw,250px) minmax(360px,1fr) clamp(285px,22vw,340px);overflow:hidden}
aside,.terminal{min-height:0;min-width:0;border-right:1px solid var(--line);background:#0e1416;overflow:hidden}
main>aside:first-child{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.portrait,aside section{padding:clamp(9px,1.5vh,16px);border-bottom:1px solid var(--line)}
.pixel-frame{width:100%;height:clamp(110px,24vh,216px);border:1px solid #46655c;background:repeating-linear-gradient(0deg,#101719,#101719 3px,#0b1012 3px,#0b1012 6px);display:grid;place-items:center;overflow:hidden}
.placeholder,.large-placeholder{text-align:center;color:#5f7b73;line-height:1.55}
.portrait h2{margin:clamp(7px,1.2vh,12px) 0 4px;font-size:clamp(18px,2.2vh,24px)}
.portrait p,aside section div{font-size:12px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
h3{margin:.35rem 0 .6rem;font-size:11px;color:var(--amber);letter-spacing:1px}
.quick{width:100%;margin:3px 0;text-align:left;padding:.52rem .65rem}
.terminal{display:grid;grid-template-rows:minmax(0,1fr) auto;background:#080c0d}
.messages{min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(12px,2vh,20px)}
.message{max-width:82%;margin:0 0 14px;padding:11px 13px;border-left:3px solid var(--line);white-space:pre-wrap;line-height:1.45}.message.user{margin-left:auto;border-color:var(--amber);background:#17140e}.message.assistant{border-color:var(--green);background:#0e1714}.system-line{color:var(--muted);font-size:12px;margin-bottom:14px}
#chatForm{border-top:1px solid var(--line);padding:10px 12px;background:#0d1214;overflow:hidden}
textarea{display:block;width:100%;height:clamp(54px,9vh,78px);resize:none;background:#050708;color:var(--text);border:1px solid #324246;padding:10px;outline:none}
.composer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:7px;font-size:11px;color:var(--muted)}
.composer-row label{display:flex;align-items:center;gap:7px;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer-row input{width:auto;margin:0;flex:0 0 auto}
.artifact-pane{display:grid;grid-template-rows:auto minmax(0,1.35fr) auto minmax(0,.65fr);background:#0a0e10;overflow:hidden}
.pane-head{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--amber);font-size:11px;letter-spacing:1px}
#artifact{min-height:0;padding:14px;border-bottom:1px solid var(--line);overflow:auto;overscroll-behavior:contain}
.large-placeholder{min-height:100%;border:1px dashed #30433e;display:grid;place-items:center;padding:20px}
.operations{min-height:0;padding:14px;font-size:12px;color:var(--muted);white-space:pre-wrap;overflow:auto;overscroll-behavior:contain}
dialog{width:min(680px,92vw);max-height:min(88vh,760px);overflow:auto;background:#0d1315;color:var(--text);border:1px solid #46655c;padding:20px}
dialog::backdrop{background:#000c}.dialog-head{display:flex;justify-content:space-between;align-items:center}fieldset{border:1px solid var(--line);margin:14px 0;padding:14px}legend{color:var(--amber);font-size:12px}label{display:block;font-size:12px;color:var(--muted);margin:8px 0}input,select{width:100%;background:#06090a;color:var(--text);border:1px solid #334448;padding:9px;margin-top:5px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}pre{white-space:pre-wrap;color:var(--muted)}#loginDialog{width:380px}#loginForm p{font-size:11px;color:var(--muted)}
@media(max-width:1050px){main{grid-template-columns:clamp(190px,23vw,225px) minmax(0,1fr)}.artifact-pane{display:none}}
@media(max-width:700px){#app{grid-template-rows:58px minmax(0,1fr)}header{padding:7px 10px}.sigil{width:38px;height:38px;flex-basis:38px}.brand p,.status span{display:none}main{display:block;height:100%;overflow:hidden}main>aside:first-child{display:none}.terminal{height:100%;border-right:0}.messages{padding:12px}#chatForm{padding:8px}.composer-row label{font-size:10px}}
@media(max-height:720px) and (min-width:701px){#app{grid-template-rows:58px minmax(0,1fr)}header{padding:0 12px}.sigil{width:38px;height:38px;flex-basis:38px}.portrait,aside section{padding:8px 12px}.pixel-frame{height:105px}.portrait h2{margin:6px 0 3px;font-size:18px}.portrait p,aside section div{font-size:11px;line-height:1.3}.quick{padding:.4rem .55rem}.messages{padding:12px}#chatForm{padding:8px 10px}textarea{height:54px}.pane-head{padding:8px 12px}#artifact,.operations{padding:10px}}
.brand h1 small{font-size:.48em;font-weight:400;opacity:.55;letter-spacing:.08em;margin-left:.5rem}.login-panel{min-width:min(520px,85vw);padding:1.3rem}.bridge-button{display:block;margin:1rem 0;padding:.9rem 1rem;border:1px solid var(--mint,#69f0ae);color:inherit;text-align:center;text-decoration:none;font-weight:700}.bridge-button:hover{filter:brightness(1.2)}#identityBadge{opacity:.65;font-size:.78rem;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#loginError{color:#ff7070;min-height:1.2em}
.pending-card{padding:14px;height:100%;overflow:auto;box-sizing:border-box}.pending-card h3{margin:0 0 12px;color:var(--bright,#d9f7e8);font-size:14px;letter-spacing:.08em}.pending-card pre{white-space:pre-wrap;word-break:break-word;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;color:#b7c9c1;background:#07100d;border:1px solid #29463b;padding:12px;max-height:56vh;overflow:auto}.pending-actions{display:flex;gap:8px;margin-top:12px}.pending-actions button{flex:1}.pending-actions .secondary{opacity:.78}.composer-row>span{font-size:10px;letter-spacing:.08em;opacity:.72}.status #roleBadge{opacity:.72;border-left:1px solid #29463b;padding-left:8px}

.speech-panel #voiceToggle{width:100%;font-weight:700;letter-spacing:.08em}.speech-panel #voiceToggle.off{color:var(--muted);border-color:var(--line);background:#0b1012}.speech-panel #voiceStatus{margin-top:7px;font-size:10px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}