Update index.html

index.html

@@ -7,851 +7,527 @@
   <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"/>
   <style>
     :root {
-      --bg: #0d0f14;
-      --surface: #161920;
-      --surface2: #1e2230;
-      --surface3: #252a3a;
-      --border: #2a2f42;
-      --border2: #333a52;
-      --accent: #4f8ef7;
-      --accent2: #7c5cf7;
-      --accent-soft: rgba(79,142,247,0.12);
-      --text: #e8eaf2;
-      --text2: #9aa3be;
-      --text3: #5c6480;
-      --user-bubble: #1a2340;
-      --bot-bubble: #161920;
-      --danger: #f75f5f;
-      --success: #3dd68c;
-      --radius: 18px;
-      --radius-sm: 10px;
-      --sidebar-w: 280px;
-      --transition: 0.22s cubic-bezier(.4,0,.2,1);
+      --bg: #0d0f14; --surface: #161920; --surface2: #1e2230; --surface3: #252a3a;
+      --border: #2a2f42; --border2: #333a52;
+      --accent: #4f8ef7; --accent2: #7c5cf7; --accent-soft: rgba(79,142,247,0.12);
+      --text: #e8eaf2; --text2: #9aa3be; --text3: #5c6480;
+      --user-bubble: #1a2340; --bot-bubble: #161920;
+      --danger: #f75f5f; --radius: 18px; --radius-sm: 10px;
+      --sidebar-w: 280px; --tr: 0.22s cubic-bezier(.4,0,.2,1);
     }
     [data-theme="light"] {
-      --bg: #f0f2f8;
-      --surface: #ffffff;
-      --surface2: #f5f6fa;
-      --surface3: #ebedf5;
-      --border: #d8dce8;
-      --border2: #c5cad8;
-      --text: #1a1d2e;
-      --text2: #4a5070;
-      --text3: #8a90a8;
-      --user-bubble: #dde6ff;
-      --bot-bubble: #ffffff;
-      --accent-soft: rgba(79,142,247,0.1);
-    }
-    *, *::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); }
-
-    /* ── Scrollbar ── */
-    ::-webkit-scrollbar { width: 5px; }
-    ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
-
-    /* ══════════════════════════════════
-       LAYOUT
-    ══════════════════════════════════ */
-    .app { display: flex; height: 100vh; overflow: hidden; }
-
-    /* ── SIDEBAR ── */
-    .sidebar {
-      width: var(--sidebar-w);
-      min-width: var(--sidebar-w);
-      background: var(--surface);
-      border-left: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-      transition: width var(--transition), min-width var(--transition);
-      overflow: hidden;
-    }
-    .sidebar.collapsed { width: 0; min-width: 0; border: none; }
-
-    .sidebar-header {
-      padding: 18px 16px 12px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      border-bottom: 1px solid var(--border);
-    }
-    .sidebar-logo { display: flex; align-items: center; gap: 10px; flex: 1; }
-    .sidebar-logo img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
-    .sidebar-logo-name { font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-
-    .btn-new-chat {
-      margin: 12px 12px 4px;
-      padding: 10px 14px;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
-      color: #fff;
-      border: none;
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      font-family: 'Cairo', sans-serif;
-      font-size: 0.9rem;
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      transition: opacity var(--transition), transform var(--transition);
-    }
-    .btn-new-chat:hover { opacity: 0.88; transform: translateY(-1px); }
-
-    .sidebar-section-label {
-      padding: 10px 16px 4px;
-      font-size: 0.72rem;
-      font-weight: 600;
-      color: var(--text3);
-      letter-spacing: .06em;
-      text-transform: uppercase;
-    }
-    .chats-list { flex: 1; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; }
-    .chat-item {
-      padding: 9px 12px;
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      font-size: 0.87rem;
-      color: var(--text2);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      transition: background var(--transition), color var(--transition);
-      position: relative;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .chat-item:hover { background: var(--surface2); color: var(--text); }
-    .chat-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
-    .chat-item .chat-title { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-    .chat-item .del-btn {
-      opacity: 0;
-      background: none;
-      border: none;
-      color: var(--danger);
-      cursor: pointer;
-      font-size: 0.85rem;
-      padding: 2px 5px;
-      border-radius: 5px;
-      transition: opacity var(--transition);
-    }
-    .chat-item:hover .del-btn { opacity: 1; }
-
-    .sidebar-footer {
-      padding: 12px;
-      border-top: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .btn-icon {
-      width: 36px; height: 36px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      color: var(--text2);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1rem;
-      transition: background var(--transition), color var(--transition);
-    }
-    .btn-icon:hover { background: var(--surface3); color: var(--text); }
-
-    /* ── MAIN ── */
-    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
-
-    /* ── TOPBAR ── */
-    .topbar {
-      height: 58px;
-      padding: 0 18px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface);
-      flex-shrink: 0;
-    }
-    .topbar-title { flex: 1; font-size: 0.95rem; font-weight: 600; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .topbar .btn-icon { font-size: 1.1rem; }
-
-    /* ── CHAT AREA ── */
-    .chat-area {
-      flex: 1;
-      overflow-y: auto;
-      padding: 28px 0;
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
-    .welcome-screen {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-      padding: 40px 24px;
-      text-align: center;
-    }
-    .welcome-logo { width: 68px; height: 68px; border-radius: 18px; object-fit: cover; box-shadow: 0 8px 32px rgba(79,142,247,0.22); }
-    .welcome-title { font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-    .welcome-sub { color: var(--text3); font-size: 0.95rem; }
-    .welcome-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; max-width: 520px; }
-    .chip {
-      padding: 8px 16px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 99px;
-      font-size: 0.83rem;
-      color: var(--text2);
-      cursor: pointer;
-      transition: background var(--transition), border-color var(--transition), color var(--transition);
-    }
-    .chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
-
-    /* Messages */
-    .msg-row {
-      display: flex;
-      padding: 6px 28px;
-      gap: 12px;
-      animation: fadeUp 0.28s ease;
-    }
-    @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-    .msg-row.user { flex-direction: row-reverse; }
-    .msg-avatar {
-      width: 34px; height: 34px;
-      border-radius: 10px;
-      flex-shrink: 0;
-      display: flex; align-items: center; justify-content: center;
-      font-size: 1rem;
-      font-weight: 700;
-      margin-top: 2px;
-    }
-    .msg-row.bot .msg-avatar { background: linear-gradient(135deg,var(--accent),var(--accent2)); }
-    .msg-row.bot .msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
-    .msg-row.user .msg-avatar { background: var(--surface3); color: var(--text2); }
-    .bubble {
-      max-width: min(620px, 78vw);
-      padding: 12px 16px;
-      border-radius: var(--radius);
-      font-size: 0.93rem;
-      line-height: 1.72;
-      word-break: break-word;
-    }
-    .msg-row.bot .bubble { background: var(--bot-bubble); border: 1px solid var(--border); border-top-right-radius: 4px; }
-    .msg-row.user .bubble { background: var(--user-bubble); border: 1px solid var(--border2); border-top-left-radius: 4px; }
-    .bubble pre { background: var(--surface3); border-radius: 8px; padding: 12px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; margin: 8px 0; border: 1px solid var(--border); }
-    .bubble code { font-family: 'JetBrains Mono', monospace; font-size: 0.83rem; background: var(--surface3); padding: 2px 5px; border-radius: 4px; }
-    .bubble p { margin-bottom: 6px; }
-    .bubble p:last-child { margin-bottom: 0; }
-
-    /* File preview in bubble */
-    .file-preview-bubble { display: flex; align-items: center; gap: 8px; background: var(--surface3); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; font-size: 0.82rem; color: var(--text2); }
-    .file-preview-bubble .file-icon { font-size: 1.2rem; }
-
-    /* Typing indicator */
-    .typing-indicator { display: flex; gap: 4px; padding: 4px 0; align-items: center; }
-    .typing-indicator span {
-      width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
-      animation: bounce 1.2s infinite ease-in-out;
-    }
-    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
-    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-    @keyframes bounce { 0%,80%,100%{transform:scale(0.7);opacity:.5} 40%{transform:scale(1);opacity:1} }
-
-    /* ── INPUT AREA ── */
-    .input-area {
-      padding: 14px 20px 18px;
-      background: var(--surface);
-      border-top: 1px solid var(--border);
-      flex-shrink: 0;
-    }
-    .file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
-    .file-chip {
-      display: flex; align-items: center; gap: 6px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 99px;
-      padding: 4px 10px 4px 8px;
-      font-size: 0.8rem;
-      color: var(--text2);
-    }
-    .file-chip button { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 0.85rem; padding: 0; line-height: 1; }
-    .file-chip button:hover { color: var(--danger); }
-
-    .input-box {
-      display: flex;
-      align-items: flex-end;
-      gap: 10px;
-      background: var(--surface2);
-      border: 1.5px solid var(--border);
-      border-radius: var(--radius);
-      padding: 10px 12px;
-      transition: border-color var(--transition);
-    }
-    .input-box:focus-within { border-color: var(--accent); }
-    .input-box textarea {
-      flex: 1;
-      background: none;
-      border: none;
-      outline: none;
-      color: var(--text);
-      font-family: 'Cairo', sans-serif;
-      font-size: 0.93rem;
-      resize: none;
-      max-height: 160px;
-      line-height: 1.6;
-      direction: rtl;
-    }
-    .input-box textarea::placeholder { color: var(--text3); }
-    .input-actions { display: flex; align-items: center; gap: 6px; }
-    .btn-attach {
-      background: none; border: none; color: var(--text3); cursor: pointer; font-size: 1.15rem;
-      padding: 4px; border-radius: 6px; transition: color var(--transition);
-      display: flex; align-items: center;
-    }
-    .btn-attach:hover { color: var(--accent); }
-    .btn-send {
-      width: 36px; height: 36px;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
-      border: none; border-radius: 10px; cursor: pointer; color: #fff;
-      display: flex; align-items: center; justify-content: center; font-size: 1rem;
-      transition: opacity var(--transition), transform var(--transition);
-    }
-    .btn-send:hover { opacity: 0.85; transform: scale(1.05); }
-    .btn-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-    #file-input { display: none; }
-
-    /* ── SETTINGS MODAL ── */
-    .modal-overlay {
-      position: fixed; inset: 0; z-index: 999;
-      background: rgba(0,0,0,0.55);
-      display: flex; align-items: center; justify-content: center;
-      backdrop-filter: blur(4px);
-      opacity: 0; pointer-events: none;
-      transition: opacity var(--transition);
-    }
-    .modal-overlay.open { opacity: 1; pointer-events: all; }
-    .modal {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 20px;
-      padding: 28px;
-      width: min(420px, 92vw);
-      box-shadow: 0 24px 60px rgba(0,0,0,0.4);
-      transform: translateY(16px);
-      transition: transform var(--transition);
-    }
-    .modal-overlay.open .modal { transform: translateY(0); }
-    .modal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
-    .modal-title { font-size: 1.1rem; font-weight: 700; flex: 1; }
-    .modal-close { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 1.2rem; }
-    .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
-    .setting-row:last-child { border-bottom: none; }
-    .setting-label { font-size: 0.9rem; color: var(--text2); }
-    /* Toggle switch */
-    .toggle { position: relative; width: 42px; height: 24px; }
-    .toggle input { opacity: 0; width: 0; height: 0; }
-    .toggle-slider {
-      position: absolute; inset: 0; background: var(--surface3); border-radius: 99px; cursor: pointer;
-      transition: background var(--transition);
-    }
-    .toggle-slider::before {
-      content: ''; position: absolute;
-      width: 18px; height: 18px; border-radius: 50%;
-      background: #fff; top: 3px; left: 3px;
-      transition: transform var(--transition);
-    }
-    .toggle input:checked + .toggle-slider { background: var(--accent); }
-    .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
-    .setting-api-input {
-      width: 100%;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 8px 12px;
-      color: var(--text);
-      font-size: 0.85rem;
-      font-family: 'JetBrains Mono', monospace;
-      outline: none;
-      margin-top: 8px;
-      direction: ltr;
-    }
-    .setting-api-input:focus { border-color: var(--accent); }
-    .btn-save {
-      width: 100%;
-      margin-top: 16px;
-      padding: 11px;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
-      color: #fff;
-      border: none;
-      border-radius: 10px;
-      cursor: pointer;
-      font-family: 'Cairo', sans-serif;
-      font-size: 0.95rem;
-      font-weight: 600;
-      transition: opacity var(--transition);
-    }
-    .btn-save:hover { opacity: 0.85; }
-
-    /* Responsive */
-    @media (max-width: 640px) {
-      .sidebar { position: fixed; right: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(0); }
-      .sidebar.collapsed { transform: translateX(100%); width: var(--sidebar-w); min-width: var(--sidebar-w); border: none; }
-      .msg-row { padding: 6px 12px; }
+      --bg: #f0f2f8; --surface: #fff; --surface2: #f5f6fa; --surface3: #ebedf5;
+      --border: #d8dce8; --border2: #c5cad8;
+      --text: #1a1d2e; --text2: #4a5070; --text3: #8a90a8;
+      --user-bubble: #dde6ff; --bot-bubble: #fff; --accent-soft: rgba(79,142,247,0.1);
+    }
+    *,*::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)}
+    ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}
+    ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
+
+    .app{display:flex;height:100vh;overflow:hidden}
+
+    /* SIDEBAR */
+    .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
+      border-left:1px solid var(--border);display:flex;flex-direction:column;
+      transition:width var(--tr),min-width var(--tr);overflow:hidden}
+    .sidebar.collapsed{width:0;min-width:0;border:none}
+    .sidebar-header{padding:18px 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
+    .s-logo{display:flex;align-items:center;gap:10px;flex:1}
+    .s-logo img{width:32px;height:32px;border-radius:8px;object-fit:cover}
+    .s-logo-name{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+    .btn-new{margin:12px 12px 4px;padding:10px 14px;background:linear-gradient(135deg,var(--accent),var(--accent2));
+      color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:'Cairo',sans-serif;
+      font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;
+      transition:opacity var(--tr),transform var(--tr)}
+    .btn-new:hover{opacity:.88;transform:translateY(-1px)}
+    .s-label{padding:10px 16px 4px;font-size:.72rem;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
+    .chats-list{flex:1;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;gap:2px}
+    .chat-item{padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:.87rem;color:var(--text2);
+      display:flex;align-items:center;gap:8px;transition:background var(--tr),color var(--tr);
+      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .chat-item:hover{background:var(--surface2);color:var(--text)}
+    .chat-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
+    .chat-item .ct{flex:1;overflow:hidden;text-overflow:ellipsis}
+    .del-btn{opacity:0;background:none;border:none;color:var(--danger);cursor:pointer;font-size:.85rem;
+      padding:2px 5px;border-radius:5px;transition:opacity var(--tr)}
+    .chat-item:hover .del-btn{opacity:1}
+    .s-footer{padding:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
+    .btn-icon{width:36px;height:36px;background:var(--surface2);border:1px solid var(--border);
+      border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;display:flex;
+      align-items:center;justify-content:center;font-size:1rem;transition:background var(--tr),color var(--tr)}
+    .btn-icon:hover{background:var(--surface3);color:var(--text)}
+
+    /* MAIN */
+    .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
+    .topbar{height:58px;padding:0 18px;display:flex;align-items:center;gap:12px;
+      border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
+    .topbar-title{flex:1;font-size:.95rem;font-weight:600;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+    /* CHAT */
+    .chat-area{flex:1;overflow-y:auto;padding:28px 0;display:flex;flex-direction:column}
+    .welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
+      gap:16px;padding:40px 24px;text-align:center}
+    .w-logo{width:72px;height:72px;border-radius:18px;object-fit:cover;box-shadow:0 8px 32px rgba(79,142,247,.25)}
+    .w-title{font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));
+      -webkit-background-clip:text;-webkit-text-fill-color:transparent}
+    .w-sub{color:var(--text3);font-size:.95rem}
+    .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;max-width:520px}
+    .chip{padding:8px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;
+      font-size:.83rem;color:var(--text2);cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr)}
+    .chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
+
+    /* MESSAGES */
+    .msg-row{display:flex;padding:5px 28px;gap:12px;animation:fadeUp .28s ease}
+    @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+    .msg-row.user{flex-direction:row-reverse}
+    .msg-av{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;
+      justify-content:center;font-size:1rem;font-weight:700;margin-top:2px;overflow:hidden}
+    .msg-row.bot .msg-av{background:linear-gradient(135deg,var(--accent),var(--accent2))}
+    .msg-row.bot .msg-av img{width:100%;height:100%;object-fit:cover}
+    .msg-row.user .msg-av{background:var(--surface3);color:var(--text2)}
+    .bubble{max-width:min(640px,78vw);padding:12px 16px;border-radius:var(--radius);
+      font-size:.93rem;line-height:1.72;word-break:break-word}
+    .msg-row.bot .bubble{background:var(--bot-bubble);border:1px solid var(--border);border-top-right-radius:4px}
+    .msg-row.user .bubble{background:var(--user-bubble);border:1px solid var(--border2);border-top-left-radius:4px}
+    .bubble pre{background:var(--surface3);border-radius:8px;padding:12px;overflow-x:auto;
+      font-family:'JetBrains Mono',monospace;font-size:.82rem;margin:8px 0;border:1px solid var(--border)}
+    .bubble code{font-family:'JetBrains Mono',monospace;font-size:.83rem;background:var(--surface3);padding:2px 5px;border-radius:4px}
+    .bubble p{margin-bottom:6px}.bubble p:last-child{margin-bottom:0}
+    .bubble ul,.bubble ol{padding-right:20px;margin:6px 0}.bubble li{margin-bottom:4px}
+    .file-prev{display:flex;align-items:center;gap:8px;background:var(--surface3);border-radius:8px;
+      padding:8px 12px;margin-bottom:6px;font-size:.82rem;color:var(--text2)}
+
+    /* memory badge */
+    .mem-badge{font-size:.71rem;color:var(--text3);padding:0 28px 2px;display:flex;align-items:center;gap:4px}
+
+    /* typing */
+    .typing{display:flex;gap:4px;padding:4px 0;align-items:center}
+    .typing span{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:bounce 1.2s infinite ease-in-out}
+    .typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
+    @keyframes bounce{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}
+
+    /* INPUT */
+    .input-area{padding:14px 20px 18px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}
+    .file-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
+    .file-chip{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);
+      border-radius:99px;padding:4px 10px 4px 8px;font-size:.8rem;color:var(--text2)}
+    .file-chip button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.85rem;padding:0;line-height:1}
+    .file-chip button:hover{color:var(--danger)}
+    .input-box{display:flex;align-items:flex-end;gap:10px;background:var(--surface2);
+      border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;
+      transition:border-color var(--tr)}
+    .input-box:focus-within{border-color:var(--accent)}
+    .input-box textarea{flex:1;background:none;border:none;outline:none;color:var(--text);
+      font-family:'Cairo',sans-serif;font-size:.93rem;resize:none;max-height:160px;line-height:1.6;direction:rtl}
+    .input-box textarea::placeholder{color:var(--text3)}
+    .in-actions{display:flex;align-items:center;gap:6px}
+    .btn-attach{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.15rem;
+      padding:4px;border-radius:6px;transition:color var(--tr);display:flex;align-items:center}
+    .btn-attach:hover{color:var(--accent)}
+    .btn-send{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent2));
+      border:none;border-radius:10px;cursor:pointer;color:#fff;display:flex;align-items:center;
+      justify-content:center;font-size:1rem;transition:opacity var(--tr),transform var(--tr)}
+    .btn-send:hover{opacity:.85;transform:scale(1.05)}
+    .btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
+    #file-input{display:none}
+
+    /* MODAL */
+    .overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.55);display:flex;
+      align-items:center;justify-content:center;backdrop-filter:blur(4px);
+      opacity:0;pointer-events:none;transition:opacity var(--tr)}
+    .overlay.open{opacity:1;pointer-events:all}
+    .modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;
+      width:min(440px,92vw);box-shadow:0 24px 60px rgba(0,0,0,.4);
+      transform:translateY(16px);transition:transform var(--tr)}
+    .overlay.open .modal{transform:translateY(0)}
+    .m-header{display:flex;align-items:center;gap:10px;margin-bottom:22px}
+    .m-title{font-size:1.1rem;font-weight:700;flex:1}
+    .m-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.2rem}
+    .s-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
+    .s-row:last-of-type{border-bottom:none}
+    .s-lbl{font-size:.9rem;color:var(--text2)}
+    .s-desc{font-size:.78rem;color:var(--text3);margin-top:2px}
+    .toggle{position:relative;width:42px;height:24px}
+    .toggle input{opacity:0;width:0;height:0}
+    .tslider{position:absolute;inset:0;background:var(--surface3);border-radius:99px;cursor:pointer;transition:background var(--tr)}
+    .tslider::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;
+      background:#fff;top:3px;left:3px;transition:transform var(--tr)}
+    .toggle input:checked+.tslider{background:var(--accent)}
+    .toggle input:checked+.tslider::before{transform:translateX(18px)}
+    .s-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;
+      padding:8px 12px;color:var(--text);font-size:.85rem;font-family:'JetBrains Mono',monospace;
+      outline:none;margin-top:8px;direction:ltr}
+    .s-input:focus{border-color:var(--accent)}
+    .s-col{display:flex;flex-direction:column;width:100%}
+    .btn-save{width:100%;margin-top:16px;padding:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));
+      color:#fff;border:none;border-radius:10px;cursor:pointer;font-family:'Cairo',sans-serif;
+      font-size:.95rem;font-weight:600;transition:opacity var(--tr)}
+    .btn-save:hover{opacity:.85}
+    .btn-danger{padding:6px 14px;background:rgba(247,95,95,.12);border:1px solid var(--danger);
+      color:var(--danger);border-radius:8px;cursor:pointer;font-size:.83rem;font-family:'Cairo',sans-serif;
+      transition:background var(--tr)}
+    .btn-danger:hover{background:rgba(247,95,95,.22)}
+
+    @media(max-width:640px){
+      .sidebar{position:fixed;right:0;top:0;bottom:0;z-index:100}
+      .sidebar.collapsed{transform:translateX(100%);width:var(--sidebar-w);min-width:var(--sidebar-w)}
+      .msg-row{padding:5px 12px}
     }
   </style>
 </head>
 <body>
