/* ═══════════════════════════════════════════════════
   SAI Panel — Syc Artificial Intelligence
   Visual Style: SycEmpire VPN Panel (ma.sycc.ir)
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Vazirmatn:wght@300;400;500;600;700&display=swap');

:root {
    --bg-root: #060b10;
    --bg-surface: #0c131e;
    --bg-elevated: #111925;
    --bg-input: #080e16;
    --border: #182535;
    --border-hover: #243650;
    --border-active: #2a5a9e;
    --text-primary: #e6edf5;
    --text-secondary: #8899b0;
    --text-muted: #4d627b;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: rgba(59,130,246,.10);
    --accent-glow: rgba(59,130,246,.18);
    --success: #22c55e;
    --success-soft: rgba(34,197,94,.08);
    --danger: #ef4444;
    --danger-soft: rgba(239,68,68,.08);
    --warning: #f59e0b;
    --warning-soft: rgba(245,158,11,.08);
    --info: #06b6d4;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --transition: .2s cubic-bezier(.4,0,.2,1);
    --sidebar-w: 260px;
    --topbar-h: 56px;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-fa: 'Vazirmatn', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
    background:var(--bg-root);
    color:var(--text-primary);
    font-family:var(--font);
    min-height:100vh;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow:hidden;
}

a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-hover)}
input,textarea,select,button{font-family:inherit;font-size:inherit}
button{cursor:pointer}
pre,code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ═══ LAYOUT ═══ */
.layout{
    display:flex;
    height:100dvh;
    background:var(--bg-root);
}

/* ═══ SIDEBAR ═══ */
.sidebar{
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    height:100%;
    background:var(--bg-surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:50;
}
.sb-header{
    padding:24px 20px 16px;
    text-align:center;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.sb-logo-wrap{
    display:inline-block;
    position:relative;
    width:64px;height:64px;
    margin:0 auto;
}
.sb-logo-wrap::before{
    content:'';
    position:absolute;
    top:-5px;left:-5px;
    right:-5px;bottom:-5px;
    border-radius:50%;
    background:conic-gradient(
        transparent 0deg,
        rgba(59,130,246,.6) 45deg,
        rgba(59,130,246,.9) 90deg,
        rgba(96,165,250,.4) 135deg,
        transparent 180deg,
        transparent 360deg
    );
    animation:logoGlow 2.5s linear infinite;
    z-index:0;
}
@keyframes logoGlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.sb-logo{
    width:56px;height:56px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--border-active);
    position:relative;
    z-index:1;
    background:var(--bg-elevated);
    display:flex;
    align-items:center;
    justify-content:center;
}
.sb-logo svg{width:36px;height:36px}
.sb-header h2{
    font-size:14px;
    font-weight:700;
    color:var(--accent);
    margin-top:10px;
    letter-spacing:.5px;
}
.sb-header span{
    font-size:11px;
    font-weight:400;
    color:var(--text-muted);
    display:block;
    margin-top:2px;
}

.sb-nav{
    padding:8px 0;
    display:flex;
    flex-direction:column;
    gap:1px;
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 20px;
    margin:1px 8px;
    border-radius:var(--radius-sm);
    color:var(--text-secondary);
    font-size:13.5px;
    font-weight:500;
    transition:all var(--transition);
    position:relative;
}
.nav-item:hover{
    background:var(--accent-soft);
    color:var(--text-primary);
    text-decoration:none;
}
.nav-item.active{
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:600;
}
.nav-item.active::before{
    content:'';
    position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    width:3px;height:20px;
    background:var(--accent);
    border-radius:0 3px 3px 0;
}
.nav-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}

.sb-sessions{
    flex:1;
    overflow-y:auto;
    padding:4px 8px 12px;
}
.sb-label{
    font-size:10px;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.8px;
    padding:8px 12px 6px;
}
.session-item{
    display:flex;
    flex-direction:column;
    padding:8px 12px;
    border-radius:var(--radius-sm);
    color:var(--text-secondary);
    font-size:13px;
    font-weight:500;
    transition:all var(--transition);
    margin-bottom:2px;
}
.session-item:hover{
    background:var(--accent-soft);
    color:var(--text-primary);
    text-decoration:none;
}
.session-item.active{
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:600;
}
.s-date{
    font-size:10px;
    color:var(--text-muted);
    margin-top:2px;
}

