@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('fonts/ibm-plex-sans-arabic-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('fonts/ibm-plex-sans-arabic-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* أرضيات داكنة */
  --ink-0: #120F0D; --ink-1: #1B1713; --ink-2: #251F19; --ink-3: #2E271F;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .18);
  /* نصوص على الداكن. و‎--ash-faint‎ رُفع من ‎#8B7E6C‎: كان يعطي 4.11 على
     ‎--ink-2‎ و4.50 على ‎--ink-1‎، وهو يُستعمل عند ١٠–١١ بكسل حيث AA يطلب 4.5. */
  --ash: #EFE7DB; --ash-dim: #A99C89; --ash-faint: #9A8D7A;
  /* لون الإشارة — الإرسال والاتصال الحيّ ولا شيء غيرهما */
  --signal: #FF7A34; --signal-soft: #FFB27A; --signal-glow: rgba(255, 122, 52, .38);
  /* النصّ فوق --signal. النافذة داكنة دائماً فلا ينقلب هنا، لكنه الرمز نفسه
     في الـ PWA حيث الانقلاب كان يُسقط التباين إلى 3.27:1. */
  --on-signal: #120F0D;
  --success: #5FB88C; --danger: #E2564A; --link: #8FBFEA;
  /* شارة الخطة — نفس قيمتَي app.css. ولا تُشتقّ من --signal: البرتقالي
     محجوزٌ للإرسال والاتصال الحيّ، وشارةٌ ساكنة تأخذه تسرقه منهما. */
  --pro: #F0C070; --pro-ink: #241A08;
  --r: 14px;
  --f-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  /* رموز الحركة — بأسمائها وقيمها كما في ‎store.html‎ حرفاً بحرف، فالهوية
     واحدة على الأطراف الثلاثة. وليست ألواناً فلا تُعاد في اللوحة الفاتحة. */
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 420ms;
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-soft:   cubic-bezier(.4, 0, .2, 1);
  --lift: inset 0 1px 0 rgba(255,255,255,.045);
  --tint-bg: rgba(255, 122, 52, .10);
  --tint-border: rgba(255, 122, 52, .28);
  --bub-out: rgba(255, 122, 52, .10);
  --bub-out-border: rgba(255, 122, 52, .26);
}

.icon {
  width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body {
  width: 360px;
  position: relative; /* مرساة شريط التأكيد الطافي */
  /* انتقال الشاشات يزيح الشاشة ١٦ بكسلاً جانباً — بلا القصّ يومض شريط تمرير أفقيّ */
  overflow-x: clip;
  font-family: var(--f-body);
  background: var(--ink-0);
  color: var(--ash);
  line-height: 1.6;
}

.view { padding: 16px; }
.hidden { display: none !important; }

/* ===== انتقال الشاشات (`show` في ui.js) ===== */
/* عند التنقّل وحده لا عند فتح النافذة. الإعدادات واللوح من طرف أزرارهما في
   الرأس (آخر السطر: يساراً بالعربية ويميناً بالإنجليزية)، والرجوع من الطرف
   الآخر، والمحادثة بعد الربط صعوداً. ومزاحةٌ قصيرة — النافذة ٣٦٠ بكسلاً. */
:root { --view-end: -1; }
:root[dir="ltr"] { --view-end: 1; }
.view.in-end { animation: viewInEnd var(--t-2) var(--e-out); }
.view.in-start { animation: viewInStart var(--t-2) var(--e-out); }
.view.in-rise { animation: viewInRise var(--t-3) var(--e-out); }
.view.in-fade { animation: viewInFade var(--t-2) var(--e-out); }
@keyframes viewInEnd { from { opacity: 0; transform: translateX(calc(var(--view-end) * 16px)); } }
@keyframes viewInStart { from { opacity: 0; transform: translateX(calc(var(--view-end) * -16px)); } }
@keyframes viewInRise { from { opacity: 0; transform: translateY(10px); } }
@keyframes viewInFade { from { opacity: 0; } }

/* ===== شاشة الدخول بالباركود ===== */
/* ارتفاعٌ ثابت بسقف نافذة كروم: البطاقة تتمرّر، و«أو» ومدخل رمز الجوال مثبَّتان
   أسفلها — فالطريق الافتراضي فوق الطيّة بلا أن يُخفى شيءٌ من البطاقة خلف ضغطة.
   و`text-align: center` باقٍ: هو الذي يوسّط `.qr-wrap` السطريّة. */
#pairView {
  height: 600px; display: flex; flex-direction: column;
  text-align: center; padding: 12px 16px 10px;
}
/* ‎.hidden‎ لازم تغلب ‎display:flex‎ — نفس صيغة ‎#settingsView.hidden‎ */
#pairView.hidden { display: none !important; }
.pair-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 28px; }
/* الحافّة السفلى تقول «ما تحتي يُمرَّر»: قناعُ شفافيةٍ بلونٍ واحد لا تدرّجٌ لوني (كقناع هيكل
   الصورة) — بلاه تُقصّ البطاقة في منتصف سطر التلميحات كأنها عطل، وكرومُ بلا رأسٍ وأجهزةُ اللمس
   لا تُظهر شريط تمرير. والحشوة السفلى بقدر القناع فلا يبهت آخرُ سطرٍ وقد بلغتَ القاع. */
.pair-scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.pair-pinned { flex: none; }
.pair-brand { margin-bottom: 6px; position: relative; } /* مرساة الحبّة في الزاوية */
.pair-logo {
  margin: 0 auto 4px;
  background: var(--tint-bg); border-color: var(--tint-border); color: var(--signal);
}
.pair-tagline { font-size: 12.5px; color: var(--ash-dim); margin-top: 2px; line-height: 1.3; }
#pairView h1 {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--signal-soft);
  direction: ltr;
  text-transform: uppercase;
  line-height: 1.2;
}
.lead { color: var(--ash-dim); font-size: 13px; margin: 0 0 6px; }

.entry-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.entry-title { font-size: 13.5px; font-weight: 700; text-align: start; }

.pair-or {
  display: flex; align-items: center; gap: 10px; margin: 6px 0;
  font-size: 11.5px; color: var(--ash-faint);
}
.pair-or::before, .pair-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.qr-card {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 18px; padding: 10px 12px 12px; box-shadow: var(--lift);
}
.qr-hints { margin-top: 8px; font-size: 11.5px; line-height: 1.6; }
.qr-hint {
  display: flex; align-items: center; gap: 6px; margin: 0;
}
.qr-hint + .qr-hint { margin-top: 4px; }
.qr-hint.ok { color: var(--success); }
.qr-hint.dim { color: var(--ash-faint); }
.qr-hint .icon { width: 15px; height: 15px; stroke-width: 2.2; flex: none; }

.pair-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px; font-size: 12px; color: var(--ash-faint);
}
.pair-foot .link-btn { margin-top: 0; }
.pair-settings-link {
  display: inline-flex; align-items: center; gap: 6px;
}

.qr-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  /* خلفية بيضاء دائماً: القارئ يحتاج تبايناً عالياً، والنافذة داكنة */
  background: #fff;
  border-radius: 12px;
  padding: 10px;
}
/* بلا مقاس مفروض: اللوحة تُرسَم ٤ بكسل للوحدة، فعرضها بمقاسها الطبيعي يبقيها
   ١:١ حادّة. وفرضُ عرض ثابت كان يصغّرها بنسبة كسرية فتذوب حواف الوحدات —
   و`pixelated` تخفّف ولا تُلغي. و`max-width` للاحتياط وحده: رابط خادم طويل
   يرفع إصدار الرمز فيتّسع، وما يتجاوز النافذة يُصغَّر بدل أن يُقصّ. */
