"use strict";

// Skip ALL Darkify initialization when this page is running inside a frontend
// iframe and the parent site has "Frontend Iframe Dark Mode" turned OFF.
// This is the only reliable guard for same-origin embedded pages that have
// their own copy of Darkify running — they must not self-initialize dark mode.
var _dkf_iframe_disabled = (
    window !== window.top &&
    typeof darkify_is_this_admin_panel !== "undefined" &&
    darkify_is_this_admin_panel !== "1" &&
    typeof darkify_enable_frontend_iframe_dark_mode !== "undefined" &&
    darkify_enable_frontend_iframe_dark_mode !== "1"
);

let has_process_run_at_least_once = false;
let old_transition = "";
let has_background_img_url = false;
let darken_level = parseInt(darkify_bg_image_darken_to) / 100;
darken_level = darken_level.toFixed(1);
let darkify_secondary_bg_color = "";

darkify_init_keyboard_shortcut_listener();
darkify_init_os_mode_change_listener();

const darkify_observer = new MutationObserver(function (mutationsList) {
  darkify_init_processes();

  darkify_process_iframes(); // ✅ darkify proceed iframe
});

const elements_class_changed = new MutationObserver((mutationsList) => {
  if (document.readyState !== "loading") {
    mutationsList.forEach((mutation) => {
      const target = mutation.target;

      if (target.classList.contains("darkify_processed")) {
        if (!target.hasAttribute("data-darkify_preserved_classes")) {
          target.dataset.darkify_preserved_classes =
            target.classList.toString();
        } else {
          if (
            target.dataset.darkify_preserved_classes ===
            target.classList.toString()
          ) {
            return;
          }
        }

        target.dataset.darkify_preserved_classes = target.classList.toString();
        elements_class_changed.disconnect();
        target.classList.remove("darkify_processed");
        darkify_process_element(target);

        document
          .querySelectorAll(
            "*:not(head, title, link, meta, script, style, defs, filter)",
          )
          .forEach((element) => {
            elements_class_changed.observe(element, {
              attributes: true,
              attributeFilter: ["class"],
            });
          });
      }
    });
  }
});

const dark_mode_status_changed = new MutationObserver((mutationsList) => {
  mutationsList.forEach((mutation) => {
    if (mutation.type === "attributes" && mutation.attributeName === "class") {
      document
        .querySelectorAll(
          "*:not(head, title, link, meta, script, style, defs, filter)",
        )
        .forEach((element) => {
          if (element.classList.contains("darkify_processed")) {
            if (
              darkify_disallowed_elements.length > 0 &&
              element.matches(darkify_disallowed_elements)
            ) {
              return;
            }
            if (darkify_enable_bg_image_darken === "1") {
              darkify_darken_bg_image(element, darken_level);
            }
            if (
              (darkify_enable_low_image_brightness === "1" ||
                darkify_enable_image_grayscale === "1") &&
              element.nodeName.toLowerCase() === "img"
            ) {
              darkify_img_brightness_and_grayscale(element);
            }
            if (
              darkify_enable_invert_inline_svg === "1" &&
              element.nodeName.toLowerCase() === "svg"
            ) {
              darkify_invert_inline_svg(element);
            }
            if (
              darkify_enable_low_video_brightness === "1" ||
              darkify_enable_video_grayscale === "1"
            ) {
              if (element.nodeName.toLowerCase() === "video") {
                darkify_video_brightness_and_grayscale(element);
              }
              if (
                element.nodeName.toLowerCase() === "iframe" &&
                element.getAttribute("src") != null
              ) {
                const srcAttribute = element.getAttribute("src");
                if (
                  srcAttribute.includes("youtube") ||
                  srcAttribute.includes("vimeo") ||
                  srcAttribute.includes("dailymotion")
                ) {
                  darkify_video_brightness_and_grayscale(element);
                }
              }
            }
            if (element.hasAttribute("data-darkify_alpha_bg")) {
              darkify_fix_background_color_alpha(element);
            }
          }
        });
    }
  });
});

function darkify_change_state() {
  if (darkify_is_this_admin_panel === "1") {
    localStorage.darkify_admin_panel_last_state = document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
      ? "1"
      : "0";
  } else {
    localStorage.darkify_last_state = document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
      ? "1"
      : "0";
  }
}

function darkify_switch_trigger() {
  if (!has_process_run_at_least_once) {
    darkify_init_processes();
    darkify_init_observer();
  }

  const htmlElement = document.getElementsByTagName("html")[0];

  if (htmlElement.classList.contains("darkify_dark_mode_enabled")) {
    htmlElement.classList.remove("darkify_dark_mode_enabled");
  } else {
    htmlElement.classList.add("darkify_dark_mode_enabled");
  }

  darkify_change_state();

  darkify_process_iframes(); // ✅ darkify proceed iframe
}

function darkify_theme_select(theme) {
  if (!darkify_is_block_editor_context()) return;
  if (!has_process_run_at_least_once) {
    darkify_init_processes();
    darkify_init_observer();
  }

  const htmlElement = document.documentElement;

  // ✅ Remove all previous theme classes (IMPORTANT)
  htmlElement.classList.forEach((cls) => {
    if (cls.startsWith("darkify-")) {
      htmlElement.classList.remove(cls);
    }
  });

  // ✅ Save in localStorage
  localStorage.darkify_selected_theme = theme;

  // ✅ Update all select dropdowns
  darkify_update_theme_selectors(theme);

  if (darkify_is_this_admin_panel === "1") {
    if (localStorage.darkify_admin_panel_last_state === "1") {
      htmlElement.classList.add("darkify_dark_mode_enabled");
      htmlElement.classList.add("darkify-" + theme);
    } else {
      htmlElement.classList.remove("darkify_dark_mode_enabled");
    }
  }

  darkify_change_state();

  // Apply the new palette to the parent first, then sync iframes so they pick
  // up the updated variables rather than the previous palette.
  darkify_apply_palette(theme);

  darkify_process_iframes();
}

document.addEventListener("DOMContentLoaded", function () {
  if (!darkify_is_block_editor_context()) return;

  let theme = localStorage.getItem("darkify_selected_theme") || "set1";

  darkify_theme_select(theme);
});

function darkify_update_theme_selectors(theme) {
  document
    .querySelectorAll(".darkify-theme-selector")
    .forEach(function (select) {
      if (select.value !== theme) {
        select.value = theme;
      }
    });
}

function darkify_is_block_editor_context() {
  return (
    typeof document !== "undefined" &&
    document.body &&
    (document.body.classList.contains("block-editor-page") ||
      document.querySelector(".edit-post-visual-editor") !== null ||
      document.querySelector(".block-editor") !== null)
  );
}

function darkify_restore_selected_theme() {
  if (!darkify_is_block_editor_context()) return;
  const storedTheme = localStorage.darkify_selected_theme;

  if (!storedTheme) return;

  darkify_update_theme_selectors(storedTheme);
  darkify_theme_select(storedTheme);
}

