// ==UserScript==
// @name         珠宝AI 移动端适配
// @namespace    https://zbai.art/
// @version      0.1.0
// @description  将 zbai.art 的 PC 图片创作工作区适配为手机浏览器可用的纵向布局。
// @author       Codex
// @match        https://zbai.art/create/module/image*
// @match        https://www.zbai.art/create/module/image*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const STYLE_ID = 'zbai-mobile-adapter-style';
  const CLASS_READY = 'zbai-mobile-adapted';
  const SHEET_ID = 'zbai-mobile-bottom-sheet';
  const MOBILE_QUERY = '(max-width: 768px), (pointer: coarse)';

  const selectors = {
    root: '#pictureEditor',
    header: '.picture-editor-header',
    headerInner: '#picture-editor-header',
    headerCenter: '.picture-editor-header .center',
    headerLeft: '.picture-editor-header .left',
    headerRight: '.picture-editor-header .right',
    content: '.picture-editor-content',
    leftDrawer: '.picture-editor-content-left-drawer',
    contentBox: '.picture-editor-content-box',
    render: '.picture-editor-content-render',
    control: '.picture-editor-content-control',
    controlInner: '.PictureEditorControl_PictureEditorControl__T6FHN',
    controlConfig: '.control-config',
    controlBottom: '.ControlBottom_controlBottom__gooOU',
    inputWrap: '#multifunctional-input',
    textArea: 'textarea.textarea-buttons, textarea.ant-input',
    modelWrap: '.ChooseModelWithDetails_ChooseModelWithDetails__m_Cbs',
    modelBox: '.ChooseModelWithDetails_selectBox__HoIuc',
    ratioWrap: '.ChooseSizeBase_chooseSizeBase__KgHNI',
    numberWrap: '.ChooseNumber_ChooseNumber__J1uo_',
    generateWrap: '.generate-button-container',
    loginModal: '.LoginModal_LoginModal__O59AS',
    modalShell: '.fixed.top-0.left-0.w-screen.h-screen',
  };

  const media = window.matchMedia(MOBILE_QUERY);

  function isMobile() {
    return media.matches || window.innerWidth <= 768;
  }

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

    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
@media (max-width: 768px), (pointer: coarse) {
  html[data-zbai-mobile="1"],
  html[data-zbai-mobile="1"] body#haimeta {
    width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-text-size-adjust: 100% !important;
  }

  html[data-zbai-mobile="1"] #root,
  html[data-zbai-mobile="1"] .PageContainer_haimetaApp__qfjGd,
  html[data-zbai-mobile="1"] .PageContainer_indexContent__5aBHJ,
  html[data-zbai-mobile="1"] #pictureEditor {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-header {
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: var(--Background-1-Normal, #f4f5fb) !important;
  }

  html[data-zbai-mobile="1"] #picture-editor-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }