/* experience_editor/tree-interactions.css – Search, context menu, drag states */

/* ── Tree search ── */
.tree-search {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ee-border-subtle);
}
.tree-search__icon { font-size: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.tree-search__input {
  flex: 1; min-width: 0; padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs); border: none; background: none;
}
.tree-search__input:focus { box-shadow: none; outline: none; }
.tree-search__clear { opacity: 0; transition: opacity var(--duration-fast); }
.tree-search:focus-within .tree-search__clear { opacity: 1; }
.tree-search mark {
  background: var(--accent-muted); color: var(--accent-primary);
  border-radius: 2px; padding: 0 1px;
}
/* ── Drag handle ── */
.tree-node__drag-handle {
  font-size: 14px; color: var(--text-secondary); cursor: grab;
  opacity: 0.5; flex-shrink: 0; transition: opacity var(--duration-fast);
}
.tree-node__row:hover .tree-node__drag-handle { opacity: 1; }
.tree-node__drag-handle:active { cursor: grabbing; }
/* ── Drag states ── */
.tree-node--ghost { opacity: 0.3; }
.tree-node--chosen { background: var(--surface-selected); border-radius: var(--radius-md); }
.tree-node--drag { opacity: 0.9; }
/* ── Menu trigger (three-dot) ── */
.tree-node__menu-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: none; padding: 0;
  color: var(--text-secondary); cursor: pointer; flex-shrink: 0;
  opacity: 0.5; transition: opacity var(--duration-fast);
}
.tree-node__row:hover .tree-node__menu-trigger,
.tree-node__row--active .tree-node__menu-trigger { opacity: 1; }
.tree-node__menu-trigger .material-symbols-rounded { font-size: 16px; }
.tree-node[data-node-type="question"] .tree-node__menu-trigger { display: none; }
/* ── Context menu (floating) ── */
.context-menu {
  position: fixed; z-index: var(--z-dropdown); min-width: 160px;
  background: var(--surface-base); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  padding: var(--space-1) 0;
}
.context-menu__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm);
  color: var(--text-primary); text-decoration: none; cursor: pointer;
  border: none; background: none; width: 100%;
}
.context-menu__item:hover { background: var(--surface-hover); }
.context-menu__item .material-symbols-rounded { font-size: 16px; color: var(--text-tertiary); }
.context-menu__item[hidden] { display: none; }
.context-menu__item--disabled { opacity: 0.4; pointer-events: none; }
.context-menu__item--danger { color: var(--status-error); }
.context-menu__item--danger .material-symbols-rounded { color: var(--status-error); }
/* Accent-coloured menu item — used by Build Mode / kebab Add items to mark
   Interactive (Web/Message) variants. Container variants stay default. */
.context-menu__item--accent { color: var(--accent-primary); }
.context-menu__item--accent .material-symbols-rounded { color: var(--accent-primary); }
.context-menu__divider { border: none; border-top: 1px solid var(--border-default); margin: var(--space-1) 0; }
.context-menu__label {
  display: block;
  padding: var(--space-1) var(--space-3) 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.context-menu__item:focus-visible {
  background: var(--surface-hover);
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
/* ── Context menu chevron (submenu indicator) ── */
.context-menu__chevron {
  font-size: 14px !important; color: var(--text-tertiary);
  margin-left: auto; flex-shrink: 0;
}

/* ── ReferenceStep distinction now lives in tree.css as a 3-tier badge modifier (Solution A) ── */