Update index.html

index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Genisi AI</title>
   
-  <!-- 🌟 Lucide Icons - مكتبة أيقونات عصرية ونظيفة -->
+  <!-- 🌟 Lucide Icons -->
   <script src="https://unpkg.com/lucide@latest"></script>
   
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
@@ -23,6 +23,8 @@
       --user-bubble: #1a2340; --bot-bubble: #161920;
       --danger: #f75f5f; 
       --flash-color: #fbbf24; --pro-color: #a78bfa;
+      --thinking-bg: rgba(124, 92, 247, 0.08);
+      --thinking-border: rgba(124, 92, 247, 0.2);
       --radius: 28px; --radius-sm: 18px; --radius-pill: 50px;
       --sidebar-w: 280px; --tr: 0.3s cubic-bezier(.4,0,.2,1);
     }
@@ -32,6 +34,8 @@
       --text: #1a1d2e; --text2: #4a5070; --text3: #8a90a8;
       --user-bubble: #dde6ff; --bot-bubble: #fff; --accent-soft: rgba(79,142,247,0.1);
       --flash-color: #d97706; --pro-color: #7c3aed;
+      --thinking-bg: rgba(124, 58, 237, 0.05);
+      --thinking-border: rgba(124, 58, 237, 0.15);
     }
     *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
     html,body{height:100%;font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text); scroll-behavior: smooth;}
@@ -40,13 +44,13 @@
 
     .app{display:flex;height:100vh;overflow:hidden}
 
-    /* SIDEBAR */
+    /* SIDEBAR - مخفي افتراضياً */
     .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
       border-right:1px solid var(--border);display:flex;flex-direction:column;
       transition:width var(--tr),min-width var(--tr);overflow:hidden;
       border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);}
     [dir="rtl"] .sidebar { border-right:none; border-left:1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
-    .sidebar.collapsed{width:0;min-width:0;border:none}
+    .sidebar.collapsed{width:0;min-width:0;border:none;padding:0;}
     .sidebar-header{padding:24px 20px 16px;display:flex;align-items:center;gap:12px;}
     .s-logo{display:flex;align-items:center;gap:12px;flex:1}
     .s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover; box-shadow: 0 4px 12px var(--accent-soft);}
@@ -56,7 +60,7 @@
       color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
       font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px; justify-content:center;
       transition:all var(--tr); box-shadow: 0 4px 15px var(--accent-soft);}
-    .btn-new i, .btn-new svg { width: 18px; height: 18px; }
+    .btn-new svg { width: 18px; height: 18px; }
     .btn-new:hover{opacity:.9;transform:translateY(-2px)}
     .s-label{padding:10px 20px;font-size:.75rem;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase}
     .chats-list{flex:1;overflow-y:auto;padding:4px 12px;display:flex;flex-direction:column;gap:6px}
@@ -72,16 +76,35 @@
     .chat-item:hover .del-btn{opacity:1}
     .del-btn:hover{background:rgba(247,95,95,.15); transform:scale(1.1);}
     .del-btn svg { width: 16px; height: 16px; }
-    .s-footer{padding:16px;display:flex;align-items:center;gap:12px; justify-content: center;}
+    .s-footer{padding:16px;display:flex;align-items:center;gap:12px; justify-content: space-between; border-top: 1px solid var(--border); margin-top: auto;}
+    .s-footer-actions {display: flex; align-items: center; gap: 8px;}
     .btn-icon{width:42px;height:42px;background:var(--surface2);border:none;
       border-radius:var(--radius-pill);color:var(--text2);cursor:pointer;display:flex;
       align-items:center;justify-content:center;transition:all var(--tr)}
     .btn-icon svg { width: 20px; height: 20px; }
-    .btn-icon:hover{background:var(--surface3);color:var(--text); transform:rotate(10deg);}
+    .btn-icon:hover{background:var(--surface3);color:var(--text);}
+
+    .btn-collapse-sidebar {
+      width: 42px; height: 42px; background: var(--surface2); border: none;
+      border-radius: var(--radius-pill); color: var(--text2); cursor: pointer;
+      display: flex; align-items: center; justify-content: center; transition: all var(--tr);
+    }
+    .btn-collapse-sidebar svg { width: 20px; height: 20px; }
+    .btn-collapse-sidebar:hover { background: var(--surface3); color: var(--text); }
 
     /* MAIN */
     .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; background: var(--bg);}
     .topbar{height:70px;padding:0 24px;display:flex;align-items:center;gap:16px; flex-shrink:0}
+    
+    .btn-show-sidebar {
+      width: 42px; height: 42px; background: var(--surface2); border: none;
+      border-radius: var(--radius-pill); color: var(--text2); cursor: pointer;
+      display: none; align-items: center; justify-content: center; transition: all var(--tr);
+    }
+    .btn-show-sidebar svg { width: 20px; height: 20px; }
+    .btn-show-sidebar:hover { background: var(--surface3); color: var(--text); }
+    .sidebar.collapsed ~ .main .btn-show-sidebar { display: flex; }
+    
     .topbar-title{flex:1;font-size:1.05rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 
     /* CHAT AREA */
@@ -99,9 +122,9 @@
     .chip svg { width: 18px; height: 18px; color: var(--accent); }
     .chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent); transform:translateY(-2px);}
 
-    /* MESSAGES & ANIMATIONS */
+    /* MESSAGES */
     .msg-row{display:flex;padding:8px 30px;gap:16px; animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
-    @keyframes popIn { from { opacity: 0; transform: translateY(15px) scale(0.98); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
+    @keyframes popIn { from { opacity: 0; transform: translateY(15px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
     @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
     .msg-row.user{flex-direction:row-reverse}
     .msg-av{width:38px;height:38px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;
@@ -113,77 +136,107 @@
     .msg-row.user .msg-av svg { width: 20px; height: 20px; }
     
     .bubble{max-width:min(700px,80vw);padding:16px 22px;border-radius:var(--radius);
-      font-size:.98rem;line-height:1.75;word-break:break-word; box-shadow: 0 4px 15px rgba(0,0,0,0.03);}
-    .msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;border-top-left-radius:var(--radius);}
-    [dir="rtl"] .msg-row.bot .bubble { border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
-    .msg-row.user .bubble{background:var(--user-bubble);border:none; border-top-right-radius:6px}
-    [dir="rtl"] .msg-row.user .bubble { border-top-right-radius:var(--radius); border-top-left-radius:6px; }
+      font-size:.98rem;line-height:1.75;word-break:break-word;}
+    .msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;}
+    .msg-row.user .bubble{background:var(--user-bubble);border:none;}
+
+    /* 🌟 حاوية التفكير لنموذج Pro */
+    .thinking-container {
+      margin: 16px 0;
+      padding: 16px 18px;
+      background: var(--thinking-bg);
+      border: 1px solid var(--thinking-border);
+      border-radius: var(--radius-sm);
+      border-left: 3px solid var(--pro-color);
+    }
+    [dir="rtl"] .thinking-container {
+      border-left: 1px solid var(--thinking-border);
+      border-right: 3px solid var(--pro-color);
+    }
     
-    /* GENISI STREAMING EFFECT */
-    .genisi-cursor { display: inline-block; width: 14px; height: 14px; margin-inline-start: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); mask-size: cover; -webkit-mask-size: cover; animation: spinPulse 1s infinite linear; transform-origin: center; vertical-align: middle; }
-    @keyframes spinPulse { 0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.2) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); } 100% { transform: scale(0.8) rotate(180deg); opacity: 0.5; } }
-
-    /* IMAGE SKELETON LOADING */
-    .skeleton-img {
-      width: 100%; max-width: 400px; height: 350px;
-      margin: 15px auto; border-radius: 18px;
-      background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
-      background-size: 200% 100%;
-      animation: skeletonLoading 1.5s infinite linear;
-      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-      display: flex; align-items: center; justify-content: center; gap: 10px;
-      color: var(--text3); font-size: 1.2rem;
+    .thinking-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+      color: var(--pro-color);
+      font-weight: 600;
+      font-size: 0.9rem;
     }
-    @keyframes skeletonLoading {
-      0% { background-position: 200% 0; }
-      100% { background-position: -200% 0; }
+    
+    .thinking-header svg {
+      width: 18px;
+      height: 18px;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 0.6; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.1); }
+    }
+    
+    .thinking-content {
+      color: var(--text2);
+      font-size: 0.9rem;
+      line-height: 1.7;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    
+    .thinking-content p:last-child {
+      margin-bottom: 0;
+    }
+    
+    /* رد Pro النهائي */
+    .pro-response {
+      margin-top: 8px;
     }
 
+    /* GENISI STREAMING EFFECT */
+    .genisi-cursor { display: inline-block; width: 12px; height: 12px; margin-inline-start: 6px; background: var(--accent); border-radius: 50%; animation: blink 1s infinite; }
+    @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
+
     /* MARKDOWN STYLES */
     .bubble p{margin-bottom:12px}.bubble p:last-child{margin-bottom:0}
     .bubble ul,.bubble ol{padding-inline-start:24px;margin:12px 0}
     .bubble li {margin-bottom: 6px;}
-    .bubble .table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border-radius:var(--radius-sm);border:1px solid var(--border);}
+    .bubble .table-wrapper{width:100%;overflow-x:auto;margin:16px 0;border-radius:var(--radius-sm);border:1px solid var(--border);}
     .bubble table{width:100%;border-collapse:collapse;min-width:400px;}