.sb-footer{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    border-top:1px solid var(--border);
    font-size:12px;
    color:var(--text-muted);
    flex-shrink:0;
}

/* ═══ MAIN ═══ */
.main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
}

/* ═══ CHAT HEADER ═══ */
.chat-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 24px;
    border-bottom:1px solid var(--border);
    background:var(--bg-surface);
    min-height:48px;
    flex-shrink:0;
}
.chat-header .title{
    font-size:16px;
    font-weight:600;
    color:var(--text-primary);
    letter-spacing:-.3px;
}
.model-badge{
    background:var(--accent-soft);
    color:var(--accent-hover);
    font-size:11px;
    font-weight:600;
    padding:3px 10px;
    border-radius:20px;
    border:1px solid rgba(59,130,246,.2);
}
.sess-cost{
    margin-left:auto;
    font-size:12px;
    font-weight:500;
    color:var(--text-secondary);
    font-variant-numeric:tabular-nums;
}

/* ═══ CHAT BOX ═══ */
.chat-box{
    flex:1;
    overflow-y:auto;
    padding:24px 32px;
    display:flex;
    flex-direction:column;
    gap:4px;
    scroll-behavior:smooth;
}
.chat-box::-webkit-scrollbar{width:4px}
.chat-box::-webkit-scrollbar-thumb{background:rgba(250,250,250,.06);border-radius:2px}

.empty{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}
.empty div{
    text-align:center;
    color:var(--text-secondary);
}

/* ═══ MESSAGES ═══ */
.msg{width:100%}

.user-row{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    padding:4px 0;
}
.user-bubble{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 16px;
    max-width:min(82%,64ch);
    white-space:pre-wrap;
    word-break:break-word;
    color:var(--text-primary);
    font-size:13px;
    font-weight:400;
    line-height:1.55;
}
.user-meta{
    font-size:10px;
    color:var(--text-muted);
    margin-top:4px;
    font-variant-numeric:tabular-nums;
    user-select:none;
}

.assistant-row{
    padding:12px 0;
    color:var(--text-primary);
    font-size:13px;
    font-weight:400;
    line-height:1.6;
    white-space:pre-wrap;
    word-break:break-word;
}

.cost-row{padding:2px 0 12px}
.cost-bar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    font-size:10px;
    font-weight:500;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
    letter-spacing:.3px;
}
.cost-bar .val{color:var(--text-secondary)}
.cost-bar .val-green{color:#4ade80}

.assistant-row code{
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:1px 6px;
    font-size:12px;
    color:var(--text-primary);
}
.assistant-row pre{
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:14px;
    margin:8px 0;
    overflow-x:auto;
    white-space:pre;
}

.loader{padding:12px 0}
.dots::after{
    content:'';
    display:inline-block;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--text-secondary);
    animation:dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse{
    0%,80%,100%{opacity:.2;transform:scale(.8)}
    40%{opacity:1;transform:scale(1)}
}

/* ═══ INPUT AREA ═══ */
.chat-foot{
    border-top:1px solid var(--border);
    background:var(--bg-surface);
    padding:14px 24px 18px;
    flex-shrink:0;
}
.input-row{
    display:flex;
    align-items:flex-end;
    gap:8px;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:6px 6px 6px 14px;
    transition:all var(--transition);
}
.input-row:focus-within{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}
.input-row textarea{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:var(--text-primary);
    font-size:13px;
    font-weight:400;
    line-height:1.55;
    resize:none;
    padding:4px 0;
    max-height:160px;
    min-height:24px;
}
.input-row textarea::placeholder{color:var(--text-muted)}
.input-row button{
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    padding:6px 16px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
    transition:all var(--transition);
}
.input-row button:disabled{opacity:.5;cursor:not-allowed}
.input-row button:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.input-row button:active:not(:disabled){transform:translateY(0)}

.toolbar{
    display:flex;
    align-items:center;
    gap:8px;
    padding-top:10px;
}
.toolbar select{
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    font-size:12px;
    font-weight:500;
    padding:5px 10px;
    outline:none;
    cursor:pointer;
    transition:all var(--transition);
}
.toolbar select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}
.clear-btn{
    background:transparent;
    color:var(--text-secondary);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:11px;
    font-weight:600;
    padding:5px 12px;
    transition:all var(--transition);
    margin-left:auto;
}
.clear-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ═══ MOBILE ═══ */
.mobile-topbar{display:none}
.sb-overlay{display:none}
.menu-toggle{display:none}

