/* run-view-ui.css — RunView 渲染层样式（v5 自治运行轨迹稿 批 B-1 · §25 视觉原则 / §6 证据分层）
 *
 * 起因：批 B 只写了 run-view-ui.js 的结构，**一条 CSS 都没写** —— 于是线上是浏览器
 * 默认的 <details>，三层折叠看不出分级、模块很简陋，工具参数还把整页撑得左右滑动
 * （塔拉 2026-08-21 真机反馈）。
 *
 * 三条硬约束：
 *   ① 🔴 **横向永不溢出**：宽内容只能在自己的容器里滚，页面主体不许左右滑。
 *      根因是 flex/grid 子项默认 min-width:auto —— 长 JSON 会把父容器顶穿。
 *      所以每一层都显式 min-width:0，代码块再加 overflow-wrap:anywhere。
 *   ② **三层分级靠不同手段**，不靠颜色堆叠：
 *      Node = 有面的卡片 / Tool = 缩进 + 发丝竖线 / 证据行 = 代码面
 *   ③ 只用主题 token（--accent-rgb / --card-bg / --text），不写死颜色 ——
 *      白雾与锈湖共用同一份规则，不为单个主题另开分支。
 *
 * ⚠️ 审美红线：**彩色左边条卡片全域禁用**。这里的竖线是 accent 派生的单色发丝线
 *    （与 .daily-feed-detail-bridge 同款），用来表达嵌套层级，不是彩色状态条。
 */

/* ─────────────────────────────── 容器与溢出闸 */

.run-detail {
    display: grid;
    gap: 14px;
    max-width: 100%;
    min-width: 0;
}

/* 🔴 溢出闸：这一串 min-width:0 是「页面不左右滑」的真正原因，别删。
   grid/flex 子项默认 min-width:auto，长 JSON 会撑破祖先链上的每一层。 */
.run-detail-track,
.run-node,
.run-node-body,
.run-tool,
.run-tool-body,
.run-tool-row,
.run-detail-info,
.run-detail-info-body {
    min-width: 0;
    max-width: 100%;
}

/* ─────────────────────────────── 第一屏：结果（§10） */

.run-detail-head {
    display: grid;
    gap: 6px;
}

.run-detail-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: rgba(var(--accent-rgb), 0.55);
}

.run-detail-status { color: rgba(var(--accent-rgb), 0.78); }

.run-detail-title {
    margin: 2px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    word-break: break-word;
}

.run-detail-summary,
.run-detail-stop {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.85;
    color: rgba(var(--accent-rgb), 0.82);
    white-space: pre-wrap;
    word-break: break-word;
}

.run-detail-stop { color: rgba(var(--accent-rgb), 0.62); }

/* 外发状态做成小胶囊，跟正文拉开层级 */
.run-detail-outbound {
    justify-self: start;
    margin: 4px 0 0;
    padding: 3px 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: rgba(var(--accent-rgb), 0.7);
}

/* ─────────────────────────────── 通用折叠外观 */

/* 去掉原生三角，换成自己的指示符：默认 ▸，展开转 90° */
.run-node > summary,
.run-tool > summary,
.run-detail-info > summary {
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.run-node > summary::-webkit-details-marker,
.run-tool > summary::-webkit-details-marker,
.run-detail-info > summary::-webkit-details-marker { display: none; }

.run-node > summary::before,
.run-tool > summary::before,
.run-detail-info > summary::before {
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-right: 2px;
    border-left: 4px solid rgba(var(--accent-rgb), 0.42);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform 0.16s ease;
}
.run-node[open] > summary::before,
.run-tool[open] > summary::before,
.run-detail-info[open] > summary::before { transform: rotate(90deg); }

/* ─────────────────────────────── 第二层：Node（有面的卡片） */

.run-detail-track {
    display: grid;
    gap: 8px;
}

.run-node {
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 12px;
    background: var(--daily-feed-surface, var(--card-bg));
    overflow: hidden;
}

.run-node-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
}

.run-node[open] > .run-node-summary {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.09);
}

/* 轮次序号做成小徽章 —— 修前是「▼1 本次执行」这样数字和标题黏在一起 */
.run-node-order {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.09);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    color: rgba(var(--accent-rgb), 0.72);
}

.run-node-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    color: var(--text);
    word-break: break-word;
}

.run-node-status,
.run-tool-status {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: rgba(var(--accent-rgb), 0.5);
}