-    .bubble th,.bubble td{border:1px solid var(--border);padding:10px 14px;text-align:start;white-space:nowrap;}
+    .bubble th,.bubble td{border:1px solid var(--border);padding:10px 14px;text-align:start;}
     .bubble th{background:var(--surface3);font-weight:600;}
 
     /* Code Blocks */
-    .code-container{position:relative;margin:16px 0;background:var(--surface3);border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;max-width:100%;}
-    .code-header{display:flex;justify-content:space-between;align-items:center;background:#12141a;padding:8px 16px;font-size:0.8rem;color:var(--text2);font-family:'JetBrains Mono',monospace;}
-    .copy-btn{background:var(--surface2);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;font-size:0.8rem;padding:4px 10px;border-radius:var(--radius-pill);transition:all 0.2s;}
-    .copy-btn svg { width: 16px; height: 16px; }
+    .code-container{position:relative;margin:16px 0;background:var(--surface3);border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;}
+    .code-header{display:flex;justify-content:space-between;align-items:center;background:#12141a;padding:8px 16px;font-size:0.8rem;color:var(--text2);}
+    .copy-btn{background:var(--surface2);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;font-size:0.8rem;padding:4px 10px;border-radius:var(--radius-pill);}
+    .copy-btn svg { width: 14px; height: 14px; }
     .copy-btn:hover{background:var(--accent);color:#fff;}
-    .code-container pre{margin:0;padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;font-family:'JetBrains Mono',monospace;font-size:0.85rem;max-width:100%;}
-    .code-container pre code{white-space:pre;display:block;}
+    .code-container pre{margin:0;padding:16px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:0.85rem;}
     .bubble code:not(pre code){font-family:'JetBrains Mono',monospace;font-size:.85rem;background:var(--surface3);padding:3px 6px;border-radius:6px;color:var(--accent);}
 
-    /* KaTeX Math Styles */
-    .katex-display{overflow-x:auto;overflow-y:hidden;padding:8px 0;-webkit-overflow-scrolling:touch;}
+    /* KaTeX */
+    .katex-display{overflow-x:auto;overflow-y:hidden;padding:8px 0;}
     .katex{font-size:1.05em;}
 
     /* Files */
     .file-chip {display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 12px; font-size:0.85rem; margin:0 4px 8px 0; color:var(--text);}
-    .file-chip svg { width: 16px; height: 16px; }
-    .file-chip button {background:none; border:none; color:var(--danger); cursor:pointer; font-size:1rem; padding:0; margin-left:4px; transition:transform 0.2s; display: flex; align-items: center;}
-    .file-chip button svg { width: 14px; height: 14px; }
-    .file-chip button:hover {transform:scale(1.2);}
+    .file-chip svg { width: 14px; height: 14px; }
+    .file-chip button {background:none; border:none; color:var(--danger); cursor:pointer; padding:0; margin-left:4px; display: flex; align-items: center;}
+    .file-chip button svg { width: 12px; height: 12px; }
     .file-prev {display:flex; align-items:center; gap:8px; background:var(--surface3); padding:8px 12px; border-radius:8px; margin-bottom:8px; font-size:0.85rem;}
-    .file-prev svg { width: 18px; height: 18px; }
     
     .mem-badge{font-size:.75rem;color:var(--text3);padding:4px 30px 10px;display:flex;align-items:center;gap:6px; font-weight: 600;}
-    .mem-badge svg { width: 14px; height: 14px; }
 
     /* INPUT */
     .input-area{padding:0 24px 30px; display:flex; flex-direction:column; align-items:center; flex-shrink:0;}
     .input-wrapper{width:100%; max-width:850px; position:relative;}
     .file-chips-container {width:100%; max-width:850px; display:flex; flex-wrap:wrap; margin-bottom:8px;}
     .input-box{display:flex;align-items:flex-end;gap:12px;background:var(--surface);
-      border:1px solid var(--border);border-radius:32px;padding:12px 16px 12px 16px;
+      border:1px solid var(--border);border-radius:32px;padding:12px 16px;
       transition:all var(--tr); box-shadow: 0 8px 30px rgba(0,0,0,0.15);}
-    .input-box:focus-within{border-color:var(--accent); box-shadow: 0 8px 30px var(--accent-soft), 0 0 0 3px var(--accent-soft);}
+    .input-box:focus-within{border-color:var(--accent); box-shadow: 0 8px 30px var(--accent-soft);}
     
-    .btn-attach{background:none; border:none; color:var(--text3); cursor:pointer; padding:6px; border-radius:50%; transition:all var(--tr); display:flex; align-items:center; justify-content:center;}
+    .btn-attach{background:none; border:none; color:var(--text3); cursor:pointer; padding:6px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
     .btn-attach svg { width: 22px; height: 22px; }
     .btn-attach:hover{color:var(--accent); background:var(--surface2);}
 
@@ -191,137 +244,48 @@
       font-family:'Cairo',sans-serif;font-size:.98rem;resize:none;max-height:160px;line-height:1.6; padding: 6px 0;}
     .input-box textarea::placeholder{color:var(--text3)}
     
-    .btn-send, .btn-stop {width:42px;height:42px; border:none;border-radius:50%;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:all var(--tr); flex-shrink:0; margin-bottom: 2px;}
+    .btn-send, .btn-stop {width:42px;height:42px; border:none;border-radius:50%;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:all var(--tr); flex-shrink:0;}
     .btn-send {background:linear-gradient(135deg,var(--accent),var(--accent2));}
     .btn-send svg { width: 20px; height: 20px; }
-    .btn-send:hover{opacity:.9;transform:scale(1.08) rotate(-10deg);}[dir="rtl"] .btn-send:hover{transform:scale(1.08) rotate(10deg);}
+    .btn-send:hover{opacity:.9;transform:scale(1.08);}
     .btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none;}
     
-    /* Stop Button Styles */
     .btn-stop {background:var(--surface3); color:var(--text); border:1px solid var(--border);}
     .btn-stop svg { width: 20px; height: 20px; }
-    .btn-stop:hover {background:var(--danger); color:#fff; transform:scale(1.05);}
+    .btn-stop:hover {background:var(--danger); color:#fff;}
 
-    /* 🌟 MODEL SELECTOR IN INPUT BAR - أيقونة فقط */
-    .model-selector-input {
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-    
+    /* MODEL SELECTOR */
+    .model-selector-input { position: relative; display: flex; align-items: center; }
     .model-toggle-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 50%;
-      cursor: pointer;
-      transition: all var(--tr);
-      user-select: none;
-    }
-    
-    .model-toggle-btn:hover {
-      background: var(--surface3);
-      border-color: var(--accent);
-      transform: scale(1.05);
-    }
-    
-    .model-toggle-btn svg {
-      width: 18px;
-      height: 18px;
-      transition: all var(--tr);
-    }
-    
-    .model-toggle-btn.flash-active svg {
-      color: var(--flash-color);
-    }
-    
-    .model-toggle-btn.pro-active svg {
-      color: var(--pro-color);
+      display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
+      background: var(--surface2); border: 1px solid var(--border); border-radius: 50%;
+      cursor: pointer; transition: all var(--tr);
     }
+    .model-toggle-btn:hover { background: var(--surface3); border-color: var(--accent); transform: scale(1.05); }
+    .model-toggle-btn svg { width: 18px; height: 18px; }
+    .model-toggle-btn.flash-active svg { color: var(--flash-color); }
+    .model-toggle-btn.pro-active svg { color: var(--pro-color); }
     
     .model-dropdown-input {
-      position: absolute;
-      bottom: calc(100% + 8px);
-      left: 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 8px;
-      min-width: 220px;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.4);
-      z-index: 100;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(10px);
-      transition: all var(--tr);
-    }
-    
-    [dir="rtl"] .model-dropdown-input {
-      left: auto;
-      right: 0;
-    }
-    
-    .model-dropdown-input.show {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
+      position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--surface);
+      border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px;
+      min-width: 220px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); z-index: 100;
+      opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--tr);
     }
