/* Sparkols 规范化层 · 最后加载
 *
 * 职责：在不改写存量样式表的前提下，统一那些 token 别名够不着的地方。
 * 主要是三类：
 *   1. 直接写死在各文件里的低对比度灰（token 别名无法覆盖裸 hex）
 *   2. 字号下限（原有大量 9px/10px/11px 正文）
 *   3. 视图与交互过渡（原 crm-pages.css 的 transition 计数为 0）
 *
 * 原则：只提升可读性与流畅度，不改变布局结构与信息层级。
 * 选择器保持低特异度并尽量作用于容器，避免与既有 !important 硬碰。
 */

/* ───────── 1. 品牌色归一 ─────────
 * 历史上三套品牌绿并存且写死为裸 hex，token 别名够不到：
 *   #129c91（search-center）· #2ca56f（search-center-crm）· #0f8f83 / #0f766e（redesign）
 * 其中 #2ca56f 用作主按钮底色，与外壳的 teal 明显不是同一个色系。
 * 这里只收敛「品牌色出现的位置」，不改布局与尺寸。 */

/* 主按钮：搜索中心此前为 #2ca56f，与 CRM 外壳不一致 */
.primary-btn {
  border-color: var(--ds-brand);
  background: var(--ds-brand);
  color: #ffffff;
}

.primary-btn:hover:not(:disabled) {
  border-color: var(--ds-brand-dark);
  background: var(--ds-brand-dark);
}

.sc-topbar .topbar-create-task-btn,
.floating-create-task-btn {
  background: var(--ds-brand);
}

.sc-topbar .topbar-create-task-btn:hover,
.floating-create-task-btn:hover {
  background: var(--ds-brand-dark);
}

/* 进度与阶段指示 */
#view-task .progress-line span,
#view-task .stage-grid > div.active > i,
#view-task .stage-grid > div.done > i,
.task-mini-progress span {
  background: var(--ds-brand);
}

/* 品牌色作为前景的场景：徽标、激活态、强调数字 */
.pill,
.task-status,
.platforms button.active,
.smart-mode-badge,
.search-mode-switch button.active,
.result-view-tab.active,
.result-view-tab.active strong,
.task-email-total,
.task-live-eyebrow,
.empty-task-icon,
.manual-section-head i,
.sc-tasks .task-platform-tabs button.active b {
  color: var(--ds-brand);
}

/* 载入中的转圈统一品牌色 */
.result-loading-spinner,
.task-search-animation i,
.sparkols-mail-auto-config-spinner {
  border-top-color: var(--ds-brand);
}

/* ───────── 2. 对比度修正 ─────────
 * 这些灰值在白底上分别只有 2.58 / 3.00 / 3.35 / 4.02 : 1，
 * 均低于 WCAG AA 正文要求的 4.5:1。统一提到 --ds-muted（5.9:1）。 */
[style*="#98a2b3"],
[style*="#8a96a7"] {
  color: var(--ds-muted);
}

.sparkols-muted,
.task-card p,
.task-card small,
.sc-topbar p,
.card-head p,
.metrics span,
.result-tools span,
.pagination span,
.examples,
.stage-grid span,
.creator-cell small {
  color: var(--ds-muted);
}

/* 表头此前为 #59677a on #f8fafc，比值 5.51 已达标，仅统一色值 */
.sparkols-internal-page th,
.table-wrap th,
th {
  color: var(--ds-text-secondary);
}

/* ───────── 3. 字号下限 ─────────
 * CRM 是长时间盯屏工具，正文不应低于 13px。
 * 仅抬升明显过小的场景，不动标题与统计数字。 */
body {
  font-size: var(--ds-text-base);
}

.task-card p,
.task-card small,
.card-head p,
.card-body > label,
.card-body label,
.metrics span,
.result-tools span,
.pagination span,
.sc-tasks footer,
.examples,
.examples button,
.chips span,
.creator-cell small {
  font-size: var(--ds-text-sm);
}

.table-wrap th,
.table-wrap td {
  font-size: var(--ds-text-sm);
}

.sc-topbar p,
.stage-grid span,
.platform-dot {
  font-size: var(--ds-text-xs);
}

/* ───────── 4. 视图与页面过渡 ─────────
 * 搜索中心主链路（创建 → 计划 → 进度 → 结果）此前为 display 硬切，
 * 每步瞬闪、缺乏方向感。这里只给「进入」补一个轻微位移淡入；
 * display:none 无法参与过渡，故用动画而非 transition。 */
