// AssistantView.jsx — AI Legal Assistant v2.0
// Features: Quick Start (ask / upload / create), doc type cards, save-to-files, credit display, focus mode

/* ── الافتتاحيّةُ الهادئة (calm1 للتطبيق، desk1 لسطح المكتب أيضاً): عنوانٌ وسطرٌ وثلاثةُ أسئلةٍ مقترحة ──
   (حلّت محلَّ البطاقةِ الداكنة وبطاقتَي «راجِع/أنشئ» على سطح المكتب — المستنداتُ من زرِّ «+» في الصندوق) */
const LXC_CSS = `
.lxc{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 8px 12px;animation:fadeIn .4s ease both}
.lxc-t{font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;font-weight:700;font-size:30px;line-height:1.35;margin:0;color:#efe7d6}
.lxc-t b{color:#e07a52}
.lxc-p{margin:10px auto 0;max-width:30ch;font-size:15px;line-height:1.8;color:#c9c2b3}
.lxc-s{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:26px;width:100%;max-width:420px}
.lxc-s button{border:0;background:#16211d;font:inherit;font-size:14px;line-height:1.6;color:#c9c2b3;padding:10px 14px;border-radius:14px;cursor:pointer;text-align:right}
.lxc-s button:active{background:#1d2a25}
.lxc-d{margin-top:22px;font-size:11px;line-height:1.6;color:#9a9384}
html.lx-app .lxa-msgs{padding:16px 16px 20px!important}
html.lx-app .lxa-msgs>*{max-width:720px;margin-inline:auto}
html.lx-app .lxa-head{box-shadow:none!important;background:transparent!important;padding:4px 8px!important;min-height:44px}
html.lx-app .lxa-head .lxa-ibtn{box-shadow:none;width:40px;height:40px;color:#c9c2b3}
html.lx-app .lxa-composer{background:transparent!important;box-shadow:none!important;padding:6px 12px 8px!important}
.lxa-pts{flex:1;min-width:0;text-align:center;font-size:12px;color:#9a9384;border:0;background:none;font-family:inherit;cursor:pointer;padding:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lxa-pts b{color:#c9c2b3;font-weight:600}
.lxa-plus{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#c9c2b3;transition:background .15s,color .15s}
.lxa-plus[aria-expanded="true"]{background:rgba(224,122,82,.14);color:#e07a52}
html.lx-app .lxa-send{border-radius:50%}
html.lx-app .lxa-stop{border-radius:20px}
html.lx-app .lxa-ta{padding:9px 4px!important}
/* desk1 — سطحُ المكتب بروحِ التطبيق: رأسٌ شفّاف، عمودُ قراءةٍ في الوسط، صندوقٌ بيضاويّ بزرّ «+» */
.lxc-tip{margin-top:18px;font-size:12.5px;color:#8f9a94;line-height:1.7}
.lxc-tip b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;margin:0 3px;vertical-align:-4px;background:rgba(239,231,214,.07);color:#c9c2b3;font-weight:600}
html:not(.lx-app) .lxc{animation:none;padding:24px 8px 8px}
html:not(.lx-app) .lxc-t{font-size:34px}
html:not(.lx-app) .lxc-p{max-width:44ch}
html:not(.lx-app) .lxc-s{max-width:520px}
html:not(.lx-app) .lxc-s button{transition:background .15s,color .15s}
html:not(.lx-app) .lxc-s button:hover{background:#1d2a25;color:#efe7d6}
html:not(.lx-app) .lxc-d{display:none}
html:not(.lx-app) .lxa-head{background:transparent!important;box-shadow:none!important;padding:8px 16px!important;min-height:52px}
html:not(.lx-app) .lxa-head .lxa-ibtn{box-shadow:none;color:#a8a69e}
html:not(.lx-app) .lxa-head .lxa-ibtn:hover{color:#efe7d6}
html:not(.lx-app) .lxa-msgs{padding:8px 32px 24px!important}
html:not(.lx-app) .lxa-msgs>*{max-width:800px;margin-inline:auto}
html:not(.lx-app) .lxa-composer{background:transparent!important;box-shadow:none!important;padding:6px 32px calc(12px + env(safe-area-inset-bottom,0px))!important}
html:not(.lx-app) .lxa-composer>*{max-width:800px;margin-inline:auto}
html:not(.lx-app) .lxa-send{border-radius:50%}
html:not(.lx-app) .lxa-stop{border-radius:20px}
html:not(.lx-app) .lxa-ta{padding:8px 6px!important}
html:not(.lx-app) .lxa-plus:hover{background:rgba(239,231,214,.06);color:#efe7d6}
/* سجلُّ المحادثات: لوحٌ خفيف بلا كتلٍ ملوّنة */
html:not(.lx-app) .lxa-hist{background:transparent!important;border-left:1px solid rgba(239,231,214,.06)!important}
html:not(.lx-app) .lxa-hist-top,html:not(.lx-app) .lxa-hist-foot{background:transparent!important;border:0!important}
html:not(.lx-app) .lxa-hist-new{background:transparent!important;color:#efe7d6!important;box-shadow:0 0 0 1px rgba(239,231,214,.12)!important;justify-content:flex-start!important;font-weight:500!important}
html:not(.lx-app) .lxa-hist-new:hover{background:rgba(239,231,214,.05)!important}
html:not(.lx-app) .lxa-hist-foot input{background:rgba(239,231,214,.04)!important;box-shadow:none!important}
html:not(.lx-app) .lxa-conv[aria-current="true"]{background:rgba(239,231,214,.07);color:#efe7d6}
`;
function LxAssistCalm({ onAsk, desk }) {
  // نفسُ «قد تسأل أيضاً» (/ai/suggestions) — ثلاثةٌ فقط، ولا شيءَ لمن لم يسأل بعد
  const [sugg, setSugg] = React.useState([]);
  React.useEffect(() => {
    let alive = true;
    window.api && window.api.ai && window.api.ai.suggestions && window.api.ai.suggestions().then(r => { if (alive) setSugg(((r && r.questions) || []).slice(0, 3)); }).catch(() => {});
    return () => { alive = false; };
  }, []);
  return (
    <div className="lxc">
      <h2 className="lxc-t">اسأل ليكسا<b>.</b></h2>
      <p className="lxc-p">اكتب سؤالك القانوني بلغتك، وليكسا تجيبك من النظام بالمصدر.</p>
      {sugg.length > 0 && (
        <div className="lxc-s" aria-label="أسئلةٌ مقترحة">
          {sugg.map((q, i) => <button key={i} onClick={() => onAsk(q)}>{q}</button>)}
        </div>
      )}
      {desk && <div className="lxc-tip">لمراجعة عقدٍ أو إنشاءِ مستند: زرّ <b aria-hidden="true">+</b> في صندوق الكتابة</div>}
      <div className="lxc-d">ليكسا تقدّم معلوماتٍ قانونيّةً عامّة، وليست استشارةً قانونيّةً رسميّة.</div>
    </div>
  );
}

