:root { --bg:#0e0f12; --panel:#16181d; --line:#262a32; --text:#e6e8ec; --dim:#8b919c; --me:#2b5fd9; --bot:#1f7a4d; --tweet:#1d9bf0; }
  * { box-sizing: border-box; }
  html, body { height:100%; margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui, sans-serif; }
  button, input, textarea { font:inherit; color:inherit; }
  input, textarea { background:#0e0f12; border:1px solid var(--line); border-radius:6px; padding:8px 10px; width:100%; }
  textarea { resize:none; }
  button { background:var(--me); border:0; border-radius:6px; padding:8px 14px; cursor:pointer; }
  button.ghost { background:transparent; border:1px solid var(--line); color:var(--dim); }
  #login { height:100%; display:flex; align-items:center; justify-content:center; }
  #login form { display:flex; gap:8px; width:min(320px, 90vw); }
  #app { height:100%; display:none; flex-direction:column; }
  header { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); }
  header .title { font-weight:600; margin-right:auto; }
  .tabs { display:none; }
  main { flex:1; display:grid; grid-template-columns: 1fr 360px; min-height:0; }
  section { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
  section:last-child { border-right:0; }
  section h2 { margin:0; padding:8px 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line); }
  .list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
  .msg { max-width:85%; background:var(--panel); border-left:3px solid var(--dim); border-radius:6px; padding:6px 10px; }
  .msg.human { border-color:var(--me); }
  .msg.bot { border-color:var(--bot); }
  .msg .who { font-size:12px; color:var(--dim); }
  .msg .who b { color:var(--text); }
  .msg .body { white-space:pre-wrap; overflow-wrap:anywhere; }
  .msg a { color:var(--tweet); }
  #tweets .msg { max-width:100%; border-color:var(--tweet); }
  form.compose { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); align-items:flex-end; }
  form.compose.col { flex-direction:column; align-items:stretch; }
  .err { color:#ff6b6b; font-size:13px; }
  @media (max-width: 760px) {
    main { grid-template-columns: 1fr; }
    section { border-right:0; }
    section.hidden { display:none; }
    .tabs { display:flex; border-bottom:1px solid var(--line); }
    .tabs button { flex:1; background:transparent; border-radius:0; color:var(--dim); border-bottom:2px solid transparent; }
    .tabs button.on { color:var(--text); border-bottom-color:var(--me); }
  }
  #who { color:var(--dim); }