/* ==========================================================================
   RV-MOBILE（r69，2026-11-08）—— 移动端专属高级层
   --------------------------------------------------------------------------
   背景：站点流量几乎全部来自手机端。此前已有 R53（顶栏单行横滑）与
   R68（16px 输入/40px 触控/微标签地板）两轮基础适配，本层在其上做
   「小程序级原生感」升级：
     §1  触感 —— 全局按压反馈（scale 0.96~0.97，原生 App 手感）
     §2  顶栏 —— 触控目标 44px + 可滚动时右缘渐隐（配合 mobile.js）
     §3  主 CTA —— 手机上加大按钮目标（≥46px）
     §4  滚动 —— 全站隐藏滚动条（App 式），横滑区禁横向回弹
     §5  安全区 —— 底部固定元素与页脚适配 iPhone Home Indicator
     §6  生成页 —— 输入区手机上收窄腾屏、chips 行横滑化
     §7  弹层 —— 手机上贴边满宽、出入场更跟手
   规则：全部包在 @media (max-width:768px)（个别 pointer:coarse）内，
   桌面端零影响；本文件可整块摘除（删除文件 + 各模板 RV-MOBILE link）。
   ========================================================================== */

:root { --rv-safe-b: env(safe-area-inset-bottom, 0px); }

/* ==========================================================================
   §1 触感：统一按压反馈
   ========================================================================== */
@media (max-width: 768px) {
  button, a, [role="button"], summary, label[for],
  .chip, .jm-mini-btn, .jm-bar, .seg, .jm-mode, .jm-rcell, .btn {
    -webkit-user-select: none; user-select: none;
  }
  button:not(:disabled), [role="button"]:not(:disabled),
  .chip, .jm-mini-btn, .seg, .jm-bar, .jm-mode, .jm-rcell {
    transition: transform .18s cubic-bezier(.32, .72, 0, 1), opacity .18s;
  }
  button:not(:disabled):active,
  [role="button"]:not(:disabled):active,
  .chip:active, .jm-mini-btn:active, .seg:active,
  .jm-bar:active, .jm-mode:active, .jm-rcell:active {
    transform: scale(.96);
  }
  a:not(.card):not(.work):not(.tool-entry):active { transform: scale(.97); }
  /* 卡片类大目标不缩放（避免整卡抖动），改用轻微下压 */
  .card:active, .tool-entry:active { transform: scale(.992); }
}

/* ==========================================================================
   §2 顶栏：触控目标 + 横滑渐隐
   ========================================================================== */
@media (max-width: 768px) {
  .topbar { border-radius: 20px; }
  /* 顶栏可横滑时右缘渐隐（.rv-mb-scroll 由 mobile.js 判定后添加） */
  .top-right.rv-mb-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  /* R68 的 40px 在「纯手机端」提到 44px（HIG 推荐值）；
     登录/积分胶囊/语言/主题/头像按钮一并受益 */
  .top-right a, .top-right button, .cred-pill, .lang-switch button,
  .theme-switch button, .user-btn { min-height: 44px; }
  /* 品牌行与横滑行间距收紧，省出纵向空间 */
  .topbar { row-gap: 2px; }
}

/* ==========================================================================
   §3 主 CTA：手机上加大按钮
   ========================================================================== */
@media (max-width: 768px) {
  .btn { min-height: 46px; }
  .btn.sm, .btn-sm { min-height: 38px; }
  .jm-mini-btn { min-height: 38px; }
  /* 底部工具条圆形生成按钮在手机上略放大更醒目 */
  #sec-videogen .vx-bar #vgBtn, #sec-img .vx-bar #imgBtn { width: 48px; height: 48px; }
  /* 回顶/反馈浮动球：38 → 44px（可触控），避开 Home Indicator */
  #fbFab { width: 44px !important; height: 44px !important; }
  #fbFab.fb-up { bottom: calc(14px + var(--rv-safe-b)) !important; }
  /* 图标类小按钮放大到可触控（视觉图标尺寸不变，扩大命中区） */
  .lf-eye, .vx-exp { min-width: 42px; min-height: 42px; }
  #hcMention, .hc-btn { min-width: 42px; min-height: 42px; }
  #aiClear, #aiOpt { min-width: 40px; min-height: 40px; }
}

