Update results.html

results.html

@@ -68,8 +68,8 @@
     .brand:hover{transform:scale(1.03)}
     .brand-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-2));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:2px solid var(--border);
       border-radius:var(--radius-pill);padding:4px 4px 4px 16px;transition:var(--transition);width:100%;
@@ -87,10 +87,39 @@
     .search-bar input::placeholder{color:var(--text-faint);opacity:0.7}
     .search-bar .clear-btn{
       background:none;border:none;color:var(--text-faint);cursor:pointer;
-      padding:6px 10px;font-size:14px;display:none;transition:color 0.2s;
+      padding:6px 8px;font-size:14px;display:none;transition:color 0.2s;
     }
     .search-bar .clear-btn:hover{color:var(--accent)}
     .search-bar .clear-btn.visible{display:block}
+
+    /* ========== زر البحث الصوتي ========== */
+    .voice-btn{
+      background:none;border:none;color:var(--text-faint);cursor:pointer;
+      padding:6px 10px;font-size:15px;transition:var(--transition);position:relative;
+      display:flex;align-items:center;justify-content:center;
+    }
+    .voice-btn:hover{color:var(--accent)}
+    .voice-btn.listening{color:#e0427a;animation:pulse-mic 1s ease-in-out infinite}
+    @keyframes pulse-mic{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
+
+    /* مؤشر الاستماع */
+    .voice-listening-indicator{
+      display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
+      background:var(--bg-card);border:2px solid var(--accent);border-radius:var(--radius-pill);
+      padding:8px 20px;font-size:13px;color:var(--accent);white-space:nowrap;
+      box-shadow:var(--shadow-hover);z-index:999;
+      align-items:center;gap:8px;
+    }
+    .voice-listening-indicator.show{display:flex}
+    .voice-waves{display:flex;gap:3px;align-items:center;height:16px}
+    .voice-wave{width:3px;background:var(--accent);border-radius:2px;animation:wave-bar 0.8s ease-in-out infinite}
+    .voice-wave:nth-child(1){height:6px;animation-delay:0s}
+    .voice-wave:nth-child(2){height:12px;animation-delay:0.15s}
+    .voice-wave:nth-child(3){height:16px;animation-delay:0.3s}
+    .voice-wave:nth-child(4){height:10px;animation-delay:0.45s}
+    .voice-wave:nth-child(5){height:6px;animation-delay:0.6s}
+    @keyframes wave-bar{0%,100%{transform:scaleY(0.5)}50%{transform:scaleY(1)}}
+
     .search-btn{
       background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;cursor:pointer;
       width:40px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center;
@@ -99,7 +128,10 @@
     }
     .search-btn:hover{opacity:0.9;transform:scale(1.06);box-shadow:0 4px 14px var(--accent-glow)}
     .search-btn:active{transform:scale(0.95)}
-    
+    /* حالة تحميل زر البحث */
+    .search-btn.loading-btn{pointer-events:none;opacity:0.7}
+    .search-btn.loading-btn i{animation:spin 0.8s linear infinite}
+
     .nav-actions{display:flex;align-items:center;gap:8px}
     #theme-toggle{
       background:var(--bg-input);border:1.5px solid var(--border);color:var(--text-sub);cursor:pointer;
@@ -133,6 +165,10 @@
     #loading-text.spinning::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}
     @keyframes spin{to{transform:rotate(360deg)}}
 
+    /* ========== عداد النتائج ========== */
+    .results-count{font-size:12px;color:var(--text-faint);margin-bottom:14px;display:flex;align-items:center;gap:6px}
+    .results-count span{color:var(--accent);font-weight:600}
+
     /* ========== الاقتراحات ========== */
     .suggestions-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
     .suggestion-chip{
@@ -198,6 +234,22 @@
     .section-title a{color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;margin-right:auto;transition:color 0.2s}
     .section-title a:hover{color:var(--accent-2)}
 
+    /* ========== مؤشر تحميل المزيد ========== */
+    .load-more-spinner{
+      display:none;text-align:center;padding:24px;color:var(--text-faint);font-size:13px;
+      align-items:center;justify-content:center;gap:8px;
+    }
+    .load-more-spinner.show{display:flex}
+    .load-more-spinner::before{content:'';width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}
+
+    /* ========== نهاية النتائج ========== */
+    .end-of-results{
+      text-align:center;padding:30px 20px;color:var(--text-faint);font-size:13px;
+      display:none;align-items:center;justify-content:center;gap:8px;
+    }
+    .end-of-results.show{display:flex}
+    .end-divider{height:1px;background:var(--border);flex:1;max-width:80px}
+
     /* ========== مساعد الذكاء الاصطناعي ========== */
     .sidebar{width:100%;order:2;margin-top:12px}
     .ai-widget-wrap{position:relative;border-radius:var(--radius-card)}
@@ -224,14 +276,22 @@
     .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;margin-top:8px}
-    .error-state{text-align:center;padding:40px 20px;color:var(--accent-2)}
-    .error-state i{font-size:36px;margin-bottom:14px;display:block}
 
     /* ========== زر العودة للأعلى ========== */
     .back-to-top{position:fixed;bottom:30px;right:30px;z-index:999;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transition:0.3s;box-shadow:0 6px 20px var(--accent-glow);border:none}
     .back-to-top.show{opacity:1;visibility:visible}
     .back-to-top:hover{transform:translateY(-3px)}
 
+    /* ========== تنبيه عدم دعم الصوت ========== */
+    .voice-unsupported-toast{
+      position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
+      background:var(--bg-card);border:1.5px solid var(--accent-2);color:var(--accent-2);
+      padding:10px 20px;border-radius:var(--radius-pill);font-size:13px;
+      box-shadow:var(--shadow-hover);z-index:2000;opacity:0;pointer-events:none;
+      transition:opacity 0.3s;
+    }
+    .voice-unsupported-toast.show{opacity:1}
+
     @media(max-width:767px){
       .navbar{top:10px;border-radius:16px;padding:10px 14px}
       .tabs-bar{top:125px}
@@ -254,12 +314,24 @@
 
   <nav class="navbar">
     <a class="brand" href="index.html"><div class="brand-icon"><i class="fa-solid fa-bolt"></i></div><span>SurfGO</span></a>
-    <div class="search-container">
+    <div class="search-container" style="position:relative">
       <form class="search-bar" id="search-form">
         <input id="main-input" placeholder="ابحث في الويب..." type="text" autocomplete="off" />
         <button type="button" class="clear-btn" id="clear-btn" aria-label="مسح النص"><i class="fa-solid fa-times"></i></button>
-        <button class="search-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button>
+        <!-- زر البحث الصوتي الجديد -->
+        <button type="button" class="voice-btn" id="voice-btn" aria-label="بحث صوتي" title="بحث صوتي">
+          <i class="fa-solid fa-microphone"></i>
+        </button>
+        <button class="search-btn" id="search-submit-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button>
       </form>
+      <!-- مؤشر الاستماع -->
+      <div class="voice-listening-indicator" id="voice-indicator">
+        <div class="voice-waves">
+          <div class="voice-wave"></div><div class="voice-wave"></div><div class="voice-wave"></div>
+          <div class="voice-wave"></div><div class="voice-wave"></div>
+        </div>
+        جاري الاستماع…
+      </div>
     </div>
     <div class="nav-actions"><button id="theme-toggle" aria-label="تغيير السمة"></button></div>
   </nav>
@@ -285,7 +357,14 @@
         </div>
       </div>
       <div id="suggestions-container"></div>
+      <div id="results-count-bar"></div>
       <div id="results-container"></div>
+      <div class="load-more-spinner" id="load-more-spinner">جاري تحميل المزيد…</div>
+      <div class="end-of-results" id="end-of-results">
+        <div class="end-divider"></div>
+        <span><i class="fa-solid fa-check-circle" style="color:var(--accent);margin-left:5px"></i> تم عرض جميع النتائج</span>
+        <div class="end-divider"></div>
+      </div>
     </main>
     <aside class="sidebar" id="sidebar">
       <div class="ai-widget-wrap"><div class="ai-glow-ring"></div>
@@ -301,6 +380,7 @@
   </div>
 
   <button class="back-to-top" id="backToTop" aria-label="العودة للأعلى"><i class="fa-solid fa-arrow-up"></i></button>
+  <div class="voice-unsupported-toast" id="voice-toast">متصفحك لا يدعم البحث الصوتي</div>
 
   <script>
     (() => {
@@ -308,7 +388,7 @@
       const GEMINI_API = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent";
       const GEMINI_KEY = "";
 
-      // ========== إدارة السمة ==========
+      // ===== إدارة السمة =====
       let currentTheme = 'light';
       const themeBtn = document.getElementById('theme-toggle');
       const setTheme = (t) => {
@@ -319,63 +399,56 @@
       setTheme('light');
       themeBtn.addEventListener('click', () => setTheme(currentTheme === 'dark' ? 'light' : 'dark'));
 
-      // ========== المتغيرات العامة ==========
+      // ===== المتغيرات العامة =====
       const params = new URLSearchParams(window.location.search);
       let query = params.get('q') || '';
       let currentTab = params.get('tab') || 'all';
-      const inputEl = document.getElementById('main-input');
-      const resultsEl = document.getElementById('results-container');
-      const loadingEl = document.getElementById('loading-text');
-      const sidebarEl = document.getElementById('sidebar');
-      const aiMobileWrap = document.getElementById('ai-mobile-wrap');
-      const suggestionsEl = document.getElementById('suggestions-container');
-      const clearBtn = document.getElementById('clear-btn');
 
-      // ========== إدارة التبويبات ==========
+      const inputEl      = document.getElementById('main-input');
+      const resultsEl    = document.getElementById('results-container');
+      const loadingEl    = document.getElementById('loading-text');
+      const sidebarEl    = document.getElementById('sidebar');
+      const aiMobileWrap = document.getElementById('ai-mobile-wrap');
+      const suggestionsEl= document.getElementById('suggestions-container');
+      const clearBtn     = document.getElementById('clear-btn');
+      const submitBtn    = document.getElementById('search-submit-btn');
+      const countBar     = document.getElementById('results-count-bar');
+      const loadMoreEl   = document.getElementById('load-more-spinner');
+      const endEl        = document.getElementById('end-of-results');
+
+      // ===== Infinite Scroll State =====
+      let allWebResults  = [];   // كل نتائج الويب المجلوبة
+      let renderedCount  = 0;    // عدد ما تم عرضه
+      const PAGE_SIZE    = 10;   // كم نتيجة نعرض في كل دفعة
+      let isRendering    = false;
+
+      // ===== إدارة التبويبات =====
       const setActiveTab = (tab) => {
         document.querySelectorAll('.tab-pill').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
       };
       setActiveTab(currentTab);
 
-      // ========== صندوق البحث (زر المسح) ==========
+      // ===== زر المسح =====
       const updateClearBtn = () => {
-        if (inputEl.value.length > 0) {
-          clearBtn.classList.add('visible');
-        } else {
-          clearBtn.classList.remove('visible');
-        }
+        clearBtn.classList.toggle('visible', inputEl.value.length > 0);
       };
       inputEl.addEventListener('input', updateClearBtn);
-      clearBtn.addEventListener('click', () => {
-        inputEl.value = '';
-        updateClearBtn();
-        inputEl.focus();
-      });
-      
-      // مفتاح Escape لمسح حقل البحث
+      clearBtn.addEventListener('click', () => { inputEl.value = ''; updateClearBtn(); inputEl.focus(); });
       inputEl.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && inputEl.value.length > 0) {
-          inputEl.value = '';
-          updateClearBtn();
-          inputEl.blur();
-        }
+        if (e.key === 'Escape' && inputEl.value.length > 0) { inputEl.value = ''; updateClearBtn(); inputEl.blur(); }
       });
 
-      // ========== دوال مساعدة ==========
+      // ===== دوال مساعدة =====
       const esc = (s) => s ? s.replace(/[&<>'"]/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[m]||m)) : '';
       const getDomain = (url) => { try { return new URL(url).hostname.replace('www.',''); } catch { return url||''; } };
       const proxyImg = (url) => url && !url.startsWith('data:') ? `https://wsrv.nl/?url=${encodeURIComponent(url)}&output=webp` : url;
       const faviconURL = (d) => `https://www.google.com/s2/favicons?domain=${d}&sz=32`;
       const extractBestImage = (r) => {
-        const candidates = [r.img_src, r.thumbnail_src, r.thumbnail, r.image];
-        for (const c of candidates) {
-          if (c && typeof c === 'string' && c.match(/\.(jpg|jpeg|png|gif|webp|bmp)/i)) return c;
+        for (const c of [r.img_src, r.thumbnail_src, r.thumbnail, r.image]) {
           if (c && typeof c === 'string' && c.startsWith('http')) return c;
         }
         return null;
       };
-      
-      // قص النص بعد عدد معين من الكلمات
       const truncateWords = (text, maxWords) => {
         if (!text) return '';
         const words = text.split(/\s+/).filter(w => w.length > 0);
@@ -383,7 +456,75 @@
         return words.slice(0, maxWords).join(' ') + '...';
       };
 
-      // ========== الذكاء الاصطناعي ==========
+      // ===== Intersection Observer للظهور =====
+      const observer = new IntersectionObserver(entries => entries.forEach(en => {
+        if (en.isIntersecting) en.target.classList.add('visible');
+      }), { threshold: 0.08 });
+      const observe = () => document.querySelectorAll('.search-result:not(.visible),.image-card:not(.visible),.video-card:not(.visible)').forEach(el => observer.observe(el));
+
+      // ===== Sentinel للـ Infinite Scroll =====
+      let sentinel = null;
+      const scrollObserver = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting && !isRendering) renderNextBatch();
+      }, { rootMargin: '300px' });
+
+      const attachSentinel = () => {
+        if (sentinel) sentinel.remove();
+        sentinel = document.createElement('div');
+        sentinel.id = 'scroll-sentinel';
+        resultsEl.appendChild(sentinel);
+        scrollObserver.observe(sentinel);
+      };
+
+      const detachSentinel = () => {
+        if (sentinel) { scrollObserver.unobserve(sentinel); sentinel.remove(); sentinel = null; }
+      };
+
+      // ===== عرض دفعة من نتائج الويب =====
+      const renderNextBatch = () => {
+        if (renderedCount >= allWebResults.length) {
+          detachSentinel();
+          loadMoreEl.classList.remove('show');
+          endEl.classList.add('show');
+          return;
+        }
+        isRendering = true;
+        loadMoreEl.classList.add('show');
+
+        const batch = allWebResults.slice(renderedCount, renderedCount + PAGE_SIZE);
+        batch.forEach(r => {
+          const d = getDomain(r.url);
+          const art = document.createElement('article'); art.className = 'search-result';
+          art.innerHTML = `
+            <div class="favicon-wrap">
+              <img src="${faviconURL(d)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" />
+              <i class="fa-solid fa-globe fallback-icon" style="display:none"></i>
+            </div>
+            <div class="result-content">
+              <div class="result-domain"><i class="fa-solid fa-link"></i> ${esc(d)}</div>
+              <a class="result-title" href="${esc(r.url)}" target="_blank" title="${esc(r.title||'')}">${esc(truncateWords(r.title||'بدون عنوان', 14))}</a>
+              <p class="result-snippet">${esc(truncateWords(r.content||'', 35))}</p>
+            </div>
+            <button class="copy-link-btn" data-url="${esc(r.url)}" title="نسخ الرابط"><i class="fa-regular fa-copy"></i></button>
+          `;
+          resultsEl.appendChild(art);
+        });
+
+        renderedCount += batch.length;
+        observe();
+
+        setTimeout(() => {
+          loadMoreEl.classList.remove('show');
+          isRendering = false;
+          if (renderedCount < allWebResults.length) {
+            attachSentinel();
+          } else {
+            endEl.classList.add('show');
+          }
+        }, 400);
+      };
+
+      // ===== الذكاء الاصطناعي =====
       let currentAItext = '';
       const aiSetLoading = () => {
         ['ai-answer-body','ai-answer-body-mobile'].forEach(id => { const el=document.getElementById(id); if(el){el.classList.add('loading');el.innerHTML='<div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>'} });
@@ -394,7 +535,7 @@
         currentAItext = text;
         ['ai-answer-body','ai-answer-body-mobile'].forEach(id => { const el=document.getElementById(id); if(el){el.classList.remove('loading');el.textContent=text} });
         ['ai-copy-desktop','ai-copy-mobile'].forEach(id => { const b=document.getElementById(id); if(b)b.style.display='inline-flex' });
-        const chips = sources.slice(0,4).map(s => `<a class="ai-source-chip" href="${s.url}" target="_blank"><i class="fa-solid fa-link"></i>${esc(getDomain(s.url))}</a>`).join('');
+        const chips = sources.slice(0,4).map(s=>`<a class="ai-source-chip" href="${s.url}" target="_blank"><i class="fa-solid fa-link"></i>${esc(getDomain(s.url))}</a>`).join('');
         ['ai-sources-desktop','ai-sources-mobile'].forEach(id => { const el=document.getElementById(id); if(el)el.innerHTML=chips });
       };
       const runAI = async (q, results) => {
@@ -406,7 +547,7 @@
             const data = await resp.json();
             aiUpdate(data.candidates?.[0]?.content?.parts?.[0]?.text||'لا توجد إجابة.', results.slice(0,4));
             return;
-          }catch(e){}
+          } catch(e){}
         }
         const best = results[0];
         const summary = best ? truncateWords(best.content, 35) : '';
@@ -417,138 +558,125 @@
         if(aiMobileWrap) aiMobileWrap.style.display = visible ? '' : 'none';
       };
 