function darkify_apply_palette(theme) {
  if (!darkify_is_block_editor_context()) return;
  const palettes = {
    set1: {
      bg: "#0F0F0F",
      secondary_bg: "#171717",
      text_color: "#BEBEBE",
      link_color: "#E7E7E7",
      link_hover_color: "#BEBEBE",
      input_bg: "#2D2D2D",
      input_text_color: "#BEBEBE",
      input_placeholder_color: "#BEBEBE",
      border_color: "#4A4A4A",
      btn_text_color: "#BEBEBE",
      btn_bg: "#4A4A4A",
      btn_text_hover_color: "#BEBEBE",
      btn_hover_bg: "#2D2D2D",
    },
    set3: {
      bg: "#211e3c",
      secondary_bg: "#302C57",
      text_color: "#B1BBD8",
      link_color: "#8071fb",
      link_hover_color: "#B1BBD8",
      input_bg: "#2A264D",
      input_text_color: "#B1BBD8",
      input_placeholder_color: "#B1BBD8",
      border_color: "#4E478D",
      btn_text_color: "#B1BBD8",
      btn_bg: "#4E478D",
      btn_text_hover_color: "#B1BBD8",
      btn_hover_bg: "#2A264D",
    },

    set6: {
      bg: "#082032",
      secondary_bg: "#061825",
      text_color: "#B5D9F3",
      link_color: "#61bbff",
      link_hover_color: "#B5D9F3",
      input_bg: "#0E3755",
      input_text_color: "#B5D9F3",
      input_placeholder_color: "#B5D9F3",
      border_color: "#144E78",
      btn_text_color: "#B5D9F3",
      btn_bg: "#144E78",
      btn_text_hover_color: "#B5D9F3",
      btn_hover_bg: "#0E3755",
    },

    set9: {
      bg: "#04261d",
      secondary_bg: "#021e16",
      text_color: "#C1D2BB",
      link_color: "#00d29a",
      link_hover_color: "#C1D2BB",
      input_bg: "#073d2f",
      input_text_color: "#C1D2BB",
      input_placeholder_color: "#C1D2BB",
      border_color: "#095541",
      btn_text_color: "#C1D2BB",
      btn_bg: "#095541",
      btn_text_hover_color: "#C1D2BB",
      btn_hover_bg: "#073d2f",
    },

    set10: {
      bg: "#171004",
      secondary_bg: "#211706",
      text_color: "#E0D2BD",
      link_color: "#e09525",
      link_hover_color: "#E0D2BD",
      input_bg: "#372911",
      input_text_color: "#E0D2BD",
      input_placeholder_color: "#E0D2BD",
      border_color: "#5D4010",
      btn_text_color: "#E0D2BD",
      btn_bg: "#5D4010",
      btn_text_hover_color: "#E0D2BD",
      btn_hover_bg: "#372911",
    },
  };

  const palette = palettes[theme] || palettes["set1"];

  document.documentElement.style.setProperty(
    "--darkify_dark_mode_bg",
    palette.bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_secondary_bg",
    palette.secondary_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_text_color",
    palette.text_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_link_color",
    palette.link_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_link_hover_color",
    palette.link_hover_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_input_bg",
    palette.input_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_input_text_color",
    palette.input_text_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_input_placeholder_color",
    palette.input_placeholder_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_border_color",
    palette.border_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_bg",
    palette.btn_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_text_color",
    palette.btn_text_color,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_hover_bg",
    palette.btn_hover_bg,
  );
  document.documentElement.style.setProperty(
    "--darkify_dark_mode_btn_text_hover_color",
    palette.btn_text_hover_color,
  );
}

// ---------------------------------------------------------------------------
// Iframe dark mode
//
// Same-origin iframes are isolated documents: the parent's :root CSS variables,
// stylesheet and dark-mode class do not cascade into them. To keep an iframe in
// sync with the parent theme we mirror three things into the iframe document:
//   1. the darkify_dark_mode_enabled class on <html>
//   2. the theme CSS variables (kept live so colour/palette changes propagate)
//   3. the plugin stylesheet, plus a run of the element classifier so inner
//      content (cards, sections, etc.) is darkened, not just <body>/<a>/inputs
// Colour changes only need the variables refreshed; the var-driven class rules
// then re-theme everything instantly without re-walking the DOM.
// ---------------------------------------------------------------------------

const DARKIFY_IFRAME_THEME_VARS = [
  "--darkify_dark_mode_bg", "--darkify_dark_mode_secondary_bg",
  "--darkify_dark_mode_text_color", "--darkify_dark_mode_link_color",
  "--darkify_dark_mode_link_hover_color", "--darkify_dark_mode_input_bg",
  "--darkify_dark_mode_input_text_color", "--darkify_dark_mode_input_placeholder_color",
  "--darkify_dark_mode_border_color", "--darkify_dark_mode_btn_bg",
  "--darkify_dark_mode_btn_text_color", "--darkify_dark_mode_btn_hover_bg",
  "--darkify_dark_mode_btn_text_hover_color",
];

// Tracks per-iframe-document observers so we don't attach duplicates and can
// react to dynamically injected content (e.g. React/SPA pages inside the frame).
const darkify_iframe_doc_observers = new WeakMap();

// Tracks per-iframe-document "keep our style last" observers so we attach only
// one per document. Keyed on iframeDoc.
const darkify_editor_head_watchers = new WeakMap();

// Serialise the parent's current theme variables as a :root {} rule. Computed
// style is used so the value reflects the active theme regardless of whether it
// was set inline (block editor) or via an inline <style> block (frontend).
function darkify_serialize_root_vars() {
  const inline = document.documentElement.style;
  const computed = getComputedStyle(document.documentElement);
  let rootVars = ":root {";
  DARKIFY_IFRAME_THEME_VARS.forEach(function (varName) {
    const val = (
      inline.getPropertyValue(varName) || computed.getPropertyValue(varName)
    ).trim();
    if (val) rootVars += varName + ": " + val + ";";
  });
  return rootVars + "}";
}

// Whether dark mode may apply to iframe content. The "Frontend Iframe Dark Mode"
// option only affects the frontend — the Gutenberg editor canvas is unaffected.
// Treated as enabled when the flag is absent (backward compatible: existing users
// who haven't re-saved settings keep the previous default-on behaviour).
function darkify_iframe_dark_enabled() {
  if (darkify_is_this_admin_panel === "1") return true;
  return (
    typeof darkify_enable_frontend_iframe_dark_mode === "undefined" ||
    darkify_enable_frontend_iframe_dark_mode === "1"
  );
}

// Build the theme payload broadcast to iframes via postMessage. This is the
// only channel that works for CROSS-ORIGIN iframes (e.g. an app served from a
// different host/port), where the browser forbids touching contentDocument.
// The receiving page applies these variables to its own theme.
function darkify_build_theme_payload() {
  const inline = document.documentElement.style;
  const computed = getComputedStyle(document.documentElement);
  const vars = {};
  DARKIFY_IFRAME_THEME_VARS.forEach(function (varName) {
    const val = (
      inline.getPropertyValue(varName) || computed.getPropertyValue(varName)
    ).trim();
    if (val) vars[varName] = val;
  });

  return {
    source: "darkify",
    type: "darkify-theme",
    // Honour the Frontend Iframe Dark Mode option here too, so the handshake
    // reply can't push dark mode into a cross-origin iframe when it is disabled.
    enabled:
      darkify_iframe_dark_enabled() &&
      document.documentElement.classList.contains("darkify_dark_mode_enabled"),
    vars: vars,
  };
}

// Post the current theme to an iframe window. Works regardless of origin and is
// silently ignored by frames that don't run the darkify receiver snippet.
function darkify_post_theme_to_iframe(iframe, payload) {
  try {
    const win = iframe.contentWindow;
    if (win) win.postMessage(payload || darkify_build_theme_payload(), "*");
  } catch (e) {
    // ignore — frame not ready / inaccessible window reference
  }
}

// Copy / refresh the theme variables inside an iframe document. Cheap and
// idempotent — called on every theme change so colours stay in sync.
function darkify_sync_iframe_vars(iframeDoc) {
  const head = iframeDoc.head || iframeDoc.documentElement;
  let style = iframeDoc.getElementById("darkify-iframe-vars");
  if (!style) {
    style = iframeDoc.createElement("style");
    style.id = "darkify-iframe-vars";
    head.appendChild(style);
  }
  style.textContent = darkify_serialize_root_vars();
}

// Resolve the URL of the plugin's main stylesheet as loaded in the parent, so
// the same var-driven .darkify_* rules can be injected into the iframe.
function darkify_get_main_css_href() {
  const link = document.querySelector('link[href*="client_main"]');
  return link ? link.href : null;
}

