/*====================================================
CHAT SOAT MOTOLINK
====================================================*/

#ml-chat{

    width:100%;

    display:flex;

    justify-content:center;

    margin:0;

    font-family:Arial,sans-serif;

}

#ml-chat-window{


    width:min(520px,100%);

    height:720px;

    display:flex;

    flex-direction:column;

    background:#efeae2;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

}


/*====================================================
HEADER
====================================================*/

.ml-chat-header{

    background:#075E54;

    color:#fff;

    display:flex;

    align-items:center;

    padding:

        calc(env(safe-area-inset-top) + 14px)

        20px

        14px;

    min-height:72px;

}



.ml-chat-header{

    gap:12px;

}

#ml-chat-close{

    display:none;

}


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

#ml-chat-messages{

    flex:1;

    overflow-y:auto;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:14px;

     background:#EFEAE2;

    background-image:
        url("https://www.transparenttextures.com/patterns/cream-paper.png");

}


/*====================================================
BURBUJA IA
====================================================*/

.ml-chat-bot{

    align-self:flex-start;

    max-width:75%;

    background:white;

    color:#222;

    padding:14px 18px;

    border-radius:18px;

    border-bottom-left-radius:4px;

    line-height:1.5;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);

}


/*====================================================
BURBUJA USUARIO
====================================================*/

.ml-chat-user{

    align-self:flex-end;

    max-width:75%;

    background:#DCF8C6;

    color:#111;

    padding:14px 18px;

    border-radius:18px;

    border-bottom-right-radius:4px;

    line-height:1.5;

    box-shadow:
        0 2px 8px rgba(0,0,0,.12);

}


/*====================================================
INPUT
====================================================*/

.ml-chat-input{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    background:#F0F2F5;

    border-top:1px solid #ddd;

}


/*====================================================
BOTON ADJUNTAR
====================================================*/

#ml-chat-attach{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#54656F;

    font-size:20px;

    cursor:pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.12);

}


/*====================================================
INPUT
====================================================*/

#ml-chat-text{

    flex:1;

    height:46px;

    border:none;

    border-radius:25px;

    background:white;

    padding:0 18px;

    font-size:15px;

}


/*====================================================
BOTON ENVIAR
====================================================*/

#ml-chat-send{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#25D366;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

#ml-chat-send:hover{

    background:#20bd5a;

    transform:scale(1.05);

}


/*====================================================
IMAGENES
====================================================*/

.ml-chat-image{

    max-width:240px;

    border-radius:14px;

    display:block;

    object-fit:cover;

}


/*====================================================
ARCHIVOS
====================================================*/

.ml-chat-file-card{

    display:flex;

    gap:12px;

    align-items:center;

    background:#f4f4f4;

    border-radius:12px;

    padding:12px;

    color:#222;

    text-decoration:none;

}

.ml-chat-file-card strong{

    color:#222;

}

.ml-chat-file-card small{

    color:#666;

}


/*====================================================
LINKS
====================================================*/

.ml-chat-bot a{

    color:#d60000;

}

.ml-chat-user a{

    color:white;

}


/*====================================================
SCROLL
====================================================*/

#ml-chat-messages::-webkit-scrollbar{

    width:8px;

}

#ml-chat-messages::-webkit-scrollbar-thumb{

    background:#c9c9c9;

    border-radius:10px;

}


/*====================================================
RESPONSIVE
====================================================*/

@media (max-width:768px){

    .chat-overlay{

        justify-content:center;
        align-items:center;

        padding:12px;

    }

    .chat-page-wrapper{

        position:fixed !important;

        top:0 !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        width:100% !important;

        display:flex !important;

        justify-content:center !important;
        align-items:center !important;

        transform:none !important;

        padding:12px !important;

        z-index:99999;

    }

    #ml-chat-window{

        width:100%;
        max-width:420px;

        height:calc(100vh - 24px);

        border-radius:22px;

    }


}
.chat-page-wrapper{
		
		

    position:absolute;

    top:50%;

    right:180px;

    transform:translateY(-50%);

    z-index:20;


}
.chat-overlay{

    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.45);

    z-index:20;

}

.ml-chat-profile{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

}

.ml-chat-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.ml-chat-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.ml-chat-info h3{

    margin:0;

    font-size:19px;

    color:#fff;

}

.ml-chat-info span{

    margin-top:3px;

    color:#ddd;

    font-size:12px;

}

.chat-hero{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

}

@media (max-width:768px){

    #ml-chat{

        margin:0 !important;

    }

}

@media (min-width:769px){

    .chat-overlay{

        justify-content:flex-end;

        padding-right:220px;

    }

}
@media (max-width:768px){

    #ml-chat-window{

        width:100%;
        max-width:420px;

        height:calc(100vh - 120px);

        margin-top:80px;

        border-radius:20px;

    }

}

body.page-template-page-chat,
body.page-template-chat-soat,
body.page-id-779{

    height:100%;
    overflow:hidden;

}