/* ═══════════════════════════════════════════════════════════════════════════
   hymanna-ui.css — طبقة المكوّنات وعناصر الهوية التوقيعية (2027)
   ═══════════════════════════════════════════════════════════════════════════
   يُحمَّل **بعد** app.css وcompact-system.css وauth-scene.css، وقبله مباشرةً
   `hy-compat.css` الذي يُكمِل 19 توكنًا لا تعرّفها تلك الملفات.
   (كان يُحمَّل سابقًا بعد tokens.css — وقد أُحيل tokens.css إلى
   `_retired-ui-layer-2026-10-01/` بعد دمج نظام التوكنات المعتمد،
   لأن مصدر التوكنات صار compact-system.css. لا مرجع حيّ له.)

   إستراتيجية آمنة وقابلة للتراجع:
     • نُضيف المكوّنات الجديدة ببادئة `hy2-` — لا يمكن أن تتصادم مع أي اسم قائم
       (القديم يستعمل `hy-` بلا رقم).
     • ونُحسّن المكوّنات القديمة (.card · .btn · .chip · .item · .empty)
       بالتوكنات الجديدة فقط: حواف · ارتفاعات · مقاسات خط. لا تغيير في
       البنية ولا في أسماء الأصناف، فلا تنكسر أي شاشة قائمة.
     • لا `backdrop-filter` (أغلى عملية رسم على أندرويد البطيء) — التزامًا
       بقرار الأداء المكتوب في رأس app.css.
     • الحركة على transform/opacity فقط.

   أهداف الجودة المُثبَتة:
     • هدف لمس ≥ 48px لكل عنصر تفاعلي.
     • متن 16px · ارتفاع سطر 1.7 (كان 15px/1.6 = مزدحم وصغير للعربية).
     • لا لون بنفسجي في أي درجة.
     • تباين AA: النصوص الأساسية على أسطحها تتجاوز 4.5:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════ الأسس ═════════════════════════ */

body {
  font-family: var(--hy-font-body);
  font-size: var(--hy-t-body);
  line-height: var(--hy-lh-body);
  font-weight: var(--hy-w-body);
  /* العربية تحتاج مزيدًا من الفتح بين الحروف في المقاسات الصغيرة */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* سلّم العناوين — Readex Pro للعرض وحده (شخصية قوية بجرعة مقدّرة) */
h1, h2, h3, h4,
.hy2-display, .hy2-h1, .hy2-h2, .hy2-h3 {
  font-family: var(--hy-font-display);
  font-weight: var(--hy-w-display);
  letter-spacing: -.015em;
  margin: 0;
}
.hy2-display { font-size: var(--hy-t-display); line-height: var(--hy-lh-tight); }
.hy2-h1      { font-size: var(--hy-t-h1);      line-height: var(--hy-lh-heading); }
.hy2-h2      { font-size: var(--hy-t-h2);      line-height: var(--hy-lh-heading); }
.hy2-h3      { font-size: var(--hy-t-h3);      line-height: var(--hy-lh-heading); font-weight: var(--hy-w-strong); }
.hy2-body-l  { font-size: var(--hy-t-body-l);  line-height: var(--hy-lh-body); }
.hy2-label   { font-size: var(--hy-t-label);   font-weight: var(--hy-w-strong); line-height: 1.5; }
.hy2-caption { font-size: var(--hy-t-caption); color: var(--hy-dim); line-height: 1.55; }
.hy2-micro   { font-size: var(--hy-t-micro);   color: var(--hy-dim-2); line-height: 1.45; }
.hy2-num     { font-variant-numeric: var(--hy-num); }

/* الأرقام في سياق RTL: المبالغ والمفاتيح تُعرض LTR داخل سطر عربي بلا كسر */
.hy2-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* الاقتصاد اللغوي: أي وصف يزيد عن سطرين يُقصّ بصريًّا مع «عرض المزيد» */
.hy2-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hy2-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* التركيز مرئي دائمًا للوحة المفاتيح (وصول) */
:focus-visible {
  outline: 2px solid var(--hy-electric);
  outline-offset: 2px;
  border-radius: var(--hy-r-xs);
}

/* عمود واحد بحد أقصى للعرض — على الأجهزة العريضة لا يتمدّد المحتوى بلا نهاية */
.app-main { max-width: var(--hy-maxw); margin-inline: auto; width: 100%; }

/* ═════════════════════════ الشريط العلوي ═════════════════════════ */
.appbar.hy-simple {
  height: calc(var(--hy-header) + env(safe-area-inset-top, 0px));
  background:var(--k-surface-2);
}
html[data-theme="light"] .appbar.hy-simple {
  background:var(--k-surface-2);
}
.hy-brand .mark {
  width: 36px; height: 36px; border-radius: var(--hy-r-s);
  background: var(--hy-grad); color: var(--k-text);
  font-family: var(--hy-font-display); font-weight: var(--hy-w-display);
  box-shadow: var(--hy-e2), inset 0 1px 0 0 6px 18px var(--k-shadow);
}
.hy-brand .txt b { font-family: var(--hy-font-display); font-size: var(--hy-t-h3); font-weight: var(--hy-w-display); }
.hy-brand .txt small { font-size: var(--hy-t-caption); color: var(--hy-dim); }
.hy-conn {
  min-height: 32px; font-size: var(--hy-t-caption);
  background: var(--hy-ok-soft); color: var(--hy-ok);
  border: 1px solid color-mix(in srgb, var(--hy-ok) 32%, transparent);
}
.hy-conn i { width: 8px; height: 8px; }

/* ═════════════════════ شريط التنقل السفلي ═════════════════════
   خمسة أقسام. مؤشّر منزلق واحد يتحرك بـtransform (لا إعادة رسم)،
   ووسم إشعار بنبضة واحدة فقط عند الدخول.                        */
.tabbar {
  height: calc(var(--hy-tabbar) + env(safe-area-inset-bottom, 0px));
  background:var(--k-surface);
  border-top: 1px solid var(--hy-line);
  max-width: var(--hy-maxw); margin-inline: auto;
  transition: transform var(--hy-d) var(--hy-e-exit);
}
html[data-theme="light"] .tabbar {
  background:var(--k-surface-2);
  box-shadow: 0 -1px 0 var(--hy-line), 0 -8px 24px 0 1px 3px var(--k-shadow);
}
/* المُؤشّر المنزلق — يوحّد «التبويب النشط» في عنصر واحد متحرك.
   عطل مُصلَح: كان بلا `left`، فيُعامل كعنصر شبكي ويأخذ موضعًا ثابتًا من
   الشبكة — قياس فعلي: `x=717px` داخل نافذة عرضها 390px، أي **خارج الشاشة**.
   الآن نثبّته على الحافة اليسرى الفيزيائية ثم نحرّكه بـtranslateX بمقدار
   `offsetLeft` (وهو يُقاس دائمًا من اليسار الفيزيائي في RTL وLTR)، فيصير
   الحساب واحدًا في الاتجاهين بلا حالات خاصة. */
.tabbar .hy2-ind {
  position: absolute; top: 0; left: 0; height: 3px; width: 28px; border-radius: 0 0 3px 3px;
  background: var(--hy-grad); box-shadow: 0 0 12px color-mix(in srgb, var(--hy-royal) 60%, transparent);
  transform: translateX(var(--hy2-ind-x, 0));
  transition: transform var(--hy-d) var(--hy-e-spring);
  will-change: transform; pointer-events: none;
}
.tabbar a {
  min-height: 48px; gap: 4px;
  font-size: var(--hy-t-caption); font-weight: var(--hy-w-strong);
  color: var(--hy-dim-2);
  transition: color var(--hy-d-fast) var(--hy-e-standard);
}
/* مقاس أيقونة التبويب من التوكن (--ic-nav) لا رقم صلب — كان 23px هنا
   بعد 21px في app.css و19px في compact-system: ثلاثة أرقام لدور واحد. */
/*
 * حركة أيقونة التبويب فقط — **بلا مقاس**.
 * كان هنا تكرار للمقاس نفسه (`width/height: var(--ic-nav)`) مع النسخة الأصلية
 * في سلّم الأيقونات أسفل الملف، فصار للشيء الواحد مصدران. المقاس يُعلَن في
 * السلّم وحده (قسم NAV)، وهذا السطر للانتقال وحده.
 */
.tabbar a svg { transition: transform var(--hy-d-fast) var(--hy-e-spring); }
.tabbar a.on { color: var(--hy-blue-2); }
.tabbar a.on svg { transform: translateY(-1px) scale(1.04); }
/* نُلغي الشرطة القديمة: لدينا مؤشّر منزلق واحد بدل خمس شرطات ثابتة */
.tabbar a.on::before { display: none; }
.tabbar a:active svg { transform: scale(.92); }
.tabbar .badge {
  position: absolute; top: 8px; inset-inline-end: 50%; margin-inline-end: -22px;
  background: var(--hy-danger); color: var(--k-text); font-size: var(--hy-t-micro);
  min-width: 17px; padding: 0 5px; line-height: 17px;
}
.tabbar .badge.hy2-new { animation: hy2-badge-in var(--hy-d-slow) var(--hy-e-spring) 1; }
@keyframes hy2-badge-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* أثناء الكتابة في المحرّر: يتقلّص الشريط بلطف ليُفسح للكيبورد */
body.hy2-typing .tabbar { transform: translateY(100%); }

/* ═════════════════════ المكوّنات المُحسَّنة (القديمة) ═════════════════════ */

.card {
  border-radius: var(--hy-r-m);
  border: 1px solid var(--hy-line);
  background:var(--k-surface);
  box-shadow: var(--hy-e1), var(--hy-hair);
  padding: var(--hy-s4);
  margin-bottom: var(--hy-s3);
}
html[data-theme="light"] .card { background: var(--hy-ink); box-shadow: var(--hy-e1), var(--hy-hair); }
.card h3 { font-family: var(--hy-font-display); font-size: var(--hy-t-h3); font-weight: var(--hy-w-strong); }
.card .hint { font-size: var(--hy-t-caption); color: var(--hy-dim); }

.item {
  border-radius: var(--hy-r-m);
  border: 1px solid var(--hy-line);
  background:var(--k-surface);
  box-shadow: var(--hy-e1);
  padding: var(--hy-s4);
}
html[data-theme="light"] .item { background: var(--hy-ink); box-shadow: var(--hy-e1); }
/* إلغاء الشرطة الجانبية: التسلسل يأتي من المسافة والظل لا من خط زخرفي */
.item::before { display: none; }
.item-title { font-size: var(--hy-t-body); font-weight: var(--hy-w-strong); }
.item-sub { font-size: var(--hy-t-caption); color: var(--hy-dim); }

.btn {
  min-height: 44px; border-radius: var(--hy-r-s);
  font-size: var(--hy-t-label); font-weight: var(--hy-w-strong);
  border: 1px solid var(--hy-line-2);
  background: var(--hy-ink-2); color: var(--hy-text);
  transition: transform var(--hy-d-instant) var(--hy-e-standard),
              box-shadow var(--hy-d-fast), background var(--hy-d-fast);
}
html[data-theme="light"] .btn { background: var(--k-line); }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--hy-grad); border-color: transparent; color: var(--k-text);
  box-shadow: var(--hy-e2), inset 0 1px 0 0 1px 3px var(--k-shadow);
}
.btn-lg { min-height: 52px; font-size: var(--hy-t-body); border-radius: var(--hy-r-m); }
/*
 * هدف اللمس: الزر المضغوط كان 38px — أقل من الحدّ الآمن للإصبع.
 * نرفعه إلى 44px (الأدنى المقبول للعناصر الثانوية الكثيفة)، بينما التنقل
 * والأزرار الأساسية 48px+ أصلًا.
 */
.btn-sm { min-height: 44px; font-size: var(--hy-t-label); padding: 9px 13px; }
/* نفس المعالجة لأزرار الشات القائمة (.attachbtn) واقتراحات الشات (.hy-smart-b) */
.attachbtn { min-width: 44px; min-height: 44px; }
.hy-smart-b { min-height: 44px; }
.btn-danger { background: var(--k-error); border-color: transparent; color: var(--k-on-accent); }
.btn-ok { background: var(--k-positive); border-color: transparent; color: var(--k-on-accent); }
.btn[disabled] { opacity: .45; }

.input, textarea, select {
  min-height: 48px; border-radius: var(--hy-r-s);
  font-size: var(--hy-t-body); padding: 12px 14px;
  background: var(--hy-black); border: 1px solid var(--hy-line-2); color: var(--hy-text);
}
html[data-theme="light"] .input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: var(--k-line); }
.input:focus, textarea:focus, select:focus { border-color: var(--hy-electric); box-shadow: var(--hy-ring); }
textarea { line-height: var(--hy-lh-body); }
.field label { font-size: var(--hy-t-label); font-weight: var(--hy-w-strong); color: var(--hy-dim); }
.field .note { font-size: var(--hy-t-caption); color: var(--hy-dim-2); }

.chip {
  min-height: 28px; padding: 4px 11px; border-radius: var(--hy-r-pill);
  font-size: var(--hy-t-caption); font-weight: var(--hy-w-strong);
  background: var(--hy-soft, var(--k-line));
  border: 1px solid var(--hy-line); color: var(--hy-dim);
}
.chip.brand { color: var(--hy-blue-2); border-color: var(--hy-blue-line); background: var(--hy-blue-soft); }
.chip.ok     { color: var(--hy-ok);     border-color: color-mix(in srgb, var(--hy-ok) 32%, transparent);     background: var(--hy-ok-soft); }
.chip.warn   { color: var(--hy-warn);   border-color: color-mix(in srgb, var(--hy-warn) 32%, transparent);   background: var(--hy-warn-soft); }
.chip.danger { color: var(--hy-danger); border-color: color-mix(in srgb, var(--hy-danger) 32%, transparent); background: var(--hy-danger-soft); }
.badge { font-size: var(--hy-t-micro); font-weight: var(--hy-w-display); }

.section-title { margin: var(--hy-s6) 2px var(--hy-s3); }
.section-title h2 {
  font-family: var(--hy-font-display);
  font-size: var(--hy-t-h3); font-weight: var(--hy-w-display);
  padding-inline-start: 0;
}
.section-title h2::before { display: none; }
.section-title .line { height: 1px; background: var(--hy-line); flex: 1; }
.section-title .count { font-size: var(--hy-t-caption); color: var(--hy-dim); font-variant-numeric: var(--hy-num); }

.empty { padding: var(--hy-s8) var(--hy-s5); color: var(--hy-dim); }
.empty .icon { width: 68px; height: 68px; border-radius: var(--hy-r-m); border: 1px solid var(--hy-line); background:var(--k-surface); }
.empty h3 { font-family: var(--hy-font-display); font-size: var(--hy-t-h3); font-weight: var(--hy-w-display); color: var(--hy-text); }
.empty p { font-size: var(--hy-t-label); color: var(--hy-dim); }

/* ═════════════════ عناصر الهوية التوقيعية الخمسة ═════════════════ */

/* ── (أ) قوس الهيمنة — Dominion Arc ────────────────────────────────
   الشكل التوقيعي المشتق من الشعار: قوس رفيع يُقاس بنسبة الإنجاز.
   يُستعمل في أربعة مواضع فقط بانضباط:
     1) مؤشّر تقدّم المهمة  2) حلقة حول صورة الموظف
     3) إطار لحظة النجاح    4) علامة مائية في البطل
   السمة `--hy2-arc-p` (0→1) تقود الرسم كله.                        */
.hy2-arc {
  position: relative; display: inline-grid; place-items: center;
  width: var(--hy2-arc-size, 56px); height: var(--hy2-arc-size, 56px);
  flex: 0 0 auto;
}
.hy2-arc > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hy2-arc .hy2-arc-track { fill: none; stroke: var(--hy-line-2); stroke-width: var(--hy2-arc-w, 3); }
.hy2-arc .hy2-arc-bar {
  fill: none; stroke: var(--hy2-arc-color, var(--hy-electric)); stroke-width: var(--hy2-arc-w, 3);
  stroke-linecap: round;
  stroke-dasharray: var(--hy2-arc-len, 151);
  stroke-dashoffset: calc(var(--hy2-arc-len, 151) * (1 - var(--hy2-arc-p, 0)));
  transition: stroke-dashoffset var(--hy-d-slow) var(--hy-e-standard);
}
.hy2-arc .hy2-arc-label {
  font-family: var(--hy-font-display); font-weight: var(--hy-w-display);
  font-size: var(--hy-t-label); font-variant-numeric: var(--hy-num);
}
.hy2-arc.is-live .hy2-arc-bar { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hy-electric) 65%, transparent)); }
/* العلامة المائية في البطل: نفس القوس بحجم كبير وشفافية عالية */
.hy2-arc.hy2-arc-mark {
  --hy2-arc-w: 1.5;
  position: absolute; inset-block-start: -34%; inset-inline-start: -20%;
  width: 260px; height: 260px; opacity: .13; pointer-events: none;
}
.hy2-arc.hy2-arc-mark .hy2-arc-track { stroke: var(--k-text); }
.hy2-arc.hy2-arc-mark .hy2-arc-bar { stroke: var(--k-text); }

