/* ============================================================
   أوروك — design-tokens.css
   ============================================================
   هذا الملف يوثّق ويوسّع نظام التصميم الموجود، ولا يستبدل أي شي:

   • نظام الألوان الأساسي (فاتح/داكن) معرّف بـ style.css
     ضمن :root و body.dark — المصدر الوحيد لقيم:
     --bg --surface --text --accent --bubble-me --divider... إلخ.
   • نظام تصميم إضافي (جسيمات/زجاج/ripple/toast/skeleton...)
     معرّف داخل <style> بأعلى index.html (المتغيرات --uruk-*
     و--bg-primary/--text-primary... إلخ وهي alias فوق النظام أعلاه).

   هذا الملف يضيف فقط:
   §1 مقياس طباعة موحّد (جديد، اختياري الاستخدام)
   §2 مقياس مسافات 4px (جديد، اختياري الاستخدام)
   §3 منتقي الألوان (Accent Picker) — data-accent على body
   §4 وضعين جديدين للثيم: أسود AMOLED + سيبيا دافئ للقراءة
   §5 مكوّن Tooltip (للكمبيوتر فقط)
   §6 مكوّن Modal/Dialog (تأكيد مخصص بدل confirm() الافتراضي)
   §7 focus-visible واضح لعناصر التنقّل بلوحة المفاتيح
   ============================================================ */

/* ─────────────────────────────────────────────
   §0 — إصلاح: المتغيرات المستعارة بالطبقة المدمجة
   (--bg-elevated, --bg-input, --text-primary...) معرّفة مرة وحدة
   بـ :root بأعلى index.html كـ var(--surface-2) وغيرها. لمن body.dark
   يغيّر --surface-2، هالمتغيرات المستعارة "لا" تنعاد حسابها تلقائياً —
   تضل عالقة بالقيمة الفاتحة لأنها اتحسبت مرة وحدة بمستوى :root قبل
   ما توصل لأي عنصر (خاصية معروفة بمتغيرات CSS: alias فوق متغير آخر
   لازم يُعاد تعريفه بنفس مستوى override الأصلي حتى يتحدّث).
   هذا كان يسبب: القائمة المنسدلة، قوائم select، sheets، toast، modal،
   صناديق الإدخال... تضل بلون فاتح رغم إن الوضع الداكن مفعّل.
   ───────────────────────────────────────────── */
body.dark {
  --bg-primary: var(--bg); --bg-secondary: var(--surface-2); --bg-card: var(--surface);
  --bg-elevated: var(--surface-2); --bg-input: var(--surface-2);
  --border-subtle: var(--divider); --border-medium: var(--divider);
  --text-primary: var(--text); --text-secondary: var(--text-2); --text-muted: var(--text-2);
}
body.sepia {
  --bg-primary: var(--bg); --bg-secondary: var(--surface-2); --bg-card: var(--surface);
  --bg-elevated: var(--surface-2); --bg-input: var(--surface-2);
  --border-subtle: var(--divider); --border-medium: var(--divider);
  --text-primary: var(--text); --text-secondary: var(--text-2); --text-muted: var(--text-2);
}

/* ─────────────────────────────────────────────
   §9 — حلقة تحميل الصور بنمط تليكرام (بدل توست "جارٍ الرفع...")
   تُستخدم مع createPendingImageBubble() بـ app.js: الصورة تظهر فوراً
   بالمحادثة بشكل مصغّر محلياً، وحلقة تقدّم دائرية فوقها تختفي تلقائياً
   بمجرد اكتمال الرفع الفعلي لـ Storage.
   ───────────────────────────────────────────── */