#pairQr {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}
/* غطاء على الرمز حين لا يكون صالحاً: رمز نصف مرسوم أسوأ من لا رمز */
.qr-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: 12px;
  background: rgba(18, 15, 13, 0.94);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 700;
}

/* ===== لحظة الربط ===== */
/* مرّةً في عمر الربط، فهي الموضع الوحيد في النافذة الذي يحتمل احتفالاً: الرمز
   يذوب في البطاقة، ثم يظهر الجهازان، ثم يمتدّ بينهما الخطّ، ثم العلامة. والحالُ
   النهائية هي الأنماط الساكنة والحركة `backwards` — فتقليل الحركة (الذي يُطفئ
   كل حركة في هذا الملف) يُظهر النتيجة مباشرةً لا فراغاً. */
.qr-done {
  position: absolute; inset: 0; border-radius: 12px;
  background: var(--ink-1);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  visibility: hidden;
}
.qr-wrap.paired .qr-done { visibility: visible; animation: qdFade var(--t-2) var(--e-out) backwards; }
#pairQr { transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out); }
.qr-wrap.paired #pairQr { opacity: 0; transform: scale(.96); }
/* الأرضيّة البيضاء تذوب مع الرمز — وإلا بقيت حافّتها تلمع حول زوايا الغطاء */
.qr-wrap { transition: background-color var(--t-2) var(--e-out); }
.qr-wrap.paired { background-color: var(--ink-1); }
.qd-dev {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--ink-2); border: 1px solid var(--line); color: var(--ash);
}
.qd-dev .icon { width: 22px; height: 22px; }
.qd-line { width: 20px; height: 2px; border-radius: 1px; background: var(--signal); flex: none; }
.qd-ok {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--signal); color: var(--on-signal);
}
.qd-ok .icon { width: 24px; height: 24px; stroke-width: 2.6; }
.qr-wrap.paired .qd-dev { animation: qdDev var(--t-2) var(--e-out) 60ms backwards; }
.qr-wrap.paired .qd-line { animation: qdLine 220ms var(--e-out) 180ms backwards; }
.qr-wrap.paired .qd-ok {
  animation: qdOk var(--t-3) var(--e-out) 340ms backwards, qdRing var(--t-4) var(--e-out) 480ms;
}
@keyframes qdFade { from { opacity: 0; } }
@keyframes qdDev { from { opacity: 0; transform: scale(.9); } }
@keyframes qdLine { from { transform: scaleX(0); } }
@keyframes qdOk {
  from { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.06); }
  to { transform: scale(1); }
}
@keyframes qdRing {
  from { box-shadow: 0 0 0 0 var(--signal-glow); }
  to { box-shadow: 0 0 0 12px transparent; }
}

.pair-state { font-size: 13px; font-weight: 700; margin-top: 8px; }

/* ===== رمز الدخول المكتوب ===== */
.code-box {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 12px 8px;
  margin-top: 10px;
}
.code-label { display: block; font-size: 11.5px; color: var(--ash-dim); }
/* يُقرأ عن شاشة ويُكتب على جوال — فالتباعد بين المحارف ليس زينة */
/* مدخل الاتجاه المعكوس: هو الطريق الافتراضي، فيتصدّر بإطار يميّزه */
.code-box.entry {
  border-color: var(--tint-border);
  background: var(--tint-bg);
  box-shadow: var(--lift);
}
.code-box.entry .field-row { margin-top: 0; gap: 8px; }
.code-box.entry input {
  flex: 1; min-height: 44px; text-align: center;
  letter-spacing: 6px; font-size: 19px;
  font-variant-numeric: tabular-nums;
  background: var(--ink-2); border-color: var(--tint-border);
}
.code-box.entry .btn.primary { min-height: 44px; padding: 0 18px; }
.code-box.entry .code-note b { color: var(--ash); font-weight: 600; }
.code-box.entry .code-note { margin-top: 6px; }
/* ردُّ المدخل تحت حقله لا آخر الشاشة، و`min-height` في `.feedback` تمنع قفزة الصندوق */
.code-box.entry .feedback { margin-top: 6px; text-align: start; }
.code {
  font-family: var(--f-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
  color: var(--signal);
  user-select: all;
}
.code.stale { color: var(--ash-dim); }
/* رمزٌ جديد وصل — لا العلامات المؤقّتة أثناء التوليد (`refreshLoginCode` في views/pair.js) */
.code.code-in { animation: viewInFade var(--t-2) var(--e-out); }
.code-note { display: block; font-size: 11px; color: var(--ash-dim); }
.pair-hint {
  font-size: 11.5px;
  color: var(--ash-dim);
  line-height: 1.7;
  margin-top: 6px;
}
.pair-fallback {
  font-size: 11.5px;
  color: var(--ash-dim);
  line-height: 1.7;
  margin-top: 10px;
  text-align: start;
}
.pair-fallback [dir=ltr] {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.pair-more { margin-top: 8px; text-align: start; }
.pair-more .pair-fallback { margin-top: 0; }
#moreBtn[aria-expanded="true"] { color: var(--ash); }

.link-btn {
  background: none;
  border: none;
  color: var(--ash-dim);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  margin-top: 12px;
  min-height: 32px; padding: 6px 4px;
}
.link-btn:hover { color: var(--ash); }
.link-btn .icon { margin-inline-end: 0.25em; }

/* ===== الحقول ===== */
.field-label {
  display: block;
  font-size: 11.5px;
  color: var(--ash-dim);
  margin: 10px 0 5px;
}
.field-row { display: flex; gap: 8px; }
.field-note {
  font-size: 11.5px;
  color: var(--ash-dim);
  line-height: 1.6;
  margin-top: 8px;
}
input[type="text"],
input[type="password"] {
  flex: 1;
  min-width: 0;
  background: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--ash);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-glow);
}
input[type="text"]::placeholder,
input[type="password"]::placeholder { color: var(--ash-faint); }

.feedback { font-size: 12px; margin-top: 8px; min-height: 1.2em; }
.feedback.ok { color: var(--success); }
.feedback.err { color: var(--danger); }

/* ===== الإعدادات ===== */
/* عشر بطاقات في ‎div‎ مسطّح كانت تمدّ الشاشة إلى سقف نافذة كروم (٦٠٠) فتمرّر
   الصفحة كلّها — ويخرج زر الرجوع في ‎.topbar‎ من الرؤية بلا مخرج إلا التمرير
   لأعلى. فصار الشريط ثابتاً والجسم وحده يمرّر، كما في الـ PWA.
   والمقاس ٥٢٠ نفس ‎#mainView‎ حتى لا تقفز النافذة بين الشاشتين. */
#settingsView {
  display: flex;
  flex-direction: column;
  height: 520px;
  padding: 0;
  overflow: hidden;
}
/* ‎.hidden‎ لازم تغلب ‎display:flex‎ — نفس صيغة ‎#mainView.hidden‎ */
#settingsView.hidden { display: none !important; }
/* وشريط التأكيد طبقةٌ تطفو فوق الرأس (`#confirmBar` أدناه) لا شريطٌ يقلّص الشاشة:
   كانت الشاشات تتنازل عن ١١٠ بكسلاً ما دام ظاهراً، فتقفز النافذة كلّها. */
#settingsView .topbar {
  flex: none;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}
#settingsView .set-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
#settingsView .set-body::-webkit-scrollbar { width: 5px; }
#settingsView .set-body::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 3px;
}

