:root{--bg: #0a0a0a;--bg-input: #111111;--bg-surface: #141414;--text: #d4d4d4;--text-dim: #666666;--accent: #00d4ff;--accent-dim: rgba(0, 212, 255, .15);--border: #222222;--error: #ff4444;--success: #00ff41;--warning: #ffaa00;--own-msg: rgba(0, 212, 255, .06);font-family:JetBrains Mono,Fira Code,Cascadia Code,Consolas,Courier New,monospace;font-size:15px;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text);background-color:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;min-height:100dvh}body{display:flex;flex-direction:column}#root{display:flex;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh}input,textarea,button{font-family:inherit;font-size:inherit;color:inherit}::selection{background:var(--accent-dim);color:var(--accent)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.app{display:flex;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;overflow:hidden}.connect-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:16px}.connect-card{width:100%;max-width:420px;border:1px solid var(--border);padding:32px 24px}.connect-title{font-size:1.5rem;font-weight:700;margin:0 0 4px;color:var(--accent)}.title-prefix{color:var(--text-dim)}.connect-subtitle{color:var(--text-dim);font-size:.8rem;margin:0 0 28px}.connect-form{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:4px}.field-label{font-size:.75rem;color:var(--accent);letter-spacing:.05em}.field input{background:var(--bg-input);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.9rem;padding:10px 12px;outline:none;transition:border-color .2s}.field input:focus{border-color:var(--accent)}.field input::placeholder{color:var(--text-dim);opacity:.5}.field input:disabled{opacity:.5}.connect-error{color:var(--error);font-size:.8rem;margin:0}.connect-btn{background:transparent;border:1px solid var(--accent);color:var(--accent);font-family:inherit;font-size:.9rem;padding:10px;cursor:pointer;transition:background .2s,color .2s;margin-top:4px}.connect-btn:hover:not(:disabled){background:var(--accent);color:var(--bg)}.connect-btn:disabled{opacity:.5;cursor:not-allowed}.connect-footer{color:var(--text-dim);font-size:.7rem;text-align:center;margin:24px 0 0;opacity:.6}@media(max-width:480px){.connect-card{padding:24px 16px}.connect-title{font-size:1.3rem}}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;gap:12px}.status-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot--connected{background:var(--success);box-shadow:0 0 4px var(--success)}.status-dot--disconnected{background:var(--error);box-shadow:0 0 4px var(--error)}.status-dot--reconnecting{background:var(--warning);box-shadow:0 0 4px var(--warning);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.status-url{color:var(--text-dim);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-room{color:var(--text-dim);font-size:.7rem;opacity:.6;white-space:nowrap}.status-disconnect{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:4px 10px;cursor:pointer;font-size:.75rem;white-space:nowrap;transition:color .2s,border-color .2s;flex-shrink:0}.status-disconnect:hover{color:var(--error);border-color:var(--error)}.chatroom{display:flex;flex-direction:column;flex:1;min-height:0;height:100vh;height:100dvh}.chatroom-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:2px}.chatroom-empty{color:var(--text-dim);font-style:italic;text-align:center;margin-top:40px;font-size:.85rem}.msg{padding:2px 0;word-wrap:break-word;overflow-wrap:break-word;line-height:1.5}.msg--own{background:var(--own-msg);margin:0 -16px;padding:2px 16px}.msg--system{color:var(--text-dim);font-style:italic;font-size:.8rem}.msg-time{color:var(--text-dim);font-size:.8rem}.msg-sender{color:var(--accent);font-weight:600}.msg-text{color:var(--text)}.msg--system .msg-text{color:var(--text-dim)}.chatroom-input-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}.input-prompt{color:var(--accent);font-weight:600;white-space:nowrap;font-size:.9rem}.chatroom-input{flex:1;background:var(--bg-input);border:1px solid var(--border);color:var(--text);padding:8px 12px;font-size:.9rem;outline:none;transition:border-color .2s;min-width:0}.chatroom-input:focus{border-color:var(--accent)}.chatroom-input::placeholder{color:var(--text-dim);opacity:.5}.chatroom-input:disabled{opacity:.5}.chatroom-send{background:transparent;border:1px solid var(--border);color:var(--accent);padding:8px 12px;cursor:pointer;font-size:.85rem;white-space:nowrap;transition:background .2s,border-color .2s;flex-shrink:0}.chatroom-send:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent)}.chatroom-send:disabled{opacity:.3;cursor:not-allowed}@media(max-width:640px){.status-bar{padding:6px 12px}.status-room{display:none}.chatroom-messages{padding:8px 12px}.msg--own{margin:0 -12px;padding:2px 12px}.chatroom-input-bar{padding:10px 12px}.input-prompt{font-size:.8rem}.chatroom-input{padding:8px 10px;font-size:.85rem}.chatroom-send{padding:8px 10px;font-size:.8rem}}