Archived
xcsandClaude Fable 5
51c87af583
用户在工作台上连报六条(2026-08-27):
- 对话区把数据工单摆成「执行工单」→ 契约 ExecutionWorkOrder.variant:'data'(引擎侧与执行工单无异,
只换面孔),归一层从卡上带下来,web 新增 DataForm(同一套办法、另一副面孔:色/图标/「数据工单」/「确认写入」),
办结卡与治理台人类工具目录同步;活动的两张数据工单卡骨架标 variant:"data"。
- 表显示不全不能右滑 → 目标件把 overflow-x:auto 写在 .tbl-wrap,平台包装是 .jc-tbl-wrap,谁都没管到;补一条。
- 表头只留中文 → 三张数据工单表去英文列名与 .thd 小字。
- 编辑态内部料号「只读字 + 输入框」并排 → 目标件 #tbl1 .jc-vcell{display:inline}(id 特异度)盖过
table.on 的隐藏规则,表 1 每格其实都并排,PN 那格恰好有字;用 id 特异度覆盖回去。
- input 与 select 没对齐 → 徽标从前包 .ro 编辑态留着、压在下拉框头上把那格顶低 13px,改成随只读格一起藏;
input/select 钉同一高度。
- 第一步「派数据工单还是放弃候选」不该问人 → 决策卡退役(覆盖规格「候选 ≥2 可放弃」那一条,用户定),
查无记录一律自动派;剧本/说明书/测试/e2e 同步(e2e 新增 expectAsks.max 断言「不该问的没问」)。
顺带:5173 的 /api 反代默认指向一条公网隧道(150.158.83.131:46100 → nps → npc → 本机 :8787),
浏览器每次请求先出公网再绕回来;默认改回本机,要远端的显式给 API_PROXY_TARGET。
静态渲染实证:900px 宽的框里横向能滑 200px;编辑态同一行 3 input + 1 select 全部 32px 同一 y;
只读 PN 格 display:none。活动包 1.4.0;2097 测 / typecheck / lint / depcruise 绿。
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FJcX8A6TWp4GRs41TYryEh
3460 lines
324 KiB
CSS
3460 lines
324 KiB
CSS
/* ============================================================================
|
||
JCAI 设计层（盖在 proto.vendor.css 之上）
|
||
—— 设计令牌 + 交互增强 + 逻辑特有组件（里程碑工作区 / 会话流 / 模块占位页）。
|
||
身份系统：
|
||
· 产品主色 = 飞书蓝 #3370FF（Universe Design 蓝阶 B500，深浅按 B600/B700/B100/B50）
|
||
· AI 在场 = 蓝→紫渐变（#3370FF → #7F3BF5），用于 AI 头像/品牌标/当前阶段流光
|
||
· 中性色 = 飞书灰阶（#1F2329 正文 / #646A73 次要 / #DEE0E3 描边）
|
||
· 数据字符（时间戳/延迟/编号）走等宽字体，强化「agent 控制台」气质
|
||
========================================================================== */
|
||
|
||
.proto-root { display: contents; }
|
||
|
||
.proto-root .app-shell {
|
||
/* —— 飞书蓝阶 —— */
|
||
--brand: #3370ff;
|
||
--brand-deep: #245bdb; /* hover */
|
||
--brand-pressed: #1c4cba;
|
||
--brand-soft: #e1eaff; /* B100 */
|
||
--brand-wash: #f0f4ff; /* B50 */
|
||
/* —— AI 在场渐变 —— */
|
||
--ai-a: #3370ff;
|
||
--ai-b: #7f3bf5;
|
||
--ai-grad: linear-gradient(135deg, var(--ai-a), var(--ai-b));
|
||
/* —— 飞书中性阶 —— */
|
||
--ink: #1f2329;
|
||
--ink-2: #41464e;
|
||
--ink-3: #646a73;
|
||
--ink-4: #8f959e;
|
||
--line: #dee0e3;
|
||
--line-soft: #e8eaed;
|
||
--canvas: #f0f2f5;
|
||
--soft: #f8f9fb;
|
||
/* —— 图底三级明度：页面底(最深) < 面板内衬洗底 < 白卡 ——
|
||
页面底加深(覆盖 vendor :root 的 --jcai-bg #f3f5f8)，白面板才「浮」得起来；
|
||
面板内衬(--wl-bg / 对话流)必须明显浅于页面底，读作「卡内洗底」而非页面底串进卡里 */
|
||
--jcai-bg: #e6eaf1;
|
||
--wl-bg: #f2f4f8; --cardline: #e1e6ec; --card-shadow: 0 1px 2px rgba(31, 35, 41, .05);
|
||
/* —— 功能色（飞书功能色系，文字用加深档保证对比度）—— */
|
||
--ok: #278717; --ok-accent: #34c724; --ok-soft: #e8f8e4;
|
||
--warn: #de7802; --warn-accent: #ff8800; --warn-soft: #fff4e5;
|
||
--danger: #d83931; --danger-accent: #f54a45; --danger-soft: #feeae9;
|
||
/* —— 阶段类型强调色（飞书扩展色板）—— */
|
||
--st-auto: #4954e6; --st-auto-soft: #f0f1fd;
|
||
--st-execute: #e07a00; --st-execute-soft: #fff4e5;
|
||
--st-decision: #7f3bf5; --st-decision-soft: #f5f0fe;
|
||
--st-collab: #0aa294; --st-collab-soft: #e4f8f5;
|
||
--st-data: #1f6fe0; --st-data-soft: #eaf2fd;
|
||
--st-wait: #6a7590; --st-wait-soft: #eef0f5;
|
||
/* —— 字体 / 投影 / 动效 —— */
|
||
--mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
|
||
--shadow-1: 0 1px 2px rgba(31, 35, 41, .06);
|
||
--shadow-2: 0 6px 20px rgba(31, 35, 41, .08);
|
||
--shadow-brand: 0 6px 16px rgba(51, 112, 255, .22);
|
||
--t-fast: .16s cubic-bezier(.3, 0, .2, 1);
|
||
--t-med: .26s cubic-bezier(.3, 0, .2, 1);
|
||
|
||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
/* 焦点可见性：键盘导航统一品牌色描环 */
|
||
.proto-root :where(button, input, textarea, select, a, [tabindex]):focus-visible {
|
||
outline: 2px solid var(--brand);
|
||
outline-offset: 2px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 细滚动条（三栏滚动区统一） */
|
||
/* ===== 滚动条 =====
|
||
主滚动区（清单/视图/对话/消息详情/文件页）一律走自绘 ScrollArea 组件（_components/ScrollArea.tsx）：
|
||
原生滚动条彻底隐藏（零占位、永不挤版面），自绘 thumb 悬浮在内衬/列间隔上——
|
||
移入立即现身、移出/停止滚动 800ms 淡出、可拖拽。原生滚动条的伪类/变量动态切换在 Blink
|
||
不触发重绘（实测），故不再用任何原生方案做显隐。
|
||
其余零散原生滚动条（表格横滚等）：静态细条融入设计系统。 */
|
||
.proto-root { scrollbar-width: thin; scrollbar-color: #c9ced6 transparent; }
|
||
|
||
/* 自绘滚动区骨架 */
|
||
.proto-root .jc-sa { position: relative; min-width: 0; }
|
||
.proto-root .jc-sa--fill { flex: 1 1 auto; min-height: 0; }
|
||
.proto-root .jc-sa--full { height: 100%; min-height: 0; }
|
||
.proto-root .jc-sa-vp { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
|
||
.proto-root .jc-sa-vp::-webkit-scrollbar { display: none; }
|
||
.proto-root .jc-sa-thumb { position: absolute; top: 0; width: 5px; border-radius: 999px; background: rgba(31, 35, 41, .32); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 8; }
|
||
.proto-root .jc-sa-thumb.on { opacity: 1; pointer-events: auto; }
|
||
.proto-root .jc-sa-thumb:hover,
|
||
.proto-root .jc-sa-thumb:active { background: rgba(31, 35, 41, .5); }
|
||
|
||
.proto-root ::selection { background: var(--brand-soft); }
|
||
|
||
/* ============================== 外壳 / 导航 ============================== */
|
||
/* 品牌标与 AI 头像共用「AI 在场」渐变 + 呼吸光晕（签名元素之一） */
|
||
.proto-root .app-nav-mark {
|
||
background: var(--ai-grad);
|
||
animation: aiBreath 4.2s ease-in-out infinite;
|
||
}
|
||
.proto-root .icon-button { transition: background var(--t-fast), color var(--t-fast); }
|
||
.proto-root .top-search { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .top-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51, 112, 255, .14); }
|
||
|
||
@keyframes aiBreath {
|
||
0%, 100% { box-shadow: 0 2px 8px rgba(51, 112, 255, .32); }
|
||
50% { box-shadow: 0 3px 18px rgba(127, 59, 245, .38); }
|
||
}
|
||
|
||
/* ====================== 模块占位页（消息 / 纪要 / 日报） ====================== */
|
||
.proto-root .jc-mod-stage { min-width: 0; min-height: 0; display: grid; place-items: center; padding: 24px; }
|
||
.proto-root .jc-mod-hero { width: min(560px, 92%); background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: var(--shadow-2); padding: 44px 48px 38px; text-align: center; position: relative; overflow: hidden; animation: rise var(--t-med) both; }
|
||
.proto-root .jc-mod-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ai-grad); }
|
||
.proto-root .jc-mod-hero-ico { width: 60px; height: 60px; margin: 0 auto; border-radius: 17px; display: grid; place-items: center; background: var(--ai-grad); color: #fff; box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-mod-hero-tag { display: inline-flex; margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 3px 12px; }
|
||
.proto-root .jc-mod-hero h2 { margin: 10px 0 0; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
|
||
.proto-root .jc-mod-hero > p { margin: 10px auto 0; max-width: 40em; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
|
||
.proto-root .jc-mod-hero-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
|
||
.proto-root .jc-mod-hero-chips span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px; }
|
||
.proto-root .jc-mod-hero-chips svg { color: var(--brand); }
|
||
.proto-root .jc-mod-hero-foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-soft); font-size: 12px; color: var(--ink-4); }
|
||
|
||
/* ===== 三栏衔接：列表区 / 视图区 / 对话区统一为三张等距同规格卡片 =====
|
||
覆盖 vendor 的「左中融合 + 右侧浮卡」旧结构：等间距 gutter、同圆角、同描边、同投影 */
|
||
/* 对话区宽度 = var(--jc-chat-w)（用户拖拽分隔柄写入 workspace inline style），未拖时走各断点默认 */
|
||
.proto-root .workspace { position: relative; gap: 12px; padding: 12px 14px; --jc-ws-pr: 14px; --jcai-ai-chat-width: var(--jc-chat-w, 440px); grid-template-columns: minmax(var(--jc-side-min), 310px) minmax(var(--jc-work-min), 1fr) minmax(var(--jc-chat-min), var(--jcai-ai-chat-width)); }
|
||
/* 收起态 grid：无媒体查询、全断点生效，覆盖 vendor 各断点的三栏定义（修列错位 bug）。
|
||
清单收起→[视图区 1fr | 会话区]；会话收起→[清单 | 视图区 1fr]；都收起→[视图区 1fr]。 */
|
||
.proto-root .workspace.jc-side-collapsed:not(.jc-chat-collapsed) { grid-template-columns: minmax(0, 1fr) var(--jcai-ai-chat-width, 440px); }
|
||
.proto-root .workspace.jc-chat-collapsed:not(.jc-side-collapsed) { grid-template-columns: 256px minmax(0, 1fr); }
|
||
.proto-root .workspace.jc-side-collapsed.jc-chat-collapsed { grid-template-columns: minmax(0, 1fr); }
|
||
.proto-root .workspace .task-sidebar {
|
||
border: 1px solid var(--line-soft) !important; /* 盖掉 vendor 的拼接线(!important) */
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow-1) !important; /* 盖掉 vendor 的 inset 拼接阴影 */
|
||
background: #fff;
|
||
}
|
||
/* 视图区不再有外层卡：透明容器，画布上直接摆「驾驶舱 + 工作视图」两张卡；
|
||
仅二级文件界面（.jc-panel-card）恢复面板卡外观 */
|
||
.proto-root .workspace .execution-panel:not(.jc-panel-card) {
|
||
border: 0 !important;
|
||
border-radius: 0;
|
||
box-shadow: none !important;
|
||
background: transparent;
|
||
display: flex; /* 单列填满：ScrollArea(jc-sa--fill) 接管滚动 */
|
||
flex-direction: column;
|
||
overflow: visible; /* 放行自绘 thumb 悬进列间 gutter（inset 负值） */
|
||
}
|
||
.proto-root .workspace .execution-panel.jc-panel-card {
|
||
border: 1px solid var(--line-soft) !important;
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow-1);
|
||
background: #fff;
|
||
overflow: hidden;
|
||
}
|
||
/*
|
||
空态要在这张卡里**上下居中**,不是贴着顶。
|
||
|
||
`.jc-empty` 早就写了 `margin: auto`,可它一直只把自己横向居中 ——
|
||
`margin-top/bottom: auto` 只有在 flex/grid 容器里才吃得开,在块级容器里算 0。
|
||
而这张卡(`.jc-panel-card`)恰恰没设 display:flex(设了 flex 的是它的反面
|
||
`:not(.jc-panel-card)`),于是五个模块的空态全贴在卡的顶边上。
|
||
|
||
只挑「直接儿子是空态」的那些卡改 —— `DocPanel`(纪要正文)用的是同一个类名,
|
||
它里头是一整块要滚的文档,居中了就成了上下留白、内容夹在中间。
|
||
`:has()` 在这儿正好:按内容挑,不必给六处组件各加一个修饰类。 */
|
||
.proto-root .workspace .execution-panel.jc-panel-card:has(> .jc-empty) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.proto-root .session-chat { border-radius: 12px; }
|
||
/* 窄屏（≤1380 视口）：收窄三栏配比，保证对话区不被裁切（拖拽值 --jc-chat-w 仍优先） */
|
||
@media (max-width: 1380px) {
|
||
.proto-root .workspace { --jc-ws-pr: 12px; --jcai-ai-chat-width: var(--jc-chat-w, clamp(430px, 34vw, 560px)); grid-template-columns: minmax(var(--jc-side-min), 256px) minmax(var(--jc-work-min), 1fr) minmax(var(--jc-chat-min), var(--jcai-ai-chat-width)); gap: 10px; padding: 10px 12px; }
|
||
}
|
||
|
||
/* 对话区/视图区可调比例：workspace 直属分隔柄，锚在「视图区↔对话区」的 12px gutter 上
|
||
（不能放进 .session-chat——其 overflow:hidden 会裁掉负偏移的柄）；拖拽调宽、双击复位 */
|
||
/* 柄贴对话区左缘（跨边 -1/+5px），gutter 左半留给视图区自绘 thumb，两者不抢点击 */
|
||
/*
|
||
* 柄锚在**对话区那一列的真实左缘**,不按 `--jcai-ai-chat-width` 算。
|
||
*
|
||
* 原来是 `position:absolute; right: calc(var(--jcai-ai-chat-width) + …)` ——
|
||
* 那要求对话区的实际宽度恰好等于变量值。自从对话区改成 `minmax(0, var(…))`
|
||
* (为了给工作区让出地板),它可以比变量窄,柄就按老位置停在原地、飘进工作区。
|
||
*
|
||
* 改用栅格定位:`grid-column: -2 / -1` 指的是**最后一列**,列数变了也跟得上
|
||
* (清单收起后只剩两列,-2 仍然是对话区那列)。柄与对话区重叠放在同一格,
|
||
* `justify-self: start` + 负外边距让它跨在缝上 —— 缝在哪它就在哪。
|
||
*/
|
||
/* 对话区与柄**钉在同一格**:柄显式占了最后一列,对话区若还走自动排位会被顶到第二行 */
|
||
.proto-root .workspace > .session-chat {
|
||
grid-column: -2 / -1;
|
||
grid-row: 1;
|
||
}
|
||
|
||
.proto-root .jc-vsplit {
|
||
position: relative;
|
||
grid-column: -2 / -1;
|
||
grid-row: 1;
|
||
justify-self: start;
|
||
align-self: stretch;
|
||
margin: 12px 0 12px -5px;
|
||
width: 6px;
|
||
z-index: 7;
|
||
cursor: col-resize;
|
||
display: grid;
|
||
place-items: center;
|
||
touch-action: none;
|
||
}
|
||
.proto-root .jc-vsplit::before { content: ""; width: 3px; height: 44px; border-radius: 999px; background: var(--ink-4); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), height var(--t-fast); }
|
||
.proto-root .jc-vsplit:hover::before { opacity: .55; }
|
||
.proto-root .jc-vsplit.dragging::before { opacity: 1; height: 64px; background: var(--brand); }
|
||
|
||
/* ============================== 任务侧栏 ============================== */
|
||
/* 统一 12px 网格节奏：卡间距 = 容器内衬 = 列间 gutter = 12（三栏一个拍子）。
|
||
滚动统一走自绘 ScrollArea（原生条零占位），padding 即视觉衬，无需滚道补偿 */
|
||
.proto-root .task-sidebar .task-list { background: var(--wl-bg); display: flex; flex-direction: column; gap: 12px; padding: 12px; }
|
||
.proto-root .task-sidebar .primary-square { display: grid; place-items: center; transition: transform var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .task-sidebar .primary-square:hover { transform: translateY(-1px); box-shadow: var(--shadow-brand); }
|
||
.proto-root .task-sidebar .task-card { transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .task-sidebar .task-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 35, 41, .09); }
|
||
.proto-root .status-filter-row button { transition: background var(--t-fast), color var(--t-fast); }
|
||
|
||
/* ===== 任务卡（信息结构：头区[动效图标+域/来源+时效] → 标题 → 摘要 → 状态+进度 → 统计+负责人） ===== */
|
||
.proto-root .task-card.jc-tc { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 10px 12px 9px; border-radius: 11px; }
|
||
.proto-root .task-card.jc-tc:not(.selected) { background: #fff; border: 1px solid var(--cardline); box-shadow: var(--card-shadow); }
|
||
.proto-root .task-card.jc-tc:hover:not(.selected) { border-color: #cdd5df; box-shadow: 0 3px 11px -3px rgba(31,35,41,.14); }
|
||
.proto-root .jc-tc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
/* 动效图标：任务色渐变方块，呼吸浮动；选中卡外圈追加旋转光环 */
|
||
.proto-root .jc-tc-ico { position: relative; width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--task-color, var(--brand)), color-mix(in srgb, var(--task-color, var(--brand)) 58%, #1c2b6b)); animation: jcIcoBreath 3.6s ease-in-out infinite; }
|
||
@keyframes jcIcoBreath {
|
||
0%, 100% { box-shadow: 0 2px 6px color-mix(in srgb, var(--task-color, var(--brand)) 35%, transparent); transform: translateY(0); }
|
||
50% { box-shadow: 0 5px 14px color-mix(in srgb, var(--task-color, var(--brand)) 52%, transparent); transform: translateY(-1.5px); }
|
||
}
|
||
.proto-root .task-card.selected .jc-tc-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; padding: 1.5px; background: conic-gradient(from 0deg, transparent 12%, var(--task-color, var(--brand)), transparent 62%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: jcSpin 2.6s linear infinite; }
|
||
@keyframes jcSpin { to { transform: rotate(360deg); } }
|
||
.proto-root .jc-tc-tag { flex: 1; min-width: 0; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--task-color, var(--brand)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
/* 主题行：小图标 + 主题（图标随任务色） */
|
||
.proto-root .jc-tc-subjrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.proto-root .jc-tc-subjrow .jc-tc-ico { width: 24px; height: 24px; border-radius: 7px; }
|
||
/* 标题最重，摘要最轻 */
|
||
.proto-root .task-card .jc-tc-title { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||
/* 状态 + 任务色渐变进度 + 等宽百分比 */
|
||
/* ================= 消息 / 纪要 / 日报 模块工作区（三栏骨架复用任务模块） ================= */
|
||
/* 中栏滚动容器：统一内边距，彻底告别贴边；内容按分区卡片竖排 */
|
||
.proto-root .jc-mod-scroll { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 30px; background: #fff; animation: rise var(--t-med) both; }
|
||
|
||
/* ---- 通用小件：头像 / 头像组 / 状态胶囊 ---- */
|
||
.proto-root .jc-ava { flex: none; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px rgba(31,35,41,.2); }
|
||
.proto-root .jc-ava-stack { display: inline-flex; align-items: center; }
|
||
.proto-root .jc-ava-slot { margin-left: -8px; border-radius: 999px; box-shadow: 0 0 0 2px #fff; }
|
||
.proto-root .jc-ava-slot:first-child { margin-left: 0; }
|
||
.proto-root .jc-ava-more { width: 26px; height: 26px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ink-3); background: var(--soft); border: 1px solid var(--line); box-shadow: 0 0 0 2px #fff; }
|
||
.proto-root .jc-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 9px; border: 1px solid; white-space: nowrap; }
|
||
.proto-root .jc-chip i { width: 5px; height: 5px; border-radius: 999px; flex: none; animation: wfpulse 1.5s ease-in-out infinite; }
|
||
.proto-root .jc-chip.t-todo { color: var(--danger); background: var(--danger-soft); border-color: #f6c6c3; }
|
||
.proto-root .jc-chip.t-todo i { background: var(--danger-accent); }
|
||
.proto-root .jc-chip.t-doing, .proto-root .jc-chip.t-brand { color: var(--brand-deep); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-chip.t-doing i, .proto-root .jc-chip.t-brand i { background: var(--brand); }
|
||
.proto-root .jc-chip.t-done, .proto-root .jc-chip.t-ok { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-chip.t-done i, .proto-root .jc-chip.t-ok i { background: var(--ok-accent); }
|
||
.proto-root .jc-chip.t-warn { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-chip.t-warn i { background: var(--warn-accent); }
|
||
.proto-root .jc-dim { color: var(--ink-4); }
|
||
.proto-root .jc-mono { font-family: var(--mono); font-size: .92em; color: var(--ink-4); letter-spacing: -.02em; }
|
||
|
||
/* ---- 文档头 Hero ---- */
|
||
.proto-root .jc-hero { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(118deg, var(--brand-wash), #f6f3ff 55%, #fbfcff); border: 1px solid var(--brand-soft); border-radius: 16px; padding: 16px 18px; }
|
||
.proto-root .jc-hero-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px -5px rgba(51,112,255,.6); }
|
||
.proto-root .jc-hero-txt { flex: 1; min-width: 0; }
|
||
.proto-root .jc-hero-kicker { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--brand-deep); background: var(--brand-wash); border-radius: 5px; padding: 1px 7px; margin-bottom: 5px; }
|
||
.proto-root .jc-hero-txt h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.4; letter-spacing: -.01em; }
|
||
.proto-root .jc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-hero-meta b { font-weight: 700; color: var(--ink-2); }
|
||
.proto-root .jc-hero-chip { flex: none; padding-top: 2px; }
|
||
|
||
/* ---- 分区 ---- */
|
||
.proto-root .jc-sec { display: flex; flex-direction: column; gap: 11px; }
|
||
.proto-root .jc-sec-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink-2); }
|
||
.proto-root .jc-sec-head svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 7px; color: var(--brand-deep); background: var(--brand-wash); box-sizing: border-box; }
|
||
.proto-root .jc-sec-extra { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0; color: var(--ink-4); }
|
||
|
||
/* ---- 性质横幅 ---- */
|
||
.proto-root .jc-banner { display: flex; align-items: center; gap: 9px; border-radius: 11px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; border: 1px solid; }
|
||
.proto-root .jc-banner.t-brand { color: var(--brand-deep); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-banner.t-warn { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-banner.t-ok { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
|
||
/* ---- 邮件正文卡 ---- */
|
||
.proto-root .jc-letter { border: 1px solid var(--line-soft); border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; background: linear-gradient(180deg, #fbfcfe, #fff); padding: 14px 16px; }
|
||
.proto-root .jc-letter-head { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-letter-from { flex: 1; min-width: 0; line-height: 1.35; }
|
||
.proto-root .jc-letter-from strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-letter-from span { display: block; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-letter-p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }
|
||
.proto-root .jc-letter-p:last-child { margin-bottom: 0; }
|
||
.proto-root .jc-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
||
.proto-root .jc-att { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px 5px 6px; }
|
||
.proto-root .jc-att-ico { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
|
||
.proto-root .jc-att-ico.k-excel { background: linear-gradient(140deg, #34c724, #1a9611); }
|
||
.proto-root .jc-att-ico.k-pdf { background: linear-gradient(140deg, #f54a45, #c9302c); }
|
||
.proto-root .jc-att-ico.k-word { background: linear-gradient(140deg, #3370ff, #245bdb); }
|
||
.proto-root .jc-att em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
|
||
.proto-root .jc-att i { font-style: normal; font-size: 10px; color: var(--ink-4); font-family: var(--mono); }
|
||
|
||
/* ---- AI 提取要点 ---- */
|
||
.proto-root .jc-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||
.proto-root .jc-factc { display: flex; align-items: center; gap: 9px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px; }
|
||
.proto-root .jc-factc-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-factc-txt { min-width: 0; line-height: 1.35; }
|
||
.proto-root .jc-factc-txt em { display: block; font-style: normal; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-factc-txt strong { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
|
||
|
||
/* ---- 关联任务卡 ---- */
|
||
.proto-root .jc-taskcard { display: flex; align-items: center; gap: 11px; border: 1px solid var(--brand-soft); background: linear-gradient(120deg, var(--brand-wash), #fff 70%); border-radius: 12px; padding: 11px 13px; }
|
||
.proto-root .jc-taskcard-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); box-shadow: 0 3px 8px -2px rgba(51,112,255,.5); }
|
||
.proto-root .jc-taskcard-txt { flex: 1; min-width: 0; line-height: 1.4; }
|
||
/* 标题折行显示完整（宁可两行，也不截半句） */
|
||
.proto-root .jc-taskcard-txt strong { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--ink); }
|
||
.proto-root .jc-taskcard-txt span { display: block; font-size: 10.5px; line-height: 1.5; color: var(--ink-4); }
|
||
.proto-root .jc-taskcard .card-btn { flex: none; }
|
||
|
||
/* ===== 消息（邮件）：收件人行 + 外部徽标 ===== */
|
||
.proto-root .jc-letter-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-letter-addr em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--ink-4); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; }
|
||
.proto-root .jc-ext { margin-left: 7px; font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--warn); background: var(--warn-soft); border-radius: 5px; padding: 1px 6px; vertical-align: middle; }
|
||
|
||
/* ===== 下半：AI 分析区（淡品牌渐变分区，与上半原文视觉分离）===== */
|
||
.proto-root .jc-ai-zone { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; padding: 15px; border: 1px solid var(--brand-soft); border-radius: 16px; background: linear-gradient(180deg, var(--brand-wash), #fff 52%); }
|
||
.proto-root .jc-ai-head { display: flex; align-items: flex-start; gap: 10px; }
|
||
.proto-root .jc-ai-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(120deg, var(--brand), #7f3bf5); border-radius: 999px; padding: 4px 11px; box-shadow: 0 2px 7px -2px rgba(51, 112, 255, .6); }
|
||
.proto-root .jc-ai-head p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.7; font-weight: 600; color: var(--ink-2); }
|
||
|
||
/* 触发任务卡组：白卡浮在 AI 区上，左侧按性质着色 */
|
||
.proto-root .jc-trigs { display: flex; flex-direction: column; gap: 9px; }
|
||
.proto-root .jc-trig { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--cardline); border-left: 3px solid var(--line); border-radius: 11px; padding: 11px 13px; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-trig.t-brand { border-left-color: var(--brand); }
|
||
.proto-root .jc-trig.t-warn { border-left-color: var(--warn); }
|
||
.proto-root .jc-trig.t-doing { border-left-color: #7f3bf5; }
|
||
.proto-root .jc-trig.t-ok { border-left-color: var(--ok); }
|
||
.proto-root .jc-trig-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-trig-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.proto-root .jc-trig-top strong { font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-trig-kind { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 7px; }
|
||
.proto-root .jc-trig-kind.t-brand { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-trig-kind.t-warn { color: var(--warn); background: var(--warn-soft); }
|
||
.proto-root .jc-trig-kind.t-doing { color: #5b21cf; background: #f0e9ff; }
|
||
.proto-root .jc-trig-kind.t-ok { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .jc-trig-owner { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
|
||
.proto-root .jc-trig-owner em { font-style: normal; font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 1px 6px; }
|
||
.proto-root .jc-trig-owner em.self { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-trig-owner em.other { color: var(--warn); background: var(--warn-soft); }
|
||
.proto-root .jc-trig-reason { font-size: 11px; line-height: 1.55; color: var(--ink-3); }
|
||
.proto-root .jc-trig-act { flex: none; }
|
||
.proto-root .jc-trig-act .jc-chip { white-space: nowrap; }
|
||
|
||
/* AI 判断无需触发 / 触发之外的补充说明 */
|
||
.proto-root .jc-notrig { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); background: var(--soft); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 13px; }
|
||
.proto-root .jc-notrig svg { flex: none; margin-top: 1px; color: var(--ink-4); }
|
||
|
||
/* ===== 系统消息：触发事件卡（替代邮件正文卡，紫色系统味）===== */
|
||
.proto-root .jc-sysev { border: 1px solid var(--line-soft); border-left: 3px solid #7f3bf5; border-radius: 0 12px 12px 0; background: linear-gradient(180deg, #fbfaff, #fff); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
|
||
.proto-root .jc-sysev-head { display: flex; align-items: center; gap: 10px; }
|
||
.proto-root .jc-sysev-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #7f3bf5, #5b21cf); box-shadow: 0 3px 8px -2px rgba(127, 59, 245, .5); }
|
||
.proto-root .jc-sysev-tt { flex: 1; min-width: 0; line-height: 1.35; }
|
||
.proto-root .jc-sysev-tt em { display: block; font-style: normal; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-sysev-tt strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-sysev-cycle { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #5b21cf; background: #f0e9ff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
|
||
.proto-root .jc-sysev-runs { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 9px 12px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; }
|
||
.proto-root .jc-sysev-runs > span { display: flex; align-items: center; gap: 7px; font-size: 11px; }
|
||
.proto-root .jc-sysev-runs em { font-style: normal; color: var(--ink-4); }
|
||
.proto-root .jc-sysev-runs b { font-weight: 700; color: var(--ink-2); }
|
||
.proto-root .jc-sysev-note { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
|
||
.proto-root .jc-sysev-note svg { flex: none; margin-top: 1px; color: #7f3bf5; }
|
||
/* 事件触发（k-event）= 琥珀色调，与周期触发（k-cycle 紫）区分 */
|
||
.proto-root .jc-sysev.k-event { border-left-color: var(--warn); background: linear-gradient(180deg, #fffaf3, #fff); }
|
||
.proto-root .jc-sysev.k-event .jc-sysev-ico { background: linear-gradient(140deg, #ff8800, #de7802); box-shadow: 0 3px 8px -2px rgba(222, 120, 2, .45); }
|
||
.proto-root .jc-sysev.k-event .jc-sysev-cycle { color: var(--warn); background: var(--warn-soft); }
|
||
.proto-root .jc-sysev.k-event .jc-sysev-note svg { color: var(--warn); }
|
||
|
||
/* ===== 纪要 / 日报：待建设占位 ===== */
|
||
.proto-root .workspace.jc-coming-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
|
||
.proto-root .jc-coming { max-width: 460px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 36px 30px; background: #fff; border: 1px solid var(--cardline); border-radius: 20px; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-coming-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), #7f3bf5); box-shadow: 0 8px 20px -6px rgba(51, 112, 255, .5); }
|
||
.proto-root .jc-coming-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--brand-deep); background: var(--brand-wash); border-radius: 999px; padding: 4px 12px; }
|
||
.proto-root .jc-coming-tag i { width: 6px; height: 6px; border-radius: 999px; flex: none; background: var(--brand); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
.proto-root .jc-coming h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-coming > p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
|
||
.proto-root .jc-coming-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
|
||
.proto-root .jc-coming-list li { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: left; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 13px; }
|
||
.proto-root .jc-coming-list li svg { flex: none; color: var(--brand); }
|
||
.proto-root .jc-coming-foot { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .card-btn svg { vertical-align: -2px; }
|
||
|
||
/* ---- 底部动作条 ---- */
|
||
.proto-root .jc-mod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
|
||
.proto-root .jc-mod-donehint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok); }
|
||
|
||
/* ---- 左清单卡（消息/纪要/日报共用 jc-mcard） ---- */
|
||
.proto-root .jc-mcard { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 10px 11px; border: 1px solid var(--cardline); border-radius: 12px; background: #fff; box-shadow: var(--card-shadow); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-mcard:hover:not(.selected) { border-color: var(--line); box-shadow: 0 3px 10px -3px rgba(31,35,41,.14); }
|
||
.proto-root .jc-mcard.selected { border-color: var(--brand-soft); background: var(--brand-wash); box-shadow: var(--shadow-1); }
|
||
.proto-root .jc-mcard.unread { position: relative; }
|
||
.proto-root .jc-mcard.unread::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--danger-accent); }
|
||
.proto-root .jc-mcard-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; margin-top: 1px; box-shadow: 0 2px 6px -1px rgba(31,35,41,.28); }
|
||
.proto-root .jc-mcard-datebox { flex: none; width: 34px; height: 38px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--brand-wash), #fff); border: 1px solid var(--brand-soft); }
|
||
.proto-root .jc-mcard-datebox b { font-size: 15px; font-weight: 800; color: var(--brand-deep); font-family: var(--mono); line-height: 1; }
|
||
.proto-root .jc-mcard-datebox i { font-style: normal; font-size: 9px; color: var(--ink-4); margin-top: 1px; }
|
||
.proto-root .jc-mcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
|
||
.proto-root .jc-mcard-top { display: flex; align-items: center; gap: 6px; }
|
||
.proto-root .jc-mcard-top em { flex: 1; min-width: 0; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-mcard-title { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-mcard-title.jc-clamp2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||
/* 整句折行：标题是卡片的必要信息，不截断（长主题多占一行也认了） */
|
||
.proto-root .jc-mcard-title.jc-wrap { white-space: normal; overflow-wrap: anywhere; }
|
||
.proto-root .jc-mcard-foot { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-mcard-foot svg { color: var(--ink-4); }
|
||
.proto-root .jc-mcard-foot i { font-style: normal; margin-left: auto; font-family: var(--mono); white-space: nowrap; }
|
||
|
||
/* ---- 纪要：出席人 / Tab / 议题 / 决议 / 行动项 / 逐字稿 ---- */
|
||
.proto-root .jc-attendees { display: flex; align-items: center; gap: 12px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 12px; padding: 11px 15px; }
|
||
.proto-root .jc-attendees-txt { min-width: 0; line-height: 1.4; }
|
||
.proto-root .jc-attendees-txt strong { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-attendees-txt span { display: block; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-tabs2 { display: flex; gap: 4px; padding: 4px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 11px; }
|
||
.proto-root .jc-tabs2 button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-tabs2 button:hover:not(.active) { color: var(--ink-2); }
|
||
.proto-root .jc-tabs2 button.active { background: #fff; color: var(--brand-deep); box-shadow: 0 1px 3px rgba(31,35,41,.1); }
|
||
.proto-root .jc-tabs2 button i { font-style: normal; font-size: 10px; font-weight: 700; font-family: var(--mono); color: #fff; background: var(--brand); border-radius: 999px; padding: 0 6px; }
|
||
.proto-root .jc-tabs2 button:not(.active) i { background: var(--ink-4); }
|
||
.proto-root .jc-topics, .proto-root .jc-res-list, .proto-root .jc-acts { display: flex; flex-direction: column; gap: 10px; }
|
||
.proto-root .jc-topic { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--soft); padding: 11px 13px; transition: border-color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-topic:hover { border-color: var(--brand-soft); background: #fff; }
|
||
.proto-root .jc-topic-n { flex: none; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--brand), #7f3bf5); }
|
||
.proto-root .jc-topic-txt { min-width: 0; line-height: 1.45; }
|
||
.proto-root .jc-topic-txt strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-topic-txt span { display: block; font-size: 11px; color: var(--ink-4); margin-top: 1px; }
|
||
.proto-root .jc-res { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--soft); padding: 11px 13px; transition: border-color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-res:hover { border-color: var(--brand-soft); background: #fff; }
|
||
.proto-root .jc-res-n { flex: none; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); }
|
||
.proto-root .jc-res p { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
|
||
.proto-root .jc-res-open { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--brand-deep); display: grid; place-items: center; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-res-open:hover { background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-act { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--soft); padding: 10px 13px; }
|
||
.proto-root .jc-act-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; }
|
||
.proto-root .jc-act-dot.d-ok { background: var(--ok-accent); }
|
||
.proto-root .jc-act-dot.d-doing { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
|
||
.proto-root .jc-act-dot.d-todo { background: #c4cad3; }
|
||
.proto-root .jc-act-what { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-act-who { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
|
||
.proto-root .jc-act-due { flex: none; font-size: 11px; }
|
||
.proto-root .jc-script { display: flex; flex-direction: column; gap: 15px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--soft); padding: 16px 17px; }
|
||
.proto-root .jc-scriptline { display: flex; gap: 10px; }
|
||
.proto-root .jc-script-body { flex: 1; min-width: 0; }
|
||
.proto-root .jc-script-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
|
||
.proto-root .jc-script-head strong { font-size: 12px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-script-head em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border-radius: 4px; padding: 0 5px; }
|
||
.proto-root .jc-script-head time { margin-left: auto; font-size: 10px; }
|
||
.proto-root .jc-script-bubble { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); background: #fff; border: 1px solid var(--line-soft); border-radius: 3px 11px 11px 11px; padding: 9px 13px; }
|
||
|
||
/* ---- 日报：亮点 / 总结 / 统计卡 / 时间轴 ---- */
|
||
.proto-root .jc-highlight { display: flex; align-items: flex-start; gap: 9px; border-radius: 12px; padding: 12px 15px; font-size: 12.5px; font-weight: 600; line-height: 1.7; color: var(--brand-deep); background: linear-gradient(120deg, var(--brand-wash), #f3f0ff); border: 1px solid var(--brand-soft); }
|
||
.proto-root .jc-highlight svg { flex: none; margin-top: 2px; color: #7f3bf5; }
|
||
.proto-root .jc-summary { font-size: 12.5px; line-height: 1.9; color: var(--ink-2); background: var(--soft); border-radius: 3px 12px 12px 3px; border-left: 3px solid var(--brand-soft); padding: 12px 15px; }
|
||
.proto-root .jc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(114px, 1fr)); gap: 11px; }
|
||
.proto-root .jc-stat { position: relative; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--soft); padding: 13px 14px; overflow: hidden; }
|
||
.proto-root .jc-stat-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--brand-deep); background: var(--brand-wash); margin-bottom: 3px; }
|
||
.proto-root .jc-stat-v { font-size: 21px; font-weight: 800; color: var(--ink); font-family: var(--mono); line-height: 1; letter-spacing: -.02em; }
|
||
.proto-root .jc-stat-v em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-4); font-family: var(--sans); margin-left: 4px; letter-spacing: 0; }
|
||
.proto-root .jc-stat-k { font-size: 11px; color: var(--ink-3); }
|
||
.proto-root .jc-axis { display: flex; flex-direction: column; padding-left: 2px; }
|
||
.proto-root .jc-axis-row { position: relative; display: flex; align-items: baseline; gap: 11px; padding: 7px 0 7px 22px; }
|
||
.proto-root .jc-axis-row::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
|
||
.proto-root .jc-axis-row:first-child::before { top: 11px; }
|
||
.proto-root .jc-axis-row:last-child::before { top: -2px; height: 13px; bottom: auto; }
|
||
.proto-root .jc-axis-node { position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 3px solid var(--nc, var(--brand)); z-index: 1; }
|
||
.proto-root .jc-axis-row time { flex: none; width: 42px; font-size: 11px; }
|
||
.proto-root .jc-axis-row p { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
|
||
|
||
/* ---- 员工补充 ---- */
|
||
.proto-root .jc-sup { display: block; box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 12.5px; line-height: 1.7; color: var(--ink); background: #fff; resize: vertical; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-sup:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,112,255,.12); }
|
||
.proto-root .jc-sup:disabled { background: #f3f4f6; color: #5c626b; }
|
||
|
||
/* ===== 左侧一体化导航轨：品牌 → 五大模块 → 轨底身份区(2026-08-26 用户定:顶栏撤了,身份收回轨底)===== */
|
||
.proto-root .app-nav { padding: 14px 10px 12px; }
|
||
.proto-root .jc-rail-brand { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--ink-3); margin: -4px 0 6px; }
|
||
.proto-root .app-nav button { min-height: 58px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .app-nav button:active { transform: scale(.97); }
|
||
.proto-root .jc-nav-ava { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; line-height: 1; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(140deg, #2bc7d4, #0e9fd8); box-shadow: 0 2px 6px rgba(14, 159, 216, .35); }
|
||
|
||
/* ===== 主区:顶栏已撤(2026-08-26 用户定),内容区直接铺满 ===== */
|
||
.proto-root .app-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
||
.proto-root .app-main-body { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
||
.proto-root .app-main-body > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
|
||
.proto-root .jc-topbar { flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); }
|
||
.proto-root .jc-topbar-user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
|
||
.proto-root .jc-topbar-name { font-size: 13px; color: var(--ink-3); }
|
||
/* 外壳顶栏专属:任务标题栏(共用 .jc-topbar)那条重构规则带 overflow:hidden,
|
||
会把右侧身份菜单的下拉裁得只剩顶部一小条 —— 这里放开(2026-08-25 用户报:下拉被遮挡) */
|
||
.proto-root .jc-topbar.jc-topbar-app { overflow: visible; border-radius: 0; height: 44px; padding: 0 20px; margin-bottom: 0; } /* 圆角/56px 高/大内边距/底部间距都是任务标题栏渗进来的,外壳顶栏不要(2026-08-25 用户定:44px 通栏) */
|
||
/* 顶缘蓝紫渐变条也是渗进来的(::before),外壳顶栏撤掉(2026-08-25 用户定) */
|
||
.proto-root .jc-topbar.jc-topbar-app::before { display: none; }
|
||
/* 但右上角装饰光晕定位 right:-60px,裁切一放开它就探出视口右缘 60px,整页出现横向滚动
|
||
(2026-08-25 用户报:页面能左右滑)—— 把它收回盒内,光晕照留 */
|
||
.proto-root .jc-topbar.jc-topbar-app::after { right: 0; }
|
||
/* 身份菜单:头像 + 姓名,悬停出下拉(个人中心 / 设计中心 / 退出登录)—— 纯 CSS 悬停无 JS;
|
||
登出入口收进下拉,是全站唯一入口(2026-08-25 用户定);2026-08-26 从顶栏挪进左轨底部(见下方 rail 变体) */
|
||
.proto-root .jc-usermenu { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 10px; cursor: default; color: var(--ink-4); transition: background var(--t-fast); }
|
||
.proto-root .jc-usermenu:hover { background: var(--soft); }
|
||
.proto-root .jc-usermenu .jc-nav-ava { width: 28px; height: 28px; font-size: 12px; }
|
||
/* 悬停桥:触发区与菜单之间的间隙由它补住,鼠标下移不断 hover */
|
||
.proto-root .jc-usermenu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
|
||
.proto-root .jc-usermenu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 136px; padding: 6px; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-usermenu:hover .jc-usermenu-pop, .proto-root .jc-usermenu:focus-within .jc-usermenu-pop { opacity: 1; transform: none; pointer-events: auto; }
|
||
.proto-root .jc-usermenu-pop button, .proto-root .jc-usermenu-pop a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; color: var(--ink-2); cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box; transition: background var(--t-fast), color var(--t-fast); }
|
||
.proto-root .jc-usermenu-pop button:hover, .proto-root .jc-usermenu-pop a:hover { background: var(--soft); }
|
||
.proto-root .jc-usermenu-pop button.danger:hover { background: var(--danger-soft); color: var(--danger); }
|
||
.proto-root .jc-usermenu-pop button:disabled { opacity: .6; cursor: default; }
|
||
|
||
/* 轨底变体(2026-08-26 用户定):轨宽 78px,头像上姓名下竖排,与模块钮之间一道细分隔;
|
||
下拉改从轨右侧弹出、底缘与触发区对齐,悬停桥跟着转到右侧 */
|
||
.proto-root .jc-usermenu-rail { margin-top: auto; align-self: stretch; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 2px 4px; border-top: 1px solid var(--line-soft); border-radius: 0; }
|
||
.proto-root .jc-usermenu-rail:hover { background: none; }
|
||
.proto-root .jc-usermenu-rail .jc-topbar-name { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; text-align: center; }
|
||
.proto-root .jc-usermenu-rail::after { top: 0; bottom: 0; left: 100%; right: auto; width: 10px; height: auto; }
|
||
.proto-root .jc-usermenu-rail .jc-usermenu-pop { top: auto; right: auto; bottom: 0; left: calc(100% + 10px); transform: translateX(-4px); }
|
||
|
||
/* 「建设中」提示弹窗:未开放模块(审批/消息/纪要/汇报)与个人中心的占位口径 —— 不跳页只弹提示 */
|
||
.proto-root .jc-wip-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(31, 35, 41, .45); }
|
||
.proto-root .jc-wip-modal { width: 360px; max-width: 92vw; padding: 24px 20px 18px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(31, 35, 41, .22); text-align: center; animation: rise var(--t-med) both; }
|
||
.proto-root .jc-wip-ico { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px; display: grid; place-items: center; color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-wip-modal h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
|
||
.proto-root .jc-wip-modal p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
|
||
.proto-root .jc-wip-ok { height: 34px; padding: 0 22px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-wip-ok:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
|
||
|
||
/* 工作清单头：渐变图标点缀 + 两级筛选 */
|
||
.proto-root .jc-wl-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
|
||
.proto-root .jc-wl-head > div { flex: 1; min-width: 0; text-align: left; }
|
||
.proto-root .jc-wl-collapse { flex: none; margin-left: 4px; }
|
||
/* 收起后悬浮边缘拉手（绝对定位，不占列，视图区卡片可贴到最左/最右） */
|
||
/* 展开手柄与「收起」按钮同一高度：贴面板顶部表头行（非竖直居中），高度对齐 icon-button(36px) */
|
||
.proto-root .jc-edge { position: absolute; top: 22px; z-index: 6; width: 16px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink-4); cursor: pointer; box-shadow: 0 2px 8px -2px rgba(31,35,41,.2); transition: background var(--t-fast), color var(--t-fast); }
|
||
.proto-root .jc-edge:hover { background: var(--brand-wash); color: var(--brand-deep); border-color: var(--brand-soft); }
|
||
.proto-root .jc-edge-l { left: 0; border-left: 0; border-radius: 0 9px 9px 0; }
|
||
.proto-root .jc-edge-r { right: 0; border-right: 0; border-radius: 9px 0 0 9px; }
|
||
.proto-root .jc-edge-r svg { transform: scaleX(-1); }
|
||
.proto-root .jc-wl-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), #7f3bf5); box-shadow: 0 3px 8px rgba(51, 112, 255, .28); }
|
||
.proto-root .jc-flt-wrap { display: flex; flex-direction: column; gap: 6px; padding: 2px 12px 12px; border-bottom: 1px solid var(--line-soft); background: #fbfdff; }
|
||
.proto-root .jc-flt { display: flex; gap: 6px; }
|
||
.proto-root .jc-flt button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; border: 1px solid var(--line-soft); background: #fff; border-radius: 8px; padding: 4px 4px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
|
||
/* 悬停给主色洗底+描边、按下给 4% 缩放 —— 2026-08-25 用户报:hover 几乎看不出、点了不知道点没点到 */
|
||
.proto-root .jc-flt button:hover:not(.active) { background: var(--brand-wash); border-color: var(--brand-soft); color: var(--brand-deep); }
|
||
.proto-root .jc-flt button:active { transform: scale(.96); }
|
||
.proto-root .jc-flt button strong { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-4); background: var(--soft); border-radius: 999px; padding: 0 6px; }
|
||
.proto-root .jc-flt button.active { color: var(--brand-deep); border-color: var(--brand-soft); background: var(--brand-wash); font-weight: 700; }
|
||
.proto-root .jc-flt button.active strong { background: #fff; color: var(--brand-deep); }
|
||
/* 清单内检索框 */
|
||
.proto-root .jc-search { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 5px 9px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,112,255,.12); }
|
||
.proto-root .jc-search svg { flex: none; color: var(--ink-4); }
|
||
.proto-root .jc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink); }
|
||
.proto-root .jc-search input::placeholder { color: var(--ink-4); }
|
||
.proto-root .jc-search-x { flex: none; width: 16px; height: 16px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink-3); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
|
||
.proto-root .jc-search-x:hover { background: var(--line-soft); color: var(--ink); }
|
||
.proto-root .jc-list-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 12px; color: var(--ink-4); font-size: 12px; }
|
||
|
||
/* 状态胶囊三态：进行(蓝·脉冲) / 等待(橙·脉冲) / 完成(绿) */
|
||
.proto-root .jc-tc-state { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid; }
|
||
.proto-root .jc-tc-state i { width: 5px; height: 5px; border-radius: 999px; flex: 0 0 auto; }
|
||
.proto-root .jc-tc-state.st-active { color: var(--brand-deep); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-tc-state.st-active i { background: var(--brand); animation: wfpulse 1.8s ease-in-out infinite; }
|
||
.proto-root .jc-tc-state.st-waiting { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-tc-state.st-waiting i { background: var(--warn-accent); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
/* 对话区交互状态角标：工作中(蓝) / 待处理(红) / 等待中(橙) */
|
||
.proto-root .jc-tc-state.i-working { color: var(--brand-deep); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-tc-state.i-working i { background: var(--brand); animation: wfpulse 1.6s ease-in-out infinite; }
|
||
.proto-root .jc-tc-state.i-todo { color: var(--danger); background: var(--danger-soft); border-color: #f6c6c3; }
|
||
.proto-root .jc-tc-state.i-todo i { background: var(--danger-accent); animation: wfpulse 1.35s ease-in-out infinite; }
|
||
.proto-root .jc-tc-state.i-waiting { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-tc-state.i-waiting i { background: var(--warn-accent); animation: wfpulse 1.8s ease-in-out infinite; }
|
||
.proto-root .jc-tc-state.st-done { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-tc-state.st-done i { background: var(--ok-accent); }
|
||
.proto-root .jc-tc-state.st-warn { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-tc-state.st-warn i { background: var(--warn-accent); animation: wfpulse 1.8s ease-in-out infinite; }
|
||
/* 当前流程 · 节点行（进行中显示当前进度所在流程与节点；已完成显示成交摘要） */
|
||
.proto-root .jc-tc-node { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--ink-3); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 8px; padding: 4px 9px; }
|
||
.proto-root .jc-tc-node-dot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--st-auto); }
|
||
.proto-root .jc-tc-node-dot.n-auto { background: var(--st-auto); }
|
||
.proto-root .jc-tc-node-dot.n-execute { background: var(--st-execute); }
|
||
.proto-root .jc-tc-node-dot.n-decision { background: var(--st-decision); }
|
||
.proto-root .jc-tc-node-dot.n-collaborate { background: var(--st-collab); }
|
||
.proto-root .jc-tc-node-dot.n-wait { background: var(--st-wait); }
|
||
.proto-root .jc-tc-node-flow { flex: none; font-weight: 700; color: var(--ink-2); }
|
||
.proto-root .jc-tc-node-sep { flex: none; color: var(--ink-4); }
|
||
.proto-root .jc-tc-node-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-tc-node.done { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-tc-node.done svg { flex: none; color: var(--ok); }
|
||
.proto-root .jc-tc-node-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
|
||
.proto-root .jc-tc-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.proto-root .jc-tc-src { flex: 1; min-width: 0; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-tc-nm { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); font-family: var(--mono); }
|
||
.proto-root .jc-tc-nm svg { color: var(--ok); }
|
||
.proto-root .jc-tc-bar { display: block; height: 3px; border-radius: 999px; background: #eceff3; overflow: hidden; }
|
||
.proto-root .jc-tc-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--task-color, var(--brand)), color-mix(in srgb, var(--task-color, var(--brand)) 62%, #7f3bf5)); transition: width var(--t-med); }
|
||
/* 底部：统计 + 负责人迷你头像 */
|
||
|
||
/* 阶段类型配色（中间里程碑 / 进度 / 会话阶段标签共用） */
|
||
.proto-root .t-auto { --accent: var(--st-auto); --accent-soft: var(--st-auto-soft); }
|
||
.proto-root .t-execute { --accent: var(--st-execute); --accent-soft: var(--st-execute-soft); }
|
||
.proto-root .t-decision { --accent: var(--st-decision); --accent-soft: var(--st-decision-soft); }
|
||
.proto-root .t-collaborate { --accent: var(--st-collab); --accent-soft: var(--st-collab-soft); }
|
||
.proto-root .t-wait { --accent: var(--st-wait); --accent-soft: var(--st-wait-soft); }
|
||
|
||
/* 任务列表收起态：窄栏（展开按钮 + 任务色点） */
|
||
|
||
/* ===== 中间部分：外层无卡，画布上只有两张卡 —— 驾驶舱 + 工作视图 ===== */
|
||
/* 视图区（透明容器）：自绘 thumb 经 ScrollArea inset 负值悬进列间 gutter，
|
||
卡片两侧衬对称、「视图卡→对话区」间距与「清单→视图卡」相等 */
|
||
.proto-root .wf-scroll { display: flex; flex-direction: column; gap: 12px; padding: 0 2px 8px; min-height: 0; background: transparent; }
|
||
/* 短视口下不许压缩内容：整栏滚动而不是把驾驶舱挤扁 */
|
||
.proto-root .wf-scroll > * { flex: 0 0 auto; }
|
||
|
||
/* ===== 驾驶舱（固定结构，自上而下主次分明）：
|
||
头区[业务域+状态 | 负责人] → 主题 → 元信息 → 目标条 → 进度区[大数字 | 当前节点 | 分段条] ===== */
|
||
.proto-root .wf-cockpit { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 18px 22px 16px; box-shadow: var(--shadow-2); }
|
||
.proto-root .wf-cockpit::after { content: ""; position: absolute; right: -50px; top: -70px; width: 220px; height: 220px; border-radius: 999px; background: radial-gradient(circle, rgba(51, 112, 255, .09), transparent 70%); pointer-events: none; }
|
||
.proto-root .wf-cockpit > * { position: relative; z-index: 1; }
|
||
/* 头区：左 = 业务域 + 运行状态；右 = 负责人 */
|
||
.proto-root .jc-cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||
.proto-root .jc-cp-chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.proto-root .jc-cp-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 3px 11px; }
|
||
.proto-root .jc-cp-tag svg { color: var(--brand); }
|
||
.proto-root .jc-cp-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 3px 11px; }
|
||
.proto-root .jc-cp-state::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ok-accent); animation: wfpulse 1.6s ease-in-out infinite; }
|
||
.proto-root .jc-cp-state.done { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-cp-state.done::before { background: var(--brand); animation: none; }
|
||
.proto-root .jc-cp-owner { display: flex; align-items: center; gap: 8px; padding: 4px 13px 4px 5px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; }
|
||
.proto-root .jc-cp-avatar { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(140deg, #2bc7d4, #0e9fd8); color: #fff; font-size: 12px; font-weight: 800; }
|
||
.proto-root .jc-cp-owner-txt { line-height: 1.15; }
|
||
.proto-root .jc-cp-owner-txt strong { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-cp-owner-txt span { display: block; font-size: 10px; color: var(--ink-4); }
|
||
/* 主题（视觉最重）+ 元信息（最轻） */
|
||
.proto-root .jc-cp-title { margin: 12px 0 0; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
|
||
.proto-root .jc-cp-meta { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-4); }
|
||
.proto-root .jc-cp-meta span { display: inline-flex; align-items: center; gap: 4px; }
|
||
/* 目标条：品牌洗底横幅，一句话讲清任务要达成什么 */
|
||
.proto-root .jc-cp-goal { margin-top: 12px; display: flex; align-items: flex-start; gap: 10px; background: linear-gradient(135deg, var(--brand-wash), #fff 72%); border: 1px solid var(--brand-soft); border-radius: 10px; padding: 10px 13px; }
|
||
.proto-root .jc-cp-goal-k { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; font-size: 11px; font-weight: 800; color: var(--brand); }
|
||
.proto-root .jc-cp-goal p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.62; }
|
||
/* 进度区：大数字（左）· 当前节点（右）· 分段类型进度条（下） */
|
||
.proto-root .jc-cp-progress { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-cp-num { flex: none; display: flex; align-items: baseline; gap: 2px; font-family: var(--mono); }
|
||
.proto-root .jc-cp-num b { font-size: 25px; font-weight: 800; color: var(--brand); line-height: 1; }
|
||
.proto-root .jc-cp-num i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-4); }
|
||
.proto-root .jc-cp-num em { font-style: normal; margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; }
|
||
.proto-root .jc-cp-cur { display: flex; align-items: center; gap: 7px; min-width: 0; }
|
||
.proto-root .jc-cp-cur-k { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--ink-4); }
|
||
.proto-root .jc-cp-cur .stage-num { background: var(--brand); }
|
||
.proto-root .jc-cp-cur strong { font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
/* 任务的输入（暂未挂载——待「工作视图」卡收编） · 文件类：可点开的文件卡 */
|
||
.proto-root .jc-input-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
|
||
.proto-root .jc-file-card { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-file-card:hover { border-color: var(--brand-soft); box-shadow: 0 8px 20px rgba(51, 112, 255, .13); transform: translateY(-1px); }
|
||
.proto-root .jc-file-card .wf-dlv-ico { width: 34px; height: 34px; border-radius: 9px; }
|
||
.proto-root .jc-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
|
||
.proto-root .jc-file-txt strong { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-file-txt span { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-file-open { flex: none; color: #c3c8cf; display: grid; place-items: center; transition: color var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-file-card:hover .jc-file-open { color: var(--brand); transform: translateX(2px); }
|
||
/* 任务的输入 · 信息类：KV 事实贴片 */
|
||
.proto-root .jc-input-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
|
||
.proto-root .jc-fact { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--soft); min-width: 0; }
|
||
.proto-root .jc-fact-k { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-4); }
|
||
.proto-root .jc-fact-k svg { color: var(--brand); }
|
||
.proto-root .jc-fact-v { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.4; }
|
||
.proto-root .jc-fact-v.pending { color: var(--ink-4); font-weight: 500; font-style: italic; border-bottom: 1px dashed #c9ced6; align-self: flex-start; }
|
||
.proto-root .wf-bar { display: flex; gap: 4px; margin-top: 11px; }
|
||
.proto-root .wf-seg { flex: 1; height: 7px; border-radius: 999px; background: #eceff3; transition: background var(--t-med); }
|
||
.proto-root .wf-seg.done { background: var(--accent, var(--brand)); }
|
||
.proto-root .wf-seg.active { background: var(--accent, var(--brand)); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
/* ===== 工作视图卡：双状态（任务里程碑 / 操作日志），分段控件切换 ===== */
|
||
.proto-root .jc-wv-tabs { display: flex; gap: 4px; width: max-content; padding: 3px; margin: 0 0 14px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; }
|
||
.proto-root .jc-wv-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-wv-tab svg { color: currentColor; }
|
||
.proto-root .jc-wv-tab em { font-style: normal; font-size: 10.5px; font-weight: 700; font-family: var(--mono); color: var(--ink-4); background: #fff; border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 7px; }
|
||
.proto-root .jc-wv-tab:hover:not(.active) { color: var(--ink); }
|
||
.proto-root .jc-wv-tab.active { background: #fff; color: var(--brand-deep); box-shadow: var(--shadow-1); }
|
||
.proto-root .jc-wv-tab.active em { color: var(--brand-deep); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .wf-sec-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0; color: var(--ink); text-transform: none; margin: 0 0 12px; }
|
||
.proto-root .wf-sec-head svg { color: var(--brand); }
|
||
.proto-root .wf-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-1); }
|
||
|
||
/* ===== 任务里程碑：左 1/4 阶段导航 + 右 3/4 HTML+SVG 汇报页 ===== */
|
||
.proto-root .jc-mst-layout { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; }
|
||
/* 左：里程碑步进器 —— 状态点 + 名称 + 状态副行，进度连线随达成染色 */
|
||
.proto-root .jc-mst-rail { display: flex; flex-direction: column; gap: 3px; }
|
||
.proto-root .jc-mst-item { position: relative; display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 8px 8px; border: 1px solid transparent; background: transparent; border-radius: 11px; cursor: pointer; text-align: left; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-mst-item::before { content: ""; position: absolute; left: 20px; top: 37px; bottom: -7px; width: 2px; border-radius: 2px; background: var(--line-soft); }
|
||
.proto-root .jc-mst-item:last-child::before { display: none; }
|
||
.proto-root .jc-mst-item.st-done::before { background: #bfedb4; }
|
||
.proto-root .jc-mst-item:hover:not(.sel) { background: var(--soft); }
|
||
.proto-root .jc-mst-item.sel { background: var(--brand-wash); border-color: var(--brand-soft); box-shadow: var(--shadow-1); }
|
||
/* 状态点：达成=绿勾软底 / 激活=品牌脉冲环（轨迹语义：未来里程碑不呈现） */
|
||
.proto-root .jc-mst-dot { position: relative; z-index: 1; flex: none; width: 25px; height: 25px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-family: var(--mono); }
|
||
.proto-root .jc-mst-item.st-done .jc-mst-dot { background: linear-gradient(180deg, #fff, var(--ok-soft)); border: 1px solid #bfedb4; color: var(--ok-accent); }
|
||
.proto-root .jc-mst-item.st-active .jc-mst-dot { background: #fff; border: 2px solid var(--brand); box-shadow: 0 0 0 4px rgba(51, 112, 255, .13); }
|
||
.proto-root .jc-mst-item.st-active .jc-mst-dot i { width: 9px; height: 9px; border-radius: 999px; background: var(--brand); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
/* 名称 + 状态副行 */
|
||
.proto-root .jc-mst-itxt { flex: 1; min-width: 0; line-height: 1.3; padding-top: 1px; }
|
||
.proto-root .jc-mst-itxt strong { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-mst-itxt > span { display: block; margin-top: 1px; font-size: 10px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-mst-itxt > span.t-time { font-family: var(--mono); letter-spacing: -.02em; }
|
||
.proto-root .jc-mst-item.st-active .jc-mst-itxt strong { color: var(--brand-deep); }
|
||
.proto-root .jc-mst-item.st-active .jc-mst-itxt > span { color: var(--brand); font-weight: 700; }
|
||
.proto-root .jc-mst-item.sel .jc-mst-itxt strong { color: var(--brand-deep); }
|
||
/* 右：员工与 AI 共创的汇报页（飞书文档级：白纸、报告头、署名、入场动效） */
|
||
.proto-root .jc-mst-page { min-width: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; }
|
||
.proto-root .jc-mst-doc { padding: 16px 20px 12px; animation: rise var(--t-med) both; }
|
||
/* 报告头（窄宽时状态章自动换行，标题保持可读宽度） */
|
||
.proto-root .jc-mst-dochead { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; }
|
||
.proto-root .jc-mst-docico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-mst-doctit { flex: 1 1 200px; min-width: 0; }
|
||
.proto-root .jc-mst-doctit em { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-mst-doctit h3 { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
|
||
.proto-root .jc-mst-doctit p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }
|
||
.proto-root .jc-mst-docstate { flex: none; margin-top: 2px; margin-left: auto; }
|
||
.proto-root .jc-mst-docstate .st-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border: 1px solid #bfedb4; border-radius: 999px; padding: 3px 10px; font-family: var(--mono); }
|
||
.proto-root .jc-mst-docstate .st-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 3px 10px; }
|
||
.proto-root .jc-mst-docstate .st-live i { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
/* 共创署名条：AI × 员工 头像叠放 + 说明 + 激活页的当前节点 */
|
||
.proto-root .jc-mst-coauth { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 11px; padding: 7px 11px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 9px; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-mst-ava { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(31, 35, 41, .18); }
|
||
.proto-root .jc-mst-ava.ai { background: var(--ai-grad); }
|
||
.proto-root .jc-mst-ava.hu { background: linear-gradient(140deg, #2bc7d4, #0e9fd8); margin-left: -10px; }
|
||
.proto-root .jc-mst-coauth-txt { font-weight: 600; }
|
||
.proto-root .jc-mst-curnode { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--brand-deep); }
|
||
.proto-root .jc-mst-curnode i { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
/* 正文与页脚 */
|
||
.proto-root .jc-mst-body { margin-top: 4px; }
|
||
.proto-root .jc-mst-docfoot { display: flex; align-items: center; gap: 5px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line-soft); font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-mst-docfoot svg { color: var(--brand); }
|
||
/* 解析中占位：判定节点（自动）执行期间的动画页——图标呼吸 + 旋转光环 + 骨架闪光 */
|
||
.proto-root .jc-mst-pending { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px 48px; text-align: center; animation: rise var(--t-med) both; }
|
||
.proto-root .jc-mst-pending-ico { position: relative; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); animation: aiBreath 2.2s ease-in-out infinite; }
|
||
.proto-root .jc-mst-pending-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; padding: 2px; background: conic-gradient(from 0deg, transparent 15%, var(--brand), transparent 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: jcSpin 1.6s linear infinite; }
|
||
.proto-root .jc-mst-pending strong { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
|
||
.proto-root .jc-mst-pending > span { font-size: 11.5px; color: var(--ink-4); }
|
||
.proto-root .jc-mst-skel { width: min(430px, 92%); display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
|
||
.proto-root .jc-mst-skel i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0f4 25%, #e0e5ec 40%, #eef0f4 60%); background-size: 300% 100%; animation: jcShimmer 1.3s ease-in-out infinite; }
|
||
.proto-root .jc-mst-skel i:nth-child(1) { width: 62%; align-self: flex-start; }
|
||
.proto-root .jc-mst-skel i:nth-child(2) { width: 100%; }
|
||
.proto-root .jc-mst-skel i:nth-child(3) { width: 88%; }
|
||
.proto-root .jc-mst-skel i:nth-child(4) { width: 45%; }
|
||
@keyframes jcShimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
|
||
/* 内容块通用 */
|
||
.proto-root .jc-mst-b { margin-top: 12px; }
|
||
.proto-root .jc-mst-bt { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ink-2); margin: 0 0 8px; }
|
||
.proto-root .jc-mst-bt::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--brand); }
|
||
/* callout 横幅 */
|
||
.proto-root .jc-mst-callout { margin-top: 12px; font-size: 12px; line-height: 1.65; border-radius: 10px; padding: 9px 12px; border: 1px solid; }
|
||
.proto-root .jc-mst-callout:first-child { margin-top: 0; }
|
||
.proto-root .jc-mst-callout.tone-ok { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-mst-callout.tone-warn { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-mst-callout.tone-brand { color: var(--brand-deep); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
/* 勾选徽章组 */
|
||
.proto-root .jc-mst-badges { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.proto-root .jc-mst-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); background: #fff; border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px; }
|
||
.proto-root .jc-mst-badge.on { color: var(--ok); border-color: #bfedb4; background: linear-gradient(180deg, #fff, var(--ok-soft)); }
|
||
/* 数据表：白卡内嵌 HTML 表格，行 hover 高亮；editable 时可增删改（取消/保存确认） */
|
||
.proto-root .jc-mst-tbar { display: flex; align-items: center; gap: 8px; }
|
||
.proto-root .jc-mst-tbar > span:first-child { flex: 1; min-width: 0; }
|
||
.proto-root .jc-edited { font-style: normal; font-size: 10px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border: 1px solid #fbd9a5; border-radius: 999px; padding: 1px 8px; }
|
||
.proto-root .jc-live-sync { font-style: normal; margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 1px 8px; animation: wfpulse 1.6s ease-in-out infinite; }
|
||
.proto-root .jc-tbar-actions { display: inline-flex; gap: 6px; }
|
||
.proto-root .jc-tbtn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 11px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-tbtn:hover { border-color: var(--brand-soft); color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-tbtn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||
.proto-root .jc-tbtn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
|
||
.proto-root .jc-mst-tablewrap { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; overflow: auto; }
|
||
.proto-root .jc-mst-tablewrap.editing { border-color: var(--brand-soft); box-shadow: 0 0 0 2px rgba(51, 112, 255, .08); }
|
||
.proto-root .jc-cell-input { width: 100%; min-width: 64px; box-sizing: border-box; border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 7px; font: inherit; font-size: 11.5px; color: var(--ink); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-cell-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(51, 112, 255, .12); }
|
||
.proto-root .jc-mst-table td:first-child .jc-cell-input { font-family: var(--mono); font-size: 11px; }
|
||
.proto-root .jc-th-op { width: 34px; }
|
||
.proto-root .jc-td-op { text-align: center; }
|
||
.proto-root .jc-row-del { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-4); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
|
||
.proto-root .jc-row-del:hover { background: var(--danger-soft); color: var(--danger-accent); }
|
||
.proto-root .jc-row-add { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 7px; border: 0; border-top: 1px dashed var(--line-soft); background: transparent; color: var(--brand-deep); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background var(--t-fast); }
|
||
.proto-root .jc-row-add:hover { background: var(--brand-wash); }
|
||
.proto-root .jc-mst-table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
||
.proto-root .jc-mst-table th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: var(--ink-4); background: var(--soft); padding: 7px 11px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
|
||
.proto-root .jc-mst-table td { padding: 7px 11px; color: var(--ink-2); border-bottom: 1px solid #f1f3f6; white-space: nowrap; }
|
||
.proto-root .jc-mst-table td:first-child { font-weight: 700; color: var(--ink); font-family: var(--mono); font-size: 11.5px; }
|
||
.proto-root .jc-mst-table tbody tr:last-child td { border-bottom: 0; }
|
||
.proto-root .jc-mst-table tbody tr { transition: background var(--t-fast); }
|
||
.proto-root .jc-mst-table tbody tr:hover { background: var(--brand-wash); }
|
||
/* 横条图（含红线阈值标记） */
|
||
.proto-root .jc-mst-bars { display: flex; flex-direction: column; gap: 7px; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 13px; }
|
||
.proto-root .jc-mst-barrow { display: flex; align-items: center; gap: 10px; }
|
||
.proto-root .jc-mst-barlabel { flex: none; width: 84px; font-size: 11px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
|
||
.proto-root .jc-mst-track { position: relative; flex: 1; height: 10px; border-radius: 999px; background: #eceff3; overflow: visible; }
|
||
.proto-root .jc-mst-track i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width var(--t-med); }
|
||
.proto-root .jc-mst-track i.tone-brand { background: linear-gradient(90deg, #6d97ff, var(--brand)); }
|
||
.proto-root .jc-mst-track i.tone-ok { background: linear-gradient(90deg, #7edb6f, var(--ok-accent)); }
|
||
.proto-root .jc-mst-track i.tone-warn { background: linear-gradient(90deg, #ffb54d, var(--warn-accent)); }
|
||
.proto-root .jc-mst-track i.tone-danger { background: linear-gradient(90deg, #ff8a86, var(--danger-accent)); }
|
||
.proto-root .jc-mst-track i.tone-muted { background: #c6cbd3; }
|
||
.proto-root .jc-mst-redline { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--danger-accent); opacity: .75; }
|
||
.proto-root .jc-mst-barval { flex: none; min-width: 72px; text-align: right; font-size: 10.5px; font-weight: 700; color: var(--ink-3); font-family: var(--mono); }
|
||
/* 邮件/企微消息卡：任务触发源（收件）与对外发出（发件），附件芯片可点开 */
|
||
.proto-root .jc-mail { margin-top: 12px; background: #fff; border: 1px solid var(--line-soft); border-radius: 11px; overflow: hidden; }
|
||
.proto-root .jc-mail:first-child { margin-top: 0; }
|
||
.proto-root .jc-mail-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px 8px; }
|
||
.proto-root .jc-mail-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
|
||
.proto-root .jc-mail.dir-in .jc-mail-ico { background: linear-gradient(140deg, #5b8cff, var(--brand)); }
|
||
.proto-root .jc-mail.dir-out .jc-mail-ico { background: linear-gradient(140deg, #52ce43, #2ba01c); }
|
||
.proto-root .jc-mail-sub { flex: 1; min-width: 0; line-height: 1.3; }
|
||
.proto-root .jc-mail-sub em { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--ink-4); }
|
||
.proto-root .jc-mail.dir-in .jc-mail-sub em { color: var(--brand); }
|
||
.proto-root .jc-mail.dir-out .jc-mail-sub em { color: var(--ok); }
|
||
.proto-root .jc-mail-sub strong { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-mail-time { flex: none; font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); margin-top: 2px; }
|
||
.proto-root .jc-mail-meta { display: flex; flex-wrap: wrap; gap: 3px 16px; padding: 0 13px 8px; font-size: 11px; color: var(--ink-2); }
|
||
.proto-root .jc-mail-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
|
||
.proto-root .jc-mail-meta i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-4); }
|
||
.proto-root .jc-mail-meta a { color: var(--brand); font-family: var(--mono); font-size: 10.5px; }
|
||
.proto-root .jc-mail-body { margin: 0 13px 10px; padding: 9px 11px; background: var(--soft); border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; font-size: 12px; color: var(--ink-2); line-height: 1.7; }
|
||
.proto-root .jc-mail-atts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 13px 11px; }
|
||
.proto-root .jc-mail-att { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--brand-soft); border-radius: 999px; background: var(--brand-wash); color: var(--brand-deep); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-mail-att strong { font-weight: 700; font-family: var(--mono); font-size: 11px; }
|
||
.proto-root .jc-mail-att span { font-size: 10px; opacity: .75; }
|
||
.proto-root .jc-mail-att:hover:not(.static) { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-mail-att.static { cursor: default; }
|
||
|
||
/* 邮件编辑态：主题/收件人/抄送/正文可改（取消回滚 · 保存确认，同数据表编辑模式） */
|
||
.proto-root .jc-mail.editing { border-color: var(--brand-soft); box-shadow: 0 0 0 2px rgba(51, 112, 255, .08); }
|
||
.proto-root .jc-mail.editing .jc-mail-head { flex-wrap: wrap; }
|
||
.proto-root .jc-mail.editing .jc-mail-sub { flex: 1 1 180px; }
|
||
.proto-root .jc-mail-head .jc-tbar-actions { flex: none; display: inline-flex; gap: 6px; margin-top: 2px; }
|
||
.proto-root .jc-mail-input { flex: 1; min-width: 120px; box-sizing: border-box; border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 11.5px; color: var(--ink); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-mail-input.subj { display: block; width: 100%; margin-top: 3px; font-size: 12.5px; font-weight: 700; }
|
||
.proto-root .jc-mail-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(51, 112, 255, .12); }
|
||
.proto-root .jc-mail.editing .jc-mail-meta span { flex: 1 1 240px; }
|
||
.proto-root .jc-mail-bodyedit { display: block; box-sizing: border-box; width: calc(100% - 26px); margin: 0 13px 10px; padding: 9px 11px; border: 1px solid var(--brand-soft); border-left-width: 3px; border-radius: 0 8px 8px 0; background: #fff; font: inherit; font-size: 12px; color: var(--ink); line-height: 1.7; resize: vertical; }
|
||
.proto-root .jc-mail-bodyedit:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(51, 112, 255, .12); }
|
||
|
||
/* 区块内等待条（如「等待客户回复中」占页面下半部；回齐后让位给结果） */
|
||
.proto-root .jc-mst-waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; padding: 16px 16px; border: 1px dashed var(--line); border-radius: 11px; background: linear-gradient(120deg, var(--soft), #fff 60%); }
|
||
.proto-root .jc-mstw-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--st-wait, #6a7590); animation: jc-mstw-pulse 1.4s ease-in-out infinite; }
|
||
@keyframes jc-mstw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(106, 117, 144, .35); } 50% { box-shadow: 0 0 0 7px rgba(106, 117, 144, 0); } }
|
||
.proto-root .jc-mstw-txt { flex: 1 1 150px; min-width: 0; line-height: 1.45; }
|
||
.proto-root .jc-mstw-txt strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
|
||
.proto-root .jc-mstw-txt span { display: block; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .jc-mstw-skeleton { flex: 1 1 90px; max-width: 130px; display: grid; gap: 5px; }
|
||
.proto-root .jc-mstw-skeleton i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, #e8ebf1 25%, #f4f6fa 45%, #e8ebf1 65%); background-size: 200% 100%; animation: jc-mstw-shimmer 1.6s linear infinite; }
|
||
.proto-root .jc-mstw-skeleton i:nth-child(2) { width: 78%; animation-delay: .15s; }
|
||
.proto-root .jc-mstw-skeleton i:nth-child(3) { width: 56%; animation-delay: .3s; }
|
||
@keyframes jc-mstw-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
||
|
||
/* 结果卡组（cards 块）：外部角色提交的最终结论——大数字 + 元信息贴片 + 提交署名 */
|
||
.proto-root .jc-msrc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
|
||
.proto-root .jc-msrc { display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid var(--line-soft); border-top: 3px solid var(--brand); border-radius: 12px; padding: 12px 14px 10px; box-shadow: 0 1px 4px rgba(31, 35, 41, .05); }
|
||
.proto-root .jc-msrc.tone-ok { border-top-color: var(--ok-accent); }
|
||
.proto-root .jc-msrc.tone-warn { border-top-color: var(--warn-accent); }
|
||
.proto-root .jc-msrc.tone-danger { border-top-color: var(--danger-accent); }
|
||
.proto-root .jc-msrc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.proto-root .jc-msrc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 2px 9px; }
|
||
.proto-root .jc-msrc.tone-ok .jc-msrc-tag { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-msrc.tone-warn .jc-msrc-tag { color: var(--warn); background: var(--warn-soft); border-color: #fbd9a5; }
|
||
.proto-root .jc-msrc.tone-danger .jc-msrc-tag { color: var(--danger); background: var(--danger-soft); border-color: #f6c6c3; }
|
||
.proto-root .jc-msrc-head time { font-size: 10px; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-msrc-pn { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
|
||
.proto-root .jc-msrc-pn strong { font-size: 13.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-msrc-pn code, .proto-root .jc-msrc-swap em { font-size: 10px; color: var(--ink-4); font-family: var(--mono); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; }
|
||
.proto-root .jc-msrc-swap { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
|
||
.proto-root .jc-msrc-swap s { font-size: 12px; color: var(--ink-4); text-decoration-color: var(--danger-accent); }
|
||
.proto-root .jc-msrc-swap i { font-style: normal; font-size: 12px; color: var(--ink-4); }
|
||
.proto-root .jc-msrc-swap strong { font-size: 13.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-msrc-big { display: flex; align-items: baseline; gap: 8px; }
|
||
.proto-root .jc-msrc-big em { font-style: normal; font-size: 23px; font-weight: 800; color: var(--ink); font-family: var(--mono); letter-spacing: -.02em; }
|
||
.proto-root .jc-msrc-big span { font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-msrc-meta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px 10px; }
|
||
.proto-root .jc-msrc-meta li { display: flex; flex-direction: column; gap: 1px; border-left: 2px solid var(--line-soft); padding-left: 8px; }
|
||
.proto-root .jc-msrc-meta i { font-style: normal; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-msrc-meta b { font-size: 11.5px; font-weight: 700; color: var(--ink-2); font-family: var(--mono); }
|
||
.proto-root .jc-msrc-note { margin: 0; font-size: 11px; line-height: 1.6; color: var(--ink-3); background: var(--soft); border-radius: 8px; padding: 7px 10px; }
|
||
.proto-root .jc-msrc-from { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-4); border-top: 1px dashed var(--line-soft); padding-top: 7px; margin-top: auto; }
|
||
|
||
/* SVG 环图 + 图例 */
|
||
.proto-root .jc-mst-donut { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; }
|
||
.proto-root .jc-mst-donut-num { font-size: 24px; font-weight: 800; fill: var(--ink); font-family: var(--mono); }
|
||
.proto-root .jc-mst-donut-unit { font-size: 10px; font-weight: 700; fill: var(--ink-4); letter-spacing: .08em; }
|
||
.proto-root .jc-mst-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
|
||
.proto-root .jc-mst-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
|
||
.proto-root .jc-mst-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
|
||
.proto-root .jc-mst-legend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-mst-legend b { margin-left: auto; font-family: var(--mono); color: var(--ink); }
|
||
.proto-root .jc-mst-legend em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink-4); font-family: var(--mono); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 7px; }
|
||
.proto-root .wf-log { display: flex; flex-direction: column; gap: 12px; }
|
||
.proto-root .wf-ms { position: relative; padding: 0 0 4px 34px; }
|
||
.proto-root .wf-ms::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: -12px; width: 2px; background: var(--line-soft); }
|
||
.proto-root .wf-ms:last-child::before { display: none; }
|
||
.proto-root .wf-ms-dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: -.03em; font-family: var(--mono); z-index: 1; border: 2px solid var(--accent, var(--brand)); background: var(--accent, var(--brand)); color: #fff; }
|
||
.proto-root .wf-ms-dot.active { background: #fff; color: var(--accent, var(--brand)); box-shadow: 0 0 0 4px var(--accent-soft, var(--brand-wash)); animation: wfpulse 1.7s ease-in-out infinite; }
|
||
.proto-root .wf-ms-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
|
||
.proto-root .wf-ms-head strong { font-size: 13.5px; color: var(--ink); }
|
||
.proto-root .wf-ms-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--accent, var(--brand)); background: var(--accent-soft, var(--brand-wash)); }
|
||
.proto-root .wf-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: var(--accent, var(--brand)); }
|
||
.proto-root .wf-live i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: wfpulse 1.4s ease-in-out infinite; }
|
||
/* 里程碑 · 结论摘要 + 过程明细（逐条展开内容与时间） */
|
||
.proto-root .jc-ms-sum { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
|
||
.proto-root .jc-ms-sum::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: var(--accent, var(--brand)); box-shadow: 0 0 0 3px var(--accent-soft, var(--brand-wash)); }
|
||
.proto-root .jc-ms-rows { list-style: none; margin: 7px 0 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; }
|
||
.proto-root .jc-ms-rows li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.5; min-width: 0; }
|
||
.proto-root .jc-ms-ico { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: #fff; border: 1px solid var(--line-soft); color: var(--accent, var(--ink-3)); margin-top: 1px; }
|
||
.proto-root .jc-ms-text { flex: 1; min-width: 0; word-break: break-word; }
|
||
.proto-root .jc-ms-time { flex: none; font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); margin-top: 2px; }
|
||
.proto-root .jc-ms-rows li.neg { color: var(--danger); }
|
||
.proto-root .jc-ms-rows li.neg .jc-ms-ico { color: var(--danger-accent); border-color: #f9c1be; background: var(--danger-soft); }
|
||
.proto-root .wf-wait { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
|
||
.proto-root .wf-dlvs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 2px; }
|
||
.proto-root .wf-dlv { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: 13px; background: #fff; }
|
||
.proto-root .wf-dlv.ready { border-color: #e2e6ec; background: #fff; }
|
||
.proto-root .wf-dlv-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: #f1f3f6; color: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(31, 35, 41, .03); }
|
||
.proto-root .wf-dlv-ico.dlv-markdown { background: linear-gradient(140deg, var(--brand-soft), var(--brand-wash)); color: var(--brand); }
|
||
.proto-root .wf-dlv-ico.dlv-excel { background: linear-gradient(140deg, #d5f5cf, var(--ok-soft)); color: #259b16; }
|
||
.proto-root .wf-dlv-ico.dlv-word { background: linear-gradient(140deg, #e0e3fc, var(--st-auto-soft)); color: var(--st-auto); }
|
||
.proto-root .wf-dlv-ico.dlv-pdf { background: linear-gradient(140deg, #fddede, var(--danger-soft)); color: var(--danger-accent); }
|
||
.proto-root .wf-dlv:not(.ready) .wf-dlv-ico { background: #f1f3f6 !important; color: #c3c8cf; }
|
||
.proto-root .wf-dlv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||
.proto-root .wf-dlv-txt strong { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .wf-dlv:not(.ready) .wf-dlv-txt strong { color: var(--ink-3); }
|
||
.proto-root .wf-dlv-txt span { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .wf-dlv-check { flex: none; color: var(--ok-accent); display: grid; place-items: center; }
|
||
/* 任务成果卡可点击（就绪后打开二级文件界面） */
|
||
.proto-root button.wf-dlv { width: 100%; font: inherit; text-align: left; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root button.wf-dlv:disabled { cursor: default; }
|
||
.proto-root .wf-dlv.ready:hover { border-color: var(--brand-soft); box-shadow: 0 12px 26px rgba(51, 112, 255, .15); transform: translateY(-2px); }
|
||
.proto-root .wf-dlv-open { flex: none; color: #c3c8cf; display: grid; place-items: center; transition: color var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .wf-dlv.ready:hover .wf-dlv-open { color: var(--brand); transform: translateX(2px); }
|
||
@keyframes wfpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
|
||
|
||
/* ===================================================================== */
|
||
/* ===== 二级文件查看界面（成果文件渲染器：md / excel / word / pdf） ===== */
|
||
/* ===================================================================== */
|
||
.proto-root .fileview { display: flex; flex-direction: column; min-height: 0; height: 100%; }
|
||
.proto-root .fileview-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 3px solid var(--brand); border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, #fbfcfe, #f5f7fa); flex: none; }
|
||
.proto-root .fileview.k-markdown .fileview-bar { border-top-color: var(--brand); }
|
||
.proto-root .fileview.k-excel .fileview-bar { border-top-color: #259b16; }
|
||
.proto-root .fileview.k-word .fileview-bar { border-top-color: var(--st-auto); }
|
||
.proto-root .fileview.k-pdf .fileview-bar { border-top-color: var(--danger-accent); }
|
||
.proto-root .fileview-back { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 13px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .fileview-back:hover { background: var(--soft); border-color: #c9ced6; }
|
||
.proto-root .fileview-name { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); }
|
||
.proto-root .fileview-name svg { color: var(--ink-3); flex: none; }
|
||
.proto-root .fileview-name strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .fileview-kind { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
|
||
/* 下载原件 —— 屏上渲的是读回来的样子,这条给的是真字节(.docx 用 Word 打得开) */
|
||
.proto-root .fileview-dl { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 28px; padding: 0 11px;
|
||
border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2);
|
||
font-size: 12px; font-weight: 600; text-decoration: none; transition: all var(--t-fast); }
|
||
.proto-root .fileview-dl:hover { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .fileview-dl svg { flex: none; }
|
||
.proto-root .fileview-kind.k-markdown { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .fileview-kind.k-excel { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .fileview-kind.k-word { color: var(--st-auto); background: var(--st-auto-soft); }
|
||
.proto-root .fileview-kind.k-pdf { color: var(--danger); background: var(--danger-soft); }
|
||
/*
|
||
* **书桌要跟着纸一样长**(2026-08-23 用户第二次报「灰底滚动后变白」,附截图)。
|
||
*
|
||
* 这一格是 `.fileview`(`height:100%`)的弹性子项,而弹性子项默认 `flex: 0 1 auto`:
|
||
* 它**不长个**,高度被容器(= 看得见的那一屏)封住。里面那张纸比一屏长时,
|
||
* 纸溢出这个盒子继续往下排,而**背景只画在盒子里** —— 于是滚到一屏之外,
|
||
* 纸两侧的灰书桌没了,底下是面板自己的白。上一轮只治了走沙箱的 markdown / html
|
||
* (那两档的底色画在 iframe 里),word / excel 这两档是父文档直接渲的,漏在外面。
|
||
*
|
||
* `flex: 1 0 auto`:不许被压(`shrink:0` → 盒子至少和内容一样高,背景铺到底),
|
||
* 内容比一屏短时又能长满(`grow:1` → 不会在下方留一条白边)。
|
||
*/
|
||
.proto-root .fileview-body { flex: 1 0 auto; min-height: 0; padding: 26px 22px; background: radial-gradient(120% 80% at 50% 0%, #eef1f6 0%, #e8ecf1 100%); }
|
||
|
||
/* 文档纸张（word：居中纸张） */
|
||
.proto-root .doc-paper { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: 0 16px 44px rgba(31, 35, 41, .14), 0 2px 6px rgba(31, 35, 41, .06); padding: 44px 52px; }
|
||
/* markdown：铺满中间区全渲染，无窄栏/灰边/纸张感 */
|
||
/*
|
||
* **Markdown 与 HTML 走沙箱之后,外层这一格要跟里面同色**(2026-08-23 用户:
|
||
* 「渲染页面向下翻的时候背景的灰色在下半截会变成白色」)。
|
||
*
|
||
* 这条从前是 `background:#fff; padding:0` —— 那时 markdown 是一整块 `<pre>` 纸面铺满,
|
||
* 白是对的。现在里面是一份**自带灰底 + 居中白纸**的文档(与下载到的 .html 同一份),
|
||
* iframe 高度按内容算:内容比这一屏矮时,底下那截露出来的就是外层这块白 ——
|
||
* 人往下翻,灰底在半路变成白色。同色(与文档自己的 #f4f5f7 一致)之后接缝就没了。
|
||
*
|
||
* 也不再给内边距:那份文档自己排的版(纸面居中、两侧留白),外层再套一层边距
|
||
* 等于两套版面语言叠着。excel / word / pdf 那三种仍走上面的渐变书桌 —— 它们没有自己的底。
|
||
*/
|
||
.proto-root .fileview.k-markdown .fileview-body,
|
||
.proto-root .fileview.k-html .fileview-body { background: #f4f5f7; padding: 0; }
|
||
/* 内容比这一屏矮时,让沙箱把这一格铺满 —— 灰底一路到底,不在中途断开 */
|
||
.proto-root .fileview.k-markdown .jc-view-frame,
|
||
.proto-root .fileview.k-html .jc-view-frame { min-height: 100%; }
|
||
.proto-root .doc-paper.doc-full { max-width: none; margin: 0; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 28px 40px; }
|
||
.proto-root .word-paper h1 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 14px; text-align: center; }
|
||
.proto-root .word-paper h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 20px 0 8px; }
|
||
.proto-root .word-paper p { font-size: 14px; line-height: 1.9; color: var(--ink-2); margin: 0 0 10px; text-indent: 2em; }
|
||
.proto-root .word-paper ul { margin: 0 0 10px; padding-left: 24px; }
|
||
.proto-root .word-paper li { font-size: 14px; line-height: 1.9; color: var(--ink-2); list-style: disc; }
|
||
|
||
/* markdown 文档排版 */
|
||
.proto-root .doc-paper .md { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
|
||
.proto-root .doc-paper .md > :first-child { margin-top: 0; }
|
||
.proto-root .doc-paper .md h1 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 14px; }
|
||
.proto-root .doc-paper .md h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 22px 0 8px; }
|
||
.proto-root .doc-paper .md h3 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
|
||
.proto-root .doc-paper .md p { margin: 0 0 12px; }
|
||
.proto-root .doc-paper .md ul { list-style: disc; padding-left: 24px; margin: 0 0 12px; }
|
||
.proto-root .doc-paper .md ol { list-style: decimal; padding-left: 24px; margin: 0 0 12px; }
|
||
.proto-root .doc-paper .md li { margin: 4px 0; }
|
||
.proto-root .doc-paper .md blockquote { border-left: 3px solid var(--brand-soft); padding: 4px 14px; margin: 0 0 12px; color: var(--ink-3); background: var(--soft); border-radius: 0 6px 6px 0; }
|
||
.proto-root .doc-paper .md code { background: #eef1f5; border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 13px; }
|
||
.proto-root .doc-paper .md strong { font-weight: 700; color: var(--ink); }
|
||
.proto-root .doc-paper .md a { color: var(--brand); text-decoration: underline; }
|
||
.proto-root .doc-paper .md table { border-collapse: collapse; font-size: 13px; margin: 0 0 12px; }
|
||
.proto-root .doc-paper .md th, .proto-root .doc-paper .md td { border: 1px solid var(--line-soft); padding: 5px 9px; text-align: left; }
|
||
.proto-root .doc-paper .md th { background: #f1f3f6; }
|
||
|
||
/* excel 电子表格网格 */
|
||
.proto-root .xls { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid #ccd1d9; border-radius: 8px; box-shadow: 0 16px 44px rgba(31, 35, 41, .14), 0 2px 6px rgba(31, 35, 41, .06); overflow: hidden; }
|
||
.proto-root .xls-grid { border-collapse: collapse; width: 100%; font-size: 13px; }
|
||
.proto-root .xls-grid th, .proto-root .xls-grid td { border: 1px solid #e6e9ee; }
|
||
.proto-root .xls-colh, .proto-root .xls-rowh, .proto-root .xls-corner { background: #eef1f4; color: var(--ink-3); font-weight: 700; text-align: center; font-size: 11px; font-family: var(--mono); }
|
||
.proto-root .xls-colh { height: 26px; }
|
||
.proto-root .xls-rowh { width: 38px; }
|
||
.proto-root .xls-grid tbody tr:nth-child(even) .xls-cell { background: #fafbfc; }
|
||
.proto-root .xls-cell { padding: 8px 12px; color: var(--ink); white-space: nowrap; }
|
||
.proto-root .xls-cell.xls-head { background: linear-gradient(180deg, var(--ok-soft), #d5f5cf); color: #1c6e10; font-weight: 800; border-bottom: 2px solid #8ce07e; }
|
||
.proto-root .xls-tabs { display: flex; gap: 2px; padding: 7px 9px 0; background: #eef1f4; border-top: 1px solid var(--line-soft); }
|
||
.proto-root .xls-tab { font-size: 12px; padding: 6px 16px; border: 1px solid var(--line-soft); border-bottom: 0; border-radius: 7px 7px 0 0; background: #fff; color: var(--ink-2); }
|
||
.proto-root .xls-tab.active { color: var(--ok); font-weight: 800; box-shadow: inset 0 2px 0 var(--ok-accent); }
|
||
|
||
/* pdf 内嵌 */
|
||
.proto-root .pdf-frame { width: 100%; height: 100%; min-height: 72vh; border: 0; background: #fff; border-radius: 8px; box-shadow: 0 16px 44px rgba(31, 35, 41, .14); display: block; }
|
||
|
||
/* ===================================================================== */
|
||
/* ===== 右侧对话区（独立于原型 chat 皮） ===== */
|
||
/* ===================================================================== */
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
||
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
||
|
||
.proto-root .session-chat { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
|
||
.proto-root .session-chat .copilot-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-bottom: 1px solid var(--line-soft); flex: none; }
|
||
.proto-root .copilot-head-main { display: flex; align-items: center; gap: 10px; }
|
||
.proto-root .copilot-head-main .brand-mark { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--ai-grad); color: #fff; display: grid; place-items: center; animation: aiBreath 4.2s ease-in-out infinite; }
|
||
.proto-root .session-chat .copilot-head h2 { margin: 0; font-size: 15px; color: var(--ink); }
|
||
.proto-root .copilot-agent-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); margin: 2px 0 0; }
|
||
.proto-root .copilot-agent-status span { width: 8px; height: 8px; border-radius: 999px; background: var(--ok-accent); display: inline-block; }
|
||
.proto-root .session-chat .copilot-stream { min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--wl-bg); }
|
||
.proto-root .session-chat .copilot-stream > * { flex: 0 0 auto; }
|
||
|
||
/* 对话气泡(协同/讨论回合)：员工 = 飞书蓝，AI = 白底卡片 */
|
||
.proto-root .session-chat .copilot-msg { display: flex; gap: 8px; max-width: 100%; align-items: flex-start; box-shadow: none; padding: 0; background: transparent; border: 0; }
|
||
.proto-root .session-chat .copilot-msg.agent { flex-direction: row; justify-content: flex-start; }
|
||
.proto-root .session-chat .copilot-msg.human { flex-direction: row; justify-content: flex-end; }
|
||
.proto-root .chat-avatar { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; box-shadow: 0 2px 5px rgba(31, 35, 41, .16), inset 0 0 0 1px rgba(255, 255, 255, .14); }
|
||
.proto-root .chat-avatar svg { filter: drop-shadow(0 1px 1px rgba(31, 35, 41, .22)); }
|
||
.proto-root .chat-avatar-ai { background: var(--ai-grad); }
|
||
.proto-root .chat-avatar-user { background: linear-gradient(140deg, #2bc7d4, #0e9fd8); }
|
||
.proto-root .session-chat .copilot-msg .chat-avatar.chat-avatar { display: grid; place-items: center; max-width: none; }
|
||
.proto-root .session-chat .copilot-msg .copilot-bubble { display: block; max-width: 78%; margin-top: 15px; background: #fff; border: 1px solid var(--line-soft); border-radius: 4px 14px 14px 14px; padding: 10px 12px; font-size: 13px; color: var(--ink); line-height: 1.6; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-1); }
|
||
.proto-root .session-chat .copilot-msg.human .copilot-bubble { margin-top: 0; background: linear-gradient(135deg, #3a78ff, var(--brand-deep)); border-color: transparent; color: #fff; border-radius: 14px 4px 14px 14px; box-shadow: 0 6px 16px rgba(51, 112, 255, .24); }
|
||
/* 蓝气泡内一律浅色字（修复深灰字压蓝底看不清） */
|
||
.proto-root .session-chat .copilot-msg.human .copilot-bubble * { color: #fff; }
|
||
.proto-root .session-chat .copilot-msg.human .hist-kv { margin-top: 8px; gap: 6px 8px; }
|
||
.proto-root .session-chat .copilot-msg.human .hist-kv span { background: rgba(255, 255, 255, .18); border-radius: 6px; padding: 2px 8px; font-size: 11px; }
|
||
|
||
/* 阶段块：顶部阶段卡（分隔标记）+ 下方对话流（气泡）；推进时整块升入 */
|
||
.proto-root .stage-block { display: flex; flex-direction: column; gap: 10px; animation: rise var(--t-med) both; }
|
||
.proto-root .stage-thread { display: flex; flex-direction: column; gap: 10px; }
|
||
.proto-root .stage-marker { overflow: visible; }
|
||
/* AI 侧承载交互过程的宽气泡：白底，容纳折叠块/表单/分支/控件 */
|
||
.proto-root .session-chat .copilot-msg.agent .copilot-bubble.wide { flex: 1 1 auto; min-width: 0; max-width: 100%; margin-top: 0; background: #fff; border-color: var(--line-soft); white-space: normal; box-shadow: 0 4px 16px rgba(31, 35, 41, .05); }
|
||
.proto-root .copilot-bubble.wide .exec-field input, .proto-root .copilot-bubble.wide .exec-field textarea { width: 100%; box-sizing: border-box; }
|
||
.proto-root .copilot-bubble.wide > .work-input { margin-bottom: 8px; }
|
||
.proto-root .copilot-bubble.wide > .wfold + .wfold, .proto-root .copilot-bubble.wide > .work-input + .wfold { margin-top: 8px; }
|
||
.proto-root .copilot-bubble.wide > .wfblock, .proto-root .copilot-bubble.wide > .wfold, .proto-root .copilot-bubble.wide > .output-panel, .proto-root .copilot-bubble.wide > .decision-branches, .proto-root .copilot-bubble.wide > .exec-form { margin-top: 8px; }
|
||
.proto-root .copilot-bubble.wide > :first-child { margin-top: 0; }
|
||
.proto-root .copilot-bubble.wide > .card-actions { margin-top: 12px; }
|
||
.proto-root .copilot-bubble .bubble-ask { font-size: 13px; color: var(--ink-2); font-weight: 600; margin: 0 0 2px; }
|
||
.proto-root .copilot-bubble .bubble-intro { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; }
|
||
.proto-root .copilot-bubble.wide .redo-note { margin: 0; }
|
||
|
||
/* 节点属性标（落在每个节点第一条 AI 气泡里：类型 + 编号 + 标题 + 结果） */
|
||
.proto-root .jc-btag { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; padding: 0 0 8px; border-bottom: 1px dashed var(--line-soft); min-width: 0; }
|
||
.proto-root .jc-btag > b { font-size: 10.5px; font-weight: 800; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-btag-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-btag .stage-outcome { flex: none; }
|
||
/* 里程碑段卡头部：图标 + 进行中脉冲 */
|
||
.proto-root .jc-msec-ico { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--ai-grad); color: #fff; }
|
||
.proto-root .jc-msec-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--brand-deep); }
|
||
.proto-root .jc-msec-live i { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); animation: wfpulse 1.5s ease-in-out infinite; }
|
||
|
||
/* 阶段进度标签 */
|
||
.proto-root .harness-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: #fff; }
|
||
.proto-root .harness-tag.t-auto { background: var(--st-auto); }
|
||
.proto-root .harness-tag.t-execute { background: var(--st-execute); }
|
||
.proto-root .harness-tag.t-decision { background: var(--st-decision); }
|
||
.proto-root .harness-tag.t-collaborate { background: var(--st-collab); }
|
||
.proto-root .harness-tag.t-wait { background: var(--st-wait); }
|
||
.proto-root .harness-done { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; padding: 12px; }
|
||
|
||
/* 阶段卡片：当前阶段带「AI 流光」顶边（签名元素之二）。
|
||
当前节点卡吸顶：会话滚过一屏时吸合在会话栏顶部，标题栏（含 CMMN 工具条）常驻可达 */
|
||
.proto-root .stage-card { border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: var(--shadow-1); position: relative; }
|
||
/* 当前里程碑段卡不再吸顶：随内容正常滚动（原 position:sticky;top:0 已移除） */
|
||
.proto-root .stage-card.current { border-color: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-soft), 0 8px 20px rgba(31, 35, 41, .1); }
|
||
.proto-root .stage-card.current::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ai-a), var(--ai-b), transparent); background-size: 200% 100%; animation: shimmer 2.8s linear infinite; z-index: 1; }
|
||
.proto-root .stage-card-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 13px; background: #fff; border: 0; cursor: pointer; text-align: left; transition: background var(--t-fast); }
|
||
.proto-root .stage-card-head:disabled { cursor: default; }
|
||
.proto-root .stage-card:not(.current) .stage-card-head:hover { background: var(--soft); }
|
||
.proto-root .stage-card.current > .stage-card-head { background: linear-gradient(180deg, var(--brand-wash), #fff); }
|
||
.proto-root .stage-num { min-width: 20px; height: 20px; padding: 0 4px; flex: none; border-radius: 7px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }
|
||
.proto-root .stage-card.current .stage-num { background: var(--brand); }
|
||
.proto-root .stage-card-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .stage-outcome { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
|
||
.proto-root .stage-outcome.o-ok { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .stage-outcome.o-rej { color: var(--danger); background: var(--danger-soft); }
|
||
.proto-root .stage-outcome.o-dec { color: var(--st-decision); background: var(--st-decision-soft); }
|
||
.proto-root .stage-card-body { padding: 0 13px 13px; }
|
||
|
||
/* 工作 */
|
||
.proto-root .work { display: flex; flex-direction: column; gap: 8px; }
|
||
.proto-root .work-input { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; }
|
||
.proto-root .work-assistant { display: flex; flex-direction: column; gap: 8px; }
|
||
.proto-root .work-content { display: flex; gap: 7px; font-size: 13px; color: var(--ink); line-height: 1.62; padding: 10px 12px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; }
|
||
.proto-root .work-content > svg { color: var(--ink-3); flex: none; margin-top: 2px; }
|
||
.proto-root .work-intro { font-size: 12px; color: var(--ink-4); margin: 0 0 4px; line-height: 1.5; }
|
||
.proto-root .work-hint { font-size: 12px; color: var(--ink-4); }
|
||
.proto-root .work-processing { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--brand); padding: 6px 0; }
|
||
.proto-root .redo-note { font-size: 12px; color: var(--warn); background: var(--warn-soft); border: 1px solid #fbd9a5; border-radius: 8px; padding: 6px 10px; }
|
||
|
||
/* 折叠块(思维链/工具调用) */
|
||
.proto-root .wfold { border: 1px solid var(--line-soft); border-radius: 10px; background: linear-gradient(180deg, #fcfdff, #f6f8fb); overflow: hidden; }
|
||
.proto-root .wfold-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: transparent; border: 0; cursor: pointer; text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); transition: background var(--t-fast); }
|
||
.proto-root .wfold-head:hover { background: var(--brand-wash); }
|
||
.proto-root .wfold-ico { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-soft); color: var(--ink-3); }
|
||
.proto-root .wfold-think .wfold-ico { color: var(--st-auto); border-color: #dfe2fb; background: var(--st-auto-soft); }
|
||
.proto-root .wfold-tool .wfold-ico { color: #14c0ff; border-color: #c9edfd; background: #eaf9ff; }
|
||
.proto-root .wfold-input .wfold-ico { color: var(--ink-2); border-color: var(--line-soft); background: #f1f3f6; }
|
||
.proto-root .wfold-result .wfold-ico { color: var(--ok); border-color: #bfedb4; background: var(--ok-soft); }
|
||
.proto-root .wfold-summary .wfold-ico { color: var(--st-decision); border-color: #e4d5fd; background: var(--st-decision-soft); }
|
||
.proto-root .wfold-form .wfold-ico { color: var(--warn); border-color: #fbd9a5; background: var(--warn-soft); }
|
||
.proto-root .wfold-wait .wfold-ico { color: var(--st-wait); border-color: #dfe3ec; background: var(--st-wait-soft); }
|
||
.proto-root .wfold-sum { flex: 1; }
|
||
.proto-root .wfold-head > svg:last-child { color: var(--ink-4); transition: transform var(--t-fast); }
|
||
.proto-root .wfold-body { padding: 4px 12px 12px; }
|
||
|
||
/* 非折叠板块（信息输入 / 工作成果 / 工作总结）：与折叠块同款外观 */
|
||
.proto-root .wfblock { border: 1px solid var(--line-soft); border-radius: 10px; background: linear-gradient(180deg, #fcfdff, #f6f8fb); overflow: hidden; }
|
||
.proto-root .wfblock-head { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
|
||
.proto-root .wfblock-body { padding: 0 12px 11px; }
|
||
.proto-root .wfblock-text { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
|
||
.proto-root .wfblock-text .md { font-size: 12.5px; line-height: 1.6; }
|
||
.proto-root .wfblock-text .md > :first-child { margin-top: 0; }
|
||
.proto-root .wfblock-text .md > :last-child { margin-bottom: 0; }
|
||
.proto-root .wfblock .output-rows { border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; overflow: hidden; }
|
||
/* 时间戳走等宽：数据感 */
|
||
.proto-root .wf-times { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line-soft); font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
|
||
.proto-root .wf-times span { display: inline-flex; align-items: center; gap: 5px; }
|
||
.proto-root .wf-times svg { color: var(--ink-4); }
|
||
|
||
/* 思维链:编号时间线 */
|
||
.proto-root .think-steps { list-style: none; margin: 0; padding: 0; }
|
||
.proto-root .think-step { position: relative; display: flex; gap: 10px; padding: 0 0 12px; }
|
||
.proto-root .think-step::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 1.5px; background: #dfe2fb; }
|
||
.proto-root .think-step:last-child::before { display: none; }
|
||
.proto-root .think-step:last-child { padding-bottom: 2px; }
|
||
.proto-root .think-step-num { width: 21px; height: 21px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--st-auto-soft); color: var(--st-auto); border: 1px solid #dfe2fb; z-index: 1; font-family: var(--mono); }
|
||
.proto-root .think-step-text { font-size: 12px; color: var(--ink-2); line-height: 1.55; padding-top: 2px; }
|
||
.proto-root .think-text { font-size: 12px; color: var(--ink-2); line-height: 1.6; white-space: pre-wrap; }
|
||
|
||
/* 工具调用:图标行 */
|
||
.proto-root .tool-list { display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .tool-row { display: flex; align-items: center; gap: 9px; font-size: 12px; padding: 7px 9px; background: #fff; border: 1px solid var(--line-soft); border-radius: 9px; transition: border-color var(--t-fast); }
|
||
.proto-root .tool-row:hover { border-color: #c9ced6; }
|
||
.proto-root .tool-ico { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; background: var(--ink); color: #e2e5e9; }
|
||
.proto-root .tool-name { font-family: var(--mono); font-size: 11.5px; color: var(--st-auto); font-weight: 600; flex: none; }
|
||
.proto-root .tool-result { flex: 1; min-width: 0; color: var(--ink-3); line-height: 1.4; }
|
||
.proto-root .tool-lat { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--st-collab); background: var(--st-collab-soft); border: 1px solid #a9e9e0; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600; font-family: var(--mono); }
|
||
.proto-root .tool-ok { flex: none; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok-accent); }
|
||
|
||
/* AI 工作成果输出表(auto：人工确认的对象 = 这份产出) */
|
||
.proto-root .output-panel { border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: hidden; }
|
||
.proto-root .output-panel-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--soft); border-bottom: 1px solid var(--line-soft); }
|
||
.proto-root .output-panel-head svg { color: var(--ink-3); }
|
||
.proto-root .output-rows { list-style: none; margin: 0; padding: 0; }
|
||
.proto-root .output-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 8px 12px; font-size: 12px; }
|
||
.proto-root .output-row:not(:last-child) { border-bottom: 1px solid #f1f3f6; }
|
||
.proto-root .ok-label { font-weight: 600; color: var(--ink-3); }
|
||
.proto-root .ok-value { color: var(--ink); line-height: 1.5; }
|
||
|
||
/* 完整记录(execute 提交 / decision 决策) */
|
||
.proto-root .record-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 2px; }
|
||
.proto-root .record-head svg { color: var(--ink-4); }
|
||
.proto-root .record-list { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
|
||
.proto-root .record-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 12px; font-size: 12.5px; }
|
||
.proto-root .record-row:not(:last-child) { border-bottom: 1px solid #f1f3f6; }
|
||
.proto-root .rec-label { color: var(--ink-4); }
|
||
.proto-root .rec-value { color: var(--ink); font-weight: 500; word-break: break-word; }
|
||
.proto-root .rec-value.neg { color: var(--danger-accent); }
|
||
.proto-root .decision-branches.readonly .decision-branch { cursor: default; }
|
||
.proto-root .decision-branch strong em.chosen { background: var(--ok-accent); }
|
||
|
||
/* 卡片上的确认/选项动作 */
|
||
.proto-root .card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
|
||
.proto-root .card-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .card-btn:hover:not(:disabled) { background: var(--soft); border-color: #c9ced6; }
|
||
.proto-root .card-btn:active:not(:disabled) { transform: scale(.97); }
|
||
.proto-root .card-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||
.proto-root .card-btn.primary:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep); box-shadow: var(--shadow-brand); }
|
||
.proto-root .card-btn.danger { color: var(--danger); border-color: #f9c1be; }
|
||
.proto-root .card-btn.danger:hover:not(:disabled) { background: var(--danger-soft); }
|
||
.proto-root .card-btn.sel { border-color: var(--st-decision); color: var(--st-decision); background: var(--st-decision-soft); }
|
||
.proto-root .card-btn:disabled { opacity: .5; cursor: not-allowed; }
|
||
.proto-root .card-hint { font-size: 12px; color: var(--warn); background: var(--warn-soft); border: 1px solid #fbd9a5; border-radius: 8px; padding: 7px 10px; margin: 0; }
|
||
.proto-root .auto-dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--ok-accent); }
|
||
.proto-root .auto-dot.spin { background: transparent; border: 2px solid var(--brand-soft); border-top-color: var(--brand); animation: spin .7s linear infinite; width: 13px; height: 13px; }
|
||
|
||
/* execute 表单 */
|
||
.proto-root .exec-form { display: flex; flex-direction: column; gap: 12px; }
|
||
.proto-root .exec-field { display: flex; flex-direction: column; gap: 6px; }
|
||
.proto-root .exec-field > span { font-size: 12px; color: var(--ink-2); }
|
||
.proto-root .exec-field input, .proto-root .exec-field textarea { resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .exec-field input:focus, .proto-root .exec-field textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51, 112, 255, .14); }
|
||
.proto-root .exec-radios { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.proto-root .exec-radio { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 13px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
|
||
.proto-root .exec-radio:hover:not(:disabled):not(.sel) { border-color: #c9ced6; background: var(--soft); }
|
||
.proto-root .exec-radio.sel { border-color: var(--brand); background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .exec-radio.neg.sel { border-color: var(--danger-accent); background: var(--danger-soft); color: var(--danger); }
|
||
/* 确认后：表单组件原样保留但禁用灰显 */
|
||
.proto-root .exec-form.readonly .exec-field > span { color: var(--ink-4); }
|
||
.proto-root .exec-field input:disabled, .proto-root .exec-field textarea:disabled { background: #f3f4f6; color: #5c626b; -webkit-text-fill-color: #5c626b; border-color: #e6e8eb; cursor: default; }
|
||
.proto-root .exec-radio:disabled { cursor: default; color: var(--ink-4); background: #f3f4f6; border-color: #e6e8eb; }
|
||
.proto-root .exec-radio.sel:disabled { color: var(--ink-2); background: #e9ecf1; border-color: #c4cad3; font-weight: 600; }
|
||
.proto-root .exec-radio.neg.sel:disabled { color: #9a5b5b; background: #f6ebeb; border-color: #e2c6c6; }
|
||
|
||
/* ===== execute 翻页卡片（类似考试系统：一页一卡，逐页校验） ===== */
|
||
.proto-root .jc-page-head { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 10px; padding: 9px 11px; background: #fff; border: 1px solid var(--line-soft); border-left: 3px solid var(--st-execute); border-radius: 8px; }
|
||
.proto-root .jc-page-head strong { font-size: 13px; color: var(--ink); }
|
||
.proto-root .jc-page-head span { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
|
||
.proto-root .jc-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-pager .card-btn { padding: 6px 14px; }
|
||
.proto-root .jc-page-dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
|
||
.proto-root .jc-page-dots i { width: 8px; height: 8px; border-radius: 999px; background: #d9dde3; transition: background var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-page-dots i.done { background: var(--st-execute); opacity: .45; }
|
||
.proto-root .jc-page-dots i.cur { background: var(--st-execute); transform: scale(1.25); }
|
||
|
||
/* ===== wait 等待节点：外部输入清单 + 催办 ===== */
|
||
.proto-root .jc-wait-list { display: flex; flex-direction: column; gap: 8px; }
|
||
.proto-root .jc-wait-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; transition: border-color var(--t-med), background var(--t-med); }
|
||
.proto-root .jc-wait-item.ok { border-color: #bfedb4; background: linear-gradient(180deg, #fff, var(--ok-soft)); animation: rise var(--t-med) both; }
|
||
.proto-root .jc-wait-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--st-wait); background: var(--st-wait-soft); }
|
||
.proto-root .jc-wait-item.ok .jc-wait-ico { color: var(--ok-accent); background: #fff; }
|
||
.proto-root .jc-wait-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||
.proto-root .jc-wait-txt strong { font-size: 12.5px; color: var(--ink); }
|
||
.proto-root .jc-wait-txt > span { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
|
||
.proto-root .jc-wait-txt em { font-style: normal; font-size: 11.5px; line-height: 1.55; margin-top: 3px; }
|
||
.proto-root .jc-wait-sla { color: var(--ink-4); display: inline-flex; align-items: center; gap: 4px; }
|
||
.proto-root .jc-wait-sla::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-wait); animation: wfpulse 1.4s ease-in-out infinite; }
|
||
.proto-root .jc-wait-note { color: var(--ok); background: #fff; border: 1px dashed #bfedb4; border-radius: 7px; padding: 4px 8px; }
|
||
.proto-root .jc-nudge { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 11.5px; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-nudge:hover:not(:disabled) { border-color: var(--warn-accent); color: var(--warn); background: var(--warn-soft); }
|
||
|
||
/* ===== collaborate · 案例协同节点（追问补全 → AI 提议 → 人批准 → 确定性执行） ===== */
|
||
/* 能力条：固定在协同节点的标题栏里（随节点卡吸顶，能力全程可调用） */
|
||
.proto-root .jc-case-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px 12px 9px; border-top: 1px dashed var(--line-soft); background: #fff; }
|
||
.proto-root .jc-strip-count { flex: none; font-size: 10.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 2px 8px; font-family: var(--mono); }
|
||
.proto-root .jc-strip-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-strip-chip.st-open { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand-deep); }
|
||
.proto-root .jc-strip-chip.st-open:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||
.proto-root .jc-strip-chip.st-done { border-color: #bfedb4; background: var(--ok-soft); color: var(--ok); cursor: default; }
|
||
.proto-root .jc-strip-chip.st-run { border-color: var(--brand-soft); color: var(--brand); animation: wfpulse 1.2s ease-in-out infinite; cursor: default; }
|
||
.proto-root .jc-strip-chip.st-locked { border-style: dashed; color: var(--ink-4); cursor: not-allowed; }
|
||
/* 执行回合：确定性结果行 + AI 汇报 */
|
||
.proto-root .jc-run-result { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; background: linear-gradient(180deg, #fff, var(--ok-soft)); border: 1px solid #bfedb4; border-radius: 10px; }
|
||
.proto-root .jc-run-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid #bfedb4; color: var(--ok-accent); }
|
||
.proto-root .jc-run-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||
.proto-root .jc-run-txt strong { font-size: 12.5px; color: var(--ok); }
|
||
.proto-root .jc-run-txt span { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
|
||
.proto-root .jc-run-time { flex: none; font-style: normal; font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); margin-top: 2px; }
|
||
.proto-root .jc-aisay { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.65; }
|
||
.proto-root .jc-run-result + .jc-aisay { margin-top: 8px; }
|
||
/* 追问的快捷回答（人类补全信息） */
|
||
.proto-root .jc-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
||
.proto-root .jc-opt { padding: 7px 14px; border: 1px solid var(--brand-soft); border-radius: 999px; background: var(--brand-wash); color: var(--brand-deep); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-opt:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); transform: translateY(-1px); }
|
||
.proto-root .jc-opt:active:not(:disabled) { transform: scale(.97); }
|
||
.proto-root .jc-opt:disabled { opacity: .5; cursor: not-allowed; }
|
||
.proto-root .jc-opt-hint { margin: 8px 0 0; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .composer-locked svg { color: var(--ink-4); margin-right: 5px; flex: none; }
|
||
|
||
/* decision 分支 */
|
||
.proto-root .decision-recommend { display: flex; gap: 6px; font-size: 12px; color: #6428cf; background: var(--st-decision-soft); border: 1px solid #e4d5fd; border-radius: 9px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.5; }
|
||
.proto-root .decision-branches { display: flex; flex-direction: column; gap: 8px; }
|
||
.proto-root .decision-branch { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .decision-branch:hover:not(.sel) { background: var(--soft); border-color: #c9ced6; }
|
||
.proto-root .decision-branch.sel { border-color: var(--st-decision); background: var(--st-decision-soft); box-shadow: 0 0 0 1px var(--st-decision) inset; }
|
||
.proto-root .decision-branch strong { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
|
||
.proto-root .decision-branch strong em { font-style: normal; font-size: 10px; font-weight: 600; color: #fff; background: var(--st-decision); border-radius: 999px; padding: 1px 6px; }
|
||
.proto-root .decision-branch span { font-size: 12px; color: var(--ink-4); }
|
||
.proto-root .decision-discuss { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--line-soft); padding-top: 10px; }
|
||
|
||
/* 人工动作记录(完整人机往返) */
|
||
.proto-root .human-action { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; padding: 8px 10px; background: #eaf9ff; border: 1px solid #c9edfd; border-radius: 9px; }
|
||
.proto-root .human-action.ha-rej { background: var(--danger-soft); border-color: #f9c1be; }
|
||
.proto-root .ha-mark { width: 18px; height: 18px; flex: none; border-radius: 999px; display: grid; place-items: center; background: #14c0ff; color: #fff; margin-top: 1px; }
|
||
.proto-root .human-action.ha-rej .ha-mark { background: var(--danger-accent); }
|
||
.proto-root .ha-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
||
.proto-root .ha-text { font-size: 12.5px; font-weight: 500; color: #0a5f80; }
|
||
.proto-root .human-action.ha-rej .ha-text { color: var(--danger); }
|
||
.proto-root .hist-kv { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--ink-3); font-size: 12px; }
|
||
|
||
/* 输入区 */
|
||
.proto-root .copilot-composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 14px; border-top: 1px solid var(--line-soft); flex: none; }
|
||
/* 输入框与按钮同一排，按钮高度撑满与输入框等高 */
|
||
.proto-root .composer-row { display: flex; align-items: stretch; gap: 8px; }
|
||
.proto-root .composer-row > * { box-sizing: border-box; }
|
||
.proto-root .session-composer textarea { flex: 1 1 auto; min-width: 0; height: 52px; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .session-composer textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51, 112, 255, .14); }
|
||
.proto-root .composer-locked { flex: 1 1 auto; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-4); background: var(--soft); border: 1px dashed var(--line); border-radius: 10px; padding: 0 12px; text-align: center; }
|
||
.proto-root .composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
|
||
.proto-root .reject-link { align-self: flex-start; background: none; border: 0; color: var(--danger); font-size: 13px; cursor: pointer; padding: 0; }
|
||
.proto-root .copilot-send { height: auto; align-self: stretch; flex: none; min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: 0 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .copilot-send:hover:not(:disabled) { background: var(--brand-deep); box-shadow: var(--shadow-brand); }
|
||
.proto-root .copilot-send:active:not(:disabled) { transform: scale(.98); }
|
||
.proto-root .copilot-send:disabled { opacity: .5; cursor: not-allowed; }
|
||
|
||
/* ===== AI 回复富文本(Markdown/HTML/SVG) ===== */
|
||
.proto-root .copilot-bubble .md { font-size: 13px; line-height: 1.6; white-space: normal; text-indent: 0; }
|
||
.proto-root .copilot-bubble .md p, .proto-root .copilot-bubble .md li { text-indent: 0; }
|
||
.proto-root .copilot-bubble .md > :first-child { margin-top: 0; }
|
||
.proto-root .copilot-bubble .md > :last-child { margin-bottom: 0; }
|
||
.proto-root .copilot-bubble .md p { margin: 0 0 8px; }
|
||
.proto-root .copilot-bubble .md ul { list-style: disc; margin: 0 0 8px; padding-left: 22px; }
|
||
.proto-root .copilot-bubble .md ol { list-style: decimal; margin: 0 0 8px; padding-left: 22px; }
|
||
.proto-root .copilot-bubble .md li { margin: 3px 0; }
|
||
.proto-root .copilot-bubble .md h1, .proto-root .copilot-bubble .md h2, .proto-root .copilot-bubble .md h3, .proto-root .copilot-bubble .md h4 { font-size: 14px; font-weight: 700; margin: 10px 0 6px; line-height: 1.3; }
|
||
.proto-root .copilot-bubble .md strong { font-weight: 700; }
|
||
.proto-root .copilot-bubble .md a { color: var(--brand); text-decoration: underline; }
|
||
.proto-root .copilot-bubble .md code { background: #eceff3; border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 12px; }
|
||
.proto-root .copilot-bubble .md pre { background: var(--ink); color: #e2e5e9; border-radius: 8px; padding: 10px 12px; overflow: auto; margin: 0 0 8px; }
|
||
.proto-root .copilot-bubble .md pre code { background: none; padding: 0; color: inherit; font-size: 12px; }
|
||
.proto-root .copilot-bubble .md table { border-collapse: collapse; font-size: 12px; margin: 0 0 8px; display: block; overflow-x: auto; }
|
||
.proto-root .copilot-bubble .md th, .proto-root .copilot-bubble .md td { border: 1px solid var(--line-soft); padding: 4px 8px; text-align: left; }
|
||
.proto-root .copilot-bubble .md th { background: #f1f3f6; }
|
||
.proto-root .copilot-bubble .md img, .proto-root .copilot-bubble .md svg { max-width: 100%; height: auto; }
|
||
|
||
/* ===== 右上角 DeepSeek 设置弹窗 ===== */
|
||
.proto-root .settings-trigger { position: relative; }
|
||
.proto-root .settings-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 999px; background: var(--danger-accent); box-shadow: 0 0 0 2px #fff; }
|
||
.proto-root .settings-overlay { position: fixed; inset: 0; background: rgba(31, 35, 41, .45); display: grid; place-items: center; z-index: 1000; }
|
||
.proto-root .settings-modal { width: 440px; max-width: 92vw; background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 24px 60px rgba(31, 35, 41, .22); animation: rise var(--t-med) both; }
|
||
.proto-root .settings-modal-head { display: flex; align-items: center; justify-content: space-between; }
|
||
.proto-root .settings-modal-head h3 { margin: 0; font-size: 17px; color: var(--ink); }
|
||
.proto-root .settings-hint { margin: 4px 0 16px; font-size: 12px; color: var(--ink-3); }
|
||
.proto-root .settings-field { display: block; margin-bottom: 14px; }
|
||
.proto-root .settings-field > span { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
|
||
.proto-root .settings-field input { width: 100%; box-sizing: border-box; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 14px; color: var(--ink); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .settings-field input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51, 112, 255, .14); }
|
||
.proto-root .settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
|
||
.proto-root .settings-actions button { height: 38px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 14px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .settings-actions button:hover { background: var(--soft); }
|
||
.proto-root .settings-actions button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||
.proto-root .settings-actions button.primary:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep); }
|
||
.proto-root .settings-actions button.primary:disabled { opacity: .5; cursor: not-allowed; }
|
||
|
||
/* ==================================================================
|
||
审批中心（第四投影：等我放行的事项）
|
||
页面按「四问」竖排：规则是什么(决策条) → 量级多大(关键数字) → 依据够不够
|
||
(要点/明细/偏离条/关联任务/审批链) → 我批不批(签批区)。
|
||
与消息模块共用 Hero / Section / jc-facts / jc-mcard 等件，只补审批特有的表达。
|
||
================================================================== */
|
||
|
||
/* ---- 决策条：规则 + 系统自检 + SLA（人只做判断，能算的机器先算完）---- */
|
||
.proto-root .jc-apv-rule { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--brand-soft); border-radius: 13px; background: linear-gradient(118deg, var(--brand-wash), #f7f5ff 60%, #fbfcff); }
|
||
.proto-root .jc-apv-rule-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); box-shadow: 0 4px 10px -3px rgba(51, 112, 255, .55); }
|
||
.proto-root .jc-apv-rule-t { flex: 1; min-width: 0; line-height: 1.45; }
|
||
.proto-root .jc-apv-rule-t em { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--brand-deep); }
|
||
.proto-root .jc-apv-rule-t strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-apv-check { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 46%; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-soft); border: 1px solid #bfedb4; border-radius: 999px; padding: 4px 11px; }
|
||
.proto-root .jc-apv-sla { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; font-family: var(--mono); border-radius: 999px; padding: 4px 11px; border: 1px solid; }
|
||
.proto-root .jc-apv-sla.t-warn { color: var(--danger); background: var(--danger-soft); border-color: #f6c6c3; }
|
||
.proto-root .jc-apv-sla.t-brand { color: var(--brand-deep); background: #fff; border-color: var(--brand-soft); }
|
||
.proto-root .jc-apv-sla.t-ok { color: var(--ink-3); background: var(--soft); border-color: var(--line-soft); }
|
||
/* 越线态：整条转橙，图标换警示 */
|
||
.proto-root .jc-apv-rule.is-over { border-color: #f2d3a3; background: linear-gradient(118deg, var(--warn-soft), #fff9f0 62%, #fffdfa); }
|
||
.proto-root .jc-apv-rule.is-over .jc-apv-rule-ico { background: linear-gradient(140deg, #ff8800, #de7802); box-shadow: 0 4px 10px -3px rgba(222, 120, 2, .5); }
|
||
.proto-root .jc-apv-rule.is-over .jc-apv-rule-t em { color: var(--warn); }
|
||
.proto-root .jc-apv-rule.is-over .jc-apv-check { color: var(--danger); background: var(--danger-soft); border-color: #f6c6c3; }
|
||
|
||
/* ---- 关键数字：一眼看清这单在批什么量级 ---- */
|
||
.proto-root .jc-apv-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 10px; }
|
||
.proto-root .jc-apv-num { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--soft); }
|
||
.proto-root .jc-apv-num em { font-style: normal; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-apv-num strong { font-size: 17px; font-weight: 800; font-family: var(--mono); letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
|
||
.proto-root .jc-apv-num.t-ok { background: var(--ok-soft); border-color: #d6f0cd; }
|
||
.proto-root .jc-apv-num.t-ok strong { color: var(--ok); }
|
||
.proto-root .jc-apv-num.t-warn { background: var(--warn-soft); border-color: #f4e0bf; }
|
||
.proto-root .jc-apv-num.t-warn strong { color: var(--warn); }
|
||
|
||
/* ---- 依据明细表（密排、数字等宽）---- */
|
||
/* 与里程碑数据表（jc-mst-table）同一套排版：密排、整行 nowrap、超宽横滚 */
|
||
.proto-root .jc-atbl-wrap { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; overflow: auto; }
|
||
.proto-root .jc-atbl { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
|
||
.proto-root .jc-atbl th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: var(--ink-4); background: var(--soft); padding: 7px 11px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
|
||
.proto-root .jc-atbl td { padding: 7px 11px; color: var(--ink-2); border-bottom: 1px solid #f1f3f6; white-space: nowrap; transition: background var(--t-fast); }
|
||
.proto-root .jc-atbl tbody tr:last-child td { border-bottom: 0; }
|
||
.proto-root .jc-atbl tbody tr:hover td { background: var(--brand-wash); }
|
||
.proto-root .jc-atbl td:first-child { font-weight: 700; color: var(--ink); font-family: var(--mono); font-size: 11.5px; }
|
||
.proto-root .jc-atbl td.num { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
|
||
/* 最后一列允许折行：栏宽变窄时行变高，而不是把内容藏进横滚里 */
|
||
.proto-root .jc-atbl th:last-child, .proto-root .jc-atbl td:last-child { white-space: normal; }
|
||
|
||
/* ---- 偏离 / 占用条：满格即触红线 ---- */
|
||
.proto-root .jc-dev { display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--soft); }
|
||
.proto-root .jc-dev-row { display: grid; grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) 62px; align-items: center; gap: 11px; }
|
||
.proto-root .jc-dev-l { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.proto-root .jc-dev-track { position: relative; height: 8px; border-radius: 999px; background: #e6eaf1; overflow: hidden; }
|
||
.proto-root .jc-dev-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #6f9bff); animation: jcDevGrow .5s cubic-bezier(.3, 0, .2, 1) both; }
|
||
.proto-root .jc-dev-row.is-over .jc-dev-track i { background: linear-gradient(90deg, var(--danger-accent), #ff8f6b); }
|
||
.proto-root .jc-dev-v { font-family: var(--mono); font-size: 11.5px; font-weight: 800; color: var(--ink-2); text-align: right; }
|
||
.proto-root .jc-dev-row.is-over .jc-dev-v { color: var(--danger); }
|
||
.proto-root .jc-dev-legend { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-dev-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--danger-accent); }
|
||
@keyframes jcDevGrow { from { width: 0 !important; } }
|
||
|
||
/* ---- 审批链：谁提的、机器查了什么、我在哪一环 ---- */
|
||
.proto-root .jc-chain { display: flex; flex-direction: column; }
|
||
.proto-root .jc-chain-row { position: relative; display: grid; grid-template-columns: 26px minmax(84px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; }
|
||
.proto-root .jc-chain-row::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
|
||
.proto-root .jc-chain-row:first-child::before { top: 50%; }
|
||
.proto-root .jc-chain-row:last-child::before { bottom: 50%; }
|
||
.proto-root .jc-chain-node { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--ok-accent); box-shadow: 0 0 0 3px #fff; }
|
||
.proto-root .jc-chain-who { display: flex; flex-direction: column; line-height: 1.3; }
|
||
.proto-root .jc-chain-who b { font-size: 12px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-chain-who em { font-style: normal; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-chain-act { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
|
||
.proto-root .jc-chain-row time { font-size: 10.5px; }
|
||
.proto-root .jc-chain-row.is-current { background: linear-gradient(90deg, var(--brand-wash), transparent 76%); border-radius: 10px; }
|
||
.proto-root .jc-chain-row.is-current .jc-chain-node { background: var(--brand); animation: wfpulse 1.6s ease-in-out infinite; }
|
||
.proto-root .jc-chain-row.is-current .jc-chain-act { color: var(--ink); font-weight: 700; }
|
||
.proto-root .jc-chain-row.is-current .jc-chain-who b { color: var(--brand-deep); }
|
||
.proto-root .jc-chain-row.is-todo .jc-chain-node { background: #fff; border: 2px dashed var(--line); color: var(--ink-4); }
|
||
.proto-root .jc-chain-row.is-todo .jc-chain-who b, .proto-root .jc-chain-row.is-todo .jc-chain-act { color: var(--ink-4); }
|
||
|
||
/* ---- 签批区：选项 + 意见 + 三个动作 ---- */
|
||
.proto-root .jc-apv-act { display: flex; flex-direction: column; gap: 11px; padding: 15px 16px; border: 1px solid var(--brand-soft); border-radius: 15px; background: linear-gradient(180deg, var(--brand-wash), #fff 58%); }
|
||
.proto-root .jc-apv-act-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-apv-act-h svg { color: var(--brand-deep); }
|
||
.proto-root .jc-apv-act-h em { font-style: normal; margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--brand-deep); background: #fff; border: 1px solid var(--brand-soft); border-radius: 999px; padding: 2px 10px; }
|
||
.proto-root .jc-opt-wrap { display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-opt-t { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
|
||
.proto-root .jc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.proto-root .jc-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
|
||
.proto-root .jc-opt i { flex: none; width: 13px; height: 13px; border-radius: 999px; border: 2px solid var(--line); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-opt b { font-size: 10px; font-weight: 700; font-family: var(--mono); color: var(--ink-4); background: var(--soft); border-radius: 999px; padding: 1px 7px; }
|
||
.proto-root .jc-opt:hover:not(.active) { border-color: var(--brand-soft); background: var(--brand-wash); }
|
||
.proto-root .jc-opt.active { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); font-weight: 700; }
|
||
.proto-root .jc-opt.active i { border-color: var(--brand); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 8px var(--brand); }
|
||
.proto-root .jc-opt.active b { color: var(--brand-deep); background: #fff; }
|
||
.proto-root .jc-apv-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||
.proto-root .jc-btn-danger { color: var(--danger); border-color: #f6c6c3; background: #fff; }
|
||
.proto-root .jc-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger-accent); }
|
||
.proto-root .jc-apv-hint { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 10.5px; color: var(--ink-4); }
|
||
|
||
/* ---- 签批结论卡（已处理 / 本次签批后）---- */
|
||
.proto-root .jc-apv-res { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; border-radius: 15px; animation: rise var(--t-med) both; }
|
||
.proto-root .jc-apv-res.t-ok { background: linear-gradient(180deg, var(--ok-soft), #fff 62%); border-color: #bfedb4; }
|
||
.proto-root .jc-apv-res.t-danger { background: linear-gradient(180deg, var(--danger-soft), #fff 62%); border-color: #f6c6c3; }
|
||
.proto-root .jc-apv-res-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
|
||
.proto-root .jc-apv-res.t-ok .jc-apv-res-ico { background: linear-gradient(140deg, var(--ok-accent), var(--ok)); box-shadow: 0 4px 10px -3px rgba(39, 135, 23, .5); }
|
||
.proto-root .jc-apv-res.t-danger .jc-apv-res-ico { background: linear-gradient(140deg, var(--danger-accent), var(--danger)); box-shadow: 0 4px 10px -3px rgba(216, 57, 49, .45); }
|
||
.proto-root .jc-apv-res-txt { flex: 1; min-width: 0; }
|
||
.proto-root .jc-apv-res-txt strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-apv-res-txt p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
|
||
.proto-root .jc-apv-res-eff { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; color: var(--ink-3); }
|
||
|
||
/* ---- 左清单：审批卡 ----
|
||
卡上只有元信息：类型 / 主题 / 谁提交 / 提交时间 / 剩余时间。
|
||
业务数字（金额、偏离、敞口…）一律留给中栏，卡里不放、也就不会显示不全。
|
||
四行严格对齐（同任务卡节奏）：① 类型 + 状态章 ② 主题 ③ 谁提交 + 提交时间 ④ 时限细条。
|
||
卡内只有一个胶囊（状态），其余靠字重/字号/一条 3px 细条分层——不再堆小方块 */
|
||
.proto-root .jc-acard .jc-mcard-body { gap: 6px; }
|
||
.proto-root .jc-acard .jc-acard-from { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
|
||
.proto-root .jc-acard .jc-acard-from b { font-weight: 700; color: var(--ink-2); }
|
||
.proto-root .jc-acard .jc-acard-from > span { font-size: 10px; font-weight: 700; font-family: var(--mono); color: var(--ink-4); }
|
||
.proto-root .jc-acard .jc-acard-from time { margin-left: auto; font-size: 10px; white-space: nowrap; }
|
||
/* 时限：3px 细条 + 右侧小字，占位与任务卡的进度条同一位置 */
|
||
.proto-root .jc-acard .jc-acard-sla { display: flex; align-items: center; gap: 9px; }
|
||
.proto-root .jc-acard .jc-acard-sla i { flex: 1; min-width: 0; height: 3px; border-radius: 3px; background: #e6eaf1; overflow: hidden; }
|
||
.proto-root .jc-acard .jc-acard-sla i b { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width var(--t-med); }
|
||
.proto-root .jc-acard .jc-acard-sla em { flex: none; font-style: normal; font-size: 10px; font-weight: 700; font-family: var(--mono); letter-spacing: -.01em; color: var(--ink-4); white-space: nowrap; }
|
||
.proto-root .jc-acard .jc-acard-sla.t-warn i b { background: var(--danger-accent); }
|
||
.proto-root .jc-acard .jc-acard-sla.t-warn em { color: var(--danger); }
|
||
.proto-root .jc-acard .jc-acard-sla.t-brand em { color: var(--brand-deep); }
|
||
.proto-root .jc-acard .jc-acard-sla.is-done i b { background: #c9ced6; }
|
||
/* 加急：卡片左缘红条（不再另立「急」徽标） */
|
||
.proto-root .jc-acard.is-urgent { position: relative; }
|
||
.proto-root .jc-acard.is-urgent::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--danger-accent); }
|
||
.proto-root .jc-urg { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; color: var(--danger); background: var(--danger-soft); border-radius: 5px; padding: 1px 5px; }
|
||
.proto-root .jc-apv-self { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--brand-deep); background: #fff; border: 1px solid var(--brand-soft); border-radius: 5px; padding: 1px 6px; }
|
||
|
||
/* 窄屏：决策条折两行（图标+规则一行，自检与 SLA 落第二行） */
|
||
@media (max-width: 1440px) {
|
||
.proto-root .jc-apv-rule { flex-wrap: wrap; }
|
||
.proto-root .jc-apv-rule-t { flex: 1 1 200px; }
|
||
.proto-root .jc-apv-check { max-width: none; }
|
||
.proto-root .jc-apv-sla { margin-left: auto; }
|
||
}
|
||
|
||
/* ===== 动效可及性：用户偏好减弱动效时全部静止 ===== */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.proto-root *, .proto-root *::before, .proto-root *::after {
|
||
animation-duration: .01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: .01ms !important;
|
||
}
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════════
|
||
规范 V2.15 重建：任务对话流（四卡）+ 任务视图区
|
||
全部用令牌，不写死 hex；动效走 --t-fast/--t-med 并随 prefers-reduced-motion 降级。
|
||
══════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.proto-root .jc-tch { display: flex; flex-direction: column; height: 100%; min-height: 0; }
|
||
.proto-root .jc-tch-head {
|
||
flex: 0 0 auto; padding: 11px 14px; border-bottom: 1px solid var(--line);
|
||
background: var(--brand-wash); display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.proto-root .jc-tch-name { flex: none; font-size: 13.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-tch-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-tch-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.proto-root .jc-tch-id b { font-size: 14px; color: var(--ink); }
|
||
.proto-root .jc-tch-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-tch-meta span { display: inline-flex; align-items: center; gap: 4px; }
|
||
.proto-root .jc-tch-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
|
||
.proto-root .jc-tch-bar > i { display: block; height: 100%; background: var(--brand); transition: width var(--t-med); }
|
||
.proto-root .jc-tch-reset { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 2px; border-radius: 5px; }
|
||
.proto-root .jc-tch-reset:hover { background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-tch-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
|
||
.proto-root .jc-tch-scroll > * { flex: 0 0 auto; }
|
||
|
||
.proto-root .jc-para { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
|
||
.proto-root .jc-para-loop { background: var(--st-collab-soft); color: var(--st-collab); }
|
||
.proto-root .jc-para-flow { background: var(--st-auto-soft); color: var(--st-auto); }
|
||
.proto-root .jc-mono { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
|
||
|
||
/* 机器推进 */
|
||
.proto-root .jc-turn { display: flex; gap: 9px; align-items: flex-start; }
|
||
.proto-root .jc-bub { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--cardline); border-radius: 10px; padding: 11px 12px; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-bub-h { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 7px; color: var(--ink); }
|
||
.proto-root .jc-pulse { font-size: 11px; color: var(--brand); animation: jcBlink 1.1s ease-in-out infinite; }
|
||
@keyframes jcBlink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
|
||
.proto-root .jc-content { font-size: 12.8px; line-height: 1.75; color: var(--ink); }
|
||
.proto-root .jc-dim { color: var(--ink-3); font-size: 12px; line-height: 1.7; }
|
||
.proto-root .jc-think { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.75; color: var(--ink-2); }
|
||
.proto-root .jc-think li { margin-bottom: 5px; }
|
||
.proto-root .jc-tools { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
|
||
.proto-root .jc-tools li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-tools li:last-child { border-bottom: 0; }
|
||
.proto-root .jc-eff { font-size: 10px; padding: 0 5px; border-radius: 3px; font-weight: 700; flex: 0 0 auto; }
|
||
.proto-root .jc-eff-r { background: var(--ok-soft); color: var(--ok); }
|
||
.proto-root .jc-eff-w { background: var(--warn-soft); color: var(--warn-accent); }
|
||
|
||
.proto-root .jc-fold { margin: 5px 0; }
|
||
.proto-root .jc-fold > button { width: 100%; display: flex; align-items: center; gap: 5px; background: var(--soft); border: 0; border-radius: 6px; padding: 5px 8px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
|
||
.proto-root .jc-fold > button:hover { background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-fold.open > button svg:last-child { transform: rotate(180deg); }
|
||
.proto-root .jc-fold-b { padding: 8px 4px 2px; }
|
||
|
||
/* 事件条 · 监听 */
|
||
.proto-root .jc-evt { display: flex; gap: 8px; align-items: flex-start; background: var(--soft); border-left: 3px solid var(--ink-4); border-radius: 6px; padding: 8px 10px; font-size: 12px; }
|
||
.proto-root .jc-evt b { color: var(--ink); }
|
||
.proto-root .jc-evt p { margin: 3px 0 0; color: var(--ink-3); line-height: 1.65; }
|
||
.proto-root .jc-evt-k { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-evt-数据 { background: var(--ok-soft); color: var(--ok); }
|
||
.proto-root .jc-evt-时间 { background: var(--warn-soft); color: var(--warn-accent); }
|
||
.proto-root .jc-evt-控制 { background: var(--danger-soft); color: var(--danger); }
|
||
|
||
.proto-root .jc-listen { border: 1px solid var(--st-wait-soft); background: var(--st-wait-soft); border-radius: 10px; padding: 11px 12px; }
|
||
.proto-root .jc-listen-h { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
|
||
.proto-root .jc-listen-spec { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-listen-spec i { display: inline-block; min-width: 84px; font-style: normal; color: var(--ink-4); }
|
||
.proto-root .jc-listen-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-listen-items li { display: flex; gap: 7px; align-items: flex-start; background: #fff; border-radius: 7px; padding: 8px 9px; font-size: 12px; }
|
||
.proto-root .jc-listen-items p { margin: 2px 0 0; color: var(--ink-3); line-height: 1.6; }
|
||
.proto-root .jc-listen-items .jc-arrive { color: var(--ok); }
|
||
|
||
/* 人类工具四卡 */
|
||
.proto-root .jc-cardb { padding: 0; overflow: hidden; }
|
||
.proto-root .jc-card-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
|
||
.proto-root .jc-card-h b { font-size: 13px; flex: 1; min-width: 0; }
|
||
.proto-root .jc-card-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
|
||
.proto-root .jc-card-decision .jc-card-tool { background: var(--st-decision-soft); color: var(--st-decision); }
|
||
.proto-root .jc-card-execute .jc-card-tool { background: var(--st-execute-soft); color: var(--st-execute); }
|
||
.proto-root .jc-card-wait .jc-card-tool { background: var(--st-wait-soft); color: var(--st-wait); }
|
||
.proto-root .jc-card-release .jc-card-tool { background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-card-to { font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
|
||
.proto-root .jc-cardb.cross { border-style: dashed; }
|
||
|
||
.proto-root .jc-basis { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 9px 12px; background: var(--soft); font-size: 11.5px; }
|
||
.proto-root .jc-basis > i { font-style: normal; color: var(--ink-4); font-weight: 600; width: 100%; }
|
||
.proto-root .jc-basis span { color: var(--ink); }
|
||
.proto-root .jc-basis em { font-style: normal; color: var(--ink-4); margin-right: 5px; }
|
||
|
||
.proto-root .jc-card-b { padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; }
|
||
.proto-root .jc-cross, .proto-root .jc-replied { display: flex; gap: 8px; align-items: flex-start; padding: 11px 12px; font-size: 12px; color: var(--ink-2); line-height: 1.7; }
|
||
.proto-root .jc-replied { color: var(--ok); }
|
||
.proto-root .jc-replied span { display: block; color: var(--ink-3); }
|
||
|
||
.proto-root .jc-ask { font-size: 13px; color: var(--ink); margin: 0; }
|
||
.proto-root .jc-rec { display: flex; gap: 6px; align-items: flex-start; background: var(--brand-wash); border-radius: 7px; padding: 8px 10px; font-size: 12px; color: var(--brand-deep); }
|
||
.proto-root .jc-branches { display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-branch { text-align: left; border: 1px solid var(--cardline); border-radius: 8px; padding: 9px 11px; background: #fff; cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-branch:hover { border-color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-branch.rec { border-color: var(--brand); }
|
||
.proto-root .jc-branch b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
|
||
.proto-root .jc-branch em { font-style: normal; font-size: 10px; background: var(--brand-soft); color: var(--brand); padding: 1px 6px; border-radius: 999px; }
|
||
.proto-root .jc-branch p { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
|
||
.proto-root .jc-conseq { color: var(--warn-accent) !important; display: flex; align-items: center; gap: 4px; }
|
||
|
||
.proto-root .jc-need, .proto-root .jc-guide { background: var(--soft); border-radius: 7px; padding: 9px 11px; font-size: 12px; }
|
||
.proto-root .jc-need p, .proto-root .jc-guide p { margin: 0 0 5px; line-height: 1.7; color: var(--ink-2); }
|
||
.proto-root .jc-need p:last-child, .proto-root .jc-guide p:last-child { margin-bottom: 0; }
|
||
.proto-root .jc-need i, .proto-root .jc-guide i { font-style: normal; color: var(--ink-4); margin-right: 7px; font-weight: 600; }
|
||
|
||
.proto-root .jc-fields { display: flex; flex-direction: column; gap: 9px; }
|
||
.proto-root .jc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
|
||
.proto-root .jc-field > span { color: var(--ink-2); font-weight: 600; }
|
||
.proto-root .jc-field input, .proto-root .jc-field textarea, .proto-root .jc-note {
|
||
border: 1px solid var(--cardline); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 12px; color: var(--ink); background: #fff;
|
||
}
|
||
.proto-root .jc-field input:focus, .proto-root .jc-field textarea:focus, .proto-root .jc-note:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
|
||
.proto-root .jc-note { width: 100%; min-height: 54px; resize: vertical; }
|
||
.proto-root .jc-radios { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.proto-root .jc-radio { border: 1px solid var(--cardline); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 11.5px; cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-radio:hover { border-color: var(--brand); }
|
||
.proto-root .jc-radio.on { background: var(--brand); color: #fff; border-color: var(--brand); }
|
||
.proto-root .jc-radio.neg.on { background: var(--warn-accent); border-color: var(--warn-accent); }
|
||
|
||
.proto-root .jc-page { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 11px; }
|
||
.proto-root .jc-page-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 12.5px; }
|
||
.proto-root .jc-page-nav { display: flex; gap: 7px; justify-content: flex-end; }
|
||
|
||
.proto-root .jc-deliv, .proto-root .jc-crit, .proto-root .jc-acts { font-size: 12px; }
|
||
.proto-root .jc-deliv > i, .proto-root .jc-crit > i, .proto-root .jc-acts > i { font-style: normal; color: var(--ink-4); font-weight: 600; display: block; margin-bottom: 5px; }
|
||
.proto-root .jc-deliv ul, .proto-root .jc-crit ul, .proto-root .jc-acts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-deliv li { background: var(--soft); border-radius: 6px; padding: 7px 9px; }
|
||
.proto-root .jc-deliv li b { display: block; }
|
||
.proto-root .jc-deliv li span { color: var(--ink-3); font-size: 11.5px; }
|
||
.proto-root .jc-crit li { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
|
||
.proto-root .jc-crit li.ok { color: var(--ok); }
|
||
.proto-root .jc-crit li.no { color: var(--danger); }
|
||
.proto-root .jc-lv { font-family: var(--mono); font-size: 10px; background: var(--ink-4); color: #fff; padding: 1px 5px; border-radius: 3px; }
|
||
.proto-root .jc-acts li { display: flex; align-items: center; gap: 6px; background: var(--warn-soft); border-radius: 6px; padding: 6px 9px; }
|
||
|
||
.proto-root .jc-rel-btns { display: flex; gap: 7px; flex-wrap: wrap; }
|
||
.proto-root .jc-rel-hint { font-size: 11px; margin: 0; }
|
||
.proto-root .jc-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 7px; padding: 7px 13px; font-size: 12px; font-weight: 600; background: var(--brand); color: #fff; cursor: pointer; transition: background var(--t-fast); }
|
||
.proto-root .jc-btn:hover:not(:disabled) { background: var(--brand-deep); }
|
||
.proto-root .jc-btn:disabled { opacity: .45; cursor: not-allowed; }
|
||
.proto-root .jc-btn-ghost { background: var(--soft); color: var(--ink-2); }
|
||
.proto-root .jc-btn-ghost:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-btn-ok { background: var(--ok); }
|
||
.proto-root .jc-btn-warn { background: var(--warn-accent); }
|
||
.proto-root .jc-btn-bad { background: var(--danger); }
|
||
|
||
.proto-root .jc-term { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 13px; font-size: 12.5px; }
|
||
.proto-root .jc-term-ok { background: var(--ok-soft); color: var(--ok); }
|
||
.proto-root .jc-term-bad { background: var(--danger-soft); color: var(--danger); }
|
||
.proto-root .jc-term p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.7; }
|
||
|
||
/* ── 视图区 ── */
|
||
.proto-root .jc-vr { height: 100%; overflow-y: auto; padding: 18px 20px 28px; background: #fff; border-radius: 12px; }
|
||
.proto-root .jc-vr > * { flex: 0 0 auto; }
|
||
.proto-root .jc-vr-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
|
||
.proto-root .jc-vr-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); flex: 0 0 auto; }
|
||
.proto-root .jc-vr-h { flex: 1; min-width: 0; }
|
||
.proto-root .jc-vr-kick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
|
||
.proto-root .jc-vr-h h2 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
|
||
.proto-root .jc-vr-h p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
|
||
.proto-root .jc-vr-sign { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-sign-ai, .proto-root .jc-sign-me { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; }
|
||
.proto-root .jc-sign-ai { background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-sign-me { background: var(--accent-soft); color: var(--accent); }
|
||
.proto-root .jc-vr-body { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
|
||
.proto-root .jc-sec { display: flex; flex-direction: column; gap: 9px; }
|
||
.proto-root .jc-sec > h3 { margin: 0; font-size: 13px; color: var(--ink); }
|
||
|
||
.proto-root .jc-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: inline-block; animation: jcBlink 1.1s ease-in-out infinite; }
|
||
.proto-root .jc-pending { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 46px 20px; text-align: center; }
|
||
.proto-root .jc-pending-ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--brand); border: 2px dashed var(--brand); animation: jcSpin 2.4s linear infinite; }
|
||
@keyframes jcSpin { to { transform: rotate(360deg) } }
|
||
.proto-root .jc-pending b { font-size: 14px; color: var(--ink); }
|
||
.proto-root .jc-pending p { margin: 0; font-size: 12px; color: var(--ink-3); max-width: 460px; line-height: 1.7; }
|
||
.proto-root .jc-skel { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 460px; margin-top: 8px; }
|
||
.proto-root .jc-skel > i { height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--soft), var(--line), var(--soft)); background-size: 200% 100%; animation: jcShim 1.4s ease-in-out infinite; }
|
||
.proto-root .jc-skel > i:nth-child(2) { width: 82% } .proto-root .jc-skel > i:nth-child(3) { width: 60% }
|
||
@keyframes jcShim { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
|
||
|
||
.proto-root .jc-callout { display: flex; gap: 8px; align-items: flex-start; border-radius: 9px; padding: 11px 13px; font-size: 12.5px; line-height: 1.75; }
|
||
.proto-root .jc-callout p { margin: 0; }
|
||
.proto-root .jc-callout.t-ok { background: var(--ok-soft); color: var(--ok) }
|
||
.proto-root .jc-callout.t-warn { background: var(--warn-soft); color: var(--warn-accent) }
|
||
.proto-root .jc-callout.t-bad { background: var(--danger-soft); color: var(--danger) }
|
||
.proto-root .jc-callout.t-brand { background: var(--brand-wash); color: var(--brand-deep) }
|
||
.proto-root .jc-callout.t-mute { background: var(--soft); color: var(--ink-2) }
|
||
|
||
.proto-root .jc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
|
||
.proto-root .jc-kv-i { background: var(--soft); border-radius: 8px; padding: 9px 11px; }
|
||
.proto-root .jc-kv-i i { display: block; font-style: normal; font-size: 11px; color: var(--ink-4); margin-bottom: 3px; }
|
||
.proto-root .jc-kv-i b { font-size: 13px; color: var(--ink); }
|
||
.proto-root .jc-kv-i.ph b { color: var(--ink-4); font-style: italic; font-weight: 400; border-bottom: 1px dashed var(--ink-4); }
|
||
.proto-root .jc-kv-i.live { background: var(--brand-wash); }
|
||
.proto-root .jc-kv-i.live b { color: var(--brand-deep); }
|
||
|
||
.proto-root .jc-badges { display: flex; flex-wrap: wrap; gap: 7px; }
|
||
.proto-root .jc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--ink-4); }
|
||
.proto-root .jc-badge.on { background: var(--ok-soft); color: var(--ok); }
|
||
|
||
.proto-root .jc-tbl-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 9px; }
|
||
.proto-root .jc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
|
||
.proto-root .jc-tbl th { background: var(--soft); text-align: left; padding: 8px 10px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
|
||
.proto-root .jc-tbl td { padding: 7px 10px; border-top: 1px solid var(--line-soft); color: var(--ink); }
|
||
.proto-root .jc-tbl input { width: 100%; border: 1px solid var(--brand); border-radius: 5px; padding: 3px 6px; font: inherit; font-size: 12px; }
|
||
/* 空格子喊「待填写」—— 红边红占位字,填上即恢复常态(一片文字里的两个空格,不喊没人看得见) */
|
||
.proto-root .jc-tbl input.jc-tbl-todo { border-color: var(--danger); background: var(--danger-soft); }
|
||
.proto-root .jc-tbl input.jc-tbl-todo::placeholder { color: var(--danger); font-weight: 700; opacity: 1; }
|
||
.proto-root .jc-tbl input.jc-tbl-todo:focus { outline: 2px solid var(--danger); outline-offset: -1px; }
|
||
/* 只读态的空格子:如实说没填,不留一片让人以为「本来就没这项」的空白 */
|
||
.proto-root .jc-tbl .jc-tbl-empty { font-style: normal; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .jc-tbl-bar { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
|
||
|
||
.proto-root .jc-bars { display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-bar-row { display: grid; grid-template-columns: 92px 1fr 120px; gap: 9px; align-items: center; font-size: 11.5px; }
|
||
.proto-root .jc-bar-l { color: var(--ink-3); }
|
||
.proto-root .jc-bar-t { position: relative; height: 14px; background: var(--soft); border-radius: 7px; overflow: hidden; }
|
||
.proto-root .jc-bar-t > i { display: block; height: 100%; border-radius: 7px; transition: width var(--t-med); }
|
||
.proto-root .jc-bar-t > i.t-ok { background: var(--ok) } .proto-root .jc-bar-t > i.t-warn { background: var(--warn-accent) }
|
||
.proto-root .jc-bar-t > i.t-bad { background: var(--danger) } .proto-root .jc-bar-t > i.t-brand { background: var(--brand) }
|
||
.proto-root .jc-bar-t > i.t-mute { background: var(--ink-4) }
|
||
.proto-root .jc-redline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); }
|
||
.proto-root .jc-bar-v { color: var(--ink-2); }
|
||
|
||
.proto-root .jc-donut { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
|
||
.proto-root .jc-donut-bg { fill: none; stroke: var(--soft); stroke-width: 16; }
|
||
.proto-root .jc-donut-seg { fill: none; stroke-width: 16; transform: rotate(-90deg); transform-origin: 70px 70px; transition: stroke-dasharray var(--t-med); }
|
||
.proto-root .jc-donut-seg.t-ok { stroke: var(--ok) } .proto-root .jc-donut-seg.t-warn { stroke: var(--warn-accent) }
|
||
.proto-root .jc-donut-seg.t-bad { stroke: var(--danger) } .proto-root .jc-donut-seg.t-brand { stroke: var(--brand) }
|
||
.proto-root .jc-donut-seg.t-mute { stroke: var(--ink-4) }
|
||
.proto-root .jc-donut-n { text-anchor: middle; font-size: 22px; font-weight: 700; fill: var(--ink); font-family: var(--mono); }
|
||
.proto-root .jc-donut-u { text-anchor: middle; font-size: 10px; fill: var(--ink-4); }
|
||
.proto-root .jc-donut-lg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
|
||
.proto-root .jc-donut-lg li { display: flex; align-items: center; gap: 7px; }
|
||
.proto-root .jc-donut-lg em { width: 9px; height: 9px; border-radius: 3px; }
|
||
.proto-root .jc-donut-lg em.t-ok { background: var(--ok) } .proto-root .jc-donut-lg em.t-warn { background: var(--warn-accent) }
|
||
.proto-root .jc-donut-lg em.t-bad { background: var(--danger) } .proto-root .jc-donut-lg em.t-brand { background: var(--brand) }
|
||
.proto-root .jc-donut-lg em.t-mute { background: var(--ink-4) }
|
||
|
||
.proto-root .jc-rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; }
|
||
.proto-root .jc-rcard { border: 1px solid var(--cardline); border-radius: 10px; padding: 12px; background: #fff; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-rcard-h { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-bottom: 7px; }
|
||
.proto-root .jc-rcard-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--ink-2); }
|
||
.proto-root .jc-rcard.t-ok .jc-rcard-tag { background: var(--ok-soft); color: var(--ok) }
|
||
.proto-root .jc-rcard.t-warn .jc-rcard-tag { background: var(--warn-soft); color: var(--warn-accent) }
|
||
.proto-root .jc-rcard-t { font-size: 13px; display: block; }
|
||
.proto-root .jc-swap { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
|
||
.proto-root .jc-swap s { color: var(--ink-4) } .proto-root .jc-swap b { color: var(--ink) }
|
||
.proto-root .jc-swap em { font-style: normal; font-size: 10px; background: var(--warn-soft); color: var(--warn-accent); padding: 1px 6px; border-radius: 999px; }
|
||
.proto-root .jc-rcard-big { margin: 9px 0; }
|
||
.proto-root .jc-rcard-big b { font-size: 24px; font-family: var(--mono); color: var(--ink); }
|
||
.proto-root .jc-rcard-big span { display: block; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-rcard-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 11px; }
|
||
.proto-root .jc-rcard-meta i { font-style: normal; color: var(--ink-4); margin-right: 5px; }
|
||
.proto-root .jc-rcard-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
|
||
.proto-root .jc-rcard-sign { margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--line-soft); display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-4); }
|
||
|
||
.proto-root .jc-waitbar { display: flex; gap: 10px; align-items: flex-start; background: var(--soft); border-radius: 9px; padding: 14px; }
|
||
.proto-root .jc-waitbar b { font-size: 13px; } .proto-root .jc-waitbar p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); }
|
||
|
||
.proto-root .jc-files { display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-file { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--cardline); background: #fff; border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-file:hover { border-color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-file > div { flex: 1; min-width: 0; }
|
||
.proto-root .jc-file b { display: block; font-size: 12.5px; } .proto-root .jc-file span { font-size: 11px; color: var(--ink-3); }
|
||
|
||
.proto-root .jc-letter { border: 1px solid var(--cardline); border-radius: 10px; padding: 13px; background: #fff; }
|
||
.proto-root .jc-letter.in { border-left: 3px solid var(--accent); }
|
||
.proto-root .jc-letter.out { border-left: 3px solid var(--brand); }
|
||
.proto-root .jc-letter-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
|
||
.proto-root .jc-letter-dir { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--ink-2); }
|
||
.proto-root .jc-letter-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); margin-bottom: 9px; }
|
||
.proto-root .jc-letter-meta p { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||
.proto-root .jc-letter-meta i { font-style: normal; color: var(--ink-4); min-width: 44px; }
|
||
.proto-root .jc-letter-meta input { flex: 1; min-width: 180px; border: 1px solid var(--cardline); border-radius: 5px; padding: 3px 7px; font: inherit; font-size: 11.5px; }
|
||
.proto-root .jc-letter-sub { display: block; width: 100%; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
|
||
.proto-root input.jc-letter-sub { border: 1px solid var(--brand); border-radius: 6px; padding: 5px 8px; }
|
||
.proto-root .jc-letter-body { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-2); white-space: pre-wrap; }
|
||
.proto-root textarea.jc-letter-body { width: 100%; border: 1px solid var(--brand); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; }
|
||
.proto-root .jc-atts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
|
||
.proto-root .jc-att { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cardline); background: var(--soft); border-radius: 7px; padding: 5px 9px; font-size: 11.5px; cursor: pointer; }
|
||
.proto-root .jc-att:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-att b { font-weight: 600 } .proto-root .jc-att span { color: var(--ink-4) }
|
||
|
||
.proto-root .jc-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--ink-2); }
|
||
.proto-root .jc-chip.ok { background: var(--ok-soft); color: var(--ok) }
|
||
.proto-root .jc-chip.warn { background: var(--warn-soft); color: var(--warn-accent) }
|
||
.proto-root .jc-chip.bad { background: var(--danger-soft); color: var(--danger) }
|
||
.proto-root .jc-chip.wait { background: var(--st-wait-soft); color: var(--st-wait) }
|
||
.proto-root .jc-chip.live { background: var(--brand-soft); color: var(--brand) }
|
||
.proto-root .jc-list-empty { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 30px; color: var(--ink-4); font-size: 12px; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.proto-root .jc-pulse, .proto-root .jc-pulse-dot, .proto-root .jc-pending-ring, .proto-root .jc-skel > i { animation: none; }
|
||
}
|
||
|
||
/* 对话流自由输入（规范 06 人事件）—— 对话流是一切回环输入的唯一入口 */
|
||
.proto-root .jc-composer {
|
||
flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end;
|
||
padding: 10px 12px; border-top: 1px solid var(--line); background: #fff;
|
||
}
|
||
.proto-root .jc-composer textarea {
|
||
flex: 1; min-width: 0; resize: none; border: 1px solid var(--cardline); border-radius: 9px;
|
||
padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.6; color: var(--ink); background: #fff;
|
||
}
|
||
.proto-root .jc-composer textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
|
||
.proto-root .jc-composer textarea:disabled { background: var(--soft); color: var(--ink-4); }
|
||
.proto-root .jc-turn-me { flex-direction: row; justify-content: flex-end; }
|
||
.proto-root .jc-bub-me { background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-note-turn { display: flex; flex-direction: column; gap: 9px; }
|
||
.proto-root .jc-note-hint {
|
||
display: flex; align-items: center; gap: 5px; margin: 0; padding-left: 4px;
|
||
font-size: 11px; color: var(--ink-4); line-height: 1.6;
|
||
}
|
||
|
||
/* ── 主动干预：叫停（控制事件）—— 有仪式感，对比自由留言的零摩擦 ── */
|
||
.proto-root .jc-halt-btn {
|
||
display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--danger-soft);
|
||
background: #fff; color: var(--danger); border-radius: 6px; padding: 3px 9px;
|
||
font-size: 11px; font-weight: 600; cursor: pointer; transition: all var(--t-fast);
|
||
}
|
||
.proto-root .jc-halt-btn:hover { background: var(--danger-soft); }
|
||
.proto-root .jc-halt-ask {
|
||
margin-top: 9px; padding: 11px; border-radius: 9px;
|
||
background: var(--danger-soft); display: flex; flex-direction: column; gap: 9px;
|
||
}
|
||
.proto-root .jc-halt-ask p { margin: 0; font-size: 11.5px; line-height: 1.75; color: var(--ink-2); }
|
||
.proto-root .jc-halt-ask textarea {
|
||
border: 1px solid var(--cardline); border-radius: 7px; padding: 7px 9px;
|
||
font: inherit; font-size: 12px; resize: vertical; background: #fff;
|
||
}
|
||
.proto-root .jc-halt-btns { display: flex; gap: 7px; justify-content: flex-end; }
|
||
.proto-root .jc-halted {
|
||
border-left: 3px solid var(--danger); background: var(--danger-soft);
|
||
border-radius: 9px; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
|
||
}
|
||
.proto-root .jc-halted-h { display: flex; align-items: center; gap: 8px; }
|
||
.proto-root .jc-halted-why { margin: 0; font-size: 12.5px; color: var(--ink); font-weight: 600; }
|
||
.proto-root .jc-halted-note { margin: 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.7; }
|
||
|
||
/* ── 放行卡的草稿层 diff：签字前看得见自己改了什么 ── */
|
||
.proto-root .jc-diff { font-size: 12px; }
|
||
.proto-root .jc-diff > i { font-style: normal; color: var(--ink-4); font-weight: 600; display: block; margin-bottom: 5px; }
|
||
.proto-root .jc-diff ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-diff li {
|
||
display: flex; align-items: center; gap: 6px; background: var(--warn-soft);
|
||
border-radius: 6px; padding: 6px 9px;
|
||
}
|
||
.proto-root .jc-diff p { margin: 0; }
|
||
|
||
/* ── 等待期 = 预读期：把上下文/思路/将调用的工具摊开，别只转圈 ── */
|
||
.proto-root .jc-pending { align-items: stretch; text-align: left; padding: 22px 6px; }
|
||
.proto-root .jc-pending-hd { display: flex; gap: 12px; align-items: center; }
|
||
.proto-root .jc-pending-hd b { font-size: 14px; color: var(--ink); display: block; }
|
||
.proto-root .jc-pending-hd p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
|
||
.proto-root .jc-preread { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
|
||
.proto-root .jc-preread-tip {
|
||
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
|
||
font-size: 11px; color: var(--brand); background: var(--brand-wash);
|
||
padding: 4px 10px; border-radius: 999px;
|
||
}
|
||
.proto-root .jc-preread section { display: flex; flex-direction: column; gap: 6px; }
|
||
.proto-root .jc-preread h4 {
|
||
margin: 0; display: flex; align-items: center; gap: 5px;
|
||
font-size: 11.5px; color: var(--ink-4); font-weight: 600;
|
||
}
|
||
.proto-root .jc-preread section > p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
|
||
.proto-root .jc-preread-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
|
||
.proto-root .jc-preread-steps li { font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
|
||
.proto-root .jc-preread-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-preread-tools li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
|
||
.proto-root .jc-preread-steps li, .proto-root .jc-preread-tools li {
|
||
opacity: 0; animation: jcReveal .5s ease-out forwards;
|
||
}
|
||
@keyframes jcReveal { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.proto-root .jc-preread-steps li, .proto-root .jc-preread-tools li { opacity: 1; animation: none; }
|
||
}
|
||
|
||
/* ── 对话流层次：过去压成痕迹，现在独占注意力 ── */
|
||
.proto-root .jc-trace {
|
||
display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
|
||
border: 1px solid var(--line-soft); background: var(--soft); border-radius: 8px;
|
||
padding: 6px 10px; font-size: 11.5px; color: var(--ink-3); cursor: pointer;
|
||
transition: all var(--t-fast);
|
||
}
|
||
.proto-root .jc-trace:hover { background: #fff; border-color: var(--cardline); color: var(--ink-2); }
|
||
.proto-root .jc-trace b { font-weight: 600; color: var(--ink-2); flex: 0 0 auto; }
|
||
.proto-root .jc-trace-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-trace-decision { border-left: 2px solid var(--st-decision); }
|
||
.proto-root .jc-trace-execute { border-left: 2px solid var(--st-execute); }
|
||
.proto-root .jc-trace-wait { border-left: 2px solid var(--st-wait); }
|
||
.proto-root .jc-trace-release { border-left: 2px solid var(--brand); }
|
||
.proto-root .jc-trace-fold {
|
||
align-self: flex-start; margin-top: 6px; border: 0; background: none;
|
||
color: var(--ink-4); font-size: 11px; cursor: pointer; padding: 0;
|
||
}
|
||
.proto-root .jc-trace-fold:hover { color: var(--brand); }
|
||
|
||
/* 当前待答卡：唯一该抢注意力的东西 */
|
||
.proto-root .jc-cardb.now { box-shadow: 0 0 0 3px var(--brand-wash); border-color: var(--brand); }
|
||
.proto-root .jc-card.now .jc-card-to { color: var(--brand); font-weight: 600; }
|
||
|
||
/* 跨人卡说明压成一行 */
|
||
.proto-root p.jc-cross {
|
||
display: flex; align-items: center; gap: 6px; margin: 0;
|
||
padding: 9px 12px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
|
||
}
|
||
|
||
/* 头部：身份一行 + 元信息一行，动作靠右 */
|
||
.proto-root .jc-tch-meta { gap: 8px; }
|
||
.proto-root .jc-tch-bud { display: inline-flex; align-items: center; gap: 5px; }
|
||
.proto-root .jc-tch-bud .jc-tch-bar { width: 46px; flex: 0 0 auto; }
|
||
.proto-root .jc-tch-sp { flex: 1; }
|
||
|
||
/* ── 恢复聊天气泡语义：卡 = AI 的气泡（左，AI 头像）· 回传 = 人的气泡（右，人头像）── */
|
||
|
||
.proto-root .jc-turn-me > .jc-bub-me { flex: 0 1 auto; max-width: 82%; }
|
||
/* 折叠痕迹缩进到气泡的起始位置，保持左侧节奏（头像宽 + 间距） */
|
||
.proto-root .jc-trace-ind { margin-left: 39px; width: calc(100% - 39px); }
|
||
.proto-root .jc-trace-fold-in { padding: 9px 12px 11px; }
|
||
/* 回传气泡里的回填明细 */
|
||
.proto-root .jc-reply-kv { margin: 7px 0 0; display: flex; flex-direction: column; gap: 4px; }
|
||
.proto-root .jc-reply-kv > div { display: flex; gap: 7px; font-size: 11.5px; }
|
||
.proto-root .jc-reply-kv dt { color: var(--ink-4); flex: 0 0 auto; }
|
||
.proto-root .jc-reply-kv dd { margin: 0; color: var(--ink); }
|
||
|
||
/* 卡作为 AI 气泡内容：工具色只描左缘，其余交给 .copilot-bubble 的旧视觉 */
|
||
.proto-root .jc-cardb .jc-card-h { padding: 10px 12px; margin: 0; }
|
||
.proto-root .jc-cardb.jc-card-decision { border-left: 3px solid var(--st-decision); }
|
||
.proto-root .jc-cardb.jc-card-execute { border-left: 3px solid var(--st-execute); }
|
||
.proto-root .jc-cardb.jc-card-wait { border-left: 3px solid var(--st-wait); }
|
||
.proto-root .jc-cardb.jc-card-release { border-left: 3px solid var(--brand); }
|
||
|
||
|
||
/* Loop 唤醒回执：对话输入 / 外部事件 / 页面交互 三类同级事件 */
|
||
.proto-root .jc-woke {
|
||
position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
|
||
display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
|
||
background: var(--brand); color: #fff; font-size: 11.5px; box-shadow: var(--shadow-2);
|
||
animation: jcWoke 2.6s ease-out forwards;
|
||
}
|
||
@keyframes jcWoke { 0%{opacity:0;transform:translate(-50%,-6px)} 12%,80%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0} }
|
||
/* 系统 Agent 灰头像 */
|
||
.proto-root .jc-ava-sys { background: var(--ink-4); color: #fff; }
|
||
.proto-root .jc-chosen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; color: var(--ok); }
|
||
.proto-root .jc-item-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
|
||
|
||
/* ══ 三层骨架（2026-07-26）：驾驶舱、页签、翻页条**都不滚**，只有事项正文滚 ══
|
||
之前整个中栏是一个滚动区，驾驶舱既挡在表单前面、滚过去之后又消失——
|
||
工单派发工作台的做法相反：「你在哪一单 / 哪一件 / 还剩几件」是常驻的框，工作面才滚。 */
|
||
.proto-root .wf-cockpit { flex: 0 0 auto; margin-bottom: 12px; }
|
||
.proto-root .wf-card.jc-wc-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
||
.proto-root .wf-card.jc-wc-fill { container-type: inline-size; }
|
||
.proto-root .wf-card.jc-wc-fill > .jc-wv-bar { flex: 0 0 auto; }
|
||
/* 窄栏：页签藏图标省宽，保证控制囊与页签同一排 */
|
||
@container (max-width: 520px) {
|
||
.proto-root .jc-wv-tab svg { display: none; }
|
||
.proto-root .jc-wv-tab { padding: 7px 10px; }
|
||
}
|
||
/* 四项导航（下划线式）+ 点位条同一条基线，底边一条实线收住 */
|
||
.proto-root .jc-wv-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
|
||
/* （下划线页签旧规则已删——终版导航样式统一在文件尾「工作区导航 · 终版」块） */
|
||
.proto-root .jc-wv-tab em { background: var(--soft); border-color: transparent; }
|
||
.proto-root .jc-wv-tab.active em { background: var(--brand-wash); border-color: transparent; }
|
||
.proto-root .jc-wv-bar > .jc-pager.top { flex: none; margin: 0; padding: 0; border: 0; gap: 9px; }
|
||
.proto-root .jc-wv-bar .jc-page-dots { flex: none; }
|
||
/* 顶上的点可点击跳件（原来是纯装饰的 <i>） */
|
||
.proto-root .jc-page-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #d9dde3; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-page-dots button:hover { background: var(--brand-soft); transform: scale(1.2); }
|
||
.proto-root .jc-page-dots button.done { background: var(--brand); opacity: .32; }
|
||
.proto-root .jc-page-dots button.cur { background: var(--brand); transform: scale(1.3); }
|
||
/* 正文末尾的翻页：两端各一颗 */
|
||
.proto-root .jc-pager-sp { flex: 1; }
|
||
.proto-root .wf-card.jc-wc-fill > .jc-sa { flex: 1 1 auto; min-height: 0; }
|
||
/* 正文滚动视口：卡已经有 16/18 的内边距，正文不再重复留白（右侧留一点给自绘 thumb） */
|
||
.proto-root .wf-body { min-height: 0; padding-right: 4px; }
|
||
.proto-root .wf-body > .jc-mst-doc { padding: 0 0 6px; animation: rise var(--t-med) both; }
|
||
.proto-root .wf-body > .wf-log { padding-top: 2px; }
|
||
|
||
/* ══ 顶部导航栏（2026-07-26 重构）══
|
||
工作流 · 任务 · 主题 · 目标 全收在这一条，常驻不滚。下面才是判据/指导书 + 报告页。 */
|
||
.proto-root .jc-topbar { position: relative; overflow: hidden; flex: 0 0 auto; margin-bottom: 12px; padding: 12px 18px 13px; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-2); }
|
||
/* 任务标题栏(带 aria-label)必须是块级:外壳顶栏那条 56px 的 .jc-topbar 规则带 display:flex,
|
||
同优先级漏进来会把面包屑行与标题行横排挤成一行(2026-08-25 用户报:标题栏变形) */
|
||
.proto-root .jc-topbar[aria-label] { display: block; height: auto; }
|
||
/* 设计感：顶缘 AI 渐变棱线 + 右上品牌光晕；两行定高（≈88px），其余信息在「工作流」页签 */
|
||
.proto-root .jc-topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ai-grad); }
|
||
.proto-root .jc-topbar::after { content: ""; position: absolute; right: -60px; top: -80px; width: 210px; height: 210px; border-radius: 999px; background: radial-gradient(circle, rgba(51,112,255,.08), transparent 70%); pointer-events: none; }
|
||
.proto-root .jc-topbar > * { position: relative; z-index: 1; }
|
||
/* 面包屑行：工作流 › 任务 …… 状态 · 负责人 */
|
||
.proto-root .jc-tb-crumb { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-tb-crumb > svg { color: var(--ink-5, #b8bec7); flex: none; }
|
||
.proto-root .jc-tb-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 2px 9px; }
|
||
.proto-root .jc-tb-wf, .proto-root .jc-tb-task { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; }
|
||
.proto-root .jc-tb-task { flex: none; }
|
||
.proto-root .jc-tb-wf svg { color: var(--ink-4); flex: none; }
|
||
.proto-root .jc-tb-wf b, .proto-root .jc-tb-task b { font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-tb-task b { color: var(--ink); }
|
||
.proto-root .jc-tb-crumb code { font-size: 10px; color: var(--ink-4); white-space: nowrap; }
|
||
/* 窄栏优先级：先裁工作流编号，再裁工作流名（主体信息「任务名+状态+负责人」永远在） */
|
||
.proto-root .jc-tb-wf code { flex: 0 10 auto; min-width: 0; overflow: hidden; }
|
||
.proto-root .jc-tb-owner { white-space: nowrap; }
|
||
.proto-root .jc-cp-run-st { white-space: nowrap; }
|
||
.proto-root .jc-tb-sp { flex: 1 1 auto; min-width: 0; }
|
||
.proto-root .jc-tb-owner { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11px; color: var(--ink-3); }
|
||
.proto-root .jc-tb-owner em { width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--brand); }
|
||
/* 主题 */
|
||
.proto-root .jc-tb-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
/* 目标：一行收纳（悬停看全文）；流程图在「工作流」页签 */
|
||
.proto-root .jc-tb-goalrow { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); overflow: hidden; }
|
||
.proto-root .jc-tb-goalrow svg { flex: none; color: var(--brand); }
|
||
.proto-root .jc-tb-goalrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* ══ 运行状态行（2026-07-26）══
|
||
⚠️ 这里**没有完成度进度条**：AI 边推进边派工，工作事项没有分母，画成 x/y 是编的。
|
||
只报绝对数（已派/办完/待办/成果），条只画在**预算**上——那才真有上限。 */
|
||
.proto-root .jc-cp-run { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-cp-run-st { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11.5px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 3px 11px; }
|
||
.proto-root .jc-cp-run-st.done { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-cp-run-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-cp-run-n b { font-family: var(--mono); font-weight: 800; color: var(--ink-2); }
|
||
.proto-root .jc-cp-run-n b.hot { color: var(--brand); }
|
||
.proto-root .jc-cp-run-n em { font-style: normal; color: var(--warn, #b7791f); }
|
||
|
||
/* 预算四道闸：唯一有真分母的进度（规范 04） */
|
||
.proto-root .jc-bud { display: flex; flex: none; gap: 6px; }
|
||
.proto-root .jc-bud-g { position: relative; display: inline-flex; align-items: center; gap: 3px; overflow: hidden; padding: 3px 8px 5px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--soft); font-size: 10.5px; color: var(--ink-3); }
|
||
.proto-root .jc-bud-g svg { color: var(--ink-4); }
|
||
.proto-root .jc-bud-g b { font-weight: 800; color: var(--ink-2); }
|
||
.proto-root .jc-bud-g i { font-style: normal; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-bud-g em { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--brand); opacity: .8; }
|
||
.proto-root .jc-bud-g.warm em { background: #e8a33d; }
|
||
.proto-root .jc-bud-g.hot { border-color: #f9c1be; background: var(--danger-soft); }
|
||
.proto-root .jc-bud-g.hot em { background: var(--danger); }
|
||
|
||
/* ══ 工作流详情：图 + 当前状态 + 上下文 ══ */
|
||
.proto-root .jc-wfd { margin-top: 9px; }
|
||
.proto-root .jc-wfd > summary { gap: 7px; }
|
||
.proto-root .jc-wfd-more { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ink-4); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; }
|
||
.proto-root .jc-wfd[open] > summary .jc-wfd-more { color: var(--brand); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
.proto-root .jc-wfd[open] > summary .jc-cp-nodes { display: none; } /* 展开后图里都有，收起态那行就不重复了 */
|
||
.proto-root .jc-wfd-open-t { display: none; }
|
||
.proto-root .jc-wfd[open] > summary .jc-wfd-open-t { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
|
||
.proto-root .jc-wfd-body { margin-top: 11px; animation: rise var(--t-med) both; }
|
||
|
||
/* 流程图：一节点一卡 + 连线；活动=品牌蓝，审批点=琥珀（对齐治理台画布，它不是活动） */
|
||
.proto-root .jc-wfg { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 13px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 11px; }
|
||
.proto-root .jc-wfg-n { position: relative; flex: 1 1 118px; min-width: 108px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
|
||
/* 不画节点间连线：图会换行，行首那颗的连线会悬空指向空白，比没有更糟。
|
||
顺序靠编号（A1…A6）与阅读序表达。 */
|
||
.proto-root .jc-wfg-n.apr { border-color: #e7d4ab; background: linear-gradient(180deg, #fff, #fbf0dc); }
|
||
.proto-root .jc-wfg-n.s-done { border-color: #bfedb4; }
|
||
.proto-root .jc-wfg-n.s-cur { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
|
||
.proto-root .jc-wfg-n.s-todo { opacity: .62; }
|
||
.proto-root .jc-wfg-code { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--ink-4); }
|
||
.proto-root .jc-wfg-n.apr .jc-wfg-code { color: #b98432; }
|
||
.proto-root .jc-wfg-n.s-cur .jc-wfg-code { color: var(--brand); }
|
||
.proto-root .jc-wfg-name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.4; }
|
||
.proto-root .jc-wfg-who { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-wfg-who em { width: 15px; height: 15px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: var(--ink-4); }
|
||
.proto-root .jc-wfg-n.s-cur .jc-wfg-who em { background: var(--brand); }
|
||
.proto-root .jc-wfg-n.apr .jc-wfg-who em { background: #b98432; }
|
||
.proto-root .jc-wfg-st { margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--ink-4); }
|
||
.proto-root .jc-wfg-n.s-done .jc-wfg-st { color: var(--ok); }
|
||
.proto-root .jc-wfg-n.s-cur .jc-wfg-st { color: var(--brand); }
|
||
|
||
/* 详情四格：目标 / 怎么起的单 / 起单输入 / 编号 */
|
||
.proto-root .jc-wfd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; margin-top: 9px; }
|
||
.proto-root .jc-wfd-cell.wide { grid-column: 1 / -1; }
|
||
.proto-root .jc-wfd-cell .jc-bud { margin-top: 4px; flex-wrap: wrap; }
|
||
.proto-root .jc-wfd-cell { padding: 9px 11px; background: #fff; border: 1px solid var(--line-soft); border-radius: 9px; }
|
||
.proto-root .jc-wfd-cell > i { display: block; margin-bottom: 4px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ink-4); }
|
||
.proto-root .jc-wfd-cell p { margin: 0 0 2px; font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
|
||
.proto-root .jc-wfd-in { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
|
||
.proto-root .jc-wfd-in li { font-size: 11px; line-height: 1.5; }
|
||
.proto-root .jc-wfd-in b { display: block; color: var(--ink-2); }
|
||
.proto-root .jc-wfd-in span { color: var(--ink-4); }
|
||
|
||
/* ══ 工单报告页（2026-07-26 重设计）：办结的工单 = 一份可归档的汇报页 ══
|
||
版式取正式汇报件：题头双线 → 元信息一行 → 关键指标带 → 编号章节（一/二/三）→
|
||
图表正文 → 填报/结论 → 落款与签章。色彩纪律：**结构用品牌蓝，数据才用语义色**。 */
|
||
.proto-root .jc-report { background: #fff; border: 1px solid var(--cardline); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; animation: rise var(--t-med) both; }
|
||
|
||
/* 题头：类型行 + 标题 + 状态（待办章 / 印章）；下缘粗细双线 = 正式件题头 */
|
||
.proto-root .jc-rp-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 13px; border-bottom: 2px solid var(--ink); }
|
||
.proto-root .jc-rp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--line); }
|
||
.proto-root .jc-rp-badge { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-rp-tit { flex: 1; min-width: 0; }
|
||
.proto-root .jc-rp-tit em { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-rp-tit h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
|
||
.proto-root .jc-rp-wait { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 4px 12px; }
|
||
/* 印章：办结后盖在题头右侧 */
|
||
.proto-root .jc-rp-stamp { flex: none; margin-top: 2px; transform: rotate(-6deg); border: 2px solid currentColor; border-radius: 9px; padding: 4px 8px 3px 12px; font-size: 13px; font-weight: 900; letter-spacing: .28em; color: var(--ok); opacity: .9; }
|
||
.proto-root .jc-rp-stamp.bad { color: var(--danger); }
|
||
|
||
/* 元信息一行：编号 / 所属 / 编制 / 派发 / 办结（分隔竖线，不做格子） */
|
||
.proto-root .jc-rp-meta { display: flex; flex-wrap: wrap; row-gap: 3px; padding: 8px 20px; margin-top: 4px; border-bottom: 1px solid var(--line-soft); background: #fbfcfe; }
|
||
.proto-root .jc-rp-meta > span { display: inline-flex; align-items: baseline; gap: 6px; padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--line-soft); }
|
||
.proto-root .jc-rp-meta > span:last-child { border-right: 0; margin-right: 0; }
|
||
.proto-root .jc-rp-meta i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--ink-4); }
|
||
.proto-root .jc-rp-meta b { font-size: 11px; font-weight: 700; color: var(--ink-2); }
|
||
|
||
/* 关键指标带：依据摆上台面（洗蓝渐变格） */
|
||
.proto-root .jc-rp-stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line-soft); }
|
||
.proto-root .jc-rp-stat { flex: 1 1 150px; min-width: 0; padding: 10px 16px 11px; background: linear-gradient(180deg, var(--brand-wash), #fff 85%); }
|
||
.proto-root .jc-rp-stat i { display: block; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; color: var(--ink-4); }
|
||
.proto-root .jc-rp-stat b { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.5; }
|
||
|
||
/* 编号章节：一 / 二 / 三 */
|
||
.proto-root .jc-rp-s { padding: 15px 20px 10px; }
|
||
.proto-root .jc-rp-s + .jc-rp-s { border-top: 1px dashed var(--line); }
|
||
.proto-root .jc-rp-sh { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; }
|
||
.proto-root .jc-rp-sh em { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--brand); box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-rp-sh b { flex: none; font-size: 13.5px; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
|
||
.proto-root .jc-rp-sh .ln { flex: 1; height: 1px; background: var(--line-soft); }
|
||
.proto-root .jc-rp-sh .aside { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--ink-4); font-family: var(--mono); background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 10px; }
|
||
.proto-root .jc-rp-sh .aside.ok { color: var(--ok); background: var(--ok-soft); border-color: #bfedb4; }
|
||
.proto-root .jc-rp-sh .aside.bad { color: var(--danger); background: var(--danger-soft); border-color: #f9c1be; }
|
||
|
||
/* 一 · 任务要求：要求段 + 分步 + 完成标准 */
|
||
.proto-root .jc-rp-ask { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
|
||
.proto-root .jc-steps { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-steps li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
|
||
.proto-root .jc-steps em { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-soft); font-family: var(--mono); }
|
||
.proto-root .jc-rp-std { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 13px; border-left: 3px solid var(--brand); border-radius: 8px; background: linear-gradient(90deg, var(--brand-wash), #fff 72%); font-size: 12px; color: var(--ink-2); line-height: 1.65; }
|
||
.proto-root .jc-rp-std svg { flex: none; margin-top: 2px; color: var(--brand); }
|
||
.proto-root .jc-rp-std b { font-weight: 800; color: var(--brand-deep); margin-right: 6px; }
|
||
|
||
/* 二 · 验收判据：行表（左判据 · 中级别 · 右达标） */
|
||
.proto-root .jc-rp-crit { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
|
||
.proto-root .jc-rp-crit li { display: flex; align-items: center; gap: 10px; padding: 8px 13px; background: #fff; font-size: 12.5px; }
|
||
.proto-root .jc-rp-crit li + li { border-top: 1px solid var(--line-soft); }
|
||
.proto-root .jc-rp-crit .t { flex: 1; min-width: 0; color: var(--ink-2); }
|
||
.proto-root .jc-rp-crit .r { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11px; font-weight: 800; color: var(--ok); }
|
||
.proto-root .jc-rp-crit li.no .r { color: var(--danger); }
|
||
|
||
/* 三 · 验收结论：落地动作 + 结论章 */
|
||
.proto-root .jc-rp-eff { margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--soft); }
|
||
.proto-root .jc-rp-eff > i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--ink-4); }
|
||
.proto-root .jc-rp-eff ul { margin: 7px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-rp-eff li { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-rp-eff b { color: var(--ink-2); }
|
||
.proto-root .jc-rp-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 11px 14px; border-radius: 10px; background: var(--ok-soft); border: 1px solid #bfedb4; color: var(--ok); font-size: 13px; font-weight: 800; }
|
||
.proto-root .jc-rp-verdict span { font-weight: 500; font-size: 12px; color: var(--ink-2); }
|
||
.proto-root .jc-rp-verdict.bad { background: var(--danger-soft); border-color: #f9c1be; color: var(--danger); }
|
||
|
||
/* 三 · 处理与填报（在办：表单分节，节头带进度） */
|
||
.proto-root .jc-rp-grp { margin: 0 0 16px; padding: 0; border: 0; }
|
||
.proto-root .jc-rp-lg { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 8px; margin: 0 0 11px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 800; color: var(--brand-deep); }
|
||
.proto-root .jc-rp-lg i { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-4); background: var(--soft); border-radius: 999px; padding: 2px 8px; font-family: var(--mono); }
|
||
.proto-root .jc-rp-lg i.ok { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .jc-fld.done > .jc-fld-l::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 999px; background: var(--ok); vertical-align: middle; }
|
||
|
||
/* 填报结果（办结：值排成正文——这一步让工单页变归档汇报页） */
|
||
.proto-root .jc-rp-valgrp { margin: 0 0 14px; }
|
||
.proto-root .jc-rp-vals { margin: 0; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
|
||
.proto-root .jc-rp-vals .row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; }
|
||
.proto-root .jc-rp-vals .row + .row { border-top: 1px solid var(--line-soft); }
|
||
.proto-root .jc-rp-vals dt { padding: 8px 12px; background: var(--soft); font-size: 11px; font-weight: 700; color: var(--ink-3); }
|
||
.proto-root .jc-rp-vals dd { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--ink); line-height: 1.65; background: #fff; }
|
||
|
||
/* 落款 */
|
||
.proto-root .jc-rp-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 20px 15px; border-top: 2px solid var(--line); background: #fbfcfd; }
|
||
.proto-root .jc-rp-sign { display: flex; align-items: center; gap: 9px; flex: 1 1 200px; min-width: 0; }
|
||
.proto-root .jc-rp-ava { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--brand); }
|
||
.proto-root .jc-rp-sign b { display: block; font-size: 12px; color: var(--ink-2); }
|
||
.proto-root .jc-rp-sign span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-rp-submit { margin-left: auto; flex: none; }
|
||
|
||
/* ══ 已完成列表：一行一份成果报告，点进去看定稿页 ══ */
|
||
.proto-root .jc-dv-row { width: 100%; text-align: left; cursor: pointer; font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-dv-row:hover { border-color: var(--brand); box-shadow: var(--shadow-2); transform: translateY(-1px); }
|
||
.proto-root .jc-dv-row .jc-dv-h { display: flex; align-items: center; }
|
||
.proto-root .jc-dv-row .jc-dv-h > svg { flex: none; color: var(--ink-4); margin-left: 4px; transition: color var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-dv-row:hover .jc-dv-h > svg { color: var(--brand); transform: translateX(2px); }
|
||
.proto-root .jc-dv.s-bad .jc-dv-st { color: var(--danger); background: var(--danger-soft); }
|
||
.proto-root .jc-dv.s-bad .jc-dv-ico { color: var(--danger); background: var(--danger-soft); }
|
||
/* 报告详情顶部的返回 */
|
||
.proto-root .jc-rp-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 5px 12px 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-rp-back:hover { color: var(--brand); border-color: var(--brand-soft); background: var(--brand-wash); }
|
||
|
||
/* ══ 过程成果货架 ══ */
|
||
.proto-root .jc-dvs { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
|
||
.proto-root .jc-dv { padding: 12px 14px; background: #fff; border: 1px solid var(--cardline); border-left: 3px solid var(--line); border-radius: 11px; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-dv.s-ok { border-left-color: var(--ok); }
|
||
.proto-root .jc-dv.s-live { border-left-color: var(--brand); }
|
||
|
||
/* ── 产出的资料(与定稿报告分两摞,2026-08-23)────────────────────────
|
||
小标题只是分组条,不是卡片:它要看着比行「轻」,不然一摞里出现三种同重量的块 */
|
||
.proto-root .jc-dvs-sub { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 -2px; padding: 0 2px;
|
||
font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); }
|
||
.proto-root .jc-dvs-sub em { font-style: normal; font-weight: 700; color: var(--ink-4); }
|
||
.proto-root .jc-dvs-sub i { margin-left: auto; font-style: normal; font-weight: 600; color: var(--ink-4); }
|
||
/* 资料行按格式上色(与件上的格式徽同一套颜色) */
|
||
.proto-root .jc-dv.m-file { border-left-color: var(--ink-4); }
|
||
.proto-root .jc-dv.m-file.f-docx { border-left-color: #2b5fd9; }
|
||
.proto-root .jc-dv.m-file.f-xlsx { border-left-color: #1f7a45; }
|
||
.proto-root .jc-dv.m-file.f-html { border-left-color: #b25e15; }
|
||
.proto-root .jc-dv-fmt { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 999px;
|
||
font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
|
||
background: var(--soft); color: var(--ink-3); }
|
||
.proto-root .jc-dv-fmt.f-docx { background: #eaf1ff; color: #2b5fd9; }
|
||
.proto-root .jc-dv-fmt.f-xlsx { background: #e9f7ee; color: #1f7a45; }
|
||
.proto-root .jc-dv-fmt.f-html { background: #fdf0e6; color: #b25e15; }
|
||
.proto-root .jc-dv.s-bad { border-left-color: var(--danger); }
|
||
.proto-root .jc-dv-h { display: flex; align-items: flex-start; gap: 10px; }
|
||
.proto-root .jc-dv-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-4); background: var(--soft); }
|
||
.proto-root .jc-dv.s-ok .jc-dv-ico { color: var(--ok); background: var(--ok-soft); }
|
||
/*
|
||
* **执行与验收两种颜色**(2026-08-02 用户定):一摞成果里「我办过的那张单」与
|
||
* 「我签过字的那一关」是两类东西 —— 同色排下来,人得逐行读标题才分得出。
|
||
* 执行走品牌蓝(在办的调子),验收走绿(过了关的调子);退回压过两者走警示色。
|
||
*/
|
||
.proto-root .jc-dv.m-exe .jc-dv-ico { color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-dv.m-exe .jc-dv-st { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-dv.m-exe { border-left: 3px solid var(--brand-soft); }
|
||
.proto-root .jc-dv.m-acc .jc-dv-ico { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .jc-dv.m-acc .jc-dv-st { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .jc-dv.m-acc { border-left: 3px solid var(--ok); }
|
||
.proto-root .jc-dv.s-bad.m-exe, .proto-root .jc-dv.s-bad.m-acc { border-left-color: var(--danger); }
|
||
.proto-root .jc-dv.s-bad.m-exe .jc-dv-ico, .proto-root .jc-dv.s-bad.m-acc .jc-dv-ico { color: var(--danger); background: var(--danger-soft); }
|
||
.proto-root .jc-dv.s-bad.m-exe .jc-dv-st, .proto-root .jc-dv.s-bad.m-acc .jc-dv-st { color: var(--danger); background: var(--danger-soft); }
|
||
.proto-root .jc-dv.s-live .jc-dv-ico { color: #fff; background: var(--ai-grad); }
|
||
.proto-root .jc-dv-t { flex: 1; min-width: 0; }
|
||
.proto-root .jc-dv-t em { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-dv-t b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
|
||
.proto-root .jc-dv-st { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ink-4); background: var(--soft); border-radius: 999px; padding: 3px 10px; }
|
||
.proto-root .jc-dv.s-ok .jc-dv-st { color: var(--ok); background: var(--ok-soft); }
|
||
.proto-root .jc-dv.s-live .jc-dv-st { color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-dv-d { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
|
||
.proto-root .jc-dv-fold { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-dv-fold > summary em { flex: none; margin-left: 4px; font-size: 10px; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-dv-body { margin-top: 4px; }
|
||
|
||
/* ══ 驾驶舱瘦身（2026-07-26）：只答「哪单 · 走到哪了 · 还剩几件」 ══ */
|
||
/* 节点链从事项里收上来——任务级的事说一次，不在每条事项里重抄。
|
||
常驻头必须窄：强制一行（换行会让整个头长高一截），窄到放不下就横向滚 */
|
||
.proto-root .jc-cp-nodes { margin-top: 9px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
|
||
.proto-root .jc-cp-nodes::-webkit-scrollbar { display: none; }
|
||
.proto-root .jc-cp-nodes .jc-ctx-node { flex: none; }
|
||
/* 还剩几件：进度条与那句话并排一行（原先是大数字 + 件名两块，件名与下面的翻页条重复） */
|
||
.proto-root .jc-cp-rest { display: flex; align-items: center; gap: 13px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-cp-rest .wf-bar { flex: 1; min-width: 0; margin-top: 0; }
|
||
.proto-root .jc-cp-rest-t { flex: none; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-cp-rest-t b { margin-right: 3px; color: var(--brand); font-family: var(--mono); font-weight: 800; }
|
||
|
||
/* ══ 折叠件：读一次就不再看的东西收起来，别把正事顶出首屏 ══ */
|
||
.proto-root .jc-fold > summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--ink-3); user-select: none; }
|
||
.proto-root .jc-fold > summary::-webkit-details-marker { display: none; }
|
||
.proto-root .jc-fold > summary svg { flex: none; color: var(--ink-4); transition: transform var(--t-fast); }
|
||
.proto-root .jc-fold[open] > summary svg { transform: rotate(90deg); }
|
||
.proto-root .jc-fold > summary:hover { color: var(--brand); }
|
||
.proto-root .jc-fold > summary:hover svg { color: var(--brand); }
|
||
/* 摘要里带一撮内容预览：收起时也知道里面有什么 */
|
||
.proto-root .jc-fold > summary em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-weight: 400; color: var(--ink-4); }
|
||
.proto-root .jc-cp-fold { margin-top: 11px; }
|
||
.proto-root .jc-cp-fold .jc-cp-goal { margin-top: 8px; }
|
||
.proto-root .jc-basis-fold { margin-top: 12px; }
|
||
.proto-root .jc-basis-fold .jc-basis { margin-top: 7px; border-radius: 9px; }
|
||
|
||
/* ══ 事项翻页条：复用「一页一卡」的 .jc-pager，挪到正文顶部（分隔线随之翻到下缘） ══ */
|
||
.proto-root .jc-pager.top { margin-top: 0; margin-bottom: 14px; padding-top: 0; padding-bottom: 10px; border-top: 0; border-bottom: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-pager.top .jc-page-dots i.done { background: var(--brand); opacity: .32; }
|
||
.proto-root .jc-pager.top .jc-page-dots i.cur { background: var(--brand); }
|
||
.proto-root .jc-pager-n { flex: none; font-size: 11px; font-weight: 700; color: var(--ink-4); letter-spacing: -.02em; }
|
||
|
||
/* ══ 这一摞翻完了 ══ */
|
||
.proto-root .jc-mst-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 52px 20px 58px; text-align: center; }
|
||
.proto-root .jc-mst-empty svg { color: var(--ink-4); opacity: .45; }
|
||
.proto-root .jc-mst-empty b { font-size: 14px; color: var(--ink-2); }
|
||
.proto-root .jc-mst-empty p { margin: 0; max-width: 30em; font-size: 12px; color: var(--ink-4); line-height: 1.7; }
|
||
|
||
/* ══ 四段结构小节 ══ */
|
||
.proto-root .jc-sec4 { margin-top: 16px; }
|
||
.proto-root .jc-sec4-h { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); }
|
||
.proto-root .jc-sec4-h b { font-size: 12.5px; color: var(--ink); }
|
||
.proto-root .jc-sec4-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
|
||
.proto-root .jc-sec4-tip { margin-left: auto; font-size: 11px; color: var(--ink-4); }
|
||
|
||
/* ══ 工作流上下文 ══ */
|
||
.proto-root .jc-ctx { display: flex; flex-direction: column; gap: 8px; }
|
||
.proto-root .jc-ctx-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; }
|
||
.proto-root .jc-ctx-k { font-size: 10.5px; color: var(--ink-4); background: var(--soft); padding: 1px 7px; border-radius: 999px; }
|
||
.proto-root .jc-ctx-nodes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
|
||
.proto-root .jc-ctx-node { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--ink-4); }
|
||
.proto-root .jc-ctx-node.past { background: var(--ok-soft); color: var(--ok); }
|
||
.proto-root .jc-ctx-node.me { background: var(--brand); color: #fff; font-weight: 600; }
|
||
|
||
/* ══ 表单：分组 + 栅格 + 8 种控件 ══ */
|
||
.proto-root .jc-form { display: flex; flex-direction: column; gap: 16px; }
|
||
.proto-root .jc-fs { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 13px 14px; margin: 0; background: #fff; }
|
||
.proto-root .jc-fs-lg { padding: 0 7px; font-size: 11.5px; font-weight: 700; color: var(--brand); }
|
||
.proto-root .jc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
||
.proto-root .jc-fld { grid-column: span 2; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-fld.half { grid-column: span 1; }
|
||
.proto-root .jc-fld-l { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
|
||
.proto-root .jc-req { font-style: normal; font-size: 9.5px; padding: 1px 5px; border-radius: 3px; background: var(--danger-soft); color: var(--danger); }
|
||
.proto-root .jc-fld-h { margin: 0; font-size: 11px; color: var(--ink-4); line-height: 1.6; }
|
||
.proto-root .jc-inp, .proto-root .jc-ta, .proto-root .jc-sel, .proto-root .jc-num input {
|
||
width: 100%; border: 1px solid var(--cardline); border-radius: 7px; padding: 7px 10px;
|
||
font: inherit; font-size: 12.5px; color: var(--ink); background: #fff;
|
||
}
|
||
.proto-root .jc-ta { resize: vertical; line-height: 1.7; }
|
||
.proto-root .jc-inp:focus, .proto-root .jc-ta:focus, .proto-root .jc-sel:focus, .proto-root .jc-num input:focus {
|
||
outline: 2px solid var(--brand-soft); border-color: var(--brand);
|
||
}
|
||
.proto-root .jc-sel-wrap { position: relative; display: flex; align-items: center; }
|
||
.proto-root .jc-sel { appearance: none; padding-right: 30px; cursor: pointer; }
|
||
.proto-root .jc-sel-wrap > svg { position: absolute; right: 10px; pointer-events: none; color: var(--ink-4); }
|
||
.proto-root .jc-num { display: flex; align-items: center; gap: 0; position: relative; }
|
||
.proto-root .jc-num input { padding-left: 10px; }
|
||
.proto-root .jc-num-pre { position: absolute; left: 10px; font-size: 12.5px; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-num:has(.jc-num-pre) input { padding-left: 24px; }
|
||
.proto-root .jc-num-unit { position: absolute; right: 10px; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .jc-checks { display: flex; flex-wrap: wrap; gap: 7px; }
|
||
.proto-root .jc-check { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cardline); background: #fff; border-radius: 7px; padding: 6px 11px; font-size: 11.5px; cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-check:hover { border-color: var(--brand); }
|
||
.proto-root .jc-check.on { border-color: var(--brand); background: var(--brand-wash); color: var(--brand-deep); }
|
||
.proto-root .jc-check-box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--cardline); display: grid; place-items: center; }
|
||
.proto-root .jc-check.on .jc-check-box { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||
.proto-root .jc-radio { display: inline-flex; align-items: center; gap: 5px; }
|
||
.proto-root .jc-crit-t { flex: 1; }
|
||
|
||
/* ══ 对话区 · 气泡二元制（2026-07-26 定稿）══
|
||
所有内容都在气泡里。AI 只有两种形态：**纯文本气泡** / **完整表单卡**（不混排、无半结构化条目）。
|
||
表单卡自带题头（类型+计数）→ 说明 → 参考信息 kv 表 → 字段/选项 → 动作栏。 */
|
||
|
||
/* 画布与列 */
|
||
.proto-root .jc-tch-scroll { background: #f6f7f9; gap: 16px; padding: 16px 14px; }
|
||
.proto-root .jc-ag { display: flex; gap: 9px; align-items: flex-start; animation: jcMsgIn var(--t-med) both; }
|
||
.proto-root .jc-ag-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
|
||
.proto-root .jc-msg-meta { display: flex; align-items: center; gap: 6px; padding: 2px 1px 0; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--ink-4); font-family: var(--mono); }
|
||
.proto-root .jc-msg-meta.r { justify-content: flex-end; }
|
||
@keyframes jcMsgIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
|
||
|
||
/* AI 文本气泡（左 · 白）与系统气泡（灰调）；带卡的回复 = 同一气泡里 文字在上、卡嵌其中 */
|
||
.proto-root .jc-ag-b { max-width: 92%; background: #fff; border: 1px solid var(--line-soft); border-radius: 4px 14px 14px 14px; padding: 10px 13px; box-shadow: 0 1px 2px rgba(31,35,41,.04), 0 3px 12px rgba(31,35,41,.05); }
|
||
.proto-root .jc-ag-b.card { max-width: 100%; width: 100%; }
|
||
.proto-root .jc-ag-b > .jc-fc { margin-top: 10px; box-shadow: none; }
|
||
.proto-root .jc-ag-b .jc-content { font-size: 12.8px; line-height: 1.78; color: var(--ink); }
|
||
.proto-root .jc-ag-b.sys { background: #eef0f4; border-color: var(--line-soft); }
|
||
.proto-root .jc-ag-b.sys .jc-content { color: var(--ink-2); font-size: 12px; }
|
||
|
||
/* 类型章（署名行小色章） */
|
||
.proto-root .jc-mtag { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; }
|
||
.proto-root .jc-mtag.m-auto { background: var(--st-auto-soft); color: var(--st-auto); }
|
||
.proto-root .jc-mtag.m-exe { background: var(--st-execute-soft); color: var(--st-execute); }
|
||
.proto-root .jc-mtag.m-acc { background: var(--st-collab-soft); color: var(--st-collab); }
|
||
.proto-root .jc-mtag.m-dec { background: var(--st-decision-soft); color: var(--st-decision); }
|
||
.proto-root .jc-mtag.m-fill { background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .jc-mtag.m-sys { background: var(--st-wait-soft); color: var(--st-wait); }
|
||
|
||
/* 人的气泡（右 · 品牌渐变，唯一右侧） */
|
||
.proto-root .session-chat .jc-msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 84%; }
|
||
.proto-root .session-chat .jc-msg-col.r { align-items: flex-end; }
|
||
.proto-root .session-chat .jc-msg-col .copilot-bubble { margin-top: 0; max-width: 100%; }
|
||
.proto-root .session-chat .copilot-msg.human { animation: jcMsgIn var(--t-med) both; }
|
||
|
||
/* ── 完整表单卡：对话区唯一的结构化形态 ── */
|
||
.proto-root .jc-fc { --fc: var(--brand); --fc-soft: var(--brand-wash); width: 100%; max-width: 100%; background: #fff; border: 1px solid color-mix(in srgb, var(--fc) 22%, var(--line-soft)); border-radius: 13px; overflow: hidden; box-shadow: 0 1px 2px rgba(31,35,41,.04), 0 4px 14px rgba(31,35,41,.06); }
|
||
.proto-root .jc-fc.t-exe { --fc: var(--st-execute); --fc-soft: var(--st-execute-soft); }
|
||
.proto-root .jc-fc.t-acc { --fc: var(--st-collab); --fc-soft: var(--st-collab-soft); }
|
||
.proto-root .jc-fc.t-data { --fc: var(--st-data); --fc-soft: var(--st-data-soft); }
|
||
.proto-root .jc-fc.t-dec { --fc: var(--st-decision); --fc-soft: var(--st-decision-soft); }
|
||
.proto-root .jc-fc.t-fill { --fc: var(--brand); --fc-soft: var(--brand-wash); }
|
||
/* 题头：色染带 + 计数章 */
|
||
.proto-root .jc-fc-h { display: flex; align-items: center; gap: 6px; padding: 8px 13px; background: var(--fc-soft); border-bottom: 1px solid color-mix(in srgb, var(--fc) 14%, transparent); color: var(--fc); }
|
||
.proto-root .jc-fc-h svg { color: currentColor; }
|
||
.proto-root .jc-fc-h b { flex: 1; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; }
|
||
.proto-root .jc-fc-h em { flex: none; font-style: normal; font-size: 10px; font-weight: 800; font-family: var(--mono); color: var(--fc); background: #fff; border-radius: 999px; padding: 1px 8px; }
|
||
.proto-root .jc-fc-h em.ok { color: var(--ok); }
|
||
.proto-root .jc-fc-h em.bad { color: var(--danger); }
|
||
/* 卡体与动作栏 */
|
||
.proto-root .jc-fc-b { padding: 11px 13px; display: flex; flex-direction: column; gap: 10px; }
|
||
/* 动作靠右(2026-08-03 用户:「提交按钮放左侧太奇怪了」)—— 验收卡的「重做|通过」有 jc-fc-sp 撑开,不受影响 */
|
||
.proto-root .jc-fc-ft { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--line-soft); background: #fbfcfe; }
|
||
/*
|
||
* **交不了的时候,说清差在哪** —— 只摆一个灰按钮等于让人猜自己哪儿做错了。
|
||
* 底色用警示色而不是错误红:这不是出错,是活还没干完。
|
||
*/
|
||
.proto-root .jc-fc-gate { padding: 9px 13px; border-top: 1px solid #f2dfc2; background: #fffaf2; }
|
||
.proto-root .jc-fc-gate p { display: flex; align-items: center; gap: 6px; margin: 0; color: #9a5b02; font-size: 12.5px; }
|
||
.proto-root .jc-fc-gate p svg { flex: 0 0 auto; }
|
||
.proto-root .jc-fc-gate ul { margin: 6px 0 0; padding: 0 0 0 19px; list-style: disc; color: var(--ink-2); font-size: 12px; line-height: 1.75; }
|
||
.proto-root .jc-fc-gate li.more { list-style: none; margin-left: -19px; color: var(--ink-3); }
|
||
.proto-root .jc-fc-sp { flex: 1; }
|
||
.proto-root .jc-fc-open { width: 100%; justify-content: center; }
|
||
/* 说明 / 建议 */
|
||
.proto-root .jc-fc-q { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink); }
|
||
.proto-root .jc-fc-q.strong { font-size: 13px; font-weight: 700; }
|
||
.proto-root .jc-fc-note { display: flex; gap: 7px; margin: 0; padding: 8px 11px; background: var(--fc-soft); border-radius: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
|
||
.proto-root .jc-fc-note svg { flex: none; margin-top: 2px; color: var(--fc); }
|
||
.proto-root .jc-fc-note b { margin-right: 6px; color: var(--fc); }
|
||
/* 参考信息：卡内 kv 表（结构化，不是散落小票） */
|
||
.proto-root .jc-fc-kv > i { display: block; margin-bottom: 5px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--ink-4); }
|
||
.proto-root .jc-fc-kv-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; }
|
||
.proto-root .jc-fc-kv-g span { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 7px; background: #fbfcfe; }
|
||
.proto-root .jc-fc-kv-g em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--ink-4); }
|
||
.proto-root .jc-fc-kv-g b { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.5; }
|
||
/* 验收单里的报告入口（成果本体在视图区） */
|
||
.proto-root .jc-fc-doc { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 10px; cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-fc-doc:hover { border-color: var(--fc); background: #fff; box-shadow: var(--shadow-1); }
|
||
.proto-root .jc-fc-doc-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--fc); }
|
||
.proto-root .jc-fc-doc-bd { flex: 1; min-width: 0; }
|
||
/*
|
||
* **四字粗体在上、小字说明在下**(2026-08-02 用户:执行卡与验收卡「格式不统一」)。
|
||
* 从前是反的(小字在上),而两张卡里只有一张这么排 —— 人扫过去落点对不齐。
|
||
*/
|
||
.proto-root .jc-fc-doc-bd b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-fc-doc-bd em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 500; line-height: 1.5; color: var(--ink-3); }
|
||
.proto-root .jc-fc-doc > svg { flex: none; color: var(--ink-4); transition: transform var(--t-fast); }
|
||
.proto-root .jc-fc-doc:hover > svg { transform: translateX(2px); color: var(--fc); }
|
||
/* 判据表（卡内紧凑版） */
|
||
.proto-root .jc-fc .jc-rp-crit.sm li { padding: 6px 11px; font-size: 11.5px; }
|
||
/*
|
||
* **作业指导书与验收判据同一套版面**(2026-08-02 用户定)。
|
||
* 从前指导书是一串松散的圆点(`.jc-steps`),判据是一摞带章的行 ——
|
||
* 同一张卡上两套版面语言,人得在两种读法之间来回切。
|
||
* 差别只留一处:指导书**没有达标/未达标** —— 它是要办的事,不是已办成的事;
|
||
* 不给步骤画对勾:系统并不知道人做没做,画上去就是撒谎。
|
||
*/
|
||
.proto-root .jc-guide li { align-items: flex-start; }
|
||
.proto-root .jc-guide .jc-lv { flex: none; margin-top: 1px; }
|
||
.proto-root .jc-guide .jc-lv-step { background: var(--brand-wash); color: var(--brand); border: 1px solid var(--brand-soft); }
|
||
.proto-root .jc-guide .jc-lv-done { display: inline-grid; place-items: center; background: #fff4e5; color: #de7802; border: 1px solid #f2dfc2; padding: 1px 4px; }
|
||
.proto-root .jc-guide .t { line-height: 1.65; }
|
||
/* 末行是这几步的收口 —— 底色分开,读到那儿就知道「做到这样算数」 */
|
||
.proto-root .jc-guide li.done { background: #fffaf2; }
|
||
.proto-root .jc-guide li.done .t b { display: block; margin-bottom: 1px; color: #9a5b02; font-weight: 800; }
|
||
|
||
/*
|
||
* **办结之后那一屏:落地结果**(2026-08-02 用户定)。
|
||
* 判据说的是「签之前要核什么」;签完之后人问的是「世界上发生了什么」。
|
||
*/
|
||
.proto-root .jc-landing { display: flex; flex-direction: column; gap: 8px; }
|
||
.proto-root .jc-landing-h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ok); }
|
||
.proto-root .jc-landing-h b { font-weight: 800; }
|
||
.proto-root .jc-landing-h span { color: var(--ink-2); font-weight: 700; }
|
||
.proto-root .jc-landing .jc-rp-crit .r { color: var(--ink-3); font-weight: 700; }
|
||
.proto-root .jc-landing-p { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
|
||
.proto-root .jc-landing-p svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
|
||
.proto-root .jc-landing-p b { margin-right: 6px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-landing-p.warn { color: #9a5b02; }
|
||
.proto-root .jc-landing-p.warn svg { color: #de7802; }
|
||
/* 带过去了哪些字段 —— 摆名字不摆值:值在成果件里,这一行答的是「带了哪些东西」 */
|
||
.proto-root .jc-landing-carry { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--ink-3); line-height: 1.6; }
|
||
|
||
/* 决策选项（卡内） */
|
||
.proto-root .jc-tch .jc-branches { margin: 0; display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-tch .jc-branch { display: flex; align-items: flex-start; gap: 9px; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-tch .jc-branch:hover { border-color: var(--fc, var(--st-decision)); background: var(--fc-soft, var(--st-decision-soft)); transform: translateX(3px); box-shadow: var(--shadow-1); }
|
||
.proto-root .jc-tch .jc-branch:active { transform: translateX(3px) scale(.985); }
|
||
.proto-root .jc-branch-n { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--ink-4); background: var(--soft); border: 1px solid var(--line-soft); transition: all var(--t-fast); }
|
||
.proto-root .jc-tch .jc-branch:hover .jc-branch-n { color: #fff; background: var(--fc, var(--st-decision)); border-color: var(--fc, var(--st-decision)); }
|
||
.proto-root .jc-branch-bd { flex: 1; min-width: 0; }
|
||
.proto-root .jc-tch .jc-branch > svg { flex: none; margin-top: 4px; color: var(--ink-4); opacity: 0; transform: translateX(-4px); transition: all var(--t-fast); }
|
||
.proto-root .jc-tch .jc-branch:hover > svg { opacity: 1; transform: none; color: var(--fc, var(--st-decision)); }
|
||
.proto-root .jc-tch .jc-branch.rec { border-color: var(--fc, var(--st-decision)); background: linear-gradient(135deg, var(--fc-soft, var(--st-decision-soft)), #fff 65%); }
|
||
.proto-root .jc-tch .jc-branch.rec .jc-branch-n { color: #fff; background: var(--fc, var(--st-decision)); border-color: var(--fc, var(--st-decision)); }
|
||
.proto-root .jc-conseq { display: flex; align-items: center; gap: 4px; color: var(--ink-4); }
|
||
/* 自定义收尾项 */
|
||
.proto-root .jc-branch-custom { border-style: dashed; cursor: default; }
|
||
.proto-root .jc-branch-custom:hover { transform: none; box-shadow: none; }
|
||
.proto-root .jc-custom-row { display: flex; gap: 7px; margin-top: 7px; }
|
||
.proto-root .jc-custom-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12px; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-custom-row input:focus { border-color: var(--fc, var(--st-decision)); box-shadow: 0 0 0 3px var(--fc-soft, var(--st-decision-soft)); }
|
||
.proto-root .jc-custom-row .jc-btn { flex: none; }
|
||
|
||
/* 已选/已补/没法填 */
|
||
.proto-root .jc-tch .jc-chosen { margin: 0; padding: 8px 11px; background: var(--ok-soft); border: 1px solid #bfedb4; border-radius: 8px; animation: jcMsgIn var(--t-med) both; }
|
||
.proto-root .jc-tch .jc-chosen b { color: var(--ink); }
|
||
.proto-root .jc-tch .jc-chosen code { margin-left: auto; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-tch .jc-chosen.cant { background: var(--st-execute-soft); border-color: #f0d9b8; color: var(--st-execute); }
|
||
|
||
/* 补全表单的两条路 */
|
||
.proto-root .jc-cfill-acts { display: flex; align-items: center; gap: 8px; }
|
||
.proto-root .jc-cfill-acts .jc-btn { margin-left: auto; }
|
||
.proto-root .jc-cant-link { border: 0; background: none; padding: 2px 2px; font-size: 11px; color: var(--ink-4); cursor: pointer; text-decoration: underline dashed; text-underline-offset: 3px; }
|
||
.proto-root .jc-cant-link:hover { color: var(--brand); }
|
||
|
||
/* composer 锁：卡未办完不能对话 */
|
||
.proto-root .jc-comp-lock { display: flex; align-items: center; gap: 6px; padding: 6px 11px; background: var(--st-execute-soft); border: 1px solid #f0d9b8; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--st-execute); animation: jcMsgIn var(--t-fast) both; }
|
||
.proto-root .session-composer textarea:disabled { background: var(--soft); color: var(--ink-4); cursor: not-allowed; }
|
||
|
||
/* AI 输入中 */
|
||
.proto-root .jc-typing { display: inline-flex; gap: 4px; padding: 8px 12px; background: #fff; border: 1px solid var(--line-soft); border-radius: 4px 14px 14px 14px; }
|
||
.proto-root .jc-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-4); opacity: .4; animation: jcTyping 1.1s ease-in-out infinite; }
|
||
.proto-root .jc-typing i:nth-child(2) { animation-delay: .18s; }
|
||
.proto-root .jc-typing i:nth-child(3) { animation-delay: .36s; }
|
||
@keyframes jcTyping { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
|
||
|
||
/* 头部与输入区 */
|
||
.proto-root .jc-tch-head { background: #fff; }
|
||
.proto-root .session-composer { background: #fff; }
|
||
.proto-root .session-composer .composer-row textarea { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 13px; font-size: 13px; line-height: 1.6; color: var(--ink); background: #fff; outline: none; resize: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .session-composer .composer-row textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
|
||
.proto-root .session-composer .copilot-send { background: var(--ai-grad); border-radius: 12px; transition: box-shadow var(--t-fast), transform var(--t-fast), filter var(--t-fast); }
|
||
.proto-root .session-composer .copilot-send:hover:not(:disabled) { background: var(--ai-grad); filter: brightness(1.07); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
|
||
.proto-root .session-composer .copilot-send:active:not(:disabled) { transform: scale(.97); }
|
||
|
||
/* ══ 补全信息卡的小表单：就地作答 ══ */
|
||
.proto-root .jc-cfill { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
|
||
.proto-root .jc-cfill-f { display: flex; flex-direction: column; gap: 4px; }
|
||
.proto-root .jc-cfill-f span { font-size: 11px; font-weight: 700; color: var(--ink-3); }
|
||
.proto-root .jc-cfill-f input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 12.5px; color: var(--ink); background: #fff; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-cfill-f input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
|
||
.proto-root .jc-cfill > .jc-btn { align-self: flex-end; }
|
||
|
||
/* ══ 上传控件（执行工单：真填空、真上传） ══ */
|
||
.proto-root .jc-up { display: flex; flex-direction: column; gap: 7px; }
|
||
.proto-root .jc-up-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 15px 12px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--soft); color: var(--ink-4); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-up-drop:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-up-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
|
||
.proto-root .jc-up-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 11px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; font-size: 11.5px; color: var(--ink-2); }
|
||
.proto-root .jc-up-chip svg { color: var(--brand); }
|
||
.proto-root .jc-up-chip button { border: 0; background: none; padding: 0 0 0 2px; font-size: 13px; line-height: 1; color: var(--ink-4); cursor: pointer; }
|
||
.proto-root .jc-up-chip button:hover { color: var(--danger); }
|
||
|
||
/* ══ 视图区微交互（2026-07-26 晚）══ */
|
||
/* 报告章节入场级差 */
|
||
.proto-root .jc-report .jc-rp-s { animation: rise var(--t-med) both; }
|
||
.proto-root .jc-report .jc-rp-s:nth-of-type(2) { animation-delay: .05s; }
|
||
.proto-root .jc-report .jc-rp-s:nth-of-type(3) { animation-delay: .1s; }
|
||
/* 指标带悬停点亮 */
|
||
.proto-root .jc-rp-stat { transition: background var(--t-fast); }
|
||
.proto-root .jc-rp-stat:hover { background: #fff; }
|
||
/* 表格行悬停 */
|
||
.proto-root .jc-tbl tbody tr { transition: background var(--t-fast); }
|
||
.proto-root .jc-tbl tbody tr:hover { background: var(--brand-wash); }
|
||
/* 判据行悬停 */
|
||
.proto-root .jc-rp-crit li { transition: background var(--t-fast); }
|
||
.proto-root .jc-rp-crit li:hover { background: var(--soft); }
|
||
/* 单选/复选选中弹一下 */
|
||
.proto-root .jc-radio.on svg, .proto-root .jc-check.on .jc-check-box svg { animation: jcPop var(--t-fast) both; }
|
||
@keyframes jcPop { from { transform: scale(.5); } 60% { transform: scale(1.25); } to { transform: none; } }
|
||
/* 提交钮：渐变 + 悬浮 */
|
||
.proto-root .jc-rp-submit { background: var(--ai-grad); border: 0; }
|
||
.proto-root .jc-rp-submit:hover:not(:disabled) { filter: brightness(1.07); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
|
||
/* 印章入场：盖下去 */
|
||
.proto-root .jc-rp-stamp { animation: jcStamp .32s cubic-bezier(.2, 1.4, .4, 1) both; }
|
||
@keyframes jcStamp { from { opacity: 0; transform: rotate(-6deg) scale(1.7); } to { opacity: .9; transform: rotate(-6deg) scale(1); } }
|
||
/* 流程图节点悬停 */
|
||
.proto-root .jc-wfg-n { transition: box-shadow var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-wfg-n:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
|
||
|
||
/* ══ 视图区结构件（2026-07-26 重做）══ */
|
||
/* （旧分段器规则已清——现行导航样式在「页签靠左 + 右侧场景控制位」块） */
|
||
|
||
/* 报告内部件分隔：小题字 + 细线 + 右注 */
|
||
.proto-root .jc-rp-bd { padding: 14px 20px 6px; }
|
||
.proto-root .jc-rp-part { display: flex; align-items: center; gap: 9px; margin: 16px 0 11px; }
|
||
.proto-root .jc-rp-part:first-child { margin-top: 0; }
|
||
.proto-root .jc-rp-part > b { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-3); }
|
||
.proto-root .jc-rp-part > .ln { flex: 1; height: 1px; background: var(--line-soft); }
|
||
.proto-root .jc-rp-part > em { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-4); font-family: var(--mono); background: var(--soft); border-radius: 999px; padding: 2px 9px; }
|
||
|
||
/* 编辑报告开关：AI 填好 → 人一键启动全字段编辑 */
|
||
.proto-root .jc-rp-editbtn { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-top: 2px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 12px; font-weight: 700; cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-rp-editbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-rp-editbtn.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-rp-editbtn em { font-style: normal; font-size: 10px; font-weight: 800; font-family: var(--mono); background: var(--brand); color: #fff; border-radius: 999px; padding: 0 6px; }
|
||
.proto-root .jc-mod { display: inline-block; margin-left: 7px; font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--st-execute); background: var(--st-execute-soft); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
|
||
|
||
/* 卡组二 · 作业指导书 / 验收判据：与报告分明的第二组内嵌卡 */
|
||
.proto-root .jc-side { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); background: #fff; box-shadow: var(--card-shadow); animation: rise var(--t-med) .06s both; }
|
||
.proto-root .jc-side-h { display: flex; align-items: center; gap: 8px; padding: 10px 15px; }
|
||
.proto-root .jc-side-exe .jc-side-h { background: linear-gradient(90deg, var(--st-execute-soft), #fff 80%); border-bottom: 1px solid color-mix(in srgb, var(--st-execute) 16%, transparent); }
|
||
.proto-root .jc-side-acc .jc-side-h { background: linear-gradient(90deg, var(--st-collab-soft), #fff 80%); border-bottom: 1px solid color-mix(in srgb, var(--st-collab) 16%, transparent); }
|
||
.proto-root .jc-side-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
|
||
.proto-root .jc-side-exe .jc-side-ico { background: var(--st-execute); }
|
||
.proto-root .jc-side-acc .jc-side-ico { background: var(--st-collab); }
|
||
.proto-root .jc-side-h b { flex: 1; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
|
||
.proto-root .jc-side-h em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; font-family: var(--mono); color: var(--ink-4); background: #fff; border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; }
|
||
.proto-root .jc-side-h em.ok { color: var(--ok); border-color: #bfedb4; background: var(--ok-soft); }
|
||
.proto-root .jc-side-h em.bad { color: var(--danger); border-color: #f9c1be; background: var(--danger-soft); }
|
||
.proto-root .jc-side-b { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 11px; }
|
||
.proto-root .jc-side-b .jc-steps { margin: 0; }
|
||
.proto-root .jc-side-b .jc-rp-std { margin: 0; }
|
||
.proto-root .jc-side-ask { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
|
||
.proto-root .jc-side-b .jc-rp-eff { margin: 0; }
|
||
|
||
/* ══ 细节修（2026-07-26）══ */
|
||
/* 列表区收起后的展开按钮：悬浮在工作面左上，与标题区首行对齐 */
|
||
/* 列表区收起后的展开把手：贴在边导航右缘、垂直居中的细长半药丸，只占工作面左留白缝，不入侵标题区 */
|
||
.proto-root .jc-wl-expand { position: absolute; left: 0; top: 20px; z-index: 6; width: 12px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-left: none; border-radius: 0 8px 8px 0; background: #fff; color: var(--ink-3); cursor: pointer; box-shadow: var(--shadow-1); transition: width var(--t-fast), color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-wl-expand svg { display: block; }
|
||
.proto-root .jc-wl-expand:hover { width: 14px; color: var(--brand); background: var(--brand-wash); border-color: var(--brand-soft); }
|
||
|
||
/* 页签徽标：只有待处理挂**红色**未完成气泡，其余页签不带数字 */
|
||
.proto-root .jc-wv-tab em.hot { min-width: 17px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; background: var(--danger); border: 0; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 800; }
|
||
.proto-root .jc-wv-tab.active em.hot { background: var(--danger); color: #fff; }
|
||
|
||
/* 报告头的翻页囊（与「编辑」胶囊同风格） */
|
||
.proto-root .jc-rp-pgr { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-top: 2px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
|
||
.proto-root .jc-rp-pgr button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); cursor: pointer; transition: all var(--t-fast); }
|
||
.proto-root .jc-rp-pgr button:hover:not(:disabled) { background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .jc-rp-pgr button:disabled { opacity: .3; cursor: default; }
|
||
.proto-root .jc-rp-pgr > b { padding: 0 5px; font-size: 10.5px; font-weight: 800; color: var(--ink-3); }
|
||
|
||
/* ══ 对话区精修（去粗糙感）══ */
|
||
.proto-root .jc-tch-head { border-bottom: 1px solid var(--line-soft); }
|
||
.proto-root .jc-tch .chat-avatar { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(31,35,41,.08); }
|
||
.proto-root .jc-ag { gap: 10px; }
|
||
.proto-root .jc-msg-meta { gap: 7px; padding-left: 3px; }
|
||
.proto-root .jc-ag-b { border-color: #e8ebf0; border-radius: 6px 16px 16px 16px; padding: 11px 14px; box-shadow: 0 1px 2px rgba(31,35,41,.03), 0 4px 16px rgba(31,35,41,.05); }
|
||
.proto-root .session-chat .copilot-msg.human .copilot-bubble { border-radius: 16px 6px 16px 16px; }
|
||
.proto-root .jc-ag-b > .jc-fc { margin-top: 10px; border-radius: 12px; border-color: color-mix(in srgb, var(--fc) 18%, #e8ebf0); }
|
||
.proto-root .jc-fc-h { padding: 8px 14px 7px; }
|
||
.proto-root .jc-fc-h em { border: 1px solid color-mix(in srgb, var(--fc) 20%, transparent); }
|
||
.proto-root .jc-fc-b { padding: 12px 14px; gap: 11px; }
|
||
.proto-root .jc-fc-ft { padding: 10px 14px; }
|
||
.proto-root .jc-fc .jc-btn { padding: 7px 15px; font-size: 12.5px; border-radius: 9px; }
|
||
.proto-root .jc-fc-kv-g { border-radius: 10px; }
|
||
.proto-root .jc-fc-kv-g span { padding: 7px 11px 8px; background: #fcfdfe; }
|
||
.proto-root .jc-tch .jc-branch { border-radius: 10px; padding: 10px 12px; border-color: #e6e9ef; background: #fcfdfe; }
|
||
.proto-root .jc-tch .jc-note { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12px; line-height: 1.6; color: var(--ink); background: #fff; outline: none; resize: vertical; min-height: 54px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-tch .jc-note:focus { border-color: var(--fc, var(--brand)); box-shadow: 0 0 0 3px var(--fc-soft, var(--brand-wash)); }
|
||
.proto-root .jc-tch .jc-chosen { border-radius: 9px; font-size: 12px; align-items: center; }
|
||
.proto-root .jc-cfill-f input { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-cfill-f input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
|
||
.proto-root .jc-cfill-f > span { font-size: 11px; font-weight: 700; color: var(--ink-3); }
|
||
.proto-root .jc-cfill { gap: 9px; }
|
||
|
||
/* 动作栏成对按钮（修改/提交 · 保存/取消 同一处、同风格） */
|
||
.proto-root .jc-rp-acts2 { display: flex; gap: 8px; margin-left: auto; }
|
||
.proto-root .jc-rp-act { margin-left: auto; }
|
||
|
||
/* ══ 工作流详情（三版）：蛇形流程图 + 信息卡 + 运行仪表 ══ */
|
||
.proto-root .jc-wfd-sec { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; }
|
||
.proto-root .jc-wfd-sec:first-child { margin-top: 2px; }
|
||
.proto-root .jc-wfd-sec-ico { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .jc-wfd-sec b { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-3); }
|
||
.proto-root .jc-wfd-sec .ln { flex: 1; height: 1px; background: var(--line-soft); }
|
||
|
||
/* ── 当前节点内部阶段：并在画布卡内的横向步进条（同卡同底，仅一条分隔线） ── */
|
||
.proto-root .jc-stgwrap { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line-soft); background: #fff; border-radius: 0; }
|
||
.proto-root .jc-stgwrap-k { display: block; margin-bottom: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--ink-4); }
|
||
.proto-root .jc-stgbar { display: flex; align-items: center; gap: 7px; }
|
||
.proto-root .jc-stg-ln { flex: 1 1 12px; min-width: 8px; height: 2px; border-radius: 2px; background: var(--line); }
|
||
.proto-root .jc-stg-ln.on { background: var(--brand); }
|
||
.proto-root .jc-stg2 { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; }
|
||
.proto-root .jc-stg2.s-cur { border-color: var(--brand); box-shadow: 0 2px 8px rgba(51,112,255,.14); }
|
||
.proto-root .jc-stg2.s-done { opacity: .85; }
|
||
.proto-root .jc-stg2-n { flex: none; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-family: var(--mono); background: var(--soft); border: 1px solid var(--line-soft); color: var(--ink-4); }
|
||
.proto-root .jc-stg2.s-done .jc-stg2-n { background: var(--ok); border-color: var(--ok); color: #fff; }
|
||
.proto-root .jc-stg2.s-cur .jc-stg2-n { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||
.proto-root .jc-stg2-t { min-width: 0; display: flex; flex-direction: column; }
|
||
.proto-root .jc-stg2-t b { font-size: 11.5px; font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-stg2.s-cur .jc-stg2-t b { color: var(--brand-deep); }
|
||
.proto-root .jc-stg2-t > span { font-size: 9px; color: var(--ink-4); white-space: nowrap; }
|
||
.proto-root .jc-stg2.s-cur .jc-stg2-t > span { color: var(--brand); font-weight: 700; }
|
||
|
||
/* ── 上下文信息卡 ── */
|
||
.proto-root .jc-ctx2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
|
||
.proto-root .jc-ctx2-c { display: flex; gap: 11px; padding: 13px 14px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow); transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-ctx2-c:hover { transform: translateY(-1px); border-color: var(--brand-soft); box-shadow: var(--shadow-2); }
|
||
.proto-root .jc-ctx2-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
|
||
.proto-root .jc-ctx2-ico.i-brand { background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .jc-ctx2-ico.i-violet { background: var(--st-decision-soft); color: var(--st-decision); }
|
||
.proto-root .jc-ctx2-ico.i-teal { background: var(--st-collab-soft); color: var(--st-collab); }
|
||
.proto-root .jc-ctx2-ico.i-amber { background: var(--st-execute-soft); color: var(--st-execute); }
|
||
.proto-root .jc-ctx2-ico.i-ink { background: var(--soft); color: var(--ink-3); }
|
||
.proto-root .jc-ctx2-bd { flex: 1; min-width: 0; }
|
||
.proto-root .jc-ctx2-bd > i { display: block; margin-bottom: 4px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--ink-4); }
|
||
.proto-root .jc-ctx2-bd p { margin: 0 0 2px; font-size: 12px; color: var(--ink); line-height: 1.62; }
|
||
.proto-root .jc-ctx2-bd p.dim { color: var(--ink-4); font-size: 11px; }
|
||
.proto-root .jc-ctx2-bd ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
|
||
.proto-root .jc-ctx2-bd li { font-size: 11.5px; line-height: 1.5; }
|
||
.proto-root .jc-ctx2-bd li b { display: block; color: var(--ink); }
|
||
.proto-root .jc-ctx2-bd li span { color: var(--ink-4); }
|
||
|
||
/* ── 流程链：节点卡**一条线横铺**（左→右自然折行，不做蛇形反向），容器与上下文/仪表同一卡体 ── */
|
||
.proto-root .jc-wfg2 { display: flex; flex-wrap: wrap; gap: 12px 10px; padding: 16px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-wfg2 > .jc-map-n { flex: 1 1 122px; min-width: 116px; max-width: 200px; }
|
||
/* 节点卡 */
|
||
.proto-root .jc-map-n { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,35,41,.04); transition: transform var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-map-n:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
|
||
.proto-root .jc-map-n.s-done { border-color: #cdeac4; background: linear-gradient(180deg, #fff 55%, var(--ok-soft)); }
|
||
.proto-root .jc-map-n.s-todo { border-style: dashed; opacity: .78; }
|
||
.proto-root .jc-map-n.s-cur { border-color: var(--brand); background: linear-gradient(180deg, #fff 40%, var(--brand-wash)); box-shadow: 0 0 0 4px rgba(51,112,255,.12), 0 6px 18px rgba(51,112,255,.16); }
|
||
.proto-root .jc-map-n.apr { border-color: #e7d4ab; background: linear-gradient(180deg, #fff 45%, #fbf0dc); }
|
||
.proto-root .jc-map-nh { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
|
||
.proto-root .jc-map-nh em { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--ink-4); }
|
||
.proto-root .jc-map-n.s-cur .jc-map-nh em { color: var(--brand); }
|
||
.proto-root .jc-map-ok { width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; background: var(--ok); color: #fff; }
|
||
.proto-root .jc-map-ap { color: #b98432; }
|
||
.proto-root .jc-map-n > b { font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-map-n.s-cur > b { color: var(--ink); }
|
||
.proto-root .jc-map-who { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-map-who i { width: 15px; height: 15px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 700; color: #fff; background: var(--ink-4); }
|
||
.proto-root .jc-map-n.s-cur .jc-map-who i { background: var(--brand); }
|
||
.proto-root .jc-map-n.apr .jc-map-who i { background: #b98432; }
|
||
/* 「你在这」浮标 */
|
||
.proto-root .jc-map-me { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: var(--brand); color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 999px; box-shadow: var(--shadow-brand); white-space: nowrap; z-index: 1; }
|
||
.proto-root .jc-map-me .jc-pulse-dot { background: #fff; width: 5px; height: 5px; }
|
||
/* 行内箭头 */
|
||
.proto-root .jc-map-arr { position: relative; align-self: center; height: 2px; background: var(--line); margin: 0 3px; }
|
||
.proto-root .jc-map-arr::after { content: ""; position: absolute; top: -3.5px; right: -1px; border: 4.5px solid transparent; border-left: 6px solid var(--line); border-right: 0; }
|
||
.proto-root .jc-map-arr.la::after { right: auto; left: -1px; border-left: 0; border-right: 6px solid var(--line); }
|
||
.proto-root .jc-map-arr.ghost { visibility: hidden; }
|
||
/* 行间折返箭头（贴折返侧节点中线） */
|
||
.proto-root .jc-map-turn { display: flex; height: 24px; padding: 3px 0; }
|
||
.proto-root .jc-map-turn.r { justify-content: flex-end; padding-right: calc((100% - 48px) / 6); }
|
||
.proto-root .jc-map-turn.l { justify-content: flex-start; padding-left: calc((100% - 48px) / 6); }
|
||
.proto-root .jc-map-varr { position: relative; width: 2px; background: var(--line); }
|
||
.proto-root .jc-map-varr::after { content: ""; position: absolute; bottom: -1px; left: -3.5px; border: 4.5px solid transparent; border-top: 6px solid var(--line); border-bottom: 0; }
|
||
.proto-root .jc-wfd-pos { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 10.5px; font-weight: 800; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 3px 11px; }
|
||
|
||
/* ── 运行仪表：与其余三段同一卡体（白卡），数字大而克制，条与分段用既有语义色 ── */
|
||
.proto-root .jc-cockpit { display: flex; align-items: stretch; gap: 16px; padding: 14px 16px 15px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow); overflow: hidden; }
|
||
.proto-root .jc-ck-div { flex: none; width: 1px; background: var(--line-soft); }
|
||
.proto-root .jc-ck-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
|
||
.proto-root .jc-ck-cell.wide { flex: 1.7 1 0; }
|
||
.proto-root .jc-ck-k { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--ink-4); }
|
||
.proto-root .jc-ck-k svg { color: var(--brand); }
|
||
.proto-root .jc-ck-main { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
|
||
.proto-root .jc-ck-main b { white-space: nowrap; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
|
||
.proto-root .jc-ck-main em { font-style: normal; font-size: 9.5px; color: var(--ink-4); white-space: nowrap; }
|
||
.proto-root .jc-ck-sub { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
|
||
.proto-root .jc-ck-sub b { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
|
||
.proto-root .jc-ck-sub u { text-decoration: none; color: var(--ink-4); font-size: 9.5px; }
|
||
.proto-root .jc-ck-bar { display: block; height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
|
||
.proto-root .jc-ck-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width var(--t-med); }
|
||
.proto-root .jc-ck-bar.t-warm i { background: #e8a33d; }
|
||
.proto-root .jc-ck-bar.t-hot i { background: var(--danger); }
|
||
/* 模型分布：分段条 + 图例（既有语义色，平色不发光） */
|
||
.proto-root .jc-ck-stack { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
|
||
.proto-root .jc-ck-stack i { display: block; height: 100%; }
|
||
.proto-root .jc-ck-stack i + i { box-shadow: inset 2px 0 0 #fff; }
|
||
.proto-root .jc-ck-stack .t-brand { background: var(--brand); }
|
||
.proto-root .jc-ck-stack .t-ok { background: var(--ok); }
|
||
.proto-root .jc-ck-stack .t-warn { background: #e8a33d; }
|
||
.proto-root .jc-ck-stack .t-danger { background: var(--danger); }
|
||
.proto-root .jc-ck-stack .t-muted { background: var(--ink-4); }
|
||
.proto-root .jc-ck-lg { margin: 1px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
|
||
.proto-root .jc-ck-lg li { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink-2); }
|
||
.proto-root .jc-ck-lg em { flex: none; width: 8px; height: 8px; border-radius: 3px; }
|
||
.proto-root .jc-ck-lg em.t-brand { background: var(--brand); }
|
||
.proto-root .jc-ck-lg em.t-ok { background: var(--ok); }
|
||
.proto-root .jc-ck-lg em.t-warn { background: #e8a33d; }
|
||
.proto-root .jc-ck-lg em.t-danger { background: var(--danger); }
|
||
.proto-root .jc-ck-lg em.t-muted { background: var(--ink-4); }
|
||
.proto-root .jc-ck-lg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-ck-lg b { flex: none; font-size: 10.5px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-ck-none { margin: 0; font-size: 11px; color: var(--ink-4); }
|
||
|
||
/* ── 旧运行仪表（浅色，弃用类保留位） ── */
|
||
.proto-root .jc-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
|
||
.proto-root .jc-dash-c { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 13px; background: #fff; border: 1px solid var(--line-soft); border-radius: 13px; box-shadow: var(--card-shadow); transition: transform var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-dash-c:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
|
||
.proto-root .jc-dash-c.wide { grid-column: 1 / -1; }
|
||
.proto-root .jc-dash-k { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--ink-4); }
|
||
.proto-root .jc-dash-k svg { color: var(--brand); }
|
||
.proto-root .jc-dash-row { display: flex; align-items: baseline; gap: 7px; }
|
||
.proto-root .jc-dash-row em { flex: none; width: 52px; font-style: normal; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-dash-row b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
|
||
.proto-root .jc-dash-row u { margin-left: auto; text-decoration: none; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-dash-bar { display: block; height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
|
||
.proto-root .jc-dash-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width var(--t-med); }
|
||
.proto-root .jc-dash-bar.t-warm i { background: #e8a33d; }
|
||
.proto-root .jc-dash-bar.t-hot i { background: var(--danger); }
|
||
/* 模型分布：分段条 + 图例 */
|
||
.proto-root .jc-dash-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
|
||
.proto-root .jc-dash-stack i { display: block; height: 100%; }
|
||
.proto-root .jc-dash-stack i + i { box-shadow: inset 2px 0 0 #fff; }
|
||
.proto-root .jc-dash-stack .t-brand { background: var(--brand); }
|
||
.proto-root .jc-dash-stack .t-ok { background: var(--ok); }
|
||
.proto-root .jc-dash-stack .t-warn { background: #e8a33d; }
|
||
.proto-root .jc-dash-stack .t-danger { background: var(--danger); }
|
||
.proto-root .jc-dash-stack .t-muted { background: var(--ink-4); }
|
||
.proto-root .jc-dash-lg { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; }
|
||
.proto-root .jc-dash-lg li { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
|
||
.proto-root .jc-dash-lg em { width: 8px; height: 8px; border-radius: 3px; }
|
||
.proto-root .jc-dash-lg em.t-brand { background: var(--brand); }
|
||
.proto-root .jc-dash-lg em.t-ok { background: var(--ok); }
|
||
.proto-root .jc-dash-lg em.t-warn { background: #e8a33d; }
|
||
.proto-root .jc-dash-lg em.t-danger { background: var(--danger); }
|
||
.proto-root .jc-dash-lg em.t-muted { background: var(--ink-4); }
|
||
.proto-root .jc-dash-lg b { margin-left: 2px; font-size: 10.5px; color: var(--ink-3); }
|
||
|
||
/* 仪表 · 两维度小件 */
|
||
.proto-root .jc-ck-duo { display: flex; gap: 22px; }
|
||
.proto-root .jc-ck-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||
.proto-root .jc-ck-stat em { font-style: normal; font-size: 10px; color: var(--ink-4); }
|
||
.proto-root .jc-ck-stat b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
|
||
.proto-root .jc-ck-met { display: flex; flex-direction: column; gap: 4px; }
|
||
.proto-root .jc-ck-met + .jc-ck-met { margin-top: 6px; }
|
||
.proto-root .jc-ck-met-h { display: flex; align-items: baseline; gap: 7px; }
|
||
.proto-root .jc-ck-met-h em { font-style: normal; font-size: 10px; color: var(--ink-4); flex: 1; }
|
||
.proto-root .jc-ck-met-h b { font-size: 14px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-ck-met-h u { text-decoration: none; font-size: 9.5px; color: var(--ink-4); }
|
||
|
||
/* ══ 工作流页 · 驾驶舱式（参考 KPI 看板范式）══ */
|
||
/* KPI 指标带：四卡横排置顶；数值最大、名称次之、上下文最小 */
|
||
.proto-root .jc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 4px; }
|
||
.proto-root .jc-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow); transition: transform var(--t-fast), box-shadow var(--t-fast); }
|
||
.proto-root .jc-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
|
||
.proto-root .jc-kpi-dim { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 9px; font-weight: 800; letter-spacing: .08em; border-radius: 999px; padding: 1px 8px; }
|
||
.proto-root .jc-kpi-dim.d-wf { color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-kpi-dim.d-act { color: var(--st-collab); background: var(--st-collab-soft); }
|
||
.proto-root .jc-kpi > em { margin-top: 3px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-4); letter-spacing: .04em; }
|
||
.proto-root .jc-kpi > b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; white-space: nowrap; }
|
||
.proto-root .jc-kpi > b i { font-style: normal; margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--ink-4); }
|
||
.proto-root .jc-kpi > u { text-decoration: none; font-size: 9.5px; color: var(--ink-4); }
|
||
.proto-root .jc-kpi > .jc-ck-bar { margin-top: 4px; }
|
||
|
||
/* 辅助层双列 */
|
||
/* 按中栏实际宽度自适应（容器查询，聊天栏拖宽拖窄都跟手）：
|
||
宽 → 窄扇形卡 + 宽档案卡并排；窄 → 堆叠、扇形图居中收拢 */
|
||
.proto-root .wf-body { container-type: inline-size; }
|
||
.proto-root .jc-duo2 { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 10px; margin-top: 14px; align-items: stretch; }
|
||
@container (max-width: 640px) {
|
||
.proto-root .jc-duo2 { grid-template-columns: 1fr; }
|
||
.proto-root .jc-mdonut { justify-content: center; }
|
||
}
|
||
.proto-root .jc-panel { display: flex; flex-direction: column; gap: 10px; padding: 13px 15px 14px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow); }
|
||
.proto-root .jc-panel-h { display: flex; align-items: center; gap: 7px; }
|
||
.proto-root .jc-panel-ico { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
|
||
.proto-root .jc-panel-h b { flex: 1; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); }
|
||
.proto-root .jc-panel-h em { font-style: normal; font-size: 9.5px; color: var(--ink-4); }
|
||
|
||
/* 上下文档案卡：分行收纳（图标 · 标签 · 内容），行间发丝线 */
|
||
.proto-root .jc-file-rows { display: flex; flex-direction: column; }
|
||
.proto-root .jc-file-row { display: flex; gap: 10px; padding: 8px 0; }
|
||
.proto-root .jc-file-row + .jc-file-row { border-top: 1px solid var(--line-soft); }
|
||
.proto-root .jc-file-row > i { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; display: grid; place-items: center; background: var(--soft); color: var(--ink-3); }
|
||
.proto-root .jc-file-row > em { flex: none; width: 64px; margin-top: 3px; font-style: normal; font-size: 10px; font-weight: 800; color: var(--ink-4); letter-spacing: .04em; }
|
||
.proto-root .jc-file-row > p { flex: 1; min-width: 0; margin: 0; font-size: 12px; color: var(--ink); line-height: 1.6; }
|
||
.proto-root .jc-file-row > p > span { display: block; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-file-in { display: block; font-size: 11.5px; color: var(--ink-4); }
|
||
.proto-root .jc-file-in b { margin-right: 6px; color: var(--ink); font-weight: 700; }
|
||
|
||
/* 模型分布扇形图（复用报告环图几何）：窄卡竖排——图居中在上、图例整行在下 */
|
||
.proto-root .jc-mdonut { padding: 2px 0 0; flex-direction: column; align-items: center; gap: 10px; }
|
||
.proto-root .jc-mdonut .jc-donut-lg { gap: 6px; width: 100%; }
|
||
.proto-root .jc-mdonut .jc-donut-lg li { display: flex; align-items: center; gap: 7px; }
|
||
.proto-root .jc-mdonut .jc-donut-lg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* ══ 空占位（待处理 / 已完成）：层叠光环 + 图标 + 主副文 + 提示囊 ══ */
|
||
/*
|
||
* 空态 —— **在它那一栏里居中**,不是吊在顶上。
|
||
*
|
||
* 从前是固定的上下内边距(58/64),于是在一栏一人高的工作区里,那幅图与那两行字
|
||
* 挤在顶部三分之一处,底下留着一大片白。空态是常态不是缺页:它该像一张摆正的卡片,
|
||
* 而不是页面还没加载完的残影。
|
||
* `margin: auto` 让它在 flex 容器里上下左右都居中;容器不给高度时退回原来的内边距。
|
||
*/
|
||
.proto-root .jc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; gap: 8px; padding: 40px 24px; text-align: center; animation: rise var(--t-med) both; }
|
||
.proto-root .jc-empty-art { position: relative; width: 108px; height: 108px; margin-bottom: 6px; }
|
||
.proto-root .jc-empty-art i { position: absolute; border-radius: 999px; }
|
||
.proto-root .jc-empty-art .r1 { inset: 0; opacity: .55; }
|
||
.proto-root .jc-empty-art .r2 { inset: 16px; opacity: .8; }
|
||
.proto-root .jc-empty.t-ok .r1 { background: radial-gradient(circle, var(--ok-soft), transparent 72%); }
|
||
.proto-root .jc-empty.t-ok .r2 { background: var(--ok-soft); }
|
||
.proto-root .jc-empty.t-brand .r1 { background: radial-gradient(circle, var(--brand-wash), transparent 72%); }
|
||
.proto-root .jc-empty.t-brand .r2 { background: var(--brand-wash); }
|
||
.proto-root .jc-empty-ico { position: absolute; inset: 30px; display: grid; place-items: center; background: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(31,35,41,.1); }
|
||
.proto-root .jc-empty.t-ok .jc-empty-ico { color: var(--ok); }
|
||
.proto-root .jc-empty.t-brand .jc-empty-ico { color: var(--brand); }
|
||
.proto-root .jc-empty > b { font-size: 15px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-empty > p { margin: 0; max-width: 30em; font-size: 12px; color: var(--ink-3); line-height: 1.8; }
|
||
.proto-root .jc-empty-hint { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 5px 13px; background: var(--soft); border: 1px solid var(--line-soft); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
|
||
.proto-root .jc-empty-hint svg { color: var(--brand); }
|
||
|
||
/* ══ 任务助理头（对话区） ══ */
|
||
.proto-root .jc-tch-mark { flex: none; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-tch-tag { flex: none; margin-left: 0; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 999px; padding: 1px 7px; vertical-align: 2px; }
|
||
|
||
/* 标题区主题行：图标方 + 标题 + 节点章 */
|
||
.proto-root .jc-tb-titlerow { display: flex; align-items: center; gap: 9px; margin-top: 8px; min-width: 0; }
|
||
.proto-root .jc-tb-tico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--ai-grad); box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-tb-titlerow .jc-tb-title { flex: 0 1 auto; min-width: 0; }
|
||
.proto-root .jc-tb-node { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: 7px; padding: 2px 8px; }
|
||
|
||
/* ══ 工作区导航 · 终版（唯一声明处）══
|
||
每个页签都是**真按钮**：静息 = 白底描边胶囊 + 浅影；hover = 洗蓝亮边；active = 品牌实心。
|
||
右侧场景控制囊与页签同高同风格。 */
|
||
.proto-root .jc-wv-bar > .jc-wv-tabs { display: inline-flex; flex: none; gap: 6px; padding: 0; background: transparent; border: 0; border-radius: 0; margin: 0; width: auto; }
|
||
.proto-root .jc-wv-tab { position: static; justify-content: center; white-space: nowrap; height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 12.5px; font-weight: 700; box-shadow: 0 1px 2px rgba(31,35,41,.05); transition: all var(--t-fast); }
|
||
.proto-root .jc-wv-tab:hover:not(.active) { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-soft); box-shadow: 0 2px 6px rgba(51,112,255,.12); transform: translateY(-1px); }
|
||
.proto-root .jc-wv-tab:active { transform: scale(.97); }
|
||
.proto-root .jc-wv-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-brand); }
|
||
.proto-root .jc-wv-tab.active::after { display: none; }
|
||
.proto-root .jc-wv-tab em { background: var(--soft); border: 0; color: var(--ink-4); }
|
||
.proto-root .jc-wv-tab.active em { background: rgba(255,255,255,.25); color: #fff; }
|
||
.proto-root .jc-wv-tab em.hot { min-width: 17px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; background: var(--danger); border-radius: 999px; color: #fff; font-size: 10px; font-weight: 800; }
|
||
.proto-root .jc-wv-tab.active em.hot { background: #fff; color: var(--danger); }
|
||
/* 右侧控制囊：同高同风格的真按钮组 */
|
||
.proto-root .jc-wv-ctl { height: 32px; margin-left: auto; padding: 0 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(31,35,41,.05); }
|
||
.proto-root .jc-wv-ctl button { width: 25px; height: 25px; color: var(--ink-2); }
|
||
.proto-root .jc-wv-ctl > b { font-size: 11px; color: var(--ink-2); }
|
||
.proto-root .jc-wv-ctl.as-btn { padding: 0 15px 0 11px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); transition: all var(--t-fast); }
|
||
.proto-root .jc-wv-ctl.as-btn:hover { border-color: var(--brand-soft); color: var(--brand); background: var(--brand-wash); box-shadow: 0 2px 6px rgba(51,112,255,.12); transform: translateY(-1px); }
|
||
|
||
/* ══ 工作区顶部导航 · jc-tnav（全新命名，唯一声明，无历史级联）══
|
||
几何确定：所有元素 33px 同高、flex 垂直居中、间距 6px；没有任何装饰线。 */
|
||
.proto-root .jc-tnav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex: 0 0 auto; }
|
||
.proto-root .wf-card.jc-wc-fill > .jc-tnav { flex: 0 0 auto; }
|
||
/* 页签按钮：静息白胶囊 → hover 洗蓝 → 激活品牌实心 */
|
||
.proto-root .jc-tnav-tab { display: inline-flex; align-items: center; gap: 6px; height: 33px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(31,35,41,.05); transition: all var(--t-fast); }
|
||
.proto-root .jc-tnav-tab svg { flex: none; display: block; color: currentColor; }
|
||
.proto-root .jc-tnav-tab:hover:not(.on) { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(51,112,255,.12); }
|
||
.proto-root .jc-tnav-tab:active { transform: scale(.97); }
|
||
.proto-root .jc-tnav-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
|
||
/* 待处理未完成数：红泡（激活时反白） */
|
||
.proto-root .jc-tnav-tab em { min-width: 17px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; font-family: var(--mono); background: var(--danger); color: #fff; border-radius: 999px; }
|
||
.proto-root .jc-tnav-tab.on em { background: #fff; color: var(--danger); }
|
||
.proto-root .jc-tnav-sp { flex: 1 1 auto; min-width: 0; }
|
||
/* 场景控制：独立方钮 + 居中计数（不再打包进一个囊，杜绝内部换行错位） */
|
||
.proto-root .jc-tnav-pg { display: inline-flex; align-items: center; gap: 6px; flex: none; }
|
||
.proto-root .jc-tnav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 33px; height: 33px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 2px rgba(31,35,41,.05); transition: all var(--t-fast); }
|
||
.proto-root .jc-tnav-btn:hover:not(:disabled) { border-color: var(--brand-soft); background: var(--brand-wash); color: var(--brand); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(51,112,255,.12); }
|
||
.proto-root .jc-tnav-btn:active:not(:disabled) { transform: scale(.95); }
|
||
.proto-root .jc-tnav-btn:disabled { opacity: .35; cursor: default; }
|
||
.proto-root .jc-tnav-n { min-width: 34px; text-align: center; font-size: 11px; font-weight: 800; color: var(--ink-2); }
|
||
/* 两组翻页同时在场时(多张卡各自多页)各带一个字,单独在场时不摆 —— 一个数不必解释自己 */
|
||
/*
|
||
* 保存之后的红字 —— **有行没落下就摆在件的上方**(2026-08-24 用户:件上新增的
|
||
* 客户推到下一步就不见了)。它不是错误提示:别的格子确实存下了,只有没钥匙的那几行没落 ——
|
||
* 所以用「提醒」的分量,点名缺哪几列,人补上再存一次。
|
||
*/
|
||
.proto-root .jc-savewarn { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px;
|
||
padding: 9px 12px; border: 1px solid #f3b6b3; border-radius: 9px; background: #fff5f5;
|
||
color: var(--danger); font-size: 12.5px; line-height: 1.6; }
|
||
.proto-root .jc-savewarn svg { flex: none; margin-top: 2px; }
|
||
|
||
.proto-root .jc-tnav-mk { font-style: normal; font-weight: 700; color: var(--ink-3); margin-right: 3px; }
|
||
.proto-root .jc-tnav-btn.back { width: auto; padding: 0 14px 0 10px; font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
|
||
.proto-root .jc-tnav-btn svg { flex: none; display: block; }
|
||
/* 窄栏：页签藏图标省宽，保持一排 */
|
||
@container (max-width: 520px) {
|
||
.proto-root .jc-tnav-tab svg { display: none; }
|
||
.proto-root .jc-tnav-tab { padding: 0 11px; }
|
||
}
|
||
|
||
/* ══ 列表卡统一规范（2026-07-26）：双行定高，全部单行省略，杜绝显示不完整 ══ */
|
||
/* 两行位：固定占两行高——短则留白、长则收尾省略，卡高恒定且信息尽量完整 */
|
||
.proto-root .jc-clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal !important; line-height: 1.5; height: 3em; }
|
||
/* 任务卡：定高信息卡（112px）——头行 / 主题两行位 / 元行 / 进度条，每行硬约束 */
|
||
.proto-root .task-card.jc-tc.jc-tc3 { display: flex; flex-direction: column; gap: 6px; height: 112px; min-height: 112px; padding: 11px 13px 10px; }
|
||
.proto-root .jc-tc3-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.proto-root .jc-tc3-head .jc-tc-ico { flex: none; }
|
||
.proto-root .jc-tc3-head .jc-tc-title { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-tc3-head .jc-tc-state { flex: none; }
|
||
.proto-root .jc-tc3-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; overflow: hidden; }
|
||
.proto-root .jc-tc3-meta code { font-size: 10px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-tc3-meta b { flex: none; font-size: 10.5px; font-weight: 800; color: var(--ink-3); }
|
||
.proto-root .jc-tc2-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
||
.proto-root .jc-tc.jc-tc2 .jc-tc-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-tc2-sub { font-size: 11px; color: var(--ink-3); }
|
||
/* 模块卡（消息/审批/纪要）：结构统一（元行 / 标题两行位 / 来源行[/时限条]），同模块每卡同高 */
|
||
.proto-root .jc-mcard-top { flex-wrap: nowrap; overflow: hidden; }
|
||
.proto-root .jc-mcard-top > em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-mcard-foot { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
|
||
.proto-root .jc-mcard-foot > i { flex: none; white-space: nowrap; }
|
||
.proto-root .jc-acard-from { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
|
||
|
||
/* ══ 任务评价卡（对话区第七类）：金调 + 星级打分 ══ */
|
||
.proto-root .jc-fc.t-rate { --fc: #b98432; --fc-soft: #fbf0dc; }
|
||
.proto-root .jc-mtag.m-rate { background: #fbf0dc; color: #b98432; }
|
||
.proto-root .jc-stars { display: flex; align-items: center; gap: 3px; }
|
||
.proto-root .jc-star { display: inline-grid; place-items: center; border: 0; background: none; padding: 2px; color: #d9dde3; cursor: pointer; transition: color var(--t-fast), transform var(--t-fast); }
|
||
.proto-root .jc-star:hover { transform: scale(1.15); }
|
||
.proto-root .jc-star.on { color: #f5a623; }
|
||
.proto-root .jc-star.on svg { fill: currentColor; }
|
||
.proto-root .jc-stars.ro .jc-star { padding: 0 1px; cursor: default; }
|
||
.proto-root .jc-stars.ro .jc-star:hover { transform: none; }
|
||
.proto-root .jc-stars-txt { margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
|
||
.proto-root .jc-rate-note { flex-basis: 100%; font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
|
||
|
||
/*
|
||
* 视图区容器 —— 活动推送 HTML 的沙箱画框(AM 07)。
|
||
* 这是**平台本体**的件:活动只给内容,尺寸与边框归系统。
|
||
* iframe 无脚本执行权(sandbox=""),因此内容自带样式、不继承工作台 CSS。
|
||
*/
|
||
.proto-root .jc-view-frame {
|
||
display: block;
|
||
width: 100%;
|
||
/* 高度由 ViewContainer 按内容量出后写在 style 上 —— 这里不设 height/min-height:
|
||
定高会把长报告截断,人得在内外两层滚动条之间来回找 */
|
||
border: 0;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
}
|
||
|
||
/* ═══ 本仓补充(非原型) ═══════════════════════════════════════════════
|
||
* 页签条容纳第五个页签「沟通记录」。
|
||
*
|
||
* 原型的 `.jc-tnav` 是按**四个**页签配的。加到五个后:
|
||
* 五个四字页签 380px + 翻页囊 112px + 间距 30px = 522px,而工作区只有 429px。
|
||
* 差 94px —— 这不是调调 padding 能抹平的,是真的装不下。
|
||
*
|
||
* 在定下最终形态之前,先保证**不出卡片**:整条可横滚。
|
||
* 相比原来「翻页囊被裁到卡片外」,这至少是所有东西都在、都够得着。
|
||
* 备选形态(待定):缩短页签文字 / 翻页囊只留箭头 / 换行两排 —— 各有取舍,见 debt。
|
||
*/
|
||
.proto-root .jc-tnav {
|
||
min-width: 0;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.proto-root .jc-tnav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 一律不压缩:压了就是截字,截了还不如让人横滚 */
|
||
.proto-root .jc-tnav-tab,
|
||
.proto-root .jc-tnav-pg,
|
||
.proto-root .jc-tnav-btn {
|
||
flex: none;
|
||
}
|
||
|
||
/* ═══ 本仓补充(非原型) ═══════════════════════════════════════════════
|
||
* 工作区最小宽度 —— 保证页签条一排放得下。
|
||
*
|
||
* 页签加到五个后,页签条含图标的自然内容宽 649px,加上工作卡左右内边距 38px,
|
||
* 工作区至少要 **687px**。
|
||
*
|
||
* 注意别取 570:原型在容器 ≤520px 时会把页签图标藏起来省宽,
|
||
* 570 恰好落在「图标已经显示、却又放不下」的夹缝里 —— 要么低于 520 让它藏,
|
||
* 要么给够 687 让它显。这里选后者:图标该在就在,让对话区让位。
|
||
*
|
||
* 原来中栏是 `minmax(0, 1fr)`、对话区是定宽轨:空间一紧,**塌的是中栏**,
|
||
* 页签条就被挤到卡片外裁掉。现在反过来:
|
||
* · 中栏 `minmax(var(--jc-work-min), 1fr)` —— 有地板,不许再塌
|
||
* · 对话区 `minmax(0, ...)` —— 由它先让,让到多少算多少
|
||
* 页签、翻页囊的尺寸一律不动,让的是对话区的空间。
|
||
*
|
||
* 690 = 687 上取整留 3px。三种 MacBook Air 都装得下:
|
||
* 1440(Air 13" M1) → 对话区还剩 384px
|
||
* 1470(Air 13" M2/M3) → 剩 414px
|
||
* 1710(Air 15") → 剩 654px
|
||
* 均高于对话区自身下限 340px。
|
||
*/
|
||
.proto-root .workspace {
|
||
--jc-work-min: 690px;
|
||
/*
|
||
* 对话区也要有地板(2026-07-31 补)。
|
||
*
|
||
* 上面那段只给了中栏地板,对话区写的是 `minmax(0, …)` —— 意思是「让到多少算多少」。
|
||
* 三种 MacBook Air 都还剩 384px 以上,于是当时认为够。**1280 宽不在那张表里**:
|
||
* 1280 − 内边距 28 − 间距 24 = 1228,减去 310(清单)+ 690(中栏)只剩 228 ——
|
||
* 比它自己写的下限 340px 还窄。实测后果:决策卡的两个选项被压成一列竖排的单字,
|
||
* 「我按缺口起草一封询问函」一个字一行,人根本没法读,更谈不上点。
|
||
*
|
||
* 三个都到地板要 180 + 690 + 340 = 1210 ≤ 1228,装得下 ——
|
||
* 所以让**清单**先窄(它是一列任务卡,窄一点照样读),而不是压对话区。
|
||
*/
|
||
--jc-chat-min: 340px;
|
||
--jc-side-min: 180px;
|
||
}
|
||
|
||
/* 收起清单 / 收起对话时中栏本就宽,地板不必再管 —— 免得收起态反被地板顶出横向溢出 */
|
||
.proto-root .workspace.jc-side-collapsed,
|
||
.proto-root .workspace.jc-chat-collapsed {
|
||
--jc-work-min: 0px;
|
||
/* 收起态那一栏根本不在网格里,地板留着只会把剩下的栏顶出横向溢出 */
|
||
--jc-chat-min: 0px;
|
||
--jc-side-min: 0px;
|
||
}
|
||
|
||
/* 列表区空态 —— 紧凑版:软色圆 + 主副文,与主面板的整屏光环同一语气 */
|
||
.proto-root .jc-side-empty {
|
||
margin: 16px 10px;
|
||
padding: 26px 16px 22px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 7px;
|
||
text-align: center;
|
||
border: 1px dashed var(--line);
|
||
border-radius: 12px;
|
||
background: linear-gradient(180deg, #fbfcfe, #f6f8fb);
|
||
}
|
||
|
||
.proto-root .jc-side-empty-ico {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin-bottom: 3px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
background: radial-gradient(120% 120% at 30% 20%, #eef3ff, #e3ebff);
|
||
color: var(--brand);
|
||
box-shadow: inset 0 0 0 1px rgb(51 112 255 / 14%);
|
||
}
|
||
|
||
.proto-root .jc-side-empty > b {
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
.proto-root .jc-side-empty > p {
|
||
margin: 0;
|
||
max-width: 210px;
|
||
font-size: 11.5px;
|
||
line-height: 1.65;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
/*
|
||
* 页签图标与文字的光学对齐。
|
||
* 几何上图标正居中,但文字的**字面**(汉字 ink box)整体偏上约 2px ——
|
||
* Inter 的汉字回退字形上伸高、下沉浅,行盒居中后底边比图标高。
|
||
* 逐 0.5px 实测扫描:-2px 时两者字面中心差 0.02px(字面高度相近,居中即底齐)。
|
||
*/
|
||
.proto-root .jc-tnav-tab svg,
|
||
.proto-root .jc-tnav-btn.back svg {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* ── 工作日志(补充,非原型)—— 一行一步,标明谁的产出 ────────────────── */
|
||
/* ── 沟通记录:一单往来的**原件** —— 一封一张纸,收/发两向分色 ── */
|
||
/* 系统开场白上的那一下 —— 灰调不抢戏:它是个去处,不是要人拍板的动作 */
|
||
.proto-root .jc-sys-act { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
|
||
.proto-root .jc-sys-act:hover { border-color: var(--brand); color: var(--brand); }
|
||
.proto-root .jc-sys-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
|
||
/* ── 数据录入卡(第五类人类工具,2026-07-31)──────────────────────────
|
||
壳、头、表单、按钮**一律用卡族公用的那套**(`jc-fc` / `jc-fc-h` / `jc-cfill`)。
|
||
上一版自造了一整套 `jc-entry-*` 骨架:圆角、描边、头部配色全跟兄弟卡对不上,
|
||
连类型章(图标 + 类型名)都没有 —— 五张卡摆在一条对话流里,唯独它像外来的。
|
||
卡族要长得像一家人,身份写在头上,不靠各造一套框来区分。
|
||
|
||
只留三样这张卡独有的语义:落表提示、必填星、「待填写」小签。 */
|
||
.proto-root .jc-fc.t-entry { --fc: var(--ok); --fc-soft: var(--ok-soft); }
|
||
/* 落到哪张表、哪一行 —— 按下确认写的是什么,得先说清楚 */
|
||
/*
|
||
* **卡面摆的是表的人读名,不是 `customer.profile`**(2026-08-02 用户定)——
|
||
* 界面不摆系统内的英文名。所以这一格不再用等宽字体:它现在是一句人话。
|
||
*/
|
||
.proto-root .jc-entry-tbl { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
|
||
.proto-root .jc-entry-key { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: var(--ink-4); }
|
||
/* 自增的那几列不摆进表单,但要说一声 —— 一声不吭地拿掉,人会以为这张档少了一格 */
|
||
.proto-root .jc-entry-auto { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 11px; color: var(--ink-3); }
|
||
.proto-root .jc-entry-auto svg { flex: 0 0 auto; color: var(--brand); }
|
||
/* 两段以上才出的小标题 —— 一段的卡上摆它,是把上面那句又说了一遍 */
|
||
.proto-root .jc-entry-sec { margin: 10px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); }
|
||
.proto-root .jc-fc-b > .jc-cfill { margin-top: 0; }
|
||
.proto-root .jc-cfill-f .req { font-style: normal; color: var(--danger); margin-left: 2px; }
|
||
/* 待填写用**警示色的小签**,不染整格:染整格会把已填好的那几格也搅乱 */
|
||
.proto-root .jc-entry-todo { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; }
|
||
.proto-root .jc-cfill-f.todo input { border-color: var(--danger-soft, #f6c6c6); }
|
||
.proto-root .jc-entry-warn { margin-right: auto; font-size: 11px; color: var(--danger); }
|
||
.proto-root .jc-comms { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
|
||
.proto-root .jc-comm { border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; overflow: hidden; }
|
||
.proto-root .jc-comm.t-in { border-left: 3px solid var(--brand); }
|
||
.proto-root .jc-comm.t-out { border-left: 3px solid #8b93a7; }
|
||
.proto-root .jc-comm-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; }
|
||
/* ── 沟通记录的未读(2026-07-31 用户定)──────────────────────────────
|
||
一封客户来件落进来之后,「看没看过」从前没人记 —— 新到的信和三天前的信
|
||
长得一模一样,人只能靠时间戳自己比。未读要**一眼扫得出**:左缘一道红边 +
|
||
标题旁一枚「未读」小签,不靠底色染整块(整块变色会把正文的可读性也搭进去)。
|
||
计数只跟着按钮走:打开页签不自动清 —— 那是替人宣布他看过了。 */
|
||
.proto-root .jc-comm.unread { border-color: var(--danger-soft, #f6c6c6); box-shadow: inset 3px 0 0 var(--danger); }
|
||
.proto-root .jc-comm-new { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
|
||
/* 时间戳把按钮顶到最右 —— 标记是这一行的收尾动作,不跟标题抢位置 */
|
||
.proto-root .jc-comm-h .jc-comm-at { margin-left: auto; }
|
||
.proto-root .jc-comm-mark { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-comm-mark:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
|
||
.proto-root .jc-comm-mark:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
|
||
.proto-root .jc-comm-mark:disabled { opacity: .55; cursor: default; }
|
||
/* 已读那一枚淡下去 —— 它是「想改回未读」的入口,不该跟未读的按钮抢注意力 */
|
||
.proto-root .jc-comm-mark.done { color: var(--ink-4); border-style: dashed; }
|
||
.proto-root .jc-comm-dir { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 7px; border-radius: 5px; background: #eef2fb; color: var(--brand); font-size: 11px; font-weight: 600; }
|
||
.proto-root .jc-comm-dir.t-out { background: #f1f2f5; color: #5d6577; }
|
||
.proto-root .jc-comm-sub { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink); }
|
||
.proto-root .jc-comm-at { flex: none; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .jc-comm-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 0 14px 10px; font-size: 11.5px; color: var(--ink-3); }
|
||
.proto-root .jc-comm-meta b { font-weight: 600; color: var(--ink-2); }
|
||
.proto-root .jc-comm-meta em { font-style: normal; color: var(--ink-4); }
|
||
/* ── 邮件正文:让它读起来像**一封信**,不像第二张卡 ────────────────────
|
||
从前是「整块灰底 + 一条硬分割线」:白色信头下面接一块灰,两者拼成两个盒子,
|
||
人第一眼看到的是两张摞着的卡,而不是一封有抬头有正文的信。
|
||
改成**引文那一路**:同底色、左缘一道浅竖线、往里缩一格 —— 竖线说的是
|
||
「下面这段是对方写的原话」,这比一块灰底说得清楚。
|
||
|
||
三处取自 ui-ux-pro-max 的排版规则:
|
||
· 行长限 65–75 字符(`max-width: 68ch`)—— 正文原来横铺整栏,一行三四十个汉字,
|
||
眼睛回扫时容易串行;
|
||
· 行高落到 1.75(原来 1.85 偏散,那是给大段散文的);
|
||
· 正文是这一屏的主内容,字号提到 13px —— 它不该比元信息还小。
|
||
|
||
`overflow-wrap` 从 `anywhere` 收成 `break-word`:`anywhere` 会把词从中间劈开,
|
||
而料号(LM358DR)被劈成两行是**读错的开始**,只有超长且无处可断时才允许断。
|
||
|
||
字体写 `inherit` 不写 `var(--sans)`:**`--sans` 这个变量全仓库没有定义过**
|
||
(只有 `--mono` 有)。从前这里是 `font: 400 12.5px/1.85 var(--sans)` 简写 ——
|
||
带未定义 var 的简写会**整条作废**,字号行高一起丢,实测算出来是 16px/normal。
|
||
`<pre>` 的 UA 默认字体是等宽,所以这一句必须显式写,不能省。 */
|
||
.proto-root .jc-comm-body { margin: 0 14px 12px; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); max-width: 68ch; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: break-word; }
|
||
/* 来件与发件各给一点色相 —— 与信头左缘那道边同源,一眼分得出方向 */
|
||
.proto-root .jc-comm.t-in .jc-comm-body { border-left-color: var(--brand-wash, #dbe6fb); }
|
||
.proto-root .jc-comm.t-out .jc-comm-body { border-left-color: #e3e5ea; }
|
||
.proto-root .jc-comm-att { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line-soft); }
|
||
.proto-root .jc-att { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fff; font-size: 11.5px; color: var(--ink-2); }
|
||
.proto-root .jc-att svg { flex: none; color: #4f8a52; }
|
||
/* 读不出内容的件:警示色 + 那句说明照抄 —— 摆一个「已上传 ✓」是撒谎 */
|
||
.proto-root .jc-att.blind { border-color: #e4c9a5; background: #fdf8f0; }
|
||
.proto-root .jc-att.blind svg { color: #b5803c; }
|
||
.proto-root .jc-att b { flex: none; font-weight: 600; }
|
||
.proto-root .jc-att i { flex: none; font-style: normal; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-att em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: var(--ink-4); }
|
||
|
||
.proto-root .jc-log { display: flex; flex-direction: column; }
|
||
.proto-root .jc-log-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 2px; }
|
||
.proto-root .jc-log-row + .jc-log-row { border-top: 1px solid var(--line-soft); }
|
||
.proto-root .jc-log-at { flex: none; font-size: 10.5px; color: var(--ink-4); }
|
||
.proto-root .jc-log-side { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--ink-2); }
|
||
/* 归侧四类各一色:机器 / 人 / 人裁 / 系统等待 —— 一眼看出这一步是谁推的 */
|
||
/*
|
||
* **日志只有三色**(2026-08-02 用户定):负责人绿 · 智能体蓝 · 系统灰。
|
||
* 从前按归侧(machine / human / human-verdict / world-wait / trigger)上五色 ——
|
||
* 那是度量的分法,对读日志的人不构成区别:他只问「这一步是我办的、AI 办的,
|
||
* 还是流程自己走到的」。三档一档一意,一眼扫得动。
|
||
*/
|
||
.proto-root .jc-log-row.t-agent .jc-log-side { background: var(--brand-wash); color: var(--brand-deep); }
|
||
.proto-root .jc-log-row.t-owner .jc-log-side { background: #e6f7f4; color: #0a6a64; }
|
||
.proto-root .jc-log-row.t-system .jc-log-side { background: var(--soft); color: var(--ink-3); }
|
||
.proto-root .jc-log-t { flex: 1; min-width: 0; }
|
||
.proto-root .jc-log-t b { display: block; font-size: 12.5px; font-weight: 600; }
|
||
.proto-root .jc-log-t em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; line-height: 1.6; color: var(--ink-3); }
|
||
/* 细节抽屉(2026-08-03):折叠时一行不变,展开才现;没有细节的条目连钮都不给 */
|
||
.proto-root .jc-log-more { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
|
||
.proto-root .jc-log-more > svg { flex: none; margin-top: 1px; color: var(--ink-4); transition: color var(--t-fast); }
|
||
.proto-root .jc-log-more:hover > b { color: var(--brand-deep); }
|
||
.proto-root .jc-log-more:hover > svg { color: var(--brand); }
|
||
.proto-root .jc-log-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
|
||
/* 展开的正文:一段一句,左缘一道细线把它归到这一条名下 —— 不做键值两栏 */
|
||
.proto-root .jc-log-body { margin: 6px 0 2px; padding: 2px 0 2px 10px; border-left: 2px solid var(--line); }
|
||
.proto-root .jc-log-body p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
|
||
.proto-root .jc-log-body p + p { margin-top: 5px; }
|
||
/* 展开那一条轻轻提亮,眼睛回得来 */
|
||
.proto-root .jc-log-row.on { background: #fbfcfe; border-radius: 8px; }
|
||
/* 成果二级界面的返回键 —— 顶部页签不变,右槽换成它 */
|
||
.proto-root .jc-tnav-back { width: auto; padding: 0 9px; gap: 5px; font-size: 11.5px; font-weight: 600; }
|
||
|
||
/* ── 窄对话区的抗压(补充,非原型)────────────────────────────────────
|
||
对话区在小屏上会被压到 ~210px(工作区优先保「五按钮 + 翻页」,任务列表可收起让位)。
|
||
卡片原样搬过来是不抗压的:卡头标题 `flex: 1` 没设 `min-width: 0`,一挤就**逐字折断**
|
||
成竖排单字;按钮同理。这里只教卡片怎么变窄,不改任何一栏的尺寸。
|
||
|
||
降级的顺序是:先让状态芯片换行下沉(标题拿回整行),标题始终整词可读 —— 而不是把
|
||
「工单 · 执行」截成一个「工」字。截断能让布局不崩,但读的人不知道这是什么卡。 */
|
||
.proto-root .jc-fc-h { flex-wrap: wrap; row-gap: 3px; }
|
||
.proto-root .jc-fc-h b { min-width: 0; flex: 1 1 auto; }
|
||
.proto-root .jc-fc-open { white-space: nowrap; }
|
||
|
||
/* ── 空态第三色调:muted —— 「通路还没接」(补充,非原型)──────────────
|
||
原型只有 ok(办完了)和 brand(等着就会有)。但还有第三种空:**通路没接**,
|
||
等下去也不会有内容。它不能跟 brand 一个样 —— 那是在请人白等。
|
||
灰环 + 灰图标,视觉上就不许诺。 */
|
||
.proto-root .jc-empty.t-muted .r1 { background: radial-gradient(circle, var(--line-soft), transparent 72%); }
|
||
.proto-root .jc-empty.t-muted .r2 { background: var(--line-soft); }
|
||
.proto-root .jc-empty.t-muted .jc-empty-ico { color: var(--ink-3); }
|
||
|
||
/* ── 助理栏的「不在岗」态(补充,非原型)──────────────────────────────
|
||
审批 / 消息 / 纪要 / 汇报四面的助理栏:对话流按 OS 4.1 只长在任务上,
|
||
这四面用不到它。章不打彩色渐变 —— 亮着像在待命,灰着才说得清「这儿不说话」。 */
|
||
.proto-root .jc-tch-mark.t-idle { background: var(--line-soft); color: var(--ink-3); box-shadow: none; }
|
||
|
||
/* ── 助理栏题头的抗压(补充,非原型)────────────────────────────────
|
||
题头一行摆四件:章 · 任务助理 · Agent · 说明句。对话区被压到 ~210px 时,
|
||
说明句只剩 29px 宽,被省略号截成「汇…」—— 一个字都读不出来,等于白占地方。
|
||
让它在挤的时候**换到第二行**,拿整行说完;右对齐也一并取消(自己一行就不用靠边)。
|
||
|
||
按**自己这一栏的宽度**判断,不按视口 —— 对话区宽度还受收起状态影响,
|
||
视口断点管不住它。容器上下文落在 `.jc-tch`(内层壳)而不是 `.session-chat`:
|
||
后者带着拖拽调宽的柄(负偏移),不给它加 containment。 */
|
||
.proto-root .jc-tch { container-type: inline-size; }
|
||
|
||
@container (max-width: 300px) {
|
||
.proto-root .jc-tch-head { flex-wrap: wrap; row-gap: 2px; }
|
||
.proto-root .jc-tch-desc { flex: 1 0 100%; text-align: left; white-space: normal; }
|
||
}
|
||
|
||
/* ── 验收单的分支结论单选(补充,非原型)──────────────────────────────
|
||
选择组「恰发一口,随放行一并确认」:选的这一口就是这单的去向,下游网关判的正是它。
|
||
所以做成必选单选,不选「通过」不亮 —— 分支裁决不能靠默认值溜过去。 */
|
||
.proto-root .jc-ports { display: flex; flex-direction: column; gap: 6px; }
|
||
.proto-root .jc-ports-t { font-size: 11px; font-weight: 800; color: var(--ink-2); display: flex; align-items: baseline; gap: 8px; }
|
||
.proto-root .jc-ports-t em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-4); }
|
||
.proto-root .jc-port { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; text-align: left; transition: border-color var(--t-fast), background var(--t-fast); }
|
||
.proto-root .jc-port:hover { border-color: #c9d6e6; }
|
||
.proto-root .jc-port.on { border-color: var(--brand); background: var(--brand-wash); }
|
||
.proto-root .jc-port-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
|
||
.proto-root .jc-port.on .jc-port-dot { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 2.5px #fff; }
|
||
.proto-root .jc-port b { font-weight: 700; }
|
||
.proto-root .jc-port em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--ink-4); }
|
||
|
||
/* ═════════ AI 正在工作 —— 两处状态动画(2026-07-30) ═════════
|
||
语义:「在持续办事」,不是「在打字」。三点打字气泡(jc-typing)只在
|
||
AI 正回你的话时出现;这里的均衡条与涟漪表达的是**环在自己转**。
|
||
动效纪律:纯 CSS、幅度克制、只动 transform/opacity(不回流);
|
||
prefers-reduced-motion 下全部静止但状态仍可读。 */
|
||
|
||
/* ── ① 对话区 · AI 办事条(消息流末尾的常驻在场) ── */
|
||
.proto-root .jc-aiwork { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; background: linear-gradient(135deg, rgba(51, 112, 255, 0.06), rgba(51, 112, 255, 0.02)); border: 1px solid rgba(51, 112, 255, 0.18); border-radius: 4px 14px 14px 14px; }
|
||
.proto-root .jc-aiwork-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
|
||
.proto-root .jc-aiwork-eq i { width: 3px; height: 5px; border-radius: 2px; background: var(--brand); transform-origin: bottom; animation: jcEq 1.15s ease-in-out infinite; }
|
||
.proto-root .jc-aiwork-eq i:nth-child(2) { animation-delay: 0.14s; }
|
||
.proto-root .jc-aiwork-eq i:nth-child(3) { animation-delay: 0.28s; }
|
||
.proto-root .jc-aiwork-eq i:nth-child(4) { animation-delay: 0.42s; }
|
||
.proto-root .jc-aiwork-txt { font-size: 12px; font-weight: 600; color: var(--brand); letter-spacing: 0.01em; }
|
||
.proto-root .jc-aiwork-sub { font-size: 11px; color: var(--ink-3); }
|
||
@keyframes jcEq { 0%, 100% { transform: scaleY(0.45); opacity: 0.55; } 40% { transform: scaleY(1.9); opacity: 1; } }
|
||
/* 头像呼吸环:AI 在场的第二信号 —— 很轻,只有留意的人看得见 */
|
||
.proto-root .jc-ava-live { animation: jcBreathe 2.4s ease-in-out infinite; }
|
||
@keyframes jcBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(51, 112, 255, 0.28); } 50% { box-shadow: 0 0 0 6px rgba(51, 112, 255, 0); } }
|
||
|
||
/* ── ② 空工作区 · AI 推进中场景(涟漪 + 工作线) ── */
|
||
.proto-root .jc-working { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 52px 24px 58px; text-align: center; animation: rise var(--t-med) both; }
|
||
.proto-root .jc-working-art { position: relative; width: 116px; height: 116px; margin-bottom: 4px; display: grid; place-items: center; }
|
||
/* 涟漪两环:从中心缓慢扩散消隐 —— 「环在转」的空间隐喻 */
|
||
.proto-root .jc-working-art .rp { position: absolute; inset: 22px; border-radius: 999px; border: 1.5px solid rgba(51, 112, 255, 0.35); animation: jcRipple 2.6s cubic-bezier(0.2, 0.6, 0.36, 1) infinite; }
|
||
.proto-root .jc-working-art .rp2 { animation-delay: 1.3s; }
|
||
.proto-root .jc-working-ico { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand), #244ecf); box-shadow: 0 6px 18px rgba(51, 112, 255, 0.32); animation: jcBreathe 2.4s ease-in-out infinite; }
|
||
@keyframes jcRipple { 0% { transform: scale(0.72); opacity: 0; } 18% { opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
|
||
/* 工作线:三行微光骨架 —— AI 正在把报告一行行写出来的意象 */
|
||
.proto-root .jc-working-lines { display: flex; flex-direction: column; gap: 7px; width: 190px; margin: 8px 0 2px; }
|
||
.proto-root .jc-working-lines i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--soft) 25%, rgba(51, 112, 255, 0.16) 50%, var(--soft) 75%); background-size: 220% 100%; animation: jcShimmer 1.7s ease-in-out infinite; }
|
||
.proto-root .jc-working-lines i:nth-child(2) { width: 78%; animation-delay: 0.18s; }
|
||
.proto-root .jc-working-lines i:nth-child(3) { width: 56%; animation-delay: 0.36s; }
|
||
@keyframes jcShimmer { 0% { background-position: 120% 0; } 100% { background-position: -100% 0; } }
|
||
.proto-root .jc-working > b { font-size: 15px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-working > p { margin: 0; max-width: 30em; font-size: 12px; color: var(--ink-3); line-height: 1.8; }
|
||
.proto-root .jc-working-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 13px; background: rgba(51, 112, 255, 0.07); border: 1px solid rgba(51, 112, 255, 0.2); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--brand); }
|
||
|
||
/* 动效偏好:全部静止 —— 状态仍在(条不动、环常亮、线为素底),信息一分不少 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.proto-root .jc-aiwork-eq i,
|
||
.proto-root .jc-ava-live,
|
||
.proto-root .jc-working-art .rp,
|
||
.proto-root .jc-working-ico,
|
||
.proto-root .jc-working-lines i { animation: none; }
|
||
.proto-root .jc-working-art .rp { opacity: 0.35; transform: scale(1.1); }
|
||
}
|
||
|
||
/* ═══ 算出来的去向 ═══════════════════════════════════════════════════════
|
||
* 与「选口」那一组同一副面孔,但**不是按钮**:去向是分类表算出来的事实,
|
||
* 不该长得像一道可点的选择题。判据原文摆在下面 —— 人要能回核「凭什么走这条」。
|
||
*/
|
||
.proto-root .jc-ports.routed .jc-port { cursor: default; }
|
||
.proto-root .jc-ports.routed .jc-port:hover { transform: none; }
|
||
.proto-root .jc-ports-why { margin: 6px 0 0; font-size: 11px; color: var(--ink-4); }
|
||
.proto-root .jc-ports-why code { font-size: 10.5px; color: var(--ink-3); background: var(--soft); border-radius: 5px; padding: 1px 6px; }
|
||
|
||
/* ── 验收判据的第三态 —— 放在末尾,压得过后面那条 `li:hover` ───────────────
|
||
*
|
||
* 裁过、裁成不满足:那不是「活没干完」,是 AI 办过、办不到,把判断交给人
|
||
* (提交门本来就允许这样提交:裁过即可)。从前它与「压根没裁」同挤成一个红叉,
|
||
* 人看到一条永远不绿的项,既不知道 AI 有没有办过、也不知道为什么,只能凭感觉签。
|
||
* 用琥珀不用红:**红是缺口,琥珀是「等你拿个主意」**。
|
||
*
|
||
* 位置有讲究:`.jc-rp-crit li:hover` 与它同特异性(0,3,1),写在前面就会被悬停盖掉 ——
|
||
* 鼠标一扫过,那一条就变回普通底色,人以为自己看错了。
|
||
*/
|
||
/*
|
||
* 标法用**左侧色条**而不是整行底色:底色那一层在这条链上压不过既有的
|
||
* `li` / `li:hover`(同特异性、位置更后),追下去只会变成一串 !important;
|
||
* 而色条是 inset 阴影,谁也不跟它抢 —— 本仓标「命中行」本来就用这一招
|
||
* (`jc-dmn-r.hit::before` 那条左边的竖线)。视觉语言一致,还更醒目。
|
||
*/
|
||
.proto-root .jc-rp-crit li.judged { box-shadow: inset 3px 0 0 #de7802; }
|
||
.proto-root .jc-rp-crit li.judged .r { color: #de7802; }
|
||
/* 理由那一句:裁成不满足时它才是签字的人真正要读的东西 */
|
||
.proto-root .jc-rp-crit .jc-crit-why {
|
||
display: block; margin-top: 3px; font-style: normal; font-size: 11px;
|
||
line-height: 1.6; color: var(--ink-3);
|
||
}
|
||
|
||
/* ══ 个人中心(/me 台面,2026-08-25)══
|
||
与工作台同皮肤:44px 通栏顶栏 + 居中内容列。
|
||
只加 .jc-me-* 作用域,共享件(.jc-kpi/.jc-nav-ava/EmptyState)本体不动。 */
|
||
.proto-root .jc-me { min-height: 100vh; display: flex; flex-direction: column; background: var(--soft); }
|
||
.proto-root .jc-me-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; transition: color var(--t-fast); }
|
||
.proto-root .jc-me-back:hover { color: var(--brand-deep); }
|
||
.proto-root .jc-me-body { width: min(960px, calc(100% - 48px)); margin: 24px auto 48px; display: flex; flex-direction: column; gap: 14px; }
|
||
|
||
/* 卡片基座:白卡 1px 描边,与全站面板卡同语气 */
|
||
.proto-root .jc-me-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--card-shadow, 0 1px 2px rgba(31, 35, 41, .05)); }
|
||
|
||
/* 身份卡:大头像 + 姓名岗位 + 登出入口 */
|
||
.proto-root .jc-me-hero { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; }
|
||
.proto-root .jc-me-ava { flex: none; width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 800; background: linear-gradient(140deg, #2bc7d4, #0e9fd8); box-shadow: 0 4px 12px rgba(14, 159, 216, .35); }
|
||
.proto-root .jc-me-id { flex: 1; min-width: 0; }
|
||
.proto-root .jc-me-id h1 { margin: 2px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
|
||
.proto-root .jc-me-pos { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--brand-deep); }
|
||
.proto-root .jc-me-meta { margin: 0; font-size: 12px; color: var(--ink-4); }
|
||
.proto-root .jc-me-meta em { font-style: normal; font-weight: 700; }
|
||
.proto-root .jc-me-meta em.on { color: var(--ok); }
|
||
.proto-root .jc-me-meta em.off { color: var(--danger); }
|
||
.proto-root .jc-me-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
|
||
.proto-root .jc-me-logout { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
||
.proto-root .jc-me-logout:hover { background: var(--danger-soft); color: var(--danger); border-color: #f3c9c6; }
|
||
.proto-root .jc-me-logout:disabled { opacity: .6; cursor: default; }
|
||
|
||
/* 概览四卡:复用 .jc-kpi,这里只补链接态 */
|
||
.proto-root .jc-me-kpis { margin-bottom: 0; }
|
||
.proto-root .jc-me-kpis a.jc-kpi { text-decoration: none; color: inherit; }
|
||
|
||
/* 区块卡:节头 + 内容 */
|
||
.proto-root .jc-me-sec { padding: 16px 20px 14px; }
|
||
.proto-root .jc-me-sec-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
|
||
.proto-root .jc-me-sec-h h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
|
||
.proto-root .jc-me-sec-sub { font-size: 11.5px; color: var(--ink-4); }
|
||
|
||
/* 权限分组:组名一列,客体成串,动作色章 */
|
||
.proto-root .jc-me-grant { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; padding: 8px 0; }
|
||
.proto-root .jc-me-grant + .jc-me-grant { border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-me-grant > em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); }
|
||
.proto-root .jc-me-grant > div { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.proto-root .jc-me-grant-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line-soft); border-radius: 8px; font-size: 12px; font-family: var(--mono); color: var(--ink-2); background: var(--soft); }
|
||
.proto-root .jc-me-act { font-style: normal; font-family: var(--sans); font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
|
||
.proto-root .jc-me-act.a-read { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-me-act.a-write { color: #b25e15; background: #fdf0e6; }
|
||
.proto-root .jc-me-act.a-govern { color: #5b21cf; background: #f5f0fe; }
|
||
/* 可进的端(ADR-012):chip 即入口,点了整页导航过去 */
|
||
.proto-root .jc-me-end { text-decoration: none; font-family: var(--sans); font-weight: 600; color: var(--brand-deep); background: var(--brand-wash); border-color: transparent; padding-right: 10px; }
|
||
.proto-root .jc-me-end:hover { filter: brightness(0.96); }
|
||
|
||
/* 最近任务:一行一条,标题 + 活动 + 状态章 */
|
||
.proto-root .jc-me-task { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
|
||
.proto-root .jc-me-task + .jc-me-task { border-top: 1px dashed var(--line-soft); }
|
||
.proto-root .jc-me-task-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-me-task-a { flex: none; max-width: 40%; font-size: 11.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.proto-root .jc-me-task-st { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
|
||
.proto-root .jc-me-task-st.run { color: var(--brand-deep); background: var(--brand-wash); }
|
||
.proto-root .jc-me-task-st.done { color: var(--ink-3); background: var(--soft); }
|