/* ═══════════════════════════════════════════════════════════════════════
   تواصل — نظام التصميم (الأساس)
   ───────────────────────────────────────────────────────────────────────
   المرجع: docs/DESIGN.md. هذا الملف وحده يملك الرموز والغلاف والمكوّنات
   المشتركة؛ كل شاشة تضيف ملفها في css/<الشاشة>.css ولا تعيد تعريف ما هنا.
   الاتجاه: عربي من اليمين (logical properties فقط: inline-start/end).
   الحركة: transform وopacity وحدهما؛ ولا transform/contain دائم على .screen
   (يجعل position:fixed داخله نسبياً — درس صندوق الكتابة في 1.0.0).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الخط: Tajawal محلي ── */
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/tajawal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/tajawal-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/tajawal-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ═══ ١. الرموز ═══════════════════════════════════════════════════════ */
:root {
  /* الأكسنت: قيمتان لكل لون (فاتح/داكن) + فقاعة الرسالة الصادرة لكل منهما */
  --a-l: #2F6FED; --a-d: #5B8DEF; --bo-l: #D9E7FF; --bo-d: #22467F;

  /* الشكل */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  /* المسافات (مضاعفات 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  /* الخط */
  --font: 'Tajawal', 'Segoe UI', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif;
  --fz-xs: 12px; --fz-sm: 13px; --fz-md: 15px; --fz-base: 16px; --fz-lg: 17px; --fz-xl: 20px; --fz-2xl: 24px; --fz-3xl: 30px;
  /* الحركة */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.32, 1.25, .5, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms;
  /* التخطيط */
  --bar-h: 56px; --nav-h: 64px; --fab-size: 56px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --top-inset: calc(var(--bar-h) + var(--safe-t));
  --bottom-inset: calc(var(--nav-h) + var(--safe-b));
  --row-py: 10px;

  /* الألوان — السمة الفاتحة افتراضياً */
  --accent: var(--a-l);
  --accent-fg: #FFFFFF;
  --bg: #FFFFFF;          /* أرضية الشاشات ذات القوائم */
  --bg-group: #F2F3F7;    /* أرضية الإعدادات المجمّعة */
  --bg-elev: #FFFFFF;     /* بطاقات وأوراق وقوائم مرفوعة */
  --bg-2: #F1F3F6;        /* حقول، شرائح، ضغط */
  --bg-3: #E4E8EE;        /* ضغط أعمق، مفاتيح مطفأة */
  --fg: #0E1726;
  --fg-2: #4A5468;
  --fg-3: #8C94A6;
  --sep: #E8EAEF;
  --bar-bg: #FFFFFF;
  --nav-bg: #FFFFFF;
  --scrim: rgba(10, 16, 26, .42);
  --danger: #E5484D; --success: #12A150; --warning: #E79A0B; --online: #22C55E;
  --wallpaper: #E9EEF5; --wallpaper-ink: rgba(52, 82, 140, .075);
  --bubble-in: #FFFFFF;
  --bubble-out: var(--bo-l);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-2: 0 6px 18px rgba(15, 23, 42, .14), 0 2px 4px rgba(15, 23, 42, .06);
  --shadow-3: 0 18px 48px rgba(15, 23, 42, .22), 0 4px 10px rgba(15, 23, 42, .08);
  color-scheme: light;
}

