/* 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.60);
}

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

[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);
          }
}