/**
 * 「产品知识 · 右侧款式卡片」样式（客户版阶段 1-3）。
 *
 * 类名与几何值逐条来自 5177：
 *   - `src/styles/quote-library-product-list.css`（下称 5177-CSS-PL，行号即该文件行号）：
 *     工具栏 3612-3735、排序模式 3737-3916、款式卡片 3917-4145、
 *     卡头与入口 4000-4275、卡体 4269-4295、上传块 9882-9955、排序开关与拖动把手 8908-9030、
 *     素材墙 9187-9260；
 *   - `src/styles/09-quote-library-2.css`（下称 5177-CSS-QL，行号即该文件行号）：
 *     素材工作台 3-16、素材框 283-411、框头按钮 412-442、改名编辑器 445-470、素材框体 472-490、
 *     文件项 511-530、多选 610-645、删除素材框对话框 663-712；
 *   - `src/styles/customers.css:142-148`（`.customer-related-inquiry-empty` 空态）。
 *
 * **颜色一律用客户版设计令牌 var(--wb-*)**（取 tokens.css；本文件不写死色值，
 * 与 `npm run check:design` 的口径一致）。命名一律沿用 5177 的原类名，
 * 后续搬过来的 5177 代码（素材框、排序、上传）能直接命中。
 *
 * 接线（阶段 1-3，本轮只允许建四个文件，index.html 不动）：把本文件挂进页面时加一行
 * `<link rel="stylesheet" href="styles/product-knowledge-cards.css">`（放在 app.css 之后）。
 * 「新增款式」对话框复用 taxonomy-tree.css 里已有的 `.product-structure-create-*`
 * 外壳（同一套对话框形态，不在这里重复定义）。
 */

/* ============================================================
 * 1. 工作台与类目头（5177-CSS-PL:3612-3735）
 * ============================================================ */

.product-knowledge-variant-workbench,
.product-knowledge-variant-card-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.product-knowledge-variant-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-panel-bg);
  padding: 10px 12px;
  box-shadow: var(--wb-shadow-soft);
}

.product-knowledge-variant-category-title {
  display: grid;
  flex: 0 1 auto;
  gap: 2px;
  min-width: 180px;
  margin-right: var(--wb-space-1);
  color: var(--wb-text-primary);
}

.product-knowledge-variant-category-title span {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
}

.product-knowledge-variant-category-title strong {
  overflow: hidden;
  max-width: min(36vw, 520px);
  font-size: var(--wb-fs-22);
  font-weight: var(--wb-fw-900);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-knowledge-variant-add {
  min-height: 42px;
  border: 1px solid var(--wb-accent);
  border-radius: var(--wb-radius-button);
  background: var(--wb-accent);
  padding: 8px 18px;
  color: var(--wb-btn-primary-ink);
  font: inherit;
  font-size: var(--wb-fs-16);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.product-knowledge-variant-add:hover,
.product-knowledge-variant-add:focus-visible {
  border-color: var(--wb-accent-strong);
  background: var(--wb-accent-strong);
  outline: 2px solid var(--wb-accent-soft);
}

.product-knowledge-variant-add:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.product-knowledge-variant-sort,
.product-knowledge-variant-sort-action {
  min-height: 42px;
  margin-left: var(--wb-space-3);
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg-soft);
  padding: 8px 14px;
  color: var(--wb-accent-ink);
  font: inherit;
  font-weight: var(--wb-fw-850);
  cursor: pointer;
}

.product-knowledge-variant-sort.is-active,
.product-knowledge-variant-sort:disabled {
  cursor: default;
}

.product-knowledge-variant-sort-action {
  background: var(--wb-panel-bg);
}

.product-knowledge-variant-sort-action:disabled {
  cursor: default;
  opacity: .66;
}

/* 面板自己的状态行（5177 的状态在外部状态条上，不会随重渲染丢；客户版放面板里） */
.product-knowledge-variant-status {
  margin: 0;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
}

.product-knowledge-variant-status:empty {
  display: none;
}

/* ============================================================
 * 2. 排序模式（5177-CSS-PL:3737-3916）
 * ============================================================ */

.product-knowledge-title-sort-mode {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-panel-bg-soft);
  padding: 12px;
}

.product-knowledge-title-sort-head,
.product-knowledge-title-sort-row,
.product-knowledge-title-sort-actions {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
}

.product-knowledge-title-sort-head {
  flex-wrap: wrap;
}

.product-knowledge-title-sort-head span {
  flex: 1 1 auto;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
}

.product-knowledge-title-sort-head button,
.product-knowledge-title-sort-actions button {
  min-height: 34px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  padding: 5px 12px;
  color: var(--wb-accent-ink);
  font: inherit;
  font-weight: var(--wb-fw-800);
}

.product-knowledge-title-sort-list {
  display: grid;
  gap: 6px;
}

.product-knowledge-title-sort-row {
  justify-content: space-between;
  min-height: 46px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: 6px 10px 6px 14px;
}

/* 合辑：固定公共素材区，不参与拖动（5177:15656） */
.product-knowledge-title-sort-row.is-fixed {
  background: var(--wb-fill-soft);
  color: var(--wb-text-secondary);
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row] {
  position: relative;
  justify-content: flex-start;
}

.product-knowledge-style-sort-handle {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  place-items: center;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg-soft);
  color: var(--wb-accent-ink);
  font-size: var(--wb-fs-17);
  font-weight: var(--wb-fw-900);
  letter-spacing: -3px;
  cursor: grab;
  user-select: none;
}

.product-knowledge-style-sort-handle:active {
  cursor: grabbing;
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row] > strong {
  flex: 1 1 auto;
  min-width: 0;
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row]:hover,
[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row]:focus-within {
  border-color: var(--wb-accent-ink);
  background: var(--wb-accent-ink);
  color: var(--wb-btn-primary-ink);
  box-shadow: var(--wb-shadow-control);
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row].dragging {
  opacity: .46;
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row].drag-over-before::before,
[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row].drag-over-after::after {
  position: absolute;
  right: 4px;
  left: 4px;
  height: 4px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-accent);
  content: '';
  pointer-events: none;
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row].drag-over-before::before {
  top: -5px;
}

[data-product-knowledge-style-sort-mode] .product-knowledge-title-sort-row[data-product-knowledge-style-sort-row].drag-over-after::after {
  bottom: -5px;
}

.product-knowledge-title-sort-empty {
  padding: 16px;
  color: var(--wb-text-secondary);
  text-align: center;
}

.product-knowledge-title-sort-error {
  margin: 0;
  color: var(--wb-danger);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
}

/* ============================================================
 * 3. 款式卡片与卡头（5177-CSS-PL:3917-4275）
 * ============================================================ */

.product-knowledge-variant-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  min-width: 0;
  border: 2px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-panel-bg);
  box-shadow: var(--wb-shadow-soft);
  overflow: visible;
}

.product-knowledge-variant-card.is-compact {
  grid-template-rows: auto;
  box-shadow: var(--wb-shadow-control);
}

.product-knowledge-variant-card.is-compact .product-knowledge-variant-card-head {
  border-bottom: 0;
}

.product-knowledge-variant-card-head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  min-width: 0;
  border-bottom: 2px solid var(--wb-border-strong);
  background: var(--wb-surface-muted);
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.product-knowledge-variant-card--collection {
  border-color: var(--wb-accent);
}

.product-knowledge-variant-card--collection .product-knowledge-variant-card-head {
  background: var(--wb-accent-soft);
}

/* ---- 卡头封面位（5177-CSS-PL:4129-4191）：40×40 方形按钮 + 右下角折叠箭头 ---- */

.product-knowledge-variant-card-head > .product-knowledge-variant-cover-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  overflow: hidden;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: 0;
  cursor: pointer;
}

.product-knowledge-variant-cover-toggle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--wb-panel-bg);
}

.product-knowledge-variant-cover-placeholder {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
}

.product-knowledge-variant-cover-chevron {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-accent-strong);
  color: var(--wb-btn-primary-ink);
  font-size: 9px;
  line-height: 1;
}

.product-knowledge-variant-name-field {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-3);
  flex: 0 1 auto;
  min-width: 220px;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
}

.product-knowledge-variant-card .product-knowledge-variant-name {
  width: clamp(180px, 20vw, 320px);
  min-height: 38px;
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-input-bg);
  padding: 6px 10px;
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-20);
  font-weight: var(--wb-fw-900);
}

.product-knowledge-variant-name[readonly] {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.product-knowledge-variant-card--collection .product-knowledge-variant-name[readonly] {
  cursor: default;
  background: var(--wb-fill-soft);
}

.product-knowledge-variant-name.editing,
.product-knowledge-variant-name:focus {
  border-color: var(--wb-input-focus-border);
  outline: 2px solid var(--wb-accent-soft);
}

.product-knowledge-variant-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--wb-space-3);
  min-width: 0;
}

.product-knowledge-variant-action {
  position: relative;
  min-height: 38px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: 7px 14px;
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-15);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.product-knowledge-variant-action:hover,
.product-knowledge-variant-action:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.product-knowledge-variant-action.active {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}

.product-knowledge-variant-row-commands {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.product-knowledge-variant-row-commands button {
  min-height: 34px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg-soft);
  padding: 0 10px;
  color: var(--wb-text-secondary);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
  white-space: nowrap;
  cursor: pointer;
}

.product-knowledge-variant-row-commands button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.product-knowledge-variant-row-commands .product-knowledge-variant-move {
  border-color: var(--wb-border-strong);
  background: var(--wb-panel-bg-soft);
  color: var(--wb-accent-ink);
}

.product-knowledge-variant-row-commands .product-knowledge-variant-move:hover,
.product-knowledge-variant-row-commands .product-knowledge-variant-move:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.product-knowledge-variant-row-commands .product-knowledge-variant-delete {
  border-color: var(--wb-btn-danger-border);
  background: var(--wb-toast-error-bg);
  color: var(--wb-danger);
}