// Inject the plugin stylesheet (full class-based engine rules) plus a small
// baseline so the frame is themed immediately, before/independent of the
// element classifier pass.
function darkify_inject_css_into_iframe(iframeDoc) {
  const head = iframeDoc.head || iframeDoc.documentElement;

  if (!iframeDoc.getElementById("darkify-iframe-main-css")) {
    const href = darkify_get_main_css_href();
    if (href) {
      const link = iframeDoc.createElement("link");
      link.id = "darkify-iframe-main-css";
      link.rel = "stylesheet";
      link.href = href;
      head.appendChild(link);
    }
  }

  if (iframeDoc.getElementById("darkify-iframe-css")) return;

  const style = iframeDoc.createElement("style");
  style.id = "darkify-iframe-css";
  style.textContent = `
    html.darkify_dark_mode_enabled,
    html.darkify_dark_mode_enabled body {
      background: var(--darkify_dark_mode_secondary_bg) !important;
      color: var(--darkify_dark_mode_text_color) !important;
    }

    html.darkify_dark_mode_enabled a {
      color: var(--darkify_dark_mode_link_color) !important;
    }
    html.darkify_dark_mode_enabled a:hover {
      color: var(--darkify_dark_mode_link_hover_color) !important;
    }

    html.darkify_dark_mode_enabled input,
    html.darkify_dark_mode_enabled select,
    html.darkify_dark_mode_enabled textarea {
      background: var(--darkify_dark_mode_input_bg) !important;
      color: var(--darkify_dark_mode_input_text_color) !important;
      border-color: var(--darkify_dark_mode_border_color) !important;
    }

    html.darkify_dark_mode_enabled input::placeholder,
    html.darkify_dark_mode_enabled textarea::placeholder {
      color: var(--darkify_dark_mode_input_placeholder_color) !important;
    }

    /* TinyMCE editor body */
    html.darkify_dark_mode_enabled body#tinymce,
    html.darkify_dark_mode_enabled .mce-content-body {
      background: var(--darkify_dark_mode_secondary_bg) !important;
      color: var(--darkify_dark_mode_text_color) !important;
    }
  `;
  head.appendChild(style);
}
function darkify_inject_block_editor_css_into_iframe(iframeDoc) {
  const head = iframeDoc.head || iframeDoc.documentElement;
  let style = iframeDoc.getElementById("darkify-block-editor-css");
  if (!style) {
    style = iframeDoc.createElement("style");
    style.id = "darkify-block-editor-css";
  }

  style.textContent = `
    /* ── Primary containers (covers all themes) ─────────────────── */
    html.darkify_dark_mode_enabled,
    html.darkify_dark_mode_enabled body,
    html.darkify_dark_mode_enabled body.editor-styles-wrapper,
    html.darkify_dark_mode_enabled body.block-editor-iframe__body,
    html.darkify_dark_mode_enabled .editor-styles-wrapper,
    html.darkify_dark_mode_enabled .is-root-container,
    html.darkify_dark_mode_enabled .wp-block-post-content,
    html.darkify_dark_mode_enabled .block-editor-block-list__layout,
    html.darkify_dark_mode_enabled .block-editor-iframe__body,
    html.darkify_dark_mode_enabled .wp-site-blocks,
    html.darkify_dark_mode_enabled .entry-content,
    html.darkify_dark_mode_enabled .site-content {
      background: var(--darkify_dark_mode_bg) !important;
      background-color: var(--darkify_dark_mode_bg) !important;
      color: var(--darkify_dark_mode_text_color) !important;
    }

    /* ── Override CSS variables used by themes to drive backgrounds ─
       Kadence: --global-palette9 (bg), --global-palette1 (text)
       WordPress Global Styles: --wp--style--color--background        */
    html.darkify_dark_mode_enabled body {
      --wp--style--color--background: var(--darkify_dark_mode_bg);
      --wp--preset--color--background: var(--darkify_dark_mode_bg);
      --wp--preset--color--base: var(--darkify_dark_mode_bg);
      --wp--preset--color--contrast: var(--darkify_dark_mode_text_color);
      --global-palette9: var(--darkify_dark_mode_bg);
      --global-palette8: var(--darkify_dark_mode_secondary_bg);
      --global-palette7: var(--darkify_dark_mode_secondary_bg);
      --global-palette1: var(--darkify_dark_mode_text_color);
      --global-palette2: var(--darkify_dark_mode_text_color);
      --global-palette3: var(--darkify_dark_mode_link_color);
      --global-palette6: var(--darkify_dark_mode_border_color);
    }

    /* ── Text elements ──────────────────────────────────────────── */
    html.darkify_dark_mode_enabled p,
    html.darkify_dark_mode_enabled h1,
    html.darkify_dark_mode_enabled h2,
    html.darkify_dark_mode_enabled h3,
    html.darkify_dark_mode_enabled h4,
    html.darkify_dark_mode_enabled h5,
    html.darkify_dark_mode_enabled h6,
    html.darkify_dark_mode_enabled li,
    html.darkify_dark_mode_enabled td,
    html.darkify_dark_mode_enabled th,
    html.darkify_dark_mode_enabled blockquote,
    html.darkify_dark_mode_enabled pre,
    html.darkify_dark_mode_enabled span {
      color: var(--darkify_dark_mode_text_color) !important;
    }

    /* ── Links ──────────────────────────────────────────────────── */
    html.darkify_dark_mode_enabled a {
      color: var(--darkify_dark_mode_link_color) !important;
    }
    html.darkify_dark_mode_enabled a:hover {
      color: var(--darkify_dark_mode_link_hover_color) !important;
    }

    /* ── Form elements ──────────────────────────────────────────── */
    html.darkify_dark_mode_enabled input,
    html.darkify_dark_mode_enabled select,
    html.darkify_dark_mode_enabled textarea {
      background: var(--darkify_dark_mode_input_bg) !important;
      color: var(--darkify_dark_mode_input_text_color) !important;
      border-color: var(--darkify_dark_mode_border_color) !important;
    }
    html.darkify_dark_mode_enabled input::placeholder,
    html.darkify_dark_mode_enabled textarea::placeholder {
      color: var(--darkify_dark_mode_input_placeholder_color) !important;
    }

    /* ── Blocks ─────────────────────────────────────────────────── */
    html.darkify_dark_mode_enabled .wp-block {
      color: var(--darkify_dark_mode_text_color) !important;
    }
    html.darkify_dark_mode_enabled img {
      filter: brightness(80%);
    }
  `;

  // Always move to end of <head> so our rules load after any theme stylesheet.
  // head.appendChild is a no-op-safe move: if the element is already in the
  // tree it is first removed then re-inserted at the end.
  head.appendChild(style);

  // Keep it last: observe for new <link>/<style> tags Kadence (or any theme)
  // injects after us and immediately re-append our style to the end.
  darkify_keep_editor_style_last(iframeDoc, style);
}

// MutationObserver that keeps darkify-block-editor-css as the last stylesheet
// in the editor iframe <head>. Called once per iframeDoc (guarded by WeakMap).

function darkify_keep_editor_style_last(iframeDoc, ourStyle) {
  if (darkify_editor_head_watchers.has(iframeDoc)) return;
  const head = iframeDoc.head;
  if (!head) return;

  const obs = new MutationObserver(function () {
    // If our style is already last, nothing to do.
    if (head.lastElementChild === ourStyle) return;
    // A new sheet was added after ours — move us to the end.
    head.appendChild(ourStyle);
  });

  obs.observe(head, { childList: true });
  darkify_editor_head_watchers.set(iframeDoc, obs);
}

// Run the element classifier across an iframe document and keep watching it for
// dynamically added nodes. window.getComputedStyle resolves styles of
// same-origin iframe elements, so the existing engine works unchanged.
function darkify_run_engine_on_iframe(iframeDoc) {
  const selector =
    "* :not(head, title, link, meta, script, style, defs, filter, .darkify_processed)";

  const processAll = function () {
    iframeDoc.querySelectorAll(selector).forEach(function (element) {
      try {
        darkify_process_element(element);
      } catch (e) {
        // skip elements that can't be processed
      }
    });
  };

  processAll();

  if (!darkify_iframe_doc_observers.has(iframeDoc)) {
    const observer = new MutationObserver(processAll);
    observer.observe(iframeDoc.documentElement, {
      childList: true,
      subtree: true,
    });
    darkify_iframe_doc_observers.set(iframeDoc, observer);
  }
}

// Apply CSS invert filter to a cross-origin iframe element as a fallback dark
// mode technique — the only browser-allowed approach when the embedded site
// does not run the darkify receiver script.
function darkify_apply_filter_to_iframe(iframe, enabled) {
  if (enabled) {
    iframe.style.filter = "brightness(0.6)";
  } else {
    iframe.style.filter = "";
  }
}

