/* ─── 智能体对话 UI（章节聊天 + 智能体控制台共用） ───
 * 这两套界面共用 js/agent-core.js 渲染同一套 DOM，样式也必须只有一份：
 * 放在这里由 index.html 与 episode.html 同时加载，改一次两边生效。
 * 原先在 episode.css 里，2026-10-31 抽出（控制台也用它，避免两套外观各自漂移）。
 */

/* ── 智能体（工具调用）面板：时间线（思考块与工具卡片按真实顺序交替）+ 收尾状态条，位于气泡正上方 ── */
.chat-agent-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    margin-bottom: var(--space-sm);
}

/* 控制台顶部的「对话 / 轨迹」切换：对话视图只留正文、状态条与待回应卡片，
   工具轨迹与思考块收起（切到「轨迹」才展开），与章节聊天始终展开的形态并存 */
.chat-agent-panel.is-chat-view > .chat-agent-card:not(.is-pending),
.chat-agent-panel.is-chat-view > .chat-agent-thought {
    display: none;
}


/* 提问/审批卡片的宿主：紧跟在气泡下方（模型先说明，再问用户，读起来才顺） */
.chat-agent-prompt-host {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    margin-top: var(--space-sm);
}
.chat-agent-prompt-host:empty {
    display: none;
}
/* 图标列统一 14px 定宽：状态条与工具卡片的文字左边缘在同一竖线上 */
.chat-agent-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
    /* 状态条是调用链的收尾：与上一张卡片之间比卡片间距再松一点（margin 2px + 容器 gap 4px = 6px） */
    margin-top: var(--space-2xs);
}
.chat-agent-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
}
.chat-agent-status-icon .spinner {
    margin-right: 0;
}
.chat-agent-status-text {
    font-weight: 500;
    color: var(--color-text-primary);
}
.chat-agent-status-meta {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* ── 思考过程（推理模型 + 深度思考才有）：思考时展开，想完自动折叠 ──
   与工具卡片共用 .chat-agent-panel 这条时间线，间距由它统一给 */
.chat-agent-thought {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    overflow: hidden;
}
.chat-agent-thought-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    /* 与状态条同款：图标列 14px 定宽，两块的文字左边缘对齐 */
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
    text-align: left;
    cursor: pointer;
}
.chat-agent-thought-head:hover .chat-agent-thought-title {
    color: var(--color-primary);
}
.chat-agent-thought-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
}
.chat-agent-thought-icon .spinner {
    margin-right: 0;
}
.chat-agent-thought-title {
    flex: none;
}
.chat-agent-thought.is-live .chat-agent-thought-title {
    font-weight: 500;
    color: var(--color-text-primary);
}
.chat-agent-thought-meta {
    margin-left: auto;
    flex: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.chat-agent-thought-caret {
    display: inline-flex;
    flex: none;
    color: var(--color-text-muted);
    transition: transform 0.15s;
}
.chat-agent-thought.is-open .chat-agent-thought-caret {
    transform: rotate(180deg);
}
.chat-agent-thought-body {
    display: none;
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
    /* 思考内容是纯文本：保留换行，且不做 Markdown 渲染 */
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-agent-thought.is-open .chat-agent-thought-body {
    display: block;
}
/* 欢迎语下方的示例指令：让用户一眼看到「这东西能干什么」，点一下就填进输入框 */
.chat-agent-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.chat-agent-example {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.chat-agent-example:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.chat-agent-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
/* 卡片首行：图标 + 标题/摘要 + 耗时 + 参数开关，必须显式排成一行，否则会竖排堆叠 */
.chat-agent-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    flex: 1 1 auto;
    min-width: 0;
}
.chat-agent-card.is-running {
    border-color: var(--color-border-light);
}
.chat-agent-card.is-failed {
    border-color: rgba(var(--color-error-rgb), 0.3);
    background: rgba(var(--color-error-rgb), 0.06);
}
.chat-agent-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    /* 与标题行高对齐，保证图标/转圈垂直居中于首行文字 */
    height: calc(var(--font-size-sm) * 1.45);
}
.chat-agent-card-icon .spinner {
    margin-right: 0;
}
.chat-agent-card-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.chat-agent-card-title {
    font-weight: 500;
    color: var(--color-text-primary);
}
.chat-agent-card-preview {
    margin-top: 1px;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 用户自己的补充要求（运行中追加指令）：主色描边 + 浅底，与工具调用一眼区分 */
.chat-agent-card.is-steer {
    border-color: var(--color-primary);
    background: var(--color-bg-tertiary);
}
/* 自己写的话要能读全，不能像工具摘要那样单行截断 */
.chat-agent-card.is-steer .chat-agent-card-preview {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: var(--color-text-secondary);
}
.chat-agent-card-duration {
    flex: none;
    padding-top: 1px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* 参数开关：纯文字小按钮，不抢视觉焦点 */
.chat-agent-card-toggle {
    flex: none;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-xs);
    line-height: 1.45;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.chat-agent-card-toggle:hover {
    color: var(--color-primary);
}
/* 参数详情：整行铺开，长参数内部滚动，不撑高卡片 */
.chat-agent-card-details {
    flex: 1 1 100%;
    min-width: 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
}
.chat-agent-card-details pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 220px;
    overflow: auto;
}
/* 竖向布局的卡片（审批 / 提问）必须关掉换行：
   column + wrap 会变成「换列」—— 卡片高度不够时，后面的块（改前→改后、参数详情）
   会被排到卡片右侧新增的一列上，直接跑出卡片右边缘、被窗口裁掉。
   顺带：竖向布局里 flex-basis 指的是高度，参数详情的 1 1 100% 要改回按内容高度。 */
.chat-agent-card.is-approval,
.chat-agent-card.is-question {
    flex-wrap: nowrap;
}
.chat-agent-card.is-approval .chat-agent-card-details,
.chat-agent-card.is-question .chat-agent-card-details {
    flex: 0 0 auto;
}

/* ── 聊天回复的 Markdown 渲染（js/markdown.js 生成的 .chat-md 结构） ── */
.chat-md {
    /* 气泡本身是 pre-wrap（保留换行），Markdown 的换行由 <br> 和块级元素表达，这里必须还原 */
    white-space: normal;
}

.chat-md > *:first-child { margin-top: 0; }
.chat-md > *:last-child { margin-bottom: 0; }

.chat-md p { margin: 0 0 8px; }

.chat-md h1,
.chat-md h2,
.chat-md h3,
.chat-md h4,
.chat-md h5,
.chat-md h6 {
    margin: 12px 0 6px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.chat-md h1 { font-size: 15px; }
.chat-md h2 { font-size: 14px; }
.chat-md h3 { font-size: 13.5px; }
.chat-md h4,
.chat-md h5,
.chat-md h6 { font-size: 13px; }

.chat-md strong { font-weight: 600; }
.chat-md em { font-style: italic; }

.chat-md ul,
.chat-md ol { margin: 0 0 8px; padding-left: 20px; }
.chat-md li { margin: 2px 0; }
.chat-md li > ul,
.chat-md li > ol { margin: 2px 0; }

.chat-md code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 1px 4px;
}

.chat-md-code {
    position: relative;
    margin: 0 0 8px;
}

.chat-md-pre {
    overflow-x: auto;
    padding: 8px 40px 8px 10px;   /* 右侧 40px 给复制按钮留位 */
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    counter-reset: chat-md-line;
}

.chat-md-code .chat-md-lines {
    display: block;
    background: none;
    padding: 0;
    white-space: normal;
    font-size: 12px;
    line-height: 1.6;
}

/* 每行 = 「行号列 + 代码列」横排：行号固定在左侧不随内容滚动，
   长行只在代码列内换行，续行不会跑到行号底下 */
.chat-md-row { display: flex; }

.chat-md-ln {
    flex: none;
    width: 2.2em;
    margin-right: 8px;
    text-align: right;
    color: var(--color-text-muted);
    counter-increment: chat-md-line;
    user-select: none;
}

.chat-md-ln::before { content: counter(chat-md-line); }

.chat-md-cl {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 语法高亮 token（配色变量在 css/global.css，深浅主题各一套） */
.chat-md-tok.is-kw { color: var(--code-token-keyword); }
.chat-md-tok.is-str { color: var(--code-token-string); }
.chat-md-tok.is-num { color: var(--code-token-number); }
.chat-md-tok.is-com { color: var(--code-token-comment); }
.chat-md-tok.is-fn { color: var(--code-token-function); }

.chat-md-copy {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 13px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-bg-main);
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.6;
    user-select: none;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chat-md-copy:hover,
.chat-md-copy:focus-visible {
    opacity: 1;
    color: var(--color-text-primary);
}

.chat-md-copy.is-done {
    opacity: 1;
    color: var(--color-success);
    border-color: var(--color-success);
}

.chat-md blockquote {
    margin: 0 0 8px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

.chat-md hr {
    margin: 10px 0;
    border: none;
    border-top: 1px solid var(--color-border-light);
}

.chat-md a {
    color: var(--color-primary);
    text-decoration: none;
    word-break: break-all;
}

.chat-md a:hover { text-decoration: underline; }

.chat-md-table-wrap {
    margin: 0 0 8px;
    overflow-x: auto;
}

.chat-md table {
    border-collapse: collapse;
    min-width: 100%;
    font-size: 12.5px;
}

.chat-md th,
.chat-md td {
    border: 1px solid var(--color-border-light);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}

.chat-md th {
    background: var(--color-bg-tertiary);
    font-weight: 600;
    white-space: nowrap;
}

/* 聊天回复里的图片：智能体把图片地址贴出来时直接画出来（点开可放大） */
.chat-md-image {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    margin: var(--space-xs) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
}
.chat-md-image.is-zoomable {
    cursor: zoom-in;
}

/* 图片下方的「设为资产图 / 下载」：一条消息有几张图就有几组，按钮跟着图片走 */
.chat-img-with-actions {
    display: inline-block;
    max-width: 100%;
}
.chat-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 var(--space-s);
}
.chat-image-actions .chat-action-btn {
    font-size: 12px;
    padding: 3px 8px;
}

/* ── 审批卡片（询问模式：写入类工具需用户确认） ── */
/* 底色用左侧色条 + 极浅填充：比整块铺色更克制，也不会压过正文 */
.chat-agent-card.is-approval {
    flex-direction: column;
    gap: var(--space-s);
    align-items: stretch;
}
.chat-agent-card.is-approval .chat-agent-card-head {
    /* 首行布局已由 .chat-agent-card-head 统一提供，这里只保证纵向铺满 */
    width: 100%;
}
.chat-agent-card.is-approval.is-pending {
    border-color: rgba(var(--color-warning-rgb), 0.3);
    background: rgba(var(--color-warning-rgb), 0.08);
    box-shadow: inset 2px 0 0 var(--color-warning);
}
/* 审批卡片的「改前 → 改后」对照：与标题文字左边缘对齐，逐行可读 */
.chat-agent-diff {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-left: calc(14px + var(--space-sm));
}
.chat-agent-diff-row {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}
.chat-agent-diff-label {
    flex: none;
    min-width: 5.5em;
    color: var(--color-text-muted);
}
.chat-agent-diff-body {
    flex: 1 1 auto;
    min-width: 0;
    /* 用行内流动而不是 flex：改前/改后都是一长段文字，flex 会把它们压成两个窄列，
       行内流动才能占满整行宽度、自然换行 */
    font-size: var(--font-size-xs);
    line-height: 1.6;
    word-break: break-word;
}
.chat-agent-diff-before {
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.chat-agent-diff-arrow {
    padding: 0 var(--space-2xs);
    color: var(--color-text-muted);
}
.chat-agent-diff-after {
    color: var(--color-text-primary);
}
.chat-agent-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    /* 与标题文字左边缘对齐（图标列 14px + 间距 8px） */
    padding-left: calc(14px + var(--space-sm));
}
.chat-agent-card-actions .btn {
    padding: var(--space-xs) var(--space-ms);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}
/* 卡内小按钮不参与全局 .btn-primary:hover 的上浮 + 阴影，避免撑破卡片 */
.chat-agent-card-actions .btn:hover {
    transform: none;
    box-shadow: none;
}

/* ── 提问卡片（智能体 ask_user：挂起等你回答） ── */
.chat-agent-card.is-question {
    flex-direction: column;
    gap: var(--space-s);
    align-items: stretch;
}
.chat-agent-card.is-question .chat-agent-card-head { width: 100%; }
.chat-agent-card.is-question.is-pending {
    border-color: rgba(var(--color-accent-blue-rgb), 0.35);
    background: rgba(var(--color-accent-blue-rgb), 0.07);
    box-shadow: inset 2px 0 0 var(--color-accent-blue);
}
/* 待回答的提问卡片：头部摘要与正文问题重复，隐藏摘要（正文里给完整问题） */
.chat-agent-card.is-question.is-pending .chat-agent-card-preview { display: none; }
.chat-agent-question {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* 与标题文字左边缘对齐（图标列 14px + 间距 8px） */
    padding-left: calc(14px + var(--space-sm));
}
.chat-agent-question-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* 候选选项：竖向整行列表（横向胶囊会自动换行、宽窄不一，读起来很乱） */
.chat-agent-question-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}
.chat-agent-question-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    width: 100%;
    padding: var(--space-s) 10px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-main);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* 箭头只占首行高度：多行选项时不会跑到中间去 */
.chat-agent-question-option-mark {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: calc(var(--font-size-sm) * 1.5);
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}
/* 下箭头转成「点这个」的右箭头 */
.chat-agent-question-option-mark .icon { transform: rotate(-90deg); }
.chat-agent-question-option-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.chat-agent-question-option:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
}
.chat-agent-question-option:hover:not(:disabled) .chat-agent-question-option-mark { color: var(--color-primary); }
.chat-agent-question-option:disabled { opacity: 0.55; cursor: default; }
.chat-agent-question-input {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}
.chat-agent-question-input .form-input { flex: 1; min-width: 0; }
.chat-agent-question-input .btn {
    flex: none;
    padding: var(--space-xs) var(--space-ms);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}
