/* ==========================================================================
   design-system.css — نظام تصميم UAE TEMA (الدفعة التاسعة-أ)
   --------------------------------------------------------------------------
   مبني على المرحلة الخامسة التقنية (الهوية البصرية، RTL/LTR، الوصولية،
   الحالة الدلالية، صدق مؤشّرات الثقة). كل لون/مسافة/نصف قطر/ظل هو متغيّر
   CSS؛ الثيمات تبدّل المتغيّرات لا القواعد. الاتجاه منطقي (inline-start/end)
   فينعكس تلقائياً مع dir دون قواعد منفصلة لكل اتجاه.
   ========================================================================== */

/* ---- 1. الرموز الأساسية (مستقلة عن الثيم) -------------------------------- */
:root{
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;
  --lh-tight:1.25; --lh-normal:1.55;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;

  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  --t-fast:120ms; --t-base:180ms; --t-slow:260ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* مقياس ارتفاع موحّد — يبني عمقاً بصرياً متدرّجاً (يُعاد تعريف لون الظل لكل ثيم) */
  --elev-color:rgba(15,30,25,.10);
  --elev-1:0 1px 2px var(--elev-color);
  --elev-2:0 2px 8px var(--elev-color);
  --elev-3:0 8px 24px var(--elev-color);
  --elev-4:0 16px 48px var(--elev-color);

  /* الحالة الدلالية — ثابتة المعنى عبر كل الثيمات (المرحلة الخامسة) */
  --st-ontime:#1e8e5a;  --st-ontime-soft:rgba(30,142,90,.13);
  --st-late:#c1121f;    --st-late-soft:rgba(193,18,31,.12);
  --st-warn:#c0700f;    --st-warn-soft:rgba(192,112,15,.14);
  --st-pending:#6b7785; --st-pending-soft:rgba(107,119,133,.14);
  --st-online:#1e8e5a;  --st-offline:#9aa6b2;
  --trust-e2ee:#1e8e5a; --trust-transport:#c0700f;

  /* الخطوط — تتبدّل حسب اللغة (انظر أسفله) */
  --display-font:"Tajawal",system-ui,sans-serif;
  --body-font:"Tajawal",system-ui,sans-serif;

  /* أحجام ثابتة للتخطيط */
  --rail-w:64px; --sidebar-w:320px; --touch-min:44px; --botnav-h:64px;

  /* رموز الحالة (تنبيهات/توست) — مستقلّة عن لون الثيم */
  --danger:#dc3545; --danger-soft:rgba(220,53,69,.10);
  --ok:#1c7a35; --ok-soft:rgba(40,167,69,.10);
}

/* خط لكل لغة: اللاتينية → Inter، الأردية → Noto Naskh، العربية → Tajawal */
html[lang="en"],html[lang="fr"],html[lang="de"]{
  --display-font:"Inter",system-ui,sans-serif;
  --body-font:"Inter",system-ui,sans-serif;
}
html[lang="ur"]{
  --display-font:"Noto Naskh Arabic",serif;
  --body-font:"Noto Naskh Arabic",serif;
}

/* ---- 2. لوحات الثيمات (الوضع الفاتح) ------------------------------------- */
/* الإماراتي — أخضر عميق، رصانة حكومية (الافتراضي) */
[data-theme="emirati"]{
  --bg-app:#eef2ef; --bg-rail:#0d3b2e; --bg-rail-active:rgba(255,255,255,.14);
  --rail-icon:#8fb3a6; --rail-icon-active:#ffffff;
  --bg-sidebar:#ffffff; --bg-surface:#ffffff; --bg-raised:#f6f8f7;
  --bg-input:#eef2ef; --bg-chat:#e9efe9;
  --text-1:#10241d; --text-2:#4a5d56; --text-3:#7d8d87;
  --accent:#0a7d5e; --accent-strong:#086b50; --accent-soft:rgba(10,125,94,.12);
  --accent-on:#ffffff; --border:#dde6e1; --border-strong:#c5d2cb;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 14px rgba(0,0,0,.10);
}
/* النيلي — سلطة وتركيز */
[data-theme="indigo"]{
  --bg-app:#eef0f8; --bg-rail:#1e1b3a; --bg-rail-active:rgba(255,255,255,.14);
  --rail-icon:#a6a3c8; --rail-icon-active:#ffffff;
  --bg-sidebar:#ffffff; --bg-surface:#ffffff; --bg-raised:#f5f6fb;
  --bg-input:#eef0f8; --bg-chat:#eaebf4;
  --text-1:#16142b; --text-2:#4c4a66; --text-3:#838199;
  --accent:#4338ca; --accent-strong:#362ba6; --accent-soft:rgba(67,56,202,.12);
  --accent-on:#ffffff; --border:#e0e2f0; --border-strong:#cdcfe6;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 14px rgba(0,0,0,.10);
}
/* الكهرماني — دفء نهار العمل النشط */
[data-theme="amber"]{
  --bg-app:#f8f3ea; --bg-rail:#2c2218; --bg-rail-active:rgba(255,255,255,.13);
  --rail-icon:#c2ad94; --rail-icon-active:#ffffff;
  --bg-sidebar:#fffdf9; --bg-surface:#fffdf9; --bg-raised:#fbf5ec;
  --bg-input:#f3ebdd; --bg-chat:#f1e8d9;
  --text-1:#2a2014; --text-2:#5c4d39; --text-3:#8d7b62;
  --accent:#b9690d; --accent-strong:#9c560a; --accent-soft:rgba(185,105,13,.13);
  --accent-on:#ffffff; --border:#e9dcc7; --border-strong:#d8c5a8;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 14px rgba(0,0,0,.10);
}
/* الحجري — محايد رمادي مزرقّ للعمل الطويل */
[data-theme="stone"]{
  --bg-app:#eef1f3; --bg-rail:#202a31; --bg-rail-active:rgba(255,255,255,.12);
  --rail-icon:#9fb0bb; --rail-icon-active:#ffffff;
  --bg-sidebar:#ffffff; --bg-surface:#ffffff; --bg-raised:#f5f7f8;
  --bg-input:#eef1f3; --bg-chat:#e9edf0;
  --text-1:#162028; --text-2:#46555f; --text-3:#7a8893;
  --accent:#2f6f8f; --accent-strong:#275d78; --accent-soft:rgba(47,111,143,.12);
  --accent-on:#ffffff; --border:#dde3e7; --border-strong:#c6d0d6;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 14px rgba(0,0,0,.10);
}

/* ---- 3. الوضع الداكن (لكل ثيم) ------------------------------------------ */
/* في الوضع الداكن يكون الظل أعمق كي يبقى العمق محسوساً */
[data-mode="dark"]{--elev-color:rgba(0,0,0,.45)}
[data-mode="dark"][data-theme="emirati"]{
  --bg-app:#0a1714; --bg-rail:#081f18; --bg-rail-active:rgba(255,255,255,.1);
  --rail-icon:#6e8a80; --bg-sidebar:#10211b; --bg-surface:#10211b;
  --bg-raised:#16291f; --bg-input:#16291f; --bg-chat:#0d1d17;
  --text-1:#e6efe9; --text-2:#9db3a9; --text-3:#6f867c;
  --accent:#21b083; --accent-strong:#1c9a72; --accent-soft:rgba(33,176,131,.16);
  --border:#1d3329; --border-strong:#274536;
}
[data-mode="dark"][data-theme="indigo"]{
  --bg-app:#0c0b1a; --bg-rail:#0a0918; --bg-rail-active:rgba(255,255,255,.1);
  --rail-icon:#7a779e; --bg-sidebar:#15132b; --bg-surface:#15132b;
  --bg-raised:#1c1937; --bg-input:#1c1937; --bg-chat:#100e22;
  --text-1:#e9e8f5; --text-2:#a8a6c4; --text-3:#7d7b9a;
  --accent:#7c71ff; --accent-strong:#695cf0; --accent-soft:rgba(124,113,255,.18);
  --border:#262247; --border-strong:#332e5c;
}
[data-mode="dark"][data-theme="amber"]{
  --bg-app:#171109; --bg-rail:#130e07; --bg-rail-active:rgba(255,255,255,.1);
  --rail-icon:#a08766; --bg-sidebar:#211810; --bg-surface:#211810;
  --bg-raised:#2a1f14; --bg-input:#2a1f14; --bg-chat:#1a130b;
  --text-1:#f2e7d6; --text-2:#c2ac8d; --text-3:#90795c;
  --accent:#e8932f; --accent-strong:#d27f1c; --accent-soft:rgba(232,147,47,.17);
  --border:#33271a; --border-strong:#463623;
}
[data-mode="dark"][data-theme="stone"]{
  --bg-app:#0d141a; --bg-rail:#0a1015; --bg-rail-active:rgba(255,255,255,.1);
  --rail-icon:#7d8d99; --bg-sidebar:#131c23; --bg-surface:#131c23;
  --bg-raised:#19242c; --bg-input:#19242c; --bg-chat:#0e161c;
  --text-1:#e6edf2; --text-2:#a3b2bd; --text-3:#748591;
  --accent:#52a7cc; --accent-strong:#4291b5; --accent-soft:rgba(82,167,204,.17);
  --border:#1e2c35; --border-strong:#2a3d49;
}

/* ---- 4. الأساس + الوصولية ------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body-font);
  background:var(--bg-app); color:var(--text-1);
  font-size:var(--fs-md); line-height:var(--lh-normal);
  transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
  -webkit-font-smoothing:antialiased;
}
/* تركيز ظاهر بلوحة المفاتيح (WCAG) */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
/* احترام تقليل الحركة */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* أحجام لمس لا تقلّ عن 44px للعناصر التفاعلية الأساسية */
button,.touch{min-height:var(--touch-min)}
/* رابط تخطّي للوصولية */
.skip-link{position:absolute;inset-inline-start:-999px;top:.5rem;z-index:100;
  background:var(--accent);color:var(--accent-on);padding:.5rem 1rem;border-radius:var(--r-sm)}
.skip-link:focus{inset-inline-start:.5rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ---- 5. مكوّنات قابلة لإعادة الاستخدام (إعادة تصميم احترافية) ------------ */
/* الأزرار: انتقالات أدق، ارتفاع عند التمرير، ضغط ملموس */
.btn{font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);
  padding:.62rem 1.15rem;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--touch-min);white-space:nowrap;
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--accent-on);box-shadow:0 2px 8px var(--accent-soft)}
.btn-primary:hover:not(:disabled){background:var(--accent-strong);
  box-shadow:0 4px 14px var(--accent-soft);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--border-strong)}
.btn-ghost:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
.btn-soft{background:var(--accent-soft);color:var(--accent)}
.btn-soft:hover:not(:disabled){background:var(--accent);color:var(--accent-on)}
.btn-danger{background:var(--st-late);color:#fff}
.btn-danger:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.btn-icon{width:var(--touch-min);height:var(--touch-min);padding:0;
  border-radius:var(--r-md);background:transparent;color:var(--text-2);border:1px solid transparent}
.btn-icon:hover:not(:disabled){background:var(--bg-raised);color:var(--accent)}

/* الحقول: تركيز ناعم، خلفية مرفوعة */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semi);
  margin-bottom:var(--sp-2);color:var(--text-1)}
.field input,.field select{width:100%;padding:.68rem .9rem;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);background:var(--bg-surface);color:var(--text-1);
  font-family:inherit;font-size:var(--fs-md);min-height:var(--touch-min);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field input:focus,.field select:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}

/* شارات الحالة الدلالية */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);
  font-weight:var(--fw-bold);padding:.32rem .72rem;border-radius:var(--r-pill);
  white-space:nowrap;line-height:1}
.chip i{font-size:.68rem}
.chip.ontime{background:var(--st-ontime-soft);color:var(--st-ontime)}
.chip.late{background:var(--st-late-soft);color:var(--st-late)}
.chip.warn{background:var(--st-warn-soft);color:var(--st-warn)}
.chip.pending{background:var(--st-pending-soft);color:var(--st-pending)}

/* مؤشّرات الثقة الصادقة */
.trust{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);
  font-weight:var(--fw-semi);padding:.35rem .75rem;border-radius:var(--r-pill)}
