/* General body styles */
body {
    font-family: 'Arial', sans-serif; /* Sets the font for the page */
    background-color: #f4f4f4; /* Light grey background for the page */
    margin: 0;
    padding: 20px;
}

/* Container for the chatbot */
#chatbot-container {
    background-color: #ffffff; /* White background for the chatbot */
    width: 300px; /* Fixed width */
    margin: auto; /* Center the chatbot on the page */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow for 3D effect */
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
}

/* Header styles */
h1 {
    color: #333333; /* Dark grey color for the text */
    text-align: center;
}

/* Chat interface styles */
#chat-interface {
    border-top: 2px solid #eeeeee; /* Light grey top border */
    padding-top: 10px;
}

/* Message area styles */
#message-area {
    height: 150px; /* Fixed height for message display area */
    overflow-y: auto; /* Enables scrolling */
    border: 1px solid #cccccc; /* Light grey border */
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9; /* Very light grey background */
}

/* User input field styles */
#user-input {
    width: calc(100% - 52px); /* Full-width minus button width */
    padding: 8px; /* Padding for easier text entry */
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-sizing: border-box; /* Border and padding included in width */
}

/* Send button styles */
button {
    width: 50px; /* Fixed width for the button */
    background-color: #0056b3; /* Blue background color */
    color: white; /* White text */
    border: none;
    padding: 10px 0; /* Padding top and bottom */
    text-align: center;
    border-radius: 4px;
    cursor: pointer; /* Pointer cursor on hover */
}

button:hover {
    background-color: #004494; /* Darker blue on hover */
}