.chat-agent-question-input .btn:hover {
    transform: none;
    box-shadow: none;
}
.chat-agent-question-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}
/* 提问/审批前的说明：答复后从气泡收进卡片，默认折叠（见 _foldReplyIntoActionCard） */
.chat-agent-reason {
    margin-top: 6px;
}
.chat-agent-reason > summary {
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    list-style: none;
    user-select: none;
}
.chat-agent-reason > summary::-webkit-details-marker {
    display: none;
}
.chat-agent-reason > summary::before {
    content: '▸';
    display: inline-block;
    width: 12px;
    font-size: 10px;
}
.chat-agent-reason[open] > summary::before {
    content: '▾';
}
.chat-agent-reason > summary:hover {
    color: var(--color-text-secondary);
}
.chat-agent-reason-text {
    margin-top: 4px;
    padding: 8px 10px;
    border-left: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── 任务计划面板（智能体 update_plan：悬浮在输入区上方，不占布局空间） ── */
/* 零高度定位锚点：面板绝对定位挂在它上面，因此不会挤压消息区 / 输入框 */
.chat-plan-dock {
    position: relative;
    flex: none;
    height: 0;
}
.chat-plan-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    z-index: 6;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-bg-main);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.chat-plan-head {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.chat-plan-head:hover { background: var(--color-bg-tertiary); }
.chat-plan-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 14px;
}
.chat-plan-label {
    flex: none;
    font-weight: 600;
    color: var(--color-text-primary);
}
.chat-plan-progress {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}
.chat-plan-current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}
.chat-plan-chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.chat-plan-head[aria-expanded="true"] .chat-plan-chevron { transform: rotate(180deg); }
.chat-plan-body {
    padding: 0 10px 8px;
    border-top: 1px solid var(--color-border);
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.chat-plan-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-top: var(--space-sm);
}
.chat-plan-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}
.chat-plan-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 18px;
}
.chat-plan-step-text { color: var(--color-text-secondary); }
.chat-plan-step.is-done .chat-plan-step-text {
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.chat-plan-step.is-in_progress .chat-plan-step-text {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ── 参考图 / 参考音频缩略图行 ──
   同时用于用户消息气泡与任务卡片头部：一律靠左，与提示词对齐（用户明确要求，不要改回 flex-end） */
.chat-ref-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 0 2px;
    justify-content: flex-start;
}
/* 每个缩略图包一层：懒加载的「转圈 / 失败占位」只盖这一小块，不会糊住整行（其它缩略图 / 音频项） */
.chat-ref-thumb-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    border-radius: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
}
/* 悬停放大必须放在包裹层上：失败占位是包裹层的伪元素，
   放在里面的 img 上会出现「图片放大、占位遮罩不动」的错位 */
.chat-ref-thumb-wrap:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.chat-ref-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    cursor: zoom-in;
}
.chat-ref-count {
    font-size: 10px;
    color: var(--color-text-muted);
    opacity: 0.5;
    align-self: flex-end;
    line-height: 56px;
}