// ==UserScript==
// @name         珠宝AI 移动端适配
// @namespace    https://zbai.art/
// @version      0.7.7
// @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 HOME_SHELL_ID = 'zbai-mobile-home-shell';
  const MOBILE_QUERY = '(max-width: 768px), (pointer: coarse), (max-device-width: 820px)';
  const HISTORY_URL = '/index/mine-homepage';
  const VERSION = '0.7.7';

  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';
  const HOME_TOOL_ACTIONS = [
    { key: 'image', label: '图片创作', eyebrow: 'Image', href: '/create/module/image', desc: '生成首饰海报、商品图和创意画面' },
    { key: 'video', label: '视频创作', eyebrow: 'Video', href: '/create/module/video', desc: '制作运镜展示、旋转视频和短片素材' },
  ];
  const TEMPLATE_ACTIONS = [
    { label: '珠宝海报', href: '/create/ai-effects/jewelry-poster', tag: '海报', desc: '快速生成东方美学商品海报' },
    { label: '道具展示', href: '/create/ai-effects/jewelry-display', tag: '展示', desc: '为首饰匹配托盘、布景与道具' },
    { label: '社交媒体图', href: '/create/ai-effects/social-media', tag: '种草', desc: '小红书、朋友圈风格内容图' },
    { label: '大片模特', href: '/create/ai-effects/jewelry-models-display', tag: '模特', desc: '真人佩戴与商业大片画面' },
    { label: '珠宝纯净图', href: '/create/ai-effects/jewelry-background', tag: '底图', desc: '白底、黑底和纯净背景图' },
    { label: '精致摄影', href: '/create/ai-effects/finephotograph', tag: '摄影', desc: '高级光影、倒影和质感摄影' },
    { label: '布料与珠宝', href: '/create/ai-effects/jewelry-cloth', tag: '布料', desc: '丝绸、天鹅绒等材质布景' },
    { label: '珠宝多视角', href: '/create/ai-effects/jewelry-multiview', tag: '视角', desc: '多角度展示结构与细节' },
    { label: '珠宝详情页', href: '/create/ai-effects/product-details-page', tag: '详情', desc: '电商详情页视觉图' },
    { label: '珠宝视频', href: '/create/ai-effects/jewelry-360-display', tag: '视频', desc: '旋转展示与火彩展示视频' },
  ];

  window.__ZBAI_DEBUG__ = window.__ZBAI_DEBUG__ === true;
  window.__ZBAI_MOBILE_ADAPTER_VERSION__ = VERSION;
  window.__ZBAI_MOBILE_ADAPTER_MERGE__ = '0.7.5-ui+0.2.3-actions';
  window.__ZBAI_MOBILE_ADAPTER_DIAGNOSE__ = collectDiagnostics;

  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();
    installListeners(root);

    const observer = new MutationObserver(throttle(() => {
      syncMode();
    }, 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-back" data-zbai-action="back" 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 === 'back') goBack();
    if (action === 'compose') toggleCompose();
    if (action === 'upload') openUpload();
    if (action === 'history') toggleHistory();
    if (action === 'download') openDownload();
    if (action === 'auth') toggleAuth();
  }

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

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

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

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

    openSurface('compose', panel);
    const imageMode = findModeToggle(panel, '图生');
    if (imageMode) {
      activate(imageMode);
      await waitForImageUploadControl(panel);
    }

    const 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 goBack() {
    closeSurface();

    let sameOriginReferrer = false;
    try {
      sameOriginReferrer = Boolean(document.referrer) &&
        new URL(document.referrer).origin === window.location.origin;
    } catch (_) {
      sameOriginReferrer = false;
    }

    if (sameOriginReferrer && window.history.length > 1) {
      window.history.back();
      return;
    }

    navigateTo('/');
  }

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

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

    if (document.documentElement.dataset.zbaiPage === 'home') ensureMobileHomeShell();
    else cleanupMobileHomeShell();

    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();
    if (window.__ZBAI_DEBUG__ === true) debugLog('refreshTargets', collectDiagnostics());
  }

  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"]',
      '[data-radix-popper-content-wrapper]',
    ].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() {
    document.documentElement.dataset.zbaiLoginOpen = '1';
    const login = findLoginButton();
    if (!login) {
      delete document.documentElement.dataset.zbaiLoginOpen;
      toast('还没找到原站登录入口，刷新首页后再点');
      debugLog('openLogin:missing', collectDiagnostics());
      return;
    }

    debugLog('openLogin', describeElement(login));
    activate(login);
    scheduleLoginStateCleanup();
  }

  async function openLogout() {
    let logout = findLogoutButton();
    if (logout) {
      debugLog('openLogout:direct', describeElement(logout));
      activate(logout);
      return;
    }

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

    activate(avatar);
    await delay(260);
    logout = findLogoutButton();
    if (logout) {
      debugLog('openLogout:menu', describeElement(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}, #${HOME_SHELL_ID}`))
      .find((node) => {
        const text = normalizedText(node);
        return text.length <= 16 && pattern.test(text) && isUsable(node);
      });
  }

  function findLoginButton() {
    return findAuthTextControl(/^(登录|登录\/注册|注册\/登录|Log In|Login|Sign In)$/i) ||
      findAuthTextControl(/登录|Log In|Login|Sign In/i);
  }

  function findLogoutButton() {
    return findAuthTextControl(/退出登录|退出账号|退出|Log Out|Logout|Sign Out/i);
  }

  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 findUploadTrigger(scope) ||
      [...scope.querySelectorAll('input[type="file"]')].find(isImageUploadInput) ||
      [...scope.querySelectorAll('[class*="upload" i]')].find((node) =>
        isUsable(node) && /上传参考图|上传图片|添加图片/.test(normalizedText(node))
      );
  }

  async function waitForComposePanel() {
    const waits = [0, 180, 420, 800, 1300, 2100];
    let fallback = null;
    for (const wait of waits) {
      if (wait) await delay(wait);
      const panel = findComposePanel();
      if (!panel) continue;
      if (isReadyComposePanel(panel)) return panel;
      if (!fallback) fallback = panel;
    }
    return fallback;
  }

  function isReadyComposePanel(panel) {
    return Boolean(
      findPromptInput(panel) ||
      findGenerateButton(panel) ||
      findModeToggle(panel, '图生') ||
      findUploadTrigger(panel) ||
      [...panel.querySelectorAll('input[type="file"]')].some(isImageUploadInput)
    );
  }

  async function waitForImageUploadControl(panel) {
    const waits = [120, 220, 360, 520];
    for (const wait of waits) {
      await delay(wait);
      if (findUploadControl(findComposePanel() || panel)) return true;
    }
    return false;
  }

  function findModeToggle(scope, text) {
    if (!scope) return null;

    return [...scope.querySelectorAll('button, a, label, [role="button"], div, span')]
      .filter((node) => normalizedText(node) === text && isUsable(node))
      .map((node) => node.closest('button, a, label, [role="button"]') || node)
      .sort((a, b) => elementArea(a) - elementArea(b))[0] || null;
  }

  function findUploadTrigger(scope) {
    return [...scope.querySelectorAll([
      'button',
      'a',
      'label',
      '[role="button"]',
      '.ant-upload',
      '.ant-upload-btn',
      '.upload-custom-button',
      '[class*="CoverUpload" i]',
      'div',
      'span',
    ].join(','))]
      .filter((node) => {
        const text = normalizedText(node);
        return isUsable(node) && /上传参考图|上传图片|添加图片/.test(text);
      })
      .map((node) => node.closest('button, a, label, [role="button"], .ant-upload, .ant-upload-btn') || node)
      .sort((a, b) => elementArea(a) - elementArea(b))[0] || null;
  }

  function isImageUploadInput(node) {
    if (!(node instanceof HTMLInputElement) || node.type !== 'file') return false;
    const accept = node.accept || '';
    if (!accept) return true;
    return /image\/(jpeg|jpg|png|bmp|webp|heic)|\.(jpe?g|png|bmp|webp|heic)/i.test(accept);
  }

  function elementArea(node) {
    const rect = node.getBoundingClientRect();
    return Math.max(1, Math.round(rect.width * rect.height));
  }

  function findGenerateButton(scope = document) {
    const root = scope || document;
    const isGenerate = (node) => {
      if (!(node instanceof HTMLElement) || node.closest(`#${ROOT_ID}, #${HOME_SHELL_ID}`)) return false;
      return isUsable(node) && /立即创作|开始创作/.test(normalizedText(node));
    };

    return [...root.querySelectorAll('button, [role="button"]')].find(isGenerate) ||
      [...root.querySelectorAll('.generate-button-container, .ControlBottom_controlBottom__gooOU')].find(isGenerate) ||
      null;
  }

  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;
    debugLog('activate', describeElement(target));
    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 debugLog(label, data) {
    if (window.__ZBAI_DEBUG__ !== true) return;
    console.debug('[ZBAI mobile]', label, data);
  }

  function collectDiagnostics() {
    const composePanel = findComposePanel();
    const uploadControl = composePanel ? findUploadControl(composePanel) : null;
    const generateButton = findGenerateButton(composePanel || document);
    const historyRail = findHistoryRail();
    const downloadButton = findDownloadControl();
    const loginButton = findLoginButton();
    const logoutButton = findLogoutButton();
    const profileAvatar = findProfileAvatar();

    return {
      version: VERSION,
      href: window.location.href,
      pageType: document.documentElement.dataset.zbaiPage || getPageType(),
      mobile: isMobile(),
      activeSurface,
      found: {
        composePanel: Boolean(composePanel),
        uploadControl: Boolean(uploadControl),
        generateButton: Boolean(generateButton),
        historyRail: Boolean(historyRail),
        downloadButton: Boolean(downloadButton),
        loginButton: Boolean(loginButton),
        logoutButton: Boolean(logoutButton),
        profileAvatar: Boolean(profileAvatar),
        loggedIn: isLoggedIn(),
      },
      elements: {
        composePanel: describeElement(composePanel),
        uploadControl: describeElement(uploadControl),
        generateButton: describeElement(generateButton),
        historyRail: describeElement(historyRail),
        downloadButton: describeElement(downloadButton),
        loginButton: describeElement(loginButton),
        logoutButton: describeElement(logoutButton),
        profileAvatar: describeElement(profileAvatar),
      },
    };
  }

  function describeElement(node) {
    if (!(node instanceof HTMLElement)) return null;
    const rect = node.getBoundingClientRect();
    return {
      tag: node.tagName.toLowerCase(),
      id: node.id || '',
      className: String(node.className || '').slice(0, 120),
      text: normalizedText(node).slice(0, 80),
      ariaLabel: node.getAttribute('aria-label') || '',
      title: node.getAttribute('title') || '',
      rect: {
        x: Math.round(rect.x),
        y: Math.round(rect.y),
        width: Math.round(rect.width),
        height: Math.round(rect.height),
      },
    };
  }

  function ensureMobileHomeShell() {
    let shell = document.getElementById(HOME_SHELL_ID);
    if (!shell) {
      shell = document.createElement('main');
      shell.id = HOME_SHELL_ID;
      shell.innerHTML = `
        <div class="zbai-mobile-topbar">
          <button class="zbai-mobile-menu-button" type="button" data-home-action="menu" aria-label="菜单">☰</button>
          <div class="zbai-mobile-brand">珠宝AI</div>
          <div class="zbai-mobile-auth-pills">
            <button class="zbai-mobile-pill-button" type="button" data-home-action="login">登录</button>
            <button class="zbai-mobile-pill-button" type="button" data-home-action="history">历史</button>
            <button class="zbai-mobile-pill-button" type="button" data-home-action="logout" hidden>退出</button>
          </div>
        </div>
        <section class="zbai-mobile-section-title">
          <strong>开始创作</strong>
          <small>选择一个入口</small>
        </section>
        <section class="zbai-mobile-tool-grid"></section>
        <section class="zbai-mobile-section-title">
          <strong>模板功能</strong>
          <small>点击即用</small>
        </section>
        <section class="zbai-mobile-template-grid"></section>
      `;
      shell.addEventListener('click', handleHomeShellClick);
      document.body.appendChild(shell);
    }

    updateMobileHomeAuth(shell);
    renderMobileHomeActions(shell);
  }

  function cleanupMobileHomeShell() {
    document.getElementById(HOME_SHELL_ID)?.remove();
  }

  function handleHomeShellClick(event) {
    const actionButton = event.target.closest('[data-home-action]');
    if (actionButton) {
      event.preventDefault();
      event.stopPropagation();
      runHomeAction(actionButton.getAttribute('data-home-action'));
      return;
    }

    const toolButton = event.target.closest('[data-tool-key]');
    if (toolButton) {
      event.preventDefault();
      event.stopPropagation();
      openHomeTool(toolButton.getAttribute('data-tool-key'));
      return;
    }

    const navButton = event.target.closest('[data-href]');
    if (!navButton) return;
    event.preventDefault();
    event.stopPropagation();
    navigateTo(navButton.getAttribute('data-href'));
  }

  function updateMobileHomeAuth(shell) {
    const loggedIn = isLoggedIn();
    const loginButton = shell.querySelector('[data-home-action="login"]');
    const logoutButton = shell.querySelector('[data-home-action="logout"]');
    if (loginButton) loginButton.hidden = loggedIn;
    if (logoutButton) logoutButton.hidden = !loggedIn;
  }

  function renderMobileHomeActions(shell) {
    const toolGrid = shell.querySelector('.zbai-mobile-tool-grid');
    const templateGrid = shell.querySelector('.zbai-mobile-template-grid');

    if (toolGrid && toolGrid.dataset.ready !== '1') {
      toolGrid.innerHTML = HOME_TOOL_ACTIONS.map((item) => `
        <button class="zbai-mobile-tool-card" type="button" data-tool-key="${escapeHtml(item.key)}">
          <small>${escapeHtml(item.eyebrow)}</small>
          <strong>${escapeHtml(item.label)}</strong>
          <span>${escapeHtml(item.desc)}</span>
        </button>
      `).join('');
      toolGrid.dataset.ready = '1';
    }

    if (templateGrid && templateGrid.dataset.ready !== '1') {
      templateGrid.innerHTML = TEMPLATE_ACTIONS.map((item) => `
        <button class="zbai-mobile-template-card" type="button" data-href="${escapeHtml(item.href)}">
          <span class="zbai-mobile-template-tag">${escapeHtml(item.tag)}</span>
          <strong>${escapeHtml(item.label)}</strong>
          <small>${escapeHtml(item.desc)}</small>
        </button>
      `).join('');
      templateGrid.dataset.ready = '1';
    }
  }

  function runHomeAction(action) {
    if (action === 'login') {
      openLogin();
      return;
    }
    if (action === 'logout') {
      openLogout();
      return;
    }
    if (action === 'history') {
      navigateTo(HISTORY_URL);
      return;
    }
    if (action === 'menu') {
      activate(findOriginalMenuButton());
    }
  }

  function openHomeTool(key) {
    const action = HOME_TOOL_ACTIONS.find((item) => item.key === key);
    if (action) navigateTo(action.href);
  }

  function findOriginalMenuButton() {
    return [...document.querySelectorAll('button, [role="button"], a')]
      .filter((node) => !node.closest(`#${ROOT_ID}, #${HOME_SHELL_ID}`))
      .find((node) => {
        const text = normalizedText(node);
        const label = node.getAttribute('aria-label') || node.getAttribute('title') || '';
        return isUsable(node) && (/^(☰|菜单|Menu)$/i.test(text) || /菜单|menu/i.test(label));
      });
  }

  function navigateTo(path) {
    if (!path) return;
    window.location.assign(new URL(path, window.location.origin).href);
  }

  function escapeHtml(value) {
    return String(value).replace(/[&<>"']/g, (char) => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
    }[char]));
  }

  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;
    }
    let done = false;
    const run = () => {
      if (done || !document.body) return;
      done = true;
      window.clearInterval(timer);
      callback();
    };
    const timer = window.setInterval(run, 50);
    window.setTimeout(() => window.clearInterval(timer), 8000);
    document.addEventListener('DOMContentLoaded', run, { once: true });
    window.addEventListener('load', run, { 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"][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 {
    display: none !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"][data-zbai-login-open="1"] #root {
    display: block !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"][data-zbai-login-open="1"] #${HOME_SHELL_ID} {
    display: none !important;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-auth {
    display: none !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10025 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, #fbfaf8 0%, #eef2f6 100%) !important;
    color: #111318 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior-y: contain !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} * {
    box-sizing: border-box !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-topbar {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    margin-bottom: 16px !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-menu-button {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #17191f !important;
    box-shadow: 0 8px 22px rgba(21, 24, 33, 0.08) !important;
    font: 900 18px/32px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    touch-action: manipulation !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-brand {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #111318 !important;
    font: 900 13px/18px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-auth-pills {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
    padding: 3px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 28px rgba(19, 24, 33, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-pill-button {
    min-width: 46px !important;
    height: 28px !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 0 11px !important;
    background: #eef0f5 !important;
    color: #202333 !important;
    font: 800 12px/28px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-pill-button[data-home-action="login"],
  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-pill-button[data-home-action="logout"] {
    background: #050605 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(5, 6, 5, 0.18) !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-section-title {
    margin: 12px 0 10px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 30px !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-section-title strong {
    color: #141722 !important;
    font: 900 20px/30px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-section-title small {
    color: #7a808e !important;
    font: 700 11px/18px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-tool-grid,
  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-tool-card,
  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #141722 !important;
    box-shadow: 0 12px 30px rgba(38, 45, 65, 0.08) !important;
    overflow: hidden !important;
    text-align: left !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-tool-card {
    min-height: 98px !important;
    padding: 14px !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-card {
    min-height: 92px !important;
    padding: 12px !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-tool-card small,
  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-card small {
    display: block !important;
    color: #6f7584 !important;
    font: 700 11px/16px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-tool-card strong {
    display: block !important;
    margin-top: 7px !important;
    color: #171a22 !important;
    font: 900 18px/23px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-tool-card span {
    display: block !important;
    margin-top: 5px !important;
    color: #5b6070 !important;
    font: 600 11px/16px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-tag {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    background: #f0f2f6 !important;
    color: #6d7481 !important;
    font: 800 10px/22px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-card strong {
    display: block !important;
    margin-top: 8px !important;
    color: #171a22 !important;
    font: 900 15px/20px -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  }

  html[data-zbai-mobile="1"] #${HOME_SHELL_ID} .zbai-mobile-template-card small {
    margin-top: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !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} .zbai-mobile-back {
    display: none !important;
    position: fixed !important;
    z-index: 2147483603 !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;
    touch-action: manipulation !important;
  }

  html[data-zbai-mobile="1"]:not([data-zbai-page="home"]) body.${CLASS.enabled} #${ROOT_ID}:not([data-zbai-surface]) .zbai-mobile-back {
    display: block !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;
  }

  html[data-zbai-mobile="1"][data-zbai-page="home"] body.${CLASS.enabled} #${ROOT_ID} .zbai-mobile-ready {
    left: 10px !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !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} [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;
      if (!target) {
        window.setTimeout(injectStyles, 0);
        return;
      }
      target.appendChild(style);
    }
  }
})();