/* =========================================================
   SEMANTIC BRAIN — INVESTIGAÇÃO / NOTA / SÍNTESE
   Camada visual aditiva. Não substitui o style.css original.
   ========================================================= */

.knowledge-view-shell {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0;
}

.knowledge-view-tabs {
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  padding:10px 18px;
  overflow-x:auto;
  border-bottom:1px solid var(--sb-border);
  background:color-mix(in srgb, var(--sb-bg-canvas) 94%, transparent);
}

/* Unidade 4.1 — modificador renomeado de "--three" para "--four": passou a
   dimensionar 4 abas (nova aba "Estrutura") em vez de 3. Os valores de
   largura mínima mantêm-se exatamente os mesmos de sempre — nenhuma
   alteração ao aspeto das 3 abas já existentes. */
.knowledge-view-tabs--four .knowledge-view-tab { min-width:160px; }

.knowledge-view-tab {
  display:grid;
  grid-template-columns:28px auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  padding:9px 13px;
  border:1px solid var(--sb-border);
  border-radius:var(--sb-radius-md);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  text-align:left;
  transition:background var(--sb-duration-fast) var(--sb-ease-standard),border-color var(--sb-duration-fast) var(--sb-ease-standard);
}

.knowledge-view-tab:hover { background:var(--sb-surface-2); }
.knowledge-view-tab.active {
  border-color:var(--sb-primary-strong);
  background:linear-gradient(135deg,color-mix(in srgb, var(--sb-primary) 58%, transparent),color-mix(in srgb, var(--sb-primary) 24%, transparent));
  box-shadow:var(--sb-glow-primary);
}
.knowledge-view-tab .kv-icon { grid-row:1/3; align-self:center; font-size:18px; }
.knowledge-view-tab strong { font-size:var(--sb-text-sm); color:var(--sb-text); }
.knowledge-view-tab small { color:var(--sb-text-muted); font-size:9px; }

.knowledge-view-content { position:relative; flex:1 1 auto; min-height:0; }
.knowledge-view-content > .editor-page { height:100%; overflow:auto; }
.knowledge-panel { position:absolute; inset:0; overflow:hidden; }
.knowledge-panel.hidden,
.knowledge-view-content > .editor-page.hidden { display:none !important; }
.hidden { display:none !important; }

.kv-investigation {
  display:grid;
  /* Unidade 3.3 — terceira coluna, sempre presente, para o manípulo de
     redimensionamento entre o canvas e o painel "Estrutura Auxiliar"
     (0 de largura, tal como o próprio painel, enquanto estiver fechado). */
  grid-template-columns:minmax(0,1fr) 0 0;
  background:var(--sb-bg-canvas);
  transition:grid-template-columns var(--sb-duration-base) var(--sb-ease-standard);
}
/* Unidade 3.3 — a largura deixa de ser um valor fixo: passa a vir de
   `--reasoning-width`, aplicada via JS a partir de `investigation.reasoningWidth`
   (ver applyReasoningWidth/beginReasoningResize). O valor 330px mantém-se
   como reserva, para o breve instante antes do JS aplicar a largura
   guardada — é exatamente o mesmo valor fixo que já existia antes desta
   unidade, por isso não há qualquer salto visível. */
.kv-investigation.reasoning-open { grid-template-columns:minmax(0,1fr) 6px var(--reasoning-width, 330px); }
/* Unidade 3.3 — "sem saltos": durante um arrasto ativo, a mudança de
   largura tem de seguir o ponteiro 1:1, sem a transição/animação que
   continua a fazer sentido para o botão de abrir/fechar. */
.kv-investigation.resizing { transition:none; }
.kv-investigation-main { position:relative; min-width:0; overflow:hidden; }

/* Unidade 3.3 — manípulo de redimensionamento, com uma zona de deteção
   mais larga do que a coluna visível (o mesmo princípio já usado na hit
   area das ligações, Unidade 2.1), para ser fácil de agarrar sem exigir
   precisão. Discreto em repouso, com destaque ao pairar/arrastar — uma
   experiência semelhante à sidebar do VS Code (redimensionar arrastando a
   fronteira), sem copiar o seu aspeto visual. */
.kv-reasoning-resize-handle {
  position:relative;
  cursor:col-resize;
}
.kv-reasoning-resize-handle::after {
  content:"";
  position:absolute;
  inset:0 -4px;
  cursor:col-resize;
}
/* DS6 — Notes Panel, alça de resize (COMPONENT_LIBRARY.md §18): cor sobe
   para --sb-border-strong ao pairar; durante o arrasto ativo (Active/
   Pressed), passa a --sb-primary, sem transição, seguindo o gesto 1:1. */
.kv-reasoning-resize-handle::before {
  content:"";
  position:absolute;
  inset:0;
  margin-inline:auto;
  width:1px;
  background:var(--sb-border);
  transition:background var(--sb-duration-fast) var(--sb-ease-standard), width var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-reasoning-resize-handle:hover::before {
  width:3px;
  background:var(--sb-border-strong);
}
.kv-investigation.resizing .kv-reasoning-resize-handle::before {
  width:3px;
  background:var(--sb-primary);
  transition:none;
}

/* Unidade 3.3 — durante o arrasto: impede a seleção de texto da página e
   mantém o cursor de redimensionar mesmo que o ponteiro saia do manípulo
   por um instante (gesto mais tolerante e fluido). */
body.kv-resizing { cursor:col-resize; user-select:none; }
body.kv-resizing * { cursor:col-resize !important; user-select:none !important; }

/* DS5 — Canvas (COMPONENT_LIBRARY.md §4). Fundo --sb-bg-canvas, mais
   claro que a shell (--sb-bg) para se distinguir dela, tal como já
   estabelecido em DS2 para o resto do Workspace. */
.kv-canvas {
  position:absolute;
  inset:0;
  overflow:hidden;
  outline:none;
  background:
    linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,rgba(73,84,125,.18),transparent 39%),
    var(--sb-bg-canvas);
  background-size:28px 28px,28px 28px,auto,auto;
}
.kv-svg { position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none; }
.kv-node-layer { position:absolute; inset:0; z-index:3; }
/* Bloco 5 — as quatro camadas de conteúdo do Canvas (`.kv-svg`,
   `.kv-connections` — Connection Engine, ver connection-engine.css —,
   `.kv-node-layer`, e `.kv-edge-interaction`, abaixo) recebem a mesma
   transformação `translate()` em `applyCanvasOffset` (knowledge-views.js),
   usada para "centrar o Canvas" num conceito selecionado (requisito 3).
   Esta transição é o que torna essa recentragem um movimento suave em vez
   de um salto instantâneo (requisito 7) — sem afetar o posicionamento
   `left`/`top` de cada nó individual, que continua a não ter nenhuma
   transição própria (arrastar um nó deve continuar a segui-lo
   instantaneamente, não com atraso). */
