:root{
    --blue:#3EAFFD;
    --accent-d:color-mix(in srgb, var(--blue) 80%, #064F8F);
    --green:#3FC65B;
    --ink:#132A3F;
    --muted:#7E93A8;
    --bg:#fff;
    --bg2:#fff;
    --panel:#fff;
    --rail:#fff;
    --wall1:#F1F9FF;
    --wall2:#E6F2FD;
    --bubble-in:#fff;
    --tint:color-mix(in srgb, var(--blue) 15%, white);
    --tint-soft:color-mix(in srgb, var(--blue) 7%, white);
    --line:color-mix(in srgb, var(--blue) 13%, #EEF3F8);
    --ring:color-mix(in srgb, var(--blue) 20%, transparent);
    --shadow:color-mix(in srgb, var(--blue) 45%, transparent);
    --hover:var(--tint-soft);
    --in-meta:#8CA2B5;
    --pill:color-mix(in srgb, var(--ink) 18%, transparent);
    --ov:rgba(19,42,63,.4);
    --card-sh:0 3px 12px -6px rgba(19,42,63,.18);
    --sheet-sh:0 40px 90px -25px rgba(19,42,63,.5);
}

body.dark{
    --ink:#EAF2FA;
    --muted:#7F93A6;
    --bg:#0E1621;
    --bg2:#17212B;
    --panel:#17212B;
    --rail:#101A24;
    --wall1:#0E1621;
    --wall2:#131E2A;
    --bubble-in:#182533;
    --tint:color-mix(in srgb, var(--blue) 24%, #17212B);
    --tint-soft:color-mix(in srgb, var(--blue) 11%, #17212B);
    --line:rgba(255,255,255,.07);
    --ring:color-mix(in srgb, var(--blue) 30%, transparent);
    --hover:rgba(255,255,255,.05);
    --in-meta:#6E8296;
    --pill:rgba(0,0,0,.32);
    --ov:rgba(0,0,0,.6);
    --card-sh:0 3px 12px -6px rgba(0,0,0,.5);
    --sheet-sh:0 40px 90px -25px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
    font-family:'Golos Text',sans-serif;
    background:var(--bg);
    color:var(--ink);
    overflow:hidden;
    transition:background .25s,color .25s;
}

::selection{background:color-mix(in srgb, var(--blue) 35%, transparent)}
button{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}

img.emo{
    display:inline-block;
    object-fit:contain;
    vertical-align:-.18em;
    flex:none;
}

.emo-native{
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

.status-badge{
    width:22px;
    height:22px;
    flex:0 0 22px;
    vertical-align:-5px;
    display:inline-block;
    object-fit:contain;
}

/* ================= AUTH ================= */

.auth{
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    background:var(--bg);
    transition:opacity .45s;
    padding:24px;
}

.auth.hide{opacity:0;pointer-events:none}

.auth-wrap{
    width:min(360px,100%);
    text-align:center;
    animation:rise .5s ease;
}

.a-logo{
    width:64px;
    height:64px;
    margin:0 auto;
    object-fit:contain;
    animation:bob 6s ease-in-out infinite;
}

.auth-wrap h1{
    font-family:'Unbounded';
    font-size:26px;
    font-weight:700;
    margin:14px 0 6px;
    letter-spacing:-.02em;
}

.a-sub{
    color:var(--muted);
    font-size:13.5px;
    margin:0 0 22px;
}

.seg-tabs{
    display:flex;
    background:var(--tint-soft);
    border-radius:12px;
    padding:4px;
    gap:4px;
    margin-bottom:8px;
}

.seg-tab{
    flex:1;
    padding:9px;
    border:none;
    background:none;
    border-radius:9px;
    font:inherit;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    transition:.2s;
}

.seg-tab.active{
    background:var(--bg2);
    color:var(--blue);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.lbl{
    display:block;
    font-size:12.5px;
    font-weight:700;
    color:var(--blue);
    margin:14px 0 6px;
    text-align:left;
}

.inp{
    width:100%;
    border:1.5px solid var(--line);
    border-radius:11px;
    padding:11px 13px;
    font:inherit;
    font-size:14.5px;
    color:var(--ink);
    background:var(--bg2);
    outline:none;
    transition:.2s;
}

.inp:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px var(--ring);
}

.inp.err{
    border-color:#F0616D;
    box-shadow:0 0 0 3px rgba(240,97,109,.15);
}

.pw-wrap{position:relative}

.pw-eye{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    color:var(--muted);
    cursor:pointer;
    padding:6px;
    border-radius:8px;
    display:grid;
    place-items:center;
}

.pw-eye:hover{color:var(--blue)}

.pw-eye svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    display:block;
}

.btn-p{
    width:100%;
    border:none;
    background:var(--blue);
    color:#fff;
    font:inherit;
    font-weight:700;
    font-size:15px;
    padding:13px;
    border-radius:12px;
    cursor:pointer;
    transition:.18s;
    box-shadow:0 10px 22px -10px var(--shadow);
    margin-top:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.btn-p:hover{
    background:var(--accent-d);
    transform:translateY(-1px);
}

.btn-p:disabled{
    opacity:.75;
    cursor:wait;
    transform:none;
}

.spinner{
    width:16px;
    height:16px;
    border:2.5px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.form-err{
    color:#F0616D;
    font-size:13px;
    font-weight:600;
    min-height:19px;
    margin-top:10px;
    text-align:left;
}

.auth-hint{
    margin:18px 0 0;
    font-size:12px;
    color:var(--muted);
}

.shake{animation:shake .35s ease 2}

/* ================= APP ================= */

.app{display:none;height:100vh}
.app.ready{display:flex;animation:appIn .45s ease}

@keyframes appIn{
    from{opacity:0;transform:scale(.99)}
    to{opacity:1;transform:none}
}

/* ================= RAIL ================= */

.rail{
    width:92px;
    flex:0 0 92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 0 14px;
    border-right:1px solid var(--line);
    background:var(--rail);
    gap:6px;
    transition:background .25s;
}

.rail-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:100%;
}

.rail-bottom{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding-top:34px;
}

.rail-divider{
    width:28px;
    height:3px;
    border-radius:99px;
    background:var(--line);
    margin-bottom:10px;
}

.rail-item{
    position:relative;
    width:68px;
    padding:9px 4px 7px;
    border-radius:16px;
    border:none;
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    color:var(--muted);
    cursor:pointer;
    transition:background .2s,color .2s,transform .2s;
    animation:rise .45s ease both;
}

.rail-item span{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.02em;
    line-height:1.2;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.rail-item:hover{
    background:var(--hover);
    color:var(--blue);
    transform:translateY(-2px);
}

.rail-item.active{
    background:var(--tint);
    color:var(--blue);
}

.ico{
    width:26px;
    height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ico.sm{width:20px;height:20px}

.folder .f{
    fill:color-mix(in srgb, var(--blue) 12%, transparent);
    transition:fill .2s;
}

.folder:hover .f{fill:color-mix(in srgb, var(--blue) 22%, transparent)}
.folder.active .f{fill:color-mix(in srgb, var(--blue) 32%, transparent)}

.rbadge{
    position:absolute;
    top:3px;
    right:9px;
    font-style:normal;
    font-size:9.5px;
    font-weight:700;
    background:var(--blue);
    color:#fff;
    border-radius:999px;
    padding:1px 5px;
    line-height:1.4;
}

.plus{
    width:26px;
    height:26px;
    border:1.6px dashed var(--blue);
    border-radius:9px;
    display:grid;
    place-items:center;
    color:var(--blue);
    transition:all .25s;
}

.plus svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}

.add-folder:hover .plus{
    background:var(--blue);
    color:#fff;
    transform:rotate(90deg);
}

.add-folder.disabled{
    opacity:.45;
    cursor:not-allowed;
}

.add-folder.disabled:hover{
    transform:none;
    background:transparent;
    color:var(--muted);
}

.add-folder.disabled .plus{
    border-style:solid;
    border-color:var(--muted);
    color:var(--muted);
}

/* ================= CHATS ================= */

.chats{
    width:360px;
    flex:0 0 360px;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    background:var(--panel);
    position:relative;
    transition:background .25s;
}

.chats-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border-bottom:1px solid var(--line);
}

.ibtn{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:50%;
    border:none;
    background:transparent;
    color:var(--muted);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:all .18s;
}

.ibtn:hover{
    background:var(--hover);
    color:var(--blue);
}

.ibtn svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.search{
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--tint-soft);
    border:1px solid transparent;
    border-radius:11px;
    padding:8px 11px;
    transition:all .2s;
    min-width:0;
}

.search:focus-within{
    background:var(--bg2);
    border-color:var(--blue);
    box-shadow:0 0 0 3px var(--ring);
}

.search svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:var(--muted);
    stroke-width:1.8;
    stroke-linecap:round;
    flex:0 0 16px;
}

.search input{
    border:none;
    background:none;
    outline:none;
    flex:1;
    font:inherit;
    font-size:13.5px;
    color:var(--ink);
    min-width:0;
}

.search input::placeholder{color:var(--muted)}

.stories{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    overflow-x:auto;
    scrollbar-width:none;
}

.stories::-webkit-scrollbar{display:none}

.sitem{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    border:none;
    background:none;
    cursor:pointer;
    padding:2px;
    color:var(--ink);
    animation:rise .4s ease both;
    flex:0 0 auto;
}

.sring{
    width:54px;
    height:54px;
    border-radius:50%;
    padding:2.5px;
    display:grid;
    place-items:center;
    transition:transform .15s;
}

.sitem:hover .sring{transform:scale(1.07)}

.sring.ring{background:conic-gradient(var(--green) 0 100%)}
.sring.seen{background:color-mix(in srgb, var(--muted) 45%, transparent)}

.sring.me{
    background:none;
    border:2px dashed color-mix(in srgb, var(--blue) 55%, transparent);
    padding:0;
}

.sav{
    width:100%;
    height:100%;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:700;
    font-size:14px;
    color:#fff;
    background:var(--blue);
    border:2.5px solid var(--panel);
}

.sitem.me .sav{
    background:var(--tint);
    color:var(--blue);
    font-size:20px;
    border-color:transparent;
}

.sitem.me .sav svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}

.sname{
    font-size:10.5px;
    font-weight:600;
    color:var(--muted);
    max-width:58px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sitem.me .sname{color:var(--blue)}

.sdiv{
    width:1px;
    height:46px;
    background:var(--line);
    flex:0 0 1px;
}

.chat-list{
    flex:1;
    overflow-y:auto;
    padding:8px;
    padding-bottom:84px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.chat-list::-webkit-scrollbar{width:5px}
.chat-list::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--blue) 25%, transparent);
    border-radius:99px;
}

.chat{
    display:flex;
    gap:11px;
    align-items:center;
    padding:9px 10px;
    border-radius:12px;
    cursor:pointer;
    transition:background .15s;
    animation:rise .3s ease both;
}

.chat:hover{background:var(--hover)}
.chat.active{background:var(--blue)}

.cbody{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.crow1{
    display:flex;
    align-items:center;
    gap:6px;
}

.crow1 b{
    flex:1;
    font-size:14.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ctime{
    font-size:11.5px;
    color:var(--muted);
    flex:0 0 auto;
}

.mini-ico{
    width:13px;
    height:13px;
    fill:none;
    stroke:var(--muted);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 13px;
}

.chat.active .mini-ico{stroke:rgba(255,255,255,.85)}

.crow2{
    display:flex;
    align-items:center;
    gap:8px;
}

.clast{
    flex:1;
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.badge{
    min-width:21px;
    height:21px;
    padding:0 6px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-style:normal;
    font-size:11.5px;
    font-weight:700;
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.chat.active b{color:#fff}
.chat.active .ctime,
.chat.active .clast{color:rgba(255,255,255,.85)}
.chat.active .badge{background:#fff;color:var(--blue)}

.av{
    position:relative;
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:700;
    font-size:15px;
    color:#fff;
    letter-spacing:.02em;
}

.av.solid{background:var(--blue)}
.av.grad{
    background:linear-gradient(
        135deg,
        var(--blue),
        color-mix(in srgb,var(--blue) 45%,white)
    );
}

.av.tint{
    background:var(--tint);
    color:var(--blue);
}

.av .on{
    position:absolute;
    right:1px;
    bottom:1px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--green);
    border:2px solid var(--panel);
    animation:ping 2s infinite;
}

.av .tbadge{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--blue);
    border:2px solid var(--panel);
    display:grid;
    place-items:center;
}

.av .tbadge svg{
    width:10px;
    height:10px;
    fill:none;
    stroke:#fff;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.vcheck{
    width:15px;
    height:15px;
    color:var(--blue);
    vertical-align:-2px;
    flex:0 0 15px;
}

.empty{
    margin:auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:30px;
    animation:rise .5s ease both;
}

.empty-bubbles{
    width:118px;
    height:118px;
    margin-bottom:10px;
}

.empty-bubbles circle{
    fill:color-mix(in srgb, var(--blue) 12%, transparent);
    stroke:color-mix(in srgb, var(--blue) 45%, transparent);
    stroke-width:2;
    transform-box:fill-box;
    transform-origin:center;
    animation:bob 5s ease-in-out infinite;
}

.empty-bubbles .b2{animation-delay:-1.2s}
.empty-bubbles .b3{animation-delay:-2.4s}
.empty-bubbles .b4{animation-delay:-3.1s}

.empty b{
    font-family:'Unbounded';
    font-weight:500;
    font-size:15px;
    color:var(--blue);
}

.empty span{
    font-size:12.5px;
    color:var(--muted);
}

.fab{
    position:absolute;
    right:16px;
    bottom:16px;
    z-index:6;
    width:54px;
    height:54px;
    border-radius:50%;
    border:none;
    background:var(--blue);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 12px 26px -8px var(--shadow);
    transition:.2s;
}

.fab:hover{transform:scale(1.09) rotate(-8deg)}

.fab svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ================= THREAD ================= */

.thread{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    transition:background .25s;
}

.wall{
    background:linear-gradient(180deg,var(--wall1),var(--wall2));
    transition:background .25s;
}

.placeholder{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.placeholder .logo{
    width:88px;
    height:88px;
    object-fit:contain;
    animation:bob 6s ease-in-out infinite;
}

.pill{
    background:var(--pill);
    color:#fff;
    font-size:14px;
    font-weight:500;
    padding:9px 18px;
    border-radius:999px;
}

.conversation{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
    animation:convIn .28s ease;
}

@keyframes convIn{
    from{opacity:0;transform:translateX(14px)}
    to{opacity:1;transform:none}
}

.conv-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    transition:background .25s;
}

.conv-head .av{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:13px;
}

.ch-info{
    flex:1;
    min-width:0;
    cursor:default;
}

.ch-info b{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
}

.ch-status{
    font-size:12.5px;
    color:var(--muted);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ch-status.online{color:var(--blue)}

.ch-actions{
    display:flex;
    gap:2px;
    align-items:center;
}

.discuss-btn{
    border:1px solid var(--line);
    background:var(--bg2);
    color:var(--blue);
    border-radius:999px;
    padding:7px 13px;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.discuss-btn:hover{
    border-color:var(--blue);
    background:var(--tint-soft);
}

.discuss-btn svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.back-btn{display:none}

.pinbar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 18px;
    background:var(--bg2);
    border-bottom:1px solid var(--line);
    font-size:13px;
    cursor:pointer;
    transition:background .15s;
}

.pinbar:hover{background:var(--tint-soft)}

.pinbar svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:var(--blue);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 15px;
}

.pinbar .pt{
    flex:1;
    min-width:0;
}

.pinbar b{
    color:var(--blue);
    font-size:11.5px;
    display:block;
}

.pinbar span{
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}

.pinbar .ibtn{
    width:28px;
    height:28px;
    flex-basis:28px;
}

.pinbar .ibtn svg{stroke:var(--muted)}

.messages{
    flex:1;
    overflow-y:auto;
    padding:22px clamp(16px,8%,120px);
    display:flex;
    flex-direction:column;
    gap:8px;
    scroll-behavior:smooth;
}

.messages::-webkit-scrollbar{width:5px}
.messages::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--blue) 25%, transparent);
    border-radius:99px;
}

.day{
    align-self:center;
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:5px 13px;
    border-radius:999px;
    margin:6px 0;
    background:var(--pill);
}

.msg{
    max-width:min(68%,540px);
    padding:7px 11px 6px;
    border-radius:14px;
    font-size:14.5px;
    line-height:1.42;
    animation:pop .25s ease both;
    cursor:default;
}

.msg p{margin:0}

.msg.in{
    align-self:flex-start;
    background:var(--bubble-in);
    border-bottom-left-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.msg.out{
    align-self:flex-end;
    background:var(--blue);
    color:#fff;
    border-bottom-right-radius:4px;
}

.msg.pinned-hl{
    outline:2px solid color-mix(in srgb, var(--blue) 55%, transparent);
    outline-offset:1px;
}

.msg.flash{animation:flash 1s ease}

.meta{
    float:right;
    margin:8px -2px -3px 12px;
    font-size:11px;
    display:flex;
    align-items:center;
    gap:3px;
}

.msg.in .meta{color:var(--in-meta)}
.msg.out .meta{color:rgba(255,255,255,.8)}

.meta svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sender{
    font-size:12.5px;
    font-weight:700;
    display:block;
    margin-bottom:2px;
}

.fwd-label{
    font-size:11.5px;
    font-weight:600;
    color:var(--blue);
    margin-bottom:3px;
}

.msg.out .fwd-label{color:rgba(255,255,255,.92)}

.reply-quote{
    border-left:3px solid var(--blue);
    background:color-mix(in srgb, var(--blue) 10%, transparent);
    border-radius:6px;
    padding:4px 9px;
    margin-bottom:5px;
    font-size:12.5px;
}

.msg.out .reply-quote{
    border-color:#fff;
    background:rgba(255,255,255,.16);
}

.reply-quote b{
    display:block;
    font-size:11.5px;
    color:var(--blue);
}

.msg.out .reply-quote b{color:#fff}

.reply-quote span{
    opacity:.85;
    display:block;
    max-width:280px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.msg-img{
    max-width:250px;
    max-height:250px;
    border-radius:10px;
    display:block;
    margin-bottom:4px;
    object-fit:cover;
}

.composer{
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:10px clamp(16px,8%,120px) 18px;
    position:relative;
}

.cwrap{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.replybar{
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 10px;
    border-left:3px solid var(--blue);
    background:var(--tint-soft);
    border-radius:0 10px 10px 0;
    font-size:12.5px;
    animation:rise .2s ease;
}

.replybar .rt{
    flex:1;
    min-width:0;
}

.replybar b{
    color:var(--blue);
    display:block;
    font-size:11.5px;
}

.replybar span{
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}

.replybar .ibtn{
    width:26px;
    height:26px;
    flex-basis:26px;
}

.replybar .ibtn svg{
    width:14px;
    height:14px;
}

.cbar{
    display:flex;
    align-items:center;
    gap:2px;
    background:var(--bg2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:5px 8px;
    box-shadow:var(--card-sh);
    transition:all .2s;
}

.cbar:focus-within{
    border-color:var(--blue);
    box-shadow:0 0 0 3px var(--ring);
}

.cbar input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:none;
    font:inherit;
    font-size:14.5px;
    padding:8px 6px;
    color:var(--ink);
}

.cbar input::placeholder{color:var(--muted)}

.send{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:50%;
    border:none;
    background:var(--blue);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:all .18s;
    box-shadow:0 8px 18px -8px var(--shadow);
}

.send:hover{
    background:var(--accent-d);
    transform:scale(1.06);
}

.send:active{transform:scale(.9)}

.send:disabled{
    opacity:.45;
    cursor:default;
    transform:none;
    box-shadow:none;
}

.send svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:translateX(1px);
}

.ch-bar{display:flex}

.ch-bar button{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:var(--bg2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    color:var(--blue);
    cursor:pointer;
    transition:.15s;
}

.ch-bar button:hover{
    background:var(--tint-soft);
    border-color:var(--blue);
}

.ch-bar svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.blocked-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--bg2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 14px;
    font-size:13.5px;
    color:var(--muted);
}

.blocked-bar .bb-text{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.blocked-bar svg{
    width:16px;
    height:16px;
    flex:0 0 16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

#unblockConvBtn{
    border:none;
    background:var(--blue);
    color:#fff;
    border-radius:10px;
    padding:9px 15px;
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
    flex:0 0 auto;
}

#unblockConvBtn:hover{background:var(--accent-d)}

.emoji-pop{
    position:absolute;
    bottom:calc(100% + 6px);
    left:0;
    width:min(330px,86vw);
    background:var(--bg2);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--sheet-sh);
    padding:10px;
    display:none;
    z-index:25;
}

.emoji-pop.open{
    display:block;
    animation:rise .18s ease;
}

.ep-tabs{
    display:flex;
    gap:2px;
    margin-bottom:8px;
    overflow-x:auto;
    scrollbar-width:none;
}

.ep-tabs::-webkit-scrollbar{display:none}

.ep-tab{
    border:none;
    background:none;
    padding:5px 8px;
    border-radius:8px;
    cursor:pointer;
    transition:.12s;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    line-height:0;
}

.ep-tab:hover{background:var(--hover)}
.ep-tab.active{background:var(--tint)}

.ep-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:2px;
    max-height:186px;
    overflow-y:auto;
}

.ep-grid button{
    border:none;
    background:none;
    padding:4px;
    border-radius:7px;
    cursor:pointer;
    transition:transform .1s;
    display:grid;
    place-items:center;
    line-height:0;
}

.ep-grid button:hover{
    background:var(--tint-soft);
    transform:scale(1.15);
}

/* ================= SETTINGS ================= */

.overlay{
    position:fixed;
    inset:0;
    z-index:40;
    background:var(--ov);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
}

.overlay.open{
    opacity:1;
    pointer-events:auto;
}

.sheet{
    position:absolute;
    left:50%;
    top:50%;
    width:min(1000px,95vw);
    height:min(740px,93vh);
    background:var(--bg2);
    color:var(--ink);
    border-radius:18px;
    overflow:hidden;
    display:flex;
    box-shadow:var(--sheet-sh);
    transform:translate(-50%,-48%) scale(.97);
    opacity:0;
    transition:
        transform .3s cubic-bezier(.2,.9,.3,1.1),
        opacity .22s,
        background .25s;
}

.overlay.open .sheet{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
}

.sheet-tabs{
    flex:0 0 240px;
    background:var(--panel);
    border-right:1px solid var(--line);
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow-y:auto;
    transition:background .25s;
}

.sheet-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:2px 10px 18px;
}

.sheet-brand .logo{
    width:30px;
    height:30px;
    object-fit:contain;
}

.sheet-brand b{
    font-family:'Unbounded';
    font-size:16px;
    font-weight:700;
}

.tab{
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    padding:10px 13px;
    border-radius:11px;
    border:none;
    background:none;
    color:var(--ink);
    font:inherit;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all .15s;
    text-align:left;
}

.tab svg{
    width:21px;
    height:21px;
    flex:0 0 21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.tab:hover{background:var(--hover)}

.tab.active{
    background:var(--tint);
    color:var(--blue);
    font-weight:600;
}

.tab .prem-dot{
    margin-left:auto;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue);
    animation:ping 2s infinite;
}

.sheet-main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.sheet-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 24px;
    border-bottom:1px solid var(--line);
}

.sheet-head h2{
    font-family:'Unbounded';
    font-size:17px;
    font-weight:700;
    margin:0;
}

.sheet-scroll{
    flex:1;
    overflow-y:auto;
    padding:26px 32px 50px;
}

.sheet-scroll::-webkit-scrollbar{width:5px}
.sheet-scroll::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--blue) 25%, transparent);
    border-radius:99px;
}

