/* ==========================================================================
   dsh-toolrow.css — 工具调用行的展示样式
   ==========================================================================

   【代码来源与许可】
   本文件的 CSS 移植自 DeepSeek Harness（DSH）Web 客户端的工具展示层：

     包        @deepseek-ai/dsh-client-ui-tool
     文件      lib/client.js
     组件      ToolRow  →  ToolRow.module.css
     许可      MIT License, Copyright (c) 2026 DeepSeek

   移植方式：保留 DSH 原有的布局规则、尺寸、动效与状态语义，
   仅把哈希类名（o3BgMG_root 等）重命名为可读的 dsht-* 前缀，
   并把 DSH 的设计令牌（--dsw-*）按原值一并带过来（见下方 :root）。

   为什么单独一个文件：出处清楚、可对照、可随上游更新，
   也不和项目自己的 chat.css 互相覆盖。

   ---------------------------------------------------------------------------
   DSH 这一套最值得抄的地方，是它的【折叠/展开分层】：

     折叠态 = 图标 + 名称 + 摘要 + 状态点，一行，不抢注意力
     展开态 = 才显示【参数 JSON】和【输出】两块

   它还有一个运行中的扫光动效（sweep）——一行浅色高光从左到右扫过，
   表示"这次调用正在进行"。颜色和状态点都是纯视觉信号，所以 DSH 额外
   配了一段视觉隐藏的状态文本给读屏软件（visuallyHidden）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   DSH 的令牌是两层：static 是原始色板，alias 是语义别名。
   下面取的是 DSH 深色主题（body[data-ds-dark-theme]）的值，
   与本项目原有的深色界面匹配。浅色主题的对应值见 DSH ui-theme 包。
   -------------------------------------------------------------------------- */
:root {
  /* --- static 原始色板（只列本文件用到的） --- */
  --dsw-static-neutral-bluish-00: #fff;
  --dsw-static-neutral-bluish-50: #f9fafb;
  --dsw-static-neutral-bluish-75: #f1f3f5;
  --dsw-static-neutral-bluish-300: #cfd3d6;
  --dsw-static-neutral-bluish-400: #adb2b8;
  --dsw-static-neutral-bluish-600: #81858c;
  --dsw-static-neutral-bluish-700: #61666b;
  --dsw-static-neutral-bluish-750: #43454a;
  --dsw-static-neutral-bluish-800: #353638;
  --dsw-static-neutral-bluish-850: #2c2c2e;
  --dsw-static-neutral-bluish-875: #232324;
  --dsw-static-neutral-bluish-900: #1b1b1c;
  --dsw-static-neutral-bluish-950: #151517;
  --dsw-static-neutral-bluish-1000: #0f1115;
  --dsw-static-deepseek-400: #679efe;
  --dsw-static-deepseek-500: #4176e6;
  --dsw-static-deepseek-800: #34415b;
  --dsw-static-green-400: #4ed17e;
  --dsw-static-green-500: #22c55e;
  --dsw-static-red-400: #f25a5a;
  --dsw-static-amber-400: #f7ad31;
  --dsw-static-amber-500: #f59e0b;
  --dsw-static-amber-600: #dd8629;

  /* --- alias 语义别名（深色主题） --- */
  --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-950);
  --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-875);
  --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-850);
  --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-800);
  --dsw-alias-border-l1: #ffffff0f;
  --dsw-alias-border-l2: #ffffff1f;
  --dsw-alias-border-l3: #ffffff29;
  --dsw-alias-border-l4: #fff3;
  --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-50);
  --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-300);
  --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-400);
  --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-600);
  --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-900);
  --dsw-alias-interactive-bg-hover: #ffffff14;
  --dsw-alias-interactive-bg-hover-solid: var(--dsw-static-neutral-bluish-800);
  --dsw-alias-state-business-primary: var(--dsw-static-deepseek-400);
  --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-800);
  --dsw-alias-state-success-primary: var(--dsw-static-green-500);
  --dsw-alias-state-error-primary: var(--dsw-static-red-400);
  --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
  --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
}

/* --------------------------------------------------------------------------
   2. 状态点（DSH 的 StateDot）
   DSH 注释原话："colors self-supplied via StateDot (design gives none)"
   即状态颜色由组件自己给，不来自设计令牌的某个统一项。
   对应关系来自 DSH ToolRow 的 leadingFor()：
     error   → state/error
     stopped → state/warn
   running 用业务蓝，ok 用成功绿（后者是本项目补的，DSH 在 ok 态改用图标而非圆点）
   -------------------------------------------------------------------------- */
