.mn-floating-contact-wrapper {
  position: fixed;
  z-index: 9999;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 15px;
  pointer-events: none;
  /* Allow clicking through the area around items */
}

.mn-floating-contact-wrapper.is-left {
  right: auto;
  left: 30px;
  align-items: flex-start;
}

.mn-floating-contact-main-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: auto;
  position: relative;
  font-size: 24px;
  z-index: 2;
  /* Ensure it stays above other elements */
}

.mn-floating-contact-main-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.mn-floating-contact-main-btn i {
  transition: transform 0.3s ease;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-main-btn i {
  transform: rotate(45deg);
}

.mn-floating-contact-wrapper.active
  .mn-floating-contact-main-btn
  .mn-close-icon {
  display: block;
}

.mn-floating-contact-wrapper.active
  .mn-floating-contact-main-btn
  .mn-open-icon {
  display: none;
}

/* Main Button Text Label */
.mn-floating-contact-main-text {
  position: absolute;
  bottom: 0;
  right: 70px;
  /* main btn width + gap */
  height: 60px;
  /* Match main btn height */
  display: flex;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  /* Let clicks pass through if needed, though usually label isn't interactive */
  white-space: nowrap;
  z-index: 1;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-main-text {
  right: auto;
  left: 70px;
  justify-content: flex-start;
}

.mn-floating-contact-main-text span {
  background-color: #fff;
  color: #333;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide main text when active (optional, user didn't specify, but usually cleaner) */
.mn-floating-contact-wrapper.active .mn-floating-contact-main-text {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s;
}

/* List Items */
.mn-floating-contact-list {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: auto;
  margin-bottom: 0;
  /* Add margin to push list up above the main button */
}

/* Since list is flex-col-reverse and we want it to "grow upwards", but the wrapper is fixed bottom.
   Actually, the wrapper layout:
   wrapper (flex-col-reverse, align-end)
     - main-list (flex-col-reverse)
     - main-btn (+ main-text absolute)
     
   Wait, if I use flex-direction column-reverse on wrapper:
   Bottom element is first in HTML? No, flex-direction reverses visual order.
   HTML:
     - btn
     - text (if sibling, or separate)
     - list
   
   If wrapper is flex-col-reverse:
     1. list (visually top)
     2. btn (visually bottom)
   
   But in HTML, render order is:
     1. btn
     2. text
     3. list
   
   If wrapper is flex-col-reverse:
   Visual order:
   Top: List
   Bottom: Btn
   
   This is what we want.
   The Text needs to be positioned relative to the Btn.
   Currently absolute positioned relative to Wrapper.
   Wrapper is fixed bottom, right.
   Btn is bottom right.
   Text is absolute relative to wrapper -> bottom: 0. Matches btn.
   
   List is now pushed 75px up from bottom? 
   No, in flex layout, elements stack.
   If List is in the flow, it will sit "above" the button (visually).
   We don't need margin-bottom on list if flex works correctly.
   
   Let's check HTML structure from render:
   <div wrapper>
      <div btn></div>
      <div text></div> (if exists)
      <div list></div>
   </div>
   
   CSS: wrapper { flex-direction: column-reverse }
   
   So visual stack (bottom to top):
   1. div list (first child in flex-reverse? No. flex-direction: column-reverse displays children in reverse order. Last child is at top?)
      - Normal column: 
        1. btn (top)
        2. text
        3. list (bottom)
      - Column-reverse:
        1. list (top)
        2. text
        3. btn (bottom)
        
   Wait. text is absolute positioned. It is taken out of flow.
   So flex items are: btn, list.
   Reverse column:
   Top: list
   Bottom: btn
   
   This is correct.
   
   The text is absolute bottom 0. Ideally centered vertically with btn.
   btn height 60px. text height 60px. aligned items center.
   
   So this logic holds.
*/

.mn-floating-contact-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-item {
  flex-direction: row-reverse;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Staggered delay for items */
.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(1) {
  transition-delay: 0.05s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(2) {
  transition-delay: 0.1s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(3) {
  transition-delay: 0.15s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(4) {
  transition-delay: 0.2s;
}

.mn-floating-contact-wrapper.active .mn-floating-contact-item:nth-child(5) {
  transition-delay: 0.25s;
}

.mn-floating-contact-item-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
}

.mn-floating-contact-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  z-index: 2;
}

.mn-floating-contact-item:hover .mn-floating-contact-item-icon {
  transform: scale(1.1);
}

.mn-floating-contact-item-title {
  background-color: #fff;
  color: #333;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  position: absolute;
  right: 55px;
  /* Adjust based on icon size + gap */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.3s ease;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-item-title {
  right: auto;
  left: 60px;
  transform: translateY(-50%);
}

.mn-floating-contact-item:hover .mn-floating-contact-item-title {
  transform: translateY(-50%) scale(1.05);
}

/* Tooltip arrow */
.mn-floating-contact-item-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  pointer-events: none;
}

.mn-floating-contact-wrapper.is-left .mn-floating-contact-item-title::after {
  right: auto;
  left: -6px;
  border-width: 6px 6px 6px 0;
  border-color: transparent #fff transparent transparent;
}

/* ============================================
   Entrance Animations
   ============================================ */

@keyframes mnFcEntranceFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mnFcEntranceFadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mnFcEntranceFadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mnFcEntranceFadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mnFcEntranceFadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mnFcEntranceZoomIn {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mnFcEntranceBounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes mnFcEntranceFlipIn {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0); }
}

@keyframes mnFcEntranceSlideInUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mnFcEntranceElasticIn {
  0% { opacity: 0; transform: scale(0); }
  55% { opacity: 1; transform: scale(1.15); }
  70% { transform: scale(0.9); }
  85% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes mnFcEntranceRotateIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

.mn-fc-entrance-fade-in {
  opacity: 0;
  animation: mnFcEntranceFadeIn var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-fade-in-up {
  opacity: 0;
  animation: mnFcEntranceFadeInUp var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-fade-in-down {
  opacity: 0;
  animation: mnFcEntranceFadeInDown var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-fade-in-left {
  opacity: 0;
  animation: mnFcEntranceFadeInLeft var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-fade-in-right {
  opacity: 0;
  animation: mnFcEntranceFadeInRight var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-zoom-in {
  opacity: 0;
  animation: mnFcEntranceZoomIn var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-bounce-in {
  opacity: 0;
  animation: mnFcEntranceBounceIn var(--mn-fc-entrance-duration, 0.8s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-flip-in {
  opacity: 0;
  animation: mnFcEntranceFlipIn var(--mn-fc-entrance-duration, 0.7s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-slide-in-up {
  opacity: 0;
  animation: mnFcEntranceSlideInUp var(--mn-fc-entrance-duration, 0.6s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-elastic-in {
  opacity: 0;
  animation: mnFcEntranceElasticIn var(--mn-fc-entrance-duration, 0.9s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

.mn-fc-entrance-rotate-in {
  opacity: 0;
  animation: mnFcEntranceRotateIn var(--mn-fc-entrance-duration, 0.7s) ease var(--mn-fc-entrance-delay, 0s) forwards;
}

/* ============================================
   Attention / Idle Animations
   ============================================ */

@keyframes mnFcPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes mnFcBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
}

@keyframes mnFcBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes mnFcFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes mnFcShockwaveRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes mnFcShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes mnFcSwing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-4deg); }
}

@keyframes mnFcHeartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}

@keyframes mnFcGlow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 4px 25px 8px color-mix(in srgb, var(--mn-fc-btn-bg, #25d366) 50%, transparent);
  }
}

@keyframes mnFcWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes mnFcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.mn-fc-attention-pulse:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcPulse var(--mn-fc-attention-duration, 2s) ease-in-out infinite;
}

.mn-fc-attention-bounce:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcBounce var(--mn-fc-attention-duration, 2s) ease infinite;
}

.mn-fc-attention-blink:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcBlink var(--mn-fc-attention-duration, 1.5s) ease-in-out infinite;
}

.mn-fc-attention-fade:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcFade var(--mn-fc-attention-duration, 2s) ease-in-out infinite;
}

.mn-fc-attention-shockwave:not(.active) .mn-floating-contact-main-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--mn-fc-btn-bg, #25d366);
  animation: mnFcShockwaveRing var(--mn-fc-attention-duration, 2s) ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

.mn-fc-attention-shake:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcShake var(--mn-fc-attention-duration, 2s) ease-in-out infinite;
}

.mn-fc-attention-swing:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcSwing var(--mn-fc-attention-duration, 2s) ease-in-out infinite;
  transform-origin: top center;
}

.mn-fc-attention-heartbeat:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcHeartbeat var(--mn-fc-attention-duration, 1.5s) ease-in-out infinite;
}

.mn-fc-attention-glow:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcGlow var(--mn-fc-attention-duration, 2s) ease-in-out infinite;
}

.mn-fc-attention-wiggle:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcWiggle var(--mn-fc-attention-duration, 1s) ease-in-out infinite;
}

.mn-fc-attention-float:not(.active) .mn-floating-contact-main-btn {
  animation: mnFcFloat var(--mn-fc-attention-duration, 2.5s) ease-in-out infinite;
}

/* Pause attention animation on hover; resume hover scale */
.mn-floating-contact-wrapper[class*="mn-fc-attention-"]:not(.active) .mn-floating-contact-main-btn:hover {
  animation-play-state: paused;
}

.mn-floating-contact-wrapper.active[class*="mn-fc-attention-"] .mn-floating-contact-main-btn {
  animation: none;
}

.mn-floating-contact-wrapper.active[class*="mn-fc-attention-"] .mn-floating-contact-main-btn::before {
  display: none;
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .mn-floating-contact-wrapper[class*="mn-fc-entrance-"] {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  .mn-floating-contact-wrapper[class*="mn-fc-attention-"] .mn-floating-contact-main-btn,
  .mn-floating-contact-wrapper[class*="mn-fc-attention-"] .mn-floating-contact-main-btn::before {
    animation: none !important;
  }
}