/* assets/css/chat-popup.css */

/* Contenedor que posiciona el popup y el botón de toggle */
#c704k3r-chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2147483640;
}

/* Botón para abrir/cerrar el popup */
#c704k3r-chat-toggle-button {
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}
#c704k3r-chat-toggle-button:hover {
    background-color: #005a87;
    transform: scale(1.1);
}

/* Ventana del Popup (cuando tiene la clase .c704k3r-popup-mode) */
#c704k3r-chat-window.c704k3r-popup-mode {
    width: 360px;
    max-height: 550px;
    height: 70vh; /* Ocupa una buena parte de la altura del viewport */
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    position: absolute; /* Relativo a #c704k3r-chat-container */
    bottom: 75px; /* Encima del botón de toggle */
    right: 0;
    /* z-index es manejado por el contenedor, pero puedes añadir uno si es necesario */
}

/* Clase para ocultar el popup (el JS añade/quita esta clase) */
#c704k3r-chat-window.c704k3r-popup-mode.c704k3r-hidden {
    display: none !important;
}


/* --- Estilos Móviles para el Pop-up --- */
@media (max-width: 768px) {
    #c704k3r-chat-toggle-button {
        width: 55px;
        height: 55px;
        font-size: 22px;
        /* Posición se hereda de arriba, o puedes ajustarla aquí */
        /* z-index para estar sobre la ventana si no se oculta por JS a tiempo */
        z-index: 2147483647; 
    }

    #c704k3r-chat-window.c704k3r-popup-mode {
        width: 100%;
        height: 100%; 
        max-height: 100%; 
        position: fixed; /* El popup en móvil es pantalla completa fixed */
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
        z-index: 2147483646; /* Muy alto para estar encima de todo */
        bottom: 0 !important; /* Sobrescribir el bottom:75px de escritorio */
        right: 0 !important; /* Sobrescribir el right:0 de escritorio */
    }

    /* Input area en móvil popup */
    #c704k3r-chat-window.c704k3r-popup-mode .c704k3r-chat-input-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 10px)); 
    }
}

/* Clase para el body cuando el chat POPUP está abierto en móviles */
body.c704k3r-chat-open-mobile {
    overflow: hidden;
    overscroll-behavior-y: contain;
}


/* Estilos para el bloque de información del asistente EN MODO POPUP */
#c704k3r-chat-window.c704k3r-popup-mode .c704k3r-assistant-info {
    margin-left: 0px !important; /* Anula cualquier margen izquierdo existente */
}

/* Adicionalmente, mantenemos los ajustes para el header que discutimos antes,
   porque siguen siendo importantes para la distribución general y el padding de los bordes */
#c704k3r-chat-window.c704k3r-popup-mode #c704k3r-chat-header {
    padding-left: 5px !important;   /* O 0px. Espacio entre el borde del header y el avatar */
    padding-right: 10px !important; /* Espacio para los botones */
    justify-content: space-between !important;
}