/* 名字组合：笔记本宽度与短屏适配。
 * 仅处理名字组合工作台，不改变其他页面、业务数据或起名规则。
 */

/* 字卡高度按数字卡片现有两行行高、文字间距、内边距和边框计算。
 * 只调整字卡，不改变数字卡片尺寸、名单容量或筛选规则。
 */
.names-screen .names-result-panel .name-search-info {
  box-sizing: border-box;
  height: calc(18px * 1.05 + 12px * 1.15 + 3px + 2px + 16px + 2px);
  min-height: 0;
  margin-top: 0;
  padding: 8px 10px;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
}

.names-screen .names-result-panel .name-search-char {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: left;
}

.names-screen .names-result-panel .name-search-char strong {
  flex: 0 0 auto;
  font-size: 24px;
}

.names-screen .names-result-panel .name-search-char span {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.names-screen .names-result-panel .name-search-meta {
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
}

/* 刷新提示不参与工作台高度分配；自动消失或关闭时，名单不跳动。
 * 桌面提示留在刷新按钮左侧，其他页面仍沿用原有提示布局。
 */
.main:has(.names-screen) > .floating-message {
  position: fixed;
  z-index: 120;
  top: 12px;
  right: 168px;
  max-width: min(680px, calc(100vw - 440px));
  margin: 0;
}

body[data-theme="tech"] .main:has(.names-screen) > .floating-message {
  top: 90px;
}

@media (max-width: 900px) {
  .main:has(.names-screen) > .floating-message {
    top: 62px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  body[data-theme="tech"] .main:has(.names-screen) > .floating-message {
    top: 82px;
  }
}

/* 所有名字组合方式沿用严格姓名池的客户资料收缩入口。 */
.main.with-project-context:has(.names-screen:not(.strict-name-workbench-v2)) { position: relative; }
.main.with-project-context:has(.names-screen:not(.strict-name-workbench-v2)) > .smart-compact-context-slot {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 80;
  width: 52px;
  height: 38px;
  transform: translateX(-50%);
  overflow: visible;
}
body[data-theme="tech"] .main.with-project-context:has(.names-screen:not(.strict-name-workbench-v2)) > .smart-compact-context-slot { top: 82px; z-index: 100; }
.main.with-project-context:has(.names-screen:not(.strict-name-workbench-v2)) > .project-context-content { min-height: 0; }

/* 已确认的严格线路在页头保留标识；失效与未确认警告仍按原样显示。 */
.project-context-content:has(> .name-pool-identity.strict + .names-combination-results-screen) > .name-pool-identity.strict { display: none; }
.project-context-content:not(.has-delivery-return):has(> .name-pool-identity.strict + .names-combination-results-screen) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}
.names-route-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  border-radius: 5px;
  background: rgba(var(--ui-source-8f872e7f70a3e9-rgb, 237, 247, 241), var(--ui-source-8f872e7f70a3e9-alpha, 1));
  color: rgba(var(--ui-source-81dc2ec9596616-rgb, 36, 95, 84), var(--ui-source-81dc2ec9596616-alpha, 1));
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
body[data-theme="tech"] .names-route-badge { background: #19372f; color: #91d8bd; }

/* 严格线路其他模式至少保留接口要求的 20 张卡；短屏可在结果区滚动。 */
.names-combination-results-screen .strict-names-result-panel .screen-list-area { overflow-y: auto; }
.names-combination-results-screen .strict-names-result-panel .name-columns.strict-name-columns { height: auto; overflow: visible; }

@media (min-width: 1101px) {
  /* 当前姓名池提示与名字页面同时存在时，名字页面只能占用剩余高度。 */
  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }

  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) > .name-pool-identity {
    margin-bottom: 0;
  }

  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) > .names-screen:not(.strict-names-top-layout) {
    height: auto;
  }

  /* 允许常规结果面板真正收缩，避免内容撑出面板后被截断。 */
  .names-screen .names-result-panel:not(.strict-names-result-panel),
  .names-screen .names-result-panel:not(.strict-names-result-panel) > * {
    min-width: 0;
  }

  .names-screen .names-result-panel:not(.strict-names-result-panel) .screen-list-area {
    height: auto;
    min-height: 0;
    overflow: auto;
  }
}

/* 一千二百至一千四百左右的常见笔记本保持双栏，但把空间优先让给结果区。 */
@media (min-width: 1101px) and (max-width: 1400px) {
  .names-screen:not(.strict-names-top-layout) .names-workbench {
    grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  }

  .names-screen:not(.strict-names-top-layout) .name-combination-mode {
    flex-wrap: wrap;
  }

  .names-screen .names-result-panel:not(.strict-names-result-panel) .name-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: none;
  }

  .names-screen .names-result-panel .name-columns:not(.strict-name-columns) {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  }
}

