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/ui/table.tsx

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/utils";
+
+export const Table = ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
+  <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+);
+
+export const TableHeader = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <thead className={cn("[&_tr]:border-b [&_tr]:border-sand-light", className)} {...props} />
+);
+
+export const TableBody = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+);
+
+export const TableRow = ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr
+    className={cn(
+      "border-b border-sand-light/50 transition-colors hover:bg-cream-dark/40",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableHead = ({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+  <th
+    className={cn(
+      "h-10 px-4 text-left align-middle text-xs font-semibold text-warm-gray uppercase tracking-wider",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableCell = ({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+  <td className={cn("px-4 py-3 align-middle", className)} {...props} />
+);