body {
        /* Aquí establecemos el fondo con la imagen del universo */
        background-image: url('universe_background.jpg'); /* Reemplaza con la URL de tu imagen */
        background-size: cover; /* Cubre todo el fondo */
        background-position: center; /* Centra la imagen */
        font-family: 'Inter', sans-serif;
        color: white; /* Cambiamos el color del texto para que se vea bien en el fondo oscuro */
        margin: 0; /* Elimina el margen predeterminado del body */
        padding: 0;
      }
      #chat-container {
        width: 800px;
        margin: 20px auto;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 500px;
        background-color: rgba(0, 0, 0, 0.7); /* Añadimos un fondo semi-transparente al chat container */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Añadimos sombra para que destaque */
      }

      #chat-log {
        flex-grow: 1;
        padding: 10px;
        overflow-y: auto;
        /* El fondo del chat log ahora es transparente */
        background-color: transparent;
      }

      .user-message, .gemini-message {
        padding: 8px 12px;
        margin-bottom: 8px;
        border-radius: 5px;
        clear: both;
        max-width: 70%; /* Limitamos el ancho de los mensajes */
      }

      .user-message {
        background-color: #00b0ff; /* Un azul claro para los mensajes del usuario */
        color: white;
        align-self: flex-end;
        float: right;
      }

      .gemini-message {
        background-color: #4caf50; /* Un verde para los mensajes de Gemini */
        color: white;
        align-self: flex-start;
        float: left;
      }

      #input-area {
        display: flex;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente para el área de entrada */
      }

      #user-input {
        flex-grow: 1;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 10px;
        background-color: #fff; /* Fondo blanco para el input */
        color: #333; /* Color de texto oscuro */
      }

      #send-button {
        padding: 8px 15px;
        background-color: #007bff; /* Azul de Bootstrap */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease; /* Transición suave */
      }

      #send-button:hover {
        background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
      }
      /* Estilos adicionales para mejorar la apariencia */
      .chat-log-scroll {
        overflow-y: auto;
        max-height: 350px; /* Altura máxima del chat log */
        padding-right: 10px; /* Espacio para la barra de desplazamiento */
      }
      .message-content {
        white-space: pre-wrap; /* Respeta los saltos de línea y espacios */
      }