Update results.html

results.html

@@ -60,250 +60,127 @@
             transition: background 0.35s, color 0.35s;
         }
 
-        /* ─── Background mesh ─── */
         .bg-mesh {
-            position: fixed;
-            inset: 0;
-            z-index: 0;
-            pointer-events: none;
-            overflow: hidden;
+            position: fixed; inset: 0; z-index: 0;
+            pointer-events: none; overflow: hidden;
         }
         .bg-mesh::before {
-            content: '';
-            position: absolute;
-            top: -20%;
-            right: -15%;
-            width: 55vw;
-            height: 55vw;
+            content: ''; position: absolute; top: -20%; right: -15%;
+            width: 55vw; height: 55vw;
             background: radial-gradient(circle, rgba(91,94,244,0.13) 0%, transparent 70%);
-            border-radius: 50%;
-            animation: drift 18s ease-in-out infinite alternate;
+            border-radius: 50%; animation: drift 18s ease-in-out infinite alternate;
         }
         .bg-mesh::after {
-            content: '';
-            position: absolute;
-            bottom: -15%;
-            left: -10%;
-            width: 45vw;
-            height: 45vw;
+            content: ''; position: absolute; bottom: -15%; left: -10%;
+            width: 45vw; height: 45vw;
             background: radial-gradient(circle, rgba(224,66,122,0.1) 0%, transparent 70%);
-            border-radius: 50%;
-            animation: drift 22s ease-in-out infinite alternate-reverse;
+            border-radius: 50%; animation: drift 22s ease-in-out infinite alternate-reverse;
         }
         @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(4%,3%) scale(1.06); } }
 
-        /* ─── Navbar ─── */
         .navbar {
-            position: fixed;
-            top: 14px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 95%;
-            max-width: 1280px;
-            height: auto;
-            min-height: 68px;
+            position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
+            width: 95%; max-width: 1280px; height: auto; min-height: 68px;
             background: var(--bg-nav);
             backdrop-filter: blur(28px) saturate(1.6);
             -webkit-backdrop-filter: blur(28px) saturate(1.6);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-nav);
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 18px;
+            border: 1px solid var(--border); border-radius: var(--radius-nav);
+            display: flex; flex-wrap: wrap; align-items: center;
+            justify-content: space-between; padding: 10px 18px;
             z-index: 1000;
             box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
-            gap: 12px;
-            transition: background 0.35s, border-color 0.35s;
+            gap: 12px; transition: background 0.35s, border-color 0.35s;
         }
 
-        /* ─── Brand ─── */
         .brand {
-            font-family: 'Syne', sans-serif;
-            font-weight: 400;
-            font-size: 21px;
-            text-decoration: none;
-            color: var(--text-main);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            letter-spacing: -0.01em;
-            flex-shrink: 0;
+            font-family: 'Syne', sans-serif; font-weight: 400; font-size: 21px;
+            text-decoration: none; color: var(--text-main);
+            display: flex; align-items: center; gap: 10px;
+            letter-spacing: -0.01em; flex-shrink: 0;
         }
         .brand-icon {
-            width: 36px;
-            height: 36px;
+            width: 36px; height: 36px;
             background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fff;
-            font-size: 15px;
-            flex-shrink: 0;
-            box-shadow: 0 4px 14px var(--accent-glow);
-        }
-        .brand span { transition: color 0.3s; }
-
-        /* ─── Search bar ─── */
-        .search-container {
-            flex: 1;
-            max-width: 580px;
-            width: 100%;
+            border-radius: 10px; display: flex; align-items: center;
+            justify-content: center; color: #fff; font-size: 15px;
+            flex-shrink: 0; box-shadow: 0 4px 14px var(--accent-glow);
         }
+
+        .search-container { flex: 1; max-width: 580px; width: 100%; }
         .search-bar {
-            display: flex;
-            align-items: center;
-            background: var(--bg-input);
-            border: 1.5px solid var(--border);
-            border-radius: var(--radius-pill);
-            padding: 4px 4px 4px 16px;
-            transition: var(--transition);
-            width: 100%;
+            display: flex; align-items: center; background: var(--bg-input);
+            border: 1.5px solid var(--border); border-radius: var(--radius-pill);
+            padding: 4px 4px 4px 16px; transition: var(--transition); width: 100%;
         }
         .search-bar:focus-within {
-            border-color: var(--accent);
-            background: var(--bg-input-focus);
+            border-color: var(--accent); background: var(--bg-input-focus);
             box-shadow: 0 0 0 4px var(--accent-glow);
         }
         .search-bar input {
-            flex: 1;
-            background: transparent;
-            border: none;
-            padding: 9px 0;
-            color: var(--text-main);
-            font-family: 'Tajawal', sans-serif;
-            font-size: 14.5px;
-            min-width: 0;
+            flex: 1; background: transparent; border: none; padding: 9px 0;
+            color: var(--text-main); font-family: 'Tajawal', sans-serif;
+            font-size: 14.5px; min-width: 0;
         }
         .search-bar input::placeholder { color: var(--text-faint); }
         .search-btn {
-            background: none;
-            border: none;
-            color: var(--accent);
-            cursor: pointer;
-            width: 40px;
-            height: 36px;
-            border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 15px;
-            flex-shrink: 0;
-            transition: var(--transition);
+            background: none; border: none; color: var(--accent); cursor: pointer;
+            width: 40px; height: 36px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 15px; flex-shrink: 0; transition: var(--transition);
         }
         .search-btn:hover { color: var(--accent-2); transform: scale(1.12); }
 
-        /* ─── Theme toggle ─── */
         #theme-toggle {
-            background: var(--bg-input);
-            border: 1.5px solid var(--border);
-            color: var(--text-sub);
-            cursor: pointer;
-            width: 38px;
-            height: 38px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 15px;
-            transition: var(--transition);
-            flex-shrink: 0;
+            background: var(--bg-input); border: 1.5px solid var(--border);
+            color: var(--text-sub); cursor: pointer; width: 38px; height: 38px;
+            border-radius: 50%; display: flex; align-items: center;
+            justify-content: center; font-size: 15px;
+            transition: var(--transition); flex-shrink: 0;
         }
         #theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-input-focus); }
 
-        /* ─── Tabs ─── */
         .tabs-bar {
-            position: fixed;
-            top: 98px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 95%;
-            max-width: 1280px;
-            display: flex;
-            gap: 6px;
-            z-index: 999;
-            overflow-x: auto;
-            padding-bottom: 4px;
-            scrollbar-width: none;
+            position: fixed; top: 98px; left: 50%; transform: translateX(-50%);
+            width: 95%; max-width: 1280px; display: flex; gap: 6px; z-index: 999;
+            overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
         }
         .tabs-bar::-webkit-scrollbar { display: none; }
-
         .tab-pill {
-            padding: 7px 16px;
-            border-radius: var(--radius-pill);
-            background: var(--bg-card);
-            border: 1.5px solid var(--border);
-            color: var(--text-sub);
-            font-family: 'Tajawal', sans-serif;
-            font-size: 13px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: var(--transition);
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            white-space: nowrap;
-            box-shadow: var(--shadow-card);
+            padding: 7px 16px; border-radius: var(--radius-pill);
+            background: var(--bg-card); border: 1.5px solid var(--border);
+            color: var(--text-sub); font-family: 'Tajawal', sans-serif;
+            font-size: 13px; font-weight: 500; cursor: pointer;
+            transition: var(--transition); display: flex; align-items: center;
+            gap: 6px; white-space: nowrap; box-shadow: var(--shadow-card);
         }
         .tab-pill:hover { border-color: var(--border-hover); color: var(--accent); }
-        .tab-pill.active {
-            background: var(--accent);
-            color: #fff;
-            border-color: var(--accent);
-            box-shadow: 0 4px 16px var(--accent-glow);
-        }
+        .tab-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 16px var(--accent-glow); }
         .tab-pill i { font-size: 11px; }
 
