Major update: Enhanced frontend and backend

- Added Mermaid diagram support for flowcharts and sequence diagrams
- Implemented Dark/Light theme toggle with localStorage persistence
- Fixed voice synthesis (speech) with voice loading detection
- Improved RTL/LTR support for Arabic/English
- Enhanced streaming performance in renderMarkdown
- Updated system prompt for deeper technical reasoning
- Switched to better models (DeepSeek-R1 / Qwen-72B)
- Improved mobile responsiveness and chat box sizing
- Added copy buttons for code blocks
- Fixed duplicate message prevention
- Optimized CSS for better performance

static/css/chat/bubble.css

@@ -89,4 +89,27 @@
 
 .action-btn:hover {
   color: #60a5fa;
+}
+
+/* Light theme support for bubbles (يتناغم مع tailwind) */
+html.light .bubble {
+  background: #f3f4f6;
+  color: #1f2937;
+  border-color: #e5e7eb;
+}
+
+html.light .bubble-user {
+  background: #e0f2fe;
+}
+
+html.light .bubble-assist {
+  background: #ffffff;
+}
+
+html.light .message-actions .action-btn {
+  color: #3b82f6;
+}
+
+html.light .message-actions .action-btn:hover {
+  color: #2563eb;
 }

static/css/chat/markdown.css

@@ -160,4 +160,30 @@
 
 .md-content table td pre, .md-content table th pre {
   overflow: auto;
+}
+
+/* Light theme support for markdown */
+html.light .md-content pre {
+  background: #f3f4f6;
+  border-color: #e5e7eb;
+}
+
+html.light .md-content code {
+  background: #e5e7eb;
+  color: #1f2937;
+}
+
+html.light .md-content th, 
+html.light .md-content td {
+  border-color: #d1d5db;
+}
+
+html.light .md-content th, 
+html.light tbody tr:nth-child(odd) td {
+  background: #f9fafb;
+}
+
+html.light .md-content blockquote {
+  background: #eff6ff;
+  border-left-color: #3b82f6;
 }

static/css/chat/style.css

@@ -20,4 +20,71 @@
 
 .hidden {
   display: none !important;
+}
+
+
+/* Mermaid diagram container */
+.mermaid-diagram {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  overflow-x: auto;
+  text-align: center;
+}
+
+.mermaid-diagram svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Light theme support for mermaid */
+html.light .mermaid-diagram {
+  background: #f3f4f6;
+}
+
+/* Smooth scrolling for chat */
+#chatBox, #chatArea {
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+
+/* Force theme toggle button visibility */
+#themeToggle {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  background: #1f2937 !important;
+  border: none !important;
+  border-radius: 50% !important;
+  width: 2rem !important;
+  height: 2rem !important;
+  font-size: 1.2rem !important;
+  transition: all 0.3s ease !important;
+}
+
+#themeToggle:hover {
+  background: #3b82f6 !important;
+  transform: scale(1.05) !important;
+}
+
+/* Light theme styles for body and background */
+html.light body {
+  background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
+}
+
+html.light .bg-gradient-to-br {
+  background: var(--bg-primary) !important;
+}
+
+html.light .chat-title,
+html.light .icon-btn {
+  color: #1f2937 !important;
+}
+
+html.light .icon-btn:hover {
+  background: #e2e8f0 !important;
+  color: #3b82f6 !important;
 }

static/js/chat.js

@@ -194,6 +194,28 @@ async function updateSidebarAfterLogin() {
   }
 }
 
+
+async function renderMermaidDiagrams(wrapper) {
+  if (typeof mermaid === 'undefined') return;
+  const mermaidBlocks = wrapper.querySelectorAll('pre code.language-mermaid');
+  for (const block of mermaidBlocks) {
+    const pre = block.parentElement;
+    const diagramText = block.innerText;
+    const container = document.createElement('div');
+    container.className = 'mermaid-diagram';
+    try {
+      const id = `mermaid-${Date.now()}-${Math.random()}`;
+      const { svg } = await mermaid.render(id, diagramText);
+      container.innerHTML = svg;
+      pre.replaceWith(container);
+    } catch (e) {
+      console.error('Mermaid error:', e);
+      container.innerHTML = `<div class="text-red-500">Failed to render diagram: ${e.message}</div>`;
+      pre.replaceWith(container);
+    }
+  }
+}
+
 // ============================================================
 // RENDER MARKDOWN
 // ============================================================
@@ -265,9 +287,12 @@ async function renderMarkdown(el, isStreaming = false) {
       }
     });
 
+
     // ✅ تنشيط تلوين الكود (Prism.js) بعد انتهاء التدفق مباشرةً
     Prism.highlightAllUnder(wrapper);
 
+    await renderMermaidDiagrams(wrapper);
+
     if (uiElements.chatBox) {
       uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
     }
