body {
   font-family: 'Arial', sans-serif;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #f0f0f0;
}

.header-container {
   text-align: center;
   margin-bottom: 2rem; /* Cambiado a rem */
}

.chatbot-title {
   color: red;
   font-size: 4rem; /* Mantener el tamaño grande */
   font-family: "Besley", serif;
}

.chat-container {
   border: 2px solid #e0e0e0;
   width: 60%;
   max-width: 800px;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   background: #fff;
}

#chat-display {
   height: 50vh; /* Cambiado a vh para adaptarse a la altura de la pantalla */
   overflow-y: auto;
   padding: 20px;
   background: #f8f8f8;
}

.user-message, .bot-message {
   margin-bottom: 1rem; /* Cambiado a rem */
   padding: 1rem; /* Cambiado a rem */
   border-radius: 10px;
   font-size: 1.1rem;
}

.user-message {
   background-color: #d1e8ff;
   align-self: flex-end;
   margin-right: 1rem; /* Cambiado a rem */
}

.bot-message {
   background-color: #e7f5d1;
   align-self: flex-start;
   margin-left: 1rem; /* Cambiado a rem */
}

.chat-input-container {
   display: flex;
   align-items: center;
   width: 97%;
   padding: 1rem; /* Cambiado a rem */
   background-color: #e0e0e0;
   border-top: 1px solid #ccc;
}

input {
   flex: 1;
   padding: 1rem; /* Cambiado a rem */
   border: none;
   border-radius: 5px;
   margin-right: 1rem; /* Cambiado a rem */
   font-size: 1rem; /* Mantenido en rem */
   box-sizing: border-box;
}

input:focus {
   outline: none;
}

button {
   padding: 0.8rem 1.2rem; /* Cambiado a rem */
   background-color: red;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 1rem; /* Mantenido en rem */
}

button:hover {
   background-color: darkred;
}

/* Media Queries para diferentes tamaños de pantalla */
@media (max-width: 768px) {
   .chat-container {
       width: 80%; /* Aumenta el ancho en pantallas más pequeñas */
   }

   /* Estilos ajustados para pantallas más pequeñas */
   .user-message, .bot-message {
       margin-bottom: 1rem;
       font-size: 0.9rem; /* Reducir ligeramente el tamaño de la fuente */
   }

   .chat-input-container, input {
       padding: 0.8rem; /* Reducir el padding */
   }

   button {
       padding: 0.6rem 1rem; /* Reducir aún más el padding del botón */
       font-size: 0.8rem; /* Tamaño de fuente más pequeño para el botón */
   }
}