.trust.e2ee{background:var(--st-ontime-soft);color:var(--trust-e2ee)}
.trust.transport{background:var(--st-warn-soft);color:var(--trust-transport)}

/* البطاقات: حدّ خفيف + ارتفاع متدرّج عند التمرير */
.kpi,.card{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--elev-1);
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease)}
.kpi .lbl{font-size:var(--fs-xs);color:var(--text-3);font-weight:var(--fw-semi);
  text-transform:uppercase;letter-spacing:.3px}
.kpi .val{font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:1.05;margin:var(--sp-2) 0}

/* الحالات: تحميل/فراغ/خطأ */
.state{max-width:440px;text-align:center;padding:var(--sp-10) var(--sp-8);margin:auto;
  border:1.5px dashed var(--border-strong);border-radius:var(--r-xl);background:var(--bg-surface)}
.state .ic{font-size:2.4rem;margin-bottom:var(--sp-4);opacity:.9}
.state.err .ic{color:var(--st-late)} .state.empty .ic{color:var(--text-3)}
.state h2,.state .state-title{margin-bottom:var(--sp-2);font-size:var(--fs-lg);font-weight:var(--fw-bold)} .state p{color:var(--text-2);font-size:var(--fs-sm)}
.sk{background:linear-gradient(90deg,var(--bg-raised) 25%,var(--border) 37%,var(--bg-raised) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-line{height:12px;margin-bottom:8px}

/* ---- 6. صدفة التخطيط (rail + sidebar + main) ----------------------------- */
.app-shell{display:flex;height:100vh;overflow:hidden}
.rail{width:var(--rail-w);flex-shrink:0;background:var(--bg-rail);
  display:flex;flex-direction:column;align-items:center;padding:var(--sp-4) 0;gap:6px;
  z-index:30;box-shadow:var(--elev-2)}
.rail-logo{width:42px;height:42px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--accent-on);display:grid;place-items:center;font-weight:var(--fw-black);
  font-size:var(--fs-md);margin-bottom:var(--sp-3);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.rail-btn{width:46px;height:46px;border:0;border-radius:var(--r-md);background:transparent;
  color:var(--rail-icon);font-size:1.15rem;cursor:pointer;display:grid;place-items:center;
  position:relative;text-decoration:none;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.rail-btn:hover{background:var(--bg-rail-active);color:var(--rail-icon-active);transform:translateY(-1px)}
.rail-btn.active{background:var(--bg-rail-active);color:var(--rail-icon-active)}
.rail-btn.active::before{content:"";position:absolute;inset-inline-start:-12px;top:50%;
  transform:translateY(-50%);width:4px;height:24px;background:var(--accent-on);
  border-radius:0 var(--r-pill) var(--r-pill) 0}
html[dir="ltr"] .rail-btn.active::before{inset-inline-start:auto;inset-inline-end:-12px;
  border-radius:var(--r-pill) 0 0 var(--r-pill)}
/* تلميحة عند تمرير زرّ الشريط (من المرجع) */
.rail-btn[title]:hover::after{content:attr(title);position:absolute;
  inset-inline-start:56px;top:50%;transform:translateY(-50%);
  background:var(--text-1);color:var(--bg-surface);font-size:var(--fs-xs);font-weight:var(--fw-semi);
  padding:.35rem .7rem;border-radius:var(--r-sm);white-space:nowrap;z-index:60;
  box-shadow:var(--elev-3);pointer-events:none;animation:tip-in var(--t-fast) var(--ease) both}
html[dir="ltr"] .rail-btn[title]:hover::after{inset-inline-start:auto;inset-inline-end:56px}
@keyframes tip-in{from{opacity:0}to{opacity:1}}
@media (max-width:768px){ .rail-btn[title]:hover::after{display:none} }
.rail-spacer{flex:1}
.rail-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-weight:var(--fw-bold);
  border:2px solid transparent;cursor:pointer;transition:border-color var(--t-fast) var(--ease)}
.rail-avatar:hover{border-color:var(--accent)}

.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg-sidebar);
  border-inline-end:1px solid var(--border);display:flex;flex-direction:column}
.sb-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.sb-head h1,.sb-head .sb-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0}
.sb-search{padding:var(--sp-3) var(--sp-4)}
.sb-search input{width:100%;padding:.58rem .9rem;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--bg-input);color:var(--text-1);
  font-family:inherit;font-size:var(--fs-sm);min-height:var(--touch-min)}
.sb-list{flex:1;overflow-y:auto;padding:var(--sp-2)}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-app);min-width:0}
.main-head{padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--border);
  background:var(--bg-surface);display:flex;align-items:center;gap:var(--sp-3);
  min-height:64px;box-shadow:var(--elev-1);z-index:5}
.main-head strong{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.main-body{flex:1;overflow-y:auto;padding:var(--sp-6)}

.scrim{display:none}
.botnav{display:none}

/* ---- 7. الاستجابة (1024 / 768 / 420) ------------------------------------ */
@media (max-width:1024px){ :root{--sidebar-w:280px} }
@media (max-width:768px){
  .rail{width:58px}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:40;width:308px;
    box-shadow:var(--elev-4);transition:transform var(--t-base) var(--ease-out)}
  .sidebar.collapsed{transform:translateX(-110%)}
  html[dir="rtl"] .sidebar.collapsed{transform:translateX(110%)}
  .scrim.show{display:block;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px)}
  .main-body{padding-bottom:calc(var(--sp-6) + 68px)}
  .botnav{display:flex;position:fixed;inset-block-end:0;inset-inline:0;height:64px;
    background:var(--bg-rail);z-index:45;align-items:center;justify-content:space-around;
    padding:0 var(--sp-2);box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .botnav .botnav-btn{background:transparent;border:0;color:var(--rail-icon);font-size:1.25rem;
    min-width:var(--touch-min);min-height:var(--touch-min);border-radius:var(--r-md);
    display:grid;place-items:center;text-decoration:none;transition:color var(--t-fast) var(--ease)}
  .botnav .botnav-btn.active{color:var(--rail-icon-active);background:var(--bg-rail-active)}
  .sidebar-toggle{display:inline-flex}
}
.sidebar-toggle{display:none}
.sidebar-toggle-rail{display:none}
@media (max-width:768px){ .sidebar-toggle-rail{display:grid} }

/* ---- 8. رأس المحادثة والمبدّلات ------------------------------------------ */
.conv-id{flex:1;min-width:0}
.conv-title{display:block;font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-sub{font-size:var(--fs-xs);color:var(--text-3);display:flex;align-items:center;gap:.4rem}
.conv-sub .typing{color:var(--accent);font-weight:var(--fw-semi)}
.pres-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.pres-dot.on{background:var(--st-online)} .pres-dot.off{background:var(--st-offline)}
.conv-actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:nowrap}
@media (max-width:420px){ .conv-actions .trust span{display:none} }

/* المبدّلات: ثيم كدوائر لونية (swatches) من المرجع */
.lang-switch{margin-bottom:0}
.theme-switch > label,.lang-switch label{display:block;font-size:var(--fs-sm);
  font-weight:var(--fw-bold);margin-bottom:var(--sp-3);color:var(--text-1)}
.theme-opts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.theme-pill{font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semi);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .55rem .4rem .4rem;border-radius:var(--r-pill);cursor:pointer;
  background:var(--bg-raised);color:var(--text-2);border:1.5px solid var(--border);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.theme-pill::before{content:"";width:18px;height:18px;border-radius:50%;
  background:var(--_sw,var(--accent));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.theme-pill[data-code="emirati"]{--_sw:#0a7d5e}
.theme-pill[data-code="indigo"]{--_sw:#4338ca}
.theme-pill[data-code="amber"]{--_sw:#b9690d}
.theme-pill[data-code="stone"]{--_sw:#2f6f8f}
.theme-pill:hover{color:var(--text-1);border-color:var(--border-strong)}
.theme-pill.on{color:var(--text-1);border-color:var(--text-1)}
.theme-switch .mode-toggle{width:100%;justify-content:center;margin-top:var(--sp-2)}

/* عناصر القائمة الجانبية */
.li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);
  cursor:pointer;border-inline-start:3px solid transparent;
  transition:background var(--t-fast) var(--ease);min-height:var(--touch-min)}
.li:hover{background:var(--bg-raised)}
.li.active{background:var(--accent-soft);border-inline-start-color:var(--accent)}
.li .av{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:var(--fw-bold);flex-shrink:0;position:relative}
.li .av .pres{position:absolute;inset-inline-end:-1px;bottom:-1px;width:13px;height:13px;
  border-radius:50%;border:2.5px solid var(--bg-sidebar)}
.li .av .pres.on{background:var(--st-online)} .li .av .pres.off{background:var(--st-offline)}
.li .meta{flex:1;min-width:0}
.li .nm{font-weight:var(--fw-semi);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .sub{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 9. تخطيط المحادثة --------------------------------------------------- */
.chat-layout{display:flex;height:100%;min-height:0}
.chat-layout .sidebar{border-inline-end:1px solid var(--border)}
.chat-layout .chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-chat)}
.chat-layout .messages{flex:1;overflow-y:auto;padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);scroll-behavior:smooth}
.chat-layout .msg{display:flex}
.chat-layout .msg.mine{justify-content:flex-end}
.chat-layout .msg.theirs{justify-content:flex-start}
.chat-layout .bubble{max-width:72%;padding:.62rem .9rem;border-radius:var(--r-lg);
  font-size:var(--fs-sm);line-height:var(--lh-normal);box-shadow:var(--elev-1);
  animation:bubble-in var(--t-base) var(--ease-out) both}
@keyframes bubble-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chat-layout .bubble.out{background:var(--accent);color:var(--accent-on);border-end-end-radius:4px}
.chat-layout .bubble.in{background:var(--bg-surface);border:1px solid var(--border);border-end-start-radius:4px}
.chat-layout .read{font-size:.7rem;opacity:.85;margin-inline-start:.4rem}
.chat-layout .composer{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);background:var(--bg-surface)}
.chat-layout .composer input{flex:1;padding:.65rem 1rem;border:1px solid var(--border-strong);
  border-radius:var(--r-pill);background:var(--bg-input);color:var(--text-1);
  font-family:inherit;font-size:var(--fs-md);min-height:var(--touch-min);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.chat-layout .composer input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-layout .composer .btn-primary{border-radius:var(--r-pill);width:46px;height:46px;padding:0;flex-shrink:0}
@media (max-width:768px){ .chat-layout .sidebar.collapsed{transform:translateX(-110%)}
  html[dir="rtl"] .chat-layout .sidebar.collapsed{transform:translateX(110%)} }
@media (max-width:420px){ .sidebar{width:88vw} .main-body{padding:var(--sp-4);padding-bottom:calc(var(--sp-4) + 68px)} }

/* ---- 10. اللوحة والمهام (احترافي) --------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-6)}
/* بطاقة مؤشّر: أيقونة ومحتوى جنباً إلى جنب (من المرجع) */
.kpi.kpi-row{display:flex;align-items:flex-start;gap:var(--sp-4)}
.kpi:hover{box-shadow:var(--elev-2);transform:translateY(-2px);border-color:var(--border-strong)}
.kpi .kpi-ico{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  font-size:1.1rem;flex-shrink:0;background:var(--accent-soft);color:var(--accent)}
.kpi .kpi-ico.late{background:var(--st-late-soft);color:var(--st-late)}
.kpi .kpi-ico.total{background:var(--st-pending-soft);color:var(--st-pending)}
.kpi .kpi-ico.ok{background:var(--st-ontime-soft);color:var(--st-ontime)}
.kpi-row .kpi-body{flex:1;min-width:0}

.measure-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.measure-row .kpi .lbl i{color:var(--accent);margin-inline-end:.3rem}
@media (max-width:560px){ .measure-row{grid-template-columns:1fr} }

.gap-card{border-inline-start:4px solid var(--accent);background:
  linear-gradient(var(--accent-soft),transparent 60%),var(--bg-surface)}
.gap-card .gap-title{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text-1)}
.gap-card .gap-body{margin-top:var(--sp-2);color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.gap-card .gap-val{margin-top:var(--sp-3);font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--accent)}

.section-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-3);
  text-transform:uppercase;letter-spacing:.5px;margin:var(--sp-6) 0 var(--sp-3)}

