/*=====================================
CHAT FLOTANTE
=====================================*/

.cfte-chat-boton{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

    background:#0075A9;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    z-index:99999;

    transition:.3s;

}

.cfte-chat-boton:hover{

    transform:scale(1.08);

}

.cfte-chat-panel{

    position:fixed;

    right:25px;

    bottom:105px;

    width:360px;

    height:500px;

    background:#fff;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:99999;

}

.cfte-chat-panel.abierto{

    opacity:1;

    visibility:visible;

    transform:none;

}

.cfte-chat-header{

    height:65px;

    background:#0075A9;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    font-weight:700;

    font-size:18px;

}

.cfte-chat-header button{

    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;

}

.cfte-chat-body{

    height:365px;

    overflow-y:auto;

    padding:18px;

    background:#F8FBFF;

    font-family:Poppins,sans-serif;

}

.cfte-chat-vacio{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100%;

    color:#888;

    font-size:16px;

}

.cfte-chat-footer{

    height:70px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-top:1px solid #E5E5E5;

    background:white;

}

.cfte-chat-footer input{

    flex:1;

    border:1px solid #D7D7D7;

    border-radius:30px;

    padding:12px 18px;

    outline:none;

    font-size:15px;

}

.cfte-chat-footer input:focus{

    border-color:#0075A9;

}

.cfte-chat-footer button{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#0075A9;

    color:white;

    cursor:pointer;

    font-size:20px;

    transition:.3s;

}

.cfte-chat-footer button:hover{

    background:#005D86;

}

/*=====================================
MENSAJES
=====================================*/

.cfte-msg{

    display:flex;

    flex-direction:column;

    margin-bottom:18px;

}

.cfte-msg.mio{

    align-items:flex-end;

}

.cfte-msg.otro{

    align-items:flex-start;

}

.cfte-msg-nombre{

    font-size:12px;

    color:#666;

    margin-bottom:4px;

    font-weight:600;

}

.cfte-msg-texto{

    max-width:75%;

    padding:12px 16px;

    border-radius:18px;

    font-size:15px;

    line-height:1.45;

    word-break:break-word;

    box-shadow:
    0 4px 12px rgba(0,0,0,.08);

}

.cfte-msg.mio .cfte-msg-texto{

    background:#0075A9;

    color:white;

    border-bottom-right-radius:6px;

}

.cfte-msg.otro .cfte-msg-texto{

    background:white;

    color:#333;

    border-bottom-left-radius:6px;

}

.cfte-msg-hora{

    margin-top:4px;

    font-size:11px;

    color:#999;

}

/*=====================================
BOTÓN ELIMINAR
=====================================*/

.cfte-msg-hora{

    display:flex;

    align-items:center;

    gap:8px;

}

.cfte-msg-eliminar{

    border:none;

    background:none;

    cursor:pointer;

    font-size:14px;

    opacity:0;

    transform:scale(.8);

    transition:.25s;

    padding:0;

}

.cfte-msg.mio:hover .cfte-msg-eliminar{

    opacity:1;

    transform:scale(1);

}

.cfte-msg-eliminar:hover{

    transform:scale(1.2);

}

/*=====================================
MENSAJE ELIMINADO
=====================================*/

.cfte-msg.eliminado .cfte-msg-texto{

    background:#ECECEC;

    color:#777;

    font-style:italic;

    border:1px dashed #C8C8C8;

}

.cfte-msg.eliminado .cfte-msg-hora{

    opacity:.7;

}

/*=====================================
CHAT RESPONSIVE - CELULAR
=====================================*/

@media (max-width:768px){

    .cfte-chat-panel{

        left:10px;
        right:10px;

        bottom:85px;

        width:auto;
        max-width:none;

        height:calc(100vh - 170px);

        max-height:calc(100vh - 170px);

        border-radius:18px;

    }

    .cfte-chat-header{

        height:65px;

        flex-shrink:0;

    }

    .cfte-chat-body{

        height:calc(100% - 135px);

        max-height:none;

    }

    .cfte-chat-footer{

        height:70px;

        flex-shrink:0;

    }

    .cfte-chat-boton{

        right:20px;

        bottom:20px;

        width:60px;

        height:60px;

    }

}