/* ===== Fix Carousel Chat Avatars ===== */

/* Chat app bar avatar */
.chat-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.chat-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Message avatars */
.message-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
}

.message.bot {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.message.user {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 12px !important;
}

/* Ensure proper message bubble alignment */
.message-bubble {
    max-width: 70% !important;
}

.message.bot .message-bubble {
    background: #F1F5F9 !important;
    color: #1E293B !important;
    border-radius: 18px 18px 18px 4px !important;
}

.message.user .message-bubble {
    background: linear-gradient(135deg, #0EA5E9, #7C3AED) !important;
    color: white !important;
    border-radius: 18px 18px 4px 18px !important;
}

/* Dashboard screen avatars (other screens in carousel) */
.user-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Fix any Material Icon replacements */
.chat-avatar .material-icons,
.user-avatar .material-icons {
    display: none !important;
}

/* Smooth animation for avatar appearance */
.message-avatar,
.chat-avatar img {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}