/* ===========================
   Google Font
=========================== */

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


/* ===========================
   Variables
=========================== */

:root{

    --bg:#212121;
    --sidebar:#171717;
    --surface:#2f2f2f;
    --surface-hover:#3a3a3a;

    --text:#ECECEC;
    --text-secondary:#A9A9A9;

    --border:#343541;

    --accent:#ffffff;

    --sidebar-width:260px;
    --header-height:60px;

    --radius:18px;

}


/* ===========================
   Reset
=========================== */

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

html{
    font-size:16px;
}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow:hidden;

}


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

button{

    font:inherit;

    color:inherit;

    background:none;

    border:none;

    cursor:pointer;

}


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

textarea{

    font:inherit;

    color:inherit;

    background:none;

    border:none;

    outline:none;

    resize:none;

}


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

.app{

    display:flex;

    width:100vw;

    height:100dvh;

}


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

.sidebar{

    width:var(--sidebar-width);

    background:var(--sidebar);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

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

    flex-shrink:0;

}


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

.sidebar-top,
.sidebar-bottom{

    padding:14px;

}

.chat-history{

    flex:1;

    overflow-y:auto;

    padding:8px;

}


/* ===========================
   History Titles
=========================== */

.chat-history h3{

    color:var(--text-secondary);

    font-size:.75rem;

    font-weight:500;

    margin:18px 10px 8px;

}


/* ===========================
   History Items
=========================== */

.history-item{

    width:100%;

    padding:12px;

    border-radius:10px;

    text-align:left;

    margin-bottom:4px;

    transition:.2s;

}

.history-item:hover{

    background:var(--surface);

}

.history-item.active{

    background:var(--surface);

}


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

.new-chat-btn,
.sidebar-item,
.profile-btn{

    width:100%;

    padding:12px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.2s;

}

.new-chat-btn:hover,
.sidebar-item:hover,
.profile-btn:hover{

    background:var(--surface);

}


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

.avatar{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#4c4c4c;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

}

.profile-info{

    display:flex;

    flex-direction:column;

}

.profile-info small{

    color:var(--text-secondary);

}


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

.main-content{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

}


/* ===========================
   Header
=========================== */

.topbar{

    height:var(--header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

}


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

.chat-area{

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

}


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

.welcome{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.welcome h1{

    font-size:2.2rem;

    font-weight:500;

}


/* ===========================
   Messages
=========================== */

.messages{

    width:min(900px,100%);

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:40px 24px;

}


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

.message{

    display:flex;

}

.message.user{

    justify-content:flex-end;

}

.message.assistant{

    justify-content:flex-start;

}

.message-content{

    max-width:80%;

    padding:14px 18px;

    border-radius:18px;

    line-height:1.6;

}

.user .message-content{

    background:var(--surface);

}

.assistant .message-content{

    background:transparent;

}


/* ===========================
   Input Area
=========================== */

.chat-input-container{

    padding:20px;

}


.chat-form{

    max-width:820px;

    margin:auto;

    background:var(--surface);

    border-radius:28px;

    padding:10px;

    display:flex;

    align-items:flex-end;

    gap:10px;

}


.chat-form textarea{

    flex:1;

    min-height:24px;

    max-height:180px;

    padding:10px 0;

}


.attach-btn,
.send-btn{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#444;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.2s;

}

.attach-btn:hover,
.send-btn:hover{

    background:#5b5b5b;

}


/* ===========================
   Footer Text
=========================== */

.disclaimer{

    text-align:center;

    margin-top:12px;

    color:var(--text-secondary);

    font-size:.75rem;

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}


/* ===========================
   Responsive
=========================== */

.mobile-menu{

    display:none;

}

@media(max-width:900px){

    .sidebar{

        position:fixed;

        left:-100%;

        top:0;

        bottom:0;

        z-index:100;

    }

    .mobile-menu{

        display:block;

    }

}