/* Clear contrast, responsive controls and language direction. */ html[data-theme=light]{--brand-soft:#C3D9FF!important;--zy-soft:#C3D9FF!important;--zy-bright:#6B90DA!important}.chat-header button:hover{background:rgba(var(--zy-veil),.07)!important}.focused-model-menu .focused-model-title strong{font-size:15px!important}.availability-card .availability-foot{color:#b5b0bb}.legal-consent summary{cursor:pointer;margin-top:10px}.legal-consent input:focus-visible{outline:2px solid #ed344d;outline-offset:3px} .focused-model-copy{flex:1;min-width:0}.focused-model-title strong{overflow-wrap:anywhere}.focused-model-title small{flex:none}.focused-model-status{flex:none;align-self:center}.focused-model-trigger:focus-visible,.focused-model-option:focus-visible{outline:2px solid #ed344d!important;outline-offset:2px}.model-subscribe{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;text-align:start}.model-subscribe strong,.model-subscribe small{display:block}.model-subscribe small{margin-top:6px;line-height:1.6;color:var(--zy-text2)}.availability-card{box-sizing:border-box}.site-availability{box-sizing:border-box}.availability-badge{margin:20px 0 0!important}.availability-title{margin-top:14px!important}.app-tooltip[hidden]{display:none!important} @media(max-width:400px){.site-availability{padding:16px!important}.availability-card{padding:28px 20px!important}.focused-model-title{flex-wrap:wrap}.chat-header .language-switch{padding-inline:8px}} .chat-welcome{gap:0!important;justify-content:center!important;width:100%!important;min-height:420px!important;padding-block:32px!important}.chat-welcome .welcome-brand{display:flex!important;align-items:center;justify-content:center;width:112px!important;height:112px!important;min-height:112px!important;margin:0 auto 20px!important;flex:none!important}.chat-welcome .welcome-brand img{width:112px!important;height:112px!important;max-width:112px!important;max-height:112px!important;object-fit:contain!important}.welcome-title{margin:0 0 8px!important;color:var(--zy-text)!important;-webkit-text-fill-color:currentColor!important;background:none!important}.welcome-subtitle{margin:0 0 28px!important}.app-tooltip{font-size:10px!important;padding:4px 7px!important;border-radius:5px!important;max-width:180px!important;line-height:1.4!important;font-weight:400!important}.chat-header svg,.chat-sidebar button svg,.composer-shell button svg{stroke-width:1.65!important;stroke-linecap:round;stroke-linejoin:round}.chat-header svg{width:19px;height:19px}.availability-card{max-width:620px!important;padding:clamp(30px,5vw,58px)!important;border-radius:24px!important}.availability-brand img{width:88px!important;height:88px!important}.availability-title{margin-top:24px!important}.availability-admin{background:transparent!important;border-color:#ffffff20!important;color:#aaaab8!important}.availability-contact{background:#d91f3c!important;border-color:#d91f3c!important}.availability-channel{background:#ffffff06!important}.availability-actions a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;box-sizing:border-box}.availability-actions svg{width:18px;height:18px;flex:none}.availability-account{margin-top:24px;font-size:12px}.availability-account a{color:#9d9dab;text-decoration:none}.availability-foot{margin-top:18px!important}.contact-unconfigured{color:#aaaab6;font-size:12px;line-height:1.8} @media(max-width:600px){.chat-welcome{min-height:360px!important;padding-block:24px!important}.chat-welcome .welcome-brand,.chat-welcome .welcome-brand img{width:100px!important;height:100px!important;min-height:100px!important;max-width:100px!important;max-height:100px!important}.availability-actions{flex-direction:column}.availability-actions a{width:100%}} html[lang=en] body,html[lang=en] button,html[lang=en] input,html[lang=en] select,html[lang=en] textarea{font-family:Inter,"Segoe UI",Arial,sans-serif!important}html[dir=ltr] .auth-side,html[dir=ltr] .page{direction:ltr}html[dir=ltr] .settings-dialog{direction:ltr!important}html[dir=ltr] .settings-layout{direction:ltr!important}.legal-consent[hidden]{display:none!important} html:not([data-theme=light]){--zy-bg:#17181c!important;--zy-solid:31,33,39!important;--zy-text:#f3f1ed!important;--zy-text2:#b9bac5!important;--zy-bgrgb:23,24,28!important;--zy-veil:255,255,255!important} html[data-theme=light]{--zy-bg:#e8e5dd!important;--zy-solid:241,238,230!important;--zy-text:#292b30!important;--zy-text2:#62616a!important;--zy-bgrgb:232,229,221!important;--zy-veil:0,0,0!important} .chat-sidebar{background:#111216!important}.chat-header button{color:var(--zy-text2)!important}.chat-content{color:var(--zy-text)!important}.chat-content p{color:inherit!important} html[data-theme=light] .chat-sidebar{background:#dedbd3!important}html[data-theme=light] .chat-header{background:#e8e5dd!important}html[data-theme=light] .chat-composer{background:#f1eee6!important}html[data-theme=light] .welcome-questions>button{background:#eeebe3!important}html[data-theme=light] .focused-model-menu{box-shadow:0 16px 48px #35312b22!important} .model-menu-scrim{pointer-events:none!important;background:none!important;backdrop-filter:none!important} .focused-model-menu{width:min(390px,calc(100vw - 24px))!important;padding:12px!important;border-radius:18px!important;max-height:calc(100dvh - 88px)!important;overflow:auto!important;background:rgb(var(--zy-solid))!important;box-shadow:0 18px 65px #0005!important} .focused-model-heading{padding:12px 12px 18px!important}.focused-model-heading strong{font-size:16px!important}.focused-model-heading span{font-size:12px!important;color:var(--zy-text2)!important}.focused-model-heading button{width:36px;height:36px;border-radius:10px!important} .focused-model-option{margin:3px 0!important;padding:16px!important;min-height:82px!important;border:1px solid transparent!important;display:flex!important;gap:16px!important}.focused-model-option[aria-checked=true]{border-color:#4d90fe4d!important;background:var(--zy-fill,#0b57d0)10!important}.focused-model-title{display:flex;gap:10px;align-items:center;justify-content:space-between}.focused-model-title small{font-size:10px!important;padding:3px 7px!important;border-radius:5px!important;color:var(--zy-text2)!important}.focused-model-description{font-size:12px!important;line-height:1.7!important;margin-top:5px!important;color:var(--zy-text2)!important}.focused-model-status{color:#e9314b!important;font-size:18px!important}.model-subscribe{margin-top:14px!important;padding:16px!important}.model-subscribe b{color:#ef314e!important} .app-tooltip{position:fixed;z-index:2147483647;pointer-events:none;background:#30323b;color:#fff;border:1px solid #ffffff22;padding:6px 10px;border-radius:7px;font-size:12px;line-height:1.5;max-width:240px;text-align:center;box-shadow:0 4px 16px #0003} .global-language{z-index:12000!important}.translation-notice{position:fixed;bottom:12px;inset-inline-end:12px;z-index:12001;max-width:min(340px,calc(100vw - 24px));padding:10px 14px;border:1px solid #8885;background:#282a32;color:#eee;border-radius:9px;font:12px/1.6 system-ui} .availability-actions button{display:inline-flex;gap:9px;align-items:center;justify-content:center;padding:12px 18px;border:1px solid #ffffff22;border-radius:10px;color:#eee;font:inherit;font-size:13px;min-height:44px}.availability-actions button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:600px){.availability-actions button{width:100%}} .language-switch{border:1px solid #8884;background:transparent;color:inherit;border-radius:8px;min-height:36px;padding:6px 10px;font:inherit;cursor:pointer}.global-language{position:fixed;inset-block-start:18px;inset-inline-end:20px;z-index:60;color:#ddd;background:#202126} html[dir=ltr] .admin-console .main{margin-right:0;margin-left:250px}html[dir=ltr] .admin-console .sidebar{right:auto;left:0;border-right:1px solid #ffffff15;border-left:0}html[dir=ltr] .admin-console th,html[dir=ltr] .admin-console td small{text-align:left}html[dir=ltr] .focused-model-menu{right:auto!important;left:0!important}html[dir=ltr] .settings-layout nav button{text-align:left!important} @media(max-width:900px){.chat-header{flex-wrap:wrap!important;gap:8px!important;height:auto!important;padding:10px 12px!important}.chat-header>div:last-child{display:flex!important;visibility:visible!important;gap:4px!important;flex-shrink:0}.chat-header>div:last-child>button{display:grid!important;visibility:visible!important;opacity:1!important;min-width:40px;min-height:40px}.chat-header>div:first-child{min-width:0;flex:1}.focused-model-trigger{max-width:100%;min-height:40px}.focused-model-trigger>span:nth-child(2){max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composer-shell button{min-width:40px;min-height:40px}html[dir=ltr] .admin-console .main{margin:0}html[dir=ltr] .admin-console .sidebar{transform:translateX(-105%)}html[dir=ltr] .admin-console.nav-open .sidebar{transform:translateX(0)}} @media(max-width:540px){.chat-header>div:last-child{width:100%;justify-content:flex-end;border-top:1px solid rgba(var(--zy-veil),.07);padding-top:4px}.focused-model-menu{position:fixed!important;left:12px!important;right:12px!important;top:116px!important;bottom:auto!important;width:auto!important;max-height:calc(100dvh - 140px)!important}.chat-header .language-switch{font-size:12px}.global-language{top:12px;inset-inline-end:12px}} .site-availability{position:fixed!important;inset:0!important;z-index:10000!important;overflow:auto!important;display:grid!important;place-items:center!important;padding:28px!important;background:radial-gradient(ellipse at 50% 15%,#4b162440,transparent 60%),#141519!important;color:#f1eef0!important}.availability-card{max-width:580px;width:100%;text-align:center;border:1px solid #ffffff12;background:#1c1d23;border-radius:26px;padding:clamp(28px,5vw,52px);box-shadow:0 24px 90px #0003}.availability-brand img{width:64px;height:64px;object-fit:contain}.availability-badge{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:#ff9caa;background:var(--zy-fill,#0b57d0)10;border:1px solid #4d90fe2e;border-radius:30px;padding:7px 13px;margin:24px 0 14px}.availability-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--zy-fill,#0b57d0)}.availability-title{font-size:clamp(26px,5vw,38px);font-weight:600;line-height:1.5;margin:8px 0 16px}.availability-message{font-size:15px;line-height:1.9;color:#b7b7c3;white-space:pre-wrap;overflow-wrap:anywhere}.availability-reopen{font-size:13px;color:#c6c4cd;padding:14px;border-radius:12px;background:#ffffff05}.availability-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}.availability-actions a{padding:12px 18px;border:1px solid #ffffff22;border-radius:10px;color:#eee;text-decoration:none;font-size:13px}.availability-actions a:first-child{background:#cc203a;border-color:#cc203a}.availability-foot{color:#858593;font-size:12px;margin-top:28px} .legal-consent{margin:18px 0;padding:14px;border:1px solid #8884;border-radius:10px;font-size:13px;line-height:1.8}.legal-consent label{display:flex;gap:10px;align-items:flex-start}.legal-consent input{flex:none;width:18px;height:18px;accent-color:#4d90fe}.legal-consent a{color:#ef7184;text-decoration:underline}.legal-gate{position:fixed;inset:0;background:#111b;backdrop-filter:blur(8px);z-index:20000;display:grid;place-items:center;padding:20px}.legal-gate>section{max-width:600px;width:100%;max-height:90dvh;overflow:auto;background:#22232a;color:#eee;border:1px solid #5555;border-radius:20px;padding:30px}.legal-gate pre{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.9;max-height:40vh;overflow:auto}.legal-gate button{background:#cf243d;color:#fff;padding:12px 20px;border:0;border-radius:9px;cursor:pointer}.legal-gate button:disabled{opacity:.4} /* ============================================================ شاشة الصيانة — تحسينات ------------------------------------------------------------ ما قِستُه على الشاشة الحيّة (1000×700) قبل التعديل: البطاقة 620×644 عند y=36، والشاشة 700. أي أن 644+56=700 بالضبط. ⇒ أي نافذة أقصر من 700px تُجبر الزائر على تمرير داخل طبقة fixed. خطآن حقيقيان أُصلحان هنا: 1) القصّ في الأعلى. الحاوية display:grid مع place-items:center وoverflow:auto. عندما يطول الابن عن الحاوية، يفيض من الأعلى خارج مبدأ التمرير، فلا يمكن للوصول إليه. align-content:safe center يعود إلى البداية عند الفيض. البديل الوحيد كان align-content:center وهو ما Behavior غير مقصود. 2) توازن عمودي لا يناسب الشاشات القصيرة. الأحجام صارت clamp() على dvh، فتنكمش البطاقة تلقائياً بدل أن تُقصّ، مع قيمة احتياطية تُكتب قبل dvh لمن لا يدعمه. ما لم أغيّره عن قصد: • زر «التواصل مع الإدارة» الأحمر. أحمر مميز وليس حالة خطر، لكنه اختيار تصميمي قائم، ولم يُطلب تغييره. • النص内容和 أسماء الحسابات. (@wormgpt_cam و @WormGPTSupport قِستُ ترتيب محارفها في RTL: غير معكوسة، فلا حاجة لـ bdi هنا). • شعار الموقع وصورته. ============================================================ */ /* ---------- 1. الخلفية: الهالة الحمراء القديمة ← أزرق الهوية ---------- */ .site-availability { background: radial-gradient(ellipse 72% 56% at 50% 6%, rgba(11, 87, 208, .26), transparent 62%), radial-gradient(ellipse 92% 72% at 50% 104%, rgba(77, 144, 254, .10), transparent 70%), #0b0b0c !important; /* يمنع قصّ الأعلى عند الفيض */ align-content: safe center !important; padding: clamp(16px, 3.4vh, 28px) clamp(16px, 4vw, 28px) !important; } /* ---------- 2. البطاقة: سطح أهدأ وحدّ أرقّ وظل أوسع ---------- */ .availability-card { max-width: min(560px, 100%) !important; border: 1px solid rgba(77, 144, 254, .16) !important; background: linear-gradient(180deg, #16171b, #131418) !important; box-shadow: 0 1px 0 rgba(195, 217, 255, .05) inset, 0 24px 70px rgba(0, 0, 0, .55) !important; /* احتياطي، ثم dvh */ padding: 40px 32px !important; padding: clamp(20px, 4.4vh, 48px) clamp(22px, 6vw, 48px) !important; } /* ---------- 3. الشعار ينكمش مع الارتفاع ---------- */ .availability-brand img { width: clamp(48px, 8.5dvh, 84px) !important; height: clamp(48px, 8.5dvh, 84px) !important; width: clamp(48px, 8.5vh, 84px) !important; height: clamp(48px, 8.5vh, 84px) !important; opacity: .95; } /* ---------- 4. الشارة: وردي ← أزرق، مع نبضة خفيفة ---------- */ .availability-badge { margin: clamp(12px, 2vh, 20px) 0 0 !important; color: var(--zy-soft, #c3d9ff) !important; background: rgba(11, 87, 208, .12) !important; border-color: rgba(77, 144, 254, .3) !important; } .availability-badge::before { background: var(--zy-1, #4d90fe) !important; animation: availability-pulse 2.4s ease-in-out infinite; } @keyframes availability-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } /* ---------- 5. العنوان ---------- */ .availability-title { margin: clamp(14px, 2.2vh, 24px) 0 clamp(10px, 1.6vh, 16px) !important; font-size: clamp(24px, 4.6vh, 34px) !important; font-size: clamp(24px, 4.6dvh, 34px) !important; line-height: 1.4; text-wrap: balance; } .availability-title:focus-visible { outline: 2px solid var(--zy-2, #3079ed) !important; outline-offset: 6px; border-radius: 6px; } /* ---------- 6. الرسالة: محاذاة لليسار وقياس أضيق ---------- النص 240 حرفاً في أربع أسطر. التوسيط في فقرة متعددة الأسطر يجعل حافتها اليمنى مترجفة، أما حافة واحدة ثابتة فتُقرأ أسرع. */ .availability-message { text-align: start !important; max-width: 46ch; margin-inline: auto; font-size: clamp(15px, 1.15dvh + 11px, 16.5px); font-size: clamp(15px, calc(1.15vh + 11px), 16.5px); line-height: 1.95; color: #b9b9c6; } /* ---------- 7. الأزرار: أهداف لمس أكبر، وتوازن في العرض ---------- */ .availability-actions { margin-top: clamp(20px, 3.2vh, 28px) !important; gap: 12px; } .availability-actions a { flex: 1 1 150px; min-height: 48px; font-size: 14px; font-weight: 500; border-radius: 12px; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; } .availability-actions a:hover { transform: translateY(-2px); } .availability-actions a:active { transform: translateY(0); } .availability-actions a:focus-visible { outline: 2px solid var(--zy-2, #3079ed) !important; outline-offset: 3px; } /* ---------- 8. التذييل ---------- */ .availability-account { margin-top: clamp(16px, 2.4vh, 24px) !important; } .availability-account a { color: #8d8d9a; } .availability-account a:hover { color: #cfd4e2; } .availability-account a:focus-visible { outline: 2px solid var(--zy-2, #3079ed) !important; outline-offset: 3px; border-radius: 4px; } .availability-foot { margin-top: clamp(12px, 1.8vh, 18px) !important; } /* ---------- 9. شاشة قصيرة جداً: لا تمرير ---------- */ @media (max-height: 620px) { .availability-message { font-size: 15px !important; line-height: 1.8; } .availability-actions a { min-height: 44px; } .availability-badge { padding: 5px 11px !important; } } @media (max-height: 520px) { .availability-brand img { display: none; } .availability-message { font-size: 14px !important; line-height: 1.7; } .availability-foot { display: none; } } /* ---------- 10. الحركة تُحترم ---------- */ @media (prefers-reduced-motion: reduce) { .availability-badge::before { animation: none !important; } .availability-actions a { transition: none !important; } .availability-actions a:hover { transform: none; } }