.kv-svg, .kv-connections, .kv-node-layer, .kv-edge-interaction {
  transition:transform .32s ease;
}
/* Unidade 2.1 — .kv-node-layer cobre todo o canvas e fica por cima do
   .kv-svg (onde as ligações são desenhadas), pelo que um clique num troço
   de ligação que não esteja sobre um nó nunca chegava a alcançá-la. Esta
   camada, tal como .kv-svg, não tem qualquer conteúdo visível nem recebe
   eventos por si só (pointer-events:none); só os "hit paths"/"handles" das
   ligações lá dentro os recebem, exatamente como já acontecia no .kv-svg. */
.kv-edge-interaction { position:absolute; inset:0; z-index:4; width:100%; height:100%; overflow:visible; pointer-events:none; }

/* DS5 — Connections. All `.kv-edge*` styling (curve, handle, label,
   selected/error state) has moved to connection-engine.css's
   `.sb-connection*` classes, owned by the Connection Engine (ENGINE
   02) — see REFACTOR note at the top of this file. The colour-from-
   source-node / dasharray-by-type decisions documented here before
   are unchanged in behaviour, just relocated; see
   ARCHITECTURE_DECISION.md for the original reasoning. */

.kv-group-shape {
  fill-opacity:.055;
  stroke-opacity:.62;
  stroke-width:2;
  stroke-dasharray:9 7;
  filter:drop-shadow(0 0 7px currentColor);
}
.kv-group-label {
  fill:color-mix(in srgb, var(--sb-primary) 20%, white);
  text-anchor:middle;
  dominant-baseline:middle;
  font-size:12px;
  font-weight:700;
  paint-order:stroke;
  stroke:var(--sb-bg-canvas);
  stroke-width:4px;
}

.kv-floating-toolbar {
  position:absolute;
  z-index:20;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:5px;
  max-width:calc(100% - 30px);
  padding:7px;
  overflow-x:auto;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-lg);
  background:var(--sb-surface-1);
  box-shadow:var(--sb-shadow-2);
  backdrop-filter:blur(12px);
}
.kv-floating-toolbar button {
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:8px 10px;
  border:1px solid var(--sb-border);
  border-radius:var(--sb-radius-sm);
  background:var(--sb-surface-2);
  color:var(--sb-text);
  white-space:nowrap;
  transition:background var(--sb-duration-fast) var(--sb-ease-standard),border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-floating-toolbar button:hover { background:color-mix(in srgb, var(--sb-surface-2) 100%, white 8%); }
.kv-floating-toolbar button.active {
  border-color:var(--sb-primary-strong);
  background:color-mix(in srgb, var(--sb-primary) 38%, var(--sb-surface-2));
  box-shadow:var(--sb-glow-primary);
}
.kv-toolbar-divider { width:1px; height:26px; flex:0 0 auto; background:var(--sb-border-strong); }

.kv-status {
  position:absolute;
  z-index:16;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(720px,calc(100% - 30px));
  padding:7px 12px;
  border:1px solid color-mix(in srgb, var(--sb-primary-strong) 22%, transparent);
  border-radius:var(--sb-radius-pill);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  font-size:10px;
  text-align:center;
  pointer-events:none;
}

.kv-help {
  position:absolute;
  z-index:10;
  left:15px;
  bottom:15px;
  max-width:420px;
  padding:11px 13px;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-md);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  font-size:11px;
}
.kv-help strong { display:block; margin-bottom:3px; color:var(--sb-text); }

/* DS4 — Concept Node (forma compacta do Knowledge Card). --node-color é
   sempre definida por instância via JS (element.style.setProperty), a
   partir de node.color || DEFAULT_COLOR ("#7c5cff" = --sb-primary) — o
   valor abaixo é só o fallback antes do JS aplicar o valor real, por
   isso está alinhado ao mesmo token, nunca substituído por outra cor. */
.kv-node {
  --node-color:var(--sb-primary);
  position:absolute;
  width:36px;
  height:36px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border:2px solid var(--node-color);
  border-radius:var(--sb-radius-circle);
  /* Núcleo branco-quente → cor, o mesmo princípio concêntrico do núcleo
     de uma galáxia em style.css (.galaxy-core) — "cada estrela representa
     um conceito": mantém família visual entre o Universo e o Grafo de
     Conhecimento sem replicar o detalhe (poeira estelar/braços espirais)
     que só faz sentido a uma escala muito maior; aqui o nó tem 36-41px,
     por isso mantém-se um degradê simples de 3 paragens para não perder
     clareza (DS5 pede "nunca excesso de brilho... prioridade é clareza"). */
  background:radial-gradient(circle at 35% 25%,
    #fff 0 9%,
    color-mix(in srgb, var(--node-color) 55%, white) 16%,
    var(--node-color) 30% 100%);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--node-color) 10%,transparent),0 0 18px color-mix(in srgb,var(--node-color) 45%,transparent);
  cursor:grab;
  user-select:none;
  transition:box-shadow var(--sb-duration-fast) var(--sb-ease-standard);
}
/* Central Node (COMPONENT_LIBRARY.md §6) — o círculo do nó central era,
   antes desta fase, MENOR (29px) do que um Concept Node comum (36px),
   uma inconsistência estrutural já presente no código-fonte, em
   contradição direta com a própria lógica de interação já existente
   (edgeGeometry/beginWire usam raio 63 para nós centrais vs. 54 para os
   restantes — node.central já era tratado como "maior" na matemática de
   ligações, só nunca o tinha sido visualmente). Corrigido aqui para
   ~36px×1.14 (a mesma proporção ~1.3× em área pedida pela Constituição
   Visual, e muito próxima do rácio 63/54 já usado na lógica de ligações)
   — nenhuma alteração aos valores 63/54 nem a qualquer lógica de dados;
   ver ARCHITECTURE_DECISION.md. */
.kv-node.central { width:41px; height:41px; }
/* Central Node — glow permanente e estático (COMPONENT_LIBRARY.md §6),
   na cor real do nó (--node-color, já definida por instância) em vez de
   fixa em --sb-primary: o código atual não impede o utilizador de
   escolher outra cor para o conceito central (nenhuma restrição de
   dados encontrada em createConcept/changeNodeColor), pelo que fixar o
   glow a uma cor diferente da que o utilizador escolheu para o próprio
   nó produziria uma incoerência visual nova. O glow acompanha sempre a
   cor real do nó, preservando o comportamento de personalização já
   existente — ver ARCHITECTURE_DECISION.md. Nunca acumula com o glow de
   seleção (a regra `.selected` mais abaixo já tem maior especificidade
   e substitui esta declaração inteiramente, nunca soma). */
