/* 移动端定向修复（仅 CSS，不改 JS / 现有布局）：
   1) 隐藏状态的弹窗 / 蒙层不得拦截点击（P2-3 一类「浮层盖住主按钮」）。
   2) 「全部格式」在手机上不再做向上绝对定位浮层，改为内联展开，主下载按钮保持可见可点。
   3) 主要操作点击区域补到 44px（P2-8），并给弹窗操作条 / 固定元素加 safe-area-inset-bottom。
   目标断点 720px；桌面样式完全不受影响。加载顺序必须位于 styles.css 与 login.css 之后。 */

/* ---------- 1. 隐藏态安全：即使样式被覆盖，隐藏的弹窗也不能挡住页面 ---------- */
.login-modal.hidden,
.wizard.hidden,
.toast.hidden,
.convert-error-banner.hidden,
.user-menu.hidden,
.side-result.hidden {
  display: none !important;
}
.login-modal[aria-hidden="true"],
.wizard[aria-hidden="true"] {
  display: none !important;
}
.login-modal.hidden .login-modal-backdrop,
.wizard.hidden .wizard-backdrop {
  pointer-events: none !important;
}

/* 弹窗打开时才允许蒙层接收点击（点蒙层关闭依赖现有 JS 的点击监听） */
.login-modal-backdrop,
.wizard-backdrop {
  pointer-events: auto;
}

/* ---------- 2. 登录页新增的法务链接（移动端与桌面共用） ---------- */
.auth-legal-links {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: #5d7088;
  font-size: 13px;
  line-height: 1.5;
}
.auth-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 2px;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-legal-links a:hover { color: var(--blue); }
.auth-legal-links .sep { color: #9aabbd; }

.login-modal-foot a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-modal-foot a:hover { color: var(--blue); }

/* 「用户中心」里的法务链接：锚点沿用菜单项样式 */
.user-menu a.user-menu-item {
  display: block;
  text-align: left;
  text-decoration: none;
  line-height: 1.5;
}

/* ================= 移动端 ================= */
@media (max-width: 720px) {
  /* ---------- 2.1 「全部格式」：取消向上浮层，改为内联展开 ----------
     原实现（styles.css ≤760px）用 position:absolute; bottom:calc(100%+6px) 把 8 个
     格式按钮盖在主下载按钮与机型选择上方。这里改为正常文档流 + 自身滚动：
     主下载按钮始终在上方可见、可点；列表再长也只在自身区域内滚动。 */
  .settings-panel.show-all-formats {
    max-height: none;
    overflow: visible;
  }
  .settings-panel.show-all-formats .side-format-details[open] > .side-result-list {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-top: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  /* 展开后主下载按钮保持突出的「行动条」视觉，避免被误认为次要操作 */
  .settings-panel.has-result .side-result.is-flash,
  .settings-panel.has-result #side-primary-download {
    position: relative;
    z-index: 6;
  }

  /* ---------- 2.2 点击目标 ≥ 44px（P2-8 列出的 26–36px 元素） ---------- */
  .side-format-details > summary,
  #side-machine-select,
  .side-result-list .download-action,
  #side-download-list .download-action,
  .download-all,
  .more-formats,
  .select-all,
  .size-actions .text-button,
  .upload-actions .remove-button,
  #replace-file,
  #remove-file,
  .canvas-toggle,
  .image-tool,
  .icon-tool,
  .palette-button,
  #palette-button,
  #palette-auto,
  .help-button,
  .user-button,
  .user-menu-item,
  .auth-tab,
  .wizard-button,
  .login-modal-close,
  .wizard-close {
    min-height: 44px;
  }
  #side-primary-download { min-height: 48px; }

  /* 画布内浮层按钮：视觉保持紧凑，但命中区域补到 44×44 */
  .pixi-zoom { gap: 0; padding: 2px; }
  .pixi-zoom button {
    min-width: 44px;
    height: 44px;
    padding: 0 4px;
    font-size: 17px;
  }
  .pixi-zoom-fit { display: none; }
  .canvas-stitch-opacity {
    min-height: 44px;
    padding: 3px 10px;
  }
  .canvas-stitch-opacity input { height: 28px; }

  /* 顶栏图标按钮：视觉可小，命中区域 44；顶栏略增高以容纳 44px 命中区 */
  .topbar { height: 48px; }
  .help-button { min-width: 44px; height: 44px; }
  .user-button { min-width: 44px; min-height: 44px; }

  /* ---------- 2.3 底部安全区与固定操作条 ----------
     iPhone 的 Home Indicator 会盖住底部按钮：固定元素统一抬高，
     向导弹窗的底部操作条改为吸底并加安全区内边距。 */
  .main-content {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .toast {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
  }
  .convert-error-banner {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* 三步向导：底部操作条吸底，始终可点，且不被 Home Indicator 遮住 */
  .wizard-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fbfcfe;
    box-shadow: 0 -6px 16px rgba(24, 47, 66, .06);
  }
  .wizard-footer .wizard-button { flex: 1 1 0; }

  /* 登录弹窗：内容不超过视口，底部按钮避开安全区 */
  .login-modal { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .login-modal-panel {
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .login-modal-close {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }

  /* 登录页：底部留出安全区，主按钮不贴边 */
  .auth-shell {
    padding-top: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .auth-legal-links a { min-height: 44px; }
  .auth-tab { min-height: 44px; }
  .auth-primary { min-height: 50px; }
  .auth-secondary { min-height: 44px; }
}

/* 极小屏（≤ 380px）：向导底部按钮文字不换行溢出 */
@media (max-width: 380px) {
  .wizard-footer-right { flex-wrap: wrap; }
  .wizard-footer .wizard-button { white-space: nowrap; }
}