.task-card{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-3);
  box-shadow:var(--elev-1);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.task-card:hover{border-color:var(--border-strong);box-shadow:var(--elev-2);transform:translateY(-1px)}
.task-card .tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3)}
.task-card .tc-title{font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text-1)}
.task-card .tc-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-3);
  font-size:var(--fs-xs);color:var(--text-3)}
.task-card .tc-meta span{display:inline-flex;align-items:center;gap:.35rem}
.tasks-wrap{max-width:720px}

/* ---- 11. لوحات منبثقة من الشريط ----------------------------------------- */
.rail-pop-scrim{position:fixed;inset:0;z-index:48;background:transparent}
.rail-pop{position:fixed;z-index:49;inset-block-end:var(--sp-4);
  inset-inline-start:calc(var(--rail-w) + var(--sp-3));
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--elev-4);
  padding:var(--sp-6);min-width:260px;max-width:320px;
  animation:rail-pop-in var(--t-base) var(--ease-out) both}
@keyframes rail-pop-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.rail-pop .theme-switch,.rail-pop .lang-switch,.rail-pop .field{margin-bottom:0}
@media (max-width:768px){
  .rail-pop{inset-inline:var(--sp-4);inset-block-end:calc(68px + var(--sp-3));max-width:none}
}

/* ---- 12. لوحة المتابعة الغنية (محاكاة مستوى index.html) ----------------- */
/* شريط أدوات اللوحة: نطاق + فترة + تصدير */
.dash-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-5);
  align-items:end;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--elev-1);
  margin-bottom:var(--sp-5)}
.dash-toolbar .tb-label{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--sp-2);font-weight:var(--fw-semi)}
.live-indicator{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);
  color:var(--text-2);background:var(--bg-input);padding:.25rem .7rem;border-radius:var(--r-pill)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--st-online);
  animation:pulse-dot 1.8s infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-online) 50%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.period-tabs{display:flex;gap:4px;background:var(--bg-input);padding:4px;border-radius:var(--r-md)}
.p-tab{border:none;background:transparent;color:var(--text-2);font-family:inherit;
  font-size:var(--fs-sm);padding:.4rem .85rem;border-radius:var(--r-xs);cursor:pointer;
  transition:all var(--t-fast) var(--ease)}
.p-tab:hover{color:var(--text-1)}
.p-tab.active{background:var(--bg-surface);color:var(--accent);font-weight:var(--fw-bold);box-shadow:var(--elev-1)}
.dash-scope-btn{display:inline-flex;align-items:center;gap:.45rem;font-family:inherit;
  font-size:var(--fs-sm);font-weight:var(--fw-semi);padding:.5rem .9rem;cursor:pointer;
  background:var(--bg-surface);color:var(--text-1);border:1px solid var(--border-strong);border-radius:var(--r-sm)}

/* شبكة بطاقات المؤشّر: 5 لكل صف على سطح المكتب */
.kpi-row-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);margin-bottom:var(--sp-5)}
.kpi-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4);box-shadow:var(--elev-1);display:flex;gap:var(--sp-3);align-items:flex-start;
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.kpi-card:hover{box-shadow:var(--elev-2);transform:translateY(-2px)}
.kpi-card .kpi-icon{width:44px;height:44px;border-radius:var(--r-md);flex-shrink:0;font-size:1.05rem;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.kpi-icon.ok{background:var(--st-ontime-soft);color:var(--st-ontime)}
.kpi-icon.late{background:var(--st-late-soft);color:var(--st-late)}
.kpi-icon.info{background:var(--st-pending-soft);color:var(--st-pending)}
.kpi-icon.warn{background:var(--st-warn-soft);color:var(--st-warn)}
.kpi-card .kpi-body{min-width:0}
.kpi-card .kpi-label{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:3px}
.kpi-card .kpi-value{font-size:1.7rem;font-weight:var(--fw-black);line-height:1.1;color:var(--text-1)}
.kpi-card .kpi-value.ok{color:var(--st-ontime)} .kpi-card .kpi-value.late{color:var(--st-late)}
.kpi-card .kpi-trend{font-size:var(--fs-xs);color:var(--text-3);margin-top:4px;display:flex;align-items:center;gap:.3rem}
.kpi-card .kpi-trend.up{color:var(--st-ontime)}

/* صفّ بطاقتين (منظور العدد/الوزن، وأي زوج) */
.dash-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.dash-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--elev-1)}
.dash-card .dc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-3)}
.dash-card .dc-title{font-weight:var(--fw-bold);font-size:var(--fs-md)}
.dash-card .dc-title small{color:var(--text-3);font-weight:var(--fw-reg);font-size:var(--fs-xs)}
.dash-card .dc-note{color:var(--text-3);font-size:var(--fs-xs);margin-top:2px}
.dual-pct{font-size:2rem;font-weight:var(--fw-black);line-height:1;color:var(--accent)}
.prog-track{width:100%;height:10px;background:var(--bg-input);border-radius:var(--r-xs);
  overflow:hidden;margin-top:var(--sp-3)}
.prog-fill{height:100%;border-radius:var(--r-xs);background:var(--accent);transition:width .5s var(--ease-out)}
.prog-foot{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp-2)}
.prog-foot strong{color:var(--text-1)}
.dual-hint{margin-top:var(--sp-3);padding:.65rem .85rem;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--text-1);font-size:var(--fs-sm);line-height:var(--lh-normal);
  border-inline-start:3px solid var(--accent)}
.dual-hint i{color:var(--accent);margin-inline-end:.4rem}

/* قائمة المهام المتأخرة + صفوف الاجتماعات */
.late-list,.meet-list{list-style:none;padding:0;margin:0}
.late-list li{padding:.7rem 0;border-bottom:1px solid var(--border)}
.late-list li:last-child{border-bottom:none}
.late-title{font-size:var(--fs-sm);font-weight:var(--fw-semi);margin-bottom:2px}
.late-meta{font-size:var(--fs-xs);color:var(--st-late)}
.meet-row{display:flex;align-items:center;gap:var(--sp-4);padding:.7rem 0;border-bottom:1px solid var(--border)}
.meet-row:last-child{border-bottom:none}
.meet-date{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:52px;flex-shrink:0;background:var(--accent-soft);border-radius:var(--r-md);color:var(--accent)}
.meet-date strong{font-size:1.1rem;line-height:1} .meet-date small{font-size:var(--fs-xs)}
.meet-info{flex:1;min-width:0}

/* استجابة اللوحة الغنية */
@media (max-width:1024px){
  .kpi-row-grid{grid-template-columns:repeat(3,1fr)}
  .dash-toolbar{grid-template-columns:1fr 1fr}
  .dash-toolbar .dash-export{grid-column:1 / -1;justify-self:end}
}
@media (max-width:768px){
  .kpi-row-grid{grid-template-columns:repeat(2,1fr)}
  .dash-toolbar{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-3)}
  .dash-duo{grid-template-columns:1fr}
  .period-tabs{overflow-x:auto;flex-wrap:nowrap}
  .kpi-card .kpi-value{font-size:1.4rem}
}
@media (max-width:420px){ .kpi-row-grid{grid-template-columns:1fr} }

/* ---- 13. صفحات الإكمال (إعدادات/فرق/مجموعات/اجتماعات) ------------------- */
.settings-wrap{max-width:720px;display:flex;flex-direction:column;gap:var(--sp-5)}
.settings-wrap .dash-card{margin-bottom:0}
.set-row{display:flex;align-items:center;gap:var(--sp-4)}
.set-avatar{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-weight:var(--fw-black);
  font-size:var(--fs-xl);flex-shrink:0}
.set-id{min-width:0}
.set-name{font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.set-sub{color:var(--text-3);font-size:var(--fs-sm)}
.set-line{display:flex;align-items:center;gap:var(--sp-3)}
.set-row + .set-row{margin-top:var(--sp-3)}

/* ---- 14. متابعة الأعضاء + مبدّل نطاق اللوحة ----------------------------- */
.dash-scope-id{padding:.5rem .8rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--bg-input);color:var(--text-1);font-family:inherit;font-size:var(--fs-sm);
  min-height:40px;flex:1;min-width:0}
.dash-scope-id:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.member-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.member-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);
  border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.member-row:hover{background:var(--bg-raised);border-color:var(--border)}
.member-av{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:var(--fw-bold);flex-shrink:0}
.member-info{flex:1;min-width:0}
.member-name{font-weight:var(--fw-semi);font-size:var(--fs-sm)}
.member-go{color:var(--text-3);font-size:.8rem}
html[dir="ltr"] .member-go{transform:scaleX(-1)}
@media print{ .rail,.botnav,.dash-toolbar,.sidebar-toggle-rail{display:none!important}
  .main-body{overflow:visible;padding:0} .dash-card,.kpi-card{box-shadow:none;break-inside:avoid} }

/* ---- 15. عنوان الصفحة (h1) — يرث مظهر العنوان السابق بلا تغيير بصري ------ */
.page-title{flex:1;margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-1);line-height:1.2}

/* ════════════════════════════════════════════════════════════════════════
   دفعة الردم 1 — لغة بصرية لصفحتي الفرق والمجموعات (UI/UX)
   كل لون من متغيّرات الثيم، فيعمل عبر السمات الأربع والوضع الداكن تلقائياً.
   التوقيع: "شريط الدور" الجانبي — تُقرَأ منزلتك في الفريق بنظرة دون نص.
   ════════════════════════════════════════════════════════════════════════ */

.teams-wrap{ max-width:920px; margin-inline:auto; padding:var(--sp-6) var(--sp-5) var(--sp-12); }
.head-action{ margin-inline-start:auto; }

/* ── شبكة البطاقات ─────────────────────────────────────────────────────── */
.cards-grid{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* بطاقة الفريق: شريط دور + جسم + سهم. زرّ كامل قابل للنقر. */
.team-card{
  position:relative; display:flex; align-items:stretch; gap:0;
  text-align:start; cursor:pointer; width:100%; overflow:hidden;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:0;
  box-shadow:var(--elev-1);
  transition:transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-fast) var(--ease);
}
.team-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); border-color:var(--border-strong); }
.team-card:active{ transform:translateY(-1px); }
.team-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* التوقيع: شريط الدور الجانبي — لونه يحمل المعنى */
.tc-rail{ flex:0 0 5px; align-self:stretch; background:var(--st-pending); }
.standing-3 .tc-rail{ background:var(--accent); }       /* مدير */
.standing-2 .tc-rail{ background:var(--st-warn); }       /* مشرف */
.standing-1 .tc-rail{ background:var(--st-ontime); }     /* عضو */

.tc-body{ flex:1; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); min-width:0; }
.tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
.tc-name{ font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text-1); line-height:var(--lh-tight); }

/* وسم المنشأ/العضوية */
.origin-tag{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); font-weight:var(--fw-med); padding:.2rem .55rem;
  border-radius:var(--r-pill); white-space:nowrap;
}
.origin-tag.is-creator{ background:var(--accent-soft); color:var(--accent-strong); }
.origin-tag.is-member{ background:var(--st-pending-soft); color:var(--text-2); }

.tc-desc{ font-size:var(--fs-sm); color:var(--text-2); line-height:var(--lh-normal);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tc-foot{ display:flex; gap:var(--sp-5); margin-top:auto; padding-top:var(--sp-2); }
.tc-metric{ display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-sm); color:var(--text-3); }
.tc-metric.has-open{ color:var(--st-warn); font-weight:var(--fw-med); }
.tc-go{ display:flex; align-items:center; padding-inline-end:var(--sp-4); color:var(--text-3);
  transition:transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease); }
.team-card:hover .tc-go{ color:var(--accent); transform:translateX(-4px); }

/* ── الحالة الفارغة: دعوة للفعل ────────────────────────────────────────── */
.page-empty{ text-align:center; padding:var(--sp-12) var(--sp-5); display:flex;
  flex-direction:column; align-items:center; gap:var(--sp-4); }
.empty-icon{ font-size:3rem; color:var(--text-3); opacity:.55; }
.page-empty h2{ font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-1); }
.page-empty p{ color:var(--text-2); max-width:38ch; }

