/* =================================================
   JoinChat – Floating WhatsApp Button
   Apple Glass Style (LoQuiero)
   ================================================= */

@media (max-width: 768px) {

  .joinchat.joinchat--show .joinchat__button {
    bottom: 100px !important;
    right: 18px !important;
    z-index: 9999 !important;

    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;

    /* Apple Glass base (NO depende del blur) */
    background: linear-gradient(
  rgba(28,28,30,0.44),
  rgba(28,28,30,0.44)
) !important;


    /* Glass enhancement */
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;

    border: 1px solid rgba(255,255,255,0.55) !important;

    box-shadow:
      0 6px 12px rgba(0,0,0,0.10),
      0 12px 26px rgba(0,0,0,0.08) !important;

    animation: appleBreath 3.2s ease-in-out infinite;

    transition:
      transform .22s ease,
      box-shadow .22s ease;
  }

  .joinchat__button:hover {
    transform: scale(1.07);
    box-shadow:
      0 9px 18px rgba(0,0,0,0.14),
      0 14px 32px rgba(0,0,0,0.12);
  }

  .joinchat__button img {
    width: 70%;
    height: 70%;
    object-fit: contain;
  }

  /* Badge notificación */
  .joinchat__button::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;

    width: 12px;
    height: 12px;

    background-color: #FF3B30;
    border: 1.8px solid #ffffff;
    border-radius: 50%;

    box-shadow:
      0 1px 2px rgba(0,0,0,0.25),
      0 0 6px rgba(255,59,48,0.35);

    animation:
      iosBadgePop .25s ease-out,
      iosBadgePulse 1.9s ease-in-out infinite;
  }
}

/* ================= Animaciones ================= */

@keyframes appleBreath {
  0% {
    box-shadow: 0 6px 12px rgba(0,0,0,0.10),
                0 12px 26px rgba(0,0,0,0.08);
  }
  50% {
    box-shadow: 0 9px 20px rgba(0,0,0,0.14),
                0 16px 32px rgba(0,0,0,0.10);
  }
  100% {
    box-shadow: 0 6px 12px rgba(0,0,0,0.10),
                0 12px 26px rgba(0,0,0,0.08);
  }
}

@keyframes iosBadgePop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes iosBadgePulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.22); opacity: .88; }
  100% { transform: scale(1); opacity: 1; }
}