// Detect whether an iframe is cross-origin by attempting to access its document.
function darkify_is_cross_origin_iframe(iframe) {
  try {
    // Accessing contentDocument throws SecurityError for cross-origin frames.
    void (iframe.contentDocument || iframe.contentWindow?.document);
    return false;
  } catch (e) {
    return true;
  }
}
function darkify_apply_dark_to_iframe(iframe) {
  const isEditorCanvas = iframe.name === "editor-canvas";
  if (darkify_is_this_admin_panel === "1" && !isEditorCanvas) return;

  const enabled = document.documentElement.classList.contains(
    "darkify_dark_mode_enabled",
  );

  // Same-origin path: directly inject styles + run the engine. Throws a
  // SecurityError for cross-origin frames, which we swallow — those are handled
  // via postMessage + CSS filter fallback below.
  const applyDirect = function () {
    let iframeDoc;
    try {
      iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
    } catch (e) {
      // Cross-origin: apply CSS filter to the iframe element as fallback.
      if (!isEditorCanvas && darkify_is_this_admin_panel !== "1") {
        darkify_apply_filter_to_iframe(
          iframe,
          document.documentElement.classList.contains(
            "darkify_dark_mode_enabled",
          ),
        );
      }
      return;
    }
    if (!iframeDoc || !iframeDoc.documentElement) return;

    // Same-origin: clear any filter that was applied before we could access the doc.
    iframe.style.filter = "";

    if (enabled) {
      iframeDoc.documentElement.classList.add("darkify_dark_mode_enabled");
      darkify_inject_css_into_iframe(iframeDoc);
      darkify_sync_iframe_vars(iframeDoc);
      if (isEditorCanvas) {
        darkify_inject_block_editor_css_into_iframe(iframeDoc);
      } else if (darkify_is_this_admin_panel !== "1") {
        darkify_run_engine_on_iframe(iframeDoc);
      }
    } else {
      iframeDoc.documentElement.classList.remove("darkify_dark_mode_enabled");
    }
  };

  // Always broadcast the current theme first. This MUST run independently of the
  // (throwing) contentDocument access below, otherwise live toggles/palette
  // changes never reach a cross-origin iframe — they'd only sync on reload.
  darkify_post_theme_to_iframe(iframe);

  // Re-broadcast + re-apply on every (re)load/navigation so content swapped
  // inside the frame is re-themed. Bind once per iframe to avoid stacking.
  if (!iframe.dataset.darkifyIframeBound) {
    iframe.dataset.darkifyIframeBound = "1";
    iframe.addEventListener("load", function () {
      darkify_post_theme_to_iframe(iframe);
      applyDirect();
    });
  }

  applyDirect();
}
function darkify_process_iframes() {
  if (darkify_is_this_admin_panel === "1") {
    // Admin panel: only target the Gutenberg editor-canvas iframe
    const editorCanvas = document.querySelector('iframe[name="editor-canvas"]');
    if (editorCanvas) darkify_apply_dark_to_iframe(editorCanvas);
    return;
  }

  // Respect the "Frontend Iframe Dark Mode" setting.
  // Existing users without this option saved get the default-on behaviour.
  if (!darkify_iframe_dark_enabled()) return;

  document.querySelectorAll("iframe").forEach(darkify_apply_dark_to_iframe);
}

// Watch the parent for theme changes (dark toggle, palette switch, customizer
// live edits) and re-sync every iframe. darkify_process_iframes re-runs the
// var sync, which is what propagates new colours into the frames.
let darkify_parent_theme_observer = null;
let darkify_iframe_sync_scheduled = false;
function darkify_schedule_iframe_sync() {
  if (darkify_iframe_sync_scheduled) return;
  darkify_iframe_sync_scheduled = true;
  requestAnimationFrame(function () {
    darkify_iframe_sync_scheduled = false;
    darkify_process_iframes();
  });
}
function darkify_watch_parent_theme() {
  if (darkify_parent_theme_observer) return;

  darkify_parent_theme_observer = new MutationObserver(darkify_schedule_iframe_sync);

  // <html> class (dark on/off) and inline style (block-editor palette vars).
  darkify_parent_theme_observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["class", "style"],
  });

  // Frontend palette variables live in an inline <style> block; watch its text
  // so customizer / dynamic edits to the :root variables are picked up too.
  const inlineCss = document.querySelector("style.darkify_inline_css");
  if (inlineCss) {
    darkify_parent_theme_observer.observe(inlineCss, {
      childList: true,
      characterData: true,
      subtree: true,
    });
  }

  // In the admin panel, Gutenberg inserts the editor-canvas iframe into the DOM
  // asynchronously — after the initial darkify_process_iframes() call has
  // already run. Watch document.body so we re-sync the moment it appears.
  if (darkify_is_this_admin_panel === "1" && document.body) {
    var darkify_canvas_dom_observer = new MutationObserver(function () {
      if (document.querySelector('iframe[name="editor-canvas"]')) {
        darkify_schedule_iframe_sync();
      }
    });
    darkify_canvas_dom_observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }
}

if (!_dkf_iframe_disabled) {
  if (document.readyState !== "loading") {
    darkify_watch_parent_theme();
  } else {
    document.addEventListener("DOMContentLoaded", darkify_watch_parent_theme);
  }
}

// Handshake: an iframe that loads after — or before — the parent is ready can
// ask for the current theme, and we reply to that frame directly. This makes
// initial sync reliable regardless of which side finishes loading first.
window.addEventListener("message", function (event) {
  const data = event.data;
  if (!data || data.source !== "darkify" || data.type !== "darkify-request-theme")
    return;
  try {
    if (event.source) {
      event.source.postMessage(darkify_build_theme_payload(), "*");
    }
  } catch (e) {
    // ignore unreachable source window
  }
});

function darkify_init_keyboard_shortcut_listener() {
  if (darkify_enable_keyboard_shortcut === "1") {
    // The combo is a normalized string set in the admin (e.g. "ctrl+alt+d"):
    // modifiers in any order plus one key. Match on the PHYSICAL key (event.code)
    // so macOS Option-diacritics don't break it.
    var combo =
      typeof darkify_keyboard_shortcut_keys === "string" &&
      darkify_keyboard_shortcut_keys
        ? darkify_keyboard_shortcut_keys.toLowerCase()
        : "ctrl+alt+d";
    var parts = combo.split("+");
    var need_ctrl = parts.indexOf("ctrl") !== -1;
    var need_alt = parts.indexOf("alt") !== -1;
    var need_shift = parts.indexOf("shift") !== -1;
    var need_meta = parts.indexOf("meta") !== -1;
    var need_key = parts[parts.length - 1];
    var expected_code = null;
    if (/^[a-z]$/.test(need_key)) {
      expected_code = "key" + need_key;
    } else if (/^[0-9]$/.test(need_key)) {
      expected_code = "digit" + need_key;
    }
    document.onkeydown = function (event) {
      var key_matches =
        (expected_code &&
          typeof event.code === "string" &&
          event.code.toLowerCase() === expected_code) ||
        (typeof event.key === "string" &&
          event.key.toLowerCase() === need_key);
      if (
        event.ctrlKey === need_ctrl &&
        event.altKey === need_alt &&
        event.shiftKey === need_shift &&
        event.metaKey === need_meta &&
        key_matches
      ) {
        event.preventDefault();
        darkify_switch_trigger();
      }
    };
  }
}

function darkify_init_os_mode_change_listener() {
  if (darkify_is_this_admin_panel === "0" && darkify_enable_os_aware === "1") {
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (event) => {
        const mode = event.matches ? "dark" : "light";
        const htmlElement = document.getElementsByTagName("html")[0];
        if (mode === "dark") {
          htmlElement.classList.add("darkify_dark_mode_enabled");
        } else if (mode === "light") {
          htmlElement.classList.remove("darkify_dark_mode_enabled");
        }

        darkify_change_state();
      });
  }
}

function darkify_init_alternative_dark_mode_switch() {
  if (darkify_alternative_dark_mode_switch.length > 0) {
    const elements = document.querySelectorAll(
      darkify_alternative_dark_mode_switch,
    );
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i];
      element.addEventListener("click", () => {
        darkify_switch_trigger();
      });
    }
  }
}

function darkify_init_attention_effect() {
  if (darkify_enable_switch_attention !== "1") return;
  if (!darkify_switch_attention_effect || darkify_switch_attention_effect === "none") return;
  var switchEl = document.getElementById("darkify_switch_" + darkify_switch_unique_id);
  if (switchEl) {
    switchEl.classList.add("darkify_attention_" + darkify_switch_attention_effect);
  }
}

function get_bg_color_to_preserve(element, fromDataset) {
  let color = window.getComputedStyle(element, null).backgroundColor;
  if (!fromDataset) {
    color = element.dataset.darkify_preserved_bg;
  }
  if (
    (color === "transparent" ||
      color === "rgba(0, 0, 0, 0)" ||
      color === "rgba(255,255,255,0)") &&
    element.parentNode.nodeType === 1
  ) {
    color = get_bg_color_to_preserve(element.parentNode, false);
  } else if (
    element.parentNode.nodeType === 1 &&
    element.parentNode.hasAttribute("data-darkify_preserved_bg") &&
    window.getComputedStyle(element.parentNode, null).backgroundColor === color
  ) {
    color = get_bg_color_to_preserve(element.parentNode, false);
  }
  return color;
}

function get_txt_color_to_preserve(element, fromDataset) {
  let color = window.getComputedStyle(element, null).color;
  if (!fromDataset) {
    color = element.dataset.darkify_preserved_color;
  }
  if (
    (color === "transparent" ||
      color === "rgba(0, 0, 0, 0)" ||
      color === "rgba(255,255,255,0)") &&
    element.parentNode.nodeType === 1
  ) {
    color = get_txt_color_to_preserve(element.parentNode, false);
  } else if (
    element.parentNode.nodeType === 1 &&
    element.parentNode.hasAttribute("data-darkify_preserved_color") &&
    window.getComputedStyle(element.parentNode, null).color === color
  ) {
    color = get_txt_color_to_preserve(element.parentNode, false);
  }
  return color;
}

