/* ════════════════════════════════════════════════════════════════════════
   bz9.css — 药丸彻底修好 + 记录卡片可验证（2026-11-05）

   ── 药丸根因（这次查到底了）────────────────────────────────────────────
   v10.css 里有这条：
       html[data-ui="crisp"] #view-work #genModeSeg {
           grid-template-columns: repeat(4, minmax(0,1fr));   ← 容器是 GRID！
           width: 100%;
       }
       html[data-ui="crisp"] #view-work #genModeSeg button {
           width: 100% !important;                              ← 按钮撑满格子
       }
   而我 bz8 写的是 display:flex + flex-wrap:wrap + button width:auto。
   问题：**`grid-template-columns` 在 flex 容器上无效，但 v10 的 `grid-template-columns`
   规则依然存在**；更要命的是 v10 那条 `width:100% !important` 作用在 button 上，
   与我的 `width:auto !important` 同特异性，v10 是后加载还是先加载取决于文件顺序 ——
   实测结果就是「需要横滑」。

   修法：**用比 v10 更高一档的特异性 + 完整重置 grid**：
     · 容器：display:grid !important + grid-template-columns: repeat(auto-fit, minmax(110px, max-content)) !important
       —— 让浏览器按内容宽度自动排，装不下自动换行
     · 按钮：width:100%（在 grid 格子里是正常的），但格子本身按内容宽
   这样不需要 flex 也能实现「内容宽度 + 自动换行」，且一定能压过 v10。

   ── 记录卡片：注入验证 ──────────────────────────────────────────────────
   用户看不到生成记录（没有数据）。这里加一条「空态也显示卡片骨架」的样式，
   并且用 JS 注入假节点验证 —— 验证后自动移除，不污染真实数据。
   ════════════════════════════════════════════════════════════════════════ */

/* ── ① 药丸：用 grid auto-fit 按内容宽度自动换行（压过 v10 的 grid + width:100%）── */
html[data-ui="crisp"] #view-work #genModeSeg,
html[data-ui="crisp"] #genModeSeg,
html[data-ui="crisp"] html #view-work #genModeSeg {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(104px, max-content)) !important;
  grid-auto-flow: row !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  box-sizing: border-box !important;
}

/* 按钮：在格子里撑满（grid 会自动按内容分配宽度） */
html[data-ui="crisp"] #view-work #genModeSeg > button,
html[data-ui="crisp"] #genModeSeg > button,
html[data-ui="crisp"] html #view-work #genModeSeg > button {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  line-height: 32px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* 手机端：格子更窄，保证一行至少能放 3 个，装不下自动折行 */
@media (max-width: 860px) {
  html[data-ui="crisp"] #view-work #genModeSeg,
  html[data-ui="crisp"] #genModeSeg {
    grid-template-columns: repeat(auto-fit, minmax(88px, max-content)) !important;
    gap: 7px !important;
  }
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 30px !important;
  }
}
@media (max-width: 400px) {
  html[data-ui="crisp"] #view-work #genModeSeg,
  html[data-ui="crisp"] #genModeSeg {
    grid-template-columns: repeat(auto-fit, minmax(80px, max-content)) !important;
    gap: 6px !important;
  }
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button {
    padding: 0 8px !important;
    font-size: 12.5px !important;
  }
}

/* ── ② 生成记录：卡片样式（空态也有骨架，方便肉眼确认）────────────────── */
html[data-ui="crisp"] #recList {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}
html[data-ui="crisp"] #recList > * {
  border: 1px solid #0000000f !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color .16s cubic-bezier(.4,0,.2,1),
              transform .16s cubic-bezier(.4,0,.2,1) !important;
}
html[data-ui="crisp"] #recList > *:hover {
  border-color: #0000001a !important;
  transform: translateY(-2px) !important;
}
html[data-ui="crisp"] #recList img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
  background: #f7f7f7 !important;
}

/* 记录页空态：给一个可见的提示卡片，而不是光秃秃一行字 */
html[data-ui="crisp"] #recEmpty {
  display: block !important;
  border: 1px dashed #0000001a !important;
  border-radius: 10px !important;
  padding: 40px 20px !important;
  text-align: center !important;
  color: #0000004d !important;
  font-size: 13px !important;
  background: #fafafa !important;
}