/* 开模任务「一单一帖」(10-21 第 2 期; 本体 public/mold-thread*.js; 方案 docs/MOLD-TASK-THREAD-PLAN.md §1/§4, 画板 A/B/C/D)
   全走 styles.css 的 :root 令牌; 类名前缀 mth-。末段 .mt-form/.mt-ctl/.mt-skutip/.mt-radio 是下需求表单规则, 10-21 从 mold-task.css 原样搬来(叠层表单还在用)。 */
.mth-page { --mth-h: calc(100vh - 220px); }
.mth-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mth-lead { color: var(--muted); min-width: 0; }
.mth-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mth-chip { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.mth-chip b { font-weight: 700; color: var(--muted); }
.mth-chip.is-hot { border-color: var(--primary-2); font-weight: 600; } .mth-chip.is-hot b { color: var(--primary); }
.mth-chip.is-on { background: var(--primary-50); border-color: var(--primary); color: var(--primary); }
.mth-over { color: var(--bad); font-weight: 600; }

/* 两栏 */
.mth-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; height: var(--mth-h); min-height: 480px; }
.mth-list, .mth-post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mth-search { display: flex; align-items: center; gap: 6px; margin: 10px; padding: 0 10px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.mth-search:focus-within { border-color: var(--primary-2); box-shadow: var(--ring); }
.mth-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; color: var(--ink); background: transparent; }
.mth-rows { flex: 1; min-height: 0; overflow: auto; padding: 0 6px 10px; }
.mth-grp h3 { margin: 10px 6px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mth-grp h3 small { color: var(--muted-2); font-weight: 400; }
.mth-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 8px; border: 0; border-left: 3px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mth-row:hover { background: var(--soft); }
.mth-row.is-on { background: var(--primary-50); }
.mth-row.is-me { border-left-color: var(--primary); }   /* 轮到我(waiting_me) */
.mth-thumb { position: relative; flex: 0 0 64px; height: 64px; border-radius: var(--radius); overflow: hidden; background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 11px; }   /* 10-22: 48 → 64, 没图 =「没样板」灰格 */
.mth-sn { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 8px; background: var(--mt-mask); color: var(--surface); font-size: 10px; line-height: 16px; }   /* 样板 N 角标 */
.mth-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mth-thumb i { font-style: normal; }
.mth-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mth-r1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mth-r1 b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mth-r2, .mth-r3 { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mth-row.is-me .mth-r3 { color: var(--ink); font-weight: 600; }
.mth-r3.is-over { color: var(--bad); }
.mth-unread-n { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: var(--surface); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mth-more { padding: 8px 6px; }

/* 帖子 */
.mth-phead { display: none; }
.mth-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }   /* position: 未读线 offsetTop 以它为准 */
.mth-first { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mth-f1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); font-size: 12px; }
.mth-title { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.mth-target { color: var(--warn); font-size: 12px; }
.mth-f2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; min-width: 0; } .mth-f2 .mt-params2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 10-22: 左 3/5 样板画廊, 右 2/5 参数 */
.mth-ftoggle { align-self: flex-end; border: 0; background: none; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 0; }
.mth-flow { display: flex; flex-direction: column; gap: 12px; }
.mth-none { text-align: center; padding: 12px; }
.mth-floor time { color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.mth-sysline { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: var(--muted-2); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.mth-msg, .mth-filefloor { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.mth-av { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); font-style: normal; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.mth-av.is-as { background: var(--good-soft); color: var(--good); }   /* 接单人 */
.mth-bwrap { min-width: 0; max-width: min(560px, 85%); display: flex; flex-direction: column; gap: 2px; }
.mth-who { display: flex; align-items: baseline; gap: 8px; font-size: 12px; } .mth-who b { font-weight: 600; }
.mth-bubble { padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.mth-msg.is-me .mth-bubble { background: var(--primary-50); }
.mth-bfiles, .mth-fone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; white-space: normal; }
.mth-fone > span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.mth-fcard { width: 96px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--muted); font-size: 11px; text-decoration: none; }
.mth-fcard img, .mth-fcard .mtf-ico { width: 100%; height: 72px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--soft); }
.mth-fcard small { padding: 2px 6px; }
.mth-gone { color: var(--muted-2); font-size: 12px; padding: 4px 8px; border: 1px dashed var(--line); border-radius: var(--radius); }
.mth-unread { display: flex; align-items: center; gap: 8px; color: var(--bad); font-size: 12px; }
.mth-unread::before, .mth-unread::after { content: ""; flex: 1; border-top: 1px solid var(--bad-soft); }
.mth-newpill { position: sticky; bottom: 8px; align-self: center; height: 30px; padding: 0 14px; border: 0; border-radius: 15px; background: var(--primary); color: var(--surface); font: inherit; font-size: 12px; cursor: pointer; box-shadow: var(--shadow); }

/* 输入条 */
.mth-compose { border-top: 1px solid var(--line); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.mth-compose textarea { width: 100%; box-sizing: border-box; min-height: 44px; max-height: 160px; resize: vertical; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--surface); }
.mth-compose textarea:focus { outline: 0; border-color: var(--primary-2); box-shadow: var(--ring); }
.mth-compose.is-drop textarea { border-color: var(--primary); background: var(--primary-50); }
.mth-pend { display: flex; flex-wrap: wrap; gap: 6px; } .mth-pend:empty { display: none; }
.mth-pthumb { position: relative; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mth-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mth-pthumb button { position: absolute; top: 0; right: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0 0 0 6px; background: var(--ink); color: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mth-ctools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mth-up { display: inline-flex; align-items: center; gap: 6px; } .mth-up select { font: inherit; height: 28px; }
.mth-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mth-acts:empty { display: none; }
.mth-acthint { color: var(--muted-2); font-size: 12px; }
.mth-fdlg .mt-form { border: 0; border-radius: 0; padding: 14px 18px 18px; }
.mth-fdlg .mt-form .mt-f-title { flex-basis: 100%; }

/* 手机(画板 C/D): 列表 ↔ 帖子两态, 触点 ≥44px */
@media (max-width: 768px) {
  .mth-body { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .mth-page[data-pane="list"] .mth-post { display: none; }
  .mth-page[data-pane="post"] .mth-list, .mth-page[data-pane="post"] .mth-chips, .mth-page[data-pane="post"] .mth-top { display: none; }
  .mth-page[data-pane="post"] .mth-post { height: calc(100dvh - 120px); }
  .mth-list { border: 0; background: transparent; } .mth-rows { overflow: visible; padding: 0; }
  .mth-row { min-height: 56px; }
  .mth-phead { display: flex; padding: 4px 8px; border-bottom: 1px solid var(--line); }
  .mth-back { min-height: 44px; border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; }
  .mth-scroll { padding: 10px 12px; }
  .mth-f2 { grid-template-columns: minmax(0, 1fr); }
  .mth-chip, .mth-ctools .mt-btn, .mth-acts .mt-btn { min-height: 44px; }
  .mth-acts { flex: 1 0 100%; order: 9; }   /* 主动作横排在输入条下 */
}   /* 表单标题整行不在这里写: 表单只在叠层里, .mth-fdlg .mt-form .mt-f-title 已经 100%(写在这里还会被下面搬来的同权重规则盖掉) */

/* 下需求表单(搬自 mold-task.css, 一字未改) */
.mt-ctl { height: 32px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 100%; min-width: 0; }
.mt-ctl > span { color: var(--muted); white-space: nowrap; }
.mt-ctl select, .mt-ctl input { border: 0; outline: 0; font: inherit; color: var(--ink); background: transparent; min-width: 0; }
.mt-ctl select { text-overflow: ellipsis; flex: 0 1 auto; }
.mt-ctl:focus-within { border-color: var(--primary-2); box-shadow: var(--ring); }
/* 下需求表单: 一行, 放不下自动折行 */
.mt-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.mt-form > b { color: var(--muted); }
.mt-form .mt-f-title { flex: 1 1 180px; }
.mt-form .mt-f-title input { flex: 1; }
.mt-form input[name="ss_spec"] { width: 70px; } .mt-form input[name="lines_count"] { width: 44px; } .mt-form input[name="dimensions"] { width: 84px; }
.mt-form input[name="sku"] { width: 116px; } .mt-form input[name="due"] { width: 92px; }
.mt-skutip { flex: 1 0 100%; color: var(--muted-2); font-size: 12px; }
.mt-skutip:empty { display: none; }
.mt-radio { display: inline-flex; gap: 10px; } .mt-radio label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.mth-pend.is-busy { pointer-events: none; opacity: .55; }

/* 10-22 设计任务图优先(方案 docs/DESIGN-TASK-IMG-PLAN.md §3 §4, 画板 A/B): 一楼画廊 / 看图层 / 并排 / 弹窗样板图区 / 样品库选择器(放末尾: 盖过上面搬来的 .mt-form 定宽) */
.mth-gallery { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-radius: var(--radius); } .mth-gallery.is-drop { box-shadow: var(--ring); }
.mthg-head { display: flex; align-items: center; gap: 8px; } .mthg-head small { color: var(--muted-2); }
.mthg-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; height: 260px; }
.mthg-grid.is-empty { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 96px; }
.mthg-tile { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--fill); } .mthg-tile:first-child { grid-row: 1 / 4; } .mthg-tile.is-more { display: none; }
.mthg-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .mthg-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mthg-tile > i, .mthi-t > i, .mthi-pcard > i { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--muted-2); font-style: normal; font-size: 12px; }
.mthg-cap { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 1px 7px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.mthg-cap.is-lib, .mthi-tag.is-lib { color: var(--warn); }
.mthg-plus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--mt-mask); color: var(--surface); font-size: 20px; pointer-events: none; }
.mthg-x, .mthi-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--mt-mask); color: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mthg-add, .mthi-drop { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--tint-warm); color: var(--muted); font-size: 12px; text-align: center; cursor: pointer; }
.mthg-add:hover, .mthg-add:focus, .mthi-drop:hover, .mthi-drop:focus, .mthi-drop.is-drop { outline: 0; border-color: var(--primary-2); color: var(--primary); background: var(--primary-50); }
.mthg-ov { width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.mthg-vhead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; } .mthg-vhead small, .mthg-vcap { color: var(--muted); font-size: 12px; }
.mthg-vcap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mthg-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: var(--fill); } .mthg-stage img { flex: 1; min-width: 0; max-height: 66vh; object-fit: contain; }
.mthg-nav { flex: 0 0 44px; height: 44px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; } .mthg-nav:disabled { opacity: .35; cursor: default; }
.mthg-strip { display: flex; gap: 6px; padding: 8px 14px 12px; overflow-x: auto; }
.mthg-sth { flex: 0 0 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; background: var(--fill); color: var(--muted); cursor: pointer; } .mthg-sth.is-on { border-color: var(--primary); } .mthg-sth.is-formal { box-shadow: inset 0 -3px 0 var(--good); }
.mthg-sth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mthg-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; background: var(--fill); min-height: 0; overflow: auto; }
.mthg-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .mthg-pane.is-formal { border-color: var(--primary); }
.mthg-ptop { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; } .mthg-ptop small { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mthg-ptop .mthg-nav { flex-basis: 32px; height: 32px; font-size: 18px; }
.mthg-pane img { width: 100%; height: 62vh; object-fit: contain; }
.mth-fdlg { width: min(840px, 96vw); } .mth-fdlg .mt-form { min-height: 0; overflow: auto; }
.mth-fimgs { flex: 1 0 100%; min-width: 0; }
.mthi { display: flex; flex-direction: column; gap: 8px; } .mthi-head { display: flex; align-items: center; gap: 8px; } .mthi-head b { font-size: 12px; font-weight: 500; color: var(--muted); } .mthi-head small { color: var(--muted-2); font-size: 11px; }
.mthi-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.mthi-t { position: relative; flex: 0 0 96px; height: 96px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--fill); } .mthi-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mthi-t.is-main { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-50); }
.mthi-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: var(--surface); color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mthi-drop { flex: 1 1 160px; height: 96px; }
.mth-frow { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mth-fdlg .mth-frow .mt-ctl input, .mth-fdlg .mth-frow .mt-ctl select { flex: 1; width: auto; }
.mth-fsend { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; } .mth-fsend small { color: var(--muted-2); font-size: 12px; }
.mthi-pick { width: min(720px, 96vw); } .mthi-pick .mth-search { margin: 12px 14px 0; }
.mthi-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 12px 14px 16px; overflow: auto; }
.mthi-pcard { display: flex; flex-direction: column; gap: 2px; padding: 0 0 6px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .mthi-pcard:hover { border-color: var(--primary); }
.mthi-pcard img, .mthi-pcard > i { width: 100%; height: 96px; object-fit: cover; background: var(--fill); }
.mthi-pcard b, .mthi-pcard small { padding: 0 6px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mthi-pcard small { color: var(--muted); }
/* 10-22 客户字段: 弹窗「客户」行(mold-thread-form.js) + 选客户层 #mthCustOv(mold-thread-cust.js) */
.mth-fdlg .mt-form .mt-f-cust { flex-basis: 100%; } .mt-f-cust input[readonly] { flex: 1; cursor: pointer; } .mt-f-cust .mt-lnkbtn { flex: 0 0 auto; } .mt-f-cust .mt-x { padding: 2px; }
.mthc-dlg { width: min(460px, 96vw); } .mthc-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; padding: 0 10px 10px; }
.mthc-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mthc-row:hover, .mthc-row:focus-visible { background: var(--primary-50); } .mthc-row b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mthc-row small { color: var(--muted); font-variant-numeric: tabular-nums; } .mthc-row.is-new { color: var(--primary); }
@media (max-width: 768px) {   /* 手机(画板 C): 必须写在上面这些桌面规则之后, 同权重后写的赢 —— 放进前面那段 768 里会被盖掉 */
  .mthg-grid { display: flex; height: auto; overflow-x: auto; overscroll-behavior-x: contain; }   /* 画板 C: 样板横滑条 */
  .mthg-tile, .mthg-tile.is-more { display: block; flex: 0 0 150px; height: 150px; } .mthg-tile:first-child { flex-basis: 240px; } .mthg-plus { display: none; }
  .mthg-add { flex: 0 0 120px; height: 150px; } .mthg-grid.is-empty .mthg-add { flex: 1 1 auto; height: 96px; }
  .mthg-cmp { grid-template-columns: minmax(0, 1fr); } .mthg-pane img { height: 30vh; }   /* 并排在手机上变上下两格 */
  .mth-frow { grid-template-columns: minmax(0, 1fr); }
}