function darkify_darken_bg_image(element, level) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    const mainStyle = window.getComputedStyle(element, null);
    const beforeStyle = window.getComputedStyle(element, ":before");
    const afterStyle = window.getComputedStyle(element, ":after");

    if (
      mainStyle.backgroundImage !== "none" &&
      mainStyle.backgroundImage.includes("url") &&
      !mainStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
    ) {
      element.style.setProperty(
        "background-image",
        "linear-gradient(rgba(0, 0, 0, " +
          level +
          "), rgba(0, 0, 0, " +
          level +
          ")), " +
          mainStyle.backgroundImage,
      );
    }

    // Process :before pseudo-element
    if (
      beforeStyle.backgroundImage !== "none" &&
      beforeStyle.backgroundImage.includes("url") &&
      !beforeStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
    ) {
      // Create a style element for this specific element
      const styleId = `darkify-before-${Math.random()
        .toString(36)
        .substr(2, 9)}`;
      element.setAttribute("data-darkify-style-id", styleId);

      let styleElement = document.getElementById(styleId);
      if (!styleElement) {
        styleElement = document.createElement("style");
        styleElement.id = styleId;
        document.head.appendChild(styleElement);
      }

      // Store original background for reset
      element.dataset.darkifyOriginalBeforeBg = beforeStyle.backgroundImage;

      // Add the styles for :before
      const cssText = `
        .darkify_dark_mode_enabled [data-darkify-style-id="${styleId}"]::before {
          background-image: linear-gradient(rgba(0, 0, 0, ${level}), rgba(0, 0, 0, ${level})), ${beforeStyle.backgroundImage} !important;
        }
      `;
      styleElement.textContent = cssText;

      // Ensure position relative on parent
      if (window.getComputedStyle(element).position === "static") {
        element.style.position = "relative";
      }
    }
    // Process :after pseudo-element
    if (
      afterStyle.backgroundImage !== "none" &&
      afterStyle.backgroundImage.includes("url") &&
      !afterStyle.backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
    ) {
      // Create a style element for this specific element
      const styleId = `darkify-after-${Math.random()
        .toString(36)
        .substr(2, 9)}`;
      element.setAttribute("data-darkify-style-id", styleId);

      let styleElement = document.getElementById(styleId);
      if (!styleElement) {
        styleElement = document.createElement("style");
        styleElement.id = styleId;
        document.head.appendChild(styleElement);
      }

      // Store original background for reset
      element.dataset.darkifyOriginalAfterBg = afterStyle.backgroundImage;

      // Add the styles for :after
      const cssText = `
        .darkify_dark_mode_enabled [data-darkify-style-id="${styleId}"]::after {
          background-image: linear-gradient(rgba(0, 0, 0, ${level}), rgba(0, 0, 0, ${level})), ${afterStyle.backgroundImage} !important;
        }
      `;
      styleElement.textContent = cssText;

      // Ensure position relative on parent
      if (window.getComputedStyle(element).position === "static") {
        element.style.position = "relative";
      }
    }
  } else if (
    window.getComputedStyle(element, null).backgroundImage !== "none" &&
    window
      .getComputedStyle(element, null)
      .backgroundImage.includes("rgba(0, 0, 0, " + level + ")")
  ) {
    element.style.setProperty(
      "background-image",
      window
        .getComputedStyle(element, null)
        .backgroundImage.replace(
          "linear-gradient(rgba(0, 0, 0, " +
            level +
            "), rgba(0, 0, 0, " +
            level +
            ")), ",
          "",
        ),
    );
  }
}

function darkify_img_brightness_and_grayscale(element) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    if (
      !element.classList.contains("darkify_changed_brightness_and_grayscale")
    ) {
      element.dataset.darkify_preserved_filter = element.style.filter;
      element.classList.add("darkify_changed_brightness_and_grayscale");

      if (
        darkify_enable_low_image_brightness === "1" &&
        darkify_enable_image_grayscale === "1"
      ) {
        element.style.filter =
          "brightness(" +
          darkify_image_brightness_to +
          "%)" +
          " " +
          "grayscale(" +
          darkify_image_grayscale_to +
          "%)";
      } else {
        if (darkify_enable_low_image_brightness === "1") {
          element.style.filter =
            "brightness(" + darkify_image_brightness_to + "%)";
        } else if (darkify_enable_image_grayscale === "1") {
          element.style.filter =
            "grayscale(" + darkify_image_grayscale_to + "%)";
        }
      }
    }
  } else if (
    element.classList.contains("darkify_changed_brightness_and_grayscale")
  ) {
    element.style.filter = element.dataset.darkify_preserved_filter;
    element.classList.remove("darkify_changed_brightness_and_grayscale");
    delete element.dataset.darkify_preserved_filter;
  }
}

function darkify_invert_inline_svg(element) {
  if (document.body.classList.contains("block-editor-page")) return;
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    element.style.filter = "invert(1)";
    element.classList.add("darkify_inverted_inline_svg");
  } else if (element.classList.contains("darkify_inverted_inline_svg")) {
    element.style.filter = element.style.filter.replace("invert(1)", "");
    element.classList.remove("darkify_inverted_inline_svg");
  }
}

function darkify_video_brightness_and_grayscale(element) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    if (
      !element.classList.contains(
        "darkify_changed_video_brightness_and_grayscale",
      )
    ) {
      element.dataset.darkify_preserved_filter = element.style.filter;
      element.classList.add("darkify_changed_video_brightness_and_grayscale");
      if (
        darkify_enable_low_video_brightness === "1" &&
        darkify_enable_video_grayscale === "1"
      ) {
        element.style.filter =
          "brightness(" +
          darkify_video_brightness_to +
          "%)" +
          " " +
          "grayscale(" +
          darkify_video_grayscale_to +
          "%)";
      } else {
        if (darkify_enable_low_video_brightness === "1") {
          element.style.filter =
            "brightness(" + darkify_video_brightness_to + "%)";
        } else if (darkify_enable_video_grayscale === "1") {
          element.style.filter =
            "grayscale(" + darkify_video_grayscale_to + "%)";
        }
      }
    }
  } else if (
    element.classList.contains("darkify_changed_video_brightness_and_grayscale")
  ) {
    element.style.filter = element.dataset.darkify_preserved_filter;
    element.classList.remove("darkify_changed_video_brightness_and_grayscale");
    delete element.dataset.darkify_preserved_filter;
  }
}

function darkify_replace_video(videoElement, videos) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    for (let i = 0; i < videos.length; i++) {
      const normalVideo = videos[i].normal_video;
      const normalVideoPath = new URL(normalVideo).pathname;
      const darkVideo = videos[i].dark_video;
      const darkVideoPath = new URL(darkVideo).pathname;

      if (
        videoElement.getAttribute("src") != null &&
        videoElement.getAttribute("src").includes(normalVideoPath)
      ) {
        videoElement.src = darkVideo;
        videoElement.classList.add("darkify_replaced_video");
      }

      if (videoElement.querySelectorAll("source") != null) {
        let sources = videoElement.querySelectorAll("source");
        for (let j = 0; j < sources.length; j++) {
          if (
            sources[j].getAttribute("src") != null &&
            sources[j].getAttribute("src").includes(normalVideoPath)
          ) {
            sources[j].src = darkVideo + "?_=" + Date.now();
            videoElement.classList.add("darkify_replaced_video");
            videoElement.load();
          }
        }
      }
    }
  } else {
    if (videoElement.classList.contains("darkify_replaced_video")) {
      for (let i = 0; i < videos.length; i++) {
        const normalVideo = videos[i].normal_video;
        const normalVideoPath = new URL(normalVideo).pathname;
        const darkVideo = videos[i].dark_video;
        const darkVideoPath = new URL(darkVideo).pathname;

        if (
          videoElement.getAttribute("src") != null &&
          videoElement.getAttribute("src").includes(darkVideoPath)
        ) {
          videoElement.src = normalVideo;
          videoElement.classList.remove("darkify_replaced_video");
        }

        if (videoElement.querySelectorAll("source") != null) {
          let sources = videoElement.querySelectorAll("source");
          for (let j = 0; j < sources.length; j++) {
            if (
              sources[j].getAttribute("src") != null &&
              sources[j].getAttribute("src").includes(darkVideoPath)
            ) {
              sources[j].src = normalVideo + "?_=" + Date.now();
              videoElement.classList.remove("darkify_replaced_video");
              videoElement.load();
            }
          }
        }
      }
    }
  }
}

