/*
 * thread-tools.css — 工具行 / 思考块 / 结果折叠体样式（INTERACT-SPEC §2.11 Q6；第 26 轮 Q6b 同步到 thread-tools.js 当前实现）
 * 全部 tt- 前缀，与 styles.css 现有 .tool-row/.result-row/.result-body 零冲突。初始视图不含任何 .tt-* 节点 → 像素基线不受影响。
 * 证据编号 [E#] 与 js/modules/thread-tools.js 顶部注释一致：
 *   [E4] 6 点 loader 全套 CSS/keyframes = HOST-EVIDENCE-2 §2.4（逐字）；点色 #929292 = ref/host-dotloader-6x.png
 *   [E5] CircleCheck 14×14 #00834d（--color-green-a11）= HOST-EVIDENCE-2 §2.2/§4.4 + ref/host-doneicon-6x.png（抗锯齿 #45885c）
 *   [E6] error #c00900cf（--color-red-a11 = .codex-tool__bullet--failed）= dtcoder-glass-react.css
 *   [E7] 结果体 #f6f7f8（SPEC §2.11/HEADLESS-EVENTS §5-4）；radius-6 / padding 8px 12px / margin-top 8px / max-height 320 = .tool-result-disclosure__body/__scroll；
 *        正文 mono 12px lh1.2 pre-wrap = .codex-tool__output-line
 *   [E8] chevron 16px 槽 / transform .15s ease / rotate(90deg) = .expandIcon/.expandIconRotated；工具行 chevron 默认 opacity 0 hover 120ms = .codex-tool__header--toggle .codex-tool__chevron
 *   [E9] 行：14px / 600 / lh 1.2 / #0000007d(--process-status-fg) / hover → #202020 = .process-header-row/.process-header-toggle；思考块标题 500 = .message-list-thinking-disclosure .process-header-toggle
 *   [E10] 思考正文 14px/400/#0000007d = .thinking-adapter__text；灰底 #0000000d（--task-card-bg→--color-gray-a3）
 * 复刻侧保留：行间距 margin-top 16px / 相邻 8px 沿用 styles.css .tool-row 既有节奏（win.png 实测，HANDOFF §3.3）。
 */

/* ---------- 0) 公共：图标 / chevron [E8] ---------- */
/* Q28①：折叠动效 [E12] —— grid 行高 auto 0fr → auto 1fr，220ms ease；体 opacity 120ms；reduced-motion 关闭 */
.tt-think, .tt-result, .tt-tool-row {
  display: grid; grid-template-columns: 100%; grid-template-rows: auto 0fr;
  transition: grid-template-rows .22s ease;
}
.tt-think[data-open="true"], .tt-result[data-open="true"], .tt-tool-row[data-open="true"] { grid-template-rows: auto 1fr; }
.tt-think-body, .tt-result-body, .tt-tool-body {
  overflow: hidden; min-height: 0; opacity: 0;
  transition: opacity .12s ease;
}
[data-open="true"] > .tt-think-body, [data-open="true"] > .tt-result-body, [data-open="true"] > .tt-tool-body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tt-think, .tt-result, .tt-tool-row, .tt-think-body, .tt-result-body, .tt-tool-body { transition: none; }
}

.tt-ic { display: block; width: 14px; height: 14px; }
.tt-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; min-width: 16px; height: 16px; flex: none;
  color: rgba(0, 0, 0, .58);                 /* color-mix(foreground 58%) */
  transition: transform .15s ease;
}
.tt-chevron .tt-ic { width: 12px; height: 12px; }
.tt-chevron-open, [data-open="true"] > .tt-think-head > .tt-chevron, [data-open="true"] > .tt-result-head > .tt-chevron,
.tt-tool-row[data-open="true"] > .tt-tool-head > .tt-chevron { transform: rotate(90deg); }

