/* ====================================
   CHAT.CSS - Botón flotante de chat
   ==================================== */

/* Botón flotante de chat */
#cf-fab-btn {
    position: fixed; 
    right: 40px; 
    bottom: 40px; 
    z-index: 247483647;
    width: 58px; 
    height: 58px; 
    border-radius: 50%; 
    border: none; 
    cursor: pointer;
    font-size: 26px; 
    background: var(--color-primary); 
    color: var(--color-white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s, box-shadow 0.25s;
}

#cf-fab-btn:hover { 
    transform: scale(1.08); 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); 
}

/* Fondo del modal de chat */
.cf-chat-backdrop {
    position: fixed; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.25);
    z-index: 2147483640; 
    display: none;
}

/* Ventana de chat */
.cf-chat-wrap {
    position: fixed; 
    right: 40px; 
    bottom: 80px;
    width: 400px; 
    height: 680px; 
    max-width: 90vw; 
    max-height: 85vh;
    border-radius: var(--border-radius-md); 
    overflow: hidden; 
    background: var(--color-white);
    box-shadow: var(--shadow-lg); 
    transition: all 0.3s ease-in-out;
}

.cf-chat-wrap.show { 
    transform: translateY(0); 
    opacity: 1; 
}

.cf-chat-wrap.hide { 
    transform: translateY(20px); 
    opacity: 0; 
}

/* Botón de cerrar chat */
.cf-chat-close {
    position: absolute; 
    top: 6px; 
    right: 8px; 
    z-index: 2; 
    border: 0; 
    background: transparent;
    color: var(--color-white); 
    font-size: 20px; 
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cf-chat-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* iframe del chat */
.cf-chat-frame { 
    width: 100%; 
    height: 100%; 
    border: 0; 
}

/* Responsive Chat */
@media (min-width: 1200px) { 
    .cf-chat-wrap { 
        width: 480px; 
        height: 720px; 
    } 
}

@media (min-width: 900px) and (max-width: 1199px) { 
    .cf-chat-wrap { 
        width: 440px; 
        height: 700px; 
    } 
}

@media (max-width: 768px) { 
    .cf-chat-wrap { 
        width: 90vw; 
        height: 85vh; 
        right: 5vw; 
        bottom: 5vh; 
    }
    
    #cf-fab-btn {
        right: 20px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
}