/* ============================================================================
   Chatwoot Custom Branding v2  —  chat.wbots.app
   ----------------------------------------------------------------------------
   هوية indigo #4F46E5 (مطابقة لنظام الحملات) + تحسينات شكل مودرن.
   بدون تعديل أي كود أو إعادة بناء صورة Docker — حقن CSS من nginx فقط.

   مهم: كل القيم لازم !important لأن Chatwoot بيحقن CSS بتاعه بعد تحميل الصفحة.
   قيم المتغيرات "R G B" بمسافات لأن Chatwoot بيلفّها بـ rgb(var(--x) / a).
   ============================================================================ */

/* الخط أولاً — @import لازم يكون قبل أي قاعدة تانية */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* ========== 1) الوضع الفاتح: اللون الأساسي (السكيل الأزرق → indigo) ========== */
:root {
  --blue-1:  253 253 255 !important;
  --blue-2:  249 249 255 !important;
  --blue-3:  238 240 255 !important;   /* #EEF0FF primary-light */
  --blue-4:  228 229 253 !important;
  --blue-5:  216 216 251 !important;
  --blue-6:  200 199 246 !important;
  --blue-7:  178 175 238 !important;
  --blue-8:  148 143 228 !important;
  --blue-9:   79  70 229 !important;   /* #4F46E5 اللون الأساسي الصلب */
  --blue-10:  67  56 202 !important;   /* #4338CA hover */
  --blue-11:  55  48 163 !important;   /* #3730A3 نصوص/روابط */
  --blue-12:  32  28  92 !important;

  /* توكنات زرقاء دلالية كانت بتفلت من الثيم: */
  --solid-blue:   228 231 255 !important;  /* خلفية فقاعة رسالة الموظف */
  --solid-blue-2: 250 250 255 !important;
  --text-blue:     30  27  92 !important;  /* نص غامق على الفقاعة */
  --border-blue:   79, 70, 229, .5 !important;  /* (صيغة بفواصل + شفافية) */
  --border-blue-strong: 55 48 163 !important;

  /* ========== 2) الأسطح (لمسة indigo) ========== */
  --solid-1: 247 247 255 !important;   /* #f7f7ff لوحات: شريط جانبي/قائمة/كروت */
  --solid-2: 247 247 255 !important;
  --solid-3: 247 247 255 !important;
  --card-color: 247 247 255 !important;
  --background-color: 238 240 249 !important;  /* #eef0f9 خلفية الكانفس */
  --slate-1: 248 248 255 !important;
  --slate-2: 243 243 252 !important;

  /* حدود أنعم بلمسة باردة */
  --border-weak:      232 233 244 !important;
  --border-strong:    222 223 238 !important;
  --border-container: 232 233 244 !important;
}

/* ========== 3) الوضع الداكن ========== */
.dark {
  --blue-1:  25 25 40 !important;
  --blue-2:  32 31 52 !important;
  --blue-3:  43 42 82 !important;
  --blue-4:  51 48 110 !important;
  --blue-5:  59 56 130 !important;
  --blue-6:  68 65 148 !important;
  --blue-7:  82 78 173 !important;
  --blue-8: 101 96 205 !important;
  --blue-9:  91 84 240 !important;    /* #5B54F0 */
  --blue-10: 105 98 245 !important;
  --blue-11: 173 168 255 !important;
  --blue-12: 224 223 255 !important;

  --solid-blue:   51 48 110 !important;
  --solid-blue-2: 30 30 44 !important;
  --text-blue:   224 223 255 !important;
  --border-blue:  91, 84, 240, .5 !important;
  --border-blue-strong: 173 168 255 !important;
}

/* ============================================================================
   4) كلاسات n-brand — Chatwoot كاتب فيها الأزرق hex ثابت (#2781f6) مش متغيّر،
   فلازم نغطيها واحدة واحدة. دي بتظبط: الأزرار الرئيسية، checkboxes/toggles،
   حلقات الفوكس، والروابط.
   ============================================================================ */
.bg-n-brand,
.before\:bg-n-brand:before,
.after\:bg-n-brand:after,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.group:hover .group-hover\:bg-n-brand {
  background-color: #4F46E5 !important;
}

