fix: ensure animated elements are visible when prefers-reduced-motion is enabled

[zanesq]

Problem

User chat messages were not displaying for users with "Reduce motion" enabled in their OS accessibility settings.

Root Cause

User messages use opacity-0 with an appear animation to fade in:

className="opacity-0 animate-[appear_150ms_ease-in_forwards]"

When prefers-reduced-motion: reduce is enabled, the CSS disables animations:

animation: none !important;

But the opacity remained at 0, making messages invisible.

Fix

Added a CSS rule to ensure elements with both opacity-0 and animate-* classes are set to opacity: 1 when reduced motion is preferred:

@media (prefers-reduced-motion: reduce) {
  .opacity-0[class*='animate-'] {
    opacity: 1 !important;
  }
}

Testing

1. Enable "Reduce motion" in your OS:
   • macOS: System Settings → Accessibility → Display → Reduce motion
   • Windows: Settings → Ease of Access → Display → Show animations (off)
2. Send a message in Goose Desktop
3. Verify the message appears immediately (without animation)