/* ════════════════════════════════════════════════════════════════════════
   bz4.css — 药丸按内容宽度排列（2026-11-05）

   截图实测：8 个药丸每个宽度 464px（占满整行），变成 8 条横杠。
   根因：`.segmented` 是 flex + flex-wrap，但子元素被 stretch 拉满；
        且 v10.css 里有 width:100% / flex:1 之类的规则在起作用。
   修法：flex: 0 0 auto（按内容宽）+ 合理的 space-between/start。
   ════════════════════════════════════════════════════════════════════════ */

html[data-ui="crisp"] #view-work #genModeSeg,
html[data-ui="crisp"] #genModeSeg {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

html[data-ui="crisp"] #view-work #genModeSeg > button,
html[data-ui="crisp"] #genModeSeg > button,
html[data-ui="crisp"] #genModeSeg button:not(.active),
html[data-ui="crisp"] #genModeSeg button.active {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 手机上允许换行（否则长文案会被裁），但仍按内容宽 */
@media (max-width: 860px) {
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button {
    white-space: normal !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    min-height: 30px !important;
    line-height: 1.4 !important;
    max-width: calc(50% - 4px) !important;
  }
}