/* ═══════════════════════════════════════════════════════════════════════
   updater — التحديث داخل التطبيق (js/updater.js): ورقة «تحديث جديد» بحالاتها
   (متاح، تنزيل، تحقّق، إذن، المثبّت، عطل)، ونقطة تبويب الإعدادات، وصفّا
   الإعدادات (screens/settings.js). المرجع: docs/DESIGN.md.
   ورقة خاصة لا #sheet: الإلزامي يجب ألّا يُغلق، وui/sheet.js يغلق كل ورقة باللمس
   خارجها. الشكل شكل #sheet نفسه (الخلفية و.grabber من ui.css كما هما).
   فوق أشرطة النظام (70) وتحت عارض الصور (75) والإشعار العائم (80) وشاشة القفل
   والمكالمة — والورقة لا تظهر وحدها فوق أيٍّ منها أصلاً.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الورقة ─────────────────────────────────────────────────────────── */
.upd-root { position: fixed; inset: 0; z-index: 72; }
/* .sheet-backdrop يحمل z-index 60 من ui.css: داخل .upd-root يُعاد ترتيب الطبقتين. */
.upd-scrim { z-index: 0; transition: opacity var(--dur-2) var(--ease); }
.upd-sheet {
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0; max-width: 560px; margin-inline: auto;
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  /* الحاشية السفلية في .upd-actions الملتصقة، لا هنا: كي تلتصق بحافة الورقة نفسها */
  padding: 4px 20px 0;
  background: var(--bg-elev); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-3);
  animation: sheet-in var(--dur-3) var(--ease); transition: transform var(--dur-2) var(--ease);
  outline: none;
}
.upd-root.upd-locked .upd-grab { visibility: hidden; }
.upd-root.upd-closing { pointer-events: none; }
.upd-root.upd-closing .upd-scrim { opacity: 0; }
.upd-root.upd-closing .upd-sheet { transform: translateY(100%); transition: transform var(--dur-2) var(--ease-in); }
/* الإلزامي لا يُغلق: لمسة خارجه تهزّه قليلاً بدل الإغلاق */
.upd-sheet.upd-nudge { animation: upd-nudge 320ms var(--ease); }

/* الرأس: الشعار وشارة الحالة، والعنوان، والإصدار والحجم */
.upd-head { display: grid; justify-items: center; text-align: center; padding: 6px 4px 2px; }
.upd-logo { position: relative; width: 76px; height: 76px; margin-bottom: 20px; animation: pop-in var(--dur-3) var(--ease-spring) backwards; }
.upd-logo img { width: 100%; height: 100%; }
/* الشارة في الركن الوحيد الفارغ من شعار أويس: أسفل اليمين **فعلياً** (الشعار لا ينعكس مع RTL، فلا
   inset-inline). أسفل اليسار ذيل الفقاعة — ما يجعله شعار محادثة — وأعلى اليمين مقبض الجنبية. بإزاحة
   12px تبعد حافتها ~2px عن أقرب بكسل من الشارة (طرف الهلال الذهبي)، فلا تغطّي منه شيئاً؛ وهامش الشعار
   20px كي لا تلامس العنوان تحتها. */
.upd-badge {
  position: absolute; right: -12px; bottom: -12px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-fg);
  border: 3px solid var(--bg-elev);
}
.upd-badge .icon-svg { width: 16px; height: 16px; }
.upd-badge.ok { background: var(--success); color: #fff; }
.upd-badge.warn { background: var(--warning); color: #fff; }
.upd-badge.bad { background: var(--danger); color: #fff; }
.upd-sheet[data-phase="downloading"] .upd-badge .icon-svg { animation: upd-drop 1.3s var(--ease) infinite; }
.upd-title { font-size: var(--fz-xl); font-weight: 800; line-height: 1.3; }
.upd-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 2px; font-size: var(--fz-md); color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.upd-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); flex: none; }
.upd-must { margin-top: 10px; }
/* «يتحقّق من أحدث إصدار…» أثناء فحص حيّ: ينفتح بعد 350ms فقط — الفحص السريع لا يحرّك الورقة ولا يومض —
   ويُطوى فوراً حين يجيب. ارتفاع لا display كي يبقى الانتقال ناعماً. */
.upd-fresh {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden;
  font-size: var(--fz-sm); font-weight: 600; color: var(--fg-3);
  transition: max-height var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease), margin-top var(--dur-1) var(--ease);
}
.upd-fresh.on { max-height: 24px; opacity: 1; margin-top: 6px; transition-delay: 350ms; }
.upd-fresh .upd-spin { width: 13px; height: 13px; border-width: 2px; }

