/* Floating contact FAB (encapsulado) */
.contact-fab {
  --fab-btn: 3.5rem;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --fab-offset-top: calc(14px + var(--safe-top));
  --fab-offset-right: calc(14px + var(--safe-right));
  --fab-offset-bottom: calc(14px + var(--safe-bottom));

  --fab-z: 1180;
  /* por debajo de modal (1210) y por encima del contenido */

  position: fixed;
  top: var(--fab-offset-top);
  right: var(--fab-offset-right);
  z-index: var(--fab-z);
  will-change: left, top;
}

@supports (top: constant(safe-area-inset-top)) {
  .contact-fab {
    --safe-top: constant(safe-area-inset-top);
    --safe-right: constant(safe-area-inset-right);
    --safe-bottom: constant(safe-area-inset-bottom);
    --safe-left: constant(safe-area-inset-left);
  }
}

/* El botón como “handle” de drag */
.contact-fab-btn {
  touch-action: none;
  /* CRÍTICO: evita el scroll/zoom mientras arrastras en móvil */
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.contact-fab.is-dragging .contact-fab-btn {
  cursor: grabbing;
}

.contact-fab.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* Panel del FAB */
.contact-fab-panel {
  position: fixed;

  /* Estos valores son fallback (cuando no hay posición dinámica) */
  top: calc(var(--fab-offset-top) + var(--fab-btn) + 0.5rem);
  right: var(--fab-offset-right);

  min-width: 220px;

  /* IMPORTANTE: ya no dependemos del offset-right */
  max-width: min(360px, calc(100vw - 24px));

  border-radius: 1rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);

  z-index: calc(var(--fab-z) + 1);

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;

  /* Fallback general; el JS lo ajusta al abrir */
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.contact-fab-panel.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tamaño del botón y panel en xs */
@media (max-width: 576px) {
  .contact-fab {
    --fab-btn: 3rem;
  }

  .contact-fab-btn {
    width: var(--fab-btn);
    height: var(--fab-btn);
    font-size: 1.1rem;
  }

  .contact-fab-panel {
    min-width: 200px;
  }
}

/* (Esto venía en tu style: lo dejo aquí tal cual para no romper nada) */
[data-assistant-mic] {
  --pulse-color: rgba(13, 110, 253, 0.6);
}

[data-assistant-mic].btn-danger {
  --pulse-color: rgba(220, 53, 69, 0.6);
}

[data-assistant-mic].is-listening {
  position: relative;
  animation: mic-pulse 1s infinite;
  outline: none;
}

@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(0, 0, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

[data-assistant-mic].is-stopped {
  animation: mic-stop 160ms ease-out;
}

@keyframes mic-stop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.92);
  }

  100% {
    transform: scale(1);
  }
}