Vedika commited on
Commit
9a6dab9
·
verified ·
1 Parent(s): 1a274da

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +201 -229
index.html CHANGED
@@ -5,10 +5,10 @@
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <!-- Viewport Settings: Disables zoom, completely removes blue tap highlights on mobile devices -->
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
8
- <meta name="description" content="Arjun 2.O Ultimate Enterprise Artificial Intelligence System engineered by Abhay Kumar.">
9
- <meta name="theme-color" content="#FF9933">
10
 
11
- <title>Arjun 2.O - Professional Advanced AI</title>
12
 
13
  <!-- =========================================================================================
14
  [1] EXTERNAL RESOURCES, FONTS & LIBRARIES
@@ -29,48 +29,48 @@
29
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
30
 
31
  <!-- =========================================================================================
32
- [2] MASSIVE ENTERPRISE CSS ARCHITECTURE
33
  ========================================================================================= -->
34
  <style>
35
  /* ---------------------------------------------------------------------------------------
36
- A. CSS VARIABLES & DESIGN TOKENS
37
  --------------------------------------------------------------------------------------- */
38
  :root {
39
- /* Branding Colors */
40
  --brand-saffron: #FF9933;
41
- --brand-saffron-light: rgba(255, 153, 51, 0.12);
42
  --brand-saffron-dark: #e68a2e;
43
 
44
  --brand-white: #FFFFFF;
45
- --brand-white-glass: rgba(255, 255, 255, 0.88);
46
 
47
  --brand-green: #138808;
48
- --brand-green-light: rgba(19, 136, 8, 0.12);
49
  --brand-green-dark: #0f6e06;
50
 
51
- /* Structural Colors */
52
- --bg-primary: #ffffff;
53
- --bg-secondary: #f8f9fa;
54
- --bg-tertiary: #f1f3f5;
55
- --bg-glass: rgba(255, 255, 255, 0.75);
56
 
57
  /* Text & Typography Colors */
58
- --text-primary: #111827;
59
- --text-secondary: #4b5563;
60
- --text-tertiary: #9ca3af;
61
- --text-inverse: #ffffff;
62
- --text-error: #ef4444;
63
 
64
  /* Borders & Dividers */
65
- --border-light: rgba(0, 0, 0, 0.08);
66
- --border-medium: rgba(0, 0, 0, 0.15);
67
 
68
- /* Shadows & Elevation */
69
- --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
70
- --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
71
- --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
72
- --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
73
- --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
74
 
75
  /* Font Families */
76
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -80,7 +80,7 @@
80
  /* Radii */
81
  --radius-sm: 8px;
82
  --radius-md: 12px;
83
- --radius-lg: 16px;
84
  --radius-xl: 24px;
85
  --radius-full: 9999px;
86
 
@@ -95,6 +95,7 @@
95
  --z-header: 10;
96
  --z-dropdown: 50;
97
  --z-sidebar: 100;
 
98
  --z-modal: 5000;
99
  --z-toast: 9000;
100
  --z-live: 9999;
@@ -107,7 +108,6 @@
107
  box-sizing: border-box;
108
  margin: 0;
109
  padding: 0;
110
- /* CRITICAL FIX: Eliminates blue selection rectangles on Android/iOS browsers */
111
  -webkit-tap-highlight-color: transparent !important;
112
  -webkit-touch-callout: none !important;
113
  }
@@ -126,7 +126,6 @@
126
  -moz-osx-font-smoothing: grayscale;
127
  }
128
 
129
- /* Global Focus Reset */
130
  *:focus { outline: none !important; }
131
 
132
  button, input, textarea, select {
@@ -141,38 +140,37 @@
141
  img { max-width: 100%; height: auto; display: block; }
142
  svg { flex-shrink: 0; }
143
 
144
- /* Elegant Scrollbars */
145
  ::-webkit-scrollbar { width: 6px; height: 6px; }
146
  ::-webkit-scrollbar-track { background: transparent; }
147
- ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; transition: background var(--ease-smooth); }
148
- ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
149
 
150
  /* ---------------------------------------------------------------------------------------
151
- C. AMBIENT BACKGROUND SYSTEM
152
  --------------------------------------------------------------------------------------- */
153
  .ambient-environment {
154
  position: fixed; inset: 0; z-index: var(--z-ambient); overflow: hidden; pointer-events: none;
155
- background: linear-gradient(135deg, var(--brand-saffron-light) 0%, var(--bg-primary) 50%, var(--brand-green-light) 100%);
156
  }
157
  .ambient-orb {
158
- position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.35;
159
  animation: orbFloat 40s ease-in-out infinite alternate; will-change: transform;
160
  }
161
  .orb-top-left {
162
- width: 650px; height: 650px;
163
- background: radial-gradient(circle, rgba(255,153,51,0.2) 0%, transparent 70%);
164
  top: -200px; left: -150px;
165
  }
166
  .orb-bottom-right {
167
- width: 550px; height: 550px;
168
- background: radial-gradient(circle, rgba(19,136,8,0.15) 0%, transparent 70%);
169
  bottom: -150px; right: -100px; animation-delay: -20s;
170
  }
171
  @keyframes orbFloat {
172
  0% { transform: translate(0, 0) scale(1); }
173
- 33% { transform: translate(50px, 70px) scale(1.05); }
174
- 66% { transform: translate(-30px, 40px) scale(0.95); }
175
- 100% { transform: translate(60px, -20px) scale(1.1); }
176
  }
177
 
178
  /* ---------------------------------------------------------------------------------------
@@ -184,7 +182,7 @@
184
  pointer-events: none; width: 90%; max-width: 400px; align-items: center;
185
  }
186
  .toast-notification {
187
- background: var(--text-primary); color: var(--text-inverse); padding: 14px 24px;
188
  border-radius: var(--radius-full); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-xl);
189
  animation: toastSlideIn var(--ease-spring) forwards, toastFadeOut 0.4s 3.5s forwards;
190
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; word-break: break-word;
@@ -198,98 +196,98 @@
198
  E. INITIAL WELCOME OVERLAY
199
  --------------------------------------------------------------------------------------- */
200
  .startup-overlay {
201
- position: fixed; inset: 0; background: var(--brand-white-glass);
202
- backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: calc(var(--z-toast) + 100);
203
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
204
  transition: opacity var(--ease-smooth), visibility var(--ease-smooth);
205
  }
206
  .startup-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
207
 
208
  .startup-logo-container { position: relative; margin-bottom: 32px; animation: popIn var(--ease-spring) 0.3s both; }
209
- .startup-logo-container img { width: 140px; height: 140px; border-radius: var(--radius-xl); object-fit: cover; box-shadow: var(--shadow-xl); border: 4px solid var(--bg-primary); position: relative; z-index: 2; }
210
- .startup-logo-glow { position: absolute; inset: -20px; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); filter: blur(30px); opacity: 0.4; border-radius: var(--radius-full); z-index: 1; animation: pulseGlow 3s infinite alternate; }
211
 
212
- @keyframes pulseGlow { from { opacity: 0.3; transform: scale(0.95); } to { opacity: 0.6; transform: scale(1.05); } }
213
  @keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
214
 
215
  .startup-title { font-family: var(--font-sans); font-size: 2.5rem; font-weight: 900; color: var(--text-primary); letter-spacing: -1px; margin-bottom: 16px; animation: slideUp var(--ease-smooth) 0.4s both; }
216
  .startup-desc { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; max-width: 550px; margin-bottom: 40px; animation: slideUp var(--ease-smooth) 0.5s both; font-weight: 500; }
217
 
218
- .btn-startup-launch { padding: 18px 48px; background: var(--text-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-xl); font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: var(--ease-spring); box-shadow: 0 10px 25px rgba(0,0,0,0.15); animation: slideUp var(--ease-smooth) 0.6s both; display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; }
219
- .btn-startup-launch::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transform: skewX(-20deg); transition: 0.5s; }
220
- .btn-startup-launch:hover { background: #000000; transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 35px rgba(0,0,0,0.25); }
221
  .btn-startup-launch:hover::before { left: 150%; }
222
 
223
  @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
224
 
225
  /* ---------------------------------------------------------------------------------------
226
- F. CORE APPLICATION LAYOUT & SIDEBAR
227
  --------------------------------------------------------------------------------------- */
228
- .app-root { position: relative; z-index: var(--z-base); display: flex; height: 100dvh; width: 100vw; overflow: hidden; background: var(--bg-glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
229
 
230
  /* Sidebar Navigation */
231
- .sidebar-container { width: 320px; display: flex; flex-direction: column; background: rgba(248, 249, 250, 0.85); border-right: 1px solid var(--border-light); flex-shrink: 0; z-index: var(--z-sidebar); transition: transform var(--ease-smooth), box-shadow var(--ease-smooth); backdrop-filter: blur(15px); }
232
  .sidebar-header { padding: 28px 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
233
 
234
  .brand-identity { display: flex; align-items: center; gap: 14px; text-decoration: none; }
235
- .brand-identity img { width: 50px; height: 50px; border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-sm); border: 2px solid var(--bg-primary); transition: transform var(--ease-spring); }
236
  .brand-identity:hover img { transform: scale(1.08) rotate(-3deg); }
237
  .brand-typography { display: flex; flex-direction: column; }
238
  .brand-name { font-family: var(--font-sans); font-weight: 900; font-size: 20px; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.1; }
239
  .brand-edition { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; background: linear-gradient(90deg, var(--brand-saffron), var(--brand-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 4px; }
240
 
241
- .btn-mobile-close { display: none; background: rgba(0,0,0,0.05); border: none; width: 36px; height: 36px; border-radius: 50%; color: var(--text-primary); cursor: pointer; align-items: center; justify-content: center; transition: var(--ease-fast); }
242
- .btn-mobile-close:hover { background: rgba(239, 68, 68, 0.15); color: var(--text-error); transform: rotate(90deg); }
243
 
244
  .sidebar-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 28px; }
245
 
246
  /* Auth Widget in Sidebar */
247
- .auth-widget { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); transition: var(--ease-smooth); }
248
  .auth-widget:hover { box-shadow: var(--shadow-md); border-color: var(--border-medium); }
249
 
250
  .btn-secure-connect { width: 100%; padding: 14px; background: var(--text-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--ease-fast); }
251
- .btn-secure-connect:hover { background: #000000; transform: translateY(-2px); box-shadow: var(--shadow-md); }
252
 
253
  .user-profile-display { display: none; align-items: center; gap: 14px; }
254
- .avatar-badge { width: 46px; height: 46px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); color: var(--brand-white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: var(--shadow-sm); border: 2px solid var(--bg-primary); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
255
  .user-details { flex: 1; overflow: hidden; }
256
  .user-email-id { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
257
  .user-clearance-level { font-size: 11px; color: var(--brand-green); font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
258
- .user-clearance-level::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 5px rgba(19, 136, 8, 0.5); }
259
- .btn-system-logout { background: rgba(239, 68, 68, 0.08); color: var(--text-error); border: none; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--ease-fast); }
260
  .btn-system-logout:hover { background: var(--text-error); color: #ffffff; transform: scale(1.05); }
261
 
262
  /* Developer Box */
263
- .developer-credit-box { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; box-shadow: var(--shadow-sm); margin-top: auto; position: relative; overflow: hidden; }
264
- .developer-credit-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand-saffron), var(--brand-white), var(--brand-green)); }
265
  .developer-credit-box img { width: 72px; height: 72px; border-radius: var(--radius-lg); object-fit: cover; margin-bottom: 16px; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); margin-left: auto; margin-right: auto; transition: var(--ease-spring); }
266
  .developer-credit-box:hover img { transform: scale(1.05); }
267
  .dev-box-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
268
  .dev-box-subtitle { font-size: 11px; font-weight: 800; color: var(--text-tertiary); letter-spacing: 1px; text-transform: uppercase; }
269
 
270
  /* Wipe Memory Button */
271
- .btn-erase-memory { width: 100%; padding: 16px; border-radius: var(--radius-md); background: var(--bg-primary); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--ease-fast); display: flex; align-items: center; justify-content: center; gap: 10px; }
272
- .btn-erase-memory:hover { background: #fee2e2; color: var(--text-error); border-color: #fca5a5; }
273
 
274
  /* ---------------------------------------------------------------------------------------
275
- G. MAIN CHAT AREA & HEADER
276
  --------------------------------------------------------------------------------------- */
277
  .main-chat-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 320px; transition: width var(--ease-smooth); background: transparent; }
278
 
279
- .chat-top-bar { padding: 18px 32px; border-bottom: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); display: flex; align-items: center; justify-content: space-between; z-index: var(--z-header); }
280
  .top-bar-left { display: flex; align-items: center; gap: 16px; }
281
- .btn-hamburger { display: none; background: var(--bg-primary); border: 1px solid var(--border-light); cursor: pointer; color: var(--text-primary); width: 42px; height: 42px; border-radius: var(--radius-sm); align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: var(--ease-fast); }
282
- .btn-hamburger:hover { background: var(--bg-secondary); }
283
 
284
- .system-status-pill { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-primary); padding: 8px 18px; background: var(--bg-secondary); border-radius: var(--radius-full); border: 1px solid var(--border-light); }
285
- .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.2); animation: statusPulse 2s infinite; }
286
- @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(19,136,8,0.4); } 70% { box-shadow: 0 0 0 6px rgba(19,136,8,0); } 100% { box-shadow: 0 0 0 0 rgba(19,136,8,0); } }
287
 