/* ── (ب) نبض الفريق — Team Pulse ──────────────────────────────────
   يُشرح حالة الموظف بصريًّا بلا نص. خمس حالات بأربع حركات مختلفة،
   وكلها تتوقف في وضع تقليل الحركة (تتحوّل إلى نقطة ثابتة ملوّنة).   */
.hy2-pulse {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hy-dim-2); flex: 0 0 auto;
}
.hy2-pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0;
}
/* جاهز — هادئ تمامًا */
.hy2-pulse.is-ready { background: var(--hy-ok); color: var(--hy-ok); }
/* يعمل الآن — نبض بطيء متنفّس */
.hy2-pulse.is-working { background: var(--hy-electric); color: var(--hy-electric); animation: hy2-pulse-breathe 2.4s var(--hy-e-standard) infinite; }
@keyframes hy2-pulse-breathe {
  0%   { transform: scale(1);   opacity: 1; }
  55%  { transform: scale(1.5); opacity: .55; }
  100% { transform: scale(1);   opacity: 1; }
}
/* ينتظر موافقتك — هالة ثابتة مضيئة (لا حركة: تلفت الانتباه بالسكون) */
.hy2-pulse.is-awaiting { background: var(--hy-warn); color: var(--hy-warn); }
.hy2-pulse.is-awaiting::after { opacity: .55; animation: hy2-halo 3.2s var(--hy-e-standard) infinite; }
@keyframes hy2-halo { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.35); opacity: .12; } }
/* أنهى المهمة — ثابت أخضر */
.hy2-pulse.is-done { background: var(--hy-ok); color: var(--hy-ok); }
/* يحتاج إعدادًا — مجوّف */
.hy2-pulse.is-setup { background: transparent; box-shadow: inset 0 0 0 1.6px var(--hy-dim-2); color: var(--hy-dim-2); }

/* ── (ج) شعاع التكليف — Delegation Beam ───────────────────────────
   اللحظة الأهم في المنتج: هيمنة تُكلّف موظفًا. خطّ ضوء ينتقل من
   نقطة إلى نقطة خلال ~700ms وينتهي بنبضة استلام عند المستقبِل.
   تُشغَّل **مرة واحدة** لكل مهمة — لا تكرار مزعج.                   */
.hy2-beam-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.hy2-beam {
  position: absolute; height: 2px; transform-origin: 0 50%;
  background:var(--k-surface-2);
  opacity: 0; border-radius: 2px;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hy-electric) 85%, transparent));
}
.hy2-beam.is-run { animation: hy2-beam-run var(--hy-d-signature) var(--hy-e-standard) 1 forwards; }
@keyframes hy2-beam-run {
  0%   { opacity: 0; transform: scaleX(.02); }
  15%  { opacity: .95; }
  72%  { opacity: .95; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
/* نبضة الاستلام عند الموظف */
.hy2-beam-hit::after {
  content: ''; position: absolute; inset: -13px; border-radius: 50%;
  border: 2px solid var(--hy-electric); opacity: 0;
  animation: hy2-hit 520ms var(--hy-e-enter) 1 forwards;
}
@keyframes hy2-hit {
  0%   { transform: scale(.35); opacity: .9; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── (د) لحظة الإنجاز — Completion Moment ─────────────────────────
   إتمام القوس + ارتسام علامة الصح + توهّج أزرق قصير. لا confetti.  */
.hy2-complete {
  position: relative; display: inline-grid; place-items: center;
  width: 56px; height: 56px;
}
.hy2-complete .hy2-arc-bar {
  stroke-dasharray: var(--hy2-arc-len, 151);
  animation: hy2-arc-close 620ms var(--hy-e-enter) 1 forwards;
}
@keyframes hy2-arc-close { from { stroke-dashoffset: var(--hy2-arc-len, 151); } to { stroke-dashoffset: 0; } }
.hy2-complete .hy2-check {
  position: absolute; width: 26px; height: 26px;
  stroke: var(--hy-ok); stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: hy2-check-draw 340ms var(--hy-e-enter) 460ms 1 forwards;
}
@keyframes hy2-check-draw { to { stroke-dashoffset: 0; } }
.hy2-complete::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  background: transparent;
  opacity: 0; animation: hy2-glow 900ms var(--hy-e-enter) 420ms 1 forwards;
}
@keyframes hy2-glow { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
/* إبراز بطاقة النتيجة عند الوصول — مرة واحدة */
.hy2-result-card.is-fresh { animation: hy2-card-in var(--hy-d-slow) var(--hy-e-spring) 1; }
@keyframes hy2-card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── (هـ) خلفية حيّة هادئة — Living Hero ──────────────────────────
   شبكة تدرّجات زرقاء تتحرك ببطء شديد (18s) بـtransform/opacity فقط.
   تتوقف عند إخفاء الشاشة (class is-paused يضيفها JS) وفي تقليل الحركة. */
.hy2-live { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hy2-live i {
  position: absolute; border-radius: 50%; opacity: .55;
  will-change: transform;
}
.hy2-live i:nth-child(1) {
  width: 320px; height: 320px; inset-block-start: -46%; inset-inline-end: -18%;
  background:var(--k-surface-2);
  animation: hy2-drift-a var(--hy-d-hero) ease-in-out infinite alternate;
}
.hy2-live i:nth-child(2) {
  width: 260px; height: 260px; inset-block-end: -40%; inset-inline-start: -16%;
  background:var(--k-surface-2);
  animation: hy2-drift-b calc(var(--hy-d-hero) * 1.25) ease-in-out infinite alternate;
}
.hy2-live i:nth-child(3) {
  width: 200px; height: 200px; inset-block-start: 24%; inset-inline-start: 32%;
  background:var(--k-surface-2);
  animation: hy2-drift-c calc(var(--hy-d-hero) * .9) ease-in-out infinite alternate;
}
@keyframes hy2-drift-a { from { transform: translate3d(0, 0, 0) scale(1); }     to { transform: translate3d(-26px, 22px, 0) scale(1.14); } }
@keyframes hy2-drift-b { from { transform: translate3d(0, 0, 0) scale(1.06); }  to { transform: translate3d(30px, -18px, 0) scale(.94); } }
@keyframes hy2-drift-c { from { transform: translate3d(0, 0, 0) scale(.96); opacity: .22; } to { transform: translate3d(-18px, -24px, 0) scale(1.1); opacity: .5; } }
.hy2-live.is-paused i { animation-play-state: paused; }
/* تقليل الحركة: تُثبَّت الخلفية كتدرّج ساكن جميل بدل أن تُلغى */
@media (prefers-reduced-motion: reduce) {
  .hy2-live i, .hy2-pulse, .hy2-pulse::after, .hy2-beam, .hy2-complete .hy2-arc-bar,
  .hy2-complete::after, .hy2-complete .hy2-check, .hy2-result-card.is-fresh {
    animation: none !important;
  }
  .hy2-complete .hy2-check { stroke-dashoffset: 0; }
  .hy2-complete .hy2-arc-bar { stroke-dashoffset: 0; }
  .hy2-live i { opacity: .4; }
  .hy2-pulse.is-awaiting::after { opacity: .5; }
}
html[data-motion="off"] .hy2-live i,
html[data-motion="off"] .hy2-pulse,
html[data-motion="off"] .hy2-pulse::after,
html[data-motion="off"] .hy2-beam,
html[data-motion="off"] .hy2-complete .hy2-arc-bar,
html[data-motion="off"] .hy2-complete::after,
html[data-motion="off"] .hy2-complete .hy2-check,
html[data-motion="off"] .hy2-result-card.is-fresh { animation: none !important; }
html[data-motion="off"] .hy2-complete .hy2-check,
html[data-motion="off"] .hy2-complete .hy2-arc-bar { stroke-dashoffset: 0; }

/* ═════════════════════════ مكوّنات الشاشات ═════════════════════════ */

/* ── البطل (Hero) — أهم بطاقة في الرئيسية ── */
.hy2-hero {
  position: relative; overflow: hidden;
  border-radius: var(--hy-r-l);
  padding: var(--hy-s5);
  margin-bottom: var(--hy-s4);
  background:var(--k-surface);
  border: 1px solid var(--hy-line-2);
  box-shadow: var(--hy-e3), var(--hy-hair);
  isolation: isolate;
}
html[data-theme="light"] .hy2-hero {
  background:var(--k-surface-2);
  border-color: var(--k-line);
}
.hy2-hero > * { position: relative; z-index: 1; }
.hy2-hero .hy2-hero-eyebrow {
  font-size: var(--hy-t-caption); font-weight: var(--hy-w-strong);
  color: var(--k-text); letter-spacing: .04em;
}
html[data-theme="light"] .hy2-hero .hy2-hero-eyebrow { color: var(--k-text); }
.hy2-hero .hy2-hero-title {
  font-family: var(--hy-font-display); font-weight: var(--hy-w-display);
  font-size: var(--hy-t-h1); line-height: var(--hy-lh-heading);
  margin: var(--hy-s2) 0 var(--hy-s2); color: var(--k-text);
}
html[data-theme="light"] .hy2-hero .hy2-hero-title { color: var(--hy-text); }
.hy2-hero .hy2-hero-sub { font-size: var(--hy-t-body-l); color: var(--k-text); max-width: 34ch; }
html[data-theme="light"] .hy2-hero .hy2-hero-sub { color: var(--k-text); }
.hy2-hero .hy2-hero-foot { display: flex; align-items: center; gap: var(--hy-s3); margin-top: var(--hy-s5); }

/* شريط «الفريق الآن» — صف أفقي من الصور بحلقات الحالة */
.hy2-rail { display: flex; gap: var(--hy-s4); overflow-x: auto; padding: var(--hy-s1) 2px var(--hy-s2); scrollbar-width: none; }
.hy2-rail::-webkit-scrollbar { display: none; }
/* عطل حقيقي مقيس (2026-10-01 · بعد دمج الحزمة): كانت البطاقة min-width:66px والاسم
   `white-space:nowrap` — فالأدوار الطويلة (مسؤول العمليات · كاتبة المحتوى) تتجاوز
   العرض بـ 5–12px وتتسرّب من الجانبين لأن البطاقة عنصر flex بمحاذاة center، فتظهر
   الحروف متراكبة فوق بعضها. القياس: clientWidth=62 · scrollWidth=74 للاسم
   «مسؤول العمليات». الإصلاح: عرض أدنى يتحمّل الدور + كسر الكلمة + سطران كحد أقصى،
   وإن زاد الطول يُقصّ بأناقة بدل أن يتسرّب. */
.hy2-rail-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 78px; max-width: 104px; text-align: center; }
.hy2-rail-item b {
  font-size: var(--hy-t-caption); font-weight: var(--hy-w-strong);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hy2-rail-item small { font-size: var(--hy-t-micro); color: var(--hy-dim-2); }

/* الصورة الرمزية بحلقة الحالة — تُستخدم في الفريق والشات والمجتمع */
.hy2-av {
  position: relative; border-radius: 50%; flex: 0 0 auto;
  width: var(--hy2-av-size, 46px); height: var(--hy2-av-size, 46px);
  display: grid; place-items: center;
  background:var(--k-surface);
  border: 1px solid var(--hy-line-2);
  font-family: var(--hy-font-display); font-weight: var(--hy-w-display);
  font-size: calc(var(--hy2-av-size, 46px) * .36);
  color: var(--hy-text); overflow: visible;
}
.hy2-av.hy2-av-me { background: var(--hy-grad); color: var(--k-text); border-color: transparent; }
/* الحلقة تُرسم كقوس حقيقي (نفس عنصر القوس) — لا حدّ دائري مسطّح */
.hy2-av .hy2-av-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
.hy2-av .hy2-av-ring .hy2-arc-track { stroke: var(--hy-line); stroke-width: 2; }
.hy2-av .hy2-av-ring .hy2-arc-bar { stroke-width: 2; }
.hy2-av .hy2-pulse {
  position: absolute; inset-block-end: -1px; inset-inline-start: -1px;
  box-shadow: 0 0 0 2.5px var(--hy-void);
}

/* ── بطاقة الموظف ── */
.hy2-emp {
  display: flex; gap: var(--hy-s4); align-items: flex-start;
  padding: var(--hy-s4);
  border-radius: var(--hy-r-m);
  border: 1px solid var(--hy-line);
  background:var(--k-surface);
  box-shadow: var(--hy-e1);
  margin-bottom: var(--hy-s3);
  transition: transform var(--hy-d-fast) var(--hy-e-standard), box-shadow var(--hy-d-fast);
}
.hy2-emp:active { transform: scale(.985); box-shadow: var(--hy-e2); }
.hy2-emp.is-awaiting { border-color: color-mix(in srgb, var(--hy-warn) 40%, transparent); }
.hy2-emp.is-working { border-color: var(--hy-blue-line); }
.hy2-emp .hy2-emp-main { flex: 1; min-width: 0; }
.hy2-emp .hy2-emp-name {
  font-family: var(--hy-font-display); font-size: var(--hy-t-h3);
  font-weight: var(--hy-w-display); display: flex; align-items: center; gap: 7px;
}
.hy2-emp .hy2-emp-role { font-size: var(--hy-t-caption); color: var(--hy-dim); margin-top: 1px; }
.hy2-emp .hy2-emp-task {
  font-size: var(--hy-t-label); color: var(--hy-text); margin-top: var(--hy-s2);
  display: flex; align-items: center; gap: 7px;
}
.hy2-emp .hy2-emp-acts { display: flex; gap: var(--hy-s2); margin-top: var(--hy-s3); }

/* ── بطاقة مهمة / موافقة / نتيجة ── */
.hy2-task, .hy2-approve, .hy2-result-card {
  padding: var(--hy-s4); border-radius: var(--hy-r-m);
  border: 1px solid var(--hy-line);
  background:var(--k-surface);
  box-shadow: var(--hy-e1); margin-bottom: var(--hy-s3);
}
.hy2-approve {
  border-color: color-mix(in srgb, var(--hy-warn) 34%, transparent);
  background: var(--k-surface-2);
}
.hy2-result-card { border-color: color-mix(in srgb, var(--hy-ok) 28%, transparent); }
.hy2-task .hy2-task-top { display: flex; align-items: center; gap: var(--hy-s3); }
.hy2-task .hy2-task-title { font-size: var(--hy-t-body); font-weight: var(--hy-w-strong); flex: 1; min-width: 0; }
.hy2-task .hy2-task-meta { font-size: var(--hy-t-caption); color: var(--hy-dim); margin-top: 3px; }

/* شريط مراحل المهمة — يُعرض كمراحل بصرية مع القوس، لا كقائمة نصوص */
.hy2-stages { display: flex; align-items: center; gap: 0; margin-top: var(--hy-s3); }
.hy2-stages .hy2-st {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; font-size: var(--hy-t-micro); color: var(--hy-dim-2); text-align: center;
}
.hy2-stages .hy2-st::before {
  content: ''; position: absolute; inset-block-start: 5px; height: 2px;
  inset-inline: 0; background: var(--hy-line-2); z-index: 0;
}
.hy2-stages .hy2-st:first-child::before { inset-inline-start: 50%; }
.hy2-stages .hy2-st:last-child::before { inset-inline-end: 50%; }
.hy2-stages .hy2-st i {
  width: 11px; height: 11px; border-radius: 50%; z-index: 1;
  background: var(--hy-ink-3); box-shadow: 0 0 0 3px var(--hy-ink);
  border: 1.5px solid var(--hy-line-2);
}
.hy2-stages .hy2-st.is-done i { background: var(--hy-ok); border-color: var(--hy-ok); }
.hy2-stages .hy2-st.is-done::before { background: var(--hy-ok); }
.hy2-stages .hy2-st.is-now i { background: var(--hy-electric); border-color: var(--hy-electric); animation: hy2-pulse-breathe 2.4s var(--hy-e-standard) infinite; }
.hy2-stages .hy2-st.is-now { color: var(--hy-blue-2); font-weight: var(--hy-w-strong); }
.hy2-stages .hy2-st.is-done { color: var(--hy-dim); }

/* ── بطاقة إحصاء ── */
.hy2-metric {
  padding: var(--hy-s4); border-radius: var(--hy-r-m);
  border: 1px solid var(--hy-line); background: var(--hy-ink);
  box-shadow: var(--hy-e1);
}
.hy2-metric b {
  display: block; font-family: var(--hy-font-display); font-weight: var(--hy-w-display);
  font-size: var(--hy-t-h1); line-height: 1.1; font-variant-numeric: var(--hy-num);
}
.hy2-metric span { font-size: var(--hy-t-caption); color: var(--hy-dim); }
.hy2-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--hy-s3); }

/* ── صف قائمة مضغوط ── */
.hy2-row {
  display: flex; align-items: center; gap: var(--hy-s3);
  min-height: 56px; padding: var(--hy-s3) var(--hy-s4);
  border-radius: var(--hy-r-s); border: 1px solid var(--hy-line);
  background: var(--hy-ink); box-shadow: var(--hy-e1);
  margin-bottom: var(--hy-s2); width: 100%; text-align: start;
  font-family: inherit; color: var(--hy-text); font-size: var(--hy-t-body);
}
.hy2-row:active { transform: scale(.99); }
.hy2-row .hy2-row-main { flex: 1; min-width: 0; }
.hy2-row b { font-weight: var(--hy-w-strong); display: block; }
.hy2-row small { font-size: var(--hy-t-caption); color: var(--hy-dim); }
.hy2-row svg { width: 19px; height: 19px; color: var(--hy-dim-2); flex: 0 0 auto; }

/* ── الهياكل العظمية (Skeleton) بلون المحتوى النهائي ── */
.hy2-skel {
  background:var(--k-surface);
  background-size: 220% 100%;
  border-radius: var(--hy-r-xs);
  animation: hy2-shimmer 1.5s linear infinite;
}
@keyframes hy2-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.hy2-skel-line { height: 12px; margin-bottom: var(--hy-s2); }
.hy2-skel-line.w60 { width: 60%; } .hy2-skel-line.w40 { width: 40%; } .hy2-skel-line.w80 { width: 80%; }
.hy2-skel-av { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; }
.hy2-skel-card { height: 96px; border-radius: var(--hy-r-m); margin-bottom: var(--hy-s3); }
.hy2-skel-hero { height: 188px; border-radius: var(--hy-r-l); margin-bottom: var(--hy-s4); }
@media (prefers-reduced-motion: reduce) { .hy2-skel { animation: none; } }
html[data-motion="off"] .hy2-skel { animation: none; }

/* ── حالات: فراغ · خطأ · بلا اتصال · نجاح ── */
.hy2-state { text-align: center; padding: var(--hy-s8) var(--hy-s5); }
.hy2-state .hy2-state-art {
  width: 84px; height: 84px; margin: 0 auto var(--hy-s4);
  border-radius: var(--hy-r-l); display: grid; place-items: center;
  background:var(--k-surface);
  border: 1px solid var(--hy-line);
}
.hy2-state .hy2-state-art svg { width: 38px; height: 38px; color: var(--hy-dim-2); }
.hy2-state h3 { font-family: var(--hy-font-display); font-size: var(--hy-t-h3); font-weight: var(--hy-w-display); margin-bottom: var(--hy-s2); }
.hy2-state p { font-size: var(--hy-t-label); color: var(--hy-dim); max-width: 30ch; margin: 0 auto var(--hy-s5); }
.hy2-state.is-error .hy2-state-art { border-color: color-mix(in srgb, var(--hy-danger) 34%, transparent); }
.hy2-state.is-error .hy2-state-art svg { color: var(--hy-danger); }
.hy2-state.is-offline .hy2-state-art { border-color: color-mix(in srgb, var(--hy-warn) 34%, transparent); }
.hy2-state.is-offline .hy2-state-art svg { color: var(--hy-warn); }
.hy2-state.is-ok .hy2-state-art { border-color: color-mix(in srgb, var(--hy-ok) 34%, transparent); }
.hy2-state.is-ok .hy2-state-art svg { color: var(--hy-ok); }

/* شريط «بلا اتصال» رفيع أعلى المحتوى */
.hy2-offline-bar {
  display: flex; align-items: center; gap: var(--hy-s3);
  padding: 10px var(--hy-s4); border-radius: var(--hy-r-s);
  background: var(--hy-warn-soft); color: var(--hy-warn);
  border: 1px solid color-mix(in srgb, var(--hy-warn) 30%, transparent);
  font-size: var(--hy-t-label); font-weight: var(--hy-w-strong);
  margin-bottom: var(--hy-s3);
}

/* ── الشرائح (Chips) القابلة للّمس — اقتراحات الشات والمرشّحات ── */
.hy2-chips { display: flex; gap: var(--hy-s2); flex-wrap: wrap; }
.hy2-chip-btn {
  min-height: 44px; padding: 10px var(--hy-s4);
  border-radius: var(--hy-r-pill);
  border: 1px solid var(--hy-line-2); background: var(--hy-ink-2); color: var(--hy-text);
  font-family: inherit; font-size: var(--hy-t-label); font-weight: var(--hy-w-strong);
  display: inline-flex; align-items: center; gap: var(--hy-s2);
  transition: transform var(--hy-d-instant), background var(--hy-d-fast), border-color var(--hy-d-fast);
}
.hy2-chip-btn:active { transform: scale(.96); }
.hy2-chip-btn svg { width: 17px; height: 17px; color: var(--hy-blue-2); }
.hy2-chip-btn.is-on { background: var(--hy-blue-soft); border-color: var(--hy-blue-line); color: var(--hy-blue-2); }

/* ── فقاعات الشات ── */
.hy2-msg { margin-bottom: var(--hy-s4); display: flex; gap: var(--hy-s3); align-items: flex-end; }
.hy2-msg .hy2-msg-body { max-width: 84%; }
.hy2-msg .hy2-bubble {
  padding: 12px var(--hy-s4); border-radius: var(--hy-r-m);
  font-size: var(--hy-t-body); line-height: var(--hy-lh-body);
  border: 1px solid var(--hy-line); background: var(--hy-ink-2); color: var(--hy-text);
  box-shadow: var(--hy-e1);
  border-end-inline-start-radius: var(--hy-r-xs);
  animation: hy2-msg-in var(--hy-d) var(--hy-e-enter) 1;
}
@keyframes hy2-msg-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.hy2-msg.me { flex-direction: row-reverse; }
.hy2-msg.me .hy2-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.hy2-msg.me .hy2-bubble {
  background: var(--hy-grad); color: var(--k-text); border-color: transparent;
  box-shadow: var(--hy-e2), inset 0 1px 0 0 1px 3px var(--k-shadow);
  border-start-inline-start-radius: var(--hy-r-m);
  border-end-inline-start-radius: var(--hy-r-m);
  border-end-inline-end-radius: var(--hy-r-xs);
}
.hy2-msg .hy2-msg-who { font-size: var(--hy-t-caption); color: var(--hy-dim-2); margin-bottom: 5px; }
/* مؤشّر الكتابة: ثلاث نقاط تتنفّس */
.hy2-dots { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.hy2-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hy-blue-2); animation: hy2-dot 1.25s var(--hy-e-standard) infinite; }
.hy2-dots i:nth-child(2) { animation-delay: .16s; }
.hy2-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes hy2-dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hy2-dots i, .hy2-msg .hy2-bubble { animation: none; } }
html[data-motion="off"] .hy2-dots i, html[data-motion="off"] .hy2-msg .hy2-bubble { animation: none; }

/* ── المحرّر (Composer) ── */
.hy2-composer {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: flex-end; gap: var(--hy-s2);
  padding: var(--hy-s3);
  border-radius: var(--hy-r-l);
  border: 1px solid var(--hy-line-2);
  background: var(--hy-ink);
  box-shadow: var(--hy-e3);
}
.hy2-composer textarea {
  flex: 1; min-height: 46px; max-height: 132px; resize: none;
  border: 0; background: transparent; box-shadow: none; padding: 11px 4px;
}
.hy2-composer textarea:focus { box-shadow: none; }
.hy2-composer .hy2-icon-btn {
  width: 46px; height: 46px; border-radius: var(--hy-r-s); flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--hy-line-2); background: var(--hy-ink-2); color: var(--hy-dim);
  transition: transform var(--hy-d-instant), color var(--hy-d-fast);
}
.hy2-composer .hy2-icon-btn:active { transform: scale(.93); }
.hy2-composer .hy2-send {
  background: var(--hy-grad); border-color: transparent; color: var(--k-text);
  box-shadow: var(--hy-e2);
}
.hy2-composer .hy2-send.is-stop { background: var(--hy-danger-soft); color: var(--hy-danger); border-color: color-mix(in srgb, var(--hy-danger) 34%, transparent); }