@media (max-width:768px){
    .sidebar{
        position:fixed;
        left:-280px;
        top:0;bottom:0;
        z-index:50;
        transition:left .28s cubic-bezier(.4,0,.2,1);
        width:280px;
        min-width:280px;
    }
    .sidebar.open{left:0}
    .sb-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:45;
        background:rgba(0,0,0,.55);
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
        opacity:0;
        pointer-events:none;
        transition:opacity .28s;
    }
    .sb-overlay.show{opacity:1;pointer-events:auto}
    .mobile-topbar{
        display:flex;
        align-items:center;
        gap:12px;
        padding:0 16px;
        height:var(--topbar-h);
        border-bottom:1px solid var(--border);
        background:var(--bg-surface);
        position:fixed;
        top:0;left:0;right:0;
        z-index:40;
    }
    .menu-toggle{
        display:block;
        background:var(--accent-soft);
        border:1px solid var(--border);
        border-radius:var(--radius-sm);
        color:var(--text-secondary);
        font-size:18px;
        font-weight:600;
        padding:6px 14px;
    }
    .menu-toggle:hover{color:var(--accent);border-color:var(--accent)}
    .chat-header{padding:10px 16px}
    .chat-box{padding:16px;margin-top:var(--topbar-h)}
    .chat-foot{padding:10px 16px 14px}
    .user-bubble{max-width:90%}
}

@media (max-width:540px){
    .chat-box{padding:12px}
    .chat-foot{padding:8px 12px 12px}
    .chat-header .title{font-size:14px}
}

/* ═══ LOGIN PAGE ═══ */
.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100dvh;
    background:var(--bg-root);
    position:relative;
    overflow:hidden;
}
.login-box{
    position:relative;
    z-index:1;
    background:var(--bg-surface);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    padding:44px 40px;
    border-radius:var(--radius-lg);
    width:420px;
    max-width:100%;
    text-align:center;
    border:1px solid var(--border);
    box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.login-logo-wrap{
    display:inline-block;
    position:relative;
    width:90px;height:90px;
    margin-bottom:16px;
}
.login-logo-wrap::before{
    content:'';
    position:absolute;
    top:-6px;left:-6px;
    right:-6px;bottom:-6px;
    border-radius:50%;
    background:conic-gradient(
        transparent 0deg,
        rgba(59,130,246,.5) 45deg,
        rgba(96,165,250,.8) 90deg,
        rgba(59,130,246,.3) 135deg,
        transparent 180deg,
        transparent 360deg
    );
    animation:logoGlow 2.5s linear infinite;
    z-index:0;
}
.login-logo{
    width:80px;height:80px;
    border-radius:50%;
    border:3px solid var(--border-active);
    position:relative;
    z-index:1;
    background:var(--bg-elevated);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color var(--transition),transform var(--transition);
}
.login-logo:hover{border-color:var(--accent);transform:scale(1.05)}
.login-logo svg{width:52px;height:52px}
.login-box h1{
    font-size:24px;
    font-weight:800;
    color:var(--accent);
    margin-bottom:6px;
    letter-spacing:-.5px;
}
.login-box .sub{
    color:var(--text-secondary);
    font-size:13px;
    font-weight:500;
    margin-bottom:28px;
}
.login-box form{display:flex;flex-direction:column;gap:12px}
.login-box input{
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    padding:12px 14px;
    font-size:14px;
    outline:none;
    transition:all var(--transition);
}
.login-box input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}
.login-box input::placeholder{color:var(--text-muted)}
.login-box button{
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    padding:12px;
    font-size:14px;
    font-weight:600;
    transition:all var(--transition);
    margin-top:4px;
}
.login-box button:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.login-box .err{
    background:var(--danger-soft);
    border:1px solid rgba(239,68,68,.25);
    border-radius:var(--radius-sm);
    color:#f87171;
    padding:10px 14px;
    font-size:12px;
    font-weight:500;
    text-align:center;
    margin-bottom:12px;
}
.login-lang{
    text-align:center;
    margin-top:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--text-muted);
}
.login-lang a{color:var(--text-muted);padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--bg-input);transition:all var(--transition)}
.login-lang a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* ═══ TOKENS PAGE ═══ */
.tokens-page{
    padding:24px 32px;
    overflow-y:auto;
    flex:1;
}