.pane{
    display:none;
    max-width:640px;
    animation:rise .3s ease;
}

.pane.active{display:block}

.sec-title{
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--blue);
    margin:26px 0 10px;
}

.sec-title:first-child{margin-top:0}

.card{
    background:var(--bg2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:4px 18px;
}

.switch-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 2px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    border-bottom:1px solid var(--line);
}

.card > .switch-row:last-child,
.card > .field:last-child,
.card > .priv-row:last-child{
    border-bottom:none;
}

.switch-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.switch-row i{
    width:42px;
    height:24px;
    border-radius:99px;
    background:color-mix(in srgb, var(--muted) 40%, transparent);
    position:relative;
    transition:background .2s;
    flex:0 0 42px;
}

.switch-row i::after{
    content:'';
    position:absolute;
    left:3px;
    top:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .2s;
}

.switch-row input:checked + i{background:var(--blue)}
.switch-row input:checked + i::after{transform:translateX(18px)}

.priv-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 2px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
}

.priv-label{
    font-size:14px;
    font-weight:500;
}

.priv-chips{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.priv-chip{
    border:1px solid var(--line);
    background:var(--bg2);
    color:var(--muted);
    border-radius:999px;
    padding:6px 13px;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
}

.priv-chip:hover{
    border-color:var(--blue);
    color:var(--blue);
}

.priv-chip.active{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

.profile-top{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.av.big{
    width:86px;
    height:86px;
    flex-basis:86px;
    font-size:27px;
}

.p-name{
    font-size:20px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:7px;
}

.p-sub{
    color:var(--blue);
    font-size:13px;
    font-weight:500;
}

.field{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
}

.field label{
    font-size:12px;
    font-weight:700;
    color:var(--blue);
}

.field input{
    border:none;
    outline:none;
    font:inherit;
    font-size:14.5px;
    color:var(--ink);
    background:none;
    padding:2px 0;
    width:100%;
}

.status-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 2px;
    font-size:14px;
    font-weight:500;
}

.status-row .cur{
    display:grid;
    place-items:center;
    line-height:0;
}

.mini-btn{
    border:1px solid var(--line);
    background:var(--bg2);
    color:var(--blue);
    border-radius:9px;
    padding:6px 12px;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
    margin-left:auto;
}

.mini-btn:hover{
    border-color:var(--blue);
    background:var(--tint-soft);
}

.es-pack-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    margin:8px 2px 8px;
    display:flex;
    align-items:center;
    gap:6px;
}

.es-pack-label .free{
    color:var(--green);
    background:color-mix(in srgb, var(--green) 12%, transparent);
    padding:2px 8px;
    border-radius:99px;
    font-size:10px;
}

.es-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:2px 2px 8px;
}