/* الجسم: يتبدّل بتلاشٍ قصير مع كل حالة */
.upd-body { display: grid; gap: 12px; margin-top: 18px; }
.upd-body:empty { display: none; }
.upd-body.upd-swap > * { animation: upd-swap var(--dur-2) var(--ease) backwards; }
.upd-lead { font-size: var(--fz-md); color: var(--fg-2); text-align: center; line-height: 1.6; }
.upd-hint { font-size: var(--fz-sm); color: var(--fg-3); text-align: center; line-height: 1.6; }

/* ما الجديد */
.upd-notes { padding: 12px 16px 14px; border-radius: var(--r-md); background: var(--bg-2); }
.upd-notes-t { font-size: var(--fz-sm); font-weight: 800; color: var(--fg-3); margin-bottom: 6px; }
.upd-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.upd-notes li { position: relative; padding-inline-start: 16px; font-size: var(--fz-md); line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; }
.upd-notes li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ما الجديد منذ نسختك: إصدار تحت إصدار، الأحدث أولاً بلون التطبيق، وما بعد الثالث مطويّ */
.upd-since { display: grid; gap: 12px; }
.upd-since .upd-notes-t { margin-bottom: 0; }
.upd-grp { display: grid; gap: 6px; }
.upd-grp[hidden] { display: none; }
.upd-grp + .upd-grp { padding-top: 12px; border-top: 1px solid var(--sep); }
.upd-grp-v { font-size: var(--fz-sm); font-weight: 800; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.upd-grp:first-of-type .upd-grp-v { color: var(--accent); }
.upd-grp li::before { background: color-mix(in srgb, var(--accent) 55%, var(--bg-2)); }
.upd-grp:first-of-type li::before { background: var(--accent); }
.upd-all {
  justify-self: start; min-height: 36px; margin: -4px 0 -6px; padding: 0 12px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--accent); font: inherit; font-size: var(--fz-sm); font-weight: 800; cursor: pointer;
  margin-inline-start: -12px;
}
.upd-all:active { background: var(--accent-soft); }

/* سطر حالة بأيقونة: جاهز / تحذير / عطل */
.upd-msg {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md);
  font-size: var(--fz-md); font-weight: 600; line-height: 1.55;
}
.upd-msg .icon-svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.upd-msg.ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.upd-msg.warn { background: color-mix(in srgb, var(--warning) 14%, transparent); color: color-mix(in srgb, var(--warning) 78%, var(--fg)); }
.upd-msg.bad { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }

/* التقدّم: الشريط يتمدّد بـtransform وحده، من جهة البداية */
.upd-progress { display: grid; gap: 8px; padding: 2px 2px 0; }
.upd-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upd-prog-label { font-size: var(--fz-md); font-weight: 700; }
.upd-pct { font-size: var(--fz-lg); font-weight: 800; color: var(--accent); }
.upd-bar { position: relative; height: 8px; border-radius: var(--r-full); background: var(--bg-3); overflow: hidden; }
.upd-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform 180ms linear;
}
[dir="rtl"] .upd-fill { transform-origin: right center; }
.upd-bar.indet .upd-fill { transform: scaleX(.32); transition: none; animation: upd-indet 1.15s var(--ease) infinite; }
[dir="rtl"] .upd-bar.indet .upd-fill { animation-name: upd-indet-rtl; }
.upd-bar.pulse .upd-fill { animation: upd-pulse 1.1s ease-in-out infinite alternate; }
.upd-bytes { font-size: var(--fz-sm); color: var(--fg-3); }

/* فتح المثبّت / انتظار المكالمة */
.upd-state {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  font-size: var(--fz-md); font-weight: 700; color: var(--fg-2);
}
.upd-state .icon-svg { width: 20px; height: 20px; color: var(--accent); }
.upd-spin {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--accent); border-top-color: transparent; animation: spin .8s linear infinite;
}

