/* ============================================================
   CrossKit 移动端体验增强 (mobile.css)
   目标：消除横向滚动、≥48px 点击区域、禁用 iOS 聚焦缩放、
        修复微信/Safari 文件选择、适配刘海屏安全区。
   加载顺序：base.html 中位于 extra_stylesheets(tool-pages.css) 之后，
   故可覆盖工具页默认样式；不依赖 build.js，随 frontend/ 同步部署。
   ============================================================ */

/* ---------- 全局基底 ---------- */
* { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  width: 100%;
  overflow-x: hidden;            /* 兜底：任何溢出都不产生横向滚动 */
}
body { -webkit-tap-highlight-color: transparent; }
img, video, iframe, canvas { max-width: 100%; height: auto; }
a, button, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }

/* 容器不溢出 */
.container, .tool-shell .container { width: 100%; box-sizing: border-box; }

/* ---------- 顶部导航：防溢出（窄屏隐藏"收藏本站"，避免 navbar 超出视口） ---------- */
@media (max-width: 600px) {
  .navbar { padding: 10px 14px; height: auto; min-height: 56px; }
  .navbar-logo span { font-size: 17px; }
  .navbar-logo img { height: 34px; }
  .nav-bookmark-btn { display: none !important; }   /* 节省空间，避免横向滚动 */
  .lang-btn { min-width: 56px; padding: 8px 12px; }
  .nav-cta-btn { padding: 9px 14px; font-size: 13px; }
}
@media (max-width: 360px) {
  .navbar-logo span { font-size: 15px; }
  .lang-btn { min-width: 48px; padding: 8px 10px; font-size: 12px; }
}

/* ---------- 点击区域：移动端最小 48px（核心交互控件） ---------- */
@media (max-width: 768px) {
  .btn, .btn-primary, .btn-secondary, .btn-success,
  .nav-cta-btn, .nav-bookmark-btn,
  .copy-btn, .tag-chip, .ck-fav-chip,
  .ck-fb-shot, .ck-fb-cancel, .ck-fb-submit,
  .ck-ux-export-btns button, .ck-ux-tabs button, .ck-ux-item-acts .mini,
  .cta-btn, .cta-btn.primary, .cta-btn.secondary,
  .lead-capture-content .submit-btn,
  .lang-btn,
  button:not(.btn):not(.ck-file-input) {
    min-height: 48px;
  }
  /* 导航栏防挤压重叠：移动端隐藏收藏按钮，右侧簇留间距，logo/汉堡不收缩 */
  .nav-bookmark-btn { display: none; }
  .navbar-right { gap: 10px; }
  .navbar-logo { flex-shrink: 0; }
  .mobile-menu-btn { flex-shrink: 0; }
  .navbar-content { gap: 12px; }
  /* 文本类控件本身即点击/输入区，至少 48px 高 */
  input[type="text"], input[type="url"], input[type="number"],
  input[type="email"], input[type="password"], input[type="tel"],
  input[type="search"], textarea, select {
    min-height: 48px;
  }
  /* 小图标按钮：放大到接近 48，避免误触 */
  .ck-fav-star { width: 44px; height: 44px; font-size: 20px; }
  .ck-fav-remove { width: 48px; height: 48px; font-size: 18px; }
  .ck-ux-launcher { width: 50px; height: 50px; }
  /* 紧凑按钮：移动端也保持 48px 最小高度 */
  .btn-small { min-height: 48px; min-width: 48px; padding: 10px 16px; font-size: 14px; }
}

/* ---------- 禁用 iOS 聚焦自动缩放：表单控件字号 ≥16px ---------- */
@media (max-width: 768px) {
  input[type="text"], input[type="url"], input[type="number"],
  input[type="email"], input[type="password"], input[type="tel"],
  input[type="search"], textarea, select,
  .ck-fb-desc, .ck-fb-category,
  .ck-ux-save input, .chat-input-row input, .chat-input-row textarea,
  .lead-capture-content .form-group input {
    font-size: 16px !important;
  }
}

/* ---------- 文件上传：微信/Safari 兼容 ---------- */
/* 关键：隐藏文件控件必须用"视觉隐藏但仍在文档流"方式，
   绝不能用 display:none / [hidden]，否则 JS 触发 .click() 在
   iOS Safari 与微信内置浏览器中无法唤起文件选择。 */
.upload-area { position: relative; overflow: hidden; }
.ck-file-input,
.upload-area > input[type="file"] {
  display: block !important;          /* 覆盖内联 display:none / [hidden] */
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
/* 桌面端保留原生可见文件输入（csv-formatter / pdf / image-resizer 等直接展示的） */
@media (min-width: 769px) {
  input[type="file"]:not(.ck-file-input) { font-size: 14px; }
}

/* ---------- 工具页表单：移动端优先、简化、全宽 ---------- */
@media (max-width: 768px) {
  .tool-shell { padding: 88px 0 90px; }
  .tool-card, .tips-section { padding: 22px 16px; border-radius: 18px; }
  .tool-grid { grid-template-columns: 1fr; gap: 20px; }
  .row-2 { grid-template-columns: 1fr; gap: 14px; }
  .tool-header h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .tool-header h1 i { width: 40px; height: 40px; font-size: 1.2rem; }
  .tool-header p { font-size: .98rem; }
  .feature-badge { padding: 7px 12px; font-size: .82rem; }

  /* 主操作按钮全宽、置底易触达 */
  .tool-card .btn, .tool-card .btn-block { width: 100%; margin-top: 4px; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }

  /* 大文本框在手机上更好操作 */
  textarea, .output-text { min-height: 140px; line-height: 1.6; }
  .result-box { min-height: 100px; }

  /* 结果表在窄屏内部横向滚动，不撑破页面 */
  .result-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .85rem;
  }
}

/* ---------- 反馈 FAB：避开左侧安全区/其他悬浮按钮簇 ---------- */
@media (max-width: 768px) {
  .ck-feedback-fab {
    left: auto;
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    padding: 10px 16px;
  }
}

/* ---------- 刘海屏安全区：所有底部固定元素 ---------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .floating-cta { bottom: calc(20px + env(safe-area-inset-bottom)); right: 14px; }
  .lead-capture-btn { bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; }
  .security-banner { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .ck-ux-launcher { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
  .chat-modal { right: 10px; bottom: calc(90px + env(safe-area-inset-bottom)); }
  .lead-capture-modal { padding: 12px; }
  .lead-capture-content { max-width: 100%; }
}