.badge-opt{
    border:1.5px solid var(--line);
    background:var(--bg2);
    border-radius:12px;
    padding:9px;
    cursor:pointer;
    display:grid;
    place-items:center;
    line-height:0;
    transition:.12s;
}

.badge-opt:hover{
    transform:scale(1.08);
    border-color:var(--blue);
}

.badge-opt.active{
    border-color:var(--blue);
    background:var(--tint);
}

.es-pick{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:4px 2px 10px;
}

.es-pick button{
    border:1px solid var(--line);
    background:var(--bg2);
    border-radius:9px;
    padding:5px 8px;
    cursor:pointer;
    transition:.12s;
    display:grid;
    place-items:center;
    line-height:0;
    font-size:14px;
    color:var(--muted);
}

.es-pick button:hover{
    transform:scale(1.15);
    border-color:var(--blue);
}

.es-pick button.active{
    border-color:var(--blue);
    background:var(--tint);
}

.es-plus{
    width:100%;
    border:1px dashed color-mix(in srgb, var(--blue) 45%, transparent);
    background:var(--tint-soft);
    color:var(--blue);
    border-radius:9px;
    padding:8px;
    font:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
    margin-bottom:8px;
}

.es-plus:hover{background:var(--tint)}

.theme-row{display:flex;gap:14px}

