:root { --bg: #ffffff; --fg: #111111; --panel: #f2f2f2; --accent: #2456c8; }
[data-theme="dark"] { --bg: #16181d; --fg: #e8e8e8; --panel: #23262e; --accent: #7ea0ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font-family: system-ui, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center;
         padding: 0.5rem 1rem; background: var(--panel); }
main { display: flex; gap: 1rem; padding: 1rem; }
#threads { width: 220px; flex-shrink: 0; }
#chat { flex: 1; min-width: 0; }
#message-list { list-style: none; padding: 0; max-height: 60vh; overflow-y: auto; }
#message-list li { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--panel); }
#message-list li.is-new { border-inline-start: 4px solid var(--accent); }
#message-list li .sender { font-weight: bold; }
#message-list li.cancelled { opacity: 0.5; font-style: italic; }
form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
form input { flex: 1; padding: 0.5rem; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) {
  main { flex-direction: column; }
  #threads { width: 100%; }
}
#message-list li .meta { opacity: 0.6; font-size: 0.8em; }
#mention-picker button { margin: 0.1rem; }
#outbox-list li { padding: 0.3rem 0; }
#upload-form { margin-top: 0.5rem; }