/* ============================================================
   Chatgrap.uz — Premium Dark UI v12
   Modern, refined glassmorphism with subtle gradients
   ============================================================ */

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

:root{
    --bg:#0a0a0f;
    --bg-elevated:#111118;
    --bg-glass:rgba(255,255,255,.04);
    --bg-glass-2:rgba(255,255,255,.06);
    --bg-glass-3:rgba(255,255,255,.08);
    --bg-hover:rgba(255,255,255,.08);
    --bg-active:rgba(255,255,255,.12);
    --border-glass:rgba(255,255,255,.08);
    --border-glass-2:rgba(255,255,255,.12);
    --border-glass-3:rgba(255,255,255,.18);
    --text:#ececf1;
    --text-2:#b4b4b4;
    --text-3:#8e8ea0;
    --text-4:#565869;
    --green:#10a37f;
    --green-h:#0d8a6b;
    --green-glow:rgba(16,163,127,.15);
    --purple:#7c3aed;
    --purple-glow:rgba(124,58,237,.15);
    --blue:#3b82f6;
    --red:#ef4444;
    --orange:#f59e0b;
    --sidebar-w:260px;
    --msg-w:48rem;
    --blur:20px;
    --blur-sm:12px;
    --r-lg:16px;
    --r-md:12px;
    --r-sm:8px;
    --r-xs:6px;
    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(0,0,.2,1);
    --shadow-sm:0 1px 2px rgba(0,0,0,.15);
    --shadow-md:0 4px 16px rgba(0,0,0,.25);
    --shadow-lg:0 8px 32px rgba(0,0,0,.4);
    --shadow-xl:0 16px 48px rgba(0,0,0,.5);
}

html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:transparent;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.07);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}

/* ====== LAYOUT ====== */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden;position:relative}

.app::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 600px 600px at 10% 20%, rgba(16,163,127,.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 90% 80%, rgba(124,58,237,.07) 0%, transparent 70%),
        radial-gradient(ellipse 400px 400px at 50% 50%, rgba(59,130,246,.04) 0%, transparent 70%);
    animation:bgShift 20s ease-in-out infinite alternate;
}
@keyframes bgShift{
    0%{opacity:.8;filter:hue-rotate(0deg)}
    50%{opacity:1;filter:hue-rotate(10deg)}
    100%{opacity:.8;filter:hue-rotate(-10deg)}
}

/* ====== SIDEBAR ====== */
.sidebar{
    width:var(--sidebar-w);
    background:rgba(15,15,20,.7);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    border-right:1px solid var(--border-glass);
    display:flex;flex-direction:column;
    flex-shrink:0;
    position:relative;z-index:2;
    transition:width .2s var(--ease);
}

/* Sidebar header */
.sidebar-header{padding:8px 10px 0;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.sidebar-brand{display:flex;align-items:center;gap:8px;padding:2px 6px}
.sidebar-logo-img{width:24px;height:24px;border-radius:5px;flex-shrink:0}
.sidebar-logo-text{font-size:.92rem;font-weight:700;color:var(--text);white-space:nowrap;letter-spacing:-.01em}

/* Sidebar close/collapse toggle */
.sidebar-close{
    display:flex;
    background:none;border:none;color:var(--text-3);
    cursor:pointer;padding:5px;border-radius:var(--r-sm);
    transition:all .15s var(--ease);align-items:center;
}
.sidebar-close:hover{background:var(--bg-hover);color:var(--text)}
/* Sidebar plan badge — collapsed da ko'rinadi, ochiq da yashirinadi */
.sidebar-plan-badge{
    display:inline-flex;
    padding:5px;
    border-radius:8px;
    border:none;cursor:pointer;
    font-family:inherit;
    align-items:center;justify-content:center;
    transition:all .15s;
}
.sidebar-plan-badge.free{
    background:rgba(16,163,127,.1);
    color:var(--green);
}
.sidebar-plan-badge.free:hover{
    background:rgba(16,163,127,.2);
    box-shadow:0 0 12px rgba(16,163,127,.12);
}
.sidebar-plan-badge.pro{
    background:linear-gradient(135deg,rgba(16,163,127,.2),rgba(45,212,191,.15));
    color:#2dd4bf;
}
.sidebar-plan-badge.admin{
    background:rgba(124,58,237,.15);
    color:#a78bfa;
}

/* Desktop: panel icon ko'rinadi, ✕ yashiriladi */
.sidebar-close-collapse{display:block}
.sidebar-close-x{display:none}

/* Desktop collapse */
.sidebar.collapsed{width:52px}
.sidebar.collapsed .sidebar-header{padding:6px 4px 0;justify-content:flex-end}
.sidebar.collapsed .sidebar-logo-text{display:none}
.sidebar.collapsed .sidebar-brand{display:none}
.sidebar.collapsed .sidebar-plan-badge{font-size:.5rem;padding:2px 5px}
.sidebar.collapsed .sidebar-close{margin:0}
.sidebar.collapsed .sidebar-list{display:none}
.sidebar.collapsed .sidebar-nav{padding:6px 4px 4px;border-bottom:1px solid var(--border-glass)}
.sidebar.collapsed .sidebar-nav-divider{margin:4px 2px}
.sidebar.collapsed .nav-item{justify-content:center;padding:8px;gap:0}
.sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-item .nav-pro{display:none}
.sidebar.collapsed .nav-icon{width:20px;height:20px;opacity:.85}
.sidebar.collapsed .sidebar-footer{padding:6px 4px;flex-direction:column;align-items:center;gap:4px;margin-top:auto}
.sidebar.collapsed .sidebar-user{padding:4px;gap:0;justify-content:center}
.sidebar.collapsed .user-info{display:none}
.sidebar.collapsed .user-avatar{width:30px;height:30px;font-size:.7rem}
.sidebar.collapsed .sidebar-upgrade-btn{display:none}
.sidebar.collapsed .sidebar-login-btn{padding:8px;gap:0;font-size:0;width:auto}
.sidebar.collapsed .sidebar-login-btn svg{margin:0}

/* Menu toggle (mobile) */
.menu-toggle{
    display:none;background:none;border:none;
    color:var(--text-2);cursor:pointer;
    padding:8px;border-radius:var(--r-sm);
    transition:all .15s;
}
.menu-toggle:hover{background:var(--bg-hover)}
.header-title{font-size:.9rem;font-weight:600;color:var(--text-2)}

/* ====== SIDEBAR NAV ====== */
.sidebar-nav{
    padding:6px 6px 4px;
    display:flex;flex-direction:column;gap:1px;
    border-bottom:1px solid var(--border-glass);
}
.sidebar-nav-divider{height:1px;background:var(--border-glass);margin:4px 8px}
.nav-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;
    background:none;border:none;
    border-radius:var(--r-sm);
    color:var(--text-2);font-size:.84rem;font-weight:400;
    cursor:pointer;transition:all .15s var(--ease);
    font-family:inherit;text-align:left;width:100%;
}
.nav-item:first-child{color:var(--text);font-weight:500}
.nav-item:hover{background:var(--bg-hover);color:var(--text)}
.nav-item:hover .nav-icon{color:var(--text);opacity:1}
.nav-item.active{background:rgba(16,163,127,.08);color:var(--green)}
.nav-item.active .nav-icon{color:var(--green);opacity:1}

.nav-icon{
    width:18px;height:18px;flex-shrink:0;
    color:var(--text-3);opacity:.7;transition:all .15s;
}
.nav-item:first-child .nav-icon{color:var(--text-2);opacity:.8}
.nav-pro{
    margin-left:auto;padding:1px 5px;
    background:linear-gradient(135deg,rgba(16,163,127,.2),rgba(45,212,191,.15));
    color:#2dd4bf;font-size:.55rem;font-weight:700;
    border-radius:4px;line-height:1.4;letter-spacing:.4px;
}
.nav-new{
    margin-left:auto;padding:1px 6px;
    background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(99,102,241,.2));
    color:#93c5fd;font-size:.55rem;font-weight:700;
    border-radius:4px;line-height:1.4;letter-spacing:.4px;
}
.nav-divider{
    height:1px;margin:4px 10px;
    background:rgba(255,255,255,.04);
}
.nav-bot-link{text-decoration:none}
.nav-bot-link .nav-icon{color:var(--green);opacity:.8}
.nav-bot-link:hover .nav-icon{color:var(--green);opacity:1}
.nav-bot-link:hover{color:var(--green);background:rgba(16,163,127,.08)}
.nav-bot-create{text-decoration:none}
.nav-bot-create .nav-icon{color:var(--blue);opacity:.8}
.nav-bot-create:hover .nav-icon{color:var(--blue);opacity:1}
.nav-bot-create:hover{color:var(--blue);background:rgba(59,130,246,.08)}

