/* ===== TOKENS (Bootstrap 5 dark theme değişkenlerini eziyoruz) ===== */
:root, [data-bs-theme="dark"]{
    --bs-body-bg:#111017;
    --bs-body-color:#ece9f5;
    --bs-border-color: rgba(255,255,255,0.1);
    --bs-primary:#7c6cf2;
    --bs-primary-rgb:124,108,242;

    --ac-bg-deepest:#111017;
    --ac-bg-surface:#18171f;
    --ac-bg-elevated:#211f2b;
    --ac-bg-elevated-2:#292736;
    --ac-border: rgba(255,255,255,0.06);
    --ac-border-2: rgba(255,255,255,0.1);

    --ac-text:#ece9f5;
    --ac-text-secondary:#b3aec4;
    --ac-text-muted:#726c85;

    --ac-accent:#7c6cf2;
    --ac-accent-hover:#8e80f5;
    --ac-accent-soft: rgba(124,108,242,0.14);
    --ac-mint:#2fd6a8;
    --ac-mint-soft: rgba(47,214,168,0.14);
    --ac-danger:#ff5c78;
    --ac-amber:#f2b84c;

    --font-display:'Sora', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;

    --rail-w:72px;
    --sidebar-w:264px;
}

body{
    font-family:var(--font-body);
    background:var(--ac-bg-deepest);
    margin:0;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
html{overflow-x:hidden;}
.d-none{display:none !important;}
.hidden{display:none !important;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ac-bg-elevated-2);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#38354a;}

/* ===== FORM CONTROLS (bootstrap override) ===== */
.field-label{
    display:block;
    font-size:12px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--ac-text-muted);
    margin-bottom:8px;
}
.field-input.form-control{
    background:var(--ac-bg-deepest);
    border:1px solid var(--ac-border-2);
    color:var(--ac-text);
    border-radius:8px;
    padding:12px 14px;
    font-size:14.5px;
    margin-bottom:16px;
}
.field-input.form-control::placeholder{color:var(--ac-text-muted);}
.field-input.form-control:focus{
    background:var(--ac-bg-deepest);
    color:var(--ac-text);
    border-color:var(--ac-accent);
    box-shadow:0 0 0 3px var(--ac-accent-soft);
}
.btn-primary{
    --bs-btn-bg:var(--ac-accent);
    --bs-btn-border-color:var(--ac-accent);
    --bs-btn-hover-bg:var(--ac-accent-hover);
    --bs-btn-hover-border-color:var(--ac-accent-hover);
    --bs-btn-active-bg:var(--ac-accent-hover);
    font-weight:600;
    border-radius:8px;
}
.btn-outline-secondary{
    --bs-btn-color:var(--ac-text-secondary);
    --bs-btn-border-color:var(--ac-border-2);
    --bs-btn-hover-bg:var(--ac-bg-elevated-2);
    --bs-btn-hover-color:var(--ac-text);
    --bs-btn-hover-border-color:var(--ac-text-muted);
    border-radius:8px;
    font-weight:600;
}
.form-check-input{
    background-color:var(--ac-bg-deepest);
    border-color:var(--ac-border-2);
}
.form-check-input:checked{
    background-color:var(--ac-accent);
    border-color:var(--ac-accent);
}

.icon-btn{
    background:transparent;border:none;color:var(--ac-text-secondary);
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;transition:background .15s ease,color .15s ease;
}
.icon-btn:hover{background:var(--ac-bg-elevated-2);color:var(--ac-text);}
.icon-btn--ghost{width:30px;height:30px;}

/* ===== TOASTS ===== */
.toast-root{
    position:fixed;top:18px;right:18px;z-index:999;
    display:flex;flex-direction:column;gap:10px;max-width:340px;
}
.toast{
    background:var(--ac-bg-elevated);
    border:1px solid var(--ac-border-2);
    border-left:4px solid var(--ac-accent);
    color:var(--ac-text);
    padding:12px 14px;border-radius:8px;font-size:13.5px;line-height:1.4;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    animation:toast-in .25s ease;
}
.toast--error{border-left-color:var(--ac-danger);}
.toast--success{border-left-color:var(--ac-mint);}
.toast--info{border-left-color:var(--ac-accent);}
@keyframes toast-in{from{opacity:0;transform:translateX(24px);} to{opacity:1;transform:translateX(0);}}
.toast.toast-out{animation:toast-out .2s ease forwards;}
@keyframes toast-out{to{opacity:0;transform:translateX(24px);}}

