Update index.html

index.html

@@ -7,6 +7,11 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+<!-- PDF.js for PDF to Text Extraction -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<!-- Mammoth.js for Word (.docx) to Text Extraction -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
 <style>
@@ -23,7 +28,6 @@
   --font-mono: 'Geist Mono', monospace;
   --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
 }
-/* Fixed UI layout hiding issue using 100dvh */
 html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
 
 /* --- BACKGROUND --- */
@@ -74,9 +78,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .login-prompt-btn:hover { background: #333; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
 
 .settings{padding:20px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap: 20px;}
-.settings::-webkit-scrollbar{width:4px;}
-.settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
-
 .brand-box {background: #ffffff;border: 1px solid var(--border-light);border-radius: var(--radius-md);padding: 24px 16px;text-align: center;box-shadow: var(--shadow-sm);margin-top:auto;}
 .brand-box img {width: 70px; height: 70px; border-radius: 16px; object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
 .brand-box h3 {font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px;}
@@ -91,12 +92,11 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .model-badge{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;}
 .status-dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2px rgba(52,199,89,0.2);}
 
-/* Added min-height: 0 to ensure flexbox scrolling works properly */
 .messages{flex:1;overflow-y:auto;padding:30px 40px;display:flex;flex-direction:column;gap:24px;scroll-behavior:smooth;position:relative; min-height:0;}
 .messages::-webkit-scrollbar{width:6px;}
 .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
 
-/* Welcome Screen & Prompts */
+/* Welcome Screen */
 .welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;margin:auto;animation:fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;width:100%;max-width:650px;}
 @keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
 .welcome-logo{width:80px;height:80px;border-radius:24px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;border:1px solid var(--border-light);}
@@ -126,13 +126,11 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .msg.user .bubble{background:var(--text-main);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:var(--shadow-sm);}
 .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;}
 
-/* BOT ACTIONS */
 .msg-actions{display:flex;gap:8px;margin-top:4px;padding-left:12px;opacity:0.7;transition:opacity 0.2s;}
 .msg.bot:hover .msg-actions{opacity:1;}
 .action-btn{background:var(--bg-secondary);border:1px solid var(--border-light);color:var(--text-main);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;transition:all 0.2s;}
 .action-btn:hover{background:#e5e5ea;transform:translateY(-1px);}
 
-/* Reasoning / Thinking Box - Hidden completely as per request */
 .think-box {display: none;}
 
 /* Markdown inside bubble */
@@ -144,7 +142,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .bubble pre {background: #1d1d1f; color:#fff; padding:16px; border-radius:12px; overflow-x:auto;}
 .bubble pre code {background: transparent; color:#fff;} 
 
-/* Workspace Trigger Card in Chat */
 .ws-trigger-card {background: var(--bg-secondary);border: 1px solid var(--border-light);border-radius: 12px;padding: 16px;margin: 12px 0;display: flex;align-items: center;justify-content: space-between;box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);}
 .ws-trigger-info {display: flex;align-items: center;gap: 12px;}
 .ws-trigger-icon {width: 44px;height: 44px;border-radius: 10px;background: #fff;display: flex;align-items: center;justify-content: center;font-size: 22px;box-shadow: var(--shadow-sm);border: 1px solid var(--border-light);}
@@ -161,12 +158,11 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .typing span:nth-child(1){animation-delay:-0.32s;}.typing span:nth-child(2){animation-delay:-0.16s;}
 @keyframes bounce{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}}
 
-/* --- SCROLL TO BOTTOM BUTTON --- */
 .scroll-bottom-btn {position:absolute;bottom:120px;left:50%;width:44px;height:44px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-main);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index:20;}
 .scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
 .scroll-bottom-btn:hover {background:#fff;transform:translateX(-50%) translateY(-3px);box-shadow:var(--shadow-lg);}
 
-/* --- INPUT AREA (Fixed Position to Avoid Overlap) --- */
+/* --- INPUT AREA & ATTACHMENT MENU --- */
 .input-container{flex-shrink:0; padding:10px 40px 24px; background:var(--bg-color); border-top:1px solid var(--border-light); position:relative; z-index:20;}
 .input-wrap{display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s, border-color 0.3s;}
 .input-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 12px 40px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,153,51,0.1);}
@@ -183,10 +179,20 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--text-main);line-height:1.5;resize:none;max-height:150px;min-height:24px;padding:8px 0;}
 .chat-ta::placeholder{color:var(--text-muted);}
 
+/* GEMINI STYLE ATTACHMENT MENU */
+.attach-wrapper { position: relative; }
 .attach-btn{width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;position:relative;overflow:hidden;padding-bottom:4px;}
 .attach-btn:hover{background:rgba(0,0,0,0.04);color:var(--text-main);}
-.attach-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;}
 .attach-btn svg{width:20px;height:20px;}