.kv-node.central:not(.selected) {
  box-shadow:0 0 0 5px color-mix(in srgb,var(--node-color) 10%,transparent),0 0 22px color-mix(in srgb,var(--node-color) 55%,transparent);
}
.kv-node.has-image {
  width:72px;
  height:72px;
  background-image:var(--node-image);
  background-size:cover;
  background-position:center;
}
.kv-node.has-image::before { content:""; position:absolute; inset:0; border-radius:var(--sb-radius-circle); background:rgba(3,8,14,.38); }
.kv-node.selected,
.kv-question-card.selected,
.kv-observation.selected {
  box-shadow:0 0 0 8px color-mix(in srgb,var(--node-color) 22%,transparent),0 0 30px color-mix(in srgb,var(--node-color) 65%,transparent);
}
/* DS4 — estados Loading/Disabled/Error do Knowledge Card (COMPONENT_
   LIBRARY.md §5), formalizados como classes CSS prontas a usar. Nenhum
   destes três estados é atualmente despoletado por JS (não existe fluxo
   assíncrono de carregamento de nó nem modo só-leitura no código atual);
   introduzir esse despoletar seria alterar comportamento, fora do âmbito
   desta fase — ver ARCHITECTURE_DECISION.md. */
.kv-node.loading,
.kv-question-card.loading,
.kv-observation.loading {
  opacity:var(--sb-opacity-loading);
  box-shadow:none;
  animation:sbSkeletonPulse var(--sb-duration-loop) var(--sb-ease-standard) infinite;
}
.kv-node.disabled,
.kv-question-card.disabled,
.kv-observation.disabled {
  opacity:var(--sb-opacity-disabled);
  cursor:not-allowed;
}
/* Disabled hides the toolbar/ring too, but that's now driven by the
   engine's own [data-sb-state="disabled"] rule in interaction-engine.css
   (single source of truth — see REFACTOR note at top of this file). */
.kv-node.error,
.kv-question-card.error,
.kv-observation.error {
  border-color:var(--sb-error);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--sb-error) 16%, transparent), var(--sb-glow-error);
}

.kv-node-label {
  position:absolute;
  z-index:3;
  min-width:110px;
  max-width:200px;
  text-align:center;
  font-weight:750;
  line-height:1.18;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
  outline:none;
  text-shadow:0 2px 8px #000;
  color:var(--sb-text);
}
.kv-node-main-text { min-width:110px; }
.kv-node-subtitle,
.kv-node-subtitle-editor {
  display:block;
  width:100%;
  margin-top:3px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--sb-text);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-shadow:0 2px 8px #000;
}
.kv-node-subtitle-editor {
  min-width:110px;
  padding:2px 4px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--node-color) 55%,transparent);
}
.kv-node-child-texts {
  position:absolute;
  z-index:3;
  top:calc(100% + 4px);
  left:50%;
  width:max-content;
  min-width:110px;
  max-width:220px;
  transform:translateX(-50%);
  text-align:center;
}
.kv-node-child-text,
.kv-node-child-text-editor {
  display:block;
  width:100%;
  margin-top:3px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--sb-text);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-shadow:0 2px 8px #000;
}
.kv-node-child-text-editor {
  padding:2px 4px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--node-color) 55%,transparent);
}
.kv-concept-node > .sb-interactive-head { padding-bottom:4px; }
.kv-concept-node > .sb-interactive-head > .sb-interactive-toolbar { order:1; }
.kv-concept-node > .sb-interactive-head > .kv-node-label {
  position:static;
  order:2;
  left:auto;
  bottom:auto;
  transform:none;
}
.kv-label-above { left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); }
.kv-parenthetical { white-space:nowrap; }
.kv-floating-text {
  position:absolute;
  z-index:4;
  max-width:240px;
  transform:translate(-50%,-50%);
  color:var(--sb-text);
  font-size:15px;
  font-weight:750;
  line-height:1.2;
  text-align:center;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  cursor:grab;
  user-select:none;
  text-shadow:0 2px 8px #000;
}
.kv-canvas.insert-floating-text,
.kv-canvas.insert-floating-text .kv-node-layer { cursor:text; }
/* The "currently being renamed" treatment for a title/content element
   is now .sb-inline-editing, owned once by interaction-engine.css —
   see REFACTOR note at top of this file. */

/* Toolbar / interaction ring / connection ports for canvas objects are
   now owned entirely by interaction-engine.css (.sb-interactive-toolbar,
   .sb-interactive-ring) — see REFACTOR note at top of this file. This
   block used to define three competing versions of the same hover
   chrome (.kv-node-tools, .kv-port-ring, .kv-port); all removed. */

/* DS4 — Question Node. --node-color por omissão alinhado a --sb-primary
   (era um roxo próximo mas distinto, #8a6cff — sempre substituído por
   JS antes de qualquer render real, tal como .kv-node; ver nota acima). A
   forma pentagonal/de cartão continua a ser a única distinção face ao
   Concept Node, nunca a cor (COMPONENT_LIBRARY.md §8). */