+    [dir="rtl"] .model-dropdown-input { left: auto; right: 0; }
+    .model-dropdown-input.show { opacity: 1; visibility: visible; transform: translateY(0); }
     
     .model-option-input {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 14px;
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      transition: background var(--tr);
-    }
-    
-    .model-option-input:hover {
-      background: var(--surface2);
-    }
-    
-    .model-option-input.active {
-      background: var(--accent-soft);
-      border: 1px solid var(--accent);
-    }
-    
-    .model-option-input svg {
-      width: 22px;
-      height: 22px;
-      flex-shrink: 0;
-    }
-    
-    .model-info-input {
-      flex: 1;
-    }
-    
-    .model-name-input {
-      font-weight: 600;
-      font-size: 0.95rem;
-      color: var(--text);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    
-    .model-desc-input {
-      font-size: 0.75rem;
-      color: var(--text3);
-      margin-top: 2px;
-    }
-    
-    .model-badge-input {
-      padding: 2px 8px;
-      border-radius: var(--radius-pill);
-      font-size: 0.65rem;
-      font-weight: 700;
-      color: #fff;
+      display: flex; align-items: center; gap: 12px; padding: 12px 14px;
+      border-radius: var(--radius-sm); cursor: pointer; transition: background var(--tr);
     }
+    .model-option-input:hover { background: var(--surface2); }
+    .model-option-input.active { background: var(--accent-soft); border: 1px solid var(--accent); }
+    .model-option-input svg { width: 22px; height: 22px; flex-shrink: 0; }
+    .model-info-input { flex: 1; }
+    .model-name-input { font-weight: 600; font-size: 0.95rem; color: var(--text); display: flex; align-items: center; gap: 6px; }
+    .model-desc-input { font-size: 0.75rem; color: var(--text3); margin-top: 2px; }
+    .model-badge-input { padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.65rem; font-weight: 700; color: #fff; }
 
     /* MODAL */
     .overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6);display:flex;
@@ -334,7 +298,7 @@
     .overlay.open .modal{transform:translateY(0) scale(1)}
     .m-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
     .m-title{font-size:1.3rem;font-weight:700;flex:1}
-    .m-close{background:var(--surface2);border:none;color:var(--text);cursor:pointer;width:36px;height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background var(--tr);}
+    .m-close{background:var(--surface2);border:none;color:var(--text);cursor:pointer;width:36px;height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
     .m-close svg { width: 20px; height: 20px; }
     .m-close:hover{background:var(--danger); color:#fff;}
     .s-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
@@ -342,41 +306,34 @@
     .s-desc{font-size:.8rem;color:var(--text3);margin-top:4px}
     .toggle{position:relative;width:48px;height:26px}
     .toggle input{opacity:0;width:0;height:0}
-    .tslider{position:absolute;inset:0;background:var(--surface3);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--tr)}
+    .tslider{position:absolute;inset:0;background:var(--surface3);border-radius:var(--radius-pill);cursor:pointer;}
     .tslider::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;
-      background:#fff;top:3px;left:4px;transition:all var(--tr); box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
+      background:#fff;top:3px;left:4px;transition:all var(--tr);}
     .toggle input:checked+.tslider{background:var(--accent)}
     .toggle input:checked+.tslider::before{transform:translateX(20px)}
     
-    select.s-input { width:auto; padding:8px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--text); cursor:pointer; font-family:'Cairo',sans-serif; font-weight:600;}
+    select.s-input { width:auto; padding:8px 16px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--text); cursor:pointer; font-family:'Cairo',sans-serif;}
     .btn-save{width:100%;margin-top:24px;padding:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));
-      color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;font-size:1rem;font-weight:700; transition:opacity var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px;}
+      color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-size:1rem;font-weight:700; display: flex; align-items: center; justify-content: center; gap: 8px;}
     .btn-save svg { width: 18px; height: 18px; }