+.attach-menu { position: absolute; bottom: 50px; left: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 4px; z-index: 100; min-width: 160px; transform: translateY(10px); opacity: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+.attach-menu.show { display: flex; transform: translateY(0); opacity: 1; }
+.attach-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-main); transition: background 0.2s; }
+.attach-menu-item:hover { background: rgba(0,0,0,0.05); }
+.attach-menu-item span.icon { font-size: 16px; }
+
+/* Hidden Inputs */
+.hidden-file-input { display: none; }
+
 .voice-btn.recording { color: #ff3b30; animation: pulseRecord 1.5s infinite; }
 @keyframes pulseRecord { 0% { background: rgba(255,59,48,0.1); } 50% { background: rgba(255,59,48,0.3); } 100% { background: rgba(255,59,48,0.1); } }
 
@@ -227,7 +233,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 .secondary-btn { width: 100%; padding: 12px; background: transparent; color: var(--text-muted); border: none; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; }
 .secondary-btn:hover { color: var(--text-main); }
 
-/* --- RESPONSIVE MOBILE ADAPTIVE (Perfect fit fix) --- */
 @media(max-width:850px){
   .sidebar{position:absolute;left:-280px;z-index:100;height:100%;transition:left 0.3s ease;}
   .sidebar.show{left:0;box-shadow:var(--shadow-lg);}
@@ -243,10 +248,8 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 </head>
 <body>
 
-<!-- TOAST NOTIFICATION -->
 <div id="toast-container"></div>
 
-<!-- GET STARTED WELCOME OVERLAY -->
 <div class="welcome-overlay" id="welcomeOverlay">
     <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo">
     <h1>Welcome to Arjun 2.O</h1>
@@ -254,13 +257,9 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
     <button class="start-btn" onclick="startArjunApp()">Get Started</button>
 </div>
 
-<div class="bg">
-  <div class="orb orb1"></div>
-  <div class="orb orb2"></div>
-</div>
+<div class="bg"><div class="orb orb1"></div><div class="orb orb2"></div></div>
 
 <div class="shell">
-  <!-- Sidebar -->
   <aside class="sidebar" id="sidebar">
     <div class="logo-area">
       <div class="logo-row">
@@ -273,7 +272,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
       <button class="close-sidebar-btn" onclick="toggleSidebar()">✕</button>
     </div>
     
-    <!-- AUTH BLOCK -->
     <div class="auth-block">
         <button id="loginPromptBtn" class="login-prompt-btn" onclick="openAuthModal()">🔒 Secure Login</button>
         <div id="userProfile" class="user-profile">
@@ -284,8 +282,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
     </div>
 
     <div class="settings">
-      <!-- Reasoning Toggle Button has been completely removed as requested -->
-
       <div class="brand-box">
           <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity">
           <h3>Arjun 2.O</h3>
@@ -295,7 +291,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
     </div>
   </aside>
 
-  <!-- Main Chat Area -->
   <div class="main-wrapper">
     <main class="chat-main" id="chatMain">
       <header class="chat-hdr">
@@ -304,18 +299,15 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
           <div class="status-dot"></div>
           Arjun Intelligence
         </div>
-        <div style="width:24px;"></div> <!-- Spacer -->
+        <div style="width:24px;"></div>
       </header>
 
       <div class="messages" id="msgs" onscroll="checkScroll()">
-        <!-- Inner Chat Welcome Screen -->
         <div class="welcome" id="welcome">
           <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="welcome-logo">
           <div class="welcome-title">Welcome, User!</div>
           <div class="welcome-sub">I am Arjun 2.O, developed by Abhay Kumar. I am equipped with advanced intelligence, workspace coding, and image generation.</div>
-          
           <div id="guestBadge" class="guest-badge">Guest Mode: <span id="guestCountDisplay">0</span>/3 Queries Used.</div>
-
           <div class="ex-grid">
             <div class="ex-card" onclick="sendEx('Write a python script for a simple HTTP server. Provide the code.')">
               <div class="ex-title">💻 Code Generation</div>
@@ -333,7 +325,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
         <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
       </button>
 
-      <!-- Input Area -->
       <div class="input-container">
         <div class="input-wrap">
           <div class="img-prev-inline" id="imgPrev">
@@ -346,13 +337,27 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
           </div>
 
           <div class="input-row">
-            <!-- Universal File Attach -->
-            <button class="attach-btn" title="Upload Image or Document">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
-              <input type="file" accept="*/*" onchange="handleFile(this)" id="fileInput">
-            </button>
             
-            <!-- Voice Input Mic (Fixed Punctuation) -->
+            <!-- GEMINI STYLE ATTACHMENT MENU -->
+            <div class="attach-wrapper">
+              <button class="attach-btn" id="attachToggleBtn" onclick="toggleAttachMenu()" title="Attach File">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
+              </button>
+              
+              <div class="attach-menu" id="attachMenu">
+                <div class="attach-menu-item" onclick="triggerInput('image')"><span class="icon">🖼️</span> Image</div>
+                <div class="attach-menu-item" onclick="triggerInput('video')"><span class="icon">🎥</span> Video</div>
+                <div class="attach-menu-item" onclick="triggerInput('audio')"><span class="icon">🎵</span> Audio</div>
+                <div class="attach-menu-item" onclick="triggerInput('document')"><span class="icon">📄</span> Document / Code</div>
+              </div>
+              
+              <!-- Hidden Inputs for strict validation -->
+              <input type="file" id="inp-image" class="hidden-file-input" accept="image/*" onchange="handleSpecificFile(this, 'image')">
+              <input type="file" id="inp-video" class="hidden-file-input" accept="video/*" onchange="handleSpecificFile(this, 'video')">
+              <input type="file" id="inp-audio" class="hidden-file-input" accept="audio/*" onchange="handleSpecificFile(this, 'audio')">
+              <input type="file" id="inp-document" class="hidden-file-input" accept=".pdf,.doc,.docx,.txt,.md,.csv,.json,.py,.js,.html,.css,.cpp,.c" onchange="handleSpecificFile(this, 'document')">
+            </div>
+            
             <button class="attach-btn voice-btn" id="voiceBtn" onclick="toggleVoice()" title="Voice Input">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
             </button>
@@ -368,7 +373,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
       </div>
     </main>
 
-    <!-- Workspace Panel -->
     <aside class="workspace" id="workspace">
       <div class="ws-hdr">
         <div class="ws-title"><span>💻</span><span id="wsTitleText">Generated Code</span></div>
@@ -384,18 +388,14 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
   </div>
 </div>
 
-<!-- AUTH MODAL -->
 <div class="modal-overlay" id="authModal">
   <div class="modal-card">
     <button class="close-modal" onclick="closeAuthModal()">✕</button>
     <div class="auth-header"><h2>Arjun Network</h2></div>
-    
     <div class="auth-tabs">
       <div class="auth-tab active" id="tab-login" onclick="switchAuthTab('login')">Login</div>
       <div class="auth-tab" id="tab-register" onclick="switchAuthTab('register')">Register</div>
     </div>
-
-    <!-- Login Form -->
     <div id="flow-login">
       <div class="auth-step active" id="log-step-1">
         <div class="input-group"><input type="email" id="logEmail" placeholder="Registered Email"></div>
@@ -407,8 +407,6 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
         <button class="secondary-btn" onclick="switchAuthStep('log-step-2', 'log-step-1')">Back</button>
       </div>
     </div>
-
-    <!-- Register Form -->
     <div id="flow-register" style="display:none;">
       <div class="auth-step active" id="reg-step-1">
         <div class="input-group"><input type="text" id="regName" placeholder="Full Name"></div>
@@ -425,38 +423,24 @@ html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--t
 </div>
 
 <script>
-// --- GLOBAL VARIABLES & CONFIG ---
+// --- PDF.JS INITIALIZATION ---
+pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+
 const GAS_URL = "https://script.google.com/macros/s/AKfycbzTsXGoVh97JjtFAAG825GF4WUZqf7FDB3Zbxyf0nrLXt_1HjJSSqA829UcdoamRPvg0A/exec";
 const LOGO_URL = "https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png";
 
 let currentUser = localStorage.getItem('arjun_user');
 let guestCount = parseInt(localStorage.getItem('arjun_guest') || '0');
-window.isStreamingGlobalFlag = false; // FLAG TO PREVENT PREMATURE WORKSPACE BUTTONS
-
-const S = {
-  history: [],
-  pending: null,
-  busy: false,
-  isUserScrolling: false,
-  codeBlocks: [],
-  currentWorkspaceId: null
-};
+window.isStreamingGlobalFlag = false;
 
-// --- INITIALIZATION ---
-document.addEventListener('DOMContentLoaded', () => {
-    if(!localStorage.getItem('arjun_welcome_seen')) {
-        document.getElementById('welcomeOverlay').style.display = 'flex';
-    } else {
-        document.getElementById('welcomeOverlay').style.display = 'none';
-    }
+const S = { history: [], pending: null, busy: false, isUserScrolling: false, codeBlocks: [], currentWorkspaceId: null };
 
+document.addEventListener('DOMContentLoaded', () => {
+    if(!localStorage.getItem('arjun_welcome_seen')) { document.getElementById('welcomeOverlay').style.display = 'flex'; } 
+    else { document.getElementById('welcomeOverlay').style.display = 'none'; }
     updateAuthUI();
-    if(currentUser) {
-        fetchHistoryFromGAS();
-    } else {
-        document.getElementById('guestBadge').style.display = 'inline-block';
-        document.getElementById('guestCountDisplay').innerText = guestCount;
-    }
+    if(currentUser) { fetchHistoryFromGAS(); } 
+    else { document.getElementById('guestBadge').style.display = 'inline-block'; document.getElementById('guestCountDisplay').innerText = guestCount; }
 });
 
 function startArjunApp() {
@@ -467,44 +451,33 @@ function startArjunApp() {
 }
 
 function toggleSidebar() { document.getElementById('sidebar').classList.toggle('show'); }
-
 function showToast(msg) {
     const container = document.getElementById('toast-container');
-    const t = document.createElement('div'); t.className = 'toast';
-    t.innerText = msg;
-    container.appendChild(t);
-    setTimeout(() => t.remove(), 3000);
+    const t = document.createElement('div'); t.className = 'toast'; t.innerText = msg;
+    container.appendChild(t); setTimeout(() => t.remove(), 3000);
 }
 
-// --- VOICE RECOGNITION (SMART PUNCTUATION LOGIC) ---
+// --- VOICE RECOGNITION (SMART HINDI/ENGLISH) ---
 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-let recognition = null;
-let isRecording = false;
+let recognition = null; let isRecording = false;
 
 if (SpeechRecognition) {
     recognition = new SpeechRecognition();
-    recognition.continuous = false; // Auto stops when paused
+    recognition.continuous = false; 
     recognition.interimResults = false;
     
-    // UPDATED LANGUAGE LOGIC: English India supports Hinglish and English effectively
-    // It will prevent strict Hindi character conversion when you speak English.
-    recognition.lang = 'en-IN'; 
+    // Set to 'hi-IN'. Google will type pure Hindi in Devanagari and English words in English.
+    recognition.lang = 'hi-IN'; 
     
     recognition.onstart = () => { isRecording = true; document.getElementById('voiceBtn').classList.add('recording'); };
     recognition.onresult = (event) => {
         let transcript = '';
-        for (let i = event.resultIndex; i < event.results.length; ++i) { 
-            transcript += event.results[i][0].transcript; 
-        }
-        
-        // Smart Punctuation & Capitalization Fix
+        for (let i = event.resultIndex; i < event.results.length; ++i) transcript += event.results[i][0].transcript; 
         transcript = transcript.trim();
         if(transcript.length > 0) {
             transcript = transcript.charAt(0).toUpperCase() + transcript.slice(1);
-            if (!/[.!?।]$/.test(transcript)) transcript += '.';
-            transcript += ' ';
+            if (!/[.!?।]$/.test(transcript)) transcript += '.'; transcript += ' ';
         }
-        
         const inp = document.getElementById('chatInput');
         inp.value = (inp.value + ' ' + transcript).trim(); 
         autoGrow(inp);
@@ -517,239 +490,138 @@ function toggleVoice() {
     if(isRecording) recognition.stop(); else recognition.start();
 }
 
-
-// --- AUTHENTICATION (GAS INTEGRATION) ---
-function updateAuthUI() {
-    if (currentUser) {
-        document.getElementById('loginPromptBtn').style.display = 'none';
-        document.getElementById('userProfile').style.display = 'flex';
-        document.getElementById('uEmail').innerText = currentUser;
-        document.getElementById('uAvatar').innerText = currentUser.charAt(0).toUpperCase();
-        document.getElementById('guestBadge').style.display = 'none';
-    } else {
-        document.getElementById('loginPromptBtn').style.display = 'flex';
-        document.getElementById('userProfile').style.display = 'none';
-    }
-}
-
+// --- AUTH & HISTORY FUNCTIONS (UNCHANGED) ---
+function updateAuthUI() { /*...*/ if (currentUser) { document.getElementById('loginPromptBtn').style.display = 'none'; document.getElementById('userProfile').style.display = 'flex'; document.getElementById('uEmail').innerText = currentUser; document.getElementById('uAvatar').innerText = currentUser.charAt(0).toUpperCase(); document.getElementById('guestBadge').style.display = 'none'; } else { document.getElementById('loginPromptBtn').style.display = 'flex'; document.getElementById('userProfile').style.display = 'none'; } }
 function openAuthModal() { document.getElementById('authModal').style.display = 'flex'; }
 function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; }
-
-function switchAuthTab(tab) {
-    document.querySelectorAll('.auth-tab').forEach(e => e.classList.remove('active'));
-    document.getElementById(`tab-${tab}`).classList.add('active');
-    document.getElementById('flow-login').style.display = tab === 'login' ? 'block' : 'none';
-    document.getElementById('flow-register').style.display = tab === 'register' ? 'block' : 'none';
+function switchAuthTab(tab) { document.querySelectorAll('.auth-tab').forEach(e => e.classList.remove('active')); document.getElementById(`tab-${tab}`).classList.add('active'); document.getElementById('flow-login').style.display = tab === 'login' ? 'block' : 'none'; document.getElementById('flow-register').style.display = tab === 'register' ? 'block' : 'none'; }
+function switchAuthStep(curr, next) { document.getElementById(curr).classList.remove('active'); document.getElementById(next).classList.add('active'); }
+async function processAuth(action) { /*...*/ let payload = { action }; let btnId = ''; if (action === 'register_send_otp') { payload.name = document.getElementById('regName').value.trim(); payload.email = document.getElementById('regEmail').value.trim(); payload.phone = "0000000000"; payload.organization = "Arjun Compound"; if(!payload.email || !payload.name) return showToast("Name and Email required."); btnId = 'btn-reg-otp'; } else if (action === 'login_send_otp') { payload.email = document.getElementById('logEmail').value.trim(); if(!payload.email) return showToast("Enter email first."); btnId = 'btn-log-otp'; } else if (action === 'register_verify' || action === 'login_verify') { payload.email = document.getElementById(action === 'register_verify' ? 'regEmail' : 'logEmail').value.trim(); payload.otp = document.getElementById(action === 'register_verify' ? 'regOTP' : 'logOTP').value.trim(); if(!payload.otp) return showToast("Enter OTP!"); btnId = action === 'register_verify' ? 'btn-reg-verify' : 'btn-log-verify'; } const btn = document.getElementById(btnId); const ogText = btn.innerHTML; btn.disabled = true; btn.innerText = 'Processing...'; try { const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify(payload) }); const data = await res.json(); if (data.status === 'success') { showToast(data.message); if (action === 'register_send_otp') switchAuthStep('reg-step-1', 'reg-step-2'); else if (action === 'login_send_otp') switchAuthStep('log-step-1', 'log-step-2'); else if (action === 'register_verify' || action === 'login_verify') { currentUser = payload.email; localStorage.setItem('arjun_user', currentUser); closeAuthModal(); updateAuthUI(); fetchHistoryFromGAS(); } } else showToast(data.message); } catch (e) { showToast("Network Error."); } btn.disabled = false; btn.innerHTML = ogText; }
+function logout() { localStorage.removeItem('arjun_user'); location.reload(); }
+async function clearMemory() { if(currentUser) { showToast("Clearing Cloud History..."); await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "delete_history", email: currentUser }) }); } location.reload(); }
+async function fetchHistoryFromGAS() { const m = document.getElementById('msgs'); document.getElementById('welcome').style.display = 'none'; m.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Syncing Secure Data...</div>'; try { const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "get_history", email: currentUser }) }); const data = await res.json(); m.innerHTML = ''; if (data.status === 'success' && data.historyJSON !== "[]") { S.history = JSON.parse(data.historyJSON); S.history.forEach(msg => { if(msg.role === 'user') appendUserDOM(msg.content, msg.badge); else { window.isStreamingGlobalFlag = false; appendBotDOM(msg.content, true); } }); setTimeout(forceScrollDown, 100); } else { document.getElementById('welcome').style.display = 'flex'; } } catch(e) { m.innerHTML = ''; document.getElementById('welcome').style.display = 'flex'; } }
+function syncHistory() { if(currentUser) { fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "save_history", email: currentUser, historyJSON: JSON.stringify(S.history) }) }); } }
+
+// --- ADVANCED MULTI-FILE & CONVERTER LOGIC ---
+function toggleAttachMenu() {
+    const menu = document.getElementById('attachMenu');
+    menu.classList.toggle('show');
 }
