feat: implement R42 chat infrastructure with Anthropic API integration and custom design system

src/index.css

@@ -1,6 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');
 @import "tailwindcss";
 
+@font-face {
+  font-family: 'BallPill';
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+  src: url('/fonts/BallPill-light.otf') format('opentype');
+}
+
 @theme {
   --font-sans: "Space Grotesk", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
@@ -117,3 +125,19 @@ code, .mono { font-family: var(--font-mono); }
 .label { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--label-ls); text-transform: uppercase; }
 
 ::selection { background: var(--purple); color: var(--paper); }
+
+/* ─── R42 chatbot mark animations ────────────────────────────── */
+@keyframes dotBounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40%           { transform: translateY(-4px); opacity: 1; }
+}
+.r42-mark .dot { animation: dotBounce 1.2s ease-in-out infinite; transform-origin: center; }
+.r42-mark .dot:nth-child(2) { animation-delay: 0.15s; }
+.r42-mark .dot:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes r42Shake {
+  0%, 100%  { transform: translateX(0); }
+  20%, 60%  { transform: translateX(-2px); }
+  40%, 80%  { transform: translateX(2px); }
+}
+.r42-mark.shake { animation: r42Shake 0.5s ease-in-out; }