function checkElementAndExecuteCode() {
  var targetElement = document.querySelector(".b-page-content.m-chat-footer");

  if (targetElement) {
    // add emojis bar to OF

    function testarex() {
      // Display an alert when a click is detected on the inner children
      // Find the existing div with class "b-page-content m-chat-footer"
      var chatFooterDiv = document.querySelector(".b-create-post-form.g-position-relative");

      var emojisElement = document.getElementById("emojis-elements");

      // If the element exists, stop execution by returning from the function
      if (emojisElement) {
        //        console.log("The 'emojis-elements' element exists in the DOM. Stopping execution.");
        return;
      }

      // Create a new div element for emojis
      var emojisDiv = document.createElement("div");

      // Set the innerHTML of the emojis div with your desired emojis
      emojisDiv.innerHTML = "<span>😍</span><span>🥰</span><span>😘</span><span>💦</span><span>😩</span><span>🫣</span><span>😋</span><span>😇</span><span>😂</span><span>🤣</span><span>😏</span><span>😳</span><span>🥵</span><span>😈</span><span>👋</span><span>🍑</span><span>🍆</span><span>👅</span><span>💖</span><span>️</span><span>💔</span><span>😰</span><span>😥</span><span>😭</span><span>😢</span><span>🤭</span><span>🤤</span>";

      // Set the id of the emojis div to "emojis-elements"
      emojisDiv.id = "emojis-elements";

      // Insert the emojis div as the last child of the chatFooterDiv
      // chatFooterDiv.appendChild(emojisDiv);

      // Insert the new div as the second child inside the parent element
      chatFooterDiv.insertBefore(emojisDiv, chatFooterDiv.children[1]);

      var emojisContainer = document.getElementById("emojis-elements");

      emojisContainer.style.userSelect = "none";

      // Add a delay to ensure the element is added to the DOM
      setTimeout(function () {
        // Set the top border for the emojisContainer
        //   emojisContainer.style.borderTop = '1px solid #e2e5e8';
        // emojisContainer.style.marginTop = '10px';
        // emojisContainer.style.marginBottom = '10px';
      }, 1000); // Adjust the delay as needed

      // Select all span elements inside the emojisContainer
      var emojiSpans = emojisContainer.querySelectorAll("span");

      // Apply CSS styles to set the cursor to pointer for each span
      emojiSpans.forEach(function (span) {
        span.style.cursor = "pointer";
        span.style.userSelect = "none";
      });

      var firstSpan = emojisContainer.querySelector("span:first-child");

      // Add a left margin to the first span
      if (firstSpan) {
        firstSpan.style.marginLeft = "16px"; // Adjust the value as needed
      }

      // add icons button
      // Find the existing div with class "b-make-post__textarea-wrapper"
      var textareaWrapper = document.querySelector(".v-input__slot");

      // Create a button element
      var buttonElement = document.createElement("div");

      // Set the button class to include a Font Awesome icon (replace 'fa-icon' with the actual icon class)
      buttonElement.className = "repliesxx";

      // Append the button to the textareaWrapper
      textareaWrapper.appendChild(buttonElement);

      buttonElement.style.width = "3rem";
      buttonElement.style.backgroundColor = "transparent";
      buttonElement.style.justifyContent = "center";
      buttonElement.style.alignItems = "center";
      buttonElement.style.cursor = "default";
      buttonElement.style.display = "flex";
      buttonElement.style.userSelect = "none";
      buttonElement.innerHTML = '<span style="cursor:pointer;" id="gothereplies"><img src="https://mesarro.com/upload/files/convo.png" width="15px"></span>';

      var gotherepliesButton = document.getElementById("gothereplies");
      var chatFooterDiv = document.querySelector(".b-page-content.m-chat-footer");
      var existas = false; // Set to false initially

      // Add click event listener to the "Go to Replies" button
      gotherepliesButton.addEventListener("click", function (event) {
        // Check if the appended div is present
        var appendedDiv = chatFooterDiv.querySelector(".appended-div");

        // Toggle between append and remove
        if (appendedDiv) {
          // Toggle the display property of the appended div
          appendedDiv.style.display = existas ? "none" : "flex";
          existas = !existas; // Toggle the value of existas
        } else {
          // Append a new div with the class 'appended-div'
          var newDiv = document.createElement("div");
          newDiv.className = "appended-div";
          newDiv.innerHTML = '<span style="margin-bottom:8px;cursor:pointer;padding: 6px;" id="roreply">Ai vrea sa vezi ceva excitant cu mine? 😘🥰 Ca sa iti dai drumu 💦</span><span style="cursor:pointer;padding: 6px;" id="enreply">Would you like to see something exciting with me? 😘 So you can cum 💦</span>';
          newDiv.style.backgroundColor = "#020817";
          newDiv.style.position = "absolute";
          newDiv.style.top = "-95px";
          newDiv.style.left = "10px";
          newDiv.style.width = "95%";
          newDiv.style.padding = "10px";
          newDiv.style.display = "flex";
          newDiv.style.color = "white";
          newDiv.style.fontSize = "14px";
          newDiv.style.borderRadius = "5px";
          newDiv.style.flexDirection = "column";
          newDiv.style.userSelect = "none";
          chatFooterDiv.appendChild(newDiv);
          existas = true; // Set existas to true after appending
        }

        // Prevent the click event from propagating to the document
        event.stopPropagation();
      });

      // Add a global click event listener to the document
      document.addEventListener("click", function () {
        // Check if the appended div is present
        var appendedDiv = chatFooterDiv.querySelector(".appended-div");

        // If the appended div exists, hide it
        if (appendedDiv) {
          appendedDiv.style.display = "none";
          existas = false; // Update existas to false
        }
      });

      // Programmatically trigger the click on gotherepliesButton
      gotherepliesButton.click();

      var spans = document.querySelectorAll(".appended-div span");

      // Add event listener for each span
      spans.forEach(function (span) {
        // Add transition property to the span
        span.style.transition = "background-color 0.2s ease";

        // Add event listener for "mouseover" event
        span.addEventListener("mouseover", function () {
          // Change background color to #1e293b on hover
          span.style.backgroundColor = "#1e293b";
        });

        // Add event listener for "mouseout" event to reset background color
        span.addEventListener("mouseout", function () {
          // Reset background color on mouseout
          span.style.backgroundColor = "#020817"; // or whatever the original background color was
        });
      });

      // Find the textarea with id "new_post_text_input"
      var textarea = document.getElementById("new_post_text_input");

      // Add click event listener to the emojis div
      emojisDiv.addEventListener("click", function (event) {
        // Check if the clicked element is an emoji span
        if (event.target.tagName === "SPAN" && event.target.textContent) {
          // Get the clicked emoji
          var clickedEmoji = event.target.textContent;

          // Simulate typing each character in the clicked emoji
          typeTextWithDelay(clickedEmoji, textarea);
        }
      });

      // Function to simulate typing each character with a delay
      function typeTextWithDelay(textToType, inputElement) {
        var delayBetweenChars = 1; // Adjust the delay as needed

        for (var i = 0; i < textToType.length; i++) {
          setTimeout(
            function (char) {
              inputElement.value += char;
              inputElement.dispatchEvent(new Event("input", { bubbles: true }));
            },
            i * delayBetweenChars,
            textToType.charAt(i)
          );
        }
      }

      var textarea = document.getElementById("new_post_text_input");

      var roreply = document.getElementById("roreply");
      // Add click event listener to the emojis div
      roreply.addEventListener("click", function (event) {
        // Check if the clicked element is an emoji span
        if (event.target.tagName === "SPAN" && event.target.textContent) {
          // Get the clicked emoji
          var textreplik = event.target.textContent;

          // Simulate typing each character in the clicked emoji
          typeTextWithDelayx(textreplik, textarea);
        }
      });

      var enreply = document.getElementById("enreply");
      // Add click event listener to the emojis div
      enreply.addEventListener("click", function (event) {
        // Check if the clicked element is an emoji span
        if (event.target.tagName === "SPAN" && event.target.textContent) {
          // Get the clicked emoji
          var textreplik = event.target.textContent;

          // Simulate typing each character in the clicked emoji
          typeTextWithDelayx(textreplik, textarea);
        }
      });

      function typeTextWithDelayx(textToType, inputElement) {
        var delayBetweenChars = 10; // Adjust the delay as needed

        for (var i = 0; i < textToType.length; i++) {
          setTimeout(
            function (char) {
              inputElement.value += char;
              inputElement.dispatchEvent(new Event("input", { bubbles: true }));
            },
            i * delayBetweenChars,
            textToType.charAt(i)
          );
        }
      }

      gotherepliesButton.click();
    }

    testarex();

    document.addEventListener("click", function (event) {
      // Check if the clicked element is a child of the specified div
      if (event.target.closest(".swipeout-list.b-chats__list-wrapper.m-loading-items")) {
        testarex();
      }
    });

    // Stop further checks
    // clearInterval(intervalIdx);
  }
}

