Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Vedika commited on May 23

Commit

1df870b

verified ·

1 Parent(s): 26a0efb

Update index.html

Browse files

Files changed (1) hide show

index.html +109 -504

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -28,9 +29,11 @@
             /* Professional Tiranga Brand Colors */
             --brand-saffron: #FF9933;
             --brand-saffron-light: rgba(255, 153, 51, 0.1);
             --brand-white: #FFFFFF;
             --brand-green: #138808;
             --brand-green-light: rgba(19, 136, 8, 0.1);
             /* UI Colors */
             --bg-main: #ffffff;
@@ -158,249 +161,61 @@
             border: 2px solid var(--bg-main);
             transition: transform var(--trans-spring);
         }
-        .brand-logo:hover img {
-            transform: scale(1.05) rotate(-2deg);
-        }
         .brand-text { display: flex; flex-direction: column; }
-        .brand-title {
-            font-family: var(--font-sans);
-            font-weight: 800;
-            font-size: 18px;
-            color: var(--text-primary);
-            letter-spacing: -0.5px;
-            line-height: 1.1;
-        }
-        .brand-subtitle {
-            font-size: 11px;
-            font-weight: 700;
-            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: 2px;
-        }
-        .sidebar-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
         .sidebar-content::-webkit-scrollbar { width: 4px; }
         .sidebar-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
         /* Auth UI */
-        .auth-section {
-            background: var(--bg-main);
-            border: 1px solid var(--border-light);
-            border-radius: var(--radius-lg);
-            padding: 16px;
-            box-shadow: var(--shadow-sm);
-        }
-        .btn-secure-login {
-            width: 100%;
-            padding: 12px;
-            background: var(--text-primary);
-            color: var(--brand-white);
-            border: none;
-            border-radius: var(--radius-md);
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            transition: var(--trans-fast);
-        }
-        .btn-secure-login:hover {
-            background: #000;
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
-        }
-        .user-profile-card {
-            display: none;
-            align-items: center;
-            gap: 12px;
-        }
-        .user-avatar-circle {
-            width: 40px;
-            height: 40px;
-            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: 700;
-            font-size: 16px;
-            box-shadow: var(--shadow-sm);
-        }
         .user-info-text { flex: 1; overflow: hidden; }
-        .user-email-text {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-primary);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
         .user-status-text { font-size: 11px; color: var(--brand-green); font-weight: 500; }
-        .btn-logout {
-            background: rgba(239, 68, 68, 0.1);
-            color: #ef4444;
-            border: none;
-            width: 32px;
-            height: 32px;
-            border-radius: var(--radius-md);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: var(--trans-fast);
-        }
         .btn-logout:hover { background: #ef4444; color: #fff; }
         /* Settings & Info */
-        .brand-info-box {
-            background: var(--bg-main);
-            border: 1px solid var(--border-light);
-            border-radius: var(--radius-lg);
-            padding: 24px 16px;
-            text-align: center;
-            box-shadow: var(--shadow-sm);
-            margin-top: auto;
-            position: relative;
-            overflow: hidden;
-        }
-        .brand-info-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));
-        }
-        .brand-info-box img {
-            width: 64px; height: 64px;
-            border-radius: var(--radius-lg);
-            object-fit: cover;
-            margin-bottom: 12px;
-            box-shadow: var(--shadow-md);
-            border: 1px solid var(--border-light);
-        }
         .brand-info-box h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
         .brand-info-box p { font-size: 10px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.5px; }
-        .btn-clear-chat {
-            width: 100%;
-            padding: 14px;
-            border-radius: var(--radius-md);
-            background: var(--bg-main);
-            border: 1px solid var(--border-light);
-            color: var(--text-secondary);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: var(--trans-fast);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
         .btn-clear-chat:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
         /* --- 5. MAIN CHAT INTERFACE --- */
-        .chat-container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            min-width: 300px;
-            transition: width var(--trans-smooth);
-        }
-        .chat-header {
-            padding: 16px 24px;
-            border-bottom: 1px solid var(--border-light);
-            background: rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            z-index: 10;
-        }
         .header-left { display: flex; align-items: center; gap: 12px; }
         .mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 4px; }
-        .ai-status-badge {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-            padding: 6px 14px;
-            background: var(--bg-secondary);
-            border-radius: var(--radius-full);
-            border: 1px solid var(--border-light);
-        }
-        .status-indicator {
-            width: 8px; height: 8px;
-            border-radius: 50%;
-            background: var(--brand-green);
-            box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.2);
-            animation: pulseStatus 2s infinite;
-        }
         @keyframes pulseStatus { 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); } }
         /* LIVE BUTTON */
-        .btn-live-mode {
-            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: var(--radius-full);
-            font-size: 13px;
-            font-weight: 700;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-            transition: var(--trans-spring);
-        }
         .btn-live-mode:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4); }
         .btn-live-mode svg { width: 16px; height: 16px; animation: blinkSVG 1.5s infinite; }
         @keyframes blinkSVG { 50% { opacity: 0.5; } }
         /* Messages Area */
-        .messages-area {
-            flex: 1;
-            overflow-y: auto;
-            padding: 40px 10%;
-            display: flex;
-            flex-direction: column;
-            gap: 32px;
-            scroll-behavior: smooth;
-        }
         .messages-area::-webkit-scrollbar { width: 6px; }
         .messages-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
         /* Welcome Screen */
-        .welcome-hero {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 60px 20px;
-            margin: auto;
-            animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
-            max-width: 700px;
-        }
         @keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
         .hero-icon-wrap { position: relative; margin-bottom: 32px; }
@@ -411,23 +226,8 @@
         .hero-subtitle { font-size: 16px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 32px; }
         .suggestion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; }
-        .suggestion-card {
-            background: rgba(255, 255, 255, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border-light);
-            border-radius: var(--radius-lg);
-            padding: 20px;
-            cursor: pointer;
-            text-align: left;
-            transition: var(--trans-smooth);
-            box-shadow: var(--shadow-sm);
-        }
-        .suggestion-card:hover {
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-md);
-            border-color: var(--brand-saffron);
-            background: rgba(255, 255, 255, 0.9);
-        }
         .sugg-icon { font-size: 24px; margin-bottom: 12px; display: inline-block; }
         .sugg-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
         .sugg-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