.settings-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.icon-chip {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: var(--ink-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ash);
}
.icon-chip .icon { width: 22px; height: 22px; stroke-width: 2; }
.icon-chip.sm { width: 34px; height: 34px; border-radius: 11px; }
.icon-chip.sm .icon { width: 19px; height: 19px; }
.icon-chip.signal-only {
  width: auto; height: auto; border: 0; background: none;
  color: var(--signal); padding: 0; margin: 0 auto 6px;
}
.plan-card {
  background: rgba(255, 122, 52, .10);
  border: 1px solid rgba(255, 122, 52, .28);
  border-radius: 16px; padding: 12px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.plan-card.hidden { display: none; }
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-card-title { font-size: 13.5px; font-weight: 700; }
.plan-card-expiry { font-size: 11px; color: var(--ash-dim); margin-top: 2px; }
.plan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.plan-stat {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 6px; text-align: center;
}
.plan-stat-val {
  display: block; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700;
}
.plan-stat-label { display: block; font-size: 12px; color: var(--ash-dim); margin-top: 2px; }
.plan-unit { font-size: 11px; color: var(--ash-dim); }
/* العمود الثاني في بطاقة المجاني: ما يعطيه Pro تحت كل رقم. */
.plan-stat-pro {
  display: block; font-size: 11px; font-weight: 700; color: var(--signal);
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
/* زرّ داخل سطر الحالة (الترقية عند الاصطدام بالحدّ). */
.send-note .note-act {
  background: none; border: 0; padding: 0; margin-inline-start: 4px;
  color: inherit; font: inherit; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.settings-card > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style-position: inside;
  min-height: 32px; line-height: 32px; margin: -6px 0;
}
.spacer { width: 20px; }

.set-group-title {
  font-size: 11.5px; font-weight: 700;
  color: var(--ash-dim); margin: 0 0 8px 4px;
}
.set-group-card {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; box-shadow: var(--lift);
}
#behaviorCard { background: none; border: 0; padding: 0; box-shadow: none; }
.toggle-row.set-toggle {
  gap: 10px; padding: 0 13px; min-height: 56px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.toggle-row.set-toggle:last-of-type { border-bottom: 0; }
.toggle-row.set-toggle > div { flex: 1; min-width: 0; }
/* قائمة الخروج التلقائي — بمقاس المفتاح وأرضيّة الحقول، وحلقةُ التركيز المشتركة لا تطال `select` */
.set-select {
  flex: none; max-width: 136px; min-height: 32px;
  background: var(--ink-2); color: var(--ash); border: 1.5px solid var(--line);
  border-radius: 9px; padding: 4px 8px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.set-select:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.device-card {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px; box-shadow: var(--lift);
}
.device-card .field-label { margin-bottom: 6px; font-size: 11px; color: var(--ash-faint); }
.device-card input { min-height: 44px; }
/* ===== صفوف الإعدادات — نسق الجوال نفسه (`.set-row` في app.css) مضغوطاً على ٣٦٠ =====
   جولة ترتيب إعدادات الإضافة (١٦ سبتمبر ٢٠٢٦): بطاقةٌ بلا إطار تحمل عنوان
   المجموعة، وصفوفٌ بأيقونةٍ وعنوانٍ ووصف، والشرح في التأكيد لا على الصفحة. */
.settings-card.flat { background: none; border: 0; padding: 0; box-shadow: none; }
.set-group-more { margin-top: 14px; } /* المسح والخروج كتلةٌ تحت بطاقة الأجهزة */
.set-group-card > .device-card { border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.set-group-card > .device-list { margin: 0; font-size: inherit; }
.set-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; width: 100%; padding: 0 12px;
  border: 0; background: none; color: inherit; font-family: inherit;
  text-align: inherit; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: transform var(--t-1) var(--e-out), background-color var(--t-2) var(--e-out);
}
.set-row:last-child { border-bottom: 0; }
.set-row.static { cursor: default; }
/* التحويم والضغط — نظيرا `.set-row:active` في app.css. النافذة تُقاد بالفأرة
   فالتحويم أهمّ مؤشّر فيها، و`.static` بلا فعلٍ فلا تصيبه حالتاهما. */
.set-row:not(.static):hover { background: var(--ink-2); }
.set-row:not(.static):active { transform: scale(.965); transition-duration: 0ms; }
.set-row-text { flex: 1; min-width: 0; text-align: start; }
.set-row-title { display: block; font-size: 13px; font-weight: 700; color: var(--ash); }
.set-row-desc { display: block; font-size: 11.5px; color: var(--ash-dim); margin-top: 1px; }
.set-row.danger .set-row-title { color: var(--danger); }
.set-row-chev {
  width: 16px; height: 16px; color: var(--ash-faint); flex: none;
  transition: transform var(--t-2) var(--e-out);
}
/* `#ic-chev` سهمٌ إلى الغرب = «أمام» في RTL: يُعكس مغلقاً في LTR، ومفتوحاً يدور −٩٠
   (الغرب ← الجنوب) في الاتجاهين — `transform` لا يتراكم، فقاعدة الفتح تحلّ محلّ العكس
   والترتيب هنا هو الحَكَم (الخصوصية واحدة). ولا `rotate(90deg)`: يدير السهم إلى فوق. */
:root[dir="ltr"] .set-row-chev { transform: scaleX(-1); }
.set-row[aria-expanded="true"] .set-row-chev { transform: rotate(-90deg); }
/* معرّف الدعم لاتينيٌّ فالأحادي له (الثابت ٨) */
.set-row-desc.mono { font-family: var(--f-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-row .row-act { margin: 0; flex: none; width: auto; min-height: 32px; }
.icon-chip.sm.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.icon-chip.sm.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.set-panel { padding: 10px 12px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.set-panel .fp { margin: 4px 0 8px; }
.field-note.in-card { margin: 0; padding: 10px 12px; }
.settings-card.advanced .field-label { margin-top: 12px; }
/* سطر الربط وزرّ الدخول داخل بطاقة الخطة */
.plan-card .plan-linked { margin: 12px 0 0; }
.plan-card .btn { margin-top: 8px; }
/* بطاقة المشترك مضغوطة: البلاطات الثلاث (~١٠٠ بكسل) للمجاني وحده — عمود
   «Pro: …» تحتها حجّةُ الترقية، وعند المشترك الأرقام خبرٌ لا قرار فتصير سطراً. */
.plan-card-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.plan-tag {
  font-size: 11px; font-weight: 700; color: var(--success);
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.plan-card.compact .plan-stats { display: none; }
/* تعذّرت قراءة الخطة: لا بلاطات «—» ولا زرّ دعوة — زرّ «أعد المحاولة» وحده */
.plan-card.unavailable .plan-stats { display: none; }
.plan-limits {
  margin: 10px 0 0; font-size: 11.5px; color: var(--ash-dim);
  font-variant-numeric: tabular-nums;
}
.plan-limits b { color: var(--ash); font-weight: 700; }
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.toggle-title { display: block; font-size: 13px; font-weight: 600; }
.toggle-desc { display: block; font-size: 11.5px; color: var(--ash-dim); line-height: 1.6; }
/* المربّع المخفي مطلقُ الموضع: بلا مرساةٍ في صفّه كان يفلت من تمرير `.set-body` فيمدّ
   المستند إلى ~٨٥٠ — تمريرٌ خارجيّ في الإعدادات تحت شاشةٍ بـ٥٢٠. */
.toggle-row { position: relative; }
.toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.toggle-row input:focus-visible + .switch {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.switch {
  flex: 0 0 42px;
  height: 24px;
  border-radius: 12px;
  background: var(--ink-3);
  position: relative;
  transition: background var(--t-3) var(--e-soft);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ash);
  transition: transform var(--t-3) var(--e-spring);
}
.toggle-row input:checked + .switch { background: var(--signal); }
.toggle-row input:checked + .switch::after { transform: translateX(18px); }
/* لا translateX منطقية في CSS — فعلامةُ الإزاحة وحدها تتبع الاتجاه. */
[dir="rtl"] .toggle-row input:checked + .switch::after { transform: translateX(-18px); }

/* زرّا اللغة: كلٌّ باسمه في خطّه — والثابت ١٤ يحكم الصفّ (.btn فيها width:100%). */
.lang-row { display: flex; gap: 8px; }
.lang-row .btn { margin-top: 0; flex: 1 1 0; width: auto; min-width: 0; }
.lang-row .btn.on { background: var(--signal); color: var(--on-signal); }

/* حالة الربط بحساب. لا تأخذ --signal — محجوز للإرسال والاتصال الحيّ وحدهما. */
.plan-linked {
  font-size: 12px;
  font-weight: 700;
  color: var(--ash-dim);
  margin: 0 0 10px;
}
.plan-linked.is-linked { color: var(--success); }

/* ===== شريط التأكيد المشترك ===== */
/* محايدٌ للقابل للاسترجاع (المسح من هذا المتصفح)، وأحمرُ الصندوق نفسه للمدمّر وحده
   (`.danger`) — الصندوق لا الزرّ وحده هو الإشارة. والخلفيتان معتمتان: الشريط يطفو فوق
   الرأس، والشفّاف كان يُري ما تحته. */
.confirm-bar {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.6;
}
.confirm-bar.danger {
  background: color-mix(in srgb, var(--danger) 14%, var(--ink-1));
  border-color: rgba(226, 86, 74, 0.35);
}
.confirm-actions { display: flex; gap: 8px; margin-top: 10px; }
#confirmBar {
  position: absolute; top: 8px; inset-inline: 8px; z-index: 20; margin: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ===== الشريط العلوي ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.brand-name { font-weight: 800; font-size: 15px; }
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(95, 184, 140, 0.7);
  animation: pulseGlow 2s ease-in-out infinite;
}
.status-dot.off {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(226, 86, 74, 0.6);
  animation: none;
}
/* يتّصل: لا أحمر قبل أن يُحسم (`connectionView`) */
.status-dot.wait {
  background: var(--ash-faint);
  box-shadow: none;
  animation: none;
}
@keyframes pulseGlow {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--ash);
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1;
  display: grid; place-items: center;
  min-width: 32px; min-height: 32px; padding: 0; margin: -5px 0;
}
.icon-btn:hover { opacity: 1; transform: scale(1.1); }
.icon-btn .icon { width: 1.15em; height: 1.15em; }

/* ===== الأزرار ===== */
.btn {
  border: none;
  border-radius: 11px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: var(--ash);
  transition: transform var(--t-1) var(--e-out), background var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft), border-color var(--t-2) var(--e-soft);
}
/* حلقة تركيزٍ واحدة لكل ما يُضغط — كانت قواعد لكل صنفٍ فتسقط عمّا لم يُسمَّ (الصفوف والرقائق
   وأزرار ✕). والمدخلات خارجها عمداً: لها حدٌّ وتوهّج. والصفوف داخل بطاقاتٍ بـ`overflow: hidden`
   فحلقتها للداخل وإلا قُصّت. */
:is(button, a[href], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.set-row:focus-visible, .media-row:focus-visible { outline-offset: -2px; }
.btn:active { transform: scale(.98); }
.btn.primary {
  background: var(--signal);
  color: var(--on-signal);
}
.btn.primary:hover { transform: translateY(-1px); }
.btn.primary:active { transform: scale(.98); }
.btn.primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn.ghost {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ash);
}
.btn.ghost:hover { border-color: var(--signal); }
/* بعد .ghost عمداً — وإلا ghost يطغى على تغذية sent/fail */
.btn.sent { background: var(--success); color: var(--on-signal); }
.btn.fail { background: var(--danger); color: var(--on-signal); }
.btn.tiny { padding: 7px 14px; font-size: 12px; border-radius: 9px; }
.btn.danger { color: var(--danger); border-color: rgba(226, 86, 74, 0.4); }
.btn.danger:hover { border-color: var(--danger); background: rgba(226, 86, 74, 0.1); }

/* رجّة الفشل — ‎views/main.js‎ يضع الصنف ويرفعه منذ البدء بلا قاعدة تقابله.
   إزاحة أفقية صغيرة: تُحسّ ولا تُقفز بالزر من مكانه. وكتلة تقليل الحركة
   أدناه تُلغيها مع كل حركة أخرى. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.shake { animation: shake var(--t-3) var(--e-out); }


/* ===== الرسالة المخصصة ===== */
textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ash);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-glow);
}
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
textarea::placeholder { color: var(--ash-faint); }
.attach { font-size: 18px; }

.image-preview { margin-top: 10px; }

/* رأس المرفقات — لا يظهر إلا على ملفين فأكثر: مع واحدٍ ✕ على العنصر يكفي،
   وسطرٌ يقول «١ ملف» فوق صورةٍ واحدة ضجيج. */
.attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--ash-dim);
}
.attach-clear {
  border: none;
  background: none;
  font: inherit;
  color: var(--danger);
  cursor: pointer;
  min-height: 32px; padding: 0 6px; margin: -8px -6px;
}

