/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

#webiroda-chat-window,
#webiroda-chat-button{

    font-family:Arial,sans-serif;

    box-sizing:border-box;

}

#webiroda-chat-window *,
#webiroda-chat-button *{

    box-sizing:border-box;

}


/*
|--------------------------------------------------------------------------
| FLOATING BUTTON
|--------------------------------------------------------------------------
*/

#webiroda-chat-button{

    position:fixed;

    right:20px;
    bottom:20px;

    width:62px;
    height:62px;

    border-radius:50%;

    background:
        linear-gradient(135deg,#0084ff,#006eff);

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:999999999;

    box-shadow:
        0 10px 30px rgba(0,132,255,0.35),
        0 2px 10px rgba(0,0,0,0.2);

    transition:all .25s ease;

}

#webiroda-chat-button:hover{

    transform:scale(1.05);

}


/*
|--------------------------------------------------------------------------
| CHAT WINDOW
|--------------------------------------------------------------------------
*/

#webiroda-chat-window{

    position:fixed;

    right:20px;
    bottom:50px;

    width:350px;
    height:500px;

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    display:none;

    flex-direction:column;

    z-index:999999999;

    box-shadow:
        0 25px 80px rgba(0,0,0,.18);

}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

#webiroda-chat-header{

    background:
        linear-gradient(135deg,#0084ff,#006eff);

    color:#fff;

    padding:18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    flex-shrink:0;

}

#webiroda-chat-header-left{

    display:flex;
    align-items:center;

    gap:12px;

}


/*
|--------------------------------------------------------------------------
| AVATAR
|--------------------------------------------------------------------------
*/

#webiroda-chat-avatar{

    width:42px;
    height:42px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    background:#fff;

}


/*
|--------------------------------------------------------------------------
| AVATAR IMAGE
|--------------------------------------------------------------------------
*/

#webiroda-chat-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

#webiroda-chat-title{

    font-size:16px;
    font-weight:700;

}

#webiroda-chat-status{

    display:flex;
    align-items:center;

    gap:6px;

    font-size:13px;

    opacity:.95;

}


/*
|--------------------------------------------------------------------------
| CLOSE
|--------------------------------------------------------------------------
*/

#webiroda-chat-close{

    cursor:pointer;

    font-size:22px;

}


/*
|--------------------------------------------------------------------------
| MESSAGES
|--------------------------------------------------------------------------
*/

#webiroda-chat-messages{

    flex:1;

    overflow-y:auto;

    padding:18px;

    background:#f4f7fb;

}


/*
|--------------------------------------------------------------------------
| AI MESSAGE
|--------------------------------------------------------------------------
*/

.webiroda-chat-ai-message{

    background:#fff;

    color:#111;

    padding:14px 16px;

    border-radius:18px;

    margin-bottom:12px;

    max-width:85%;

    line-height:1.6;

    word-break:break-word;

    box-shadow:
        0 2px 10px rgba(0,0,0,.05);

}


/*
|--------------------------------------------------------------------------
| USER MESSAGE
|--------------------------------------------------------------------------
*/

.webiroda-chat-user-message{

    background:
        linear-gradient(135deg,#0084ff,#006eff);

    color:#fff;

    padding:14px 16px;

    border-radius:18px;

    margin-bottom:12px;

    margin-left:auto;

    max-width:85%;

    line-height:1.6;

    word-break:break-word;

}


/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

#webiroda-chat-input-wrapper{

    display:flex;

    align-items:center;

    padding:14px;

    background:#fff;

    border-top:1px solid #eee;

    flex-shrink:0;

}

#webiroda-chat-input{

    flex:1;

    border:none;

    background:#f4f7fb;

    border-radius:999px;

    padding:14px 18px;

    font-size:15px;

}

#webiroda-chat-input:focus{

    outline:none;

}


/*
|--------------------------------------------------------------------------
| SEND BUTTON
|--------------------------------------------------------------------------
*/

#webiroda-chat-send{

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    margin-left:10px;

    background:
        linear-gradient(135deg,#0084ff,#006eff);

    color:#fff;

    cursor:pointer;

    font-size:18px;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    #webiroda-chat-window{

        left:12px;
        right:12px;

        top:12px;
        bottom:12px;

        width:auto;
        height:auto;

        max-width:none;

        border-radius:24px;

    }

}


/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

#webiroda-chat-messages::-webkit-scrollbar{
    width:6px;
}

#webiroda-chat-messages::-webkit-scrollbar-thumb{

    background:#cfd8e3;

    border-radius:20px;

}

/*
|--------------------------------------------------------------------------
| CHAT CTA BUTTON
|--------------------------------------------------------------------------
*/

.webiroda-chat-link-button{

    display:inline-block;

    margin-top:12px;

    padding:12px 18px;

    border-radius:14px;

    background:
        linear-gradient(135deg,#0084ff,#006eff);

    color:#fff !important;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:.2s ease;

}

.webiroda-chat-link-button:hover{

    transform:translateY(-2px);

    opacity:.92;

}

/*
|--------------------------------------------------------------------------
| ONLINE STATUS DOT
|--------------------------------------------------------------------------
*/

#webiroda-chat-status-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22c55e;

    display:inline-block;

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

}