From 03e2f444ae1320f09dd6a8e1aaaad22a6a374b6e Mon Sep 17 00:00:00 2001 From: claude_code Date: Sun, 21 Jun 2026 23:06:56 +0300 Subject: [PATCH] ix(ai-chat): keep typing dots bouncing under reduced-motion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "Thinking…" indicator's bounce was fully disabled by the prefers-reduced-motion rule (animation: none), leaving the dots frozen for users with "Reduce motion" enabled. Drive the bounce height with a --bounce custom property: -6px by default and a smaller -3px under reduced-motion, so the indicator stays visibly active everywhere instead of freezing. --- .../src/features/ai-chat/components/ai-chat.module.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/client/src/features/ai-chat/components/ai-chat.module.css b/apps/client/src/features/ai-chat/components/ai-chat.module.css index 9e266984..8d75407f 100644 --- a/apps/client/src/features/ai-chat/components/ai-chat.module.css +++ b/apps/client/src/features/ai-chat/components/ai-chat.module.css @@ -88,16 +88,18 @@ opacity: 0.4; } 40% { - transform: translateY(-3px); + /* Bounce height is driven by --bounce so reduced-motion can dampen it + (below) without disabling the animation outright. */ + transform: translateY(var(--bounce, -6px)); opacity: 1; } } -/* Respect reduced-motion preferences: fall back to a static dimmed state. */ +/* Respect reduced-motion preferences: keep a smaller bounce instead of a full + stop, so the "thinking" indicator still reads as active rather than frozen. */ @media (prefers-reduced-motion: reduce) { .typingDots span { - animation: none; - opacity: 0.6; + --bounce: -3px; } }