-      // ========== معالجة أخطاء الصور ==========
-      window.handleImageError = function(img) {
-        const card = img.closest('.image-card');
-        if (card) card.remove();
-      };
-      window.handleVideoThumbError = function(img) {
-        const card = img.closest('.video-card');
-        if (card) card.remove();
-      };
-
-      // ========== مراقب الظهور ==========
-      const observer = new IntersectionObserver(entries => entries.forEach(en => { if(en.isIntersecting) en.target.classList.add('visible') }), {threshold:0.1});
-      const observe = () => document.querySelectorAll('.search-result,.image-card,.video-card').forEach(el => observer.observe(el));
+      // ===== معالجة أخطاء الصور =====
+      window.handleImageError = function(img) { const c=img.closest('.image-card'); if(c)c.remove(); };
+      window.handleVideoThumbError = function(img) { const c=img.closest('.video-card'); if(c)c.remove(); };
 
-      // ========== زر العودة للأعلى ==========
+      // ===== زر العودة للأعلى =====
       const backBtn = document.getElementById('backToTop');
       window.addEventListener('scroll', () => backBtn.classList.toggle('show', scrollY > 400));
       backBtn.addEventListener('click', () => scrollTo({top:0,behavior:'smooth'}));
 
-      // ========== جلب البيانات ==========
+      // ===== جلب البيانات =====
       const fetchJSON = (url) => fetch(url, {signal: AbortSignal.timeout(12000)}).then(r=>r.json());
