/* Desarrollado por Samuel Ramsan @ linkedin.com/in/samuel-ramsan/ */

/* ==========================================================================
   Chatbot Viajes Delfin - Estilos del Widget
   Colores basados en la paleta del portal: #50777f (teal), #17d0ff (cyan)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor raiz del widget (posicion fija en esquina inferior derecha)
   -------------------------------------------------------------------------- */
#chatbot-delfin-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  direction: ltr;
}

/* --------------------------------------------------------------------------
   Boton burbuja flotante
   -------------------------------------------------------------------------- */
#chatbot-delfin-burbuja {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17d0ff 0%, #50777f 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(80, 119, 127, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 0;
  margin: 0;
}

#chatbot-delfin-burbuja:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(80, 119, 127, 0.55);
}

#chatbot-delfin-burbuja:active {
  transform: scale(0.96);
  transform: scale(0.96);
}

/* Icono dentro de la burbuja */
#chatbot-delfin-burbuja .material-icons {
  font-size: 30px;
  user-select: none;
  pointer-events: none;
}

/* Burbuja oculta cuando el chat esta abierto */
#chatbot-delfin-widget.chat-abierto #chatbot-delfin-burbuja {
  display: none;
}

/* --------------------------------------------------------------------------
   Ventana del chat
   -------------------------------------------------------------------------- */
#chatbot-delfin-ventana {
  display: none;
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 480px;
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 41, 51, 0.18);
  overflow: hidden;
  flex-direction: column;
  animation: chatbot-delfin-aparecer 0.3s ease;
}

#chatbot-delfin-widget.chat-abierto #chatbot-delfin-ventana {
  display: flex;
}

@keyframes chatbot-delfin-aparecer {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Cabecera de la ventana
   -------------------------------------------------------------------------- */
#chatbot-delfin-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #17d0ff 0%, #50777f 100%);
  color: #ffffff;
  flex-shrink: 0;
}

#chatbot-delfin-cabecera .chatbot-delfin-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#chatbot-delfin-cabecera .chatbot-delfin-logo {
  height: 49px;
  width: auto;
  display: block;
}

/* Boton cerrar */
#chatbot-delfin-cerrar {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

#chatbot-delfin-cerrar:hover {
  background: rgba(255, 255, 255, 0.2);
}

#chatbot-delfin-cerrar .material-icons {
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   Cuerpo del chat (zona de mensajes)
   -------------------------------------------------------------------------- */
#chatbot-delfin-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafa;
  scroll-behavior: smooth;
}

/* Scrollbar estilizado */
#chatbot-delfin-mensajes::-webkit-scrollbar {
  width: 5px;
}

#chatbot-delfin-mensajes::-webkit-scrollbar-track {
  background: transparent;
}

#chatbot-delfin-mensajes::-webkit-scrollbar-thumb {
  background: #c8d6d8;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Burbujas de mensaje
   -------------------------------------------------------------------------- */
.chatbot-delfin-mensaje {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: chatbot-delfin-msg 0.25s ease;
  white-space: pre-wrap;
}

@keyframes chatbot-delfin-msg {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mensaje del bot (izquierda) */
.chatbot-delfin-bot {
  align-self: flex-start;
  background: #ffffff;
  color: #1f2933;
  border: 1px solid #e2e8ea;
  border-bottom-left-radius: 4px;
  text-align: left;
}

/* Mensaje del usuario (derecha) */
.chatbot-delfin-usuario {
  align-self: flex-end;
  background: linear-gradient(135deg, #17d0ff 0%, #50777f 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Indicador de "escribiendo..." (tres puntos animados)
   -------------------------------------------------------------------------- */
.chatbot-delfin-escribiendo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
}

.chatbot-delfin-escribiendo span {
  width: 7px;
  height: 7px;
  background: #9bb3bb;
  border-radius: 50%;
  animation: chatbot-delfin-punto 1.3s infinite ease-in-out;
}

.chatbot-delfin-escribiendo span:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-delfin-escribiendo span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chatbot-delfin-punto {

  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }

  40% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* --------------------------------------------------------------------------
   Pie de la ventana (input + boton enviar)
   -------------------------------------------------------------------------- */
#chatbot-delfin-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #e2e8ea;
  background: #ffffff;
  flex-shrink: 0;
}

#chatbot-delfin-input {
  flex: 1;
  border: 1px solid #dce4e6;
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-family: inherit;
  color: #1f2933;
  background: #f8fafa;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: none;
  min-height: 20px;
  max-height: 80px;
}

#chatbot-delfin-input:focus {
  border-color: #50777f;
  box-shadow: 0 0 0 3px rgba(80, 119, 127, 0.12);
}

#chatbot-delfin-input::placeholder {
  color: #9bb3bb;
}

#chatbot-delfin-enviar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17d0ff 0%, #50777f 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}

#chatbot-delfin-enviar:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 10px rgba(80, 119, 127, 0.35);
}

#chatbot-delfin-enviar:active {
  transform: scale(0.94);
}

#chatbot-delfin-enviar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#chatbot-delfin-enviar .material-icons {
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   Responsive: pantallas muy pequeñas
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  #chatbot-delfin-ventana {
    width: calc(100vw - 20px);
    height: 420px;
  }

  #chatbot-delfin-burbuja {
    width: 50px;
    height: 50px;
  }

  #chatbot-delfin-burbuja .material-icons {
    font-size: 26px;
  }
}