:root {
  color-scheme: dark;
  --bg:#0d0f14; --bg-elev:#141821; --surface:#171c26; --surface-2:#1e2430;
  --line:#242b38; --ink:#e6ebf2; --ink-2:#a8b2c1; --ink-3:#8492a6;
  --accent:#4c8dff; --accent-fill:#2f6fed; --danger:#e56a58;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --fs-22:22px; --fs-15:15px; --fs-13:13px; --fs-12:12px; --fs-11:11px;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:var(--fs-13)/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
header { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); background:var(--bg-elev); border-bottom:1px solid var(--line); }
h1 { font-size:var(--fs-22); margin:0; } h2 { font-size:var(--fs-15); margin:0; }
p { color:var(--ink-2); } header span { color:var(--ink-2); flex:1; }
button,input,textarea { font:inherit; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); min-height:44px; padding:var(--sp-2) var(--sp-3); background:var(--surface-2); }
textarea { display:block; width:100%; min-height:96px; resize:vertical; margin:var(--sp-3) 0; }
.tools { margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.tools button { margin:var(--sp-1) var(--sp-1) var(--sp-1) 0; }
#draft { background:var(--surface); padding:var(--sp-4); border-radius:var(--r-md); margin-top:var(--sp-3); }
#draft-body { font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.source-discovery { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
.source-discovery form { display:grid; gap:8px; margin:12px 0; }
.source-discovery input,.source-discovery select,#chat-filter { width:100%; min-width:0; }
select { font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); min-height:44px; padding:8px; }
.source-card { padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; margin:8px 0; overflow-wrap:anywhere; }
.source-card p { margin:4px 0 8px; }
.source-card button { width:100%; }
#source-search-status { overflow-wrap:anywhere; }
#chats-more { width:100%; margin-top:10px; }
#conversation { display:flex; flex-direction:column; }
#collector { order:1; margin-top:0; margin-bottom:20px; }
#messages { order:2; }
#posting { order:3; }
#outbox { display:grid; gap:var(--sp-2); }
#outbox p { margin:var(--sp-1) 0; overflow-wrap:anywhere; }
button { cursor:pointer; } button:disabled { cursor:wait; opacity:.6; }
button:hover { border-color:var(--accent); } button:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#notice { padding:var(--sp-3) var(--sp-5); color:var(--ink-2); overflow-wrap:anywhere; }
#notice.error { color:var(--danger); }
#login { max-width:560px; margin:var(--sp-5) auto; padding:var(--sp-5); background:var(--surface); border-radius:var(--r-lg); }
#qr { display:block; width:280px; max-width:100%; height:auto; background:white; margin:var(--sp-4) 0; border-radius:var(--r-sm); }
#password-form { display:grid; gap:var(--sp-3); }
main { display:grid; grid-template-columns:320px minmax(0,1fr); min-height:calc(100dvh - 140px); }
aside { border-right:1px solid var(--line); padding:var(--sp-4); min-width:0; }
.bar { display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; }
#chats { display:grid; gap:var(--sp-2); } .chat { text-align:left; width:100%; overflow-wrap:anywhere; background:var(--surface); }
.chat small { display:block; color:var(--ink-2); } .chat[aria-current="true"] { border-color:var(--accent); }
#conversation { min-width:0; padding:var(--sp-5); } #back { display:none; }
#messages { display:flex; flex-direction:column; gap:var(--sp-3); }
.message { white-space:pre-wrap; overflow-wrap:anywhere; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); background:var(--surface); max-width:90%; align-self:flex-start; }
.message.out { align-self:flex-end; background:var(--surface-2); border:1px solid var(--line); }
.message time { display:block; font-size:var(--fs-11); color:var(--ink-3); white-space:normal; margin-top:var(--sp-2); }
@media(max-width:650px) {
  header { padding:var(--sp-3); gap:var(--sp-3); }
  header span { font-size:var(--fs-12); }
  main { grid-template-columns:minmax(0,1fr); }
  #conversation { display:none; padding:var(--sp-4); }
  main.open-chat aside { display:none; } main.open-chat #conversation { display:block; }
  #back { display:block; } #login { margin:var(--sp-3); padding:var(--sp-4); }
  #notice { padding:var(--sp-3); }
}