-<div class="app" id="app">
+<div class="app">
 
-  <!-- SIDEBAR -->
   <aside class="sidebar" id="sidebar">
     <div class="sidebar-header">
-      <div class="sidebar-logo">
-        <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi" />
-        <span class="sidebar-logo-name">Genisi AI</span>
+      <div class="s-logo">
+        <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>
+        <span class="s-logo-name">Genisi AI</span>
       </div>
     </div>
-
-    <button class="btn-new-chat" onclick="newChat()">
-      <span>✦</span> محادثة جديدة
-    </button>
-
-    <div class="sidebar-section-label">المحادثات</div>
+    <button class="btn-new" onclick="newChat()">✦ محادثة جديدة</button>
+    <div class="s-label">المحادثات</div>
     <div class="chats-list" id="chats-list"></div>
-
-    <div class="sidebar-footer">
-      <button class="btn-icon" title="الإعدادات" onclick="openSettings()">⚙</button>
-      <button class="btn-icon" title="تبديل الثيم" id="theme-toggle-btn" onclick="toggleTheme()">🌙</button>
+    <div class="s-footer">
+      <button class="btn-icon" onclick="openSettings()">⚙</button>
+      <button class="btn-icon" id="theme-btn" onclick="toggleTheme()">🌙</button>
     </div>
   </aside>
 