.filter-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.filter-row input[type="date"],
.filter-row select{
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    padding:5px 10px;
    font-size:12px;
    outline:none;
    transition:all var(--transition);
}
.filter-row input[type="date"]:focus,
.filter-row select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}

/* Stat cards */
.stats-row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:14px;
    margin-bottom:24px;
}
.stat-c{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px 18px;
    text-align:center;
    transition:all var(--transition);
    position:relative;
    overflow:hidden;
}
.stat-c::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,var(--accent),transparent);
    opacity:0;
    transition:opacity var(--transition);
}
.stat-c:hover{
    transform:translateY(-2px);
    border-color:var(--border-hover);
    box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.stat-c:hover::before{opacity:1}
.stat-c .num{
    font-size:24px;
    font-weight:800;
    color:var(--accent);
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
}
.stat-c .lbl{
    font-size:11px;
    color:var(--text-secondary);
    margin-top:4px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* Model grid */
.model-grid{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:24px;
}
.model-c{
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:14px 18px;
    position:relative;
    overflow:hidden;
    transition:all var(--transition);
}
.model-c:hover{border-color:var(--border-hover)}
.model-c .nm{
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:3px;
}
.model-c .st{
    font-size:11px;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
}
.model-c .co{
    position:absolute;
    right:18px;
    top:16px;
    font-size:16px;
    font-weight:700;
    color:#4ade80;
    font-variant-numeric:tabular-nums;
}
.model-c .bar{
    margin-top:8px;
    height:3px;
    background:var(--bg-input);
    border-radius:2px;
    overflow:hidden;
}
.model-c .bar-f{
    height:100%;
    background:var(--accent);
    border-radius:2px;
    transition:width .3s ease;
}

/* Table */
.table-w{
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:24px;
}
.tokens-page table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    background:var(--bg-elevated);
}
.tokens-page th{
    text-align:left;
    padding:11px 14px;
    font-size:10px;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.8px;
    background:var(--bg-root);
    border-bottom:1px solid var(--border);
}
.tokens-page td{
    padding:11px 14px;
    color:var(--text-primary);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
.tokens-page tr:last-child td{border-bottom:none}
.tokens-page tr:hover td{background:var(--accent-soft)}

/* ═══ MARKDOWN ═══ */
.assistant-row h1,.assistant-row h2,.assistant-row h3{
    color:var(--text-primary);
    font-size:15px;
    font-weight:600;
    margin:16px 0 8px;
}
.assistant-row strong,.assistant-row b{color:var(--text-primary);font-weight:600}
.assistant-row ul,.assistant-row ol{margin:8px 0;padding-left:24px}
.assistant-row li{margin-bottom:4px}
.assistant-row blockquote{
    border-left:2px solid var(--border);
    color:var(--text-secondary);
    margin:8px 0;
    padding-left:12px;
}
.assistant-row hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.assistant-row table{
    width:100%;
    border-collapse:collapse;
    margin:12px 0;
    font-size:12px;
}
.assistant-row th,.assistant-row td{
    text-align:left;
    padding:8px 12px;
    border:1px solid var(--border);
}
.assistant-row th{
    color:var(--text-primary);
    font-weight:600;
    background:var(--bg-elevated);
}

/* ═══ RESPONSIVE TOKENS ═══ */
@media (max-width:600px){
    .tokens-page{padding:16px}
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .table-w{overflow-x:auto}
    .model-c .co{position:static;margin-top:4px}
}