<!--- !!!!!!!!!! LIVECHAT BUTTON !!!!!!!!!! -->
<script>
    var siteTitle = document.title;
    var okTitle = "~Онлайн консультант~";
    var changeTitleIntervalId = 0;
    var lv_sts{$rcook}= -1;
    function lv_fix{$rcook}() {
        if (document.cookie.length > 0) {
            var p1 = document.cookie.indexOf("lv_{$rcook}");
            if (p1 != -1)
                if (document.cookie.substring(p1, p1 + 11) == "lv_{$rcook}=1") {
                    document.getElementById("lvi_{$rimg1}").src = "{$config.site_url}/cache/lv_online.gif";
                    lv_sts{$rcook}= 1;
                }
                else if (document.cookie.substring(p1, p1 + 11) == "lv_{$rcook}=0") {
                    document.getElementById("lvi_{$rimg1}").src = "{$config.site_url}/cache/lv_offline.gif";
                    lv_sts{$rcook}= 0;
                }
            ;
        }
        ;
    }
    ;

    function lv_ref{$rcook}_timeout() {
        var today = new Date();
        var expire = new Date();
        expire.setTime(today.getTime() + 60 * 60 * 24);
        if ((document.getElementById("lv_{$rimg2}").height == 2) && (lv_sts{$rcook}!= 1)) {
            document.cookie = "lv_{$rcook}=1; path=/; expires=" + expire.toGMTString();

            lv_fix{$rcook}();
        }
        if ((document.getElementById("lv_{$rimg2}").height == 3) && (lv_sts{$rcook}!= 0)) {
            document.cookie = "lv_{$rcook}=0; path=/; expires=" + expire.toGMTString();
            lv_fix{$rcook}();
        }
        return false;
    }
    ;
    function lv_ref{$rcook}() {
        setTimeout("lv_ref{$rcook}_timeout()", 100);
    }
    ;

    function greetingsTraveler() {
        const buttonHeight = document.querySelector('.carrotquest-css-reset').parentElement.clientHeight + 20;
        document.querySelector('.carrotquest-css-reset').style.bottom = (buttonHeight || 15) + 'px';
        document.querySelector('.carrotquest-css-reset').classList.remove('hidden');
        document.getElementById('carrot-messenger-frame').contentWindow.postMessage({ 'need_scroll': true }, '*');
        soundClick();
        changeTitleIntervalId = setInterval(changeTitle, 500);
        {if $config.modules.livechat.btn_animation_end}if (document.querySelector('#animation__span') !== null) document.querySelector('#animation__span').remove();{/if}
        /*setTimeout( function() {
            document.querySelector('.carrotquest-css-reset').classList.add('hidden');
            clearInterval(changeTitleIntervalId);
            document.title = siteTitle;
        }, 5000);*/
    };

    function changeTitle() {
        if ( document.title === okTitle )
            document.title = siteTitle;
        else
            document.title = okTitle;
    };

    function soundClick() {
        var audio = new Audio();
        audio.src = '{$config.site_url}/modules/livechat/sounds/ok_open.mp3';
        audio.autoplay = true;
    };

    document.body.onload = createIframe;

    function createIframe() {
        lv_fix{$rcook}();
        const iframeDiv = `
            <div class="carrot-messenger-frame-container carrotquest-messenger-line-right carrotquest-messenger-line-anim carrotquest-messenger-line-anim-right_bottom ">
            <iframe id="carrot-messenger-frame" name="carrot-messenger-frame" class="carrot-messenger-frame" data-resize-height="1" style="height: 981px;" src="{$config.site_url}/modules/livechat/client_side.php"></iframe>
            <div class="close__button_carrot">
            <button>
            <svg height="20px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="20px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <style type="text/css">
            <![CDATA[
            {literal}.st0{display:inline;}
            .st1{fill:none;stroke:#000000;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            .st2{display:none;}{/literal}
            ]]>
            </style>
            <g class="st2" id="cross">
            <g class="st0">
            <line class="st1" x1="112.5" x2="401" y1="112.5" y2="401"/><line class="st1" x1="401" x2="112.5" y1="112.5" y2="401"/>
            </g>
            </g>
            <g id="cross_copy">
            <path d="M268.064,256.75l138.593-138.593c3.124-3.124,3.124-8.189,0-11.313c-3.125-3.124-8.189-3.124-11.314,0L256.75,245.436   L118.157,106.843c-3.124-3.124-8.189-3.124-11.313,0c-3.125,3.124-3.125,8.189,0,11.313L245.436,256.75L106.843,395.343   c-3.125,3.125-3.125,8.189,0,11.314c1.562,1.562,3.609,2.343,5.657,2.343s4.095-0.781,5.657-2.343L256.75,268.064l138.593,138.593   c1.563,1.562,3.609,2.343,5.657,2.343s4.095-0.781,5.657-2.343c3.124-3.125,3.124-8.189,0-11.314L268.064,256.75z"/>
            </g>
            </svg>
            </button></div>
            </div>`;

        let element = document.createElement('div');
        element.classList.add('carrotquest-css-reset');
        element.classList.add('hidden');
        element.innerHTML = iframeDiv;
        document.querySelector('.relative__div').appendChild(element);

        document.querySelector('.close__button_carrot button').addEventListener('click', function () {
            document.querySelector('.carrotquest-css-reset').classList.toggle('hidden');
            clearInterval(changeTitleIntervalId);
            document.title = siteTitle;
            {if $config.modules.livechat.btn_animation_end}if (document.querySelector('#animation__span') !== null) document.querySelector('#animation__span').remove();{/if}
        });

        /* Клик вне компонента */
        function onClickClose(elem) { /* вызвать в момент показа окна, где elem - окно*/
            function outsideClickListener(event) {
                if (!elem.contains(event.target) && isVisible(elem)) {  /* проверяем, что клик не по элементу и элемент виден*/
                    document.querySelector('.carrotquest-css-reset').classList.add('hidden');
                    clearInterval(changeTitleIntervalId);
                    document.title = siteTitle;
                    {if $config.modules.livechat.btn_animation_end}if (document.querySelector('#animation__span') !== null) document.querySelector('#animation__span').remove();{/if}
                }
            }
            document.addEventListener('click', outsideClickListener)
        }
        function isVisible(elem) { /*открыто ли условное окно*/
            return !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
        }

        onClickClose(document.querySelector('.relative__div'));

        {if $config.modules.livechat.ok_open_timer}
            var okOpenTimer = parseInt({$config.modules.livechat.ok_open_timer}, 10) * 1000;
            setTimeout(greetingsTraveler, okOpenTimer);
        {/if}
    };
