/* ═══════════════════════════════════════════════════════════════
   css/ux.css — طبقة UX الإضافية (غير مُطبَّقة بـ@layer عمداً: يجب أن تغلب
   أنماط c.js/agents.js المحقونة من JS بلا طبقة). كل الألوان عبر var().
   المحتوى: بوابة المحفظة · زر ✕ الموحّد · نوافذ ملء الشاشة بحشو أقل ·
   لوحة الأرقام · نافذة "؟" · محاكاة TP/SL · تاريخ المدفوعات.
═══════════════════════════════════════════════════════════════ */

/* ════ بوابة المحفظة ════ */
.needs-wallet { display: none !important; }
.needs-wallet.show { display: flex !important; }

/* ════ ✕ الموحّد (مطابق لشكل ✕ نافذة الوكلاء، بحجم مرن) ════ */
.x-btn.x-btn {
  --x: clamp(32px, 4.4vw, 36px);
  width: var(--x); height: var(--x); min-width: var(--x); min-height: var(--x);
  padding: 0; margin: 0; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text-primary);
  font-size: calc(var(--x) * .42); line-height: 1; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; box-shadow: none;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.x-btn.x-btn:hover  { border-color: var(--ac); color: var(--ac); background: var(--bg-elev); }
.x-btn.x-btn:active { transform: scale(.88); }
@media (pointer: coarse) { .x-btn.x-btn { --x: 38px; } }

/* ✕ بزاوية الشاشة العليا (يسار) داخل طبقة النافذة نفسها — ثابت مهما كان محتوى النافذة */
.x-btn.x-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 8; }
.modal-overlay > .x-top ~ .modal .modal-title,
.modal-overlay > .x-top ~ .lock-screen .lock-title { padding-inline: 46px; }
.ag-confirm > .x-top { position: absolute; }
.un-row [hidden] { display: none !important; }

/* بعد حذف زر الإلغاء من صفوف الأزرار — عمود واحد */
.modal-buttons, .om-confirm-btns, .tvcf-btns, .ag-confirm-btns, .al-notice-btns { grid-template-columns: 1fr; }

/* رأس التقويم/الصفقة: ✕ يساراً بدل "رجوع" يميناً */
#calMod .cal-hdr #calBack { order: 3; }
#calMod .cal-hdr > .cal-title { order: 2; }
#calMod .cal-hdr > span:last-child { order: 1; width: 38px !important; }
#omScreen .om-hdr .om-back { order: 3; width: 38px; height: 38px; }
#omScreen .om-hdr .om-title { order: 2; }
#omScreen .om-hdr > span:last-child { order: 1; width: 38px !important; }
#calMod .cal-det-hdr .x-btn { margin: 0; }

/* ════ نوافذ الشاشة الكاملة (إيداع/سحب/سجل/مدفوعات) بحشو أقل ════ */
html #modalDeposit, html #modalWithdraw, html #modalHistory, html #modalPayments { padding: 0; }
html #modalDeposit .modal, html #modalWithdraw .modal, html #modalHistory .modal, html #modalPayments .modal {
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
  padding: max(10px, env(safe-area-inset-top)) max(12px, calc((100% - 640px) / 2)) max(14px, env(safe-area-inset-bottom));
}
html #modalHistory .modal-title, html #modalPayments .modal-title { font-size: var(--fs-2xl); margin-bottom: 2px; }
html #modalHistory .modal-subtitle, html #modalPayments .modal-subtitle { font-size: var(--fs-sm); margin-bottom: 8px; }
html #modalHistory .history-item { padding: 8px 4px; gap: 6px; }
html #modalHistory .hist-grid { padding: 6px 8px; gap: 5px; }
html #modalHistory .hist-asset { font-size: var(--fs-lg); }
html #modalHistory .hist-pnl { font-size: var(--fs-xl); }
html #modalHistory .hist-val { font-size: var(--fs-sm); }
@media (min-width: 560px) { html #modalHistory .hist-grid { grid-template-columns: repeat(3, 1fr); } }

/* الوكلاء */
html #agModal { padding: 0; }
html #agModal .ag-card { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
html #agModal .ag-hdr, html #agModal .ag-body { padding-inline: max(16px, calc((100% - 640px) / 2)); }
html #agModal .ag-hdr { padding-block: 10px; }
html #agModal .ag-close { width: 34px; height: 34px; }

/* التقويم على سطح المكتب: ملء الشاشة أيضاً */
@media (min-width: 768px) {
  html #calMod { align-items: stretch; justify-content: stretch; background: var(--bg-app); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html #calMod .cal-inner { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; box-shadow: none; animation: none; }
  html #calMod .cal-stats, html #calMod .cal-nav, html #calMod .cal-ghdr, html #calMod .cal-grid-wrap {
    width: 100%; max-width: 960px; margin-inline: auto;
  }
}
html #calMod .cal-hdr { padding: 8px 14px; }

