/* ==========================================================================
   灵眸·智舱 · 界面重构主题（theme.css）
   --------------------------------------------------------------------------
   版本：2026-09-18 layout-redesign-1
   目标：统一栅格 / 间距 / 圆角 / 视觉层级，强化分组与对齐，提升可读性与现代感
   约束：不改动 HTML 结构、ID、class 与任何交互逻辑，仅覆盖视觉与布局
   加载：在 styles.css 之后加载，用于覆盖历史叠加规则
   ========================================================================== */

/* ------------------------------------------------------------------ 1. 令牌 */
:root,
.cyberclaw-light {
  --ui-gap: 10px;
  --ui-pad: 12px;
  --ui-r-panel: 14px;
  --ui-r-card: 11px;
  --ui-r-ctrl: 9px;

  --ui-line: #e4ecf7;
  --ui-line-soft: #eef3fa;
  --ui-line-strong: #d7e3f2;

  --ui-ink-1: #101f38;
  --ui-ink-2: #2a3f60;
  --ui-ink-3: #62748c;
  --ui-ink-4: #8fa0b6;

  --ui-surface: #ffffff;
  --ui-surface-2: #f8fbfe;
  --ui-surface-3: #f1f6fd;

  --ui-accent: #2563eb;
  --ui-accent-soft: #eaf2ff;

  --ui-shadow-1: 0 1px 2px rgba(16, 38, 73, .05);
  --ui-shadow-2: 0 12px 30px -18px rgba(16, 38, 73, .45);
  --ui-shadow-3: 0 20px 48px -24px rgba(16, 38, 73, .5);
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------- 2. 画布与全局排版 */
.cyberclaw-light body,
.cyberclaw-light .wrap { background: #eef3fa; }

.cyberclaw-light .app {
  background:
    radial-gradient(900px 420px at 10% -12%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(900px 460px at 90% -8%, #f3f8ff 0%, rgba(243, 248, 255, 0) 64%),
    linear-gradient(180deg, #f8fbfe 0%, #edf3fa 100%);
  color: var(--ui-ink-2);
}

.cyberclaw-light ::selection { background: rgba(37, 99, 235, .16); }

/* 滚动条：细、低噪音，仅在需要时可见 */
.cyberclaw-light ::-webkit-scrollbar { width: 8px; height: 8px; }
.cyberclaw-light ::-webkit-scrollbar-thumb {
  background: rgba(100, 130, 165, .28);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.cyberclaw-light ::-webkit-scrollbar-thumb:hover { background: rgba(100, 130, 165, .48); background-clip: content-box; }
.cyberclaw-light ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ 3. 顶部导航栏 */
.cyberclaw-light .top {
  height: 56px;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-line);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 10px 28px -22px rgba(16, 38, 73, .55);
  backdrop-filter: blur(16px);
}

.cyberclaw-light .brand-block { display: flex; align-items: center; gap: 11px; }
.cyberclaw-light .brand-logo { height: 30px; width: auto; }
.cyberclaw-light .brand {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ui-ink-1);
  text-shadow: none;
}

.cyberclaw-light .header-agent-picker,
.cyberclaw-light .header-context-picker {
  height: 36px;
  gap: 9px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: var(--ui-shadow-1);
  transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}
.cyberclaw-light .header-agent-picker:hover,
.cyberclaw-light .header-context-picker:hover {
  border-color: #bcd4f2;
  box-shadow: 0 4px 14px -8px rgba(37, 99, 235, .45);
}
.cyberclaw-light .header-agent-picker label,
.cyberclaw-light .header-context-picker label {
  gap: 7px;
  color: var(--ui-ink-3);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
}
.cyberclaw-light .header-agent-picker select,
.cyberclaw-light .header-context-picker select {
  height: 26px;
  border-left: 1px solid var(--ui-line-soft);
  color: var(--ui-ink-1);
  font-size: 12px;
  font-weight: 700;
}

.cyberclaw-light .user-pill {
  height: 36px;
  gap: 8px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: var(--ui-shadow-1);
}
.cyberclaw-light .user-pill:hover { border-color: #bcd4f2; }
.cyberclaw-light .user-name { font-size: 12.5px; font-weight: 700; color: var(--ui-ink-1); }

/* ---------------------------------------------------------- 4. 工作区侧边栏 */
.cyberclaw-light .workspace-nav {
  width: 208px;
  flex: 0 0 208px;
  padding: 14px 10px;
  gap: 4px;
  background: #ffffff;
  border-right: 1px solid var(--ui-line);
  box-shadow: 6px 0 26px -22px rgba(16, 38, 73, .55);
}
.cyberclaw-light .workspace-nav-title,
.cyberclaw-light .workspace-nav-group {
  padding: 8px 11px 6px;
  color: var(--ui-ink-4);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.cyberclaw-light .workspace-nav-group { margin-top: 16px; }
.cyberclaw-light .workspace-link {
  min-height: 40px;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ui-ink-2);
  font-size: 13px;
  font-weight: 700;
}
.cyberclaw-light .workspace-link:hover { background: var(--ui-surface-3); color: #1d4ed8; }
.cyberclaw-light .workspace-link.active {
  background: linear-gradient(90deg, #e7f0ff, #f4f8ff);
  color: #1d4ed8;
  box-shadow: inset 3px 0 0 var(--ui-accent);
}
.cyberclaw-light .workspace-link-icon { width: 18px; height: 18px; opacity: .92; }

/* 收起态：权重与 .cyberclaw-light .workspace-nav 同级冲突，必须用 .collapsed 提权覆盖 */
.cyberclaw-light .workspace-nav.collapsed {
  width: 62px;
  flex: 0 0 62px;
  padding: 14px 9px;
}
.cyberclaw-light .workspace-nav.collapsed .workspace-nav-head { justify-content: center; padding: 0 0 3px; }
.cyberclaw-light .workspace-nav.collapsed .workspace-nav-title,
.cyberclaw-light .workspace-nav.collapsed .workspace-nav-group,
.cyberclaw-light .workspace-nav.collapsed .workspace-link-label,
.cyberclaw-light .workspace-nav.collapsed .workspace-submenu-toggle,
.cyberclaw-light .workspace-nav.collapsed .workspace-submenu { display: none; }
.cyberclaw-light .workspace-nav.collapsed .workspace-link {
  width: 44px;
  min-height: 40px;
  justify-content: center;
  gap: 0;
  padding: 10px;
}
.cyberclaw-light .workspace-nav.collapsed .workspace-nav-parent > .workspace-link { padding: 10px; }
.cyberclaw-light .workspace-nav.collapsed .workspace-nav-group + button { margin-top: 18px; }
.cyberclaw-light .workspace-submenu { margin-top: 3px; border-left-color: var(--ui-line); }
.cyberclaw-light .workspace-submenu .workspace-link { min-height: 34px; border-radius: 9px; color: #5b6f8b; }

/* -------------------------------------------------------- 5. 主栅格与栏宽 */
.main.cockpit {
  --rail-l: clamp(296px, 19.5vw, 348px);
  /* 2026-09-19：中栏宽度贴合 16:9→4:3 画面（去黑框），右栏吸收剩余空间（右侧三窗口左移加宽） */
  --rail-c: clamp(380px, min(38vw, calc((100vh - 520px) * 1.3333 + 30px)), 1300px);
  display: grid;
  grid-template-columns: var(--rail-l) var(--rail-c) minmax(326px, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--agent-panel-h, clamp(236px, 30vh, 330px));
  grid-template-areas: "left center right" "left physical physical";
  gap: var(--ui-gap);
  padding: var(--ui-gap);
  background: transparent;
}

.physical-modules {
  grid-template-columns: minmax(0, var(--rail-c)) minmax(326px, 1fr);
  gap: var(--ui-gap);
}

.cyberclaw-light .left-rail,
.cyberclaw-light .left-rail.answer-final-mode {
  grid-template-rows: minmax(118px, calc(30% - var(--task-chain-growth, 0%))) minmax(0, 1fr);
  gap: var(--ui-gap);
  transition: grid-template-rows .42s var(--ui-ease);
}

.cyberclaw-light .right {
  /* 技能面板按内容定高（恰好一张卡片），剩余高度全部给信息空间；
     信息空间保底 176px，矮屏时由右栏整体滚动兜底，避免被压成一条缝 */
  grid-template-rows: min-content minmax(176px, 1fr);
  align-content: stretch;
  gap: var(--ui-gap);
  overflow-y: auto;
  overflow-x: hidden;
}

.cyberclaw-light .center {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  min-width: 0;
}
.cyberclaw-light .center > .video-panel { flex: 1 1 auto; min-height: 0; }

/* -------------------------------------------------------------- 6. 面板外壳 */
.cyberclaw-light .panel {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-panel);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1), 0 18px 40px -34px rgba(16, 38, 73, .55);
}
.cyberclaw-light .panel:hover { border-color: #dee8f5; }

.cyberclaw-light .title {
  height: 44px;
  gap: 9px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ui-line-soft);
  background: linear-gradient(180deg, #fdfeff, #f7fafd);
  color: var(--ui-ink-1);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .02em;
}
.cyberclaw-light .physical-module-title { height: 44px; }
.cyberclaw-light .video-title { height: 44px; padding: 0 8px 0 10px; }

.cyberclaw-light .title-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  border-color: rgba(var(--title-accent-rgb), .28);
  background: linear-gradient(150deg, rgba(var(--title-accent-rgb), .14), rgba(255, 255, 255, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 12px -6px rgba(var(--title-accent-rgb), .55);
}
.cyberclaw-light .title-icon:after { display: none; }
.cyberclaw-light .title-icon img { width: 14px; height: 14px; }

/* 面板正文统一内边距 */
.cyberclaw-light .task-input-body,
.cyberclaw-light .answerbody,
.cyberclaw-light .callbody,
.cyberclaw-light .spacebody { padding: var(--ui-pad); }

/* ------------------------------------------------- 7. 需求输入 / 智能响应 */
.cyberclaw-light .task-input-body { gap: 8px; }

.cyberclaw-light .question-box {
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-r-card);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease), background .15s var(--ui-ease);
}
.cyberclaw-light .question-box:focus-within {
  border-color: var(--ui-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12), inset 0 1px 0 #fff;
}
.cyberclaw-light .question-box.submitted {
  border-color: rgba(16, 185, 129, .5);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .1), inset 0 1px 0 #fff;
}
.cyberclaw-light .question-box.locked { background: #f7fafd; }
.cyberclaw-light sl-textarea.question-input::part(textarea) { font-size: 13px; line-height: 1.6; }

.cyberclaw-light sl-button.send-btn::part(base) {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 8px 18px -10px rgba(29, 78, 216, .85);
}
.cyberclaw-light sl-button.send-btn::part(base):hover { background: linear-gradient(180deg, #4f8df8, #1d70f5); }
.cyberclaw-light sl-button.send-btn[disabled]::part(base) {
  color: #9aabc0;
  background: #eef3f9;
  box-shadow: none;
}
.cyberclaw-light .send-btn { right: 10px; bottom: 10px; }

.cyberclaw-light .answer-panel .answer-card {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: linear-gradient(160deg, #ffffff, #f4f9ff);
  box-shadow: inset 0 1px 0 #ffffff;
}
.cyberclaw-light .answer-panel .answer-card-empty,
.cyberclaw-light .answer-panel .answer-orb-card.answer-card-idle {
  border-style: dashed;
  border-color: #d9e5f6;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 60, 255, .07), transparent 62%),
    linear-gradient(160deg, #fdfeff, #f5f9ff);
  box-shadow: none;
}
.cyberclaw-light .answer-orb-card .answer-main,
.cyberclaw-light .answer-card .answer-main { color: var(--ui-ink-1); text-shadow: none; }
.cyberclaw-light .answer-orb-card .answer-sub,
.cyberclaw-light .answer-card .answer-sub { color: var(--ui-ink-3); }
.cyberclaw-light .answer-empty { color: var(--ui-ink-3); font-size: 12.5px; line-height: 1.6; }
.cyberclaw-light .answer-card:before,
.cyberclaw-light .answer-card:after { opacity: .35; }

/* 空态/空闲态卡片铺满面板并居中：消除左栏下方的大块留白 */
.cyberclaw-light .answerbody > .answer-card { flex: 1 1 auto; }
.cyberclaw-light .answerbody > .answer-card.answer-card-empty,
.cyberclaw-light .answerbody > .answer-card.answer-orb-card.answer-card-no-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--ui-r-card);
}
.cyberclaw-light .answerbody > .answer-card .answer-copy { width: 100%; max-width: 460px; }
.cyberclaw-light .answerbody > .answer-card.answer-orb-card .answer-main { font-size: 19px; }
.cyberclaw-light .answerbody > .answer-card.answer-orb-card .answer-sub { font-size: 12.5px; }

/* ----------------------------------------------- 8. 视频面板 / 舞台 / 连接 */
.cyberclaw-light .video-tabbar {
  height: 32px;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--ui-surface-3);
  border: 1px solid var(--ui-line-soft);
}
.cyberclaw-light .video-tab {
  height: 26px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ui-ink-3);
  font-size: 12.5px;
  font-weight: 700;
}
.cyberclaw-light .video-tab:hover { color: #1d4ed8; background: rgba(255, 255, 255, .7); }
.cyberclaw-light .video-tab.active {
  color: #1d4ed8;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 38, 73, .14), 0 6px 14px -12px rgba(16, 38, 73, .6);
}
.cyberclaw-light .video-actions { gap: 8px; }
.cyberclaw-light .icon-btn::part(base) {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--ui-ink-2);
}
.cyberclaw-light .icon-btn::part(base):hover { border-color: #bcd4f2; background: var(--ui-accent-soft); }
.cyberclaw-light .live {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(225, 29, 72, .2);
  background: rgba(225, 29, 72, .06);
  color: #be123c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

/* 视频舞台：深色底 + 圆角内嵌，画面按比例居中（不裁切、不变形） */
.cyberclaw-light .video-panel > .body.video-box {
  margin: 0 var(--ui-pad) var(--ui-pad);
  border: 1px solid #16283f;
  border-radius: var(--ui-r-card);
  background:
    radial-gradient(720px 380px at 50% 34%, #16293f 0%, rgba(22, 41, 63, 0) 70%),
    linear-gradient(180deg, #0d1b2c, #0a1524);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.cyberclaw-light .video-box .connect { gap: 14px; }
.cyberclaw-light .video-box .connect-row {
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--ui-shadow-3);
}
.cyberclaw-light .video-box .connect .hint { color: #a7bdd6; }
.cyberclaw-light .vision-frame,
.cyberclaw-light .camera-feed,
.cyberclaw-light .live-camera-box { border-radius: 10px; }
.cyberclaw-light .isaac-camera-stream { object-fit: contain; }
.cyberclaw-light .live-camera-overlay {
  border-radius: 10px;
  background: rgba(8, 20, 34, .82);
  border: 1px solid rgba(126, 159, 208, .28);
  color: #d8e6f7;
}

/* -------------------------------------------------------- 9. 场景图空态 */
.cyberclaw-light .scene-module-body { padding: var(--ui-pad); background: transparent; }
.cyberclaw-light .physical-stage {
  width: 100%;
  height: 100%;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background-color: #fbfdff;
  background-image:
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center center;
  box-shadow: inset 0 1px 0 #ffffff;
}
.cyberclaw-light .physical-stage[data-render="off"] {
  border-style: dashed;
  border-color: #dbe6f4;
  background-image:
    radial-gradient(320px 160px at 50% 46%, rgba(37, 99, 235, .06), transparent 70%),
    linear-gradient(rgba(37, 99, 235, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px);
}
.cyberclaw-light .physical-stage[data-render="off"]:after {
  content: "暂无设备位置 · 等待端侧上报遥测后绘制";
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-items: center;
  height: 100%;
  background: none !important;
  color: var(--ui-ink-4);
  font-size: 12.5px;
  letter-spacing: .02em;
  pointer-events: none;
}

/* ----------------------------------------------- 10. 技能调用信息（右栏） */
/* 右栏内的技能面板使用 :not(:fullscreen) 提升优先级，避免影响全屏表格模式 */
/* 三段式（统计 / 筛选 / 列表）网格：
   1) 搜索框已移除，其位置由四项统计接管；
   2) 列表行改用 1fr，把腾出的高度全部让给信息展示区，可滚动显示多条记录 */
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .callbody {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
  padding: 9px var(--ui-pad) var(--ui-pad);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-controls { gap: 6px; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-search {
  height: 34px;
  padding: 0 12px;
  gap: 8px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 10px;
  background: var(--ui-surface-2);
  box-shadow: none;
  transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease), background .15s var(--ui-ease);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-search:focus-within {
  border-color: var(--ui-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-search img { width: 15px; height: 15px; opacity: .55; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-search input {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ui-ink-1);
}

.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filters::-webkit-scrollbar { display: none; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filter {
  flex: 0 0 auto;
  height: 27px;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ui-ink-3);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filter img { width: 13px; height: 13px; opacity: .7; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filter:hover { border-color: #bcd4f2; color: #1d4ed8; background: #f7faff; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filter.active {
  border-color: rgba(37, 99, 235, .35);
  background: var(--ui-accent-soft);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .06);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-filter.active img { opacity: 1; }

.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-table-wrap {
  /* robot-live.js 按 rowStart(内边距+边框) + 行高 + rowStart 计算可见高度；
     内层若保留内边距/边框，底部就会多出 9px，正好露出下一条卡片的边框。
     故此处收掉内层框，使 rowStart = 0 → 可见高度 = 一条记录 + 行间距，底边干净。
     height 仅为脚本写入内联高度前的兜底值。 */
  height: 102px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto;
  scrollbar-gutter: stable;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-table-inner {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-list {
  flex: 1 1 auto;
  min-height: 0;
}
.cyberclaw-light .right .rag-panel .info-space-body .observe-list,
.cyberclaw-light .right .rag-panel .info-space-body .rag-list { position: relative; }
.cyberclaw-light .right .rag-panel .info-space-body .observe-list::after,
.cyberclaw-light .right .rag-panel .info-space-body .rag-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0), #fbfdff 70%);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
}

/* 技能卡片：名称/状态 → 归属与业务 → 指标，三段式层级 */
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head state"
    "fields fields"
    "metrics metrics";
  grid-template-rows: 20px 24px 24px;
  min-height: 94px;
  gap: 5px 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--ui-line);
  border-left: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--ui-shadow-1), inset 3px 0 0 rgba(148, 173, 204, .5);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-row:hover {
  border-color: #cfe0f6;
  box-shadow: 0 10px 24px -18px rgba(16, 38, 73, .55), inset 3px 0 0 rgba(148, 173, 204, .6);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-main {
  grid-area: head;
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-main .skill-name-cell {
  min-width: 0;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--ui-ink-1);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-main .skill-name-cell span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-type {
  flex: 0 0 auto;
  height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-fields {
  grid-area: fields;
  height: 24px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-field {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 8px;
  background: var(--ui-surface-2);
  color: var(--ui-ink-2);
  font-size: 11.5px;
  font-weight: 650;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-field-business { flex: 1 1 130px; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-field .field-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-field .field-label {
  color: var(--ui-ink-4);
  font-size: 10.5px;
  font-weight: 750;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-cell-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-metrics {
  grid-area: metrics;
  height: 22px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-metrics > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--ui-surface-3);
  color: var(--ui-ink-2);
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-metrics .metric-label {
  color: var(--ui-ink-4);
  font-size: 10.5px;
  font-weight: 750;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-metrics .metric-value {
  color: var(--ui-ink-1);
  font-size: 11.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-state {
  grid-area: state;
  justify-self: end;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-row.state-running { box-shadow: var(--ui-shadow-1), inset 3px 0 0 #2563eb; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-row.state-done { box-shadow: var(--ui-shadow-1), inset 3px 0 0 #10b981; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-row.state-queued { box-shadow: var(--ui-shadow-1), inset 3px 0 0 #94a3b8; }
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .call-row.state-failed { box-shadow: var(--ui-shadow-1), inset 3px 0 0 #ef4444; }

/* 底部统计：四等分网格，永不横向溢出，且不可被压缩 */
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-summary {
  flex: 0 0 auto;
  min-height: 32px;
  height: auto;
  padding: 0;
  overflow: visible;
}
.cyberclaw-light .right .skill-resource-panel:not(:fullscreen) .skill-summary .skill-stat-list {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, .86fr) minmax(0, 1.62fr) minmax(0, .86fr) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  overflow: visible !important;
}
.cyberclaw-light .right .skill-resource-panel .skill-summary .skill-stat-list > i { display: none !important; }
.cyberclaw-light .right .skill-resource-panel .skill-summary .skill-stat-list > span {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px !important;
  padding: 0 4px !important;
  border: 1px solid var(--ui-line-soft);
  border-radius: 10px;
  background: var(--ui-surface-2);
  color: var(--ui-ink-3);
  font-size: 10.5px !important;
  font-weight: 650;
  white-space: nowrap !important;
  text-align: center;
  line-height: 1.2;
}
.cyberclaw-light .right .skill-resource-panel .skill-summary .skill-stat-list > span b {
  order: -1;
  font-size: 16px !important;
  font-weight: 800;
  color: var(--ui-ink-1);
}
.cyberclaw-light .right .skill-resource-panel .skill-summary .skill-stat-list .summary-dot { margin-right: 4px; }

/* ------------------------------------------------------ 11. 信息空间（右栏） */
.cyberclaw-light .right .rag-panel .info-space-title { justify-content: flex-start; gap: 9px; }
/* 标题行右侧空间让给分类页签（与下方“智能体空间”同一套布局）：
   装饰性 “•••” 无任何交互绑定，隐藏以腾出位置；如需恢复删掉这行即可 */
.cyberclaw-light .right .rag-panel .space-more { display: none; }
.cyberclaw-light .right .rag-panel { position: relative; }

.cyberclaw-light .right .rag-panel .space-tabbar,
.cyberclaw-light .right .agent-space-module .agent-tabbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 11px;
  background: var(--ui-surface-3);
}
.cyberclaw-light .right .rag-panel .space-tab,
.cyberclaw-light .right .agent-space-module .space-tab {
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-ink-3);
  font-size: 12px;
  font-weight: 700;
}
.cyberclaw-light .right .rag-panel .space-tab:hover,
.cyberclaw-light .right .agent-space-module .space-tab:hover { color: #1d4ed8; background: rgba(255, 255, 255, .72); }
.cyberclaw-light .right .rag-panel .space-tab.active,
.cyberclaw-light .right .agent-space-module .space-tab.active {
  color: #1d4ed8;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 38, 73, .14);
}
.cyberclaw-light .right .rag-panel .space-tab.active:after,
.cyberclaw-light .right .rag-panel .space-tab:last-child:after { display: none !important; }

/* 主体单行网格：页签已并入标题行、“查看全部记录”已移除，
   释放出的整块高度全部交给观测/知识列表 */
.cyberclaw-light .right .rag-panel .info-space-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 10px var(--ui-pad) var(--ui-pad);
}
 /* 与智能体空间页签同尺寸、同位置：top 6 / right 12 / 高 32 / 宽 182 */
.cyberclaw-light .right .rag-panel .info-space-body .space-tabbar {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 182px;
  height: 32px;
  z-index: 3;
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 auto;
}
.cyberclaw-light .right .rag-panel .info-space-body .space-pane {
  grid-column: 1;
  grid-row: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cyberclaw-light .right .rag-panel .info-space-body .observe-stats {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 9px;
  border-bottom: 1px solid var(--ui-line-soft);
  background: var(--ui-surface-2);
  color: var(--ui-ink-3);
  font-size: 11.5px;
  font-weight: 650;
}
.cyberclaw-light .right .rag-panel .info-space-body .observe-stats b {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 7px;
  background: var(--ui-accent-soft);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}
.cyberclaw-light .right .rag-panel .info-space-body .observe-list,
.cyberclaw-light .right .rag-panel .info-space-body .rag-list {
  /* robot-live.js 会写内联 flex/height（单条高度锁定），必须用 !important 覆盖 */
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px;
  background: #fbfdff;
  border: 1px solid var(--ui-line-soft);
  border-radius: 11px;
  overflow: auto;
}
/* “查看全部记录”按钮已按需求移除，相关样式一并清理 */

/* 观测记录：时间胶囊 + 正文 */
.cyberclaw-light .right .info-space-body .observe-list .obs-row.timeline-row {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center;
  min-height: 38px;
  margin-bottom: 5px;
  padding: 5px 9px !important;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: #ffffff;
  box-shadow: var(--ui-shadow-1);
}
.cyberclaw-light .right .info-space-body .observe-list .obs-row.timeline-row:last-child { margin-bottom: 0; }
.cyberclaw-light .right .info-space-body .observe-list .obs-row.timeline-row .obs-marker { display: none; }
.cyberclaw-light .right .info-space-body .observe-list .obs-time {
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 3px 7px;
  border: 1px solid #e3ecf9;
  border-radius: 7px;
  background: var(--ui-surface-3);
  color: #41597d;
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.cyberclaw-light .right .info-space-body .observe-list .obs-row.timeline-row b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
  color: var(--ui-ink-2);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
}
.cyberclaw-light .empty-note {
  padding: 22px 12px;
  color: var(--ui-ink-4);
  font-size: 12px;
  text-align: center;
}

/* ---------------------------------------------------- 12. 智能体空间（右下） */
/* 页签并入标题栏右侧：省下一整行高度，把空间还给设备卡片与上方主区 */
.cyberclaw-light .agent-space-module { position: relative; }
.cyberclaw-light .agent-space-body { display: grid; grid-template-rows: minmax(0, 1fr); gap: 0; padding: var(--ui-pad); background: #fbfdff; }
.cyberclaw-light .agent-space-module .agent-tabbar {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 182px;
  height: 32px;
  z-index: 3;
  padding: 3px;
  border-radius: 10px;
}
.cyberclaw-light .agent-space-module .agent-tabbar .space-tab { height: 26px; font-size: 11.5px; font-weight: 700; }
.cyberclaw-light .agent-space-module .agent-pane {
  overflow: auto;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: #ffffff;
}
/* 卡片高度由内容决定，脚本据此把面板精确收敛为“恰好一张卡” */
/* 内边距放在 .agent-pane 上：脚本按 pane 的 padding 计算“恰好一张卡”的面板高度 */
.cyberclaw-light .agent-space-module .agent-pane { padding: 8px; }
.cyberclaw-light .agent-space-module .entity-card-grid {
  grid-auto-rows: minmax(152px, auto) !important;
  align-content: start;
  gap: 8px;
  padding: 0;
}
/* 卡片两行网格：第一行「名称 | 连接视频入口 | 状态标签」，第二行指标；
   底部（ID + 更新时间）区域已按需求整体移除 */
.cyberclaw-light .agent-space-module .entity-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: minmax(26px, auto) auto;
  grid-template-areas:
    "name cta state"
    "metrics metrics metrics";
  align-items: center;
  min-height: 152px;
  height: auto;
  gap: 6px 8px;
  padding: 8px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #f7fbff);
  box-shadow: var(--ui-shadow-1);
}
.cyberclaw-light .agent-space-module .entity-card:hover { border-color: #cfe0f6; box-shadow: 0 14px 30px -22px rgba(16, 38, 73, .6); }
/* .entity-card-top 只作语义容器：display:contents 后，名称与状态并入卡片网格，
   连接视频入口才能插到状态标签左侧（不动 DOM 顺序） */
.cyberclaw-light .agent-space-module .entity-card-top { display: contents; }
.cyberclaw-light .agent-space-module .entity-card-name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cyberclaw-light .agent-space-module .entity-type-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; }
.cyberclaw-light .agent-space-module .entity-card-name b { font-size: 13.5px; font-weight: 800; color: var(--ui-ink-1); }
.cyberclaw-light .agent-space-module .entity-live-tag { height: 19px; padding: 0 7px; border-radius: 999px; font-size: 10px; }
.cyberclaw-light .agent-space-module .entity-card-state {
  height: 24px;
  padding: 0 10px;
  gap: 6px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 999px;
  background: var(--ui-surface-2);
  color: var(--ui-ink-2);
  font-size: 11px;
  font-weight: 750;
}
.cyberclaw-light .agent-space-module .entity-metrics { gap: 6px; }
.cyberclaw-light .agent-space-module .entity-metric {
  min-height: 40px;
  gap: 3px;
  padding: 5px 8px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 10px;
  background: var(--ui-surface-2);
}
.cyberclaw-light .agent-space-module .entity-metric-label,
.cyberclaw-light .agent-space-module .entity-card-label { color: var(--ui-ink-4); font-size: 10.5px; font-weight: 750; letter-spacing: .02em; }
.cyberclaw-light .agent-space-module .entity-metric b { color: var(--ui-ink-1); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cyberclaw-light .agent-space-module .entity-metric b small { font-size: 10.5px; font-weight: 650; color: var(--ui-ink-3); }
.cyberclaw-light .agent-space-module .entity-meter-track { height: 5px; border-radius: 999px; background: #e5edf8; overflow: hidden; }
.cyberclaw-light .agent-space-module .entity-metrics { grid-area: metrics; }
.cyberclaw-light .agent-space-module .entity-card-state { grid-area: state; justify-self: end; }
/* 连接视频入口：位于“离线”标签左侧，与状态标签同高 */
.cyberclaw-light .agent-space-module .entity-connect-btn {
  grid-area: cta;
  justify-self: end;
  align-self: center;
  width: auto;
  height: 24px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #cfe0f6;
  border-radius: 8px;
  background: var(--ui-surface-2);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cyberclaw-light .agent-space-module .entity-connect-btn:hover {
  border-color: #9cc0ee;
  background: var(--ui-accent-soft);
  color: #1740b5;
}

.cyberclaw-light .agent-space-module .digital-agent-list { gap: 8px; padding: 8px; background: #fbfdff; }
.cyberclaw-light .agent-space-module .digital-agent-card {
  padding: 9px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: linear-gradient(160deg, #ffffff, #f6f9ff);
  box-shadow: var(--ui-shadow-1);
}

/* --------------------------------------------------------- 13. 底部状态栏 */
.cyberclaw-light .foot {
  height: 36px;
  gap: 10px;
  padding: 0 16px;
  border-top: 1px solid var(--ui-line);
  background: rgba(255, 255, 255, .9);
  color: var(--ui-ink-3);
  font-size: 12px;
  backdrop-filter: blur(12px);
}
.cyberclaw-light .foot > div {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 999px;
  background: var(--ui-surface-2);
}
.cyberclaw-light .foot b { color: var(--ui-ink-1); font-weight: 750; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- 14. 响应式适配 */
/* 常规桌面：两侧栏略收，中间视频区优先扩张 */
@media (max-width: 1560px) {
  .main.cockpit {
    --rail-l: clamp(286px, 19vw, 330px);
    --rail-c: clamp(340px, min(36vw, calc((100vh - 520px) * 1.3333 + 30px)), 1100px);
    --ui-gap: 9px;
    --ui-pad: 11px;
  }
}

/* 紧凑桌面（与脚本 compact 阈值一致）：密度提升一档 */
@media (max-width: 1360px), (max-height: 760px) {
  .main.cockpit {
    --rail-l: clamp(270px, 20vw, 304px);
    --rail-c: clamp(300px, min(34vw, calc((100vh - 520px) * 1.3333 + 30px)), 900px);
    --ui-gap: 8px;
    --ui-pad: 10px;
  }
  .cyberclaw-light .top { height: 52px; }
  .cyberclaw-light .title,
  .cyberclaw-light .physical-module-title,
  .cyberclaw-light .video-title { height: 40px; }
  .cyberclaw-light .workspace-nav { width: 190px; flex-basis: 190px; padding: 12px 8px; }
  .cyberclaw-light .workspace-nav.collapsed { width: 58px; flex: 0 0 58px; padding: 12px 7px; }
  .cyberclaw-light .workspace-link { min-height: 38px; font-size: 12.5px; }
  .cyberclaw-light .right { grid-template-rows: min-content minmax(156px, 1fr); }
  .cyberclaw-light .foot { height: 32px; font-size: 11.5px; }
  .cyberclaw-light .agent-space-module .entity-card { min-height: 0; }
}

/* 极窄 / 极矮：进一步压缩装饰，保证信息完整可见 */
@media (max-width: 1240px), (max-height: 700px) {
  .main.cockpit {
    --rail-l: 264px;
    --rail-c: clamp(280px, calc((100vh - 520px) * 1.3333 + 30px), 700px);
    --ui-gap: 7px;
    --ui-pad: 9px;
  }
  .cyberclaw-light .brand { font-size: 15px; }
  .cyberclaw-light .workspace-nav.collapsed { width: 54px; flex: 0 0 54px; padding: 10px 5px; }
  .cyberclaw-light .header-agent-picker,
  .cyberclaw-light .header-context-picker { min-width: 0; padding: 0 6px 0 9px; }
  .cyberclaw-light .agent-space-module .entity-card-name b { font-size: 12.5px; }
  .cyberclaw-light .agent-space-module .entity-metric b { font-size: 13px; }
  .cyberclaw-light .title { font-size: 12.5px; }
}

/* 高分辨率大屏：左侧栏保持阅读宽度，中栏贴合 4:3 画布，右栏吸收全部富余空间 */
@media (min-width: 1800px) {
  .main.cockpit {
    --rail-l: 348px;
    --rail-c: clamp(560px, calc((100vh - 520px) * 1.3333 + 30px), 1300px);
    --ui-gap: 12px;
    --ui-pad: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cyberclaw-light .panel,
  .cyberclaw-light .left-rail { transition: none; }
}