@@ -329,35 +354,32 @@ function addMsg(who, text) {
     speakBtn.title = 'Read aloud';
     speakBtn.onclick = async () => {
       try {
-        // إلغاء أي نطق قيد التشغيل
         window.speechSynthesis.cancel();
 
-        // تأكد من أن الخدمة جاهزة (بعض المتصفحات تحتاج تفعيل)
-        if (!window.speechSynthesis) {
-          console.warn('Speech synthesis not supported');
-          alert('Your browser does not support text-to-speech.');
-          return;
+        // انتظار تحميل الأصوات
+        let voices = window.speechSynthesis.getVoices();
+        if (voices.length === 0) {
+          await new Promise(resolve => {
+            window.speechSynthesis.onvoiceschanged = () => {
+              voices = window.speechSynthesis.getVoices();
+              resolve();
+            };
+          });
         }
 
         const utterance = new SpeechSynthesisUtterance(text);
 
-        // اختر اللغة المناسبة
         if (isArabicText(text)) {
           utterance.lang = 'ar';
-          // محاولة استخدام صوت عربي إذا كان متاحًا
-          const voices = window.speechSynthesis.getVoices();
           const arabicVoice = voices.find(v => v.lang === 'ar' || v.lang === 'ar-EG' || v.lang === 'ar-SA');
           if (arabicVoice) utterance.voice = arabicVoice;
         } else {
           utterance.lang = 'en-US';
-          // محاولة استخدام صوت إنجليزي طبيعي
-          const voices = window.speechSynthesis.getVoices();
-          const englishVoice = voices.find(v => v.lang === 'en-US' && v.name.includes('Google')) ||
-            voices.find(v => v.lang === 'en-US');
+          const englishVoice = voices.find(v => v.lang === 'en-US' && v.name.includes('Google'));
           if (englishVoice) utterance.voice = englishVoice;
         }
 
-        utterance.rate = 1.0;
+        utterance.rate = 0.9;
         utterance.pitch = 1.0;
         utterance.volume = 1.0;
 
@@ -1553,6 +1575,49 @@ window.addEventListener('online', () => {
   }
 });
 
+
+// ============================================================
+// THEME TOGGLE
+// ============================================================
+function initTheme() {
+  const savedTheme = localStorage.getItem('theme');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  if (savedTheme === 'light' || (!savedTheme && !prefersDark)) {
+    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
+    document.querySelector('#themeToggle').textContent = '☀️';
+  } else {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+    document.querySelector('#themeToggle').textContent = '🌙';
+  }
+}
+
+function toggleTheme() {
+  const html = document.documentElement;
+  const themeBtn = document.querySelector('#themeToggle');
+  if (html.classList.contains('dark')) {
+    html.classList.remove('dark');
+    html.classList.add('light');
+    themeBtn.textContent = '☀️';
+    localStorage.setItem('theme', 'light');
+  } else {
+    html.classList.remove('light');
+    html.classList.add('dark');
+    themeBtn.textContent = '🌙';
+    localStorage.setItem('theme', 'dark');
+  }
+}
+
+// سجل للأحداث
+document.addEventListener('DOMContentLoaded', () => {
+  initTheme();
+  const themeToggle = document.getElementById('themeToggle');
+  if (themeToggle) themeToggle.addEventListener('click', toggleTheme);
+});
+
+
 // ============================================================
 // INITIALIZATION
 // ============================================================

templates/chat.html

@@ -1,586 +1,500 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" class="dark-theme">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover">
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta name="description"
     content="Chat with MGZon Chatbot, an AI-powered tool for coding, analysis, and e-commerce queries. Supports text, image, and audio inputs." />
   <meta name="keywords"
-    content="MGZon Chatbot, AI chatbot, code generation, DeepSeek, FastAPI, programming" />
+    content="MGZon Chatbot, AI chatbot, code generation, DeepSeek, Gradio, FastAPI, e-commerce, programming, Mark Al-Asfar" />
   <meta name="author" content="Mark Al-Asfar" />
   <meta name="robots" content="index, follow" />
   <title>MGZon Chatbot – AI Assistant</title>
+  <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
   <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
   <link rel="apple-touch-icon" href="/static/images/mg.svg" />
-
-  <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600&display=swap" rel="stylesheet">
-
-  <!-- Tailwind CSS -->
+  <!-- Open Graph -->
+  <meta property="og:title" content="MGZon Chatbot – AI Assistant" />
+  <!-- manifest for Android/Chrome -->
+  <link rel="manifest" href="/static/manifest.json">
+
+  <!-- iOS Web App Support -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/mg-180.png">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="MGZon">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
+  <!-- General Theme -->
+  <meta name="theme-color" content="#2d3748">
+
+  <meta property="og:description"
+    content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta property="og:image" content="/static/images/mg.svg" />
+  <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/chat" />
+  <meta property="og:type" content="website" />
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="MGZon Chatbot – AI Assistant" />
+  <meta name="twitter:description"
+    content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta name="twitter:image" content="/static/images/mg.svg" />
+  <!-- JSON-LD -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/chat",
+    "description": "An AI-powered chatbot for coding, analysis, and e-commerce queries."
+  }
+  </script>
+  <!-- Fonts & Styles -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
   <script src="https://cdn.tailwindcss.com"></script>
-
-  <!-- Markdown & Mermaid & Syntax Highlight -->
+  <!-- Markdown & Syntax Highlight -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
-
-  <!-- Hammer.js for gestures -->
+  <!-- Animations -->
+  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" />
+  <!-- Carousel -->
+  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
+  <!-- Smooth Scroll -->
+  <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" />
+  <!-- Hammer.js for touch gestures -->
   <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
+  <!-- Project-Specific Styles -->
+  <link rel="stylesheet" href="/static/css/animation/style.css" />
+  <link rel="stylesheet" href="/static/css/button.css" />
+  <link rel="stylesheet" href="/static/css/chat/bubble.css" />
+  <link rel="stylesheet" href="/static/css/chat/markdown.css" />
+  <link rel="stylesheet" href="/static/css/chat/style.css" />
+  <link rel="stylesheet" href="/static/css/header.css" />
+  <link rel="stylesheet" href="/static/css/icon.css" />
+  <link rel="stylesheet" href="/static/css/input.css" />
+  <link rel="stylesheet" href="/static/css/logo.css" />
+  <link rel="stylesheet" href="/static/css/prompts.css" />
+  <link rel="stylesheet" href="/static/css/screen/1200.css" />
+  <link rel="stylesheet" href="/static/css/screen/2000.css" />
+  <link rel="stylesheet" href="/static/css/screen/320.css" />
+  <link rel="stylesheet" href="/static/css/screen/360.css" />
+  <link rel="stylesheet" href="/static/css/screen/3840.css" />
+  <link rel="stylesheet" href="/static/css/screen/480.css" />
+  <link rel="stylesheet" href="/static/css/screen/720.css" />
+  <link rel="stylesheet" href="/static/css/screen/7680.css" />
+  <link rel="stylesheet" href="/static/css/screen/common.css" />
+  <link rel="stylesheet" href="/static/css/style.css" />
+  <link rel="stylesheet" href="/static/css/webkit.css" />
+  <link rel="stylesheet" href="/static/css/sidebar.css" />
+  <!-- Preload Resources -->
+  <link rel="preload" href="/static/js/chat.js" as="script">
+  <link rel="preload" href="/static/css/chat/style.css" as="style">
+  <link rel="preload" href="/static/images/mg.svg" as="image">
+  <link rel="preload" href="https://raw.githubusercontent.com/4gels/icons/refs/heads/main/splash-screen.png" as="image">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
-  <!-- Custom Styles -->
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
-      min-height: 100vh;
-      color: #e2e8f0;
-    }
-
-    /* Custom Scrollbar */
-    ::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-    ::-webkit-scrollbar-track {
-      background: #1e293b;
-      border-radius: 10px;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #3b82f6;
-      border-radius: 10px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #60a5fa;
-    }
-
-    /* Sidebar */
-    #sidebar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 280px;
-      background: rgba(15, 23, 42, 0.95);
-      backdrop-filter: blur(12px);
-      transform: translateX(-100%);
-      transition: transform 0.3s ease;
-      z-index: 1000;
-      border-right: 1px solid rgba(59, 130, 246, 0.3);
-    }
-
-    #sidebar.open {
-      transform: translateX(0);
-    }
-
-    @media (min-width: 768px) {
-      #sidebar {
-        transform: translateX(0);
-      }
-    }
-
-    /* Chat Container */
-    .chat-container {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 1rem;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    /* Chat Header */
-    .chat-header {
-      position: sticky;
-      top: 0;
-      background: rgba(15, 23, 42, 0.8);
-      backdrop-filter: blur(12px);
-      z-index: 100;
-      padding: 0.75rem 1.25rem;
-      border-radius: 1rem;
-      margin-bottom: 1rem;
-      border: 1px solid rgba(59, 130, 246, 0.3);
-    }
-
-    /* Chat Messages Area */
-    #chatBox {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      min-height: 400px;
-      max-height: calc(100vh - 200px);
-    }
-
-    /* Message Bubble */
-    .message {
-      display: flex;
-      flex-direction: column;
-      max-width: 85%;
-      animation: fadeInUp 0.3s ease;
-    }
-
-    .message.user {
-      align-self: flex-end;
-    }
-
-    .message.assistant {
-      align-self: flex-start;
-    }
-
-    .bubble {
-      padding: 0.875rem 1.25rem;
-      border-radius: 1.25rem;
-      line-height: 1.5;
-      font-size: 0.95rem;
-    }
-
-    .message.user .bubble {
-      background: linear-gradient(135deg, #3b82f6, #2563eb);
-      color: white;
-      border-bottom-right-radius: 0.25rem;
-    }
-
-    .message.assistant .bubble {
-      background: rgba(30, 41, 59, 0.9);
-      border: 1px solid rgba(59, 130, 246, 0.3);
-      border-bottom-left-radius: 0.25rem;
-    }
-
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    /* Message Actions (Copy, Retry, Speak) */
-    .message-actions {
-      display: flex;
-      gap: 0.5rem;
-      margin-top: 0.5rem;
-      margin-left: 0.5rem;
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-
-    .message:hover .message-actions {
-      opacity: 1;
-    }
-
-    .action-btn {
-      background: transparent;
-      border: none;
-      color: #94a3b8;
-      cursor: pointer;
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.375rem;
-      font-size: 0.75rem;
-      transition: all 0.2s;
-    }
-
-    .action-btn:hover {
-      background: rgba(59, 130, 246, 0.2);
-      color: #3b82f6;
-    }
-
-    /* Input Container */
-    .input-wrapper {
-      background: rgba(30, 41, 59, 0.9);
-      backdrop-filter: blur(12px);
-      border-radius: 2rem;
-      padding: 0.5rem 1rem;
-      border: 1px solid rgba(59, 130, 246, 0.3);
-      transition: all 0.3s ease;
-    }
-
-    .input-wrapper:focus-within {
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
-    }
-
-    #userInput {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: white;
-      resize: none;
-      font-size: 1rem;
-      padding: 0.5rem 0;
-      max-height: 120px;
-      font-family: inherit;
-    }
-
-    #userInput::placeholder {
-      color: #64748b;
-    }
-
-    /* Icon Buttons */
-    .icon-btn {
-      background: transparent;
-      border: none;
-      color: #94a3b8;
-      cursor: pointer;
-      padding: 0.5rem;
-      border-radius: 50%;
-      transition: all 0.2s ease;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .icon-btn:hover {
-      background: rgba(59, 130, 246, 0.2);
-      color: #3b82f6;
-    }
-
-    #sendBtn {
-      background: #3b82f6;
-      color: white;
-    }
-
-    #sendBtn:hover {
-      background: #2563eb;
-      transform: scale(1.05);
-    }
-
-    #sendBtn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none;
-    }
-
-    #stopBtn {
-      background: #ef4444;
-      color: white;
-    }
-
-    #stopBtn:hover {
-      background: #dc2626;
-      transform: scale(1.05);
-    }
-
-    /* Prompt Items */
-    .prompt-card {
-      background: rgba(30, 41, 59, 0.6);
-      border: 1px solid rgba(59, 130, 246, 0.2);
-      border-radius: 2rem;
-      padding: 0.625rem 1.25rem;
-      transition: all 0.2s ease;
-      cursor: pointer;
-      font-size: 0.875rem;
-    }
-
-    .prompt-card:hover {
-      background: rgba(59, 130, 246, 0.2);
-      border-color: #3b82f6;
-      transform: translateY(-2px);
-    }
-
-    /* Markdown Content */
-    .md-content {
-      line-height: 1.6;
-    }
-    .md-content pre {
-      background: #0f172a;
-      border-radius: 0.75rem;
-      padding: 1rem;
-      overflow-x: auto;
-      margin: 0.75rem 0;
-    }
-    .md-content code {
-      font-family: 'Fira Code', monospace;
-      font-size: 0.85rem;
-    }
-    .md-content table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: 1rem 0;
-    }
-    .md-content th, .md-content td {
-      border: 1px solid #334155;
-      padding: 0.5rem;
-      text-align: left;
-    }
-    .md-content th {
-      background: #1e293b;
-    }
-    .md-content p {
-      margin: 0.5rem 0;
-    }
-    .md-content ul, .md-content ol {
-      padding-left: 1.5rem;
-      margin: 0.5rem 0;
-    }
-
-    /* Mermaid Diagrams */
-    .mermaid {
-      background: #1e293b;
-      padding: 1rem;
-      border-radius: 0.75rem;
-      margin: 1rem 0;
-      text-align: center;
-    }
-
-    /* Thinking Animation */
-    .thinking {
-      display: inline-flex;
-      gap: 0.25rem;
-      align-items: center;
-    }
-    .thinking span {
-      width: 8px;
-      height: 8px;
-      background: #3b82f6;
-      border-radius: 50%;
-      animation: bounce 1.4s infinite ease-in-out both;
-    }
-    .thinking span:nth-child(1) { animation-delay: -0.32s; }
-    .thinking span:nth-child(2) { animation-delay: -0.16s; }
-    @keyframes bounce {
-      0%, 80%, 100% { transform: scale(0); }
-      40% { transform: scale(1); }
-    }
-
-    /* Code Copy Button */
-    .copy-btn {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      background: #334155;
-      border: none;
-      border-radius: 0.375rem;
-      padding: 0.25rem 0.5rem;
-      cursor: pointer;
-      font-size: 0.7rem;
-      color: #e2e8f0;
-    }
-
-    .copy-btn:hover {
-      background: #3b82f6;
-    }
+</head>
 
