:root { font-family: ui-sans-serif, system-ui; }
body { margin:0; background:#0b0f17; color:#e6edf3; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #1f2a3a; background:#0b0f17; position:sticky; top:0; }
.brand { font-weight:700; letter-spacing:.3px; }
.right { display:flex; gap:12px; align-items:center; }
.link { color:#9cc2ff; text-decoration:none; }
.pill { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #22324a; }
.pill.dm { background:#101a2b; border-color:#2c4a7a; }
.layout { display:grid; grid-template-columns: 360px 1fr; gap:14px; padding:14px; }
.sidebar { display:flex; flex-direction:column; gap:12px; }
.chat { display:flex; flex-direction:column; gap:10px; min-height: calc(100vh - 70px); }
.card { border:1px solid #1f2a3a; border-radius:14px; padding:12px; background:#0e1420; }
.cardTitle { font-weight:700; margin-bottom:8px; }
.row { display:grid; grid-template-columns: 48px 1fr 70px; gap:8px; align-items:center; }
input { width:100%; padding:10px 12px; border-radius:12px; border:1px solid #22324a; background:#0b0f17; color:#e6edf3; outline:none; }
button { padding:10px 12px; border-radius:12px; border:1px solid #2b3c58; background:#121b2b; color:#e6edf3; cursor:pointer; }
button:hover { background:#16223a; }
button.ghost { background:transparent; }
.hint { font-size:12px; color:#9fb2c7; margin-top:8px; line-height:1.4; }
.list { display:flex; flex-direction:column; gap:6px; max-height: 36vh; overflow:auto; }
.user { padding:8px 10px; border-radius:12px; border:1px solid #1f2a3a; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.user:hover { background:#101a2b; }
.stream { border:1px solid #1f2a3a; border-radius:14px; padding:12px; background:#0e1420; overflow:auto; flex:1; }
.msg { margin:10px 0; }
.meta { font-size:12px; color:#9fb2c7; margin-bottom:4px; }
.bubble { padding:10px 12px; border-radius:14px; border:1px solid #22324a; background:#0b0f17; white-space:pre-wrap; word-break:break-word; }
.sys .bubble { background:#0f1b2e; border-color:#2c4a7a; color:#cfe3ff; }
.dmTag { font-size:11px; margin-left:6px; padding:2px 6px; border-radius:999px; border:1px solid #2c4a7a; color:#cfe3ff;}
.img { max-width: 360px; width:100%; border-radius:12px; border:1px solid #22324a; display:block; }
.composer { display:flex; gap:10px; }
.typing { font-size:12px; color:#9fb2c7; min-height:16px; }
@media (max-width: 980px) {
  .layout { grid-template-columns:1fr; }
}