/* ==================================
   TYPING ANIMATION - Professional Onboarding
   Análise completa e estruturada
   ================================== */

/* Todas as mensagens começam invisíveis */
.ai-chat-section .chat-messages .message-wrapper {
    opacity: 0;
    transform: translateY(15px);
}

/* Date divider sempre visível */
.ai-chat-section .date-divider {
    opacity: 1 !important;
    transform: none !important;
}

/* Mostrar texto completo sem animação de typing */
.ai-chat-section .message p {
    width: auto !important;
    overflow: visible !important;
    white-space: pre-line !important;
    display: block !important;
    opacity: 1 !important;
}

/* ===== SEQUÊNCIA DE ANIMAÇÃO PROFISSIONAL ===== */

/* Msg 1: "Olá! Sou a NIA 👋" (0s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(2) {
    animation: slideIn 0.3s ease-out 0s forwards;
}

/* Msg 2: "Assistente de IA..." (0.8s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(3) {
    animation: slideIn 0.3s ease-out 0.8s forwards;
}

/* Msg 3: "Vou fazer diagnóstico..." (1.6s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(4) {
    animation: slideIn 0.3s ease-out 1.6s forwards;
}

/* Msg 4: "Qual o principal desafio..." (2.4s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(5) {
    animation: slideIn 0.3s ease-out 2.4s forwards;
}

/* Msg 5: USER "Falta previsibilidade..." (3.2s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(6) {
    animation: slideIn 0.3s ease-out 3.2s forwards;
}

/* Msg 6: "Entendo. Esse é o problema..." (4s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(7) {
    animation: slideIn 0.3s ease-out 4s forwards;
}

/* Msg 7: "Preciso de alguns dados..." (4.8s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(8) {
    animation: slideIn 0.3s ease-out 4.8s forwards;
}

/* Msg 8: Lista de dados (5.6s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(9) {
    animation: slideIn 0.3s ease-out 5.6s forwards;
}

/* Msg 9: USER com dados (6.4s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(10) {
    animation: slideIn 0.3s ease-out 6.4s forwards;
}

/* Typing Indicator (7.2s - 9s) */
.ai-chat-section .typing-indicator {
    opacity: 0;
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: 18px;
    width: fit-content;
    margin: 8px 12px;
    animation: slideIn 0.3s ease-out 7.2s forwards,
               slideOut 0.3s ease-out 9s forwards;
}

/* Msg 10: "Análise concluída" (9.5s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(12) {
    animation: slideIn 0.3s ease-out 9.5s forwards;
}

/* Msg 11: "DIAGNÓSTICO:" (10.2s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(13) {
    animation: slideIn 0.3s ease-out 10.2s forwards;
}

/* Msg 12: Potencial identificado (10.9s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(14) {
    animation: slideIn 0.3s ease-out 10.9s forwards;
}

/* Msg 13: "ESTRATÉGIA:" (11.6s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(15) {
    animation: slideIn 0.3s ease-out 11.6s forwards;
}

/* Msg 14: Lista estratégia (12.3s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(16) {
    animation: slideIn 0.3s ease-out 12.3s forwards;
}

/* Msg 15: "RESULTADO ESPERADO" (13s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(17) {
    animation: slideIn 0.3s ease-out 13s forwards;
}

/* Msg 16: "Pronto para implementar?" (13.7s) */
.ai-chat-section .chat-messages .message-wrapper:nth-child(18) {
    animation: slideIn 0.3s ease-out 13.7s forwards;
}

/* ===== KEYFRAMES ===== */

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

@keyframes slideOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

/* ===== TYPING DOTS BOUNCE ===== */

.typing-dot {
    width: 8px;
    height: 8px;
    background: #8696A0;
    border-radius: 50%;
    animation: dotBounce 1.4s infinite;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* ===== STATUS ONLINE BLINK ===== */

.ai-chat-section .contact-status {
    animation: statusBlink 3s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ===== CTA BUTTON PULSE ===== */

.ai-chat-section .ai-cta-button {
    animation: buttonPulse 2.5s ease-in-out infinite;
    animation-delay: 24s;
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(130, 48, 239, 0.4);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 12px 40px rgba(130, 48, 239, 0.6);
    }
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 768px) {
    .ai-chat-section .chat-messages .message-wrapper {
        transform: translateY(12px);
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .typing-dot {
        width: 6px;
        height: 6px;
    }
    
    .ai-chat-section .typing-indicator {
        padding: 10px 14px;
        margin: 6px 10px;
    }
}

/* ===== PERFORMANCE ===== */

.message-wrapper,
.typing-indicator {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Respeitar preferências de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    .ai-chat-section .chat-messages .message-wrapper,
    .ai-chat-section .typing-indicator,
    .ai-chat-section .ai-cta-button {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}