/* بداية أيقونات التواصل الاجتماعي */
.floating-chat-container {
  font-family: Arial, sans-serif;
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  z-index: 1000;
}

/* زر المحادثة الرئيسي */
.floating-chat-button {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.floating-chat-button:focus,
.floating-chat-button:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* الدائرة المتحركة */
.floating-chat-icon-wrapper {
  width: 60px;
  height: 60px;
  background: #C62C32;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: doublePulse 3s infinite ease-in-out;
  transition: all 0.3s ease;
}

/* تأثير النبض */
@keyframes doublePulse {
  0% { transform: scale(1); }
  10% { transform: scale(1.15); }
  20% { transform: scale(1); }
  30% { transform: scale(1.12); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* دوران الأيقونة */
.floating-chat-icon-wrapper i {
  transition: transform 0.4s ease;
}

/* لما القائمة تتفتح */
.floating-chat-container.active .floating-chat-icon-wrapper {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}

/* عند الفتح */
.floating-chat-container.active .floating-chat-icon-wrapper i {
  transform: rotate(180deg);
}

/* الفقاعة (الرسالة البيضاء) */
.floating-chat-button .floating-chat-label {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  color: #111;
  background: #fff;
  padding: 8px 16px;
  border-radius: 18px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
}

/* السهم المتصل بالفقاعة */
.floating-chat-button .floating-chat-label::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #fff;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.08);
}

/* ظهور الفقاعة */
.floating-chat-button.show-label .floating-chat-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* أيقونات التواصل */
.floating-chat-icons {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 70px;
  left: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.floating-chat-container.active .floating-chat-icons {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* أيقونة كل تطبيق */
.floating-chat-icon {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  cursor: pointer;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  background: none;
  transition: all 0.3s ease;
}

/* تسمية أيقونات التواصل */
.floating-chat-icon .floating-chat-label {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: white;
  background: rgba(0,0,0,0.7);
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.floating-chat-icon:hover .floating-chat-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-5px);
}

.floating-chat-icon:hover,
.floating-chat-icon:focus {
  transform: scale(1.2);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.4);
  outline: none;
}

/* ألوان الأيقونات */
.floating-chat-whatsapp { background-color: #25D366; }
.floating-chat-messenger { background-color: #0084FF; }
.floating-chat-telegram { background-color: #0088cc; }

/* ======= بداية القالب الترحيبي ======= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.chat-greeting-box {
  font-family: 'Inter', Arial, sans-serif;
  position: fixed;
  bottom: 100px;
  left: 20px;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.5s ease;
  direction: ltr;
  z-index: 999;
}

.chat-greeting-box.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-greeting-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #C62C32, #272727);
  color: #fff;
  padding: 12px 15px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 70px;
}

.chat-agent-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
}

.chat-agent-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  margin-top: 2px;
}

.chat-agent-name {
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
}

.chat-agent-position {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}

.chat-greeting-message {
  background: #f1f0f0;
  margin: 10px 15px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.chat-message-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 15px;
}

.chat-message-bubble img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-message-text {
  background: #f1f0f0;
  padding: 10px 12px;
  border-radius: 12px;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  max-width: 230px;
}

.chat-message-text p {
  margin: 0;
}

.chat-message-time {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

.chat-time {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

.chat-greeting-actions {
  padding: 10px 15px 15px;
  text-align: center;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #444;
}

.chat-icons-inline {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.chat-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  transition: transform 0.3s ease;
}

.chat-icon-btn i {
  pointer-events: none;
}

.chat-icon-btn[data-app="whatsapp"] { background-color: #25D366; }
.chat-icon-btn[data-app="messenger"] { background-color: #0084FF; }
.chat-icon-btn[data-app="telegram"] { background-color: #0088cc; }

.chat-icon-btn:hover {
  transform: scale(1.15);
}
/* ======= نهاية القالب الترحيبي ======= */
/* 💓 Heartbeat */
@keyframes doublePulse {
  0% { transform: scale(1); }
  10% { transform: scale(1.15); }
  20% { transform: scale(1); }
  30% { transform: scale(1.12); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* 🪩 Bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* 🌊 Pulse */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* 🔔 Ring */
@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41%, 100% { transform: rotate(0); }
}

/* 🔔 Double Ring (نسخة أسرع) */
@keyframes doubleRing {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  70%, 100% { transform: rotate(0deg); }
}

/* ✨ Move In */
@keyframes moveIn {
  0% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
  75% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* نهاية أيقونات التواصل الاج