.theme-card{
    flex:1;
    border:2px solid var(--line);
    border-radius:14px;
    padding:10px;
    cursor:pointer;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:9px;
    transition:border-color .15s;
    background:var(--bg2);
}

.theme-card:hover{
    border-color:color-mix(in srgb, var(--blue) 45%, transparent);
}

.theme-card.active{border-color:var(--blue)}

.theme-card > span{
    font-size:13px;
    font-weight:600;
    text-align:center;
}

.prev{
    height:66px;
    border-radius:9px;
    display:flex;
    flex-direction:column;
    gap:6px;
    justify-content:center;
    padding:12px;
}

.prev.light{background:linear-gradient(160deg,#EAF6FF,#DCEFFE)}
.prev.dark{background:linear-gradient(160deg,#22303F,#16222E)}

.prev i{
    height:9px;
    border-radius:99px;
    width:62%;
}

.prev.light i{background:rgba(255,255,255,.95)}
.prev.light i:nth-child(2){
    width:38%;
    background:var(--blue);
}

.prev.dark i{background:rgba(255,255,255,.18)}
.prev.dark i:nth-child(2){
    width:38%;
    background:rgba(62,175,253,.75);
}

.swatches{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.swatch{
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    transition:transform .15s,box-shadow .15s;
}

.swatch:hover{transform:scale(1.12)}

.swatch.active{
    box-shadow:
        0 0 0 3px var(--bg2),
        0 0 0 5px currentColor;
}

.folders-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}

.folders-head .sec-title{margin:0}

.counter{
    font-size:11.5px;
    font-weight:700;
    color:var(--blue);
    background:var(--tint);
    padding:3px 10px;
    border-radius:999px;
}

.hint{
    margin:0 0 14px;
    font-size:13px;
    color:var(--muted);
    line-height:1.55;
}

.frows{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.frow{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    transition:border-color .2s;
}

.frow:hover{
    border-color:color-mix(in srgb, var(--blue) 45%, transparent);
}

.frow.fresh{animation:flash 1.2s ease}

.frow-ico{
    color:var(--blue);
    display:grid;
    place-items:center;
}

.frow-name{
    flex:1;
    font-size:14px;
    font-weight:600;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
    border-radius:6px;
    padding:2px 4px;
    margin:-2px -4px;
    transition:background .15s;
}

.frow-name:hover{background:var(--hover)}
.frow-name[title]:hover::after{
    content:' ✎';
    font-size:11px;
    color:var(--muted);
}

.frow-edit{
    flex:1;
    min-width:0;
    border:1px solid var(--blue);
    border-radius:8px;
    padding:6px 10px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    background:var(--bg2);
    outline:none;
    box-shadow:0 0 0 3px var(--ring);
}

.frow-tag{
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
}

.frow-del{
    width:28px;
    height:28px;
    border-radius:8px;
    border:none;
    background:transparent;
    color:var(--muted);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:all .15s;
}

.frow-del:hover{
    background:#FFECEC;
    color:#F0616D;
}

.frow-del svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}

.hintbox{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:var(--tint-soft);
    border:1px dashed color-mix(in srgb, var(--blue) 45%, transparent);
    border-radius:12px;
    padding:13px 15px;
    font-size:13px;
    color:var(--muted);
    line-height:1.55;
    margin-top:16px;
}

.hintbox svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:var(--blue);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    margin-top:1px;
}

/* ================= SUBSCRIPTION ================= */

.prem-hero{
    border-radius:16px;
    padding:22px 24px;
    background:linear-gradient(135deg,#3EAFFD,#1B7FE0);
    color:#fff;
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
}

.prem-hero h3{
    font-family:'Unbounded';
    margin:0 0 7px;
    font-size:20px;
    display:flex;
    align-items:center;
    gap:9px;
}

.prem-hero p{
    margin:0;
    font-size:13.5px;
    opacity:.92;
    line-height:1.55;
    max-width:420px;
}

.prem-hero .crown{
    position:absolute;
    right:18px;
    top:16px;
    color:#fff;
    opacity:.95;
    transform:rotate(12deg);
}

.prem-hero .crown svg{
    width:46px;
    height:46px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.plus-badge{
    font-style:normal;
    background:rgba(255,255,255,.22);
    border-radius:8px;
    padding:2px 9px;
    font-size:15px;
}

.perk{
    display:flex;
    gap:13px;
    align-items:flex-start;
    padding:12px 2px;
    border-bottom:1px solid var(--line);
    font-size:14px;
}

.card > .perk:last-child{border-bottom:none}

.p-ico{
    width:26px;
    flex:0 0 26px;
    display:grid;
    place-items:center;
    color:var(--blue);
}

.p-ico svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.perk b{display:block}
.perk span{
    color:var(--muted);
    font-size:12.5px;
}

.plans{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:14px 0 6px;
}

.plan{
    position:relative;
    border:2px solid var(--line);
    border-radius:13px;
    padding:14px 8px 12px;
    text-align:center;
    cursor:pointer;
    transition:.15s;
    background:var(--bg2);
}

.plan:hover{
    border-color:color-mix(in srgb, var(--blue) 45%, transparent);
    transform:translateY(-2px);
}

.plan.active{
    border-color:var(--blue);
    background:var(--tint-soft);
}

.plan b{
    font-size:15px;
    display:block;
}

.plan .pp{
    font-size:11.5px;
    color:var(--muted);
    margin-top:4px;
    display:block;
}

.plan .disc{
    position:absolute;
    top:-9px;
    right:6px;
    background:var(--green);
    color:#fff;
    font-size:9.5px;
    font-weight:700;
    padding:2px 7px;
    border-radius:99px;
}

.sub-note{
    font-size:12px;
    color:var(--muted);
    text-align:center;
    margin:10px 0 0;
}

.prem-active{
    display:flex;
    align-items:center;
    gap:14px;
    border:1.5px solid color-mix(in srgb, var(--green) 55%, transparent);
    background:color-mix(in srgb, var(--green) 9%, var(--bg2));
    border-radius:14px;
    padding:15px 18px;
    margin-bottom:18px;
}

.pa-ico{
    color:var(--blue);
    display:grid;
    place-items:center;
}

.pa-ico svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.prem-active b{
    display:block;
    font-size:15px;
}

.prem-active span{
    color:var(--muted);
    font-size:12.5px;
}

.danger-btn{
    border:1.5px solid rgba(240,97,109,.4);
    background:none;
    color:#F0616D;
    border-radius:11px;
    padding:10px 16px;
    font:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
}

.danger-btn:hover{background:rgba(240,97,109,.1)}

.about{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:9px;
    padding:34px 0 10px;
}

.about .logo{
    width:78px;
    height:78px;
    object-fit:contain;
}

.about b{
    font-family:'Unbounded';
    font-size:21px;
    font-weight:700;
}

.vchip{
    font-size:11.5px;
    font-weight:700;
    color:var(--blue);
    background:var(--tint);
    padding:4px 12px;
    border-radius:999px;
}

.about p{
    color:var(--muted);
    font-size:13.5px;
    line-height:1.65;
    max-width:420px;
    margin:8px 0 4px;
}

.changelog{
    text-align:left;
    font-size:13px;
    color:var(--muted);
    line-height:1.7;
}

.changelog b{
    color:var(--ink);
    font-family:inherit;
    font-size:13px;
}

/* ================= MODALS / MENU ================= */

.modal{
    position:fixed;
    inset:0;
    z-index:65;
    background:var(--ov);
    backdrop-filter:blur(2px);
    display:grid;
    place-items:center;
    opacity:0;
    pointer-events:none;
    transition:.22s;
}

.modal.open{
    opacity:1;
    pointer-events:auto;
}

.modal-card{
    width:min(430px,92vw);
    max-height:min(680px,90vh);
    overflow-y:auto;
    background:var(--bg2);
    border-radius:18px;
    box-shadow:var(--sheet-sh);
    transform:translateY(12px) scale(.97);
    transition:.25s;
}

.modal.open .modal-card{transform:none}

.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px 8px;
    font-family:'Unbounded';
    font-weight:700;
    font-size:15px;
}

.modal-body{padding:8px 20px 20px}

.m-row{
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px 10px;
    border-radius:11px;
    cursor:pointer;
    transition:background .13s;
}

.m-row:hover{background:var(--hover)}

.m-row .av{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:13px;
}

.m-row .mt{
    flex:1;
    min-width:0;
}

.m-row b{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.m-row span{
    font-size:12px;
    color:var(--muted);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.chev{
    width:16px;
    height:16px;
    flex:0 0 16px;
    fill:none;
    stroke:var(--muted);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.radio-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border:1.5px solid var(--line);
    border-radius:11px;
    margin-bottom:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:.15s;
}

.radio-row:has(input:checked){
    border-color:var(--blue);
    background:var(--tint-soft);
}

.radio-row input{
    accent-color:var(--blue);
    width:17px;
    height:17px;
}

.cf-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
}

.cf-actions button{
    flex:1;
    padding:11px;
    border-radius:11px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    transition:.15s;
}

.ghost{
    border:1px solid var(--line);
    background:var(--bg2);
    color:var(--ink);
}

.ghost:hover{background:var(--hover)}

.cf-danger{
    border:none;
    background:#F0616D;
    color:#fff;
}

.cf-danger:hover{background:#E14C58}

.link-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.link-dom{
    font-size:13.5px;
    color:var(--muted);
    font-weight:600;
    white-space:nowrap;
}

.link-preview{
    margin-top:10px;
    font-size:12.5px;
    color:var(--blue);
    background:var(--tint-soft);
    border-radius:9px;
    padding:8px 12px;
    word-break:break-all;
    line-height:1.5;
}

.ctx{
    position:fixed;
    z-index:80;
    min-width:210px;
    background:#1B2735;
    color:#E8F1F9;
    border-radius:13px;
    padding:6px;
    box-shadow:0 16px 40px -8px rgba(0,0,0,.55);
    opacity:0;
    transform:scale(.94);
    transform-origin:top left;
    transition:opacity .12s,transform .12s;
    pointer-events:none;
}

.ctx.open{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
}

.ctx-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 11px;
    border-radius:9px;
    font-size:13.5px;
    font-weight:500;
    cursor:pointer;
    transition:background .12s;
    white-space:nowrap;
}

.ctx-item:hover{background:rgba(255,255,255,.09)}
.ctx-item.danger{color:#FF8791}

.ctx-ico{
    display:grid;
    place-items:center;
    width:18px;
    font-size:14px;
}

.ctx-ico svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ctx-sep{
    height:1px;
    background:rgba(255,255,255,.09);
    margin:5px 8px;
}

.ctx-arrow{
    margin-left:auto;
    opacity:.55;
    padding-left:14px;
}

.ctx-check{
    margin-left:auto;
    color:#5BC0FF;
    font-weight:700;
    padding-left:14px;
}

.ctx-sub{
    display:none;
    position:absolute;
    left:calc(100% + 5px);
    top:-6px;
    min-width:200px;
    background:#1B2735;
    border-radius:13px;
    padding:6px;
    box-shadow:0 16px 40px -8px rgba(0,0,0,.55);
}

.ctx-item:hover > .ctx-sub{display:block}

.dropdown{
    position:absolute;
    z-index:30;
    top:calc(100% + 6px);
    right:10px;
    min-width:210px;
    background:var(--bg2);
    border:1px solid var(--line);
    border-radius:13px;
    padding:6px;
    box-shadow:var(--sheet-sh);
    display:none;
}

.dropdown.open{
    display:block;
    animation:rise .16s ease;
}

.dd-item{
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px 11px;
    border-radius:9px;
    font-size:13.5px;
    font-weight:500;
    cursor:pointer;
    transition:background .12s;
    color:var(--ink);
}

.dd-item:hover{background:var(--hover)}
.dd-item .ctx-ico{color:var(--blue)}

/* ================= STORIES ================= */

.s-overlay{
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(6,10,15,.93);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
}

.s-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.s-card{
    position:relative;
    width:min(400px,92vw);
    height:min(700px,88vh);
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    color:#fff;
    box-shadow:0 40px 100px -20px rgba(0,0,0,.7);
    transform:scale(.95);
    transition:transform .28s cubic-bezier(.2,.9,.3,1.2);
}

.s-overlay.open .s-card{transform:scale(1)}

.s-media{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    user-select:none;
}

.s-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.s-bigtext{
    font-size:29px;
    font-weight:700;
    color:#fff;
    text-align:center;
    padding:0 26px;
    line-height:1.35;
    text-shadow:0 2px 12px rgba(0,0,0,.3);
}

.s-sticker{
    position:absolute;
    transform:translate(-50%,-50%);
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

.s-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.48),
        transparent 26%,
        transparent 68%,
        rgba(0,0,0,.52)
    );
    pointer-events:none;
}

.s-bars{
    position:absolute;
    top:9px;
    left:12px;
    right:12px;
    display:flex;
    gap:4px;
    z-index:3;
}

.s-bar{
    flex:1;
    height:3px;
    border-radius:99px;
    background:rgba(255,255,255,.3);
    overflow:hidden;
}

.s-bar i{
    display:block;
    height:100%;
    width:0;
    background:#fff;
    border-radius:99px;
}

.s-bar.done i{width:100%}
.s-bar.run i{animation:sfill var(--dur,5s) linear forwards}

.s-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 14px 10px;
}

.s-top .sav{
    width:38px;
    height:38px;
    border:none;
    font-size:13px;
    flex:0 0 38px;
}

.s-user{
    flex:1;
    min-width:0;
}

.s-user b{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
}

.s-user b .vcheck{color:#fff}

.s-user span{
    font-size:11.5px;
    opacity:.75;
}

.s-x{
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.14);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .15s;
}

.s-x:hover{background:rgba(255,255,255,.3)}

.s-x svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
}

.s-cap{
    position:relative;
    z-index:2;
    margin-top:auto;
    padding:0 20px 26px;
    font-size:16px;
    font-weight:600;
    text-align:center;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
}

.s-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.14);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .15s;
}

