:root {
  --bg: #f6f4f0;
  --ink: #1d1d1b;
  --muted: #8a867d;
  --me: #1d1d1b;
  --me-ink: #f6f4f0;
  --them: #ffffff;
  --line: #e4e0d8;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151515; --ink: #ecebe7; --muted: #7d7a74; --me: #ecebe7; --me-ink: #151515; --them: #222220; --line: #2c2c2a; }
}

/* The page itself never scrolls; only the message list does. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 999px; padding: .6rem 1.1rem; background: var(--me); color: var(--me-ink); }
button.secondary { background: none; border: 1px solid var(--line); color: var(--ink); }
button.quiet { background: none; color: var(--muted); padding: .3rem .5rem; }
button.quiet:hover { color: var(--ink); }
input { border: 1px solid var(--line); background: var(--them); border-radius: 12px; padding: .7rem .9rem; }

.center { position: fixed; inset: 0; height: var(--vh, 100dvh); display: grid; place-content: center; }
.panel { gap: 1.2rem; padding: 2rem; text-align: center; overflow-y: auto; }
.panel h1 { font-weight: 500; letter-spacing: .02em; margin: 0; }
.panel p { max-width: 22rem; margin: 0 auto; }
.stack { display: grid; gap: .6rem; width: min(320px, 82vw); margin: 0 auto; }
.note { color: var(--muted); font-size: .9rem; min-height: 1.3em; }
#loading img { opacity: .5; animation: breathe 1.6s ease-in-out infinite; }

.chat {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(640px, 100%); height: var(--vh, 100dvh);
  display: flex; flex-direction: column;
}
.chat header {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: max(.7rem, env(safe-area-inset-top)) .8rem .55rem; border-bottom: 1px solid var(--line);
}
.title { font-weight: 500; letter-spacing: .02em; }

#drawer { flex: none; max-height: 45%; overflow-y: auto; padding: .7rem 1rem; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
#chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
#chat-list li { padding: .55rem .7rem; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
#chat-list li:hover, #chat-list li.current { background: var(--them); }
#chat-list .when { color: var(--muted); font-size: .85rem; flex: none; }
#chat-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .45rem; }
#messages li { max-width: 78%; padding: .55rem .85rem; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
#messages li.me { align-self: flex-end; background: var(--me); color: var(--me-ink); border-bottom-right-radius: 6px; }
#messages li.them { align-self: flex-start; background: var(--them); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
/* In a group nobody has a name; each person's messages are edged in their color. */
#messages li.them.tinted { border-left: 3px solid var(--c); }
#messages li.me.tinted { border-right: 3px solid var(--c); }
.typing-bubble.tinted i { background: var(--c); }
#composer button:disabled { opacity: .4; cursor: default; }
#messages li.day, #messages li.notice { align-self: center; max-width: 90%; text-align: center; padding: .7rem 0 .2rem; color: var(--muted); font-size: .8rem; background: none; }

#messages li.typing-bubble { display: flex; gap: .3rem; align-items: center; padding: .75rem .9rem; }
.typing-bubble i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--muted); animation: dot 1.3s ease-in-out infinite; }
.typing-bubble i:nth-child(2) { animation-delay: .18s; }
.typing-bubble i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.25rem); opacity: 1; } }
@keyframes breathe { 50% { opacity: .35; } }

#composer {
  flex: none; display: flex; gap: .5rem; align-items: flex-end;
  padding: .7rem 1rem max(.8rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
}
#composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line); background: var(--them);
  border-radius: 20px; padding: .6rem .9rem; max-height: 180px; outline: none;
}
#composer textarea:focus { border-color: var(--muted); }