/* AI 选料工作台 (alpha28). Full-width drawer; parameter table + review with photo candidate cards.
   Uses app.css tokens only; 12px minimum; light and dark. */
.modal-backdrop.as-drawer.review-dialog > .modal { width: min(1440px, 100%); }
.review-dialog .modal-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

.rv-head { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--panel); }
.rv-title { display: flex; flex-direction: column; min-width: 160px; }
.rv-title b { font-size: var(--fs-md); }
.rv-title span { font-size: var(--fs-xs); color: var(--muted); }
.rv-tabs button { height: 34px; padding: 0 14px; }
.rv-tabs button b { min-width: 18px; color: var(--warn); }
.rv-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.rv-ai-panel { width: 340px; gap: 10px; padding: 12px; }
.rv-ai-panel .btn { justify-content: center; }
.rv-ai-panel p { margin: 0; line-height: 1.5; }
#rv-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.rv-meter { flex: 0 0 180px; height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; display: flex; }
.rv-meter i { display: block; height: 100%; }
.rv-meter i.bound { background: var(--accent); }
.rv-meter i.deferred { background: var(--border-strong); }
.rv-gen { color: var(--info); font-weight: 600; }
.review-dialog #review-message { margin: 10px 18px 0; }
.review-dialog #review-message.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
#rv-body { flex: 1; min-height: 0; overflow: auto; }
.rv-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- parameter table ---------- */
.pt-bar, .pt-fill { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 18px 0; }
.pt-fill { padding-top: 8px; }
.pt-fill .select { width: auto; }
.pt-intro { margin: 8px 18px 0; max-width: 980px; line-height: 1.6; }
.pt-wrap { margin: 12px 18px 90px; border: 1px solid var(--border); border-radius: var(--r); }
.pt-table { min-width: 1180px; }
.pt-table th { position: sticky; top: 0; z-index: 2; background: var(--panel2); white-space: nowrap; }
.pt-table td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.pt-table tr.is-dirty td { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); }
.pt-spec { min-width: 230px; }
.pt-spec b { margin: 0 4px; }
.pt-spec small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-xs); }
.pt-cell { min-width: 92px; }
.pt-input { width: 100%; min-width: 72px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.pt-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.pt-cell.need .pt-input { border-color: var(--warn); background: var(--warn-bg); }
.pt-cell.need .pt-input::placeholder { color: var(--warn); }
.pt-cell.aside .pt-input { background: var(--panel2); }
.pt-cell.dirty .pt-input { border-color: var(--accent); background: var(--panel); }
.pt-hint { display: block; margin-top: 4px; padding: 1px 6px; border: 1px dashed var(--border-strong); border-radius: 6px; background: transparent; color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; }
.pt-hint:hover { border-color: var(--accent); color: var(--accent); }
.pt-state { white-space: nowrap; }
.pt-state .chip { display: inline-flex; margin-bottom: 4px; }
.pt-save { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); }
.pt-save .small { color: color-mix(in srgb, var(--bg) 72%, transparent); margin-right: auto; }
.pt-save .btn.quiet { color: var(--bg); }
.cat-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-right: 4px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; background: var(--sunken); color: var(--text-2); vertical-align: middle; }
.cat-chip.resistor { background: var(--copper-bg); color: var(--copper); }
.cat-chip.capacitor { background: var(--info-bg); color: var(--info); }
.cat-chip.inductor, .cat-chip.bead { background: var(--accent-bg); color: var(--accent); }