-      const fetchCategory = (cat) => {
-        const url = `${SEARXNG_URL}?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1&limit=100`;
-        return fetchJSON(url).catch(()=>({results:[], suggestions:[]}));
+      const fetchCategory = (cat, pageno=1) => {
+        const url = `${SEARXNG_URL}?q=${encodeURIComponent(query)}&format=json&categories=${cat}&language=ar&safesearch=1&pageno=${pageno}`;
+        return fetchJSON(url).catch(()=>({results:[],suggestions:[]}));
       };
 
-      // ========== عرض الاقتراحات ==========
+      // ===== عرض الاقتراحات =====
       const renderSuggestions = (suggestions) => {
         suggestionsEl.innerHTML = '';
-        if (!suggestions || !suggestions.length) return;
-        const row = document.createElement('div');
-        row.className = 'suggestions-row';
+        if (!suggestions?.length) return;
+        const row = document.createElement('div'); row.className='suggestions-row';
         suggestions.forEach(s => {
-          const chip = document.createElement('button');
-          chip.className = 'suggestion-chip';
-          chip.textContent = s;
-          chip.addEventListener('click', () => {
-            inputEl.value = s;
-            updateClearBtn();
-            document.getElementById('search-form').dispatchEvent(new Event('submit'));
-          });
+          const chip = document.createElement('button'); chip.className='suggestion-chip'; chip.textContent=s;
+          chip.addEventListener('click', () => { inputEl.value=s; updateClearBtn(); document.getElementById('search-form').dispatchEvent(new Event('submit')); });
           row.appendChild(chip);
         });
         suggestionsEl.appendChild(row);
       };
 
-      // ========== عناوين الأقسام ==========
-      const createSectionTitle = (text, tabLink) => {
-        const h3 = document.createElement('h3'); h3.className='section-title';
-        h3.innerHTML = `${text} <a href="?q=${encodeURIComponent(query)}&tab=${tabLink}">عرض الكل <i class="fa-solid fa-arrow-left"></i></a>`;
-        return h3;
+      // ===== عرض عداد النتائج =====
+      const renderCount = (count) => {
+        countBar.innerHTML = count > 0
+          ? `<div class="results-count"><i class="fa-solid fa-circle-info"></i> تم العثور على <span>${count}</span> نتيجة</div>`
+          : '';
       };
 
-      // ========== عرض نتائج الويب ==========
-      const renderWebResults = (results) => {
-        results.forEach(r => {
-          const d = getDomain(r.url);
-          const art = document.createElement('article'); art.className='search-result';
-          art.innerHTML = `
-            <div class="favicon-wrap"><img src="${faviconURL(d)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /><i class="fa-solid fa-globe fallback-icon" style="display:none"></i></div>
-            <div class="result-content">
-              <div class="result-domain"><i class="fa-solid fa-link"></i> ${esc(d)}</div>
-              <a class="result-title" href="${esc(r.url)}" target="_blank" title="${esc(r.title||'')}">${esc(truncateWords(r.title||'بدون عنوان', 12))}</a>
-              <p class="result-snippet">${esc(truncateWords(r.content||'', 30))}</p>
-            </div>
-            <button class="copy-link-btn" data-url="${esc(r.url)}" title="نسخ الرابط"><i class="fa-regular fa-copy"></i></button>
-          `;
-          resultsEl.appendChild(art);
-        });
+      // ===== عناوين الأقسام =====
+      const createSectionTitle = (text, tabLink) => {
+        const h3=document.createElement('h3'); h3.className='section-title';
+        h3.innerHTML=`${text} <a href="?q=${encodeURIComponent(query)}&tab=${tabLink}">عرض الكل <i class="fa-solid fa-arrow-left"></i></a>`;
+        return h3;
       };
 
-      // ========== عرض الصور ==========
-      const renderImageCards = (images) => {
-        const validImages = images.filter(r => extractBestImage(r));
-        if(!validImages.length) return;
-        const title = createSectionTitle('صور','images');
-        resultsEl.appendChild(title);
+      // ===== عرض الصور =====
+      const renderImageGrid = (images, container, withTitle=false) => {
+        const valid = images.filter(r => extractBestImage(r));
+        if (!valid.length) return;
+        if (withTitle) container.appendChild(createSectionTitle('صور','images'));
         const grid = document.createElement('div'); grid.className='images-grid';
-        validImages.forEach(r => {
-          const raw = extractBestImage(r);
-          const proxied = proxyImg(raw);
-          const displayUrl = r.url || '';
+        valid.forEach(r => {
+          const proxied = proxyImg(extractBestImage(r));
           const card = document.createElement('div'); card.className='image-card';
-          card.innerHTML = `
-            <a class="image-card-link" href="${esc(displayUrl)}" target="_blank">
+          card.innerHTML=`
+            <a class="image-card-link" href="${esc(r.url||'')}" target="_blank">
               <img src="${esc(proxied)}" loading="lazy" onerror="handleImageError(this)" alt="${esc(r.title||'')}" />
             </a>
             <div class="image-info">
-              <div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة', 8))}</div>
-              <a class="image-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 6))}</a>
-            </div>
-          `;
+              <div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة',8))}</div>
+              <a class="image-url" href="${esc(r.url||'')}" target="_blank">${esc(getDomain(r.url||''))}</a>
+            </div>`;
           grid.appendChild(card);
         });
-        resultsEl.appendChild(grid);
+        container.appendChild(grid);
       };
 
-      // ========== عرض الفيديوهات ==========
-      const renderVideoCards = (videos) => {
-        const validVideos = videos.filter(r => r.thumbnail);
-        if(!validVideos.length) return;
-        const title = createSectionTitle('فيديوهات','videos');
-        resultsEl.appendChild(title);
+      // ===== عرض الفيديوهات =====
+      const renderVideoGrid = (videos, container, withTitle=false) => {
+        const valid = videos.filter(r => r.thumbnail);
+        if (!valid.length) return;
+        if (withTitle) container.appendChild(createSectionTitle('فيديوهات','videos'));
         const grid = document.createElement('div'); grid.className='videos-grid';
-        validVideos.forEach(r => {
+        valid.forEach(r => {
           const thumb = proxyImg(r.thumbnail);
-          const displayUrl = r.url || '';
           const card = document.createElement('div'); card.className='video-card';
-          card.innerHTML = `
-            <a href="${esc(displayUrl)}" target="_blank" class="video-thumb-wrap">
+          card.innerHTML=`
+            <a href="${esc(r.url||'')}" target="_blank" class="video-thumb-wrap">
               <img src="${esc(thumb)}" loading="lazy" onerror="handleVideoThumbError(this)" alt="${esc(r.title||'')}" />
               <div class="play-overlay"><i class="fa-solid fa-play"></i></div>
             </a>
             <div class="video-details">
-              <a class="video-title" href="${esc(displayUrl)}" target="_blank" title="${esc(r.title||'فيديو')}">${esc(truncateWords(r.title||'فيديو', 10))}</a>
-              <a class="video-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 8))}</a>
-            </div>
-          `;
+              <a class="video-title" href="${esc(r.url||'')}" target="_blank">${esc(truncateWords(r.title||'فيديو',12))}</a>
+              <a class="video-url" href="${esc(r.url||'')}" target="_blank">${esc(getDomain(r.url||''))}</a>
+            </div>`;
           grid.appendChild(card);
         });
-        resultsEl.appendChild(grid);
+        container.appendChild(grid);
       };
 
-      // ========== البحث الرئيسي ==========
+      // ===== البحث الرئيسي =====
       const performSearch = async (q, tab) => {
+        // إعادة تعيين الحالة
         resultsEl.innerHTML = '';
         suggestionsEl.innerHTML = '';
-        loadingEl.style.display = 'flex'; loadingEl.classList.add('spinning');
+        countBar.innerHTML = '';
+        endEl.classList.remove('show');
+        loadMoreEl.classList.remove('show');
+        allWebResults = [];
+        renderedCount = 0;
+        isRendering = false;
+        detachSentinel();
+
+        loadingEl.style.display = 'flex';
+        loadingEl.classList.add('spinning');
+        loadingEl.textContent = 'جاري جلب النتائج…';
+
+        // حالة تحميل زر البحث
+        submitBtn.classList.add('loading-btn');
+        submitBtn.innerHTML = '<i class="fa-solid fa-circle-notch"></i>';
+
         showAI(tab === 'all');
 
+        const resetSubmitBtn = () => {
+          submitBtn.classList.remove('loading-btn');
+          submitBtn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>';
+        };
+
         try {
           if (tab === 'all') {
+            // جلب الصور والفيديو معاً أول��ً
             const [imagesData, videosData] = await Promise.all([
               fetchCategory('images'),
               fetchCategory('videos')
@@ -557,87 +685,172 @@
             const suggestions = imagesData.suggestions || videosData.suggestions || [];
             if (suggestions.length) renderSuggestions(suggestions);
 
-            const imageResults = (imagesData.results || []).slice(0, 3);
-            if (imageResults.length) renderImageCards(imageResults);
+            renderImageGrid((imagesData.results||[]).slice(0,4), resultsEl, true);
+            renderVideoGrid((videosData.results||[]).slice(0,3), resultsEl, true);
+            observe();
+
+            // جلب نتائج الويب — صفحات متعددة بدون حد
+            loadingEl.textContent = 'جاري جلب نتائج الويب…';
+
+            const [page1, page2, page3] = await Promise.all([
+              fetchCategory('general', 1),
+              fetchCategory('general', 2),
+              fetchCategory('general', 3),
+            ]);
+
+            // دمج كل النتائج وإزالة المكرر
+            const seen = new Set();
+            const mergeUnique = (arr) => (arr||[]).filter(r => {
+              if (!r.url || seen.has(r.url)) return false;
+              seen.add(r.url); return true;
+            });
 
-            const videoResults = (videosData.results || []).slice(0, 2);
-            if (videoResults.length) renderVideoCards(videoResults);
+            allWebResults = [
+              ...mergeUnique(page1.results),
+              ...mergeUnique(page2.results),
+              ...mergeUnique(page3.results),
+            ];
 
-            const generalData = await fetchCategory('general');
-            const webResults = generalData.results || [];
             loadingEl.style.display = 'none';
+            resetSubmitBtn();
 
-            if (webResults.length) {
-              renderWebResults(webResults);
-              runAI(q, webResults);
+            if (!allWebResults.length) {
+              resultsEl.innerHTML += `<div class="empty-state"><i class="fa-solid fa-magnifying-glass"></i><p>لا توجد نتائج لـ "<strong>${esc(q)}</strong>"</p></div>`;
+              return;
             }
+
+            // عرض عداد النتائج
+            renderCount(allWebResults.length);
+
+            // عرض الدفعة الأولى
+            renderNextBatch();
+
+            // تشغيل الذكاء الاصطناعي بناءً على أفضل النتائج
+            runAI(q, allWebResults.slice(0,6));
+
+          } else if (tab === 'images') {
+            const [p1, p2] = await Promise.all([fetchCategory('images',1), fetchCategory('images',2)]);
+            const seen = new Set();
+            const all = [...(p1.results||[]), ...(p2.results||[])].filter(r => {
+              if (!r.url || seen.has(r.url)) return false; seen.add(r.url); return true;
+            });
+            loadingEl.style.display='none'; resetSubmitBtn();
+            renderCount(all.length);
+            renderImageGrid(all, resultsEl, false);
             observe();
-          } else {
-            const data = await fetchCategory(tab);
-            const results = data.results || [];
-            const suggestions = data.suggestions || [];
-            loadingEl.style.display = 'none';
 
-            if (suggestions.length) renderSuggestions(suggestions);
-            if (!results.length) { resultsEl.innerHTML = ''; return; }
-
-            if (tab === 'images') {
-              const validImages = results.filter(r => extractBestImage(r));
-              if (validImages.length) {
-                const grid = document.createElement('div'); grid.className='images-grid';
-                validImages.forEach(r => {
-                  const raw = extractBestImage(r);
-                  const proxied = proxyImg(raw);
-                  const displayUrl = r.url || '';
-                  const card = document.createElement('div'); card.className='image-card';
-                  card.innerHTML = `
-                    <a class="image-card-link" href="${esc(displayUrl)}" target="_blank">
-                      <img src="${esc(proxied)}" loading="lazy" onerror="handleImageError(this)" alt="${esc(r.title||'')}" />
-                    </a>
-                    <div class="image-info">
-                      <div class="img-title" title="${esc(r.title||'صورة')}">${esc(truncateWords(r.title||'صورة', 8))}</div>
-                      <a class="image-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 6))}</a>
-                    </div>
-                  `;
-                  grid.appendChild(card);
-                });
-                resultsEl.appendChild(grid);
-              }
-            } else if (tab === 'videos') {
-              const validVideos = results.filter(r => r.thumbnail);
-              if (validVideos.length) {
-                const grid = document.createElement('div'); grid.className='videos-grid';
-                validVideos.forEach(r => {
-                  const thumb = proxyImg(r.thumbnail);
-                  const displayUrl = r.url || '';
-                  const card = document.createElement('div'); card.className='video-card';
-                  card.innerHTML = `
-                    <a href="${esc(displayUrl)}" target="_blank" class="video-thumb-wrap">
-                      <img src="${esc(thumb)}" loading="lazy" onerror="handleVideoThumbError(this)" alt="${esc(r.title||'')}" />
-                      <div class="play-overlay"><i class="fa-solid fa-play"></i></div>
-                    </a>
-                    <div class="video-details">
-                      <a class="video-title" href="${esc(displayUrl)}" target="_blank" title="${esc(r.title||'فيديو')}">${esc(truncateWords(r.title||'فيديو', 10))}</a>
-                      <a class="video-url" href="${esc(displayUrl)}" target="_blank" title="${esc(displayUrl)}">${esc(truncateWords(displayUrl, 8))}</a>
-                    </div>
-                  `;
-                  grid.appendChild(card);
-                });
-                resultsEl.appendChild(grid);
-              }
+          } else if (tab === 'videos') {
+            const [p1, p2] = await Promise.all([fetchCategory('videos',1), fetchCategory('videos',2)]);
+            const seen = new Set();
+            const all = [...(p1.results||[]), ...(p2.results||[])].filter(r => {
+              if (!r.url || seen.has(r.url)) return false; seen.add(r.url); return true;
+            });
+            loadingEl.style.display='none'; resetSubmitBtn();
+            renderCount(all.length);
+            renderVideoGrid(all, resultsEl, false);
+            observe();
+
+          } else if (tab === 'news') {
+            const data = await fetchCategory('news');
+            const results = data.results || [];
+            loadingEl.style.display='none'; resetSubmitBtn();
+            if (data.suggestions?.length) renderSuggestions(data.suggestions);
+            renderCount(results.length);
+            if (results.length) {
+              // عرض الأخبار كبطاقات ويب عادية
+              allWebResults = results;
+              renderedCount = 0;
+              renderNextBatch();
             } else {
-              renderWebResults(results);
+              resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-newspaper"></i><p>لا توجد أخبار حول "<strong>${esc(q)}</strong>"</p></div>`;
             }
-            observe();
           }
+
         } catch(e) {
-          loadingEl.style.display = 'none';
-          resultsEl.innerHTML = '';
-          suggestionsEl.innerHTML = '';
+          loadingEl.style.display='none';
+          resetSubmitBtn();
+          resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>حدث خطأ أثناء البحث. حاول مجدداً.</p></div>`;
         }
       };
 
-      // ========== التهيئة الأولية ==========
+      // ===== البحث الصوتي =====
+      const voiceBtn = document.getElementById('voice-btn');
+      const voiceIndicator = document.getElementById('voice-indicator');
+      const voiceToast = document.getElementById('voice-toast');
+
+      const showToast = (msg) => {
+        voiceToast.textContent = msg;
+        voiceToast.classList.add('show');
+        setTimeout(() => voiceToast.classList.remove('show'), 3000);
+      };
+
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+      if (!SpeechRecognition) {
+        voiceBtn.title = 'البحث الصوتي غير مدعوم في هذا المتصفح';
+        voiceBtn.style.opacity = '0.4';
+        voiceBtn.addEventListener('click', () => showToast('متصفحك لا يدعم البحث الصوتي. جرب Chrome أو Edge.'));
+      } else {
+        const recognition = new SpeechRecognition();
+        recognition.lang = 'ar-SA';
+        recognition.interimResults = true;
+        recognition.maxAlternatives = 1;
+        recognition.continuous = false;
+
+        let isListening = false;
+
+        const startListening = () => {
+          if (isListening) { recognition.stop(); return; }
+          try {
+            recognition.start();
+          } catch(e) {
+            showToast('لا يمكن بدء الاستماع. تحقق من إذن الميكروفون.');
+          }
+        };
+
+        recognition.onstart = () => {
+          isListening = true;
+          voiceBtn.classList.add('listening');
+          voiceBtn.innerHTML = '<i class="fa-solid fa-microphone-slash"></i>';
+          voiceIndicator.classList.add('show');
+        };
+
+        recognition.onresult = (e) => {
+          const transcript = Array.from(e.results).map(r => r[0].transcript).join('');
+          inputEl.value = transcript;
+          updateClearBtn();
+          // إذا كانت النتيجة نهائية، نبحث تلقائياً
+          if (e.results[e.results.length - 1].isFinal) {
+            recognition.stop();
+            if (transcript.trim()) {
+              setTimeout(() => {
+                document.getElementById('search-form').dispatchEvent(new Event('submit'));
+              }, 300);
+            }
+          }
+        };
+
+        recognition.onerror = (e) => {
+          const msgs = {
+            'no-speech': 'لم يُسمع أي كلام. حاول مجدداً.',
+            'audio-capture': 'لا يمكن الوصول للميكروفون.',
+            'not-allowed': 'تم رفض إذن الميكروفون.',
+            'network': 'خطأ في الشبكة أثناء التعرف على الصوت.',
+          };
+          showToast(msgs[e.error] || 'خطأ في البحث الصوتي.');
+        };
+
+        recognition.onend = () => {
+          isListening = false;
+          voiceBtn.classList.remove('listening');
+          voiceBtn.innerHTML = '<i class="fa-solid fa-microphone"></i>';
+          voiceIndicator.classList.remove('show');
+        };
+
+        voiceBtn.addEventListener('click', startListening);
+      }
+
+      // ===== التهيئة =====
       if (query) {
         inputEl.value = query;
         updateClearBtn();
@@ -646,9 +859,11 @@
         loadingEl.style.display = 'block';
         loadingEl.classList.remove('spinning');
         loadingEl.textContent = 'أدخل كلمة البحث للبدء.';
+        submitBtn.classList.remove('loading-btn');
+        submitBtn.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>';
       }
 
-      // ========== مستمعو الأحداث ==========
+      // ===== مستمعو الأحداث =====
       document.getElementById('search-form').addEventListener('submit', e => {
         e.preventDefault();
         const q = inputEl.value.trim();
@@ -669,16 +884,16 @@
         });
       });
 
-      document.getElementById('ai-copy-desktop')?.addEventListener('click', ()=>navigator.clipboard.writeText(currentAItext));
-      document.getElementById('ai-copy-mobile')?.addEventListener('click', ()=>navigator.clipboard.writeText(currentAItext));
+      document.getElementById('ai-copy-desktop')?.addEventListener('click', () => navigator.clipboard.writeText(currentAItext));
+      document.getElementById('ai-copy-mobile')?.addEventListener('click', () => navigator.clipboard.writeText(currentAItext));
 
-      // نسخ رابط النتيجة
       document.addEventListener('click', (e) => {
-        if (e.target.classList.contains('copy-link-btn')) {
-          navigator.clipboard.writeText(e.target.dataset.url).then(() => {
-            e.target.innerHTML = '<i class="fa-solid fa-check"></i>';
-            setTimeout(() => { e.target.innerHTML = '<i class="fa-regular fa-copy"></i>'; }, 1500);
-          }).catch(() => {});
+        const btn = e.target.closest('.copy-link-btn');
+        if (btn) {
+          navigator.clipboard.writeText(btn.dataset.url).then(() => {
+            btn.innerHTML = '<i class="fa-solid fa-check"></i>';
+            setTimeout(() => { btn.innerHTML = '<i class="fa-regular fa-copy"></i>'; }, 1500);
+          }).catch(()=>{});
         }
       });