/* The flow guide shares the canvas palette across light, dark and lava themes. */
.node-navigator.domain-panel {
  width: 320px; top: calc(var(--desktop-toolbar-height, 40px) + 12px);
  max-height: calc(100dvh - var(--desktop-toolbar-height, 40px) - 82px);
  overflow: hidden; border-radius: 16px;
}
.node-navigator [hidden] { display: none !important; }
.navigator-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 18px 15px; }
.navigator-eyebrow { color: var(--primary); font-size: .58rem; font-weight: 800; letter-spacing: .16em; }
.navigator-header h2 { margin: 5px 0 0; color: var(--text-color); font-size: .94rem; font-weight: 650; letter-spacing: -.025em; }
.navigator-close { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; }
.navigator-close:hover { color: var(--text-color); background: var(--surface-2); }
.navigator-tabs { display: flex; flex: 0 0 auto; margin: 0 16px 15px; padding: 3px; gap: 3px; border: 1px solid var(--divider); border-radius: 10px; background: var(--surface); }
.navigator-tabs button { flex: 1; padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: .72rem; font-weight: 650; cursor: pointer; }
.navigator-tabs button[aria-selected="true"] { color: var(--text-color); background: var(--card-bg); border-color: var(--divider); box-shadow: 0 1px 3px #00000008; }
.navigator-view { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.node-index-search-wrap { display: flex; align-items: center; flex: 0 0 auto; margin: 0 16px; padding: 0 10px; gap: 8px; border: 1px solid var(--divider); border-radius: 9px; background: var(--input-bg); color: var(--text-muted); }
.node-index-search-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1); }
.node-index-search-wrap svg { flex: 0 0 auto; }
.node-index-search-wrap input { min-width: 0; width: 100%; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text-color); font: inherit; font-size: .7rem; }
.node-index-search-wrap input::placeholder { color: var(--text-muted); opacity: 1; }
.node-index-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 8px; color: var(--text-muted); font-size: .64rem; }
.node-index-toolbar select { max-width: 125px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); font: inherit; font-size: .64rem; cursor: pointer; }
.node-index-toolbar select:hover { border-color: var(--divider); }
.node-index-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0 10px 10px; scrollbar-width: thin; }
.node-index-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px; margin-top: 4px; padding: 3px; border: 1px solid transparent; border-radius: 11px; transition: background .15s, border-color .15s; }
.node-index-row:hover { background: var(--surface); border-color: var(--divider); }
.node-index-row.is-selected { background: rgba(var(--primary-rgb), .055); border-color: rgba(var(--primary-rgb), .4); }
.node-index-locate { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; gap: 7px; width: 100%; padding: 10px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-color); text-align: left; font: inherit; cursor: pointer; }
.node-index-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; }
.node-reference { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 3px 5px; border: 1px solid var(--divider); border-radius: 5px; background: var(--surface); color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .6rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.is-selected .node-reference { border-color: rgba(var(--primary-rgb), .3); color: var(--primary); background: var(--card-bg); }
.node-index-title { min-width: 0; overflow-wrap: anywhere; color: var(--text-color); font-size: .74rem; font-weight: 650; line-height: 1.4; }
.node-index-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); font-size: .68rem; line-height: 1.6; }
.node-index-description.is-unclear { font-style: italic; }
.node-index-vibe { align-self: start; margin-top: 10px; padding: 5px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--primary); font: inherit; font-size: .62rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.node-index-vibe:hover { background: var(--card-bg); border-color: var(--divider); }
.node-index-vibe:disabled { color: var(--text-muted); opacity: .55; cursor: default; }
.node-index-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.node-index-status { padding: 2px 5px; border-radius: 4px; color: var(--text-muted); background: var(--surface-2); font-size: .56rem; font-weight: 600; }
.node-index-origin { color: var(--text-muted); font-size: .55rem; }
.node-index-footer { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; padding: 13px 16px; border-top: 1px solid var(--divider); gap: 7px; background: var(--surface); }
.node-index-footer > button, .navigator-groups-empty > button { padding: 9px 12px; border: 1px solid var(--divider); border-radius: 8px; background: var(--card-bg); color: var(--text-color); font: inherit; font-size: .7rem; font-weight: 650; cursor: pointer; }
.node-index-footer > button:hover:enabled, .navigator-groups-empty > button:hover { border-color: var(--primary); color: var(--primary); }
.node-index-footer > button:disabled { color: var(--text-muted); cursor: default; }
.node-index-ai-hint { display: block; color: var(--text-muted); font-size: .56rem; text-align: center; line-height: 1.5; }
#node-index-ai-status { margin: 0; color: var(--text-muted); font-size: .65rem; line-height: 1.5; }
#node-index-ai-status:empty { display: none; }
.node-index-empty, .navigator-groups-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: .72rem; line-height: 1.65; }
.node-index-empty strong, .navigator-groups-empty strong { display: block; color: var(--text-color); font-size: .8rem; font-weight: 650; }
.node-index-empty p, .navigator-groups-empty p { margin: 7px 0 16px; }
.node-index-reset { padding: 7px 10px; background: transparent; border: 1px solid var(--divider); border-radius: 7px; color: var(--primary); font: inherit; cursor: pointer; }
.navigator-groups-empty > button { display: block; width: 100%; margin-bottom: 8px; }
.navigator-group-controls { display: flex; gap: 6px; padding: 0 16px 12px; }
.navigator-group-controls button { flex: 1; padding: 8px; border: 1px solid var(--divider); border-radius: 7px; background: var(--surface); color: var(--text-color); font: inherit; font-size: .66rem; cursor: pointer; }
#navigator-groups-view .domain-list { overflow-y: auto; min-height: 0; padding: 0 12px 12px; }
.node-canvas-reference { align-self: center; margin-right: 4px; }
.node.is-index-selected { outline: 2px solid var(--primary); outline-offset: 3px; }
.node-navigator :is(button, select):focus-visible, .node-index-reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#btn-node-index[aria-pressed="true"] { color: var(--primary); background: rgba(var(--primary-rgb), .08); }
@media (max-width: 720px) {
  .node-navigator.domain-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(172px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: min(65dvh, 600px); z-index: 10000; }
  .navigator-header { padding: 14px 16px 10px; }
  .navigator-header h2 { font-size: 1rem; }
  .navigator-close { width: 40px; height: 40px; }
  .navigator-tabs { margin-bottom: 12px; }
  .navigator-tabs button { min-height: 40px; font-size: .85rem; }
  .node-index-search-wrap input { height: 44px; font-size: 16px; }
  .node-index-toolbar { font-size: .75rem; padding-top: 7px; padding-bottom: 4px; }
  .node-index-toolbar select { min-height: 38px; font-size: .75rem; }
  .node-index-title { font-size: .85rem; }
  .node-index-description { font-size: .78rem; }
  .node-index-locate { padding: 10px 6px; }
  .node-index-vibe { min-height: 44px; font-size: .75rem; padding: 7px 9px; margin-top: 2px; }
  .node-index-footer { padding: 10px 16px; gap: 4px; }
  .node-index-footer > button { min-height: 42px; font-size: .8rem; }
  .node-index-status, .node-index-origin, .node-index-ai-hint { font-size: .64rem; }
  .node-reference { font-size: .67rem; }
  body.mobile-chat-open .node-navigator, body.mobile-chat-open .mobile-groups-toggle,
  body.mobile-node-inspector-open .node-navigator { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .node-index-row { transition: none; } }
@media (max-width: 720px) and (max-height: 620px) {
  .node-navigator.domain-panel { top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); max-height: none; }
}