client/src/css/components/_semantic-analysis.scss

// 语义分析相关样式（section、查询输入、历史下拉、loader）

@use "loaders";
@use "query-history-dropdown" as qh;
@use "lmf-readout" as lmf;

// 子模式行：首页语义区、Chat 等复用（与 Ask 按钮分离时单独成行）
.semantic-submode-row {
  // 1lh（控件 line-height）+ 上下 padding(3px×2) + 边框(1px×2)
  --semantic-submode-control-block-size: calc(1lh + 6px + 2px);

  display: flex;
  align-items: center;
  gap: 6px;

  .semantic-submode-group {
    display: flex;
    align-items: center;
    gap: 6px;

    // `.semantic-submode-row .semantic-submode-group`（两档类）特异性高于 UA 里单独的 `[hidden]`，
    // 会把本应隐藏的组仍排成 flex；配合 TS 的 element.hidden 需强制盖住自身 flex。
    &[hidden] {
      display: none !important;
    }

    &.semantic-submode-group-right {
      margin-left: auto;
    }

    // 组内「主控」标签/下拉：比默认 submode 更醒目（仅直接子级，避免加粗单位后缀等嵌套 label）
    &.semantic-submode-group--emphasis {
      > .semantic-submode-label,
      > .semantic-submode-select {
        font-weight: 700;
      }
    }
  }

  .semantic-submode-label {
    font-size: 9pt;
    color: var(--text-muted);
  }

  label.semantic-submode-label:has(> input[type='checkbox']) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-block-size: var(--semantic-submode-control-block-size);
    cursor: pointer;
    user-select: none;
  }

  input[type='checkbox'] {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
  }

  .semantic-submode-select {
    box-sizing: border-box;
    block-size: var(--semantic-submode-control-block-size);
    padding: 3px 6px;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    min-width: 100px;
  }

  // Max new tokens（completion-options-row partial）；须在 semantic-analysis 中定义——Chat 不加载 causal_flow.scss
  .semantic-threshold-input,
  .gen-attr-max-tokens-input {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
    block-size: var(--semantic-submode-control-block-size);
    padding: 3px 6px;
    font-size: inherit;
    line-height: 1.2;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    text-align: right;
    inline-size: 4rem;
    max-inline-size: 100%;
    width: 4em;
  }
}

// Analyze 下方 Semantic Query 总开关：与 gen_attribute「Raw prompt mode」同款（未勾选整行灰色，勾选正文色）
.textarea-wrapper .semantic-submode-row.semantic-analysis-enable-row {
  label.semantic-submode-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    color: var(--text-primary, var(--text-color));

    &:has(> input[type='checkbox']:not(:checked)) {
      color: var(--text-muted);
    }
  }

  input[type='checkbox'] {
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
  }
}

// 语义分析区（在 button-group 与 histogram 之间，仅在 semantic_analysis 模式下显示）
.semantic-analysis-section {
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);

  .semantic-index-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;

    .semantic-index-model {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 8pt;
      color: var(--text-muted);
      min-width: 150px;
      min-height: 32px;
      text-align: center;
    }

    .semantic-index-model.is-hidden {
      visibility: hidden;
      opacity: 0;
    }
  }

  .semantic-analysis-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .semantic-search-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .semantic-search-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      min-width: 0;  // 允许内部长文案在 wrap 时换行，而非撑破父级后裁切
    }

    .semantic-match-degree {
      font-size: 9pt;
      color: var(--text-muted, #666);
      white-space: nowrap;
      flex-shrink: 0;  // 参与布局，且不被 flex 挤没

      :root[data-theme="dark"] & {
        color: var(--text-muted, #999);
      }
    }

    // flex-grow: 0 — 输入区宽度不随右侧（匹配度/Stop·Search 切换）变化，Search 按钮相对行首位置固定
    .semantic-search-input-wrapper {
      flex: 0 1 300px;
      min-width: 100px;
      max-width: 300px;
      position: relative;
    }

    .semantic-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 28px 6px 10px;
      font-family: inherit;
      border: 1px solid var(--input-border);
      border-radius: 4px;
      background: var(--input-bg);
      color: var(--text-color);
    }

    .semantic-search-clear {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      padding: 0;
      outline: none;
      display: none;
      align-items: center;
      justify-content: center;

      &.is-visible { display: flex; }
    }

    .semantic-search-history-dropdown {
      @include qh.query-history-dropdown;
    }
  }
}

// 语义索引 loader：与 loadersmall 同风格，独立控制（不受 isGlobalLoading 影响）
.semantic-index-loader {
  @extend .loadersmall;
}

// 语义搜索 loader：与 semantic-index-loader 同风格
.semantic-search-loader {
  @extend .loadersmall;
}

// 语义分析 debug 信息（文本渲染区下方，仅在有 debug 数据时显示）
.semantic-debug-info {
  margin-top: 8px;
  padding: 8px;
  font-size: 9pt;
  color: var(--text-muted, #666);
  border-top: 1px solid var(--border-color);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;  // 允许在 flex 中收缩
  max-width: 100%;
  box-sizing: border-box;

  .semantic-debug-abbrev pre {
    margin: 0 0 6px 0;
    font-size: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  // TopK 图表：与 tooltip 一致，宽度更大，与上方打印区留间隔
  .semantic-debug-topk-chart {
    margin-top: 20px;
  }
}

// 语义分析阶段级进度：参与 flex 布局，占据实际宽度，避免绝对定位溢出被裁切/遮挡
.semantic-progress {
  display: none;
  font-size: 9pt;
  color: var(--text-muted, #666);
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;

  :root[data-theme="dark"] & {
    color: var(--text-muted, #999);
  }
}