.chat-messages {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%), var(--bg-card);
    border-radius: 24px;
    padding: 20px 18px;
    max-height: 65vh;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.message {
    display: flex;
    margin-bottom: 4px;
}

.ai-message {
    justify-content: flex-start;
}

.user-message {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.6;
}

.ai-message .message-bubble {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-card));
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.user-message .message-bubble {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #ffffff;
    border-radius: 18px 18px 4px 18px;
}

.chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.slimmest {
    max-width: 520px;
    width: 100%;
}


@media (max-width: 768px) {
    .chat-messages {
        max-height: 60vh;
    }

    .chat-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .message-bubble {
        max-width: 100%;
    }
}