.back{color:var(--muted);text-decoration:none;font-size:.88rem}
  .back:hover{color:var(--accent)}
  .join{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0}
  .join input{flex:1;min-width:140px}
  .chatbox{display:none;grid-template-columns:1fr 180px;gap:1rem;margin-top:1rem}
  .chatbox.on{display:grid}
  .messages{background:#0b0f14;border:1px solid var(--line);border-radius:10px;
    height:420px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
  .msg{max-width:80%}
  .msg .who{font-size:.75rem;color:var(--muted);margin-bottom:.1rem}
  .msg .bubble{background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:.5rem .8rem;font-size:.9rem;word-break:break-word;display:inline-block}
  .msg.me{align-self:flex-end;text-align:right}
  .msg.me .bubble{background:var(--accent);color:#0d1117;border-color:var(--accent)}
  .msg.sys{align-self:center;max-width:100%}
  .msg.sys .bubble{background:transparent;border:0;color:var(--muted);font-size:.8rem;padding:.1rem}
  .side{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.9rem}
  .side h4{margin:0 0 .5rem;font-size:.85rem;color:var(--muted)}
  .side .u{font-size:.88rem;padding:.2rem 0;display:flex;align-items:center;gap:.4rem}
  .side .dot{width:7px;height:7px;border-radius:50%;background:#3fb950}
  .sendbar{display:flex;gap:.6rem;margin-top:.7rem}
  .sendbar input{flex:1}
  .status-line{font-size:.8rem;margin-top:.5rem}
  .conn-on{color:#3fb950} .conn-off{color:#f85149}
  @media(max-width:640px){.chatbox.on{grid-template-columns:1fr}.side{order:-1}}