/* ═══════════════════════════════════════════════════════════════════════
   touch — ما يمحو بقايا المتصفح ويجعل اللمس أصلياً (docs/DESIGN.md §٥).
   ───────────────────────────────────────────────────────────────────────
   يُحمَّل بعد ui.css وملفات الشاشات. لا ألوان هنا ولا تخطيط؛ فقط سلوك اللمس:
   لا تحديد نص على الواجهة (يبقى في الحقول ونصوص يختار المستخدم نسخها)، لا وميض
   أزرق عند اللمس، لا قائمة ضغط مطوّل ولا سحب للصور، لا تكبير بالنقر المزدوج، لا
   ارتداد للصفحة كلها، أشرطة تمرير مخفية على الجوال، وحلقة التركيز للوحة المفاتيح
   وحدها. والتموّج (ui/feel.js) شكله هنا، والضغط المشترك (.m-pressed · --press-s)، ونابض الورقة
   السفلية ومقبض سحبها (ui/sheet.js).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الصفحة كلها ── */
html {
  overscroll-behavior: none;            /* لا سحب-للتحديث ولا ارتداد للمستند */
  touch-action: manipulation;           /* لا تكبير بالنقر المزدوج ولا تأخير 300ms */
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-user-select: none; user-select: none;     /* الواجهة لا تُحدَّد كصفحة */
  -webkit-touch-callout: none;
}
/* ما يُكتب أو يُنسخ يبقى قابلاً للتحديد */
input, textarea, select, [contenteditable=""], [contenteditable="true"], .selectable, .ltr.selectable {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
img, svg, a, video { -webkit-user-drag: none; user-drag: none; }
a, button, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* مناطق التمرير: الارتداد والتمدّد المحلّي (سلوك أندرويد الأصلي) بلا تسلسل إلى
   ما تحتها. */
#screen-container, #sheet, .upd-sheet, .th-scroll, #th-scroll { overscroll-behavior: contain; }

/* أشرطة التمرير: لا على شاشات اللمس */
@media (pointer: coarse) {
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* حلقة التركيز: للوحة المفاتيح وحدها، لا عند اللمس ولا عند تركيز برمجي */
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

/* ── التموّج (ui/feel.js) ──
   .rp-wrap يملأ العنصر المضغوط ويقصّ على حوافّه (border-radius: inherit)، و.rp
   الدائرة التي تكبر من نقطة الإصبع. لونها currentColor: داكن على الصفوف، أبيض على
   الأزرار الممتلئة والزر العائم. */
.rp-wrap {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  pointer-events: none; contain: strict;
}
.rp {
  position: absolute; border-radius: 50%; background: currentColor; opacity: 0;
  transform: scale(.2); pointer-events: none; will-change: transform, opacity;
}
.rp-wrap { opacity: .12; }
body:not([data-theme="light"]) .rp-wrap { opacity: .16; }
.btn .rp-wrap, .fab .rp-wrap, .call-stage .rp-wrap { opacity: .22; }
/* التبويب: 1.15 — لا تملأ حبّته حين تُضغط: الحبّة الآن واحدة تنزلق إليه (.nav-pill، shell.js)، وملؤها
   هنا كان يُظهر حبّتين أثناء الانزلاق. التموّج داخلها (من المركز) هو ظلّ الضغط. */

/* ── الضغط الفوري ──
   :active على الجوال قد يتأخّر داخل قائمة تُمرَّر؛ التموّج يغطي ذلك. وهذه ضغطات لم
   يكن لها شكل. */
.chats-row:active, .calls-row:active, .set-me:active { background: var(--bg-2); }
.chip:active { filter: brightness(.96); }

/* أزرار تحتضن التموّج ولا position لها من قبل. :where = بلا وزن: أي قاعدة شاشة
   تضع لها position أخرى تغلب. */
:where(.btn, .chip, .menu-item, .seg button) { position: relative; }

/* ── الضغط: قاعدة واحدة لكل ما يُضغط (1.15) ──
   ui/feel.js يضع .m-pressed على المضغوط من لحظة التموّج (فوراً، أو بعد 40ms داخل ما يتمرّر) حتى الرفع —
   90ms على الأقل فتُرى النقرة السريعة — أو حتى يبدأ التمرير والسحب. ويصغّره بقدر --press-s بخاصية scale
   المستقلّة (Element.animate: 100ms نزولاً، ونابض 260ms عودةً) — لا transform ولا transition، فلا يمسّ
   موضع العنصر ولا انتقالات شاشته. ثلاث فئات، وأي شاشة تضيف عنصرها بـ data-press أو تُخرجه بـ
   --press-s: 1 (:where = بلا وزن، فقاعدة الشاشة تغلب):
     • الأزرار والشرائح: .97        • الأيقونية: .94        • البطاقات: .985
     • الصفوف (بعرض الشاشة): أرضية خفيفة بلا تصغير — الصفّ الذي يصغر يبدو كأنه يبتعد. */
:where(.btn, .chip, .chats-chip, .seg button, .pick-chip, [data-press="btn"]) { --press-s: .97; }
:where(.icon-btn, [data-press="icon"]) { --press-s: .94; }
:where(.mine-card, .th-sahacard, .ad-scard, [data-press="card"]) { --press-s: .985; }
/* شريط الأقسام (ui/sections.js) لا يصغر شيء فيه: الحبّة المنزلقة تصل إلى المختار بحجمه الكامل، فزرّ أو شريحة
   تعود من .97 تحتها (أو فوقها بظلّ تموّجها) تُظهر حافّتين أثناء الانزلاق، وscale الجاري يجعل الشريحة سياق تراصّ
   فوق الحبّة لحظةً. يكفيها التموّج والحبّة نفسها والنبضة. */
.sec-bar > * { --press-s: 1; }
:where(.item.tap, label.item, .menu-item, .chats-row, .calls-row, [data-press="row"]).m-pressed { background-color: var(--bg-2); }
/* تصغير :active القديم في الزرّ والشريحة صار هنا (scale): يبقى اللون، ولا يتضاعف التصغير. حيث لا scale
   (WebView أقدم من 104) يبقى :active كما كان. */
@supports (scale: 1) {
  .btn:active:not(:disabled) { transform: none; }
  .chats-chip:active { transform: none; }
}

/* ── الورقة السفلية (ui/sheet.js) ──
   تُفتح بنابض لطيف: تصل في ~220ms متجاوزةً موضعها 5px ثم تستقرّ (320ms كلها) — بدل انزلاق 220ms بلا
   ارتداد. والظلّ الثاني (بلونها، 64px تحتها بلا تمويه) يملأ ما ينكشف تحتها حين تتجاوز موضعها إلى الأعلى (هذا
   الارتداد، والمطّ المقاوم في السحب، ونابض العودة) — فلا يظهر ما تحتها من فجوة. */
#sheet {
  animation: sheet-spring 320ms;
  box-shadow: 0 64px 0 0 var(--bg-elev), var(--shadow-3);   /* الملء أولاً: فوق ظلّها لا تحته */
}
@keyframes sheet-spring {
  0%   { transform: translateY(100%); animation-timing-function: cubic-bezier(.2, .75, .3, 1); }
  68%  { transform: translateY(-5px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: translateY(0); }
}
/* الممسك: الخطّ 5px والمسافة حوله لا تُلمس — مساحة لمس 158×27 حوله (لا تغطّي العنوان). */
#sheet > .grabber { position: relative; }
#sheet > .grabber::before { content: ""; position: absolute; inset: -12px -60px -10px; }
#sheet > .grabber:active { cursor: grabbing; }

/* تقليل الحركة: لا تموّج، ولا نابض للورقة (تظهر في مكانها) */
body.reduce-motion .rp-wrap { display: none; }
body.reduce-motion #sheet { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rp-wrap { display: none; }
  #sheet { animation: none; }
}