// ==UserScript==
// @name         珠宝AI iPhone显示修复补丁
// @namespace    https://zbai.art/
// @version      0.2.5-hotfix
// @description  Fix iPhone/Safari/Stay desktop zoom issue for Jew AI mobile layout.
// @match        http://zbai.art/*
// @match        https://zbai.art/*
// @match        https://jew.haistudio.ai/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
  "use strict";

  const STYLE_ID = "zbai-ios-display-hotfix-style";

  fixViewport();
  injectStyle();

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

  function start() {
    fixViewport();
    document.documentElement.classList.add("zbai-ios-display-fixed");
    document.body?.classList.add("zbai-ios-display-fixed");

    const observer = new MutationObserver(() => {
      fixViewport();
      document.documentElement.classList.add("zbai-ios-display-fixed");
      document.body?.classList.add("zbai-ios-display-fixed");
    });

    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
      attributes: true
    });
  }

  function fixViewport() {
    let meta = document.querySelector('meta[name="viewport"]');

    if (!meta) {
      meta = document.createElement("meta");
      meta.name = "viewport";
      document.head?.appendChild(meta);
    }

    meta.setAttribute(
      "content",
      "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
    );
  }

  function injectStyle() {
    if (document.getElementById(STYLE_ID)) return;

    const css = `
      @media (max-width: 820px), (pointer: coarse) {
        html.zbai-ios-display-fixed,
        body.zbai-ios-display-fixed {
          width: 100vw !important;
          min-width: 0 !important;
          max-width: 100vw !important;
          margin: 0 !important;
          padding: 0 !important;
          overflow-x: hidden !important;
          zoom: 1 !important;
          -webkit-text-size-adjust: 100% !important;
          background: #f6f6fa !important;
        }

        body.zbai-ios-display-fixed > div {
          width: 100vw !important;
          min-width: 0 !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
          transform: none !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-compose-source {
          position: fixed !important;
          z-index: 2147483001 !important;
          top: env(safe-area-inset-top, 0px) !important;
          right: 0 !important;
          bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
          left: 0 !important;

          width: 100vw !important;
          min-width: 0 !important;
          max-width: 100vw !important;
          height: auto !important;
          max-height: none !important;

          margin: 0 !important;
          padding: 12px 12px 96px !important;
          box-sizing: border-box !important;

          overflow-y: auto !important;
          overflow-x: hidden !important;
          overscroll-behavior: contain !important;

          background: #fff !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          transform: none !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-compose-source * {
          max-width: 100% !important;
          box-sizing: border-box !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-compose-source textarea,
        body.zbai-ios-display-fixed .zbai-mobile-compose-source input {
          width: 100% !important;
          max-width: 100% !important;
          font-size: 16px !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-compose-source textarea {
          min-height: 118px !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-compose-source img {
          max-width: 100% !important;
          height: auto !important;
          object-fit: contain !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-compose-source button,
        body.zbai-ios-display-fixed .zbai-mobile-compose-source [role="button"],
        body.zbai-ios-display-fixed .zbai-mobile-compose-source label {
          min-height: 40px !important;
          touch-action: manipulation !important;
        }

        body.zbai-ios-display-fixed .zbai-mobile-ready {
          display: none !important;
        }
      }
    `;

    const style = document.createElement("style");
    style.id = STYLE_ID;
    style.textContent = css;

    if (document.head) {
      document.head.appendChild(style);
    } else {
      document.documentElement.appendChild(style);
    }
  }
})();