/* 浏览器工具栏会进一步压缩老款笔记本的可视高度。
 * 短屏不再强行截断工作台，改由主区域滚动，并给工作台保留可操作高度。
 */
@media (min-width: 1101px) and (max-height: 760px) {
  .main.screen-main.with-project-context:has(.names-screen:not(.strict-names-top-layout)) {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main.screen-main.with-project-context:has(.names-screen:not(.strict-names-top-layout)) .project-context-content:has(> .name-pool-identity + .names-screen:not(.strict-names-top-layout)) {
    flex: 0 0 640px;
    min-height: 640px;
    overflow: visible;
  }
}

/* 新严格姓名池工作台自行分配高度；不沿用旧页面的字库提示占行规则。 */
@media (min-width: 1101px) {
  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .strict-name-workbench-v2) {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .project-context-content:not(.has-delivery-return):has(> .name-pool-identity + .strict-name-workbench-v2) > .strict-name-workbench-v2 {
    flex: 1;
    height: 100%;
    min-height: 0;
  }
}

@media (min-width: 1101px) and (max-height: 760px) {
  .main.screen-main.with-project-context:has(.strict-name-workbench-v2)
    .project-context-content:has(> .name-pool-identity + .strict-name-workbench-v2) {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
}

/* 字位条件固定在十个模式按钮左侧，不再独占一排。 */
.names-screen > .shared-name-filter-mode-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  padding: 3px 5px;
}
.names-screen > .shared-name-filter-mode-row > .name-combination-tabs {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-width: thin;
}
.names-screen > .shared-name-filter-mode-row > .name-combination-tabs button,
.names-screen > .shared-name-filter-mode-row > .name-combination-tabs > span { flex: none; white-space: nowrap; }
.shared-name-filter-control { display: flex; align-items: center; gap: 5px; min-width: 0; padding-right: 8px; border-right: 1px solid rgba(var(--ui-source-30cb82299ada89-rgb, 203, 222, 214), var(--ui-source-30cb82299ada89-alpha, 1)); white-space: nowrap; }
.names-screen > .shared-name-filter-mode-row .shared-name-filter-trigger {
  flex: none;
  min-height: 35px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--ui-source-fe6b9e5e166082-rgb, 30, 108, 93), var(--ui-source-fe6b9e5e166082-alpha, 1));
  border-radius: 6px;
  background: rgba(var(--ui-source-b1ec5a9504973f-rgb, 33, 109, 93), var(--ui-source-b1ec5a9504973f-alpha, 1));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.names-screen > .shared-name-filter-mode-row .shared-name-filter-trigger:hover:not(:disabled) { background: rgba(var(--ui-source-9ad439639d9c0c-rgb, 24, 87, 71), var(--ui-source-9ad439639d9c0c-alpha, 1)); }
.names-screen > .shared-name-filter-mode-row .shared-name-filter-trigger:disabled { opacity: .65; cursor: not-allowed; }
.names-screen > .shared-name-filter-mode-row .shared-name-filter-trigger span {
  display: inline-block;
  margin-left: 5px;
  border-radius: 4px;
  padding: 2px 4px;
  background: rgba(var(--ui-source-ead01fc3b1a2fe-rgb, 255, 255, 255), var(--ui-source-ead01fc3b1a2fe-alpha, 0.19));
  color: rgba(var(--ui-source-ee13f688c7d66c-rgb, 255, 255, 255), var(--ui-source-ee13f688c7d66c-alpha, 1));
  font-size: 10px;
  font-weight: 600;
}
.names-screen > .shared-name-filter-mode-row .shared-name-filter-reference-entry {
  flex: none;
  min-height: 35px;
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
}
.shared-name-filter-optional { grid-column: 1 / -1; display: flex; min-width: 0; align-items: center; padding: 0 4px; }