-    /* Responsive */
-    @media (max-width: 768px) {
-      .message {
-        max-width: 95%;
-      }
-      .chat-container {
-        padding: 0.5rem;
-      }
-      #chatBox {
-        max-height: calc(100vh - 160px);
-      }
-      .bubble {
-        padding: 0.625rem 1rem;
-        font-size: 0.875rem;
-      }
-    }
 
-    /* RTL Support */
-    .rtl {
-      direction: rtl;
-      text-align: right;
-    }
-    .ltr {
-      direction: ltr;
-      text-align: left;
-    }
-  </style>
-</head>
 
-<body>
+<body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-teal-900 to-emerald-900">
   <!-- Sidebar -->
-  <aside id="sidebar">
-    <div class="p-4 border-b border-gray-700 flex justify-between items-center">
-      <div class="flex items-center gap-2">
-        <img src="/static/images/mg.svg" alt="MGZon" class="w-8 h-8">
-        <span class="font-bold text-lg text-white">MGZon</span>
+  <aside id="sidebar"
+    class="fixed inset-y-0 left-0 w-64 bg-gray-800/90 backdrop-blur-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-50">
+    <div class="flex items-center justify-between p-4 border-b border-gray-700">
+      <div class="flex items-center">
+        <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-10 h-10 mr-2 animate-pulse" />
+        <h2 class="text-lg font-bold text-white">MGZon</h2>
       </div>