@@ -439,14 +239,7 @@
         .message-row.user-msg { flex-direction: row-reverse; align-self: flex-end; }
         .message-row.bot-msg { align-self: flex-start; }
-        .avatar-box {
-            width: 38px; height: 38px;
-            border-radius: var(--radius-sm);
-            flex-shrink: 0;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 14px; font-weight: 700;
-            box-shadow: var(--shadow-sm);
-        }
         .user-msg .avatar-box { background: var(--text-primary); color: var(--brand-white); }
         .bot-msg .avatar-box { background: var(--bg-main); border: 1px solid var(--border-light); padding: 2px; }
         .bot-msg .avatar-box img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
@@ -454,56 +247,17 @@
         .msg-content-wrapper { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
         .user-msg .msg-content-wrapper { align-items: flex-end; }
-        .file-badge {
-            font-size: 11px; font-weight: 600;
-            color: var(--brand-saffron);
-            background: var(--brand-saffron-light);
-            padding: 4px 10px;
-            border-radius: var(--radius-full);
-            margin-bottom: 4px;
-            display: inline-flex; align-items: center; gap: 4px;
-        }
-        .bubble {
-            padding: 16px 22px;
-            font-size: 15px;
-            line-height: 1.6;
-            position: relative;
-            word-wrap: break-word;
-        }
-        .user-msg .bubble {
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            border-radius: 20px 20px 4px 20px;
-            border: 1px solid var(--border-light);
-        }
-        .bot-msg .bubble {
-            background: var(--bg-main);
-            border: 1px solid var(--border-light);
-            border-radius: 4px 20px 20px 20px;
-            box-shadow: var(--shadow-sm);
-            width: 100%;
-        }
         /* Bot Actions (TTS & Copy) */
-        .msg-actions-bar {
-            display: flex; gap: 8px; margin-top: 6px; padding-left: 12px;
-            opacity: 0; transition: opacity var(--trans-smooth);
-            flex-wrap: wrap;
-        }
         .bot-msg:hover .msg-actions-bar { opacity: 1; }
-        .action-chip {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-light);
-            color: var(--text-secondary);
-            font-size: 12px; font-weight: 600;
-            cursor: pointer;
-            display: flex; align-items: center; gap: 6px;
-            padding: 6px 14px;
-            border-radius: var(--radius-full);
-            transition: var(--trans-fast);
-        }
         .action-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); transform: translateY(-1px); }
         .action-chip.btn-tts { color: var(--brand-green); border-color: rgba(19, 136, 8, 0.2); background: var(--brand-green-light); }
         .action-chip.btn-tts:hover { background: rgba(19, 136, 8, 0.15); }
@@ -512,215 +266,74 @@
         .bubble p { margin-bottom: 14px; }
         .bubble p:last-child { margin-bottom: 0; }
         .bubble strong { font-weight: 700; color: var(--text-primary); }
-        .bubble code {
-            font-family: var(--font-mono);
-            background: var(--bg-tertiary);
-            padding: 3px 6px;
-            border-radius: 6px;
-            font-size: 0.85em;
-            color: #d946ef;
-        }
-        .bubble img {
-            max-width: 100%;
-            border-radius: 12px;
-            margin: 12px 0;
-            box-shadow: var(--shadow-md);
-            border: 1px solid var(--border-light);
-            display: block;
-        }
-        .bubble pre {
-            background: #282c34;
-            color: #abb2bf;
-            padding: 16px;
-            border-radius: 12px;
-            overflow-x: auto;
-            margin: 16px 0;
-            font-family: var(--font-mono);
-            font-size: 13.5px;
-            line-height: 1.5;
-        }
         .bubble pre code { background: transparent; color: inherit; padding: 0; }
         /* Generating Code UI */
-        .gen-code-box {
-            background: #1e1e2e;
-            border-radius: 12px;
-            border: 1px solid #313244;
-            overflow: hidden;
-            margin: 16px 0;
-            box-shadow: var(--shadow-md);
-        }
-        .gen-code-hdr {
-            background: #11111b;
-            padding: 10px 16px;
-            font-size: 12px; font-weight: 600; color: #a6adc8;
-            display: flex; align-items: center; gap: 10px;
-            border-bottom: 1px solid #313244;
-            font-family: var(--font-mono);
-            text-transform: uppercase; letter-spacing: 1px;
-        }
-        .spinner-mini {
-            width: 14px; height: 14px;
-            border: 2px solid rgba(255,255,255,0.1);
-            border-top-color: var(--brand-saffron);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
         @keyframes spin { to { transform: rotate(360deg); } }
         .gen-code-box pre { margin: 0; background: transparent; }
         /* Workspace Trigger Card */
-        .workspace-card {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-light);
-            border-radius: 12px;
-            padding: 16px;
-            margin: 16px 0;
-            display: flex; align-items: center; justify-content: space-between;
-            box-shadow: var(--shadow-sm);
-        }
         .ws-card-info { display: flex; align-items: center; gap: 14px; }
-        .ws-card-icon {
-            width: 48px; height: 48px;
-            border-radius: 10px;
-            background: var(--bg-main);
-            display: flex; align-items: center; justify-content: center;
-            font-size: 24px;
-            box-shadow: var(--shadow-sm);
-            border: 1px solid var(--border-light);
-            color: var(--text-primary);
-        }
         .ws-card-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
         .ws-card-text p { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; }
-        .btn-view-ws {
-            padding: 10px 20px;
-            background: var(--text-primary);
-            color: var(--brand-white);
-            border: none;
-            border-radius: var(--radius-sm);
-            font-size: 13px; font-weight: 600;
-            cursor: pointer;
-            transition: var(--trans-spring);
-        }
         .btn-view-ws:hover { transform: scale(1.05); background: var(--brand-saffron); box-shadow: 0 4px 12px rgba(255,153,51,0.3); }
         /* Scroll Bottom Button */