/* ── هياكل التحميل (skeleton) ──────────────────────────────────────────── */
.skeleton-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.skeleton-card{ height:128px; border-radius:var(--r-lg); border:1px solid var(--border);
  background:linear-gradient(100deg,var(--bg-raised) 30%,var(--bg-surface) 50%,var(--bg-raised) 70%);
  background-size:200% 100%; animation:sk 1.3s ease-in-out infinite; }
@keyframes sk{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ── فتح بمعرّف: أداة ثانوية مطوية ─────────────────────────────────────── */
.open-by-id{ margin-top:var(--sp-8); border:1px dashed var(--border-strong);
  border-radius:var(--r-md); background:var(--bg-raised); }
.open-by-id summary{ cursor:pointer; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm);
  color:var(--text-2); display:flex; align-items:center; gap:var(--sp-2); user-select:none; }
.open-by-id summary::-webkit-details-marker{ display:none; }
.open-by-id[open] summary{ border-bottom:1px solid var(--border); }
.obi-body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }

/* ── عرض الفريق التفصيلي ───────────────────────────────────────────────── */
.team-detail{ display:flex; flex-direction:column; gap:var(--sp-5); }
.back-link{ align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sp-2);
  background:none; border:none; cursor:pointer; color:var(--text-2);
  font-size:var(--fs-sm); font-weight:var(--fw-med); padding:var(--sp-1) 0; }
.back-link:hover{ color:var(--accent); }

.td-banner{ position:relative; display:flex; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--elev-1);
  border-inline-start:5px solid var(--st-pending); }
.td-banner.standing-3{ border-inline-start-color:var(--accent); }
.td-banner.standing-2{ border-inline-start-color:var(--st-warn); }
.td-banner.standing-1{ border-inline-start-color:var(--st-ontime); }
.td-name{ font-size:var(--fs-2xl); font-weight:var(--fw-black); color:var(--text-1); }
.td-badges{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
.vis-badge,.standing-badge{ display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); font-weight:var(--fw-med); padding:.25rem .6rem; border-radius:var(--r-pill); }
.vis-badge.is-public{ background:var(--st-ontime-soft); color:var(--st-ontime); }
.vis-badge.is-private{ background:var(--st-pending-soft); color:var(--text-2); }
.standing-badge{ background:var(--accent-soft); color:var(--accent-strong); }
.td-desc{ margin-top:var(--sp-3); color:var(--text-2); line-height:var(--lh-normal); max-width:52ch; }
.td-stats{ display:flex; gap:var(--sp-6); align-items:flex-start; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-n{ font-size:var(--fs-2xl); font-weight:var(--fw-black); color:var(--text-1); line-height:1; }
.stat-l{ font-size:var(--fs-xs); color:var(--text-3); margin-top:var(--sp-1); }
.td-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* لوحة عامة (الأعضاء) */
.panel{ background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--elev-1); }
.panel-head{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.panel-head h3{ font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text-1); }
.count-pill{ font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--text-2);
  background:var(--bg-raised); border:1px solid var(--border); padding:.1rem .5rem; border-radius:var(--r-pill); }

/* قائمة الأعضاء */
.roster{ list-style:none; display:flex; flex-direction:column; gap:var(--sp-1); }
.roster-row{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-2);
  border-radius:var(--r-sm); transition:background var(--t-fast) var(--ease); }
.roster-row:hover{ background:var(--bg-raised); }
.avatar{ flex:0 0 38px; width:38px; height:38px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold);
  background:var(--accent-soft); color:var(--accent-strong); font-size:var(--fs-md); }
.roster-info{ display:flex; flex-direction:column; min-width:0; }
.roster-name{ font-weight:var(--fw-med); color:var(--text-1); }
.roster-role{ font-size:var(--fs-xs); color:var(--text-3); }
.role-icon{ margin-inline-start:auto; }
.role-icon.mgr{ color:var(--accent); }
.role-icon.sup{ color:var(--st-warn); }

/* إضافة عضو */
.add-member{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); }
.field-label{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-med);
  color:var(--text-2); margin-bottom:var(--sp-2); }
.add-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.add-row .select,.add-row .input{ flex:1; min-width:180px; }
.select,.input{ padding:.6rem .75rem; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg-input); color:var(--text-1); font-family:inherit; font-size:var(--fs-sm); }
.select:focus,.input:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.inline-err{ display:flex; align-items:center; gap:var(--sp-2); color:var(--st-late);
  font-size:var(--fs-sm); margin-top:var(--sp-2); }
.muted{ color:var(--text-3); font-size:var(--fs-sm); }

/* ── لوحة الإنشاء المنزلقة ─────────────────────────────────────────────── */
.drawer-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:60;
  animation:fade var(--t-base) var(--ease); }
.drawer{ position:fixed; inset-block:0; inset-inline-end:0; z-index:61; width:min(420px,100vw);
  background:var(--bg-surface); border-inline-start:1px solid var(--border);
  box-shadow:var(--elev-4); padding:var(--sp-6); overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--sp-4); animation:slidein var(--t-slow) var(--ease-out); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; }
.drawer-head h2{ font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-1); }
.form-stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.field{ display:flex; flex-direction:column; }
.field .input{ width:100%; }
.btn-block{ width:100%; justify-content:center; margin-top:var(--sp-2); }
.success-note{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4);
  background:var(--st-ontime-soft); border-radius:var(--r-md); color:var(--st-ontime); }
.success-note strong{ color:var(--text-1); }
.success-note p{ color:var(--text-2); font-size:var(--fs-sm); margin-top:var(--sp-1); }

/* مبدّل ثنائي (رؤية الفريق) */
.seg{ display:flex; gap:var(--sp-2); }
.seg-opt{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.6rem; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer;
  background:var(--bg-input); color:var(--text-2); font-family:inherit; font-size:var(--fs-sm);
  transition:all var(--t-fast) var(--ease); }
.seg-opt.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); font-weight:var(--fw-semi); }

@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slidein{ from{ transform:translateX(-100%); opacity:.5; } to{ transform:translateX(0); opacity:1; } }
html[dir="ltr"] .drawer{ animation-name:slidein-ltr; }
@keyframes slidein-ltr{ from{ transform:translateX(100%); opacity:.5; } to{ transform:translateX(0); opacity:1; } }

@media (max-width:768px){
  .teams-wrap{ padding:var(--sp-4) var(--sp-3) var(--sp-10); }
  .td-banner{ flex-direction:column; }
  .td-stats{ gap:var(--sp-8); }
}
@media (prefers-reduced-motion:reduce){
  .team-card,.tc-go,.drawer,.drawer-scrim,.skeleton-card{ animation:none; transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   دفعة الردم 2 — رحلة المهمة الكاملة (F5): تفاصيل المهمة، الأزرار السياقية،
   الألسنة (ملاحظات/محادثة/ملفات)، تمييز المتأخر. كل لون من متغيّرات الثيم،
   فيعمل عبر السمات الأربع والوضع الداكن تلقائياً. يرث لغة الردم 1 البصرية.
   ════════════════════════════════════════════════════════════════════════ */

/* أدوات مشتركة أُضيفت لهذه الدفعة */
.btn-ghost-danger{ background:transparent; border:1px solid var(--st-late); color:var(--st-late); }
.btn-ghost-danger:hover{ background:var(--st-late-soft); }
.drawer.wide{ width:min(560px, 94vw); }
.field-row{ display:flex; gap:var(--sp-4); }
.field-row .field{ flex:1; }
.check-row{ display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; padding:var(--sp-2) 0; }
.check-row input{ margin-top:.25rem; width:18px; height:18px; accent-color:var(--accent); }
.check-row span{ display:flex; flex-direction:column; gap:.15rem; }
.muted.tiny{ font-size:var(--fs-xs); }
.avatar{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-pill); background:var(--accent-soft);
  color:var(--accent-strong); font-weight:var(--fw-bold); font-size:var(--fs-sm); flex:0 0 auto; }
.avatar.sm{ width:24px; height:24px; font-size:var(--fs-xs); }

/* بطاقة المهمة في القائمة: قابلة للنقر + تمييز المتأخر بشريط جانبي أحمر */
.task-card.clickable{ cursor:pointer; width:100%; text-align:start; font-family:inherit;
  display:flex; flex-direction:column; gap:0; transition:transform var(--t-base) var(--ease-out),
  box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease); }
.task-card.clickable:hover{ transform:translateY(-2px); box-shadow:var(--elev-3); border-color:var(--border-strong); }
.task-card.clickable:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.task-card.row-late{ border-inline-start:4px solid var(--st-late); }

/* شارة الحالة (state-pill): تقرأ حالة دورة الحياة بنظرة */
.state-pill{ display:inline-flex; align-items:center; font-size:var(--fs-xs); font-weight:var(--fw-semi);
  padding:.2rem .6rem; border-radius:var(--r-pill); white-space:nowrap; }
.state-pill.sm{ font-size:.68rem; padding:.15rem .5rem; }
.state-pill.state-0{ background:var(--st-pending-soft); color:var(--st-pending); }   /* جديدة */
.state-pill.state-1{ background:var(--st-warn-soft);    color:var(--st-warn); }      /* قيد التنفيذ */
.state-pill.state-2{ background:var(--accent-soft);     color:var(--accent-strong); }/* منجزة */
.state-pill.state-3{ background:var(--st-ontime-soft);  color:var(--st-ontime); }    /* معتمدة */
.state-pill.state-4{ background:var(--st-late-soft);    color:var(--st-late); }      /* معتذر */

/* ── صفحة التفاصيل ─────────────────────────────────────────────────────── */
.task-detail-wrap{ max-width:820px; margin-inline:auto; padding:var(--sp-5) var(--sp-5) var(--sp-12); }

.td-banner-task{ background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--sp-6); box-shadow:var(--elev-1);
  border-inline-start:5px solid var(--accent); }
.td-banner-task.is-late{ border-inline-start-color:var(--st-late); }

.tdt-headline{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.tdt-title-row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.tdt-title{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--text-1); line-height:var(--lh-tight); margin:0; }
.tdt-details{ margin-top:var(--sp-4); color:var(--text-2); line-height:var(--lh-normal); white-space:pre-wrap; }

.decline-banner{ margin-top:var(--sp-4); display:flex; align-items:flex-start; gap:var(--sp-2);
  background:var(--st-late-soft); color:var(--st-late); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); font-size:var(--fs-sm); }

.tdt-meta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-4); margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--border); }
.tdt-meta{ display:flex; flex-direction:column; gap:.25rem; }
.m-label{ font-size:var(--fs-xs); color:var(--text-3); display:inline-flex; align-items:center; gap:.4rem; }
.m-value{ font-size:var(--fs-md); color:var(--text-1); font-weight:var(--fw-med); }
.m-value.late-text,.late-text{ color:var(--st-late); }
.m-value.ontime-text,.ontime-text{ color:var(--st-ontime); }

.tdt-assignees{ margin-top:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.assignee-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.assignee-chip{ display:inline-flex; align-items:center; gap:var(--sp-2);
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:.2rem .7rem .2rem .3rem; font-size:var(--fs-sm); color:var(--text-1); }

.tdt-actions{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* ── الألسنة ───────────────────────────────────────────────────────────── */
.tab-bar{ display:flex; gap:var(--sp-1); margin-top:var(--sp-6); border-bottom:1px solid var(--border); }
.tab{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer;
  font-family:inherit; font-size:var(--fs-sm); color:var(--text-3); font-weight:var(--fw-med);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tab:hover{ color:var(--text-1); }
.tab.on{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.tab-count{ font-size:var(--fs-xs); background:var(--bg-raised); color:var(--text-3);
  border-radius:var(--r-pill); padding:.05rem .45rem; min-width:1.4em; text-align:center; }
.tab.on .tab-count{ background:var(--accent-soft); color:var(--accent-strong); }
.tab-panel{ padding:var(--sp-5) 0; }
.center-muted{ text-align:center; padding:var(--sp-8) var(--sp-4); }
.scope-note{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm);
  background:var(--bg-raised); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); margin-bottom:var(--sp-4); }

/* ملاحظات التنفيذ */
.note-list{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.note-item{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); }
.note-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.note-author{ display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:var(--fw-semi); color:var(--text-1); font-size:var(--fs-sm); }
.note-time{ font-size:var(--fs-xs); color:var(--text-3); }
.note-body{ color:var(--text-2); line-height:var(--lh-normal); white-space:pre-wrap; margin:0; }

/* المحرّر المشترك (ملاحظة/رسالة) */
.composer{ display:flex; gap:var(--sp-3); align-items:flex-end; margin-top:var(--sp-3); }
.composer .input{ flex:1; resize:vertical; }
.composer .btn{ flex:0 0 auto; }

/* المحادثة الداخلية */
.chat-thread{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-4);
  max-height:420px; overflow-y:auto; padding:var(--sp-2); }
.msg-row{ display:flex; }
.msg-row.mine{ justify-content:flex-end; }
.msg-bubble{ max-width:78%; display:flex; flex-direction:column; gap:.2rem;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4); }
.msg-row.mine .msg-bubble{ background:var(--accent-soft); border-color:transparent; }
.msg-author{ font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--accent-strong); }
.msg-text{ color:var(--text-1); line-height:var(--lh-normal); white-space:pre-wrap; }
.msg-time{ font-size:.66rem; color:var(--text-3); align-self:flex-end; }