.dsht-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: none; display: inline-block;
}
.dsht-dot[data-state="running"] {
  background: var(--dsw-alias-state-business-primary);
  animation: dsht-dot-pulse 1.2s ease-in-out infinite;
}
.dsht-dot[data-state="ok"] { background: var(--dsw-alias-state-success-primary); }
.dsht-dot[data-state="error"] { background: var(--dsw-alias-state-error-primary); }
.dsht-dot[data-state="warning"] { background: var(--dsw-alias-state-warn-primary); }

@keyframes dsht-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* --------------------------------------------------------------------------
   3. 工具行（移植自 ToolRow.module.css）
   -------------------------------------------------------------------------- */
.dsht-root { flex-direction: column; display: flex; }

/* 行本体。DSH 让它是 position:relative + overflow:hidden，
   这样扫光条可以贴着行内滑动而不溢出。 */
.dsht-row {
  position: relative; overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
}
.dsht-row:hover { background: var(--dsw-alias-interactive-bg-hover); }

/* 运行中的扫光：DSH 原有的动效，一行浅色高光自左向右扫过 */
.dsht-root[data-state="running"] .dsht-row::after {
  content: "";
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
  width: 300px;
  animation: 2.6s ease-out infinite dsht-sweep;
  position: absolute; top: 0; bottom: 0; left: 0;
}
@keyframes dsht-sweep {
  0% { left: -300px; }
  90%, to { left: 100%; }
}

/* 行内布局：图标 / 标题 / 摘要 / 箭头。
   DSH 的这段由 DisclosureRow 提供，这里按同样的结构自己实现。 */
.dsht-rowInner {
  display: flex; align-items: center;
  gap: 0; min-height: 32px; padding: 4px 8px;
  position: relative; z-index: 1;
}

.dsht-leading { flex-shrink: 0; display: inline-flex; align-items: center; width: 16px; }
.dsht-title { font-weight: 400; color: var(--dsw-alias-label-primary); font-size: 13px; white-space: nowrap; }
.dsht-chevron { color: var(--dsw-alias-label-secondary); flex: none; margin-left: 6px; font-size: 10px; transition: transform .15s; }
.dsht-root[data-open="1"] .dsht-chevron { transform: rotate(90deg); }

/* 标题与摘要之间的 2px 小圆点分隔符 */
.dsht-sep {
  background: var(--dsw-alias-label-caption);
  border-radius: 1px; flex: none;
  width: 2px; height: 2px; margin: 0 8px;
}

.dsht-summary {
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  font-size: 13px; line-height: 24px;
  color: var(--dsw-alias-label-tertiary);
  flex: auto; overflow: hidden;
}
.dsht-summarySuffix {
  white-space: nowrap; font-size: 13px; line-height: 24px;
  color: var(--dsw-alias-label-tertiary);
  flex: none; margin-left: 4px;
}
.dsht-errorSummary { color: var(--dsw-alias-state-error-primary); }

/* 展开体 */
.dsht-bodyWrap { flex-direction: column; display: flex; }
.dsht-bodyScroll { max-height: 260px; overflow-y: auto; }

/* 参数 / 输出卡片：左侧标签 + 右侧内容的两列栅格 */
.dsht-ioCard {
  border: .5px solid var(--dsw-alias-border-l1);
  background: var(--dsw-alias-markdown-code-block);
  border-radius: 12px;
  flex-direction: column; margin: 4px 0 4px 4px;
  display: flex;
}
.dsht-ioSection {
  grid-template-columns: max-content 1fr;
  align-items: baseline; column-gap: 14px;
  max-height: 150px; padding: 12px 16px;
  display: grid; overflow-y: auto;
}
.dsht-ioSection::-webkit-scrollbar-thumb {
  background-clip: padding-box; border: 2px solid #0000; border-radius: 6px;
}
.dsht-ioSection::-webkit-scrollbar-track { margin: 6px 0; }
.dsht-ioLabel {
  color: var(--dsw-alias-label-caption);
  align-self: start; position: sticky; top: 0;
  font-size: 11px; white-space: nowrap;
}
.dsht-ioDivider { background: var(--dsw-alias-border-l2); flex: none; height: .5px; }
.dsht-ioText {
  white-space: pre-wrap; word-break: break-word; min-width: 0;
  color: var(--dsw-alias-label-secondary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.6;
}
.dsht-ioText[data-error] { color: var(--dsw-alias-state-error-primary); }

/* 屏幕阅读器专用：扫光和状态点都是纯视觉信号，读屏软件需要这段文字 */
.dsht-visuallyHidden {
  clip: rect(0 0 0 0); white-space: nowrap;
  width: 1px; height: 1px; position: absolute; overflow: hidden;
}

/* 工具行内的牌面缩略图 */
.dsht-cards { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 8px 4px; }
.dsht-cards img {
  width: 34px; border-radius: 4px; background: #fff;
  border: 1px solid var(--dsw-alias-border-l2);
}

/* --------------------------------------------------------------------------
   4. 轮次时间线
   这是本项目自己的组件（DSH 的对话流没有对应的"轮次"概念），
   但沿用同一套令牌，保证和上面的工具行是同一个视觉语言。
   -------------------------------------------------------------------------- */
.ar {
  margin-top: 12px;
  border: .5px solid var(--dsw-alias-border-l2);
  border-radius: 12px;
  background: var(--dsw-alias-bg-layer-1);
  overflow: hidden;
}

.ar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-bottom: .5px solid var(--dsw-alias-border-l2);
  font-size: 12px; color: var(--dsw-alias-label-secondary);
  cursor: pointer; user-select: none;
}
.ar-head:hover { background: var(--dsw-alias-interactive-bg-hover); }
.ar-head .dsht-chevron { margin-left: auto; }
.ar[data-open="1"] .ar-head .dsht-chevron { transform: rotate(90deg); }
.ar-title { color: var(--dsw-alias-label-primary); font-weight: 500; }
.ar-count { color: var(--dsw-alias-label-caption); }