.shared-name-filter-editor-backdrop { z-index: 1800; }
.shared-name-filter-editor-modal { display: flex; flex-direction: column; width: min(960px, 100%); max-height: min(88vh, 900px); border: 1px solid rgba(var(--ui-source-30cb82299ada89-rgb, 203, 222, 214), var(--ui-source-30cb82299ada89-alpha, 1)); border-radius: 12px; background: rgba(var(--ui-source-80e11aad25b8ac-rgb, 255, 255, 255), var(--ui-source-80e11aad25b8ac-alpha, 1)); box-shadow: 0 18px 56px rgba(var(--ui-source-d16874d4d29566-rgb, 20, 47, 37), var(--ui-source-d16874d4d29566-alpha, 0.25)); overflow: hidden; color: rgba(var(--ui-source-ed1f16429c4073-rgb, 36, 74, 67), var(--ui-source-ed1f16429c4073-alpha, 1)); }
.shared-name-filter-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 10px; }
.shared-name-filter-editor-header h2 { margin: 0 0 5px; font-size: 19px; }
.shared-name-filter-editor-header p { margin: 0; color: rgba(var(--ui-source-2fa9ce2eaa46e4-rgb, 96, 118, 109), var(--ui-source-2fa9ce2eaa46e4-alpha, 1)); font-size: 12px; line-height: 1.5; }
.shared-name-filter-editor-header button { flex: none; }
.shared-name-filter-editor-body { display: grid; gap: 8px; min-height: 0; overflow-y: auto; padding: 10px 18px; border-top: 1px solid rgba(var(--ui-source-aad3bd4aa1df54-rgb, 228, 238, 232), var(--ui-source-aad3bd4aa1df54-alpha, 1)); }
.shared-name-filter-editor-body > p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(var(--ui-source-3b7713bb2f520d-rgb, 98, 119, 110), var(--ui-source-3b7713bb2f520d-alpha, 1)); }
.shared-name-filter-example { border-radius: 6px; background: rgba(var(--ui-source-8f872e7f70a3e9-rgb, 237, 247, 241), var(--ui-source-8f872e7f70a3e9-alpha, 1)); padding: 7px 9px; }
.shared-name-filter-row { display: grid; grid-template-columns: 48px repeat(4, minmax(105px, 1fr)) auto; align-items: center; gap: 6px; }
.shared-name-filter-row .shared-name-filter-number { font-size: 12px; font-weight: 700; white-space: nowrap; }
.shared-name-filter-row label { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; white-space: nowrap; }
.shared-name-filter-row input, .shared-name-filter-row select { min-width: 0; width: 100%; height: 32px; padding: 3px 5px; font-size: 12px; }
.shared-name-filter-row button { min-height: 30px; padding: 4px 8px; font-size: 11px; }
.shared-name-filter-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 18px; border-top: 1px solid rgba(var(--ui-source-aad3bd4aa1df54-rgb, 228, 238, 232), var(--ui-source-aad3bd4aa1df54-alpha, 1)); }
.shared-name-filter-editor-actions button { min-height: 34px; padding: 5px 10px; font-size: 12px; }
.shared-name-filter-editor-spacer { flex: 1; }
.shared-name-filter-editor-footnote { margin: 0; padding: 0 18px 14px; color: rgba(var(--ui-source-2fa9ce2eaa46e4-rgb, 96, 118, 109), var(--ui-source-2fa9ce2eaa46e4-alpha, 1)); font-size: 11px; line-height: 1.5; }
.shared-name-filter-ai-notice { flex: none; margin: 0; border: 1px solid rgba(var(--ui-source-281f59d3e1a8d2-rgb, 216, 230, 220), var(--ui-source-281f59d3e1a8d2-alpha, 1)); border-radius: 6px; background: rgba(var(--ui-source-1724f4c25b9a72-rgb, 248, 251, 247), var(--ui-source-1724f4c25b9a72-alpha, 1)); padding: 5px 9px; color: rgba(var(--ui-source-848d341a0dd954-rgb, 85, 113, 102), var(--ui-source-848d341a0dd954-alpha, 1)); font-size: 11px; line-height: 1.45; }
.shared-name-compare-status.matched { background: rgba(var(--ui-source-4dde02b3799380-rgb, 229, 242, 233), var(--ui-source-4dde02b3799380-alpha, 1)); color: rgba(var(--ui-source-a8e5e0657977ef-rgb, 36, 96, 68), var(--ui-source-a8e5e0657977ef-alpha, 1)); }
.shared-name-compare-status.not_matched { background: rgba(var(--ui-source-5deb5798cc38b9-rgb, 255, 241, 221), var(--ui-source-5deb5798cc38b9-alpha, 1)); color: rgba(var(--ui-source-1a8b51e1a77454-rgb, 129, 90, 27), var(--ui-source-1a8b51e1a77454-alpha, 1)); }
.shared-name-compare-status.unknown { background: rgba(var(--ui-source-c6133ca3cba9d6-rgb, 237, 240, 242), var(--ui-source-c6133ca3cba9d6-alpha, 1)); color: rgba(var(--ui-source-9a1fcc679675a6-rgb, 84, 100, 107), var(--ui-source-9a1fcc679675a6-alpha, 1)); }

