:root {
  --bg: #0b0f14;
  --panel: #121821;
  --panel2: #0e141c;
  --line: #1e2836;
  --text: #e6edf3;
  --muted: #7d8896;
  --accent: #2f81f7;
  --in: #1b2530;
  --out: #234a86;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}
.muted { color: var(--muted); font-size: 13px; }

/* login */
.login-body { display: grid; place-items: center; }
.login-card {
  background: var(--panel); padding: 32px; border-radius: 14px;
  width: min(340px, 90vw); display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line);
}
.login-card h1 { margin: 0; font-size: 22px; }
.login-card input, .login-card button {
  padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 15px;
}
.login-card button { background: var(--accent); border: none; color: #fff; font-weight: 600; cursor: pointer; }
.err { background: #3a1616; color: #ffb4b4; padding: 8px 10px; border-radius: 8px; font-size: 13px; }

/* app */
#app { display: grid; grid-template-columns: 260px 1fr; height: 100vh; height: 100dvh; }
#sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
#sidebar header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
#sidebar .me { font-weight: 600; }
#sidebar .logout { color: var(--muted); text-decoration: none; font-size: 18px; }
#status { padding: 8px 16px; }
#users { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#users li { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
#users li:hover { background: var(--panel2); }
#users li.active { background: var(--panel2); }
#users .dot { width: 9px; height: 9px; border-radius: 50%; background: #445; flex: none; }
#users li.online .dot { background: #35c46a; }
#users li.unread { font-weight: 600; }
#users li.unread::after { content: "●"; margin-left: auto; color: var(--accent); font-size: 11px; }
.push-btn { margin: 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; }

#chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
#chat-header { flex: none; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600; display: flex; align-items: center; gap: 6px; }
#back { display: none; background: none; border: none; color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px 0 0; }
#messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 72%; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; }
.bubble.in { background: var(--in); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: var(--out); align-self: flex-end; border-bottom-right-radius: 4px; }
#composer { flex: none; display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
#composer input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 15px; }
#composer button { padding: 12px 18px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }

@media (max-width: 640px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { width: 100%; }
  #chat { display: none; }
  #app.chat-open #sidebar { display: none; }
  #app.chat-open #chat { display: flex; }
  #back { display: inline-flex; align-items: center; }
}