The Dream Stream

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const originalSearchBar = document.querySelector("div[role='search']");
    const mainContainer = document.querySelector(".wysiwym-embed") || document.querySelector(".body");

    if (originalSearchBar && mainContainer) {
      const clonedSearchBar = originalSearchBar.cloneNode(true);
      clonedSearchBar.classList.add("cloned-search-bar");
      mainContainer.appendChild(clonedSearchBar);

      const resultsContainer = document.createElement("div");
      resultsContainer.id = "custom-results";
      mainContainer.appendChild(resultsContainer);

      clonedSearchBar.addEventListener("submit", function (event) {
        event.preventDefault();
        const searchTerm = clonedSearchBar.querySelector("input").value.trim();
        if (searchTerm) {
          resultsContainer.innerHTML = "<p>Loading results...</p>";
          performIndependentSearch(searchTerm);
        }
      });

      async function performIndependentSearch(query) {
        originalSearchBar.querySelector("input").value = query;
        originalSearchBar.querySelector("button[type='submit']").click();

        setTimeout(async () => {
          await loadPageResults();
        }, 500);
      }

      async function loadPageResults() {
        resultsContainer.innerHTML = "<p>Loading results...</p>";
        const allResults = document.createElement("div");
        allResults.classList.add("search-results");

        let resultsLoaded = false;

        while (!resultsLoaded) {
          await new Promise(resolve => setTimeout(resolve, 500));

          const modalContent = document.querySelector("#search-modal .search-results");
          if (modalContent) {
            allResults.innerHTML = modalContent.innerHTML;

            const backdrop = document.querySelector(".modal-backdrop");
            if (backdrop) backdrop.remove();
            document.getElementById("search-modal").style.display = "none";

            resultsContainer.innerHTML = "";
            resultsContainer.appendChild(allResults);

            interceptPaginationClicks();

            resultsLoaded = true;
          }
        }
      }

      function interceptPaginationClicks() {
        const paginationLinks = resultsContainer.querySelectorAll(".search-pager .pagination a");

        paginationLinks.forEach(link => {
          link.addEventListener("click", function (event) {
            event.preventDefault();
            resultsContainer.innerHTML = "<p>Loading results...</p>";

            const originalPageLink = Array.from(document.querySelectorAll("#search-modal .pagination a"))
              .find(modalLink => modalLink.textContent === link.textContent);

            if (originalPageLink) {
              originalPageLink.click();
              setTimeout(loadPageResults, 500);
            }
          });
        });
      }
    }
  });
</script>

<style>
/* REQUIRED STYLES. DO NOT ADJUST */
  #search-modal,
  .modal-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .modal-backdrop {
    background-color: transparent !important;
    pointer-events: none !important;
  }
  #custom-results {
    margin-top: 20px;
    padding: 10px;
  }
/* END OF REQUIRED STYLES */

/* Style for each search result */
  .search-results .search-result {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
  }

/* Style for result titles (links) */
  .search-results .search-result h5 {
    margin: 0 0 8px;
    font-size: 1.1em;
    font-weight: bold;
  }

  .search-results .search-result h5 a {
    text-decoration: none;
    color: #007bff;
  }

/* Hover effect for links */
  .search-results .search-result h5 a:hover {
    text-decoration: underline;
  }

/* Style for result descriptions */
  .search-results .search-result p {
    margin: 0;
    color: #555;
    font-size: 0.95em;
  }

/* Minimal style adjustments for uniformity */
  .search-results .search-result .poc-type {
    display: none;
  }

/* Subtle divider for pagination area */
  .search-pager {
    margin-top: 15px;
    padding-top: 10px;
  }

/* Style pagination links */
  .search-pager .pagination li {
    display: inline;
    margin-right: 5px;
  }

  .search-pager .pagination a {
    color: #000;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background-color: #f8f9fa;
  }

  .search-pager .pagination .active a {
    background-color: #008265;
    color: #fff !important;
    border-color: #007bff;
  }

  .search-pager .pagination a:hover {
    background-color: #e0e0e0;
    color: #000 !important;
  }
</style>