/**
 * Backlab Floating WhatsApp — Fase 13.1. Só carregado nas páginas onde o botão renderiza
 * (ver Floating_WhatsApp::maybe_enqueue). Sem JavaScript: hover/tooltip são CSS puro; o link
 * já é funcional sem motion e sem CSS (âncora real, sempre no HTML).
 */

.bl-floating-whatsapp {
  --bl-fw-size: 3.4rem;
  position: fixed;
  inset-block-end: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem));
  inset-inline-end: clamp(1.25rem, 3vw, 2rem);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--bl-fw-size);
  block-size: var(--bl-fw-size);
  border-radius: var(--bl-radius-pill, 999px);
  background: #25d366;
  color: #050707;
  box-shadow: 0 6px 20px rgba(5, 7, 7, .35);
  text-decoration: none;
  transition: transform 200ms var(--bl-ease-out, ease), box-shadow 200ms ease;
}

.bl-floating-whatsapp__icon { display: flex; }
.bl-floating-whatsapp__icon svg { inline-size: 1.6rem; block-size: 1.6rem; display: block; }

.bl-floating-whatsapp__tooltip {
  position: absolute;
  inset-inline-end: calc(100% + .75rem);
  inset-block-start: 50%;
  padding: .5rem .85rem;
  border-radius: var(--bl-radius-sm, .375rem);
  background: var(--bl-bg-primary, #080c0c);
  color: var(--bl-text-primary, #f5f8f7);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .bl-floating-whatsapp:hover,
  .bl-floating-whatsapp:focus-visible {
    box-shadow: 0 10px 26px rgba(5, 7, 7, .42);
    transform: translateY(-3px);
  }

  .bl-floating-whatsapp:hover .bl-floating-whatsapp__tooltip,
  .bl-floating-whatsapp:focus-visible .bl-floating-whatsapp__tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.bl-floating-whatsapp:focus-visible {
  outline: var(--bl-focus-width, 2px) solid var(--bl-color-brand, #3dbfb0);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .bl-floating-whatsapp {
    --bl-fw-size: 3.25rem;
    inset-inline-end: 1.1rem;
    inset-block-end: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + .9rem));
  }

  /* Tooltip depende de hover (mouse); sem hover no touch não teria como fechar sozinho. */
  .bl-floating-whatsapp__tooltip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-floating-whatsapp,
  .bl-floating-whatsapp__tooltip {
    transition-duration: .01ms;
  }
}

@media (forced-colors: active) {
  .bl-floating-whatsapp { border: 1px solid ButtonText; }
}