.product-knowledge-variant-row-commands .product-knowledge-variant-delete:hover,
.product-knowledge-variant-row-commands .product-knowledge-variant-delete:focus-visible {
  border-color: var(--wb-danger);
  background: var(--wb-btn-danger-hover-bg);
  color: var(--wb-danger);
}

.product-knowledge-variant-card-body {
  min-width: 0;
  padding: 14px;
}

.product-knowledge-variant-card--trial .product-knowledge-variant-card-body {
  padding: 0;
}

/* ============================================================
 * 4. 卡体内联素材框外壳（5177-CSS-QL:3-16 / 283-490）
 * ============================================================ */

.product-knowledge-variant-card--trial .followup-material-workbench {
  gap: 0;
  border: 0;
  border-radius: 0 0 var(--wb-radius-panel) var(--wb-radius-panel);
  background: var(--wb-panel-bg);
  padding: 0;
}

.followup-material-workbench--variant-card {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
}

.followup-material-boxes {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.product-knowledge-variant-card--trial .followup-material-boxes {
  gap: 0;
}

.product-knowledge-variant-card--trial .followup-material-box {
  border-width: 0 0 1px;
  border-radius: 0;
}

.product-knowledge-variant-card--trial .followup-material-box:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--wb-radius-panel) var(--wb-radius-panel);
}

.followup-material-box {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 120px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  overflow: hidden;
}

.followup-material-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-panel-bg-soft);
  padding: 0 10px;
}

.followup-material-box-title-group {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-3);
  flex: 1 1 auto;
  min-width: 0;
}

.followup-material-total {
  flex: 0 0 auto;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-pill-bg);
  color: var(--wb-pill-ink);
  padding: 2px 8px;
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
  line-height: 1.5;
  white-space: nowrap;
}

.followup-material-box-title {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-3);
  align-self: stretch;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--wb-text-primary);
  padding: 0;
  font: inherit;
  font-weight: var(--wb-fw-900);
  text-align: left;
}

.followup-material-box-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.followup-material-status-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-text-disabled);
}

.followup-material-box.is-ready .followup-material-status-dot {
  background: var(--wb-success);
}

.followup-material-box-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.followup-material-empty-panel {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
}

.followup-material-empty-panel--variant-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-bottom: 1px solid var(--wb-border);
  padding: 7px 10px;
}

.followup-material-empty-hint {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
}

/* ============================================================
 * 5. 未分组文件 / 素材墙（5177-CSS-PL:12678-12815 + 5177-CSS-QL:511-530）
 *    阶段 1-3：文件卡与图片卡统一进 `.followup-material-wall`，多选/排序/删除
 *    的控件都在这里定义（几何照 5177-CSS-PL:9187-9260 与 5177-CSS-QL:610-645）。
 * ============================================================ */

.quote-area-customer-file-list,
.followup-material-file-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: var(--wb-space-3);
  min-width: 0;
}

.quote-area-customer-file-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wb-space-3);
  width: min(100%, 280px);
  margin: 0;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg-soft);
  padding: 6px 10px;
}

.quote-area-customer-file-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.quote-area-customer-file-info strong {
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-900);
  overflow-wrap: anywhere;
}

.quote-area-customer-file-info span {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-11);
}

/* ============================================================
 * 5b. 素材框内部（阶段 1-3）
 *     框头按钮 5177-CSS-QL:412-442、改名编辑器 445-470、多选 610-645、
 *     删除素材框对话框 663-712；排序开关/拖动把手 5177-CSS-PL:8908-9030；
 *     素材墙与图片卡 5177-CSS-PL:9187-9260；上传块 5177-CSS-PL:9882-9955。
 * ============================================================ */

/* ---- 名称行控件组（2026-10-13 照 5177-CSS-PL:4213-4221：排序/大小靠右贴在产品名称那一行） ---- */

.product-knowledge-variant-head-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  gap: var(--wb-space-3);
}

.product-knowledge-variant-head-controls .quote-media-sort-size-control {
  flex-wrap: nowrap;
}

.quote-media-sort-size-control {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-3);
  flex: 0 0 auto;
}

.quote-media-sort-toggle {
  min-height: 34px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 6px 12px;
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.quote-media-sort-toggle.active {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}

.quote-media-sort-toggle:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.quote-media-size-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-3);
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  white-space: nowrap;
}

.quote-media-size-inline input {
  width: 116px;
}

/* ---- 框头右侧按钮组（5177-CSS-QL:412-442） ---- */

.followup-material-box-head {
  flex-wrap: wrap;
}

