/* ══════════════════════════════════════════════════════════════════
   واتساب الدعم — الزر العائم  (resources/views/partials/whatsapp-float.blade.php)
   ─ العنصر يعرض في كل تخطيطات المنتج: لوحة Vuexy، واجهة الاختبار،
     الموقع العام h6، وصفحات الدخول. فلا يستند الى متغير من اي منها:
     الالوان معرفة هنا حرفيا، والخط وحده يرث من الصفحة المضيفة.
   ─ المواضع physical (left/bottom) لا منطقية: المطلوب زاوية الشاشة
     السفلية اليسرى في الصفحة العربية والانجليزية معا (الورقة الانجليزية
     تقلب اتجاه الصفحة، فـinset-inline كانت تنقل الزر الى اليمين).
   ─ الزاوية نفسها يسكنها لسان «ابلغ عن مشكلة» (‎.rpt-fab‎: ملاصق للحافة،
     44×52 على ارتفاع 22px، و74px تحت 576px). فحين يكون اللسان في الصفحة
     (‎body:has(#rptRoot)‎) يصعد الزر فوقه. والجار الثالث ‎.sim-nav‎ (مؤشر التشابه في صفحة التعديل، ارتفاع
     104px وطبقة 1055) عابر ويعلو بطبقته، فلا يقتسم معه الزر مكانا دائما.
   ─ طبقة التراص 1043: تحت لسان البلاغ ولوحته (1044) وتحت كل ما فوقها
     (dropdown 1045، المودال 1055، exam-toast 2100).
   ─ بلا جافاسكربت: رابط wa.me وحده. والطباعة تخفيه بـ@media print في
     اسفل الملف — لا بالصنف no-print لان app.css يعيد اظهاره.
   ══════════════════════════════════════════════════════════════════ */

.wa-float{
    /* لوحة الالوان محلية — اخضر واتساب الرسمي لا الوان الهوية */
    --wa-brand:#25D366;
    --wa-brand-dark:#1EBE5B;
    --wa-label-bg:#0B4A2F;
    --wa-ink:#FFFFFF;
    --wa-ease:cubic-bezier(.22,1,.36,1);

    position:fixed;
    left:16px;
    bottom:max(20px, env(safe-area-inset-bottom, 0px));
    z-index:1043;

    /* قرص ثابت المقاس: البطاقة التي تحمل الاسم خارج التدفق فلا تمدده */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:52px;
    height:52px;
    padding:0;

    border-radius:50%;
    background:var(--wa-brand);
    color:var(--wa-ink);
    text-decoration:none;
    box-shadow:0 8px 22px rgba(18,140,86,.34);
    transition:transform .22s var(--wa-ease),
               box-shadow .22s var(--wa-ease),
               background-color .18s linear;
}

.wa-float:hover,
.wa-float:focus-visible{
    background:var(--wa-brand-dark);
    color:var(--wa-ink);
    text-decoration:none;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(18,140,86,.42);
}

.wa-float:active{ transform:translateY(0); }

.wa-float:focus-visible{
    outline:2px solid #0B4A2F;
    outline-offset:2px;
}

.wa-float i{
    flex:0 0 52px;
    font-size:26px;
    line-height:1;
    text-align:center;
}

/* ⚠️ الاسم بطاقة مستقلة بجانب القرص، لا نصا داخله.
   كان شريطا ينفتح بـmax-width وoverflow:hidden فكان يقص **اول** الكلمة
   («ت» من «تواصل»): النص العربي جريان من اليمين داخل صندوق ltr، فالمقطوع
   منه هو اوله لا اخره. وتاخير الظهور الى ما بعد الاتساع عالج المشهد عندي
   ولم يعالجه عند كل جهاز (بطء الرسم يطيل اللحظة المقصوصة).
   فالعلاج البنيوي: بطاقة خارج التدفق (position:absolute) بلا overflow
   ولا عرض متحرك — تظهر وتختفي بالشفافية وحدها، فلا تقص في اي لحظة.
   وخروجها من التدفق يبقي الزر قرصا 52 في كل الحالات. */
.wa-float-label{
    position:absolute;
    left:calc(100% + 10px);
    top:50%;
    transform:translate(-6px, -50%);

    direction:rtl;
    white-space:nowrap;
    padding:7px 12px;
    border-radius:12px;
    background:var(--wa-label-bg);
    color:var(--wa-ink);
    font-size:13px;
    font-weight:800;
    line-height:1.25;
    box-shadow:0 8px 20px rgba(11,61,44,.26);

    opacity:0;
    pointer-events:none;
    transition:opacity .16s linear,
               transform .22s var(--wa-ease);
}

.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label{
    opacity:1;
    transform:translate(0, -50%);
}

/* حين يظهر لسان البلاغ تحته (22px + 52 ارتفاعا) يصعد الزر فوقه.
   الحكم بوجود اللسان في الصفحة نفسها (‎#rptRoot‎) لا بشرط PHP مكرر: اللسان
   للمسجل وحده، وصفحات h6 المستقلة لا تضمنه اصلا ولو كان مسجلا. */
body:has(#rptRoot) .wa-float{
    bottom:calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ───────────────────────── الشاشات الضيقة ───────────────────────── */

@media (max-width:575.98px){
    .wa-float{
        left:12px;
        bottom:max(16px, env(safe-area-inset-bottom, 0px));
        width:48px;
        height:48px;
    }

    .wa-float i{ flex:0 0 48px; font-size:24px; }

    /* اللسان يرتفع الى 74px هنا (ارتفاعه 48) فيرتفع الزر فوقه */
    body:has(#rptRoot) .wa-float{
        bottom:calc(134px + env(safe-area-inset-bottom, 0px));
    }

    /* اللمس بلا تحويم: البطاقة لا تظهر الا مع تبئير لوحة المفاتيح */
    .wa-float:hover .wa-float-label{ opacity:0; }
    .wa-float:focus-visible .wa-float-label{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
    .wa-float,
    .wa-float-label{ transition:none; }
    .wa-float:hover,
    .wa-float:focus-visible{ transform:none; }
}

@media print{
    .wa-float{ display:none !important; }
}