/* ==========================================================================
   §4 滚动：App 式无滚动条 + 治理横滑回弹
   ========================================================================== */
@media (max-width: 768px) {
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  html, body { overscroll-behavior-x: none; }
  /* 内容页横滑区通用：粘性滚动到边缘即停，不带动整页 */
  .top-right, .vx-top, .vx-tabs, .vgm-group, .jm-gal, .vg-insp-row, .hero-quick {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   §5 安全区：iPhone 底部 Home Indicator
   ========================================================================== */
@media (max-width: 768px) {
  footer {
    padding-bottom: calc(14px + var(--rv-safe-b)) !important;
  }
  /* 生成页区块底部留出安全区，避免最后一个卡片贴底被手势条压住 */
  .gen-wrap, .wrap { padding-bottom: max(var(--gutter), var(--rv-safe-b)); }
}

/* ==========================================================================
   §6 生成页（tools.html 家族）手机密度
   ========================================================================== */
@media (max-width: 768px) {
  /* 输入区 176px 在手机上偏高，收窄腾出结果区视野（聚焦仍自动增高） */
  #sec-videogen .vx-composer textarea, #sec-img .vx-composer textarea { min-height: 118px; }
  /* 模式 chips 行可横滑（7 个模式 390px 放不下），禁止换行抖动
     —— tools.html 内联样式（block style 在本层之后加载）以 #sec 前缀
        强制 wrap，这里必须 !important 才能赢（页面级横滑已在其 ≤560px
        规则里定义过，但被 r68 composer 重排的高特异性覆盖，属既有回归） */
  .vx-tabs, .vgm-group { flex-wrap: nowrap; overflow-x: auto; }
  .vx-tabs > *, .vgm-group > * { flex: none; }
  #sec-videogen .vx-tabs .vgm-group,
  #sec-img .vx-tabs .jm-modes {
    flex-wrap: nowrap !important; overflow-x: auto !important;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  #sec-videogen .vx-tabs .chip.vgm { flex: none !important; height: 36px; }
  /* 底部工具条允许换行，价格+生成按钮始终完整可见 */
  #sec-videogen .vx-bar, #sec-img .vx-bar { flex-wrap: wrap; row-gap: 8px; }
  #sec-videogen .vx-ends, #sec-img .vx-ends { margin-inline-start: auto; }
}

/* ==========================================================================
   §7 弹层与浮层：手机上贴边满宽
   ========================================================================== */
@media (max-width: 768px) {
  .fb-modal {
    left: 12px; right: 12px; width: auto; max-width: none;
    max-height: calc(100dvh - 32px);
  }
  .fb-mask { align-items: flex-end; }
  .fb-modal { bottom: 12px; top: auto; border-radius: 20px; }
  /* 账户中心面板（若为居中弹窗）在手机上贴底呈现，像小程序半屏面板 */
  .acct-pop, .rv-acct-panel {
    left: 10px; right: 10px; max-width: none;
    bottom: calc(10px + var(--rv-safe-b)); top: auto;
  }
}

/* ==========================================================================
   §8 移动端统一令牌（r70 全局基础层）
   统一触控高度/卡片间距/内边距/圆角，让各页面观感一致；仅在窄屏生效。
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --rv-tap: 44px;        /* 标准触控目标（HIG） */
    --rv-tap-lg: 48px;     /* 主 CTA（Material） */
    --rv-gap: 12px;        /* 卡片间距 */
    --rv-pad: 14px;        /* 卡片内边距 */
    --rv-r-card: 16px;     /* 卡片圆角 */
  }
}

/* ==========================================================================
   §9 卡片系统：温和统一圆角与按压，不强行改各页已调好的内边距
   ========================================================================== */