.followup-material-box-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.followup-material-box-actions button {
  min-height: 26px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 0 8px;
  font: inherit;
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.followup-material-box-actions button:hover,
.followup-material-box-actions button:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.followup-material-box-actions button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.followup-material-box-actions .followup-material-box-delete {
  border-color: var(--wb-btn-danger-border);
  background: var(--wb-toast-error-bg);
  color: var(--wb-danger);
}

.followup-material-box-actions .followup-material-box-delete:hover,
.followup-material-box-actions .followup-material-box-delete:focus-visible {
  border-color: var(--wb-danger);
  background: var(--wb-btn-danger-hover-bg);
  color: var(--wb-danger);
}

/* ---- 分组改名 ✎ / 内联编辑器（5177-CSS-QL:380-392 / 445-470） ---- */

.followup-material-box-rename {
  flex: 0 0 auto;
  width: 26px;
  min-height: 26px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 0;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
  line-height: 1;
  cursor: pointer;
}

.followup-material-box-rename:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.followup-material-box-name-editor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.followup-material-box-name-input {
  box-sizing: border-box;
  width: min(260px, 42vw);
  min-width: 120px;
  height: 30px;
  border: 1px solid var(--wb-input-focus-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-input-bg);
  color: var(--wb-text-primary);
  padding: 3px 7px;
  font: inherit;
  font-weight: var(--wb-fw-850);
}

.followup-material-box-name-editor button {
  width: 26px;
  min-height: 26px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 0;
  font: inherit;
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.followup-material-box-name-editor button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ---- 添加跟进素材标签（2026-10-13 照 5177:19571-19586；就地小编辑器，不弹原生框） ---- */

.followup-material-add {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.followup-material-add-button {
  min-height: 38px;
  border: 1px dashed var(--wb-border-strong);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: 7px 14px;
  color: var(--wb-accent-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.followup-material-add-button:hover,
.followup-material-add-button:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.followup-material-add-button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.followup-material-add-editor {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  width: 240px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-panel-bg);
  box-shadow: var(--wb-shadow-control);
  padding: 10px;
}

.followup-material-add-editor input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-input-bg);
  padding: 6px 10px;
  color: var(--wb-text-primary);
  font: inherit;
}

.followup-material-add-editor input:focus {
  border-color: var(--wb-input-focus-border);
}

.followup-material-add-editor button {
  min-height: 32px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg-soft);
  color: var(--wb-accent-ink);
  font: inherit;
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.followup-material-add-editor button:hover,
.followup-material-add-editor button:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.followup-material-add-editor button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.followup-material-add-error {
  color: var(--wb-danger);
  font-size: var(--wb-fs-12);
}

/* ---- 素材分组排序模式（2026-10-13 照 5177:19535-19551；骨架复用款式排序那套） ---- */

.followup-material-group-sort-mode .product-knowledge-title-sort-actions button {
  min-height: 30px;
  padding: 3px 10px;
  font-size: var(--wb-fs-12);
}

.followup-material-group-sort-mode .product-knowledge-title-sort-actions button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ---- 价目表入口（只读预览；表格骨架复用价格表样式） ---- */

.product-knowledge-related-price-list {
  padding: var(--wb-space-4);
}

.product-knowledge-price-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wb-space-3);
  padding: 0 0 var(--wb-space-3);
}

.product-knowledge-price-list-status {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
  padding: var(--wb-space-4);
}

/* ---- 价目表放大预览浮层（2026-10-09 照 5177：整页浮层 + 工具栏缩放 + 滚动看全表 + Esc 关闭） ---- */

.product-knowledge-price-list-magnifier-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: flex;
  flex-direction: column;
  background: var(--wb-overlay-bg);
}

.product-knowledge-price-list-magnifier-toolbar {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-panel-bg);
  padding: var(--wb-space-3) var(--wb-space-4);
}

.product-knowledge-price-list-magnifier-hint {
  flex: 1 1 auto;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.product-knowledge-price-list-magnifier-toolbar button {
  min-height: 32px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 4px 10px;
  font: inherit;
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.product-knowledge-price-list-magnifier-zoom-label {
  min-width: 46px;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  text-align: center;
}

.product-knowledge-price-list-magnifier-stage {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--wb-panel-bg);
  padding: var(--wb-space-5);
}

.product-knowledge-price-list-magnifier-canvas {
  width: max-content;
}

/* ---- 素材墙（5177-CSS-PL:9187-9260） ---- */

.followup-material-wall {
  align-items: flex-start;
  gap: var(--wb-space-4);
  min-height: 180px;
  border: 1px dashed var(--wb-border-strong);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg-soft);
  padding: var(--wb-space-4);
}

.followup-material-wall.active,
.followup-material-wall.is-drop-active {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
  box-shadow: var(--wb-focus-ring);
}

.followup-material-wall .followup-material-file-item {
  position: relative;
  width: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
}

.followup-material-file-item.is-image,
.followup-material-file-item.is-video {
  width: 214px;
}

.followup-material-file-item.is-file {
  width: min(100%, 280px);
}

.followup-material-file-thumb {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: var(--wb-radius-control);
  background: var(--wb-fill-soft);
  overflow: hidden;
}

/* 缩略图完整显示、不裁切（5177-CSS-PL:8555-8560 的墙内图片口径：容器 4:3（宽 = 高 × 4/3），
   图按原比例缩进容器；5177 对墙内 `<img>` 写的是高度跟随显示大小 + `object-fit: contain`，
   竖图不会被裁。2026-10-01 业务方反馈"上传的图片被截断了一部分"：原来这里是
   `object-fit: cover`，竖图（如 218×244）上下被裁。 */