/* ===== LOGIN ===== */
.login-screen{
    position:relative;
    height:100vh;
    height:calc(var(--app-vh, 1vh) * 100);
    height:100dvh;
    overflow:hidden;
    background:radial-gradient(120% 120% at 50% 0%, #1c1a27 0%, var(--ac-bg-deepest) 60%);
}
.login-bg-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;}
.login-bg-orb--a{width:420px;height:420px;background:var(--ac-accent);top:-120px;left:-100px;}
.login-bg-orb--b{width:380px;height:380px;background:var(--ac-mint);bottom:-140px;right:-100px;}
.login-card{
    position:relative;width:min(400px,90vw);
    background:rgba(24,23,31,0.85);backdrop-filter:blur(18px);
    border:1px solid var(--ac-border-2);border-radius:22px;
    padding:38px 34px 32px;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.brand-mark{
    width:44px;height:44px;border-radius:14px;flex-shrink:0;
    background:linear-gradient(135deg,var(--ac-accent),var(--ac-mint));
    display:flex;align-items:center;justify-content:center;
}
.brand-mark-orb{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18);}
.brand-name{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.01em;}
.brand-name span{color:var(--ac-mint);}
.login-sub{color:var(--ac-text-secondary);font-size:14px;line-height:1.5;margin:0 0 26px;}
.login-error{color:var(--ac-danger);font-size:13px;}

/* ===== APP SHELL ===== */
/* --app-vh: JS tarafından window.visualViewport'a göre güncellenen gerçek görünür
   yükseklik (px). Android/iOS'ta klavye açıldığında 100vh küçülmediği için composer
   ekranın altında/klavyenin arkasında kalıyordu — bunun yerine gerçek viewport
   yüksekliğini kullanıyoruz. dvh destekleyen tarayıcılarda ek bir güvenlik katmanı. */
.app-shell{
    height:100vh;
    height:calc(var(--app-vh, 1vh) * 100);
    height:100dvh;
    display:flex;flex-direction:column;
    overflow:hidden;
}
.app-body{flex:1;min-height:0;}
.mobile-topbar{
    padding:10px 14px;background:var(--ac-bg-surface);
    border-bottom:1px solid var(--ac-border);
}
.mobile-channel-name{
    font-family:var(--font-display);font-weight:600;font-size:15px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex-shrink:1;
}
.mobile-topbar .member-pill{flex-shrink:0;}
.mobile-topbar .lock-pill{flex-shrink:0;}
.mobile-topbar .icon-btn{flex-shrink:0;}

.rail{
    width:var(--rail-w);flex-shrink:0;background:var(--ac-bg-deepest);
    padding:16px 0;gap:10px;border-right:1px solid var(--ac-border);
}
.rail-item{
    width:48px;height:48px;border-radius:16px;background:var(--ac-bg-elevated);
    border:none;color:var(--ac-text-secondary);display:flex;align-items:center;justify-content:center;
    transition:border-radius .18s ease,background .18s ease,color .18s ease;
}
.rail-item:hover{border-radius:14px;background:var(--ac-accent);color:#fff;}
.rail-item--active{background:var(--ac-accent);color:#fff;border-radius:14px;}
.rail-item--add{color:var(--ac-mint);}
.rail-item--add:hover{background:var(--ac-mint);color:#0e1b17;}
.rail-item--mic{color:var(--ac-amber);}
.rail-divider{width:28px;height:2px;background:var(--ac-border-2);border-radius:2px;margin:2px 0;}
.rail-spacer{flex:1;}

.channel-sidebar{
    width:var(--sidebar-w);flex-shrink:0;background:var(--ac-bg-surface);
    display:flex;flex-direction:column;border-right:1px solid var(--ac-border);min-height:0;
}
.channel-sidebar-header{
    padding:18px 18px 10px;font-family:var(--font-display);font-weight:600;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-text-muted);
}
.badge-count{
    background:var(--ac-bg-elevated-2);color:var(--ac-text-secondary);
    font-size:11px;padding:2px 8px;border-radius:20px;font-family:var(--font-mono);
}
.channel-list{flex:1;overflow-y:auto;padding:4px 10px;}
.channel-empty{color:var(--ac-text-muted);font-size:13px;padding:14px 8px;line-height:1.5;}
.channel-item{
    display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;
    color:var(--ac-text-secondary);padding:9px 10px;border-radius:8px;font-size:14px;
    text-align:left;margin-bottom:2px;transition:background .12s ease,color .12s ease;
}
.channel-item:hover{background:var(--ac-bg-elevated);color:var(--ac-text);}
.channel-item--active{background:var(--ac-bg-elevated-2);color:var(--ac-text);}
.channel-item-hash{color:var(--ac-text-muted);font-weight:600;flex-shrink:0;}
.channel-item--active .channel-item-hash{color:var(--ac-mint);}
.channel-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.channel-item-lock{color:var(--ac-amber);flex-shrink:0;display:flex;}
.channel-item-count{font-family:var(--font-mono);font-size:11px;color:var(--ac-text-muted);flex-shrink:0;}

.channel-sidebar-footer{padding:10px;border-top:1px solid var(--ac-border);}
.me-chip{background:var(--ac-bg-elevated);border-radius:8px;padding:8px 10px;}
.me-avatar{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--ac-accent),var(--ac-mint));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:14px;color:#0e0d14;
}
.me-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.me-status{font-size:11px;color:var(--ac-mint);}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20;}

