/* Size-independent Flapper avatar motion. Uses % / scale so Size can change. */
.flapper-container.idle {
    animation: flapper-idle 3.2s ease-in-out infinite;
}

.flapper-container.listening {
    animation: flapper-listen 1.8s ease-in-out infinite;
}

.flapper-container.thinking {
    animation: flapper-think 1.6s ease-in-out infinite;
}

.flapper-container.speaking,
.flapper-container.talking {
    animation: flapper-talk 0.42s ease-in-out infinite;
}

.mouth-overlay.speaking .mouth-open {
    animation: flapper-mouth 0.26s ease-in-out infinite;
}

@keyframes flapper-idle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2.5%) scale(1.015); }
}

@keyframes flapper-listen {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1.5%) scale(1.04); }
}

@keyframes flapper-think {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50% { transform: rotate(3deg) translateY(-2%); }
}

@keyframes flapper-talk {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-4%) scale(1.03, 0.97); }
}

@keyframes flapper-mouth {
    0%, 100% { transform: scaleY(0.30); }
    40% { transform: scaleY(1.0); }
    70% { transform: scaleY(0.60); }
}

@media (prefers-reduced-motion: reduce) {
    .flapper-container.idle,
    .flapper-container.listening,
    .flapper-container.thinking,
    .flapper-container.speaking,
    .flapper-container.talking,
    .mouth-overlay.speaking .mouth-open {
        animation: none;
    }
}