.followup-material-file-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.followup-material-file-thumb-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-900);
}

.followup-material-file-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-accent-strong);
  color: var(--wb-btn-primary-ink);
  font-size: var(--wb-fs-14);
  transform: translate(-50%, -50%);
}

.quote-area-customer-file-icon {
  display: grid;
  place-items: center;
  width: 56px;
  min-height: 56px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-fill-soft);
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-900);
  letter-spacing: .02em;
}

/* ---- 多选（5177-CSS-QL:610-645） ---- */

.followup-material-select {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-panel-bg);
  box-shadow: var(--wb-shadow-control);
}

.followup-material-box.is-multi-select .followup-material-select {
  display: grid;
}

.followup-material-box.is-multi-select .followup-material-file-item {
  cursor: pointer;
  user-select: none;
}

.followup-material-box.is-multi-select .followup-material-file-item.is-multi-selected {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
  box-shadow: inset 0 0 0 2px var(--wb-accent);
}

/* ---- 排序：拖动把手与落点（5177-CSS-PL:8977-9030 / 8799-8810） ---- */

.followup-material-file-item.is-sort-mode {
  outline: 1px dashed var(--wb-border-strong);
  outline-offset: 2px;
}

.quote-media-sort-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: none;
  min-height: 26px;
  align-items: center;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 4px 8px;
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-900);
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.quote-media-sort-handle:active {
  cursor: grabbing;
}

.followup-material-file-item.is-sort-mode .quote-media-sort-handle {
  display: inline-flex;
}

.followup-material-file-item.dragging {
  opacity: .46;
}

.followup-material-file-item.drag-over-before::before,
.followup-material-file-item.drag-over-after::after {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-accent);
  content: '';
  pointer-events: none;
}

.followup-material-file-item.drag-over-before::before {
  left: -6px;
}

.followup-material-file-item.drag-over-after::after {
  right: -6px;
}

/* ---- 文件卡上的删除 ×（5177-CSS-QL:496-500 的 followup-material-file-item 定位） ---- */

.followup-material-wall .quote-media-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.followup-material-wall .quote-media-actions button {
  width: 22px;
  min-height: 22px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-panel-bg);
  color: var(--wb-text-secondary);
  padding: 0;
  font: inherit;
  font-weight: var(--wb-fw-900);
  line-height: 1;
  cursor: pointer;
}

.followup-material-wall .quote-media-actions button:hover,
.followup-material-wall .quote-media-actions button:focus-visible {
  border-color: var(--wb-danger);
  background: var(--wb-toast-error-bg);
  color: var(--wb-danger);
}

/* ---- 上传块（5177-CSS-PL:9882-9955；粘贴 button 与上传 label 各占一半） ---- */

.quote-split-upload-tile {
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 180px;
  min-height: 132px;
  border: 1px dashed var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  overflow: hidden;
}

.quote-split-upload-paste,
.quote-split-upload-file {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--wb-panel-bg);
  color: var(--wb-text-secondary);
  padding: var(--wb-space-3);
  font: inherit;
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
}

.quote-split-upload-paste {
  border-bottom: 1px dashed var(--wb-border-strong);
}

.quote-split-upload-paste:hover,
.quote-split-upload-paste:focus-visible,
.quote-split-upload-file:hover,
.quote-split-upload-file:focus-within {
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}

/* 粘贴捕获框：藏在屏幕外，只为让 Ctrl+V 有焦点（5177-CSS-PL:9903-9910） */
.quote-library-paste-catcher {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- 删除素材框对话框（5177-CSS-QL:663-712） ---- */

.followup-delete-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: grid;
  place-items: center;
  background: var(--wb-overlay-bg);
  padding: var(--wb-space-10);
}

.followup-delete-dialog {
  display: grid;
  gap: var(--wb-space-5);
  width: min(480px, calc(100vw - 48px));
  border: 1px solid var(--wb-panel-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-panel-bg);
  padding: var(--wb-space-8);
  box-shadow: var(--wb-shadow-modal);
  /* 反向补偿（2026-10-01 板块缩放）：弹窗挂在缩放区（.card 内容）里，尺寸与居中
   * 都会被缩 0.70；照 5177 的除算（invoice.css:2697/6212、03-price-list.css:2002）。 */
  zoom: calc(1 / var(--workbench-section-scale, 1));
}

.followup-delete-dialog h4 {
  margin: 0;
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-18);
}

.followup-delete-dialog p {
  margin: 0;
  color: var(--wb-text-secondary);
}

.followup-material-box-error {
  margin: 0;
}

.followup-delete-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wb-space-3);
}