</script>

<div class="relative__div" style="{if !$config.modules.livechat.icon_position_right && !$config.modules.livechat.icon_position_bottom}{else}position: fixed; right: {$config.modules.livechat.icon_position_right}px; bottom: {$config.modules.livechat.icon_position_bottom}px;{/if}">
    <img src="{$config.site_url}/modules/livechat/images/space.gif" id="lvi_{$rimg1}"
         onclick="document.querySelector('.carrotquest-css-reset').classList.toggle('hidden');const buttonHeight = document.querySelector('.carrotquest-css-reset').parentElement.clientHeight + 20;document.querySelector('.carrotquest-css-reset').style.bottom = (buttonHeight || 15) + 'px'; document.getElementById('carrot-messenger-frame').contentWindow.postMessage({ 'need_scroll': true }, '*'); {if $config.modules.livechat.btn_animation_end}if (document.querySelector('#animation__span') !== null) document.querySelector('#animation__span').remove();{/if}"
         style='cursor: pointer; position: relative;'/>
    <img src="{$config.site_url}/modules/livechat/test_online.php?r{$rcook}{if $lvb_mode}&mode={$lvb_mode}{/if}" id="lv_{$rimg2}"
         style="position:absolute;visibility:hidden" onload="lv_ref{$rcook}()"/>
    <span id="animation__span"></span>
</div>