.msg-media-wrap { position:relative; }
.msg-upload-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.38); border-radius:13px;
  transition:opacity .25s ease;
}
.msg-upload-ring { width:44px; height:44px; transform:rotate(-90deg); }
.msg-upload-ring .ring-track { fill:none; stroke:rgba(255,255,255,.28); stroke-width:3; }
.msg-upload-ring .ring-fill {
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:113.1; stroke-dashoffset:113.1;
  transition:stroke-dashoffset .2s ease;
}
.msg-upload-pct {
  position:absolute; color:#fff; font-size:11px; font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.msg-upload-overlay.failed { background:rgba(180,40,30,.5); cursor:pointer; }
.msg-upload-retry-icon { width:26px; height:26px; fill:#fff; }
.msg-upload-retry-label { color:#fff; font-size:11.5px; font-weight:700; margin-top:4px; text-shadow:0 1px 2px rgba(0,0,0,.5); }

/* ─────────────────────────────────────────────
   §10 — لوحة الإيموجي المصنّفة (تبويبات + شبكة + Twemoji)
   ───────────────────────────────────────────── */
.emoji-panel { display:flex; flex-direction:column; }
.emoji-tabs {
  display:flex; gap:2px; padding:6px 8px; overflow-x:auto; flex-shrink:0;
  border-bottom:1px solid var(--divider);
}
.emoji-tab {
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; opacity:.5; transition:opacity .15s, background .15s;
}
.emoji-tab img { width:19px !important; height:19px !important; margin:0 !important; vertical-align:middle !important; }
.emoji-tab.active { opacity:1; background:var(--surface-2); }
.emoji-grid-scroll {
  flex:1; overflow-y:auto; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
  padding:8px calc(8px + env(safe-area-inset-bottom)) 8px 8px; align-content:start;
}
.emoji-grid-scroll button {
  border-radius:10px; aspect-ratio:1/1; padding:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, transform .1s;
}
.emoji-grid-scroll button:hover { background:var(--surface-2); }
.emoji-grid-scroll button:active { transform:scale(.82); }
.emoji-grid-scroll button img { width:27px !important; height:27px !important; margin:0 !important; vertical-align:middle !important; }
.emoji-recent-empty {
  grid-column:1/-1; text-align:center; color:var(--text-2); font-size:13px;
  padding:34px 24px; line-height:1.6;
}
/* تصميم مخصّص للكمبيوتر — شبكة أوسع وأعلى + تكبير عند التمرير بالماوس */
@media (min-width:900px) {
  .emoji-panel { height:340px; }
  .emoji-grid-scroll { grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:2px; }
  .emoji-grid-scroll button img { width:24px !important; height:24px !important; }
  .emoji-grid-scroll button { transition:background .12s, transform .1s; }
}
@media (min-width:900px) and (hover:hover) and (pointer:fine) {
  .emoji-grid-scroll button:hover { transform:scale(1.35); background:none; z-index:1; position:relative; }
  .emoji-tab:hover { opacity:.85; }
}

/* ─────────────────────────────────────────────
   §1 — مقياس الطباعة (Typography Scale)
   جديد بالكامل، ما يفرض نفسه على أي عنصر موجود —
   يُستخدم فقط بالمكوّنات الجديدة أو عند اختيارك تطبيقه لاحقاً.
   ───────────────────────────────────────────── */
:root {
  --tx-display-size: 32px; --tx-display-lh: 1.25; --tx-display-w: 800;
  --tx-h1-size: 24px;      --tx-h1-lh: 1.3;       --tx-h1-w: 800;
  --tx-h2-size: 20px;      --tx-h2-lh: 1.35;      --tx-h2-w: 700;
  --tx-h3-size: 17px;      --tx-h3-lh: 1.4;       --tx-h3-w: 700;
  --tx-body-size: 15px;    --tx-body-lh: 1.6;     --tx-body-w: 400;
  --tx-caption-size: 12.5px; --tx-caption-lh: 1.5; --tx-caption-w: 500;
}
.tx-display { font-size:var(--tx-display-size); line-height:var(--tx-display-lh); font-weight:var(--tx-display-w); }
.tx-h1 { font-size:var(--tx-h1-size); line-height:var(--tx-h1-lh); font-weight:var(--tx-h1-w); }
.tx-h2 { font-size:var(--tx-h2-size); line-height:var(--tx-h2-lh); font-weight:var(--tx-h2-w); }
.tx-h3 { font-size:var(--tx-h3-size); line-height:var(--tx-h3-lh); font-weight:var(--tx-h3-w); }
.tx-body { font-size:var(--tx-body-size); line-height:var(--tx-body-lh); font-weight:var(--tx-body-w); }
.tx-caption { font-size:var(--tx-caption-size); line-height:var(--tx-caption-lh); font-weight:var(--tx-caption-w); }

/* ─────────────────────────────────────────────
   §2 — مقياس المسافات (4px Spacing Scale)
   ───────────────────────────────────────────── */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
}

/* ─────────────────────────────────────────────
   §3 — منتقي الألوان (Accent Picker)
   6 خيارات: الأزرق الافتراضي (بدون data-accent) + 5 بدائل من
   نفس لوحة الألوان المستخدمة أصلاً بالتطبيق (--uruk-cyan/purple/
   red/green/gold المعرّفة بـ index.html) — ألوان مجرّبة أصلاً
   بهوية أوروك، مو ألوان جديدة غريبة عن التصميم.
   يُفعَّل عبر body[data-accent="..."] فقط — غيابه = السلوك
   الافتراضي 100% بدون أي تغيير.
   ───────────────────────────────────────────── */
body[data-accent="cyan"] {
  --accent:#00B8CC; --accent-b:#3DD6E8; --accent-2:#008A99; --accent-ink:#FFFFFF;
  --unread:#00B8CC; --bubble-me:#00B8CC;
  --grad-accent:linear-gradient(160deg, var(--accent-b) 0%, var(--accent) 55%, var(--accent-2) 100%);
  --grad-accent-soft:linear-gradient(160deg, var(--accent-b), var(--accent));
}
body.dark[data-accent="cyan"] {
  --accent:#22D2E8; --accent-b:#6FE6F2; --accent-2:#00A3B3; --bubble-me:#1D4F58;
}
body[data-accent="purple"] {
  --accent:#7C6AE8; --accent-b:#A497F0; --accent-2:#5B4BC4; --accent-ink:#FFFFFF;
  --unread:#7C6AE8; --bubble-me:#7C6AE8;
  --grad-accent:linear-gradient(160deg, var(--accent-b) 0%, var(--accent) 55%, var(--accent-2) 100%);
  --grad-accent-soft:linear-gradient(160deg, var(--accent-b), var(--accent));
}
body.dark[data-accent="purple"] {
  --accent:#9B8CF0; --accent-b:#BCB0F5; --accent-2:#7C6AE8; --bubble-me:#423A6E;
}
body[data-accent="coral"] {
  --accent:#E85A4E; --accent-b:#F08A80; --accent-2:#C23F35; --accent-ink:#FFFFFF;
  --unread:#E85A4E; --bubble-me:#E85A4E;
  --grad-accent:linear-gradient(160deg, var(--accent-b) 0%, var(--accent) 55%, var(--accent-2) 100%);
  --grad-accent-soft:linear-gradient(160deg, var(--accent-b), var(--accent));
}
body.dark[data-accent="coral"] {
  --accent:#F0796D; --accent-b:#F5A99F; --accent-2:#E85A4E; --bubble-me:#6E3A34;
}
body[data-accent="green"] {
  --accent:#1FAF8E; --accent-b:#54CBB0; --accent-2:#158069; --accent-ink:#FFFFFF;
  --unread:#1FAF8E; --bubble-me:#1FAF8E;
  --grad-accent:linear-gradient(160deg, var(--accent-b) 0%, var(--accent) 55%, var(--accent-2) 100%);
  --grad-accent-soft:linear-gradient(160deg, var(--accent-b), var(--accent));
}
body.dark[data-accent="green"] {
  --accent:#33CBA8; --accent-b:#68DCC0; --accent-2:#1FAF8E; --bubble-me:#1C5548;
}
body[data-accent="gold"] {
  --accent:#D6890F; --accent-b:#F0AB3F; --accent-2:#A8690A; --accent-ink:#FFFFFF;
  --unread:#D6890F; --bubble-me:#D6890F;
  --grad-accent:linear-gradient(160deg, var(--accent-b) 0%, var(--accent) 55%, var(--accent-2) 100%);
  --grad-accent-soft:linear-gradient(160deg, var(--accent-b), var(--accent));
}
body.dark[data-accent="gold"] {
  --accent:#F0A934; --accent-b:#F5C266; --accent-2:#D6890F; --bubble-me:#6E4F1C;
}
/* ملاحظة صريحة: التوهجات الزخرفية الثابتة بالطبقة المدمجة (الأورب، توهج
   الأزرار rgba(46,107,255,...)) تضل بلونها الأزرق الأصلي بكل الحالات —
   تغييرها يعني لمس عشرات القواعد الشغّالة حالياً، وهذا يخالف قاعدتك
   الذهبية. منتقي الألوان يغيّر الأزرار/الفقاعات/الروابط/شارة غير
   المقروء فعلياً، ويترك التوهج الزخرفي الخلفي كثابت هوية بصرية. */

/* أزرار اختيار اللون بالإعدادات */
.accent-swatches { display:flex; gap:12px; padding:4px 20px 14px; flex-wrap:wrap; }
.accent-swatch {
  width:34px; height:34px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:2px solid transparent; position:relative;
  transition:transform .15s var(--transition-bounce,ease), border-color .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.accent-swatch:hover { transform:scale(1.12); }
.accent-swatch.active { border-color:var(--text); }
.accent-swatch.active::after {
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ─────────────────────────────────────────────
   §4 — وضعا ثيم إضافيان: أسود AMOLED + سيبيا دافئ
   نضيفهم كـ class إضافي فوق النظام الموجود:
   - .amoled يُضاف مع .dark معاً (يرث كل قواعد body.dark الحالية
     ويغيّر فقط درجات الخلفية لأسود عميق يوفّر بطارية شاشات AMOLED).
   - .sepia مستقل (وضع فاتح دافئ، بدون .dark) لقراءة مريحة للعين.
   ───────────────────────────────────────────── */
body.dark.amoled {
  --bg:#000000; --surface:#000000; --surface-2:#0A0A0A;
  --chat-bg:#000000; --header:rgba(0,0,0,.97); --divider:#1A1A1A;
  --input-bg:#0A0A0A; --sheet-bg:#000000;
}
body.sepia {
  --bg:#F4ECD8; --surface:#F4ECD8; --surface-2:#EDE0C4;
  --header:rgba(244,236,216,.94); --header-text:#3B2F1E;
  --chat-bg:#EFE3C9; --text:#3B2F1E; --text-2:#7A6A50;
  --divider:#DDD0AF; --composer-bg:#F4ECD8; --input-bg:#EDE0C4; --sheet-bg:#F4ECD8;
}

/* ─────────────────────────────────────────────
   §5 — Tooltip (تلميح — للكمبيوتر فقط، ما يظهر باللمس)
   الاستخدام: أضف data-tooltip="النص" على أي عنصر.
   ───────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  [data-tooltip] { position:relative; }
  [data-tooltip]::after {
    content:attr(data-tooltip);
    position:absolute; bottom:calc(100% + 9px); left:50%;
    transform:translateX(-50%) translateY(4px);
    background:var(--surface-2); color:var(--text);
    font-size:12.5px; font-weight:600; white-space:nowrap;
    padding:6px 11px; border-radius:8px;
    box-shadow:var(--depth-2,0 3px 8px rgba(0,0,0,.3));
    border:1px solid var(--divider);
    opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:9000;
  }
  [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
    opacity:1; transform:translateX(-50%) translateY(0);
  }
}

/* ─────────────────────────────────────────────
   §6 — Modal/Dialog (تأكيد مخصّص بدل confirm() الافتراضي)
   تُبنى العناصر ديناميكياً من الجافاسكربت (دالة customConfirm بـ app.js)
   ───────────────────────────────────────────── */
.confirm-modal-backdrop {
  position:fixed; inset:0; z-index:100000;
  background:rgba(6,10,18,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:cmFade .18s ease both;
}
@keyframes cmFade { from{opacity:0} to{opacity:1} }
.confirm-modal-card {
  width:100%; max-width:340px; background:var(--sheet-bg); color:var(--text);
  border-radius:var(--radius-xl,20px); padding:24px 22px 18px; text-align:center;
  border:1px solid var(--divider); box-shadow:var(--depth-3,0 20px 48px rgba(0,0,0,.4));
  animation:cardPop .35s var(--transition-bounce,cubic-bezier(.34,1.56,.64,1)) both;
}
.confirm-modal-title { font-size:17px; font-weight:800; margin-bottom:8px; }
.confirm-modal-msg { font-size:14px; line-height:1.7; color:var(--text-2); margin-bottom:20px; }
.confirm-modal-actions { display:flex; gap:10px; }
.confirm-modal-actions button {
  flex:1; padding:12px 10px; border-radius:13px; font-size:14.5px; font-weight:700;
  transition:transform .12s;
}
.confirm-modal-actions button:active { transform:scale(.95); }
.confirm-modal-cancel { background:var(--surface-2); color:var(--text); border:1px solid var(--divider); }
.confirm-modal-confirm { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); }
.confirm-modal-card.danger .confirm-modal-confirm { background:var(--danger); }

/* ─────────────────────────────────────────────
   §7 — توصيلة الحالات الفارغة (Empty State Illustration)
   نسخة أخف من .hero-icon الموجودة أصلاً بـ style.css (نفس اللغة
   البصرية: شارة مدوّرة بتدرّج + أيقونة بيضاء) لكن بحجم أهدأ يناسب
   حالة "مافي محتوى بعد" بدل شاشات التحذير الكبيرة.
   ───────────────────────────────────────────── */
.empty-illust {
  width:72px; height:72px; margin:0 auto 4px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-accent-soft);
  box-shadow:0 10px 26px rgba(0,0,0,.14), inset 0 1.5px 0 rgba(255,255,255,.35);
}
.empty-illust svg { width:34px; height:34px; fill:#fff; opacity:.95; }

/* ─────────────────────────────────────────────
   §8 — focus-visible لعناصر التنقّل بلوحة المفاتيح
   ما يظهر عند اللمس/الماوس، فقط عند التنقّل بـ Tab
   ───────────────────────────────────────────── */
button:focus-visible, .icon-btn:focus-visible, a:focus-visible,
.auth-choice:focus-visible, .tab:focus-visible, .setting-row:focus-visible,
.accent-swatch:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:8px;
}