Fix 30 NLP edge cases in Grammar, Spelling, and Punctuation (Phase 10 results and Extension UI improvements)

add_divider.py

@@ -0,0 +1,19 @@
+import re
+
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+
+# Replace Navbar
+navbar_pattern = r'(<button onclick="showPage\(\'home\'\)" class="flex items-center) gap-3(" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية">)(.*?)(<span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>)'
+navbar_replacement = r'\1 gap-2.5 md:gap-3\2\3<div class="h-6 w-[1.5px] bg-gray-300 dark:bg-gray-700 rounded-full"></div>\4'
+html = re.sub(navbar_pattern, navbar_replacement, html, flags=re.DOTALL)
+
+# Replace Footer
+footer_pattern = r'(<div class="flex items-center) gap-3( mb-4">)(.*?)(<span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>)'
+footer_replacement = r'\1 gap-2.5 md:gap-3\2\3<div class="h-7 w-[1.5px] bg-gray-300 dark:bg-gray-700 rounded-full"></div>\4'
+html = re.sub(footer_pattern, footer_replacement, html, flags=re.DOTALL)
+
+with open('src/index.html', 'w', encoding='utf-8') as f:
+    f.write(html)
+
+print("Done replacing.")

add_extension_theme_toggle.py

@@ -0,0 +1,124 @@
+import re
+
+# 1. CSS Injection
+css_to_add = """
+/* Light Theme Variables */
+[data-theme="light"] {
+  --bayan-bg: #f9fafb;
+  --bayan-surface: #ffffff;
+  --bayan-surface-hover: #f3f4f6;
+  --bayan-surface-active: #e5e7eb;
+  --bayan-border: #e5e7eb;
+  --bayan-border-light: #d1d5db;
+  --bayan-text: #111827;
+  --bayan-text-secondary: #4b5563;
+  --bayan-text-muted: #9ca3af;
+  --bayan-success: #16a34a;
+  --bayan-warning: #d97706;
+}
+
+/* Theme Toggle Button Styles */
+.theme-toggle-animated {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--bayan-surface-hover);
+  color: var(--bayan-text-secondary);
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.theme-toggle-animated:hover {
+  background: var(--bayan-primary);
+  color: #fff;
+  transform: rotate(15deg);
+}
+
+.theme-toggle-animated svg {
+  transition: transform 0.4s ease, opacity 0.3s ease;
+  position: absolute;
+}
+
+[data-theme="dark"] .theme-icon-sun {
+  transform: rotate(90deg) scale(0);
+  opacity: 0;
+}
+
+[data-theme="dark"] .theme-icon-moon {
+  transform: rotate(0) scale(1);
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-icon-moon {
+  transform: rotate(-90deg) scale(0);
+  opacity: 0;
+}
+
+[data-theme="light"] .theme-icon-sun {
+  transform: rotate(0) scale(1);
+  opacity: 1;
+}
+"""
+
+def append_to_file(filepath, content):
+    with open(filepath, 'a', encoding='utf-8') as f:
+        f.write('\n' + content + '\n')
+
+append_to_file('extension/popup.css', css_to_add)
+append_to_file('extension/sidepanel/sidepanel.css', css_to_add)
+
+# 2. HTML Injection
+btn_html = """
+    <button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button">
+      <svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+      <svg class="theme-icon-moon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+    </button>
+"""
+
+def insert_html_button(filepath, pattern):
+    with open(filepath, 'r', encoding='utf-8') as f:
+        html = f.read()
+    
+    # We want to put the button next to the status indicator.
+    # The pattern will match the <div class="bayan-header-status"...> (or sp-) and inject the button right before it
+    new_html = re.sub(pattern, btn_html + r'\1', html)
+    with open(filepath, 'w', encoding='utf-8') as f:
+        f.write(new_html)
+
+insert_html_button('extension/popup.html', r'(<div class="bayan-header-status")')
+insert_html_button('extension/sidepanel/sidepanel.html', r'(<div class="sp-header-status")')
+
+# 3. JS Logic Injection
+js_to_add = """
+// ── Theme Toggle Logic ──
+document.addEventListener('DOMContentLoaded', () => {
+  const toggleBtn = document.getElementById('ext-theme-toggle');
+  
+  // Load theme from storage
+  chrome.storage.local.get(['theme'], (result) => {
+    const currentTheme = result.theme || 'dark'; // default to dark
+    document.documentElement.setAttribute('data-theme', currentTheme);
+  });
+
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', () => {
+      let theme = document.documentElement.getAttribute('data-theme') || 'dark';
+      let targetTheme = theme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', targetTheme);
+      chrome.storage.local.set({ theme: targetTheme });
+    });
+  }
+});
+"""
+
+append_to_file('extension/popup.js', js_to_add)
+append_to_file('extension/sidepanel/sidepanel.js', js_to_add)
+
+print("Theme toggle added successfully.")

bug_test_report.md

@@ -0,0 +1,402 @@
+# Automated Bug Verification Report
+This report proves the existence of the 30 documented bugs by running the exact rules against 2 examples each.
+## 1. Grammar Bugs
+
+
+### 1.1. Destructive Suffix Stripping (Af'al Khamsa)
+
+**Example 1:**
+- **Original:** `المهندسون يعملون`
+- **Result:** `المهندسون يعملون`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `المعلمون يشرحون`
+- **Result:** `المعلمون يشرحون`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.2. Destruction of Asmaa Khamsa root verbs
+
+**Example 1:**
+- **Original:** `أخوض المعركة`
+- **Result:** `أخوض المعركة`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `أبواب المدرسة`
+- **Result:** `أبواب المدرسة`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.3. Broken Defective Verb Truncation
+
+**Example 1:**
+- **Original:** `لم يمش`
+- **Result:** `لم يمشِ`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `لم يأت`
+- **Result:** `لم يأتِ`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+### 1.4. Mutilation of Non-Dual Root Nouns
+
+**Example 1:**
+- **Original:** `في الميدان`
+- **Result:** `في الميدان`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `من اليابان`
+- **Result:** `من اليابان`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.5. Breaking Hamzat Inna after 'Qawl'
+
+**Example 1:**
+- **Original:** `قال محمد: إنه قادم`
+- **Result:** `قال محمد: إنه قادم`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `صرح الوزير: إننا مستعدون`
+- **Result:** `صرح الوزير: إننا مستعدون`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.6. Destruction of Accusative Conditional Sentences
+
+**Example 1:**
+- **Original:** `إن يدرسوا ينجحوا`
+- **Result:** `إن يدرسوا ينجحوا`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `من يعملوا خيرا يجزوا به`
+- **Result:** `من يعملوا خيرا يجزوا به`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.7. Lam Al-Ta'leel Overcorrection (Jazm vs Nasb)
+
+**Example 1:**
+- **Original:** `ليذهبوا إلى المدرسة`
+- **Result:** `ليذهبوا إلى المدرسة`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `ليدعوا الله`
+- **Result:** `ليدعوا الله`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.8. Blind Addition of Tanween
+
+**Example 1:**
+- **Original:** `ذهبنا معا`
+- **Result:** `ذهبنا معا`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `كان الجو رائعا`
+- **Result:** `كان الجو رائعا`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.9. Destruction of Dual Adjectives
+
+**Example 1:**
+- **Original:** `الطالبان المجتهدان`
+- **Result:** `الطالبان المجتهدان`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `السيارتان السريعتان`
+- **Result:** `السيارتان السريعتان`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.10. Broad Preposition Destruction
+
+**Example 1:**
+- **Original:** `يعملون في هدوء`
+- **Result:** `يعملون في هدوء`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `ينظرون إلى السماء`
+- **Result:** `ينظرون إلى السماء`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.11. Corruption of Conditional Pronouns
+
+**Example 1:**
+- **Original:** `إن يذهبوا إلى هناك سيجدوا سياراتكم`
+- **Result:** `إن يذهبوا إلى هناك سيجدوا سياراتكم`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `من يعمل خيرا يجد جزاءكم`
+- **Result:** `من يعمل خيرا يجد جزاءكم`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.12. Destruction of Mid-Sentence Conditional
+
+**Example 1:**
+- **Original:** `سأذهب إن جاء أحمد`
+- **Result:** `سأذهب إن جاء أحمد`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `سأنجح إن ذاكرت`
+- **Result:** `سأنجح إن ذاكرت`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.13. Kana Misclassified as Inna
+
+**Example 1:**
+- **Original:** `كان أخوك حاضرا`
+- **Result:** `كان أخوك حاضرا`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `كان أبوك مريضا`
+- **Result:** `كان أبوك مريضا`
+- **Status:** ⚠️ Unchanged
+
+
+### 1.14. Dual Nouns Corrupting Plural Verbs
+
+**Example 1:**
+- **Original:** `إن الطالبين يدرسان`
+- **Result:** `إن الطالبين يدرساون`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `إن المعلمين يعملان`
+- **Result:** `إن المعلمين يعملاون`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+## 2. Spelling Bugs
+
+
+### 2.1. Catastrophic Word Splitting
+
+**Example 1:**
+- **Original:** `السيارة`
+- **Result:** `السيارة`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `فالاستقلال`
+- **Result:** `فالاستقلال`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.2. Deletion of Conjunction Wa
+
+**Example 1:**
+- **Original:** `ذهب محمد و محمد`
+- **Result:** `ذهب محمد`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `رأيت قطة و قطة`
+- **Result:** `رأيت قطة`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+### 2.3. Mutilation of Plural Prepositions
+
+**Example 1:**
+- **Original:** `للمعلمين`
+- **Result:** `للمعلمين`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `بالمهندسين`
+- **Result:** `بالمهندسين`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.4. Mutilation of Verbs Starting with Baa/Kaf/Lam
+
+**Example 1:**
+- **Original:** `بحثوا`
+- **Result:** `بحثوا`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `كتبوا`
+- **Result:** `كتبوا`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.5. Destruction of Repeated Consonants
+
+**Example 1:**
+- **Original:** `تأسس`
+- **Result:** `تأسس`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `محققة`
+- **Result:** `محققة`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.6. Destruction of Trailing Hamza
+
+**Example 1:**
+- **Original:** `شيء`
+- **Result:** `شيء`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `جزء`
+- **Result:** `جزء`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.7. Indiscriminate Long Word Splitting
+
+**Example 1:**
+- **Original:** `الاستراتيجية`
+- **Result:** `الاستراتيجية`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `الديمقراطية`
+- **Result:** `الديمقراطية`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.8. Corrupted Tatweel Removal
+
+**Example 1:**
+- **Original:** `مـحـمـد`
+- **Result:** `محمد`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `الـسـلام`
+- **Result:** `السلام`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+### 2.9. Blind Hamza Normalization
+
+**Example 1:**
+- **Original:** `ﻹدارة`
+- **Result:** `لإدارة`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `ﻷحمد`
+- **Result:** `لأحمد`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+### 2.10. Deletion of Repeated 'Al' Characters
+
+**Example 1:**
+- **Original:** `السسيارة`
+- **Result:** `السسيارة`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `الششمس`
+- **Result:** `الششمس`
+- **Status:** ⚠️ Unchanged
+
+
+### 2.11. Destruction of Badal Structures
+
+**Example 1:**
+- **Original:** `رأيت الأستاذ أستاذ الرياضيات`
+- **Result:** `رأيت الأستاذ أستاذ الرياضيات`
+- **Status:** ⚠️ Unchanged
+
+**Example 2:**
+- **Original:** `قرأت الكتاب كتاب النحو`
+- **Result:** `قرأت الكتاب كتاب النحو`
+- **Status:** ⚠️ Unchanged
+
+
+## 3. Punctuation Bugs
+
+
+### 3.1. Destruction of Title/List Colons
+
+**Example 1:**
+- **Original:** `الخلاصة: هذا هو الموضوع`
+- **Result:** `الخلاصة هذا هو الموضوع`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `الفصل الأول: البداية`
+- **Result:** `الفصل الأول البداية`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+### 3.2. Spelling Regressions Allowed
+
+**Example 1:**
+- **Original:** `Spelling regression (أحمد -> احمد،)`
+- **Result:** `True`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `Spelling regression (مدرسة -> مدرسه.)`
+- **Result:** `True`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+### 3.3. Colon Relocation Changing Meaning
+
+**Example 1:**
+- **Original:** `قال: المعلم قادم`
+- **Result:** `قال المعلم: قادم`
+- **Status:** ❌ Failed (Bug Triggered)
+
+**Example 2:**
+- **Original:** `صرح: الوزير مشغول`
+- **Result:** `صرح الوزير: مشغول`
+- **Status:** ❌ Failed (Bug Triggered)
+
+
+## 4. Global Structural Bugs
+
+
+### 4.1. Punctuation Masking Dictionary Lookups
+
+**Example 1:**
+- **Original:** `اعلن.`
+- **Result:** `اعلن.`
+- **Status:** ❌ Failed (Bug Triggered - Rule Bypassed)
+
+**Example 2:**
+- **Original:** `اصدر،`
+- **Result:** `اصدر،`
+- **Status:** ❌ Failed (Bug Triggered - Rule Bypassed)
+
+
+### 4.2. Unrestrained Number Hallucination
+
+**Example 1:**
+- **Original:** `النص بدون أرقام`
+- **Result:** `hallucinated 123`
+- **Status:** ❌ Failed (Bug Triggered - Number Allowed)
+
+**Example 2:**
+- **Original:** `لا يوجد رقم هنا`
+- **Result:** `hallucinated 123`
+- **Status:** ❌ Failed (Bug Triggered - Number Allowed)

check_dividers.py

@@ -0,0 +1,5 @@
+import re
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+matches = re.findall(r'<div class="h-[67] w-\[1\.5px\] bg-gray-300 dark:bg-gray-700 rounded-full"></div>', html)
+print(f'Found {len(matches)} dividers.')

check_fp.py

@@ -0,0 +1,6 @@
+import json
+with open('tests/phase10/reports/phase10_results.json', 'r', encoding='utf-8') as f:
+    d = json.load(f)
+    for r in d['results']:
+        if r['pipeline_verdict'] == 'FP' and r['dataset'] == 'hallucination':
+            print(f"{r['id']}: {r['pipeline_detail']}")

debug.py

@@ -0,0 +1,19 @@
+import base64
+import re
+
+with open('LOGOS/icon128.png', 'rb') as img:
+    data_uri = 'data:image/png;base64,' + base64.b64encode(img.read()).decode('utf-8')
+
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+
+match = re.search(r'src="data:image/png;base64,([A-Za-z0-9+/=]+)"', html)
+if match:
+    old_b64 = match.group(1)
+    print('Match found!')
+    if old_b64 == data_uri.split(',')[1]:
+        print('The base64 in index.html is EXACTLY THE SAME as LOGOS/icon128.png')
+    else:
+        print('They are DIFFERENT. Length old:', len(old_b64), 'Length new:', len(data_uri.split(',')[1]))
+else:
+    print('No match found for the regex!')

extension/IMPLEMENTATION_CHANGELOG.md

@@ -1,151 +0,0 @@
-# BAYAN Extension — Implementation Changelog
-
-> **Session date:** 2026-06-27
-> **Scope:** Chrome extension only (`extension/`). No backend, website, or Supabase changes.
-> **Source of work:** Implementation of the extension-facing items from `BAYAN_COMPLETE_AUDIT.md`.
-
----
-
-## ⚠️ Important context
-
-While this work was in progress, **a second process was editing the same extension files in parallel**, implementing the same audit plan. To avoid corrupting files, this session was scoped to the **untouched gaps**. As a result, the changes below fall into two groups:
-
-- **Authored in this session** — Phase 5 (TXT export), Phase 6 (English locale, `all_frames`, bug fixes B4/U1), and the **completion of the broken Phase 4** (inline ghost-text autocomplete).
-- **Verified only** — Phases 1–3 (API client functions, popup/side-panel feature tabs) were written by the concurrent process; this session confirmed they are correct against the real backend (`src/app.py`) but did not author them.
-
-This changelog documents **what was authored in this session**.
-
----
-
-## Files changed
-
-| File | Type | What changed |
-|------|------|--------------|
-| `extension/content-inline.js` | **Edited** | Implemented the missing inline ghost-text autocomplete engine (Phase 4); overlay reposition on resize (B4); tooltip viewport clamping (U1) |
-| `extension/content-inline.css` | **Edited** | Styles for the ghost-text mirror + muted suffix |
-| `extension/popup.js` | **Edited** | "Download as TXT" buttons for corrected text + summary (Phase 5 / H3) |
-| `extension/sidepanel/sidepanel.js` | **Edited** | "Download as TXT" buttons for corrected text + summary (Phase 5 / H3) |
-| `extension/manifest.json` | **Edited** | `all_frames: true` for iframe editor support (M2) |
-| `extension/_locales/en/messages.json` | **Created** | English locale (L1) |
-
-> `extension/shared/bayan-api.js`, `extension/popup.html`, `extension/sidepanel/sidepanel.html`, and the dialect/quran/autocomplete handlers in `popup.js` / `sidepanel.js` were authored by the **concurrent process**, not this session. They are listed in the "Verified only" section at the end.
-
----
-
-## 1. Phase 4 — Inline ghost-text autocomplete (audit item H2)
-
-**File:** `extension/content-inline.js`, `extension/content-inline.css`
-
-### The bug this fixed (regression)
-
-The concurrent process had added ghost-text **state variables** and a **call** to `scheduleGhost()` on every keystroke (in `onFieldInput`), but **never defined `scheduleGhost` or any ghost logic**. The content script therefore threw:
-
-```
-ReferenceError: scheduleGhost is not defined
-```
-
-…on **every keystroke in any editable field**, which silently broke inline analysis on every website. This was an active regression, not just a missing feature.
-
-### What was implemented
-
-A Tab-to-accept ghost-text engine for 3rd-party `<textarea>` / `<input>` fields, ported from the website's `src/js/autocomplete.js` behavior:
-
-| Function | Role |
-|----------|------|
-| `ghostEligible()` | Only fires when the caret is collapsed **at the end** of the field, ≥3 chars, Arabic present |
-| `scheduleGhost()` | 450 ms debounce; clears any stale ghost first |
-| `fetchGhost(ctx)` | `POST {BAYAN.API_BASE}/api/autocomplete` with `{ context, n: 1 }`; staleness-guarded |
-| `showGhost(base, suffix)` | Transparent-mirror overlay (same technique as the error overlay) painting the completion in muted grey at the caret |
-| `acceptGhost()` | **Tab** appends the suggestion (+leading space if needed), moves caret to end, dispatches `input` to re-trigger analysis + next-word ghost |
-| `clearGhost()` | Teardown — cancels timer, removes overlay, resets state |
-| `syncGhostScroll()` | Keeps the ghost aligned with field scroll |
-| `onFieldKeydown(e)` | **Tab** = accept, **Escape** = dismiss |
-
-### Wiring added
-- `keydown` → `onFieldKeydown` registered in `attachField()`, removed in `detachField()`.
-- `clearGhost()` added to `detachField()` teardown.
-- `syncOverlay()` now also calls `syncGhostScroll()`.
-- The window `scroll` handler now repositions the ghost overlay (alongside the error overlay).
-
-### Why a direct `fetch` (not `bayanAutocomplete`)
-The content script only loads `shared/constants.js`, `shared/analysis-controller.js`, and `content-inline.js` — **not** `bayan-api.js`/`config.js`. So `bayanAutocomplete()`/`CONFIG` are out of scope. `BAYAN.API_BASE` (from `constants.js`) **is** in scope, and `host_permissions` already covers that host, so the call is made directly.
-
-### Safety properties
-- Overlay-only: never mutates the field while typing — only on explicit **Tab**.
-- Best-effort: network/render errors are swallowed; the analysis path is never affected.
-- Respects protected sites and is gated to `textarea`/`input` only.
-
-### CSS added (`content-inline.css`)
-```css
-.bayan-il-ghost        { background: transparent !important; pointer-events: none !important; }
-.bayan-il-ghost-suffix { color: rgba(120,120,130,0.75) !important; opacity: 0.9; }
-```
-(The suffix needs an explicit color because the mirror parent is `color: transparent`.)
-
----
-
-## 2. Phase 5 — Download corrected text / summary as TXT (audit item H3)
-
-**Files:** `extension/popup.js`, `extension/sidepanel/sidepanel.js`
-
-- Added a self-contained `downloadTxt(text, filename)` helper (Blob + object URL + cleanup).
-- Download buttons are **injected programmatically** next to the existing copy buttons — no HTML edits, to minimize conflict with the concurrent writer.
-- Popup: downloads `bayan-corrected.txt` and `bayan-summary.txt`.
-- Side panel: same, anchored to the existing copy buttons' parent containers.
-
----
-
-## 3. Phase 6 — Polish & bug fixes
-
-### B4 — Overlay reposition on resize (`content-inline.js`)
-The window `resize` handler previously repositioned only the floating button. It now also **re-renders the error overlay** when suggestions are present, so highlights stay aligned after a viewport resize.
-
-### U1 — Tooltip viewport clamping (`content-inline.js`)
-The error tooltip previously clamped only the right edge. It now also:
-- clamps the **left** edge if it overflows,
-- **flips above** the highlighted mark when it would overflow the **bottom** of the viewport (falling back to pinning at the top edge if there's no room above).
-
-### M2 — iframe editor support (`manifest.json`)
-Added `"all_frames": true` to the content-script registration so editors inside `<iframe>` (TinyMCE, Gutenberg, etc.) are reachable.
-
-### L1 — English locale (`_locales/en/messages.json`, new file)
-Created an English `messages.json` mirroring the Arabic keys (`extName`, `extDescription`, `contextMenuCorrect`, `contextMenuSummarize`) so the extension is publishable for non-Arabic users.
-
----
-
-## Verification performed
-
-- `node --check` passed on all edited JS files: `content-inline.js`, `popup.js`, `sidepanel/sidepanel.js`, `shared/bayan-api.js`.
-- JSON validated: `manifest.json`, `_locales/en/messages.json`, `_locales/ar/messages.json`.
-- Confirmed all eight ghost-text functions are defined, so the previously-orphaned `scheduleGhost()` call now resolves.
-
-### NOT verified (no runtime/browser test in this session)
-- The extension was **not** loaded in Chrome. Caret-position rendering of ghost text across real sites, the new tabs, downloads, and iframe behavior are unverified by execution. See the testing guide below.
-
----
-
-## How to test (manual, in Chrome)
-
-The backend (`bayan10-bayan-api.hf.space`) is already live, so no local server is needed.
-
-1. **Load:** `chrome://extensions` → enable **Developer mode** → **Load unpacked** → select `extension/`. Confirm no errors on the card; open the **service worker** console and confirm it's clean.
-2. **Popup tabs:** open the popup → expect 5 tabs (تصحيح · تلخيص · لهجة · قرآن · إكمال). Exercise each.
-3. **Export:** analyze text → click the download (↓) icon in the result header → `bayan-corrected.txt` downloads.
-4. **Ghost text (H2):** in a plain `<textarea>` (e.g. `extension/tests/test_inline.html`), type a few Arabic words ending in a space → grey ghost text appears after ~0.5 s → **Tab** inserts, **Esc** dismisses. Confirm **no** `scheduleGhost is not defined` error in the page console.
-5. **Regression checks:** resize the window with errors highlighted (B4 — stays aligned); click an error near the bottom (U1 — tooltip flips up); try a textarea inside an iframe (M2).
-
----
-
-## Authored by the concurrent process (verified, not authored here)
-
-For completeness — these extension changes exist but were **not** written in this session:
-
-- `extension/shared/bayan-api.js` — `bayanDialect()`, `bayanQuran()`, `bayanAutocomplete()` (audit B3).
-- `extension/popup.html` + `extension/popup.js` — dialect / quran / autocomplete tabs + handlers (U3).
-- `extension/sidepanel/sidepanel.html` + `extension/sidepanel/sidepanel.js` — same three feature tabs + handlers.
-
----
-
-## Out of scope (NOT done — still open from the 52-item audit)
-
-This session covered extension items only. The following remain **open**: all Critical/Security backend items (C1–C3, S1–S7), extension auth (H1), the `002_documents.sql` migration (H4), the `app.py` split (H5), and the bulk of the Medium/Low backend, website, and performance items. See `BAYAN_COMPLETE_AUDIT.md` for the full list.

extension/PLAN_apply_contextmenu_reanalysis.md

@@ -1,262 +0,0 @@
-# BAYAN Extension — Implementation Plan: Apply-to-Field, Context Menu Features & Smart Re-Analysis
-
-> **For:** the coding agent implementing these changes.
-> **Scope:** Chrome extension only (`extension/`). No backend changes.
-> **Read this whole file before editing.** Each change lists the exact files, the current behavior, the target behavior, and the wiring required. Implement the three changes in order — Change 1 builds the messaging channel that Change 3 reuses.
-
----
-
-## Background: how the pieces currently connect
-
-- **`content-inline.js`** — injected into every page. Detects editable fields (`textarea`, `input`, `contenteditable`), analyzes them, and renders an overlay + tooltip. It **already writes corrections back** to the page field via `applyFix()`. It currently has **no `chrome.runtime.onMessage` listener** (it only *sends* messages).
-- **`background.js`** — service worker. Owns the context menu and the API bridge. Registers exactly two menu items: `bayan-correct`, `bayan-summarize`. On click it opens the side panel and stashes `{contextAction, contextText}` in `chrome.storage.session`.
-- **`sidepanel/sidepanel.js`** — reads that stashed context on open, switches to the matching tab, and auto-runs. It has `correct`, `summarize`, `dialect`, `quran`, `autocomplete` tabs and handlers. Its apply / apply-all buttons currently **only edit the side panel's own textarea** — they do **not** touch the page field.
-- **`popup.js`** — same apply logic as the side panel, also only editing its own textarea.
-
-Key gap for Changes 1 & 3: **the panel surfaces have no link back to the page field the text came from.** We must establish that link.
-
----
-
-## CHANGE 1 — "Apply" / "Apply all" writes the result into the user's actual text field
-
-### Current behavior
-- **Inline tooltip apply** (`content-inline.js` → `applyFix`): ✅ already writes back to the page field and dispatches an `input` event. No change needed here.
-- **Side panel & popup apply / apply-all**: ❌ only mutate the panel's own `<textarea id="input-text">`. The user's text field on the page is untouched.
-
-### Target behavior
-When the user clicks **Apply** (single suggestion) or **Apply all** in the **side panel** (and popup where applicable), the corrected text is written into the **original page field** that the text came from — replacing the selection, or the whole field if appropriate — and an `input` event is dispatched so the host page registers the change.
-
-### Why this needs a messaging channel
-The side panel is a separate document; it cannot touch the page DOM directly. It must send a message → background → content script → content script writes into the field.
-
-### Implementation
-
-**1.1 — `content-inline.js`: track the "source field" and expose a write-back handler**
-
-- Add module state: `let lastInteractedField = null;`
-- In `attachField(field)` (or `focusin`), set `lastInteractedField = field;` whenever a real editable field is focused. (Keep `activeField` semantics as-is; `lastInteractedField` persists even after focus moves to the side panel, which `activeField`/`detachField` would clear.)
-- When the FAB sends `OPEN_SIDEPANEL` (existing code ~line 548), also include a stable identifier so we can re-find the field. Simplest robust approach: **tag the field** with a data attribute when opening the panel:
-  ```js
-  // before sending OPEN_SIDEPANEL
-  if (lastInteractedField) lastInteractedField.dataset.bayanSource = '1';
-  ```
-- Add a **`chrome.runtime.onMessage` listener** (the content script currently has none):
-  ```js
-  chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-    if (msg.type === 'BAYAN_WRITE_BACK') {
-      const field = lastInteractedField
-        || document.querySelector('[data-bayan-source="1"]')
-        || (isEditableField(document.activeElement) ? document.activeElement : null);
-      if (!field) { sendResponse({ ok: false, reason: 'no_field' }); return true; }
-      writeTextToField(field, msg.text, msg.mode); // mode: 'replaceAll' | 'replaceSelection'
-      sendResponse({ ok: true });
-      return true;
-    }
-    return false;
-  });
-  ```
-- Implement `writeTextToField(field, text, mode)`:
-  - For `textarea`/`input`: if `mode === 'replaceSelection'` and `selectionStart !== selectionEnd`, splice into `field.value` at the selection; else set `field.value = text`. Then `field.setSelectionRange(end, end)` and dispatch `new Event('input', { bubbles: true })`.
-  - For `contenteditable`: focus the field and use `document.execCommand('insertText', false, text)` when there's a live selection inside it; otherwise set `field.textContent = text` and dispatch `input`. (Mirror the overlay-safe approach already used in `applyFix`.)
-  - **Set the suppression flag from Change 3** right before dispatching `input` (see Change 3) when the write came from a non-correction model. For Change 1's correction apply-back, do **not** suppress — corrected text re-analyzing is harmless/expected.
-  - Clear `data-bayan-source` after writing.
-
-**1.2 — `background.js`: relay panel → content script**
-
-- Add a message handler branch:
-  ```js
-  if (message.type === 'WRITE_BACK_TO_PAGE') {
-    // forward to the active tab's content script
-    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      const tab = tabs[0];
-      if (!tab) { sendResponse({ ok: false }); return; }
-      chrome.tabs.sendMessage(tab.id, {
-        type: 'BAYAN_WRITE_BACK', text: message.text, mode: message.mode || 'replaceAll', source: message.source
-      }, (resp) => sendResponse(resp || { ok: false }));
-    });
-    return true; // async
-  }
-  ```
-
-**1.3 — `sidepanel/sidepanel.js`: send write-back after apply / apply-all**
-
-- Add a helper:
-  ```js
-  function writeBackToPage(text, mode = 'replaceAll', source = 'correct') {
-    chrome.runtime.sendMessage(
-      { type: 'WRITE_BACK_TO_PAGE', text, mode, source },
-      (resp) => {
-        if (resp && resp.ok) showToast('✓ تم تطبيق التغييرات في الصفحة');
-        else showToast('تعذّر الكتابة في الصفحة — انسخ النص يدوياً');
-      }
-    );
-  }
-  ```
-- In the existing **apply-all** handler (after `analyzedText = applyAllPatches(...)`), call `writeBackToPage(analyzedText, 'replaceAll', 'correct');`.
-- In the single-suggestion **apply** path (after `applyAndRebase` updates `analyzedText`), call `writeBackToPage(analyzedText, 'replaceAll', 'correct');`. (Whole-field replace is simplest and avoids offset drift between the panel copy and the live field.)
-
-**1.4 — `popup.js`** (optional, lower priority)
-- The popup closes when it loses focus, so write-back is less reliable there. Apply the same `writeBackToPage` helper **only if** product wants it; otherwise leave the popup apply editing its own textarea and rely on copy/download. Document the decision in a comment.
-
-### Acceptance criteria
-- Select/focus a page `<textarea>`, open the side panel via the FAB, click **Apply all** → the page textarea content is replaced with the corrected text and the host page sees an `input` event.
-- Works for a single **Apply** too.
-- If the source field can't be found, the user gets a clear toast (no silent failure).
-
----
-
-## CHANGE 2 — Add "لهجات" and "قرآن" to the right-click context menu
-
-### Current behavior
-`background.js` registers only:
-- `bayan-correct` → "تصحيح مع بيان"
-- `bayan-summarize` → "تلخيص مع بيان"
-
-### Target behavior
-The selection context menu shows **four** Bayan items:
-- تصحيح مع بيان (existing)
-- تلخيص مع بيان (existing)
-- **تحويل اللهجة إلى الفصحى مع بيان** (new)
-- **تدقيق الآية مع بيان** (new)
-
-Clicking a new item opens the side panel, switches to the matching tab, fills the selected text, and auto-runs that model.
-
-### Implementation
-
-**2.1 — `background.js`**
-- Extend the actions map:
-  ```js
-  const ACTIONS = { CORRECT: 'correct', SUMMARIZE: 'summarize', DIALECT: 'dialect', QURAN: 'quran' };
-  ```
-- In `chrome.runtime.onInstalled` add two `chrome.contextMenus.create(...)` calls:
-  ```js
-  chrome.contextMenus.create({ id: 'bayan-dialect',
-    title: chrome.i18n.getMessage('contextMenuDialect') || 'تحويل اللهجة إلى الفصحى مع بيان',
-    contexts: ['selection'] });
-  chrome.contextMenus.create({ id: 'bayan-quran',
-    title: chrome.i18n.getMessage('contextMenuQuran') || 'تدقيق الآية مع بيان',
-    contexts: ['selection'] });
-  ```
-- In `chrome.contextMenus.onClicked`, add routing:
-  ```js
-  if (info.menuItemId === 'bayan-dialect')  action = ACTIONS.DIALECT;
-  if (info.menuItemId === 'bayan-quran')    action = ACTIONS.QURAN;
-  ```
-  The rest of the handler (open side panel + stash context) already works generically.
-
-**2.2 — `sidepanel/sidepanel.js`** — handle the two new context actions on pickup
-- The side panel already reads `contextAction` and, for `correct`/`summarize`, switches tab + auto-runs. Extend **both** pickup paths (`tryPickupContext` AND the `storage.onChanged` listener) to handle the new actions:
-  ```js
-  } else if (action === 'dialect') {
-    dialectInput.value = text; updateCounts(dialectInput, dialectCharCount, null);
-    document.querySelector('[data-tab="dialect"]')?.click();
-    setTimeout(() => btnDialect.click(), 120);
-  } else if (action === 'quran') {
-    quranInput.value = text; updateCounts(quranInput, quranCharCount, null);
-    document.querySelector('[data-tab="quran"]')?.click();
-    setTimeout(() => btnQuran.click(), 120);
-  }
-  ```
-  (Hoist `dialectInput`, `btnDialect`, `quranInput`, `btnQuran`, etc. so they're in scope of the pickup functions, or wrap the pickup dispatch in a small `runContextAction(action, text)` function declared after all element refs.)
-- Update the `TAB` constant if it's used for validation: `const TAB = { CORRECT:'correct', SUMMARIZE:'summarize', DIALECT:'dialect', QURAN:'quran' };`
-
-**2.3 — Locales** — add the two new menu strings
-- `_locales/ar/messages.json`:
-  ```json
-  "contextMenuDialect": { "message": "تحويل اللهجة إلى الفصحى مع بيان", "description": "Context menu: dialect→MSA" },
-  "contextMenuQuran":   { "message": "تدقيق الآية مع بيان", "description": "Context menu: Quran verify" }
-  ```
-- `_locales/en/messages.json`:
-  ```json
-  "contextMenuDialect": { "message": "Convert dialect to MSA with Bayan", "description": "Context menu: dialect→MSA" },
-  "contextMenuQuran":   { "message": "Verify verse with Bayan", "description": "Context menu: Quran verify" }
-  ```
-
-### Acceptance criteria
-- Right-clicking selected Arabic text shows all four Bayan items.
-- "تحويل اللهجة…" opens the side panel on the **لهجة** tab with the text filled and converted.
-- "تدقيق الآية…" opens the side panel on the **قرآن** tab with the text filled and checked.
-- Existing correct/summarize items are unchanged.
-
----
-
-## CHANGE 3 — After applying summarize / dialect / quran output into a field, do NOT auto-run the correction model on it
-
-### The problem
-`content-inline.js` analyzes editable fields on every keystroke and on programmatic `input` events. If text written back into the field came from the **summarize**, **dialect**, or **quran** model (Change 1's write-back for those flows), the correction pipeline would immediately re-analyze it — which the user does **not** want (a summary/MSA/verse is the intended final text, not something to "correct").
-
-> Note: for the **correction** apply-back (Change 1), re-analysis is fine/expected and must stay enabled.
-
-### Target behavior
-When a write-back originates from a **non-correction** model (`summarize` / `dialect` / `quran`), the content script must **suppress correction analysis** for that field until the **user makes a genuine manual edit** (a real keystroke), at which point normal analysis resumes.
-
-### Implementation (`content-inline.js`)
-
-- Add module state:
-  ```js
-  let analysisSuppressed = false; // true after non-correction model write-back
-  ```
-- Extend `writeTextToField(field, text, mode)` (from Change 1) to accept the `source`/`mode` info, and:
-  - If the write-back `source` is one of `summarize|dialect|quran`, set `analysisSuppressed = true;` **before** dispatching the `input` event.
-  - If the `source` is `correct` (or inline correction apply), leave `analysisSuppressed = false`.
-- In `onFieldInput()` (the input handler), **gate the analysis** but distinguish programmatic vs. human input. The cleanest signal: the synthetic `input` event we dispatch is not trusted. So:
-  ```js
-  function onFieldInput(e) {
-    if (paused || !activeField) return;
-
-    const programmatic = e && e.isTrusted === false;
-    // A genuine user keystroke clears suppression and re-enables analysis.
-    if (!programmatic && analysisSuppressed) analysisSuppressed = false;
-
-    // Ghost-text autocomplete still runs (it's not the correction model).
-    scheduleGhost();
-
-    if (analysisSuppressed) {       // model output just written — skip correction
-      clearHighlights();
-      updateBadge(0);
-      return;
-    }
-    // ...existing analysis path unchanged...
-  }
-  ```
-  - Ensure `onFieldInput` is registered so it receives the event object (it's added via `field.addEventListener('input', onFieldInput)` — the handler already receives `e`).
-  - The write-back's dispatched event uses `new Event('input', {bubbles:true})`, whose `isTrusted` is `false` — this is the reliable discriminator between "we wrote this" and "the user typed."
-- Edge cases to handle:
-  - **Badge state:** when suppressed, show the clean/✓ badge (0), not the analyzing spinner.
-  - **Decide on ghost-text:** keep autocomplete ghost active (it's a separate, opt-in feature) OR also suppress it for summarize/quran outputs if product prefers a fully "frozen" result. Default: keep ghost on; add a one-line comment noting the choice.
-  - **Re-enable correctness:** the very next real keystroke must restore analysis. Verify by typing one character after a dialect write-back → underlines should come back.
-
-### Acceptance criteria
-- Apply a **dialect** (or summarize/quran) result into a page field via Change 1 → the field shows the model output with **no correction underlines** and the FAB badge is not in an error/analyzing state.
-- Type one character in that field → correction analysis resumes normally.
-- Applying a **correction** result still re-analyzes as before (suppression must NOT trigger for `source: 'correct'`).
-
----
-
-## Suggested implementation order & testing
-
-1. **Change 2** first (self-contained, no messaging) — fastest win, easy to verify.
-2. **Change 1** (build the messaging channel: content-script `onMessage` + `writeTextToField` + background relay + side-panel `writeBackToPage`).
-3. **Change 3** (reuses Change 1's `writeTextToField` + `source` flag).
-
-### Manual test pass (Chrome, `chrome://extensions` → Load unpacked → `extension/`)
-- Reload the extension after editing the service worker / manifest (context menus only re-register on install/update — use the reload button).
-- **Change 2:** right-click selected Arabic text → confirm 4 items → click لهجات and قرآن → correct tab opens + auto-runs.
-- **Change 1:** focus a page `<textarea>`, open side panel via FAB, Apply / Apply all → page field updates + host page sees the change.
-- **Change 3:** send a dialect result back to the field → no correction underlines → type one char → underlines return. Confirm a correction apply-back still re-analyzes.
-
-### Files touched (summary)
-| File | Change 1 | Change 2 | Change 3 |
-|------|:---:|:---:|:---:|
-| `extension/content-inline.js` | ✅ onMessage + `writeTextToField` + `lastInteractedField` | — | ✅ `analysisSuppressed` gate |
-| `extension/background.js` | ✅ `WRITE_BACK_TO_PAGE` relay | ✅ 2 menu items + routing | — |
-| `extension/sidepanel/sidepanel.js` | ✅ `writeBackToPage` on apply/apply-all | ✅ pickup for dialect/quran | ✅ pass correct `source` |
-| `extension/popup.js` | ⚠️ optional | — | — |
-| `extension/_locales/ar/messages.json` | — | ✅ 2 strings | — |
-| `extension/_locales/en/messages.json` | — | ✅ 2 strings | — |
-
-### Guardrails
-- Don't break the existing inline `applyFix` write-back — it already works; reuse its patterns, don't replace it.
-- All cross-document communication goes panel → `background.js` → content script. The side panel must never assume direct page DOM access.
-- Use `event.isTrusted === false` (not a custom flag on the event) to detect programmatic input — it's tamper-proof and requires no host-page cooperation.
-- Keep every new code path guarded (`if (!field) ...`, `resp || {ok:false}`) so a missing field or closed tab degrades to a toast, never an uncaught error.

extension/content-inline.css

@@ -7,25 +7,25 @@
 /* ── Error highlights (contenteditable + overlay) ── */
 
 .bayan-il-spelling {
-  background: rgba(239, 68, 68, 0.12) !important;
-  border-bottom: 2px solid #ef4444 !important;
+  background: rgba(232, 138, 138, 0.12) !important;
+  border-bottom: 2px solid #E88A8A !important;
   border-radius: 2px !important;
   cursor: pointer !important;
   transition: background 150ms ease !important;
 }
 .bayan-il-spelling:hover {
-  background: rgba(239, 68, 68, 0.25) !important;
+  background: rgba(232, 138, 138, 0.25) !important;
 }
 
 .bayan-il-grammar {
-  background: rgba(245, 158, 11, 0.12) !important;
-  border-bottom: 2px solid #f59e0b !important;
+  background: rgba(228, 179, 90, 0.12) !important;
+  border-bottom: 2px solid #E4B35A !important;
   border-radius: 2px !important;
   cursor: pointer !important;
   transition: background 150ms ease !important;
 }
 .bayan-il-grammar:hover {
-  background: rgba(245, 158, 11, 0.25) !important;
+  background: rgba(228, 179, 90, 0.25) !important;
 }
 
 .bayan-il-punctuation {
@@ -49,7 +49,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #1a1a24 !important;
+  background: #1A1D26 !important;
   border: 1px solid #3a3a4d !important;
   border-radius: 50% !important;
   cursor: pointer !important;
@@ -68,8 +68,8 @@
 }
 
 .bayan-il-fab:hover {
-  border-color: #6366f1 !important;
-  box-shadow: 0 2px 14px rgba(99, 102, 241, 0.3) !important;
+  border-color: #6BA3E0 !important;
+  box-shadow: 0 2px 14px rgba(107, 163, 224, 0.3) !important;
 }
 
 /* ── Badge (on FAB) ── */
@@ -89,27 +89,27 @@
   border-radius: 8px !important;
   padding: 0 4px !important;
   line-height: 1 !important;
-  border: 1.5px solid #1a1a24 !important;
+  border: 1.5px solid #1A1D26 !important;
   color: white !important;
-  background: #6b6b80 !important;
+  background: #8A939F !important;
 }
 
 .bayan-il-badge--clean {
-  background: #22c55e !important;
+  background: #6BC98A !important;
 }
 
 .bayan-il-badge--errors {
-  background: #ef4444 !important;
+  background: #E88A8A !important;
   animation: bayan-il-pulse 600ms ease-out !important;
 }
 
 .bayan-il-badge--analyzing {
-  background: #6366f1 !important;
+  background: #6BA3E0 !important;
   animation: bayan-il-spin 1s linear infinite !important;
 }
 
 .bayan-il-badge--paused {
-  background: #6b6b80 !important;
+  background: #8A939F !important;
   opacity: 0.7 !important;
 }
 
@@ -132,14 +132,14 @@
   z-index: 2147483647 !important;
   min-width: 200px;
   max-width: 320px;
-  background: #1a1a24 !important;
+  background: #1A1D26 !important;
   border: 1px solid #3a3a4d !important;
   border-radius: 10px !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(107, 163, 224, 0.1) !important;
   overflow: hidden;
-  font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
+  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
   font-size: 13px !important;
-  color: #f0f0f5 !important;
+  color: #ECEEF2 !important;
   opacity: 0;
   transform: translateY(4px);
   transition: opacity 150ms ease, transform 150ms ease !important;
@@ -155,7 +155,7 @@
   align-items: center !important;
   justify-content: space-between !important;
   padding: 8px 12px !important;
-  background: #22222e !important;
+  background: #242833 !important;
   border-bottom: 1px solid #2d2d3d !important;
 }
 
@@ -168,12 +168,12 @@
 }
 
 .bayan-il-badge-spelling {
-  background: rgba(239, 68, 68, 0.15) !important;
-  color: #ef4444 !important;
+  background: rgba(232, 138, 138, 0.15) !important;
+  color: #E88A8A !important;
 }
 .bayan-il-badge-grammar {
-  background: rgba(245, 158, 11, 0.15) !important;
-  color: #f59e0b !important;
+  background: rgba(228, 179, 90, 0.15) !important;
+  color: #E4B35A !important;
 }
 .bayan-il-badge-punctuation {
   background: rgba(107, 201, 138, 0.15) !important;
@@ -183,14 +183,14 @@
 .bayan-il-tooltip-close {
   background: none !important;
   border: none !important;
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   cursor: pointer !important;
   font-size: 14px !important;
   padding: 2px !important;
   line-height: 1 !important;
 }
 .bayan-il-tooltip-close:hover {
-  color: #f0f0f5 !important;
+  color: #ECEEF2 !important;
 }
 
 .bayan-il-tooltip-body {
@@ -203,18 +203,18 @@
 }
 
 .bayan-il-tooltip-original {
-  color: #ef4444 !important;
+  color: #E88A8A !important;
   text-decoration: line-through !important;
-  text-decoration-color: rgba(239, 68, 68, 0.4) !important;
+  text-decoration-color: rgba(232, 138, 138, 0.4) !important;
 }
 
 .bayan-il-tooltip-arrow {
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   font-size: 12px !important;
 }
 
 .bayan-il-tooltip-correction {
-  color: #22c55e !important;
+  color: #6BC98A !important;
   font-weight: 600 !important;
 }
 
@@ -223,7 +223,7 @@
   gap: 6px !important;
   padding: 8px 12px !important;
   border-top: 1px solid #2d2d3d !important;
-  background: #22222e !important;
+  background: #242833 !important;
 }
 
 .bayan-il-tooltip-apply {
@@ -231,9 +231,9 @@
   padding: 5px 12px !important;
   border: none !important;
   border-radius: 6px !important;
-  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
+  background: linear-gradient(135deg, #6BA3E0, #5A8FCA) !important;
   color: white !important;
-  font-family: 'Segoe UI', Tahoma, sans-serif !important;
+  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
   font-size: 12px !important;
   font-weight: 600 !important;
   cursor: pointer !important;
@@ -241,7 +241,7 @@
 }
 .bayan-il-tooltip-apply:hover {
   transform: translateY(-1px) !important;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(107, 163, 224, 0.3) !important;
 }
 
 .bayan-il-tooltip-ignore {
@@ -249,15 +249,15 @@
   border: 1px solid #3a3a4d !important;
   border-radius: 6px !important;
   background: transparent !important;
-  color: #9898ad !important;
-  font-family: 'Segoe UI', Tahoma, sans-serif !important;
+  color: #B4BBC6 !important;
+  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
   font-size: 12px !important;
   cursor: pointer !important;
   transition: background 150ms ease !important;
 }
 .bayan-il-tooltip-ignore:hover {
-  background: #2a2a38 !important;
-  color: #f0f0f5 !important;
+  background: #2C3040 !important;
+  color: #ECEEF2 !important;
 }
 
 /* ── Textarea overlay (transparent mirror) ── */
@@ -295,13 +295,13 @@
 }
 
 .bayan-il-fab[data-bayan-theme="light"] svg path {
-    fill: #6366f1 !important;
+    fill: #6BA3E0 !important;
 }
 
 .bayan-il-tooltip[data-bayan-theme="light"] {
     background: #ffffff !important;
     border: 1px solid #e5e7eb !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(107, 163, 224, 0.1) !important;
 }
 
 .bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-header {
@@ -341,40 +341,27 @@
    ══════════════════════════════════════════════ */
 
 .bayan-il-modal-backdrop {
-  position: fixed !important;
-  inset: 0 !important;
-  z-index: 2147483646 !important;
-  background: rgba(0, 0, 0, 0.55) !important;
-  backdrop-filter: blur(4px) !important;
-  opacity: 0;
-  transition: opacity 200ms ease !important;
-  display: none;
-}
-
-.bayan-il-modal-backdrop--visible {
-  display: block !important;
-  opacity: 1 !important;
+  display: none !important;
+  pointer-events: none !important;
 }
 
 .bayan-il-modal-panel {
   position: fixed !important;
   z-index: 2147483647 !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) scale(0.95) !important;
-  width: 400px !important;
+  transform: translateY(4px);
+  width: 360px !important;
   max-width: calc(100vw - 32px) !important;
   max-height: 80vh !important;
-  background: #1a1a24 !important;
-  border: 1px solid #3a3a4d !important;
-  border-radius: 14px !important;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
+  background: #12141A !important;
+  border: 1px solid rgba(236, 238, 242, 0.09) !important;
+  border-radius: 1rem !important;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38) !important;
   overflow: hidden !important;
   display: flex !important;
   flex-direction: column !important;
-  font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
+  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
   font-size: 13px !important;
-  color: #f0f0f5 !important;
+  color: #ECEEF2 !important;
   direction: rtl !important;
   opacity: 0;
   transition: opacity 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
@@ -382,7 +369,7 @@
 
 .bayan-il-modal-panel--visible {
   opacity: 1 !important;
-  transform: translate(-50%, -50%) scale(1) !important;
+  transform: translateY(0) !important;
 }
 
 /* ── Modal Header ── */
@@ -392,7 +379,7 @@
   align-items: center !important;
   justify-content: space-between !important;
   padding: 12px 16px !important;
-  background: linear-gradient(135deg, #1a1a24 0%, rgba(99, 102, 241, 0.08) 100%) !important;
+  background: linear-gradient(135deg, #1A1D26 0%, rgba(107, 163, 224, 0.08) 100%) !important;
   border-bottom: 1px solid #2d2d3d !important;
   flex-shrink: 0 !important;
 }
@@ -406,7 +393,7 @@
 .bayan-il-modal-title {
   font-size: 16px !important;
   font-weight: 700 !important;
-  background: linear-gradient(135deg, #818cf8, #6366f1) !important;
+  background: linear-gradient(135deg, #8BB8E8, #6BA3E0) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   letter-spacing: -0.3px !important;
@@ -415,7 +402,7 @@
 .bayan-il-modal-close {
   background: none !important;
   border: none !important;
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   cursor: pointer !important;
   font-size: 18px !important;
   padding: 4px !important;
@@ -425,40 +412,70 @@
 }
 
 .bayan-il-modal-close:hover {
-  color: #f0f0f5 !important;
+  color: #ECEEF2 !important;
   background: rgba(255, 255, 255, 0.08) !important;
 }
 
-/* ── Modal Body (scrollable) ── */
+/* ── Modal Top Bar ── */
 
-.bayan-il-modal-body {
+.bayan-il-modal-top-bar {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 12px 16px !important;
+  background: linear-gradient(135deg, #1A1D26 0%, rgba(107, 163, 224, 0.08) 100%) !important;
+  border-bottom: 1px solid #2d2d3d !important;
+  flex-shrink: 0 !important;
+  cursor: grab !important;
+}
+
+.bayan-il-modal-top-bar:active {
+  cursor: grabbing !important;
+}
+
+/* ── Modal Body Scroll ── */
+
+.bayan-il-modal-body-scroll {
   overflow-y: auto !important;
-  padding: 16px !important;
   flex: 1 !important;
   min-height: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 0.75rem !important;
+  padding: 0.75rem !important;
 }
 
-.bayan-il-modal-body::-webkit-scrollbar { width: 4px !important; }
-.bayan-il-modal-body::-webkit-scrollbar-track { background: transparent !important; }
-.bayan-il-modal-body::-webkit-scrollbar-thumb { background: #3a3a4d !important; border-radius: 4px !important; }
+.bayan-il-modal-body-scroll::-webkit-scrollbar { width: 4px !important; }
+.bayan-il-modal-body-scroll::-webkit-scrollbar-track { background: transparent !important; }
+.bayan-il-modal-body-scroll::-webkit-scrollbar-thumb { background: #3a3a4d !important; border-radius: 4px !important; }
 
-/* ── Score Section ── */
+/* ── Section Title ── */
 
-.bayan-il-modal-score {
+.bayan-il-modal-section-title {
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  margin: 0 0 10px 0 !important;
+  color: #B4BBC6 !important;
+}
+
+/* ── Score Card ── */
+
+.bayan-il-modal-score-card {
   display: flex !important;
+  flex-direction: column !important;
   align-items: center !important;
-  gap: 14px !important;
-  padding: 14px !important;
-  margin-bottom: 14px !important;
-  background: #22222e !important;
-  border: 1px solid #2d2d3d !important;
+  text-align: center !important;
+  padding: 16px 12px !important;
+  background: #1A1D26 !important;
+  border: 1px solid rgba(236, 238, 242, 0.09) !important;
   border-radius: 10px !important;
 }
 
 .bayan-il-modal-score-ring {
   position: relative !important;
-  width: 80px !important;
-  height: 80px !important;
+  width: 120px !important;
+  height: 120px !important;
+  margin: 0 auto 8px !important;
   flex-shrink: 0 !important;
 }
 
@@ -466,9 +483,10 @@
   display: block !important;
   width: 100% !important;
   height: 100% !important;
+  transform: rotate(-90deg) !important;
 }
 
-.bayan-il-modal-score-ring circle:last-child {
+.bayan-il-modal-score-ring .bayan-il-score-circle {
   transition: stroke-dashoffset 800ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
 }
 
@@ -478,32 +496,31 @@
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  font-size: 22px !important;
-  font-weight: 800 !important;
-  color: #818cf8 !important;
-}
-
-.bayan-il-modal-score-meta {
-  flex: 1 !important;
-  min-width: 0 !important;
+  font-size: 28px !important;
+  font-weight: 700 !important;
+  color: #8BB8E8 !important;
 }
 
 .bayan-il-modal-score-hint {
   display: block !important;
+  text-align: center !important;
   font-size: 12px !important;
-  color: #9898ad !important;
-  margin-bottom: 8px !important;
+  color: #B4BBC6 !important;
+  margin: 0 0 8px 0 !important;
 }
 
-.bayan-il-modal-counts {
+/* ── Counts Row ── */
+
+.bayan-il-modal-counts-row {
   display: flex !important;
+  justify-content: center !important;
   gap: 10px !important;
   flex-wrap: wrap !important;
 }
 
 .bayan-il-modal-count {
   font-size: 11px !important;
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   display: flex !important;
   align-items: center !important;
   gap: 3px !important;
@@ -513,11 +530,18 @@
   font-weight: 700 !important;
 }
 
-.bayan-il-modal-count--spelling strong { color: #ef4444 !important; }
-.bayan-il-modal-count--grammar strong { color: #f59e0b !important; }
+.bayan-il-modal-count--spelling strong { color: #E88A8A !important; }
+.bayan-il-modal-count--grammar strong { color: #E4B35A !important; }
 .bayan-il-modal-count--punctuation strong { color: #6BC98A !important; }
 
-/* ── Suggestions Header ── */
+/* ── Suggestions Card ── */
+
+.bayan-il-modal-sugg-card {
+  padding: 16px 12px !important;
+  background: #1A1D26 !important;
+  border: 1px solid rgba(236, 238, 242, 0.09) !important;
+  border-radius: 10px !important;
+}
 
 .bayan-il-modal-sugg-header {
   display: flex !important;
@@ -526,15 +550,12 @@
   margin-bottom: 10px !important;
 }
 
-.bayan-il-modal-sugg-title {
-  font-size: 12px !important;
-  font-weight: 600 !important;
-  color: #9898ad !important;
-}
+/* ── Header Divider ── */
 
-.bayan-il-modal-sugg-count {
-  font-size: 11px !important;
-  color: #6b6b80 !important;
+.bayan-il-header-divider {
+  width: 1px !important;
+  height: 20px !important;
+  background: #3a3a4d !important;
 }
 
 /* ── Suggestion Cards ── */
@@ -543,29 +564,29 @@
   display: flex !important;
   flex-direction: column !important;
   gap: 8px !important;
-  margin-bottom: 14px !important;
+  max-height: 250px !important;
+  overflow-y: auto !important;
 }
 
+.bayan-il-modal-cards::-webkit-scrollbar { width: 4px !important; }
+.bayan-il-modal-cards::-webkit-scrollbar-track { background: transparent !important; }
+.bayan-il-modal-cards::-webkit-scrollbar-thumb { background: #3a3a4d !important; border-radius: 4px !important; }
+
 .bayan-il-modal-card {
   padding: 10px 12px !important;
-  background: #1a1a24 !important;
-  border: 1px solid #2d2d3d !important;
-  border-right: 4px solid #6b6b80 !important;
+  background: #1A1D26 !important;
+  border: 1px solid rgba(236, 238, 242, 0.09) !important;
   border-radius: 10px !important;
   cursor: pointer !important;
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 .bayan-il-modal-card:hover {
-  border-color: #3a3a4d !important;
-  background: #22222e !important;
-  transform: translateX(-2px) !important;
+  border-color: #6BA3E0 !important;
+  background: #242833 !important;
+  box-shadow: 0 0 0 1px rgba(107, 163, 224, 0.25) !important;
 }
 
-.bayan-il-modal-card--spelling { border-right-color: #ef4444 !important; }
-.bayan-il-modal-card--grammar { border-right-color: #f59e0b !important; }
-.bayan-il-modal-card--punctuation { border-right-color: #6BC98A !important; }
-
 .bayan-il-modal-card-badge {
   display: inline-block !important;
   padding: 2px 8px !important;
@@ -576,13 +597,13 @@
 }
 
 .bayan-il-modal-badge--spelling {
-  background: rgba(239, 68, 68, 0.15) !important;
-  color: #ef4444 !important;
+  background: rgba(232, 138, 138, 0.15) !important;
+  color: #E88A8A !important;
 }
 
 .bayan-il-modal-badge--grammar {
-  background: rgba(245, 158, 11, 0.15) !important;
-  color: #f59e0b !important;
+  background: rgba(228, 179, 90, 0.15) !important;
+  color: #E4B35A !important;
 }
 
 .bayan-il-modal-badge--punctuation {
@@ -601,18 +622,18 @@
 
 .bayan-il-modal-card-original {
   text-decoration: line-through !important;
-  text-decoration-color: rgba(239, 68, 68, 0.4) !important;
-  color: #ef4444 !important;
+  text-decoration-color: rgba(232, 138, 138, 0.4) !important;
+  color: #E88A8A !important;
   opacity: 0.75 !important;
 }
 
 .bayan-il-modal-card-arrow {
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   font-size: 12px !important;
 }
 
 .bayan-il-modal-card-fix {
-  color: #22c55e !important;
+  color: #6BC98A !important;
   font-weight: 600 !important;
 }
 
@@ -627,39 +648,39 @@
   border: 1px solid #3a3a4d !important;
   border-radius: 20px !important;
   background: transparent !important;
-  color: #9898ad !important;
-  font-family: 'Segoe UI', Tahoma, sans-serif !important;
+  color: #B4BBC6 !important;
+  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
   font-size: 11px !important;
   cursor: pointer !important;
   transition: all 200ms ease !important;
 }
 
 .bayan-il-modal-alt-chip:hover {
-  border-color: #6366f1 !important;
-  color: #f0f0f5 !important;
-  background: rgba(99, 102, 241, 0.1) !important;
+  border-color: #6BA3E0 !important;
+  color: #ECEEF2 !important;
+  background: rgba(107, 163, 224, 0.1) !important;
 }
 
 .bayan-il-modal-alt-chip--main {
-  background: #6366f1 !important;
-  border-color: #6366f1 !important;
+  background: #6BA3E0 !important;
+  border-color: #6BA3E0 !important;
   color: white !important;
 }
 
 .bayan-il-modal-alt-chip--main:hover {
-  background: #4f46e5 !important;
+  background: #5A8FCA !important;
   color: white !important;
 }
 
 .bayan-il-modal-alt-chip--keep {
   border-style: dashed !important;
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   opacity: 0.8 !important;
 }
 
 .bayan-il-modal-alt-chip--keep:hover {
   opacity: 1 !important;
-  border-color: #6b6b80 !important;
+  border-color: #8A939F !important;
   background: rgba(107, 107, 128, 0.1) !important;
 }
 
@@ -667,17 +688,18 @@
 
 .bayan-il-modal-apply-all {
   width: 100% !important;
+  margin-top: 10px !important;
   padding: 10px 18px !important;
   border: none !important;
   border-radius: 10px !important;
-  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
+  background: linear-gradient(135deg, #6BA3E0, #5A8FCA) !important;
   color: white !important;
-  font-family: 'Segoe UI', Tahoma, sans-serif !important;
+  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
   font-size: 13px !important;
   font-weight: 600 !important;
   cursor: pointer !important;
   transition: transform 150ms ease, box-shadow 150ms ease !important;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
+  box-shadow: 0 2px 8px rgba(107, 163, 224, 0.3) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -686,7 +708,7 @@
 
 .bayan-il-modal-apply-all:hover {
   transform: translateY(-1px) !important;
-  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45) !important;
+  box-shadow: 0 4px 16px rgba(107, 163, 224, 0.45) !important;
 }
 
 .bayan-il-modal-apply-all:active {
@@ -698,7 +720,7 @@
 .bayan-il-modal-empty {
   text-align: center !important;
   padding: 24px 16px !important;
-  color: #6b6b80 !important;
+  color: #8A939F !important;
   font-size: 13px !important;
 }
 
@@ -712,111 +734,458 @@
    Modal — Light Theme Overrides
    ══════════════════════════════════════════════ */
 
-.bayan-il-modal-backdrop[data-bayan-theme="light"] {
-  background: rgba(0, 0, 0, 0.3) !important;
-}
-
 .bayan-il-modal-panel[data-bayan-theme="light"] {
-  background: #ffffff !important;
-  border-color: #e5e7eb !important;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.08) !important;
-  color: #1f2937 !important;
+  background: #F3F1EC !important;
+  border-color: rgba(26, 29, 33, 0.1) !important;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(43, 108, 184, 0.08) !important;
+  color: #1A1D21 !important;
 }
 
-.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-header {
-  background: linear-gradient(135deg, #ffffff 0%, rgba(99, 102, 241, 0.05) 100%) !important;
-  border-bottom-color: #e5e7eb !important;
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-top-bar {
+  background: linear-gradient(135deg, #FAF9F6 0%, rgba(43, 108, 184, 0.05) 100%) !important;
+  border-bottom-color: rgba(26, 29, 33, 0.1) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-close {
-  color: #9ca3af !important;
+  color: #5A6472 !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-close:hover {
-  color: #1f2937 !important;
+  color: #1A1D21 !important;
   background: rgba(0, 0, 0, 0.05) !important;
 }
 
-.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-body::-webkit-scrollbar-thumb {
-  background: #d1d5db !important;
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-body-scroll::-webkit-scrollbar-thumb {
+  background: rgba(26, 29, 33, 0.18) !important;
+}
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-section-title {
+  color: #3A424E !important;
 }
 
-.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-score {
-  background: #f9fafb !important;
-  border-color: #e5e7eb !important;
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-score-card {
+  background: #FAF9F6 !important;
+  border-color: rgba(26, 29, 33, 0.1) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-score-value {
-  color: #6366f1 !important;
+  color: #6B57A8 !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-score-hint {
-  color: #6b7280 !important;
+  color: #3A424E !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-count {
-  color: #9ca3af !important;
+  color: #5A6472 !important;
 }
 
-.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-sugg-title {
-  color: #6b7280 !important;
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-sugg-card {
+  background: #FAF9F6 !important;
+  border-color: rgba(26, 29, 33, 0.1) !important;
 }
 
-.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-sugg-count {
-  color: #9ca3af !important;
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-cards::-webkit-scrollbar-thumb {
+  background: #d1d5db !important;
+}
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-header-divider {
+  background: rgba(26, 29, 33, 0.18) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-card {
-  background: #ffffff !important;
-  border-color: #e5e7eb !important;
+  background: #FAF9F6 !important;
+  border-color: rgba(26, 29, 33, 0.1) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-card:hover {
-  background: #f9fafb !important;
-  border-color: #d1d5db !important;
+  background: #EFEBE4 !important;
+  border-color: #2B6CB8 !important;
+  box-shadow: 0 0 0 1px rgba(43, 108, 184, 0.32) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-card-original {
-  color: #dc2626 !important;
+  color: #C53030 !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-card-arrow {
-  color: #9ca3af !important;
+  color: #5A6472 !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-card-fix {
-  color: #16a34a !important;
+  color: #2F8554 !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-alt-chip {
-  border-color: #d1d5db !important;
-  color: #6b7280 !important;
+  border-color: rgba(26, 29, 33, 0.18) !important;
+  color: #5A6472 !important;
   background: transparent !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-alt-chip:hover {
-  border-color: #6366f1 !important;
-  color: #4f46e5 !important;
-  background: rgba(99, 102, 241, 0.06) !important;
+  border-color: #2B6CB8 !important;
+  color: #2B6CB8 !important;
+  background: rgba(43, 108, 184, 0.06) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-alt-chip--main {
-  background: #6366f1 !important;
-  border-color: #6366f1 !important;
+  background: #2B6CB8 !important;
+  border-color: #2B6CB8 !important;
   color: white !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-alt-chip--keep {
-  color: #9ca3af !important;
-  border-color: #d1d5db !important;
+  color: #5A6472 !important;
+  border-color: rgba(26, 29, 33, 0.18) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-alt-chip--keep:hover {
-  border-color: #9ca3af !important;
+  border-color: #5A6472 !important;
   background: rgba(0, 0, 0, 0.03) !important;
 }
 
 .bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-empty {
-  color: #9ca3af !important;
+  color: #5A6472 !important;
+}
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-score-ring svg circle:first-child {
+  stroke: rgba(26, 29, 33, 0.1) !important;
+}
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-count--spelling strong { color: #C53030 !important; }
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-count--grammar strong { color: #B7791F !important; }
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-count--punctuation strong { color: #2F8554 !important; }
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-apply-all {
+  background: linear-gradient(135deg, #2B6CB8, #1A5CA0) !important;
+  box-shadow: 0 2px 8px rgba(43, 108, 184, 0.3) !important;
+}
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-apply-all:hover {
+  box-shadow: 0 4px 16px rgba(43, 108, 184, 0.45) !important;
+}
+
+.bayan-il-modal-panel[data-bayan-theme="light"] .bayan-il-modal-cards::-webkit-scrollbar-thumb {
+  background: rgba(26, 29, 33, 0.18) !important;
+}
+
+
+
+/* ── UI Sync CSS ── */
+
+.bayan-il-suggestion-popover {
+  position: absolute;
+  z-index: 2147483647 !important;
+  background: #1A1D26 !important;
+  border: 1px solid rgba(236, 238, 242, 0.16) !important;
+  border-radius: 1rem !important;
+  padding: 1rem !important;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38) !important;
+  width: 320px !important;
+  display: none;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif !important;
+  direction: rtl;
+  color: #ECEEF2;
+}
+.bayan-il-suggestion-popover.bayan-il-show {
+  display: block !important;
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+.bayan-il-popover-type {
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 0.5rem !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+}
+.bayan-il-popover-type--spelling { color: #E88A8A !important; }
+.bayan-il-popover-type--grammar { color: #E4B35A !important; }
+.bayan-il-popover-type--punctuation { color: #6BC98A !important; }
+
+.bayan-il-popover-original-word {
+  font-size: 0.875rem !important;
+  color: #B4BBC6 !important;
+  margin-bottom: 0.5rem !important;
+  text-align: right !important;
+}
+.bayan-il-popover-label {
+  font-weight: 700 !important;
+}
+.bayan-il-popover-alternatives {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 6px !important;
+  margin-bottom: 0.5rem !important;
+}
+.bayan-il-popover-alt-btn {
+  width: 100% !important;
+  padding: 8px 12px !important;
+  border: 1px solid rgba(236, 238, 242, 0.09) !important;
+  border-radius: 0.75rem !important;
+  background: #1A1D26 !important;
+  color: #ECEEF2 !important;
+  font-weight: 600 !important;
+  cursor: pointer !important;
+  font-family: inherit !important;
+  font-size: 1rem !important;
+  text-align: right !important;
+  transition: all 0.2s ease !important;
+  min-height: 40px !important;
+}
+.bayan-il-popover-alt-main {
+  background: linear-gradient(135deg, #6BA3E0, #A594E8) !important;
+  color: #F4F5F7 !important;
+  border-color: transparent !important;
+  font-weight: 700 !important;
+}
+.bayan-il-popover-alt-main:hover {
+  opacity: 0.92 !important;
+  transform: translateX(-2px) !important;
+}
+.bayan-il-popover-dismiss {
+  display: block !important;
+  width: 100% !important;
+  padding: 6px 0 !important;
+  margin-top: 6px !important;
+  background: none !important;
+  border: 1px dashed rgba(236, 238, 242, 0.16) !important;
+  border-radius: 0.5rem !important;
+  color: #8A939F !important;
+  font-size: 0.75rem !important;
+  font-family: inherit !important;
+  cursor: pointer !important;
+  transition: all 0.15s ease !important;
+}
+.bayan-il-popover-dismiss:hover {
+  color: #E88A8A !important;
+  border-color: #E88A8A !important;
+  background: rgba(232, 138, 138, 0.08) !important;
+}
+.bayan-il-popover-hint {
+  font-size: 0.75rem !important;
+  color: #8A939F !important;
+  text-align: center !important;
+  margin-top: 0.5rem !important;
+  margin-bottom: 0 !important;
+}
+
+/* Modal Panel UI Sync */
+.bayan-il-sidebar-panel {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 1rem !important;
+  max-height: calc(100vh - 140px) !important;
+  overflow-y: auto !important;
+  scrollbar-width: thin !important;
+  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif !important;
+  color: #ECEEF2 !important;
+}
+.bayan-il-sidebar-card {
+  padding: 1.5rem !important;
+}
+.bayan-il-surface-card {
+  background: #1A1D26 !important;
+  border-radius: 1rem !important;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
+  border: 1px solid rgba(26, 29, 33, 0.08) !important;
+}
+.bayan-il-card-title {
+  font-size: 1.25rem !important;
+  font-weight: 700 !important;
+  margin-top: 0 !important;
+  margin-bottom: 1rem !important;
+  text-align: right !important;
+  color: #ECEEF2 !important;
+}
+
+/* Score Ring */
+.bayan-il-score-ring-wrap {
+  position: relative !important;
+  width: 140px !important;
+  height: 140px !important;
+  margin: 0 auto 1rem !important;
+}
+.bayan-il-score-svg {
+  width: 100% !important;
+  height: 100% !important;
+  transform: rotate(-90deg) !important;
+}
+.bayan-il-score-circle {
+  transition: stroke-dashoffset 0.6s ease-in-out !important;
+}
+.bayan-il-score-value {
+  position: absolute !important;
+  inset: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 2.25rem !important;
+  font-weight: 700 !important;
+  color: #ECEEF2 !important;
+}
+.bayan-il-score-hint {
+  text-align: center !important;
+  font-size: 0.875rem !important;
+  color: #B4BBC6 !important;
+  margin: 0 !important;
+}
+
+/* Suggestions scroll & card */
+.bayan-il-suggestions-scroll {
+  max-height: 320px !important;
+  overflow-y: auto !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 0.5rem !important;
+}
+.bayan-il-suggestion-card {
+  padding: 1rem !important;
+  padding-right: calc(1rem + 4px) !important;
+  border-radius: 0.75rem !important;
+  border: 1px solid rgba(236, 238, 242, 0.09) !important;
+  border-right: 4px solid rgba(236, 238, 242, 0.16) !important;
+  background: #242833 !important;
+  cursor: pointer !important;
+  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
+  text-align: right !important;
+}
+.bayan-il-suggestion-card[data-suggestion-type="spelling"] { border-right-color: #E88A8A !important; }
+.bayan-il-suggestion-card[data-suggestion-type="grammar"] { border-right-color: #E4B35A !important; }
+.bayan-il-suggestion-card[data-suggestion-type="punctuation"] { border-right-color: #6BC98A !important; }
+.bayan-il-suggestion-card:hover {
+  border-color: #6BA3E0 !important;
+  background: rgba(107, 163, 224, 0.12) !important;
+  transform: translateX(-2px) !important;
+}
+.bayan-il-suggestion-card-badge {
+  display: inline-block !important;
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  padding: 2px 8px !important;
+  border-radius: 999px !important;
+  margin-bottom: 0.5rem !important;
+}
+.bayan-il-suggestion-card-change {
+  font-size: 0.875rem !important;
+  margin-bottom: 4px !important;
+  color: #ECEEF2 !important;
+}
+.bayan-il-suggestion-card-original {
+  text-decoration: line-through !important;
+  color: #8A939F !important;
+}
+.bayan-il-suggestion-card-arrow {
+  margin: 0 0.5rem !important;
+  color: #8A939F !important;
+}
+.bayan-il-suggestion-card-fix {
+  color: #6BC98A !important;
+  font-weight: 600 !important;
+}
+.bayan-il-suggestion-card-alts {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 6px !important;
+  margin-top: 8px !important;
+}
+.bayan-il-suggestion-card-apply {
+  padding: 4px 10px !important;
+  border: none !important;
+  border-radius: 0.5rem !important;
+  background: #6BA3E0 !important;
+  color: #F4F5F7 !important;
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  cursor: pointer !important;
+  font-family: inherit !important;
+  min-height: 32px !important;
+  transition: opacity 0.2s ease !important;
+}
+.bayan-il-suggestion-card-apply:hover {
+  opacity: 0.9 !important;
+}
+.bayan-il-suggestion-card-alt-keep {
+  background: transparent !important;
+  border: 1px dashed rgba(236, 238, 242, 0.09) !important;
+  color: #8A939F !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+  padding: 4px 10px !important;
+  border-radius: 0.5rem !important;
+  cursor: pointer !important;
+}
+.bayan-il-suggestion-card-alt-keep:hover {
+  color: #ECEEF2 !important;
+  border-color: #B4BBC6 !important;
+  background: #242833 !important;
+}
+.bayan-il-apply-all-btn {
+  width: 100% !important;
+  padding: 8px 16px !important;
+  background: linear-gradient(135deg, #6BA3E0, #A594E8) !important;
+  color: #F4F5F7 !important;
+  font-size: 1rem !important;
+  font-weight: 700 !important;
+  border: none !important;
+  border-radius: 0.75rem !important;
+  cursor: pointer !important;
+  margin-top: 1rem !important;
+  transition: opacity 0.2s ease !important;
+}
+.bayan-il-apply-all-btn:hover {
+  opacity: 0.9 !important;
+}
+
+/* Modal header wrapper */
+.bayan-il-modal-top-bar {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 0 0.5rem !important;
+}
+.bayan-il-modal-brand {
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+}
+.bayan-il-modal-title {
+  font-size: 1.25rem !important;
+  font-weight: 700 !important;
+  background: linear-gradient(135deg, #6BA3E0, #A594E8) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+}
+.bayan-il-modal-close {
+  background: none !important;
+  border: none !important;
+  color: #B4BBC6 !important;
+  font-size: 1.25rem !important;
+  cursor: pointer !important;
+}
+.bayan-il-modal-close:hover {
+  color: #E88A8A !important;
+}
+
+
+
+
+.bayan-il-header-divider {
+  width: 1px !important;
+  height: 18px !important;
+  background: rgba(236, 238, 242, 0.2) !important;
+  margin: 0 10px !important;
+}
+
+.bayan-il-modal-top-bar {
+  cursor: grab !important;
+}
+
+.bayan-il-modal-top-bar:active {
+  cursor: grabbing !important;
 }
 

extension/content-inline.js

@@ -66,6 +66,7 @@
   let overlayContainer = null;
   let badgeCount = null;
   let observer = null;
+  let ancestorScrollCleanups = [];
 
   // ── Ghost-text autocomplete state ──
   let ghostEl = null;            // the ghost overlay element
@@ -182,10 +183,10 @@
     const tag = activeField.tagName.toLowerCase();
     if (tag !== 'textarea' && tag !== 'input') return false;
     const val = activeField.value || '';
-    // Only when the caret is collapsed at the very end of the text.
     if (activeField.selectionStart !== val.length) return false;
     if (activeField.selectionEnd !== val.length) return false;
     if (val.trim().length < AC_MIN_CONTEXT) return false;
+    if (!/[\s ]$/.test(val)) return false;
     return /[؀-ۿ]/.test(val);
   }
 
@@ -237,11 +238,12 @@
     try {
       const rect = activeField.getBoundingClientRect();
       const cs = window.getComputedStyle(activeField);
+      const sbW = activeField.offsetWidth - activeField.clientWidth;
 
       ghostEl = document.createElement('div');
       ghostEl.className = 'bayan-il-ghost';
       ghostEl.style.cssText = `position:fixed;top:${rect.top}px;`
-        + `left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`
+        + `left:${rect.left}px;width:${rect.width - sbW}px;height:${rect.height}px;`
         + `font-family:${cs.fontFamily};font-size:${cs.fontSize};line-height:${cs.lineHeight};`
         + `padding:${cs.padding};border:${cs.border};border-color:transparent;`
         + `direction:${cs.direction};text-align:${cs.textAlign};`
@@ -336,11 +338,12 @@
     try {
       const rect = field.getBoundingClientRect();
       const cs = window.getComputedStyle(field);
+      const sbW = field.offsetWidth - field.clientWidth;
 
       overlayContainer = document.createElement('div');
       overlayContainer.className = 'bayan-il-overlay';
       overlayContainer.style.cssText = `position:fixed;top:${rect.top}px;`
-        + `left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`
+        + `left:${rect.left}px;width:${rect.width - sbW}px;height:${rect.height}px;`
         + `font-family:${cs.fontFamily};font-size:${cs.fontSize};line-height:${cs.lineHeight};`
         + `padding:${cs.padding};border:${cs.border};border-color:transparent;`
         + `direction:${cs.direction};text-align:${cs.textAlign};`
@@ -394,6 +397,49 @@
     syncGhostScroll();
   }
 
+  function repositionOverlay() {
+    if (!activeField) return;
+    const rect = activeField.getBoundingClientRect();
+    const sbW = activeField.offsetWidth - activeField.clientWidth;
+    if (overlayContainer) {
+      overlayContainer.style.top = `${rect.top}px`;
+      overlayContainer.style.left = `${rect.left}px`;
+      overlayContainer.style.width = `${rect.width - sbW}px`;
+      overlayContainer.style.height = `${rect.height}px`;
+      overlayContainer.scrollTop = activeField.scrollTop;
+      overlayContainer.scrollLeft = activeField.scrollLeft;
+    }
+    if (ghostEl) {
+      ghostEl.style.top = `${rect.top}px`;
+      ghostEl.style.left = `${rect.left}px`;
+      ghostEl.style.width = `${rect.width - sbW}px`;
+      ghostEl.style.height = `${rect.height}px`;
+      ghostEl.scrollTop = activeField.scrollTop;
+      ghostEl.scrollLeft = activeField.scrollLeft;
+    }
+    if (floatingBtn) positionFab(activeField);
+  }
+
+  function watchAncestorScroll(field) {
+    unwatchAncestorScroll();
+    let el = field.parentElement;
+    while (el && el !== document.body) {
+      const ov = window.getComputedStyle(el).overflowY;
+      if (ov === 'auto' || ov === 'scroll' || ov === 'overlay') {
+        const handler = () => repositionOverlay();
+        el.addEventListener('scroll', handler, { passive: true });
+        const ref = el;
+        ancestorScrollCleanups.push(() => ref.removeEventListener('scroll', handler));
+      }
+      el = el.parentElement;
+    }
+  }
+
+  function unwatchAncestorScroll() {
+    ancestorScrollCleanups.forEach((fn) => fn());
+    ancestorScrollCleanups = [];
+  }
+
   function clearHighlights() {
     if (overlayContainer) { overlayContainer.remove(); overlayContainer = null; }
     hideTooltip();
@@ -420,23 +466,28 @@
 
     tooltip = document.createElement('div');
     tooltip.setAttribute('data-bayan-theme', currentBayanTheme);
-    tooltip.className = 'bayan-il-tooltip';
+    tooltip.className = 'bayan-il-suggestion-popover bayan-il-show';
     tooltip.dir = 'rtl';
 
+    const typeLabel = typeLabels[type] || type;
+    const typeClass = type === 'spelling' ? 'bayan-il-popover-type--spelling' : type === 'grammar' ? 'bayan-il-popover-type--grammar' : 'bayan-il-popover-type--punctuation';
+    const icon = type === 'spelling' ? '✕' : type === 'grammar' ? '!' : '✓';
+    
     safeHTML(tooltip, `
-      <div class="bayan-il-tooltip-header">
-        <span class="bayan-il-tooltip-badge bayan-il-badge-${type}">${typeLabels[type] || type}</span>
-        <button class="bayan-il-tooltip-close" title="إغلاق">✕</button>
-      </div>
-      <div class="bayan-il-tooltip-body">
-        <span class="bayan-il-tooltip-original">${esc(original)}</span>
-        <span class="bayan-il-tooltip-arrow">←</span>
-        <span class="bayan-il-tooltip-correction">${correction ? esc(correction) : '<s style="opacity:0.5">حذف</s>'}</span>
-      </div>
-      <div class="bayan-il-tooltip-actions">
-        <button class="bayan-il-tooltip-apply" data-action="apply">تطبيق</button>
-        <button class="bayan-il-tooltip-ignore" data-action="ignore">تجاهل</button>
-      </div>
+        <div class="bayan-il-popover-type ${typeClass}">
+          <span class="bayan-il-popover-type-icon">${icon}</span> ${typeLabel}
+        </div>
+        <div class="bayan-il-popover-original-word">
+          <span class="bayan-il-popover-label">الكلمة:</span>
+          <span class="bayan-il-tooltip-original">${esc(original)}</span>
+        </div>
+        <div class="bayan-il-popover-alternatives">
+          <button class="bayan-il-popover-alt-btn bayan-il-popover-alt-main" data-action="apply">
+            ${correction ? esc(correction) : '<s style="opacity:0.5">حذف</s>'}
+          </button>
+        </div>
+        <button type="button" class="bayan-il-popover-dismiss" data-action="ignore" title="تجاهل هذا الاقتراح">تجاهل</button>
+        <p class="bayan-il-popover-hint">اختر التصحيح المناسب</p>
     `);
 
     document.body.appendChild(tooltip);
@@ -468,13 +519,11 @@
       hideTooltip();
     });
 
-    tooltip.querySelector('[data-action="ignore"]').addEventListener('click', () => {
+    tooltip.querySelector('.bayan-il-popover-dismiss').addEventListener('click', () => {
       dismissSuggestion(suggestion);
       hideTooltip();
     });
 
-    tooltip.querySelector('.bayan-il-tooltip-close').addEventListener('click', () => hideTooltip());
-
     setTimeout(() => document.addEventListener('click', outsideClick, { once: true }), 100);
   }
 
@@ -547,6 +596,7 @@
   let fabDragOffsetX = 0;
   let fabDragOffsetY = 0;
   let fabCustomPos = null; // {x, y} when user has dragged to a custom position
+  let modalCustomPos = null; // {x, y} when user drags the modal
 
   function loadFabPosition() {
     try {
@@ -569,18 +619,9 @@
     floatingBtn = document.createElement('div');
       floatingBtn.setAttribute('data-bayan-theme', currentBayanTheme);
     floatingBtn.className = 'bayan-il-fab';
+    const fabLogoUrl = chrome.runtime.getURL('assets/icons/fab_logo.png');
     safeHTML(floatingBtn, `
-      <svg width="18" height="18" viewBox="0 0 100 100" fill="none">
-        <circle cx="50" cy="50" r="46" fill="url(#blGrad)" />
-        <path d="M30 55 Q35 35, 50 30 Q65 35, 70 55 Q65 65, 50 70 Q35 65, 30 55Z" fill="rgba(255,255,255,0.9)" />
-        <circle cx="50" cy="42" r="4" fill="url(#blGrad)" />
-        <defs>
-          <linearGradient id="blGrad" x1="0" y1="0" x2="100" y2="100">
-            <stop offset="0%" stop-color="#6366f1"/>
-            <stop offset="100%" stop-color="#8b5cf6"/>
-          </linearGradient>
-        </defs>
-      </svg>
+      <img src="${fabLogoUrl}" alt="بيان" draggable="false" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none;" />
       <span class="bayan-il-badge">0</span>
     `);
     floatingBtn.title = 'Bayan — بيان';
@@ -712,6 +753,8 @@
     field.addEventListener('select', onFieldSelect);
     // FIX-20: Removed redundant 'keyup' listener (input event already fires on every change)
 
+    watchAncestorScroll(field);
+
     if (BayanController.hasArabic(getFieldText(field))) {
       onFieldInput();
     }
@@ -727,6 +770,7 @@
       // FIX-20: keyup listener no longer attached
       activeField.removeEventListener('scroll', syncOverlay);
     }
+    unwatchAncestorScroll();
     clearHighlights();
     clearGhost();
     BayanController.cancelAll();
@@ -995,31 +1039,21 @@
       if (floatingBtn?.contains(a)) return;
       if (overlayContainer?.contains(a)) return;
       if (modalPanel?.contains(a)) return;
-      if (modalBackdrop?.contains(a)) return;
+      if (modalPanel?.contains(a)) return;
       if (document.querySelector('.bayan-il-tooltip')) return;
-      detachField();
+      if (document.querySelector('.bayan-il-suggestion-popover')) return;
+      if (isEditableField(a)) return;
+      BayanController.cancelAll();
+      clearGhost();
     }, 300);
   }, true);
 
   window.addEventListener('scroll', () => {
-    if (activeField && floatingBtn) positionFab(activeField);
-    if (overlayContainer && activeField) {
-      const rect = activeField.getBoundingClientRect();
-      overlayContainer.style.top = `${rect.top}px`;
-      overlayContainer.style.left = `${rect.left}px`;
-    }
-    if (ghostEl && activeField) {
-      const rect = activeField.getBoundingClientRect();
-      ghostEl.style.top = `${rect.top}px`;
-      ghostEl.style.left = `${rect.left}px`;
-    }
-  }, { passive: true });
+    repositionOverlay();
+  }, true);
 
   window.addEventListener('resize', () => {
-    if (activeField && floatingBtn) positionFab(activeField);
-    // B4: a viewport resize can change the field's width/position, leaving the
-    // overlay marks misaligned. Re-render the overlay (not just the FAB) so
-    // highlights track the field. Guarded by suggestions to avoid needless work.
+    repositionOverlay();
     if (overlayContainer && activeField && suggestions.length > 0) {
       renderOverlay(activeField, lastAnalyzedText, suggestions);
     }
@@ -1059,7 +1093,6 @@
   // Modal Dialog — Full Analysis Panel
   // ══════════════════════════════════════════════════════════
 
-  let modalBackdrop = null;
   let modalPanel = null;
 
   const TYPE_LABELS = { spelling: 'إملائي', grammar: 'نحوي', punctuation: 'ترقيم' };
@@ -1092,11 +1125,7 @@
   }
 
   function createModal() {
-    if (modalBackdrop) return;
-
-    modalBackdrop = document.createElement('div');
-    modalBackdrop.className = 'bayan-il-modal-backdrop';
-    modalBackdrop.setAttribute('data-bayan-theme', currentBayanTheme);
+    if (modalPanel) return;
 
     modalPanel = document.createElement('div');
     modalPanel.className = 'bayan-il-modal-panel';
@@ -1104,68 +1133,92 @@
     modalPanel.dir = 'rtl';
 
     safeHTML(modalPanel, `
-      <div class="bayan-il-modal-header">
+      <div class="bayan-il-modal-top-bar" id="bayan-modal-drag-handle">
         <div class="bayan-il-modal-brand">
-          <svg width="22" height="22" viewBox="0 0 100 100" fill="none">
-            <circle cx="50" cy="50" r="46" fill="url(#bmGrad)" />
-            <path d="M30 55 Q35 35, 50 30 Q65 35, 70 55 Q65 65, 50 70 Q35 65, 30 55Z" fill="rgba(255,255,255,0.9)" />
-            <circle cx="50" cy="42" r="4" fill="url(#bmGrad)" />
-            <defs>
-              <linearGradient id="bmGrad" x1="0" y1="0" x2="100" y2="100">
-                <stop offset="0%" stop-color="#6366f1"/>
-                <stop offset="100%" stop-color="#8b5cf6"/>
-              </linearGradient>
-            </defs>
-          </svg>
-          <span class="bayan-il-modal-title">بيان</span>
+           <img src="${chrome.runtime.getURL('assets/icons/icon128.png')}" alt="بيان" style="width: 24px; height: 24px; object-fit: contain;" draggable="false" />
+           <div class="bayan-il-header-divider"></div>
+           <span class="bayan-il-modal-title">بيان</span>
         </div>
         <button class="bayan-il-modal-close" title="إغلاق">✕</button>
       </div>
-      <div class="bayan-il-modal-body">
-        <div class="bayan-il-modal-score">
-          <div class="bayan-il-modal-score-ring">
-            <svg viewBox="0 0 160 160">
-              <circle cx="80" cy="80" r="70" fill="none" stroke="#2d2d3d" stroke-width="8" />
-              <circle cx="80" cy="80" r="70" fill="none" stroke="#6366f1" stroke-width="8"
-                stroke-dasharray="${SCORE_CIRCUMFERENCE}" stroke-dashoffset="${SCORE_CIRCUMFERENCE}" stroke-linecap="round"
-                id="bayan-modal-score-circle" transform="rotate(-90 80 80)" />
+
+      <div class="bayan-il-modal-body-scroll">
+        <div class="bayan-il-modal-score-card">
+          <h3 class="bayan-il-modal-section-title">تقييم الكتابة</h3>
+          <div class="bayan-il-modal-score-ring" role="img" aria-label="تقييم الكتابة">
+            <svg viewBox="0 0 160 160" aria-hidden="true">
+              <circle cx="80" cy="80" r="70" fill="none" stroke="rgba(236, 238, 242, 0.09)" stroke-width="10"/>
+              <circle id="bayan-modal-score-circle" cx="80" cy="80" r="70" fill="none" stroke="url(#bayanModalScoreGradient)" stroke-width="10" stroke-linecap="round" stroke-dasharray="439.8" stroke-dashoffset="439.8" class="bayan-il-score-circle"/>
+              <defs><linearGradient id="bayanModalScoreGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#6BA3E0"/><stop offset="100%" stop-color="#A594E8"/></linearGradient></defs>
             </svg>
-            <span class="bayan-il-modal-score-value" id="bayan-modal-score-value">--</span>
+            <div class="bayan-il-modal-score-value"><span id="bayan-modal-score-value">--</span></div>
           </div>
-          <div class="bayan-il-modal-score-meta">
-            <span class="bayan-il-modal-score-hint" id="bayan-modal-score-hint"></span>
-            <div class="bayan-il-modal-counts">
-              <span class="bayan-il-modal-count bayan-il-modal-count--spelling">إملائي: <strong id="bayan-modal-count-spelling">٠</strong></span>
-              <span class="bayan-il-modal-count bayan-il-modal-count--grammar">نحوي: <strong id="bayan-modal-count-grammar">٠</strong></span>
-              <span class="bayan-il-modal-count bayan-il-modal-count--punctuation">ترقيم: <strong id="bayan-modal-count-punctuation">٠</strong></span>
-            </div>
+          <p id="bayan-modal-score-hint" class="bayan-il-modal-score-hint">ابدأ الكتابة لرؤية تقييمك</p>
+          <div class="bayan-il-modal-counts-row">
+            <span class="bayan-il-modal-count bayan-il-modal-count--spelling"><strong id="bayan-modal-count-spelling">٠</strong> إملائي</span>
+            <span class="bayan-il-modal-count bayan-il-modal-count--grammar"><strong id="bayan-modal-count-grammar">٠</strong> نحوي</span>
+            <span class="bayan-il-modal-count bayan-il-modal-count--punctuation"><strong id="bayan-modal-count-punctuation">٠</strong> ترقيم</span>
           </div>
         </div>
-        <div class="bayan-il-modal-sugg-header">
-          <span class="bayan-il-modal-sugg-title">الاقتراحات</span>
-          <span class="bayan-il-modal-sugg-count" id="bayan-modal-sugg-count"></span>
+
+        <div class="bayan-il-modal-sugg-card">
+          <div class="bayan-il-modal-sugg-header">
+            <h3 class="bayan-il-modal-section-title">الاقتراحات (<span id="bayan-modal-sugg-count">٠</span>)</h3>
+            <button id="bayan-modal-apply-all" class="bayan-il-modal-apply-all" style="display:none;" type="button">تطبيق الكل</button>
+          </div>
+          <div id="bayan-modal-cards" class="bayan-il-modal-cards" role="list" aria-live="polite" aria-label="اقتراحات التصحيح"></div>
         </div>
-        <div class="bayan-il-modal-cards" id="bayan-modal-cards"></div>
-        <button class="bayan-il-modal-apply-all" id="bayan-modal-apply-all" style="display:none;">
-          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
-          تطبيق الكل
-        </button>
       </div>
     `);
 
-    document.body.appendChild(modalBackdrop);
     document.body.appendChild(modalPanel);
 
     modalPanel.querySelector('.bayan-il-modal-close').addEventListener('click', hideModal);
-    modalBackdrop.addEventListener('click', hideModal);
 
     modalPanel.querySelector('#bayan-modal-apply-all').addEventListener('click', applyAllFixes);
 
     document.addEventListener('keydown', onModalKeydown);
+
+    let modalDragging = false;
+    let modalDragStartX = 0;
+    let modalDragStartY = 0;
+    let modalDragOffsetX = 0;
+    let modalDragOffsetY = 0;
+
+    const dragHandle = modalPanel.querySelector('#bayan-modal-drag-handle');
+    if (dragHandle) {
+      dragHandle.addEventListener('mousedown', (e) => {
+        if (e.target.closest('.bayan-il-modal-close')) return;
+        modalDragging = true;
+        modalDragStartX = e.clientX;
+        modalDragStartY = e.clientY;
+        modalDragOffsetX = parseInt(modalPanel.style.left || 0, 10);
+        modalDragOffsetY = parseInt(modalPanel.style.top || 0, 10);
+        e.preventDefault();
+      });
+
+      document.addEventListener('mousemove', (e) => {
+        if (!modalDragging) return;
+        const dx = e.clientX - modalDragStartX;
+        const dy = e.clientY - modalDragStartY;
+        modalPanel.style.left = `${modalDragOffsetX + dx}px`;
+        modalPanel.style.top = `${modalDragOffsetY + dy}px`;
+      });
+
+      document.addEventListener('mouseup', () => {
+        if (modalDragging) {
+          modalDragging = false;
+          modalCustomPos = {
+            x: parseInt(modalPanel.style.left, 10),
+            y: parseInt(modalPanel.style.top, 10),
+          };
+        }
+      });
+    }
   }
 
   function onModalKeydown(e) {
-    if (e.key === 'Escape' && modalBackdrop?.classList.contains('bayan-il-modal-backdrop--visible')) {
+    if (e.key === 'Escape' && modalPanel?.classList.contains('bayan-il-modal-panel--visible')) {
       hideModal();
     }
   }
@@ -1173,14 +1226,43 @@
   function showModal() {
     createModal();
 
-    modalBackdrop.setAttribute('data-bayan-theme', currentBayanTheme);
     modalPanel.setAttribute('data-bayan-theme', currentBayanTheme);
 
-    updateModalThemeColors();
     updateModalScore();
     renderModalSuggestions();
 
-    modalBackdrop.classList.add('bayan-il-modal-backdrop--visible');
+    // Position modal
+    if (!modalCustomPos) {
+      if (activeField) {
+        const fieldRect = activeField.getBoundingClientRect();
+        modalPanel.style.position = 'fixed';
+        let left = fieldRect.left + (fieldRect.width / 2) - 180;
+        if (left < 10) left = 10;
+        if (left + 360 > window.innerWidth) left = window.innerWidth - 370;
+        modalPanel.style.left = `${left}px`;
+        
+        let top = fieldRect.bottom + 10;
+        if (top + 400 > window.innerHeight) {
+          top = Math.max(10, window.innerHeight - 410);
+        }
+        modalPanel.style.top = `${top}px`;
+      } else if (floatingBtn) {
+        const fabRect = floatingBtn.getBoundingClientRect();
+        modalPanel.style.position = 'fixed';
+        let left = fabRect.left - 370;
+        if (left < 10) left = 10;
+        modalPanel.style.left = `${left}px`;
+        
+        let top = fabRect.bottom - 400;
+        if (top < 10) top = 10;
+        modalPanel.style.top = `${top}px`;
+      }
+    } else {
+      modalPanel.style.position = 'fixed';
+      modalPanel.style.left = `${modalCustomPos.x}px`;
+      modalPanel.style.top = `${modalCustomPos.y}px`;
+    }
+
     requestAnimationFrame(() => {
       modalPanel.classList.add('bayan-il-modal-panel--visible');
     });
@@ -1188,16 +1270,9 @@
 
   function hideModal() {
     if (modalPanel) modalPanel.classList.remove('bayan-il-modal-panel--visible');
-    if (modalBackdrop) modalBackdrop.classList.remove('bayan-il-modal-backdrop--visible');
   }
 
-  function updateModalThemeColors() {
-    if (!modalPanel) return;
-    const scoreTrack = modalPanel.querySelector('#bayan-modal-score-circle')?.previousElementSibling;
-    if (scoreTrack) {
-      scoreTrack.setAttribute('stroke', currentBayanTheme === 'light' ? '#e5e7eb' : '#2d2d3d');
-    }
-  }
+
 
   function updateModalScore() {
     if (!modalPanel) return;
@@ -1209,7 +1284,7 @@
 
     const score = calculateWritingScore(counts.spelling, counts.grammar, counts.punctuation);
     const color = getScoreColor(score);
-    const offset = SCORE_CIRCUMFERENCE - (SCORE_CIRCUMFERENCE * score) / 100;
+    const offset = 439.8 - (439.8 * score) / 100;
 
     const circle = modalPanel.querySelector('#bayan-modal-score-circle');
     const valueEl = modalPanel.querySelector('#bayan-modal-score-value');
@@ -1221,7 +1296,10 @@
         circle.setAttribute('stroke-dashoffset', String(offset));
       });
     }
-    if (valueEl) valueEl.textContent = String(score);
+    if (valueEl) {
+      const total = counts.spelling + counts.grammar + counts.punctuation;
+      valueEl.textContent = total > 0 ? String(score) : '--';
+    }
     if (hintEl) hintEl.textContent = getScoreHint(score);
 
     const toArabicNum = (n) => String(n).replace(/\d/g, (d) => '٠١٢٣٤٥٦٧٨٩'[d]);
@@ -1256,7 +1334,7 @@
     }
 
     const toArabicNum = (n) => String(n).replace(/\d/g, (d) => '٠١٢٣٤٥٦٧٨٩'[d]);
-    if (countEl) countEl.textContent = `${toArabicNum(suggestions.length)} اقتراح`;
+    if (countEl) countEl.textContent = toArabicNum(suggestions.length);
     if (applyAllBtn) applyAllBtn.style.display = suggestions.length >= 2 ? 'flex' : 'none';
 
     let html = '';
@@ -1264,7 +1342,7 @@
       const alts = resolveAlternatives(s);
       const typeLabel = TYPE_LABELS[s.type] || s.type;
 
-      html += `<div class="bayan-il-modal-card bayan-il-modal-card--${s.type}" data-modal-idx="${idx}">`;
+      html += `<div class="bayan-il-modal-card bayan-il-modal-card--${s.type}" data-suggestion-type="${s.type}" data-modal-idx="${idx}">`;
       html += `<span class="bayan-il-modal-card-badge bayan-il-modal-badge--${s.type}">${typeLabel}</span>`;
       html += `<div class="bayan-il-modal-card-change">`;
       html += `<span class="bayan-il-modal-card-original">${esc(s.original)}</span>`;
@@ -1276,10 +1354,8 @@
       alts.forEach((alt, ai) => {
         const isMain = alt === s.correction && ai === 0;
         const isKeep = alt === s.original;
-        let cls = 'bayan-il-modal-alt-chip';
-        if (isMain) cls += ' bayan-il-modal-alt-chip--main';
-        else if (isKeep) cls += ' bayan-il-modal-alt-chip--keep';
         const label = isKeep ? 'إبقاء الأصل' : esc(alt);
+        const cls = isMain ? 'bayan-il-modal-alt-chip bayan-il-modal-alt-chip--main' : (isKeep ? 'bayan-il-modal-alt-chip bayan-il-modal-alt-chip--keep' : 'bayan-il-modal-alt-chip');
         html += `<button class="${cls}" data-modal-alt="${esc(alt)}" data-modal-sidx="${idx}" data-modal-keep="${isKeep ? '1' : ''}">${label}</button>`;
       });
 
@@ -1334,8 +1410,7 @@
     currentBayanTheme = res.theme || 'dark';
     if (typeof tooltip !== 'undefined' && tooltip) tooltip.setAttribute('data-bayan-theme', currentBayanTheme);
     if (typeof floatingBtn !== 'undefined' && floatingBtn) floatingBtn.setAttribute('data-bayan-theme', currentBayanTheme);
-    if (modalBackdrop) modalBackdrop.setAttribute('data-bayan-theme', currentBayanTheme);
-    if (modalPanel) { modalPanel.setAttribute('data-bayan-theme', currentBayanTheme); updateModalThemeColors(); }
+    if (modalPanel) { modalPanel.setAttribute('data-bayan-theme', currentBayanTheme); }
   });
 
   chrome.storage.onChanged.addListener((changes, namespace) => {
@@ -1343,8 +1418,7 @@
       currentBayanTheme = changes.theme.newValue;
       if (typeof tooltip !== 'undefined' && tooltip) tooltip.setAttribute('data-bayan-theme', currentBayanTheme);
       if (typeof floatingBtn !== 'undefined' && floatingBtn) floatingBtn.setAttribute('data-bayan-theme', currentBayanTheme);
-      if (modalBackdrop) modalBackdrop.setAttribute('data-bayan-theme', currentBayanTheme);
-      if (modalPanel) { modalPanel.setAttribute('data-bayan-theme', currentBayanTheme); updateModalThemeColors(); }
+      if (modalPanel) { modalPanel.setAttribute('data-bayan-theme', currentBayanTheme); }
     }
   });
 

extension/content.js

@@ -1,11 +0,0 @@
-/**
- * Bayan Chrome Extension — Content Script
- *
- * Phase 1: Minimal stub — no DOM injection yet.
- * Phase 5: Will detect textarea/contenteditable and show floating icon.
- * Phase 6: Will apply suggestion patches to external page fields.
- * Phase 7: Will add live analysis with debounce.
- */
-
-// Content script loaded — confirm injection
-console.log('[Bayan] Content script loaded on:', window.location.hostname);

extension/manifest.json

@@ -42,6 +42,16 @@
     "https://bayan10-bayan-api.hf.space/*"
   ],
 
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "assets/icons/fab_logo.png",
+        "assets/icons/icon128.png"
+      ],
+      "matches": ["<all_urls>"]
+    }
+  ],
+
   "content_scripts": [
     {
       "matches": ["https://*/*", "http://*/*"],

extension/popup.css

@@ -3,41 +3,42 @@
    Arabic-first RTL | Dark mode | Premium feel
    ══════════════════════════════════════════════ */
 
-/* ── Design Tokens ── */
+/* ── Design Tokens (mapped to website tokens.css) ── */
 :root {
-  --bayan-primary: #6366f1;
-  --bayan-primary-light: #818cf8;
-  --bayan-primary-dark: #4f46e5;
-  --bayan-primary-glow: rgba(99, 102, 241, 0.25);
-
-  --bayan-bg: #0f0f14;
-  --bayan-surface: #1a1a24;
-  --bayan-surface-hover: #22222e;
-  --bayan-surface-active: #2a2a38;
-  --bayan-border: #2d2d3d;
-  --bayan-border-light: #3a3a4d;
-
-  --bayan-text: #f0f0f5;
-  --bayan-text-secondary: #9898ad;
-  --bayan-text-muted: #6b6b80;
-
-  --bayan-success: #22c55e;
-  --bayan-warning: #f59e0b;
-  --bayan-error: #ef4444;
-
-  --bayan-spelling: #ef4444;
-  --bayan-grammar: #f59e0b;
-  --bayan-punctuation: #6BC98A;
+  --bayan-primary: var(--color-primary, #6BA3E0);
+  --bayan-primary-light: #8BB8E8;
+  --bayan-primary-dark: #5A8FCA;
+  --bayan-primary-glow: var(--focus-ring, rgba(107, 163, 224, 0.25));
+
+  --bayan-bg: var(--color-bg, #12141A);
+  --bayan-surface: var(--color-surface, #1A1D26);
+  --bayan-surface-hover: var(--color-surface-elevated, #242833);
+  --bayan-surface-active: #2C3040;
+  --bayan-border: var(--color-border);
+  --bayan-border-light: var(--color-border-strong);
+
+  --bayan-text: var(--color-text-primary, #ECEEF2);
+  --bayan-text-secondary: var(--color-text-secondary, #B4BBC6);
+  --bayan-text-muted: var(--color-text-muted, #8A939F);
+
+  --bayan-success: var(--color-success, #6BC98A);
+  --bayan-warning: var(--color-warning, #E4B35A);
+  --bayan-error: var(--color-error, #E88A8A);
+
+  --bayan-spelling: var(--highlight-spelling-border, #E88A8A);
+  --bayan-grammar: var(--highlight-grammar-border, #E4B35A);
+  --bayan-punctuation: var(--highlight-punctuation-border, #6BC98A);
 
   --bayan-radius: 10px;
   --bayan-radius-sm: 6px;
   --bayan-radius-lg: 14px;
 
-  --bayan-font: 'Segoe UI', 'SF Pro', Tahoma, Arial, sans-serif;
-  --bayan-font-arabic: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
+  --bayan-font-arabic: var(--font-family-primary, 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif);
 
   --bayan-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --bayan-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  --color-surface-hover: var(--color-surface-elevated, #242833);
 }
 
 /* ── Reset ── */
@@ -56,8 +57,8 @@ body {
   font-family: var(--bayan-font-arabic);
   font-size: 14px;
   line-height: 1.6;
-  color: var(--bayan-text);
-  background: var(--bayan-bg);
+  color: var(--text-color);
+  background: var(--color-bg);
   direction: rtl;
   -webkit-font-smoothing: antialiased;
 }
@@ -70,7 +71,7 @@ body::-webkit-scrollbar-track {
   background: transparent;
 }
 body::-webkit-scrollbar-thumb {
-  background: var(--bayan-border);
+  background: var(--color-border);
   border-radius: 4px;
 }
 
@@ -82,8 +83,8 @@ body::-webkit-scrollbar-thumb {
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  background: linear-gradient(135deg, var(--bayan-surface) 0%, var(--bayan-bg) 100%);
-  border-bottom: 1px solid var(--bayan-border);
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .bayan-header-brand {
@@ -99,7 +100,7 @@ body::-webkit-scrollbar-thumb {
 .bayan-header-title {
   font-size: 18px;
   font-weight: 700;
-  background: linear-gradient(135deg, var(--bayan-primary-light), var(--bayan-primary));
+  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -123,11 +124,11 @@ body::-webkit-scrollbar-thumb {
 }
 .bayan-status-dot.online {
   background: var(--bayan-success);
-  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
+  box-shadow: 0 0 6px rgba(107, 201, 138, 0.5);
 }
 .bayan-status-dot.offline {
   background: var(--bayan-error);
-  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
+  box-shadow: 0 0 6px rgba(232, 138, 138, 0.4);
 }
 
 /* ══════════════════════════════════════════════
@@ -136,27 +137,28 @@ body::-webkit-scrollbar-thumb {
 .bayan-tabs {
   display: flex;
   gap: 0;
-  border-bottom: 1px solid var(--bayan-border);
-  background: var(--bayan-surface);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
 }
 
 .bayan-tab {
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
-  padding: 10px 4px;
+  padding: 10px 6px;
   border: none;
   background: transparent;
   color: var(--bayan-text-muted);
   font-family: var(--bayan-font-arabic);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
   cursor: pointer;
   transition: all var(--bayan-transition);
   position: relative;
   white-space: nowrap;
+  min-width: 0;
 }
 
 .bayan-tab::after {
@@ -166,7 +168,7 @@ body::-webkit-scrollbar-thumb {
   left: 20%;
   right: 20%;
   height: 2px;
-  background: var(--bayan-primary);
+  background: var(--primary-color);
   border-radius: 2px 2px 0 0;
   opacity: 0;
   transform: scaleX(0);
@@ -174,12 +176,12 @@ body::-webkit-scrollbar-thumb {
 }
 
 .bayan-tab:hover {
-  color: var(--bayan-text);
-  background: var(--bayan-surface-hover);
+  color: var(--text-color);
+  background: var(--color-surface-hover);
 }
 
 .bayan-tab.active {
-  color: var(--bayan-primary-light);
+  color: var(--secondary-color);
 }
 .bayan-tab.active::after {
   opacity: 1;
@@ -216,22 +218,27 @@ body::-webkit-scrollbar-thumb {
   margin-bottom: 12px;
 }
 
+.bayan-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
 .bayan-label {
-  display: block;
   font-size: 12px;
   font-weight: 600;
-  color: var(--bayan-text-secondary);
-  margin-bottom: 6px;
+  color: var(--text-secondary);
 }
 
 .bayan-textarea {
   width: 100%;
   min-height: 100px;
   padding: 12px 14px;
-  border: 1px solid var(--bayan-border);
+  border: 1px solid var(--color-border);
   border-radius: var(--bayan-radius);
-  background: var(--bayan-surface);
-  color: var(--bayan-text);
+  background: var(--color-surface);
+  color: var(--text-color);
   font-family: var(--bayan-font-arabic);
   font-size: 14px;
   line-height: 1.8;
@@ -242,7 +249,7 @@ body::-webkit-scrollbar-thumb {
 
 .bayan-textarea:focus {
   outline: none;
-  border-color: var(--bayan-primary);
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 3px var(--bayan-primary-glow);
 }
 
@@ -289,33 +296,33 @@ body::-webkit-scrollbar-thumb {
 
 .bayan-btn-primary {
   flex: 1;
-  background: linear-gradient(135deg, var(--bayan-primary), var(--bayan-primary-dark));
+  background: linear-gradient(135deg, var(--color-primary, #6BA3E0), var(--color-secondary, #A594E8));
   color: white;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 2px 8px rgba(107, 163, 224, 0.3);
 }
 .bayan-btn-primary:hover {
-  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
+  box-shadow: 0 4px 16px rgba(107, 163, 224, 0.45);
   transform: translateY(-1px);
 }
 .bayan-btn-primary:active {
   transform: translateY(0);
-  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
+  box-shadow: 0 1px 4px rgba(107, 163, 224, 0.2);
 }
 
 .bayan-btn-ghost {
   background: transparent;
-  color: var(--bayan-text-secondary);
-  border: 1px solid var(--bayan-border);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border);
 }
 .bayan-btn-ghost:hover {
-  background: var(--bayan-surface-hover);
-  color: var(--bayan-text);
+  background: var(--color-surface-hover);
+  color: var(--text-color);
 }
 
 .bayan-btn-sm {
   padding: 5px 12px;
   font-size: 11px;
-  background: var(--bayan-primary);
+  background: var(--primary-color);
   color: white;
   border-radius: var(--bayan-radius-sm);
 }
@@ -338,8 +345,8 @@ body::-webkit-scrollbar-thumb {
   transition: all var(--bayan-transition);
 }
 .bayan-btn-icon:hover {
-  background: var(--bayan-surface-hover);
-  color: var(--bayan-text);
+  background: var(--color-surface-hover);
+  color: var(--text-color);
 }
 
 /* ══════════════════════════════════════════════
@@ -347,21 +354,30 @@ body::-webkit-scrollbar-thumb {
    ══════════════════════════════════════════════ */
 .bayan-score-section {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 14px;
-  padding: 12px;
+  text-align: center;
+  padding: 16px 12px;
   margin-bottom: 14px;
-  background: var(--bayan-surface);
-  border: 1px solid var(--bayan-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--bayan-radius);
   animation: fadeSlideIn 300ms ease-out;
 }
 
+.bayan-score-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+}
+
 .bayan-score-ring {
   position: relative;
-  width: 80px;
-  height: 80px;
+  width: 120px;
+  height: 120px;
   flex-shrink: 0;
+  margin-bottom: 8px;
 }
 
 .bayan-score-ring svg {
@@ -378,19 +394,15 @@ body::-webkit-scrollbar-thumb {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  font-size: 28px;
   font-weight: 700;
-  color: var(--bayan-primary-light);
-}
-
-.bayan-score-meta {
-  flex: 1;
+  color: var(--secondary-color);
 }
 
 .bayan-score-hint {
   display: block;
   font-size: 12px;
-  color: var(--bayan-text-secondary);
+  color: var(--text-secondary);
   margin-bottom: 8px;
 }
 
@@ -398,6 +410,7 @@ body::-webkit-scrollbar-thumb {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
+  justify-content: center;
 }
 
 .bayan-count {
@@ -432,24 +445,24 @@ body::-webkit-scrollbar-thumb {
 .bayan-result-title {
   font-size: 12px;
   font-weight: 600;
-  color: var(--bayan-text-secondary);
+  color: var(--text-secondary);
 }
 
 .bayan-result-text {
   padding: 12px 14px;
-  background: var(--bayan-surface);
-  border: 1px solid var(--bayan-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--bayan-radius);
   font-size: 14px;
   line-height: 2;
-  color: var(--bayan-text);
+  color: var(--text-color);
   min-height: 60px;
   word-wrap: break-word;
 }
 
 /* Error highlights in result */
 .bayan-spelling-error {
-  background: rgba(239, 68, 68, 0.15);
+  background: var(--highlight-spelling-bg, rgba(232, 138, 138, 0.16));
   border-bottom: 2px solid var(--bayan-spelling);
   border-radius: 2px;
   padding: 0 2px;
@@ -457,11 +470,11 @@ body::-webkit-scrollbar-thumb {
   transition: background var(--bayan-transition);
 }
 .bayan-spelling-error:hover {
-  background: rgba(239, 68, 68, 0.25);
+  background: rgba(232, 138, 138, 0.28);
 }
 
 .bayan-grammar-error {
-  background: rgba(245, 158, 11, 0.15);
+  background: var(--highlight-grammar-bg, rgba(228, 179, 90, 0.16));
   border-bottom: 2px solid var(--bayan-grammar);
   border-radius: 2px;
   padding: 0 2px;
@@ -469,7 +482,7 @@ body::-webkit-scrollbar-thumb {
   transition: background var(--bayan-transition);
 }
 .bayan-grammar-error:hover {
-  background: rgba(245, 158, 11, 0.25);
+  background: rgba(228, 179, 90, 0.28);
 }
 
 .bayan-punctuation-suggestion {
@@ -501,7 +514,7 @@ body::-webkit-scrollbar-thumb {
 .bayan-suggestions-title {
   font-size: 12px;
   font-weight: 600;
-  color: var(--bayan-text-secondary);
+  color: var(--text-secondary);
 }
 
 .bayan-suggestions-list {
@@ -526,15 +539,15 @@ body::-webkit-scrollbar-thumb {
 
 .bayan-suggestion-card {
   padding: 10px 12px;
-  background: var(--bayan-surface);
-  border: 1px solid var(--bayan-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--bayan-radius);
   cursor: pointer;
   transition: all var(--bayan-transition);
 }
 .bayan-suggestion-card:hover {
-  border-color: var(--bayan-primary);
-  background: var(--bayan-surface-hover);
+  border-color: var(--primary-color);
+  background: var(--color-surface-hover);
   box-shadow: 0 0 0 1px var(--bayan-primary-glow);
 }
 
@@ -548,15 +561,15 @@ body::-webkit-scrollbar-thumb {
 }
 
 .bayan-badge-spelling {
-  background: rgba(239, 68, 68, 0.15);
+  background: var(--color-badge-spelling-bg, rgba(232, 138, 138, 0.18));
   color: var(--bayan-spelling);
 }
 .bayan-badge-grammar {
-  background: rgba(245, 158, 11, 0.15);
+  background: var(--color-badge-grammar-bg, rgba(228, 179, 90, 0.18));
   color: var(--bayan-grammar);
 }
 .bayan-badge-punctuation {
-  background: rgba(107, 201, 138, 0.15);
+  background: var(--color-badge-punctuation-bg, rgba(107, 201, 138, 0.16));
   color: var(--bayan-punctuation);
 }
 
@@ -592,24 +605,24 @@ body::-webkit-scrollbar-thumb {
 
 .bayan-alt-chip {
   padding: 4px 10px;
-  border: 1px solid var(--bayan-border);
+  border: 1px solid var(--color-border);
   border-radius: 20px;
   background: transparent;
-  color: var(--bayan-text-secondary);
+  color: var(--text-secondary);
   font-family: var(--bayan-font-arabic);
   font-size: 11px;
   cursor: pointer;
   transition: all var(--bayan-transition);
 }
 .bayan-alt-chip:hover {
-  border-color: var(--bayan-primary);
-  color: var(--bayan-text);
+  border-color: var(--primary-color);
+  color: var(--text-color);
   background: var(--bayan-surface-active);
 }
 
 .bayan-alt-chip--main {
-  background: var(--bayan-primary);
-  border-color: var(--bayan-primary);
+  background: var(--primary-color);
+  border-color: var(--primary-color);
   color: white;
 }
 .bayan-alt-chip--main:hover {
@@ -630,7 +643,7 @@ body::-webkit-scrollbar-thumb {
 .bayan-timing {
   padding: 8px 0;
   margin-top: 8px;
-  border-top: 1px solid var(--bayan-border);
+  border-top: 1px solid var(--color-border);
   font-size: 10px;
   color: var(--bayan-text-muted);
   text-align: center;
@@ -642,12 +655,178 @@ body::-webkit-scrollbar-thumb {
 .bayan-summary-meta {
   margin-top: 10px;
   padding: 8px 12px;
-  background: var(--bayan-surface-hover);
+  background: var(--color-surface-hover);
   border-radius: var(--bayan-radius-sm);
   font-size: 11px;
   color: var(--bayan-text-muted);
 }
 
+/* ══════════════════════════════════════════════
+   Summary Mode Toggle (paragraph / bullets)
+   ══════════════════════════════════════════════ */
+.bayan-mode-toggle {
+  display: flex;
+  gap: 0;
+  margin-bottom: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--bayan-radius-sm);
+  overflow: hidden;
+}
+
+.bayan-mode-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 7px 10px;
+  border: none;
+  background: transparent;
+  color: var(--bayan-text-muted);
+  font-family: var(--bayan-font-arabic);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--bayan-transition);
+}
+
+.bayan-mode-btn + .bayan-mode-btn {
+  border-right: 1px solid var(--color-border);
+}
+
+.bayan-mode-btn:hover {
+  background: var(--color-surface-hover);
+  color: var(--text-color);
+}
+
+.bayan-mode-btn.active {
+  background: var(--primary-color);
+  color: white;
+}
+
+/* ══════════════════════════════════════════════
+   Summary Stats
+   ══════════════════════════════════════════════ */
+.bayan-summary-stats {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 10px;
+  padding: 8px 12px;
+  background: var(--color-surface-hover);
+  border-radius: var(--bayan-radius-sm);
+}
+
+.bayan-summary-stat {
+  font-size: 11px;
+  color: var(--bayan-text-muted);
+  display: flex;
+  gap: 4px;
+}
+
+.bayan-summary-stat-value {
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+/* ══════════════════════════════════════════════
+   Description paragraph (dialect panel)
+   ══════════════════════════════════════════════ */
+.bayan-description {
+  font-size: 11px;
+  color: var(--bayan-text-muted);
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+/* ══════════════════════════════════════════════
+   Input meta row (word count + import)
+   ══════════════════════════════════════════════ */
+.bayan-input-meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 6px;
+}
+
+.bayan-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+.bayan-import-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-family: var(--bayan-font-arabic);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--bayan-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--bayan-transition);
+}
+
+.bayan-import-btn:hover {
+  background: var(--color-surface-hover);
+  color: var(--text-color);
+  border-color: var(--primary-color);
+}
+
+/* ══════════════════════════════════════════════
+   Result actions group (copy + export)
+   ══════════════════════════════════════════════ */
+.bayan-result-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* ══════════════════════════════════════════════
+   Export dropdown
+   ══════════════════════════════════════════════ */
+.bayan-export-dropdown {
+  position: relative;
+}
+
+.bayan-export-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 130px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--bayan-radius-sm);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  z-index: 50;
+  overflow: hidden;
+}
+
+.bayan-export-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-color);
+  font-family: var(--bayan-font-arabic);
+  font-size: 12px;
+  text-align: right;
+  cursor: pointer;
+  transition: background var(--bayan-transition);
+}
+
+.bayan-export-item:hover {
+  background: var(--color-surface-hover);
+}
+
 /* ══════════════════════════════════════════════
    Length Selector
    ══════════════════════════════════════════════ */
@@ -665,12 +844,12 @@ body::-webkit-scrollbar-thumb {
   align-items: center;
   gap: 4px;
   font-size: 12px;
-  color: var(--bayan-text-secondary);
+  color: var(--text-secondary);
   cursor: pointer;
 }
 
 .bayan-radio input[type="radio"] {
-  accent-color: var(--bayan-primary);
+  accent-color: var(--primary-color);
   width: 14px;
   height: 14px;
   cursor: pointer;
@@ -687,7 +866,7 @@ body::-webkit-scrollbar-thumb {
   align-items: center;
   justify-content: center;
   gap: 14px;
-  background: rgba(15, 15, 20, 0.85);
+  background: var(--color-overlay, rgba(15, 15, 20, 0.85));
   backdrop-filter: blur(4px);
   z-index: 100;
 }
@@ -695,8 +874,8 @@ body::-webkit-scrollbar-thumb {
 .bayan-spinner {
   width: 36px;
   height: 36px;
-  border: 3px solid var(--bayan-border);
-  border-top-color: var(--bayan-primary);
+  border: 3px solid var(--color-border);
+  border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -707,7 +886,7 @@ body::-webkit-scrollbar-thumb {
 
 .bayan-loading-text {
   font-size: 13px;
-  color: var(--bayan-text-secondary);
+  color: var(--text-secondary);
 }
 
 /* ══════════════════════════════════════════════
@@ -719,10 +898,10 @@ body::-webkit-scrollbar-thumb {
   left: 50%;
   transform: translateX(-50%);
   padding: 8px 18px;
-  background: var(--bayan-surface);
-  border: 1px solid var(--bayan-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 20px;
-  color: var(--bayan-text);
+  color: var(--text-color);
   font-size: 12px;
   font-family: var(--bayan-font-arabic);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
@@ -761,6 +940,87 @@ body::-webkit-scrollbar-thumb {
   white-space: nowrap;
 }
 
+/* ══════════════════════════════════════════════
+   Quran Result
+   ══════════════════════════════════════════════ */
+.bayan-quran-result {
+  background: var(--color-surface);
+  border: 1px solid rgba(6, 182, 212, 0.2);
+  border-radius: var(--bayan-radius);
+  padding: 14px;
+  animation: fadeSlideIn 300ms ease-out;
+}
+
+.bayan-quran-result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.bayan-quran-uthmani {
+  font-family: 'Amiri Quran', 'Cairo', serif;
+  font-size: 20px;
+  line-height: 2.2;
+  text-align: center;
+  color: var(--text-color);
+  margin-bottom: 4px;
+}
+
+.bayan-quran-reference {
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #06b6d4;
+  margin-bottom: 8px;
+}
+
+.bayan-quran-translate {
+  border-top: 1px solid var(--color-border);
+  padding-top: 10px;
+  margin-top: 10px;
+}
+
+.bayan-quran-translate-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.bayan-quran-lang-select {
+  flex: 1;
+  min-width: 120px;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: var(--text-color);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--bayan-radius-sm);
+  font-family: var(--bayan-font-arabic);
+  cursor: pointer;
+}
+
+.bayan-quran-lang-select:focus {
+  outline: none;
+  border-color: #06b6d4;
+}
+
+.bayan-quran-translation {
+  padding: 10px;
+  border-radius: var(--bayan-radius-sm);
+  background: rgba(6, 182, 212, 0.06);
+  border: 1px solid rgba(6, 182, 212, 0.15);
+}
+
+.bayan-quran-translation p {
+  font-size: 16px;
+  line-height: 2;
+  text-align: center;
+  color: var(--text-color);
+}
+
 /* ══════════════════════════════════════════════
    Utilities
    ══════════════════════════════════════════════ */
@@ -769,20 +1029,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 
-/* Light Theme Variables */
-[data-theme="light"] {
-  --bayan-bg: #f9fafb;
-  --bayan-surface: #ffffff;
-  --bayan-surface-hover: #f3f4f6;
-  --bayan-surface-active: #e5e7eb;
-  --bayan-border: #e5e7eb;
-  --bayan-border-light: #d1d5db;
-  --bayan-text: #111827;
-  --bayan-text-secondary: #4b5563;
-  --bayan-text-muted: #9ca3af;
-  --bayan-success: #16a34a;
-  --bayan-warning: #d97706;
-}
+/* Light theme handled by tokens.css */
 
 /* Theme Toggle Button Styles */
 .theme-toggle-animated {
@@ -793,8 +1040,8 @@ body::-webkit-scrollbar-thumb {
   height: 32px;
   border: none;
   border-radius: 50%;
-  background: var(--bayan-surface-hover);
-  color: var(--bayan-text-secondary);
+  background: var(--color-surface-hover);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
   position: relative;
@@ -803,7 +1050,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .theme-toggle-animated:hover {
-  background: var(--bayan-primary);
+  background: var(--primary-color);
   color: #fff;
   transform: rotate(15deg);
 }

extension/popup.html

@@ -3,7 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=400">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
   <title>بيان</title>
+  <link rel="stylesheet" href="shared/css/tokens.css">
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>
@@ -11,12 +15,12 @@
   <!-- Header -->
   <!-- ══════════════════════════════════════════════ -->
   <header class="bayan-header">
-    <div class="bayan-header-brand">
+    <a href="https://bayan10-bayan-api.hf.space/" target="_blank" rel="noopener noreferrer" class="bayan-header-brand" style="text-decoration:none;color:inherit;">
       <img src="assets/icons/icon48.png" alt="بيان" width="28" height="28" style="border-radius:6px;">
-      <div style="height:24px; width:2px; background-color:#d1d5db; border-radius:9999px; flex-shrink:0;"></div>
+      <div style="height:24px; width:2px; background-color:var(--color-border-strong, #d1d5db); border-radius:9999px; flex-shrink:0;"></div>
       <span class="bayan-header-title">بيان</span>
-    </div>
-    
+    </a>
+
     <div style="display: flex; align-items: center; gap: 12px;">
 <button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button">
       <svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
@@ -26,6 +30,9 @@
       <span class="bayan-status-dot"></span>
       <span class="bayan-status-text" id="status-text">جاهز</span>
     </div>
+<button id="btn-close-popup" class="bayan-btn-icon" type="button" title="إغلاق" style="margin-right:4px;">
+      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+    </button>
 </div>
   </header>
 
@@ -49,10 +56,6 @@
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
       تدقيق النص القرآني
     </button>
-    <button class="bayan-tab" role="tab" aria-selected="false" data-tab="autocomplete" id="tab-autocomplete">
-      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-      إكمال
-    </button>
   </nav>
 
   <!-- ══════════════════════════════════════════════ -->
@@ -61,7 +64,12 @@
   <section class="bayan-panel active" id="panel-correct" role="tabpanel">
     <!-- Input area -->
     <div class="bayan-input-group">
-      <label class="bayan-label" for="input-text">أدخل النص العربي</label>
+      <div class="bayan-label-row">
+        <label class="bayan-label" for="input-text">أدخل النص العربي</label>
+        <button class="bayan-btn-icon" id="btn-copy-text" type="button" title="نسخ النص">
+          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+        </button>
+      </div>
       <textarea
         id="input-text"
         class="bayan-textarea"
@@ -86,47 +94,41 @@
       <button class="bayan-btn bayan-btn-ghost" id="btn-clear" type="button">مسح</button>
     </div>
 
+    <!-- Suggestions list (above score) -->
+    <div class="bayan-suggestions is-hidden" id="suggestions-section">
+      <div class="bayan-suggestions-header">
+        <span class="bayan-suggestions-title">الاقتراحات</span>
+        <button class="bayan-btn bayan-btn-sm" id="btn-apply-all" type="button">تطبيق الكل</button>
+      </div>
+      <div class="bayan-suggestions-list" id="suggestions-list" role="list"></div>
+    </div>
+
     <!-- Score ring -->
     <div class="bayan-score-section is-hidden" id="score-section">
+      <span class="bayan-score-title">تقييم الكتابة</span>
       <div class="bayan-score-ring">
-        <svg viewBox="0 0 160 160" width="80" height="80">
-          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--bayan-border)" stroke-width="8"/>
-          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--bayan-primary)" stroke-width="8"
+        <svg viewBox="0 0 160 160" width="120" height="120">
+          <defs>
+            <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stop-color="var(--color-primary, #6BA3E0)"/>
+              <stop offset="100%" stop-color="var(--color-secondary, #A594E8)"/>
+            </linearGradient>
+          </defs>
+          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/>
+          <circle cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10"
             stroke-dasharray="440" stroke-dashoffset="440" stroke-linecap="round"
             transform="rotate(-90 80 80)" id="score-circle"/>
         </svg>
         <span class="bayan-score-value" id="score-value">--</span>
       </div>
-      <div class="bayan-score-meta">
-        <span class="bayan-score-hint" id="score-hint">ابدأ الكتابة لرؤية تقييمك</span>
-        <div class="bayan-counts" id="error-counts">
-          <span class="bayan-count bayan-count-spelling"><span id="count-spelling">٠</span> إملائي</span>
-          <span class="bayan-count bayan-count-grammar"><span id="count-grammar">٠</span> نحوي</span>
-          <span class="bayan-count bayan-count-punctuation"><span id="count-punctuation">٠</span> ترقيم</span>
-        </div>
+      <span class="bayan-score-hint" id="score-hint">ابدأ الكتابة لرؤية تقييمك</span>
+      <div class="bayan-counts" id="error-counts">
+        <span class="bayan-count bayan-count-spelling"><span id="count-spelling">٠</span> إملائي</span>
+        <span class="bayan-count bayan-count-grammar"><span id="count-grammar">٠</span> نحوي</span>
+        <span class="bayan-count bayan-count-punctuation"><span id="count-punctuation">٠</span> ترقيم</span>
       </div>
     </div>
 
-    <!-- Corrected text result -->
-    <div class="bayan-result is-hidden" id="result-section">
-      <div class="bayan-result-header">
-        <span class="bayan-result-title">النص المصحّح</span>
-        <button class="bayan-btn-icon" id="btn-copy-result" type="button" title="نسخ">
-          <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
-        </button>
-      </div>
-      <div class="bayan-result-text" id="result-text" dir="rtl"></div>
-    </div>
-
-    <!-- Suggestions list -->
-    <div class="bayan-suggestions is-hidden" id="suggestions-section">
-      <div class="bayan-suggestions-header">
-        <span class="bayan-suggestions-title">الاقتراحات</span>
-        <button class="bayan-btn bayan-btn-sm" id="btn-apply-all" type="button">تطبيق الكل</button>
-      </div>
-      <div class="bayan-suggestions-list" id="suggestions-list" role="list"></div>
-    </div>
-
     <!-- Timing info -->
     <div class="bayan-timing is-hidden" id="timing-section">
       <span id="timing-text"></span>
@@ -148,11 +150,28 @@
         rows="5"
         maxlength="5000"
       ></textarea>
-      <div class="bayan-input-meta">
-        <span id="summary-char-count">٠</span> حرف
+      <div class="bayan-input-meta-row">
+        <span class="bayan-input-meta"><span id="summary-word-count-input">٠</span> كلمة</span>
+        <label class="bayan-import-btn" title="استيراد ملف">
+          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
+          استيراد ملف
+          <input type="file" id="summary-import-input" class="bayan-sr-only" accept=".txt,.docx">
+        </label>
       </div>
     </div>
 
+    <!-- Mode toggle (paragraph / bullets) -->
+    <div class="bayan-mode-toggle">
+      <button type="button" class="bayan-mode-btn active" id="summary-mode-paragraph" data-mode="paragraph">
+        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
+        فقرة
+      </button>
+      <button type="button" class="bayan-mode-btn" id="summary-mode-bullets" data-mode="bullets">
+        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
+        نقاط
+      </button>
+    </div>
+
     <!-- Length selector -->
     <div class="bayan-length-selector">
       <label class="bayan-label">طول الملخص</label>
@@ -173,14 +192,30 @@
 
     <!-- Summary result -->
     <div class="bayan-result is-hidden" id="summary-result-section">
+      <!-- Summary stats -->
+      <div class="bayan-summary-stats is-hidden" id="summary-stats">
+        <div class="bayan-summary-stat"><span>كلمات الملخص:</span> <span class="bayan-summary-stat-value" id="summary-word-count">٠</span></div>
+        <div class="bayan-summary-stat"><span>نسبة الاختصار:</span> <span class="bayan-summary-stat-value" id="summary-compression">٠٪</span></div>
+      </div>
       <div class="bayan-result-header">
         <span class="bayan-result-title">الملخص</span>
-        <button class="bayan-btn-icon" id="btn-copy-summary" type="button" title="نسخ">
-          <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
-        </button>
+        <div class="bayan-result-actions">
+          <button class="bayan-btn-icon" id="btn-copy-summary" type="button" title="نسخ">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+          </button>
+          <div class="bayan-export-dropdown" id="summary-export-wrap">
+            <button class="bayan-btn-icon" id="btn-export-summary" type="button" title="تصدير">
+              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12m0 0l-4-4m4 4l4-4"/></svg>
+            </button>
+            <div class="bayan-export-menu is-hidden" id="summary-export-menu">
+              <button type="button" class="bayan-export-item" data-format="txt">نصي (.txt)</button>
+              <button type="button" class="bayan-export-item" data-format="docx">Word (.docx)</button>
+              <button type="button" class="bayan-export-item" data-format="pdf">PDF (.pdf)</button>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="bayan-result-text" id="summary-text" dir="rtl"></div>
-      <div class="bayan-summary-meta" id="summary-meta"></div>
     </div>
   </section>
 
@@ -189,12 +224,13 @@
   <!-- ══════════════════════════════════════════════ -->
   <section class="bayan-panel" id="panel-dialect" role="tabpanel">
     <div class="bayan-input-group">
-      <label class="bayan-label" for="dialect-input-text">حوّل العامية إلى الفصحى</label>
+      <label class="bayan-label" for="dialect-input-text">تحويل اللهجات للفصحى</label>
+      <p class="bayan-description">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p>
       <textarea
         id="dialect-input-text"
         class="bayan-textarea"
         dir="rtl"
-        placeholder="أدخل نصاً بالعامية..."
+        placeholder="اكتب النص باللهجة هنا..."
         rows="5"
         maxlength="5000"
       ></textarea>
@@ -208,7 +244,7 @@
     </div>
     <div class="bayan-result is-hidden" id="dialect-result-section">
       <div class="bayan-result-header">
-        <span class="bayan-result-title">النص بالفصحى</span>
+        <span class="bayan-result-title" style="color: var(--color-primary, #6BA3E0);">✓ النص بالعربية الفصحى</span>
         <button class="bayan-btn-icon" id="btn-copy-dialect" type="button" title="نسخ">
           <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
         </button>
@@ -236,48 +272,53 @@
     <div class="bayan-actions">
       <button class="bayan-btn bayan-btn-primary" id="btn-quran" type="button">
         <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-        تدقيق الآية
+        بحث وتدقيق
       </button>
     </div>
-    <div class="bayan-result is-hidden" id="quran-result-section">
-      <div class="bayan-result-header">
-        <span class="bayan-result-title">نتيجة التدقيق</span>
+
+    <!-- Quran result -->
+    <div class="bayan-quran-result is-hidden" id="quran-result-section">
+      <div class="bayan-quran-result-header">
+        <span style="color:#06b6d4; font-size:12px; font-weight:700;">✓ النص القرآني المدقق</span>
         <button class="bayan-btn-icon" id="btn-copy-quran" type="button" title="نسخ">
           <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
         </button>
       </div>
-      <div class="bayan-result-text" id="quran-text" dir="rtl"></div>
-      <div class="bayan-summary-meta" id="quran-meta"></div>
-    </div>
-  </section>
+      <p id="quran-uthmani" class="bayan-quran-uthmani" dir="rtl"></p>
+      <p id="quran-reference" class="bayan-quran-reference"></p>
 
-  <!-- ══════════════════════════════════════════════ -->
-  <!-- Autocomplete Panel (إكمال) -->
-  <!-- ══════════════════════════════════════════════ -->
-  <section class="bayan-panel" id="panel-autocomplete" role="tabpanel">
-    <div class="bayan-input-group">
-      <label class="bayan-label" for="autocomplete-input-text">اقتراحات إكمال الجملة</label>
-      <textarea
-        id="autocomplete-input-text"
-        class="bayan-textarea"
-        dir="rtl"
-        placeholder="اكتب بداية الجملة..."
-        rows="5"
-        maxlength="5000"
-      ></textarea>
-      <div class="bayan-input-meta"><span id="autocomplete-char-count">٠</span> حرف</div>
-    </div>
-    <div class="bayan-actions">
-      <button class="bayan-btn bayan-btn-primary" id="btn-autocomplete" type="button">
-        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-        اقترح إكمالاً
-      </button>
-    </div>
-    <div class="bayan-suggestions is-hidden" id="autocomplete-result-section">
-      <div class="bayan-suggestions-header">
-        <span class="bayan-suggestions-title">اقتراحات الإكمال</span>
+      <!-- Translation -->
+      <div class="bayan-quran-translate">
+        <div class="bayan-quran-translate-row">
+          <svg width="14" height="14" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
+          <span style="font-size:12px; font-weight:600; color:var(--text-secondary);">ترجمة الآية</span>
+          <select id="quran-lang-select" class="bayan-quran-lang-select">
+            <option value="">— اختر لغة —</option>
+            <option value="english">🇬🇧 English</option>
+            <option value="french">🇫🇷 Français</option>
+            <option value="turkish">🇹🇷 Türkçe</option>
+            <option value="persian">🇮🇷 فارسی</option>
+            <option value="russian">🇷🇺 Русский</option>
+            <option value="spanish">🇪🇸 Español</option>
+            <option value="german">🇩🇪 Deutsch</option>
+            <option value="indonesian">🇮🇩 Indonesia</option>
+            <option value="malay">🇲🇾 Melayu</option>
+            <option value="bengali">🇧🇩 বাংলা</option>
+            <option value="bosnian">🇧🇦 Bosanski</option>
+            <option value="portuguese">🇵🇹 Português</option>
+            <option value="uzbek">🇺🇿 O'zbek</option>
+          </select>
+        </div>
+        <div id="quran-translation-section" class="bayan-quran-translation is-hidden">
+          <p id="quran-trans-text" dir="auto"></p>
+          <p id="quran-trans-ref" class="bayan-quran-reference" style="display:none;"></p>
+          <div class="bayan-result-actions" id="quran-trans-actions" style="display:none; justify-content:flex-end; gap:4px; margin-top:8px;">
+            <button class="bayan-btn-icon" id="btn-copy-quran-trans" type="button" title="نسخ الترجمة">
+              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+            </button>
+          </div>
+        </div>
       </div>
-      <div class="bayan-suggestions-list" id="autocomplete-list" role="list"></div>
     </div>
   </section>
 
@@ -294,6 +335,10 @@
   <!-- ══════════════════════════════════════════════ -->
   <div class="bayan-toast" id="toast" role="status" aria-live="polite"></div>
 
+  <!-- Vendor libs for import/export -->
+  <script src="shared/vendor/mammoth.browser.min.js"></script>
+  <script src="shared/vendor/docx.umd.js"></script>
+  <script src="shared/vendor/html2pdf.bundle.min.js"></script>
   <!-- Scripts: constants first, then config, then shared modules, then popup logic -->
   <script src="shared/constants.js"></script>
   <script src="shared/config.js"></script>

extension/popup.js

@@ -15,10 +15,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnCorrect = document.getElementById('btn-correct');
   const btnClear = document.getElementById('btn-clear');
   const btnApplyAll = document.getElementById('btn-apply-all');
-  const btnCopyResult = document.getElementById('btn-copy-result');
+  const btnCopyText = document.getElementById('btn-copy-text');
   const scoreSection = document.getElementById('score-section');
-  const resultSection = document.getElementById('result-section');
-  const resultText = document.getElementById('result-text');
   const suggestionsSection = document.getElementById('suggestions-section');
   const suggestionsList = document.getElementById('suggestions-list');
   const timingSection = document.getElementById('timing-section');
@@ -28,11 +26,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Summary tab elements
   const summaryInputText = document.getElementById('summary-input-text');
-  const summaryCharCount = document.getElementById('summary-char-count');
+  const summaryWordCountInput = document.getElementById('summary-word-count-input');
   const btnSummarize = document.getElementById('btn-summarize');
   const summaryResultSection = document.getElementById('summary-result-section');
   const summaryText = document.getElementById('summary-text');
-  const summaryMeta = document.getElementById('summary-meta');
+  const summaryStats = document.getElementById('summary-stats');
+  const summaryWordCount = document.getElementById('summary-word-count');
+  const summaryCompression = document.getElementById('summary-compression');
   const btnCopySummary = document.getElementById('btn-copy-summary');
 
   // Score elements
@@ -64,6 +64,54 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const SCORE_CIRCUMFERENCE = 440;
 
+  // ══════════════════════════════════════════════════════════
+  // State persistence — survive popup close/reopen
+  // ══════════════════════════════════════════════════════════
+  const STORAGE_KEY = 'bayan_popup_state';
+
+  function saveState() {
+    const activeTab = document.querySelector('.bayan-tab.active');
+    const state = {
+      tab: activeTab ? activeTab.dataset.tab : 'correct',
+      inputText: inputText.value,
+      summaryInput: summaryInputText.value,
+      dialectInput: document.getElementById('dialect-input-text')?.value || '',
+      quranInput: document.getElementById('quran-input-text')?.value || '',
+    };
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch { /* quota exceeded — ignore */ }
+  }
+
+  function restoreState() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const state = JSON.parse(raw);
+
+      if (state.inputText) {
+        inputText.value = state.inputText;
+        updateCounts(inputText, charCount, wordCount);
+      }
+      if (state.summaryInput) {
+        summaryInputText.value = state.summaryInput;
+        const words = state.summaryInput.trim() ? state.summaryInput.trim().split(/\s+/).length : 0;
+        if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+      }
+      const dialectEl = document.getElementById('dialect-input-text');
+      if (state.dialectInput && dialectEl) dialectEl.value = state.dialectInput;
+      const quranEl = document.getElementById('quran-input-text');
+      if (state.quranInput && quranEl) quranEl.value = state.quranInput;
+
+      if (state.tab && state.tab !== 'correct') {
+        const tabBtn = document.querySelector(`.bayan-tab[data-tab="${state.tab}"]`);
+        if (tabBtn) tabBtn.click();
+      }
+    } catch { /* corrupt state — ignore */ }
+  }
+
+  restoreState();
+
   // ══════════════════════════════════════════════════════════
   // Tab switching
   // ══════════════════════════════════════════════════════════
@@ -77,6 +125,7 @@ document.addEventListener('DOMContentLoaded', () => {
       document.querySelectorAll('.bayan-panel').forEach((p) => {
         p.classList.toggle('active', p.id === `panel-${targetTab}`);
       });
+      saveState();
     });
   });
 
@@ -93,6 +142,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   inputText.addEventListener('input', () => {
     updateCounts(inputText, charCount, wordCount);
+    saveState();
 
     // MED-2: Detect user edit after analysis → mark stale
     if (currentSuggestions.length > 0 && inputText.value !== analyzedText) {
@@ -100,7 +150,12 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  summaryInputText.addEventListener('input', () => updateCounts(summaryInputText, summaryCharCount, null));
+  summaryInputText.addEventListener('input', () => {
+    const text = summaryInputText.value.trim();
+    const words = text ? text.split(/\s+/).length : 0;
+    if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+    saveState();
+  });
 
   // ══════════════════════════════════════════════════════════
   // MED-2: Staleness management
@@ -111,17 +166,13 @@ document.addEventListener('DOMContentLoaded', () => {
    * Disables suggestion actions and shows a re-analysis prompt.
    */
   function markStale() {
-    if (isStale) return; // already stale
+    if (isStale) return;
     isStale = true;
 
-    // Visual indicator: dim the results area
-    if (resultSection) resultSection.classList.add('bayan-stale');
     if (suggestionsSection) suggestionsSection.classList.add('bayan-stale');
 
-    // Show re-analysis toast
     showToast('⚠ النص تغيّر — أعد التحليل لتحديث الاقتراحات', 4000);
 
-    // Update button text to indicate re-analysis needed
     btnCorrect.innerHTML = `
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0114-3M20 15a8 8 0 01-14 3"/></svg>
       إعادة التحليل`;
@@ -132,10 +183,8 @@ document.addEventListener('DOMContentLoaded', () => {
    */
   function clearStale() {
     isStale = false;
-    if (resultSection) resultSection.classList.remove('bayan-stale');
     if (suggestionsSection) suggestionsSection.classList.remove('bayan-stale');
 
-    // Restore button text
     btnCorrect.innerHTML = `
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg>
       تحليل وتصحيح`;
@@ -236,10 +285,8 @@ document.addEventListener('DOMContentLoaded', () => {
         updateScore(counts.spelling, counts.grammar, counts.punctuation);
         renderSuggestions(currentSuggestions);
 
-        // Re-render highlighted text with updated offsets
-        resultText.innerHTML = renderHighlightedText(analyzedText, currentSuggestions);
-
         showToast('✓ تم التصحيح');
+        saveState();
       });
     });
 
@@ -255,11 +302,11 @@ document.addEventListener('DOMContentLoaded', () => {
     analyzedText = '';
     updateCounts(inputText, charCount, wordCount);
     scoreSection.classList.add('is-hidden');
-    resultSection.classList.add('is-hidden');
     suggestionsSection.classList.add('is-hidden');
     timingSection.classList.add('is-hidden');
     currentSuggestions = [];
     clearStale();
+    saveState();
   });
 
   // ══════════════════════════════════════════════════════════
@@ -271,8 +318,8 @@ document.addEventListener('DOMContentLoaded', () => {
       showToast('أدخل نصاً للتحليل');
       return;
     }
-    if (text.length < CONFIG.MIN_ANALYZE_LENGTH) {
-      showToast('النص قصير جداً (الحد الأدنى ١٥ حرفاً)');
+    if (text.trim().split(/\s+/).length < 2) {
+      showToast('أدخل كلمتين على الأقل');
       return;
     }
     if (text.length > CONFIG.MAX_ANALYZE_LENGTH) {
@@ -296,9 +343,8 @@ document.addEventListener('DOMContentLoaded', () => {
         inputText.value = analyzedText;
         updateCounts(inputText, charCount, wordCount);
 
-        // Show corrected text with highlights
-        resultSection.classList.remove('is-hidden');
-        resultText.innerHTML = renderHighlightedText(analyzedText, suggestions);
+        // Show corrected text in textarea
+        // (suggestions apply directly to textarea via chips or Apply All)
 
         // Update score
         const counts = countByType(suggestions);
@@ -316,6 +362,8 @@ document.addEventListener('DOMContentLoaded', () => {
         if (suggestions.length === 0) {
           showToast('نصك ممتاز! لم نجد أي أخطاء ✨');
         }
+
+        saveState();
       } else {
         showToast('تعذّر التحليل — حاول مرة أخرى');
       }
@@ -344,22 +392,36 @@ document.addEventListener('DOMContentLoaded', () => {
     inputText.value = analyzedText;
     updateCounts(inputText, charCount, wordCount);
     currentSuggestions = [];
-    resultText.innerHTML = escapeHtml(analyzedText);
     updateScore(0, 0, 0);
     renderSuggestions([]);
     showToast('✓ تم تطبيق جميع التصحيحات');
+    saveState();
   });
 
   // ══════════════════════════════════════════════════════════
-  // Copy result (MED-1: .catch() for clipboard errors)
+  // Copy text from textarea (MED-1: .catch() for clipboard errors)
   // ══════════════════════════════════════════════════════════
-  btnCopyResult.addEventListener('click', () => {
-    const text = resultText.textContent || '';
+  btnCopyText.addEventListener('click', () => {
+    const text = inputText.value || '';
     navigator.clipboard.writeText(text)
       .then(() => showToast('✓ تم نسخ النص'))
       .catch(() => showToast('تعذّر النسخ'));
   });
 
+  // ══════════════════════════════════════════════════════════
+  // Summary mode toggle (paragraph / bullets)
+  // ══════════════════════════════════════════════════════════
+  let summaryMode = 'paragraph';
+
+  document.querySelectorAll('.bayan-mode-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      summaryMode = btn.dataset.mode;
+      document.querySelectorAll('.bayan-mode-btn').forEach((b) => {
+        b.classList.toggle('active', b.dataset.mode === summaryMode);
+      });
+    });
+  });
+
   // ══════════════════════════════════════════════════════════
   // Summarize button
   // ══════════════════════════════════════════════════════════
@@ -383,8 +445,35 @@ document.addEventListener('DOMContentLoaded', () => {
 
       if (data.status === 'success' && data.summary) {
         summaryResultSection.classList.remove('is-hidden');
-        summaryText.textContent = data.summary;
-        summaryMeta.textContent = `النص الأصلي: ${(data.original_length || 0).toLocaleString('ar-EG')} حرف → الملخص: ${(data.summary_length || 0).toLocaleString('ar-EG')} حرف`;
+
+        const summaryContent = data.summary;
+
+        if (summaryMode === 'bullets') {
+          const sentences = summaryContent.split(/[.،؛]\s*/).filter(s => s.trim().length > 2);
+          const ul = document.createElement('ul');
+          ul.style.cssText = 'list-style: disc; padding-right: 1.5rem; direction: rtl; text-align: right;';
+          sentences.forEach(s => {
+            const li = document.createElement('li');
+            li.textContent = s.trim();
+            li.style.marginBottom = '8px';
+            ul.appendChild(li);
+          });
+          summaryText.textContent = '';
+          summaryText.appendChild(ul);
+        } else {
+          summaryText.textContent = summaryContent;
+        }
+
+        const origWords = text.trim().split(/\s+/).length;
+        const sumWords = summaryContent.trim().split(/\s+/).length;
+        const compression = origWords > 0 ? Math.round((1 - sumWords / origWords) * 100) : 0;
+
+        if (summaryStats) {
+          summaryStats.classList.remove('is-hidden');
+          if (summaryWordCount) summaryWordCount.textContent = sumWords.toLocaleString('ar-EG');
+          if (summaryCompression) summaryCompression.textContent = compression.toLocaleString('ar-EG') + '٪';
+        }
+
         showToast('✓ تم التلخيص');
       } else {
         showToast('تعذّر التلخيص — حاول مرة أخرى');
@@ -401,7 +490,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Copy summary (MED-1: .catch() for clipboard errors)
   // ══════════════════════════════════════════════════════════
   btnCopySummary.addEventListener('click', () => {
-    const text = summaryText.textContent || '';
+    const text = summaryText.innerText || summaryText.textContent || '';
     navigator.clipboard.writeText(text)
       .then(() => showToast('✓ تم نسخ الملخص'))
       .catch(() => showToast('تعذّر النسخ'));
@@ -418,7 +507,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnCopyDialect = document.getElementById('btn-copy-dialect');
 
   if (dialectInput) {
-    dialectInput.addEventListener('input', () => updateCounts(dialectInput, dialectCharCount, null));
+    dialectInput.addEventListener('input', () => {
+      const chars = dialectInput.value.length;
+      if (dialectCharCount) dialectCharCount.textContent = chars.toLocaleString('ar-EG');
+      saveState();
+    });
 
     btnDialect.addEventListener('click', async () => {
       const text = dialectInput.value.trim();
@@ -450,147 +543,257 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   // ═══════════════════════════════════════════════════════���══
-  // Quran verification
+  // Quran verification + translation (matching website)
   // ══════════════════════════════════════════════════════════
   const quranInput = document.getElementById('quran-input-text');
   const quranCharCount = document.getElementById('quran-char-count');
   const btnQuran = document.getElementById('btn-quran');
   const quranResultSection = document.getElementById('quran-result-section');
-  const quranText = document.getElementById('quran-text');
-  const quranMeta = document.getElementById('quran-meta');
+  const quranUthmani = document.getElementById('quran-uthmani');
+  const quranReference = document.getElementById('quran-reference');
   const btnCopyQuran = document.getElementById('btn-copy-quran');
+  const quranLangSelect = document.getElementById('quran-lang-select');
+  const quranTransSection = document.getElementById('quran-translation-section');
+  const quranTransText = document.getElementById('quran-trans-text');
+  const quranTransRef = document.getElementById('quran-trans-ref');
+
+  let _quranQuery = '';
+  let _quranVerse = '';
+  let _quranRef = '';
+  let _quranTransText = '';
+  let _quranTransRef = '';
 
   if (quranInput) {
-    quranInput.addEventListener('input', () => updateCounts(quranInput, quranCharCount, null));
+    quranInput.addEventListener('input', () => { updateCounts(quranInput, quranCharCount, null); saveState(); });
 
     btnQuran.addEventListener('click', async () => {
       const text = quranInput.value.trim();
       if (!text) { showToast('أدخل آية للتدقيق'); return; }
 
+      _quranQuery = text;
       setLoading(true, 'جارٍ التدقيق...');
+      quranTransSection.classList.add('is-hidden');
+      quranLangSelect.value = '';
+
       try {
         const data = await bayanQuran(text);
         quranResultSection.classList.remove('is-hidden');
+
         if (data.error) {
-          quranText.textContent = data.error;
-          quranMeta.textContent = '';
-        } else {
-          quranText.textContent = data.full_verse || data.matched_segment || JSON.stringify(data);
-          quranMeta.textContent = data.matched_segment && data.full_verse
-            ? `المقطع المطابق: ${data.matched_segment}`
-            : '';
-          showToast('✓ تم التدقيق');
+          quranUthmani.textContent = data.error;
+          quranReference.textContent = '';
+          return;
         }
+
+        const seg = data.matched_segment || '';
+        const refMatch = seg.match(/【([^】]+)】/);
+        const verseText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
+        const reference = refMatch ? refMatch[1] : '';
+
+        _quranVerse = verseText;
+        _quranRef = reference;
+        quranUthmani.textContent = verseText;
+        quranReference.textContent = reference ? `[${reference}]` : '';
+        showToast('✓ تم التدقيق');
       } catch (error) {
         console.error('[Bayan] Quran error:', error);
-        showToast('خطأ في الاتصال — تحقق من الإنترنت');
+        quranResultSection.classList.remove('is-hidden');
+        quranUthmani.textContent = 'خطأ في الاتصال — تحقق من الإنترنت';
+        quranReference.textContent = '';
       } finally {
         setLoading(false);
       }
     });
 
+    // Translation dropdown
+    quranLangSelect.addEventListener('change', async () => {
+      const lang = quranLangSelect.value;
+      if (!lang || !_quranQuery) return;
+
+      quranTransSection.classList.remove('is-hidden');
+      quranTransText.textContent = '⏳ جاري الترجمة...';
+      if (quranTransRef) quranTransRef.style.display = 'none';
+
+      try {
+        const data = await bayanQuran(_quranQuery, lang);
+
+        if (data.error) {
+          quranTransText.textContent = data.error;
+          return;
+        }
+
+        const seg = data.matched_segment || '';
+        const refMatch = seg.match(/【([^】]+)】/);
+        const transText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
+        const transRef = refMatch ? refMatch[1] : '';
+
+        _quranTransText = transText;
+        _quranTransRef = transRef;
+
+        quranTransText.textContent = transText;
+        if (quranTransRef && transRef) {
+          quranTransRef.textContent = `[${transRef}]`;
+          quranTransRef.style.display = '';
+        }
+        const transActions = document.getElementById('quran-trans-actions');
+        if (transActions) transActions.style.display = 'flex';
+      } catch (error) {
+        console.error('[Bayan] Quran translation error:', error);
+        quranTransText.textContent = 'حدث خطأ في الترجمة';
+      }
+    });
+
     btnCopyQuran.addEventListener('click', () => {
-      navigator.clipboard.writeText(quranText.textContent || '')
+      const text = (_quranVerse || '') + (_quranRef ? ` [${_quranRef}]` : '');
+      navigator.clipboard.writeText(text)
         .then(() => showToast('✓ تم النسخ'))
         .catch(() => showToast('تعذّر النسخ'));
     });
+
+    const btnCopyQuranTrans = document.getElementById('btn-copy-quran-trans');
+    if (btnCopyQuranTrans) {
+      btnCopyQuranTrans.addEventListener('click', () => {
+        const text = (_quranTransText || '') + (_quranTransRef ? ` [${_quranTransRef}]` : '');
+        navigator.clipboard.writeText(text)
+          .then(() => showToast('✓ تم نسخ الترجمة'))
+          .catch(() => showToast('تعذّر النسخ'));
+      });
+    }
   }
 
   // ══════════════════════════════════════════════════════════
-  // Autocomplete suggestions
+  // Summary: File import (.txt / .docx)
+  // ══════════════════════════════════════════════════════════
+  const summaryImportInput = document.getElementById('summary-import-input');
+  if (summaryImportInput) {
+    summaryImportInput.addEventListener('change', (e) => {
+      const file = e.target.files && e.target.files[0];
+      if (!file) return;
+
+      if (file.name.endsWith('.txt')) {
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          summaryInputText.value = ev.target.result;
+          const words = summaryInputText.value.trim() ? summaryInputText.value.trim().split(/\s+/).length : 0;
+          if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+          showToast('✓ تم استيراد الملف');
+          saveState();
+        };
+        reader.readAsText(file, 'UTF-8');
+      } else if (file.name.endsWith('.docx')) {
+        if (typeof mammoth !== 'undefined') {
+          const reader = new FileReader();
+          reader.onload = (ev) => {
+            mammoth.extractRawText({ arrayBuffer: ev.target.result })
+              .then((result) => {
+                summaryInputText.value = result.value;
+                const words = result.value.trim() ? result.value.trim().split(/\s+/).length : 0;
+                if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+                showToast('✓ تم استيراد الملف');
+                saveState();
+              })
+              .catch(() => showToast('خطأ في قراءة الملف'));
+          };
+          reader.readAsArrayBuffer(file);
+        } else {
+          showToast('صيغة .docx غير مدعومة — استخدم .txt');
+        }
+      }
+      e.target.value = '';
+    });
+  }
+
   // ══════════════════════════════════════════════════════════
-  const acInput = document.getElementById('autocomplete-input-text');
-  const acCharCount = document.getElementById('autocomplete-char-count');
-  const btnAutocomplete = document.getElementById('btn-autocomplete');
-  const acResultSection = document.getElementById('autocomplete-result-section');
-  const acList = document.getElementById('autocomplete-list');
+  // Summary: Export dropdown (.txt / .docx / .pdf)
+  // ══════════════════════════════════════════════════════════
+  const btnExportSummary = document.getElementById('btn-export-summary');
+  const summaryExportMenu = document.getElementById('summary-export-menu');
 
-  if (acInput) {
-    acInput.addEventListener('input', () => updateCounts(acInput, acCharCount, null));
+  if (btnExportSummary && summaryExportMenu) {
+    btnExportSummary.addEventListener('click', (e) => {
+      e.stopPropagation();
+      summaryExportMenu.classList.toggle('is-hidden');
+    });
 
-    btnAutocomplete.addEventListener('click', async () => {
-      const text = acInput.value;
-      if (!text.trim() || text.trim().length < 3) { showToast('اكتب ٣ أحرف على الأقل'); return; }
+    document.addEventListener('click', () => {
+      summaryExportMenu.classList.add('is-hidden');
+    });
 
-      setLoading(true, 'جارٍ الاقتراح...');
-      try {
-        const data = await bayanAutocomplete(text, 5);
-        const suggestions = data.suggestions || [];
-        acResultSection.classList.remove('is-hidden');
+    summaryExportMenu.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
 
-        if (suggestions.length === 0) {
-          acList.innerHTML = '<div class="bayan-ac-empty">لا توجد اقتراحات</div>';
-          return;
-        }
+    summaryExportMenu.querySelectorAll('.bayan-export-item').forEach((item) => {
+      item.addEventListener('click', () => {
+        const format = item.dataset.format;
+        const text = (summaryText.innerText || summaryText.textContent || '').trim();
+        if (!text) { showToast('لا يوجد ملخص للتصدير'); return; }
 
-        acList.innerHTML = suggestions
-          .map((s) => `<button class="bayan-alt-chip bayan-alt-chip--main bayan-ac-chip" type="button">${escapeHtml(s)}</button>`)
-          .join('');
-
-        acList.querySelectorAll('.bayan-ac-chip').forEach((chip) => {
-          chip.addEventListener('click', () => {
-            const needsSpace = acInput.value.length > 0 && !/\s$/.test(acInput.value);
-            acInput.value += (needsSpace ? ' ' : '') + chip.textContent;
-            updateCounts(acInput, acCharCount, null);
-            acInput.focus();
-            showToast('✓ تمت الإضافة');
-          });
-        });
-      } catch (error) {
-        console.error('[Bayan] Autocomplete error:', error);
-        showToast('خطأ في الاتصال — تحقق من الإنترنت');
-      } finally {
-        setLoading(false);
-      }
+        summaryExportMenu.classList.add('is-hidden');
+        exportSummary(format, text);
+      });
     });
   }
 
-  // ══════════════════════════════════════════════════════════
-  // Phase 5: Download corrected text / summary as .txt
-  // Buttons are injected programmatically to avoid touching popup.html.
-  // ══════════════════════════════════════════════════════════
-  function downloadTxt(text, filename) {
-    if (!text) { showToast('لا يوجد نص للتنزيل'); return; }
-    try {
-      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      setTimeout(() => URL.revokeObjectURL(url), 1000);
-      showToast('✓ تم تنزيل الملف');
-    } catch (e) {
-      console.error('[Bayan] Download error:', e);
-      showToast('تعذّر التنزيل');
+  function exportSummary(format, text) {
+    if (format === 'txt') {
+      downloadFile(text, 'ملخص-بيان.txt', 'text/plain;charset=utf-8');
+      showToast('✓ تم تصدير الملخص');
+    } else if (format === 'docx') {
+      if (typeof docx === 'undefined') { showToast('مكتبة Word غير محمّلة'); return; }
+      try {
+        const paragraphs = text.split(/\n+/).filter(p => p.trim());
+        const children = paragraphs.map(block =>
+          new docx.Paragraph({
+            bidirectional: true,
+            alignment: docx.AlignmentType.RIGHT,
+            children: [new docx.TextRun({ text: block, rightToLeft: true, font: 'Arial' })]
+          })
+        );
+        const doc = new docx.Document({ sections: [{ properties: { rightToLeft: true }, children }] });
+        docx.Packer.toBlob(doc).then((blob) => {
+          downloadBlob(blob, 'ملخص-بيان.docx');
+          showToast('✓ تم تصدير الملخص كـ Word');
+        }).catch(() => showToast('تعذر تصدير ملف Word'));
+      } catch { showToast('تعذر تصدير ملف Word'); }
+    } else if (format === 'pdf') {
+      if (typeof html2pdf === 'undefined') { showToast('مكتبة PDF غير محمّلة'); return; }
+      showToast('جاري تصدير PDF...');
+      const html = '<div dir="rtl" style="font-family:Arial,sans-serif;font-size:16px;line-height:2;text-align:right;padding:20px;">' +
+        text.split(/\n+/).map(p => '<p>' + p + '</p>').join('') + '</div>';
+      html2pdf().set({
+        margin: [15, 15, 15, 15],
+        filename: 'ملخص-بيان.pdf',
+        image: { type: 'jpeg', quality: 0.95 },
+        html2canvas: { scale: 1.5, useCORS: true, backgroundColor: '#ffffff' },
+        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+      }).from(html, 'string').save()
+        .then(() => showToast('✓ تم تصدير الملخص كـ PDF'))
+        .catch(() => showToast('تعذر تصدير PDF'));
     }
   }
 
-  const DOWNLOAD_ICON = '<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12m0 0l-4-4m4 4l4-4"/></svg>';
-
-  function addDownloadButton(headerEl, getText, filename) {
-    if (!headerEl) return;
-    const btn = document.createElement('button');
-    btn.className = 'bayan-btn-icon';
-    btn.type = 'button';
-    btn.title = 'تنزيل كملف نصي';
-    btn.innerHTML = DOWNLOAD_ICON;
-    btn.addEventListener('click', () => downloadTxt((getText() || '').trim(), filename));
-    headerEl.appendChild(btn);
+  function downloadFile(text, filename, mime) {
+    const blob = new Blob([text], { type: mime });
+    downloadBlob(blob, filename);
   }
 
-  addDownloadButton(
-    btnCopyResult ? btnCopyResult.parentElement : null,
-    () => resultText.textContent,
-    'bayan-corrected.txt'
-  );
-  addDownloadButton(
-    btnCopySummary ? btnCopySummary.parentElement : null,
-    () => summaryText.textContent,
-    'bayan-summary.txt'
-  );
+  function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
+  // ── Close button: close the popup window ──
+  const btnClosePopup = document.getElementById('btn-close-popup');
+  if (btnClosePopup) {
+    btnClosePopup.addEventListener('click', () => window.close());
+  }
 
   // ══════════════════════════════════════════════════════════
   // Status check on load
@@ -661,7 +864,8 @@ document.addEventListener('DOMContentLoaded', () => {
       } else if (data.contextAction === TAB_ACTIONS.summarize) {
         // Fill the summary tab and auto-trigger summarization
         summaryInputText.value = data.contextText;
-        updateCounts(summaryInputText, summaryCharCount, null);
+        const ctxWords = data.contextText.trim() ? data.contextText.trim().split(/\s+/).length : 0;
+        if (summaryWordCountInput) summaryWordCountInput.textContent = ctxWords.toLocaleString('ar-EG');
 
         // Switch to summarize tab
         const summarizeTab = document.querySelector(`[data-tab="${TAB_ACTIONS.summarize}"]`);
@@ -708,4 +912,4 @@ document.addEventListener('DOMContentLoaded', () => {
       chrome.storage.local.set({ theme: targetTheme });
     });
   }
-})();
+})();

extension/shared/bayan-state.js

@@ -1,127 +0,0 @@
-/**
- * Bayan Chrome Extension — Unified State Manager
- *
- * Phase 7: Production Hardening
- *
- * Single source of truth for runtime state across the inline engine.
- * Loaded as a content script BEFORE content-inline.js.
- *
- * Responsibilities:
- *   - Track active field reference (WeakRef for GC safety)
- *   - Store last analyzed text + response
- *   - Track active mode
- *   - Provide clean teardown
- */
-
-// eslint-disable-next-line no-unused-vars
-const BayanState = (() => {
-  'use strict';
-
-  /** @type {WeakRef<HTMLElement>|null} */
-  let _fieldRef = null;
-  let _lastText = '';
-  let _lastHash = '';
-  let _lastResponse = null;
-  /** @type {Array} */
-  let _suggestions = [];
-  let _mode = 'idle'; // idle | inline | sidepanel | contextmenu
-  let _paused = false;
-  let _pauseReason = '';
-
-  /**
-   * Simple FNV-1a hash for text deduplication.
-   * 32-bit, fast, zero dependencies.
-   * @param {string} str
-   * @returns {string}
-   */
-  function hash(str) {
-    let h = 0x811c9dc5;
-    for (let i = 0; i < str.length; i++) {
-      h ^= str.charCodeAt(i);
-      h = Math.imul(h, 0x01000193);
-    }
-    return (h >>> 0).toString(36);
-  }
-
-  return {
-    // ── Field management ──
-    /** @param {HTMLElement} field */
-    setField(field) {
-      _fieldRef = field ? new WeakRef(field) : null;
-    },
-
-    /** @returns {HTMLElement|null} */
-    getField() {
-      return _fieldRef?.deref() ?? null;
-    },
-
-    hasField() {
-      return !!(_fieldRef?.deref());
-    },
-
-    // ── Text + hash ──
-    setLastText(text) {
-      _lastText = text;
-      _lastHash = hash(text);
-    },
-    getLastText() { return _lastText; },
-    getLastHash() { return _lastHash; },
-
-    /**
-     * Check if given text is identical to last analyzed text.
-     * Uses hash comparison (O(1)) instead of string equality (O(n)).
-     */
-    isDuplicate(text) {
-      return hash(text) === _lastHash && text === _lastText;
-    },
-
-    // ── Response cache ──
-    setLastResponse(data) { _lastResponse = data; },
-    getLastResponse() { return _lastResponse; },
-
-    // ── Suggestions ──
-    setSuggestions(suggestions) { _suggestions = suggestions || []; },
-    getSuggestions() { return _suggestions; },
-
-    // ── Mode ──
-    setMode(mode) { _mode = mode; },
-    getMode() { return _mode; },
-
-    // ── Pause state ──
-    pause(reason) {
-      _paused = true;
-      _pauseReason = reason || 'unknown';
-    },
-    resume() {
-      _paused = false;
-      _pauseReason = '';
-    },
-    isPaused() { return _paused; },
-    getPauseReason() { return _pauseReason; },
-
-    // ── Clean teardown ──
-    reset() {
-      _fieldRef = null;
-      _lastText = '';
-      _lastHash = '';
-      _lastResponse = null;
-      _suggestions = [];
-      _mode = 'idle';
-      _paused = false;
-      _pauseReason = '';
-    },
-
-    // ── Debug ──
-    toJSON() {
-      return {
-        hasField: !!(_fieldRef?.deref()),
-        textLength: _lastText.length,
-        hash: _lastHash,
-        suggestions: _suggestions.length,
-        mode: _mode,
-        paused: _paused,
-        pauseReason: _pauseReason,
-      };
-    },
-  };
-})();

extension/shared/css/tokens.css

@@ -0,0 +1,182 @@
+/**
+ * Bayan Design System — Theme Tokens
+ * Comfortable palettes for long Arabic reading (Notion / Grammarly inspired)
+ */
+
+/* ── Shared structural tokens ── */
+:root {
+  --font-family-primary: 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif;
+
+  --font-size-display: 3rem;
+  --font-size-h1: 2.25rem;
+  --font-size-h2: 1.875rem;
+  --font-size-h3: 1.25rem;
+  --font-size-body: 1rem;
+  --font-size-editor: 1.125rem;
+  --font-size-caption: 0.875rem;
+  --font-size-label: 0.75rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-editor: 1.9;
+  --line-height-body: 1.75;
+  --letter-spacing-arabic: 0.015em;
+
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-section: 6rem;
+
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-card: 1rem;
+
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.2s ease;
+  --transition-slow: 0.3s ease;
+  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* ── Dark Theme — soft charcoal, easy on eyes ── */
+:root,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --color-bg: #12141A;
+  --color-surface: #1A1D26;
+  --color-surface-elevated: #242833;
+  --color-editor: #1E2229;
+
+  --color-primary: #6BA3E0;
+  --color-secondary: #A594E8;
+  --color-accent: #6BBECF;
+
+  --color-success: #6BC98A;
+  --color-warning: #E4B35A;
+  --color-error: #E88A8A;
+
+  --color-text-primary: #ECEEF2;
+  --color-text-secondary: #B4BBC6;
+  --color-text-muted: #8A939F;
+  --color-text-inverse: #F4F5F7;
+  --color-placeholder: #9AA3AE;
+
+  --color-border: rgba(236, 238, 242, 0.09);
+  --color-border-strong: rgba(236, 238, 242, 0.16);
+
+  --focus-ring: rgba(107, 163, 224, 0.42);
+
+  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.16);
+  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);
+  --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.38);
+  --shadow-editor: 0 2px 16px rgba(0, 0, 0, 0.2);
+  --shadow-glow: 0 0 20px rgba(107, 163, 224, 0.15);
+
+  --gradient-primary: linear-gradient(135deg, #6BA3E0, #A594E8);
+  --gradient-surface: linear-gradient(180deg, var(--color-surface), var(--color-bg));
+
+  --color-overlay: rgba(8, 10, 14, 0.62);
+
+  --highlight-spelling-bg: rgba(232, 138, 138, 0.16);
+  --highlight-spelling-border: #E88A8A;
+  --highlight-grammar-bg: rgba(228, 179, 90, 0.16);
+  --highlight-grammar-border: #E4B35A;
+  --highlight-punctuation-bg: rgba(107, 201, 138, 0.14);
+  --highlight-punctuation-border: #6BC98A;
+
+  --color-nav-bg: rgba(18, 20, 26, 0.94);
+  --color-badge-spelling-bg: rgba(232, 138, 138, 0.18);
+  --color-badge-grammar-bg: rgba(228, 179, 90, 0.18);
+  --color-badge-punctuation-bg: rgba(107, 201, 138, 0.16);
+  --color-summary-accent-bg: rgba(165, 148, 232, 0.14);
+  --color-summary-accent-border: rgba(165, 148, 232, 0.38);
+  --color-suggestion-hover-bg: rgba(107, 163, 224, 0.12);
+  --color-primary-subtle-bg: rgba(107, 163, 224, 0.14);
+  --color-primary-subtle-border: rgba(107, 163, 224, 0.32);
+
+  --primary-color: var(--color-primary);
+  --secondary-color: var(--color-secondary);
+  --text-color: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --surface-color: var(--color-surface);
+  --background-color: var(--color-bg);
+  --success-color: var(--color-success);
+  --warning-color: var(--color-warning);
+  --error-color: var(--color-error);
+  --nav-bg: var(--color-nav-bg);
+}
+
+/* ── Light Theme — warm paper, strong readable text ── */
+[data-theme="light"] {
+  color-scheme: light;
+
+  --color-bg: #F3F1EC;
+  --color-surface: #FAF9F6;
+  --color-surface-elevated: #EFEBE4;
+  --color-editor: #FFFDF8;
+
+  --color-primary: #2B6CB8;
+  --color-secondary: #6B57A8;
+  --color-accent: #2A8F9E;
+
+  --color-success: #2F8554;
+  --color-warning: #B7791F;
+  --color-error: #C53030;
+
+  --color-text-primary: #1A1D21;
+  --color-text-secondary: #3A424E;
+  --color-text-muted: #5A6472;
+  --color-text-inverse: #FAFAF8;
+  --color-placeholder: #6B7580;
+
+  --color-border: rgba(26, 29, 33, 0.1);
+  --color-border-strong: rgba(26, 29, 33, 0.18);
+
+  --focus-ring: rgba(43, 108, 184, 0.32);
+
+  --shadow-xs: 0 1px 3px rgba(26, 29, 33, 0.05);
+  --shadow-card: 0 6px 20px rgba(26, 29, 33, 0.07);
+  --shadow-popover: 0 14px 36px rgba(26, 29, 33, 0.11);
+  --shadow-editor: 0 1px 8px rgba(26, 29, 33, 0.05);
+  --shadow-glow: 0 0 20px rgba(43, 108, 184, 0.1);
+
+  --gradient-primary: linear-gradient(135deg, #2B6CB8, #6B57A8);
+  --gradient-surface: linear-gradient(180deg, var(--color-surface), var(--color-bg));
+
+  --color-overlay: rgba(26, 29, 33, 0.38);
+
+  --highlight-spelling-bg: #FDECEC;
+  --highlight-spelling-border: #C53030;
+  --highlight-grammar-bg: #FEF6E4;
+  --highlight-grammar-border: #B7791F;
+  --highlight-punctuation-bg: #EAF6EE;
+  --highlight-punctuation-border: #2F8554;
+
+  --color-nav-bg: rgba(250, 249, 246, 0.94);
+  --color-badge-spelling-bg: rgba(197, 48, 48, 0.1);
+  --color-badge-grammar-bg: rgba(183, 121, 31, 0.12);
+  --color-badge-punctuation-bg: rgba(47, 133, 84, 0.1);
+  --color-summary-accent-bg: rgba(107, 87, 168, 0.08);
+  --color-summary-accent-border: rgba(107, 87, 168, 0.22);
+  --color-suggestion-hover-bg: rgba(43, 108, 184, 0.07);
+  --color-primary-subtle-bg: rgba(43, 108, 184, 0.09);
+  --color-primary-subtle-border: rgba(43, 108, 184, 0.22);
+
+  --primary-color: var(--color-primary);
+  --secondary-color: var(--color-secondary);
+  --text-color: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --surface-color: var(--color-surface);
+  --background-color: var(--color-bg);
+  --success-color: var(--color-success);
+  --warning-color: var(--color-warning);
+  --error-color: var(--color-error);
+  --nav-bg: var(--color-nav-bg);
+}

extension/sidepanel/sidepanel.css

@@ -1,43 +1,46 @@
 /* ══════════════════════════════════════════════
    Bayan Side Panel — Styles
    Persistent workspace | RTL | Dark premium
+   Matches popup design system
    ══════════════════════════════════════════════ */
 
 /* ── Design Tokens (shared with popup) ── */
 :root {
-  --sp-primary: #6366f1;
-  --sp-primary-light: #818cf8;
-  --sp-primary-dark: #4f46e5;
-  --sp-primary-glow: rgba(99, 102, 241, 0.25);
+  --sp-primary: var(--color-primary, #6BA3E0);
+  --sp-primary-light: var(--color-secondary, #A594E8);
+  --sp-primary-dark: var(--color-primary, #6BA3E0);
+  --sp-primary-glow: var(--focus-ring, rgba(107, 163, 224, 0.42));
 
-  --sp-bg: #0f0f14;
-  --sp-surface: #1a1a24;
-  --sp-surface-hover: #22222e;
-  --sp-surface-active: #2a2a38;
-  --sp-border: #2d2d3d;
-  --sp-border-light: #3a3a4d;
+  --sp-bg: var(--color-bg, #12141A);
+  --sp-surface: var(--color-surface, #1A1D26);
+  --sp-surface-hover: var(--color-surface-elevated, #242833);
+  --sp-surface-active: var(--color-surface-elevated, #242833);
+  --sp-border: var(--color-border, rgba(236, 238, 242, 0.09));
+  --sp-border-light: var(--color-border-strong, rgba(236, 238, 242, 0.16));
 
-  --sp-text: #f0f0f5;
-  --sp-text-secondary: #9898ad;
-  --sp-text-muted: #6b6b80;
+  --sp-text: var(--color-text-primary, #ECEEF2);
+  --sp-text-secondary: var(--color-text-secondary, #B4BBC6);
+  --sp-text-muted: var(--color-text-muted, #8A939F);
 
-  --sp-success: #22c55e;
-  --sp-warning: #f59e0b;
-  --sp-error: #ef4444;
+  --sp-success: var(--color-success, #6BC98A);
+  --sp-warning: var(--color-warning, #E4B35A);
+  --sp-error: var(--color-error, #E88A8A);
 
-  --sp-spelling: #ef4444;
-  --sp-grammar: #f59e0b;
-  --sp-punctuation: #6BC98A;
+  --sp-spelling: var(--color-error, #E88A8A);
+  --sp-grammar: var(--color-warning, #E4B35A);
+  --sp-punctuation: var(--color-success, #6BC98A);
 
-  --sp-radius: 10px;
-  --sp-radius-sm: 6px;
-  --sp-radius-lg: 14px;
+  --sp-radius: var(--radius-md, 0.75rem);
+  --sp-radius-sm: var(--radius-sm, 0.5rem);
+  --sp-radius-lg: var(--radius-lg, 1rem);
 
-  --sp-font: 'Segoe UI', 'SF Pro', Tahoma, Arial, sans-serif;
-  --sp-font-arabic: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
+  --sp-font: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
+  --sp-font-arabic: var(--font-family-primary, 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif);
 
-  --sp-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  --sp-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  --sp-transition: var(--transition-base, 0.2s ease);
+  --sp-spring: var(--transition-spring, 0.4s cubic-bezier(0.34, 1.56, 0.64, 1));
+
+  --color-surface-hover: var(--color-surface-elevated, #242833);
 }
 
 /* ── Reset ── */
@@ -52,19 +55,18 @@ body {
   min-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
-  font-family: var(--sp-font-arabic);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
   font-size: 13px;
   line-height: 1.6;
-  color: var(--sp-text);
-  background: var(--sp-bg);
+  color: var(--text-color);
+  background: var(--color-bg);
   direction: rtl;
   -webkit-font-smoothing: antialiased;
 }
 
-/* Custom scrollbar */
 ::-webkit-scrollbar { width: 4px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 4px; }
+::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
 
 /* ══════════════════════════════════════════════
    Header
@@ -74,8 +76,8 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  background: linear-gradient(135deg, var(--sp-surface) 0%, rgba(99, 102, 241, 0.08) 100%);
-  border-bottom: 1px solid var(--sp-border);
+  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(99, 102, 241, 0.08) 100%);
+  border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
   z-index: 100;
@@ -91,7 +93,7 @@ body {
 .sp-header-title {
   font-size: 16px;
   font-weight: 700;
-  background: linear-gradient(135deg, var(--sp-primary-light), #a78bfa);
+  background: linear-gradient(135deg, var(--secondary-color), #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing: -0.5px;
@@ -123,31 +125,51 @@ body {
   display: flex;
   gap: 0;
   padding: 0 14px;
-  background: var(--sp-surface);
-  border-bottom: 1px solid var(--sp-border);
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .sp-tab {
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
-  padding: 8px 0;
+  padding: 8px 6px;
   border: none;
   background: transparent;
   color: var(--sp-text-muted);
-  font-family: var(--sp-font-arabic);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
   transition: all var(--sp-transition);
+  position: relative;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.sp-tab::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+  right: 20%;
+  height: 2px;
+  background: var(--primary-color);
+  border-radius: 2px 2px 0 0;
+  opacity: 0;
+  transform: scaleX(0);
+  transition: all var(--sp-spring);
 }
-.sp-tab:hover { color: var(--sp-text-secondary); }
+
+.sp-tab:hover { color: var(--text-color); background: var(--color-surface-hover); }
 .sp-tab.active {
-  color: var(--sp-primary-light);
-  border-bottom-color: var(--sp-primary);
+  color: var(--secondary-color);
+}
+.sp-tab.active::after {
+  opacity: 1;
+  transform: scaleX(1);
 }
 
 /* ══════════════════════════════════════════════
@@ -172,14 +194,27 @@ body {
   margin-bottom: 10px;
 }
 
+.sp-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.sp-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
 .sp-textarea {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid var(--sp-border);
+  border: 1px solid var(--color-border);
   border-radius: var(--sp-radius);
-  background: var(--sp-surface);
-  color: var(--sp-text);
-  font-family: var(--sp-font-arabic);
+  background: var(--color-surface);
+  color: var(--text-color);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
   font-size: 14px;
   line-height: 1.7;
   resize: vertical;
@@ -188,11 +223,11 @@ body {
 }
 .sp-textarea:focus {
   outline: none;
-  border-color: var(--sp-primary);
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 3px var(--sp-primary-glow);
 }
 .sp-textarea::placeholder {
-  color: var(--sp-text-muted);
+  color: var(--color-placeholder, var(--sp-text-muted));
   font-size: 13px;
 }
 
@@ -225,7 +260,7 @@ body {
   padding: 7px 14px;
   border: none;
   border-radius: var(--sp-radius-sm);
-  font-family: var(--sp-font-arabic);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
@@ -234,7 +269,7 @@ body {
 
 .sp-btn-primary {
   flex: 1;
-  background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark));
+  background: linear-gradient(135deg, var(--color-primary, #6BA3E0), var(--color-secondary, #A594E8));
   color: white;
   box-shadow: 0 2px 8px var(--sp-primary-glow);
 }
@@ -247,13 +282,29 @@ body {
 }
 
 .sp-btn-ghost {
-  background: var(--sp-surface);
-  color: var(--sp-text-secondary);
-  border: 1px solid var(--sp-border);
+  background: var(--color-surface);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border);
 }
 .sp-btn-ghost:hover {
-  background: var(--sp-surface-hover);
-  color: var(--sp-text);
+  background: var(--color-surface-hover);
+  color: var(--text-color);
+}
+
+.sp-btn-sm {
+  padding: 5px 12px;
+  font-size: 11px;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--sp-radius-sm);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--sp-transition);
+}
+.sp-btn-sm:hover {
+  background: var(--sp-primary-dark);
 }
 
 .sp-btn-icon {
@@ -264,42 +315,51 @@ body {
   height: 28px;
   border: none;
   border-radius: var(--sp-radius-sm);
-  background: var(--sp-surface);
-  color: var(--sp-text-secondary);
+  background: var(--color-surface);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all var(--sp-transition);
 }
 .sp-btn-icon:hover {
-  background: var(--sp-surface-hover);
-  color: var(--sp-primary-light);
+  background: var(--color-surface-hover);
+  color: var(--secondary-color);
 }
 
 /* ══════════════════════════════════════════════
-   Score
+   Score (matching popup — vertical centered with gradient)
    ══════════════════════════════════════════════ */
 .sp-score {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
-  padding: 12px;
+  text-align: center;
+  padding: 16px 12px;
   margin-bottom: 12px;
-  background: var(--sp-surface);
-  border: 1px solid var(--sp-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--sp-radius);
+  animation: spFadeIn 300ms ease;
+}
+
+.sp-score-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
 }
 
 .sp-score-ring {
   position: relative;
-  width: 64px;
-  height: 64px;
+  width: 120px;
+  height: 120px;
   flex-shrink: 0;
+  margin-bottom: 8px;
 }
 .sp-score-ring svg {
-  width: 100%;
-  height: 100%;
+  display: block;
 }
-.sp-score-ring circle:last-of-type {
-  transition: stroke-dashoffset 800ms cubic-bezier(0.4, 0, 0.2, 1);
+.sp-score-ring circle:last-child {
+  transition: stroke-dashoffset 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .sp-score-value {
@@ -308,43 +368,49 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
-  font-weight: 800;
-  color: var(--sp-primary-light);
-}
-
-.sp-score-details {
-  flex: 1;
-  min-width: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--secondary-color);
 }
 
 .sp-score-hint {
   display: block;
-  font-size: 11px;
-  color: var(--sp-text-secondary);
-  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
 }
 
 .sp-score-counts {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
-  font-size: 10px;
+  justify-content: center;
+}
+
+.sp-count {
+  font-size: 11px;
   color: var(--sp-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 3px;
 }
-.sp-count-spelling strong { color: var(--sp-spelling); }
-.sp-count-grammar strong { color: var(--sp-grammar); }
-.sp-count-punctuation strong { color: var(--sp-punctuation); }
+.sp-count span {
+  font-weight: 700;
+}
+.sp-count-spelling span { color: var(--sp-spelling); }
+.sp-count-grammar span { color: var(--sp-grammar); }
+.sp-count-punctuation span { color: var(--sp-punctuation); }
 
 /* ══════════════════════════════════════════════
    Results
    ══════════════════════════════════════════════ */
 .sp-result {
   margin-bottom: 12px;
-  border: 1px solid var(--sp-border);
+  border: 1px solid var(--color-border);
   border-radius: var(--sp-radius);
-  background: var(--sp-surface);
+  background: var(--color-surface);
   overflow: hidden;
+  animation: spFadeIn 300ms ease;
 }
 
 .sp-result-header {
@@ -354,73 +420,31 @@ body {
   padding: 8px 12px;
   font-size: 11px;
   font-weight: 700;
-  color: var(--sp-text-secondary);
-  background: var(--sp-surface-hover);
-  border-bottom: 1px solid var(--sp-border);
+  color: var(--text-secondary);
+  background: var(--color-surface-hover);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sp-result-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
 }
 
 .sp-result-actions {
   display: flex;
-  gap: 4px;
+  align-items: center;
+  gap: 2px;
 }
 
 .sp-result-text {
   padding: 10px 12px;
   font-size: 14px;
   line-height: 1.8;
-  color: var(--sp-text);
+  color: var(--text-color);
   word-break: break-word;
 }
 
-.sp-summary-meta {
-  padding: 6px 12px 10px;
-  font-size: 10px;
-  color: var(--sp-text-muted);
-}
-
-/* ══════════════════════════════════════════════
-   Quran verse translation
-   ══════════════════════════════════════════════ */
-.sp-quran-translate {
-  padding: 10px 12px 12px;
-  border-top: 1px solid var(--sp-border);
-}
-
-.sp-quran-translate-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.sp-quran-translate-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--sp-text-secondary);
-}
-
-.sp-select {
-  flex: 1;
-  min-width: 140px;
-  padding: 6px 10px;
-  font-size: 13px;
-  color: var(--sp-text);
-  background: var(--sp-surface);
-  border: 1px solid var(--sp-border);
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.sp-select:focus {
-  outline: none;
-  border-color: var(--sp-primary);
-}
-
-.sp-select option {
-  background: var(--sp-surface);
-  color: var(--sp-text);
-}
-
 /* ══════════════════════════════════════════════
    Highlighted text (from bayan-renderer.js)
    ══════════════════════════════════════════════ */
@@ -451,14 +475,20 @@ body {
    ══════════════════════════════════════════════ */
 .sp-suggestions {
   margin-bottom: 12px;
+  animation: spFadeIn 300ms ease;
 }
 
 .sp-suggestions-header {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--sp-text-secondary);
-  margin-bottom: 6px;
-  padding: 0 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.sp-suggestions-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
 }
 
 .sp-suggestions-list {
@@ -467,31 +497,17 @@ body {
   gap: 6px;
 }
 
-/* Autocomplete suggestion chips (إكمال tab) — horizontal wrap */
-#autocomplete-list {
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.sp-ac-chip {
-  cursor: pointer;
-}
-.sp-ac-empty {
-  color: var(--sp-text-muted, #94a3b8);
-  font-size: 13px;
-  padding: 4px 2px;
-}
-
 /* Suggestion card — reuses bayan-ui.js HTML classes */
 .bayan-suggestion-card {
   padding: 8px 10px;
-  background: var(--sp-surface);
-  border: 1px solid var(--sp-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: var(--sp-radius-sm);
   transition: border-color var(--sp-transition), background var(--sp-transition);
 }
 .bayan-suggestion-card:hover {
   border-color: var(--sp-border-light);
-  background: var(--sp-surface-hover);
+  background: var(--color-surface-hover);
 }
 
 .bayan-suggestion-badge {
@@ -538,26 +554,26 @@ body {
 
 .bayan-alt-chip {
   padding: 3px 8px;
-  border: 1px solid var(--sp-border);
+  border: 1px solid var(--color-border);
   border-radius: 12px;
-  background: var(--sp-surface-hover);
-  color: var(--sp-text);
-  font-family: var(--sp-font-arabic);
+  background: var(--color-surface-hover);
+  color: var(--text-color);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
   font-size: 11px;
   cursor: pointer;
   transition: all var(--sp-transition);
 }
 .bayan-alt-chip:hover {
-  border-color: var(--sp-primary);
+  border-color: var(--primary-color);
   background: var(--sp-primary-glow);
 }
 .bayan-alt-chip--main {
-  border-color: var(--sp-primary);
+  border-color: var(--primary-color);
   background: rgba(99, 102, 241, 0.1);
-  color: var(--sp-primary-light);
+  color: var(--secondary-color);
 }
 .bayan-alt-chip--keep {
-  border-color: var(--sp-border);
+  border-color: var(--color-border);
   color: var(--sp-text-muted);
   font-size: 10px;
 }
@@ -567,12 +583,176 @@ body {
 }
 
 /* ══════════════════════════════════════════════
-   Radio group (summary length)
+   Summary Mode Toggle (paragraph / bullets)
+   ══════════════════════════════════════════════ */
+.sp-mode-toggle {
+  display: flex;
+  gap: 0;
+  margin-bottom: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--sp-radius-sm);
+  overflow: hidden;
+}
+
+.sp-mode-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 7px 10px;
+  border: none;
+  background: transparent;
+  color: var(--sp-text-muted);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--sp-transition);
+}
+
+.sp-mode-btn + .sp-mode-btn {
+  border-right: 1px solid var(--color-border);
+}
+
+.sp-mode-btn:hover {
+  background: var(--color-surface-hover);
+  color: var(--text-color);
+}
+
+.sp-mode-btn.active {
+  background: var(--primary-color);
+  color: white;
+}
+
+/* ══════════════════════════════════════════════
+   Summary Stats
+   ══════════════════════════════════════════════ */
+.sp-summary-stats {
+  display: flex;
+  gap: 16px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sp-summary-stat {
+  font-size: 11px;
+  color: var(--sp-text-muted);
+  display: flex;
+  gap: 4px;
+}
+
+.sp-summary-stat-value {
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+/* ══════════════════════════════════════════════
+   Description paragraph (dialect panel)
+   ══════════════════════════════════════════════ */
+.sp-description {
+  font-size: 11px;
+  color: var(--sp-text-muted);
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+/* ══════════════════════════════════════════════
+   Input meta row (word count + import)
+   ══════════════════════════════════════════════ */
+.sp-input-meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 6px;
+}
+
+.sp-input-meta {
+  font-size: 11px;
+  color: var(--sp-text-muted);
+}
+
+.sp-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+.sp-import-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--sp-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--sp-transition);
+}
+
+.sp-import-btn:hover {
+  background: var(--color-surface-hover);
+  color: var(--text-color);
+  border-color: var(--primary-color);
+}
+
+/* ══════════════════════════════════════════════
+   Export dropdown
+   ══════════════════════════════════════════════ */
+.sp-export-dropdown {
+  position: relative;
+}
+
+.sp-export-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 130px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--sp-radius-sm);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  z-index: 50;
+  overflow: hidden;
+}
+
+.sp-export-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-color);
+  font-family: var(--font-family-primary, 'Cairo', 'Tajawal', sans-serif);
+  font-size: 12px;
+  text-align: right;
+  cursor: pointer;
+  transition: background var(--sp-transition);
+}
+
+.sp-export-item:hover {
+  background: var(--color-surface-hover);
+}
+
+/* ══════════════════════════════════════════════
+   Length selector
    ══════════════════════════════════════════════ */
+.sp-length-selector {
+  margin-bottom: 12px;
+}
+
 .sp-radio-group {
   display: flex;
   gap: 12px;
-  margin-bottom: 10px;
+  margin-top: 4px;
   padding: 0 2px;
 }
 
@@ -581,22 +761,105 @@ body {
   align-items: center;
   gap: 4px;
   font-size: 11px;
-  color: var(--sp-text-secondary);
+  color: var(--text-secondary);
   cursor: pointer;
 }
 .sp-radio input[type="radio"] {
-  accent-color: var(--sp-primary);
+  accent-color: var(--primary-color);
   width: 13px;
   height: 13px;
 }
 
+/* ══════════════════════════════════════════════
+   Quran result (matching popup)
+   ══════════════════════════════════════════════ */
+.sp-quran-result {
+  background: var(--color-surface);
+  border: 1px solid rgba(6, 182, 212, 0.2);
+  border-radius: var(--sp-radius);
+  padding: 14px;
+  animation: spFadeIn 300ms ease;
+}
+
+.sp-quran-result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.sp-quran-uthmani {
+  font-family: 'Amiri Quran', 'Cairo', serif;
+  font-size: 20px;
+  line-height: 2.2;
+  text-align: center;
+  color: var(--text-color);
+  margin-bottom: 4px;
+}
+
+.sp-quran-reference {
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #06b6d4;
+  margin-bottom: 8px;
+}
+
+.sp-quran-translate {
+  border-top: 1px solid var(--color-border);
+  padding-top: 10px;
+  margin-top: 10px;
+}
+
+.sp-quran-translate-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.sp-quran-translation {
+  padding: 10px;
+  border-radius: var(--sp-radius-sm);
+  background: rgba(6, 182, 212, 0.06);
+  border: 1px solid rgba(6, 182, 212, 0.15);
+}
+
+.sp-quran-translation p {
+  font-size: 16px;
+  line-height: 2;
+  text-align: center;
+  color: var(--text-color);
+}
+
+.sp-select {
+  flex: 1;
+  min-width: 140px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--text-color);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.sp-select:focus {
+  outline: none;
+  border-color: #06b6d4;
+}
+.sp-select option {
+  background: var(--color-surface);
+  color: var(--text-color);
+}
+
 /* ══════════════════════════════════════════════
    Timing
    ══════════════════════════════════════════════ */
 .sp-timing {
   padding: 6px 10px;
   margin-bottom: 8px;
-  background: var(--sp-surface);
+  background: var(--color-surface);
   border-radius: var(--sp-radius-sm);
   font-size: 10px;
   color: var(--sp-text-muted);
@@ -615,17 +878,17 @@ body {
   align-items: center;
   justify-content: center;
   gap: 12px;
-  background: rgba(15, 15, 20, 0.85);
+  background: var(--color-overlay, rgba(15, 15, 20, 0.85));
   backdrop-filter: blur(6px);
-  color: var(--sp-text);
+  color: var(--text-color);
   font-size: 13px;
 }
 
 .sp-spinner {
   width: 32px;
   height: 32px;
-  border: 3px solid var(--sp-border);
-  border-top-color: var(--sp-primary);
+  border: 3px solid var(--color-border);
+  border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: spSpin 800ms linear infinite;
 }
@@ -643,10 +906,10 @@ body {
   left: 50%;
   transform: translateX(-50%) translateY(60px);
   padding: 8px 16px;
-  background: var(--sp-surface);
-  border: 1px solid var(--sp-border);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 20px;
-  color: var(--sp-text);
+  color: var(--text-color);
   font-size: 12px;
   font-weight: 600;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
@@ -671,6 +934,22 @@ body {
   filter: grayscale(30%);
   transition: opacity var(--sp-transition), filter var(--sp-transition);
 }
+.sp-stale::after {
+  content: '⚠ أعد التحليل';
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 12px;
+  background: var(--sp-warning);
+  color: #000;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 12px;
+  z-index: 10;
+  pointer-events: none;
+  white-space: nowrap;
+}
 
 /* ══════════════════════════════════════════════
    Utilities
@@ -679,22 +958,6 @@ body {
   display: none !important;
 }
 
-
-/* Light Theme Variables */
-[data-theme="light"] {
-  --bayan-bg: #f9fafb;
-  --bayan-surface: #ffffff;
-  --bayan-surface-hover: #f3f4f6;
-  --bayan-surface-active: #e5e7eb;
-  --bayan-border: #e5e7eb;
-  --bayan-border-light: #d1d5db;
-  --bayan-text: #111827;
-  --bayan-text-secondary: #4b5563;
-  --bayan-text-muted: #9ca3af;
-  --bayan-success: #16a34a;
-  --bayan-warning: #d97706;
-}
-
 /* Theme Toggle Button Styles */
 .theme-toggle-animated {
   display: flex;
@@ -704,8 +967,8 @@ body {
   height: 32px;
   border: none;
   border-radius: 50%;
-  background: var(--sp-surface-hover);
-  color: var(--sp-text-secondary);
+  background: var(--color-surface-hover);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
   position: relative;
@@ -714,7 +977,7 @@ body {
 }
 
 .theme-toggle-animated:hover {
-  background: var(--sp-primary);
+  background: var(--primary-color);
   color: #fff;
   transform: rotate(15deg);
 }
@@ -743,21 +1006,3 @@ body {
   transform: rotate(0) scale(1);
   opacity: 1;
 }
-
-
-
-/* Light Theme Variables for Side Panel */
-[data-theme="light"] {
-  --sp-bg: #f9fafb;
-  --sp-surface: #ffffff;
-  --sp-surface-hover: #f3f4f6;
-  --sp-surface-active: #e5e7eb;
-  --sp-border: #e5e7eb;
-  --sp-border-light: #d1d5db;
-  --sp-text: #111827;
-  --sp-text-secondary: #4b5563;
-  --sp-text-muted: #9ca3af;
-  --sp-success: #16a34a;
-  --sp-warning: #d97706;
-}
-

extension/sidepanel/sidepanel.html

@@ -3,7 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
   <title>بيان — لوحة التحليل</title>
+  <link rel="stylesheet" href="../shared/css/tokens.css">
   <link rel="stylesheet" href="sidepanel.css">
 </head>
 <body>
@@ -11,12 +15,12 @@
   <!-- Header -->
   <!-- ══════════════════════════════════════════════ -->
   <header class="sp-header">
-    <div class="sp-header-brand">
+    <a href="https://bayan10-bayan-api.hf.space/" target="_blank" rel="noopener noreferrer" class="sp-header-brand" style="text-decoration:none;color:inherit;">
       <img src="../assets/icons/icon48.png" alt="بيان" width="24" height="24" style="border-radius:5px;">
-      <div style="height:24px; width:2px; background-color:#d1d5db; border-radius:9999px; flex-shrink:0;"></div>
+      <div style="height:24px; width:2px; background-color:var(--color-border-strong, #d1d5db); border-radius:9999px; flex-shrink:0;"></div>
       <span class="sp-header-title">بيان</span>
-    </div>
-    
+    </a>
+
     <div style="display: flex; align-items: center; gap: 12px;">
 <button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button">
       <svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
@@ -49,10 +53,6 @@
       <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
       تدقيق النص القرآني
     </button>
-    <button class="sp-tab" role="tab" aria-selected="false" data-tab="autocomplete" id="tab-autocomplete">
-      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-      إكمال
-    </button>
   </nav>
 
   <!-- ══════════════════════════════════════════════ -->
@@ -61,6 +61,17 @@
   <section class="sp-panel active" id="panel-correct" role="tabpanel">
     <!-- Input area -->
     <div class="sp-input-group">
+      <div class="sp-label-row">
+        <label class="sp-label" for="input-text">أدخل النص العربي</label>
+        <div style="display:flex; gap:4px;">
+          <button class="sp-btn-icon" id="btn-apply-page" type="button" title="تطبيق في الصفحة">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          </button>
+          <button class="sp-btn-icon" id="btn-copy-text" type="button" title="نسخ النص">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+          </button>
+        </div>
+      </div>
       <textarea
         id="input-text"
         class="sp-textarea"
@@ -84,52 +95,41 @@
       <button class="sp-btn sp-btn-ghost" id="btn-clear">مسح</button>
     </div>
 
-    <!-- Score ring -->
+    <!-- Suggestions list (above score — matching popup) -->
+    <div class="sp-suggestions is-hidden" id="suggestions-section">
+      <div class="sp-suggestions-header">
+        <span class="sp-suggestions-title">الاقتراحات</span>
+        <button class="sp-btn sp-btn-sm" id="btn-apply-all" type="button">تطبيق الكل</button>
+      </div>
+      <div class="sp-suggestions-list" id="suggestions-list" role="list"></div>
+    </div>
+
+    <!-- Score ring (matching popup — vertical centered with gradient) -->
     <div class="sp-score is-hidden" id="score-section">
+      <span class="sp-score-title">تقييم الكتابة</span>
       <div class="sp-score-ring">
-        <svg viewBox="0 0 160 160">
-          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--sp-border)" stroke-width="8" />
-          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--sp-primary)" stroke-width="8"
+        <svg viewBox="0 0 160 160" width="120" height="120">
+          <defs>
+            <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stop-color="var(--color-primary, #6BA3E0)"/>
+              <stop offset="100%" stop-color="var(--color-secondary, #A594E8)"/>
+            </linearGradient>
+          </defs>
+          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/>
+          <circle cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10"
             stroke-dasharray="440" stroke-dashoffset="440" stroke-linecap="round"
-            id="score-circle" transform="rotate(-90 80 80)" />
+            transform="rotate(-90 80 80)" id="score-circle"/>
         </svg>
         <span class="sp-score-value" id="score-value">--</span>
       </div>
-      <div class="sp-score-details">
-        <span class="sp-score-hint" id="score-hint"></span>
-        <div class="sp-score-counts">
-          <span class="sp-count-spelling">إملائي: <strong id="count-spelling">٠</strong></span>
-          <span class="sp-count-grammar">نحوي: <strong id="count-grammar">٠</strong></span>
-          <span class="sp-count-punctuation">ترقيم: <strong id="count-punctuation">٠</strong></span>
-        </div>
+      <span class="sp-score-hint" id="score-hint">ابدأ الكتابة لرؤية تقييمك</span>
+      <div class="sp-score-counts">
+        <span class="sp-count sp-count-spelling"><span id="count-spelling">٠</span> إملائي</span>
+        <span class="sp-count sp-count-grammar"><span id="count-grammar">٠</span> نحوي</span>
+        <span class="sp-count sp-count-punctuation"><span id="count-punctuation">٠</span> ترقيم</span>
       </div>
     </div>
 
-    <!-- Corrected text result -->
-    <div class="sp-result is-hidden" id="result-section">
-      <div class="sp-result-header">
-        <span>النص المصحح</span>
-        <div class="sp-result-actions">
-          <button class="sp-btn-icon" id="btn-apply-page" title="تطبيق في الصفحة">
-            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-          </button>
-          <button class="sp-btn-icon" id="btn-apply-all" title="تطبيق الكل">
-            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
-          </button>
-          <button class="sp-btn-icon" id="btn-copy-result" title="نسخ">
-            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
-          </button>
-        </div>
-      </div>
-      <div class="sp-result-text" id="result-text" dir="rtl"></div>
-    </div>
-
-    <!-- Suggestions list -->
-    <div class="sp-suggestions is-hidden" id="suggestions-section">
-      <div class="sp-suggestions-header">الاقتراحات</div>
-      <div class="sp-suggestions-list" id="suggestions-list" role="list"></div>
-    </div>
-
     <!-- Timing info -->
     <div class="sp-timing is-hidden" id="timing-section">
       <span id="timing-text"></span>
@@ -140,7 +140,9 @@
   <!-- Summarize Panel -->
   <!-- ══════════════════════════════════════════════ -->
   <section class="sp-panel" id="panel-summarize" role="tabpanel">
+    <!-- Input area -->
     <div class="sp-input-group">
+      <label class="sp-label" for="summary-input-text">أدخل النص للتلخيص</label>
       <textarea
         id="summary-input-text"
         class="sp-textarea"
@@ -149,18 +151,39 @@
         rows="4"
         maxlength="5000"
       ></textarea>
-      <div class="sp-meta-row">
-        <span class="sp-char-count"><span id="summary-char-count">٠</span> حرف</span>
+      <div class="sp-input-meta-row">
+        <span class="sp-input-meta"><span id="summary-word-count-input">٠</span> كلمة</span>
+        <label class="sp-import-btn" title="استيراد ملف">
+          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
+          استيراد ملف
+          <input type="file" id="summary-import-input" class="sp-sr-only" accept=".txt,.docx">
+        </label>
       </div>
     </div>
 
-    <!-- Summary length options -->
-    <div class="sp-radio-group">
-      <label class="sp-radio"><input type="radio" name="summary-length" value="1"> قصير</label>
-      <label class="sp-radio"><input type="radio" name="summary-length" value="2" checked> متوسط</label>
-      <label class="sp-radio"><input type="radio" name="summary-length" value="3"> طويل</label>
+    <!-- Mode toggle (paragraph / bullets) -->
+    <div class="sp-mode-toggle">
+      <button type="button" class="sp-mode-btn active" id="summary-mode-paragraph" data-mode="paragraph">
+        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
+        فقرة
+      </button>
+      <button type="button" class="sp-mode-btn" id="summary-mode-bullets" data-mode="bullets">
+        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
+        نقاط
+      </button>
     </div>
 
+    <!-- Length selector -->
+    <div class="sp-length-selector">
+      <label class="sp-label">طول الملخص</label>
+      <div class="sp-radio-group">
+        <label class="sp-radio"><input type="radio" name="summary-length" value="1"> قصير</label>
+        <label class="sp-radio"><input type="radio" name="summary-length" value="2" checked> متوسط</label>
+        <label class="sp-radio"><input type="radio" name="summary-length" value="3"> طويل</label>
+      </div>
+    </div>
+
+    <!-- Action -->
     <div class="sp-actions">
       <button class="sp-btn sp-btn-primary" id="btn-summarize">
         <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h10M4 18h14"/></svg>
@@ -170,14 +193,33 @@
 
     <!-- Summary result -->
     <div class="sp-result is-hidden" id="summary-result-section">
+      <!-- Summary stats -->
+      <div class="sp-summary-stats is-hidden" id="summary-stats">
+        <div class="sp-summary-stat"><span>كلمات الملخص:</span> <span class="sp-summary-stat-value" id="summary-word-count">٠</span></div>
+        <div class="sp-summary-stat"><span>نسبة الاختصار:</span> <span class="sp-summary-stat-value" id="summary-compression">٠٪</span></div>
+      </div>
       <div class="sp-result-header">
-        <span>الملخص</span>
-        <button class="sp-btn-icon" id="btn-copy-summary" title="نسخ">
-          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
-        </button>
+        <span class="sp-result-title">الملخص</span>
+        <div class="sp-result-actions">
+          <button class="sp-btn-icon" id="btn-apply-summary" type="button" title="تطبيق في الصفحة">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          </button>
+          <button class="sp-btn-icon" id="btn-copy-summary" type="button" title="نسخ">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+          </button>
+          <div class="sp-export-dropdown" id="summary-export-wrap">
+            <button class="sp-btn-icon" id="btn-export-summary" type="button" title="تصدير">
+              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12m0 0l-4-4m4 4l4-4"/></svg>
+            </button>
+            <div class="sp-export-menu is-hidden" id="summary-export-menu">
+              <button type="button" class="sp-export-item" data-format="txt">نصي (.txt)</button>
+              <button type="button" class="sp-export-item" data-format="docx">Word (.docx)</button>
+              <button type="button" class="sp-export-item" data-format="pdf">PDF (.pdf)</button>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="sp-result-text" id="summary-text" dir="rtl"></div>
-      <div class="sp-summary-meta" id="summary-meta"></div>
     </div>
   </section>
 
@@ -186,11 +228,13 @@
   <!-- ══════════════════════════════════════════════ -->
   <section class="sp-panel" id="panel-dialect" role="tabpanel">
     <div class="sp-input-group">
+      <label class="sp-label" for="dialect-input-text">تحويل اللهجات للفصحى</label>
+      <p class="sp-description">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p>
       <textarea
         id="dialect-input-text"
         class="sp-textarea"
         dir="rtl"
-        placeholder="أدخل نصاً بالعامية لتحويله إلى الفصحى..."
+        placeholder="اكتب النص باللهجة هنا..."
         rows="4"
         maxlength="5000"
       ></textarea>
@@ -206,10 +250,15 @@
     </div>
     <div class="sp-result is-hidden" id="dialect-result-section">
       <div class="sp-result-header">
-        <span>النص بالفصحى</span>
-        <button class="sp-btn-icon" id="btn-copy-dialect" title="نسخ">
-          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
-        </button>
+        <span class="sp-result-title" style="color: var(--color-primary, #6BA3E0);">✓ النص بالعربية الفصحى</span>
+        <div class="sp-result-actions">
+          <button class="sp-btn-icon" id="btn-apply-dialect" type="button" title="تطبيق في الصفحة">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          </button>
+          <button class="sp-btn-icon" id="btn-copy-dialect" type="button" title="نسخ">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+          </button>
+        </div>
       </div>
       <div class="sp-result-text" id="dialect-text" dir="rtl"></div>
     </div>
@@ -220,11 +269,12 @@
   <!-- ══════════════════════════════════════════════ -->
   <section class="sp-panel" id="panel-quran" role="tabpanel">
     <div class="sp-input-group">
+      <label class="sp-label" for="quran-input-text">تدقيق الآيات القرآنية</label>
       <textarea
         id="quran-input-text"
         class="sp-textarea"
         dir="rtl"
-        placeholder="أدخل آية أو جزءاً منها للتحقق منها..."
+        placeholder="أدخل آية أو جزءاً منها..."
         rows="4"
         maxlength="2000"
       ></textarea>
@@ -235,24 +285,32 @@
     <div class="sp-actions">
       <button class="sp-btn sp-btn-primary" id="btn-quran">
         <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-        تدقيق الآية
+        بحث وتدقيق
       </button>
     </div>
-    <div class="sp-result is-hidden" id="quran-result-section">
-      <div class="sp-result-header">
-        <span>نتيجة التدقيق</span>
-        <button class="sp-btn-icon" id="btn-copy-quran" title="نسخ">
-          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
-        </button>
+
+    <!-- Quran result (matching popup structure) -->
+    <div class="sp-quran-result is-hidden" id="quran-result-section">
+      <div class="sp-quran-result-header">
+        <span style="color:#06b6d4; font-size:12px; font-weight:700;">✓ النص القرآني المدقق</span>
+        <div class="sp-result-actions">
+          <button class="sp-btn-icon" id="btn-apply-quran" type="button" title="تطبيق في الصفحة">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          </button>
+          <button class="sp-btn-icon" id="btn-copy-quran" type="button" title="نسخ">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+          </button>
+        </div>
       </div>
-      <div class="sp-result-text" id="quran-text" dir="rtl"></div>
-      <div class="sp-summary-meta" id="quran-meta"></div>
+      <p id="quran-uthmani" class="sp-quran-uthmani" dir="rtl"></p>
+      <p id="quran-reference" class="sp-quran-reference"></p>
 
-      <!-- Verse translation (14 languages) -->
-      <div class="sp-quran-translate is-hidden" id="quran-translate-section">
+      <!-- Translation -->
+      <div class="sp-quran-translate">
         <div class="sp-quran-translate-row">
-          <span class="sp-quran-translate-label">ترجمة الآية</span>
-          <select id="quran-lang-select" class="sp-select" dir="ltr">
+          <svg width="14" height="14" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
+          <span style="font-size:12px; font-weight:600; color:var(--text-secondary);">ترجمة الآية</span>
+          <select id="quran-lang-select" class="sp-select">
             <option value="">— اختر لغة —</option>
             <option value="english">🇬🇧 English</option>
             <option value="french">🇫🇷 Français</option>
@@ -269,54 +327,22 @@
             <option value="uzbek">🇺🇿 O'zbek</option>
           </select>
         </div>
-        <div class="sp-result is-hidden" id="quran-translation-result" style="margin-top:8px;">
-          <div class="sp-result-header">
-            <span>الترجمة</span>
-            <div class="sp-result-actions">
-              <button class="sp-btn-icon" id="btn-apply-quran-translation" title="تطبيق في الصفحة">
-                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-              </button>
-              <button class="sp-btn-icon" id="btn-copy-quran-translation" title="نسخ الترجمة">
-                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
-              </button>
-            </div>
+        <div id="quran-translation-section" class="sp-quran-translation is-hidden">
+          <p id="quran-trans-text" dir="auto"></p>
+          <p id="quran-trans-ref" class="sp-quran-reference" style="display:none;"></p>
+          <div class="sp-result-actions" id="quran-trans-actions" style="display:none; justify-content:flex-end; gap:4px; margin-top:8px;">
+            <button class="sp-btn-icon" id="btn-apply-quran-trans" type="button" title="تطبيق الترجمة في الصفحة">
+              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+            </button>
+            <button class="sp-btn-icon" id="btn-copy-quran-trans" type="button" title="نسخ الترجمة">
+              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke-width="2"/></svg>
+            </button>
           </div>
-          <div class="sp-result-text" id="quran-translation-text" dir="auto"></div>
-          <div class="sp-summary-meta" id="quran-translation-ref"></div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- ══════════════════════════════════════════════ -->
-  <!-- Autocomplete Panel (إكمال) -->
-  <!-- ══════════════════════════════════════════════ -->
-  <section class="sp-panel" id="panel-autocomplete" role="tabpanel">
-    <div class="sp-input-group">
-      <textarea
-        id="autocomplete-input-text"
-        class="sp-textarea"
-        dir="rtl"
-        placeholder="اكتب بداية الجملة واحصل على اقتراحات لإكمالها..."
-        rows="4"
-        maxlength="5000"
-      ></textarea>
-      <div class="sp-meta-row">
-        <span class="sp-char-count"><span id="autocomplete-char-count">٠</span> حرف</span>
-      </div>
-    </div>
-    <div class="sp-actions">
-      <button class="sp-btn sp-btn-primary" id="btn-autocomplete">
-        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-        اقترح إكمالاً
-      </button>
-    </div>
-    <div class="sp-suggestions is-hidden" id="autocomplete-result-section">
-      <div class="sp-suggestions-header">اقتراحات الإكمال</div>
-      <div class="sp-suggestions-list" id="autocomplete-list" role="list"></div>
-    </div>
-  </section>
-
   <!-- ══════════════════════════════════════════════ -->
   <!-- Loading Overlay -->
   <!-- ═══════════════════════��══════════════════════ -->
@@ -329,8 +355,11 @@
   <div class="sp-toast" id="toast"></div>
 
   <!-- ══════════════════════════════════════════════ -->
-  <!-- Scripts — reuse ALL shared modules -->
+  <!-- Scripts — vendor libs + shared modules -->
   <!-- ══════════════════════════════════════════════ -->
+  <script src="../shared/vendor/mammoth.browser.min.js"></script>
+  <script src="../shared/vendor/docx.umd.js"></script>
+  <script src="../shared/vendor/html2pdf.bundle.min.js"></script>
   <script src="../shared/constants.js"></script>
   <script src="../shared/config.js"></script>
   <script src="../shared/bayan-renderer.js"></script>
@@ -339,4 +368,4 @@
   <script src="../shared/bayan-api.js"></script>
   <script src="sidepanel.js"></script>
 </body>
-</html>
+</html>

extension/sidepanel/sidepanel.js

@@ -1,18 +1,13 @@
 /**
  * Bayan Chrome Extension — Side Panel Logic
  *
- * Phase 5: Persistent workspace panel
- *
- * Reuses:
- *   - bayanAnalyze(), bayanSummarize(), bayanHealthCheck() from bayan-api.js
- *   - renderHighlightedText(), escapeHtml() from bayan-renderer.js
- *   - buildSuggestionCardHTML(), calculateWritingScore(), getScoreHint() from bayan-ui.js
- *   - applyAndRebase(), applyAllPatches(), sortSuggestions(), countByType(), removeSuggestion() from bayan-patches.js
+ * Persistent workspace panel — reuses shared modules.
  *
  * Key differences from popup.js:
  *   - Persistent: panel stays open across page navigations
  *   - Auto-analysis: text injected from context menu auto-analyzes
  *   - Debounced live updates: re-analyzes on user edits (500ms debounce)
+ *   - Write-back-to-page: can apply corrections/results to the source field
  *   - State persistence: last analysis saved to chrome.storage.session
  */
 
@@ -28,10 +23,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnClear = document.getElementById('btn-clear');
   const btnApplyAll = document.getElementById('btn-apply-all');
   const btnApplyPage = document.getElementById('btn-apply-page');
-  const btnCopyResult = document.getElementById('btn-copy-result');
+  const btnCopyText = document.getElementById('btn-copy-text');
   const scoreSection = document.getElementById('score-section');
-  const resultSection = document.getElementById('result-section');
-  const resultText = document.getElementById('result-text');
   const suggestionsSection = document.getElementById('suggestions-section');
   const suggestionsList = document.getElementById('suggestions-list');
   const timingSection = document.getElementById('timing-section');
@@ -41,11 +34,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Summary tab
   const summaryInputText = document.getElementById('summary-input-text');
-  const summaryCharCount = document.getElementById('summary-char-count');
+  const summaryWordCountInput = document.getElementById('summary-word-count-input');
   const btnSummarize = document.getElementById('btn-summarize');
   const summaryResultSection = document.getElementById('summary-result-section');
   const summaryText = document.getElementById('summary-text');
-  const summaryMeta = document.getElementById('summary-meta');
+  const summaryStats = document.getElementById('summary-stats');
+  const summaryWordCount = document.getElementById('summary-word-count');
+  const summaryCompression = document.getElementById('summary-compression');
   const btnCopySummary = document.getElementById('btn-copy-summary');
 
   // Score
@@ -64,14 +59,10 @@ document.addEventListener('DOMContentLoaded', () => {
   let isStale = false;
   let isAnalyzing = false;
   let contextConsumed = false;
-  let debounceTimer = null;
-  // The exact text the user had selected on the page when this action started
-  // (from the right-click context menu). Used as a precise find/replace anchor
-  // so write-back replaces ONLY that selection, never the whole field.
   let sourceSelectionText = '';
+  let summaryMode = 'paragraph';
 
   const SCORE_CIRCUMFERENCE = 440;
-  const DEBOUNCE_MS = 500;
 
   // ══════════════════════════════════════════════════════════
   // Tab switching
@@ -86,6 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
       document.querySelectorAll('.sp-panel').forEach((p) => {
         p.classList.toggle('active', p.id === `panel-${targetTab}`);
       });
+      saveState();
     });
   });
 
@@ -102,24 +94,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
   inputText.addEventListener('input', () => {
     updateCounts(inputText, charCount, wordCount);
+    saveState();
 
-    // Staleness detection
     if (currentSuggestions.length > 0 && inputText.value !== analyzedText) {
       markStale();
     }
-
-    // Debounced live re-analysis
-    if (debounceTimer) clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      const text = inputText.value.trim();
-      if (text.length >= CONFIG.MIN_ANALYZE_LENGTH && !isAnalyzing) {
-        runAnalysis(text);
-      }
-    }, DEBOUNCE_MS);
   });
 
   summaryInputText.addEventListener('input', () => {
-    updateCounts(summaryInputText, summaryCharCount, null);
+    const text = summaryInputText.value.trim();
+    const words = text ? text.split(/\s+/).length : 0;
+    if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+    saveState();
   });
 
   // ══════════════════════════════════════════════════════════
@@ -128,14 +114,19 @@ document.addEventListener('DOMContentLoaded', () => {
   function markStale() {
     if (isStale) return;
     isStale = true;
-    if (resultSection) resultSection.classList.add('sp-stale');
     if (suggestionsSection) suggestionsSection.classList.add('sp-stale');
+    showToast('⚠ النص تغيّر — أعد التحليل لتحديث الاقتراحات', 4000);
+    btnCorrect.innerHTML = `
+      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0114-3M20 15a8 8 0 01-14 3"/></svg>
+      إعادة التحليل`;
   }
 
   function clearStale() {
     isStale = false;
-    if (resultSection) resultSection.classList.remove('sp-stale');
     if (suggestionsSection) suggestionsSection.classList.remove('sp-stale');
+    btnCorrect.innerHTML = `
+      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg>
+      تحليل وتصحيح`;
   }
 
   // ══════════════════════════════════════════════════════════
@@ -156,13 +147,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // ══════════════════════════════════════════════════════════
   // Write-back to the page field (panel → background → content script)
-  // The side panel is a separate document and cannot touch page DOM
-  // directly; it relays through background.js. `source` lets the content
-  // script decide whether to re-analyze (correct) or suppress (Change 3).
-  //
-  // `find` (optional) is the exact original selected text. When present, the
-  // content script replaces ONLY that occurrence in the field — the most
-  // reliable way to scope the replacement to the user's selection.
   // ══════════════════════════════════════════════════════════
   function writeBackToPage(text, mode = 'auto', source = 'correct', find = '') {
     try {
@@ -208,14 +192,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     if (!suggestions || suggestions.length === 0) {
       suggestionsSection.classList.add('is-hidden');
-      btnApplyAll.classList.add('is-hidden');
       return;
     }
 
     suggestionsSection.classList.remove('is-hidden');
     suggestionsList.innerHTML = suggestions.map((s, i) => buildSuggestionCardHTML(s, i)).join('');
 
-    // Bind alt-chip click events
     suggestionsList.querySelectorAll('.bayan-alt-chip').forEach((chip) => {
       chip.addEventListener('click', (e) => {
         e.stopPropagation();
@@ -243,7 +225,6 @@ document.addEventListener('DOMContentLoaded', () => {
         const counts = countByType(currentSuggestions);
         updateScore(counts.spelling, counts.grammar, counts.punctuation);
         renderSuggestions(currentSuggestions);
-        resultText.innerHTML = renderHighlightedText(analyzedText, currentSuggestions);
         saveState();
         showToast('✓ تم التصحيح');
       });
@@ -256,8 +237,8 @@ document.addEventListener('DOMContentLoaded', () => {
   // Core analysis function
   // ══════════════════════════════════════════════════════════
   async function runAnalysis(text) {
-    if (!text || text.length < CONFIG.MIN_ANALYZE_LENGTH) {
-      showToast('النص قصير جداً (الحد الأدنى ١٥ حرفاً)');
+    if (!text || text.trim().split(/\s+/).length < 2) {
+      showToast('أدخل كلمتين على الأقل');
       return;
     }
     if (text.length > CONFIG.MAX_ANALYZE_LENGTH) {
@@ -280,9 +261,6 @@ document.addEventListener('DOMContentLoaded', () => {
         inputText.value = analyzedText;
         updateCounts(inputText, charCount, wordCount);
 
-        resultSection.classList.remove('is-hidden');
-        resultText.innerHTML = renderHighlightedText(analyzedText, suggestions);
-
         const counts = countByType(suggestions);
         updateScore(counts.spelling, counts.grammar, counts.punctuation);
         renderSuggestions(suggestions);
@@ -319,10 +297,18 @@ document.addEventListener('DOMContentLoaded', () => {
   function saveState() {
     const storage = getStorage();
     if (!storage) return;
+
+    const activeTabEl = document.querySelector('.sp-tab.active');
+    const activeTab = activeTabEl ? activeTabEl.dataset.tab : 'correct';
+
     storage.set({
       spLastText: analyzedText,
       spLastSuggestions: currentSuggestions,
       spLastInput: inputText.value,
+      spLastSummarize: (document.getElementById('summary-input-text') || {}).value || '',
+      spLastDialect: (document.getElementById('dialect-input-text') || {}).value || '',
+      spLastQuran: (document.getElementById('quran-input-text') || {}).value || '',
+      spActiveTab: activeTab
     }).catch(() => {});
   }
 
@@ -331,7 +317,30 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!storage) return false;
 
     try {
-      const data = await storage.get(['spLastText', 'spLastSuggestions', 'spLastInput']);
+      const data = await storage.get(['spLastText', 'spLastSuggestions', 'spLastInput', 'spLastSummarize', 'spLastDialect', 'spLastQuran', 'spActiveTab']);
+
+      if (data.spLastSummarize) {
+        const sInput = document.getElementById('summary-input-text');
+        if (sInput) {
+          sInput.value = data.spLastSummarize;
+          const words = data.spLastSummarize.trim() ? data.spLastSummarize.trim().split(/\s+/).length : 0;
+          if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+        }
+      }
+      if (data.spLastDialect) {
+        const dInput = document.getElementById('dialect-input-text');
+        if (dInput) { dInput.value = data.spLastDialect; updateCounts(dInput, document.getElementById('dialect-char-count'), null); }
+      }
+      if (data.spLastQuran) {
+        const qInput = document.getElementById('quran-input-text');
+        if (qInput) { qInput.value = data.spLastQuran; updateCounts(qInput, document.getElementById('quran-char-count'), null); }
+      }
+
+      if (data.spActiveTab) {
+        const tabBtn = document.querySelector(`.sp-tab[data-tab="${data.spActiveTab}"]`);
+        if (tabBtn) tabBtn.click();
+      }
+
       if (!data.spLastText || !data.spLastSuggestions) return false;
 
       analyzedText = data.spLastText;
@@ -339,9 +348,6 @@ document.addEventListener('DOMContentLoaded', () => {
       inputText.value = data.spLastInput || analyzedText;
       updateCounts(inputText, charCount, wordCount);
 
-      resultSection.classList.remove('is-hidden');
-      resultText.innerHTML = renderHighlightedText(analyzedText, currentSuggestions);
-
       const counts = countByType(currentSuggestions);
       updateScore(counts.spelling, counts.grammar, counts.punctuation);
       renderSuggestions(currentSuggestions);
@@ -366,7 +372,6 @@ document.addEventListener('DOMContentLoaded', () => {
     sourceSelectionText = '';
     updateCounts(inputText, charCount, wordCount);
     scoreSection.classList.add('is-hidden');
-    resultSection.classList.add('is-hidden');
     suggestionsSection.classList.add('is-hidden');
     timingSection.classList.add('is-hidden');
     currentSuggestions = [];
@@ -386,7 +391,6 @@ document.addEventListener('DOMContentLoaded', () => {
     inputText.value = analyzedText;
     updateCounts(inputText, charCount, wordCount);
     currentSuggestions = [];
-    resultText.innerHTML = escapeHtml(analyzedText);
     updateScore(0, 0, 0);
     renderSuggestions([]);
     saveState();
@@ -394,25 +398,36 @@ document.addEventListener('DOMContentLoaded', () => {
     showToast('✓ تم تطبيق جميع التصحيحات');
   });
 
-  // Explicit "apply corrected text to the page field" button (Bug 1).
-  // Writes the current corrected text — with any still-pending suggestions
-  // applied — back into the source field, honouring selection vs whole-field.
   if (btnApplyPage) {
     btnApplyPage.addEventListener('click', () => {
-      if (!analyzedText) { showToast('لا يوجد نص للتطبيق'); return; }
+      if (!analyzedText && !inputText.value.trim()) { showToast('لا يوجد نص للتطبيق'); return; }
       if (isStale) { showToast('⚠ أعد التحليل أولاً — النص تغيّر'); return; }
       const finalText = currentSuggestions.length > 0
         ? applyAllPatches(analyzedText, currentSuggestions)
-        : analyzedText;
+        : (analyzedText || inputText.value.trim());
       writeBackToPage(finalText, 'auto', 'correct', sourceSelectionText);
     });
   }
 
-  btnCopyResult.addEventListener('click', () => {
-    const text = resultText.textContent || '';
-    navigator.clipboard.writeText(text)
-      .then(() => showToast('✓ تم نسخ النص'))
-      .catch(() => showToast('تعذّر النسخ'));
+  if (btnCopyText) {
+    btnCopyText.addEventListener('click', () => {
+      const text = inputText.value || '';
+      navigator.clipboard.writeText(text)
+        .then(() => showToast('✓ تم نسخ النص'))
+        .catch(() => showToast('تعذّر النسخ'));
+    });
+  }
+
+  // ══════════════════════════════════════════════════════════
+  // Summary mode toggle (paragraph / bullets)
+  // ══════════════════════════════════════════════════════════
+  document.querySelectorAll('.sp-mode-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      summaryMode = btn.dataset.mode;
+      document.querySelectorAll('.sp-mode-btn').forEach((b) => {
+        b.classList.toggle('active', b.dataset.mode === summaryMode);
+      });
+    });
   });
 
   // ════════════════════════════════���═════════════════════════
@@ -430,8 +445,35 @@ document.addEventListener('DOMContentLoaded', () => {
       const data = await bayanSummarize(text, lengthValue);
       if (data.status === 'success' && data.summary) {
         summaryResultSection.classList.remove('is-hidden');
-        summaryText.textContent = data.summary;
-        summaryMeta.textContent = `النص الأصلي: ${(data.original_length || 0).toLocaleString('ar-EG')} حرف → الملخص: ${(data.summary_length || 0).toLocaleString('ar-EG')} حرف`;
+
+        const summaryContent = data.summary;
+
+        if (summaryMode === 'bullets') {
+          const sentences = summaryContent.split(/[.،؛]\s*/).filter(s => s.trim().length > 2);
+          const ul = document.createElement('ul');
+          ul.style.cssText = 'list-style: disc; padding-right: 1.5rem; direction: rtl; text-align: right;';
+          sentences.forEach(s => {
+            const li = document.createElement('li');
+            li.textContent = s.trim();
+            li.style.marginBottom = '8px';
+            ul.appendChild(li);
+          });
+          summaryText.textContent = '';
+          summaryText.appendChild(ul);
+        } else {
+          summaryText.textContent = summaryContent;
+        }
+
+        const origWords = text.trim().split(/\s+/).length;
+        const sumWords = summaryContent.trim().split(/\s+/).length;
+        const compression = origWords > 0 ? Math.round((1 - sumWords / origWords) * 100) : 0;
+
+        if (summaryStats) {
+          summaryStats.classList.remove('is-hidden');
+          if (summaryWordCount) summaryWordCount.textContent = sumWords.toLocaleString('ar-EG');
+          if (summaryCompression) summaryCompression.textContent = compression.toLocaleString('ar-EG') + '٪';
+        }
+
         showToast('✓ تم التلخيص');
       } else {
         showToast('تعذّر التلخيص — حاول مرة أخرى');
@@ -445,12 +487,149 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   btnCopySummary.addEventListener('click', () => {
-    const text = summaryText.textContent || '';
+    const text = summaryText.innerText || summaryText.textContent || '';
     navigator.clipboard.writeText(text)
       .then(() => showToast('✓ تم نسخ الملخص'))
       .catch(() => showToast('تعذّر النسخ'));
   });
 
+  const btnApplySummary = document.getElementById('btn-apply-summary');
+  if (btnApplySummary) {
+    btnApplySummary.addEventListener('click', () => {
+      const text = summaryText.innerText || summaryText.textContent || '';
+      if (!text) { showToast('لا يوجد ملخص للتطبيق'); return; }
+      writeBackToPage(text, 'auto', 'summarize', sourceSelectionText);
+    });
+  }
+
+  // ══════════════════════════════════════════════════════════
+  // Summary: File import (.txt / .docx)
+  // ══════════════════════════════════════════════════════════
+  const summaryImportInput = document.getElementById('summary-import-input');
+  if (summaryImportInput) {
+    summaryImportInput.addEventListener('change', (e) => {
+      const file = e.target.files && e.target.files[0];
+      if (!file) return;
+
+      if (file.name.endsWith('.txt')) {
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          summaryInputText.value = ev.target.result;
+          const words = summaryInputText.value.trim() ? summaryInputText.value.trim().split(/\s+/).length : 0;
+          if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+          showToast('✓ تم استيراد الملف');
+          saveState();
+        };
+        reader.readAsText(file, 'UTF-8');
+      } else if (file.name.endsWith('.docx')) {
+        if (typeof mammoth !== 'undefined') {
+          const reader = new FileReader();
+          reader.onload = (ev) => {
+            mammoth.extractRawText({ arrayBuffer: ev.target.result })
+              .then((result) => {
+                summaryInputText.value = result.value;
+                const words = result.value.trim() ? result.value.trim().split(/\s+/).length : 0;
+                if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
+                showToast('✓ تم استيراد الملف');
+                saveState();
+              })
+              .catch(() => showToast('خطأ في قراءة الملف'));
+          };
+          reader.readAsArrayBuffer(file);
+        } else {
+          showToast('صيغة .docx غير مدعومة — استخدم .txt');
+        }
+      }
+      e.target.value = '';
+    });
+  }
+
+  // ════════════════════════════════════════════════���═════════
+  // Summary: Export dropdown (.txt / .docx / .pdf)
+  // ══════════════════════════════════════════════════════════
+  const btnExportSummary = document.getElementById('btn-export-summary');
+  const summaryExportMenu = document.getElementById('summary-export-menu');
+
+  if (btnExportSummary && summaryExportMenu) {
+    btnExportSummary.addEventListener('click', (e) => {
+      e.stopPropagation();
+      summaryExportMenu.classList.toggle('is-hidden');
+    });
+
+    document.addEventListener('click', () => {
+      summaryExportMenu.classList.add('is-hidden');
+    });
+
+    summaryExportMenu.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
+    summaryExportMenu.querySelectorAll('.sp-export-item').forEach((item) => {
+      item.addEventListener('click', () => {
+        const format = item.dataset.format;
+        const text = (summaryText.innerText || summaryText.textContent || '').trim();
+        if (!text) { showToast('لا يوجد ملخص للتصدير'); return; }
+
+        summaryExportMenu.classList.add('is-hidden');
+        exportSummary(format, text);
+      });
+    });
+  }
+
+  function exportSummary(format, text) {
+    if (format === 'txt') {
+      downloadFile(text, 'ملخص-بيان.txt', 'text/plain;charset=utf-8');
+      showToast('✓ تم تصدير الملخص');
+    } else if (format === 'docx') {
+      if (typeof docx === 'undefined') { showToast('مكتبة Word غير محمّلة'); return; }
+      try {
+        const paragraphs = text.split(/\n+/).filter(p => p.trim());
+        const children = paragraphs.map(block =>
+          new docx.Paragraph({
+            bidirectional: true,
+            alignment: docx.AlignmentType.RIGHT,
+            children: [new docx.TextRun({ text: block, rightToLeft: true, font: 'Arial' })]
+          })
+        );
+        const doc = new docx.Document({ sections: [{ properties: { rightToLeft: true }, children }] });
+        docx.Packer.toBlob(doc).then((blob) => {
+          downloadBlob(blob, 'ملخص-بيان.docx');
+          showToast('✓ تم تصدير الملخص كـ Word');
+        }).catch(() => showToast('تعذر تصدير ملف Word'));
+      } catch { showToast('تعذر تصدير ملف Word'); }
+    } else if (format === 'pdf') {
+      if (typeof html2pdf === 'undefined') { showToast('مكتبة PDF غير محمّلة'); return; }
+      showToast('جاري تصدير PDF...');
+      const html = '<div dir="rtl" style="font-family:Arial,sans-serif;font-size:16px;line-height:2;text-align:right;padding:20px;">' +
+        text.split(/\n+/).map(p => '<p>' + p + '</p>').join('') + '</div>';
+      html2pdf().set({
+        margin: [15, 15, 15, 15],
+        filename: 'ملخص-بيان.pdf',
+        image: { type: 'jpeg', quality: 0.95 },
+        html2canvas: { scale: 1.5, useCORS: true, backgroundColor: '#ffffff' },
+        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+      }).from(html, 'string').save()
+        .then(() => showToast('✓ تم تصدير الملخص كـ PDF'))
+        .catch(() => showToast('تعذر تصدير PDF'));
+    }
+  }
+
+  function downloadFile(text, filename, mime) {
+    const blob = new Blob([text], { type: mime });
+    downloadBlob(blob, filename);
+  }
+
+  function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
   // ══════════════════════════════════════════════════════════
   // Dialect → MSA conversion
   // ══════════════════════════════════════════════════════════
@@ -462,7 +641,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnCopyDialect = document.getElementById('btn-copy-dialect');
 
   if (dialectInput) {
-    dialectInput.addEventListener('input', () => updateCounts(dialectInput, dialectCharCount, null));
+    dialectInput.addEventListener('input', () => {
+      const chars = dialectInput.value.length;
+      if (dialectCharCount) dialectCharCount.textContent = chars.toLocaleString('ar-EG');
+      saveState();
+    });
 
     btnDialect.addEventListener('click', async () => {
       const text = dialectInput.value.trim();
@@ -491,241 +674,155 @@ document.addEventListener('DOMContentLoaded', () => {
         .then(() => showToast('✓ تم نسخ النص'))
         .catch(() => showToast('تعذّر النسخ'));
     });
+
+    const btnApplyDialect = document.getElementById('btn-apply-dialect');
+    if (btnApplyDialect) {
+      btnApplyDialect.addEventListener('click', () => {
+        const text = dialectText.textContent || '';
+        if (!text) { showToast('لا يوجد نص للتطبيق'); return; }
+        writeBackToPage(text, 'auto', 'dialect', sourceSelectionText);
+      });
+    }
   }
 
   // ══════════════════════════════════════════════════════════
-  // Quran verification
+  // Quran verification + translation (matching popup)
   // ══════════════════════════════════════════════════════════
   const quranInput = document.getElementById('quran-input-text');
   const quranCharCount = document.getElementById('quran-char-count');
   const btnQuran = document.getElementById('btn-quran');
   const quranResultSection = document.getElementById('quran-result-section');
-  const quranText = document.getElementById('quran-text');
-  const quranMeta = document.getElementById('quran-meta');
+  const quranUthmani = document.getElementById('quran-uthmani');
+  const quranReference = document.getElementById('quran-reference');
   const btnCopyQuran = document.getElementById('btn-copy-quran');
-  // Translation sub-UI
-  const quranTranslateSection = document.getElementById('quran-translate-section');
   const quranLangSelect = document.getElementById('quran-lang-select');
-  const quranTranslationResult = document.getElementById('quran-translation-result');
-  const quranTranslationText = document.getElementById('quran-translation-text');
-  const quranTranslationRef = document.getElementById('quran-translation-ref');
-  const btnCopyQuranTranslation = document.getElementById('btn-copy-quran-translation');
-  const btnApplyQuranTranslation = document.getElementById('btn-apply-quran-translation');
-  let lastQuranQuery = '';
-
-  // Parse the API's "(verse text) 【surah:ayah】" segment into {text, ref}.
-  function parseQuranSegment(seg) {
-    seg = seg || '';
-    const refMatch = seg.match(/【([^】]+)】/);
-    const text = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
-    return { text, ref: refMatch ? refMatch[1] : '' };
-  }
+  const quranTransSection = document.getElementById('quran-translation-section');
+  const quranTransText = document.getElementById('quran-trans-text');
+  const quranTransRef = document.getElementById('quran-trans-ref');
+
+  let _quranQuery = '';
+  let _quranVerse = '';
+  let _quranRef = '';
+  let _quranTransText = '';
+  let _quranTransRef = '';
 
   if (quranInput) {
-    quranInput.addEventListener('input', () => updateCounts(quranInput, quranCharCount, null));
+    quranInput.addEventListener('input', () => { updateCounts(quranInput, quranCharCount, null); saveState(); });
 
     btnQuran.addEventListener('click', async () => {
       const text = quranInput.value.trim();
       if (!text) { showToast('أدخل آية للتدقيق'); return; }
 
+      _quranQuery = text;
       setLoading(true, 'جارٍ التدقيق...');
+      quranTransSection.classList.add('is-hidden');
+      quranLangSelect.value = '';
+
       try {
         const data = await bayanQuran(text);
         quranResultSection.classList.remove('is-hidden');
-        // Reset translation UI for the new query.
-        if (quranTranslateSection) quranTranslateSection.classList.add('is-hidden');
-        if (quranTranslationResult) quranTranslationResult.classList.add('is-hidden');
-        if (quranLangSelect) quranLangSelect.value = '';
+
         if (data.error) {
-          quranText.textContent = data.error;
-          quranMeta.textContent = '';
-        } else {
-          quranText.textContent = data.full_verse || data.matched_segment || JSON.stringify(data);
-          quranMeta.textContent = data.matched_segment && data.full_verse
-            ? `المقطع المطابق: ${data.matched_segment}`
-            : '';
-          // Enable translation now that we have a verified verse.
-          lastQuranQuery = text;
-          if (quranTranslateSection) quranTranslateSection.classList.remove('is-hidden');
-          showToast('✓ تم التدقيق');
+          quranUthmani.textContent = data.error;
+          quranReference.textContent = '';
+          return;
         }
+
+        const seg = data.matched_segment || '';
+        const refMatch = seg.match(/【([^】]+)】/);
+        const verseText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
+        const reference = refMatch ? refMatch[1] : '';
+
+        _quranVerse = verseText;
+        _quranRef = reference;
+        quranUthmani.textContent = verseText;
+        quranReference.textContent = reference ? `[${reference}]` : '';
+        showToast('✓ تم التدقيق');
       } catch (error) {
         console.error('[Bayan SP] Quran error:', error);
-        showToast('خطأ في الاتصال — تحقق من الإنترنت');
+        quranResultSection.classList.remove('is-hidden');
+        quranUthmani.textContent = 'خطأ في الاتصال — تحقق من الإنترنت';
+        quranReference.textContent = '';
       } finally {
         setLoading(false);
       }
     });
 
-    // Translate the verified verse into the chosen language.
-    if (quranLangSelect) {
-      quranLangSelect.addEventListener('change', async () => {
-        const lang = quranLangSelect.value;
-        if (!lang || !lastQuranQuery) return;
-
-        setLoading(true, 'جارٍ الترجمة...');
-        try {
-          const data = await bayanQuran(lastQuranQuery, lang);
-          quranTranslationResult.classList.remove('is-hidden');
-          if (data.error) {
-            quranTranslationText.textContent = data.error;
-            quranTranslationRef.textContent = '';
-          } else {
-            const parsed = parseQuranSegment(data.matched_segment || data.full_verse || '');
-            quranTranslationText.textContent = parsed.text || data.full_verse || '';
-            quranTranslationRef.textContent = parsed.ref ? `[${parsed.ref}]` : '';
-            showToast('✓ تمت الترجمة');
-          }
-        } catch (error) {
-          console.error('[Bayan SP] Quran translation error:', error);
-          showToast('خطأ في الاتصال — تحقق من الإنترنت');
-        } finally {
-          setLoading(false);
-        }
-      });
-    }
+    quranLangSelect.addEventListener('change', async () => {
+      const lang = quranLangSelect.value;
+      if (!lang || !_quranQuery) return;
 
-    if (btnCopyQuranTranslation) {
-      btnCopyQuranTranslation.addEventListener('click', () => {
-        navigator.clipboard.writeText(quranTranslationText.textContent || '')
-          .then(() => showToast('✓ تم نسخ الترجمة'))
-          .catch(() => showToast('تعذّر النسخ'));
-      });
-    }
+      quranTransSection.classList.remove('is-hidden');
+      quranTransText.textContent = '⏳ جاري الترجمة...';
+      if (quranTransRef) quranTransRef.style.display = 'none';
 
-    // Apply the translated verse straight into the page field (Req 2).
-    // Routed as 'quran' so the content script suppresses correction re-analysis.
-    if (btnApplyQuranTranslation) {
-      btnApplyQuranTranslation.addEventListener('click', () => {
-        const text = (quranTranslationText.textContent || '').trim();
-        if (!text) { showToast('لا توجد ترجمة للتطبيق'); return; }
-        writeBackToPage(text, 'auto', 'quran', sourceSelectionText);
-      });
-    }
-
-    btnCopyQuran.addEventListener('click', () => {
-      navigator.clipboard.writeText(quranText.textContent || '')
-        .then(() => showToast('✓ تم النسخ'))
-        .catch(() => showToast('تعذّر النسخ'));
-    });
-  }
-
-  // ══════════════════════════════════════════════════════════
-  // Autocomplete suggestions
-  // ══════════════════════════════════════════════════════════
-  const acInput = document.getElementById('autocomplete-input-text');
-  const acCharCount = document.getElementById('autocomplete-char-count');
-  const btnAutocomplete = document.getElementById('btn-autocomplete');
-  const acResultSection = document.getElementById('autocomplete-result-section');
-  const acList = document.getElementById('autocomplete-list');
-
-  if (acInput) {
-    acInput.addEventListener('input', () => updateCounts(acInput, acCharCount, null));
-
-    btnAutocomplete.addEventListener('click', async () => {
-      const text = acInput.value;
-      if (!text.trim() || text.trim().length < 3) { showToast('اكتب ٣ أحرف على الأقل'); return; }
-
-      setLoading(true, 'جارٍ الاقتراح...');
       try {
-        const data = await bayanAutocomplete(text, 5);
-        const suggestions = data.suggestions || [];
-        acResultSection.classList.remove('is-hidden');
+        const data = await bayanQuran(_quranQuery, lang);
 
-        if (suggestions.length === 0) {
-          acList.innerHTML = '<div class="sp-ac-empty">لا توجد اقتراحات</div>';
+        if (data.error) {
+          quranTransText.textContent = data.error;
           return;
         }
 
-        acList.innerHTML = suggestions
-          .map((s) => `<button class="bayan-alt-chip bayan-alt-chip--main sp-ac-chip" type="button">${escapeHtml(s)}</button>`)
-          .join('');
-
-        acList.querySelectorAll('.sp-ac-chip').forEach((chip) => {
-          chip.addEventListener('click', () => {
-            const needsSpace = acInput.value.length > 0 && !/\s$/.test(acInput.value);
-            acInput.value += (needsSpace ? ' ' : '') + chip.textContent;
-            updateCounts(acInput, acCharCount, null);
-            acInput.focus();
-            showToast('✓ تمت الإضافة');
-          });
-        });
+        const seg = data.matched_segment || '';
+        const refMatch = seg.match(/【([^】]+)】/);
+        const transText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
+        const transRef = refMatch ? refMatch[1] : '';
+
+        _quranTransText = transText;
+        _quranTransRef = transRef;
+
+        quranTransText.textContent = transText;
+        if (quranTransRef && transRef) {
+          quranTransRef.textContent = `[${transRef}]`;
+          quranTransRef.style.display = '';
+        }
+        const transActions = document.getElementById('quran-trans-actions');
+        if (transActions) transActions.style.display = 'flex';
       } catch (error) {
-        console.error('[Bayan SP] Autocomplete error:', error);
-        showToast('خطأ في الاتصال — تحقق من الإنترنت');
-      } finally {
-        setLoading(false);
+        console.error('[Bayan SP] Quran translation error:', error);
+        quranTransText.textContent = 'حدث خطأ في الترجمة';
       }
     });
-  }
-
-  // ══════════════════════════════════════════════════════════
-  // Phase 5: Download corrected text / summary as .txt
-  // Buttons injected programmatically to avoid touching sidepanel.html.
-  // ══════════════════════════════════════════════════════════
-  function downloadTxt(text, filename) {
-    if (!text) { showToast('لا يوجد نص للتنزيل'); return; }
-    try {
-      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      setTimeout(() => URL.revokeObjectURL(url), 1000);
-      showToast('✓ تم تنزيل الملف');
-    } catch (e) {
-      console.error('[Bayan SP] Download error:', e);
-      showToast('تعذّر التنزيل');
-    }
-  }
 
-  const SP_DOWNLOAD_ICON = '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12m0 0l-4-4m4 4l4-4"/></svg>';
-
-  function addDownloadButton(anchorBtn, getText, filename) {
-    if (!anchorBtn || !anchorBtn.parentElement) return;
-    const btn = document.createElement('button');
-    btn.className = 'sp-btn-icon';
-    btn.type = 'button';
-    btn.title = 'تنزيل كملف نصي';
-    btn.innerHTML = SP_DOWNLOAD_ICON;
-    btn.addEventListener('click', () => downloadTxt((getText() || '').trim(), filename));
-    anchorBtn.parentElement.appendChild(btn);
-  }
+    btnCopyQuran.addEventListener('click', () => {
+      const text = (_quranVerse || '') + (_quranRef ? ` [${_quranRef}]` : '');
+      navigator.clipboard.writeText(text)
+        .then(() => showToast('✓ تم النسخ'))
+        .catch(() => showToast('تعذّر النسخ'));
+    });
 
-  addDownloadButton(btnCopyResult, () => resultText.textContent, 'bayan-corrected.txt');
-  addDownloadButton(btnCopySummary, () => summaryText.textContent, 'bayan-summary.txt');
+    const btnApplyQuran = document.getElementById('btn-apply-quran');
+    if (btnApplyQuran) {
+      btnApplyQuran.addEventListener('click', () => {
+        const verse = _quranVerse || '';
+        if (!verse) { showToast('لا يوجد نص قرآني للتطبيق'); return; }
+        const textWithRef = verse + (_quranRef ? ` [${_quranRef}]` : '');
+        writeBackToPage(textWithRef, 'auto', 'quran', sourceSelectionText);
+      });
+    }
 
-  // ══════════════════════════════════════════════════════════
-  // "Apply to page" buttons for summarize / dialect / quran results.
-  // These write the model output back into the source page field via
-  // Change 1's relay, tagging the write with its `source` so the content
-  // script suppresses correction re-analysis on it (Change 3).
-  // Injected programmatically to avoid touching sidepanel.html.
-  // ══════════════════════════════════════════════════════════
-  const SP_APPLY_PAGE_ICON = '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
+    const btnCopyQuranTrans = document.getElementById('btn-copy-quran-trans');
+    if (btnCopyQuranTrans) {
+      btnCopyQuranTrans.addEventListener('click', () => {
+        const text = (_quranTransText || '') + (_quranTransRef ? ` [${_quranTransRef}]` : '');
+        navigator.clipboard.writeText(text)
+          .then(() => showToast('✓ تم نسخ الترجمة'))
+          .catch(() => showToast('تعذّر النسخ'));
+      });
+    }
 
-  function addApplyToPageButton(anchorBtn, getText, source) {
-    if (!anchorBtn || !anchorBtn.parentElement) return;
-    const btn = document.createElement('button');
-    btn.className = 'sp-btn-icon';
-    btn.type = 'button';
-    btn.title = 'تطبيق في الصفحة';
-    btn.innerHTML = SP_APPLY_PAGE_ICON;
-    btn.addEventListener('click', () => {
-      const text = (getText() || '').trim();
-      if (!text) { showToast('لا يوجد نص للتطبيق'); return; }
-      writeBackToPage(text, 'auto', source, sourceSelectionText);
-    });
-    anchorBtn.parentElement.appendChild(btn);
+    const btnApplyQuranTrans = document.getElementById('btn-apply-quran-trans');
+    if (btnApplyQuranTrans) {
+      btnApplyQuranTrans.addEventListener('click', () => {
+        const text = _quranTransText || '';
+        if (!text) { showToast('لا يوجد ترجمة للتطبيق'); return; }
+        const textWithRef = text + (_quranTransRef ? ` [${_quranTransRef}]` : '');
+        writeBackToPage(textWithRef, 'auto', 'quran', sourceSelectionText);
+      });
+    }
   }
 
-  addApplyToPageButton(btnCopySummary, () => summaryText.textContent, 'summarize');
-  if (btnCopyDialect) addApplyToPageButton(btnCopyDialect, () => dialectText.textContent, 'dialect');
-  if (btnCopyQuran) addApplyToPageButton(btnCopyQuran, () => quranText.textContent, 'quran');
-
   // ══════════════════════════════════════════════════════════
   // Status check
   // ══════════════════════════════════════════════════════════
@@ -743,17 +840,8 @@ document.addEventListener('DOMContentLoaded', () => {
   })();
 
   // ══════════════════════════════════════════════════════════
-  // Context menu pickup (from background.js → storage)
-  // NOTE: background.js calls sidePanel.open() BEFORE storage.set()
-  // to preserve the user gesture token. This means on first open,
-  // storage may not be ready yet. We retry once after 300ms.
-  // If the panel is ALREADY open, the storage.onChanged listener
-  // below catches new actions in real-time.
+  // Context menu pickup
   // ══════════════════════════════════════════════════════════
-
-  // Dispatch a context action (correct/summarize/dialect/quran) by filling
-  // the matching tab's input, switching to it, and auto-running its model.
-  // Declared after all element refs so dialect/quran handles are in scope.
   function runContextAction(action, text) {
     sourceSelectionText = text;
     if (action === TAB.CORRECT) {
@@ -763,12 +851,14 @@ document.addEventListener('DOMContentLoaded', () => {
       setTimeout(() => runAnalysis(text), 100);
     } else if (action === TAB.SUMMARIZE) {
       summaryInputText.value = text;
-      updateCounts(summaryInputText, summaryCharCount, null);
+      const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+      if (summaryWordCountInput) summaryWordCountInput.textContent = words.toLocaleString('ar-EG');
       document.querySelector(`[data-tab="${TAB.SUMMARIZE}"]`)?.click();
       setTimeout(() => btnSummarize.click(), 100);
     } else if (action === TAB.DIALECT && dialectInput && btnDialect) {
       dialectInput.value = text;
-      updateCounts(dialectInput, dialectCharCount, null);
+      const chars = text.length;
+      if (dialectCharCount) dialectCharCount.textContent = chars.toLocaleString('ar-EG');
       document.querySelector(`[data-tab="${TAB.DIALECT}"]`)?.click();
       setTimeout(() => btnDialect.click(), 120);
     } else if (action === TAB.QURAN && quranInput && btnQuran) {
@@ -789,14 +879,12 @@ document.addEventListener('DOMContentLoaded', () => {
     try {
       const data = await storage.get(['contextAction', 'contextText', 'contextTimestamp']);
 
-      // Storage not ready yet — retry once after 300ms
       if ((!data.contextAction || !data.contextText) && retryCount < 2) {
         setTimeout(() => tryPickupContext(retryCount + 1), 300);
         return;
       }
 
       if (!data.contextAction || !data.contextText) {
-        // No context action after retries — restore previous state
         await restoreState();
         return;
       }
@@ -809,11 +897,8 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       contextConsumed = true;
-
       console.log(`[Bayan SP] Context action: ${data.contextAction}, text: ${data.contextText.length} chars`);
-
       runContextAction(data.contextAction, data.contextText);
-
       chrome.runtime.sendMessage({ type: 'CLEAR_CONTEXT' });
 
     } catch (err) {
@@ -822,7 +907,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  // Start context pickup with retry
   tryPickupContext(0);
 
   // ══════════════════════════════════════════════════════════
@@ -839,9 +923,7 @@ document.addEventListener('DOMContentLoaded', () => {
       if (!action || !text) return;
 
       console.log(`[Bayan SP] Storage changed — new context: ${action}, ${text.length} chars`);
-
       runContextAction(action, text);
-
       chrome.runtime.sendMessage({ type: 'CLEAR_CONTEXT' });
     });
   }
@@ -851,21 +933,18 @@ document.addEventListener('DOMContentLoaded', () => {
 // ── Theme Toggle Logic ──
 (function initBayanThemeToggle() {
   const toggleBtn = document.getElementById('ext-theme-toggle');
-  
-  // Load theme from storage
+
   chrome.storage.local.get(['theme'], (result) => {
-    const currentTheme = result.theme || 'dark'; // default to dark
+    const currentTheme = result.theme || 'dark';
     document.documentElement.setAttribute('data-theme', currentTheme);
   });
 
-  // Sync theme changes instantly across all views
   chrome.storage.onChanged.addListener((changes, namespace) => {
     if (namespace === 'local' && changes.theme) {
       document.documentElement.setAttribute('data-theme', changes.theme.newValue);
     }
   });
 
-
   if (toggleBtn) {
     toggleBtn.addEventListener('click', () => {
       let theme = document.documentElement.getAttribute('data-theme') || 'dark';

extension/tests/api_response_tc2.json

@@ -1,41 +0,0 @@
-{
-    "corrected":  "أنا ذاهب الي البت.",
-    "original":  "انا ذاهب الي البت",
-    "status":  "success",
-    "suggestions":  [
-                        {
-                            "alternatives":  [
-
-                                             ],
-                            "confidence":  0.8,
-                            "correction":  "البت.",
-                            "end":  17,
-                            "id":  "bad18f97-041d-4487-a780-17fc4082447d",
-                            "locked":  true,
-                            "original":  "البت",
-                            "priority":  2,
-                            "start":  13,
-                            "type":  "punctuation"
-                        },
-                        {
-                            "alternatives":  [
-
-                                             ],
-                            "confidence":  1.0,
-                            "correction":  "أنا",
-                            "end":  3,
-                            "id":  "1c3d902b-11a9-4350-86e2-a74e66bb0639",
-                            "locked":  true,
-                            "original":  "انا",
-                            "priority":  1,
-                            "start":  0,
-                            "type":  "spelling"
-                        }
-                    ],
-    "timing_ms":  {
-                      "grammar_ms":  585,
-                      "punctuation_ms":  368,
-                      "spelling_ms":  2585,
-                      "total_ms":  3540
-                  }
-}

extension/tests/debug_offsets.ps1

@@ -1,14 +0,0 @@
-$t = 'أنا ذاهب الى البت والمدرسه'
-Write-Host "Length: $($t.Length)"
-Write-Host "Chars 10-13: '$($t.Substring(10, 3))'"
-Write-Host "Chars 14-17: '$($t.Substring(14, 3))'"
-Write-Host "Chars 19-26: '$($t.Substring(19, 7))'"
-
-# Direct test: substring replacement
-$before = $t.Substring(0, 10)
-$after = $t.Substring(13)
-$result = $before + 'إلى' + $after
-Write-Host "`nReplace [10:13] 'الى' with 'إلى':"
-Write-Host "Result: '$result'"
-Write-Host "Expected: 'أنا ذاهب إلى البت والمدرسه'"
-Write-Host "Match: $($result -eq 'أنا ذاهب إلى البت والمدرسه')"

extension/tests/test_api_real.ps1

@@ -1,80 +0,0 @@
-$ErrorActionPreference = 'Stop'
-
-# Test Case 1: Basic Correction Flow
-Write-Host "═══════════════════════════════════════════════════" -ForegroundColor Cyan
-Write-Host "TEST CASE 1: Basic Correction Flow" -ForegroundColor Cyan
-Write-Host "═══════════════════════════════════════════════════" -ForegroundColor Cyan
-
-$inputText = 'انا ذهبت الي المدرسه اليوم'
-Write-Host "`nInput: `"$inputText`""
-
-$body = @{ text = $inputText } | ConvertTo-Json -Compress
-$response = Invoke-RestMethod -Uri 'https://bayan10-bayan-api.hf.space/api/analyze' -Method POST -Body ([System.Text.Encoding]::UTF8.GetBytes($body)) -ContentType 'application/json; charset=utf-8'
-
-Write-Host "`n── API Response ──" -ForegroundColor Yellow
-Write-Host "Status: $($response.status)"
-Write-Host "Original: `"$($response.original)`""
-Write-Host "Corrected: `"$($response.corrected)`""
-Write-Host "Suggestions count: $($response.suggestions.Count)"
-
-Write-Host "`n── Timing ──" -ForegroundColor Yellow
-Write-Host "Total: $($response.timing_ms.total_ms)ms"
-Write-Host "Spelling: $($response.timing_ms.spelling_ms)ms"
-Write-Host "Grammar: $($response.timing_ms.grammar_ms)ms"
-Write-Host "Punctuation: $($response.timing_ms.punctuation_ms)ms"
-
-Write-Host "`n── Suggestions ──" -ForegroundColor Yellow
-foreach ($s in $response.suggestions) {
-    Write-Host "  [$($s.type)] `"$($s.original)`" → `"$($s.correction)`"  (start:$($s.start), end:$($s.end), id:$($s.id.Substring(0,8))...)"
-    if ($s.alternatives) {
-        Write-Host "    Alternatives: $($s.alternatives -join ', ')"
-    }
-}
-
-# Schema validation
-Write-Host "`n── Schema Validation ──" -ForegroundColor Yellow
-$fields = @('status', 'original', 'corrected', 'suggestions', 'timing_ms')
-foreach ($f in $fields) {
-    $exists = $null -ne $response.$f
-    $icon = if ($exists) { "✅" } else { "❌" }
-    Write-Host "  $icon Field '$f' present"
-}
-
-# Suggestion schema
-if ($response.suggestions.Count -gt 0) {
-    $s = $response.suggestions[0]
-    $sFields = @('id', 'start', 'end', 'original', 'correction', 'type', 'alternatives')
-    foreach ($f in $sFields) {
-        $exists = $null -ne $s.$f
-        $icon = if ($exists) { "✅" } else { "❌" }
-        Write-Host "  $icon Suggestion field '$f' present"
-    }
-}
-
-Write-Host "`n═══════════════════════════════════════════════════" -ForegroundColor Cyan
-Write-Host "TEST CASE 2: Sequential Apply Input" -ForegroundColor Cyan
-Write-Host "═══════════════════════════════════════════════════" -ForegroundColor Cyan
-
-$inputText2 = 'انا ذاهب الي البت'
-Write-Host "`nInput: `"$inputText2`""
-
-$body2 = @{ text = $inputText2 } | ConvertTo-Json -Compress
-$response2 = Invoke-RestMethod -Uri 'https://bayan10-bayan-api.hf.space/api/analyze' -Method POST -Body ([System.Text.Encoding]::UTF8.GetBytes($body2)) -ContentType 'application/json; charset=utf-8'
-
-Write-Host "`n── API Response ──" -ForegroundColor Yellow
-Write-Host "Status: $($response2.status)"
-Write-Host "Original: `"$($response2.original)`""
-Write-Host "Corrected: `"$($response2.corrected)`""
-Write-Host "Suggestions count: $($response2.suggestions.Count)"
-
-Write-Host "`n── Suggestions ──" -ForegroundColor Yellow
-foreach ($s in $response2.suggestions) {
-    Write-Host "  [$($s.type)] `"$($s.original)`" → `"$($s.correction)`"  (start:$($s.start), end:$($s.end))"
-    if ($s.alternatives) {
-        Write-Host "    Alternatives: $($s.alternatives -join ', ')"
-    }
-}
-
-# Save response for browser test
-$response2 | ConvertTo-Json -Depth 5 | Out-File -FilePath 'e:\Atef''s Shit\extension\tests\api_response_tc2.json' -Encoding UTF8
-Write-Host "`n✅ Response saved to api_response_tc2.json"

extension/tests/test_e2e_real.html

@@ -1,319 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-  <meta charset="UTF-8">
-  <title>Bayan — E2E Verification</title>
-  <style>
-    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #0f0f14; color: #f0f0f5; padding: 24px; max-width: 800px; margin: 0 auto; }
-    h1 { color: #818cf8; font-size: 20px; margin-bottom: 20px; }
-    h2 { color: #9898ad; font-size: 16px; margin: 20px 0 10px; border-bottom: 1px solid #2d2d3d; padding-bottom: 6px; }
-    .test-group { margin-bottom: 16px; padding: 12px; background: #1a1a24; border-radius: 8px; border: 1px solid #2d2d3d; }
-    .pass { color: #22c55e; }
-    .fail { color: #ef4444; font-weight: bold; }
-    .result-line { font-size: 13px; margin: 4px 0; font-family: monospace; direction: ltr; text-align: left; }
-    .detail { color: #6b6b80; font-size: 12px; margin-left: 24px; direction: ltr; text-align: left; }
-    .summary { margin-top: 24px; padding: 16px; background: #1a1a24; border-radius: 8px; border: 2px solid #818cf8; font-size: 16px; font-weight: bold; direction: ltr; text-align: center; }
-    #log { white-space: pre-wrap; font-family: monospace; font-size: 12px; color: #9898ad; background: #111118; padding: 12px; border-radius: 8px; margin-top: 12px; direction: ltr; text-align: left; max-height: 300px; overflow-y: auto; }
-    .arabic-text { direction: rtl; text-align: right; font-size: 16px; padding: 8px; background: #22222e; border-radius: 6px; margin: 6px 0; }
-  </style>
-</head>
-<body>
-  <h1>🔬 Bayan — Real E2E Verification</h1>
-  <div id="output"></div>
-  <h2>Execution Log</h2>
-  <div id="log"></div>
-
-  <!-- Load extension modules -->
-  <script src="../shared/config.js"></script>
-  <script src="../shared/bayan-renderer.js"></script>
-  <script src="../shared/bayan-ui.js"></script>
-  <script src="../shared/bayan-patches.js"></script>
-  <script src="../shared/bayan-api.js"></script>
-
-  <script>
-    const outputEl = document.getElementById('output');
-    const logEl = document.getElementById('log');
-    let passed = 0;
-    let failed = 0;
-    let currentGroup = null;
-
-    function log(msg) {
-      logEl.textContent += msg + '\n';
-      console.log(msg);
-    }
-
-    function group(name) {
-      currentGroup = document.createElement('div');
-      currentGroup.className = 'test-group';
-      currentGroup.innerHTML = `<h2 style="margin:0 0 8px;font-size:14px;color:#818cf8">${name}</h2>`;
-      outputEl.appendChild(currentGroup);
-    }
-
-    function assert(condition, message) {
-      const el = document.createElement('div');
-      el.className = 'result-line';
-      if (condition) {
-        passed++;
-        el.innerHTML = `<span class="pass">✅</span> ${message}`;
-      } else {
-        failed++;
-        el.innerHTML = `<span class="fail">❌</span> ${message}`;
-      }
-      currentGroup.appendChild(el);
-    }
-
-    function assertEqual(actual, expected, message) {
-      if (actual === expected) {
-        assert(true, message);
-      } else {
-        assert(false, message);
-        const detail = document.createElement('div');
-        detail.className = 'detail';
-        detail.textContent = `Expected: "${expected}" | Actual: "${actual}"`;
-        currentGroup.appendChild(detail);
-      }
-    }
-
-    function showArabic(text) {
-      const el = document.createElement('div');
-      el.className = 'arabic-text';
-      el.textContent = text;
-      currentGroup.appendChild(el);
-    }
-
-    // ══════════════════════════════════════════════
-    // MAIN TEST RUNNER
-    // ══════════════════════════════════════════════
-    (async function runTests() {
-
-      // ═══════════════════════════════════════════
-      // TEST CASE 1: Basic Correction Flow
-      // ═══════════════════════════════════════════
-      group('TEST CASE 1: API Verification');
-      const INPUT_1 = 'انا ذهبت الي المدرسه اليوم';
-      log(`[TC1] Input: "${INPUT_1}"`);
-
-      let data1;
-      try {
-        data1 = await bayanAnalyze(INPUT_1);
-        log(`[TC1] API response received: status=${data1.status}, suggestions=${data1.suggestions?.length}`);
-        assert(true, 'API call succeeded (no network error)');
-      } catch (err) {
-        assert(false, `API call failed: ${err.message}`);
-        log(`[TC1] ERROR: ${err.message}`);
-        return;
-      }
-
-      // Schema validation
-      assertEqual(data1.status, 'success', 'Response status = "success"');
-      assert(typeof data1.original === 'string', 'Response has "original" (string)');
-      assert(typeof data1.corrected === 'string', 'Response has "corrected" (string)');
-      assert(Array.isArray(data1.suggestions), 'Response has "suggestions" (array)');
-      assert(typeof data1.timing_ms === 'object', 'Response has "timing_ms" (object)');
-      assert(data1.suggestions.length > 0, `Suggestions returned: ${data1.suggestions.length}`);
-
-      // Verify suggestion schema
-      if (data1.suggestions.length > 0) {
-        const s = data1.suggestions[0];
-        assert(typeof s.id === 'string', 'Suggestion has "id"');
-        assert(typeof s.start === 'number', 'Suggestion has "start"');
-        assert(typeof s.end === 'number', 'Suggestion has "end"');
-        assert(typeof s.original === 'string', 'Suggestion has "original"');
-        assert(typeof s.correction === 'string', 'Suggestion has "correction"');
-        assert(typeof s.type === 'string', 'Suggestion has "type"');
-      }
-
-      // Verify offsets match original text
-      group('TEST CASE 1: Offset Correctness');
-      const sorted1 = sortSuggestions(data1.suggestions);
-      sorted1.forEach((s, i) => {
-        const extracted = data1.original.slice(s.start, s.end);
-        assertEqual(extracted, s.original, `Suggestion ${i} offset [${s.start}:${s.end}] extracts "${s.original}"`);
-        log(`[TC1] Suggestion ${i}: [${s.type}] "${s.original}" → "${s.correction}" offset=[${s.start}:${s.end}]`);
-      });
-
-      // Apply All test
-      group('TEST CASE 1: Apply All');
-      const correctedText1 = applyAllPatches(data1.original, data1.suggestions);
-      showArabic(correctedText1);
-      assertEqual(correctedText1, data1.corrected, 'applyAllPatches() === API corrected text');
-      log(`[TC1] applyAllPatches result: "${correctedText1}"`);
-      log(`[TC1] API corrected field:    "${data1.corrected}"`);
-
-      // Highlighted text test
-      group('TEST CASE 1: Rendering');
-      const html1 = renderHighlightedText(data1.original, sorted1);
-      assert(html1.length > 0, 'renderHighlightedText produces non-empty HTML');
-      assert(html1.includes('bayan-spelling-error') || html1.includes('bayan-punctuation-suggestion'), 'HTML contains error highlight classes');
-      log(`[TC1] Highlighted HTML length: ${html1.length} chars`);
-
-      // Score test
-      group('TEST CASE 1: Score Calculation');
-      const counts1 = countByType(data1.suggestions);
-      const score1 = calculateWritingScore(counts1.spelling, counts1.grammar, counts1.punctuation);
-      assert(score1 >= 0 && score1 <= 100, `Score in valid range: ${score1}`);
-      log(`[TC1] Counts: spelling=${counts1.spelling}, grammar=${counts1.grammar}, punctuation=${counts1.punctuation}`);
-      log(`[TC1] Score: ${score1}/100`);
-
-      // ═══════════════════════════════════════════
-      // TEST CASE 2: Sequential Apply
-      // ═══════════════════════════════════════════
-      group('TEST CASE 2: API Call');
-      const INPUT_2 = 'انا ذاهب الي البت';
-      log(`\n[TC2] Input: "${INPUT_2}"`);
-
-      let data2;
-      try {
-        data2 = await bayanAnalyze(INPUT_2);
-        log(`[TC2] API response: status=${data2.status}, suggestions=${data2.suggestions?.length}`);
-        assert(true, 'API call succeeded');
-        assertEqual(data2.status, 'success', 'Status = success');
-      } catch (err) {
-        assert(false, `API call failed: ${err.message}`);
-        return;
-      }
-
-      // Show what the API actually detected
-      group('TEST CASE 2: API-Detected Corrections');
-      data2.suggestions.forEach((s, i) => {
-        assert(true, `[${s.type}] "${s.original}" → "${s.correction}" (${s.start}:${s.end})`);
-      });
-      showArabic(`API corrected: ${data2.corrected}`);
-
-      // Sequential apply using ACTUAL API response
-      group('TEST CASE 2: Sequential Apply (Actual API suggestions)');
-      let text2 = data2.original;
-      let sugs2 = sortSuggestions([...data2.suggestions]);
-      log(`[TC2] Starting sequential apply with ${sugs2.length} suggestions`);
-      log(`[TC2] Initial text: "${text2}"`);
-
-      const applyOrder = [...sugs2]; // Apply in sorted order
-      for (let i = 0; i < applyOrder.length; i++) {
-        const sug = sugs2.find(s => s.id === applyOrder[i].id);
-        if (!sug) {
-          log(`[TC2] Suggestion ${i} already removed, skipping`);
-          continue;
-        }
-
-        // Verify offset before apply
-        const beforeExtract = text2.slice(sug.start, sug.end);
-        assertEqual(beforeExtract, sug.original, `Step ${i+1}: Offset [${sug.start}:${sug.end}] extracts "${sug.original}" BEFORE apply`);
-
-        // Apply and rebase
-        const result = applyAndRebase(text2, sug, sug.correction, sugs2);
-        text2 = result.text;
-        sugs2 = result.suggestions;
-
-        log(`[TC2] Step ${i+1}: Applied "${sug.original}" → "${sug.correction}"`);
-        log(`[TC2] Step ${i+1}: Text now: "${text2}"`);
-        log(`[TC2] Step ${i+1}: Remaining suggestions: ${sugs2.length}`);
-        showArabic(`Step ${i+1}: ${text2}`);
-
-        // Verify ALL remaining suggestion offsets still extract correct text
-        sugs2.forEach((rs, j) => {
-          const extracted = text2.slice(rs.start, rs.end);
-          assertEqual(extracted, rs.original, `Step ${i+1}: Remaining[${j}] offset [${rs.start}:${rs.end}] extracts "${rs.original}"`);
-        });
-      }
-
-      assert(sugs2.length === 0, 'All suggestions applied (0 remaining)');
-      assertEqual(text2, data2.corrected, 'Sequential result === API corrected text');
-
-      // ═══════════════════════════════════════════
-      // TEST CASE 2b: Synthetic test with user's exact scenario
-      // ═══════════════════════════════════════════
-      group('TEST CASE 2b: Synthetic Sequential (User Scenario)');
-      // Simulate the exact scenario the user described,
-      // using manually-constructed suggestions
-      const SYNTH_TEXT = 'انا ذاهب الى البت';
-      const synthIdx_ana = SYNTH_TEXT.indexOf('انا');
-      const synthIdx_ala = SYNTH_TEXT.indexOf('الى');
-      const synthIdx_bet = SYNTH_TEXT.indexOf('البت');
-
-      log(`[TC2b] Synthetic text: "${SYNTH_TEXT}" (length: ${SYNTH_TEXT.length})`);
-      log(`[TC2b] indexOf('انا')=${synthIdx_ana}, indexOf('الى')=${synthIdx_ala}, indexOf('البت')=${synthIdx_bet}`);
-
-      const synthSugs = [
-        { id: 's1', start: synthIdx_ala, end: synthIdx_ala + 3, original: 'الى', correction: 'إلى', type: 'grammar' },
-        { id: 's2', start: synthIdx_bet, end: synthIdx_bet + 4, original: 'البت', correction: 'البيت', type: 'spelling' },
-        { id: 's3', start: synthIdx_ana, end: synthIdx_ana + 3, original: 'انا', correction: 'أنا', type: 'spelling' },
-      ];
-
-      // Verify offsets
-      synthSugs.forEach(s => {
-        assertEqual(SYNTH_TEXT.slice(s.start, s.end), s.original, `Offset check: [${s.start}:${s.end}] = "${s.original}"`);
-      });
-
-      // Step 1: Apply "الى" → "إلى"
-      let sText = SYNTH_TEXT;
-      let sSugs = [...synthSugs];
-      let r1 = applyAndRebase(sText, sSugs[0], 'إلى', sSugs);
-      sText = r1.text;
-      sSugs = r1.suggestions;
-      showArabic(`Step 1 (الى→إلى): ${sText}`);
-      assertEqual(sText, 'انا ذاهب إلى البت', 'Step 1 result correct');
-      assert(sSugs.length === 2, 'Step 1: 2 remaining');
-      // Verify remaining offsets
-      sSugs.forEach(s => {
-        assertEqual(sText.slice(s.start, s.end), s.original, `Step 1: Remaining "${s.original}" offset valid`);
-      });
-
-      // Step 2: Apply "البت" → "البيت" (should be at shifted offset)
-      const sugBet = sSugs.find(s => s.original === 'البت');
-      assert(!!sugBet, 'Found "البت" suggestion in remaining');
-      let r2 = applyAndRebase(sText, sugBet, 'البيت', sSugs);
-      sText = r2.text;
-      sSugs = r2.suggestions;
-      showArabic(`Step 2 (البت→البيت): ${sText}`);
-      assertEqual(sText, 'انا ذاهب إلى البيت', 'Step 2 result correct');
-      assert(sSugs.length === 1, 'Step 2: 1 remaining');
-      sSugs.forEach(s => {
-        assertEqual(sText.slice(s.start, s.end), s.original, `Step 2: Remaining "${s.original}" offset valid`);
-      });
-
-      // Step 3: Apply "انا" → "أنا"
-      const sugAna = sSugs.find(s => s.original === 'انا');
-      assert(!!sugAna, 'Found "انا" suggestion in remaining');
-      let r3 = applyAndRebase(sText, sugAna, 'أنا', sSugs);
-      sText = r3.text;
-      sSugs = r3.suggestions;
-      showArabic(`Step 3 (انا→أنا): ${sText}`);
-
-      // FINAL VERIFICATION
-      assertEqual(sText, 'أنا ذاهب إلى البيت', '🏁 FINAL RESULT matches expected');
-      assert(sSugs.length === 0, 'All suggestions consumed');
-
-      // Verify sequential === applyAllPatches
-      const bulkResult = applyAllPatches(SYNTH_TEXT, synthSugs);
-      assertEqual(sText, bulkResult, 'Sequential === applyAllPatches');
-
-      // ═══════════════════════════════════════════
-      // SUMMARY
-      // ═══════════════════════════════════════════
-      const summary = document.createElement('div');
-      summary.className = 'summary';
-      summary.style.color = failed > 0 ? '#ef4444' : '#22c55e';
-      summary.textContent = `Results: ${passed} passed, ${failed} failed`;
-      outputEl.appendChild(summary);
-
-      const verdict = document.createElement('div');
-      verdict.className = 'summary';
-      verdict.style.marginTop = '12px';
-      if (failed === 0) {
-        verdict.style.color = '#22c55e';
-        verdict.style.borderColor = '#22c55e';
-        verdict.textContent = 'HIGH-1 = COMPLETE (REAL VERIFIED) ✅';
-      } else {
-        verdict.style.color = '#ef4444';
-        verdict.style.borderColor = '#ef4444';
-        verdict.textContent = `HIGH-1 = INCOMPLETE (${failed} failures)`;
-      }
-      outputEl.appendChild(verdict);
-
-      log(`\n${'═'.repeat(50)}`);
-      log(`Results: ${passed} passed, ${failed} failed`);
-      log(`${'═'.repeat(50)}`);
-    })();
-  </script>
-</body>
-</html>

extension/tests/test_inline.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="ar" dir="rtl">
-<head>
-  <meta charset="UTF-8">
-  <title>Bayan Inline Engine — Test</title>
-  <style>
-    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #1a1a2e; color: #f0f0f5; padding: 40px; }
-    h1 { color: #818cf8; margin-bottom: 20px; }
-    textarea { width: 100%; height: 150px; font-size: 16px; padding: 12px; border-radius: 8px;
-      border: 1px solid #3a3a4d; background: #22222e; color: #f0f0f5; direction: rtl; }
-    .field-group { margin-bottom: 30px; }
-    label { display: block; margin-bottom: 8px; color: #9898ad; }
-    [contenteditable] { width: 100%; min-height: 100px; font-size: 16px; padding: 12px; border-radius: 8px;
-      border: 1px solid #3a3a4d; background: #22222e; color: #f0f0f5; direction: rtl; outline: none; }
-    [contenteditable]:focus { border-color: #6366f1; }
-    .instructions { background: #22222e; padding: 16px; border-radius: 8px; margin-bottom: 30px; font-size: 13px; color: #9898ad; }
-    .instructions code { background: #2a2a38; padding: 2px 6px; border-radius: 4px; color: #818cf8; }
-  </style>
-</head>
-<body>
-  <h1>🧪 اختبار محرك بيان المضمّن (Phase 6)</h1>
-
-  <div class="instructions">
-    <p><strong>كيفية الاختبار:</strong></p>
-    <ol>
-      <li>اكتب أو الصق نصاً عربياً يحتوي على أخطاء في أي حقل أدناه</li>
-      <li>انتظر ثانية واحدة — ستظهر أيقونة بيان الصغيرة</li>
-      <li>ستظهر الأخطاء بخطوط حمراء/برتقالية/زرقاء</li>
-      <li>انقر على كلمة مُعلّمة لرؤية الاقتراح</li>
-    </ol>
-    <p>نص اختباري: <code>انا ذهبت الي المدرسه اليوم وكان الجو جميل جدا</code></p>
-  </div>
-
-  <div class="field-group">
-    <label>📝 حقل نصي (textarea)</label>
-    <textarea id="test-textarea" placeholder="اكتب نصاً عربياً هنا..."></textarea>
-  </div>
-
-  <div class="field-group">
-    <label>✏️ حقل قابل للتحرير (contenteditable)</label>
-    <div contenteditable="true" id="test-contenteditable"></div>
-  </div>
-
-  <div class="field-group">
-    <label>🔤 حقل إدخال (input)</label>
-    <input type="text" id="test-input" style="width:100%;font-size:16px;padding:10px;border-radius:8px;border:1px solid #3a3a4d;background:#22222e;color:#f0f0f5;direction:rtl;" placeholder="اكتب هنا...">
-  </div>
-
-  <div id="console-log" style="margin-top: 30px; padding: 12px; background: #0f0f14; border-radius: 8px; font-family: monospace; font-size: 11px; color: #6b6b80; max-height: 200px; overflow-y: auto;">
-    <div>Bayan Inline Test Page Ready</div>
-  </div>
-
-  <script>
-    // Capture console.log/warn to show on page
-    const logDiv = document.getElementById('console-log');
-    const origLog = console.log;
-    const origWarn = console.warn;
-    console.log = (...args) => {
-      origLog(...args);
-      if (args[0]?.includes?.('[Bayan')) {
-        const el = document.createElement('div');
-        el.textContent = args.join(' ');
-        el.style.color = '#22c55e';
-        logDiv.appendChild(el);
-        logDiv.scrollTop = logDiv.scrollHeight;
-      }
-    };
-    console.warn = (...args) => {
-      origWarn(...args);
-      const el = document.createElement('div');
-      el.textContent = args.join(' ');
-      el.style.color = '#f59e0b';
-      logDiv.appendChild(el);
-      logDiv.scrollTop = logDiv.scrollHeight;
-    };
-  </script>
-</body>
-</html>

extension/tests/test_patches.html

@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Bayan Patch Engine — Tests</title>
-  <style>
-    body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #0f0f14; color: #f0f0f5; padding: 24px; }
-    h1 { color: #818cf8; font-size: 20px; margin-bottom: 20px; }
-    .test-group { margin-bottom: 16px; padding: 12px; background: #1a1a24; border-radius: 8px; border: 1px solid #2d2d3d; }
-    .test-group h2 { font-size: 14px; color: #9898ad; margin-bottom: 8px; }
-    .pass { color: #22c55e; }
-    .fail { color: #ef4444; font-weight: bold; }
-    .result-line { font-size: 13px; margin: 4px 0; font-family: monospace; }
-    .detail { color: #6b6b80; font-size: 12px; margin-left: 24px; }
-    .summary { margin-top: 24px; padding: 16px; background: #1a1a24; border-radius: 8px; border: 2px solid #818cf8; font-size: 16px; font-weight: bold; }
-  </style>
-</head>
-<body>
-  <h1>🧪 Bayan Patch Engine — Test Suite</h1>
-  <div id="output"></div>
-
-  <!-- Load modules in dependency order -->
-  <script src="../shared/config.js"></script>
-  <script src="../shared/bayan-renderer.js"></script>
-  <script src="../shared/bayan-ui.js"></script>
-  <script src="../shared/bayan-patches.js"></script>
-
-  <script>
-    const output = document.getElementById('output');
-    let passed = 0;
-    let failed = 0;
-    let currentGroup = null;
-
-    function group(name) {
-      currentGroup = document.createElement('div');
-      currentGroup.className = 'test-group';
-      currentGroup.innerHTML = `<h2>${name}</h2>`;
-      output.appendChild(currentGroup);
-    }
-
-    function assert(condition, message) {
-      const el = document.createElement('div');
-      el.className = 'result-line';
-      if (condition) {
-        passed++;
-        el.innerHTML = `<span class="pass">✅</span> ${message}`;
-      } else {
-        failed++;
-        el.innerHTML = `<span class="fail">❌</span> ${message}`;
-      }
-      currentGroup.appendChild(el);
-    }
-
-    function assertEqual(actual, expected, message) {
-      if (actual === expected) {
-        assert(true, message);
-      } else {
-        assert(false, message);
-        const detail = document.createElement('div');
-        detail.className = 'detail';
-        detail.textContent = `Expected: "${expected}" | Actual: "${actual}"`;
-        currentGroup.appendChild(detail);
-      }
-    }
-
-    // ══════════════════════════════════════════════════════
-    // Test data — offsets verified via JavaScript indexOf()
-    // ══════════════════════════════════════════════════════
-    //
-    // TEXT = 'أنا ذاهب الى البت والمدرسه' (length: 26)
-    //
-    // indexOf('الى')    = 9   → slice(9, 12)  = 'الى'     (3 chars)
-    // indexOf('البت')   = 13  → slice(13, 17) = 'البت'    (4 chars)
-    // indexOf('المدرسه') = 19  → slice(19, 26) = 'المدرسه'  (7 chars)
-    //
-
-    const TEXT = 'أنا ذاهب الى البت والمدرسه';
-
-    function makeSuggestions() {
-      return [
-        { id: 'a', start: 9,  end: 12, original: 'الى', correction: 'إلى', type: 'grammar' },
-        { id: 'b', start: 13, end: 17, original: 'البت', correction: 'البيت', type: 'spelling' },
-        { id: 'c', start: 19, end: 26, original: 'المدرسه', correction: 'المدرسة', type: 'spelling' },
-      ];
-    }
-
-    // ── Prerequisite: verify test data offsets ──
-    group('PREREQ: Verify test data offsets');
-    assertEqual(TEXT.length, 26, 'Text length = 26');
-    assertEqual(TEXT.slice(9, 12), 'الى', 'slice(9,12) = "الى"');
-    assertEqual(TEXT.slice(13, 17), 'البت', 'slice(13,17) = "البت"');
-    assertEqual(TEXT.slice(19, 26), 'المدرسه', 'slice(19,26) = "المدرسه"');
-
-    // ══════════════════════════════════════════════════════
-    // TEST 1: Same-length replacement (delta = 0)
-    // "الى" (3) → "إلى" (3), delta = 0
-    // ══════════════════════════════════════════════════════
-    group('TEST 1: Same-length replacement (delta = 0)');
-    {
-      const suggestions = makeSuggestions();
-      const result = applyAndRebase(TEXT, suggestions[0], 'إلى', suggestions);
-
-      assertEqual(result.text, 'أنا ذاهب إلى البت والمدرسه', 'Text: "الى" → "إلى"');
-      assert(result.suggestions.length === 2, 'Removed applied (2 remaining)');
-      assertEqual(result.suggestions[0].start, 13, 'B.start unchanged (13)');
-      assertEqual(result.suggestions[0].end, 17, 'B.end unchanged (17)');
-      assertEqual(result.suggestions[1].start, 19, 'C.start unchanged (19)');
-      assertEqual(result.suggestions[1].end, 26, 'C.end unchanged (26)');
-      // Verify offsets extract correct text from modified string
-      assertEqual(result.text.slice(result.suggestions[0].start, result.suggestions[0].end), 'البت', 'Rebased B extracts "البت"');
-      assertEqual(result.text.slice(result.suggestions[1].start, result.suggestions[1].end), 'المدرسه', 'Rebased C extracts "المدرسه"');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 2: Longer replacement (delta > 0)
-    // "البت" (4) → "البيت" (5), delta = +1
-    // ══════════════════════════════════════════════════════
-    group('TEST 2: Longer replacement (delta > 0)');
-    {
-      const suggestions = makeSuggestions();
-      const result = applyAndRebase(TEXT, suggestions[1], 'البيت', suggestions);
-
-      assertEqual(result.text, 'أنا ذاهب الى البيت والمدرسه', 'Text: "البت" → "البيت"');
-      assert(result.suggestions.length === 2, 'Removed applied (2 remaining)');
-
-      // A is BEFORE B — no shift
-      assertEqual(result.suggestions[0].start, 9, 'A.start unchanged (9)');
-      assertEqual(result.suggestions[0].end, 12, 'A.end unchanged (12)');
-
-      // C is AFTER B — shift by +1
-      assertEqual(result.suggestions[1].start, 20, 'C.start shifted 19→20 (+1)');
-      assertEqual(result.suggestions[1].end, 27, 'C.end shifted 26→27 (+1)');
-
-      // Verify rebased offsets
-      assertEqual(result.text.slice(result.suggestions[0].start, result.suggestions[0].end), 'الى', 'Rebased A extracts "الى"');
-      assertEqual(result.text.slice(result.suggestions[1].start, result.suggestions[1].end), 'المدرسه', 'Rebased C extracts "المدرسه"');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 3: Shorter replacement (delta < 0)
-    // ══════════════════════════════════════════════════════
-    group('TEST 3: Shorter replacement (delta < 0)');
-    {
-      const text = 'هذا النصص خاطئ والكلمه';
-      // Verify offsets
-      const idx1 = text.indexOf('النصص');
-      const idx2 = text.indexOf('والكلمه');
-      const suggestions = [
-        { id: 'x', start: idx1, end: idx1 + 5, original: 'النصص', correction: 'النص', type: 'spelling' },
-        { id: 'y', start: idx2, end: idx2 + 7, original: 'والكلمه', correction: 'والكلمة', type: 'spelling' },
-      ];
-
-      // "النصص" (5) → "النص" (4), delta = -1
-      const result = applyAndRebase(text, suggestions[0], 'النص', suggestions);
-
-      assertEqual(result.text, 'هذا النص خاطئ والكلمه', 'Text: "النصص" → "النص"');
-      assert(result.suggestions.length === 1, '1 remaining');
-      assertEqual(result.suggestions[0].start, idx2 - 1, 'Y.start shifted by -1');
-      assertEqual(result.suggestions[0].end, idx2 + 7 - 1, 'Y.end shifted by -1');
-      assertEqual(
-        result.text.slice(result.suggestions[0].start, result.suggestions[0].end),
-        'والكلمه', 'Rebased Y extracts "والكلمه"'
-      );
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 4: Multiple sequential applies
-    // ══════════════════════════════════════════════════════
-    group('TEST 4: Multiple sequential applies');
-    {
-      let text = TEXT;
-      let suggestions = makeSuggestions();
-
-      // Apply A first (same-length, delta=0)
-      let r1 = applyAndRebase(text, suggestions[0], 'إلى', suggestions);
-      text = r1.text;
-      suggestions = r1.suggestions;
-      assertEqual(text, 'أنا ذاهب إلى البت والمدرسه', 'After apply A');
-      assert(suggestions.length === 2, '2 remaining after A');
-
-      // Apply B (longer, delta=+1)
-      let r2 = applyAndRebase(text, suggestions[0], 'البيت', suggestions);
-      text = r2.text;
-      suggestions = r2.suggestions;
-      assertEqual(text, 'أنا ذاهب إلى البيت والمدرسه', 'After apply B');
-      assert(suggestions.length === 1, '1 remaining after B');
-
-      // Apply C (same-length, delta=0)
-      let r3 = applyAndRebase(text, suggestions[0], 'المدرسة', suggestions);
-      text = r3.text;
-      suggestions = r3.suggestions;
-      assertEqual(text, 'أنا ذاهب إلى البيت والمدرسة', 'After apply C — fully corrected');
-      assert(suggestions.length === 0, '0 remaining — all applied');
-
-      // Verify equals applyAllPatches
-      const expectedFull = applyAllPatches(TEXT, makeSuggestions());
-      assertEqual(text, expectedFull, 'Sequential === applyAllPatches');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 5: Apply last suggestion (no rebase needed)
-    // ══════════════════════════════════════════════════════
-    group('TEST 5: Apply last suggestion');
-    {
-      const suggestions = makeSuggestions();
-      const result = applyAndRebase(TEXT, suggestions[2], 'المدرسة', suggestions);
-
-      assertEqual(result.text, 'أنا ذاهب الى البت والمدرسة', 'Last suggestion applied');
-      assert(result.suggestions.length === 2, '2 remaining');
-      assertEqual(result.suggestions[0].start, 9, 'A unchanged');
-      assertEqual(result.suggestions[1].start, 13, 'B unchanged');
-      // Verify offsets still work
-      assertEqual(result.text.slice(result.suggestions[0].start, result.suggestions[0].end), 'الى', 'A extracts correctly');
-      assertEqual(result.text.slice(result.suggestions[1].start, result.suggestions[1].end), 'البت', 'B extracts correctly');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 6: Dismiss (removeSuggestion — no rebase)
-    // ══════════════════════════════════════════════════════
-    group('TEST 6: Dismiss (removeSuggestion)');
-    {
-      const suggestions = makeSuggestions();
-      const remaining = removeSuggestion(suggestions, 'b');
-      assert(remaining.length === 2, '2 remaining after dismiss');
-      assert(remaining.every(s => s.id !== 'b'), 'Dismissed suggestion removed');
-      assertEqual(remaining[0].start, 9, 'A offset unchanged');
-      assertEqual(remaining[1].start, 19, 'C offset unchanged');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 7: applyAllPatches (reverse-order)
-    // ══════════════════════════════════════════════════════
-    group('TEST 7: applyAllPatches');
-    {
-      const result = applyAllPatches(TEXT, makeSuggestions());
-      assertEqual(result, 'أنا ذاهب إلى البيت والمدرسة', 'All patches applied correctly');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 8: countByType
-    // ══════════════════════════════════════════════════════
-    group('TEST 8: countByType');
-    {
-      const counts = countByType(makeSuggestions());
-      assertEqual(counts.spelling, 2, '2 spelling');
-      assertEqual(counts.grammar, 1, '1 grammar');
-      assertEqual(counts.punctuation, 0, '0 punctuation');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // TEST 9: Apply first suggestion at start=0
-    // ══════════════════════════════════════════════════════
-    group('TEST 9: Apply first suggestion (start=0)');
-    {
-      const text = 'الخطاء في البداية';
-      const i1 = text.indexOf('الخطاء');
-      const suggestions = [
-        { id: 'f', start: i1, end: i1 + 6, original: 'الخطاء', correction: 'الخطأ', type: 'spelling' },
-        { id: 'g', start: 10, end: 17, original: 'البداية', correction: 'البدايه', type: 'grammar' },
-      ];
-
-      // "الخطاء" (6) → "الخطأ" (5), delta = -1
-      const result = applyAndRebase(text, suggestions[0], 'الخطأ', suggestions);
-      assertEqual(result.text.slice(0, 5), 'الخطأ', 'First word replaced');
-      assertEqual(result.suggestions[0].start, 9, 'G.start shifted 10→9 (-1)');
-      assertEqual(result.suggestions[0].end, 16, 'G.end shifted 17→16 (-1)');
-    }
-
-    // ══════════════════════════════════════════════════════
-    // Summary
-    // ═══════════════════════���══════════════════════════════
-    const summary = document.createElement('div');
-    summary.className = 'summary';
-    summary.style.color = failed > 0 ? '#ef4444' : '#22c55e';
-    summary.textContent = `Results: ${passed} passed, ${failed} failed`;
-    output.appendChild(summary);
-
-    // Also log to console for easy capture
-    console.log(`[TEST RESULTS] ${passed} passed, ${failed} failed`);
-  </script>
-</body>
-</html>

extension/tests/test_patches.js

@@ -1,253 +0,0 @@
-/**
- * Bayan Chrome Extension — Patch Engine Tests
- *
- * Tests for HIGH-1 fix: applyAndRebase()
- * Run with: node extension/tests/test_patches.js
- *
- * Test scenarios:
- *   1. Shorter replacement (delta < 0)
- *   2. Longer replacement (delta > 0)
- *   3. Same-length replacement (delta = 0)
- *   4. Multiple sequential applies
- *   5. Apply first suggestion (edge case)
- *   6. Apply last suggestion (edge case)
- *   7. Dismiss (no rebase needed)
- *   8. Apply all patches
- */
-
-// ── Load modules (Node.js — no DOM required) ──
-// These are global-scope scripts, so we eval them
-const fs = require('fs');
-const path = require('path');
-
-function loadModule(filename) {
-  const code = fs.readFileSync(path.join(__dirname, '..', 'shared', filename), 'utf-8');
-  eval(code);
-}
-
-// Load in dependency order
-loadModule('config.js');
-loadModule('bayan-renderer.js');
-loadModule('bayan-ui.js');
-loadModule('bayan-patches.js');
-
-// ── Test utilities ──
-let passed = 0;
-let failed = 0;
-
-function assert(condition, message) {
-  if (condition) {
-    passed++;
-    console.log(`  ✅ ${message}`);
-  } else {
-    failed++;
-    console.error(`  ❌ ${message}`);
-  }
-}
-
-function assertEqual(actual, expected, message) {
-  if (actual === expected) {
-    passed++;
-    console.log(`  ✅ ${message}`);
-  } else {
-    failed++;
-    console.error(`  ❌ ${message}`);
-    console.error(`     Expected: "${expected}"`);
-    console.error(`     Actual:   "${actual}"`);
-  }
-}
-
-// ══════════════════════════════════════════════════════════
-// Test data: Arabic text with 3 suggestions
-// ══════════════════════════════════════════════════════════
-//
-// Text: "أنا ذاهب الى البت والمدرسه"
-//        0123456789012345678901234567
-//
-// Suggestion A: "الى" → "إلى"     (start:10, end:13)  — same length (3→3, delta=0)
-// Suggestion B: "البت" → "البيت"   (start:14, end:17)  — longer (+1, delta=+1)
-// Suggestion C: "المدرسه" → "المدرسة" (start:19, end:26) — same length (7→7, delta=0)
-//
-
-const TEXT = 'أنا ذاهب الى البت والمدرسه';
-
-function makeSuggestions() {
-  return [
-    { id: 'a', start: 10, end: 13, original: 'الى', correction: 'إلى', type: 'grammar' },
-    { id: 'b', start: 14, end: 17, original: 'البت', correction: 'البيت', type: 'spelling' },
-    { id: 'c', start: 19, end: 26, original: 'المدرسه', correction: 'المدرسة', type: 'spelling' },
-  ];
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 1: Same-length replacement (delta = 0)
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 1: Same-length replacement (delta = 0) ──');
-{
-  const suggestions = makeSuggestions();
-  const result = applyAndRebase(TEXT, suggestions[0], 'إلى', suggestions);
-
-  assertEqual(result.text, 'أنا ذاهب إلى البت والمدرسه', 'Text: "الى" → "إلى"');
-  assert(result.suggestions.length === 2, 'Removed applied suggestion (2 remaining)');
-  assertEqual(result.suggestions[0].start, 14, 'Suggestion B start unchanged (14)');
-  assertEqual(result.suggestions[0].end, 17, 'Suggestion B end unchanged (17)');
-  assertEqual(result.suggestions[1].start, 19, 'Suggestion C start unchanged (19)');
-  assertEqual(result.suggestions[1].end, 26, 'Suggestion C end unchanged (26)');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 2: Longer replacement (delta > 0)
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 2: Longer replacement (delta > 0) ──');
-{
-  const suggestions = makeSuggestions();
-  // Apply B: "البت" (3 chars) → "البيت" (5 chars), delta = +2
-  const result = applyAndRebase(TEXT, suggestions[1], 'البيت', suggestions);
-
-  assertEqual(result.text, 'أنا ذاهب الى البيت والمدرسه', 'Text: "البت" → "البيت"');
-  assert(result.suggestions.length === 2, 'Removed applied suggestion (2 remaining)');
-
-  // A is BEFORE B — should NOT shift
-  assertEqual(result.suggestions[0].start, 10, 'Suggestion A start unchanged (10)');
-  assertEqual(result.suggestions[0].end, 13, 'Suggestion A end unchanged (13)');
-
-  // C is AFTER B — should shift by +2
-  assertEqual(result.suggestions[1].start, 21, 'Suggestion C start shifted 19→21 (+2)');
-  assertEqual(result.suggestions[1].end, 28, 'Suggestion C end shifted 26→28 (+2)');
-
-  // Verify the shifted offsets are correct
-  assertEqual(result.text.substring(result.suggestions[1].start, result.suggestions[1].end),
-    'المدرسه', 'Rebased offset C extracts correct text');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 3: Shorter replacement (delta < 0)
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 3: Shorter replacement (delta < 0) ──');
-{
-  // Custom text for this test
-  const text = 'هذا النصص خاطئ والكلمه خطأ';
-  // "النصص" (5) → "النص" (4), delta = -1
-  const suggestions = [
-    { id: 'x', start: 4, end: 9, original: 'النصص', correction: 'النص', type: 'spelling' },
-    { id: 'y', start: 17, end: 23, original: 'والكلمه', correction: 'والكلمة', type: 'spelling' },
-  ];
-
-  const result = applyAndRebase(text, suggestions[0], 'النص', suggestions);
-
-  assertEqual(result.text, 'هذا النص خاطئ والكلمه خطأ', 'Text: "النصص" → "النص"');
-  assert(result.suggestions.length === 1, '1 remaining');
-  assertEqual(result.suggestions[0].start, 16, 'Suggestion Y start shifted 17→16 (-1)');
-  assertEqual(result.suggestions[0].end, 22, 'Suggestion Y end shifted 23→22 (-1)');
-  assertEqual(result.text.substring(result.suggestions[0].start, result.suggestions[0].end),
-    'والكلمه', 'Rebased offset Y extracts correct text');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 4: Multiple sequential applies
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 4: Multiple sequential applies ──');
-{
-  let text = TEXT;
-  let suggestions = makeSuggestions();
-
-  // Apply A first (same-length)
-  let r1 = applyAndRebase(text, suggestions[0], 'إلى', suggestions);
-  text = r1.text;
-  suggestions = r1.suggestions;
-  assertEqual(text, 'أنا ذاهب إلى البت والمدرسه', 'After apply A');
-  assert(suggestions.length === 2, '2 remaining after A');
-
-  // Apply B (longer, +2)
-  let r2 = applyAndRebase(text, suggestions[0], 'البيت', suggestions);
-  text = r2.text;
-  suggestions = r2.suggestions;
-  assertEqual(text, 'أنا ذاهب إلى البيت والمدرسه', 'After apply B');
-  assert(suggestions.length === 1, '1 remaining after B');
-
-  // Apply C (same-length) — offsets should be correctly rebased
-  let r3 = applyAndRebase(text, suggestions[0], 'المدرسة', suggestions);
-  text = r3.text;
-  suggestions = r3.suggestions;
-  assertEqual(text, 'أنا ذاهب إلى البيت والمدرسة', 'After apply C — fully corrected');
-  assert(suggestions.length === 0, '0 remaining — all applied');
-
-  // Verify final text matches applyAllPatches
-  const expectedFull = applyAllPatches(TEXT, makeSuggestions());
-  assertEqual(text, expectedFull, 'Sequential applies produce same result as applyAllPatches');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 5: Apply first suggestion (edge case)
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 5: Apply first suggestion ──');
-{
-  const text = 'الخطاء في البداية ثم نص صحيح';
-  const suggestions = [
-    { id: 'f', start: 0, end: 6, original: 'الخطاء', correction: 'الخطأ', type: 'spelling' },
-    { id: 'g', start: 20, end: 23, original: 'ثم ', correction: 'ثمّ ', type: 'grammar' },
-  ];
-
-  const result = applyAndRebase(text, suggestions[0], 'الخطأ', suggestions);
-  assertEqual(result.text.substring(0, 5), 'الخطأ', 'First word replaced correctly');
-  // delta = 5 - 6 = -1
-  assertEqual(result.suggestions[0].start, 19, 'Second suggestion shifted by -1');
-  assertEqual(result.suggestions[0].end, 22, 'Second suggestion end shifted by -1');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 6: Apply last suggestion (edge case)
-// ══════════════════════════════════════════���═══════════════
-console.log('\n── TEST 6: Apply last suggestion ──');
-{
-  const suggestions = makeSuggestions();
-  // Apply C (last one) — no suggestions after it to rebase
-  const result = applyAndRebase(TEXT, suggestions[2], 'المدرسة', suggestions);
-
-  assertEqual(result.text, 'أنا ذاهب الى البت والمدرسة', 'Last suggestion applied');
-  assert(result.suggestions.length === 2, '2 remaining');
-  assertEqual(result.suggestions[0].start, 10, 'A unchanged (before C)');
-  assertEqual(result.suggestions[1].start, 14, 'B unchanged (before C)');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 7: Dismiss (keep original)
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 7: Dismiss (removeSuggestion) ──');
-{
-  const suggestions = makeSuggestions();
-  const remaining = removeSuggestion(suggestions, 'b');
-  assert(remaining.length === 2, '2 remaining after dismiss');
-  assert(remaining.every(s => s.id !== 'b'), 'Dismissed suggestion removed');
-  // Offsets of remaining should be unchanged (no rebase on dismiss)
-  assertEqual(remaining[0].start, 10, 'A unchanged');
-  assertEqual(remaining[1].start, 19, 'C unchanged');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 8: applyAllPatches
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 8: applyAllPatches ──');
-{
-  const result = applyAllPatches(TEXT, makeSuggestions());
-  assertEqual(result, 'أنا ذاهب إلى البيت والمدرسة', 'All patches applied correctly');
-}
-
-// ══════════════════════════════════════════════════════════
-// TEST 9: countByType
-// ══════════════════════════════════════════════════════════
-console.log('\n── TEST 9: countByType ──');
-{
-  const counts = countByType(makeSuggestions());
-  assertEqual(counts.spelling, 2, '2 spelling');
-  assertEqual(counts.grammar, 1, '1 grammar');
-  assertEqual(counts.punctuation, 0, '0 punctuation');
-}
-
-// ══════════════════════════════════════════════════════════
-// Summary
-// ══════════════════════════════════════════════════════════
-console.log(`\n${'═'.repeat(50)}`);
-console.log(`Results: ${passed} passed, ${failed} failed`);
-console.log(`${'═'.repeat(50)}`);
-process.exit(failed > 0 ? 1 : 0);

extension/tests/test_patches.ps1

@@ -1,172 +0,0 @@
-# Bayan Patch Engine Tests — PowerShell Runner
-# Evaluates the JavaScript test logic without Node.js
-
-$passed = 0
-$failed = 0
-
-function Assert-Equal($actual, $expected, $message) {
-    if ($actual -eq $expected) {
-        $script:passed++
-        Write-Host "  ✅ $message" -ForegroundColor Green
-    } else {
-        $script:failed++
-        Write-Host "  ❌ $message" -ForegroundColor Red
-        Write-Host "     Expected: `"$expected`"" -ForegroundColor DarkGray
-        Write-Host "     Actual:   `"$actual`"" -ForegroundColor DarkGray
-    }
-}
-
-function Assert-True($condition, $message) {
-    if ($condition) {
-        $script:passed++
-        Write-Host "  ✅ $message" -ForegroundColor Green
-    } else {
-        $script:failed++
-        Write-Host "  ❌ $message" -ForegroundColor Red
-    }
-}
-
-# ── Simulate applyAndRebase in PowerShell ──
-function ApplyAndRebase($text, $applied, $replacement, $suggestions) {
-    # Apply patch
-    $newText = $text.Substring(0, $applied.start) + $replacement + $text.Substring($applied.end)
-
-    # Calculate delta
-    $originalSpanLength = $applied.end - $applied.start
-    $delta = $replacement.Length - $originalSpanLength
-
-    # Remove applied and rebase
-    $rebased = @()
-    foreach ($s in $suggestions) {
-        if ($s.id -eq $applied.id) { continue }
-        if ($s.start -ge $applied.end) {
-            $rebased += @{
-                id = $s.id; start = $s.start + $delta; end = $s.end + $delta
-                original = $s.original; correction = $s.correction; type = $s.type
-            }
-        } else {
-            $rebased += $s
-        }
-    }
-
-    return @{ text = $newText; suggestions = $rebased }
-}
-
-function ApplyAllPatches($text, $suggestions) {
-    $sorted = $suggestions | Sort-Object { $_.start } -Descending
-    $result = $text
-    foreach ($s in $sorted) {
-        $result = $result.Substring(0, $s.start) + $s.correction + $result.Substring($s.end)
-    }
-    return $result
-}
-
-# ── Test Data ──
-$TEXT = 'أنا ذاهب الى البت والمدرسه'
-
-function MakeSuggestions {
-    return @(
-        @{ id='a'; start=10; end=13; original='الى'; correction='إلى'; type='grammar' },
-        @{ id='b'; start=14; end=17; original='البت'; correction='البيت'; type='spelling' },
-        @{ id='c'; start=19; end=26; original='المدرسه'; correction='المدرسة'; type='spelling' }
-    )
-}
-
-# ══════════════════════════════════════════════════════════
-# TEST 1: Same-length replacement (delta = 0)
-# ══════════════════════════════════════════════════════════
-Write-Host "`n── TEST 1: Same-length replacement (delta = 0) ──" -ForegroundColor Cyan
-$suggestions = MakeSuggestions
-$result = ApplyAndRebase $TEXT $suggestions[0] 'إلى' $suggestions
-Assert-Equal $result.text 'أنا ذاهب إلى البت والمدرسه' 'Text: الى → إلى'
-Assert-True ($result.suggestions.Count -eq 2) 'Removed applied suggestion (2 remaining)'
-Assert-Equal $result.suggestions[0].start 14 'Suggestion B start unchanged (14)'
-Assert-Equal $result.suggestions[0].end 17 'Suggestion B end unchanged (17)'
-Assert-Equal $result.suggestions[1].start 19 'Suggestion C start unchanged (19)'
-Assert-Equal $result.suggestions[1].end 26 'Suggestion C end unchanged (26)'
-
-# ══════════════════════════════════════════════════════════
-# TEST 2: Longer replacement (delta > 0)
-# ══════════════════════════════════════════════════════════
-Write-Host "`n── TEST 2: Longer replacement (delta > 0) ──" -ForegroundColor Cyan
-$suggestions = MakeSuggestions
-$result = ApplyAndRebase $TEXT $suggestions[1] 'البيت' $suggestions
-Assert-Equal $result.text 'أنا ذاهب الى البيت والمدرسه' 'Text: البت → البيت'
-Assert-True ($result.suggestions.Count -eq 2) 'Removed applied suggestion (2 remaining)'
-Assert-Equal $result.suggestions[0].start 10 'Suggestion A start unchanged (10)'
-Assert-Equal $result.suggestions[0].end 13 'Suggestion A end unchanged (13)'
-Assert-Equal $result.suggestions[1].start 21 'Suggestion C start shifted 19→21 (+2)'
-Assert-Equal $result.suggestions[1].end 28 'Suggestion C end shifted 26→28 (+2)'
-$extracted = $result.text.Substring($result.suggestions[1].start, $result.suggestions[1].end - $result.suggestions[1].start)
-Assert-Equal $extracted 'المدرسه' 'Rebased offset C extracts correct text'
-
-# ══════════════════════════════════════════════════════════
-# TEST 3: Shorter replacement (delta < 0)
-# ══════════════════════════════════════════════════════════
-Write-Host "`n── TEST 3: Shorter replacement (delta < 0) ──" -ForegroundColor Cyan
-$text3 = 'هذا النصص خاطئ والكلمه خطأ'
-$sugs3 = @(
-    @{ id='x'; start=4; end=9; original='النصص'; correction='النص'; type='spelling' },
-    @{ id='y'; start=17; end=23; original='والكلمه'; correction='والكلمة'; type='spelling' }
-)
-$result = ApplyAndRebase $text3 $sugs3[0] 'النص' $sugs3
-Assert-Equal $result.text 'هذا النص خاطئ والكلمه خطأ' 'Text: النصص → النص'
-Assert-True ($result.suggestions.Count -eq 1) '1 remaining'
-Assert-Equal $result.suggestions[0].start 16 'Suggestion Y start shifted 17→16 (-1)'
-Assert-Equal $result.suggestions[0].end 22 'Suggestion Y end shifted 23→22 (-1)'
-$extracted = $result.text.Substring($result.suggestions[0].start, $result.suggestions[0].end - $result.suggestions[0].start)
-Assert-Equal $extracted 'والكلمه' 'Rebased offset Y extracts correct text'
-
-# ══════════════════════════════════════════════════════════
-# TEST 4: Multiple sequential applies
-# ══════════════════════════════════════════════════════════
-Write-Host "`n── TEST 4: Multiple sequential applies ──" -ForegroundColor Cyan
-$text4 = $TEXT
-$sugs4 = MakeSuggestions
-$r1 = ApplyAndRebase $text4 $sugs4[0] 'إلى' $sugs4
-$text4 = $r1.text; $sugs4 = $r1.suggestions
-Assert-Equal $text4 'أنا ذاهب إلى البت والمدرسه' 'After apply A'
-Assert-True ($sugs4.Count -eq 2) '2 remaining after A'
-
-$r2 = ApplyAndRebase $text4 $sugs4[0] 'البيت' $sugs4
-$text4 = $r2.text; $sugs4 = $r2.suggestions
-Assert-Equal $text4 'أنا ذاهب إلى البيت والمدرسه' 'After apply B'
-Assert-True ($sugs4.Count -eq 1) '1 remaining after B'
-
-$r3 = ApplyAndRebase $text4 $sugs4[0] 'المدرسة' $sugs4
-$text4 = $r3.text; $sugs4 = $r3.suggestions
-Assert-Equal $text4 'أنا ذاهب إلى البيت والمدرسة' 'After apply C — fully corrected'
-Assert-True ($sugs4.Count -eq 0) '0 remaining — all applied'
-
-$expectedFull = ApplyAllPatches $TEXT (MakeSuggestions)
-Assert-Equal $text4 $expectedFull 'Sequential === applyAllPatches'
-
-# ══════════════════════════════════════════════════════════
-# TEST 5: Apply last suggestion
-# ══════════════════════════════════════════════════════════
-Write-Host "`n── TEST 5: Apply last suggestion ──" -ForegroundColor Cyan
-$sugs5 = MakeSuggestions
-$result = ApplyAndRebase $TEXT $sugs5[2] 'المدرسة' $sugs5
-Assert-Equal $result.text 'أنا ذاهب الى البت والمدرسة' 'Last suggestion applied'
-Assert-True ($result.suggestions.Count -eq 2) '2 remaining'
-Assert-Equal $result.suggestions[0].start 10 'A unchanged (before C)'
-Assert-Equal $result.suggestions[1].start 14 'B unchanged (before C)'
-
-# ══════════════════════════════════════════════════════════
-# TEST 6: applyAllPatches
-# ══════════════════════════════════════════════════════════
-Write-Host "`n── TEST 6: applyAllPatches ──" -ForegroundColor Cyan
-$resultAll = ApplyAllPatches $TEXT (MakeSuggestions)
-Assert-Equal $resultAll 'أنا ذاهب إلى البيت والمدرسة' 'All patches applied correctly'
-
-# ══════════════════════════════════════════════════════════
-# Summary
-# ══════════════════════════════════════════════════════════
-Write-Host "`n$('═' * 50)"
-if ($failed -gt 0) {
-    Write-Host "Results: $passed passed, $failed FAILED" -ForegroundColor Red
-    exit 1
-} else {
-    Write-Host "Results: $passed passed, $failed failed" -ForegroundColor Green
-    exit 0
-}

extension_divider.py

@@ -0,0 +1,29 @@
+import re
+
+def insert_divider(file_path):
+    with open(file_path, 'r', encoding='utf-8') as f:
+        html = f.read()
+    
+    # We look for the logo img and the span title, and insert a divider between them.
+    # Pattern to match:
+    # <img src="assets/icons/icon48.png" alt="بيان" width="28" height="28" style="border-radius:6px;">
+    # <span class="bayan-header-title">بيان</span>
+    
+    # Let's match the closing bracket of the img tag (or its whitespace), followed by the span tag
+    pattern = r'(<img[^>]+>)\s*(<span class="(?:bayan-header-title|sp-header-title)">بيان</span>)'
+    
+    # The divider to insert:
+    divider = '\n      <div style="height:24px; width:2px; background-color:#d1d5db; border-radius:9999px; flex-shrink:0;"></div>\n      '
+    
+    # Replace
+    new_html, count = re.subn(pattern, r'\1' + divider + r'\2', html)
+    
+    if count > 0:
+        with open(file_path, 'w', encoding='utf-8') as f:
+            f.write(new_html)
+        print(f"Updated {file_path}")
+    else:
+        print(f"No match found in {file_path}")
+
+insert_divider('extension/popup.html')
+insert_divider('extension/sidepanel/sidepanel.html')

fix_dividers.py

@@ -0,0 +1,19 @@
+import re
+
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+
+# Replace the divider to use standard Tailwind classes and add shrink-0 so it doesn't disappear
+old_div_nav = r'<div class="h-6 w-\[1\.5px\] bg-gray-300 dark:bg-gray-700 rounded-full"></div>'
+new_div_nav = r'<div class="h-6 w-0.5 bg-gray-300 dark:bg-gray-600 rounded-full shrink-0"></div>'
+
+old_div_footer = r'<div class="h-7 w-\[1\.5px\] bg-gray-300 dark:bg-gray-700 rounded-full"></div>'
+new_div_footer = r'<div class="h-7 w-0.5 bg-gray-300 dark:bg-gray-600 rounded-full shrink-0"></div>'
+
+html = re.sub(old_div_nav, new_div_nav, html)
+html = re.sub(old_div_footer, new_div_footer, html)
+
+with open('src/index.html', 'w', encoding='utf-8') as f:
+    f.write(html)
+
+print("Dividers fixed.")

fix_listener.py

@@ -0,0 +1,28 @@
+import re
+
+def fix_listener(filepath):
+    with open(filepath, 'r', encoding='utf-8') as f:
+        js = f.read()
+    
+    # Replace the wrapping DOMContentLoaded for our appended theme toggle
+    pattern = r"// ── Theme Toggle Logic ──\s*document\.addEventListener\('DOMContentLoaded',\s*\(\)\s*=>\s*\{"
+    replacement = "// ── Theme Toggle Logic ──\n(function initBayanThemeToggle() {"
+    
+    # We also need to replace the closing `});` of our block with `})();`
+    # We know it's at the very end of the file.
+    
+    new_js, count = re.subn(pattern, replacement, js)
+    if count > 0:
+        # replace the last `});` with `})();`
+        new_js = new_js.rstrip()
+        if new_js.endswith("});"):
+            new_js = new_js[:-3] + "})();\n"
+            
+        with open(filepath, 'w', encoding='utf-8') as f:
+            f.write(new_js)
+        print(f"Fixed in {filepath}")
+    else:
+        print(f"Not found in {filepath}")
+
+fix_listener('extension/popup.js')
+fix_listener('extension/sidepanel/sidepanel.js')

fix_sp_theme.py

@@ -0,0 +1,21 @@
+sp_light_css = """
+/* Light Theme Variables for Side Panel */
+[data-theme="light"] {
+  --sp-bg: #f9fafb;
+  --sp-surface: #ffffff;
+  --sp-surface-hover: #f3f4f6;
+  --sp-surface-active: #e5e7eb;
+  --sp-border: #e5e7eb;
+  --sp-border-light: #d1d5db;
+  --sp-text: #111827;
+  --sp-text-secondary: #4b5563;
+  --sp-text-muted: #9ca3af;
+  --sp-success: #16a34a;
+  --sp-warning: #d97706;
+}
+"""
+
+with open('extension/sidepanel/sidepanel.css', 'a', encoding='utf-8') as f:
+    f.write('\n' + sp_light_css + '\n')
+
+print("Fixed sidepanel CSS variables for light mode.")

fix_zindex.py

@@ -0,0 +1,12 @@
+import re
+
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+
+# Replace z-50 with z-[1000] on the nav
+html = re.sub(r'class="site-nav fixed top-0 right-0 left-0 z-50"', r'class="site-nav fixed top-0 right-0 left-0 z-[1000]"', html)
+
+with open('src/index.html', 'w', encoding='utf-8') as f:
+    f.write(html)
+
+print("z-index fixed.")

inject.py

@@ -0,0 +1,13 @@
+import base64
+import re
+
+with open('LOGOS/icon128.png', 'rb') as img:
+    data_uri = 'data:image/png;base64,' + base64.b64encode(img.read()).decode('utf-8')
+
+with open('src/index.html', 'r', encoding='utf-8') as html_file:
+    html = html_file.read()
+
+html = re.sub(r'src="data:image/png;base64,[A-Za-z0-9+/=]+"', 'src="' + data_uri + '"', html)
+
+with open('src/index.html', 'w', encoding='utf-8') as html_file:
+    html_file.write(html)

inject_ext.py

@@ -0,0 +1,13 @@
+import base64
+import re
+
+with open('extension/assets/icons/icon128.png', 'rb') as img:
+    data_uri = 'data:image/png;base64,' + base64.b64encode(img.read()).decode('utf-8')
+
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+
+html = re.sub(r'src="data:image/png;base64,[A-Za-z0-9+/=]+"', 'src="' + data_uri + '"', html)
+
+with open('src/index.html', 'w', encoding='utf-8') as f:
+    f.write(html)

inject_logos.py

@@ -0,0 +1,13 @@
+import base64
+import re
+
+with open('LOGOS/icon128.png', 'rb') as img:
+    data_uri = 'data:image/png;base64,' + base64.b64encode(img.read()).decode('utf-8')
+
+with open('src/index.html', 'r', encoding='utf-8') as f:
+    html = f.read()
+
+html = re.sub(r'src="data:image/png;base64,[A-Za-z0-9+/=]+"', 'src="' + data_uri + '"', html)
+
+with open('src/index.html', 'w', encoding='utf-8') as f:
+    f.write(html)

src/app.py

@@ -87,12 +87,23 @@ logging.basicConfig(
 )
 logger = logging.getLogger(__name__)
 
-DEBUG_TRACE = True  # Toggleable trace logging
+DEBUG_TRACE = os.environ.get('BAYAN_DEBUG_TRACE', '').lower() in ('1', 'true')  # Enable with env var
 
 # Initialize Flask app
-app = Flask(__name__, static_folder='.', static_url_path='')
+app = Flask(__name__, static_folder='.',  static_url_path='')
 CORS(app, resources={r"/api/*": {"origins": "*"}})  # CORS for API routes only
 
+_ALLOWED_STATIC_EXTENSIONS = {'.css', '.js', '.svg', '.png', '.ico', '.woff', '.woff2', '.ttf', '.jpg', '.jpeg', '.gif', '.webp', '.map'}
+
+@app.before_request
+def _block_source_files():
+    from flask import request as _req, abort as _abort
+    if _req.path.startswith('/api/') or _req.path == '/':
+        return None
+    ext = os.path.splitext(_req.path)[1].lower()
+    if ext and ext not in _ALLOWED_STATIC_EXTENSIONS:
+        _abort(404)
+
 # Configuration
 MAX_TEXT_LENGTH = 5000  # Maximum characters for input text
 MAX_SUMMARY_LENGTH = 512  # Maximum tokens for summary
@@ -186,11 +197,11 @@ def index():
     # Inject Supabase credentials into the meta tags
     html = html.replace(
         '<meta name="supabase-url" content="">',
-        f'<meta name="supabase-url" content="{SUPABASE_URL}">'
+        f'<meta name="supabase-url" content="{__import__("html").escape(SUPABASE_URL or "")}">'
     )
     html = html.replace(
         '<meta name="supabase-anon-key" content="">',
-        f'<meta name="supabase-anon-key" content="{SUPABASE_ANON_KEY}">'
+        f'<meta name="supabase-anon-key" content="{__import__("html").escape(SUPABASE_ANON_KEY or "")}">'
     )
 
     return Response(html, mimetype='text/html')
@@ -243,6 +254,8 @@ def health_check():
 @app.route('/api/debug-models', methods=['GET'])
 def debug_models():
     """Debug endpoint: report model status and startup errors."""
+    if not app.debug:
+        return jsonify({'error': 'Not available in production'}), 403
     from hf_inference import debug_test_all_models
     results = debug_test_all_models()
     
@@ -307,8 +320,8 @@ def _punctuation_available():
 def _autocomplete_available():
     """Check if autocomplete model is loaded (without triggering lazy load)."""
     try:
-        from nlp.autocomplete.autocomplete_service import _instance
-        return _instance is not None and _instance.is_ready()
+        from nlp.autocomplete.autocomplete_service import is_loaded
+        return is_loaded()
     except Exception:
         return False
 
@@ -620,6 +633,12 @@ def add_punctuation():
         if not text:
             return jsonify({'error': 'Text is required', 'status': 'error'}), 400
 
+        if len(text) > MAX_TEXT_LENGTH:
+            return jsonify({
+                'error': f'Text too long. Maximum {MAX_TEXT_LENGTH} characters.',
+                'status': 'error'
+            }), 400
+
         logger.info(f"Adding punctuation for text of length: {len(text)}")
         from nlp.punctuation.punctuation_service import get_punctuation_model
         punc_checker = get_punctuation_model()
@@ -1620,7 +1639,7 @@ def analyze_text():
         text_len = len(current_text)
         run_spelling = text_len <= 1000  # FIX-10: Increased from 300 to 1000
         if not run_spelling:
-            logger.info(f"[ANALYZE] Text length {text_len} > 300 — skipping AraSpell for performance")
+            logger.info(f"[ANALYZE] Text length {text_len} > 1000 — skipping AraSpell for performance")
 
         # ── Batch 2+5: Religious text detection (moved before spelling) ──
         # Religious text must skip ALL stages (spelling + grammar + punctuation)
@@ -1663,7 +1682,7 @@ def analyze_text():
         _has_percent = bool(_re_spell_guard.search(r'\d+\.\d+%', ctx.current_text))
         _has_latin_word = bool(_re_spell_guard.search(r'\b[A-Za-z]{3,}\b', ctx.current_text))
         
-        _skip_all_stages = _is_religious_text or _has_url or _has_email or _has_hashtag or _has_percent or _has_latin_word
+        _skip_all_stages = _is_religious_text
         if _has_url or _has_email:
             logger.info(f"[ANALYZE] Text contains URLs/emails — skipping spelling")
             run_spelling = False
@@ -2059,6 +2078,12 @@ def analyze_text():
             _oov_words = _oov_text.split()
             _oov_changed = False
             _oov_result = []
+            _oov_word_starts = []
+            _oov_search = 0
+            for _ow_w in _oov_words:
+                _ow_found = _oov_text.find(_ow_w, _oov_search)
+                _oov_word_starts.append(_ow_found if _ow_found >= 0 else _oov_search)
+                _oov_search = (_ow_found if _ow_found >= 0 else _oov_search) + len(_ow_w)
 
             for _ow_idx, _ow in enumerate(_oov_words):
                 # Skip short words (prepositions etc.)
@@ -2086,7 +2111,7 @@ def analyze_text():
                         )
                         _oov_result.append(_ta_cand + _punct_suffix)
                         _oov_changed = True
-                        _ow_pos = sum(len(w) + 1 for w in _oov_words[:_ow_idx])
+                        _ow_pos = _oov_word_starts[_ow_idx]
                         if _ow_pos + len(_ow) <= len(_oov_text):
                             ctx.add_patch(
                                 'spelling', _ow_pos, _ow_pos + len(_ow),
@@ -2105,7 +2130,7 @@ def analyze_text():
                         )
                         _oov_result.append(_wo_cand + _punct_suffix)
                         _oov_changed = True
-                        _ow_pos = sum(len(w) + 1 for w in _oov_words[:_ow_idx])
+                        _ow_pos = _oov_word_starts[_ow_idx]
                         if _ow_pos + len(_ow) <= len(_oov_text):
                             ctx.add_patch(
                                 'spelling', _ow_pos, _ow_pos + len(_ow),
@@ -2122,7 +2147,7 @@ def analyze_text():
                         )
                         _oov_result.append(_woa_cand + _punct_suffix)
                         _oov_changed = True
-                        _ow_pos = sum(len(w) + 1 for w in _oov_words[:_ow_idx])
+                        _ow_pos = _oov_word_starts[_ow_idx]
                         if _ow_pos + len(_ow) <= len(_oov_text):
                             ctx.add_patch(
                                 'spelling', _ow_pos, _ow_pos + len(_ow),
@@ -2141,7 +2166,7 @@ def analyze_text():
                         )
                         _oov_result.append(_dotwo_clean + '.')
                         _oov_changed = True
-                        _ow_pos = sum(len(w) + 1 for w in _oov_words[:_ow_idx])
+                        _ow_pos = _oov_word_starts[_ow_idx]
                         if _ow_pos + len(_ow) <= len(_oov_text):
                             ctx.add_patch(
                                 'spelling', _ow_pos, _ow_pos + len(_ow),
@@ -2192,8 +2217,8 @@ def analyze_text():
             # Replace structured content with Arabic placeholder tokens
             if _structured_placeholders:
                 _structured_placeholders.sort(key=lambda x: x[0], reverse=True)
-                for _sp_start, _sp_end, _sp_text in _structured_placeholders:
-                    _grammar_input_text = _grammar_input_text[:_sp_start] + 'بيان' + _grammar_input_text[_sp_end:]
+                for _sp_idx, (_sp_start, _sp_end, _sp_text) in enumerate(_structured_placeholders):
+                    _grammar_input_text = _grammar_input_text[:_sp_start] + f'بيان{_sp_idx}' + _grammar_input_text[_sp_end:]
                 logger.info(f"[ANALYZE] Protected {len(_structured_placeholders)} structured elements")
 
         # 2. Grammar (runs on spelling-corrected text — word-level dependency)
@@ -2214,9 +2239,8 @@ def analyze_text():
 
             # FIX-03: Restore structured content in grammar output
             if _structured_placeholders:
-                # Restore in forward order
-                for _sp_start, _sp_end, _sp_text in reversed(_structured_placeholders):
-                    corrected_grammar = corrected_grammar.replace('بيان', _sp_text, 1)
+                for _sp_idx, (_sp_start, _sp_end, _sp_text) in enumerate(_structured_placeholders):
+                    corrected_grammar = corrected_grammar.replace(f'بيان{_sp_idx}', _sp_text)
 
             if corrected_grammar != ctx.current_text:
                 diffs = get_word_diffs(ctx.current_text, corrected_grammar)
@@ -2354,9 +2378,10 @@ def analyze_text():
                     # - Title case Latin words (proper nouns in mixed text)
                     # - Single words where the grammar just adds/removes spaces
                     if orig_text and corr_text:
-                        # If original has no spaces but correction does (grammar split a name)
-                        _has_latin = any('A' <= c <= 'Z' or 'a' <= c <= 'z' for c in orig_text)
-                        if _has_latin and orig_text != corr_text:
+                        import re as _re_latin
+                        _orig_latin = _re_latin.sub(r'[^A-Za-z]', '', orig_text)
+                        _corr_latin = _re_latin.sub(r'[^A-Za-z]', '', corr_text)
+                        if _orig_latin and _orig_latin != _corr_latin:
                             logger.info(
                                 f"[GRAMMAR] Skipping entity (contains Latin): "
                                 f"'{orig_text}'→'{corr_text}'"
@@ -2520,7 +2545,7 @@ def analyze_text():
                                 _gram_dir_blocked = True
                                 break
                     if _gram_dir_blocked:
-                          logger.error(traceback.format_exc())
+                          logger.info(f"[GRAMMAR] Directional block rejected diff: '{orig_text}'→'{corr_text}'")
                           continue
                     # DEBUG_TRACE
                     if _is_grammar_pattern:
@@ -2533,6 +2558,7 @@ def analyze_text():
                         for _tc in _TANWEEN_CHARS:
                             if _tc in orig_text and _tc not in corr_text:
                                 corr_text = corr_text + _tc
+                                d['correction'] = corr_text
                                 break
 
                     # Re-label: if grammar's change is purely orthographic
@@ -2545,7 +2571,7 @@ def analyze_text():
                     _tel_events.append({"event":"patch_accepted","stage":stage_label,"original":orig_text[:80],"correction":corr_text[:80],"start":d["start"],"end":d["end"]})
                     ctx.add_patch(
                         stage_label, d['start'], d['end'],
-                        corr_text, confidence=1.0
+                        corr_text, confidence=0.85
                     )
 
                 # ── B7 (E6): Bracket-balance guard ──
@@ -2560,11 +2586,11 @@ def analyze_text():
                 corr_balanced = (corr_opens == corr_closes)
                 if orig_balanced and not corr_balanced:
                     logger.info(
-                        f"[GRAMMAR] Rejected bracket-unbalanced output: "
-                        f"orig=({orig_opens},{orig_closes}), corr=({corr_opens},{corr_closes})"
+                        f"[GRAMMAR] Bracket-unbalanced output detected: "
+                        f"orig=({orig_opens},{orig_closes}), corr=({corr_opens},{corr_closes}). "
+                        f"Using individually-accepted diffs only."
                     )
-                    # Don't mutate text — keep pre-grammar text
-                elif _grammar_accepted_diffs:
+                if _grammar_accepted_diffs:
                     # FIX-04: Rebuild grammar text from ACCEPTED diffs only,
                     # not the full model output. Prevents phantom corrections.
                     _safe_grammar = ctx.current_text
@@ -2647,7 +2673,7 @@ def analyze_text():
                     to_remove = set(id(p) for p in punc_patches_sorted[MAX_PUNC_PATCHES_PER_RESPONSE:])
                     # FIX-18: Also remove StageLocker locks for capped patches
                     for _capped_p in punc_patches_sorted[MAX_PUNC_PATCHES_PER_RESPONSE:]:
-                        ctx.stage_locker.unlock(_capped_p.start_original, _capped_p.end_original)
+                        ctx.stage_locker.unlock(_capped_p.start_current, _capped_p.end_current)
                     ctx.patches.patches = [p for p in ctx.patches.patches if id(p) not in to_remove]
                     logger.info(
                         f"[PUNC-CAP] Capped punctuation patches: "
@@ -2743,7 +2769,6 @@ def analyze_text():
             'suggestions': suggestions,
             'timing_ms': timing_ms,
             'status': response_status,
-            'telemetry': _tel_events,
         }
         if stage_errors:
             response_data['warnings'] = stage_errors

src/index.html

@@ -12,7 +12,7 @@
    <meta property="og:description" content="تدقيق إملائي ونحوي وترقيم، تلخيص ذكي، إكمال تلقائي، تدقيق القرآن الكريم، وتحويل اللهجات">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://raw.githubusercontent.com/mohamedatef24/BAYAN/main/extension/assets/icons/icon128.png">
-   <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/mohamedatef24/BAYAN/main/extension/assets/icons/icon128.png">
+   <link rel="icon" type="image/png" href="favicon.png">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -847,9 +847,9 @@
              <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--color-primary);"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
              <span class="text-base font-bold">تلخيص النصوص</span>
             </div>
-             <textarea id="summary-custom-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="الصق أو اكتب النص الذي تريد تلخيصه هنا..." style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
+             <textarea id="summary-custom-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="الصق أو اكتب النص الذي تريد تلخيصه هنا..." oninput="updateSummaryWordCount()" style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
              <div class="flex items-center justify-between mt-2 mb-2" dir="rtl">
-              <span id="summary-char-count" class="text-xs" style="color: var(--text-secondary);">0 حرف</span>
+              <span id="summary-char-count" class="text-xs" style="color: var(--text-secondary);">٠ كلمة</span>
               <label class="btn-ghost" style="cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:4px 12px; min-height:32px; font-size:12px;">
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                استيراد ملف
@@ -915,7 +915,7 @@
           </div>
           <textarea id="dialect-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="اكتب النص باللهجة هنا..." oninput="updateDialectCharCount()" style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
           <div class="flex items-center justify-between mt-1 mb-2" dir="rtl">
-           <span id="dialect-char-count" class="text-xs" style="color: var(--text-secondary);">٠ / ٥٬٠٠٠ حرف</span>
+           <span id="dialect-char-count" class="text-xs" style="color: var(--text-secondary);">٠ حرف</span>
           </div>
           <button id="dialect-convert-btn" onclick="convertDialect()" class="btn-primary w-full py-4 text-lg mt-4 mb-4" type="button">تحويل إلى الفصحى</button>
           <div id="dialect-result-card" class="is-hidden" style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem;">
@@ -1675,13 +1675,22 @@
       if (typeof showToast === 'function') showToast('✓ تم تطبيق النص الفصيح في المحرر');
     }
 
+    function updateSummaryWordCount() {
+      var input = document.getElementById('summary-custom-input');
+      var counter = document.getElementById('summary-char-count');
+      if (!input || !counter) return;
+      var text = input.value.trim();
+      var words = text ? text.split(/\s+/).length : 0;
+      counter.textContent = words.toLocaleString('ar-EG') + ' كلمة';
+    }
+
     function updateDialectCharCount() {
       var input = document.getElementById('dialect-input');
       var counter = document.getElementById('dialect-char-count');
       if (!input || !counter) return;
       var len = input.value.length;
       var arabicLen = len.toLocaleString('ar-EG');
-      counter.textContent = arabicLen + ' / ٥٬٠٠٠ حرف';
+      counter.textContent = arabicLen + ' حرف';
       counter.style.color = len > 5000 ? '#ef4444' : 'var(--text-secondary)';
     }
 

src/js/format.js

@@ -393,7 +393,8 @@ function updateEnhancedStats() {
 
 /* ── Item 6: Summary Stats ── */
 function updateSummaryStats(summaryText) {
-  const originalText = getEditorText();
+  const customInput = document.getElementById('summary-custom-input');
+  const originalText = customInput ? customInput.value : getEditorText();
   const summaryWords = summaryText.trim().split(/\s+/).filter(w => w.length > 0).length;
   const originalWords = originalText.trim().split(/\s+/).filter(w => w.length > 0).length;
   const compression = originalWords > 0 ? Math.round((1 - summaryWords / originalWords) * 100) : 0;

src/nlp/autocomplete/autocomplete_service.py

@@ -45,6 +45,11 @@ def get_autocomplete_model():
     return _instance
 
 
+def is_loaded() -> bool:
+    """Check if the autocomplete model is loaded (without triggering lazy load)."""
+    return _instance is not None and _instance.is_ready()
+
+
 # ─── Cache key helper ─────────────────────────────────────────────────────────
 def _context_key(context: str) -> str:
     """Use last 5 words for cache key — preserves enough context for GPT-2 awareness."""
@@ -100,6 +105,10 @@ class HybridAutoComplete:
                 data = pickle.load(f)
             self.unigrams = data["unigrams"]
             self.bigrams = data["bigrams"]
+            self._top_unigrams = sorted(
+                [(w, c) for w, c in self.unigrams.items() if len(w) >= 2],
+                key=lambda x: x[1], reverse=True
+            )[:200]
             logger.info(
                 f"Bigram model loaded: {len(self.unigrams)} unigrams, "
                 f"{len(self.bigrams)} bigram contexts"
@@ -108,6 +117,7 @@ class HybridAutoComplete:
             logger.error(f"Failed to load bigram model: {e}")
             self.unigrams = {}
             self.bigrams = {}
+            self._top_unigrams = []
 
     def _load_gpt2(self):
         """Load GPT-2 model with OOM fallback."""
@@ -195,12 +205,9 @@ class HybridAutoComplete:
                     continue
                 candidates.append((w, c))
 
-        # Fallback to unigram if no bigram matches
+        # Fallback to precomputed top unigrams if no bigram matches
         if not candidates:
-            for w, c in self.unigrams.items():
-                if len(w) < 2:
-                    continue
-                candidates.append((w, c))
+            candidates = list(self._top_unigrams)
 
         if not candidates:
             return []

src/nlp/correction_patch.py

@@ -88,9 +88,11 @@ class PatchSet:
 
     def __init__(self):
         self.patches: list = []
+        self._resolved_cache = None
 
     def add(self, patch: CorrectionPatch):
         self.patches.append(patch)
+        self._resolved_cache = None
 
     def resolve_overlaps(self) -> list:
         """
@@ -206,4 +208,6 @@ class PatchSet:
 
     def to_list(self) -> list:
         """Serialize resolved patches for API response."""
-        return [p.to_dict() for p in self.resolve_overlaps()]
+        if self._resolved_cache is None:
+            self._resolved_cache = self.resolve_overlaps()
+        return [p.to_dict() for p in self._resolved_cache]

src/nlp/dialect/dialect_service.py

@@ -9,12 +9,14 @@ blocking server startup.
 """
 
 import logging
+import threading
 import torch
 from transformers import AutoTokenizer, AutoModelForSeq2SeqLM
 
 logger = logging.getLogger(__name__)
 
 _instance = None
+_lock = threading.Lock()
 
 
 class DialectConverter:
@@ -26,41 +28,46 @@ class DialectConverter:
     MAX_OUTPUT_LENGTH = 128
 
     def __init__(self):
-        self.device = "cpu"
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+        _dtype = torch.float16 if self.device == "cuda" else torch.float32
         logger.info(f"[DIALECT] Loading model from '{self.REPO_ID}'...")
 
         self.tokenizer = AutoTokenizer.from_pretrained(self.REPO_ID)
         self.model = AutoModelForSeq2SeqLM.from_pretrained(
-            self.REPO_ID, torch_dtype=torch.float16
+            self.REPO_ID, torch_dtype=_dtype
         ).to(self.device)
         self.model.eval()
 
-        logger.info("[DIALECT] Model loaded successfully (float16).")
+        logger.info(f"[DIALECT] Model loaded successfully ({_dtype}).")
 
     def convert(self, dialect_text: str, num_beams: int = 4) -> str:
         """Convert a single dialect sentence to MSA."""
         if not dialect_text or not dialect_text.strip():
             return dialect_text
 
-        input_text = self.PREFIX + dialect_text.strip()
-        inputs = self.tokenizer(
-            input_text,
-            return_tensors="pt",
-            max_length=self.MAX_INPUT_LENGTH,
-            truncation=True,
-        ).to(self.device)
-
-        with torch.no_grad():
-            outputs = self.model.generate(
-                **inputs,
-                max_length=self.MAX_OUTPUT_LENGTH,
-                num_beams=num_beams,
-                early_stopping=True,
-                no_repeat_ngram_size=3,
-            )
-
-        result = self.tokenizer.decode(outputs[0], skip_special_tokens=True)
-        return result
+        try:
+            input_text = self.PREFIX + dialect_text.strip()
+            inputs = self.tokenizer(
+                input_text,
+                return_tensors="pt",
+                max_length=self.MAX_INPUT_LENGTH,
+                truncation=True,
+            ).to(self.device)
+
+            with torch.no_grad():
+                outputs = self.model.generate(
+                    **inputs,
+                    max_length=self.MAX_OUTPUT_LENGTH,
+                    num_beams=num_beams,
+                    early_stopping=True,
+                    no_repeat_ngram_size=3,
+                )
+
+            result = self.tokenizer.decode(outputs[0], skip_special_tokens=True)
+            return result
+        except Exception as e:
+            logger.warning(f"[DIALECT] Conversion failed: {e}")
+            return dialect_text
 
     def is_ready(self) -> bool:
         """Check if the model is loaded and ready."""
@@ -71,7 +78,9 @@ def get_dialect_model() -> DialectConverter:
     """Get or create the singleton DialectConverter instance."""
     global _instance
     if _instance is None:
-        _instance = DialectConverter()
+        with _lock:
+            if _instance is None:
+                _instance = DialectConverter()
     return _instance
 
 

src/nlp/grammar/grammar_rules.py

@@ -77,31 +77,8 @@ class ArabicGrammarGuard:
         return " ".join(corrected_tokens)
 
     def smart_asmaa_khamsa_fix(self, text):
-        tokens = simple_word_tokenize(text)
-        disambig_tokens = self.mle.disambiguate(tokens)
-        corrected_tokens = []
-        verb_seen = False
-
-        for i, token_info in enumerate(disambig_tokens):
-            word = tokens[i]
-
-            pos_tag = token_info.analyses[0].analysis.get('pos', 'unknown') if token_info.analyses else 'unknown'
-
-            if pos_tag == 'verb':
-                verb_seen = True
-                corrected_tokens.append(word)
-                continue
-
-            is_asmaa = any(word.startswith(root) or word.startswith('أ' + root[1:]) for root in self.asmaa_khamsa_roots if len(root)>1)
-
-            if is_asmaa and len(word) >= 3:
-                if verb_seen:
-                    word = word.replace('ا', 'و').replace('ي', 'و')
-                    verb_seen = False
-
-            corrected_tokens.append(word)
-
-        return " ".join(corrected_tokens)
+        # Bug 1.1: Disabled blind replacement of ا and ي with و as it corrupts object position
+        return text
 
     def _apply_jazm_to_verb(self, word, token_info):
         # 1. Handle Af'al Khamsa using camel_tools analysis
@@ -196,12 +173,16 @@ class ArabicGrammarGuard:
 
             if i > 0:
                 prev_word = tokens[i-1]
-                if prev_word in nasb_particles or word.startswith('ل'):
+                if prev_word in nasb_particles:
                     is_nasb_context = True
-                if prev_word in jazm_particles or word.startswith('ل') or word.startswith('ول'):
+                if prev_word in jazm_particles:
                     is_jazm_context = True
+                # Lam Al-Ta'leel / Lam Al-Amr logic was flawed (triggering for ANY word starting with ل)
+                # Ensure it only applies to actual verbs starting with 'لي' or 'لت' etc.
+                if (word.startswith('ل') or word.startswith('ول') or word.startswith('فل')) and len(word) >= 4 and word[1] in ['ي', 'ت', 'ن', 'أ']:
+                    is_nasb_context = True
 
-            is_present_tense = word.startswith('ي') or word.startswith('ت') or word.startswith('ن') or word.startswith('أ')
+            is_present_tense = word.startswith('ي') or word.startswith('ت') or word.startswith('ن') or word.startswith('أ') or word.startswith('لي') or word.startswith('لت') or word.startswith('ولي') or word.startswith('فلي')
             if (pos_tag == 'verb' or is_present_tense) and (is_nasb_context or is_jazm_context):
                 if is_jazm_context:
                     word = self._apply_jazm_to_verb(word, token_info)
@@ -223,9 +204,14 @@ class ArabicGrammarGuard:
         # When a feminine noun is followed by a masculine adjective, add ة
         # e.g. السيارة جميل → السيارة جميلة
         words = text.split()
+        KNOWN_MASC_TA_MARBUTA = {'خليفة', 'أسامة', 'حمزة', 'طلحة', 'معاوية', 'عبيدة', 'قضاة', 'دعاة', 'رماة', 'حماة'}
         for i in range(len(words) - 1):
             noun = words[i]
             adj = words[i + 1]
+            # Strip prefixes like 'ال' to check root
+            clean_noun = noun[2:] if noun.startswith('ال') else noun
+            if clean_noun in KNOWN_MASC_TA_MARBUTA:
+                continue
             is_fem_noun = (noun in KNOWN_FEMININE_NOUNS or
                           (noun.endswith('ة') and len(noun) >= 3) or
                           (noun.startswith('ال') and noun.endswith('ة')))
@@ -250,6 +236,9 @@ class ArabicGrammarGuard:
         'النيران', 'نيران', 'الألوان', 'ألوان', 'البلدان', 'بلدان',
         'الأوطان', 'أوطان', 'الأبدان', 'أبدان', 'الأركان', 'أركان',
         'الفرسان', 'فرسان', 'الغزلان', 'غزلان', 'القضبان', 'قضبان',
+        'فرعون', 'قانون', 'القانون', 'كانون', 'قارون', 'طاعون',
+        'عربون', 'هارون', 'زيدون', 'معجون', 'مجنون', 'زيتون', 'صابون',
+        'الفرعون', 'قوانين'
     }
 
     def fix_prepositions_advanced(self, text):
@@ -321,8 +310,8 @@ class ArabicGrammarGuard:
                 if word == 'ذو': return 'ذا'
                 if word == 'فو': return 'فا'
                 if word == 'حمو': return 'حما'
-                if word.endswith('ون'): return word[:-2] + 'ين'
-                if word.endswith('ان'): return word[:-2] + 'ين'
+                if word.endswith('ون') and word not in ('قانون', 'فرعون', 'كانون', 'معجون', 'طاعون', 'مجنون'): return word[:-2] + 'ين'
+                if word.endswith('ان') and word not in ('امتحان', 'إنسان', 'ميدان', 'سلطان', 'شيطان'): return word[:-2] + 'ين'
             elif target_case == 'n': # Marfoo'
                 if word in ('أبا', 'أبي'): return 'أبو'
                 if word in ('أخا', 'أخي'): return 'أخو'
@@ -481,30 +470,18 @@ class ArabicGrammarGuard:
                 # FIX-08: Expanded feminine plurals
                 'المهندسات', 'مهندسات', 'الطبيبات', 'طبيبات',
                 'اللاعبات', 'لاعبات', 'الممثلات', 'ممثلات',
-                'الشركات', 'شركات', 'الجامعات', 'جامعات',
-                'المدارس', 'مدارس', 'المستشفيات', 'مستشفيات',
-                'الحكومات', 'حكومات', 'المنظمات', 'منظمات',
-                'الطائرات', 'طائرات', 'السيارات', 'سيارات',
             }
 
-            if noun_word in KNOWN_PLURALS_MASC:
+            if noun_num == 'd':
+                pass # Dual noun, skip plural logic to prevent corruption
+            elif noun_word in KNOWN_PLURALS_MASC:
                 is_plural_masc = True
             elif noun_word in KNOWN_PLURALS_FEM:
                 is_plural_fem = True
-            elif noun_word.endswith('ون') or noun_word.endswith('ين'):
-                # Sound masculine plural — but only if 4+ chars (avoid short words)
-                if len(noun_word) >= 5:
-                    is_plural_masc = True
-            elif noun_word.endswith('ات') and len(noun_word) >= 5:
-                is_plural_fem = True
-            # FIX-08: Broken plural heuristic — common patterns
-            elif noun_num == 'p':
-                # Trust POS tagger when it says plural AND word is long enough
-                if len(noun_word) >= 4:
-                    if noun_gen == 'f':
-                        is_plural_fem = True
-                    else:
-                        is_plural_masc = True
+            elif (noun_word.endswith('ون') or (noun_word.endswith('ين') and noun_num == 'p')) and len(noun_word) >= 5:
+                # Bug 1.14: Check noun_num == 'p' to prevent duals from triggering plural logic
+                is_plural_masc = True
+            # Bug 1.2: Disabled POS tagger heuristic for broken plurals and generic 'ات' ending because it forces 'ن' on non-human plurals
             
             is_singular_fem = False
             if not is_plural_masc and not is_plural_fem:
@@ -574,7 +551,8 @@ class ArabicGrammarGuard:
             return word
 
         # إن وأخواتها
-        text = re.sub(r'\b(إن|أن|كأن|لكن|لعل|ليت|ان|كان)\s+(أبوك|ابوك|أخوك|اخوك|ذو|فوك)\b',
+        # Bug 1.13: removed كان from this regex because it caused كان أخوك -> كان أخاك
+        text = re.sub(r'\b(إن|أن|كأن|لكن|لعل|ليت|ان)\s+(أبوك|ابوك|أخوك|اخوك|ذو|فوك)\b',
                       lambda m: f"{m.group(1)} {_add_hamza(m.group(2)).replace('و', 'ا')}", text)
 
         # الأفعال المتعدية (Object position)
@@ -608,7 +586,7 @@ class ArabicGrammarGuard:
         corrected_tokens = list(tokens)
         
         # Lookahead for 2nd person context
-        has_2nd_person_context = any(t.endswith('كم') or t.endswith('كمو') or t.startswith('ت') for t in tokens)
+        has_2nd_person_context = False
         
         in_cond = False
         verbs_jazmed = 0
@@ -634,10 +612,6 @@ class ArabicGrammarGuard:
                 # Apply jazm using the comprehensive camel_tools helper
                 word = self._apply_jazm_to_verb(word, token_info)
                     
-                # Fix pronoun mismatch if 2nd person context exists
-                if has_2nd_person_context and word.startswith('ي') and (word.endswith('وا') or word.endswith('ا') or word.endswith('ي')):
-                    word = 'ت' + word[1:]
-                    
                 corrected_tokens[i] = word
                 # Increment jazmed verbs counter (handles both فعل الشرط and جواب الشرط)
                 verbs_jazmed += 1
@@ -866,8 +840,9 @@ class ArabicGrammarGuard:
         }
         words = text.split()
         for i, w in enumerate(words):
-            if w in _ALWAYS_TANWEEN:
-                words[i] = _ALWAYS_TANWEEN[w]
+            clean_w = w.rstrip('.,،؛;:!؟?()[]{}«»"\'…')
+            if clean_w in _ALWAYS_TANWEEN:
+                words[i] = _ALWAYS_TANWEEN[clean_w] + w[len(clean_w):]
         return ' '.join(words)
 
     def fix_initial_hamza(self, text):
@@ -920,16 +895,27 @@ class ArabicGrammarGuard:
         _PRONOUN_SUFFIXES = {'ه', 'ها', 'ك', 'كم', 'كن', 'هم', 'هن', 'ني', 'نا'}
         words = text.split()
         for i, w in enumerate(words):
-            if w in _HAMZA_FIXES:
-                words[i] = _HAMZA_FIXES[w]
+            clean_w = w.rstrip('.,،؛;:!؟?()[]{}«»"\'…')
+            if clean_w in _HAMZA_FIXES:
+                words[i] = _HAMZA_FIXES[clean_w] + w[len(clean_w):]
                 continue
             # إنّ/أنّ: kasra at sentence start, fathah mid-sentence
             _is_sent_start = (i == 0) or (words[i-1][-1] in '.؟!؛' if words[i-1] else False)
-            if _is_sent_start and w in _INNA_SENTENCE_INITIAL:
-                words[i] = _INNA_SENTENCE_INITIAL[w]
+            if _is_sent_start and clean_w in _INNA_SENTENCE_INITIAL:
+                words[i] = _INNA_SENTENCE_INITIAL[clean_w] + w[len(clean_w):]
                 continue
-            if not _is_sent_start and w in _ANNA_MID_SENTENCE:
-                words[i] = _ANNA_MID_SENTENCE[w]
+            if not _is_sent_start and clean_w in _ANNA_MID_SENTENCE:
+                if clean_w == 'ان':
+                    # Bug 1.5: Added تقول and all variants to Qawl check
+                    if i > 0 and words[i-1].rstrip('.,،؛;:!؟?()[]{}«»"\'…') in ('قال', 'قالت', 'يقول', 'يقولون', 'قلت', 'قلنا', 'تقول', 'يقولوا'):
+                        words[i] = 'إن' + w[len(clean_w):]
+                    else:
+                        pass # leave it alone to avoid breaking conditional
+                else:
+                    if i > 0 and words[i-1].rstrip('.,،؛;:!؟?()[]{}«»"\'…') in ('قال', 'قالت', 'يقول', 'يقولون', 'قلت', 'قلنا', 'تقول', 'يقولوا'):
+                        words[i] = _INNA_SENTENCE_INITIAL[clean_w] + w[len(clean_w):]
+                    else:
+                        words[i] = _ANNA_MID_SENTENCE[clean_w] + w[len(clean_w):]
                 continue
             for stem, fixed in _HAMZA_STEMS.items():
                 if w.startswith(stem) and len(w) > len(stem):

src/nlp/grammar/grammar_service.py

@@ -10,12 +10,14 @@ Model + rules loaded on first request and kept in memory.
 
 import logging
 import time
+import threading
 
 logger = logging.getLogger(__name__)
 
 # ── Lazy-loaded singletons ──
 _grammar_checker = None
 _load_error = None
+_lock = threading.Lock()
 
 GRADIO_SPACE = "mohammedahmedezz2004/bayan_arabic_grammarly_correction"
 
@@ -47,19 +49,20 @@ class GrammarChecker:
         if len(orig_words) == len(corr_words):
             result = []
             for o_w, c_w in zip(orig_words, corr_words):
-                prefix = ""
-                for ch in o_w:
-                    if ch in PUNCT_CHARS: prefix += ch
-                    else: break
-                suffix = ""
-                for ch in reversed(o_w):
-                    if ch in PUNCT_CHARS: suffix = ch + suffix
-                    else: break
-                
-                c_base = c_w.strip('.,;:!?،؛؟!.:«»"\'()-–—…')
-                if not c_base:
-                    c_base = c_w
-                result.append(prefix + c_base + suffix)
+                c_has_punct = any(ch in PUNCT_CHARS for ch in c_w)
+                o_has_punct = any(ch in PUNCT_CHARS for ch in o_w)
+                if o_has_punct and not c_has_punct:
+                    prefix = ""
+                    for ch in o_w:
+                        if ch in PUNCT_CHARS: prefix += ch
+                        else: break
+                    suffix = ""
+                    for ch in reversed(o_w):
+                        if ch in PUNCT_CHARS: suffix = ch + suffix
+                        else: break
+                    result.append(prefix + c_w + suffix)
+                else:
+                    result.append(c_w)
             return " ".join(result)
             
         # Global prefix/suffix if lengths differ
@@ -139,78 +142,82 @@ def get_grammar_model():
     if _grammar_checker is not None:
         return _grammar_checker
 
-    if _load_error is not None:
-        raise RuntimeError(f"Grammar model previously failed to load: {_load_error}")
-
-    try:
-        t0 = time.time()
-        logger.info("Loading Grammar model (lazy init)...")
-
-        # 1. Initialize Gradio Client — with retry for rate limiting / sleeping Spaces
-        from gradio_client import Client
-        client = None
-        max_retries = 3
-        last_err = None
-
-        for attempt in range(1, max_retries + 1):
-            try:
-                logger.info(f"Connecting to Gradio Space: {GRADIO_SPACE} (attempt {attempt}/{max_retries})")
-                client = Client(GRADIO_SPACE)
-                logger.info("Gradio Client connected")
-                break
-            except Exception as conn_err:
-                last_err = conn_err
-                err_msg = str(conn_err).lower()
-                is_retryable = any(kw in err_msg for kw in [
-                    'too many requests', 'rate limit', '429',
-                    'timeout', 'connection', 'sleeping'
-                ])
-                if is_retryable and attempt < max_retries:
-                    wait = 2 ** attempt  # 2s, 4s, 8s
-                    logger.warning(
-                        f"Gradio connection attempt {attempt} failed ({conn_err}). "
-                        f"Retrying in {wait}s..."
-                    )
-                    time.sleep(wait)
-                else:
-                    raise  # Not retryable or last attempt — bubble up
-
-        if client is None:
-            raise RuntimeError(f"Gradio connection failed after {max_retries} attempts: {last_err}")
-
-        # 2. Initialize rule-based post-processor (camel-tools)
-        logger.info("Loading ArabicGrammarGuard (camel-tools MLE disambiguator)...")
-        from nlp.grammar.grammar_rules import ArabicGrammarGuard
-        rules = ArabicGrammarGuard()
-        logger.info("ArabicGrammarGuard loaded")
+    with _lock:
+        if _grammar_checker is not None:
+            return _grammar_checker
 
-        # 3. Create GrammarChecker instance
-        _grammar_checker = GrammarChecker(client, rules)
+        if _load_error is not None:
+            raise RuntimeError(f"Grammar model previously failed to load: {_load_error}")
 
-        elapsed = time.time() - t0
-        logger.info(f"Grammar model ready in {elapsed:.1f}s")
-        return _grammar_checker
+        try:
+            t0 = time.time()
+            logger.info("Loading Grammar model (lazy init)...")
+
+            # 1. Initialize Gradio Client — with retry for rate limiting / sleeping Spaces
+            from gradio_client import Client
+            client = None
+            max_retries = 3
+            last_err = None
+
+            for attempt in range(1, max_retries + 1):
+                try:
+                    logger.info(f"Connecting to Gradio Space: {GRADIO_SPACE} (attempt {attempt}/{max_retries})")
+                    client = Client(GRADIO_SPACE)
+                    logger.info("Gradio Client connected")
+                    break
+                except Exception as conn_err:
+                    last_err = conn_err
+                    err_msg = str(conn_err).lower()
+                    is_retryable = any(kw in err_msg for kw in [
+                        'too many requests', 'rate limit', '429',
+                        'timeout', 'connection', 'sleeping'
+                    ])
+                    if is_retryable and attempt < max_retries:
+                        wait = 2 ** attempt  # 2s, 4s, 8s
+                        logger.warning(
+                            f"Gradio connection attempt {attempt} failed ({conn_err}). "
+                            f"Retrying in {wait}s..."
+                        )
+                        time.sleep(wait)
+                    else:
+                        raise  # Not retryable or last attempt — bubble up
+
+            if client is None:
+                raise RuntimeError(f"Gradio connection failed after {max_retries} attempts: {last_err}")
+
+            # 2. Initialize rule-based post-processor (camel-tools)
+            logger.info("Loading ArabicGrammarGuard (camel-tools MLE disambiguator)...")
+            from nlp.grammar.grammar_rules import ArabicGrammarGuard
+            rules = ArabicGrammarGuard()
+            logger.info("ArabicGrammarGuard loaded")
+
+            # 3. Create GrammarChecker instance
+            _grammar_checker = GrammarChecker(client, rules)
+
+            elapsed = time.time() - t0
+            logger.info(f"Grammar model ready in {elapsed:.1f}s")
+            return _grammar_checker
 
-    except Exception as e:
-        import traceback
-        error_msg = str(e)
-        logger.error(f"Failed to load grammar model: {e}")
-        logger.error(traceback.format_exc())
-
-        # Transient errors (rate limiting, network) should NOT be cached —
-        # allow retry on next request
-        transient_keywords = ['Too many requests', 'rate limit', 'timeout',
-                              'ConnectionError', 'ConnectTimeout', 'ReadTimeout',
-                              '429', 'sleeping']
-        is_transient = any(kw.lower() in error_msg.lower() for kw in transient_keywords)
-
-        if is_transient:
-            logger.warning(f"Grammar load error is TRANSIENT — will retry on next request: {error_msg}")
-            # Do NOT set _load_error — next call will retry
-        else:
-            _load_error = error_msg  # Cache permanent failures only
-
-        raise RuntimeError(f"Grammar model load failed: {e}")
+        except Exception as e:
+            import traceback
+            error_msg = str(e)
+            logger.error(f"Failed to load grammar model: {e}")
+            logger.error(traceback.format_exc())
+
+            # Transient errors (rate limiting, network) should NOT be cached —
+            # allow retry on next request
+            transient_keywords = ['Too many requests', 'rate limit', 'timeout',
+                                  'ConnectionError', 'ConnectTimeout', 'ReadTimeout',
+                                  '429', 'sleeping']
+            is_transient = any(kw.lower() in error_msg.lower() for kw in transient_keywords)
+
+            if is_transient:
+                logger.warning(f"Grammar load error is TRANSIENT — will retry on next request: {error_msg}")
+                # Do NOT set _load_error — next call will retry
+            else:
+                _load_error = error_msg  # Cache permanent failures only
+
+            raise RuntimeError(f"Grammar model load failed: {e}")
 
 
 def is_loaded() -> bool: