/* =========================================================
   CHAT MESSAGE LAYOUT
   ========================================================= */
.wpai-msg-row {
    display: flex;
    align-items: flex-end;
    margin: 12px 0;
}

/* Bot messages on left */
.wpai-msg-row.bot {
    justify-content: flex-start;
}

/* User messages on right */
.wpai-msg-row.user {
    justify-content: flex-end;
}

/* Avatar + name container */
.wpai-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 6px;
    flex-shrink: 0;
}

.wpai-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    object-fit: cover;
}

.wpai-name {
    font-size: 11px;
    font-weight: bold;
    color: #333;
    margin-top: 3px;
    text-align: center;
}

/* =========================================================
   CHAT BUBBLES
   ========================================================= */
.wpai-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 85%;
}

/* User (right) bubble */
.wpai-msg-row.user .wpai-bubble {
    background: #0073aa;
    color: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 16px;
    text-align: left;
    margin-left: auto;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Bot (left) bubble */
.wpai-msg-row.bot .wpai-bubble {
    background: #e6e6e6;
    color: #222;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 16px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Proper avatar alignment */
.wpai-msg-row.bot .wpai-avatar-wrap {
    align-items: flex-start;
    margin-right: 8px;
}

.wpai-msg-row.user .wpai-avatar-wrap {
    align-items: flex-end;
    margin-left: 8px;
}

/* Long text wrapping */
.wpai-bubble p {
    margin: 0 0 6px;
}

/* Loader */
.bot-msg.loading {
    font-style: italic;
    color: #555;
}

/* Error message */
.bot-msg.error {
    background: #ffdddd;
    color: #a60000;
    border: 1px solid #ff9999;
}

/* Scroll area */
.wpai-messages {
    overflow-y: auto;
    word-wrap: break-word;
}
/* =========================================================
   MESSAGE ANIMATIONS
   ========================================================= */

/* Common fade-slide animation for both user and bot messages */
@keyframes wpaiMessageFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply the animation to chat bubbles */
.wpai-msg-row.bot .wpai-bubble,
.wpai-msg-row.user .wpai-bubble {
    animation: wpaiMessageFade 0.25s ease-out;
}

/* Optional: slightly delay bot messages for realism */
.wpai-msg-row.bot .wpai-bubble {
    animation-delay: 0.1s;
    animation-fill-mode: both;
}