/* =======================================================
                    PIXEL AI
                 Premium Theme v1.0
======================================================= */

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

:root{

    --bg:#0A0A0A;

    --sidebar:#101114;

    --card:#17181C;

    --card2:#202127;

    --gold:#D4AF37;

    --gold-light:#F4E3A2;

    --white:#FFFFFF;

    --text:#A9A9A9;

    --border:rgba(212,175,55,.10);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:white;

    font-family:"Inter",sans-serif;

    overflow:hidden;

}


/* ===============================
        Mouse Glow
=============================== */

.cursor-glow{

    position:fixed;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.12),
    transparent 70%);

    pointer-events:none;

    left:0;
    top:0;

    transform:
    translate(-50%,-50%);

    transition:
    transform .05s linear;

    z-index:-1;

}


/* ===============================
        App Layout
=============================== */

.app{

    display:flex;

    width:100%;

    height:100vh;

}


/* ===============================
        Sidebar
=============================== */

.sidebar{

    width:78px;

    background:rgba(16,17,20,.88);

    backdrop-filter:blur(20px);

    border-right:1px solid var(--border);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.35s;

    overflow:hidden;

}

.sidebar.expanded{

    width:260px;

}


/* ===============================
        Sidebar Sections
=============================== */

.sidebar-top{

    padding:18px 12px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sidebar-bottom{

    padding:18px 12px;

    display:flex;

    flex-direction:column;

    gap:8px;

}


/* ===============================
        Navigation Buttons
=============================== */

.nav-btn{

    width:100%;

    height:52px;

    padding:0 18px;

    border:none;

    background:transparent;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:18px;

    cursor:pointer;

    color:#CFCFCF;

    font-size:15px;

    position:relative;

    transition:all .25s ease;

}

.nav-btn i{

    width:24px;

    text-align:center;

    font-size:18px;

}


/* Gold Indicator */

.nav-btn::before{

    content:"";

    position:absolute;

    left:0;

    width:3px;

    height:30px;

    border-radius:50px;

    background:var(--gold);

    opacity:0;

    transition:.25s;

}

.nav-btn:hover::before{

    opacity:1;

}

.nav-btn:hover{

    background:#1D1E23;

    color:var(--gold);

    transform:translateX(3px);

}

.nav-btn.active{

    background:#1E2025;

    color:var(--gold);

    border:1px solid rgba(212,175,55,.18);

}


/* ===============================
        Hidden Text
=============================== */

.nav-text{

    opacity:0;

    white-space:nowrap;

    transition:.3s;

}

.sidebar.expanded .nav-text{

    opacity:1;

}


/* ===============================
        Main Area
=============================== */

.main{

    flex:1;

    position:relative;

    display:flex;

    flex-direction:column;

}


/* ===============================
        Top Navbar
=============================== */

.topbar{

    position: relative;

    z-index: 1000;

    overflow: visible;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.brand{

    font-family:"Bitcount Single";

    font-size:34px;

    color:var(--gold);

    font-weight:500;

    letter-spacing:.5px;

}


.top-actions{

    display:flex;

    gap:12px;

}


.top-actions button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#17181C;

    color:var(--gold);

    transition:.25s;

}

.top-actions button:hover{

    background:

    linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold));

    color:#111;

    transform:
    translateY(-2px);

    box-shadow:
    0 0 18px rgba(212,175,55,.45);

}

/* =======================================================
                CHAT CONTAINER
======================================================= */

.chat-container{

    flex:1;

    position:relative;

    overflow-y:auto;

    overflow-x:hidden;

    padding:90px 0 160px;
}


/* ===============================
        Welcome Screen
=============================== */

.welcome{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-55%);

    text-align:center;

    width:100%;

    transition:.45s ease;

    user-select:none;

}

.welcome h1{

    font-family:"Bitcount Single";

    font-size:82px;

    font-weight:450;

    color:var(--gold);

    letter-spacing:1px;

    margin-bottom:18px;

}

.welcome p{

    color:#8F8F8F;

    font-size:20px;

    font-weight:300;

    letter-spacing:.4px;

}


/* Hide welcome after first message */

.welcome.hide{

    opacity:0;

    transform:

    translate(-50%,-140%);

}


/* ===============================
        Chat Area
=============================== */

#chatArea{

    width:min(900px,90%);

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* ===============================
        Message Row
=============================== */

.message{

    display:flex;

    width:100%;

    animation:fadeUp .35s ease;

}

.message.user{

    justify-content:flex-end;

}

.message.ai{

    justify-content:flex-start;

}


/* ===============================
        Message Bubble
=============================== */

.bubble{

    max-width: 72%;

    padding: 10px 14px;

    border-radius: 18px;

    font-size: 15px;

    line-height: 1.55;

    word-break: break-word;

    transition: .2s ease;

}

/* ===============================
        User Bubble
=============================== */

.user .bubble{

    background: #D4AF37;

    color: #111;

    border-radius: 18px;

    box-shadow: none;

}

