(function () {
  // 1. إنشاء الحاوية الرئيسية مع تعيين ID لسهولة التحكم
  const container = document.createElement("div");
  container.id = "wa-chat-container";
  // استخدام خطوط النظام لضمان وضوحها على الايفون والاندرويد + أعلى z-index ممكن
  container.style.cssText = "position: fixed; right: 20px; bottom: 20px; z-index: 2147483647; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; align-items: flex-end;";
  container.dir = "rtl";

  // 2. إنشاء نافذة الدردشة (مخفية افتراضياً)
  const chatBox = document.createElement("div");
  chatBox.id = "wa-chat-box";
  // تم تحويل العرض ليكون متجاوباً (يأخذ 300 بكسل، وإذا كانت الشاشة صغيرة يأخذ عرض الشاشة ناقص الحواف)
  chatBox.style.cssText = "display: none; width: 320px; max-width: calc(100vw - 40px); box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); margin-bottom: 15px; overflow: hidden; transform: translateY(20px); opacity: 0; transition: all 0.3s ease;";
  
  // تم تكبير مساحة الضغط لزر الإغلاق (padding) ليكون سهل اللمس في الجوال
  chatBox.innerHTML = `
    <div style="background: #075E54; padding: 15px 20px; color: white; display: flex; justify-content: space-between; align-items: center;">
      <div>
        <strong style="font-size: 16px; display: block; margin-bottom: 3px;">فريق الدعم</strong>
        <span style="font-size: 12px; opacity: 0.8;">الرد خلال دقائق</span>
      </div>
      <button id="wa-close-btn" style="background: transparent; border: none; color: white; font-size: 28px; cursor: pointer; padding: 0 10px; line-height: 1; touch-action: manipulation;">&times;</button>
    </div>
    <div style="padding: 20px; background: #e5ddd5; min-height: 100px; box-sizing: border-box;">
      <div style="background: white; padding: 12px 15px; border-radius: 0 12px 12px 12px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); font-size: 14px; color: #333; line-height: 1.5; word-wrap: break-word;">
        مرحباً! 👋<br>كيف يمكننا مساعدتك اليوم؟
      </div>
    </div>
    <div style="padding: 15px; text-align: center; background: #fff; box-sizing: border-box;">
      <a href="https://wa.me/966506901443" target="_blank" style="display: block; background: #25D366; color: white; text-decoration: none; padding: 12px 20px; border-radius: 25px; font-weight: bold; font-size: 15px; transition: background 0.3s; touch-action: manipulation;">بدء المحادثة</a>
    </div>
  `;

  // 3. إنشاء الزر العائم
  const btn = document.createElement("div");
  btn.className = "wa-floating-btn";
  btn.style.cssText = "width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.25); cursor: pointer; transition: transform 0.3s; animation: wa-pulse 2s infinite; touch-action: manipulation;";
  btn.innerHTML = `
    <svg style="width: 35px; height: 35px; fill: white;" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 2.7C8.65 2.7 2.7 8.65 2.7 16c0 2.35.62 4.55 1.8 6.48L2.6 29.3l6.98-1.83A13.23 13.23 0 0 0 16 29.3c7.35 0 13.3-5.95 13.3-13.3S23.35 2.7 16 2.7zm0 24.2c-2.08 0-4.12-.56-5.9-1.62l-.42-.25-4.14 1.09 1.1-4.03-.27-.43A10.55 10.55 0 1 1 16 26.9zm5.78-7.9c-.32-.16-1.9-.94-2.2-1.05-.3-.11-.52-.16-.74.16-.22.33-.85 1.05-1.04 1.27-.19.22-.38.24-.7.08-.32-.16-1.34-.49-2.55-1.57-.94-.84-1.57-1.87-1.75-2.19-.18-.32-.02-.49.14-.65.15-.15.32-.38.48-.57.16-.19.21-.32.32-.54.11-.22.05-.41-.03-.57-.08-.16-.74-1.78-1.02-2.44-.27-.64-.55-.55-.74-.56h-.63c-.22 0-.57.08-.87.41-.3.33-1.14 1.11-1.14 2.7s1.17 3.13 1.33 3.35c.16.22 2.3 3.51 5.58 4.92.78.34 1.39.54 1.87.69.79.25 1.5.21 2.06.13.63-.09 1.9-.78 2.17-1.54.27-.76.27-1.41.19-1.54-.08-.14-.3-.22-.62-.38z"/>
    </svg>
  `;

  // 4. إضافة CSS متقدم لدعم توافق الجوالات
  const style = document.createElement("style");
  style.innerHTML = `
    @keyframes wa-pulse {
      0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.6); }
      70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
      100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
    }
    
    /* قواعد خاصة بالجوالات الشاشات الصغيرة لتصغير الحواف وضبط المقاسات */
    @media (max-width: 480px) {
      #wa-chat-container {
        right: 15px !important;
        bottom: 15px !important;
        /* حماية الحواف في الايفون الحديث */
        bottom: calc(15px + env(safe-area-inset-bottom)) !important;
      }
      #wa-chat-box {
        max-width: calc(100vw - 30px) !important;
        margin-bottom: 10px !important;
      }
      .wa-floating-btn {
        width: 55px !important;
        height: 55px !important;
      }
      .wa-floating-btn svg {
        width: 30px !important;
        height: 30px !important;
      }
    }
  `;
  document.head.appendChild(style);

  // 5. دمج العناصر في الصفحة
  container.appendChild(chatBox);
  container.appendChild(btn);
  document.body.appendChild(container);

  // 6. دالة الإظهار والإخفاء (الأنيميشن)
  let isOpen = false;
  function toggleChat(e) {
    if(e) e.preventDefault(); // لمنع السلوك الافتراضي الذي قد يسبب مشاكل باللمس
    if (!isOpen) {
      chatBox.style.display = "block";
      // استخدام setTimeout لضمان تفعيل الـ transition
      setTimeout(() => {
        chatBox.style.opacity = "1";
        chatBox.style.transform = "translateY(0)";
      }, 10);
    } else {
      chatBox.style.opacity = "0";
      chatBox.style.transform = "translateY(20px)";
      setTimeout(() => {
        chatBox.style.display = "none";
      }, 300);
    }
    isOpen = !isOpen;
  }

  // 7. تفعيل الأحداث (مراعاة اللمس على الجوال)
  btn.addEventListener("click", toggleChat);
  document.getElementById('wa-close-btn').addEventListener("click", toggleChat);
  
})();