feat: merge document analysis into AI chat

- File attach button in input bar (Paperclip icon) for PDF, DOCX, CSV, TXT, images
- Drag-and-drop files directly onto the chat window
- Header 'Attach' shortcut button + file-type quick-action chips on welcome screen
- Instant upload to /api/documents/upload on attach — shows spinner, checkmark, error
- AttachmentChip preview in input with filename, size, status, remove button
- Image files show thumbnail preview
- After send: DocBadge appears in user message with expand/collapse for summary+insights
- AI answer auto-dispatched to /api/documents/chat for doc Q&A
- Multiple docs supported in one message — answers concatenated per doc
- Falls back to regular financial chat when no doc attached
- Full light/dark mode support throughout

frontend/src/app/chat/page.tsx

@@ -4,59 +4,120 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   Send, Sparkles, TrendingUp, Shield, PieChart,
-  Zap, Copy, ThumbsUp, ThumbsDown, Trash2, Mic, Paperclip,
+  Zap, Copy, ThumbsUp, ThumbsDown, Trash2, Mic,
+  Paperclip, FileText, ImageIcon, X, Upload,
+  CheckCircle2, AlertTriangle, ChevronDown, ChevronUp,
+  FileSpreadsheet, File,
 } from "lucide-react";
-import { aiApi, memoryApi } from "@/lib/api";
+import { aiApi, memoryApi, documentsApi } from "@/lib/api";
 import { useAuthStore } from "@/lib/stores/authStore";
 import { useLanguageStore } from "@/lib/stores/languageStore";
 import { useThemeStore } from "@/lib/stores/themeStore";
 
+// ─── Types ────────────────────────────────────────────────────────────────────
+interface AttachedFile {
+  file: File;
+  previewUrl?: string;         // for images
+  status: "pending" | "uploading" | "done" | "error";
+  docId?: string;              // backend document id after upload
+  summary?: string;
+  insights?: string[];
+  errorMsg?: string;
+}
+
 interface Message {
   id: string;
   role: "user" | "assistant";
   content: string;
   streaming?: boolean;
   timestamp: Date;
+  // doc context attached to this user message
+  attachments?: Array<{
+    name: string;
+    fileType: string;
+    docId: string;
+    summary?: string;
+    insights?: string[];
+  }>;
+  // if this was a doc-context answer
+  docMode?: boolean;
 }
 
