/* Estilo del botón de abrir chat */
#open-chat-btn {
  font-size: 9px; /* Botón más pequeño */
  background-color: #008542;
  color: #ffffff;
  text-shadow: 0 2px 0 rgb(0 0 0 / 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 60px; /* Posición más arriba */
  right: 45px;
  border: 0;
  z-index: 1;
  user-select: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4rem 0.8rem; /* Más pequeño */
  font-weight: 900;
  transition: all 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}

#open-chat-btn:before {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
  z-index: -1;
  background-color: #25D366 !important;
  box-shadow: 0 -4px rgb(008542) inset,
    0 4px rgba(008542) inset, -4px 0 rgb(008542) inset,
    4px 0 rgb(008542) inset;
}

#open-chat-btn:hover:before {
  box-shadow: 
  0 -4px rgba(255, 223, 0, 0.6) inset, /* Amarillo brillante en la parte superior */
  0 4px rgba(255, 249, 196, 0.3) inset, /* Amarillo claro en la parte inferior */
 -4px 0 rgba(255, 239, 128, 0.4) inset, /* Amarillo dorado en la izquierda */
  4px 0 rgba(255, 213, 0, 0.5) inset; /* Amarillo más oscuro en la derecha */

}

#open-chat-btn:active {
  transform: translateY(4px);
}

#open-chat-btn:active:after {
  box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);
}

/* Estilos del chat */
#chat-container {
  display: none;
  position: fixed;
  bottom: 100px; /* Posición más arriba */
  right: 0;
  width: 300px;
  height: 400px;
  background-color: white;
  border-left: 2px solid #4CAF50;
  border-top: 2px solid #4CAF50;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: bottom 0.7s cubic-bezier(0, 0.8, 0.26, 0.99); /* Añadir animación para mover el chat */
}

#chat-container.opened {
  bottom: 250px; /* Posición más arriba cuando el chat está abierto */
}

#chatbox {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  word-wrap: break-word;  /* Asegura que el texto largo se ajuste */
  overflow-y: auto;  /* Permite que el área de mensajes sea desplazable si se llena */
}

.question-area {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px; /* Espacio adicional para evitar el choque con el botón de cerrar */
}

#close-chat-btn {
  background-color: #4CAF50;
  color: rgb(0, 0, 0);
  border: none;
  padding: 8px;
  margin-top: 10px;
  cursor: pointer;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  /* En dispositivos móviles o pantallas pequeñas */
  
  #open-chat-btn {
    font-size: 10px; /* Reducir tamaño del texto del botón */
    padding: 0.3rem 0.6rem; /* Botón más pequeño */
    bottom: 80px; /* Más arriba para evitar solaparse con otros elementos */
  }

  #chat-container {
    width: 250px; /* Reducir el ancho del chat */
    height: 350px; /* Reducir la altura del chat */
    bottom: 80px; /* Posición más arriba para evitar la navbar */
  }

  #chat-container.opened {
    bottom: 200px; /* Ajustar la posición cuando el chat se abre */
  }

  /* Ajuste de la pregunta y área de mensajes */
  .question-area {
    font-size: 12px; /* Hacer el texto de las preguntas más pequeño */
    padding: 0.5rem; /* Asegurarse de que el área de preguntas esté bien espaciada */
  }

  .user-message, .bot-message {
    max-width: 90%;  /* Ajustar el ancho de los mensajes */
  }
}

/* Ajuste aún más pequeño en dispositivos muy pequeños como teléfonos */
@media (max-width: 480px) {
  #open-chat-btn {
    font-size: 8px; /* Botón más pequeño */
    padding: 0.2rem 0.5rem; /* Botón aún más pequeño */
    bottom: 70px; /* Asegurar que no se solape */
  }

  #chat-container {
    width: 200px; /* Reducir aún más el ancho del chat */
    height: 300px; /* Reducir la altura del chat */
    bottom: 70px; /* Más arriba */
  }

  #chat-container.opened {
    bottom: 150px; /* Ajustar la posición aún más */
  }

  /* Ajuste de la pregunta y área de mensajes */
  .question-area {
    font-size: 10px; /* Texto más pequeño */
    padding: 0.3rem; /* Reducir padding para el área de preguntas */
  }

  .user-message, .bot-message {
    max-width: 90%;  /* Asegura que los mensajes no se salgan */
  }
}

/* Estilos para las preguntas y respuestas */
.user-message {
  background-color: #4CAF50; /* Fondo verde para preguntas */
  color: white;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  max-width: 80%;
  align-self: flex-start; /* Alinear a la izquierda */
  word-wrap: break-word;  /* Ajusta las palabras largas */
}

.bot-message {
  background-color: #FFEB3B; /* Fondo amarillo para respuestas */
  color: black;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  max-width: 80%;
  align-self: flex-end; /* Alinear a la derecha */
  word-wrap: break-word;  /* Ajusta las palabras largas */
}