/* Tu botón flotante (le aumenté el z-index para BS5) */
.chatbotbtn-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .chatbotbtn-float:hover {
        transform: scale(1.1);
    }

/* --- DISEÑO DE LA VENTANA DEL CHAT --- */
.chatbot-window {
    position: fixed;
    bottom: 95px; /* Aparece justo arriba de tu botón */
    right: 20px;
    width: 350px;
    height: 480px;
    background: #f8f9fa; /* Fondo gris claro estilo BS5 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 1050;
    overflow: hidden;
    /* Animación de entrada: Abajo y transparente */
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    /* Clase dinámica que le agregaremos con JS para mostrarlo */
    .chatbot-window.show {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }

.chatbot-body {
    flex: 1;
    overflow-y: auto; /* Scroll si hay muchos mensajes */
    display: flex;
    flex-direction: column;
}

    /* Modificamos el scrollbar para que sea sutil */
    .chatbot-body::-webkit-scrollbar {
        width: 6px;
    }

    .chatbot-body::-webkit-scrollbar-thumb {
        background: #ced4da;
        border-radius: 10px;
    }

/* --- GLOBOS DE MENSAJE --- */
.chat-message {
    max-width: 85%;
    font-size: 0.9rem;
    display: flex;
    word-break: break-word;
}

.message-content {
    border-radius: 12px;
    white-space: pre-wrap; /* Mantiene los saltos de línea (\n) visualmente */
}

/* Mensaje del Bot (Alineado a la Izquierda) */
.bot-message {
    align-self: flex-start;
}

    .bot-message .message-content {
        border-top-left-radius: 2px !important; /* Esquina recta */
    }

/* Mensaje del Usuario (Alineado a la Derecha) */
.user-message {
    align-self: flex-end;
}

    .user-message .message-content {
        background-color: #0d6efd; /* Color primario BS5 */
        color: #fff;
        border-top-right-radius: 2px !important; /* Esquina recta */
    }

/* Ocultar el botón flotante suavemente cuando el chat se abre */
.chatbot-window.show ~ .chatbotbtn-float {
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 576px) {
    /* 1. Hacemos el botón un poco más pequeño para que no estorbe */
    .chatbotbtn-float {
        bottom: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
    }

    /* 2. La ventana del chat toma toda la pantalla */
    .chatbot-window {
        width: 100%;
        height: 100%; /* Ocupa todo el alto visible */
        bottom: 0; /* Se pega al fondo */
        right: 0; /* Se pega a la derecha */
        border-radius: 0; /* Quitamos los bordes redondeados para que parezca app nativa */
        /* Ajustamos la animación para que suba desde el fondo de la pantalla completa */
        transform: translateY(100%);
    }

        /* 3. Aseguramos que al mostrarse se posicione correctamente */
        .chatbot-window.show {
            transform: translateY(0);
        }

    /* 4. Quitamos los bordes redondeados del Header si los tuviera heredados */
    .chatbot-header {
        border-radius: 0 !important;
    }

    /* 5. Damos un poco más de padding al área de escritura para los dedos gruesos */
    .chatbot-footer {
        padding: 10px !important;
        /*padding-bottom: env(safe-area-inset-bottom, 10px) !important;*/
    }
}