:root { --bg:#f7f6f3; --fg:#1d1d1b; --muted:#6b6a65; --line:#dedbd3; --accent:#2f5d50; --card:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#181a19; --fg:#ecebe6; --muted:#9a998f; --line:#33362f; --accent:#7fb8a6; --card:#222523; }
}
* { box-sizing: border-box; }
body { margin:0; display:flex; height:100vh; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, sans-serif; }
aside { width:280px; padding:16px; border-right:1px solid var(--line); overflow-y:auto; flex-shrink:0; }
h1 { margin:0 0 12px; font-size:18px; }
.upload { display:block; padding:8px; text-align:center; border:1px dashed var(--accent); color:var(--accent); border-radius:6px; cursor:pointer; }
#status { color:var(--muted); font-size:13px; min-height:1.5em; }
#docs { list-style:none; margin:0; padding:0; }
#docs li { display:flex; gap:6px; align-items:center; padding:6px 8px; border-radius:6px; cursor:pointer; }
#docs li.sel { background:var(--card); outline:1px solid var(--accent); }
#docs span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#docs small { color:var(--muted); }
#docs button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:16px; }
main { flex:1; display:flex; flex-direction:column; min-width:0; }
#log { flex:1; overflow-y:auto; padding:20px; }
.hint { color:var(--muted); }
.msg { max-width:720px; margin:0 0 16px; white-space:pre-wrap; }
.msg.user { font-weight:600; }
.msg.err { color:#b3261e; }
.cite { border:1px solid var(--accent); background:none; color:var(--accent); border-radius:10px; padding:0 6px; font-size:12px; cursor:pointer; }
.cite:hover, .cite.open { background:var(--accent); color:var(--bg); }
.snippet { margin:6px 0; padding:8px 10px; background:var(--card); border-left:3px solid var(--accent); font-size:13px; color:var(--muted); white-space:pre-wrap; }
form { display:flex; gap:8px; padding:12px 20px; border-top:1px solid var(--line); }
form input { flex:1; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); font:inherit; }
form button { padding:0 18px; border:0; border-radius:6px; background:var(--accent); color:var(--bg); font:inherit; cursor:pointer; }
form button:disabled, form input:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:700px) { body { flex-direction:column; } aside { width:100%; max-height:35vh; border-right:0; border-bottom:1px solid var(--line); } }