-      <button id="sidebarToggle" class="md:hidden text-gray-400 hover:text-white">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <button id="sidebarToggle" class="md:hidden text-white" aria-label="Close Sidebar">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
         </svg>
       </button>
     </div>
     <nav class="p-4">
       <ul class="space-y-2">
-        <li><a href="/" class="flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">🏠 Home</a></li>
-        <li><a href="/about" class="flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">ℹ️ About</a></li>
-        <li><a href="/blog" class="flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">📝 Blog</a></li>
-        <li><a href="/docs" class="flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">📚 Docs</a></li>
+        <li>
+          <a href="/" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path>
+            </svg>
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="/about" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            About
+          </a>
+        </li>
+        <li>
+          <a href="/blog" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 006 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25">
+              </path>
+            </svg>
+            Blog
+          </a>
+        </li>
+        <li>
+          <a href="/docs" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+              </path>
+            </svg>
+            Docs
+          </a>
+        </li>
         {% if user %}
-        <li><button id="settingsBtn" class="w-full text-left flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">⚙️ Settings</button></li>
-        <li><button id="logoutBtn" class="w-full text-left flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">🚪 Logout</button></li>
+        <li>
+          <button id="settingsBtn"
+            class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
+              </path>
+            </svg>
+            Settings
+          </button>
+        </li>
+        <li>
+          <button id="logoutBtn"
+            class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+            </svg>
+            Logout
+          </button>
+        </li>
         {% else %}
