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/QuestionBubble.tsx

@@ -1,11 +1,22 @@
+import { cn } from "../lib/utils";
+
 type QuestionBubbleProps = {
   text: string;
 };
 
 export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
   return (
-    <div className="w-2/3 rounded-md bg-stone-200 p-3 sm:p-4 break-words overflow-wrap-anywhere text-sm sm:text-base ml-auto">
-      🤦: {text}
+    <div className="flex justify-end message-enter">
+      <div
+        className={cn(
+          "max-w-[72%] rounded-3xl rounded-br-md",
+          "bg-leaf-pale border border-leaf-light/60",
+          "px-4 py-3 text-sm leading-relaxed text-charcoal",
+          "shadow-sm shadow-leaf/10",
+        )}
+      >
+        {text}
+      </div>
     </div>
   );
 };