@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg:        #080a0f;
    --bg2:       #0d0f18;
    --bg3:       #12151f;
    --glass:     rgba(255,255,255,0.04);
    --glass2:    rgba(255,255,255,0.07);
    --border:    rgba(255,255,255,0.07);
    --border2:   rgba(255,255,255,0.13);
    --green:     #00FFA3;
    --green-d:   rgba(0,255,163,0.12);
    --green-g:   rgba(0,255,163,0.35);
    --orange:    #FF6A00;
    --orange-d:  rgba(255,106,0,0.12);
    --orange-g:  rgba(255,106,0,0.35);
    --red:       #ff4757;
    --text:      #e2e5ee;
    --text2:     #6b7280;
    --text3:     #353a47;
    --r:         18px;
    --r2:        24px;
    --r3:        32px;
    --blur:      blur(20px) saturate(180%);
    --shadow:    0 8px 32px rgba(0,0,0,0.5);
    --shadowlg:  0 20px 60px rgba(0,0,0,0.65);
    --ease:      cubic-bezier(0.4,0,0.2,1);
    --spring:    cubic-bezier(0.34,1.56,0.64,1);
    --font:      'Syne', sans-serif;
    --mono:      'JetBrains Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
    font-family:var(--font);background:var(--bg);color:var(--text);
    height:100dvh;overflow:hidden;
    background-image:
        radial-gradient(ellipse 70% 50% at 15% -5%,rgba(0,255,163,.07) 0%,transparent 55%),
        radial-gradient(ellipse 50% 35% at 85% 105%,rgba(255,106,0,.05) 0%,transparent 55%);
}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}
input,textarea,button{font-family:var(--font)}
a{color:inherit}

/* ── AUTH ─────────────────────────────────── */
#auth-screen{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    z-index:1000;padding:20px;
}
.auth-card{
    width:360px;max-width:100%;
    background:var(--glass);backdrop-filter:var(--blur);
    border:1px solid var(--border2);border-radius:var(--r3);
    padding:36px 32px;box-shadow:var(--shadowlg);
    animation:cardIn .5s var(--spring);
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
.brand{text-align:center;margin-bottom:28px}
.brand-name{
    font-size:2.4rem;font-weight:800;letter-spacing:-.05em;
    background:linear-gradient(135deg,var(--green) 0%,#00d4ff 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    display:block;line-height:1;
}
.brand-sub{font-size:.72rem;color:var(--text2);letter-spacing:.15em;text-transform:uppercase;margin-top:5px;display:block}

.tabs{
    display:flex;gap:3px;background:var(--glass);border:1px solid var(--border);
    border-radius:10px;padding:3px;margin-bottom:24px;
}
.tab{
    flex:1;padding:8px;border:none;background:none;color:var(--text2);
    font-size:.8rem;font-weight:700;letter-spacing:.03em;border-radius:8px;
    cursor:pointer;transition:all .2s var(--ease);
}
.tab.on{background:var(--glass2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.4)}

.fg{margin-bottom:14px}
.fg label{display:block;font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.09em;margin-bottom:7px}
.fi{
    width:100%;padding:11px 14px;background:var(--glass);border:1px solid var(--border2);
    border-radius:10px;color:var(--text);font-size:.92rem;outline:none;transition:all .2s;
}
.fi:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-d)}
.fi::placeholder{color:var(--text3)}

.dots{display:flex;gap:10px;justify-content:center}
.dot{
    width:58px;height:62px;text-align:center;font-size:1.5rem;font-weight:700;
    background:var(--glass);border:1px solid var(--border2);border-radius:10px;
    color:var(--text);outline:none;transition:all .2s;
    -moz-appearance:textfield;font-family:var(--mono);
}
.dot::-webkit-inner-spin-button,.dot::-webkit-outer-spin-button{-webkit-appearance:none}
.dot:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-d);transform:scale(1.05)}

.btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;padding:13px;border:none;border-radius:10px;
    font-size:.88rem;font-weight:700;letter-spacing:.04em;
    cursor:pointer;transition:all .2s var(--ease);margin-top:6px;
}
.btn-green{background:linear-gradient(135deg,var(--green),#00d48a);color:#000;box-shadow:0 4px 20px var(--green-g)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--green-g)}
.btn-green:active{transform:translateY(0)}
.btn-orange{background:linear-gradient(135deg,var(--orange),#e05500);color:#fff;box-shadow:0 4px 20px var(--orange-g)}
.btn-orange:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--glass2);color:var(--text);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--glass);border-color:var(--border2)}
.btn-danger{background:linear-gradient(135deg,var(--red),#c0392b);color:#fff}
.btn-sm{width:auto;padding:6px 14px;font-size:.75rem;margin-top:0;border-radius:8px}

.err{color:#ff6b6b;font-size:.78rem;text-align:center;margin-top:10px;min-height:18px}

/* ── MAIN APP ──────────────────────────────── */
#app{display:none;height:100dvh;flex-direction:column;overflow:hidden}
#app.on{display:flex}

/* topbar */
.topbar{
    height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;background:var(--bg2);border-bottom:1px solid var(--border);z-index:10;
}
.topbar-brand{font-size:1.05rem;font-weight:800;letter-spacing:-.04em;
    background:linear-gradient(135deg,var(--green),#00d4ff);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.topbar-r{display:flex;align-items:center;gap:10px}
.topbar-user{font-size:.78rem;color:var(--text2);font-weight:600}
.icon-btn{
    width:34px;height:34px;border:1px solid var(--border2);border-radius:9px;
    background:var(--glass);color:var(--text2);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s;
}
.icon-btn:hover{color:var(--green);border-color:var(--green);box-shadow:0 0 10px var(--green-d)}

/* app launcher */
.launcher{
    height:108px;flex-shrink:0;display:flex;align-items:center;gap:10px;
    padding:10px 14px;overflow-x:auto;overflow-y:hidden;
    border-bottom:1px solid var(--border);background:var(--bg2);
}
.launcher::-webkit-scrollbar{height:2px}
.app-item{
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;
    cursor:pointer;padding:5px 7px;border-radius:12px;transition:all .25s var(--spring);
}
.app-item:hover{background:var(--glass);transform:translateY(-3px)}
.app-item:active{transform:scale(.93)}
.app-icon{
    width:56px;height:56px;border-radius:14px;object-fit:cover;
    border:1px solid var(--border);background:var(--bg3);
    box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.app-icon-fb{
    width:56px;height:56px;border-radius:14px;
    background:linear-gradient(135deg,var(--glass2),var(--bg3));
    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.app-name{font-size:.65rem;font-weight:600;color:var(--text2);max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

/* chat area */
.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

/* online strip */
.online-strip{
    height:34px;flex-shrink:0;display:flex;align-items:center;gap:4px;
    padding:0 14px;overflow-x:auto;overflow-y:hidden;
    border-bottom:1px solid var(--border);background:var(--bg2);
}
.online-strip::-webkit-scrollbar{height:0}
.badge{
    display:flex;align-items:center;gap:5px;padding:3px 9px;
    border-radius:20px;background:var(--glass);border:1px solid var(--border);
    white-space:nowrap;transition:all .3s;
}
.badge.on{border-color:rgba(0,255,163,.25)}
.dot-s{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0}
.badge.on .dot-s{background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.badge-name{font-size:.7rem;font-weight:600;color:var(--text2)}

/* messages */
.msgs{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:2px}
.load-more{
    align-self:center;padding:7px 18px;background:var(--glass);
    border:1px solid var(--border2);border-radius:20px;
    color:var(--text2);font-size:.75rem;font-weight:600;cursor:pointer;
    transition:all .2s;margin-bottom:10px;
}
.load-more:hover{color:var(--green);border-color:var(--green)}

.msg-row{display:flex;gap:9px;align-items:flex-end;padding:1px 0;animation:msgIn .22s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg-row.own{flex-direction:row-reverse}
.avatar{
    width:28px;height:28px;flex-shrink:0;border-radius:9px;
    background:linear-gradient(135deg,var(--green-d),var(--orange-d));
    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
    font-size:.65rem;font-weight:700;text-transform:uppercase;color:var(--text);
}
.msg-row.own .avatar{background:linear-gradient(135deg,rgba(0,255,163,.18),rgba(0,212,255,.1))}
.msg-body{max-width:72%}
.msg-row.own .msg-body{align-items:flex-end;display:flex;flex-direction:column}
.msg-meta{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.msg-row.own .msg-meta{flex-direction:row-reverse}
.msg-name{font-size:.7rem;font-weight:700;color:var(--green)}
.msg-row.own .msg-name{color:#00d4ff}
.msg-time{font-size:.62rem;color:var(--text3);font-family:var(--mono)}
.bubble{
    display:inline-block;padding:9px 13px;
    border-radius:15px 15px 15px 3px;
    background:var(--glass);border:1px solid var(--border);
    font-size:.86rem;line-height:1.5;word-break:break-word;white-space:pre-wrap;
}
.msg-row.own .bubble{
    border-radius:15px 15px 3px 15px;
    background:linear-gradient(135deg,rgba(0,255,163,.1),rgba(0,212,255,.06));
    border-color:rgba(0,255,163,.18);
}
.msg-row.grp .avatar{opacity:0}
.msg-row.grp .msg-meta{display:none}
.msg-row.grp .bubble{border-radius:3px 15px 15px 3px}
.msg-row.grp.own .bubble{border-radius:15px 3px 3px 15px}

/* input */
.input-bar{
    flex-shrink:0;padding:10px 14px;border-top:1px solid var(--border);
    background:var(--bg2);display:flex;gap:9px;align-items:flex-end;
}
.input-wrap{
    flex:1;background:var(--glass);border:1px solid var(--border2);
    border-radius:var(--r);padding:9px 13px;display:flex;align-items:center;
    transition:all .2s;
}
.input-wrap:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-d)}
#msg-input{
    flex:1;background:none;border:none;outline:none;color:var(--text);
    font-size:.88rem;resize:none;max-height:110px;line-height:1.5;
}
#msg-input::placeholder{color:var(--text3)}
.send{
    width:42px;height:42px;flex-shrink:0;border:none;border-radius:13px;
    background:linear-gradient(135deg,var(--green),#00d48a);color:#000;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:1rem;transition:all .25s var(--spring);
}
.send:hover{transform:scale(1.1);box-shadow:0 4px 16px var(--green-g)}
.send:active{transform:scale(.93)}
.send:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* ── MODALS ────────────────────────────────── */
.overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
    z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;
    opacity:0;pointer-events:none;transition:opacity .2s;
}
.overlay.on{opacity:1;pointer-events:all}
.modal{
    background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r3);
    padding:28px;width:100%;max-height:90vh;overflow-y:auto;
    box-shadow:var(--shadowlg);transform:scale(.93) translateY(18px);
    transition:transform .3s var(--spring);
}
.overlay.on .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.modal-title{font-size:1.1rem;font-weight:800}
.x-btn{
    width:32px;height:32px;border:1px solid var(--border2);border-radius:9px;
    background:var(--glass);color:var(--text2);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s;
}
.x-btn:hover{color:var(--red);border-color:var(--red)}

/* webview modal */
.wv-modal{max-width:96vw;width:96vw;height:88vh;padding:0;overflow:hidden}
.wv-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}
.wv-title{font-weight:700;font-size:.92rem}
#wv-frame{width:100%;height:calc(100% - 52px);border:none;background:#fff}

/* admin modal */
.adm-modal{max-width:680px}
.adm-tabs{display:flex;gap:3px;background:var(--glass);border:1px solid var(--border);border-radius:10px;padding:3px;margin-bottom:20px}
.adm-tab{flex:1;padding:9px;border:none;background:none;color:var(--text2);font-size:.82rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all .2s}
.adm-tab.on{background:var(--glass2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.adm-sec{display:none}
.adm-sec.on{display:block}
.adm-form{background:var(--glass);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:18px}
.adm-form h4{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--green);margin-bottom:14px}
.row{display:flex;gap:8px}
.row .fg{flex:1}
.tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.tbl th{text-align:left;padding:7px 10px;color:var(--text2);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border);font-weight:700}
.tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--glass)}
.tbl-actions{display:flex;gap:5px}
.tbl-logo{width:30px;height:30px;border-radius:8px;object-fit:cover;border:1px solid var(--border)}
.pc{font-family:var(--mono);color:var(--orange);letter-spacing:.12em;font-size:.85rem}
.adm-err{color:#ff6b6b;font-size:.78rem;margin-bottom:12px;min-height:18px}

/* notif */
.notif-wrap{position:fixed;top:58px;right:14px;z-index:900;display:flex;flex-direction:column;gap:7px}
.notif{
    background:var(--bg2);border:1px solid var(--border2);border-left:3px solid var(--green);
    border-radius:var(--r);padding:11px 14px;font-size:.8rem;max-width:270px;
    box-shadow:var(--shadow);animation:notifIn .3s var(--spring);cursor:pointer;
}
.notif.err{border-left-color:var(--red)}
.notif.warn{border-left-color:var(--orange)}
@keyframes notifIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}

/* file label */
.file-wrap{position:relative}
.file-wrap input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-label{
    display:flex;align-items:center;gap:7px;padding:9px 12px;
    background:var(--bg3);border:1px dashed var(--border2);
    border-radius:9px;color:var(--text2);font-size:.8rem;cursor:pointer;transition:all .2s;
}
.file-label:hover{border-color:var(--green);color:var(--green)}

@media(max-width:600px){
    .auth-card{padding:24px 18px}
    .dot{width:50px;height:56px;font-size:1.2rem}
    .msg-body{max-width:84%}
    .adm-modal{padding:18px}
    .row{flex-direction:column}
    .wv-modal{max-width:100vw;width:100vw;height:100dvh;border-radius:0}
}