/* ---------- review: queue + main ---------- */
.rv-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; min-height: 0; }
.rv-queue { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--panel2); }
.rv-queue-tools { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.rv-filter { width: 100%; }
.rv-filter button { flex: 1; padding: 0 6px; }
.rv-groups { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.rv-group-line { display: flex; align-items: flex-start; gap: 6px; }
.rv-group-line > input { margin-top: 14px; }
.rv-group { display: block; width: 100%; padding: 9px 10px; margin-bottom: 4px; text-align: left; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--text); cursor: pointer; }
.rv-group:hover { background: var(--hover); }
.rv-group.active { background: var(--panel); border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.rv-group-top { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.rv-group b { display: block; font-size: var(--fs-sm); }
.rv-group small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-group-foot { color: var(--text-2) !important; }
.rv-group .dot.warn { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.rv-state { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.rv-state.applied { color: var(--good); }
.rv-state.deferred { color: var(--muted); }
.rv-state.stale { color: var(--bad); }
.rv-keys { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border); }
.rv-restore { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-main { min-width: 0; min-height: 0; overflow: auto; padding: 16px 20px 40px; }
.rv-done { max-width: 520px; margin: 60px auto; text-align: center; }
.rv-spec { display: flex; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.rv-spec-title { flex: 1; min-width: 260px; }
.rv-eyebrow { font-size: var(--fs-xs); color: var(--muted); }
.rv-spec h3 { margin: 4px 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-spec p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.rv-spec small { color: var(--muted); font-size: var(--fs-xs); }
.rv-spec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-merged { margin-top: 10px; font-size: var(--fs-sm); }

/* parameter strip: the first thing to settle for each group */
.rv-params { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel2); }
.rv-params.incomplete { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn-bg) 55%, var(--panel)); }
.rv-params-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rv-params-head .link-btn { margin-left: auto; }
.rv-param-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-param { display: flex; flex-direction: column; gap: 3px; width: 128px; font-size: var(--fs-xs); color: var(--text-2); }
.rv-param .input { height: 34px; }
.rv-param.need .input { border-color: var(--warn); background: var(--panel); }
.rv-param.need span { color: var(--warn); font-weight: 600; }
.rv-param .pt-hint { margin-top: 2px; }
.rv-params-save { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.rv-params-save .small { color: var(--text-2); margin-right: auto; }

/* candidate cards: photo, parameter checks, stock and price next to one button */
.rv-cands { display: grid; gap: 10px; }
.rv-empty { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.cand { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.cand:hover { border-color: var(--border-strong); }
.cand.open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.cand.risk { border-left: 3px solid var(--warn); }
.cand-photo { position: relative; width: 96px; height: 96px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--sunken); overflow: hidden; cursor: zoom-in; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-xs); }
.cand-photo:disabled { cursor: default; }
.cand-photo img { width: 100%; height: 100%; object-fit: cover; }
.cand-photo em { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; font-style: normal; font-size: var(--fs-xs); }
.cand-photo small { position: absolute; left: 0; right: 0; top: 0; padding: 1px 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-xs); }
/* alpha36 D-3: no photo → package pictogram (MSHost.materialThumb, marked 示意), clickable to open the material stacked. */
.cand-thumb { width: 96px; height: 96px; display: grid; place-items: center; }
/* !important beats the inline 96 px size MSHost.materialThumb writes, so the tile follows .cand-thumb (72 px on phones). */
.cand-thumb > .mthumb { width: 100% !important; height: 100% !important; }
.cand-body { min-width: 0; }
.cand-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cand-open { margin-left: auto; font-size: var(--fs-sm); white-space: nowrap; }
.cand-title b { font-size: var(--fs); }
.cand-model { display: block; margin: 2px 0 6px; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.cand-checks { display: flex; gap: 5px; flex-wrap: wrap; }
.chk { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font-size: var(--fs-xs); background: var(--sunken); color: var(--text-2); }
.chk i { font-style: normal; font-weight: 700; }
.chk.match { background: var(--good-bg); color: var(--good); }
.chk.mismatch { background: var(--bad-bg); color: var(--bad); }
.chk.unknown { background: var(--warn-bg); color: var(--warn); }
.cand-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.cand-act { align-self: center; }
.cand-confirm { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.cand-confirm[hidden] { display: none; }
.cand-confirm details { font-size: var(--fs-sm); color: var(--text-2); }
.cand-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cand-form label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.cand-form label .input { width: 76px; }
.cand-form .grow { flex: 1; min-width: 160px; }
.rv-cand-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rv-cand-foot .small { margin-right: auto; }

/* tool panel (manual pick / new material) sits between the strip and the candidates */
.rv-tool { margin: 0 0 14px; border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.rv-tool-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--accent-bg); }
.rv-tool-body { padding: 12px 14px; display: grid; gap: 10px; }
.rv-manual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rv-manual { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; text-align: left; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); color: var(--text); cursor: pointer; }
.rv-manual:hover { border-color: var(--accent); }
.rv-manual img, .rv-manual .ph { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--sunken); display: grid; place-items: center; color: var(--muted); font-size: var(--fs-xs); }
.rv-manual .ph-pkg { border: 1px dashed var(--border-strong); background: var(--panel); color: var(--text-2); }
.rv-manual b, .rv-manual small { display: block; overflow-wrap: anywhere; }
.rv-manual small { color: var(--muted); font-size: var(--fs-xs); }
.rv-intake { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#review-draft-preview { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
#review-draft-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }

@media (max-width: 860px) {
  .rv-layout { grid-template-columns: minmax(0, 1fr); }
  .rv-queue { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--border); }
  .rv-tools { margin-left: 0; }
  .rv-ai-panel { width: min(340px, calc(100vw - 32px)); right: auto; left: 0; }
  .rv-head { padding: 10px 12px; }
  .cand { grid-template-columns: 72px minmax(0, 1fr); }
  .cand-photo, .cand-thumb { width: 72px; height: 72px; }
  .cand-act { grid-column: 1 / -1; }
  .cand-act .btn { width: 100%; }
  .rv-param { width: calc(50% - 5px); }
  .pt-wrap { margin-left: 10px; margin-right: 10px; }
}