-        /* ─── Page layout ─── */
         .page-wrapper {
-            position: relative;
-            z-index: 1;
-            max-width: 1280px;
-            margin: 170px auto 60px;
-            padding: 0 16px;
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
+            position: relative; z-index: 1; max-width: 1280px;
+            margin: 170px auto 60px; padding: 0 16px;
+            display: flex; flex-direction: column; gap: 24px;
         }
         .results-area { min-width: 0; width: 100%; }
 
-        /* ─── Loading state ─── */
         #loading-text {
-            color: var(--text-sub);
-            font-size: 13.5px;
-            margin-bottom: 18px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+            color: var(--text-sub); font-size: 13.5px; margin-bottom: 18px;
+            display: flex; align-items: center; gap: 8px;
         }
         #loading-text::before {
-            content: '';
-            display: inline-block;
-            width: 14px;
-            height: 14px;
-            border: 2px solid var(--border);
-            border-top-color: var(--accent);
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-            flex-shrink: 0;
+            content: ''; display: inline-block; width: 14px; height: 14px;
+            border: 2px solid var(--border); border-top-color: var(--accent);
+            border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
         }
         #loading-text.done::before { display: none; }
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* ─── Result cards ─── */
         .tavily-result {
-            background: var(--bg-card);
-            border: 1.5px solid var(--border);
-            border-radius: var(--radius-card);
-            padding: 18px 20px;
-            margin-bottom: 12px;
-            transition: var(--transition);
-            box-shadow: var(--shadow-card);
-            display: flex;
-            gap: 14px;
-            align-items: flex-start;
+            background: var(--bg-card); border: 1.5px solid var(--border);
+            border-radius: var(--radius-card); padding: 18px 20px; margin-bottom: 12px;
+            transition: var(--transition); box-shadow: var(--shadow-card);
+            display: flex; gap: 14px; align-items: flex-start;
             animation: fadeSlideIn 0.35s ease both;
         }
         .tavily-result:nth-child(1) { animation-delay: 0.04s; }
@@ -311,68 +188,22 @@
         .tavily-result:nth-child(3) { animation-delay: 0.12s; }
         .tavily-result:nth-child(4) { animation-delay: 0.16s; }
         .tavily-result:nth-child(n+5) { animation-delay: 0.20s; }
-
         @keyframes fadeSlideIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        .tavily-result:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
 
-        .tavily-result:hover {
-            border-color: var(--border-hover);
-            box-shadow: var(--shadow-hover);
-            transform: translateY(-2px);
-        }
-
-        .tavily-favicon {
-            width: 22px;
-            height: 22px;
-            border-radius: 5px;
-            margin-top: 3px;
-            flex-shrink: 0;
-            object-fit: contain;
-        }
-        .favicon-placeholder {
-            width: 22px;
-            height: 22px;
-            border-radius: 5px;
-            background: var(--bg-input);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-faint);
-            font-size: 10px;
-            flex-shrink: 0;
-            margin-top: 3px;
-        }
+        .tavily-favicon { width: 22px; height: 22px; border-radius: 5px; margin-top: 3px; flex-shrink: 0; object-fit: contain; }
+        .favicon-placeholder { width: 22px; height: 22px; border-radius: 5px; background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 10px; flex-shrink: 0; margin-top: 3px; }
         .tavily-content { flex: 1; min-width: 0; }
-        .tavily-domain {
-            font-size: 11.5px;
-            color: var(--text-faint);
-            margin-bottom: 4px;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
+        .tavily-domain { font-size: 11.5px; color: var(--text-faint); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
         .tavily-domain i { font-size: 9px; }
-        .tavily-title {
-            font-family: 'Tajawal', sans-serif;
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--accent) !important;
-            text-decoration: none;
-            display: inline-block;
-            margin-bottom: 6px;
-            line-height: 1.4;
-            transition: color 0.2s;
-        }
+        .tavily-title { font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 700; color: var(--accent) !important; text-decoration: none; display: inline-block; margin-bottom: 6px; line-height: 1.4; transition: color 0.2s; }
         .tavily-title:hover { color: var(--accent-2) !important; }
-        .tavily-snippet {
-            font-size: 13.5px;
-            color: var(--text-sub);
-            line-height: 1.65;
-        }
+        .tavily-snippet { font-size: 13.5px; color: var(--text-sub); line-height: 1.65; }
 
-        /* ─── Google CSE overrides ─── */
+        /* Google CSE overrides */
         .gsc-adBlock, .gcsc-branding, .gsc-branding, .gsc-branding-text,
         .gsc-branding-img, .gsc-branding-img-noclear, .gs-watermark, .gsc-results-branding,
         .gcsc-find-more-on-google, .gcsc-find-more-on-google-root, .gsc-result-info,
@@ -381,73 +212,40 @@
             display: none !important; visibility: hidden !important; height: 0 !important;
             width: 0 !important; margin: 0 !important; padding: 0 !important;
         }