-        <li><a href="/login" class="flex items-center gap-2 text-gray-300 hover:text-white p-2 rounded-lg hover:bg-gray-800 transition-colors">🔑 Login</a></li>
+        <li>
+          <a href="/login" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
+            </svg>
+            Login
+          </a>
+        </li>
         {% endif %}
       </ul>
       {% if user %}
-      <div class="mt-6">
-        <div class="flex justify-between items-center mb-3">
-          <span class="text-sm font-semibold text-gray-400">Conversations</span>
-          <button id="newConversationBtn" class="text-gray-400 hover:text-white p-1 rounded">➕</button>
+      <div class="mt-4">
+        <div class="flex justify-between items-center px-2 mb-2">
+          <h3 class="text-sm font-semibold text-white">Conversations</h3>
+          <button id="newConversationBtn" class="text-white hover:bg-gray-700 p-1 rounded" title="New Conversation">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+          </button>
         </div>
-        <ul id="conversationList" class="space-y-1 max-h-96 overflow-y-auto"></ul>
+        <button id="historyToggle"
+          class="md:hidden flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          Show History
+        </button>
+        <ul id="conversationList" class="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto hidden md:block">
+          <!-- Conversations will be populated by JavaScript -->
+        </ul>
       </div>
       {% endif %}
     </nav>
   </aside>
 
-  <!-- Main Chat Container -->
-  <div class="chat-container md:ml-[280px]">
-    <!-- Header -->
-    <div class="chat-header flex justify-between items-center">
-      <button id="mobileSidebarToggle" class="md:hidden text-gray-400 hover:text-white">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-      </button>
-      <span id="conversationTitle" class="font-semibold text-white">{{ conversation_title | default('MGZon AI Assistant') }}</span>
-      <button id="clearBtn" class="text-gray-400 hover:text-red-400 transition-colors">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4M3 7h18"></path>
-        </svg>
-      </button>
-    </div>
+  <!-- Swipe Hint for Mobile -->
+  <div id="swipeHint" class="md:hidden fixed top-1/2 left-4 z-50 animate-pulse">
+    <img src="/static/images/swipe-hint.svg" alt="Swipe to open sidebar" class="w-8 h-8" />
+  </div>
 
