.ai-chat-body {
    flex: 1;
    overflow-y: auto;

    padding: 15px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    background:
        url('/templates/default/images/chat-bg.png'),
        #e5ddd5;

    background-size: cover;
}


/* MESSAGE */

.ai-message {
    max-width: 82%;

    padding: 10px 14px;

    border-radius: 16px;

    font-size: 14px;

    line-height: 1.5;

    word-break: break-word;

    position: relative;

    animation: fadeIn .2s ease;
}


/* USER */

.ai-message.user {
    align-self: flex-end;

    background: #dcf8c6;

    color: #111;

    border-bottom-right-radius: 4px;
}


/* BOT */

.ai-message.bot {
    align-self: flex-start;

    background: #fff;

    color: #111;

    border-bottom-left-radius: 4px;
}


/* TYPING */

.ai-message.typing {
    opacity: .7;
    font-style: italic;
}


/* ANIMATION */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}