/* 中台手机统一规则 v1（2026-10-20 TK「全盘优化移动端」，门店管理除外——它本来就是手机优先）。
   跟导航一起加载（render-layout 的 head、injectConsoleNav、ai-inspiration-page），只在 ≤767px 生效。
   兼容：企业微信安卓内置浏览器内核较老，不认 :has() / :is()，用了整条规则会被丢掉——这里一律不用。
   门店管理页面由 console-nav.v4.js 在 <html> 上加 .nav-store，这里用 html:not(.nav-store) 避开。
   页面自己的样式写在 <body> 里、比这里晚加载，所以统一加 `html:not(.nav-store) body` 前缀提高优先级，个别再加 !important。
   对应《UI 规范》第六节「手机」。 */

@media (max-width: 767px) {

  /* 1. 筛选、分段、chip 行：一行横滑，不换行（以前会折成 2–4 行） */
  html:not(.nav-store) body .hk-chips,
  html:not(.nav-store) body .tpv2-tabs,
  html:not(.nav-store) body .tpv2o-seg,
  html:not(.nav-store) body .insp2-cats,
  html:not(.nav-store) body .insp2-brands,
  html:not(.nav-store) body .so-bar,
  html:not(.nav-store) body .sp2-seg,
  html:not(.nav-store) body .ds-seg,
  html:not(.nav-store) body .ops6-seg,
  html:not(.nav-store) body .ds-subtabs > nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html:not(.nav-store) body .hk-chips::-webkit-scrollbar,
  html:not(.nav-store) body .tpv2-tabs::-webkit-scrollbar,
  html:not(.nav-store) body .tpv2o-seg::-webkit-scrollbar,
  html:not(.nav-store) body .insp2-cats::-webkit-scrollbar,
  html:not(.nav-store) body .so-bar::-webkit-scrollbar,
  html:not(.nav-store) body .sp2-seg::-webkit-scrollbar,
  html:not(.nav-store) body .ds-seg::-webkit-scrollbar,
  html:not(.nav-store) body .ops6-seg::-webkit-scrollbar { display: none; }
  html:not(.nav-store) body .hk-chips > *,
  html:not(.nav-store) body .tpv2-tabs > *,
  html:not(.nav-store) body .tpv2o-seg > *,
  html:not(.nav-store) body .insp2-cats > *,
  html:not(.nav-store) body .insp2-brands > *,
  html:not(.nav-store) body .so-bar > *,
  html:not(.nav-store) body .sp2-seg > *,
  html:not(.nav-store) body .ds-seg > *,
  html:not(.nav-store) body .ops6-seg > *,
  html:not(.nav-store) body .ds-subtabs > nav > * { flex: none; }

  /* 筛选区：每组（日期、渠道…）各占一行，组内横滑 */
  html:not(.nav-store) body .ops6-filters { flex-wrap: wrap; row-gap: 8px; }
  html:not(.nav-store) body .ops6-filters > * { max-width: 100%; }

  /* 2. 分段按钮：手指点得到（至少 34px 高） */
  html:not(.nav-store) body .ds-seg > button, html:not(.nav-store) body .ds-seg > a,
  html:not(.nav-store) body .ops6-seg > button, html:not(.nav-store) body .ops6-seg > a,
  html:not(.nav-store) body .tpv2o-seg > button,
  html:not(.nav-store) body .sp2-seg > button, html:not(.nav-store) body .sp2-seg > a { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }

  /* 3. 搜索框占满一行，其他按钮排到下一行；两个下拉各占半行 */
  html:not(.nav-store) body .hk-search,
  html:not(.nav-store) body .tpv2o-search,
  html:not(.nav-store) body .mat3-search,
  html:not(.nav-store) body .tpv2-search,
  html:not(.nav-store) body .as2-search input[type="search"],
  html:not(.nav-store) body .as2-search input[type="text"],
  html:not(.nav-store) body .dh-tb input[type="search"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }
  html:not(.nav-store) body .hk-toolbar,
  html:not(.nav-store) body .tpv2o-toolbar,
  html:not(.nav-store) body .as2-search,
  html:not(.nav-store) body .dh-tb { flex-wrap: wrap; row-gap: 8px; }
  html:not(.nav-store) body .hk-toolbar > .hk-select { flex: 1 1 0; min-width: 0; }
  html:not(.nav-store) body .hk-toolbar > .hk-spacer { display: none; }

  /* 4. 两列数字卡：单数时最后一张占满一行 */
  html:not(.nav-store) body [class*="-kpis"] > :last-child:nth-child(odd),
  html:not(.nav-store) body .mat4-rings > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* 经营 / 分销 / CRM / 会话 / 售后 的卡片之间夹着 <template>，由 console-nav.v4.js 给最后一张单数卡打 .is-odd-last */
  html:not(.nav-store) body .is-odd-last { grid-column: 1 / -1; }

  /* 5. 步骤条：横排 3 格，不竖着叠 */
  html:not(.nav-store) body .tpv2-shell .tpv2o-flow { grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  html:not(.nav-store) body .tpv2-shell.tpv2o button.tpv2o-fstep { padding: 10px 10px !important; }
  html:not(.nav-store) body .tpv2-shell.tpv2o button.tpv2o-fstep small { display: none; }
  html:not(.nav-store) body .as2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; padding: 8px !important; }
  html:not(.nav-store) body .as2-step { flex-direction: column; text-align: center; gap: 4px; padding: 6px 2px; }
  html:not(.nav-store) body .as2-step small,
  html:not(.nav-store) body .as2-step + .as2-step::before { display: none; }

  /* 商品看板「待补资料」三个环：横排三格，只留环和标题 */
  html:not(.nav-store) body .tpv2-shell .tpv2o-rings { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
  html:not(.nav-store) body .tpv2-shell button.tpv2o-ring { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 4px; }
  html:not(.nav-store) body .tpv2-shell button.tpv2o-ring small { display: none; }
  html:not(.nav-store) body .tpv2-shell button.tpv2o-ring b { font-size: 12px; }

  /* 6. 弹窗从底部弹出、占满宽度（拇指够得到） */
  html:not(.nav-store) body dialog[open] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: auto 0 0 !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 7. 长列表分批：商品看板「再看 24 款」按钮 */
  html:not(.nav-store) body .tpv2-shell button.tpv2o-more { display: flex; justify-content: center; width: 100%; min-height: 42px; margin-top: 14px; font-weight: 600; }

  /* 9. 右侧抽屉在手机上占满整屏（素材上传的款式抽屉原来是 96% 宽，左边露一条） */
  html:not(.nav-store) body .mat3 .mat3-drawer { width: 100% !important; left: 0; }

  /* 8. 加载中的提示别贴边 */
  html:not(.nav-store) body #supplier-board > .loading,
  html:not(.nav-store) body #goods-board > .loading,
  html:not(.nav-store) body #task-product-v2-board > .loading { padding: 24px 16px; color: #80867d; }
}