/* chat_style.css cleaned up global overrides */

#chat-window #chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 800px; /* Optional: Max width for desktop */
    margin: 0 auto;   /* Center on desktop if max-width is used */
    box-sizing: border-box;
}

#message-list {
    flex-grow: 1; /* Takes up available space */
    overflow-y: auto; /* Allows scrolling for messages */
    padding: 10px;
    display: flex;
    flex-direction: column; /* New messages stack at bottom */
}

.message {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 15px;
    max-width: 70%; /* Messages don't take full width */
    word-wrap: break-word; /* Break long words */
}

.user-message {
    background-color: #dcf8c6; /* Example: Light green for user */
    align-self: flex-end; /* User messages to the right */
    border-bottom-right-radius: 5px;
}

.bot-message {
    background-color: #e0e0e0; /* Example: Light grey for bot */
    align-self: flex-start; /* Bot messages to the left */
    border-bottom-left-radius: 5px;
}

.message p {
    margin: 0;
}

#input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
}

#user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    resize: none; /* Prevent manual resize */
    font-size: 16px;
    line-height: 1.4;
    max-height: calc(1.4em * 4 + 20px); /* Approx 4 lines + padding */
    overflow-y: auto; /* Add scrollbar if more than 4 lines */
    margin-right: 10px;
}

#submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
}

#submit-button:hover {
    background-color: #0056b3;
}

/* Optional: Styles for when keyboard is active on mobile - may need JS adjustments */
/* body.keyboard-active #input-area { padding-bottom: 200px; } */ /* Example placeholder */