:root { --bg:#0e1116; --panel:#171b22; --ink:#d6dde6; --muted:#8b95a3; --accent:#3ba776; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
}
header {
  padding: 14px 20px; border-bottom: 1px solid #222; background: var(--panel);
}
h1 { margin: 0; font-size: 20px; }
.tag {
  font-size: 11px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 1px 8px; vertical-align: middle;
}
.banner { color: var(--accent); font-size: 13px; margin-top: 6px; }
.who { color: var(--muted); font-size: 12px; }
main { display: flex; gap: 16px; padding: 16px 20px; }
aside { width: 240px; flex: 0 0 auto; }
section { flex: 1; min-width: 0; }
h2, h3 { margin: 6px 0; }
ul { list-style: none; padding: 0; margin: 0; }
#chats li {
  padding: 8px 10px; margin-bottom: 6px; background: var(--panel);
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
#chats li:hover { outline: 1px solid var(--accent); }
code { color: var(--accent); font-size: 12px; word-break: break-all; }
.messages { min-height: 80px; background: var(--panel); border-radius: 8px; padding: 10px; }
.msg { padding: 6px 10px; margin: 4px 0; background: #20262f; border-radius: 14px; width: fit-content; }
.search { display: flex; gap: 8px; margin: 12px 0; }
.search input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid #2a3038; background: #10141a; color: var(--ink); }
.search button { padding: 8px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #06120c; cursor: pointer; }
#chatarea { min-height: 120px; color: var(--muted); }
.chat { width: 100%; height: 220px; border: 1px solid #2a3038; border-radius: 8px; background: #fff; }
footer { padding: 12px 20px; color: var(--muted); font-size: 11px; border-top: 1px solid #222; }