/* ---------- 0) 公共：6 点 loader [E4]（HOST-EVIDENCE-2 §2.4 逐字，类名前缀 tt-） ---------- */
.tt-dot-loader { display: inline-grid; grid-template-columns: repeat(2, 2px); grid-template-rows: repeat(3, 2px); column-gap: 2px; row-gap: 2px; place-content: center; width: 14px; height: 14px; color: currentColor; pointer-events: none; }
.tt-dot-loader__dot { display: block; width: 2px; height: 2px; border-radius: 50%; background-color: currentColor; opacity: 0; transform: translateY(-4px); animation: tt-dot-cycle 1820ms infinite; animation-timing-function: steps(6, jump-none); }
.tt-dot-loader__dot:nth-child(1) { animation-delay: 520ms; }
.tt-dot-loader__dot:nth-child(2) { animation-delay: 650ms; }
.tt-dot-loader__dot:nth-child(3) { animation-delay: 260ms; }
.tt-dot-loader__dot:nth-child(4) { animation-delay: 390ms; }
.tt-dot-loader__dot:nth-child(5) { animation-name: tt-dot-cycle-long; }
.tt-dot-loader__dot:nth-child(6) { animation-name: tt-dot-cycle-short; animation-delay: 130ms; }
@keyframes tt-dot-cycle       { 0% { opacity: 0; transform: translateY(-4px); } 9.34%, 57.14% { opacity: 1; transform: translateY(0); } 66.48%, 100% { opacity: 0; transform: translateY(7px); } }
@keyframes tt-dot-cycle-long  { 0% { opacity: 0; transform: translateY(-4px); } 9.34%, 64.29% { opacity: 1; transform: translateY(0); } 73.63%, 100% { opacity: 0; transform: translateY(7px); } }
@keyframes tt-dot-cycle-short { 0% { opacity: 0; transform: translateY(-4px); } 9.34%, 50%    { opacity: 1; transform: translateY(0); } 59.34%, 100% { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .tt-dot-loader__dot { animation: none; opacity: 1; transform: translateY(0); } }

/* ---------- 1) 工具聚合行「已运行 N 条命令」[E1][E3][E9] ---------- */
.tt-tool-row {
  font-size: var(--type-body-size);  font-weight: 600;
  color: rgba(0, 0, 0, .49);                 /* --process-status-fg = --color-gray-a11 #0000007d */
  margin-top: 16px;
  user-select: none; cursor: default;
 line-height: var(--type-body-line); }
.tt-tool-head { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tt-tool-row[data-expandable="true"] > .tt-tool-head { cursor: pointer; }
.tt-tool-row[data-expandable="false"] > .tt-tool-head > .tt-chevron { display: none; }
.tt-tool-row + .tt-tool-row { margin-top: 8px; }
.tt-tool-row > .tt-tool-head:hover { color: #202020; }       /* .process-header-toggle:hover → --foreground */
.tt-tool-row .tt-tool-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
/* Q45③ [E16] 可选类别图标槽（CodexCategoryIcon：16×16, strokeWidth 1.75, color inherit；running 时 shimmer 令图标 opacity .72） */
.tt-tool-row .tt-tool-kind { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; line-height: 0; }
.tt-tool-row .tt-tool-kind .tt-ic { width: 16px; height: 16px; }
.tt-tool-row.tt-state-running .tt-tool-kind { opacity: .72; }
.tt-tool-row .tt-tool-text { overflow: hidden; text-overflow: ellipsis; }
.tt-tool-row .tt-chevron { opacity: 0; transition: opacity 120ms ease, transform .15s ease; }
.tt-tool-row > .tt-tool-head:hover .tt-chevron, .tt-tool-row[data-open="true"] > .tt-tool-head .tt-chevron { opacity: 1; }
/* running：loader 用 --muted-foreground 同色（#0000007d，实测 #929292）[E4] */
.tt-tool-row.tt-state-running .tt-tool-icon { color: rgba(0, 0, 0, .49); }
/* done：CircleCheck 绿 [E5] */
.tt-tool-row.tt-state-done .tt-tool-icon { color: #00834d; }
/* error：图标 + 文字红 [E6] */
.tt-tool-row.tt-state-error,
.tt-tool-row.tt-state-error .tt-tool-icon { color: #c00900cf; }
/* count 递增动画（SPEC §2.11「count 递增动画」；宿主无对应 CSS，复刻侧最小反馈） */
.tt-tool-row.tt-bump .tt-tool-text { animation: tt-count-bump .3s ease; }
@keyframes tt-count-bump { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Q28④ 展开逐条命令 [E15]：.terminal-command-group__items（gap 4px / padding-left 20px）；每条 = 动词 + 命令，无图标，继承字体、500、ellipsis */
.tt-tool-body { font-weight: 400; }
.tt-tool-items { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 0 22px; }
.tt-tool-item { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--type-body-size);  color: rgba(0, 0, 0, .49);  line-height: var(--type-body-line); }
.tt-tool-item-verb { flex: none; font-weight: 500; white-space: nowrap; }          /* .codex-tool__verb */
.tt-tool-item-cmd { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* .codex-tool__invocation（非 mono） */
.tt-tool-item[data-state="error"] .tt-tool-item-verb { color: #c00900cf; }        /* [E13] runFailed 红 */
.tt-tool-item[data-state="running"] .tt-tool-item-verb { color: rgba(0, 0, 0, .49); }
.tt-tool-item:hover { color: #202020; }

/* Q28③ 命令 tooltip [E14]：antd Tooltip 容器（--popover #fcfcfc + --model-selector-tooltip-shadow），5px 12px / radius 8 / 14px；单例、惰性创建 */
.tt-tooltip {
  position: fixed; z-index: 120; pointer-events: none;
  max-width: min(520px, calc(100vw - 24px));
  padding: 5px 12px; border-radius: 8px;
  background: #fcfcfc; color: #1e1e1e;
  border: 1px solid #0000000d;                                  /* 与 .am-menu 同边 */
  box-shadow: 0px 2px 6px -1px #14161c1f, 0px 1px 2px #14161c14;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--type-caption-size); 
  white-space: pre-wrap; word-break: break-all;
  opacity: 0; transition: opacity .1s ease;
 line-height: var(--type-caption-line); }
.tt-tooltip.tt-tooltip-show { opacity: 1; }
.tt-tooltip[hidden] { display: none; }

/* ---------- 2) 思考块「已完成思考」[E2][E9][E10] ---------- */
.tt-think { margin-top: 12px; }
.tt-think-head {
  display: flex; align-items: center; gap: 4px;
  width: fit-content; max-width: 100%;
  font: inherit; font-size: var(--type-body-size);  font-weight: 500;   /* thinking-disclosure → medium */
  color: rgba(0, 0, 0, .49);
  background: transparent; border: 0; padding: 0; cursor: pointer; user-select: none; text-align: left;
 line-height: var(--type-body-line); }
.tt-think-head:hover, .tt-think-head:hover .tt-chevron { color: #202020; }
.tt-think-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Q45① [E17] 展开态 = 宿主 .message-list-thinking-shell（L4542，N9 Q40 经 Leader 转交；像素未取证——宿主无展开态可截）：
   无底色 / margin 8px 0 0 / padding-left 20px / max-height 240 overflow-y auto / gray-a11 / 非 mono 14px lh1.2 500 */
.tt-think-body {
  margin: 8px 0 0;
  padding: 0 0 0 20px;
  background: transparent;
  border-radius: 0;
  max-height: 240px;
  font-family: inherit;                      /* --dtcoder-font-family（非 mono） */
  font-size: var(--type-body-size);  font-weight: 500;
  color: rgba(0, 0, 0, .49);                 /* --thinking-part-fg → --color-gray-text-secondary → gray-a11 #0000007d */
  white-space: pre-wrap; word-break: break-word; user-select: text;
 line-height: var(--type-body-line); }
/* 展开态才允许纵向滚动；收起态由 grid 0fr + overflow hidden 承担动效（[E12]） */
.tt-think[data-open="true"] > .tt-think-body { overflow-y: auto; }
/* [E17] 行内 code：thinking-fg + --color-gray-control-fill-tag（gray-4 #e8e8e8）；p/h/li 紧凑间距（正文由调用方以 Markdown 注入时生效） */
.tt-think-body code:not(pre code) { color: inherit; background: #e8e8e8; border-radius: 4px; padding: 0 4px; }
.tt-think-body p { margin: 0; white-space: normal; }
.tt-think-body :where(h1, h2, h3, h4, h5, h6) { margin: 4px 0 2px; line-height: 1.2; }
.tt-think-body :where(ol, ul) { margin: 2px 0; }
.tt-think-body li { margin: 0 0 1px; }
/* 收起态：外边距归零让 0fr 行真正为 0 高（padding/margin 不参与 fr 计算时会撑高） */
.tt-think[data-open="false"] > .tt-think-body { margin-top: 0; padding-top: 0; padding-bottom: 0; }

/* ---------- 3) 结果行折叠体「结果 ▸」[E6][E7][E8] ---------- */
.tt-result { margin-top: 8px; }
.tt-result-head {
  display: flex; align-items: center; gap: 4px;
  width: fit-content; max-width: 100%;
  font: inherit; font-size: var(--type-caption-size);           /* .tool-result-disclosure → --font-size-sm */
  color: rgba(0, 0, 0, .49);                                 /* --vscode-descriptionForeground → --muted-foreground */
  background: transparent; border: 0; padding: 0; cursor: pointer; user-select: none; text-align: left;
 line-height: var(--type-caption-line); }
.tt-result-head:hover, .tt-result-head:hover .tt-chevron { color: #202020; }
.tt-result-body {
  position: relative; min-width: 0;
  margin: 8px 0 0 16px;
  padding: 8px 12px;
  background: #f6f7f8;
  border-radius: 6px;
}
.tt-result[data-open="false"] > .tt-result-body { margin-top: 0; padding-top: 0; padding-bottom: 0; }
.tt-tool-row[data-open="false"] > .tt-tool-body > .tt-tool-items { padding-top: 0; }
.tt-result-scroll { max-height: 320px; overflow: auto; }
.tt-result-pre {
  margin: 0;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--type-caption-size);  font-weight: 400;
  color: rgba(0, 0, 0, .58);                 /* .codex-tool__output-line color-mix(foreground 58%) */
  white-space: pre-wrap; word-break: break-word; user-select: text;
 line-height: var(--type-caption-line); }
.tt-result-trunc { margin-top: 4px; font-size: var(--type-caption-size);  color: rgba(0, 0, 0, .49);  line-height: var(--type-caption-line); }  /* codexTool.truncatedCharCount 提示 */
.tt-result-trunc[hidden] { display: none; }
/* error [E6][E13]：标题「运行失败」+ 正文 #c00900cf；红色左边条 2px（底色保持 #f6f7f8） */
.tt-result.tt-error .tt-result-head,
.tt-result.tt-error .tt-result-head .tt-chevron,
.tt-result.tt-error .tt-result-pre { color: #c00900cf; }
.tt-result.tt-error .tt-result-body { border-left: 2px solid #c00900cf; border-radius: 0 6px 6px 0; padding-left: 10px; }