288
  /* LIVE MODE ACTIVATOR */
289
- .btn-activate-live { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: white; border: none; padding: 10px 22px; border-radius: var(--radius-full); font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35); transition: var(--ease-spring); letter-spacing: 0.5px; }
290
- .btn-activate-live:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 25px rgba(239, 68, 68, 0.45); }
291
  .btn-activate-live svg { width: 18px; height: 18px; animation: liveBlink 1.5s infinite; }
292
- @keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
293
 
294
  /* Chat Scrollable Area */
295
  .chat-scroll-area { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 36px; scroll-behavior: smooth; position: relative; }
@@ -297,111 +295,110 @@
297
  /* Internal Welcome Hero Box */
298
  .chat-hero-section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; margin: auto; animation: slideUpFade 0.7s var(--ease-spring) both; max-width: 750px; }
299
  .hero-avatar-wrapper { position: relative; margin-bottom: 36px; }
300
- .hero-avatar-wrapper img { width: 100px; height: 100px; border-radius: var(--radius-xl); object-fit: cover; box-shadow: var(--shadow-xl); border: 3px solid var(--bg-primary); position: relative; z-index: 2; }
301
- .hero-avatar-glow { position: absolute; inset: -12px; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); filter: blur(25px); opacity: 0.35; border-radius: 40px; z-index: 1; animation: rotateGlow 10s linear infinite;}
302
  @keyframes rotateGlow { 100% { transform: rotate(360deg); } }
303
 
304
- .hero-greeting { font-size: 42px; font-weight: 900; letter-spacing: -1.5px; margin-bottom: 18px; color: var(--text-primary); }
305
  .hero-description { font-size: 17px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 40px; font-weight: 500; }
306
 
307
- /* RESTORED: GUEST BADGE LIMIT DISPLAY */
308
- .guest-warning-badge { font-size: 13px; font-weight: 700; color: var(--text-error); background: #fee2e2; padding: 10px 20px; border-radius: var(--radius-full); margin-bottom: 32px; display: none; align-items: center; gap: 8px; border: 1px solid #fca5a5; box-shadow: var(--shadow-sm); }
309
  .guest-warning-badge svg { width: 18px; height: 18px; }
310
 
311
  .prompt-suggestions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; }
312
- .prompt-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; cursor: pointer; text-align: left; transition: var(--ease-smooth); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
313
  .prompt-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand-saffron); opacity: 0; transition: var(--ease-fast); }
314
- .prompt-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--brand-saffron); background: rgba(255, 255, 255, 0.95); }
315
  .prompt-card:hover::after { opacity: 1; }
316
- .prompt-icon { font-size: 28px; margin-bottom: 14px; display: inline-block; background: var(--bg-tertiary); padding: 10px; border-radius: var(--radius-md); }
317
  .prompt-title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
318
  .prompt-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
319
 
320
  /* ---------------------------------------------------------------------------------------
321
- H. CHAT MESSAGE BUBBLES & PREVIEWS
322
  --------------------------------------------------------------------------------------- */
323
  .chat-message-row { display: flex; gap: 20px; max-width: 88%; animation: messagePopIn 0.5s var(--ease-spring) both; }
324
  @keyframes messagePopIn { from { opacity: 0; transform: translateY(25px) scale(0.97); } to { opacity: 1; transform: none; } }
325
  .chat-message-row.user-msg { flex-direction: row-reverse; align-self: flex-end; }
326
  .chat-message-row.bot-msg { align-self: flex-start; }
327
 
328
- .msg-avatar { width: 42px; height: 42px; border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; box-shadow: var(--shadow-sm); }
329
- .user-msg .msg-avatar { background: var(--text-primary); color: var(--brand-white); }
330
- .bot-msg .msg-avatar { background: var(--bg-primary); border: 1px solid var(--border-light); padding: 3px; }
331
- .bot-msg .msg-avatar img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
332
 
333
  .msg-content-column { display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; }
334
  .user-msg .msg-content-column { align-items: flex-end; }
335
 
336
- .file-badge { font-size: 11px; font-weight: 700; color: var(--brand-saffron-dark); background: var(--brand-saffron-light); padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 4px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,153,51,0.2); }
337
  .file-badge svg { width: 12px; height: 12px; }
338
 
339
  /* In-Bubble File Previews */
340
- .chat-in-bubble-img { max-width: 320px; max-height: 320px; border-radius: var(--radius-md); object-fit: cover; border: 2px solid rgba(255,255,255,0.2); box-shadow: var(--shadow-md); margin-bottom: 12px; }
341
- .chat-file-card { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); padding: 12px 18px; border-radius: var(--radius-md); margin-bottom: 12px; max-width: 350px; backdrop-filter: blur(10px); }
342
- .chat-file-card .icon { font-size: 24px; background: rgba(0,0,0,0.1); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--brand-white); }
343
  .chat-file-card .name { font-size: 14px; font-weight: 600; color: var(--brand-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
344
 
345
  .chat-bubble { padding: 18px 24px; font-size: 16px; line-height: 1.6; position: relative; word-wrap: break-word; overflow-wrap: anywhere; }
346
- .user-msg .chat-bubble { background: var(--text-primary); color: var(--text-inverse); border-radius: 24px 24px 6px 24px; box-shadow: var(--shadow-md); }
347
- .bot-msg .chat-bubble { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px 24px 24px 24px; box-shadow: var(--shadow-sm); width: 100%; }
348
 
349
- /* Bot Action Buttons (Copy & TTS) */
350
  .bot-actions-row { display: flex; gap: 10px; margin-top: 8px; padding-left: 14px; opacity: 0; transition: opacity var(--ease-smooth); flex-wrap: wrap; }
351
  .bot-msg:hover .bot-actions-row { opacity: 1; }
352
 
353
- .btn-bot-action { background: var(--bg-secondary); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); transition: var(--ease-fast); }
354
- .btn-bot-action:hover { background: var(--bg-primary); color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--border-medium); }
355
  .btn-bot-action svg { width: 16px; height: 16px; }
356
 
357
- .btn-bot-action.action-tts { color: var(--brand-green-dark); border-color: rgba(19, 136, 8, 0.25); background: var(--brand-green-light); }
358
- .btn-bot-action.action-tts:hover { background: rgba(19, 136, 8, 0.2); }
359
 
360
  /* Markdown Rendering inside Bubbles */
361
  .chat-bubble p { margin-bottom: 16px; }
362
  .chat-bubble p:last-child { margin-bottom: 0; }
363
- .chat-bubble strong { font-weight: 800; color: inherit; }
364
- .chat-bubble code { font-family: var(--font-mono); background: rgba(0,0,0,0.06); padding: 4px 8px; border-radius: 6px; font-size: 0.85em; color: #d946ef; font-weight: 600; border: 1px solid rgba(0,0,0,0.05); }
365
- .user-msg .chat-bubble code { background: rgba(255,255,255,0.2); color: var(--brand-white); border-color: rgba(255,255,255,0.1); }
366
  .chat-bubble img { max-width: 100%; border-radius: var(--radius-md); margin: 16px 0; box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); display: block; }
367
- .chat-bubble pre { background: #282c34; color: #abb2bf; padding: 20px; border-radius: var(--radius-md); overflow-x: auto; margin: 20px 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; border: 1px solid #181a1f; box-shadow: var(--shadow-inner); }
368
  .chat-bubble pre code { background: transparent; color: inherit; padding: 0; font-weight: 400; border: none; }
369
 
370
  /* Streaming Loading UI Component */
371
- .streaming-code-container { background: #1e1e2e; border-radius: var(--radius-md); border: 1px solid #313244; overflow: hidden; margin: 20px 0; box-shadow: var(--shadow-lg); }
372
- .streaming-code-header { background: #11111b; padding: 14px 20px; font-size: 12px; font-weight: 700; color: #a6adc8; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #313244; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1.5px; }
373
  .loading-ring { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--brand-saffron); border-radius: 50%; animation: ringSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
374
  @keyframes ringSpin { to { transform: rotate(360deg); } }
375
  .streaming-code-container pre { margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }
376
 
377
  /* Workspace Execute Card */
378
- .workspace-execute-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 20px; margin: 20px 0; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); transition: var(--ease-smooth); }
379
- .workspace-execute-card:hover { border-color: var(--brand-saffron-light); box-shadow: var(--shadow-md); background: var(--bg-primary); }
380
  .ws-card-left { display: flex; align-items: center; gap: 16px; }
381
- .ws-card-icon-box { width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--bg-primary); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); color: var(--text-primary); }
382
  .ws-card-icon-box svg { color: var(--brand-saffron); }
383
  .ws-card-details h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; color: var(--text-primary); }
384
  .ws-card-details p { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
385
- .btn-launch-workspace { padding: 12px 24px; background: var(--text-primary); color: var(--brand-white); border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--ease-spring); box-shadow: var(--shadow-sm); }
386
- .btn-launch-workspace:hover { transform: scale(1.05); background: var(--brand-saffron); box-shadow: 0 6px 15px rgba(255,153,51,0.35); }
387
 
388
  /* ---------------------------------------------------------------------------------------
389
- I. BOTTOM INPUT DOCK & TOOLS
390
  --------------------------------------------------------------------------------------- */
391
  .input-dock { flex-shrink: 0; padding: 0 40px 32px; background: transparent; position: relative; z-index: var(--z-dock); }
392
- .input-master-container { display: flex; flex-direction: column; background: var(--bg-glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transition: var(--ease-smooth); }
393
- .input-master-container:focus-within { border-color: var(--brand-saffron); box-shadow: 0 20px 40px -5px rgba(255,153,51,0.15), 0 0 0 4px var(--brand-saffron-light); }
394
 
395
- /* Upload Preview Header (Non-Technical Vocabulary) */
396
  .upload-preview-bar { display: none; padding: 20px 28px 0; align-items: center; gap: 16px; }
397
  .upload-preview-bar.visible { display: flex; animation: fadeIn 0.3s ease; }
398
- .upload-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-light); display: flex; justify-content: center; align-items: center; background: var(--bg-tertiary); font-size: 24px; box-shadow: var(--shadow-sm); }
399
  .upload-meta { flex: 1; }
400
  .upload-filename { font-size: 14px; font-weight: 700; color: var(--text-primary); max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
401
- .upload-status-text { font-size: 12px; color: var(--brand-green); font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
402
  .upload-status-text svg { width: 14px; height: 14px; }
403
 
404
- .btn-discard-upload { background: rgba(239, 68, 68, 0.1); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-error); transition: var(--ease-fast); }
405
  .btn-discard-upload:hover { background: var(--text-error); color: #fff; }
406
 
407
  .input-tools-row { display: flex; align-items: flex-end; gap: 12px; padding: 14px 20px 14px 24px; }
@@ -412,109 +409,109 @@
412
  /* Attachment Menu Dropdown */
413
  .attachment-module { position: relative; }
414
  .btn-tool-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: var(--ease-fast); }
415
- .btn-tool-icon:hover { background: var(--bg-tertiary); color: var(--text-primary); }
416
  .btn-tool-icon svg { width: 24px; height: 24px; stroke-width: 2; }
417
 
418
- .attachment-dropdown { position: absolute; bottom: 60px; left: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-xl); display: none; flex-direction: column; gap: 6px; z-index: var(--z-dropdown); min-width: 240px; transform: translateY(15px) scale(0.95); opacity: 0; transition: all var(--ease-fast); transform-origin: bottom left; }
419
  .attachment-dropdown.visible { display: flex; transform: translateY(0) scale(1); opacity: 1; }
420
  .dropdown-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary); transition: var(--ease-fast); }
421
- .dropdown-item:hover { background: var(--bg-tertiary); color: var(--brand-saffron-dark); }
422
  .dropdown-item svg { width: 20px; height: 20px; color: var(--text-secondary); }
423
  .dropdown-item:hover svg { color: var(--brand-saffron); }
424
  .stealth-input { display: none; }
425
 
426
  /* Smart Language Toggle & Mic */
427
- .language-toggle-chip { font-size: 13px; font-weight: 800; color: var(--text-secondary); border: 2px solid var(--border-light); background: var(--bg-primary); border-radius: 10px; padding: 6px 12px; cursor: pointer; transition: var(--ease-smooth); display: flex; align-items: center; gap: 6px; user-select: none; }
428
- .language-toggle-chip:hover { background: var(--brand-saffron-light); color: var(--brand-saffron-dark); border-color: var(--brand-saffron); }
429
- .language-toggle-chip.hindi-active { background: var(--brand-green-light); color: var(--brand-green-dark); border-color: var(--brand-green); }
430
  .language-toggle-chip svg { width: 16px; height: 16px; }
431
 
432
  .btn-mic-tool.active-listening { color: #ffffff; background: var(--text-error); animation: recordPulse 1.5s infinite; border-radius: var(--radius-full); }
433
- @keyframes recordPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
434
 
435
  /* Master Send Button */
436
- .btn-master-send { width: 48px; height: 48px; border-radius: 16px; border: none; background: linear-gradient(135deg, var(--brand-saffron) 0%, var(--brand-green) 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--ease-spring); box-shadow: 0 6px 20px rgba(19, 136, 8, 0.25); }
437
  .btn-master-send svg { width: 20px; height: 20px; fill: white; transition: transform 0.2s; }
438
- .btn-master-send:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255, 153, 51, 0.4); }
439
  .btn-master-send:hover svg { transform: translate(2px, -2px); }