.shared-name-reference-backdrop { z-index: 1800; }
.shared-name-reference-modal { display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(88vh, 900px); min-height: 280px; border: 1px solid rgba(var(--ui-source-30cb82299ada89-rgb, 203, 222, 214), var(--ui-source-30cb82299ada89-alpha, 1)); border-radius: 12px; background: rgba(var(--ui-source-80e11aad25b8ac-rgb, 255, 255, 255), var(--ui-source-80e11aad25b8ac-alpha, 1)); box-shadow: 0 18px 56px rgba(var(--ui-source-d16874d4d29566-rgb, 20, 47, 37), var(--ui-source-d16874d4d29566-alpha, 0.25)); overflow: hidden; color: rgba(var(--ui-source-ed1f16429c4073-rgb, 36, 74, 67), var(--ui-source-ed1f16429c4073-alpha, 1)); }
.shared-name-reference-header { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px 10px; }
.shared-name-reference-header h2 { margin: 0 0 5px; font-size: 19px; }
.shared-name-reference-header p { margin: 0; color: rgba(var(--ui-source-2fa9ce2eaa46e4-rgb, 96, 118, 109), var(--ui-source-2fa9ce2eaa46e4-alpha, 1)); font-size: 12px; line-height: 1.5; }
.shared-name-reference-header button { align-self: start; white-space: nowrap; }
.shared-name-reference-conditions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; }
.shared-name-reference-conditions span { border-radius: 6px; background: rgba(var(--ui-source-7aa177c1ec094e-rgb, 234, 244, 239), var(--ui-source-7aa177c1ec094e-alpha, 1)); padding: 4px 7px; font-size: 11px; }
.shared-name-reference-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid rgba(var(--ui-source-aad3bd4aa1df54-rgb, 228, 238, 232), var(--ui-source-aad3bd4aa1df54-alpha, 1)); border-bottom: 1px solid rgba(var(--ui-source-aad3bd4aa1df54-rgb, 228, 238, 232), var(--ui-source-aad3bd4aa1df54-alpha, 1)); }
.shared-name-reference-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.shared-name-reference-toolbar small { color: rgba(var(--ui-source-492ce5ce32d2ed-rgb, 152, 101, 41), var(--ui-source-492ce5ce32d2ed-alpha, 1)); font-size: 11px; }
.shared-name-reference-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-content: start; gap: 8px; min-height: 0; overflow-y: auto; padding: 12px 18px; }
.shared-name-reference-list > p { grid-column: 1 / -1; }
.shared-name-reference-item { display: grid; gap: 4px; border: 1px solid rgba(var(--ui-source-33db68cb7a99e5-rgb, 217, 231, 223), var(--ui-source-33db68cb7a99e5-alpha, 1)); border-radius: 7px; padding: 8px 10px; background: rgba(var(--ui-source-d89cb5294cfef4-rgb, 255, 255, 255), var(--ui-source-d89cb5294cfef4-alpha, 1)); }
.shared-name-reference-item strong { font-size: 16px; }
.shared-name-reference-item span { width: fit-content; border-radius: 4px; padding: 2px 5px; background: rgba(var(--ui-source-4dde02b3799380-rgb, 229, 242, 233), var(--ui-source-4dde02b3799380-alpha, 1)); color: rgba(var(--ui-source-a8e5e0657977ef-rgb, 36, 96, 68), var(--ui-source-a8e5e0657977ef-alpha, 1)); font-size: 11px; }
.shared-name-reference-item.reference span { background: rgba(var(--ui-source-5deb5798cc38b9-rgb, 255, 241, 221), var(--ui-source-5deb5798cc38b9-alpha, 1)); color: rgba(var(--ui-source-1a8b51e1a77454-rgb, 129, 90, 27), var(--ui-source-1a8b51e1a77454-alpha, 1)); }
.shared-name-reference-item.unverified span { background: rgba(var(--ui-source-03697e378f1a48-rgb, 237, 240, 242), var(--ui-source-03697e378f1a48-alpha, 1)); color: rgba(var(--ui-source-37f6c7c137a6e7-rgb, 84, 100, 107), var(--ui-source-37f6c7c137a6e7-alpha, 1)); }
.shared-name-reference-item small { color: rgba(var(--ui-source-36f0594025b2c2-rgb, 99, 119, 110), var(--ui-source-36f0594025b2c2-alpha, 1)); font-size: 11px; }
.shared-name-reference-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 7px; border-top: 1px solid rgba(var(--ui-source-aad3bd4aa1df54-rgb, 228, 238, 232), var(--ui-source-aad3bd4aa1df54-alpha, 1)); padding: 9px 18px; font-size: 12px; }

@media (max-width: 850px) {
  .shared-name-reference-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .names-screen > .shared-name-filter-mode-row .shared-name-filter-trigger { font-size: 11px; padding: 5px 6px; }
  .names-screen > .shared-name-filter-mode-row .shared-name-filter-reference-entry { font-size: 11px; padding: 5px 6px; }
  .shared-name-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgba(var(--ui-source-5946e2d35d88a2-rgb, 216, 229, 222), var(--ui-source-5946e2d35d88a2-alpha, 1)); border-radius: 6px; padding: 7px; }
  .shared-name-filter-row .shared-name-filter-number { grid-column: 1 / -1; }
  .shared-name-filter-row button { grid-column: 1 / -1; justify-self: start; }
}