body {
    color: #f5f5f5;
    font-family: 'Arial', sans-serif;
    background-color: #2c3e50; /* Dark background for chat */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    height: 100vh; /* Full height */
    margin: 0; /* Remove default margin */
}

#scroll-wrapper {
    flex: 1; /* Allow the chat area to grow */
    display: flex;
    justify-content: center; /* Center the chat container */
    align-items: flex-start; /* Align items to the top */
    width: 100%; /* Full width */
    padding: 20px; /* Add some padding */
}

#chat-container {
    width: 100%; /* Full width */
    max-width: 600px; /* Max width for chat container */
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent background */
    border-radius: 10px; /* Rounded corners */
    overflow: auto; /* Allow scrolling */
    padding: 20px; /* Add padding inside the chat container */
}

.user-message {
    background-color: rgb(86, 144, 163);
    color: white;
    padding: 10px;
    border-radius: 10px;
    white-space: pre-wrap;
    margin-left: auto;
    margin-right: 0;
    max-width: 90%;
}

.response-message {
    background-color: rgb(62, 62, 62);
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-right: auto;
    max-width: 90%;
}

#input-area {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Full width for input area */
    max-width: 600px; /* Max width for input area */
}

#user-input {
    overflow-y: auto;
    resize: none; /* Prevent user from manually resizing */
    height: 40px;
    max-height: 200px; /* Set your desired max height here */
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem; /* Adjust the size as needed */
        display: block; /* Ensure it is displayed */
        text-align: center; /* Center the title for better appearance */
    }
}