/* ── البطاقات القابلة للطي ── */
.hy2-fold { border-radius: var(--hy-r-m); border: 1px solid var(--hy-line); background: var(--hy-ink); overflow: hidden; margin-bottom: var(--hy-s3); }
.hy2-fold > summary {
  list-style: none; cursor: pointer; min-height: 56px;
  display: flex; align-items: center; gap: var(--hy-s3); padding: var(--hy-s3) var(--hy-s4);
  font-weight: var(--hy-w-strong); font-size: var(--hy-t-body);
}
.hy2-fold > summary::-webkit-details-marker { display: none; }
.hy2-fold > summary .hy2-fold-caret { margin-inline-start: auto; transition: transform var(--hy-d-fast) var(--hy-e-standard); color: var(--hy-dim-2); }
.hy2-fold[open] > summary .hy2-fold-caret { transform: rotate(-90deg); }
.hy2-fold .hy2-fold-body { padding: 0 var(--hy-s4) var(--hy-s4); border-top: 1px solid var(--hy-line); padding-top: var(--hy-s3); }

/* ── الشرائح السفلية / النوافذ ── */
.sheet, .modal {
  border-radius: var(--hy-r-xl) var(--hy-r-xl) 0 0;
  border: 1px solid var(--hy-line-2); border-bottom: 0;
  background:var(--k-surface);
  box-shadow: var(--hy-e4);
}
.sheet-head, .modal-head h2, .modal-head h3 { font-family: var(--hy-font-display); font-weight: var(--hy-w-display); }

/* ── أشرطة الحالة (طابور المهام) ── */
.hy2-statusbar {
  display: flex; align-items: center; gap: var(--hy-s3);
  padding: 10px var(--hy-s4); border-radius: var(--hy-r-pill);
  background: var(--hy-ink-2); border: 1px solid var(--hy-line);
  font-size: var(--hy-t-caption); color: var(--hy-dim);
  margin-bottom: var(--hy-s3);
}
.hy2-statusbar b { color: var(--hy-text); font-weight: var(--hy-w-strong); font-variant-numeric: var(--hy-num); }

/* ═════════════════════════ أدوات مساعدة ═════════════════════════ */
.hy2-gap-s { gap: var(--hy-s2); }
.hy2-gap   { gap: var(--hy-s3); }
.hy2-gap-l { gap: var(--hy-s5); }
.hy2-row-flex { display: flex; align-items: center; }
.hy2-between { display: flex; align-items: center; justify-content: space-between; gap: var(--hy-s3); }
.hy2-col { display: flex; flex-direction: column; }
.hy2-grow { flex: 1; min-width: 0; }
.hy2-block { display: block; }
.hy2-center { text-align: center; }
.hy2-mt2 { margin-top: var(--hy-s2); } .hy2-mt3 { margin-top: var(--hy-s3); }
.hy2-mt4 { margin-top: var(--hy-s4); } .hy2-mt6 { margin-top: var(--hy-s6); }
.hy2-mb3 { margin-bottom: var(--hy-s3); } .hy2-mb4 { margin-bottom: var(--hy-s4); }
.hy2-hidden { display: none !important; }
.hy2-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hy2-divider { height: 1px; background: var(--hy-line); margin: var(--hy-s4) 0; border: 0; }

/* المحتوى لا يمرّ تحت شريط التنقل */
.app-main { padding-bottom: calc(var(--hy-tabbar) + env(safe-area-inset-bottom, 0px) + var(--hy-s6)); }

/* الشاشات الضيقة جدًا (360px وأقل): نضغط المسافات لا المقاسات المقروءة */
@media (max-width: 380px) {
  :root { --hy-s4: 14px; --hy-s5: 17px; --hy-t-display: 1.875rem; --hy-t-h1: 1.5rem; }
  .hy2-hero { padding: var(--hy-s4); }
  .hy2-msg .hy2-msg-body { max-width: 90%; }
}

/* تكبير الخط 130% من إعدادات النظام: لا نقصّ ولا نتراكب */
@media (min-resolution: 0.001dpcm) { .hy2-emp, .hy2-row, .hy2-task { min-height: auto; } }

/* ═══════════════════════════════════════════════════════════════════════════
 *  نظام مقاسات الأيقونات (Icon Size System) — قياس حيّ 2026-10-01
 * ═══════════════════════════════════════════════════════════════════════════
 *  العطل المقيس قبل هذا القسم (على الرئيسية الحقيقية):
 *    • التبويب السفلي: 21px في app.css ← 19px في compact-system ← 23px هنا.
 *      ثلاث طبقات تتنازع نفس العنصر، والفائز 23px بلا قرار تصميمي.
 *    • أزرار الشرائح 17px · صفوف المكوّنات 19px · أيقونات البطاقات 19px ·
 *      رأس القائمة 19px · أزرار الإجراء 16px — أي 17/19/23 للدور نفسه تقريبًا.
 *    • اختلاف السماكة داخل نفس السياق: sw=1.8 و sw=2 على أيقونات 19px متجاورة.
 *
 *  القاعدة المُتّبعة: المقاس يُحدَّد بالدور (role) لا بالعنصر، والسماكة تُشتقّ
 *  من المقاس (تعويض بصري) لأن كل أيقونات المشروع على viewBox 0 0 24 24 —
 *  فخطوة 1.8 داخل 24 تظهر 1.65px عند عرض 22px وتظهر 1.2px عند عرض 16px.
 *  لذلك: الأصغر ⇒ سماكة أكبر، حتى تتساوى الكتلة البصرية لا الرقم.
 *
 *  المجموعات (اسم الدور · المقاس · السماكة):
 *    NAV      22px · 1.8   التبويب السفلي (أكبر بصريًا ليقاوم ضغط النص تحته)
 *    ACTION   18px · 2.0   أزرار الإجراءات والشرائح
 *    CARD     19px · 1.9   أيقونة بادئة في بطاقة/صف
 *    INLINE   16px · 2.1   chevron وسِياق صغير داخل نص
 *    AGENT    22px · 1.8   رمز وكيل/موظف
 *    FIELD    20px · 1.9   أيقونة داخل حقل إدخال أو زر إرسال
 *    HERO     26px · 1.7   داخل حاوية 64px (حالة فارغة)
 *    DISPLAY  38px · 1.5   رسم حالة كبير (لا يُستخدم للتنقل)
 *
 *  المواضع: 32/36/40/44/48 للـSVG في نقطة القياس الواحدة، ولا تُستبدل بـ20/40/60
 *  العشرية القديمة — المتصفح يرسم الحدّ على نصف بكسل فيبدو مشوّشًا.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ic-nav: 22px;   --ic-sw-nav: 1.8;
  --ic-action: 18px; --ic-sw-action: 2;
  --ic-card: 19px;  --ic-sw-card: 1.9;
  --ic-inline: 16px; --ic-sw-inline: 2.1;
  --ic-agent: 22px; --ic-sw-agent: 1.8;
  --ic-field: 20px; --ic-sw-field: 1.9;
  --ic-hero: 26px;  --ic-sw-hero: 1.7;
  --ic-display: 38px; --ic-sw-display: 1.5;
  /* حاويات الأيقونة (نقاط اللمس) */
  --ic-box-nav: 44px; --ic-box-action: 44px; --ic-box-card: 34px;
  --ic-box-agent: 38px; --ic-box-hero: 64px;
  /* حاوية شارة المرسل في فقاعات المحادثة (28px) — تُعرَّف هنا لتبقى الأيقونة
     الواحدة بمقاس واحد في كل الشاشات، وبلا رقم صلب في كتلة التنقل. */
  --ic-box-badge: 28px;
}

