html {
  height: 100%;
  width: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

#header{
  position:fixed;
  border-radius: 6px 6px 0 0;
  padding: 16px 10px;
  text-align: center;
  color: #fff;
  background: #00D4B4;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width:100%;
  height:50px;
  z-index:1000;
  display: flex; /* Activa Flexbox */
  align-items: center; /* Alinea verticalmente */
  justify-content: flex-start;
}
#header h2 {
  font-size: 1.4rem;
}

#logo-image {
    margin-right: 5px; /* Espacio entre la imagen y el título */
    height:40px;
}
  body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
  }

#chat-container {
padding: 20px;
overflow-y: auto;
background-color: #f7f7f7;
display: flex;
flex-direction: column-reverse;

/* Ajuste clave: altura dinámica y margen inferior */
  position: fixed;
  width: 100%;
  height: 100%;
padding-bottom: 80px; /* Altura del formulario */
}

  .mensaje {
      background-color: #e0e0e0;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 10px;
      max-width: 60%;
  }
.boton-copiar {
    margin-left: 10px;
    background-color: #cdcdcd;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    color:black;
}

/* Estilos para el botón al pasar el ratón sobre él */
.boton-copiar:hover {
    background-color: #b7b7b7;
}

#formulario {
display: flex;
padding: 5px;
background-color: white;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
position: fixed; /* Fija el formulario en la parte inferior */
bottom: 0; /* Coloca el formulario en la parte inferior de la pantalla */
width: 100%;
height: 50px; /* Altura fija para el formulario */
}


  #pregunta {
      flex-grow: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 2px;
      margin-right: 10px;
    font-size: 16px;
    min-width:10px;
  }

#enviar {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  min-width: 15%;
  margin-right: 10px;

}
#borrar{
  border: none;
  padding:6px;
  margin:5px;
}

  #enviar:hover {
      background-color: #0056b3;
  }
.mensaje-usuario {
    background-color: blue;
    color: white;
    align-self: flex-end;
}

.mensaje-chatbot {
    background-color: #gray;
    color: black;
    align-self: flex-start;
}
@keyframes typing {
  0% { content: 'Escribiendo.'; }
  25% { content: 'Escribiendo..'; }
  50% { content: 'Escribiendo...'; }
  75% { content: 'Escribiendo....'; }
  100% { content: 'Escribiendo.....'; }
}

#escribiendo::after {
  content: 'Escribiendo';
  animation: typing 1s steps(5, end) infinite;
}
.puntos {
  display: inline-block;
  margin-left: 2px;
  animation: typing 1.5s infinite; /* Ajusta la duración según prefieras */
}