/**
 * Styles for the main chat interface.
 */

body.chat-page, html {
    height: 100%;
    overflow: hidden;
}

body.chat-page {
    background-color: var(--chat-bg-color);
    color: var(--chat-text-color);
    display: flex;
    flex-direction: column;
    font-family: Vazirmatn, sans-serif;
}

main.container {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: 800px;
    min-height: 0; /* Prevent flex container from overflowing */
    padding: 0 1rem; /* Adjust padding for sticky form */
}

#chat-header {
    align-items: center;
    background-color: var(--chat-bg-color); /* Give it a background */
    border-bottom: 1px solid var(--message-bg-color);
    display: flex;
    justify-content: space-between;
    padding: 1rem 0 0.5rem; /* Adjust padding */
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 1;
}

#message-container {
    flex-grow: 1;
    min-height: 0; /* Critical for flexbox scrolling */
    overflow-y: auto; /* Keep this for scrolling */
    padding: 1rem 0.5rem 1rem 0;
}

/* Custom Scrollbar Styling */
#message-container::-webkit-scrollbar {
    width: 8px;
}

#message-container::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

#message-container::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 4px;
}

#messages-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.message {
    align-self: flex-start; /* Default to left alignment */
    background-color: var(--message-bg-color);
    border-radius: 1rem;
    list-style-type: none; /* Remove bullet point */
    margin-bottom: 0.5rem;
    max-width: 75%;
    padding: 0.5rem 1rem;
    position: relative; /* Needed for timestamp positioning */
    text-align: left; /* Default to left-aligned text */
    white-space: pre-wrap; /* Preserve newlines */
    word-wrap: break-word;
}

.message.user-message {
    align-self: flex-end; /* Align user's own messages to the right */
    background-color: var(--message-user-bg-color);
    color: var(--message-user-text-color);
    text-align: right; /* Right-align text for user's messages */
}

.message-username {
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.message-timestamp {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.3rem;
    opacity: 0.7;
    text-align: right; /* Align timestamp to the right within the bubble */
}

/* For user messages, align the timestamp to the left */
.message.user-message .message-timestamp {
    text-align: left;
}

#chat-form {
    align-items: flex-end;
    background-color: var(--chat-bg-color);
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0 1rem;
}

#chat-form textarea {
    flex-grow: 1;
    resize: none;
    overflow-y: hidden;
    /* Explicitly set initial height to match button for 1 line */
    height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
    /* Set max height for approx 3 lines */
    max-height: calc((1rem * var(--pico-line-height)) * 3 + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}

#send-button {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    /* Match the initial height of Pico.css form elements */
    height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
    justify-content: center;
    padding: 0;
    width: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}