/* ورقةُ المستندات (وضع التطبيق): زرُّ «+» في صندوقِ الكتابة يفتحُ خياري المراجعة والإنشاء بكلفتهما */
function LxaDocSheet({ open, onClose, onUpload, onCreate }) {
  React.useEffect(() => {
    if (!open) return;
    const k = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [open, onClose]);
  if (!open) return null;
  const ico = (t) => <span className="lx-row-ico" aria-hidden="true" style={{ fontSize: 17 }}>{t}</span>;
  const cost = (n) => <span style={{ flexShrink: 0, fontSize: 12, color: '#e07a52', fontWeight: 600 }}>{n} نقطة</span>;
  return (
    <div className="lx-sheet-wrap" onClick={onClose} role="presentation">
      <div className="lx-sheet" role="dialog" aria-modal="true" aria-label="المستندات" onClick={e => e.stopPropagation()}>
        <div className="lx-sheet-grip" aria-hidden="true" />
        <div className="lx-sheet-title lx-sheet-title--desk">المستندات</div>
        <div className="lx-group">
          {onUpload && (
            <button className="lx-row" onClick={() => { onClose(); onUpload(); }}>
              {ico('📎')}<span className="lx-row-txt">راجع مستنداً<small>ارفع PDF أو Word ليبيّن ليكسا المخالفاتِ والمخاطر</small></span>{cost(LXA_COST.review)}
            </button>
          )}
          <button className="lx-row" onClick={() => { onClose(); onCreate(); }}>
            {ico('✍️')}<span className="lx-row-txt">أنشئ عقداً<small>اختر النوع واملأ البيانات — Word أو PDF</small></span>{cost(LXA_COST.draft)}
          </button>
        </div>
      </div>
    </div>
  );
}

const ASSISTANT_INIT = [{
  id: 'welcome',
  role: 'assistant',
  text: 'مرحباً، أنا ليكسا — مساعدك القانوني الذكي.\n\nأستطيع مساعدتك في فهم حقوقك، تحليل النصوص القانونية، والإجابة على أسئلتك القانونية بلغة واضحة وبسيطة.\n\nكيف يمكنني مساعدتك اليوم؟',
}];

const ASSISTANT_DOC_TYPES = [
  {
    group: 'العقود التجارية والعمل',
    items: [
      { id: 'work-contract', label: 'عقد عمل', icon: '👤' },
      { id: 'rent-contract', label: 'عقد إيجار', icon: '🏢' },
      { id: 'partnership', label: 'عقد شراكة', icon: '🤝' },
      { id: 'services', label: 'عقد خدمات / مقاولة', icon: '⚙️' },
    ]
  },
  {
    group: 'الاتفاقيات القانونية',
    items: [
      { id: 'nda', label: 'اتفاقية سرية (NDA)', icon: '🔒' },
      { id: 'poa', label: 'توكيل رسمي', icon: '📋' },
      { id: 'sale', label: 'عقد بيع', icon: '✍️' },
    ]
  },
  {
    group: 'المراسلات والإشعارات',
    items: [
      { id: 'legal-notice', label: 'خطاب إنذار قانوني', icon: '✉️' },
      { id: 'legal-memo', label: 'مذكرة قانونية', icon: '📄' },
    ]
  },
];

/* ── Doc Schemas — fields per doc type ───────────────── */
const DOC_SCHEMAS = {
  'work-contract': {
    fields: [
      { id: 'employer', label: 'صاحب العمل', placeholder: 'اسم الجهة أو الفرد' },
      { id: 'employee', label: 'الموظف', placeholder: 'الاسم الكامل' },
      { id: 'jobTitle', label: 'المسمى الوظيفي', placeholder: 'مثال: محاسب، مهندس…' },
      { id: 'salary', label: 'الراتب الشهري', placeholder: 'بالريال السعودي', type: 'number' },
      { id: 'probation', label: 'فترة التجربة (بالأشهر)', placeholder: '3 أشهر', type: 'number' },
      { id: 'duration', label: 'مدة العقد', placeholder: 'محدد المدة / غير محدد المدة' },
      { id: 'leave', label: 'الإجازة السنوية (بالأيام)', placeholder: '21 يوماً', type: 'number' },
    ]
  },
  'rent-contract': {
    fields: [
      { id: 'lessor', label: 'المؤجر', placeholder: 'اسم المؤجر' },
      { id: 'lessee', label: 'المستأجر', placeholder: 'اسم المستأجر' },
      { id: 'propType', label: 'نوع العقار', placeholder: 'سكني / تجاري / مكتب' },
      { id: 'address', label: 'العنوان الكامل', placeholder: 'المدينة، الحي، الشارع' },
      { id: 'area', label: 'المساحة (م²)', placeholder: 'مثال: 250', type: 'number' },
      { id: 'deedNo', label: 'رقم الصك (اختياري)', placeholder: 'إن وُجد' },
      { id: 'duration', label: 'مدة العقد', placeholder: 'مثال: سنة' },
      { id: 'startDate', label: 'تاريخ البداية', type: 'date' },
      { id: 'amount', label: 'القيمة السنوية (ر.س)', placeholder: 'مثال: 60000', type: 'number' },
      { id: 'paymentMethod', label: 'طريقة السداد', placeholder: 'سنوي / نصف سنوي / ربع سنوي / شهري' },
    ],
    extras: [
      { id: 'incInsurance', label: 'يشمل التأمين على العقار' },
      { id: 'allowSublet', label: 'يحق التأجير من الباطن' },
      { id: 'lessorMaint', label: 'الصيانة على المؤجر' },
    ],
  },
  'partnership': {
    fields: [
      { id: 'partners', label: 'أسماء الشركاء', placeholder: 'افصل بفاصلة' },
      { id: 'shares', label: 'النسب', placeholder: 'مثال: 50% / 30% / 20%' },
      { id: 'capital', label: 'رأس المال (ر.س)', placeholder: 'مثال: 500,000', type: 'number' },
      { id: 'partnershipType', label: 'نوع الشراكة', placeholder: 'تضامن / محدودة / توصية' },
      { id: 'management', label: 'الإدارة', placeholder: 'من يدير الشركة' },
    ]
  },
  'services': {
    fields: [
      { id: 'provider', label: 'مقدم الخدمة', placeholder: 'الاسم أو الجهة' },
      { id: 'client', label: 'العميل', placeholder: 'اسم العميل' },
      { id: 'serviceType', label: 'نوع الخدمة', placeholder: 'وصف موجز' },
      { id: 'duration', label: 'مدة العقد', placeholder: 'مثال: 6 أشهر' },
      { id: 'amount', label: 'القيمة الإجمالية (ر.س)', type: 'number' },
    ]
  },
  'nda': {
    fields: [
      { id: 'parties', label: 'الأطراف', placeholder: 'الطرف الأول والطرف الثاني' },
      { id: 'infoType', label: 'نوع المعلومات السرية', placeholder: 'تجارية / تقنية / مالية' },
      { id: 'duration', label: 'مدة السرية', placeholder: 'مثال: 5 سنوات' },
      { id: 'exceptions', label: 'الاستثناءات (اختياري)', placeholder: 'معلومات معروفة للعموم…' },
    ]
  },
  'poa': {
    fields: [
      { id: 'principal', label: 'الموكل', placeholder: 'الاسم الكامل + رقم الهوية' },
      { id: 'agent', label: 'الوكيل', placeholder: 'الاسم الكامل + رقم الهوية' },
      { id: 'scope', label: 'نطاق الوكالة', placeholder: 'محدد بمهمة معينة أم عام' },
      { id: 'duration', label: 'مدة الوكالة', placeholder: 'مثال: سنة من تاريخ التوقيع' },
    ]
  },
  'sale': {
    fields: [
      { id: 'seller', label: 'البائع', placeholder: 'الاسم الكامل' },
      { id: 'buyer', label: 'المشتري', placeholder: 'الاسم الكامل' },
      { id: 'item', label: 'المبيع', placeholder: 'وصف الشيء المباع' },
      { id: 'price', label: 'السعر (ر.س)', type: 'number' },
      { id: 'paymentTerms', label: 'شروط الدفع', placeholder: 'كاش / مقسط / دفعة مقدمة + الباقي…' },
      { id: 'warranty', label: 'الضمانات (اختياري)', placeholder: 'مثال: ضمان 12 شهر' },
    ]
  },
  'legal-notice': {
    fields: [
      { id: 'sender', label: 'المُنذِر', placeholder: 'اسمك أو جهتك' },
      { id: 'recipient', label: 'المُنذَر', placeholder: 'الطرف المرسل إليه' },
      { id: 'subject', label: 'الموضوع', placeholder: 'مثال: مطالبة بسداد دين' },
      { id: 'demand', label: 'المطلوب', placeholder: 'الإجراء المطلوب من الطرف الآخر' },
      { id: 'deadline', label: 'المهلة', placeholder: 'مثال: 15 يوم من تاريخ الإنذار' },
    ]
  },
  'legal-memo': {
    fields: [
      { id: 'subject', label: 'الموضوع', placeholder: 'موضوع المذكرة' },
      { id: 'parties', label: 'الأطراف', placeholder: 'المدعي والمدعى عليه' },
      { id: 'facts', label: 'الوقائع', placeholder: 'سرد موجز للوقائع', multiline: true },
      { id: 'requests', label: 'الطلبات', placeholder: 'ما تطلبه من المحكمة', multiline: true },
    ]
  },
  'custom': {
    fields: [
      { id: 'docType', label: 'نوع المستند', placeholder: 'مثال: اتفاقية إنهاء، إقرار…' },
      { id: 'parties', label: 'الأطراف', placeholder: 'الأطراف المعنية' },
      { id: 'subject', label: 'الموضوع', placeholder: 'موضوع المستند' },
      { id: 'details', label: 'التفاصيل', placeholder: 'كل التفاصيل المطلوبة في المستند', multiline: true },
    ]
  },
};

/* Analysis options for uploaded documents */
const ANALYSIS_OPTIONS = [
  { id: 'comprehensive', icon: '🔍', label: 'مراجعة شاملة', desc: 'تحليل كامل + نقاط قوة + مخاطر + توصيات' },
  { id: 'risks', icon: '⚠️', label: 'كشف المخاطر القانونية', desc: 'البنود الخطرة أو المجحفة' },
  { id: 'compliance', icon: '⚖️', label: 'التحقق من المطابقة للأنظمة السعودية', desc: 'هل المستند مطابق للأنظمة' },
  { id: 'summary', icon: '📋', label: 'تلخيص المستند', desc: 'نقاط أساسية مختصرة' },
  { id: 'edits', icon: '🔄', label: 'اقتراح تعديلات', desc: 'لتحسين المستند لصالحك' },
  { id: 'specific', icon: '❓', label: 'سؤال محدد', desc: 'اسأل سؤالاً عن المستند' },
];

/* ── مستنداتُ المساعد: «رفع مستند» (mode=review) و«إنشاء مستند» (mode=draft) ─────────────
   كلفتُها بالنقاط (access.POINTS في الخادم)؛ الخادمُ يبدأُ ردَّهما بوسم «⟦lexa:draft⟧» / «⟦lexa:review⟧»،
   ورسالةُ المستخدمِ في المراجعة تحملُ نصَّ المستندِ بين <lexa-doc name="…">…</lexa-doc> (يُخفى هنا ويظهرُ شارة). */
const LXA_COST = { draft: 30, review: 25, ask: 10 };
const LXA_MAX_UPLOAD = 10 * 1024 * 1024;
function lxaDocMeta(text) {
  const m = String(text || '').match(/^⟦lexa:(draft|review)⟧\s*/);
  return m ? { kind: m[1], body: String(text).slice(m[0].length) } : { kind: null, body: String(text || '') };
}
// fix4 (U1/U2): رسائلُ المساعدِ المحفوظةُ التي ليست إجابة — اعتذارُ فشلٍ/انشغال (النقاطُ رُدّت) أو «أوقفتَ الإجابة»
const LXA_STOP_PREFIX = 'أوقفتَ الإجابة';
const LXA_FAIL_PREFIXES = ['تعذّر توليدُ الإجابةِ الآن', 'الخادمُ مشغولٌ بإجاباتٍ أخرى'];
function lxaIsStoppedMsg(m) {
  return !!m && m.role === 'assistant' && typeof m.content === 'string' && m.content.startsWith(LXA_STOP_PREFIX);
}
function lxaIsFailedMsg(m) {
  return !!m && m.role === 'assistant' && !!m.is_stub && !m.credits_used && typeof m.content === 'string'
    && LXA_FAIL_PREFIXES.some(p => m.content.startsWith(p));
}
// نصُّ ملاحظةِ الإيقاف: النقاطُ لا تُردّ (المساعدُ كان قد بدأ العمل) — الأدمنُ بلا نقاط
function lxaStoppedNote() {
  const u = window.__sanadCurrentUser;
  return (u && u.is_admin) ? 'أوقفتَ الإجابة قبل اكتمالها.' : 'أوقفتَ الإجابة قبل اكتمالها — خُصمت نقاط السؤال لأنّ المساعد كان قد بدأ العمل.';
}

function lxaSplitUser(text) {
  const t = String(text || '');
  const m = t.match(/\n*<lexa-doc name="([^"]*)"(?:\s+chars="(\d+)")?[^>]*>[\s\S]*?<\/lexa-doc>\s*/);
  if (!m) return { text: t, doc: null };
  const unesc = (s) => s.replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
  return { text: (t.slice(0, m.index) + t.slice(m.index + m[0].length)).trim(), doc: { name: unesc(m[1] || 'مستند'), chars: m[2] ? +m[2] : null } };
}
function lxaDocTitle(body, kind) {
  const h = String(body || '').match(/^#\s+(.+)$/m);
  return (h ? h[1].replace(/\*\*/g, '').trim() : '') || (kind === 'review' ? 'تقرير مراجعة مستند — ليكسا' : 'مستند — ليكسا');
}
function lxaPlain(body) {
  // نصٌّ نظيفٌ للنسخ: بلا وسمٍ ولا روابطِ ⟦…⟧
  return String(body || '').replace(/^⟦lexa:\w+⟧\s*/, '').replace(/\s*⟦[^⟧]*⟧/g, '');
}
async function lxaDownloadDocx(body, kind) {
  const title = lxaDocTitle(body, kind);
  const blob = await window.api.ai.exportDocx(title, body);
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = title.replace(/[\\/:*?"<>|#]+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 80) + '.docx';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 1500);
}
// PDF: صفحةٌ مطبوعةٌ عربيّةٌ من اليمين ← «حفظ بصيغة PDF» من نافذةِ الطباعة (المتصفّحُ يشكّلُ الحروفَ العربيّة صحيحاً)
function lxaPrintHtml(body, kind) {
  const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  const t = lxaPlain(body);
  const cut = t.search(/\n-{3,}\nالمصادر:/);
  const main = (cut >= 0 ? t.slice(0, cut) : t).replace(/\s*\[\d{1,2}\](?:\s*\[\d{1,2}\])*/g, '');
  const srcs = cut >= 0 ? t.slice(cut).split('\n').map(l => l.match(/^\[(\d+)\]\s*(.+)$/)).filter(Boolean) : [];
  const inl = (s) => esc(s).replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
  const out = [];
  let list = null;
  const flush = () => { if (list) { out.push('<ul>' + list.join('') + '</ul>'); list = null; } };
  t && main.split('\n').forEach(raw => {
    const s = raw.trim();
    if (!s) { flush(); return; }
    let m;
    if (/^[-_*]{3,}$/.test(s)) { flush(); out.push('<hr>'); return; }
    if ((m = s.match(/^#\s+(.*)$/))) { flush(); out.push('<h1>' + inl(m[1]) + '</h1>'); return; }
    if ((m = s.match(/^#{2,4}\s+(.*)$/))) { flush(); out.push('<h2>' + inl(m[1]) + '</h2>'); return; }
    if ((m = s.match(/^>\s?(.*)$/))) { flush(); out.push('<blockquote>' + inl(m[1]) + '</blockquote>'); return; }
    if ((m = s.match(/^[-•*]\s+(.*)$/))) { (list = list || []).push('<li>' + inl(m[1]) + '</li>'); return; }
    flush();
    out.push('<p>' + inl(s) + '</p>');
  });
  flush();
  if (srcs.length) out.push('<h2 class="src">المراجع النظاميّة (من قاعدة ليكسا)</h2><ol class="src">' + srcs.map(m => '<li value="' + m[1] + '">' + esc(m[2].replace(/\s*:\s*$/, '')) + '</li>').join('') + '</ol>');
  const title = lxaDocTitle(body, kind);
  return '<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><title>' + esc(title) + '</title>'
    + '<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap" rel="stylesheet">'
    + '<style>@page{size:A4;margin:18mm 16mm}body{font-family:"IBM Plex Sans Arabic",Arial,sans-serif;color:#111;background:#fff;font-size:12.5pt;line-height:1.95;margin:0}'
    + 'h1{text-align:center;font-size:19pt;margin:0 0 14pt}h2{font-size:13.5pt;color:#7a3420;margin:14pt 0 4pt;page-break-after:avoid}p{margin:0 0 6pt;text-align:justify}'
    + 'blockquote{margin:6pt 0;padding:4pt 10pt;border-right:3px solid #c96442;background:#f6f1ea;color:#333}ul,ol{margin:0 0 6pt;padding-right:22pt}hr{border:0;border-top:1px solid #ccc;margin:10pt 0}'
    + '.src{font-size:10.5pt;color:#333}footer{margin-top:22pt;text-align:center;font-size:9pt;color:#888}</style></head><body>'
    + out.join('\n') + '<footer>أُعدّ بمساعدة ليكسا — مسودةٌ استرشاديّة تُراجَعُ مع مختصّ قبل الاعتماد.</footer>'
    + '<script>window.onload=function(){setTimeout(function(){window.focus();window.print();},350)}<\/script></body></html>';
}
function lxaPrintPdf(body, kind) {
  const html = lxaPrintHtml(body, kind);
  const w = window.open('', '_blank');
  if (w && w.document) { w.document.open(); w.document.write(html); w.document.close(); return; }
  // النوافذُ المنبثقةُ محجوبة ← إطارٌ مخفيٌّ يُطبع
  const f = document.createElement('iframe');
  f.style.cssText = 'position:fixed;width:0;height:0;border:0;left:-9999px';
  document.body.appendChild(f);
  f.srcdoc = html.replace(/<script>[\s\S]*?<\/script>/, '');
  f.onload = () => { try { f.contentWindow.focus(); f.contentWindow.print(); } catch (_) {} setTimeout(() => f.remove(), 60000); };
}

/* ── إجابةُ المساعد: إحالاتٌ [n] قابلةٌ للنقر + قائمةُ مصادرَ تفتحُ المادّة ─────── */
// الباك إند يُلحقُ بالإجابة سطراً «---» ثمّ «المصادر:» ثمّ «[n] العنوان — المادة ⟦did|رقم⟧» (ai_assistant.format_message)
function lexaDocUrl(did, art) {
  // رقمُ المادّةِ الموحَّد («الخامسة والسبعون» ← 75) بدالّةِ العارضِ نفسِها، فيقفزُ الرابطُ إليها
  // «o:84» = ترتيبُ المادّةِ في الوثيقة (من وضع الباحث) ← art؛ وإلّا رقمُها ← an
  // عنصرُ المكتبة (حكمٌ قضائيّ / شرح / كتاب): ⟦lib:<cases|books>|<المعرّفُ مُرمَّزاً>⟧
  if (/^lib:(cases|books)$/.test(did)) return 'Platform.html?sec=' + did.slice(4) + '&item=' + art;
  if (art && /^o:\d+$/.test(art)) return 'Platform.html?doc=' + encodeURIComponent(did) + '&art=' + art.slice(2);
  if (art && !/^\d+$/.test(art) && window.LexaRender && window.LexaRender.xrKey) art = String(window.LexaRender.xrKey(art) || '');
  return 'Platform.html?doc=' + encodeURIComponent(did) + (art ? '&an=' + encodeURIComponent(art) : '');   // an = رقمُ المادّة (art = ترتيبُها)
}
function LexaAnswer({ text }) {
  const t = String(text || '');
  const cut = t.search(/\n-{3,}\nالمصادر:/);
  const body = cut >= 0 ? t.slice(0, cut) : t;
  const srcs = [];
  if (cut >= 0) {
    t.slice(cut).split('\n').forEach(l => {
      const m = l.match(/^\[(\d+)\]\s*(.+?)\s*⟦([^|⟧]+)\|([^⟧]*)⟧\s*$/);
      if (m) srcs.push({ n: +m[1], label: m[2], did: m[3], art: m[4] });
    });
  }
  const byN = {};
  srcs.forEach(s => { byN[s.n] = s; });
  // **عريض** و[n] — يُقسَّمُ النصُّ بلا HTML خام؛ وسطرُ «## …» عنوانُ قسمٍ عريض
  const inline = (txt, k0) => txt.split(/(\*\*[^*]+\*\*|\[\d{1,2}\])/g).map((p, i) => {
    const key = k0 + '-' + i;
    const b = p.match(/^\*\*([^*]+)\*\*$/);
    if (b) return <b key={key}>{b[1]}</b>;
    const c = p.match(/^\[(\d{1,2})\]$/);
    if (c && byN[+c[1]]) {
      const s = byN[+c[1]];
      return <a key={key} className="lxa-cite" href={lexaDocUrl(s.did, s.art)} target="_blank" rel="noopener" title={s.label} aria-label={'المصدر ' + c[1] + ': ' + s.label}>{c[1]}</a>;
    }
    return <React.Fragment key={key}>{p}</React.Fragment>;
  });
  // كتلُ النصّ: «```…```» نصٌّ حرفيّ، و«> …» اقتباسٌ من مادّة — كلاهما يلتفُّ ولا يدفعُ الصفحةَ أفقيّاً
  const lines = body.split('\n');
  const out = [];
  for (let li = 0; li < lines.length; li++) {
    const ln = lines[li];
    if (/^\s*```/.test(ln)) {
      const buf = [];
      let j = li + 1;
      while (j < lines.length && !/^\s*```/.test(lines[j])) buf.push(lines[j++]);
      out.push(<pre key={li} className="lxa-pre">{buf.join('\n')}</pre>);
      li = j;
      continue;
    }
    if (/^>\s?/.test(ln)) {
      const buf = [];
      let j = li;
      while (j < lines.length && /^>\s?/.test(lines[j])) buf.push(lines[j++].replace(/^>\s?/, ''));
      out.push(<blockquote key={li} className="lxa-quote">{buf.map((b, bi) => <React.Fragment key={bi}>{inline(b, li + '-' + bi)}{bi < buf.length - 1 ? '\n' : ''}</React.Fragment>)}</blockquote>);
      li = j - 1;
      continue;
    }
    const h = ln.match(/^(#{1,4})\s+(.*)$/);
    if (h) { out.push(<div key={li} className={h[1].length === 1 ? 'lxa-h lxa-h1' : 'lxa-h'}>{inline(h[2], li)}</div>); continue; }
    out.push(<React.Fragment key={li}>{inline(ln, li)}{li < lines.length - 1 ? '\n' : ''}</React.Fragment>);
  }
  return (
    <>
      <style>{LXA_ANSWER_CSS}</style>
      {out}
      {srcs.length > 0 && (
        <div className="lxa-srcs">
          <div className="lxa-srcs-h">📚 المصادر <small>— اضغط لفتح المادّة</small></div>
          <div className="lxa-srcs-l">
            {srcs.map(s => (
              <a key={s.n} className="lxa-src" href={lexaDocUrl(s.did, s.art)} target="_blank" rel="noopener" title={s.label}>
                <b>{s.n}</b><span>{s.label}</span><i aria-hidden="true">↗</i>
              </a>
            ))}
          </div>
        </div>
      )}
    </>
  );
}

/* أنماطُ الإجابة (المساعد + «خلاصة ليكسا» في البحث): إحالاتٌ كأزرارٍ صغيرةٍ قابلةٍ للّمس، ومصادرُ كرقائق، ولا تمريرَ أفقيّ */
const LXA_ANSWER_CSS = `
.lxa-cite{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin:0 2px;border-radius:6px;
  background:rgba(224,122,82,.16);color:#ffb08f;font-size:11.5px;font-weight:700;line-height:1;text-decoration:none;vertical-align:2px;
  box-shadow:0 0 0 1px rgba(201,100,66,.3);white-space:nowrap}
.lxa-cite:hover,.lxa-cite:focus-visible{background:rgba(224,122,82,.3);color:#efe7d6}
.lxa-h{font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;font-weight:700;font-size:15px;color:#efe7d6;margin:12px 0 4px;line-height:1.7}
.lxa-pre{margin:8px 0;padding:10px 12px;border-radius:10px;background:#0f1715;box-shadow:0 0 0 1px rgba(239,231,214,.1);
  font-family:'IBM Plex Sans Arabic',ui-monospace,monospace;font-size:13.5px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;overflow-x:hidden}
.lxa-quote{margin:8px 0;padding:8px 12px;border-inline-start:3px solid #c96442;background:rgba(239,231,214,.04);border-radius:0 8px 8px 0;color:#c9c2b3;white-space:pre-wrap;overflow-wrap:anywhere}
.lxa-srcs{margin-top:14px;padding-top:10px;border-top:1px solid rgba(239,231,214,.1);white-space:normal}
.lxa-srcs-h{font-size:12.5px;font-weight:700;color:#c9c2b3;margin-bottom:8px}
.lxa-srcs-h small{font-weight:400;color:#8f9a94}
.lxa-srcs-l{display:flex;flex-wrap:wrap;gap:6px}
.lxa-src{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:34px;padding:5px 10px 5px 8px;border-radius:9px;
  background:#1d2a25;box-shadow:0 0 0 1px rgba(239,231,214,.1);color:#efe7d6;text-decoration:none;font-size:13px;line-height:1.5;transition:box-shadow .15s,background .15s}
.lxa-src b{flex-shrink:0;min-width:20px;height:20px;border-radius:6px;background:rgba(224,122,82,.16);color:#ffb08f;font-size:11.5px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.lxa-src span{min-width:0;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lxa-src i{font-style:normal;color:#e07a52;flex-shrink:0}
.lxa-src:hover,.lxa-src:focus-visible{box-shadow:0 0 0 1px #c96442;background:rgba(224,122,82,.1)}
@media (pointer:coarse){.lxa-cite{min-width:24px;height:22px}.lxa-src{min-height:40px;font-size:13.5px}}
.lxa-h1{font-size:19px;text-align:center;margin:2px 0 12px;color:#efe7d6}
.lxa-doc-tag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 10px;padding-bottom:10px;border-bottom:1px dashed rgba(239,231,214,.14);font-size:12.5px;color:#c9c2b3;white-space:normal}
.lxa-doc-tag b{color:#ffb08f;font-weight:700}
.lxa-doc-tag span{color:#8f9a94}
.lxa-file-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.18);box-shadow:0 0 0 1px rgba(255,255,255,.22);font-size:12.5px;line-height:1.5;white-space:normal}
.lxa-file-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lxa-file-chip small{opacity:.8;flex-shrink:0}
.lxa-dl{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;cursor:pointer;border:1px solid rgba(239,231,214,.16);background:#1d2a25;color:#efe7d6;font:inherit;font-size:12.5px;font-weight:600;transition:all .15s}
.lxa-dl:hover,.lxa-dl:focus-visible{border-color:#c96442;background:rgba(224,122,82,.12)}
.lxa-dl[disabled]{opacity:.6;cursor:wait}
@media (pointer:coarse){.lxa-dl{min-height:40px}}
`;

/* ── Message Bubble ─────────────────────────────────── */
function AssistantBubble({ msg, onSave, onCopy, q, isMobile }) {
  const isUser = msg.role === 'user';
  const [saved, setSaved] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const [rating, setRating] = React.useState(null); // 'up' | 'down'
  const [dl, setDl] = React.useState(null);         // 'docx' أثناء التنزيل
  const streaming = !isUser && !!msg.streaming;
  // مستنداتُ المساعد: ردُّ الصياغة/المراجعة (وسمٌ في أوّلِ النصّ) ورسالةُ المستخدمِ بمستندٍ مرفوع
  const meta = isUser ? null : lxaDocMeta(msg.text);
  const docKind = isUser ? null : (msg.docKind || meta.kind);
  const shownText = isUser ? null : meta.body;
  const userPart = isUser ? (msg.doc ? { text: msg.text, doc: msg.doc } : lxaSplitUser(msg.text)) : null;
  const onDocx = async () => {
    if (dl) return;
    setDl('docx');
    try { await lxaDownloadDocx(shownText, docKind); }
    catch (e) { alert((e && e.message) || 'تعذّر تجهيز ملف Word. حاول مرّةً أخرى.'); }
    finally { setDl(null); }
  };

  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
    if (onCopy) onCopy(msg.text);
  };

  // «في دفترك ✓» لا تظهرُ إلّا بعد أن يُحفَظَ فعلاً (نافذةُ الحفظ تستدعي done عند النجاح)
  const handleSave = () => {
    if (onSave) onSave(msg.text, () => setSaved(true));
  };

  const actBtn = isMobile ? { minHeight: 36 } : {};

  return (
    <div data-lx-q={!isUser && q ? q : undefined} style={{
      display: 'flex',
      flexDirection: isUser ? 'row' : 'row-reverse',
      gap: isMobile ? 8 : 10, marginBottom: isUser ? 18 : 8, alignItems: 'flex-start',
      minWidth: 0,
    }}>
      <div aria-hidden="true" style={{
        width: isMobile ? 26 : 30, height: isMobile ? 26 : 30, borderRadius: '50%', flexShrink: 0,
        background: isUser ? sanadColors.bgSubtle : sanadColors.brandSubtle,
        display: isMobile && !isUser ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 13, fontWeight: 700,
        color: isUser ? sanadColors.textSecondary : sanadColors.brand,
        marginTop: 2,
        boxShadow: '0 0 0 1px rgba(239,231,214,0.08)',
      }}>{isUser ? 'أ' : 'ل'}</div>

      <div style={{ maxWidth: isUser ? (isMobile ? '86%' : '74%') : (isMobile ? '100%' : '90%'), flex: isUser ? '0 1 auto' : '1 1 auto', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{
          background: isUser ? sanadColors.brand : sanadColors.bgElevated,
          color: isUser ? '#fff' : sanadColors.textPrimary,
          borderRadius: isUser ? '14px 4px 14px 14px' : '4px 14px 14px 14px',
          padding: isMobile ? '11px 13px' : '12px 16px', fontSize: isMobile ? 15.5 : 15, lineHeight: 1.85,
          boxShadow: isUser ? 'none' : '0 0 0 1px rgba(239,231,214,0.08), 0 2px 8px rgba(0,0,0,0.05)',
          fontFamily: sanadFonts.arabic, whiteSpace: 'pre-wrap',
          overflowWrap: 'anywhere', wordBreak: 'break-word', minWidth: 0, maxWidth: '100%',
        }}>{isUser ? (
            <>
              {userPart.doc && (
                <span className="lxa-file-chip" title={userPart.doc.name}>
                  <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true" style={{ flexShrink: 0 }}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                  <span><bdi>{userPart.doc.name}</bdi></span>
                  {userPart.doc.chars ? <small>· {userPart.doc.chars.toLocaleString('en-US')} حرف</small> : null}
                </span>
              )}
              {userPart.doc && '\n'}
              {userPart.text}
            </>
          ) : (
            <>
              {docKind && (shownText || streaming) && (
                <div className="lxa-doc-tag">
                  <b>{docKind === 'draft' ? '✍️ مسودة مستند' : '📎 مراجعة مستند'}</b>
                  <span>{docKind === 'draft' ? '— مبنيّةٌ على موادّ النظام في قاعدة ليكسا' : '— مقابل الأنظمة السارية في قاعدة ليكسا'}</span>
                </div>
              )}
              <LexaAnswer text={shownText} />
            </>
          )}
          {!isUser && msg.status && (
            <span role="status" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: sanadColors.textSecondary, fontSize: 13.5 }}>
              <span className="lexa-dots" style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: sanadColors.brand, animation: 'lexaPulse 1s ease-in-out infinite' }} />
              {msg.status}
            </span>
          )}
          {!isUser && msg.stopped && (
            <span style={{ display: 'block', marginTop: msg.text ? 6 : 0, fontSize: 12.5, color: sanadColors.textMuted }}>⏹ {msg.stoppedNote || lxaStoppedNote()}</span>
          )}
          {!isUser && msg.failed && (
            <span className="lxa-failed" role="status" style={{ display: 'block', fontSize: 14, color: sanadColors.textSecondary, lineHeight: 1.8 }}>
              <span style={{ display: 'block' }}>{msg.failed}</span>
              {!msg._orphan && <span style={{ display: 'block', fontSize: 12.5, color: sanadColors.textMuted }}>لم تُخصم نقاطٌ على هذه المحاولة.</span>}
              {msg.onRetry && (
                <button onClick={msg.onRetry} style={{
                  marginTop: 8, padding: '6px 14px', minHeight: 34, borderRadius: 8, cursor: 'pointer',
                  border: '1px solid rgba(201,100,66,0.45)', background: 'rgba(224,122,82,0.16)', color: '#ffb08f',
                  fontFamily: sanadFonts.arabic, fontSize: 13, fontWeight: 600,
                }}>↻ إعادة المحاولة</button>
              )}
            </span>
          )}
          {!isUser && msg.error && (
            <span style={{ display: 'block', marginTop: msg.text ? 6 : 0, fontSize: 14, color: sanadColors.error }}>
              {msg.error}
              {msg.onRetry && (
                <button onClick={msg.onRetry} style={{
                  marginInlineStart: 10, padding: '4px 12px', minHeight: 32, borderRadius: 8, cursor: 'pointer',
                  border: '1px solid rgba(201,100,66,0.45)', background: 'rgba(224,122,82,0.16)', color: '#ffb08f',
                  fontFamily: sanadFonts.arabic, fontSize: 12.5, fontWeight: 600,
                }}>أعد المحاولة</button>
              )}
            </span>
          )}
          <style>{'@keyframes lexaPulse{0%,100%{opacity:.25}50%{opacity:1}}'}</style>
        </div>

        {/* Action row — only for finished assistant messages */}
        {!isUser && !streaming && !msg.error && !msg.failed && msg.text && msg.id !== 'welcome' && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center', paddingRight: 4, marginTop: 2 }}>
            {/* Save to files — PRIMARY */}
            <button onClick={handleSave} title="احفظ الإجابة كاملةً في دفترك — أو ظلّل جزءاً منها بالتحديد" style={{
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '8px 14px', borderRadius: 8, cursor: 'pointer',
              background: saved ? 'rgba(95,191,138,0.14)' : 'rgba(224,122,82,0.16)',
              color: saved ? '#7fd3a3' : '#ffb08f',
              border: saved ? '1px solid rgba(95,191,138,0.35)' : '1px solid rgba(201,100,66,0.4)',
              fontFamily: sanadFonts.arabic, fontSize: 12.5, fontWeight: 600,
              transition: 'all 150ms', ...actBtn,
            }}
              onMouseEnter={e => { if (!saved) { e.currentTarget.style.background = 'rgba(224,122,82,0.26)'; }}}
              onMouseLeave={e => { if (!saved) { e.currentTarget.style.background = 'rgba(224,122,82,0.16)'; }}}
            >
              <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
              </svg>
              {saved ? 'في دفترك ✓' : 'احفظ في دفتري'}
            </button>

            {/* Copy — SECONDARY */}
            <button onClick={handleCopy} title="نسخ" style={{
              display: 'flex', alignItems: 'center', gap: 5,
              padding: '7px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
              background: 'transparent', color: '#c9c2b3',
              fontFamily: sanadFonts.arabic, fontSize: 12.5, transition: 'all 150ms', ...actBtn,
            }}
              onMouseEnter={e => { e.currentTarget.style.background = '#1d2a25'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
            >
              <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true">
                <rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
              </svg>
              {copied ? 'تم النسخ' : (docKind ? 'نسخ النص' : 'نسخ')}
            </button>

            {/* تنزيلُ المستند — Word (.docx) وPDF (نافذةُ الطباعة ← «حفظ بصيغة PDF») */}
            {docKind && (
              <>
                <button className="lxa-dl" onClick={onDocx} disabled={!!dl} title="تنزيل ملف Word (.docx)">
                  <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  {dl === 'docx' ? 'جارٍ التجهيز…' : 'Word'}
                </button>
                <button className="lxa-dl" onClick={() => lxaPrintPdf(shownText, docKind)} title="طباعة أو حفظ بصيغة PDF">
                  <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
                  PDF
                </button>
              </>
            )}

            {/* Rating — SECONDARY with semantic active */}
            <div style={{ display: 'flex', gap: 3, marginRight: 'auto' }}>
              {['up', 'down'].map(dir => (
                <button key={dir} onClick={() => setRating(rating === dir ? null : dir)} title={dir === 'up' ? 'مفيد' : 'غير مفيد'}
                  aria-label={dir === 'up' ? 'إجابة مفيدة' : 'إجابة غير مفيدة'} aria-pressed={rating === dir} style={{
                  width: isMobile ? 36 : 30, height: isMobile ? 36 : 30, borderRadius: 8, border: 'none', cursor: 'pointer',
                  background: rating === dir ? (dir === 'up' ? 'rgba(95,191,138,0.16)' : 'rgba(224,160,82,0.16)') : 'transparent',
                  color: rating === dir ? (dir === 'up' ? '#7fd3a3' : '#e0a052') : '#8f9a94',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'all 150ms',
                }}
                  onMouseEnter={e => { if (rating !== dir) e.currentTarget.style.background = '#1d2a25'; }}
                  onMouseLeave={e => { if (rating !== dir) e.currentTarget.style.background = 'transparent'; }}
                >
                  <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true">
                    {dir === 'up'
                      ? <path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z"/>
                      : <path d="M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z"/>
                    }
                  </svg>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Follow-up suggestions inside the reply */}
        {!isUser && !streaming && msg.followUps && msg.followUps.length > 0 && (
          <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: isMobile ? 8 : 6 }}>
            {msg.onCases && (
              <button onClick={msg.onCases} title="بحثٌ خاصّ في أكثر من 40 ألف حكم قضائي (أطول قليلاً)" style={{
                padding: isMobile ? '9px 14px' : '6px 14px', borderRadius: isMobile ? 12 : 9999, border: '1px solid rgba(201,100,66,0.45)',
                background: 'rgba(224,122,82,0.16)', cursor: 'pointer', fontFamily: sanadFonts.arabic,
                fontSize: isMobile ? 14 : 12.5, fontWeight: 600, color: '#ffb08f',
                ...(isMobile ? { flex: '1 1 100%', minHeight: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, textAlign: 'center' } : {}),
              }}>⚖️ كيف طبّقت المحاكم هذا؟</button>
            )}
            <span style={{ fontSize: 11.5, color: sanadColors.textMuted, alignSelf: 'center', marginLeft: 4 }}>{docKind ? 'تابِع:' : 'اسأل عن:'}</span>
            {msg.followUps.map((fq, qi) => (
              <button key={qi} onClick={() => msg.onFollowUp && msg.onFollowUp(fq)} title={fq.cost ? fq.cost + ' نقطة' : undefined} style={{
                padding: isMobile ? '8px 13px' : '6px 12px', borderRadius: 9999, border: `1px solid ${sanadColors.border}`,
                background: sanadColors.bgElevated, cursor: 'pointer',
                fontFamily: sanadFonts.arabic, fontSize: isMobile ? 13 : 12, color: sanadColors.textSecondary,
                transition: 'all 150ms', maxWidth: '100%', whiteSpace: 'normal', textAlign: 'right',
                ...(isMobile ? { minHeight: 38 } : {}),
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = sanadColors.brand; e.currentTarget.style.color = sanadColors.brand; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = sanadColors.border; e.currentTarget.style.color = sanadColors.textSecondary; }}
              >{typeof fq === 'string' ? fq : <>{fq.label}{fq.cost ? <span style={{ marginInlineStart: 6, fontSize: 11, color: '#ffb08f' }}>· {fq.cost} نقطة</span> : null}</>}</button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* ── Doc Type Selector ──────────────────────────────── */
function DocTypeSelector({ onSelect, onClose }) {
  return (
    <div style={{
      background: sanadColors.bgElevated,
      borderRadius: 14, padding: '20px',
      boxShadow: '0 0 0 1px rgba(239,231,214,0.10), 0 8px 32px rgba(0,0,0,0.12)',
      maxWidth: 560, width: '100%', direction: 'rtl',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: sanadColors.textPrimary }}>اختر نوع المستند</div>
          <div style={{ fontSize: 12, color: sanadColors.textMuted, marginTop: 3, lineHeight: 1.7 }}>
            يصوغه ليكسا كاملاً ويستند إلى موادّ النظام الحاكم · <span style={{ color: '#ffb08f', fontWeight: 600 }}>{LXA_COST.draft} نقطة</span>
            <br />أو صِف المستند الذي تريده بكلماتك في صندوق الكتابة أسفل الشاشة.
          </div>
        </div>
        <button onClick={onClose} aria-label="إغلاق" style={{ background: 'none', border: 'none', cursor: 'pointer', color: sanadColors.textMuted, padding: 8, alignSelf: 'flex-start' }}>
          <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {ASSISTANT_DOC_TYPES.map((group, gi) => (
          <div key={gi}>
            <div style={{ fontSize: 11, fontWeight: 700, color: sanadColors.textMuted, marginBottom: 8 }}>{group.group}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
              {group.items.map((item) => (
                <button key={item.id} onClick={() => onSelect(item)} style={{
                  padding: '7px 14px', borderRadius: 9999, border: 'none', cursor: 'pointer',
                  background: sanadColors.bgSubtle, color: sanadColors.textSecondary,
                  fontFamily: sanadFonts.arabic, fontSize: 13,
                  boxShadow: '0 0 0 1px rgba(239,231,214,0.10)',
                  transition: 'all 140ms',
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = sanadColors.brandSubtle; e.currentTarget.style.color = sanadColors.brand; }}
                  onMouseLeave={e => { e.currentTarget.style.background = sanadColors.bgSubtle; e.currentTarget.style.color = sanadColors.textSecondary; }}
                ><span aria-hidden="true" style={{ marginInlineEnd: 6 }}>{item.icon}</span>{item.label}</button>
              ))}
            </div>
          </div>
        ))}

        {/* Custom */}
        <button onClick={() => onSelect({ id: 'custom', label: 'مستند مخصص' })} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 16px', borderRadius: 10, border: `1.5px dashed ${sanadColors.border}`, cursor: 'pointer',
          background: 'transparent', color: sanadColors.textSecondary,
          fontFamily: sanadFonts.arabic, fontSize: 13, width: '100%',
          transition: 'all 140ms',
        }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = sanadColors.brand; e.currentTarget.style.color = sanadColors.brand; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = sanadColors.border; e.currentTarget.style.color = sanadColors.textSecondary; }}
        >
          <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          مستند مخصص
        </button>
      </div>
    </div>
  );
}

/* ── Doc Form Card — structured form inside conversation ── */
function DocFormCard({ docType, schema, onSubmit, onCancel }) {
  const [values, setValues] = React.useState({});
  const [extras, setExtras] = React.useState({});
  const [notes, setNotes] = React.useState('');
  const set = (k, v) => setValues(p => ({ ...p, [k]: v }));
  const setExtra = (k, v) => setExtras(p => ({ ...p, [k]: v }));

  const inputStyle = {
    width: '100%', padding: '9px 12px', borderRadius: 8,
    border: `1.5px solid ${sanadColors.border}`, background: sanadColors.bg,
    fontFamily: sanadFonts.arabic, fontSize: 13, color: sanadColors.textPrimary,
    outline: 'none', direction: 'rtl', transition: 'border-color 150ms',
  };

  return (
    <div className="lxa-card" style={{
      background: sanadColors.bgElevated, borderRadius: 14,
      boxShadow: '0 0 0 1px rgba(239,231,214,0.10), 0 4px 16px rgba(0,0,0,0.06)',
      padding: 22, maxWidth: 640, width: '100%', direction: 'rtl',
      animation: 'fadeIn 200ms ease both',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, paddingBottom: 12, borderBottom: `1px solid ${sanadColors.border}` }}>
        <span style={{ fontSize: 20 }}>{docType.icon}</span>
        <span style={{ fontSize: 15, fontWeight: 600, color: sanadColors.textPrimary }}>إنشاء {docType.label}</span>
      </div>

      <div className="lxa-grid2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 10, marginBottom: 12 }}>
        {schema.fields.map(f => (
          <div key={f.id} style={{ gridColumn: f.multiline ? '1 / -1' : 'auto' }}>
            <label style={{ display: 'block', fontSize: 11, color: sanadColors.textMuted, marginBottom: 4, fontWeight: 500 }}>{f.label}</label>
            {f.multiline ? (
              <textarea value={values[f.id] || ''} onChange={e => set(f.id, e.target.value)}
                placeholder={f.placeholder} rows={3}
                style={{ ...inputStyle, resize: 'vertical', minHeight: 70 }}
                onFocus={e => e.target.style.borderColor = sanadColors.focus}
                onBlur={e => e.target.style.borderColor = sanadColors.border}
              />
            ) : (
              <input type={f.type || 'text'} value={values[f.id] || ''} onChange={e => set(f.id, e.target.value)}
                placeholder={f.placeholder} style={inputStyle}
                onFocus={e => e.target.style.borderColor = sanadColors.focus}
                onBlur={e => e.target.style.borderColor = sanadColors.border}
              />
            )}
          </div>
        ))}
      </div>

      {schema.extras && (
        <div style={{ marginBottom: 12, padding: '10px 12px', background: sanadColors.bgSubtle, borderRadius: 9 }}>
          <div style={{ fontSize: 11, color: sanadColors.textMuted, marginBottom: 6, fontWeight: 500 }}>شروط إضافية</div>
          {schema.extras.map(ex => (
            <label key={ex.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer' }}>
              <input type="checkbox" checked={!!extras[ex.id]} onChange={e => setExtra(ex.id, e.target.checked)}
                style={{ accentColor: sanadColors.brand, width: 14, height: 14 }}
              />
              <span style={{ fontSize: 12, color: sanadColors.textSecondary }}>{ex.label}</span>
            </label>
          ))}
        </div>
      )}

      <div style={{ marginBottom: 14 }}>
        <label style={{ display: 'block', fontSize: 11, color: sanadColors.textMuted, marginBottom: 4, fontWeight: 500 }}>ملاحظات / متطلبات خاصة (اختياري)</label>
        <textarea value={notes} onChange={e => setNotes(e.target.value)}
          placeholder="أي شروط أو متطلبات خاصة…" rows={2}
          style={{ ...inputStyle, resize: 'vertical' }}
          onFocus={e => e.target.style.borderColor = sanadColors.focus}
          onBlur={e => e.target.style.borderColor = sanadColors.border}
        />
      </div>

      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
        <button onClick={onCancel} style={{
          padding: '9px 18px', borderRadius: 9, border: `1px solid ${sanadColors.border}`,
          background: 'transparent', cursor: 'pointer', fontFamily: sanadFonts.arabic,
          fontSize: 13, color: sanadColors.textSecondary,
        }}>إلغاء</button>
        <SanadButton disabled={!Object.values(values).some(v => String(v || '').trim()) && !notes.trim()}
          onClick={() => onSubmit({ values, extras, notes })}
          style={{ padding: '9px 20px', borderRadius: 9, fontSize: 13 }}>
          📝 أنشئ المستند · {LXA_COST.draft} نقطة
        </SanadButton>
      </div>
      <div style={{ fontSize: 11.5, color: sanadColors.textMuted, marginTop: 10, lineHeight: 1.7, textAlign: 'left' }}>
        اترك ما لا تعرفه فارغاً — يضع ليكسا مكانه [……] لتكمله. الصياغةُ تستغرق دقيقة إلى ثلاث.
      </div>
    </div>
  );
}

/* ── Analysis Options Card — for uploaded documents ── */
function AnalysisOptionsCard({ file, doc, status, error, onSubmit, onCancel, onPickAnother }) {
  // status: 'reading' (الخادمُ يستخرجُ النصّ) | 'ready' | 'error'
  const [selected, setSelected] = React.useState(['comprehensive']);
  const [specificQ, setSpecificQ] = React.useState('');
  const toggle = (id) => setSelected(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]);
  const formatSize = (bytes) => bytes < 1024*1024 ? `${Math.max(1, Math.round(bytes/1024))} ك.ب` : `${(bytes/1024/1024).toFixed(1)} م.ب`;

  return (
    <div className="lxa-card" style={{
      background: sanadColors.bgElevated, borderRadius: 14,
      boxShadow: '0 0 0 1px rgba(239,231,214,0.10), 0 4px 16px rgba(0,0,0,0.06)',
      padding: 22, maxWidth: 640, width: '100%', direction: 'rtl',
      animation: 'fadeIn 200ms ease both',
    }}>
      {/* File preview */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: sanadColors.bgSubtle, borderRadius: 10, marginBottom: 16 }}>
        <div style={{ width: 38, height: 46, borderRadius: 6, background: sanadColors.brandSubtle, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <svg width="20" height="20" fill="none" stroke={sanadColors.brand} strokeWidth="1.8" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: sanadColors.textPrimary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.name}</div>
          <div style={{ fontSize: 11.5, color: status === 'error' ? sanadColors.error : sanadColors.textMuted, marginTop: 2, lineHeight: 1.6 }}>
            {formatSize(file.size)}
            {status === 'reading' && ' · جارٍ قراءة النص…'}
            {status === 'ready' && doc && <>{doc.pages ? ` · ${doc.pages} صفحة` : ''} · {(doc.chars || 0).toLocaleString('en-US')} حرف ✓</>}
            {status === 'error' && ' · تعذّرت القراءة'}
          </div>
        </div>
        <button onClick={onCancel} title="إزالة" aria-label="إزالة الملف" style={{
          width: 28, height: 28, borderRadius: 7, border: 'none', background: 'transparent',
          cursor: 'pointer', color: sanadColors.textMuted, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>

      {status === 'reading' && (
        <div role="status" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 4px', color: sanadColors.textSecondary, fontSize: 13.5 }}>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: sanadColors.brand, animation: 'lexaPulse 1s ease-in-out infinite', flexShrink: 0 }} />
          أقرأ نصّ المستند… (لا يُحفظ الملف على الخادم)
          <style>{'@keyframes lexaPulse{0%,100%{opacity:.25}50%{opacity:1}}'}</style>
        </div>
      )}
      {status === 'error' && (
        <div role="alert" style={{ padding: '12px 14px', borderRadius: 10, background: 'rgba(255,138,138,0.08)', boxShadow: '0 0 0 1px rgba(255,138,138,0.25)', marginBottom: 14 }}>
          <div style={{ fontSize: 13.5, color: sanadColors.textPrimary, lineHeight: 1.8 }}>{error}</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
            <button onClick={onPickAnother} style={{ padding: '8px 14px', minHeight: 38, borderRadius: 9, border: 'none', background: sanadColors.brand, color: '#fff', fontFamily: sanadFonts.arabic, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>اختر ملفاً آخر</button>
            <button onClick={onCancel} style={{ padding: '8px 14px', minHeight: 38, borderRadius: 9, border: `1px solid ${sanadColors.border}`, background: 'transparent', color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic, fontSize: 13, cursor: 'pointer' }}>إلغاء</button>
          </div>
        </div>
      )}
      {status === 'ready' && doc && doc.truncated && (
        <div style={{ fontSize: 12, color: '#e0a052', marginBottom: 12, lineHeight: 1.7 }}>
          المستند طويل — سيُراجَع أوّل {(doc.text || '').length.toLocaleString('en-US')} حرف منه.
        </div>
      )}
      {status === 'ready' && <>
      <div style={{ fontSize: 14, fontWeight: 600, color: sanadColors.textPrimary, marginBottom: 10 }}>ماذا تريد أن أفعل بهذا المستند؟</div>
      <div style={{ fontSize: 12, color: sanadColors.textMuted, marginBottom: 14 }}>اختر خياراً واحداً أو أكثر — كلُّ ملاحظةٍ تُحالُ إلى مادّتها من الأنظمة السارية</div>

      <div className="lxa-grid2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 8, marginBottom: 14 }}>
        {ANALYSIS_OPTIONS.map(opt => {
          const active = selected.includes(opt.id);
          return (
            <button key={opt.id} onClick={() => toggle(opt.id)} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4,
              padding: '12px 14px', borderRadius: 10, cursor: 'pointer',
              background: active ? sanadColors.brandSubtle : sanadColors.bg,
              border: `1.5px solid ${active ? sanadColors.brand : sanadColors.border}`,
              fontFamily: sanadFonts.arabic, textAlign: 'right', transition: 'all 140ms',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%' }}>
                <span style={{ fontSize: 16 }}>{opt.icon}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: active ? sanadColors.brand : sanadColors.textPrimary, flex: 1 }}>{opt.label}</span>
                {active && <svg width="14" height="14" fill="none" stroke={sanadColors.brand} strokeWidth="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>}
              </div>
              <div style={{ fontSize: 11, color: sanadColors.textMuted, lineHeight: 1.5 }}>{opt.desc}</div>
            </button>
          );
        })}
      </div>

      {selected.includes('specific') && (
        <div style={{ marginBottom: 14 }}>
          <label style={{ display: 'block', fontSize: 11, color: sanadColors.textMuted, marginBottom: 4, fontWeight: 500 }}>سؤالك المحدد</label>
          <input value={specificQ} onChange={e => setSpecificQ(e.target.value)}
            placeholder="مثال: ما المخاطر في البند الرابع؟"
            style={{
              width: '100%', padding: '9px 12px', borderRadius: 8,
              border: `1.5px solid ${sanadColors.border}`, background: sanadColors.bg,
              fontFamily: sanadFonts.arabic, fontSize: 13, color: sanadColors.textPrimary,
              outline: 'none', direction: 'rtl',
            }}
          />
        </div>
      )}

      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
        <button onClick={onCancel} style={{
          padding: '9px 18px', borderRadius: 9, border: `1px solid ${sanadColors.border}`,
          background: 'transparent', cursor: 'pointer', fontFamily: sanadFonts.arabic,
          fontSize: 13, color: sanadColors.textSecondary,
        }}>إلغاء</button>
        <SanadButton disabled={selected.length === 0 || (selected.includes('specific') && !specificQ.trim())}
          onClick={() => onSubmit({ options: selected, specificQ })}
          style={{ padding: '9px 20px', borderRadius: 9, fontSize: 13 }}>
          ✨ بدء التحليل · {LXA_COST.review} نقطة
        </SanadButton>
      </div>
      </>}
    </div>
  );
}

/* ── Quick Start Card ───────────────────────────────── */
function QuickStartCard({ icon, label, desc, onClick, active }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        flex: 1, minWidth: 150, padding: '18px 16px',
        borderRadius: 12, border: 'none', cursor: 'pointer',
        background: active ? sanadColors.brandSubtle : hov ? sanadColors.bgSubtle : sanadColors.bgElevated,
        boxShadow: active ? `0 0 0 2px ${sanadColors.brand}` : '0 0 0 1px rgba(239,231,214,0.10)',
        fontFamily: sanadFonts.arabic, textAlign: 'right',
        transition: 'all 160ms',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}
    >
      <div style={{
        width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: active ? sanadColors.brand : hov ? sanadColors.brandSubtle : sanadColors.bgSubtle,
        color: active ? '#fff' : sanadColors.brand,
        transition: 'all 160ms',
      }}>{icon}</div>
      <div style={{ fontSize: 13, fontWeight: 600, color: active ? sanadColors.brand : sanadColors.textPrimary }}>{label}</div>
      <div style={{ fontSize: 11, color: sanadColors.textMuted, lineHeight: 1.5 }}>{desc}</div>
    </button>
  );
}

/* ── Main AssistantView ─────────────────────────────── */
// «رفع مستند»: الملفُّ يُرسَلُ إلى /ai/documents/extract (نصُّه فقط يعود؛ لا يُحفَظ) ثمّ تُطلَبُ المراجعةُ بوضع review
const LXA_UPLOAD_ENABLED = true;

const LXA_VIEW_CSS = `
.lxa-head{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px;min-width:0}
.lxa-ibtn{width:40px;height:40px;border-radius:10px;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:transparent;color:#c9c2b3;box-shadow:0 0 0 1px rgba(239,231,214,.12);transition:background .15s,color .15s}
.lxa-ibtn:hover{background:#1d2a25;color:#efe7d6}
.lxa-ibtn[aria-pressed="true"]{background:#c96442;color:#fff;box-shadow:none}
.lxa-msgs{overflow-x:hidden;overscroll-behavior-y:contain}
.lxa-composer{padding:8px 28px calc(10px + env(safe-area-inset-bottom,0px))}
html.lx-app body:has(.lx-tabbar) .lxa-composer{padding-bottom:8px}
@media(max-width:767px){.lxa-composer{padding-inline:10px}}
.lxa-ta{display:block;width:100%;max-height:160px;overflow-y:auto}
.lxa-ta::placeholder{color:#8f9a94}
.lxa-send{flex-shrink:0;border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,color .15s}
.lxa-stop{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(201,100,66,.55);background:rgba(224,122,82,.16);color:#ffb08f;font-weight:700}
.lxa-stop:hover{background:rgba(224,122,82,.28);color:#efe7d6}
.lxa-stop i{width:10px;height:10px;border-radius:2px;background:currentColor;display:inline-block}
.lxa-conv{position:relative;display:block;width:calc(100% - 16px);text-align:right;border:0;font:inherit;padding:8px 12px 8px 34px;border-radius:8px;font-size:12.5px;
  cursor:pointer;margin:2px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .12s,color .12s;background:transparent;color:#c9c2b3}
.lxa-conv:hover{background:rgba(239,231,214,.05);color:#efe7d6}
.lxa-conv[aria-current="true"]{background:rgba(224,122,82,.16);color:#ffb08f;font-weight:600}
.lxa-conv-wrap{position:relative}
.lxa-conv-wrap .sanad-conv-delete{opacity:0}
.lxa-conv-wrap:hover .sanad-conv-delete,.lxa-conv-wrap:focus-within .sanad-conv-delete{opacity:1}
@media (hover:none){.lxa-conv-wrap .sanad-conv-delete{opacity:1;width:34px!important;height:34px!important}.lxa-conv{min-height:44px;font-size:14px;padding-left:46px;line-height:28px}}
@media(max-width:600px){.lxa-grid2{grid-template-columns:minmax(0,1fr)!important}.lxa-card{padding:16px!important}}
.lxa-cmode{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:5px 6px 5px 10px;border-radius:10px;background:rgba(224,122,82,.1);box-shadow:0 0 0 1px rgba(201,100,66,.28);font-size:12.5px;color:#c9c2b3;min-width:0}
.lxa-cmode-i{flex-shrink:0}
.lxa-cmode-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lxa-cmode-t b{color:#efe7d6;font-weight:600}
.lxa-cmode-t em{font-style:normal;font-weight:700;color:#ffb08f;margin-inline-start:8px;font-size:11.5px}
.lxa-cmode button{flex-shrink:0;width:28px;height:28px;border-radius:7px;border:0;background:transparent;color:#c9c2b3;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lxa-cmode button:hover{background:rgba(239,231,214,.08);color:#efe7d6}
@media (pointer:coarse){.lxa-cmode button{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.lxa-msgs *{animation:none!important}}
`;

let LXA_MID = 0;
const lxaId = (p) => (p || 'm') + (++LXA_MID);

function lxaIcon(name, size) {
  const s = size || 18;
  const p = { width: s, height: s, fill: 'none', stroke: 'currentColor', strokeWidth: 1.9, viewBox: '0 0 24 24', 'aria-hidden': 'true' };
  if (name === 'history') return <svg {...p}><path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>;
  if (name === 'newchat') return <svg {...p}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z"/></svg>;
  if (name === 'plus') return <svg {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
  if (name === 'ask') return <svg {...p}><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>;
  if (name === 'upload') return <svg {...p}><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>;
  if (name === 'create') return <svg {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>;
  if (name === 'close') return <svg {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
  if (name === 'send') return <svg {...p}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>;
  return null;
}

function AssistantView() {
  const [messages, setMessages] = React.useState(ASSISTANT_INIT);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);        // إجابةٌ قيدَ البثّ
  const [opening, setOpening] = React.useState(false);        // فتحُ محادثةٍ سابقة
  const [openErr, setOpenErr] = React.useState(null);         // { msg, id }
  const [history, setHistory] = React.useState([]);
  const [histState, setHistState] = React.useState('loading'); // 'loading' | 'ok' | 'err'
  const [histErr, setHistErr] = React.useState('');
  const [currentConvId, setCurrentConvId] = React.useState(null);
  const [searchQuery, setSearchQuery] = React.useState('');
  const [mode, setMode] = React.useState('ask'); // 'ask' | 'upload' | 'create'
  const [docCtx, setDocCtx] = React.useState(null); // { name } — المستندُ المرفوعُ في هذه المحادثة (أسئلةُ المتابعةِ عنه بوضع review)
  const [showDocTypes, setShowDocTypes] = React.useState(false);
  // الموبايل: قائمةُ المحادثاتِ السابقةِ مخفيّةٌ افتراضياً، وتفتحُ درجاً فوق المحادثة (زرُّ «المحادثات السابقة» في الرأس)
  const _MQ_A = '(max-width: 767px)';
  const [isMobileA, setIsMobileA] = React.useState(() => window.matchMedia(_MQ_A).matches);
  const [focusMode, setFocusMode] = React.useState(() => {
    if (window.matchMedia(_MQ_A).matches) return true;
    // desk1: سطحُ المكتب — يُتذكَّرُ إظهارُ/طيُّ سجلِّ المحادثات؛ افتراضيّاً مطويٌّ على الشاشات الأضيق من 1200px
    try { const v = localStorage.getItem('lx-asst-hist'); if (v === '1' || v === '0') return v === '0'; } catch (_) {}
    return window.innerWidth < 1200;
  });
  const toggleHistDesk = () => setFocusMode(f => { try { localStorage.setItem('lx-asst-hist', f ? '1' : '0'); } catch (_) {} return !f; });
  React.useEffect(() => {
    const mq = window.matchMedia(_MQ_A);
    const on = () => { setIsMobileA(mq.matches); if (mq.matches) setFocusMode(true); };
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => (mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on));
  }, []);
  // calm1: وضعُ التطبيق (نفسُ استعلامِ html.lx-app) — رأسٌ مضغوط + افتتاحيّةٌ هادئة + «+» للمستندات داخلَ الصندوق
  const _MQ_APP = window.LX_APP_Q || '(max-width: 768px)';
  const [lxApp, setLxApp] = React.useState(() => window.matchMedia(_MQ_APP).matches);
  React.useEffect(() => {
    const mq = window.matchMedia(_MQ_APP);
    const on = () => setLxApp(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => (mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on));
  }, []);
  const [docSheet, setDocSheet] = React.useState(false);
  const closeHistOnMobile = () => { if (isMobileA) setFocusMode(true); };
  const drawerOpen = isMobileA && !focusMode;
  const [showSaveModal, setShowSaveModal] = React.useState(false);
  const [saveText, setSaveText] = React.useState('');
  const [saveQ, setSaveQ] = React.useState('');
  const saveDoneRef = React.useRef(null);

  // الكريدت من المستخدم الحالي (محقون من Platform.html)
  const currentUser = window.__sanadCurrentUser;
  // au1: الرصيدُ من /points (الشهريّ + الشحن) لا من credits_balance وحدَه
  const lxPts = window.useLexaPoints ? window.useLexaPoints() : null;
  const CREDITS_REMAINING = lxPts ? window.lexaPointsTotal(lxPts) : (currentUser?.credits_balance ?? 0);
  const CREDITS_TOTAL = lxPts ? Math.max((lxPts.monthly_max || 0) + (lxPts.topup || 0), CREDITS_REMAINING) : (currentUser?.credits_max ?? 0);

  const bottomRef = React.useRef(null);
  const fileInputRef = React.useRef(null);
  const taRef = React.useRef(null);
  const composerRef = React.useRef(null);
  const stickRef = React.useRef(true);   // المستخدمُ في أسفلِ المحادثة؟ (لا نسحبه للأسفل وهو يقرأ أعلى الإجابة)

  // ── البثّ: كلُّ إرسالٍ «جولة» برقمٍ ومُلغٍ خاصّ؛ لا يكتبُ إلّا الجولةُ الحيّةُ وفي رسالتِها هي ──
  const streamRef = React.useRef(null);  // { ac, runId, aid }
  const runSeq = React.useRef(0);
  const openSeq = React.useRef(0);
  const convIdRef = React.useRef(null);
  const setConv = (id) => { convIdRef.current = id; setCurrentConvId(id); };

  const stopStream = (markStopped) => {
    const cur = streamRef.current;
    if (!cur) return;
    streamRef.current = null;
    try { cur.ac.abort(); } catch (_) {}
    setLoading(false);
    if (markStopped) {
      setMessages(prev => prev.map(m => m.id === cur.aid ? { ...m, status: null, streaming: false, stopped: true, stoppedNote: lxaStoppedNote() } : m));
      window.dispatchEvent(new CustomEvent('sanad-user-refresh'));
    }
  };

  // مغادرةُ الشاشة ← يُقطَعُ البثُّ ويُغلَقُ القارئ
  React.useEffect(() => () => {
    openSeq.current++;
    const cur = streamRef.current;
    streamRef.current = null;
    if (cur) { try { cur.ac.abort(); } catch (_) {} }
  }, []);

  // ── جلب لائحة المحادثات (مع debounce للبحث) ──
  const refreshHistory = React.useCallback(async (search = '') => {
    try {
      const list = await window.api.conversations.list(search || undefined);
      setHistory(list || []);
      setHistState('ok');
    } catch (e) {
      setHistState('err');
      setHistErr(e && e.status === 401 ? 'سجّل الدخول لتظهر محادثاتك هنا.' : ((e && e.message) || 'تعذّر تحميل المحادثات.'));
    }
  }, []);

  React.useEffect(() => {
    const t = setTimeout(() => refreshHistory(searchQuery), searchQuery ? 250 : 0);
    return () => clearTimeout(t);
  }, [searchQuery, refreshHistory]);

  // ── فتح محادثة سابقة ──
  const openConversation = async (convId) => {
    stopStream(false);
    const seq = ++openSeq.current;
    setConv(convId);
    setOpening(true);
    setOpenErr(null);
    setShowDocTypes(false);
    setMode('ask');
    try {
      const conv = await window.api.conversations.get(convId);
      if (seq !== openSeq.current) return;           // فُتحت محادثةٌ أخرى في الأثناء
      stickRef.current = true;
      const raw = (conv && conv.messages) || [];
      const list = raw.map((m, i) => {
        const id = 's' + (m.id != null ? m.id : i);
        // fix4: اعتذارٌ محفوظ (فشل/انشغال، النقاطُ رُدّت) ← بطاقةُ خطأٍ هادئة · «أوقفتَ الإجابة» ← ملاحظةُ الإيقاف
        if (lxaIsStoppedMsg(m)) return { id, role: 'assistant', text: '', stopped: true, stoppedNote: m.content, _plain: true };
        if (lxaIsFailedMsg(m)) return { id, role: 'assistant', text: '', failed: m.content, _plain: true };
        return { id, role: m.role, text: m.content };
      });
      // سؤالٌ أخيرٌ بلا ردّ (أُوقف قبل هذا الإصلاح أو انقطع الاتصال) ← لا يبقى يتيماً
      const tail = list[list.length - 1];
      if (tail && tail.role === 'user') list.push({ id: tail.id + '-x', role: 'assistant', text: '', failed: 'لم تكتمل الإجابة على هذا السؤال.', _orphan: true });
      // إعادةُ المحاولة للبطاقةِ الأخيرةِ فقط (سؤالٌ نصّيٌّ بلا مستندٍ مرفوع)
      const last = list[list.length - 1], prevQ = list[list.length - 2];
      if (last && last.failed && prevQ && prevQ.role === 'user' && !lxaSplitUser(prevQ.text).doc) {
        last.onRetry = () => {
          setMessages(prev => prev.filter(x => x.id !== last.id && x.id !== prevQ.id));
          setTimeout(() => sendRef.current(prevQ.text), 0);
        };
      }
      setMessages([ASSISTANT_INIT[0], ...list]);   // welcome message + المحادثة
      // محادثةُ مستند: آخرُ ردٍّ مسودّةٌ أو مراجعة ← الصندوقُ يتابعُ في وضعه
      let lastDoc = null;
      list.forEach(m => { if (m.role === 'user') { const sp = lxaSplitUser(m.text); if (sp.doc) lastDoc = sp.doc; } });
      setDocCtx(lastDoc ? { name: lastDoc.name } : null);
      const lastA = [...list].reverse().find(m => m.role === 'assistant' && !m._plain && !m._orphan);
      const lk = lastA ? lxaDocMeta(lastA.text).kind : null;
      setMode(lk === 'draft' ? 'create' : (lk === 'review' && lastDoc) ? 'upload' : 'ask');
    } catch (e) {
      if (seq !== openSeq.current) return;
      setOpenErr({ id: convId, msg: e && e.status === 404 ? 'هذه المحادثة لم تعد موجودة.' : ((e && e.message) || 'تعذّر فتح المحادثة.') });
    } finally {
      if (seq === openSeq.current) setOpening(false);
    }
  };

  // ── محادثة جديدة ──
  const newConversation = () => {
    stopStream(false);
    openSeq.current++;
    setOpening(false);
    setOpenErr(null);
    setMessages(ASSISTANT_INIT);
    setInput('');
    setMode('ask');
    setDocCtx(null);
    setShowDocTypes(false);
    setConv(null);  // الـ create هيتعمل عند أول رسالة
  };

  // ── حذف محادثة ──
  const deleteConversation = async (convId, title) => {
    if (!window.confirm(`هل تريد حذف "${title}"؟ لا يمكن التراجع.`)) return;
    try {
      await window.api.conversations.delete(convId);
      // لو كانت المحادثة الحالية، نرجع للحالة الفارغة
      if (convId === convIdRef.current) newConversation();
      refreshHistory(searchQuery);
    } catch (e) {
      alert((e && e.message) || 'تعذّر حذف المحادثة.');
    }
  };

  const onMsgsScroll = (e) => {
    const el = e.currentTarget;
    stickRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 140;
  };

  React.useEffect(() => {
    if (messages.length <= 1 && bottomRef.current) { bottomRef.current.parentElement.scrollTop = 0; return; }   // الافتتاحيّة: من أعلاها
    if (bottomRef.current) {
      const el = bottomRef.current.parentElement;
      const last = messages[messages.length - 1];
      // For system cards (doc-form, doc-analysis): scroll the card so its TOP is visible
      if (last && (last.kind === 'doc-form' || last.kind === 'doc-analysis')) {
        const cards = el.querySelectorAll('[data-system-card]');
        const lastCard = cards[cards.length - 1];
        if (lastCard) lastCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else if (stickRef.current) {
        el.scrollTop = el.scrollHeight;
      }
    }
  }, [messages]);

  // mode = 'cases' ← «كيف طبّقت المحاكم؟» · 'draft' ← إنشاءُ مستند · 'review' ← مراجعةُ مستندٍ مرفوع
  // opts.doc = { name, text, chars } — المستندُ المستخرَجُ الآن (بدونه في review: آخرُ مستندٍ في المحادثة على الخادم)
  const send = async (text, mode, opts) => {
    const userText = (text || input).trim();
    if (!userText || streamRef.current) return;
    if (!text) setInput('');
    setShowDocTypes(false);
    const doc = (opts && opts.doc) || null;
    const docKind = mode === 'draft' || mode === 'review' ? mode : null;

    const runId = ++runSeq.current;
    const ac = new AbortController();
    const aid = lxaId('a'), uid = lxaId('u');
    streamRef.current = { ac, runId, aid };
    const alive = () => !!streamRef.current && streamRef.current.runId === runId && !ac.signal.aborted;
    // يكتبُ في رسالةِ هذه الجولةِ بالذات (بمعرّفها) — لا في «آخر رسالة» أيّاً كانت
    const patch = (obj) => { if (alive()) setMessages(prev => prev.map(m => m.id === aid ? { ...m, ...obj } : m)); };

    stickRef.current = true;
    setMessages(prev => [...prev,
      { id: uid, role: 'user', text: userText, doc: doc ? { name: doc.name, chars: doc.chars || (doc.text || '').length } : undefined },
      { id: aid, role: 'assistant', text: '', streaming: true, docKind,
        status: mode === 'cases' ? 'أبحث في الأحكام القضائيّة…'
          : mode === 'draft' ? 'أحدّد النظام الحاكم للمستند… (الصياغة تستغرق دقيقة إلى ثلاث)'
          : mode === 'review' ? 'أقرأ المستند وأقابله بالأنظمة… (المراجعة تستغرق دقيقة إلى ثلاث)'
          : 'أبحث في الأنظمة…' },
    ]);
    if (docKind) {                                  // متابعةُ المستندِ في الصندوقِ نفسِه بعد الردّ
      setMode(docKind === 'draft' ? 'create' : 'upload');
      if (docKind === 'review' && doc) setDocCtx({ name: doc.name });
    }
    setLoading(true);
    let acc = '', failedText = null;
    try {
      // 1) لو مفيش محادثة حالية، ننشئ واحدة
      let convId = convIdRef.current;
      if (!convId) {
        const newConv = await window.api.conversations.create();
        if (!alive()) return;
        convId = newConv.id;
        setConv(convId);
      }

      // 2) نبعت الرسالة → الإجابةُ تُبثُّ كلمةً كلمة (SSE)؛ وإن لم يتوفّر البثُّ فالطريقةُ القديمة
      if (window.api.conversations.sendMessageStream) {
        const final = await window.api.conversations.sendMessageStream(convId, userText, (ev) => {
          if (!alive()) return;
          if (ev.type === 'status') patch({ text: acc, status: ev.text });
          else if (ev.type === 'reset') { acc = ''; patch({ text: '', status: 'أواصل البحث…' }); }   // نصٌّ تمهيديٌّ قبل جولةِ بحثٍ أخرى
          else if (ev.type === 'delta') { acc += ev.text; patch({ text: acc, status: null }); }
          else if (ev.type === 'done' && ev.failed) { failedText = ev.text || 'تعذّر توليدُ الإجابةِ الآن.'; }   // fix4 (U1): اعتذارٌ لا إجابة — النقاطُ رُدّت
          else if (ev.type === 'done') { acc = ev.text || acc; patch({ text: acc, status: null }); }
          else if (ev.type === 'error') patch({ status: null, error: ev.text || 'تعذّر توليد الإجابة الآن.' });
        }, (mode === 'review' && doc) ? { mode, doc_text: doc.text, doc_name: doc.name } : mode, ac.signal);
        if (!alive()) return;
        if (failedText) {
          patch({
            text: '', status: null, streaming: false, failed: failedText,
            onRetry: () => {
              setMessages(prev => prev.filter(m => m.id !== aid && m.id !== uid));
              setTimeout(() => sendRef.current(userText, mode, opts), 0);
            },
          });
          refreshHistory(searchQuery);
          window.dispatchEvent(new CustomEvent('sanad-user-refresh'));
          return;
        }
        const txt = final || acc;
        patch(txt ? { text: txt, status: null, streaming: false }
                  : { status: null, streaming: false, error: 'لم تصل إجابة. حاول مرّةً أخرى.' });
      } else {
        const res = await window.api.conversations.sendMessage(convId, userText);
        if (!alive()) return;
        patch({ text: res.assistant_message.content, status: null, streaming: false });
      }

      // 3) refresh لقائمة المحادثات (لو الـ title اتجدد) + بيانات المستخدم (للكريدت)
      refreshHistory(searchQuery);
      window.dispatchEvent(new CustomEvent('sanad-user-refresh'));
    } catch (e) {
      if ((window.api.isAbortError && window.api.isAbortError(e)) || (e && e.name === 'AbortError') || !alive()) return;
      const errMsg = e.status === 402
        ? ((e && e.message) || 'رصيد النقاط لا يكفي. قم بترقية باقتك للمتابعة.')
        : e.status === 401
          ? 'انتهت جلستك. سجّل الدخول من جديد للمتابعة.'
          : ((e && e.message) || 'عذراً، حدث خطأ. يرجى المحاولة مرة أخرى.');
      const canRetry = e.status !== 402 && e.status !== 401 && e.status !== 400;
      patch({
        status: null, streaming: false, error: errMsg,
        onRetry: canRetry ? () => {
          setMessages(prev => prev.filter(m => m.id !== aid && m.id !== uid));
          setTimeout(() => sendRef.current(userText, mode, opts), 0);
        } : null,
      });
    } finally {
      if (streamRef.current && streamRef.current.runId === runId) {
        streamRef.current = null;
        setLoading(false);
      }
    }
  };
  const sendRef = React.useRef(send);
  sendRef.current = send;

  // سؤالٌ محوَّلٌ من محرّكِ البحث («✨ اسأل ليكسا عن هذا») — يُرسَلُ مرّةً عند الفتح
  React.useEffect(() => {
    let q = null;
    try { q = localStorage.getItem('lexa-ask'); localStorage.removeItem('lexa-ask'); } catch (_) {}
    let t = null;
    if (q) t = setTimeout(() => sendRef.current(q), 350);
    // «دفتري»: فتحُ المحادثةِ التي حُفظ منها المقتطفُ أو الإجابة
    let conv = null;
    try { conv = localStorage.getItem('lexa-open-conv'); localStorage.removeItem('lexa-open-conv'); } catch (_) {}
    if (conv && !q) openConversation(+conv);
    return () => { if (t) clearTimeout(t); };
  }, []);

  // درجُ المحادثات (موبايل): Esc يغلقه
  React.useEffect(() => {
    if (!drawerOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setFocusMode(true); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [drawerOpen]);

  // صندوقُ الكتابةِ ينمو مع النصّ (حتى حدّ) ثمّ يُمرَّرُ داخلَه
  React.useLayoutEffect(() => {
    const ta = taRef.current;
    if (!ta) return;
    ta.style.height = 'auto';
    ta.style.height = Math.min(ta.scrollHeight, isMobileA ? 132 : 160) + 'px';
  }, [input, isMobileA]);

  // زرُّ الدعمِ العائمُ لا يغطّي زرَّ الإرسال: إن تقاطعَ مع صندوقِ الكتابة نُفسحُ له مكاناً
  const [fabPad, setFabPad] = React.useState(0);
  React.useEffect(() => {
    const check = () => {
      const box = composerRef.current;
      const fab = document.querySelector('.lx-support-fab');
      if (!box || !fab) { setFabPad(0); return; }
      const cs = getComputedStyle(fab);
      if (cs.display === 'none' || cs.visibility === 'hidden' || +cs.opacity === 0) { setFabPad(0); return; }
      const f = fab.getBoundingClientRect(), b = box.getBoundingClientRect();
      const hit = f.bottom > b.top && f.top < b.bottom && f.right > b.left && f.left < b.right;
      const nearLeft = f.left - b.left < b.width / 2;
      setFabPad(hit && nearLeft ? Math.ceil(f.right - b.left + 12) : 0);
    };
    check();
    const iv = setInterval(check, 1500);
    window.addEventListener('resize', check);
    return () => { clearInterval(iv); window.removeEventListener('resize', check); };
  }, []);

  const fieldLabel = (schema, k) => {
    const f = schema && schema.fields && schema.fields.find(x => x.id === k);
    return f ? f.label : k;
  };
  const extraLabel = (schema, k) => {
    const f = schema && schema.extras && schema.extras.find(x => x.id === k);
    return f ? f.label : k;
  };

  const handleDocSelect = (docType) => {
    setShowDocTypes(false);
    setMode('create');
    const schema = DOC_SCHEMAS[docType.id] || DOC_SCHEMAS['custom'];
    setMessages(prev => [...prev.filter(m => m.kind !== 'doc-form'), { id: lxaId('f'), role: 'system', kind: 'doc-form', docType, schema }]);
  };

  const handleDocFormSubmit = ({ values, extras, notes }) => {
    // Build a structured prompt — بأسماءِ الحقولِ العربيّة لا معرّفاتِها الداخليّة
    const lastForm = messages.find(m => m.kind === 'doc-form');
    const schema = lastForm?.schema;
    // Remove the doc-form card from messages
    setMessages(prev => prev.filter(m => m.kind !== 'doc-form'));
    const docLabel = lastForm?.docType?.label || 'مستند';
    const lines = [`أنشئ ${docLabel} بالبيانات التالية:`];
    Object.entries(values).forEach(([k, v]) => { if (v) lines.push(`• ${fieldLabel(schema, k)}: ${v}`); });
    const extrasOn = Object.entries(extras).filter(([, v]) => v).map(([k]) => extraLabel(schema, k));
    if (extrasOn.length) lines.push(`شروط إضافية: ${extrasOn.join('، ')}`);
    if (notes.trim()) lines.push(`ملاحظات: ${notes.trim()}`);
    send(lines.join('\n'), 'draft');
  };

  const handleDocFormCancel = () => {
    setMessages(prev => prev.filter(m => m.kind !== 'doc-form'));
    setMode('ask');
  };

  // «رفع مستند»: يُرسَلُ الملفُّ ليُستخرَجَ نصُّه (لا يُحفَظ) ← بطاقةُ الخيارات ← المراجعةُ بوضع review
  const extractSeq = React.useRef(0);
  const handleFileSelected = async (file) => {
    const fid = lxaId('f');
    const seq = ++extractSeq.current;
    setShowDocTypes(false);
    const card = { id: fid, role: 'system', kind: 'doc-analysis', file: { name: file.name, size: file.size }, status: 'reading' };
    setMessages(prev => [...prev.filter(m => m.kind !== 'doc-analysis'), card]);
    const upd = (obj) => setMessages(prev => prev.map(m => m.id === fid ? { ...m, ...obj } : m));
    if (file.size > LXA_MAX_UPLOAD) { upd({ status: 'error', error: 'حجمُ الملفّ يتجاوز 10 ميغابايت — ارفع ملفاً أصغر.' }); return; }
    try {
      const doc = await window.api.ai.extractDocument(file);
      if (seq !== extractSeq.current) return;
      upd({ status: 'ready', doc });
    } catch (e) {
      if (seq !== extractSeq.current) return;
      upd({ status: 'error', error: e && e.status === 401 ? 'سجّل الدخول لرفع المستندات.' : ((e && e.message) || 'تعذّر قراءة الملف. حاول مرّةً أخرى.') });
    }
  };

  const handleAnalysisSubmit = ({ options, specificQ }) => {
    const analysisMsg = messages.find(m => m.kind === 'doc-analysis');
    if (!analysisMsg || !analysisMsg.doc) return;
    setMessages(prev => prev.filter(m => m.kind !== 'doc-analysis'));
    const labels = ANALYSIS_OPTIONS.filter(o => options.includes(o.id) && o.id !== 'specific').map(o => o.label);
    const fileName = analysisMsg.doc.name || analysisMsg.file.name || 'المستند';
    const lines = [`راجِع المستند «${fileName}» مقابل الأنظمة السعودية:`, ...labels.map(l => `• ${l}`)];
    if (options.includes('specific') && specificQ.trim()) lines.push(`سؤالي: ${specificQ.trim()}`);
    send(lines.join('\n'), 'review', { doc: analysisMsg.doc });
  };

  const handleAnalysisCancel = () => {
    extractSeq.current++;
    setMessages(prev => prev.filter(m => m.kind !== 'doc-analysis'));
  };
  const pickFile = () => { setShowDocTypes(false); fileInputRef.current && fileInputRef.current.click(); };

  const handleSaveRequest = (text, q, done) => {
    saveDoneRef.current = done || null;
    setSaveText(String(text || '').replace(/^⟦lexa:\w+⟧\s*/, ''));
    setSaveQ(q || '');
    setShowSaveModal(true);
  };

  // دفتري: يُعادُ تلوينُ ما ظلّله المستخدمُ في هذه المحادثة
  const msgsRef = React.useRef(null);
  React.useEffect(() => {
    if (!currentConvId || loading || !window.LexaNote) return;
    const t = setTimeout(() => window.LexaNote.paintRef(msgsRef.current, 'conv:' + currentConvId), 300);
    return () => clearTimeout(t);
  }, [currentConvId, messages.length, loading]);

  const isEmpty = messages.filter(m => !m.kind).length <= 1;   // بطاقاتُ النماذج/الرفع لا تُخفي الافتتاحيّة
  const canSend = !!input.trim() && !loading;
  // ما يُرسِلُه صندوقُ الكتابة: سؤال (10) · صياغةُ مستند (30) · سؤالٌ عن المستندِ المرفوع (25)
  const composerMode = mode === 'create' ? 'draft' : (mode === 'upload' && docCtx) ? 'review' : 'ask';
  const sendComposer = () => send(undefined, composerMode === 'ask' ? undefined : composerMode);
  const openCreate = () => { setMode('create'); setShowDocTypes(true); };

  const modeButtons = [
    { id: 'ask', label: 'سؤال', icon: 'ask', click: () => { setMode('ask'); setShowDocTypes(false); } },
    ...(LXA_UPLOAD_ENABLED ? [{ id: 'upload', label: 'رفع مستند', cost: LXA_COST.review, icon: 'upload', click: pickFile }] : []),
    { id: 'create', label: 'إنشاء مستند', cost: LXA_COST.draft, icon: 'create', click: () => { if (showDocTypes) setShowDocTypes(false); else openCreate(); } },
  ];
  const modeActive = (id) => id === 'create' ? (showDocTypes || composerMode === 'draft')
    : id === 'upload' ? (composerMode === 'review' && !showDocTypes)
    : (composerMode === 'ask' && !showDocTypes);

  return (
    <>
      <style>{LXA_VIEW_CSS}</style>
      <style>{LXC_CSS}</style>
      <div style={{ display: 'flex', height: '100%', direction: 'rtl', fontFamily: sanadFonts.arabic, background: sanadColors.bg, position: 'relative', minWidth: 0, overflow: 'hidden' }}>

        {/* خلفيةٌ داكنةٌ خلف درجِ المحادثات على الموبايل */}
        {drawerOpen && (
          <div onClick={() => setFocusMode(true)} aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'rgba(4,7,6,0.62)', zIndex: 49 }} />
        )}

        {/* Chat history sidebar — hidden in focus mode; على الموبايل درجٌ منزلق */}
        {!focusMode && (
          <div className="lxa-hist" role={isMobileA ? 'dialog' : undefined} aria-modal={isMobileA ? 'true' : undefined} aria-label="المحادثات السابقة" style={{
            width: isMobileA ? 'min(300px, 86vw)' : 220, flexShrink: 0,
            background: sanadColors.bgElevated,
            borderLeft: `1px solid ${sanadColors.border}`,
            display: 'flex', flexDirection: 'column',
            ...(isMobileA ? { position: 'absolute', top: 0, right: 0, height: '100%', zIndex: 50, boxShadow: '-8px 0 24px rgba(0,0,0,0.4)' } : {}),
          }}>
            {/* Top section — softer tint for the new-chat CTA */}
            <div className="lxa-hist-top" style={{ padding: '12px', background: sanadColors.bg, borderBottom: `1px solid ${sanadColors.border}`, display: 'flex', gap: 8, alignItems: 'center' }}>
              <button className="lxa-hist-new"
                onClick={() => { newConversation(); closeHistOnMobile(); }}
                style={{
                  flex: 1, padding: isMobileA ? '11px 12px' : '9px 12px', borderRadius: 9, border: 'none',
                  background: sanadColors.brand, color: '#fff',
                  fontFamily: sanadFonts.arabic, fontSize: isMobileA ? 14 : 13, fontWeight: 600, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center',
                  transition: 'all 140ms',
                  boxShadow: '0 1px 2px rgba(168,79,50,0.18)',
                }}
                onMouseEnter={e => { if (lxApp) e.currentTarget.style.background = '#a84f32'; }}
                onMouseLeave={e => { if (lxApp) e.currentTarget.style.background = sanadColors.brand; }}
              >
                {lxaIcon('plus', 14)}
                محادثة جديدة
              </button>
              {isMobileA && (
                <button className="lxa-ibtn" onClick={() => setFocusMode(true)} aria-label="إغلاق قائمة المحادثات" title="إغلاق">{lxaIcon('close', 16)}</button>
              )}
            </div>

            {/* Middle section — conversations list */}
            <div style={{ flex: 1, overflowY: 'auto', padding: '12px 0' }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: sanadColors.textMuted, padding: '4px 16px 8px' }}>المحادثات السابقة</div>
              {histState === 'loading' && history.length === 0 && (
                <div role="status" style={{ fontSize: 12.5, color: sanadColors.textMuted, padding: '8px 16px', textAlign: 'center' }}>جارٍ التحميل…</div>
              )}
              {histState === 'err' && (
                <div style={{ fontSize: 12.5, color: sanadColors.textSecondary, padding: '8px 16px', textAlign: 'center', lineHeight: 1.8 }}>
                  {histErr}
                  <button onClick={() => { setHistState('loading'); refreshHistory(searchQuery); }} style={{
                    display: 'block', margin: '6px auto 0', padding: '5px 12px', borderRadius: 8, border: `1px solid ${sanadColors.border}`,
                    background: 'transparent', color: '#ffb08f', cursor: 'pointer', fontFamily: sanadFonts.arabic, fontSize: 12.5,
                  }}>أعد المحاولة</button>
                </div>
              )}
              {histState === 'ok' && history.length === 0 && (
                <div style={{ fontSize: 12.5, color: sanadColors.textMuted, padding: '8px 16px', textAlign: 'center', lineHeight: 1.8 }}>
                  {searchQuery ? 'لا نتائج لهذا البحث.' : 'لا توجد محادثات بعد — اسأل سؤالك الأول.'}
                </div>
              )}
              {history.map((h) => {
                const active = h.id === currentConvId;
                return (
                  <div key={h.id} className="lxa-conv-wrap">
                    <button className="lxa-conv sanad-conv-item" aria-current={active ? 'true' : undefined} title={h.title}
                      onClick={() => { openConversation(h.id); closeHistOnMobile(); }}>
                      {h.title}
                    </button>
                    <button
                      className="sanad-conv-delete"
                      onClick={(ev) => { ev.stopPropagation(); deleteConversation(h.id, h.title); }}
                      title="حذف المحادثة" aria-label={'حذف المحادثة: ' + h.title}
                      style={{
                        position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
                        width: 24, height: 24, borderRadius: 6, border: 'none',
                        background: 'transparent', cursor: 'pointer',
                        color: sanadColors.textMuted,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        transition: 'opacity 120ms, background 120ms, color 120ms',
                      }}
                      onMouseEnter={(ev) => { ev.currentTarget.style.background = 'rgba(255,90,90,0.12)'; ev.currentTarget.style.color = sanadColors.error; }}
                      onMouseLeave={(ev) => { ev.currentTarget.style.background = 'transparent'; ev.currentTarget.style.color = sanadColors.textMuted; }}
                    >
                      <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" viewBox="0 0 24 24" aria-hidden="true">
                        <polyline points="3 6 5 6 21 6"/>
                        <path d="M19 6l-2 14a2 2 0 01-2 2H9a2 2 0 01-2-2L5 6"/>
                        <path d="M10 11v6M14 11v6"/>
                      </svg>
                    </button>
                  </div>
                );
              })}
            </div>

            {/* Bottom section — search/footer */}
            <div className="lxa-hist-foot" style={{ padding: '10px 12px calc(10px + env(safe-area-inset-bottom, 0px))', background: sanadColors.bg, borderTop: `1px solid ${sanadColors.border}` }}>
              <div style={{ position: 'relative' }}>
                <input
                  value={searchQuery}
                  onChange={e => setSearchQuery(e.target.value)}
                  placeholder="ابحث في محادثاتي…"
                  aria-label="ابحث في محادثاتي"
                  type="search"
                  style={{
                    width: '100%', padding: isMobileA ? '9px 34px 9px 10px' : '7px 32px 7px 10px', borderRadius: 8, border: 'none',
                    background: sanadColors.bgElevated,
                    boxShadow: `0 0 0 1px ${sanadColors.border}`,
                    fontFamily: sanadFonts.arabic, fontSize: isMobileA ? 16 : 13, color: sanadColors.textPrimary,
                    outline: 'none', direction: 'rtl',
                  }}
                />
                <svg width="12" height="12" fill="none" stroke={sanadColors.textMuted} strokeWidth="2" viewBox="0 0 24 24" aria-hidden="true" style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              </div>
            </div>
          </div>
        )}

        {/* Main chat */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>

          {/* Header strip — على الموبايل: أزرارُ أيقوناتٍ 40×40 تلتفّ، وزرُّ «المحادثات السابقة» أوّلها */}
          <div className="lxa-head" style={{ padding: isMobileA ? '6px 10px' : '8px 20px', background: sanadColors.bgElevated, boxShadow: '0 0 0 1px rgba(239,231,214,0.08)', gap: isMobileA ? 6 : 14, flexShrink: 0 }}>
            {lxApp ? (
              <>
                {/* calm1: سجلّ المحادثات · الرصيدُ نصّاً صغيراً · محادثةٌ جديدة — فقط */}
                <button className="lxa-ibtn" onClick={() => setFocusMode(isMobileA ? false : !focusMode)} aria-label="المحادثات السابقة" title="المحادثات السابقة" aria-expanded={!focusMode}>{lxaIcon('history')}</button>
                <button className="lxa-pts" onClick={() => window.lexaNavigate && window.lexaNavigate('pricing')}
                  title={`${CREDITS_REMAINING} من ${CREDITS_TOTAL} نقطة — سؤالٌ للمساعد ${(lxPts && lxPts.costs && lxPts.costs.chat) || 10} نقاط`}>
                  <b>{CREDITS_REMAINING.toLocaleString('en-US')}</b> نقطة
                </button>
                <button className="lxa-ibtn" onClick={newConversation} aria-label="محادثة جديدة" title="محادثة جديدة">{lxaIcon('plus')}</button>
              </>
            ) : isMobileA ? (
              <>
                <button className="lxa-ibtn" onClick={() => setFocusMode(false)} aria-label="المحادثات السابقة" title="المحادثات السابقة" aria-expanded={drawerOpen}>{lxaIcon('history')}</button>
                <button className="lxa-ibtn" onClick={newConversation} aria-label="محادثة جديدة" title="محادثة جديدة">{lxaIcon('plus')}</button>
                <span aria-hidden="true" style={{ width: 1, height: 22, background: sanadColors.border, margin: '0 2px' }} />
                {modeButtons.map(b => {
                  const active = modeActive(b.id);
                  const lbl = b.cost ? `${b.label} (${b.cost} نقطة)` : b.label;
                  return <button key={b.id} className="lxa-ibtn" onClick={b.click} aria-label={lbl} title={lbl} aria-pressed={active}>{lxaIcon(b.icon)}</button>;
                })}
              </>
            ) : (
              <>
                {/* desk1: سطحُ المكتب مثلُ التطبيق — سجلُّ المحادثات ومحادثةٌ جديدة فقط. المستنداتُ من «+» في الصندوق،
                    والرصيدُ في الشريطِ العلويّ (لا عدّادَ ثانياً هنا) */}
                <button className="lxa-ibtn" onClick={toggleHistDesk} aria-label={focusMode ? 'إظهار المحادثات السابقة' : 'إخفاء المحادثات السابقة'}
                  title={focusMode ? 'إظهار المحادثات السابقة' : 'إخفاء المحادثات السابقة'} aria-expanded={!focusMode}>{lxaIcon('history')}</button>
                <span style={{ flex: 1 }} />
                <button className="lxa-ibtn" onClick={newConversation} aria-label="محادثة جديدة" title="محادثة جديدة">{lxaIcon('newchat')}</button>
              </>
            )}
          </div>

          {/* Messages */}
          <div ref={msgsRef} className="lxa-msgs" onScroll={onMsgsScroll} data-lx-src="answer" data-conv={currentConvId || ''} aria-live="polite" aria-busy={loading || opening}
            style={{ flex: 1, overflowY: 'auto', padding: isMobileA ? '14px 12px 18px' : '20px 28px', minWidth: 0 }}>

            {/* Doc type selector — inline in conversation */}
            {showDocTypes && !opening && (
              <div style={{ marginBottom: 20, display: 'flex', justifyContent: 'center' }}>
                <DocTypeSelector
                  onSelect={handleDocSelect}
                  onClose={() => { setShowDocTypes(false); setMode('ask'); }}
                />
              </div>
            )}

            {opening ? (
              <div role="status" style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 760, margin: '8px auto' }}>
                {[78, 55, 90].map((w, i) => (
                  <div key={i} style={{ height: i === 2 ? 64 : 20, width: w + '%', borderRadius: 10, background: 'linear-gradient(90deg,#16211d,#1d2a25,#16211d)', backgroundSize: '200% 100%', animation: 'lxaSk 1.2s ease infinite', alignSelf: i % 2 ? 'flex-start' : 'flex-end' }} />
                ))}
                <span style={{ fontSize: 13, color: sanadColors.textMuted, textAlign: 'center' }}>جارٍ فتح المحادثة…</span>
              </div>
            ) : openErr ? (
              <div style={{ maxWidth: 520, margin: '40px auto', textAlign: 'center', background: sanadColors.bgElevated, borderRadius: 14, padding: '20px 18px', boxShadow: '0 0 0 1px rgba(239,231,214,0.1)' }}>
                <div style={{ fontSize: 15, color: sanadColors.textPrimary, marginBottom: 12, lineHeight: 1.8 }}>{openErr.msg}</div>
                <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
                  <button onClick={() => openConversation(openErr.id)} style={{ padding: '9px 16px', minHeight: 40, borderRadius: 9, border: 'none', background: sanadColors.brand, color: '#fff', fontFamily: sanadFonts.arabic, fontSize: 13.5, fontWeight: 600, cursor: 'pointer' }}>أعد المحاولة</button>
                  <button onClick={newConversation} style={{ padding: '9px 16px', minHeight: 40, borderRadius: 9, border: `1px solid ${sanadColors.border}`, background: 'transparent', color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic, fontSize: 13.5, cursor: 'pointer' }}>محادثة جديدة</button>
                </div>
              </div>
            ) : messages.map((m, i) => {
              const key = m.id || ('i' + i);
              if (isEmpty && i === 0 && !m.kind && !showDocTypes) return <LxAssistCalm key="hero" desk={!lxApp} onAsk={(q) => send(q)} />;
              if (m.kind === 'doc-form') {
                return (
                  <div key={key} data-system-card style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
                    <DocFormCard
                      docType={m.docType}
                      schema={m.schema}
                      onSubmit={handleDocFormSubmit}
                      onCancel={handleDocFormCancel}
                    />
                  </div>
                );
              }
              if (m.kind === 'doc-analysis') {
                return (
                  <div key={key} data-system-card style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
                    <AnalysisOptionsCard
                      file={m.file} doc={m.doc} status={m.status} error={m.error}
                      onSubmit={handleAnalysisSubmit}
                      onCancel={handleAnalysisCancel}
                      onPickAnother={pickFile}
                    />
                  </div>
                );
              }
              const isLastAssistant = !m.role || (m.role === 'assistant' && i === messages.length - 1);
              const mk = m.role === 'assistant' ? (m.docKind || lxaDocMeta(m.text).kind) : null;
              // متابعةُ المستند: أزرارٌ بوضعِها وكلفتِها (المراجعةُ تستعملُ المستندَ المرفوعَ نفسَه على الخادم)
              const docFollow = mk === 'draft'
                ? [{ label: 'أضف بند عدم المنافسة والسرّيّة', mode: 'draft', cost: LXA_COST.draft },
                   { label: 'اجعل الصياغة أكثر حمايةً للطرف الأول', mode: 'draft', cost: LXA_COST.draft }]
                : mk === 'review'
                  ? [{ label: 'أعد صياغة العقد كاملاً بعد تصحيح المخالفات', mode: 'review', cost: LXA_COST.review },
                     { label: 'ما الذي أطلب تعديله قبل التوقيع؟', mode: 'review', cost: LXA_COST.review }]
                  : null;
              const onFU = (q) => typeof q === 'string' ? send(q) : send(q.label, q.mode);
              const enrichedMsg = m.role === 'assistant' && isLastAssistant && messages.length > 1 && !m.followUps && !m.error && !m.stopped
                ? (docFollow
                    ? { ...m, followUps: docFollow, onFollowUp: onFU }
                    : { ...m, followUps: ['اشرح ذلك بتفصيلٍ أكثر', 'ما الإجراءات العملية؟', 'هل توجد استثناءات؟'], onFollowUp: onFU,
                        onCases: () => send('كيف طبّقت المحاكم ما سبق؟', 'cases') })
                : m.followUps ? { ...m, onFollowUp: onFU } : m;
              const prevQ = m.role === 'assistant' && i > 0 && messages[i - 1].role === 'user' ? lxaSplitUser(messages[i - 1].text).text : '';
              return (
                <AssistantBubble
                  key={key} msg={enrichedMsg} q={prevQ} isMobile={isMobileA}
                  onSave={(text, done) => handleSaveRequest(text, prevQ, done)}
                  onCopy={(text) => navigator.clipboard?.writeText(String(text || '').replace(/\s*⟦[^⟧]*⟧/g, '')).catch(() => {})}
                />
              );
            })}
            <div ref={bottomRef} />
          </div>

          {/* Input — unified composer with embedded actions */}
          <div ref={composerRef} className="lxa-composer" style={{ background: sanadColors.bgElevated, boxShadow: '0 0 0 1px rgba(239,231,214,0.08)', flexShrink: 0, ...(fabPad ? { paddingLeft: fabPad } : {}) }}>
            {composerMode !== 'ask' && (
              <div className="lxa-cmode" role="status">
                <span className="lxa-cmode-i" aria-hidden="true">{composerMode === 'draft' ? '✍️' : '📎'}</span>
                <span className="lxa-cmode-t">
                  {composerMode === 'draft'
                    ? <>وضع <b>إنشاء مستند</b></>
                    : <>أسئلتك عن <b title={docCtx && docCtx.name}>«<bdi>{docCtx && docCtx.name}</bdi>»</b></>}
                  <em>{LXA_COST[composerMode]} نقطة</em>
                </span>
                <button onClick={() => { setMode('ask'); setShowDocTypes(false); }} aria-label="العودة إلى الأسئلة العامة" title="العودة إلى الأسئلة العامة">
                  {lxaIcon('close', 13)}
                </button>
              </div>
            )}
            <div style={(lxApp || !isMobileA) ? {
              background: '#16211d', borderRadius: 24,
              boxShadow: '0 0 0 1px rgba(239,231,214,0.07)',
              padding: '4px 4px 4px 4px',
              display: 'flex', alignItems: 'flex-end', gap: 4,
            } : {
              background: sanadColors.bg,
              borderRadius: 12,
              boxShadow: '0 0 0 1px rgba(239,231,214,0.14)',
              transition: 'box-shadow 150ms',
              padding: isMobileA ? '6px 6px 6px 6px' : '6px 10px 4px',
              display: 'flex', alignItems: 'flex-end', gap: 6,
            }}>
              {/* calm1/desk1: زرُّ «+» واحدٌ يفتحُ ورقةَ المستندات (مراجعة · إنشاء) — في التطبيق وعلى سطح المكتب */}
              {(lxApp || !isMobileA) && (
                <button className="lxa-plus" onClick={() => setDocSheet(true)} aria-label="المستندات: مراجعة أو إنشاء" title="المستندات" aria-haspopup="dialog" aria-expanded={docSheet || showDocTypes}>
                  {lxaIcon('plus', 20)}
                </button>
              )}
              <textarea
                ref={taRef}
                className="lxa-ta"
                value={input}
                onChange={e => setInput(e.target.value)}
                onKeyDown={e => {
                  if (e.key === 'Enter' && !e.shiftKey && !(e.nativeEvent && e.nativeEvent.isComposing)) { e.preventDefault(); if (canSend) sendComposer(); }
                }}
                placeholder={loading ? 'ليكسا تكتب الإجابة…'
                  : composerMode === 'draft' ? (isMobileA ? 'صف المستند أو التعديل…' : 'مثال: عقد عمل محدد المدة سنة لمحاسب براتب 8000 ريال…')
                  : composerMode === 'review' ? (isMobileA ? 'اسأل عن المستند المرفوع…' : 'اسأل عن المستند المرفوع… مثال: هل الشرط الجزائي نظامي؟')
                  : 'اكتب سؤالك القانوني…'}
                aria-label={composerMode === 'draft' ? 'صف المستند المطلوب' : composerMode === 'review' ? 'اسأل عن المستند المرفوع' : 'اكتب سؤالك القانوني'}
                enterKeyHint="send"
                dir="rtl"
                rows={1}
                style={{
                  flex: 1, minWidth: 0, padding: isMobileA ? '7px 6px' : '6px 4px', borderRadius: 0, border: 'none',
                  background: 'transparent',
                  fontFamily: sanadFonts.arabic, fontSize: isMobileA ? 16 : 15, color: sanadColors.textPrimary,
                  outline: 'none', direction: 'rtl', resize: 'none', lineHeight: 1.6,
                  minHeight: isMobileA ? 40 : 36,
                }}
              />

              {loading ? (
                <button className="lxa-stop" onClick={() => stopStream(true)} aria-label="إيقاف الإجابة" title="إيقاف الإجابة — نقاط السؤال لا تُردّ بعد أن يبدأ المساعد العمل"
                  style={{ height: (isMobileA || !lxApp) ? 40 : 36, padding: '0 14px', fontFamily: sanadFonts.arabic, fontSize: 13.5 }}>
                  <i aria-hidden="true" />إيقاف
                </button>
              ) : (
                <button
                  className="lxa-send"
                  onClick={sendComposer}
                  disabled={!canSend}
                  aria-label="إرسال"
                  title="إرسال"
                  style={{
                    width: (isMobileA || !lxApp) ? 40 : 36, height: (isMobileA || !lxApp) ? 40 : 36,
                    background: canSend ? sanadColors.brand : sanadColors.bgSubtle,
                    color: canSend ? '#fff' : sanadColors.textMuted,
                    cursor: canSend ? 'pointer' : 'not-allowed',
                  }}
                >
                  {lxaIcon('send', 15)}
                </button>
              )}
            </div>
            {/* calm1: في وضع التطبيق تنتقلُ الملاحظةُ إلى الافتتاحيّة */}
            {!lxApp && (
            <p style={{ fontSize: 11, color: sanadColors.textMuted, margin: isMobileA ? '5px 0 0' : '6px 0 0', textAlign: 'center', lineHeight: 1.5 }}>
              ليكسا تقدم معلومات قانونية عامة وليست استشارة قانونية رسمية
            </p>
            )}
          </div>
        </div>
      </div>

      {(lxApp || !isMobileA) && (
        <LxaDocSheet open={docSheet} onClose={() => setDocSheet(false)}
          onUpload={LXA_UPLOAD_ENABLED ? pickFile : null} onCreate={openCreate} />
      )}

      {/* Hidden file input */}
      <input ref={fileInputRef} type="file" accept=".pdf,.docx,.txt,.doc,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain,image/*" style={{ display: 'none' }}
        onChange={e => {
          const f = e.target.files?.[0];
          if (f) handleFileSelected(f);
          e.target.value = '';
        }}
      />

      {/* Save to Files Modal */}
      {showSaveModal && (
        <SaveToFilesModal
          onClose={() => { setShowSaveModal(false); saveDoneRef.current = null; }}
          onSave={async (folder, note) => {
            try {
              await window.api.files.create({
                source_type: 'assistant', kind: 'answer',
                title: (saveQ || (saveText || '').split('\n')[0]).replace(/\s+/g, ' ').slice(0, 200) || 'إجابة ليكسا',
                content: saveText,
                note: note || null,
                folder_id: folder?.id || null,
                source_ref: currentConvId ? `conv:${currentConvId}` : null,
                meta: JSON.stringify({ conv_id: currentConvId || null, question: saveQ || null }),
              });
              setShowSaveModal(false);
              if (saveDoneRef.current) { saveDoneRef.current(); saveDoneRef.current = null; }
              window.LexaNote && window.LexaNote.toast('حُفظت الإجابة في دفترك', true);
            } catch (e) {
              alert((e && e.message) || 'تعذّر الحفظ. حاول مرّةً أخرى.');
            }
          }}
        />
      )}

      <style>{`@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes lxaSk{0%{background-position:200% 0}100%{background-position:-200% 0}}`}</style>
    </>
  );
}

Object.assign(window, { AssistantView });