.s-nav:hover{background:rgba(255,255,255,.32)}

.s-nav svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.s-prev{left:12px}
.s-next{right:12px}

.sc-tabs{
    display:flex;
    gap:4px;
    background:var(--tint-soft);
    padding:4px;
    border-radius:11px;
    margin-bottom:14px;
}

.sc-tab{
    flex:1;
    border:none;
    background:none;
    padding:8px;
    border-radius:8px;
    font:inherit;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    transition:.15s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.sc-tab.active{
    background:var(--blue);
    color:#fff;
}

.sc-tab svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sc-preview{
    position:relative;
    aspect-ratio:9/13;
    border-radius:14px;
    overflow:hidden;
    background:var(--tint-soft);
    display:grid;
    place-items:center;
    margin-bottom:12px;
}

.sc-preview > img,
.sc-preview > video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sc-drop{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    cursor:pointer;
    text-align:center;
    padding:20px;
}

.sc-drop svg{
    width:38px;
    height:38px;
    fill:none;
    stroke:var(--blue);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sc-textbg{
    position:absolute;
    inset:0;
    transition:background .3s;
}

.sc-drag-text{
    position:absolute;
    transform:translate(-50%,-50%);
    width:82%;
    z-index:2;
    cursor:grab;
    touch-action:none;
}

.sc-drag-text:active{cursor:grabbing}

.sc-drag-text textarea{
    width:100%;
    background:none;
    border:none;
    outline:none;
    resize:none;
    color:#fff;
    font:inherit;
    font-size:21px;
    font-weight:700;
    text-align:center;
    line-height:1.45;
    pointer-events:none;
    text-shadow:0 1px 8px rgba(0,0,0,.25);
}

.sc-drag-text textarea::placeholder{
    color:rgba(255,255,255,.65);
}

.sc-sticker{
    position:absolute;
    transform:translate(-50%,-50%);
    z-index:3;
    cursor:grab;
    touch-action:none;
    line-height:0;
}

.sc-sticker:active{cursor:grabbing}

.sc-dur{
    position:absolute;
    right:10px;
    bottom:10px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:11.5px;
    font-weight:600;
    padding:3px 9px;
    border-radius:99px;
    z-index:2;
}

.sc-emojis{
    display:flex;
    gap:6px;
    justify-content:center;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.sc-emojis button{
    border:1px solid var(--line);
    background:var(--bg2);
    border-radius:9px;
    padding:5px 9px;
    cursor:pointer;
    transition:.12s;
    display:grid;
    place-items:center;
    line-height:0;
}

.sc-emojis button:hover{
    transform:scale(1.15);
    border-color:var(--blue);
}

.sc-grads{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-bottom:12px;
}

.sc-grad{
    width:30px;
    height:30px;
    border-radius:50%;
    border:2.5px solid transparent;
    cursor:pointer;
    transition:.12s;
}

.sc-grad.active{
    border-color:var(--blue);
    transform:scale(1.12);
}

.sc-err{
    color:#F0616D;
    font-size:12.5px;
    font-weight:600;
    min-height:17px;
    text-align:center;
}

/* ================= TOAST / LOGO / ANIMATIONS ================= */

.toast{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:90;
    background:var(--ink);
    color:var(--bg);
    font-size:13px;
    font-weight:500;
    padding:11px 16px;
    border-radius:12px;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
    opacity:0;
    transform:translateY(12px);
    transition:all .25s;
    pointer-events:none;
    max-width:min(340px,86vw);
}

.toast.show{
    opacity:1;
    transform:none;
}

.logo{display:block}

@keyframes rise{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
}

@keyframes pop{
    from{opacity:0;transform:translateY(8px) scale(.96)}
    to{opacity:1;transform:none}
}

@keyframes ping{
    0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent)}
    100%{box-shadow:0 0 0 8px transparent}
}

@keyframes bob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}

