*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #0f0f0f;--bg-surface: #1a1a1a;--bg-elevated: #252525;--border: #333;--text-primary: #fff;--text-secondary: #aaa;--text-muted: #666;--accent: #7c3aed;--accent-light: #a78bfa;--success: #22c55e;--error: #ef4444;--blue: #3b82f6;--font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html{height:100%}body{min-height:100%;font-family:var(--font-family);font-size:16px;color:var(--text-primary);background:var(--bg-dark);-webkit-font-smoothing:antialiased;overflow:hidden}#root{height:100vh;height:100dvh}.auth-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;padding-top:calc(20px + var(--safe-top));background:var(--bg-dark)}.auth-container{width:100%;max-width:360px;background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;padding:28px 24px}.auth-header{text-align:center;margin-bottom:24px}.auth-icon{font-size:48px;margin-bottom:12px}.auth-header h1{font-size:22px;font-weight:600;margin-bottom:4px}.auth-header p{color:var(--text-secondary);font-size:14px}.auth-form{display:flex;flex-direction:column;gap:14px}.input-group{display:flex;flex-direction:column;gap:5px}.input-group label{font-size:12px;font-weight:500;color:var(--text-secondary)}.input-group input{width:100%;padding:12px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:15px;font-family:inherit;outline:none;transition:border-color .15s}.input-group input:focus{border-color:var(--accent)}.input-group input::placeholder{color:var(--text-muted)}.code-input{text-align:center;font-size:20px!important;font-weight:600;letter-spacing:4px}.error-message{padding:10px 12px;background:#ef444426;border-radius:8px;color:var(--error);font-size:13px;text-align:center}.auth-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s}.auth-button:disabled{opacity:.5}.auth-button.create-btn{background:var(--success)}.auth-button.join-btn{background:var(--accent)}.loading-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-footer{margin-top:20px;text-align:center}.auth-footer p{font-size:13px;color:var(--text-secondary)}.auth-footer button{background:none;border:none;color:var(--accent);font-size:13px;font-weight:500;cursor:pointer}.logout-btn{color:var(--error)!important}.divider{display:flex;align-items:center;margin:16px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.divider span{padding:0 12px;font-size:12px;color:var(--text-muted)}.room-options{display:flex;flex-direction:column}.chat-app{display:flex;flex-direction:column;height:100%;background:var(--bg-dark)}.chat-header{display:flex;align-items:center;gap:12px;padding:10px 12px;padding-top:calc(10px + var(--safe-top));background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;position:relative}.back-btn,.menu-btn{width:36px;height:36px;background:transparent;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}.back-btn svg,.menu-btn svg{width:20px;height:20px}.chat-info{flex:1;text-align:center}.room-code{display:block;font-size:16px;font-weight:600;color:var(--accent);letter-spacing:2px}.chat-status{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:var(--success)}.status-dot{width:6px;height:6px;background:var(--success);border-radius:50%}.dropdown-menu{position:absolute;top:calc(100% + 4px);right:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;overflow:hidden;z-index:100;min-width:160px}.dropdown-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;background:transparent;border:none;color:var(--text-primary);font-size:14px;font-family:inherit;cursor:pointer;text-align:left}.dropdown-menu button:hover{background:var(--bg-surface)}.dropdown-menu button.danger{color:var(--error)}.messages-container{flex:1;overflow-y:auto;padding:10px 14px;-webkit-overflow-scrolling:touch}.empty-chat{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted)}.empty-icon{font-size:44px;margin-bottom:12px}.empty-chat h2{font-size:17px;color:var(--text-secondary);margin-bottom:6px}.empty-chat p{font-size:13px}.empty-chat strong{color:var(--accent)}.date-divider{display:flex;justify-content:center;margin:14px 0}.date-divider span{padding:3px 10px;background:var(--bg-elevated);border-radius:12px;font-size:11px;color:var(--text-muted)}.message{display:flex;flex-direction:column;margin-bottom:2px}.message.sent{align-items:flex-end}.message.received{align-items:flex-start}.sender-name{font-size:11px;font-weight:500;color:var(--accent-light);margin:8px 0 2px 10px}.bubble{display:inline-block;max-width:75%;padding:8px 12px;border-radius:14px}.message.sent .bubble{background:var(--accent);border-bottom-right-radius:4px}.message.received .bubble{background:var(--bg-elevated);border:1px solid var(--border);border-bottom-left-radius:4px}.bubble .text{display:block;font-size:14px;line-height:1.4;word-break:break-word}.bubble .meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px}.bubble .time{font-size:10px;opacity:.6}.status-icon{font-size:11px;font-weight:700}.status-icon.sent{opacity:.6}.status-icon.delivered{opacity:.8}.status-icon.read{color:var(--blue)}.input-area{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));background:var(--bg-surface);border-top:1px solid var(--border);flex-shrink:0}.input-area input{flex:1;padding:10px 16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;color:var(--text-primary);font-size:15px;font-family:inherit;outline:none}.input-area input:focus{border-color:var(--accent)}.input-area input::placeholder{color:var(--text-muted)}.send-button{width:40px;height:40px;background:var(--accent);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.send-button:disabled{opacity:.4}.send-button svg{width:18px;height:18px;margin-left:2px}.toast{position:fixed;bottom:calc(70px + var(--safe-bottom));left:50%;transform:translate(-50%);padding:10px 18px;border-radius:10px;font-size:13px;z-index:100}.toast.error{background:var(--error);color:#fff}.messages-container::-webkit-scrollbar{display:none}.messages-container{-ms-overflow-style:none;scrollbar-width:none}@media (max-width: 480px){.auth-container{padding:24px 20px}.bubble{max-width:80%}}