feat(cloud-agent): 云端 Agent - 完善运行时与资源持久化

web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx

@@ -140,33 +140,11 @@ export function AgentChatMessage({
     const displayedText = useTypewriterText(item.text, item.role === "assistant" && isStreaming);
     const color = item.role === "error" ? "#ef4444" : theme.node.text;
     if (item.reasoning) {
-        return (
-            <div className="agent-reasoning" style={{ "--agent-reasoning-accent": theme.accent.primary } as CSSProperties}>
-                <details className={`agent-reasoning-card${item.streaming ? " is-streaming" : ""}`} open={item.streaming || undefined}>
-                    <summary className="agent-reasoning-summary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20">
-                        <span className="agent-reasoning-icon" aria-hidden="true">
-                            <Sparkles className="size-3.5" />
-                        </span>
-                        <span className="agent-reasoning-copy">
-                            <span className="agent-reasoning-title">{item.streaming ? "模型正在思考" : "模型思考"}</span>
-                            <span className="agent-reasoning-subtitle">{item.streaming ? "整理目标与下一步" : "推理摘要"}</span>
-                        </span>
-                        <span className={`agent-reasoning-status${item.streaming ? " is-live" : ""}`}>
-                            {item.streaming ? <span className="agent-reasoning-status-dot" aria-hidden="true" /> : null}
-                            {item.streaming ? "实时" : "查看"}
-                        </span>
-                        <ChevronDown className="agent-reasoning-chevron" aria-hidden="true" />
-                    </summary>
-                    <div className="agent-reasoning-content" data-canvas-wheel-scroll>
-                        <div className="agent-reasoning-text">{item.text || (item.streaming ? "正在整理思路…" : "暂无可展示的推理摘要")}</div>
-                    </div>
-                </details>
-            </div>
-        );
+        return <AgentReasoningFeed items={[item]} theme={theme} />;
     }
     if (isSystem) {
         return (
-            <div className="flex items-start gap-3 text-xs">
+            <div className="agent-status-message flex items-start gap-2 text-xs">
                 <AgentTimelineMarker theme={theme} tone="muted" icon={<Sparkles className="size-3" />} />
                 <div className="min-w-0 flex-1 py-0.5 leading-5" style={{ color: theme.node.muted }}>
                     {item.text}
@@ -185,7 +163,7 @@ export function AgentChatMessage({
     }
     if (item.role === "error") {
         return (
-            <div className="flex items-start gap-3">
+            <div className="agent-status-message flex items-start gap-2">
                 <AgentTimelineMarker theme={theme} tone="error" icon={<CircleAlert className="size-3.5" />} />
                 <div className="min-w-0 flex-1 py-0.5 text-[13px] leading-5">
                     <div className="font-medium" style={{ color }}>
@@ -233,6 +211,42 @@ export function AgentChatMessage({
     );
 }
 
+/**
+ * 推理是辅助信息，不应与正文和工具输出争夺主视觉。一个事件流里的连续摘要
+ * 合并成一个入口，默认收起；需要排查时再展开查看完整内容。
+ */
+export function AgentReasoningFeed({
+    items,
+    theme,
+}: {
+    items: CloudAgentChatMessage[];
+    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
+}) {
+    const streaming = items.some((item) => item.streaming);
+    const text = items.map((item) => item.text.trim()).filter(Boolean).join("\n\n");
+    const countLabel = items.length > 1 ? `${items.length} 段 · ` : "";
+    return (
+        <div className="agent-reasoning" style={{ "--agent-reasoning-accent": theme.accent.primary } as CSSProperties}>
+            <details className={`agent-reasoning-card${streaming ? " is-streaming" : ""}`}>
+                <summary className="agent-reasoning-summary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20">
+                    <span className="agent-reasoning-copy">
+                        <span className="agent-reasoning-title">{streaming ? "模型正在思考" : "模型思考"}</span>
+                        <span className="agent-reasoning-subtitle">{streaming ? "实时整理 · 点击查看" : `${countLabel}点击查看`}</span>
+                    </span>
+                    <span className={`agent-reasoning-status${streaming ? " is-live" : ""}`}>
+                        {streaming ? <span className="agent-reasoning-status-dot" aria-hidden="true" /> : null}
+                        {streaming ? "实时" : "查看"}
+                    </span>
+                    <ChevronDown className="agent-reasoning-chevron" aria-hidden="true" />
+                </summary>
+                <div className="agent-reasoning-content" data-canvas-wheel-scroll>
+                    <div className="agent-reasoning-text">{text || (streaming ? "正在整理思路…" : "暂无可展示的推理摘要")}</div>
+                </div>
+            </details>
+        </div>
+    );
+}
+
 /**
  * Agent SSE events contain text chunks. Keep the full text in the message
  * state, but reveal one code point at a time so a chunk never appears as a
@@ -348,7 +362,7 @@ export function AgentPendingToolCard({ summary, detail, theme, onReject, onAppro
     const impact = agentImpactFromDetail(detail);
     const friendlySummary = friendlyAgentToolSummary(agentToolName("", detail), summary, detail, true);
     return (
-        <div className="flex items-start gap-3">
+        <div className="agent-status-message flex items-start gap-2">
             <AgentTimelineMarker theme={theme} tone="approval" icon={<CircleAlert className="size-3.5" />} />
             <div className="agent-pending-tool min-w-0 flex-1 rounded-lg border py-2 pl-3 pr-3" style={{ borderColor: "rgba(249,115,22,.22)", background: "rgba(249,115,22,.05)", color: theme.node.text }}>
                 <div className="flex items-start gap-3">
@@ -462,7 +476,7 @@ export function AgentToolCard({
         return (
             <details data-agent-tool-retry className="min-w-0 flex-1 text-xs leading-5" style={{ color: theme.node.muted }}>
                 <summary className="cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-2" style={{ outlineColor: theme.node.muted }}>
-                    {label} · {retry.attempt}/{retry.maxAttempts} 次尝试未通过
+                    {retry.status === "recovered" ? `${label} · 已恢复` : `${label} · ${retry.attempt}/${retry.maxAttempts} 次尝试未通过`}
                 </summary>
                 <ol className="mt-2 space-y-1 pl-4" aria-label="自动纠正详情">
                     {(attempts as AgentToolRetryAttempt[]).map((attempt, index) => (
@@ -567,7 +581,9 @@ export function AgentOperationFeed({
     const category = agentOperationCategory(latest);
     const categoryLabel = agentToolCategoryLabel(agentToolName(latest.title || "工具执行", latest.detail), category);
     const label = agentOperationSegmentLabel(items);
-    const failed = items.some((item) => agentOperationFailed(item));
+    // 只看最新一步的状态。前面的参数错误如果已被自动纠正，不应让整段
+    // 操作流继续保持红色并默认展开，否则用户会误以为最终动作仍然失败。
+    const failed = agentOperationFailed(latest);
     const expanded = userExpanded ?? failed;
     const shimmering = live && !failed;
     return (
@@ -581,8 +597,7 @@ export function AgentOperationFeed({
                 aria-label={`${expanded ? "收起" : "展开"} ${items.length} 步${categoryLabel}记录，最新一步：${label}`}
                 onClick={() => setUserExpanded(!expanded)}
             >
-                <span className="agent-tool-category">
-                    {agentToolCategoryIcon(category)}
+                <span className="agent-operation-kind">
                     <span>{categoryLabel}</span>
                 </span>
                 {/* 换步时旧文案高模糊淡出、新文案从下方上浮（先快后慢的非线性曲线）。 */}
@@ -1237,7 +1252,7 @@ function AgentTimelineMarker({ theme, tone, icon }: { theme: (typeof canvasTheme
     const color = tone === "error" ? "#ef4444" : tone === "approval" ? "#f97316" : tone === "agent" ? theme.accent.primary : theme.node.muted;
     return (
         <span className="agent-timeline-marker relative" aria-hidden="true">
-            <span className="relative grid size-6 place-items-center rounded-full" style={{ background: tone === "agent" ? theme.accent.primarySoft : theme.node.fill, color }}>
+            <span className="relative grid size-5 place-items-center rounded-full" style={{ background: tone === "agent" ? theme.accent.primarySoft : theme.node.fill, color }}>
                 {icon}
             </span>
         </span>

web/src/components/canvas/canvas-cloud-agent-panel.tsx

@@ -13,7 +13,6 @@ import { nanoid } from "nanoid";
 import { ModelPicker } from "@/components/model-picker";
 import { FluidOrb } from "@/components/ui/fluid-orb";
 import { cn } from "@/lib/utils";
-import { modelCapabilityConfigFor } from "@/lib/model-capabilities";
 import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
 import { canvasThemes, type CanvasTheme } from "@/lib/canvas-theme";
 import { agentErrorPresentation, agentSubmissionErrorTitle } from "@/lib/canvas/agent-error-presentation";
@@ -33,7 +32,7 @@ import { getActiveUserScope } from "@/lib/user-scope";
 import { applyAgentCanvasPatches, refreshCanvasAfterAgent, saveRemoteUserDataNow } from "@/services/user-data-sync";
 import { createAgentCanvasSync } from "@/services/agent-canvas-sync";
 import { buildSkillMentionReferences, resolveSkillMentions } from "@/services/skill-runtime";
-import { AGENT_SCENE_DEFS, AgentChatComposer, AgentChatMessage, AgentOperationFeed, AgentPlanBar, AgentQuestionBar, AgentSceneCapsules, AgentWorkingMessage, type AgentSceneBucket, type CloudAgentChatMessage, type CloudAgentPlanItem } from "./canvas-cloud-agent-chat-ui";
+import { AGENT_SCENE_DEFS, AgentChatComposer, AgentChatMessage, AgentOperationFeed, AgentPlanBar, AgentQuestionBar, AgentReasoningFeed, AgentSceneCapsules, AgentWorkingMessage, type AgentSceneBucket, type CloudAgentChatMessage, type CloudAgentPlanItem } from "./canvas-cloud-agent-chat-ui";
 import { CanvasAgentSkillLibraryModal } from "./canvas-agent-skill-library-modal";
 import { CanvasCloudAgentSettings, agentPermissionLabel, agentPermissionMenuItems, agentPermissionVisual, type AgentContextKey } from "./canvas-cloud-agent-settings";
 import { useAgentPanelLayout } from "./use-agent-panel-layout";
@@ -128,8 +127,6 @@ export function CanvasCloudAgentPanel({ canvasId, domainProjectId, nodeCount, se
         const preferred = config.textModel || config.model || "";
         return textModels.includes(preferred) ? preferred : (textModels[0] || "");
     }, [config]);
-    const reasoningSupported = Boolean(modelCapabilityConfigFor(config, selectedModel).text?.thinking);
-    useEffect(() => { if (!reasoningSupported && reasoningMode !== "off") setReasoningMode("off"); }, [reasoningSupported, reasoningMode]);
     const installedSkills = useMemo(() => skills.filter((skill) => skill.isAdded), [skills]);
     const enabledSkills = useMemo(() => installedSkills.filter((skill) => selectedSkillIds.includes(skill.skillId)), [installedSkills, selectedSkillIds]);
     const installedSkillIds = useMemo(() => new Set(installedSkills.map((skill) => skill.skillId)), [installedSkills]);
@@ -541,7 +538,7 @@ export function CanvasCloudAgentPanel({ canvasId, domainProjectId, nodeCount, se
                 const requestConfig = resolveModelRequestConfig(agentConfig, selectedModel);
                 const logicalModelId = logicalModelIDForConfig(agentConfig);
                 const input = {
-                    canvasId, prompt: value, reasoningMode: reasoningSupported ? reasoningMode : "off", profileRevision: profileView.revision,
+                    canvasId, prompt: value, reasoningMode, profileRevision: profileView.revision,
                     model: modelOptionName(selectedModel) || undefined,
                     ...(logicalModelId ? { logicalModelId } : requestConfig.channelId ? { channelId: requestConfig.channelId, channelModelKey: modelOptionName(selectedModel) || undefined } : {}),
                     skillIds: [...new Set([...selectedSkillIds, ...resolveSkillMentions(value, installedSkills).map((skill) => skill.skillId)])],
@@ -910,9 +907,6 @@ export function CanvasCloudAgentPanel({ canvasId, domainProjectId, nodeCount, se
                                         submitAccessory={<AgentContextRing view={presentAgentContextUsage(contextUsage)} />}
                                         left={
                                             <ComposerControls
-                                                reasoningMode={reasoningSupported ? reasoningMode : "off"}
-                                                reasoningSupported={reasoningSupported}
-                                                onReasoningModeChange={(value) => { if (reasoningSupported) setReasoningMode(value); }}
                                                 config={config}
                                                 selectedModel={selectedModel}
                                                 permissionMode={permissionMode}
@@ -1279,6 +1273,8 @@ function AgentConversation({
                     segment.kind === "operations" ? (
                         // 只有"对话末尾那一段 + 还在跑"才流光：历史段落留在静态态，任务完成即停。
                         <AgentOperationFeed key={segment.key} items={segment.items} theme={theme} references={references} onFocusNode={onFocusNode} live={busy && index === segments.length - 1} />
+                    ) : segment.kind === "reasoning" ? (
+                        <AgentReasoningFeed key={segment.key} items={segment.items} theme={theme} />
                     ) : (
                         <AgentChatMessage key={segment.key} item={segment.item} theme={theme} references={references} onFocusNode={onFocusNode} isStreaming={busy && !approval && segment.item.streaming === true && segment.item === lastMessage} />
                     ),
@@ -1293,9 +1289,6 @@ function AgentConversation({
 }
 
 function ComposerControls({
-    reasoningMode,
-    reasoningSupported,
-    onReasoningModeChange,
     config,
     selectedModel,
     permissionMode,
@@ -1306,9 +1299,6 @@ function ComposerControls({
     onSkillsOpenChange,
     selectedSkillCount,
 }: {
-    reasoningMode: AgentReasoningMode;
-    reasoningSupported: boolean;
-    onReasoningModeChange: (value: AgentReasoningMode) => void;
     config: ReturnType<typeof useEffectiveConfig>;
     selectedModel: string;
     permissionMode: AgentPermissionMode;
@@ -1336,11 +1326,6 @@ function ComposerControls({
                 showOptionPrices
                 placeholder="选择文本模型"
             />
-            {reasoningSupported ? <Dropdown trigger={["click"]} placement="topLeft" menu={{ items: reasoningMenuItems(reasoningMode, onReasoningModeChange) }}>
-                <button type="button" aria-label="选择 Agent 推理模式" title="推理模式：只用于规划和工具选择" className="flex h-8 shrink-0 items-center gap-1 rounded-md px-2 text-[11px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/25" style={{ color: reasoningMode === "off" ? theme.node.muted : theme.accent.primary, background: reasoningMode === "off" ? "transparent" : theme.node.fill }}>
-                    <Sparkles className="size-3.5" />{reasoningModeLabel(reasoningMode)}
-                </button>
-            </Dropdown> : null}
             <Dropdown trigger={["click"]} placement="topLeft" menu={{ items: agentPermissionMenuItems(permissionMode, onPermissionChange) }}>
                 <button
                     type="button"
@@ -1369,19 +1354,6 @@ function ComposerControls({
     );
 }
 
-const reasoningLabels: Record<AgentReasoningMode, string> = { off: "直达", auto: "自动推理", deep: "深入推理" };
-
-function reasoningModeLabel(mode: AgentReasoningMode) { return reasoningLabels[mode]; }
-
-function reasoningMenuItems(mode: AgentReasoningMode, onChange: (value: AgentReasoningMode) => void) {
-    return (Object.keys(reasoningLabels) as AgentReasoningMode[]).map((value) => ({
-        key: value,
-        label: reasoningLabels[value],
-        icon: value === mode ? <Check className="size-3.5" /> : undefined,
-        onClick: () => onChange(value),
-    }));
-}
-
 function ApprovalCard({ approval, theme, submitting, onFocusNode, onReasonChange, onApprove, onReject }: { approval: ApprovalState; theme: CanvasTheme; submitting: boolean; onFocusNode?: (nodeId: string) => void; onReasonChange: (value: string) => void; onApprove: (settings?: AgentMediaSettings) => void; onReject: () => void }) {
     const [showReason, setShowReason] = useState(Boolean(approval.reason));
     const [mediaSettings, setMediaSettings] = useState<AgentMediaSettings>();

web/src/components/canvas/canvas-cloud-agent.css

@@ -388,25 +388,22 @@
     scroll-padding-block: var(--space-5);
 }
 
-/*
- * 过程内容的公共轴：正文的左边缘就是这条线，过程标记（星标、工具左轨、时间线标记）
- * 一律挂在轴上居中。轴由星标几何推导，不是拍出来的数：星标中心 = 思考缩进 + 摘要内边距
- * + 图标半宽；工具左轨用 -0.5px 让 1px 的线居中在轴上。改任一项，三处会一起跟着走。
- */
 .agent-conversation-messages {
-    --agent-axis: 22px;
     --agent-thought-icon: 16px;
     --agent-thought-gap: 9px;
     --agent-summary-inset: 4px;
-    --agent-timeline-marker: 24px;
-    --agent-activity-inset: 8px;
-    padding-left: var(--agent-axis);
+    min-width: 0;
 }
 
 .agent-conversation-messages > * + * {
     margin-top: var(--space-4);
 }
 
+/* 状态行的图标只是语义标记，不应把正文向右推成另一条内容轴。 */
+.agent-status-message {
+    min-width: 0;
+}
+
 .agent-message-user {
     border-radius: var(--agent-radius-surface) var(--agent-radius-surface) var(--space-2) var(--agent-radius-surface);
     background: var(--agent-surface-hover, color-mix(in srgb, var(--foreground) 7%, transparent));
@@ -684,11 +681,6 @@
     .agent-context-panel-foot { display: grid; }
 
     .agent-welcome-actions button { padding-inline: var(--space-2); }
-    /* 窄面板把公共轴收细，星标与左轨仍压在同一条线上，不吃正文宽度。 */
-    .agent-conversation-messages {
-        --agent-axis: 16px;
-        --agent-activity-inset: var(--space-1);
-    }
 }
 
 @media (max-width: 639px) {
@@ -803,7 +795,7 @@
     border: 0;
     border-radius: 8px;
     background: transparent;
-    padding: 5px 2px;
+    padding: 5px 0;
     transition: transform 160ms ease;
 }
 
@@ -843,7 +835,7 @@
     border-color: transparent;
     border-radius: 9px;
     background: transparent;
-    padding: 3px 2px;
+    padding: 3px 0;
 }
 
 .agent-tool-row--read {
@@ -871,7 +863,7 @@
     min-width: 0;
     align-items: center;
     flex-wrap: wrap;
-    gap: 7px;
+    gap: 6px;
     line-height: 18px;
 }
 
@@ -891,6 +883,14 @@
     line-height: 15px;
 }
 
+.agent-tool-label {
+    flex: 0 0 auto;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 15px;
+    white-space: nowrap;
+}
+
 .agent-tool-summary {
     min-width: 0;
     flex: 1 1 180px;
@@ -968,11 +968,8 @@
  */
 .agent-operation-feed {
     --agent-tool-accent: color-mix(in srgb, var(--foreground) 62%, transparent);
-    /* 层级第二档：左轨与正文左边缘同轴（见 .agent-conversation-messages 的公共轴），
-       轨道把"一连串动作"拢成一条活动流，内容落在轨的右侧。 */
-    margin-left: -0.5px;
-    border-left: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-    padding-left: var(--agent-activity-inset, 8px);
+    /* 操作流与正文共用同一左对齐轴。不要用竖线把每条工具记录切成
+       独立的日志栏：用户首先要看到的是 Agent 的输出和当前动作。 */
     min-width: 0;
 }
 
@@ -986,11 +983,11 @@
     min-width: 0;
     max-width: 100%;
     align-items: center;
-    gap: var(--space-2);
+    gap: 6px;
     border: 0;
     border-radius: 9px;
     background: transparent;
-    padding: 4px var(--space-2) 4px var(--space-1);
+    padding: 5px 0;
     color: color-mix(in srgb, var(--agent-ink, currentColor) 72%, transparent);
     font-size: var(--fs-caption);
     line-height: 18px;
@@ -1001,6 +998,20 @@
         color 140ms ease;
 }
 
+/* The folded receipt is a single sentence, not another pill-shaped card. */
+.agent-operation-list .agent-tool-category {
+    background: transparent;
+    padding-inline: 0;
+}
+
+.agent-operation-kind {
+    flex: 0 0 auto;
+    color: color-mix(in srgb, var(--agent-tool-accent) 86%, var(--foreground));
+    font-size: var(--fs-caption);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
 .agent-operation-toggle:hover {
     background: var(--agent-surface-soft, color-mix(in srgb, var(--foreground) 4%, transparent));
     color: var(--agent-ink, var(--foreground));
@@ -1052,9 +1063,7 @@
 
 .agent-operation-count {
     flex: 0 0 auto;
-    border-radius: 999px;
-    background: var(--agent-surface-soft, color-mix(in srgb, var(--foreground) 6%, transparent));
-    padding: 1px var(--space-2);
+    padding: 0 2px;
     color: color-mix(in srgb, var(--agent-ink, currentColor) 62%, transparent);
     font-size: var(--fs-tiny);
     line-height: 16px;
@@ -1320,37 +1329,21 @@
  * 比工具日志更安静、比正文更有层次。使用当前画布主题的 accent，避免
  * 固定紫色的 AI 默认样式，同时把实时状态、摘要内容和展开动作分开。
  */
-/*
- * 信息层级：正文 / 工具调用 / 模型思考 三段只靠「位置 + 字号 + 对比度」分层，
- * 不靠圆底图标或品牌 glyph。
- *
- *   正文（结论）   从公共轴开始、14px、满对比 —— 主角
- *   工具调用       左轨压在公共轴上（活动流），内容在轨右侧，12px、次对比
- *   模型思考       星标居中在公共轴上，12px/11px、最淡 —— 过程里的旁白
- */
+/* 信息层级：正文 / 工具调用 / 模型思考三段只靠位置、字号和对比度分层。 */
 .agent-reasoning {
     min-width: 0;
-    /* 星标挂进旁注沟槽：中心落在公共轴上（正文左边缘）。 */
-    margin-left: calc(-1 * (var(--agent-thought-icon, 16px) / 2 + var(--agent-summary-inset, 4px)));
     color: color-mix(in srgb, var(--foreground) 58%, transparent);
 }
 
-/*
- * 时间线标记列（系统行 / 错误行 / 审批卡 / 上下文整理）：宽度与挂点都走公共轴 token。
- */
+/* 系统行、错误行和审批卡保留一个窄图标列，但不再向左挂出一条公共竖轨。 */
 .agent-timeline-marker {
     display: flex;
-    width: var(--agent-timeline-marker, 24px);
-    flex: 0 0 var(--agent-timeline-marker, 24px);
+    width: 20px;
+    flex: 0 0 20px;
     align-self: stretch;
     justify-content: center;
 }
 
-/* 只有对话流里的标记向左挂半格：中心与星标、工具左轨共用同一条公共轴。 */
-.agent-conversation-messages .agent-timeline-marker {
-    margin-left: calc(-1 * (var(--agent-timeline-marker, 24px) / 2));
-}
-
 .agent-reasoning-card {
     min-width: 0;
     overflow: hidden;
@@ -1369,11 +1362,10 @@
     display: flex;
     min-width: 0;
     align-items: center;
-    gap: var(--agent-thought-gap, 9px);
+    gap: 0;
     cursor: pointer;
     list-style: none;
-    /* 内边距参与公共轴推导：改它，左轨会跟着一起挪（见 .agent-conversation-messages）。 */
-    padding: 6px var(--agent-summary-inset, 4px);
+    padding: 6px 0;
     color: color-mix(in srgb, var(--foreground) 66%, transparent);
     user-select: none;
 }
@@ -1478,12 +1470,11 @@
 .agent-reasoning-content {
     position: relative;
     display: flex;
-    max-height: min(232px, 30vh);
+    max-height: min(180px, 24vh);
     gap: 0;
     overflow: auto;
     border-top: 0;
-    /* 与摘要的标题左对齐：摘要内边距 + 星标列 + 摘要 gap。 */
-    padding: 4px 10px 10px calc(var(--agent-summary-inset, 4px) + var(--agent-thought-icon, 16px) + var(--agent-thought-gap, 9px));
+    padding: 4px 0 10px;
     scrollbar-gutter: stable;
 }