-  <!-- MAIN -->
   <main class="main">
-    <!-- TOPBAR -->
     <div class="topbar">
-      <button class="btn-icon" onclick="toggleSidebar()" title="القائمة">☰</button>
+      <button class="btn-icon" onclick="toggleSidebar()">☰</button>
       <div class="topbar-title" id="topbar-title">Genisi AI</div>
     </div>
 
-    <!-- CHAT -->
     <div class="chat-area" id="chat-area">
-      <div class="welcome-screen" id="welcome-screen">
-        <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="welcome-logo" alt="Genisi"/>
-        <div class="welcome-title">مرحبًا بك في Genisi</div>
-        <div class="welcome-sub">مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿</div>
-        <div class="welcome-chips">
+      <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">مرحبًا في Genisi</div>
+        <div class="w-sub">مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿</div>
+        <div class="chips">
           <div class="chip" onclick="quickSend('ما هو الذكاء الاصطناعي؟')">ما هو الذكاء الاصطناعي؟</div>
-          <div class="chip" onclick="quickSend('ساعدني في كتابة كود Python')">ساعدني في كتابة كود Python</div>
-          <div class="chip" onclick="quickSend('لخّص لي هذا الموضوع')">لخّص موضوعًا</div>
+          <div class="chip" onclick="quickSend('ساعدني في كتابة كود Python')">ساعدني في كود Python</div>
+          <div class="chip" onclick="quickSend('لخّص لي موضوعًا')">لخّص موضوعًا</div>
           <div class="chip" onclick="quickSend('ما الفرق بين نماذج LLM؟')">الفرق بين نماذج LLM</div>
         </div>
       </div>
     </div>
 