-
         .gsc-above-wrapper-area { border: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; }
         .gsc-control-cse, .gsc-control-wrapper-cse { background: transparent !important; border: none !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
-
         .gsc-thumbnail-inside { display: block !important; padding: 0 !important; visibility: visible !important; height: auto !important; width: auto !important; margin-bottom: 5px; }
-
-        /* إخفاء العناوين المكررة داخل حاوية الصورة المصغرة */
-        .gsc-thumbnail-inside .gs-title,
-        .gsc-thumbnail-inside .gs-snippet,
-        .gsc-thumbnail-inside .gs-visibleUrl {
-            display: none !important;
-            visibility: hidden !important;
-        }
-
-        .gs-title, .gs-title *, a.gs-title { 
-            color: var(--accent) !important; 
-            text-decoration: none !important; 
-            font-size: 16px !important; 
-            font-weight: 700 !important; 
-            font-family: 'Tajawal', sans-serif !important; 
-            display: inline-block !important;
-            visibility: visible !important;
-        }
+        .gsc-thumbnail-inside .gs-title, .gsc-thumbnail-inside .gs-snippet, .gsc-thumbnail-inside .gs-visibleUrl { display: none !important; visibility: hidden !important; }
+        .gs-title, .gs-title *, a.gs-title { color: var(--accent) !important; text-decoration: none !important; font-size: 16px !important; font-weight: 700 !important; font-family: 'Tajawal', sans-serif !important; display: inline-block !important; visibility: visible !important; }
         .gs-title:hover, .gs-title *:hover, a.gs-title:hover { color: var(--accent-2) !important; }
-
         .gs-snippet { color: var(--text-sub) !important; line-height: 1.65 !important; font-size: 13.5px !important; font-family: 'Tajawal', sans-serif !important; display: block !important; }
-        
         .gsc-result { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius-card) !important; padding: 18px 20px !important; margin-bottom: 12px !important; box-shadow: var(--shadow-card) !important; flex-direction: column !important; }
         .gsc-result:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-hover) !important; }
 
-        /* ─── Sidebar ─── */
+        /* Sidebar */
         .sidebar { width: 100%; order: 2; margin-top: 12px; }
 
-        /* ─── AI Answer widget ─── */
+        /* AI Widget */
         .ai-widget-wrap { position: relative; border-radius: var(--radius-card); }
         .ai-glow-ring {
-            position: absolute;
-            inset: -2px;
+            position: absolute; inset: -2px;
             border-radius: calc(var(--radius-card) + 2px);
             background: conic-gradient(
                 from var(--angle, 0deg),
-                var(--accent),
-                var(--accent-2),
-                #a78bfa,
-                var(--accent),
-                var(--accent-2),
-                var(--accent)
+                var(--accent), var(--accent-2), #a78bfa, var(--accent), var(--accent-2), var(--accent)
             );
-            z-index: 0;
-            animation: spin-glow 4s linear infinite;
-            filter: blur(1px);
+            z-index: 0; animation: spin-glow 4s linear infinite; filter: blur(1px);
         }
         @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
         @keyframes spin-glow { to { --angle: 360deg; } }
         @supports not (background: conic-gradient(from 0deg, red, blue)) {
             .ai-glow-ring { background: linear-gradient(135deg, var(--accent), var(--accent-2)); animation: none; }
         }