/* ════ مسميات "؟" ════ */
.has-hq { cursor: pointer; }
.hq {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-inline-start: 5px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--bg-input); color: var(--text-muted);
  font-size: 9px; line-height: 1; vertical-align: middle; flex-shrink: 0;
  text-transform: none; letter-spacing: 0;
}
.has-hq:hover .hq { border-color: var(--ac); color: var(--ac); }

.hp-ov {
  position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); direction: rtl;
}
.hp-ov.open { display: flex; animation: uxFade .16s ease; }
@keyframes uxFade { from { opacity: 0; } to { opacity: 1; } }
.hp-card {
  position: relative; width: 100%; max-width: 380px; max-height: 80dvh; overflow-y: auto;
  background: var(--bg-card); border: 1.5px solid var(--border-strong); border-radius: var(--r-xl);
  box-shadow: var(--shadow); padding: 18px 18px 18px; animation: uxPop .2s var(--ease-bounce);
}
@keyframes uxPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.hp-title { font-size: var(--fs-xl); color: var(--text-primary); margin: 0 0 8px; padding-inline-end: 4px; min-height: 30px; display: flex; align-items: center; }
.hp-body { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text-secondary); }
.hp-ex {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--ac-dim); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-primary);
}
.hp-ex b { display: block; color: var(--ac); font-size: var(--fs-xs); margin-bottom: 2px; }

/* ════ محاكاة TP/SL ════ */
.om-sim {
  margin-top: 6px; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.6;
  background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); direction: rtl;
}
.om-sim b { font-family: var(--font-mono); font-size: var(--fs-lg); margin-inline: 4px; }
.om-sim i { font-style: normal; font-size: var(--fs-xs); opacity: .85; }
.om-sim.up   { color: var(--up);   background: var(--up-dim);   border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.om-sim.dn   { color: var(--dn);   background: var(--dn-dim);   border-color: color-mix(in srgb, var(--dn) 35%, transparent); }
.om-sim.warn { color: var(--warn); background: var(--warn-dim); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   الدفعة 2 — لوحة الأرقام v2 · العناوين · تأكيد الإيداع/السحب · اسم المستخدم ·
   صور الأسواق · سعر حيّ بالتأكيد
═══════════════════════════════════════════════════════════════ */

/* ── عرض العناوين: أول/آخر 4 خانات ملوّنة ── */
.ad-hl { color: var(--warn); background: var(--warn-dim); border-radius: 3px; padding: 0 2px; font-weight: 900; }
.ad-pre { opacity: .6; }
.ag-addr-txt.ad-full { white-space: normal; overflow: visible; text-overflow: clip; }
.ad-full { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; direction: ltr; text-align: left; overflow-wrap: anywhere; word-break: break-all; }
.ad-box { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 10px; user-select: all; -webkit-user-select: all; }
.ad-view { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.ad-view.hidden { display: none; }
.ad-lbl { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.ad-bad { font-size: var(--fs-sm); color: var(--dn); }
.ad-ok { font-size: var(--fs-xs); color: var(--up); }
.ad-warnline { font-size: var(--fs-xs); color: var(--warn); }

/* ── ورقة تأكيد الإيداع/السحب ── */
.tx-ov {
  position: fixed; inset: 0; z-index: 9300; display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); direction: rtl;
}
.tx-ov.open { display: flex; animation: uxFade .16s ease; }
.tx-card {
  position: relative; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto;
  background: var(--bg-card); border-top: 1.5px solid var(--border-strong); border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: npUp .22s var(--ease-out);
}
@media (min-width: 640px) { .tx-ov { align-items: center; } .tx-card { border: 1.5px solid var(--border-strong); border-radius: 22px; } }
.tx-title { font-size: var(--fs-2xl); text-align: center; margin-bottom: 10px; color: var(--text-primary); }
.tx-rows { background: var(--bg-input); border-radius: var(--r-md); padding: 2px 12px; margin-bottom: 10px; }
.tx-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.tx-row:last-child { border-bottom: none; }
.tx-k { color: var(--text-secondary); }
.tx-v { font-family: var(--font-mono); color: var(--text-primary); direction: ltr; }
.tx-v.up { color: var(--up); } .tx-v.warn { color: var(--warn); }
.tx-addr { margin-bottom: 10px; }
.tx-addr-l { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 4px; }
.tx-addr-l em { font-style: normal; color: var(--warn); font-size: var(--fs-xs); margin-inline-start: 4px; }
.tx-chk { display: flex; align-items: center; gap: 9px; padding: 9px 10px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--warn-dim); font-size: var(--fs-sm); color: var(--text-primary); cursor: pointer; }
.tx-chk input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--warn); -webkit-appearance: auto; appearance: auto; }
.tx-note { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }
.tx-go { width: 100%; min-height: 48px; border: none; border-radius: 999px; color: #fff; font-size: var(--fs-xl); font-family: var(--font-ar); transition: filter .12s, transform .1s; }
.tx-go.ok { background: linear-gradient(135deg, var(--up-2), color-mix(in srgb, var(--up-2) 78%, black)); }
.tx-go.danger { background: linear-gradient(135deg, var(--dn-2), color-mix(in srgb, var(--dn-2) 78%, black)); }
.tx-go:active { transform: scale(.98); filter: brightness(.88); }
.tx-go:disabled { opacity: .4; pointer-events: none; }

/* ── اسم المستخدم داخل قائمة الحساب ── */
.un-box { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.un-lbl { font-size: var(--fs-sm); color: var(--text-primary); }
.un-lbl small { color: var(--text-muted); font-size: var(--fs-xs); margin-inline-start: 4px; }
.un-row { display: flex; gap: 6px; min-width: 0; }
.un-in { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm); font-size: max(16px, var(--fs-md)); color: var(--text-primary); }
.un-save { flex-shrink: 0; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px solid var(--ac); background: var(--ac-dim); color: var(--ac); font-size: var(--fs-sm); font-family: var(--font-ar); }
.un-save:active { transform: scale(.95); }
.un-msg { font-size: var(--fs-xs); color: var(--up); min-height: 14px; }
/* اسم 9 أحرف داخل زر الاتصال: اقتطاع آمن بلا كسر تخطيط */
.nav-connect-btn .cb-lbl { min-width: 0; }

/* ── صور الأسواق: دائرة أنيقة بلا خلفية ولا مربع خلفها ── */
html .market-card-img-wrap {
  background: transparent; border: 0; box-shadow: none; border-radius: 50%;
  width: 52px; height: 52px; overflow: hidden;
}
html .market-card-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none;
}
@media (min-width: 900px) { html .market-card-img-wrap { width: 64px; height: 64px; } }

