body {

    background:#f5f5f5;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}



nav {

    background:#222;

    padding:15px;

}


nav a {

    color:white;

    text-decoration:none;

    margin-right:20px;

}



.chat-container {

    max-width:900px;

    margin:30px auto;

    background:white;

    border-radius:12px;

    box-shadow:
    0 4px 20px
    rgba(0,0,0,.15);

    display:flex;

    flex-direction:column;

    height:80vh;

}



.chat-header {

    padding:15px;

    border-bottom:
    1px solid #ddd;

    display:flex;

    justify-content:
    space-between;

}



.messages {

    flex:1;

    overflow-y:auto;

    padding:20px;

}



.message {

    max-width:75%;

    padding:12px 16px;

    margin:10px;

    border-radius:15px;

    line-height:1.5;

}



.user {

    background:#2563eb;

    color:white;

    margin-left:auto;

}



.bot {

    background:#e5e7eb;

    color:#111;

}



.thinking {

    opacity:.6;

    font-style:italic;

}



.input-area {

    padding:15px;

    display:flex;

    gap:10px;

    border-top:
    1px solid #ddd;

}



textarea {

    flex:1;

    resize:none;

    padding:12px;

    border-radius:10px;

    border:1px solid #ccc;

}



button {

    padding:
    10px 25px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    cursor:pointer;

}



button:disabled {

    opacity:.5;

}