/*
 * `flex: 0 0 auto` في كل قاعدة مقاس: عطل حقيقي أمسكته القياسات.
 *
 *   `.directory-search` صفّ flex، وأيقونته كانت تُضغط إلى 17.6×19px — أي رسم
 *   **غير مربّع** (width 17.6 · height 19) لأن SVG بلا flex-basis يُقلَّص.
 *   المقاس المقيس للرمز صار 17.6 بدل 19، وهو تشويه لا مجرد فارق مقاس.
 *   الحلّ: الأيقونة لا تُقلَّص ولا تُمدّ — تُأخذ مقاساتها من السلّم وحده.
 */

/* ── NAV: شريط التنقل السفلي ── */
.tabbar a svg { width: var(--ic-nav); height: var(--ic-nav); flex: 0 0 auto; }
.tabbar a svg * { stroke-width: var(--ic-sw-nav); }
.qbar a svg { width: var(--ic-action); height: var(--ic-action); flex: 0 0 auto; }
.qbar a svg * { stroke-width: var(--ic-sw-action); }

/* ── ACTION: أزرار وشرائح ── */
.btn svg, .icon-btn svg, .hy2-chip-btn svg, .sendbtn svg,
.composer .send svg, .act-ico svg, .hy-sheet-add svg, .hy-pick-more svg, .hy-who-go svg,
.hy-ctx-b svg, .hy-ctx-b .tab-dot svg {
  width: var(--ic-action); height: var(--ic-action); flex: 0 0 auto;
}
.btn svg *, .icon-btn svg *, .hy2-chip-btn svg *, .sendbtn svg *,
.composer .send svg *, .act-ico svg *, .hy-sheet-add svg *, .hy-pick-more svg *, .hy-who-go svg *,
.hy-ctx-b svg *, .hy-ctx-b .tab-dot svg * {
  stroke-width: var(--ic-sw-action);
}

/* ── CARD: أيقونة بادئة في بطاقة/صف/رأس قسم ── */
.hy2-row svg, .hy-tile .ic svg, .menu-body a svg, .stat .ic svg,
.directory-group summary svg, .directory-search svg, .hy-agent .avatar svg, .attc-ico svg,
.hy-ctx-avatar svg, .hy-tool svg {
  width: var(--ic-card); height: var(--ic-card); flex: 0 0 auto;
}
.hy2-row svg *, .hy-tile .ic svg *, .menu-body a svg *, .stat .ic svg *,
.directory-group summary svg *, .directory-search svg *, .hy-agent .avatar svg *, .attc-ico svg *,
.hy-ctx-avatar svg * {
  stroke-width: var(--ic-sw-card);
}
/* رمز الوكيل/الموظف: أوسع قليلًا داخل الحاوية نفسها */
.hy-agent .avatar svg { width: var(--ic-agent); height: var(--ic-agent); flex: 0 0 auto; }
.hy-agent .avatar svg * { stroke-width: var(--ic-sw-agent); }

/* ── INLINE: chevron وسِياق صغير ── */
.directory-tool > svg, .directory-tool-icon svg, .attc-go svg, .attc-x svg,
.ai-badge svg, .hy-skill-ic svg, .hy-emp-avatar svg, .chat-tools .btn svg, .hy2-fold-caret svg,
.hy-ctx-go svg {
  width: var(--ic-inline); height: var(--ic-inline); flex: 0 0 auto;
}
.directory-tool > svg *, .directory-tool-icon svg *, .attc-go svg *, .attc-x svg *,
.ai-badge svg *, .hy-skill-ic svg *, .hy-emp-avatar svg *, .chat-tools .btn svg *,
.hy2-fold-caret svg *, .hy-ctx-go svg * {
  stroke-width: var(--ic-sw-inline);
}
/* أيقونة صفّ الأداة في القائمة الأصلية — كانت تأخذ سمكها من وسم SVG وحده (1.7/1.8/2)
   فتظهر أداة بسمك مختلف عن أختها في الصف التالي. الآن من السلّم. */
.hy-tool svg * { stroke-width: var(--ic-sw-card); }

/* ── FIELD: داخل حقل إدخال أو منطقة رفع ── */
.credential-field > svg, .mythic-submit > svg, .password-toggle svg, .attview-b svg,
.ci-ico svg, .auth-state-icon svg, .attachbtn svg, .statusstrip .ss-ic svg, .hy-search svg {
  width: var(--ic-field); height: var(--ic-field); flex: 0 0 auto;
}
.credential-field > svg *, .mythic-submit > svg *, .password-toggle svg *,
.attview-b svg *, .ci-ico svg *, .auth-state-icon svg *,
.attachbtn svg *, .statusstrip .ss-ic svg *, .hy-search svg * {
  stroke-width: var(--ic-sw-field);
}
/* أيقونة أزرار الإجراء السريعة في المجتمع (.cm-act) — كانت 20px صلبة في hy-compat */
.cm-act svg, .cm-act .k-i { width: var(--ic-field); height: var(--ic-field); flex: 0 0 auto; }
.cm-act svg * { stroke-width: var(--ic-sw-field); }
/* الحاويات: نقطة قياس واحدة للنقر (48×48 لا 44×44 على الأزرار الحساسة) */
.icon-btn { min-width: var(--ic-box-action); min-height: var(--ic-box-action); }

/* ── HERO / DISPLAY: حالة فارغة ورسم حالة كبير ── */
.empty .icon, .hy-state .ic { width: var(--ic-box-hero); height: var(--ic-box-hero); }
.empty .icon svg { width: var(--ic-hero); height: var(--ic-hero); flex: 0 0 auto; }
.empty .icon svg * { stroke-width: var(--ic-sw-hero); }
/* لا نلمس .hy2-arc ولا .native-loader: رسوم متحركة بسماكة محسوبة في JS/HTML */
.hy2-state .hy2-state-art svg, .auth-confirmation > svg {
  width: var(--ic-display); height: var(--ic-display); flex: 0 0 auto;
}
.hy2-state .hy2-state-art svg *, .auth-confirmation > svg * { stroke-width: var(--ic-sw-display); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  حركة شريط التنقل السفلي — مؤشر منزلق + عمق مصغّر
 * ═══════════════════════════════════════════════════════════════════════════
 *  المطلوب: إحساس تطبيق حديث بلا إبطاء وبلا استعراض. لذلك:
 *    • حركة واحدة مفهومة: كبسولة تنزلق إلى التبويب النشط (٢٤٠ms بلا ارتداد).
 *    • تكبير الأيقونة النشطة ٦٪ فقط + وزن النص ٦٠٠.
 *    • لا تغيير في ترتيب العناصر ولا أبعادها ⇒ لا «قفز» عند الضغط.
 *    • الحركة تُلغى كليًا في وضع الجهاز البطيء (body.lite) وفي prefers-reduced-motion.
 *  قياس الحركة: transform/opacity فقط ⇒ لا إعادة تخطيط في كل إطار.
 */
.tabbar { --tab-ind-w: 30px; }
.tabbar .tab-ind {
  /*
   * `left` وليس `inset-inline-start` — وهذا عطل حقيقي أمسكته القياسات:
   * الخصائص المنطقية تقلب نفسها في RTL (`inset-inline-start` تصير right:0)،
   * ونحن نُمرّر `translateX` محسوبًا من `getBoundingClientRect` — أي قيمة
   * **فيزيائية من اليسار**. فكان المؤشر يظهر عند الحافة اليمنى (x=731) بينما
   * التبويب النشط عند x=325. القاعدة: لا تخلط منطقيًا مع فيزيائيًا.
   */
  position: absolute; inset-block-start: 5px; left: 0;
  width: var(--tab-ind-w); height: 30px; border-radius: 12px;
  background:transparent;
  border: 1px solid var(--k-line);
  opacity: 0; pointer-events: none;
  transform: translateX(0);
  transition: transform .24s cubic-bezier(.22,.8,.28,1), opacity .18s ease-out;
  will-change: transform;
}
.tabbar .tab-ind.ready { opacity: 1; }
.tabbar a { -webkit-tap-highlight-color: transparent; }
.tabbar a svg { transition: transform .22s cubic-bezier(.22,.8,.28,1); }
.tabbar a span { transition: font-weight .12s linear, opacity .18s ease-out; }
.tabbar a.on svg { transform: scale(1.06); }
.tabbar a.on span { font-weight: 600; }
/* هيمنة: التبويب الأول/المركزي — تمييز هادئ بلا تضخيم */
.tabbar a.tab-hero svg { color: var(--hy-blue-2); }
.tabbar a.tab-hero.on svg { transform: scale(1.1); filter: drop-shadow(0 0 7px none); }
.tabbar a.tab-hero.on .tab-dot { box-shadow: 0 0 0 3px 0 6px 18px var(--k-shadow); }

/* دخول الشاشة: خطوة واحدة قصيرة لا تُعاد مع كل تحديث بيانات */
@keyframes hy-view-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
#view.hy-enter > * { animation: hy-view-enter .19s cubic-bezier(.22,.8,.28,1) both; }

/* تقليل الحركة: من طلب النظام أو من وضع الجهاز البطيء */
@media (prefers-reduced-motion: reduce) {
  .tabbar .tab-ind, .tabbar a svg, .tabbar a span { transition: none !important; }
  #view.hy-enter > * { animation: none !important; }
}
body.lite .tabbar .tab-ind { transition: transform .16s linear; background: var(--k-line); border-color: transparent; }
body.lite .tabbar a.tab-hero.on svg { filter: none; }
body.lite #view.hy-enter > * { animation: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  HYMANNA · RC1 — نظام تصميم المنتج الكامل (Premium Design System)
 * ═══════════════════════════════════════════════════════════════════════════
 *  هذا القسم يُضاف **آخر** الملف عن قصد: نفس الأخصّية + موضع أحدث ⇒ يفوز على
 *  كل ما قبله بلا `!important` وبلا رفع أخصّية (لا صراع طبقات).
 *
 *  القاعدة الحاكمة:
 *    1) التوكنات هنا هي المصدر الوحيد للألوان والمقاسات والحركة.
 *       أي مكوّن يستهلك `var(--…)` فقط — لا رقم ولا لون مكتوب يدويًا.
 *    2) الأسماء القديمة (`--hy-*` · `--ui-*` · `--bg` · `--card` …) تُعاد
 *       ربطها من هنا، فترث **كل** الشاشات (بما لم نلمسه) الهوية الجديدة
 *       فورًا بلا تعديل أي ماركب.
 *    3) لا `backdrop-filter` (قرار أداء موثّق: أغلى عملية رسم على أندرويد
 *       المتوسط) — العمق يُبنى بتدرّجات معتمة وحدود متدرّجة وظلال ناعمة.
 *    4) كل حركة على transform/opacity، وكل هدف لمس ≥ 48px، وأصغر خط 12px.
 *    5) الحركة تُلغى في prefers-reduced-motion وفي وضع الجهاز البطيء (lite).
 *
 *  لوحة الألوان: كحلي عميق + أزرق ملكي + سماوي كهربائي. لا رمادي محايد في
 *  أي درجة — كل «الرمادي» هنا مزرقّ (blue-tinted neutral) فلا يظهر ميتًا على
 *  خلفية كحلية. ولا بنفسجي في أي درجة.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ١) اللون: الأسطح ─────────────────────────────────────────────── */
  --hy-void:var(--k-bg);               /* قرار: أسود الحزمة */
  --hy-black:var(--k-bg);
  --hy-ink:var(--k-surface);           /* سطح ١ — البطاقة */
  --hy-ink-2:var(--k-surface-2);       /* سطح ٢ — المرتفع */
  --hy-ink-3:var(--k-surface-2);       /* سطح ٣ — المتحكّم/الحقل */
  --hy-ink-4:var(--k-surface-2);       /* سطح ٤ — التحديد/التمرير */
  --hy-line:var(--k-line);             /* حدّ رقيق */
  --hy-line-2:var(--k-line-strong);    /* حدّ مرئي */
  --hy-line-3:var(--k-line-strong);    /* حدّ مؤكد */
  --hy-glass:var(--k-surface);         /* سطح صلب بلا blur */

  /* ── ٢) اللون: النص (من توكنات النص — لا من الخطوط) ─────────────── */
  --hy-text:var(--k-text);
  --hy-pearl:var(--k-text);
  --hy-dim:var(--k-text-2);            /* ثانوي */
  --hy-dim-2:var(--k-text-3);          /* ثالثي */
  --hy-dim-3:var(--k-text-3);          /* رابعي (تلميحات فقط) */
  --hy-dim-4:var(--k-text-3);

  /* ── ٣) اللون: الهوية (الليموني) ─────────────────────────────────── */
  --hy-royal:var(--k-accent);
  --hy-electric:var(--k-accent);
  --hy-blue-2:var(--k-accent);
  --hy-cobalt:var(--k-accent);
  --hy-blue-soft:var(--k-surface-2);
  --hy-blue-line:var(--k-line-strong);
  background:var(--k-bg);
  --hy-grad-soft:var(--k-accent-soft);
  --hy-sheen:none;
  --hy-grad-line:var(--k-line);

  /* ── ٤) اللون: الحالات ────────────────────────────────────────────── */
  --hy-ok:var(--k-positive);
  --hy-ok-soft:var(--k-surface-2);
  --hy-warn:var(--k-accent);
  --hy-warn-soft:var(--k-accent-soft);
  --hy-danger:var(--k-neg-text);
  --hy-danger-soft:var(--k-surface-2);
  --hy-info:var(--k-text);
  --hy-info-soft:var(--k-surface-2);

  /* الضوء المحيط (body::before في app.css يستهلكها) */
  --glow-1:transparent;
  --glow-2:transparent;
  --glow-3:transparent;

  /* ── ٥) الحجم: السلّم النصي (الأصغر 12px — لا خط أصغر منه) ─────────── */
  --hy-fs-display: 1.875rem;   /* 30 */
  --hy-fs-h1: 1.5rem;          /* 24 */
  --hy-fs-h2: 1.1875rem;       /* 19 */
  --hy-fs-h3: 1.0625rem;       /* 17 */
  --hy-fs-body-l: 1rem;        /* 16 */
  --hy-fs-body: .9375rem;      /* 15 */
  --hy-fs-label: .8125rem;     /* 13 */
  --hy-fs-caption: .78125rem;  /* 12.5 */
  --hy-fs-micro: .75rem;       /* 12 */

  /* مرايا الأسماء الأصلية ⇒ تنتقل الهوية لكل الشاشات */
  --hy-t-display: var(--hy-fs-display);
  --hy-t-h1: var(--hy-fs-h1);
  --hy-t-h2: var(--hy-fs-h2);
  --hy-t-h3: var(--hy-fs-h3);
  --hy-t-body-l: var(--hy-fs-body-l);
  --hy-t-body: var(--hy-fs-body);
  --hy-t-label: var(--hy-fs-label);
  --hy-t-caption: var(--hy-fs-caption);
  --hy-t-micro: var(--hy-fs-micro);
  --ui-title: var(--hy-fs-h1);
  --ui-section: var(--hy-fs-h2);
  --ui-card: var(--hy-fs-h3);
  --ui-body: var(--hy-fs-body);
  --ui-secondary: var(--hy-fs-caption);
  --ui-label: var(--hy-fs-label);
  --ui-badge: var(--hy-fs-micro);
  --ui-button: var(--hy-fs-label);
  --hy-lh-body: 1.78;
  --hy-lh-heading: 1.38;
  --hy-lh-tight: 1.22;
  --hy-w-display: 700;
  --hy-w-strong: 600;
  --hy-w-body: 400;

  /* ── ٦) المسافة: سلّم 4px صارم ────────────────────────────────────── */
  --hy-s1: 4px;  --hy-s2: 8px;  --hy-s3: 12px; --hy-s4: 16px;
  --hy-s5: 20px; --hy-s6: 24px; --hy-s7: 32px; --hy-s8: 40px;
  --hy-s9: 48px;
  --ui-s1: var(--hy-s1); --ui-s2: var(--hy-s2); --ui-s3: var(--hy-s3);
  --ui-s4: var(--hy-s4); --ui-s5: var(--hy-s5); --ui-s6: var(--hy-s6); --ui-s7: var(--hy-s7);

  /* ── ٧) الاستدارة: واحدة ومتناغمة ─────────────────────────────────── */
  --hy-r-xs: 10px; --hy-r-s: 12px; --hy-r-m: 16px; --hy-r-l: 20px;
  --hy-r-xl: 26px; --hy-r-2xl: 32px; --hy-r-pill: 999px;
  --ui-input-r: var(--hy-r-s); --ui-card-r: var(--hy-r-m);
  --ui-button-r: var(--hy-r-s); --ui-large-r: var(--hy-r-l);
  --r-s: var(--hy-r-s); --r-m: var(--hy-r-m); --r-l: var(--hy-r-l); --r-xl: var(--hy-r-xl);

  /* ── ٨) العمق: أربعة مستويات + شعرة داخلية + حلقة تركيز ───────────── */
  --hy-e1:var(--k-shadow);
  --hy-e2:var(--k-shadow);
  --hy-e3:var(--k-shadow);
  --hy-e4:var(--k-shadow);
  --hy-e-glow:none;
  --hy-hair:inset 0 1px 0 var(--k-line);
  --hy-ring:0 0 0 3px var(--k-accent);
  --hy-shadow: var(--hy-e1);
  --ui-shadow:var(--k-shadow);
  --ui-focus:0 0 0 3px var(--k-accent);
  --shadow:0 6px 18px var(--k-shadow); --elev-1:0 1px 3px var(--k-line); --elev-2:0 6px 18px var(--k-line);

  /* ── ٩) الحركة: مدة واحدة لكل معنى + منحنيات موحّدة ───────────────── */
  --hy-d-instant: 90ms; --hy-d-fast: 150ms; --hy-d: 200ms;
  --hy-d-slow: 280ms; --hy-d-signature: 600ms;
  --hy-d-hero: 20s;
  --hy-e-standard: cubic-bezier(.2, .7, .2, 1);
  --hy-e-enter: cubic-bezier(.05, .7, .1, 1);
  --hy-e-exit: cubic-bezier(.4, 0, .6, 1);
  --hy-e-spring: cubic-bezier(.18, .9, .25, 1.04);
  --ui-duration: var(--hy-d);

  /* ── ١٠) المسرح: طبقات z في مكان واحد ────────────────────────────── */
  --hy-z-nav: 30; --hy-z-composer: 40; --hy-z-beam: 70;
  --hy-z-sheet: 80; --hy-z-modal: 90; --hy-z-toast: 100;

  /* ── ١١) الهندسة العامة ───────────────────────────────────────────── */
  --hy-header: 58px; --hy-tabbar: 88px; --hy-maxw:1120px; --hy-tap: 48px;
  --hy-num: tabular-nums lining-nums;
  --hy-font-body: 'Cairo', system-ui, sans-serif;
  --hy-font-display: 'Cairo', system-ui, sans-serif;
  --hy-font-data: 'Cairo', system-ui, sans-serif;
  --hy-font: 'Cairo', system-ui, sans-serif;
}

