Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Vedika commited on May 23

Commit

1be59e6

verified ·

1 Parent(s): 6c86393

Update index.html

Browse files

Files changed (1) hide show

index.html +698 -476

index.html CHANGED Viewed

@@ -1,356 +1,502 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Arjun Compound | Advanced AI</title>
-    <!-- Fonts & Icons -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Markdown & Syntax Highlighting -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <style>
-        /* --- CORE VARIABLES --- */
-        :root {
-            --bg-main: #F5F5F7; --bg-panel: #FFFFFF;
-            --text-dark: #1D1D1F; --text-muted: #86868B;
-            --accent-blue: #007AFF; --accent-hover: #0056b3;
-            --danger: #FF3B30; --success: #34C759;
-            --border-light: rgba(0,0,0,0.08); --border-focus: rgba(0, 122, 255, 0.3);
-            --shadow-sm: 0 4px 12px rgba(0,0,0,0.05); --shadow-md: 0 12px 32px rgba(0,0,0,0.08);
-            --font-sans: 'Plus Jakarta Sans', sans-serif; --font-mono: 'Fira Code', monospace;
-        }
-        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
-        body { font-family: var(--font-sans); background: var(--bg-main); color: var(--text-dark); height: 100dvh; width: 100vw; overflow: hidden; display: flex; }
-        /* --- TOAST NOTIFICATIONS --- */
-        #toast-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
-        .toast { background: var(--text-dark); color: #fff; padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); animation: slideDown 0.4s ease; display: flex; align-items: center; gap: 10px; }
-        @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
-        /* --- LAYOUT SHELL --- */
-        .app-shell { display: flex; width: 100%; height: 100%; position: relative; }
-        /* --- SIDEBAR --- */
-        .sidebar { width: 300px; background: var(--bg-panel); border-right: 1px solid var(--border-light); display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease; z-index: 100; }
-        .brand-header { padding: 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
-        .brand-info h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
-        .brand-info p { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
-        .close-sidebar-btn { display: none; background: none; border: none; font-size: 20px; color: var(--text-dark); cursor: pointer; }
-        .auth-section { padding: 20px; border-bottom: 1px solid var(--border-light); }
-        .btn-primary { width: 100%; padding: 14px; background: var(--text-dark); color: #fff; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
-        .btn-primary:hover { background: #333; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
-        /* Logged In User Profile */
-        .user-profile { display: none; align-items: center; justify-content: space-between; background: var(--bg-main); padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border-light); }
-        .user-details { display: flex; align-items: center; gap: 12px; overflow: hidden; }
-        .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
-        .user-email { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;}
-        .btn-logout { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; padding: 8px; border-radius: 8px; transition: 0.2s; }
-        .btn-logout:hover { background: #FFEBEE; }
-        .sidebar-menu { padding: 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
-        .menu-btn { width: 100%; padding: 14px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-dark); cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 12px; }
-        .menu-btn:hover { background: var(--bg-main); border-color: var(--border-light); }
-        .menu-btn.danger { color: var(--danger); margin-top: auto; border: 1px solid var(--border-light); }
-        .menu-btn.danger:hover { background: #FFEBEE; border-color: var(--danger); }
-        /* --- MAIN WORKSPACE --- */
-        .main-area { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; background: var(--bg-main); }
-        .top-nav { height: 60px; padding: 0 24px; display: flex; align-items: center; gap: 16px; background: rgba(245,245,247,0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-light); z-index: 10; }
-        .hamburger { background: none; border: none; font-size: 20px; color: var(--text-dark); cursor: pointer; display: none; padding: 8px; border-radius: 8px; }
-        .nav-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
-        .nav-status { width: 8px; height: 8px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 2px rgba(52,199,89,0.2); }
-        /* --- CHAT HISTORY --- */
-        .chat-container { flex: 1; overflow-y: auto; padding: 30px 40px; display: flex; flex-direction: column; gap: 24px; scroll-behavior: smooth; }
-        .chat-container::-webkit-scrollbar { width: 6px; }
-        .chat-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
-        .welcome-screen { margin: auto; text-align: center; max-width: 600px; animation: fadeIn 0.5s ease; }
-        .welcome-icon { font-size: 48px; margin-bottom: 20px; background: -webkit-linear-gradient(45deg, var(--text-dark), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        .welcome-title { font-size: 32px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; }
-        .welcome-desc { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 30px; }
-        .guest-badge { display: inline-flex; align-items: center; gap: 8px; background: #FFF4E5; color: #FF9500; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 1px solid #FFE0B2; margin-bottom: 20px; }
-        .msg-row { display: flex; gap: 16px; max-width: 85%; animation: slideUp 0.3s ease; }
-        @keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
-        .msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
-        .msg-row.bot { align-self: flex-start; }
-        .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 700; flex-shrink: 0; box-shadow: var(--shadow-sm); }
-        .msg-row.user .avatar { background: var(--text-dark); color: #fff; }
-        .msg-row.bot .avatar { background: #fff; color: var(--accent-blue); border: 1px solid var(--border-light); }
-        .msg-bubble { padding: 16px 20px; border-radius: 20px; font-size: 15px; line-height: 1.6; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
-        .msg-row.user .msg-bubble { background: var(--text-dark); color: #fff; border-top-right-radius: 4px; }
-        .msg-row.bot .msg-bubble { background: var(--bg-panel); color: var(--text-dark); border-top-left-radius: 4px; border: 1px solid var(--border-light); width: 100%; }
-        /* Markdown Styles */
-        .msg-bubble p { margin-bottom: 12px; }
-        .msg-bubble p:last-child { margin-bottom: 0; }
-        .msg-bubble code { font-family: var(--font-mono); background: rgba(0,0,0,0.05); padding: 3px 6px; border-radius: 6px; font-size: 0.9em; color: #E91E63; }
-        .msg-row.user .msg-bubble code { background: rgba(255,255,255,0.2); color: #fff; }
-        .msg-bubble pre { background: #1E1E1E; padding: 16px; border-radius: 12px; overflow-x: auto; margin: 12px 0; border: 1px solid #333; }
-        .msg-bubble pre code { background: transparent; color: #D4D4D4; padding: 0; }
-        .msg-bubble img { max-width: 100%; border-radius: 12px; margin: 10px 0; box-shadow: var(--shadow-sm); }
-        .copy-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; float: right; margin-bottom: 8px; }
-        /* Attachment Previews in Chat */
-        .chat-attachment { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); margin-bottom: 8px; font-size: 12px; }
-        .chat-attachment i { font-size: 16px; }
-        .msg-row.bot .chat-attachment { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
-        /* --- INPUT AREA --- */
-        .input-zone { padding: 0 40px 30px; background: linear-gradient(to top, var(--bg-main) 70%, transparent); position: relative; z-index: 20; }
-        .input-wrapper { background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: 24px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; transition: 0.3s; }
-        .input-wrapper:focus-within { border-color: var(--border-focus); box-shadow: 0 12px 40px rgba(0,122,255,0.15); }
-        /* File Preview Area */
-        .file-preview { display: none; padding: 16px 20px 0; align-items: center; gap: 12px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 12px; margin: 12px 20px 0; }
-        .file-preview.active { display: flex; }
-        .file-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #f0f0f0; display: flex; justify-content: center; align-items: center; font-size: 20px; color: var(--text-muted); }
-        .file-info { flex: 1; overflow: hidden; }
-        .file-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .file-meta { font-size: 11px; color: var(--text-muted); }
-        .remove-file { background: #FFEBEE; color: var(--danger); border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
-        .remove-file:hover { background: var(--danger); color: #fff; }
-        .input-row { display: flex; align-items: flex-end; gap: 12px; padding: 12px 16px 12px 20px; }
-        .action-icon-btn { width: 40px; height: 40px; border-radius: 12px; background: transparent; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; position: relative; overflow: hidden; }
-        .action-icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-dark); }
-        .action-icon-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
-        /* Voice Active Animation */
-        .action-icon-btn.recording { color: var(--danger); 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); } }
-        .chat-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--text-dark); resize: none; min-height: 24px; max-height: 200px; padding: 8px 0; line-height: 1.5; }
-        .send-btn { width: 44px; height: 44px; border-radius: 14px; border: none; background: var(--text-dark); color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.1); flex-shrink: 0; }
-        .send-btn:hover { background: #333; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
-        .send-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
-        /* --- AUTH MODAL --- */
-        .modal-overlay { position: fixed; inset: 0; background: rgba(245,245,247,0.8); backdrop-filter: blur(20px); z-index: 5000; display: none; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
-        @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
-        .modal-card { background: #fff; padding: 40px; border-radius: 32px; width: 100%; max-width: 440px; border: 1px solid var(--border-light); box-shadow: var(--shadow-md); position: relative; margin: 20px; }
-        .close-modal { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
-        .close-modal:hover { color: var(--danger); transform: rotate(90deg); }
-        .modal-header { text-align: center; margin-bottom: 24px; }
-        .modal-header h2 { font-size: 26px; font-weight: 800; color: var(--text-dark); }
-        .auth-tabs { display: flex; background: var(--bg-main); padding: 4px; border-radius: 12px; margin-bottom: 24px; }
-        .auth-tab { flex: 1; padding: 10px; text-align: center; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
-        .auth-tab.active { background: #fff; color: var(--text-dark); box-shadow: var(--shadow-sm); }
-        .auth-step { display: none; flex-direction: column; animation: slideIn 0.3s ease; }
-        .auth-step.active { display: flex; }
-        @keyframes slideIn { from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }
-        .input-group { position: relative; margin-bottom: 16px; }
-        .input-group i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; }
-        .input-group input { width: 100%; padding: 16px 16px 16px 48px; border: 1px solid var(--border-light); border-radius: 14px; font-size: 15px; background: #FAFAFA; outline: none; transition: 0.3s; font-family: var(--font-sans); }
-        .input-group input:focus { border-color: var(--accent-blue); background: #fff; box-shadow: 0 4px 12px rgba(0,122,255,0.1); }
-        .btn-text { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 10px; padding: 10px; width: 100%; transition: 0.2s; }
-        .btn-text:hover { color: var(--text-dark); }
-        /* --- RESPONSIVE MOBILE ADAPTIVE --- */
-        @media (max-width: 850px) {
-            .sidebar { position: absolute; left: -300px; height: 100%; box-shadow: var(--shadow-md); }
-            .sidebar.open { left: 0; transform: translateX(0); }
-            .hamburger, .close-sidebar-btn { display: block; }
-            .chat-container { padding: 20px 20px; }
-            .input-zone { padding: 0 15px 20px; }
-            .msg-row { max-width: 95%; }
-            .modal-card { padding: 30px 24px; }
-        }
-    </style>
 </head>
-<body>
 <div id="toast-container"></div>
-<div class="app-shell">
-    <!-- Sidebar -->
-    <aside class="sidebar" id="sidebar">
-        <div class="brand-header">
-            <div class="brand-info">
-                <h1>Arjun Compound</h1>
-                <p>By Abhay Kumar</p>
-            </div>
-            <button class="close-sidebar-btn" onclick="toggleSidebar()"><i class="fa-solid fa-xmark"></i></button>
-        </div>
-        <!-- Auth / Profile Section -->
-        <div class="auth-section">
-            <button id="loginBtn" class="btn-primary" onclick="openAuthModal()"><i class="fa-solid fa-shield-halved"></i> Secure Login</button>
-            <div id="userProfile" class="user-profile">
-                <div class="user-details">
-                    <div class="user-avatar" id="uAvatar">U</div>
-                    <div class="user-email" id="uEmail">user@email.com</div>
-                </div>
-                <button class="btn-logout" onclick="logout()" title="Logout Account"><i class="fa-solid fa-power-off"></i></button>
-            </div>
-        </div>
-        <div class="sidebar-menu">
-            <button class="menu-btn" onclick="sendEx('Write a python script for a simple HTTP server.')"><i class="fa-solid fa-code"></i> Code Assistant</button>
-            <button class="menu-btn" onclick="sendEx('Create a cinematic image of a futuristic Indian city.')"><i class="fa-solid fa-image"></i> Generate Image</button>
-            <button class="menu-btn danger" onclick="clearMemory()"><i class="fa-solid fa-trash-can"></i> Clear History</button>
         </div>
-    </aside>
-    <!-- Main Workspace -->
-    <main class="main-area">
-        <header class="top-nav">
-            <button class="hamburger" onclick="toggleSidebar()"><i class="fa-solid fa-bars"></i></button>
-            <div class="nav-title"><div class="nav-status"></div> Arjun AI Connected</div>
-        </header>
-        <div class="chat-container" id="chatArea">
-            <div class="welcome-screen" id="welcomeScreen">
-                <div class="welcome-icon"><i class="fa-solid fa-microchip"></i></div>
-                <h2 class="welcome-title">How can I help you today?</h2>
-                <p class="welcome-desc">I am Arjun Compound, an advanced AI developed by Abhay Kumar. I can write code, analyze files, understand voice, and generate images.</p>
-                <div id="guestBadge" class="guest-badge" style="display: none;">
-                    <i class="fa-solid fa-circle-exclamation"></i> Guest Mode: <span id="guestCount">0</span>/3 Queries Used. Login to unlock.
-                </div>
             </div>
         </div>
-        <div class="input-zone">
-            <div class="input-wrapper">
-                <!-- File Preview UI -->
-                <div class="file-preview" id="filePreview">
-                    <div class="file-thumb" id="fileThumb"><i class="fa-solid fa-file-lines"></i></div>
-                    <div class="file-info">
-                        <div class="file-name" id="fileName">document.pdf</div>
-                        <div class="file-meta" id="fileMeta">Processing...</div>
-                    </div>
-                    <button class="remove-file" onclick="removeFile()"><i class="fa-solid fa-xmark"></i></button>
-                </div>
-                <div class="input-row">
-                    <!-- Universal File Attach -->
-                    <button class="action-icon-btn" title="Attach File or Image">
-                        <i class="fa-solid fa-paperclip"></i>
-                        <input type="file" id="fileInput" accept="*/*" onchange="handleFile(this)">
-                    </button>
-                    <!-- Voice Input (Google Speech API) -->
-                    <button class="action-icon-btn" id="voiceBtn" onclick="toggleVoice()" title="Voice Input">
-                        <i class="fa-solid fa-microphone"></i>
-                    </button>
-                    <textarea class="chat-input" id="chatInput" placeholder="Type a message or use voice..." rows="1" oninput="autoGrow(this)" onkeydown="handleKey(event)"></textarea>
-                    <button class="send-btn" id="sendBtn" onclick="sendMsg()">
-                        <i class="fa-solid fa-paper-plane"></i>
-                    </button>
-                </div>
             </div>
         </div>
     </main>
 </div>
-<!-- Authentication Modal (GAS Powered) -->
 <div class="modal-overlay" id="authModal">
-    <div class="modal-card">
-        <button class="close-modal" onclick="closeAuthModal()"><i class="fa-solid fa-xmark"></i></button>
-        <div class="modal-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')">Create Account</div>
-        </div>
-        <!-- Login Flow -->
-        <div id="flow-login">
-            <div class="auth-step active" id="log-step-1">
-                <div class="input-group"><i class="fa-solid fa-envelope"></i><input type="email" id="logEmail" placeholder="Registered Email"></div>
-                <button class="btn-primary" id="btn-log-otp" onclick="processAuth('login_send_otp')">Send Secure OTP</button>
-            </div>
-            <div class="auth-step" id="log-step-2">
-                <div class="input-group"><i class="fa-solid fa-key"></i><input type="number" id="logOTP" placeholder="Enter 6-Digit OTP"></div>
-                <button class="btn-primary" id="btn-log-verify" onclick="processAuth('login_verify')">Verify & Login</button>
-                <button class="btn-text" onclick="switchStep('log-step-2', 'log-step-1')">Back</button>
-            </div>
-        </div>
-        <!-- Register Flow -->
-        <div id="flow-register" style="display: none;">
-            <div class="auth-step active" id="reg-step-1">
-                <div class="input-group"><i class="fa-solid fa-user"></i><input type="text" id="regName" placeholder="Full Name"></div>
-                <div class="input-group"><i class="fa-solid fa-envelope"></i><input type="email" id="regEmail" placeholder="Email Address"></div>
-                <button class="btn-primary" id="btn-reg-otp" onclick="processAuth('register_send_otp')">Generate OTP</button>
-            </div>
-            <div class="auth-step" id="reg-step-2">
-                <div class="input-group"><i class="fa-solid fa-shield-check"></i><input type="number" id="regOTP" placeholder="Enter Verification OTP"></div>
-                <button class="btn-primary" id="btn-reg-verify" onclick="processAuth('register_verify')">Create Account</button>
-                <button class="btn-text" onclick="switchStep('reg-step-2', 'reg-step-1')">Back</button>
-            </div>
-        </div>
     </div>
 </div>
 <script>
-// --- CORE CONFIGURATION & STATE ---
 const GAS_URL = "https://script.google.com/macros/s/AKfycbzTsXGoVh97JjtFAAG825GF4WUZqf7FDB3Zbxyf0nrLXt_1HjJSSqA829UcdoamRPvg0A/exec";
-const STATE = { history: [], pendingFile: null, isProcessing: false };
-// CACHE MEMORY (Persistent Login)
 let currentUser = localStorage.getItem('arjun_user');
 let guestCount = parseInt(localStorage.getItem('arjun_guest') || '0');
 // --- INITIALIZATION ---
-window.onload = () => {
-    updateUIForAuth();
-    if (currentUser) { fetchHistoryFromGAS(); }
-    else {
-        document.getElementById('guestBadge').style.display = 'inline-flex';
-        document.getElementById('guestCount').innerText = guestCount;
     }
-    setupMarkdown();
-};
 function showToast(msg) {
     const t = document.createElement('div'); t.className = 'toast';
-    t.innerHTML = `<i class="fa-solid fa-circle-info"></i> ${msg}`;
-    document.getElementById('toast-container').appendChild(t);
     setTimeout(() => t.remove(), 3000);
 }
-function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); }
-function autoGrow(el) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 200) + 'px'; }
-function handleKey(e) { if(e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMsg(); } }
-function scrollChat() { const c = document.getElementById('chatArea'); c.scrollTo({ top: c.scrollHeight, behavior: 'smooth' }); }
-// --- AUTHENTICATION (Login / Register / Cache) ---
-function updateUIForAuth() {
     if (currentUser) {
-        document.getElementById('loginBtn').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('loginBtn').style.display = 'flex';
         document.getElementById('userProfile').style.display = 'none';
     }
 }
@@ -364,7 +510,7 @@ function switchAuthTab(tab) {
     document.getElementById('flow-login').style.display = tab === 'login' ? 'block' : 'none';
     document.getElementById('flow-register').style.display = tab === 'register' ? 'block' : 'none';
 }
-function switchStep(curr, next) {
     document.getElementById(curr).classList.remove('active');
     document.getElementById(next).classList.add('active');
 }
@@ -390,7 +536,7 @@ async function processAuth(action) {
     }
     const btn = document.getElementById(btnId); const ogText = btn.innerHTML;
-    btn.disabled = true; btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
     try {
         const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify(payload) });
@@ -398,12 +544,12 @@ async function processAuth(action) {
         if (data.status === 'success') {
             showToast(data.message);
-            if (action === 'register_send_otp') switchStep('reg-step-1', 'reg-step-2');
-            else if (action === 'login_send_otp') switchStep('log-step-1', 'log-step-2');
             else if (action === 'register_verify' || action === 'login_verify') {
                 currentUser = payload.email;
-                localStorage.setItem('arjun_user', currentUser); // Persistent Cache Update
-                closeAuthModal(); updateUIForAuth(); fetchHistoryFromGAS();
             }
         } else showToast(data.message);
     } catch (e) { showToast("Network Error."); }
@@ -411,6 +557,7 @@ async function processAuth(action) {
 }
 function logout() { localStorage.removeItem('arjun_user'); location.reload(); }
 async function clearMemory() {
     if(currentUser) {
         showToast("Clearing Cloud History...");
@@ -419,197 +566,272 @@ async function clearMemory() {
     location.reload();
 }
 async function fetchHistoryFromGAS() {
-    document.getElementById('welcomeScreen').style.display = 'none';
-    const c = document.getElementById('chatArea');
-    c.innerHTML = '<div style="text-align:center; color:var(--text-muted); margin-top:20px;"><i class="fa-solid fa-spinner fa-spin"></i> Syncing Arjun Network...</div>';
     try {
         const res = await fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "get_history", email: currentUser }) });
         const data = await res.json();
-        c.innerHTML = '';
         if (data.status === 'success' && data.historyJSON !== "[]") {
-            STATE.history = JSON.parse(data.historyJSON);
-            STATE.history.forEach(m => appendMsg(m.content, m.role, true));
-            setTimeout(scrollChat, 100);
-        } else { document.getElementById('welcomeScreen').style.display = 'block'; }
-    } catch(e) { c.innerHTML = ''; document.getElementById('welcomeScreen').style.display = 'block'; }
 }
 function syncHistory() {
-    if(currentUser) fetch(GAS_URL, { method: 'POST', body: JSON.stringify({ action: "save_history", email: currentUser, historyJSON: JSON.stringify(STATE.history) }) });
 }
-// --- VOICE RECOGNITION (Google Speech API) ---
-const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-let recognition = null;
-let isRecording = false;
-if (SpeechRecognition) {
-    recognition = new SpeechRecognition();
-    recognition.continuous = false; recognition.interimResults = true; recognition.lang = 'en-US';
-    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; }
-        document.getElementById('chatInput').value = transcript; autoGrow(document.getElementById('chatInput'));
-    };
-    recognition.onend = () => { isRecording = false; document.getElementById('voiceBtn').classList.remove('recording'); };
-    recognition.onerror = () => { showToast("Voice recognition failed. Try again."); };
 }
-function toggleVoice() {
-    if(!recognition) return showToast("Voice input not supported in this browser.");
-    if(isRecording) recognition.stop(); else recognition.start();
 }
-// --- MULTI-FILE ATTACHMENT HANDLING ---
-function handleFile(input) {
-    const file = input.files[0]; if(!file) return;
-    const reader = new FileReader();
-    document.getElementById('fileName').innerText = file.name;
-    document.getElementById('fileThumb').innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
-    document.getElementById('filePreview').classList.add('active');
-    // Categorize: Image vs Text vs Binary(PDF/Doc)
-    if (file.type.startsWith('image/')) {
-        reader.onload = (e) => {
-            STATE.pendingFile = { type: 'image', data: e.target.result, name: file.name };
-            document.getElementById('fileThumb').innerHTML = `<img src="${e.target.result}" style="width:100%; height:100%; border-radius:8px; object-fit:cover;">`;
-            document.getElementById('fileMeta').innerText = 'Image Ready';
-        };
-        reader.readAsDataURL(file);
-    } else if (file.type.match(/(text|json|csv|xml)/) || file.name.match(/\.(txt|md|csv|json)$/i)) {
-        reader.onload = (e) => {
-            STATE.pendingFile = { type: 'text', data: e.target.result, name: file.name };
-            document.getElementById('fileThumb').innerHTML = '<i class="fa-solid fa-file-code" style="color:var(--accent-blue)"></i>';
-            document.getElementById('fileMeta').innerText = 'Text Extracted';
-        };
-        reader.readAsText(file);
-    } else {
-        // Fallback for PDFs, DOCs (Sends as Base64. Actual parsing depends on AI backend capability)
-        reader.onload = (e) => {
-            STATE.pendingFile = { type: 'document', data: e.target.result, name: file.name };
-            document.getElementById('fileThumb').innerHTML = '<i class="fa-solid fa-file-pdf" style="color:var(--danger)"></i>';
-            document.getElementById('fileMeta').innerText = 'Document Ready';
-        };
-        reader.readAsDataURL(file);
-    }
 }
-function removeFile() { STATE.pendingFile = null; document.getElementById('filePreview').classList.remove('active'); document.getElementById('fileInput').value = ''; }
-// --- CHAT & MARKDOWN SYSTEM ---
-function setupMarkdown() {
-    const renderer = new marked.Renderer();
-    renderer.code = function(code, lang) {
-        const valid = (lang && hljs.getLanguage(lang)) ? lang : 'plaintext';
-        const highlighted = hljs.highlight(code, { language: valid }).value;
-        const safeCode = encodeURIComponent(code);
-        return `<div style="position:relative;">
-            <button class="copy-btn" onclick="navigator.clipboard.writeText(decodeURIComponent('${safeCode}')).then(()=>{this.innerText='Copied!';setTimeout(()=>this.innerText='Copy Code',2000)})">Copy Code</button>
-            <pre><code class="hljs ${valid}">${highlighted}</code></pre>
-        </div>`;
-    };
-    marked.use({ renderer, breaks: true });
 }
-async function sendMsg() {
-    if (STATE.isProcessing) return;
-    const inp = document.getElementById('chatInput');
-    let msg = inp.value.trim();
-    if (!msg && !STATE.pendingFile) return;
-    if (!currentUser) {
-        if (guestCount >= 3) { openAuthModal(); return showToast("Guest limit reached. Please Login."); }
-        guestCount++; localStorage.setItem('arjun_guest', guestCount.toString());
-        document.getElementById('guestCount').innerText = guestCount;
-    }
-    inp.value = ''; inp.style.height = 'auto';
-    document.getElementById('welcomeScreen').style.display = 'none';
-    STATE.isProcessing = true; document.getElementById('sendBtn').disabled = true;
-    // Handle Attached File Content
-    let displayMsg = msg;
-    let backendPayloadMsg = msg;
-    let attachmentHTML = '';
-    if (STATE.pendingFile) {
-        if (STATE.pendingFile.type === 'text') {
-            backendPayloadMsg = `[User attached file: ${STATE.pendingFile.name}]\nFile Content:\n${STATE.pendingFile.data}\n\nUser Message: ${msg}`;
-            attachmentHTML = `<div class="chat-attachment"><i class="fa-solid fa-file-lines"></i> ${STATE.pendingFile.name} (Text Data)</div>`;
-        } else if (STATE.pendingFile.type === 'image') {
-            // If backend handles image base64, we send it in attachments array (like previous logic).
-            attachmentHTML = `<div class="chat-attachment"><i class="fa-solid fa-image"></i> ${STATE.pendingFile.name}</div><img src="${STATE.pendingFile.data}" style="max-width:200px; border-radius:10px; margin-top:10px;">`;
-        } else {
-            backendPayloadMsg = `[User attached document: ${STATE.pendingFile.name}]\nUser Message: ${msg}`;
-            attachmentHTML = `<div class="chat-attachment"><i class="fa-solid fa-file"></i> ${STATE.pendingFile.name}</div>`;
         }
-        removeFile();
     }
-    const finalUserHTML = attachmentHTML + (msg ? `<p>${msg.replace(/</g,'&lt;')}</p>` : '');
-    appendMsg(finalUserHTML, 'user');
-    STATE.history.push({ role: 'user', content: backendPayloadMsg }); // Save text to history
-    const botNode = appendMsg('<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...', 'bot');
-    scrollChat();
-    const sysPrompt = "You are Arjun Compound, an advanced AI developed by Abhay Kumar. Always respond in English unless requested otherwise. To generate images, reply with ![Arjun AI Image](https://image.pollinations.ai/prompt/{URL_ENCODED_PROMPT}?width=1024&height=1024&nologo=true&model=flux)";
-    try {
-        const res = await fetch('/api/chat', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ message: backendPayloadMsg, system_prompt: sysPrompt, history: STATE.history.slice(0, -1) })
-        });
-        const reader = res.body.getReader();
-        const decoder = new TextDecoder();
-        let fullText = "";
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            const lines = decoder.decode(value, {stream: true}).split('\n');
-            for (let line of lines) {
-                if (line.startsWith('data: ') && !line.includes('[DONE]')) {
-                    try {
-                        const dataObj = JSON.parse(line.substring(6));
-                        if (dataObj.choices && dataObj.choices[0].delta.content) {
-                            fullText += dataObj.choices[0].delta.content;
-                            // Regex to clean up think tags if present
-                            let cleanText = fullText.replace(/<think>[\s\S]*?(<\/think>|$)/gi, '');
-                            botNode.querySelector('.msg-bubble').innerHTML = marked.parse(cleanText) + '<span style="display:inline-block;width:6px;height:12px;background:var(--accent-blue);animation:blink 1s infinite;"></span>';
-                            scrollChat();
-                        }
-                    } catch (e) { }
-                }
-            }
-        }
-        let finalText = fullText.replace(/<think>[\s\S]*?(<\/think>|$)/gi, '');
-        botNode.querySelector('.msg-bubble').innerHTML = marked.parse(finalText);
-        STATE.history.push({ role: 'bot', content: fullText });
-        syncHistory();
-    } catch(err) { botNode.querySelector('.msg-bubble').innerHTML = "<b>Error:</b> Connection failed."; }
-    STATE.isProcessing = false; document.getElementById('sendBtn').disabled = false; scrollChat();
 }
-function sendEx(t) { document.getElementById('chatInput').value = t; sendMsg(); }
-function appendMsg(htmlContent, role, isMD = false) {
-    const d = document.createElement('div'); d.className = `msg-row ${role}`;
-    let displayHtml = isMD ? marked.parse(htmlContent.replace(/<think>[\s\S]*?(<\/think>|$)/gi, '')) : htmlContent;
-    d.innerHTML = `<div class="avatar">${role === 'user' ? 'U' : '<i class="fa-solid fa-microchip"></i>'}</div><div class="msg-bubble">${displayHtml}</div>`;
-    document.getElementById('chatArea').appendChild(d);
-    return d;
 }
 </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>Arjun Compound - Advanced AI</title>
+<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">
+<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>
+/* --- BASE RESET & VARIABLES --- */
+*{margin:0;padding:0;box-sizing:border-box;}
+:root{
+  --bg-color: #ffffff; --bg-secondary: #f9f9fb; --text-main: #1d1d1f; --text-muted: #86868b;
+  --accent: #FF9933; --accent-green: #138808; --accent-hover: #e68a2e;
+  --border-light: rgba(0, 0, 0, 0.08); --border-focus: rgba(255, 153, 51, 0.3);
+  --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.4);
+  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 8px 32px rgba(0,0,0,0.08);
+  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
+  --font-serif: 'Instrument Serif', serif; --font-sans: 'Inter', -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', monospace;
+  --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
+}
+html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
+/* --- BACKGROUND --- */
+.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: linear-gradient(135deg, rgba(255,153,51,0.05) 0%, rgba(255,255,255,1) 50%, rgba(19,136,8,0.05) 100%);}
+.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.5;animation:drift 25s ease-in-out infinite alternate;}
+.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,153,51,0.2),transparent 70%);top:-150px;left:-100px;}
+.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(19,136,8,0.18),transparent 70%);bottom:-100px;right:-100px;animation-delay:-10s;}
+@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(60px,40px) scale(1.05);}}
+/* --- TOAST NOTIFICATION --- */
+#toast-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
+.toast { background: var(--text-main); color: #fff; padding: 12px 24px; border-radius: 50px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); animation: slideDownFade 0.4s ease; }
+@keyframes slideDownFade { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+/* --- GET STARTED OVERLAY --- */
+.welcome-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; transition: opacity 0.4s ease; }
+.welcome-overlay.hidden { opacity: 0; pointer-events: none; }
+.welcome-overlay img { width: 120px; height: 120px; border-radius: 28px; object-fit: cover; box-shadow: var(--shadow-lg); margin-bottom: 24px; border: 1px solid var(--border-light); }
+.welcome-overlay h1 { font-family: var(--font-sans); font-size: 36px; font-weight: 800; color: var(--text-main); letter-spacing: -1px; margin-bottom: 12px; }
+.welcome-overlay p { font-size: 16px; color: var(--text-muted); line-height: 1.6; max-width: 450px; margin-bottom: 36px; }
+.start-btn { padding: 16px 40px; background: var(--text-main); color: #fff; border: none; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
+.start-btn:hover { background: #333; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
+/* --- MAIN LAYOUT (CHAT + WORKSPACE) --- */
+.shell{position:relative;z-index:1;display:flex;height:100vh;width:100vw;overflow:hidden;}
+.sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);flex-shrink:0;z-index:100; transition: left 0.3s ease;}
+.main-wrapper{flex:1;display:flex;position:relative;overflow:hidden;}
+.chat-main{flex:1;display:flex;flex-direction:column;background:transparent;position:relative;min-width:300px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
+.workspace{width:0;background:#fafafa;border-left:1px solid var(--border-light);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:-10px 0 30px rgba(0,0,0,0.02);z-index:25;}
+.workspace.open{width:50%;}
+/* --- SIDEBAR & BRANDING --- */
+.logo-area{padding:24px 20px;border-bottom:1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center;}
+.logo-row{display:flex;align-items:center;gap:12px;}
+.logo-img{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);background:#fff;}
+.logo-text{line-height:1.2;}
+.logo-name{font-family:var(--font-sans);font-weight:800;font-size:16px;color:var(--text-main);letter-spacing:-0.5px;}
+.logo-sub{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
+.close-sidebar-btn { display: none; background: none; border: none; font-size: 20px; color: var(--text-main); cursor: pointer; }
+/* Auth Block in Sidebar */
+.auth-block { padding: 20px; border-bottom: 1px solid var(--border-light); }
+.user-profile { display: none; align-items: center; gap: 10px; background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); }
+.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--text-main); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; }
+.user-email { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-main); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
+.logout-btn { background: none; border: none; color: #ff3b30; cursor: pointer; font-size: 16px; padding: 4px; }
+.login-prompt-btn { width: 100%; padding: 12px; border-radius: 12px; background: var(--text-main); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
+.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;}
+.toggle-wrapper {display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 16px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);}
+.toggle-label {font-size: 13px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
+.toggle-label span {font-size: 11px; color: var(--text-muted); font-weight: 500; display: block; margin-top: 2px;}
+.switch {position: relative; display: inline-block; width: 44px; height: 24px;}
+.switch input {opacity: 0; width: 0; height: 0;}
+.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e5ea; transition: .4s; border-radius: 24px;}
+.slider:before {position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
+input:checked + .slider {background-color: var(--accent-green);}
+input:checked + .slider:before {transform: translateX(20px);}
+.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;}
+.brand-box p {font-size: 10px; font-weight: 600; color: var(--accent-green); line-height: 1.4; letter-spacing: 0.5px;}
+.clear-btn{width:100%;padding:12px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;}
+.clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;}
+/* --- CHAT AREA --- */
+.chat-hdr{padding:14px 24px;border-bottom:1px solid var(--border-light);background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;z-index:10;}
+.mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: var(--text-main); cursor: pointer; margin-right: 16px; }
+.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);}
+.messages{flex:1;overflow-y:auto;padding:30px 40px;display:flex;flex-direction:column;gap:24px;scroll-behavior:smooth;position:relative;}
+.messages::-webkit-scrollbar{width:6px;}
+.messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
+/* Welcome Screen & Prompts */
+.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);}
+.welcome-title{font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:12px;}
+.welcome-sub{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:20px;max-width: 500px;}
+.guest-badge { background: #fff0f0; color: #ff3b30; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 24px; border: 1px solid #ffcccb; display: none; }
+.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;}
+.ex-card{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:16px;cursor:pointer;text-align:left;transition:all 0.2s;box-shadow:var(--shadow-sm);}
+.ex-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent);}
+.ex-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
+.ex-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
+/* Messages */
+.msg{display:flex;gap:16px;animation:msgIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;max-width:85%;}
+@keyframes msgIn{from{opacity:0;transform:translateY(15px) scale(0.96);}to{opacity:1;transform:none;}}
+.msg.user{flex-direction:row-reverse;align-self:flex-end;}
+.msg.bot{align-self:flex-start;}
+.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;overflow:hidden;}
+.msg.user .avatar{background:#f0f0f0;color:var(--text-main);border:1px solid var(--border-light);}
+.msg.bot .avatar{border:1px solid var(--border-light);background:#fff;padding:2px;}
+.msg.bot .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
+.body{display:flex;flex-direction:column;gap:6px;max-width:100%; width: 100%;}
+.msg.user .body{align-items:flex-end;}
+.bubble{padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-main);position:relative;word-break:break-word;overflow-wrap:anywhere;}
+.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 (Copy Button below text) */
+.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 */
+.think-box {background: #fdfdfd;border: 1px solid var(--border-light);border-left: 4px solid var(--accent-green);border-radius: 8px;padding: 14px 16px;margin-bottom: 16px;font-family: var(--font-mono);font-size: 13.5px;color: var(--text-muted);line-height: 1.5;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
+.think-title {font-weight: 600; color: var(--text-main); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans);}
+body:not(.show-thinking) .think-box {display: none;}
+/* Markdown inside bubble */
+.bubble p{margin-bottom:12px;}
+.bubble p:last-child{margin-bottom:0;}
+.bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:3px 6px;border-radius:6px;font-size:0.85em;color:#e83e8c;}
+.msg.user .bubble code{background:rgba(255,255,255,0.2);color:#fff;}
+.bubble img{max-width:100%;border-radius:12px;margin:10px 0;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);}
+.bubble pre {display: none;}
+/* 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);}
+.ws-trigger-text h4 {font-size: 14px;font-weight: 600;margin-bottom: 2px;}
+.ws-trigger-text p {font-size: 12px;color: var(--text-muted);font-family: var(--font-mono);text-transform: uppercase;}
+.ws-btn {padding: 8px 16px;background: var(--text-main);color: #fff;border: none;border-radius: 8px;font-size: 13px;font-weight: 600;cursor: pointer;transition: all 0.2s;}
+.ws-btn:hover {transform: scale(1.05); background: var(--accent);}
+/* Typing & Cursor */
+.blinking-cursor {display: inline-block; width: 8px; height: 16px; background: var(--accent); margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: middle;}
+@keyframes blink { 50% { opacity: 0; } }
+.typing{display:flex;align-items:center;gap:6px;padding:4px;}
+.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1.4s infinite ease-in-out both;}
+.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 --- */
+.input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);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);}
+.img-prev-inline{display:none;padding:12px 20px 0;align-items:center;gap:12px;}
+.img-prev-inline.show{display:flex;animation:fadeIn 0.3s;}
+.inline-th{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border-light);}
+.inline-info{flex:1;}
+.inline-nm{font-size:12px;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
+.inline-rm{background:rgba(0,0,0,0.05);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
+.inline-rm:hover{background:#ff3b30;color:#fff;}
+.input-row{display:flex;align-items:flex-end;gap:12px;padding:12px 16px 12px 20px;}
+.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:200px;min-height:24px;padding:8px 0;}
+.chat-ta::placeholder{color:var(--text-muted);}
+.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;}
+.send-btn{width:42px;height:42px;border-radius:14px;border:none;background:linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
+.send-btn svg{width:18px;height:18px;fill:#1d1d1f;transition:transform 0.2s;}
+.send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);transform:translateY(-1px);}
+.send-btn:hover svg{transform:translate(2px, -2px);}
+.send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);transform:none;}
+.input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
+/* --- WORKSPACE PANEL --- */
+.ws-hdr{padding:14px 20px;border-bottom:1px solid var(--border-light);background:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
+.ws-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
+.ws-actions{display:flex;gap:8px;}
+.ws-icon-btn{padding:6px 12px;border-radius:8px;background:var(--bg-secondary);border:1px solid var(--border-light);cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text-main);transition:all 0.2s;font-size:12px;font-weight:600;}
+.ws-icon-btn:hover{background:#e5e5ea;}
+.ws-close{padding:6px;background:transparent;border-color:transparent;}
+.ws-close:hover{color:#ff3b30;background:#fff0f0;}
+.ws-content{flex:1;overflow-y:auto;background:#fafafa;padding:20px;}
+.ws-content pre{margin:0;padding:20px;background:#fff;border:1px solid var(--border-light);border-radius:12px;font-family:var(--font-mono);font-size:14px;line-height:1.6;overflow-x:auto;box-shadow:var(--shadow-sm);}
+/* --- AUTH MODAL (GAS) --- */
+.modal-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 5000; display: none; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
+.modal-card { background: #fff; padding: 32px 36px; border-radius: 24px; width: 90%; max-width: 420px; border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); position: relative; }
+.close-modal { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; transition: 0.2s;}
+.close-modal:hover { color: var(--text-main); transform: rotate(90deg); }
+.auth-header { text-align: center; margin-bottom: 24px; }
+.auth-header h2 { font-family: var(--font-sans); font-size: 24px; font-weight: 800; color: var(--text-main); }
+.auth-tabs { display: flex; background: var(--bg-secondary); padding: 4px; border-radius: 12px; margin-bottom: 24px; }
+.auth-tab { flex: 1; padding: 10px; text-align: center; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.3s; }
+.auth-tab.active { background: #fff; color: var(--text-main); box-shadow: var(--shadow-sm); }
+.auth-step { display: none; flex-direction: column; animation: slideIn 0.3s ease; }
+.auth-step.active { display: flex; }
+.input-group { margin-bottom: 16px; }
+.modal-card input { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 12px; font-size: 15px; outline: none; background: #fafafa; transition: 0.3s; font-family: var(--font-sans); }
+.modal-card input:focus { border-color: var(--text-main); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+.primary-btn { width: 100%; padding: 14px; background: var(--text-main); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top: 8px; }
+.primary-btn:hover { background: #333; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
+.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 --- */
+@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);}
+  .mobile-menu-btn { display: block; }
+  .close-sidebar-btn { display: block; }
+  .workspace.open{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;}
+  .messages{padding:20px;}
+  .input-container{padding:0 20px 20px;}
+  .msg{max-width:95%;}
+  .scroll-bottom-btn{bottom:110px;}
+}
+</style>
 </head>
+<body class="show-thinking">
+<!-- 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 Compound</h1>
+    <p>Developed by Abhay Kumar. Experience advanced reasoning, secure workspace coding, and high-quality image generation in one place.</p>
+    <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="shell">
+  <!-- Sidebar -->
+  <aside class="sidebar" id="sidebar">
+    <div class="logo-area">
+      <div class="logo-row">
+        <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="logo-img">
+        <div class="logo-text">
+          <div class="logo-name">ARJUN COMPOUND</div>
+          <div class="logo-sub">Advanced Edition</div>
         </div>
+      </div>
+      <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">
+            <div class="user-avatar" id="uAvatar">U</div>
+            <div class="user-email" id="uEmail">user@email.com</div>
+            <button class="logout-btn" onclick="logout()" title="Logout">🚪</button>
+        </div>
+    </div>
+    <div class="settings">
+      <div class="toggle-wrapper">
+        <div class="toggle-label">🧠 Reasoning Mode<span>Show internal thinking</span></div>
+        <label class="switch">
+          <input type="checkbox" id="thinkingToggle" checked onchange="toggleThinking(this)">
+          <span class="slider"></span>
+        </label>
+      </div>
+      <div class="brand-box">
+          <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity">
+          <h3>Arjun Compound</h3>
+          <p>DEVELOPED BY ABHAY KUMAR</p>
+      </div>
+      <button class="clear-btn" onclick="clearMemory()">🗑️ Clear Chat Memory</button>
+    </div>
+  </aside>
+  <!-- Main Chat Area -->
+  <div class="main-wrapper">
+    <main class="chat-main" id="chatMain">
+      <header class="chat-hdr">
+        <button class="mobile-menu-btn" onclick="toggleSidebar()">☰</button>
+        <div class="model-badge">
+          <div class="status-dot"></div>
+          Arjun Intelligence
+        </div>
+        <div style="width:24px;"></div> <!-- Spacer for flex balance -->
+      </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 Compound, developed by Abhay Kumar. I am equipped with advanced reasoning, 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>
+              <div class="ex-desc">Generate secure, workspace-ready code</div>
             </div>
+            <div class="ex-card" onclick="sendEx('Create an image of a futuristic Indian city with flying cars, highly detailed, 8k resolution.')">
+              <div class="ex-title">🎨 Generate Images</div>
+              <div class="ex-desc">Stunning visuals using Pollinations AI</div>
+            </div>
+          </div>
         </div>
+      </div>
+      <button class="scroll-bottom-btn" id="scrollBtn" onclick="forceScrollDown()">
+        <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">
+            <img class="inline-th" id="imgThumb" src="">
+            <div class="inline-info">
+              <div class="inline-nm" id="imgName">image.png</div>
             </div>
+            <button class="inline-rm" onclick="removeImg()">✕</button>
+          </div>
+          <div class="input-row">
+            <button class="attach-btn" title="Upload Image">
+              <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="image/*" onchange="handleFile(this)" id="fileInput">
+            </button>
+            <textarea class="chat-ta" id="chatInput" placeholder="Message Arjun Compound..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
+            <button class="send-btn" id="sendBtn" onclick="sendMsg()">
+              <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+            </button>
+          </div>
         </div>
+        <div class="input-hint">Arjun Compound is engineered for extreme performance. Developed by Abhay Kumar.</div>
+      </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>
+        <div class="ws-actions">
+          <button class="ws-icon-btn" onclick="copyWorkspaceCode()" id="wsCopyBtn">📋 Copy</button>
+          <button class="ws-icon-btn ws-close" onclick="closeWorkspace()" title="Close">✕</button>
+        </div>
+      </div>
+      <div class="ws-content">
+        <pre><code id="wsCodeBlock" class="hljs"></code></pre>
+      </div>
+    </aside>
+  </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>
+        <button class="primary-btn" id="btn-log-otp" onclick="processAuth('login_send_otp')">Get Secure OTP</button>
+      </div>
+      <div class="auth-step" id="log-step-2">
+        <div class="input-group"><input type="number" id="logOTP" placeholder="Enter OTP"></div>
+        <button class="primary-btn" id="btn-log-verify" onclick="processAuth('login_verify')">Verify & Login</button>
+        <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>
+        <div class="input-group"><input type="email" id="regEmail" placeholder="Email Address"></div>
+        <button class="primary-btn" id="btn-reg-otp" onclick="processAuth('register_send_otp')">Send OTP</button>
+      </div>
+      <div class="auth-step" id="reg-step-2">
+        <div class="input-group"><input type="number" id="regOTP" placeholder="Enter Verification OTP"></div>
+        <button class="primary-btn" id="btn-reg-verify" onclick="processAuth('register_verify')">Create Account</button>
+        <button class="secondary-btn" onclick="switchAuthStep('reg-step-2', 'reg-step-1')">Back</button>
+      </div>
     </div>
+  </div>
 </div>
 <script>
+// --- GLOBAL VARIABLES & CONFIG ---
 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');
+const S = {
+  history: [],
+  pending: null,
+  busy: false,
+  isUserScrolling: false,
+  codeBlocks: [],
+  currentWorkspaceId: null
+};
 // --- INITIALIZATION ---
+document.addEventListener('DOMContentLoaded', () => {
+    // Welcome Overlay Cache
+    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;
+    }
+});
+function startArjunApp() {
+    const overlay = document.getElementById('welcomeOverlay');
+    overlay.classList.add('hidden');
+    localStorage.setItem('arjun_welcome_seen', 'true');
+    setTimeout(() => { overlay.style.display = 'none'; }, 400);
+}
+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);
 }
+function toggleThinking(el) {
+  if(el.checked) document.body.classList.add('show-thinking');
+  else document.body.classList.remove('show-thinking');
+}
+// --- 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';
     }
 }
     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');
 }
     }
     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) });
         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."); }
 }
 function logout() { localStorage.removeItem('arjun_user'); location.reload(); }
 async function clearMemory() {
     if(currentUser) {
         showToast("Clearing Cloud History...");
     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 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) }) });