-function switchAuthStep(curr, next) {
-    document.getElementById(curr).classList.remove('active');
-    document.getElementById(next).classList.add('active');
+// Hide menu when clicked outside
+document.addEventListener('click', function(event) {
+    const wrapper = document.querySelector('.attach-wrapper');
+    if (!wrapper.contains(event.target)) { document.getElementById('attachMenu').classList.remove('show'); }
+});
+
+function triggerInput(type) {
+    document.getElementById('attachMenu').classList.remove('show');
+    document.getElementById('inp-' + type).click();
 }
 
-async function processAuth(action) {
-    let payload = { action }; let btnId = '';
+async function handleSpecificFile(input, expectedType) {
+    const file = input.files[0]; if(!file) return;
+    const fileName = file.name.toLowerCase();
+    const fileMime = file.type;
+    
+    // 1. STRICT VALIDATION & INVALID FORMAT TOAST
+    if (expectedType === 'image' && !fileMime.startsWith('image/')) { showToast("Invalid Format! Please select an Image file."); input.value=''; return; }
+    if (expectedType === 'video' && !fileMime.startsWith('video/')) { showToast("Invalid Format! Please select a Video file."); input.value=''; return; }
+    if (expectedType === 'audio' && !fileMime.startsWith('audio/')) { showToast("Invalid Format! Please select an Audio file."); input.value=''; return; }
+    
+    document.getElementById('imgThumb').style.display = 'none';
+    document.getElementById('fileIcon').style.display = 'none';
+    document.getElementById('imgName').textContent = file.name;
+    document.getElementById('imgPrev').classList.add('show');
     
-    if (action === 'register_send_otp') {
-        payload.name = document.getElementById('regName').value.trim();
-        payload.email = document.getElementById('regEmail').value.trim();
-        payload.phone = "0000000000"; payload.organization = "Arjun Compound";
-        if(!payload.email || !payload.name) return showToast("Name and Email required."); 
-        btnId = 'btn-reg-otp';
-    } else if (action === 'login_send_otp') {
-        payload.email = document.getElementById('logEmail').value.trim();
-        if(!payload.email) return showToast("Enter email first."); 
-        btnId = 'btn-log-otp';
-    } else if (action === 'register_verify' || action === 'login_verify') {
-        payload.email = document.getElementById(action === 'register_verify' ? 'regEmail' : 'logEmail').value.trim();
-        payload.otp = document.getElementById(action === 'register_verify' ? 'regOTP' : 'logOTP').value.trim();
-        if(!payload.otp) return showToast("Enter OTP!"); 
-        btnId = action === 'register_verify' ? 'btn-reg-verify' : 'btn-log-verify';
+    showToast(`Processing ${file.name}...`);
+    
+    const reader = new FileReader();
+
+    // 2. IMAGE, VIDEO, AUDIO (Send as Base64 Media to Model)
+    if (expectedType === 'image') {
+        reader.onload = e => {
+            S.pending = { type: 'image', data: e.target.result.split(',')[1], name: file.name };
+            document.getElementById('imgThumb').src = e.target.result;
+            document.getElementById('imgThumb').style.display = 'flex';
+        };
+        reader.readAsDataURL(file);
+    } 
+    else if (expectedType === 'video' || expectedType === 'audio') {
+        reader.onload = e => {
+            S.pending = { type: expectedType, data: e.target.result.split(',')[1], name: file.name };
+            document.getElementById('fileIcon').textContent = expectedType === 'video' ? '🎥' : '🎵';
+            document.getElementById('fileIcon').style.display = 'flex';
+        };
+        reader.readAsDataURL(file);
     }
-
-    const btn = document.getElementById(btnId); const ogText = btn.innerHTML;
-    btn.disabled = true; btn.innerText = 'Processing...';
-
-    try {
-        const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify(payload) });
-        const data = await res.json();
+    // 3. DOCUMENT / CODE (Convert everything to TEXT before sending to Model)
+    else if (expectedType === 'document') {
+        document.getElementById('fileIcon').textContent = '📄';
+        document.getElementById('fileIcon').style.display = 'flex';
         
-        if (data.status === 'success') {
-            showToast(data.message);
-            if (action === 'register_send_otp') switchAuthStep('reg-step-1', 'reg-step-2');
-            else if (action === 'login_send_otp') switchAuthStep('log-step-1', 'log-step-2');
-            else if (action === 'register_verify' || action === 'login_verify') {
-                currentUser = payload.email; 
-                localStorage.setItem('arjun_user', currentUser); 
-                closeAuthModal(); updateAuthUI(); fetchHistoryFromGAS();
-            }
-        } else showToast(data.message);
-    } catch (e) { showToast("Network Error."); }
-    btn.disabled = false; btn.innerHTML = ogText;
-}
-
-function logout() { localStorage.removeItem('arjun_user'); location.reload(); }
-
-async function clearMemory() {
-    if(currentUser) {
-        showToast("Clearing Cloud History...");
-        await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "delete_history", email: currentUser }) });
-    }
-    location.reload();
-}
-
-// --- GAS HISTORY SYNC ---
-async function fetchHistoryFromGAS() {
-    const m = document.getElementById('msgs');
-    document.getElementById('welcome').style.display = 'none';
-    m.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted);">Syncing Secure Data...</div>';
-    
-    try {
-        const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "get_history", email: currentUser }) });
-        const data = await res.json();
-        m.innerHTML = '';
-        if (data.status === 'success' && data.historyJSON !== "[]") {
-            S.history = JSON.parse(data.historyJSON);
-            S.history.forEach(msg => {
-                if(msg.role === 'user') appendUserDOM(msg.content, msg.badge);
-                else {
-                    window.isStreamingGlobalFlag = false; 
-                    appendBotDOM(msg.content, true);
-                }
-            });
-            setTimeout(forceScrollDown, 100);
-        } else {
-            document.getElementById('welcome').style.display = 'flex';
+        // A. Handle PDF -> Text via pdf.js
+        if (fileName.endsWith('.pdf')) {
+            reader.onload = async function() {
+                try {
+                    const typedarray = new Uint8Array(this.result);
+                    const pdf = await pdfjsLib.getDocument(typedarray).promise;
+                    let fullText = "";
+                    for (let i = 1; i <= pdf.numPages; i++) {
+                        const page = await pdf.getPage(i);
+                        const textContent = await page.getTextContent();
+                        fullText += textContent.items.map(s => s.str).join(' ') + "\n";
+                    }
+                    S.pending = { type: 'text', data: fullText.trim() || "No text found in PDF.", name: file.name };
+                    showToast("PDF converted to text successfully!");
+                } catch (e) { showToast("Error parsing PDF."); removeImg(); }
+            };
+            reader.readAsArrayBuffer(file);
+        }
+        // B. Handle Word (.docx) -> Text via Mammoth.js
+        else if (fileName.endsWith('.docx')) {
+            reader.onload = async function() {
+                try {
+                    const arrayBuffer = this.result;
+                    const result = await mammoth.extractRawText({arrayBuffer: arrayBuffer});
+                    S.pending = { type: 'text', data: result.value.trim() || "No text found in DOCX.", name: file.name };
+                    showToast("Word document converted to text!");
+                } catch(e) { showToast("Error parsing Word doc."); removeImg(); }
+            };
+            reader.readAsArrayBuffer(file);
+        }
+        // C. Handle HTML/Code/Text (.py, .js, .html, .csv etc) -> Text naturally
+        else {
+            reader.onload = e => {
+                S.pending = { type: 'text', data: e.target.result, name: file.name };
+                showToast("Code/Text file attached!");
+            };
+            reader.readAsText(file);
         }
-    } catch(e) { m.innerHTML = ''; document.getElementById('welcome').style.display = 'flex'; }
-}
-
-function syncHistory() {
-    if(currentUser) {
-        fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "save_history", email: currentUser, historyJSON: JSON.stringify(S.history) }) });
     }
