:root{--bg-base:#050510;--bg-surface:#0a0b18;--bg-card:#0f1226b3;--text-primary:#fff;--text-secondary:#94a3b8;--text-muted:#64748b;--primary-color:#6366f1;--primary-glow:#6366f180;--accent-color:#f43f5e;--accent-glow:#f43f5e80;--success-color:#10b981;--success-glow:#10b98166;--glass-border:#ffffff0d;--glass-shadow:0 8px 32px 0 #0009;--message-received:#1e293bcc;--message-sent:linear-gradient(135deg, #6366f1, #8b5cf6);--font-family:"Outfit", sans-serif;--border-radius-xl:24px;--border-radius-lg:16px;--border-radius-md:12px}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-family);background-color:var(--bg-base);color:var(--text-primary);-webkit-tap-highlight-color:transparent;letter-spacing:.2px;overflow:hidden}.bg-orb{filter:blur(100px);z-index:0;border-radius:50%;animation:25s ease-in-out infinite alternate float;position:absolute}.orb-1{background:var(--primary-color);opacity:.25;width:40vw;max-width:400px;height:40vw;max-height:400px;top:-10%;left:-10%}.orb-2{background:var(--accent-color);opacity:.15;width:35vw;max-width:350px;height:35vw;max-height:350px;animation-delay:-10s;bottom:-10%;right:-5%}@keyframes float{0%{transform:translate(0)scale(1)}50%{transform:translate(50px,80px)scale(1.1)}to{transform:translate(-30px,30px)scale(.9)}}#app{z-index:1;-webkit-backdrop-filter:blur(30px);background:#0a0b1866;flex-direction:column;width:100%;max-width:600px;height:100%;margin:0 auto;display:flex;position:relative;box-shadow:0 0 40px #00000080}.screen{flex-direction:column;width:100%;height:100%;display:none}.screen.active{animation:.4s cubic-bezier(.16,1,.3,1) forwards slideUpFade;display:flex}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--border-radius-xl)}.glass-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);z-index:10;background:#050510b3;padding:20px}.glass-footer{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);padding:15px;padding-bottom:calc(15px + env(safe-area-inset-bottom));background:#050510d9}.toast-container{z-index:9999;flex-direction:column;gap:10px;width:90%;max-width:400px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast{color:#fff;border-radius:var(--border-radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#f43f5ee6;padding:14px 20px;font-size:.95rem;font-weight:500;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards slideDownBounce;box-shadow:0 8px 20px #f43f5e4d}.toast.success{background:#10b981e6;box-shadow:0 8px 20px #10b9814d}@keyframes slideDownBounce{0%{opacity:0;transform:translateY(-30px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}#login-screen{justify-content:center;align-items:center;padding:20px}.login-card{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:380px;padding:40px 30px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--primary-color), #3b82f6);width:72px;height:72px;box-shadow:0 10px 30px var(--primary-glow);border-radius:22px;justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.logo-icon svg{color:#fff;width:36px;height:36px}.login-card h1{background:linear-gradient(90deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:2.2rem;font-weight:700}.auth-tabs{border-radius:var(--border-radius-md);background:#0000004d;width:100%;margin:24px 0;padding:4px;display:flex}.auth-tab{color:var(--text-secondary);background:0 0;border-radius:10px;flex:1;padding:12px;font-size:.95rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.auth-tab.active{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px var(--primary-glow)}.profile-pic-select{flex-direction:column;align-items:center;margin-bottom:24px;display:flex}#login-pic-preview,.msg-pic,.chat-pic,#my-profile-pic,#group-profile-pic{object-fit:cover;background:linear-gradient(#1e293b, #1e293b) padding-box, linear-gradient(135deg, var(--primary-color), var(--accent-color)) border-box;border:2px solid #0000;border-radius:50%;width:84px;height:84px}.msg-pic,.chat-pic{width:40px;height:40px}#btn-select-login-pic{color:var(--primary-color);background:0 0;margin-top:12px;font-size:.9rem;font-weight:600}.input-group{width:100%;margin-bottom:16px}input[type=text],input[type=password]{border-radius:var(--border-radius-lg);width:100%;color:var(--text-primary);font-family:var(--font-family);background:#0000004d;border:1px solid #ffffff14;outline:none;padding:16px 20px;font-size:1rem;transition:all .3s}input[type=text]:focus,input[type=password]:focus{border-color:var(--primary-color);background:#00000080;box-shadow:0 0 0 3px #6366f133}button{cursor:pointer;font-family:var(--font-family);border:none;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-primary{border-radius:var(--border-radius-lg);background:linear-gradient(135deg, var(--primary-color), #4f46e5);color:#fff;width:100%;box-shadow:0 6px 20px var(--primary-glow);justify-content:center;align-items:center;gap:10px;padding:16px;font-size:1.05rem;font-weight:600;display:flex}.btn-primary:active{transform:scale(.96)}.header-content{padding-top:calc(env(safe-area-inset-top) + 20px);justify-content:space-between;align-items:center;margin-bottom:16px;padding-left:20px;padding-right:20px;display:flex}.header-content h2{letter-spacing:-.5px;font-size:1.8rem;font-weight:700}.user-profile{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff0d;border-radius:30px;align-items:center;gap:10px;padding:6px 16px 6px 6px;font-size:.95rem;font-weight:600;transition:background .3s;display:flex}.user-profile:hover{background:#ffffff1a}.user-profile img{object-fit:cover;border-radius:50%;width:32px;height:32px}.header-actions-row{gap:10px;display:flex}.btn-outline{color:#a5b4fc;border-radius:var(--border-radius-md);background:#6366f11a;border:1px solid #6366f14d;align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;font-weight:600;display:flex}.btn-outline:active{background:#6366f133}.content-scrollable{scroll-behavior:smooth;flex:1;padding:16px;overflow-y:auto}.group-item{border-radius:var(--border-radius-lg);cursor:pointer;background:#ffffff05;border:1px solid #ffffff08;align-items:center;margin-bottom:12px;padding:14px 16px;transition:all .3s cubic-bezier(.16,1,.3,1);animation:.4s backwards slideInRight;display:flex}.group-item:first-child{animation-delay:50ms}.group-item:nth-child(2){animation-delay:.1s}.group-item:nth-child(3){animation-delay:.15s}.group-item:nth-child(4){animation-delay:.2s}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.group-item:active{background:#ffffff0f;transform:scale(.98)}.group-icon{color:#818cf8;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;margin-right:16px;font-size:1.3rem;font-weight:700;display:flex;box-shadow:0 4px 10px #0000004d}.group-info{flex:1}.group-info h3{margin-bottom:4px;font-size:1.15rem;font-weight:600}.group-info p{color:var(--text-muted);font-size:.85rem}.member-actions{gap:8px;margin-left:auto;display:flex}.action-btn{color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.action-btn:hover{color:var(--text-primary);background:#ffffff1a}.action-btn.promote:hover{color:var(--success-color);background:#10b9811a}.action-btn.remove:hover{color:var(--accent-color);background:#f43f5e1a}.fab{background:linear-gradient(135deg, var(--accent-color), #be185d);color:#fff;width:64px;height:64px;box-shadow:0 10px 30px var(--accent-glow);z-index:20;border-radius:32px;justify-content:center;align-items:center;display:flex;position:absolute;bottom:30px;right:30px}.fab:active{transform:scale(.92)}.chat-header{padding:calc(env(safe-area-inset-top) + 15px) 20px 15px;-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);z-index:10;background:#0a0b18cc;align-items:center;gap:12px;display:flex}.icon-btn{color:var(--text-primary);background:0 0;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background .2s;display:flex}.icon-btn:active{background:#ffffff1a}.icon-btn.small{width:32px;height:32px}.icon-btn.text-muted{color:var(--text-secondary)}.icon-btn.recording{color:var(--accent-color);background:#f43f5e1a;animation:1s infinite alternate pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow);transform:scale(1)}to{transform:scale(1.1);box-shadow:0 0 0 10px #f43f5e00}}.chat-title-area{flex:1;align-items:center;display:flex}.chat-title-area h2{font-size:1.25rem;font-weight:600}.chat-messages{flex-direction:column;flex:1;gap:16px;padding:20px 16px;display:flex;overflow-y:auto}.message-wrapper{opacity:0;align-items:flex-end;gap:10px;max-width:85%;animation:.3s cubic-bezier(.175,.885,.32,1.1) forwards slideUpMsg;display:flex;transform:translateY(10px)}@keyframes slideUpMsg{to{opacity:1;transform:translateY(0)}}.message-wrapper.sent{flex-direction:row-reverse;align-self:flex-end}.message-wrapper.received{align-self:flex-start}.message{flex-direction:column;display:flex}.msg-sender{color:var(--text-muted);margin-bottom:4px;margin-left:12px;font-size:.75rem;font-weight:500}.sent .msg-sender{justify-content:flex-end;margin-left:0;margin-right:12px;display:flex}.msg-bubble{word-wrap:break-word;border-radius:24px;padding:14px 18px;font-size:1rem;line-height:1.4;overflow:hidden;box-shadow:0 2px 8px #0000001a}.msg-bubble img{border-radius:12px;max-width:100%;margin-top:4px}.msg-bubble audio{border-radius:20px;max-width:200px;height:40px;margin-top:4px}.received .msg-bubble{background:var(--message-received);border:1px solid #ffffff08;border-bottom-left-radius:4px}.msg-bubble.admin-bubble{background:linear-gradient(135deg,#f59e0b26,#d977061a);box-shadow:0 4px 15px #f59e0b1a;color:#fff!important;border:1px solid #f59e0b4d!important}.msg-bubble.master-bubble{background:linear-gradient(135deg,#fbbf2433,#d9770626);box-shadow:0 0 20px #fbbf2433;color:#fff!important;border:1px solid #fbbf2480!important}.master-badge{color:#fff;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:4px;margin-left:4px;padding:1px 6px;font-size:.55rem;font-weight:800;box-shadow:0 0 10px #fbbf2480}.sent .msg-bubble{background:var(--message-sent);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 15px #6366f14d}.system-msg{color:var(--text-secondary);background:#ffffff0d;border:1px solid #ffffff08;border-radius:20px;align-self:center;margin:12px 0;padding:6px 16px;font-size:.8rem;font-weight:500}.chat-input-area{padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--glass-border);background:#0a0b18e6;position:relative}.media-preview-container{border-radius:var(--border-radius-md);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172af2;align-items:flex-start;gap:8px;padding:8px;display:flex;position:absolute;top:-80px;left:20px;box-shadow:0 -5px 20px #00000080}.media-preview-container img{border-radius:8px;max-height:60px}.chat-input-area form{align-items:center;gap:8px;display:flex}.chat-input-area input[type=text]{border:1px solid var(--glass-border);color:var(--text-primary);background:#0006;border-radius:24px;flex:1;padding:14px 20px;font-size:1rem}.chat-input-area input[type=text]:focus{border-color:#6366f180}.icon-btn.active-effect{color:#fbbf24;filter:drop-shadow(0 0 8px #fbbf2480)}.emoji-picker{z-index:100;border-radius:var(--border-radius-lg);max-height:200px;padding:12px;animation:.3s slideUp;position:absolute;bottom:80px;left:16px;right:16px;overflow-y:auto}.emoji-list{text-align:center;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:8px;font-size:1.5rem;display:grid}.emoji-item{cursor:pointer;transition:transform .2s}.emoji-item:active{transform:scale(1.2)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn-send{background:linear-gradient(135deg, var(--primary-color), #4f46e5);color:#fff;width:48px;height:48px;box-shadow:0 4px 15px var(--primary-glow);border-radius:24px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-send:active{transform:scale(.9)}.modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:0;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;transition:opacity .3s;display:none;position:absolute;top:0;left:0}.modal.active{opacity:1;display:flex}.modal-content{width:100%;max-width:360px;padding:28px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);transform:scale(.95)translateY(10px)}.modal.active .modal-content{transform:scale(1)translateY(0)}.modal-content h3{margin-bottom:8px;font-size:1.4rem;font-weight:700}.modal-subtitle{color:var(--text-secondary);margin-bottom:24px;font-size:.9rem}.modal-actions{gap:12px;margin-top:24px;display:flex}.btn-secondary{border-radius:var(--border-radius-md);color:var(--text-primary);background:#ffffff14;border:1px solid #ffffff0d;flex:1;padding:14px;font-weight:600}.btn-secondary:active{background:#ffffff1f}.profile-details{flex-direction:column;align-items:center;margin:24px 0;display:flex}.profile-pic-container{margin-bottom:16px;position:relative}#my-profile-pic{background:linear-gradient(#1e293b, #1e293b) padding-box, linear-gradient(135deg, var(--primary-color), var(--accent-color)) border-box;border:3px solid #0000;width:110px;height:110px}.edit-pic-btn{background:var(--primary-color);color:#fff;border:2px solid var(--bg-card);border-radius:18px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:absolute;bottom:0;right:0;box-shadow:0 4px 10px #00000080}#my-username{font-size:1.5rem;font-weight:700}.id-badge{background:#0000004d;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:10px;margin-top:12px;padding:8px 16px;display:flex}.id-badge strong{color:var(--primary-color);letter-spacing:1px;font-size:1.1rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}