#swpLiveChatBox,
#swpLiveChatBubble{
    font-family:Arial, sans-serif;
}

#swpLiveChatBubble{
    position:fixed;
    right:20px;
    bottom:24px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#2563eb;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:99999;
    box-shadow:0 12px 28px rgba(37,99,235,.35);
}

#swpLiveChatBubble .swp-chat-icon{
    font-size:28px;
}

#swpLiveChatBubble .swp-chat-dot{
    position:absolute;
    top:8px;
    right:8px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#22c55e;
    border:2px solid #ffffff;
    animation:swpPulse 1.3s infinite;
}

#swpLiveChatBubble.has-unread::after{
    content:attr(data-count);
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:999px;
    background:#dc2626;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    border:2px solid #ffffff;
}

#swpLiveChatBox{
    position:fixed;
    right:20px;
    bottom:98px;
    width:360px;
    max-width:calc(100vw - 32px);
    height:500px;
    max-height:calc(100vh - 130px);
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    overflow:hidden;
    z-index:99999;
    box-shadow:0 24px 70px rgba(15,23,42,.22);
    display:none;
}

#swpLiveChatBox.open{
    display:flex;
    flex-direction:column;
}

.swp-chat-head{
    background:#111827;
    color:#ffffff;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.swp-chat-head strong{
    display:block;
    font-size:15px;
}

.swp-chat-head small{
    display:block;
    color:rgba(255,255,255,.72);
    margin-top:3px;
}

.swp-chat-close{
    background:rgba(255,255,255,.12);
    color:#ffffff;
    border:0;
    width:32px;
    height:32px;
    border-radius:10px;
    cursor:pointer;
}

.swp-chat-head-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.swp-sound-toggle{
    background:rgba(255,255,255,.14);
    color:#ffffff;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:7px 9px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.swp-sound-toggle.enabled{
    background:#16a34a;
    border-color:#16a34a;
}

.swp-chat-messages{
    flex:1;
    padding:14px;
    overflow-y:auto;
    background:#f8fafc;
}

.swp-msg{
    max-width:84%;
    margin-bottom:10px;
    padding:10px 12px;
    border-radius:14px;
    font-size:13px;
    line-height:1.45;
    word-wrap:break-word;
    position:relative;
}

.swp-msg::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:10px;
    line-height:1;
    font-weight:900;
    opacity:.75;
}

.swp-msg.admin{
    background:#2563eb;
    color:#ffffff;
    margin-left:auto;
    border-bottom-right-radius:4px;
}

.swp-msg.visitor{
    background:#ffffff;
    color:#111827;
    border:1px solid #e5e7eb;
    border-bottom-left-radius:4px;
}

.swp-chat-form{
    display:flex;
    gap:8px;
    padding:12px;
    border-top:1px solid #e5e7eb;
    background:#ffffff;
}

.swp-chat-form input{
    flex:1;
    border:1px solid #d1d5db;
    border-radius:12px;
    padding:12px;
    font-size:13px;
    outline:none;
}

.swp-chat-form button{
    border:0;
    background:#ff5538;
    color:#ffffff;
    border-radius:12px;
    padding:0 14px;
    font-weight:900;
    cursor:pointer;
}

@keyframes swpPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.35);}
}

body.modal-open #swpLiveChatBubble,
body.modal-open #swpLiveChatBox{
    display:none !important;
}

@media(max-width:700px){
    #swpLiveChatBubble{
        right:16px;
        bottom:18px;
        width:58px;
        height:58px;
    }

    #swpLiveChatBox{
        right:12px;
        bottom:88px;
        width:calc(100vw - 24px);
        height:470px;
    }
}

@media(max-width:520px){
    #swpLiveChatBubble{
        right:14px;
        bottom:14px;
        width:56px;
        height:56px;
    }

    #swpLiveChatBox{
        left:8px;
        right:8px;
        bottom:78px;
        width:auto;
        max-width:none;
        height:min(560px, calc(100dvh - 96px));
        max-height:calc(100dvh - 96px);
        border-radius:18px;
    }

    .swp-chat-head{
        padding:12px;
        align-items:flex-start;
    }

    .swp-chat-head strong{
        font-size:14px;
    }

    .swp-chat-head small{
        font-size:11px;
        line-height:1.25;
    }

    .swp-chat-head-actions{
        gap:6px;
    }

    .swp-sound-toggle{
        padding:7px 8px;
        font-size:10px;
        white-space:nowrap;
    }

    .swp-chat-close{
        width:30px;
        height:30px;
    }

    .swp-chat-messages{
        padding:12px;
    }

    .swp-msg{
        max-width:92%;
        font-size:13px;
        padding:9px 11px;
    }

    .swp-chat-form{
        position:sticky;
        bottom:0;
        padding:10px;
        gap:8px;
    }

    .swp-chat-form input{
        min-width:0;
        font-size:16px;
        padding:12px;
    }

    .swp-chat-form button{
        min-width:66px;
        padding:0 12px;
    }
}