.view.active {
  animation: ds-view-in var(--ds-duration) var(--ds-ease) both;
}

@keyframes ds-view-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* CRM 外壳路由切换（sparkols_app.js showPage 同样是 display 切换） */
.sparkols-page {
  animation: ds-view-in var(--ds-duration) var(--ds-ease) both;
}

/* ───────── 5. 微交互 ─────────
 * 任务卡、按钮、导航的 hover/active 统一缓动，避免状态跳变。 */
.task-card,
.task-tabs button,
.platforms button,
.primary-btn,
.secondary-btn,
.danger-btn,
.icon-btn,
.home-nav-item {
  transition:
    background-color var(--ds-duration-fast) var(--ds-ease),
    border-color var(--ds-duration-fast) var(--ds-ease),
    color var(--ds-duration-fast) var(--ds-ease),
    box-shadow var(--ds-duration-fast) var(--ds-ease);
}

/* 任务面板抽屉此前无过渡，展开收起是瞬移 */
.sc-tasks {
  transition: transform var(--ds-duration) var(--ds-ease);
}

.task-panel-backdrop {
  transition: opacity var(--ds-duration) var(--ds-ease);
}

/* 主按钮按下反馈，让「开始搜索」「提报」这类关键动作有确认感 */
.primary-btn:active:not(:disabled),
.secondary-btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* ───────── 6. 焦点可见性 ─────────
 * 统一键盘焦点环，保证在深色侧栏与浅色内容区都可见。 */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* ───────── 7. 圆角收敛 ─────────
 * 原有 43 种圆角。此处只统一最常见的容器层级，
 * 不动 50% / pill 这类语义明确的值。 */
.card,
.task-card,
.advanced,
.intent-box {
  border-radius: var(--ds-radius);
}

/* ───────── 8. 宽表最小宽度 ─────────
 * `.sparkols-table-wrap` 已经是 `overflow-x: auto`，但 `.sparkols-table`
 * 只有 `width: 100%` 而没有 min-width（home.css:2210）。容器变窄时浏览器
 * 不会触发横向滚动，而是把列一路压缩：线索池的「红人信息」被压到只剩
 * 一个字，「来源」变成逐字竖排，行高从 53px 涨到 104px。
 *
 * 给没有自带宽度约束的宽表补一个下限，让容器改为横向滚动。
 * 已自行声明 min-width 的表通过 :not() 排除，避免把它们的值改小。 */
.sparkols-table-wrap > .sparkols-table:not(.sparkols-influencer-pool-table--compact):not(.sparkols-review-compact-table):not(.sparkols-progress-grouped-table):not(.sparkols-table--wide) {
  min-width: 980px;
}

/* 公共线索表列数较多，不能把红人名称压缩成单个字符。空间不足时由外层
 * `.sparkols-table-wrap` 横向滚动，红人信息列始终保留头像、名称和邮箱。 */
.sparkols-table-wrap > .sparkols-leads-table--public {
  min-width: 1930px;
}

.sparkols-table-wrap > .sparkols-leads-table:not(.sparkols-leads-table--public) {
  min-width: 1150px;
}

.sparkols-leads-table .sparkols-lead-person-col {
  width: 240px;
  min-width: 240px;
}

.sparkols-leads-table .sparkols-lead-person-col .sparkols-person-main {
  max-width: 190px;
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .sparkols-page {
    animation: none;
  }

  .primary-btn:active:not(:disabled),
  .secondary-btn:active:not(:disabled) {
    transform: none;
  }
}

/* ───────── 9. 红人池归属提示 ─────────
 * BD 只看自己跟进的红人；Brief 推荐没有同样的归属过滤，用户可能在那里
 * 看到别人的红人。这里用弱化样式说明差额，避免被当成搜索故障。 */
.influencer-pool-scope-hint {
  margin-left: var(--ds-space-2);
  color: var(--ds-muted);
  font-style: normal;
}

.influencer-pool-scope-empty {
  color: var(--ds-muted);
}

/* ───────── 10. 任务发送状态徽标 ─────────
 * 新增三种状态：未发送（灰）/ 发送中（品牌色）/ 部分已发（琥珀）。
 * 沿用 .task-mail-sent / .task-mail-pending 的尺寸与圆角，只补色。 */
.task-mail-none,
.task-mail-sending,
.task-mail-partial {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ds-space-1);
  padding: 2px 7px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 未发送：明确区别于「没数据」，不用彩色抢注意力 */