function darkify_process_pseudo_bg(element) {
  const isTransparent = (color) =>
    !color ||
    color === "transparent" ||
    color === "rgba(0, 0, 0, 0)" ||
    color === "rgba(255, 255, 255, 0)";

  const beforeBg = window.getComputedStyle(element, "::before").backgroundColor;
  const afterBg = window.getComputedStyle(element, "::after").backgroundColor;

  if (!isTransparent(beforeBg)) {
    element.setAttribute("data-darkify-pseudo-before-bg", beforeBg);
  }
  if (!isTransparent(afterBg)) {
    element.setAttribute("data-darkify-pseudo-after-bg", afterBg);
  }
}

function darkify_apply_pseudo_bg_styles() {
  document
    .querySelectorAll(
      "[data-darkify-pseudo-before-bg], [data-darkify-pseudo-after-bg]",
    )
    .forEach((element) => {
      const hasBefore = element.hasAttribute("data-darkify-pseudo-before-bg");
      const hasAfter = element.hasAttribute("data-darkify-pseudo-after-bg");

      let pseudoId = element.getAttribute("data-darkify-pseudo-bg-id");
      if (!pseudoId) {
        pseudoId = "dkf-" + Math.random().toString(36).substr(2, 9);
        element.setAttribute("data-darkify-pseudo-bg-id", pseudoId);
      }

      let styleEl = document.getElementById("darkify-pseudo-bg-" + pseudoId);
      if (!styleEl) {
        styleEl = document.createElement("style");
        styleEl.id = "darkify-pseudo-bg-" + pseudoId;
        document.head.appendChild(styleEl);
      }

      let css = "";

      if (hasBefore) {
        const beforeBg = element.getAttribute("data-darkify-pseudo-before-bg");
        const isSecondary =
          darkify_secondary_bg_color !== "" &&
          beforeBg !== darkify_secondary_bg_color;
        const bgVar = isSecondary
          ? "--darkify_dark_mode_secondary_bg"
          : "--darkify_dark_mode_bg";
        css += `
          .darkify_dark_mode_enabled [data-darkify-pseudo-bg-id="${pseudoId}"]::before {
            background: var(${bgVar}) !important;
            background-color: var(${bgVar}) !important;
          }
        `;
      }

      if (hasAfter) {
        const afterBg = element.getAttribute("data-darkify-pseudo-after-bg");
        const isSecondary =
          darkify_secondary_bg_color !== "" &&
          afterBg !== darkify_secondary_bg_color;
        const bgVar = isSecondary
          ? "--darkify_dark_mode_secondary_bg"
          : "--darkify_dark_mode_bg";
        css += `
          .darkify_dark_mode_enabled [data-darkify-pseudo-bg-id="${pseudoId}"]::after {
            background: var(${bgVar}) !important;
            background-color: var(${bgVar}) !important;
          }
        `;
      }

      styleEl.textContent = css;
    });
}

function darkify_fix_background_color_alpha(element) {
  if (
    document
      .getElementsByTagName("html")[0]
      .classList.contains("darkify_dark_mode_enabled")
  ) {
    if (element.hasAttribute("data-darkify_alpha_bg")) {
      var alphaValue = element.dataset.darkify_alpha_bg
        .replace("rgba(", "")
        .replace(")", "")
        .split(",")[3]
        .trim();
      var backgroundColor = window.getComputedStyle(
        element,
        null,
      ).backgroundColor;

      if (!backgroundColor.includes("rgba")) {
        element.style.setProperty(
          "background-color",
          backgroundColor
            .replace(")", ", " + alphaValue + ")")
            .replace("rgb", "rgba"),
          "important",
        );
      }
    }
  } else if (element.hasAttribute("data-darkify_alpha_bg")) {
    element.style.backgroundColor = "";
  }
}

function darkify_implement_secondary_bg() {
  let maxAreaElement = null;
  let maxArea = 0;

  const elements = document.querySelectorAll(
    "* :not(head, title, link, meta, script, style, defs, filter)",
  );

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
      const secondaryBgColor = element.dataset.darkify_secondary_bg_finder;
      if (
        secondaryBgColor !== "transparent" &&
        secondaryBgColor !== "rgba(0, 0, 0, 0)"
      ) {
        const boundingRect = element.getBoundingClientRect();
        const area = boundingRect.width * boundingRect.height;
        if (area > maxArea) {
          maxArea = area;
          maxAreaElement = secondaryBgColor;
        }
      }
    }
  }

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    if (element.hasAttribute("data-darkify_secondary_bg_finder")) {
      if (
        element.classList.contains("darkify_style_all") ||
        element.classList.contains("darkify_style_bg_txt") ||
        element.classList.contains("darkify_style_bg_border") ||
        element.classList.contains("darkify_style_bg")
      ) {
        const isDifferentSecondaryBg =
          maxAreaElement !== element.dataset.darkify_secondary_bg_finder;
        if (isDifferentSecondaryBg) {
          element.classList.add("darkify_style_secondary_bg");
        }
      }
      delete element.dataset.darkify_secondary_bg_finder;
    }
  }

  darkify_secondary_bg_color = maxAreaElement;
}

function darkify_recheck_on_css_loaded_later() {
  document
    .querySelectorAll(
      ".darkify_style_txt_border, .darkify_style_txt, .darkify_style_border",
    )
    .forEach(function (element) {
      const computedStyle = window.getComputedStyle(element, null);
      const backgroundColor = computedStyle.backgroundColor;
      if (
        backgroundColor !== "rgba(0, 0, 0, 0)" &&
        backgroundColor !== "rgba(255, 255, 255, 0)"
      ) {
        darkify_process_element(element);
      }
    });
}

function darkify_check_preloading() {
  let isPreloaded = false;
  const lastState = localStorage.darkify_last_state
    ? localStorage.darkify_last_state
    : "not_set";
  const adminPanelLastState = localStorage.darkify_admin_panel_last_state
    ? localStorage.darkify_admin_panel_last_state
    : "not_set";

  if (darkify_is_this_admin_panel === "1") {
    if (adminPanelLastState === "1") {
      isPreloaded = true;
    }
  } else {
    if (lastState === "1" || lastState === "0") {
      if (lastState === "1") {
        isPreloaded = true;
      }
    } else {
      if (darkify_enable_default_dark_mode === "1") {
        isPreloaded = true;
      }
      if (darkify_enable_time_based_dark === "1") {
        const currentDate = new Date();
        const darkStart = new Date();
        const darkStop = new Date();
        darkStart.setHours(
          parseInt(darkify_time_based_dark_start.split(":")[0]),
        );
        darkStart.setMinutes(
          parseInt(darkify_time_based_dark_start.split(":")[1]),
        );
        darkStop.setHours(parseInt(darkify_time_based_dark_stop.split(":")[0]));
        darkStop.setMinutes(
          parseInt(darkify_time_based_dark_stop.split(":")[1]),
        );

        if (
          parseInt(darkify_time_based_dark_stop.split(":")[0]) >=
          parseInt(darkify_time_based_dark_start.split(":")[0])
        ) {
          if (
            currentDate.getTime() > darkStart.getTime() &&
            currentDate.getTime() < darkStop.getTime()
          ) {
            isPreloaded = true;
          }
        } else if (currentDate.getHours() > 12) {
          if (
            currentDate.getTime() > darkStart.getTime() &&
            currentDate.getTime() > darkStop.getTime()
          ) {
            isPreloaded = true;
          }
        } else if (
          currentDate.getTime() < darkStart.getTime() &&
          currentDate.getTime() < darkStop.getTime()
        ) {
          isPreloaded = true;
        }
      }
    }
  }

  if (
    darkify_is_this_admin_panel === "0" &&
    darkify_enable_os_aware === "1" &&
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches &&
    lastState !== "1" &&
    lastState !== "0"
  ) {
    isPreloaded = true;
  }

  return isPreloaded;
}

/* ── Self-theming app detection ───────────────────────────────────────────
 *
 * Darkify darkens a page by reading each element's colours and stamping an
 * `!important` override on top. That is right for classic admin markup, which
 * takes its colours from the cascade — but a modern admin app (React, Vue, …)
 * built on design tokens does not. It ships its own complete dark theme keyed
 * on `dark` on <html>, which Darkify now sets, so by the time the engine walks
 * the page that app has ALREADY themed itself. Repainting it then does not help;
 * it flattens the palette, collapsing cards, popovers and page background into
 * one flat grey and fighting a theme that was already correct.
 *
 * So the engine needs to recognise "this subtree already handled it" — without
 * knowing anything about which plugin drew it. The signal used here is the same
 * convention that made the app dark in the first place:
 *
 *   1. The page ships a stylesheet rule that references the `dark` class AND
 *      declares custom properties — i.e. a `.dark { --background: … }` token
 *      block. That is the fingerprint of a class-switched token theme
 *      (Tailwind's class strategy, shadcn/ui, and Darkify's own React admin).
 *   2. An element whose resolved colour IS one of those token values is being
 *      painted by that theme, so it is left alone, along with its subtree.
 *
 * Both halves are structural, not nominal: no plugin name, no container id, no
 * DOM-shape assumption. A page with no such token block yields an empty set and
 * every element takes exactly the path it took before, so classic admin screens
 * are untouched.
 */