/* ألوان الأكسنت الأربعة (اختيار المستخدم في المظهر) */
body[data-accent="blue"]   { --a-l: #2F6FED; --a-d: #5B8DEF; --bo-l: #D9E7FF; --bo-d: #22467F; }
body[data-accent="purple"] { --a-l: #7A4CF5; --a-d: #9D7DFF; --bo-l: #E8DFFF; --bo-d: #3F2E78; }
body[data-accent="green"]  { --a-l: #0E9F6E; --a-d: #2EC48E; --bo-l: #D6F6DF; --bo-d: #145C45; }
body[data-accent="pink"]   { --a-l: #DE4479; --a-d: #F06E9C; --bo-l: #FFDEEA; --bo-d: #642445; }

body, body[data-theme="light"] { --accent: var(--a-l); --bubble-out: var(--bo-l); --bubble-out-fg: var(--fg); --tick: var(--accent); }
/* رموز مشتقّة: تُحسب على body حيث تُعرَّف السمة والأكسنت. لو عُرِّفت على :root لحُسبت
   هناك بالأزرق الفاتح وورثها كل شيء كما هي (الخلل الذي وجده المراجعون: نص الفقاعة
   الواردة شبه مخفي في الداكن، و--accent-soft أزرق مع البنفسجي والأخضر والوردي). */
body {
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-press: color-mix(in srgb, var(--accent) 86%, #000);
  --bubble-in-fg: var(--fg);
}

body[data-theme="dark"] {
  --accent: var(--a-d); --bubble-out: var(--bo-d);
  --accent-fg: #FFFFFF;
  --bg: #0E141D; --bg-group: #0A0F16; --bg-elev: #151D29; --bg-2: #1B2431; --bg-3: #263244;
  --fg: #E9EEF6; --fg-2: #A7B1C3; --fg-3: #6E7A8E; --sep: #212B3A;
  --bar-bg: #0E141D; --nav-bg: #0E141D; --scrim: rgba(0, 0, 0, .6);
  --wallpaper: #0B1119; --wallpaper-ink: rgba(150, 180, 230, .05);
  --bubble-in: #1B2431; --bubble-out-fg: #EEF3FB;
  --tick: #7FB4FF;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, .5);
  --shadow-3: 0 20px 52px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
body[data-theme="oled"] {
  --accent: var(--a-d); --bubble-out: var(--bo-d);
  --bg: #000000; --bg-group: #000000; --bg-elev: #0C0C0F; --bg-2: #15161A; --bg-3: #212329;
  --fg: #ECEFF4; --fg-2: #A3ABB9; --fg-3: #6C7380; --sep: #1B1C21;
  --bar-bg: #000000; --nav-bg: #000000; --scrim: rgba(0, 0, 0, .7);
  --wallpaper: #000000; --wallpaper-ink: rgba(255, 255, 255, .04);
  --bubble-in: #17181C; --bubble-out-fg: #EEF3FB; --tick: #7FB4FF;
  --shadow-1: none; --shadow-2: 0 8px 22px rgba(0, 0, 0, .7); --shadow-3: 0 20px 52px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
body.high-contrast { --fg-2: var(--fg); --fg-3: color-mix(in srgb, var(--fg) 70%, transparent); --sep: color-mix(in srgb, var(--fg) 22%, transparent); }
body[data-density="compact"] { --row-py: 6px; }

/* ═══ ٢. الأساس ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font); font-size: var(--fz-base); line-height: 1.5;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }

.icon-svg { display: inline-flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center; }
.icon-svg svg { width: 100%; height: 100%; display: block; }
/* أيقونات اتجاهية (رجوع، سهم المتابعة) تنعكس في العربية */
[dir="rtl"] .flip svg, [dir="rtl"] .icon-svg.flip svg { transform: scaleX(-1); }

/* ═══ ٣. الغلاف: الرأس، الحاوية، الشريط السفلي ════════════════════════ */
#app-bar {
  position: fixed; inset-inline: 0; top: 0; z-index: 30;
  height: calc(var(--bar-h) + var(--safe-t)); padding-top: var(--safe-t);
  padding-inline: 6px 8px;
  display: flex; align-items: center; gap: 2px;
  background: var(--bar-bg); border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2), background-color var(--dur-2);
}
body.scrolled #app-bar { border-bottom-color: var(--sep); }
.bar-back { margin-inline-end: -4px; }
.bar-titles { flex: 1; min-width: 0; padding-inline: 10px 4px; display: flex; flex-direction: column; justify-content: center; }
.bar-title {
  font-size: var(--fz-2xl); font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px;
}
#app-bar.sub .bar-title { font-size: var(--fz-lg); font-weight: 700; }
.bar-sub { font-size: var(--fz-sm); color: var(--fg-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-actions { display: flex; align-items: center; gap: 2px; }
/* «جارٍ الاتصال…» في مكان العنوان على شاشات التبويبات (كما تيليجرام) */
.conn-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fg-3); border-top-color: transparent; animation: spin .8s linear infinite; flex: none; }
.bar-title.connecting { font-size: var(--fz-lg); color: var(--fg-2); font-weight: 700; }
/* 1.15 — لقطة الرأس السابق تتلاشى فوق الجديد (shell.js · _crossfadeHeader): بتخطيط الرأس نفسه، وبحجم
   عنوانها هي (الرأس قد يصير .sub أو يعود كبيراً في التنقّل نفسه)، بلا لمس. */
#app-bar > .bar-ghost {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 2px; padding-inline: 6px 8px; padding-top: var(--safe-t);
}
#app-bar > .bar-ghost.g-large .bar-title { font-size: var(--fz-2xl); font-weight: 800; }
#app-bar > .bar-ghost.g-sub .bar-title { font-size: var(--fz-lg); font-weight: 700; }
#app-bar > .bar-ghost .bar-title.connecting { font-size: var(--fz-lg); }

#screen-container {
  position: fixed; inset-inline: 0; top: var(--top-inset); bottom: var(--bottom-inset);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  background: var(--bg); -webkit-overflow-scrolling: touch;
}
.screen { min-height: 100%; }
/* شريط المكالمة المصغّرة (call-ui.js يضع has-call-pill على body) يصير جزءاً من الحافة
   العليا الآمنة، فكل ما يحترم --safe-t (الرأس والحاوية والأوراق) يجلس تحته. */
body.has-call-pill { --safe-t: calc(env(safe-area-inset-top, 0px) + 32px); }
.screen.group { background: var(--bg-group); }
.screen.pad { padding: var(--s-4); }

#bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(var(--tabs, 3), 1fr);
  background: var(--nav-bg); border-top: 1px solid var(--sep);
}
.tab {
  position: relative; border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--fg-3); font-size: var(--fz-xs); font-weight: 700;
  transition: color var(--dur-2) var(--ease);
}
.tab-ic { width: 60px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background-color var(--dur-2), color var(--dur-2); }
.tab-ic .icon-svg { width: 24px; height: 24px; }
.tab-ic svg { transition: fill var(--dur-2) var(--ease), stroke-width var(--dur-2) var(--ease); }
.tab.active { color: var(--accent); }
/* 1.15 — الحبّة لم تعد على الخانة (تنزلق .nav-pill إليها)؛ الأيقونة النشطة تمتلئ قليلاً وتثقل خطّها
   وتنبض (1 → 1.12 → 1) حين تصير نشطة. */
.tab.active .tab-ic svg { fill: color-mix(in srgb, currentColor 18%, transparent); stroke-width: 2.1; }
.tab.active .tab-ic .icon-svg { animation: tab-pop 320ms var(--ease); }
.tab:active .tab-ic { transform: scale(.94); transition: transform var(--dur-1); }
/* الحبّة المنزلقة (shell.js · _movePill): خانة بعرض عمود وتخطيط التبويب نفسه (حبّة 30px فوق سطر بحجم
   التسمية) فتجلس تحت الأيقونة بلا قياس؛ تنتقل بـ transform وحدها بنابض لطيف. */
:root { --pill-dir: -1; }
html[dir="ltr"] { --pill-dir: 1; }
.nav-pill {
  position: absolute; top: 0; inset-inline-start: 0; height: var(--nav-h); width: calc(100% / var(--tabs, 3));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fz-xs); font-weight: 700; pointer-events: none;
  transform: translateX(calc(var(--pill-i, 0) * var(--pill-dir) * 100%));
  transition: transform 280ms var(--ease-spring), opacity var(--dur-1) var(--ease);
}
.nav-pill-bg { display: block; width: 60px; height: 30px; border-radius: 15px; background: var(--accent-soft); }
.nav-pill-sp { visibility: hidden; }
.nav-pill[data-pill="off"] { opacity: 0; }
.nav-pill[data-pill="jump"] { transition: none; }
.tab .badge { position: absolute; top: 4px; inset-inline-start: calc(50% + 8px); box-shadow: 0 0 0 2px var(--nav-bg); }

/* زر عائم (محادثة جديدة، اتصال جديد) — يضعه كل شاشة داخل .screen. الشاشة التي
   تعرضه ترفع الإشعار العائم فوقه بـ--toast-lift على #toast-host (مثال: chats.css) */
.fab {
  position: fixed; inset-inline-end: 16px; bottom: calc(var(--bottom-inset) + 16px); z-index: 25;
  width: var(--fab-size); height: var(--fab-size); border-radius: 18px; border: 0;
  background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-2);
  display: grid; place-items: center; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2);
}
.fab:active { transform: scale(.92); }
.fab .icon-svg { width: 26px; height: 26px; }

/* ═══ ٤. المكوّنات ════════════════════════════════════════════════════ */

