/* ════════════════════════════════════════════════════════════════════════
   bz7.css — 手机端药丸排成两排（用户当面指出）
   2026-11-05

   用户原话：「你那个功能栏，一直要往右滑才能够看到。明明可以变成两排，
              为什么要一排直接带过呢？」

   实测根因：
     · bz6.css 设了 flex-direction: row + flex-wrap: wrap，桌面（1188px）能排 1 行
     · 但手机（390~500px）药丸总宽约 700px，超屏
     · 而父容器 `.gen-mode-bar` / `.segmented` 上还有 `width: 100%` + 无 overflow 处理
       → 浏览器把内容撑出屏幕，用户必须横滑

   修法（手机 ≤860px）：
     1. 强制 flex-wrap: wrap 生效，并且每个药丸 max-width: calc(50% - 4px)
        → 两列排布，8 个药丸 = 4 行，全部可见
     2. 药丸字号缩到 13px、内边距收窄，保证中文不换行折断
     3. 容器 overflow-x: visible，不产生横滑
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* 容器：占满、可换行、不横滑 */
  html[data-ui="crisp"] #view-work .gen-mode-bar,
  html[data-ui="crisp"] .gen-mode-bar {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: block !important;
  }
  html[data-ui="crisp"] #view-work #genModeSeg,
  html[data-ui="crisp"] #genModeSeg {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* 每个药丸：两列网格（48%），两排排列 */
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button,
  html[data-ui="crisp"] #view-work #genModeSeg > button:not(.active),
  html[data-ui="crisp"] #view-work #genModeSeg > button.active {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    border-radius: 9999px !important;
    white-space: normal !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: keep-all !important;
  }
}

/* 极窄屏（<380px）：药丸字号再降一档，保证 4 字中文不折 */
@media (max-width: 380px) {
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button {
    font-size: 12px !important;
    padding: 8px 4px !important;
  }
}

/* ── 顺带：手机端水印参数区（#wmWorkBlock）确保可见、不被压 ─────────────── */
@media (max-width: 860px) {
  html[data-ui="crisp"] #wmWorkBlock {
    display: block !important;
    margin-top: 14px !important;
  }
  html[data-ui="crisp"] #wmWorkBlock label.wm-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 10px 12px !important;
    background: #f7f7f7 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }
  html[data-ui="crisp"] #wmWorkBlock input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
}