/* الملفات */
.file-list{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.file-item{ display:flex; align-items:center; gap:var(--sp-3); background:var(--bg-surface);
  border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); }
.file-item.is-closure{ border-inline-start:3px solid var(--st-ontime); }
.file-item.is-work{ border-inline-start:3px solid var(--st-pending); }
.file-kind-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-xs);
  font-weight:var(--fw-med); padding:.2rem .55rem; border-radius:var(--r-pill); white-space:nowrap; flex:0 0 auto; }
.file-kind-badge.closure{ background:var(--st-ontime-soft); color:var(--st-ontime); }
.file-kind-badge.work{ background:var(--st-pending-soft); color:var(--text-2); }
.file-main{ flex:1; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.file-name{ color:var(--text-1); font-weight:var(--fw-med); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-sub{ font-size:var(--fs-xs); color:var(--text-3); }
.file-dl{ flex:0 0 auto; }
.file-hidden{ display:block; margin-bottom:var(--sp-3); font-size:var(--fs-sm); color:var(--text-2); }
.file-upload-zone{ background:var(--bg-raised); border:1px dashed var(--border-strong);
  border-radius:var(--r-md); padding:var(--sp-4); margin-top:var(--sp-2); }
.upload-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* اختيار المكلَّفين في نموذج الإنشاء */
.assignee-picker{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.pick-chip{ display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:.25rem .8rem .25rem .35rem; font-family:inherit; font-size:var(--fs-sm); color:var(--text-2);
  transition:all var(--t-fast) var(--ease); }
.pick-chip:hover{ border-color:var(--border-strong); }
.pick-chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); font-weight:var(--fw-med); }

@media (max-width:768px){
  .task-detail-wrap{ padding:var(--sp-4) var(--sp-3) var(--sp-10); }
  .td-banner-task{ padding:var(--sp-4); }
  .field-row{ flex-direction:column; gap:var(--sp-3); }
  .msg-bubble{ max-width:90%; }
}
@media (prefers-reduced-motion:reduce){
  .task-card.clickable,.tab,.pick-chip{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   دفعة الردم 2 — صقل احترافي لصفحة المهمة + مؤشّر التحديث الآني
   طبقة فوق التعريفات السابقة (نفس الرموز). ترفع الهرمية البصرية والإيقاع
   دون تغيير بنية الترميز. كل لون من متغيّرات الثيم.
   ════════════════════════════════════════════════════════════════════════ */

/* شريط علوي: رابط العودة + مؤشّر "مباشر" */
.td-topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.live-dot{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-xs);
  font-weight:var(--fw-med); color:var(--st-ontime);
  background:var(--st-ontime-soft); padding:.25rem .7rem; border-radius:var(--r-pill); }
.live-dot .dot{ width:8px; height:8px; border-radius:50%; background:var(--st-ontime);
  box-shadow:0 0 0 0 var(--st-ontime); animation:livePulse 2s ease-out infinite; }
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 var(--st-ontime-soft); }
  70%{ box-shadow:0 0 0 6px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* لافتة المهمة: عمق أوضح وحافة لون أعرض بتدرّج خفيف */
.td-banner-task{
  border-radius:var(--r-xl); padding:var(--sp-6) var(--sp-6) var(--sp-5);
  box-shadow:var(--elev-2); border-inline-start-width:6px;
  position:relative; overflow:hidden;
}
.td-banner-task::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--accent), transparent 70%);
  opacity:.6;
}
.td-banner-task.is-late::before{ background:linear-gradient(90deg, var(--st-late), transparent 70%); }

.tdt-title{ font-size:var(--fs-3xl); letter-spacing:-.01em; }
.tdt-details{ font-size:var(--fs-md); color:var(--text-2); max-width:62ch; }

/* شبكة الميتا: بطاقات صغيرة بخلفية مرفوعة بدل صفوف عارية */
.tdt-meta-grid{ gap:var(--sp-3); }
.tdt-meta{ background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); gap:.4rem; }
.m-label{ text-transform:none; letter-spacing:0; }
.m-value{ font-size:var(--fs-lg); }

/* رقائق المكلَّفين: أوضح */
.assignee-chip{ background:var(--bg-raised); padding:.25rem .85rem .25rem .35rem; font-weight:var(--fw-med); }

/* أزرار الانتقال: أبرز وأكبر لمسة */
.tdt-actions .btn{ min-height:44px; padding-inline:var(--sp-5); font-weight:var(--fw-semi); border-radius:var(--r-md); }

/* شريط الألسنة: مقسّم بخلفية مرفوعة بدل خطّ سفلي رفيع */
.tab-bar{ gap:var(--sp-1); margin-top:var(--sp-6); padding:var(--sp-1);
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-lg); border-bottom:1px solid var(--border); }
.tab{ flex:1; justify-content:center; border-bottom:none; border-radius:var(--r-md);
  padding:var(--sp-3); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tab.on{ background:var(--bg-surface); color:var(--accent-strong);
  box-shadow:var(--elev-1); border-bottom:none; }

/* المحرّر: حقل وزرّ متناسقان أوضح */
.composer{ background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-3); align-items:stretch; }
.composer .input{ border:none; background:transparent; resize:none; min-height:2.6rem; }
.composer .input:focus{ outline:none; box-shadow:none; }
.composer .btn{ align-self:flex-end; border-radius:var(--r-md); min-height:42px; }

/* المحادثة: فقاعات بذيل خفيف وإيقاع أنظف */
.chat-thread{ gap:var(--sp-2); padding:var(--sp-3) var(--sp-1); }
.msg-bubble{ border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4); box-shadow:var(--elev-1); border:none; }
.msg-row.mine .msg-bubble{ border-end-end-radius:var(--r-xs); }
.msg-row:not(.mine) .msg-bubble{ border-end-start-radius:var(--r-xs); background:var(--bg-surface); }

/* الملفات: بطاقات أوضح وأيقونة تنزيل أبرز */
.file-item{ border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); transition:border-color var(--t-fast) var(--ease); }
.file-item:hover{ border-color:var(--border-strong); }
.file-dl{ width:40px; height:40px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent-strong); }
.file-dl:hover{ background:var(--accent); color:var(--accent-on); }

/* قائمة الملاحظات: شريط جانبي خفيف يوحّدها بصرياً */
.note-item{ border-radius:var(--r-md); border-inline-start:3px solid var(--accent-soft); }

@media (prefers-reduced-motion:reduce){
  .live-dot .dot{ animation:none; }
}

/* ── نقل الإدارة وتغيير الدور (دفعة الردم 3 · F6+F7) ───────────────────── */

/* زر النقل في شريط أفعال الفريق: خطر ناعم يميّزه عن الأفعال العادية */
.btn-danger-soft{background:var(--st-warn-soft);color:var(--st-late);
  border:1px solid var(--st-late)}
.btn-danger-soft:hover:not(:disabled){background:var(--st-late);color:#fff;transform:translateY(-1px)}

/* زر تغيير دور العضو داخل صفّ القائمة */
.btn-role-toggle{display:inline-flex;align-items:center;gap:var(--sp-1);
  margin-inline-start:auto;padding:var(--sp-1) var(--sp-3);font-size:.82rem;
  border-radius:var(--r-md);background:var(--bg-raised);color:var(--text-2);
  border:1px solid var(--border);cursor:pointer;white-space:nowrap;transition:all .15s}
.btn-role-toggle:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-role-toggle:disabled{opacity:.5;cursor:not-allowed}

/* تلميح تحت حقل */
.field-hint{margin:var(--sp-1) 0 0;font-size:.8rem;color:var(--text-3)}

/* قائمة مصائر المدير السابق: بطاقات اختيار بوصف الأثر */
.fate-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.fate-opt{display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;
  padding:var(--sp-3) var(--sp-4);text-align:start;cursor:pointer;
  border-radius:var(--r-md);background:var(--bg-surface);
  border:1.5px solid var(--border);transition:all .15s}
.fate-opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.fate-opt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow-sm)}
.fate-opt i{font-size:1.1rem;color:var(--text-2);margin-top:2px;flex:none}
.fate-opt.on i{color:var(--accent)}
.fate-opt span{display:flex;flex-direction:column;gap:2px}
.fate-opt strong{font-size:.92rem;color:var(--text-1)}
.fate-opt small{font-size:.8rem;color:var(--text-3);line-height:1.4}
/* المصير الأخطر (التجميد): إشارة خطر بصرية */
.fate-opt.is-danger i{color:var(--st-late)}
.fate-opt.is-danger.on{border-color:var(--st-late);background:var(--st-warn-soft);box-shadow:var(--shadow-sm)}
.fate-opt.is-danger.on i{color:var(--st-late)}

/* تأكيد إضافي للتجميد */
.confirm-check{display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-3);border-radius:var(--r-md);
  background:var(--st-warn-soft);border:1px solid var(--st-late);
  font-size:.86rem;color:var(--text-1);cursor:pointer}
.confirm-check input{margin-top:2px;flex:none}

/* ── تبويب نطاق الفرق لمدير المنصة (دفعة الردم 3 · F7) ─────────────────── */
.scope-tabs{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);
  margin-bottom:var(--sp-5);background:var(--bg-raised);
  border-radius:var(--r-pill);border:1px solid var(--border)}
.scope-tab{display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-5);font-size:.9rem;font-weight:600;
  border:none;border-radius:var(--r-pill);background:transparent;
  color:var(--text-2);cursor:pointer;transition:all .15s}
.scope-tab:hover{color:var(--text-1)}
.scope-tab.on{background:var(--accent);color:var(--accent-on);box-shadow:var(--shadow-sm)}

/* ── بطاقة المدير الحالي في لوحة النقل (دفعة الردم 3 · F7) ──────────────── */
.current-mgr{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--accent-soft);border:1px solid var(--border)}
.cm-avatar{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--accent);color:var(--accent-on);
  font-weight:700;font-size:.95rem}
