/* ============================================================
   r370 移动端适配层（手机 / 平板）
   —— 本文件最后加载，用于覆盖桌面布局，不改 JS 业务逻辑
   结构：①外壳（侧栏→抽屉 + 底部 Tab）②全局网格单列 ③弹层全屏抽屉 ④触控尺寸
   ============================================================ */

/* 桌面/宽屏：移动端专属元素全部隐藏 */
.m-hamburger,
.mtab,
.m-drawer-mask { display: none; }

/* ============================================================
   ⓪ r376 轻滚动壳（回滚 r371 的 body 锁死）
   —— 恢复到「页面可正常滚动」：Safari/微信工具栏会随滚动自动收起，底部不留白条。
   只保留不产生副作用的防缩放项：禁 pinch（JS）、禁双击（touch-action）、禁橡皮筋。
   ============================================================ */
@media (max-width: 1000px) {
  /* r372 Safari 顶/底工具栏染色：跟页面背景同色，白色边框视觉上消失 */
  html { background: #06190f; }

  /* ★★★ r484：给根文档留 1px 可滚量 —— 消掉底部那条白色 < > 工具栏。
     ── 现象（中葛 2026-10-14 手机截图）：底部 Tab 栏之下还有一条白色条带，
        中间两个灰 < > 箭头 —— 那是**微信/浏览器自己的后退/前进工具栏**，不是页面元素。
     ── 机理（r373 就记过同一条）：这类工具栏**只在根文档「可滚动」并真的滚动过之后
        才会自动收起**。r376 靠「页面可正常滚动」消过它；r465 为修「整屏空白」把
        shell 钉成 innerHeight（--app-vh）后，根文档变成零可滚 ⇒ 工具栏永久挂在底部。
     ── 处置：只补 1px。既可让内核进入「已滚动」状态收掉工具栏，
        又不可能复现 r465 修掉的「shell 被推走 ~96px ⇒ 整屏只剩背景色」。
        真正的「彻底没有工具栏」是「添加到主屏幕」（standalone 全屏，见 index.html 的 manifest）。 */
  body.app::after { content: ''; display: block; height: 1px; }

  body.app {
    overscroll-behavior: none;       /* 杀掉橡皮筋回弹 */
    touch-action: manipulation;      /* 禁双击缩放，保留点击与单指滚动 */
    -webkit-text-size-adjust: 100%;
  }
  /* 视口高度用 dvh：避免 iOS 地址栏收起时 100vh 造成的整屏抖动/可拖动 */
  /* ★★★ r465：追加一级 `--app-vh`（由 app.js 用 window.innerHeight 写死成 px）——
     ── 现象（中葛截图）：操作智能体时偶尔整屏空白，只剩顶栏 + 底部 Tab 栏。
     ── 根因（CDP 实测复现）：微信 X5 / 部分 Android WebView **不认 100dvh**，
        回退到 100vh —— 而 100vh = **大视口高**（工具栏收起时），比实际可视区高出约 100px。
        于是 shell 天生比可视区高，根滚动有得可滚；又因这些内核**不认 overscroll-behavior: contain**，
        `.main-body-v2` 滑到底后手指继续滑，滚动链就传到根 ⇒ 整个 shell 被推上去
        （实测 rootST=96 / .main-v2 top=-96），顶栏与内容一起出画 ⇒ 只剩背景色。
     ── 处置：把行高钉成**真实可视高度**。innerHeight 比 dvh 兼容性好得多，且工具栏
        收起/键盘弹出时都有 resize 事件跟上；后面保留 dvh/100vh 两级回退兜底。 */
  .app-layout { grid-template-rows: 100vh; grid-template-rows: 100dvh; grid-template-rows: var(--app-vh, 100dvh); }
  /* 内容区独立滚动，滚动不冒泡到文档 */
  .main-body, .main-body-v2 {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* 弹层内部同理，滚到底不要带动整页 */
  .modal, .dh-modal, .insp-modal { overscroll-behavior: contain; }
}

/* ============================================================
   ① 外壳：≤1000px 侧栏收成抽屉，底部出现 Tab 栏
   ============================================================ */
@media (max-width: 1000px) {
  /* 行高口径同上（见 ⓪ 块 r465 注释）：--app-vh 才是真实可视高度 */
  .app-layout { grid-template-columns: 1fr; grid-template-rows: 100vh; grid-template-rows: 100dvh; grid-template-rows: var(--app-vh, 100dvh); }

  /* 侧栏 → 左侧抽屉 */
  .sidebar, .sidebar-v2 {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 78vw; max-width: 300px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1200;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .5);
  }
  body.m-drawer-open .sidebar { transform: translateX(0); }

  /* 抽屉遮罩 */
  .m-drawer-mask {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
    z-index: 1150; opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  body.m-drawer-open .m-drawer-mask { opacity: 1; pointer-events: auto; }

  /* 顶栏：汉堡钮 + 品牌 + 右侧操作，吸顶 */
  .topbar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    /* r375 standalone（添加到主屏幕）下状态栏透明覆盖：顶部让出刘海/状态栏高度 */
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background: rgba(6, 25, 18, .82); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--green-line, rgba(126, 232, 155, .16));
  }
  /* ★ r438 首页专属：顶栏与星空融为一体（修「首页大 logo 上方明显的痕迹」）
     ── 真身不是 hero 光晕（r435 修的椭圆越界是另一条），而是**顶栏这一条底边**：
        手机/窄屏下 .topbar = rgba(6,25,18,.82) + blur(12px) + border-bottom 1px rgba(126,232,155,.16)，
        在首页整片星空上横切出一道亮线。实测 580×900：边框行 y=64 的 G=58.5，
        上行 y=63 只有 27.2、下行 y=66 只有 41.1 —— 单行跳变 +31；同一条线在 773×900
        （窄窗口下的「电脑端」）落在 hero 顶边上一行，形状完全一致。
     ── 处置（三步都必要，少一步就留下另一种线）：
        ① 底色换成向下渐隐（5 段 stop，避免斜率突变又生出一条 Mach 带）；
        ② 去 backdrop-filter —— 否则「模糊区/清晰区」的交界本身也是一条边；
        ③ ★ background-origin/-clip 改成 border-box：默认是 padding-box，
           那 1px 的 border 区域不会被渐变覆盖、会露出 .main-v2 的暗底 ——
           实测这正是「去掉边框色后反而变成一条 y=64 G=26.5 的暗线」的原因
           （改 border-box 后该行回到 40.8，与上下 41 完全齐平）。
        其他视图照旧保留实底+描边（滚动内容需要分隔线）。 */
  /* ★ r451：同时挂 body[data-view="home"] —— :has() 在部分老 WebView（微信 X5 等）会静默失效，
     失效时顶栏会掉回「实底 + 1px 绿描边」，又在首页上方横切出一条亮线。 */
  .main-v2:has(.home-view.active) .topbar,
  body[data-view="home"] .topbar {
    background: linear-gradient(180deg,
      rgba(6, 25, 18, .88) 0%,
      rgba(6, 25, 18, .80) 34%,
      rgba(6, 25, 18, .58) 62%,
      rgba(6, 25, 18, .26) 84%,
      rgba(6, 25, 18, 0) 100%);
    background-origin: border-box;
    background-clip: border-box;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar-spacer { display: none; }
  .m-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border-radius: 10px; border: 1px solid var(--border, rgba(255, 255, 255, .12));
    background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .92);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-hamburger:active { background: rgba(255, 255, 255, .14); }
  .topbar-right { margin-left: auto; gap: 8px; }

  /* 底部 Tab 栏（首页 / 图片 / 视频 / 广场 / 我的） */
  .mtab {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: rgba(6, 25, 18, .95); backdrop-filter: blur(14px);
    border-top: 1px solid var(--green-line, rgba(126, 232, 155, .18));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mtab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 58px; color: rgba(255, 255, 255, .5);
    cursor: pointer; -webkit-tap-highlight-color: transparent;   /* r377 去掉 href 后补回手型/去除点击高亮 */
    text-decoration: none; font-size: 11px;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab-item svg { width: 21px; height: 21px; }
  .mtab-item.active { color: #7ee89b; }
  .mtab-item.active svg { filter: drop-shadow(0 0 6px rgba(126, 232, 155, .6)); }

  /* 主区留白：给 Tab 栏和 iPhone 底部安全区让位 */
  .main-body, .main-body-v2 { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* ★★★ r465：滚动视图末端的底栏让位 —— **必须加在内容元素上，加在滚动容器上无效**
     ── 现象（中葛截图）：智能体超市列表滑到底，最后一张卡「AI视频策划」被底部 Tab 栏压住。
     ── 病根：上面这条 .main-body-v2 的 padding-bottom 在这种结构下不生效。
        .agent-view / .inspire-view 都是 `height:100%` 的 flex 列，其**内容溢出会盖过容器的 padding 区**，
        滚到底时 scrollHeight 恰好等于内容底边（实测 390×844：mb.scrollHeight=5498 = 内容高，
        含 padding 应为 5562）⇒ 末端根本没让出空间：card.bottom=844 vs bar.top=791，被遮 53px。
     ── 首页之所以没这毛病：留白是加在 .home-view **自己**的 padding 上（r417 的 84px）。
        同法处理这两个视图 —— 留白落在内容里，才会真正延长滚动高度。
     ── 84px = 底栏 46px + 6px 内边距 + 中央创作球上凸 8px + 余量，与首页口径一致。 */
  .agent-view .agent-grid,
  .inspire-view .insp-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* 双栏工作台 → 上下堆叠 */
  .draw-workspace, .api-layout, .mine-layout, .music-page, .insp-detail, .wd-body-grid { grid-template-columns: 1fr; }

  /* r373 个人中心：一旦转成单列，「我的作品」会占满首屏、把个人信息卡与功能卡
     推到视口外（用户报「电脑版这里是失效的，无法点击也无法显现」）。
     直接隐藏它，让个人信息 + 功能卡顶到最上，与手机端表现一致。
     ★ 断点必须跟着这条媒体查询走（1000px），它才是 .mine-layout 转单列的真实阈值；
       挂在 900px 会漏掉 901~1000px 这一整段。 */
  .mine-left { display: none; }
}

/* ============================================================
   ② 网格重排：≤700px 多列卡片改单列/双列
   ============================================================ */
@media (max-width: 700px) {
  /* 单列：内容型卡片（r422 历史页移出 → 3 列宫格，见下方 history 宫格段） */
  .agent-grid, .mc-grid, .mine-grid,
  .bvi-deliver-grid, .bvi-pano-grid, .nc-out-grid, .vp-grid,
  .ps-results, .ps-summary, .ecom-duo, .duo-features, .dh-per-grid,
  .bvi-item-list, .wd-person-slots, .ecom-plan-row, .dh-na-uprow,
  .ag-grid2, .mc-ch-row, .mcl-frow2, .mcl-kind-row, .mcl-owner-row,
  .mc-sum-grid, .music-settings, .bvi-name-row, .dh-na-kinds, .footer-grid {
    grid-template-columns: 1fr;
  }

  /* r422 历史页宫格：3 列纯图墙，卡只留缩略图 + 角标 + 窄条（单行提示词 + 图标操作） */
  .history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .history-card { border-radius: 10px; }
  .history-thumb { aspect-ratio: 1 / 1; }
  .history-body { padding: 5px 6px 6px; gap: 3px; }
  .history-prompt { font-size: 11px; -webkit-line-clamp: 1; line-height: 1.35; }
  .history-meta { display: none !important; }
  .history-actions { gap: 4px; margin-top: 0; }
  .history-actions button { flex: 0 0 auto; min-width: 0; padding: 3px 7px; font-size: 0; border-radius: 6px; }
  .history-actions button .zg-ic { margin-right: 0; }
  .history-actions button[disabled] { display: none; }   /* 「无文件」宫格里不占位 */
  .history-type { font-size: 10px; padding: 1px 6px; top: 5px; left: 5px; display: inline-flex; align-items: center; }
  .history-type .zg-ic { margin-right: 0; }
  .history-vaulted { font-size: 10px; padding: 1px 6px; bottom: 5px; left: 5px; display: inline-flex; align-items: center; }
  .history-vaulted .zg-ic { margin-right: 0; }
  .history-expire { display: none !important; }          /* 宫格放不下，过期信息以预览为准 */
  .history-thumb-emoji { opacity: .5; }
  /* ★ r429 筛选条已改纯文字（去掉 .htab-ic 图标），并压到 36px：
     全局 button{min-height:44px} 的触控规则会把 4 个筛选项也顶到 44px，视觉偏大。 */
  .history-tab { height: 36px; min-height: 36px; padding: 0 14px; }

  /* 双列：chip / 小卡片（单列会太长，双列手感更好） */
  .mine-func-grid, .vch-grid, .draw-quality, .video-ratio-grid,
  .mcl-stats, .mc-sum-grid, .ag-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mc-sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* KPI 数字行：5 列 → 2 列（代理商中心） */
  .ag-kpis2, .ag-kpis3, .ag-kpis5, .bvi-logo-grid, .bvi-palette,
  .draw-models, .draw-count, .mc-av-grid, .nc-out-grid, .ecom-plan-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ag-kpis5, .mc-tier-grid, .draw-count, .draw-ratio-grid, .mc-av-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bvi-text-items, .dh-vtype-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-detail-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 横向滚动条式入口（tab 太多时不再挤压） */
  .xhs-tabs, .bvi-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .xhs-tabs > *, .bvi-tabs > * { flex: none; }

  /* 视图内边距收紧 */
  .view, .home-view, .draw-view, .video-view, .mine-view, .agent-detail-view {
    padding-left: 12px !important; padding-right: 12px !important;
  }
}

/* ============================================================
   ③ 弹层：≤700px 改为底部全屏抽屉
   ============================================================ */
@media (max-width: 700px) {
  /* ★ r458：App 通用弹窗（#modalBackdrop / .modal）不再做「底部抽屉」。
     用户反馈：点的是列表里的某一项，弹窗却总从屏幕底边滑上来，位置对不上。
     现在：① 回到屏幕居中（与桌面端一致，四角 18px 圆角）；
           ② 放大起点交给触发位置 —— common.js 的 openModal 会写入 transform-origin，
              弹窗就是从「你点的那个地方」长出来的。
     .dh-modal（数字人形象库）/ .insp-modal（灵感详情）维持底部抽屉，本次不动。 */
  .modal-backdrop {
    align-items: center; justify-content: center;
    padding: 16px;
  }
  .dh-modal-backdrop, .insp-modal-mask {
    align-items: flex-end; justify-content: center; padding: 0;
  }
  .modal {
    width: 100%; max-width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 18px;
    padding: 16px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform-origin: 50% 50%;   /* 兜底：拿不到触发点时从正中展开，运行时由 JS 覆盖 */
  }
  .dh-modal, .insp-modal {
    width: 100%; max-width: 100%;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 18px 18px 0 0; border-bottom: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .modal.modal-xl, .modal.modal-lg, .dh-modal--lib, .insp-modal-box {
    width: 100%; max-width: 100%; min-width: 0;
  }
  /* 灵感详情 viewer 也要能竖排：媒体在上、信息在下 */
  .insp-detail { grid-template-columns: 1fr; }
  .insp-detail-prev img { max-height: 46vh; }
  .insp-detail-info { padding: 16px 14px calc(90px + env(safe-area-inset-bottom, 0px)); }
  .insp-modal-x { left: 10px; top: 10px; }

  /* 表格类内容允许横向滚动，不撑破屏幕 */
  .mcl-table, .ag-table, .insp-table, table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   ④ 触控尺寸与可读性：≤700px
   ============================================================ */
@media (max-width: 700px) {
  button, .btn, .chip, .mcl-chip, .insp-btn, .nav-item,
  .mc-func, .mine-func, .tab-item, .vchip {
    min-height: 44px;
  }
  /* 按钮文字不许竖排折行（广场「搜索/上传作品」等） */
  button, .btn, .insp-btn, .mcl-chip, .insp-chip, .mtab-item span { white-space: nowrap; }
  input, select, textarea { font-size: 16px; } /* 防 iOS 聚焦自动放大 */
  body { -webkit-text-size-adjust: 100%; }

  /* 聊天输入框：16px 字号后单行要放得下 */
  .llm-input { min-height: 44px; line-height: 1.5; padding: 12px 4px; }

  /* 灵感广场头部：搜索行超宽 → 搜索框占满、按钮收紧 */
  .insp-search { flex: 1 1 100%; min-width: 0; }
  .insp-search input { flex: 1; min-width: 0; width: auto; }
  .insp-up-btn { flex: none; }

  /* ★ r458：30×30 的圆形关闭钮（我的发票 / 抬头管理 / 在线客服 / 消费记录 /
     立即开票 这些弹层右上角那个 .mcl-x）被上面的 button{min-height:44px}
     撑成 30×44 的椭圆 —— 用户截图里一眼能看出来。这里锁死正方形，
     触控热区改用 ::after 补到 ~44px（不占版面）。 */
  .mcl-x {
    width: 30px; height: 30px; min-height: 0; max-height: 30px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  /* ★ r461：inset -7px → -8px。r461 给 .mcl-x 加了 1px 描边，伪元素按内边距盒算，
     30px 只剩 28px，-7px 的热区从 44px 缩到 42px；这里补回原值。 */
  .mcl-x::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
}

/* ============================================================
   ⑤ 首页 hero：≤480px 视觉中心按视口缩放（原 360px 固定宽会裁字）
   ============================================================ */
@media (max-width: 480px) {
  .home-hero { padding: 20px 10px 8px; min-height: 300px; }
  /* ★ app.css r338 的 .home-hero:has(.eye-energy-robot) .home-hero-eyes 是 430px 固定宽
     （特异性更高且不在媒体查询里），必须用同特异性选择器覆盖，否则 390px 屏裁字 */
  .home-hero:has(.eye-energy-robot) .home-hero-eyes,
  .home-hero-eyes {
    width: min(300px, 82vw) !important;
    height: min(300px, 82vw) !important;
    margin-bottom: -14px;
  }
  .home-features { grid-template-columns: 1fr; }
}

/* ============================================================
   ⑥ r379 手机端专项修复
   a) 语言下拉：面板改居中弹层 + 遮罩（原绝对定位会盖住大半画面且无遮罩观感差）
   b) 顶栏：登录按钮不许两行换行（Español / Tiếng Việt 等长文案会把顶栏挤爆）
   c) 图片放大预览：不再贴底（弹层居中），底部加「保存图片」条
   ============================================================ */
@media (max-width: 700px) {
  /* --- 顶栏拥挤 --- */
  .topbar-right { gap: 8px; }
  .topbar-user { max-width: 132px; white-space: nowrap; }
  .topbar-login {
    display: inline-block; max-width: 96px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px;
  }
  .i18n-btn { padding: 0 9px; height: 34px; font-size: 12px; gap: 5px; }
  .i18n-cur { max-width: 84px; font-size: 12px; }

  /* --- 语言面板：居中弹层 + 遮罩 --- */
  .i18n-mask { display: none; }
  .i18n-mask.open {
    display: block; position: fixed; inset: 0; z-index: 2998;
    background: rgba(2, 10, 6, .62); backdrop-filter: blur(2px);
  }
  .i18n-panel {
    position: fixed; left: 50%; top: 50%;
    width: min(320px, 86vw); max-height: 72dvh;
    right: auto; min-width: 0;
    transform: translate(-50%, -50%) scale(.96);
    z-index: 2999;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
    overscroll-behavior: contain;
  }
  .i18n-panel.open { transform: translate(-50%, -50%) scale(1); }
  .i18n-item { padding: 12px 14px; }

  /* --- 图片放大预览：居中显示 + 保存条 --- */
  .dh-modal-backdrop { align-items: flex-end; }
  .modal.image-preview-modal {
    align-self: center;                 /* r458 起 .modal-backdrop 本身就是居中，这里保留兜底 */
    width: auto; max-width: 100vw;
    max-height: 94dvh; padding: 10px !important;
    background: rgba(4, 12, 8, .92);
    border: none; border-radius: 14px;
    display: flex; flex-direction: column;
  }
  .modal.image-preview-modal .image-preview-wrap.ipv {
    flex-direction: column; align-items: center; gap: 10px;
    background: transparent; padding: 0;
  }
  .modal.image-preview-modal .image-preview-img {
    max-width: 94vw; max-height: 72dvh;
    object-fit: contain; border-radius: 10px;
    -webkit-touch-callout: default;     /* iOS 长按呼出「存储图像」 */
  }
  .ipv-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
  }
  .ipv-bar .btn { min-height: 40px; padding: 0 18px; }
  .ipv-tip { font-size: 11.5px; color: rgba(255,255,255,.55); }
}

/* --- r381 价格角标遮挡正文：小屏时缩小角标 + 正文让出角标那一行 --- */
@media (max-width: 700px) {
  .ri-price {
    top: 6px; right: 8px;
    font-size: 10px;
    padding: 2px 7px;
    gap: 3px;
    max-width: calc(100% - 16px);
  }
  /* 角标可见时，描述文字从角标下方开始，不再被盖住（:has 全现代手机浏览器支持） */
  .draw-textarea-wrap:has(.ri-price:not([hidden])) .draw-textarea {
    padding-top: 30px;
  }
}

/* ============================================================
   ⑦ r390 手机端修改意见落地（修改意见.docx）
   1) 灵感广场分类折叠 2) 灵感宫格 3) 大模型输入紧凑条
   4) 视频参数/渠道弹层改底部面板   仅 ≤700px 生效
   ============================================================ */

/* --- 全局（桌面也生效）：分类折叠切换按钮桌面隐藏 --- */
.insp-cat-toggle { display: none; }
/* r390 聊天页功能开关折叠按钮：桌面隐藏（桌面开关行常显） */
#llmOptToggle { display: none; }

@media (max-width: 700px) {

  /* --- ① 灵感广场：分类默认收起，点「分类 ▾」展开 --- */
  .insp-cat-toggle { display: inline-block; margin-bottom: 8px; font-size: 11px; padding: 4px 10px; }
  .insp-types, .insp-cats { display: none !important; }
  .insp-filters-open .insp-types, .insp-filters-open .insp-cats { display: flex !important; }
  /* r392 展开态必须完整外显：取消滚动/裁切，chips 全部换行铺开 + 小字压缩 */
  .insp-filters-open .insp-types,
  .insp-filters-open .insp-cats { flex-wrap: wrap; max-height: none; overflow: visible; }
  .insp-filters-open .insp-types { gap: 6px; margin-bottom: 8px; }
  .insp-filters-open .insp-cats { gap: 5px; margin-bottom: 10px; }
  .insp-filters-open .insp-type { font-size: 11px; padding: 3px 10px; }
  .insp-filters-open .insp-cat { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
  /* r472 标签 chips 与分类 chips 同一排展开，尺寸必须一起压 —— 否则标签比分类大一圈 */
  .insp-filters-open .insp-tag-chip { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
  .insp-filters-open .insp-tags-row { gap: 5px; }

  /* r392 灵感广场头部整体压缩：标题/副标题/搜索行/分区行/排序行 占高收紧 */
  .inspire-view .view-title { font-size: 20px; }
  .inspire-view .view-sub { font-size: 11px; margin-top: 2px; }
  .inspire-view .insp-head { margin-bottom: 10px; gap: 8px; }
  .inspire-view .insp-search input { height: 34px; max-width: none; flex: 1 1 auto; font-size: 12px; padding: 0 12px; }
  .inspire-view .insp-search button { height: 34px; padding: 0 12px; font-size: 12px; }
  .inspire-view .insp-tabs { padding-bottom: 8px; margin-bottom: 8px; }
  .inspire-view .insp-tab { font-size: 12px; padding: 6px 12px; }
  .inspire-view .insp-sorts { margin: 8px 0 2px; gap: 6px; }
  .inspire-view .insp-sort { font-size: 11px; padding: 3px 10px; }

  /* --- ② 灵感广场：宫格图（3 列小卡，图片为主） --- */
  .insp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px;
  }
  .insp-card { border-radius: 10px; }
  .insp-card-body { padding: 5px 6px 7px; }
  .insp-card-title {
    font-size: 11px; line-height: 1.35; margin-bottom: 0;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* ★ r447：作者行整行 display:none = 手机上根本没有点赞入口 ——
     这就是「灵感广场的作品无法点赞」的根因（桌面端正常，只有 ≤700px 被藏了）。
     现在只隐藏「已调好 N 项参数」那行，作者行压成「16px 头像 + 昵称 + 点赞」保留下来。 */
  .insp-card-tuned { display: none; }
  .insp-card-creator { display: flex !important; gap: 4px; margin-top: 4px; }
  .insp-card-creator-l { flex: 1 1 auto; min-width: 0; gap: 4px; }
  .insp-card-creator .insp-ava { width: 16px; height: 16px; font-size: 9px; }
  .insp-card-creator .insp-card-author { flex: 1 1 auto; min-width: 0; font-size: 10px; }
  /* 必须显式取消 ④ 区那条 button{min-height:44px}，否则点赞钮会被撑成竖条把卡片顶爆 */
  .insp-card-creator .insp-like {
    flex: none; min-height: 0; max-height: none; height: auto;
    padding: 2px 4px; font-size: 10px; gap: 2px;
  }
  .insp-card-creator .insp-like .zg-ic svg { width: 11px; height: 11px; }
  .insp-card-price { font-size: 9px; padding: 1px 5px; border-radius: 4px; }
  .insp-card-badge { font-size: 9px; padding: 1px 5px; }
  .insp-card-manage { opacity: 1; gap: 4px; padding: 4px; }   /* 手机无 hover，我的上传管理条常显（贴底小字） */
  .insp-card-mbtn { flex: none; min-height: 0; height: auto; font-size: 9px; padding: 2px 7px; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.35); }
  .insp-card-mbtn.danger { background: rgba(255, 92, 92, .85); }

  /* --- ③b 聊天页头部收纳（参考设计：标题/模型 + 聊天区 + 快捷 + 输入条，其余收起） --- */
  .llm-page { padding: 14px 12px 12px; }
  .llm-head { margin-bottom: 12px; }
  .llm-subtitle { display: none; }
  .llm-title { font-size: 19px; }
  .llm-title::before { width: 24px; height: 24px; }
  .llm-head-tools { flex-wrap: nowrap; gap: 6px; }
  .llm-model-select { flex: 1; min-width: 0; }
  .llm-select { width: 100%; min-width: 0; padding: 8px 30px 8px 12px; height: 36px; }
  /* r420：emoji 图标（🗂🧹＋）→ 线性 SVG 图标，手机端只留图标 */
  .llm-head-tools .llm-tool-btn { padding: 0 10px; height: 36px; min-height: 0; }
  .llm-head-tools .llm-tool-icon span { display: none; }
  .llm-head-tools .llm-tool-icon { gap: 0; }
  /* r419 ⚙ 功能收进输入条（图标钮），展开的开关行贴输入区上方（不再悬浮聊天区挡消息） */
  #llmOptToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; min-height: 0; padding: 0; flex: none;
    font-size: 0; border-radius: 50%;
  }
  #llmOptToggle::before { content: '⚙'; font-size: 16px; }
  #llmOptToggle.on::before { content: '✕'; }
  /* 功能开关行默认折叠，点 ⚙ 展开（行已移到输入区上方） */
  .llm-toolbar { display: none; margin: 0 0 8px; }
  .llm-toolbar.llm-opts-open { display: flex; flex-wrap: wrap; }

  /* --- ③ 大模型：输入区改单行紧凑条（对齐参考设计） --- */
  .llm-input-box { align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border-radius: 999px; }
  .llm-voice-btn { width: 34px; height: 34px; min-height: 0; flex: none; }
  .llm-input { min-height: 32px; max-height: 76px; font-size: 16px; padding: 4px 4px; line-height: 1.45; }
  .llm-send-btn, .llm-stop-btn { width: 38px; height: 38px; min-height: 0; flex: none; border-radius: 50%; }
  .llm-quick-actions { padding: 0 0 10px; gap: 6px; }
  .llm-quick-tag { font-size: 12px; padding: 6px 10px; min-height: 0; }
  /* r392 聊天页压缩文字空间：底部「接口 · 记忆隔离 ID · 历史保存」调试性提示手机端隐藏 */
  #llmFootNote { display: none !important; }

  /* --- ④ r425 视频参数 / 渠道弹层：改「点哪出现在哪」---
     r390 曾把手机端弹层改成「固定底部面板」（fixed 贴底），于是点页面上方的 chip，
     选项却跑到屏幕最底部，与点击位置脱节。现恢复锚定式：位置交给 fitVchipPop()
     内联计算（左对齐 chip / 右侧越界往左推 / 下方放不下就上翻），这里只兜尺寸。
     ★ 本块不能用 !important —— 否则会压掉 JS 写的内联 left/top/maxHeight。 */
  .vchip.is-open .vchip-pop {
    min-width: min(300px, calc(100vw - 32px));
    max-width: min(340px, calc(100vw - 24px));
    max-height: min(58vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  }
}


/* ============================================================
   ⑨ r399 手机端主页改版 v2（≤700px，切图对齐设计稿逐像素）
   素材（Pillow 从设计稿 1080×1920 裁切，坐标经像素扫描校准）：
   home-hero-design.jpg = 设计稿 y0..958（机器人+标题+一念显化，整块原样）
   home-ic-*.png = 4 个 3D 图标 + 智能体头像（椭圆羽化）；home-orb.png = 创作球（圆蒙版）
   卡片几何（native×0.361 → 390 宽）：边距20 卡宽162 列距24 行距15 卡高83 导航高44
   ============================================================ */
@media (max-width: 1000px) {
  /* --- 底部 Tab（设计稿：内缩圆角胶囊 + 中央创作球，nav y1782..1904 → 高44 底距6）---
     ★ r435 改成「下沿贴屏 + 左右满宽」，堵掉内容从缝里穿过去：
     原版是 left/right:10px + bottom:6px+safe-area 的浮动胶囊。本机（安全区=0）底距只有 6px，
     看不出问题；真机上安全区 34px（微信内置浏览器给的值更大），底距被撑到约 40px，
     胶囊左右各留 10px、下沿留 40px 成为一条「缝」——页面卡片连同卡片描边从缝里穿过去，
     视觉上就是内容穿过了导航栏（中葛附图，截图实测缝内可见卡片绿描边）。
     现在左右满宽、下沿落到屏幕底，内容只在导航上沿消失；安全区改由 padding 吸收，
     图标不会压到 Home Indicator。胶囊观感（配色 / 顶部描边 / 中央创作球）全保留，
     仅上圆角 999px → 22px（下圆角必须为 0，否则底部两角又会重新露缝）。
     ★ 底色由半透明毛玻璃改为**实心 #0a2519**（原 rgba(9,38,25,.92)+blur 的等效实色）：
       实测底栏压到亮色卡片上时，毛玻璃会把卡片的蓝紫底色透出一层雾，
       仍会被看成「内容穿过去了」；实心后彻底杜绝，顶描边 + 上方投影负责与内容分层。 */
  .mtab {
    left: 0; right: 0; bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #0a2519;
    border: 0;
    border-top: 1px solid rgba(126, 232, 155, .22);
    box-shadow: 0 -6px 24px rgba(0, 10, 4, .45);
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mtab-item { font-size: 10px; height: 46px; gap: 2px; }
  .mtab-item svg { width: 19px; height: 19px; }
  .mtab-orb-ball {
    width: 48px; height: 48px; border-radius: 50%;
    background: transparent; box-shadow: 0 4px 14px rgba(0, 20, 8, .5);
    padding: 0;
  }
  .mtab-orb-ball img { width: 100%; height: 100%; display: block; border-radius: 50%; }
  .mtab-orb-label { display: none; } /* 设计稿中央球下无文字 */
  .mtab-orb { position: relative; }
  .mtab-orb .mtab-orb-ball { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); }
  .mtab-orb { padding-top: 24px; }
}

@media (max-width: 700px) {
  .dt-only { display: none !important; }
  .m-only { display: inline !important; }
  .m-home-only { display: block !important; }

  /* --- r415 星空底：浩瀚星球（大星球弧 + 主行星）+ 星点 + 星云；r419 去左侧小行星圈、星辰加密 ---
     ★★★ r451：整块底色从 .home-view **上移到 .main-v2**（修「手机端机器人 logo 头顶那道裁切痕迹」）
       ── 病根：底色原先铺在 .home-view 上，而 .home-view 是从顶栏下沿（y≈65px）才开始铺的；
          y<65 那一条是「顶栏渐变 + .main-v2 底色」的另一套颜色，两条底在 y=65 处必然对不齐。
          实测该行平均亮度跳变 +5（微信压缩后仍是一条清晰横线），而且 .home-view 的
          不透明星空底正好从这一行开始，还会把 .hs-logo 的外发光硬切一刀。
       ── 处置：底色改挂 .main-v2（y=0 起、整屏高），.home-view 自己透明。
          于是顶栏 / 机器人 / 能力卡 / 底部导航全落在**同一层连续底色**上，y=65 处结构上不可能再有台阶；
          同时 y=689（.home-view 原底边）那条「下半屏换色」的边也一并消失。
       ── 判定：body[data-view="home"]（switchView 写入，最可靠）+ :has() 兜底（老引擎无 data-view 时仍命中）。 */
  .main-v2:has(.home-view.active),
  body[data-view="home"] .main-v2 {
    /* ★★★ r459：删掉本层背景里画的「行星」两笔（大气光晕 + 球体本体）
       ── 现象（中葛截图，1280×2781）：手机端首页右上角出现**两个地球**叠影。
       ── 根因：同一颗球被实现了两份 ——
          · 本层：`circle 92px/54px at 84% 13%`，坐标相对 .main-v2（y=0 起、整屏高 830）→ 球心视口 y≈108；
          · dom：`.tech-fx .tf-planet` 同坐标 84% 13%，但坐标相对 .home-view（顶栏下 y=65 起、高 701）→ 球心视口 y≈156。
          两者 x 完全重合、y 差 48px（半径同为 54px），重叠约六成，肉眼就是两颗球错位相叠。
       ── 处置：只保留 dom 里那颗带土星环 + 表面扫描纹的 .tf-planet（可单独调远近/明暗），
          背景层去掉球与光晕，只留星空 / 地平线光 / 星云（底噪不变）。 */
    background:
      radial-gradient(58% 22% at 50% 110%, rgba(80, 140, 105, .30), rgba(28, 55, 40, .14) 58%, transparent 74%),
      radial-gradient(1.2px 1.2px at 22px 34px, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1px 1px at 88px 120px, rgba(210,255,230,.75), transparent 60%),
      radial-gradient(1.4px 1.4px at 160px 66px, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(.8px .8px at 190px 168px, rgba(190,255,210,.65), transparent 60%),
      radial-gradient(1px 1px at 60px 200px, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(1px 1px at 14px 22px, rgba(255,255,255,.75), transparent 60%),
      radial-gradient(.9px .9px at 96px 60px, rgba(200,255,225,.6), transparent 60%),
      radial-gradient(.7px .7px at 132px 130px, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(1.1px 1.1px at 40px 90px, rgba(210,255,235,.7), transparent 60%),
      radial-gradient(.8px .8px at 150px 24px, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(1px 1px at 30px 150px, rgba(190,255,215,.6), transparent 60%),
      radial-gradient(2px 2px at 70px 40px, rgba(255,255,255,.95), transparent 60%),
      radial-gradient(3.5px 3.5px at 120px 110px, rgba(235,255,245,.9), transparent 55%),
      radial-gradient(60% 30% at 50% 4%, rgba(46, 110, 70, .38), transparent 72%),
      radial-gradient(46% 22% at 80% 26%, rgba(30, 80, 100, .22), transparent 72%),
      radial-gradient(50% 26% at 14% 40%, rgba(60, 50, 110, .16), transparent 72%),
      linear-gradient(180deg, #041712 0%, #02100c 42%, #010a07 100%) !important;
    background-size: auto,   /* r459：原为「auto, auto, auto」，随球与光晕两层一并删掉两项 */
      220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
      150px 150px, 150px 150px, 150px 150px,
      180px 180px, 180px 180px, 180px 180px,
      300px 300px, 300px 300px,
      auto, auto, auto, auto;
  }
  /* --- .home-view：只保留布局职责（★ flex:0 0 auto：原被 main-body flex 压到 406px 且
     overflow:hidden 裁掉卡片「智能体看不到的根因」，放开后内容撑开 main-body 自然滚动） --- */
  .home-view {
    position: relative;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* r417：底部留足导航高度+间距，保证智能体卡完整露出且与导航保持距离 */
    padding: 0 0 calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    /* r451：底色交给 .main-v2（见上），自己不再铺底 —— 否则又会在 y=65 生出一条边 */
    background: none !important;
    /* r451：特效层（星点 / 银河光带 / CRT）铺满可视区，底部不出现「特效到此为止」的接缝 */
    min-height: 100%;
  }
  /* r451 修「机器人 logo 头顶的裁切痕迹」第二步：解除光晕被硬裁
     ── r415 为「首页固定不滚动」给 .main-body-v2 加了 overflow:hidden，代价是
        .hs-logo 的三层 drop-shadow 外发光到第 65px 就被切出一条平直边（实测放开裁切后
        y=70~76 的光晕亮度 20.7 → 34.9，说明确有光晕被切掉）。
     ── 现改为：首页时放开 .main-body-v2 的裁切，禁止滚动改由 body 兜底（视觉等价、且零硬边）。 */
  .main-v2:has(.home-view.active) .main-body-v2,
  body[data-view="home"] .main-body-v2 { overflow: visible !important; overscroll-behavior: none; }
  body:has(.home-view.active),
  body[data-view="home"] { overflow: hidden; }
  html, body { overscroll-behavior: none; }
  /* 拖动回弹（overscroll）露出的页面底色与星空底色对齐 */
  html, body { background: #02100c; }
  /* 闪烁星层（与底层星点错相位，营造星空呼吸感） */
  .home-view::before {
    content: '' !important;
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,.85), transparent 60%),
      radial-gradient(1.3px 1.3px at 130px 150px, rgba(160,255,190,.8), transparent 60%),
      radial-gradient(.9px .9px at 200px 30px, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(1px 1px at 20px 190px, rgba(200,255,220,.6), transparent 60%),
      radial-gradient(1.1px 1.1px at 90px 100px, rgba(255,255,255,.75), transparent 60%),
      radial-gradient(.8px .8px at 170px 200px, rgba(190,255,220,.6), transparent 60%),
      radial-gradient(1.2px 1.2px at 240px 90px, rgba(220,255,240,.7), transparent 60%);
    background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 210px 210px, 210px 210px, 300px 300px;
    animation: starTwinkle 3.4s ease-in-out infinite alternate;
  }
  /* 银河光带：斜向柔光横贯上部 */
  .home-view::after {
    content: '' !important;
    position: absolute; left: -30%; top: -4%; width: 160%; height: 34%;
    z-index: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 32%, rgba(140, 220, 255, .05) 44%, rgba(215, 255, 235, .11) 50%, rgba(140, 220, 255, .05) 57%, transparent 70%);
    transform: rotate(-13deg);
    filter: blur(7px);
    animation: bandDrift 14s ease-in-out infinite alternate;
  }
  @keyframes starTwinkle { from { opacity: .35; } to { opacity: 1; } }
  @keyframes bandDrift { from { transform: rotate(-13deg) translateX(-2.5%); } to { transform: rotate(-13deg) translateX(2.5%); } }
  .home-view > * { position: relative; z-index: 1; }
  body.app { background: #02100c; } /* r414：与星空底色一致（回弹不露色差） */

  /* ===== r416 科技感特效层：透视网格地平线 + CRT 细纹 + 扫描光带 + 带环行星 ===== */
  .home-view > .tech-fx {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    overflow: hidden;
    pointer-events: none;
  }
  /* 透视网格（cyber grid）：缓慢向前推进 */
  .tf-grid {
    position: absolute;
    left: -60%; right: -60%; bottom: 0; height: 54%;
    background-image:
      linear-gradient(rgba(110, 255, 205, .30) 1px, transparent 1px),
      linear-gradient(90deg, rgba(110, 255, 205, .26) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(200px) rotateX(64deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 38%, transparent 82%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 38%, transparent 82%);
    animation: gridRun 3.2s linear infinite;
    opacity: .9;
  }
  @keyframes gridRun { from { background-position: 0 0; } to { background-position: 0 48px; } }
  /* CRT 细横纹：只在上部星空区显现，不干扰卡片 */
  .tf-lines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg, rgba(160, 255, 220, .07) 0 1px, transparent 1px 4px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 34%, transparent 62%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 34%, transparent 62%);
    opacity: .7;
  }
  /* 带环行星（★ r459：现在全站手机端**唯一一颗球** —— 背景层那份同坐标的球已删）
     ── 原 top:13% left:84% / 108px：球体 + 214px 的土星环一直探到「智显AI系统」右上方，
        与 logo 抢视觉重心。
     ── 按「稍微远一些」处理：往右上角推 + 收一档体量 + 降一档亮度（大气透视，越远越淡）——
        球心 (358.7,156.1) → (388.6,142.1)，直径 108 → 92，环 214×64 → 184×56，
        外发光 36px/.22 → 30px/.18，整体 opacity .92。环左端 247 → 292，退到 logo 右边界(320)之外。 */
  .tf-planet {
    position: absolute; top: 11%; left: 91%;
    width: 92px; height: 92px; margin: -46px 0 0 -46px;
    border-radius: 50%;
    opacity: .92;
    background: radial-gradient(circle at 34% 30%, #86b096 0%, #3f6150 46%, #17281f 78%, #0a140f 100%);
    box-shadow: inset -12px -8px 26px rgba(0, 20, 12, .7), 0 0 30px rgba(120, 255, 200, .18);
  }
  .tf-planet::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: repeating-linear-gradient(180deg, rgba(150, 255, 215, .12) 0 1px, transparent 1px 8px);
    -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 72%);
    mask-image: radial-gradient(circle, #000 58%, transparent 72%);
  }
  .tp-ring {
    position: absolute; left: 50%; top: 50%;
    width: 184px; height: 56px; margin: -28px 0 0 -92px;   /* r459：随球体收一档（原 214×64） */
    border: 1px solid rgba(150, 255, 215, .36);
    border-bottom-color: rgba(150, 255, 215, .14);
    border-radius: 50%;
    transform: rotate(-16deg);
    box-shadow: 0 0 12px rgba(120, 255, 200, .18);
  }

  /* --- r414 星空 logo 区：上中位置 + 周边银河光晕 + 缓浮动画 --- */
  .home-v2 { position: relative; gap: 0; }
  .home-v2 > * { flex-shrink: 0 !important; }
  .home-hero {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto;
    background: none;
    display: block;
    overflow: visible;
    position: relative;
    flex-shrink: 0 !important;
  }
  .home-hero-glow, .home-hero-eyes, .home-hero-text,
  .hero-tech, .hero-orbit,                       /* r430 电脑端专属科技层，手机不渲染 */
  .hero-logo-wrap, .hero-logo, .hero-tagline { display: none !important; }
  .hero-star {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4.5vw 0 0;
    position: relative;
  }
  .hs-logo {
    width: 50vw; max-width: 260px; height: auto;
    position: relative; z-index: 1;
    filter: drop-shadow(0 0 14px rgba(120, 255, 205, .42)) drop-shadow(0 0 42px rgba(60, 220, 170, .22)) drop-shadow(0 8px 26px rgba(0, 0, 0, .65));
    /* r415：按要求去掉浮动动画，logo 固定 */
  }
  /* 标语：参考稿书法感衬线字；r417 字号缩小 + 贴近 logo；负右边距抵消末字后空隙保证真居中 */
  .hs-tagline {
    position: relative; z-index: 2;
    margin: 1.4vw -.14em 0 0;
    font-family: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
    font-size: 4.4vw;
    font-weight: 400;
    letter-spacing: .14em;
    color: #cfeab4;
    text-align: center;
    white-space: nowrap;
    text-shadow:
      0 0 10px rgba(120, 255, 200, .45),
      0 0 26px rgba(80, 220, 160, .28),
      0 2px 10px rgba(0, 30, 10, .6);
  }
  /* r417 新特效：双星轨道（轨道线不可见，两颗光点绕 logo 运行，克制不抢镜） */
  .hs-orbit {
    position: absolute; top: 50%; left: 50%;
    width: 66vw; height: 66vw; max-width: 266px; max-height: 266px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: orbitSpin 8s linear infinite;
  }
  .hs-orbit::before, .hs-orbit::after {
    content: ''; position: absolute; left: 50%; top: 0;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #d8ffee;
    box-shadow: 0 0 10px rgba(140, 255, 215, .95), 0 0 26px rgba(90, 240, 180, .55);
  }
  .hs-orbit::after {
    top: auto; bottom: 0; width: 4px; height: 4px;
    margin: 0 0 -2px -2px; opacity: .6;
    box-shadow: 0 0 8px rgba(140, 255, 215, .8);
  }
  @keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* --- 能力卡：玻璃卡流式 2 列（星空上自由摆放） --- */
  .home-features {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3vw;
    padding: 0 !important;
    margin: 3.6vw 4.5vw 0 !important;
  }
  .home-feature {
    height: auto; min-height: 0;
    padding: 3.8vw 3.2vw !important;
    gap: 2.2vw;
    background: linear-gradient(135deg, rgba(24, 64, 36, .66), rgba(10, 34, 20, .66)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(126, 232, 155, .22) !important;
    border-radius: 2.8vw;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  }
  .home-feature .hf-icon { width: 10.5vw; height: 10.5vw; }
  .home-feature .hf-title { font-size: 3.6vw; margin-bottom: .6vw; }
  .home-feature .hf-sub { font-size: 2.5vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-feature .hf-arrow { font-size: 4vw; }
  .home-feature::before, .home-feature::after { display: none !important; }
  .home-feature > * { visibility: visible; }

  /* --- 智能体卡：玻璃横幅，流式跟在能力卡后 --- */
  .home-agent {
    position: static;
    height: auto; min-height: 0;
    margin: 3.2vw 4.5vw 0 !important;
    padding: 4.2vw 3.8vw !important;
    background: linear-gradient(135deg, rgba(24, 64, 36, .66), rgba(10, 34, 20, .66)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(126, 232, 155, .22) !important;
    border-radius: 2.8vw;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
  }
  .home-agent > * { visibility: visible; }
  .home-agent::after { display: none !important; }
  .home-agent .ha-right, .home-agent .ha-divider, .home-agent .ha-desc { display: none !important; }
  .home-agent .ha-left { flex: 1; min-width: 0; gap: 2.8vw; flex-direction: row !important; text-align: left !important; align-items: center !important; } /* 压过 app.css ≤960 的竖排 */
  .home-agent .ha-icon { width: 12vw; height: 12vw; }
  .home-agent .ha-title { font-size: 4.2vw; }
  .home-agent .ha-name { font-size: 2.7vw; margin-bottom: 1.8vw; }
  .home-agent .ha-chips { display: flex; gap: 1.5vw; flex-wrap: nowrap; }
  .home-agent .ha-chips span {
    font-size: 2.5vw; padding: .5vw 2.2vw; border-radius: 999px;
    color: #cfeec2; background: rgba(126, 232, 155, .12);
    border: 1px solid rgba(126, 232, 155, .28); white-space: nowrap;
  }

  /* --- r408 点击触感：按压缩放 + 提亮 + 描边光（模拟原生 App 触感） --- */
  .home-feature, .home-agent, .mtab-item {
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease,
                background .16s ease, border-color .16s ease;
  }
  .home-feature:active, .home-agent:active {
    transform: scale(.96);
    filter: brightness(1.5) saturate(1.15);
    border-color: rgba(190, 255, 150, .65) !important;
    box-shadow: 0 0 0 1px rgba(190, 255, 150, .45), 0 10px 30px rgba(0, 0, 0, .4);
  }
  .mtab-item:active { transform: scale(.88); }
  .mtab-orb .mtab-orb-ball {
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
  }
  .mtab-orb .mtab-orb-ball:active { transform: translateX(-50%) scale(.9) !important; }

  /* 隐藏内容滚动条（模拟器下占 8px 宽会让背景图右侧露边） */
  .main-body-v2::-webkit-scrollbar { display: none; }
  .main-body-v2 { scrollbar-width: none; }

  /* r417 矮屏（锁定滚动后必须一屏放下）：整体压缩 */
  @media (max-height: 720px) {
    .hero-star { padding-top: 1.5vw; }
    .hs-logo { width: 40vw; }
    .hs-orbit { width: 54vw; height: 54vw; }
    .hs-tagline { font-size: 3.6vw; margin: .8vw -.14em 0 0; }
    .home-features { gap: 2.2vw; margin-top: 2.2vw; }
    .home-feature { padding: 2.8vw 2.6vw !important; }
    .home-feature .hf-icon { width: 9vw; height: 9vw; }
    .home-agent { margin-top: 2vw !important; padding: 3vw 3vw !important; }
  }
}

/* ============================================================
   r452 图标方钮尺寸归位：把「被 min-height:44px 撑成竖条」的框锁成正方形
   ── 根因：本文件 ④ 区 @media(max-width:700px){ button{ min-height:44px } }
      是给「带文字的功能按钮」留触控高度用的，却连带把「只放一个图标」的小方钮
      撑成了「宽 24~29 / 高 44」的竖条。用户截图反馈两处：
        ① 个人中心「名字旁的 ✎」  24×44
        ② 创作记录卡片「下载 / 删除」29×44
   ── 做法沿用 r436 .login-page-close 的既有套路：显式 min-height:0 + 锁死 1:1，
      触控热区另用「透明的绝对定位伪元素」补足 —— 视觉是正方形，手指也不会更难按。
   ============================================================ */
@media (max-width: 700px) {
  /* ① 个人中心「名字旁的 ✎」：24×44 竖条 → 28×28 正方形 */
  .mine-name-edit {
    position: relative;
    width: 28px; height: 28px;
    min-height: 0; max-height: 28px; flex: 0 0 auto;
    padding: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
  }
  /* 视觉 28×28，热区补到 ~40×40（透明、不占位、不改观感） */
  .mine-name-edit::after { content: ''; position: absolute; inset: -6px; border-radius: 12px; }

  /* ② 创作记录卡片的「下载 / 删除」：29×44 竖条 → 30×30 正方形
     （宫格卡片里这两个钮已经 font-size:0 只留图标，正方形才是它该有的形状） */
  .history-actions button {
    width: 30px; height: 30px;
    min-height: 0; max-height: 30px; flex: 0 0 auto;
    padding: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .history-actions button .zg-ic { margin-right: 0; }
  .history-actions button .zg-ic svg { width: 15px; height: 15px; }
}

/* ============================================================
   r456 手机端（≤700px）首页 logo「雾蒙蒙」同款治理
   ── 手机端首页是另一套 .hero-star / .hs-logo（星空底 + 完整 logo 图），
      与台式 .home-hero / .big-eye-robot 无关，故单独收一遍。
   ── 病根与台式一致：.hs-logo 的三层 drop-shadow 里，42px 那层大绿光
      （α .22）在深底上就是一坨雾；14px 那层 α .42 也偏重。
      手机端实测（390×844@2x，logo 轮廓外环带亮度）：
        现状 36.3 → 关掉三层 drop-shadow 35.6（在深底上 filter 的绝对贡献
        比台式小，但肉眼上"边缘发虚"的观感一致）。
   ── 处置：与台式同配方 —— 去 42px 大绿光、9px 贴身青光 α .24、
      底影加重到 10px22px/α.52、contrast/saturate 轻微增透；
      标语辉光同步收敛（原 26px/α.28 的绿光会在字周再糊一层）。
      斜向银河光带（.home-view::after）α .11 → .06：它在 logo 上方横贯，
      是手机端「上亮下暗」不均匀的来源。
   ============================================================ */
@media (max-width: 700px) {
  .hs-logo {
    filter: contrast(1.05) saturate(1.04)
            drop-shadow(0 0 9px rgba(120, 255, 205, .24))
            drop-shadow(0 10px 22px rgba(0, 0, 0, .52));
  }
  .hs-tagline {
    text-shadow:
      0 0 8px rgba(120, 255, 200, .26),
      0 0 18px rgba(80, 220, 160, .15),
      0 2px 8px rgba(0, 30, 10, .55);
  }
  .home-view::after {
    background: linear-gradient(100deg, transparent 32%,
      rgba(140, 220, 255, .028) 44%, rgba(215, 255, 235, .06) 50%,
      rgba(140, 220, 255, .028) 57%, transparent 70%);
  }
}

/* ============================================================
   ★ r457 灵感广场「作品详情」：box 顶边让开吸顶顶栏
   ── 症状（用户截图 1280×2781，微信 X5）：详情里图片顶部被压掉一截
      （猫头/耳朵看不见），而顶栏照常显示、未被遮暗。
   ── 根因：≤700px 时第 ③ 段把 .insp-modal 的 padding 改成 16px，
      box 顶边落在 y=16；而吸顶顶栏占 0~65，两者重叠 49px。
      微信 X5 里 sticky 顶栏绘制在 fixed 弹层之上 → 图片顶部被顶栏盖住；
      Chrome 里顺序相反（弹层盖住顶栏），同样错，只是表现不同。
   ── 处置：box 顶边下移到「顶栏底 + 10px」，高度等量减去，底边位置保持不变
      （仍停在底部 Tab 栏之上 27px）。--zg-topbar-h 由 mobile.js 实测写入，
      兜底 65px —— 不写死数字是因为 standalone（加到主屏幕）下安全区会把顶栏撑高。
   ── 断点取 1000px：这一档才是「顶栏 + 底部 Tab」的手机外壳（见本文件第 ① 段），
      701~1000 的窄窗口同样是吸顶顶栏，一起修掉。
   ── max-height:none 必须写：本文件第 ③ 段给所有弹层加了 max-height:92dvh
      （844 高 → 776），box 按 100dvh 算出来的高度会超出这 4px，导致弹层自己出现滚动条。
   ============================================================ */
@media (max-width: 1000px) {
  .insp-modal.insp-modal--viewer {
    align-items: flex-start;
    padding-top: calc(var(--zg-topbar-h, 65px) + 10px);
    max-height: none;
    /* ★ r462：外层弹层自己【不允许滚动】、也不吃手势（详见文件末尾 r462 段注释） */
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
  }
  .insp-modal.insp-modal--viewer .insp-modal-box.insp-viewer {
    height: calc(100dvh - var(--zg-topbar-h, 65px) - 90px - env(safe-area-inset-bottom, 0px));
    max-height: none;
  }
  /* ★ r462：媒体区锚定不动、不接手势 —— 滚动信息区时图片纹丝不动 */
  .insp-modal--viewer .insp-detail-prev { flex: none; }
  .insp-modal--viewer .insp-detail-prev > img,
  .insp-modal--viewer .insp-detail-prev > video {
    -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
  }
  /* ★ r462：唯一滚动容器 = 信息区；只许竖向滚（overflow-y:auto 会让 overflow-x 也变成 auto，
     一旦有一像素横向溢出就能左右滑 → 用户说的「四处滑动」） */
  .insp-modal--viewer .insp-detail-info {
    min-height: 0;
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   ★ r462 详情弹层：滚动锁定 + 点赞上移
   ── 症状①「这个页面可以四处滑动，非常不稳」（用户 427×830 截图）。
      实测（427×830@3）：
        #inspModal        overflow-y:auto   scrollHeight 830 = clientHeight 830 ← 无可滚内容，却声明可滚
        .insp-detail-info overflow:auto     scrollHeight 572 > clientHeight 350 ← 唯一真正该滚的
        .insp-modal-box   overflow:hidden
      外层弹层没有可滚内容，但本文件第 ③ 段给 `.dh-modal, .insp-modal`
      统一写了 `overflow-y:auto; -webkit-overflow-scrolling:touch`（那是给底部抽屉用的）。
      WebKit / 微信 X5 见到 `-webkit-overflow-scrolling:touch` 就把这一层变成「惯性滚动容器」：
      手指在图片上划一下整层跟着回弹 —— 就是那个「四处滑动、不稳」。
      → 详情弹层把 overflow 收紧成 hidden、osc 关掉，手势全部让给信息区。
      另一半「四处」来自 `.insp-detail-info` 只写 overflow-y:auto 时 overflow-x 会被计算成
      auto —— 有横向溢出就能左右滑 → 已显式 overflow-x:hidden + touch-action:pan-y。
   ── 症状②「点赞应该放到上面来，不要放在最底下」。
      原来详情里唯一的大赞钮在底栏 `.insp-dl-bar`（实测 top 806，视口只有 830）→
      手机上必须滚到信息区最底才看得见。现在把赞钉在【图片右上角】：
      图片不滚动 → 这颗心永远在视野里、随手可点。底栏那颗 ≤1000px 隐藏（桌面端原样保留），
      数据行「❤ N 获赞」保留，三处仍同源（zg:plaza-like 广播）。
   ============================================================ */

/* 浮动赞默认不显示：桌面端维持「底栏 + 数据行」原样，零改动 */
.insp-like-float { display: none; }

/* ★ r473：手机端浮动赞重做（用户截图反馈「点赞不要挡住图片 / 做个爱心就好不要边框」）
   ① 位置：从【媒体容器右上角】挪到【右下角】。
      浮动赞是钉在 .insp-detail-prev（媒体容器）上的，旧版钉 right:14px/top:14px，
      而容器在 object-fit:contain 下上下留黑边，图片实际比容器矮 →
      top:14px 那一格正落在【画面内部】，就是用户说的「挡住了图片」。
      改钉 bottom 后落点变成画面下缘；再配合下面 @media(700px) 把容器高度放开
      （高度由图片自己决定、不再固定 38vh），图片上下黑边基本消失，
      这颗心也就停在【画面右下角】的角上。
   ② 外形：去掉胶囊描边 / 底色 / 毛玻璃 / 数字，只留一颗心。
      底色一去，白色描边心压在浅色画面上会糊 —— 所以改成给按钮整体加投影
      （filter 作用于元素及其子树的渲染结果，等于给心描了一圈暗边）。
      点赞数不丢：信息区数据行「❤ N 获赞」仍在、底栏那颗也在（桌面端），
      三处同源（zg:plaza-like 广播）。
   ③ r471 为给右上角 ✕ 让位写的 right:58px 一并删掉 —— 两者已分居对角，不会再撞。 */
@media (max-width: 1000px) {
  .insp-modal--viewer .insp-detail-prev .insp-like-float {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 4px; bottom: 4px; top: auto; left: auto; z-index: 3;
    width: 44px; height: 44px; min-height: 0; max-height: 44px; flex: 0 0 auto;
    box-sizing: border-box; padding: 0; gap: 0;
    border: 0; border-radius: 0; background: none;
    color: #fff; font-size: 13px; line-height: 1;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
    -webkit-tap-highlight-color: transparent;
  }
  .insp-modal--viewer .insp-detail-prev .insp-like-float .insp-like-ico { width: 22px; height: 22px; }
  /* 纯心不要数字（获赞数看信息区数据行） */
  .insp-modal--viewer .insp-detail-prev .insp-like-float .insp-like-n { display: none; }
  /* 44px 已是标准热区，别让 ≤700px 那条通用的 .insp-like::after{inset:-8px}
     再往外扩（会盖住图片右下角一大块、点到图也触发点赞） */
  .insp-modal--viewer .insp-detail-prev .insp-like-float::after { inset: 0; border-radius: 0; }
  .insp-modal--viewer .insp-detail-prev .insp-like-float:hover,
  .insp-modal--viewer .insp-detail-prev .insp-like-float:active { background: none; border: 0; color: #fff; }
  .insp-modal--viewer .insp-detail-prev .insp-like-float:active { transform: scale(.92); }
  .insp-modal--viewer .insp-detail-prev .insp-like-float.on { color: #ff5c8a; background: none; border: 0; }
  /* 手机上底栏不再放赞（已经挪到图片上了） */
  .insp-modal--viewer .insp-dl-row .insp-like-lg { display: none; }

  /* ★ r473：「右上角的 X 也可以小一点」——全站统一的 .modal-close 是 32px（r467 定的），
     这里只对【详情弹层这颗】收成 26px、字号 12px、边距 14 → 8px（贴角但不压字）。
     26 - 2(描边) = 24 内边距盒，::after 补 -10px → 热区 44px，好点不缩水。
     与浮动赞同域（≤1000px）：手机与平板两档表现一致，避免「手机上小了、平板上还是大的」。 */
  .insp-viewer .insp-viewer-x {
    right: 8px; top: 8px;
    width: 26px; height: 26px; max-height: 26px; font-size: 12px;
  }
  .insp-viewer .insp-viewer-x::after { inset: -10px; }
}

/* ★ r473：「缩小图片的上下黑色边框」——
   媒体容器原本固定 height:38vh（inspire.css），而图片是 object-fit:contain：
   16:9 的图放在 390 宽下只有 ~219px 高，容器却有 ~342px，上下各留 60px 黑边。
   改成容器与图片都 height:auto + max-height:40vh：
   横图时容器高度 = 图片高度（上下黑边归零）、竖图由 max-height 兜底等比缩；
   图片区变矮腾出的空间自动给信息区，弹层整体也更宽松。
   只在 ≤700px 生效：701~1000 档媒体区高度/图片 contain 规则保持原样，不动。 */
@media (max-width: 700px) {
  /* min-height:min-content 是关键：inspire.css 里给媒体区写了 min-height:0（桌面 contain 布局需要），
     而这里容器高度改成 auto 后，min-height:0 会让 grid 行在弹层总高不够时把媒体区压扁 →
     图片比容器高、被 overflow:hidden 上下切掉（700×900 实测容器 319 / 图片 360，图片被裁 41px）。
     ★ 注意不能用 min-height:auto —— 媒体区是 overflow:hidden 的网格项，规范规定这种元素的
       「自动最小尺寸」直接算 0，等于没写（实测仍是 319）。必须显式写 min-content。
     不会撑破弹层：图片已被 max-height:40vh 限死，信息区至少还能拿到 60vh 之外的余量。 */
  .insp-modal--viewer .insp-detail-prev { height: auto; max-height: 40vh; min-height: min-content; }
  .insp-modal--viewer .insp-detail-prev > img,
  .insp-modal--viewer .insp-detail-prev > video {
    width: auto; height: auto; max-width: 100%; max-height: 40vh;
  }
}

/* ★ r462 续：底栏的负 margin 会把手机端信息区横向撑破
   （.insp-dl-bar 的 `margin: 4px -24px 0` 是为抵消桌面信息栏 24px 内边距写的；
    手机端信息栏内边距只有 16px 14px → 左右各多出 10px）。
   实测 360×780：info scrollWidth 328 > clientWidth 318 —— 溢出的正是 .insp-dl-bar（over 16px），
   于是信息区能左右滑一下，用户说的「四处滑动」里有一半是这个。
   只动 ≤700px：701~1000 那一档信息栏仍是 24px 内边距，正负恰好抵消，保持原样。 */
@media (max-width: 700px) {
  .insp-modal--viewer .insp-detail-info .insp-dl-bar { margin: 4px 0 0; padding: 4px 0 0; }
}

/* ★ r466 数字人形象卡：「＋ 新建数字人」与「从形象库选择」并排成一对
   现状：这两块分属 .dh-persona-row 与 .dh-avatar-row 两个容器，各自是硬宽
   （86×96 与 168×168）；窄屏时 .dh-avatar-row 里的 .dh-col（min-width:220px）放不下，
   于是被挤成「上：窄条 新建数字人 / 中：方块 从形象库选择 / 下：信息与按钮」三段错落。
   做法：把 #dhStepImg 变两列网格，用 display:contents 拆掉两个中间容器，
   让 .dh-persona-add 与 .dh-avatar-drop 成为同一行的两个网格项 → 等宽 + 等高（stretch 撑平）。
   .dh-persona-add 显式 grid-column:1：自动放置的游标紧跟其后，所以不论前面已有几张
   数字人卡（0/1/2/3…），「从形象库选择」都会落在它右边同一行，不会串行。
   .dh-col（预览信息 + 上传/清除/AI 按钮）跨两列单独占一行。
   只在 ≤560px 生效：更宽时 .dh-col 本来就与形象框同行，不需要动。 */
@media (max-width: 560px) {
  #dhStepImg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 12px; }
  #dhStepImg > .dh-card-head { grid-column: 1 / -1; margin-bottom: 0; }
  /* 两个中间容器不生成盒子 → 子元素直接参与上面这层网格 */
  .dh-persona-bar, .dh-persona-row { display: contents; }
  /* 「我的数字人」标签：注意它是 .dh-persona-bar 的子元素（不是 #dhStepImg 的直接子元素），
     要用 > 链选到，否则会被当成一个半格项、跟数字人卡挤在同一行 */
  #dhStepImg > .dh-persona-bar > .dh-field-label { grid-column: 1 / -1; margin-bottom: 0; }
  /* 已保存的数字人卡：一张占半格，两张一行 */
  #dhStepImg .dh-persona-card { width: auto; }
  /* 新建数字人 → 左列。背景/描边对齐「从形象库选择」，两块看起来才是一对 */
  #dhStepImg .dh-persona-add {
    grid-column: 1; width: auto; min-height: 0; gap: 6px;
    background: rgba(255,255,255,0.03); border-color: var(--chip-border);
  }
  #dhStepImg .dh-persona-add span { font-size: 26px; }
  #dhStepImg .dh-persona-add em { font-size: 12px; }
  /* 从形象库选择 → 右列。宽度交给网格（硬宽 168 会顶破半格）；
     高度用 clamp 跟着视口走，保证每一档宽度下两块都接近方形而不是长条 */
  #dhStepImg > .dh-avatar-row { display: contents; }
  #dhStepImg > .dh-avatar-row > .dh-avatar-drop {
    width: auto; flex: none; height: auto; min-height: clamp(148px, 34vw, 200px);
  }
  #dhStepImg > .dh-avatar-row > .dh-col { grid-column: 1 / -1; min-width: 0; }
  #dhStepImg > .dh-look-row { grid-column: 1 / -1; margin-top: 0; }
  #dhStepImg > .dh-look-pane { grid-column: 1 / -1; }
}

/* ============================================================
   ★ r468 缩略图角上的「圆形 X」全站归位：不许再是椭圆
   ── 症状（用户截图 · 图片生成）：上传的参考图右上角那个 X 是**竖椭圆**。
   ── 根因（老熟人，第四次踩）：本文件 ④ 区
        @media (max-width: 700px){ button{ min-height: 44px } }
      是给「带文字的功能按钮」留触控高度用的，却连带把所有「只放一个 ×」的
      小圆钮从「宽 18 / 高 18」撑成「宽 18 / 高 44」→ border-radius:50%
      画出来就是一个竖椭圆。桌面端（>700px）没有这条规则，所以一直正常，
      只有手机端出问题 —— 这也是它被漏到现在的原因（r452 修了 ✎ 和创作记录
      两个方钮、r458 修了 .mcl-x、r467 修了弹层关闭键，都是同一个根因的
      不同分支，这次把缩略图上的一族一次收干净）。
   ── 实测（390px，computed）改前：
         .draw-ref-del 18×44 / .xhs-thumb-del 18×44 / .xhs-brief-thumb-del 18×44
         .ps-thumb-del 18×44 / .vp-thumb-del 18×44 / .dh-goods-del 18×44
         .dh-persona-del 16×44 / .va-card-del 18×44 / .ppt-logo-del 18×44
         .wd-slot-del 22×44 / .wd-ref-del 20×44   —— 11 个全是椭圆
   ── 做法：① 一律 min-height:0 + 锁死「桌面端那套 1:1 尺寸」，视觉与桌面逐像素一致
            （零视觉损耗，不放大也不缩小）；
            ② 触控热区不外扩、改为「往容器内侧铺」的透明 ::after 补到 ~40×40。
            为什么必须往内侧铺：这些钮都压在 overflow:hidden 的缩略图上，
            伪元素一旦越过父盒边界就会被裁掉，越往外铺热区反而越小。
            所以用 top/right 负偏移把 40×40 的方块整个塞进缩略图里
            （X 本体仍落在正中央偏右上，视觉位置不变）。
            例外：容器自身可点、或父层不裁剪的（.dh-persona-card 选中 /
            .va-card / .ppt-logo / .wd-ref-del 行内钮）★不加热区★ ——
            大热区会抢走容器自己的点击，宁可只修形状。
   ============================================================ */
@media (max-width: 700px) {
  /* ① 形状归位：桌面端多大，手机端就多大（全部 1:1 正圆） */
  .draw-ref-del, .xhs-thumb-del, .xhs-brief-thumb-del, .ps-thumb-del,
  .vp-thumb-del, .dh-goods-del, .va-card-del, .ppt-logo-del {
    width: 18px; height: 18px; min-height: 0; max-height: 18px;
  }
  .dh-persona-del { width: 16px; height: 16px; min-height: 0; max-height: 16px; line-height: 14px; }
  .wd-slot-del { width: 22px; height: 22px; min-height: 0; max-height: 22px; }
  .wd-ref-del { width: 20px; height: 20px; min-height: 0; max-height: 20px; flex: 0 0 auto; }

  /* ② 热区：仅对「父层 overflow:hidden、且父层自己不可点」的缩略图补，40×40 且不越界 */
  .draw-ref-del::after, .xhs-thumb-del::after, .ps-thumb-del::after,
  .vp-thumb-del::after, .wd-slot-del::after {
    content: ''; position: absolute; top: -2px; right: -2px;
    width: 40px; height: 40px; border-radius: 50%;
  }
  /* .wd-slot-del 原本贴在 slot 的 top:6/right:6，负偏移同步是 6px，热区才不会顶出去 */
  .wd-slot-del::after { top: -6px; right: -6px; }
}

/* ============================================================
   ★ r469 手机端「历史会话」弹窗被拖着左右滑动 —— 根因是 .acc-modal 的硬 min-width
   ── 症状（用户截图 · 微信 X5，428×926）：会话列表这个弹窗**能左右随便拖**，
      并且列表上方空出一大截（拖动时内容整体被推下去）。
   ── 实测（CDP，computed）：
        390px：.modal 内容盒 clientWidth=348，而 .acc-modal 的 scrollWidth=412
               → .modal（common.css 里 overflow:auto）出现 **64px 横向滚动量**；
        430px：仍差 16px；500px 以上才归零。
      → 手机端 `.modal` 的宽度是 `100% - 背板 16×2 - 自身 padding 16×2`，
        428px 视口下只剩 364px；而 `.acc-modal` 写着 `min-width:380px`，
        **内容比容器宽 16~64px** → 这个「溢出」就是用户能左右拖的那段行程。
   ── 处置：手机端把 .acc-modal 的 min-width 归零，让它跟着 .modal 走。
      这正是本文件 ③ 区已有的同款套路（见 .modal.modal-xl / .dh-modal--lib
      / .insp-modal-box 那一条 `min-width: 0`），只是 .acc-modal 当年漏了。
      ≥444px 视口本来就不溢出，min-width 归零后宽度由内容撑满，观感不变。
   ============================================================ */
@media (max-width: 700px) {
  .acc-modal { min-width: 0; }
  /* 兜底只加在 .acc-modal 自己身上：将来若又有子元素把它撑宽，也不会变成可横向拖动的层。
     故意**不**动全局 .modal —— 那会把某些本来就靠横向滚动兜底的弹窗（表格 / 长 URL）改成裁切。 */
  .acc-modal { overflow-x: hidden; }
}