/* 状态只用**深浅**区分，不引入第二种色相 —— 失败/被挡不是"报警"，是事实 */
.run-node[data-node-status="failed"] > .run-node-summary > .run-node-status,
.run-tool[data-tool-status="failed"] > .run-tool-summary > .run-tool-status { color: rgba(var(--accent-rgb), 0.85); }
.run-node[data-node-status="skipped"] > .run-node-summary > .run-node-status,
.run-tool[data-tool-status="blocked"] > .run-tool-summary > .run-tool-status { color: rgba(var(--accent-rgb), 0.36); }

.run-node-body {
    display: grid;
    gap: 8px;
    padding: 11px 13px 13px;
}

.run-node-brief {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.7;
    color: rgba(var(--accent-rgb), 0.6);
    word-break: break-word;
}

.run-node-note {
    margin: 0;
    padding-left: 10px;
    border-left: 1px solid rgba(var(--accent-rgb), 0.16);
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(var(--accent-rgb), 0.7);
    word-break: break-word;
}

/* ─────────────────────────────── 第三层：Tool（缩进 + 发丝竖线，不再是第二张卡片） */

.run-tool {
    padding-left: 11px;
    border-left: 1px solid rgba(var(--accent-rgb), 0.14);
}

.run-tool + .run-tool { margin-top: 2px; }

.run-tool-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.run-tool-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    color: rgba(var(--accent-rgb), 0.88);
    word-break: break-word;
}

.run-tool-body {
    display: grid;
    gap: 6px;
    padding: 2px 0 8px;
}

/* ─────────────────────────────── 证据行：这里是横向溢出的重灾区 */

.run-tool-row {
    display: grid;
    grid-template-columns: 3.4em minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.run-tool-row > span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    line-height: 1.9;
    color: rgba(var(--accent-rgb), 0.45);
}

/* 🔴 长 JSON 的处置：
     · overflow-wrap:anywhere —— 没有空格的长串也能断，这是不撑破页面的关键
     · white-space:pre-wrap   —— 保留原文换行，但允许折行
     · max-height + 内部滚动  —— 超长结果只在自己的框里滚，不做成一面墙
     · overflow-x:hidden      —— 明确禁止横向滚动条外溢 */
.run-tool-row > code {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.055);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.7;
    color: rgba(var(--accent-rgb), 0.8);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 13em;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 来源链接（塔拉 2026-08-22）：与输入/结果/耗时同一层的分支。
   审美红线：**不用彩色左边条**，跟着现有 run-tool-row 的素色走。 */
/* 思维链（塔拉 2026-08-22）：默认折起，与 note 分两层。
   审美红线：不用彩色左边条。 */
.run-node-reasoning {
    margin: 2px 0 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 6px;
    overflow: hidden;
}

.run-node-reasoning-summary {
    cursor: pointer;
    list-style: none;
    padding: 5px 9px;
    font-size: 0.68rem;
    color: rgba(var(--accent-rgb), 0.5);
    user-select: none;
}

.run-node-reasoning-summary::-webkit-details-marker { display: none; }

.run-node-reasoning[open] .run-node-reasoning-summary {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.run-node-reasoning-body {
    margin: 0;
    padding: 8px 9px;
    font-size: 0.7rem;
    line-height: 1.8;
    color: rgba(var(--accent-rgb), 0.62);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* 思维链可能很长：自己滚，不把卡片撑开 */
    max-height: 22em;
    overflow-y: auto;
}

.run-tool-row--sources > span {
    /* 来源是一个列表，标签跟第一条对齐而不是居中 */
    line-height: 1.6;
    padding-top: 4px;
}

.run-tool-sources {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.run-tool-source {
    display: grid;
    gap: 1px;
    padding: 5px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.run-tool-source:hover,
.run-tool-source:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.34);
    background: rgba(var(--accent-rgb), 0.05);
}

.run-tool-source-host {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
    color: rgba(var(--accent-rgb), 0.55);
    overflow-wrap: anywhere;
}

.run-tool-source-title {
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text);
    /* 长标题最多两行，不把证据层撑开 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.run-tool-trace-note {
    margin: 2px 0 0;
    font-size: 0.7rem;
    line-height: 1.75;
    color: rgba(var(--accent-rgb), 0.48);
    word-break: break-word;
}

/* ─────────────────────────────── 运行信息（§10 第三层） */

.run-detail-info {
    border-top: 1px solid rgba(var(--accent-rgb), 0.1);
    padding-top: 10px;
}

.run-detail-info > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.52);
}