.kv-question-card {
  --node-color:var(--sb-primary);
  position:absolute;
  width:235px;
  transform:translate(-50%,-50%);
  padding:var(--sb-space-4);
  border:1px solid color-mix(in srgb,var(--node-color) 55%,rgba(255,255,255,.12));
  border-radius:var(--sb-radius-lg);
  background:var(--sb-surface-2);
  box-shadow:var(--sb-shadow-2),0 0 22px color-mix(in srgb,var(--node-color) 18%,transparent);
  cursor:grab;
  user-select:none;
  transition:box-shadow var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-question-badge {
  position:absolute;
  top:-13px;
  left:-13px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:var(--sb-radius-circle);
  background:var(--node-color);
  box-shadow:0 0 18px color-mix(in srgb,var(--node-color) 70%,transparent);
  font-weight:800;
  color:var(--sb-text);
}
.kv-question-title { min-height:32px; font-weight:750; line-height:1.25; outline:none; color:var(--sb-text); }
.kv-question-answer {
  width:100%;
  min-height:64px;
  margin-top:9px;
  padding:9px 0 0;
  resize:none;
  border:0;
  border-top:1px solid var(--sb-border);
  outline:none;
  background:transparent;
  color:var(--sb-text-secondary);
  line-height:1.4;
}

/* DS4 — o tipo de dados chama-se "observation" no modelo (node.type),
   mas corresponde visualmente ao Argument Node de COMPONENT_LIBRARY.md
   §9 (uma afirmação/observação do utilizador, distinta de um conceito
   extraído) — mesma entidade, nome diferente entre o código e a
   Constituição Visual; ver ARCHITECTURE_DECISION.md. A cor de omissão
   (--sb-warning, um dourado/âmbar) é sempre substituída por JS antes de
   qualquer render real, tal como os restantes tipos de nó. */
.kv-observation {
  --node-color:var(--sb-warning);
  position:absolute;
  width:210px;
  min-height:72px;
  transform:translate(-50%,-50%);
  padding:var(--sb-space-4);
  border-left:3px solid var(--node-color);
  border-radius:4px var(--sb-radius-md) var(--sb-radius-md) 4px;
  background:var(--sb-surface-2);
  box-shadow:var(--sb-shadow-1);
  cursor:grab;
  user-select:none;
  transition:box-shadow var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-observation::before { content:"OBSERVAÇÃO"; display:block; margin-bottom:6px; color:var(--node-color); font-size:9px; letter-spacing:.13em; }
.kv-observation-text { line-height:1.38; outline:none; color:var(--sb-text); }

/* Inline create/edit input is now .sb-floating-input (interaction-engine.css)
   — see REFACTOR note at top of this file. */

.kv-reasoning-drawer {
  min-width:0;
  padding:16px;
  overflow:hidden;
  border-left:1px solid var(--sb-border);
  background:var(--sb-surface-1);
}
.kv-reasoning-drawer header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.kv-reasoning-drawer header small { display:block; color:var(--sb-text-muted); font-size:9px; letter-spacing:.13em; }
.kv-reasoning-drawer header strong { display:block; margin-top:3px; color:var(--sb-text); }
.kv-reasoning-drawer header button { border:0; background:transparent; color:var(--sb-text); font-size:21px; }
/* Unidade 3.2 — o "+" de nova nota fica junto ao "×" de fechar, dentro do
   próprio cabeçalho ("no cabeçalho", como pedido), sem alterar o botão de
   fechar em si. Seletor mais específico do que ".kv-reasoning-drawer
   header button" (acima) de propósito, para não herdar o seu
   font-size/estilo transparente — este botão tem o seu próprio visual,
   discreto e em forma de pílula, como o resto dos controlos do projeto. */
.kv-reasoning-header-actions { display:flex; align-items:center; gap:4px; }
.kv-reasoning-drawer header .kv-note-add {
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-xs);
  background:rgba(255,255,255,.05);
  color:var(--sb-text);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:background var(--sb-duration-fast) var(--sb-ease-standard), border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-reasoning-drawer header .kv-note-add:hover { background:color-mix(in srgb, var(--sb-primary) 22%, transparent); border-color:color-mix(in srgb, var(--sb-primary) 40%, transparent); }

/* Unidade 3.2 — barra de abas do painel "Estrutura Auxiliar". Cada aba
   representa uma nota (Unidade 3.1): nome, indicação visual de aba ativa,
   e um botão discreto de fechar — sem redimensionamento (fica para a
   Unidade 3.3). */
.kv-notes-tabbar {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.kv-note-tab {
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  max-width:140px;
  padding:5px 6px 5px 10px;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-sm);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  transition:border-color var(--sb-duration-fast) var(--sb-ease-standard), background var(--sb-duration-fast) var(--sb-ease-standard), color var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-note-tab.active {
  border-color:color-mix(in srgb, var(--sb-primary) 45%, transparent);
  background:color-mix(in srgb, var(--sb-primary) 14%, transparent);
  color:var(--sb-text);
}
.kv-note-tab-name {
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:11px;
  padding:0;
  max-width:96px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
  text-align:left;
}
.kv-note-tab-name-input {
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--sb-primary) 60%, transparent);
  background:transparent;
  color:var(--sb-text);
  font-size:11px;
  padding:0;
  width:96px;
  outline:none;
}
.kv-note-tab-close {
  border:0;
  background:transparent;
  color:inherit;
  opacity:.4;
  font-size:13px;
  line-height:1;
  padding:0;
  cursor:pointer;
  transition:opacity var(--sb-duration-fast) var(--sb-ease-standard), color var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-note-tab:hover .kv-note-tab-close { opacity:.75; }
.kv-note-tab-close:hover { opacity:1 !important; color:var(--sb-error); }

/* Unidade 3.2 — confirmação de eliminação, inline (sem popup nem
   `window.confirm`), consistente com o resto da interface do projeto.
   Só fica visível quando há um pedido de eliminação pendente. */
.kv-note-delete-confirm {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--sb-error) 28%, transparent);
  border-radius:var(--sb-radius-sm);
  background:color-mix(in srgb, var(--sb-error) 10%, transparent);
  color:var(--sb-text);
  font-size:11px;
}
.kv-note-delete-confirm span { flex:1; }
.kv-note-delete-confirm span b { color:var(--sb-text); }
.kv-note-delete-confirm button {
  border:0;
  border-radius:var(--sb-radius-xs);
  padding:5px 9px;
  font-size:11px;
  cursor:pointer;
}
.kv-note-delete-confirm [data-confirm-delete-note] { background:color-mix(in srgb, var(--sb-error) 38%, transparent); color:var(--sb-text); }
.kv-note-delete-confirm [data-cancel-delete-note] { background:rgba(255,255,255,.08); color:var(--sb-text); }

.kv-reasoning-drawer textarea {
  width:100%;
  /* Unidade 3.2 — reserva também a altura da nova barra de abas (a
     confirmação de eliminação fica oculta por omissão e não ocupa
     espaço, tal como o resto dos elementos ".hidden" do projeto). */
  height:calc(100% - 149px);
  resize:none;
  border:1px solid var(--sb-border);
  border-radius:var(--sb-radius-md);
  padding:13px;
  outline:none;
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  line-height:1.55;
}
.kv-reasoning-drawer p { color:var(--sb-text-muted); font-size:10px; line-height:1.45; }

/* DS6 — Inspector (COMPONENT_LIBRARY.md §17): painel flutuante sobre o
   Canvas, mesma família visual de "vidro" que a toolbar flutuante. */
.kv-inspector {
  position:absolute;
  z-index:30;
  top:14px;
  right:14px;
  width:300px;
  max-height:calc(100% - 28px);
  padding:15px;
  overflow:auto;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-lg);
  background:var(--sb-surface-2);
  box-shadow:var(--sb-shadow-2);
}
.kv-inspector header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.kv-inspector header small { display:block; color:var(--sb-text-muted); font-size:9px; letter-spacing:.13em; }
.kv-inspector header strong { display:block; margin-top:3px; color:var(--sb-text); }
.kv-inspector header button { border:0; background:transparent; color:var(--sb-text); font-size:20px; }
.kv-inspector label { display:block; margin:10px 0 6px; color:var(--sb-text-secondary); font-size:11px; }
.kv-inspector input,
.kv-inspector select,
.kv-inspector textarea {
  width:100%;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-sm);
  padding:9px;
  outline:none;
  background:var(--sb-surface-1);
  color:var(--sb-text);
}
.kv-inspector textarea { min-height:80px; resize:vertical; }
.kv-inspector .secondary,
.kv-inspector .danger { width:100%; margin-top:10px; border-radius:var(--sb-radius-sm); padding:9px; }
.kv-inspector .secondary { border:1px solid var(--sb-border); background:var(--sb-surface-2); color:var(--sb-text); }
.kv-inspector .danger { border:1px solid color-mix(in srgb, var(--sb-error) 28%, transparent); background:color-mix(in srgb, var(--sb-error) 13%, transparent); color:var(--sb-text); }
.kv-inspector .danger:disabled { opacity:var(--sb-opacity-disabled); cursor:not-allowed; }

