/* Apparition des éléments */
@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rotation du loader */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulsation du cœur IA */
@keyframes pulseGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 8px #00D4FF;
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 24px #00D4FF,
                    0 0 48px #00D4FF55;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 8px #00D4FF;
    }
}

.pulse{
    animation:pulseGlow 2s infinite ease-in-out;
}

/* Boutons */

button{
    cursor:pointer;
    transition:.25s;
}

button:hover{
    transform:translateY(-2px);
}

button:active{
    transform:scale(.95);
}

/* Champ texte */

#prompt{
    transition:.25s;
}

#prompt:focus{
    box-shadow:0 0 0 2px rgba(0,212,255,.4);
}

/* Messages */

.ai,
.user{
    animation:fade .25s ease;
}

/* Scroll */

#chat::-webkit-scrollbar{
    width:6px;
}

#chat::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:999px;
}

/* Typing Indicator */

.typing{
    display:flex;
    gap:6px;
    align-items:center;
}

.typing span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00D4FF;
    animation:typing 1.2s infinite;
}

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

.typing span:nth-child(3){
    animation-delay:.4s;
}

@keyframes typing{

    0%{
        opacity:.3;
        transform:translateY(0);
    }

    50%{
        opacity:1;
        transform:translateY(-5px);
    }

    100%{
        opacity:.3;
        transform:translateY(0);
    }

}

/* Ouverture */

body{
    animation:fade .4s ease;
}

/* Effet glass */

header,
footer{

    transition:.3s;

}

header:hover,
footer:hover{

    backdrop-filter:blur(28px);

}

/* Animation du bouton micro */

#voiceButton.listening{

    animation:micPulse 1s infinite;

}

@keyframes micPulse{

    0%{

        box-shadow:0 0 0 0 rgba(0,212,255,.8);

    }

    100%{

        box-shadow:0 0 0 24px rgba(0,212,255,0);

    }

}

@keyframes coreAnimation{

0%{

transform:scale(.9) rotate(0deg);

}

50%{

transform:scale(1.08) rotate(180deg);

}

100%{

transform:scale(.9) rotate(360deg);

}

}

@keyframes loadingDots{

0%{

opacity:.3;

transform:translateY(0);

}

50%{

opacity:1;

transform:translateY(-10px);

}

100%{

opacity:.3;

transform:translateY(0);

}

}