/* أزرار */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-fg);
  font-size: var(--fz-base); font-weight: 700; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-2), opacity var(--dur-2);
}
.btn:active:not(:disabled) { transform: scale(.97); background: var(--accent-press); }
.btn:disabled { opacity: .5; }
.btn .icon-svg { width: 20px; height: 20px; }
.btn-tonal, .btn.secondary { background: var(--accent-soft); color: var(--accent); }
.btn-tonal:active:not(:disabled), .btn.secondary:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.btn-plain { background: var(--bg-2); color: var(--fg); }
.btn-plain:active:not(:disabled) { background: var(--bg-3); }
.btn-text, .btn.ghost { background: transparent; color: var(--accent); padding: 0 12px; }
.btn-text:active:not(:disabled), .btn.ghost:active:not(:disabled) { background: var(--accent-soft); }
.btn-danger, .btn.danger { background: var(--danger); color: #fff; }
.btn-danger:active:not(:disabled), .btn.danger:active:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, #000); }
.btn-text.danger, .btn.ghost.danger { background: transparent; color: var(--danger); }
.btn-block, .btn.block { display: flex; width: 100%; }
.btn-sm { height: 36px; padding: 0 14px; font-size: var(--fz-md); border-radius: var(--r-sm); }

.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--fg-2);
  display: inline-grid; place-items: center; flex: none; position: relative;
  transition: background-color var(--dur-1);
}
.icon-btn:active { background: var(--bg-2); }
.icon-btn.accent { color: var(--accent); }
.icon-btn .badge { position: absolute; top: 2px; inset-inline-start: 24px; }

/* القوائم */
.list { background: var(--bg-elev); }
.list-inset { margin-inline: var(--s-4); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); }
.list-title { padding: 22px 32px 8px; font-size: var(--fz-sm); font-weight: 700; color: var(--fg-3); }
.list-note { padding: 8px 32px 0; font-size: var(--fz-sm); color: var(--fg-3); line-height: 1.6; }
.item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: var(--row-py) 16px; border: 0; background: none;
  color: inherit; text-align: start; font: inherit;
  content-visibility: auto; contain-intrinsic-size: auto 64px;
}
.item + .item::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--sep);
  inset-inline-start: var(--sep-inset, 16px); inset-inline-end: 0;
}
.list.has-av { --sep-inset: 78px; }
.list.has-tile { --sep-inset: 60px; }
.item.tap { cursor: pointer; transition: background-color var(--dur-1); }
.item.tap:active { background: var(--bg-2); }
.item-lead { flex: none; display: grid; place-items: center; }
.item-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.item-title { font-size: var(--fz-base); font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: var(--fz-md); color: var(--fg-2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.item-meta { font-size: var(--fz-xs); color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-value { font-size: var(--fz-md); color: var(--fg-3); }
.item.danger .item-title { color: var(--danger); }
.chev { color: var(--fg-3); width: 20px; height: 20px; }
/* مربّع أيقونة ملوّن (صفوف الإعدادات، كما iOS) */
.tile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--c, var(--accent)); flex: none; }
.tile .icon-svg { width: 19px; height: 19px; }

/* الصورة الرمزية: الحرف الأول على تدرّج من hue الاسم (أو صورة) */
.av {
  --sz: 48px; --h: 210;
  width: var(--sz); height: var(--sz); border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; overflow: visible;
  font-size: calc(var(--sz) * .4); font-weight: 800; color: #fff; line-height: 1;
  background: linear-gradient(140deg, hsl(var(--h) 72% 63%), hsl(calc(var(--h) + 28) 64% 47%));
  -webkit-user-select: none; user-select: none;
}
.av > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.av-xs { --sz: 28px; } .av-sm { --sz: 36px; } .av-md { --sz: 48px; } .av-lg { --sz: 54px; } .av-xl { --sz: 88px; } .av-2xl { --sz: 112px; }
.av .presence, .av > i {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 30%; height: 30%; min-width: 11px; min-height: 11px;
  border-radius: 50%; background: var(--online); border: 2px solid var(--bg-elev); font-style: normal;
}
.av > i.away { background: var(--warning); } .av > i.off { background: var(--fg-3); }

/* شارات ونقاط وحبوب */
.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: var(--accent-fg);
  font-size: var(--fz-xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.badge.muted { background: var(--fg-3); color: #FFFFFF; }
.badge.danger { background: var(--danger); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: var(--fz-xs); font-weight: 700; background: var(--bg-2); color: var(--fg-2); white-space: nowrap; }
.pill.ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.pill.warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.pill.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

/* البحث والشرائح */
.search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-radius: 12px; background: var(--bg-2); color: var(--fg-3);
}
.search .icon-svg { width: 19px; height: 19px; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--fg); font-size: var(--fz-base); }
.search input::placeholder { color: var(--fg-3); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  height: 32px; padding: 0 14px; border-radius: 16px; border: 0; flex: none;
  background: var(--bg-2); color: var(--fg-2); font-size: var(--fz-md); font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--dur-1), color var(--dur-1);
}
.chip.on { background: var(--accent-soft); color: var(--accent); }
.chip .badge { height: 18px; min-width: 18px; font-size: 11px; }

/* الحقول */
.field { display: grid; gap: 6px; }
.field > label, .field-label { font-size: var(--fz-sm); font-weight: 700; color: var(--fg-2); }
.field-hint { font-size: var(--fz-sm); color: var(--fg-3); }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; height: 50px; padding: 0 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--sep); background: var(--bg-elev); color: var(--fg); font-size: var(--fz-base);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
textarea.input, .field textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input::placeholder, .field input::placeholder { color: var(--fg-3); }

/* المفتاح: <label class="switch"><input type="checkbox"></label> */
.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: none; }
.switch input { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 15px; background: var(--bg-3); cursor: pointer; transition: background-color var(--dur-2); }
.switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--dur-2) var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(20px); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-20px); }
.switch .switch-track { display: none; }

/* أزرار مقطّعة */
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--bg-2); }
.seg button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--fg-2); font-weight: 700; font-size: var(--fz-md); transition: background-color var(--dur-2), color var(--dur-2); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"], .seg button[aria-selected="true"], .seg button.on { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-1); }

