:root{
    --nav:#0b1739;
    --nav2:#101f46;
    --nav3:#182b59;
    --blue:#246bfd;
    --blue2:#1557df;
    --sky:#edf4ff;
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#172033;
    --muted:#6c7890;
    --muted2:#98a3b7;
    --line:#e3e8f1;
    --success:#0f9f6e;
    --warning:#c47a09;
    --danger:#d92d20;
    --shadow:0 10px 30px rgba(20,34,70,.08);
    --shadow-lg:0 24px 70px rgba(13,28,66,.14);
    --radius:18px;
    --sidebar:286px;
    --rail:310px;
    --topbar:72px;
}

*{
    box-sizing:border-box
}

html,
body{
    height:100%
}

body{
    margin:0;
    overflow:hidden;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased
}

button,
input,
textarea,
select{
    font:inherit
}

button{
    cursor:pointer
}

.hidden{
    display:none!important
}

.icon-btn,
.soft-btn,
.primary-btn,
.tool-btn,
.nav-btn,
.chat-row-main,
.chat-row-menu,
.quick-card{
    border:0
}

.shell{
    display:grid;
    grid-template-columns:var(--sidebar) minmax(0,1fr) var(--rail);
    height:100vh;
    min-height:0
}

/* SIDEBAR */

.sidebar{
    background:
        radial-gradient(circle at 20% 0%,rgba(70,110,255,.18),transparent 32%),
        linear-gradient(180deg,var(--nav),#07132f);
    color:#fff;
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:18px 14px 14px
}

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

.brand-mark{
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#69a4ff,#246bfd);
    box-shadow:0 10px 24px rgba(36,107,253,.3);
    font-weight:900;
    font-size:17px
}

.brand-copy strong{
    display:block;
    font-size:18px;
    line-height:1.1
}

.brand-copy span{
    display:block;
    margin-top:4px;
    font-size:11px;
    color:#9fb0d5
}

.new-chat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    min-height:44px;
    border:0;
    border-radius:13px;
    background:#fff;
    color:#0c1b3e;
    font-weight:800;
    box-shadow:0 9px 25px rgba(0,0,0,.14)
}

.side-search{
    position:relative;
    margin:13px 0 10px
}

.side-search input{
    width:100%;
    height:40px;
    padding:0 38px 0 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:11px;
    outline:0;
    background:rgba(255,255,255,.07);
    color:#fff
}

.side-search input::placeholder{
    color:#8194be
}

.side-search span{
    position:absolute;
    right:12px;
    top:10px;
    color:#8498c2
}

.side-section-title{
    padding:8px 8px 6px;
    color:#7188b7;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-size:10px;
    font-weight:800
}

.history{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:2px 0 10px;
    scrollbar-width:thin
}

.chat-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:4px;
    margin:3px 0;
    border-radius:11px
}

.chat-row.active,
.chat-row:hover{
    background:rgba(255,255,255,.08)
}

.chat-row-main{
    flex:1;
    min-width:0;
    text-align:left;
    padding:9px 7px 9px 10px;
    background:transparent;
    color:#dbe4fa;
    border-radius:11px
}

.chat-row-main span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.chat-row-main small{
    display:block;
    margin-top:2px;
    color:#7186b3;
    font-size:10px
}

.chat-row-menu{
    width:31px;
    height:31px;
    border-radius:9px;
    background:transparent;
    color:#7f94bf;
    font-size:17px
}

.chat-row-menu:hover{
    background:rgba(255,255,255,.09);
    color:#fff
}

.side-footer{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:10px
}

.account-card{
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px;
    border-radius:12px;
    background:rgba(255,255,255,.055)
}

.account-avatar{
    width:36px;
    height:36px;
    border-radius:12px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:linear-gradient(135deg,#dce8ff,#fff);
    color:#183d8d;
    font-weight:900
}

.account-copy{
    min-width:0;
    flex:1
}

.account-copy strong,
.account-copy span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.account-copy strong{
    font-size:12px
}

.account-copy span{
    color:#7d91bb;
    font-size:10px
}

/* MAIN */

.workspace{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 50% -10%,rgba(59,130,246,.08),transparent 36%),
        var(--bg)
}

.topbar{
    height:var(--topbar);
    min-height:var(--topbar);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 22px;
    position:relative;
    z-index:5
}

