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

.wa-widget {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 10750;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.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: 58px;
  height: 58px;
  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;
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 32px; height: 32px; 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; }

/* 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 2.6s 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 { left: 14px; bottom: 84px; } /* acima de barras inferiores mobile */
  .wa-fab { width: 52px; height: 52px; }
  .wa-option { min-width: 184px; }
}