+// ─── Accepted types ───────────────────────────────────────────────────────────
+const ACCEPTED = ".pdf,.docx,.txt,.csv,.png,.jpg,.jpeg,.webp";
+const IMAGE_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+const DOC_TYPES   = [
+  "application/pdf",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/plain",
+  "text/csv",
+];
+
 // ─── Suggestions per language ─────────────────────────────────────────────────
 const SUGGESTIONS = {
   en: [
-    { icon: TrendingUp, label: "What's my total balance?",      color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
-    { icon: PieChart,   label: "Analyze my spending this month", color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
-    { icon: Shield,     label: "Explain my fraud alerts",        color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
-    { icon: Zap,        label: "Give me a savings nudge",        color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
+    { icon: TrendingUp, label: "What's my total balance?",       color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
+    { icon: PieChart,   label: "Analyze my spending this month",  color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
+    { icon: Shield,     label: "Explain my fraud alerts",         color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
+    { icon: Zap,        label: "Give me a savings nudge",         color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
   ],
   hi: [
-    { icon: TrendingUp, label: "मेरा कुल बैलेंस क्या है?",       color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
-    { icon: PieChart,   label: "इस महीने मेरा खर्च विश्लेषण करें", color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
-    { icon: Shield,     label: "मेरे फ्रॉड अलर्ट समझाएं",         color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
-    { icon: Zap,        label: "बचत के लिए सुझाव दें",            color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
+    { icon: TrendingUp, label: "मेरा कुल बैलेंस क्या है?",        color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
+    { icon: PieChart,   label: "इस महीने मेरा खर्च विश्लेषण करें",  color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
+    { icon: Shield,     label: "मेरे फ्रॉड अलर्ट समझाएं",          color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
+    { icon: Zap,        label: "बचत के लिए सुझाव दें",             color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
   ],
   mr: [
-    { icon: TrendingUp, label: "माझी एकूण शिल्लक किती आहे?",     color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
-    { icon: PieChart,   label: "या महिन्याचा खर्च विश्लेषण करा",  color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
-    { icon: Shield,     label: "माझे फसवणूक अलर्ट सांगा",         color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
-    { icon: Zap,        label: "बचतीसाठी सल्ला द्या",             color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
+    { icon: TrendingUp, label: "माझी एकूण शिल्लक किती आहे?",      color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
+    { icon: PieChart,   label: "या महिन्याचा खर्च विश्लेषण करा",   color: "text-blue-400",    bg: "bg-blue-500/10 border-blue-500/20" },
+    { icon: Shield,     label: "माझे फसवणूक अलर्ट सांगा",          color: "text-purple-400",  bg: "bg-purple-500/10 border-purple-500/20" },
+    { icon: Zap,        label: "बचतीसाठी सल्ला द्या",              color: "text-amber-400",   bg: "bg-amber-500/10 border-amber-500/20" },
   ],
 };
 
+// ─── File icon helper ─────────────────────────────────────────────────────────
+function FileIcon({ type, className }: { type: string; className?: string }) {
+  if (IMAGE_TYPES.includes(type))    return <ImageIcon className={className} />;
+  if (type === "text/csv")            return <FileSpreadsheet className={className} />;
+  if (type.includes("pdf"))          return <FileText className={className} />;
+  return <File className={className} />;
+}
+
+function fileTypeLabel(type: string, name: string): string {
+  const ext = name.split(".").pop()?.toUpperCase() ?? "FILE";
+  if (IMAGE_TYPES.includes(type)) return "IMAGE";
+  return ext;
+}
+
+function formatBytes(b: number) {
+  if (b < 1024) return `${b} B`;
+  if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)} KB`;
+  return `${(b / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 // ─── AI Orb ───────────────────────────────────────────────────────────────────
 function AIOrb({ isThinking }: { isThinking: boolean }) {
   return (
     <div className="relative flex items-center justify-center">
-      <motion.div animate={{ scale: isThinking ? [1,1.3,1] : [1,1.1,1], opacity: isThinking ? [0.3,0.6,0.3] : [0.2,0.4,0.2] }}
+      <motion.div
+        animate={{ scale: isThinking ? [1,1.3,1] : [1,1.1,1], opacity: isThinking ? [0.3,0.6,0.3] : [0.2,0.4,0.2] }}
         transition={{ duration: isThinking ? 0.8 : 3, repeat: Infinity, ease: "easeInOut" }}
-        className="absolute h-24 w-24 rounded-full border border-emerald-500/30" />
-      <motion.div animate={{ scale: isThinking ? [1,1.5,1] : [1,1.15,1], opacity: isThinking ? [0.2,0.4,0.2] : [0.1,0.2,0.1] }}
+        className="absolute h-24 w-24 rounded-full border border-emerald-500/30"
+      />
+      <motion.div
+        animate={{ scale: isThinking ? [1,1.5,1] : [1,1.15,1], opacity: isThinking ? [0.2,0.4,0.2] : [0.1,0.2,0.1] }}
         transition={{ duration: isThinking ? 0.8 : 3, repeat: Infinity, ease: "easeInOut", delay: 0.2 }}
-        className="absolute h-32 w-32 rounded-full border border-blue-500/20" />
+        className="absolute h-32 w-32 rounded-full border border-blue-500/20"
+      />
       <motion.div
-        animate={{ boxShadow: isThinking
-          ? ["0 0 20px rgba(16,185,129,0.6),0 0 60px rgba(59,130,246,0.4)","0 0 40px rgba(16,185,129,0.8),0 0 80px rgba(59,130,246,0.5)","0 0 20px rgba(16,185,129,0.6),0 0 60px rgba(59,130,246,0.4)"]
-          : ["0 0 20px rgba(16,185,129,0.3),0 0 40px rgba(59,130,246,0.2)","0 0 30px rgba(16,185,129,0.5),0 0 60px rgba(59,130,246,0.3)","0 0 20px rgba(16,185,129,0.3),0 0 40px rgba(59,130,246,0.2)"] }}
+        animate={{
+          boxShadow: isThinking
+            ? ["0 0 20px rgba(16,185,129,0.6),0 0 60px rgba(59,130,246,0.4)","0 0 40px rgba(16,185,129,0.8),0 0 80px rgba(59,130,246,0.5)","0 0 20px rgba(16,185,129,0.6),0 0 60px rgba(59,130,246,0.4)"]
+            : ["0 0 20px rgba(16,185,129,0.3),0 0 40px rgba(59,130,246,0.2)","0 0 30px rgba(16,185,129,0.5),0 0 60px rgba(59,130,246,0.3)","0 0 20px rgba(16,185,129,0.3),0 0 40px rgba(59,130,246,0.2)"],
+        }}
         transition={{ duration: isThinking ? 0.8 : 3, repeat: Infinity, ease: "easeInOut" }}
-        className="relative h-16 w-16 rounded-full bg-gradient-to-br from-emerald-400 via-cyan-400 to-blue-500 flex items-center justify-center">
+        className="relative h-16 w-16 rounded-full bg-gradient-to-br from-emerald-400 via-cyan-400 to-blue-500 flex items-center justify-center"
+      >
         <motion.div animate={{ rotate: isThinking ? 360 : 0 }} transition={{ duration: 2, repeat: isThinking ? Infinity : 0, ease: "linear" }}>
           <Sparkles className="h-7 w-7 text-white" />
         </motion.div>
@@ -65,40 +126,221 @@ function AIOrb({ isThinking }: { isThinking: boolean }) {
   );
 }
 
+// ─── Attachment Card (inside input area) ─────────────────────────────────────
+function AttachmentChip({ file, onRemove, isLight }: { file: AttachedFile; onRemove: () => void; isLight: boolean }) {
+  const isImg = IMAGE_TYPES.includes(file.file.type);
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.85 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.85 }}
+      className={`relative flex items-center gap-2 rounded-xl border px-3 py-2 text-xs max-w-[200px] ${
+        isLight ? "bg-slate-50 border-slate-200" : "bg-white/8 border-white/10"
+      }`}
+    >
+      {/* Status indicator */}
+      {file.status === "uploading" && (
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+          className="h-4 w-4 border-2 border-emerald-500 border-t-transparent rounded-full flex-shrink-0"
+        />
+      )}
+      {file.status === "done" && <CheckCircle2 className="h-4 w-4 text-emerald-500 flex-shrink-0" />}
+      {file.status === "error" && <AlertTriangle className="h-4 w-4 text-red-500 flex-shrink-0" />}
+      {file.status === "pending" && (
+        isImg
+          ? <ImageIcon className="h-4 w-4 text-blue-400 flex-shrink-0" />
+          : <FileText className="h-4 w-4 text-purple-400 flex-shrink-0" />
+      )}
+
+      {/* Preview thumb for images */}
+      {isImg && file.previewUrl && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={file.previewUrl} alt="preview" className="h-6 w-6 rounded object-cover flex-shrink-0" />
+      )}
+
+      <span className="truncate font-medium" style={{ color: "var(--fg)", maxWidth: 100 }}>
+        {file.file.name}
+      </span>
+      <span style={{ color: "var(--fg-subtle)" }}>{formatBytes(file.file.size)}</span>
+
+      {file.status !== "uploading" && (
+        <button
+          onClick={onRemove}
+          className="ml-auto flex-shrink-0 rounded-full p-0.5 hover:bg-red-500/10 transition-colors"
+        >
+          <X className="h-3 w-3 text-red-400" />
+        </button>
+      )}
+    </motion.div>
+  );
+}
+
+// ─── Document Badge (in message bubble) ──────────────────────────────────────
+function DocBadge({
+  name, fileType, summary, insights, isLight,
+}: {
+  name: string;
+  fileType: string;
+  summary?: string;
+  insights?: string[];
+  isLight: boolean;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const isImg = ["png", "jpg", "jpeg", "webp"].includes(fileType.toLowerCase());
+
+  return (
+    <div
+      className={`rounded-xl border text-xs overflow-hidden ${
+        isLight ? "bg-purple-50 border-purple-200/80" : "bg-purple-500/10 border-purple-500/20"
+      }`}
+    >
+      <div className="flex items-center gap-2 px-3 py-2">
+        {isImg
+          ? <ImageIcon className="h-3.5 w-3.5 text-purple-500 flex-shrink-0" />
+          : <FileText className="h-3.5 w-3.5 text-purple-500 flex-shrink-0" />}
+        <span className="font-semibold text-purple-600 truncate flex-1">{name}</span>
+        <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold uppercase ${
+          isLight ? "bg-purple-100 text-purple-600" : "bg-purple-500/20 text-purple-400"
+        }`}>
+          {fileType.toUpperCase()}
+        </span>
+        {(summary || (insights && insights.length > 0)) && (
+          <button
+            onClick={() => setExpanded(v => !v)}
+            className="text-purple-500 ml-1"
+          >
+            {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+          </button>
+        )}
+      </div>
+      <AnimatePresence>
+        {expanded && (summary || (insights && insights.length > 0)) && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className={`border-t px-3 py-2 space-y-1.5 ${
+              isLight ? "border-purple-200/80" : "border-purple-500/20"
+            }`}
+          >
+            {summary && (
+              <p style={{ color: "var(--fg-muted)" }}>{summary}</p>
+            )}
+            {insights && insights.length > 0 && (
+              <ul className="space-y-0.5">
+                {insights.map((ins, i) => (
+                  <li key={i} className="flex gap-1.5" style={{ color: "var(--fg-muted)" }}>
+                    <span className="text-purple-500 flex-shrink-0">•</span>
+                    <span>{ins}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
 // ─── Message Bubble ───────────────────────────────────────────────────────────
-function MessageBubble({ message, onCopy, userInitial }: { message: Message; onCopy: (t: string) => void; userInitial: string }) {
+function MessageBubble({
+  message, onCopy, userInitial, isLight,
+}: {
+  message: Message;
+  onCopy: (t: string) => void;
+  userInitial: string;
+  isLight: boolean;
+}) {
   const isUser = message.role === "user";
+
   const renderContent = (text: string) =>
     text.split("\n").map((line, i) => {
-      if (line.startsWith("**") && line.endsWith("**")) return <p key={i} className="font-semibold text-white">{line.slice(2,-2)}</p>;
-      if (line.startsWith("- ")) return <p key={i} className="ml-2">• {line.slice(2)}</p>;
-      if (line.startsWith("# ")) return <p key={i} className="font-bold text-white text-base mt-1">{line.slice(2)}</p>;
-      return <p key={i} className={line === "" ? "h-2" : ""}>{line}</p>;
+      if (line.startsWith("**") && line.endsWith("**"))
+        return <p key={i} className="font-semibold" style={{ color: "var(--fg)" }}>{line.slice(2, -2)}</p>;
+      if (line.startsWith("- "))
+        return <p key={i} className="ml-2" style={{ color: "var(--fg-muted)" }}>• {line.slice(2)}</p>;
+      if (line.startsWith("# "))
+        return <p key={i} className="font-bold text-base mt-1" style={{ color: "var(--fg)" }}>{line.slice(2)}</p>;
+      return (
+        <p key={i} className={line === "" ? "h-2" : ""} style={{ color: isUser ? "white" : "var(--fg-muted)" }}>
+          {line}
+        </p>
+      );
     });
 
   return (
-    <motion.div initial={{ opacity: 0, y: 10, scale: 0.98 }} animate={{ opacity: 1, y: 0, scale: 1 }}
-      transition={{ duration: 0.3, ease: "easeOut" }} className={`flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"}`}>
+    <motion.div
+      initial={{ opacity: 0, y: 10, scale: 0.98 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+      className={`flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"}`}
+    >
+      {/* Avatar */}
       <div className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl text-xs font-bold ${
-        isUser ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white" : "bg-gradient-to-br from-emerald-400 to-cyan-500"
+        isUser
+          ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white"
+          : "bg-gradient-to-br from-emerald-400 to-cyan-500"
       }`}>
         {isUser ? userInitial : <Sparkles className="h-4 w-4 text-white" />}
       </div>
-      <div className={`max-w-[75%] flex flex-col gap-1 ${isUser ? "items-end" : "items-start"}`}>
-        <div className={`rounded-2xl px-4 py-3 text-sm leading-relaxed ${
-          isUser ? "bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-tr-sm" : "glass border border-white/10 text-zinc-100 rounded-tl-sm"
-        }`}>
-          <div className="whitespace-pre-wrap">{renderContent(message.content)}</div>
-          {message.streaming && <span className="streaming-cursor" />}
-        </div>
-        {!isUser && !message.streaming && (
+
+      {/* Content */}
+      <div className={`max-w-[78%] flex flex-col gap-2 ${isUser ? "items-end" : "items-start"}`}>
+        {/* Attachment badges (user side) */}
+        {isUser && message.attachments && message.attachments.length > 0 && (
+          <div className="flex flex-col gap-1.5 w-full">
+            {message.attachments.map((att) => (
+              <DocBadge
+                key={att.docId}
+                name={att.name}
+                fileType={att.fileType}
+                summary={att.summary}
+                insights={att.insights}
+                isLight={isLight}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Doc-mode label on AI answer */}
+        {!isUser && message.docMode && (
+          <div className="flex items-center gap-1.5 text-[10px] text-purple-500">
+            <FileText className="h-3 w-3" />
+            Document Analysis
+          </div>
+        )}
+
+        {/* Bubble */}
+        {message.content && (
+          <div className={`rounded-2xl px-4 py-3 text-sm leading-relaxed ${
+            isUser
+              ? "bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-tr-sm"
+              : isLight
+                ? "bg-white border border-slate-200 rounded-tl-sm"
+                : "glass border border-white/10 rounded-tl-sm"
+          }`}>
+            <div className="whitespace-pre-wrap">{renderContent(message.content)}</div>
+            {message.streaming && <span className="streaming-cursor" />}
+          </div>
+        )}
+
+        {/* Action row for AI messages */}
+        {!isUser && !message.streaming && message.content && (
           <div className="flex items-center gap-1 px-1">
-            {[{ icon: Copy, label: "Copy", action: () => onCopy(message.content) },
-              { icon: ThumbsUp, label: "Good", action: () => {} },
-              { icon: ThumbsDown, label: "Bad", action: () => {} }
+            {[
+              { icon: Copy,       label: "Copy",  action: () => onCopy(message.content) },
+              { icon: ThumbsUp,   label: "Good",  action: () => {} },
+              { icon: ThumbsDown, label: "Bad",   action: () => {} },
             ].map(({ icon: Icon, label, action }) => (
-              <button key={label} title={label} onClick={action}
-                className="p-1 rounded-lg text-zinc-600 hover:text-zinc-400 hover:bg-white/5 transition-all">
+              <button
+                key={label} title={label} onClick={action}
+                className="p-1 rounded-lg transition-all hover:bg-white/5"
+                style={{ color: "var(--fg-subtle)" }}
+              >
                 <Icon className="h-3 w-3" />
               </button>
             ))}
@@ -111,29 +353,32 @@ function MessageBubble({ message, onCopy, userInitial }: { message: Message; onC
 
 // ─── Main Chat Page ───────────────────────────────────────────────────────────
 export default function ChatPage() {
-  const { user } = useAuthStore();
-  const { language, t } = useLanguageStore();
-  const { theme } = useThemeStore();
-  const isLight = theme === "light";
-  const userInitial = user?.name?.charAt(0).toUpperCase() ?? "U";
-  const suggestions = SUGGESTIONS[language as keyof typeof SUGGESTIONS] ?? SUGGESTIONS.en;
-
-  // Active session ID — persisted across refreshes via localStorage
+  const { user }          = useAuthStore();
+  const { language, t }   = useLanguageStore();
+  const { theme }         = useThemeStore();
+  const isLight           = theme === "light";
+  const userInitial       = user?.name?.charAt(0).toUpperCase() ?? "U";
+  const suggestions       = SUGGESTIONS[language as keyof typeof SUGGESTIONS] ?? SUGGESTIONS.en;
+
   const [sessionId, setSessionId] = useState<string | null>(() =>
     typeof window !== "undefined" ? localStorage.getItem("bb_chat_session") : null
   );
+  const [messages,       setMessages]       = useState<Message[]>([]);
+  const [historyLoaded,  setHistoryLoaded]  = useState(false);
+  const [input,          setInput]          = useState("");
+  const [isThinking,     setIsThinking]     = useState(false);
+  const [attachedFiles,  setAttachedFiles]  = useState<AttachedFile[]>([]);
+  const [isDragging,     setIsDragging]     = useState(false);
 
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [historyLoaded, setHistoryLoaded] = useState(false);
-  const [input, setInput] = useState("");
-  const [isThinking, setIsThinking] = useState(false);
+  const inputRef       = useRef<HTMLTextAreaElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
+  const fileInputRef   = useRef<HTMLInputElement>(null);
+  const abortRef       = useRef<AbortController | null>(null);
 
   // Auto-scroll
   useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]);
 
-  // Load persisted history on mount
+  // Load history on mount
   useEffect(() => {
     if (historyLoaded) return;
     const load = async () => {
@@ -146,34 +391,106 @@ export default function ChatPage() {
             content: m.content,
             timestamp: new Date(m.created_at),
           })));
-          // Restore session id from first message
           if (res.messages[0].session_id) {
             setSessionId(res.messages[0].session_id);
             localStorage.setItem("bb_chat_session", res.messages[0].session_id);
           }
         } else {
-          // Show welcome message only if no history
           setMessages([{
             id: "welcome",
             role: "assistant",
-            content: language === "hi"
-              ? "नमस्ते! मैं आपका AI वित्तीय सहायक हूँ। आपके खाते, लेनदेन और लक्ष्यों की पूरी जानकारी मेरे पास है।\n\nआज आप क्या जानना चाहते हैं?"
-              : language === "mr"
-              ? "नमस्कार! मी तुमचा AI आर्थिक सहाय्यक आहे. तुमच्या खाती, व्यवहार आणि उद्दिष्टांची संपूर्ण माहिती माझ्याकडे आहे.\n\nआज तुम्हाला काय जाणून घ्यायचे आहे?"
-              : "Hello! I'm your AI financial assistant with full context of your accounts, spending patterns, and goals.\n\nWhat would you like to explore today?",
+            content:
+              language === "hi"
+                ? "नमस्ते! मैं आपका AI वित्तीय सहायक हूँ। आप बैंक स्टेटमेंट, इनवॉइस, CSV या कोई भी दस्तावेज़ अटैच करके उसके बारे में पूछ सकते हैं।\n\nआज आप क्या जानना चाहते हैं?"
+                : language === "mr"
+                ? "नमस्कार! मी तुमचा AI आर्थिक सहाय्यक आहे. बँक स्टेटमेंट, इनव्हॉइस किंवा कोणतेही कागदपत्र अटॅच करा आणि प्रश्न विचारा.\n\nआज तुम्हाला काय जाणून घ्यायचे आहे?"
+                : "Hello! I'm your AI financial assistant.\n\nYou can **attach files** (PDF, DOCX, CSV, images) directly here and ask me anything about them — bank statements, invoices, contracts, and more.\n\nWhat would you like to explore today?",
             timestamp: new Date(),
           }]);
         }
       } catch {
-        // If memory API fails, show welcome
-        setMessages([{ id: "welcome", role: "assistant", content: "Hello! I'm your AI financial assistant. What would you like to explore today?", timestamp: new Date() }]);
+        setMessages([{
+          id: "welcome",
+          role: "assistant",
+          content: "Hello! I'm your AI financial assistant. Attach any document and ask me about it, or ask about your finances.",
+          timestamp: new Date(),
+        }]);
       }
       setHistoryLoaded(true);
     };
     load();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Simulated word-by-word streaming
+  // ── Upload a single file → returns docId + analysis ──────────────────────
+  const uploadFile = useCallback(async (af: AttachedFile): Promise<AttachedFile> => {
+    try {
+      setAttachedFiles((prev) =>
+        prev.map((f) => f.file === af.file ? { ...f, status: "uploading" } : f)
+      );
+      const result = await documentsApi.upload(af.file, language);
+      const updated: AttachedFile = {
+        ...af,
+        status: "done",
+        docId: result.id,
+        summary: result.summary,
+        insights: result.insights,
+      };
+      setAttachedFiles((prev) =>
+        prev.map((f) => f.file === af.file ? updated : f)
+      );
+      return updated;
+    } catch (err) {
+      const updated: AttachedFile = {
+        ...af,
+        status: "error",
+        errorMsg: (err as Error).message || "Upload failed",
+      };
+      setAttachedFiles((prev) =>
+        prev.map((f) => f.file === af.file ? updated : f)
+      );
+      return updated;
+    }
+  }, [language]);
+
+  // ── Add files (from input or drop) ───────────────────────────────────────
+  const addFiles = useCallback((files: FileList | File[]) => {
+    const arr = Array.from(files);
+    const valid = arr.filter((f) => {
+      const ok = [...IMAGE_TYPES, ...DOC_TYPES].includes(f.type) ||
+        ["pdf","docx","txt","csv","png","jpg","jpeg","webp"].some(ext =>
+          f.name.toLowerCase().endsWith(`.${ext}`)
+        );
+      return ok && f.size <= 10 * 1024 * 1024;
+    });
+    if (valid.length === 0) return;
+
+    const newFiles: AttachedFile[] = valid.map((f) => ({
+      file: f,
+      previewUrl: IMAGE_TYPES.includes(f.type) ? URL.createObjectURL(f) : undefined,
+      status: "pending",
+    }));
+
+    setAttachedFiles((prev) => {
+      const updated = [...prev, ...newFiles];
+      // Kick off uploads immediately
+      newFiles.forEach((af) => {
+        // slight delay so state settles
+        setTimeout(() => uploadFile(af), 100);
+      });
+      return updated;
+    });
+  }, [uploadFile]);
+
+  // ── Drag-and-drop ─────────────────────────────────────────────────────────
+  const handleDragOver  = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); };
+  const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); };
+  const handleDrop      = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+  };
+
+  // ── Streaming word-by-word ───────────────────────────────────────────────
   const streamWords = useCallback((msgId: string, fullText: string) => {
     const words = fullText.split(" ");
     let i = 0;
@@ -184,55 +501,124 @@ export default function ChatPage() {
         setMessages((prev) => prev.map((m) => m.id === msgId ? { ...m, streaming: false } : m));
         return;
       }
-      setMessages((prev) => prev.map((m) => m.id === msgId ? { ...m, content: words.slice(0, i + 1).join(" ") } : m));
+      setMessages((prev) =>
+        prev.map((m) => m.id === msgId ? { ...m, content: words.slice(0, i + 1).join(" ") } : m)
+      );
       i++;
     }, 28);
   }, []);
 
-  // Send message
+  // ── Send message ─────────────────────────────────────────────────────────
   const sendMessage = useCallback(async (text?: string) => {
     const content = (text ?? input).trim();
-    if (!content || isThinking) return;
+
+    // Need either text or a completed doc
+    const doneDocs = attachedFiles.filter((f) => f.status === "done" && f.docId);
+    if (!content && doneDocs.length === 0) return;
+    if (isThinking) return;
+
     abortRef.current?.abort();
     abortRef.current = new AbortController();
     setInput("");
     setIsThinking(true);
 
-    const userMsg: Message = { id: `user-${Date.now()}`, role: "user", content, timestamp: new Date() };
+    // Build user message
+    const userMsg: Message = {
+      id: `user-${Date.now()}`,
+      role: "user",
+      content,
+      timestamp: new Date(),
+      attachments: doneDocs.map((f) => ({
+        name: f.file.name,
+        fileType: f.file.name.split(".").pop() ?? "file",
+        docId: f.docId!,
+        summary: f.summary,
+        insights: f.insights,
+      })),
+    };
     setMessages((prev) => [...prev, userMsg]);
 
+    // Clear attached files after sending
+    setAttachedFiles([]);
+
     const aiId = `ai-${Date.now()}`;
-    setMessages((prev) => [...prev, { id: aiId, role: "assistant", content: "", streaming: true, timestamp: new Date() }]);
+    setMessages((prev) => [
+      ...prev,
+      { id: aiId, role: "assistant", content: "", streaming: true, timestamp: new Date(), docMode: doneDocs.length > 0 },
+    ]);
 
     try {
-      const res = await aiApi.chat(content, user?.user_id);
+      let responseText = "";
+
+      if (doneDocs.length > 0) {
+        // ── Document Q&A mode ────────────────────────────────────────────
+        const doc = doneDocs[0]; // use first doc for Q&A
+        const question = content ||
+          (language === "hi" ? "इस दस्तावेज़ का सारांश और मुख्य जानकारी बताएं।"
+          : language === "mr" ? "या कागदपत्राचा सारांश आणि मुख्य माहिती सांगा."
+          : "Please summarize this document and give me the key financial insights.");
+
+        const res = await documentsApi.chat(doc.docId!, question, language);
+        responseText = res.answer;
+
+        // If multiple docs, answer about remaining ones too
+        for (const extraDoc of doneDocs.slice(1)) {
+          const extra = await documentsApi.chat(
+            extraDoc.docId!,
+            question,
+            language
+          );
+          responseText += `\n\n---\n**${extraDoc.file.name}:**\n${extra.answer}`;
+        }
+      } else {
+        // ── Regular financial chat ────────────────────────────────────────
+        const res = await aiApi.chat(content, user?.user_id, sessionId ?? undefined, language);
+        responseText = res.response;
+      }
+
       setIsThinking(false);
-      streamWords(aiId, res.response);
+      streamWords(aiId, responseText);
 
-      // Persist both messages to backend memory
+      // Persist to memory
+      const msgContent = content || (doneDocs.map(d => `[Document: ${d.file.name}]`).join(", "));
       const sid = sessionId;
-      const savedUser = await memoryApi.save({ session_id: sid ?? undefined, role: "user", content, session_title: content.slice(0, 40) });
+      const savedUser = await memoryApi.save({
+        session_id: sid ?? undefined,
+        role: "user",
+        content: msgContent,
+        session_title: msgContent.slice(0, 40),
+      });
       const newSid = savedUser.session_id;
       if (newSid && newSid !== sessionId) {
         setSessionId(newSid);
         localStorage.setItem("bb_chat_session", newSid);
       }
-      await memoryApi.save({ session_id: newSid ?? undefined, role: "assistant", content: res.response });
+      await memoryApi.save({ session_id: newSid ?? undefined, role: "assistant", content: responseText });
+
     } catch (err) {
       setIsThinking(false);
-      const errMsg = (err as Error).message === "Session expired. Please log in again."
-        ? "Session expired. Please refresh and log in again."
-        : "⚠️ Could not reach the AI backend. Please try again.";
-      setMessages((prev) => prev.map((m) => m.id === aiId ? { ...m, content: errMsg, streaming: false } : m));
+      const errMsg =
+        (err as Error).message === "Session expired. Please log in again."
+          ? "Session expired. Please refresh and log in again."
+          : "⚠️ Could not reach the AI backend. Please try again.";
+      setMessages((prev) =>
+        prev.map((m) => m.id === aiId ? { ...m, content: errMsg, streaming: false } : m)
+      );
     }
-  }, [input, isThinking, user?.user_id, sessionId, streamWords]);
+  }, [input, isThinking, attachedFiles, user?.user_id, sessionId, streamWords, language]);
 
   const clearHistory = async () => {
     try {
       await memoryApi.clear(sessionId ?? undefined);
       setSessionId(null);
+      setAttachedFiles([]);
       localStorage.removeItem("bb_chat_session");
-      setMessages([{ id: "welcome", role: "assistant", content: "Chat history cleared. How can I help you?", timestamp: new Date() }]);
+      setMessages([{
+        id: "welcome",
+        role: "assistant",
+        content: "Chat history cleared. How can I help you?",
+        timestamp: new Date(),
+      }]);
     } catch { /* ignore */ }
   };
 
@@ -240,50 +626,140 @@ export default function ChatPage() {
     if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); }
   };
 
-  const isStreaming = messages.some((m) => m.streaming);
+  const isStreaming    = messages.some((m) => m.streaming);
+  const hasUploading   = attachedFiles.some((f) => f.status === "uploading");
+  const hasDone        = attachedFiles.some((f) => f.status === "done");
+  const canSend        = (input.trim() || hasDone) && !isThinking && !isStreaming && !hasUploading;
 
   const headerBg = isLight ? "bg-white/90 border-black/8" : "bg-black/20 border-white/10";
-  const inputBg = isLight ? "bg-white/90 border-black/8" : "bg-black/20 border-white/10";
+  const inputBg  = isLight ? "bg-white/90 border-black/8" : "bg-black/20 border-white/10";
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col -m-8">
-      {/* Header */}
-      <div className={`flex items-center justify-between border-b backdrop-blur-xl px-8 py-4 flex-shrink-0 ${headerBg}`}>
+    <div
+      className="flex h-[calc(100vh-4rem)] flex-col -m-8"
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {/* ── Drag overlay ───────────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {isDragging && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-emerald-500 bg-emerald-500/10 backdrop-blur-sm pointer-events-none"
+          >
+            <Upload className="h-12 w-12 text-emerald-500 mb-3" />
+            <p className="text-lg font-semibold text-emerald-500">Drop files here</p>
+            <p className="text-sm text-emerald-400 mt-1">PDF, DOCX, CSV, TXT, Images — max 10 MB</p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ── Header ─────────────────────────────────────────────────────────── */}
+      <div
+        className={`flex items-center justify-between border-b backdrop-blur-xl px-6 py-3 flex-shrink-0 ${headerBg}`}
+      >
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-2">
             <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
             <span className="text-xs text-emerald-500">Live AI · {language.toUpperCase()}</span>
           </div>
-          <div className="h-4 w-px bg-white/10" />
+          <div className="h-4 w-px" style={{ background: "var(--border-strong)" }} />
           <div>
-            <h1 className="text-base font-semibold">BankBot AI Assistant</h1>
-            <p className="text-xs text-zinc-500">Context-aware · Groq-powered · Memory enabled</p>
+            <h1 className="text-sm font-semibold" style={{ color: "var(--fg)" }}>BankBot AI Assistant</h1>
+            <p className="text-[10px]" style={{ color: "var(--fg-subtle)" }}>
+              Context-aware · Document analysis · Memory enabled
+            </p>
           </div>
         </div>
-        <button onClick={clearHistory} title="Clear history"
-          className="flex items-center gap-1.5 rounded-xl border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-zinc-400 hover:text-red-400 hover:border-red-500/30 transition-colors">
-          <Trash2 className="h-3.5 w-3.5" />Clear
-        </button>
+
+        <div className="flex items-center gap-2">
+          {/* Upload shortcut */}
+          <motion.button
+            whileHover={{ scale: 1.04 }}
+            whileTap={{ scale: 0.96 }}
+            onClick={() => fileInputRef.current?.click()}
+            title="Attach file"
+            className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium transition-colors ${
+              isLight
+                ? "border-purple-200 bg-purple-50 text-purple-600 hover:bg-purple-100"
+                : "border-purple-500/30 bg-purple-500/10 text-purple-400 hover:bg-purple-500/20"
+            }`}
+          >
+            <Paperclip className="h-3.5 w-3.5" />
+            Attach
+          </motion.button>
+
+          <button
+            onClick={clearHistory}
+            title="Clear history"
+            className="flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs transition-colors"
+            style={{ borderColor: "var(--border)", color: "var(--fg-subtle)" }}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            Clear
+          </button>
+        </div>
       </div>
 
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto px-8 py-6 space-y-5">
+      {/* ── Messages ───────────────────────────────────────────────────────── */}
+      <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
+
+        {/* Welcome screen */}
         {messages.length === 1 && messages[0].id === "welcome" && (
-          <motion.div initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.6 }}
-            className="flex flex-col items-center gap-6 py-8">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6 }}
+            className="flex flex-col items-center gap-6 py-6"
+          >
             <AIOrb isThinking={false} />
             <div className="text-center">
-              <p className="text-lg font-semibold">Your AI Financial Twin</p>
-              <p className="text-sm text-zinc-400 mt-1">{t("chat_placeholder")}</p>
+              <p className="text-lg font-semibold" style={{ color: "var(--fg)" }}>
+                Your AI Financial Twin
+              </p>
+              <p className="text-sm mt-1" style={{ color: "var(--fg-muted)" }}>
+                {t("chat_placeholder")}
+              </p>
+            </div>
+
+            {/* File type shortcuts */}
+            <div className="flex gap-3 flex-wrap justify-center">
+              {[
+                { icon: FileText,        label: "Bank Statement", ext: ".pdf",  color: "text-blue-400",   bg: isLight ? "bg-blue-50 border-blue-200" : "bg-blue-500/10 border-blue-500/20" },
+                { icon: FileSpreadsheet, label: "CSV / Excel",    ext: ".csv",  color: "text-emerald-400", bg: isLight ? "bg-emerald-50 border-emerald-200" : "bg-emerald-500/10 border-emerald-500/20" },
+                { icon: FileText,        label: "Invoice / Doc",  ext: ".docx", color: "text-purple-400", bg: isLight ? "bg-purple-50 border-purple-200" : "bg-purple-500/10 border-purple-500/20" },
+                { icon: ImageIcon,       label: "Statement Image",ext: ".png",  color: "text-amber-400",  bg: isLight ? "bg-amber-50 border-amber-200" : "bg-amber-500/10 border-amber-500/20" },
+              ].map((item) => (
+                <motion.button
+                  key={item.label}
+                  whileHover={{ scale: 1.04 }}
+                  whileTap={{ scale: 0.96 }}
+                  onClick={() => fileInputRef.current?.click()}
+                  className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-medium transition-all ${item.bg} ${item.color}`}
+                >
+                  <item.icon className="h-3.5 w-3.5" />
+                  {item.label}
+                </motion.button>
+              ))}
             </div>
-            <div className="grid grid-cols-2 gap-3 w-full max-w-md">
+
+            {/* Standard suggestions */}
+            <div className="grid grid-cols-2 gap-2.5 w-full max-w-md">
               {suggestions.map((s) => {
                 const Icon = s.icon;
                 return (
-                  <motion.button key={s.label} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}
+                  <motion.button
+                    key={s.label}
+                    whileHover={{ scale: 1.03 }}
+                    whileTap={{ scale: 0.97 }}
                     onClick={() => sendMessage(s.label)}
-                    className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm font-medium transition-all ${s.bg} ${s.color} hover:brightness-110`}>
-                    <Icon className="h-4 w-4" />{s.label}
+                    className={`flex items-center gap-2 rounded-xl border px-3 py-2.5 text-sm font-medium transition-all ${s.bg} ${s.color} hover:brightness-110`}
+                  >
+                    <Icon className="h-4 w-4 flex-shrink-0" />
+                    <span className="text-left text-xs leading-snug">{s.label}</span>
                   </motion.button>
                 );
               })}
@@ -291,65 +767,168 @@ export default function ChatPage() {
           </motion.div>
         )}
 
+        {/* Message list */}
         {messages.map((msg) => (
-          <MessageBubble key={msg.id} message={msg} onCopy={(t) => navigator.clipboard.writeText(t).catch(() => {})} userInitial={userInitial} />
+          <MessageBubble
+            key={msg.id}
+            message={msg}
+            onCopy={(t) => navigator.clipboard.writeText(t).catch(() => {})}
+            userInitial={userInitial}
+            isLight={isLight}
+          />
         ))}
 
+        {/* Thinking indicator */}
         <AnimatePresence>
           {isThinking && (
-            <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="flex gap-3">
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              className="flex gap-3"
+            >
               <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500">
                 <Sparkles className="h-4 w-4 text-white" />
               </div>
-              <div className="glass rounded-2xl rounded-tl-sm px-4 py-3 border border-white/10">
+              <div className={`rounded-2xl rounded-tl-sm px-4 py-3 border ${
+                isLight ? "bg-white border-slate-200" : "glass border-white/10"
+              }`}>
                 <div className="flex gap-1 items-center h-4">
-                  {[0,1,2].map(i => (
-                    <motion.div key={i} animate={{ y: [0,-4,0] }} transition={{ duration: 0.6, repeat: Infinity, delay: i*0.15 }}
-                      className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                  {[0, 1, 2].map((i) => (
+                    <motion.div
+                      key={i}
+                      animate={{ y: [0, -4, 0] }}
+                      transition={{ duration: 0.6, repeat: Infinity, delay: i * 0.15 }}
+                      className="h-1.5 w-1.5 rounded-full bg-emerald-400"
+                    />
                   ))}
                 </div>
               </div>
             </motion.div>
           )}
         </AnimatePresence>
+
         <div ref={messagesEndRef} />
       </div>
 
-      {/* Quick suggestions */}
+      {/* ── Quick suggestions (post-first-message) ─────────────────────────── */}
       {messages.length > 1 && (
-        <div className="flex gap-2 px-8 pb-2 overflow-x-auto flex-shrink-0">
+        <div className="flex gap-2 px-6 pb-2 overflow-x-auto flex-shrink-0">
           {suggestions.map((s) => {
             const Icon = s.icon;
             return (
-              <button key={s.label} onClick={() => sendMessage(s.label)} disabled={isStreaming || isThinking}
-                className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all disabled:opacity-40 ${s.bg} ${s.color} hover:brightness-110`}>
-                <Icon className="h-3 w-3" />{s.label}
+              <button
+                key={s.label}
+                onClick={() => sendMessage(s.label)}
+                disabled={isStreaming || isThinking}
+                className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all disabled:opacity-40 ${s.bg} ${s.color} hover:brightness-110`}
+              >
+                <Icon className="h-3 w-3" />
+                {s.label}
               </button>
             );
           })}
         </div>
       )}
 
-      {/* Input */}
-      <div className={`flex-shrink-0 border-t backdrop-blur-xl px-8 py-4 ${inputBg}`}>
-        <div className={`flex items-end gap-3 rounded-2xl border px-4 py-3 focus-within:border-emerald-500/40 transition-all ${isLight ? "border-black/10 bg-white" : "border-white/10 bg-white/5"}`}>
-          <button className="text-zinc-500 hover:text-zinc-300 transition-colors mb-0.5"><Paperclip className="h-4 w-4" /></button>
-          <textarea ref={useRef<HTMLTextAreaElement>(null)} value={input} onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown} placeholder={t("chat_placeholder")} rows={1}
+      {/* ── Input area ─────────────────────────────────────────────────────── */}
+      <div className={`flex-shrink-0 border-t backdrop-blur-xl px-6 py-3 ${inputBg}`}>
+
+        {/* Attached files preview */}
+        <AnimatePresence>
+          {attachedFiles.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              className="flex flex-wrap gap-2 mb-3"
+            >
+              {attachedFiles.map((af, i) => (
+                <AttachmentChip
+                  key={i}
+                  file={af}
+                  isLight={isLight}
+                  onRemove={() => {
+                    if (af.previewUrl) URL.revokeObjectURL(af.previewUrl);
+                    setAttachedFiles((prev) => prev.filter((_, idx) => idx !== i));
+                  }}
+                />
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Input row */}
+        <div
+          className={`flex items-end gap-2 rounded-2xl border px-3 py-2.5 transition-all focus-within:border-emerald-500/50 ${
+            isLight ? "border-slate-200 bg-white" : "border-white/10 bg-white/5"
+          }`}
+        >
+          {/* Attach button */}
+          <button
+            title="Attach file (PDF, DOCX, CSV, image)"
+            onClick={() => fileInputRef.current?.click()}
+            className="flex-shrink-0 p-1.5 rounded-xl transition-colors hover:bg-purple-500/10 mb-0.5"
+            style={{ color: attachedFiles.length > 0 ? "#a855f7" : "var(--fg-subtle)" }}
+          >
+            <Paperclip className="h-4 w-4" />
+          </button>
+
+          {/* Hidden file input */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={ACCEPTED}
+            multiple
+            className="hidden"
+            onChange={(e) => { if (e.target.files) { addFiles(e.target.files); e.target.value = ""; } }}
+          />
+
+          {/* Text area */}
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={
+              attachedFiles.length > 0
+                ? (attachedFiles.some(f => f.status === "uploading")
+                    ? "Uploading…"
+                    : "Ask about the attached document…")
+                : t("chat_placeholder")
+            }
+            rows={1}
             disabled={isStreaming || isThinking}
-            className="flex-1 resize-none bg-transparent text-sm placeholder:text-zinc-500 focus:outline-none leading-relaxed max-h-32 disabled:opacity-50"
-            style={{ minHeight: "24px" }} />
-          <div className="flex items-center gap-2 mb-0.5">
-            <button className="text-zinc-500 hover:text-zinc-300 transition-colors"><Mic className="h-4 w-4" /></button>
-            <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => sendMessage()}
-              disabled={!input.trim() || isThinking || isStreaming}
-              className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity">
+            className="flex-1 resize-none bg-transparent text-sm focus:outline-none leading-relaxed max-h-28 disabled:opacity-50"
+            style={{ minHeight: "24px", color: "var(--fg)", caretColor: "var(--fg)" }}
+          />
+
+          {/* Right controls */}
+          <div className="flex items-center gap-1.5 mb-0.5 flex-shrink-0">
+            <button
+              title="Voice input"
+              className="p-1.5 rounded-xl transition-colors"
+              style={{ color: "var(--fg-subtle)" }}
+            >
+              <Mic className="h-4 w-4" />
+            </button>
+
+            <motion.button
+              whileHover={{ scale: canSend ? 1.05 : 1 }}
+              whileTap={{ scale: canSend ? 0.95 : 1 }}
+              onClick={() => sendMessage()}
+              disabled={!canSend}
+              title="Send"
+              className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+            >
               <Send className="h-3.5 w-3.5" />
             </motion.button>
           </div>
         </div>
-        <p className="text-center text-xs text-zinc-600 mt-2">
-          AI responses are for informational purposes only. Not financial advice.
+
+        {/* Footer hint */}
+        <p className="text-center text-[10px] mt-2" style={{ color: "var(--fg-subtle)" }}>
+          Attach PDF · DOCX · CSV · TXT · Images &nbsp;·&nbsp; AI responses are informational, not financial advice
         </p>
       </div>
     </div>