+    input.value = ''; // reset
 }
 
-// --- MULTI-FILE HANDLING (Image + Text/Code/Data) ---
-function handleFile(input){
-  const file = input.files[0]; if(!file) return;
-  const reader = new FileReader();
-  
-  document.getElementById('imgThumb').style.display = 'none';
-  document.getElementById('fileIcon').style.display = 'none';
-  document.getElementById('imgName').textContent = file.name;
-  document.getElementById('imgPrev').classList.add('show');
-
-  // If Image
-  if (file.type.startsWith('image/')) {
-      reader.onload = e => {
-          const base64Data = e.target.result.split(',')[1];
-          S.pending = { type: 'image', data: base64Data, name: file.name };
-          document.getElementById('imgThumb').src = e.target.result;
-          document.getElementById('imgThumb').style.display = 'flex';
-      };
-      reader.readAsDataURL(file);
-  } 
-  // If Text or Code File
-  else if (file.type.match(/(text|json|csv|xml)/) || file.name.match(/\.(txt|md|csv|json|py|js|html|css|cpp|c)$/i)) {
-      reader.onload = e => {
-          S.pending = { type: 'text', data: e.target.result, name: file.name };
-          document.getElementById('fileIcon').style.display = 'flex';
-      };
-      reader.readAsText(file);
-  } 
-  // Other Fallback (PDF, etc)
-  else {
-      reader.onload = e => {
-          const base64Data = e.target.result.split(',')[1];
-          S.pending = { type: 'document', data: base64Data, name: file.name };
-          document.getElementById('fileIcon').style.display = 'flex';
-      };
-      reader.readAsDataURL(file);
-  }
-}
-function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
+function removeImg(){ S.pending=null; document.getElementById('imgPrev').classList.remove('show'); }
 
 // --- UI INTERACTIONS ---
 function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
 function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';}
