Use CSS custom property for cleaner random animation delay

- Move animation-delay to CSS using custom property --random-delay
- JavaScript still required to generate random value (CSS has no random functions)
- Cleaner separation between styling (CSS) and logic (JavaScript)
- Maintains same functionality with better organization

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

@@ -105,7 +105,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"
-      style={{ animationDelay: `${animationDelay}s` }}
+      style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}

examples/chat-ui/src/index.css

@@ -13,4 +13,5 @@
 
 .animated-hue-bg {
   animation: hue-rotate 60s linear infinite;
+  animation-delay: var(--random-delay, 0s);
 }