.attach-list { display: grid; gap: 6px; }
/* ملفان فأكثر: شبكة مصغّرات. وبطاقةٌ بارتفاعٍ كامل لكل ملف تمدّ النافذة إلى
   سقف كروم (٦٠٠) فيخرج المُنشئ نفسه من الرؤية — والقائمة تُمرَّر لا تمتدّ. */
.attach-list.multi {
  grid-template-columns: repeat(4, 1fr);
  max-height: 148px;
  overflow-y: auto;
}

.attach-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
/* المرفق الجديد يدخل مرّةً بتتابعٍ قصير (`animationDelay` من `renderAttachments`)، والمُرسَل
   يخرج بانكماشٍ من `dropAttachment` — والحركتان تُطفآن بتقليل الحركة (كتلته أسفل الملف، وفحصٌ
   في الخروج لأنه WAAPI لا تطاله `animation: none`). */
.attach-item.arrive { animation: attachIn var(--t-2) var(--e-out) backwards; }
@keyframes attachIn { from { opacity: 0; transform: scale(.92); } }
.attach-item img { width: 100%; max-height: 140px; object-fit: cover; display: block; }
.attach-list.multi .attach-item img { height: 58px; max-height: none; }

/* مرفق ليس صورة: بلا سطر الاسم يظهر إطار فارغ لا يقول ما المرفق.
   ⚠️ والحشوة **اليسرى** هي التي تحمي من زرّ ✕ — هو `left: 6px` فيزيائياً
   والصفحة RTL، فحشوةٌ يمنى تُبعد النصّ عن لا شيء ويبقى الاسم تحت الزرّ. */
.file-chip {
  padding: 12px 12px 12px 34px;
  font-size: 12.5px;
  color: var(--ash-dim);
  word-break: break-word;
}
/* في الشبكة الاسم يُقصّ — والكامل في `title` */
.attach-list.multi .file-chip {
  height: 58px;
  padding: 6px 6px 6px 26px;
  font-size: 10.5px;
  line-height: 1.3;
  overflow: hidden;
}
.attach-list.multi .fc-base {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; word-break: normal;
}
.attach-list.multi .fc-ext {
  display: block; direction: ltr; unicode-bidi: isolate; white-space: nowrap;
  color: var(--ash-faint);
}
.attach-list.multi .remove-img { width: 20px; height: 20px; top: 4px; left: 4px; }
.attach-list.multi .remove-img .icon { width: 12px; height: 12px; }

