/* ============================================================ FuSpace / SpaceOS — الصدفة الهاتفية (Mobile Shell) — طبقة إضافية مالك: claude-mobile-ux. لا تعدّل os.css. كل القواعد ≤640px فقط كي لا تمسّ سطح المكتب/التابلت. تنسّق مع m-shell.js. v2 (2026-08-04، بلاغ أبوأحمد الثماني): مقاس واحد للشريط (--mtab-h) يحكم كل الإزاحات بدل أرقامٍ متفرّقة كانت تختلف بين ٥٦ و٦٠ و٦٢ و٧٠ فتترك شقوقاً؛ إخفاء الشريط العلوي التعريفي للتطبيقات (التبويب السفلي هو الدليل)؛ وشريطٌ يختفي داخل المحادثة. ============================================================ */ :root{ --mtab-h:58px; --mtab-safe:calc(58px + env(safe-area-inset-bottom, 0px)); --mtop:calc(54px + env(safe-area-inset-top, 0px)); } /* شريط تبويبات سفلي ثابت — مخفيّ افتراضياً (سطح المكتب)، يظهر على الهاتف فقط */ #mTabbar{ position:fixed; inset-inline:0; bottom:0; z-index:60; display:none; height:var(--mtab-safe); box-sizing:border-box; padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background:rgba(16,14,28,.94); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-top:1px solid rgba(255,255,255,.08); justify-content:space-around; align-items:stretch; gap:2px; } body[data-theme="light"] #mTabbar{ background:rgba(255,255,255,.96); border-top-color:rgba(0,0,0,.08) } .m-tab{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:46px; border:0; background:transparent; color:#8f89ab; font:inherit; cursor:pointer; border-radius:14px; padding:4px 2px 3px; position:relative; -webkit-tap-highlight-color:transparent; transition:color .16s; } body[data-theme="light"] .m-tab{ color:#7b7590 } .m-ic{ display:grid; place-items:center; width:46px; height:27px; border-radius:999px; transition:background .16s, transform .16s; position:relative } .m-tab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.85 } .m-tab .lbl{ font-size:10.5px; font-weight:700; letter-spacing:.005em; line-height:1 } /* ③ «الأيقونة في الأسفل بلون ثاني مميز يُفهم منه أين أنت» — تبويب نشط واضح تماماً */ .m-tab.active{ color:#fff } body[data-theme="light"] .m-tab.active{ color:#3A2666 } .m-tab.active .m-ic{ background:linear-gradient(140deg,#FF5700,#e04a00); box-shadow:0 6px 16px rgba(255,87,0,.32) } .m-tab.active svg{ stroke:#fff; stroke-width:2.05 } .m-tab.active .lbl{ font-weight:800 } .m-tab:active .m-ic{ transform:scale(.9) } .m-tab .m-badge{ position:absolute; top:-3px; inset-inline-end:2px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; background:#ff3b30; color:#fff; border-radius:9px; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid rgba(16,14,28,.94); } body[data-theme="light"] .m-tab .m-badge{ border-color:#fff } .m-tab.active .m-badge{ border-color:transparent } .m-tab .m-badge.hidden{ display:none } @media (max-width:640px){ #mTabbar{ display:flex } /* الدوك العائم (نمط آيباد) يُخفى على الهاتف — التبويبات السفلية تحلّ محلّه */ #os .dock{ display:none !important } /* — منظومة النوتش/safe-area المتماسكة: شريط الحالة ينمو، وكل الطبقات تتبعه — */ #os .statusbar{ height:var(--mtop) !important; padding-top:env(safe-area-inset-top, 0px) !important; box-sizing:border-box; } #os .home{ top:var(--mtop) !important; bottom:var(--mtab-safe) !important; } #os .sheet{ top:var(--mtop) !important; bottom:var(--mtab-safe) !important; } /* ③ التطبيق يفتح **صفحةً** لا نافذةً داخل صفحة: لا شريط علوي تعريفي — لكل تطبيق عنوانه الداخلي (.napp-title) والتبويب السفلي يقول أين أنت. */ #os .float-win .fw-bar{ display:none !important } #os .sheet > .sheet-bar{ display:none !important } #os .float-win{ inset:var(--mtop) 0 var(--mtab-safe) 0 !important; width:auto !important; height:auto !important; border-radius:0 !important; } #os .float-win.fullscreen{ inset:var(--mtop) 0 var(--mtab-safe) 0 !important; height:auto !important } #os .float-win.collapsed{ inset:auto 0 var(--mtab-safe) 0 !important; height:44px !important } #os .float-win.collapsed .fw-bar{ display:flex !important } /* المطويّة تحتاج شريطها لتُفتح */ #os .float-dock, #os #floatDock{ pointer-events:none } #os .float-win{ pointer-events:auto } /* — أداء: نزع الزجاج عن أسطح التمرير الكثيف (يبقى للشريط العلوي فقط) — */ #os .widget{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(23,18,40,.94) !important; } body[data-theme="light"] #os .widget{ background:#fff !important } body[data-theme="light"] #os .folder-icon{ background:rgba(255,255,255,.65) !important } #os .sheet{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important } #os .folder-icon{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,255,255,.1) !important } /* تحرير الشبكة بالسحب (HTML5 drag) لا يعمل باللمس — نُخفي زرّه على الهاتف */ #editToggle{ display:none !important } /* مشهد الميتنج على الهاتف: أدوات التحكم فوق شريط الهوم (safe-area) وأكبر للمس */ .meet-overlay .meet-ctrl{ height:auto !important; min-height:82px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important; padding-top:10px; } .mini-call{ top:calc(62px + env(safe-area-inset-top, 0px)) !important } } /* ④ داخل المحادثة يختفي الشريط السفلي (كان الضغط الخاطئ يخرج من المحادثة) */ @media (max-width:640px){ body.m-inconv #mTabbar{ transform:translateY(110%); pointer-events:none; transition:transform .18s ease } body.m-inconv #os .float-win:not(.collapsed){ bottom:0 !important } body.m-inconv #os .sheet{ bottom:0 !important } #mTabbar{ transition:transform .2s ease } } /* — ورقة الغرف الاحتياطية على الهاتف — */ #mRooms{ position:fixed; inset:0; z-index:58; display:none; flex-direction:column; background:linear-gradient(180deg,#141029,#0b0817); padding-top:var(--mtop); padding-bottom:var(--mtab-safe); } #mRooms.show{ display:flex } .mr-head{ display:flex; align-items:baseline; gap:10px; padding:16px 18px 10px; border-bottom:1px solid rgba(255,255,255,.07) } .mr-ttl{ font-size:21px; font-weight:900; color:#fff } .mr-sub{ flex:1; font-size:12px; color:#948db4 } .mr-x{ border:0; background:rgba(255,255,255,.08); color:#ccc; width:34px; height:34px; border-radius:11px; font-size:15px; cursor:pointer } .mr-list{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 12px 18px } .mr-sec{ font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#8b7cff; margin:14px 6px 8px } .mr-empty{ text-align:center; color:#948db4; padding:40px 0; font-size:14px } .mr-room{ display:flex; align-items:center; gap:13px; width:100%; text-align:start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:13px 14px; margin-bottom:9px; color:#eee; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } .mr-room:active{ background:rgba(255,255,255,.09) } .mr-room.talk{ border-color:rgba(63,207,142,.5); box-shadow:0 0 0 1px rgba(63,207,142,.25), 0 8px 24px rgba(63,207,142,.08) } .mr-ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:linear-gradient(145deg,#ff5a1f,#c23a08); color:#fff; flex-shrink:0 } .mr-ic svg{ width:22px; height:22px } .mr-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px } .mr-name{ font-size:15px; font-weight:800; color:#fff } .mr-live{ font-size:11px; font-weight:800; color:#3fcf8e; background:rgba(63,207,142,.13); border-radius:99px; padding:2px 8px; margin-inline-start:6px } .mr-ppl{ font-size:12px; color:#948db4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .mr-join{ flex-shrink:0; font-size:12.5px; font-weight:800; color:#fff; background:#5b4be6; border-radius:11px; padding:8px 14px } /* — شارة «ثبّت التطبيق» — */ #mInstall{ position:fixed; inset-inline:10px; bottom:calc(var(--mtab-safe) + 10px); z-index:59; display:none; align-items:center; gap:12px; padding:11px 14px; border-radius:16px; background:linear-gradient(135deg,#3a2666,#1d1730); border:1px solid rgba(139,124,255,.35); box-shadow:0 16px 40px rgba(0,0,0,.5); color:#eee; font-size:13.5px; } #mInstall.show{ display:flex } #mInstall .txt{ flex:1; line-height:1.4 } #mInstall .txt b{ color:#fff; font-weight:800 } #mInstall button{ border:0; border-radius:11px; font:inherit; font-weight:700; cursor:pointer; padding:8px 14px } #mInstall .add{ background:#FF5700; color:#fff } #mInstall .no{ background:transparent; color:#948db4; padding:8px 6px } /* ⑧ ورقة اختيار التطبيق المراد تثبيته */ #mInst2{ position:fixed; inset:0; z-index:9600; display:flex; align-items:flex-end; justify-content:center; background:rgba(6,5,14,.6); opacity:0; transition:opacity .18s } #mInst2.show{ opacity:1 } .mi2-card{ width:min(520px,100%); background:#15112a; border-radius:22px 22px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); border:1px solid rgba(255,255,255,.09); border-bottom:0; transform:translateY(14px); transition:transform .2s } #mInst2.show .mi2-card{ transform:none } body[data-theme="light"] .mi2-card{ background:#fff } .mi2-h{ font-size:17px; font-weight:900; color:var(--tx,#fff); margin-bottom:3px } .mi2-s{ font-size:12.5px; color:var(--tx3,#948db4); margin-bottom:14px; line-height:1.5 } .mi2-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:start; font:inherit; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:11px 12px; margin-bottom:9px; color:var(--tx,#eee) } body[data-theme="light"] .mi2-row{ background:#f6f4ef; border-color:rgba(0,0,0,.07) } .mi2-row img{ width:42px; height:42px; border-radius:12px; object-fit:cover; flex-shrink:0 } .mi2-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px } .mi2-tx b{ font-size:14.5px; font-weight:800 } .mi2-tx small{ font-size:11.5px; color:var(--tx3,#948db4) } .mi2-go{ flex-shrink:0; background:#FF5700; color:#fff; font-size:12.5px; font-weight:800; border-radius:11px; padding:8px 13px } .mi2-x{ width:100%; margin-top:6px; background:transparent; border:0; color:var(--tx3,#948db4); font:inherit; font-weight:700; padding:10px; cursor:pointer } /* ===== FDX_FUMAP_MOBILE_UI (claude-fumap-abuahmad 2026-07-31) ===== جوال = ملء الشاشة وخطوط بمقاس الأصابع (توجيه أبوأحمد: «لا شيء مجهري»). */ @media (max-width:640px){ #os .widget.s,#os .widget.m,#os .widget.l{grid-column:1/-1 !important} #os .msg .bub{font-size:15.5px !important;line-height:1.6 !important} #os .msg{max-width:84% !important} #os .cp-row .nm{font-size:15px !important} #os .cp-row .sub{font-size:12.5px !important} #os .cp-row img,#os .cp-row .chico{width:44px !important;height:44px !important} #os .sender{font-size:13px !important} /* iOS يعمل زوم قسرياً على أي حقل < 16px */ #os .chat-inp textarea,#os .chat-search input,#os .sb-search input,#os .modal input,#os .modal textarea,#os .modal select{font-size:16px !important} #os .w-body{font-size:14.5px !important} #os .w-row{font-size:14px !important} } /* ===== /FDX_FUMAP_MOBILE_UI ===== */ /* ===== ملحق 08-03 (عمرو): شات الجوال بلا سطرٍ ميت فوقه ===== */ @media (max-width:640px){ body.chat-mobile #os .statusbar{ display:none !important } body.chat-mobile #os .float-win:not(.collapsed){ top:env(safe-area-inset-top, 0px) !important; right:0 !important; left:0 !important; bottom:var(--mtab-safe) !important; height:auto !important; } body.chat-mobile.m-inconv #os .float-win:not(.collapsed){ bottom:0 !important } } /* ===== ملحق 08-03 (عمرو): الخريطة والغرف على الجوال بلا ترويسة مزدوجة ===== */ @media (max-width:640px){ #os .sheet[data-app="map"] .sheet-bar, #os .sheet[data-app="rooms"] .sheet-bar{ display:none !important } #os .sheet[data-app="map"], #os .sheet[data-app="rooms"]{ top:env(safe-area-inset-top, 0px) !important } } /* جرس التنبيهات بعد نقله من شريط النافذة المخفيّ إلى داخل الشات (m-shell.js) */ @media (max-width:640px){ #chatApp .m-bell{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--tx2,#b9b3d0); cursor:pointer; flex:0 0 auto; position:relative } #chatApp .m-bell .i{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9 } #chatApp .chat-search .m-bell{ margin-inline-start:2px } } /* ===== ⑨ صقل عام (08-04) ===== */ @media (max-width:640px){ /* لا تمرير أفقي في أي طبقة — أكبر مصدر «لخبطة» على الشاشات الضيقة */ html, body{ overflow-x:hidden; overscroll-behavior-y:none } #os .napp-title{ font-size:16.5px !important; padding-top:4px } /* أهداف لمس ≥ ٤٠px لكل الأزرار الصغيرة */ #os .sbtn, #os .fw-btn, #os .w-btn.sm, #os .cbtn.mini{ min-width:40px; min-height:40px } #os .w-btn{ min-height:40px; padding-inline:14px } /* قوائم وبطاقات: حشوة مريحة وحواف متناسقة */ #os .list-row{ padding:12px 12px !important } #os .cardbox{ border-radius:16px } /* المودالات ملء العرض تقريباً مع مساحة أسفل الشريط */ #os .modal, #os .modal-box{ max-width:96vw } /* التمرير باللمس ناعم داخل كل الأسطح القابلة للتمرير */ #os .sheet-body, #os .fw-body, #os .chat-people, #os .chat-msgs{ -webkit-overflow-scrolling:touch } } /* ===== ⑩ مودالات الهاتف — ورقة سفلية واعية بلوحة المفاتيح (08-18) · FDX_MSHELL_MODAL_M ===== 🕳️ اللغم المكتشَف اليوم: `modal()` في os.js:189 يلحق `.modal-back` بـ**document.body** لا داخل `#os` (وهو شقيقه في index.html) ⇒ قاعدتا المودال السابقتان هنا (`#os .modal{max-width:96vw}` و`#os .modal input{font-size:16px}`) **لم تطابقا شيئاً قطّ**: مودالات الهاتف بلا أي تكييف، ومدخلاتها ١٤px فيقرّب iOS الصفحة عند التركيز. والعلّة صارت حادّة بعد نموّ مودال «قناة جديدة» اليوم (FDX_CHAN_PROJECT + الأعضاء داخل النافذة): ارتفاع محتواه ≈٦٣٨px بعد أن كان ≈٢٨٧px، وهو مركزيّ بـ`max-height:86vh` بينما `inp.focus()` يفتح لوحة المفاتيح فور الفتح ⇒ زرّ «إنشاء» أسفل خطّ اللوحة. العلاج: يلتصق المودال بالأسفل ويرتفع بمقدار `--fdxkb` (ارتفاع اللوحة، يحسبه m-shell.js من visualViewport) وسقفه `--fdxvvh` (ارتفاع المنطقة المرئية فعلاً). */ @media (max-width:640px){ .modal-back{ align-items:flex-end; padding:0; padding-bottom:var(--fdxkb,0px) } .modal{ width:100%; max-width:none; max-height:calc(var(--fdxvvh, 86vh) - 24px); border-radius:20px 20px 0 0; padding:20px 18px calc(16px + env(safe-area-inset-bottom)); animation:fdxSheetIn .26s cubic-bezier(.2,.9,.3,1); } /* مدخلات المودال ١٦px — يمنع تقريب iOS التلقائي (القاعدة القديمة كانت ميتة) */ .modal input, .modal textarea, .modal select{ font-size:16px !important } /* شريط خيارات ثلاثيّ يضيق عند ٣٦٠px: قلّل الحشوة والخط بدل أن يُقصّ النصّ */ .modal .seg button{ padding:8px 8px; font-size:11.5px; min-width:0 } /* قوائم الاختيار داخل المودال: نسبة من الشاشة لا ارتفاعاً ثابتاً */ .modal .chat-people{ max-height:30vh } /* أزرار الإجراء: ملء العرض وهدف لمس ٤٤px */ .modal .mrow{ margin-top:16px } .modal .mrow .w-btn{ flex:1; min-height:44px } } @keyframes fdxSheetIn{ from{ transform:translateY(100%) } to{ transform:translateY(0) } } /* ═══ FDX_MSHELL_FILTERBAR (2026-08-23) ═══════════════════════════════════ صفّ البحث في الشات صُمِّم سطراً واحداً، لكنّ أزراره بلغت ثمانية (أُضيف 08-23 فلتر «المقروء» وزرّ «تعليم الكل») ⇒ على هاتف ٣٦٠px ينهار إلى **٤ أسطر (١١١px)** ويبتلع القائمة، وكلّ أهدافه دون حدّ اللمس (٣١px و٤١px — قِيست). الآن: سطرٌ كامل للبحث، وسطرٌ واحد للأزرار تتقاسمه بالتساوي بارتفاع ٤٠px. **CSS فقط في طبقة الجوال — صفر مساس بـos.js** (فيبقى سطح المكتب كما هو). */ @media (max-width:640px){ #chatApp .chat-search{ row-gap:6px; column-gap:3px; padding:8px 10px; flex-wrap:wrap } /* الأيقونة + الحقل يملآن السطر الأول فتُدفع الأزرار كلّها للسطر الثاني */ #chatApp .chat-search > input{ flex:1 1 calc(100% - 44px); min-width:0 } /* الأزرار الثمانية تتقاسم السطر بالتساوي — لا مقاس ثابت يفيض */ #chatApp .chat-search > button.cf-btn, #chatApp .chat-search > button.sbtn{ flex:1 1 0; width:auto; min-width:30px; max-width:64px; height:40px; border-radius:10px } #chatApp .chat-search > button.sbtn{ font-size:14px } } /* ═══ FDX_MSHELL_SESCHIP (2026-08-26، روتين fuspace-mobile-sync) ═══ شريحة «جلساتك المفتوحة» (FDX_SESSIONS، شريط فيوسويت 08-26) تُركَّب في #statusbar، وهو على الهاتف صفٌّ يفيض أفقياً بشريط تمرير **مخفيّ** ⇒ الشريحة تخرج من الشاشة بلا أي إشارة أنها هناك. قياسٌ حيّ على 360px (هارنس بأصول حيّة): الصفّ الهادئ scrollWidth 366 / 360 ⇒ الشريحة عند x=1 (على حافّة الكسر) + شريحة الاجتماع scrollWidth 508 / 360 ⇒ x=-146 (خارج الشاشة تماماً) + شريحة الغرفة معها scrollWidth 619 / 360 ⇒ x=-260 وهذه بالضبط حالة «مايكك مفتوح في جلسةٍ نسيتها» التي وُلدت الشريحة لأجلها. ما أملكه هنا: تخفيف ضغط الصفّ على الهاتف وحده (≤480px) — الشعار زينةٌ يعوّضها اسمُ التطبيق المثبَّت وأيقونته، ونصّ الحالة يكفي عنه نقطتُه الملوّنة (والنقر يفتح نفس القائمة). القياس بعد الرقعة: الهادئ 360/360 (x=7 ظاهرة كاملةً) · مع الاجتماع 382 (x=-15، ٧٤٪ منها ظاهرة). الحالة الثالثة تبقى مفتوحة — أصلها تركيبُ الصفّ في os.css/bar.js وهما ليسا لي (رُفعت لمالكيهما). */ @media (max-width:480px){ #os .statusbar .sb-logo{ display:none !important } #os .statusbar .sb-me-chip .sb-me-sep, #os .statusbar .sb-me-chip #sbStatusTxt{ display:none !important } } /* ═══ FDX_MSHELL_FILTERBAR2 (2026-08-27، روتين fuspace-mobile-sync) ═══ تكملة FDX_MSHELL_FILTERBAR (08-23): ذاك أنقذ الصفّ من الانهيار إلى ٤ أسطر، لكنّ أهداف اللمس بقيت **دون حدّ ٤٤px** — قِيست اليوم على البايتات المخدومة (كروم بلا رأس، إطارات بعرض ثابت فتستجيب ميديا-كويري): 320px ٣٠×٤٠ 360px ٣٥–٣٧×٤٠ 390px ٣٩–٤١×٤٠ 414px ٤٢–٤٤×٤٠ الرقعة: ارتفاع ٤٤ كاملاً في كل العروض + تضييق الفواصل والحشو ليتّسع العرض: 320px ٣٢–٣٤×٤٤ 360px ٣٧–٣٩×٤٤ 390px ٤١–٤٣×٤٤ 414px ٤٤–٤٦×٤٤ ⚠️ **صادقة:** العرض يبلغ ٤٤ عند ٤١٤px فقط. عند ٣٦٠px المتاح ٣٣٤px و٨×٤٤=٣٥٢ ⇒ **مستحيلٌ هندسياً** في سطرٍ واحد. جذرُه أنّ الصفّ يحمل **ثمانية** أزرار في `os.js` (ليس ملكي) — رُفع لمالكه: الحلّ عنده لا عندي (طيّ فلترَي النوع في قائمة فائض على الهاتف). و`box-sizing:border-box` مقصود: بدونه حدُّ العرض الأدنى يتضخّم بالحدّ فينكسر صفّ ٣٢٠px سطرين. */ @media (max-width:640px){ #chatApp .chat-search{ column-gap:2px; padding-left:6px; padding-right:6px } #chatApp .chat-search > button.cf-btn, #chatApp .chat-search > button.sbtn{ height:44px; min-width:28px; max-width:72px; box-sizing:border-box } } /* ═══ FDX_MSHELL_FILTERBAR3 (2026-08-29، روتين fuspace-mobile-sync) ═══ **رقعتا 08-23 و08-27 ماتتا بصمت.** جولة `FDX_CHATFIX29` نقلت أزرار الفلاتر من كونها أبناءً مباشرين لـ`.chat-search` إلى حاوية جديدة `
` شقيقةٍ لها ⇒ المحدِّد `#chatApp .chat-search > button.cf-btn` صار **صفر مطابقة**، بلا خطأ ولا تحذير، والأهداف عادت أصغر ممّا كانت: `.chat-filters .cf-btn{34×34}` في os.js (٣٤ لا ٤٠). قِيست اليوم على البايتات الحيّة (v198، مرآة محلّية بأصول حقيقية، إطارات بعرض ثابت): 320/360/390/414 ⇒ **٣٤×٣٤ في كلّها**. والجديد أنّ الإصلاح صار **ممكناً هندسياً**: البند الذي رفعتُه لمالك os.js يوم 08-28 («ثمانية أزرار تجعل ٤٤px مستحيلاً عند 360px») **عالجه المالك بنفسه** — صار الصفّ خمسة فلاتر + زرّ «تعليم الكل» = **ستة**. الحساب عند أضيق هاتف (320px): المتاح ٣٠٠px بعد الهوامش، والمطلوب ٦×٤٤ + ٥×٥ = **٢٨٩px** ⇒ يتّسع بفائض ١١px. الخصوصية مقصودة: os.js يحقن `