/* الورقة السفلية (ui/sheet.js) + قائمة الإجراءات داخلها */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--scrim); animation: fade-in var(--dur-2) var(--ease); }
#sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 61; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 4px 16px calc(16px + var(--safe-b)); box-shadow: var(--shadow-3);
  animation: sheet-in 220ms var(--ease); transition: transform var(--dur-2) var(--ease);   /* 1.9.6 — 220 لا 280 */
}
/* 1.9.6 — مفتوحة: طبقة على المُركِّب من أول إطار (السحب بالإصبع والخروج لا يعيدان رسمها). */
#sheet:not([hidden]) { will-change: transform; }
#sheet.m-full { height: calc(100% - var(--safe-t) - 12px); max-height: none; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--bg-3); margin: 8px auto 10px; }
.sheet-title, #sheet-content > h2, #sheet-content > h3 { font-size: var(--fz-xl); font-weight: 800; margin: 2px 4px 14px; }
.sheet-sub { font-size: var(--fz-md); color: var(--fg-2); margin: -8px 4px 14px; }
.sheet-actions { display: grid; gap: 8px; margin-top: 16px; }
.menu { display: grid; }
.menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 10px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--fg);
  font-size: var(--fz-base); font-weight: 600; text-align: start;
  transition: background-color var(--dur-1);
}
.menu-item:active { background: var(--bg-2); }
.menu-item .icon-svg { color: var(--fg-2); width: 22px; height: 22px; }
.menu-item.danger, .menu-item.danger .icon-svg { color: var(--danger); }
.menu-sep { height: 1px; background: var(--sep); margin: 6px 10px; }
/* شريط التفاعلات السريعة فوق قائمة الرسالة */
.reaction-bar { display: flex; justify-content: space-between; gap: 4px; padding: 6px 8px; margin-bottom: 8px; border-radius: 30px; background: var(--bg-2); }
.reaction-bar button { flex: 1 1 0; min-width: 0; max-width: 44px; height: 42px; border: 0; border-radius: 50%; background: none; font-size: clamp(22px, 6.2vw, 26px); line-height: 1; transition: transform var(--dur-1) var(--ease); }
.reaction-bar button:active { transform: scale(1.25); }

/* الإشعار العائم (ui/toast.js) — snackbar أندرويد: شريط مدمج بعرض الشاشة فوق
   الشريط السفلي، بسطح معكوس (داكن في الفاتح، فاتح في الداكن)، واحد في كل مرة
   (ui/feel.js يُخرج القديم والجديد في الخانة نفسها: grid-area)، ويُسحب جانباً
   ليُغلق. الحركة بـtranslate/scale لا transform: toast.js يضع عند الخروج رفعةً
   للأعلى (transform) لا تليق بشريط سفلي، فتُلغى هنا ويبقى التلاشي. */
#toast-host {
  position: fixed; inset-inline: 12px; bottom: calc(var(--bottom-inset) + var(--toast-lift, 0px) + 16px); z-index: 80;
  display: grid; justify-items: center; pointer-events: none;
}
body { --toast-bg: #222A36; --toast-fg: #F2F5FA; --toast-info: #8DB8FF; --toast-ok: #4ADE95; --toast-bad: #FF7A7A; --toast-warn: #FFC44D; }
body[data-theme="dark"], body[data-theme="oled"] { --toast-bg: #E2E7EF; --toast-fg: #111824; --toast-info: var(--a-l); --toast-ok: #12A150; --toast-bad: #D93A40; --toast-warn: #B87300; }
.toast {
  grid-area: 1 / 1; width: 100%; max-width: 560px; min-height: 48px;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-2);
  font-size: var(--fz-md); font-weight: 500; line-height: 1.45;
  pointer-events: auto; touch-action: none; cursor: default;
  animation: snack-in 260ms var(--ease) backwards;
  transform: none !important;
  transition: translate 200ms var(--ease), opacity 180ms linear;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--toast-info); flex: none; }
.toast.success::before { background: var(--toast-ok); }
.toast.error::before { background: var(--toast-bad); }
.toast.warn::before { background: var(--toast-warn); }
.toast.toast-drag { transition: none; }
.toast.toast-out { opacity: 0; translate: 0 10px; pointer-events: none; }
@keyframes snack-in { from { translate: 0 24px; scale: .98; opacity: 0; } }