.cm-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.cm-label{font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.cm-name{font-size:.96rem;font-weight:600;color:var(--text-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-crown{margin-inline-start:auto;color:var(--st-warn);font-size:1.05rem}

/* ── رسم التطوّر الزمني (الباب التاسع) — أعمدة مزدوجة: في الموعد/متأخرة ──── */
.trend-chart{display:flex;align-items:flex-end;justify-content:space-around;
  gap:6px;height:180px;padding-top:10px}
.trend-col{display:flex;gap:4px;align-items:flex-end;flex:1;max-width:60px;height:100%}
.trend-col .bar{flex:1;border-radius:4px 4px 0 0;transition:opacity .2s}
.trend-col:hover .bar{opacity:.85}
.trend-col .b1{background:var(--accent)}
.trend-col .b2{background:#f0a30a}
.trend-labels{display:flex;justify-content:space-around;
  font-size:.7rem;color:var(--text-3);margin-top:6px}
.legend-sw{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-inline-end:5px;vertical-align:middle}
@media (max-width:640px){.trend-chart{height:140px}}

/* ── منتقي الفريق في الداشبورد (الباب التاسع: الغوص من قائمة لا معرّف) ──── */
.team-picker{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.team-chip{display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--border);background:var(--bg-input,transparent);
  color:var(--text-2);font-size:.82rem;padding:.4rem .8rem;border-radius:9px;
  cursor:pointer;transition:all .15s}
.team-chip:hover{border-color:var(--accent);color:var(--text-1)}
.team-chip.active{background:var(--accent);color:var(--accent-on);border-color:var(--accent);font-weight:600}
.team-chip i{font-size:.78rem;opacity:.85}

/* ── شريط فلاتر المهام (دفعة الردم 2 — F5: /tasks العملية) ───────────────── */
.task-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4);
  max-width:720px;margin-bottom:var(--sp-4);padding:var(--sp-3) var(--sp-4);
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.task-filters .filter-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.task-filters .filter-label{display:inline-flex;align-items:center;gap:.35rem;
  font-size:var(--fs-sm);color:var(--text-2);font-weight:var(--fw-semi)}
.task-filters .seg.sm .seg-opt{padding:.25rem .6rem;font-size:var(--fs-sm)}
.task-filters .input.sm{padding:.3rem .6rem;font-size:var(--fs-sm);min-width:10rem}
.task-filters .filter-reset{margin-inline-start:auto;align-self:center}
.task-card .tc-team{font-weight:var(--fw-semi);color:var(--accent-strong)}

/* ── بطاقة أكثر الفرق نشاطاً (الباب التاسع — نظرة المنصة) ─────────────────── */
.active-team-list{display:flex;flex-direction:column;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.active-team-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);
  border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;
  background:var(--bg-surface);transition:border-color .15s,transform .15s}
.active-team-row:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.active-team-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.active-team-row .at-main{flex:1;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.active-team-row .at-name{font-weight:var(--fw-bold);color:var(--text-1)}
.active-team-row .at-bar-track{height:6px;border-radius:3px;background:var(--accent-soft);overflow:hidden}
.active-team-row .at-bar-fill{height:100%;background:var(--accent);border-radius:3px;min-width:2px}

/* ══════════════════════════════════════════════════════════════════════════
   طبقة الاجتماع الحيّ — إعادة تصميم احترافية (دفعة واجهة الاجتماعات)
   --------------------------------------------------------------------------
   وضعان: لوحة الإعداد (قبل البث، بطاقات dash-card) ووضع المسرح (أثناء البث):
   شبكة فيديو مهيمنة + شريط تحكّم سفلي عائم بأزرار دائرية ذات حالة مرئية.
   كله tokens؛ الاتجاه منطقي فينعكس مع RTL/LTR. المسرح داكن دائماً (سياق فيديو).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── مسرح الفيديو ─────────────────────────────────────────────────────────
   داكن ثابت بصرف النظر عن الثيم — معيار صناعي لشاشات المكالمات يريح العين
   ويُبرز الفيديو. نحقن الفيديوهات داخل .lk-stage عبر livekit-bridge.js. */
.meet-stage{position:relative;background:#0b0f0e;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--elev-3);margin-top:var(--sp-4)}

/* ── الوضع الغامر (أثناء البث): المسرح يملأ منطقة المحتوى كاملة بخلفية داكنة
   كمنصّات الاجتماعات الكبرى — لا جزيرة وسط صفحة فاتحة. main-body يفقد حشوته
   وحدّ عرضه، والمسرح يمتدّ بكل الاتجاهات. */
.main-body.meet-immersive{padding:0;overflow:hidden}
.meet-stage-wrap{position:absolute;inset:0;display:flex}
.meet-immersive .meet-stage{flex:1;margin:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column}
.meet-immersive .lk-stage{flex:1;align-content:center;min-height:0}
/* البلاطات تحافظ على نسبة 16:9 محترمة فتبدو كاميرات حقيقية لا مستطيلات ممدودة */
.meet-immersive .lk-tile{aspect-ratio:16/9;max-height:100%;margin-inline:auto;width:100%}
.lk-stage{display:grid;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) calc(var(--sp-8) + var(--sp-6));
  min-height:360px;align-content:center;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* تكيّف عدد البلاطات: واحد يملأ، اثنان متجاوران، توازن دقيق لـ 3-6 ثم شبكة حُرّة */
.lk-stage[data-count="1"]{grid-template-columns:minmax(0,860px);justify-content:center}
.lk-stage[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.lk-stage[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.lk-stage[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.lk-stage[data-count="5"],.lk-stage[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}

/* بلاطة مشارك */
.lk-tile{position:relative;background:#000;border-radius:var(--r-md);
  overflow:hidden;aspect-ratio:16/9;border:2px solid transparent;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.lk-video{width:100%;height:100%;object-fit:cover;display:block}
/* المتحدّث النشط: إطار بلون اللكنة + هالة */
.lk-tile.is-speaking{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 22px var(--accent-soft)}
/* بلاطتي أنا: وسم لطيف بالزاوية */
.lk-tile.is-local::after{content:"";position:absolute;inset-block-start:.5rem;
  inset-inline-end:.5rem;width:9px;height:9px;border-radius:var(--r-pill);
  background:var(--st-online);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.lk-name{position:absolute;inset-inline-start:.5rem;inset-block-end:.5rem;
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(0,0,0,.6);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-med);
  padding:.2rem .55rem;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
.lk-name .mic-off{color:var(--st-late)}
/* بلاطة بكاميرا متوقّفة/محجوزة: أيقونة كبيرة وسط بلاطة داكنة */
.lk-camoff{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:#111;color:rgba(255,255,255,.4)}
.lk-camoff i{font-size:2rem}
/* شريط تنبيه داخل المسرح (كاميرا محجوزة/مرفوضة) */
.meet-stage-note{position:absolute;inset-block-start:var(--sp-3);inset-inline:0;
  margin-inline:auto;width:max-content;max-width:90%;z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(0,0,0,.7);color:#fff;font-size:var(--fs-sm);
  padding:.5rem 1rem;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
.meet-stage-note i{color:var(--st-warn)}

/* حالة فارغة داخل المسرح (لم ينضمّ أحد بعد) */
.lk-empty{grid-column:1/-1;text-align:center;color:rgba(255,255,255,.7);
  padding:var(--sp-10) var(--sp-4);display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-3)}
.lk-empty i{font-size:2.25rem;color:rgba(255,255,255,.35)}
.lk-empty .le-title{font-size:var(--fs-lg);font-weight:var(--fw-semi);color:#fff}
.lk-empty .le-note{font-size:var(--fs-sm)}

/* ── شريط التحكّم السفلي العائم ───────────────────────────────────────────
   أزرار دائرية بحالة مرئية: مفعّل (شفاف) / مكتوم (أحمر صلب). زرّ المغادرة دائماً
   أحمر. حدّ لمس 44px محفوظ. */
/* الشريط يطفو حُرّاً في الوسط السفلي كحبّة زجاجية مجمّعة (نمط Meet/Teams الحديث):
   لا يمتدّ عرض المسرح، بل يتكتّل في منتصفه مع تباعد مريح عن الحافّة. */
.meet-controls{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:rgba(18,22,21,.55);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  position:absolute;inset-inline:0;inset-block-end:var(--sp-5);margin-inline:auto;
  width:max-content;max-width:calc(100% - var(--sp-6));z-index:2}
.meet-controls.static{position:static;margin-block-start:var(--sp-4);background:rgba(18,22,21,.7)}
.ctrl-btn{width:52px;height:52px;min-height:52px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);
  color:#fff;font-size:var(--fs-lg);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease)}
.ctrl-btn:hover:not(:disabled){background:rgba(255,255,255,.22);transform:translateY(-1px)}
.ctrl-btn:active{transform:translateY(1px) scale(.97)}
.ctrl-btn:disabled{opacity:.5;cursor:not-allowed}
/* الحالة المكتومة/المعطّلة: أحمر صلب + شرطة قطرية ضمنية في الأيقونة */
.ctrl-btn.is-off{background:var(--st-late);border-color:var(--st-late)}
.ctrl-btn.is-off:hover:not(:disabled){filter:brightness(1.08);background:var(--st-late)}
/* زرّ نسخ الرابط في المسرح بعد النسخ: أخضر تأكيد لحظي */
.ctrl-btn.is-copied{background:var(--st-ontime);border-color:var(--st-ontime)}
/* زرّ غرفة الانتظار في المسرح + شارة عدد المنتظِرين (تنبض عند وجود منتظِر) */
.ctrl-btn.lobby-btn{position:relative}
.ctrl-btn.lobby-btn.has-waiting{background:var(--st-warn);border-color:var(--st-warn);
  animation:lobby-pulse 1.6s ease-in-out infinite}
.lobby-badge{position:absolute;inset-block-start:-2px;inset-inline-end:-2px;
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--st-late);color:#fff;font-size:11px;font-weight:var(--fw-bold);
  display:flex;align-items:center;justify-content:center;border:2px solid #0b0f0e}
@keyframes lobby-pulse{0%,100%{box-shadow:0 0 0 0 var(--st-warn-soft)}
  50%{box-shadow:0 0 0 8px transparent}}
/* لوحة قبول المنتظِرين داخل المسرح (تطفو فوق الفيديو، أسفل الشريط) */
.stage-lobby{position:absolute;inset-block-end:84px;inset-inline:auto;
  inset-inline-end:var(--sp-4);z-index:4;width:min(340px,86%);
  background:var(--bg-surface);color:var(--text-1);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--elev-4);overflow:hidden;
  animation:sl-in var(--t-base) var(--ease-out)}
@keyframes sl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stage-lobby .sl-head{display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);font-weight:var(--fw-bold)}
.stage-lobby .sl-head i{color:var(--st-warn);margin-inline-end:.4rem}
.stage-lobby .sl-empty{padding:var(--sp-4);color:var(--text-3);font-size:var(--fs-sm)}
.stage-lobby .sl-list{list-style:none;margin:0;padding:var(--sp-2)}
.stage-lobby .sl-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
.stage-lobby .sl-row:hover{background:var(--bg-raised)}
.stage-lobby .sl-name{font-weight:var(--fw-semi);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-lobby .sl-actions{display:flex;gap:var(--sp-2);flex-shrink:0}
/* زرّ دعوة صغير في صف الاجتماع (صفحة الفريق) */
.btn-sm{padding:.35rem .7rem;font-size:var(--fs-xs);min-height:auto}
.meet-invite{flex-shrink:0}
@media (max-width:560px){ .meet-invite .meet-invite-lbl{display:none} }
/* زرّ المغادرة: أحمر دائماً، مفصول بفاصل رأسي ومسافة عن مجموعة التحكّم (نمط Meet) */
.ctrl-btn.leave{width:64px;background:var(--st-late);border-color:var(--st-late);
  margin-inline-start:var(--sp-2);position:relative}
.ctrl-btn.leave::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--sp-2));
  inset-block:6px;width:1px;background:rgba(255,255,255,.18)}
.ctrl-btn.leave:hover:not(:disabled){filter:brightness(1.08)}
/* زرّ "إنهاء للجميع" (المنظّم) داخل الشريط: أحمر صلب، يلي المغادرة مباشرة */
.ctrl-btn.end-all{background:var(--st-late);border-color:var(--st-late)}
.ctrl-btn.end-all:hover:not(:disabled){filter:brightness(1.08)}
/* تسجيل مباشر (F11): الزرّ عادي حتى التسجيل، ثم أحمر بنبض حول الحدّ */
.ctrl-btn.rec-btn.is-rec{background:var(--st-late);border-color:var(--st-late);
  animation:recPulse 1.6s ease-out infinite}
@keyframes recPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-late) 55%,transparent)}
  70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--st-late) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-late) 0%,transparent)}}
/* شريط «جارٍ حفظ التسجيل» — تحت الشريط، واضح يطمئن المنظّم ويمنع الإنهاء المبكر */
.rec-saving{display:flex;align-items:center;gap:var(--sp-2);justify-content:center;
  margin-block-start:var(--sp-3);padding:var(--sp-2) var(--sp-4);
  background:color-mix(in srgb,var(--brand) 12%,transparent);
  color:var(--brand);border-radius:var(--r-pill);font-weight:600;
  font-size:var(--fs-sm);max-width:max-content;margin-inline:auto}