-    <!-- Initial Content -->
-    <div id="initialContent" class="flex-1 flex flex-col items-center justify-center text-center p-8">
-      <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-4">How can I help you today?</h1>
-      <p class="text-gray-400 mb-8 max-w-md">AI-powered assistant for coding, analysis, design, and real-time queries. Supports text, images, and voice.</p>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 max-w-2xl w-full">
-        <div class="prompt-card" data-prompt="Explain the key differences between Kafka and RabbitMQ with a comparison table">📊 Kafka vs RabbitMQ</div>
-        <div class="prompt-card" data-prompt="Write a Python function to reverse a linked list with explanation">🐍 Reverse Linked List</div>
-        <div class="prompt-card" data-prompt="Design a real-time analytics architecture for 10,000 events/sec">🏗️ Real-time Analytics Design</div>
-        <div class="prompt-card" data-prompt="Draw a flowchart showing how WebSocket works with load balancer">📈 WebSocket Flowchart</div>
+  <!-- Main Content -->
+  <div class="flex-1 flex flex-col max-w-screen-xl w-full mx-auto md:ml-64">
+    <!-- Chat Header -->
+    <header class="chat-header p-3 flex justify-between items-center">
+      <div class="chat-title text-xl font-semibold text-white">
+        <span id="conversationTitle">{{ conversation_title | default('MGZon AI Assistant') }}</span>
       </div>
-      <div id="messageLimitWarning" class="text-red-400 text-center hidden mt-6">
-        You have reached the message limit. Please <a href="/login" class="text-blue-400 underline">login</a> to continue.
+      <div class="chat-controls flex gap-2">
+        <button id="clearBtn" class="icon-btn" aria-label="Clear All Messages" title="Clear All Messages">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
+            stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 6h18" />
+            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6" />
+            <path d="M14 11v6" />
+          </svg>
+        </button>
+        <button id="themeToggle" class="icon-btn" aria-label="Toggle Theme" title="Toggle Theme">
+          🌙
+        </button>
       </div>
-    </div>
+    </header>
 
     <!-- Chat Area -->
-    <div id="chatArea" class="flex-1 hidden">
-      <div id="chatBox" class="flex-1 overflow-y-auto"></div>
-    </div>
-
-    <!-- Input Form -->
-    <form id="footerForm" class="mt-4">
-      <div class="input-wrapper flex items-center gap-2 w-full">
-        <textarea id="userInput" rows="1" placeholder="Ask anything..." class="flex-1 bg-transparent border-none outline-none text-white resize-none py-2 px-1 max-h-32"></textarea>
-        <div class="flex items-center gap-1">
-          <button type="button" id="fileBtn" class="icon-btn" title="Upload Image">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+    <main class="flex-1 flex flex-col">
+      <div id="initialContent" class="flex flex-col items-center justify-center text-center h-full">
+        <div class="title mb-4 gradient-text text-3xl font-bold">
+          How can I help you today?
+        </div>
+        <p class="system text-gray-300 mb-4">
+          A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS.<br>
+          Type your query, upload images/files, or hold the send button to record audio!
+        </p>
+        <!-- Prompts -->
+        <div class="prompts w-full max-w-md mx-auto grid gap-2">
+          <div class="prompt-item" data-prompt="What's the capital of France?">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path
+                d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41"
+                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="12" cy="12" r="4" stroke-width="2" />
             </svg>
-          </button>
-          <button type="button" id="audioBtn" class="icon-btn" title="Upload Audio">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
+            <span>What's the capital of France?</span>
+          </div>
+          <div class="prompt-item" data-prompt="Generate a Python script for a simple web server">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-          </button>
-          <button type="submit" id="sendBtn" class="icon-btn w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+            <span>Generate a Python script for a simple web server</span>
+          </div>
+          <div class="prompt-item" data-prompt="Analyze this image for me">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M3 12h18M12 3v18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-          </button>
-          <button type="button" id="stopBtn" class="icon-btn w-10 h-10 bg-red-600 hover:bg-red-700 text-white rounded-full transition-all hidden">
-            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-              <rect x="6" y="6" width="12" height="12" rx="2"></rect>
+            <span>Analyze this image for me</span>
+          </div>
+          <div class="prompt-item" data-prompt="Convert this text to audio">
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <path d="M12 3v18M7 12h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
-          </button>
+            <span>Convert this text to audio</span>
+          </div>
         </div>
+        <div id="messageLimitWarning" class="text-red-500 text-center hidden mt-4">
+          You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to
+          continue.
+        </div>
+      </div>
+      <div id="chatArea" class="flex-1 overflow-y-auto hidden" aria-live="polite">
+        <div id="chatBox" class="flex flex-col w-full" aria-live="polite"></div>
       </div>
-      <div id="filePreview" class="hidden mt-2"></div>
-      <div id="audioPreview" class="hidden mt-2"></div>
-      <input type="file" id="fileInput" accept="image/*" class="hidden">
-      <input type="file" id="audioInput" accept="audio/*" class="hidden">
-    </form>
+    </main>
+  </div>
 