+    }
 }
+// --- FILE HANDLING ---
+function handleFile(input){
+  const f=input.files[0];if(!f)return;
+  const r=new FileReader();
+  r.onload=e=>{
+    const base64Data = e.target.result.split(',')[1];
+    S.pending={type: 'image', data: base64Data, name: f.name};
+    document.getElementById('imgThumb').src = e.target.result;
+    document.getElementById('imgName').textContent=f.name;
+    document.getElementById('imgPrev').classList.add('show');
+  };
+  r.readAsDataURL(f);
 }
+function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
+// --- 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) ---
+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 || '');
+  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 });
+function parseThinking(raw) {
+    const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/gi;
+    let text = raw, thinkContent = '';
+    text = text.replace(thinkRegex, (match, p1) => { thinkContent += p1; return ''; });
+    return { mainText: text.trim(), thinkText: thinkContent.trim() };
+}
+// --- MAIN CHAT LOGIC ---
+async function sendMsg(){
+  if(S.busy)return;
+  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());
+    document.getElementById('guestCountDisplay').innerText = guestCount;
+  }
+  inp.value='';inp.style.height='auto';
+  document.getElementById('sendBtn').disabled=true;
+  S.busy=true;
+  const w=document.getElementById('welcome');
+  if(w)w.style.display='none';
+  let attachments = [];
+  let badge = null;
+  if(S.pending) {
+      attachments.push(S.pending);
+      badge = '📎 '+S.pending.name;
+      appendUserDOM(msg || '[Image Attached]', badge);
+      S.history.push({role: 'user', content: msg || '[Image Attached]', badge: badge});
+  } else {
+      appendUserDOM(msg);
+      S.history.push({role: 'user', content: msg});
+  }
+  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();
+  const sysPrompt = `You are Arjun Compound, a state-of-the-art AI assistant developed by Abhay Kumar.
+  Always communicate respectfully.
+  CRITICAL IMAGE GENERATION PROTOCOL:
+  If the user asks to generate, create, or draw an image/photo, you MUST generate the image by responding with a markdown image tag using Pollinations AI.
+  Format to use: ![Arjun Compound is creating your image...](https://image.pollinations.ai/prompt/{URL_ENCODED_PROMPT}?width=1024&height=1024&nologo=true&model={MODEL})
+  Available models for {MODEL}: flux, flux-realism, flux-anime, flux-3d.
+  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.`;
+  const payload = {
+      message: msg,
+      attachments: attachments,
+      system_prompt: sysPrompt,
+      max_tokens: 4096,
+      temperature: 0.7
+  };
+  try{
+    const res = await fetch('/api/chat', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(payload)
+    });
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let accumulatedText = "";
+    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);
+                if (dataStr.trim() === '[DONE]') continue;
+                try {
+                    const dataObj = JSON.parse(dataStr);
+                    if (dataObj.choices && dataObj.choices[0].delta.content) {
+                        accumulatedText += dataObj.choices[0].delta.content;
+                        renderBotText(botDiv, accumulatedText, true);
+                        autoScroll();
+                    }
+                } catch (e) { }
+            }
         }
     }
+    renderBotText(botDiv, accumulatedText, false);
+    S.history.push({role: 'bot', content: accumulatedText});
+    syncHistory();
+  }catch(err){
+    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 = '';
+  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>
 </html>