*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--surface: #1a1d27;--surface2: #22263a;--border: #2e3250;--accent: #5c6ef8;--accent-h: #4a5ce0;--danger: #e05c5c;--text: #e8eaf6;--text-muted:#7880a8;--own-bg: #2a3060;--radius: 10px;--font: "Inter", system-ui, sans-serif}body{background:var(--bg);color:var(--text);font-family:var(--font);height:100dvh;overflow:hidden}.join-room{display:flex;align-items:center;justify-content:center;height:100vh;padding:1rem}.join-room__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;width:100%;max-width:420px}.join-room__card h1{font-size:1.6rem;margin-bottom:.25rem}.join-room__subtitle{color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem}.tab-switcher{display:flex;background:var(--bg);border-radius:var(--radius);padding:4px;margin-bottom:1.5rem}.tab-switcher button{flex:1;background:none;border:none;color:var(--text-muted);padding:.5rem;border-radius:7px;cursor:pointer;font-size:.9rem;transition:all .15s}.tab-switcher button.active{background:var(--surface2);color:var(--text)}form{display:flex;flex-direction:column;gap:1rem}label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--text-muted)}input,textarea{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.95rem;padding:.65rem .85rem;outline:none;transition:border-color .15s;font-family:var(--font)}input:focus,textarea:focus{border-color:var(--accent)}.error{color:var(--danger);font-size:.85rem}.btn{border:none;border-radius:var(--radius);cursor:pointer;font-size:.95rem;padding:.7rem 1.2rem;transition:background .15s;font-family:var(--font)}.btn--primary{background:var(--accent);color:#fff;width:100%}.btn--primary:hover:not(:disabled){background:var(--accent-h)}.btn--primary:disabled{opacity:.5;cursor:not-allowed}.btn--danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}.btn--danger:hover{background:var(--danger);color:#fff}.chat-window{display:flex;flex-direction:column;height:100vh}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.chat-header h2{font-size:1rem}.chat-header code{color:var(--accent);font-size:.85rem}.chat-header__user{font-size:.8rem;color:var(--text-muted)}.chat-body{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column}.chat-footer{padding:.75rem 1.5rem;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}.message-list{display:flex;flex-direction:column;gap:.5rem;flex:1}.message{max-width:70%;padding:.6rem .9rem;border-radius:var(--radius);word-break:break-word}.message--own{align-self:flex-end;background:var(--own-bg)}.message--other{align-self:flex-start;background:var(--surface2)}.message--system{align-self:center;background:none;color:var(--text-muted);font-size:.8rem;font-style:italic}.message__username{font-size:.75rem;color:var(--accent);display:block;margin-bottom:.2rem}.message__text{font-size:.95rem;line-height:1.4}.message__text--error{color:var(--danger);font-style:italic}.message__time{font-size:.7rem;color:var(--text-muted);float:right;margin-top:.3rem}.typing-indicator{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;color:var(--text-muted);font-size:.82rem;font-style:italic}.typing-dots{display:flex;gap:3px}.typing-dots span{width:6px;height:6px;background:var(--text-muted);border-radius:50%;animation:bounce 1.2s infinite}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.dialog{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:400px;display:flex;flex-direction:column;gap:.75rem}.dialog h3{font-size:1.1rem}.dialog p{color:var(--text-muted);font-size:.9rem;line-height:1.5}.dialog__note{font-size:.8rem;color:var(--danger)}.dialog__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.btn--secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);width:100%}.btn--secondary:hover{background:var(--border)}.btn--ghost{background:transparent;color:var(--text-muted);border:none;width:100%;font-size:.85rem}.btn--ghost:hover{color:var(--text)}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}}.message-input{display:flex;gap:.75rem;align-items:flex-end}.message-input textarea{flex:1;resize:none;max-height:120px;overflow-y:auto;line-height:1.4}.message-input button{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:.65rem 1.2rem;cursor:pointer;font-size:.9rem;transition:background .15s;white-space:nowrap}.message-input button:hover:not(:disabled){background:var(--accent-h)}.message-input button:disabled{opacity:.4;cursor:not-allowed}@media (max-width: 480px){body{height:100dvh}.join-room{height:100dvh;align-items:flex-start;padding-top:2rem}.join-room__card{padding:1.5rem 1.25rem}.join-room__card h1{font-size:1.3rem}input,textarea{font-size:16px}.chat-window{height:100dvh}.chat-header{padding:.7rem 1rem}.chat-header code{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}.chat-body{padding:.75rem 1rem}.chat-footer{padding:.6rem 1rem}.message{max-width:88%}.dialog{margin:1rem;padding:1.5rem 1.25rem}}