.ai-chat-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(960px, 100%);
    height: calc(100vh - 8rem);
    min-height: 32rem;
    margin: 0 auto;
    padding: 1rem;
}

.ai-chat-header h1 { margin: 0; font-size: 1.75rem; }
.ai-chat-header p { margin: .25rem 0 0; color: var(--bs-secondary-color); }

.ai-chat-history {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

.ai-chat-empty {
    display: grid;
    height: 100%;
    place-items: center;
    color: var(--bs-secondary-color);
    text-align: center;
}

.ai-chat-row { display: flex; margin-bottom: .9rem; }
.ai-chat-row.user { justify-content: flex-end; }

.ai-chat-message {
    max-width: min(78%, 42rem);
    padding: .7rem .9rem;
    border-radius: .8rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.ai-chat-row.user .ai-chat-message {
    color: #fff;
    background: var(--bs-primary);
}

.ai-chat-role { margin-bottom: .2rem; font-size: .75rem; font-weight: 700; }
.ai-chat-content { overflow-wrap: anywhere; white-space: pre-wrap; }
.ai-chat-loading { display: flex; align-items: center; gap: .5rem; color: var(--bs-secondary-color); }
.ai-chat-error { margin: 0; }

.ai-chat-input-area { display: flex; align-items: stretch; gap: .75rem; }
.ai-chat-input-area textarea { resize: none; }
.ai-chat-send { min-width: 5rem; }

@media (max-width: 575.98px) {
    .ai-chat-page {
        height: calc(100dvh - 7rem);
        min-height: 24rem;
        padding: .5rem;
    }

    .ai-chat-message { max-width: 90%; }
}