.qamzu-live-button{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:99990;

    display:flex;
    align-items:center;
    gap:9px;

    height:56px;
    padding:0 18px;

    border:0;
    border-radius:999px;

    background:#ff6518;
    color:#fff;

    box-shadow:
        0 18px 45px rgba(7,17,31,.28);

    cursor:pointer;
    font-weight:800;
}

.qamzu-live-panel{
    position:fixed;
    right:22px;
    bottom:92px;
    z-index:99991;

    width:min(390px,calc(100vw - 28px));
    height:min(610px,calc(100vh - 125px));

    display:none;
    flex-direction:column;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;

    background:#07111f;
    color:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);
}

.qamzu-live-panel.open{
    display:flex;
}

.qamzu-live-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:17px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.09);

    background:#0b1424;
}

.qamzu-live-head strong{
    display:block;
}

.qamzu-live-status{
    margin-top:5px;
    font-size:10px;
    color:#94a3b8;
}

.qamzu-live-status.online{
    color:#78e69b;
}

.qamzu-live-close{
    border:0;
    background:transparent;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.qamzu-live-start{
    padding:18px;
    overflow:auto;
}

.qamzu-live-start p{
    margin-top:0;
    color:#b6c1cf;
    font-size:13px;
    line-height:1.5;
}

.qamzu-live-start input,
.qamzu-live-start textarea,
.qamzu-live-compose textarea{
    width:100%;
    margin-bottom:10px;
    padding:12px 13px;

    border:1px solid #26354a;
    border-radius:10px;

    background:#101b2d;
    color:#fff;

    outline:none;
}

.qamzu-live-start textarea{
    min-height:90px;
    resize:vertical;
}

.qamzu-live-start button,
.qamzu-live-compose button{
    border:0;
    border-radius:10px;
    padding:12px 16px;

    background:#ff6518;
    color:#fff;

    font-weight:800;
    cursor:pointer;
}

.qamzu-live-error{
    margin-top:10px;
    color:#ffaaa5;
    font-size:11px;
}

.qamzu-live-thread{
    flex:1;
    display:none;
    flex-direction:column;
    min-height:0;
}

.qamzu-live-messages{
    flex:1;
    overflow:auto;
    padding:17px;
}

.qamzu-live-message{
    max-width:82%;
    margin-bottom:10px;
    padding:11px 13px;
    border-radius:14px;

    font-size:13px;
    line-height:1.4;
    white-space:pre-wrap;
}

.qamzu-live-message.visitor{
    margin-left:auto;
    background:#ff6518;
}

.qamzu-live-message.agent{
    background:#18253a;
}

.qamzu-live-compose{
    display:flex;
    gap:8px;
    padding:12px;

    border-top:
        1px solid #243148;
}

.qamzu-live-compose textarea{
    margin:0;
    min-height:46px;
    max-height:110px;
    resize:none;
}

@media(max-width:700px){

    .qamzu-live-button{
        right:14px;
        bottom:82px;
    }

    .qamzu-live-panel{
        right:12px;
        bottom:145px;

        width:calc(100vw - 24px);
        height:
            calc(100vh - 165px);
    }

}


.qamzu-live-button{
    position:fixed;
}

.qamzu-live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#9ca3af;
    box-shadow:none;
    flex:0 0 10px;
}

.qamzu-live-label{
    display:inline-block;
}

.qamzu-live-button.is-online .qamzu-live-dot{
    background:#22c55e;
    box-shadow:
        0 0 0 4px rgba(34,197,94,.18),
        0 0 14px rgba(34,197,94,.55);
    animation:qamzuLivePulse 1.8s infinite;
}

.qamzu-live-button.is-offline .qamzu-live-dot{
    background:#9ca3af;
    box-shadow:none;
}

@keyframes qamzuLivePulse{
    0%{
        transform:scale(1);
        box-shadow:
            0 0 0 0 rgba(34,197,94,.35),
            0 0 14px rgba(34,197,94,.55);
    }
    70%{
        transform:scale(1.05);
        box-shadow:
            0 0 0 8px rgba(34,197,94,0),
            0 0 18px rgba(34,197,94,.45);
    }
    100%{
        transform:scale(1);
        box-shadow:
            0 0 0 0 rgba(34,197,94,0),
            0 0 14px rgba(34,197,94,.55);
    }
}


/* =========================================================
   QAMZU LIVE CHAT — LIVE STATUS DOT V2
   ========================================================= */

.qamzu-live-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.qamzu-live-dot{
    display:block;

    width:10px;
    height:10px;

    flex:0 0 10px;

    border-radius:50%;

    background:#9ca3af;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.qamzu-live-label{
    display:block;
    white-space:nowrap;
}


/* ONLINE */

.qamzu-live-button.is-online
.qamzu-live-dot{

    background:#22c55e;

    box-shadow:
        0 0 0 0 rgba(34,197,94,.45),
        0 0 12px rgba(34,197,94,.70);

    animation:
        qamzu-live-pulse
        1.8s
        infinite;
}


/* OFFLINE */

.qamzu-live-button.is-offline
.qamzu-live-dot{

    background:#9ca3af;

    box-shadow:none;

    animation:none;
}


@keyframes qamzu-live-pulse{

    0%{
        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(34,197,94,.50),
            0 0 10px rgba(34,197,94,.65);
    }

    65%{
        transform:scale(1.08);

        box-shadow:
            0 0 0 8px rgba(34,197,94,0),
            0 0 18px rgba(34,197,94,.50);
    }

    100%{
        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(34,197,94,0),
            0 0 10px rgba(34,197,94,.65);
    }

}