.ctrl-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* وسم النقل المشفّر (لا E2EE) — صدق الواجهة، يطفو فوق المسرح بلا إزعاج */
.meet-transport-badge{position:absolute;inset-block-start:var(--sp-3);
  inset-inline-start:var(--sp-3);z-index:2;display:inline-flex;align-items:center;
  gap:.4rem;background:rgba(0,0,0,.5);color:#fff;font-size:var(--fs-xs);
  padding:.3rem .7rem;border-radius:var(--r-pill);backdrop-filter:blur(4px);
  border:1px solid var(--st-warn)}
.meet-transport-badge i{color:var(--st-warn)}

/* شارة عدد المشاركين أعلى المسرح */
.meet-count-badge{position:absolute;inset-block-start:var(--sp-3);
  inset-inline-end:var(--sp-3);z-index:2;display:inline-flex;align-items:center;
  gap:.4rem;background:rgba(0,0,0,.5);color:#fff;font-size:var(--fs-xs);
  padding:.3rem .7rem;border-radius:var(--r-pill);backdrop-filter:blur(4px)}

/* تنبيه النقل داخل البطاقات (نسخة ساكنة قبل الدخول) */
.meet-notice{display:flex;gap:var(--sp-3);align-items:flex-start;
  background:var(--st-warn-soft);border:1px solid var(--st-warn);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);color:var(--text-1)}
.meet-notice i{color:var(--st-warn);font-size:var(--fs-lg);margin-top:2px}
.meet-notice strong{display:block;margin-bottom:2px}
.meet-notice p{font-size:var(--fs-sm);color:var(--text-2);margin:0}

/* غلاف دخول الضيف: بطاقة مركزية أنيقة */
.meet-guest-wrap{max-width:480px;margin-inline:auto}
.meet-waiting{text-align:center;padding:var(--sp-6) var(--sp-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.meet-waiting > i{font-size:2.25rem;color:var(--accent)}
/* شاشة انتهاء الاجتماع */
.meet-ended{text-align:center;padding:var(--sp-8) var(--sp-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.meet-ended > i{font-size:2.5rem;color:var(--text-3)}
.fa-spin-slow{animation:spin-slow 2.4s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* مساعدات تباعد صغيرة تستخدمها شاشات الاجتماع (محصورة الاستخدام، آمنة) */
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.dc-row{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-3);flex-wrap:wrap}
.mis{margin-inline-start:var(--sp-2)}

/* الجوّال: المسرح أطول، الأزرار أصغر قليلاً، حالة عمود واحد */
@media (max-width:560px){
  .lk-stage,.lk-stage[data-count="1"],.lk-stage[data-count="2"]{grid-template-columns:1fr}
  .ctrl-btn{width:48px;height:48px;font-size:var(--fs-md)}
}

/* ════════════════════════════════════════════════════════════════════════════
   الدفعة 9ب — رفع تجربة المستخدم: شاشات المصادقة + التنبيهات الآنية
   كل الألوان من رموز الثيم؛ لا اتجاه مضمَّن (ينعكس من <html>).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. صدفة المصادقة: لوح جانبي بهوية + لوح نموذج متمركز ───────────────────── */
.auth-shell{display:flex;min-height:100vh;min-height:100dvh;background:var(--bg-app)}

/* اللوح الجانبي — تدرّج لون الثيم، يظهر على الشاشات الواسعة فقط */
.auth-aside{flex:0 0 44%;max-width:560px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--sp-8) var(--sp-7);color:#fff;
  background:linear-gradient(135deg,var(--bg-rail) 0%,var(--accent-strong) 55%,var(--accent) 100%)}
.auth-aside::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background:radial-gradient(circle at 80% 15%,#fff 0,transparent 42%),
             radial-gradient(circle at 12% 88%,#fff 0,transparent 38%)}
.auth-aside > *{position:relative;z-index:1}
.auth-aside-brand{display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:.5px}
.auth-aside-brand .logo{width:46px;height:46px;border-radius:var(--r-md);
  background:rgba(255,255,255,.16);display:grid;place-items:center;
  font-size:var(--fs-md);backdrop-filter:blur(4px)}
.auth-aside-hero .hero-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);
  line-height:var(--lh-tight);margin-bottom:var(--sp-3)}
.auth-aside-hero p{opacity:.86;line-height:var(--lh-relaxed);max-width:34ch}
.auth-aside-trust{display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-sm);opacity:.92;
  background:rgba(255,255,255,.10);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);backdrop-filter:blur(4px);max-width:max-content}
.auth-aside-trust .tdot{display:grid;place-items:center;width:30px;height:30px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.18);flex-shrink:0}

/* لوح النموذج */
.auth-main{flex:1;display:flex;flex-direction:column;min-width:0}
.auth-topbar{display:flex;justify-content:flex-end;padding:var(--sp-4) var(--sp-5)}
.auth-tools{display:flex;align-items:center;gap:var(--sp-2)}
.auth-tools select{padding:.5rem .8rem;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-surface);color:var(--text-1);
  font-size:var(--fs-sm);cursor:pointer;min-height:var(--touch-min)}
.auth-tools .mode-toggle{width:var(--touch-min);height:var(--touch-min);border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-surface);color:var(--text-2);
  cursor:pointer;display:grid;place-items:center;font-size:var(--fs-md);
  transition:background var(--t-fast),color var(--t-fast)}
.auth-tools .mode-toggle:hover{background:var(--accent-soft);color:var(--accent-strong)}

.auth-body{flex:1;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4) var(--sp-5) var(--sp-8)}

/* لوحة الثيمات المنبثقة في شاشة المصادقة (فوق غطاء) */
.auth-pop{position:fixed;top:calc(var(--touch-min) + var(--sp-5));
  inset-inline-end:var(--sp-5);z-index:1001;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--elev-4,0 12px 36px rgba(0,0,0,.22));
  padding:var(--sp-4);min-width:240px;
  animation:auth-rise var(--t-fast) var(--ease-out) both}
html[dir="ltr"] .auth-pop{inset-inline-end:auto;inset-inline-start:var(--sp-5)}
.auth-card{width:100%;max-width:400px;display:flex;flex-direction:column;
  gap:var(--sp-3);text-align:start;animation:auth-rise var(--t-base) var(--ease-out) both}
@keyframes auth-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-brand{display:flex;justify-content:center;margin-bottom:var(--sp-2)}
.auth-brand .logo{width:54px;height:54px;border-radius:var(--r-lg);
  background:var(--accent);color:var(--accent-on);display:grid;place-items:center;
  font-size:var(--fs-lg);font-weight:var(--fw-bold);box-shadow:0 4px 14px var(--accent-soft)}
.auth-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);
  color:var(--text-1);text-align:center;margin:0}
.auth-sub{font-size:var(--fs-sm);color:var(--text-2);text-align:center;margin:0}
.auth-foot{font-size:var(--fs-sm);color:var(--text-2);text-align:center;margin-top:var(--sp-3);
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);flex-wrap:wrap}
.auth-foot a,.auth-sub a{color:var(--accent-strong);font-weight:var(--fw-semi);text-decoration:none}
.auth-foot a{padding:.35rem .6rem;border-radius:var(--r-md);transition:background var(--t-fast)}
.auth-foot a:hover{background:var(--accent-soft);text-decoration:none}
.auth-sub a:hover{text-decoration:underline}

/* حقول النموذج */
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld > span{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-2)}
.fld input{width:100%;padding:.7rem .95rem;border:1px solid var(--border-strong);
  border-radius:var(--r-md);background:var(--bg-surface);color:var(--text-1);
  font-size:var(--fs-md);font-family:inherit;min-height:var(--touch-min);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-card .btn-primary{width:100%;justify-content:center;margin-top:var(--sp-2)}

/* الجوّال: يُخفى اللوح الجانبي، النموذج يملأ العرض */
@media (max-width:860px){
  .auth-aside{display:none}
}

/* ── 2. منظومة التنبيهات الموحّدة (alert) ───────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:var(--lh-normal);border:1px solid transparent}
.alert > i{margin-top:.15rem;flex-shrink:0}
.alert a{color:inherit;font-weight:var(--fw-semi);text-decoration:underline}
.alert-err{background:var(--danger-soft,rgba(220,53,69,.10));
  border-color:var(--danger,rgba(220,53,69,.5));color:var(--danger,#b22)}
.alert-ok{background:var(--ok-soft,rgba(40,167,69,.10));
  border-color:var(--ok,rgba(40,167,69,.5));color:var(--ok,#1c7a35)}
.alert-info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}

/* ── 3. مضيف التنبيهات الآنية (toast) ───────────────────────────────────────── */
.uaetoast-host{position:fixed;top:16px;width:360px;max-width:calc(100vw - 32px);
  z-index:2147483000;pointer-events:none}
html[dir="rtl"] .uaetoast-host{right:16px;left:auto}
html[dir="ltr"] .uaetoast-host{left:16px;right:auto}
.uaetoast{pointer-events:auto;width:100%;min-height:56px;box-sizing:border-box;margin-bottom:8px;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--bg-surface);color:var(--text-1);opacity:1;
  border:1px solid var(--border);border-inline-start:3px solid var(--accent);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  animation:uaetoast-in .22s ease-out}
@keyframes uaetoast-in{from{transform:translateY(-8px)}to{transform:none}}
.uaetoast.t-meet{border-inline-start-color:var(--accent-strong)}
.uaetoast.t-task{border-inline-start-color:#f0a30a}
.uaetoast.t-msg{border-inline-start-color:var(--accent)}
.uaetoast-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-strong);font-size:var(--fs-md)}
.uaetoast.t-task .uaetoast-ic{background:rgba(240,163,10,.14);color:#b97c05}
.uaetoast-main{flex:1 1 auto;min-width:0}
.uaetoast-title{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-1);margin-bottom:2px}
.uaetoast-body{font-size:var(--fs-xs);color:var(--text-2);line-height:var(--lh-normal)}
.uaetoast-act{margin-top:6px;font-size:var(--fs-xs);font-weight:var(--fw-semi);
  color:var(--accent-strong);background:none;border:0;cursor:pointer;padding:0}
.uaetoast-act:hover{text-decoration:underline}
.uaetoast-close{flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:var(--text-3);font-size:var(--fs-sm);width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.uaetoast-close:hover{color:var(--text-1);background:var(--bg-app)}
@media (max-width:560px){
  .uaetoast-host{top:auto;bottom:80px;left:12px;right:12px;width:auto;max-width:none}
}

/* ── 4. تنقيح فقاعات المحادثة + أزرار الحذف عند المرور ───────────────────────── */
.chat-layout .bubble{max-width:78%}
@media (max-width:768px){ .chat-layout .bubble{max-width:88%} }
/* أزرار الحذف داخل الفقاعة: خفيّة حتى المرور أو التركيز (وصولية محفوظة) */
.chat-layout .bubble .btn-icon{opacity:0;transition:opacity var(--t-fast)}
.chat-layout .msg:hover .bubble .btn-icon,
.chat-layout .bubble:focus-within .btn-icon{opacity:.75}
.chat-layout .bubble .btn-icon:hover,
.chat-layout .bubble .btn-icon:focus-visible{opacity:1}
/* أجهزة اللمس: تظهر عند لمس الفقاعة (focus-within) لا دائماً */

/* ── 5. نبضة حياة الداشبورد عند وصول حدث آني ────────────────────────────────── */
.dash-toolbar .live-dot.pulsing{animation:live-pulse .9s var(--ease-out) 2}
@keyframes live-pulse{0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.7);opacity:.55}}
.auth-dot{margin-inline:.4rem;color:var(--text-3)}

/* ════════════════════════════════════════════════════════════════════════
   الدفعة 9C — صقل تجربة القروبات/الفرق/الاجتماعات + لمسة خاصة.
   كل الأصناف ببادئة nc- (لا تتعارض مع Bootstrap ولا مع أصناف المشروع).
   صفر لون ثابت: كله من متغيّرات الثيم، فيعمل عبر السمات الأربع والداكن.
   ════════════════════════════════════════════════════════════════════════ */

