/* ═══════════════════════════════════════════════════════════════════════
   شاشة المحادثة (.th-*) — عارض الصور (.th-lb) — مسجّل الصوت (.th-rec)
   ───────────────────────────────────────────────────────────────────────
   المرجع: docs/DESIGN.md. الرموز والمكوّنات من css/ui.css ولا يُعاد تعريفها هنا.
   الشاشة عمود بعرض الحاوية وارتفاعها: رأس · شريط التثبيت · الرسائل (تمرير
   مستقل في #th-scroll) · صندوق الكتابة. لا position: fixed داخلها (درس 1.0.0)،
   ولوحة المفاتيح تقصّر الرسائل وحدها.
   الاتجاه: خصائص منطقية فقط — الواردة في inline-start (يمين العربية)،
   والصادرة في inline-end (يسارها)، والذيل في جهة المرسل.
   الحركة: transform وopacity وحدهما، بمدد الرموز.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ ١. الشاشة والخلفية ══════════════════════════════════════════════ */
/* 1.9.6 — طبقة تغطي الشاشة (fixed لا absolute): تنزلق فوق القائمة ورأسها وشريطها كما هم، ولا
   تتبع تمرير الحاوية — القائمة تحتها تبقى في موضعها، والعودة إليها كشفٌ لا إعادة بناء
   (router.js · meta.cover). وفي المحادثة نفسها الرأس والشريط مخفيان، فالحاوية هي الشاشة كلها:
   الصندوق نفسه الذي كان absolute يأخذه. لا position: fixed داخلها (الدرس أعلاه باقٍ). */
.th {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden; isolation: isolate;
  background: var(--wallpaper);
  /* ui.css يعرّف --bubble-in-fg على :root فيُحلّ بلون النص الفاتح حتى في الداكن؛
     يُعاد ربطه هنا كي يتبع السمة (طلب مشترك: نقله إلى body في ui.css) */
  --bubble-in-fg: var(--fg);
  /* ألوان الأسماء من hue المرسل: أغمق في الفاتح، أفتح في الداكن */
  --th-name-s: 58%; --th-name-l: 40%;
  --th-meta: color-mix(in srgb, var(--bubble-in-fg) 48%, transparent);
  --th-meta-out: color-mix(in srgb, var(--bubble-out-fg) 52%, transparent);
  --th-quote-in: color-mix(in srgb, var(--fg) 6%, transparent);
  --th-quote-out: color-mix(in srgb, var(--bubble-out-fg) 9%, transparent);
  --th-chip: color-mix(in srgb, var(--bubble-in) 92%, transparent);
}
body[data-theme="dark"] .th, body[data-theme="oled"] .th {
  --th-name-s: 70%; --th-name-l: 72%;
  --th-quote-in: color-mix(in srgb, var(--fg) 7%, transparent);
}
/* نقش خفيف جداً: SVG صغير مكرّر، لونه --wallpaper-ink (يتبع السمة) */
.th::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--wallpaper-ink); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 18)'%3E%3Cpath d='M2 9a9 8 0 1 1 4.5 7l-5 1.6 1.6-4A8 8 0 0 1 2 9z'/%3E%3C/g%3E%3Cg transform='translate(112 14) rotate(-12 10 10)'%3E%3Cpath d='M10 17s-8-4.6-8-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 18 7c0 5.4-8 10-8 10z'/%3E%3C/g%3E%3Cg transform='translate(204 28) rotate(10 10 10)'%3E%3Cpath d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3C/g%3E%3Cg transform='translate(52 90) rotate(-8 10 10)'%3E%3Cpath d='M4 2h4l2 5-2.5 1.5a11 11 0 0 0 5 5L14 11l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 2 4a2 2 0 0 1 2-2z'/%3E%3C/g%3E%3Cg transform='translate(160 96)'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='M6 12.5s1.5 2 4 2 4-2 4-2M7 7.5h.01M13 7.5h.01'/%3E%3C/g%3E%3Cg transform='translate(222 132) rotate(14 10 10)'%3E%3Cpath d='M20 1L9 12M20 1l-7 19-4-8-8-4z'/%3E%3C/g%3E%3Cg transform='translate(20 166)'%3E%3Cpath d='M7 17V3l11-2v13'/%3E%3Ccircle cx='4.5' cy='17' r='2.5'/%3E%3Ccircle cx='15.5' cy='14' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(100 176) rotate(6 11 11)'%3E%3Crect x='1' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M7 5l2-3h4l2 3'/%3E%3Ccircle cx='11' cy='12' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(196 206)'%3E%3Cpath d='M16 12.5A7.5 7.5 0 1 1 7.5 4a6 6 0 0 0 8.5 8.5z'/%3E%3C/g%3E%3Cg transform='translate(146 156)'%3E%3Cpath d='M2 9l4 4 8-8M9 12l1.5 1.5L18 6'/%3E%3C/g%3E%3Cg transform='translate(36 222) rotate(-6 10 10)'%3E%3Crect x='1' y='3' width='18' height='13' rx='2'/%3E%3Cpath d='M1 5l9 6 9-6'/%3E%3C/g%3E%3Ccircle cx='86' cy='50' r='2.2'/%3E%3Ccircle cx='152' cy='62' r='1.6'/%3E%3Cpath d='M238 92v8M234 96h8'/%3E%3Cpath d='M100 128v7M96.5 131.5h7'/%3E%3Ccircle cx='244' cy='244' r='2'/%3E%3Ccircle cx='128' cy='236' r='2.6'/%3E%3Ccircle cx='18' cy='120' r='1.8'/%3E%3Cpath d='M176 246l4-4M180 246l-4-4'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 18)'%3E%3Cpath d='M2 9a9 8 0 1 1 4.5 7l-5 1.6 1.6-4A8 8 0 0 1 2 9z'/%3E%3C/g%3E%3Cg transform='translate(112 14) rotate(-12 10 10)'%3E%3Cpath d='M10 17s-8-4.6-8-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 18 7c0 5.4-8 10-8 10z'/%3E%3C/g%3E%3Cg transform='translate(204 28) rotate(10 10 10)'%3E%3Cpath d='M10 1l2.7 5.6 6.1.9-4.4 4.3 1 6.1L10 15l-5.4 2.9 1-6.1L1.2 7.5l6.1-.9z'/%3E%3C/g%3E%3Cg transform='translate(52 90) rotate(-8 10 10)'%3E%3Cpath d='M4 2h4l2 5-2.5 1.5a11 11 0 0 0 5 5L14 11l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 2 4a2 2 0 0 1 2-2z'/%3E%3C/g%3E%3Cg transform='translate(160 96)'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='M6 12.5s1.5 2 4 2 4-2 4-2M7 7.5h.01M13 7.5h.01'/%3E%3C/g%3E%3Cg transform='translate(222 132) rotate(14 10 10)'%3E%3Cpath d='M20 1L9 12M20 1l-7 19-4-8-8-4z'/%3E%3C/g%3E%3Cg transform='translate(20 166)'%3E%3Cpath d='M7 17V3l11-2v13'/%3E%3Ccircle cx='4.5' cy='17' r='2.5'/%3E%3Ccircle cx='15.5' cy='14' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(100 176) rotate(6 11 11)'%3E%3Crect x='1' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M7 5l2-3h4l2 3'/%3E%3Ccircle cx='11' cy='12' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(196 206)'%3E%3Cpath d='M16 12.5A7.5 7.5 0 1 1 7.5 4a6 6 0 0 0 8.5 8.5z'/%3E%3C/g%3E%3Cg transform='translate(146 156)'%3E%3Cpath d='M2 9l4 4 8-8M9 12l1.5 1.5L18 6'/%3E%3C/g%3E%3Cg transform='translate(36 222) rotate(-6 10 10)'%3E%3Crect x='1' y='3' width='18' height='13' rx='2'/%3E%3Cpath d='M1 5l9 6 9-6'/%3E%3C/g%3E%3Ccircle cx='86' cy='50' r='2.2'/%3E%3Ccircle cx='152' cy='62' r='1.6'/%3E%3Cpath d='M238 92v8M234 96h8'/%3E%3Cpath d='M100 128v7M96.5 131.5h7'/%3E%3Ccircle cx='244' cy='244' r='2'/%3E%3Ccircle cx='128' cy='236' r='2.6'/%3E%3Ccircle cx='18' cy='120' r='1.8'/%3E%3Cpath d='M176 246l4-4M180 246l-4-4'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
}
/* الإشعار العائم فوق صندوق الكتابة ما دامت المحادثة مفتوحة (الشريط السفلي مخفي):
   يُغذّى مدخل المكوّن نفسه (--bottom-inset) بارتفاع الصندوق الفعلي، الذي يقيسه
   chat-thread.js في --th-dock-h (يكبر مع شريط الرد/التعديل والمرفقات والنص).
   طلب مشترك: متغيّر --toast-lift في ui.css بدل هذا السطر. */