440
- .btn-master-send:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(100%); transform: none; box-shadow: none; }
441
 
442
  .bottom-branding-text { text-align: center; font-size: 12px; color: var(--text-tertiary); margin-top: 16px; font-weight: 600; letter-spacing: 0.5px; }
443
 
444
  /* ---------------------------------------------------------------------------------------
445
- J. WORKSPACE PRO (VS-CODE LIKE EDITOR PANEL)
446
  --------------------------------------------------------------------------------------- */
447
- .code-workspace-panel { width: 0; background: #1e1e1e; border-left: 1px solid var(--border-light); display: flex; flex-direction: column; transition: width var(--ease-smooth); overflow: hidden; box-shadow: -15px 0 40px rgba(0,0,0,0.15); z-index: var(--z-workspace); }
448
  .code-workspace-panel.expanded { width: 55%; }
449
 
450
- .workspace-header-bar { padding: 16px 24px; border-bottom: 1px solid #333; background: #252526; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
451
  .workspace-title-group { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: #abb2bf; font-family: var(--font-mono); letter-spacing: 0.5px;}
452
  .workspace-tools { display: flex; gap: 10px; }
453
 
454
- .btn-workspace-tool { padding: 8px 16px; border-radius: var(--radius-sm); background: #3e4451; border: 1px solid #181a1f; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #fff; transition: var(--ease-fast); font-size: 13px; font-weight: 600; }
455
- .btn-workspace-tool:hover { background: #4b5263; }
456
 
457
  .btn-workspace-tool.close { padding: 8px; background: transparent; border-color: transparent; color: #abb2bf; }
458
- .btn-workspace-tool.close:hover { color: #e06c75; background: rgba(224, 108, 117, 0.1); }
459
 
460
- .workspace-editor-surface { flex: 1; overflow-y: auto; background: #282c34; padding: 24px; position: relative; }
461
  .workspace-editor-surface pre { margin: 0; padding: 0; background: transparent; font-family: var(--font-mono); font-size: 15px; line-height: 1.6; overflow-x: auto; color: #abb2bf; border: none; box-shadow: none;}
462
 
463
  /* ---------------------------------------------------------------------------------------
464
  K. LIVE MODE FULLSCREEN OVERLAY
465
  --------------------------------------------------------------------------------------- */
466
- .live-mode-viewport { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); z-index: var(--z-live); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--ease-smooth); }
467
  .live-mode-viewport.active { opacity: 1; pointer-events: auto; }
468
- .btn-close-live { position: absolute; top: 40px; right: 40px; background: rgba(0,0,0,0.04); border: none; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; cursor: pointer; transition: var(--ease-spring); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
469
- .btn-close-live:hover { background: rgba(239, 68, 68, 0.15); color: var(--text-error); transform: rotate(90deg); }
470
 
471
  .pulsing-orb-wrapper { position: relative; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; margin-bottom: 50px; }
472
- .energy-core { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); box-shadow: 0 0 50px rgba(19, 136, 8, 0.5); position: relative; z-index: 2; transition: transform 0.15s ease-out; }
473
- /* Voice speaking animation */
474
  .energy-core.speaking { animation: coreSpeak 0.5s infinite alternate; }
475
- @keyframes coreSpeak { 0% { transform: scale(1); box-shadow: 0 0 30px rgba(19,136,8,0.4); } 100% { transform: scale(1.1); box-shadow: 0 0 60px rgba(255,153,51,0.6); } }
476
 
477
  .energy-ring { position: absolute; inset: 0; border: 3px solid var(--brand-saffron); border-radius: 50%; opacity: 0; animation: energyRipple 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
478
  .energy-ring:nth-child(2) { animation-delay: 0.8s; border-color: var(--brand-green); }
479
- .energy-ring:nth-child(3) { animation-delay: 1.6s; border-color: var(--text-primary); }
480
  @keyframes energyRipple { 0% { transform: scale(0.4); opacity: 1; border-width: 6px; } 100% { transform: scale(1.6); opacity: 0; border-width: 1px; } }
481
 
482
- .live-feedback-status { font-size: 28px; font-weight: 900; color: var(--text-primary); margin-bottom: 16px; font-family: var(--font-sans); letter-spacing: -0.5px; }
483
  .live-feedback-text { font-size: 18px; color: var(--text-secondary); max-width: 700px; text-align: center; line-height: 1.6; min-height: 60px; font-weight: 500; padding: 0 20px; }
484
 
485
  .live-control-deck { display: flex; gap: 24px; margin-top: 50px; }
486
  .btn-live-deck { width: 80px; height: 80px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: var(--ease-spring); }
487
- .btn-live-deck.mic-control { background: var(--bg-primary); border: 3px solid var(--border-light); color: var(--text-primary); }
488
- .btn-live-deck.mic-control:hover { transform: translateY(-6px); border-color: var(--brand-saffron); color: var(--brand-saffron); box-shadow: var(--shadow-xl); }
489
  .btn-live-deck.mic-control.is-recording { background: var(--text-error); color: white; border-color: var(--text-error); animation: pulseMicLive 1.2s infinite; }
490
- @keyframes pulseMicLive { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); } 70% { box-shadow: 0 0 0 20px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
491
 
492
  /* Scroll Trigger Button */
493
- .btn-scroll-trigger { position: absolute; bottom: 150px; left: 50%; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-glass); backdrop-filter: blur(15px); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); transition: var(--ease-smooth); z-index: 20; }
494
  .btn-scroll-trigger.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
495
- .btn-scroll-trigger:hover { background: var(--text-primary); color: var(--text-inverse); transform: translateX(-50%) translateY(-5px); box-shadow: var(--shadow-xl); }
496
 
497
  /* ---------------------------------------------------------------------------------------
498
  L. AUTHENTICATION SECURE GATEWAY (MODAL)
499
  --------------------------------------------------------------------------------------- */
500
- .secure-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); z-index: var(--z-modal); display: none; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
501
- .secure-modal-surface { background: var(--bg-primary); padding: 44px; border-radius: var(--radius-xl); width: 90%; max-width: 460px; box-shadow: var(--shadow-xl); position: relative; border: 1px solid rgba(255,255,255,0.4); }
502
- .btn-modal-dismiss { position: absolute; top: 24px; right: 24px; background: var(--bg-secondary); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; color: var(--text-secondary); cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
503
- .btn-modal-dismiss:hover { background: #fee2e2; color: var(--text-error); }
504
  .modal-brand-header { text-align: center; margin-bottom: 36px; font-family: var(--font-sans); font-size: 28px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; }
505
 
506
- .auth-tab-switch { display: flex; background: var(--bg-secondary); padding: 6px; border-radius: var(--radius-md); margin-bottom: 28px; }
507
  .auth-tab-item { flex: 1; padding: 14px; text-align: center; border-radius: var(--radius-sm); font-size: 15px; font-weight: 800; color: var(--text-secondary); cursor: pointer; transition: var(--ease-fast); }
508
- .auth-tab-item.active { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-sm); }
509
 
510
  .auth-form-view { display: none; flex-direction: column; animation: slideIn 0.3s ease; }
511
  .auth-form-view.active { display: flex; }
512
 
513
- .auth-input-element { width: 100%; padding: 18px; border: 2px solid var(--border-light); border-radius: var(--radius-md); font-size: 16px; outline: none; background: var(--bg-secondary); transition: var(--ease-fast); font-family: var(--font-sans); margin-bottom: 20px; font-weight: 500; }
514
- .auth-input-element:focus { border-color: var(--brand-saffron); background: var(--bg-primary); box-shadow: 0 0 0 4px var(--brand-saffron-light); }
 
515
 
516
- .btn-auth-execute { width: 100%; padding: 18px; background: var(--text-primary); color: var(--brand-white); border: none; border-radius: var(--radius-md); font-size: 16px; font-weight: 800; cursor: pointer; transition: var(--ease-fast); margin-top: 10px; }
517
- .btn-auth-execute:hover { background: #000000; transform: translateY(-2px); box-shadow: var(--shadow-md); }
518
  .btn-auth-return { width: 100%; padding: 14px; background: transparent; color: var(--text-tertiary); border: none; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: 0.2s; }
519
  .btn-auth-return:hover { color: var(--text-primary); }
520
 
@@ -570,12 +567,12 @@
570
  <div class="startup-overlay" id="welcomeOverlay">
571
  <div class="startup-logo-container">
572
  <div class="startup-logo-glow"></div>
573
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Core Identity">
574
  </div>
575
- <h1 class="startup-title">Welcome to Arjun 2.O</h1>
576
- <p class="startup-desc">Professional Enterprise Edition. Experience secure workspace logic generation, high-fidelity visual rendering, and zero-latency live conversational mode.</p>
577
  <button class="btn-startup-launch" id="btnLaunchSystem">
578
- Initialize System
579
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
580
  </button>
581
  </div>
@@ -596,7 +593,7 @@
596
  </div>
597
 
598
  <div class="live-feedback-status" id="liveStatusText">Initializing Audio Stream...</div>
599
- <div class="live-feedback-text" id="liveTranscriptText">Speak directly to Arjun. Natural language processing active.</div>
600
 
601
  <div class="live-control-deck">
602
  <button class="btn-live-deck mic-control" id="liveMicBtn">
@@ -622,10 +619,10 @@
622
  <aside class="sidebar-container" id="sidebar">
623
  <div class="sidebar-header">
624
  <a href="#" class="brand-identity">
625
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo">
626
  <div class="brand-typography">
627
- <span class="brand-name">ARJUN 2.O</span>
628
- <span class="brand-edition">Professional</span>
629
  </div>
630
  </a>
631
  <button class="btn-mobile-close" id="btnSidebarClose">
@@ -655,8 +652,8 @@
655
 
656
  <!-- Branding Box -->
657
  <div class="developer-credit-box">
658
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Core Image">
659
- <h3 class="dev-box-title">Arjun Intelligence</h3>
660
  <p class="dev-box-subtitle">ENGINEERED BY ABHAY KUMAR</p>
661
  </div>
662
 
@@ -697,12 +694,11 @@
697
  <div class="chat-hero-section" id="welcomeState">
698
  <div class="hero-avatar-wrapper">
699
  <div class="hero-avatar-glow"></div>
700
- <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo Large">
701
  </div>
702
  <h2 class="hero-greeting">How can I assist you today?</h2>
703
  <p class="hero-description">Experience next-generation reasoning, seamless multi-file analysis, and secure workspace code generation engineered by Abhay Kumar.</p>
704
 
705
- <!-- RESTORED: GUEST BADGE LIMIT DISPLAY -->
706
  <div id="guestBadge" class="guest-warning-badge">
707
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
708
  Guest Mode Active: <span id="guestCountDisplay">0</span>/3 Queries Used. Please login.
@@ -795,7 +791,7 @@
795
  </button>
796
 
797
  <!-- Expanding Text Area -->
798
- <textarea class="main-textarea" id="mainChatInput" placeholder="Message Arjun Intelligence..." rows="1"></textarea>
799
 
800
  <!-- Master Send Button -->
801
  <button class="btn-master-send" id="masterSendBtn">
@@ -803,7 +799,7 @@
803
  </button>
804
  </div>
805
  </div>
806
- <div class="bottom-branding-text">Secured by Arjun Core Architecture • Developed by Abhay Kumar</div>
807
  </div>
808
  </main>
809
 
@@ -838,7 +834,7 @@
838
  <button class="btn-modal-dismiss" id="btnAuthClose">
839
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
840
  </button>
841
- <div class="modal-brand-header">Arjun Network</div>
842
 
843
  <div class="auth-tab-switch">
844
  <div class="auth-tab-item active" id="btn-tab-login">Connect</div>
@@ -882,17 +878,17 @@
882
  // 1. CONFIGURATION & STATE MANAGEMENT
883
  // =======================================================================================
884
  const Config = {
885
- GAS_URL: "https://script.google.com/macros/s/AKfycbzTsXGoVh97JjtFAAG825GF4WUZqf7FDB3Zbxyf0nrLXt_1HjJSSqA829UcdoamRPvg0A/exec",
886
- LOGO_URL: "https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png",
887
  PDF_WORKER: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js',
888
- API_ENDPOINT: '/api/chat', // Change to 'http://localhost:7860/api/chat' if running UI separately
889
  };
890
 
891
  pdfjsLib.GlobalWorkerOptions.workerSrc = Config.PDF_WORKER;
892
 
893
  const AppState = {
894
- currentUser: localStorage.getItem('arjun_user') || null,
895
- guestCount: parseInt(localStorage.getItem('arjun_guest') || '0', 10),
896
  history: [],
897
  pendingAttachment: null,
898
  isProcessing: false,
@@ -905,7 +901,6 @@
905
  isMicRecording: false
906
  };
907
 
908
- // Initialize Gradio Client Dynamically
909
  window.initGradioEngine = async function() {
910
  try {
911
  const module = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js");
@@ -918,7 +913,7 @@
918
  window.initGradioEngine();
919
 
920
  // =======================================================================================
921
- // 2. UTILITY ENGINE (Robust Copy, Notifications, and Text Cleaners)
922
  // =======================================================================================
923
  const Utils = {
924
  showToast: (message) => {
@@ -934,19 +929,17 @@
934
  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
935
  },
936
 
937
- // ✨ CRITICAL BUG FIX 1: Intelligent Text Cleaner for TTS
938
- // Ignores code, links, images, so the voice doesn't read garbage.
939
  cleanTextForVoice: (rawText) => {
940
  if(!rawText) return "";
941
  let cleaned = rawText;
942
 
943
- cleaned = cleaned.replace(/```[\s\S]*?```/g, ''); // Remove Markdown Code Blocks
944
- cleaned = cleaned.replace(/`.*?`/g, ''); // Remove Inline Code
945
- cleaned = cleaned.replace(/!\[.*?\]\(.*?\)/g, ''); // Remove Markdown Images
946
- cleaned = cleaned.replace(/\[(.*?)\]\(.*?\)/g, '$1'); // Extract just the text from Links
947
- cleaned = cleaned.replace(/<think>[\s\S]*?<\/think>/gi, ''); // Remove Think Tags
948
- cleaned = cleaned.replace(/https?:\/\/[^\s]+/g, ''); // Remove stray URLs
949
- cleaned = cleaned.replace(/[*_~#]/g, ''); // Remove Markdown formatting symbols
950
 
951
  return cleaned.trim();
952
  },
@@ -1035,7 +1028,7 @@
1035
  if (actionType === 'register_send_otp') {
1036
  payload.name = document.getElementById('authRegName').value.trim();
1037
  payload.email = document.getElementById('authRegEmail').value.trim();
1038
- payload.phone = "0000000000"; payload.organization = "Arjun Base";
1039
  if (!payload.email || !payload.name) return Utils.showToast("Identification details required.");
1040
  buttonId = 'btn-fire-reg-otp';
1041
  }
@@ -1057,7 +1050,6 @@
1057
  triggerBtn.innerText = 'Establishing Connection...';
1058
 
1059
  try {
1060
- // ✨ CRITICAL BUG FIX: mode: 'cors' handles redirect issues from GAS effectively
1061
  const response = await fetch(Config.GAS_URL, {
1062
  method: 'POST',
1063
  mode: 'cors',
@@ -1073,7 +1065,7 @@
1073
  else if (actionType === 'login_send_otp') AuthManager.switchPhase('auth-log-phase-1', 'auth-log-phase-2');
1074
  else if (actionType === 'register_verify' || actionType === 'login_verify') {
1075
  AppState.currentUser = payload.email;
1076
- localStorage.setItem('arjun_user', AppState.currentUser);
1077
  AuthManager.closeModal();
1078
  AuthManager.initUI();
1079
  ChatEngine.syncHistoryFromCloud();
@@ -1090,7 +1082,7 @@
1090
  },
1091
 
1092
  logout: () => {
1093
- localStorage.removeItem('arjun_user');
1094
  location.reload();
1095
  }
1096
  };
@@ -1135,11 +1127,11 @@
1135
  };
1136
 
1137
  // =======================================================================================
1138
- // 5. SPEECH & TTS ENGINE (Bilingual STT + Gradio Edge-TTS)
1139
  // =======================================================================================
1140
  const VoiceEngine = {
1141
  recognition: null,
1142
- currentLanguage: 'en-US', // Default changed to purely English
1143
  sessionTranscript: '',
1144
 
1145
  init: () => {
@@ -1147,7 +1139,6 @@
1147
  if (!SR) return;
1148
 
1149
  VoiceEngine.recognition = new SR();
1150
- // ✨ CRITICAL BUG FIX 2: Set continuous to false to capture natural pauses perfectly.
1151
  VoiceEngine.recognition.continuous = false;
1152
  VoiceEngine.recognition.interimResults = true;
1153
  VoiceEngine.recognition.lang = VoiceEngine.currentLanguage;
@@ -1187,7 +1178,6 @@
1187
 
1188
  if (AppState.isLiveModeEngaged) {
1189
  document.getElementById('liveTranscriptText').innerText = `"${currentDictation}"`;
1190
- // Once the sentence is finalized, send it.
1191
  if(finalTranscript.trim().length > 0) {
1192
  document.getElementById('liveStatusText').innerText = "Synthesizing...";
1193
  document.getElementById('mainChatInput').value = finalTranscript.trim();
@@ -1270,11 +1260,9 @@
1270
  const cleanSpeechText = Utils.cleanTextForVoice(rawText);
1271
 
1272
  if(!cleanSpeechText.trim()) {
1273
- // Nothing readable found (e.g., just code blocks)
1274
  if (AppState.isLiveModeEngaged) {
1275
  document.getElementById('liveOrb').classList.remove('speaking');
1276
  document.getElementById('liveStatusText').innerText = "Tap mic to respond";
1277
- // Auto-start mic again
1278
  setTimeout(()=> VoiceEngine.toggleDictation(), 800);
1279
  }
1280
  return;
@@ -1300,12 +1288,11 @@
1300
  const audioUrl = typeof result.data[0] === 'string' ? result.data[0] : result.data[0].url;
1301
  const audio = new Audio(audioUrl);
1302
 
1303
- // ✨ CRITICAL BUG FIX 3: True Live Mode Conversation (Auto-restarts Mic)
1304
  audio.onended = () => {
1305
  if (AppState.isLiveModeEngaged) {
1306
  document.getElementById('liveOrb').classList.remove('speaking');
1307
  document.getElementById('liveStatusText').innerText = "Listening...";
1308
- VoiceEngine.toggleDictation(); // Automatically restart mic for the next turn
1309
  }
1310
  };
1311
 
@@ -1349,7 +1336,7 @@
1349
  };
1350
 
1351
  // =======================================================================================
1352
- // 7. FILE & DOCUMENT PROCESSOR (Non-Technical Vocabulary)
1353
  // =======================================================================================
1354
  const FileProcessor = {
1355
  triggerFileSelector: (type) => {
@@ -1442,8 +1429,6 @@
1442
  fileReader.readAsText(file);
1443
  }
1444
  }
1445
-
1446
- // Reset stealth inputs so the same file can be selected again
1447
  document.querySelectorAll('.stealth-input').forEach(i => i.value = '');
1448
  },
1449
 
@@ -1455,7 +1440,7 @@
1455
  };
1456
 
1457
  // =======================================================================================
1458
- // 8. WORKSPACE ENGINE & MARKDOWN RENDERING
1459
  // =======================================================================================
1460
  const WorkspaceEngine = {
1461
  launch: (codeBlockId) => {
@@ -1520,7 +1505,6 @@
1520
  };
1521
  marked.use({ renderer: MD_Renderer });
1522
 
1523
- // Event delegation for dynamically rendered Workspace buttons
1524
  document.getElementById('msgs').addEventListener('click', function(e) {
1525
  if (e.target && e.target.classList.contains('btn-launch-ws')) {
1526
  const blockId = e.target.getAttribute('data-id');
@@ -1529,7 +1513,7 @@
1529
  });
1530
 
1531
  // =======================================================================================
1532
- // 9. CORE CHAT ENGINE & LLM LOGIC
1533
  // =======================================================================================
1534
  const ChatEngine = {
1535
  handleKeyboard: (e) => {
@@ -1669,7 +1653,6 @@
1669
  let actionTray = bubbleDOM.querySelector('.bot-actions-row');
1670
  if (!isCurrentlyStreaming && !actionTray && strippedMarkup.trim().length > 0) {
1671
  const safeRawCopy = strippedMarkup.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
1672
- // safeRawTTS is passed raw because VoiceEngine.executeTTS will clean it properly
1673
  const safeRawTTS = strippedMarkup.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, ' ');
1674
 
1675
  const actionsHTML = `
@@ -1698,18 +1681,16 @@
1698
 
1699
  if (!rawUserText && !AppState.pendingAttachment) return;
1700
 
1701
- // VALIDATE GUEST LIMIT
1702
  if (!AppState.currentUser) {
1703
  if (AppState.guestCount >= 3) {
1704
  AuthManager.openModal();
1705
  return Utils.showToast("Query limit reached. Secure Login required.");
1706
  }
1707
  AppState.guestCount++;
1708
- localStorage.setItem('arjun_guest', AppState.guestCount.toString());
1709
  document.getElementById('guestCountDisplay').innerText = AppState.guestCount;
1710
  }
1711
 
1712
- // Prepare UI
1713
  inputField.value = '';
1714
  inputField.style.height = 'auto';
1715
  document.getElementById('masterSendBtn').disabled = true;
@@ -1719,18 +1700,16 @@
1719
  if (wState) wState.style.display = 'none';
1720
 
1721
  let payloadStr = rawUserText;
1722
- let historyStr = rawUserText; // ✨ CRITICAL BUG FIX 4: Prevent Memory Blob Explosion
1723
  let payloadAttachments = [];
1724
  let visualBadge = null;
1725
  let previewHTMLForChat = '';
1726
 
1727
- // Attachment Processing Logic
1728
  if (AppState.pendingAttachment) {
1729
  previewHTMLForChat = ChatEngine.buildPreviewHTML(AppState.pendingAttachment);
1730
 
1731
  if (AppState.pendingAttachment.type === 'text') {
1732
  payloadStr = `[Document Analyzed: ${AppState.pendingAttachment.name}]\n\n---DATA BEGIN---\n${AppState.pendingAttachment.data}\n---DATA END---\n\nUser Prompt: ${rawUserText}`;
1733
- // For history, only store the prompt to save tokens!
1734
  historyStr = `[Document previously attached: ${AppState.pendingAttachment.name}]\nUser Prompt: ${rawUserText}`;
1735
  visualBadge = 'File Appended';
1736
  } else {
@@ -1755,11 +1734,9 @@
1755
  const activeBotBubble = ChatEngine.renderBotMessage('', false);
1756
  UIManager.forceScrollDown();
1757
 
1758
- // 🎲 Dynamic Pollinations Generator
1759
  const cryptographicSeed = Math.floor(Math.random() * 999999999);
1760
 
1761
- // 🧠 Advanced Cognitive System Instructions
1762
- let cognitivePrompt = `You are Arjun 2.O, a sophisticated enterprise AI system architected by Abhay Kumar.
1763
  LANGUAGE REGULATION: Your default cognitive language is ENGLISH. If the user writes in English, reply in purely professional English. If the user writes in Hindi or Hinglish, reply gracefully in Hindi. Never force Hindi translation if the prompt is English.
1764
 
1765
  IMAGE SYNTHESIS OVERRIDE:
@@ -1784,7 +1761,6 @@
1784
  temperature: 0.75
1785
  };
1786
 
1787
- // Network Transmission Logic
1788
  try {
1789
  const fetchOp = await fetch(Config.API_ENDPOINT, {
1790
  method: 'POST',
@@ -1797,7 +1773,7 @@
1797
  const networkReader = fetchOp.body.getReader();
1798
  const textDecoder = new TextDecoder();
1799
  let responseBuffer = "";
1800
- let streamChunkBuffer = ""; // ✨ CRITICAL BUG FIX 5: Resolves fragmented JSON network chunks
1801
 
1802
  AppState.isStreamingActive = true;
1803
 
@@ -1808,7 +1784,6 @@
1808
  streamChunkBuffer += textDecoder.decode(value, { stream: true });
1809
  const fragmentedLines = streamChunkBuffer.split('\n');
1810
 
1811
- // Keep the last incomplete line in the buffer
1812
  streamChunkBuffer = fragmentedLines.pop();
1813
 
1814
  for (let line of fragmentedLines) {
@@ -1834,7 +1809,7 @@
1834
  ChatEngine.saveHistoryToCloud();
1835
 
1836
  if (AppState.isLiveModeEngaged) {
1837
- document.getElementById('liveStatusText').innerText = "Arjun Transmitting...";
1838
  await VoiceEngine.executeTTS(responseBuffer);
1839
  }
1840
 
@@ -1856,19 +1831,17 @@
1856
  // 10. EVENT DELEGATION & BOOTSTRAP INVOCATION
1857
  // =======================================================================================
1858
 
1859
- // Define global function for welcome screen overlay
1860
- window.startArjunApp = function() {
1861
  document.getElementById('welcomeOverlay').classList.add('hidden');
1862
- localStorage.setItem('arjun_welcome_seen', 'true');
1863
  setTimeout(() => { document.getElementById('welcomeOverlay').style.display = 'none'; }, 400);
1864
  };
1865
 
1866
- // Bind all interactive elements safely
1867
  document.addEventListener('DOMContentLoaded', () => {
1868
  // Sidebar Controls
1869
  document.getElementById('btnSidebarOpen')?.addEventListener('click', UIManager.toggleSidebar);
1870
  document.getElementById('btnSidebarClose')?.addEventListener('click', UIManager.toggleSidebar);
1871
- document.getElementById('btnLaunchSystem')?.addEventListener('click', window.startArjunApp);
1872
 
1873
  // Auth Flow Controls
1874
  document.getElementById('loginPromptBtn')?.addEventListener('click', AuthManager.openModal);
@@ -1889,7 +1862,6 @@
1889
  // File Attachment Routing
1890
  document.getElementById('btnAttachMenuToggle')?.addEventListener('click', UIManager.toggleAttachMenu);
1891
 
1892
- // Reattach clicking events to the options
1893
  document.getElementById('attachDropdownMenu')?.addEventListener('click', (e) => {
1894
  const target = e.target.closest('.dropdown-item');
1895
  if(!target) return;
@@ -1933,7 +1905,7 @@
1933
  document.getElementById('scrollTriggerBtn')?.addEventListener('click', UIManager.forceScrollDown);
1934
 
1935
  // Ensure startup screen displays if memory cleared
1936
- if(!localStorage.getItem('arjun_welcome_seen')) {
1937
  const overlay = document.getElementById('welcomeOverlay');
1938
  if(overlay) overlay.style.display = 'flex';
1939
  } else {
 
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <!-- Viewport Settings: Disables zoom, completely removes blue tap highlights on mobile devices -->
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
8
+ <meta name="description" content="CODE VED Ultimate Enterprise Artificial Intelligence System engineered by Abhay Kumar.">
9
+ <meta name="theme-color" content="#000000">
10
 
11
+ <title>CODE VED - Premium AI Workspace</title>
12
 
13
  <!-- =========================================================================================
14
  [1] EXTERNAL RESOURCES, FONTS & LIBRARIES
 
29
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
30
 
31
  <!-- =========================================================================================
32
+ [2] MASSIVE ENTERPRISE CSS ARCHITECTURE (APPLE DARK GLASSMORPHISM)
33
  ========================================================================================= -->
34
  <style>
35
  /* ---------------------------------------------------------------------------------------
36
+ A. CSS VARIABLES & DESIGN TOKENS (DARK MODE)
37
  --------------------------------------------------------------------------------------- */
38
  :root {
39
+ /* Branding Colors - Indian Identity */
40
  --brand-saffron: #FF9933;
41
+ --brand-saffron-light: rgba(255, 153, 51, 0.2);
42
  --brand-saffron-dark: #e68a2e;
43
 
44
  --brand-white: #FFFFFF;
45
+ --brand-white-glass: rgba(255, 255, 255, 0.1);
46
 
47
  --brand-green: #138808;
48
+ --brand-green-light: rgba(19, 136, 8, 0.2);
49
  --brand-green-dark: #0f6e06;
50
 
51
+ /* Structural Colors - Pure Apple Dark */
52
+ --bg-primary: #000000;
53
+ --bg-secondary: #1c1c1e;
54
+ --bg-tertiary: #2c2c2e;
55
+ --bg-glass: rgba(28, 28, 30, 0.65); /* Dark Glass */
56
 
57
  /* Text & Typography Colors */
58
+ --text-primary: #ffffff;
59
+ --text-secondary: #a1a1a6;
60
+ --text-tertiary: #86868b;
61
+ --text-inverse: #000000;
62
+ --text-error: #ff453a;
63
 
64
  /* Borders & Dividers */
65
+ --border-light: rgba(255, 255, 255, 0.12);
66
+ --border-medium: rgba(255, 255, 255, 0.25);
67
 
68
+ /* Shadows & Elevation (Dark mode needs tighter shadows) */
69
+ --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
70
+ --shadow-sm: 0 4px 12px rgba(0,0,0,0.5);
71
+ --shadow-md: 0 8px 24px rgba(0,0,0,0.6);
72
+ --shadow-lg: 0 12px 32px rgba(0,0,0,0.7);
73
+ --shadow-xl: 0 20px 40px rgba(0,0,0,0.8);
74
 
75
  /* Font Families */
76
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
80
  /* Radii */
81
  --radius-sm: 8px;
82
  --radius-md: 12px;
83
+ --radius-lg: 18px;
84
  --radius-xl: 24px;
85
  --radius-full: 9999px;
86
 
 
95
  --z-header: 10;
96
  --z-dropdown: 50;
97
  --z-sidebar: 100;
98
+ --z-workspace: 200;
99
  --z-modal: 5000;
100
  --z-toast: 9000;
101
  --z-live: 9999;
 
108
  box-sizing: border-box;
109
  margin: 0;
110
  padding: 0;
 
111
  -webkit-tap-highlight-color: transparent !important;
112
  -webkit-touch-callout: none !important;
113
  }
 
126
  -moz-osx-font-smoothing: grayscale;
127
  }
128
 
 
129
  *:focus { outline: none !important; }
130
 
131
  button, input, textarea, select {
 
140
  img { max-width: 100%; height: auto; display: block; }
141
  svg { flex-shrink: 0; }
142
 
 
143
  ::-webkit-scrollbar { width: 6px; height: 6px; }
144
  ::-webkit-scrollbar-track { background: transparent; }
145
+ ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; transition: background var(--ease-smooth); }
146
+ ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
147
 
148
  /* ---------------------------------------------------------------------------------------
149
+ C. AMBIENT BACKGROUND SYSTEM (DARK ORBS)
150
  --------------------------------------------------------------------------------------- */
151
  .ambient-environment {
152
  position: fixed; inset: 0; z-index: var(--z-ambient); overflow: hidden; pointer-events: none;
153
+ background: #000000;
154
  }
155
  .ambient-orb {
156
+ position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.15;
157
  animation: orbFloat 40s ease-in-out infinite alternate; will-change: transform;
158
  }
159
  .orb-top-left {
160
+ width: 700px; height: 700px;
161
+ background: radial-gradient(circle, var(--brand-saffron) 0%, transparent 70%);
162
  top: -200px; left: -150px;
163
  }
164
  .orb-bottom-right {
165
+ width: 600px; height: 600px;
166
+ background: radial-gradient(circle, var(--brand-green) 0%, transparent 70%);
167
  bottom: -150px; right: -100px; animation-delay: -20s;
168
  }
169
  @keyframes orbFloat {
170
  0% { transform: translate(0, 0) scale(1); }
171
+ 33% { transform: translate(30px, 50px) scale(1.05); }
172
+ 66% { transform: translate(-20px, 30px) scale(0.95); }
173
+ 100% { transform: translate(40px, -20px) scale(1.1); }
174
  }
175
 
176
  /* ---------------------------------------------------------------------------------------
 
182
  pointer-events: none; width: 90%; max-width: 400px; align-items: center;
183
  }
184
  .toast-notification {
185
+ background: rgba(40, 40, 42, 0.9); backdrop-filter: blur(20px); color: var(--text-primary); padding: 14px 24px;
186
  border-radius: var(--radius-full); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-xl);
187
  animation: toastSlideIn var(--ease-spring) forwards, toastFadeOut 0.4s 3.5s forwards;
188
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; word-break: break-word;
 
196
  E. INITIAL WELCOME OVERLAY
197
  --------------------------------------------------------------------------------------- */
198
  .startup-overlay {
199
+ position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85);
200
+ backdrop-filter: blur(35px) saturate(180%); -webkit-backdrop-filter: blur(35px) saturate(180%); z-index: calc(var(--z-toast) + 100);
201
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
202
  transition: opacity var(--ease-smooth), visibility var(--ease-smooth);
203
  }
204
  .startup-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
205
 
206
  .startup-logo-container { position: relative; margin-bottom: 32px; animation: popIn var(--ease-spring) 0.3s both; }
207
+ .startup-logo-container img { width: 140px; height: 140px; border-radius: var(--radius-xl); object-fit: cover; box-shadow: var(--shadow-xl); border: 1px solid rgba(255,255,255,0.2); position: relative; z-index: 2; }
208
+ .startup-logo-glow { position: absolute; inset: -20px; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); filter: blur(35px); opacity: 0.3; border-radius: var(--radius-full); z-index: 1; animation: pulseGlow 3s infinite alternate; }
209
 
210
+ @keyframes pulseGlow { from { opacity: 0.2; transform: scale(0.95); } to { opacity: 0.4; transform: scale(1.05); } }
211
  @keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
212
 
213
  .startup-title { font-family: var(--font-sans); font-size: 2.5rem; font-weight: 900; color: var(--text-primary); letter-spacing: -1px; margin-bottom: 16px; animation: slideUp var(--ease-smooth) 0.4s both; }
214
  .startup-desc { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; max-width: 550px; margin-bottom: 40px; animation: slideUp var(--ease-smooth) 0.5s both; font-weight: 500; }
215
 
216
+ .btn-startup-launch { padding: 18px 48px; background: var(--text-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-xl); font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: var(--ease-spring); box-shadow: 0 10px 25px rgba(255,255,255,0.1); animation: slideUp var(--ease-smooth) 0.6s both; display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; }
217
+ .btn-startup-launch::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); transform: skewX(-20deg); transition: 0.5s; }
218
+ .btn-startup-launch:hover { background: #e0e0e0; transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 35px rgba(255,255,255,0.2); }
219
  .btn-startup-launch:hover::before { left: 150%; }
220
 
221
  @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
222
 
223
  /* ---------------------------------------------------------------------------------------
224
+ F. CORE APPLICATION LAYOUT & SIDEBAR (GLASSMORPHISM)
225
  --------------------------------------------------------------------------------------- */
226
+ .app-root { position: relative; z-index: var(--z-base); display: flex; height: 100dvh; width: 100vw; overflow: hidden; background: transparent; }
227
 
228
  /* Sidebar Navigation */
229
+ .sidebar-container { width: 320px; display: flex; flex-direction: column; background: rgba(28, 28, 30, 0.75); border-right: 1px solid var(--border-light); flex-shrink: 0; z-index: var(--z-sidebar); transition: transform var(--ease-smooth), box-shadow var(--ease-smooth); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); }
230
  .sidebar-header { padding: 28px 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
231
 
232
  .brand-identity { display: flex; align-items: center; gap: 14px; text-decoration: none; }
233
+ .brand-identity img { width: 50px; height: 50px; border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); transition: transform var(--ease-spring); }
234
  .brand-identity:hover img { transform: scale(1.08) rotate(-3deg); }
235
  .brand-typography { display: flex; flex-direction: column; }
236
  .brand-name { font-family: var(--font-sans); font-weight: 900; font-size: 20px; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.1; }
237
  .brand-edition { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; background: linear-gradient(90deg, var(--brand-saffron), var(--brand-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 4px; }
238
 
239
+ .btn-mobile-close { display: none; background: rgba(255,255,255,0.1); border: none; width: 36px; height: 36px; border-radius: 50%; color: var(--text-primary); cursor: pointer; align-items: center; justify-content: center; transition: var(--ease-fast); }
240
+ .btn-mobile-close:hover { background: rgba(255, 69, 58, 0.2); color: var(--text-error); transform: rotate(90deg); }
241
 
242
  .sidebar-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 28px; }
243
 
244
  /* Auth Widget in Sidebar */
245
+ .auth-widget { background: rgba(0,0,0,0.3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); transition: var(--ease-smooth); backdrop-filter: blur(10px); }
246
  .auth-widget:hover { box-shadow: var(--shadow-md); border-color: var(--border-medium); }
247
 
248
  .btn-secure-connect { width: 100%; padding: 14px; background: var(--text-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--ease-fast); }
249
+ .btn-secure-connect:hover { background: #e0e0e0; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,255,255,0.1); }
250
 
251
  .user-profile-display { display: none; align-items: center; gap: 14px; }
252
+ .avatar-badge { width: 46px; height: 46px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); color: var(--brand-white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: var(--shadow-sm); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
253
  .user-details { flex: 1; overflow: hidden; }
254
  .user-email-id { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
255
  .user-clearance-level { font-size: 11px; color: var(--brand-green); font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
256
+ .user-clearance-level::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 5px rgba(19, 136, 8, 0.8); }
257
+ .btn-system-logout { background: rgba(255, 69, 58, 0.15); color: var(--text-error); border: none; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--ease-fast); border: 1px solid rgba(255, 69, 58, 0.2); }
258
  .btn-system-logout:hover { background: var(--text-error); color: #ffffff; transform: scale(1.05); }
259
 
260
  /* Developer Box */
261
+ .developer-credit-box { background: rgba(0,0,0,0.3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; box-shadow: var(--shadow-sm); margin-top: auto; position: relative; overflow: hidden; backdrop-filter: blur(10px); }
262
+ .developer-credit-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-saffron), var(--brand-white), var(--brand-green)); }
263
  .developer-credit-box img { width: 72px; height: 72px; border-radius: var(--radius-lg); object-fit: cover; margin-bottom: 16px; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); margin-left: auto; margin-right: auto; transition: var(--ease-spring); }
264
  .developer-credit-box:hover img { transform: scale(1.05); }
265
  .dev-box-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
266
  .dev-box-subtitle { font-size: 11px; font-weight: 800; color: var(--text-tertiary); letter-spacing: 1px; text-transform: uppercase; }
267
 
268
  /* Wipe Memory Button */
269
+ .btn-erase-memory { width: 100%; padding: 16px; border-radius: var(--radius-md); background: rgba(0,0,0,0.2); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--ease-fast); display: flex; align-items: center; justify-content: center; gap: 10px; }
270
+ .btn-erase-memory:hover { background: rgba(255, 69, 58, 0.1); color: var(--text-error); border-color: rgba(255, 69, 58, 0.3); }
271
 
272
  /* ---------------------------------------------------------------------------------------
273
+ G. MAIN CHAT AREA & HEADER (GLASSMORPHISM)
274
  --------------------------------------------------------------------------------------- */
275
  .main-chat-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 320px; transition: width var(--ease-smooth); background: transparent; }
276
 
277
+ .chat-top-bar { padding: 18px 32px; border-bottom: 1px solid var(--border-light); background: rgba(28, 28, 30, 0.6); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); display: flex; align-items: center; justify-content: space-between; z-index: var(--z-header); }
278
  .top-bar-left { display: flex; align-items: center; gap: 16px; }
279
+ .btn-hamburger { display: none; background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); cursor: pointer; color: var(--text-primary); width: 42px; height: 42px; border-radius: var(--radius-sm); align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: var(--ease-fast); }
280
+ .btn-hamburger:hover { background: rgba(255,255,255,0.1); }
281
 
282
+ .system-status-pill { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-primary); padding: 8px 18px; background: rgba(0,0,0,0.4); border-radius: var(--radius-full); border: 1px solid var(--border-light); }
283
+ .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.3); animation: statusPulse 2s infinite; }
284
+ @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(19,136,8,0.6); } 70% { box-shadow: 0 0 0 6px rgba(19,136,8,0); } 100% { box-shadow: 0 0 0 0 rgba(19,136,8,0); } }
285
 
286
  /* LIVE MODE ACTIVATOR */
287
+ .btn-activate-live { background: linear-gradient(135deg, #ff453a 0%, #c41e15 100%); color: white; border: none; padding: 10px 22px; border-radius: var(--radius-full); font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 69, 58, 0.4); transition: var(--ease-spring); letter-spacing: 0.5px; border: 1px solid rgba(255,255,255,0.2); }
288
+ .btn-activate-live:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 25px rgba(255, 69, 58, 0.6); }
289
  .btn-activate-live svg { width: 18px; height: 18px; animation: liveBlink 1.5s infinite; }
290
+ @keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
291
 
292
  /* Chat Scrollable Area */
293
  .chat-scroll-area { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 36px; scroll-behavior: smooth; position: relative; }
 
295
  /* Internal Welcome Hero Box */
296
  .chat-hero-section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; margin: auto; animation: slideUpFade 0.7s var(--ease-spring) both; max-width: 750px; }
297
  .hero-avatar-wrapper { position: relative; margin-bottom: 36px; }
298
+ .hero-avatar-wrapper img { width: 100px; height: 100px; border-radius: var(--radius-xl); object-fit: cover; box-shadow: var(--shadow-xl); border: 1px solid var(--border-light); position: relative; z-index: 2; }
299
+ .hero-avatar-glow { position: absolute; inset: -12px; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); filter: blur(30px); opacity: 0.25; border-radius: 40px; z-index: 1; animation: rotateGlow 10s linear infinite;}
300
  @keyframes rotateGlow { 100% { transform: rotate(360deg); } }
301
 
302
+ .hero-greeting { font-size: 42px; font-weight: 900; letter-spacing: -1.5px; margin-bottom: 18px; color: var(--text-primary); text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
303
  .hero-description { font-size: 17px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 40px; font-weight: 500; }
304
 
305
+ .guest-warning-badge { font-size: 13px; font-weight: 700; color: #ff6961; background: rgba(255, 69, 58, 0.1); padding: 10px 20px; border-radius: var(--radius-full); margin-bottom: 32px; display: none; align-items: center; gap: 8px; border: 1px solid rgba(255, 69, 58, 0.3); box-shadow: var(--shadow-sm); }
 
306
  .guest-warning-badge svg { width: 18px; height: 18px; }
307
 
308
  .prompt-suggestions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; }
309
+ .prompt-card { background: rgba(28, 28, 30, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; cursor: pointer; text-align: left; transition: var(--ease-smooth); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
310
  .prompt-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand-saffron); opacity: 0; transition: var(--ease-fast); }
311
+ .prompt-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,0.4); background: rgba(28, 28, 30, 0.8); }
312
  .prompt-card:hover::after { opacity: 1; }
313
+ .prompt-icon { font-size: 28px; margin-bottom: 14px; display: inline-block; background: rgba(255,255,255,0.05); padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border-light); }
314
  .prompt-title { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
315
  .prompt-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
316
 
317
  /* ---------------------------------------------------------------------------------------
318
+ H. CHAT MESSAGE BUBBLES & PREVIEWS (DARK MODE)
319
  --------------------------------------------------------------------------------------- */
320
  .chat-message-row { display: flex; gap: 20px; max-width: 88%; animation: messagePopIn 0.5s var(--ease-spring) both; }
321
  @keyframes messagePopIn { from { opacity: 0; transform: translateY(25px) scale(0.97); } to { opacity: 1; transform: none; } }
322
  .chat-message-row.user-msg { flex-direction: row-reverse; align-self: flex-end; }
323
  .chat-message-row.bot-msg { align-self: flex-start; }
324
 
325
+ .msg-avatar { width: 42px; height: 42px; border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); }
326
+ .user-msg .msg-avatar { background: linear-gradient(135deg, var(--brand-saffron), var(--brand-saffron-dark)); color: var(--brand-white); border: none; }
327
+ .bot-msg .msg-avatar { background: var(--bg-secondary); padding: 2px; }
328
+ .bot-msg .msg-avatar img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
329
 
330
  .msg-content-column { display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; }
331
  .user-msg .msg-content-column { align-items: flex-end; }
332
 
333
+ .file-badge { font-size: 11px; font-weight: 700; color: var(--brand-saffron); background: rgba(255, 153, 51, 0.15); padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 4px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,153,51,0.3); }
334
  .file-badge svg { width: 12px; height: 12px; }
335
 
336
  /* In-Bubble File Previews */
337
+ .chat-in-bubble-img { max-width: 320px; max-height: 320px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--border-light); box-shadow: var(--shadow-md); margin-bottom: 12px; }
338
+ .chat-file-card { display: flex; align-items: center; gap: 14px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-light); padding: 12px 18px; border-radius: var(--radius-md); margin-bottom: 12px; max-width: 350px; backdrop-filter: blur(10px); }
339
+ .chat-file-card .icon { font-size: 24px; background: rgba(255,255,255,0.05); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--brand-white); border: 1px solid var(--border-light); }
340
  .chat-file-card .name { font-size: 14px; font-weight: 600; color: var(--brand-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
341
 
342
  .chat-bubble { padding: 18px 24px; font-size: 16px; line-height: 1.6; position: relative; word-wrap: break-word; overflow-wrap: anywhere; }
343
+ .user-msg .chat-bubble { background: var(--bg-tertiary); color: var(--text-primary); border-radius: 24px 24px 6px 24px; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); }
344
+ .bot-msg .chat-bubble { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--text-primary); border: 1px solid var(--border-medium); border-radius: 6px 24px 24px 24px; box-shadow: var(--shadow-md); width: 100%; }
345
 
346
+ /* Bot Action Buttons */
347
  .bot-actions-row { display: flex; gap: 10px; margin-top: 8px; padding-left: 14px; opacity: 0; transition: opacity var(--ease-smooth); flex-wrap: wrap; }
348
  .bot-msg:hover .bot-actions-row { opacity: 1; }
349
 
350
+ .btn-bot-action { background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); transition: var(--ease-fast); backdrop-filter: blur(10px); }
351
+ .btn-bot-action:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(255,255,255,0.3); }
352
  .btn-bot-action svg { width: 16px; height: 16px; }
353
 
354
+ .btn-bot-action.action-tts { color: #32d74b; border-color: rgba(50, 215, 75, 0.3); background: rgba(50, 215, 75, 0.1); }
355
+ .btn-bot-action.action-tts:hover { background: rgba(50, 215, 75, 0.2); }
356
 
357
  /* Markdown Rendering inside Bubbles */
358
  .chat-bubble p { margin-bottom: 16px; }
359
  .chat-bubble p:last-child { margin-bottom: 0; }
360
+ .chat-bubble strong { font-weight: 800; color: #ffffff; }
361
+ .chat-bubble code { font-family: var(--font-mono); background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 6px; font-size: 0.85em; color: #ff9f0a; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); }
362
+ .user-msg .chat-bubble code { background: rgba(0,0,0,0.3); color: var(--brand-saffron); border-color: rgba(0,0,0,0.5); }
363
  .chat-bubble img { max-width: 100%; border-radius: var(--radius-md); margin: 16px 0; box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); display: block; }
364
+ .chat-bubble pre { background: #000000; color: #abb2bf; padding: 20px; border-radius: var(--radius-md); overflow-x: auto; margin: 20px 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; border: 1px solid #333; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
365
  .chat-bubble pre code { background: transparent; color: inherit; padding: 0; font-weight: 400; border: none; }
366
 
367
  /* Streaming Loading UI Component */
368
+ .streaming-code-container { background: #000000; border-radius: var(--radius-md); border: 1px solid #333; overflow: hidden; margin: 20px 0; box-shadow: var(--shadow-lg); }
369
+ .streaming-code-header { background: #111; padding: 14px 20px; font-size: 12px; font-weight: 700; color: #888; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #333; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1.5px; }
370
  .loading-ring { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--brand-saffron); border-radius: 50%; animation: ringSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
371
  @keyframes ringSpin { to { transform: rotate(360deg); } }
372
  .streaming-code-container pre { margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }
373
 
374
  /* Workspace Execute Card */
375
+ .workspace-execute-card { background: rgba(0,0,0,0.4); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 20px; margin: 20px 0; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); transition: var(--ease-smooth); backdrop-filter: blur(10px); }
376
+ .workspace-execute-card:hover { border-color: rgba(255,255,255,0.4); box-shadow: var(--shadow-md); background: rgba(255,255,255,0.05); }
377
  .ws-card-left { display: flex; align-items: center; gap: 16px; }
378
+ .ws-card-icon-box { width: 54px; height: 54px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); color: var(--text-primary); }
379
  .ws-card-icon-box svg { color: var(--brand-saffron); }
380
  .ws-card-details h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; color: var(--text-primary); }
381
  .ws-card-details p { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
382
+ .btn-launch-workspace { padding: 12px 24px; background: var(--text-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--ease-spring); box-shadow: var(--shadow-sm); }
383
+ .btn-launch-workspace:hover { transform: scale(1.05); background: var(--brand-saffron); color: white; box-shadow: 0 6px 15px rgba(255,153,51,0.35); }
384
 
385
  /* ---------------------------------------------------------------------------------------
386
+ I. BOTTOM INPUT DOCK & TOOLS (GLASSMORPHISM)
387
  --------------------------------------------------------------------------------------- */
388
  .input-dock { flex-shrink: 0; padding: 0 40px 32px; background: transparent; position: relative; z-index: var(--z-dock); }
389
+ .input-master-container { display: flex; flex-direction: column; background: rgba(28, 28, 30, 0.75); backdrop-filter: blur(35px) saturate(180%); -webkit-backdrop-filter: blur(35px) saturate(180%); border: 1px solid var(--border-medium); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transition: var(--ease-smooth); }
390
+ .input-master-container:focus-within { border-color: rgba(255,255,255,0.5); box-shadow: 0 20px 40px -5px rgba(0,0,0,0.8), 0 0 0 4px rgba(255,255,255,0.1); }
391
 
392
+ /* Upload Preview Header */
393
  .upload-preview-bar { display: none; padding: 20px 28px 0; align-items: center; gap: 16px; }
394
  .upload-preview-bar.visible { display: flex; animation: fadeIn 0.3s ease; }
395
+ .upload-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-light); display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); font-size: 24px; box-shadow: var(--shadow-sm); }
396
  .upload-meta { flex: 1; }
397
  .upload-filename { font-size: 14px; font-weight: 700; color: var(--text-primary); max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
398
+ .upload-status-text { font-size: 12px; color: #32d74b; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
399
  .upload-status-text svg { width: 14px; height: 14px; }
400
 
401
+ .btn-discard-upload { background: rgba(255, 69, 58, 0.15); border: 1px solid rgba(255, 69, 58, 0.3); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-error); transition: var(--ease-fast); }
402
  .btn-discard-upload:hover { background: var(--text-error); color: #fff; }
403
 
404
  .input-tools-row { display: flex; align-items: flex-end; gap: 12px; padding: 14px 20px 14px 24px; }
 
409
  /* Attachment Menu Dropdown */
410
  .attachment-module { position: relative; }
411
  .btn-tool-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: var(--ease-fast); }
412
+ .btn-tool-icon:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
413
  .btn-tool-icon svg { width: 24px; height: 24px; stroke-width: 2; }
414
 
415
+ .attachment-dropdown { position: absolute; bottom: 60px; left: 0; background: rgba(40, 40, 42, 0.95); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-xl); display: none; flex-direction: column; gap: 6px; z-index: var(--z-dropdown); min-width: 240px; transform: translateY(15px) scale(0.95); opacity: 0; transition: all var(--ease-fast); transform-origin: bottom left; }
416
  .attachment-dropdown.visible { display: flex; transform: translateY(0) scale(1); opacity: 1; }
417
  .dropdown-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary); transition: var(--ease-fast); }
418
+ .dropdown-item:hover { background: rgba(255,255,255,0.1); color: var(--brand-saffron); }
419
  .dropdown-item svg { width: 20px; height: 20px; color: var(--text-secondary); }
420
  .dropdown-item:hover svg { color: var(--brand-saffron); }
421
  .stealth-input { display: none; }
422
 
423
  /* Smart Language Toggle & Mic */
424
+ .language-toggle-chip { font-size: 13px; font-weight: 800; color: var(--text-secondary); border: 1px solid var(--border-light); background: rgba(0,0,0,0.3); border-radius: 10px; padding: 6px 12px; cursor: pointer; transition: var(--ease-smooth); display: flex; align-items: center; gap: 6px; user-select: none; }
425
+ .language-toggle-chip:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); border-color: rgba(255,255,255,0.3); }
426
+ .language-toggle-chip.hindi-active { background: rgba(19, 136, 8, 0.2); color: #32d74b; border-color: rgba(50, 215, 75, 0.5); }
427
  .language-toggle-chip svg { width: 16px; height: 16px; }
428
 
429
  .btn-mic-tool.active-listening { color: #ffffff; background: var(--text-error); animation: recordPulse 1.5s infinite; border-radius: var(--radius-full); }
430
+ @keyframes recordPulse { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,0.5); } 70% { box-shadow: 0 0 0 12px rgba(255,69,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } }
431
 
432
  /* Master Send Button */
433
+ .btn-master-send { width: 48px; height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); background: linear-gradient(135deg, var(--brand-saffron) 0%, var(--brand-saffron-dark) 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--ease-spring); box-shadow: 0 4px 15px rgba(255, 153, 51, 0.3); }
434
  .btn-master-send svg { width: 20px; height: 20px; fill: white; transition: transform 0.2s; }
435
+ .btn-master-send:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 153, 51, 0.5); border-color: rgba(255,255,255,0.5); }
436
  .btn-master-send:hover svg { transform: translate(2px, -2px); }