.send-note {
  font-size: 11.5px;
  margin-top: 8px;
  min-height: 1.2em;
  color: var(--ash-dim);
}
.send-note.ok { color: var(--success); }
.send-note.err { color: var(--danger); }
.send-note .note-more { color: var(--ash-dim); font-weight: 400; }
.remove-img {
  position: absolute;
  top: 6px; inset-inline-end: 6px;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: var(--ash);
  cursor: pointer;
  font-size: 12px;
  display: grid; place-items: center;
  padding: 0;
  overflow: visible;
}
/* الهدف يمتدّ ٦ بكسلات حول الدائرة بلا أن تكبر فتغطّي المصغّرة */
.remove-img::before { content: ''; position: absolute; inset: -6px; }
.remove-img .icon { width: 13px; height: 13px; }

/* ===== الوارد ===== */
.device-list, .error-list {
  list-style: none; padding: 0; margin: 8px 0; font-size: 12px;
}
.error-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line);
}
/* أهداف اللمس ٣٢ فأكثر — والأيقونة كما هي، والهامش السالب يُبقي السطر بطوله */
.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ash);
  opacity: 0.6;
  transition: opacity 0.2s;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  min-width: 32px; min-height: 32px; padding: 0; margin: -6px -6px -8px;
}
.copy-btn:hover { opacity: 1; }
/* الأيقونة تأخذ 1em من الزرّ، و١٣ بكسل أدقّ مما ينبغي لهدف نقر */
.copy-btn .icon { width: 15px; height: 15px; }

/* الحالة الفارغة — نظيرة `#empty` في الـPWA مصغّرةً على ٣٦٠ (بند «١١»):
   جهازان يتّصلان بخطٍّ منقّط، فعنوانٌ فسطرٌ يحيل إلى زرّ الصفحة تحته. */
.inbox-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 3px; padding: 10px 0;
}
.inbox-empty-icons {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 8px;
}
.inbox-empty-icons .icon-chip.signal {
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  border-color: var(--tint-border); color: var(--signal);
}
.inbox-empty-line {
  width: 24px; height: 2px; flex: none; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--signal) 0 5px, transparent 5px 10px);
}
.inbox-empty-title { font-size: 13.5px; font-weight: 700; color: var(--ash); }
.inbox-empty-desc { max-width: 240px; font-size: 11.5px; color: var(--ash-dim); line-height: 1.6; }

/* ===== محادثة ===== */
#mainView {
  display: flex;
  flex-direction: column;
  height: 520px;
  padding: 0;
  overflow: hidden;
}
#mainView.hidden { display: none !important; }
/* شريطٌ بصبغة الإشارة — بطلب المستخدم (٦ سبتمبر ٢٠٢٦): كان هادئاً على
   ‎--ink-2‎ بنصّين رماديين فقرأه المستخدم باهتاً بجوار لوحة التصميم. وهو
   استثناءٌ مقصود من «الإشارة للإرسال والاتصال الحيّ وحدهما»: الشريط دعوةٌ
   إلى فعلٍ واحد، والبرق وزرّه الممتلئ يقولان ذلك. */
.promo-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 122, 52, .14);
  border-bottom: 1px solid rgba(255, 122, 52, .34);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ash-dim);
}
.promo-bar.hidden { display: none; }
/* أوّل ظهورٍ فعليٍّ للشريط (لا مرآة سابقة في `localStorage`) يتلاشى وحده —
   وما بعده يصل بحاله المحفوظة فوراً بلا حركة، فلا إزاحةٌ عند كل فتحةٍ للنافذة
   (`maybeShowPromo` في views/header.js). */
.promo-bar.promo-in { animation: viewInFade var(--t-2) var(--e-out); }
.promo-icon {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  background: rgba(255, 122, 52, .22); color: var(--signal);
  display: grid; place-items: center;
}
.promo-icon .icon { width: 16px; height: 16px; stroke-width: 2; }
.promo-cta {
  flex: none; border: none; border-radius: 9px;
  background: var(--signal); color: var(--on-signal);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 14px; cursor: pointer;
}
.promo-cta:hover { background: var(--signal-soft); }
.promo-hide {
  flex: none; background: none; border: none; color: var(--ash-faint);
  cursor: pointer; padding: 0; display: grid; place-items: center;
  min-width: 32px; min-height: 32px; margin: -7px -6px -7px 0;
}
.promo-hide:hover { color: var(--ash); }
.promo-hide .icon { width: 14px; height: 14px; stroke-width: 2; }

.avatar-wrap { position: relative; flex: none; }
/* الخطة المدفوعة تصبغ الصورة الرمزية ذهباً والبرق في زاويتها العليا — نظير
   `.avatar-wrap.pro` في الـPWA، والصنف تضعه `paintProBadge`. */
.avatar-wrap.pro .avatar { background: var(--pro); border-color: var(--pro); color: var(--pro-ink); }
.pro-badge {
  position: absolute; inset-inline-start: -5px; top: -5px;
  width: 18px; height: 18px; box-sizing: border-box; border-radius: 6px;
  background: var(--ink-1); border: 2px solid var(--pro);
  color: var(--pro); display: grid; place-items: center;
}
.pro-badge .icon { width: 11px; height: 11px; fill: currentColor; stroke-width: 1.2; }
.pro-badge.hidden { display: none; }

/* الشريط سطران: عنوانٌ يقول ما يُعطى، وسطرٌ يقول حدّيه. */
.promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.promo-text { line-height: 1.4; }
.promo-text b { display: block; font-size: 12px; font-weight: 700; color: var(--ash); }
.promo-text small { display: block; font-size: 11px; color: var(--ash-dim); }

.chat-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
  flex: none;
}
.chat-head .avatar {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: var(--ink-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ash-dim);
}
.chat-head .meta { flex: 1; min-width: 0; }
/* اسم الجوال الحقيقي (حتى ٤٠ محرفاً) سطرٌ واحد بحذف — لا يدفع سطر الحال */
.chat-head .name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .stat {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 11px; color: var(--success);
}
.chat-head .stat.off { color: var(--danger); }
.chat-head .stat.wait,
.chat-head .stat.idle { color: var(--ash-dim); }
.chat-head .status-dot {
  width: 7px; height: 7px;
  box-shadow: 0 0 0 4px var(--signal-glow);
  background: var(--signal);
}
.chat-head .status-dot.off {
  background: var(--danger);
  box-shadow: none;
}
.chat-head .status-dot.wait {
  background: var(--ash-faint);
  box-shadow: none;
  animation: none;
}
/* ===== التشفير طرفاً لطرف — القفل والبصمة (المرحلة ٣) ===== */
/* القفل في سطر الحال بهامشٍ سالب فلا يرتفع الرأس — والنافذة ٣٦٠ عرضاً */
.e2e-lock {
  border: 0; background: none; color: var(--success); padding: 0;
  width: 32px; height: 32px; margin: -10px 0; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
}
.e2e-lock .icon { width: 14px; height: 14px; }
.e2e-lock.hidden { display: none; }
/* حالٌ تصل للتوّ (`replay` في ui.js) — نظيرة الـPWA: القفل حين تصير الغرفة مشفّرةً والنافذة مفتوحة،
   وذهبُ Pro مرّةً لكل تحوّلٍ من المجاني. والانتقال على الصورة الرمزية داخل `.state-in` وحدها،
   فالذهبيّ يُرسَم عند كل فتحٍ للنافذة بلا تلاشٍ. */