/* الشريط العلوي لرسالة جديدة والتطبيق مفتوح (ui/in-app-banner.js) */
#in-app-banner-host { position: fixed; top: calc(var(--safe-t) + 8px); inset-inline: 8px; z-index: 90; pointer-events: none; }
.in-app-banner {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; pointer-events: auto;
  border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--shadow-3);
  transform: translateY(-140%); transition: transform var(--dur-3) var(--ease-spring);
}
.in-app-banner.shown { transform: none; }
.in-app-banner.leaving { transform: translateY(-140%); transition-timing-function: var(--ease-in); }
.iab-text { flex: 1; min-width: 0; }
.iab-title { font-weight: 800; font-size: var(--fz-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iab-body { font-size: var(--fz-md); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* السحب للتحديث (ui/pull-refresh.js) */
.ptr-indicator {
  position: absolute; top: 8px; left: 50%; z-index: 20; width: 38px; height: 38px; margin-left: -19px;
  border-radius: 50%; background: var(--bg-elev); box-shadow: var(--shadow-2); color: var(--accent);
  display: grid; place-items: center; transform: translateY(-60px); opacity: 0; pointer-events: none;
}
.ptr-indicator.pulling { opacity: 1; }
.ptr-indicator .icon-svg { width: 20px; height: 20px; }
.ptr-indicator.refreshing .icon-svg { animation: spin .8s linear infinite; }

/* هيكل مؤقت */
.skel { background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
.skel-line { height: 12px; border-radius: 6px; }
.skel-av { width: 48px; height: 48px; border-radius: 50%; flex: none; }
/* «تعذّر التحديث»: بيانات محفوظة على الشاشة والتحديث في الخلفية فشل — لا تُستبدل
   الصفوف بخطأ، بل شريحة صغيرة فوقها تعيد المحاولة (1.2.1 · قائمتا المحادثات والمكالمات) */
.refresh-chip-row { display: flex; justify-content: center; padding: 6px var(--s-4) 4px; }
.refresh-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-full); background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); font-size: var(--fz-sm); font-weight: 700; animation: fade-in var(--dur-2) var(--ease) both; }
.refresh-chip .icon-svg { width: 16px; height: 16px; }
.refresh-chip .conn-spin { width: 12px; height: 12px; border-color: currentColor; border-top-color: transparent; }
.refresh-chip:disabled { opacity: .85; }
/* داخل المحادثة (chat-thread.js): تطفو أعلى الرسائل المحفوظة ولا تأخذ مكاناً */
.th-scroll > .refresh-chip-row { position: sticky; top: 8px; z-index: 4; height: 0; padding: 0; overflow: visible; pointer-events: none; }
.th-scroll > .refresh-chip-row .refresh-chip { pointer-events: auto; background: var(--bg-elev); box-shadow: var(--shadow-1); }

/* حالة فارغة (ui/empty-state.js و kit.empty) */
.empty-state { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 56px 32px; color: var(--fg-2); }
.empty-illustration { width: 170px; height: 120px; color: var(--fg-3); margin-bottom: 8px; }
.empty-state > .icon-svg { width: 44px; height: 44px; color: var(--fg-3); margin-bottom: 6px; }
.empty-title { font-size: var(--fz-lg); font-weight: 800; color: var(--fg); }
.empty-subtitle { font-size: var(--fz-md); max-width: 32ch; line-height: 1.6; }
.empty-state .btn { margin-top: 14px; }
.empty-state.compact { padding: 28px 20px; }

/* عناوين أقسام داخل الشاشات */
.section-title { padding: 18px 16px 6px; font-size: var(--fz-sm); font-weight: 800; color: var(--fg-3); }

/* ═══ ٥. أشرطة النظام في boot.js ═════════════════════════════════════ */
.safe-bar, .call-ready-banner {
  position: fixed; inset-inline: 12px; bottom: calc(var(--bottom-inset) + 12px); z-index: 70;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); animation: toast-in var(--dur-3) var(--ease-spring);
}
.safe-bar { background: #6B4A00; color: #fff; font-size: var(--fz-md); font-weight: 600; line-height: 1.5; }
.safe-bar span { flex: 1; min-width: 0; }
.safe-bar button { border: 0; border-radius: 10px; padding: 7px 12px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; font-size: var(--fz-sm); }
.call-ready-banner { background: var(--bg-elev); flex-wrap: wrap; }
.call-ready-body { flex: 1; min-width: 60%; font-weight: 700; font-size: var(--fz-md); }
.call-ready-title { display: flex; align-items: center; gap: 8px; }
.call-ready-title .icon-svg { width: 20px; height: 20px; color: var(--danger); }
.call-ready-actions { display: flex; gap: 6px; }

/* ── الشعار المعتمد (design/brand) ─────────────────────────────────────
   كل موضع يرسمه بنسختين متجاورتين: .light (الحلقة كحلية) و.dark (الحلقة بيضاء). تتبعان سمة
   التطبيق (body[data-theme]) لا سمة الهاتف، فيطابق الشعار الأرضية التي تحته؛ وقبل أن يضبط
   boot.js السمة لا data-theme، والأرضية فاتحة، فتظهر الفاتحة. icons/mark*.webp الشارة وحدها
   (288×288)، وicons/logo*.webp الشعار كاملاً باسم أويس (512×671: يكفي عرضه 156px على شاشة 3x) — كلاهما
   في التخزين المسبق. */
.brand-art { display: block; object-fit: contain; }
.brand-art.dark,
body[data-theme="dark"] .brand-art.light,
body[data-theme="oled"] .brand-art.light { display: none; }
body[data-theme="dark"] .brand-art.dark,
body[data-theme="oled"] .brand-art.dark { display: block; }

/* ═══ ٦. شاشة البداية ════════════════════════════════════════════════ */
.splash-screen { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--bg); transition: opacity 180ms var(--ease); }
/* الشعار كاملاً بنسبته (512×671) — شفاف بلا بلاطة ولا ظلّ */
.splash-logo-wrap { width: 156px; aspect-ratio: 512 / 671; animation: pop-in 420ms var(--ease-spring) both; }
.splash-logo { width: 100%; height: 100%; }
.splash-tag { color: var(--fg-3); font-size: var(--fz-md); font-weight: 600; }
.splash-screen.splash-dismiss { opacity: 0; pointer-events: none; }

/* ═══ ٧. الحركة ══════════════════════════════════════════════════════ */
/* ── انتقال الشاشات (router.js) — طبقات حيّة (1.9.6) ─────────────────
   لا View Transitions: كانت تلتقط صورتين للمستند كله قبل أن يتحرّك شيء. الآن:
   • الشاشة المخبّأة غير المعروضة «مركونة» (data-cached): خارج التدفّق، ولا تُرسم
     (content-visibility: hidden يحفظ أنماطها وتخطيطها — العودة رسمٌ لا إعادة بناء).
   • التي تغادر (data-leaving) تبقى معروضة حتى تنتهي الحركة: تحت الجديدة في الدفع،
     وفوق السابقة تنزلق خارجة في الرجوع. الطبقة المتحرّكة data-tx-top، وبينهما غطاء
     .scr-scrim يعتم ما تحت (opacity وحدها).
   • دفع (كتيليجرام أندرويد، معكوساً للعربية): الجديدة تدخل من اليسار فوق القديمة؛ رجوع:
     العليا تخرج إلى اليسار وتكشف السابقة في مكانها. transform وopacity وحدهما.
   • المحادثة طبقة تغطي الشاشة (.th: position fixed)؛ ما دامت تتحرّك ترتفع الحاوية فوق
     الرأس والشريط السفلي (data-tx="cover")، والموجّه يُمسك ظهورهما (data-hold) في الدفع. */
/* 1.15 — تزيّح (parallax): العليا من الحافة بمنحنى M3 القياسي (سريع الخروج بطيء الوصول)، والتي تحتها
   تنزاح ربع العرض في الاتجاه الآخر (--vt-under: يمين العربية، يسار اللاتينية) وتعتم، والرجوع يعكس.
   في المحادثة (طبقة تغطي الشاشة) الرأس والشريط السفلي لِما تحتها فيتزيّحان معها (data-under). */
:root { --vt-ease: cubic-bezier(.2, 0, 0, 1); --vt-in: -100%; --vt-under: 25%; --vt-under-vw: 25vw; --scr-dim: .16;
  --tab-out-ease: cubic-bezier(.4, 0, 1, 1); --tab-in-ease: cubic-bezier(0, 0, .2, 1); }
html[dir="ltr"] { --vt-in: 100%; --vt-under: -25%; --vt-under-vw: -25vw; }
/* opacity وz-index لا visibility وpointer-events: تلك موروثة فيعيد إظهارها حساب أنماط الشاشة كلها
   (~630 عنصراً للقائمة، ~20ms عند 4×)؛ هذه على الجذر وحده، وcontent-visibility تطوي ما تحته (لا رسم ولا
   لمس ولا تركيز). z-index -1: تحت الشاشة المعروضة، وهي تملأ الحاوية (min-height 100%) فتأخذ كل لمسة. */
#screen-container > [data-cached]:not([data-leaving]),
#screen-container > [data-gone] {
  position: absolute; inset-inline: 0; top: 0; z-index: -1;
  content-visibility: hidden; opacity: 0;
}
/* لا pointer-events على التي تغادر (موروثة: تعيد حساب أنماط شجرتها كلها في الإطار الأول)؛ الغطاء بين
   الطبقتين يأخذ اللمس عمّا تحته حتى تستقرّ. */