.kv-synthesis {
  height:100%;
  padding:28px;
  overflow:auto;
  background:
    radial-gradient(circle at 65% 15%,color-mix(in srgb, var(--sb-primary) 11%, transparent),transparent 30%),
    var(--sb-bg-canvas);
}
.kv-synthesis-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.kv-synthesis-hero small,
.kv-synthesis-section header span { color:var(--sb-text-muted); font-size:9px; letter-spacing:.15em; }
.kv-synthesis-hero h2 { margin:5px 0 3px; color:var(--sb-text); }
.kv-synthesis-hero p { margin:0; color:var(--sb-text-secondary); }
.kv-synthesis-badge { padding:7px 10px; border:1px solid color-mix(in srgb, var(--sb-primary) 30%, transparent); border-radius:var(--sb-radius-pill); background:color-mix(in srgb, var(--sb-primary) 14%, transparent); color:var(--sb-text); font-size:10px; }
.kv-synthesis-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; margin-top:22px; }
/* DS4 — os Summary Cards seguem a mesma família visual do Knowledge Card
   (fundo --sb-surface-2, nunca colorido por tipo, radius --sb-radius-md/lg). */
.kv-summary-card { padding:16px; border:1px solid var(--sb-border-strong); border-radius:var(--sb-radius-lg); background:var(--sb-surface-2); box-shadow:var(--sb-shadow-1); transition:box-shadow var(--sb-duration-fast) var(--sb-ease-standard); }
.kv-summary-card > span { color:var(--sb-text-secondary); font-size:11px; }
.kv-summary-card strong { display:block; margin:5px 0 3px; font-size:26px; color:var(--sb-text); font-variant-numeric:tabular-nums; }
.kv-summary-card small { color:var(--sb-text-muted); }
.kv-synthesis-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.kv-synthesis-section { margin-top:14px; padding:18px; border:1px solid var(--sb-border); border-radius:var(--sb-radius-lg); background:var(--sb-surface-1); }
.kv-synthesis-columns .kv-synthesis-section { margin-top:0; }
.kv-synthesis-section h3 { margin:4px 0 13px; color:var(--sb-text); }
.kv-synthesis-section textarea { width:100%; min-height:120px; resize:vertical; border:1px solid var(--sb-border); border-radius:var(--sb-radius-md); padding:12px; outline:none; background:var(--sb-surface-1); color:var(--sb-text-secondary); line-height:1.5; }
.kv-synthesis-section ul { margin:0; padding-left:20px; }
.kv-synthesis-section li { margin:9px 0; color:var(--sb-text-secondary); }
.kv-synthesis-section li p { margin:4px 0 0; color:var(--sb-text-muted); }
/* Chips (COMPONENT_LIBRARY.md §22) — --chip-color continua a ser definida
   por instância (cor do próprio conceito), nunca substituída por um
   token fixo, pelo que um chip mantém a identidade cromática do conceito
   que representa. */
.kv-concept-chips { display:flex; flex-wrap:wrap; gap:8px; }
.kv-concept-chips span { padding:7px 10px; border:1px solid color-mix(in srgb,var(--chip-color) 55%,rgba(255,255,255,.1)); border-radius:var(--sb-radius-pill); background:color-mix(in srgb,var(--chip-color) 12%,transparent); color:var(--sb-text); }
.kv-concept-chips span.observation { border-radius:var(--sb-radius-xs); }
.kv-note-preview p { white-space:pre-wrap; color:var(--sb-text-secondary); line-height:1.6; }

@media(max-width:1100px) {
  /* Unidade 4.1 — mesmo modificador renomeado (ver regra base), mesmo
     valor de sempre. */
  .knowledge-view-tabs--four .knowledge-view-tab { min-width:130px; }
  .kv-floating-toolbar button span { display:none; }
  /* Unidade 3.3 — mesma ideia da regra base: 270px era o valor fixo já
     usado a este breakpoint antes desta unidade, e mantém-se como reserva;
     `--reasoning-width` (já limitada, em applyReasoningWidth, ao espaço
     disponível neste ecrã mais estreito) continua a ter prioridade assim
     que o JS a aplica. */
  .kv-investigation.reasoning-open { grid-template-columns:minmax(0,1fr) 6px var(--reasoning-width, 270px); }
  .kv-synthesis-grid { grid-template-columns:repeat(2,minmax(150px,1fr)); }
}

@media(max-width:760px) {
  .knowledge-view-tabs { justify-content:flex-start; padding-inline:10px; }
  /* Unidade 4.1 — mesmo modificador renomeado (ver regra base), mesmo
     valor de sempre. */
  .knowledge-view-tabs--four .knowledge-view-tab { min-width:112px; }
  .knowledge-view-tab small { display:none; }
  .kv-investigation.reasoning-open { grid-template-columns:1fr; }
  .kv-reasoning-drawer { position:absolute; z-index:35; top:0; right:0; bottom:0; width:min(330px,88%); }
  /* Unidade 3.3 — a este breakpoint a gaveta já passa a sobreposição
     absoluta (comportamento existente, não alterado); o redimensionamento
     não faz sentido nesse modo, por isso o manípulo fica escondido, sem
     tocar em mais nada do comportamento responsivo já existente. */
  .kv-reasoning-resize-handle { display:none; }
  .kv-synthesis { padding:18px; }
  .kv-synthesis-columns { grid-template-columns:1fr; }
}

/* =========================================================
   FINAL UX — INTERAÇÃO MINIMALISTA
   ========================================================= */

/* DS5 — Toolbar flutuante minimalista: mesma família visual (vidro,
   sombra, radius) das restantes toolbars flutuantes (.kv-floating-toolbar,
   .kv-reasoning-toggle) — nunca deixar uma migrada e outra por migrar. */
.kv-minimal-toolbar {
  top:16px;
  gap:8px;
  padding:6px;
  border-radius:var(--sb-radius-lg);
  background:var(--sb-surface-1);
  box-shadow:var(--sb-shadow-2);
}
.kv-minimal-toolbar button {
  min-width:118px;
  justify-content:center;
  padding:10px 15px;
  border-radius:var(--sb-radius-md);
  font-weight:650;
  letter-spacing:.01em;
  transition:transform var(--sb-duration-base) var(--sb-ease-standard),background var(--sb-duration-fast) var(--sb-ease-standard),border-color var(--sb-duration-fast) var(--sb-ease-standard),box-shadow var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-minimal-toolbar button:hover {
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--sb-primary-strong) 38%, transparent);
}
.kv-minimal-toolbar .kv-tool-icon {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:var(--sb-radius-sm);
  background:color-mix(in srgb, var(--sb-primary) 16%, transparent);
  color:var(--sb-text);
  font-size:15px;
}

