/* 手机上公式不撑破卡片（配合 static/js/math-fit.js，2026-10-13）
 * 卡片、讲解区宽度不超过屏幕、文字自动换行；公式放不下由 math-fit.js 折行 / 缩小，
 * 极端长的只让这一行公式（或这一个行内公式）自己横向滑动。 */
.ct-card, .ct-gcard, .ct-solve, .ct-solve-body, .ct-stem, .ct-q, .ct-step, .ct-step-explain, .ct-step-hint,
.message-card, .markdown-content, .md-math-block, .mf-box {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* 卡片里的字一律能折行（长网址、一长串字母、模型没写好的公式原文也不撑出去）；overflow-wrap 会继承到里面 */
.ct-card, .ct-gcard, .ct-solve, .ct-solve-body, .ct-stem, .ct-step, .ct-step-explain, .ct-step-hint, .cheer,
.message-card, .markdown-content, .card, .md-body {
  word-wrap: break-word;
  overflow-wrap: break-word;   /* iOS 15.4 以前的微信只认这个 */
  overflow-wrap: anywhere;
  word-break: normal;
}
/* 公式自己不参与断字 */
.katex, .katex * { overflow-wrap: normal; word-break: normal; }

/* 块级公式的外框：滑动只发生在这一行里（不带着卡片动）。math-fit.js 折行 / 缩小以后放得下，就不会出现滑动；
 * 只有「缩到 0.6 倍还放不下」的极端长公式才真的需要滑（那一行会加 .mf-scroll）。脚本没跑起来时也只是这一行能滑，不会被切掉。 */
.md-math-block, .mf-box, .katex-display-wrapper {
  display: block;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.md-math-block .katex-display, .mf-box .katex-display { margin: 0.4em 0; }

/* 行内公式里一整对括号（math-fit.js 包的）：中间不断行 */
.katex .mf-nobr { white-space: nowrap; }

.mf-hint { font-size: 12px; line-height: 1.4; opacity: 0.55; margin: -0.2em 0 0.4em; text-align: center; }

/* 行内公式：平时跟着文字走（原先是 inline-block 小滚动框，长一点的公式就独占一整行，后面的「，」「。」被挤到下一行），
 * KaTeX 自己会在等号、加减号后面换行；只有最长的一段缩到 0.7 倍还放不下的那一个，才变成自己能滑的小框（.mf-scroll-inline） */
.katex-inline-wrapper, .md-math-inline {
  display: inline !important;
  overflow: visible !important;
  vertical-align: baseline !important;
  max-width: none;
}
.katex-inline-wrapper.mf-scroll-inline, .md-math-inline.mf-scroll-inline, .katex.mf-scroll-inline {
  display: inline-block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  vertical-align: middle !important;
}

/* 拍题页顶栏：320 宽的小屏上按钮挤不下，整页被撑宽 41px，要左右划（10/13 验收时查出）。
 * 放在这里而不是 style.css：style.css 没带版本号，微信会一直用缓存的旧样式。 */
@media screen and (max-width: 374px) {
  .header-bar { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .brand-title { font-size: 13px; gap: 3px; flex-shrink: 1; min-width: 0; overflow: hidden; }
  .brand-title > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .user-badge { gap: 3px; }
  .limit-pill { padding: 1px 4px; font-size: 10px; }
  .btn-ghost { padding: 3px 3px; }
  .btn-more-label { display: none; }
}