/* 活动时间线（11-01 原生对齐 N3，docs/STYLE_PORTAL.md“总 Agent 的活动”）：答复下面“做了 N 步”展开，一步一行 26px，16px 灰色线条图标认种类，
   字 12.5px 正文二档色，右边等宽小字（加删几行，几步，几行）；外壳照旧黑白灰，颜色只给状态：在做主色小转圈，没成与没许红色图标加一行红字，
   加的行数绿，删的红。点得开的一行悬停浅灰底，右边小三角；叠在助手下面的几步左边一道细线缩进一层。深色全走变量。 */
.act { min-width: 0; }
.act-t svg.act-i.tt { width: 14px; height: 14px; color: currentColor; transition: transform .24s var(--ease-out, ease); }
.act-t[aria-expanded="false"] svg.act-i.tt { transform: rotate(-90deg); }
.act-l { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; min-width: 0; overflow: hidden; }
/* 一问的几段接成一条（11-08）：平台接着做的段与段之间一行细的分隔（“继续执行”，平台要的自审写“自审：检查本轮改动”），两边各一道细线，字小一档；不写第几段 */
.act-ls { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.act-go { display: flex; align-items: center; gap: 8px; margin: 6px 6px 0; color: var(--ink3); font-size: 11.5px; line-height: 16px; }
.act-go::before, .act-go::after { content: ""; flex: 1; min-width: 12px; height: 1px; background: var(--divider); }
.act-go span { flex: none; }
.act-r { min-width: 0; }
.act-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 26px; padding: 3px 6px; border: 0; border-radius: 6px; background: none;
  color: var(--ink2); font: inherit; font-size: 12.5px; line-height: 20px; text-align: left; }
button.act-b { cursor: pointer; transition: background-color var(--t-fast, .12s) ease, color var(--t-fast, .12s) ease; }
button.act-b:hover { background: var(--hover); color: var(--ink); }
button.act-b:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--focus-ring); }      /* 时间线裁着边（展开的动画），焦点框画在里面 */
.act-i { width: 16px; height: 16px; flex: none; fill: currentColor; }
.act-b .act-i.k { color: var(--ink3); }
.act-r.s-err > .act-b .act-i.k, .act-r.s-deny > .act-b .act-i.k { color: var(--red); }
.act-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-r.s-deny > .act-b .act-tx { color: var(--ink3); }
.act-b .act-i.ch { width: 16px; height: 16px; color: var(--ink4); transform: rotate(-90deg); transition: transform .18s var(--ease-out, ease); }
.act-b .act-i.ch.on { transform: none; }
.act-b .act-i.go, .act-b .act-i.lk { width: 14px; height: 14px; color: var(--ink4); }
.act-n, .act-c { flex: none; display: inline-flex; gap: 6px; font: 12px/18px var(--mono); color: var(--ink3); }
.act-n .a { color: var(--success-ink); }
.act-n .d { color: var(--red-ink); }
.act-spin { flex: none; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-right-color: var(--primary); border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: middle; }
.act-e { margin: -2px 6px 2px 30px; color: var(--red-ink); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }

/* 点开的一块：缩进到字的左沿 */
.act-x { margin: 2px 0 8px 30px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.act-out { border: 1px solid var(--border); border-radius: var(--r); background: var(--code, var(--card)); overflow: hidden; min-width: 0; }
.act-cmd { padding: 7px 10px 0; color: var(--ink2); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 72px; overflow: auto; }
.act-cmd .p { color: var(--ink4); user-select: none; -webkit-user-select: none; }
.act-pre { margin: 0; padding: 6px 10px 8px; color: var(--ink3); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 252px; overflow: auto; scrollbar-width: thin; }
.act-pre.all { max-height: 360px; }
.act-r.s-err .act-pre { color: var(--ink2); }
.act-none, .act-note { color: var(--ink3); font-size: 12px; line-height: 18px; padding: 2px 0; }
.act-note.err { color: var(--red-ink); }
.act-out .act-none { padding: 6px 10px 8px; }
/* “看全部 N 行”：主色文字按钮带一个朝下的小箭头，看得出点得开（同项目文件里的“展开”） */
.act-more { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; height: 24px; padding: 0 6px 0 8px; margin-left: -8px; border: 0; border-radius: 6px;
  background: none; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; }
.act-more .act-i.mi { width: 14px; height: 14px; }
.act-more:hover { background: var(--primary-bg); }
.act-more:focus-visible, .act-url:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus-ring); }
.act-task { color: var(--ink3); font-size: 12px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* 助手做的几步：左边一道细线，缩进一层 */
.act-kids { display: flex; flex-direction: column; gap: 1px; margin-left: -16px; padding-left: 8px; border-left: 1px solid var(--divider); }
.act-r.kid .act-b { min-height: 24px; padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
.act-r.kid .act-i.k { width: 14px; height: 14px; }
.act-r.kid .act-x { margin-left: 28px; }
.act-sum { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 7px; border-radius: var(--r); background: var(--grey-bg); font-size: 12.5px; line-height: 19px; color: var(--ink2); min-width: 0; }
.act-sum .h { color: var(--ink3); font-size: 11.5px; font-weight: 600; line-height: 16px; }
.act-sum .h:empty { display: none; }
.act-sum .tx { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 228px; overflow: auto; scrollbar-width: thin; }
.act-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.act-plan li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink2); font-size: 12.5px; line-height: 20px; overflow-wrap: anywhere; }
.act-plan li .act-i.pm { width: 14px; height: 14px; margin-top: 3px; color: var(--success-ink); }
.act-plan li .dot { flex: none; width: 12px; height: 12px; margin: 4px 1px 0; box-sizing: border-box; border: 1.5px solid var(--ink4); border-radius: 50%; }
.act-plan li.doing .dot { border: 0; background: radial-gradient(circle, var(--primary) 0 3.5px, transparent 4px); }
.act-plan li.done { color: var(--ink3); }
/* 等人的一步（11-03 FIX7 A36）：人形小图标同字一个灰度，后面一个“等你” */
.act-plan li.wait .act-i.pm { color: var(--ink3); }
.act-w { flex: none; padding: 0 6px; border-radius: 9px; background: var(--grey-bg); color: var(--ink2); font-size: 12px; line-height: 18px; }
/* 人在这一句答着的时候说的话（11-03 FIX7 A35）：时间线里那一行的字同正文一个颜色，看得出是人说的 */
.act-r.k-said .act-tx { color: var(--ink); }
.act-url { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; height: 24px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: 6px;
  background: none; color: var(--primary); font: 12px/18px var(--mono); cursor: pointer; }
.act-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-url .act-i.pm { width: 14px; height: 14px; }
.act-url:hover { background: var(--primary-bg); }

/* 试运行那一行点开（11-02 F1）：一个节点一块，头一行标题与状态，下面输入开头，输出（生成的代码照原样），日志；没成的状态红字，没跑的灰 */
.act-try { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.act-tn { display: flex; flex-direction: column; min-width: 0; }
.act-th { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 2px; min-width: 0; }
.act-th .tt { flex: 1; min-width: 0; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-th .st { flex: none; color: var(--ink3); font-size: 12px; line-height: 18px; }
.act-tn.bad .act-th .st { color: var(--red-ink); }
.act-tn.off .act-th .tt { color: var(--ink2); font-weight: 500; }
.act-tw { padding: 0 10px 4px; color: var(--ink3); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.act-tn.bad .act-tw { color: var(--red-ink); }
.act-tp { border-top: 1px solid var(--divider); min-width: 0; }
.act-tp .h { display: block; padding: 5px 10px 0; color: var(--ink3); font-size: 11.5px; font-weight: 600; line-height: 16px; }
.act-tp .act-pre { padding-top: 2px; border: 0; border-radius: 0; background: none; }
/* 交回的代码照原样摆：不折行，长的一行横着滚（手机宽折了行代码就看不清了）；右边还有字时边上一道淡影（滚动阴影，只用背景，不用脚本） */
.act-tp .act-pre.code { color: var(--ink2); max-height: 360px; white-space: pre; overflow-wrap: normal; overflow: auto; padding-right: 14px;
  background:
    linear-gradient(to right, var(--code, var(--card)) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--code, var(--card)) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 10px 100% no-repeat scroll,
    var(--code, var(--card)); }
/* 输入开头：一个参数一块，参数的中文名小一档加粗，值照原样摆几行 */
.act-tk { display: flex; flex-direction: column; gap: 4px; padding: 2px 10px 8px; min-width: 0; }
.act-tk .kv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.act-tk .k { color: var(--ink2); font-size: 12px; font-weight: 500; line-height: 18px; }   /* 参数名比上一级的“输入开头”轻半档（11-02 Gemini） */
.act-tk .v { color: var(--ink3); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* 试运行的输出（11-02 W2 整合走查）：同节点大框的结果表，一个字段一行“名字 值”，一行一个对象的列表一张表（表头中文名，头一行贴着顶，格子一行放不下末尾省略） */
.act-tb { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 8px; min-width: 0; }
.act-tkv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font-size: 12px; line-height: 18px; }
.act-tkv .k { color: var(--ink3); }
.act-tkv .v { color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.act-tth { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 12px; line-height: 18px; }
.act-tth .tt { color: var(--ink2); font-weight: 500; }
.act-tth .n { color: var(--ink3); }
.act-tbw { overflow: auto; max-height: 240px; border: 1px solid var(--divider); border-radius: 6px; scrollbar-width: thin; }
.act-tbl { border-collapse: collapse; min-width: 100%; font-size: 12px; line-height: 18px; }
.act-tbl th, .act-tbl td { max-width: 200px; padding: 4px 8px; border-bottom: 1px solid var(--divider); text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.act-tbl th { position: sticky; top: 0; background: var(--grey-bg); color: var(--ink2); font-weight: 500; }
.act-tbl td { color: var(--ink2); }
.act-tbl tr:last-child td { border-bottom: 0; }
.act-ttx { color: var(--ink2); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* 宿主里摆的位置（11-02 E2）：组件工厂草稿页 AI 那一轮，跟答复（.fa-res）左对齐 */
.fa-msg.ai .fa-act { margin: 2px 0 0 30px; min-width: 0; }
.fa-msg.ai .fa-act .act-t { margin-top: 2px; }

/* 手机宽：点开的一块少缩进，输出框矮一点 */
@media (max-width: 640px) {
  .act-x { margin-left: 22px; }
  .act-pre { max-height: 216px; }
}
/* 触屏点了以后不留悬停的底色（点开的那一行看起来像被框住了） */
@media (hover: none) {
  button.act-b:hover { background: none; color: var(--ink2); }
}
@media (prefers-reduced-motion: reduce) {
  .act-b .act-i.ch, .act-t svg.act-i.tt { transition: none; }
}