/* Animations avancées pour le bouton de chat flottant - Cool Attitude */

/* Animation d'entrée */
@keyframes chatFloatIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.6) rotate(-10deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* Animation de sortie */
@keyframes chatFloatOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(30px) scale(0.7);
    }
}

/* Animation de pulsation pour l'indicateur */
@keyframes chatPulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
        box-shadow: 0 0 0 8px rgba(255, 71, 87, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
    }
}

/* Animation de secousse pour indisponibilité */
@keyframes chatShake {
    0%, 100% { 
        transform: translateX(0) rotate(0deg); 
    }
    10% { 
        transform: translateX(-8px) rotate(-3deg); 
        background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    }
    20% { 
        transform: translateX(8px) rotate(3deg); 
    }
    30% { 
        transform: translateX(-8px) rotate(-3deg); 
    }
    40% { 
        transform: translateX(8px) rotate(3deg); 
    }
    50% { 
        transform: translateX(-6px) rotate(-2deg); 
        background: linear-gradient(135deg, #ffa726, #ff7043);
    }
    60% { 
        transform: translateX(6px) rotate(2deg); 
    }
    70% { 
        transform: translateX(-4px) rotate(-1deg); 
    }
    80% { 
        transform: translateX(4px) rotate(1deg); 
    }
    90% { 
        transform: translateX(-2px) rotate(-0.5deg); 
    }
}

/* Animation de rebond */
@keyframes chatBounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    40%, 43% {
        transform: translate3d(0, -15px, 0) scale(1.1);
    }
    70% {
        transform: translate3d(0, -7px, 0) scale(1.05);
    }
    90% {
        transform: translate3d(0, -2px, 0) scale(1.02);
    }
}

/* Animation de rotation de l'icône */
@keyframes chatIconSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.1);
    }
    50% {
        transform: rotate(180deg) scale(0.9);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Animation de glow */
@keyframes chatGlow {
    0% {
        box-shadow: 0 4px 20px rgba(118, 75, 162, 0.4);
    }
    50% {
        box-shadow: 0 8px 40px rgba(118, 75, 162, 0.8), 
                    inset 0 0 20px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 0 4px 20px rgba(118, 75, 162, 0.4);
    }
}

/* États spéciaux du bouton */
#floating-chat-btn.unavailable {
    animation: chatShake 0.8s ease-in-out;
}

#floating-chat-btn.bounce {
    animation: chatBounce 1s ease-in-out;
}

#floating-chat-btn.glow {
    animation: chatGlow 2s ease-in-out infinite;
}

/* Responsive animations */
@media (max-width: 768px) {
    @keyframes chatFloatIn {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.7);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    @keyframes chatShake {
        0%, 100% { transform: translateX(0); }
        10% { transform: translateX(-5px); }
        20% { transform: translateX(5px); }
        30% { transform: translateX(-5px); }
        40% { transform: translateX(5px); }
        50% { transform: translateX(-3px); }
        60% { transform: translateX(3px); }
        70% { transform: translateX(-2px); }
        80% { transform: translateX(2px); }
        90% { transform: translateX(-1px); }
    }
}

/* Animation pour le texte du bouton */
#floating-chat-btn .chat-btn-text {
    transition: all 0.3s ease;
}

#floating-chat-btn:hover .chat-btn-text {
    transform: translateX(2px);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Animation pour l'indicateur de statut */
#floating-chat-btn .chat-status-indicator {
    animation: chatPulse 2s ease-in-out infinite;
}

/* Effet de particules au survol (optionnel) */
#floating-chat-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

#floating-chat-btn:hover::before {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

/* Animation de succès */
@keyframes chatSuccess {
    0% {
        background: linear-gradient(135deg, #667eea, #764ba2);
        transform: scale(1);
    }
    50% {
        background: linear-gradient(135deg, #2ed573, #1e8e3e);
        transform: scale(1.1);
    }
    100% {
        background: linear-gradient(135deg, #667eea, #764ba2);
        transform: scale(1);
    }
}

#floating-chat-btn.success {
    animation: chatSuccess 0.6s ease-in-out;
}