.chat-area {
    flex: 1; /* defines proportion in main-content row */
    display: flex;
    flex-direction: column;
    background-color: var(--panel-bg-color);
    border-radius: var(--global-border-radius);
    padding: 16px;
    flex-grow: 1; /* To take available vertical space */
    min-height: 0; /* Good practice for flex children */
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-light);
}

#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 12px; /* Adjusted margin */
    background-color: var(--container-bg-color); /* Slightly darker than panel for contrast */
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--text-secondary-color);
}

#chat-messages p {
    margin: 0 0 8px 0;
    word-wrap: break-word;
    color: var(--text-color); /* Ensure paragraph text is primary text color */
}

#chat-messages p:last-child {
    margin-bottom: 0;
}

.chat-input-area {
    display: flex;
    gap: 10px;
}

#chat-input {
    flex-grow: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--item-bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 0.95em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#chat-input::placeholder {
    color: var(--text-secondary-color);
}

#chat-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-transparent, rgba(228, 63, 90, 0.3)); /* Fallback if var not defined */
}

#chat-send-button {
    padding: 10px 15px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#chat-send-button:hover {
    background-color: var(--accent-hover-color);
}

#chat-send-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-color-transparent, rgba(228, 63, 90, 0.4));
}

/* Custom scrollbar for chat messages (webkit) */
#chat-messages::-webkit-scrollbar {
    width: 8px;
}
#chat-messages::-webkit-scrollbar-track {
    background: var(--container-bg-color);
    border-radius: 4px;
}
#chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
#chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--item-hover-bg-color);
}

/* Class to hide the chat area */
.chat-hidden {
    display: none !important;
    /* Alternatively, animate width to 0 and hide overflow if smooth transition is desired */
    /* flex-basis: 0 !important; */
    /* width: 0 !important; */
    /* padding: 0 !important; */
    /* margin-left: 0 !important; */ /* if it has margin */
    /* overflow: hidden !important; */
}

/* Responsive adjustments for chat */
@media (max-width: 992px) { /* Adjust breakpoint as needed */
    .chat-area {
        max-height: 300px; /* Or a different height for mobile */
        flex-basis: auto; /* Allow natural sizing in column on smaller screens */
        /* flex: none; /* Ensure it doesn't try to flex as a row item */
    }
}