/* الوضع النهاري: لا كتلة أسماء مكرّرة — كل الأسماء أعلاه var(--k-*)
   و k-tokens.css يقلب قيمها في [data-theme="light"] تلقائيًا. */

/* مرايا الحزمة المعتمدة (compact-system) ⇒ لا نظامان يتصارعان */
:root {
  --ui-bg:var(--k-bg); --ui-surface:var(--k-surface); --ui-raised:var(--k-surface-2);
  --ui-field:var(--k-surface-2); --ui-line:var(--k-line); --ui-control:var(--k-line-strong);
  --ui-text:var(--k-text); --ui-muted:var(--k-text-2);
  --ui-blue:var(--k-accent); --ui-electric:var(--k-accent); --ui-deep:var(--k-accent-press);
  --ui-cta:var(--k-accent);
  --bg:var(--k-bg); --bg-2:var(--k-surface); --card:var(--k-surface); --card-2:var(--k-surface-2);
  --card-3:var(--k-surface-2); --text:var(--k-text); --dim:var(--k-text-2); --dim-2:var(--k-text-3);
  --line:var(--k-line); --line-2:var(--k-line-strong); --brand:var(--k-accent);
  --brand-2:var(--k-accent); --accent:var(--k-accent); --brand-soft:var(--k-surface-2);
  --soft:var(--k-line); --surface:var(--k-surface);
  --ok:var(--k-positive); --ok-soft:var(--k-surface-2);
  --warn:var(--k-accent); --warn-soft:var(--k-accent-soft);
  --danger:var(--k-neg-text); --danger-soft:var(--k-surface-2);
  --appbar-a:var(--k-bg); --appbar-b:var(--k-bg);
  --appbar-shadow:0 1px 0 var(--k-shadow);
  --hero-a:var(--k-accent); --hero-b:var(--k-dark); --hero-c:var(--k-bg);
  --qbar-a:var(--k-bg); --qbar-b:var(--k-bg);
  --qbar-shadow:0 6px 18px var(--k-shadow);
  --menu-a:var(--k-surface-2); --menu-b:var(--k-surface-2); --menu-shadow:0 20px 44px var(--k-shadow);
  --toast:var(--k-surface-2); --scrim:var(--k-scrim);
  --meter-bg:var(--k-line); --hy-pad: var(--hy-s4); --pad: var(--hy-s4);
  --top: var(--hy-header); --qnav: var(--hy-s9);
  --elev-3:0 20px 44px var(--k-line); --on-hero-line:var(--k-surface-2);
}
html[data-theme="light"] {
  --appbar-shadow:var(--k-shadow);
}

/* ── ١٢) الأساس: خلفية حيّة هادئة + طباعة عربية مريحة ─────────────── */
body,
body:not(.auth-mythic) {
  font-family: var(--hy-font-body);
  font-size: var(--hy-fs-body);
  line-height: var(--hy-lh-body);
  font-weight: var(--hy-w-body);
  background:transparent;
  background-attachment: fixed;
  color: var(--hy-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.lite { background: var(--hy-void); }

h1, h2, h3, h4 { line-height: var(--hy-lh-heading); }
h1 { font-size: var(--hy-fs-h1); }
h2 { font-size: var(--hy-fs-h2); }
h3 { font-size: var(--hy-fs-h3); }
p  { line-height: var(--hy-lh-body); }
a  { color: var(--hy-blue-2); }
::selection { background: var(--k-line); color: var(--k-text); }
:focus-visible { outline: 2px solid var(--hy-electric); outline-offset: 2px; border-radius: var(--hy-r-xs); }
.hy2-num, .num, .value { font-variant-numeric: var(--hy-num); }

/* ── ١٣) الشريط العلوي: زجاج معتم + شعراء مضيء + علامة متدرّجة ──────── */
.appbar, .appbar.hy-simple {
  height: calc(var(--hy-header) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--hy-s4) 0;
  background: var(--k-bg);
  border-bottom: 1px solid var(--hy-line);
  box-shadow: 0 1px 0 0 1px 3px var(--k-shadow), 0 8px 24px 0 6px 18px var(--k-shadow);
}
html[data-theme="light"] .appbar,
html[data-theme="light"] .appbar.hy-simple {
  background:var(--k-surface-2);
  box-shadow: 0 1px 0 0 1px 3px var(--k-shadow), 0 8px 22px 0 1px 3px var(--k-shadow);
}
.hy-brand { gap: var(--hy-s3); min-width: 0; }
/* علامة الهوية: أصل الشعار المحفوظ (guardian-brand.webp) على صفيحة زجاجية
   رقيقة — لا نستبدل أصل الهوية بحرف، ونمنحه حدًّا وضوءًا من التوكنات. */
.hy-brand .mark {
  width: 38px; height: 38px; border-radius: var(--hy-r-s);
  background-image: var(--hy-grad-soft), url(../img/guardian-brand.webp);
  background-position: center; background-repeat: no-repeat;
  background-size: 100% 100%, contain;
  color: transparent;
  box-shadow: var(--hy-e1), inset 0 0 0 1px var(--hy-blue-line);
}
.hy-brand .txt b {
  font-family: var(--hy-font-display); font-size: var(--hy-fs-h3);
  font-weight: var(--hy-w-display); letter-spacing: -.01em;
}
.hy-brand .txt small { font-size: var(--hy-fs-caption); color: var(--hy-dim); }
.hy-conn {
  min-height: 32px; padding-inline: var(--hy-s3);
  font-size: var(--hy-fs-micro); font-weight: var(--hy-w-strong);
  border-radius: var(--hy-r-pill);
  background: var(--hy-ok-soft); color: var(--hy-ok);
  border: 1px solid color-mix(in srgb, var(--hy-ok) 30%, transparent);
}
.hy-conn.is-off { background: var(--hy-warn-soft); color: var(--hy-warn); border-color: color-mix(in srgb, var(--hy-warn) 30%, transparent); }
.hy-conn i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }

/* شريط التحميل: خط مضيء متدرّج */
.bar#loadbar { height: 2px; background: transparent; }
.bar#loadbar > i { background: var(--hy-grad); box-shadow: 0 0 12px 0 6px 18px var(--k-shadow); }

/* ── ١٤) الأسطح: البطاقة المميّزة (Slab) ──────────────────────────────
   الحدّ المتدرّج يُرسم بتقنية background-clip المزدوجة: طبقة داخلية بسطح
   البطاقة + طبقة حدودية بتدرّج. النتيجة: حدّ مضيء في الأعلى وذيل شفاف في
   الأسفل — بلا blur وبلا صورة خلفية ثقيلة.                              */
/*
 * سطح البطاقة الافتراضي: داكن صلب. كان التسطيح قد وضع `var(--k-accent)` هنا
 * فصبغ **كل** بطاقة محتوى (بطاقة، صنف، بلاطة، رقم إحصائي) بالليموني — والعطل
 * مقيس: رقم أبيض على ليموني (تباين 1.2) ونص أسود على ليموني في الشبكات.
 * النغمات تُوزَّع في `hy-compat` (أبيض/ليموني/داكن) حسب موقع البطاقة فقط.
 */
.card, .item, .hy-card, .hy2-task, .hy2-approve, .hy2-result-card, .hy2-fold, .hy2-metric,
.hy-tile, .hy-toolcard, .hy-agentcard, .hy2-emp, .hy2-row, .hy-pick, .plancard, .approval-card,
.hy-tm-cell, .hy-kpi div, .stat, .terminal, .panel {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--hy-r-m);
  background:var(--k-surface);
  box-shadow: var(--hy-e2), var(--hy-hair);
  color: var(--hy-text);
}
.card { padding: var(--hy-s4); margin-bottom: var(--hy-s3); }
.item { padding: var(--hy-s4); margin-bottom: var(--hy-s2); }
html[data-theme="light"] .card,
html[data-theme="light"] .item,
html[data-theme="light"] .hy-card { background:var(--k-surface-2); }
.card h3, .hy-card h3 { font-family: var(--hy-font-display); font-size: var(--hy-fs-h3); font-weight: var(--hy-w-strong); }
.card .hint, .item-sub { font-size: var(--hy-fs-caption); color: var(--hy-dim); }
.item-title { font-size: var(--hy-fs-body); font-weight: var(--hy-w-strong); }
/* شريط تمييز رقيق أعلى البطاقة البطلة */
.card.is-feature::before, .hy-card.is-feature::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: var(--hy-s5) 0;
  height: 2px; border-radius: 0 0 2px 2px; background: var(--hy-grad); opacity: .85;
}

/* ── ١٥) الأزرار: أربع درجات + لمعة عند الضغط + تركيز صريح ─────────── */
.btn {
  min-height: var(--hy-tap); padding: var(--hy-s2) var(--hy-s4);
  border-radius: var(--hy-r-s); border: 1px solid var(--hy-line-2);
  background:var(--k-surface);
  color: var(--hy-text); font-family: inherit;
  font-size: var(--hy-fs-label); font-weight: var(--hy-w-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hy-s2);
  box-shadow: var(--hy-e1), var(--hy-hair);
  transition: transform var(--hy-d-instant) var(--hy-e-standard),
              box-shadow var(--hy-d-fast) var(--hy-e-standard),
              background var(--hy-d-fast) var(--hy-e-standard),
              border-color var(--hy-d-fast) var(--hy-e-standard),
              color var(--hy-d-fast) var(--hy-e-standard);
}
html[data-theme="light"] .btn { background:var(--k-surface-2); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: var(--hy-hair); }
.btn:focus-visible { box-shadow: var(--hy-ring); }
.btn-primary {
  background: var(--hy-grad); border-color: transparent; color: var(--k-text);
  box-shadow: var(--hy-e2), var(--hy-hair), 0 6px 20px 0 6px 18px var(--k-shadow);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--hy-sheen); opacity: .5; pointer-events: none;
}
.btn-primary { position: relative; overflow: hidden; }
.btn-lg { min-height: 52px; font-size: var(--hy-fs-body); border-radius: var(--hy-r-m); }
.btn-sm { min-height: 44px; padding: 9px 13px; font-size: var(--hy-fs-label); }
.btn-ghost { background: transparent; border-color: var(--hy-line-2); color: var(--hy-blue-2); box-shadow: none; }
.btn-danger { background: var(--hy-danger-soft); border-color: color-mix(in srgb, var(--hy-danger) 34%, transparent); color: var(--hy-danger); box-shadow: none; }
.btn-ok { background: var(--hy-ok-soft); border-color: color-mix(in srgb, var(--hy-ok) 34%, transparent); color: var(--hy-ok); box-shadow: none; }
.btn[disabled], .btn:disabled { opacity: .45; box-shadow: none; transform: none; }
.icon-btn { min-width: var(--hy-tap); min-height: var(--hy-tap); border-radius: var(--hy-r-s); }
.btn svg, .icon-btn svg { flex: 0 0 auto; }

/* ── ١٦) الحقول: سطح داكن أعمق + تركيز مضيء + حالة خطأ ─────────────── */
.input, textarea, select, .hy-search, .directory-search {
  font-family: inherit; font-size: var(--hy-fs-body);
  min-height: var(--hy-tap); border-radius: var(--hy-r-s);
  padding: var(--hy-s3) var(--hy-s4);
  background: color-mix(in srgb, var(--hy-void) 78%, var(--hy-ink));
  border: 1px solid var(--hy-line-2); color: var(--hy-text);
  transition: border-color var(--hy-d-fast) var(--hy-e-standard), box-shadow var(--hy-d-fast) var(--hy-e-standard);
}
html[data-theme="light"] .input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: var(--k-accent-soft); }
.input:focus, textarea:focus, select:focus { border-color: var(--hy-electric); box-shadow: var(--hy-ring); outline: 0; }
.input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: var(--hy-danger); box-shadow: 0 0 0 3px var(--hy-danger-soft); }
.input::placeholder, textarea::placeholder { color: var(--hy-dim-3); }
textarea { line-height: var(--hy-lh-body); }
.field { margin-bottom: var(--hy-s3); }
.field label { font-size: var(--hy-fs-label); font-weight: var(--hy-w-strong); color: var(--hy-dim); }
.field .note, .field-error { font-size: var(--hy-fs-caption); }
.field-error { color: var(--hy-danger); }

/* ── ١٧) الشرائح والمقاطع: كبسولة + حشوة مضيئة للنشط ────────────────── */
.chip, .badge, .tag, .hy-tag {
  border-radius: var(--hy-r-pill); font-size: var(--hy-fs-micro);
  font-weight: var(--hy-w-strong); line-height: 1.6;
}
.chip { min-height: 30px; padding: 3px var(--hy-s3); background: var(--k-line); border: 1px solid var(--hy-line); color: var(--hy-dim); }
html[data-theme="light"] .chip { background: var(--k-line); }
.chip.brand, .hy-tag.brand { color: var(--hy-blue-2); border-color: var(--hy-blue-line); background: var(--hy-blue-soft); }
.chip.ok { color: var(--hy-ok); border-color: color-mix(in srgb, var(--hy-ok) 32%, transparent); background: var(--hy-ok-soft); }
.chip.warn { color: var(--hy-warn); border-color: color-mix(in srgb, var(--hy-warn) 32%, transparent); background: var(--hy-warn-soft); }
.chip.danger { color: var(--hy-danger); border-color: color-mix(in srgb, var(--hy-danger) 32%, transparent); background: var(--hy-danger-soft); }
.badge { font-size: var(--hy-fs-micro); font-weight: var(--hy-w-display); }
.hy-seg { border-radius: var(--hy-r-m); padding: var(--hy-s1); gap: var(--hy-s1); background: var(--hy-ink-3); border: 1px solid var(--hy-line); }
.hy-seg button { border-radius: var(--hy-r-xs); min-height: 42px; font-size: var(--hy-fs-label); font-weight: var(--hy-w-strong); color: var(--hy-dim); }
.hy-seg button.on { background: var(--hy-grad); color: var(--k-text); box-shadow: var(--hy-e1); }
.hy-chip { min-height: 36px; border-radius: var(--hy-r-pill); font-size: var(--hy-fs-label); border: 1px solid var(--hy-line-2); background: var(--hy-ink-2); color: var(--hy-dim); }
.hy-chip.on { background: var(--hy-blue-soft); border-color: var(--hy-blue-line); color: var(--hy-blue-2); }
.hy-tab { min-height: 38px; font-size: var(--hy-fs-label); }
.tabs button, .tabs a, .tab { font-size: var(--hy-fs-label); min-height: 42px; border-radius: var(--hy-r-xs); }
.tabs .on, .tab.on { background: var(--hy-blue-soft); color: var(--hy-blue-2); box-shadow: inset 0 0 0 1px var(--hy-blue-line); }