-        .btn-scroll-down {
-            position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%) translateY(20px);
-            width: 44px; height: 44px; border-radius: 50%;
-            background: var(--glass-bg); backdrop-filter: blur(10px);
-            border: 1px solid var(--border-light); box-shadow: var(--shadow-md);
-            display: flex; align-items: center; justify-content: center;
-            cursor: pointer; color: var(--text-secondary);
-            opacity: 0; pointer-events: none; transition: var(--trans-smooth); z-index: 20;
-        }
         .btn-scroll-down.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
         .btn-scroll-down:hover { background: var(--bg-main); color: var(--text-primary); transform: translateX(-50%) translateY(-5px); box-shadow: var(--shadow-lg); }
         /* --- 6. INPUT AREA & ATTACHMENTS --- */
-        .input-region {
-            flex-shrink: 0;
-            padding: 0 40px 30px;
-            background: transparent;
-            position: relative;
-            z-index: 20;
-        }
-        .input-box-wrapper {
-            display: flex; flex-direction: column;
-            background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
-            border: 1px solid var(--border-light);
-            border-radius: var(--radius-xl);
-            box-shadow: var(--shadow-float);
-            transition: var(--trans-smooth);
-        }
-        .input-box-wrapper:focus-within {
-            border-color: var(--brand-saffron);
-            box-shadow: 0 15px 35px -5px rgba(255,153,51,0.15), 0 0 0 3px var(--brand-saffron-light);
-        }
         /* Attachment Preview */
-        .file-preview-strip {
-            display: none; padding: 16px 24px 0; align-items: center; gap: 12px;
-        }
         .file-preview-strip.active { display: flex; animation: fadeIn 0.3s ease; }
-        .preview-thumb {
-            width: 44px; height: 44px; 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-secondary); font-size: 20px;
-        }
         .preview-details { flex: 1; }
         .preview-name { font-size: 13px; font-weight: 600; color: var(--text-primary); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .btn-remove-file {
-            background: rgba(239, 68, 68, 0.1); border: none;
-            width: 28px; height: 28px; border-radius: 50%;
-            cursor: pointer; display: flex; align-items: center; justify-content: center;
-            color: #ef4444; transition: var(--trans-fast);
-        }
         .btn-remove-file:hover { background: #ef4444; color: #fff; }
-        .input-controls-row {
-            display: flex; align-items: flex-end; gap: 12px;
-            padding: 12px 16px 12px 20px;
-        }
-        .chat-textarea {
-            flex: 1; border: none; outline: none; background: transparent;
-            font-family: var(--font-sans); font-size: 15px; color: var(--text-primary);
-            line-height: 1.5; resize: none; max-height: 180px; min-height: 24px;
-            padding: 10px 0;
-        }
         .chat-textarea::placeholder { color: var(--text-tertiary); }
         /* Attachment Menu (Gemini Style) */
         .attach-menu-container { position: relative; }
-        .btn-icon {
-            width: 40px; height: 40px; 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(--trans-fast); position: relative;
-        }
         .btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); }
         .btn-icon svg { width: 22px; height: 22px; }
-        .attach-popup {
-            position: absolute; bottom: 55px; left: 0;
-            background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
-            border: 1px solid var(--border-light); border-radius: var(--radius-lg);
-            padding: 8px; box-shadow: var(--shadow-float);
-            display: none; flex-direction: column; gap: 4px;
-            z-index: 100; min-width: 180px;
-            transform: translateY(10px) scale(0.95); opacity: 0;
-            transition: all var(--trans-fast);
-            transform-origin: bottom left;
-        }
         .attach-popup.show { display: flex; transform: translateY(0) scale(1); opacity: 1; }
-        .attach-option {
-            display: flex; align-items: center; gap: 12px;
-            padding: 12px 16px; border-radius: var(--radius-sm);
-            cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary);
-            transition: var(--trans-fast);
-        }
         .attach-option:hover { background: var(--bg-secondary); color: var(--brand-saffron); }
         .attach-option span.ico { font-size: 18px; }
         .hidden-file-input { display: none; }
-        /* Voice Mic */
-        .btn-mic.is-listening {
-            color: #ef4444; background: rgba(239, 68, 68, 0.1);
-            animation: pulseMic 1.5s infinite;
-        }
         @keyframes pulseMic { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
         /* Send Button */
-        .btn-send {
-            width: 44px; height: 44px; border-radius: 14px; 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(--trans-spring);
-            box-shadow: 0 4px 15px rgba(19, 136, 8, 0.2);
-        }
         .btn-send svg { width: 18px; height: 18px; fill: white; transition: transform 0.2s; }
         .btn-send:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 153, 51, 0.3); }
         .btn-send:hover svg { transform: translate(2px, -2px); }
@@ -729,63 +342,31 @@
         .footer-branding { text-align: center; font-size: 11px; color: var(--text-tertiary); margin-top: 14px; font-weight: 500; letter-spacing: 0.5px; }
         /* --- 7. WORKSPACE (CODE EDITOR PANEL) --- */
-        .workspace-panel {
-            width: 0; background: var(--bg-main);
-            border-left: 1px solid var(--border-light);
-            display: flex; flex-direction: column;
-            transition: width var(--trans-smooth); overflow: hidden;
-            box-shadow: -10px 0 30px rgba(0,0,0,0.03); z-index: 25;
-        }
         .workspace-panel.active { width: 50%; }
-        .ws-header {
-            padding: 16px 24px; border-bottom: 1px solid var(--border-light);
-            background: var(--bg-main); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
-        }
         .ws-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
         .ws-actions-group { display: flex; gap: 10px; }
