/* ================================
   Nettleio SmartChat Animations
   - Typing dots (bounce)
   - Smooth popup entrance
   - Fade, Pulse, Shake
=================================== */

/* ————————————————
   POPUP FADE-IN
——————————————— */
@keyframes scFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ————————————————
   BUTTON PULSE (Hover)
——————————————— */
@keyframes scPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255,255,255,0);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 18px rgba(255,255,255,0.15);
    }
}

#nettleio-sc-button:hover {
    animation: scPulse .6s ease-out;
}

/* ————————————————
   TYPING DOTS
   سه نقطه بالا پایین
——————————————— */
.typing {
    padding: 10px 20px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.typing .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    animation: typingBounce 1.2s infinite ease-in-out;
}

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

@keyframes typingBounce {
    0% {
        transform: translateY(0);
        opacity: .7;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
    60% {
        transform: translateY(0);
        opacity: .7;
    }
    100% {
        transform: translateY(0);
        opacity: .7;
    }
}

/* ————————————————
   FADE-IN (used for new messages)
——————————————— */
@keyframes scMessageFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-bubble {
    animation: scMessageFade .25s ease-out;
}

/* ————————————————
   SHAKE (برای ارور)
——————————————— */
@keyframes scShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.shake {
    animation: scShake .35s ease-in-out;
}

/* ————————————————
   BOUNCE (برای دکمه‌ها)
——————————————— */
@keyframes scBounce {
    0% { transform: scale(1); }
    40% { transform: scale(0.92); }
    80% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.bounce {
    animation: scBounce .3s;
}

/* ————————————————
   LOADING (برای AI پاسخ)
——————————————— */
@keyframes scLoadingFade {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}

.ai-loading {
    opacity: .8;
    animation: scLoadingFade 1s infinite ease-in-out;
}