-    <!-- INPUT -->
     <div class="input-area">
       <div class="file-chips" id="file-chips"></div>
       <div class="input-box">
-        <div class="input-actions">
-          <button class="btn-attach" onclick="document.getElementById('file-input').click()" title="رفع ملف">📎</button>
-          <input type="file" id="file-input" multiple accept="*/*" onchange="handleFiles(this.files)" />
+        <div class="in-actions">
+          <button class="btn-attach" onclick="document.getElementById('file-input').click()">📎</button>
+          <input type="file" id="file-input" multiple onchange="handleFiles(this.files)"/>
         </div>
-        <textarea
-          id="msg-input"
-          placeholder="اكتب رسالتك هنا..."
-          rows="1"
-          onkeydown="handleKey(event)"
-          oninput="autoResize(this)"
-        ></textarea>
+        <textarea id="msg-input"
+          placeholder="اكتب رسالتك... (Enter للإرسال، Shift+Enter لسطر جديد)"
+          rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
         <button class="btn-send" id="send-btn" onclick="sendMessage()">➤</button>
       </div>
     </div>
   </main>
 </div>
 
-<!-- SETTINGS MODAL -->
-<div class="modal-overlay" id="settings-modal">
+<!-- SETTINGS -->
+<div class="overlay" id="settings-modal">
   <div class="modal">