/* ── ١٨) عناوين الأقسام: سطر أفقّي متلاشٍ ──────────────────────────── */
.section-title { margin: var(--hy-s6) 2px var(--hy-s3); gap: var(--hy-s3); }
.section-title h2 { font-family: var(--hy-font-display); font-size: var(--hy-fs-h2); font-weight: var(--hy-w-display); }
.section-title .line { height: 1px; background:transparent; }
.section-title .count { font-size: var(--hy-fs-caption); color: var(--hy-dim); font-variant-numeric: var(--hy-num); }
.hy-sec { margin: var(--hy-s5) 2px var(--hy-s3); }
.hy-sec h3 { font-size: var(--hy-fs-h3); }

/* ── ١٩) البطل (Hero): أهم سطح في المنتج ──────────────────────────
   عمق بثلاث طبقات ضوء + قوس مائي + حدّ مضيء. الظلّ ناعم وواسع (e3) لأنه
   يُقرأ كـ«بطاقة رفع» لا كخط. */
.hy2-hero, .hero, .hy-head {
  position: relative; overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--hy-r-xl);
  background:var(--k-accent);
  box-shadow: var(--hy-e3), var(--hy-hair);
}
.hy2-hero { padding: var(--hy-s5); margin-bottom: var(--hy-s4); }
/*
 * طبقة زخرفية قديمة كانت تُغطّي الهيرو بلمسة متدرّجة؛ بعد إزالة التدرّجات
 * (لا gradient() في التصميم الجديد) صارت البلوك الداكن يغطّي الليموني بالكامل:
 * نصٌّ أسود على #282828 = تباين 1.3، والعطل غير مرئي لفحص التراكب لأن الطبقة
 * pointer-events:none. الحذف هو التصميم الصحيح: الهيرو مسطّح ليموني.
 */
.hy2-hero::before, .hy-head::before { content: none; display: none; }
html[data-theme="light"] .hy2-hero,
html[data-theme="light"] .hy-head { background:var(--k-surface-2); }
.hy2-hero > *, .hy-head > * { position: relative; z-index: 1; }
.hy2-hero .hy2-hero-eyebrow {
  font-size: var(--hy-fs-micro); font-weight: var(--hy-w-strong);
  color: var(--hy-blue-2); letter-spacing: .06em; text-transform: uppercase;
}
.hy2-hero .hy2-hero-title { font-family: var(--hy-font-display); font-size: var(--hy-fs-h1); font-weight: var(--hy-w-display); line-height: var(--hy-lh-tight); margin: var(--hy-s2) 0; }
.hy2-hero .hy2-hero-sub { font-size: var(--hy-fs-body-l); color: var(--hy-dim); max-width: 36ch; }
.hy2-hero .hy2-hero-foot { display: flex; align-items: center; gap: var(--hy-s3); margin-top: var(--hy-s5); flex-wrap: wrap; }
.hy-head { position: relative; padding: var(--hy-s5); margin-bottom: var(--hy-s4); }
.hy-head h2 { font-size: var(--hy-fs-h1); line-height: var(--hy-lh-tight); }
.hy-head p { font-size: var(--hy-fs-label); color: var(--hy-dim); max-width: 54ch; }
.hy-head::after {
  content: ''; position: absolute; inset-block-start: -18%; inset-inline-start: -6%;
  width: 44%; height: 136%; pointer-events: none; opacity: .10;
  background: url(../img/guardian-brand.webp) center/contain no-repeat;
}

/* ── ٢٠) شريط الفريق (Rail) + الصور الرمزية ─────────────────────── */
.hy2-rail { display: flex; gap: var(--hy-s3); overflow-x: auto; padding: var(--hy-s2) 2px var(--hy-s3); scroll-snap-type: x proximity; scrollbar-width: none; }
.hy2-rail::-webkit-scrollbar { display: none; }
/*
 * عطل مُصلَح (مقيس في المتصفح على الرئيسية الحقيقية، 2026-10-02):
 *   بطاقة الموظف في شريط الفريق هي عنصر <button> بلا قاعدة خلفية — فكانت
 *   تأخذ لون المتصفح الافتراضي للأزرار: **var(--k-line) رماديٌّ محايد**
 *   خلف كل موظف من السبعة (كل الفريق). القياس: 7 أزرار بخلفية رمادية.
 *   الآن للبطاقة سطح شفاف صريح + نغمة ضغط من التوكنات (لا رمادي في أي حالة).
 */
.hy2-rail-item {
  scroll-snap-align: start; padding: var(--hy-s2) var(--hy-s1);
  border-radius: var(--hy-r-m);
  background: transparent; border: 1px solid transparent;
  color: inherit; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--hy-d-fast) var(--hy-e-standard), border-color var(--hy-d-fast) var(--hy-e-standard);
}
.hy2-rail-item:active { background: var(--hy-blue-soft); border-color: var(--hy-blue-line); }
@media (hover: hover) { .hy2-rail-item:hover { background: var(--hy-grad-soft); border-color: var(--hy-blue-line); } }
.hy2-rail-item b { font-size: var(--hy-fs-caption); font-weight: var(--hy-w-strong); }
.hy2-rail-item small { font-size: var(--hy-fs-micro); color: var(--hy-dim-3); }
.hy2-av {
  box-shadow: 0 0 0 1px 0 1px 3px var(--k-shadow), var(--hy-e2);
  border: 0;
  background:var(--k-surface);
}
.hy2-av.hy2-av-me { background: var(--hy-grad); }

/* ── ٢١) البطاقات الإحصائية والأرقام الكبيرة ─────────────────────── */
.stat, .hy2-metric, .hy-kpi div {
  padding: var(--hy-s4); border-radius: var(--hy-r-m);
  display: flex; flex-direction: column; gap: 2px;
}
.stat .ic, .hy2-metric .ic { color: var(--hy-blue-2); margin-bottom: var(--hy-s1); }
.stat .label, .hy2-metric span { font-size: var(--hy-fs-caption); color: var(--hy-dim); }
.stat .value, .stat .num, .hy2-stat .value, .hy2-metric b {
  font-family: var(--hy-font-display); font-weight: var(--hy-w-display);
  font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em;
  font-variant-numeric: var(--hy-num); color: var(--hy-text);
}
.stat .sub { font-size: var(--hy-fs-micro); color: var(--hy-dim-3); }
.stat.wide { grid-column: span 2; }
.stat-grid, .grid2, .hy2-metrics { display: grid; gap: var(--hy-s3); }
.stat-grid, .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hy2-metrics { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.meter, .stat .meter { height: 6px; border-radius: var(--hy-r-pill); background: var(--hy-ink-3); overflow: hidden; margin-top: var(--hy-s2); }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--hy-grad); box-shadow: 0 0 10px 0 6px 18px var(--k-shadow); transition: width var(--hy-d-slow) var(--hy-e-standard); }
.meter.is-ok > i, .hy2-meter.is-ok > i { background:var(--k-surface-2); box-shadow: none; }
.meter.is-warn > i, .hy2-meter.is-warn > i { background:var(--k-accent-soft); box-shadow: none; }
.meter.is-danger > i, .hy2-meter.is-danger > i { background:var(--k-surface); box-shadow: none; }
.hy2-meter { height: 6px; border-radius: var(--hy-r-pill); background: var(--hy-ink-3); overflow: hidden; }
.hy2-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--hy-grad); transition: width var(--hy-d-slow) var(--hy-e-standard); }

/* ── ٢٢) البلاطات (Tiles): شبكة الإجراءات السريعة ──────────────── */
.tiles, .hy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hy-s3); }
.tile, .hy-tile {
  min-height: 112px; padding: var(--hy-s4); gap: var(--hy-s2);
  border-radius: var(--hy-r-m); text-align: start;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  color: var(--hy-text); font-family: inherit; cursor: pointer;
  transition: transform var(--hy-d-fast) var(--hy-e-standard), box-shadow var(--hy-d-fast) var(--hy-e-standard), border-color var(--hy-d-fast);
}
.tile:active, .hy-tile:active { transform: scale(.98); }
.tile .ic, .hy-tile .ic, .hy-tile .ico {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--hy-r-xs); color: var(--hy-blue-2);
  background: var(--hy-grad-soft); box-shadow: inset 0 0 0 1px var(--hy-blue-line);
}
.tile b, .tile.wide b { font-size: var(--hy-fs-body); font-weight: var(--hy-w-strong); line-height: 1.45; }
.tile small, .tile .owner { font-size: var(--hy-fs-caption); color: var(--hy-dim-3); }
.tile.wide { flex-direction: row; align-items: center; grid-column: span 2; min-height: 76px; }
.tile .grow { display: flex; flex-direction: column; }
@media (min-width: 720px) { .tiles, .hy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── ٢٣) بطاقة الوكيل/الموظف: هوية بصرية واضحة ──────────────────── */
.hy2-emp, .hy-agent, .hy-agentcard, .hy-emp { padding: var(--hy-s4); gap: var(--hy-s4); }
.hy2-emp .hy2-emp-name, .hy-agent .who b { font-family: var(--hy-font-display); font-size: var(--hy-fs-h3); font-weight: var(--hy-w-display); }
.hy2-emp .hy2-emp-role, .hy-agent .who small { font-size: var(--hy-fs-caption); color: var(--hy-dim-3); }
.hy2-emp.is-working { border-color: transparent; background:var(--k-accent); }
.hy2-emp.is-awaiting { background: var(--k-accent-soft); color: var(--k-on-accent); }
.hy-agent .avatar { width: 48px; height: 48px; border-radius: var(--hy-r-m); background: var(--hy-grad-soft); color: var(--hy-blue-2); display: grid; place-items: center; flex: 0 0 auto; }

/* ── ٢٤) الصفوف والكشوف (Lists · Rows · Tables) ─────────────────── */
.hy2-row, .hy-tool, .menu-body a {
  min-height: 58px; padding: var(--hy-s3) var(--hy-s4);
  display: flex; align-items: center; gap: var(--hy-s3);
  border-radius: var(--hy-r-m); width: 100%; text-align: start;
  font-family: inherit; font-size: var(--hy-fs-body); color: var(--hy-text);
  transition: transform var(--hy-d-fast) var(--hy-e-standard), border-color var(--hy-d-fast);
}
.hy2-row:active, .hy-tool:active { transform: scale(.99); }
.hy2-row b { font-weight: var(--hy-w-strong); }
.hy2-row small { font-size: var(--hy-fs-caption); color: var(--hy-dim-3); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--hy-fs-label); }
.data-table th {
  text-align: start; font-size: var(--hy-fs-caption); font-weight: var(--hy-w-strong);
  color: var(--hy-dim); padding: var(--hy-s3); position: sticky; inset-block-start: 0;
  background: var(--hy-ink-2); border-bottom: 1px solid var(--hy-line-2);
}
.data-table td { padding: var(--hy-s3); border-bottom: 1px solid var(--hy-line); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--hy-ink-2) 55%, transparent); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--hy-s2) var(--hy-s3); font-size: var(--hy-fs-label); }
.kv small { font-size: var(--hy-fs-micro); color: var(--hy-dim-3); }

/* ── ٢٥) الشات: فقاعات هوية + محرّر مرتفع ──────────────────────── */
.chat-list .msg .bubble, .hy2-msg .hy2-bubble {
  padding: var(--hy-s3) var(--hy-s4); border-radius: var(--hy-r-m);
  font-size: var(--hy-fs-body); line-height: var(--hy-lh-body);
  border: 1px solid var(--hy-line);
  background:var(--k-surface);
  color: var(--hy-text); box-shadow: var(--hy-e1);
}
.chat-list .msg.user .bubble, .hy2-msg.me .hy2-bubble {
  background: var(--hy-grad); color: var(--k-text); border-color: transparent;
  box-shadow: var(--hy-e2), var(--hy-hair);
}
.hy2-msg .hy2-msg-who, .chat-list .msg-meta, .hy2-msg .ai-meta { font-size: var(--hy-fs-micro); color: var(--hy-dim-3); }
.composer, .chat-composer, .hy-compose, .hy2-composer, .composer-chat {
  border: 1px solid var(--hy-line-2); border-radius: var(--hy-r-l);
  background:var(--k-surface);
  box-shadow: var(--hy-e3); padding: var(--hy-s2); gap: var(--hy-s2);
}
.composer textarea, .chat-composer textarea { font-size: var(--hy-fs-body); border-radius: var(--hy-r-m); }
.sendbtn, .composer .send, .hy2-composer .hy2-send {
  border-radius: var(--hy-r-s); background: var(--hy-grad); color: var(--k-text);
  border-color: transparent; box-shadow: var(--hy-e2);
}
.attachbtn { border-radius: var(--hy-r-s); background: var(--hy-ink-3); border: 1px solid var(--hy-line-2); color: var(--hy-dim); }
.hy-smart-b {
  min-height: 44px; padding: var(--hy-s2) var(--hy-s3);
  border-radius: var(--hy-r-pill); border: 1px solid var(--hy-line-2);
  background: var(--hy-ink-2); color: var(--hy-blue-2); font-size: var(--hy-fs-label);
}
.hy-smart-b:active { transform: scale(.97); }

/* ── ٢٦) الحالات: فراغ · خطأ · نجاح · هياكل عظمية ────────────────── */
.hy2-state, .empty, .hy-state { text-align: center; padding: var(--hy-s8) var(--hy-s5); }
.hy2-state .hy2-state-art, .empty .icon, .hy-state .ic {
  border: 1px solid var(--hy-line-2); border-radius: var(--hy-r-xl);
  background:var(--k-surface); box-shadow: var(--hy-e2);
  display: grid; place-items: center;
}
.hy2-state h3, .empty h3 { font-family: var(--hy-font-display); font-size: var(--hy-fs-h3); font-weight: var(--hy-w-display); }
.hy2-state p, .empty p { font-size: var(--hy-fs-label); color: var(--hy-dim); max-width: 32ch; margin-inline: auto; }
.hy2-state.is-error .hy2-state-art { border-color: color-mix(in srgb, var(--hy-danger) 34%, transparent); background:var(--k-surface); }
.hy2-state.is-ok .hy2-state-art { border-color: color-mix(in srgb, var(--hy-ok) 34%, transparent); background:var(--k-surface); }
.hy2-skel, .skeleton { background:var(--k-surface); background-size: 240% 100%; border-radius: var(--hy-r-s); }
.banner, .hy2-offline-bar, .hy-note {
  padding: var(--hy-s3) var(--hy-s4); border-radius: var(--hy-r-m);
  font-size: var(--hy-fs-label); font-weight: var(--hy-w-strong);
  background: var(--hy-info-soft); color: var(--hy-info);
  border: 1px solid color-mix(in srgb, var(--hy-info) 30%, transparent);
}
.banner.warn, .hy2-offline-bar { background: var(--hy-warn-soft); color: var(--hy-warn); border-color: color-mix(in srgb, var(--hy-warn) 30%, transparent); }
.banner.danger { background: var(--hy-danger-soft); color: var(--hy-danger); border-color: color-mix(in srgb, var(--hy-danger) 30%, transparent); }
.banner.ok { background: var(--hy-ok-soft); color: var(--hy-ok); border-color: color-mix(in srgb, var(--hy-ok) 30%, transparent); }