.followup-delete-dialog-actions button {
  min-height: 34px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
  padding: 0 12px;
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.followup-delete-dialog-actions button:hover,
.followup-delete-dialog-actions button:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.followup-delete-dialog-actions button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ============================================================
 * 6. 空态（5177-CSS customers.css:142-148 / 5177-CSS-PL:3335-3345）
 * ============================================================ */

.customer-related-inquiry-empty {
  border: 1px dashed var(--wb-empty-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-empty-bg);
  padding: 18px;
  color: var(--wb-empty-ink);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
  text-align: center;
}

.product-knowledge-related {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 90px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: var(--wb-space-3);
}

/* ============================================================
 * 7. 转移款式对话框（5177:33602-33682；外壳类名沿用 5177 的 quote-move-dialog-*）
 * ============================================================ */

.quote-move-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: grid;
  place-items: center;
  background: var(--wb-overlay-bg);
  padding: var(--wb-space-5);
}

.quote-move-dialog {
  display: grid;
  gap: var(--wb-space-4);
  width: min(720px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
  border: 1px solid var(--wb-panel-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-panel-bg);
  box-shadow: var(--wb-shadow-modal);
  padding: var(--wb-space-7);
  /* 反向补偿：同上（弹窗在缩放区里）。 */
  zoom: calc(1 / var(--workbench-section-scale, 1));
}

.section-heading.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-5);
}

.section-heading.compact h3 {
  margin: 0;
}

.quote-style-category-move-options {
  display: grid;
  gap: var(--wb-space-3);
  min-width: 0;
}

.quote-style-category-move-current,
.quote-style-category-move-target {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg-soft);
  padding: var(--wb-space-2) var(--wb-space-3);
}

.quote-style-category-move-current span,
.quote-style-category-move-target span {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
}

.quote-style-category-move-current strong,
.quote-style-category-move-target strong {
  overflow: hidden;
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-14);
  font-weight: var(--wb-fw-850);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-style-category-move-current small {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.quote-style-category-move-hint {
  margin: 0;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
}

.quote-style-category-move-error {
  margin: 0;
  color: var(--wb-danger);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
}

.quote-style-category-move-targets {
  display: grid;
  gap: var(--wb-space-1);
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: var(--wb-space-1);
}

.quote-style-category-move-targets button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--wb-radius-control);
  background: transparent;
  padding: 0 10px;
  color: var(--wb-text-primary);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  text-align: left;
  cursor: pointer;
}

.quote-style-category-move-targets button:hover,
.quote-style-category-move-targets button:focus-visible {
  border-color: var(--wb-border-strong);
  background: var(--wb-accent-soft);
}

.quote-style-category-move-targets button[aria-pressed="true"] {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}

.quote-style-category-move-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wb-space-3);
}

.quote-style-category-move-actions button {
  min-height: var(--wb-control-height-sm);
  border: 1px solid var(--wb-btn-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-btn-bg);
  padding: 0 var(--wb-space-4);
  color: var(--wb-btn-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  cursor: pointer;
}

.quote-style-category-move-actions button.primary-action {
  border-color: var(--wb-btn-primary-border);
  background: var(--wb-btn-primary-bg);
  color: var(--wb-btn-primary-ink);
}

.quote-style-category-move-actions button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ============================================================
 * 8. 素材右键菜单 / 备注 / 主图（阶段 1-3 收尾）
 *    5177-CSS-PL:10683-10725（菜单）、15914-16040（转移级联列）、
 *    15805-15817（主图角标）、16122-16145（备注标记）；
 *    备注对话框复用 5177 的 followup-delete-dialog 外壳（5177-CSS-QL:663-712）。
 * ============================================================ */

.quote-media-context-menu {
  position: fixed;
  z-index: var(--wb-z-menu);
  display: grid;
  gap: 4px;
  min-width: 150px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid var(--wb-menu-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-menu-bg);
  padding: var(--wb-space-3);
  box-shadow: var(--wb-shadow-menu);
  color: var(--wb-text-primary);
  /* 反向补偿：素材右键菜单在缩放区里，fixed 尺寸与指针坐标都会被缩 0.70（5177 同款除算）。 */
  zoom: calc(1 / var(--workbench-section-scale, 1));
}

.quote-media-context-menu strong {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
}

.quote-media-context-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wb-space-2);
  min-height: var(--wb-control-height-sm);
  border: 0;
  border-radius: var(--wb-radius-control);
  background: transparent;
  padding: 6px 8px;
  color: var(--wb-text-primary);
  font: inherit;
  font-size: var(--wb-fs-13);
  text-align: left;
  cursor: pointer;
}

.quote-media-context-menu button:hover,
.quote-media-context-menu button:focus-visible {
  background: var(--wb-btn-text-hover-bg);
}

.quote-media-context-menu button.active {
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}

.quote-media-context-menu button.danger {
  color: var(--wb-danger);
}

.quote-media-context-menu button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.product-media-transfer-menu {
  row-gap: var(--wb-space-3);
}

.product-media-transfer-cascade {
  display: flex;
  align-items: flex-start;
  gap: var(--wb-space-3);
  min-width: 0;
}

