Refine the store assistant UI and gate it behind a flag

- Gate the assistant on NEXT_PUBLIC_ENABLE_AI=1 (UI only; the /api/chat
  route still responds if called directly)
- Chat model is openai/gpt-5.6-luna-pro with reasoning requested and
  sendReasoning enabled, rendered via the Reasoning component
- Suggestion chips and reasoning come from ai-elements; attachments gain
  hover-card previews, left alignment, and render under the user message
- Launcher: plain Button when closed, magicui RainbowButton when open
- Tool results replace the collapsible Tool UI with a shimmer while
  running and a muted icon + summary line after, plus product previews
- Commerce icons in place of the folder icon for collections
- Add a thin announcement bar above the header; footer splits links and
  socials onto separate rows and clears the launcher corner
- Add the shadcn base layer so Tailwind v4's bare `border` picks up the
  theme colour instead of currentColor

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX

components/shopify/footer.tsx

@@ -42,11 +42,11 @@ const Footer: React.FC<FooterProps> = ({
   return (
     <footer className="bg-background">
       <div className="max-w-screen-2xl mx-auto px-8 py-10">
-        <div className="flex flex-col sm:flex-row items-center justify-between gap-5">
-          <div className="flex flex-wrap items-center justify-center sm:justify-start gap-x-5 gap-y-2">
-            <p className="text-sm text-muted-foreground leading-5">
-              {copyright || `© ${storeName}. All rights reserved.`}
-            </p>
+        {/* Left-aligned: the bottom-right corner belongs to the floating
+            assistant launcher. Links and socials sit on separate rows so the
+            icons aren't crammed onto the end of the link list. */}
+        <div className="flex flex-col items-center gap-y-5 sm:items-start">
+          <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 sm:justify-start">
             {links.map((link) => (
               <a
                 key={link.label}
@@ -56,19 +56,25 @@ const Footer: React.FC<FooterProps> = ({
                 {link.label}
               </a>
             ))}
-          </div>
+          </nav>
 
-          <div className="flex items-center gap-x-4">
-            {socials.map(({ label, url, Icon }) => (
-              <a
-                key={label}
-                href={url}
-                aria-label={label}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <Icon size={18} />
-              </a>
-            ))}
+          <div className="flex flex-col-reverse items-center gap-3 sm:flex-row sm:gap-x-5">
+            <span className="flex items-center gap-x-4">
+              {socials.map(({ label, url, Icon }) => (
+                <a
+                  key={label}
+                  href={url}
+                  aria-label={label}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Icon size={18} />
+                </a>
+              ))}
+            </span>
+
+            <p className="text-sm text-muted-foreground leading-5">
+              {copyright || `© ${storeName}. All rights reserved.`}
+            </p>
           </div>
         </div>
       </div>