/**
 * Fastalk Embed Styles
 * Version: 8.3.0 (Premium Transitions & Fixed Stacking)
 */

/* =================================================================== */
/* == ESTILOS BASE Y GLOBALES ======================================== */
/* =================================================================== */

.fastalk-widget-container {
  position: relative;
  z-index: 2000;
}

.fastalk-iframe {
  border: none;
}

/* Ocultar Voice Widget cuando el Chat está abierto (limpieza visual) */
body.fastalk-chat-mobile-open .fastalk-voice-widget,
body.fastalk-chat-desktop-open .fastalk-voice-widget {
  display: none;
}


/* =================================================================== */
/* == WIDGET ASISTENTE DE VOZ (PREMIUM FULL SCREEN) ================== */
/* =================================================================== */

/* --- BOTÓN TRIGGER FLOTANTE --- */
.fastalk-voice-widget .fastalk-toggle-button {
  position: fixed;
  bottom: 20px;
  /* Posición por defecto (si está solo) */
  right: 20px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1990;

  /* Transición suave para hover y posición */
  transition:
    background 0.3s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    /* Efecto rebote sutil */
    box-shadow 0.3s ease,
    bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fastalk-voice-widget .fastalk-toggle-button:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px var(--fastalk-voice-shadow-color, rgba(0, 0, 0, 0.2));
  transform: scale(1.08);
}

.fastalk-voice-widget .fastalk-toggle-button:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}

/* Cuando se abre el modal, el botón desaparece suavemente */
.fastalk-voice-widget .fastalk-toggle-button.moved {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}


/* --- CONTENEDOR FULL SCREEN (Lógica Nueva) --- */
.fastalk-voice-widget .fastalk-iframe-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2147483647;
  /* Máximo nivel */

  background: rgba(255, 255, 255, 0.95);
  /* Fondo casi sólido para inmersión */

  /* ESTADO INICIAL: Oculto, ligeramente más pequeño y transparente */
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96) translateY(15px);

  /* TRANSICIONES "ELEGANTES" (Curva Exponencial suave) */
  transition:
    visibility 0s linear 0.4s,
    /* Delay visibility al cerrar */
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.4s ease;

  pointer-events: none;
}

/* ESTADO ABIERTO */
.fastalk-voice-widget .fastalk-iframe-wrapper.open {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  /* El backdrop filter añade ese toque de cristal premium */
  backdrop-filter: blur(10px);

  /* Quitamos el delay de visibilidad al abrir */
  transition-delay: 0s;
}

.fastalk-voice-widget .fastalk-iframe {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
  /* Aparece un poco después del fondo */
}

.fastalk-voice-widget .fastalk-iframe-wrapper.open .fastalk-iframe {
  opacity: 1;
}


/* --- BOTÓN DE CIERRE (OVERLAY) --- */
.fastalk-voice-close-button {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  z-index: 2147483650;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ESTADO INICIAL DEL BOTÓN DE CIERRE */
  opacity: 0;
  transform: translateY(-10px) scale(0.9);
  pointer-events: none;

  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fastalk-voice-close-button:hover {
  transform: scale(1.1) !important;
  /* Force scale on hover when open */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Solo aparece cuando el wrapper está abierto y con un ligero retraso (delay) */
.fastalk-iframe-wrapper.open .fastalk-voice-close-button {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: 0.2s;
  /* Elegancia: aparece después de que el modal se asienta */
}


/* =================================================================== */
/* == WIDGET CHATBOT DE TEXTO ======================================== */
/* =================================================================== */
.fastalk-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 65px;
  height: 65px;
  z-index: 1991;
}

/* (El resto de estilos del chat se mantienen igual para no romper nada) */
.fastalk-chat-widget .fastalk-toggle-button,
.fastalk-chat-widget .fastalk-close-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fastalk-chat-widget .fastalk-toggle-button:hover,
.fastalk-chat-widget .fastalk-close-button:hover {
  transform: scale(1.1);
}

.fastalk-chat-widget .fastalk-toggle-button {
  opacity: 1;
  transform: scale(1);
}

.fastalk-chat-widget .fastalk-close-button {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.fastalk-chat-widget.is-open .fastalk-toggle-button {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.fastalk-chat-widget.is-open .fastalk-close-button {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.fastalk-chat-widget .welcome-message {
  padding: 20px;
  align-items: center;
  width: 220px;
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.fastalk-chat-widget .welcome-message p {
  padding: 10px;
  font-size: 16px;
  font-family: system-ui, sans-serif;
  font-weight: 300;
  margin: 0;
}

.fastalk-chat-widget:not(.is-open):hover .welcome-message {
  opacity: 1;
}

.fastalk-chat-widget .fastalk-iframe {
  display: block;
  width: 350px;
  height: 700px;
  max-height: calc(100vh - 105px);
  border-radius: 20px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  transform-origin: bottom right;
  transform: scale(0);
  opacity: 0;
  position: fixed;
  bottom: 95px;
  right: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.fastalk-chat-widget.is-open .fastalk-iframe {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.fastalk-chat-widget .fastalk-mobile-close-button {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10002;
}

body.fastalk-chat-mobile-open .fastalk-chat-widget .fastalk-mobile-close-button {
  display: flex;
}

/* =================================================================== */
/* == POSICIONAMIENTO DINÁMICO (STACKING FIX) ======================== */
/* =================================================================== */

/*
   REGLA DE ORO: Si JS detecta ambos widgets, el body tiene la clase
   .fastalk-multiple-widgets-active.

   Aquí forzamos que el botón de Voz suba a 105px para dejar espacio al chat.
*/
body.fastalk-multiple-widgets-active .fastalk-voice-widget .fastalk-toggle-button {
  bottom: 95px !important;
  /* Importante para sobreescribir cualquier conflicto */
}

/* Cuando se abre (moved), lo mantenemos abajo o lo ocultamos en su posición original */
body.fastalk-multiple-widgets-active .fastalk-voice-widget .fastalk-toggle-button.moved {
  bottom: 95px !important;
}


/* =================================================================== */
/* == MEDIA QUERIES ================================================== */
/* =================================================================== */
@media (max-width: 768px) {

  .fastalk-chat-widget.is-open .fastalk-close-button,
  .fastalk-chat-widget.is-open .fastalk-toggle-button {
    display: none;
  }

  .fastalk-chat-widget .fastalk-iframe {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 1;
    z-index: 10001;
  }

  .fastalk-chat-widget.is-open .fastalk-iframe {
    transform: translateY(0);
  }
}