/* Chatbot Interactive Animations */

/* Message slide-in animation */
.message {
    animation: slideIn 0.3s ease-out;
    transform-origin: left;
}

.message.user {
    animation: slideInRight 0.3s ease-out;
    transform-origin: right;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Chatbot window entrance animation */
.chatbot-window {
    animation: windowSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Header pulse animation */
.chatbot-header {
    animation: headerPulse 2s ease-in-out infinite;
}

@keyframes headerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 50, 50, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(6, 50, 50, 0); }
}

/* Input focus animation */
.chatbot-input input:focus {
    animation: inputGlow 0.3s ease-out;
}

@keyframes inputGlow {
    from {
        box-shadow: 0 0 0 0 rgba(54, 107, 42, 0.3);
    }
    to {
        box-shadow: 0 0 0 4px rgba(54, 107, 42, 0.1);
    }
}

/* Send button hover animation */
.chatbot-input button:hover {
    animation: buttonBounce 0.3s ease-out;
}

@keyframes buttonBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Float button attention animation */
.chatbot-float:not(.loaded) {
    animation: attention 3s ease-in-out infinite;
}

@keyframes attention {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.05); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.05); }
}