#screen-container > [data-leaving] { z-index: 0; }
/* 40 و39: فوق ما هو fixed في الشاشة التي تحت (الزر العائم 25، حبّة «جديد» 26) — لا يطفو فوق الداخلة */
#screen-container > [data-tx-top] { z-index: 40; box-shadow: 0 0 24px rgba(0, 0, 0, .18); }
#screen-container > [data-tx-top]:not(.th):not([data-cover]) { position: relative; }
/* 1.15 — هامش أول ابن (طلبات المراسلة: 10px) كان ينهار عبر الشاشة الداخلة فيبقى شريط فوقها بلا أرضية تظهر
   منه التي تحتها معتمة. حدّ شفاف (أرضيتها تحته) يمنع الانهيار، و-1px يعيد كل شيء إلى موضعه بالضبط. */
#screen-container > [data-tx-top]:not(.th):not([data-cover]):not([data-leaving]) { border-top: 1px solid transparent; margin-top: -1px; }
/* التبويب الداخل فوق الخارج بالشفافية وحدها: لا ظلّ حافة */
#screen-container > [data-tx-top]:is([data-transition="tab"], [data-transition="tab-next"], [data-transition="tab-prev"]) { box-shadow: none; }
/* الطبقتان معتمتان (الشاشة العادية بلا أرضية: الحاوية كانت أرضيتها) — بلا خصوصية كي
   تغلب أرضية الشاشة نفسها (.group، .th، .chats-open…) */