-    <!-- Copyright -->
-    <div class="text-center text-xs text-gray-500 py-4">
-      © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
+  <!-- Footer Form (منقول خارج main) -->
+  <form id="footerForm" class="flex p-4">
+    <div id="inputContainer" class="w-full">
+      <textarea id="userInput" placeholder="Ask anything..." required></textarea>
+      <div id="rightIconGroup" class="flex gap-2">
+        <button type="button" id="fileBtn" class="icon-btn" aria-label="Upload File" title="Upload File">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+            stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <path d="M14 2v6h6" />
+          </svg>
+        </button>
+        <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
+        <button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File" title="Upload Audio File">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+            stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+            <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+            <path d="M12 19v4" />
+          </svg>
+        </button>
+        <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
+        <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record"
+          title="Click to Send or Hold to Record Voice">
+          <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
+          </svg>
+        </button>
+        <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+            <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
+          </svg>
+        </button>
+      </div>
     </div>
-  </div>
+    <div id="filePreview" class="upload-preview" style="display: none;"></div>
+    <div id="audioPreview" class="audio-preview" style="display: none;"></div>
+  </form>
 
   <!-- Settings Modal -->
-  <div id="settingsModal" class="fixed inset-0 bg-black/70 hidden items-center justify-center z-50">
-    <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4">
+  <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+    <div class="bg-gray-800 p-6 rounded-lg w-full max-w-md">
       <div class="flex justify-between items-center mb-4">
-        <h2 class="text-xl font-bold text-white">Settings</h2>
-        <button id="closeSettingsBtn" class="text-gray-400 hover:text-white">✕</button>
+        <h2 class="text-xl font-bold text-white">User Settings</h2>
+        <button id="closeSettingsBtn" class="text-gray-400 hover:text-white">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
       </div>
       <form id="settingsForm" class="space-y-4">
-        <div><label class="block text-sm text-gray-300 mb-1">Display Name</label><input type="text" id="display_name" name="display_name" class="w-full p-2 bg-gray-700 text-white rounded"></div>
-        <div><label class="block text-sm text-gray-300 mb-1">Preferred Model</label><select id="preferred_model" name="preferred_model" class="w-full p-2 bg-gray-700 text-white rounded"><option value="advanced">Advanced</option><option value="standard">Standard</option><option value="light">Light</option></select></div>
-        <div><label class="block text-sm text-gray-300 mb-1">Job Title</label><input type="text" id="job_title" name="job_title" class="w-full p-2 bg-gray-700 rounded"></div>
-        <div><label class="block text-sm text-gray-300 mb-1">Education</label><input type="text" id="education" name="education" class="w-full p-2 bg-gray-700 rounded"></div>
-        <div><label class="block text-sm text-gray-300 mb-1">Interests</label><textarea id="interests" name="interests" class="w-full p-2 bg-gray-700 rounded"></textarea></div>
-        <div><label class="block text-sm text-gray-300 mb-1">Additional Info</label><textarea id="additional_info" name="additional_info" class="w-full p-2 bg-gray-700 rounded"></textarea></div>
-        <div><label class="block text-sm text-gray-300 mb-1">Conversation Style</label><select id="conversation_style" name="conversation_style" class="w-full p-2 bg-gray-700 rounded"><option value="default">Default</option><option value="concise">Concise</option><option value="analytical">Analytical</option><option value="creative">Creative</option></select></div>
-        <div class="flex justify-end gap-2"><button type="button" id="cancelSettingsBtn" class="px-4 py-2 bg-gray-600 rounded text-white">Cancel</button><button type="submit" class="px-4 py-2 bg-blue-600 rounded text-white">Save</button></div>
+        <div>
+        <div id="user-info">Loading...</div>
+          <label for="display_name" class="block text-sm text-gray-300">Display Name</label>
+          <input type="text" id="display_name" name="display_name" class="w-full p-2 bg-gray-700 text-white rounded">
+        </div>
+        <div>
+          <label for="preferred_model" class="block text-sm text-gray-300">Preferred Model</label>
+          <select id="preferred_model" name="preferred_model" class="w-full p-2 bg-gray-700 text-white rounded">
+            <option value="">Default</option>
+            <option value="advanced">Advanced (High-performance)</option>
+            <option value="standard">Standard (Balanced)</option>
+            <option value="light">Light (Quick)</option>
+          </select>
+        </div>
+        <div>
+          <label for="job_title" class="block text-sm text-gray-300">Job Title</label>
+          <input type="text" id="job_title" name="job_title" class="w-full p-2 bg-gray-700 text-white rounded">
+        </div>
+        <div>
+          <label for="education" class="block text-sm text-gray-300">Education</label>
+          <input type="text" id="education" name="education" class="w-full p-2 bg-gray-700 text-white rounded">
+        </div>
+        <div>
+          <label for="interests" class="block text-sm text-gray-300">Interests</label>
+          <textarea id="interests" name="interests" class="w-full p-2 bg-gray-700 text-white rounded"></textarea>
+        </div>
+        <div>
+          <label for="additional_info" class="block text-sm text-gray-300">Additional Info</label>
+          <textarea id="additional_info" name="additional_info"
+            class="w-full p-2 bg-gray-700 text-white rounded"></textarea>
+        </div>
+        <div>
+          <label for="conversation_style" class="block text-sm text-gray-300">Conversation Style</label>
+          <select id="conversation_style" name="conversation_style" class="w-full p-2 bg-gray-700 text-white rounded">
+            <option value="default">Default</option>
+            <option value="concise">Concise</option>
+            <option value="analytical">Analytical</option>
+            <option value="creative">Creative</option>
+          </select>
+        </div>
+        <div class="flex justify-end gap-2">
+          <button type="button" id="closeSettingsBtn" class="px-4 py-2 bg-gray-600 text-white rounded">Cancel</button>
+          <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Save</button>
+        </div>
       </form>
     </div>
   </div>
 
