:root { --bg:#0f1115; --panel:#171a21; --line:#2a2f3a; --fg:#e6e8ee; --muted:#8b93a7; --accent:#6ea8fe; --danger:#ff6b6b; --ok:#57d39b; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .small { font-size:12px; } .error { color:var(--danger); min-height:1em; }
.spacer { flex:1; }
button, .button, input, select, textarea { font:inherit; color:inherit; }
button, .button { background:#242938; border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .button:hover { border-color:var(--accent); }
button.danger { color:var(--danger); } button.link { background:none; border:none; color:var(--muted); padding:0; }
button.small, .button.small { padding:3px 8px; font-size:12px; }
input, select, textarea { background:#0c0e12; border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
label { display:flex; flex-direction:column; gap:4px; }
.controls label { flex-direction:row; align-items:center; gap:6px; }
code { background:#0c0e12; padding:1px 4px; border-radius:4px; }

.screen { height:100%; }
#login { display:flex; align-items:center; justify-content:center; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px; width:320px; display:flex; flex-direction:column; gap:12px; }
.card h1 { margin:0 0 8px; font-size:20px; }

#app { display:grid; grid-template-columns:240px 1fr; }
#sidebar { background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.side-head, .side-foot { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--line); }
.side-foot { border-top:1px solid var(--line); border-bottom:none; margin-top:auto; }
#ws-list { list-style:none; margin:0; padding:6px; overflow:auto; }
#ws-list li { padding:8px 10px; border-radius:6px; cursor:pointer; }
#ws-list li:hover { background:#20242e; } #ws-list li.active { background:#243049; }
#ws-list li .muted { display:block; font-size:11px; }

#main { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
#empty-state { margin:auto; color:var(--muted); }
#workspace { display:flex; flex-direction:column; height:100%; }
#ws-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
#ws-head h2 { margin:0; font-size:18px; }
.controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

#panes { display:grid; grid-template-columns:1fr 340px; flex:1; min-height:0; }
#chat-pane { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
#chat { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:100%; }
.msg.user { align-self:flex-end; background:#243049; padding:8px 12px; border-radius:10px; white-space:pre-wrap; max-width:80%; }
.msg.assistant { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
.msg.assistant .body :is(p,ul,ol,pre) { margin:6px 0; }
.msg.assistant pre { background:#0c0e12; padding:8px; border-radius:6px; overflow:auto; }
.msg .meta { color:var(--muted); font-size:11px; margin-top:6px; }
.tools { font-size:12px; color:var(--muted); margin-bottom:6px; }
.tools summary { cursor:pointer; }
.tools li { font-family:ui-monospace,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tools li.ok::before { content:"✓ "; color:var(--ok); } .tools li.fail::before { content:"✗ "; color:var(--danger); }
.status { color:var(--muted); font-size:12px; font-style:italic; }
.changed { font-size:12px; color:var(--ok); }
.msg.error { color:var(--danger); }
#prompt-form { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
#prompt { flex:1; resize:vertical; }

#files-pane { display:flex; flex-direction:column; min-height:0; }
.pane-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.drop { margin:10px 12px; padding:14px; border:1px dashed var(--line); border-radius:8px; text-align:center; color:var(--muted); font-size:12px; }
.drop.over { border-color:var(--accent); color:var(--fg); }
#file-list { list-style:none; margin:0; padding:0 8px 12px; overflow:auto; font-size:13px; }
#file-list li { padding:3px 6px; border-radius:4px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#file-list li:hover { background:#20242e; }
#file-list li.dir { color:var(--muted); cursor:default; }
#file-list li.changed { color:var(--ok); }
#file-list li .size { color:var(--muted); font-size:11px; margin-left:6px; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:10px; width:min(1000px,100%); height:min(85vh,100%); display:flex; flex-direction:column; gap:10px; padding:16px; }
.modal-box.narrow { width:420px; height:auto; }
.modal-head { display:flex; align-items:center; gap:8px; }
#viewer-body { flex:1; overflow:auto; background:#0c0e12; border-radius:6px; padding:12px; }
#viewer-body pre { white-space:pre-wrap; margin:0; }
#viewer-body img { max-width:100%; }
#viewer-editor { flex:1; resize:none; font-family:ui-monospace,monospace; }
.row { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:900px) { #app { grid-template-columns:1fr; } #sidebar { display:none; } #panes { grid-template-columns:1fr; } #files-pane { display:none; } }

.chat-bar { gap:6px; flex-wrap:wrap; }
.chat-bar select { max-width:280px; }
label.inline { flex-direction:row; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
#repo-list { list-style:none; margin:0; padding:0 8px 12px; overflow:auto; font-size:13px; }
#repo-list li { padding:6px; border:1px solid var(--line); border-radius:6px; margin:6px 4px; }
#repo-list li .muted { display:block; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#repo-list li .row { justify-content:flex-start; margin-top:4px; }
.modal-box.wide { width:640px; }
#key-list { list-style:none; margin:0; padding:0; max-height:40vh; overflow:auto; }
#key-list li { border:1px solid var(--line); border-radius:6px; padding:8px; margin-bottom:6px; }
#key-list code { display:block; word-break:break-all; white-space:pre-wrap; font-size:11px; margin:4px 0; user-select:all; }
#files-pane { overflow:auto; }
#file-list { max-height:45vh; flex:none; }

.tabs { display:flex; gap:2px; padding:0 16px; border-bottom:1px solid var(--line); }
.tab { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; color:var(--muted); }
.tab.active { color:var(--fg); border-bottom-color:var(--accent); }
#live-pane { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
#live-status { padding:4px 16px; }
#live-cols { display:grid; grid-template-columns:1fr 1fr; flex:1; min-height:0; }
#live-transcript-col, #live-answers-col { display:flex; flex-direction:column; min-height:0; }
#live-transcript-col { border-right:1px solid var(--line); }
#live-transcript { flex:1; overflow:auto; padding:10px 14px; font-size:13px; }
#live-transcript .line { margin:3px 0; } #live-transcript .line .ts { color:var(--muted); font-size:11px; margin-right:6px; }
#live-transcript .partial { font-style:italic; } #live-transcript .partial .stable { color:var(--fg); } #live-transcript .partial .tail { color:var(--muted); }
#live-typed { display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--line); } #live-typed input { flex:1; }
.answer-block { display:flex; flex-direction:column; flex:1; min-height:0; }
.answer { flex:1; overflow:auto; padding:12px 16px; font-size:17px; line-height:1.5; white-space:pre-wrap; }
.answer.not-addressed { color:var(--muted); font-size:14px; }
.answer.stale { opacity:.5; }
.stt-error { color:var(--danger); background:#2a1518; padding:6px 8px; border-radius:6px; }
#live-question { display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--line); } #live-question input { flex:1; }