/* --- Reajuste de Alturas y Posicionamiento --- */

/* 1. Modificar chat-container para que ocupe todo el espacio menos el nav y el input */
.chat-container {
    /* REMOVER: height: calc(100vh - 300px); */
    flex-grow: 1; /* Permite que ocupe todo el espacio disponible */
    overflow-y: auto; /* Mantiene el scroll en el área de conversación */
    padding-bottom: 120px; /* IMPORTANTE: Deja espacio libre para el input fijo */
    width: 100%;
    /* Asegúrate de que el contenedor padre de .chat-container tenga display: flex y flex-direction: column */
}

/* 2. Área de Input Fija (Fondo de la Pantalla) */
.input-area {
    position: fixed; /* Fija la posición en la pantalla */
    bottom: 0;      /* Se pega a la parte inferior */
    width: 100%;    /* Ocupa todo el ancho */
    box-sizing: border-box; 
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra para mejor distinción */
    z-index: 100; /* Siempre encima del chat */
}

/* Estilos de Tema para el Área de Input Fija */
.input-area {
    background-color: #f7f7f7; /* Default (Light Theme) */
}
.light-theme .input-area {
    background-color: #ffffff; /* white */
    /* Aquí puedes reutilizar el estilo del input de chat si lo deseas */
}
/* Asegura que el input y botón estén bien estilizados dentro de esta área,
   por ejemplo, usando flexbox para centrar horizontalmente */

/* --- Distinción Gráfica de Burbujas (Roles) --- */

/* 3. Estilo General de Mensaje (Ajustado) */
/* Añadimos display: flex para manejar la alineación */
.messages-list {
    display: flex;
    flex-direction: column;
}

.chat-message {
    padding: 10px 15px;
    border-radius: 1.5rem; /* Ajuste si necesitas más redondez que el actual 0.5rem */
    margin-bottom: 15px;
    max-width: 75%; 
    word-wrap: break-word;
    /* Las siguientes clases user/bot manejan el resto del diseño */
}

/* 4. Estilo de Aura (Bot) - Alineación a la izquierda */
.chat-message.bot {
    /* Los colores ya están definidos en el light-theme, solo añadimos la alineación flex */
    align-self: flex-start; /* Alineado a la izquierda */
    margin-right: auto;
    /* Manteniendo tus border-radius: */
    border-bottom-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

/* 5. Estilo de Usuario - Alineación a la derecha */
.chat-message.user {
    /* Los colores ya están definidos, solo añadimos la alineación flex */
    align-self: flex-end; /* Alineado a la derecha */
    margin-left: auto;
    /* Manteniendo tus border-radius: */
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

/* --- Botón Flotante DESBLOQUEAR (FAB) --- */

#fab-desbloquear {
    position: fixed;
    bottom: 90px; /* Separado 90px de bottom: 0 (el input) */
    right: 20px;
    background-color: #FF5722; /* Color de acción/alerta (Naranja vivo) */
    color: white;
    border: none;
    border-radius: 50%; /* Circular */
    width: 60px;
    height: 60px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 101; /* Sobre el input */
    transition: transform 0.2s;
}

#fab-desbloquear:hover {
    transform: scale(1.1);
}