/* ═══════════════ 移动端适配 ═══════════════
   断点：≤900px 平板/大屏手机；≤560px 手机竖屏
   注意：本文件在 styles.css 之后加载，需要覆盖 styles.css 内
   已有的 @media(max-width:900px) 块（例如 .ws-side{display:none}）。 */

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }
  .page { padding: 20px 14px 60px; }
  .page.wide { padding: 20px 14px 60px; }

  /* 顶栏：手机上用 L4 图形标（28px），侧边栏收成抽屉 */
  .topbar { height: 56px; padding: 0 12px; }
  .topbar .brand { font-size: 15px; }
  .topbar .brand .brand-logo.full { display: none; }
  .topbar .brand .brand-logo.mark { display: block; }
  .topbar .pill, .credit-pill { padding: 4px 9px; font-size: 12px; }
  .menu-btn { display: inline-flex; }
  body.with-side { padding-left: 0; }
  .app-side { top: 0; width: 280px; max-width: 84vw; transform: translateX(-100%); transition: transform .26s cubic-bezier(.3,.8,.4,1); padding-top: 16px; z-index: 120; }
  body.side-open .app-side { transform: none; }
  body.side-open .side-mask { display: block; z-index: 119; }
  .app-side .side-brand { display: block; padding: 4px 12px 14px; }
  .app-side .side-brand img { height: 28px; width: auto; }

  /* 多列网格降列。!important 用于压过页面里的行内 grid-template-columns */
  .tool-grid-2, .tool-grid-3, .market-cards, .pack-grid, .kv-grid,
  .form-row, .skill-grid, .report-layout, .q-layout, .two-col,
  .report-hero-grid {
    grid-template-columns: 1fr !important;
  }
  /* 数据格保留两列，比单列信息密度更好 */
  .stat-grid, .hero-facts { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  h1.page-title, .page-title, .pt { font-size: 24px; }
  .page-sub { font-size: 13px; }
  .btn-back { align-self: flex-start; }

  /* 步骤条：横向滚动 */
  .stepper { overflow-x: auto; padding: 14px 12px 10px; gap: 4px; -webkit-overflow-scrolling: touch; }
  .stepper::-webkit-scrollbar { display: none; }
  .step { min-width: 46px; }
  .step .lbl { font-size: 11px; white-space: nowrap; }

  /* 触控热区加大 */
  .chip { padding: 9px 14px; font-size: 13.5px; }
  .btn { min-height: 44px; padding: 0 18px; }
  .btn-sm { min-height: 36px; padding: 0 12px; }
  .empty-state img { width: 160px; }
  .input, .select, textarea.input { font-size: 16px; }  /* ≥16px 防 iOS 聚焦缩放 */

  .article-body { font-size: 15px; line-height: 1.95; }
  .card.pad, .pad { padding: 16px 15px; }

  /* 报告页索引：侧栏改顶部横滚 */
  .report-index { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 8px; margin-bottom: 12px; }
  .report-index .cap { display: none; }
  .report-index a { white-space: nowrap; padding: 7px 12px; }
  .report-hero h1 { font-size: 26px; }

  .q-side { position: static; margin-top: 14px; }
  .q-nav { flex-wrap: wrap; }

  /* 弹层贴底，够高；抽屉全屏 */
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal { width: 100%; max-width: none; max-height: 88vh; overflow-y: auto;
           border-radius: 16px 16px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .drawer { width: 100vw; }

  /* 宽内容横滚，不撑破页面 */
  .md table, table { display: block; overflow-x: auto; max-width: 100%; }
  pre { overflow-x: auto; }
}

/* ── 工作台：手机上做成 App 壳 ── */
@media (max-width: 900px) {
  .ws-layout { flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

  /* 侧栏变顶部横向导航条（styles.css 里是 display:none，必须 !important 夺回） */
  .ws-side {
    display: flex !important; width: 100%; flex: none;
    flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; padding: 8px 10px; height: auto;
    border-right: none; border-bottom: 1px solid var(--border-subtle);
    -webkit-overflow-scrolling: touch;
  }
  .ws-side::-webkit-scrollbar { display: none; }
  .ws-side .brand { padding: 0 6px 0 0; margin: 0; white-space: nowrap; flex: none; }
  .ws-side .brand .brand-logo { height: 28px; }
  .ws-side .brand .brand-logo.full { display: none; }
  .ws-side .brand .brand-logo.mark { display: block; }
  .ws-nav .sub, .ws-nav .sub.open { display: flex; flex-direction: row; gap: 4px; padding-left: 0; }
  .ws-nav a.new { margin-top: 0; }
  .ws-nav { display: flex; flex-direction: row; gap: 4px; margin: 0; flex: none; }
  .ws-nav a, .ws-nav button { white-space: nowrap; padding: 7px 11px; font-size: 13px; margin: 0; width: auto; }
  .ws-nav .sep { display: none; }
  .ws-recent, .skills-cap { display: none !important; }
  /* 横条右侧留一个点数入口 */
  .ws-foot { display: flex !important; margin-left: auto; padding: 0 4px; border: 0; flex: none; }
  .ws-foot > span { display: none; }
  .ws-foot .cr { white-space: nowrap; font-size: 12.5px; }

  .ws-main { flex-direction: column; padding: 5px; gap: 5px; min-height: 0; overflow: hidden; }
  .ws-chat { min-width: 0; flex: 1; min-height: 0; }
  .ws-msgs { padding: 14px 12px; }
  .ws-input-wrap { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }

  /* 产物区在手机上变抽屉，由 .m-prod-open 控制 */
  .ws-products {
    position: fixed; left: 0; right: 0; bottom: 0; top: 50px; z-index: 60;
    min-width: 0; border-radius: 14px 14px 0 0;
    transform: translateY(101%); transition: transform .26s cubic-bezier(.3,.8,.4,1);
    box-shadow: 0 -8px 40px rgba(31,31,31,.28);
  }
  body.m-prod-open .ws-products { transform: translateY(0); }
  .m-prod-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
    padding: 6px 12px; font-size: 12.5px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--gray-900); color: var(--color-bg-card); border: none; white-space: nowrap;
  }
  .m-prod-btn .n { font-weight: 700; }
  .m-prod-close { display: inline-block; flex: none; }

  /* 抽屉头部：一行放下，不要挤成竖排 */
  .ws-products-head { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  .ws-products-head > div:first-child { min-width: 0; }
  .ws-products-head .t { font-size: 14px; white-space: nowrap; }
  .ws-products-head .d { display: none; }
  .ws-products-head > .flex { flex: none; gap: 6px; }
  .ws-products-head .seg button { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
  .ws-products-head .tag { white-space: nowrap; }
  .ws-products-body { padding: 14px 12px calc(24px + env(safe-area-inset-bottom)); }
  .product-card { padding: 15px 14px; }
  .product-card h3 { font-size: 15.5px; }

  .msg-user { max-width: 88%; }
  .msg-ai .bubble { max-width: 96%; }
  .step-row { padding: 9px 11px; font-size: 12.5px; flex-wrap: wrap; }
  .step-row .detail { display: none; }   /* 手机上省掉冗长的检索词 */
  .choice-opt { padding: 12px 13px; }
  .choice-card { padding: 14px 13px; }
  .cc-title { font-size: 14px; }
  .dir-group { flex-wrap: wrap; }

  .ws-hero { padding: 30px 14px 24px; }
  .ws-hero h1 { font-size: 26px; letter-spacing: 0; }
  .ws-hero-input textarea { min-height: 54px; font-size: 16px; }
  .skill-card { padding: 13px 14px; }
  .skill-card .corner { position: static; margin-left: auto; }

  .product-card .vers { flex-wrap: wrap; gap: 5px; }
  .to-compliance { padding: 11px 12px; }
}

/* 桌面端隐藏移动专属控件 */
@media (min-width: 901px) {
  .m-prod-btn, .m-prod-close { display: none !important; }
}

@media (max-width: 560px) {
  h1.page-title, .page-title, .pt { font-size: 22px; }
  .ws-hero h1 { font-size: 24px; }
  .hero-banner { flex-wrap: wrap; padding: 18px 15px; gap: 12px; }
  .hero-banner .btn { margin-left: 0; width: 100%; }
  .tool-card { padding: 16px 15px; }
  .pack .amount b, .pack b.big { font-size: 30px; }
  .flex.mt24, .flex.mt16, .flex.mt8 { flex-wrap: wrap; }
  .q-nav .btn { flex: 1; min-width: 118px; }
  .two-col > *, .form-row > * { min-width: 0; }
  .stat-grid .stat { padding: 12px 11px; }
}

/* 触屏：去掉 hover 位移，避免点一下卡在悬浮态 */
@media (hover: none) {
  .tool-card:hover, .card:hover, .skill-card:hover { transform: none; }
}

/* 首页新布局的窄屏折行 */
@media (max-width: 760px) {
  .tool-grid-3 { grid-template-columns: 1fr !important; }
  .tool-grid-3[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .hero-banner { flex-direction: column; align-items: flex-start; }
  .hero-banner .btn { margin-left: 0; }
}