
/* TASKLOCAL LIVE CHAT REDESIGN 20260918 */
.tl-chat-panel{
    width:min(390px,calc(100vw - 28px)) !important;
    height:min(650px,calc(100vh - 100px)) !important;
    border:1px solid #dbe9e3 !important;
    border-radius:24px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 24px 70px rgba(10,45,35,.22) !important;
}

.tl-chat-header{
    padding:18px 18px 17px !important;
    background:linear-gradient(135deg,#063d31,#0f795a) !important;
}

.tl-chat-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.tl-chat-brand-logo{
    width:48px;
    height:48px;
    object-fit:contain;
    padding:5px;
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,.13);
}

.tl-chat-brand-copy strong{
    display:block;
    color:#fff;
    font-size:16px;
    line-height:1.2;
}

.tl-chat-brand-copy span{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:5px;
    color:#d8f6e9;
    font-size:12px;
}

.tl-chat-brand-copy span::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#52e0a6;
    box-shadow:0 0 0 4px rgba(82,224,166,.16);
}

.tl-chat-intro-card{
    margin:0 0 16px;
    padding:17px;
    border:1px solid #dcebe5;
    border-radius:18px;
    background:linear-gradient(145deg,#f1faf6,#fff);
}

.tl-chat-intro-card small{
    display:block;
    margin-bottom:7px;
    color:#087456;
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.tl-chat-intro-card h3{
    margin:0 0 6px;
    color:#092f27;
    font-size:22px;
    line-height:1.15;
}

.tl-chat-intro-card p{
    margin:0;
    color:#5c6f69;
    font-size:13px;
    line-height:1.5;
}

.tl-chat-faq{
    margin:0 0 17px;
}

.tl-chat-faq-title{
    display:block;
    margin:0 0 9px;
    color:#163c33;
    font-size:12px;
    font-weight:800;
}

.tl-chat-faq-list{
    display:grid;
    gap:8px;
}

.tl-chat-faq-button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 13px;
    border:1px solid #d7e7e1;
    border-radius:12px;
    background:#fff;
    color:#143d33;
    font:inherit;
    font-size:13px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}

.tl-chat-faq-button::after{
    content:"›";
    color:#11805f;
    font-size:20px;
    line-height:1;
}

.tl-chat-faq-button:hover{
    border-color:#75bda7;
    background:#f2faf7;
    transform:translateY(-1px);
}

.tl-chat-auto-answer{
    margin:10px 0 15px;
    padding:14px;
    border-radius:14px;
    background:#eaf7f2;
    color:#183f35;
    font-size:13px;
    line-height:1.55;
}

.tl-chat-auto-answer strong{
    display:block;
    margin-bottom:4px;
    color:#075c45;
}

.tl-chat-human-button{
    width:100%;
    padding:12px 15px;
    border:1px solid #0d7658;
    border-radius:13px;
    background:#0d7658;
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.tl-chat-human-button:hover{
    background:#075f47;
}

.tl-chat-launcher{
    box-shadow:0 12px 30px rgba(7,75,57,.28) !important;
}

.tl-chat-launcher .tl-chat-icon{
    overflow:hidden;
    background:#fff !important;
}

.tl-chat-launcher-logo{
    width:100%;
    height:100%;
    padding:4px;
    object-fit:contain;
}

@media(max-width:600px){
    .tl-chat-panel{
        inset:10px !important;
        width:auto !important;
        height:auto !important;
        max-height:none !important;
        border-radius:18px !important;
    }

    .tl-chat-intro-card h3{
        font-size:20px;
    }

    .tl-chat-faq-button{
        padding:10px 12px;
    }
}


/* LARGER TASKLOCAL MONKEY HEAD */
.tl-chat-launcher .tl-chat-icon{
    width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
    padding:0 !important;
    background:#eef8f4 !important;
}

.tl-chat-launcher-logo{
    width:52px !important;
    height:52px !important;
    max-width:none !important;
    padding:0 !important;
    object-fit:contain !important;
    transform:scale(1.12);
}

.tl-chat-intro-brand{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:9px;
}

.tl-chat-intro-brand img{
    width:62px;
    height:62px;
    flex:0 0 62px;
    object-fit:contain;
    filter:drop-shadow(0 6px 8px rgba(6,61,48,.13));
}

.tl-chat-intro-brand small{
    margin-bottom:5px;
}

.tl-chat-intro-brand h3{
    margin:0;
}

@media(max-width:600px){
    .tl-chat-intro-brand img{
        width:56px;
        height:56px;
        flex-basis:56px;
    }
}
