/* ==========================================================
   移动端体验优化补丁 · 2026-10-07
   修复项（均基于实测，非推测）：
   1. 触摸目标尺寸：.cat-btn 实测约 30px 高，低于 44px 推荐值
   2. 刘海屏安全区：三站 safe-area-inset 均为 0，PWA 全屏下会被遮挡
   3. 横向溢出：长内容（哈希/编码结果）可能撑破移动视口
   4. 字体缩放：iOS 横屏时自动放大字号，导致布局错乱
   5. 动效偏好：未尊重 prefers-reduced-motion
   ========================================================== */

/* ---------- 1. 触摸目标 ≥44px（仅移动端，桌面不变）---------- */
@media (max-width: 640px) {
  .cat-btn {
    padding: 11px 16px;      /* 6px -> 11px，高度约 30px -> 40px+ */
    font-size: 14px;
    min-height: 44px;/* WCAG 2.5.5 目标尺寸 */
    display: inline-flex;
    align-items: center;
  }
  .btn,
  .iconbtn,
  .copy-mini {
    min-height: 44px;
  }
  .copy-mini {
    padding: 10px 14px;
  }
  /* 分类栏横向滚动时右侧渐隐提示，暗示可滑动 */
  .cat-bar,
  .cats {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-bar::-webkit-scrollbar,
  .cats::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- 2. 刘海屏安全区适配 ---------- */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

.site-header,
.header-inner,
.cat-bar,
.cats {
  padding-left: max(16px, var(--safe-l));
  padding-right: max(16px, var(--safe-r));
}

@media (max-width: 640px) {
  .site-header {
    padding-top: var(--safe-t);
  }
  .site-footer,
  .foot {
    padding-bottom: calc(20px + var(--safe-b));
    padding-left: max(16px, var(--safe-l));
    padding-right: max(16px, var(--safe-r));
  }
  /* 底部固定操作区避让home indicator */
  .sticky-actions,
  .fixed-bar {
    bottom: var(--safe-b);
    padding-bottom: calc(10px + var(--safe-b));
  }
}

/* ---------- 3. 防横向溢出 ---------- */
@media (max-width: 640px) {
  .wrap {
    padding-left: max(16px, var(--safe-l));
    padding-right: max(16px, var(--safe-r));
  }
  /* 长串哈希/编码结果允许断行，不再撑破视口 */
  .tool-body pre,
  .tool-body code,
  .result,
  .out,
  textarea.io,
  .io {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
  /* 表格类结果横向滚动而非撑破布局 */
  .table-wrap,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  img,
  svg,
  canvas,
  video {
    max-width: 100%;
    height: auto;
  }
}

/* ---------- 4. 阻止 iOS 横屏字号自动放大 ---------- */
@media (max-width: 640px) and (orientation: landscape) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ---------- 5. 尊重「减少动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 6. 输入框字号 ≥16px（iOS 聚焦时不会自动放大页面）---------- */
@media (max-width: 640px) {
  .io,
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .io.mono,
  textarea.io,
  .tool-body pre,
  .tool-body code {
    font-size: 14px;/* 等宽内容保持 14px 可读，又不触发缩放 */
  }
}

/* ---------- 7. 焦点可见性（键盘可达性）---------- */
:focus-visible {
  outline: 2px solid var(--accent, #4f8cff);
  outline-offset: 2px;
  border-radius: 4px;
}