/* =============================================================================
 * 站度网 · 移动端保障层 (mobile.css)
 * -----------------------------------------------------------------------------
 * 设计原则（重要）：
 *   本文件只做「跨切面移动保障」，不重声明布局（布局归 main.css）。
 *   main.css 已在 <head> 先加载，本文件在其后链接，故对本文件新增的
 *   选择器（与 main.css 同特异性时）本文件胜出；对工具片段 <body> 内的
 *   内联 <style>（文档顺序更靠后），本文件对「溢出保护/字号」类规则使用
 *   !important 强制覆盖，确保长文本/代码/表格在移动端绝不撑破视口。
 *
 *   作用域约定：
 *     · 顶层规则 = 全视口安全的「加固」（盒模型、媒体 max-width、点击热区、
 *       横向溢出兜底）。在桌面端也无害。
 *     · 会改变桌面布局的规则（代码块折行、表格转块级滚动）一律收进
 *       @media (max-width:768px)，避免影响桌面端的原始排版。
 *
 * 百度移动友好核心指标覆盖：
 *   ① 内容宽度适配视口（无横向滚动）  → 媒体/代码/表格 max-width + overflow 守卫
 *   ② 文字清晰可读（>=16px 基准）      → body 16px、输入框 16px 防 iOS 聚焦缩放
 *   ③ 点击热区充足（>=44px）           → button/.btn/输入控件 min-height
 *   ④ 加载性能                         → 仅做轻量守卫，不引入额外阻塞
 * ========================================================================== */

/* =========================== 顶层：全视口安全加固 =========================== */

/* 1. 盒模型统一 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. 禁止 iOS 横屏自动放大字号 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 3. 横向溢出兜底（最后一道防线：即便有溢出也不出现横向滚动条） */
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 4. 媒体类元素永不超出容器（canvas/pre/code 是常见溢出源） */
img,
canvas,
video,
svg,
iframe,
embed,
object {
  max-width: 100% !important;
  height: auto !important;
}

/* 5. 点击热区（百度/移动可用性：可点元素 >=44px；桌面端按钮本就约 44px，无副作用） */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
label.btn,
.seg-item,
.chip,
.tab-item {
  min-height: 44px;
}

/* 6. 表单控件字号 >=16px，防止移动端聚焦时整页自动缩放（百度可用性问题） */
input,
select,
textarea,
button {
  font-size: 16px;
}

/* 7. 触控高亮反馈 */
a,
button,
.btn,
label,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12);
}

/* ====================== 仅移动端：会改变桌面的规则收进断点 ====================== */

@media (max-width: 768px) {
  /* 长文本 / 代码 / 文本域：换行而非横向溢出
     （json / sql / html 格式化工具的高频痛点；桌面端保留横向滚动） */
  pre,
  code,
  kbd,
  samp,
  textarea,
  input {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  pre,
  code,
  textarea {
    white-space: pre-wrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 表格在窄屏可横向滚动而非撑破布局（桌面端保持原生表格布局） */
  table {
    max-width: 100% !important;
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 移动端排版基准 */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  /* 工具主体单栏兜底（极端情况下若 main.css 未覆盖，强制不溢出） */
  .tool-container,
  .tool-body {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 底部为移动 tabbar 预留空间（main.css 已设 120px，这里兜底） */
  .footer,
  .site-footer {
    padding-bottom: 120px;
  }
}

/* =============================================================================
 * 细粒度断点（主布局由 main.css 负责，这里只做收尾与兜底）
 * ========================================================================== */

/* 平板：保证双栏网格有足够留白 */
@media (max-width: 1024px) {
  .tool-body,
  .tool-page {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 手机：字号微调 + 极端兜底 */
@media (max-width: 768px) {
  .tool-header h1 {
    font-size: 24px;
    line-height: 1.3;
  }
  .tool-header p {
    font-size: 14px;
  }
  .tool-keyword-tag,
  .tip-box,
  .result-hero {
    max-width: 100%;
  }
}

/* 小手机：进一步收紧间距，按钮更顺手 */
@media (max-width: 480px) {
  .tool-header h1 {
    font-size: 22px;
  }
  .tool-keywords {
    gap: 6px;
  }
  .tool-keyword-tag {
    font-size: 12px;
    padding: 4px 10px;
  }
  /* 操作区按钮在小屏占满宽度，降低误触、提升可达性 */
  .tool-actions .btn,
  .editor-actions .btn,
  .btn-block-m {
    width: 100%;
    margin: 4px 0;
  }
  .seg {
    flex-wrap: wrap;
  }
}

/* 超小屏（360 及以下）：防止极小视口横向溢出 */
@media (max-width: 360px) {
  body {
    font-size: 15px;
  }
  .tool-header h1 {
    font-size: 20px;
  }
  .hero h1,
  .section-title {
    font-size: 20px;
  }
}

/* 横屏矮高度设备：避免内容被移动 tabbar/底栏完全遮住 */
@media (max-height: 450px) and (orientation: landscape) {
  .footer,
  .site-footer {
    padding-bottom: 24px;
  }
}
