Frontend revamp: Animal Crossing × Claude design with shadcn components

- New palette: deep nook green sidebar, sage user bubbles, warm cream answer cards
- shadcn-style UI primitives: Button (CVA variants), Textarea, Input, Badge, Table
- cn() utility (clsx + tailwind-merge)
- lucide-react icons throughout (no more text-only buttons)
- Simba mode: custom CSS toggle switch
- Send button: circular amber button with arrow icon
- AnswerBubble: amber gradient accent bar, loading dots animation
- QuestionBubble: sage green pill with rounded-3xl
- ToolBubble: centered leaf-green badge pill
- ConversationList: active item highlighting, proper selectedId prop
- Sidebar: collapsible with PanelLeftClose/Open icons, icon-only collapsed state
- LoginScreen: decorative background blobs, refined rounded card
- AdminPanel: proper icon buttons, leaf-green save confirmation
- Fonts: Playfair Display (brand) + Nunito 800 weight added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

raggr-frontend/src/components/AnswerBubble.tsx

@@ -1,4 +1,5 @@
 import ReactMarkdown from "react-markdown";
+import { cn } from "../lib/utils";
 
 type AnswerBubbleProps = {
   text: string;
@@ -7,25 +8,32 @@ type AnswerBubbleProps = {
 
 export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
   return (
-    <div className="rounded-md bg-orange-100 p-3 sm:p-4 w-2/3">
-      {loading ? (
-        <div className="flex flex-col w-full animate-pulse gap-2">
-          <div className="flex flex-row gap-2 w-full">
-            <div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-            <div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-          </div>
-          <div className="flex flex-row gap-2 w-full">
-            <div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
-            <div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
-          </div>
+    <div className="flex justify-start message-enter">
+      <div
+        className={cn(
+          "max-w-[78%] rounded-3xl rounded-bl-md",
+          "bg-warm-white border border-sand-light/70",
+          "shadow-sm shadow-sand/30",
+          "overflow-hidden",
+        )}
+      >
+        {/* amber accent bar */}
+        <div className="h-0.5 w-full bg-gradient-to-r from-amber-soft via-amber-glow/50 to-transparent" />
+
+        <div className="px-4 py-3">
+          {loading ? (
+            <div className="flex items-center gap-1.5 py-1 px-1">
+              <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+              <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+              <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
+            </div>
+          ) : (
+            <div className="markdown-content text-sm leading-relaxed text-charcoal">
+              <ReactMarkdown>{text}</ReactMarkdown>
+            </div>
+          )}
         </div>
-      ) : (
-        <div className=" flex flex-col break-words overflow-wrap-anywhere text-sm sm:text-base [&>*]:break-words">
-          <ReactMarkdown>
-            {"🐈: " + text}
-          </ReactMarkdown>
-        </div>
-      )}
+      </div>
     </div>
   );
 };