/* ==========================================================================
   薯灵感 SparkNote · 移动端适配层（mobile.css）
   版本 20261001m1
   --------------------------------------------------------------------------
   加载位置：所有样式表之后（最后生效），只做「移动端修正」。
   四条硬原则：
     1) 桌面端零影响 —— 所有布局规则都包在 max-width 媒体查询里；
     2) 动效只走 transform / opacity —— 禁用 backdrop-filter、box-shadow 动画
        等触发重绘/合成开销大的属性；
     3) 尊重 prefers-reduced-motion —— 系统开启减弱动效时全面关停；
     4) 触控目标 >= 44px —— 主操作控件一律满足，小圆角胶囊 >= 40px。
   断点体系：375（小屏） / 640（手机主断点） / 768（平板竖屏） / 899（导航降级）
            1024（平板横屏） / 1280（桌面）
   ========================================================================== */

/* ---------- 一、断点与安全区变量（全端生效，仅定义变量，不改任何观感） ---------- */
:root {
  --bp-xs: 375px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --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);

  --tabbar-h: calc(52px + var(--safe-b));
  --tap-min: 44px;
  --tap-sm: 40px;
  --mob-gutter: 12px;
  --mob-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 二、通用基线（<=1024：平板及以下） ---------- */
@media (max-width: 1024px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* clip 不创建滚动容器，不会像 hidden 那样破坏 position:sticky 顶栏 */
  body { overflow-x: clip; }
  table { max-width: 100%; }
  /* 超长串（URL / 英文长词 / 无空格标题）不撑破容器 */
  main, .wrap, .content, .page { overflow-wrap: anywhere; }
  /* 媒体元素永不溢出 */
  img, video, canvas, svg, iframe { max-width: 100%; }
}

/* ---------- 三、<=899：导航降级（原生 .topnav 只在 >=900px 显示） ---------- */
@media (max-width: 899px) {
  /* 底部 Tab Bar 占位，避免内容被固定栏遮挡 */
  body.has-ss-tabbar { padding-bottom: var(--tabbar-h); }
  .topbar-inner { padding-left: var(--s-14); padding-right: var(--s-14); }

  /* AI 助手悬浮件必须让开底部 TabBar。
     实测：悬浮球 z-index 9000、bottom 14px、68px 高，直接压住 TabBar 最后一个
     按钮，elementFromPoint 命中的是悬浮球 —— 移动端「更多」点不动。 */
  .ss-stage { bottom: calc(var(--tabbar-h) + 12px) !important; }
  .ss-panel { bottom: calc(var(--tabbar-h) + 10px) !important; }
  .ss-proactive { bottom: calc(var(--tabbar-h) + var(--ss-avatar, 68px) + 16px) !important; }
  /* 其它贴底固定件统一抬升，避免被 TabBar 压住 */
  .back-to-top, .fab, .float-btn { bottom: calc(var(--tabbar-h) + 12px) !important; }

  /* 触控目标补齐：只补最小命中区，视觉尺寸基本不变 */
  .ss-icon-btn, .ss-menu-btn, .ss-side-close, .ss-side-fold, .spark-auth-prof {
    min-width: 40px; min-height: 40px;
  }
  .ss-new-chat { min-height: 44px; }
  .ss-search-clear { min-width: 36px; min-height: 36px; }
  .ss-op, .ss-op.ss-mode { min-width: 36px; min-height: 36px; }
  #spark-auth-badge button, .spark-auth-prof { min-height: 40px; padding: 0 var(--s-10); }
  a.back, .topbar .back, .wrap .back, .topbar a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 var(--s-10);
  }
  /* 页脚链接：视觉不变，命中区补足 */
  footer a, .foot a, .footer a {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 var(--s-4);
  }
}

