// create a new style tag
var styleElement = document.createElement("style");

// set the python project URL
const URL = "https://www.occucare.co.in/chatbot-custom"

// style for btn and chatwindow iframe
styleElement.textContent = `
* {
            box-sizing: border-box;
            margin: 0;
            }
            #chatwindow {
                position: fixed;
                bottom: 3px;
                right: 3px;
                width: 400px;
                /* height: 500px; */
                height: 590px;
                max-height: 590px;
                /* display: none; */
                border: none;
                border-radius: 6px;
                box-shadow: inset 0 0 0 15px transparent;
                background-color: transparent;
                transition: all 0.1s ease;
                // transform: scale(0.5);
                z-index:10000005;
            }

            #chatbtn {
                position: fixed;
                border: none;
                bottom: 18px;
                right: 17px;
                z-index: 10000000;
                width: 70px;
                height: 70px;
            }

            @media (max-width: 575px) {
                #chatwindow {
                  width: calc(100%);
                  right: 0;
                  max-width:400px
                }
            }
            @media (max-width:767px) {
              #chatwindow {
                height: 500px;
              }
            }

            #chatwindow.open {
                -webkit-animation: scale-in-br 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: scale-in-br 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                display: block;
            }

            @-webkit-keyframes scale-in-br {
                0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }

                100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }
            }

            @keyframes scale-in-br {
                0% {
                -webkit-transform: scale(0);
                transform: scale(0);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }

                100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }
            }

            #chatwindow {
                -webkit-animation: scale-out-br 0.1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                animation: scale-out-br 0.1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            } 
            @-webkit-keyframes scale-out-br {
                0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }

                100% {
                -webkit-transform: scale(0);
                transform: scale(0);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }
            }

            @keyframes scale-out-br {
                0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                }

                100% {
                -webkit-transform: scale(0);
                transform: scale(0);
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
                opacity: 1;
                display: none;
                }
            }

            #chatbtn {
                -webkit-animation: scale-out-br 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-br 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            }
            #chatbtn.open {
                -webkit-animation: chatbtnanimation 1s ease infinite;
                animation: chatbtnanimation 1s ease infinite;
                display: block;
            }
            @keyframes chatbtnanimation {
                30% {
                  transform: scale(1.1);
                }
              
                40%,
                60% {
                  transform: rotate(-20deg) scale(1.2);
                }
              
                50% {
                  transform: rotate(20deg) scale(1.2);
                }
              
                70% {
                  transform: rotate(0deg) scale(1.2);
                }
              
                100% {
                  transform: scale(1);
                }
              }

`;

document.head.appendChild(styleElement);

// create iframe chatwindow
const iframeChatWindow = document.createElement("iframe");
// iframeChatWindow.style.display = "none";
// iframeChatWindow.style.display = "block";
iframeChatWindow.id = 'chatwindow';
iframeChatWindow.title = "chatwindow"
iframeChatWindow.src = URL + '/index.php';

document.body.appendChild(iframeChatWindow);



// create iframe chatbtn
const iframebtn = document.createElement("iframe");
// iframe.style.display = "none";
iframebtn.id = 'chatbtn';
iframebtn.classList = 'open';
iframebtn.title = "chatbtn"
iframebtn.src = URL + '/btn.php';
document.body.appendChild(iframebtn);


// Inside the parent window