/* ===============================
        AI Bubble
=============================== */

.ai .bubble{

    background: #17181C;

    color: white;

    border: none;

    border-radius: 18px;    

    box-shadow: none;
    

}


/* ===============================
        AI Avatar
=============================== */

.ai-avatar{


    width:34px;

    height:34px;

    margin-right:10px;

    font-size:14px;

    flex-shrink:0;

    margin-right:14px;

    border-radius:50%;

    background:

    linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold));

    display:flex;

    justify-content:center;

    align-items:center;

    color:#111;

    font-weight:700;

}


/* ===============================
        Prompt Bar
=============================== */

.text_bar{

    position:absolute;

    bottom:32px;

    left:50%;

    transform:translateX(-50%);

    width:min(900px,92%);

    display:flex;

    align-items:flex-end;

    gap:12px;

    padding:14px;

    background:#17181C;

    border:1px solid rgba(212,175,55,.18);

    border-radius:28px;

    transition:.3s;

    box-shadow:

    0 10px 35px rgba(0,0,0,.55);

}


/* Hover */

.text_bar:hover{

    border-color:

    rgba(212,175,55,.45);

    box-shadow:

    0 0 25px rgba(212,175,55,.10),

    0 12px 40px rgba(0,0,0,.6);

}


/* Focus */

.text_bar:focus-within{

    border-color:var(--gold);

    box-shadow:

    0 0 35px rgba(212,175,55,.18);

}


/* ===============================
        Textarea
=============================== */

textarea{

    flex:1;

    resize:none;

    border:none;

    outline:none;

    background:transparent;

    color:white;

    font-size:16px;

    font-family:"Inter",sans-serif;

    line-height:1.7;

textarea{

    flex:1;

    border:none;

    outline:none;

    resize:none;

    background:transparent;

    color:white;

    font-size:16px;

    font-family:"Inter",sans-serif;

    line-height:1.6;

    min-height:24px;

    max-height:180px;

    overflow-y:auto;

}

    overflow-y:auto;

}


/* Placeholder */

textarea::placeholder{

    color:#888;

}


/* ===============================
        Prompt Buttons
=============================== */

.icon-btn,

.send-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    flex-shrink:0;

    background:#24262D;

    color:var(--gold);

    transition:.25s;

}

.send-btn:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

}

/* Hover */

.icon-btn:hover,

.send-btn:hover{

    background:

    linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold));

    color:#111;

    transform:

    translateY(-2px)

    scale(1.05);

    box-shadow:

    0 0 18px rgba(212,175,55,.4);

}


/* Click */

.icon-btn:active,

.send-btn:active{

    transform:scale(.94);

}


/* ===============================
        Prompt Scrollbar
=============================== */

textarea::-webkit-scrollbar{

    width:6px;

}

textarea::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:100px;

}


/* ===============================
        Chat Scrollbar
=============================== */

.chat-container::-webkit-scrollbar{

    width:8px;

}

.chat-container::-webkit-scrollbar-thumb{

    background:#2C2C2C;

    border-radius:100px;

}

.chat-container::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/* =======================================================
                    ANIMATIONS
======================================================= */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:0 0 28px rgba(212,175,55,.25);

    }

    100%{

        box-shadow:0 0 0 rgba(212,175,55,0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}


/* =======================================================
                SIDEBAR ANIMATION
======================================================= */

.sidebar{

    transition:
    width .35s ease,
    background .3s ease;

}

.sidebar.expanded{

    box-shadow:

    0 0 30px rgba(0,0,0,.35);

}

.sidebar.expanded .nav-text{

    animation:fadeUp .35s ease;

}


/* =======================================================
                BUTTON EFFECTS
======================================================= */

.nav-btn,
.icon-btn,
.send-btn,
.top-actions button{

    transition:

    all .25s ease;

}

.nav-btn:hover{

    transform:translateX(4px);

}

.send-btn{

    animation:float 4s ease-in-out infinite;

}

.send-btn:hover{

    animation:none;

}


/* =======================================================
                ACTIVE CHAT
======================================================= */

.chat-item-active{

    background:#1B1D22;

    color:var(--gold);

    border-left:3px solid var(--gold);

}


/* =======================================================
                CODE BLOCKS
======================================================= */

pre{

    background:#111214;

    border:1px solid rgba(212,175,55,.08);

    border-radius:14px;

    padding:18px;

    overflow:auto;

    margin-top:14px;

}

code{

    font-family:

    Consolas,

    monospace;

    color:#F4E3A2;

}


/* =======================================================
                INLINE CODE
======================================================= */

p code{

    background:#1B1C20;

    padding:3px 8px;

    border-radius:8px;

}


/* =======================================================
                LINKS
======================================================= */

a{

    color:var(--gold);

    text-decoration:none;

}

a:hover{

    color:var(--gold-light);

}


/* =======================================================
                THINKING INDICATOR
======================================================= */

.typing{

    display:flex;

    gap:6px;

    margin-top:8px;

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

    animation:bounce 1s infinite;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

        opacity:.5;

    }

    50%{

        transform:translateY(-8px);

        opacity:1;

    }

}