/* ── ٢٧) دليل الأدوات: صفوف مستقلة + مجموعة بحدّ مضيء ───────────── */
.directory-group {
  border: 1px solid transparent; border-radius: var(--hy-r-m); overflow: hidden; margin-bottom: var(--hy-s2);
  background:var(--k-accent);
  box-shadow: var(--hy-e1);
}
.directory-group summary { min-height: 56px; padding: var(--hy-s3) var(--hy-s4); font-size: var(--hy-fs-body); font-weight: var(--hy-w-strong); gap: var(--hy-s3); }
.directory-group summary b { font-size: var(--hy-fs-micro); background: var(--hy-blue-soft); color: var(--hy-blue-2); border-radius: var(--hy-r-pill); padding: 2px var(--hy-s2); }
.directory-group[open] summary { border-bottom: 1px solid var(--hy-line); background: var(--hy-grad-soft); }
.directory-tool { min-height: 60px; border-bottom: 1px solid var(--hy-line); gap: var(--hy-s3); }
.directory-tool b { font-size: var(--hy-fs-label); }
.directory-tool small { font-size: var(--hy-fs-micro); color: var(--hy-dim-3); }
.directory-tool-icon { width: 34px; height: 34px; border-radius: var(--hy-r-xs); background: var(--hy-grad-soft); color: var(--hy-blue-2); box-shadow: inset 0 0 0 1px var(--hy-blue-line); }
.directory-search, .hy-search { border-radius: var(--hy-r-pill); background: color-mix(in srgb, var(--hy-void) 80%, var(--hy-ink-2)); padding-inline: var(--hy-s4); gap: var(--hy-s2); }
.hy-search input { min-height: 46px; font-size: var(--hy-fs-body); }

/* ── ٢٨) النوافذ والشرائح السفلية والتنبيهات ────────────────────── */
.modal, .sheet, .modal-card, .hy-sheet {
  border: 1px solid var(--hy-line-2); border-bottom: 0;
  border-radius: var(--hy-r-2xl) var(--hy-r-2xl) 0 0;
  background:var(--k-surface);
  box-shadow: var(--hy-e4); padding: var(--hy-s5);
}
.modal h2, .modal h3, .sheet h2, .sheet-head { font-family: var(--hy-font-display); font-size: var(--hy-fs-h2); font-weight: var(--hy-w-display); }
.modal .lead, .sheet .lead { font-size: var(--hy-fs-label); color: var(--hy-dim); }
.modal-header, .modal-head { border-bottom: 1px solid var(--hy-line); padding-bottom: var(--hy-s3); margin-bottom: var(--hy-s4); }
.modal-scrim, .sheet-scrim { background: var(--scrim); }
.grab, .sheet-grab { width: 44px; height: 4px; border-radius: var(--hy-r-pill); background: var(--hy-line-2); margin: 0 auto var(--hy-s4); }
.toast {
  border-radius: var(--hy-r-m); border: 1px solid var(--hy-line-2);
  background:var(--k-surface);
  color: var(--hy-text); font-size: var(--hy-fs-label); font-weight: var(--hy-w-strong);
  box-shadow: var(--hy-e3), var(--hy-hair);
}
.toast.ok { border-color: color-mix(in srgb, var(--hy-ok) 34%, transparent); }
.toast.err, .toast.error { border-color: color-mix(in srgb, var(--hy-danger) 40%, transparent); }

/* ── ٢٩) التنقل السفلي: رصيف عائم + كبسولة مضيئة ─────────────────
   الحركة كلها محسوبة في JS (transform من قياس المستطيلات) — لا نلمس الهندسة،
   نلمس المظهر فقط: ارتفاع · سطح · حدّ علوي · ظلّ رفع · كبسولة بتوهّج. */
.tabbar {
  height: calc(var(--hy-tabbar) + env(safe-area-inset-bottom, 0px));
  padding: var(--hy-s1) var(--hy-s2) env(safe-area-inset-bottom, 0px);
  background: var(--k-nav-bg);
  border-top: 1px solid var(--hy-line-2);
  box-shadow: 0 -1px 0 0 1px 3px var(--k-shadow), 0 -14px 34px 0 6px 18px var(--k-shadow);
}
html[data-theme="light"] .tabbar { background:var(--k-surface-2); box-shadow: 0 -1px 0 0 1px 3px var(--k-shadow), 0 -12px 30px 0 1px 3px var(--k-shadow); }
.tabbar a {
  min-height: var(--hy-tap); gap: 2px; border-radius: var(--hy-r-xs);
  font-size: var(--hy-fs-micro); font-weight: var(--hy-w-strong); color: var(--hy-dim-3);
}
.tabbar a.on { color: var(--hy-blue-2); }
.tabbar a.tab-hero.on svg { filter: drop-shadow(0 0 8px none); }
.tabbar .tab-ind, .tabbar .hy2-ind {
  left: 0; border-radius: var(--hy-r-s);
  background:transparent;
  border: 1px solid var(--hy-blue-line);
  box-shadow: 0 6px 18px 0 6px 18px var(--k-shadow), var(--hy-hair);
}
.tabbar .badge { background: var(--hy-danger); color: var(--k-text); box-shadow: 0 0 0 2px var(--hy-void); }

/* ── ٣٠) لمسات ختامية: تفاصيل تصنع الفرق ────────────────────────── */
.hy2-divider, hr { border: 0; height: 1px; background:transparent; margin: var(--hy-s4) 0; }
.hy2-statusbar { border-radius: var(--hy-r-pill); background: var(--hy-ink-2); border: 1px solid var(--hy-line); padding: 10px var(--hy-s4); }
.hy2-fold > summary { min-height: 56px; font-size: var(--hy-fs-body); }
.hy2-chip-btn { min-height: 44px; border-radius: var(--hy-r-pill); background: var(--hy-ink-2); border: 1px solid var(--hy-line-2); }
.hy2-chip-btn.is-on { background: var(--hy-blue-soft); border-color: var(--hy-blue-line); color: var(--hy-blue-2); }
.ai-badge, .hy2-msg .ai-badge { border-radius: var(--hy-r-xs); background: var(--hy-grad-soft); color: var(--hy-blue-2); box-shadow: inset 0 0 0 1px var(--hy-blue-line); }
.statusstrip, .hy2-statusbar b { font-variant-numeric: var(--hy-num); }
code, pre, .mono { font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace; font-size: var(--hy-fs-caption); }
pre { background: color-mix(in srgb, var(--hy-void) 80%, var(--hy-ink)); border: 1px solid var(--hy-line); border-radius: var(--hy-r-s); padding: var(--hy-s3); overflow-x: auto; }

/* ── ٣١) الحركة: دخول متتابع خفيف (بلا إبطاء) ──────────────────── */
@keyframes hy-rc1-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#view.hy-enter > * { animation: hy-view-enter var(--hy-d) var(--hy-e-enter) both; }
#view.hy-enter > *:nth-child(2) { animation-delay: 30ms; }
#view.hy-enter > *:nth-child(3) { animation-delay: 60ms; }
#view.hy-enter > *:nth-child(4) { animation-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .btn, .tile, .hy-tile, .hy2-row, .hy2-emp, .hy2-card { transition: none !important; }
  #view.hy-enter > * { animation: none !important; }
  .meter > i, .hy2-meter > i { transition: none !important; }
}
body.lite .card, body.lite .item, body.lite .hy2-hero, body.lite .hy-head,
body.lite .tabbar, body.lite .hy-tile, body.lite .composer, body.lite .toast { box-shadow: none; }
body.lite .btn-primary, body.lite .sendbtn { box-shadow: none; }
html[data-motion="off"] #view.hy-enter > * { animation: none !important; }

/* ── ٣٢) الشاشات الضيقة والعريضة ────────────────────────────────── */
@media (max-width: 380px) {
  :root { --hy-fs-h1: 1.375rem; --hy-fs-display: 1.75rem; --hy-s4: 14px; --hy-s5: 18px; }
  .hy2-hero { padding: var(--hy-s4); }
  .tiles, .hy-grid { gap: var(--hy-s2); }
  .stat .value, .hy2-metric b { font-size: 1.5rem; }
}
@media (min-width: 768px) {
  .app-main { padding: var(--hy-s5) var(--hy-s6) calc(var(--hy-tabbar) + var(--hy-s9)); }
  .hy2-hero { padding: var(--hy-s6); }
  .hy2-hero .hy2-hero-title { font-size: 1.75rem; }
  .appbar.hy-simple { padding-inline: var(--hy-s6); }
}
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--hy-line-3); }
  .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
  .tile:hover, .hy-tile:hover, .hy2-row:hover, .hy2-emp:hover { border-color: transparent; box-shadow: var(--hy-e3), var(--hy-hair); }
  .hy2-row:hover, .hy-tool:hover { background:var(--k-accent); }
}

/* ── ٣٣) شريط الدرجة (الفحص الأمني وأمثاله) ───────────────────────
   كان الماركب يكتب المقاس واللون والاستدارة والهامش inline بخمس قيم
   صلبة. الآن الكلاس يمتلك الشكل، والقيمة وحدها تُمرَّر كنسبة.            */
.score-meter {
  height: var(--hy-s2);
  margin: var(--hy-s3) 0 var(--hy-s4);
  border-radius: var(--hy-r-pill);
  background: var(--hy-ink-3);
  overflow: hidden;
}
.score-meter > i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--hy-grad);
  transition: width var(--hy-d-slow) var(--hy-e-standard);
}
@media (prefers-reduced-motion: reduce) { .score-meter > i { transition: none; } }

/* ── ٣٤) أيقونة الثيم (بديل الإيموجي) ───────────────────────────
   كان زر تبديل الوضع يعرض رمزي القمر/الشمس التعبيريين — إيموجي بأسلوب نظام مختلف عن مجموعة
   الأيقونات الواحدة. هنا شكلان من نفس المجموعة (خط 1.8 · viewBox 24). */
.hy-theme-ico svg { width: var(--ic-action); height: var(--ic-action); flex: 0 0 auto; }
.hy-theme-ico svg * { stroke-width: var(--ic-sw-action); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  أرضية القراءة (Reading Floor) — لا نص معروض أصغر من 12px
 * ═══════════════════════════════════════════════════════════════════════════
 *  القياس الحيّ على `/more` وجد **15 عنصرًا** بحجم 10.5–11.5px من الطبقات
 *  القديمة (`app.css` · `compact-system.css`) — لا من هذه الطبقة. والسبب
 *  أن هذه المقاسات مكتوبة في قواعد أخصّ (`hy-sec .hint`) أو بـ`!important`
 *  (`‎.hy-note` · `.hy-head-line`) فلا يكفي اسم الصنف وحده للتغلب عليها.
 *
 *  لذلك هنا — وفي هذا الموضع وحده — نستخدم `!important` بحصرٍ صريح: القائمة
 *  أدناه هي **كل** محددات الطبقات القديمة التي تكتب نصًّا أصغر من 12px
 *  (مستخرجة بالمسح لا بالتخمين). وكلها تُرفع إلى التوكن --hy-fs-micro (12px)
 *  وإلى لون --hy-dim (مزرقّ) بدل الرمادي القديم.
 *
 *  وقاعدة ملزمة بعد اليوم: أي نص جديد لا يعرّف مقاسًا يقل عن --hy-fs-micro.
 * ═══════════════════════════════════════════════════════════════════════════ */
.appbar-title p,
.menu-head small, .menu-body .group-title, .menu-ver,
.hero .stats .h span, .pulse, .strip .s span, .section-title .count,
.tile small, .stat .label, .stat .sub, .badge, .chip,
.field .note, .switch small, .thumb .lock, .notif .grow time,
.legend, .ai-meta, .ai-dot, .chat-list .ai-meta, .toolrow-more,
.modedesc, .modedesc b, .argk, .statusstrip .ss-tx small, .count,
.label, .sub, .hint, .note, .owner, .h span, .s span, .meters div, .lock,
.att-link, .att-note, .att-strip-head span, .attc-st, .attc-tx b, .attc-tx small,
.attdoc-go, .attdoc-tx small, .attold > summary, .btn-xs, .grow time, .kv small,
.hy-act-row small, .hy-ctx-tx em, .hy-ctx-tx small, .hy-emp-meta span, .hy-emp-sub,
.hy-emp-top small, .hy-form label, .hy-instr small, .hy-kpi small, .hy-note,
.hy-notes, .hy-pick small, .hy-pick-act, .hy-role small, .hy-skill small,
.hy-task small, .hy-task-live b, .hy-tile small, .hy-tm-cell span, .hy-tool small,
.hy-who-tx small, .hy-wiz-step, .hy-sec .hint, .hy-card .hint, .hy-head-line,
.hy-tile .owner, .directory-result-meta, .hy2-micro,
.hy2-caption, .hy2-rail-item small, .hy2-metric span, .hy2-state p {
  font-size: var(--hy-fs-micro);
  line-height: 1.7;
}
/* التلميحات تُقرأ بلون ثانوي لا رمادي باهت */
.hint, .note, .hy-note, .hy-sec .hint, .hy-head-line, .modedesc,
.directory-result-meta, .item-sub, .stat .sub {
  color: var(--hy-dim);
}
/*
 * أرضية القراءة بلا !important: كل المقاسات أدناه ≥12px من التوكنات نفسها،
 * وألوان النصوص تُورَّث من نغمة البطاقة (انظر hy-compat، إيقاع النغمات).
 */

/* ── ٣٥) مكوّنات قيل إنها "مُصمَّمة" وهي بلا قاعدة (مسح آلي) ───────
   مسح كل أصناف الماركب (459 صنفًا) مقابل قواعد CSS أعطى **10 أصناف بلا
   أي قاعدة** — أي عناصر تأخذ شكل المتصفح الافتراضي. أهمّها أزرار مقاطع
   المجتمع `.cm-seg-btn`: القياس الحيّ أعطى 3 أزرار بخلفية المتصفح الرمادية
   (var(--k-line)) داخل شريط التبويبات. هنا تُعطى شكلاً من النظام. */
.cm-seg {
  display: flex; gap: var(--hy-s1); padding: var(--hy-s1);
  border-radius: var(--hy-r-m); background: var(--hy-ink-3);
  border: 1px solid var(--hy-line); overflow-x: auto; scrollbar-width: none;
}
.cm-seg::-webkit-scrollbar { display: none; }
.cm-seg-btn {
  min-height: 42px; padding: var(--hy-s2) var(--hy-s3);
  border: 0; border-radius: var(--hy-r-xs); background: transparent;
  color: var(--hy-dim); font-family: inherit; font-size: var(--hy-fs-label);
  font-weight: var(--hy-w-strong); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--hy-d-fast) var(--hy-e-standard), color var(--hy-d-fast) var(--hy-e-standard);
}
.cm-seg-btn.on { background: var(--hy-grad); color: var(--k-text); box-shadow: var(--hy-e1); }
.cm-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hy-s3); }
.cm-brand { font-family: var(--hy-font-display); font-weight: var(--hy-w-display); }
@media (max-width: 380px) { .cm-2col { grid-template-columns: 1fr; } }

/* شبكة أمان (مقصودة وضيقة): أي <button> بلا صنف داخل المحتوى يأخذ سطح
   التطبيق لا لون المتصفح الرمادي — بلا أن تُمَسّ الأزرار المصمَّمة. */
#view button:not([class]) {
  background: transparent; border: 1px solid var(--hy-line-2);
  border-radius: var(--hy-r-s); color: inherit; font: inherit; min-height: var(--hy-tap);
}

