AI Confidence Rating

Create an AI answer card with a confidence meter and feedback buttons. The card shows a short answer sentence, then a labeled meter: a 6px track (rounded, hairline color) whose fill is a left-to-right accent gradient. On mount, the fill animates from 0% to the confidence value (e.g. 87%) over 1.6s with easing cubic-bezier(0.22, 1, 0.36, 1), starting after a 0.4s delay, while a monospace percentage label counts up in sync. The percentage turns the accent color once it passes 70. Below, thumbs up / thumbs down buttons. Clicking one selects it: its border and icon take the accent color with a soft accent-tinted background, and the icon celebrates with a quick scale burst (1 → 1.25 → 1) plus a small rotation away from center (about 12deg), over 350ms with a springy ease like cubic-bezier(0.34, 1.56, 0.64, 1). Pressing scales down to 85%. Clicking the selected thumb again deselects it. Accessibility: the meter uses role="meter" with aria-valuenow/min/max and an aria-label; the thumbs use aria-pressed and clear aria-labels. If prefers-reduced-motion is set, show the final value immediately and skip the burst. 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.