:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background:#071312; color:#edf7f4; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#12302c 0%,#071312 45%,#030807 100%); }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1100px,calc(100% - 32px)); margin:0 auto; min-height:100vh; display:grid; place-items:center; padding:32px 0; }
.join-card { width:min(430px,100%); padding:42px; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:rgba(8,24,22,.88); box-shadow:0 30px 80px rgba(0,0,0,.35); }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:clamp(3rem,10vw,5rem); letter-spacing:-.07em; }
h2 { margin-bottom:0; }
.eyebrow { margin-bottom:8px; color:#78c7b7; font-size:.75rem; font-weight:800; letter-spacing:.18em; }
.subtitle { color:#9db5b0; }
label { display:block; margin:28px 0 8px; font-weight:700; }
input { width:100%; border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px 16px; background:#0b1d1a; color:inherit; outline:none; }
input:focus { border-color:#65b9a8; box-shadow:0 0 0 3px rgba(101,185,168,.15); }
button { border:0; border-radius:14px; padding:14px 18px; background:#65b9a8; color:#04110f; font-weight:800; }
.join-card button { width:100%; margin-top:14px; }
.error { min-height:1.3em; margin:14px 0 0; color:#ff9e9e; }
.chat-layout { width:100%; min-height:min(760px,calc(100vh - 64px)); display:grid; grid-template-columns:240px 1fr; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:rgba(5,17,15,.9); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.sidebar { padding:28px 22px; border-right:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
#users { margin:24px 0 0; padding:0; list-style:none; }
#users li { margin:4px 0; }
.user-button { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid transparent; border-radius:12px; background:transparent; color:#cfe2de; font-weight:600; text-align:left; }
.user-button:hover:not(:disabled),.user-button.active { border-color:rgba(101,185,168,.24); background:rgba(101,185,168,.1); }
.user-button:disabled { cursor:default; opacity:.7; }
.user-button.unread::after { content:""; width:8px; height:8px; margin-left:auto; border-radius:50%; background:#ffd479; box-shadow:0 0 10px rgba(255,212,121,.55); }
.online-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#6fe3a5; box-shadow:0 0 12px rgba(111,227,165,.6); }
.chat-panel { min-width:0; display:grid; grid-template-rows:auto 1fr auto; }
.chat-panel header { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px 28px; border-bottom:1px solid rgba(255,255,255,.08); }
.header-state { display:flex; align-items:center; gap:12px; }
.secondary-button { padding:9px 12px; border:1px solid rgba(255,255,255,.12); background:transparent; color:#cfe2de; font-size:.9rem; }
.secondary-button.unread::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: #ffd479;
  box-shadow: 0 0 10px rgba(255,212,121,.55);
}
#connection-state { color:#8eaaa4; font-size:.9rem; }
.messages { overflow-y:auto; padding:24px 28px; }
.message-row { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:8px 0; }
.message-row strong { color:#7bd1c0; overflow-wrap:anywhere; }
.message-row span { overflow-wrap:anywhere; line-height:1.5; }
.notice { padding:9px 0; color:#77928c; font-size:.9rem; font-style:italic; }
.message-form { display:grid; grid-template-columns:1fr auto; gap:12px; padding:20px 28px 28px; border-top:1px solid rgba(255,255,255,.08); }
.message-form button { min-width:92px; }
[hidden] { display:none !important; }
@media (max-width:720px) {
  .shell { width:100%; padding:0; }
  .join-card,.chat-layout { border-radius:0; min-height:100vh; }
  .chat-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .sidebar { border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:18px 20px; }
  #users { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  #users li { margin:0; }
  .user-button { width:auto; padding:8px 10px; }
  .chat-panel header { padding:18px 20px; }
  .header-state { align-items:flex-end; flex-direction:column; gap:8px; }
  .message-row { grid-template-columns:1fr; gap:3px; }
  .messages { padding:20px; }
  .message-form { padding:16px 20px 20px; }
}