.chat-main{flex:1;min-width:0;min-height:0;background:var(--ac-bg-deepest);}
.chat-header{
    position:relative;height:56px;flex-shrink:0;padding:0 20px;
    border-bottom:1px solid var(--ac-border);background:var(--ac-bg-surface);
}
.chat-header-title{font-family:var(--font-display);font-weight:600;font-size:15.5px;}
.chat-header-hash{color:var(--ac-text-muted);font-weight:700;}
.desktop-brand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-family:var(--font-display);font-size:13px;font-weight:800;line-height:1;
    letter-spacing:.09em;text-transform:uppercase;color:var(--ac-text);white-space:nowrap;
    pointer-events:none;
}
.desktop-brand span{color:var(--ac-mint);}
@media (min-width:992px){
    .chat-header.d-lg-flex{display:flex !important;}
}
.lock-pill{
    display:flex;align-items:center;color:var(--ac-amber);
    background:rgba(242,184,76,0.12);padding:3px 8px;border-radius:20px;margin-left:2px;
}
.member-pill{
    color:var(--ac-text-muted);font-size:12px;font-family:var(--font-mono);margin-left:6px;
}

.chat-messages{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 24px;display:flex;flex-direction:column;gap:2px;}
.msg-empty{margin:auto;text-align:center;color:var(--ac-text-muted);font-size:14px;max-width:280px;line-height:1.6;}
.msg-row{display:flex;gap:12px;padding:6px 8px;border-radius:8px;max-width:720px;}
.msg-row:hover{background:rgba(255,255,255,0.02);}
.msg-avatar{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:14px;color:#0e0d14;margin-top:2px;
}
.msg-body{min-width:0;}
.msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.msg-author{font-weight:600;font-size:14.5px;color:var(--ac-text);}
.msg-time{font-size:11px;color:var(--ac-text-muted);font-family:var(--font-mono);}
.msg-text{font-size:14.5px;line-height:1.5;color:var(--ac-text);word-break:break-word;white-space:pre-wrap;}
.msg-row--self .msg-author{color:var(--ac-mint);}
.msg-row--system{justify-content:center;padding:8px;max-width:none;}
.msg-row--system .msg-text{color:var(--ac-text-muted);font-size:12.5px;font-style:italic;}

.chat-composer{
    padding:14px 20px 20px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    flex-shrink:0;
}

