/* Container anchored bottom-right */
.floating-chat {
  position: fixed;
  right: 22px;   /* was 16px (moves it in from the corner) */
  bottom: 22px;  /* was 16px */
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Toggle button */
.floating-toggle {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  position: relative;
  will-change: transform;
}

/* Stacked menu */
.floating-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* Each icon */
.chat-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  text-decoration: none;
  position: relative;
  will-change: transform;
}

.chat-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On small screens: hide menu by default, expand when open */
@media (max-width: 991.98px) {
  .floating-menu {
    display: none;
  }
  .floating-menu.open {
    display: flex;
  }
}

/* On large screens: always show the menu, hide toggle button via Bootstrap class d-lg-none */
@media (min-width: 992px) {
  .floating-menu {
    display: flex !important;
  }

  /* Bigger on desktop only */
  .chat-icon {
    width: 62px;   /* was 54px */
    height: 62px;  /* was 54px */
  }

  .floating-toggle {
    width: 58px;   /* was 52px */
    height: 58px;  /* was 52px */
  }

  /* Move it a bit further away from the edges on desktop */
  .floating-chat {
    right: 28px;   /* was 22px */
    bottom: 28px;  /* was 22px */
  }
}

/* Optional hover effect */
.chat-icon:hover {
  transform: translateY(-2px);
  transition: transform 120ms ease;
}

/* -----------------------------
   Pulse + shimmer (add class "pulse")
   ----------------------------- */

/* Soft ring shimmer layer */
.chat-icon::after,
.floating-toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: conic-gradient(
    from 180deg,
    rgba(255,255,255,0.0),
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.0)
  );
  filter: blur(1px);
  opacity: 0;
  transform: rotate(0deg);
  pointer-events: none;
}

/* Apply animations only when .pulse is present */
.chat-icon.pulse,
.floating-toggle.pulse {
  animation: pulsePop 2.8s ease-in-out infinite;
}

.chat-icon.pulse::after,
.floating-toggle.pulse::after {
  animation: shimmerRing 3.2s linear infinite;
  opacity: 0.55;
}

/* Keyframes */
@keyframes pulsePop {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.03); }
}

@keyframes shimmerRing {
  0%   { transform: rotate(0deg);   opacity: 0.25; }
  50%  { transform: rotate(180deg); opacity: 0.55; }
  100% { transform: rotate(360deg); opacity: 0.25; }
}

/* Respect accessibility: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chat-icon.pulse,
  .floating-toggle.pulse {
    animation: none !important;
  }
  .chat-icon.pulse::after,
  .floating-toggle.pulse::after {
    animation: none !important;
    opacity: 0 !important;
  }
}