-
         .ai-widget {
-            position: relative;
-            z-index: 1;
-            background: var(--bg-card);
-            border-radius: var(--radius-card);
-            padding: 18px 18px 16px;
+            position: relative; z-index: 1; background: var(--bg-card);
+            border-radius: var(--radius-card); padding: 18px 18px 16px;
             box-shadow: var(--shadow-card);
         }
-
         .ai-widget-header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
         .ai-widget-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; }
         .ai-widget-title { font-family: 'Syne', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text-main); }
@@ -463,24 +261,27 @@
         .ai-widget-footer { font-size: 10.5px; color: var(--text-faint); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 5px; }
         .ai-widget-footer i { color: var(--accent); font-size: 10px; }
 
-        .sidebar-toggle {
-            display: none; width: 100%; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-card); padding: 14px 18px; text-align: right; font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-main); cursor: pointer; margin-bottom: 12px; transition: var(--transition); align-items: center; justify-content: space-between; box-shadow: var(--shadow-card);
+        /* AI sources list */
+        .ai-sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
+        .ai-source-chip {
+            font-size: 11px; padding: 3px 10px; border-radius: 20px;
+            background: var(--bg-input); border: 1px solid var(--border);
+            color: var(--text-faint); text-decoration: none;
+            display: flex; align-items: center; gap: 5px;
+            transition: var(--transition);
         }
-        .sidebar-toggle:hover { border-color: var(--border-hover); }
-        .sidebar-content { display: block; }
+        .ai-source-chip:hover { border-color: var(--accent); color: var(--accent); }
+        .ai-source-chip i { font-size: 9px; }
 
-        /* ─── Mobile AI block (inside main, shown only on mobile) ─── */
+        .sidebar-toggle { display: none; }
+        .sidebar-content { display: block; }
         .ai-mobile-wrap { display: none; position: relative; border-radius: var(--radius-card); margin-bottom: 16px; }
 
-        /* ─── No results ─── */
         .empty-state { text-align: center; padding: 60px 20px; color: var(--text-sub); }
         .empty-state i { font-size: 40px; margin-bottom: 16px; color: var(--text-faint); display: block; }
         .empty-state p { font-size: 15px; }
-
-        /* ─── Consistent results container ─── */
         #results-container { width: 100%; min-height: 200px; position: relative; }
 