/* ===== VOICE / SESLİ SOHBET ===== */
.voice-bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:9px 20px;background:var(--ac-bg-surface);border-bottom:1px solid var(--ac-border);
    flex-shrink:0;
}
.voice-bar-info{color:var(--ac-text-secondary);font-size:13px;min-width:0;}
.voice-bar-icon{color:var(--ac-mint);display:flex;flex-shrink:0;}
.voice-avatars{display:flex;align-items:center;margin-left:2px;}
.voice-avatar-chip{
    width:24px;height:24px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:10px;color:#0e0d14;
    border:2px solid var(--ac-bg-surface);margin-left:-8px;
}
.voice-avatar-chip:first-child{margin-left:0;}
.voice-bar-actions{flex-shrink:0;}
.voice-btn{
    border:1px solid var(--ac-border-2);background:var(--ac-bg-elevated);color:var(--ac-text);
    font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:20px;
    display:flex;align-items:center;gap:6px;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.voice-btn--join{background:var(--ac-mint);border-color:var(--ac-mint);color:#0e1b17;}
.voice-btn--join:hover{background:#38e0b4;}
.voice-btn--leave{background:transparent;color:var(--ac-danger);border-color:var(--ac-danger);}
.voice-btn--leave:hover{background:rgba(255,92,120,0.12);}
.voice-btn--mute{width:32px;height:32px;padding:0;justify-content:center;border-radius:50%;}
.voice-btn--mute.voice-btn--muted{background:var(--ac-danger);border-color:var(--ac-danger);color:#fff;}

/* ===== INCOMING CALL BANNER ===== */
.incoming-call{
    position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:998;
    animation:incoming-in .25s ease;width:min(380px,92vw);
}
@keyframes incoming-in{from{opacity:0;transform:translate(-50%,-14px);} to{opacity:1;transform:translate(-50%,0);}}
.incoming-call-card{
    display:flex;align-items:center;gap:12px;
    background:var(--ac-bg-elevated);border:1px solid var(--ac-amber);border-radius:14px;
    padding:14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.incoming-call-avatar{
    width:40px;height:40px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--ac-amber),var(--ac-accent));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:15px;color:#1a1610;
    animation:ring-pulse 1.1s ease-in-out infinite;
}
@keyframes ring-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,184,76,.45);}50%{box-shadow:0 0 0 8px rgba(242,184,76,0);}}
.incoming-call-text{flex:1;min-width:0;font-size:12.5px;color:var(--ac-text-secondary);line-height:1.4;}
.incoming-call-text strong{display:block;color:var(--ac-text);font-size:14px;font-family:var(--font-display);}
.incoming-call-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.incoming-call-btn{
    border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap;
}
.incoming-call-btn--accept{background:var(--ac-mint);color:#0e1b17;}
.incoming-call-btn--accept:hover{background:#38e0b4;}
.incoming-call-btn--reject{background:transparent;color:var(--ac-text-secondary);border:1px solid var(--ac-border-2);}
.incoming-call-btn--reject:hover{background:var(--ac-bg-elevated-2);color:var(--ac-text);}
.composer-input.form-control{
    background:var(--ac-bg-elevated);border:1px solid var(--ac-border-2);color:var(--ac-text);
    padding:13px 16px;border-radius:14px;font-size:14.5px;
}
.composer-input.form-control:focus{
    background:var(--ac-bg-elevated);color:var(--ac-text);border-color:var(--ac-accent);
    box-shadow:0 0 0 3px var(--ac-accent-soft);
}
.composer-input.form-control::placeholder{color:var(--ac-text-muted);}
.composer-send{
    width:44px;height:44px;border-radius:50%;background:var(--ac-accent);border:none;color:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:background .15s ease,transform .1s ease;
}
.composer-send:hover{background:var(--ac-accent-hover);}
.composer-send:active{transform:scale(.94);}

/* ===== MODALS ===== */
.modal-backdrop{
    position:fixed;inset:0;background:rgba(8,7,12,.6);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;z-index:100;
    animation:fade-in .15s ease;
}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
.modal-card{
    width:min(380px,90vw);background:var(--ac-bg-elevated);border:1px solid var(--ac-border-2);
    border-radius:22px;padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modal-title{font-family:var(--font-display);font-size:17px;margin:0 0 18px;}
.modal-title span{color:var(--ac-amber);font-size:14px;font-weight:500;}
.checkbox-row{color:var(--ac-text-secondary);font-size:14px;margin-bottom:14px;padding-left:1.75em;}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px){
    .rail{
        position:fixed;left:0;top:0;bottom:0;z-index:30;
        transform:translateX(-100%);transition:transform .2s ease;
    }
    .channel-sidebar{
        position:fixed;left:var(--rail-w);top:0;bottom:0;z-index:30;
        transform:translateX(-120%);transition:transform .2s ease;
        box-shadow:20px 0 40px rgba(0,0,0,.3);
    }
    .app-shell.nav-open .rail,
    .app-shell.nav-open .channel-sidebar{transform:translateX(0);}
    .app-shell.nav-open .sidebar-overlay{display:block;}
    .chat-messages{padding:16px;}
    .chat-composer{padding:12px 14px 16px;}
    .voice-bar{padding:8px 14px;}
    .voice-bar-info{font-size:12px;}
}
@media (max-width: 480px){
    .login-card{padding:30px 22px 26px;}
    .brand-name{font-size:21px;}
    .chat-messages{padding:12px;}
    .msg-row{max-width:100%;gap:9px;padding:5px 6px;}
    .msg-avatar{width:30px;height:30px;font-size:12px;}
    .chat-composer{padding:10px 10px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));}
    .composer-input.form-control{padding:11px 14px;font-size:16px;} /* 16px: iOS'ta input odaklanınca otomatik zoom'u engeller */
    .composer-send{width:40px;height:40px;}
    .modal-card{padding:20px 18px 18px;}
    .voice-bar{gap:8px;}
    .voice-btn--join, .voice-btn--leave{padding:5px 10px;font-size:12px;}
    .incoming-call{top:10px;width:94vw;}
    .incoming-call-card{padding:12px 12px;gap:9px;}
}

/* Klavye açıkken (kısa viewport) dikey boşlukları sıkılaştır, composer her zaman görünür kalsın */
@media (max-height: 480px) and (max-width: 991.98px){
    .chat-messages{padding-top:8px;padding-bottom:8px;}
    .chat-composer{padding-top:8px;padding-bottom:8px;}
    .mobile-topbar{padding:6px 14px;}
}

@supports (padding: max(0px)){
    .mobile-topbar{padding-top:max(10px, env(safe-area-inset-top, 10px));}
    .rail{padding-bottom:max(16px, env(safe-area-inset-bottom, 16px));}
}

:root, [data-bs-theme="dark"]{
    --ac-glass:rgba(24,23,31,.72);
    --ac-glass-strong:rgba(33,31,43,.78);
    --ac-glass-border:rgba(255,255,255,.12);
    --ac-glass-highlight:rgba(255,255,255,.055);
    --ac-shadow-lg:0 30px 90px rgba(0,0,0,.48);
}