<style type="text/css">
    /**
     Для нового онлайн консультата
     */

    .relative__div {
        position: relative;
        z-index: 1000000;
    }

    .hidden {
        display: none !important;
    }

    .carrotquest-css-reset, .carrotquest-css-reset div, .carrotquest-css-reset span, .carrotquest-css-reset applet, .carrotquest-css-reset object, .carrotquest-css-reset iframe, .carrotquest-css-reset h1, .carrotquest-css-reset h2, .carrotquest-css-reset h3, .carrotquest-css-reset h4, .carrotquest-css-reset h5, .carrotquest-css-reset h6, .carrotquest-css-reset p, .carrotquest-css-reset blockquote, .carrotquest-css-reset pre, .carrotquest-css-reset a, .carrotquest-css-reset abbr, .carrotquest-css-reset acronym, .carrotquest-css-reset address, .carrotquest-css-reset big, .carrotquest-css-reset cite, .carrotquest-css-reset code, .carrotquest-css-reset del, .carrotquest-css-reset dfn, .carrotquest-css-reset em, .carrotquest-css-reset img, .carrotquest-css-reset ins, .carrotquest-css-reset kbd, .carrotquest-css-reset q, .carrotquest-css-reset s, .carrotquest-css-reset samp, .carrotquest-css-reset small, .carrotquest-css-reset strike, .carrotquest-css-reset strong, .carrotquest-css-reset sub, .carrotquest-css-reset sup, .carrotquest-css-reset tt, .carrotquest-css-reset var, .carrotquest-css-reset b, .carrotquest-css-reset u, .carrotquest-css-reset i, .carrotquest-css-reset center, .carrotquest-css-reset dl, .carrotquest-css-reset dt, .carrotquest-css-reset dd, .carrotquest-css-reset ol, .carrotquest-css-reset ul, .carrotquest-css-reset li, .carrotquest-css-reset fieldset, .carrotquest-css-reset form, .carrotquest-css-reset div.form, .carrotquest-css-reset label, .carrotquest-css-reset legend, .carrotquest-css-reset table, .carrotquest-css-reset caption, .carrotquest-css-reset tbody, .carrotquest-css-reset tfoot, .carrotquest-css-reset thead, .carrotquest-css-reset tr, .carrotquest-css-reset th, .carrotquest-css-reset td, .carrotquest-css-reset article, .carrotquest-css-reset aside, .carrotquest-css-reset canvas, .carrotquest-css-reset details, .carrotquest-css-reset figcaption, .carrotquest-css-reset figure, .carrotquest-css-reset footer, .carrotquest-css-reset header, .carrotquest-css-reset hgroup, .carrotquest-css-reset menu, .carrotquest-css-reset nav, .carrotquest-css-reset section, .carrotquest-css-reset summary, .carrotquest-css-reset time, .carrotquest-css-reset mark, .carrotquest-css-reset audio, .carrotquest-css-reset video, .carrotquest-css-reset button, .carrotquest-css-reset textarea, .carrotquest-css-reset input, .carrotquest-css-reset input:hover, .carrotquest-css-reset a:hover, .carrotquest-css-reset-frame, .carrotquest-css-reset-frame iframe, .carrotquest-css-reset input:before, .carrotquest-css-reset input:after {
        animation: none;
        animation-delay: 0;
        animation-direction: normal;
        animation-duration: 0;
        animation-fill-mode: none;
        animation-iteration-count: 1;
        animation-name: none;
        animation-play-state: running;
        animation-timing-function: ease;
        backface-visibility: visible;
        background: 0;
        background-attachment: scroll;
        background-clip: border-box;
        background-color: transparent;
        background-image: none;
        background-origin: padding-box;
        background-position: 0 0;
        background-position-x: 0;
        background-position-y: 0;
        background-repeat: repeat;
        background-size: auto auto;
        border: 0;
        border-style: none;
        border-width: medium;
        border-color: #fff;
        border-bottom: 0;
        border-bottom-color: #fff;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-style: none;
        border-bottom-width: medium;
        border-collapse: separate;
        border-image: none;
        border-left: 0;
        border-left-color: #fff;
        border-left-style: none;
        border-left-width: medium;
        border-radius: 0;
        border-right: 0;
        border-right-color: #fff;
        border-right-style: none;
        border-right-width: medium;
        border-spacing: 0;
        border-top: 0;
        border-top-color: #fff;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top-style: none;
        border-top-width: medium;
        bottom: auto;
        box-shadow: none;
        box-sizing: content-box;
        caption-side: top;
        clear: none;
        clip: auto;
        color: #000;
        columns: auto;
        column-count: auto;
        column-fill: balance;
        column-gap: normal;
        column-rule: medium none currentColor;
        column-rule-color: currentColor;
        column-rule-style: none;
        column-rule-width: none;
        column-span: 1;
        column-width: auto;
        content: normal;
        counter-increment: none;
        counter-reset: none;
        cursor: auto;
        direction: ltr;
        display: inline;
        empty-cells: show;
        float: none;
        font: normal;
        font-family: inherit;
        font-size: medium;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        height: auto;
        hyphens: none;
        left: auto;
        letter-spacing: normal;
        line-height: normal;
        list-style: none;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: disc;
        margin: 0;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        max-height: none;
        max-width: none;
        min-height: 0;
        min-width: 0;
        opacity: 1;
        orphans: 0;
        outline: 0;
        outline-color: invert;
        outline-style: none;
        outline-width: medium;
        overflow: visible;
        overflow-x: visible;
        overflow-y: visible;
        padding: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        page-break-after: auto;
        page-break-before: auto;
        page-break-inside: auto;
        perspective: none;
        perspective-origin: 50% 50%;
        position: static;
        quotes: "C" "D" "8" "9";
        right: auto;
        tab-size: 8;
        table-layout: auto;
        text-align: left;
        text-align-last: auto;
        text-decoration: none;
        text-decoration-color: #000;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-indent: 0;
        text-shadow: none;
        text-transform: none;
        top: auto;
        transform: none;
        transform-style: flat;
        transition: none;
        transition-delay: 0;
        transition-duration: 0;
        transition-property: none;
        transition-timing-function: ease;
        unicode-bidi: normal;
        vertical-align: baseline;
        visibility: visible;
        white-space: normal;
        widows: 0;
        width: auto;
        word-spacing: normal;
        z-index: auto;
    }

    .carrotquest-css-reset {
        position: absolute !important;
        bottom: 100px;
        right: 0 !important;
        border-radius: 10px !important;
        width: 350px !important;
        height: 600px !important;
        z-index: 3424324234 !important;
        box-shadow: 0 8px 18px 0 rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.05)!important;
    }

    .carrot-messenger-frame-container {
        position: relative;
        border-radius: 10px !important;
    }

    .carrotquest-messenger-line-anim {
        animation-timing-function: cubic-bezier(0.0,0.0,0.2,1)!important;
        -webkit-animation-duration: 150ms!important;
        animation-duration: 150ms!important;
        animation-name: carrotquest-messenger-line-anim-right!important;
    }

    .carrot-messenger-frame-container {
        height: 100%!important;
    }

    .carrot-messenger-frame {
        width: 100%!important;
        height: 100%!important;
        border-radius: 10px !important;
    }

    .close__button_carrot {
        position: absolute!important;
        top: 12px!important;
        right: 15px!important;
    }

    .close__button_carrot svg:hover {
        cursor: pointer;
    }

    .carrotquest-css-reset::before {
        content: '';
        position: absolute;
        left: 24px;
        top: -25px;
        border: 12px solid transparent;
        border-bottom: 15px solid #ffffff;
    }

    @keyframes carrotquest-messenger-line-anim-right {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes pulse-anim {
        0% {
            transform: scale(.6);
            opacity: 0;
        }
        50% {
            transform: scale(.9);
            opacity: 0;
        }
        60% {
            transform: scale(1.1);
            opacity: 0.6;
        }
        70% {
            transform: scale(1.2);
            opacity: 0.85;
        }
        80% {
            transform: scale(1.3);
            opacity: 0.6;
        }
        100% {
            transform: scale(1.4);
            opacity: 0;
        }
    }

    .carrotquest-css-reset::before {
        content: '';
        position: absolute;
        right: 24px;
        bottom: -25px;
        border: 12px solid transparent;
        border-bottom: 15px solid #ffffff;
        transform: rotate(180deg);
        left: unset;
        top: unset;
    }

    .carrotquest-css-reset::before {
        border-bottom-color: {$config.modules.livechat.ok_color_block_4} !important;
    }

    {if $config.modules.livechat.ok_button_animation == 'pulse'}
        #animation__span {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: -3px;
            opacity: 0;
            z-index: -1;
            border: 3px solid rgba(255,255,255,0.1);
            -webkit-animation: pulse-anim {$config.modules.livechat.ok_button_animation_duration}s linear infinite;
            -moz-animation: pulse-anim {$config.modules.livechat.ok_button_animation_duration}s linear infinite;
            animation: pulse-anim {$config.modules.livechat.ok_button_animation_duration}s linear infinite;
            animation-name: pulse-anim;
            -webkit-border-radius: 999px;
            -moz-border-radius: 999px;
            border-radius: 999px;
            -webkit-box-shadow: inset 0px 0px 20px 20px {$config.modules.livechat.ok_button_animation_color};
            -moz-box-shadow: inset 0px 0px 20px 20px {$config.modules.livechat.ok_button_animation_color};
            box-shadow: inset 0px 0px 20px 20px {$config.modules.livechat.ok_button_animation_color};
        }
    {/if}

    @media (max-width :400px) {
        .carrotquest-css-reset {
            width:255px !important;
            height: 450px !important;
        }
    }
    /**
     Окончание стилизации ОК
     */
</style>
<!--- !!!!!!!!!! LIVECHAT BUTTON !!!!!!!!!! -->