/**
 * AI 回答里的工具执行过程
 *
 * 折叠规则与 .ai-reasoning-panel 同构（chevron 旋转 + body display:none）。
 *
 * 视觉上是**弱提示**而不是卡片：无边框、无底色，就是一行灰字加一个箭头。
 * 工具调用是过程而不是结论——用户真正要看的是下面那段回答，过程只在出问题时
 * 才需要展开。做成一张张带框的卡片会把注意力从答案上抢走，一轮调三次就占掉半屏。
 * 出错时才用颜色把它拎出来。
 */

.ai-tool-panel {
    display: flex;
    flex-direction: column;
    /* 弱提示就该挨着排：行与行之间再留空隙，三行下来又变回一组「卡片」的观感 */
    gap: 0;
    margin-bottom: 8px;
}

.ai-tool-call {
    color: var(--text-secondary, #6b7280);
    font-size: 0.78rem;
}

/*
 * 调用多了（> 5 次）整组折叠：顶上一行汇总，下面只露最后一条（正在跑的那一次）。
 * 汇总行与卡片标题行同一副弱提示的面孔，只是右侧多一个「展开其余 N 次」
 */
.ai-tool-calls--folded > .ai-tool-call:not(.ai-tool-call--latest) {
    display: none;
}

.ai-tool-fold {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 0;
    padding: 1px 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.ai-tool-fold:hover {
    opacity: 1;
}

.ai-tool-fold-chevron {
    display: flex;
    align-items: center;
    height: 1.5em;
    font-size: 0.9em;
    transition: transform 0.2s ease;
}

.ai-tool-calls--folded > .ai-tool-fold .ai-tool-fold-chevron {
    transform: rotate(-90deg);
}

.ai-tool-fold-summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-tool-fold-failed {
    color: var(--color-error);
}

.ai-tool-fold-action {
    flex-shrink: 0;
    color: var(--kb-accent-strong);
}

.ai-tool-call--error {
    color: #b91c1c;
}

[data-theme="dark"] .ai-tool-call--error,
html.dark .ai-tool-call--error {
    color: #fca5a5;
}

.ai-tool-call-toggle {
    width: 100%;
    min-height: 0;
    padding: 1px 0;
    border: none;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    cursor: pointer;
    /* 常规字重：加粗会把过程行的视觉重量抬到跟正文回答一样 */
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.ai-tool-call-toggle:hover {
    opacity: 1;
}

/*
 * 两个图标各自装进一个「与标题行盒同高」的盒子里再居中。
 *
 * 锁死盒高是为了让箭头与图标彼此对齐，吸收两个字形在 em 盒里的尺寸差异。
 */
.ai-tool-call-chevron,
.ai-tool-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    line-height: 1;
}

.ai-tool-call-chevron {
    flex: 0 0 auto;
    font-size: 0.9em;
    transition: transform 0.2s ease;
}

.ai-tool-call--collapsed .ai-tool-call-chevron {
    transform: rotate(-90deg);
}

.ai-tool-call--collapsed .ai-tool-call-body {
    display: none;
}

/*
 * 只有中间那个图标要下压，箭头保持行盒居中。
 *
 * align-items:center 对齐的是**行盒**，中文的墨迹中心并不落在行盒中心上，所以图标
 * 看着比文字高——补偿量随字体族变化，见 reading-theme.css。
 * 箭头不跟着动：它是个小而对称的字形，眼睛是拿它跟行的整体位置比，不是跟中文的
 * 墨迹重心比；一起下压反而会让箭头显得掉下去。
 *
 * 也不要再回到「给某个字形单独写 top: 1px」那种写法：remixicon 全字库的字形墨迹
 * 中心都精确落在 em 盒正中（基线上方 0.35em，量过），偏移与是哪个字形无关。
 */
.ai-tool-call-icon {
    flex: 0 0 auto;
    font-size: 0.85em;
    position: relative;
    top: var(--kb-icon-optical-shift, 0.06em);
}

/* 展开后的详情紧贴着自己那一行，不要再借行间距分组 */
.ai-tool-call:not(.ai-tool-call--collapsed) {
    padding-bottom: 2px;
}

.ai-tool-call--error .ai-tool-call-icon {
    color: #dc2626;
}

/* 被去重跳过的那一次：既不是成功也不是失败，用弱化色，不抢已真正执行的那几张卡片 */
.ai-tool-call--reused .ai-tool-call-icon,
.ai-tool-call--reused .ai-tool-call-title {
    color: var(--text-muted);
}

.ai-tool-call-title {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-tool-call-duration {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 400;
    opacity: 0.7;
}

/* 展开后才需要一条竖线把细节归到这一行名下 */
.ai-tool-call-body {
    margin: 4px 0 6px;
    padding-left: 8px;
    /* 跟着文字颜色走：深浅两套主题下都能看见，不必各写一遍色值 */
    border-left: 2px solid currentColor;
    border-left-color: color-mix(in srgb, currentColor 28%, transparent);
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/*
 * 参数 / 过程 / 输出三个分组只是给 js 原地更新用的定位容器，
 * 不参与布局：它们的子元素仍由上面的 flex 列与 gap 排。
 */
.ai-tool-call-args,
.ai-tool-call-progress,
.ai-tool-call-output {
    display: contents;
}

.ai-tool-call-section {
    font-weight: 600;
    opacity: 0.75;
}

/*
 * 「查看更多」：服务端把 SSE 里的工具输出裁到 4000 字，点它按需续读剩下的。
 * 用链接按钮的形态而不是实心按钮——它是阅读辅助，不该在视觉上盖过卡片里的内容。
 */
.ai-tool-call-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--kb-accent, #2563eb);
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
}

.ai-tool-call-more:disabled {
    color: var(--kb-control-disabled-text, #6b7280);
    cursor: not-allowed;
    text-decoration: none;
}

/*
 * 代码块自己横向滚动：工具输出常有超长的一行 JSON，
 * 不给 overflow 的话会把整个消息气泡撑宽、连带把聊天区顶出横向滚动条。
 */
.ai-tool-call-code {
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    max-height: 220px;
    overflow: auto;
    overscroll-behavior: contain;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="dark"] .ai-tool-call-code,
html.dark .ai-tool-call-code {
    background: rgba(15, 23, 42, 0.6);
}

.ai-tool-call-code--error {
    color: #b91c1c;
}

[data-theme="dark"] .ai-tool-call-code--error,
html.dark .ai-tool-call-code--error {
    color: #fca5a5;
}

.ai-tool-call-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 160px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-tool-call-step {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    opacity: 0.85;
    word-break: break-word;
}

.ai-tool-call-empty {
    opacity: 0.7;
}