/* Conversation list */
.sidebar-list{flex:1;overflow-y:auto;padding:2px 6px}
.sidebar-group{
    padding:10px 10px 4px;
    font-size:.65rem;font-weight:600;
    color:var(--text-4);
    text-transform:uppercase;letter-spacing:.7px;
}
.conv-item{
    display:flex;align-items:center;
    padding:8px 12px;margin:1px 0;
    border-radius:var(--r-sm);cursor:pointer;
    font-size:.84rem;color:var(--text-2);
    transition:all .15s var(--ease);position:relative;overflow:hidden;
}
.conv-item::after{
    content:'';position:absolute;right:0;top:0;bottom:0;width:40px;
    background:linear-gradient(90deg,transparent,rgba(15,15,20,.7));
    pointer-events:none;transition:background .15s;
}
.conv-item:hover::after{background:linear-gradient(90deg,transparent,rgba(30,30,40,.8))}
.conv-item.active::after{background:linear-gradient(90deg,transparent,rgba(16,163,127,.1))}
.conv-item:hover{background:var(--bg-hover);color:var(--text)}
.conv-item.active{
    background:rgba(16,163,127,.08);
    border:1px solid rgba(16,163,127,.12);
    color:var(--text);
}
.conv-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-actions{display:none;flex-shrink:0;margin-left:4px;z-index:1;position:relative}
.conv-item:hover .conv-actions{display:flex}
.conv-dots{
    background:none;border:none;color:var(--text-3);
    cursor:pointer;padding:4px 6px;font-size:1rem;
    line-height:1;border-radius:4px;
}
.conv-dots:hover{color:#fff;background:rgba(255,255,255,.12)}

/* Sidebar footer */
.sidebar-footer{
    padding:8px;
    border-top:1px solid var(--border-glass);
    display:flex;align-items:center;gap:6px;
    background:rgba(255,255,255,.02);
}
.sidebar-user{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding:4px 6px;border-radius:var(--r-sm);transition:.15s;cursor:pointer}
.sidebar-user:hover{background:var(--bg-hover)}
.user-avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,var(--green),#2dd4bf);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.8rem;color:#fff;flex-shrink:0;
    box-shadow:0 2px 8px rgba(16,163,127,.3);
}
.user-info{display:flex;flex-direction:column;min-width:0}
.user-name{font-size:.82rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-balance{font-size:.7rem;color:var(--green)}
.sidebar-logout{
    color:var(--text-3);padding:6px;border-radius:var(--r-xs);
    transition:.15s;text-decoration:none;display:flex;align-items:center;
}
.sidebar-logout:hover{color:var(--red);background:rgba(239,68,68,.08)}
.sidebar-login-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:10px;
    background:linear-gradient(135deg,var(--green),#059669);
    border:none;
    border-radius:var(--r-sm);color:#fff;font-size:.85rem;
    font-weight:600;cursor:pointer;transition:.2s;
    width:100%;font-family:inherit;
    box-shadow:0 2px 12px rgba(16,163,127,.25);
}
.sidebar-login-btn:hover{
    background:linear-gradient(135deg,#0d8a6b,#047857);
    box-shadow:0 4px 20px rgba(16,163,127,.35);
    transform:translateY(-1px);
}

/* ====== CHAT MAIN ====== */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;z-index:1}

/* Header */
.chat-header{
    display:flex;align-items:center;
    padding:8px 12px;flex-shrink:0;
    min-height:48px;
    background:rgba(10,10,15,.5);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    border-bottom:1px solid var(--border-glass);
    position:relative;z-index:5;
}
.header-center{flex:1;display:flex;align-items:center;justify-content:flex-start;padding-left:4px}
.header-right{display:flex;align-items:center;position:relative}

.model-selector{
    display:flex;align-items:center;gap:4px;
    background:none;border:none;
    color:var(--text);font-size:.95rem;font-weight:700;
    cursor:pointer;padding:6px 10px;
    border-radius:var(--r-sm);font-family:inherit;
    transition:.15s;
}
.model-selector:hover{background:var(--bg-hover)}
.model-selector svg{opacity:.4;margin-top:1px;transition:transform .2s}
.model-selector-wrap{position:relative}
.model-selector-wrap.open .model-selector svg{transform:rotate(180deg)}
.model-dropdown{
    display:none;
    position:absolute;top:calc(100% + 8px);left:0;
    min-width:240px;
    background:rgba(20,20,28,.94);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-md);
    padding:6px;
    box-shadow:var(--shadow-xl);
    z-index:100;
    animation:dropdownIn .2s var(--ease);
}
.model-selector-wrap.open .model-dropdown{display:block}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.model-dropdown-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;
    color:var(--text-2);font-size:.86rem;font-weight:500;
    border-radius:var(--r-sm);
    cursor:pointer;text-decoration:none;
    transition:.12s;
}
.model-dropdown-item:hover{background:rgba(255,255,255,.07);color:var(--text)}
.model-dropdown-item svg{opacity:.5;flex-shrink:0}
.model-dropdown-item:hover svg{opacity:1}
.model-dropdown-item.muted{color:var(--text-4);font-size:.76rem;pointer-events:none}
.model-dropdown-item.muted svg{opacity:.3}

/* Header 3-dot menu */
.header-menu-btn{
    background:none;border:none;color:var(--text-3);
    cursor:pointer;padding:8px;border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;
    transition:.15s;position:relative;
}
.header-menu-btn:hover{background:var(--bg-hover);color:var(--text)}
.header-menu-dropdown{
    display:none;
    position:absolute;top:calc(100% + 6px);right:0;
    min-width:200px;
    background:rgba(20,20,28,.94);
    backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-md);
    padding:6px;
    box-shadow:var(--shadow-xl);
    z-index:100;animation:dropdownIn .2s var(--ease);
}
.header-menu-dropdown.open{display:block}
.hm-item{
    display:flex;align-items:center;gap:10px;
    width:100%;padding:10px 14px;
    background:none;border:none;
    color:var(--text-2);font-size:.86rem;font-weight:500;
    border-radius:var(--r-sm);
    cursor:pointer;text-decoration:none;
    transition:.12s;font-family:inherit;
}
.hm-item:hover{background:rgba(255,255,255,.07);color:var(--text)}
.hm-item svg{opacity:.5;flex-shrink:0}
.hm-item:hover svg{opacity:1}
.hm-item.hm-danger:hover{color:var(--red);background:rgba(239,68,68,.07)}
.hm-item.hm-danger:hover svg{opacity:1}

/* Header plan upgrade button */
.header-plan-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;
    background:linear-gradient(135deg,rgba(16,163,127,.15),rgba(16,163,127,.08));
    border:1px solid rgba(16,163,127,.2);
    border-radius:20px;
    color:var(--green);font-size:.82rem;font-weight:600;
    cursor:pointer;font-family:inherit;
    transition:all .2s;
}
.header-plan-btn:hover{
    background:linear-gradient(135deg,rgba(16,163,127,.25),rgba(16,163,127,.15));
    border-color:rgba(16,163,127,.35);
    box-shadow:0 2px 12px rgba(16,163,127,.15);
    transform:translateY(-1px);
}
.header-plan-btn svg{opacity:.8}
.header-plan-btn:hover svg{opacity:1}

.header-login-btn{
    padding:7px 18px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    border:1px solid var(--border-glass-2);
    color:var(--text);
    border-radius:24px;
    font-size:.84rem;font-weight:600;
    cursor:pointer;font-family:inherit;
    transition:all .2s var(--ease);
}
.header-login-btn:hover{
    background:rgba(255,255,255,.12);
    border-color:var(--border-glass-3);
    box-shadow:0 2px 12px rgba(255,255,255,.04);
}

