* {
    box-sizing: border-box;
}


:root {

    --bg:
        #0b0b0f;

    --sidebar:
        #111116;

    --panel:
        #17171e;

    --panel-light:
        #202029;

    --border:
        #2b2b35;

    --text:
        #f4f4f5;

    --muted:
        #9696a3;

    --accent:
        #8b5cf6;

    --accent-hover:
        #7c3aed;

}


body {

    margin: 0;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);

    height:
        100vh;

    overflow:
        hidden;

}


.app {

    display:
        flex;

    height:
        100vh;

}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/

.sidebar {

    width:
        280px;

    background:
        var(--sidebar);

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

    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

}


.logo {

    font-size:
        21px;

    font-weight:
        700;

    margin-bottom:
        25px;

}


.logo span {

    color:
        var(--accent);

}


.new-chat-button {

    width:
        100%;

    padding:
        13px;

    border:
        0;

    border-radius:
        10px;

    background:
        var(--accent);

    color:
        white;

    font-size:
        15px;

    cursor:
        pointer;

}


.new-chat-button:hover {

    background:
        var(--accent-hover);

}


.sidebar-title {

    margin-top:
        30px;

    margin-bottom:
        10px;

    font-size:
        12px;

    text-transform:
        uppercase;

    color:
        var(--muted);

}


.chat-list {

    overflow-y:
        auto;

}


.chat-item {

    padding:
        12px;

    border-radius:
        8px;

    cursor:
        pointer;

    margin-bottom:
        5px;

}


.chat-item:hover {

    background:
        var(--panel);

}


/*
|--------------------------------------------------------------------------
| Main
|--------------------------------------------------------------------------
*/

.main {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


.topbar {

    height:
        70px;

    padding:
        0 25px;

    display:
        flex;

    align-items:
        center;

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

}


.character-name {

    font-weight:
        600;

}


.model-name {

    font-size:
        12px;

    color:
        var(--muted);

    margin-top:
        3px;

}


.icon-button {

    display:
        none;

}


/*
|--------------------------------------------------------------------------
| Welcome
|--------------------------------------------------------------------------
*/

.welcome {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        50px;

    text-align:
        center;

}


.welcome-icon {

    font-size:
        50px;

    color:
        var(--accent);

}


.welcome h1 {

    font-size:
        32px;

    margin-bottom:
        10px;

}


.welcome p {

    color:
        var(--muted);

}


.character-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    gap:
        20px;

    max-width:
        900px;

    margin:
        40px auto;

}


.character-card {

    background:
        var(--panel);

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

    border-radius:
        15px;

    padding:
        25px;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        0.2s;

}


.character-card:hover {

    border-color:
        var(--accent);

    transform:
        translateY(
            -3px
        );

}


.character-card h3 {

    margin-top:
        0;

}


.character-card p {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.5;

}


/*
|--------------------------------------------------------------------------
| Chat
|--------------------------------------------------------------------------
*/

.chat-screen {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        0;

}


.messages {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        30px;

}


.message {

    max-width:
        800px;

    margin:
        0 auto 25px;

    display:
        flex;

    flex-direction:
        column;

}


.message.user {

    align-items:
        flex-end;

}


.message-content {

    padding:
        14px 17px;

    border-radius:
        14px;

    line-height:
        1.6;

    white-space:
        pre-wrap;

}


.message.user
.message-content {

    background:
        var(--accent);

}


.message.assistant
.message-content {

    background:
        var(--panel);

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

}


.composer {

    padding:
        20px;

    display:
        flex;

    gap:
        10px;

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

}


#messageInput {

    flex:
        1;

    resize:
        none;

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

    background:
        var(--panel);

    color:
        var(--text);

    border-radius:
        12px;

    padding:
        14px;

    font-family:
        inherit;

    outline:
        none;

}


#messageInput:focus {

    border-color:
        var(--accent);

}


.send-button {

    width:
        50px;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--accent);

    color:
        white;

    font-size:
        20px;

    cursor:
        pointer;

}


.hidden {

    display:
        none;

}


.loading {

    color:
        var(--muted);

    padding:
        10px;

}


@media (
    max-width: 700px
) {


    .sidebar {

        position:
            fixed;

        left:
            -280px;

        top:
            0;

        bottom:
            0;

        z-index:
            10;

        transition:
            0.2s;

    }


    .sidebar.open {

        left:
            0;

    }


    .icon-button {

        display:
            block;

        margin-right:
            15px;

        background:
            none;

        border:
            0;

        color:
            white;

        font-size:
            20px;

    }


    .welcome {

        padding:
            25px;

    }


    .messages {

        padding:
            20px 12px;

    }


}