@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/kb-agent.css

@@ -1,6 +1,7 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — kb-agent.css（工作台域：kb-canvas / kb-checkpoint / kb-sandbox / kb-chain）
- * 共享原语在 kb.css（.kb-num/.kb-dot/.kb-key/kb-pulse 等，全部 kb-* slug 经 EXTRA_CSS 引入）；
+ * 共享原语在 kb.css（.icen-kb-num/.icen-kb-dot/.icen-kb-key/kb-pulse 等，全部 kb-* slug 经 EXTRA_CSS 引入）；
  * 本文件只做本域专属结构。DOM 契约见 docs/spec/kb-family.md §5.23–5.26 与各 behavior 头注释。
  *
  * 域纪律（spec §2）：工作台域的运动感来自动效（120–240ms ease-out），不来自颜色——
@@ -11,15 +12,15 @@
 
 /* ═══════════════ kb-canvas 双栏工作台（§5.23） ═══════════════ */
 
-.kb-canvas {
+.icen-kb-canvas {
   --kb-canvas-ratio: 0.42; /* JS 拖拽时原位覆写（0–1，无单位） */
-  position: relative; /* 划词工具条（.kb-canvas-selbar）的定位包含块 */
+  position: relative; /* 划词工具条（.icen-kb-canvas-selbar）的定位包含块 */
   display: flex;
   flex-direction: column;
   min-height: 320px;
 }
 
-.kb-canvas-main {
+.icen-kb-canvas-main {
   display: grid;
   grid-template-columns:
     minmax(0, calc(var(--kb-canvas-ratio) * 100%))
@@ -29,8 +30,8 @@
   min-height: 0;
 }
 
-.kb-canvas-chat,
-.kb-canvas-doc {
+.icen-kb-canvas-chat,
+.icen-kb-canvas-doc {
   min-height: 0;
   min-width: 0;
   overflow-y: auto;
@@ -39,339 +40,367 @@
 }
 
 /* 分隔条：6px 命中区 + 中央 grip 视觉；hover/拖拽点亮 accent（唯一强调处） */
-.kb-canvas-divider {
+.icen-kb-canvas-divider {
   position: relative;
   margin: 0;
   border: none;
-  border-radius: 2px;
-  background: var(--token-line-soft);
+  border-radius: 2px; /* guard:allow-radius 分隔条的图形圆角 */
+  background: var(--icen-token-line-soft);
   cursor: col-resize;
   touch-action: none; /* 拖拽需接管触摸滚动（指针事件 preventDefault 的对偶） */
-  transition: background-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast);
 }
-.kb-canvas-divider::after {
+.icen-kb-canvas-divider::after {
   content: '';
   position: absolute;
-  left: 50%;
+  left: 50%; /* guard:allow-physical 分隔条圆点居中（translate(-50%,-50%) 配套） */
   top: 50%;
   transform: translate(-50%, -50%);
   width: 2px;
   height: 18px;
-  border-radius: 1px;
-  background: var(--token-line);
-  transition: background-color 0.16s ease-out;
+  border-radius: 1px; /* guard:allow-radius 拖动握柄的图形圆角 */
+  background: var(--icen-token-line);
+  transition: background-color var(--icen-tx-fast);
 }
-.kb-canvas-divider:hover,
-.kb-canvas-divider.is-active {
-  background: color-mix(in srgb, var(--token-accent) 22%, transparent);
+.icen-kb-canvas-divider:hover,
+.icen-kb-canvas-divider.is-active {
+  background: color-mix(in srgb, var(--icen-token-accent) 22%, transparent);
 }
-.kb-canvas-divider:hover::after,
-.kb-canvas-divider.is-active::after {
-  background: var(--token-accent);
+.icen-kb-canvas-divider:hover::after,
+.icen-kb-canvas-divider.is-active::after {
+  background: var(--icen-token-accent);
 }
-.kb-canvas-divider:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-canvas-divider:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 /* 拖拽中：禁文本选择（防划词误触）+ 冻结两栏 hover 抖动 */
-.kb-canvas.is-dragging {
+.icen-kb-canvas.is-dragging {
   user-select: none;
 }
-.kb-canvas.is-dragging .kb-canvas-chat,
-.kb-canvas.is-dragging .kb-canvas-doc {
+.icen-kb-canvas.is-dragging .icen-kb-canvas-chat,
+.icen-kb-canvas.is-dragging .icen-kb-canvas-doc {
   pointer-events: none;
 }
 
-/* 右栏内联 diff 间距（渲染复用 ai-diff.css 的 .ai-diff） */
-.kb-canvas-diff {
+/* 右栏内联 diff 间距（渲染复用 ai-diff.css 的 .icen-ai-diff） */
+.icen-kb-canvas-diff {
   margin-bottom: 12px;
 }
-.kb-canvas-diff:last-child {
+.icen-kb-canvas-diff:last-child {
   margin-bottom: 0;
 }
 
 /* 底部版本时间轴：横向节点流；display:flex 会压掉 UA 的 [hidden]，须显式声明 */
-.kb-canvas-versions {
+.icen-kb-canvas-versions {
   display: flex;
   align-items: center;
   gap: 6px;
   flex: 0 0 auto;
   padding: 6px 10px;
-  border-top: 1px solid var(--token-line-soft);
+  border-top: 1px solid var(--icen-token-line-soft);
   overflow-x: auto;
 }
-.kb-canvas-versions[hidden] {
+.icen-kb-canvas-versions[hidden] {
   display: none;
 }
 
-.kb-canvas-ver {
+.icen-kb-canvas-ver {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   flex: 0 0 auto;
-  padding: 2px 9px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
-  background: var(--token-bg-soft);
+  min-block-size: 24px;
+  padding: 0 9px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-bg-soft);
   font: inherit;
-  font-size: 11.5px;
-  color: var(--token-text-muted);
+  font-size: var(--icen-font-size-caption);
+  line-height: 1;
+  color: var(--icen-token-text-muted);
   cursor: pointer;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.icen-kb-canvas-ver:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
 }
-.kb-canvas-ver:hover {
-  color: var(--token-text);
-  border-color: var(--token-line);
+.icen-kb-canvas-ver:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-canvas-ver:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-canvas-ver:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-canvas-ver-dot {
+.icen-kb-canvas-ver-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   flex: 0 0 auto;
-  background: var(--token-text-faint);
-  transition: background-color 0.16s ease-out;
+  background: var(--icen-token-text-faint);
+  transition: background-color var(--icen-tx-fast);
 }
-.kb-canvas-ver-label {
+.icen-kb-canvas-ver-label {
+  color: var(--icen-token-text);
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* current 高亮：点线同色 accent（语义=当前所在版本，非装饰） */
-.kb-canvas-ver.is-current {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+/* current 高亮：点线同色 accent + 选中底色（语义=当前所在版本，非装饰） */
+.icen-kb-canvas-ver.is-current {
+  color: var(--icen-token-accent-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+  background: var(--icen-token-fill-selected);
 }
-.kb-canvas-ver.is-current .kb-canvas-ver-dot {
-  background: var(--token-accent);
+.icen-kb-canvas-ver.is-current .icen-kb-canvas-ver-dot {
+  background: var(--icen-token-accent);
 }
 
-/* 划词工具条：浮层三档材质（--z-panel 缺省回落 --z-popover）；1.5s 无操作由 JS 隐藏 */
-.kb-canvas-selbar {
+/* 划词工具条：浮层三档材质；1.5s 无操作由 JS 隐藏 */
+.icen-kb-canvas-selbar {
   position: absolute;
-  z-index: var(--z-panel, var(--z-popover));
+  z-index: var(--icen-z-popover);
   display: flex;
   gap: 2px;
   padding: 3px;
-  border-radius: var(--radius-md, 10px);
-  background: color-mix(in srgb, var(--token-card-strong, var(--token-bg)) 94%, transparent);
-  border: 1px solid var(--token-outline, var(--token-line));
-  box-shadow: var(--token-shadow-overlay, 0 8px 24px rgba(0, 0, 0, 0.14));
-  animation: icen-pop-in var(--icen-tx-fast, 160ms) ease-out;
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-surface-raised);
+  border: 1px solid var(--icen-token-line-soft);
+  box-shadow: var(--icen-token-shadow-elevated);
+  animation: icen-pop-in var(--icen-tx-fast);
   user-select: none;
 }
-.kb-canvas-selbar[hidden] {
+.icen-kb-canvas-selbar[hidden] {
   display: none;
 }
-.kb-canvas-selbar-btn {
+.icen-kb-canvas-selbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 24px;
+  padding: 0 9px;
   border: none;
   background: none;
-  border-radius: var(--radius-sm, 6px);
-  padding: 3px 9px;
+  border-radius: var(--icen-radius-sm);
   font: inherit;
-  font-size: 12px;
-  color: var(--token-text-muted);
+  font-size: var(--icen-font-size-caption);
+  line-height: 1;
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   white-space: nowrap;
-  transition: color 0.16s ease-out, background-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.icen-kb-canvas-selbar-btn:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
 }
-.kb-canvas-selbar-btn:hover {
-  color: var(--token-text);
-  background: var(--token-bg-soft);
+.icen-kb-canvas-selbar-btn:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-canvas-selbar-btn:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-canvas-selbar-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 /* ═══════════════ kb-checkpoint 检查点（§5.24） ═══════════════ */
 
-.kb-checkpoints {
+.icen-kb-checkpoints {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 
-.kb-checkpoint {
+.icen-kb-checkpoint {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  min-height: 28px;
-  padding: 2px 10px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
+  min-height: var(--icen-density-item-height);
+  padding: 0 10px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
   font: inherit;
-  font-size: 12px;
-  color: var(--token-text-muted);
+  font-size: var(--icen-font-size-caption);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.icen-kb-checkpoint:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
 }
-.kb-checkpoint:hover {
-  color: var(--token-text);
-  border-color: var(--token-line);
+.icen-kb-checkpoint:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-checkpoint:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-checkpoint:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-checkpoint-icon {
+.icen-kb-checkpoint-icon {
   display: inline-flex;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.kb-checkpoint-icon svg {
+.icen-kb-checkpoint-icon svg {
   width: 14px;
   height: 14px;
 }
-.kb-checkpoint-time {
-  font-size: 11px;
+.icen-kb-checkpoint-time {
+  font-size: var(--icen-density-font-size-xs);
 }
-.kb-checkpoint-label {
+.icen-kb-checkpoint-label {
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* 恢复菜单：fixed 浮层（body 挂载），160ms 进场；默认预选项带 ✓ 与审计说明 */
-.kb-checkpoint-menu {
+/* 恢复菜单：复用浮层材质；选中范围用克制的内嵌表面表达。 */
+.icen-kb-checkpoint-menu {
   position: fixed;
-  z-index: var(--z-popover);
-  min-width: 248px;
-  max-width: 320px;
+  z-index: var(--icen-z-popover);
+  min-inline-size: min(248px, calc(100vw - 24px));
+  max-inline-size: min(320px, calc(100vw - 24px));
+  overflow: auto;
+  overscroll-behavior: contain;
   margin: 0;
   padding: 6px;
-  background: color-mix(in srgb, var(--token-card-strong, var(--token-bg)) 94%, transparent);
-  border: 1px solid var(--token-outline, var(--token-line));
-  box-shadow: var(--token-shadow-overlay);
-  border-radius: var(--radius-md, 10px);
-  animation: icen-pop-in var(--icen-tx-fast, 160ms) ease-out;
-}
-.kb-checkpoint-menu-title {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+  background: var(--icen-token-surface-raised);
+  border: 1px solid var(--icen-token-line-soft);
+  box-shadow: var(--icen-token-shadow-elevated);
+  border-radius: var(--icen-radius-md);
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.icen-kb-checkpoint-menu-title {
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.3px;
+  color: var(--icen-token-text-faint);
   padding: 4px 8px 6px;
 }
-.kb-checkpoint-menu-item {
+.icen-kb-checkpoint-menu-item {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  width: 100%;
+  inline-size: 100%;
+  min-block-size: var(--icen-density-item-height);
   padding: 6px 8px;
   border: none;
   background: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--icen-radius-xs);
   font: inherit;
-  font-size: 12.5px;
-  color: var(--token-text);
-  text-align: left;
+  font-size: var(--icen-font-size-control);
+  color: var(--icen-token-text);
+  text-align: start;
   cursor: pointer;
-  transition: background-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
+}
+.icen-kb-checkpoint-menu-item:hover {
+  background: var(--icen-token-fill-hover);
 }
-.kb-checkpoint-menu-item:hover {
-  background: var(--token-bg-soft);
+.icen-kb-checkpoint-menu-item:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-checkpoint-menu-item:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-checkpoint-menu-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-checkpoint-menu-item.is-disabled,
-.kb-checkpoint-menu-item:disabled {
-  opacity: 0.45;
+@media (pointer: coarse) {
+  .icen-kb-checkpoint-menu-item { min-block-size: 44px; }
+}
+.icen-kb-checkpoint-menu-item.is-disabled,
+.icen-kb-checkpoint-menu-item:disabled {
+  opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
 }
-.kb-checkpoint-menu-item:disabled:hover {
+.icen-kb-checkpoint-menu-item:disabled:hover {
   background: none;
 }
-.kb-checkpoint-menu-check {
+.icen-kb-checkpoint-menu-check {
   flex: 0 0 14px;
   display: inline-flex;
   justify-content: center;
-  color: var(--token-accent);
-  font-size: 12px;
+  color: var(--icen-token-accent);
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.4;
 }
-.kb-checkpoint-menu-item.is-checked .kb-checkpoint-menu-check::before {
-  content: '✓';
-}
-.kb-checkpoint-menu-main {
+.icen-kb-checkpoint-menu-main {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
-.kb-checkpoint-menu-note {
-  font-size: 11px;
-  color: var(--token-text-faint);
+.icen-kb-checkpoint-menu-note {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
 
 /* ═══════════════ kb-sandbox 沙箱工具容器（§5.25） ═══════════════ */
 
-.kb-sandbox {
+.icen-kb-sandbox {
   position: relative;
   display: block;
 }
 
-.kb-sandbox-stage {
+.icen-kb-sandbox-stage {
   position: relative;
   aspect-ratio: 16 / 9;
   min-height: 320px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md, 10px);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
   overflow: hidden;
-  background: var(--token-bg);
+  background: var(--icen-token-bg);
 }
 
-.kb-sandbox-frame {
+.icen-kb-sandbox-frame {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   background: transparent;
 }
-.kb-sandbox[data-state='idle'] .kb-sandbox-frame {
+.icen-kb-sandbox[data-icen-state='idle'] .icen-kb-sandbox-frame {
   display: none; /* 未 load 前不露空白帧 */
 }
 
-/* 三态由 data-state 驱动（纯 CSS 状态优先纪律）；loading 走共享 icen-spin */
-.kb-sandbox-loading,
-.kb-sandbox-err {
+/* 三态由 data-icen-state 驱动（纯 CSS 状态优先纪律）；loading 走共享 icen-spin */
+.icen-kb-sandbox-loading,
+.icen-kb-sandbox-err {
   position: absolute;
   inset: 0;
   display: none;
   place-items: center;
   padding: 16px;
-  background: var(--token-bg);
+  background: var(--icen-token-bg);
 }
-.kb-sandbox[data-state='loading'] .kb-sandbox-loading {
+.icen-kb-sandbox[data-icen-state='loading'] .icen-kb-sandbox-loading {
   display: grid;
 }
-.kb-sandbox[data-state='error'] .kb-sandbox-err {
+.icen-kb-sandbox[data-icen-state='error'] .icen-kb-sandbox-err {
   display: grid;
 }
-.kb-sandbox-spin {
+.icen-kb-sandbox-spin {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  border: 2px solid var(--token-line-soft);
-  border-top-color: var(--token-accent);
+  border: 2px solid var(--icen-token-line-soft);
+  border-top-color: var(--icen-token-accent);
   animation: icen-spin 0.8s linear infinite;
 }
-.kb-sandbox-err {
-  color: var(--token-danger, var(--token-error));
-  font-size: 12.5px;
+.icen-kb-sandbox-err {
+  color: var(--icen-token-error);
+  font-size: var(--icen-font-size-control);
   text-align: center;
 }
 
 /* ═══════════════ kb-chain 工具链条（§5.26） ═══════════════ */
 
-.kb-chain {
+.icen-kb-chain {
   display: flex;
   align-items: center;
   min-width: 0;
@@ -379,103 +408,168 @@
   overflow-x: auto;
 }
 
-.kb-chain-step {
+.icen-kb-chain-step {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   flex: 0 0 auto;
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  color: var(--token-text-muted);
-  transition: color 0.16s ease-out, background-color 0.16s ease-out;
+  min-block-size: var(--icen-density-item-height);
+  padding: 0 10px;
+  border-radius: var(--icen-radius-full);
+  font-size: var(--icen-font-size-caption);
+  line-height: 1;
+  color: var(--icen-token-text-muted);
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
 /* 可点（running 及之前）：hover 提供可点暗示，仍走中性色 */
-.kb-chain-step[aria-disabled='false'] {
+.icen-kb-chain-step[aria-disabled='false'] {
   cursor: pointer;
 }
-.kb-chain-step[aria-disabled='false']:hover {
-  color: var(--token-text);
-  background: var(--token-bg-soft);
+.icen-kb-chain-step[aria-disabled='false']:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
 }
-.kb-chain-step[aria-disabled='false']:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-chain-step[aria-disabled='false']:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-chain-step[aria-disabled='true'] {
-  color: var(--token-text-faint);
+.icen-kb-chain-step[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.icen-kb-chain-step[aria-disabled='true'] {
+  color: var(--icen-token-text-faint);
   cursor: default;
 }
 
 /* 状态点：空心灰（pending）/ accent 脉冲（running）/ 实心绿（done）/ 实心红（error） */
-.kb-chain-dot {
+.icen-kb-chain-dot {
   box-sizing: border-box;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex: 0 0 auto;
-  transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.kb-chain-step.is-pending .kb-chain-dot {
-  border: 1.5px solid var(--token-line);
+.icen-kb-chain-step.is-pending .icen-kb-chain-dot {
+  border: 1.5px solid var(--icen-token-line);
   background: transparent;
 }
-.kb-chain-step.is-running .kb-chain-dot {
-  background: var(--token-accent);
+.icen-kb-chain-step.is-running .icen-kb-chain-dot {
+  background: var(--icen-token-accent);
   animation: kb-pulse 1.6s ease-in-out infinite; /* kb.css 共享脉冲 */
 }
-.kb-chain-step.is-done .kb-chain-dot {
-  background: var(--token-success);
+.icen-kb-chain-step.is-done .icen-kb-chain-dot {
+  background: var(--icen-token-success);
 }
-.kb-chain-step.is-error .kb-chain-dot {
-  background: var(--token-danger, var(--token-error));
+.icen-kb-chain-step.is-error .icen-kb-chain-dot {
+  background: var(--icen-token-error);
 }
 
-.kb-chain-label {
+.icen-kb-chain-label {
   white-space: nowrap;
 }
 
-/* 步骤间箭头连线：基线 + 45° 折角箭头，中性层级色 */
-.kb-chain-link {
+/* 步骤间箭头连线：基线 + 45° 折角箭头（指向行进方向），中性层级色；RTL 镜像规则移到行内末端并翻转为左指 */
+.icen-kb-chain-link {
   position: relative;
   flex: 0 0 18px;
   height: 1px;
   margin: 0 2px;
-  background: var(--token-line-soft);
+  background: var(--icen-token-line-soft);
 }
-.kb-chain-link::after {
+.icen-kb-chain-link::after {
   content: '';
   position: absolute;
-  right: 1px;
+  right: 1px; /* guard:allow-physical 箭头钉在连线物理末端（LTR 行进方向），RTL 镜像规则改到 left 并翻转指向 */
   top: 50%;
   width: 5px;
   height: 5px;
-  border-top: 1px solid var(--token-line);
-  border-right: 1px solid var(--token-line);
+  border-top: 1px solid var(--icen-token-line); /* guard:allow-physical 折角箭头半边构成（与 rotate(45deg) 配套） */
+  border-right: 1px solid var(--icen-token-line); /* guard:allow-physical 折角箭头半边构成 */
   transform: translateY(-50%) rotate(45deg);
 }
 
 /* ═══════════════ 动效纪律（reduced-motion 全退化） ═══════════════ */
 
 @media (prefers-reduced-motion: reduce) {
-  .kb-canvas-divider,
-  .kb-canvas-divider::after,
-  .kb-canvas-ver,
-  .kb-canvas-ver-dot,
-  .kb-canvas-selbar,
-  .kb-canvas-selbar-btn,
-  .kb-checkpoint,
-  .kb-checkpoint-menu,
-  .kb-checkpoint-menu-item,
-  .kb-chain-step,
-  .kb-chain-dot {
+  .icen-kb-canvas-divider,
+  .icen-kb-canvas-divider::after,
+  .icen-kb-canvas-ver,
+  .icen-kb-canvas-ver-dot,
+  .icen-kb-canvas-selbar,
+  .icen-kb-canvas-selbar-btn,
+  .icen-kb-checkpoint,
+  .icen-kb-checkpoint-menu,
+  .icen-kb-checkpoint-menu-item,
+  .icen-kb-chain-step,
+  .icen-kb-chain-dot {
     transition: none;
     animation: none;
   }
-  .kb-chain-step.is-running .kb-chain-dot {
+  .icen-kb-chain-step.is-running .icen-kb-chain-dot {
     animation: none; /* 脉冲退化为静态 accent 点 */
   }
-  .kb-sandbox-spin {
+  .icen-kb-sandbox-spin {
     animation-duration: 1.6s; /* 旋转保留但放慢，避免频闪不适 */
   }
 }
+
+/* ═══════════════ 密度档（compact：收紧留白，可点面保持 24px 下限） ═══════════════ */
+
+[data-icen-density='compact'] .icen-kb-canvas-chat,
+[data-icen-density='compact'] .icen-kb-canvas-doc { padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-canvas-versions { padding-block: 4px; }
+[data-icen-density='compact'] .icen-kb-checkpoints { gap: 6px; }
+[data-icen-density='compact'] .icen-kb-checkpoint { min-height: var(--icen-density-item-height); }
+[data-icen-density='compact'] .icen-kb-checkpoint-menu-item { min-block-size: 24px; padding-block: 4px; }
+[data-icen-density='compact'] .icen-kb-chain-step { min-block-size: 24px; }
+[data-icen-density='compact'] .icen-kb-sandbox-stage { min-height: 280px; }
+
+/* ── RTL：步骤链行进箭头镜像（翻转到行内末端并改为左指） ── */
+:is([dir='rtl']) .icen-kb-chain-link::after {
+  right: auto; /* guard:allow-physical RTL 镜像规则：箭头移到行内末端（视觉左） */
+  left: 1px; /* guard:allow-physical RTL 镜像规则：箭头钉在视觉左端 */
+  transform: translateY(-50%) rotate(45deg) scaleX(-1);
+}
+
+/* ═══════════════ 高对比模式：材质回落到系统面，选中/焦点换 Highlight ═══════════════ */
+
+@media (forced-colors: active) {
+  .icen-kb-canvas-selbar,
+  .icen-kb-checkpoint-menu {
+    background: Canvas;
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+  .icen-kb-canvas-selbar-btn,
+  .icen-kb-checkpoint-menu-item { border: 1px solid CanvasText; }
+  .icen-kb-canvas-ver.is-current,
+  .icen-kb-chain-step.is-running,
+  .icen-kb-chain-step.is-error {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .icen-kb-canvas-divider { background: CanvasText; }
+  .icen-kb-canvas-divider::after { background: Canvas; }
+  .icen-kb-chain-link { background: CanvasText; }
+  .icen-kb-chain-link::after { border-color: CanvasText; }
+  .icen-kb-chain-dot { border: 1px solid CanvasText; }
+  .icen-kb-chain-step.is-running .icen-kb-chain-dot,
+  .icen-kb-chain-step.is-done .icen-kb-chain-dot,
+  .icen-kb-chain-step.is-error .icen-kb-chain-dot { background: CanvasText; }
+  .icen-kb-sandbox-stage { border-color: CanvasText; }
+  .icen-kb-sandbox-err { border: 1px solid CanvasText; }
+  .icen-kb-canvas-divider:focus-visible,
+  .icen-kb-canvas-ver:focus-visible,
+  .icen-kb-canvas-selbar-btn:focus-visible,
+  .icen-kb-checkpoint:focus-visible,
+  .icen-kb-checkpoint-menu-item:focus-visible,
+  .icen-kb-chain-step[aria-disabled='false']:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+}
+
+}