-
-function checkScroll() {
-  const m = document.getElementById('msgs');
-  const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 80;
-  S.isUserScrolling = !isAtBottom;
-  const btn = document.getElementById('scrollBtn');
-  if(S.isUserScrolling) btn.classList.add('show');
-  else btn.classList.remove('show');
-}
-function forceScrollDown(){
-  const m=document.getElementById('msgs');
-  m.scrollTo({top: m.scrollHeight, behavior: 'smooth'});
-  S.isUserScrolling = false;
-  document.getElementById('scrollBtn').classList.remove('show');
-}
-function autoScroll() {
-  if(!S.isUserScrolling) {
-    const m=document.getElementById('msgs');
-    m.scrollTop = m.scrollHeight;
-  }
-}
-
-// --- COPY UTILS ---
-function copyText(btn, text) {
-  navigator.clipboard.writeText(text);
-  const orig = btn.innerHTML;
-  btn.innerHTML = "✓ Copied";
-  setTimeout(() => btn.innerHTML = orig, 2000);
-}
-function copyWorkspaceCode() {
-  if(S.currentWorkspaceId !== null) {
-    navigator.clipboard.writeText(S.codeBlocks[S.currentWorkspaceId].code);
-    const btn = document.getElementById('wsCopyBtn');
-    const orig = btn.innerHTML;
-    btn.innerHTML = "✓ Copied";
-    setTimeout(() => btn.innerHTML = orig, 2000);
-  }
-}
-
-// --- WORKSPACE LOGIC (MARKDOWN RENDERER FIXED FOR STREAMING) ---
-function openWorkspace(id) {
-  S.currentWorkspaceId = id;
-  const block = S.codeBlocks[id];
-  document.getElementById('wsTitleText').textContent = block.lang ? `Generated ${block.lang.toUpperCase()}` : "Generated Code";
-  const codeBlock = document.getElementById('wsCodeBlock');
-  codeBlock.className = `hljs language-${block.lang || 'plaintext'}`;
-  codeBlock.textContent = block.code;
-  hljs.highlightElement(codeBlock);
-  document.getElementById('workspace').classList.add('open');
-  if(window.innerWidth <= 850) { document.getElementById('sidebar').classList.remove('show'); }
-}
+function checkScroll() { const m = document.getElementById('msgs'); const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 80; S.isUserScrolling = !isAtBottom; const btn = document.getElementById('scrollBtn'); if(S.isUserScrolling) btn.classList.add('show'); else btn.classList.remove('show'); }
+function forceScrollDown(){ const m=document.getElementById('msgs'); m.scrollTo({top: m.scrollHeight, behavior: 'smooth'}); S.isUserScrolling = false; document.getElementById('scrollBtn').classList.remove('show'); }
+function autoScroll() { if(!S.isUserScrolling) { const m=document.getElementById('msgs'); m.scrollTop = m.scrollHeight; } }
+function copyText(btn, text) { navigator.clipboard.writeText(text); const orig = btn.innerHTML; btn.innerHTML = "✓ Copied"; setTimeout(() => btn.innerHTML = orig, 2000); }
+function copyWorkspaceCode() { if(S.currentWorkspaceId !== null) { navigator.clipboard.writeText(S.codeBlocks[S.currentWorkspaceId].code); const btn = document.getElementById('wsCopyBtn'); const orig = btn.innerHTML; btn.innerHTML = "✓ Copied"; setTimeout(() => btn.innerHTML = orig, 2000); } }
+
+// --- WORKSPACE LOGIC ---
+function openWorkspace(id) { S.currentWorkspaceId = id; const block = S.codeBlocks[id]; document.getElementById('wsTitleText').textContent = block.lang ? `Generated ${block.lang.toUpperCase()}` : "Generated Code"; const codeBlock = document.getElementById('wsCodeBlock'); codeBlock.className = `hljs language-${block.lang || 'plaintext'}`; codeBlock.textContent = block.code; hljs.highlightElement(codeBlock); document.getElementById('workspace').classList.add('open'); if(window.innerWidth <= 850) { document.getElementById('sidebar').classList.remove('show'); } }
 function closeWorkspace() { document.getElementById('workspace').classList.remove('open'); }
