@font-face {
    font-family: 'Lalezar';
    src: url('/fonts/lalezar-arabic-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
  }
  @font-face {
    font-family: 'Lalezar';
    src: url('/fonts/lalezar-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: '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; -webkit-tap-highlight-color: transparent; }

  /* اللوحة الداكنة هي الأصل — والفاتحة تعيد تعريف الرموز وحدها أدناه. كل لون
     في الصفحة يمرّ من هنا: أي قيمة صلبة في القواعد تحتها تكسر أحد الوضعين. */
  :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. والفاتحة (‎#7A6E5C‎ = 4.99) تمرّ سلفاً فلا تُمسّ. */
    --ash: #EFE7DB; --ash-dim: #A99C89; --ash-faint: #9A8D7A;
    --signal: #FF7A34; --signal-soft: #FFB27A; --signal-glow: rgba(255,122,52,.38);
    --success: #5FB88C; --danger: #E2564A; --link: #8FBFEA;
    /* لون النصّ فوق --signal، ولا ينقلب مع السمة عمداً: البرتقالي متوسط
       القيمة في الوضعين، فنصٌّ يتبع الانعكاس يصير كريمياً على برتقالي
       فيسقط إلى 3.27:1. الأسود الحبري يعطي 7.35 داكناً و5.38 فاتحاً. */
    --on-signal: #120F0D;
    /* عمق الأسطح — خطّ ضوء داخلي على البطاقات، وtint للمسار الموصى به */
    --lift: inset 0 1px 0 rgba(255,255,255,.045);
    --tint-bg: rgba(255,122,52,.10);
    --tint-border: rgba(255,122,52,.28);
    --pro: #F0C070;
    --pro-ink: #241A08;
    --bub-out: rgba(255,122,52,.10);
    --bub-out-border: rgba(255,122,52,.26);
    --r: 14px;
    --f-disp: 'Lalezar', 'Segoe UI', sans-serif;
    --f-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    /* رموز الحركة — بأسمائها وقيمها كما في ‎store.html‎ حرفاً بحرف. وكانت
       ‎var(--e-out, ease-out)‎ تُنادى هنا سلفاً فتسقط صامتةً إلى البديل. وهي
       ليست ألواناً فلا تُعاد في اللوحة الفاتحة. */
    --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 420ms;
    --t-sheet: 260ms;
    --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);
    --stagger:  35ms;
    /* مشتقّات للقواعد الحالية — تمرّ من الرموز أعلاه في الوضعين */
    --card: rgba(255,255,255,.05);
    --field: rgba(0,0,0,.25);
    --code-bg: rgba(0,0,0,.35);
    --soft: rgba(255,255,255,.1);
    --soft-2: rgba(255,255,255,.08);
    --spin-track: rgba(255,255,255,.25);
    --spin-head: var(--ash);
    /* قناع الشيمر — شفافيةٌ بلونٍ واحد لا تدرّجٌ لوني (الهوية بلا تدرّجات):
       شريحة ضوء تمشي فوق الهيكل لتقول «قادم» بلا أن تسرق النظر. */
    --shimmer: rgba(255,255,255,.09);
    /* لون أرقام رمز الدخول. رمزٌ لا قاعدةٌ داخل ‎@media‎، لأن رأس هذا الملف
       يشترط أن اللوحة الفاتحة **تعيد تعريف الرموز وحدها**. والداكن يمرّ
       بـ‎--signal‎ عند 7.35، والفاتح يُخفَّض في كتلته أدناه. */
    --code-ink: var(--signal);
    --text: var(--ash);
    --dim: var(--ash-dim);
    --border: var(--line);
    --ok: var(--success);
    --err: var(--danger);
  }

  @media (prefers-color-scheme: light) {
    :root {
      --ink-0: #FAF5EC; --ink-1: #FFFFFF; --ink-2: #FFFFFF; --ink-3: #F1E7D8;
      --line: rgba(34,28,21,.13); --line-strong: rgba(34,28,21,.22);
      --ash: #221C15; --ash-dim: #665C4E; --ash-faint: #7A6E5C;
      --signal: #E2600F; --signal-soft: #C24E06; --signal-glow: rgba(226,96,15,.30);
      --success: #0A7C58; --danger: #C02626; --link: #3050C4;
      --card: rgba(255,255,255,.75);
      --field: rgba(255,255,255,.9);
      --code-bg: rgba(34,28,21,.06);
      --soft: rgba(34,28,21,.07);
      --soft-2: rgba(34,28,21,.06);
      --spin-track: rgba(34,28,21,.18);
      --spin-head: var(--signal);
      --shimmer: rgba(34,28,21,.07);
      /* ‎--signal‎ الفاتح (‎#E2600F‎) على ‎--ink-2‎ فوق ‎#FAF5EC‎ يعطي 3.27:1 —
         يمرّ بوصفه «نصّاً كبيراً» بشعرة، وهو نفس الرقم الذي حذّر منه الثابت ٧.
         وهذه ثمانية أرقام تُنسخ رقماً رقماً عن شاشة جوال فلا تُترك على الحدّ.
         و‎--signal-soft‎ الفاتح (‎#C24E06‎) يعطي 4.79. و‎--on-signal‎ لا يُمَسّ. */
      --code-ink: var(--signal-soft);
      --lift: inset 0 1px 0 rgba(255,255,255,.75);
      --tint-bg: rgba(226,96,15,.10);
      --tint-border: rgba(226,96,15,.30);
      --pro: #D4A050;
      --pro-ink: #241A08;
      --bub-out: rgba(226,96,15,.10);
      --bub-out-border: rgba(226,96,15,.30);
    }
  }

  .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;
  }
  /* أيقونة قائمة بذاتها — ٢٢ بكسل بسماكة ٢ داخل رقاقة ٤٤×٤٤ */
  .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.danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
  }
  .icon-chip.success {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
    color: var(--success);
  }
  .icon-chip.signal-only {
    width: auto; height: auto; border: 0; background: none;
    color: var(--signal); padding: 0; margin-bottom: 6px;
  }
  .icon-chip.signal-only .icon { width: 20px; height: 20px; }
  /* حرف حسابك على زرّ الإعدادات — على نمط `pro-badge`، بلا كلفة عرض */
  .head-icon-wrap { position: relative; display: inline-flex; flex: none; }
  .me-badge {
    position: absolute; inset-inline-start: -3px; top: -3px;
    min-width: 18px; height: 18px; border-radius: 6px; padding: 0 3px;
    background: var(--signal); color: var(--on-signal);
    border: 2px solid var(--ink-1);
    /* عربيٌّ غالباً: لا `--f-mono` ولا مباعدة (الثابت ٨) */
    font-family: var(--f-disp); font-size: 11px; line-height: 15px;
    text-align: center; pointer-events: none;
  }
  .me-badge.hidden { display: none; }

  /* بطاقة «مَن أنت» — أول ما تراه العين في الإعدادات */
  .whoami {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
  }
  .whoami.hidden { display: none; }
  .whoami-mark {
    width: 44px; height: 44px; border-radius: 14px; flex: none;
    display: grid; place-items: center;
    background: var(--signal); color: var(--on-signal);
    /* الحرف عربيّ غالباً — فلا ‎--f-mono‎ ولا مباعدة (الثابت ٨) */
    font-family: var(--f-disp); font-size: 1.3rem; line-height: 1;
  }
  /* ‎min-width: 0‎ تلغي حدّ ‎min-content‎، وبدونها يفيض بريدٌ طويل عن الصفّ
     بدل أن يُقصّ بـ‎ellipsis‎ (الثابت ١٤). */
  .whoami-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .whoami-hi {
    font-family: var(--f-disp); font-weight: 400; font-size: 1.15rem; color: var(--ash);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .whoami-mail {
    font-family: var(--f-mono); font-size: 12px; color: var(--ash-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .plan-card {
    background: var(--tint-bg); border: 1px solid var(--tint-border);
    border-radius: 20px; padding: 16px; box-shadow: var(--lift);
    margin-bottom: 18px;
  }
  .plan-card.hidden { display: none; }
  .plan-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  }
  .plan-card-title {
    font-family: var(--f-disp); font-weight: 400; font-size: 1.35rem; color: var(--ash);
  }
  .plan-card-expiry { font-size: 12.5px; color: var(--ash-dim); margin-top: 2px; }
  .plan-card-badge {
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: 1px; color: var(--on-signal); background: var(--signal);
    border-radius: 6px; padding: 3px 8px; flex: none;
  }
  /* ستّ بلاطاتٍ في مساحة الثلاث السابقة (٣ أكتوبر ٢٠٢٦): الأيقونة بجوار الرقم لا
     فوقه في رقاقةٍ ٣٤ بكسلاً، والحشوة أضيق — صفّان بنحو ارتفاع الصفّ القديم. */
  .plan-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px;
  }
  .plan-stat {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 8px 4px; text-align: center; min-width: 0;
  }
  .plan-stat-top {
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .plan-stat-top .icon { width: 15px; height: 15px; color: var(--signal); flex: none; }
  .plan-stat-val {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    font-size: 15px; font-weight: 700; color: var(--ash); white-space: nowrap;
  }
  .plan-stat-label {
    display: block; font-size: 11.5px; color: var(--ash-faint); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* ⚠️ **الوحدة على خطّ النصّ لا الأحاديّ** — الثابت ٨: «يوم» على `--f-mono` كانت
     تسقط إلى خطّ النظام فتخرج ممطوطةً «يـوم» (لقطة المالك، ٣ أكتوبر ٢٠٢٦). */
  .plan-unit {
    font-family: var(--f-body); font-size: 11px; font-weight: 400;
    color: var(--ash-faint); letter-spacing: 0;
  }
  /* العمود الثاني في بطاقة المجاني: ما يعطيه Pro تحت كل رقم. */
  .plan-stat-pro {
    display: block; font-size: 10.5px; font-weight: 700; color: var(--signal);
    margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .empty-nudge { margin-top: 14px; font-size: .92rem; }
  /* مكانُها محجوزٌ من لحظة فتح البطاقة لا من وصول الاسم (البند ١، ٢٥ سبتمبر
     ٢٠٢٦): ‎visibility‎ لا ‎display‎ فالمساحة تبقى، وزرّ «أدخله غرفتي» تحتها لا
     يتحرّك إن وصل الاسم بعد لحظةٍ من ضغطةٍ محتملة. */
  .handoff-who {
    font-size: .86rem; color: var(--dim);
    background: var(--soft-2); border-radius: 10px; padding: 8px 11px;
    margin: 8px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    visibility: hidden; opacity: 0;
    transition: opacity var(--t-2) var(--e-out);
  }
  .handoff-who.show { visibility: visible; opacity: 1; }

  /* ============ ورقة المشاركة ============ */
  .share-list {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
  }
  .share-list li {
    display: flex; align-items: baseline; gap: 8px;
    background: var(--soft-2); border-radius: 10px; padding: 9px 11px;
    font-size: .88rem; color: var(--text);
  }
  .share-list .share-what {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* لاتينيّ وأرقام — الثابت ٨: الأحادي لهما وحدهما */
  .share-list .share-size {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    font-size: .78rem; color: var(--ash-faint); flex: none;
  }
  .share-actions { display: flex; gap: 8px; margin-top: 12px; }
  /* الثابت ١٤: `.btn` فيها `width: 100%`، فداخل صفّ فليكس يلزمها هذا الثلاثيّ
     — وإلا حجز الزرّ عرض الصفّ كاملاً ورفض الانكماش فأفاض جاره عن الشاشة. */
  .share-actions .btn { margin-top: 0; flex: 1 1 0; width: auto; min-width: 0; }

  .plan-card-actions { display: flex; gap: 8px; margin-top: 14px; }
  .plan-card-actions .btn {
    margin-top: 0; flex: 1 1 0; width: auto; min-width: 0;
    text-decoration: none;
  }
  .icon-chip.sm {
    width: 34px; height: 34px; border-radius: 11px;
  }
  .icon-chip.sm .icon { width: 19px; height: 19px; }
  .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;
  }
  /* أيقونة مشاركة آيفون داخل النص — بلا اتجاه (أسفل/أعلى)، فالموضع يختلف بين جهاز وآخر */
  .share-glyph {
    width: 1.15em; height: 1.15em; margin: 0 .15em;
    vertical-align: -0.2em;
  }

  body {
    font-family: var(--f-body);
    background: var(--ink-0);
    color: var(--text); min-height: 100vh; line-height: 1.7;
    padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 24px);
  }
  header { text-align: center; padding: 24px 0 16px; position: relative; } /* مرساة حبّة اللغة في الزاوية */
  h1 {
    font-family: var(--f-disp);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ash);
  }
  #unpaired > h2 { font-family: var(--f-disp); font-weight: 400; font-size: 1.25rem; }

  /* نقطة نابضة قبل حالة الاتصال / الطرف الآخر — CSS فقط فلا يمسّ الجافاسكربت */
  .status, .peer {
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .status::before, .peer::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--ash-faint);
    animation: pulseGlow 2s ease-in-out infinite;
  }
  .status.on::before, .peer.on::before { background: var(--signal); }
  .status.off::before { background: var(--ash-faint); animation: none; }
  @keyframes pulseGlow {
    0%, 100% { opacity: .55; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.2); }
  }

  .status { font-size: .85rem; color: var(--dim); margin-top: 4px; }
  .status.on { color: var(--ok); }
  .status.off { color: var(--err); }
  .card {
    background: var(--ink-1); border: 1px solid var(--border);
    border-radius: var(--r); padding: 16px; margin-bottom: 14px;
    box-shadow: var(--lift);
  }
  .card.tint {
    background: var(--tint-bg); border-color: var(--tint-border);
  }
  h2 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: .4em; }
  .list-head h2 { margin-bottom: 0; }
  textarea, input[type=text], input[type=password], input[type=email] {
    width: 100%; background: var(--field); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px; color: var(--text);
    font-family: inherit; font-size: 1rem; resize: vertical;
  }
  textarea:focus-visible, input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=email]:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 2px;
  }
  .paste-preview {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; padding: 8px;
    background: var(--soft-2); border: 1px solid var(--border);
    border-radius: 10px;
  }
  .paste-preview img {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: 8px; flex: none;
  }
  .paste-preview .paste-clear {
    border: 0; background: var(--soft); color: var(--text);
    border-radius: 8px; min-width: 44px; min-height: 44px;
    font-size: 1.1rem; font-family: inherit; cursor: pointer;
  }
  .paste-preview .paste-label {
    flex: 1; font-size: .88rem; color: var(--dim);
  }
  .btn {
    display: flex; align-items: center; justify-content: center; gap: .4em;
    width: 100%; border: 0; border-radius: 12px;
    padding: 14px; font-size: 1rem; font-family: inherit; font-weight: 600;
    color: var(--on-signal); background: var(--signal); margin-top: 10px;
    transition: transform var(--t-1) var(--e-out), background var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft), opacity var(--t-2) var(--e-soft);
  }
  .btn:disabled { opacity: .6; }
  .btn:active { transform: scale(.98); }
  .btn:focus-visible,
  .mini:focus-visible,
  .linky:focus-visible,
  .paste-clear:focus-visible,
  .x:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 3px;
  }
  .btn.ghost {
    background: var(--soft-2); color: var(--text);
    border: 1.5px solid var(--line);
  }
  /* الفعل الوحيد البارز في شاشةٍ ما فعل صاحبها شيئاً بعد */
  .btn.lg { padding: 17px; font-size: 1.06rem; border-radius: 14px; }

  /* ============ شاشة غير المربوط ============ */
  .lead-note { font-size: .9rem; color: var(--dim); line-height: 1.65; }

  /* ===== خريطة الزائر البارد — الخطوات الثلاث في #unpaired ===== */
  /* ترقيمٌ بعدّاد لا بعلامة المتصفح: الرقم غربيّ وبلون الإشارة، والصفّ يبقى
     كتلةً عادية يدخل فيها زرٌّ وحقلٌ بلا أن يرثا هامش القائمة. */
  .steps { list-style: none; counter-reset: step; margin: 14px 0 0; padding: 0; }
  .steps > li {
    counter-increment: step; position: relative;
    padding-inline-start: 38px; padding-bottom: 16px;
  }
  .steps > li + li { border-top: 1px solid var(--border); padding-top: 14px; }
  .steps > li::before {
    content: counter(step);
    position: absolute; inset-inline-start: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--signal); color: var(--on-signal);
    font-family: var(--f-mono); font-size: .85rem; font-weight: 700;
  }
  .steps > li + li::before { top: 14px; }
  .steps > li > b { display: block; font-size: .98rem; margin-bottom: 6px; }
  .steps > li > .lead-note { margin-bottom: 10px; }
  .steps > li > .btn { margin-top: 2px; }
  /* سطر التغذية الراجعة فارغٌ في الغالب — وهو يحجز سطراً وهامشاً تحت الزرّ
     فيبدو فراغاً ميتاً قبل الفاصل (كما `#fb:empty`، الثابت ١٣) */
  .steps > li > .feedback:empty { margin-top: 0; min-height: 0; }
  .step-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .step-row a { color: var(--link); font-size: .92rem; }
  /* باهتة: خطوةٌ تُوصَف ولا تُطلب — رقمها بلون الأرضية لا الإشارة */
  .steps > li.faint { color: var(--dim); padding-bottom: 4px; }
  .steps > li.faint::before { background: var(--soft); color: var(--dim); }
  .steps > li.faint > b { font-weight: 600; color: var(--dim); margin-bottom: 2px; }
  .step-note { font-size: .85rem; line-height: 1.6; }
  /* نصّ الخطوة ٣ يتبع الجهاز: env.js تضع `ios` على الجذر، والنصّان في الوسم */
  html.ios .not-ios, html:not(.ios) .ios-only { display: none; }
  html:not(.pc) .pc-only { display: none; }
  .step-row .quiet-link { flex-basis: 100%; color: var(--dim); font-size: .85rem; }

  .alt-entry { margin-top: 16px; }
  .alt-entry > summary {
    font-size: .9rem; color: var(--dim); cursor: pointer;
    /* ٤٤ نقطة كهدف لمس — الملخّص العاري كان أقصر من الإصبع */
    min-height: 44px; display: flex; align-items: center; gap: 8px;
    list-style: none;
  }
  /* علامة السهم الافتراضية تختفي عملياً في التخطيط اليميني، فيبدو الملخّص
     نصّاً ميتاً لا مفتاحَ طيّ. وسهمٌ صريح يدور عند الفتح يقول ما يفعل. */
  .alt-entry > summary::-webkit-details-marker { display: none; }
  /* والاتجاه رأسيّ لا أفقيّ — فالحدود **فيزيائية** لا منطقية: سهمٌ أفقيّ
     ينعكس مع RTL فيلتبس معناه، وسهمُ «لأسفل ينفتح» لا يلتبس في أي اتجاه. */
  .alt-entry > summary::after {
    content: ''; width: 7px; height: 7px; flex: none;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t-2) var(--e-soft);
  }
  .alt-entry[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .alt-note { font-size: .85rem; color: var(--dim); margin: 8px 0; line-height: 1.6; }
  .code-input { text-align: center; letter-spacing: 1px; }
  .restore-card {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .set-note.warn { color: var(--ash-dim); }
  .set-note.warn strong { color: var(--text); }
  /* أيقونات الأزرار النصّية التي يعيد الجافاسكربت كتابة نصّها — ::before ينجو من textContent */
  #signoutPcBtn::before {
    content: '';
    width: 1em; height: 1em; flex: none;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
  }
  #signoutPcBtn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='9' height='16' rx='1.5'/%3E%3Cpath d='M13 12h8M18 8l4 4-4 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='9' height='16' rx='1.5'/%3E%3Cpath d='M13 12h8M18 8l4 4-4 4'/%3E%3C/svg%3E");
  }
  .field-row { display: flex; gap: 10px; align-items: stretch; }
  .field-row.wrap { flex-wrap: wrap; }
  .field-row .btn { margin-top: 0; }
  .feedback { font-size: .88rem; margin-top: 10px; min-height: 1.2em; }
  .feedback.ok { color: var(--ok); } .feedback.err { color: var(--err); }
  ul { list-style: none; }
  li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  li:last-child { border-bottom: 0; }
  .ic { font-size: 1.2rem; display: inline-flex; align-items: center; }
  .ic .icon { width: 1.15em; height: 1.15em; }
  .bd { flex: 1; min-width: 0; }
  .lb { word-break: break-word; font-size: .95rem; }
  a.lb { color: var(--link); }
  .tm { font-size: .75rem; color: var(--dim); margin-top: 2px; }
  /* ٤٤ نقطة هو أصغر هدف لمس توصي به آبل — وما دونه يُخطئه الإصبع الكبير */
  .mini {
    border: 0; background: var(--soft); color: var(--text);
    border-radius: 8px; padding: 8px 14px; font-size: .8rem; font-family: inherit;
    min-height: 44px; flex: none;
  }
  .mini:active { transform: scale(.98); }
  .mini.danger-btn {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
  }
  #deviceList .set-row { cursor: default; }
  #deviceList .set-row:last-child { border-bottom: 0; }
  /* خيار ثانوي: نصٌّ يُضغَط. والهدف اللمسي يبقى ٤٤ نقطة رغم صِغَر خطّه. */
  .linky {
    display: block; width: 100%; border: 0; background: none;
    color: var(--dim); font-family: inherit; font-size: .88rem;
    text-decoration: underline; min-height: 44px; margin-top: 4px;
  }
  .empty { color: var(--dim); text-align: center; padding: 16px 20px; }
  .empty-inner { max-width: 280px; margin: 0 auto; }
  .empty-icons {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 20px;
  }
  .empty-device { width: 64px; height: 52px; border-radius: 14px; }
  .empty-device .icon { width: 26px; height: 26px; }
  .empty-device.signal {
    width: 52px; height: 52px; border-radius: 16px;
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border-color: var(--tint-border); color: var(--signal);
  }
  .empty-line {
    width: 52px; height: 2px; flex: none;
    background: repeating-linear-gradient(
      90deg, var(--signal) 0 6px, transparent 6px 12px
    );
  }
  .empty-title {
    font-family: var(--f-disp); font-weight: 400; font-size: 1.5rem;
    color: var(--ash); line-height: 1.3; margin-bottom: 6px;
  }
  .empty-desc {
    font-size: .84rem; color: var(--ash-dim); line-height: 1.75;
  }
  .empty-action {
    display: inline-flex; width: auto; margin-top: 18px;
    padding: 0 18px; min-height: 48px; gap: 8px;
  }
  .empty-action .icon { width: 19px; height: 19px; stroke-width: 2.2; }
  code {
    display: block; direction: ltr; text-align: left; word-break: break-all;
    background: var(--code-bg); border-radius: 8px; padding: 10px;
    font-size: .78rem; margin: 8px 0;
    font-family: var(--f-mono);
  }
  ol { padding-inline-start: 20px; font-size: .9rem; }
  ol li { display: list-item; border: 0; padding: 4px 0; }
  /* ٤٤ نقطة كما ‎.mini‎ و‎.linky‎ — والملخّص كان ٢٤ بكسل وحدها، وهو هدف
     «أو عندي رمز من الكمبيوتر» وكل بطاقات المساعدة. */
  details summary {
    cursor: pointer; font-size: .95rem; font-weight: 600;
    display: flex; align-items: center; gap: .4em;
    min-height: 44px;
  }
  .warn {
    font-size: .8rem; color: var(--dim); margin-top: 12px; line-height: 1.6;
  }
  .warn .icon { margin-inline-end: .25em; }
  .banner {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--signal);
    border-radius: var(--r);
    padding: 16px; margin-bottom: 14px;
    /* دخولٌ وخروجٌ بتلاشٍ وانزلاقٍ خفيف لا قطعٍ مباشر (البند ٤، ٢٥ سبتمبر
       ٢٠٢٦): notice.js تحكم طابور اللافتات الأربع بهذين الصنفين، وpair.js
       تحكم بهما بطاقة «متصفح يطلب الدخول» خارج الطابور. */
    transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out);
  }
  .banner.pre-enter, .banner.leaving { opacity: 0; transform: translateY(-6px); }
  .banner strong {
    display: flex; align-items: center; gap: .4em;
    font-size: 1.02rem; color: var(--ash);
  }
  .banner p { font-size: .86rem; color: var(--ash-dim); margin: 4px 0 12px; }
  .banner .btn { background: var(--signal); color: var(--on-signal); }
  .banner .btn.ghost { background: var(--soft-2); color: var(--text); }
  /* زرّان في صفّ: الرئيسي أعرض — و`flex: 1 1 0` مع `width: auto` لا `flex: none` (الثابت ١٤) */
  .banner-row { display: flex; gap: 8px; }
  .banner-row .btn { flex: 2 1 0; width: auto; min-width: 0; }
  .banner-row .btn.ghost { flex: 1 1 0; }
  .share h2 { display: flex; gap: 8px; align-items: center; }
  .spin {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    border: 2px solid var(--spin-track); border-top-color: var(--spin-head);
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hidden { display: none; }

  /* شاشة تثبيت الآيفون — تحلّ محل التطبيق في سفاري. بلا --signal: ليست إرسالاً ولا اتصالاً حيّاً */
  body.coach-open { padding: 0; }
  .ios-coach {
    position: fixed; inset: 0; z-index: 30;
    background: var(--ink-0);
    padding: env(safe-area-inset-top) 24px calc(env(safe-area-inset-bottom) + 28px);
    overflow: auto;
    display: flex; flex-direction: column; justify-content: center;
  }
  .ios-coach.hidden { display: none; }
  /* وصولٌ من «غير مربوط» ظاهرٍ فعلاً إلى المحادثة أو مدرّب الآيفون — لا عند
     الإقلاع أو إعادة التحميل (البند ٢، ٢٥ سبتمبر ٢٠٢٦). `replay` في
     platform.js تضع الصنف بعد إعادة تدفّقٍ وتنزعه بمهلة؛ وpair.js/install.js
     يفحصان أن «غير مربوط» كان ظاهراً قبل النداء فلا تصل الحركة الإقلاع. */
  @keyframes pairedReveal {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  #app.paired-in, .ios-coach.paired-in { animation: pairedReveal var(--t-4) var(--e-out); }
  .ios-coach-inner { max-width: 420px; margin: 0 auto; width: 100%; }
  .ios-coach h1 {
    font-family: var(--f-disp); font-weight: 400; font-size: 1.85rem;
    text-align: center; margin-bottom: 8px;
  }
  .ios-coach .lead {
    text-align: center; color: var(--dim); font-size: .95rem; margin-bottom: 18px;
  }
  .coach-steps {
    margin: 0 0 16px; padding-inline-start: 1.4em;
    font-size: .95rem;
  }
  .coach-steps li {
    display: list-item; border: 0; padding: 8px 0;
    align-items: flex-start;
  }
  .coach-steps li.done { color: var(--dim); }
  .coach-steps-new { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .coach-step {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border-radius: 16px;
    background: var(--ink-1); border: 1px solid var(--line);
    box-shadow: var(--lift);
  }
  .coach-step.done { color: var(--ash-dim); }
  .coach-step.done .coach-step-num {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    color: var(--success);
  }
  .coach-step.current {
    flex-direction: column; align-items: stretch;
    background: var(--tint-bg); border-color: var(--tint-border);
    box-shadow: var(--lift), 0 0 0 4px color-mix(in srgb, var(--signal) 6%, transparent);
  }
  .coach-step-head { display: flex; align-items: center; gap: 12px; }
  .coach-step-num {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-family: var(--f-mono); font-weight: 700; font-size: 15px;
    background: var(--ink-2); border: 1px solid var(--line); color: var(--ash-faint);
  }
  .coach-step-num .icon { width: 19px; height: 19px; stroke-width: 2.4; }
  .coach-step-title { font-size: 15px; font-weight: 700; color: var(--ash); }
  .coach-step-text { flex: 1; font-size: 14px; color: var(--ash); line-height: 1.55; }
  .coach-share-demo {
    display: flex; align-items: center; gap: 14px; margin-top: 14px;
    background: var(--ink-0); border: 1px solid var(--line);
    border-radius: 14px; padding: 12px 14px;
  }
  .coach-share-demo .icon-chip { width: 52px; height: 52px; border-radius: 15px;
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    border-color: var(--tint-border); color: var(--signal);
  }
  .coach-share-demo .icon { width: 30px; height: 30px; }
  .coach-share-note { font-size: 12.5px; color: var(--ash-dim); line-height: 1.7; }
  .coach-help {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--r); padding: 12px 14px; margin: 8px 0 12px;
    font-size: .88rem; color: var(--dim);
  }
  .coach-help p { margin: 0 0 8px; }
  .coach-help p:last-child { margin-bottom: 0; }
  .coach-help .path {
    line-height: 1.8;
  }
  .coach-help .path [dir=ltr] {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* ===== وضع الدخول — شاشة قائمة بذاتها ===== */
  /*
    ⚠️ **وهي داكنة دائماً.** هذه الشاشة تُفتح في **متصفّح الكمبيوتر** من تبويب
    تفتحه الإضافة — والإضافة داكنة دائماً (§«نظام التصميم»). فكانت تتبع
    `prefers-color-scheme` فتخرج بيضاء ناصعة في منتصف تدفّقٍ بدأ من واجهة
    داكنة، فتبدو موقعاً آخر لا امتداداً للإضافة. والتطبيق نفسه يبقى بلوحتيه —
    وضع الدخول وحده هو المستثنى، وهو ليس «التطبيق» أصلاً بل بابه.
    (وقيمُ الرموز هنا نسخةٌ من اللوحة الداكنة في رأس الملف، لا اجتهاد فيها.)
  */
  body.login-mode {
    color-scheme: dark;
    --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: #EFE7DB; --ash-dim: #A99C89; --ash-faint: #9A8D7A;
    --signal: #FF7A34; --signal-soft: #FFB27A; --signal-glow: rgba(255,122,52,.38);
    --success: #5FB88C; --danger: #E2564A; --link: #8FBFEA;
    --card: rgba(255,255,255,.05);
    --field: rgba(0,0,0,.25);
    --code-bg: rgba(0,0,0,.35);
    --code-ink: var(--signal);
    --soft: rgba(255,255,255,.1);
    --soft-2: rgba(255,255,255,.08);
    --spin-track: rgba(255,255,255,.25);
    --spin-head: var(--ash);
    --lift: inset 0 1px 0 rgba(255,255,255,.045);
    --tint-bg: rgba(255,122,52,.10);
    --tint-border: rgba(255,122,52,.28);
    --pro: #F0C070;
    --bub-out: rgba(255,122,52,.10);
    --bub-out-border: rgba(255,122,52,.26);
    --text: var(--ash);
    --dim: var(--ash-dim);
    --border: var(--line);
    --ok: var(--success);
    --err: var(--danger);
    background: var(--ink-0);
    min-height: 100vh;
  }

  /* توهّج واحد خافت خلف البطاقة — ضوءٌ لا تدرّج (الهوية بلا تدرّجات) */
  body.login-mode::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(60rem 30rem at 50% -12%, rgba(255,122,52,.10), transparent 70%);
  }

  body.login-mode #unpaired > p,
  body.login-mode #showCodeBtn,
  body.login-mode #codeShow,
  body.login-mode #showFb,
  body.login-mode #unpaired > details,
  body.login-mode #unpaired > .diag { display: none; }

  /* ⚠️ **خريطة الزائر البارد تُخفى كلّها بهذا السطر — وهو الوجه المقلوب
     للاستثناء أدناه.** القواعد أعلاه محدِّدات ابنٍ مباشر تعتمد على هيكل
     الشجرة: حاوية `.steps` ليست `p` ولا `details` فلا تصيبها، و`lead-note`
     صارت داخلها فأفلتت من `> p`. فبلا هذا السطر يقرأ من فتح تبويب الدخول
     **من إضافته**: «ثبّت Sendover على كمبيوترك». والقاعدة: كل أخٍ جديد في
     `#unpaired` يُدرَج هنا، أو يُدرَج داخل ما هو مُدرَج. */
  body.login-mode #unpaired > .steps { display: none; }

  /* ⚠️ **استثناءٌ للقاعدة أعلاه، وبدونه لا دخول أصلاً.**
     `#restoreCard` — وهو نموذج الدخول كلّه: جوجل والبريد والرمز — يعيش داخل
     `details.alt-entry` («طرق دخول أخرى»). والسطر أعلاه يخفي ذاك الـ`details`،
     فيموت النموذج معه: صفحةُ `?login=1` تخرج **برأسها وحده** بلا زرٍّ ولا حقل،
     ولا خطأ في الطرفية يدلّ عليه. قِيس على المنشور ٤ سبتمبر ٢٠٢٦.
     فيُستثنى هنا، ويبقى ما عداه داخله مخفياً: هذه الصفحة **بابُ حساب** لا
     شاشةُ ربط، فمُدخَل مفتاح الغرفة وملخّصُ «طرق أخرى» لا محلّ لهما فيها. */
  body.login-mode #unpaired > details.alt-entry { display: block; margin-top: 0; }
  body.login-mode #unpaired > details.alt-entry > summary,
  body.login-mode #unpaired > details.alt-entry > .alt-note,
  body.login-mode #unpaired > details.alt-entry > #pairInput,
  body.login-mode #unpaired > details.alt-entry > #pairBtn,
  body.login-mode #unpaired > details.alt-entry > #pairFb { display: none; }

  /* البطاقة تتوسّط الصفحة بدل أن تعلق في أعلى عمود فارغ عريض */
  body.login-mode #unpaired,
  body.login-mode #loginDone {
    position: relative; z-index: 1;
    max-width: 25rem; margin: 8vh auto 0; padding: 26px 22px;
    background: var(--ink-1); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--lift);
  }
  body.login-mode #unpaired > h2 { display: none; }
  body.login-mode #loginDone { text-align: center; }
  body.login-mode #loginDone .login-head { margin-bottom: 14px; }
  /* الفقرتان تلتحمان بلا هذا فتُقرآن جملةً واحدة مشوّشة */
  body.login-mode #loginDone p + p { margin-top: 10px; }

  /* رأس الشاشة: العلامة نفسها التي في صفحات الخادم — امتدادٌ واحد لا شاشتان */
  .login-head { display: none; text-align: center; margin-bottom: 18px; }
  body.login-mode .login-head { display: block; }
  .login-brand {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  }
  .login-brand .mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--signal); color: var(--on-signal);
    display: grid; place-items: center;
  }
  .login-brand .mark .icon { width: 18px; height: 18px; stroke-width: 2.4; }
  .login-brand b {
    font-family: var(--f-disp); font-weight: 400;
    font-size: 1.15rem; letter-spacing: .2px; color: var(--ash);
  }
  /* `justify-content` لا `text-align`: عناوين البطاقات في هذا الملف صناديق
     فليكس (لأجل أيقونة بجوار النصّ)، فالمحاذاة النصّية لا تحرّكها. */
  .login-head h2 {
    font-family: var(--f-disp); font-weight: 400;
    font-size: 1.4rem; margin-bottom: 6px; color: var(--ash);
    display: flex; justify-content: center; text-align: center;
  }
  .login-head p { font-size: .9rem; color: var(--dim); margin: 0; }

  /* في وضع الدخول تسقط زخارف الاستعادة: العنوان أعلاه يقولها مرّة */
  body.login-mode #restoreCard {
    margin-top: 0; padding-top: 0; border-top: 0;
  }
  body.login-mode #restoreCard > .set-label { display: none; }
  /* الرأس يقول الغرض سلفاً — تُترك الملاحظة لتحذيرها وحده (انظر `startLoginMode`) */
  body.login-mode #restoreCard > .set-note { margin-top: 0; }

  /* فاصل «أو» بين البريد وجوجل — بدونه يبدو الزرّان مسارين متنافسين.
     يعيش **داخل** `[data-google-login]` فيذهب معها حيث يُخفى جوجل (آيفون
     المثبَّت) بلا محدِّد جارٍ يعتمد على ترتيب الشجرة. */
  .or-sep {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 10px; color: var(--ash-faint); font-size: .8rem;
  }
  .or-sep::before, .or-sep::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
  }
  [data-google-login].hidden { display: none; }
  /* زرّ جوجل: العلامة بألوانها على طرف البداية والنصّ بعدها — كما تعرضه
     صفحات الدخول التي اعتادها الناس، فيُقرأ من شكله قبل نصّه */
  .btn.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  }
  .btn.g-btn .icon { width: 20px; height: 20px; flex: none; }

  /* صفّ إعادة الإرسال: مؤقّت ظاهر بدل زرٍّ يُضغط فيُردّ بـ«أرسلت الكثير» */
  .resend-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 10px; font-size: .82rem; color: var(--ash-faint);
  }
  .resend-row button {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: inherit;
    color: var(--signal); text-decoration: underline; text-underline-offset: 3px;
  }
  .resend-row button[disabled] {
    color: var(--ash-faint); text-decoration: none; cursor: default;
  }

  /* تأكيد نقل ملكية غرفة — لا يقع صمتاً، فله بطاقته */
  .takeover {
    margin-top: 12px; padding: 12px 14px; border-radius: var(--r);
    background: var(--tint-bg); border: 1px solid var(--tint-border);
  }
  .takeover p { font-size: .86rem; color: var(--text); margin: 0 0 10px; line-height: 1.6; }

  /* ===== شريط تقدّم النقل ===== */
  /* فيديو ٨٠ ميجا على شبكة خلوية كان زراً صامتاً لدقائق — لا يُعرف أيتقدّم أم
     علّق. والشريط في **الفقاعة** لا تحت المُنشئ: هناك ينظر المستخدم. */
  .bar {
    position: relative;
    height: 4px; border-radius: 999px; background: var(--soft);
    overflow: hidden; flex: 1 1 auto; min-width: 0;
  }
  .bar > i {
    display: block; height: 100%; width: 0; background: var(--signal);
    transition: width var(--t-2) 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-row {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
  }
  /* الفقاعة تُقاس باسم الملف، وقد يكون قصيراً — فيبقى للشريط عشرون بكسل لا
     تقول شيئاً. فحدٌّ أدنى للاثنين. */
  .bub:has(.xfer-row) { min-width: 200px; }
  .xfer-row .bar { min-width: 60px; }
  .xfer-row.hidden { display: none; }
  /* الأرقام على الأحادي بعرضٍ ثابت — وإلا اهتزّ الصفّ مع كل تكّة (الثابت ٨) */
  .xfer-pct {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    direction: ltr; font-size: 11px; color: var(--ash-faint);
    min-width: 34px; text-align: left; flex: none;
  }
  .xfer-x {
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; padding: 0; border-radius: 50%;
    background: none; border: 0; color: var(--ash-faint); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .xfer-x .icon { width: 15px; height: 15px; }
  .xfer-x:active { opacity: .6; }

  /* هيكل الصورة أثناء جلبها — بديل الإطار الفارغ */
  .bub-skel {
    position: relative; width: 180px; height: 130px; border-radius: 8px;
    background: var(--soft); overflow: hidden;
    display: flex; align-items: flex-end; padding: 8px;
  }
  .bub-skel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--shimmer), 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; }
  .bub .xfer-row .bar { background: color-mix(in srgb, var(--ash) 22%, transparent); }

  /* ===== حالة الطرف الآخر ===== */
  .peer { font-size: .8rem; color: var(--dim); margin-top: 2px; }
  .peer.on { color: var(--ok); }

  /* ===== وصول عنصر جديد — M2 ===== */
  @keyframes arrive {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: none; }
  }
  /* اتجاه انزلاق الطبقات: أزرار فتحها (`#headActions`) آخرَ صفّ الرأس — يساراً
     بالعربية (RTL: نهاية السطر فعلياً يمين) ويميناً بالإنجليزية، كما `--view-end`
     في popup.css حرفاً. `-1` هو اتجاه ‎translateX‎ السلبي الفيزيائي (يسار) وهو
     ما كانت ‎viewInX‎ مقفلةً عليه دائماً — فصحّ بالعربية وحدها وانقلب بالإنجليزية. */
  :root { --view-end: -1; }
  :root[dir="ltr"] { --view-end: 1; }
  /* انتقال الشاشات: كل عنصرٍ داخل الشاشة يتحرّك، وكان الانتقال الأكبر وحده
     قطعاً مباشراً. الإعدادات ولوح الوسائط من جهة زرّاهما (`--view-end`)، والبحث
     من الأعلى (حيث حقله). وكتلة تقليل الحركة تُطفئها مع البقية. */
  @keyframes viewInX {
    from { opacity: 0; transform: translateX(calc(var(--view-end) * 24px)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes viewInY { from { transform: translateY(-14px); } to { transform: none; } }
  #settingsView:not(.hidden), .media-view:not(.hidden) { animation: viewInX var(--t-3) var(--e-out); }
  .search-view:not(.hidden) { animation: viewInY var(--t-3) var(--e-out); }
  /* رجوعٌ قصير إلى المحادثة بعد إغلاق طبقة (إعدادات/وسائط/بحث): الطبقة تُخفى
     فوراً (`settings.js`/`media.js`/`search.js` › close*)، والعودة وحدها
     تتحرّك — من الجهة المقابلة لدخول الطبقة، مرآةً لـ‎in-start‎/‎in-end‎ في
     الإضافة. `replay()` في platform.js تضع الصنف وتنزعه. */
  @keyframes viewBackX {
    from { opacity: 0; transform: translateX(calc(var(--view-end) * -14px)); }
    to { opacity: 1; transform: none; }
  }
  #chatMain.view-return { animation: viewBackX var(--t-2) var(--e-out); }
  /* تلميح الضغطة المطوّلة — مرّةً تحت أول فقاعة واردة، ويذهب بأول استعمال. */
  .lp-hint {
    align-self: center; font-size: 12px; color: var(--dim);
    background: var(--soft-2); border-radius: 999px; padding: 5px 12px;
    margin: 0 0 8px;
  }
  @keyframes ringFade {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 34%, transparent); }
    to { box-shadow: 0 0 0 9px transparent; }
  }
  @keyframes popCheck {
    0%, 30% { transform: scale(.4); opacity: 0; }
    44% { transform: scale(1.14); opacity: 1; }
    56%, 100% { transform: scale(1); opacity: 1; }
  }
  .list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .x {
    border: 0; background: none; color: var(--dim);
    font-size: 1rem; font-family: inherit; padding: 8px; min-height: 44px; flex: none;
  }

  /* ===== رمز الدخول المعروض ===== */
  /* يُقرأ عن شاشة جوال ويُكتب على لوحة مفاتيح كمبيوتر — فكِبَره وتباعده أهم من
     أناقته. ومجموعتان من أربعة: العين لا تمسك ثمانية أرقام متلاصقة. */
  .code-show {
    text-align: center;
    background: var(--tint-bg); border: 1px solid var(--tint-border);
    border-radius: 20px; box-shadow: var(--lift);
    padding: 18px 16px 16px; margin: 12px 0 4px;
  }
  /* ⚠️ العرض يتبع الشاشة لا رقماً صلباً: ثمانية صناديق بـ٣٨ بكسل وفجواتها
     تحتاج ٣٥٢ بكسل، والبطاقة على آيفون (٣٧٥) تعطي ٣٠٩ — فكانت تفيض عن
     حافّتيها، وعلى ٣٢٠ عن الشاشة نفسها. قِيس ٤ سبتمبر ٢٠٢٦. */
  .code-show .digits {
    display: flex; gap: clamp(8px, 3vw, 12px); justify-content: center; direction: ltr;
    min-width: 0;
  }
  .code-show .digit-group {
    display: flex; gap: clamp(3px, 1.2vw, 6px); min-width: 0;
  }
  .code-show .digit-box {
    width: clamp(26px, 7.6vw, 38px); height: 52px; border-radius: 11px;
    background: var(--ink-2); border: 1px solid var(--tint-border);
    display: grid; place-items: center;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 6vw, 26px); font-weight: 700; line-height: 1;
    color: var(--code-ink);
    /* تموجٌ عبر الخانات الثماني حين يصل رمزٌ جديد فعلاً — لا كل تكّة (البند ٩،
       ٢٥ سبتمبر ٢٠٢٦): pair.js يبني ثمانية عناصر جديدة مع كل رمزٍ جديد وحده
       (أول ظهورٍ أو تجديدٍ صامت)، فظهورها من الصفر يكفي شرطاً — بلا حراسة
       إضافية. والمهلة بينها ‎animation-delay‎ مضبوطة من الجافاسكربت. */
    animation: digitIn var(--t-2) var(--e-out) backwards;
  }
  @keyframes digitIn {
    from { opacity: 0; transform: translateY(6px) scale(.9); }
    to { opacity: 1; transform: none; }
  }
  .code-show .ttl {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 14px; font-size: .82rem; color: var(--dim);
  }
  .code-show .ttl-bar {
    flex: 1; max-width: 200px; height: 4px; border-radius: 999px;
    background: var(--soft); overflow: hidden;
  }
  .code-show .ttl-bar > i {
    display: block; height: 100%; background: var(--signal); border-radius: 999px;
    transition: width var(--t-2) var(--e-soft);
  }
  .code-show .ttl-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--signal);
    animation: pulseGlow 2s ease-in-out infinite;
  }
  .code-show .ttl-text {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    direction: ltr;
  }

  /* ===== محادثة ===== */
  body.chat-mode {
    padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    position: fixed;
    top: var(--vvtop, 0px); right: 0; left: 0; bottom: auto;
    min-height: var(--vvh, 100dvh);
    height: var(--vvh, 100dvh);
    overflow: hidden;
  }
  /* لوحة المفاتيح تغطّي مؤشّر الشاشة الرئيسية، فحجزُ حصّته معها فراغٌ مضاعف
     أسفل المُنشئ. الصنف يضعه ‎main.js‎ من قياس المنفذ لا من افتراض. */
  body.chat-mode.kb-open { padding-bottom: 0; }
  body.chat-mode #siteHead { display: none; }
  #app:not(.hidden) {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    max-width: 720px; width: 100%; margin: 0 auto;
  }
  .chat-head {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px;
    border-bottom: 1px solid var(--border); background: var(--ink-1);
    box-shadow: var(--lift); flex: none;
  }
  .chat-head .head-actions { display: flex; gap: 6px; flex: none; }
  .chat-head.searching #headPeer,
  .chat-head.searching #headMeta,
  .chat-head.searching #headActions { display: none; }
  .chat-head .head-search {
    display: none; flex: 1; align-items: center; gap: 8px; min-width: 0;
  }
  .chat-head.searching .head-search { display: flex; }
  .search-field {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 0 12px; border-radius: 16px;
    background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--ash-faint);
  }
  .search-field .icon { width: 18px; height: 18px; flex: none; }
  .search-field input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    color: var(--ash); font: inherit; font-size: 14px; outline: none;
  }
  /* زرّ المسح زرّنا — لا يُرسم بجواره زرُّ المتصفح فيظهر ✕ مرّتين. */
  .search-field input::-webkit-search-cancel-button,
  .search-field input::-webkit-search-decoration {
    -webkit-appearance: none; appearance: none; display: none;
  }
  .search-clear {
    width: 22px; height: 22px; border-radius: 50%; padding: 0;
    border: 0; background: color-mix(in srgb, var(--ash) 10%, transparent);
    color: var(--ash-dim); display: grid; place-items: center; cursor: pointer; flex: none;
  }
  .search-clear .icon { width: 13px; height: 13px; }
  .search-view {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: var(--ink-0); opacity: 0;
    transition: opacity var(--t-1) ease-in;
  }
  .search-view.hidden { display: none; }
  .search-view.open { opacity: 1; transition: opacity 180ms var(--e-out); }
  .search-filters {
    display: flex; gap: 7px; padding: 11px 12px 9px; flex: none; overflow-x: auto;
  }
  .search-chip {
    /* ٤٠ لا ٣٤: هدفٌ يُضغط بالإبهام (كانت الوحيدة تحت الحدّ في التطبيق). */
    min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; border-radius: 999px; flex: none;
    background: var(--ink-1); border: 1px solid var(--line);
    color: var(--ash-dim); font: inherit; font-size: 12.5px; cursor: pointer;
  }
  .search-chip .icon { width: 14px; height: 14px; }
  .search-chip.on {
    background: var(--ink-3); border-color: var(--line-strong);
    color: var(--ash); font-weight: 600;
  }
  .search-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 16px 8px; font-size: 11.5px; color: var(--ash-faint); flex: none;
  }
  .search-index {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 11px;
  }
  .search-results {
    flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .search-hit {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px;
    border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line);
    color: inherit; font: inherit; text-align: start; cursor: pointer; width: 100%;
  }
  .search-hit.on {
    border-color: var(--tint-border);
    box-shadow: var(--lift);
  }
  .search-hit-ic {
    width: 36px; height: 36px; border-radius: 12px; flex: none;
    background: var(--ink-2); border: 1px solid var(--line);
    color: var(--ash-dim); display: grid; place-items: center;
  }
  .search-hit-ic.link {
    background: color-mix(in srgb, var(--link) 12%, transparent);
    border-color: color-mix(in srgb, var(--link) 24%, transparent);
    color: var(--link);
  }
  .search-hit-ic .icon { width: 19px; height: 19px; }
  .search-hit-body { flex: 1; min-width: 0; }
  .search-hit-title {
    display: block; font-size: 13.5px; line-height: 1.6; color: var(--ash);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .search-hit-title.mono {
    font-family: var(--f-mono); direction: ltr; text-align: left; font-size: 12.5px;
    color: var(--link);
  }
  .search-hit-title mark {
    background: color-mix(in srgb, var(--signal) 24%, transparent);
    color: var(--signal-soft); border-radius: 4px; padding: 0 2px;
  }
  .search-hit-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--ash-faint); margin-top: 2px;
  }
  .search-hit-time {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    direction: ltr; margin-inline-start: auto;
  }
  .search-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; background: var(--ink-1); border-top: 1px solid var(--line);
    flex: none; font-size: 12.5px; color: var(--ash-faint);
  }
  .search-nav-btns { display: flex; gap: 8px; }

  .media-view {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: var(--ink-0);
  }
  .media-view.hidden { display: none; }
  .chat-head.media-open { display: none; }
  .media-head {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: var(--ink-1); border-bottom: 1px solid var(--line); flex: none;
  }
  .media-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--ash); }
  .media-tabs {
    display: flex; background: var(--ink-1); flex: none; padding: 0 12px;
  }
  .media-tab {
    flex: 1; text-align: center; padding: 10px 0 9px;
    border: 0; border-bottom: 2px solid transparent;
    background: transparent; color: var(--ash-faint);
    font: inherit; font-size: 13px; cursor: pointer;
  }
  .media-tab.on {
    color: var(--ash); font-weight: 700;
    border-bottom-color: var(--signal);
  }
  .media-note {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 12px 0; padding: 10px 12px; border-radius: 14px;
    background: var(--ink-2); border: 1px solid var(--line);
    font-size: 11.5px; line-height: 1.6; color: var(--ash-dim); flex: none;
  }
  .media-note .icon { width: 17px; height: 17px; color: var(--success); flex: none; }
  .media-grid {
    flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .media-day { font-size: 11.5px; font-weight: 700; color: var(--ash-faint); margin: 0 2px; }
  .media-empty { color: var(--ash-faint); text-align: center; padding: 24px; }
  .media-grid .media-tile,
  .media-day + .media-tile { /* شبكة الصور داخل مجموعة اليوم عبر غلاف */ }
  .media-day { grid-column: 1 / -1; }
  #mediaGrid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; align-content: start;
  }
  #mediaGrid .media-day,
  #mediaGrid .media-row,
  #mediaGrid .media-empty { grid-column: 1 / -1; }
  .media-tile {
    aspect-ratio: 1; border-radius: 13px; position: relative; overflow: hidden;
    background: var(--ink-2); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--ash-faint);
  }
  .media-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .media-tile .icon { width: 22px; height: 22px; position: relative; z-index: 1; }
  /* الخانة زرٌّ حين تُفتح: تصفير مظهر الزرّ، والمؤشّر يقول «تُعرَض» */
  button.media-tile { padding: 0; font: inherit; cursor: zoom-in; }
  /* نبضٌ ما دام الحلّ معلّقاً — كألبوم الخيط (`.album-cell.loading`)، لا قفزة
     أيقونةٍ إلى صورة بلا مؤشّر (`media.js` › tileImage، المسار غير المتزامن). */
  .media-tile.loading { animation: imgWait 1.4s var(--e-soft) infinite; }
  /* والصورة تتلاشى داخلاً — المسار المتزامن (نسخة الكاش) يلصقها بلا وميض،
     فهذا وحده يستحقّ إعلاناً بصريّاً لأنه استغرق وقتاً فعلاً. */
  @keyframes mediaTileFade { from { opacity: 0; } to { opacity: 1; } }
  .media-tile img.fade-in { animation: mediaTileFade var(--t-2) var(--e-out); }
  /* زرّ الحفظ على الزاوية: الضغطة على الصورة تعرضها، وهذا وحده يحفظ */
  .media-save {
    position: absolute; top: 5px; inset-inline-start: 5px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  }
  .media-save .icon { width: 16px; height: 16px; }
  .media-ttl {
    position: absolute; inset-inline: 5px; bottom: 5px; z-index: 2;
    display: flex; justify-content: center;
    font-variant-numeric: tabular-nums;
    font-size: 9.5px; color: var(--ash);
    background: color-mix(in srgb, var(--ink-0) 72%, transparent);
    border-radius: 999px; padding: 2px 0;
  }
  .media-tile.expired { opacity: .55; filter: grayscale(.4); }
  .media-ended {
    position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2;
    font-size: 10px; padding: 2px 6px; border-radius: 6px;
    background: color-mix(in srgb, var(--ink-0) 72%, transparent); color: var(--ash-faint);
  }
  .media-row {
    display: flex; align-items: center; gap: 11px; padding: 12px;
    border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line);
    text-decoration: none; color: inherit;
  }
  /* صفّ الملف زرٌّ يحفظه، وصفّ الرابط `<a>` — والهيئة واحدة */
  button.media-row {
    width: 100%; font: inherit; text-align: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  button.media-row:active { opacity: .65; }
  /* زرّ الحفظ في صفّ الملف: يقف في طرف الصفّ لا فوق صورة — فلا موضعَ مطلقاً
     ولا ظلّ، وبلون الإشارة على أرضيّة ناعمة (الصفّ نفسه يفتح بالضغطة) */
  .media-row .media-save {
    position: static; flex: none; margin-inline-start: auto;
    background: var(--soft); color: var(--signal);
    width: 36px; height: 36px;
  }
  .media-row.expired { opacity: .6; }
  .media-row-ic {
    width: 36px; height: 36px; border-radius: 12px; flex: none;
    background: var(--ink-2); border: 1px solid var(--line);
    color: var(--ash-dim); display: grid; place-items: center;
  }
  .media-row-ic.link {
    background: color-mix(in srgb, var(--link) 12%, transparent);
    border-color: color-mix(in srgb, var(--link) 24%, transparent);
    color: var(--link);
  }
  .media-row-ic .icon { width: 19px; height: 19px; }
  .media-row-body { flex: 1; min-width: 0; }
  .media-row-name {
    display: block; font-size: 13.5px; color: var(--ash);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .media-row-name.mono {
    font-family: var(--f-mono); direction: ltr; text-align: left; color: var(--link);
  }
  .media-row-meta {
    display: block; font-size: 11.5px; color: var(--ash-faint); margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }

  .batch-head {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    font-size: 10.5px; color: var(--ash-dim); direction: ltr; text-align: end; margin-bottom: 6px;
  }
  .batch-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
    width: min(200px, 100%);
  }
  .batch-cell {
    aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden;
    background: var(--ink-2); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--ash-faint);
  }
  .batch-cell .icon { width: 18px; height: 18px; }
  .batch-cell.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
  .batch-cell.fail {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  }
  .batch-cell.uploading { align-items: end; }
  .batch-prog {
    display: block; height: 3px; width: 0; align-self: end; justify-self: stretch;
    background: var(--signal); transition: width var(--t-2) var(--e-soft);
  }
  .batch-more {
    font-family: var(--f-mono); font-size: 14px; font-weight: 700; color: var(--ash);
  }
  .batch-retry {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    min-height: 34px; padding: 0 12px; border-radius: 11px;
    border: 1px solid var(--line-strong); background: var(--ink-2);
    color: var(--ash); font: inherit; font-size: 12px; cursor: pointer;
  }
  .batch-retry .icon { width: 15px; height: 15px; }
  .batch-retry:disabled { opacity: .5; cursor: default; }
  .avatar-wrap { position: relative; flex: none; }
  .avatar {
    width: 38px; height: 38px; border-radius: 14px; flex: none;
    background: var(--ink-2); border: 1px solid var(--border);
    display: grid; place-items: center; color: var(--ash-dim);
  }
  /* الخطة المدفوعة تصبغ الصورة الرمزية كلّها ذهباً، والبرق في زاويتها العليا
     بلون الخلفية — اختيار المستخدم من ست صيغ (٥ سبتمبر ٢٠٢٦): الشارة الصغيرة
     وحدها كانت لا تُرى. والصنف على `.avatar-wrap` تضعه `updateProBadge`. */
  .avatar-wrap.pro .avatar { background: var(--pro); border-color: var(--pro); color: var(--pro-ink); }
  /* حالٌ تصل للتوّ (`replay` في platform.js): ذهبُ Pro مرّةً لكل تحوّلٍ من المجاني،
     والقفل حين تصير الغرفة مشفّرةً أمام صاحبها. لا عند كل رسمة ولا عند الإقلاع —
     والانتقال على الصورة الرمزية داخل `.state-in` وحدها، فالذهبيّ يُرسَم عند كل فتحٍ بلا تلاشٍ. */
  .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;
  }
  .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); }
  @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(--ok) 24%, transparent); }
    to { background-color: transparent; }
  }
  .pro-badge {
    position: absolute; inset-inline-start: -5px; top: -5px;
    width: 18px; height: 18px; max-height: 18px; 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; }
  .chat-head .meta { flex: 1; min-width: 0; }
  .chat-head .name { font-size: 14.5px; font-weight: 700; }
  .chat-head .stat {
    display: flex; align-items: center; gap: 6px; margin-top: 2px;
    font-size: 11.5px; color: var(--ok);
  }
  .chat-head .stat.off { color: var(--err); }
  .chat-head .stat .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--signal); box-shadow: 0 0 0 4px var(--signal-glow);
    animation: pulseGlow 2s ease-in-out infinite;
  }
  .chat-head .stat .dot.off {
    animation: none; background: var(--err); box-shadow: none;
  }
  /* ===== التشفير طرفاً لطرف — القفل والبصمة (المرحلة ٣) ===== */
  .chat-head .stat-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  /* القفل صغيرٌ في السطر وهدفه ٣٦ بكسلاً بهامشٍ سالب — فلا يرتفع الرأس بسببه */
  .e2e-lock {
    border: 0; background: none; color: var(--ok); padding: 0;
    width: 36px; height: 36px; margin: -10px 0; border-radius: 10px;
    display: grid; place-items: center; cursor: pointer;
  }
  .e2e-lock .icon { width: 15px; height: 15px; }
  .e2e-lock:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .e2e-lock.hidden { display: none; }
  /* البصمة: ستّ مجموعات رقمية على الأحادي LTR (الثابتان ٨ و١٦) — لاتيني وأرقام وحدها */
  .fp {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px;
    direction: ltr; margin: 10px 0;
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    font-size: 17px; font-weight: 700; letter-spacing: 1px; color: var(--code-ink);
  }
  .fp.hidden { display: none; }
  .fp span { background: var(--ink-2); border: 1px solid var(--tint-border); border-radius: 9px; padding: 6px 8px; }
  .head-icon {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: 14px; color: var(--ash-dim); padding: 8px;
    min-height: 44px; min-width: 44px; cursor: pointer;
  }
  .head-icon:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

  #chatMain {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    padding: 0 12px;
  }
  #chatMain.hidden { display: none; }
  #app.settings-open .chat-head { display: none; }
  .thread {
    flex: 1; overflow-y: auto; padding: 12px 4px 8px;
    display: flex; flex-direction: column; gap: 8px;
    overscroll-behavior: contain;
  }
  .thread-wrap {
    flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;
  }
  .thread-wrap .thread { flex: 1; min-height: 0; }
  .new-msg-btn {
    position: absolute; bottom: 10px; left: 50%;
    transform: translate(-50%, 12px); opacity: 0;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 0 14px; border-radius: 999px;
    background: var(--ink-1); border: 1px solid var(--line-strong);
    color: var(--ash); font: inherit; font-size: 12.5px;
    box-shadow: 0 10px 24px rgba(0,0,0,.35); cursor: pointer; z-index: 5;
    transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out);
  }
  .new-msg-btn.hidden { display: none; }
  /* مع رسائل جديدة: لون الإشارة والعدد — لا حبّةٌ بلون الخلفية تُقرأ زينة. */
  .new-msg-btn:not(.bare) {
    background: var(--signal); color: var(--on-signal);
    border-color: transparent; font-weight: 700;
  }
  .new-msg-btn.show { opacity: 1; transform: translate(-50%, 0); }
  .new-msg-btn .icon { width: 15px; height: 15px; }
  /* بلا رسائل جديدة: سهمٌ وحده يعيد إلى القاع — دائرةٌ لا حبّة نصّ */
  .new-msg-btn.bare {
    width: 38px; padding: 0; justify-content: center;
    color: var(--ash-dim);
  }
  .new-msg-btn.bare .icon { width: 17px; height: 17px; }
  /* ‎#empty‎ شقيقُ ‎.thread‎ لا ابنُها، فـ‎.thread .empty‎ لم تطابق شيئاً قطّ —
     وكان النصّ يلتصق بالمُنشئ وفوقه خيطٌ خاوٍ بطوله كلّه. ويبقى شقيقاً عمداً:
     ‎render()‎ يفرّغ ‎thread.innerHTML‎ في كل رسمة فينسفه لو كان بداخله.
     والخيط يبتلع الفراغ بـ‎flex:1‎، فتوسيطُ النصّ يقتضي أن يتنازل عنه ما دام
     خاوياً. وبلا ‎:has()‎ يقتسمان الفراغ — أدنى من المطلوب لا كسرٌ له. */
  #chatMain:has(> .empty:not(.hidden)) > .thread-wrap { flex: none; }
  #chatMain > .empty {
    flex: 1; min-height: 0;
    display: grid; place-items: center;
  }
  /* ‎#chatMain > .empty‎ تغلب ‎.hidden‎ في الخصوصية، فتُعاد صراحةً */
  #chatMain > .empty.hidden { display: none; }
  .day-chip {
    align-self: center; font-size: 11px; color: var(--ash-faint);
    background: var(--ink-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 10px; margin: 6px 0;
  }
  .row { display: flex; }
  .row.start { justify-content: flex-start; }
  .row.end { justify-content: flex-end; }
  .row.fresh { animation: arrive var(--t-4) var(--e-out); }
  /* الفاصل داخل الكتلة ٣ بكسل — والخيط gap:8، فنسحب ٥ */
  .row.cluster-follow { margin-top: -5px; }
  .row.fresh.start .bub::after {
    content: ''; display: block; height: 2px; border-radius: 2px; margin-top: 7px;
    animation: ringFade var(--t-4) var(--e-out);
  }
  .bub {
    max-width: 78%; padding: 9px 12px 8px;
    font-size: 13.5px; line-height: 1.55; word-break: break-word;
  }
  .bub.start {
    background: var(--ink-1); border: 1px solid var(--border);
    border-radius: 16px 16px 16px 4px;
  }
  .bub.end {
    background: var(--bub-out); border: 1px solid var(--bub-out-border);
    border-radius: 16px 16px 4px 16px;
  }
  /* رسالة نظام من الخادم — «صارت غرفتك Pro»: في الوسط بلون الإشارة الخافت */
  .row.system { justify-content: center; }
  .bub.system {
    max-width: 88%; text-align: center; font-size: 13px;
    background: color-mix(in srgb, var(--signal) 10%, var(--ink-1));
    border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
    border-radius: 14px;
  }
  /* التجميع: الذيل المشطوف على الأخيرة وحدها */
  .bub.start.cluster-first { border-radius: 16px 16px 4px 4px; }
  .bub.start.cluster-mid { border-radius: 4px 16px 4px 4px; }
  .bub.start.cluster-last { border-radius: 4px 16px 16px 4px; }
  .bub.end.cluster-first { border-radius: 16px 16px 4px 4px; }
  .bub.end.cluster-mid { border-radius: 16px 4px 4px 4px; }
  .bub.end.cluster-last { border-radius: 16px 4px 4px 16px; }
  .bub .meta {
    display: flex; align-items: center; gap: 4px; margin-top: 5px;
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    direction: ltr; justify-content: flex-end;
    /* ١١ لا ١٠: الحدّ الأدنى المقروء على الجوال — الوقت والعلامات معلومة تُقرأ. */
    font-size: 11px; color: var(--ash-faint);
  }
  @media (prefers-color-scheme: light) {
    .bub.end .meta { color: var(--ash-dim); }
    .avatar {
      background: var(--ink-3);
    }
    .icon-chip:not(.signal-only):not(.danger):not(.success) {
      background: var(--ink-3);
    }
    .head-icon {
      background: var(--ink-3);
    }
    .day-chip { background: var(--ink-1); }
  }
  .bub .meta.seen { color: var(--ok); }
  .bub .meta.pending { color: var(--ash-faint); }
  .bub .meta.morph .meta-ticks {
    display: inline-block;
    animation: tickMorph 180ms var(--e-out);
  }
  @keyframes tickMorph {
    from { opacity: 0; transform: scale(.55); }
    to { opacity: 1; transform: scale(1); }
  }
  .bub-img {
    display: block; max-width: 200px; max-height: 240px;
    border-radius: 10px; margin: -2px 0 4px;
  }
  /* المكان محجوز قبل وصول البايتات — وإلا قفز الخيط عند اكتمال كل صورة */
  .bub-img.loading {
    width: 200px; aspect-ratio: 4 / 3;
    background: var(--ink-3);
    animation: imgWait 1.4s var(--e-soft) infinite;
  }
  @keyframes imgWait { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
  .bub-expired { color: var(--ash-faint); }
  .bub .locked { color: var(--dim); font-size: .9rem; }
  .bub.media { padding: 4px; }
  /* ‎.media‎ تتنازل عن حشوها لأن الصورة تملأ الفقاعة — والرقاقة بديلُها حين
     يسقط الملف، فتستعيد حشو الفقاعة العادية وإلا خُنق النصّ في أربعة بكسلات */
  .bub.media:has(.bub-expired) { padding: 9px 12px 8px; }
  .bub-img { cursor: zoom-in; }

  /* ===== الألبوم — صورٌ متتابعة فقاعةً واحدة (render.js › renderAlbum) ===== */
  /* الخانات مربّعة والصورة تغطّيها (`cover`) كواتساب: شبكةٌ منتظمة تُقرأ
     عدداً قبل أن تُقرأ محتوى. والرابعة تحمل «+N» فوق صورتها لا بدلها. */
  /* عرضٌ محدَّد لا نسبة: الفقاعة تلتفّ على محتواها، ونسبةٌ داخلها تنكمش إلى عرض
     الأيقونات حين تذهب كل الخانات فلا صورة تعطيها عرضاً (S23 ١٠ سبتمبر ٢٠٢٦: 47
     بكسلاً تحت زرّ «شارك الكل» فلا تُلمس خانة). و`max-width` تحفظ الشاشات الضيّقة. */
  .album-grid {
    display: grid; gap: 3px; width: 240px; max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .album-cell {
    position: relative; overflow: hidden; border: 0; padding: 0;
    aspect-ratio: 1; border-radius: 8px; background: var(--ink-3);
    display: grid; place-items: center; color: var(--ash-faint);
    cursor: zoom-in; font: inherit;
  }
  .album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .album-cell.loading { animation: imgWait 1.4s var(--e-soft) infinite; }
  .album-cell.gone .icon { width: 22px; height: 22px; opacity: .6; }
  /* ثلاثٌ: الأولى تعرض الصفّ الأعلى كاملاً — كواتساب، ولا خانةٌ فارغة */
  .album-grid.n3 > .album-cell:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  /* غامقٌ ثابت لا يتبع اللوحة: فوق صورةٍ مجهولة اللون، والأبيض عليه مقروء في
     الوضعين — وبلون اللوحة الفاتحة كان كريمياً على كريميّ فلا يُقرأ الرقم */
  .album-more {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0, 0, 0, .48);
    color: #fff; font-family: var(--f-mono); font-size: 1.3rem; font-weight: 700;
  }
  .bub.media.album { padding: 4px; position: relative; }
  .album-cell:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
  /* «شارك الكل» على زاوية الشبكة العليا الخارجية: دائرةٌ داكنة ثابتة فوق
     صورةٍ مجهولة اللون — وبحدّ اللمس (٣٦) */
  .album-share {
    position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(0, 0, 0, .55); color: #fff;
  }
  .album-share .icon { width: 18px; height: 18px; }
  .album-share:disabled { opacity: .5; }
  .viewer-btn.hidden { display: none; }
  .viewer-btn:disabled { opacity: .5; }
  /* الوقت والتكّات داخل الخانة كواتساب — أبيض على ظلٍّ ثابت فوق صورة مجهولة اللون */
  .album-cell .cell-meta {
    position: absolute; inset-inline-end: 6px; bottom: 4px; margin: 0; padding: 0;
    color: #fff; font-size: .68rem; text-shadow: 0 0 4px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8);
    pointer-events: none;
  }
  .album-cell .cell-meta .meta-time, .album-cell .cell-meta .meta-ticks { color: inherit; }

  /* ===== صفحة الألبوم (app/viewer.js › openAlbum) ===== */
  .album-view { touch-action: auto; }
  .album-top {
    position: sticky; top: 0; background: #000;
    padding-bottom: 10px; z-index: 1;
  }
  .album-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .album-title b { font-size: 1rem; }
  .album-title span { font-size: .8rem; color: rgba(239,231,219,.7); }
  .album-body {
    flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
  .album-pic {
    position: relative; border: 0; padding: 0; background: #111; color: inherit;
    width: 100%; min-height: 160px; display: grid; place-items: center; cursor: zoom-in;
  }
  .album-pic img { width: 100%; max-height: 70dvh; object-fit: contain; display: block; }
  .album-pic.loading { animation: imgWait 1.4s var(--e-soft) infinite; }
  .album-pic.gone::after { content: attr(data-gone); color: rgba(239,231,219,.6); font-size: .9rem; padding: 40px 0; }
  .album-pic-meta {
    position: absolute; inset-inline-start: 10px; bottom: 8px;
    color: #fff; font-size: .8rem; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8);
  }

  /* ===== عارض الصور (app/viewer.js) ===== */
  /* داكنٌ في اللوحتين عمداً: الصورة هي الشيء، وأرضيّةٌ فاتحة حولها تُبهت
     حوافّها وتُتعب العين في الليل — وكل معارض النظام سوداء. */
  .viewer {
    position: fixed; inset: 0; z-index: 60; background-color: #000; color: #EFE7DB;
    display: flex; flex-direction: column;
    opacity: 0; transition: opacity var(--t-2) var(--e-soft), background-color var(--t-2) var(--e-soft);
    touch-action: none;
  }
  .viewer.open { opacity: 1; }
  /* الصورة تطير من مصغّرتها أو إليها (`zoomIn`/`zoomOut` في viewer.js): العارض
     ظاهرٌ كلّه والأرضيّة وحدها شفّافة — تلاشي العارض كلّه كان سيُبهت الصورة
     الطائرة معه. وبعد `.open` لتغلبها عند الإغلاق. */
  .viewer.flying { opacity: 1; background-color: transparent; }
  .viewer.flying .viewer-top, .viewer.flying .viewer-bar { opacity: 0; pointer-events: none; }
  .viewer.hidden { display: none; }
  body.viewer-open { overflow: hidden; }
  .viewer-top, .viewer-bar {
    display: flex; align-items: center; gap: 10px;
    padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
    transition: opacity var(--t-2) var(--e-soft);
    position: absolute; inset-inline: 0; z-index: 1;
  }
  .viewer-top { top: 0; }
  .viewer-bar {
    bottom: 0; justify-content: center; gap: 18px;
    padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px);
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  }
  .viewer.bare .viewer-top, .viewer.bare .viewer-bar { opacity: 0; pointer-events: none; }
  .viewer-btn {
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: inherit;
    display: grid; place-items: center; flex: none;
  }
  .viewer-btn .icon { width: 20px; height: 20px; }
  .viewer-count { font-family: var(--f-mono); font-variant-numeric: tabular-nums; direction: ltr; font-size: .9rem; }
  .viewer-name {
    flex: 1; min-width: 0; font-size: .82rem; color: rgba(239,231,219,.75);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .viewer-stage {
    flex: 1; min-height: 0; display: grid; place-items: center;
    position: relative; cursor: grab; user-select: none; -webkit-user-select: none;
  }
  .viewer-stage.loading::before {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
    animation: viewerSpin .8s linear infinite;
  }
  @keyframes viewerSpin { to { transform: rotate(360deg); } }
  .viewer-stage img {
    max-width: 100vw; max-height: 100dvh; object-fit: contain;
    transition: transform var(--t-2) var(--e-out), opacity var(--t-2) var(--e-soft);
    will-change: transform;
  }
  .viewer-stage img.gone { display: none; }
  /* الملف ذهب من الخادم ولا نسخة عندنا: يُقال بدل إطارٍ أسود صامت */
  .viewer-stage[data-gone]::after {
    content: attr(data-gone); color: rgba(239,231,219,.7); font-size: .95rem;
  }
  .viewer-act {
    border: 0; background: rgba(255,255,255,.12); color: inherit; font: inherit;
    border-radius: 999px; padding: 10px 18px; min-height: 44px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .viewer-act .icon { width: 18px; height: 18px; }
  .viewer-act.hidden { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .viewer, .viewer-stage img, .viewer-top, .viewer-bar { transition: none !important; }
    .album-cell.loading, .viewer-stage.loading::before { animation: none !important; }
  }
  .lc-link {
    display: flex; align-items: flex-start; gap: 8px; text-decoration: none; color: inherit;
  }
  .lc-title {
    font-size: 13px; font-weight: 600; color: var(--ash); line-height: 1.45;
    margin-bottom: 2px;
  }
  .lc-domain {
    font-family: var(--f-mono); direction: ltr; text-align: left;
    font-size: 12.5px; color: var(--link);
  }
  .lc-path {
    font-family: var(--f-mono); direction: ltr; text-align: left;
    font-size: 11px; color: var(--ash-faint); word-break: break-all;
  }
  .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;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  button.file-chip-bub:active { opacity: .65; }
  .file-chip-bub > .icon:first-child { flex: none; }
  .file-chip-bub > div { flex: 1; min-width: 0; }
  .file-chip-bub .icon.dl {
    flex: none; width: 18px; height: 18px; color: var(--signal);
  }
  /* زرّ الحفظ على طرف الشريحة: دائرةٌ ناعمة بحدّ اللمس (٣٦) — والشريحة نفسها
     تفتح الملف بالضغطة، فلا بدّ أن يُقرأ الزرّ فعلاً ثانياً لا زخرفة */
  .file-chip-bub .chip-save {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; background: var(--soft); cursor: pointer;
  }
  .file-chip-bub .fname { font-weight: 600; font-size: 13px; }
  .file-chip-bub .fsize {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; 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: 11px; color: var(--ash-faint);
  }
  .bub.failed {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  }
  .meta-wait {
    font-size: 11px; color: var(--ash-faint); margin-top: 2px;
  }
  /* سطر الوقت أحاديٌّ لاتينيّ (`direction: ltr`)، وهذا عربيّ داخله — فيُعزَل
     بـ`unicode-bidi` ويرجع إلى خطّ الواجهة: العربية لا تُوضع على `--f-mono`
     ولا تُباعَد حروفها (الثابت ٨). */
  .bub .meta-ttl {
    font-family: var(--f-body); unicode-bidi: isolate;
    font-size: 10px; color: var(--ash-faint);
  }
  /* الجزيرة داخل `.meta { direction: ltr }`، فتتبع اتجاهَ **الصفحة** لا أباها:
     «باقي 20 ساعة» تُقرأ يميناً و"20 hours left" يساراً — و`rtl` المثبَّتة كانت
     تقلب الإنجليزية إلى "hours left 20 ·" (قِيس ١٣ سبتمبر ٢٠٢٦). */
  [dir="rtl"] .bub .meta-ttl { direction: rtl; }
  .fail-row {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
  }
  .fail-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: color-mix(in srgb, var(--danger) 70%, var(--ash));
  }
  .fail-label .icon { width: 14px; height: 14px; color: var(--danger); }
  .fail-retry {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 12px; margin-inline-start: auto;
    border-radius: 11px; border: 1px solid var(--line-strong);
    background: var(--ink-2); color: var(--ash);
    font: inherit; font-size: 12px; cursor: pointer;
  }
  .fail-retry .icon { width: 15px; height: 15px; }
  .fail-del {
    width: 34px; height: 34px; flex: none; padding: 0;
    border-radius: 11px; border: 1px solid var(--line);
    background: var(--ink-2); color: var(--ash-faint);
    display: grid; place-items: center; cursor: pointer;
  }
  .fail-del .icon { width: 16px; height: 16px; }
  .offline-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px; flex: none;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
    font-size: 12px; line-height: 1.55;
    color: color-mix(in srgb, var(--danger) 70%, var(--ash));
    /* يظهر بتلاشٍ (`socket.js` › paintOfflineBar تضيف ‎.showing‎ بعد إطار) —
       ويختفي فوراً معها، فلا يحتاج ‎.hidden‎ مهلة. */
    opacity: 0; transition: opacity var(--t-1) var(--e-soft);
  }
  .offline-bar.hidden { display: none; }
  .offline-bar.showing { opacity: 1; }
  .offline-bar .icon { width: 17px; height: 17px; color: var(--danger); flex: none; }

  /* ورقة الإجراءات — ضغطة طويلة */
  .bub {
    -webkit-touch-callout: none;
    user-select: none;
  }
  .bub .lc-domain,
  .bub .lc-path,
  .bub > div:not(.meta):not(.meta-wait):not(.fail-row):not(.file-chip-bub):not(.bub-expired) {
    user-select: text;
    -webkit-user-select: text;
  }
  .bub.sheet-raised {
    position: relative; z-index: 40;
    transform: scale(1.035);
    box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 3px color-mix(in srgb, var(--ash) 6%, transparent);
    transition: transform var(--t-sheet) var(--e-out);
  }
  .action-sheet {
    position: fixed; inset: 0; z-index: 50;
    display: flex; flex-direction: column; justify-content: flex-end;
    pointer-events: none;
  }
  .action-sheet.hidden { display: none; }
  .action-sheet.open { pointer-events: auto; }
  .action-dim {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--ink-0) 66%, transparent);
    opacity: 0;
    transition: opacity var(--t-sheet) var(--e-soft);
  }
  .action-sheet.open .action-dim { opacity: 1; }
  .action-panel {
    position: relative;
    background: var(--ink-1);
    border-top: 1px solid var(--line-strong);
    border-radius: 26px 26px 0 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform var(--t-sheet) var(--e-out);
    box-shadow: 0 -20px 50px rgba(0,0,0,.45);
  }
  .action-sheet.open .action-panel { transform: translateY(0); }
  .action-handle {
    width: 44px; height: 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--ash) 20%, transparent);
    margin: 0 auto 10px;
  }
  .action-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 52px; padding: 0 12px;
    border: 0; border-radius: 14px; background: transparent;
    color: var(--ash); font: inherit; font-size: 14.5px; text-align: start;
    cursor: pointer;
  }
  .action-row.danger { color: var(--danger); }
  .action-ic {
    width: 34px; height: 34px; flex: none; border-radius: 11px;
    background: var(--ink-2); border: 1px solid var(--line);
    color: var(--ash); display: grid; place-items: center;
  }
  .action-ic .icon { width: 18px; height: 18px; }
  .action-ic.danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    color: var(--danger);
  }
  .action-sep {
    height: 1px; background: var(--line); margin: 6px 12px;
  }
  .action-cancel {
    display: grid; place-items: center;
    width: 100%; min-height: 50px; margin: 8px 0 6px;
    border-radius: 14px; border: 1px solid var(--line);
    background: var(--ink-2); color: var(--ash);
    font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  }

  /* ورقة التأكيد — نفس اللوح، ورأسٌ يشرح ما الذي يُفقَد */
  .confirm-title {
    margin: 4px 12px 6px; font-size: 16px; font-weight: 700; color: var(--ash);
  }
  .confirm-body {
    margin: 0 12px 12px; font-size: 13.5px; line-height: 1.6; color: var(--ash-dim);
  }
  .confirm-body.hidden { display: none; }
  /* زرّ التأكيد زرٌّ لا صفّ: كان `.action-row` بنصٍّ صغير وشارةٍ حمراء فقرأه
     المستخدم تحذيراً لا فعلاً («أدخله غرفتي» — لقطة من آيفون، ٥ سبتمبر ٢٠٢٦).
     الفعل العادي ممتلئٌ بلون الإشارة كأزرار الشاشة، والمدمّر (`danger`) مصبوغٌ
     بالخطر بلا امتلاء — لونُ الخطر أرضيّةً لا يحمل نصّاً مقروءاً في اللوحتين. */
  #confirmOk {
    justify-content: center; min-height: 50px; margin-top: 2px; gap: 8px;
    background: var(--signal); color: var(--on-signal);
    font-size: 15px; font-weight: 700;
  }
  #confirmOk .action-ic {
    width: auto; height: auto; background: transparent; border: 0; color: inherit;
  }
  #confirmOk.danger {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--danger);
  }
  #confirmOk .action-ic.danger { background: transparent; border: 0; color: inherit; }

  .composer {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 8px 4px 10px; flex: none;
    position: relative;
  }
  .composer .icon-btn {
    border: 0; background: var(--ink-2); color: var(--ash-dim);
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--border);
  }
  .composer .icon-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  /* «+» تدور ٤٥ فتصير «×» — إشارة الطيّ بلا أيقونة ثانية */
  .composer .more-btn .icon { transition: transform var(--t-2) var(--e-spring); }
  .composer .more-btn[aria-expanded="true"] .icon { transform: rotate(45deg); }
  /* الدرج يطفو فوق المُنشئ لا بجواره: كان يتمدّد بـ`max-width` في الصفّ نفسه
     فتظهر أيقوناته مقصوصةً أثناء الفتح وينكمش حقل الكتابة إلى ١٤٠ بكسل ويلتفّ
     نصّه المؤقّت على سطرين. والأزرار تبقى في الشجرة فيصلها التنقّل بالمفاتيح
     (`focusin` يفتحه)، و`pointer-events` لا `visibility` لهذا السبب. */
  .composer .more-tray {
    position: absolute; bottom: calc(100% - 2px); inset-inline-start: 6px;
    display: flex; align-items: flex-end; gap: 10px;
    padding: 10px 12px 8px; border-radius: 20px;
    background: var(--ink-1); border: 1px solid var(--line-strong);
    box-shadow: var(--lift); z-index: 6;
    opacity: 0; transform: translateY(8px) scale(.94);
    transform-origin: 90% 100%; pointer-events: none;
    transition: opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out);
  }
  .composer .more-tray.open { opacity: 1; transform: none; pointer-events: auto; }
  .composer .tray-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 52px; flex: none;
  }
  .composer .tray-label { font-size: 11px; color: var(--ash-faint); }
  .composer .more-btn[aria-expanded="true"] {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border-color: var(--tint-border); color: var(--signal);
  }
  .composer .field {
    flex: 1; min-width: 0;
    background: var(--field); border: 1px solid var(--border);
    border-radius: 18px; padding: 2px 4px;
  }
  .composer .field textarea {
    width: 100%; border: 0; background: transparent; resize: none;
    padding: 8px 10px; max-height: 120px; min-height: 38px;
    line-height: 1.4; outline: none;
  }
  .composer .field textarea:focus-visible { outline: none; }
  .send-btn {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    border: 0; background: var(--signal); color: var(--on-signal);
    display: grid; place-items: center; cursor: pointer;
    position: relative;
    transition: background var(--t-2) var(--e-soft), color var(--t-2) var(--e-soft),
                transform var(--t-1) var(--e-out);
  }
  .send-btn:disabled { opacity: .6; }
  .send-btn:active { transform: scale(.97); }
  .send-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .send-btn .btn-icon { display: grid; place-items: center; }
  /* الأيقونتان متراكبتان في خانة واحدة، والتحوّل ✈→✓ كان يقع في إطار واحد
     لأن لا انتقال عليهما أصلاً. الشفافية بمنحنى الخروج والحجم بالنابض. */
  .send-btn .btn-icon .icon {
    grid-area: 1 / 1; width: 1.15em; height: 1.15em;
    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.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); animation: popCheck var(--t-2) var(--e-out); }
  .send-btn.fail { background: var(--danger); color: var(--on-signal); }
  .composer .icon-btn.sent { color: var(--success); }
  .composer .icon-btn.fail { color: var(--danger); }
  /* الضغط: النزول فوري، والرجوع متمهّل. التماثل يجعل الزر يبدو بطيئاً. */
  .composer .icon-btn,
  .head-icon,
  .back-btn,
  .linky,
  .x,
  .paste-clear,
  .media-save,
  .search-chip,
  .search-hit,
  .media-tab,
  button.media-tile,
  .file-chip-bub .chip-save,
  .album-share,
  .fail-del,
  .lc-link,
  .batch-retry,
  .fail-retry,
  details summary {
    transition: transform var(--t-2) var(--e-out), opacity var(--t-2) var(--e-out);
  }
  .composer .icon-btn:active,
  .head-icon:active,
  .back-btn:active,
  .x:active,
  .paste-clear:active,
  .media-save:active,
  .file-chip-bub .chip-save:active,
  .album-share:active,
  .fail-del:active {
    transform: scale(.94);
    transition-duration: 0ms;
  }
  /* زرّ النزول للقاع مُزاحٌ نصفَ عرضه ليتوسّط — فالتصغير يُركَّب على الإزاحة لا يحلّ محلّها */
  .new-msg-btn.show:active { transform: translate(-50%, 0) scale(.94); transition-duration: 0ms; }
  .linky:active,
  .search-chip:active,
  .search-hit:active,
  .media-tab:active,
  button.media-tile:active,
  .lc-link:active,
  .batch-retry:active,
  .fail-retry:active,
  details summary:active { opacity: .6; transition-duration: 0ms; }
  .set-row:active,
  .btn:active, .mini:active, .send-btn:active { transition-duration: 0ms; }
  /* رجّة الفشل — ‎send.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); }

  #settingsView {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    background: var(--ink-0);
  }
  #settingsView.hidden { display: none; }
  .set-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px; border-bottom: 1px solid var(--border);
    background: var(--ink-1); box-shadow: var(--lift); flex: none;
  }
  .set-head .title { font-weight: 700; font-size: 15px; }
  .set-head .spacer { flex: 1; }
  .back-btn {
    border: 0; background: none; color: var(--ash-dim);
    min-width: 44px; min-height: 44px; cursor: pointer;
  }
  .set-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; overscroll-behavior: contain; }
  .set-group { margin-bottom: 20px; }
  .set-group-title {
    font-size: 12px; font-weight: 700;
    color: var(--ash-faint); margin: 0 4px 8px;
  }
  .set-group-card {
    background: var(--ink-1); border: 1px solid var(--line);
    border-radius: 18px; overflow: hidden; box-shadow: var(--lift);
  }
  .set-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 60px; width: 100%; padding: 0 14px;
    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);
  }
  .set-row:active { transform: scale(.965); transition-duration: 0ms; }
  .set-row:last-child { border-bottom: 0; }
  .set-row-text { flex: 1; min-width: 0; text-align: start; }
  .set-row-title { display: block; font-size: 15px; font-weight: 700; color: var(--ash); }
  .set-row-desc { display: block; font-size: 13px; color: var(--ash-dim); margin-top: 1px; }
  .set-row.danger .set-row-title { color: var(--danger); }
  .set-row-chev { width: 18px; height: 18px; color: var(--ash-faint); flex: none; }
  .set-panel {
    padding: 12px 14px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .set-panel.hidden { display: none; }
  .set-chat-actions { display: flex; gap: 8px; }
  .set-chat-actions .mini { flex: 1; margin-top: 0; }
/* ============ مبدّل اللغة ============
   حبّةٌ بقسمين حيث المكان واسع، وزرٌّ واحد (`.lang-toggle`) في رأسٍ مزدحم.
   بلا لون إشارة: ليست إرسالاً ولا اتصالاً حيّاً. واسما اللغتين بخطّهما. */
  .lang-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--soft-2, rgba(128,128,128,.14)); }
  .lang-switch button { border: 0; background: transparent; color: var(--dim, inherit); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; cursor: pointer; min-width: 38px; }
  .lang-switch button.on { background: var(--card, #fff); color: var(--text, inherit); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  .lang-switch button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .lang-switch.corner { position: absolute; top: 10px; inset-inline-end: 10px; }
  .lang-toggle { font-size: 12px; font-weight: 700; font-family: var(--f-body); }
  /* في صفّ الحال: حبّةٌ صغيرة بارتفاع السطر، لا تكلّف الاسمَ عرضاً */
  .lang-toggle.sm { border: 0; border-radius: 999px; padding: 2px 8px; margin-inline-start: 6px; background: var(--soft-2); color: var(--dim); cursor: pointer; line-height: 1.4; font-size: 11px; }
  .lang-toggle.sm:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

  .set-section { margin-bottom: 18px; }
  /* زرّا اللغة: كلٌّ باسمه في خطّه — «العربية» و«English» لا تُترجَمان، فاسمُ
     اللغة بلغتها هو ما يعرفه من لا يقرأ الأخرى. والثابت ١٤ يحكم الصفّ. */
  .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); }
  .set-label { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
  .set-note { font-size: .88rem; color: var(--dim); margin: 8px 0; line-height: 1.6; }
  .set-mini-label { font-size: .8rem; color: var(--dim); margin: 10px 0 4px; }
  .plan-line { font-size: .95rem; margin: 6px 0; }
  .plan-line strong { font-weight: 700; }
  .code-otp {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: .35em;
    text-align: center;
  }
  /* غرف الحساب صفوفاً كصفوف الأجهزة. ⚠️ كانت الأزرار على `--f-mono` مع
     `letter-spacing` — والصفّ عربيٌّ («الغرفة 1 · هذه · الجوال») فخرج مقطَّعاً
     بخطّ النظام (الثابت ٨). قِيس بلقطةٍ من آيفون. */
  .room-pick { margin-top: 10px; }
  .room-pick > .set-note { margin: 0 4px 8px; }
  .room-rows {
    background: var(--ink-1); border: 1px solid var(--line);
    border-radius: 18px; overflow: hidden; box-shadow: var(--lift);
  }
  .room-row { display: flex; align-items: center; gap: 8px; padding-inline-end: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .room-row:last-child { border-bottom: 0; }
  .room-row .set-row { border-bottom: 0; flex: 1; min-width: 0; }
  .room-row .set-row:disabled { cursor: default; }
  .room-row .set-row:disabled:active { transform: none; }
  .room-row .set-row.hot .set-row-title { color: var(--signal); }
  .room-row .mini { min-height: 36px; padding: 6px 12px; margin: 0; }
  .room-e2e-note { margin: 6px 14px 10px; }
  /* بطاقةٌ ثانية في المجموعة نفسها (الأجهزة تحت الربط، المسح تحت الأجهزة) */
  .set-group-more { margin-top: 10px; }
  /* صفٌّ يحمل حالاً لا فعلاً — زرّه الصغير على طرفه هو الفعل */
  .set-row.static { cursor: default; }
  .set-row.static:active { transform: none; }
  .set-row .row-act { min-height: 36px; padding: 6px 12px; margin: 0; }
  /* `.hidden` تسبق `.set-row` في الملف وكلتاهما فئةٌ واحدة — فتغلب `display: flex` */
  .set-row.hidden { display: none; }
  /* معرّف الدعم لاتينيٌّ فالأحادي له (الثابت ٨) */
  .set-row-desc.mono { font-family: var(--f-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* لوحة تعديل الاسم تنفتح من الضغط على «أهلاً، …» */
  .whoami.editable { cursor: pointer; }
  .name-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--ink-1); margin-bottom: 12px; }
  .name-panel .set-mini-label { margin-top: 0; }

  #chatMain > .banner, #chatMain > .card.share { margin: 8px 0; }
  /* فقاعة التغذية الراجعة: فوق المُنشئ (الثابت ١٣)، وبلا أثر وهي فارغة —
     ‎min-height: 0‎ وحدها لا تكفي، فالفقرة الفارغة تحتفظ بهامشها وحشوتها. */
  #chatMain > .feedback {
    align-self: center; max-width: 90%;
    margin: 0 0 8px; padding: 8px 14px; min-height: 0;
    border-radius: 999px; border: 1px solid var(--line);
    background: var(--ink-2);
    font-size: .84rem; line-height: 1.45; text-align: center;
    opacity: 0; transform: translateY(6px) scale(.96);
    transition: opacity var(--t-2) var(--e-soft), transform var(--t-2) var(--e-spring);
  }
  #chatMain > .feedback.show { opacity: 1; transform: none; }
  /* زرّ داخل الفقاعة (الترقية عند الاصطدام بالحدّ) — رابطٌ بلون النصّ نفسه. */
  #chatMain > .feedback .fb-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;
  }
  #chatMain > .feedback:empty { display: none; }
  #chatMain > .feedback.ok {
    border-color: color-mix(in srgb, var(--ok) 34%, transparent);
    background: color-mix(in srgb, var(--ok) 12%, var(--ink-2));
  }
  #chatMain > .feedback.err {
    border-color: color-mix(in srgb, var(--err) 34%, transparent);
    background: color-mix(in srgb, var(--err) 12%, var(--ink-2));
  }
  #chatMain > .paste-preview { margin: 0 0 6px; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
    .status::before, .peer::before { animation: none !important; }
    .chat-head .stat .dot { animation: none !important; }
    .code-show .ttl-dot { animation: none !important; }
    /* البند ٩: الحركة نفسها تُطفأ بـ‎animation-duration‎ أعلاه، لكن المهلة بين
       خانةٍ وأخرى (‎animation-delay‎) لا تمسّها تلك القاعدة — فتُطفأ هنا كذلك. */
    .code-show .digit-box { animation-delay: 0ms !important; }
    /* الدوّارة مستثناة: هي تغذية راجعة لا زينة، وتجميدها يجعلها حلقة ميتة */
    .spin { animation: spin 1.6s linear infinite !important; }
    .btn:active, .mini:active, .send-btn:active { transform: none !important; }
    .composer .icon-btn:active,
    .head-icon:active,
    .back-btn:active,
    .x:active,
    .paste-clear:active,
    .media-save:active,
    .file-chip-bub .chip-save:active,
    .album-share:active,
    .fail-del:active,
    .set-row:active { transform: none !important; }
    .new-msg-btn.show:active { transform: translate(-50%, 0) !important; }
    .bar > i { transition: width var(--t-2) linear !important; }
    /* الشيمر والشريط غير المحدّد ونبض خانة الوسائط زينةٌ متكرّرة — تُطفأ،
       والنسبة تبقى رقماً والأيقونة مكانها بلا نبض */
    .bub-skel::before { animation: none !important; }
    .bar.indet > i { animation: none !important; width: 100% !important; opacity: .5; }
    .row.fresh .bub::after { animation: none !important; }
    .media-tile.loading { animation: none !important; }
  }