/* ====== MESSAGES ====== */
.messages-area{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.messages-inner{max-width:var(--msg-w);margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:4px;padding-bottom:16px}

/* Welcome */
.welcome{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    min-height:65vh;text-align:center;
    padding:40px 20px;
}
.welcome-logo{
    width:60px;height:60px;border-radius:50%;
    background:rgba(16,163,127,.06);
    border:1px solid rgba(16,163,127,.15);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:28px;
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    box-shadow:0 0 40px rgba(16,163,127,.1), inset 0 1px 0 rgba(255,255,255,.04);
    animation:logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse{
    0%,100%{box-shadow:0 0 30px rgba(16,163,127,.08), inset 0 1px 0 rgba(255,255,255,.04)}
    50%{box-shadow:0 0 50px rgba(16,163,127,.15), inset 0 1px 0 rgba(255,255,255,.08)}
}
.welcome-logo svg{width:28px;height:28px}
.welcome-logo img{width:50px;height:50px;border-radius:50%}
.welcome h2{
    font-size:1.2rem;font-weight:600;
    margin-bottom:20px;color:var(--text-2);letter-spacing:-.02em;
    letter-spacing:-.03em;
}

/* Suggestions */
.suggestions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    max-width:480px;width:100%;
}
.suggestion{
    display:flex;align-items:center;
    gap:11px;
    padding:12px 16px;
    background:var(--bg-glass);
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    border:1px solid var(--border-glass);
    border-radius:var(--r-md);
    color:var(--text-2);
    cursor:pointer;
    transition:all .2s var(--ease);
    font-family:inherit;text-align:left;
    overflow:hidden;
}
.suggestion:hover{
    background:var(--bg-glass-2);
    border-color:var(--border-glass-2);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}
.suggestion-icon{font-size:1.1rem;flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass-2);border-radius:8px}
.suggestion-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.suggestion-title{font-weight:600;color:var(--text);font-size:.82rem}
.suggestion-desc{color:var(--text-4);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ====== MESSAGE ROWS ====== */
.msg-row{display:flex;flex-direction:column;padding:6px 0;animation:msgIn .35s var(--ease);max-width:85%}
.msg-row.ai-msg{align-self:flex-start;align-items:flex-start}
.msg-row.user-msg{align-self:flex-end;align-items:flex-end}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Message content — bubbles */
.msg-content{
    line-height:1.65;font-size:.9rem;
    color:var(--text);
    word-wrap:break-word;overflow-wrap:break-word;
    padding:10px 14px;border-radius:16px;
}
.ai-msg .msg-content{
    background:var(--bg-glass-2);
    border:1px solid var(--border-glass);
    border-top-left-radius:4px;
    color:var(--text);
}
.user-msg .msg-content{
    background:linear-gradient(135deg,rgba(16,163,127,.18),rgba(16,163,127,.08));
    border:1px solid rgba(16,163,127,.2);
    border-top-right-radius:4px;
    color:#fff;
}

/* Markdown in messages */
.msg-content strong{font-weight:700;color:#fff}
.msg-content em{font-style:italic;color:#ccc}
.msg-content code{
    background:rgba(255,255,255,.06);
    padding:2px 7px;
    border-radius:5px;
    font-family:'SF Mono','Fira Code','JetBrains Mono','Consolas',monospace;
    font-size:.84em;color:#c4b5fd;
    border:1px solid rgba(255,255,255,.04);
}
.msg-content pre{
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    border:1px solid var(--border-glass);
    border-radius:var(--r-md);
    padding:16px;margin:12px 0;overflow-x:auto;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
}
.msg-content pre code{
    background:none;padding:0;border:none;
    color:#e0e0e0;font-size:.84rem;
    display:block;white-space:pre;
    word-break:normal;overflow-wrap:normal;
}
.msg-content ul,.msg-content ol{padding-left:22px;margin:8px 0}
.msg-content li{margin:4px 0;line-height:1.7}
.msg-content blockquote{
    border-left:3px solid var(--green);padding:8px 16px;
    margin:8px 0;
    background:rgba(16,163,127,.04);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    color:var(--text-2);
}
.msg-content a{color:#93c5fd;text-decoration:none;transition:color .15s}
.msg-content a:hover{text-decoration:underline;color:#bfdbfe}
.msg-content p{margin:6px 0}
.msg-content p:first-child{margin-top:0}
.msg-content p:last-child{margin-bottom:0}
.msg-content hr{border:none;height:1px;background:var(--border-glass-2);margin:14px 0}

/* Code header */
.code-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 16px;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    border-radius:var(--r-md) var(--r-md) 0 0;
    font-size:.78rem;color:var(--text-3);
    border:1px solid var(--border-glass);border-bottom:none;
}
.code-header+pre{margin-top:0;border-top:none;border-radius:0 0 var(--r-md) var(--r-md)}
.copy-btn{
    background:none;border:none;color:var(--text-3);
    cursor:pointer;font-size:.78rem;padding:4px 10px;
    border-radius:var(--r-xs);transition:.15s;
    font-family:inherit;display:flex;align-items:center;gap:5px;
}
.copy-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.copy-btn.copied{color:var(--green)}

/* Msg actions */
.msg-actions{
    margin-top:4px;
    opacity:0;transition:opacity .2s;display:flex;gap:2px;
}
.msg-row:hover .msg-actions{opacity:1}
.msg-copy{
    background:none;border:none;color:var(--text-3);
    cursor:pointer;font-size:.76rem;
    display:flex;align-items:center;gap:4px;
    padding:4px 8px;border-radius:var(--r-xs);
    font-family:inherit;transition:.15s;
}
.msg-copy:hover{color:#fff;background:var(--bg-hover)}

/* TTS button */
.msg-tts{
    background:none;border:none;color:var(--text-3);
    cursor:pointer;font-size:.76rem;
    display:inline-flex;align-items:center;gap:4px;
    padding:4px 8px;border-radius:var(--r-xs);
    font-family:inherit;transition:.15s;
}
.msg-tts:hover{color:var(--green);background:var(--bg-hover)}
.msg-tts.playing{color:var(--green);background:rgba(16,163,127,.08)}

/* Typing */
.typing-indicator{display:flex;gap:5px;padding:8px 16px}
.typing-indicator span{
    width:7px;height:7px;border-radius:50%;
    background:var(--green);animation:bounce 1.4s infinite;
    box-shadow:0 0 10px rgba(16,163,127,.25);
}
.typing-indicator span:nth-child(2){animation-delay:.15s}
.typing-indicator span:nth-child(3){animation-delay:.3s}
@keyframes bounce{
    0%,60%,100%{transform:translateY(0);opacity:.3}
    30%{transform:translateY(-6px);opacity:1}
}

/* Streaming cursor */
.streaming-cursor::after{
    content:'';display:inline-block;
    width:2px;height:1em;background:var(--green);
    margin-left:2px;animation:blink .7s infinite;
    vertical-align:text-bottom;
    box-shadow:0 0 8px rgba(16,163,127,.4);
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Active action chip */
.input-wrapper.action-active{
    border-color:rgba(16,163,127,.25);
    box-shadow:0 4px 16px rgba(0,0,0,.15),0 0 0 1px rgba(16,163,127,.06);
}
.active-action-chip{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px 3px 7px;
    background:rgba(16,163,127,.1);
    border:1px solid rgba(16,163,127,.2);
    border-radius:14px;
    color:var(--green);font-size:.74rem;font-weight:500;
    flex-shrink:0;white-space:nowrap;margin-right:2px;
    animation:chipIn .2s var(--ease);
}
.active-action-chip .chip-close{
    background:none;border:none;color:var(--green);
    cursor:pointer;font-size:.85rem;line-height:1;
    padding:0 0 0 2px;opacity:.6;transition:.15s;
}
.active-action-chip .chip-icon{width:13px;height:13px;color:var(--green);flex-shrink:0}
.active-action-chip .chip-close:hover{opacity:1}
@keyframes chipIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ====== INPUT AREA ====== */
.input-area{padding:0 16px 24px;padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));flex-shrink:0;position:relative;z-index:2}
.input-container{max-width:var(--msg-w);margin:0 auto}
.input-row{display:flex;align-items:stretch;gap:8px}

/* Attach button */
.attach-btn{
    width:48px;min-height:48px;border-radius:50%;border:none;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-3);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s var(--ease);flex-shrink:0;
}
.attach-btn:hover{color:var(--green);background:rgba(16,163,127,.08);border-color:rgba(16,163,127,.18)}
.attach-btn:active{transform:scale(.93)}

/* Image Preview Overlay */
.img-preview-overlay{
    display:none;position:fixed;inset:0;z-index:200;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    align-items:center;justify-content:center;padding:16px;
}
.img-preview-overlay.open{display:flex}
.img-preview-card{
    background:rgba(20,20,28,.9);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border-glass-2);
    border-radius:20px;width:100%;max-width:420px;
    box-shadow:var(--shadow-xl);
    overflow:hidden;animation:fadeUp .25s var(--ease);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.img-preview-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--border-glass);
    font-weight:600;font-size:.92rem;color:var(--text);
}
.img-preview-close{
    background:none;border:none;color:var(--text-3);cursor:pointer;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;transition:.15s;
}
.img-preview-close:hover{background:var(--bg-hover);color:var(--text)}
.img-preview-body{
    padding:16px;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.12);min-height:200px;max-height:50vh;
}
.img-preview-body img{
    max-width:100%;max-height:48vh;border-radius:14px;
    object-fit:contain;display:block;
}
.img-preview-caption{padding:0 16px 12px}
.img-preview-caption input{
    width:100%;padding:11px 16px;border-radius:var(--r-md);
    background:rgba(255,255,255,.05);border:1px solid var(--border-glass);
    color:var(--text);font-size:.88rem;font-family:inherit;outline:none;
    transition:all .2s;
}
.img-preview-caption input:focus{border-color:rgba(16,163,127,.35);box-shadow:0 0 0 3px rgba(16,163,127,.06)}
.img-preview-caption input::placeholder{color:var(--text-4)}
.img-preview-actions{
    display:flex;gap:10px;padding:12px 16px 16px;justify-content:flex-end;
}
.img-preview-cancel{
    padding:10px 20px;border-radius:var(--r-md);border:1px solid var(--border-glass);
    background:none;color:var(--text-2);font-size:.88rem;font-family:inherit;
    cursor:pointer;transition:.15s;
}
.img-preview-cancel:hover{background:var(--bg-hover)}
.img-preview-send{
    padding:10px 24px;border-radius:var(--r-md);border:none;
    background:var(--green);color:#fff;font-size:.88rem;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .15s;
    display:flex;align-items:center;gap:6px;
}
.img-preview-send:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(16,163,127,.2)}
.img-preview-send:active{transform:scale(.97)}

/* Input wrapper */
.input-wrapper{
    display:flex;align-items:flex-end;
    flex:1;min-width:0;
    background:var(--bg-glass-2);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    border:1px solid var(--border-glass-2);
    border-radius:26px;
    padding:4px 8px 4px 20px;
    transition:all .25s var(--ease);
    box-shadow:0 4px 20px rgba(0,0,0,.12);
}
.input-wrapper:focus-within{
    border-color:rgba(16,163,127,.25);
    box-shadow:0 4px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(16,163,127,.06);
    background:var(--bg-glass-3);
}

#chatInput{
    flex:1;background:none;border:none;
    color:var(--text);font-size:.94rem;
    font-family:inherit;resize:none;outline:none;
    max-height:200px;min-height:24px;
    line-height:1.55;padding:10px 0;
}
#chatInput::placeholder{color:var(--text-4)}

/* Voice button */
.voice-btn{
    width:34px;height:34px;border-radius:50%;
    background:transparent;border:none;
    color:var(--text-3);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;flex-shrink:0;margin-bottom:3px;
}
.voice-btn:hover{color:var(--text);background:var(--bg-hover)}
.voice-btn.recording{
    color:#fff;background:#ef4444;
    animation:voice-pulse 1.2s ease-in-out infinite;
    box-shadow:0 0 14px rgba(239,68,68,.5);
}
@keyframes voice-pulse{
    0%,100%{box-shadow:0 0 8px rgba(239,68,68,.4)}
    50%{box-shadow:0 0 22px rgba(239,68,68,.7)}
}

/* ====== VOICE CHAT OVERLAY ====== */
.vc-overlay{
    position:fixed;inset:0;z-index:9999;
    background:#060612;
    display:none;flex-direction:column;
    opacity:0;transition:opacity .35s ease;
    padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.vc-overlay.open{display:flex;opacity:1}
.vc-overlay::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 50% 50% at 30% 20%, rgba(99,102,241,.1) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 70% 80%, rgba(16,163,127,.06) 0%, transparent 70%);
    pointer-events:none;
}

.vc-container{
    display:flex;flex-direction:column;
    width:100%;max-width:480px;height:100%;
    margin:0 auto;padding:0;position:relative;z-index:1;
}