-        .btn-ws-action {
-            padding: 8px 16px; border-radius: var(--radius-sm);
-            background: var(--bg-secondary); border: 1px solid var(--border-light);
-            cursor: pointer; display: flex; align-items: center; gap: 8px;
-            color: var(--text-primary); transition: var(--trans-fast);
-            font-size: 13px; font-weight: 600;
-        }
         .btn-ws-action:hover { background: var(--bg-tertiary); }
         .btn-ws-close { padding: 8px; }
         .btn-ws-close:hover { color: #ef4444; background: #fee2e2; border-color: #fca5a5; }
         .ws-editor-area { flex: 1; overflow-y: auto; background: var(--bg-secondary); padding: 24px; }
-        .ws-editor-area pre {
-            margin: 0; padding: 24px; background: #282c34;
-            border: 1px solid var(--border-light); border-radius: var(--radius-lg);
-            font-family: var(--font-mono); font-size: 14px; line-height: 1.6;
-            overflow-x: auto; box-shadow: var(--shadow-md); color: #abb2bf;
-        }
         /* --- 8. LIVE MODE OVERLAY (नया फीचर) --- */
-        .live-overlay {
-            position: fixed; inset: 0;
-            background: rgba(255, 255, 255, 0.98);
-            z-index: 9000;
-            display: flex; flex-direction: column; align-items: center; justify-content: center;
-            opacity: 0; pointer-events: none;
-            transition: opacity var(--trans-smooth);
-        }
         .live-overlay.active { opacity: 1; pointer-events: auto; }
         .live-close-btn { position: absolute; top: 30px; right: 30px; background: rgba(0,0,0,0.05); border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: 0.2s; }
         .live-close-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; transform: rotate(90deg); }
         .live-orb-container { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
         .live-orb-core { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); box-shadow: 0 0 40px rgba(19, 136, 8, 0.4); position: relative; z-index: 2; transition: transform 0.1s; }
         .live-orb-ring { position: absolute; inset: 0; border: 2px solid var(--brand-saffron); border-radius: 50%; opacity: 0; animation: ripple 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
         .live-orb-ring:nth-child(2) { animation-delay: 0.6s; border-color: var(--brand-green); }
         .live-orb-ring:nth-child(3) { animation-delay: 1.2s; border-color: var(--text-primary); }
         @keyframes ripple { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
         .live-status-text { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; font-family: var(--font-sans); }
         .live-transcript { font-size: 16px; color: var(--text-secondary); max-width: 600px; text-align: center; line-height: 1.5; min-height: 48px; }
         .live-controls { display: flex; gap: 20px; margin-top: 40px; }
         .btn-live-action { width: 64px; height: 64px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: var(--trans-spring); }
         .btn-live-action.mic { background: var(--bg-main); border: 2px solid var(--border-light); color: var(--text-primary); }
@@ -1008,6 +589,11 @@
                         <input type="file" id="inp-document" class="hidden-file-input" accept=".pdf,.doc,.docx,.txt,.md,.csv,.json,.py,.js,.html,.css,.cpp,.c,.java" onchange="handleSpecificFile(this, 'document')">
                     </div>
                     <!-- Voice Mic -->
                     <button class="btn-icon btn-mic" id="voiceBtn" onclick="toggleVoice()" title="Dictate Message">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
@@ -1134,7 +720,6 @@ function showToast(msg) {
 function executeFallbackCopy(text, btnElement) {
     var textArea = document.createElement("textarea");
     textArea.value = text;
-    // Prevent scrolling to bottom of page in MS Edge.
     textArea.style.top = "0";
     textArea.style.left = "0";
     textArea.style.position = "fixed";
@@ -1172,7 +757,6 @@ function copyText(btnElement, rawTextToCopy) {
     });
 }
-// Called explicitly from Workspace Panel
 function copyWorkspaceCode(btnElement) {
     if(S.currentWorkspaceId !== null) {
         const actualCodeString = S.codeBlocks[S.currentWorkspaceId].code;
@@ -1186,7 +770,7 @@ function copyWorkspaceCode(btnElement) {
 // ==========================================
 async function speakText(text) {
     let cleanText = text.replace(/[*_~`#]/g, '').replace(/<[^>]*>?/gm, '');
-    showToast("🔊 Linking with Edge Neural Engine...");
     try {
         const res = await fetch('/api/tts', {
             method: 'POST',
@@ -1205,17 +789,47 @@ async function speakText(text) {
 }
 // ==========================================
-// 🎤 SMART VOICE TYPING (HINDI/ENGLISH)
 // ==========================================
 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition = null;
 let isRecording = false;
 if (SpeechRecognition) {
     recognition = new SpeechRecognition();
     recognition.continuous = false;
     recognition.interimResults = false;
-    recognition.lang = 'hi-IN'; // Smart Devanagari/English mixed support
     recognition.onstart = () => {
         isRecording = true;
@@ -1235,7 +849,6 @@ if (SpeechRecognition) {
         if(isLiveModeActive) {
             document.getElementById('liveTranscriptText').innerText = `"${transcript}"`;
             document.getElementById('liveStatusText').innerText = "Processing...";
-            // Automatically send message in live mode
             document.getElementById('chatInput').value = transcript;
             sendMsg();
         } else {
@@ -1266,21 +879,18 @@ function toggleVoice() {
 // ==========================================
-// 🟢 LIVE MODE CONTROLLER (नया फीचर)
 // ==========================================
 function startLiveMode() {
     isLiveModeActive = true;
     document.getElementById('liveOverlay').classList.add('active');
-    // Auto start mic
     if(recognition && !isRecording) { setTimeout(() => { recognition.start(); }, 500); }
 }
 function stopLiveMode() {
     isLiveModeActive = false;
     document.getElementById('liveOverlay').classList.remove('active');
     if(recognition && isRecording) { recognition.stop(); }
 }
 function toggleLiveMic() {
     if(!recognition) return showToast("Not supported.");
     if(isRecording) recognition.stop(); else recognition.start();
@@ -1290,7 +900,7 @@ function toggleLiveMic() {
 // ==========================================
 // 🔐 AUTHENTICATION & SYNC
 // ==========================================
-function updateAuthUI() { /* Update DOM elements based on currentUser */ if (currentUser) { document.getElementById('loginPromptBtn').style.display = 'none'; document.getElementById('userProfile').style.display = 'flex'; document.getElementById('uEmail').innerText = currentUser; document.getElementById('uAvatar').innerText = currentUser.charAt(0).toUpperCase(); document.getElementById('guestBadge').style.display = 'none'; } else { document.getElementById('loginPromptBtn').style.display = 'flex'; document.getElementById('userProfile').style.display = 'none'; } }
 function openAuthModal() { document.getElementById('authModal').style.display = 'flex'; }
 function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; }
 function switchAuthTab(tab) { document.querySelectorAll('.tab-btn').forEach(e => e.classList.remove('active')); document.getElementById(`tab-${tab}`).classList.add('active'); document.getElementById('flow-login').style.display = tab === 'login' ? 'block' : 'none'; document.getElementById('flow-register').style.display = tab === 'register' ? 'block' : 'none'; }
@@ -1419,7 +1029,6 @@ renderer.code = function(token) {
     const codeText = typeof token === 'string' ? token : (token.text || '');
     const language = typeof token === 'string' ? arguments[1] : (token.lang || '');
-    // Dynamic "Generating Code" UI during stream
     if (window.isStreamingGlobalFlag) {
         return `
         <div class="gen-code-box">
@@ -1428,7 +1037,6 @@ renderer.code = function(token) {
         </div>`;
     }
-    // Final Workspace Button
     const id = S.codeBlocks.length;
     S.codeBlocks.push({ code: codeText, lang: language });
     return `
@@ -1494,7 +1102,7 @@ async function sendMsg(){
     // 🎲 POLLINATIONS RANDOM SEED GENERATOR
     const randomSeed = Math.floor(Math.random() * 999999999);
-    // 🧠 DYNAMIC SYSTEM PROMPT (LIVE MODE + BILINGUAL + POLLINATIONS FIX)
     let sysPrompt = `You are Arjun 2.O, a highly advanced AI system developed by Abhay Kumar.
     LANGUAGE: You are fully bilingual. Write and respond fluently in BOTH English and Hindi dynamically based on user input. Do not force Hindi if user speaks English.
@@ -1515,7 +1123,7 @@ async function sendMsg(){
         attachments: attachments,
         system_prompt: sysPrompt,
         history: cleanHistory,
-        max_tokens: isLiveModeActive ? 150 : 4096, // Shorter tokens in live mode
         temperature: 0.7
     };
@@ -1552,7 +1160,6 @@ async function sendMsg(){
         S.history.push({role: 'bot', content: accumulatedText});
         syncHistory();
-        // Auto-Play Voice if in Live Mode
         if(isLiveModeActive) {
             document.getElementById('liveStatusText').innerText = "Arjun is speaking...";
             await speakText(accumulatedText);
@@ -1587,7 +1194,6 @@ function appendBotDOM(content, isHistoryLoading=false) {
 function renderBotText(el, raw, isStreaming) {
     const b = el.querySelector('.bubble');
-    // Parse thinking tags (hidden in UI)
     const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/gi;
     let mainText = raw.replace(thinkRegex, '');
@@ -1597,7 +1203,6 @@ function renderBotText(el, raw, isStreaming) {
     let actionsDiv = el.querySelector('.msg-actions-bar');
-    // Generate Actions when stream completes
     if(!isStreaming && !actionsDiv && mainText.trim().length > 0) {
         const cleanRaw = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
         const rawForTTS = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, ' ');

 <!DOCTYPE html>
 <html lang="en">
 <head>
             /* Professional Tiranga Brand Colors */
             --brand-saffron: #FF9933;
             --brand-saffron-light: rgba(255, 153, 51, 0.1);
+            --brand-saffron-dark: #e68a2e;
             --brand-white: #FFFFFF;
             --brand-green: #138808;
             --brand-green-light: rgba(19, 136, 8, 0.1);
+            --brand-green-dark: #0f6e06;
             /* UI Colors */
             --bg-main: #ffffff;
             border: 2px solid var(--bg-main);
             transition: transform var(--trans-spring);
         }
+        .brand-logo:hover img { transform: scale(1.05) rotate(-2deg); }
         .brand-text { display: flex; flex-direction: column; }
+        .brand-title { font-family: var(--font-sans); font-weight: 800; font-size: 18px; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.1; }
+        .brand-subtitle { font-size: 11px; font-weight: 700; 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: 2px; }
+        .sidebar-content { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
         .sidebar-content::-webkit-scrollbar { width: 4px; }
         .sidebar-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
         /* Auth UI */
+        .auth-section { background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
+        .btn-secure-login { width: 100%; padding: 12px; background: var(--text-primary); color: var(--brand-white); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--trans-fast); }
+        .btn-secure-login:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-md); }
+        .user-profile-card { display: none; align-items: center; gap: 12px; }
+        .user-avatar-circle { width: 40px; height: 40px; 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: 700; font-size: 16px; box-shadow: var(--shadow-sm); }
         .user-info-text { flex: 1; overflow: hidden; }
+        .user-email-text { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .user-status-text { font-size: 11px; color: var(--brand-green); font-weight: 500; }
+        .btn-logout { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--trans-fast); }
         .btn-logout:hover { background: #ef4444; color: #fff; }
         /* Settings & Info */
+        .brand-info-box { background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px 16px; text-align: center; box-shadow: var(--shadow-sm); margin-top: auto; position: relative; overflow: hidden; }
+        .brand-info-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)); }
+        .brand-info-box img { width: 64px; height: 64px; border-radius: var(--radius-lg); object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); }
         .brand-info-box h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
         .brand-info-box p { font-size: 10px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.5px; }
+        .btn-clear-chat { width: 100%; padding: 14px; border-radius: var(--radius-md); background: var(--bg-main); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--trans-fast); display: flex; align-items: center; justify-content: center; gap: 8px; }
         .btn-clear-chat:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
         /* --- 5. MAIN CHAT INTERFACE --- */
+        .chat-container { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 300px; transition: width var(--trans-smooth); }
+        .chat-header { padding: 16px 24px; border-bottom: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; z-index: 10; }
         .header-left { display: flex; align-items: center; gap: 12px; }
         .mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 4px; }
+        .ai-status-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); padding: 6px 14px; background: var(--bg-secondary); border-radius: var(--radius-full); border: 1px solid var(--border-light); }
+        .status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.2); animation: pulseStatus 2s infinite; }
         @keyframes pulseStatus { 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); } }
         /* LIVE BUTTON */
+        .btn-live-mode { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border: none; padding: 8px 16px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); transition: var(--trans-spring); }
         .btn-live-mode:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4); }
         .btn-live-mode svg { width: 16px; height: 16px; animation: blinkSVG 1.5s infinite; }
         @keyframes blinkSVG { 50% { opacity: 0.5; } }
         /* Messages Area */
+        .messages-area { flex: 1; overflow-y: auto; padding: 40px 10%; display: flex; flex-direction: column; gap: 32px; scroll-behavior: smooth; }
         .messages-area::-webkit-scrollbar { width: 6px; }
         .messages-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
         /* Welcome Screen */
+        .welcome-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; margin: auto; animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; max-width: 700px; }
         @keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
         .hero-icon-wrap { position: relative; margin-bottom: 32px; }
         .hero-subtitle { font-size: 16px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 32px; }
         .suggestion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; }
+        .suggestion-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; cursor: pointer; text-align: left; transition: var(--trans-smooth); box-shadow: var(--shadow-sm); }
+        .suggestion-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-saffron); background: rgba(255, 255, 255, 0.9); }
         .sugg-icon { font-size: 24px; margin-bottom: 12px; display: inline-block; }
         .sugg-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
         .sugg-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
         .message-row.user-msg { flex-direction: row-reverse; align-self: flex-end; }
         .message-row.bot-msg { align-self: flex-start; }
+        .avatar-box { width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-sm); }
         .user-msg .avatar-box { background: var(--text-primary); color: var(--brand-white); }
         .bot-msg .avatar-box { background: var(--bg-main); border: 1px solid var(--border-light); padding: 2px; }
         .bot-msg .avatar-box img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
         .msg-content-wrapper { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
         .user-msg .msg-content-wrapper { align-items: flex-end; }
+        .file-badge { font-size: 11px; font-weight: 600; color: var(--brand-saffron); background: var(--brand-saffron-light); padding: 4px 10px; border-radius: var(--radius-full); margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; }
+        .bubble { padding: 16px 22px; font-size: 15px; line-height: 1.6; position: relative; word-wrap: break-word; }
+        .user-msg .bubble { background: var(--bg-tertiary); color: var(--text-primary); border-radius: 20px 20px 4px 20px; border: 1px solid var(--border-light); }
+        .bot-msg .bubble { background: var(--bg-main); border: 1px solid var(--border-light); border-radius: 4px 20px 20px 20px; box-shadow: var(--shadow-sm); width: 100%; }
         /* Bot Actions (TTS & Copy) */
+        .msg-actions-bar { display: flex; gap: 8px; margin-top: 6px; padding-left: 12px; opacity: 0; transition: opacity var(--trans-smooth); flex-wrap: wrap; }
         .bot-msg:hover .msg-actions-bar { opacity: 1; }
+        .action-chip { background: var(--bg-secondary); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); transition: var(--trans-fast); }
         .action-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); transform: translateY(-1px); }
         .action-chip.btn-tts { color: var(--brand-green); border-color: rgba(19, 136, 8, 0.2); background: var(--brand-green-light); }
         .action-chip.btn-tts:hover { background: rgba(19, 136, 8, 0.15); }
         .bubble p { margin-bottom: 14px; }
         .bubble p:last-child { margin-bottom: 0; }
         .bubble strong { font-weight: 700; color: var(--text-primary); }
+        .bubble code { font-family: var(--font-mono); background: var(--bg-tertiary); padding: 3px 6px; border-radius: 6px; font-size: 0.85em; color: #d946ef; }
+        .bubble img { max-width: 100%; border-radius: 12px; margin: 12px 0; box-shadow: var(--shadow-md); border: 1px solid var(--border-light); display: block; }
+        .bubble pre { background: #282c34; color: #abb2bf; padding: 16px; border-radius: 12px; overflow-x: auto; margin: 16px 0; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; }
         .bubble pre code { background: transparent; color: inherit; padding: 0; }
         /* Generating Code UI */
+        .gen-code-box { background: #1e1e2e; border-radius: 12px; border: 1px solid #313244; overflow: hidden; margin: 16px 0; box-shadow: var(--shadow-md); }
+        .gen-code-hdr { background: #11111b; padding: 10px 16px; font-size: 12px; font-weight: 600; color: #a6adc8; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #313244; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; }
+        .spinner-mini { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--brand-saffron); border-radius: 50%; animation: spin 1s linear infinite; }
         @keyframes spin { to { transform: rotate(360deg); } }
         .gen-code-box pre { margin: 0; background: transparent; }
         /* Workspace Trigger Card */
+        .workspace-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 12px; padding: 16px; margin: 16px 0; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); }
         .ws-card-info { display: flex; align-items: center; gap: 14px; }
+        .ws-card-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bg-main); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); color: var(--text-primary); }
         .ws-card-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
         .ws-card-text p { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; }
+        .btn-view-ws { padding: 10px 20px; background: var(--text-primary); color: var(--brand-white); border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--trans-spring); }
         .btn-view-ws:hover { transform: scale(1.05); background: var(--brand-saffron); box-shadow: 0 4px 12px rgba(255,153,51,0.3); }
         /* Scroll Bottom Button */
+        .btn-scroll-down { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%) translateY(20px); width: 44px; height: 44px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--border-light); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); opacity: 0; pointer-events: none; transition: var(--trans-smooth); z-index: 20; }
         .btn-scroll-down.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
         .btn-scroll-down:hover { background: var(--bg-main); color: var(--text-primary); transform: translateX(-50%) translateY(-5px); box-shadow: var(--shadow-lg); }
         /* --- 6. INPUT AREA & ATTACHMENTS --- */
+        .input-region { flex-shrink: 0; padding: 0 40px 30px; background: transparent; position: relative; z-index: 20; }
+        .input-box-wrapper { display: flex; flex-direction: column; background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); transition: var(--trans-smooth); }
+        .input-box-wrapper:focus-within { border-color: var(--brand-saffron); box-shadow: 0 15px 35px -5px rgba(255,153,51,0.15), 0 0 0 3px var(--brand-saffron-light); }
         /* Attachment Preview */
+        .file-preview-strip { display: none; padding: 16px 24px 0; align-items: center; gap: 12px; }
         .file-preview-strip.active { display: flex; animation: fadeIn 0.3s ease; }
+        .preview-thumb { width: 44px; height: 44px; 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-secondary); font-size: 20px; }
         .preview-details { flex: 1; }
         .preview-name { font-size: 13px; font-weight: 600; color: var(--text-primary); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .btn-remove-file { background: rgba(239, 68, 68, 0.1); border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ef4444; transition: var(--trans-fast); }
         .btn-remove-file:hover { background: #ef4444; color: #fff; }
+        .input-controls-row { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px 12px 20px; }
+        .chat-textarea { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); line-height: 1.5; resize: none; max-height: 180px; min-height: 24px; padding: 10px 0; margin-left: 8px;}
         .chat-textarea::placeholder { color: var(--text-tertiary); }
         /* Attachment Menu (Gemini Style) */
         .attach-menu-container { position: relative; }
+        .btn-icon { width: 40px; height: 40px; 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(--trans-fast); position: relative; }
         .btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); }
         .btn-icon svg { width: 22px; height: 22px; }
+        .attach-popup { position: absolute; bottom: 55px; left: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-float); display: none; flex-direction: column; gap: 4px; z-index: 100; min-width: 180px; transform: translateY(10px) scale(0.95); opacity: 0; transition: all var(--trans-fast); transform-origin: bottom left; }
         .attach-popup.show { display: flex; transform: translateY(0) scale(1); opacity: 1; }
+        .attach-option { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary); transition: var(--trans-fast); }
         .attach-option:hover { background: var(--bg-secondary); color: var(--brand-saffron); }
         .attach-option span.ico { font-size: 18px; }
         .hidden-file-input { display: none; }
+        /* Voice Mic & SMART LANGUAGE TOGGLE */
+        .btn-lang-toggle { font-size: 12px; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border-light); background: var(--bg-main); border-radius: 8px; padding: 4px 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 4px;}
+        .btn-lang-toggle:hover { background: var(--brand-saffron-light); color: var(--brand-saffron-dark); border-color: var(--brand-saffron); }
+        .btn-lang-toggle.active-hi { background: var(--brand-green-light); color: var(--brand-green-dark); border-color: var(--brand-green); }
+        .btn-mic.is-listening { color: #ef4444; background: rgba(239, 68, 68, 0.1); animation: pulseMic 1.5s infinite; }
         @keyframes pulseMic { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
         /* Send Button */
+        .btn-send { width: 44px; height: 44px; border-radius: 14px; 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(--trans-spring); box-shadow: 0 4px 15px rgba(19, 136, 8, 0.2); }
         .btn-send svg { width: 18px; height: 18px; fill: white; transition: transform 0.2s; }
         .btn-send:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 153, 51, 0.3); }
         .btn-send:hover svg { transform: translate(2px, -2px); }
         .footer-branding { text-align: center; font-size: 11px; color: var(--text-tertiary); margin-top: 14px; font-weight: 500; letter-spacing: 0.5px; }
         /* --- 7. WORKSPACE (CODE EDITOR PANEL) --- */
+        .workspace-panel { width: 0; background: var(--bg-main); border-left: 1px solid var(--border-light); display: flex; flex-direction: column; transition: width var(--trans-smooth); overflow: hidden; box-shadow: -10px 0 30px rgba(0,0,0,0.03); z-index: 25; }
         .workspace-panel.active { width: 50%; }
+        .ws-header { padding: 16px 24px; border-bottom: 1px solid var(--border-light); background: var(--bg-main); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
         .ws-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
         .ws-actions-group { display: flex; gap: 10px; }
+        .btn-ws-action { padding: 8px 16px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border-light); cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text-primary); transition: var(--trans-fast); font-size: 13px; font-weight: 600; }
         .btn-ws-action:hover { background: var(--bg-tertiary); }
         .btn-ws-close { padding: 8px; }
         .btn-ws-close:hover { color: #ef4444; background: #fee2e2; border-color: #fca5a5; }
         .ws-editor-area { flex: 1; overflow-y: auto; background: var(--bg-secondary); padding: 24px; }
+        .ws-editor-area pre { margin: 0; padding: 24px; background: #282c34; border: 1px solid var(--border-light); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: 14px; line-height: 1.6; overflow-x: auto; box-shadow: var(--shadow-md); color: #abb2bf; }
         /* --- 8. LIVE MODE OVERLAY (नया फीचर) --- */
+        .live-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--trans-smooth); }
         .live-overlay.active { opacity: 1; pointer-events: auto; }
         .live-close-btn { position: absolute; top: 30px; right: 30px; background: rgba(0,0,0,0.05); border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: 0.2s; }
         .live-close-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; transform: rotate(90deg); }
         .live-orb-container { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
         .live-orb-core { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); box-shadow: 0 0 40px rgba(19, 136, 8, 0.4); position: relative; z-index: 2; transition: transform 0.1s; }
         .live-orb-ring { position: absolute; inset: 0; border: 2px solid var(--brand-saffron); border-radius: 50%; opacity: 0; animation: ripple 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
         .live-orb-ring:nth-child(2) { animation-delay: 0.6s; border-color: var(--brand-green); }
         .live-orb-ring:nth-child(3) { animation-delay: 1.2s; border-color: var(--text-primary); }
         @keyframes ripple { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
         .live-status-text { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; font-family: var(--font-sans); }
         .live-transcript { font-size: 16px; color: var(--text-secondary); max-width: 600px; text-align: center; line-height: 1.5; min-height: 48px; }
         .live-controls { display: flex; gap: 20px; margin-top: 40px; }
         .btn-live-action { width: 64px; height: 64px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: var(--trans-spring); }
         .btn-live-action.mic { background: var(--bg-main); border: 2px solid var(--border-light); color: var(--text-primary); }
                         <input type="file" id="inp-document" class="hidden-file-input" accept=".pdf,.doc,.docx,.txt,.md,.csv,.json,.py,.js,.html,.css,.cpp,.c,.java" onchange="handleSpecificFile(this, 'document')">
                     </div>
+                    <!-- NEW: SMART LANGUAGE TOGGLE FOR STT -->
+                    <button class="btn-lang-toggle" id="langToggleBtn" onclick="toggleSpeechLang()" title="Toggle Voice Language (EN/HI)">
+                        🌐 <span id="langIndicator">EN</span>
+                    </button>
                     <!-- Voice Mic -->
                     <button class="btn-icon btn-mic" id="voiceBtn" onclick="toggleVoice()" title="Dictate Message">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
 function executeFallbackCopy(text, btnElement) {
     var textArea = document.createElement("textarea");
     textArea.value = text;
     textArea.style.top = "0";
     textArea.style.left = "0";
     textArea.style.position = "fixed";
     });
 }
 function copyWorkspaceCode(btnElement) {
     if(S.currentWorkspaceId !== null) {
         const actualCodeString = S.codeBlocks[S.currentWorkspaceId].code;
 // ==========================================
 async function speakText(text) {
     let cleanText = text.replace(/[*_~`#]/g, '').replace(/<[^>]*>?/gm, '');
+    showToast("🔊 Preparing High-Quality Audio...");
     try {
         const res = await fetch('/api/tts', {
             method: 'POST',
 }
 // ==========================================
+// 🎤 SMART VOICE TYPING (HINDI/ENGLISH TOGGLE)
 // ==========================================
 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition = null;
 let isRecording = false;
+// Default STT language
+let currentSpeechLang = 'en-IN'; // Default to English/Hinglish
+function toggleSpeechLang() {
+    const btn = document.getElementById('langToggleBtn');
+    const indicator = document.getElementById('langIndicator');
+    if(currentSpeechLang === 'en-IN') {
+        currentSpeechLang = 'hi-IN';
+        indicator.innerText = 'हि';
+        btn.classList.add('active-hi');
+        showToast("Voice Mode: Pure Hindi (देवनागरी)");
+    } else {
+        currentSpeechLang = 'en-IN';
+        indicator.innerText = 'EN';
+        btn.classList.remove('active-hi');
+        showToast("Voice Mode: English / Hinglish");
+    }
+    // Update recognition engine language if it exists
+    if(recognition) {
+        recognition.lang = currentSpeechLang;
+        // If it was recording, restart it to apply new language
+        if(isRecording) {
+            recognition.stop();
+            setTimeout(() => recognition.start(), 300);
+        }
+    }
+}
 if (SpeechRecognition) {
     recognition = new SpeechRecognition();
     recognition.continuous = false;
     recognition.interimResults = false;
+    recognition.lang = currentSpeechLang;
     recognition.onstart = () => {
         isRecording = true;
         if(isLiveModeActive) {
             document.getElementById('liveTranscriptText').innerText = `"${transcript}"`;
             document.getElementById('liveStatusText').innerText = "Processing...";
             document.getElementById('chatInput').value = transcript;
             sendMsg();
         } else {
 // ==========================================
+// 🟢 LIVE MODE CONTROLLER
 // ==========================================
 function startLiveMode() {
     isLiveModeActive = true;
     document.getElementById('liveOverlay').classList.add('active');
     if(recognition && !isRecording) { setTimeout(() => { recognition.start(); }, 500); }
 }
 function stopLiveMode() {
     isLiveModeActive = false;
     document.getElementById('liveOverlay').classList.remove('active');
     if(recognition && isRecording) { recognition.stop(); }
 }
 function toggleLiveMic() {
     if(!recognition) return showToast("Not supported.");
     if(isRecording) recognition.stop(); else recognition.start();
 // ==========================================
 // 🔐 AUTHENTICATION & SYNC
 // ==========================================
+function updateAuthUI() { if (currentUser) { document.getElementById('loginPromptBtn').style.display = 'none'; document.getElementById('userProfile').style.display = 'flex'; document.getElementById('uEmail').innerText = currentUser; document.getElementById('uAvatar').innerText = currentUser.charAt(0).toUpperCase(); document.getElementById('guestBadge').style.display = 'none'; } else { document.getElementById('loginPromptBtn').style.display = 'flex'; document.getElementById('userProfile').style.display = 'none'; } }
 function openAuthModal() { document.getElementById('authModal').style.display = 'flex'; }
 function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; }
 function switchAuthTab(tab) { document.querySelectorAll('.tab-btn').forEach(e => e.classList.remove('active')); document.getElementById(`tab-${tab}`).classList.add('active'); document.getElementById('flow-login').style.display = tab === 'login' ? 'block' : 'none'; document.getElementById('flow-register').style.display = tab === 'register' ? 'block' : 'none'; }
     const codeText = typeof token === 'string' ? token : (token.text || '');
     const language = typeof token === 'string' ? arguments[1] : (token.lang || '');
     if (window.isStreamingGlobalFlag) {
         return `
         <div class="gen-code-box">
         </div>`;
     }
     const id = S.codeBlocks.length;
     S.codeBlocks.push({ code: codeText, lang: language });
     return `
     // 🎲 POLLINATIONS RANDOM SEED GENERATOR
     const randomSeed = Math.floor(Math.random() * 999999999);
+    // 🧠 DYNAMIC SYSTEM PROMPT
     let sysPrompt = `You are Arjun 2.O, a highly advanced AI system developed by Abhay Kumar.
     LANGUAGE: You are fully bilingual. Write and respond fluently in BOTH English and Hindi dynamically based on user input. Do not force Hindi if user speaks English.
         attachments: attachments,
         system_prompt: sysPrompt,
         history: cleanHistory,
+        max_tokens: isLiveModeActive ? 150 : 4096,
         temperature: 0.7
     };
         S.history.push({role: 'bot', content: accumulatedText});
         syncHistory();
         if(isLiveModeActive) {
             document.getElementById('liveStatusText').innerText = "Arjun is speaking...";
             await speakText(accumulatedText);
 function renderBotText(el, raw, isStreaming) {
     const b = el.querySelector('.bubble');
     const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/gi;
     let mainText = raw.replace(thinkRegex, '');
     let actionsDiv = el.querySelector('.msg-actions-bar');
     if(!isStreaming && !actionsDiv && mainText.trim().length > 0) {
         const cleanRaw = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
         const rawForTTS = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, ' ');