fix(a11y): add prefers-reduced-motion guard to panel animations (#8)

[Kunall7890]

Summary

Fixes #8

Users who have "Reduce Motion" enabled in their OS/browser
accessibility settings were still seeing pulsing animations
in the extension panel, which can cause discomfort or harm
for users with vestibular disorders.

Changes

Single file changed: src/panel/styles/panel.css

Added @media (prefers-reduced-motion: reduce) block that
disables the following animations:

Class	Animation	Description
.scan-indicator	pulse	Main connection indicator dot
.spinner	spin	Full page loading spinner
.mini-spinner	mini-spin	Redux state saving spinner
.saving-indicator	pulse-opacity	"Saving..." text indicator
.btn-spinner	mini-spin	Button loading spinner
.loading-text	pulse-opacity	Loading text fade

What stays the same

• All animations still work normally when reduce-motion is NOT set
• Static indicator still clearly shows connection state via color
• No visual regression on default settings

How to test

1. Build: npm run build
2. Load dist/ in Chrome → chrome://extensions → Load unpacked
3. Open any React app → F12 → React Debugger tab
4. Press Ctrl+Shift+P → type reduced motion
5. Select "Emulate CSS prefers-reduced-motion: reduce"
6. ✅ All animated elements should be static
7. Disable emulation → ✅ animations return normally

Acceptance Criteria

• Indicator does not animate when reduce-motion is enabled
• Animation still works when reduce-motion is not set
• Static indicator clearly shows connection state via color
• No regression on default settings

Closes #8

[gemini-code-assist]

Code Review

This pull request adds a media query for prefers-reduced-motion: reduce in panel.css to disable animations for several UI elements like spinners and indicators. The review feedback points out a redundant border-top-color definition on the .spinner class within this media query that can be safely removed.

[gemini-code-assist]

The border-top-color: var(--accent-blue); property is already defined on the base .spinner class (line 826). Redefining it here is redundant and can be safely removed to keep the CSS clean and maintainable.

  .spinner {
    animation: none;
  }

[hoainho]

🎉 Textbook PR @Kunall7890. Single file, single concern, comprehensive coverage — you even caught .loading-text which I didn't mention. The DevTools Ctrl+Shift+P → "Emulate CSS prefers-reduced-motion: reduce" test instructions are sharp; that's the right manual-test path.

A11y fix verified:

• ✅ All 6 animated classes (scan-indicator, spinner, mini-spinner, saving-indicator, btn-spinner, loading-text) get animation: none under reduce-motion
• ✅ .spinner keeps a border-top-color: var(--accent-blue) so the static indicator still reads as "loading" via color (good touch)
• ✅ No regression on default — only the @media (prefers-reduced-motion: reduce) block is added; original animations untouched
• ✅ Closes #8 reference
• ✅ Scope discipline this time

Approving. Thanks for the clean split from PR #15 — this is the contribution pattern we want to see.