// ==UserScript==
// @name         珠宝AI 移动端适配
// @namespace    https://zbai.art/
// @version      0.7.6
// @description  保留 0.7.5 的移动端布局界面，使用 0.2.3 的生成、上传、历史、下载与登录按钮逻辑。
// @author       Codex
// @match        http://zbai.art/*
// @match        https://zbai.art/*
// @match        https://www.zbai.art/*
// @match        https://jew.haistudio.ai/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const STYLE_ID = 'zbai-mobile-adapter-style';
  const ROOT_ID = 'zbai-mobile-root';
  const CLASS_READY = 'zbai-mobile-adapted';
  const MOBILE_QUERY = '(max-width: 768px), (pointer: coarse), (max-device-width: 820px)';

  const CLASS = {
    enabled: 'zbai-mobile-enabled',
    compose: 'zbai-mobile-compose-source',
    composeOpen: 'zbai-mobile-compose-open',
    formatChoice: 'zbai-mobile-format-choice',
    formatLabel: 'zbai-mobile-format-label',
    formatRow: 'zbai-mobile-format-row',
    history: 'zbai-mobile-history-source',
    historyOpen: 'zbai-mobile-history-open',
    lock: 'zbai-mobile-lock',
  };

  const EDITOR_ROOT_SELECTOR = '#pictureEditor';

  window.__ZBAI_MOBILE_ADAPTER_VERSION__ = '0.7.6';
  window.__ZBAI_MOBILE_ADAPTER_MERGE__ = '0.7.5-ui+0.2.3-actions';

  const media = window.matchMedia(MOBILE_QUERY);
  let activeSurface = '';
  let toastTimer = 0;

  injectStyles();
  waitForBody(boot);

  function boot() {
    if (document.getElementById(ROOT_ID)) return;

    const root = buildRoot();
    document.body.append(root);
    syncMode();
    refreshTargets();
    installListeners(root);

    const observer = new MutationObserver(throttle(() => {
      syncMode();
      refreshTargets();
    }, 180));
    observer.observe(document.body, { attributes: true, childList: true, subtree: true });
  }

  function installListeners(root) {
    root.addEventListener('click', onRootClick);
    listenForModeChange(media);
    window.addEventListener('resize', throttle(syncMode, 180), { passive: true });
    document.addEventListener('click', delayPromoteFloatingMenus, true);
    document.addEventListener('touchend', delayPromoteFloatingMenus, { capture: true, passive: true });
  }

  function buildRoot() {
    const root = document.createElement('div');
    root.id = ROOT_ID;
    root.innerHTML = `
      <button class="zbai-mobile-backdrop" data-zbai-action="close" aria-label="关闭移动面板"></button>
      <button type="button" class="zbai-mobile-close" data-zbai-action="close" aria-label="关闭生成面板">关闭</button>
      <button type="button" class="zbai-mobile-auth" data-zbai-action="auth">登录</button>
      <nav class="zbai-mobile-dock" aria-label="珠宝AI手机快捷操作">
        <button type="button" data-zbai-action="compose">生成</button>
        <button type="button" data-zbai-action="upload">上传</button>
        <button type="button" data-zbai-action="history">历史</button>
        <button type="button" data-zbai-action="download">下载</button>
      </nav>
      <div class="zbai-mobile-ready" data-zbai-ready="1">移动适配已启用</div>
      <div class="zbai-mobile-toast" role="status" aria-live="polite"></div>
    `;
    return root;
  }

  function onRootClick(event) {
    const button = event.target.closest('[data-zbai-action]');
    if (!button || !isMobile()) return;

    event.preventDefault();
    event.stopPropagation();

    const action = button.dataset.zbaiAction;
    if (action === 'close') closeSurface();
    if (action === 'compose') toggleCompose();
    if (action === 'upload') openUpload();
    if (action === 'history') toggleHistory();
    if (action === 'download') openDownload();
    if (action === 'auth') toggleAuth();
  }

  function toggleCompose() {
    const panel = findComposePanel();
    if (!panel) {
      toast('还没找到生成面板，页面加载完再点一次');
      return;
    }

    if (activeSurface === 'compose') {
      closeSurface();
      return;
    }

    openSurface('compose', panel);
    focusPrompt(panel);
  }

  async function openUpload() {
    const panel = findComposePanel();
    if (!panel) {
      toast('还没找到上传区，先进入图片创作页');
      return;
    }

    openSurface('compose', panel);
    let upload = findUploadControl(panel);
    if (!upload) {
      activate(findClickableByText(panel, '图生'));
      await delay(240);
      upload = findUploadControl(findComposePanel() || panel);
    }

    if (!upload) {
      toast('已打开图生面板，请在面板里点上传');
      return;
    }

    upload.scrollIntoView({ block: 'center', behavior: 'smooth' });
    activate(upload);
  }

  function toggleHistory() {
    const rail = findHistoryRail();
    if (!rail) {
      toast('还没找到历史记录列');
      return;
    }

    if (activeSurface === 'history') {
      closeSurface();
      return;
    }

    openSurface('history', rail);
    rail.scrollIntoView({ block: 'nearest', inline: 'nearest' });
  }

  async function openDownload() {
    closeSurface();
    const download = findDownloadControl();
    if (download) {
      activate(download);
      return;
    }

    const result = findPrimaryResult();
    if (!result) {
      toast('先打开或生成一张图片，再点下载');
      return;
    }

    activate(result);
    await delay(280);

    const previewDownload = findDownloadControl();
    if (previewDownload) {
      activate(previewDownload);
      return;
    }

    toast('预览已打开，请点预览里的下载图标');
  }

  function openSurface(surface, node) {
    closeSurface();
    activeSurface = surface;
    node.classList.add(surface === 'compose' ? CLASS.composeOpen : CLASS.historyOpen);
    if (surface === 'compose') node.scrollTop = 0;
    document.body.classList.add(CLASS.lock);
    document.getElementById(ROOT_ID)?.setAttribute('data-zbai-surface', surface);
  }

  function closeSurface() {
    activeSurface = '';
    document.querySelector(`.${CLASS.composeOpen}`)?.classList.remove(CLASS.composeOpen);
    document.querySelector(`.${CLASS.historyOpen}`)?.classList.remove(CLASS.historyOpen);
    document.body?.classList.remove(CLASS.lock);
    document.getElementById(ROOT_ID)?.removeAttribute('data-zbai-surface');
  }

  function refreshTargets() {
    if (!document.body) return;
    ensureViewport();
    updatePageType();
    refreshRoute();
    refreshAuthControl();

    if (!isMobile()) {
      closeSurface();
      return;
    }

    document.querySelector(EDITOR_ROOT_SELECTOR)?.classList.add(CLASS_READY);
    const compose = findComposePanel();
    compose?.classList.add(CLASS.compose);
    markFormatControls(compose);
    findHistoryRail()?.classList.add(CLASS.history);
    promoteFloatingMenus();
  }

  function refreshRoute() {
    const root = document.getElementById(ROOT_ID);
    if (!root) return;
    root.dataset.zbaiRoute = findComposePanel() || isCreateRoute() ? 'compose' : 'page';
  }

  function refreshAuthControl() {
    const button = document.querySelector(`#${ROOT_ID} .zbai-mobile-auth`);
    if (!button) return;

    const loggedIn = isLoggedIn();
    button.textContent = loggedIn ? '退出' : '登录';
    button.setAttribute('aria-label', loggedIn ? '退出登录' : '登录');
  }

  function syncMode() {
    const enabled = isMobile();
    document.documentElement.dataset.zbaiMobile = enabled ? '1' : '0';
    document.body?.classList.toggle(CLASS.enabled, enabled);
    if (!enabled) closeSurface();
    refreshTargets();
  }

  function listenForModeChange(query) {
    const onChange = () => syncMode();
    if (typeof query.addEventListener === 'function') query.addEventListener('change', onChange);
    else query.addListener?.(onChange);
  }

  function delayPromoteFloatingMenus() {
    window.setTimeout(promoteFloatingMenus, 60);
  }

  function promoteFloatingMenus() {
    if (!isMobile() || !activeSurface) return;

    const menus = document.querySelectorAll([
      '.ant-select-dropdown',
      '.ant-dropdown',
      '.arco-select-popup',
      '.el-select-dropdown',
      '[role="listbox"]',
      '[class*="select"][class*="dropdown"]',
      '[class*="dropdown"]',
      '[class*="popover"]',
      '[class*="popper"]',
    ].join(','));

    [...menus].filter(isFloatingMenu).forEach((node) => {
      if (node.style.getPropertyValue('z-index') !== '2147483605') {
        node.style.setProperty('z-index', '2147483605', 'important');
      }
    });
  }

  function isFloatingMenu(node) {
    if (!node || node.closest(`#${ROOT_ID}`)) return false;

    const style = getComputedStyle(node);
    const rect = node.getBoundingClientRect();
    const position = style.position === 'absolute' || style.position === 'fixed';
    return position && rect.width > 0 && rect.height > 0 &&
      style.display !== 'none' && style.visibility !== 'hidden';
  }

  async function toggleAuth() {
    if (isLoggedIn()) {
      await openLogout();
      return;
    }

    openLogin();
  }

  function openLogin() {
    const login = findAuthTextControl(/^(登录|登录\/注册|注册\/登录)$/) ||
      findAuthTextControl(/登录/);
    if (!login) {
      toast('还没找到原站登录入口，刷新首页后再点');
      return;
    }

    document.documentElement.dataset.zbaiLoginOpen = '1';
    activate(login);
    scheduleLoginStateCleanup();
  }

  async function openLogout() {
    let logout = findAuthTextControl(/退出登录|退出账号|退出/);
    if (logout) {
      activate(logout);
      return;
    }

    const avatar = findProfileAvatar();
    if (!avatar) {
      toast('还没找到头像入口，刷新首页后再点');
      return;
    }

    activate(avatar);
    await delay(260);
    logout = findAuthTextControl(/退出登录|退出账号|退出/);
    if (logout) {
      activate(logout);
      return;
    }

    toast('账号菜单已打开，请点退出');
  }

  function scheduleLoginStateCleanup() {
    [900, 1600, 2600, 4200, 7000].forEach((ms) => {
      window.setTimeout(() => {
        if (!hasVisibleLoginModal()) delete document.documentElement.dataset.zbaiLoginOpen;
      }, ms);
    });
  }

  function hasVisibleLoginModal() {
    return [...document.querySelectorAll('.LoginModal_LoginModal__O59AS, [class*="LoginModal"], .fixed.top-0.left-0.w-screen.h-screen')]
      .some((node) => node instanceof HTMLElement && isUsable(node));
  }

  function isLoggedIn() {
    return Boolean(findProfileAvatar());
  }

  function findProfileAvatar() {
    const candidates = document.querySelectorAll(
      'img[src*="avatar" i], img[src*="profile" i], img[src*="head" i]'
    );

    return [...candidates].find((image) => {
      if (!isUsable(image)) return false;

      const rect = image.getBoundingClientRect();
      const src = image.currentSrc || image.src || '';
      const style = getComputedStyle(image);
      const avatarSource = /avatar|profile|head|default_profile_picture/i.test(src);
      const headerAvatarShape = rect.top < 120 && rect.right > window.innerWidth * 0.66 &&
        rect.width >= 24 && rect.width <= 72 && rect.height >= 24 && rect.height <= 72 &&
        style.cursor === 'pointer';

      return avatarSource && headerAvatarShape;
    });
  }

  function findAuthTextControl(pattern) {
    return [...document.querySelectorAll(
      'button, a, [role="button"], [role="menuitem"], li, div, span'
    )]
      .filter((node) => !node.closest(`#${ROOT_ID}`))
      .find((node) => {
        const text = normalizedText(node);
        return text.length <= 16 && pattern.test(text) && isUsable(node);
      });
  }

  function findComposePanel() {
    const anchors = [
      ...document.querySelectorAll('textarea'),
      ...document.querySelectorAll('input[type="file"]'),
      ...[...document.querySelectorAll('button, label, [role="button"]')]
        .filter((node) => normalizedText(node).includes('上传')),
    ];

    for (const anchor of anchors) {
      const panel = walkParents(anchor, isComposePanel);
      if (panel) return panel;
    }

    const editorControl = document.querySelector('.picture-editor-content-control');
    if (editorControl instanceof HTMLElement && isUsable(editorControl)) return editorControl;
    return null;
  }

  function isComposePanel(node) {
    if (!(node instanceof HTMLElement)) return false;
    const text = normalizedText(node);
    const hasGeneratorConfig = text.includes('选择模型') ||
      text.includes('选择模板') ||
      text.includes('选个风格');
    const hasCreate = text.includes('立即创作') || text.includes('开始创作');
    const hasUpload = text.includes('上传') || Boolean(node.querySelector?.('input[type="file"]'));
    return hasGeneratorConfig && hasCreate && hasUpload;
  }

  function markFormatControls(panel) {
    if (!panel) return;

    const labels = [...panel.querySelectorAll('div, span, p, label')]
      .filter((node) => normalizedText(node) === '多格式');

    labels.forEach((label) => {
      label.classList.add(CLASS.formatLabel);

      const row = walkParents(label, (node) => isFormatRow(node, panel));
      if (!row) return;

      row.classList.add(CLASS.formatRow);
      markFormatChoices(row);
    });
  }

  function isFormatRow(node, panel) {
    if (!node || node === panel) return false;

    const text = normalizedText(node);
    return text.includes('多格式') && text.includes('JPEG') && text.includes('PNG') &&
      text.length <= 80;
  }

  function markFormatChoices(row) {
    [...row.querySelectorAll('button, label, div, span, p')]
      .filter((node) => /^(JPEG|PNG)$/.test(normalizedText(node)))
      .forEach((node) => {
        node.classList.add(CLASS.formatChoice);

        const parent = node.parentElement;
        if (parent && parent !== row && normalizedText(parent).length <= 20) {
          parent.classList.add(CLASS.formatChoice);
        }
      });
  }

  function findPromptInput(scope) {
    return scope?.querySelector(
      'textarea[placeholder*="描述"], textarea[placeholder*="重绘"], textarea'
    );
  }

  function findUploadControl(scope) {
    if (!scope) return null;
    return findClickableByText(scope, '上传参考图') ||
      scope.querySelector('input[type="file"]') ||
      scope.querySelector('[class*="upload" i]');
  }

  function focusPrompt(panel) {
    const prompt = findPromptInput(panel);
    if (!prompt) return;
    prompt.scrollIntoView({ block: 'center' });
    prompt.focus({ preventScroll: true });
  }

  function findHistoryRail() {
    const knownRail = document.querySelector('.picture-editor-content-left-drawer, .PictureEditorHistoryDrawer_container__fn3Ud, .TaskSide_record__JuEDU');
    if (knownRail instanceof HTMLElement && knownRail.querySelector('img')) return knownRail;

    const images = [...document.images].filter((image) => {
      const rect = image.getBoundingClientRect();
      return rect.left < 160 && rect.width > 24 && rect.width < 130 && rect.height > 24;
    });

    for (const image of images) {
      const rail = walkParents(image, (node) => {
        const rect = node.getBoundingClientRect();
        const imageCount = node.querySelectorAll?.('img').length || 0;
        return imageCount >= 2 && rect.height > 220 && rect.width > 44 && rect.width < 190;
      });
      if (rail) return rail;
    }

    return null;
  }

  function findDownloadControl() {
    const labeled = [
      '[title*="下载"]',
      '[aria-label*="下载"]',
      '[download]',
      '[class*="download" i]',
    ].flatMap((selector) => [...document.querySelectorAll(selector)]);

    const byText = [...document.querySelectorAll('button, a, [role="button"]')].filter((node) =>
      normalizedText(node).includes('下载')
    );

    const byRightPreviewIcon = [...document.querySelectorAll('button, a, [role="button"], i, span')]
      .filter(isLikelyPreviewDownload);

    return [...labeled, ...byText, ...byRightPreviewIcon].find(isUsable);
  }

  function findPrimaryResult() {
    return [...document.images]
      .map((image) => ({ image, rect: image.getBoundingClientRect() }))
      .filter(({ image, rect }) => {
        const src = image.currentSrc || image.src || '';
        return isUsable(image) && rect.width > 150 && rect.height > 150 &&
          !src.includes('logo') && !src.includes('bg-');
      })
      .sort((a, b) => b.rect.width * b.rect.height - a.rect.width * a.rect.height)
      .map(({ image }) => image)[0];
  }

  function isLikelyPreviewDownload(node) {
    const rect = node.getBoundingClientRect();
    if (!isUsable(node) || rect.left < window.innerWidth * 0.62 || rect.top > window.innerHeight * 0.66) {
      return false;
    }

    const signature = [
      node.className,
      node.getAttribute('title'),
      node.getAttribute('aria-label'),
      node.innerHTML,
    ].join(' ');
    return /download|xiazai|icon-download||/i.test(signature) &&
      !normalizedText(node).includes('上传');
  }

  function findClickableByText(scope, text) {
    if (!scope) return null;
    return [...scope.querySelectorAll('button, a, label, [role="button"]')]
      .find((node) => normalizedText(node).includes(text) && isUsable(node));
  }

  function walkParents(start, predicate) {
    let node = start;
    for (let depth = 0; node && depth < 18; depth += 1, node = node.parentElement) {
      if (predicate(node)) return node;
    }
    return null;
  }

  function normalizedText(node) {
    return (node?.innerText || node?.textContent || '').replace(/\s+/g, ' ').trim();
  }

  function isUsable(node) {
    if (!node || node.closest?.(`#${ROOT_ID}`)) return false;
    const rect = node.getBoundingClientRect();
    const style = getComputedStyle(node);
    return rect.width > 0 && rect.height > 0 &&
      style.visibility !== 'hidden' && style.display !== 'none';
  }

  function activate(node) {
    if (!node) return false;

    const target = node.closest?.('button, a, label, [role="button"], [role="menuitem"]') || node;
    try {
      target.scrollIntoView?.({ block: 'center', inline: 'center', behavior: 'auto' });
    } catch (_) {
      // keep going; old mobile browsers can reject scroll options
    }
    target.focus?.({ preventScroll: true });
    target.click?.();
    return true;
  }

  function toast(message) {
    const box = document.querySelector(`#${ROOT_ID} .zbai-mobile-toast`);
    if (!box) return;
    box.textContent = message;
    box.classList.add('is-visible');
    window.clearTimeout(toastTimer);
    toastTimer = window.setTimeout(() => box.classList.remove('is-visible'), 2600);
  }

  function ensureViewport() {
    if (!isMobile()) return;
    let viewport = document.querySelector('meta[name="viewport"]');
    if (!viewport) {
      viewport = document.createElement('meta');
      viewport.name = 'viewport';
      (document.head || document.documentElement).appendChild(viewport);
    }
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover');
  }

  function getPageType() {
    if (location.pathname === '/index/mine-homepage') return 'history';
    if (document.querySelector(EDITOR_ROOT_SELECTOR)) return 'editor';
    if (isCreateRoute()) return 'editor';
    return 'home';
  }

  function updatePageType() {
    document.documentElement.dataset.zbaiPage = getPageType();
  }

  function isCreateRoute() {
    return location.pathname.startsWith('/create/');
  }

  function isMobile() {
    const physicalWidth = Math.min(window.screen.width || window.innerWidth, window.screen.height || window.innerHeight);
    const hasTouch = navigator.maxTouchPoints > 0 || 'ontouchstart' in window;
    return media.matches || window.innerWidth <= 768 || (hasTouch && physicalWidth <= 820);
  }

  function delay(ms) {
    return new Promise((resolve) => window.setTimeout(resolve, ms));
  }

  function throttle(callback, wait) {
    let timer = 0;
    return () => {
      if (timer) return;
      timer = window.setTimeout(() => {
        timer = 0;
        callback();
      }, wait);
    };
  }

  function waitForBody(callback) {
    if (document.body) {
      callback();
      return;
    }
    window.addEventListener('DOMContentLoaded', callback, { once: true });
  }

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

  html[data-zbai-mobile="1"][data-zbai-page="editor"],
  html[data-zbai-mobile="1"][data-zbai-page="editor"] body#haimeta {
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html[data-zbai-mobile="1"] #haimeta *,
  html[data-zbai-mobile="1"] #haimeta *::before,
  html[data-zbai-mobile="1"] #haimeta *::after {
    box-sizing: border-box !important;
  }

  html[data-zbai-mobile="1"] img,
  html[data-zbai-mobile="1"] video,
  html[data-zbai-mobile="1"] canvas {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    background-blend-mode: normal !important;
    image-rendering: auto !important;
  }

  body.${CLASS.enabled}.${CLASS.lock} {
    overflow: hidden !important;
  }

  html[data-zbai-mobile="1"] [class*="desktop" i],
  html[data-zbai-mobile="1"] [class*="Desktop" i],
  html[data-zbai-mobile="1"] [class*="pc" i],
  html[data-zbai-mobile="1"] [class*="Pc" i] {
    max-width: 100vw !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="editor"] #root,
  html[data-zbai-mobile="1"][data-zbai-page="editor"] .PageContainer_haimetaApp__qfjGd,
  html[data-zbai-mobile="1"][data-zbai-page="editor"] .PageContainer_indexContent__5aBHJ,
  html[data-zbai-mobile="1"][data-zbai-page="editor"] #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"][data-zbai-page="editor"] #pictureEditor {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !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;
  }

  html[data-zbai-mobile="1"] .picture-editor-header .center {
    display: none !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-header .left {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-header .left img {
    max-height: 30px !important;
    width: auto !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-header .right {
    width: auto !important;
    min-width: 0 !important;
    max-width: 46vw !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-header .right .login-btn {
    white-space: nowrap !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-header .right button {
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-content {
    height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)) !important;
    width: 100vw !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: auto !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-content-left-drawer,
  html[data-zbai-mobile="1"] .PictureEditorHistoryDrawer_container__fn3Ud,
  html[data-zbai-mobile="1"] .TaskSide_record__JuEDU {
    display: none !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-content-box {
    width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-content-render {
    width: 100vw !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 18dvh !important;
    min-height: 104px !important;
    max-height: 34dvh !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-content-render > * {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  html[data-zbai-mobile="1"] .picture-editor-content-control {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px 18px 0 0 !important;
    background: var(--Background-2-Normal, #f1f2f8) !important;
    box-shadow: 0 -10px 30px rgba(20, 24, 38, 0.08) !important;
  }

  html[data-zbai-mobile="1"] .PictureEditorControl_PictureEditorControl__T6FHN {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  html[data-zbai-mobile="1"] .control-config {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  html[data-zbai-mobile="1"] .control-config > div,
  html[data-zbai-mobile="1"] .option-need-margin {
    width: 100% !important;
    margin: 0 !important;
  }

  html[data-zbai-mobile="1"] .control-config-title {
    width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    margin: 0 0 8px !important;
    line-height: 24px !important;
    position: relative !important;
    z-index: 1 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    transform: none !important;
    translate: none !important;
  }

  html[data-zbai-mobile="1"] #multifunctional-input,
  html[data-zbai-mobile="1"] .MultifunctionalInput_multifunctionalInput__NHcuq,
  html[data-zbai-mobile="1"] .Input_input__A9sVA,
  html[data-zbai-mobile="1"] .input-box,
  html[data-zbai-mobile="1"] textarea.textarea-buttons,
  html[data-zbai-mobile="1"] textarea.ant-input {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-zbai-mobile="1"] textarea.textarea-buttons,
  html[data-zbai-mobile="1"] textarea.ant-input {
    min-height: 92px !important;
    max-height: 160px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  html[data-zbai-mobile="1"] .MultifunctionalInput_multifunctionalInput__NHcuq .bg-1,
  html[data-zbai-mobile="1"] .MultifunctionalInput_multifunctionalInput__NHcuq .bg-2 {
    display: none !important;
  }

  html[data-zbai-mobile="1"] .ChooseModelWithDetails_ChooseModelWithDetails__m_Cbs,
  html[data-zbai-mobile="1"] .ChooseModelWithDetails_selectBox__HoIuc,
  html[data-zbai-mobile="1"] .ChooseModelWithDetails_selectItem__7NA37 {
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
  }

  html[data-zbai-mobile="1"] .ChooseSizeBase_chooseSizeBase__KgHNI,
  html[data-zbai-mobile="1"] .choose-size-base-shape {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  html[data-zbai-mobile="1"] .choose-size-base-shape > div,
  html[data-zbai-mobile="1"] .shape-item,
  html[data-zbai-mobile="1"] .shape-item .item {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 60px !important;
    scroll-snap-align: start !important;
  }

  html[data-zbai-mobile="1"] .ControlBottom_controlBottom__gooOU,
  html[data-zbai-mobile="1"] .generate-button-container {
    width: 100% !important;
    height: auto !important;
    margin-top: 10px !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 2 !important;
    transform: none !important;
    box-shadow: none !important;
    background: var(--Background-2-Normal, #f1f2f8) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html[data-zbai-mobile="1"] .ChooseNumber_ChooseNumber__J1uo_,
  html[data-zbai-mobile="1"] .choose-number-content {
    width: 100% !important;
  }

  html[data-zbai-mobile="1"] .choose-number-content {
    display: grid !important;
    grid-template-columns: auto minmax(120px, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html[data-zbai-mobile="1"] .choose-number-options {
    justify-self: end !important;
    width: min(160px, 48vw) !important;
  }

  html[data-zbai-mobile="1"] .generate-button-container,
  html[data-zbai-mobile="1"] .control-buttons {
    width: 100% !important;
    min-height: 50px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html[data-zbai-mobile="1"] .generate-button-container button {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    background: #11120d !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(17, 18, 13, 0.18) !important;
    font-size: 15px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html[data-zbai-mobile="1"] .fixed.top-0.left-0.w-screen.h-screen {
    padding: env(safe-area-inset-top, 0px) 12px env(safe-area-inset-bottom, 0px) !important;
    align-items: center !important;
  }

  html[data-zbai-mobile="1"] .LoginModal_LoginModal__O59AS,
  html[data-zbai-mobile="1"] [class*="LoginModal"] {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }

  html[data-zbai-mobile="1"][data-zbai-login-open="1"] .fixed.top-0.left-0.w-screen.h-screen,
  html[data-zbai-mobile="1"][data-zbai-login-open="1"] .LoginModal_LoginModal__O59AS,
  html[data-zbai-mobile="1"][data-zbai-login-open="1"] [class*="LoginModal"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] #root,
  html[data-zbai-mobile="1"][data-zbai-page="home"] .PageContainer_haimetaApp__qfjGd,
  html[data-zbai-mobile="1"][data-zbai-page="home"] .PageContainer_indexContent__5aBHJ,
  html[data-zbai-mobile="1"][data-zbai-page="home"] main,
  html[data-zbai-mobile="1"][data-zbai-page="home"] section {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] #picture-editor-header.PictureEditorHeader_homepageHeader__j_gnO,
  html[data-zbai-mobile="1"][data-zbai-page="home"] .picture-editor-header,
  html[data-zbai-mobile="1"][data-zbai-page="home"] #picture-editor-header,
  html[data-zbai-mobile="1"][data-zbai-page="home"] header {
    width: 100vw !important;
    min-width: 0 !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 10px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--Background-1-Normal, #f4f5fb) !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] .SidebarNavigation_sidebarNavigation__KTG_b {
    display: none !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] main.index-main,
  html[data-zbai-mobile="1"][data-zbai-page="home"] .index-main-content,
  html[data-zbai-mobile="1"][data-zbai-page="home"] #index-main-content--right {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: calc(100dvh - 52px) !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="waterfall"],
  html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="Waterfall"],
  html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="card-list"],
  html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="CardList"],
  html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="template-list"],
  html[data-zbai-mobile="1"][data-zbai-page="home"] [class*="TemplateList"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    pointer-events: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-auth {
    position: fixed !important;
    z-index: 2147483603 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    min-width: 64px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 19px !important;
    color: #fff !important;
    background: rgba(17, 18, 13, 0.9) !important;
    box-shadow: 0 8px 22px rgba(20, 24, 38, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font: 800 13px/38px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-close {
    display: none !important;
    position: fixed !important;
    z-index: 2147483606 !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(31, 35, 40, .14) !important;
    border-radius: 20px !important;
    color: #17191f !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 28px rgba(19, 24, 33, .18) !important;
    font: 800 14px/40px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    pointer-events: auto !important;
  }

  body.${CLASS.enabled} #${ROOT_ID}[data-zbai-surface] .zbai-mobile-close {
    display: block !important;
  }

  body.${CLASS.enabled} #${ROOT_ID}:not([data-zbai-route="compose"]) .zbai-mobile-dock {
    display: none !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-dock {
    position: fixed !important;
    z-index: 2147483602 !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 12px 36px rgba(19, 24, 33, .18) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    pointer-events: auto !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-dock button {
    min-width: 0 !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #17191f !important;
    background: #eef0f7 !important;
    font: 800 14px/20px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    touch-action: manipulation !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-dock button:first-child {
    color: #fff !important;
    background: #11120d !important;
    box-shadow: 0 8px 20px rgba(17, 18, 13, .16) !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-ready {
    position: fixed !important;
    z-index: 2147483603 !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(31, 35, 40, .12) !important;
    border-radius: 999px !important;
    color: #17191f !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 8px 22px rgba(19, 24, 33, .16) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    pointer-events: none !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    background: rgba(10, 12, 18, .34) !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  body.${CLASS.enabled} #${ROOT_ID}[data-zbai-surface] .zbai-mobile-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-toast {
    position: fixed !important;
    z-index: 2147483607 !important;
    right: 18px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    left: 18px !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: rgba(23, 25, 31, .94) !important;
    box-shadow: 0 12px 30px rgba(19, 24, 33, .24) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity .16s ease, transform .16s ease !important;
    pointer-events: none !important;
  }

  body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-toast.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  body.${CLASS.enabled} .${CLASS.compose}.${CLASS.composeOpen} {
    position: fixed !important;
    z-index: 2147483601 !important;
    inset: auto 0 0 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: min(88dvh, 860px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    box-shadow: 0 -16px 42px rgba(19, 24, 33, .24) !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.${CLASS.enabled} .${CLASS.compose}.${CLASS.composeOpen} textarea {
    min-height: 108px !important;
  }

  body.${CLASS.enabled} .${CLASS.compose}.${CLASS.composeOpen} button {
    min-height: 40px !important;
  }

  body.${CLASS.enabled} .${CLASS.compose}.${CLASS.composeOpen} .${CLASS.formatLabel} {
    flex: 0 0 auto !important;
    min-width: 48px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
  }

  body.${CLASS.enabled} .${CLASS.compose}.${CLASS.composeOpen} .${CLASS.formatRow} {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }

  body.${CLASS.enabled} .${CLASS.compose}.${CLASS.composeOpen} .${CLASS.formatRow} .${CLASS.formatChoice} {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  body.${CLASS.enabled} .ant-select-dropdown,
  body.${CLASS.enabled} .ant-dropdown,
  body.${CLASS.enabled} .arco-select-popup,
  body.${CLASS.enabled} .el-select-dropdown,
  body.${CLASS.enabled} [role="listbox"],
  body.${CLASS.enabled} [class*="dropdown" i],
  body.${CLASS.enabled} [class*="popover" i],
  body.${CLASS.enabled} [class*="popper" i],
  body.${CLASS.enabled} [class*="select-dropdown" i],
  body.${CLASS.enabled} [data-radix-popper-content-wrapper] {
    z-index: 2147483605 !important;
  }

  body.${CLASS.enabled} .${CLASS.history}.${CLASS.historyOpen} {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    z-index: 2147483601 !important;
    inset: 0 auto 0 0 !important;
    width: min(40vw, 148px) !important;
    min-width: 92px !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 12px 8px calc(92px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 18px 18px 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    background: #f8f8fb !important;
    box-shadow: 10px 0 34px rgba(19, 24, 33, .22) !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.${CLASS.enabled} .${CLASS.history}.${CLASS.historyOpen} img {
    max-width: 100% !important;
    height: auto !important;
  }
}

#${ROOT_ID} {
  display: none;
}
`;

    if (shouldAppend) {
      const target = document.head || document.documentElement;
      target.appendChild(style);
    }
  }
})();