:where(#screen-container > [data-tx-top], #screen-container > [data-leaving]) { background-color: var(--bg); }
#screen-container[data-tx="cover"] { z-index: 31; }
/* الغطاء على الحاوية وحدها (حاشيتاها ممسوكتان أثناء الحركة)؛ وعلى الشاشة كلها حين تغطي العليا الرأس والشريط
   (data-tx="cover"). كان inset: 0 دائماً، فيظهر رمادياً حيث يتلاشى شريط سفلي لِما تحت (push-hide). */
.scr-scrim { position: fixed; inset-inline: 0; top: var(--top-inset); bottom: var(--bottom-inset); z-index: 39; background: #000; opacity: 0; touch-action: none; }
#screen-container[data-tx="cover"] > .scr-scrim { top: 0; bottom: 0; }
.scr-scrim[data-transition="dim-in"]  { animation: scr-dim-in 260ms var(--vt-ease) both; }
.scr-scrim[data-transition="dim-out"] { animation: scr-dim-out 240ms var(--vt-ease) both; }
#screen-container > [data-transition="push"] { animation: scr-push-in 260ms var(--vt-ease) backwards; }
#screen-container > [data-transition="pop"]  { animation: scr-pop-out 240ms var(--vt-ease) forwards; }
#screen-container > [data-transition="push-under"] { animation: scr-push-under 260ms var(--vt-ease) forwards; }
#screen-container > [data-transition="pop-under"]  { animation: scr-pop-under 240ms var(--vt-ease) backwards; }
#app-bar[data-under="push"], #bottom-nav[data-under="push"] { animation: scr-push-under 260ms var(--vt-ease) forwards; }
#app-bar[data-under="pop"], #bottom-nav[data-under="pop"]   { animation: scr-pop-under 240ms var(--vt-ease) backwards; }
/* شريط لِما تحت وحدها والعليا ليست طبقة تغطيه (الحاوية تنتهي فوقه): يتزيّح معها ويتلاشى / يظهر */
#app-bar[data-under="push-hide"], #bottom-nav[data-under="push-hide"] { animation: scr-chrome-out 260ms var(--vt-ease) forwards; }
/* pop-show: الشريط نفسه معتم من أول إطار — الحاوية بحاشيتيها الممسوكتين (holdInsets) فالقائمة المنكشفة تمتدّ تحته،
   وكان يظهر من الشفافية فتُرى صفوفها من خلاله. ما فيه وحده يتزيّح ربع الشاشة ويظهر، بـ translate المستقلّة
   (لا transform: الحبّة المنزلقة .nav-pill موضعها في transform). */
#app-bar[data-under="pop-show"] > *, #bottom-nav[data-under="pop-show"] > * { animation: scr-chrome-kids-in 240ms var(--vt-ease) backwards; }
@keyframes scr-chrome-out { from { transform: none; opacity: 1; } to { transform: translateX(var(--vt-under)); opacity: 0; } }
@keyframes scr-chrome-kids-in { from { translate: var(--vt-under-vw) 0; opacity: 0; } to { translate: none; opacity: 1; } }
/* رجوع قطع دفعاً (router.js · _pushCarry): الشريط الذي كان يتلاشى يعود كله من حيث وصل (--tx-u0 · --tx-o0) */
#app-bar[data-under="pop-back"], #bottom-nav[data-under="pop-back"] { animation: scr-chrome-back 240ms var(--vt-ease) backwards; }
@keyframes scr-chrome-back { from { transform: translateX(var(--tx-u0, 0px)); opacity: var(--tx-o0, 1); } to { transform: none; opacity: 1; } }
#screen-container > [data-transition="fade"] { animation: scr-fade-in 160ms var(--ease) backwards; }
@keyframes scr-push-in { from { transform: translateX(var(--vt-in)); } to { transform: none; } }
/* --tx-x0 · --tx-u0 · --tx-d0: رجوع قطع دفعاً يبدأ من حيث وصلت الطبقات (router.js · _pushCarry)؛ بلاها كما كانت */
@keyframes scr-pop-out { from { transform: translateX(var(--tx-x0, 0px)); } to { transform: translateX(var(--vt-in)); } }
@keyframes scr-push-under { from { transform: none; } to { transform: translateX(var(--vt-under)); } }
@keyframes scr-pop-under  { from { transform: translateX(var(--tx-u0, var(--vt-under))); } to { transform: none; } }
@keyframes scr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scr-dim-in  { from { opacity: 0; } to { opacity: var(--scr-dim); } }
@keyframes scr-dim-out { from { opacity: var(--tx-d0, var(--scr-dim)); } to { opacity: 0; } }
/* الرأس والشريط السفلي ممسوكان تحت طبقة تغطي الشاشة حتى تستقرّ (router.js · _holdChrome) */
#app-bar[hidden][data-hold] { display: flex !important; }
#bottom-nav[hidden][data-hold] { display: grid !important; }
/* سحب الرجوع من المحادثة: القائمة المركونة تحتها تظهر في مكانها برأسها وشريطها (router.js · peekBack) */
#screen-container > [data-cached][data-peek] { position: static; z-index: auto; content-visibility: visible; opacity: 1; }
#app-bar[hidden][data-peek] { display: flex !important; }
#bottom-nav[hidden][data-peek] { display: grid !important; }

/* تبديل التبويبات — 1.15 «تلاشٍ عابر» (Material fade-through) بطبقتين (router.js · _txStart):
   • القديمة (tab-out) تبقى في مكانها وتتلاشى إلى 0 مع scale .98 في 80ms بمنحنى متسارع، ثم تُركن.
   • الجديدة (tab-next/prev، فوقها data-tx-top) من 0 مع ±16px من جهة تبويبها في الشريط (tab-next: الأبعد في
     الترتيب، أي يسار العربية) و scale .99، في 210ms بمنحنى متباطئ بعد 80ms — حين تبلغ القديمة الصفر لا قبله
     (التقاطع ولو بإطار يُرى شاشتين باهتتين معاً)، ومنحناها يبلغ ربع الظهور في إطارها الأول فلا إطار فارغ. المجموع 290ms. tab وحدها (ترتيب مجهول) بلا إزاحة.
   • مركز scale وسط ما يُرى (الموجّه يضع transform-origin من تمرير كلٍّ منهما).
   بلا طبقتين (احتياط: لا قديمة في الحاوية) الجديدة وحدها بلا تأخير. */
#screen-container > [data-transition="tab-out"]  { animation: scr-tab-out 80ms var(--tab-out-ease) forwards; }
#screen-container > [data-transition="tab"]      { animation: scr-tab-in 210ms var(--tab-in-ease) backwards; }
#screen-container > [data-transition="tab-next"] { animation: scr-tab-in-next 210ms var(--tab-in-ease) backwards; }
#screen-container > [data-transition="tab-prev"] { animation: scr-tab-in-prev 210ms var(--tab-in-ease) backwards; }
#screen-container > [data-tx-top]:is([data-transition="tab"], [data-transition="tab-next"], [data-transition="tab-prev"]) { animation-delay: 80ms; }
[dir="rtl"] #screen-container > [data-transition="tab-next"] { animation-name: scr-tab-in-prev; }
[dir="rtl"] #screen-container > [data-transition="tab-prev"] { animation-name: scr-tab-in-next; }
/* تبويب يقطع تبويباً (router.js · _tabCarry): --tx-op0/--tx-tf0 من حيث كانت التي تغادر (لا تقفز إلى ظهورها الكامل
   ثم تتلاشى)، و--tx-in0 من حيث كانت العائدة في تلاشيها. بلاها: كما كانت حرفاً بحرف. */
@keyframes scr-tab-out     { from { opacity: var(--tx-op0, 1); transform: var(--tx-tf0, none); } to { opacity: 0; transform: scale(.98); } }
@keyframes scr-tab-in      { from { opacity: var(--tx-in0, 0); transform: scale(.99); } to { opacity: 1; transform: none; } }
@keyframes scr-tab-in-next { from { opacity: var(--tx-in0, 0); transform: translateX(16px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes scr-tab-in-prev { from { opacity: var(--tx-in0, 0); transform: translateX(-16px) scale(.99); } to { opacity: 1; transform: none; } }
/* أيقونة التبويب الذي صار نشطاً تنبض قليلاً */
@keyframes tab-pop { 0% { transform: none; } 45% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes toast-in { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* حجم الخط من الإعدادات. المعامل رمزٌ على body (--fs-zoom) كي يحسب به ما هو خارج
   الشاشة موضعَ ما فيها: الزر العائم داخل .screen يكبر ويرتفع معها، و#toast-host
   خارجها لا يتكبّر (رفع الإشعار فوق الزر في chats.css). */
body[data-fs="s"]  { --fs-zoom: .92; }
body[data-fs="l"]  { --fs-zoom: 1.1; }
body[data-fs="xl"] { --fs-zoom: 1.22; }
body[data-fs] #screen-container > .screen { zoom: var(--fs-zoom, 1); }

/* وضع اليد الواحدة (ui/shell.js) */
#screen-container, #app-bar { transition: transform var(--dur-3) var(--ease); }
body.m-reach #screen-container, body.m-reach #app-bar { transform: translateY(36vh); }
.m-reach-scrim { position: fixed; inset: 0 0 auto; height: 36vh; z-index: 29; display: none; }
body.m-reach .m-reach-scrim { display: block; }

/* تقليل الحركة */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ═══ ٨. أدوات صغيرة ═════════════════════════════════════════════════ */
.muted { color: var(--fg-3); }
.tnum { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: grid; gap: var(--s-3); }
.row-flex { display: flex; align-items: center; gap: var(--s-2); }
.grow { flex: 1; min-width: 0; }

/* ═══ ٩. توافق مؤقت مع مفردات 1.0.0 (لما لم يُنقل بعد) ═════════════════
   لا تستعملها في كود جديد؛ استعمل المكوّنات أعلاه. تُحذف حين لا يبقى مستعمل. */
.card { background: var(--bg-elev); border-radius: var(--r-lg); padding: var(--s-4); margin: var(--s-3) var(--s-4); }
.section-h { font-size: var(--fz-sm); font-weight: 800; color: var(--fg-3); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.section-h .icon-svg { width: 18px; height: 18px; }
.text-2 { color: var(--fg-2); } .text-3 { color: var(--fg-3); }
.text-xs { font-size: var(--fz-xs); } .text-sm { font-size: var(--fz-sm); }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mt-8 { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 8px; } .row.between, .between { justify-content: space-between; }
.chip.green { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.chip.purple, .chip.accent { background: var(--accent-soft); color: var(--accent); }
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 48px 28px; color: var(--fg-2); }
.empty .icon { font-size: 40px; }
.empty h3 { color: var(--fg); font-size: var(--fz-lg); }

/* ═══ ١٠. الأساسيات (1.4): الإشعار بإجراء، التحديد، الاختيار، الإبراز، المعرض ═══ */

/* الإشعار العائم بزرّ إجراء (ui/toast.js: {action}) — «تراجع» «فتح» «إعادة المحاولة».
   الزرّ يأخذ لمسته كاملة (feel.js لا يبدأ سحباً منه). */
.toast-msg { flex: 1; min-width: 0; }
.toast.has-act { padding-block: 6px; padding-inline-end: 6px; }
.snack-act {
  flex: none; min-height: 36px; padding: 0 12px; margin-inline-start: 4px; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--toast-info); font: inherit; font-size: var(--fz-md); font-weight: 800; white-space: nowrap;
  touch-action: manipulation; transition: background-color var(--dur-1);
}
.snack-act:active { background: color-mix(in srgb, var(--toast-info) 18%, transparent); }
.toast-progress::before { width: 14px; height: 14px; background: none; border: 2px solid var(--toast-info); border-top-color: transparent; animation: spin .8s linear infinite; }

/* شريط التحديد (ui/selection-bar.js) — فوق الرأس الذي يركّب فيه، بالشفافية وحدها. */
.selbar {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; gap: 2px;
  padding-inline: 6px 8px; background: var(--bar-bg); color: var(--fg);
  animation: fade-in var(--dur-1) var(--ease) both;
}
#app-bar > .selbar { padding-top: var(--safe-t); }
.selbar.selbar-out { opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.selbar-x { color: var(--fg); }
.selbar-count { flex: 1; min-width: 0; padding-inline: 10px 4px; font-size: var(--fz-xl); font-weight: 700; line-height: 1.2; }
.selbar-acts { display: flex; align-items: center; gap: 2px; }
.selbar-act { color: var(--fg); }
.selbar-act.danger { color: var(--danger); }
.selbar-act:disabled { opacity: .38; }

/* قائمة الاختيار (ui/forward-picker.js · .pick-*) — صفوف بعلامة اختيار، وشرائح المختار،
   وتعليق، وزرّ إرسال بعدد. ورقة بارتفاع ~75% (الممسك يرفعها للشاشة كلها). */
.pick-sheet { display: flex; flex-direction: column; height: min(75vh, 680px); }
#sheet.m-full .pick-sheet { height: calc(100vh - var(--safe-t) - 70px); }
.pick-head .sheet-title { margin-bottom: 4px; }
.pick-head .sheet-sub { margin: 0 4px 10px; }
.pick-search { flex: none; margin-bottom: 6px; }
.pick-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline: -16px; }
.pick-sec { padding: 14px 16px 4px; font-size: var(--fz-sm); font-weight: 800; color: var(--fg-3); }
.pick-list { background: none; --sep-inset: 72px; }
.pick-row { min-height: 60px; }
.pick-row .av-sm { --sz: 40px; }                 /* الصورة 40 كما في المواصفة (36 = av-sm) */
.pick-row .item-sub { font-size: var(--fz-sm); color: var(--fg-3); }
.pick-row.on { background: var(--accent-soft); }
.pick-check {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fg-3); color: transparent;
  display: grid; place-items: center; transition: background-color var(--dur-1), border-color var(--dur-1);
}
.pick-check .icon-svg { width: 15px; height: 15px; }
.pick-check svg { stroke-width: 3; }
.pick-row.on .pick-check { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); animation: pick-pop var(--dur-1) var(--ease-spring); }
@keyframes pick-pop { from { transform: scale(.6); } to { transform: none; } }
.pick-tile { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-fg); }
.pick-tile-sm { width: 40px; height: 40px; } .pick-tile-xs { width: 28px; height: 28px; }
.pick-tile .icon-svg { width: 55%; height: 55%; }
.pick-tile svg { fill: currentColor; }
.pick-av { position: relative; display: grid; }
.pick-kind {
  position: absolute; bottom: -2px; inset-inline-end: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-elev); color: var(--fg-2); box-shadow: 0 0 0 1px var(--sep);
}
.pick-kind .icon-svg { width: 12px; height: 12px; }
.pick-retry { display: flex; justify-content: center; padding-bottom: 16px; }
.pick-foot { flex: none; margin-inline: -16px; padding: 8px 16px 0; border-top: 1px solid var(--sep); background: var(--bg-elev); }
.pick-foot.pick-rise { animation: pick-rise var(--dur-2) var(--ease) backwards; }
@keyframes pick-rise { from { transform: translateY(100%); } to { transform: none; } }
.pick-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.pick-chips::-webkit-scrollbar { display: none; }
.pick-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; max-width: 170px;
  padding-inline: 3px 8px; border: 0; border-radius: 17px; background: var(--bg-2); color: var(--fg);
  font-size: var(--fz-sm); font-weight: 700; animation: pop-in var(--dur-2) var(--ease-spring) backwards;
}
.pick-chip > .icon-svg { width: 14px; height: 14px; color: var(--fg-3); }
.pick-chip .pick-kind { display: none; }
.pick-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-note { padding: 0 4px 8px; font-size: var(--fz-sm); color: var(--warning); font-weight: 600; }
.pick-compose { display: flex; align-items: flex-end; gap: 8px; }
.pick-comment {
  flex: 1; min-width: 0; height: 44px; max-height: 96px; resize: none; border: 0; outline: none; border-radius: 22px;
  padding: 11px 16px; background: var(--bg-2); color: var(--fg); font: inherit; font-size: var(--fz-base); line-height: 1.4;
}
.pick-comment::placeholder { color: var(--fg-3); }
.pick-send {
  position: relative; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); display: grid; place-items: center;
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-2);
}
.pick-send:active { transform: scale(.92); }
.pick-send:disabled { opacity: .45; }
.pick-send > .icon-svg { width: 22px; height: 22px; }
.pick-send .badge { position: absolute; top: -4px; inset-inline-end: -4px; box-shadow: 0 0 0 2px var(--bg-elev); }

