/* ==========================================
   Aottar AI Animations
========================================== */

/* Chat Window Animation */

#chat-window{
    animation: chatOpen .30s ease;
}

@keyframes chatOpen{

    0%{
        opacity:0;
        transform:translateY(40px) scale(.9);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

/* Floating Button */

#chat-toggle{

    animation: pulse 2.5s infinite;

}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(10,102,194,.4);
    }

    70%{
        box-shadow:0 0 0 18px rgba(10,102,194,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(10,102,194,0);
    }

}

/* Message Animation */

.message{

    animation: messageFade .35s ease;

}

@keyframes messageFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Product Card */

.product-card{

    animation: cardFade .4s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Typing Animation */

.typing{

    display:flex;

    gap:6px;

    align-items:center;

    padding:14px;

}

.typing span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#0A66C2;

    animation: typing 1s infinite;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typing{

    0%,80%,100%{

        transform:translateY(0);

        opacity:.5;

    }

    40%{

        transform:translateY(-8px);

        opacity:1;

    }

}

/* Buttons */

.quick-btn,
#send-btn,
#chat-toggle,
.view-btn{

    transition:all .3s ease;

}

.quick-btn:hover,
.view-btn:hover,
#send-btn:hover{

    transform:translateY(-3px);

}

#chat-toggle:hover{

    transform:scale(1.08);

}

/* Input Focus */

#user-message{

    transition:.3s;

}

#user-message:focus{

    box-shadow:0 0 12px rgba(10,102,194,.2);

}