.ar-rounds { list-style: none; margin: 0; padding: 8px 12px 12px; }
.ar:not([data-open="1"]) .ar-rounds { display: none; }

.ar-round {
  position: relative;
  padding: 0 0 4px 26px;
}
/* 竖线：最后一个节点不画，避免尾巴拖出来 */
.ar-round::before {
  content: ""; position: absolute;
  left: 8px; top: 20px; bottom: -4px; width: 1px;
  background: var(--dsw-alias-border-l3);
}
.ar-round:last-child::before { display: none; }

/* 轮次序号节点 */
.ar-node {
  position: absolute; left: 0; top: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  background: var(--dsw-alias-bg-layer-3);
  color: var(--dsw-alias-label-secondary);
  border: .5px solid var(--dsw-alias-border-l3);
}
.ar-round[data-stage="classify"] .ar-node { color: var(--dsw-alias-state-business-primary); }
.ar-round[data-stage="review"] .ar-node { color: var(--dsw-alias-state-warn-primary); }
.ar-round[data-stage="answer"] .ar-node { color: var(--dsw-alias-state-success-primary); }
.ar-round[data-state="running"] .ar-node {
  border-color: var(--dsw-alias-state-business-primary);
  color: var(--dsw-alias-state-business-primary);
  animation: dsht-dot-pulse 1.2s ease-in-out infinite;
}

.ar-line {
  display: flex; align-items: center; gap: 8px;
  min-height: 24px; font-size: 12.5px;
}
.ar-label { color: var(--dsw-alias-label-primary); }
.ar-ms {
  margin-left: auto; color: var(--dsw-alias-label-caption);
  font-variant-numeric: tabular-nums; font-size: 11px;
}

/* 复核结论、分类结论这类"判定"徽章 */
.ar-verdict {
  font-size: 11px; line-height: 16px;
  padding: 1px 7px; border-radius: 999px;
  border: .5px solid var(--dsw-alias-border-l3);
  color: var(--dsw-alias-label-tertiary);
  white-space: nowrap;
}
.ar-verdict[data-tone="kb"] {
  color: var(--dsw-alias-state-business-primary);
  border-color: var(--dsw-alias-state-business-tertiary);
}
.ar-verdict[data-tone="chat"] { color: var(--dsw-alias-label-tertiary); }
.ar-verdict[data-tone="offtopic"] { color: var(--dsw-alias-state-warn-label); }
.ar-verdict[data-tone="sufficient"] { color: var(--dsw-alias-state-success-primary); }
.ar-verdict[data-tone="insufficient"] { color: var(--dsw-alias-state-warn-primary); }
.ar-verdict[data-tone="error"] { color: var(--dsw-alias-state-error-primary); }

.ar-note {
  font-size: 11px; color: var(--dsw-alias-label-caption);
  padding: 0 0 4px 0;
}

/* 归属某一轮的工具调用 */
.ar-tools { margin: 2px 0 6px; display: flex; flex-direction: column; gap: 1px; }
.ar-tools:empty { display: none; }

/* 「系统强制」与「模型自主」的区分标记 —— 契约透明的一部分 */
.ar-by {
  font-size: 10px; line-height: 15px;
  padding: 0 5px; border-radius: 4px;
  border: .5px solid var(--dsw-alias-border-l3);
  color: var(--dsw-alias-label-caption);
  white-space: nowrap;
}
.ar-by[data-forced="1"] {
  color: var(--dsw-alias-state-warn-label);
  border-color: var(--dsw-alias-state-warn-primary);
}