.title-wrap{
    display:flex;
    align-items:center;
    min-width:0;
    gap:10px
}

.mobile-menu{
    display:none
}

.title-block{
    min-width:0
}

.title-block strong{
    display:block;
    max-width:520px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px
}

.title-block span{
    display:block;
    color:var(--muted);
    margin-top:2px;
    font-size:10px
}

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

.mode-badge{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:34px;
    padding:0 11px;
    border:1px solid #cfe0ff;
    border-radius:999px;
    color:#1854b8;
    background:#f1f6ff;
    font-size:11px;
    font-weight:800
}

.mode-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#19a66f;
    box-shadow:0 0 0 4px rgba(25,166,111,.10)
}

.icon-btn,
.soft-btn{
    min-height:36px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    color:var(--text)
}

.icon-btn{
    min-width:38px;
    padding:0 10px
}

.soft-btn{
    padding:0 12px;
    font-weight:700
}

.icon-btn:hover,
.soft-btn:hover{
    background:#f7f9fd
}

.messages{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:36px max(22px,calc((100% - 850px)/2)) 180px;
    scroll-behavior:smooth
}

.empty-state{
    max-width:760px;
    margin:8vh auto 0;
    text-align:center
}

.ai-orb{
    width:68px;
    height:68px;
    border-radius:24px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#eff5ff,#dce9ff);
    color:#246bfd;
    font-weight:900;
    font-size:25px;
    box-shadow:0 15px 40px rgba(36,107,253,.15)
}

.empty-state h1{
    margin:0;
    font-size:38px;
    line-height:1.18;
    letter-spacing:-.035em
}

.empty-state p{
    max-width:590px;
    margin:12px auto 24px;
    color:var(--muted);
    font-size:15px
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-width:650px;
    margin:0 auto
}

.quick-card{
    padding:14px 15px;
    text-align:left;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.8);
    color:var(--text);
    transition:.18s ease
}

.quick-card:hover{
    transform:translateY(-2px);
    border-color:#cbd9f5;
    box-shadow:var(--shadow)
}

.quick-card strong{
    display:block;
    margin-bottom:3px;
    font-size:12px
}

.quick-card span{
    color:var(--muted);
    font-size:11px
}

/* MESSAGES */

.message{
    width:min(100%,850px);
    margin:0 auto 24px;
    display:flex;
    gap:13px;
    align-items:flex-start
}

.message.user{
    flex-direction:row-reverse
}

.message-avatar{
    width:35px;
    height:35px;
    border-radius:12px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    font-size:11px;
    font-weight:900
}

.message.assistant .message-avatar{
    background:#e8f0ff;
    color:#246bfd
}

.message.user .message-avatar{
    background:#13254d;
    color:#fff
}

.message-body{
    max-width:min(760px,calc(100% - 54px))
}

.message.user .message-body{
    display:flex;
    flex-direction:column;
    align-items:flex-end
}

.message-meta{
    margin:0 3px 5px;
    color:var(--muted2);
    font-size:10px
}

.message-bubble{
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px 16px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    background:#fff;
    box-shadow:0 5px 18px rgba(20,34,70,.035)
}

.message.user .message-bubble{
    border-color:#d9e6ff;
    background:#edf4ff
}

.message.thinking .message-bubble{
    color:var(--muted)
}

.typing{
    display:inline-flex;
    gap:4px
}

.typing i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#91a0bc;
    animation:pulse 1.25s infinite
}

.typing i:nth-child(2){
    animation-delay:.15s
}

.typing i:nth-child(3){
    animation-delay:.3s
}

@keyframes pulse{
    0%,80%,100%{opacity:.25;transform:translateY(0)}
    40%{opacity:1;transform:translateY(-3px)}
}

/* COMPOSER */

.composer-wrap{
    position:absolute;
    left:var(--sidebar);
    right:var(--rail);
    bottom:0;
    z-index:6;
    pointer-events:none;
    padding:26px 24px 18px;
    background:linear-gradient(
        180deg,
        rgba(244,247,251,0),
        rgba(244,247,251,.93) 28%,
        var(--bg) 60%
    )
}

.composer{
    pointer-events:auto;
    width:min(850px,100%);
    margin:0 auto;
    border:1px solid #dce3ee;
    border-radius:19px;
    background:#fff;
    box-shadow:0 16px 42px rgba(19,35,76,.12);
    overflow:hidden
}

