dsh-codegraph-visualizer 0.3.0 → 0.3.1

package/dist/client/index.css

@@ -2385,6 +2385,65 @@ body[data-ds-dark-theme] .cg-type-badge.cg-function {
   color: var(--cg-success);
   text-align: center;
 }
+
+/* ---- Batch action bar (cycle-149 多选链路消费面) -------------------------- */
+/*
+ * 悬浮在画布底部、状态栏上方的批量操作条。仅在 `multiSelectedIds.size > 0` 时由
+ * BatchActionBar 渲染；空选区返回 null，因此这里无需 hidden 态样式。
+ * 定位锚定 `.cg-panel`（position: absolute + z-index: var(--cg-z-panel)），
+ * 与 health-score-card 等面板级浮层同层——不遮 ContextMenu（z-context-menu 更高）。
+ */
+
+.cg-batch-bar {
+  position: absolute;
+  bottom: 44px; /* 状态栏上方（状态栏高度 ≈ 32px + 间距） */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--cg-radius-sm);
+  border: 1px solid var(--cg-border-strong);
+  background: var(--cg-surface);
+  box-shadow: var(--cg-shadow-lg);
+  z-index: var(--cg-z-panel);
+  max-width: calc(100% - 32px);
+}
+
+.cg-batch-bar-count {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--cg-accent);
+  white-space: nowrap;
+}
+
+.cg-batch-bar-btn {
+  padding: 4px 10px;
+  border-radius: var(--cg-radius-xs);
+  border: 1px solid var(--cg-border-strong);
+  background: var(--cg-surface);
+  color: var(--cg-text);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--cg-transition), border-color var(--cg-transition);
+}
+
+.cg-batch-bar-btn:hover {
+  background: var(--cg-surface-hover);
+}
+
+.cg-batch-bar-btn:focus-visible {
+  outline: 2px solid var(--cg-accent);
+  outline-offset: 1px;
+}
+
+/* 清除按钮的破坏性语义：hover 提示「这会丢掉选区」，但不用 error 底色（非错误态）。 */
+.cg-batch-bar-btn-clear:hover {
+  border-color: var(--cg-error);
+  color: var(--cg-error);
+}
 
 /* ---- Graph container ----------------------------------------------------- */
 
@@ -6129,993 +6188,1050 @@ button.cg-legend-row.cg-legend-toggle:hover {
   opacity: 0.4;
   cursor: not-allowed;
 }