.e2e-lock.state-in { animation: lockGlow var(--t-4) var(--e-out); }
.e2e-lock.state-in .icon { animation: statePop var(--t-3) var(--e-out); }
.avatar-wrap.state-in .avatar {
  transition: background-color var(--t-3) var(--e-out), border-color var(--t-3) var(--e-out), color var(--t-3) var(--e-out);
  animation: statePulse var(--t-3) var(--e-out), proRing var(--t-4) var(--e-out) 120ms;
}
@keyframes statePulse { 50% { transform: scale(1.08); } }
@keyframes statePop {
  from { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.12); }
  to { transform: none; }
}
@keyframes proRing {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pro) 60%, transparent); }
  to { box-shadow: 0 0 0 12px transparent; }
}
@keyframes lockGlow {
  from { background-color: color-mix(in srgb, var(--success) 24%, transparent); }
  to { background-color: transparent; }
}
.e2e-bar {
  margin: 10px 14px 0; padding: 10px 12px;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 11.5px; color: var(--ash-dim); line-height: 1.6;
}
/* يُفتح بضغطة القفل — نظير دخول الشاشات (`viewInRise`)، لا تلاشٍ فورياً كان
   يظهر ويختفي معاً (`toggleE2eBar` في views/header.js). */
.e2e-bar.e2e-in { animation: viewInRise var(--t-3) var(--e-out); }
.e2e-bar b { display: block; color: var(--ash); font-size: 12.5px; margin-bottom: 2px; }
.e2e-bar.hidden { display: none; }
/* البصمة: لاتيني وأرقام على الأحادي LTR (الثابت ٨) — كل مجموعة عقدةٌ نصّية */
.fp {
  display: flex; flex-wrap: wrap; gap: 4px 8px; direction: ltr; margin: 8px 0;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 700; letter-spacing: 1px; color: var(--ash);
}
.fp.hidden { display: none; }
.fp span { background: var(--ink-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; }
.head-icon {
  border: 1px solid var(--line); background: var(--ink-2); color: var(--ash-dim);
  border-radius: 12px;
  min-width: 38px; min-height: 38px; cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--t-1) var(--e-out), border-color var(--t-2) var(--e-out), background-color var(--t-2) var(--e-out);
}
.head-icon .icon { width: 19px; height: 19px; }
.head-icon:hover { border-color: var(--line-strong); background: var(--ink-3); }
.head-icon:active { transform: scale(.94); transition-duration: 0ms; }
/* الأيقونات مجموعةٌ واحدة بفراغها الخاصّ: فراغ `.chat-head` (١١) بين ثلاثِ
   أيقونات وفاصلٍ يأكل ما يحتاجه الاسم إلى جواره. */
/* ============ مبدّل اللغة ============
   حبّةٌ بقسمين حيث المكان واسع، وزرٌّ واحد (`.lang-toggle`) في رأسٍ مزدحم.
   بلا لون إشارة: ليست إرسالاً ولا اتصالاً حيّاً. واسما اللغتين بخطّهما. */
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--ink-1); border: 1px solid var(--line); }
.lang-switch button { border: 0; background: transparent; color: var(--ash-dim); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 8px 12px; border-radius: 999px; cursor: pointer; min-width: 38px; min-height: 28px; }
.lang-switch button.on { background: var(--ink-3); color: var(--ash); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lang-switch button:hover:not(.on) { color: var(--ash); }
.lang-switch button { position: relative; }
/* الزرّ ٢٨ داخل حبّةٍ بحشوة ٢ — والامتداد يأخذ الحشوة فيصير الهدف ٣٢ بلا أن تكبر الحبّة */
.lang-switch button::before { content: ''; position: absolute; inset: -2px -1px; }
.lang-switch.corner { position: absolute; top: 0; inset-inline-end: 10px; } /* بمحاذاة الشارة: أدنى منها يلامس سطر الاسم */
.lang-toggle { font-size: 12px; font-weight: 700; font-family: var(--f-body); }
/* نصٌّ باهت بفاصلٍ رفيع لا حبّةٌ ممتلئة: في سطر الحال كانت تُقرأ شارةَ حال. ولونها الخاصّ
   يمنع `.stat.off/.idle/.wait` من صبغها */
.lang-toggle.sm {
  border: 0; background: none; border-radius: 6px;
  padding: 2px 6px; padding-inline-start: 8px; margin-inline-start: 4px;
  border-inline-start: 1px solid var(--line);
  color: var(--ash-faint); font-size: 11px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.lang-toggle.sm:hover { color: var(--ash); }
.lang-toggle.sm { position: relative; }
.lang-toggle.sm::before { content: ''; position: absolute; inset: -6px -4px; }

.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.head-sep { width: 1px; height: 20px; flex: none; background: var(--line-strong); }
.head-icon.danger { color: var(--danger); }
.head-icon.danger:hover { border-color: rgba(226, 86, 74, .4); background: rgba(226, 86, 74, .1); }
#mainView .thread {
  flex: 1; overflow-y: auto; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
#mainView .inbox-empty { margin: auto; padding: 16px; }
.day-chip {
  align-self: center; font-size: 10.5px; color: var(--ash-faint);
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; margin: 4px 0;
}
.row { display: flex; }
.row.start { justify-content: flex-start; }
.row.end { justify-content: flex-end; }
/* فاصل «جديد»: رقاقة اليوم بلون الوصول (قرار المالك، ٢٦ سبتمبر ٢٠٢٦ — أخضر لا الإشارة) */
.day-chip.new-chip {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 10%, var(--ink-2));
}
/* وصول العنصر — نظيرة ‎arrive‎/‎glow‎ في الـ PWA حرفاً بحرف حتى يتطابق الطرفان. */
@keyframes inboxFresh {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes inboxGlow {
  0%, 40% { background: color-mix(in srgb, var(--success) 16%, transparent); }
  100% { background: transparent; }
}
.row.fresh { animation: inboxFresh .28s var(--e-out); }
.row.fresh .bub { animation: inboxGlow 1.6s var(--e-out); }
.bub {
  max-width: 78%; padding: 8px 11px 7px;
  font-size: 12.5px; line-height: 1.5; word-break: break-word;
}
/* النصّ باتجاهه (`dir=auto`) و`start` تُحسم بما اكتُشف — ورسالة النظام خارجها فتبقى موسَّطة */
.bub:not(.system) .bub-text { text-align: start; }
.bub.start {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
}
.bub.end {
  background: var(--bub-out); border: 1px solid var(--bub-out-border);
  border-radius: 14px 14px 4px 14px;
}
/* رسالة نظام من الخادم — «صارت غرفتك Pro»: في الوسط بلون الإشارة الخافت */
.row.system { justify-content: center; }
.bub.system {
  max-width: 90%; text-align: center; font-size: 12px;
  background: color-mix(in srgb, var(--signal) 12%, var(--ink-1));
  border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  border-radius: 12px;
}
.bub .meta {
  display: flex; align-items: center; gap: 4px; margin-top: 4px;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  direction: ltr; justify-content: flex-end;
  font-size: 10.5px; color: var(--ash-faint);
}
/* سطر الوقت أحاديٌّ لاتينيّ (‎direction: ltr‎)، وهذا عربيّ داخله — فيُعزَل
   بـ‎unicode-bidi‎ ويرجع إلى خطّ الواجهة: العربية لا تُوضع على ‎--f-mono‎
   ولا تُباعَد حروفها (الثابت ٨). */
.bub .meta-ttl {
  font-family: var(--f-body); unicode-bidi: isolate;
  font-size: 10.5px; color: var(--ash-faint);
}
/* وسم الحالة («محفوظ») عربيٌّ داخل السطر الأحاديّ — فعلى خطّ الواجهة بلا تباعد
   (الثابت ٨)، ولونه من `.pending` فيُقرأ مع علامته. */
.bub .meta-tag { font-family: var(--f-body); unicode-bidi: isolate; letter-spacing: 0; }
/* الجزيرة داخل `.meta { direction: ltr }`، فتتبع اتجاهَ الصفحة لا أباها — و`rtl`
   المثبَّتة كانت تقلب الإنجليزية (قِيس ١٣ سبتمبر ٢٠٢٦). ومثلها حجمُ الملف أدناه. */
/* السطر كلّه باتجاه الصفحة: الوقت أوّلاً (يميناً بالعربية) ثم العلامة والوسم ثم النقطة والمهلة —
   وكان `direction: ltr` على السطر يضع النقطة في طرفه الأقصى (قِيس ٢٧ سبتمبر ٢٠٢٦). والوقت وحده
   جزيرةٌ لاتينية. */
[dir="rtl"] .bub .meta { direction: rtl; justify-content: flex-start; }
.bub .meta-time { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .bub .meta-ttl,
[dir="rtl"] .bub .meta-tag,
[dir="rtl"] .file-chip-bub .fsize.gone,
[dir="rtl"] .file-chip-bub .fsize.ttl { direction: rtl; }
.bub .meta.delivered { color: var(--success); }
.bub .meta.pending { color: var(--ash-faint); }
/* الصورة داخل زرّ: تُبلَغ بـTab وEnter يحفظها، واسمها للوصول على الزرّ */
.bub-img-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; max-width: 100%; }
.bub-img {
  display: block; max-width: 100%; max-height: 220px;
  border-radius: 8px; margin-bottom: 4px;
}
.bub.media { padding: 4px; }
/* ‎.media‎ تتنازل عن حشوها لأن الصورة تملأ الفقاعة — والرقاقة بديلُها حين
   يسقط الملف، فتستعيد حشو الفقاعة العادية وإلا خُنق النصّ في أربعة بكسلات */
.bub.media:has(.bub-expired) { padding: 8px 11px 7px; }
.bub-expired { color: var(--ash-faint); font-size: 12px; }

/* ===== تقدّم النقل ===== */
/* فيديو ٨٠ ميجا كان زراً صامتاً لدقائق — لا يُعرف أيتقدّم أم علّق. والشريط في
   **الفقاعة** لا في حافة النافذة: هناك ينظر المستخدم. */
.xfer-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* الفقاعة تُقاس باسم الملف، وقد يكون قصيراً — فيبقى للشريط عشرون بكسل لا
   تقول شيئاً. فحدٌّ أدنى للاثنين. */
.bub:has(.xfer-row) { min-width: 190px; }
.xfer-row .bar { min-width: 56px; }
.xfer-row.hidden { display: none; }
.bar {
  position: relative; flex: 1 1 auto; min-width: 0;
  height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--ash) 16%, transparent);
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%; width: 0; background: var(--signal);
  transition: width .2s var(--e-soft);
}
/* غير محدّد: لا طول معلوم (أو قبل أول بايتة) — قطعةٌ تمشي بدل نسبةٍ مخترَعة */
.bar.indet > i { width: 38%; animation: indet 1.15s var(--e-soft) infinite; }
@keyframes indet {
  from { transform: translateX(-110%); }
  to { transform: translateX(285%); }
}
/* الأرقام على الأحادي بعرضٍ ثابت — وإلا اهتزّ الصفّ مع كل تكّة (الثابت ٨) */
.xfer-pct {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  direction: ltr; text-align: left; font-size: 11px; color: var(--ash-faint);
  min-width: 36px; flex: none;
}
.xfer-x {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; margin: -5px 0; padding: 0; border-radius: 50%;
  background: none; border: 0; color: var(--ash-faint); cursor: pointer;
}
.xfer-x .icon { width: 14px; height: 14px; }
.xfer-x:hover { color: var(--ash); }

