@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap";:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-tertiary: #f1f5f9;--bg-sidebar: rgba(255, 255, 255, .8);--bg-chat: rgba(255, 255, 255, .9);--bg-input: rgba(255, 255, 255, .95);--text-primary: #1e293b;--text-secondary: #64748b;--text-muted: #94a3b8;--text-accent: #3b82f6;--border-primary: rgba(148, 163, 184, .2);--border-secondary: rgba(148, 163, 184, .1);--accent-primary: #3b82f6;--accent-secondary: #8b5cf6;--accent-success: #10b981;--accent-warning: #f59e0b;--accent-danger: #ef4444;--shadow-light: 0 1px 3px rgba(0, 0, 0, .1);--shadow-medium: 0 4px 6px rgba(0, 0, 0, .1);--shadow-heavy: 0 10px 25px rgba(0, 0, 0, .1);--shadow-neo: 8px 8px 16px rgba(0, 0, 0, .1), -8px -8px 16px rgba(255, 255, 255, .8);--shadow-neo-inset: inset 4px 4px 8px rgba(0, 0, 0, .1), inset -4px -4px 8px rgba(255, 255, 255, .8);--glass-bg: rgba(255, 255, 255, .25);--glass-border: rgba(255, 255, 255, .18);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-sidebar: rgba(30, 41, 59, .8);--bg-chat: rgba(30, 41, 59, .9);--bg-input: rgba(30, 41, 59, .95);--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-accent: #60a5fa;--border-primary: rgba(148, 163, 184, .2);--border-secondary: rgba(148, 163, 184, .1);--shadow-neo: 8px 8px 16px rgba(0, 0, 0, .3), -8px -8px 16px rgba(255, 255, 255, .05);--shadow-neo-inset: inset 4px 4px 8px rgba(0, 0, 0, .3), inset -4px -4px 8px rgba(255, 255, 255, .05);--glass-bg: rgba(30, 41, 59, .25);--glass-border: rgba(30, 41, 59, .18)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:all .3s ease}h1,h2,h3,h4,h5,h6{font-family:Poppins,sans-serif;font-weight:600;line-height:1.2}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.container{max-width:1400px;margin:0 auto;padding:0 20px;height:100vh;display:flex;flex-direction:column}.auth--container{height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg-primary)}.form--wrapper{width:100%;max-width:450px;padding:2.5rem;background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--shadow-heavy)}.field--wrapper{display:flex;flex-direction:column;gap:.75rem;padding:.5em 0}#header--wrapper{background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:1rem 1.5rem;border-radius:20px 20px 0 0;margin-bottom:0;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-light);z-index:10}.header--link{color:var(--text-accent);cursor:pointer;transition:all .3s ease;font-weight:500;text-decoration:none;padding:.5rem 1rem;border-radius:12px;background:var(--glass-bg);border:1px solid var(--glass-border)}.header--link:hover{background:var(--accent-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-medium)}.theme-toggle{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(20px)}.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-medium)}.room--container{flex:1;display:grid;grid-template-columns:280px 1fr;gap:0;background:var(--bg-secondary);border-radius:0 0 20px 20px;border:1px solid var(--border-primary);border-top:none;overflow:hidden;box-shadow:var(--shadow-light)}.sidebar{background:var(--glass-bg);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);padding:1.5rem;overflow-y:auto}.sidebar-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-secondary)}.sidebar-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.online-count{color:var(--text-secondary);font-size:.875rem}.online-users{display:flex;flex-direction:column;gap:.75rem}.user-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:12px;background:var(--bg-tertiary);transition:all .3s ease;cursor:pointer}.user-item:hover{background:var(--accent-primary);color:#fff;transform:translate(4px)}.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:.875rem}.user-status{width:12px;height:12px;border-radius:50%;background:var(--accent-success);border:2px solid var(--bg-tertiary)}.user-info{flex:1}.user-name{font-weight:500;font-size:.875rem}.user-activity{font-size:.75rem;color:var(--text-muted)}.chat-area{display:flex;flex-direction:column;background:var(--bg-chat)}.messages-container{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column-reverse}.message--wrapper{margin-bottom:1rem;animation:fadeInUp .3s ease-out;max-width:80%}.message--wrapper.own-message{align-self:flex-end;margin-left:auto}.message--wrapper.other-message{align-self:flex-start;margin-right:auto}.message--header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.message-username{font-weight:600;font-size:.875rem;color:var(--text-primary)}.message-timestamp{font-size:.75rem;color:var(--text-muted)}.message--body{background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:.75rem 1rem;border-radius:18px;word-wrap:break-word;position:relative;box-shadow:var(--shadow-light);transition:all .3s ease}.message--body:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium)}.message--body--owner{background:var(--gradient-primary);color:#fff;border:none}.message--body--owner .message-username{color:#fff}.message--body--owner .message-timestamp{color:#fffc}.delete--btn{color:var(--accent-danger);cursor:pointer;transition:all .3s ease;width:16px;height:16px;opacity:0;transition:opacity .3s ease}.message--wrapper:hover .delete--btn{opacity:1}.delete--btn:hover{color:var(--accent-danger);transform:scale(1.2)}.input-area{background:var(--glass-bg);backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);padding:1.5rem;display:flex;gap:1rem;align-items:flex-end}.input-wrapper{flex:1;position:relative}.message-input{width:100%;background:var(--bg-input);border:1px solid var(--border-primary);border-radius:25px;padding:.875rem 1rem;font-size:.875rem;color:var(--text-primary);outline:none;transition:all .3s ease;resize:none;min-height:50px;max-height:120px;font-family:Inter,sans-serif}.message-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #3b82f61a}.message-input::placeholder{color:var(--text-muted)}.send-button{background:var(--gradient-primary);color:#fff;border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-medium)}.send-button:hover{transform:scale(1.05);box-shadow:var(--shadow-heavy)}.send-button:active{transform:scale(.95)}.send-button svg{width:20px;height:20px}.emoji-picker{position:absolute;bottom:100%;right:0;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;padding:1rem;box-shadow:var(--shadow-heavy);z-index:1000;display:none}.emoji-picker.show{display:block;animation:fadeIn .2s ease-out}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;max-width:320px}.emoji-item{font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;transition:all .2s ease;text-align:center}.emoji-item:hover{background:var(--bg-tertiary);transform:scale(1.2)}.emoji-trigger{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text-secondary)}.emoji-trigger:hover{background:var(--accent-primary);color:#fff;transform:scale(1.05)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}@media (max-width: 1024px){.room--container{grid-template-columns:240px 1fr}.sidebar{padding:1rem}}@media (max-width: 768px){.room--container{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{order:2;border-right:none;border-top:1px solid var(--glass-border);padding:1rem}.sidebar-header{display:none}.online-users{flex-direction:row;overflow-x:auto;padding-bottom:.5rem}.user-item{min-width:120px;flex-direction:column;text-align:center;padding:.5rem}.user-item:hover{transform:translateY(-4px)}.chat-area{order:1}.container{padding:0 10px}.messages-container,.input-area{padding:1rem}.message--wrapper{max-width:90%}}@media (max-width: 480px){.container{padding:0 5px}#header--wrapper{padding:.75rem 1rem;border-radius:15px 15px 0 0}.room--container{border-radius:0 0 15px 15px}.messages-container{padding:.75rem}.input-area{padding:.75rem;gap:.75rem}.message-input{padding:.75rem;font-size:.8rem}.send-button{width:45px;height:45px}.emoji-trigger{width:35px;height:35px}}.hidden{display:none!important}.fade-in{animation:fadeIn .3s ease-out}.slide-in{animation:slideIn .3s ease-out}.loading{opacity:.6;pointer-events:none}.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--border-primary);border-top:2px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}input[type=text],input[type=password],input[type=email],textarea{background:var(--bg-input);border:1px solid var(--border-primary);padding:1rem;border-radius:12px;width:100%;color:var(--text-primary);outline:none;font-size:.875rem;font-family:Inter,sans-serif;transition:all .3s ease;box-shadow:var(--shadow-light)}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #3b82f61a}input[type=text]::placeholder,input[type=password]::placeholder,input[type=email]::placeholder,textarea::placeholder{color:var(--text-muted)}.btn{padding:.75em 1.5em;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif;font-weight:500;font-size:.875rem}.btn--lg{padding:1em 2em;font-size:1rem}.btn--main{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-medium)}.btn--secondary{background:var(--accent-secondary);color:#fff}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-heavy)}.btn:disabled{opacity:.6;cursor:not-allowed}