.hst-chat-bot{font-size: 14px;}
.hst-chat-bot.txt-large{font-size: 18px;}
#hst-chat-bot h1{font-size: 16px;}
#hst-chat-bot h2{font-size: 16px;}
#hst-chat-bot h3{font-size: 16px;}
#hst-chat-bot h4{font-size: 15px;}
#hst-chat-bot h5{font-size: 15px;}

.hst-chat-bot .hey-traveller{
    width: 300px;
    height: 100px;
    background: #FFFFFF;
    overflow: hidden;
    z-index: 9999;
    position: fixed;
    cursor: pointer;
    bottom: 120px;
    right: 30px;
    padding: 8px 0 0 15px;
    border: 1px solid #ebebeb;
    border-radius: 16px;
}

.hst-chat-bot .hey-traveller .triangle {
    overflow: hidden;
    z-index: 9999;
    position: fixed;
    cursor: pointer;
    right: 54px;
    height: 20px;
    width: 20px;
    background-color: #FFFFFF;
    border: none;
    bottom: 105px;
    clip-path: polygon(90% 0, 10% 0, 55% 100%);
    border-radius: 0 0 0 0.25em;
}

.hst-chat-bot .btn-open{
    background: linear-gradient(217deg, #cdbcef, #443bff);
    width: 70px;
    height: 70px;
    overflow: hidden;
    z-index: 9999;
    border-radius: 50%;
    position: fixed;
    border: none;
    cursor: pointer;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease;
}

.hst-chat-bot .btn-open:hover {
    background: linear-gradient(60deg, rgb(247, 149, 51), rgb(243, 112, 85), rgb(239, 78, 123), rgb(161, 102, 171), rgb(80, 115, 184), rgb(16, 152, 173), rgb(7, 179, 155), rgb(111, 186, 130)) 0% 0% / 300% 300%;
    background-size: 300% 300%;
    animation: shiftGradient 3s ease infinite;
}

@keyframes shiftGradient {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}


.hst-chat-bot .btn-open .ai-tracery{
    background: url(/img/messenger/ai-tracery.svg) center center / cover no-repeat;
    height: 37px;
    width: 37px;
    background-size: 100%;
}
.hst-chat-bot .box{
    background-color: #fff;
    box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.1);
    bottom: 0;
    height: 100%;
    min-height: 550px;
    min-width: 360px;
    max-height: 100vh;
    max-width: 100vw;
    overflow: auto;
    position: fixed;
    resize: both;
    right: 0;
    transform: rotate(180deg);
    width: 400px;
    z-index: 999999999;
}
.hst-chat-bot .box .rotated{
    display: flex;
    flex-direction: column;
    height: 100%;
    transform: rotate(180deg);
}

@media (max-width: 768px){
    .hst-chat-bot .box{
        width: 90vw;
        min-width: initial;
    }
}

@media (max-width: 400px){
    .hst-chat-bot .hey-traveller {
        width: 250px;
    }
}

/* HEAD */
    .hst-chat-bot section.head{
        align-items: center;
        background-color: #f0f3f5;
        border-top-left-radius: 21px;
        box-shadow: rgb(10 10 10 / 10%) 0px 3px 7px -3px;
        display: flex;
        padding: 30px 20px;
    }
    .hst-chat-bot section.head .title{flex: 1;}
    .hst-chat-bot section.head .title img{max-width: 200px; width: 100%;}
    .hst-chat-bot section.head .btn{
        background: transparent;
        cursor: pointer;
        height: 20px;
        margin: 0;
        padding: 0 4px;
        outline: none;
        text-align: center;
        width: 20px;
        -webkit-filter: invert(100%); /* Safari/Chrome */
        filter: invert(100%);
    }
    .hst-chat-bot section.head .btn.btn-font-size{background-position: center; background-repeat: no-repeat; background-size: 16px; position: relative;}
    .hst-chat-bot section.head .btn.btn-font-size.inc{background-image:url("/img/icons/ic-zoom_up_w.png");}
    .hst-chat-bot section.head .btn.btn-font-size.dec{background-image:url("/img/icons/ic-zoom_down_w.png");}
    .hst-chat-bot section.head .btn.btn-hide{}
    .hst-chat-bot section.head .btn.btn-hide svg{height: 15px; margin-bottom: 3px;}
    .hst-chat-bot section.head .btn.btn-close{}
    .hst-chat-bot section.head .btn.btn-close svg{height: 15px;}
    .hst-chat-bot section.head .separator{
        border-right: 1px solid #fff;
        display: inline-block;
        height: 20px;
        margin: 0 5px 0 10px;
        opacity: .5;
        width: 1px;
    }