+  <!-- Copyright -->
+  <div class="text-center text-xs text-gray-400 py-2">
+    © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
+  </div>
+  <!-- Install Button -->
+  <button id="installAppBtn" style="display: none;"
+    class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
+    📲 Install MG Chat
+  </button>
+  <!-- PWA Install Instructions -->
+  <div id="pwa-instructions" class="fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg z-50 hidden">
+    <p><strong>Add to Home Screen:</strong> Tap the share button in your browser, then "Add to Home Screen" for a
+      native-like experience!</p>
+    <button onclick="document.getElementById('pwa-instructions').classList.add('hidden')"
+      class="ml-2 text-sm">Close</button>
+  </div>
+
   <!-- Scripts -->
-  <script src="/static/js/chat.js?v=3"></script>
-  <script>
-    // Initialize Mermaid
-    if (typeof mermaid !== 'undefined') {
-      mermaid.initialize({ 
-        startOnLoad: false, 
-        theme: 'dark', 
-        securityLevel: 'loose',
-        flowchart: { useMaxWidth: true, htmlLabels: true }
-      });
-    }
+  <script src="/static/js/chat.js?v=1.2"></script>
+
 
-    // Mobile sidebar toggle
-    const sidebar = document.getElementById('sidebar');
-    const mobileToggle = document.getElementById('mobileSidebarToggle');
-    const sidebarToggle = document.getElementById('sidebarToggle');
-    
-    function openSidebar() { if (sidebar) sidebar.classList.add('open'); }
-    function closeSidebar() { if (sidebar) sidebar.classList.remove('open'); }
-    
-    if (mobileToggle) mobileToggle.addEventListener('click', openSidebar);
-    if (sidebarToggle) sidebarToggle.addEventListener('click', closeSidebar);
-    
-    if (sidebar) {
-      document.addEventListener('click', (e) => {
-        if (window.innerWidth < 768 && sidebar.classList.contains('open')) {
-          if (!sidebar.contains(e.target) && !mobileToggle?.contains(e.target)) {
-            closeSidebar();
-          }
-        }
-      });
-    }
 
-    // Pass conversation data to JS
+  <script>
+    // تهيئة مكتبة AOS
+    AOS.init();
+
+    // تمرير conversation_id و conversation_title إذا كانا موجودين
     {% if conversation_id %}
     window.conversationId = "{{ conversation_id }}";
     window.conversationTitle = "{{ conversation_title }}";
+    if (window.loadConversation) {
+      window.loadConversation("{{ conversation_id }}");
+    }
     {% endif %}
+
+    // تسجيل Service Worker لتفعيل الـ PWA
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/static/js/sw.js')
+        .then(function (reg) {
+          console.log('✅ Service Worker Registered', reg);
+        }).catch(function (err) {
+          console.error('❌ Service Worker registration failed', err);
+        });
+    }
+
+    // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
+    let deferredPrompt;
+    window.addEventListener('beforeinstallprompt', (e) => {
+      e.preventDefault();
+      deferredPrompt = e;
+      const installBtn = document.getElementById('installAppBtn');
+      if (installBtn) {
+        installBtn.style.display = 'block';
+        installBtn.addEventListener('click', () => {
+          deferredPrompt.prompt();
+          deferredPrompt.userChoice.then(choice => {
+            if (choice.outcome === 'accepted') {
+              console.log('✅ User accepted the install prompt');
+            } else {
+              console.log('❌ User dismissed the install prompt');
+            }
+            deferredPrompt = null;
+          });
+        });
+      }
+    });
+
+    // Show PWA instructions on first visit
+    if (localStorage.getItem('pwa-instructions-shown') !== 'true') {
+      document.getElementById('pwa-instructions').classList.remove('hidden');
+      localStorage.setItem('pwa-instructions-shown', 'true');
+    }
   </script>
+
+  <!-- Mermaid.js for diagrams -->
+<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+<script>
+  mermaid.initialize({ 
+    startOnLoad: false,
+    theme: 'dark',
+    securityLevel: 'loose',
+    flowchart: { useMaxWidth: true, htmlLabels: true },
+    sequence: { useMaxWidth: true }
+  });
+</script>
+
 </body>
 
 </html>