/* أدوات تخطيط عامة كانت مستعملة بلا تعريف (.tap · .row · .grid) */
.row { display: flex; align-items: center; gap: var(--hy-s3); }
.grid { display: grid; gap: var(--hy-s3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  ٣٦) شاشة المحادثة (هيمنة) — تخطيط ثابت يملأ الشاشة
 * ═══════════════════════════════════════════════════════════════════════════
 *  العطل المقيس (لقطات 360–440px): المرسى (صندوق الكتابة) كان `position:
 *  sticky; bottom: 0;` داخل صفحة تُمرَّر كاملة — فيقع في منتصف الشاشة فوق
 *  فراغ كبير عند قصر المحتوى، والتمرير للصفحة كلها (وليس للرسائل وحده).
 *
 *  التخطيط الآن: عمود واحد بارتفاع المساحة بين الشريط العلوي وشريط التنقل:
 *    [ شريط حالة رفيع 40px (يظهر عند الحاجة فقط) ]   ← flex: 0 0 auto
 *    [ شريط الرسائل = **التمرير الوحيد** في الشاشة ]  ← flex: 1 1 auto
 *    [ المرسى: صف الوكيل + صف الكتابة               ]  ← flex: 0 0 auto
 *  الارتفاع يُحسب من مساحة العرض المتغيّرة (dvh غير مطروحة كـheight لأن
 *  الشريطين العلوي والسفلي لهما ارتفاع محسوب) — فالطرح أدق من الطرح الذهني.
 *  لوحة المفاتيح: ارتفاعها يُقاس في JS عبر visualViewport ويوضع في --chat-kb
 *  (نفس أسلوب مشهد الدخول المعتمد) فلا يختفي حقل الكتابة خلفها.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --hy-view-pt: 56px;               /* هامش المدخل العلوي المعتمد في الطبقة الأصلية */
  --hy-chrome-top: calc(var(--hy-view-pt) + env(safe-area-inset-top, 0px) + var(--hy-s4));
  --hy-chat-bottom: calc(var(--hy-tabbar) + env(safe-area-inset-bottom, 0px) + var(--hy-s3));
  --hy-chat-gap: var(--hy-s3);      /* 12px بين الفقرات */
  --hy-bubble-r: var(--hy-r-l);     /* 20px */
  --hy-bubble-tail: var(--hy-s2);   /* 8px لزاوية الذيل */
  --hy-bubble-max: 85%;
}

/* المساحة كلها للنص المثبّت ⇒ حشوة #view السفلية تصير مساحة مهدورة */
.app-main:has(> .chat-screen) { padding-bottom: 0; }

.chat-screen {
  position: fixed;
  inset-block-start: var(--hy-chrome-top);
  inset-block-end: calc(var(--chat-kb, 0px) + var(--hy-chat-bottom));
  inset-inline: 0;
  width: 100%; max-width: var(--hy-maxw); margin-inline: auto;
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
  z-index: calc(var(--hy-z-nav) + 1);
}
@media (min-width: 768px) { .chat-screen { max-width: 600px; } }
/* الكتابة مع كيبورد مفتوح: شريط التنقل يخفي نفسه (app.css) فلا نحفظ له مكانًا */
body.hy2-typing .chat-screen {
  inset-block-end: calc(var(--chat-kb, 0px) + env(safe-area-inset-bottom, 0px) + var(--hy-chat-gap));
}

/* ── ب) شريط الحالة الرفيع: صف واحد يدمج الحالة والزمن وإيقاف ───────── */
.chat-statusbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--hy-s2);
  height: 40px; padding-inline: var(--hy-s3); margin-bottom: var(--hy-s2);
  border-radius: var(--hy-r-pill); border: 1px solid var(--hy-line-2);
  background:var(--k-surface);
  box-shadow: var(--hy-e1);
  font-size: var(--hy-fs-micro); color: var(--hy-dim);
}
.chat-statusbar .csb-tx {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--hy-text); font-weight: var(--hy-w-strong);
}
.chat-statusbar .csb-ic, .chat-statusbar .csb-time, .chat-statusbar .csb-stop { flex: 0 0 auto; }
.chat-statusbar .csb-time { color: var(--hy-dim-2); font-variant-numeric: var(--hy-num); }
.chat-statusbar .csb-ic svg { width: var(--ic-inline); height: var(--ic-inline); flex: 0 0 auto; }
.chat-statusbar.is-run { border-color: var(--hy-blue-line); }
.chat-statusbar.is-wait { border-color: color-mix(in srgb, var(--hy-warn) 40%, transparent); }
.chat-statusbar.is-fail { border-color: color-mix(in srgb, var(--hy-danger) 44%, transparent); }
.csb-stop {
  width: 32px; height: 32px; border-radius: var(--hy-r-pill); display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--hy-danger) 40%, transparent);
  background: var(--hy-danger-soft); color: var(--hy-danger); cursor: pointer;
}
.csb-stop svg { width: var(--ic-action); height: var(--ic-action); flex: 0 0 auto; }

/* ── ج) شريط الرسائل: حاوية التمرير الوحيدة ───────────────────────── */
.chat-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--hy-s4) var(--hy-s5) var(--hy-s3);
  scrollbar-width: none;
}
.chat-scroll::-webkit-scrollbar { display: none; }
.chatwrap { padding-bottom: 0; }
.chat-list { display: flex; flex-direction: column; gap: var(--hy-chat-gap); }

/* زر النزول لأحدث رسالة — يظهر فقط إن كان القارئ فوق (JS) */
.chat-jump {
  flex: 0 0 auto; align-self: flex-end;
  width: 40px; height: 40px; margin-block: calc(-1 * var(--hy-s9)) var(--hy-s2);
  margin-inline-end: var(--hy-s3);
  display: grid; place-items: center; border-radius: var(--hy-r-pill); cursor: pointer;
  border: 1px solid var(--hy-blue-line); background:var(--k-surface);
  color: var(--hy-blue-2); box-shadow: var(--hy-e2); z-index: 2;
}
.chat-jump[hidden] { display: none; }
.chat-jump svg { width: var(--ic-action); height: var(--ic-action); flex: 0 0 auto; }

/* ── د) المرسى: ملتصق بأسفل المساحة فوق شريط التنقل ──────────────── */
.chat-dock {
  position: static; flex: 0 0 auto; margin: 0;
  display: flex; flex-direction: column; gap: var(--hy-s2);
  padding: var(--hy-s3);
  border-radius: var(--hy-r-xl) var(--hy-r-xl) 0 0;
  border: 1px solid var(--hy-line-2); border-bottom: 0;
  background:var(--k-surface);
  box-shadow: var(--hy-e3), var(--hy-hair);
  z-index: 3;
}

/* صف الوكيل: كبسولة واحدة بلا التفاف + زرّان دائريان */
.chat-agentrow { display: flex; align-items: center; gap: var(--hy-s2); min-width: 0; }
.chat-chip {
  flex: 1 1 auto; min-width: 0; height: 40px;
  display: flex; align-items: center; gap: var(--hy-s2);
  padding-inline: var(--hy-s3) var(--hy-s2);
  border-radius: var(--hy-r-pill); border: 1px solid var(--hy-line-2);
  background: var(--hy-ink-3); color: var(--hy-text);
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--hy-d-fast) var(--hy-e-standard), border-color var(--hy-d-fast);
}
.chat-chip:active { background: var(--hy-ink-4); }
.chat-chip.is-busy { border-color: var(--hy-blue-line); }
.chat-chip-av, .chat-chip-go, .chat-chip-spin { flex: 0 0 auto; display: grid; place-items: center; }
.chat-chip-av { color: var(--hy-blue-2); }
.chat-chip-av svg { width: var(--ic-field); height: var(--ic-field); flex: 0 0 auto; }
.chat-chip-go { color: var(--hy-dim-2); }
.chat-chip-go svg { width: var(--ic-inline); height: var(--ic-inline); flex: 0 0 auto; }
.chat-chip-spin {
  width: var(--ic-field); height: var(--ic-field); flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--hy-blue-line); border-top-color: var(--hy-electric);
  animation: chat-spin .9s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }
.chat-chip-tx {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2;
}
.chat-chip-tx b {
  display: block; max-width: 100%;
  font-size: var(--hy-fs-label); font-weight: var(--hy-w-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-chip-role {
  display: block; max-width: 100%; font-size: var(--hy-fs-micro); color: var(--hy-dim-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-round {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--hy-r-pill);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--hy-line-2); background: var(--hy-ink-3); color: var(--hy-dim);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--hy-d-instant) var(--hy-e-standard), color var(--hy-d-fast);
}
.chat-round:active { transform: scale(.94); }
.chat-round svg { width: var(--ic-action); height: var(--ic-action); flex: 0 0 auto; }
.chat-round.is-attach { width: var(--hy-tap); height: var(--hy-tap); }

/* صف الكتابة: 48px للأزرار · حقل 16px يتمدّد ثم يتمرّر داخليًا */
.chat-inputrow { display: flex; align-items: flex-end; gap: var(--hy-s2); min-width: 0; }
/*
 * الحقل يُكتب بمحدَّد مزدوج الأخصّية (`.chat-inputrow .chat-input`) لأن
 * `.composer textarea` في app.css يعلن مقاس 14.5px واستدارة 14px — وهي
 * أخصّ من اسم صنف واحد، فكانت تغلب النظام الجديد (قياس حيّ: 14px لا 16px).
 * والمقاس 16px مقصود: أقل من ذلك يُشغّل تكبير iOS/WebView التلقائي عند الكتابة.
 */
.chat-inputrow .chat-input {
  flex: 1 1 auto; min-width: 0;
  height: var(--hy-tap); min-height: var(--hy-tap); max-height: 120px;
  padding: var(--hy-s3) var(--hy-s4);
  border-radius: var(--hy-r-l); border: 1px solid var(--hy-line-2);
  background: color-mix(in srgb, var(--hy-void) 78%, var(--hy-ink));
  color: var(--hy-text); font-family: inherit;
  font-size: var(--hy-fs-body-l); line-height: 1.5;
  resize: none; overflow-y: auto;
  unicode-bidi: plaintext;
  transition: border-color var(--hy-d-fast) var(--hy-e-standard), box-shadow var(--hy-d-fast) var(--hy-e-standard);
}
.chat-inputrow .chat-input::placeholder { color: var(--hy-dim-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-inputrow .chat-input:focus { border-color: var(--hy-electric); box-shadow: var(--hy-ring); outline: 0; }
/*
 * المقترحات صارت داخل شريط الرسائل (أعلى المرسى مباشرة) فلا تزيد ارتفاع المرسى.
 * وارتفاعها يبقى 44px كما يفرضه حارس أهداف اللمس في المشروع (`--hy` لا رقم
 * صلب) — لا 40px كما في المقترح، لأن حارس المشروع يمنع النزول عن 44px.
 */
.chat-scroll .hy-smart { margin-top: var(--hy-s3); }
.chat-act {
  flex: 0 0 auto; width: var(--hy-tap); height: var(--hy-tap); border-radius: var(--hy-r-pill);
  display: grid; place-items: center; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--hy-d-instant) var(--hy-e-standard), background var(--hy-d-fast);
}
.chat-act:active { transform: scale(.94); }
.chat-act svg { width: var(--ic-field); height: var(--ic-field); flex: 0 0 auto; }
.chat-act.is-send { background: var(--hy-grad); color: var(--k-text); box-shadow: var(--hy-e2), var(--hy-hair); }
.chat-act.is-stop {
  background: var(--hy-danger-soft); color: var(--hy-danger);
  border: 1px solid color-mix(in srgb, var(--hy-danger) 40%, transparent);
}
.chat-act[disabled] { background: var(--hy-ink-3); color: var(--hy-dim-3); box-shadow: none; cursor: not-allowed; }

/* ملاحظات المرسى (إيقاف/رفع/إعادة محاولة) — سطر واحد خفيف */
.chat-note { display: flex; align-items: center; gap: var(--hy-s2); font-size: var(--hy-fs-micro); color: var(--hy-dim); }
.chat-note.is-warn { color: var(--hy-warn); }

/* اقتراحات سريعة أعلى حقل الكتابة */
.hy-smart { display: flex; gap: var(--hy-s2); overflow-x: auto; padding-bottom: var(--hy-s1); scrollbar-width: none; }
.hy-smart::-webkit-scrollbar { display: none; }
.hy-smart.hide { display: none; }
.hy-smart-b { flex: 0 0 auto; white-space: nowrap; }

/* ── هـ) الفقاعات والنصوص ─────────────────────────────────────────── */
.chat-list .msg { display: flex; align-items: flex-start; gap: var(--hy-s2); margin: 0; }
.chat-list .msg.me { justify-content: flex-end; }
/* داخل المجموعة الواحدة: 4px بدل 12px (تماسك بصري بلا مسافة زائدة) */
.chat-list .msg.cont { margin-block-start: calc(var(--hy-s1) - var(--hy-chat-gap)); }
.chat-list .ai-body {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: var(--hy-bubble-max); min-width: 0;
}
.chat-list .msg.me .ai-body { align-items: flex-end; }
.chat-list .ai-badge {
  width: var(--ic-box-badge); height: var(--ic-box-badge); flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--hy-r-xs);
  background: var(--hy-grad-soft); color: var(--hy-blue-2);
  box-shadow: inset 0 0 0 1px var(--hy-blue-line);
}
.chat-list .ai-badge svg { width: var(--ic-inline); height: var(--ic-inline); flex: 0 0 auto; }
.chat-list .ai-meta { font-size: var(--hy-fs-micro); color: var(--hy-dim-2); margin-bottom: var(--hy-s1); }
.chat-list .bubble {
  max-width: 100%;
  padding: var(--hy-s3) var(--hy-s4);
  border-radius: var(--hy-bubble-r);
  border: 1px solid var(--hy-line);
  background:var(--k-surface);
  color: var(--hy-text);
  font-size: var(--hy-fs-body); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  unicode-bidi: plaintext;
  box-shadow: var(--hy-e1);
}
.chat-list .msg.bot .bubble { border-start-start-radius: var(--hy-bubble-tail); }
.chat-list .msg.me .bubble {
  background: var(--hy-grad); color: var(--k-text); border-color: transparent;
  border-start-start-radius: var(--hy-bubble-r);
  border-end-start-radius: var(--hy-bubble-r);
  border-end-end-radius: var(--hy-bubble-tail);
  box-shadow: var(--hy-e2), var(--hy-hair);
}
.chat-list .bubble.bubble-done { border-color: color-mix(in srgb, var(--hy-ok) 30%, transparent); }
.chat-list .msg.failed .bubble { border-color: color-mix(in srgb, var(--hy-danger) 34%, transparent); }
/* روابط وأكواد داخل الفقاعة: اتجاه لاتيني بلا كسر السطر العربي */
.chat-list .bubble code, .chat-list .bubble pre { direction: ltr; text-align: left; unicode-bidi: embed; }
.chat-list .bubble pre { max-width: 100%; overflow-x: auto; }
.chat-list .bubble code { font-size: var(--hy-fs-caption); }
/* مؤشر الكتابة: فقاعة واحدة قصيرة (كان ثلاث فقرات حالة متكررة) */
.chat-list .bubble.typing { display: inline-flex; align-items: center; gap: var(--hy-s1); height: 36px; padding-block: 0; }
.chat-list .bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--hy-blue-2); animation: hy2-dot 1.25s var(--hy-e-standard) infinite; }
.chat-list .bubble.typing i:nth-child(2) { animation-delay: .16s; }
.chat-list .bubble.typing i:nth-child(3) { animation-delay: .32s; }

/* ── و) حالة الفراغ: أيقونة + سطر، والمقترحات تحت المرسى ────────── */
.chat-empty { display: flex; flex-direction: column; align-items: center; gap: var(--hy-s3); padding: var(--hy-s8) var(--hy-s5); text-align: center; }
.chat-empty-ico {
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: var(--hy-r-l); background: var(--hy-grad-soft); color: var(--hy-blue-2);
  box-shadow: inset 0 0 0 1px var(--hy-blue-line), var(--hy-e1);
}
.chat-empty-ico svg { width: var(--ic-hero); height: var(--ic-hero); flex: 0 0 auto; }
.chat-empty p { font-size: var(--hy-fs-body); color: var(--hy-dim); max-width: 28ch; }

/* ── ز) صفوف الأدوات داخل المحادثة ──────────────────────────────── */
.toolrow { border-radius: var(--hy-r-m); border: 1px solid var(--hy-line); background: var(--hy-ink); padding: var(--hy-s3) var(--hy-s4); }
.toolrow-ic { color: var(--hy-blue-2); }
.toolrow-tx { font-size: var(--hy-fs-label); }
.toolrow-more { font-size: var(--hy-fs-micro); }

/* ── ح) شاشات ضيقة + حركة مخفّفة ───────────────────────────────── */
@media (max-width: 380px) {
  .chat-chip-role { display: none; }
  .chat-scroll { padding-inline: var(--hy-s4); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-chip-spin, .chat-list .bubble.typing i { animation: none !important; }
  .chat-chip, .chat-round, .chat-act { transition: none !important; }
}
html[data-motion="off"] .chat-chip-spin,
html[data-motion="off"] .chat-list .bubble.typing i { animation: none !important; }
body.lite .chat-dock, body.lite .chat-statusbar, body.lite .chat-jump { box-shadow: none; }
body.lite .chat-act.is-send { box-shadow: none; }