/* ╔══════════════════════════════════════════════════════════════════════╗ ║ أوروك — طبقة الترتيب الشامل (uruk-pro.css) — v7.13 ║ ║ 1) نظام تخطيط تلقائي حسب أبعاد الجهاز (طولي/عرضي/شاشة طويلة/عريضة) ║ ║ 2) إصلاح "الطفرة/الوميض" عند النقر وفتح القوائم والمحادثات ║ ║ 3) تحسينات بصرية وأداء عامة ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ═══ 1) أساس متجاوب: ارتفاع حقيقي للشاشة على الجوال ═══ */ :root { --vh: 1vh; --app-h: 100vh; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --pro-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } @supports (height: 100dvh) { :root { --app-h: 100dvh; } } html, body { min-height: var(--app-h); overscroll-behavior-y: none; } body { padding-left: var(--safe-l); padding-right: var(--safe-r); } /* ═══ 2) إصلاح الطفرة: لا تحديد نص ولا وميض نقر ولا تأخير 300ms ═══ */ * { -webkit-tap-highlight-color: transparent; } button, .setting-row, .chat-item, .icon-btn, .call-btn, .tab, [data-back], [role="button"] { touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* أثناء انتقال شاشة، نمنع أي نقرة ثانية توصل ⇒ ما يصير فتح مزدوج */ html[data-nav-busy="1"] .screen, html[data-nav-busy="1"] .chat-item, html[data-nav-busy="1"] .setting-row { pointer-events: none; } /* الشاشات تنزلق بسلاسة موحّدة وبدون إعادة رسم ثقيلة */ .screen.slide { will-change: transform, opacity; backface-visibility: hidden; transition: transform 0.26s var(--pro-ease), opacity 0.2s var(--pro-ease); } .screen.hidden { display: none !important; } /* ═══ 3) نظام التخطيط التلقائي حسب شكل الجهاز ═══ */ /* الحالات تُضبط من uruk-pro.js على : data-orient = portrait | landscape data-shape = tall (شاشة طويلة) | wide (شاشة عريضة) | balanced data-size = xs | sm | md | lg | xl */ /* شاشة طويلة جداً (جوالات 20:9) — نعطي مساحة أكبر للرسائل */ html[data-shape="tall"] .messages, html[data-shape="tall"] #messages { padding-bottom: calc(12px + var(--safe-b)); } html[data-shape="tall"] .green-header, html[data-shape="tall"] .simple-header { padding-top: calc(8px + var(--safe-t)); } /* الوضع الأفقي على الجوال — نقلّل ارتفاع الرؤوس ونوسّع المحتوى */ html[data-orient="landscape"][data-size="xs"] .green-header, html[data-orient="landscape"][data-size="sm"] .green-header, html[data-orient="landscape"][data-size="sm"] .simple-header { min-height: 48px; padding-top: calc(2px + var(--safe-t)); padding-bottom: 2px; } html[data-orient="landscape"][data-size="sm"] .call-actions { gap: 10px; } html[data-orient="landscape"][data-size="sm"] .call-avatar-ring { transform: scale(0.62); margin-block: -18px; } html[data-orient="landscape"][data-size="sm"] .call-btn { width: 48px; height: 48px; } /* شاشة عريضة (تابلت/كمبيوتر) — لوحة جانبية + محادثة جنب بعض */ html[data-shape="wide"][data-size="lg"] .settings-list, html[data-shape="wide"][data-size="xl"] .settings-list { max-width: 720px; margin-inline: auto; } html[data-size="xl"] .msg { max-width: 62%; } html[data-size="lg"] .msg { max-width: 70%; } /* شاشات صغيرة جداً — تصغير متوازن بدل القص */ html[data-size="xs"] { font-size: 15px; } html[data-size="xs"] .call-btn { width: 52px; height: 52px; } html[data-size="xs"] .setting-title { font-size: 14.5px; } /* واجهة المكالمة تتكيّف تلقائياً بالاتجاهين */ .call-overlay { height: var(--app-h); padding-bottom: calc(16px + var(--safe-b)); padding-top: calc(8px + var(--safe-t)); } .call-actions { flex-wrap: wrap; justify-content: center; } .call-btn.active { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.55); } /* ═══ 4) بحث الإعدادات + الأقسام المرتّبة ═══ */ .pro-search-wrap { position: sticky; top: 0; z-index: 5; padding: 10px 12px; background: var(--bg, #fff); } .pro-search { width: 100%; border-radius: 14px; border: 1px solid rgba(128, 128, 128, 0.25); padding: 11px 14px; font: inherit; background: rgba(128, 128, 128, 0.09); color: inherit; outline: none; } .pro-search:focus { border-color: rgba(37, 99, 235, 0.6); } .pro-hide { display: none !important; } /* ═══ 5) شارة الحساب المحذوف ═══ */ .deleted-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(220, 38, 38, 0.12); color: #dc2626; font-weight: 600; } /* ═══ 6) تلميح صغير أعلى الشاشة (للتنبيهات الخفيفة) ═══ */ .pro-hint { position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%); top: calc(8px + var(--safe-t)); z-index: 9999; background: rgba(17, 24, 39, 0.94); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; transition: transform 0.28s var(--pro-ease); pointer-events: none; max-width: 92vw; text-align: center; } .pro-hint.show { transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .screen.slide, .pro-hint { transition: none !important; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ v7.15 — حتمية القوائم + لمسات النظام + تنظيم الإعدادات ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ═══ 7) رموز الحركة والمسافات (تُقرأ من design-tokens.css) ═══ */ /* ═══ 8) القوائم المنسدلة — مصدر حقيقة واحد: .hidden ═══ ألغينا animation:pop المتكررة (كانت أي نقرة شبح تعيد تشغيلها ⇒ وميض يشبه الفتح المزدوج). الآن الظهور/الاختفاء بانتقال واحد فقط. */ .dropdown, .dropdown:not(.hidden) { animation: none !important; } .dropdown { display: block !important; /* حتى يشتغل الانتقال بدل display:none */ opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.96) translateY(-6px); transform-origin: top var(--dd-origin, left); transition: opacity 0.17s var(--pro-ease), transform 0.19s var(--pro-spring, var(--pro-ease)), visibility 0s linear 0.19s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 18px 44px rgba(0, 0, 0, 0.22); } .dropdown:not(.hidden) { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) translateY(0); transition-delay: 0s; } .dropdown button { transition: background 0.12s var(--pro-ease); } .dropdown button:active { transform: scale(0.985); } /* ═══ 9) لمسات دقيقة عامة (ضغط، تركيز، تمرير، سهم) ═══ */ button:active, .icon-btn:active, .setting-row:active, .settings-profile-row:active, .chat-item:active { transform: scale(0.985); } button, .icon-btn, .setting-row, .settings-profile-row, .chat-item { transition: transform 0.12s var(--pro-ease), background 0.15s var(--pro-ease); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; } .setting-row .chevron, .settings-profile-row .chevron { transition: transform 0.16s var(--pro-ease); } .setting-row:active .chevron, .settings-profile-row:active .chevron { transform: translateX(-3px); } /* أهداف لمس مريحة */ .icon-btn, [role="button"].icon-btn { min-width: 44px; min-height: 44px; } /* أشرطة تمرير نحيلة على الكمبيوتر فقط */ @media (hover: hover) and (pointer: fine) { * { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.35) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 999px; } *::-webkit-scrollbar-track { background: transparent; } } /* مقبض التبديل بحركة أنعم */ .toggle, .toggle * { transition: all 0.22s var(--pro-spring, var(--pro-ease)) !important; } /* ═══ 10) الإعدادات: أقسام قابلة للطي + شكل بطاقي ═══ */ #settings-screen .section-label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding-block: 14px 8px; letter-spacing: 0.2px; font-weight: 700; } .pro-sec-arrow { margin-inline-start: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.5; transform: rotate(45deg); transition: transform 0.19s var(--pro-ease); } .section-label.pro-collapsed .pro-sec-arrow { transform: rotate(135deg); /* مطويّ: السهم يشير لبداية السطر (RTL) */ } .pro-sec-hidden { display: none !important; } /* شكل بطاقي: أول/آخر صف بالقسم */ #settings-screen .setting-row, #settings-screen .settings-profile-row { border-radius: 0; } #settings-screen .pro-first { border-start-start-radius: 16px; border-start-end-radius: 16px; } #settings-screen .pro-last { border-end-start-radius: 16px; border-end-end-radius: 16px; border-bottom: none; } #settings-screen .settings-list { padding-inline: 10px; } #settings-screen .setting-row, #settings-screen .settings-profile-row { background: var(--surface); } /* منطقة الخطر بالأسفل — بالأحمر */ #settings-screen .danger-row .setting-title { color: var(--danger); } /* ═══ 11) شريط البحث اللاصق داخل الإعدادات ═══ */ .pro-search-wrap { background: var(--bg); padding-block: 10px 8px; } .pro-search:focus-visible { outline: none; } /* ═══ 12) احترام تقليل الحركة ═══ */ @media (prefers-reduced-motion: reduce) { *, .dropdown, .toggle, .toggle * { transition-duration: 0.001s !important; animation-duration: 0.001s !important; } }