/* ============================================================================
   WhatsApp widget flutuante (comunidade + suporte). Isolado, prefixo wa-.
   CSS-only (checkbox hack), canto inferior-direito. Fica DENTRO de #app,
   então só aparece na área logada (some na landing/login).
   ========================================================================== */

.wa-widget {
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--tu-popup-stack-offset, 0px));
  z-index: 10750;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transition: bottom .32s cubic-bezier(.22,.8,.24,1);
}

.wa-options {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.wa-toggle:checked ~ .wa-options { display: flex; animation: wa-rise 0.18s ease; }
@keyframes wa-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wa-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #0b141a;
  text-decoration: none;
  padding: 9px 14px 9px 9px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  min-width: 212px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease;
}
.wa-option:hover { transform: translateX(-3px); }
.wa-option .material-icons-round {
  background: #25d366;
  color: #fff;
  border-radius: 10px;
  padding: 6px;
  font-size: 20px;
}
.wa-option.wa-community .material-icons-round { background: #128c7e; }
.wa-option-text { display: flex; flex-direction: column; line-height: 1.2; }
.wa-option-text strong { font-size: 13.5px; font-weight: 700; }
.wa-option-text small { font-size: 11.5px; color: #5b6b73; }

.wa-fab {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.15s ease;
  animation: wa-zoom-pulse 1s ease-in-out infinite;
}
.wa-fab:hover { animation: none; transform: scale(1.1); }
.wa-fab svg { width: 38px; height: 38px; fill: #fff; }
.wa-fab .wa-fab-close { display: none; color: #fff; font-size: 26px; }
.wa-toggle:checked ~ .wa-fab svg { display: none; }
.wa-toggle:checked ~ .wa-fab .wa-fab-close { display: block; }
.wa-toggle:checked ~ .wa-fab { animation: none; transform: scale(1); }

@keyframes wa-zoom-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* pulso de atenção (pausa quando aberto) */
.wa-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: wa-pulse 1s ease-out infinite;
}
.wa-toggle:checked ~ .wa-fab::after { animation: none; }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 600px) {
  .wa-widget { right: 14px; bottom: calc(84px + var(--tu-popup-stack-offset, 0px)); } /* acima de barras inferiores mobile */
  .wa-fab { width: 60px; height: 60px; }
  .wa-fab svg { width: 34px; height: 34px; }
  .wa-option { min-width: 184px; }
}

body[data-gradient="metallic-pink"] .wa-fab {
  background: linear-gradient(135deg, #f18ab3 0%, #c94f80 52%, #8e3158 100%);
  box-shadow: 0 8px 26px rgba(185, 65, 113, .42), inset 0 1px 0 rgba(255,255,255,.4);
}

body[data-gradient="metallic-pink"] .wa-fab::after {
  animation-name: wa-pulse-pink;
}

body[data-gradient="metallic-pink"] .wa-option .material-icons-round {
  background: #c94f80;
}

body[data-gradient="metallic-pink"] .wa-option.wa-community .material-icons-round {
  background: #8e3158;
}

@keyframes wa-pulse-pink {
  0% { box-shadow: 0 0 0 0 rgba(201, 79, 128, .52); }
  70% { box-shadow: 0 0 0 16px rgba(201, 79, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 79, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-widget { transition: none; }
  .wa-fab, .wa-fab::after { animation: none !important; }
}