*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #1a1a2e;--bg-sidebar: #16213e;--bg-chat: #1a1a2e;--bg-input: #0f3460;--bg-message: #16213e;--bg-own: #0f3460;--accent: #e94560;--accent-hover: #ff6b81;--text-primary: #eaeaea;--text-secondary: #a0a0b0;--text-muted: #6c6c80;--border: #2a2a4a;--online-green: #4ade80;--radius: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-dark);color:var(--text-primary);height:100vh;overflow:hidden}.login-container{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}.login-card{background:var(--bg-sidebar);border:1px solid var(--border);border-radius:16px;padding:48px 40px;text-align:center;width:380px;box-shadow:0 20px 60px #0006}.login-logo{font-size:64px;margin-bottom:12px}.login-card h1{font-size:28px;margin-bottom:8px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-card p{color:var(--text-secondary);margin-bottom:28px;font-size:14px}.login-card input{width:100%;padding:14px 18px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:16px;outline:none;transition:border-color .2s;margin-bottom:16px}.login-card input:focus{border-color:var(--accent)}.login-card button{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.login-card button:hover:not(:disabled){background:var(--accent-hover)}.login-card button:disabled{opacity:.5;cursor:not-allowed}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:#4285f4;color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s;margin-bottom:4px}.google-signin-btn:hover:not(:disabled){background:#3367d6}.google-signin-btn:disabled{opacity:.5;cursor:not-allowed}.login-divider{display:flex;align-items:center;margin:20px 0;gap:12px}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border)}.login-divider span{color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}.logout-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s}.logout-btn:hover{border-color:var(--accent);color:var(--accent)}.user-badge-container{padding:0 16px 12px;border-bottom:1px solid var(--border)}.app-container{display:flex;height:100vh}.sidebar{width:260px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{padding:20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.sidebar-header h2{font-size:18px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.user-badge{background:var(--bg-input);color:var(--text-secondary);padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500}.rooms-section{flex:1;overflow-y:auto;padding:12px 8px}.rooms-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;margin-bottom:8px}.rooms-header h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.add-room-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}.add-room-btn:hover{border-color:var(--accent);color:var(--accent)}.rooms-list{display:flex;flex-direction:column;gap:2px}.room-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:none;border:none;color:var(--text-secondary);cursor:pointer;border-radius:6px;font-size:14px;text-align:left;width:100%;transition:all .15s}.room-item:hover{background:#e945601a;color:var(--text-primary)}.room-item.active{background:#e9456026;color:var(--accent-hover)}.room-icon{font-size:16px;font-weight:600;opacity:.6}.online-section{border-top:1px solid var(--border);padding:12px 16px;max-height:180px;overflow-y:auto}.online-section h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:8px}.online-user{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;color:var(--text-secondary)}.online-dot{width:8px;height:8px;background:var(--online-green);border-radius:50%;flex-shrink:0}.chat-area{flex:1;display:flex;flex-direction:column;background:var(--bg-chat)}.chat-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.chat-header h3{font-size:16px;font-weight:600}.msg-count{font-size:12px;color:var(--text-muted)}.messages-container{flex:1;overflow-y:auto;padding:16px 24px;display:flex;flex-direction:column;gap:4px}.no-messages{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.message{display:flex;gap:12px;padding:8px 0;border-radius:8px;transition:background .15s}.message:hover{background:#ffffff05}.message.own-message .message-author{color:var(--accent-hover)}.message-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--accent);flex-shrink:0}.message-content{flex:1;min-width:0}.message-header{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}.message-author{font-size:14px;font-weight:600;color:var(--text-primary)}.message-time{font-size:11px;color:var(--text-muted)}.message-text{font-size:14px;line-height:1.5;color:var(--text-secondary);word-wrap:break-word}.message-form{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:12px}.message-form input{flex:1;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s}.message-form input:focus{border-color:var(--accent)}.message-form button{padding:12px 20px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:16px;cursor:pointer;transition:background .2s}.message-form button:hover:not(:disabled){background:var(--accent-hover)}.message-form button:disabled{opacity:.4;cursor:not-allowed}::-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-muted)}@media (max-width: 768px){.sidebar{width:200px}}@media (max-width: 600px){.sidebar{display:none}}