.product-media-transfer-cascade-column {
  display: grid;
  align-content: start;
  gap: 4px;
  box-sizing: border-box;
  min-width: 0;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.product-media-transfer-cascade-column > strong,
.product-media-transfer-cascade-column > span {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.product-media-transfer-cascade-column--actions {
  width: 142px;
}

.product-media-transfer-cascade-column--views {
  width: 132px;
  border-left: 1px solid var(--wb-border);
  padding-left: 6px;
}

.product-media-transfer-cascade-column--styles {
  width: 180px;
  border-left: 1px solid var(--wb-border);
  padding-left: 6px;
}

.product-media-transfer-cascade-column--materials {
  width: 168px;
  border-left: 1px solid var(--wb-border);
  padding-left: 6px;
}

/* 5177 是 88px；客户版的类目列显示「上级 / 类目名」，加宽一点才不截断。 */
.product-media-transfer-cascade-column--path {
  width: 132px;
  border-left: 1px solid var(--wb-border);
  padding-left: 4px;
}

.product-media-transfer-item-label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-media-transfer-heading,
.product-media-transfer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-5);
  flex-shrink: 0;
  font-size: var(--wb-fs-12);
}

.product-media-transfer-heading span,
.product-media-transfer-footer span {
  overflow-wrap: anywhere;
  color: var(--wb-text-secondary);
}

.product-media-transfer-footer > button {
  width: auto;
  flex-shrink: 0;
}

/* 主图角标（5177-CSS-PL:15805-15817）。 */
.product-material-primary-label {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 5;
  padding: 2px 6px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-accent);
  color: var(--wb-btn-primary-ink);
  font-size: var(--wb-fs-11);
  font-weight: var(--wb-fw-800);
  pointer-events: none;
}

.followup-material-file-item.is-primary-media {
  border-color: var(--wb-accent);
  box-shadow: 0 0 0 2px var(--wb-accent-soft);
}

/* 备注标记（5177-CSS-PL:16122-16145）：右下角一个小红块 + 折角。 */
.product-knowledge-media-note-marker {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 8;
  width: 10px;
  height: 12px;
  border-radius: 2px 2px 0 0;
  background: var(--wb-danger);
  box-shadow: 0 0 0 1px var(--wb-surface);
  pointer-events: none;
}

.product-knowledge-media-note-marker::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-width: 0 0 4px 4px;
  border-color: transparent transparent var(--wb-surface) transparent;
}

/* 备注对话框（5177:20361-20379 的结构 + followup-delete-dialog 外壳）。 */
.product-knowledge-media-note-dialog {
  width: min(520px, 100%);
}

.product-knowledge-media-note-dialog h3 {
  margin: 0;
  color: var(--wb-text-primary);
}

.product-knowledge-media-note-dialog p {
  color: var(--wb-text-secondary);
}

.product-knowledge-media-note-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--wb-textarea-min-68);
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-input-bg);
  padding: var(--wb-space-3);
  color: var(--wb-input-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  resize: vertical;
}

.product-knowledge-media-note-dialog textarea:focus-visible {
  border-color: var(--wb-input-focus-border);
  outline: none;
  box-shadow: var(--wb-input-focus-shadow);
}

.product-knowledge-media-note-dialog p.error {
  color: var(--wb-danger);
}

.product-knowledge-media-note-count {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  text-align: right;
}

/* ============================================================
 * 9. 阶段 1-4：跟进话术文本框 / 未归类 / 回收站 / 参考示例
 *    5177-CSS-QL:594-608（`.followup-material-textarea`）、
 *    5177-CSS-PL:3222-3282（`.product-knowledge-unclassified`）；
 *    未归类 / 回收站 / 参考示例的面板形状是客户版补的（5177 没有这层，见报告"未确认"）。
 * ============================================================ */

/* ---- 面板入口条（未归类 / 回收站） ---- */

.product-knowledge-panel-nav {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  min-width: 0;
}

.product-knowledge-panel-nav button {
  min-height: 32px;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
  background: var(--wb-panel-bg);
  padding: 4px 12px;
  color: var(--wb-accent-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-850);
  cursor: pointer;
}

.product-knowledge-panel-nav button:hover,
.product-knowledge-panel-nav button:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

/* 未归类：5177-CSS-PL:3282 的暖色块（色值换成令牌）。 */
.product-knowledge-unclassified {
  border-color: var(--wb-pill-warn-border);
  background: var(--wb-pill-warn-bg);
  color: var(--wb-pill-warn-ink);
}

/* 回收站：5177 没有这个入口（见报告"未确认"），中性色块，跟「未归类」的暖色分开。 */
.product-knowledge-recycle-bin {
  border-color: var(--wb-border-strong);
  background: var(--wb-panel-bg);
  color: var(--wb-accent-ink);
}

.product-knowledge-panel-nav button.active,
.product-knowledge-panel-nav button[aria-pressed="true"] {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}

.product-knowledge-unclassified.active {
  border-color: var(--wb-pill-warn-border);
  background: var(--wb-pill-warn-bg);
  color: var(--wb-pill-warn-ink);
}

.product-knowledge-panel-nav button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ---- 未归类 / 回收站 / 参考示例面板 ---- */

.product-knowledge-panel {
  display: grid;
  gap: var(--wb-space-3);
  min-width: 0;
}

