/**
 * ═══════════════════════════════════════════════════════════════════
 * CHAT MESSAGE SLIDE-IN ANIMATIONS
 * ═══════════════════════════════════════════════════════════════════
 */

/* DISABLED - All messages animate on every render causing chaos */
/* Base animation only for NEW messages with .new-message class */
.chat-message.new-message {
    animation: messageSlideIn 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    animation-fill-mode: both !important;
}

/* NO staggered delays - causes all messages to re-animate */
/* REMOVED TO PREVENT RE-ANIMATION ON EVERY RENDER */

/* Slide in from left for user messages */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Specific animation for NEW assistant messages - slide from right */
.chat-message.new-message:has(.message-content.assistant) {
    animation: messageSlideInRight 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

@keyframes messageSlideInRight {
    from {
        opacity: 0;
        transform: translateX(20px) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* For newly added messages (during conversation) */
.chat-message.new-message {
    animation: messageSlideInNew 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes messageSlideInNew {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth transition for message content updates (streaming) */
.message-content {
    transition: all 0.15s ease;
}

/* Empty state animation */
.empty-state {
    animation: fadeInScale 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply to all chat containers */
#chat-messages .chat-message,
#expanded-chat-messages .chat-message,
.right-panel .chat-message {
    /* Animation applied via class above */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .chat-message,
    .chat-message.new-message,
    .empty-state {
        animation: none !important;
        animation-delay: 0s !important;
    }
}

/* Performance optimization - use GPU acceleration */
.chat-message {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Remove will-change after animation completes */
@keyframes removeWillChange {
    to {
        will-change: auto;
    }
}

/* Removed duplicate animation rule - conflicts with base animation */