body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    /* Optional background color */
}

.chatbox {
    /* width: 100%; */
    /* Maximum width for better appearance on larger screens */
    margin: 20px 20px;
    /* Center the chatbox horizontally */
    border: 1px solid #ccc;
    /* Optional border */
    border-radius: 8px;
    /* Optional rounded corners */
    background-color: #fff;
    /* Background color for chatbox */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Optional shadow */
    display: flex;
    flex-direction: column;
    height: 95vh;
    /* Full height with some margin */
}

.chatbox-header {
    padding: 10px;
    background-color: #007bff;
    /* Header background color */
    color: white;
    /* Header text color */
    border-top-left-radius: 8px;
    /* Rounded corners for header */
    border-top-right-radius: 8px;
    /* Rounded corners for header */
}

.chatbox-body {
    flex: 1;
    /* Allow this to grow */
    padding: 10px;
    overflow-y: auto;
    /* Enable scrolling */
}

.chatbox-footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
    /* Optional top border */
}

#user-input {
    flex: 1;
    /* Allow input field to grow */
    padding: 10px;
    border: 1px solid #ccc;
    /* Border for input field */
    border-radius: 4px;
    /* Rounded corners for input field */
    margin-right: 10px;
    /* Space between input and button */
}

button {
    padding: 10px 15px;
    /* Button padding */
    background-color: #007bff;
    /* Button background color */
    color: white;
    /* Button text color */
    border: none;
    /* Remove border */
    border-radius: 4px;
    /* Rounded corners for button */
    cursor: pointer;
    /* Pointer cursor on hover */
}

button:hover {
    background-color: #0056b3;
    /* Darker shade on hover */
}

.message {
    margin: 5px 0;
    /* Space between messages */
    padding: 10px;
    /* Padding for messages */
    border-radius: 4px;
    /* Rounded corners for messages */
    max-width: 70%;
    /* Maximum width of messages */
    clear: both;
    /* Clear floats */
    width: fit-content;
}

.user-message {
    background-color: #e1ffc7;
    margin-left: auto;
    width: fit-content;
    /* Background color for user messages */
    align-self: flex-end;
    /* Align user messages to the right */
}

.bot-message {
    background-color: #f1f1f1;
    /* Background color for bot messages */
    align-self: flex-start;
    /* Align bot messages to the left */
}

.language-select {
    padding: 10px;
    text-align: center;
    background-color: #f4f4f4;
    border-bottom: 2px solid #e0e0e0;
}

.language-select select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}