.kv-reasoning-toggle {
  position:absolute;
  z-index:24;
  top:17px;
  right:18px;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:55px;
  height:42px;
  padding:0 12px;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-md);
  background:var(--sb-surface-1);
  color:var(--sb-text);
  box-shadow:var(--sb-shadow-1);
  backdrop-filter:blur(12px);
  transition:background var(--sb-duration-fast) var(--sb-ease-standard),transform var(--sb-duration-fast) var(--sb-ease-standard),border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-reasoning-toggle:hover {
  transform:translateY(-1px);
  background:var(--sb-surface-2);
  border-color:color-mix(in srgb, var(--sb-primary-strong) 34%, transparent);
}
.kv-reasoning-toggle span { font-size:18px; line-height:1; }
.kv-reasoning-toggle b { font-size:12px; color:var(--sb-text-secondary); }

.kv-status {
  top:69px;
  opacity:.84;
  transition:opacity var(--sb-duration-base) var(--sb-ease-standard);
}

/* Second superseded copy of the toolbar/ring/port chrome — removed, see
   REFACTOR note at top of this file (interaction-engine.css owns it now). */

/* DS5 — pré-visualização de um agrupamento em criação; usa sempre a cor
   de marca (--sb-primary), nunca a cor semântica de relação (o
   agrupamento ainda não tem uma identidade de cor própria definida pelo
   utilizador nesta fase do gesto). */
.kv-group-draft {
  fill-opacity:.035;
  stroke-dasharray:5 5;
}
.kv-group-draft-point {
  fill:#f0edff;
  stroke:var(--sb-primary);
  stroke-width:2;
  filter:drop-shadow(0 0 6px var(--sb-primary));
}

.kv-question-drag-ghost {
  position:fixed;
  z-index:99999;
  transform:translate(-50%,-50%);
  padding:11px 15px;
  border:1px solid color-mix(in srgb, var(--sb-primary-strong) 55%, transparent);
  border-radius:var(--sb-radius-lg);
  background:var(--sb-surface-2);
  color:var(--sb-text);
  box-shadow:var(--sb-shadow-2),var(--sb-glow-primary);
  pointer-events:none;
  backdrop-filter:blur(12px);
  font-weight:700;
}

.kv-inspector {
  top:72px;
  width:330px;
  border-radius:var(--sb-radius-lg);
  padding:17px;
  background:var(--sb-surface-2);
  backdrop-filter:blur(18px);
}
.kv-image-choice {
  display:grid;
  gap:10px;
}
.kv-upload-choice,
.kv-url-choice {
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:10px;
  padding:13px;
  border:1px solid var(--sb-border);
  border-radius:var(--sb-radius-lg);
  background:rgba(255,255,255,.025);
}
.kv-upload-choice { cursor:pointer; }
.kv-upload-choice:hover,
.kv-url-choice:hover { border-color:color-mix(in srgb, var(--sb-primary-strong) 34%, transparent); background:color-mix(in srgb, var(--sb-primary) 6%, transparent); }
.kv-upload-choice > span,
.kv-url-choice > span {
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--sb-radius-md);
  background:color-mix(in srgb, var(--sb-primary) 14%, transparent);
  color:var(--sb-text);
}
.kv-image-choice strong { font-size:12px; color:var(--sb-text); }
.kv-image-choice small { color:var(--sb-text-muted); font-size:10px; }
.kv-upload-choice input { display:none; }
.kv-url-choice input,
.kv-url-choice button { grid-column:1/3; }
.kv-url-choice button {
  margin-top:8px;
  padding:9px;
  border:1px solid color-mix(in srgb, var(--sb-primary-strong) 28%, transparent);
  border-radius:var(--sb-radius-sm);
  background:var(--sb-primary-strong);
  color:var(--sb-text);
}

@media(max-width:760px) {
  .kv-minimal-toolbar { left:12px; transform:none; }
  .kv-minimal-toolbar button { min-width:auto; }
  .kv-reasoning-toggle { right:10px; }
}


/* =========================================================
   PATCH FINAL — CONECTORES, IMAGENS E LINHAS FLEXÍVEIS
   ========================================================= */

/* `.kv-edge-hit`/`.kv-edge-handle` (the hit-path/bend-handle styling
   that used to live here) are now `.sb-connection-hit`/
   `.sb-connection-handle` in connection-engine.css — see the DS5 note
   near `.kv-edge-interaction` above. `.kv-edge-interaction` itself
   (the layer div) stays: it's still the Connection Engine's `hitLayer`
   for this panel, just no longer styled from this file. */

/* Third superseded copy of the toolbar/ring/port chrome, plus the old
   .kv-node-head hover-region fix (the "Unidade 1.1" partial fix for the
   exact flicker bug this mission's interaction-engine.css now solves for
   ALL object types, not just concept nodes) — removed, see REFACTOR note
   at top of this file. */

/* X dedicado que remove somente a imagem. */
.kv-remove-node-image {
  position:absolute;
  z-index:15;
  top:-7px;
  right:-7px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-circle);
  background:var(--sb-surface-1);
  color:var(--sb-text);
  font-size:16px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transform:scale(.86);
  transition:opacity var(--sb-duration-fast) var(--sb-ease-standard),transform var(--sb-duration-fast) var(--sb-ease-standard),background var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-node.has-image:hover .kv-remove-node-image {
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}
.kv-remove-node-image:hover { background:var(--sb-error); }

/* Second superseded .kv-inline-editor copy — removed, see REFACTOR note
   at top of this file (.sb-floating-input in interaction-engine.css owns
   inline create/edit input now). */

/* =========================================================
   UNIDADE 4.1 — MODO ESTRUTURA (infraestrutura base)
   UNIDADE 4.2 — primeira versão funcional (árvore hierárquica)
   O painel deixou de estar centrado (Unidade 4.1, só uma mensagem) para
   ser uma coluna com scroll (cabeçalho fixo + árvore), já que a árvore
   pode crescer mais do que o espaço disponível. Continua a reutilizar o
   fundo/posicionamento já estabelecidos por .knowledge-panel.
   ========================================================= */
.kv-structure {
  display:flex;
  flex-direction:column;
  background:var(--sb-bg-canvas);
  overflow:auto;
}
.kv-structure-header {
  flex:0 0 auto;
  max-width:560px;
  padding:32px 32px 12px;
  color:var(--sb-text-secondary);
}
.kv-structure-header small {
  display:block;
  margin-bottom:10px;
  color:var(--sb-primary-strong);
  letter-spacing:.08em;
  font-size:11px;
  text-transform:uppercase;
}
.kv-structure-header h2 { margin:0 0 12px; color:var(--sb-text); font-size:20px; }
.kv-structure-header p { margin:0; line-height:1.6; }