var darkify_dark_token_names = null;
var darkify_dark_token_colors = null;
var darkify_dark_token_signature = null;

/**
 * Names of the custom properties a `dark`-keyed rule declares, read once from
 * the page's own stylesheets.
 *
 * A rule only counts when it BOTH references the class and declares `--*`
 * properties. That pairing is what separates a theme's token block from an
 * ordinary dark variant utility (Tailwind compiles `dark:bg-card` to a selector
 * that also mentions the class but only sets `background-color`), and it is why
 * the class-name test does not need to be clever.
 */
function darkify_collect_dark_token_names() {
  if (darkify_dark_token_names !== null) {
    return darkify_dark_token_names;
  }

  var names = {};
  // `.dark` not followed by a word character or hyphen, so Darkify's own
  // `.darkify_*` classes (and any `.dark-theme` of someone else's) don't count.
  var dark_class = /\.dark(?![\w-])/;

  function scan(rules) {
    for (var i = 0; i < rules.length; i++) {
      var rule = rules[i];

      if (
        rule.selectorText &&
        rule.style &&
        dark_class.test(rule.selectorText)
      ) {
        for (var j = 0; j < rule.style.length; j++) {
          var prop = rule.style[j];
          if (prop.charAt(0) === "-" && prop.charAt(1) === "-") {
            names[prop] = true;
          }
        }
      }

      // @media / @supports nest their own rule lists — and so, since CSS
      // Nesting shipped, does an ordinary style rule, which now exposes an
      // empty `cssRules` of its own. Recursing on existence rather than on
      // length therefore swallowed EVERY top-level rule (each one looked like a
      // group with no children), which is why this found nothing at all.
      if (rule.cssRules && rule.cssRules.length) {
        scan(rule.cssRules);
      }
    }
  }

  var sheets = document.styleSheets;
  for (var s = 0; s < sheets.length; s++) {
    try {
      if (sheets[s].cssRules) {
        scan(sheets[s].cssRules);
      }
    } catch (e) {
      // Cross-origin stylesheet — unreadable by design, and never one of ours.
    }
  }

  darkify_dark_token_names = Object.keys(names);
  return darkify_dark_token_names;
}

/**
 * Those tokens resolved to real colours, as a lookup keyed by computed value.
 *
 * Custom properties compute to their raw token text (`oklch(…)`, `#0c1116`),
 * which never string-matches the `rgb(…)` an element reports, so each one is
 * resolved through a probe element and compared in that normalised form. The
 * probe lives in the document so it inherits the same theme the app sees.
 *
 * Cached against the root's class list: that is what carries `dark` and the
 * palette classes, so the cache drops exactly when the resolved values change.
 */
function darkify_dark_theme_colors() {
  var names = darkify_collect_dark_token_names();
  if (names.length === 0 || !document.body) {
    return null;
  }

  var signature = document.documentElement.className;
  if (darkify_dark_token_colors !== null && darkify_dark_token_signature === signature) {
    return darkify_dark_token_colors;
  }

  var probe = document.createElement("span");
  // Excluded from the engine and from layout; purely a colour resolver.
  probe.className = "darkify_ignore";
  probe.style.cssText =
    "position:absolute;left:-9999px;top:-9999px;width:0;height:0;visibility:hidden;pointer-events:none;";
  document.body.appendChild(probe);

  var colors = {};
  for (var i = 0; i < names.length; i++) {
    probe.style.color = "";
    probe.style.color = "var(" + names[i] + ")";
    var resolved = window.getComputedStyle(probe).color;
    // Tokens that aren't colours (radii, spacing) simply don't resolve to one.
    if (resolved && resolved.indexOf("rgb") === 0) {
      colors[resolved] = true;
    }
  }

  probe.parentNode.removeChild(probe);

  darkify_dark_token_colors = colors;
  darkify_dark_token_signature = signature;
  return colors;
}

/** Whether self-theming detection should run at all on this page. */
function darkify_self_theming_active() {
  return (
    typeof darkify_is_this_admin_panel !== "undefined" &&
    darkify_is_this_admin_panel === "1" &&
    // Only meaningful while the class is on: with it off the tokens resolve to
    // the app's LIGHT values, and matching those would skip the very elements
    // that still need darkening.
    document.documentElement.classList.contains("dark")
  );
}

/** Cheap ancestor check — an already-identified subtree is skipped wholesale. */
function darkify_in_self_themed_subtree(element) {
  return (
    darkify_self_theming_active() &&
    !!element.closest &&
    !!element.closest(".darkify_self_themed")
  );
}

/**
 * Mark `element` when its own colours come from the page's dark token theme.
 *
 * Marking the element rather than testing every node keeps this O(1) per
 * subtree: document order means the outermost themed container is reached
 * first, and everything below it then short-circuits on the ancestor check —
 * including nodes React mounts later, which is what makes SPA route changes and
 * late-rendered components work without re-detection.
 */
function darkify_mark_if_self_themed(element, computedStyle) {
  if (!darkify_self_theming_active()) {
    return false;
  }

  // Never hand the whole document over: <html>/<body> belong to wp-admin, and
  // the engine still owns the page backdrop behind any app.
  var nodeName = element.nodeName.toLowerCase();
  if (nodeName === "html" || nodeName === "body") {
    return false;
  }

  var colors = darkify_dark_theme_colors();
  if (!colors) {
    return false;
  }

  if (colors[computedStyle.color] || colors[computedStyle.backgroundColor]) {
    element.classList.add("darkify_self_themed");
    return true;
  }

  return false;
}