/* هيكل الصورة أثناء جلبها — بديل الإطار الفارغ */
.bub-skel {
  position: relative; width: 170px; height: 120px; border-radius: 8px;
  background: color-mix(in srgb, var(--ash) 8%, transparent);
  overflow: hidden; display: flex; align-items: flex-end; padding: 8px;
}
/* قناع شفافية بلونٍ واحد لا تدرّجٌ لوني (الهوية بلا تدرّجات) */
.bub-skel::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.bub-skel .xfer-row { margin: 0; width: 100%; position: relative; }

@media (prefers-reduced-motion: reduce) {
  .bub-skel::before { animation: none !important; }
  .bar.indet > i { animation: none !important; width: 100% !important; opacity: .5; }
}

/* شريحة الملف — نظيرة ما يعرضه الجوال: أيقونة، فاسم وحجم، فسهم الحفظ */
.file-chip-bub {
  display: flex; align-items: center; gap: 8px;
}
/* الشريحة زرٌّ حين يكون للملف مدخل، وتصفير هيئة الزرّ يبقيها كما هي شكلاً.
   و`width: 100%` مع `min-width: 0` لا `flex: none` (الثابت ١٤). */
button.file-chip-bub {
  width: 100%; min-width: 0; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; font: inherit;
  text-align: inherit; cursor: pointer;
  appearance: none; border-radius: 8px;
}
button.file-chip-bub:active { opacity: .65; }
.file-chip-bub > .icon:first-child { flex: none; width: 18px; height: 18px; }
.file-chip-bub > div { flex: 1; min-width: 0; }
.file-chip-bub .icon.dl { flex: none; width: 17px; height: 17px; color: var(--signal); }
.file-chip-bub .fname {
  font-weight: 600; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip-bub .fsize {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  direction: ltr; text-align: right;
  font-size: 10.5px; color: var(--ash-faint);
}
/* «انتهت صلاحيته» — عربيّ، فلا ‎--f-mono‎ ولا مباعدة (الثابت ٨). ولا يأخذ
   ‎--danger‎: انتهاء المهلة هو المتوقَّع لا عطلٌ وقع. */
.file-chip-bub .fsize.gone {
  font-family: inherit; font-size: 11px; color: var(--ash-dim);
}
/* «باقي ٥٨ دقيقة» — عربيّ كذلك، فيرث خطّ الواجهة لا الأحاديّ (الثابت ٨) */
.file-chip-bub .fsize.ttl {
  font-family: inherit; font-size: 10.5px; color: var(--ash-faint);
}
.lc-link {
  display: flex; align-items: flex-start; gap: 6px;
  text-decoration: none; color: inherit; cursor: pointer;
  overflow: hidden;
}
/* بلا `min-width: 0` يمدّ السطرُ غير الملتفّ عنصرَ الفليكس إلى عرض المسار فيفيض الخيط أفقياً */
.lc-texts { flex: 1; min-width: 0; }
.lc-title {
  font-size: 12.5px; font-weight: 600; color: var(--ash);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-domain {
  font-family: var(--f-mono); direction: ltr; text-align: left;
  font-size: 12px; color: var(--link);
}
/* خطّ الواجهة لا الأحاديّ: المسار المفكوك قد يكون عربياً (`/wiki/السعودية`)، والأحاديّ بلا محارف
   عربية فيسقط إلى خطّ النظام متباعداً (الثابت ٨) */
.lc-path {
  font-family: inherit; direction: ltr; text-align: left;
  font-size: 10.5px; color: var(--ash-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.page-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding: 9px 12px;
  background: var(--ink-1); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--lift);
}
.page-link-icon { background: none; border: 0; color: var(--ash-faint); }
.page-chip-text {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--ash-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* العنوان صندوقُ قصٍّ بنفسه باتجاهه (`<bdi>`): عنوانٌ عربيّ في واجهةٍ إنجليزية يُقصّ من نهايته
   لا من أوّله — القصّ على `.page-chip-text` وحده يقع في طرفه البصري الأيمن */
.page-chip-text bdi {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; color: var(--ash); font-weight: 600;
}
/* صفحةٌ داخلية: الشريحة ظاهرةٌ تقول لماذا لا تُرسل، والزرّ معطّل */
.page-chip.internal .page-chip-text { color: var(--ash-faint); }
.page-chip.internal .page-chip-text bdi { color: var(--ash-dim); font-weight: 400; }
#pageChipInternal { color: var(--ash-dim); font-weight: 600; }
.page-send {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
}
.page-send .icon { width: 15px; height: 15px; stroke-width: 2.2; }
#mainView .composer {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 10px 10px; flex: none;
  border-top: 1px solid var(--line);
  transition: border-color 0.2s, background 0.2s;
}
/* أثناء سحب ملف فوق النافذة — الحدّ يقول «أفلته هنا» بلا نص إضافي */
#mainView .composer.dropping {
  border-top-color: var(--signal);
  background: rgba(255, 122, 52, 0.12);
}
#mainView .composer.dropping textarea { border-color: var(--signal); }
#mainView .composer .icon-btn,
#mainView .composer .attach {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--ink-2); border: 1px solid var(--line);
  color: var(--ash-dim); display: grid; place-items: center;
  cursor: pointer; opacity: 1; padding: 0;
  font: inherit;
}
#mainView .composer .field {
  flex: 1; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 2px 4px;
}
#mainView .composer textarea {
  width: 100%; border: 0; background: transparent; resize: none;
  padding: 7px 9px; max-height: 90px; min-height: 34px;
  color: var(--ash); font-family: inherit; font-size: 13px;
  outline: none;
}
.send-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 0; background: var(--signal); color: var(--on-signal);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft),
              transform var(--t-1) var(--e-out);
}
.send-btn .btn-icon { display: grid; place-items: center; }
/* الأيقونتان متراكبتان في خانة واحدة، والتحوّل ✈→✓ كان يقع في إطار واحد
   لأن لا انتقال عليهما أصلاً. الشفافية بمنحنى الخروج والحجم بالنابض. */