437
+ .btn-master-send:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(100%); transform: none; box-shadow: none; border-color: transparent; }
438
 
439
  .bottom-branding-text { text-align: center; font-size: 12px; color: var(--text-tertiary); margin-top: 16px; font-weight: 600; letter-spacing: 0.5px; }
440
 
441
  /* ---------------------------------------------------------------------------------------
442
+ J. WORKSPACE PRO (DARK COMPILER PANEL)
443
  --------------------------------------------------------------------------------------- */
444
+ .code-workspace-panel { width: 0; background: #000000; border-left: 1px solid var(--border-light); display: flex; flex-direction: column; transition: width var(--ease-smooth); overflow: hidden; box-shadow: -15px 0 40px rgba(0,0,0,0.8); z-index: var(--z-workspace); }
445
  .code-workspace-panel.expanded { width: 55%; }
446
 
447
+ .workspace-header-bar { padding: 16px 24px; border-bottom: 1px solid #333; background: #111; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
448
  .workspace-title-group { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: #abb2bf; font-family: var(--font-mono); letter-spacing: 0.5px;}
449
  .workspace-tools { display: flex; gap: 10px; }
450
 
451
+ .btn-workspace-tool { padding: 8px 16px; border-radius: var(--radius-sm); background: #222; border: 1px solid #333; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #fff; transition: var(--ease-fast); font-size: 13px; font-weight: 600; }
452
+ .btn-workspace-tool:hover { background: #333; border-color: #555; }
453
 
454
  .btn-workspace-tool.close { padding: 8px; background: transparent; border-color: transparent; color: #abb2bf; }
455
+ .btn-workspace-tool.close:hover { color: #ff453a; background: rgba(255, 69, 58, 0.1); }
456
 
457
+ .workspace-editor-surface { flex: 1; overflow-y: auto; background: #000; padding: 24px; position: relative; }
458
  .workspace-editor-surface pre { margin: 0; padding: 0; background: transparent; font-family: var(--font-mono); font-size: 15px; line-height: 1.6; overflow-x: auto; color: #abb2bf; border: none; box-shadow: none;}
459
 
460
  /* ---------------------------------------------------------------------------------------
461
  K. LIVE MODE FULLSCREEN OVERLAY
462
  --------------------------------------------------------------------------------------- */
463
+ .live-mode-viewport { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(40px); z-index: var(--z-live); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--ease-smooth); }
464
  .live-mode-viewport.active { opacity: 1; pointer-events: auto; }
465
+ .btn-close-live { position: absolute; top: 40px; right: 40px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); width: 56px; height: 56px; border-radius: 50%; font-size: 24px; cursor: pointer; transition: var(--ease-spring); display: flex; align-items: center; justify-content: center; color: var(--text-primary); }
466
+ .btn-close-live:hover { background: rgba(255, 69, 58, 0.2); color: var(--text-error); transform: rotate(90deg); border-color: transparent; }
467
 
468
  .pulsing-orb-wrapper { position: relative; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; margin-bottom: 50px; }
469
+ .energy-core { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); box-shadow: 0 0 50px rgba(19, 136, 8, 0.8); position: relative; z-index: 2; transition: transform 0.15s ease-out; }
 
470
  .energy-core.speaking { animation: coreSpeak 0.5s infinite alternate; }
471
+ @keyframes coreSpeak { 0% { transform: scale(1); box-shadow: 0 0 30px rgba(19,136,8,0.6); } 100% { transform: scale(1.1); box-shadow: 0 0 60px rgba(255,153,51,0.8); } }
472
 
473
  .energy-ring { position: absolute; inset: 0; border: 3px solid var(--brand-saffron); border-radius: 50%; opacity: 0; animation: energyRipple 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
474
  .energy-ring:nth-child(2) { animation-delay: 0.8s; border-color: var(--brand-green); }
475
+ .energy-ring:nth-child(3) { animation-delay: 1.6s; border-color: rgba(255,255,255,0.5); }
476
  @keyframes energyRipple { 0% { transform: scale(0.4); opacity: 1; border-width: 6px; } 100% { transform: scale(1.6); opacity: 0; border-width: 1px; } }
477
 
478
+ .live-feedback-status { font-size: 28px; font-weight: 900; color: var(--text-primary); margin-bottom: 16px; font-family: var(--font-sans); letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
479
  .live-feedback-text { font-size: 18px; color: var(--text-secondary); max-width: 700px; text-align: center; line-height: 1.6; min-height: 60px; font-weight: 500; padding: 0 20px; }
480
 
481
  .live-control-deck { display: flex; gap: 24px; margin-top: 50px; }
482
  .btn-live-deck { width: 80px; height: 80px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: var(--ease-spring); }
483
+ .btn-live-deck.mic-control { background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.3); color: var(--text-primary); backdrop-filter: blur(10px); }
484
+ .btn-live-deck.mic-control:hover { transform: translateY(-6px); border-color: var(--brand-saffron); color: var(--brand-saffron); box-shadow: var(--shadow-xl); background: rgba(255,255,255,0.2); }
485
  .btn-live-deck.mic-control.is-recording { background: var(--text-error); color: white; border-color: var(--text-error); animation: pulseMicLive 1.2s infinite; }
486
+ @keyframes pulseMicLive { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,0.6); } 70% { box-shadow: 0 0 0 20px rgba(255,69,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } }
487
 
488
  /* Scroll Trigger Button */
489
+ .btn-scroll-trigger { position: absolute; bottom: 150px; left: 50%; width: 48px; height: 48px; border-radius: 50%; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(25px); border: 1px solid var(--border-medium); box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); transition: var(--ease-smooth); z-index: 20; }
490
  .btn-scroll-trigger.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
491
+ .btn-scroll-trigger:hover { background: var(--text-primary); color: var(--text-inverse); transform: translateX(-50%) translateY(-5px); }
492
 
493
  /* ---------------------------------------------------------------------------------------
494
  L. AUTHENTICATION SECURE GATEWAY (MODAL)
495
  --------------------------------------------------------------------------------------- */
496
+ .secure-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(20px); z-index: var(--z-modal); display: none; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
497
+ .secure-modal-surface { background: rgba(28, 28, 30, 0.95); padding: 44px; border-radius: var(--radius-xl); width: 90%; max-width: 460px; box-shadow: 0 25px 50px -12px rgba(0,0,0,1); position: relative; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(30px); }
498
+ .btn-modal-dismiss { position: absolute; top: 24px; right: 24px; background: rgba(255,255,255,0.05); border: 1px solid transparent; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; color: var(--text-secondary); cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
499
+ .btn-modal-dismiss:hover { background: rgba(255, 69, 58, 0.1); color: var(--text-error); border-color: rgba(255, 69, 58, 0.3); }
500
  .modal-brand-header { text-align: center; margin-bottom: 36px; font-family: var(--font-sans); font-size: 28px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; }
501
 
502
+ .auth-tab-switch { display: flex; background: rgba(0,0,0,0.3); padding: 6px; border-radius: var(--radius-md); margin-bottom: 28px; border: 1px solid rgba(255,255,255,0.05); }
503
  .auth-tab-item { flex: 1; padding: 14px; text-align: center; border-radius: var(--radius-sm); font-size: 15px; font-weight: 800; color: var(--text-secondary); cursor: pointer; transition: var(--ease-fast); }
504
+ .auth-tab-item.active { background: rgba(255,255,255,0.1); color: var(--text-primary); box-shadow: var(--shadow-sm); }
505
 
506
  .auth-form-view { display: none; flex-direction: column; animation: slideIn 0.3s ease; }
507
  .auth-form-view.active { display: flex; }
508
 
509
+ .auth-input-element { width: 100%; padding: 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); font-size: 16px; outline: none; background: rgba(0,0,0,0.2); color: var(--text-primary); transition: var(--ease-fast); font-family: var(--font-sans); margin-bottom: 20px; font-weight: 500; }
510
+ .auth-input-element:focus { border-color: var(--brand-saffron); background: rgba(0,0,0,0.4); box-shadow: 0 0 0 4px rgba(255, 153, 51, 0.15); }
511
+ .auth-input-element::placeholder { color: rgba(255,255,255,0.3); }
512
 
513
+ .btn-auth-execute { width: 100%; padding: 18px; background: var(--text-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-md); font-size: 16px; font-weight: 800; cursor: pointer; transition: var(--ease-fast); margin-top: 10px; }
514
+ .btn-auth-execute:hover { background: #e0e0e0; transform: translateY(-2px); box-shadow: var(--shadow-md); }
515
  .btn-auth-return { width: 100%; padding: 14px; background: transparent; color: var(--text-tertiary); border: none; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: 0.2s; }
516
  .btn-auth-return:hover { color: var(--text-primary); }
517
 
 
567
  <div class="startup-overlay" id="welcomeOverlay">
568
  <div class="startup-logo-container">
569
  <div class="startup-logo-glow"></div>
570
+ <img src="https://i.ibb.co/MxKsrXDj/TIRANGA-20260525-172109-0000.png" alt="CODE VED Core Identity">
571
  </div>
572
+ <h1 class="startup-title">Welcome to CODE VED</h1>
573
+ <p class="startup-desc">Premium AI Workspace. Experience secure code generation, high-fidelity visual rendering, and zero-latency live conversational mode.</p>
574
  <button class="btn-startup-launch" id="btnLaunchSystem">
575
+ Initialize Workspace
576
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
577
  </button>
578
  </div>
 
593
  </div>
594
 
595
  <div class="live-feedback-status" id="liveStatusText">Initializing Audio Stream...</div>
596
+ <div class="live-feedback-text" id="liveTranscriptText">Speak directly to CODE VED. Natural language processing active.</div>
597
 
598
  <div class="live-control-deck">
599
  <button class="btn-live-deck mic-control" id="liveMicBtn">
 
619
  <aside class="sidebar-container" id="sidebar">
620
  <div class="sidebar-header">
621
  <a href="#" class="brand-identity">
622
+ <img src="https://i.ibb.co/MxKsrXDj/TIRANGA-20260525-172109-0000.png" alt="CODE VED Logo">
623
  <div class="brand-typography">
624
+ <span class="brand-name">CODE VED</span>
625
+ <span class="brand-edition">Premium</span>
626
  </div>
627
  </a>
628
  <button class="btn-mobile-close" id="btnSidebarClose">
 
652
 
653
  <!-- Branding Box -->
654
  <div class="developer-credit-box">
655
+ <img src="https://i.ibb.co/MxKsrXDj/TIRANGA-20260525-172109-0000.png" alt="CODE VED Core Image">
656
+ <h3 class="dev-box-title">CODE VED Core</h3>
657
  <p class="dev-box-subtitle">ENGINEERED BY ABHAY KUMAR</p>
658
  </div>
659
 
 
694
  <div class="chat-hero-section" id="welcomeState">
695
  <div class="hero-avatar-wrapper">
696
  <div class="hero-avatar-glow"></div>
697
+ <img src="https://i.ibb.co/MxKsrXDj/TIRANGA-20260525-172109-0000.png" alt="CODE VED Logo Large">
698
  </div>
699
  <h2 class="hero-greeting">How can I assist you today?</h2>
700
  <p class="hero-description">Experience next-generation reasoning, seamless multi-file analysis, and secure workspace code generation engineered by Abhay Kumar.</p>
701
 
 
702
  <div id="guestBadge" class="guest-warning-badge">
703
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
704
  Guest Mode Active: <span id="guestCountDisplay">0</span>/3 Queries Used. Please login.
 
791
  </button>
792
 
793
  <!-- Expanding Text Area -->
794
+ <textarea class="main-textarea" id="mainChatInput" placeholder="Message CODE VED..." rows="1"></textarea>
795
 
796
  <!-- Master Send Button -->
797
  <button class="btn-master-send" id="masterSendBtn">
 
799
  </button>
800
  </div>
801
  </div>
802
+ <div class="bottom-branding-text">Secured by CODE VED Architecture • Developed by Abhay Kumar</div>
803
  </div>
804
  </main>
805
 
 
834
  <button class="btn-modal-dismiss" id="btnAuthClose">
835
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
836
  </button>
837
+ <div class="modal-brand-header">CODE VED Network</div>
838
 
839
  <div class="auth-tab-switch">
840
  <div class="auth-tab-item active" id="btn-tab-login">Connect</div>
 
878
  // 1. CONFIGURATION & STATE MANAGEMENT
879
  // =======================================================================================
880
  const Config = {
881
+ GAS_URL: "https://script.google.com/macros/s/AKfycbz5vrlB4GrfkfBVYdQ52IQweIXC1cNDwKuTUorxdAiOdSSIrH55mzJlaz9kq1Y94ot5/exec",
882
+ LOGO_URL: "https://i.ibb.co/MxKsrXDj/TIRANGA-20260525-172109-0000.png",
883
  PDF_WORKER: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js',
884
+ API_ENDPOINT: '/api/chat', // Change to your local or deployed endpoint
885
  };
886
 
887
  pdfjsLib.GlobalWorkerOptions.workerSrc = Config.PDF_WORKER;
888
 
889
  const AppState = {
890
+ currentUser: localStorage.getItem('codeved_user') || null,
891
+ guestCount: parseInt(localStorage.getItem('codeved_guest') || '0', 10),
892
  history: [],
893
  pendingAttachment: null,
894
  isProcessing: false,
 
901
  isMicRecording: false
902
  };
903
 
 
904
  window.initGradioEngine = async function() {
905
  try {
906
  const module = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js");
 
913
  window.initGradioEngine();
914
 
915
  // =======================================================================================
916
+ // 2. UTILITY ENGINE
917
  // =======================================================================================
918
  const Utils = {
919
  showToast: (message) => {
 
929
  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
930
  },
931
 
 
 
932
  cleanTextForVoice: (rawText) => {
933
  if(!rawText) return "";
934
  let cleaned = rawText;
935
 
936
+ cleaned = cleaned.replace(/```[\s\S]*?```/g, '');
937
+ cleaned = cleaned.replace(/`.*?`/g, '');
938
+ cleaned = cleaned.replace(/!\[.*?\]\(.*?\)/g, '');
939
+ cleaned = cleaned.replace(/\[(.*?)\]\(.*?\)/g, '$1');
940
+ cleaned = cleaned.replace(/<think>[\s\S]*?<\/think>/gi, '');
941
+ cleaned = cleaned.replace(/https?:\/\/[^\s]+/g, '');
942
+ cleaned = cleaned.replace(/[*_~#]/g, '');
943
 
944
  return cleaned.trim();
945
  },
 
1028
  if (actionType === 'register_send_otp') {
1029
  payload.name = document.getElementById('authRegName').value.trim();
1030
  payload.email = document.getElementById('authRegEmail').value.trim();
1031
+ payload.phone = "0000000000"; payload.organization = "CODE VED Base";
1032
  if (!payload.email || !payload.name) return Utils.showToast("Identification details required.");
1033
  buttonId = 'btn-fire-reg-otp';
1034
  }
 
1050
  triggerBtn.innerText = 'Establishing Connection...';
1051
 
1052
  try {
 
1053
  const response = await fetch(Config.GAS_URL, {
1054
  method: 'POST',
1055
  mode: 'cors',
 
1065
  else if (actionType === 'login_send_otp') AuthManager.switchPhase('auth-log-phase-1', 'auth-log-phase-2');
1066
  else if (actionType === 'register_verify' || actionType === 'login_verify') {
1067
  AppState.currentUser = payload.email;
1068
+ localStorage.setItem('codeved_user', AppState.currentUser);
1069
  AuthManager.closeModal();
1070
  AuthManager.initUI();
1071
  ChatEngine.syncHistoryFromCloud();
 
1082
  },
1083
 
1084
  logout: () => {
1085
+ localStorage.removeItem('codeved_user');
1086
  location.reload();
1087
  }
1088
  };
 
1127
  };
1128
 
1129
  // =======================================================================================
1130
+ // 5. SPEECH & TTS ENGINE
1131
  // =======================================================================================
1132
  const VoiceEngine = {
1133
  recognition: null,
1134
+ currentLanguage: 'en-US',
1135
  sessionTranscript: '',
1136
 
1137
  init: () => {
 
1139
  if (!SR) return;
1140
 
1141
  VoiceEngine.recognition = new SR();
 
1142
  VoiceEngine.recognition.continuous = false;
1143
  VoiceEngine.recognition.interimResults = true;
1144
  VoiceEngine.recognition.lang = VoiceEngine.currentLanguage;
 
1178
 
1179
  if (AppState.isLiveModeEngaged) {
1180
  document.getElementById('liveTranscriptText').innerText = `"${currentDictation}"`;
 
1181
  if(finalTranscript.trim().length > 0) {
1182
  document.getElementById('liveStatusText').innerText = "Synthesizing...";
1183
  document.getElementById('mainChatInput').value = finalTranscript.trim();
 
1260
  const cleanSpeechText = Utils.cleanTextForVoice(rawText);
1261
 
1262
  if(!cleanSpeechText.trim()) {
 
1263
  if (AppState.isLiveModeEngaged) {
1264
  document.getElementById('liveOrb').classList.remove('speaking');
1265
  document.getElementById('liveStatusText').innerText = "Tap mic to respond";
 
1266
  setTimeout(()=> VoiceEngine.toggleDictation(), 800);
1267
  }
1268
  return;
 
1288
  const audioUrl = typeof result.data[0] === 'string' ? result.data[0] : result.data[0].url;
1289
  const audio = new Audio(audioUrl);
1290
 
 
1291
  audio.onended = () => {
1292
  if (AppState.isLiveModeEngaged) {
1293
  document.getElementById('liveOrb').classList.remove('speaking');
1294
  document.getElementById('liveStatusText').innerText = "Listening...";
1295
+ VoiceEngine.toggleDictation();
1296
  }
1297
  };
1298
 
 
1336
  };
1337
 
1338
  // =======================================================================================
1339
+ // 7. FILE PROCESSOR
1340
  // =======================================================================================
1341
  const FileProcessor = {
1342
  triggerFileSelector: (type) => {
 
1429
  fileReader.readAsText(file);
1430
  }
1431
  }
 
 
1432
  document.querySelectorAll('.stealth-input').forEach(i => i.value = '');
1433
  },
1434
 
 
1440
  };
1441
 
1442
  // =======================================================================================
1443
+ // 8. WORKSPACE ENGINE & MARKDOWN
1444
  // =======================================================================================
1445
  const WorkspaceEngine = {
1446
  launch: (codeBlockId) => {
 
1505
  };
1506
  marked.use({ renderer: MD_Renderer });
1507
 
 
1508
  document.getElementById('msgs').addEventListener('click', function(e) {
1509
  if (e.target && e.target.classList.contains('btn-launch-ws')) {
1510
  const blockId = e.target.getAttribute('data-id');
 
1513
  });
1514
 
1515
  // =======================================================================================
1516
+ // 9. CORE CHAT ENGINE & LLM
1517
  // =======================================================================================
1518
  const ChatEngine = {
1519
  handleKeyboard: (e) => {
 
1653
  let actionTray = bubbleDOM.querySelector('.bot-actions-row');
1654
  if (!isCurrentlyStreaming && !actionTray && strippedMarkup.trim().length > 0) {
1655
  const safeRawCopy = strippedMarkup.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
 
1656
  const safeRawTTS = strippedMarkup.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, ' ');
1657
 
1658
  const actionsHTML = `
 
1681
 
1682
  if (!rawUserText && !AppState.pendingAttachment) return;
1683
 
 
1684
  if (!AppState.currentUser) {
1685
  if (AppState.guestCount >= 3) {
1686
  AuthManager.openModal();
1687
  return Utils.showToast("Query limit reached. Secure Login required.");
1688
  }
1689
  AppState.guestCount++;
1690
+ localStorage.setItem('codeved_guest', AppState.guestCount.toString());
1691
  document.getElementById('guestCountDisplay').innerText = AppState.guestCount;
1692
  }
1693
 
 
1694
  inputField.value = '';
1695
  inputField.style.height = 'auto';
1696
  document.getElementById('masterSendBtn').disabled = true;
 
1700
  if (wState) wState.style.display = 'none';
1701
 
1702
  let payloadStr = rawUserText;
1703
+ let historyStr = rawUserText;
1704
  let payloadAttachments = [];
1705
  let visualBadge = null;
1706
  let previewHTMLForChat = '';
1707
 
 
1708
  if (AppState.pendingAttachment) {
1709
  previewHTMLForChat = ChatEngine.buildPreviewHTML(AppState.pendingAttachment);
1710
 
1711
  if (AppState.pendingAttachment.type === 'text') {
1712
  payloadStr = `[Document Analyzed: ${AppState.pendingAttachment.name}]\n\n---DATA BEGIN---\n${AppState.pendingAttachment.data}\n---DATA END---\n\nUser Prompt: ${rawUserText}`;
 
1713
  historyStr = `[Document previously attached: ${AppState.pendingAttachment.name}]\nUser Prompt: ${rawUserText}`;
1714
  visualBadge = 'File Appended';
1715
  } else {
 
1734
  const activeBotBubble = ChatEngine.renderBotMessage('', false);
1735
  UIManager.forceScrollDown();
1736
 
 
1737
  const cryptographicSeed = Math.floor(Math.random() * 999999999);
1738
 
1739
+ let cognitivePrompt = `You are CODE VED, a sophisticated premium enterprise AI system engineered by Abhay Kumar.
 
1740
  LANGUAGE REGULATION: Your default cognitive language is ENGLISH. If the user writes in English, reply in purely professional English. If the user writes in Hindi or Hinglish, reply gracefully in Hindi. Never force Hindi translation if the prompt is English.
1741
 
1742
  IMAGE SYNTHESIS OVERRIDE:
 
1761
  temperature: 0.75
1762
  };
1763
 
 
1764
  try {
1765
  const fetchOp = await fetch(Config.API_ENDPOINT, {
1766
  method: 'POST',
 
1773
  const networkReader = fetchOp.body.getReader();
1774
  const textDecoder = new TextDecoder();
1775
  let responseBuffer = "";
1776
+ let streamChunkBuffer = "";
1777
 
1778
  AppState.isStreamingActive = true;
1779
 
 
1784
  streamChunkBuffer += textDecoder.decode(value, { stream: true });
1785
  const fragmentedLines = streamChunkBuffer.split('\n');
1786
 
 
1787
  streamChunkBuffer = fragmentedLines.pop();
1788
 
1789
  for (let line of fragmentedLines) {
 
1809
  ChatEngine.saveHistoryToCloud();
1810
 
1811
  if (AppState.isLiveModeEngaged) {
1812
+ document.getElementById('liveStatusText').innerText = "CODE VED Transmitting...";
1813
  await VoiceEngine.executeTTS(responseBuffer);
1814
  }
1815
 
 
1831
  // 10. EVENT DELEGATION & BOOTSTRAP INVOCATION
1832
  // =======================================================================================
1833
 
1834
+ window.startCODEVEDApp = function() {
 
1835
  document.getElementById('welcomeOverlay').classList.add('hidden');
1836
+ localStorage.setItem('codeved_welcome_seen', 'true');
1837
  setTimeout(() => { document.getElementById('welcomeOverlay').style.display = 'none'; }, 400);
1838
  };
1839
 
 
1840
  document.addEventListener('DOMContentLoaded', () => {
1841
  // Sidebar Controls
1842
  document.getElementById('btnSidebarOpen')?.addEventListener('click', UIManager.toggleSidebar);
1843
  document.getElementById('btnSidebarClose')?.addEventListener('click', UIManager.toggleSidebar);
1844
+ document.getElementById('btnLaunchSystem')?.addEventListener('click', window.startCODEVEDApp);
1845
 
1846
  // Auth Flow Controls
1847
  document.getElementById('loginPromptBtn')?.addEventListener('click', AuthManager.openModal);
 
1862
  // File Attachment Routing
1863
  document.getElementById('btnAttachMenuToggle')?.addEventListener('click', UIManager.toggleAttachMenu);
1864
 
 
1865
  document.getElementById('attachDropdownMenu')?.addEventListener('click', (e) => {
1866
  const target = e.target.closest('.dropdown-item');
1867
  if(!target) return;
 
1905
  document.getElementById('scrollTriggerBtn')?.addEventListener('click', UIManager.forceScrollDown);
1906
 
1907
  // Ensure startup screen displays if memory cleared
1908
+ if(!localStorage.getItem('codeved_welcome_seen')) {
1909
  const overlay = document.getElementById('welcomeOverlay');
1910
  if(overlay) overlay.style.display = 'flex';
1911
  } else {