feat: improve chat UI, refine teacher prompt, and add drafting animation

src/components/features/chat/thinking-overlay.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { PenTool, Sparkles } from "lucide-react";
+
+export function ThinkingOverlay() {
+    return (
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-background/60 backdrop-blur-md transition-all duration-500 animate-in fade-in">
+            <div className="relative">
+                {/* Pulsing Background Circle */}
+                <div className="absolute inset-0 bg-indigo-500/20 rounded-full animate-ping [animation-duration:3s]" />
+
+                {/* Icon Container */}
+                <div className="relative bg-card border border-border p-6 rounded-full shadow-lg flex items-center justify-center">
+                    <PenTool className="w-10 h-10 text-indigo-500 animate-bounce [animation-duration:2s]" />
+                </div>
+
+                {/* Sparkles Decoration */}
+                <Sparkles className="absolute -top-2 -right-2 w-6 h-6 text-amber-400 animate-pulse" />
+                <Sparkles className="absolute -bottom-1 -left-2 w-4 h-4 text-blue-400 animate-pulse [animation-delay:0.5s]" />
+            </div>
+
+            <div className="mt-8 space-y-2 text-center">
+                <h3 className="text-xl font-serif font-medium text-foreground">
+                    Crafting your draft
+                </h3>
+                <p className="text-sm text-muted-foreground animate-pulse">
+                    Synthesizing insights...
+                </p>
+            </div>
+        </div>
+    );
+}