fix(low): scope voice-input reduced-motion to a class (L6)

Background: the recording indicator's pulse was applied via an inline
`animation` style, and the prefers-reduced-motion override matched it with
span[style*="animation"] — a brittle attribute-substring selector. Any refactor
moving the animation to a class or a different property would silently
re-enable the pulsing dot for reduced-motion users (WCAG 2.3.3 / 2.2.2).

Fix: drive the pulse with a `voice-input-pulsing` class (styled-jsx scoped) and
point the reduced-motion rule at that class, so the opt-out tracks the actual
animation hook rather than a string match on the style attribute.

Test: tsc + eslint clean. Pure markup/CSS change with no behavioral branch to
unit-test; covered by the typecheck/lint gates per the frontend discipline.

Fixes: L6
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: LEANDERANTONY

frontend/src/components/workspace/VoiceInputButton.tsx

@@ -354,31 +354,32 @@ export function VoiceInputButton({
         }}
       >
         {isRecording ? (
-          // Pulsing red dot while recording. CSS keyframes in the
-          // existing globals.css don't include a `pulse` animation yet
-          // — inline keyframes via a style tag would over-complicate
-          // the surface. We rely on a subtle scale via inline style
-          // animation so a user can't tell whether the recording is
-          // active just from a static screenshot.
+          // Pulsing red dot while recording — a subtle scale so the active
+          // state reads even on a static screenshot. The animation is driven
+          // by the `voice-input-pulsing` CLASS (review L6), not an inline
+          // `animation` style, so the prefers-reduced-motion override can
+          // target the class instead of a brittle [style*="animation"]
+          // attribute-substring match that any refactor would silently break.
           <span
+            className="voice-input-pulsing"
             style={{
               display: "inline-block",
               width: 10,
               height: 10,
               borderRadius: "50%",
               background: "#ef4444",
-              animation: "voice-pulse 1.2s ease-in-out infinite",
             }}
           />
         ) : (
           <MicIcon />
         )}
         <span>{buttonLabel}</span>
       </span>
-      {/* Keyframes defined inline so the button is self-contained;
-          adding a new global rule for one component would bloat the
-          stylesheet. The animation reduces gracefully for users with
-          `prefers-reduced-motion` via the media query below. */}
+      {/* Keyframes + the pulsing class defined inline so the button is
+          self-contained; adding a new global rule for one component would
+          bloat the stylesheet. The reduced-motion override targets the
+          `.voice-input-pulsing` class (review L6) so it can't be defeated by
+          a refactor that moves the animation off an inline style. */}
       <style jsx>{`
         @keyframes voice-pulse {
           0%, 100% {
@@ -390,8 +391,11 @@ export function VoiceInputButton({
             opacity: 0.6;
           }
         }
+        .voice-input-pulsing {
+          animation: voice-pulse 1.2s ease-in-out infinite;
+        }
         @media (prefers-reduced-motion: reduce) {
-          span[style*="animation"] {
+          .voice-input-pulsing {
             animation: none !important;
           }
         }