*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f172a;--panel: #1e293b;--panel-2: #273449;--border: #334155;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--accent-2: #0ea5e9;--me: #0ea5e9;--other: #334155}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.card{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 20px 50px #0006}.card h1{font-size:22px;margin-bottom:4px}.card .subtitle{color:var(--muted);font-size:14px;margin-bottom:20px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.field input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:15px;outline:none;transition:border-color .15s}.field input:focus{border-color:var(--accent)}.btn{width:100%;padding:12px;border:none;border-radius:10px;background:var(--accent-2);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}.btn:hover{background:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:18px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.chat{width:100%;max-width:640px;height:80vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 50px #0006}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--panel-2)}.chat-header .room-name{font-weight:600;font-size:16px}.chat-header .room-name span{color:var(--accent)}.chat-header button{background:transparent;border:1px solid var(--border);color:var(--muted);padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px}.chat-header button:hover{color:var(--text);border-color:var(--muted)}.conn{font-size:12px;font-weight:600}.conn.on{color:#4caf50}.conn.off{color:#ff9800}.card .conn{margin-bottom:16px}.chat-header-right{display:flex;align-items:center;gap:12px}.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}.msg{max-width:75%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.4;word-wrap:break-word}.msg .meta{font-size:11px;color:var(--muted);margin-bottom:2px}.msg.me{align-self:flex-end;background:var(--me);color:#fff;border-bottom-right-radius:4px}.msg.me .meta{color:#ffffffb3}.msg.other{align-self:flex-start;background:var(--other);border-bottom-left-radius:4px}.msg.system{align-self:center;background:transparent;color:var(--muted);font-size:12px;font-style:italic}.input-row{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border);background:var(--panel-2)}.input-row input{flex:1;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:15px;outline:none}.input-row input:focus{border-color:var(--accent)}.input-row button{padding:0 20px;border:none;border-radius:10px;background:var(--accent-2);color:#fff;font-weight:600;cursor:pointer}.input-row button:hover{background:var(--accent)}.room-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.room-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--text);font-size:14px;cursor:pointer;text-align:left}.room-item:hover{border-color:var(--accent);background:var(--panel)}.room-item-name{font-weight:600}.room-item-meta{color:var(--muted);font-size:12px;white-space:nowrap}