-    <div class="modal-header">
+    <div class="m-header">
       <span style="font-size:1.3rem">⚙</span>
-      <div class="modal-title">الإعدادات</div>
-      <button class="modal-close" onclick="closeSettings()">✕</button>
+      <div class="m-title">الإعدادات</div>
+      <button class="m-close" onclick="closeSettings()">✕</button>
     </div>
-
-    <div class="setting-row">
-      <span class="setting-label">الوضع الليلي / النهاري</span>
+    <div class="s-row">
+      <div class="s-lbl">الوضع الليلي</div>
       <label class="toggle">
-        <input type="checkbox" id="dark-toggle" onchange="applyThemeFromToggle()" />
-        <span class="toggle-slider"></span>
+        <input type="checkbox" id="dark-toggle" onchange="applyThemeToggle()"/>
+        <span class="tslider"></span>
       </label>
     </div>
-
-    <div class="setting-row" style="flex-direction:column;align-items:flex-start;gap:4px">
-      <span class="setting-label">عنوان الخادم (Backend URL)</span>
-      <input type="text" class="setting-api-input" id="backend-url" placeholder="http://localhost:8000" />
+    <div class="s-row" style="flex-direction:column;align-items:flex-start">
+      <div class="s-col">
+        <div class="s-lbl">عنوان الخادم (Backend URL)</div>
+        <div class="s-desc">اتركه فارغًا إذا كانت الواجهة والـ API في نفس الـ Space</div>
+        <input type="text" class="s-input" id="backend-url" placeholder="https://username-space-name.hf.space"/>
+      </div>
     </div>
-
-    <div class="setting-row">
-      <span class="setting-label">حذف جميع المحادثات</span>
-      <button class="btn-icon" style="color:var(--danger)" onclick="clearAllChats()">🗑</button>
+    <div class="s-row" style="flex-direction:column;align-items:flex-start;gap:8px">
+      <div>
+        <div class="s-lbl">حذف جميع المحادثات</div>
+        <div class="s-desc">لا يمكن التراجع عن هذا الإجراء</div>
+      </div>
+      <button class="btn-danger" onclick="clearAllChats()">🗑 حذف الكل</button>
     </div>
-
-    <button class="btn-save" onclick="saveSettings()">حفظ الإعدادات</button>
+    <button class="btn-save" onclick="saveSettings()">💾 حفظ</button>
   </div>
 </div>
 
 <script>