.kv-structure-tree-container { flex:1 1 auto; padding:12px 32px 32px; }

/* Unidade 4.2 — árvore: lista aninhada simples (<ul>/<li>), o mesmo tipo de
   estrutura semântica já usada noutras listas do projeto (ex.: as listas
   de descobertas/questões em .kv-synthesis-section) — sem introduzir
   nenhuma biblioteca ou motor de layout novo. */
.kv-structure-tree, .kv-structure-children {
  list-style:none;
  margin:0;
  padding:0;
}
.kv-structure-children { margin-left:22px; padding-left:14px; border-left:1px solid var(--sb-border); }
/* Bloco 5 — os filhos passam a estar sempre no DOM (ver `renderStructureEntry`
   em knowledge-views.js); esta wrapper é o que torna possível animar
   abrir/fechar sem medir alturas em JS. A técnica `grid-template-rows`
   1fr → 0fr é a forma padrão de animar para/de "altura automática" em CSS
   puro: o conteúdo real (`.kv-structure-children`, com `overflow:hidden` e
   `min-height:0`) fica dentro de uma única linha de grelha cuja fração se
   anima; a duração/easing coincide com a transição do ícone de alternar,
   logo abaixo, para que abrir/fechar pareça um único movimento. */
.kv-structure-children-wrap {
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows var(--sb-duration-base) var(--sb-ease-standard), opacity var(--sb-duration-base) var(--sb-ease-standard);
  opacity:1;
}
.kv-structure-children-wrap > .kv-structure-children {
  overflow:hidden;
  min-height:0;
}
.kv-structure-node.collapsed > .kv-structure-children-wrap {
  grid-template-rows:0fr;
  opacity:0;
}
.kv-structure-node { margin:2px 0; }
.kv-structure-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:var(--sb-radius-sm);
  /* Bloco 5 — suaviza a troca de destaque ao mudar a seleção
     (`patchStructureSelection`, que já não reconstrói a linha, só troca a
     classe) e o hover já existente desde a Unidade 4.2. */
  transition:background-color var(--sb-duration-fast) var(--sb-ease-standard), box-shadow var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-structure-row { cursor:pointer; }
.kv-structure-row:hover { background:rgba(30,44,62,.6); }
.kv-structure-node.central > .kv-structure-row { background:color-mix(in srgb, var(--sb-primary) 14%, transparent); }
/* Unidade 4.3 — estado de seleção, sincronizado com a Investigação via
   `selectedIds`. Depois da regra ".central" de propósito, para que um
   conceito central que esteja também selecionado mostre o destaque de
   seleção por cima do destaque de "central". */
.kv-structure-node.selected > .kv-structure-row { background:color-mix(in srgb, var(--sb-primary) 32%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sb-primary) 70%, transparent); }

.kv-structure-toggle {
  flex:0 0 auto;
  width:18px;
  height:18px;
  border:0;
  background:transparent;
  color:var(--sb-text-muted);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  /* Bloco 5 — o glifo do botão é sempre "▾" (ver `renderStructureEntry` em
     knowledge-views.js); a diferença visual entre "aberto" e "fechado" é
     só esta rotação, o que permite animá-la suavemente ao alternar um
     ramo — uma troca de caractere não poderia ser animada por transição
     CSS. Ramo aberto = apontar para baixo (0°); ramo fechado = apontar
     para a direita (-90°), a mesma direção que o antigo glifo "▸". */
  transition:transform var(--sb-duration-base) var(--sb-ease-standard);
}
.kv-structure-node.collapsed > .kv-structure-row > .kv-structure-toggle {
  transform:rotate(-90deg);
}
.kv-structure-toggle.empty { visibility:hidden; cursor:default; }

.kv-structure-dot {
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-radius:var(--sb-radius-circle);
  background:var(--chip-color, var(--sb-secondary));
}

.kv-structure-name { color:var(--sb-text); font-size:13px; }
.kv-structure-node.central .kv-structure-name { font-weight:700; color:var(--sb-text); }