/* الإذن والمثبّت: أيقونة في دائرة وسطر واحد واضح */
.upd-hero { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 2px 6px; }
.upd-hero-ic {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--accent-soft); color: var(--accent);
}
.upd-hero-ic .icon-svg { width: 26px; height: 26px; }
.upd-hero-ic.ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.upd-hero-t { font-size: var(--fz-base); font-weight: 700; line-height: 1.55; max-width: 34ch; }

/* الأزرار ملتصقة بأسفل الورقة: «ما الجديد» الطويل يمرّ تحتها ويتلاشى عندها، والزرّ
   الرئيسي (والوحيد في الإلزامي) على الشاشة دائماً ولو على 360×640. */
.upd-actions {
  position: sticky; bottom: 0; z-index: 1;
  display: grid; gap: 8px; margin-top: 8px;
  padding: 12px 0 calc(18px + var(--safe-b));
  background: var(--bg-elev);
}
.upd-actions::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 24px; pointer-events: none;
  background: linear-gradient(to top, var(--bg-elev), transparent);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.upd-sheet.upd-more .upd-actions::before { opacity: 1; }
/* بلا أزرار (جارٍ فتح المثبّت): تبقى الحاشية السفلية وحدها */
.upd-actions:empty { display: block; position: static; margin: 0; padding: 0; height: calc(18px + var(--safe-b)); }
.upd-actions:empty::before { content: none; }

/* ── نقطة تبويب الإعدادات (#settings-badge في ui/shell.js) ───────────── */
.tab .badge.upd-dot {
  min-width: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%;
  top: 5px; inset-inline-start: calc(50% + 6px); font-size: 0;
}

/* ── صفّ «تحديث متاح» في أعلى جذر الإعدادات ─────────────────────────── */
.upd-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); margin: 12px 16px 0; padding: 12px 14px; overflow: hidden;
  border: 0; border-radius: var(--r-lg); color: inherit; text-align: start; font: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-elev));
  transition: background-color var(--dur-1), transform var(--dur-1) var(--ease);
  animation: upd-swap var(--dur-3) var(--ease) backwards;
}
.upd-row:active { transform: scale(.985); background: color-mix(in srgb, var(--accent) 17%, var(--bg-elev)); }
.upd-row-ic {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
}
.upd-row-ic .icon-svg { width: 20px; height: 20px; }
.upd-row.bad .upd-row-ic { background: var(--danger); color: #fff; }
.upd-row-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.upd-row-t { font-size: var(--fz-base); font-weight: 800; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upd-row-s { font-size: var(--fz-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upd-row .chev { flex: none; }
.upd-row-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.upd-row-bar i {
  position: absolute; inset: 0; background: var(--accent); transform: scaleX(0);
  transform-origin: left center; transition: transform 180ms linear;
}
[dir="rtl"] .upd-row-bar i { transform-origin: right center; }

/* صفّ «التحقق من التحديثات» في «عن أويس»: سطر النتيجة ومؤشّر الانتظار */
.set-screen .item-sub.upd-ok { color: var(--success); }
.set-screen .item-sub.upd-bad { color: var(--danger); white-space: normal; }
.item-trail .upd-spin { width: 18px; height: 18px; }
.item-title.upd-accent { color: var(--accent); }

/* ── الحركة ─────────────────────────────────────────────────────────── */
@keyframes upd-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes upd-nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-10px); } 60% { transform: translateY(3px); } }
@keyframes upd-drop { 0%, 100% { transform: none; } 50% { transform: translateY(2px); } }
@keyframes upd-indet { from { transform: translateX(-100%) scaleX(.32); } to { transform: translateX(100%) scaleX(.32); } }
@keyframes upd-indet-rtl { from { transform: translateX(100%) scaleX(.32); } to { transform: translateX(-100%) scaleX(.32); } }
@keyframes upd-pulse { from { opacity: 1; } to { opacity: .45; } }
/* تقليل الحركة: ui.css يقصّر كل حركة إلى 1ms — الحلقات اللانهائية تتوقّف كلياً
   بدل أن ترتعش، والشريط غير المحدّد يبقى ثلثاً ثابتاً. */
body.reduce-motion .upd-bar.indet .upd-fill,
body.reduce-motion .upd-bar.pulse .upd-fill,
body.reduce-motion .upd-badge .icon-svg,
body.reduce-motion .upd-spin { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .upd-bar.indet .upd-fill, .upd-bar.pulse .upd-fill, .upd-badge .icon-svg, .upd-spin { animation: none !important; }
}