.composer textarea{
    display:block;
    width:100%;
    min-height:58px;
    max-height:180px;
    resize:none;
    border:0;
    outline:0;
    padding:14px 15px 7px;
    color:var(--text);
    background:transparent
}

.composer textarea::placeholder{
    color:#98a3b7
}

.composer-bottom{
    min-height:48px;
    padding:7px 9px 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}

.compose-tools{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px
}

.tool-btn{
    height:32px;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:6px;
    border-radius:10px;
    background:#f8f9fc;
    color:#526078;
    font-size:11px;
    font-weight:700
}

.tool-btn.active{
    background:#eaf2ff;
    color:#175ccb
}

.tool-btn:disabled{
    opacity:.45;
    cursor:not-allowed
}

.attach-name{
    max-width:170px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#68758d;
    font-size:10px
}

.send-btn{
    width:38px;
    height:38px;
    flex:0 0 auto;
    border:0;
    border-radius:12px;
    background:linear-gradient(145deg,#3479ff,#165be1);
    color:#fff;
    font-size:17px;
    box-shadow:0 8px 20px rgba(36,107,253,.25)
}

.send-btn:disabled{
    opacity:.5;
    cursor:not-allowed
}

.disclaimer{
    text-align:center;
    margin-top:7px;
    color:#9aa5b8;
    font-size:9px
}

/* RIGHT RAIL */

.right-rail{
    min-height:0;
    overflow:auto;
    padding:18px 16px;
    border-left:1px solid var(--line);
    background:#f8fafd
}

.rail-card{
    margin-bottom:12px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 4px 16px rgba(20,34,70,.025)
}

.rail-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:11px
}

.rail-title strong{
    font-size:12px
}

.rail-title span{
    color:var(--muted);
    font-size:9px
}

.ai-tool{
    display:flex;
    gap:10px;
    padding:9px 0
}

.ai-tool + .ai-tool{
    border-top:1px solid #eff2f7
}

.ai-tool-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eef4ff;
    flex:0 0 auto
}

.ai-tool-copy{
    min-width:0
}

.ai-tool-copy strong{
    display:block;
    font-size:11px
}

.ai-tool-copy span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:1px
}

.model-box{
    padding:11px;
    border-radius:12px;
    background:#f5f8fe
}

.model-box strong{
    display:block;
    font-size:11px
}

.model-box span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-top:3px
}

.usage-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin:8px 0;
    color:var(--muted);
    font-size:10px
}

.usage-row strong{
    color:var(--text)
}

.progress{
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:#e9edf5
}

.progress div{
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#246bfd,#65a1ff);
    transition:width .3s ease
}

/* AUTH */

.auth-overlay{
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 15% 0%,rgba(55,111,255,.3),transparent 34%),
        linear-gradient(145deg,#07142f,#102755 60%,#123a78)
}

.auth-card{
    width:min(440px,100%);
    padding:30px;
    border-radius:25px;
    background:#fff;
    box-shadow:0 30px 100px rgba(0,0,0,.3)
}

.auth-logo{
    width:52px;
    height:52px;
    border-radius:17px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    color:#fff;
    background:linear-gradient(145deg,#70a9ff,#246bfd);
    font-size:20px;
    font-weight:900
}

.auth-card h1{
    margin:0;
    letter-spacing:-.025em
}

.auth-card > p{
    margin:6px 0 20px;
    color:var(--muted)
}

.field-group{
    margin:11px 0
}

.field-group label{
    display:block;
    margin:0 0 5px;
    color:#455269;
    font-size:11px;
    font-weight:700
}

.field{
    width:100%;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    outline:0;
    padding:0 12px;
    background:#fbfcfe
}

.field:focus{
    border-color:#9ebdff;
    box-shadow:0 0 0 4px #edf3ff
}

.primary-btn{
    width:100%;
    min-height:44px;
    margin-top:8px;
    border-radius:12px;
    background:linear-gradient(145deg,#3479ff,#165be1);
    color:#fff;
    font-weight:800
}

.auth-error{
    min-height:20px;
    margin-top:10px!important;
    color:var(--danger)!important;
    font-size:11px
}

/* MODAL */

.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:40;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(7,18,42,.52);
    backdrop-filter:blur(5px)
}

.modal{
    width:min(570px,100%);
    max-height:min(760px,90vh);
    overflow:auto;
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow-lg)
}

.modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:18px 20px;
    border-bottom:1px solid var(--line)
}

.modal-head h2{
    margin:0;
    font-size:17px
}

.modal-body{
    padding:20px
}

.modal textarea{
    width:100%;
    min-height:130px;
    resize:vertical;
    border:1px solid var(--line);
    border-radius:13px;
    outline:0;
    padding:12px
}

.modal-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:14px
}

.image-preview{
    margin-top:14px;
    overflow:hidden;
    border-radius:15px;
    background:#f5f7fb
}

.image-preview img{
    width:100%;
    display:block
}

.profile-grid{
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    gap:8px 12px;
    font-size:12px
}

.profile-grid div:nth-child(odd){
    color:var(--muted)
}

.setting-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid #edf0f5
}

.setting-row:last-child{
    border-bottom:0
}

.setting-copy strong{
    display:block;
    font-size:12px
}

.setting-copy span{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:10px
}

/* TOAST */

.toast-stack{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:80;
    display:flex;
    flex-direction:column;
    gap:8px
}

.toast{
    min-width:220px;
    max-width:380px;
    padding:11px 13px;
    border:1px solid #dce3ee;
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow);
    font-size:11px
}

.toast.error{
    border-color:#f4c8c5;
    color:#a83229
}

.toast.success{
    border-color:#bde4d4;
    color:#087c56
}

/* DARK */

body.dark{
    --bg:#0f1521;
    --card:#171f2d;
    --text:#e8edf7;
    --muted:#94a0b5;
    --muted2:#6f7b90;
    --line:#273244
}

body.dark .workspace,
body.dark .right-rail{
    background:#0f1521
}

body.dark .topbar{
    background:rgba(23,31,45,.94)
}

body.dark .message-bubble,
body.dark .rail-card,
body.dark .composer,
body.dark .modal,
body.dark .icon-btn,
body.dark .soft-btn,
body.dark .quick-card{
    background:#171f2d;
    color:var(--text)
}

body.dark .message.user .message-bubble,
body.dark .model-box,
body.dark .tool-btn.active{
    background:#192944
}

body.dark .tool-btn{
    background:#202a3a
}

body.dark .field{
    background:#111927;
    color:var(--text)
}

/* RESPONSIVE */

.mobile-backdrop{
    display:none
}

@media(max-width:1180px){
    :root{
        --rail:280px
    }
}

@media(max-width:980px){
    .shell{
        grid-template-columns:var(--sidebar) minmax(0,1fr)
    }

    .right-rail{
        display:none
    }

    .composer-wrap{
        right:0
    }
}

@media(max-width:760px){
    :root{
        --sidebar:286px
    }

    body{
        overflow:hidden
    }

    .shell{
        display:block
    }

    .sidebar{
        position:fixed;
        inset:0 auto 0 0;
        width:var(--sidebar);
        z-index:30;
        transform:translateX(-103%);
        transition:transform .22s ease
    }

    .sidebar.open{
        transform:none
    }

    .mobile-backdrop{
        position:fixed;
        inset:0;
        z-index:25;
        background:rgba(3,12,30,.48)
    }

    .mobile-backdrop.open{
        display:block
    }

    .workspace{
        height:100vh
    }

    .mobile-menu{
        display:inline-grid;
        place-items:center
    }

    .topbar{
        padding:0 12px
    }

    .mode-badge span:last-child{
        display:none
    }

    .top-actions .soft-btn{
        display:none
    }

    .messages{
        padding:25px 13px 165px
    }

    .empty-state{
        margin-top:5vh
    }

    .empty-state h1{
        font-size:30px
    }

    .quick-grid{
        grid-template-columns:1fr
    }

    .composer-wrap{
        left:0;
        right:0;
        padding:22px 10px 10px
    }

    .compose-tools .tool-btn span{
        display:none
    }

    .message{
        gap:8px
    }

    .message-avatar{
        width:31px;
        height:31px;
        border-radius:10px
    }

    .message-body{
        max-width:calc(100% - 40px)
    }

    .modal-backdrop{
        align-items:end;
        padding:0
    }

    .modal{
        width:100%;
        max-height:88vh;
        border-radius:22px 22px 0 0
    }
}