-        /* ─── Responsive ─── */
         @media (max-width: 767px) {
             .navbar { top: 10px; border-radius: 16px; padding: 10px 14px; gap: 10px; }
             .brand { font-size: 18px; }
@@ -531,7 +332,7 @@
         <main class="results-area" role="main">
             <div id="loading-text">جاري جلب النتائج…</div>
 
-            <!-- بطاقة الذكاء الاصطناعي للموبايل فقط -->
+            <!-- AI card mobile only -->
             <div class="ai-mobile-wrap" id="ai-mobile-wrap">
                 <div class="ai-glow-ring"></div>
                 <div class="ai-widget">
@@ -545,9 +346,10 @@
                         <div class="ai-skeleton"></div>
                         <div class="ai-skeleton"></div>
                     </div>
+                    <div class="ai-sources" id="ai-sources-mobile"></div>
                     <div class="ai-widget-footer">
                         <i class="fa-solid fa-bolt"></i>
-                        مدعوم بواسطة AnesNT Core
+                        مدعوم بواسطة AnesNT
                     </div>
                 </div>
             </div>
@@ -556,10 +358,6 @@
         </main>
 
         <aside class="sidebar" aria-label="إجابة الذكاء الاصطناعي">
-            <button class="sidebar-toggle" id="sidebarToggle" aria-expanded="false">
-                <span><i class="fa-solid fa-robot" style="margin-left:8px; color:var(--accent);"></i> إجابة الذكاء الاصطناعي</span>
-                <i class="fa-solid fa-chevron-down" style="font-size:12px; color:var(--text-sub);"></i>
-            </button>
             <div class="sidebar-content" id="sidebarContent">
                 <div class="ai-widget-wrap">
                     <div class="ai-glow-ring"></div>
@@ -574,9 +372,10 @@
                             <div class="ai-skeleton"></div>
                             <div class="ai-skeleton"></div>
                         </div>
+                        <div class="ai-sources" id="ai-sources-desktop"></div>
                         <div class="ai-widget-footer">
                             <i class="fa-solid fa-bolt"></i>
-                            مدعوم بواسطة AnesNT Core
+                            مدعوم بواسطة AnesNT
                         </div>
                     </div>
                 </div>
@@ -589,7 +388,7 @@
         // ════════════════════════════════════
         //  Config
         // ════════════════════════════════════
-        const TAVILY_API_KEYS =[
+        const TAVILY_API_KEYS = [
             "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",
             "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",
             "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"
@@ -623,23 +422,12 @@
         let query = params.get('q') || '';
         let currentTab = params.get('tab') || 'all';
 
-        const inputEl  = document.getElementById('main-input');
+        const inputEl   = document.getElementById('main-input');
         const resultsEl = document.getElementById('results-container');
         const loadingEl = document.getElementById('loading-text');
 
-        // Sidebar toggle (mobile)
-        const sidebarToggle  = document.getElementById('sidebarToggle');
-        const sidebarContent = document.getElementById('sidebarContent');
-        sidebarToggle?.addEventListener('click', () => {
-            const open = sidebarContent.classList.toggle('active');
-            sidebarToggle.setAttribute('aria-expanded', open);
-            const chevron = sidebarToggle.querySelector('.fa-chevron-down, .fa-chevron-up');
-            chevron?.classList.toggle('fa-chevron-down', !open);
-            chevron?.classList.toggle('fa-chevron-up',   open);
-        });
-
         // ════════════════════════════════════
-        //  Tab management
+        //  Tabs
         // ════════════════════════════════════
         function setActiveTab(tab) {
             document.querySelectorAll('.tab-pill').forEach(btn => {
@@ -651,12 +439,14 @@
         setActiveTab(currentTab);
 
         // ════════════════════════════════════
-        //  AI Answer (sidebar + mobile)
+        //  AI Answer — Tavily include_answer
         // ════════════════════════════════════
-        const aiBody        = document.getElementById('ai-answer-body');
-        const aiBodyMobile  = document.getElementById('ai-answer-body-mobile');
+        const aiBody         = document.getElementById('ai-answer-body');
+        const aiBodyMobile   = document.getElementById('ai-answer-body-mobile');
+        const aiSrcDesktop   = document.getElementById('ai-sources-desktop');
+        const aiSrcMobile    = document.getElementById('ai-sources-mobile');
 
-        function setAIState(state, text = '') {
+        function setAIState(state, text = '', sources = []) {
             [aiBody, aiBodyMobile].forEach(el => {
                 if (!el) return;
                 if (state === 'loading') {
@@ -664,31 +454,53 @@
                     el.innerHTML = '<div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>';
                 } else {
                     el.className = 'ai-answer-body';
-                    el.textContent = text;
+                    el.textContent = text || 'لا توجد إجابة متاحة لهذا البحث.';
                 }
             });
+
+            // Render source chips
+            const chipsHTML = sources.slice(0, 5).map(s => {
+                let domain = '';
+                try { domain = new URL(s.url).hostname.replace('www.', ''); } catch { domain = s.url; }
+                return `<a class="ai-source-chip" href="${s.url}" target="_blank" rel="noopener">
+                    <i class="fa-solid fa-link"></i>${domain}
+                </a>`;
+            }).join('');
+
+            [aiSrcDesktop, aiSrcMobile].forEach(el => {
+                if (!el) return;
+                el.innerHTML = chipsHTML;
+            });
         }
 
-        async function fetchAIAnswer(q) {
+        async function fetchAIAnswer(q, idx = 0) {
             if (!q) return;
             setAIState('loading');
             try {
-                const res = await fetch('https://api.anthropic.com/v1/messages', {
+                const res = await fetch('https://api.tavily.com/search', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
-                        model: 'claude-sonnet-4-20250514',
-                        max_tokens: 1000,
-                        messages:[{
-                            role: 'user',
-                            content: `أجب على هذا السؤال أو البحث بشكل موجز ومفيد باللغة العربية في ٣-٤ جمل فقط: "${q}"`
-                        }]
+                        api_key: TAVILY_API_KEYS[idx],
+                        query: q,
+                        include_answer: 'advanced',
+                        search_depth: 'advanced',
+                        max_results: 5
                     })
                 });
+                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                 const data = await res.json();
-                const text = data?.content?.find(b => b.type === 'text')?.text || '';
-                setAIState('done', text || 'تعذّر تحميل الإجابة في الوقت الحالي.');
-            } catch {
+                if (data.error) throw new Error(data.error);
+
+                const answer  = data.answer || '';
+                const sources = data.results || [];
+                setAIState('done', answer, sources);
+
+            } catch (e) {
+                console.warn(`Tavily AI key #${idx + 1} failed:`, e);
+                if (idx + 1 < TAVILY_API_KEYS.length) {
+                    return fetchAIAnswer(q, idx + 1);
+                }
                 setAIState('done', 'تعذّر تحميل الإجابة في الوقت الحالي.');
             }
         }
@@ -705,13 +517,9 @@
         }
 
         function escapeHTML(str) {
-            if(!str) return '';
+            if (!str) return '';
             return str.replace(/[&<>'"]/g, tag => ({
-                '&': '&amp;',
-                '<': '&lt;',
-                '>': '&gt;',
-                "'": '&#39;',
-                '"': '&quot;'
+                '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;'
             }[tag] || tag));
         }
 
@@ -785,7 +593,7 @@
         }
 
         // ════════════════════════════════════
-        //  Tavily
+        //  Tavily Search Results
         // ════════════════════════════════════
         async function fetchTavilyResults(q, idx = 0) {
             if (idx >= TAVILY_API_KEYS.length) {
@@ -811,7 +619,7 @@
                 renderTavilyResults(data.results || []);
                 showLoading(false);
             } catch (e) {
-                console.warn(`Tavily API key #${idx+1} failed:`, e);
+                console.warn(`Tavily API key #${idx + 1} failed:`, e);
                 if (idx + 1 < TAVILY_API_KEYS.length) {
                     return fetchTavilyResults(q, idx + 1);
                 }
@@ -827,16 +635,15 @@
             }
             const html = results.map(r => {
                 const domain = getDomain(r.url);
-                const favicon = r.favicon 
+                const favicon = r.favicon
                     ? `<img class="tavily-favicon" src="${r.favicon}" alt="" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">`
                     : '';
-                const placeholder = r.favicon 
-                    ? `<span class="favicon-placeholder" style="display:none;"><i class="fa-solid fa-globe"></i></span>` 
+                const placeholder = r.favicon
+                    ? `<span class="favicon-placeholder" style="display:none;"><i class="fa-solid fa-globe"></i></span>`
                     : `<span class="favicon-placeholder"><i class="fa-solid fa-globe"></i></span>`;
                 return `
                     <article class="tavily-result">
-                        ${favicon}
-                        ${placeholder}
+                        ${favicon}${placeholder}
                         <div class="tavily-content">
                             <div class="tavily-domain"><i class="fa-solid fa-link"></i> ${escapeHTML(domain)}</div>
                             <a class="tavily-title" href="${r.url}" target="_blank" rel="noopener noreferrer">${escapeHTML(r.title || 'بدون عنوان')}</a>
@@ -850,7 +657,6 @@
         // ════════════════════════════════════
         //  Event Listeners
         // ════════════════════════════════════
-        // Search form submit
         document.getElementById('search-form').addEventListener('submit', (e) => {
             e.preventDefault();
             const q = inputEl.value.trim();
@@ -861,13 +667,10 @@
             window.history.pushState({}, '', url);
             query = q;
             document.title = `${query} – SurfGO`;
-            // Update AI answer
             fetchAIAnswer(q);
-            // Reload results
             loadTabResults(currentTab);
         });
 
-        // Tab clicks
         document.querySelectorAll('.tab-pill').forEach(btn => {
             btn.addEventListener('click', () => {
                 const tab = btn.dataset.tab;