/* ============================================================
   ZAKERLI — UI Boost
   طبقة تحسينات بصرية فوق styles.css. كلها إضافية: لو شلت اللينك ده
   من أي صفحة، الصفحة ترجع زي ما كانت بالظبط ومفيش حاجة بتتكسر.
   بتضيفها بعد styles.css على طول:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="ui-boost.css">
   ============================================================ */

/* ---------- خلفية حية هادية بدل اللون الثابت ----------
   طبقتين متحركين ببطء شديد (28 و 36 ثانية) على z-index سالب، فمش
   بيتفاعلوا مع أي كليك ومش بيغطوا أي محتوى. */
body::before{
  content:''; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(var(--gold-rgb),0.13), transparent 60%),
    radial-gradient(32vmax 32vmax at 84% 8%,  rgba(var(--gold-rgb),0.08), transparent 62%),
    radial-gradient(36vmax 36vmax at 60% 96%, rgba(var(--gold-rgb),0.07), transparent 60%);
}
@keyframes zb-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.08); }
}
/* شبكة خفيفة جدًا تدّي إحساس "لوحة تحكم" من غير ما تشتت */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000, transparent 72%);
  mask-image:radial-gradient(circle at 50% 0%, #000, transparent 72%);
}

/* ---------- توب بار زجاجي ---------- */
.topbar{
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
@supports not (background:color-mix(in srgb, red 50%, blue)){
  .topbar{ background:var(--surface); }
}
.brand .dotmark{
  box-shadow:0 0 0 0 var(--glow);
  animation:zb-pulse 2.8s ease-out infinite;
}
@keyframes zb-pulse{
  0%{ box-shadow:0 0 0 0 var(--glow); }
  70%{ box-shadow:0 0 0 9px rgba(var(--gold-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--gold-rgb),0); }
}

/* ---------- كروت بارتفاع وإضاءة عند الهوفر ---------- */
.card{ position:relative; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease; }
@media (hover:hover){
  .card:hover{ transform:none; box-shadow:var(--shadow); border-color:rgba(var(--gold-rgb),0.28); }
  .price-card:hover, .shop-card:hover{ transform:translateY(-3px); }
}

/* ---------- أزرار: ضغطة محسوسة + لمعة خفيفة ---------- */
.btn, .btn-ghost, .btn-mint, .btn-danger{
  position:relative; overflow:hidden;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), filter .18s ease, box-shadow .2s ease;
}
.btn:active, .btn-ghost:active, .btn-mint:active, .btn-danger:active{ transform:scale(.975); }
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform:translateX(-140%);
  transition:transform .55s ease;
}
@media (hover:hover){ .btn:hover::after{ transform:translateX(140%); } }

/* ---------- إطار تركيز واضح للكيبورد (وصولية) ---------- */
:where(a, button, input, select, textarea, .method-opt, .tab-item):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ---------- أرقام مصفوفة عمود تحت عمود ---------- */
.num-font, .big-num, .price-num{ font-variant-numeric:tabular-nums; letter-spacing:.2px; }

/* ---------- سكرول أنعم + سكرول بار أرفع ---------- */
html{ scroll-behavior:smooth; }
/* ---------- سكرول بار موحّد (دارك/لايت) ----------
   السبب في الشكل الأبيض بالأسهم: أي صفحة حاطة scrollbar-width بتخلي
   كروم يتجاهل قواعد ::-webkit-scrollbar ويرسم السكرول بار الافتراضي
   بلون فاتح. هنا بنحدد الألوان بالمعيار الحديث (كروم/فايرفوكس/سفاري
   الجديد) وبنسيب قواعد webkit احتياطي لنفس الشكل. */