-// ════════════════════════════════════════
-//  STATE
-// ════════════════════════════════════════
-let chats = JSON.parse(localStorage.getItem('genisi_chats') || '[]');
-let activeChatId = null;
-let pendingFiles = [];
-let isLoading = false;
-
-const BACKEND_URL_KEY = 'genisi_backend_url';
-const THEME_KEY = 'genisi_theme';
-
-// ── Helpers ──
-function genId() { return Date.now().toString(36) + Math.random().toString(36).slice(2,7); }
-function getBackendUrl() { return localStorage.getItem(BACKEND_URL_KEY) || 'http://localhost:8000'; }
-function saveChats() { localStorage.setItem('genisi_chats', JSON.stringify(chats)); }
-function getActiveChat() { return chats.find(c => c.id === activeChatId); }
-
-// ════════════════════════════════════════
-//  THEME
-// ════════════════════════════════════════
-function initTheme() {
-  const t = localStorage.getItem(THEME_KEY) || 'dark';
-  document.documentElement.setAttribute('data-theme', t);
-  const isDark = t === 'dark';
-  document.getElementById('theme-toggle-btn').textContent = isDark ? '🌙' : '☀️';
-  const toggle = document.getElementById('dark-toggle');
-  if (toggle) toggle.checked = isDark;
-}
-function toggleTheme() {
-  const current = document.documentElement.getAttribute('data-theme');
-  const next = current === 'dark' ? 'light' : 'dark';
-  document.documentElement.setAttribute('data-theme', next);
-  localStorage.setItem(THEME_KEY, next);
-  document.getElementById('theme-toggle-btn').textContent = next === 'dark' ? '🌙' : '☀️';
-  const toggle = document.getElementById('dark-toggle');
-  if (toggle) toggle.checked = next === 'dark';
+// ════════ KEYS ════════
+const KC = 'genisi_chats', KT = 'genisi_theme', KB = 'genisi_backend';
+
+// ════════ STATE ════════
+let chats = JSON.parse(localStorage.getItem(KC) || '[]');
+let activeChatId = null, pendingFiles = [], isLoading = false;
+
+// ════════ UTILS ════════
+const genId     = () => Date.now().toString(36) + Math.random().toString(36).slice(2,6);
+const saveChats = () => localStorage.setItem(KC, JSON.stringify(chats));
+const getChat   = (id) => chats.find(c => c.id === (id ?? activeChatId));
+const getBackend= () => (localStorage.getItem(KB) || '').replace(/\/$/, '');
+
+function esc(t){ return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+function fileIcon(n){
+  if(/\.(png|jpg|jpeg|gif|webp|svg)$/i.test(n)) return '🖼';
+  if(/\.pdf$/i.test(n)) return '📄';
+  if(/\.(py|js|ts|html|css|json)$/i.test(n)) return '💻';
+  if(/\.(txt|md)$/i.test(n)) return '📝';
+  return '📎';
 }
-function applyThemeFromToggle() {
-  const isDark = document.getElementById('dark-toggle').checked;
-  const next = isDark ? 'dark' : 'light';
-  document.documentElement.setAttribute('data-theme', next);
-  localStorage.setItem(THEME_KEY, next);
-  document.getElementById('theme-toggle-btn').textContent = isDark ? '🌙' : '☀️';
+function fmt(raw){
+  let t = raw;
+  t = t.replace(/```(\w*)\n?([\s\S]*?)```/g,(_,l,c)=>`<pre><code>${esc(c.trim())}</code></pre>`);
+  t = t.replace(/`([^`]+)`/g,(_,c)=>`<code>${esc(c)}</code>`);
+  t = t.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');
+  t = t.replace(/\*(.+?)\*/g,'<em>$1</em>');
+  t = t.replace(/^[-•]\s+(.+)$/gm,'<li>$1</li>');
+  t = t.replace(/(<li>[\s\S]*?<\/li>)+/g,m=>`<ul>${m}</ul>`);
+  t = t.split('\n').map(l=>l.startsWith('<')?l:(l.trim()?`<p>${l}</p>`:'')).join('');
+  return t;
 }
 
-// ════════════════════════════════════════
-//  SIDEBAR
-// ════════════════════════════════════════
-function toggleSidebar() {
-  document.getElementById('sidebar').classList.toggle('collapsed');
+// ════════ THEME ════════
+function initTheme(){ applyTheme(localStorage.getItem(KT)||'dark'); }
+function applyTheme(t){
+  document.documentElement.setAttribute('data-theme',t);
+  localStorage.setItem(KT,t);
+  document.getElementById('theme-btn').textContent = t==='dark'?'🌙':'☀️';
+  const tog=document.getElementById('dark-toggle');
+  if(tog) tog.checked = t==='dark';
 }
-function renderChatList() {
-  const list = document.getElementById('chats-list');
-  list.innerHTML = '';
-  const sorted = [...chats].reverse();
-  sorted.forEach(chat => {
-    const div = document.createElement('div');
-    div.className = 'chat-item' + (chat.id === activeChatId ? ' active' : '');
-    div.innerHTML = `
-      <span>💬</span>
-      <span class="chat-title">${escapeHtml(chat.title || 'محادثة')}</span>
-      <button class="del-btn" onclick="deleteChat('${chat.id}',event)" title="حذف">✕</button>
-    `;
-    div.addEventListener('click', () => loadChat(chat.id));
+function toggleTheme(){ applyTheme(document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark'); }
+function applyThemeToggle(){ applyTheme(document.getElementById('dark-toggle').checked?'dark':'light'); }
+
+// ════════ SIDEBAR ════════
+function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('collapsed'); }
+
+function renderChatList(){
+  const list=document.getElementById('chats-list');
+  list.innerHTML='';
+  [...chats].reverse().forEach(chat=>{
+    const div=document.createElement('div');
+    div.className='chat-item'+(chat.id===activeChatId?' active':'');
+    div.innerHTML=`<span>💬</span><span class="ct">${esc(chat.title||'محادثة')}</span>
+      <button class="del-btn" onclick="deleteChat('${chat.id}',event)">✕</button>`;
+    div.addEventListener('click',()=>loadChat(chat.id));
     list.appendChild(div);
   });
 }
 
-// ════════════════════════════════════════
-//  CHAT MANAGEMENT
-// ════════════════════════════════════════
-function newChat() {
-  activeChatId = null;
-  pendingFiles = [];
-  document.getElementById('file-chips').innerHTML = '';
-  document.getElementById('msg-input').value = '';
-  document.getElementById('topbar-title').textContent = 'Genisi AI';
-  const area = document.getElementById('chat-area');
-  area.innerHTML = `
-    <div class="welcome-screen" id="welcome-screen">
-      <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" class="welcome-logo" alt="Genisi"/>
-      <div class="welcome-title">مرحبًا بك في Genisi</div>
-      <div class="welcome-sub">مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿</div>
-      <div class="welcome-chips">
+// ════════ CHAT MANAGEMENT ════════
+function newChat(){
+  activeChatId=null; pendingFiles=[];
+  document.getElementById('file-chips').innerHTML='';
+  document.getElementById('msg-input').value='';
+  document.getElementById('msg-input').style.height='auto';
+  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">مرحبًا في Genisi</div>
+      <div class="w-sub">مساعدك الذكي من AnesNT — ولاية باتنة 🇩🇿</div>
+      <div class="chips">
         <div class="chip" onclick="quickSend('ما هو الذكاء الاصطناعي؟')">ما هو الذكاء الاصطناعي؟</div>
-        <div class="chip" onclick="quickSend('ساعدني في كتابة كود Python')">ساعدني في كتابة كود Python</div>
-        <div class="chip" onclick="quickSend('لخّص لي هذا الموضوع')">لخّص موضوعًا</div>
+        <div class="chip" onclick="quickSend('ساعدني في كتابة كود Python')">ساعدني في كود Python</div>
+        <div class="chip" onclick="quickSend('لخّص لي موضوعًا')">لخّص موضوعًا</div>
         <div class="chip" onclick="quickSend('ما الفرق بين نماذج LLM؟')">الفرق بين نماذج LLM</div>
       </div>
     </div>`;
   renderChatList();
 }
 
-function loadChat(id) {
-  activeChatId = id;
-  const chat = getActiveChat();
-  if (!chat) return;
-  document.getElementById('topbar-title').textContent = chat.title || 'محادثة';
-  const area = document.getElementById('chat-area');
-  area.innerHTML = '';
-  chat.history.forEach(entry => {
-    appendBubble('user', entry.user, entry.files || []);
-    appendBubble('bot', entry.bot);
+function loadChat(id){
+  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,entry.files||[]);
+    appendBubble('bot',entry.bot);
+    appendMemBadge(idx+1, chat.history.length);
   });
-  area.scrollTop = area.scrollHeight;
+  area.scrollTop=area.scrollHeight;
   renderChatList();
 }
 
-function deleteChat(id, e) {
+function deleteChat(id,e){
   e.stopPropagation();
-  chats = chats.filter(c => c.id !== id);
-  saveChats();
-  if (activeChatId === id) newChat();
-  else renderChatList();
+  chats=chats.filter(c=>c.id!==id); saveChats();
+  if(activeChatId===id) newChat(); else renderChatList();
 }
-
-function clearAllChats() {
-  if (!confirm('هل أنت متأكد من حذف جميع المحادثات؟')) return;
-  chats = [];
-  saveChats();
-  newChat();
-  closeSettings();
+function clearAllChats(){
+  if(!confirm('هل أنت متأكد؟ سيتم حذف جميع المحادثات.')) return;
+  chats=[]; saveChats(); newChat(); closeSettings();
 }
 
-// ════════════════════════════════════════
-//  FILES
-// ════════════════════════════════════════
-function handleFiles(files) {
-  Array.from(files).forEach(f => {
-    pendingFiles.push(f);
-  });
+// ════════ FILES ════════
+function handleFiles(files){
+  Array.from(files).forEach(f=>pendingFiles.push(f));
   renderFileChips();
+  document.getElementById('file-input').value='';
 }
-function renderFileChips() {
-  const c = document.getElementById('file-chips');
-  c.innerHTML = '';
-  pendingFiles.forEach((f, i) => {
-    const chip = document.createElement('div');
-    chip.className = 'file-chip';
-    chip.innerHTML = `<span>${fileIcon(f.name)}</span><span>${escapeHtml(f.name)}</span><button onclick="removeFile(${i})">✕</button>`;
+function renderFileChips(){
+  const c=document.getElementById('file-chips'); c.innerHTML='';
+  pendingFiles.forEach((f,i)=>{
+    const chip=document.createElement('div'); chip.className='file-chip';
+    chip.innerHTML=`<span>${fileIcon(f.name)}</span><span>${esc(f.name)}</span><button onclick="removeFile(${i})">✕</button>`;
     c.appendChild(chip);
   });
 }
-function removeFile(i) {
-  pendingFiles.splice(i, 1);
-  renderFileChips();
-}
-function fileIcon(name) {
-  if (/\.(png|jpg|jpeg|gif|webp|svg)$/i.test(name)) return '🖼';
-  if (/\.(pdf)$/i.test(name)) return '📄';
-  if (/\.(py|js|ts|html|css|json)$/i.test(name)) return '💻';
-  if (/\.(txt|md)$/i.test(name)) return '📝';
-  return '📎';
-}
-
-// ════════════════════════════════════════
-//  MESSAGING
-// ════════════════════════════════════════
-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';
-}
-
-async function sendMessage() {
-  if (isLoading) return;
-  const input = document.getElementById('msg-input');
-  const text = input.value.trim();
-  if (!text && pendingFiles.length === 0) return;
-
-  // Hide welcome screen
-  const welcome = document.getElementById('welcome-screen');
-  if (welcome) welcome.remove();
-
-  // Copy files
-  const filesForMsg = [...pendingFiles];
-  pendingFiles = [];
-  document.getElementById('file-chips').innerHTML = '';
-  input.value = '';
-  input.style.height = 'auto';
-
-  // Ensure active chat
-  if (!activeChatId) {
-    const id = genId();
-    const title = text.slice(0, 36) || filesForMsg[0]?.name || 'محادثة';
-    activeChatId = id;
-    chats.push({ id, title, history: [] });
-    document.getElementById('topbar-title').textContent = title;
+function removeFile(i){ pendingFiles.splice(i,1); renderFileChips(); }
+
+// ════════ MESSAGING ════════
+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'; }
+
+async function sendMessage(){
+  if(isLoading) return;
+  const input=document.getElementById('msg-input');
+  const text=input.value.trim();
+  if(!text&&pendingFiles.length===0) return;
+
+  const welcome=document.getElementById('welcome');
+  if(welcome) welcome.remove();
+
+  const filesForMsg=[...pendingFiles];
+  pendingFiles=[];
+  document.getElementById('file-chips').innerHTML='';
+  input.value=''; input.style.height='auto';
+
+  // إنشاء محادثة إن لم تكن موجودة
+  if(!activeChatId){
+    const id=genId();
+    const title=text.slice(0,38)||filesForMsg[0]?.name||'محادثة';
+    activeChatId=id;
+    chats.push({id, title, history:[]});
+    document.getElementById('topbar-title').textContent=title;
   }
 
-  // User bubble
-  appendBubble('user', text, filesForMsg);
+  const chat=getChat();
+  appendBubble('user',text,filesForMsg);
 
-  // Show typing
-  const typingId = 'typing-' + genId();
+  const typingId='t-'+genId();
   appendTyping(typingId);
-
-  isLoading = true;
-  document.getElementById('send-btn').disabled = true;
+  isLoading=true;
+  document.getElementById('send-btn').disabled=true;
 
   try {
-    const chat = getActiveChat();
-    const history = chat ? chat.history : [];
-
-    // Read file contents as base64 or text
-    const filePayloads = await Promise.all(filesForMsg.map(async f => {
-      return { name: f.name, size: f.size, type: f.type };
+    // ═══════════════════════════════════════════════════
+    // نُرسل التاريخ الكامل للمحادثة مع كل طلب
+    // هذا هو سر "الذاكرة" — النموذج يرى كل ما قيل
+    // ═══════════════════════════════════════════════════
+    const historyPayload = chat.history.map(e => ({
+      user: e.user,
+      bot:  e.bot
     }));
 
-    const resp = await fetch(getBackendUrl() + '/chat', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        message: text + (filePayloads.length ? `\n[ملفات مرفقة: ${filePayloads.map(f=>f.name).join(', ')}]` : ''),
-        history
-      })
+    const msgText = text + (filesForMsg.length
+      ? `\n[ملفات مرفقة: ${filesForMsg.map(f=>f.name).join(', ')}]` : '');
+
+    const resp = await fetch(getBackend()+'/chat', {
+      method:  'POST',
+      headers: {'Content-Type':'application/json'},
+      body:    JSON.stringify({ message: msgText, history: historyPayload })
     });
 
-    if (!resp.ok) throw new Error(`خطأ من الخادم: ${resp.status}`);
-    const data = await resp.json();
-    const botText = data.response || '⚠ لا يوجد رد';
+    if(!resp.ok){
+      const err=await resp.text().catch(()=>resp.statusText);
+      throw new Error(`خطأ ${resp.status}: ${err}`);
+    }
 
-    removeTyping(typingId);
-    appendBubble('bot', botText);
+    const data=await resp.json();
+    const botText=data.response||'⚠ لا يوجد رد من الخادم.';
 
-    // Save to history
-    if (chat) {
-      chat.history.push({ user: text, bot: botText, files: filesForMsg.map(f=>f.name) });
-      saveChats();
-    }
-  } catch (err) {
     removeTyping(typingId);
-    appendBubble('bot', `⚠ **خطأ:** ${err.message}\n\n*تأكد من تشغيل الخادم وضبط العنوان في الإعدادات.*`);
-  }
-
-  isLoading = false;
-  document.getElementById('send-btn').disabled = false;
-  renderChatList();
-}
+    appendBubble('bot',botText);
 
-function appendBubble(role, text, files) {
-  const area = document.getElementById('chat-area');
-  const row = document.createElement('div');
-  row.className = `msg-row ${role}`;
-
-  const avatar = document.createElement('div');
-  avatar.className = 'msg-avatar';
-  if (role === 'bot') {
-    avatar.innerHTML = `<img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/>`;
-  } else {
-    avatar.textContent = '👤';
-  }
+    // ═══════════════════════════════════════════════════
+    // حفظ في localStorage = ذاكرة دائمة تبقى حتى بعد
+    // إغلاق المتصفح وإعادة فتح الصفحة
+    // ═══════════════════════════════════════════════════
+    chat.history.push({ user:text, bot:botText, files:filesForMsg.map(f=>f.name) });
+    saveChats();
 
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble';
-
-  // File previews
-  if (files && files.length) {
-    const names = Array.isArray(files) && typeof files[0] === 'string' ? files : files.map(f => f.name || f);
-    names.forEach(name => {
-      const fp = document.createElement('div');
-      fp.className = 'file-preview-bubble';
-      fp.innerHTML = `<span class="file-icon">${fileIcon(name)}</span><span>${escapeHtml(name)}</span>`;
-      bubble.appendChild(fp);
-    });
-  }
+    appendMemBadge(chat.history.length, chat.history.length);
 
-  if (text) {
-    const content = document.createElement('div');
-    content.innerHTML = formatText(text);
-    bubble.appendChild(content);
+  } catch(err){
+    removeTyping(typingId);
+    appendBubble('bot',
+      `⚠ **خطأ في الاتصال بالخادم**\n\n${err.message}\n\n` +
+      `تأكد من أن الـ Space يعمل وأن الـ Dockerfile صحيح.`
+    );
   }
 
-  row.appendChild(avatar);
-  row.appendChild(bubble);
-  area.appendChild(row);
-  area.scrollTop = area.scrollHeight;
+  isLoading=false;
+  document.getElementById('send-btn').disabled=false;
+  renderChatList();
 }
 
-function appendTyping(id) {
-  const area = document.getElementById('chat-area');
-  const row = document.createElement('div');
-  row.className = 'msg-row bot';
-  row.id = id;
-  row.innerHTML = `
-    <div class="msg-avatar"><img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi"/></div>
-    <div class="bubble"><div class="typing-indicator"><span></span><span></span><span></span></div></div>`;
-  area.appendChild(row);
-  area.scrollTop = area.scrollHeight;
-}
-function removeTyping(id) {
-  const el = document.getElementById(id);
-  if (el) el.remove();
+// ════════ DOM HELPERS ════════
+function appendBubble(role,text,files){
+  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.textContent='👤'; }
+  const bub=document.createElement('div'); bub.className='bubble';
+  if(files&&files.length){
+    const names=files.map(f=>typeof f==='string'?f:f.name);
+    names.forEach(n=>{ const fp=document.createElement('div'); fp.className='file-prev';
+      fp.innerHTML=`<span>${fileIcon(n)}</span><span>${esc(n)}</span>`; bub.appendChild(fp); });
+  }
+  if(text){ const d=document.createElement('div'); d.innerHTML=fmt(text); bub.appendChild(d); }
+  row.appendChild(av); row.appendChild(bub);
+  area.appendChild(row); area.scrollTop=area.scrollHeight;
 }
 
-// ════════════════════════════════════════
-//  TEXT FORMATTING
-// ════════════════════════════════════════
-function formatText(text) {
-  // Code blocks
-  text = text.replace(/```([\s\S]*?)```/g, (_, c) => `<pre>${escapeHtml(c.trim())}</pre>`);
-  // Inline code
-  text = text.replace(/`([^`]+)`/g, (_, c) => `<code>${escapeHtml(c)}</code>`);
-  // Bold
-  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-  // Italic
-  text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
-  // Line breaks
-  text = text.split('\n').map(l => l ? `<p>${l}</p>` : '').join('');
-  return text;
+function appendTyping(id){
+  const area=document.getElementById('chat-area');
+  const row=document.createElement('div'); row.className='msg-row bot'; row.id=id;
+  row.innerHTML=`<div class="msg-av"><img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="G"/></div>
+    <div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div>`;
+  area.appendChild(row); area.scrollTop=area.scrollHeight;
 }
-function escapeHtml(t) {
-  return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+function removeTyping(id){ const el=document.getElementById(id); if(el) el.remove(); }
+
+// شارة الذاكرة — تُظهر عدد رسائل التاريخ المُرسَل للنموذج
+function appendMemBadge(count, total){
+  const area=document.getElementById('chat-area');
+  const b=document.createElement('div'); b.className='mem-badge';
+  b.innerHTML=`🧠 الذاكرة: ${count}/${total} ${total===1?'رسالة':'رسائل'}`;
+  area.appendChild(b); area.scrollTop=area.scrollHeight;
 }
 
-// ════════════════════════════════════════
-//  SETTINGS MODAL
-// ════════════════════════════════════════
-function openSettings() {
+// ════════ SETTINGS ════════
+function openSettings(){
   document.getElementById('settings-modal').classList.add('open');
-  document.getElementById('backend-url').value = getBackendUrl();
-  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-  document.getElementById('dark-toggle').checked = isDark;
-}
-function closeSettings() {
-  document.getElementById('settings-modal').classList.remove('open');
+  document.getElementById('backend-url').value=localStorage.getItem(KB)||'';
+  document.getElementById('dark-toggle').checked=document.documentElement.getAttribute('data-theme')==='dark';
 }
-function saveSettings() {
-  const url = document.getElementById('backend-url').value.trim();
-  if (url) localStorage.setItem(BACKEND_URL_KEY, url);
+function closeSettings(){ document.getElementById('settings-modal').classList.remove('open'); }
+function saveSettings(){
+  localStorage.setItem(KB,document.getElementById('backend-url').value.trim());
   closeSettings();
 }
-document.getElementById('settings-modal').addEventListener('click', e => {
-  if (e.target === e.currentTarget) closeSettings();
-});
+document.getElementById('settings-modal').addEventListener('click',e=>{ if(e.target===e.currentTarget) closeSettings(); });
 
-// ════════════════════════════════════════
-//  INIT
-// ════════════════════════════════════════
+// ════════ INIT ════════
 initTheme();
 renderChatList();
 </script>