/* BODY */
    .hst-chat-bot section.body{
        display: flex;
        flex: 1;
        flex-direction: column-reverse;
        overflow: auto;
        padding: 10px 20px;
    }
    .hst-chat-bot section.body .block{
        align-items: flex-start;
        display: flex !important;
        margin-bottom: 20px;
    }
    .hst-chat-bot section.body .block.block-bot-msg{text-align: left;}
    .hst-chat-bot section.body .block.block-user-msg{text-align: left;}
    .hst-chat-bot section.body .block.block-buttons{text-align: right;}

    .hst-chat-bot section.body .block .ava{
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        height: 30px;
        margin-top: 5px;
        width: 30px;
    }
    .hst-chat-bot section.body .block.block-bot-msg .ava{background-image: url(/img/ai/icon-chat@2x.png);}
    .hst-chat-bot section.body .block.block-user-msg .ava{background-image: url(/img/default_avatar_old.png);}

    .hst-chat-bot section.body .block .msg{
        border-radius: 12px;
        color: #000;
        display: inline-block;
        font-size: 1em;
        flex: 1;
        line-height: 1.2em;
        max-width: 85%;
        padding: 12px;
        position: relative;
        word-break: break-word;
    }
    .hst-chat-bot section.body .block .msg.msg-user{}
    .hst-chat-bot section.body .block .msg.msg-bot{}



    .hst-chat-bot section.body .msg-bot-source{}
    .hst-chat-bot section.body .msg-bot-buttons{display:flex; margin-left: -10px; margin-top: 6px; position: relative}
    .hst-chat-bot section.body .msg-bot-buttons .hbtn,
    .hst-chat-bot section.body .msg-bot-buttons .hbtn:hover{
        background-color: transparent;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 100%;
        font-size: 0;
        height: 40px;
        min-width: auto;
        width: 40px;
    }
    .hst-chat-bot section.body .msg-bot-buttons .hbtn:hover,
    .hst-chat-bot section.body .msg-bot-buttons .hbtn:focus,
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.liked,
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.liked,
    .hst-chat-bot section.body .msg-bot-buttons .dropdown.open .hbtn{
        background-color: #bcc3cc26;
        border-radius: 100%;
    }
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-copy{background-image:url(/img/ai/ic-copy@2x.png);}
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-copy.check{
        background-image:url(/img/ai/ic-check@2x.png);
        background-size: 24px;
        pointer-events: none;
        transition: none;
    }
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-settings{background-image:url(/img/ai/ic-settings@2x.png);}
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-like{background-image:url(/img/ai/ic-like@2x.png);}
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-dislike{background-image:url(/img/ai/ic-dislike@2x.png);}
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-this,
    .hst-chat-bot section.body .msg-bot-buttons .hbtn.btn-this:hover{
        border: 2px solid #91989F;
        border-radius: 12px;
        cursor: pointer;
        font-size: 12px;
        font-weight: normal;
        height: auto;
        line-height: normal;
        margin-top: 8px;
        margin-left: 10px;
        opacity: .85;
        padding: 2px 12px;
        width: auto;
    }

    .hst-chat-bot section.body .msg-bot-buttons .dropdown-menu{
        border-radius: 16px;
        box-shadow: 0 7px 24px 0 rgba(0, 0, 0, 0.2);
        top: auto;
        right: auto;
        bottom: 100%;
        left: 0;
        padding: 12px 0;
    }
    .hst-chat-bot section.body .msg-bot-buttons .dropdown-menu>li>a,
    .hst-chat-bot section.body .msg-bot-buttons .dropdown-menu>li.active>a{
        color: #000;
        font-size: 14px;
        line-height: normal;
        padding: 9px 24px;
    }

    .hst-chat-bot section.body a.chat-bot-link,
    .hst-chat-bot section.body a.highlighted-link
    {
        color: #337ab7;
        text-decoration: underline;
        cursor: pointer;
        margin-left: 5px;
    }
    @keyframes loadingFade{
        0%{
            opacity: 0;
        }
        50%{
            opacity: 0.8;
        }
        100%{
            opacity: 0;
        }
    }

    .hst-chat-bot section.body .typing{
        align-items: center;
        background-color: #bcc3cc26;
        display: flex;
        border-radius: 20px;
        justify-content: space-evenly;
        padding: 10px;
        width: 60px;
     }
    .hst-chat-bot section.body .typing__dot{
        animation: loadingFade 1s infinite;
        background-color: #8d8c91;
        border-radius: 50%;
        height: 4px;
        opacity: 0;
        width: 4px;
    }
    .hst-chat-bot section.body .typing__dot:nth-child(1){
        animation-delay: 0s;
    }
    .hst-chat-bot section.body .typing__dot:nth-child(2){
        animation-delay: 0.2s;
    }
    .hst-chat-bot section.body .typing__dot:nth-child(3){
        animation-delay: 0.4s;
    }

    .hst-chat-bot section.body .bot-typing{
        align-items: flex-start;
        display: flex;
        margin-bottom: 20px;
    }
    .hst-chat-bot section.body .bot-typing .ava{
        background-image: url(/img/ai/icon-chat@2x.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        height: 30px;
        margin-top: 5px;
        width: 30px;
    }
    .hst-chat-bot section.body .bot-typing .dots{
        display: inline-block;
        flex: 1;
        width: 85%;
        padding: 12px;
        position: relative;
    }
    .hst-chat-bot section.body .bot-typing .dots .dot{
        background: rgb(205,188,239);
        background: linear-gradient(266deg, rgba(205,188,239,1) 0%, rgba(68,59,255,0.64) 100%);
        border-radius: 9px;
        height: 12px;
        margin-bottom: 12px;
        position: relative;
        width: 100%;
    }
    .hst-chat-bot section.body .bot-typing .dots .dot:after{
        animation-duration: 1.25s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
        background-size: 800px 104px;
        content: '';
        display: block;
        opacity: .5;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .hst-chat-bot section.body .bot-typing .dots .dot:nth-child(1){
        animation-delay: 0s;
        width: 100%;
    }
    .hst-chat-bot section.body .bot-typing .dots .dot:nth-child(2){
        animation-delay: 0.2s;
        width: 80%;
    }
    .hst-chat-bot section.body .bot-typing .dots .dot:nth-child(3){
        animation-delay: 0.4s;
        width: 60%;
    }
    @keyframes placeHolderShimmer{
        0%{
            background-position: -468px 0
        }
        100%{
            background-position: 468px 0
        }
    }


/* FOOT */
    .hst-chat-bot section.foot{
        border-top: 1px solid #bcc3cc33;
        padding: 10px;
    }
    .hst-chat-bot section.foot textarea{
        appearance: none;
        border: none;
        font-size: 1em;
        outline: none;
        padding: 8px;
        resize: none;
        width: 100%;
    }
    .hst-chat-bot section.foot textarea:disabled{background: transparent; cursor: not-allowed; user-select: none; opacity: .5;}
    .hst-chat-bot section.foot .btns{
        align-items: center;
        display: flex;
        font-size: 0;
        justify-content: space-between;
    }
    .hst-chat-bot section.foot .btns .btn-send{
        background-color: #bcc3cc;
        background-image: url(/img/ai/icon-arrow@2x.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 18px;
        border: none;
        border-radius: 50%;
        height: 36px;
        cursor: pointer;
        margin: 0 auto;
        padding: 0;
        width: 36px;
    }
    .hst-chat-bot section.foot .btns .btn-send.active{
        background-color: #1e7eee;
        background-image: url(/img/ai/icon-arrow-selected@2x.png);
    }


/* POWERED */
    .hst-chat-bot section.powered{text-align: center; padding: 4px;}
    .hst-chat-bot section.powered a{
        color: #ddd;
        font-size: 12px;
    }


/* OTHER */
    .hst-chat-bot section.foot .dropdown-menu{
        border:none;
        border-radius: 16px;
        box-shadow: 0 7px 24px 0 rgba(0, 0, 0, 0.2);
        bottom: 100%;
        left:0;
        overflow:hidden;
        padding:12px 0;
        top:auto;
    }
    .hst-chat-bot section.foot .dropdown-menu>li{}
    .hst-chat-bot section.foot .dropdown-menu>li>a,
    .hst-chat-bot section.foot .dropdown-menu>li.active>a{
        background:none;
        color:#000;
        font-size:14px;
        line-height:normal;
        padding:9px 24px;
        text-align:left;
    }
    .hst-chat-bot section.foot .dropdown-menu>li>a:hover,
    .hst-chat-bot section.foot .dropdown-menu>li>a:hover,
    .hst-chat-bot section.foot .dropdown-menu>li.active>a:hover,
    .hst-chat-bot section.foot .dropdown-menu>li.active>a:focus{background:#f6f6f6; color:#192233;}
    .hst-chat-bot section.foot .dropdown-menu>li>a.bordered{border-top:1px solid #ededed;}