:root{ color-scheme:dark; }
:root[data-theme="light"]{ color-scheme:light; }
*{ scrollbar-width:thin; scrollbar-color:rgba(var(--gold-rgb),.45) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{ background:transparent; }
::-webkit-scrollbar-button{ display:none; width:0; height:0; }
::-webkit-scrollbar-thumb{ background:rgba(var(--gold-rgb),.4); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(var(--gold-rgb),.75); background-clip:padding-box; }

/* ---------- دخول الصفحة ---------- */
main{ animation:zb-enter .45s cubic-bezier(.22,1,.36,1); }
@keyframes zb-enter{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- سكيليتون لأي قايمة بتحمّل ---------- */
.zb-skeleton{
  border-radius:12px; min-height:52px;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
  animation:zb-shimmer 1.3s ease-in-out infinite;
}
@keyframes zb-shimmer{ from{ background-position:100% 0; } to{ background-position:0 0; } }

/* ---------- زرار الدعم العايم ---------- */
.support-fab{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.support-fab:hover{ transform:translateY(-3px) scale(1.05); }

/* ---------- وضع الشات ملء الشاشة (community.html) ----------
   بيشيل التوب بار والعنوان والحواف/الحشو حوالين كارت الشات، ويخلي
   الكارت نفسه يملى الشاشة من غير زوايا مدورة ولا ظل — إحساس تطبيق شات
   مستقل، مش صفحة جوه موقع. متفعّل بكلاس واحد على body، وشغال مع
   Fullscreen API الحقيقي لو المتصفح بيدعمها (toggleChatFullscreen()
   في community.html). */
body.chat-fullscreen .topbar,
body.chat-fullscreen .page-title,
body.chat-fullscreen .page-sub,
body.chat-fullscreen .support-fab{ display:none !important; }
body.chat-fullscreen main{
  max-width:none !important; margin:0 !important; padding:0 !important;
  height:100vh; height:100dvh; display:flex; flex-direction:column;
}
body.chat-fullscreen #chat-view{ flex:1; display:flex; min-height:0; }
body.chat-fullscreen #chat-view > .chat-card{
  flex:1; width:100%; height:auto !important; max-height:none !important;
  border-radius:0; border:none; box-shadow:none;
}
body.chat-fullscreen .chat-messages{ padding:16px calc(18px + env(safe-area-inset-right)) 16px calc(18px + env(safe-area-inset-left)); }
body.chat-fullscreen .chat-input-row{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }

/* ---------- تذييل الموقع (فوتر): حقوق الملكية + روابط السياسات ---------- */
.site-footer{
  max-width:1000px; margin:8px auto 26px; padding:18px 16px 0; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--text-muted);
}
.site-footer-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.site-footer-links a{ color:var(--text-muted); text-decoration:none; }
.site-footer-links a:hover{ color:var(--gold); text-decoration:underline; }
.site-footer .dot{ opacity:.5; }
body.chat-fullscreen .site-footer{ display:none !important; }

/* ---------- شيل الزرار العايم بتاع الدعم في كل الصفحات ----------
   كان بيتكرر مع طرق تواصل تانية موجودة أصلاً (زرار واتساب في صفحات
   الدفع، لينك الدعم في الإعدادات). الزرار نفسه لسه موجود في الـ HTML
   بتاع كل صفحة، بس متخفي من هنا — لو حبيت ترجّعه في صفحة معيّنة تقدر
   تضيف قاعدة override بسيطة (زي .support-fab{display:flex !important;})
   في نفس الصفحة دي بس. */
.support-fab{ display:none !important; }

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  body::before, .brand .dotmark, main, .zb-skeleton{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   موبايل: تظبيطات عامة على كل الصفحات (إضافية بحتة، مبتلمسش أي
   تصميم موجود على الديسكتوب — كل قاعدة هنا جوه media query <=760px)
   ============================================================ */
@media (max-width:760px){
  /* منع الـ auto-zoom اللي سفاري بيعمله لما تدوس على أي input/select
     أقل من 16px — ده اللي بيحس إن الصفحة "بتقفز" أول ما تدوس على حقل
     زي اسم المستخدم أو كلمة السر. الحجم البصري فضل زي ما هو تقريبًا
     لإن التاتش أصلًا بيكبّر شوية. */
  input, select, textarea{ font-size:16px; }

  /* مساحة لمس أريح للأزرار الرئيسية والتابات (أقل حد موصى بيه ~44px) */
  .btn, .btn-ghost, .btn-mint, .btn-danger, .channel-tab, .method-opt, .tabbar .tab-item{
    min-height:44px;
  }
  .nav-toggle{ min-width:44px; min-height:44px; }

  /* دروار القائمة (.tabbar) بيوصل لحافة الشاشة السفلية فعليًا،
     فمحتاج يحترم الـ home indicator بتاع الآيفون */
  .tabbar{ padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* التوب بار الصق فوق، فبياخد بالـ notch/الساعة في وضع full-width */
  .topbar{ padding-top:calc(12px + env(safe-area-inset-top, 0px)); }
}


/* ============================================================
   توحيد شكل الزراير (كل الصفحات)
   ============================================================ */
.btn, .btn-ghost, .btn-mint, .btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'IBM Plex Sans Arabic',sans-serif; font-weight:700; line-height:1.35; text-align:center;
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.btn{ display:flex; }
.btn.auto, .btn-ghost.auto{ display:inline-flex; width:auto; }
/* الشكل الأساسي لـ btn-ghost لما يتستخدم لوحده من غير .btn (عرضه على قد محتواه) */
.btn-ghost:not(.btn){ width:auto; padding:11px 20px; border-radius:10px; font-size:14px; }
/* أزرار الإجراءات جوه صفوف المهام: نفس حجم زرار الحذف */
.task .btn-ghost, .task .btn-danger, .task .btn-mint{ flex-shrink:0; width:auto; padding:6px 12px; font-size:12px; border-radius:8px; white-space:nowrap; }
/* في اللايت: .btn بيخلي الخط أبيض، فالـ ghost كان بيبقى أبيض على شفاف (مش باين) */
:root[data-theme="light"] .btn.btn-ghost{ color:var(--text); }
.btn.btn-ghost{ box-shadow:none; }
.btn.btn-ghost::after, .btn:disabled::after{ display:none; }
@media (hover:hover){
  .btn-ghost:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); background:rgba(var(--gold-rgb),.07); filter:none; }
  .btn-danger:hover:not(:disabled){ background:rgba(192,82,74,.12); border-color:rgba(192,82,74,.6); }
  .btn-mint:hover:not(:disabled){ background:rgba(91,140,110,.14); border-color:rgba(91,140,110,.6); }
  .method-opt:not(.active):hover{ border-color:var(--gold); color:var(--gold); }
}
.btn-ghost:disabled, .btn-danger:disabled, .btn-mint:disabled{ opacity:.5; cursor:not-allowed; }
.method-opt{ display:flex; align-items:center; justify-content:center; gap:6px; user-select:none; -webkit-tap-highlight-color:transparent; }
.method-opt:active{ transform:scale(.97); }
.channel-tab{ display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.channel-tab:active{ transform:scale(.96); }

@media (max-width:760px){
  /* الأزرار الصغيرة (حذف/قبول في القوائم) ماتبقاش 44px طول */
  .btn-danger, .btn-mint{ min-height:36px; }
  .channel-tab{ min-height:38px; }
}

/* ============================================================
   ملفات PDF + أزرار التنزيل (الشات والملخصات)
   ============================================================ */
.zfile{
  display:flex; align-items:center; gap:10px; padding:10px 12px; min-width:0; max-width:min(300px,100%);
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; margin-bottom:4px;
}
.zfile-ico{
  width:38px; height:44px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:rgba(232,106,106,.14); color:var(--danger,#E86A6A); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:.3px;
}
.zfile-info{ flex:1; min-width:0; }
.zfile-name{ font-weight:700; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zfile-sub{ font-size:10.5px; color:var(--text-muted); }
.zfile-actions{ display:flex; gap:6px; flex-shrink:0; }
.zfile-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--text); font-family:inherit; font-size:11.5px; font-weight:700;
  text-decoration:none; cursor:pointer; white-space:nowrap; transition:.15s;
}
.zfile-btn:hover{ border-color:var(--gold); color:var(--gold); }
.zfile-btn svg{ width:14px; height:14px; flex-shrink:0; }
.zfile-btn.primary{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--gold-ink); border-color:transparent; }
.zfile-btn.primary:hover{ color:var(--gold-ink); filter:brightness(1.06); }
/* صف PDF في الشات: بيلمّ الأزرار تحت الاسم على الشاشات الضيقة */
.msg-file{ flex-wrap:wrap; }
.msg-file .zfile-actions{ width:100%; }
.msg-file .zfile-btn{ flex:1; }
/* معاينة PDF قبل الإرسال */
.image-preview-bar .image-preview-thumb.is-pdf{ background:rgba(232,106,106,.14); color:var(--danger,#E86A6A); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; }
.image-preview-bar .image-preview-thumb.is-pdf img{ display:none; }

/* صور الشات: زرار تنزيل فوق الصورة + منطقة السحب والإفلات */
.msg-image{ position:relative; }
.msg-img-dl{ position:absolute; inset-block-end:6px; inset-inline-end:6px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.62); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:.9; transition:.15s; }
.msg-img-dl:hover{ background:var(--gold); color:var(--gold-ink); }
.msg-img-dl svg{ width:15px; height:15px; }
.zfile-ico{ overflow:hidden; }
.zfile-ico img{ width:100%; height:100%; object-fit:cover; display:block; }
.z-drop{ border:2px dashed var(--border); border-radius:14px; padding:16px; text-align:center; transition:.15s; background:var(--surface-2); }
.z-drop.over, .chat-card.z-dragover{ border-color:var(--gold); background:rgba(var(--gold-rgb),.09); }
.z-drop-text{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; line-height:1.7; }
.z-drop input[type=file]{ max-width:100%; }

/* زرار تنزيل شغّال (بيجهّز العلامة المائية) */
.is-busy{ opacity:.5; pointer-events:none; }