body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #e5ddd5;
}

.chat-container {
  max-width: 600px;
  margin: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
}

.chat-box {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;         /* Agregado */
  flex-direction: column; /* Agregado */
}

.message {
  max-width: 75%;
  padding: 10px;
  margin: 5px 0;
  border-radius: 10px;
  word-wrap: break-word;
}

/* Chatbot: Alineado a la izquierda */
.bot {
  background: #ffffff;
  align-self: flex-start; /* Alinea a la izquierda */
  border-bottom-left-radius: 2px; /* Efecto burbuja */
}

/* Usuario: Alineado a la derecha */
.user {
  background: #dcf8c6;
  align-self: flex-end;   /* Alinea a la derecha */
  border-bottom-right-radius: 2px; /* Efecto burbuja */
}

.input-area {
  display: flex;
  padding: 10px;
  background: #fff;
  align-items: flex-end; /* Alinea el botón abajo si la caja crece */
}

textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px; /* Bordes redondeados como WhatsApp */
  resize: none;        /* Impide que el usuario lo estire manualmente */
  font-family: inherit;
  font-size: 14px;
  max-height: 120px;   /* Para que no cubra todo el chat si escriben mucho */
  overflow-y: auto;    /* Agrega scroll interno solo si pasa el max-height */
}

input {
  flex: 1;
  padding: 10px;
}

button {
  padding: 10px;
}

/* Ajuste para las imágenes dentro de las burbujas */
.message img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 5px;
}