:root{--bg-base: #f0f2f5;--surface-base: #ffffff;--surface-raised: #f8f9fb;--text-main: #111827;--text-muted: #6b7280;--border-color: rgba(0, 0, 0, .08);--glass-bg: rgba(255, 255, 255, .65);--glass-border: rgba(255, 255, 255, .5);--bubble-other: rgba(255, 255, 255, .92);--bg-gradient: linear-gradient(135deg, #dde4ff, #ede9fe, #dbeafe, #e0f2fe);--accent-mine: linear-gradient(135deg, #6366f1, #8b5cf6);--accent-dm: linear-gradient(135deg, #0ea5e9, #06b6d4);--accent-solid: #6366f1;--shadow-sm: 0 2px 8px rgba(0,0,0,.06);--shadow-md: 0 8px 24px rgba(0,0,0,.1);--shadow-lg: 0 20px 50px rgba(0,0,0,.15)}[data-theme=dark]{--bg-base: #090b10;--surface-base: #11131c;--surface-raised: #181b27;--text-main: #eef0f6;--text-muted: #8b92a5;--border-color: rgba(255, 255, 255, .09);--glass-bg: rgba(20, 22, 40, .75);--glass-border: rgba(255, 255, 255, .11);--bubble-other: rgba(255, 255, 255, .09);--bg-gradient: linear-gradient(135deg, #0f0c22, #1a1545, #0d1a30, #091220);--accent-mine: linear-gradient(135deg, #6366f1, #8b5cf6);--accent-dm: linear-gradient(135deg, #0ea5e9, #06b6d4);--accent-solid: #818cf8;--shadow-sm: 0 2px 8px rgba(0,0,0,.3);--shadow-md: 0 8px 24px rgba(0,0,0,.4);--shadow-lg: 0 20px 50px rgba(0,0,0,.55)}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-base);color:var(--text-main);overflow:hidden}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animated-bg{background:var(--bg-gradient);background-size:300% 300%;animation:gradientShift 12s ease infinite;min-height:100vh;width:100vw;display:flex;flex-direction:column;transition:background .5s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:slideUp .28s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .2s ease forwards}@keyframes pulseGlow{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 6px #22c55e00}}.status-dot-pulse{animation:pulseGlow 2s infinite}@keyframes spin{to{transform:rotate(360deg)}}.topbar{height:60px;padding:0 20px;border-left:none;border-right:none;border-top:none;border-radius:0;z-index:10;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.topbar-btn{background:var(--glass-bg);color:var(--text-muted);border:1px solid var(--border-color);border-radius:8px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s,transform .1s}.topbar-btn:hover{color:var(--text-main);background:var(--surface-raised);transform:scale(1.05)}.topbar-btn.active-teal{background:var(--accent-dm);color:#fff;border-color:transparent}.topbar-logout:hover{color:#ef4444;border-color:#ef44444d}.topbar-avatar-btn{position:relative;background:none;border:none;cursor:pointer;padding:0;border-radius:50%;transition:transform .15s}.topbar-avatar-btn:hover{transform:scale(1.08)}.topbar-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-solid);display:block}.topbar-avatar-dot{position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid var(--surface-base)}.online-pill{font-size:.72rem;background:var(--border-color);padding:2px 8px;border-radius:12px;color:var(--text-muted);font-weight:500}.auth-bg{min-height:100vh}.auth-card{padding:2.5rem 2.25rem;border-radius:24px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.auth-logo{width:60px;height:60px;border-radius:18px;background:var(--accent-mine);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;box-shadow:0 8px 24px #6366f166}.auth-title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}.auth-sub{color:var(--text-muted);font-size:.9rem}.auth-tabs{display:flex;background:var(--border-color);border-radius:12px;padding:4px;margin-bottom:24px;gap:4px}.auth-tab{flex:1;padding:8px;border:none;border-radius:9px;background:transparent;color:var(--text-muted);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .18s,color .18s}.auth-tab.active{background:var(--surface-base);color:var(--text-main);box-shadow:var(--shadow-sm)}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-label{font-size:.8rem;font-weight:600;color:var(--text-muted);letter-spacing:.04em}.auth-input{padding:11px 14px;border-radius:11px;border:1.5px solid var(--border-color);background:var(--surface-base);color:var(--text-main);font-size:.95rem;outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s;width:100%}.auth-input:focus{border-color:var(--accent-solid);box-shadow:0 0 0 3px #6366f12e}.auth-pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;padding:2px;transition:color .15s}.auth-pw-toggle:hover{color:var(--text-main)}.auth-error{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:10px;color:#ef4444;font-size:.85rem;font-weight:500}.auth-submit{padding:12px;background:var(--accent-mine);color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 20px #6366f159;transition:transform .15s,box-shadow .15s,opacity .15s;margin-top:4px}.auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 28px #6366f173}.auth-submit:active:not(:disabled){transform:translateY(0)}.auth-submit:disabled{opacity:.65;cursor:not-allowed}.auth-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.auth-switch{text-align:center;margin-top:18px;font-size:.85rem;color:var(--text-muted)}.auth-switch-btn{background:none;border:none;color:var(--accent-solid);font-weight:600;cursor:pointer;font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:2px}.profile-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}.profile-modal{width:100%;max-width:360px;border-radius:24px;overflow:hidden}.profile-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color)}.profile-close-btn{background:var(--border-color);border:none;color:var(--text-muted);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.profile-close-btn:hover{background:var(--surface-raised);color:var(--text-main)}.profile-avatar-wrap{position:relative;cursor:pointer;border-radius:50%;flex-shrink:0}.profile-avatar-img{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-solid);display:block;transition:filter .2s}.profile-avatar-wrap:hover .profile-avatar-img{filter:brightness(.7)}.profile-avatar-overlay{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;opacity:0;transition:opacity .2s}.profile-avatar-wrap:hover .profile-avatar-overlay{opacity:1}.profile-upload-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--accent-mine);color:#fff;border:none;border-radius:10px;font-size:.88rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #6366f159}.profile-upload-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f173}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.sidebar-add-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background .15s,color .15s}.sidebar-add-btn:hover{background:var(--border-color);color:var(--text-main)}.room-btn{width:100%;padding:8px 10px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);text-align:left;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:500;font-size:.9rem;transition:background .12s,color .12s}.room-btn:hover{background:var(--border-color);color:var(--text-main)}.room-btn.active{background:var(--accent-mine);color:#fff;font-weight:600}.room-unread-badge{background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto;flex-shrink:0}.group-admin-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}.group-admin-btn:hover{background:var(--border-color);color:var(--text-main)}.group-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:150px;border-radius:10px;padding:4px;z-index:60;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-md)}.group-menu-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:none;background:transparent;color:var(--text-main);font-size:.85rem;font-weight:500;cursor:pointer;border-radius:7px;text-align:left;transition:background .12s}.group-menu-item:hover{background:var(--border-color)}.group-menu-item.danger{color:#ef4444}.group-menu-item.danger:hover{background:rgba(239,68,68,.1)}.invite-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);color:var(--accent-solid);border-radius:20px;font-size:.8rem;font-weight:600}.group-notif{position:fixed;bottom:72px;left:50%;transform:translate(-50%);z-index:55;background:var(--surface-base);border:1px solid var(--border-color);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-lg);font-size:.88rem;max-width:420px;width:calc(100vw - 40px)}.group-notif-btn{padding:6px 14px;border-radius:8px;border:1px solid var(--border-color);background:transparent;color:var(--text-main);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s}.group-notif-btn:hover{background:var(--border-color)}.group-notif-btn.accept{background:var(--accent-mine);color:#fff;border-color:transparent}.group-notif-btn.accept:hover{opacity:.9}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.mobile-only{display:none!important}@media (max-width: 768px){.mobile-only{display:flex!important}.desktop-only{display:none!important}.mobile-drawer{position:fixed!important;top:60px!important;left:0!important;width:75vw!important;max-width:300px!important;height:calc(100vh - 60px)!important;z-index:45!important;transform:translate(-110%);transition:transform .25s cubic-bezier(.16,1,.3,1);border-radius:0 16px 16px 0!important}.mobile-drawer.open{transform:translate(0)}.mobile-members-drawer{position:fixed!important;top:60px!important;right:0!important;left:auto!important;width:75vw!important;max-width:280px!important;height:calc(100vh - 60px)!important;z-index:45!important;transform:translate(110%);transition:transform .25s cubic-bezier(.16,1,.3,1);border-radius:16px 0 0 16px!important}.mobile-members-drawer.open{transform:translate(0)}.mobile-overlay{position:fixed;right:0;bottom:0;left:0;top:60px;background:rgba(0,0,0,.45);z-index:44;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.dm-panel{width:100vw!important;left:0!important;border-radius:0!important}.messages-area{padding-bottom:76px!important}.input-bar{padding-bottom:68px!important}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:56px;z-index:50;background:var(--surface-base);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-around;padding:0 8px}.mobile-nav-btn{flex:1;height:100%;background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.65rem;font-weight:600;letter-spacing:.03em;transition:color .15s;position:relative}.mobile-nav-btn.active{color:var(--accent-solid)}.mobile-nav-btn .badge{position:absolute;top:6px;right:calc(50% - 20px);background:#ef4444;color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}.auth-card{padding:2rem 1.5rem}}.install-banner{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:100;width:calc(100vw - 32px);max-width:440px}.install-banner-content{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:var(--surface-base);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.install-banner-icon{font-size:1.8rem;flex-shrink:0;line-height:1;margin-top:2px}.install-banner-text{flex:1;min-width:0}.install-banner-text strong{font-size:.95rem;font-weight:700;color:var(--text-main);display:block;margin-bottom:4px}.install-banner-text p{font-size:.82rem;color:var(--text-muted);line-height:1.5;margin:0}.install-banner-share-icon{display:inline-flex;align-items:center;vertical-align:middle;background:var(--accent-mine);border-radius:5px;padding:2px 4px;margin:0 3px}.install-banner-share-icon svg{stroke:#fff}.install-banner-close{background:var(--border-color);border:none;color:var(--text-muted);width:26px;height:26px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;transition:background .15s,color .15s}.install-banner-close:hover{background:var(--surface-raised);color:var(--text-main)}.notif-permission-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--accent-mine);color:#fff;border:none;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap}.notif-permission-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f166}@media (max-width: 768px){.install-banner{bottom:64px}}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);border:1px solid var(--glass-border);box-shadow:var(--shadow-md);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}[data-theme=dark] .glass-panel{box-shadow:0 8px 32px #00000073,inset 0 1px #ffffff0f}.glass-bubble-other{background:var(--bubble-other);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-color)}[data-theme=dark] .glass-bubble-other{background:rgba(255,255,255,.09);border-color:#ffffff1a}.glass-bubble-mine{background:var(--accent-mine);color:#fff;border:none;box-shadow:0 4px 14px #6366f14d}.glass-bubble-dm{background:var(--accent-dm);color:#fff;border:none;box-shadow:0 4px 14px #0ea5e94d}