.send-btn .btn-icon .icon {
  grid-area: 1 / 1; width: 1.1em; height: 1.1em;
  transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-spring);
}
.send-btn .ic-check { opacity: 0; transform: scale(.5); }
.send-btn:active { transform: scale(.97); }
.send-btn.sent { background: var(--success); color: var(--on-signal); }
.send-btn.sent .ic-send { opacity: 0; }
.send-btn.sent .ic-check { opacity: 1; transform: scale(1); }
.send-btn.fail { background: var(--danger); color: var(--on-signal); }
#mainView .send-note { padding: 0 12px 6px; margin: 0; min-height: 0; font-size: 11px; }
#mainView .image-preview {
  margin: 6px 12px 8px; flex: none;
}
.field-row.wrap { flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .status-dot,
  .chat-head .status-dot {
    animation: none !important;
  }
  .btn:hover,
  .btn.primary:hover,
  .btn:active,
  .send-btn:active,
  .icon-btn:hover,
  .set-row:active,
  .head-icon:active,
  .media-cell:active,
  .chip:active {
    transform: none;
  }
}

/* ===== لوح البحث والوسائط ===== */
/* شاشةٌ واحدة تُفتح من رأس المحادثة. عرضُ النافذة ٣٦٠ وارتفاعها ٥٢٠، فهي
   عمودٌ يمرّر داخلياً لا صفحةٌ تُمدّد النافذة. */
#browseView {
  display: flex;
  flex-direction: column;
  height: 520px;
  padding: 0;
  overflow: hidden;
}
#browseView.hidden { display: none !important; }
/* الشريط والرقائق ثابتة، والجسم وحده يمرّر — نفس هيكل `#settingsView`.
   ⚠️ ولزومُه هنا أشدّ: اللوح بلا نصٍّ يعرض **الوارد كلّه** لا نتائجَ بحث،
   فعشرون عنصراً بلا سقفٍ تمدّ النافذة إلى سقف كروم فتمرّر الصفحة كلّها. */
#browseView .topbar {
  flex: none; margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
#browseView .chip-row { flex: none; padding: 0 14px; margin: 10px 0 8px; }
#browseView .search-summary,
#browseView .media-note { flex: none; padding: 0 14px; }
#browseView .media-grid { padding: 0 14px 14px; }

#browseInput {
  flex: 1; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px;
  color: var(--ash); font-family: inherit; font-size: 13px; outline: none;
}
#browseInput:focus-visible { border-color: var(--signal); }
/* زرّ المسح زرّنا — لا يُرسم بجواره زرُّ المتصفح فيظهر ✕ مرّتين. */
#browseInput::-webkit-search-cancel-button,
#browseInput::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }


.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; }
.chip {
  border: 1px solid var(--line); background: var(--ink-2); color: var(--ash-dim);
  border-radius: 999px; padding: 6px 12px; min-height: 32px;
  font-family: inherit; font-size: 11.5px; cursor: pointer;
  transition: transform var(--t-1) var(--e-out), border-color var(--t-2) var(--e-out);
}
.chip:hover { border-color: var(--line-strong); }
.chip:active { transform: scale(.94); transition-duration: 0ms; }
.chip.on { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 700; }

.search-summary { font-size: 11.5px; color: var(--ash-faint); margin: 0 0 8px; }

.media-note { font-size: 11px; color: var(--ash-faint); line-height: 1.6; margin: 0 0 8px; }
.media-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.media-grid.as-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; }

.media-cell {
  position: relative; aspect-ratio: 1; padding: 0;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ash-faint); cursor: pointer; overflow: hidden;
  transition: transform var(--t-1) var(--e-out), border-color var(--t-2) var(--e-out);
}
.media-cell:hover { border-color: var(--line-strong); }
.media-cell:active { transform: scale(.96); transition-duration: 0ms; }
.media-thumb { display: grid; place-items: center; width: 100%; height: 100%; }
.media-thumb .icon { width: 22px; height: 22px; }
.media-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-cell .media-ttl {
  position: absolute; inset-inline-start: 4px; bottom: 4px;
  background: rgba(18, 15, 13, .72); color: var(--ash-dim);
  border-radius: 6px; padding: 1px 5px;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 10.5px;
}

.media-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  box-sizing: border-box; text-align: start; text-decoration: none;
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 10px;
  color: var(--ash); font-family: inherit; cursor: pointer;
}
.media-row:hover { border-color: var(--line-strong); }
/* رمز الصنف علامةٌ لا زرّ: بلا خلفية ولا حدود */
.media-row-kind { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ash-faint); }
.media-row-kind .icon { width: 18px; height: 18px; stroke-width: 2; }
.media-row-name { text-align: start; }
.media-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.media-row-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* النصّ الوارد يلتفّ سطرين — والاسمُ والرابط سطرٌ واحد بحذفٍ في طرفه. */
.media-row-name.wrap {
  white-space: normal; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* التمييز لونٌ ووزن، بلا أرضية: الأرضية على سطرٍ من سطرين تقطّع القراءة. */
.media-row-name .hit { color: var(--signal); font-weight: 700; }
/* البصمة التي مات ملفها: تبقى أثراً يُبحث عنه، وباهتةً لأنها لا تُفتح —
   ونقرُها يعود بها إلى فقاعتها في الخيط. */
.media-row.gone, .media-cell.gone { opacity: .55; }
.media-row.gone .media-ttl, .media-cell.gone .media-ttl { color: var(--danger); }
.media-row-meta { font-size: 10.5px; color: var(--ash-faint); }
.media-row .media-ttl {
  flex: none; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--ash-faint);
}