/* ====== Mini Floating Dock — تواصل سريع ====== */
.contact-dock {
  position: fixed;
  z-index: 60;
  bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px) + 14px);
  left: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dock-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-black);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;

  /* حالة الدخول: تظهر بلطف من أسفل الشاشة مع تأخير متتابع لكل زر */
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    width var(--duration-base) var(--ease-out),
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
  transition-delay: calc(var(--i) * 90ms);
}
.contact-dock.is-ready .dock-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dock-icon {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dock-icon svg { width: 22px; height: 22px; }

.dock-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  padding-inline-end: 0;
  transition: max-width var(--duration-base) var(--ease-out), padding-inline-end var(--duration-base) var(--ease-out);
}

/* تفاعل سطح المكتب: توسّع خفيف يكشف التسمية بدلاً من Hover تقليدي */
@media (hover: hover) and (pointer: fine) {
  .dock-btn:hover,
  .dock-btn:focus-visible {
    background: var(--color-primary);
    color: var(--color-black);
    box-shadow: var(--shadow-lg);
  }
  .dock-btn:hover .dock-label,
  .dock-btn:focus-visible .dock-label {
    max-width: 110px;
    padding-inline-end: var(--space-2);
  }
}

/* تفاعل اللمس: انضغاطة بسيطة بدل أي Hover */
.dock-btn:active {
  transform: scale(0.92);
  transition-duration: var(--duration-fast);
}

.dock-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* نبضة تذكيرية خفيفة ومتكررة بعد الظهور، لتبقى أيقونات التواصل ملحوظة بدون إزعاج */
.dock-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--color-primary);
  pointer-events: none;
}
.contact-dock.is-ready .dock-btn::after {
  animation: dockPulseRing 3.6s var(--ease-standard) infinite;
  animation-delay: calc(var(--i) * 90ms + 900ms);
}
@keyframes dockPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(60, 220, 180, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(60, 220, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 220, 180, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dock-btn {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }
  .contact-dock.is-ready .dock-btn::after {
    animation: none;
  }
}

/* لا تتعارض مع القائمة الكاملة للموبايل عند فتحها */
body.menu-open .contact-dock { display: none; }

@media (max-width: 480px) {
  .contact-dock { left: 12px; bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px) + 10px); }
  .dock-btn { width: 46px; height: 46px; }
  .dock-icon { flex-basis: 46px; height: 46px; }
}