.task-mail-none {
  border: 1px solid var(--ds-line);
  background: var(--ds-soft);
  color: var(--ds-muted);
}

.task-mail-sending {
  border: 1px solid var(--ds-brand);
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
}

/* 已发但未覆盖全部可发邮箱 */
.task-mail-partial {
  border: 1px solid var(--ds-amber);
  background: var(--ds-amber-soft);
  color: var(--ds-amber);
}

.task-mail-badges .task-mail-none,
.task-mail-badges .task-mail-sending,
.task-mail-badges .task-mail-partial {
  margin-left: 0;
}

/* ───────── 11. 发信记录页 ─────────
 * 三处结构性问题：① 8 个指标同权重平铺，看不出主次；② 去重跳过与真失败
 * 都用红色呈现，但跳过是规则按预期拦截；③ 进度条把「跳过」算成完成，
 * 导致「总数 1 / 成功 0 / 跳过 1」被画成 100% 全绿。 */

/* 主指标：成功率 + 绝对值 */
.sparkols-mail-record-total-lead {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  padding: var(--ds-space-2) 0 var(--ds-space-3);
}

.sparkols-mail-record-total-primary small {
  display: block;
  color: var(--ds-muted);
  font-size: var(--ds-text-xs);
}

.sparkols-mail-record-total-primary strong {
  font-size: var(--ds-text-2xl);
  font-weight: 700;
  color: var(--ds-text);
  line-height: 1.1;
}

.sparkols-mail-record-total-ratio {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}

.sparkols-mail-record-total-ratio b {
  color: var(--ds-text);
  font-weight: 700;
}

/* 次级指标：默认中性，只有异常项着色 */
.sparkols-mail-record-total-grid.is-secondary {
  border-top: 1px solid var(--ds-line);
  padding-top: var(--ds-space-3);
}

.sparkols-mail-record-total-grid.is-secondary strong {
  font-size: var(--ds-text-md);
  color: var(--ds-text-secondary);
}

.sparkols-mail-record-total-grid.is-secondary .is-danger strong {
  color: var(--ds-red);
}

.sparkols-mail-record-total-grid.is-secondary .is-warn strong {
  color: var(--ds-amber);
}

/* 全部被去重跳过：中性色，不是失败 */
.sparkols-mail-record-status.is-muted {
  border-color: var(--ds-line);
  background: var(--ds-soft);
  color: var(--ds-muted);
}

/* 跳过提示降级：不再是红底红字的错误块 */
.sparkols-mail-record-task-error.is-skipped {
  border-color: var(--ds-line);
  background: var(--ds-soft);
}

.sparkols-mail-record-task-error.is-skipped strong,
.sparkols-mail-record-task-error.is-skipped span,
.sparkols-mail-record-task-error.is-skipped small {
  color: var(--ds-muted);
}

/* 进度条三段：成功绿 / 失败红 / 跳过灰 */
.sparkols-mail-record-task-progress span.is-segmented {
  display: flex;
  overflow: hidden;
}

.sparkols-mail-record-task-progress span.is-segmented > i {
  display: block;
  height: 100%;
}

.sparkols-mail-record-task-progress span.is-segmented > i.is-sent {
  background: var(--ds-green);
}

.sparkols-mail-record-task-progress span.is-segmented > i.is-failed {
  background: var(--ds-red);
}

.sparkols-mail-record-task-progress span.is-segmented > i.is-skipped {
  background: var(--ds-line-strong);
}

/* ───────── 12. 模板设置页骨架屏 ─────────
 * 此前加载态是「正在读取…」文字，且详情区直接放了一个空状态卡片，
 * 里面还有第二个「新建模板组」按钮（与右上角主按钮重复且样式不同）。
 * 改为骨架屏：首屏就能看出结构，也不再出现重复入口。 */
.sparkols-template-skeleton {
  display: grid;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) 0;
}

.sparkols-template-skeleton > i {
  display: block;
  height: 44px;
  border-radius: var(--ds-radius);
  background: linear-gradient(90deg, var(--ds-soft) 25%, #eef1f5 37%, var(--ds-soft) 63%);
  background-size: 400% 100%;
  animation: ds-skeleton 1.4s ease infinite;
}

.sparkols-template-skeleton.is-panel > i {
  height: 18px;
}

.sparkols-template-skeleton.is-panel > i.is-title {
  height: 26px;
  width: 42%;
}

.sparkols-template-skeleton.is-panel > i.is-short {
  width: 64%;
}

@keyframes ds-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sparkols-template-skeleton > i {
    animation: none;
  }
}