.product-knowledge-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-4);
  min-width: 0;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-panel-bg);
  padding: 10px 12px;
}

.product-knowledge-panel-hint {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.product-knowledge-panel-note {
  margin: 0;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.product-knowledge-panel-error {
  margin: 0;
  color: var(--wb-danger);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
}

.product-knowledge-panel-list {
  display: grid;
  gap: var(--wb-space-2);
  min-width: 0;
}

.product-knowledge-panel-section {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
}

.product-knowledge-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-4);
  min-width: 0;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: var(--wb-space-3);
}

.product-knowledge-panel-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-knowledge-panel-row-main strong {
  overflow: hidden;
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-14);
  font-weight: var(--wb-fw-850);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-knowledge-panel-row-meta {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.product-knowledge-panel-row-note {
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.product-knowledge-panel-action {
  flex-shrink: 0;
  min-height: var(--wb-control-height-sm);
  border: 1px solid var(--wb-btn-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-btn-bg);
  padding: 0 var(--wb-space-4);
  color: var(--wb-btn-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  cursor: pointer;
}

.product-knowledge-panel-action:hover,
.product-knowledge-panel-action:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.product-knowledge-panel-action:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ---- 参考示例（空工作区的空态） ---- */

.product-knowledge-sample-pack {
  display: grid;
  gap: var(--wb-space-3);
  min-width: 0;
}

.product-knowledge-sample-pack-install {
  justify-self: start;
  min-height: 42px;
  border: 1px solid var(--wb-accent);
  border-radius: var(--wb-radius-button);
  background: var(--wb-accent);
  padding: 8px 18px;
  color: var(--wb-btn-primary-ink);
  font: inherit;
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}

.product-knowledge-sample-pack-install:hover,
.product-knowledge-sample-pack-install:focus-visible {
  border-color: var(--wb-accent-strong);
  background: var(--wb-accent-strong);
  outline: 2px solid var(--wb-accent-soft);
}

.product-knowledge-sample-pack-install:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.product-knowledge-sample-pack-line {
  margin: 0;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-13);
}

.product-knowledge-sample-pack-error {
  margin: 0;
  color: var(--wb-danger);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
}

/* ---- 跟进话术：话术盒子（文本框） ---- */

.followup-notes-list {
  display: grid;
  gap: var(--wb-space-3);
}

.followup-notes-add-row {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
}

.followup-notes-add {
  min-height: var(--wb-control-height-sm);
  border: 1px dashed var(--wb-border-strong);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg);
  padding: 4px 12px;
  color: var(--wb-accent-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-850);
  cursor: pointer;
}

.followup-notes-add:hover,
.followup-notes-add:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.followup-notes-add:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.followup-notes-composer {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  min-width: 0;
  border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg-soft);
  padding: var(--wb-space-3);
}

.followup-notes-composer-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--wb-input-height);
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-input-bg);
  padding: 6px 10px;
  color: var(--wb-input-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
}

.followup-notes-composer-input:focus-visible {
  border-color: var(--wb-input-focus-border);
  outline: none;
  box-shadow: var(--wb-input-focus-shadow);
}

.followup-notes-composer button {
  min-height: var(--wb-control-height-sm);
  border: 1px solid var(--wb-btn-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-btn-bg);
  padding: 4px 12px;
  color: var(--wb-btn-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  cursor: pointer;
}

.followup-notes-composer button:hover,
.followup-notes-composer button:focus-visible {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}

.followup-notes-composer button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.followup-notes-composer-error {
  color: var(--wb-danger);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
}

/* 一个话术盒子：框头复用素材框的样式，这里只补拖动把手、文本框与拖动落点。 */
.followup-notes-box {
  min-height: 0;
}

.followup-notes-box.dragging {
  opacity: .55;
}

.followup-notes-box.drag-over-before {
  box-shadow: 0 -2px 0 0 var(--wb-accent);
}

.followup-notes-box.drag-over-after {
  box-shadow: 0 2px 0 0 var(--wb-accent);
}

.followup-notes-sort-handle {
  flex: 0 0 auto;
}

.followup-notes-textarea,
.followup-material-textarea {
  width: 100%;
  min-height: 96px;
  box-sizing: border-box;
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-input-bg);
  padding: 10px 12px;
  color: var(--wb-input-ink);
  font: inherit;
  line-height: 1.55;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.followup-notes-textarea:focus-visible,
.followup-material-textarea:focus-visible {
  border-color: var(--wb-input-focus-border);
  outline: none;
  box-shadow: var(--wb-input-focus-shadow);
}

.followup-notes-textarea:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

/* ============================================================
 * 10. 窄屏（照 app.css 的工作台断点：一列）
 * ============================================================ */

@media (max-width: 980px) {
  .product-knowledge-variant-card-head {
    flex-wrap: wrap;
  }

  .product-knowledge-variant-toolbar {
    flex-wrap: wrap;
    gap: var(--wb-space-3);
  }

  .product-knowledge-panel-row {
    flex-wrap: wrap;
  }
}