/* ── لمسة خاصة: دخول متدرّج للبطاقات (stagger) ───────────────────────────── */
.cards-grid .team-card{ animation:nc-rise var(--t-slow) var(--ease-out) both; }
.cards-grid .team-card:nth-child(1){ animation-delay:0ms }
.cards-grid .team-card:nth-child(2){ animation-delay:45ms }
.cards-grid .team-card:nth-child(3){ animation-delay:90ms }
.cards-grid .team-card:nth-child(4){ animation-delay:135ms }
.cards-grid .team-card:nth-child(5){ animation-delay:180ms }
.cards-grid .team-card:nth-child(6){ animation-delay:225ms }
.cards-grid .team-card:nth-child(n+7){ animation-delay:260ms }
@keyframes nc-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }

/* ── صفّ آخر نشاط على البطاقة (فريق وقروب) ──────────────────────────────── */
.nc-activity{ display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); color:var(--text-3); margin-inline-start:auto; white-space:nowrap; }
.nc-activity i{ font-size:.7rem; }
.nc-activity.is-live{ color:var(--st-ontime); font-weight:var(--fw-med); }

/* ── سطر اسم مدير الفريق في اللافتة (td-banner) ─────────────────────────── */
.nc-managed-by{ display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-3); padding:.35rem .7rem; border-radius:var(--r-pill);
  background:var(--bg-raised); border:1px solid var(--border); }
.nc-mb-avatar{ width:28px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--accent); color:var(--accent-on);
  font-size:.82rem; font-weight:var(--fw-bold); }
.nc-mb-info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.nc-mb-label{ font-size:.7rem; color:var(--text-3); }
.nc-mb-name{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22ch; }
.nc-mb-crown{ margin-inline-start:var(--sp-1); color:var(--st-warn); font-size:.95rem; }

/* ── نبضة الاجتماع المباشر في صفّ القائمة (يعيد استخدام live-pulse من 9B) ── */
.nc-live-chip{ display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); font-weight:var(--fw-med); padding:.25rem .7rem;
  border-radius:var(--r-pill); background:var(--st-ontime-soft); color:var(--st-ontime); }
.nc-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--st-ontime);
  display:inline-block; animation:live-pulse 1.4s ease-in-out infinite; }
.meet-row.is-live{ background:var(--st-ontime-soft); border-radius:var(--r-md);
  border-bottom-color:transparent;
  box-shadow:inset 3px 0 0 var(--st-ontime); padding-inline:var(--sp-3); }
/* صف الاجتماع قابل للنقر: مؤشّر + استجابة مرور لطيفة (يستبدل النمط المضمَّن) */
.meet-row-click{cursor:pointer;border-radius:var(--r-md);
  transition:background var(--t-fast) var(--ease)}
.meet-row-click:hover{background:var(--bg-raised)}
.meet-row-click:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ── إغناء بطاقة القروب لتماثل الفريق ───────────────────────────────────── */
.chat-card .tc-rail{ background:var(--accent); }

/* ── سطر اسم المدير على بطاقة الفريق في القائمة (D2) ───────────────────── */
.nc-card-mgr{ display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--fs-xs); color:var(--text-2); }
.nc-card-mgr i{ font-size:.72rem; color:var(--st-warn); }

/* ── سطر آخر نشاط مستقلّ بتسمية (D1) — يخفّف ازدحام الذيل ويوضّح المعنى ──── */
.nc-activity-line{ display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:.72rem; color:var(--text-3); margin-top:var(--sp-2);
  padding-top:var(--sp-2); border-top:1px solid var(--border); }
.nc-activity-line i{ font-size:.7rem; }
/* خطّ فاصل خفيف يفصل المقاييس عن سطر النشاط بصرياً */
.team-card .tc-foot{ padding-top:var(--sp-2); }

/* ── احترام تقليل الحركة ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cards-grid .team-card{ animation:none }
  .nc-live-dot{ animation:none }
}

/* ════════════════════════════════════════════════════════════════════════
   المكالمات الواردة (دفعة المكالمات) — بطاقة الرنين العالمية.
   أصناف call-* خاصة بهذا النظام (فحص: لا تصطدم بأي صنف Bootstrap).
   تُركَّب في IncomingCallHost داخل MainLayout خارج app-shell. z أعلى من
   التنبيهات (uaetoast-host) كي تعلو كل شيء. تحترم تقليل الحركة في القسم الأخير.
   ════════════════════════════════════════════════════════════════════════ */
.call-ring-scrim{position:fixed;inset:0;z-index:2147483100;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.call-ring-card{width:min(360px,92vw);background:var(--bg-surface);
  border-radius:var(--r-xl);box-shadow:var(--shadow-md);
  padding:var(--sp-5,1.5rem) var(--sp-4);text-align:center;
  border:1px solid var(--border);
  animation:call-ring-pop .2s ease-out}
@keyframes call-ring-pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.call-ring-avatar{width:84px;height:84px;border-radius:50%;margin:0 auto var(--sp-3);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:2rem;
  animation:call-ring-pulse 1.4s ease-in-out infinite}
.call-ring-avatar.video{color:var(--accent-strong)}
@keyframes call-ring-pulse{
  0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}
  50%{box-shadow:0 0 0 14px transparent}}
.call-ring-kind{font-size:var(--fs-sm);color:var(--text-2);
  display:flex;gap:var(--sp-2);align-items:center;justify-content:center;flex-wrap:wrap}
.call-ring-scope{font-size:var(--fs-xs);font-weight:var(--fw-semi,600);
  background:var(--accent-soft);color:var(--accent);
  padding:.1rem .5rem;border-radius:var(--r-pill)}
.call-ring-name{font-size:var(--fs-lg);font-weight:var(--fw-semi,600);
  color:var(--text-1);margin-top:var(--sp-1);word-break:break-word}
.call-ring-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:.15rem}
.call-ring-actions{display:flex;gap:var(--sp-4);justify-content:center;
  margin-top:var(--sp-4)}
.call-ring-btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  border:none;background:none;cursor:pointer;color:var(--text-2);
  font-size:var(--fs-xs);font-family:inherit}
.call-ring-btn i{width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;transition:transform .12s ease,filter .12s ease}
.call-ring-btn:hover i{transform:translateY(-2px);filter:brightness(1.07)}
.call-ring-btn:active i{transform:translateY(1px) scale(.97)}
.call-ring-btn.accept i{background:var(--st-ontime)}
.call-ring-btn.decline i{background:var(--st-late)}

@media (prefers-reduced-motion:reduce){
  .call-ring-card{animation:none}
  .call-ring-avatar{animation:none}
}

/* ════════════════════════════════════════════════════════════════════════
   طبقة المكالمة العائمة على مستوى التطبيق (CallOverlay) — تجربة كواتساب الويب.
   أصناف callui-* معزولة (فحص: لا تصطدم بـBootstrap). z أعلى من التنبيهات.
   ثلاثة أوضاع: صوتية (شريط)، فيديو (طبقة)، مصغّرة (حبّة). تحترم تقليل الحركة.
   ════════════════════════════════════════════════════════════════════════ */
.callui-root{position:fixed;z-index:2147483090;
  inset-block-start:var(--sp-4);inset-inline-end:var(--sp-4);
  width:min(380px,calc(100vw - 2rem));
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--shadow-md);overflow:hidden;
  animation:callui-in .2s ease-out}
.callui-root.is-video{width:min(560px,calc(100vw - 2rem));background:#0b0f0e;border-color:#0b0f0e}
@keyframes callui-in{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}

/* الحاوية المرئية (LiveKit). مخفية بصرياً في الصوتية مع بقائها في DOM. */
.callui-stage{min-height:300px}
.callui-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);opacity:0;pointer-events:none}

/* ── الصورة/الأحرف ── */
.callui-avatar{width:88px;height:88px;border-radius:50%;margin:0 auto var(--sp-3);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:var(--fw-semi,600);
  background:var(--accent-soft);color:var(--accent)}
.callui-avatar.ring{animation:callui-pulse 1.5s ease-in-out infinite}
.callui-avatar.failed{background:var(--st-late-soft);color:var(--st-late);font-size:1.6rem}
@keyframes callui-pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 12px transparent}}

/* ── طلب صادر / اتصال / فشل ── */
.callui-calling{padding:var(--sp-5,1.5rem) var(--sp-4);text-align:center}
.callui-name{font-size:var(--fs-lg);font-weight:var(--fw-semi,600);color:var(--text-1);word-break:break-word}
.callui-status{font-size:var(--fs-sm);color:var(--text-3);margin-top:.2rem;
  display:flex;gap:.4rem;align-items:center;justify-content:center}
.callui-actions{margin-top:var(--sp-4);display:flex;justify-content:center}

/* ── مكالمة صوتية نشطة: شريط ── */
.callui-voice{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);flex-wrap:wrap}
.callui-voice .callui-avatar{width:48px;height:48px;font-size:1.1rem;margin:0;flex:0 0 auto}
.callui-voice-meta{flex:1 1 auto;min-width:0}
.callui-voice-meta .callui-name{font-size:var(--fs-md);text-align:start}
.callui-voice-meta .callui-status{justify-content:flex-start}
.callui-ctrls,.callui-vctrls{display:flex;gap:var(--sp-2);align-items:center}
.callui-ctrls{flex:0 0 auto}

/* ── مكالمة فيديو نشطة: شريط علوي + أزرار سفلية فوق الفيديو ── */
.callui-vtop{position:absolute;inset-block-start:0;inset-inline:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-2) var(--sp-3);color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}
.callui-vname{font-weight:var(--fw-semi,600)}
.callui-vtimer{font-size:var(--fs-sm);display:flex;gap:.4rem;align-items:center}
.callui-vctrls{position:absolute;inset-block-end:var(--sp-3);inset-inline:0;z-index:2;
  justify-content:center}

/* ── نقطة الحياة (نبضة) ── */
.callui-livedot{width:8px;height:8px;border-radius:50%;background:var(--st-ontime);
  display:inline-block;animation:callui-blink 1.4s ease-in-out infinite}
@keyframes callui-blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── أزرار التحكّم الدائرية ── */
.callui-ctrl,.callui-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:var(--bg-raised);color:var(--text-1);
  transition:transform .12s ease,filter .12s ease}
.callui-root.is-video .callui-ctrl{background:rgba(255,255,255,.18);color:#fff}
.callui-ctrl:hover,.callui-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.callui-ctrl:active,.callui-btn:active{transform:translateY(1px) scale(.97)}
.callui-ctrl.off{background:var(--st-late);color:#fff}
.callui-ctrl.end,.callui-btn.end{background:var(--st-late);color:#fff}
.callui-btn.end{width:58px;height:58px;font-size:1.3rem}

/* ── تنبيه وسائط لطيف ── */
.callui-note{font-size:var(--fs-xs);color:var(--st-warn);text-align:center;
  padding:0 var(--sp-4) var(--sp-2)}
.callui-note.float{position:absolute;inset-block-start:46px;inset-inline:0;z-index:2;
  color:#ffd9a8;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ── الحبّة المصغّرة العائمة ── */
.callui-pill{position:fixed;z-index:2147483090;
  inset-block-end:90px;inset-inline-end:var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-2);
  padding:.4rem .6rem .4rem .4rem;border:none;cursor:pointer;
  background:var(--accent);color:var(--accent-on);
  border-radius:var(--r-pill);box-shadow:var(--shadow-md);
  font-family:inherit;max-width:min(260px,80vw);
  animation:callui-in .2s ease-out}
.callui-pill.video{background:var(--accent-strong)}
.callui-pill-ic{width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2)}
.callui-pill-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.15}
.callui-pill-name{font-weight:var(--fw-semi,600);font-size:var(--fs-sm);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callui-pill-timer{font-size:var(--fs-xs);opacity:.85}
.callui-pill-expand{flex:0 0 auto;opacity:.85;font-size:.8rem;margin-inline-start:.2rem}

/* الجوّال: الطبقة تملأ العرض أعلى شريط التنقّل السفلي */
@media (max-width:768px){
  .callui-root{inset-inline:var(--sp-2);width:auto;inset-block-start:var(--sp-2)}
  .callui-pill{inset-block-end:84px;inset-inline:var(--sp-2);max-width:none;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .callui-root,.callui-pill{animation:none}
  .callui-avatar.ring{animation:none}
  .callui-livedot{animation:none}
}