@media (max-width: 768px) {
  .card, .tpl, .wk-card, .panel,
  .hero-card, .mode-card, .acct-panel {
    border-radius: var(--rv-r-card);
  }
  /* 横滑容器右缘渐隐通用化（.rv-mb-scroll 由 mobile.js 判定添加），
     不再只限于 .top-right；mask 用黑色是遮罩本身的必需写法。 */
  .rv-mb-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  html[dir="rtl"] .rv-mb-scroll {
    -webkit-mask-image: linear-gradient(270deg, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(270deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
}

/* ==========================================================================
   §10 表单与输入：16px 字号防 iOS 聚焦自动缩放，触控高度统一
   ========================================================================== */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px;            /* ≥16px 阻止 iOS Safari 聚焦时整页缩放 */
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select { min-height: var(--rv-tap); }
  /* 表单主按钮统一满宽更易点（仅在窄屏） */
  form .btn.btn-block, form .btn[type="submit"] { width: 100%; }
}

/* ==========================================================================
   §11 小屏细分（≤480px）：收紧间距但不缩小可点区域
   ========================================================================== */
@media (max-width: 480px) {
  .wrap, .gen-wrap, .wk-wrap, .acct-wrap { padding-inline: 14px; }
  .tpl-grid, .wk-grid { gap: 10px; }
  /* 图标按钮命中区保持 40px，视觉不缩，保证拇指可点 */
  .icon-btn, .tpl-more { min-height: 40px; }
}

/* ==========================================================================
   §12 剩余触控目标收尾（R88，真机 coarse 扫描后补漏）
   R72b 未覆盖的功能按钮统一 min-height；协议 label 加垂直 padding 扩命中区。
   仅粗指针窄屏生效，桌面零变化。
   ========================================================================== */
@media (pointer: coarse) and (max-width: 768px) {
  .pl-use, .pl-copy, .oc-seg-btn, .jm-mode, .ig-hist-clr,
  .cgm-x, .bs-more, .buy .btn-sm {
    min-height: 36px;
  }
  /* 弹窗/卡片右上角关闭小叉：视觉图标不变，命中区扩到 36px */
  .cgm-x { min-width: 36px; }
  /* 协议勾选 label：整行可点，补垂直 padding 让命中区接近 40px */
  .lf-agree { padding-block: 8px; margin-block: 0; align-items: center; }
  .lf-agree input { margin-top: 0; width: 20px; height: 20px; }
}

/* 减弱动效偏好下撤掉所有位移动画 */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  button:active, a:active, .chip:active, .jm-mini-btn:active,
  .seg:active, .jm-bar:active, .jm-mode:active, .jm-rcell:active,
  .card:active, .tool-entry:active { transform: none; }
}

/* ==========================================================================
   §13 RV-PWA-R91C：首页工具卡手机端紧凑化（双列宫格，即梦/小程序密度）
   桌面零变化。≤560px：单列 132/156px 大卡 → 双列紧凑卡（图标 34px、
   标题 13.5px、描述 11.5px 两行封顶），整屏信息密度翻倍。摘除=删本块。
   ========================================================================== */
@media (max-width: 560px) {
  .tpl-grid { gap: 9px; }
  .tpl, .tpl.big {
    min-height: 0;
    padding: 12px 12px 11px;
    display: flex;
    flex-direction: column;
    border-radius: 13px;
  }
  .tpl.big { grid-template-columns: none; }
  .tpl .tic, .tpl.big .tic {
    width: 34px; height: 34px; border-radius: 10px;
    margin-bottom: 9px; grid-row: auto;
  }
  .tpl .tic svg, .tpl .tic img,
  .tpl.big .tic svg, .tpl.big .tic img { width: 18px; height: 18px; }
  .tpl .t { font-size: 13.5px; }
  .tpl .d { font-size: 11.5px; line-height: 1.5; margin-top: 3px; }
  /* 首页创作区：恢复双列（big 卡不再独占整行） */
  #tplCreative { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #tplCreative .tpl, #tplCreative .tpl.big { grid-column: span 1 !important; }
  #tplCreative .tpl .d { -webkit-line-clamp: 2; }
  /* 卡片标题与描述之间的层级保持，右上角 tag 不与标题打架 */
  .tpl .tag { top: 9px; right: 9px; font-size: 10px; padding: 1px 7px; }
}