/* ==========================================
        PIXEL THINKING
========================================== */

.thinking{

    display:flex;

    align-items:center;

}

.thinking-text{

    position:relative;

    display:inline-block;

    font-size:15px;

    font-weight:400;

    letter-spacing:.25px;

    white-space:nowrap;

    color:#5e5e5e;

}

/* Gold Text */

.thinking-text::after{

    content:attr(data-text);

    position:absolute;

    inset:0;

    color:#F4E3A2;

    white-space:nowrap;

    overflow:hidden;

    width:0;

    animation:pixelReveal 2.4s ease-in-out infinite;

}

/* Moving Gold Orb */

.thinking-text::before{

    content:"";

    position:absolute;

    top:50%;

    left:-18px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#D4AF37;

    transform:translateY(-50%);

    box-shadow:

        0 0 8px rgba(212,175,55,.95),

        0 0 18px rgba(212,175,55,.7),

        0 0 34px rgba(212,175,55,.35);

    animation:pixelOrb 2.4s ease-in-out infinite;

}

@keyframes pixelReveal{

    0%{

        width:0;

    }

    70%{

        width:100%;

    }

    100%{

        width:100%;

    }

}

@keyframes pixelOrb{

    0%{

        left:-18px;

        opacity:0;

    }

    5%{

        opacity:1;

    }

    70%{

        left:calc(100% - 6px);

        opacity:1;

    }

    100%{

        left:calc(100% - 6px);

        opacity:0;

    }

}

/* =======================================================
                IMAGE MESSAGES
======================================================= */

.bubble img{

    width:100%;

    border-radius:14px;

    margin-top:10px;

}


/* =======================================================
                CHAT TRANSITIONS
======================================================= */

.message{

    transition:.25s;

}

.message:hover{

    transform:translateY(-2px);

}


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

@media(max-width:1100px){

    .welcome h1{

        font-size:64px;

    }

    .text_bar{

        width:94%;

    }

}

@media(max-width:900px){

    .sidebar{

        width:70px;

    }

    .sidebar.expanded{

        width:220px;

    }

    .brand{

        font-size:28px;

    }

}

@media(max-width:700px){

    .topbar{

        padding:0 18px;

    }

    .welcome h1{

        font-size:52px;

    }

    .welcome p{

        font-size:17px;

    }

    .bubble{

        max-width:92%;

    }

    .text_bar{

        bottom:18px;

    }

}

@media(max-width:500px){

    .sidebar{

        position:absolute;

        z-index:100;

        height:100vh;

    }

    .top-actions{

        gap:6px;

    }

}


/* =======================================================
                SELECTION
======================================================= */

::selection{

    background:rgba(212,175,55,.35);

    color:white;

}


/* =======================================================
                SCROLLBAR
======================================================= */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#0A0A0A;

}

::-webkit-scrollbar-thumb{

    background:#2E2E2E;

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}


/* =======================================================
                GLASS EFFECT
======================================================= */

.topbar{

    backdrop-filter:blur(14px);

    background:rgba(10,10,10,.55);

}

.text_bar{

    backdrop-filter:blur(18px);

}


/* =======================================================
                PREMIUM HOVER GLOW
======================================================= */

.text_bar:hover{

    animation:pulseGlow 2s infinite;

}


/* =======================================================
                READY FOR STREAMING
======================================================= */

.streaming{

    border-right:2px solid var(--gold);

    animation:blink .8s infinite;

}

@keyframes blink{

    50%{

        border-color:transparent;

    }

}

/*Streaming */
.stream{

    white-space:pre-wrap;

    line-height:1.7;

}

.stream::after{

    content:"";

    display:inline-block;

    width:2px;

    height:18px;

    margin-left:3px;

    background:#D4AF37;

    animation:cursorBlink .8s infinite;

}

@keyframes cursorBlink{

    50%{

        opacity:0;

    }

}


/* ==========================================
        MODEL SELECTOR
========================================== */

.model-selector{

    position: relative;

    z-index: 1001;

}

#modelButton{

    background:#17181C;

    border:1px solid rgba(212,175,55,.15);

    color:white;

    border-radius:12px;

    padding:10px 14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.25s;

}

#modelButton:hover{

    border-color:#D4AF37;

}

.model-menu{

    position:absolute;

    top:55px;

    left:0;

    width:250px;

    background:#111214;

    border:1px solid rgba(212,175,55,.15);

    border-radius:16px;

    display:none;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

    z-index:9999999;

}

.model-menu.show{

    display:block;

}

.model-item{

    padding:14px 18px;

    cursor:pointer;

    transition:.2s;

}

.model-item:hover{

    background:#1D1F25;

}