.vc-topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;flex-shrink:0;
}
.vc-call-info{text-align:center;flex:1}
.vc-call-label{
    font-size:.94rem;font-weight:700;color:rgba(255,255,255,.9);
    letter-spacing:.2px;
}
.vc-call-timer{
    font-size:.75rem;color:rgba(255,255,255,.35);
    font-variant-numeric:tabular-nums;margin-top:3px;
    font-family:'SF Mono','Fira Code','JetBrains Mono','Consolas',monospace;
}
.vc-close{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
    color:rgba(255,255,255,.45);cursor:pointer;
    width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:all .2s;flex-shrink:0;
}
.vc-close:hover{color:#fff;background:rgba(255,255,255,.12)}

.vc-visual-area{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:0 24px;min-height:0;
}
.vc-status{
    color:rgba(255,255,255,.45);font-size:.82rem;font-weight:500;
    letter-spacing:1px;text-transform:uppercase;
    margin-bottom:24px;min-height:20px;transition:all .3s;
}

/* Orb */
.vc-orb-wrap{
    position:relative;width:220px;height:220px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:24px;
}
.vc-orb{
    width:120px;height:120px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;transition:all .4s ease;
}
.vc-orb-inner{
    width:100%;height:100%;border-radius:50%;
    background:linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
    box-shadow:0 0 40px rgba(99,102,241,.2), 0 0 80px rgba(99,102,241,.1);
    transition:all .4s;
}
.vc-orb-ring{
    position:absolute;border-radius:50%;
    border:1px solid rgba(99,102,241,.08);
    transition:all .4s;
}
.vc-ring-1{width:150px;height:150px;animation:vc-ring 4s ease-in-out infinite}
.vc-ring-2{width:180px;height:180px;animation:vc-ring 4s ease-in-out infinite .7s}
.vc-ring-3{width:210px;height:210px;animation:vc-ring 4s ease-in-out infinite 1.4s}

/* Waveform */
.vc-waveform{
    display:flex;align-items:center;justify-content:center;gap:3px;
    height:40px;margin-bottom:16px;opacity:0;transition:opacity .3s;
}
.vc-waveform span{
    width:3px;border-radius:2px;
    background:rgba(99,102,241,.35);
    height:4px;transition:height .15s ease;
}

/* Voice states */
.vc-overlay.idle .vc-orb-inner{
    background:linear-gradient(135deg, #1e1b4b, #312e81);
    box-shadow:0 0 30px rgba(99,102,241,.12);
}
.vc-overlay.idle .vc-status{color:rgba(255,255,255,.35)}
.vc-overlay.idle .vc-waveform{opacity:0}

.vc-overlay.connecting .vc-orb-inner{
    background:linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
    animation:vc-connecting 1.5s ease-in-out infinite;
}
@keyframes vc-connecting{
    0%,100%{box-shadow:0 0 30px rgba(99,102,241,.2)}
    50%{box-shadow:0 0 60px rgba(99,102,241,.4)}
}

.vc-overlay.listening .vc-orb-inner{
    background:linear-gradient(135deg, #6366f1, #818cf8, #a78bfa);
    box-shadow:0 0 50px rgba(99,102,241,.5), 0 0 100px rgba(99,102,241,.2);
    animation:vc-pulse-listen 1.8s ease-in-out infinite;
}
.vc-overlay.listening .vc-orb-ring{border-color:rgba(99,102,241,.18)}
.vc-overlay.listening .vc-waveform{opacity:1}
.vc-overlay.listening .vc-waveform span{background:rgba(99,102,241,.6)}
.vc-overlay.listening .vc-status{color:#a78bfa}

.vc-overlay.processing .vc-orb-inner{
    background:linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    animation:vc-spin 2s linear infinite;
    box-shadow:0 0 50px rgba(245,158,11,.4), 0 0 100px rgba(245,158,11,.15);
}
.vc-overlay.processing .vc-orb-ring{border-color:rgba(245,158,11,.12)}
.vc-overlay.processing .vc-waveform{opacity:.3}
.vc-overlay.processing .vc-waveform span{background:rgba(245,158,11,.5);height:4px !important}
.vc-overlay.processing .vc-status{color:#fbbf24}

.vc-overlay.thinking .vc-orb-inner{
    background:linear-gradient(135deg, #d97706, #f59e0b, #fbbf24);
    animation:vc-spin 1.5s linear infinite;
    box-shadow:0 0 60px rgba(245,158,11,.5), 0 0 120px rgba(245,158,11,.2);
}
.vc-overlay.thinking .vc-orb-ring{border-color:rgba(245,158,11,.15)}
.vc-overlay.thinking .vc-waveform{opacity:.4}
.vc-overlay.thinking .vc-waveform span{background:rgba(245,158,11,.4)}
.vc-overlay.thinking .vc-status{color:#fbbf24}

.vc-overlay.speaking .vc-orb-inner{
    background:linear-gradient(135deg, #059669, #10a37f, #34d399);
    animation:vc-pulse-speak .8s ease-in-out infinite;
    box-shadow:0 0 60px rgba(16,163,127,.5), 0 0 120px rgba(16,163,127,.2);
}
.vc-overlay.speaking .vc-orb-ring{border-color:rgba(16,163,127,.18)}
.vc-overlay.speaking .vc-waveform{opacity:1}
.vc-overlay.speaking .vc-waveform span{background:rgba(16,163,127,.6)}
.vc-overlay.speaking .vc-status{color:#34d399}

@keyframes vc-pulse-listen{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes vc-pulse-speak{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vc-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes vc-ring{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.03);opacity:.7}}

/* Voice text area */
.vc-text-area{padding:0 24px 12px;text-align:center;flex-shrink:0;min-height:80px}
.vc-transcript{
    color:rgba(255,255,255,.35);font-size:.84rem;
    min-height:20px;margin-bottom:6px;
    font-style:italic;transition:all .3s;
    max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
}
.vc-transcript.active{color:rgba(255,255,255,.85);font-style:normal;white-space:normal}
.vc-response{
    color:#fff;font-size:.92rem;line-height:1.5;
    min-height:24px;max-height:120px;overflow-y:auto;
    font-weight:400;-webkit-overflow-scrolling:touch;
}

/* Voice controls */
.vc-controls{
    display:flex;align-items:center;justify-content:center;
    gap:24px;padding:20px 24px 28px;flex-shrink:0;
}
.vc-ctrl-btn{
    border:none;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.vc-mute-btn{
    width:52px;height:52px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.55);
}
.vc-mute-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.vc-mute-btn.muted{
    background:rgba(239,68,68,.12);
    border-color:rgba(239,68,68,.25);
    color:#f87171;
}
.vc-mic-main{
    width:72px;height:72px;
    background:linear-gradient(135deg, #4338ca, #6366f1);
    color:#fff;
    box-shadow:0 4px 24px rgba(99,102,241,.35);
}
.vc-mic-main:hover{transform:scale(1.05);box-shadow:0 6px 32px rgba(99,102,241,.45)}
.vc-mic-main.recording{
    background:linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow:0 4px 24px rgba(239,68,68,.45);
    animation:vc-mic-pulse 1.5s ease-in-out infinite;
}
@keyframes vc-mic-pulse{
    0%,100%{box-shadow:0 4px 24px rgba(239,68,68,.4)}
    50%{box-shadow:0 4px 40px rgba(239,68,68,.7)}
}
.vc-end-btn{
    width:52px;height:52px;
    background:linear-gradient(135deg, #dc2626, #ef4444);
    color:#fff;
    box-shadow:0 4px 16px rgba(239,68,68,.25);
}
.vc-end-btn:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(239,68,68,.35)}

/* TTS play button on messages */
.tts-btn{
    background:none;border:none;cursor:pointer;
    color:var(--text-3);padding:2px;margin-left:6px;
    display:inline-flex;align-items:center;
    transition:color .2s;vertical-align:middle;
}
.tts-btn:hover{color:var(--green)}
.tts-btn.playing{color:var(--green);animation:voice-pulse 1.2s ease-in-out infinite}

/* Send button */
.send-btn{
    width:34px;height:34px;border-radius:50%;
    background:var(--green);border:none;
    color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s var(--ease);flex-shrink:0;margin-bottom:3px;
    box-shadow:0 2px 10px rgba(16,163,127,.25);
}
.send-btn:hover:not(:disabled){
    background:#059669;
    transform:scale(1.08);
    box-shadow:0 4px 18px rgba(16,163,127,.35);
}
.send-btn:disabled{
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.12);
    cursor:default;
    box-shadow:none;
}

.input-disclaimer{
    margin:8px 0 0;font-size:.7rem;
    color:var(--text-4);text-align:center;
    letter-spacing:.01em;
}

/* ====== CONTEXT MENU ====== */
.context-menu{
    display:none;position:fixed;z-index:200;
    background:rgba(20,20,28,.92);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    border:1px solid var(--border-glass-2);
    border-radius:var(--r-md);padding:5px;
    min-width:180px;
    box-shadow:var(--shadow-xl);
    animation:ctxPop .15s var(--ease);
}
.context-menu.active{display:block}
@keyframes ctxPop{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ctx-item{
    display:flex;align-items:center;gap:10px;
    width:100%;padding:10px 14px;
    background:none;border:none;
    color:var(--text-2);font-size:.85rem;
    cursor:pointer;border-radius:var(--r-sm);
    transition:.15s;font-family:inherit;
}
.ctx-item:hover{background:rgba(255,255,255,.07);color:var(--text)}
.ctx-danger:hover{color:var(--red);background:rgba(239,68,68,.07)}

.conv-rename-input{
    background:rgba(255,255,255,.06);
    border:1px solid var(--green);
    border-radius:var(--r-xs);padding:7px 10px;
    color:#fff;font-size:.85rem;width:100%;
    outline:none;font-family:inherit;
    box-shadow:0 0 0 3px rgba(16,163,127,.1);
}

/* ====== AUTH OVERLAY ====== */
.auth-overlay{
    position:fixed;inset:0;z-index:500;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    display:none;align-items:center;justify-content:center;
    padding:20px;
}
.auth-overlay.active{display:flex}

.auth-modal{
    background:rgba(20,20,28,.82);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:36px 32px;
    max-width:420px;width:100%;position:relative;
    animation:modalUp .3s var(--ease);
    box-shadow:var(--shadow-xl),
        0 0 0 1px rgba(255,255,255,.03),
        inset 0 1px 0 rgba(255,255,255,.05);
}
@keyframes modalUp{
    from{opacity:0;transform:translateY(16px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.auth-modal-close{
    position:absolute;top:14px;right:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
    color:var(--text-4);
    font-size:1.3rem;cursor:pointer;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:.2s;line-height:1;
}
.auth-modal-close:hover{
    color:var(--text);
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.12);
}

.auth-modal-header{text-align:center;margin-bottom:24px}
.auth-modal-logo{
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;
}
.auth-modal-logo img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 4px 16px rgba(16,163,127,.15)}
.auth-modal-header h2{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.auth-modal-header p{font-size:.84rem;color:var(--text-3)}

/* Google Sign-In */
.google-signin-wrapper{
    display:flex;justify-content:center;
    margin-bottom:0;min-height:44px;
}

/* Auth Tabs */
.auth-tabs{
    display:flex;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border-glass);
    border-radius:var(--r-sm);padding:3px;
    margin-bottom:18px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.auth-tab{
    flex:1;padding:9px 0;border:none;background:none;
    color:var(--text-3);font-size:.84rem;font-weight:500;
    cursor:pointer;border-radius:var(--r-xs);
    transition:all .2s;font-family:inherit;
}
.auth-tab.active{
    background:linear-gradient(135deg,var(--green),#059669);
    color:#fff;
    box-shadow:0 2px 10px rgba(16,163,127,.2);
}
.auth-tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04)}

/* Auth forms */
.auth-form{display:block}
.auth-field{margin-bottom:12px}
.auth-field input{
    width:100%;padding:12px 16px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.07);
    border-radius:var(--r-sm);color:var(--text);
    font-size:.88rem;font-family:inherit;
    outline:none;transition:all .2s var(--ease);
}
.auth-field input:focus{
    border-color:rgba(16,163,127,.35);
    background:rgba(255,255,255,.06);
    box-shadow:0 0 0 3px rgba(16,163,127,.06);
}
.auth-field input::placeholder{color:var(--text-4)}

.remember-check{
    display:flex;align-items:center;gap:8px;
    font-size:.8rem;color:var(--text-3);
    margin-bottom:14px;cursor:pointer;user-select:none;
}
.remember-check input[type="checkbox"]{
    width:16px;height:16px;accent-color:var(--green);cursor:pointer;
}

.auth-submit-btn{
    width:100%;padding:12px;
    background:linear-gradient(135deg,var(--green),#059669);
    border:none;
    border-radius:var(--r-sm);color:#fff;
    font-size:.9rem;font-weight:600;
    font-family:inherit;cursor:pointer;
    transition:all .2s var(--ease);
    box-shadow:0 2px 14px rgba(16,163,127,.18);
}
.auth-submit-btn:hover{
    background:linear-gradient(135deg,#059669,#047857);
    box-shadow:0 4px 22px rgba(16,163,127,.28);
    transform:translateY(-1px);
}
.auth-submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.auth-error{
    margin-top:8px;font-size:.8rem;
    color:var(--red);text-align:center;min-height:16px;
}

.auth-divider{
    display:flex;align-items:center;gap:12px;
    margin:18px 0;color:var(--text-4);
    font-size:.76rem;
}
.auth-divider::before,.auth-divider::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
}

.auth-social{display:flex;flex-direction:column;gap:8px}
.auth-social-row{display:flex;gap:8px}
.auth-social-row .social-btn{flex:1}
.social-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:11px;
    background:rgba(255,255,255,.035);
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    border:1px solid rgba(255,255,255,.07);
    border-radius:var(--r-sm);
    color:var(--text-2);font-size:.84rem;font-weight:500;
    cursor:pointer;transition:all .2s var(--ease);font-family:inherit;
}
.social-btn:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.12);
    color:var(--text);
    transform:translateY(-1px);
}
.google-btn{position:relative;overflow:hidden}
.google-btn:hover{
    border-color:rgba(66,133,244,.25);
    box-shadow:0 4px 16px rgba(66,133,244,.08);
}
.auth-back-btn{
    display:inline-flex;align-items:center;gap:4px;
    background:none;border:none;color:var(--text-3);
    font-size:.82rem;cursor:pointer;padding:0;margin-bottom:14px;
    font-family:inherit;transition:.15s;
}
.auth-back-btn:hover{color:var(--text)}
.auth-phone-title{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:1rem;font-weight:600;margin-bottom:6px;text-align:center;
}
.telegram-btn:hover{
    color:#2aabee;
    border-color:rgba(42,171,238,.2);
    box-shadow:0 4px 16px rgba(42,171,238,.08);
}
.taxi-btn:hover{
    color:#f59e0b;
    border-color:rgba(245,158,11,.2);
    box-shadow:0 4px 16px rgba(245,158,11,.08);
}

/* ====== PHONE MODAL ====== */
.phone-overlay{
    position:fixed;inset:0;z-index:510;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    display:none;align-items:center;justify-content:center;
    padding:20px;
}
.phone-overlay.active{display:flex}
.phone-modal{
    background:rgba(20,20,28,.88);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:32px 28px;
    max-width:380px;width:100%;position:relative;
    animation:modalUp .3s var(--ease);
    box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.04);
}

/* ====== PROFILE PANEL ====== */
.profile-panel{
    position:absolute;inset:0;z-index:20;
    background:var(--bg);
    overflow-y:auto;
    animation:fadeSlideUp .3s var(--ease);
}
@keyframes fadeSlideUp{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
.profile-panel-inner{
    max-width:560px;width:100%;
    margin:0 auto;
    padding:20px 24px 40px;
}

/* Header */
.pp-header{
    display:flex;align-items:center;gap:12px;
    margin-bottom:20px;
}
.pp-back{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-3);cursor:pointer;
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:.2s;flex-shrink:0;
}
.pp-back:hover{background:rgba(255,255,255,.12);color:var(--text)}
.pp-header h2{font-size:1.05rem;font-weight:600;margin:0}

/* Hero: avatar + ism + statistika */
.pp-hero{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px;margin-bottom:16px;
    background:linear-gradient(160deg,rgba(16,163,127,.08) 0%,rgba(124,58,237,.06) 50%,rgba(59,130,246,.04) 100%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    position:relative;overflow:hidden;
}
.pp-hero::before{
    content:'';position:absolute;top:-40px;right:-20px;
    width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle,rgba(16,163,127,.1),transparent 70%);
    pointer-events:none;
}
.pp-hero-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1}

/* Avatar */
.pp-avatar-wrap{
    position:relative;
    width:56px;height:56px;
    border-radius:50%;
    cursor:pointer;
    flex-shrink:0;
}
.pp-avatar-img{
    width:56px;height:56px;border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(16,163,127,.3);
    box-shadow:0 4px 16px rgba(16,163,127,.15);
    transition:all .2s;
}
.pp-avatar-letter{
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--green),#2dd4bf);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1.4rem;color:#fff;
    border:2px solid rgba(16,163,127,.3);
    box-shadow:0 4px 16px rgba(16,163,127,.15);
    transition:all .2s;
}
.pp-avatar-overlay{
    position:absolute;inset:0;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s;
    cursor:pointer;
}
.pp-avatar-overlay svg{color:#fff}
.pp-avatar-wrap:hover .pp-avatar-overlay{opacity:1}
.pp-avatar-wrap:hover .pp-avatar-img,
.pp-avatar-wrap:hover .pp-avatar-letter{border-color:rgba(16,163,127,.5)}
.pp-avatar-wrap.uploading .pp-avatar-overlay{opacity:1;background:rgba(0,0,0,.65)}
.pp-avatar-spin{
    width:20px;height:20px;
    border:2px solid rgba(255,255,255,.2);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.pp-hero-info{min-width:0;flex:1}
.pp-user-name{display:block;font-size:1rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-user-email{display:block;font-size:.78rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}

.pp-hero-stats{display:flex;gap:16px;flex-shrink:0}
.pp-mini-stat{text-align:center}
.pp-mini-val{display:block;font-size:.9rem;font-weight:700;color:var(--text)}
.pp-mini-val small{font-size:.65rem;color:var(--text-4);font-weight:400}
.pp-mini-lbl{display:block;font-size:.55rem;color:var(--text-4);text-transform:uppercase;letter-spacing:.3px;margin-top:1px}

/* Sidebar avatar */
.user-avatar-img{
    width:34px;height:34px;border-radius:50%;
    object-fit:cover;flex-shrink:0;
}

/* Sections */
.pp-section{
    margin-bottom:16px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    padding:16px;
}
.pp-section-title{
    display:flex;align-items:center;gap:8px;
    font-size:.72rem;font-weight:600;color:var(--text-3);
    text-transform:uppercase;letter-spacing:.5px;
    margin-bottom:12px;padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.pp-section-title svg{opacity:.5}

/* Form grid */
.pp-form{}
.pp-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.pp-field{}
.pp-field label{
    display:block;font-size:.7rem;color:var(--text-3);
    margin-bottom:4px;font-weight:500;
}
.pp-field input{
    width:100%;padding:10px 12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;color:var(--text);
    font-size:.85rem;font-family:inherit;outline:none;
    transition:all .2s var(--ease);
}
.pp-field input:focus{
    border-color:rgba(16,163,127,.4);
    background:rgba(255,255,255,.06);
    box-shadow:0 0 0 2px rgba(16,163,127,.08);
}
.pp-field input::placeholder{color:var(--text-4)}

.pp-save-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 22px;
    background:linear-gradient(135deg,var(--green),#059669);
    border:none;border-radius:8px;color:#fff;
    font-size:.84rem;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .2s var(--ease);
    box-shadow:0 2px 10px rgba(16,163,127,.2);
}
.pp-save-btn:hover{
    background:linear-gradient(135deg,#0d8a6b,#047857);
    box-shadow:0 4px 18px rgba(16,163,127,.3);
    transform:translateY(-1px);
}
.pp-save-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pp-save-btn .spin{animation:spin .7s linear infinite}
.pp-message{font-size:.78rem;margin-top:6px;min-height:0}
.pp-message.success{color:var(--green)}
.pp-message.error{color:var(--red)}

/* Ulanishlar */
.pp-connect-list{display:flex;flex-direction:column;gap:8px}
.pp-connect-item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);
    border-radius:10px;
    transition:.15s;
}
.pp-connect-item:hover{background:rgba(255,255,255,.04)}
.pp-connect-icon{
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.pp-connect-icon.tg{background:rgba(42,171,238,.1);color:#2aabee}
.pp-connect-icon.google{background:rgba(66,133,244,.1)}
.pp-connect-info{flex:1;min-width:0}
.pp-connect-name{display:block;font-size:.84rem;font-weight:500}
.pp-connect-desc{display:block;font-size:.7rem;color:var(--text-4)}
.pp-connect-status{font-size:.72rem;color:var(--text-4);flex-shrink:0}
.pp-connect-status.connected{color:var(--green)}
.pp-connect-btn{
    padding:5px 14px;border-radius:6px;
    background:rgba(42,171,238,.1);
    border:1px solid rgba(42,171,238,.2);
    color:#2aabee;font-size:.76rem;font-weight:600;
    text-decoration:none;transition:.15s;flex-shrink:0;
}
.pp-connect-btn:hover{background:rgba(42,171,238,.18);border-color:rgba(42,171,238,.3)}

/* Bottom row */
.pp-bottom-row{
    display:flex;align-items:center;gap:8px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.06);
}
.pp-pro-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;
    background:rgba(16,163,127,.1);
    border:1px solid rgba(16,163,127,.18);
    border-radius:8px;color:var(--green);
    font-size:.84rem;font-weight:600;
    font-family:inherit;cursor:pointer;transition:.2s;
}
.pp-pro-btn:hover{background:rgba(16,163,127,.18);border-color:rgba(16,163,127,.3)}
.pp-logout-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;
    background:rgba(239,68,68,.05);
    border:1px solid rgba(239,68,68,.1);
    border-radius:8px;color:rgba(239,68,68,.75);
    font-size:.84rem;font-weight:500;
    text-decoration:none;font-family:inherit;transition:.2s;
    margin-left:auto;
}
.pp-logout-btn:hover{background:rgba(239,68,68,.1);color:var(--red);border-color:rgba(239,68,68,.2)}

/* ====== TARIFF PANEL ====== */
.tariff-panel{
    position:absolute;inset:0;z-index:20;
    background:var(--bg);
    overflow-y:auto;
    animation:fadeSlideUp .3s var(--ease);
}
.tariff-panel-inner{
    max-width:820px;width:100%;
    margin:0 auto;
    padding:20px 24px 40px;
}
.tp-header{
    display:flex;align-items:center;gap:12px;
    margin-bottom:24px;
}
.tp-header h2{font-size:1.05rem;font-weight:600;margin:0;flex:1}

/* Dashboard stats */
.tp-dashboard{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin-bottom:16px;
}
.tp-dash-item{
    display:flex;align-items:center;gap:10px;
    padding:12px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
}
.tp-dash-icon{
    width:34px;height:34px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tp-dash-info{display:flex;flex-direction:column}
.tp-dash-val{font-size:.88rem;font-weight:700;color:var(--text)}
.tp-dash-val small{font-size:.65rem;color:var(--text-4);font-weight:400}
.tp-dash-lbl{font-size:.6rem;color:var(--text-4);text-transform:uppercase;letter-spacing:.3px;margin-top:1px}

.tp-period-row{
    display:flex;justify-content:center;
    margin-bottom:16px;
}
.tp-period-toggle{
    display:flex;gap:2px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;padding:2px;
}
.tp-period{
    padding:6px 14px;border:none;border-radius:6px;
    background:none;color:var(--text-3);font-size:.78rem;font-weight:500;
    cursor:pointer;font-family:inherit;transition:.15s;
    display:flex;align-items:center;gap:4px;
}
.tp-period.active{background:rgba(255,255,255,.1);color:var(--text)}
.tp-period:hover:not(.active){color:var(--text-2)}
.tp-discount{
    font-size:.6rem;font-weight:700;color:var(--green);
    background:rgba(16,163,127,.12);padding:1px 5px;border-radius:4px;
}

/* Tarif kartalar */
.tp-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    margin-bottom:20px;
}
.tp-card{
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    padding:20px 16px;
    display:flex;flex-direction:column;
    transition:all .2s var(--ease);
    position:relative;
}
.tp-card:hover{
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.tp-card.popular{
    border-color:rgba(16,163,127,.25);
    background:rgba(16,163,127,.03);
}
.tp-popular-tag{
    position:absolute;top:-8px;right:12px;
    background:var(--green);color:#fff;
    font-size:.6rem;font-weight:700;
    padding:2px 10px;border-radius:8px;
    text-transform:uppercase;letter-spacing:.3px;
}
.tp-card-header{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
}
.tp-icon{
    width:38px;height:38px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tp-plan-name{font-size:1rem;font-weight:700}

.tp-price{
    display:flex;align-items:baseline;gap:4px;
    margin-bottom:16px;
}
.tp-price-amount{font-size:1.5rem;font-weight:700;color:var(--text)}
.tp-price-currency{font-size:.78rem;color:var(--text-3)}
.tp-price-currency small{font-size:.68rem}

.tp-features{
    list-style:none;padding:0;margin:0 0 16px;
    flex:1;
}
.tp-features li{
    display:flex;align-items:center;gap:8px;
    font-size:.8rem;color:var(--text-2);
    padding:4px 0;
}
.tp-features li svg{flex-shrink:0}

.tp-btn{
    width:100%;padding:10px;border:none;border-radius:8px;
    color:#fff;font-size:.85rem;font-weight:600;
    cursor:pointer;font-family:inherit;
    transition:all .2s;
}
.tp-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.tp-btn-current{
    background:rgba(255,255,255,.06) !important;
    color:var(--text-3) !important;
    cursor:default !important;
}
.tp-btn-current:hover{filter:none !important;transform:none !important}

/* To'lov qismi */
.tp-payment{margin-top:10px}
.tp-payment-card{
    max-width:420px;margin:0 auto;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;padding:24px;
}
.tp-payment-back{
    background:none;border:none;color:var(--text-3);
    font-size:.84rem;cursor:pointer;font-family:inherit;
    margin-bottom:12px;transition:.15s;
}
.tp-payment-back:hover{color:var(--text)}
.tp-payment-card h3{font-size:1rem;font-weight:600;margin-bottom:14px}
.tp-payment-info{
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);
    border-radius:10px;padding:14px;margin-bottom:14px;
}
.tp-pay-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 0;font-size:.85rem;color:var(--text-2);
}
.tp-pay-row strong{color:var(--text)}
.tp-upload-area{margin-bottom:14px}
.tp-upload-btn{
    width:100%;padding:14px;
    background:rgba(255,255,255,.04);
    border:2px dashed rgba(255,255,255,.1);
    border-radius:10px;color:var(--text-3);
    cursor:pointer;font-family:inherit;font-size:.85rem;
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:.15s;
}
.tp-upload-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.tp-submit-btn{
    width:100%;padding:12px;
    background:linear-gradient(135deg,var(--green),#059669);
    border:none;border-radius:10px;color:#fff;
    font-size:.9rem;font-weight:600;cursor:pointer;
    font-family:inherit;transition:.2s;
    box-shadow:0 2px 12px rgba(16,163,127,.2);
}
.tp-submit-btn:hover:not(:disabled){box-shadow:0 4px 20px rgba(16,163,127,.3);transform:translateY(-1px)}
.tp-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.tp-note{font-size:.72rem;color:var(--text-4);text-align:center;margin-top:10px}

/* Balans to'ldirish */
.tp-topup{
    margin-bottom:16px;
    background:linear-gradient(135deg,rgba(16,163,127,.04),rgba(59,130,246,.03));
    border:1px solid rgba(16,163,127,.1);
    border-radius:14px;
    padding:20px;
    position:relative;overflow:hidden;
}
.tp-topup::before{
    content:'';position:absolute;top:-30px;right:-20px;
    width:100px;height:100px;border-radius:50%;
    background:radial-gradient(circle,rgba(16,163,127,.08),transparent 70%);
    pointer-events:none;
}
.tp-topup-header{
    display:flex;align-items:center;gap:14px;
    margin-bottom:16px;position:relative;z-index:1;
}
.tp-topup-icon{
    width:42px;height:42px;border-radius:12px;
    background:rgba(16,163,127,.12);color:var(--green);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tp-topup-title{font-size:.92rem;font-weight:600}
.tp-topup-desc{font-size:.72rem;color:var(--text-3);margin-top:2px}
.tp-topup-bal{
    margin-left:auto;
    padding:6px 14px;
    background:rgba(16,163,127,.08);
    border:1px solid rgba(16,163,127,.15);
    border-radius:10px;
    font-size:1rem;font-weight:700;color:var(--green);
    flex-shrink:0;
}
.tp-topup-amounts{
    display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
    margin-bottom:4px;
    position:relative;z-index:1;
}
.tp-topup-btn{
    padding:10px 6px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    color:var(--text-2);font-size:.82rem;font-weight:600;
    cursor:pointer;font-family:inherit;
    transition:all .2s;
    text-align:center;
}
.tp-topup-btn:hover{
    background:rgba(16,163,127,.1);
    border-color:rgba(16,163,127,.25);
    color:var(--green);
    transform:translateY(-1px);
}
.tp-topup-btn.selected{
    background:rgba(16,163,127,.15);
    border-color:rgba(16,163,127,.3);
    color:#fff;
    box-shadow:0 2px 12px rgba(16,163,127,.15);
}
.tp-topup-pay{
    margin-top:14px;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.06);
    position:relative;z-index:1;
}

@media(max-width:600px){
    .tp-topup-amounts{grid-template-columns:repeat(3,1fr);gap:6px}
    .tp-topup{padding:14px}
    .tp-topup-header{gap:10px}
    .tp-topup-icon{width:36px;height:36px;border-radius:10px}
    .tp-topup-bal{font-size:.88rem;padding:5px 10px}
}
@media(max-width:380px){
    .tp-topup-amounts{grid-template-columns:repeat(2,1fr)}
    .tp-topup-btn{font-size:.76rem;padding:8px 4px}
}

.tp-footer{text-align:center;margin-top:16px}
.tp-footer p{font-size:.72rem;color:var(--text-4)}

@media(max-width:900px){
    .tp-dashboard{grid-template-columns:repeat(2,1fr);gap:8px}
}
@media(max-width:768px){
    .tp-cards{grid-template-columns:1fr;gap:10px}
    .tariff-panel-inner{padding:16px 12px 30px}
    .tp-header{flex-wrap:wrap}
    .tp-card{
        padding:16px 14px;
        flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;
    }
    .tp-card-header{flex:none;width:auto}
    .tp-price{flex:1;margin-bottom:0;justify-content:flex-end}
    .tp-features{
        width:100%;
        display:flex;flex-wrap:wrap;gap:2px 12px;
        margin-bottom:10px;
    }
    .tp-features li{width:auto;padding:2px 0}
    .tp-btn{width:100%}
    .tp-popular-tag{top:auto;bottom:-1px;right:10px;top:auto;border-radius:6px 6px 0 0}
    .tp-dashboard{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px}
    .tp-dash-item{padding:10px 8px;gap:8px}
    .tp-dash-icon{width:28px;height:28px;border-radius:6px}
    .tp-dash-icon svg{width:14px;height:14px}
    .tp-dash-val{font-size:.8rem}
    .tp-dash-lbl{font-size:.55rem}
}
@media(max-width:480px){
    .tp-price-amount{font-size:1.1rem}
    .tp-features li{font-size:.74rem}
    .tp-period{padding:5px 10px;font-size:.72rem}
    .tp-plan-name{font-size:.9rem}
    .tp-card{padding:12px 10px}
}

/* ====== PLAN BADGE ====== */
.plan-badge{
    display:inline-flex;align-items:center;
    padding:3px 10px;border-radius:12px;
    font-size:.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.5px;
    margin-left:6px;
}
.plan-badge.free{
    background:rgba(142,142,160,.1);
    color:var(--text-3);
    border:1px solid rgba(142,142,160,.12);
}
.plan-badge.pro{
    background:linear-gradient(135deg,rgba(16,163,127,.18),rgba(45,212,191,.15));
    color:#34d399;
    border:1px solid rgba(16,163,127,.2);
    box-shadow:0 0 14px rgba(16,163,127,.12);
}
.plan-badge.admin{
    background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(167,139,250,.15));
    color:#a78bfa;
    border:1px solid rgba(139,92,246,.2);
    box-shadow:0 0 14px rgba(139,92,246,.12);
}

/* ====== USAGE INDICATOR ====== */
.usage-indicator{
    font-size:.65rem;
    color:var(--text-4);
    margin-top:1px;
}

/* ====== SIDEBAR UPGRADE BUTTON ====== */
.sidebar-upgrade-btn{
    background:linear-gradient(135deg,rgba(16,163,127,.12),rgba(45,212,191,.08));
    border:1px solid rgba(16,163,127,.18);
    color:var(--green);
    padding:7px;border-radius:var(--r-xs);
    cursor:pointer;transition:all .2s;
    display:flex;align-items:center;
}
.sidebar-upgrade-btn:hover{
    background:linear-gradient(135deg,rgba(16,163,127,.25),rgba(45,212,191,.18));
    box-shadow:0 0 18px rgba(16,163,127,.15);
    transform:scale(1.05);
}
.sidebar-admin-btn{
    background:rgba(139,92,246,.1);
    border:1px solid rgba(139,92,246,.18);
    color:#a78bfa;
    padding:7px;border-radius:var(--r-xs);
    cursor:pointer;transition:all .2s;
    display:flex;align-items:center;
    text-decoration:none;
}
.sidebar-admin-btn:hover{
    background:rgba(139,92,246,.22);
    box-shadow:0 0 18px rgba(139,92,246,.15);
    transform:scale(1.05);
}

/* ====== UPGRADE MODAL ====== */
.upgrade-overlay{
    position:fixed;inset:0;z-index:500;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    display:none;align-items:center;justify-content:center;
    padding:20px;
}
.upgrade-overlay.active{display:flex}

.upgrade-modal{
    background:rgba(18,18,26,.88);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:36px 32px;
    max-width:480px;width:100%;position:relative;
    animation:modalUp .3s var(--ease);
    box-shadow:var(--shadow-xl),
        0 0 0 1px rgba(255,255,255,.03),
        inset 0 1px 0 rgba(255,255,255,.05);
    text-align:center;
}

.upgrade-close{
    position:absolute;top:14px;right:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
    color:var(--text-4);
    font-size:1.3rem;cursor:pointer;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:.2s;line-height:1;
}
.upgrade-close:hover{color:var(--text);background:rgba(255,255,255,.1)}

.upgrade-header{margin-bottom:24px}
.upgrade-icon{
    font-size:2.5rem;color:var(--green);
    margin-bottom:14px;
    text-shadow:0 0 30px rgba(16,163,127,.3);
}
.upgrade-icon img{
    width:50px;height:50px;border-radius:50%;object-fit:cover;
    box-shadow:0 4px 20px rgba(16,163,127,.15);
}
.upgrade-header h2{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.upgrade-header p{font-size:.85rem;color:var(--text-3)}

/* Plans cards */
.upgrade-plans{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
    margin-bottom:24px;
}
.upgrade-plan{
    padding:18px;
    background:var(--bg-glass);
    border:2px solid var(--border-glass-2);
    border-radius:var(--r-md);
    cursor:pointer;transition:all .2s var(--ease);
    position:relative;
}
.upgrade-plan:hover{
    border-color:var(--border-glass-3);
    background:var(--bg-glass-2);
}
.upgrade-plan.selected{
    border-color:rgba(16,163,127,.35);
    background:rgba(16,163,127,.05);
    box-shadow:0 0 22px rgba(16,163,127,.08);
}
.upgrade-plan.recommended{position:relative}
.plan-save{
    position:absolute;top:-8px;right:-8px;
    background:linear-gradient(135deg,var(--green),#059669);
    color:#fff;font-size:.65rem;font-weight:700;
    padding:3px 10px;border-radius:10px;
    box-shadow:0 2px 10px rgba(16,163,127,.25);
}
.plan-name{font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.plan-price{font-size:1.1rem;font-weight:700;color:var(--green)}
.plan-price small{font-size:.7rem;color:var(--text-3);font-weight:400}
.plan-monthly{font-size:.72rem;color:var(--text-4);margin-top:4px}

/* Features list */
.upgrade-features{
    text-align:left;margin-bottom:24px;
    display:flex;flex-direction:column;gap:10px;
}
.feature-item{
    display:flex;align-items:center;gap:10px;
    font-size:.85rem;color:var(--text-2);
}
.feature-check{
    color:var(--green);font-size:1rem;font-weight:700;
    width:20px;text-align:center;flex-shrink:0;
}

/* CTA button */
.upgrade-btn{
    width:100%;padding:14px;
    background:linear-gradient(135deg,var(--green),#059669);
    border:none;border-radius:var(--r-md);
    color:#fff;font-size:1rem;font-weight:700;
    font-family:inherit;cursor:pointer;
    transition:all .2s var(--ease);
    box-shadow:0 4px 22px rgba(16,163,127,.22);
    letter-spacing:-.01em;
}
.upgrade-btn:hover{
    background:linear-gradient(135deg,#059669,#047857);
    box-shadow:0 6px 32px rgba(16,163,127,.32);
    transform:translateY(-1px);
}
.upgrade-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.upgrade-note{
    margin-top:12px;font-size:.72rem;color:var(--text-4);
}

/* ====== RESPONSIVE — TABLET ====== */
@media(max-width:1024px){
    :root{--msg-w:100%}
    .messages-inner{padding:0 20px}
}

/* ====== RESPONSIVE — MOBILE (<=768px) ====== */
@media(max-width:768px){
    .app{height:100vh;height:100dvh}
    .sidebar{
        position:fixed;left:0;top:0;bottom:0;z-index:100;
        width:280px !important;
        transform:translateX(-100%);transition:transform .25s var(--ease);
    }
    .sidebar.collapsed{width:280px !important;transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0) !important;width:280px !important;overflow:visible;box-shadow:8px 0 40px rgba(0,0,0,.5)}
    .sidebar.open .sidebar-logo-text{display:inline}
    .sidebar.open .sidebar-list{display:block}
    .sidebar.open .sidebar-nav{padding:6px 6px 4px}
    .sidebar.open .nav-item{justify-content:flex-start;padding:8px 10px;gap:10px}
    .sidebar.open .nav-item span,.sidebar.open .nav-item .nav-pro{display:inline}
    .sidebar.open .sidebar-footer{padding:8px;flex-direction:row}
    .sidebar.open .sidebar-user{padding:6px 8px;gap:8px;justify-content:flex-start}
    .sidebar.open .user-info{display:flex}
    .sidebar.open .sidebar-upgrade-btn{display:flex}
    .sidebar.open .sidebar-plan-badge{display:none}
    .sidebar-close{display:flex}
    .sidebar-close-collapse{display:none}
    .sidebar-close-x{display:block}
    .menu-toggle{display:block}
    .sidebar-overlay{
        position:fixed;inset:0;z-index:99;
        background:rgba(0,0,0,.45);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        display:none;
    }
    .sidebar-overlay.active{display:block}
    .messages-inner{padding:0 14px}
    .input-area{padding:0 10px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
    .input-wrapper{border-radius:22px;padding:4px 6px 4px 16px}
    #chatInput{font-size:16px}
    .suggestions{grid-template-columns:repeat(2,1fr);max-width:100%;gap:8px}
    .suggestion{padding:10px 12px;gap:8px}
    .suggestion-icon{width:26px;height:26px;font-size:.95rem}
    .header-center{justify-content:center}
    .model-selector{font-size:.88rem;padding:6px 8px}
    .msg-row{max-width:92%}
    .msg-content{font-size:.88rem;padding:10px 14px}
    .msg-content pre{padding:12px;margin:8px 0}
    .msg-content pre code{font-size:.78rem}
    .welcome h2{font-size:1.2rem}
    .welcome{min-height:55vh;padding:30px 14px}

    /* Modals */
    .auth-overlay{padding:12px}
    .auth-modal{
        padding:24px 18px;
        max-height:90vh;max-height:90dvh;
        overflow-y:auto;border-radius:18px;
        -webkit-overflow-scrolling:touch;
    }
    .auth-modal-header h2{font-size:1.05rem}
    .auth-social-row{flex-direction:row;gap:6px}
    .auth-social-row .social-btn{flex:1;padding:9px 6px;font-size:.78rem;gap:6px}

    .upgrade-overlay{padding:12px}
    .upgrade-modal{
        padding:24px 16px;
        max-height:90vh;max-height:90dvh;
        overflow-y:auto;border-radius:18px;
        -webkit-overflow-scrolling:touch;
    }
    .upgrade-plans{grid-template-columns:1fr;gap:8px}

    .profile-modal{padding:24px 18px;max-height:90vh;overflow-y:auto;border-radius:18px}

    .context-menu{
        left:50% !important;transform:translateX(-50%);
        bottom:20px;top:auto !important;
        min-width:220px;
    }

    .attach-btn{width:42px;min-height:42px;border-radius:22px}

    /* Voice overlay */
    .vc-topbar{padding:12px 16px}
    .vc-visual-area{padding:0 16px}
    .vc-orb-wrap{width:180px;height:180px}
    .vc-orb{width:100px;height:100px}
    .vc-ring-1{width:130px;height:130px}
    .vc-ring-2{width:155px;height:155px}
    .vc-ring-3{width:180px;height:180px}
    .vc-status{font-size:.78rem;margin-bottom:18px}
    .vc-text-area{padding:0 16px 8px}
    .vc-response{font-size:.86rem;max-height:100px}
    .vc-controls{gap:20px;padding:16px 20px 24px}
    .vc-mic-main{width:64px;height:64px}
    .vc-mute-btn,.vc-end-btn{width:48px;height:48px}
}

/* ====== RESPONSIVE — SMALL MOBILE (<=480px) ====== */
@media(max-width:480px){
    .messages-inner{padding:0 8px}
    .input-area{padding:0 6px 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
    .input-wrapper{padding:3px 4px 3px 10px;border-radius:18px}
    .input-disclaimer{font-size:.6rem;margin-top:4px}
    #chatInput{font-size:16px;padding:6px 0;min-height:20px}
    .voice-btn,.send-btn{width:32px;height:32px;margin-bottom:1px}
    .attach-btn{width:36px;min-height:36px;border-radius:18px}
    .attach-btn svg{width:16px;height:16px}
    .welcome{padding:16px 8px;min-height:45vh}
    .welcome h2{font-size:1rem;margin-bottom:14px}
    .welcome-logo{width:46px;height:46px;margin-bottom:14px}
    .welcome-logo svg{width:22px;height:22px}
    .welcome-logo img{width:38px;height:38px}
    .suggestions{grid-template-columns:repeat(2,1fr);gap:5px;max-width:100%}
    .suggestion{padding:8px 10px;gap:6px}
    .suggestion-icon{width:24px;height:24px;font-size:.85rem;border-radius:6px}
    .suggestion-title{font-size:.72rem}
    .suggestion-desc{font-size:.62rem}
    .msg-row{max-width:96%}
    .msg-content{font-size:.85rem;padding:8px 12px;border-radius:14px}
    .msg-content code{font-size:.76em;padding:1px 4px}
    .msg-content pre{padding:10px;border-radius:8px;margin:4px -2px}
    .msg-content pre code{font-size:.74rem}
    .typing-indicator{padding:5px 10px}
    .typing-indicator span{width:5px;height:5px}

    /* Auth */
    .auth-overlay{padding:8px}
    .auth-modal{padding:20px 14px;border-radius:14px;max-width:100%;width:100%}
    .auth-modal-logo img{width:42px;height:42px}
    .auth-modal-header{margin-bottom:16px}
    .auth-modal-header h2{font-size:.98rem}
    .auth-modal-header p{font-size:.76rem}
    .auth-field{margin-bottom:8px}
    .auth-field input{padding:10px 12px;font-size:16px;border-radius:8px}
    .auth-submit-btn{padding:10px;font-size:.86rem;border-radius:8px}
    .auth-tabs{margin-bottom:12px}
    .auth-tab{padding:7px 0;font-size:.78rem}
    .auth-divider{margin:10px 0}
    .social-btn{padding:8px 6px;font-size:.74rem;border-radius:8px;gap:5px}
    .social-btn svg{width:16px;height:16px;flex-shrink:0}
    .auth-social-row{flex-direction:row;gap:5px}
    .auth-social-row .social-btn{flex:1}
    .auth-error{font-size:.72rem}

    /* Upgrade */
    .upgrade-overlay{padding:8px}
    .upgrade-modal{padding:20px 14px;border-radius:14px;max-width:100%;width:100%}
    .upgrade-header h2{font-size:1.05rem}
    .upgrade-header p{font-size:.78rem}
    .upgrade-plan{padding:12px}
    .plan-price{font-size:.98rem}
    .upgrade-btn{padding:11px;font-size:.88rem}
    .feature-item{font-size:.78rem;gap:6px}

    /* Profile panel */
    .profile-panel-inner{padding:12px 10px 36px}
    .profile-panel-inner{padding:16px 12px 30px}
    .pp-hero{flex-direction:column;align-items:flex-start;gap:12px}
    .pp-hero-stats{gap:12px}
    .pp-grid{grid-template-columns:1fr;gap:8px}
    .pp-field input{font-size:16px;padding:10px 12px}
    .pp-bottom-row{flex-wrap:wrap}

    /* Header */
    .chat-header{padding:4px 6px;min-height:42px}
    .menu-toggle{padding:5px}
    .menu-toggle svg{width:20px;height:20px}
    .plan-badge{padding:2px 6px;font-size:.6rem;margin-left:3px}
    .model-selector{font-size:.84rem;padding:4px 6px}

    /* Sidebar nav */
    .sidebar-nav{padding:4px 6px;gap:1px}
    .sidebar-nav .nav-item{padding:7px 8px;font-size:.8rem;gap:7px}
    .sidebar-nav .nav-item .nav-icon{width:16px;height:16px}
    .sidebar-nav .nav-pro{font-size:.55rem;padding:1px 5px}
    .sidebar-footer{padding:8px}

    /* Voice overlay */
    .vc-topbar{padding:10px 12px}
    .vc-call-label{font-size:.84rem}
    .vc-close{width:36px;height:36px}
    .vc-close svg{width:16px;height:16px}
    .vc-visual-area{padding:0 12px}
    .vc-orb-wrap{width:150px;height:150px}
    .vc-orb{width:84px;height:84px}
    .vc-ring-1{width:110px;height:110px}
    .vc-ring-2{width:130px;height:130px}
    .vc-ring-3{width:150px;height:150px}
    .vc-status{font-size:.74rem;margin-bottom:14px}
    .vc-waveform{height:30px;gap:2px}
    .vc-waveform span{width:2px}
    .vc-text-area{padding:0 12px 8px;min-height:60px}
    .vc-transcript{font-size:.78rem}
    .vc-response{font-size:.82rem;max-height:80px}
    .vc-controls{gap:16px;padding:14px 16px 22px}
    .vc-mic-main{width:58px;height:58px}
    .vc-mic-main svg{width:24px;height:24px}
    .vc-mute-btn,.vc-end-btn{width:44px;height:44px}
    .vc-mute-btn svg,.vc-end-btn svg{width:18px;height:18px}
}

/* ====== RESPONSIVE — VERY SMALL (<=360px) ====== */
@media(max-width:360px){
    .messages-inner{padding:0 6px}
    .input-area{padding:0 4px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
    .input-wrapper{padding:2px 3px 2px 8px;border-radius:16px}
    .attach-btn{width:32px;min-height:32px;border-radius:16px}
    .attach-btn svg{width:15px;height:15px}
    #chatInput{font-size:16px;padding:5px 0}
    .voice-btn,.send-btn{width:30px;height:30px}
    .msg-content{font-size:.82rem;padding:7px 9px;border-radius:12px}
    .msg-content pre{padding:6px;font-size:.7rem}
    .chat-header{padding:3px 4px;min-height:38px}
    .model-selector{font-size:.8rem;padding:3px 5px}
    .sidebar{width:250px}
    .auth-modal{padding:16px 12px;border-radius:12px}
    .auth-modal-header h2{font-size:.9rem}
    .auth-field input{padding:9px 10px;font-size:16px}
    .auth-submit-btn{padding:9px;font-size:.82rem}
    .auth-social-row{flex-direction:row;gap:4px}
    .social-btn{padding:7px 4px;font-size:.68rem;gap:3px}
    .social-btn svg{width:14px;height:14px}
    .upgrade-modal{padding:16px 12px;border-radius:12px}
    .welcome h2{font-size:.92rem}
    .welcome{padding:12px 6px;min-height:40vh}
    .suggestions{grid-template-columns:1fr 1fr;gap:3px}
    .suggestion{padding:6px 7px;gap:5px}
    .suggestion-icon{width:20px;height:20px;font-size:.75rem}
    .suggestion-title{font-size:.66rem}
    .suggestion-desc{display:none}
}

/* ====== LANDSCAPE MOBILE ====== */
@media(max-height:500px) and (orientation:landscape){
    .welcome{min-height:auto;padding:16px 10px}
    .welcome-logo{width:40px;height:40px;margin-bottom:12px}
    .welcome h2{font-size:1rem;margin-bottom:16px}
    .suggestions{gap:6px}
    .vc-visual-area{flex-direction:row;gap:16px}
    .vc-orb-wrap{width:90px;height:90px;margin-bottom:0}
    .vc-orb{width:60px;height:60px}
    .vc-ring-1{width:72px;height:72px}
    .vc-ring-2{width:82px;height:82px}
    .vc-ring-3{width:90px;height:90px}
    .vc-status{margin-bottom:6px;font-size:.72rem}
    .vc-waveform{height:24px;margin-bottom:6px}
    .vc-text-area{min-height:40px;padding:0 16px 4px}
    .vc-response{max-height:50px;font-size:.8rem}
    .vc-controls{padding:10px 20px 16px;gap:16px}
    .vc-mic-main{width:52px;height:52px}
    .vc-mute-btn,.vc-end-btn{width:42px;height:42px}
    .auth-modal,.upgrade-modal{max-height:95vh;max-height:95dvh}
}