/* الأزرار الرئيسية الصلبة: جراديانت زي نظام الحملات + hover أنعم */
button.bg-n-brand,
a.bg-n-brand {
  background-image: linear-gradient(135deg, #5b54f0 0%, #4338ca 100%) !important;
  background-color: #4F46E5 !important;
}
button.bg-n-brand:hover,
a.bg-n-brand:hover { filter: brightness(1.08); }

/* درجات الشفافية بتاعة brand */
.bg-n-brand\/5 { background-color: rgba(79,70,229,.05) !important; }
.hover\:bg-n-brand\/10:hover { background-color: rgba(79,70,229,.10) !important; }
.hover\:bg-n-brand\/80:hover { background-color: rgba(79,70,229,.80) !important; }
.focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgba(79,70,229,.20) !important; }
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: rgba(79,70,229,.20) !important; }
.dark .dark\:bg-n-brand\/10 { background-color: rgba(91,84,240,.12) !important; }

/* نصوص وروابط brand */
.text-n-brand,
.hover\:text-n-brand:hover,
.group:hover .group-hover\:text-n-brand,
.group:focus-within .group-focus-within\:text-n-brand {
  color: #4F46E5 !important;
}
.dark .dark\:hover\:text-n-brand:hover { color: #ADA8FF !important; }

/* حدود brand */
.border-n-brand,
.border-t-n-brand,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.focus\:border-n-brand:focus {
  border-color: #4F46E5 !important;
}

/* حلقات الفوكس والـ outline */
.ring-n-brand,
.focus\:ring-n-brand:focus,
.focus-visible\:ring-n-brand:focus-visible,
.focus-within\:ring-n-brand:focus-within {
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1)) !important;
}
.outline-n-brand,
.focus\:outline-n-brand:focus,
.focus-within\:outline-n-brand:focus-within {
  outline-color: #4F46E5 !important;
}

/* ============================================================================
   5) تحسينات مودرن (شكل فقط — صفر تأثير على الوظايف)
   ============================================================================ */

/* فقاعات الرسايل: استدارة أكبر وأنعم (قواعد تجميع الفقاعات المتتالية محفوظة
   لأن قواعد Chatwoot الأعلى تحديداً بتظبط الزوايا الملزوقة لوحدها) */
.message-bubble-container .left-bubble,
.message-bubble-container .right-bubble {
  border-radius: 14px;
}

/* خطوط التاريخ الفاصلة (اليوم/أمس/التاريخ) — أثقل وأوضح بلون indigo */
.before\:bg-n-slate-4:before,
.after\:bg-n-slate-4:after {
  background-color: rgba(79, 70, 229, .30) !important;
  height: 2px !important;
  border-radius: 2px;
}
.dark .before\:dark\:bg-n-slate-6:before,
.dark .after\:dark\:bg-n-slate-6:after {
  background-color: rgba(173, 168, 255, .30) !important;
}

/* الفاصل بين الرسايل وصندوق الرد:
   خط ممتد واضح بعرض المنطقة + مقبض سحب بارز في النص */
.cursor-row-resize::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(79, 70, 229, .35) 12%,
    rgba(79, 70, 229, .35) 88%,
    transparent);
}
.cursor-row-resize > div {
  position: relative;
  z-index: 1;
  background-color: #4F46E5 !important;
  width: 48px !important;
  height: 5px !important;
  margin-top: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 4px rgb(var(--solid-1));  /* حلقة بلون اللوحة تفصل المقبض عن الخط */
}
.cursor-row-resize:hover > div,
.cursor-row-resize > div.animate-bounce {
  background-color: #4338CA !important;
}

/* اسم العميل في قائمة المحادثات — أزرق غامق بلون اللوجو (#3B3BB8) بدل الأسود */
.conversation .conversation--user {
  color: #3B3BB8;
}
.dark .conversation .conversation--user {
  color: #A5A8F0;   /* نسخة أفتح تبان على الخلفية الغامقة */
}

/* الخط الفاصل بين المحادثات في قائمة المحادثات:
   كان slate-3 باهت جداً — بقى 2px بلون indigo واضح.
   (من غير !important عمداً: عشان يفضل بيختفي تحت الكارت النشط وعند الـ hover
   زي سلوك Chatwoot الأصلي) */
.border-b.border-n-slate-3 {
  border-bottom-width: 2px;
  border-bottom-color: rgba(79, 70, 229, .20);
}
.dark .border-b.border-n-slate-3 {
  border-bottom-color: rgba(173, 168, 255, .16);
}

/* سكرول بار رفيع مودرن */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: rgba(79,70,229,.25) !important;
  border-radius: 8px !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(79,70,229,.45) !important; }

/* لون تحديد النص — زي نظام الحملات */
::selection { background: #4F46E5; color: #fff; }

/* صندوق الرد: ظل خفيف يرفعه عن الخلفية */
.reply-box { box-shadow: 0 4px 24px rgba(79,70,229,.07); }

/* ========== 6) الخط Tajawal (احذف البلوك لو مش عايزه) ========== */
body, button, input, textarea, select {
  font-family: 'Tajawal', 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}