:root{

    --cw-primary:#2563eb;
    --cw-primary-hover:#1d4ed8;

    --cw-bg:#ffffff;

    --cw-border:#e5e7eb;

    --cw-shadow:0 18px 60px rgba(0,0,0,.18);

    --cw-radius:18px;

    --cw-header-height:64px;

    --cw-footer-height:82px;

    --cw-button-size:64px;

    --cw-transition:.25s;

    --cw-zindex:999999;

    --cw-font:Tahoma,Arial,sans-serif;

}

#chat-widget{

    font-family:var(--cw-font);

    position:fixed;

    bottom:24px;

    right:24px;

    z-index:var(--cw-zindex);

}

#chat-widget *{

    box-sizing:border-box;

}


.cw-button{

    width:var(--cw-button-size);

    height:var(--cw-button-size);

    border-radius:50%;

    background:var(--cw-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:var(--cw-shadow);

    transition:all var(--cw-transition);

    user-select:none;

}

.cw-button:hover{

    transform:scale(1.06);

    background:var(--cw-primary-hover);

}

.cw-button svg{

    width:28px;

    height:28px;

    fill:#fff;

}

.cw-window{

    position:absolute;

    right:0;

    bottom:84px;

    width:380px;

    height:620px;

    background:var(--cw-bg);

    border-radius:var(--cw-radius);

    box-shadow:var(--cw-shadow);

    overflow:hidden;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px) scale(.97);

    transition:all .25s;

}

.cw-window.open{

    opacity:1;

    visibility:visible;

    transform:none;

}

.cw-header{

    height:var(--cw-header-height);

    background:var(--cw-primary);

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 20px;

    flex-shrink:0;

}

.cw-title{

    font-size:17px;

    font-weight:bold;

}

.cw-close{

    width:36px;

    height:36px;

    border:none;

    background:none;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    border-radius:50%;

    transition:.2s;

}

.cw-close:hover{

    background:rgba(255,255,255,.15);

}

.cw-body{

    flex:1;

    overflow:hidden;

    background:#f8fafc;

}

.cw-messages{

    height:100%;
padding-bottom: 100px;

    overflow-y:auto;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:14px;

    scroll-behavior:smooth;

}

.cw-message{

    display:flex;

    width:100%;

}

.cw-visitor{

    justify-content:flex-end;

}

.cw-operator{

    justify-content:flex-start;

}

.cw-system{

    justify-content:center;

}

.cw-bubble{

    max-width:78%;

    padding:12px 15px;

    border-radius:18px;

    font-size:14px;

    line-height:1.7;

    word-break:break-word;

}

.cw-visitor .cw-bubble{

    background:var(--cw-primary);

    color:#fff;

    border-bottom-right-radius:6px;

}

.cw-operator .cw-bubble{

    background:#fff;

    color:#222;

    border:1px solid var(--cw-border);

    border-bottom-left-radius:6px;

}

.cw-system .cw-bubble{

    background:#eef2ff;

    color:#555;

    font-size:12px;

}

.cw-footer{
bottom: 0;
right: 0;
left: 0;
position: absolute;
    height:var(--cw-footer-height);

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    background:#fff;

    border-top:1px solid var(--cw-border);

    flex-shrink:0;

}

.cw-input{

    flex:1;

    resize:none;

    height:52px;

    padding:12px;

    border:1px solid var(--cw-border);

    border-radius:14px;

    outline:none;

    font-size:14px;

    font-family:inherit;

}

.cw-input:focus{

    border-color:var(--cw-primary);

}

.cw-send{

    width:82px;

    height:52px;

    border:none;

    border-radius:14px;

    background:var(--cw-primary);

    color:#fff;

    cursor:pointer;

    font-size:14px;

    transition:.2s;

}

.cw-send:hover{

    background:var(--cw-primary-hover);

}

.cw-send:active{

    transform:scale(.97);

}

.cw-messages::-webkit-scrollbar{

    width:8px;

}

.cw-messages::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.cw-messages::-webkit-scrollbar-track{

    background:transparent;

}
.cw-typing{

    display:none;

    padding:8px 16px;

    font-size:12px;

    color:#64748b;

}


.cw-typing.show{

    display:block;

}

@media (max-width:768px){

    #chat-widget{

        left:0;

        right:0;

        bottom:0;

    }

    .cw-button{

        position:fixed;

        right:20px;

        bottom:75px;

    }

    .cw-window{

        position:fixed;

        inset:0;

        width:100vw;

        height:90vh;

        border-radius:0;

        bottom:0;

        right:0;

    }

    .cw-window.open{

        transform:none;

    }

    .cw-header{

        padding:0 16px;

    }

    .cw-footer{

        padding:12px;

    }

    .cw-bubble{

        max-width:88%;

    }

}

@media (max-width:420px){

    .cw-send{

        width:72px;

    }

    .cw-input{

        font-size:16px;

    }

}

.cw-auto-message{

    position:fixed;

    right:25px;

    bottom:115px;

    max-width:240px;

    background:#fff;

    border-radius:12px;

    padding:12px;

    box-shadow:0 6px 25px rgba(0,0,0,.15);

    display:none;

    font-size:13px;

    line-height:1.6;

    cursor:pointer;

    animation:cwFade .3s;

    z-index:99998;

}

.cw-auto-message.show{

    display:block;

}

.cw-auto-message:after{

    content:'';

    position:absolute;

    right:24px;

    bottom:-8px;

    width:16px;

    height:16px;

    background:#fff;

    transform:rotate(45deg);

}

@keyframes cwFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.cw-badge{

    position:absolute;

    top:-5px;

    right:-5px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ef4444;

    color:#fff;

    display:none;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:bold;

}

.cw-badge.show{

    display:flex;

}