/* ورقة التأكيد (ui/sheet.js · confirmSheet) */
.confirm-sheet .sheet-title { font-size: var(--fz-lg); line-height: 1.45; }
.confirm-sheet .sheet-actions { margin-top: 8px; }

/* إبراز ما طابق البحث (chat-features.js · markHtml) */
mark.hl { background: color-mix(in srgb, var(--warning) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* العارض كمعرض (ui/lightbox.js · openMediaGallery): العدد، الفيديو، «غير متاح»، الإجراءات */
.lbx-count { flex: none; padding-inline: 8px; font-size: var(--fz-md); font-weight: 700; opacity: .85; }
.lbx-vid { max-width: 100%; max-height: 100%; background: #000; }
.lbx-spin { position: absolute; width: 30px; height: 30px; border-color: rgba(255, 255, 255, .75); border-top-color: transparent; }
.lbx-miss { display: grid; justify-items: center; gap: 8px; color: rgba(255, 255, 255, .7); font-weight: 700; }
.lbx-miss .icon-svg { width: 44px; height: 44px; }
.lbx-acts { display: contents; }
.th-lb .th-lb-bar { flex-wrap: nowrap; gap: 22px; align-items: center; }

/* علامة التوثيق الزرقاء (ui/verified.js، القدرة verified) — كتيليجرام: بعد الاسم، بحجم الخط، لا تُقصّ مع الاسم. */
:root { --verified: #3390EC; }
.vbadge { display: inline-flex; flex: none; width: 1.05em; height: 1.05em; margin-inline-start: 4px; vertical-align: -0.16em; color: var(--verified); }
.vbadge svg { width: 100%; height: 100%; display: block; }
.vbadge-lg { width: 22px; height: 22px; vertical-align: -4px; margin-inline-start: 6px; }