/* ── سعر حيّ بتأكيد أمر السوق ── */
.om-live::before { content: '●'; color: var(--up); font-size: 8px; margin-inline-end: 5px; animation: omLiveDot 1.4s ease-in-out infinite; vertical-align: middle; }
@keyframes omLiveDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }


/* ═══════════════════════════════════════════════════════════════
   الدفعة 3 — لوحة الأرقام بشاشة كاملة (كقفل التطبيق) · تاريخ المدفوعات ·
   اسم المستخدم/👁 · شارة قوالب الرسم · وضع رابط الوكيل · صور دائرية
═══════════════════════════════════════════════════════════════ */

/* وضع رابط الوكيل: لا إيداع/سحب/وكلاء */
.link-hidden { display: none !important; }

/* ── لوحة الأرقام: شاشة كاملة بلا تشتيت ── */
.np-sheet {
  position: fixed; inset: 0; z-index: 9000; display: none; flex-direction: column; direction: ltr;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--bg-app); -webkit-user-select: none; user-select: none; overscroll-behavior: contain;
}
.np-sheet.open { display: flex; animation: uxFade .14s ease; }
.np-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.np-lbl { flex: 1; min-width: 0; text-align: center; direction: rtl; font-size: var(--fs-xl); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 0; }
.np-disp { display: flex; align-items: baseline; justify-content: center; gap: 10px; direction: ltr; max-width: 100%; }
.np-val { font-family: var(--font-mono); font-size: clamp(36px, 11vw, 58px); line-height: 1.15; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 8px; padding-inline: 6px; }
.np-val.np-empty { color: var(--text-muted); }
.np-val.np-fresh { background: var(--ac-dim); }
.np-val.np-limit { animation: npShake .35s; color: var(--warn); }
@keyframes npShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.np-unit { font-size: var(--fs-lg); color: var(--text-secondary); direction: rtl; white-space: nowrap; }
.np-hint { display: block; min-height: 20px; max-width: 92%; text-align: center; direction: rtl; font-size: var(--fs-md); line-height: 1.5; color: var(--text-secondary); }
.np-hint.mute { color: var(--text-muted); }
.np-hint.warn { color: var(--warn); }
.np-nav { display: flex; gap: 6px; flex-shrink: 0; }
.np-navb { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-elev); color: var(--text-primary); font-size: 22px; line-height: 1; }
.np-navb:active { transform: scale(.9); background: var(--ac-dim); }
.np-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; direction: rtl; }
.np-chip { min-width: 46px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--bg-input); color: var(--text-secondary); font-family: var(--font-mono); font-size: 15px; }
.np-chip:active { transform: scale(.93); background: var(--ac-dim); color: var(--ac); border-color: var(--ac); }
.np-pad { flex: 0 0 auto; height: min(46dvh, 400px); max-width: 460px; width: 100%; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.np-key { border-radius: 16px; border: 1.5px solid var(--border-strong); background: var(--bg-elev); color: var(--text-primary); font-family: var(--font-mono); font-size: 26px; transition: transform .08s, background .12s; }
.np-key:active { transform: scale(.94); background: var(--ac-dim); }
.np-bs { font-size: 24px; }
.np-done { grid-column: 4; grid-row: 1 / span 4; border-radius: 16px; border: none; color: #fff; font-size: 20px; font-family: var(--font-ar); background: linear-gradient(160deg, var(--up), color-mix(in srgb, var(--up) 60%, black)); }
.np-done:active { filter: brightness(.85); transform: scale(.97); }
@media (max-height: 560px) { .np-chips { display: none !important; } .np-val { font-size: 34px; } .np-pad { height: 62dvh; } }
input[data-np="1"] { cursor: pointer; caret-color: transparent; }

/* ── تاريخ المدفوعات (شاشة كاملة، حقول مضغوطة بحجم نص موحّد) ── */
.pay-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.pay-sum:empty { display: none; }
.pay-sum-c { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.pay-sum-c span { font-size: 12px; color: var(--text-secondary); }
.pay-sum-c b { font-family: var(--font-mono); font-size: 13px; }
.pay-sum-c b.up, .pay-grid b.up { color: var(--up); } .pay-sum-c b.dn, .pay-grid b.dn { color: var(--dn); }
.pay-chips { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 6px; scrollbar-width: none; }
.pay-chips:empty { display: none; }
.pay-chips::-webkit-scrollbar { display: none; }
.pay-chip { flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary); font-size: 12px; font-family: var(--font-ar); }
.pay-chip i { font-style: normal; font-family: var(--font-mono); margin-inline-start: 4px; opacity: .8; }
.pay-chip.on { border-color: var(--ac); color: var(--ac); background: var(--ac-dim); }
.pay-list { flex: 1; min-height: 0; overflow-y: auto; }
.pay-item { padding: 6px 2px 7px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.pay-item:last-child { border-bottom: none; }
.pay-hd { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-badge { flex-shrink: 0; font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.pay-badge.dep { background: var(--up-dim); color: var(--up); } .pay-badge.wd { background: var(--dn-dim); color: var(--dn); } .pay-badge.xf { background: var(--ac-dim); color: var(--ac); }
.pay-route { font-size: 12px; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; flex: 1; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; background: var(--bg-input); border-radius: var(--r-sm); padding: 5px 8px; }
.pay-grid > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pay-grid i { font-style: normal; font-size: 12px; color: var(--text-muted); }
.pay-grid b { font-size: 12px; color: var(--text-primary); font-family: var(--font-mono); direction: ltr; text-align: right; white-space: nowrap; }

/* ── اسم المستخدم: حفظ ← ✕ ── */
.un-row .un-x.x-btn { --x: 34px; }
.un-in[readonly] { color: var(--ac); background: var(--ac-dim); }

/* ── شارة قوالب الرسم البياني ── */
.tvh-lay { flex: 0 1 auto; max-width: 42%; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--bg-elev); color: var(--text-secondary); font-size: 12px; font-family: 'Cairo', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.tvh-lay.on { border-color: var(--ac); color: var(--ac); }
.tvh-lay.saved { border-color: var(--up); color: var(--up); background: var(--up-dim); }
.tvh-lay:active { transform: scale(.95); }
@media (pointer: coarse) {
  .tvh-btn { width: 36px; height: 36px; } .tvs-iv { height: 32px; min-width: 42px; } .tvad-row { min-height: 44px; }
}

/* ── نافذة معلومات الأصل: صورة دائرية بلا خلفية كبطاقات الأسواق ── */
html .asset-info-img-wrap { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 50%; overflow: hidden; }
html .asset-info-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; }