diff --git a/app/NeonestAi/page.js b/app/NeonestAi/page.js
index 7d154e9..1fa0b07 100644
--- a/app/NeonestAi/page.js
+++ b/app/NeonestAi/page.js
@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect, useMemo } from "react";
 import axios from "axios";
-import { Bot, Send, Loader2, Baby, Utensils, Clock, Heart, MessageSquare, ThumbsUp, Users, BarChart3, Copy, Mic } from "lucide-react";
+import { Bot, Send, Loader2, Baby, Utensils, Clock, Heart, MessageSquare, ThumbsUp, Users, BarChart3, Copy, Mic ,Download} from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../components/ui/tooltip";
 import { Button } from "../components/ui/Button";
@@ -14,6 +14,8 @@ import TextToSpeech from "../components/TextToSpeech";
 import { fetchChatHistory, saveChatHistory } from "@/lib/chatService";
 import { useAuth } from "../context/AuthContext";
 import { useChatStore } from "@/lib/store/chatStore";
+import jsPDF from "jspdf"; 
+// import html2canvas from "html2canvas"; 
 
 const quickQuestions = [
   { icon: Baby, text: "When should my baby start crawling?", color: "pink" },
@@ -28,12 +30,120 @@ const roles = [
   { label: "Motherly", value: "mother" },
 ];
 
+const formatDate = (isoString) => {
+  return new Date(isoString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+
+// --- NEW PAST CHATS PANEL COMPONENT ---
+const PastChatsPanel = ({
+  allChatHistory,
+  activeRole,
+  onSelectChat,
+  onExportPDF,
+}) => {
+  const processedChats = useMemo(() => {
+    const allMessages = [];
+    for (const role in allChatHistory) {
+      const messages = allChatHistory[role];
+      if (messages && messages.length > 0) {
+        // Get the most recent message to represent the chat
+        const lastMessage = messages[messages.length - 1];
+        allMessages.push({
+          role: role,
+          roleLabel: roles.find((r) => r.value === role)?.label || role,
+          content: lastMessage.content.substring(0, 50) + "...",
+          date: lastMessage.createdAt,
+        });
+      }
+    }
+
+    // Sort by date, most recent first
+    allMessages.sort((a, b) => new Date(b.date) - new Date(a.date));
+
+    // Group by date
+    const grouped = allMessages.reduce((acc, chat) => {
+      const dateKey = formatDate(chat.date);
+      if (!acc[dateKey]) {
+        acc[dateKey] = [];
+      }
+      acc[dateKey].push(chat);
+      return acc;
+    }, {});
+
+    return grouped;
+  }, [allChatHistory]);
+
+  return (
+    <Card className="dark:bg-gray-700 h-full sticky top-6">
+      <CardHeader className="flex flex-row justify-between items-center">
+        <CardTitle className="dark:text-gray-200 text-lg">Past Chats</CardTitle>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onExportPDF}
+          className="dark:text-gray-200"
+        >
+          <Download className="w-4 h-4 mr-2" />
+          Export Active Chat
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-4 overflow-y-auto max-h-[600px] pr-2">
+        {Object.keys(processedChats).length === 0 && (
+          <p className="text-sm text-gray-500 dark:text-gray-200 text-center">
+            No past chats found.
+          </p>
+        )}
+        {Object.entries(processedChats).map(([date, chats]) => (
+          <div key={date}>
+            <h4 className="font-semibold text-sm text-gray-600 dark:text-gray-300 mb-2">
+              {date}
+            </h4>
+            <div className="space-y-2">
+              {chats.map((chat) => (
+                <button
+                  key={chat.role}
+                  onClick={() => onSelectChat(chat.role)}
+                  className={`w-full text-left p-3 rounded-lg border transition-colors ${
+                    activeRole === chat.role
+                      ? "bg-pink-100 dark:bg-pink-600 border-pink-500"
+                      : "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-600"
+                  }`}
+                >
+                  <p className="font-semibold text-sm text-pink-700 dark:text-pink-300">
+                    {chat.roleLabel}
+                  </p>
+                  <p className="text-xs text-gray-700 dark:text-gray-200 truncate">
+                    {chat.content}
+                  </p>
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+// --- END OF NEW COMPONENT ---
+
 export default function NeonestAi() {
   const [showConfirm, setShowConfirm] = useState(false);
   const clearChatHistory = useChatStore((state) => state.clearChatHistory);
   const [role, setRole] = useState("pediatrician");
-  const { chatHistory = {}, setChatHistory = () => {}, historyLoaded = {}, resetChatHistoryForRole = () => {} } = useChatStore((state) => state || {});
-  const messages = useMemo(() => chatHistory[role] || [], [chatHistory, role]);
+ const {
+    chatHistory: allChatHistory = {}, 
+    setChatHistory = () => {},
+    historyLoaded = {},
+    resetChatHistoryForRole = () => {},
+  } = useChatStore((state) => state || {});
+ const messages = useMemo(
+    () => allChatHistory[role] || [],
+    [allChatHistory, role]
+  );
   const [input, setInput] = useState("");
   const [isSending, setIsSending] = useState(false);
   const [isHistoryLoading, setIsHistoryLoading] = useState(false);
@@ -76,20 +186,34 @@ export default function NeonestAi() {
   };
 
   useEffect(() => {
-    if (historyLoaded[role]) return;
-    const loadHistory = async () => {
-      setIsHistoryLoading(true);
-      try {
-        const messages = await fetchChatHistory(role, token);
-        setChatHistory(role, messages);
-      } catch (error) {
-        setChatHistory(role, []);
-      } finally {
-        setIsHistoryLoading(false);
+    if (!token) return;
+
+    const loadAllHistories = async () => {
+      // Set loading spinner only for the *active* chat window if its history isn't loaded
+      if (!historyLoaded[role]) {
+        setIsHistoryLoading(true);
+      }
+
+      // Fetch history for all roles in the background
+      for (const r of roles) {
+        if (!historyLoaded[r.value]) {
+          try {
+            const messages = await fetchChatHistory(r.value, token);
+            setChatHistory(r.value, messages); // Update store for each role
+          } catch (error) {
+            setChatHistory(r.value, []); // Set empty array on error
+          }
+        }
+      }
+
+      // Stop loading spinner for the active chat window
+      if (setIsHistoryLoading) {
+         setIsHistoryLoading(false);
       }
     };
-    if (token) loadHistory();
-  }, [role, token, chatHistory, setChatHistory]);
+
+    loadAllHistories();
+  }, [token, setChatHistory, historyLoaded, role]);
 
   useEffect(() => {
     if (messages.length === 0 || isUserNearBottom()) {
@@ -204,229 +328,489 @@ export default function NeonestAi() {
     }
   };
 
+  const handleExportPDF = () => {
+    if (!messages || messages.length === 0) {
+      alert("No chat history to export.");
+      return;
+    }
+
+    alert("Generating PDF... This might take a moment.");
+
+    const pdf = new jsPDF("p", "mm", "a4");
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+    const marginX = 15;
+    const marginY = 15;
+    const maxWidth = pageWidth - marginX * 2;
+    const lineHeight = 6; // Adjusted for 10pt font
+    let currentY = marginY;
+
+    // --- Helper function to check and add new page ---
+    const checkAddPage = (neededHeight) => {
+      if (currentY + neededHeight >= pageHeight - marginY) {
+        pdf.addPage();
+        currentY = marginY;
+        // Add title to new page (optional)
+        pdf.setFont("helvetica", "bold");
+        pdf.setFontSize(16);
+        pdf.text(
+          `NeoNest Chat - ${roles.find((r) => r.value === role)?.label} (Cont.)`,
+          marginX,
+          currentY
+        );
+        currentY += lineHeight * 2;
+      }
+    };
+
+    // --- 1. Add Title ---
+    pdf.setFont("helvetica", "bold");
+    pdf.setFontSize(16);
+    pdf.text(
+      `NeoNest Chat - ${roles.find((r) => r.value === role)?.label}`,
+      marginX,
+      currentY
+    );
+    currentY += lineHeight * 3; // Add space after title
+
+    // --- 2. Iterate through messages ---
+    messages.forEach((m) => {
+      const isUser = m.role === "user";
+      const header = `${isUser ? "You" : "NeoNest AI"} (${formatTime(
+        m.createdAt
+      )}):`;
+      const content = m.content;
+
+      // Split content into lines that fit
+      pdf.setFont("helvetica", "normal");
+      pdf.setFontSize(10);
+      const textLines = pdf.splitTextToSize(content, maxWidth - (isUser ? 5 : 0)); // Indent user text slightly
+      const neededHeight = (textLines.length + 2) * lineHeight; // +2 for header and spacing
+
+      // Check if we need a new page *before* printing
+      checkAddPage(neededHeight);
+
+      // --- 3. Print Header ---
+      pdf.setFont("helvetica", "bold");
+      pdf.setFontSize(11);
+      pdf.text(header, marginX, currentY);
+      currentY += lineHeight * 1.5; // Space after header
+
+      // --- 4. Print Content ---
+      pdf.setFont("helvetica", "normal");
+      pdf.setFontSize(10);
+      
+      // Set text color for user/AI
+      isUser ? pdf.setTextColor(100, 100, 100) : pdf.setTextColor(0, 0, 0);
+
+      pdf.text(textLines, isUser ? marginX + 5 : marginX, currentY); // Indent user text
+      currentY += textLines.length * lineHeight;
+
+      // --- 5. Add spacing after message ---
+      currentY += lineHeight; // Space between messages
+      pdf.setTextColor(0, 0, 0); // Reset text color
+    });
+
+    // --- 6. Save the PDF ---
+    pdf.save(
+      `NeoNest-Chat-${role}-${new Date().toISOString().split("T")[0]}.pdf`
+    );
+  };
+  // --- END OF MODIFIED FUNCTION ---
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-800 p-6 space-y-10">
-      <Card className="max-w-4xl mx-auto dark:bg-gray-700">
-        <CardHeader className="flex justify-between items-center bg-pink-100 dark:bg-pink-500 rounded-t-lg px-6 py-4">
-          <div className="flex items-center gap-3">
-            <Bot className="w-6 h-6 text-pink-500 dark:text-pink-900" />
-            <CardTitle className="dark:text-gray-300">NeoNest AI Chatbot</CardTitle>
-          </div>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <select
-                  value={role}
-                  onChange={(e) => handleRoleChange(e.target.value)}
-                  className="border px-3 py-1 rounded-md dark:bg-gray-600 dark:text-gray-200 text-sm bg-white cursor-pointer text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
-                >
-                  {roles.map((r) => (
-                    <option key={r.value} value={r.value}>
-                      {r.label}
-                    </option>
-                  ))}
-                </select>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" sideOffset={6}>
-                Choose the role you&apos;d like to chat with
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </CardHeader>
-
-        <CardContent className="space-y-6 p-6 relative">
-          {transitionMessage && (
-            <div className="absolute top-0 left-0 right-0 flex justify-center z-20">
-              <span className="bg-pink-200 text-pink-900 dark:text-gray-200 px-6 py-2 rounded-lg shadow-lg font-semibold text-base">{transitionMessage}</span>
-            </div>
-          )}
-
-          {messages.length === 0 && (
-            <div className="text-center space-y-4">
-              <p className="text-sm text-gray-500 dark:text-gray-200 mt-2">AI advice is not a substitute for professional medical consultation.</p>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                {quickQuestions.map((q, idx) => (
-                  <Button key={idx} onClick={() => handleQuickQuestion(q.text)} variant="outline" className="text-left dark:text-gray-200 justify-start text-sm">
-                    <q.icon className={`w-4 h-4 mr-2 text-${q.color}-500`} />
-                    {q.text}
-                  </Button>
-                ))}
+    // --- MODIFIED: Main Page Wrapper ---
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-800 p-6 space-y-6">
+      
+      {/* --- MODIFIED: Top 2-Column Layout (Chat + Past Chats) --- */}
+      <div className="flex flex-col lg:flex-row gap-6 max-w-7xl mx-auto">
+        
+        {/* --- ZONE 1: Left Side (70%) Chat Area --- */}
+        <div className="lg:w-2/3 w-full">
+          <Card className="dark:bg-gray-700">
+            <CardHeader className="flex justify-between items-center bg-pink-100 dark:bg-pink-500 rounded-t-lg px-6 py-4">
+              <div className="flex items-center gap-3">
+                <Bot className="w-6 h-6 text-pink-500 dark:text-pink-900" />
+                <CardTitle className="dark:text-gray-300">
+                  NeoNest AI Chatbot
+                </CardTitle>
               </div>
-            </div>
-          )}
-
-          {isHistoryLoading ? (
-            <div className="space-y-4 max-h-[600px] min-h-[500px] overflow-y-auto pr-2 py-4">
-              {[1, 2, 3].map((_, i) => (
-                <div key={i} className={`flex ${i % 2 === 0 ? "justify-start" : "justify-end"} animate-pulse`}>
-                  <div className={`rounded-xl px-4 py-3 min-w-[60%] ${i % 2 === 0 ? "bg-gray-200" : "bg-gradient-to-r from-pink-300 to-purple-300"}`}>
-                    <div className="h-4 bg-white/50 rounded w-3/4 mb-2" />
-                    <div className="h-4 bg-white/50 rounded w-1/2" />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <select
+                      value={role}
+                      onChange={(e) => handleRoleChange(e.target.value)}
+                      className="border px-3 py-1 rounded-md dark:bg-gray-600 dark:text-gray-200 text-sm bg-white cursor-pointer text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
+                    >
+                      {roles.map((r) => (
+                        <option key={r.value} value={r.value}>
+                          {r.label}
+                        </option>
+                      ))}
+                    </select>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" sideOffset={6}>
+                    Choose the role you&apos;d like to chat with
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </CardHeader>
+
+            <CardContent className="space-y-6 p-6 relative">
+              {transitionMessage && (
+                <div className="absolute top-0 left-0 right-0 flex justify-center z-20">
+                  <span className="bg-pink-200 text-pink-900 dark:text-gray-200 px-6 py-2 rounded-lg shadow-lg font-semibold text-base">
+                    {transitionMessage}
+                  </span>
+                </div>
+              )}
+
+              {messages.length === 0 && !isHistoryLoading && (
+                <div className="text-center space-y-4">
+                  <p className="text-sm text-gray-500 dark:text-gray-200 mt-2">
+                    AI advice is not a substitute for professional medical
+                    consultation.
+                  </p>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                    {quickQuestions.map((q, idx) => (
+                      <Button
+                        key={idx}
+                        onClick={() => handleQuickQuestion(q.text)}
+                        variant="outline"
+                        className="text-left dark:text-gray-200 justify-start text-sm"
+                      >
+                        <q.icon
+                          className={`w-4 h-4 mr-2 text-${q.color}-500`}
+                        />
+                        {q.text}
+                      </Button>
+                    ))}
                   </div>
                 </div>
-              ))}
-            </div>
-          ) : (
-            <div ref={chatContainerRef} className="space-y-4 max-h-[600px] overflow-y-auto pr-2 pb-4">
-              {messages.map((m, index) => (
-                <div key={`${m.id || index}-${index}`} className={`flex mt-3 group ${m.role === "user" ? "justify-end" : "justify-start"}`}>
-                  <div className={`relative rounded-xl px-4 py-3 max-w-[80%] ${m.role === "user" ? "bg-gradient-to-r from-pink-600 to-purple-600 text-white" : "bg-gray-200 text-gray-800"}`}>
-                    {/* Action icons */}
+              )}
+
+              {isHistoryLoading ? (
+                <div className="space-y-4 max-h-[600px] min-h-[500px] overflow-y-auto pr-2 py-4">
+                  {[1, 2, 3].map((_, i) => (
                     <div
-                      className={`absolute bottom-full mb-2 flex gap-1 bg-white dark:bg-gray-800 p-1 rounded-md shadow-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10
-                       ${m.role === "user" ? "right-0" : "left-0"}`}
+                      key={i}
+                      className={`flex ${
+                        i % 2 === 0 ? "justify-start" : "justify-end"
+                      } animate-pulse`}
                     >
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-7 w-7 dark:hover:bg-gray-600" onClick={() => copyToClipboard(m.content)}>
-                              <Copy className="w-4 h-4 text-gray-600 dark:text-white" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>Copy to clipboard</TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                      {m.role === "assistant" && (
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <div>
-                                <TextToSpeech text={m.content} />
-                              </div>
-                            </TooltipTrigger>
-                            <TooltipContent>Listen to response</TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      )}
+                      <div
+                        className={`rounded-xl px-4 py-3 min-w-[60%] ${
+                          i % 2 === 0
+                            ? "bg-gray-200"
+                            : "bg-gradient-to-r from-pink-300 to-purple-300"
+                        }`}
+                      >
+                        <div className="h-4 bg-white/50 rounded w-3/4 mb-2" />
+                        <div className="h-4 bg-white/50 rounded w-1/2" />
+                      </div>
                     </div>
-                    <div className="prose prose-sm max-w-full text-sm">
-                      <ReactMarkdown
-                        components={{
-                          h1: ({ node, ...props }) => <h1 className={`text-2xl font-extrabold mb-2 mt-4 ${m.role === "pediatrician" ? "text-blue-700" : "text-pink-600"}`} {...props} />,
-                          h2: ({ node, ...props }) => <h2 className={`text-xl font-semibold mb-2 mt-4 ${m.role === "baby" ? "text-purple-700" : "text-blue-600"}`} {...props} />,
-                          h3: ({ node, ...props }) => <h3 className={`text-lg font-semibold mb-2 mt-4 ${m.role === "nani" ? "text-green-700" : "text-pink-500"}`} {...props} />,
-                          h4: ({ node, ...props }) => <h4 className={`text-base font-semibold mb-2 mt-4 ${m.role === "general" ? "text-orange-700" : "text-purple-500"}`} {...props} />,
-                          p: ({ node, ...props }) => <p className="text-sm leading-relaxed mb-2" {...props} />,
-                          ul: ({ node, ...props }) => <ul className="list-disc list-inside text-sm mb-2" {...props} />,
-                          li: ({ node, ...props }) => <li className="ml-4 mb-1" {...props} />,
-                          strong: ({ node, ...props }) => <strong className="font-semibold" {...props} />,
-                          em: ({ node, ...props }) => <em className="italic" {...props} />,
-                          code: ({ node, ...props }) => <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono" {...props} />,
-                          blockquote: ({ node, ...props }) => <blockquote className="border-l-4 border-pink-300 pl-4 italic text-sm text-gray-600 my-2" {...props} />,
-                        }}
+                  ))}
+                </div>
+              ) : (
+                <div
+                  ref={chatContainerRef} // Ref added for PDF export
+                  className="space-y-4 max-h-[600px] overflow-y-auto pr-2 pb-4"
+                >
+                  {messages.map((m, index) => (
+                    <div
+                      key={`${m.id || index}-${index}`}
+                      className={`flex mt-3 group ${
+                        m.role === "user" ? "justify-end" : "justify-start"
+                      }`}
+                    >
+                      <div
+                        className={`relative rounded-xl px-4 py-3 max-w-[80%] ${
+                          m.role === "user"
+                            ? "bg-gradient-to-r from-pink-600 to-purple-600 text-white"
+                            : "bg-gray-200 text-gray-800"
+                        }`}
                       >
-                        {m.content}
-                      </ReactMarkdown>
+                        {/* Action icons */}
+                        <div
+                          className={`absolute bottom-full mb-2 flex gap-1 bg-white dark:bg-gray-800 p-1 rounded-md shadow-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10
+                       ${m.role === "user" ? "right-0" : "left-0"}`}
+                        >
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 dark:hover:bg-gray-600"
+                                  onClick={() => copyToClipboard(m.content)}
+                                >
+                                  <Copy className="w-4 h-4 text-gray-600 dark:text-white" />
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent>Copy to clipboard</TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                          {m.role === "assistant" && (
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <div>
+                                    <TextToSpeech text={m.content} />
+                                  </div>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  Listen to response
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          )}
+                        </div>
+                        <div className="prose prose-sm max-w-full text-sm">
+                          <ReactMarkdown
+                            components={{
+                              h1: ({ node, ...props }) => (
+                                <h1
+                                  className={`text-2xl font-extrabold mb-2 mt-4 ${
+                                    m.role === "pediatrician"
+                                      ? "text-blue-700"
+                                      : "text-pink-600"
+                                  }`}
+                                  {...props}
+                                />
+                              ),
+                              h2: ({ node, ...props }) => (
+                                <h2
+                                  className={`text-xl font-semibold mb-2 mt-4 ${
+                                    m.role === "baby"
+                                      ? "text-purple-700"
+                                      : "text-blue-600"
+                                  }`}
+                                  {...props}
+                                />
+                              ),
+                              h3: ({ node, ...props }) => (
+                                <h3
+                                  className={`text-lg font-semibold mb-2 mt-4 ${
+                                    m.role === "nani"
+                                      ? "text-green-700"
+                                      : "text-pink-500"
+                                  }`}
+                                  {...props}
+                                />
+                              ),
+                              h4: ({ node, ...props }) => (
+                                <h4
+                                  className={`text-base font-semibold mb-2 mt-4 ${
+                                    m.role === "general"
+                                      ? "text-orange-700"
+                                      : "text-purple-500"
+                                  }`}
+                                  {...props}
+                                />
+                              ),
+                              p: ({ node, ...props }) => (
+                                <p
+                                  className="text-sm leading-relaxed mb-2"
+                                  {...props}
+                                />
+                              ),
+                              ul: ({ node, ...props }) => (
+                                <ul
+                                  className="list-disc list-inside text-sm mb-2"
+                                  {...props}
+                                />
+                              ),
+                              li: ({ node, ...props }) => (
+                                <li className="ml-4 mb-1" {...props} />
+                              ),
+                              strong: ({ node, ...props }) => (
+                                <strong
+                                  className="font-semibold"
+                                  {...props}
+                                />
+                              ),
+                              em: ({ node, ...props }) => (
+                                <em className="italic" {...props} />
+                              ),
+                              code: ({ node, ...props }) => (
+                                <code
+                                  className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono"
+                                  {...props}
+                                />
+                              ),
+                              blockquote: ({ node, ...props }) => (
+                                <blockquote
+                                  className="border-l-4 border-pink-300 pl-4 italic text-sm text-gray-600 my-2"
+                                  {...props}
+                                />
+                              ),
+                            }}
+                          >
+                            {m.content}
+                          </ReactMarkdown>
+                        </div>
+                        <span
+                          className={`text-xs block mt-1 ${
+                            m.role === "user"
+                              ? "text-gray-300"
+                              : "text-pink-700"
+                          }`}
+                        >
+                          {formatTime(m.createdAt)}
+                        </span>
+                      </div>
+                      {m.role === "assistant" && (
+                        <div className="flex justify-start mt-2">
+                          <TextToSpeech text={m.content} />
+                        </div>
+                      )}
                     </div>
-                    <span className={`text-xs block mt-1 ${m.role === "user" ? "text-gray-300" : "text-pink-700"}`}>{formatTime(m.createdAt)}</span>
-                  </div>
-                  {m.role === "assistant" && (
-                    <div className="flex justify-start mt-2">
-                      <TextToSpeech text={m.content} />
+                  ))}
+                  {isSending && (
+                    <div className="flex justify-start mt-3">
+                      <div className="rounded-xl px-4 py-2 max-w-[80%] bg-gray-200 text-gray-800 flex items-center gap-2">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        <span className="text-sm">
+                          NeoNest AI is thinking...
+                        </span>
+                      </div>
                     </div>
                   )}
-                </div>
-              ))}
-              {isSending && (
-                <div className="flex justify-start mt-3">
-                  <div className="rounded-xl px-4 py-2 max-w-[80%] bg-gray-200 text-gray-800 flex items-center gap-2">
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    <span className="text-sm">NeoNest AI is thinking...</span>
-                  </div>
+                  <div ref={messagesEndRef} />
                 </div>
               )}
-              <div ref={messagesEndRef} />
-            </div>
-          )}
 
-          {showNewMessageButton && (
-            <div className="flex justify-center mt-4">
-              <button
-                onClick={() => {
-                  scrollToBottom();
-                  setShowNewMessageButton(false);
-                }}
-                className="text-sm text-white bg-pink-600 px-4 py-1 rounded-full shadow-md hover:bg-pink-700 transition"
-              >
-                ⬇ New Message
-              </button>
-            </div>
-          )}
-
-          <form
-  onSubmit={(e) => {
-    e.preventDefault();
-    // Only send message, do NOT touch mic button or isListening
-    handleSubmit(e);
-  }}
-  className="flex gap-2 pt-4 items-center"
->
-
-            <Input
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder={isListening ? "Listening... Speak now..." : "Ask me about baby care..."}
-              className={`flex-1 dark:text-white ${isListening ? "border-green-500 bg-green-50 " : "border-pink-300 dark:bg-gray-700"}`}
-              disabled={isSending}
-            />
-            {/* Explicit mic button that passes "button" as the source when clicked */}
-            <button
-              type="button"
-              onClick={() => {
-                console.log("Mic button clicked. Current isListening:", isListening);
-                setListeningFromSource(!isListening, "button");
-              }}
-              disabled={isSending}
-              aria-pressed={isListening}
-              className={`p-2 rounded-full ml-1 border ${isListening ? "bg-red-100 dark:bg-red-600" : "bg-white dark:bg-gray-700"} hover:opacity-90 transition`}
-              title={isListening ? "Stop listening" : "Start listening"}
-            >
-              {isListening ? <Loader2 className="w-5 h-5 animate-spin" /> : <Mic className="w-5 h-5" />}
-            </button>
-
-            <Button
-              type="submit"
-              disabled={isSending || !input.trim()}
-              className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600"
-            >
-              {isSending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4 dark:text-gray-100" />}
-            </Button>
-
-            <button
-              type="button"
-              onClick={() => setShowConfirm(true)}
-              className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white px-3 py-2 rounded ml-2"
-            >
-              Clear Chat
-            </button>
-          </form>
-          {/* Confirm Modal */}
-          {showConfirm && (
-            <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-              <div className="bg-white dark:bg-gray-700 p-6 rounded shadow-lg w-80">
-                <h3 className="text-lg font-semibold mb-4 dark:text-gray-200">Confirm Clear Chat</h3>
-                <p className="mb-4">This will remove all messages from this chat. Are you sure?</p>
-                <div className="flex justify-end gap-2">
-                  <button onClick={() => setShowConfirm(false)} className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
-                    Cancel
-                  </button>
+              {showNewMessageButton && (
+                <div className="flex justify-center mt-4">
                   <button
                     onClick={() => {
-                      clearChatHistory("user");
-                      setShowConfirm(false);
+                      scrollToBottom();
+                      setShowNewMessageButton(false);
                     }}
-                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                    className="text-sm text-white bg-pink-600 px-4 py-1 rounded-full shadow-md hover:bg-pink-700 transition"
                   >
-                    Clear
+                    ⬇ New Message
                   </button>
                 </div>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+              )}
+
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  handleSubmit(e);
+                }}
+                className="flex gap-2 pt-4 items-center"
+              >
+                <Input
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder={
+                    isListening
+                      ? "Listening... Speak now..."
+                      : "Ask me about baby care..."
+                  }
+                  className={`flex-1 dark:text-white ${
+                    isListening
+                      ? "border-green-500 bg-green-50 "
+                      : "border-pink-300 dark:bg-gray-700"
+                  }`}
+                  disabled={isSending}
+                />
+                <button
+                  type="button"
+                  onClick={() => {
+                    console.log(
+                      "Mic button clicked. Current isListening:",
+                      isListening
+                    );
+                    setListeningFromSource(!isListening, "button");
+                  }}
+                  disabled={isSending}
+                  aria-pressed={isListening}
+                  className={`p-2 rounded-full ml-1 border ${
+                    isListening
+                      ? "bg-red-100 dark:bg-red-600"
+                      : "bg-white dark:bg-gray-700"
+                  } hover:opacity-90 transition`}
+                  title={isListening ? "Stop listening" : "Start listening"}
+                >
+                  {isListening ? (
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                  ) : (
+                    <Mic className="w-5 h-5" />
+                  )}
+                </button>
+
+                <Button
+                  type="submit"
+                  disabled={isSending || !input.trim()}
+                  className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600"
+                >
+                  {isSending ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : (
+                    <Send className="w-4 h-4 dark:text-gray-100" />
+                  )}
+                </Button>
+
+                <button
+                  type="button"
+                  onClick={() => setShowConfirm(true)}
+                  className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white px-3 py-2 rounded ml-2"
+                >
+                  Clear Chat
+                </button>
+              </form>
+              {/* Confirm Modal */}
+              {showConfirm && (
+                <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+                  <div className="bg-white dark:bg-gray-700 p-6 rounded shadow-lg w-80">
+                    <h3 className="text-lg font-semibold mb-4 dark:text-gray-200">
+                      Confirm Clear Chat
+                    </h3>
+                    <p className="mb-4">
+                      This will remove all messages from this chat. Are you
+                      sure?
+                    </p>
+                    <div className="flex justify-end gap-2">
+                      <button
+                        onClick={() => setShowConfirm(false)}
+                        className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={() => {
+                          clearChatHistory("user"); // This seems to be clearing based on a "user" key, not role. Keeping your logic.
+                          // If you intend to clear by *role*, it should be:
+                          // resetChatHistoryForRole(role);
+                          setShowConfirm(false);
+                        }}
+                        className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+                      >
+                        Clear
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* --- ZONE 2: Right Side (30%) Past Chats Panel --- */}
+        <div className="lg:w-1/3 w-full">
+          <PastChatsPanel
+            allChatHistory={allChatHistory}
+            activeRole={role}
+            onSelectChat={handleRoleChange} // Re-using handleRoleChange to switch context
+            onExportPDF={handleExportPDF}
+          />
+        </div>
+      </div>
 
-      <div className="max-w-4xl mx-auto space-y-4">
+      {/* --- ZONE 3: Bottom Full Width Stats --- */}
+      <div className="max-w-7xl mx-auto w-full space-y-4">
         <Card className="dark:bg-gray-700">
           <CardHeader>
             <CardTitle className="flex items-center gap-2 dark:text-gray-200">
@@ -437,23 +821,39 @@ export default function NeonestAi() {
           <CardContent className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
             <div>
               <MessageSquare className="mx-auto text-pink-500" />
-              <p className="font-bold dark:text-gray-200">{analytics.totalChats}</p>
-              <p className="text-xs text-gray-500 dark:text-gray-200">Total Conversations</p>
+              <p className="font-bold dark:text-gray-200">
+                {analytics.totalChats}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-200">
+                Total Conversations
+              </p>
             </div>
             <div>
               <Users className="mx-auto text-purple-500" />
-              <p className="font-bold dark:text-gray-200 ">{analytics.totalMessages}</p>
-              <p className="text-xs text-gray-500 dark:text-gray-200">Messages Sent</p>
+              <p className="font-bold dark:text-gray-200 ">
+                {analytics.totalMessages}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-200">
+                Messages Sent
+              </p>
             </div>
             <div>
               <Clock className="mx-auto text-blue-500" />
-              <p className="font-bold dark:text-gray-200">{analytics.averageResponseTime}s</p>
-              <p className="text-xs text-gray-500 dark:text-gray-200">Avg. Response Time</p>
+              <p className="font-bold dark:text-gray-200">
+                {analytics.averageResponseTime}s
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-200">
+                Avg. Response Time
+              </p>
             </div>
             <div>
               <ThumbsUp className="mx-auto text-green-500" />
-              <p className="font-bold dark:text-gray-200">{analytics.satisfactionRate}%</p>
-              <p className="text-xs text-gray-500 dark:text-gray-200">Satisfaction</p>
+              <p className="font-bold dark:text-gray-200">
+                {analytics.satisfactionRate}%
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-200">
+                Satisfaction
+              </p>
             </div>
           </CardContent>
         </Card>
diff --git a/package-lock.json b/package-lock.json
index 34f7dc1..6cacedc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,8 +56,10 @@
         "formidable": "^3.5.4",
         "framer-motion": "^12.18.1",
         "fs": "0.0.1-security",
+        "html2canvas": "^1.4.1",
         "input-otp": "1.4.1",
         "jsonwebtoken": "^9.0.2",
+        "jspdf": "^3.0.3",
         "jwt-decode": "^4.0.0",
         "lucide-react": "^0.454.0",
         "mongoose": "^8.15.2",
@@ -2979,6 +2981,19 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.1.10",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.10.tgz",
@@ -2999,6 +3014,13 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -4542,6 +4564,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/bcryptjs": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.2.tgz",
@@ -4749,6 +4780,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -5048,6 +5099,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.46.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz",
+      "integrity": "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -5068,6 +5131,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5469,6 +5541,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz",
+      "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -6709,6 +6791,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -6727,6 +6820,12 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -7359,6 +7458,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
@@ -7480,6 +7592,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -8160,6 +8278,23 @@
         "npm": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.3.tgz",
+      "integrity": "sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.9",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -9793,6 +9928,12 @@
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9939,6 +10080,13 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -10242,6 +10390,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/raw-body": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
@@ -10570,6 +10728,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -10693,6 +10858,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -11083,6 +11258,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stat-mode": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-0.3.0.tgz",
@@ -11477,6 +11662,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
@@ -11636,6 +11831,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -12299,6 +12503,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index a7e93f7..15e3ad0 100644
--- a/package.json
+++ b/package.json
@@ -57,8 +57,10 @@
     "formidable": "^3.5.4",
     "framer-motion": "^12.18.1",
     "fs": "0.0.1-security",
+    "html2canvas": "^1.4.1",
     "input-otp": "1.4.1",
     "jsonwebtoken": "^9.0.2",
+    "jspdf": "^3.0.3",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.454.0",
     "mongoose": "^8.15.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5f2a25..e069cfb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -152,12 +152,18 @@ importers:
       fs:
         specifier: 0.0.1-security
         version: 0.0.1-security
+      html2canvas:
+        specifier: ^1.4.1
+        version: 1.4.1
       input-otp:
         specifier: 1.4.1
         version: 1.4.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       jsonwebtoken:
         specifier: ^9.0.2
         version: 9.0.2
+      jspdf:
+        specifier: ^3.0.3
+        version: 3.0.3
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1439,6 +1445,12 @@ packages:
   '@types/node@22.15.31':
     resolution: {integrity: sha512-jnVe5ULKl6tijxUhvQeNbQG/84fHfg+yMak02cT8QVhBx/F05rAVxCGBYYTh2EKz22D6JF5ktXuNwdx7b9iEGw==}
 
+  '@types/pako@2.0.4':
+    resolution: {integrity: sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==}
+
+  '@types/raf@3.4.3':
+    resolution: {integrity: sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==}
+
   '@types/react-dom@19.1.6':
     resolution: {integrity: sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==}
     peerDependencies:
@@ -1447,6 +1459,9 @@ packages:
   '@types/react@19.1.8':
     resolution: {integrity: sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -1896,6 +1911,10 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
   bcryptjs@3.0.2:
     resolution: {integrity: sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==}
     hasBin: true
@@ -1966,6 +1985,10 @@ packages:
   caniuse-lite@1.0.30001723:
     resolution: {integrity: sha512-1R/elMjtehrFejxwmexeXAtae5UO9iSyFn6G/I806CYC/BLyyBk1EPhrKBkWhy6wM6Xnm47dSJQec+tLJ39WHw==}
 
+  canvg@3.0.11:
+    resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==}
+    engines: {node: '>=10.0.0'}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -2076,6 +2099,9 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  core-js@3.46.0:
+    resolution: {integrity: sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==}
+
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
@@ -2083,6 +2109,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2241,6 +2270,9 @@ packages:
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
+  dompurify@3.3.0:
+    resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
+
   dotenv@16.5.0:
     resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
     engines: {node: '>=12'}
@@ -2609,6 +2641,9 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-png@6.4.0:
+    resolution: {integrity: sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==}
+
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
@@ -2623,6 +2658,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -2802,6 +2840,10 @@ packages:
   html-url-attributes@3.0.1:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
 
+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
   http-errors@1.4.0:
     resolution: {integrity: sha512-oLjPqve1tuOl5aRhv8GK5eHpqP1C9fb+Ol+XTLjKfLltE44zdDbEdjPSbU7Ch5rSNsVFqZn97SrMmZLdu1/YMw==}
     engines: {node: '>= 0.6'}
@@ -2857,6 +2899,9 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
+  iobuffer@5.4.0:
+    resolution: {integrity: sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==}
+
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
@@ -3061,6 +3106,9 @@ packages:
     resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
     engines: {node: '>=12', npm: '>=6'}
 
+  jspdf@3.0.3:
+    resolution: {integrity: sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -3552,6 +3600,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3597,6 +3648,9 @@ packages:
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
+  performance-now@2.1.0:
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
+
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -3719,6 +3773,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  raf@3.4.1:
+    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
+
   raw-body@2.4.1:
     resolution: {integrity: sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==}
     engines: {node: '>= 0.8'}
@@ -3835,6 +3892,9 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
+  regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -3877,6 +3937,10 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  rgbcolor@1.0.1:
+    resolution: {integrity: sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==}
+    engines: {node: '>= 0.8.15'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -3994,6 +4058,10 @@ packages:
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
+  stackblur-canvas@2.7.0:
+    resolution: {integrity: sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==}
+    engines: {node: '>=0.1.14'}
+
   stat-mode@0.3.0:
     resolution: {integrity: sha512-QjMLR0A3WwFY2aZdV0okfFEJB5TRjkggXZjxP3A1RsWsNHNu3YPv8btmtc6iCFZ0Rul3FE93OYogvhOUClU+ng==}
 
@@ -4100,6 +4168,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg-pathdata@6.0.3:
+    resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==}
+    engines: {node: '>=12.0.0'}
+
   swr@2.3.3:
     resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
     peerDependencies:
@@ -4126,6 +4198,9 @@ packages:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
 
+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -4325,6 +4400,9 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -5626,6 +5704,11 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/pako@2.0.4': {}
+
+  '@types/raf@3.4.3':
+    optional: true
+
   '@types/react-dom@19.1.6(@types/react@19.1.8)':
     dependencies:
       '@types/react': 19.1.8
@@ -5634,6 +5717,9 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -6153,6 +6239,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  base64-arraybuffer@1.0.2: {}
+
   bcryptjs@3.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -6218,6 +6306,18 @@ snapshots:
 
   caniuse-lite@1.0.30001723: {}
 
+  canvg@3.0.11:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@types/raf': 3.4.3
+      core-js: 3.46.0
+      raf: 3.4.1
+      regenerator-runtime: 0.13.11
+      rgbcolor: 1.0.1
+      stackblur-canvas: 2.7.0
+      svg-pathdata: 6.0.3
+    optional: true
+
   ccount@2.0.1: {}
 
   chalk@4.1.2:
@@ -6318,6 +6418,9 @@ snapshots:
 
   cookie@0.7.2: {}
 
+  core-js@3.46.0:
+    optional: true
+
   create-require@1.1.1: {}
 
   cross-spawn@7.0.6:
@@ -6326,6 +6429,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -6458,6 +6565,11 @@ snapshots:
       '@babel/runtime': 7.27.6
       csstype: 3.1.3
 
+  dompurify@3.3.0:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+    optional: true
+
   dotenv@16.5.0: {}
 
   dunder-proto@1.0.1:
@@ -6929,6 +7041,12 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-png@6.4.0:
+    dependencies:
+      '@types/pako': 2.0.4
+      iobuffer: 5.4.0
+      pako: 2.1.0
+
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
@@ -6941,6 +7059,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
+  fflate@0.8.2: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -7137,6 +7257,11 @@ snapshots:
 
   html-url-attributes@3.0.1: {}
 
+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
   http-errors@1.4.0:
     dependencies:
       inherits: 2.0.1
@@ -7191,6 +7316,8 @@ snapshots:
 
   internmap@2.0.3: {}
 
+  iobuffer@5.4.0: {}
+
   is-alphabetical@2.0.1: {}
 
   is-alphanumerical@2.0.1:
@@ -7405,6 +7532,17 @@ snapshots:
       ms: 2.1.3
       semver: 7.7.2
 
+  jspdf@3.0.3:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      fast-png: 6.4.0
+      fflate: 0.8.2
+    optionalDependencies:
+      canvg: 3.0.11
+      core-js: 3.46.0
+      dompurify: 3.3.0
+      html2canvas: 1.4.1
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -7988,6 +8126,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  pako@2.1.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -8032,6 +8172,9 @@ snapshots:
 
   pend@1.2.0: {}
 
+  performance-now@2.1.0:
+    optional: true
+
   picocolors@1.0.0: {}
 
   picocolors@1.1.1: {}
@@ -8125,6 +8268,11 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  raf@3.4.1:
+    dependencies:
+      performance-now: 2.1.0
+    optional: true
+
   raw-body@2.4.1:
     dependencies:
       bytes: 3.1.0
@@ -8263,6 +8411,9 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
+  regenerator-runtime@0.13.11:
+    optional: true
+
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -8313,6 +8464,9 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  rgbcolor@1.0.1:
+    optional: true
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -8465,6 +8619,9 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
+  stackblur-canvas@2.7.0:
+    optional: true
+
   stat-mode@0.3.0: {}
 
   statuses@1.5.0: {}
@@ -8598,6 +8755,9 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg-pathdata@6.0.3:
+    optional: true
+
   swr@2.3.3(react@19.1.1):
     dependencies:
       dequal: 2.0.3
@@ -8655,6 +8815,10 @@ snapshots:
       mkdirp: 3.0.1
       yallist: 5.0.0
 
+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -8907,6 +9071,10 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
   uuid@8.3.2: {}
 
   v8-compile-cache-lib@3.0.1: {}