Isolate hue-rotate animation to background layer only

- Create separate background layer using ::before pseudo-element
- Move hue-rotate animation to background layer with z-index: -1
- Remove filter from main container to prevent inheritance
- Use equivalent gradient colors in CSS (pink-100, purple-50, indigo-100)
- Foreground elements (brain emoji, text) now maintain original colors
- Background still animates smoothly without affecting content

examples/chat-ui/src/components/ChatApp.tsx

@@ -104,7 +104,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
 
   return (
     <div 
-      className="flex h-dvh w-screen overflow-clip bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100 animated-hue-bg"
+      className="flex h-dvh w-screen overflow-clip animated-bg-container"
       style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">

examples/chat-ui/src/index.css

@@ -11,7 +11,19 @@
   }
 }
 
-.animated-hue-bg {
+.animated-bg-container {
+  position: relative;
+}
+
+.animated-bg-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff);
   animation: hue-rotate 60s linear infinite;
   animation-delay: var(--random-delay, 0s);
+  z-index: -1;
 }