@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-5px)}
    75%{transform:translateX(5px)}
}

@keyframes flash{
    0%{background:var(--tint)}
    100%{background:transparent}
}

@keyframes sfill{
    from{width:0}
    to{width:100%}
}

/* ================= RESPONSIVE ================= */

@media (max-width:1100px){
    .chats{
        width:320px;
        flex-basis:320px;
    }
}

@media (max-width:900px){
    .rail{display:none}
    .thread{display:none}
    .chats{flex:1;width:auto}

    .app.chat-open .chats{display:none}
    .app.chat-open .thread{display:flex}

    .back-btn{display:grid}

    .plans{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:760px){
    .sheet{
        width:100vw;
        height:100vh;
        max-height:none;
        border-radius:0;
    }

    .sheet-tabs{
        flex:0 0 auto;
        flex-direction:row;
        overflow-x:auto;
        border-right:none;
        border-bottom:1px solid var(--line);
        padding:10px;
        gap:6px;
    }

    .sheet-brand{display:none}

    .tab{
        flex:0 0 auto;
        width:auto;
        padding:9px 13px;
    }

    .sheet-scroll{
        padding:20px 18px 50px;
    }

    .theme-row{
        flex-direction:column;
    }

    .s-nav{
        display:none;
    }

    .priv-row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
}