function darkify_process_element(element) {
  // Before any style read: everything under an app that themes itself is left
  // exactly as that app painted it.
  if (darkify_in_self_themed_subtree(element)) {
    return;
  }

  var computedStyle = window.getComputedStyle(element, null);
  var old_transition = "";

  // if (computedStyle.transition !== "all 0s ease 0s") {
  //   old_transition = computedStyle.transition;
  //   // element.style.setProperty("transition", "none");
  // }

  if (
    element.classList.contains("darkify_style_all") ||
    element.classList.contains("darkify_style_bg_txt") ||
    element.classList.contains("darkify_style_bg_border") ||
    element.classList.contains("darkify_style_txt_border") ||
    element.classList.contains("darkify_style_bg") ||
    element.classList.contains("darkify_style_txt") ||
    element.classList.contains("darkify_style_border") ||
    element.classList.contains("darkify_style_secondary_bg")
  ) {
    element.classList.remove("darkify_style_all");
    element.classList.remove("darkify_style_bg_txt");
    element.classList.remove("darkify_style_bg_border");
    element.classList.remove("darkify_style_txt_border");
    element.classList.remove("darkify_style_bg");
    element.classList.remove("darkify_style_txt");
    element.classList.remove("darkify_style_border");
    element.classList.remove("darkify_style_secondary_bg");
  }

  var nodeName = element.nodeName.toLowerCase();
  var backgroundColor = computedStyle.backgroundColor;
  var color = computedStyle.color;
  var borderColor = computedStyle.borderColor;
  var backgroundImage = computedStyle.backgroundImage;

  if (
    nodeName === "body" &&
    (backgroundColor === "rgba(0, 0, 0, 0)" ||
      backgroundColor === "rgba(255, 255, 255, 0)")
  ) {
    element.style.setProperty("background-color", "rgb(255, 255, 255)");
    backgroundColor = window.getComputedStyle(element, null).backgroundColor;
  }

  if (darkify_disallowed_elements.length > 0) {
    if (element.matches(darkify_disallowed_elements)) {
      // if (old_transition !== "") {
      //   element.style.setProperty("transition", old_transition);
      // }
      // element.classList.remove("darkify_processed");
      return;
    }
  }

  // The element's colours resolve to the page's own dark tokens, so its theme
  // has already dressed it — and its whole subtree with it.
  if (darkify_mark_if_self_themed(element, computedStyle)) {
    return;
  }

  var has_background_img_url = false;
  if (backgroundImage !== "none" && backgroundImage.includes("url")) {
    has_background_img_url = true;
    if (darkify_enable_bg_image_darken === "1") {
      darkify_darken_bg_image(element, darken_level);
    }
  }
  if (
    backgroundColor !== "rgba(0, 0, 0, 0)" &&
    backgroundColor !== "rgba(255, 255, 255, 0)" &&
    !has_background_img_url
  ) {
    if (!element.hasAttribute("data-darkify_secondary_bg_finder")) {
      element.dataset.darkify_secondary_bg_finder = backgroundColor;
    }
    if (darkify_secondary_bg_color !== "") {
      var isSecondaryBgColorDifferent =
        darkify_secondary_bg_color !==
        element.dataset.darkify_secondary_bg_finder;
      if (isSecondaryBgColorDifferent) {
        element.classList.add("darkify_style_secondary_bg");
      }
      delete element.dataset.darkify_secondary_bg_finder;
    }
  }
  if (
    backgroundColor !== "rgba(0, 0, 0, 0)" &&
    color !== "rgba(0, 0, 0, 0)" &&
    borderColor !== "rgba(0, 0, 0, 0)" &&
    backgroundColor !== "rgba(255, 255, 255, 0)" &&
    color !== "rgba(255, 255, 255, 0)" &&
    borderColor !== "rgba(255, 255, 255, 0)" &&
    has_background_img_url === false
  ) {
    element.classList.add("darkify_style_all");
  } else {
    if (
      backgroundColor !== "rgba(0, 0, 0, 0)" &&
      color !== "rgba(0, 0, 0, 0)" &&
      backgroundColor !== "rgba(255, 255, 255, 0)" &&
      color !== "rgba(255, 255, 255, 0)" &&
      has_background_img_url === false
    ) {
      element.classList.add("darkify_style_bg_txt");
    } else {
      if (
        backgroundColor !== "rgba(0, 0, 0, 0)" &&
        borderColor !== "rgba(0, 0, 0, 0)" &&
        backgroundColor !== "rgba(255, 255, 255, 0)" &&
        borderColor !== "rgba(255, 255, 255, 0)" &&
        has_background_img_url === false
      ) {
        element.classList.add("darkify_style_bg_border");
      } else {
        if (
          color !== "rgba(0, 0, 0, 0)" &&
          borderColor !== "rgba(0, 0, 0, 0)" &&
          color !== "rgba(255, 255, 255, 0)" &&
          borderColor !== "rgba(255, 255, 255, 0)"
        ) {
          element.classList.add("darkify_style_txt_border");
        } else {
          if (
            backgroundColor !== "rgba(0, 0, 0, 0)" &&
            backgroundColor !== "rgba(255, 255, 255, 0)" &&
            has_background_img_url === false
          ) {
            element.classList.add("darkify_style_bg");
          } else {
            if (
              color !== "rgba(0, 0, 0, 0)" &&
              color !== "rgba(255, 255, 255, 0)"
            ) {
              element.classList.add("darkify_style_txt");
            } else if (
              borderColor !== "rgba(0, 0, 0, 0)" &&
              borderColor !== "rgba(255, 255, 255, 0)"
            ) {
              element.classList.add("darkify_style_border");
            }
          }
        }
      }
    }
  }
  if (
    backgroundImage !== "none" &&
    !has_background_img_url &&
    !element.classList.contains("darkify_style_all") &&
    !element.classList.contains("darkify_style_bg_txt") &&
    !element.classList.contains("darkify_style_bg_border") &&
    !element.classList.contains("darkify_style_bg")
  ) {
    element.classList.add("darkify_style_secondary_bg");
  }

  if (nodeName === "a") {
    element.classList.add("darkify_style_link");
  }

  if (
    nodeName === "input" ||
    nodeName === "select" ||
    nodeName === "textarea"
  ) {
    element.classList.add("darkify_style_form_element");
  }

  const hasTargetClass = darkify_allowed_btn_class.some((cls) =>
    element.classList.contains(cls),
  );

  if (nodeName === "button" || hasTargetClass || element.type === "submit") {
    element.classList.add("darkify_style_button");
    element.classList.remove("darkify_style_secondary_bg");
    element.classList.remove("darkify_style_all");
    element.classList.remove("darkify_style_link");
  }

  if (
    (darkify_enable_low_image_brightness === "1" ||
      darkify_enable_image_grayscale === "1") &&
    nodeName === "img"
  ) {
    darkify_img_brightness_and_grayscale(element);
  }

  if (darkify_enable_invert_inline_svg === "1" && nodeName === "svg") {
    darkify_invert_inline_svg(element);
  }

  if (
    darkify_enable_low_video_brightness === "1" ||
    darkify_enable_video_grayscale === "1"
  ) {
    if (nodeName === "video") {
      darkify_video_brightness_and_grayscale(element);
    }

    if (nodeName === "iframe") {
      const srcAttribute = element.getAttribute("src");
      if (srcAttribute !== null) {
        if (
          srcAttribute.includes("youtube") ||
          srcAttribute.includes("vimeo") ||
          srcAttribute.includes("dailymotion")
        ) {
          darkify_video_brightness_and_grayscale(element);
        }
      }
    }
  }

  if (backgroundColor.includes("rgba")) {
    element.dataset.darkify_alpha_bg = backgroundColor;
    darkify_fix_background_color_alpha(element);
  }

  darkify_process_pseudo_bg(element);

  // if (old_transition !== "") {
  //   setTimeout(function () {
  //     element.style.setProperty("transition", old_transition);
  //   }, 0);
  // }

  setTimeout(function () {
    elements_class_changed.observe(element, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }, 0);

  element.classList.add("darkify_processed");
}

function darkify_init_processes() {
  has_process_run_at_least_once = true;
  document
    .querySelectorAll(
      "* :not(head, title, link, meta, script, style, defs, filter, .darkify_processed)",
    )
    .forEach(function (element) {
      darkify_process_element(element);
    });
}

/**
 * Mirror the engine's dark state onto `dark` on <html> — admin panel only.
 *
 * A React-based admin screen doesn't take its colours from the cascade, so the
 * class-stamping the engine does to the rest of wp-admin can't reach it: it
 * reads design tokens that only switch when `dark` is on an ancestor
 * (Tailwind's class strategy, shadcn/ui, and Darkify's own React admin all key
 * on exactly that class). The <head> snippet in header_script.php sets it for
 * the first paint; this keeps it in step afterwards, so the admin-bar switch
 * re-themes those screens live instead of only after a reload.
 *
 * Deliberately generic — it mirrors our own state onto a shared convention and
 * names no plugin, so any admin app following that convention inherits the
 * theme. Screens with no such stylesheet loaded simply have an inert class.
 */
function darkify_sync_react_dark_class() {
  if (
    typeof darkify_is_this_admin_panel === "undefined" ||
    darkify_is_this_admin_panel !== "1"
  ) {
    return;
  }

  var html = document.documentElement;
  var should_be_dark = html.classList.contains("darkify_dark_mode_enabled");

  // The no-op guard matters: this runs from an observer watching the same
  // element's class list, so toggling unconditionally would re-trigger it in a
  // loop. Bailing when nothing changes breaks the cycle.
  if (html.classList.contains("dark") === should_be_dark) {
    return;
  }

  html.classList.toggle("dark", should_be_dark);
}

function darkify_init_observer() {
  darkify_observer.observe(document, {
    attributes: false,
    childList: true,
    characterData: false,
    subtree: true,
  });

  dark_mode_status_changed.observe(document.getElementsByTagName("html")[0], {
    attributes: true,
  });

  // Keep `dark` in step with every route that flips `darkify_dark_mode_enabled`
  // (the admin-bar switch, the keyboard shortcut, OS/time-based changes, the
  // theme picker) without having to patch each one.
  darkify_sync_react_dark_class();
  new MutationObserver(darkify_sync_react_dark_class).observe(
    document.documentElement,
    { attributes: true, attributeFilter: ["class"] },
  );

  if (document.readyState !== "loading") {
    if (!has_process_run_at_least_once) {
      darkify_init_processes();
    }
    darkify_implement_secondary_bg();
    darkify_apply_pseudo_bg_styles();
    darkify_recheck_on_css_loaded_later();
    darkify_restore_selected_theme();
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      if (!has_process_run_at_least_once) {
        darkify_init_processes();
      }
      darkify_implement_secondary_bg();
      darkify_apply_pseudo_bg_styles();
      darkify_recheck_on_css_loaded_later();
      darkify_restore_selected_theme();
    });
  }
}

if (!_dkf_iframe_disabled && darkify_check_preloading()) {
  document
    .getElementsByTagName("html")[0]
    .classList.add("darkify_dark_mode_enabled");
  darkify_init_observer();
  darkify_process_iframes(); // ✅ darkify proceed iframe
}

if (document.readyState !== "loading") {
  darkify_restore_selected_theme();
} else {
  document.addEventListener("DOMContentLoaded", darkify_restore_selected_theme);
}