-    .btn-save:hover{opacity:.9}
     .btn-danger{padding:8px 18px;background:rgba(247,95,95,.12);border:1px solid var(--danger);
-      color:var(--danger);border-radius:var(--radius-pill);cursor:pointer;font-size:.9rem;font-weight:600;font-family:'Cairo',sans-serif; transition:all var(--tr); display: flex; align-items: center; gap: 6px;}
+      color:var(--danger);border-radius:var(--radius-pill);cursor:pointer;font-size:.9rem;font-weight:600; display: flex; align-items: center; gap: 6px;}
     .btn-danger svg { width: 16px; height: 16px; }
     .btn-danger:hover{background:var(--danger); color:#fff;}
 
-    /* ══ RESPONSIVE MOBILE ══ */
     @media (max-width: 640px) {
       .msg-row { padding: 6px 12px; gap: 10px; }
       .bubble { max-width: 92vw; padding: 12px 14px; font-size: .93rem; }
-      .msg-row.bot .bubble { padding: 6px 2px; }
       .topbar { height: 56px; padding: 0 14px; }
       .input-area { padding: 0 10px 18px; }
-      .code-container pre { font-size: 0.78rem; padding: 12px; }
-      .bubble th, .bubble td { font-size: 0.85rem; padding: 8px 10px; }
       .w-title { font-size: 1.8rem; }
-      .chips { gap: 8px; }
-      .chip { font-size: .82rem; padding: 8px 14px; }
     }
   </style>
 </head>
 <body>
 <div class="app">
 
-  <aside class="sidebar" id="sidebar">
+  <aside class="sidebar collapsed" id="sidebar">
     <div class="sidebar-header">
       <div class="s-logo">
         <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
@@ -390,14 +347,23 @@
     <div class="s-label" id="i18n-chats-label">CHATS</div>
     <div class="chats-list" id="chats-list"></div>
     <div class="s-footer">
-      <button class="btn-icon" onclick="openSettings()"><i data-lucide="settings"></i></button>
-      <button class="btn-icon" id="theme-btn" onclick="toggleTheme()"><i data-lucide="moon"></i></button>
+      <div class="s-footer-actions">
+        <button class="btn-icon" onclick="openSettings()"><i data-lucide="settings"></i></button>
+        <button class="btn-icon" id="theme-btn" onclick="toggleTheme()"><i data-lucide="moon"></i></button>
+      </div>
+      <!-- 🌟 زر إخفاء السايد بار - داخل السايد بار -->
+      <button class="btn-collapse-sidebar" onclick="toggleSidebar()" title="إخفاء القائمة">
+        <i data-lucide="panel-left-close"></i>
+      </button>
     </div>
   </aside>
 
   <main class="main">
     <div class="topbar">
-      <button class="btn-icon" onclick="toggleSidebar()"><i data-lucide="menu"></i></button>
+      <!-- 🌟 زر إظهار السايد بار - يظهر فقط عندما يكون مخفياً -->
+      <button class="btn-show-sidebar" onclick="toggleSidebar()" title="إظهار القائمة">
+        <i data-lucide="panel-left-open"></i>
+      </button>
       <div class="topbar-title" id="topbar-title">Genisi AI</div>
     </div>
 
@@ -410,7 +376,6 @@
           <input type="file" id="file-input" multiple hidden onchange="handleFiles(this.files)" />
           <button class="btn-attach" onclick="document.getElementById('file-input').click()"><i data-lucide="paperclip"></i></button>
           
-          <!-- 🌟 MODEL SELECTOR - أيقونة فقط -->
           <div class="model-selector-input">
             <div class="model-toggle-btn" id="model-toggle-btn" onclick="toggleModelDropdownInput(event)">
               <i id="model-icon-input" data-lucide="zap"></i>
@@ -427,13 +392,13 @@
                 </div>
               </div>
               <div class="model-option-input" data-model="pro" onclick="selectModelInput('pro', event)">
-                <i data-lucide="crown" style="color: var(--pro-color);"></i>
+                <i data-lucide="brain" style="color: var(--pro-color);"></i>
                 <div class="model-info-input">
                   <div class="model-name-input">
                     Genisi Pro
                     <span class="model-badge-input" style="background: var(--pro-color);">💎 Pro</span>
                   </div>
-                  <div class="model-desc-input">متقدم، تحليل عميق وإبداع</div>
+                  <div class="model-desc-input">يفكر بعمق، تحليل وإبداع</div>
                 </div>
               </div>
             </div>
@@ -490,10 +455,11 @@ const i18n = {
   en: { 
     newChat: "New Chat", chatsLabel: "CHATS", settings: "Settings", lang: "Language", 
     dark: "Dark Mode", del: "Delete All Chats", delDesc: "This action cannot be undone", 
-    delBtn: "Delete", saveBtn: "Close", placeholder: "Type your message... (Enter to send)", 
+    delBtn: "Delete", saveBtn: "Close", placeholder: "Type a message... (Enter to send)", 
     welcomeTitle: "Welcome to Genisi", welcomeSub: "Your smart assistant by AnesNT — Batna 🇩🇿", 
     c1: "What is AI?", c2: "Write Python code", c3: "Summarize a topic", c4: "Design an image in space 🚀", 
-    errConnect: "Connection Error", memBadge: "Memory: {c}/{t} messages", stopMsg: "[Generation stopped by user]" 
+    errConnect: "Connection Error", memBadge: "Memory: {c}/{t} messages", stopMsg: "[Generation stopped by user]",
+    thinking: "Genisi Pro is thinking..."
   },
   ar: { 
     newChat: "محادثة جديدة", chatsLabel: "المحادثات", settings: "الإعدادات", lang: "اللغة", 
@@ -501,7 +467,8 @@ const i18n = {
     delBtn: "حذف", saveBtn: "إغلاق", placeholder: "اكتب رسالتك... (Enter للإرسال)", 
     welcomeTitle: "مرحبًا في Genisi", welcomeSub: "مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿", 
     c1: "ما هو الذكاء الاصطن��عي؟", c2: "اكتب كود بايثون", c3: "لخص لي موضوعاً", c4: "صمم صورة بالفضاء 🚀", 
-    errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل", stopMsg: "[تم إيقاف التوليد]" 
+    errConnect: "خطأ في الاتصال", memBadge: "الذاكرة: {c}/{t} رسائل", stopMsg: "[تم إيقاف التوليد]",
+    thinking: "Genisi Pro يفكر..."
   },
   fr: { 
     newChat: "Nouvelle Disc.", chatsLabel: "DISCUSSIONS", settings: "Paramètres", lang: "Langue", 
@@ -509,7 +476,8 @@ const i18n = {
     delBtn: "Supprimer", saveBtn: "Fermer", placeholder: "Écrivez votre message...", 
     welcomeTitle: "Bienvenue sur Genisi", welcomeSub: "Votre assistant intelligent par AnesNT — Batna 🇩🇿", 
     c1: "Qu'est-ce que l'IA?", c2: "Code Python", c3: "Résumer un sujet", c4: "Créer une image 🚀", 
-    errConnect: "Erreur de connexion", memBadge: "Mémoire: {c}/{t} msgs", stopMsg: "[Génération arrêtée]" 
+    errConnect: "Erreur de connexion", memBadge: "Mémoire: {c}/{t} msgs", stopMsg: "[Génération arrêtée]",
+    thinking: "Genisi Pro réfléchit..."
   },
   es: { 
     newChat: "Nuevo Chat", chatsLabel: "CHATS", settings: "Ajustes", lang: "Idioma", 
@@ -517,7 +485,8 @@ const i18n = {
     delBtn: "Borrar", saveBtn: "Cerrar", placeholder: "Escribe tu mensaje...", 
     welcomeTitle: "Bienvenido a Genisi", welcomeSub: "Tu asistente por AnesNT — Batna 🇩🇿", 
     c1: "¿Qué es la IA?", c2: "Código Python", c3: "Resumir", c4: "Diseñar imagen 🚀", 
-    errConnect: "Error de conexión", memBadge: "Memoria: {c}/{t} msgs", stopMsg: "[Generación detenida]" 
+    errConnect: "Error de conexión", memBadge: "Memoria: {c}/{t} msgs", stopMsg: "[Generación detenida]",
+    thinking: "Genisi Pro está pensando..."
   }
 };
 
@@ -541,27 +510,17 @@ function applyI18n() {
   
   if(!activeChatId) renderWelcome();
   renderChatList();
-  
-  // إعادة تهيئة الأيقونات بعد تغيير اللغة
   setTimeout(() => lucide.createIcons(), 10);
 }
 
-function changeLanguage(val) { 
-  currentLang = val; 
-  localStorage.setItem('genisi_lang', val); 
-  applyI18n(); 
-}
+function changeLanguage(val) { currentLang = val; localStorage.setItem('genisi_lang', val); applyI18n(); }
 
 // ═════════════════════════════════════════════════════════════
-// STATE & UTILS
+// STATE
 // ═════════════════════════════════════════════════════════════
 const genId = () => Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
-
-let userId = localStorage.getItem('genisi_user_id');
-if (!userId) {
-    userId = 'user_' + genId();
-    localStorage.setItem('genisi_user_id', userId);
-}
+let userId = localStorage.getItem('genisi_user_id') || ('user_' + genId());
+localStorage.setItem('genisi_user_id', userId);
 
 let chats = JSON.parse(localStorage.getItem('genisi_chats') || '[]');
 let activeChatId = null;
@@ -570,152 +529,83 @@ let pendingFiles = [];
 let currentAbortController = null;
 let currentModel = 'flash';
 
-// 🌟 دوال إدارة النموذج - أيقونة فقط
+// 🌟 دوال النموذج
 function toggleModelDropdownInput(event) {
     event.stopPropagation();
     const dropdown = document.getElementById('model-dropdown-input');
     dropdown.classList.toggle('show');
-    
     if (dropdown.classList.contains('show')) {
-        setTimeout(() => {
-            document.addEventListener('click', closeModelDropdownInput);
-        }, 0);
+        setTimeout(() => document.addEventListener('click', closeModelDropdownInput), 0);
     }
 }
-
 function closeModelDropdownInput() {
     document.getElementById('model-dropdown-input').classList.remove('show');
     document.removeEventListener('click', closeModelDropdownInput);
 }
-
 function selectModelInput(model, event) {
     event.stopPropagation();
     currentModel = model;
-    
     const toggleBtn = document.getElementById('model-toggle-btn');
     const iconElement = document.getElementById('model-icon-input');
     const options = document.querySelectorAll('.model-option-input');
-    
-    // تحديث الأيقونة والكلاسات
     toggleBtn.classList.remove('flash-active', 'pro-active');
-    
     if (model === 'flash') {
         iconElement.setAttribute('data-lucide', 'zap');
         toggleBtn.classList.add('flash-active');
     } else {
-        iconElement.setAttribute('data-lucide', 'crown');
+        iconElement.setAttribute('data-lucide', 'brain');
         toggleBtn.classList.add('pro-active');
     }
-    
-    // إعادة تهيئة الأيقونة
     lucide.createIcons();
-    
-    // تحديث الحالة النشطة
     options.forEach(opt => {
         opt.classList.remove('active');
-        if (opt.dataset.model === model) {
-            opt.classList.add('active');
-        }
+        if (opt.dataset.model === model) opt.classList.add('active');
     });
-    
-    // حفظ التفضيل
     localStorage.setItem('genisi_model', model);
-    
-    // إغلاق القائمة
     closeModelDropdownInput();
 }
-
-// تحميل النموذج المحفوظ
 function loadSavedModel() {
     const saved = localStorage.getItem('genisi_model') || 'flash';
     currentModel = saved;
-    
     const toggleBtn = document.getElementById('model-toggle-btn');
     const iconElement = document.getElementById('model-icon-input');
     const options = document.querySelectorAll('.model-option-input');
-    
     toggleBtn.classList.remove('flash-active', 'pro-active');
-    
     if (saved === 'flash') {
         iconElement.setAttribute('data-lucide', 'zap');
         toggleBtn.classList.add('flash-active');
     } else {
-        iconElement.setAttribute('data-lucide', 'crown');
+        iconElement.setAttribute('data-lucide', 'brain');
         toggleBtn.classList.add('pro-active');
     }
-    
     options.forEach(opt => {
         opt.classList.remove('active');
-        if (opt.dataset.model === saved) {
-            opt.classList.add('active');
-        }
+        if (opt.dataset.model === saved) opt.classList.add('active');
     });
 }
 
-// Markdown renderer
+// Markdown
 const renderer = new marked.Renderer();
 renderer.code = function(token) {
   const codeText = typeof token === 'string' ? token : token.text || '';
   const lang = typeof token === 'string' ? arguments[1] : token.lang || 'text';
-  const escapedCode = String(codeText).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-  return `
-    <div class="code-container">
-      <div class="code-header">
-        <span>${lang}</span>
-        <button class="copy-btn" onclick="copyCode(this, '${encodeURIComponent(codeText)}')">
-          <i data-lucide="copy"></i> Copy
-        </button>
-      </div>
-      <pre><code class="language-${lang}">${escapedCode}</code></pre>
-    </div>`;
+  const escapedCode = String(codeText).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return `<div class="code-container"><div class="code-header"><span>${lang}</span><button class="copy-btn" onclick="copyCode(this, '${encodeURIComponent(codeText)}')"><i data-lucide="copy"></i> Copy</button></div><pre><code>${escapedCode}</code></pre></div>`;
 };
-renderer.table = function(header, body) {
-  if (typeof header === 'object' && header !== null && 'header' in header) {
-    const token = header;
-    const hdr = token.header.map(cell => `<th>${cell.tokens.map(t=>t.raw||'').join('')}</th>`).join('');
-    const rows = (token.rows || []).map(row => `<tr>${row.map(cell => `<td>${cell.tokens.map(t=>t.raw||'').join('')}</td>`).join('')}</tr>`).join('');
-    return `<div class="table-wrapper"><table><thead><tr>${hdr}</tr></thead><tbody>${rows}</tbody></table></div>`;
-  }
-  return `<div class="table-wrapper"><table><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
-};
-renderer.html = function(html) { return html; };
-marked.setOptions({ renderer: renderer, breaks: true, gfm: true });
-
-function renderKaTeX(el) {
-  if (window.renderMathInElement) {
-    renderMathInElement(el, {
-      delimiters: [
-        {left: '$$', right: '$$', display: true},
-        {left: '$', right: '$', display: false},
-        {left: '\\(', right: '\\)', display: false},
-        {left: '\\[', right: '\\]', display: true}
-      ],
-      throwOnError: false
-    });
-  }
-}
+marked.setOptions({ renderer, breaks: true, gfm: true });
 
 function copyCode(btn, encodedCode) {
   navigator.clipboard.writeText(decodeURIComponent(encodedCode)).then(() => {
-    const originalHTML = btn.innerHTML;
     btn.innerHTML = '<i data-lucide="check"></i> Copied!';
     lucide.createIcons();
-    setTimeout(() => {
-      btn.innerHTML = '<i data-lucide="copy"></i> Copy';
-      lucide.createIcons();
-    }, 2000);
+    setTimeout(() => { btn.innerHTML = '<i data-lucide="copy"></i> Copy'; lucide.createIcons(); }, 2000);
   });
 }
 
 const saveChats = () => localStorage.setItem('genisi_chats', JSON.stringify(chats));
 const getChat = (id) => chats.find(c => c.id === (id ?? activeChatId));
-
 function esc(t){ return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-
-function scrollToBottom() {
-    const area = document.getElementById('chat-area');
-    area.scrollTop = area.scrollHeight;
-}
+function scrollToBottom() { const area = document.getElementById('chat-area'); area.scrollTop = area.scrollHeight; }
 
 // Files
 async function handleFiles(files) {
@@ -728,12 +618,10 @@ async function handleFiles(files) {
             pendingFiles.push({ name: f.name, type: f.type || 'application/octet-stream', data: data, isText: isText });
             renderFileChips();
         };
-        if (isText) reader.readAsText(f);
-        else reader.readAsDataURL(f);
+        if (isText) reader.readAsText(f); else reader.readAsDataURL(f);
     }
     document.getElementById('file-input').value = ''; 
 }
-
 function renderFileChips() {
     const container = document.getElementById('file-chips');
     container.innerHTML = '';
@@ -743,29 +631,32 @@ function renderFileChips() {
     });
     lucide.createIcons();
 }
-
 function removeFile(idx) { pendingFiles.splice(idx, 1); renderFileChips(); }
 
 // Theme
 function applyTheme(t){
   document.documentElement.setAttribute('data-theme',t);
   localStorage.setItem('genisi_theme',t);
-  const themeIcon = document.getElementById('theme-btn').querySelector('i');
-  themeIcon.setAttribute('data-lucide', t === 'dark' ? 'moon' : 'sun');
+  document.getElementById('theme-btn').querySelector('i').setAttribute('data-lucide', t === 'dark' ? 'moon' : 'sun');
   document.getElementById('dark-toggle').checked = t==='dark';
   lucide.createIcons();
 }
-
-function toggleTheme(){ 
-  applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); 
-}
-
-function applyThemeToggle(){ 
-  applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); 
+function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
+function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
+
+// 🌟 Sidebar toggle
+function toggleSidebar(){ 
+  const sidebar = document.getElementById('sidebar');
+  sidebar.classList.toggle('collapsed');
+  // تحديث أيقونة الزر داخل السايد بار
+  const collapseBtn = sidebar.querySelector('.btn-collapse-sidebar i');
+  if (collapseBtn) {
+    collapseBtn.setAttribute('data-lucide', sidebar.classList.contains('collapsed') ? 'panel-left-open' : 'panel-left-close');
+    lucide.createIcons();
+  }
 }
 
 // UI
-function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('collapsed'); }
 function openSettings(){ document.getElementById('settings-modal').classList.add('open'); document.getElementById('lang-select').value=currentLang;}
 function closeSettings(){ document.getElementById('settings-modal').classList.remove('open'); }
 
@@ -775,8 +666,7 @@ function renderChatList(){
   [...chats].reverse().forEach(chat=>{
     const div=document.createElement('div');
     div.className='chat-item'+(chat.id===activeChatId?' active':'');
-    div.innerHTML=`<i data-lucide="message-square"></i><span class="ct">${esc(chat.title||'Chat')}</span>
-      <button class="del-btn" onclick="deleteChat('${chat.id}',event)"><i data-lucide="trash-2"></i></button>`;
+    div.innerHTML=`<i data-lucide="message-square"></i><span class="ct">${esc(chat.title||'Chat')}</span><button class="del-btn" onclick="deleteChat('${chat.id}',event)"><i data-lucide="trash-2"></i></button>`;
     div.onclick = () => loadChat(chat.id);
     list.appendChild(div);
   });
@@ -787,10 +677,8 @@ function renderWelcome(){
   const t = i18n[currentLang];
   document.getElementById('topbar-title').textContent='Genisi AI';
   document.getElementById('chat-area').innerHTML=`
-    <div class="welcome" id="welcome">
-      <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="w-logo" alt="Genisi"/>
-      <div class="w-title">${t.welcomeTitle}</div>
-      <div class="w-sub">${t.welcomeSub}</div>
+    <div class="welcome"><img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="w-logo" alt="Genisi"/>
+      <div class="w-title">${t.welcomeTitle}</div><div class="w-sub">${t.welcomeSub}</div>
       <div class="chips">
         <div class="chip" onclick="quickSend('${t.c1}')"><i data-lucide="brain"></i> ${t.c1}</div>
         <div class="chip" onclick="quickSend('${t.c2}')"><i data-lucide="code-2"></i> ${t.c2}</div>
@@ -801,79 +689,32 @@ function renderWelcome(){
   lucide.createIcons();
 }
 
-function newChat(){ 
-  activeChatId=null; 
-  pendingFiles=[]; 
-  renderFileChips(); 
-  document.getElementById('msg-input').value=''; 
-  renderWelcome(); 
-  renderChatList(); 
-}
-
+function newChat(){ activeChatId=null; pendingFiles=[]; renderFileChips(); document.getElementById('msg-input').value=''; renderWelcome(); renderChatList(); }
 function loadChat(id){
-  activeChatId=id;
-  const chat=getChat(id); if(!chat) return;
+  activeChatId=id; const chat=getChat(id); if(!chat) return;
   document.getElementById('topbar-title').textContent=chat.title;
-  const area=document.getElementById('chat-area');
-  area.innerHTML='';
-  chat.history.forEach((entry, idx)=>{
-    appendBubble('user', entry.user, false, entry.uiFiles);
-    appendBubble('bot', entry.bot, true);
-    appendMemBadge(idx+1, chat.history.length);
-  });
-  scrollToBottom();
-  renderChatList();
-  lucide.createIcons();
-}
-
-function deleteChat(id,e){
-  e.stopPropagation(); 
-  chats=chats.filter(c=>c.id!==id); 
-  saveChats();
-  if(activeChatId===id) newChat(); 
-  else renderChatList();
-}
-
-function clearAllChats(){ 
-  chats=[]; 
-  saveChats(); 
-  newChat(); 
-  closeSettings(); 
-}
-
-function stopGeneration() {
-    if (currentAbortController) {
-        currentAbortController.abort();
-    }
+  const area=document.getElementById('chat-area'); area.innerHTML='';
+  chat.history.forEach((entry, idx)=>{ appendBubble('user', entry.user, false, entry.uiFiles); appendBubble('bot', entry.bot, true, null, entry.thinking); appendMemBadge(idx+1, chat.history.length); });
+  scrollToBottom(); renderChatList(); lucide.createIcons();
 }
+function deleteChat(id,e){ e.stopPropagation(); chats=chats.filter(c=>c.id!==id); saveChats(); if(activeChatId===id) newChat(); else renderChatList(); }
+function clearAllChats(){ chats=[]; saveChats(); newChat(); closeSettings(); }
+function stopGeneration() { if (currentAbortController) currentAbortController.abort(); }
 
 // ═════════════════════════════════════════════════════════════
-// MESSAGING
+// MESSAGING مع دعم التفكير لـ Pro
 // ═════════════════════════════════════════════════════════════
 function quickSend(text){ document.getElementById('msg-input').value=text; sendMessage(); }
-
-function handleKey(e){ 
-  if(e.key==='Enter'&&!e.shiftKey){
-    e.preventDefault();
-    sendMessage();
-  } 
-}
-
-function autoResize(el){ 
-  el.style.height='auto'; 
-  el.style.height=Math.min(el.scrollHeight,160)+'px'; 
-}
+function handleKey(e){ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); sendMessage(); } }
+function autoResize(el){ el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,160)+'px'; }
 
 async function sendMessage(){
   if(isGenerating) return;
   const input = document.getElementById('msg-input');
   let text = input.value.trim();
-  
   if(!text && pendingFiles.length === 0) return;
 
-  const welcome = document.getElementById('welcome');
-  if(welcome) welcome.remove();
-
+  const welcome = document.getElementById('welcome'); if(welcome) welcome.remove();
   input.value=''; input.style.height='auto';
 
   if(!activeChatId){
@@ -886,15 +727,7 @@ async function sendMessage(){
   const chat = getChat();
   const uiFiles = pendingFiles.map(f => f.name); 
   const binaryFiles =[]; 
-  
-  pendingFiles.forEach(f => {
-      if(f.isText) { 
-        text += `\n\n\`\`\`${f.name.split('.').pop()}\n// File: ${f.name}\n${f.data}\n\`\`\``; 
-      } else { 
-        binaryFiles.push({ name: f.name, mime_type: f.type, data: f.data }); 
-      }
-  });
-
+  pendingFiles.forEach(f => { if(f.isText) text += `\n\n\`\`\`${f.name.split('.').pop()}\n// File: ${f.name}\n${f.data}\n\`\`\``; else binaryFiles.push({ name: f.name, mime_type: f.type, data: f.data }); });
   appendBubble('user', text, false, uiFiles);
   pendingFiles =[]; renderFileChips();
   
@@ -902,28 +735,47 @@ async function sendMessage(){
   document.getElementById('send-btn').style.display = 'none';
   document.getElementById('stop-btn').style.display = 'flex';
 
+  // إنشاء فقاعة البوت
   const botContentDiv = appendBubble('bot', '', true);
+  let thinkingContainer = null;
+  let thinkingContent = null;
+  let responseContainer = null;
   
-  const imageTriggers =["ارسم", "صمم", "تخيل", "صورة ل", "draw", "generate", "imagine", "create an image", "تصميم"];
-  const isImageRequest = imageTriggers.some(trigger => text.toLowerCase().startsWith(trigger));
+  // إذا كان النموذج Pro، نضيف حاوية التفكير
+  if (currentModel === 'pro') {
+    const t = i18n[currentLang];
+    thinkingContainer = document.createElement('div');
+    thinkingContainer.className = 'thinking-container';
+    thinkingContainer.innerHTML = `
+      <div class="thinking-header">
+        <i data-lucide="brain"></i>
+        <span>${t.thinking}</span>
+      </div>
+      <div class="thinking-content" id="thinking-content"></div>
+    `;
+    botContentDiv.appendChild(thinkingContainer);
+    
+    responseContainer = document.createElement('div');
+    responseContainer.className = 'pro-response';
+    botContentDiv.appendChild(responseContainer);
+    
+    thinkingContent = document.getElementById('thinking-content');
+    lucide.createIcons();
+  }
 
   currentAbortController = new AbortController();
-  let fullBotResponse = "";
+  let fullResponse = "";
+  let thinkingText = "";
+  let finalResponse = "";
+  let isThinkingPhase = currentModel === 'pro';
 
   try {
     const response = await fetch('/chat', {
       method: 'POST',
       headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({ 
-        user_id: userId, 
-        message: text, 
-        history: chat.history, 
-        files: binaryFiles,
-        model: currentModel
-      }),
+      body: JSON.stringify({ user_id: userId, message: text, history: chat.history, files: binaryFiles, model: currentModel }),
       signal: currentAbortController.signal
     });
-
     if(!response.ok) throw new Error("Server Error");
 
     const reader = response.body.getReader();
@@ -934,56 +786,90 @@ async function sendMessage(){
       if(done) break;
       
       const chunk = decoder.decode(value, {stream: true});
-      fullBotResponse += chunk;
+      fullResponse += chunk;
       
-      if (fullBotResponse.includes('<div style="text-align:center;')) {
-          botContentDiv.innerHTML = fullBotResponse;
-      } else {
-          let htmlToRender = marked.parse(fullBotResponse);
-          if (isImageRequest && !fullBotResponse.includes('<img')) {
-              htmlToRender += '<div class="skeleton-img"><i data-lucide="palette"></i> جاري التخيل والتصميم...</div>';
+      // 🌟 معالجة خاصة لنموذج Pro: فصل التفكير عن الرد النهائي
+      if (currentModel === 'pro') {
+        // البحث عن علامة نهاية التفكير (يمكن تخصيصها حسب الباك-إند)
+        const thinkingEndMarker = "";
+        const markerIndex = fullResponse.indexOf(thinkingEndMarker);
+        
+        if (markerIndex !== -1 && isThinkingPhase) {
+          // انتهى التفكير، نعرض الرد النهائي
+          thinkingText = fullResponse.substring(0, markerIndex);
+          finalResponse = fullResponse.substring(markerIndex + thinkingEndMarker.length);
+          isThinkingPhase = false;
+          
+          if (thinkingContent) {
+            thinkingContent.innerHTML = marked.parse(thinkingText);
           }
-          botContentDiv.innerHTML = htmlToRender + '<span class="genisi-cursor"></span>';
+          if (responseContainer) {
+            responseContainer.innerHTML = marked.parse(finalResponse) + '<span class="genisi-cursor"></span>';
+          }
+        } else if (isThinkingPhase) {
+          // لا يزال في مرحلة التفكير
+          thinkingText = fullResponse;
+          if (thinkingContent) {
+            thinkingContent.innerHTML = marked.parse(thinkingText) + '<span class="genisi-cursor"></span>';
+          }
+        } else {
+          // مرحلة الرد النهائي
+          finalResponse = fullResponse.substring(fullResponse.indexOf(thinkingEndMarker) + thinkingEndMarker.length);
+          if (responseContainer) {
+            responseContainer.innerHTML = marked.parse(finalResponse) + '<span class="genisi-cursor"></span>';
+          }
+        }
+      } else {
+        // نموذج Flash - عرض مباشر
+        botContentDiv.innerHTML = marked.parse(fullResponse) + '<span class="genisi-cursor"></span>';
       }
+      
       lucide.createIcons();
       scrollToBottom();
     }
 
+    // إزالة المؤشر
     const cursor = botContentDiv.querySelector('.genisi-cursor');
     if (cursor) cursor.remove();
 
-    if (fullBotResponse.includes('<div style="text-align:center;') && fullBotResponse.includes('<img')) {
-        botContentDiv.innerHTML = fullBotResponse;
+    // معالجة الصور
+    if (fullResponse.includes('<div style="text-align:center;') && fullResponse.includes('<img')) {
+        botContentDiv.innerHTML = fullResponse;
     } else {
         let parsedResponse = null;
-        try { parsedResponse = JSON.parse(fullBotResponse); } catch(e) {}
-        
+        try { parsedResponse = JSON.parse(fullResponse); } catch(e) {}
         if (parsedResponse && (parsedResponse.image || parsedResponse.url)) {
-            let imgHtml = '';
-            if (parsedResponse.image) {
-                imgHtml = `<img src="data:image/png;base64,${parsedResponse.image}" alt="Generated Image" style="max-width:100%; border-radius:18px; box-shadow:0 8px 25px rgba(0,0,0,0.1);"/>`;
-            } else if (parsedResponse.url) {
-                imgHtml = `<img src="${parsedResponse.url}" alt="Generated Image" style="max-width:100%; border-radius:18px; box-shadow:0 8px 25px rgba(0,0,0,0.1);"/>`;
-            }
+            let imgHtml = parsedResponse.image ? `<img src="data:image/png;base64,${parsedResponse.image}" style="max-width:100%; border-radius:18px;"/>` : `<img src="${parsedResponse.url}" style="max-width:100%; border-radius:18px;"/>`;
             botContentDiv.innerHTML = `<div style="text-align:center;">${imgHtml}</div>`;
         } else if (parsedResponse && parsedResponse.error) {
             botContentDiv.innerHTML = `<span style="color:var(--danger)"><i data-lucide="alert-triangle"></i> ${parsedResponse.error}</span>`;
+        } else if (currentModel !== 'pro') {
+            botContentDiv.innerHTML = marked.parse(fullResponse);
         } else {
-            botContentDiv.innerHTML = marked.parse(fullBotResponse);
-            renderKaTeX(botContentDiv);
+            // للنموذج Pro، نضمن أن الرد النهائي معروض بشكل صحيح
+            if (responseContainer) {
+                responseContainer.innerHTML = marked.parse(finalResponse || fullResponse);
+            }
         }
     }
     
     lucide.createIcons();
-    chat.history.push({ user: text, bot: String(fullBotResponse), uiFiles: uiFiles });
+    
+    // حفظ المحادثة مع معلومات التفكير
+    const historyEntry = { 
+      user: text, 
+      bot: String(fullResponse), 
+      uiFiles: uiFiles,
+      thinking: currentModel === 'pro' ? thinkingText : null
+    };
+    chat.history.push(historyEntry);
     saveChats();
     appendMemBadge(chat.history.length, chat.history.length);
 
   } catch(err){
     if (err.name === 'AbortError') {
-        botContentDiv.innerHTML = marked.parse(fullBotResponse) + `<br><br><span style="color:var(--text3); font-style:italic;"><i data-lucide="ban"></i> ${i18n[currentLang].stopMsg}</span>`;
-        renderKaTeX(botContentDiv);
-        chat.history.push({ user: text, bot: String(fullBotResponse) + "\n\n*" + i18n[currentLang].stopMsg + "*", uiFiles: uiFiles });
+        botContentDiv.innerHTML = marked.parse(fullResponse) + `<br><br><span style="color:var(--text3);"><i data-lucide="ban"></i> ${i18n[currentLang].stopMsg}</span>`;
+        chat.history.push({ user: text, bot: String(fullResponse) + "\n\n*" + i18n[currentLang].stopMsg + "*", uiFiles: uiFiles });
         saveChats();
     } else {
         botContentDiv.innerHTML = `<span style="color:var(--danger)"><i data-lucide="alert-circle"></i> ${i18n[currentLang].errConnect}: ${err.message}</span>`;
@@ -998,58 +884,63 @@ async function sendMessage(){
   }
 }
 
-function appendBubble(role, text, isMarkdown, filesList =[]){
+function appendBubble(role, text, isMarkdown, filesList = [], thinkingText = null){
   const area=document.getElementById('chat-area');
   const row=document.createElement('div'); 
   row.className=`msg-row ${role}`;
-  
-  const av=document.createElement('div'); 
-  av.className='msg-av';
-  
-  if(role==='bot'){ 
-    av.innerHTML=`<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="G"/>`; 
-  } else { 
-    av.innerHTML='<i data-lucide="user"></i>';
-  }
-  
-  const bub=document.createElement('div'); 
-  bub.className='bubble';
+  const av=document.createElement('div'); av.className='msg-av';
+  if(role==='bot'){ av.innerHTML=`<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="G"/>`; } 
+  else { av.innerHTML='<i data-lucide="user"></i>'; }
+  const bub=document.createElement('div'); bub.className='bubble';
   
   if(filesList && filesList.length > 0) {
-      filesList.forEach(name => { 
-        bub.innerHTML += `<div class="file-prev"><i data-lucide="file"></i> ${esc(name)}</div>`; 
-      });
+      filesList.forEach(name => { bub.innerHTML += `<div class="file-prev"><i data-lucide="file"></i> ${esc(name)}</div>`; });
   }
 
   const contentDiv = document.createElement('div');
-  if(text) {
+  
+  // 🌟 إذا كان هناك تفكير (نموذج Pro)، نعرضه أولاً
+  if (thinkingText) {
+    const t = i18n[currentLang];
+    const thinkingContainer = document.createElement('div');
+    thinkingContainer.className = 'thinking-container';
+    thinkingContainer.innerHTML = `
+      <div class="thinking-header">
+        <i data-lucide="brain"></i>
+        <span>${t.thinking}</span>
+      </div>
+      <div class="thinking-content">${marked.parse(thinkingText)}</div>
+    `;
+    contentDiv.appendChild(thinkingContainer);
+    
+    // إضافة الرد النهائي
+    const responseDiv = document.createElement('div');
+    responseDiv.className = 'pro-response';
+    const mainResponse = String(text).replace(thinkingText + " instant", "").trim();
+    responseDiv.innerHTML = marked.parse(mainResponse || text);
+    contentDiv.appendChild(responseDiv);
+  } else if(text) {
       const safeText = (typeof text === 'object') ? JSON.stringify(text) : String(text);
       if (safeText.includes('<div style="text-align:center;')) { 
           contentDiv.innerHTML = safeText; 
       } else { 
         contentDiv.innerHTML = isMarkdown ? marked.parse(safeText) : esc(safeText).replace(/\n/g, '<br/>');
-        if (isMarkdown) renderKaTeX(contentDiv);
       }
   }
-  bub.appendChild(contentDiv);
   
-  row.appendChild(av); 
-  row.appendChild(bub);
+  bub.appendChild(contentDiv);
+  row.appendChild(av); row.appendChild(bub);
   area.appendChild(row); 
   scrollToBottom();
-  
   lucide.createIcons();
   return contentDiv; 
 }
 
 function appendMemBadge(count, total){
   const area=document.getElementById('chat-area');
-  const b=document.createElement('div'); 
-  b.className='mem-badge';
+  const b=document.createElement('div'); b.className='mem-badge';
   b.innerHTML=`<i data-lucide="database"></i> ${i18n[currentLang].memBadge.replace('{c}', count).replace('{t}', total)}`;
-  area.appendChild(b); 
-  scrollToBottom();
-  lucide.createIcons();
+  area.appendChild(b); scrollToBottom(); lucide.createIcons();
 }
 
 // ═════════════════════════════════════════════════════════════
@@ -1059,11 +950,9 @@ applyTheme(localStorage.getItem('genisi_theme')||'dark');
 document.getElementById('lang-select').value = currentLang;
 applyI18n();
 loadSavedModel();
-
-// تهيئة Lucide Icons
 lucide.createIcons();
 
-// إغلاق القائمة المنسدلة عند النقر خارجها
+// إغلاق القائمة المنسدلة
 document.addEventListener('click', function(event) {
     const selector = document.querySelector('.model-selector-input');
     const dropdown = document.getElementById('model-dropdown-input');
@@ -1071,6 +960,14 @@ document.addEventListener('click', function(event) {
         dropdown.classList.remove('show');
     }
 });
+
+// 🌟 التأكد من أن السايد بار مخفي افتراضياً
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('sidebar').classList.add('collapsed');
+    const collapseBtn = document.querySelector('.btn-collapse-sidebar i');
+    if (collapseBtn) collapseBtn.setAttribute('data-lucide', 'panel-left-open');
+    lucide.createIcons();
+});
 </script>
 </body>
 </html>