AI Typing Indicator

Create an AI chat typing indicator. While the assistant is preparing a reply, show a chat bubble containing three small dots (6px circles) that bounce in sequence: each dot moves up 4px and back down over 1.1s on an infinite loop, with a 0.18s stagger between dots, easing ease-in-out. The dots also fade between 35% and 100% opacity as they bounce. When the reply arrives, the dots bubble fades out quickly (120ms) and the message bubble pops in with a small spring (start at 96% scale and 6px lower, spring stiffness 420, damping 30). Style the bubbles like a chat: the indicator bubble has rounded corners (14px, with a 4px corner on the side facing the avatar), a light surface background, and a 1px hairline border. Accessibility: give the indicator aria-label "Assistant is typing" so screen readers announce it, and put the incoming message in an aria-live="polite" region. If prefers-reduced-motion is set, skip the bounce entirely and render the reply without the pop. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.