Typing Dots

// Keyframes cannot be expressed as Tailwind utilities, so they live in a style element.
const css = `
@keyframes typing-dots-bounce {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
`;

// Staggered starts turn three identical dots into one travelling wave.
const DELAYS = [0, 0.15, 0.3];

export function TypingDots() {
  return (
    <span role="status" aria-label="Typing" className="inline-flex items-center gap-1.5">
      <style>{css}</style>
      {DELAYS.map(delay => (
        <span
          key={delay}
          style={{ animation: `typing-dots-bounce 1s ease-in-out ${delay}s infinite` }}
          className="h-2 w-2 rounded-full bg-[#8a887f]"
        />
      ))}
    </span>
  );
}