.run-detail-info-body {
    display: grid;
    gap: 0;
    margin-top: 8px;
}

/* 修前是 label 和值黏成一行（「证据计数工具 1 · 成功 1…」） */
.run-info-row {
    display: grid;
    grid-template-columns: 5.6em minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.07);
}
.run-info-row:last-child { border-bottom: none; }

.run-info-row > span:first-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    line-height: 1.75;
    color: rgba(var(--accent-rgb), 0.45);
}

.run-info-row > span:last-child {
    font-size: 0.74rem;
    line-height: 1.75;
    color: rgba(var(--accent-rgb), 0.78);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.run-detail-compat,
.run-detail-muted,
.run-detail-empty {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.8;
    color: rgba(var(--accent-rgb), 0.5);
    word-break: break-word;
}

/* ─────────────────────────────── 列表卡片（批 B-2 接线后才会用到） */

.run-card {
    display: grid;
    gap: 5px;
    padding: 12px 13px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 12px;
    background: var(--daily-feed-surface, var(--card-bg));
    min-width: 0;
}

.run-card-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(var(--accent-rgb), 0.5);
}

.run-card-title {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    word-break: break-word;
}

.run-card-summary {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: rgba(var(--accent-rgb), 0.7);
    word-break: break-word;
}

.run-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    color: rgba(var(--accent-rgb), 0.45);
}

/* 卡片头/详情头里的细粒度片段 —— E21 抓到的六个漏网 class */

.run-card-time,
.run-detail-time {
    font-family: 'JetBrains Mono', monospace;
    color: rgba(var(--accent-rgb), 0.6);
}

.run-card-sep { color: rgba(var(--accent-rgb), 0.3); }

.run-card-status { color: rgba(var(--accent-rgb), 0.72); }

.run-card-outbound {
    padding: 2px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: 999px;
    color: rgba(var(--accent-rgb), 0.62);
}

.run-card-bits {
    color: rgba(var(--accent-rgb), 0.42);
    overflow-wrap: anywhere;
}

.run-card-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.07);
    color: rgba(var(--accent-rgb), 0.5);
    overflow-wrap: anywhere;
}

/* 可点的卡片（workflow 日志页点它切换上方轨迹）。选中态**只靠明度**，不引第二种色相 */

.run-card[role="button"] { cursor: pointer; }

.run-card[role="button"]:hover,
.run-card[role="button"]:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.24);
    outline: none;
}

.run-card.active {
    border-color: rgba(var(--accent-rgb), 0.34);
    background: rgba(var(--accent-rgb), 0.05);
}

/* ─────────────────────────────── workflow 日志页（批 B-2） */

.workflow-run-budget {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 12px;
    background: var(--daily-feed-surface, var(--card-bg));
    min-width: 0;
}

.workflow-run-budget-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: rgba(var(--accent-rgb), 0.55);
}

.workflow-run-budget-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    overflow: hidden;
}

.workflow-run-budget-fill {
    height: 100%;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.42);
    transition: width 0.3s ease;
}

.workflow-run-budget[data-running="1"] .workflow-run-budget-fill {
    background: rgba(var(--accent-rgb), 0.62);
}

.workflow-log-history-head {
    margin: 16px 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(var(--accent-rgb), 0.45);
}

.workflow-log-history {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.workflow-log-note {
    margin: 0 0 12px;
    font-size: 0.72rem;
    line-height: 1.8;
    color: rgba(var(--accent-rgb), 0.5);
    word-break: break-word;
}

/* 回退行：只有时间与后端原样 status，没有分类语义，样式也刻意朴素 */

.workflow-log-row-plain {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 2px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(var(--accent-rgb), 0.55);
    min-width: 0;
}

.workflow-log-row-time { color: rgba(var(--accent-rgb), 0.45); }
.workflow-log-row-status { color: rgba(var(--accent-rgb), 0.72); }

.workflow-log-row-error {
    color: rgba(var(--accent-rgb), 0.5);
    overflow-wrap: anywhere;
}

/* ─────────────────────────────── 窄屏 */

@media (max-width: 560px) {
    .run-tool-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .run-info-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .run-info-row > span:last-child { text-align: left; }
    .run-tool-row > code { max-height: 11em; }
}