-/* ---- Responsive ---------------------------------------------------------- */
-
-/* Extra-narrow panels (DSH sidebar tab minimal width).
- * Hide the remaining toolbar extras to prioritize graph canvas.
- * The center group is already gone at the 600px tier below. */
-@container graphpanel (max-width: 380px) {
-  .cg-tour-btn,
-  .cg-minimap-btn,
-  .cg-legend-btn {
-    display: none;
-  }
-
-  /* The separators are siblings of the `.cg-toolbar-group` elements, not descendants,
-     so the previous `.cg-toolbar-group ... .cg-toolbar-separator` selector never
-     matched anything. */
-  .cg-toolbar-separator {
-    display: none;
-  }
-}
-
-/* Small panels (DSH sidebar tab, narrow bottom panel).
- * Container queries respond to the PANEL width, not the viewport — the plugin
- * renders inside DSH panels whose width is unrelated to the window size. */
-@container graphpanel (max-width: 480px) {
-  .cg-graph-panel {
-    border-radius: var(--cg-radius-sm);
-  }
-
-  .cg-graph-toolbar {
-    padding: 0 8px;
-    gap: 4px;
-  }
-
-  .cg-toolbar-left {
-    font-size: 11px;
-  }
-
-  .cg-toolbar-center {
-    gap: 4px;
-  }
-
-  .cg-toolbar-right {
-    gap: 4px;
-  }
-
-  .cg-layout-btn,
-  .cg-graph-type-btn,
-  .cg-rank-dir-btn {
-    padding: 3px 6px;
-    font-size: 10px;
-  }
-
-  .cg-search-btn,
-  .cg-theme-btn,
-  .cg-export-btn,
-  .cg-collapse-btn,
-  .cg-chain-btn,
-  .cg-cycle-btn,
-  .cg-impact-btn,
-  .cg-inheritance-btn,
-  .cg-minimap-btn,
-  .cg-refresh-btn,
-  .cg-undo-btn,
-  .cg-redo-btn,
-  .cg-import-btn,
-  .cg-legend-btn,
-  .cg-lang-btn,
-  .cg-pathfind-btn,
-  .cg-health-btn,
-  .cg-rules-btn,
-  .cg-hotspot-btn,
-  .cg-godmodule-btn,
-  .cg-corefunction-btn,
-  .cg-analysis-dropdown-btn,
-  .cg-quality-dropdown-btn,
-  .cg-tour-btn {
-    width: 26px;
-    height: 26px;
-    font-size: 12px;
-  }
-
-  .cg-dropdown-content {
-    min-width: 140px;
-  }
-
-  .cg-node-detail-panel {
-    width: calc(100% - 24px);
-    left: 12px;
-    top: 12px;
-  }
-
-  .cg-legend-panel {
-    width: 140px;
-  }
-
-  .cg-mini-map {
-    width: 140px;
-  }
-
-  .cg-type-badge {
-    display: none;
-  }
-
-  .cg-toolbar-separator {
-    display: none;
-  }
-
-  .cg-graph-type-buttons {
-    display: none;
-  }
-
-  .cg-view-mode-buttons {
-    gap: 1px;
-  }
-
-  .cg-view-mode-btn {
-    padding: 2px 4px;
-    font-size: 9px;
-  }
-
-  .cg-search-panel,
-  .cg-path-panel {
-    width: calc(100% - 16px);
-    max-width: 320px;
-  }
-
-  .cg-filter-panel {
-    width: calc(100% - 16px);
-  }
-
-  .cg-heatmap-btn--activate,
-  .cg-heatmap-btn--deactivate {
-    width: 26px;
-    height: 26px;
-    font-size: 12px;
-  }
-
-}
-
-/* Medium panels (DSH sidebar medium width) */
-@container graphpanel (max-width: 768px) {
-  .cg-graph-toolbar {
-    padding: 0 8px;
-    gap: 6px;
-  }
-
-  .cg-toolbar-center {
-    gap: 6px;
-  }
-
-  .cg-toolbar-right {
-    gap: 6px;
-  }
-
-  .cg-layout-btn,
-  .cg-graph-type-btn {
-    padding: 3px 8px;
-    font-size: 11px;
-  }
-
-  .cg-node-detail-panel {
-    width: 220px;
-  }
-
-  .cg-legend-panel {
-    width: 160px;
-  }
-
-  .cg-mini-map {
-    width: 160px;
-  }
-
-  .cg-filter-select {
-    font-size: 11px;
-  }
-
-  .cg-toolbar-separator {
-    margin: 0 2px;
-  }
-
-  .cg-tour-btn {
-    display: none;
-  }
-
-}
-
-/* Medium-narrow panels — hide tour and reduce analysis button clutter */
-@container graphpanel (max-width: 600px) {
-  .cg-tour-btn,
-  .cg-minimap-btn {
-    display: none;
-  }
-
-  .cg-toolbar-left .cg-type-badge {
-    display: none;
-  }
-
-  /* The center group (layout / view-mode / level) is the widest fixed-width block in the
-     toolbar: 150px for its three icon-only triggers, measured on the real host. At a 520px
-     panel it was being squeezed to 115px, which wrapped the level trigger onto two lines
-     and clipped it; at 600px it still has 45px of slack. Hiding it here instead of letting
-     it be crushed keeps the workspace chip and every right-hand control (export / more /
-     collapse) reachable. Of the three controls, only the layout keeps an alternative entry
-     point (Ctrl+L cycles it, see `usePanelKeyboard`); view mode and hierarchy level lose
-     their mouse entry below this tier — see the note in `docs/需求分析.md` §28.3. */
-  .cg-toolbar-center {
-    display: none;
-  }
-}
-
-/* Very small panels */
-@container graphpanel (max-width: 320px) {
-  .cg-graph-toolbar {
-    gap: 2px;
-    flex-wrap: wrap;
-    padding: 4px 4px;
-  }
-
-  .cg-toolbar-left,
-  .cg-toolbar-center,
-  .cg-toolbar-right {
-    flex-wrap: wrap;
-    gap: 2px;
-  }
-
-  .cg-layout-buttons,
-  .cg-graph-type-buttons {
-    padding: 1px;
-  }
-
-  .cg-layout-btn,
-  .cg-graph-type-btn {
-    padding: 2px 4px;
-    font-size: 9px;
-  }
-
-  .cg-filter-select {
-    padding: 3px 20px 3px 6px;
-    font-size: 10px;
-  }
-
-  .cg-node-count {
-    font-size: 10px;
-  }
-
-  .cg-legend-panel,
-  .cg-mini-map {
-    width: 120px;
-  }
-
-  /* 下拉内容已 portal 到 document.body，不再是本容器的后代，此处的
-   * `@container` 抽屉规则永远匹配不到；抽屉形态改由 Dropdown 组件测量面板
-   * 宽度后加 `.cg-portal-drawer`（见 layout.css）实现。 */
-
-  .cg-search-panel,
-  .cg-path-panel,
-  .cg-filter-panel {
-    width: calc(100% - 8px);
-    left: 4px;
-    right: 4px;
-  }
-
-  .cg-view-mode-buttons {
-    flex-wrap: wrap;
-  }
-}
-
-/* Large screens — allow fixed floating panel */
-@media (min-width: 1200px) {
-  .cg-graph-panel.cg-floating {
-    position: fixed;
-    right: 16px;
-    bottom: 16px;
-    width: 640px;
-    height: 520px;
-  }
-}
-
-/* ---- Sidebar tab mode (short height) -------------------------------------- */
-/* When the plugin renders inside a DSH sidebar tab, the panel height can be
- * very limited. Adapt the layout to prioritize the graph canvas. */
-@container graphpanel (max-height: 400px) {
-  .cg-graph-toolbar {
-    padding: 0 4px;
-    gap: 2px;
-  }
-
-  .cg-toolbar-left .cg-node-count {
-    font-size: 10px;
-  }
-
-  .cg-type-badge {
-    display: none;
-  }
-
-  .cg-toolbar-separator {
-    display: none;
-  }
-
-  .cg-graph-type-buttons {
-    display: none;
-  }
-
-  .cg-view-mode-buttons {
-    gap: 1px;
-  }
-
-  .cg-view-mode-btn {
-    padding: 2px 4px;
-    font-size: 9px;
-  }
-
-  .cg-node-detail-panel {
-    max-height: calc(100% - 60px);
-    overflow-y: auto;
-  }
-
-  .cg-legend-panel {
-    max-height: 120px;
-    overflow-y: auto;
-  }
-
-  .cg-mini-map {
-    max-height: 100px;
-  }
-
-  .cg-search-panel,
-  .cg-path-panel,
-  .cg-filter-panel {
-    max-height: calc(100% - 60px);
-    overflow-y: auto;
-  }
-}
-
-@container graphpanel (max-height: 240px) {
-  .cg-graph-toolbar {
-    flex-wrap: wrap;
-    padding: 2px;
-  }
-
-  .cg-toolbar-left,
-  .cg-toolbar-center,
-  .cg-toolbar-right {
-    flex-wrap: wrap;
-    gap: 2px;
-  }
-
-  .cg-layout-buttons {
-    display: none;
-  }
-
-  .cg-rank-dir-buttons {
-    display: none;
-  }
-
-  .cg-cluster-depth-buttons {
-    display: none;
-  }
-
-  .cg-node-detail-panel {
-    width: calc(100% - 8px);
-    left: 4px;
-    top: 4px;
-    max-height: calc(100% - 40px);
-  }
-}
-
-/* ---- Reduced motion ------------------------------------------------------ */
-
-@media (prefers-reduced-motion: reduce) {
-  .cg-graph-panel *,
-  .cg-graph-panel *::before,
-  .cg-graph-panel *::after,
-  .cg-floating-panel *,
-  .cg-floating-panel *::before,
-  .cg-floating-panel *::after,
-  .cg-floating-container *,
-  .cg-floating-container *::before,
-  .cg-floating-container *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* ---- Touch device adaptation --------------------------------------------- */
-
-@media (pointer: coarse) {
-  .cg-layout-btn,
-  .cg-graph-type-btn,
-  .cg-search-btn,
-  .cg-theme-btn,
-  .cg-export-btn,
-  .cg-collapse-btn,
-  .cg-chain-btn,
-  .cg-cycle-btn,
-  .cg-impact-btn,
-  .cg-inheritance-btn,
-  .cg-minimap-btn,
-  .cg-refresh-btn,
-  .cg-undo-btn,
-  .cg-redo-btn,
-  .cg-import-btn,
-  .cg-legend-btn,
-  .cg-lang-btn,
-  .cg-pathfind-btn,
-  .cg-health-btn,
-  .cg-rules-btn,
-  .cg-hotspot-btn,
-  .cg-godmodule-btn,
-  .cg-corefunction-btn,
-  .cg-analysis-dropdown-btn,
-  .cg-quality-dropdown-btn,
-  .cg-tour-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-
-  .cg-node-detail-panel .cg-close-btn,
-  .cg-legend-close,
-  .cg-import-close,
-  .cg-close-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-}
-/* ---- Responsive for new components ---------------------------------------- */
-
-@container graphpanel (max-width: 480px) {
-  .cg-path-bar,
-  .cg-health-score-card,
-  .cg-rule-panel {
-    width: calc(100% - 24px);
-  }
-
-  .cg-analysis-panel {
-    width: calc(100% - 24px);
-  }
-
-  .cg-focus-label {
-    max-width: 120px;
-  }
-}
-
-@container graphpanel (max-width: 768px) {
-  .cg-path-bar {
-    width: 240px;
-  }
-
-  .cg-health-score-card {
-    width: 220px;
-  }
-
-  .cg-rule-panel {
-    width: 240px;
-  }
-
-  .cg-analysis-panel {
-    width: 200px;
-  }
-}
-/* ---- Container Queries fallback ------------------------------------------- */
-@supports not (container-type: inline-size) {
-  @media (max-width: 380px) {
-    .cg-tour-btn,
-    .cg-minimap-btn,
-    .cg-legend-btn {
-      display: none;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .cg-graph-panel {
-      border-radius: var(--cg-radius-sm);
-    }
-    .cg-graph-toolbar {
-      padding: 0 8px;
-      gap: 4px;
-    }
-    .cg-toolbar-left {
-      font-size: 11px;
-    }
-    .cg-toolbar-center {
-      gap: 4px;
-    }
-    .cg-toolbar-right {
-      gap: 4px;
-    }
-    .cg-layout-btn,
-    .cg-graph-type-btn,
-    .cg-rank-dir-btn {
-      padding: 3px 6px;
-      font-size: 10px;
-    }
-    .cg-search-btn,
-    .cg-theme-btn,
-    .cg-export-btn,
-    .cg-collapse-btn,
-    .cg-chain-btn,
-    .cg-cycle-btn,
-    .cg-impact-btn,
-    .cg-inheritance-btn,
-    .cg-minimap-btn,
-    .cg-refresh-btn,
-
-    .cg-undo-btn,
-    .cg-redo-btn,
-    .cg-import-btn,
-    .cg-legend-btn,
-    .cg-lang-btn,
-    .cg-pathfind-btn,
-    .cg-health-btn,
-    .cg-rules-btn,
-    .cg-hotspot-btn,
-    .cg-godmodule-btn,
-    .cg-corefunction-btn,
-    .cg-analysis-dropdown-btn,
-    .cg-quality-dropdown-btn,
-    .cg-tour-btn {
-      width: 26px;
-      height: 26px;
-      font-size: 12px;
-    }
-    .cg-node-detail-panel {
-      width: calc(100% - 24px);
-      left: 12px;
-      top: 12px;
-    }
-    .cg-legend-panel {
-      width: 140px;
-    }
-    .cg-mini-map {
-      width: 140px;
-    }
-    .cg-type-badge {
-      display: none;
-    }
-    .cg-toolbar-separator {
-      display: none;
-    }
-    .cg-graph-type-buttons {
-      display: none;
-    }
-    .cg-dropdown-content {
-      min-width: 140px;
-    }
-    .cg-view-mode-buttons {
-      gap: 1px;
-    }
-    .cg-view-mode-btn {
-      padding: 2px 4px;
-      font-size: 9px;
-    }
-    .cg-search-panel,
-    .cg-path-panel {
-      width: calc(100% - 16px);
-      max-width: 320px;
-    }
-    .cg-filter-panel {
-      width: calc(100% - 16px);
-    }
-    .cg-heatmap-btn--activate,
-    .cg-heatmap-btn--deactivate {
-      width: 26px;
-      height: 26px;
-      font-size: 12px;
-    }
-    .cg-path-bar,
-    .cg-health-score-card,
-    .cg-rule-panel {
-      width: calc(100% - 24px);
-    }
-    .cg-analysis-panel {
-      width: calc(100% - 24px);
-    }
-    .cg-focus-label {
-      max-width: 120px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .cg-graph-toolbar {
-      padding: 0 8px;
-      gap: 6px;
-    }
-    .cg-toolbar-center {
-      gap: 6px;
-    }
-    .cg-toolbar-right {
-      gap: 6px;
-    }
-    .cg-layout-btn,
-    .cg-graph-type-btn {
-      padding: 3px 8px;
-      font-size: 11px;
-    }
-    .cg-node-detail-panel {
-      width: 220px;
-    }
-    .cg-legend-panel {
-      width: 160px;
-    }
-    .cg-mini-map {
-      width: 160px;
-    }
-    .cg-filter-select {
-      font-size: 11px;
-    }
-    .cg-toolbar-separator {
-      margin: 0 2px;
-    }
-    .cg-tour-btn {
-      display: none;
-    }
-    .cg-path-bar {
-      width: 240px;
-    }
-    .cg-health-score-card {
-      width: 220px;
-    }
-    .cg-rule-panel {
-      width: 240px;
-    }
-    .cg-analysis-panel {
-      width: 200px;
-    }
-  }
-
-  @media (max-width: 600px) {
-    .cg-tour-btn,
-    .cg-minimap-btn {
-      display: none;
-    }
-    .cg-toolbar-left .cg-type-badge {
-      display: none;
-    }
-    /* Mirrors the 600px container tier: the center group needs 150px for its three
-       icon-only triggers and gets crushed below that. */
-    .cg-toolbar-center {
-      display: none;
-    }
-  }
-
-  @media (max-width: 320px) {
-    .cg-graph-toolbar {
-      gap: 2px;
-      flex-wrap: wrap;
-      padding: 4px 4px;
-    }
-    .cg-toolbar-left,
-    .cg-toolbar-center,
-    .cg-toolbar-right {
-      flex-wrap: wrap;
-      gap: 2px;
-    }
-    .cg-layout-buttons,
-    .cg-graph-type-buttons {
-      padding: 1px;
-    }
-    .cg-layout-btn,
-    .cg-graph-type-btn {
-      padding: 2px 4px;
-      font-size: 9px;
-    }
-    .cg-filter-select {
-      padding: 3px 20px 3px 6px;
-      font-size: 10px;
-    }
-    .cg-node-count {
-      font-size: 10px;
-    }
-    .cg-legend-panel,
-    .cg-mini-map {
-      width: 120px;
-    }
-    /* 同上：portal 到 body 后这里也匹配不到，抽屉由 `.cg-portal-drawer` 接管。 */
-    .cg-search-panel,
-    .cg-path-panel,
-    .cg-filter-panel {
-      width: calc(100% - 8px);
-      left: 4px;
-      right: 4px;
-    }
-    .cg-view-mode-buttons {
-      flex-wrap: wrap;
-    }
-  }
-
-  @media (max-height: 400px) {
-    .cg-graph-toolbar {
-      padding: 0 4px;
-      gap: 2px;
-    }
-    .cg-toolbar-left .cg-node-count {
-      font-size: 10px;
-    }
-    .cg-type-badge {
-      display: none;
-    }
-    .cg-toolbar-separator {
-      display: none;
-    }
-    .cg-graph-type-buttons {
-      display: none;
-    }
-    .cg-view-mode-buttons {
-      gap: 1px;
-    }
-    .cg-view-mode-btn {
-      padding: 2px 4px;
-      font-size: 9px;
-    }
-    .cg-node-detail-panel {
-      max-height: calc(100% - 60px);
-      overflow-y: auto;
-    }
-    .cg-legend-panel {
-      max-height: 120px;
-      overflow-y: auto;
-    }
-    .cg-mini-map {
-      max-height: 100px;
-    }
-    .cg-search-panel,
-    .cg-path-panel,
-    .cg-filter-panel {
-      max-height: calc(100% - 60px);
-      overflow-y: auto;
-    }
-  }
-
-  @media (max-height: 240px) {
-    .cg-graph-toolbar {
-      flex-wrap: wrap;
-      padding: 2px;
-    }
-    .cg-toolbar-left,
-    .cg-toolbar-center,
-    .cg-toolbar-right {
-      flex-wrap: wrap;
-      gap: 2px;
-    }
-    .cg-layout-buttons {
-      display: none;
-    }
-    .cg-rank-dir-buttons {
-      display: none;
-    }
-    .cg-cluster-depth-buttons {
-      display: none;
-    }
-    .cg-node-detail-panel {
-      width: calc(100% - 8px);
-      left: 4px;
-      top: 4px;
-      max-height: calc(100% - 40px);
-    }
-  }
-}
-/* ---- Conversation View Integration Mode ----------------------------------- */
-
-/* When integrated into DSH's conversation.view slot, the panel fills the
- * conversation area. Toolbar is always visible; graph canvas fills remaining
- * space. The panel must not collapse or float — it's the primary view. */
-[data-cg-integration="conversation-view"] {
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-}
-
-[data-cg-integration="conversation-view"] .cg-graph-toolbar {
-  display: flex;
-  flex-shrink: 0;
-}
-
-[data-cg-integration="conversation-view"] .cg-graph-container {
-  flex: 1;
-  min-height: 0;
-}
-
-[data-cg-integration="conversation-view"] .cg-collapse-fab {
-  display: none;
-}
-
-[data-cg-integration="conversation-view"] .cg-status-bar {
-  flex-shrink: 0;
-}
-
-/* Conversation view integration (conversation.view slot) */
-.cg-conversation-view-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
-.cg-conversation-view-wrapper[data-cg-visible="false"] {
-  display: none;
-}
-
-/* Generic host container for host-managed embedded panels
- * (conversation.view / sidebar-right / better-sidebar). */
-.cg-integration-host {
-  display: block;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-}
-
-.cg-integration-host[data-cg-visible="false"] {
-  display: none;
-}
-
-
-/* In conversation-view mode, the panel should not have its own border/radius
- * since it's embedded in the DSH conversation area */
-[data-cg-integration="conversation-view"].cg-graph-panel:not(.cg-collapsed) {
-  border: none;
-  border-radius: 0;
-}
-/* ---- Sidebar Right Tab Integration Mode ----------------------------------- */
-
-/* When integrated into DSH's sidebar.right.pane.tab, the panel is in a
- * right sidebar tab. Width is typically 300-500px, height is full window. */
-[data-cg-integration="sidebar-right"] {
-  width: 100%;
-  height: 100%;
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-}
-
-[data-cg-integration="sidebar-right"] .cg-graph-toolbar {
-  display: flex;
-  flex-shrink: 0;
-}
-
-[data-cg-integration="sidebar-right"] .cg-graph-container {
-  flex: 1;
-  min-height: 0;
-}
-
-[data-cg-integration="sidebar-right"] .cg-collapse-fab {
-  display: none;
-}
-
-[data-cg-integration="sidebar-right"].cg-graph-panel:not(.cg-collapsed) {
-  border: none;
-  border-radius: 0;
-}
-
-/* ---- Better Sidebar Integration Mode -------------------------------------- */
-
-/* When integrated via betterSidebar API, the panel is in a sidebar tab.
- * Similar to sidebar-right but may have different container constraints. */
-[data-cg-integration="better-sidebar"] {
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-}
-
-[data-cg-integration="better-sidebar"] .cg-graph-toolbar {
-  display: flex;
-  flex-shrink: 0;
-}
-
-[data-cg-integration="better-sidebar"] .cg-graph-container {
-  flex: 1;
-  min-height: 0;
-}
-
-[data-cg-integration="better-sidebar"] .cg-collapse-fab {
-  display: none;
-}
-
-[data-cg-integration="better-sidebar"].cg-graph-panel:not(.cg-collapsed) {
-  border: none;
-  border-radius: 0;
-}
-
-/* ---- Remote narrow-screen carrier adaptation ------------------------------- */
-
-/* `@linxin666/dsh-remote-web-ui` is a real, widely-installed plugin, but it
- * exposes no panel/tab API at all — its client half only occupies the
- * `sidebar.footer.action` seat and writes DOM adaptation marks
- * (`lib/client.js:4155 ACTIVE_CLASS = "dsh-remote-portrait"`, added to
- * `document.body` at `:4368`). So the honest relationship is "detect it and let
- * the layout adapt", not "call its API". The former `remote-web-ui`
- * integration mode was a phantom (`ctx.get('remoteWebUI')` exists in no DSH
- * generation) and has been removed; these rules replace it.
- *
- * The toolbar must stay reachable on a phone-width carrier, so it is allowed to
- * wrap instead of overflowing. */
-body.dsh-remote-portrait .cg-graph-toolbar {
-  flex-wrap: wrap;
-  row-gap: 4px;
-}
-
-body.dsh-remote-portrait .cg-graph-panel:not(.cg-collapsed) {
-  border: none;
-  border-radius: 0;
-}
-
-/* Below 480px the toolbar's own compact breakpoint (see Toolbar.tsx) already
- * collapses secondary controls; the graph area just needs the remaining
- * height. */
-body.dsh-remote-portrait .cg-graph-container {
-  flex: 1;
-  min-height: 0;
-}
-
-/* ---- Toolbar always visible in non-floating modes -------------------------- */
-/* In all sidebar/slot integration modes, the toolbar must remain visible
- * even when there's no graph data. The toolbar is the primary interaction
- * surface and should not disappear.
- * Expressed as one rule over `[data-cg-integration]` (the attribute lives on
- * `.cg-graph-panel` itself, see GraphPanel.tsx) so every current and future
- * integration mode is covered. The `:not(.cg-collapsed)` guard is load-bearing:
- * without it this `!important` declaration outranks
- * `.cg-graph-panel.cg-collapsed .cg-graph-toolbar { display: none }` and the
- * toolbar keeps painting inside the 52px collapsed FAB. */
-.cg-graph-panel[data-cg-integration]:not(.cg-collapsed) .cg-graph-toolbar {
-  display: flex !important;
-}
-
-/* ---- Desktop vs Web distinction ------------------------------------------- */
-/* On desktop platforms, the panel may have more space. On web, it's
- * constrained by the browser window. */
-@media (min-width: 1024px) {
-  [data-cg-integration="conversation-view"] .cg-graph-toolbar {
-    padding: 0 12px;
-    gap: 8px;
-  }
-}
-
-/* ---- Narrow-tier sheets (cycle-110 / T3) ---------------------------------- */
-/*
- * 窄面板（≤480px）下的两处版式修正：
- *   1. 节点详情面板改为**底部抽屉**（贴边、限高），不再 `max-height: calc(100% - 24px)`
- *      从上往下盖住整个画布；
- *   2. 抽屉打开时小地图与图例**临时让位**，关闭后回归。
- *
- * 为什么两条都要：三者都是 `position: absolute` + `z-index: var(--cg-z-panel)` 的绝对定位
- * 元素，窄档下面板几乎占满高度，小地图（右下 200px）与图例（左下 180px）会被盖住一半，
- * 面板底部的按钮也会与图例重叠 —— 点击落在错误元素上，而所有 DOM 断言照旧通过。
- *
- * 两套机制**声明必须一致**：
- *   - `@container graphpanel (max-width: 480px)`：主机制，按面板宽度响应（与视口无关）；
- *   - `[data-cg-tier="narrow"]`：宿主不支持容器查询、或容器查询尺寸不可读时的兜底，
- *     由 `hooks/usePanelTier.ts` 实测宽度后写在根元素上。
- * `tests/unit/panelTierContract.test.ts` 会逐条比对这两处的声明，任一侧改动都会变红。
- */
-@container graphpanel (max-width: 480px) {
-  .cg-node-detail-panel {
-    top: auto;
-    bottom: calc(var(--cg-statusbar-h) + 8px);
-    left: 8px;
-    right: 8px;
-    width: auto;
-    max-height: 52%;
-  }
-
-  /* 抽屉打开 ⇒ 两个角落的叠加层让位（关闭后自动回归，不需要 JS 复位） */
-  .cg-graph-panel[data-cg-sheet="open"] .cg-mini-map,
-  .cg-graph-panel[data-cg-sheet="open"] .cg-legend-panel {
-    display: none;
-  }
-}
-
-/* 兜底机制（JS 实测档位）：与上面的容器查询分支**逐条等价** */
-.cg-graph-panel[data-cg-tier="narrow"] .cg-node-detail-panel {
-  top: auto;
-  bottom: calc(var(--cg-statusbar-h) + 8px);
-  left: 8px;
-  right: 8px;
-  width: auto;
-  max-height: 52%;
-}
-
-.cg-graph-panel[data-cg-tier="narrow"][data-cg-sheet="open"] .cg-mini-map,
-.cg-graph-panel[data-cg-tier="narrow"][data-cg-sheet="open"] .cg-legend-panel {
-  display: none;
-}
+/* ---- Responsive ---------------------------------------------------------- */
+
+/* Extra-narrow panels (DSH sidebar tab minimal width).
+ * Hide the remaining toolbar extras to prioritize graph canvas.
+ * The center group is already gone at the 600px tier below. */
+@container graphpanel (max-width: 380px) {
+  .cg-tour-btn,
+  .cg-minimap-btn,
+  .cg-legend-btn {
+    display: none;
+  }
+
+  /* The separators are siblings of the `.cg-toolbar-group` elements, not descendants,
+     so the previous `.cg-toolbar-group ... .cg-toolbar-separator` selector never
+     matched anything. */
+  .cg-toolbar-separator {
+    display: none;
+  }
+}
+
+/* Small panels (DSH sidebar tab, narrow bottom panel).
+ * Container queries respond to the PANEL width, not the viewport — the plugin
+ * renders inside DSH panels whose width is unrelated to the window size. */
+@container graphpanel (max-width: 480px) {
+  .cg-graph-panel {
+    border-radius: var(--cg-radius-sm);
+  }
+
+  .cg-graph-toolbar {
+    padding: 0 8px;
+    gap: 4px;
+  }
+
+  .cg-toolbar-left {
+    font-size: 11px;
+  }
+
+  .cg-toolbar-center {
+    gap: 4px;
+  }
+
+  .cg-toolbar-right {
+    gap: 4px;
+  }
+
+  .cg-layout-btn,
+  .cg-graph-type-btn,
+  .cg-rank-dir-btn {
+    padding: 3px 6px;
+    font-size: 10px;
+  }
+
+  .cg-search-btn,
+  .cg-theme-btn,
+  .cg-export-btn,
+  .cg-collapse-btn,
+  .cg-chain-btn,
+  .cg-cycle-btn,
+  .cg-impact-btn,
+  .cg-inheritance-btn,
+  .cg-minimap-btn,
+  .cg-refresh-btn,
+  .cg-undo-btn,
+  .cg-redo-btn,
+  .cg-import-btn,
+  .cg-legend-btn,
+  .cg-lang-btn,
+  .cg-pathfind-btn,
+  .cg-health-btn,
+  .cg-rules-btn,
+  .cg-hotspot-btn,
+  .cg-godmodule-btn,
+  .cg-corefunction-btn,
+  .cg-analysis-dropdown-btn,
+  .cg-quality-dropdown-btn,
+  .cg-tour-btn {
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
+
+  .cg-dropdown-content {
+    min-width: 140px;
+  }
+
+  .cg-node-detail-panel {
+    width: calc(100% - 24px);
+    left: 12px;
+    top: 12px;
+  }
+
+  .cg-legend-panel {
+    width: 140px;
+  }
+
+  .cg-mini-map {
+    width: 140px;
+  }
+
+  .cg-type-badge {
+    display: none;
+  }
+
+  .cg-toolbar-separator {
+    display: none;
+  }
+
+  .cg-graph-type-buttons {
+    display: none;
+  }
+
+  .cg-view-mode-buttons {
+    gap: 1px;
+  }
+
+  .cg-view-mode-btn {
+    padding: 2px 4px;
+    font-size: 9px;
+  }
+
+  .cg-search-panel,
+  .cg-path-panel {
+    width: calc(100% - 16px);
+    max-width: 320px;
+  }
+
+  .cg-filter-panel {
+    width: calc(100% - 16px);
+  }
+
+  .cg-heatmap-btn--activate,
+  .cg-heatmap-btn--deactivate {
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
+
+}
+
+/* Medium panels (DSH sidebar medium width) */
+@container graphpanel (max-width: 768px) {
+  .cg-graph-toolbar {
+    padding: 0 8px;
+    gap: 6px;
+  }
+
+  .cg-toolbar-center {
+    gap: 6px;
+  }
+
+  .cg-toolbar-right {
+    gap: 6px;
+  }
+
+  .cg-layout-btn,
+  .cg-graph-type-btn {
+    padding: 3px 8px;
+    font-size: 11px;
+  }
+
+  .cg-node-detail-panel {
+    width: 220px;
+  }
+
+  .cg-legend-panel {
+    width: 160px;
+  }
+
+  .cg-mini-map {
+    width: 160px;
+  }
+
+  .cg-filter-select {
+    font-size: 11px;
+  }
+
+  .cg-toolbar-separator {
+    margin: 0 2px;
+  }
+
+  .cg-tour-btn {
+    display: none;
+  }
+
+}
+
+/* Medium-narrow panels — hide tour and reduce analysis button clutter */
+@container graphpanel (max-width: 600px) {
+  .cg-tour-btn,
+  .cg-minimap-btn {
+    display: none;
+  }
+
+  .cg-toolbar-left .cg-type-badge {
+    display: none;
+  }
+
+  /* The center group (layout / view-mode / level) is the widest fixed-width block in the
+     toolbar: 150px for its three icon-only triggers, measured on the real host. At a 520px
+     panel it was being squeezed to 115px, which wrapped the level trigger onto two lines
+     and clipped it; at 600px it still has 45px of slack. Hiding it here instead of letting
+     it be crushed keeps the workspace chip and every right-hand control (export / more /
+     collapse) reachable. Of the three controls, only the layout keeps an alternative entry
+     point (Ctrl+L cycles it, see `usePanelKeyboard`); view mode and hierarchy level lose
+     their mouse entry below this tier — see the note in `docs/需求分析.md` §28.3. */
+  .cg-toolbar-center {
+    display: none;
+  }
+}
+
+/* Very small panels */
+@container graphpanel (max-width: 320px) {
+  .cg-graph-toolbar {
+    gap: 2px;
+    flex-wrap: wrap;
+    padding: 4px 4px;
+  }
+
+  .cg-toolbar-left,
+  .cg-toolbar-center,
+  .cg-toolbar-right {
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .cg-layout-buttons,
+  .cg-graph-type-buttons {
+    padding: 1px;
+  }
+
+  .cg-layout-btn,
+  .cg-graph-type-btn {
+    padding: 2px 4px;
+    font-size: 9px;
+  }
+
+  .cg-filter-select {
+    padding: 3px 20px 3px 6px;
+    font-size: 10px;
+  }
+
+  .cg-node-count {
+    font-size: 10px;
+  }
+
+  .cg-legend-panel,
+  .cg-mini-map {
+    width: 120px;
+  }
+
+  /* 下拉内容已 portal 到 document.body，不再是本容器的后代，此处的
+   * `@container` 抽屉规则永远匹配不到；抽屉形态改由 Dropdown 组件测量面板
+   * 宽度后加 `.cg-portal-drawer`（见 layout.css）实现。 */
+
+  .cg-search-panel,
+  .cg-path-panel,
+  .cg-filter-panel {
+    width: calc(100% - 8px);
+    left: 4px;
+    right: 4px;
+  }
+
+  .cg-view-mode-buttons {
+    flex-wrap: wrap;
+  }
+}
+
+/* Large screens — allow fixed floating panel */
+@media (min-width: 1200px) {
+  .cg-graph-panel.cg-floating {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    width: 640px;
+    height: 520px;
+  }
+}
+
+/* ---- Sidebar tab mode (short height) -------------------------------------- */
+/* When the plugin renders inside a DSH sidebar tab, the panel height can be
+ * very limited. Adapt the layout to prioritize the graph canvas. */
+@container graphpanel (max-height: 400px) {
+  .cg-graph-toolbar {
+    padding: 0 4px;
+    gap: 2px;
+  }
+
+  .cg-toolbar-left .cg-node-count {
+    font-size: 10px;
+  }
+
+  .cg-type-badge {
+    display: none;
+  }
+
+  .cg-toolbar-separator {
+    display: none;
+  }
+
+  .cg-graph-type-buttons {
+    display: none;
+  }
+
+  .cg-view-mode-buttons {
+    gap: 1px;
+  }
+
+  .cg-view-mode-btn {
+    padding: 2px 4px;
+    font-size: 9px;
+  }
+
+  .cg-node-detail-panel {
+    max-height: calc(100% - 60px);
+    overflow-y: auto;
+  }
+
+  .cg-legend-panel {
+    max-height: 120px;
+    overflow-y: auto;
+  }
+
+  .cg-mini-map {
+    max-height: 100px;
+  }
+
+  .cg-search-panel,
+  .cg-path-panel,
+  .cg-filter-panel {
+    max-height: calc(100% - 60px);
+    overflow-y: auto;
+  }
+}
+
+@container graphpanel (max-height: 240px) {
+  .cg-graph-toolbar {
+    flex-wrap: wrap;
+    padding: 2px;
+  }
+
+  .cg-toolbar-left,
+  .cg-toolbar-center,
+  .cg-toolbar-right {
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .cg-layout-buttons {
+    display: none;
+  }
+
+  .cg-rank-dir-buttons {
+    display: none;
+  }
+
+  .cg-cluster-depth-buttons {
+    display: none;
+  }
+
+  .cg-node-detail-panel {
+    width: calc(100% - 8px);
+    left: 4px;
+    top: 4px;
+    max-height: calc(100% - 40px);
+  }
+}
+
+/* ---- Reduced motion ------------------------------------------------------ */
+
+@media (prefers-reduced-motion: reduce) {
+  .cg-graph-panel *,
+  .cg-graph-panel *::before,
+  .cg-graph-panel *::after,
+  .cg-floating-panel *,
+  .cg-floating-panel *::before,
+  .cg-floating-panel *::after,
+  .cg-floating-container *,
+  .cg-floating-container *::before,
+  .cg-floating-container *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ---- Touch device adaptation --------------------------------------------- */
+
+@media (pointer: coarse) {
+  .cg-layout-btn,
+  .cg-graph-type-btn,
+  .cg-search-btn,
+  .cg-theme-btn,
+  .cg-export-btn,
+  .cg-collapse-btn,
+  .cg-chain-btn,
+  .cg-cycle-btn,
+  .cg-impact-btn,
+  .cg-inheritance-btn,
+  .cg-minimap-btn,
+  .cg-refresh-btn,
+  .cg-undo-btn,
+  .cg-redo-btn,
+  .cg-import-btn,
+  .cg-legend-btn,
+  .cg-lang-btn,
+  .cg-pathfind-btn,
+  .cg-health-btn,
+  .cg-rules-btn,
+  .cg-hotspot-btn,
+  .cg-godmodule-btn,
+  .cg-corefunction-btn,
+  .cg-analysis-dropdown-btn,
+  .cg-quality-dropdown-btn,
+  .cg-tour-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .cg-node-detail-panel .cg-close-btn,
+  .cg-legend-close,
+  .cg-import-close,
+  .cg-close-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+/* ---- Responsive for new components ---------------------------------------- */
+
+@container graphpanel (max-width: 480px) {
+  .cg-path-bar,
+  .cg-health-score-card,
+  .cg-rule-panel {
+    width: calc(100% - 24px);
+  }
+
+  .cg-analysis-panel {
+    width: calc(100% - 24px);
+  }
+
+  .cg-focus-label {
+    max-width: 120px;
+  }
+}
+
+@container graphpanel (max-width: 768px) {
+  .cg-path-bar {
+    width: 240px;
+  }
+
+  .cg-health-score-card {
+    width: 220px;
+  }
+
+  .cg-rule-panel {
+    width: 240px;
+  }
+
+  .cg-analysis-panel {
+    width: 200px;
+  }
+}
+/* ---- Container Queries fallback ------------------------------------------- */
+@supports not (container-type: inline-size) {
+  @media (max-width: 380px) {
+    .cg-tour-btn,
+    .cg-minimap-btn,
+    .cg-legend-btn {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .cg-graph-panel {
+      border-radius: var(--cg-radius-sm);
+    }
+    .cg-graph-toolbar {
+      padding: 0 8px;
+      gap: 4px;
+    }
+    .cg-toolbar-left {
+      font-size: 11px;
+    }
+    .cg-toolbar-center {
+      gap: 4px;
+    }
+    .cg-toolbar-right {
+      gap: 4px;
+    }
+    .cg-layout-btn,
+    .cg-graph-type-btn,
+    .cg-rank-dir-btn {
+      padding: 3px 6px;
+      font-size: 10px;
+    }
+    .cg-search-btn,
+    .cg-theme-btn,
+    .cg-export-btn,
+    .cg-collapse-btn,
+    .cg-chain-btn,
+    .cg-cycle-btn,
+    .cg-impact-btn,
+    .cg-inheritance-btn,
+    .cg-minimap-btn,
+    .cg-refresh-btn,
+
+    .cg-undo-btn,
+    .cg-redo-btn,
+    .cg-import-btn,
+    .cg-legend-btn,
+    .cg-lang-btn,
+    .cg-pathfind-btn,
+    .cg-health-btn,
+    .cg-rules-btn,
+    .cg-hotspot-btn,
+    .cg-godmodule-btn,
+    .cg-corefunction-btn,
+    .cg-analysis-dropdown-btn,
+    .cg-quality-dropdown-btn,
+    .cg-tour-btn {
+      width: 26px;
+      height: 26px;
+      font-size: 12px;
+    }
+    .cg-node-detail-panel {
+      width: calc(100% - 24px);
+      left: 12px;
+      top: 12px;
+    }
+    .cg-legend-panel {
+      width: 140px;
+    }
+    .cg-mini-map {
+      width: 140px;
+    }
+    .cg-type-badge {
+      display: none;
+    }
+    .cg-toolbar-separator {
+      display: none;
+    }
+    .cg-graph-type-buttons {
+      display: none;
+    }
+    .cg-dropdown-content {
+      min-width: 140px;
+    }
+    .cg-view-mode-buttons {
+      gap: 1px;
+    }
+    .cg-view-mode-btn {
+      padding: 2px 4px;
+      font-size: 9px;
+    }
+    .cg-search-panel,
+    .cg-path-panel {
+      width: calc(100% - 16px);
+      max-width: 320px;
+    }
+    .cg-filter-panel {
+      width: calc(100% - 16px);
+    }
+    .cg-heatmap-btn--activate,
+    .cg-heatmap-btn--deactivate {
+      width: 26px;
+      height: 26px;
+      font-size: 12px;
+    }
+    .cg-path-bar,
+    .cg-health-score-card,
+    .cg-rule-panel {
+      width: calc(100% - 24px);
+    }
+    .cg-analysis-panel {
+      width: calc(100% - 24px);
+    }
+    .cg-focus-label {
+      max-width: 120px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .cg-graph-toolbar {
+      padding: 0 8px;
+      gap: 6px;
+    }
+    .cg-toolbar-center {
+      gap: 6px;
+    }
+    .cg-toolbar-right {
+      gap: 6px;
+    }
+    .cg-layout-btn,
+    .cg-graph-type-btn {
+      padding: 3px 8px;
+      font-size: 11px;
+    }
+    .cg-node-detail-panel {
+      width: 220px;
+    }
+    .cg-legend-panel {
+      width: 160px;
+    }
+    .cg-mini-map {
+      width: 160px;
+    }
+    .cg-filter-select {
+      font-size: 11px;
+    }
+    .cg-toolbar-separator {
+      margin: 0 2px;
+    }
+    .cg-tour-btn {
+      display: none;
+    }
+    .cg-path-bar {
+      width: 240px;
+    }
+    .cg-health-score-card {
+      width: 220px;
+    }
+    .cg-rule-panel {
+      width: 240px;
+    }
+    .cg-analysis-panel {
+      width: 200px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .cg-tour-btn,
+    .cg-minimap-btn {
+      display: none;
+    }
+    .cg-toolbar-left .cg-type-badge {
+      display: none;
+    }
+    /* Mirrors the 600px container tier: the center group needs 150px for its three
+       icon-only triggers and gets crushed below that. */
+    .cg-toolbar-center {
+      display: none;
+    }
+  }
+
+  @media (max-width: 320px) {
+    .cg-graph-toolbar {
+      gap: 2px;
+      flex-wrap: wrap;
+      padding: 4px 4px;
+    }
+    .cg-toolbar-left,
+    .cg-toolbar-center,
+    .cg-toolbar-right {
+      flex-wrap: wrap;
+      gap: 2px;
+    }
+    .cg-layout-buttons,
+    .cg-graph-type-buttons {
+      padding: 1px;
+    }
+    .cg-layout-btn,
+    .cg-graph-type-btn {
+      padding: 2px 4px;
+      font-size: 9px;
+    }
+    .cg-filter-select {
+      padding: 3px 20px 3px 6px;
+      font-size: 10px;
+    }
+    .cg-node-count {
+      font-size: 10px;
+    }
+    .cg-legend-panel,
+    .cg-mini-map {
+      width: 120px;
+    }
+    /* 同上：portal 到 body 后这里也匹配不到，抽屉由 `.cg-portal-drawer` 接管。 */
+    .cg-search-panel,
+    .cg-path-panel,
+    .cg-filter-panel {
+      width: calc(100% - 8px);
+      left: 4px;
+      right: 4px;
+    }
+    .cg-view-mode-buttons {
+      flex-wrap: wrap;
+    }
+  }
+
+  @media (max-height: 400px) {
+    .cg-graph-toolbar {
+      padding: 0 4px;
+      gap: 2px;
+    }
+    .cg-toolbar-left .cg-node-count {
+      font-size: 10px;
+    }
+    .cg-type-badge {
+      display: none;
+    }
+    .cg-toolbar-separator {
+      display: none;
+    }
+    .cg-graph-type-buttons {
+      display: none;
+    }
+    .cg-view-mode-buttons {
+      gap: 1px;
+    }
+    .cg-view-mode-btn {
+      padding: 2px 4px;
+      font-size: 9px;
+    }
+    .cg-node-detail-panel {
+      max-height: calc(100% - 60px);
+      overflow-y: auto;
+    }
+    .cg-legend-panel {
+      max-height: 120px;
+      overflow-y: auto;
+    }
+    .cg-mini-map {
+      max-height: 100px;
+    }
+    .cg-search-panel,
+    .cg-path-panel,
+    .cg-filter-panel {
+      max-height: calc(100% - 60px);
+      overflow-y: auto;
+    }
+  }
+
+  @media (max-height: 240px) {
+    .cg-graph-toolbar {
+      flex-wrap: wrap;
+      padding: 2px;
+    }
+    .cg-toolbar-left,
+    .cg-toolbar-center,
+    .cg-toolbar-right {
+      flex-wrap: wrap;
+      gap: 2px;
+    }
+    .cg-layout-buttons {
+      display: none;
+    }
+    .cg-rank-dir-buttons {
+      display: none;
+    }
+    .cg-cluster-depth-buttons {
+      display: none;
+    }
+    .cg-node-detail-panel {
+      width: calc(100% - 8px);
+      left: 4px;
+      top: 4px;
+      max-height: calc(100% - 40px);
+    }
+  }
+}
+/* ---- Conversation View Integration Mode ----------------------------------- */
+
+/* When integrated into DSH's conversation.view slot, the panel fills the
+ * conversation area. Toolbar is always visible; graph canvas fills remaining
+ * space. The panel must not collapse or float — it's the primary view. */
+[data-cg-integration="conversation-view"] {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-cg-integration="conversation-view"] .cg-graph-toolbar {
+  display: flex;
+  flex-shrink: 0;
+}
+
+[data-cg-integration="conversation-view"] .cg-graph-container {
+  flex: 1;
+  min-height: 0;
+}
+
+[data-cg-integration="conversation-view"] .cg-collapse-fab {
+  display: none;
+}
+
+[data-cg-integration="conversation-view"] .cg-status-bar {
+  flex-shrink: 0;
+}
+
+/* Conversation view integration (conversation.view slot) */
+.cg-conversation-view-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.cg-conversation-view-wrapper[data-cg-visible="false"] {
+  display: none;
+}
+
+/* Generic host container for host-managed embedded panels
+ * (conversation.view / sidebar-right / better-sidebar). */
+.cg-integration-host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.cg-integration-host[data-cg-visible="false"] {
+  display: none;
+}
+
+
+/* In conversation-view mode, the panel should not have its own border/radius
+ * since it's embedded in the DSH conversation area */
+[data-cg-integration="conversation-view"].cg-graph-panel:not(.cg-collapsed) {
+  border: none;
+  border-radius: 0;
+}
+/* ---- Sidebar Right Tab Integration Mode ----------------------------------- */
+
+/* When integrated into DSH's sidebar.right.pane.tab, the panel is in a
+ * right sidebar tab. Width is typically 300-500px, height is full window. */
+[data-cg-integration="sidebar-right"] {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-cg-integration="sidebar-right"] .cg-graph-toolbar {
+  display: flex;
+  flex-shrink: 0;
+}
+
+[data-cg-integration="sidebar-right"] .cg-graph-container {
+  flex: 1;
+  min-height: 0;
+}
+
+[data-cg-integration="sidebar-right"] .cg-collapse-fab {
+  display: none;
+}
+
+[data-cg-integration="sidebar-right"].cg-graph-panel:not(.cg-collapsed) {
+  border: none;
+  border-radius: 0;
+}
+
+/* ---- Better Sidebar Integration Mode -------------------------------------- */
+
+/* When integrated via betterSidebar API, the panel is in a sidebar tab.
+ * Similar to sidebar-right but may have different container constraints. */
+[data-cg-integration="better-sidebar"] {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-cg-integration="better-sidebar"] .cg-graph-toolbar {
+  display: flex;
+  flex-shrink: 0;
+}
+
+[data-cg-integration="better-sidebar"] .cg-graph-container {
+  flex: 1;
+  min-height: 0;
+}
+
+[data-cg-integration="better-sidebar"] .cg-collapse-fab {
+  display: none;
+}
+
+[data-cg-integration="better-sidebar"].cg-graph-panel:not(.cg-collapsed) {
+  border: none;
+  border-radius: 0;
+}
+
+/* ---- Remote narrow-screen carrier adaptation ------------------------------- */
+
+/* `@linxin666/dsh-remote-web-ui` is a real, widely-installed plugin, but it
+ * exposes no panel/tab API at all — its client half only occupies the
+ * `sidebar.footer.action` seat and writes DOM adaptation marks
+ * (`lib/client.js:4155 ACTIVE_CLASS = "dsh-remote-portrait"`, added to
+ * `document.body` at `:4368`). So the honest relationship is "detect it and let
+ * the layout adapt", not "call its API". The former `remote-web-ui`
+ * integration mode was a phantom (`ctx.get('remoteWebUI')` exists in no DSH
+ * generation) and has been removed; these rules replace it.
+ *
+ * The toolbar must stay reachable on a phone-width carrier, so it is allowed to
+ * wrap instead of overflowing. */
+body.dsh-remote-portrait .cg-graph-toolbar {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+body.dsh-remote-portrait .cg-graph-panel:not(.cg-collapsed) {
+  border: none;
+  border-radius: 0;
+}
+
+/* Below 480px the toolbar's own compact breakpoint (see Toolbar.tsx) already
+ * collapses secondary controls; the graph area just needs the remaining
+ * height. */
+body.dsh-remote-portrait .cg-graph-container {
+  flex: 1;
+  min-height: 0;
+}
+
+/* ---- Toolbar always visible in non-floating modes -------------------------- */
+/* In all sidebar/slot integration modes, the toolbar must remain visible
+ * even when there's no graph data. The toolbar is the primary interaction
+ * surface and should not disappear.
+ * Expressed as one rule over `[data-cg-integration]` (the attribute lives on
+ * `.cg-graph-panel` itself, see GraphPanel.tsx) so every current and future
+ * integration mode is covered. The `:not(.cg-collapsed)` guard is load-bearing:
+ * without it this `!important` declaration outranks
+ * `.cg-graph-panel.cg-collapsed .cg-graph-toolbar { display: none }` and the
+ * toolbar keeps painting inside the 52px collapsed FAB. */
+.cg-graph-panel[data-cg-integration]:not(.cg-collapsed) .cg-graph-toolbar {
+  display: flex !important;
+}
+
+/* ---- Desktop vs Web distinction ------------------------------------------- */
+/* On desktop platforms, the panel may have more space. On web, it's
+ * constrained by the browser window. */
+@media (min-width: 1024px) {
+  [data-cg-integration="conversation-view"] .cg-graph-toolbar {
+    padding: 0 12px;
+    gap: 8px;
+  }
+}
+
+/* ---- Narrow-tier sheets (cycle-110 / T3) ---------------------------------- */
+/*
+ * 窄面板（≤480px）下的两处版式修正：
+ *   1. 节点详情面板改为**底部抽屉**（贴边、限高），不再 `max-height: calc(100% - 24px)`
+ *      从上往下盖住整个画布；
+ *   2. 抽屉打开时小地图与图例**临时让位**，关闭后回归。
+ *
+ * 为什么两条都要：三者都是 `position: absolute` + `z-index: var(--cg-z-panel)` 的绝对定位
+ * 元素，窄档下面板几乎占满高度，小地图（右下 200px）与图例（左下 180px）会被盖住一半，
+ * 面板底部的按钮也会与图例重叠 —— 点击落在错误元素上，而所有 DOM 断言照旧通过。
+ *
+ * 两套机制**声明必须一致**：
+ *   - `@container graphpanel (max-width: 480px)`：主机制，按面板宽度响应（与视口无关）；
+ *   - `[data-cg-tier="narrow"]`：宿主不支持容器查询、或容器查询尺寸不可读时的兜底，
+ *     由 `hooks/usePanelTier.ts` 实测宽度后写在根元素上。
+ * `tests/unit/panelTierContract.test.ts` 会逐条比对这两处的声明，任一侧改动都会变红。
+ */
+@container graphpanel (max-width: 480px) {
+  .cg-node-detail-panel {
+    top: auto;
+    bottom: calc(var(--cg-statusbar-h) + 8px);
+    left: 8px;
+    right: 8px;
+    width: auto;
+    max-height: 52%;
+  }
+
+  /* 抽屉打开 ⇒ 两个角落的叠加层让位（关闭后自动回归，不需要 JS 复位） */
+  .cg-graph-panel[data-cg-sheet="open"] .cg-mini-map,
+  .cg-graph-panel[data-cg-sheet="open"] .cg-legend-panel {
+    display: none;
+  }
+}
+
+/* 兜底机制（JS 实测档位）：与上面的容器查询分支**逐条等价** */
+.cg-graph-panel[data-cg-tier="narrow"] .cg-node-detail-panel {
+  top: auto;
+  bottom: calc(var(--cg-statusbar-h) + 8px);
+  left: 8px;
+  right: 8px;
+  width: auto;
+  max-height: 52%;
+}
+
+.cg-graph-panel[data-cg-tier="narrow"][data-cg-sheet="open"] .cg-mini-map,
+.cg-graph-panel[data-cg-tier="narrow"][data-cg-sheet="open"] .cg-legend-panel {
+  display: none;
+}
+
+/* ---- FBX-05: panel stack responsive tiers --------------------------------- */
+/*
+ * 面板堆栈与栈内面板在窄容器下的收窄：只**新增**规则、不改任何现有行；面板根
+ * 自身的固定 px 宽（160-300px）不在此重写，统一用 `max-width: calc(100% - 16px)`
+ * 封顶（保留左右 8px 呼吸边）。两档阈值必须与 hooks/usePanelTier.ts 的
+ * PANEL_TIER_* 常量同源——tests/unit/panelStackResponsiveContract.test.ts
+ * 逐条比对，任一侧漂移即红。
+ */
+@container graphpanel (max-width: 768px) {
+  .cg-panel-stack-left .cg-search-bar,
+  .cg-panel-stack-left .cg-path-bar,
+  .cg-panel-stack-left .cg-health-score-card,
+  .cg-panel-stack-left .cg-rule-panel,
+  .cg-panel-stack-left .cg-node-detail-panel,
+  .cg-panel-stack-left .cg-legend-panel,
+  .cg-panel-stack-left .cg-import-panel {
+    max-width: calc(100% - 16px);
+  }
+
+  .cg-panel-stack-left .cg-impact-panel,
+  .cg-panel-stack-left .cg-cycle-panel,
+  .cg-panel-stack-right .cg-analysis-panel,
+  .cg-panel-stack-right .cg-cycle-panel,
+  .cg-panel-stack-right .cg-filter-panel,
+  .cg-panel-stack-right .cg-deadcode-panel {
+    max-width: calc(100% - 16px);
+  }
+}
+
+@container graphpanel (max-width: 480px) {
+  .cg-panel-stack-left,
+  .cg-panel-stack-right {
+    left: 8px;
+    right: 8px;
+    max-width: calc(100% - 16px);
+  }
+
+  .cg-panel-stack-left .cg-search-bar,
+  .cg-panel-stack-left .cg-path-bar,
+  .cg-panel-stack-left .cg-health-score-card,
+  .cg-panel-stack-left .cg-rule-panel,
+  .cg-panel-stack-left .cg-node-detail-panel,
+  .cg-panel-stack-left .cg-legend-panel,
+  .cg-panel-stack-left .cg-import-panel {
+    max-width: calc(100% - 16px);
+  }
+
+  .cg-panel-stack-left .cg-impact-panel,
+  .cg-panel-stack-left .cg-cycle-panel,
+  .cg-panel-stack-right .cg-analysis-panel,
+  .cg-panel-stack-right .cg-cycle-panel,
+  .cg-panel-stack-right .cg-filter-panel,
+  .cg-panel-stack-right .cg-deadcode-panel {
+    max-width: calc(100% - 16px);
+  }
+}
 
 /* Visually hidden — for screen reader only content */
 .cg-visually-hidden {