/* ---------- 四、<=768：平板竖屏 ---------- */
@media (max-width: 768px) {
  /* 实时毛玻璃在移动端重绘代价高，换成实色 */
  .topbar, .topnav, .nav-more-panel, .sheet, .tabbar, .modal, .drawer {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .topbar { background: #fff !important; }
  .tabbar { background: rgba(255, 255, 255, .98) !important; }
  .topbar-inner { padding: var(--s-8) var(--s-14); min-height: 52px; }
  .logo { font-size: 16px; }
  .logo small { display: none; }

  .hero-banner { padding: var(--s-18) var(--s-14); margin-bottom: var(--s-14); }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s-10); }
  .dash-chart-grid { grid-template-columns: 1fr !important; }

  .hot-strip { flex-direction: column; align-items: stretch; gap: var(--s-8); padding: var(--s-12); }
  .filter-bar { padding: var(--s-12) var(--s-12) var(--s-6); }

  /* 排序条 / 分类条：横向滚动而非换行挤压 */
  .sort-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .sort-bar::-webkit-scrollbar { display: none; }
  .date-nav { flex-wrap: wrap; }

  /* 栅格统一降为 2 列（图标类密集网格、底部抽屉宫格保持原样） */
  main [class*="-grid"]:not(.stat-grid):not(.sheet-grid):not([class*="icon"]):not([class*="emoji"]),
  .wrap [class*="-grid"]:not(.stat-grid):not(.sheet-grid):not([class*="icon"]):not([class*="emoji"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 底部抽屉必须盖在 TabBar 之上（原生 z-index：mask 95 / sheet 96 / tabbar 100） */
  .sheet-mask { z-index: var(--z-sheet-mask, 1090) !important; }
  .sheet { z-index: var(--z-sheet, 1100) !important; }

  /* 触控目标 */
  .tabbar button { min-height: 50px; }
  .sheet-close { width: 40px !important; height: 40px !important; }
}

/* ---------- 五、<=640：手机主断点 ---------- */
@media (max-width: 640px) {
  :root { --tabbar-h: calc(50px + var(--safe-b)); }

  .topbar-inner { padding: var(--s-8) var(--mob-gutter); gap: var(--s-8); }
  .logo { font-size: 15px; gap: var(--s-8); }
  .logo-badge { width: 28px; height: 28px; font-size: 14px; }

  .hero-banner { padding: var(--s-16) var(--s-12); border-radius: 14px; }
  .hero-stats { gap: var(--s-12); flex-wrap: wrap; }
  .stat-grid { gap: var(--s-8); }
  .sec-title { font-size: 16px; }
  .sec-sub { font-size: 12px; }
  .card { border-radius: 14px; }
  .card-pad { padding: var(--s-14) var(--s-12); }
  .filter-bar { padding: var(--s-12); }
  .filter-bar .search-box { margin-bottom: var(--s-8); }
  .cat-scroll { gap: var(--s-6); }
  /* 2026-10-17 P1-B：业务页 .empty 已改名 .ux-empty，这里两边都留，
     app.js 里还有 2 处历史 .empty（归属其他专家，本轮不动） */
  .empty, .ux-empty { padding: var(--s-32) var(--s-12); }

  /* 栅格统一单列（底部抽屉宫格保持 4 列，图标类网格保持原样） */
  main [class*="-grid"]:not(.stat-grid):not(.sheet-grid):not([class*="icon"]):not([class*="emoji"]),
  .wrap [class*="-grid"]:not(.stat-grid):not(.sheet-grid):not([class*="icon"]):not([class*="emoji"]) {
    grid-template-columns: 1fr !important;
  }
  /* 抽屉宫格：小屏降为 3 列，保证图标+文字不挤压 */
  .sheet-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* 宽表格横向滚动，不撑破视口 */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 表单：16px 起步，杜绝 iOS 聚焦时自动放大整页 */
  input, textarea, select { font-size: 16px !important; }

  /* 触控目标 */
  .btn, .tab { min-height: var(--tap-min); }
  .sopt, .chip, .pill { min-height: var(--tap-sm); }
  .sort-bar .sopt { padding: var(--s-8) var(--s-12); }
  .date-nav .dnav { height: 34px; min-width: 34px; }
  .topnav button { min-height: var(--tap-sm); }

  /* 弹层不溢出屏幕 */
  .modal, .dialog, .sheet, .nav-more-panel, .popover {
    max-width: calc(100vw - 24px) !important;
  }
  .nav-more-panel {
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 去掉 300ms 点击延迟与灰色高亮块，改用自绘按压反馈 */
  button, .btn, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

/* ---------- 六、<=375：小屏（iPhone SE / 12 mini 等） ---------- */
@media (max-width: 375px) {
  :root { --mob-gutter: 10px; }
  .logo { font-size: 14px; }
  .stat-grid { gap: 6px; }
  .sec-title { font-size: 15px; }
}

/* ---------- 七、动效降级（移动端） ---------- */
@media (max-width: 768px) {
  /* 背景特效层：移动端 GPU 负担大且无信息价值。
     2026-10-02 修（落地页优化发现的存量 bug）：此前直接把容器 display:none，
     而 assets/animations/module-bindings.js 会把 .sm-bg-waves 等类挂到
     .hero / .uo-hero 这类【内容容器】上，导致手机端整个首屏（标题+CTA+数据位）
     被一起隐藏。特效实际画在容器的 ::before / ::after 上，
     这里改为只隐藏伪元素：特效照关，正文保留。 */
  .sm-bg-chrome::before, .sm-bg-chrome::after,
  .sm-bg-galaxy::before, .sm-bg-galaxy::after,
  .sm-bg-hyperspeed::before,
  .sm-bg-particles::before,
  .sm-bg-plasma::before, .sm-bg-plasma::after,
  .sm-bg-silk::before, .sm-bg-silk::after,
  .sm-bg-waves::before, .sm-bg-waves::after {
    display: none !important;
  }
  /* 缩短过渡与入场时长：保留"动"的感觉，去掉拖沓。
   * ⚠️ 2026-10-03：以前这里用 * 连 animation-duration 一起压成 .24s，
   * 结果无限循环的装饰动画也变成 240ms 一轮（灯泡呼吸 5.2s→0.24s、
   * 钨丝闪烁 7s→0.24s、粒子公转 8.5s→0.24s、极光漂移 18s→0.24s），
   * 在手机上就是「灯泡疯狂抽搐」。现在只压 transition 和一次性入场。 */
  * { transition-duration: .18s !important; }
  /* 一次性入场动画：照旧压缩，保持轻快 */
  .page.active, .du-card-in, .floatIn, .ss-in, .card-in, .fade-in, .slide-in {
    animation-duration: .24s !important;
  }
  /* 无限循环的装饰动画：不再加速。
   * 最晃眼的钨丝闪烁 / 粒子 / 星点直接关掉（省电，也不抢正文注意力），
   * 柔和的光晕呼吸与灯丝摇摆保留原本节奏。 */
  .hb-flick, .hb-p, .sm-stars { animation: none !important; }
  .hb-halo { animation-duration: 5.2s !important; }
  .hb-core { animation-duration: 6.4s !important; }
}

/* ---------- 八、系统级减弱动效偏好（全端生效） ---------- */
@media (prefers-reduced-motion: reduce) {
  *:not([class*="spinner"]):not([class*="loading"]):not(.ss-spin):not(.ss-dot) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 九、html.ss-mobile 门控（JS 判定为移动端时挂载） ---------- */
html.ss-mobile #live2d,
html.ss-mobile .live2d-wrap,
html.ss-mobile #ai-live2d,
html.ss-mobile canvas[id*="live2d"],
html.ss-mobile .live2d-canvas,
html.ss-mobile .ss-mouse-cursor,
html.ss-mobile .ss-spotlight,
html.ss-mobile [data-spotlight-selector]::after { display: none !important; }

html.ss-mobile body { cursor: auto !important; }

/* ---------- 十、底部 Tab Bar（移动端主导航） ---------- */
.ss-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet-nav, 1200);
  display: none; align-items: stretch;
  height: var(--tabbar-h);
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--border-default, #E8E2E4);
  box-shadow: 0 -2px 12px rgba(31, 27, 29, .06);
}
@media (max-width: 899px) { .ss-tabbar { display: flex; } }

.ss-tab {
  flex: 1 1 0; min-width: 0; min-height: var(--tap-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0 2px;
  color: var(--text-tertiary, #6E6869);
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--mob-ease), color .16s linear;
}
.ss-tab:active { transform: scale(.92); }
.ss-tab-ico {
  display: flex; align-items: center; justify-content: center;
  height: 20px; font-size: 18px; line-height: 1;
}
.ss-tab-txt {
  font-size: 12px; line-height: 1.2; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 2026-10-17：12px 标签文字压在白底上，#FF2442 只有 3.76 → 文字档 #D81B37（5.08） */
.ss-tab.on { color: var(--xhs-red-text, #D81B37); font-weight: 700; }
.ss-tab.on .ss-tab-ico { transform: translateY(-1px); }

/* ---------- 十一、抽屉（"更多"全量导航） ---------- */
.ss-backdrop {
  position: fixed; inset: 0; z-index: var(--z-sheet-mask-top, 1300);
  background: rgba(31, 27, 29, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .2s linear;
}
.ss-backdrop.show { opacity: 1; pointer-events: auto; }

.ss-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer, 1400);
  width: min(84vw, 340px);
  background: #fff;
  box-shadow: -8px 0 28px rgba(31, 27, 29, .16);
  transform: translateX(100%);
  transition: transform .26s var(--mob-ease);
  display: flex; flex-direction: column; overflow: hidden;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}
.ss-drawer.show { transform: translateX(0); }

.ss-drawer-hd {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-14) var(--s-16);
  border-bottom: 1px solid var(--border-subtle, #F2EDEE);
}
.ss-drawer-hd b { font-size: 15px; }
.ss-drawer-close {
  border: 0; background: none; cursor: pointer;
  width: var(--tap-min); height: var(--tap-min);
  font-size: 22px; line-height: 1; color: var(--text-tertiary, #6E6869);
}
.ss-drawer-bd {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-10) var(--s-12) var(--s-24);
}
.ss-dg { margin-bottom: var(--s-16); }
.ss-dg-t {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  color: var(--text-tertiary, #6E6869);
  padding: 0 var(--s-6) var(--s-8);
}
.ss-di {
  display: flex; align-items: center; gap: var(--s-10);
  width: 100%; min-height: var(--tap-min);
  padding: var(--s-10) var(--s-12);
  border: 0; border-radius: 12px; background: none;
  font-family: inherit; font-size: 14px; text-align: left;
  color: var(--text-primary, #1F1B1D); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--mob-ease), background-color .16s linear;
}
.ss-di:active { transform: scale(.97); background: var(--bg-hover, #F4EFF0); }
.ss-di.on {
  color: var(--xhs-red-text, #D81B37);
  background: var(--xhs-red-tint, rgba(255, 36, 66, .08));
  font-weight: 700;
}
.ss-di-ico {
  flex: 0 0 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ss-di-tx { min-width: 0; }
.ss-di-tx b { display: block; font-size: 14px; font-weight: 600; }
.ss-di-tx i {
  display: block; font-style: normal; font-size: 12px;
  color: var(--text-tertiary, #6E6869); margin-top: 2px;
}

/* ---------- 十二、工具类 ---------- */
@media (max-width: 899px) {
  .ss-hide-mobile { display: none !important; }
}
@media (min-width: 900px) {
  .ss-only-mobile { display: none !important; }
}

/* ---------- 十三、2026-10-03：移动端触控热区与输入框统一 ---------- */
/* 实测：40px 高的按钮/链接遍布全站（.sopt / .chip / 顶栏链接 / 退出…），
   差 4px 到规范命中区；关键词页输入框只有 23px 高。这里统一补齐到 44px。 */
@media (max-width: 899px) {
  /* ① 热区：原来给 40px 的一律补到 44px */
  .ss-icon-btn, .ss-menu-btn, .ss-side-close, .ss-side-fold, .spark-auth-prof,
  #spark-auth-badge button, a.back, .topbar .back, .wrap .back, .topbar a,
  .sopt, .chip, .tab, .btn, .btn.sm, .btn.ghost, #logoutBtn, .ark-btn {
    min-height: 44px;
  }
  /* 小方形图标按钮：宽高都要够 */
  .ss-search-clear, .ss-op, .ss-op.ss-mode, .ark-close {
    min-width: 44px; min-height: 44px;
  }
  /* 头像 28px 太小，补到 40（仍是圆形，只是命中区变大） */
  #meAvatar.me-avatar { min-width: 40px; min-height: 40px; }
  .me-avatar, .av-big { min-width: 40px; min-height: 40px; }

  /* ② 输入框：高度 44 + 字号 16。
     字号 16px 很关键 —— iOS Safari 对 <16px 的输入框聚焦时会自动放大整页，
     放大后很难还原，是移动端最容易被忽略的体验坑。
     这一条同时把关键词挖掘等页面的紧凑输入框（实测 23px）与其它页面拉齐。 */
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
  /* ③ 上一轮只补了高度，这几处「宽度」还差几像素，一并补齐 */
  .spark-auth-prof { min-width: 44px; }
  #spark-auth-badge button { min-width: 44px; min-height: 44px; }
  .ss-hero-cta { min-height: 44px; }
  #meAvatar.me-avatar, .me-avatar { min-width: 44px; min-height: 44px; }
  /* 搜索框等内联小输入框不撑高，但字号仍要 16 防缩放 */
  .search-box input, .ss-search input, .inline-input { min-height: 36px; }
}