/* ==================================================================
   mindmap5.3 · css/node-menu.css —— 节点菜单：桌面跨区单行，手机紧凑换行
   共用 trial-05 令牌与阅读区描边图标；小色块与触摸热区分开。
   ================================================================== */
.sel-quickbar {
  position: fixed; z-index: var(--z-ctxmenu); box-sizing: border-box;
  width: max-content; max-width: calc(100vw - 16px);
  padding: var(--node-menu-padding); border: 1px solid var(--ui-toolbar-border);
  border-radius: var(--ui-toolbar-radius); color: var(--ui-text); background: var(--ui-toolbar-bg);
  box-shadow: var(--ui-shadow-toolbar); overscroll-behavior: contain;
  scrollbar-width: thin; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--ui-motion-fast), visibility var(--ui-motion-fast);
}
.sel-quickbar.show { opacity: 1; visibility: visible; pointer-events: auto; }
.sel-quick-inner, .sel-quick-row { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--sel-quick-gap); width: max-content; }
.sel-quick-inner > * { flex: none; }
.sel-quick-action, .node-context-close {
  box-sizing: border-box; display: grid; place-items: center; flex: none;
  width: var(--sel-quick-action); height: var(--sel-quick-action); min-width: var(--sel-quick-action); min-height: var(--sel-quick-action);
  padding: 0; appearance: none; border: 0; border-radius: var(--ui-button-radius);
  color: var(--ui-text); background: transparent; cursor: pointer;
}
.sel-quick-action .mm-icon, .node-context-menu .mm-icon { width: var(--icon-size); height: var(--icon-size); flex: none; }
.sel-quick-action:hover, .node-context-close:hover { background: var(--ui-hover-bg); }
.sel-quick-action:focus-visible, .node-context-close:focus-visible, .node-context-menu .di:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: -2px;
}
.sel-quick-action.danger { color: var(--ui-danger); }
.sel-quick-action:disabled, .node-context-menu .di:disabled { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }
.sel-quick-action[hidden] { display: none; }
.node-menu-colors {
  display: flex; gap: var(--sel-quick-gap);
  align-items: center; width: max-content;
}
.sel-quick-swatches { padding-inline: var(--sel-quick-gap); border-inline: 0; border-right: 1px solid var(--ui-border); }
.node-menu-colors .mm-color-chip, .node-menu-colors .mm-color-tray-btn {
  position: relative; box-sizing: border-box; width: var(--sel-quick-action); height: var(--sel-quick-action);
  min-width: var(--sel-quick-action); min-height: var(--sel-quick-action); padding: 0;
  border: 0; border-radius: var(--ui-button-radius); background: transparent; box-shadow: none;
}
.node-menu-colors .mm-color-chip::before, .mm-color-tray[data-context="node-menu"] .mm-color-chip::before {
  content: ''; position: absolute; width: var(--node-menu-color-size); height: var(--node-menu-color-size);
  left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 4px; background: var(--swatch);
}
.node-menu-colors .mm-color-chip.on::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 4px;
  transform: translate(-50%, -65%) rotate(-45deg); border-left: 2px solid var(--swatch-ink); border-bottom: 2px solid var(--swatch-ink);
}
.node-menu-colors .mm-color-chip:hover, .node-menu-colors .mm-color-chip:focus-visible { background: var(--ui-hover-bg); transform: none; }
.node-menu-colors .mm-color-chip:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.node-menu-colors .mm-color-tray-btn .mm-icon { width: 12px; height: 12px; }
.mm-color-tray[data-context="node-menu"] { box-sizing: border-box; }
.mm-color-tray[data-context="node-menu"] .mm-color-chip { border: 0; background: transparent; box-shadow: none; }
.mm-color-tray[data-context="node-menu"] .mm-color-chip:hover { transform: none; background: var(--ui-hover-bg); }
.mm-color-tray[data-context="node-menu"] .mm-color-chip:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }

/* 完整右键操作列表的颜色行不随长列表滚出；快捷条子菜单使用共用 ActionMenu。 */
#ctxmenu.node-context-menu {
  box-sizing: border-box; width: var(--node-menu-list-width); min-width: 0;
  padding: var(--node-menu-padding); overflow: hidden;
}
#ctxmenu.node-context-menu.show { display: flex; flex-direction: column; }
.node-context-head { display: none; }
.node-context-colors { --sel-quick-action: 32px; flex: none; align-self: center; max-width: 100%; overflow-x: auto; padding-bottom: var(--node-menu-padding); }
.node-context-actions { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-top: 1px solid var(--ui-border); }
.node-context-menu .di { min-height: 36px; font-size: var(--ui-font-size, 14px); line-height: 1.4; }
.node-context-menu .di span { min-width: 0; overflow-wrap: anywhere; }

/* 手机按实际按钮紧凑排列，空间不足再换行，保留44px触摸热区。 */
@media (max-width: 900px) {
  .sel-quickbar { --sel-quick-action: var(--editor-touch-target); background: var(--ui-panel); }
  .sel-quick-inner { max-width: 100%; }
  .sel-quick-row { flex-wrap: wrap; gap: 0; max-width: min(100%, calc(8 * var(--sel-quick-action))); }
  .sel-quick-row > .danger { margin-inline-start: auto; }
  .sel-quick-secondary { display: none; }
  .sel-quick-more { display: grid; background: var(--ui-accent-soft); }
  .sel-quick-swatches { gap: 0; padding: 0; border: 0; border-right: 1px solid var(--ui-border); }
  .node-menu-colors .mm-color-tray-btn .mm-icon { width: var(--icon-size); height: var(--icon-size); }
  #ctxmenu.node-context-menu { --sel-quick-action: var(--editor-touch-target); width: var(--node-menu-mobile-width); }
  .node-context-head { display: flex; flex: none; align-items: center; justify-content: space-between; padding-left: var(--node-menu-padding); }
  .node-context-close { width: var(--editor-touch-target); height: var(--editor-touch-target); }
  .node-context-colors { --sel-quick-action: var(--editor-touch-target); gap: 0; max-width: 100%; overflow-x: auto; }
  .node-context-menu .di { min-height: var(--editor-touch-target); }
  .mm-color-tray[data-context="node-menu"] { --sel-quick-action: var(--editor-touch-target); }
  .mm-color-tray[data-context="node-menu"] .mm-color-tray-auto { min-height: var(--editor-touch-target); }
}
@media (any-pointer: coarse) {
  .node-context-menu .di { min-height: var(--editor-touch-target); }
  .node-context-colors, .mm-color-tray[data-context="node-menu"] { --sel-quick-action: var(--editor-touch-target); }
  .mm-color-tray[data-context="node-menu"] .mm-color-tray-auto { min-height: var(--editor-touch-target); }
}