// Set an interval to check for the element
var intervalos = setInterval(checkElementAndExecuteCode, 1000);

function checkIfElementExists() {
  var elementemoj = document.querySelector(".b-create-post-form.g-position-relative");
  var currentURL = window.location.href;

  if (elementemoj && !currentURL.includes("chats")) {
    var emojisPost = document.getElementById("emojis-posting");

    // If the element exists, stop execution by returning from the function
    if (emojisPost) {
      //        console.log("The 'emojis-elements' element exists in the DOM. Stopping execution.");
      return;
    }

    // The element exists
    console.log("Element found!");

    // You can perform additional actions here

    // Stop the interval (optional)
    // clearInterval(intervalId);

    // Create a new div element for emojis
    var emojisPosting = document.createElement("div");

    // Set the innerHTML of the emojis div with your desired emojis
    emojisPosting.innerHTML = "<span>😍</span><span>🥰</span><span>😘</span><span>💦</span><span>😩</span><span>🫣</span><span>😋</span><span>😇</span><span>😂</span><span>🤣</span><span>😏</span><span>😳</span><span>🥵</span><span>😈</span><span>👋</span><span>🍑</span><span>🍆</span><span>👅</span><span>💖</span><span>️</span><span>💔</span><span>😰</span><span>😥</span><span>😭</span><span>😢</span><span>🤭</span><span>🤤</span>";

    // Set the id of the emojis div to "emojis-elements"
    emojisPosting.id = "emojis-posting";

    // Insert the emojis div as the last child of the chatFooterDiv
    // chatFooterDiv.appendChild(emojisDiv);

    // Insert the new div as the second child inside the parent element
    elementemoj.insertBefore(emojisPosting, elementemoj.children[1]);

    var emojisContainerposts = document.getElementById("emojis-posting");

    emojisContainerposts.style.userSelect = "none";
    emojisContainerposts.style.marginTop = "1rem";
    emojisContainerposts.style.marginLeft = "16px";

    var emojiSpansposts = emojisContainerposts.querySelectorAll("span");

    // Apply CSS styles to set the cursor to pointer for each span
    emojiSpansposts.forEach(function (span) {
      span.style.cursor = "pointer";
      span.style.userSelect = "none";
    });

    var textareaposting = document.getElementById("new_post_text_input");

    // Add click event listener to the emojis div
    emojisPosting.addEventListener("click", function (event) {
      // Check if the clicked element is an emoji span
      if (event.target.tagName === "SPAN" && event.target.textContent) {
        // Get the clicked emoji
        var clickedEmojiposting = event.target.textContent;

        // Simulate typing each character in the clicked emoji
        typeTextWithDelayposting(clickedEmojiposting, textareaposting);
      }
    });

    // Function to simulate typing each character with a delay
    function typeTextWithDelayposting(textToType, inputElement) {
      var delayBetweenChars = 1; // Adjust the delay as needed

      for (var i = 0; i < textToType.length; i++) {
        setTimeout(
          function (char) {
            inputElement.value += char;
            inputElement.dispatchEvent(new Event("input", { bubbles: true }));
          },
          i * delayBetweenChars,
          textToType.charAt(i)
        );
      }
    }
  }
}

// Set up an interval to check every 1000 milliseconds (1 second)
var intervalom = setInterval(checkIfElementExists, 1000);
