* {
    box-sizing:border-box;
}


body {

    margin:0;
    font-family:
        Segoe UI,
        Arial,
        sans-serif;

    background:#343541;
    color:white;

}



.app {

    display:flex;
    height:100vh;

}




/* PANEL LEWY */

.sidebar {

    width:280px;
    background:#202123;
    padding:15px;

    display:flex;
    flex-direction:column;

}


.brand {

    display:flex;
    align-items:center;
    gap:12px;

    font-size:22px;
    font-weight:bold;

    margin-bottom:20px;

}


.logo {

    width:40px;
    height:40px;
    border-radius:8px;
    object-fit: cover;

}



.new-chat {

    background:#10a37f;

    border:0;
    color:white;

    padding:12px;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

}


.history-title {

    margin-top:25px;
    color:#aaa;

}


.history {

    flex:1;
    overflow:auto;

}



.settings {

    border-top:1px solid #444;

    padding-top:15px;

}



.settings input {

    width:100%;

    margin-top:8px;

    padding:8px;

    background:#343541;

    color:white;

    border:1px solid #555;

}



.settings button {

    width:100%;
    margin-top:8px;

    padding:8px;

}



/* CHAT */


.chat {

    flex:1;

    display:flex;

    flex-direction:column;

}



.chat-header {

    height:70px;

    border-bottom:1px solid #555;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 25px;

}



.chat-header h2 {

    margin:0;

}


#status {

    color:#aaa;

    font-size:13px;

}



#modelSelect {

    background:#202123;

    color:white;

    border:1px solid #555;

    padding:8px;

}



/* WIADOMOŚCI */


.messages {

    flex:1;

    overflow:auto;

    padding:25px;

}



.welcome {

    text-align:center;

    color:#aaa;

    margin-top:120px;

}



.message {

    max-width:900px;

    margin:15px auto;

    padding:15px;

    border-radius:10px;

    line-height:1.5;

}



.user {

    background:#343541;

}


.assistant {

    background:#444654;

}




/* INPUT */


.input-area {

    padding:20px;

    display:flex;

    gap:10px;

}


textarea {

    flex:1;

    resize:none;

    background:#40414f;

    color:white;

    border:1px solid #666;

    border-radius:10px;

    padding:15px;

    font-size:16px;

}



#send {

    width:55px;

    border:0;

    border-radius:10px;

    background:#10a37f;

    color:white;

    font-size:25px;

    cursor:pointer;

}


.message pre {

    background:#111;

    padding:15px;

    border-radius:8px;

    overflow:auto;

}



.message code {

    font-family:
    Consolas,
    monospace;

}



.message p {

    margin:8px 0;

}



.message ul {

    margin-left:25px;

}



.message strong {

    color:white;

}


.textarea {

    min-height:50px;

    max-height:200px;

}


.gwiazdka {
    font-size:12px;
}