.th-open #toast-host { --bottom-inset: var(--th-dock-h, calc(62px + var(--safe-b))); }

/* ═══ ٢. الرأس ════════════════════════════════════════════════════════ */
.th-head {
  position: relative; z-index: 4; flex: none;
  height: calc(var(--bar-h) + var(--safe-t)); padding-top: var(--safe-t);
  padding-inline: 4px 6px;
  display: flex; align-items: center; gap: 0;
  background: var(--bar-bg); border-bottom: 1px solid var(--sep);
}
.th-back { margin-inline-end: -4px; color: var(--fg); }
.th-peer {
  flex: 1; min-width: 0; height: 48px; padding: 0 6px; margin: 0;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 12px; background: none; color: inherit; text-align: start;
  transition: background-color var(--dur-1);
}
button.th-peer:active { background: var(--bg-2); }
/* 1.3 — رأس المحادثة الخاصة يفتح الملف الشخصي (خادم «تواصل»): div بدور زرّ */
.th-peer[role="button"] { cursor: pointer; transition: background-color var(--dur-1); }
.th-peer[role="button"]:active { background: var(--bg-2); }
.th-av { flex: none; display: grid; }
.th-av .av > i { border-color: var(--bar-bg); }
.th-av-skel { background: var(--bg-2); }
.th-titles { min-width: 0; display: grid; gap: 0; }
.th-title {
  font-size: var(--fz-lg); font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.th-title:empty { width: 120px; height: 14px; border-radius: 7px; background: var(--bg-2); }
.th-sub {
  font-size: var(--fz-sm); color: var(--fg-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur-2);
}
.th-sub.th-sub-on { color: var(--accent); }
.th-acts { display: flex; align-items: center; flex: none; }
.th-acts .icon-btn { color: var(--fg-2); }

/* البحث داخل المحادثة: يغطي الرأس (1.4: النتائج في شريط التنقّل و«عرض كقائمة» — §١٢) */
.th-search {
  position: absolute; inset: var(--safe-t) 0 0; z-index: 2;
  display: flex; align-items: center; gap: 4px; padding-inline: 4px 10px;
  background: var(--bar-bg);
  animation: th-fade var(--dur-2) var(--ease) backwards;
}
.th-search-field { flex: 1; min-width: 0; }
.th-search-field input::-webkit-search-cancel-button { display: none; }
.th-sres {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 8px 16px; border: 0; background: none; color: var(--fg); text-align: start;
  font-size: var(--fz-md); transition: background-color var(--dur-1);
}
.th-sres + .th-sres { border-top: 1px solid var(--sep); }
.th-sres:active { background: var(--bg-2); }
.th-sres-body { flex: 1; min-width: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-sres-body mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 1px; }
.th-sres-time { flex: none; font-size: var(--fz-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.th-sres-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; color: var(--fg-3); font-size: var(--fz-md); }
.th-sres-empty .icon-svg { width: 18px; height: 18px; }

/* الرسالة المثبتة تحت الرأس */
.th-pinned {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px;
  background: var(--bar-bg); border-bottom: 1px solid var(--sep); cursor: pointer;
  animation: th-drop var(--dur-2) var(--ease) backwards;
  transition: background-color var(--dur-1);
}
.th-pinned:active { background: var(--bg-2); }
.th-pinned-bar { width: 3px; align-self: stretch; margin-block: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.th-pinned-body { flex: 1; min-width: 0; display: grid; }
.th-pinned-k { font-size: var(--fz-sm); font-weight: 700; color: var(--accent); line-height: 1.35; }
.th-pinned-k b { font-weight: 800; }
.th-pinned-t { font-size: var(--fz-md); color: var(--fg-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-pinned-ic { color: var(--fg-3); flex: none; }
.th-pinned-ic .icon-svg { width: 18px; height: 18px; }

/* ═══ ٣. منطقة الرسائل ════════════════════════════════════════════════ */
.th-main { position: relative; flex: 1; min-height: 0; }
/* عمود مرن: القائمة تُدفع إلى الأسفل (margin-top: auto)، فالمحادثة القصيرة تجلس
   فوق صندوق الكتابة كما في واتساب وتيليجرام، لا تحت الرأس */
.th-scroll {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
}
.th-list { position: relative; flex: none; margin-top: auto; }
/* بطاقة «لا رسائل بعد» أو «تعذّر التحميل»: في منتصف المساحة */
.th-list:has(> .th-empty) { margin-bottom: auto; }
.th-older { position: absolute; top: 8px; inset-inline: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.th-older .th-spin { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--bg-elev); box-shadow: var(--shadow-2); border-width: 2px; background-clip: padding-box; }

/* شرائح الأيام: كل يوم كتلة (.th-dayblk) تبدأ بشريحته في مكان محجوز لها (هامشها
   فوقها وتحتها)، والشريحة ملتصقة داخل كتلتها وحدها — تلتصق أعلى القائمة ما دام
   يومها ظاهراً ثم تُدفع للأعلى حين ينتهي، فلا تتكدّس الشرائح فوق بعضها.
   كتيليجرام وواتساب: الشريحة في مكانها (يومها يبدأ على الشاشة) ظاهرة دائماً ولا
   تغطي شيئاً؛ أما التي يحملها الالتصاق فوق رسائل يومها (.th-day-float — يضعها
   chat-thread.js حين تغطي أول ما بعدها) فتظهر ما دام الإصبع يمرّر (.th-scrolling)
   وتتلاشى حين يسكن، ولا تظهر أصلاً عند فتح المحادثة. يقرّر ذلك JS لا
   scroll-state(stuck): الأخير غير موجود في WebView أقدم من Chromium 133 فتبقى
   الشريحة فوق أول فقاعة إلى الأبد، ويُعدّ الشريحة «ملتصقة» لو انزاحت 1px وهي
   في مكانها بعد. */
.th-dayblk { display: block; }
.th-day { position: sticky; top: 6px; z-index: 2; display: flex; justify-content: center; margin: 10px 0 6px; pointer-events: none; }
.th-day > span {
  padding: 4px 12px; border-radius: 10px; background: var(--th-chip);
  font-size: var(--fz-xs); font-weight: 700; line-height: 1.5; color: var(--fg-2);
  transition: opacity var(--dur-2) var(--ease);
}
/* العائمة فوق فقاعة بلونها نفسه كانت تذوب فيها (اسم اليوم كأنه نصّ في الفقاعة):
   ظلّ العائم يرفعها عمّا تحتها، ولون المرفوع (--bg-elev) يقع في الداكن بين الخلفية
   والفقاعة فتُقرأ فوق كلتيهما (وهو أبيض الفقاعة نفسه في الفاتح) */
.th-day.th-day-float > span { opacity: 0; background: var(--bg-elev); box-shadow: var(--shadow-2); }
.th-scroll.th-scrolling .th-day-float > span { opacity: 1; transition-duration: var(--dur-1); }
/* فاصل غير المقروء */
.th-unread { margin: 10px 0 8px; padding: 5px 16px; text-align: center; background: var(--th-chip); }
.th-unread span { font-size: var(--fz-sm); font-weight: 700; color: var(--accent); }

/* حالات: هيكل مؤقت، لا رسائل */
.th-skel { padding: 12px 0; display: grid; gap: 10px; }
.th-skel-row { display: flex; padding: 0 14px; }
.th-skel-row.th-out { justify-content: flex-end; }
.th-skel-row .skel { height: 38px; border-radius: var(--r-lg); max-width: 80%; }
.th-empty {
  margin: 24px auto; max-width: 290px; padding: 20px 22px; border-radius: var(--r-xl);
  background: var(--th-chip); text-align: center;
  display: grid; justify-items: center; gap: 4px; color: var(--fg-2);
  animation: th-pop var(--dur-3) var(--ease-spring) backwards;
}
.th-empty > .icon-svg { width: 40px; height: 40px; color: var(--accent); margin-bottom: 6px; }
.th-empty-t { font-size: var(--fz-lg); font-weight: 800; color: var(--fg); }
.th-empty-s { font-size: var(--fz-md); line-height: 1.6; }
.th-loaderr > .icon-svg { color: var(--danger); }
.th-loaderr .th-retry { margin-top: 10px; }

/* ═══ ٤. صف الرسالة والفقاعة ══════════════════════════════════════════ */
.th-row {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 12px; margin-top: 2px;
  content-visibility: auto; contain-intrinsic-size: auto 52px;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.th-row.g-first { margin-top: 8px; }
/* 1.9.6 — المحادثة تدخل: الصفوف المرسومة أولاً (آخرها، chat-thread.js · THREAD_FIRST) تُرسم في الإطار الأول
   نفسه — الشاشة تبدأ خارج المرأى فكان content-visibility يتركها مؤقّتة إلى إطار لاحق يقع أثناء الانزلاق. */
.th-entering .th-row { content-visibility: visible; }
.th-out { align-items: flex-end; }
.th-stack { position: relative; max-width: min(80%, 560px); display: flex; flex-direction: column; align-items: flex-start; }
.th-out .th-stack { align-items: flex-end; }

.th-bubble {
  position: relative; min-width: 58px; max-width: 100%;
  padding: 6px 10px 7px;
  border-radius: var(--r-lg);
  background: var(--bubble-in); color: var(--bubble-in-fg);
  font-size: var(--fz-base); line-height: 1.42;
  overflow-wrap: anywhere;
}
.th-out .th-bubble { background: var(--bubble-out); color: var(--bubble-out-fg); }
/* زوايا المجموعة: جهة المرسل أضيق بين الرسائل المتتالية، وصفر تحت الذيل */
.th-in  .th-bubble { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.th-out .th-bubble { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.th-in.g-first  .th-bubble { border-start-start-radius: 0; }
.th-out.g-first .th-bubble { border-start-end-radius: 0; }
.th-in.g-last   .th-bubble { border-end-start-radius: var(--r-lg); }
.th-out.g-last  .th-bubble { border-end-end-radius: var(--r-lg); }
/* الذيل: أول فقاعة في المجموعة، في جهة المرسل (يُعكس مع الاتجاه) */
.th-in.g-first .th-bubble::before, .th-out.g-first .th-bubble::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M8 0H1.6C.4 0-.2 1.4.6 2.3L8 12.6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M8 0H1.6C.4 0-.2 1.4.6 2.3L8 12.6z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.th-in.g-first  .th-bubble::before { inset-inline-start: -7.5px; }
.th-out.g-first .th-bubble::before { inset-inline-end: -7.5px; transform: scaleX(-1); }
[dir="rtl"] .th-in.g-first  .th-bubble::before { transform: scaleX(-1); }
[dir="rtl"] .th-out.g-first .th-bubble::before { transform: none; }

/* اسم المرسل (القروبات والقنوات): أول المجموعة فقط */
.th-sender {
  display: none; max-width: 100%;
  font-size: var(--fz-sm); font-weight: 700; line-height: 1.35; color: var(--qc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px;
}
.th-row.g-first .th-sender { display: block; }

/* النص والوقت: نسخة خفية من الوقت في آخر سطر تحجز مكانه، والحقيقية في أسفل الطرف */
.th-body { position: relative; }
.th-text { white-space: pre-wrap; }
.th-jumbo { font-size: 34px; line-height: 1.25; }
.th-ghost { visibility: hidden; margin-inline-start: 10px; }
.th-meta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fz-xs); line-height: 1; white-space: nowrap;
  color: var(--th-meta); font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
.th-out .th-meta { color: var(--th-meta-out); }
.th-body > .th-meta { position: absolute; inset-inline-end: 0; bottom: -1px; }
.th-ghost.th-meta { position: static; }
.th-meta .icon-svg { width: 16px; height: 16px; }
.th-m-pin .icon-svg { width: 12px; height: 12px; }
.th-m-ed { font-size: 11px; }
.th-tick { display: inline-flex; margin-inline-start: 1px; }
.th-tick-read { color: var(--tick); }
.th-tick-wait .icon-svg { width: 13px; height: 13px; }
.th-meta-row { display: flex; justify-content: flex-end; padding: 4px 2px 0; }
.th-media .th-meta-row { padding: 4px 6px 2px; }

/* الرسالة المحذوفة */
.th-body-del .th-text { font-style: italic; color: var(--th-meta); }
.th-out .th-body-del .th-text { color: var(--th-meta-out); }
.th-ban { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 5px; }

/* إشارة إلى الزميل (@اسم) والرسالة التي تذكرني */
.th-mention-chip { color: var(--accent); font-weight: 700; }
.th-mention-me .th-bubble { box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .th-mention-me .th-bubble { box-shadow: inset -3px 0 0 var(--accent); }
.th-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-all; unicode-bidi: isolate; }
.th-out .th-link { color: color-mix(in srgb, var(--accent) 78%, var(--bubble-out-fg)); }

/* الاقتباس (ردّ على رسالة) */
.th-quote {
  display: grid; width: 100%; min-width: 0; margin: 2px 0 5px; padding: 5px 10px 6px;
  border: 0; border-inline-start: 3px solid var(--qc); border-radius: 8px;
  background: var(--th-quote-in); color: inherit; text-align: start; cursor: pointer;
  transition: opacity var(--dur-1);
}
.th-out .th-quote { background: var(--th-quote-out); }
.th-quote:active { opacity: .7; }
.th-quote-n { font-size: var(--fz-sm); font-weight: 700; color: var(--qc); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-quote-t { font-size: var(--fz-sm); color: var(--fg-2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-out .th-quote-t { color: color-mix(in srgb, var(--bubble-out-fg) 72%, transparent); }
.th-quote-t .icon-svg { width: 15px; height: 15px; vertical-align: -3px; margin-inline-end: 4px; }
.th-quote-far { padding-block: 6px; }

/* الترجمة تحت النص */
.th-xlate { margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.th-xlate-k { display: flex; align-items: center; gap: 4px; font-size: var(--fz-xs); font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.th-xlate-k .icon-svg { width: 14px; height: 14px; }
.th-xlate-t { white-space: pre-wrap; }
.th-xlate-wait { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fz-sm); color: var(--th-meta); }
.th-xlate-wait .th-spin { width: 14px; height: 14px; }
.th-xlate-wait.err { color: var(--danger); }
.th-xlate-wait .icon-svg { width: 16px; height: 16px; }

/* التفاعلات تحت الفقاعة */
.th-rx { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: -5px; padding-inline: 8px; }
.th-rx-chip {
  display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 7px;
  border: 2px solid var(--wallpaper); border-radius: 13px;
  background: var(--bubble-in); color: var(--fg-2);
  font-size: 14px; line-height: 1;
  transition: transform var(--dur-1) var(--ease);
}
.th-rx-chip.mine { background: color-mix(in srgb, var(--accent) 18%, var(--bubble-in)); color: var(--accent); }
.th-rx-chip:active { transform: scale(.92); }
.th-rx-n { font-size: var(--fz-xs); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ═══ ٥. المرفقات ═════════════════════════════════════════════════════ */
.th-media { padding: 3px; }
.th-media .th-body { padding: 4px 7px 3px; }
.th-media .th-sender { padding: 3px 7px 2px; }
.th-media .th-quote { margin: 0 0 3px; }

/* صورة */
.th-img {
  position: relative; display: block; width: min(270px, 66vw); max-width: 100%; max-height: 360px;
  border-radius: 15px; overflow: hidden; background-color: var(--bg-3); cursor: pointer;
}
.th-img + .th-img, .th-img + .th-video, .th-video + .th-img { margin-top: 3px; }
.th-img img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.th-img.ld img { opacity: 1; }
.th-img-ph { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; color: color-mix(in srgb, var(--fg) 25%, transparent); }
.th-img.ld .th-img-ph { display: none; }
.th-img.th-img-err .th-img-ph { color: var(--fg-3); }
/* الوقت فوق الصورة على تدرّج داكن */
.th-has-ov::after {
  content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 46px; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.th-meta-ov { position: absolute; z-index: 3; inset-inline-end: 8px; bottom: 6px; color: #fff; }
.th-out .th-meta-ov { color: #fff; }
/* علامتا القراءة فوق الصورة: لون --tick مُفتَّح بالأبيض كي يُقرأ على التدرّج الداكن */
.th-meta-ov .th-tick-read { color: color-mix(in srgb, var(--tick) 50%, #fff); }

/* رسالة صوتية: زر تشغيل دائري + موجة + المدة */
.th-voice {
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 30px auto;
  column-gap: 10px; align-items: center; width: min(250px, 62vw); max-width: 100%; padding: 2px 0 0;
}
.th-voice-play {
  grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-fg); display: grid; place-items: center;
  transition: transform var(--dur-1) var(--ease);
}
.th-voice-play:active { transform: scale(.92); }
.th-voice-play .icon-svg { width: 20px; height: 20px; }
.th-voice-play .icon-svg svg { fill: currentColor; }
.th-voice.loading .th-voice-play .icon-svg { animation: th-breathe .9s ease-in-out infinite; }
.th-wave { position: relative; height: 28px; cursor: pointer; }
.th-wave-base, .th-wave-fill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.th-wave i { display: block; width: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 30%, transparent); }
.th-wave-fill i { background: var(--accent); }
/* التقدّم يبدأ من inline-start: يميناً في العربية */
.th-wave-fill { clip-path: inset(0 0 0 calc(100% - var(--p, 0%))); }
[dir="ltr"] .th-wave-fill { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.th-voice-foot { display: flex; align-items: center; gap: 6px; min-height: 16px; }
.th-voice-time { font-size: var(--fz-xs); color: var(--th-meta); font-variant-numeric: tabular-nums; }
.th-out .th-voice-time { color: var(--th-meta-out); }

/* فيديو — 1.10: كواتساب. إطارٌ من الفيديو غطاءً (يظهر بالشفافية حين يصل؛ قبله غطاء داكن هادئ بأيقونة)، زرّ
   تشغيل في الوسط، والمدّة (أو الحجم) في زاوية البداية، والوقت فوق التدرّج في زاوية النهاية. النسبة من أبعاد
   الفيديو إن عُرفت (aspect-ratio في البلاطة)، وإلا 16:10. اللمسة تفتح العارض؛ لا تشغيل داخل الفقاعة. */
.th-video {
  position: relative; display: block; width: min(270px, 66vw); max-width: 100%; max-height: 360px;
  border-radius: 15px; overflow: hidden; background: #0E141D; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.th-vposter { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.th-video.ld .th-vposter { opacity: 1; }
.th-vposter:not([src]) { visibility: hidden; }
.th-vph { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; color: rgba(255, 255, 255, .22); }
.th-video.ld .th-vph { display: none; }
.th-vplay {
  position: absolute; inset: 0; z-index: 4; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff; display: grid; place-items: center; pointer-events: none;
  transition: transform var(--dur-1) var(--ease);
}
.th-video:active .th-vplay { transform: scale(.92); }
.th-vplay .icon-svg { width: 24px; height: 24px; margin-inline-start: 3px; }
[dir="rtl"] .th-vplay .icon-svg { margin-inline-start: 0; margin-inline-end: 3px; }
.th-vplay .icon-svg svg { fill: currentColor; }
.th-vchip {
  position: absolute; z-index: 3; inset-inline-start: 8px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px; padding-block: 2px; padding-inline: 6px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fz-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.th-vchip .icon-svg { width: 14px; height: 14px; }
.th-video:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ملف */
.th-file {
  display: flex; align-items: center; gap: 10px; width: min(270px, 66vw); max-width: 100%; padding: 8px;
  border-radius: 12px; background: var(--th-quote-in); color: inherit; cursor: pointer;
  transition: opacity var(--dur-1);
}
.th-out .th-file { background: var(--th-quote-out); }
.th-file:active { opacity: .75; }
.th-file + .th-file { margin-top: 4px; }
.th-file-ic {
  width: 42px; height: 46px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
}
.th-file-ic b { font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.th-file-ic .icon-svg { width: 22px; height: 22px; }
.th-file-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
/* الاسم على سطرين (كواتساب) كي لا يضيع الامتداد في القص؛ والامتداد في السطر تحته أيضاً */
.th-file-name {
  font-size: var(--fz-md); font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.th-file-sub { font-size: var(--fz-xs); color: var(--th-meta); font-variant-numeric: tabular-nums; }
.th-out .th-file-sub { color: var(--th-meta-out); }
.th-file-dl { color: var(--th-meta); flex: none; display: grid; }
.th-file-dl .icon-svg { width: 20px; height: 20px; }
.th-file.loading .th-file-dl { animation: th-breathe .9s ease-in-out infinite; }

/* ═══ ٦. الحركة والإيماءات ═══════════════════════════════════════════ */
/* رسالة جديدة: من الأسفل 8px مع تلاشٍ */
.th-new { animation: th-rise var(--dur-2) var(--ease) backwards; }
.th-pending .th-bubble { opacity: .92; }
/* القفز إلى رسالة، والضغط المطوّل: لون خفيف فوق الصف */
.th-row::after {
  content: ""; position: absolute; inset: -1px 0; pointer-events: none;
  background: var(--accent-soft); opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.th-row.th-held::after { opacity: 1; }
/* 1.9.6 — الضغطة المطوّلة تُرى وهي تجري (كتيليجرام): الصنف يُضاف بعد 100ms من اللمس (اللمسة السريعة وبدء
   التمرير لا يغيّران شيئاً) ويكتمل اللون مع ظهور التحديد (chat-thread.js · _bindGestures: th-pressing). */
.th-row.th-pressing::after { opacity: .75; transition: opacity 280ms linear; }
.th-row.th-flash::after { animation: th-flash 1.5s var(--ease); }
/* أيقونة السحب للرد تظهر في جهة inline-start من الفقاعة */
.th-swipe-ic {
  position: absolute; top: 50%; inset-inline-start: -42px; z-index: 1;
  width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: var(--th-chip); color: var(--fg-2);
  display: grid; place-items: center; opacity: 0; transform: scale(.6);
}
.th-swipe-ic.on { color: var(--accent); }
.th-swipe-ic .icon-svg { width: 18px; height: 18px; }

/* «يكتب…»: فقاعة واردة بثلاث نقاط */
.th-typing { display: flex; padding: 0 12px; margin-top: 8px; animation: th-rise var(--dur-2) var(--ease) backwards; }
.th-typing .th-bubble { min-width: 0; padding: 12px 14px; }
.th-dots { display: flex; gap: 4px; align-items: center; height: 10px; }
.th-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); animation: th-dot 1.2s ease-in-out infinite; }
.th-dots i:nth-child(2) { animation-delay: .15s; }
.th-dots i:nth-child(3) { animation-delay: .3s; }

/* زر النزول إلى آخر الرسائل */
.th-fab {
  position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--bg-elev); color: var(--fg-2); box-shadow: var(--shadow-2);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(10px) scale(.7); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.th-fab.on { opacity: 1; transform: none; pointer-events: auto; }
.th-fab:active { transform: scale(.92); }
.th-fab .badge { position: absolute; top: -7px; inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .th-fab .badge { transform: translateX(50%); }

/* ═══ ٧. صندوق الكتابة ════════════════════════════════════════════════ */
.th-dock { position: relative; z-index: 4; flex: none; padding: 6px 8px calc(8px + var(--safe-b)); }
.th-dock-wait { height: 48px; }
.th-composer { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
.th-box {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--bubble-in); border-radius: 24px;
}
.th-inrow { position: relative; display: flex; align-items: flex-end; min-height: 48px; }
.th-input {
  flex: 1; min-width: 0; height: 48px; max-height: 136px; margin: 0;
  padding: 13px 0; padding-inline-start: 16px;
  border: 0; outline: 0; background: none; resize: none; overflow-y: hidden;
  font: inherit; font-size: var(--fz-base); line-height: 22px; color: var(--fg);
  scrollbar-width: none;
}
.th-input::placeholder { color: var(--fg-3); }
.th-input:focus-visible { outline: none; }
.th-cbtn {
  width: 46px; height: 48px; flex: none; border: 0; background: none; color: var(--fg-3);
  display: grid; place-items: center; border-radius: 50%;
  transition: color var(--dur-1), transform var(--dur-1) var(--ease);
}
.th-cbtn:active { color: var(--accent); transform: scale(.9); }
.th-cbtn .icon-svg { width: 23px; height: 23px; }

/* الزر الدائري: مايك حين يفرغ النص، وإرسال حين يُكتب — يتبادلان بالحجم والتلاشي */
.th-act { position: relative; width: 48px; height: 48px; flex: none; }
.th-send, .th-mic {
  position: absolute; inset: 0; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center;
  transition: transform 150ms var(--ease), opacity 150ms var(--ease);
}
.th-send .icon-svg, .th-mic .icon-svg { width: 23px; height: 23px; }
.th-send:active, .th-mic:active { background: var(--accent-press); }
.th-act[data-mode="mic"] .th-send, .th-act[data-mode="send"] .th-mic { opacity: 0; transform: scale(.4) rotate(-30deg); pointer-events: none; }
.th-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* أثناء التسجيل: يكبر المايك، وحلقة تنبض بمستوى الصوت */
.th-mic::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--accent); opacity: 0; transform: scale(1);
  transition: transform 90ms linear, opacity var(--dur-2);
}
.th-mic.th-recording { transform: scale(1.32); }
.th-mic.th-recording::after { opacity: .22; transform: scale(calc(1.15 + var(--lvl, 0) * .8)); }

/* شريط الرد / التعديل داخل الصندوق، فوق سطر الكتابة */
.th-strip {
  display: flex; align-items: center; gap: 8px; margin: 6px 6px 0; padding: 6px 2px 6px 0;
  padding-inline-start: 10px; border-radius: 18px 18px 10px 10px;
  background: var(--th-quote-in);
  animation: th-rise var(--dur-2) var(--ease) backwards;
}
.th-strip-ic { color: var(--accent); flex: none; display: grid; }
.th-strip-ic .icon-svg { width: 20px; height: 20px; }
.th-strip-body { flex: 1; min-width: 0; display: grid; }
.th-strip-body b { font-size: var(--fz-sm); font-weight: 700; color: var(--accent); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-strip-body span { font-size: var(--fz-sm); color: var(--fg-2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-strip .th-strip-x { width: 34px; height: 34px; }
.th-strip .th-strip-x .icon-svg { width: 18px; height: 18px; }

/* مرفقات تنتظر الإرسال */
.th-pend { display: flex; gap: 6px; overflow-x: auto; padding: 8px 8px 0; scrollbar-width: none; }
.th-pend::-webkit-scrollbar { display: none; }
.th-pend-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 220px; height: 34px;
  padding-inline: 10px 2px; border-radius: 17px; background: var(--bg-2); color: var(--fg-2);
  font-size: var(--fz-sm); animation: th-pop var(--dur-2) var(--ease-spring) backwards;
}
.th-pend-chip > .icon-svg { width: 17px; height: 17px; color: var(--accent); }
.th-pend-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.th-pend-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--fg-3); display: grid; place-items: center; flex: none; }
.th-pend-x .icon-svg { width: 16px; height: 16px; }

/* القناة للقراءة فقط */
.th-readonly {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 24px; background: var(--th-chip); color: var(--fg-2);
  font-size: var(--fz-md); font-weight: 600; text-align: center;
}
.th-readonly .icon-svg { width: 20px; height: 20px; color: var(--fg-3); }

/* اقتراح @الإشارة فوق الصندوق */
.th-mention {
  position: absolute; bottom: 100%; inset-inline: 8px; z-index: 5; margin-bottom: 4px;
  max-height: 260px; overflow-y: auto; padding: 6px;
  background: var(--bg-elev); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  animation: th-pop var(--dur-2) var(--ease-spring) backwards;
}
.th-mention-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 8px;
  border: 0; border-radius: 10px; background: none; color: var(--fg); text-align: start;
  font-size: var(--fz-md); font-weight: 600;
}
.th-mention-item.active, .th-mention-item:active { background: var(--bg-2); }
.th-mention-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-mention-slug { color: var(--fg-3); font-size: var(--fz-sm); font-weight: 500; }

/* ═══ ٨. مسجّل الصوت (ui/voice-recorder.js) ═══════════════════════════ */
.th-rec {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding-inline: 16px 10px;
  background: var(--bubble-in); border-radius: 24px;
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.th-rec.on { opacity: 1; }
.th-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; animation: th-rec-pulse 1s ease-in-out infinite; }
.th-rec-time { min-width: 40px; font-weight: 700; font-size: var(--fz-base); color: var(--fg); font-variant-numeric: tabular-nums; }
.th-rec-hint {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px;
  color: var(--fg-3); font-size: var(--fz-md); white-space: nowrap;
  transition: color var(--dur-1);
}
.th-rec-hint .icon-svg { width: 18px; height: 18px; animation: th-nudge 1.2s ease-in-out infinite; }
.th-rec.cancel .th-rec-hint { color: var(--danger); }

/* ═══ ٩. الأوراق (القائمة الطويلة، ⋮، الأعضاء، التوجيه، الجدولة) ═══════ */
.th-sheet .reaction-bar { margin-bottom: 10px; }
/* ثمانية تفاعلات لا تتسع بمقاس ui.css (44px) في ورقة عرضها 358px — طلب مشترك
   بتحجيم .reaction-bar في ui.css لثمانية؛ وحتى ذلك يبقى هذا المقاس هنا */
.th-sheet .reaction-bar button { width: 38px; height: 40px; font-size: 24px; position: relative; }
.th-sheet .reaction-bar button.th-on::after {
  content: ""; position: absolute; bottom: -2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--accent);
}
.th-peek {
  display: flex; align-items: center; gap: 6px; margin: 0 4px 6px; padding: 8px 12px; border-radius: 12px;
  background: var(--bg-2); color: var(--fg-2); font-size: var(--fz-md); line-height: 1.4;
}
.th-peek span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-peek .icon-svg { width: 18px; height: 18px; flex: none; }
.th-sheet-meta { margin: 8px 10px 0; font-size: var(--fz-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.th-sheet-head { display: flex; align-items: center; gap: 12px; margin: 2px 4px 12px; }
.th-sheet-head-t { min-width: 0; display: grid; }
.th-sheet-head-t b { font-size: var(--fz-lg); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-sheet-head-t span { font-size: var(--fz-sm); color: var(--fg-3); }
.th-sheet-list { margin-inline: -16px; }
.th-sheet-empty { padding: 20px 16px; text-align: center; color: var(--fg-3); font-size: var(--fz-md); }
.th-pin-lead { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.th-pin-lead .icon-svg { width: 18px; height: 18px; }
.th-count { font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; margin-inline-start: 4px; }
.th-sheet .sheet-actions.th-two { grid-template-columns: 1fr 2fr; }
.th-sheet-search { margin-bottom: 8px; }

/* معلومات القروب / القناة */
.th-room-head { display: grid; justify-items: center; gap: 6px; padding: 4px 0 14px; text-align: center; }
.th-room-name { font-size: var(--fz-xl); font-weight: 800; line-height: 1.3; }
.th-room-sub { font-size: var(--fz-md); color: var(--fg-3); }
.th-room-desc { margin: 0 4px 14px; font-size: var(--fz-md); color: var(--fg-2); line-height: 1.6; text-align: center; white-space: pre-wrap; }
.th-sec { padding: 16px 4px 6px; font-size: var(--fz-sm); font-weight: 800; color: var(--fg-3); }
/* 1.3 — الأعضاء يُلمسون (ملفهم الشخصي): سطر يقول ذلك، و@اسم المستخدم مكان البريد */
.th-sec-hint { font-weight: 500; }
.th-mem-handle { color: var(--accent); font-weight: 700; }
.th-members { max-height: 42vh; overflow-y: auto; margin-inline: -16px; }
.th-mem-tags { display: flex; gap: 4px; flex: none; }
.th-mem-rm { color: var(--danger); width: 36px; height: 36px; }
.th-mem-rm .icon-svg { width: 18px; height: 18px; }
.th-leave { margin-top: 10px; }

/* اختيار الأعضاء: دائرة اختيار */
.th-pick-list { max-height: 46vh; overflow-y: auto; margin-inline: -16px; }
.th-pick { cursor: pointer; }
.th-check {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fg-3); background: none;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.th-check:checked { background: var(--accent); border-color: var(--accent); }
.th-check:checked::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg);
}

/* ═══ ١٠. عارض الصور والفيديو ═══════════════════════════════════════════ */
.th-lb {
  position: fixed; inset: 0; z-index: 75;
  display: flex; flex-direction: column; color: #fff;
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.th-lb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; opacity: var(--th-lb-a, 1); }
.th-lb.open { opacity: 1; }
.th-lb { touch-action: none; }
.th-lb-top {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 6px;
  padding: calc(var(--safe-t) + 6px) 8px 6px;
  transition: opacity var(--dur-2) var(--ease);
}
.th-lb-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; flex: none; }
.th-lb-btn:active { background: rgba(255, 255, 255, .22); }
.th-lb-name { flex: 1; min-width: 0; font-size: var(--fz-md); font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; }
/* 1.10 — المرسل وتحته الوقت («اليوم · 10:42 م»)، والصورة المكبّرة (قرصة، لمستان، عجلة) */
.th-lb-name { display: flex; flex-direction: column; line-height: 1.3; }
.lbx-t, .lbx-sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; }
.lbx-sub { font-size: var(--fz-sm); font-weight: 500; opacity: .8; }
.lbx-sub[hidden] { display: none; }
.th-lb.lbx-zoomed .th-lb-img { will-change: transform; cursor: grab; }
.th-lb-img.lbx-dim { opacity: .45; }
.lbx-pct { position: absolute; margin-top: 64px; font-size: var(--fz-sm); font-weight: 700; color: rgba(255, 255, 255, .85); }
.lbx-pct[hidden] { display: none; }
.th-lb-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0 4px; }
.th-lb-img {
  max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none;
  transform: scale(.9); transition: transform var(--dur-3) var(--ease-spring);
}
.th-lb.open .th-lb-img { transform: none; }
.th-lb-bar {
  position: relative; z-index: 2; flex: none; display: flex; justify-content: center; gap: 10px;
  padding: 10px 16px calc(14px + var(--safe-b));
  transition: opacity var(--dur-2) var(--ease);
}
.th-lb-act {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 0; border-radius: 22px; background: rgba(255, 255, 255, .14); color: #fff;
  font-size: var(--fz-md); font-weight: 700;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1);
}
.th-lb-act:active { transform: scale(.96); background: rgba(255, 255, 255, .24); }
.th-lb-act .icon-svg { width: 20px; height: 20px; }
.th-lb.bare .th-lb-top, .th-lb.bare .th-lb-bar { opacity: 0; pointer-events: none; }
/* 1.4 — صفّ أيقونات واحد (لا أزرار نصية تلتفّ فوق الصورة)، و⋮ قائمة صغيرة فوق الشريط */
.th-lb-ib {
  width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1);
}
.th-lb-ib:active { transform: scale(.94); background: rgba(255, 255, 255, .26); }
.th-lb-ib .icon-svg { width: 22px; height: 22px; }
.th-lb-ib[hidden] { display: none; }
.lbx-menu {
  position: absolute; z-index: 3; inset-inline-end: 12px; bottom: calc(var(--safe-b) + 78px);
  min-width: 210px; max-width: calc(100% - 24px); padding: 6px; border-radius: 14px;
  background: rgba(34, 34, 38, .97); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transform-origin: bottom; animation: lbx-menu-in var(--dur-2) var(--ease);
}
.lbx-menu[hidden] { display: none; }
.lbx-menu button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 14px;
  border: 0; border-radius: 10px; background: none; color: #fff; text-align: start;
  font-size: var(--fz-md); font-weight: 600;
}
.lbx-menu button:active, .lbx-menu button:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.lbx-menu .icon-svg { width: 20px; height: 20px; opacity: .9; }
.th-lb.bare .lbx-menu { display: none; }
@keyframes lbx-menu-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lbx-menu { animation: none; } }
.reduce-motion .lbx-menu { animation: none; }

/* ═══ ١١. أدوات وحركات الشاشة ═════════════════════════════════════════ */
.th-spin {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--fg-3); border-top-color: transparent; animation: spin .8s linear infinite;
}
@keyframes th-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes th-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes th-drop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes th-flash { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes th-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes th-breathe { 50% { opacity: .35; } }
@keyframes th-rec-pulse { 50% { opacity: .25; transform: scale(.75); } }
@keyframes th-nudge { 50% { transform: translateX(4px); } }
[dir="ltr"] .th-rec-hint .icon-svg { animation-name: th-nudge-ltr; }
@keyframes th-nudge-ltr { 50% { transform: translateX(-4px); } }

/* ═══ ١٢. الأساسيات (1.4): التحديد، «مُعاد توجيهها»، المحفوظة، البحث ═════
   chat-thread.js و screens/thread-select.js و screens/thread-search.js. */

/* وضع التحديد: الصفّ المحدّد بغطاء أوضح من --accent-soft (13% لا يُرى على الخلفية الفاتحة في تحديد
   طويل) وحدّ بلون التمييز عند بداية السطر، والرأس تحت .selbar */
.th-row.th-sel::after {
  opacity: 1; background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-inline-start: 3px solid var(--accent);
}
.th-head > .selbar { padding-top: var(--safe-t); }   /* كـ #app-bar: المحتوى تحت شريط الحالة */
/* 1.9.6 — لا قواعد مؤشّر تحت .th-selecting: الصنف على الجذر كان يُبطل أنماط كل صفّ في المحادثة
   عند كل دخول إلى التحديد وخروج منه (لمؤشّر لا يُرى على الهاتف)، والصفّ والاقتباس أزرار أصلاً. */
/* شريط التفاعلات فوق الفقاعة المحددة الوحيدة: الغلاف يُوضع بـ transform، والشريط ينبثق */
.th-rxwrap {
  position: absolute; top: 0; left: 0; z-index: 5;
  transition: opacity var(--dur-1) var(--ease);
  pointer-events: none;                      /* الفراغ حول الشريط لا يأخذ اللمس */
}
.th-rxwrap .th-rxbar { pointer-events: auto; }
.th-rxwrap.th-rx-off { opacity: 0; pointer-events: none; }
.th-rxbar {
  margin: 0; padding: 6px; gap: 2px; background: var(--bg-elev);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--sep);   /* الحدّ يفصله عن الخلفية في الداكن */
  animation: th-pop 140ms var(--ease) backwards;      /* 1.9.6 — كان 200ms بنابض: القائمة تُقرأ أسرع */
}
.th-rxbar button {
  flex: none; position: relative; width: clamp(32px, calc((100vw - 48px) / 8), 42px); height: 42px;
  font-size: clamp(21px, 6vw, 25px);
}
.th-rxbar button.th-on { background: var(--accent-soft); }

/* «مُعاد توجيهها» — أول سطر في الفقاعة، فوق الاقتباس والصورة */
.th-fwd {
  display: flex; align-items: center; gap: 4px; max-width: 100%; margin-bottom: 2px;
  font-size: var(--fz-sm); line-height: 1.35; color: var(--th-meta); font-style: italic;
}
.th-out .th-fwd { color: var(--th-meta-out); }
.th-fwd > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-fwd-ic { width: 15px; height: 15px; flex: none; }
.th-media > .th-fwd { padding: 3px 7px 2px; margin-bottom: 0; }
/* المحفوظة: «من سارة · قروب التسويق ›» — زرّ يفتح الأصل عند رسالته */
.th-fwd.th-fwd-src {
  width: 100%; min-width: 0; margin: 1px 0 5px; padding: 5px 8px 6px; border: 0; border-radius: 8px;
  border-inline-start: 3px solid var(--qc); background: var(--th-quote-in); color: inherit;
  font: inherit; font-size: var(--fz-sm); font-style: normal; text-align: start; cursor: pointer;
  transition: opacity var(--dur-1);
}
.th-out .th-fwd.th-fwd-src { background: var(--th-quote-out); }
.th-fwd-src:active { opacity: .7; }
.th-media > .th-fwd.th-fwd-src { margin: 0 0 3px; padding: 5px 8px 6px; }
.th-fwd-src .th-fwd-ic { color: var(--qc); }
.th-fwd-who { flex: 0 1 auto; font-weight: 700; color: var(--qc); }
.th-fwd-where { flex: 0 1 auto; color: var(--th-meta); }
.th-out .th-fwd-where { color: var(--th-meta-out); }
.th-fwd-chev { width: 16px; height: 16px; flex: none; margin-inline-start: auto; color: var(--th-meta); }
.th-out .th-fwd-chev { color: var(--th-meta-out); }

/* الرسائل المحفوظة: شارة الإشارة المرجعية مكان الصورة، وبطاقة الفراغ */
.th-saved-av {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
}
.th-saved-av .icon-svg { width: 19px; height: 19px; }
.th-saved-av-md { width: 48px; height: 48px; }
.th-saved-av-md .icon-svg { width: 24px; height: 24px; }
.th-saved-ill {
  width: 68px; height: 68px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.th-saved-ill .icon-svg { width: 32px; height: 32px; }
.th-empty-saved { max-width: 300px; }

/* البحث: حقل في الرأس بزرّ مسح، وشريط تنقّل مكان صندوق الكتابة (يُخفى ولا يُهدم) */
.th-search-x { flex: none; color: var(--fg-2); }
.th-search-x .icon-svg { width: 20px; height: 20px; }
.th-dock.th-searching { background: var(--bar-bg); border-top: 1px solid var(--sep); }
.th-dock.th-searching > :not(.th-nav) { display: none !important; }
.th-dock.th-searching.th-nav-off > .th-nav { display: none; }
.th-nav { display: flex; align-items: center; gap: 2px; min-height: 48px; animation: th-fade var(--dur-1) var(--ease) backwards; }
.th-nav-st {
  flex: 1; min-width: 0; height: 44px; padding: 0 8px; border: 0; border-radius: 12px; background: none;
  display: flex; align-items: center; color: var(--fg-2); font: inherit; font-size: var(--fz-md); font-weight: 700;
  text-align: start; font-variant-numeric: tabular-nums;
}
.th-nav-st.th-nav-err { color: var(--danger); cursor: pointer; }
.th-nav-st.th-nav-err:active { background: var(--bg-2); }
.th-nav-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.th-nav-t > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-nav-t .th-spin { width: 16px; height: 16px; }
.th-nav-b { flex: none; color: var(--fg-2); transition: opacity var(--dur-1), background-color var(--dur-1); }
.th-nav-b:disabled { opacity: .32; }
.th-nav-b.on { color: var(--accent); background: var(--accent-soft); }
/* «عرض كقائمة»: النتائج فوق مساحة الرسائل */
.th-sview {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); padding-block: 4px;
  animation: th-fade var(--dur-2) var(--ease) backwards;
}
.th-sres-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.th-sres-who { font-size: var(--fz-sm); font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-sview .th-sres-body { color: var(--fg-2); }
.th-sres.on { background: var(--accent-soft); }
/* ما طابق البحث داخل الفقاعة وفي القائمة (كـ mark.hl في ui.css: يُقرأ فوق الفقاعتين) */
mark.th-hl {
  background: color-mix(in srgb, var(--warning) 38%, transparent); color: inherit;
  border-radius: 3px; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* «معلومات الرسالة» */
.th-info-list .item { min-height: 48px; }
.th-info-list .item-lead .icon-svg { width: 20px; height: 20px; color: var(--fg-3); }
.th-info-list .item-meta { font-variant-numeric: tabular-nums; }
.th-room-links { margin-bottom: 12px; }

/* ═══ ١٣. الرسائل الصوتية (1.4) ════════════════════════════════════════
   ui/voice-player.js (الفقاعة، السرعة، «لم تُسمع»، المشغّل المصغّر) · ui/voice-wave.js (الأعمدة)
   · ui/voice-recorder.js (القفل، الصفّ المقفل، المعاينة). الحركة transform وopacity وحدهما. */

/* القدم: المدة ونقطة «لم تُسمع» أولاً، ثم شارة السرعة والوقت في الطرف */
.th-voice-foot > .th-meta { margin-inline-start: auto; }
.th-voice-speed:not([hidden]) ~ .th-meta { margin-inline-start: 0; }
.th-vdot {
  width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.th-vdot.off { opacity: 0; transform: scale(.4); }
/* شارة السرعة 1× · 1.5× · 2× — تظهر أثناء التشغيل وفي منتصف الرسالة الموقوفة */
.th-voice-speed {
  position: relative; flex: none; margin: 0;
  height: 22px; min-width: 36px; padding: 0 7px; border: 0; border-radius: 11px;
  background: color-mix(in srgb, currentColor 12%, transparent); color: inherit;   /* يُرى فوق الفقاعتين وفي السمتين */
  font: inherit; font-size: var(--fz-xs); font-weight: 700; line-height: 22px; text-align: center;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
  transition: transform var(--dur-1) var(--ease);
}
/* الشارة dir=ltr (فتُقرأ «1.5×» لا «×1.5»)، فبدايتها هي اليسار أياً كان اتجاه الصفحة: الهامش
   الذي يدفعها إلى الطرف يُكتب بجهة الصفحة */
[dir="rtl"] .th-voice-foot > .th-voice-speed { margin-right: auto; }
[dir="ltr"] .th-voice-foot > .th-voice-speed { margin-left: auto; }
.th-voice-speed::before { content: ""; position: absolute; inset: -11px -4px; }   /* مساحة لمس 44px */
.th-voice-speed[hidden] { display: none; }
.th-voice-speed:active { transform: scale(.92); }
/* الأعمدة الحقيقية تحلّ محلّ المسطّحة بتلاشٍ */
.th-wave-in .th-wave-base, .th-wave-in .th-wave-fill { animation: th-fade var(--dur-2) var(--ease) backwards; }
/* الملف غير متاح على هذا الخادم (404 محفوظ): زرّ باهت وأعمدة مسطّحة */
.th-voice-missing .th-voice-play { background: var(--bg-3); color: var(--fg-3); }
.th-voice-missing .th-wave { opacity: .55; cursor: default; }

/* «يسجّل صوتاً…»: مايك قبل النقاط في فقاعة الكتابة */
.th-typing-mic { display: none; width: 16px; height: 16px; color: var(--accent); margin-inline-end: 6px; }
.th-typing-rec .th-bubble { display: flex; align-items: center; }
.th-typing-rec .th-typing-mic { display: inline-flex; }

/* المشغّل المصغّر: 40px فوق الرسائل (مطلق، لا يزيح القائمة)، يدخل من الأعلى */
.th-mini {
  position: absolute; top: 0; inset-inline: 0; z-index: 4; height: 40px;
  display: flex; align-items: center; gap: 2px; padding-inline: 2px 0;
  background: var(--bar-bg); border-bottom: 1px solid var(--sep);
  opacity: 0; transform: translateY(-100%); pointer-events: none;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.th-mini.on { opacity: 1; transform: none; pointer-events: auto; }
.th-mini-play, .th-mini-x {
  width: 40px; height: 40px; flex: none; border: 0; background: none; display: grid; place-items: center;
  color: var(--accent); transition: transform var(--dur-1) var(--ease);
}
.th-mini-x { width: 44px; color: var(--fg-3); }
.th-mini-play:active, .th-mini-x:active { transform: scale(.9); }
.th-mini-play .icon-svg, .th-mini-x .icon-svg { width: 20px; height: 20px; }
.th-mini-play .icon-svg svg { fill: currentColor; }
.th-mini-text {
  flex: 1; min-width: 0; height: 40px; padding: 0 4px; border: 0; background: none; color: var(--fg);
  display: flex; align-items: center; font: inherit; font-size: var(--fz-sm); text-align: start;
  white-space: nowrap; overflow: hidden;
}
.th-mini-who { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.th-mini-sep, .th-mini-t { flex: none; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.th-mini-sep { white-space: pre; }
.th-mini-t { unicode-bidi: isolate; }
.th-mini .th-mini-rate { margin-inline: 4px; color: var(--fg-2); }
.th-mini-bar {
  position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
}
[dir="ltr"] .th-mini-bar { transform-origin: left; }
/* شريحة اليوم العائمة تنزل تحت المشغّل ما دام ظاهراً */
.th-main.th-mini-on .th-day { top: 46px; }

/* كبسولة القفل فوق المايك (40×88): تصعد مع الإصبع، ونبضة القفل */
.th-lock {
  position: absolute; bottom: calc(100% + 22px); left: 50%; z-index: 6;
  width: 40px; height: 88px; margin-left: -20px; pointer-events: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.th-lock.on { opacity: 1; transform: none; }
.th-lock-cap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 11px 0 9px; border-radius: 20px; background: var(--bg-elev); color: var(--fg-2); box-shadow: var(--shadow-2);
  transform: translateY(calc(var(--lp, 0) * -26px));
}
.th-lock-ic { display: grid; }
.th-lock-ic .icon-svg { width: 20px; height: 20px; }
.th-lock-up { display: grid; opacity: calc(1 - var(--lp, 0)); }
.th-lock-up .icon-svg { width: 18px; height: 18px; animation: th-lock-nudge 1.2s ease-in-out infinite; }
.th-lock.locked .th-lock-ic { color: var(--accent); animation: th-lock-pulse 120ms var(--ease); }
.th-lock-tip {
  position: absolute; top: 50%; inset-inline-end: calc(100% + 8px); transform: translateY(-50%);
  padding: 6px 10px; border-radius: 12px; background: var(--bg-elev); box-shadow: var(--shadow-2);
  font-size: var(--fz-sm); font-weight: 700; color: var(--fg-2); white-space: nowrap;
}
@keyframes th-lock-pulse { 50% { transform: scale(1.25); } }
@keyframes th-lock-nudge { 50% { transform: translateY(-3px); } }

/* الصفّ المقفل والمعاينة داخل صندوق الكتابة (يتبادلان بتلاشٍ متقاطع) */
.th-rec[data-mode="locked"], .th-rec[data-mode="preview"] { gap: 4px; padding-inline: 2px 6px; }
.th-rec-swap > * { animation: th-fade var(--dur-2) var(--ease) backwards; }
.th-rec-btn {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--fg-3);
  display: grid; place-items: center; transition: color var(--dur-1), transform var(--dur-1) var(--ease);
}
.th-rec-btn:active { transform: scale(.9); }
.th-rec-btn .icon-svg { width: 22px; height: 22px; }
.th-rec-trash:active { color: var(--danger); }
.th-rec-pause, .th-rec-resume { color: var(--danger); }
.th-rec[data-mode="locked"] .th-rec-time { min-width: 36px; }
.th-rec-live { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.th-rec-live i {
  width: 3px; height: 100%; flex: none; border-radius: 2px; background: color-mix(in srgb, var(--fg) 38%, transparent);
  transform: scaleY(.12); transition: transform 90ms linear;
}
.th-rec-pv {
  flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px;
  padding-inline: 3px 8px; border-radius: 20px; background: var(--th-quote-in);
}
.th-rec-play {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); display: grid; place-items: center;
  transition: transform var(--dur-1) var(--ease);
}
.th-rec-play:active { transform: scale(.92); }
.th-rec-play .icon-svg { width: 18px; height: 18px; }
.th-rec-play .icon-svg svg { fill: currentColor; }
.th-rec-wave { flex: 1; min-width: 0; height: 26px; color: var(--fg); }
.th-rec-pv .th-rec-time { min-width: 0; font-size: var(--fz-sm); }

/* ═══ ١٤. ردّ على حالة (1.5، القدرة statuses — chat-thread.js · _statusRefHtml) ═══
   أول كتلة في الفقاعة كالاقتباس (§٤): شريط 3px بلون صاحب الحالة (--qc: الأكسنت لحالتي)، السطر
   الأول «سارة · حالة» بحلقة صغيرة، والثاني المقتطف أو «صورة»/«فيديو»، وفي طرفها بطاقة 36×48
   (.st-mini في statuses.css). لقطة تبقى بعد انتهاء الحالة؛ بعدها تبهت البطاقة وحدها. */
.th-sref {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; margin: 2px 0 5px;
  padding-block: 5px; padding-inline: 10px 6px;
  border: 0; border-inline-start: 3px solid var(--qc); border-radius: 8px;
  background: var(--th-quote-in); color: inherit; text-align: start; cursor: pointer;
  transition: opacity var(--dur-1);
}
.th-out .th-sref { background: var(--th-quote-out); }
.th-sref:active { opacity: .7; }
.th-media .th-sref { margin: 0 0 3px; }
.th-sref-b { flex: 1; min-width: 0; display: grid; }
.th-sref-n {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: var(--fz-sm); font-weight: 700; color: var(--qc); line-height: 1.35;
}
.th-sref-n > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-sref-ring { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 1.5px solid var(--qc); }
.th-sref-t { font-size: var(--fz-sm); color: var(--fg-2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }
.th-out .th-sref-t { color: color-mix(in srgb, var(--bubble-out-fg) 72%, transparent); }
.th-sref-t .icon-svg { width: 15px; height: 15px; vertical-align: -3px; margin-inline-end: 4px; }
.th-sref-mini { flex: none; display: grid; }
.th-sref-gone .th-sref-mini { opacity: .5; }

/* ═══ ١٥. القنوات العامة (1.6، القدرة public_channels — chat-thread.js · _metaHtml) ═══
   عدّاد المشاهدات في سطر الوقت قبل الوقت: عين صغيرة ورقم لاتيني («1.2K») بلون الوقت. المعاينة
   (.th-preview) وشريطا «انضمام» والمشترك في channels.css (.ch-joinbar · .ch-subbar). */
.th-m-views { display: inline-flex; align-items: center; gap: 2px; margin-inline-end: 3px; }
.th-meta .th-m-views .icon-svg { width: 14px; height: 14px; }
.th-m-vn { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
/* «حظر» (القدرة blocks — chat-thread.js · _mountDmDock): حظرتُ الطرف الآخر — شريط بشكل «للقراءة فقط» مكان
   صندوق الكتابة: «حظرت هذا الشخص» و«إلغاء الحظر» في آخره. والرأس بلا «اتصال» (ولا حضور — _paintHead). */
.th-blockbar {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 16px 6px;
  border-radius: 24px; background: var(--th-chip); color: var(--fg-2);
  font-size: var(--fz-md); font-weight: 600;
  animation: th-pop var(--dur-2) var(--ease-spring) backwards;
}
.th-blockbar-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.th-blockbar-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-blockbar-t .icon-svg { width: 20px; height: 20px; color: var(--danger); flex: none; }
.th-unblock {
  flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: none;
  color: var(--accent); font: inherit; font-weight: 700; transition: background-color var(--dur-1);
}
.th-unblock:active:not(:disabled) { background: var(--bg-2); }
.th-unblock:disabled { color: var(--fg-3); }
.th.th-blocked #btn-call { display: none !important; }
body.reduce-motion .th-blockbar { animation: none; }

/* ═══ ١٦. طلبات المراسلة (1.14، القدرة message_requests — chat-thread.js · _mountRequestBar · _holdMedia) ═══
   مراسلة ممن لا أعرفه: بطاقة مكان صندوق الكتابة — «سارة يريد مراسلتك» وسطر يقول ما يعنيه ذلك (لا «قُرئت» ولا
   إشعارات حتى القبول)، ثم «قبول» (بلون التطبيق) · «تجاهل» · «حظر» و«إبلاغ» بالأحمر. صوره وفيديوهاته لا تُجلب حتى
   تُلمس: البلاطة رمادية بحبّة «المس للعرض». والرأس بلا حضور ولا «اتصال» (سطره «طلب مراسلة»). */
.th-reqbar {
  display: grid; gap: 6px; padding: 12px 14px 8px; border-radius: 20px;
  background: var(--th-chip); color: var(--fg-2); font-size: var(--fz-sm);
  animation: th-pop var(--dur-2) var(--ease-spring) backwards;
}
.th-reqbar-t { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: var(--fz-md); font-weight: 700; min-width: 0; }
.th-reqbar-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-reqbar-t .icon-svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.th-reqbar-sub { line-height: 1.55; color: var(--fg-2); }
.th-reqbar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
.th-reqbar-acts .th-req-btn { min-height: 38px; padding-inline: 14px; border-radius: 19px; }
.th-reqbar-acts .th-req-btn[data-req="accept"] { padding-inline: 18px; }
.th-reqbar-acts .th-req-btn .icon-svg { width: 18px; height: 18px; }
.th-reqbar-acts .th-req-btn.danger { color: var(--danger); }
.th-reqbar-acts .th-req-btn:disabled { opacity: .55; }
.th-dock-req .th-reqbar + #th-nav { margin-top: 6px; }
body.reduce-motion .th-reqbar { animation: none; }

.th-img.th-held, .th-video.th-held { cursor: pointer; }
.th-held-tag {
  position: absolute; z-index: 3; inset: 0; margin: auto; width: max-content; height: 34px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 17px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fz-sm); font-weight: 700; pointer-events: none;
}
.th-held-tag .icon-svg { width: 16px; height: 16px; }
.th-video.th-held .th-vplay, .th-img.th-held .th-img-ph { display: none; }
.th.th-req #btn-call { display: none !important; }