/* Estilos para el contenedor del modal de chat */
#chat-modal-container {
    position: fixed;
    /* En desktop, en la esquina inferior derecha */
    bottom: 2rem;
    right: 2rem;
    width: 90vw;
    max-width: 24rem; /* 384px */
    height: 70vh;
    max-height: 40rem; /* 640px */
    z-index: 50;
    transform-origin: bottom right;
    /* Oculto por defecto, se muestra con la clase 'active' */
    display: none; 
    animation: popIn 0.3s ease forwards;
}

#chat-modal-container.active {
    display: block;
}

/* En móvil, ocupa más espacio */
@media (max-width: 768px) {
    #chat-modal-container {
        bottom: 5.5rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
}

/* Estilos para las burbujas de mensaje */
.message-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1.25rem; /* rounded-2xl */
    word-wrap: break-word;
}

.message-bubble.sent {
    background-color: var(--brand-blue);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message-bubble.received {
    background-color: #e5e7eb; /* gray-200 */
    color: #1f2937; /* gray-800 */
    border-bottom-left-radius: 0.25rem;
}

.message-bubble img {
    max-width: 100%;
    border-radius: 1rem;
    cursor: pointer;
}

/* Indicador de estado "en línea" */
#chat-partner-status.online {
    background-color: #22c55e; /* green-500 */
}


/* Botón flotante del chat siempre adelante */
#open-chat-fab {
    z-index: 10000 !important;
    position: fixed !important;
}

/* Contenedor del modal de chat siempre adelante */
#chat-modal-container {
    z-index: 10001 !important;
}