#chat-widget{
    position:fixed;
    right:20px;
    bottom:20px;

    width:320px;
    height:410px;

    background:#fff;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);

    overflow:hidden;

    z-index:9999;

    display:none;
}

#chat-widget.active{
    display:flex;
    flex-direction:column;
}

#chat-header{
    background:linear-gradient(135deg,#14b8ff,#0d6efd);
    color:#fff;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.chat-title{
    font-size:16px;
    font-weight:700;
    line-height:1.2;
}

.chat-status{
    font-size:14px;
    opacity:.9;
    margin-top:3px;
}

#chat-close{
    cursor:pointer;
    font-size:24px;
    line-height:1;
}

#chat-body{
    flex:1;
    padding:18px;
    overflow-y:auto;
    background:#f8f8f8;
}

.chat-message{
    max-width:80%;
    padding:12px 14px;
    border-radius:18px;
    font-size:15px;
    line-height:1.4;

    margin:6px 0;
    display:block;
    word-wrap:break-word;
}
.chat-message.bot{
    background:#e9ecef;
    color:#000;

    margin-right:auto;
    margin-left:0;

    border-radius:18px 18px 18px 4px;
}

.chat-message.user{
    background:linear-gradient(135deg,#14b8ff,#0d6efd);
    color:#fff;

    margin-left:auto;
    margin-right:0;

    border-radius:18px 18px 4px 18px;
}

#chat-footer{
    padding:14px;
    background:#fff;
    border-top:1px solid #eee;
}

#chat-input{
    display:flex;
    gap:8px;
    align-items:flex-end;
}

#chat-text{
    flex:1;
    resize:none;

    height:44px !important;
    min-height:44px !important;
    max-height:80px;

    padding:6px 10px;

    border:1px solid #ddd;
    border-radius:12px;

    font-size:14px;
    line-height:1.2;

    outline:none;
    background:#fafafa;

    box-sizing:border-box;
}

#chat-send{
    width:44px;
    height:44px;

    border:none;
    border-radius:12px;

    background:linear-gradient(135deg,#14b8ff,#0d6efd);
    color:#fff;

    font-size:18px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.2s;
}

#chat-send:hover{
    transform:scale(1.05);
}
#chat-send:hover{
    filter:brightness(1.1);
}

#chat-toggle{
position:fixed;
right:20px;
bottom:20px;
width:54px;
height:54px;
border-radius:50%;
background:linear-gradient(135deg,#1aa8ff,#0d6efd);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 12px 28px rgba(13,110,253,.25);
cursor:pointer;
transition:all .22s ease;
z-index:9999;
}

#chat-toggle:hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 16px 32px rgba(13,110,253,.30);
}

#chat-toggle.hidden{
    display:none;!important;
}

#chat-toggle svg{
display:block;
width:30px;
height:30px;
}