.kv-structure-type {
  margin-left:auto;
  color:var(--sb-text-muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Bloco 6 — botão "Mudar pai" (requisito 1). Escondido até ao hover/foco da
   própria linha para não competir visualmente com o nome do conceito numa
   árvore com muitos ramos — o mesmo princípio já usado pela toolbar
   flutuante dos nós no Canvas (`.sb-interactive-toolbar`, interaction-engine.css). Continua
   sempre presente no DOM e sempre acessível por teclado (`:focus-visible`),
   nunca só por CSS puro `display:none` condicional a um estado JS — este
   bloco não introduz nenhum novo mecanismo de "menu de contexto avançado",
   só um botão simples com visibilidade sensível ao hover, consistente com
   o resto da interface existente. */
.kv-structure-reparent-btn {
  flex:0 0 auto;
  margin-left:8px;
  padding:3px 9px;
  border:1px solid var(--sb-border-strong);
  border-radius:var(--sb-radius-pill);
  background:var(--sb-surface-1);
  color:var(--sb-text-secondary);
  font-size:10px;
  letter-spacing:.02em;
  cursor:pointer;
  opacity:0;
  transition:opacity var(--sb-duration-fast) var(--sb-ease-standard), background-color var(--sb-duration-fast) var(--sb-ease-standard), color var(--sb-duration-fast) var(--sb-ease-standard), border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.kv-structure-row:hover .kv-structure-reparent-btn,
.kv-structure-reparent-btn:focus-visible,
.kv-structure-reparent-btn.active {
  opacity:1;
}
.kv-structure-reparent-btn:hover {
  background:color-mix(in srgb, var(--sb-primary) 18%, transparent);
  color:var(--sb-text);
  border-color:color-mix(in srgb, var(--sb-primary) 50%, transparent);
}
.kv-structure-reparent-btn.active {
  background:color-mix(in srgb, var(--sb-primary) 32%, transparent);
  color:var(--sb-text);
  border-color:color-mix(in srgb, var(--sb-primary) 70%, transparent);
}

/* Bloco 6 — seletor inline de novo pai (requisito 1: sem drag & drop, uma
   interação simples — um <select> nativo, o mesmo padrão já usado nas abas
   de notas da Unidade 3.2 — em vez de qualquer menu de contexto avançado).
   Aparece como uma segunda linha dentro do mesmo <li>, entre a linha
   principal e os filhos, para deixar claro a que conceito pertence sem
   precisar de nenhum popover ou sobreposição. */
.kv-structure-parent-picker {
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0 4px 26px;
  padding:8px 10px;
  border-radius:var(--sb-radius-sm);
  background:color-mix(in srgb, var(--sb-primary) 8%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sb-primary) 24%, transparent);
}
.kv-structure-parent-picker-label {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--sb-text-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.kv-structure-parent-picker-label select {
  padding:4px 8px;
  border-radius:var(--sb-radius-xs);
  border:1px solid var(--sb-border-strong);
  background:var(--sb-surface-1);
  color:var(--sb-text);
  font-size:12px;
  text-transform:none;
  letter-spacing:normal;
  max-width:260px;
}
.kv-structure-cancel-parent {
  margin-left:auto;
  padding:4px 10px;
  border:1px solid transparent;
  border-radius:var(--sb-radius-xs);
  background:transparent;
  color:var(--sb-text-muted);
  font-size:11px;
  cursor:pointer;
}
.kv-structure-cancel-parent:hover {
  color:var(--sb-text);
  border-color:var(--sb-border-strong);
}

/* ---------- Hidden Pattern v2.1 — Borracha ---------- */
.kv-canvas.erase-mode, .kv-canvas.erase-mode * { cursor: crosshair !important; }
.kv-canvas.erase-mode .kv-node-layer [data-node-id]:hover,
.kv-canvas.erase-mode .kv-floating-text:hover,
.kv-canvas.erase-mode .kv-node-child-text:hover { outline: 2px dashed rgba(251, 113, 133, .7); outline-offset: 4px; border-radius: 12px; }
.kv-erase-marked { outline: 3px solid #fb7185 !important; outline-offset: 4px; border-radius: 12px; box-shadow: 0 0 24px rgba(251, 113, 133, .55) !important; }
path.kv-erase-marked, [data-connection-id].kv-erase-marked { outline: none !important; stroke: #fb7185 !important; stroke-width: 5px !important; filter: drop-shadow(0 0 6px #fb7185); }
.kv-erase-group { fill: rgba(251, 113, 133, .22); stroke: #fb7185; stroke-width: 3; stroke-dasharray: 6 4; pointer-events: none; }
.kv-erase-rect { position: absolute; z-index: 30; border: 1.5px dashed #fb7185; background: rgba(251, 113, 133, .1); border-radius: 6px; pointer-events: none; }
.kv-erase-bar {
  position: absolute; left: 50%; bottom: 18px; z-index: 40; transform: translateX(-50%);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  max-width: min(760px, calc(100% - 24px)); padding: 10px 12px 10px 16px; border-radius: 14px;
  background: rgba(20, 10, 18, .95); border: 1px solid rgba(251, 113, 133, .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); color: var(--sb-text); font-size: 13px;
}
.kv-erase-bar.hidden { display: none; }
.kv-erase-bar span { flex: 1 1 260px; line-height: 1.45; }
.kv-erase-bar button { height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(148, 163, 184, .3); background: rgba(255, 255, 255, .05); color: var(--sb-text); font-weight: 600; cursor: pointer; }
.kv-erase-bar .kv-erase-danger { background: #e11d48; border-color: #e11d48; color: #fff; }
.kv-erase-option { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sb-text-secondary); }

/* =========================================================
   Hidden Pattern v2.1 — Estrutura Auxiliar: árvore + editor rico
   ========================================================= */
.kv-reasoning-drawer:not(.hidden) { display:flex; flex-direction:column; gap:8px; }
.kv-reasoning-drawer header { flex:none; margin-bottom:4px; }
.kv-aux-tree { flex:none; max-height:38%; overflow:auto; padding:4px; border:1px solid var(--sb-border); border-radius:var(--sb-radius-md); background:rgba(0,0,0,.14); }
.kv-aux-row { display:flex; align-items:center; gap:6px; height:28px; padding:0 8px 0 calc(6px + var(--d,0) * 14px); border-radius:7px; color:var(--sb-text-secondary); font-size:12.5px; cursor:pointer; user-select:none; outline:none; }
.kv-aux-row:hover { background:rgba(255,255,255,.05); color:var(--sb-text); }
.kv-aux-row:focus-visible { box-shadow:inset 0 0 0 1px var(--sb-primary); }
.kv-aux-row.active { background:color-mix(in srgb, var(--sb-primary) 22%, transparent); color:var(--sb-text); }
.kv-aux-caret { width:10px; flex:none; color:var(--sb-text-muted); font-size:10px; }
.kv-aux-ico { flex:none; font-size:13px; }
.kv-aux-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kv-aux-row .kv-note-tab-name-input { flex:1; min-width:0; height:22px; }
.kv-aux-empty { margin:6px; }
.kv-note-delete-confirm small { display:block; margin-top:3px; color:var(--sb-text-muted); font-size:10.5px; }
.kv-aux-note { flex:1; min-height:120px; display:flex; flex-direction:column; overflow:auto; border:1px solid var(--sb-border); border-radius:var(--sb-radius-md); background:var(--sb-surface-1); position:relative; }
.kv-aux-note.hidden { display:none; }
.kv-aux-title { flex:none; padding:10px 13px 0; color:var(--sb-text); font-weight:600; font-size:13px; }
.kv-aux-toolbar-slot { flex:none; position:sticky; top:0; z-index:2; background:var(--sb-surface-1); }
.kv-aux-toolbar-slot .nep-toolbar { border-radius:0; border-left:0; border-right:0; flex-wrap:wrap; }
.kv-aux-editor { flex:1; min-height:120px; padding:12px 13px 30px; outline:none; color:var(--sb-text-secondary); line-height:1.55; font-size:13.5px; overflow-wrap:anywhere; }
.kv-aux-editor:empty::before { content:attr(data-placeholder); color:var(--sb-text-muted); pointer-events:none; }
.kv-aux-editor img { max-width:100%; height:auto; }
.kv-aux-menu { position:fixed; z-index:23000; min-width:200px; padding:5px; border-radius:11px; display:flex; flex-direction:column; gap:1px; background:rgba(13,21,34,.98); border:1px solid rgba(148,163,184,.22); box-shadow:0 20px 60px rgba(0,0,0,.6); font-family:var(--sb-font-family); }
.kv-aux-menu button { text-align:left; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:var(--sb-text); font-size:13px; cursor:pointer; white-space:nowrap; }
.kv-aux-menu button:hover, .kv-aux-menu button:focus-visible { background:rgba(124,92,255,.2); outline:none; }
.kv-aux-menu button.danger { color:#fda4af; }
.kv-aux-menu button.danger:hover, .kv-aux-menu button.danger:focus-visible { background:rgba(251,113,133,.16); }
.kv-aux-sep { height:1px; margin:4px 6px; background:rgba(148,163,184,.18); }
.kv-aux-toolbar-slot .nep-toolbar{margin:0;padding:6px 8px;position:static}
.hp-search-reveal{animation:hpSearchReveal 1.8s ease-out}@keyframes hpSearchReveal{0%,40%{filter:drop-shadow(0 0 14px #facc15)}}