-
 const renderer = new marked.Renderer();
 renderer.code = function(token) {
   const codeText = typeof token === 'string' ? token : (token.text || '');
   const language = typeof token === 'string' ? arguments[1] : (token.lang || '');
-  
-  // FIXED: DO NOT SHOW WORKSPACE BUTTON WHILE STREAMING
-  if (window.isStreamingGlobalFlag) {
-      return `<pre><code class="language-${language}">${codeText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
-  }
-
-  const id = S.codeBlocks.length;
-  S.codeBlocks.push({ code: codeText, lang: language });
-  
-  return `
-    <div class="ws-trigger-card">
-      <div class="ws-trigger-info">
-        <div class="ws-trigger-icon">💻</div>
-        <div class="ws-trigger-text">
-          <h4>Code Generated</h4>
-          <p>${language || 'Snippet'}</p>
-        </div>
-      </div>
-      <button class="ws-btn" onclick="openWorkspace(${id})">View in Workspace</button>
-    </div>
-  `;
+  if (window.isStreamingGlobalFlag) { return `<pre><code class="language-${language}">${codeText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`; }
+  const id = S.codeBlocks.length; S.codeBlocks.push({ code: codeText, lang: language });
+  return `<div class="ws-trigger-card"><div class="ws-trigger-info"><div class="ws-trigger-icon">💻</div><div class="ws-trigger-text"><h4>Code Generated</h4><p>${language || 'Snippet'}</p></div></div><button class="ws-btn" onclick="openWorkspace(${id})">View in Workspace</button></div>`;
 };
 marked.use({ renderer });
 
@@ -766,7 +638,6 @@ async function sendMsg(){
   const inp=document.getElementById('chatInput');
   const msg=inp.value.trim();if(!msg && !S.pending)return;
 
-  // Guest Logic
   if (!currentUser) {
     if (guestCount >= 3) { openAuthModal(); return showToast("Guest limit reached. Please Login."); }
     guestCount++; localStorage.setItem('arjun_guest', guestCount.toString());
@@ -784,18 +655,17 @@ async function sendMsg(){
   let attachments = [];
   let badge = null;
 
-  // Multi-File Extraction Logic
   if(S.pending) {
       if(S.pending.type === 'text') {
-          backendPayloadMsg = `[User attached file: ${S.pending.name}]\nFile Content:\n${S.pending.data}\n\nUser Message: ${msg}`;
+          // Send Extracted Code/PDF text
+          backendPayloadMsg = `[Attached File Data: ${S.pending.name}]\n${S.pending.data}\n\nUser Question: ${msg}`;
           badge = '📄 '+S.pending.name;
-      } else if(S.pending.type === 'image') {
-          attachments.push(S.pending);
-          badge = '🖼️ '+S.pending.name;
       } else {
-          badge = '📎 '+S.pending.name;
+          // Send raw media data for Image, Audio, Video
+          attachments.push({ type: S.pending.type, data: S.pending.data, name: S.pending.name });
+          const icon = S.pending.type === 'video' ? '🎥 ' : (S.pending.type === 'audio' ? '🎵 ' : '🖼️ ');
+          badge = icon + S.pending.name;
       }
-      
       appendUserDOM(msg || '[File Attached]', badge);
       S.history.push({role: 'user', content: backendPayloadMsg, badge: badge});
   } else {
@@ -803,15 +673,13 @@ async function sendMsg(){
       S.history.push({role: 'user', content: msg});
   }
   
-  removeImg();
-  syncHistory();
+  removeImg(); syncHistory();
 
   const botDiv = document.createElement('div');botDiv.className='msg bot';
   botDiv.innerHTML=`<div class="avatar"><img src="${LOGO_URL}"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`;
   document.getElementById('msgs').appendChild(botDiv);
   forceScrollDown();
 
-  // STRICT BILINGUAL PROMPT ADDED
   const sysPrompt = `You are Arjun 2.O, a state-of-the-art AI assistant developed by Abhay Kumar.
   LANGUAGE PROTOCOL: You are fully bilingual. You MUST write and respond fluently in BOTH English and Hindi.
   1. If the user asks in English, reply entirely in English.
@@ -826,11 +694,7 @@ async function sendMsg(){
   Choose the best model based on the prompt. Example: if user says anime, use flux-anime.
   Always include this markdown tag when image generation is requested.`;
   
-  // Clean history for backend API compatibility
-  const cleanHistory = S.history.slice(0, -1).map(item => ({
-      role: item.role,
-      content: item.content
-  }));
+  const cleanHistory = S.history.slice(0, -1).map(item => ({ role: item.role, content: item.content }));
 
   const payload = {
       message: backendPayloadMsg,
@@ -842,26 +706,16 @@ async function sendMsg(){
   };
 
   try{
-    const res = await fetch('/api/chat', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify(payload)
-    });
-
+    const res = await fetch('/api/chat', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) });
     if (!res.ok) throw new Error("Server error");
-
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
+    const reader = res.body.getReader(); const decoder = new TextDecoder();
     let accumulatedText = "";
-    
-    window.isStreamingGlobalFlag = true; // PREVENTS WORKSPACE BUTTON FROM SPAWNING EARLY
-
+    window.isStreamingGlobalFlag = true; 
     while (true) {
         const { done, value } = await reader.read();
         if (done) break;
         const chunk = decoder.decode(value, {stream: true});
         const lines = chunk.split('\n');
-        
         for (let line of lines) {
             if (line.startsWith('data: ')) {
                 const dataStr = line.substring(6);
@@ -870,65 +724,24 @@ async function sendMsg(){
                     const dataObj = JSON.parse(dataStr);
                     if (dataObj.choices && dataObj.choices[0].delta.content) {
                         accumulatedText += dataObj.choices[0].delta.content;
-                        renderBotText(botDiv, accumulatedText, true);
-                        autoScroll();
+                        renderBotText(botDiv, accumulatedText, true); autoScroll();
                     }
                 } catch (e) { }
             }
         }
     }
-    
-    // STREAMING DONE - ALLOW WORKSPACE BUTTON CREATION
     window.isStreamingGlobalFlag = false; 
     renderBotText(botDiv, accumulatedText, false);
-    
     S.history.push({role: 'bot', content: accumulatedText});
     syncHistory();
-
-  }catch(err){
-    window.isStreamingGlobalFlag = false;
-    renderBotText(botDiv,`**Error:** Server communication failed.`, false);
-  }
-
+  }catch(err){ window.isStreamingGlobalFlag = false; renderBotText(botDiv,`**Error:** Server communication failed.`, false); }
   S.busy=false; document.getElementById('sendBtn').disabled=false; autoScroll();
 }
 
 function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();}
-
-function appendUserDOM(text, badgeText){
-  let bHtml = badgeText ? `<div style="font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;">${esc(badgeText)}</div>` : '';
-  const el=document.createElement('div');el.className='msg user';
-  el.innerHTML=`<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`;
-  document.getElementById('msgs').appendChild(el);
-}
-
-function appendBotDOM(content, isHistoryLoading=false) {
-  const el=document.createElement('div');el.className='msg bot';
-  el.innerHTML=`<div class="avatar"><img src="${LOGO_URL}"></div><div class="body"><div class="bubble"></div></div>`;
-  document.getElementById('msgs').appendChild(el);
-  renderBotText(el, content, !isHistoryLoading);
-}
-
-function renderBotText(el, raw, isStreaming) {
-  const b = el.querySelector('.bubble');
-  const { mainText, thinkText } = parseThinking(raw);
-  let html = '';
-  
-  // Note: Reasoning Box display is completely disabled by CSS (.think-box {display:none})
-  if (thinkText) { html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`; }
-  
-  html += marked.parse(mainText);
-  if(isStreaming) { html += '<span class="blinking-cursor"></span>'; }
-  b.innerHTML = html;
-  
-  let actionsDiv = el.querySelector('.msg-actions');
-  if(!isStreaming && !actionsDiv && mainText.trim().length > 0) {
-      const cleanRaw = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n');
-      const actionsHTML = `<div class="msg-actions"><button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy Text</button></div>`;
-      el.querySelector('.body').insertAdjacentHTML('beforeend', actionsHTML);
-  }
-}
-
+function appendUserDOM(text, badgeText){ let bHtml = badgeText ? `<div style="font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;">${esc(badgeText)}</div>` : ''; const el=document.createElement('div');el.className='msg user'; el.innerHTML=`<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`; document.getElementById('msgs').appendChild(el); }
+function appendBotDOM(content, isHistoryLoading=false) { const el=document.createElement('div');el.className='msg bot'; el.innerHTML=`<div class="avatar"><img src="${LOGO_URL}"></div><div class="body"><div class="bubble"></div></div>`; document.getElementById('msgs').appendChild(el); renderBotText(el, content, !isHistoryLoading); }
+function renderBotText(el, raw, isStreaming) { const b = el.querySelector('.bubble'); const { mainText, thinkText } = parseThinking(raw); let html = ''; if (thinkText) { html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`; } html += marked.parse(mainText); if(isStreaming) { html += '<span class="blinking-cursor"></span>'; } b.innerHTML = html; let actionsDiv = el.querySelector('.msg-actions'); if(!isStreaming && !actionsDiv && mainText.trim().length > 0) { const cleanRaw = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n'); const actionsHTML = `<div class="msg-actions"><button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy Text</button></div>`; el.querySelector('.body').insertAdjacentHTML('beforeend', actionsHTML); } }
 function esc(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
 </script>
 </body>