.login-screen{
    background:
        radial-gradient(90% 70% at 8% 0%,rgba(124,108,242,.13),transparent 68%),
        radial-gradient(75% 65% at 100% 100%,rgba(47,214,168,.09),transparent 65%),
        radial-gradient(120% 120% at 50% 0%,#1c1a27 0%,var(--ac-bg-deepest) 60%);
}
.login-bg-orb{filter:blur(100px);opacity:.32;animation:orb-float 10s ease-in-out infinite alternate;}
.login-bg-orb--b{animation-delay:-4s;}
@keyframes orb-float{to{transform:translate3d(18px,-12px,0) scale(1.05);}}
.login-card{
    background:linear-gradient(145deg,rgba(33,31,43,.9),rgba(18,17,25,.84)) padding-box;
    -webkit-backdrop-filter:blur(24px) saturate(125%);backdrop-filter:blur(24px) saturate(125%);
    border:1px solid transparent;border-radius:24px;
    box-shadow:
        var(--ac-shadow-lg),
        -18px -14px 58px rgba(124,108,242,.075),
        18px 18px 58px rgba(47,214,168,.06),
        inset 0 1px 0 var(--ac-glass-highlight),
        inset 0 -1px 0 rgba(0,0,0,.32);
    isolation:isolate;
}
.login-card::before{
    content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;z-index:2;
    background:conic-gradient(
        from var(--login-border-angle),
        #7c6cf2 0deg,
        #b869f3 72deg,
        #ee6db5 138deg,
        #ff8b9f 190deg,
        #2fd6a8 258deg,
        #58bdf5 316deg,
        #7c6cf2 360deg
    );
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:login-border-spin 6.5s linear infinite;
}
.login-card::after{
    content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;z-index:-1;
    background:conic-gradient(
        from var(--login-border-angle),
        rgba(124,108,242,.9),rgba(238,109,181,.82),rgba(255,139,159,.78),
        rgba(47,214,168,.82),rgba(88,189,245,.78),rgba(124,108,242,.9)
    );
    filter:blur(15px);opacity:.14;
    animation:login-border-spin 6.5s linear infinite;
}
@property --login-border-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}
@keyframes login-border-spin{to{--login-border-angle:360deg;}}
.login-card .btn-primary{
    background:linear-gradient(110deg,#7867f3,#9369f1 54%,#b968df);
    background-size:180% 100%;border-color:rgba(255,255,255,.13);
}
.login-card .btn-primary:hover{
    background:linear-gradient(110deg,#8878f7,#a774f4 54%,#cb74e4);
    background-size:180% 100%;
}
.brand-mark{
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 10px 24px rgba(124,108,242,.2),inset 0 1px 0 rgba(255,255,255,.28);
}
.field-input.form-control{
    background:rgba(10,9,15,.54);border-color:var(--ac-glass-border);border-radius:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.12);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field-input.form-control:focus{
    background:rgba(12,11,18,.72);
    box-shadow:0 0 0 3px var(--ac-accent-soft),0 12px 28px rgba(0,0,0,.2);
}
.btn-primary{
    border-radius:11px;
    box-shadow:0 10px 24px rgba(124,108,242,.24),inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(124,108,242,.3),inset 0 1px 0 rgba(255,255,255,.28);}
.btn-primary:active{transform:translateY(0);box-shadow:0 6px 16px rgba(124,108,242,.22),inset 0 1px 0 rgba(255,255,255,.18);}

.mobile-topbar,.chat-header,.voice-bar{
    background:var(--ac-glass);border-color:var(--ac-glass-border);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.rail{
    background:rgba(17,16,23,.86);border-color:var(--ac-glass-border);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:10px 0 34px rgba(0,0,0,.12);
}
.rail-item{
    border:1px solid rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 16px rgba(0,0,0,.14);
    transition:border-radius .18s ease,background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.rail-item:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(124,108,242,.25);}
.channel-sidebar{
    background:rgba(24,23,31,.82);border-color:var(--ac-glass-border);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:12px 0 34px rgba(0,0,0,.1);
}
.channel-item--active{
    border:1px solid rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.12);
}
.me-chip{
    background:var(--ac-glass-strong);border:1px solid rgba(255,255,255,.07);border-radius:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.14);
}
.chat-main{background:radial-gradient(90% 65% at 100% 100%,rgba(47,214,168,.035),transparent 68%),var(--ac-bg-deepest);}
.composer-input.form-control{
    background:var(--ac-glass-strong);border-color:var(--ac-glass-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.14);
}
.composer-send{
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 24px rgba(124,108,242,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
.incoming-call-card{
    background:rgba(33,31,43,.82);border-color:rgba(242,184,76,.72);border-radius:16px;
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    box-shadow:0 20px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07);
}
.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.modal-card{
    background:linear-gradient(145deg,rgba(40,38,53,.86),rgba(24,23,31,.82));border-color:var(--ac-glass-border);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:var(--ac-shadow-lg),inset 0 1px 0 var(--ac-glass-highlight);
}

@media (prefers-reduced-motion:reduce){
    .login-bg-orb{animation:none;}
    .btn-primary,.rail-item{transition:none;}
}

.channel-sidebar-header{
    padding-top:20px;
    letter-spacing:.1em;
}
.badge-count{
    min-width:28px;text-align:center;
    background:rgba(124,108,242,.13);
    border:1px solid rgba(124,108,242,.16);
    color:var(--ac-text-secondary);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.channel-item{
    position:relative;
    border:1px solid transparent;
    border-radius:11px;
    transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.channel-item:hover{
    border-color:rgba(255,255,255,.055);
    transform:translateX(1px);
}
.channel-item--active{
    background:linear-gradient(105deg,rgba(124,108,242,.16),rgba(255,255,255,.035));
    border-color:rgba(153,143,245,.17);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 22px rgba(0,0,0,.12);
}
.channel-item--active::before{
    content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:2px;
    background:linear-gradient(var(--ac-accent),var(--ac-mint));
    box-shadow:0 0 10px rgba(124,108,242,.42);
}
.channel-item--active .channel-item-hash{text-shadow:0 0 12px rgba(47,214,168,.3);}
.channel-item-lock{filter:drop-shadow(0 0 7px rgba(242,184,76,.22));}

.channel-sidebar-footer{
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.08));
}
.me-chip{
    border-color:rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 28px rgba(0,0,0,.16);
}
.me-avatar{
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 6px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16);
}
.me-status{display:inline-flex;align-items:center;gap:5px;}
.me-status::before{
    content:"";width:5px;height:5px;border-radius:50%;background:var(--ac-mint);
    box-shadow:0 0 8px rgba(47,214,168,.62);
}

.voice-bar{
    min-height:64px;
    background:linear-gradient(90deg,rgba(26,25,35,.82),rgba(24,23,31,.66));
    box-shadow:0 10px 30px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.025);
}
.voice-bar-icon{
    width:27px;height:27px;align-items:center;justify-content:center;border-radius:9px;
    background:rgba(47,214,168,.09);border:1px solid rgba(47,214,168,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.voice-btn--join{
    background:linear-gradient(135deg,#36dbb0,var(--ac-mint));
    border-color:rgba(255,255,255,.12);
    box-shadow:0 8px 20px rgba(47,214,168,.18),inset 0 1px 0 rgba(255,255,255,.28);
}
.voice-btn--join:hover{
    background:linear-gradient(135deg,#43e5bb,#35dcb0);
    transform:translateY(-1px);
    box-shadow:0 11px 24px rgba(47,214,168,.23),inset 0 1px 0 rgba(255,255,255,.3);
}

.chat-messages{
    background:
        radial-gradient(70% 55% at 50% 0%,rgba(124,108,242,.025),transparent 70%),
        radial-gradient(50% 45% at 100% 100%,rgba(47,214,168,.02),transparent 70%);
}
.msg-row--system .msg-text{
    padding:5px 12px;border-radius:999px;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(255,255,255,.025);
}
.chat-composer{
    background:linear-gradient(180deg,transparent,rgba(17,16,23,.76) 42%);
}
.composer-input.form-control{
    border-radius:16px;
    background:linear-gradient(110deg,rgba(35,33,46,.86),rgba(28,27,37,.78));
    border-color:rgba(255,255,255,.115);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.17);
}
.composer-input.form-control:hover{border-color:rgba(255,255,255,.17);}
.composer-input.form-control:focus{
    background:linear-gradient(110deg,rgba(38,36,50,.92),rgba(30,29,40,.88));
    border-color:rgba(124,108,242,.72);
    box-shadow:0 0 0 3px rgba(124,108,242,.11),0 16px 38px rgba(0,0,0,.2);
}
.composer-send{
    background:linear-gradient(145deg,#8b7cf6,#6f5eea);
    box-shadow:0 12px 28px rgba(124,108,242,.28),inset 0 1px 0 rgba(255,255,255,.25);
}
.composer-send:hover{
    background:linear-gradient(145deg,#978afa,#7b6af1);
    transform:translateY(-1px);
    box-shadow:0 15px 32px rgba(124,108,242,.34),inset 0 1px 0 rgba(255,255,255,.28);
}

.loading-screen{
    position:fixed;inset:0;z-index:1200;overflow:hidden;
    min-height:100vh;min-height:100dvh;
    background:
        radial-gradient(70% 65% at 16% 5%,rgba(124,108,242,.14),transparent 70%),
        radial-gradient(60% 55% at 88% 96%,rgba(47,214,168,.1),transparent 72%),
        var(--ac-bg-deepest);
    opacity:1;transition:opacity .32s ease,visibility .32s ease;
}
.loading-screen--out{opacity:0;visibility:hidden;pointer-events:none;}
.loading-bg-orb,.error-bg-orb{
    position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;
}
.loading-bg-orb--a{width:340px;height:340px;left:-120px;top:-130px;background:rgba(124,108,242,.24);}
.loading-bg-orb--b{width:320px;height:320px;right:-120px;bottom:-140px;background:rgba(47,214,168,.18);}
.loading-content{position:relative;width:min(270px,78vw);text-align:center;}
.loading-brand{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:28px;}
.loading-brand-mark{width:42px;height:42px;border-radius:13px;animation:loading-mark 1.8s ease-in-out infinite;}
.loading-brand .brand-name{font-size:22px;}
.loading-track{
    position:relative;height:4px;overflow:hidden;border-radius:99px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.045);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.12);
}
.loading-track span{
    position:absolute;inset:-1px auto -1px 0;width:42%;border-radius:inherit;
    background:linear-gradient(90deg,var(--ac-accent),#9183f7,var(--ac-mint));
    box-shadow:0 0 18px rgba(124,108,242,.38);
    animation:loading-progress 1.25s cubic-bezier(.65,0,.35,1) infinite;
}
.loading-label{
    margin:12px 0 0;color:var(--ac-text-muted);font-size:11px;font-weight:600;
    letter-spacing:.11em;text-transform:uppercase;
}
@keyframes loading-progress{0%{transform:translateX(-115%);}100%{transform:translateX(350%);}}
@keyframes loading-mark{0%,100%{transform:translateY(0);box-shadow:0 10px 24px rgba(124,108,242,.2),inset 0 1px 0 rgba(255,255,255,.28);}50%{transform:translateY(-3px);box-shadow:0 16px 32px rgba(124,108,242,.3),inset 0 1px 0 rgba(255,255,255,.32);}}

.me-badges{min-width:0;align-content:center;}
.me-badge{
    display:inline-flex;align-items:center;max-width:100%;min-height:22px;
    padding:3px 8px;border-radius:7px;border:1px solid transparent;
    transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.me-badge--name{
    width:max-content;font-size:12.5px;line-height:1.2;
    background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.065);
    color:var(--ac-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.me-badge--name:hover{
    background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.11);
    color:#fff;
}
.me-badge--status{
    width:max-content;font-size:10.5px;line-height:1.2;
    background:rgba(47,214,168,.085);border-color:rgba(47,214,168,.11);
    color:var(--ac-mint);
}
.me-badge--status:hover{
    background:rgba(47,214,168,.15);border-color:rgba(47,214,168,.2);
    color:#55e1bb;
}
.me-badge--status::before{width:5px;height:5px;flex:0 0 5px;}

.error-screen{
    position:relative;display:flex;align-items:center;justify-content:center;
    min-height:100vh;min-height:100dvh;padding:28px;overflow:hidden;box-sizing:border-box;
    background:
        radial-gradient(75% 70% at 10% 0%,rgba(124,108,242,.14),transparent 68%),
        radial-gradient(65% 60% at 100% 100%,rgba(47,214,168,.1),transparent 70%),
        var(--ac-bg-deepest);
}
.error-bg-orb--a{width:420px;height:420px;left:-190px;top:-180px;background:rgba(124,108,242,.2);}
.error-bg-orb--b{width:380px;height:380px;right:-170px;bottom:-170px;background:rgba(47,214,168,.16);}
.error-card{
    position:relative;width:min(460px,92vw);padding:34px;text-align:center;overflow:hidden;
    background:linear-gradient(145deg,rgba(33,31,43,.82),rgba(18,17,25,.72));
    border:1px solid var(--ac-glass-border);border-radius:26px;
    -webkit-backdrop-filter:blur(24px) saturate(125%);backdrop-filter:blur(24px) saturate(125%);
    box-shadow:var(--ac-shadow-lg),inset 0 1px 0 var(--ac-glass-highlight);
}
.error-card::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 28%,transparent 72%,rgba(47,214,168,.03));
}
.error-brand{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:23px;}
.error-brand-mark{width:36px;height:36px;border-radius:11px;}
.error-brand .brand-name{font-size:18px;color:var(--ac-text);}
.error-code{
    position:relative;display:flex;align-items:center;justify-content:center;gap:7px;
    font-family:var(--font-display);font-size:84px;font-weight:800;line-height:1;
    letter-spacing:-.07em;color:var(--ac-text);
    text-shadow:0 18px 50px rgba(0,0,0,.34);
}
.error-code-orb{
    width:57px;height:57px;margin:0 2px;border-radius:18px;
    background:linear-gradient(135deg,var(--ac-accent),var(--ac-mint));
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 14px 34px rgba(124,108,242,.25),inset 0 1px 0 rgba(255,255,255,.28);
    transform:rotate(10deg);
}
.error-title{position:relative;margin:18px 0 8px;font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--ac-text);}
.error-copy{position:relative;max-width:345px;margin:0 auto 24px;color:var(--ac-text-secondary);font-size:13.5px;line-height:1.6;}
.error-home{
    position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 16px;border-radius:11px;text-decoration:none;font-size:13.5px;font-weight:700;
    color:#fff;background:linear-gradient(145deg,#8b7cf6,#6f5eea);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 12px 28px rgba(124,108,242,.25),inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.error-home:hover{
    color:#fff;background:linear-gradient(145deg,#978afa,#7b6af1);transform:translateY(-1px);
    box-shadow:0 16px 34px rgba(124,108,242,.32),inset 0 1px 0 rgba(255,255,255,.28);
}
.error-hint{position:relative;display:block;margin-top:17px;color:var(--ac-text-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;}

@media (max-width:480px){
    .error-card{padding:28px 20px;border-radius:22px;}
    .error-code{font-size:68px;}
    .error-code-orb{width:47px;height:47px;border-radius:15px;}
    .me-badge{padding-left:7px;padding-right:7px;}
}
@media (prefers-reduced-motion:reduce){
    .loading-brand-mark,.loading-track span{animation:none;}
    .loading-track span{left:29%;}
    .loading-screen{transition:none;}
}

@media (max-width:991.98px){
    :root{
        --mobile-topbar-h:calc(56px + env(safe-area-inset-top,0px));
        --mobile-rail-w:60px;
        --mobile-drawer-w:min(300px,calc(100vw - var(--mobile-rail-w) - 16px));
    }
    .mobile-topbar{
        position:relative;z-index:60;width:100%;height:var(--mobile-topbar-h);min-height:var(--mobile-topbar-h);
        padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;box-sizing:border-box;
        background:rgba(20,19,27,.88);border-bottom-color:rgba(255,255,255,.09);
        box-shadow:0 8px 28px rgba(0,0,0,.18);
    }
    .mobile-menu-btn{
        position:relative;z-index:2;width:38px;height:38px;flex:0 0 38px;border:1px solid transparent;
    }
    .mobile-menu-btn:hover,.mobile-menu-btn[aria-expanded="true"]{
        background:rgba(124,108,242,.11);border-color:rgba(124,108,242,.16);color:#fff;
    }
    .mobile-menu-btn[aria-expanded="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 7px 18px rgba(0,0,0,.14);}
    .mobile-brand{
        position:absolute;left:50%;top:calc(50% + env(safe-area-inset-top,0px)/2);transform:translate(-50%,-50%);
        font-family:var(--font-display);font-size:13px;font-weight:800;line-height:1;
        letter-spacing:.085em;text-transform:uppercase;color:var(--ac-text);white-space:nowrap;
        pointer-events:none;
    }
    .mobile-brand span{color:var(--ac-mint);}
    .mobile-channel-context{
        position:relative;z-index:2;width:min(29vw,108px);min-width:0;justify-content:flex-end;
    }
    .mobile-channel-name{
        max-width:78px;padding:4px 7px;border-radius:7px;
        background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);
        color:var(--ac-text-secondary);font-size:10.5px;font-weight:600;
    }
    .mobile-channel-context .member-pill{margin-left:0;font-size:9px;}
    .mobile-channel-context .lock-pill{margin-left:0;padding:3px 5px;}
    .mobile-channel-context .icon-btn{width:28px;height:28px;}

    .app-body{position:relative;width:100%;min-width:0;}
    .chat-main{width:100%;min-width:0;}
    .chat-messages{width:100%;box-sizing:border-box;}
    .chat-composer{width:100%;min-width:0;box-sizing:border-box;}
    .composer-input.form-control{min-width:0;width:100%;}
    .composer-send{position:relative;z-index:1;}

    .rail{
        left:0;top:var(--mobile-topbar-h);bottom:0;width:var(--mobile-rail-w);z-index:50;
        padding:12px 0;gap:9px;box-sizing:border-box;
        background:rgba(15,14,21,.96);border-right-color:rgba(255,255,255,.08);
        transform:translateX(-102%);transition:transform .24s cubic-bezier(.22,1,.36,1);
        box-shadow:none;
    }
    .rail-item{width:42px;height:42px;border-radius:13px;}
    .rail-item:hover,.rail-item--active{border-radius:12px;}
    .rail-divider{width:24px;}
    .channel-sidebar{
        left:var(--mobile-rail-w);top:var(--mobile-topbar-h);bottom:0;width:var(--mobile-drawer-w);z-index:50;
        background:linear-gradient(145deg,rgba(28,27,37,.98),rgba(20,19,27,.97));
        border-right-color:rgba(255,255,255,.1);
        transform:translateX(calc(-100% - var(--mobile-rail-w)));
        transition:transform .24s cubic-bezier(.22,1,.36,1);
        box-shadow:none;
    }
    .channel-sidebar-header{min-height:54px;padding:17px 15px 10px;box-sizing:border-box;}
    .channel-list{padding:6px 10px 12px;}
    .channel-sidebar-footer{padding:10px;border-top-color:rgba(255,255,255,.075);}
    .me-chip{padding:8px;}
    .sidebar-overlay{
        display:block;top:var(--mobile-topbar-h);z-index:40;
        background:rgba(7,6,11,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
        opacity:0;visibility:hidden;pointer-events:none;
        transition:opacity .2s ease,visibility .2s ease;
    }
    .app-shell.nav-open .rail,.app-shell.nav-open .channel-sidebar{transform:translateX(0);}
    .app-shell.nav-open .channel-sidebar{box-shadow:20px 0 50px rgba(0,0,0,.34);}
    .app-shell.nav-open .sidebar-overlay{opacity:1;visibility:visible;pointer-events:auto;}
}

@media (max-width:380px){
    .mobile-brand{font-size:12px;letter-spacing:.065em;}
    .mobile-channel-context{width:82px;}
    .mobile-channel-name{max-width:66px;padding-left:6px;padding-right:6px;}
    .channel-sidebar-footer{padding:8px;}
    .me-badge--status{font-size:10px;}
}

@media (max-width:480px){
    .login-card{
        box-shadow:
            0 24px 64px rgba(0,0,0,.43),
            -10px -10px 38px rgba(124,108,242,.065),
            10px 12px 38px rgba(47,214,168,.05),
            inset 0 1px 0 var(--ac-glass-highlight),
            inset 0 -1px 0 rgba(0,0,0,.3);
    }
}
@media (prefers-reduced-motion:reduce){
    .login-card::before,.login-card::after{animation:none;--login-border-angle:135deg;}
}