/* ==========================================================================
   Perfect Cortex — tema tipográfico
   Carregado DEPOIS do CSS de produção. Serifa nos títulos, sans no corpo —
   o par usado pela Anthropic (Tiempos/Styrene, hoje proprietárias) nas suas
   equivalentes livres mais próximas: Source Serif 4 + Inter.
   ========================================================================== */
:root {
  /* acento do Perfect Cortex: laranja no lugar do roxo herdado */
  --accent: #ef7f2f;
  --accent-strong: #ffb07a;
  --pc-accent: #ef7f2f;
  --pc-accent-deep: #d9631a;
  --pc-accent-soft: rgba(239, 127, 47, .22);
  --pc-accent-glow: rgba(239, 127, 47, .45);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", "Times New Roman", Georgia, serif;

  /* --- movimento ---------------------------------------------------------
     Três tempos e três curvas, e nada fora disso. O que entra na tela usa
     `spring` (passa um fio do ponto e volta, dá peso); o que sai e o que
     responde ao dedo usa `out` (rápido e decidido); o que recolhe usa `in`
     (começa devagar e acelera, como quem guarda). */
  /* largura da coluna da memória — usada também para afastar o avatar */
  --pc-painel: min(620px, 44vw);

  --t-quick: 130ms;
  --t-base: 220ms;
  --t-slow: 340ms;
  --ease-out: cubic-bezier(.16, .84, .28, 1);
  --ease-spring: cubic-bezier(.22, 1.3, .36, 1);
  --ease-in: cubic-bezier(.55, .06, .68, .19);
}

body, button, input, select, textarea { font-family: var(--font-sans); }
body { font-feature-settings: "cv11", "ss01"; }  /* Inter: formas mais próximas da Styrene */

/* títulos e display em serifa */
h1, h2,
.login-promise h1,
.connect-guide h3,
.lesson h3,
.graph-detail h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.login-promise h1 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; }
h1 { font-size: 26px; }
.login-heading h2 { font-size: 22px; }

/* marca */
.brand span { font-family: var(--font-serif); font-weight: 500; font-size: 18px; letter-spacing: 0; }
.brand strong { font-weight: 600; }

/* rótulos pequenos em caixa alta continuam sans */
.gp-visual-legend h3, .gp-section-head, .brand-kicker, .eyebrow, .md-links-title, table.tokens th { font-family: var(--font-sans); }

/* O app original é React e remove elementos do DOM; as nossas páginas (login,
   empresas) e os nossos blocos usam o atributo hidden — que precisa vencer
   regras como .overlay{display:flex}. Era a única coisa que css/app.css tinha
   além da cópia do CSS do app; agora as páginas usam /assets/app-pc1.css direto. */
[hidden] { display: none !important; }

/* ==========================================================================
   Controles flutuantes — a coluna da direita sai; as configurações viram
   botões pequenos num dock no canto inferior direito do palco.
   ========================================================================== */
.graph-view { grid-template-columns: 232px 1fr !important; }
#mobile-controls-command { display: none !important; }       /* conteúdo foi para o dock */
#pc-panel-host { display: none; }                            /* guarda o painel fechado */

#pc-dock {
  position: absolute; right: 18px; bottom: 18px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  /* a caixa do dock é larga (por causa do interruptor) e ficava por cima da
     faixa direita do popover, engolindo os cliques. Só os controles capturam. */
  pointer-events: none;
}
#pc-dock .pc-items { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#pc-dock .pc-bottom { display: flex; align-items: center; gap: 10px; pointer-events: none; }
#pc-dock .pc-fab, #pc-dock .pc-switch { pointer-events: auto; }

/* seletor de córtex — "tipo uma rolagem": setas, roda do mouse e menu com a
   lista. Mesmo material do interruptor ao lado. */
.pc-cortex {
  position: relative; display: flex; align-items: center; gap: 0;
  padding: 4px; border-radius: 999px;
  border: 1px solid rgba(138, 170, 235, .26);
  background: rgba(10, 21, 38, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
#pc-dock .pc-cortex { pointer-events: auto; }
.pc-cortex-seta {
  width: 30px; height: 32px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: #93a7c9; cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
.pc-cortex-seta svg { width: 15px; height: 15px; }
.pc-cortex-seta:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.pc-cortex-seta:active svg { transform: scale(.9); }
.pc-cortex-seta:disabled { opacity: .3; cursor: default; background: none; }
.pc-cortex-nome {
  display: flex; align-items: baseline; gap: 5px; max-width: 190px; min-width: 0; height: 32px;
  padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
  font-family: var(--font-serif); font-size: 14px; line-height: 32px; white-space: nowrap;
}
.pc-cortex-pre { font-style: italic; font-weight: 400; font-size: 13px; color: #93a7c9; }
.pc-cortex-nome strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-quick) var(--ease-out); }
.pc-cortex-nome:hover strong, .pc-cortex-nome[aria-expanded="true"] strong { color: var(--pc-accent); }
.pc-cortex-nome:focus-visible, .pc-cortex-seta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pc-cortex.pc-so-um .pc-cortex-seta { display: none; }
@keyframes pc-desliza-dir { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes pc-desliza-esq { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.pc-cortex-nome.pc-desliza-dir { animation: pc-desliza-dir var(--t-base) var(--ease-out); }
.pc-cortex-nome.pc-desliza-esq { animation: pc-desliza-esq var(--t-base) var(--ease-out); }
.pc-src-menu-item.off { opacity: .45; cursor: default; }
.pc-src-menu-item.off:hover { background: transparent; color: #cbd8f0; }
.pc-src-menu-item.off:hover svg { color: #8296b8; }
.pc-src-menu-hint { flex: none; font-size: 10.5px; font-style: italic; color: #7f93b8; white-space: nowrap; }
.pc-cortex-pop { min-width: 220px; }

/* troca de córtex no Mapa 2D — o mapa vivo sai deslizando para um lado, fica
   escondido enquanto o app redesenha e entra pelo lado oposto. Só transform e
   opacidade: o tamanho não muda, então o ResizeObserver do app não acorda. */
.graph-stage.pc-mapa-sai .graph-canvas,
.graph-stage.pc-mapa-sai .graph-overlay { animation: pc-mapa-sai 300ms var(--ease-in) both; }
@keyframes pc-mapa-sai { to { opacity: 0; transform: translateX(calc(var(--pc-lado, 1) * -90px)) scale(.97); } }
.graph-stage.pc-mapa-oculto .graph-canvas,
.graph-stage.pc-mapa-oculto .graph-overlay { opacity: 0; }
.graph-stage.pc-mapa-entra .graph-canvas,
.graph-stage.pc-mapa-entra .graph-overlay { animation: pc-mapa-entra 560ms var(--ease-out) both; }
@keyframes pc-mapa-entra { from { opacity: 0; transform: translateX(calc(var(--pc-lado, 1) * 90px)) scale(.97); } }

/* interruptor Córtex 3D / Mapa 2D */
.pc-switch {
  position: relative; display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  border: 1px solid rgba(138, 170, 235, .26);
  background: rgba(10, 21, 38, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.pc-switch-thumb {
  position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(120deg, var(--pc-accent-deep), var(--pc-accent));
  box-shadow: 0 2px 12px var(--pc-accent-glow);
  transition: transform .26s cubic-bezier(.4, 1.3, .5, 1);
}
.pc-switch.is-2d .pc-switch-thumb { transform: translateX(100%); }
.pc-switch-opt {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 0; border-radius: 999px; background: transparent;
  color: #93a7c9; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: color .2s ease;
}
.pc-switch-opt svg { width: 16px; height: 16px; flex: none; }
.pc-switch-opt:hover { color: #cfe0ff; }
.pc-switch-opt.on { color: #fff; }
.pc-switch-opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pc-fab {
  position: relative;                    /* âncora do rótulo (senão ele empurra o layout) */
  width: 44px; height: 44px; min-width: 44px; max-width: 44px; flex: none; padding: 0;
  display: grid; place-items: center; overflow: visible;
  border-radius: 50%; border: 1px solid rgba(125, 172, 236, .35);
  background: rgba(10, 21, 38, .92); color: #cfe0ff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.pc-fab:hover { border-color: #55e4ff85; color: #fff; background: rgba(16, 32, 56, .96); }
.pc-fab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pc-fab svg { width: 19px; height: 19px; display: block; }
.pc-fab.pc-gear { background: linear-gradient(140deg, var(--pc-accent-deep), var(--pc-accent)); border-color: transparent; color: #fff; }
.pc-fab.pc-gear[aria-expanded="true"] svg { transform: rotate(60deg); }
.pc-fab.pc-gear svg { transition: transform .25s ease; }
.pc-fab.active { border-color: var(--pc-accent); color: #fff; background: var(--pc-accent-soft); }

/* os botões do grupo entram em cascata */
#pc-dock .pc-item { opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; }
#pc-dock.open .pc-item { opacity: 1; transform: none; pointer-events: auto; }
#pc-dock:not(.open) .pc-items { height: 0; overflow: hidden; }

/* rótulo ao passar o mouse */
.pc-fab[data-label]::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); white-space: nowrap;
  padding: 5px 9px; border-radius: 7px;
  background: rgba(6, 14, 30, .95); border: 1px solid var(--border);
  color: #dbe6ff; font-size: 12px; line-height: 1.2; font-weight: 500;
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity .15s ease;
}
.pc-fab[data-label]:hover::after { opacity: 1; }

/* ==========================================================================
   Popover de configuração — identidade própria (não é a barra lateral numa caixa)
   ========================================================================== */
#pc-pop {
  position: absolute; right: 76px; bottom: 72px; z-index: 6;
  width: 300px; max-height: min(68vh, 580px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(138, 170, 235, .22);
  background:
    linear-gradient(180deg, rgba(23, 38, 66, .96), rgba(9, 17, 32, .97));
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(180, 222, 255, .10),
    0 24px 60px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(239, 127, 47, .07);
  animation: pc-pop-in .18s cubic-bezier(.2, .8, .3, 1);
}
#pc-pop[hidden] { display: none; }
@keyframes pc-pop-in { from { opacity: 0; transform: translateX(10px) scale(.97); } }

/* seta apontando para o botão ativo */
#pc-pop::after {
  content: ""; position: absolute; right: -7px; top: var(--pc-arrow, 50%);
  width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, rgba(15, 26, 47, .98), rgba(11, 20, 37, .98));
  border-right: 1px solid rgba(138, 170, 235, .22);
  border-top: 1px solid rgba(138, 170, 235, .22);
  border-radius: 2px; pointer-events: none;
}
/* rótulo do dock some enquanto um popover está aberto */
#pc-dock.has-pop .pc-fab[data-label]::after { display: none; }

/* --- conteúdo: widgets próprios --- */
.pc-pop-title {
  font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: #eef5ff;
  margin: 0 0 13px; padding: 0 0 11px; letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(138, 170, 235, .16);
}
.pc-pop-body { display: flex; flex-direction: column; gap: 14px; }
.pc-pop-foot {
  margin: 14px 0 0; padding: 10px 0 0; font-size: 11.5px; letter-spacing: .04em;
  color: #8fa3c8; border-top: 1px solid rgba(138, 170, 235, .16);
}
.pc-label { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7f93b8; }
.pc-note { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: #8296b8; }

/* chips */
.pc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-chip {
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  border: 1px solid rgba(138, 170, 235, .24); background: rgba(255, 255, 255, .03);
  color: #a8bad8; cursor: pointer; transition: all .14s ease;
}
.pc-chip:hover { border-color: rgba(138, 170, 235, .45); color: #dce7fb; }
.pc-chip.on {
  background: linear-gradient(120deg, rgba(239, 127, 47, .34), rgba(255, 176, 122, .22));
  border-color: var(--pc-accent); color: #fff;
  box-shadow: 0 0 16px rgba(239, 127, 47, .3);
}

/* segmentado */
.pc-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  padding: 3px; border-radius: 12px; background: rgba(3, 9, 20, .6);
  border: 1px solid rgba(138, 170, 235, .16);
}
.pc-seg-btn {
  padding: 8px 6px; border-radius: 9px; border: 0; background: transparent;
  color: #9db0d2; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .14s ease;
}
.pc-seg-btn:hover { color: #dce7fb; }
.pc-seg-btn.on { background: linear-gradient(120deg, var(--pc-accent-deep), var(--pc-accent)); color: #fff; box-shadow: 0 2px 10px var(--pc-accent-glow); }

/* cartões */
.pc-cards { display: flex; flex-direction: column; gap: 6px; }
.pc-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 9px 11px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .16); background: rgba(255, 255, 255, .025);
  transition: all .14s ease;
}
.pc-card:hover { border-color: rgba(138, 170, 235, .4); background: rgba(255, 255, 255, .05); }
.pc-card.on { border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-card-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.pc-card-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-card-txt strong { font-size: 13px; font-weight: 500; color: #e6edfb; }
.pc-card-txt small { font-size: 11px; color: #8296b8; }

/* controle de degraus (substitui a barra de medição) */
.pc-step { display: flex; flex-direction: column; gap: 9px; }
.pc-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-step-label { font-size: 12.5px; color: #b9c8e4; }
.pc-step-ctl {
  display: flex; align-items: center; gap: 2px; padding: 2px;
  border-radius: 999px; border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .55);
}
.pc-step-btn {
  width: 22px; height: 22px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #9db0d2;
  font-size: 14px; line-height: 1; cursor: pointer; transition: all .13s ease;
}
.pc-step-btn:hover { background: var(--pc-accent); color: #fff; }
.pc-step-val {
  min-width: 42px; text-align: center; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: #f4dcc8; letter-spacing: .02em;
}
.pc-notches {
  display: flex; align-items: stretch; gap: 3px; height: 14px; cursor: pointer;
  touch-action: none; outline: none;
}
.pc-notch {
  flex: 1; border-radius: 3px; background: rgba(140, 170, 220, .16);
  transition: background .13s ease, box-shadow .13s ease;
}
.pc-notch.on { background: linear-gradient(180deg, var(--pc-accent), var(--pc-accent-deep)); }
.pc-notches:hover .pc-notch.on { box-shadow: 0 0 9px var(--pc-accent-glow); }
.pc-notches:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 4px; border-radius: 4px; }

/* busca */
.pc-search input {
  width: 100%; padding: 10px 13px; font-size: 13px; color: var(--text);
  border-radius: 11px; border: 1px solid rgba(138, 170, 235, .2); background: rgba(3, 9, 20, .7); outline: none;
}
.pc-search input:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .2); }

/* ações */
.pc-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-btn {
  flex: 1 1 auto; padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(138, 170, 235, .22); background: transparent; color: #c3d2ec;
  transition: all .14s ease;
}
.pc-btn:hover { border-color: var(--pc-accent); color: #fff; background: rgba(239, 127, 47, .1); }
.pc-btn.primary {
  border-color: var(--pc-accent); color: #ffd9bd;
  background: linear-gradient(120deg, rgba(217, 99, 26, .3), rgba(239, 127, 47, .22));
}
.pc-btn.primary:hover { background: linear-gradient(120deg, var(--pc-accent-deep), var(--pc-accent)); color: #fff; }

/* legenda */
.pc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-legend li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #b9c8e4; }

/* etiquetas */
.pc-tags { display: flex; flex-direction: column; gap: 5px; }
.pc-tag {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: rgba(255, 255, 255, .03); transition: all .14s ease;
}
.pc-tag:hover { background: rgba(255, 255, 255, .07); }
.pc-tag.off { opacity: .4; }
.pc-tag-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.pc-tag-name { flex: 1; font-size: 12.5px; color: #dce7fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tag-n { font-size: 11px; color: #8296b8; font-variant-numeric: tabular-nums; }

/* áreas */
.pc-areas { display: flex; flex-direction: column; gap: 6px; }
.pc-area { display: flex; align-items: center; gap: 9px; }
.pc-area-color {
  width: 30px; height: 28px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .25); border-radius: 9px; background: transparent;
}
.pc-area-name {
  flex: 1; min-width: 0; padding: 7px 10px; font-size: 12.5px; color: var(--text);
  border-radius: 9px; border: 1px solid rgba(138, 170, 235, .16); background: rgba(3, 9, 20, .6); outline: none;
}
.pc-area-name:focus { border-color: var(--accent); }

@media (max-width: 899px) {
  .graph-view { grid-template-columns: 1fr !important; }
  #pc-dock { right: 12px; bottom: 12px; }
  .pc-switch-opt { padding: 8px 11px; font-size: 12px; }
  .pc-cortex-nome { max-width: 120px; }
  #pc-pop { right: 12px; bottom: 124px; width: min(320px, calc(100vw - 24px)); }
  #pc-pop::after { display: none; }
}

/* roxos fixos herdados do CSS de produção -> laranja */
.tab.active {
  background: linear-gradient(110deg, rgba(239, 127, 47, .34), rgba(255, 176, 122, .2));
  border-color: var(--pc-accent);
  box-shadow: 0 0 20px rgba(239, 127, 47, .22);
}
.gs-note.active { background: linear-gradient(90deg, rgba(239, 127, 47, .26), rgba(255, 176, 122, .06)); box-shadow: inset 2px 0 var(--pc-accent); }
.gp-toggle input:checked + .gp-switch { background: linear-gradient(90deg, #e2661a, #f59b4e); box-shadow: 0 0 14px var(--pc-accent-glow); }
.notice { background: rgba(239, 127, 47, .1); border-color: rgba(239, 127, 47, .25); }

/* ==========================================================================
   Fontes de conhecimento — barra esquerda (recolhida por padrão)
   ========================================================================== */
.graph-view { grid-template-columns: 58px 1fr !important; }
.graph-view:has(#pc-sources.open) { grid-template-columns: 286px 1fr !important; }

/* mesmo material da caixa da conta: o degradê azul para o quase preto, o fio
   de luz no topo e a sombra projetada para dentro do palco */
#pc-sources {
  position: relative; z-index: 2;
  min-height: 0; overflow: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 10px;
  border-right: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(180deg, rgba(23, 38, 66, .97), rgba(10, 17, 32, .98));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(180, 222, 255, .10),
    14px 0 42px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(239, 127, 47, .05);
}
#pc-sources.open { padding: 14px 12px; }

.pc-src-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
#pc-sources:not(.open) .pc-src-head { flex-direction: column; gap: 12px; }

/* a marca mora na barra: só o símbolo quando recolhida, símbolo + nome aberta */
.pc-src-brand {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 0; border: 0; background: none; color: #7fd4ff; cursor: pointer;
  transition: color .14s ease;
}
.pc-src-brand svg { width: 40px; height: 40px; flex: none; display: block; }   /* o cérebro laranja: maior que o símbolo antigo, senão a rede não lê */
.pc-src-brand:hover { color: #a8e4ff; }
.pc-src-wordmark {
  font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: #eef5ff;
  letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-src-wordmark strong { font-weight: 600; }
.pc-src-brand:hover .pc-src-wordmark { color: #fff; }

/* o nome da barra desce para uma sobrelinha discreta, acima das quatro fontes */
.pc-src-eyebrow {
  margin: 2px 0 -2px; padding: 0 1px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 11.5px; color: #667a9f;
}
/* o córtex ativo, logo abaixo da sobrelinha: "Córtex" discreto, complemento em
   destaque. É um botão (abre o menu de córtex) e vira campo ao renomear —
   sem o prefixo, que não se edita. */
.pc-src-cortex { display: flex; align-items: center; min-height: 24px; margin: -4px 0 -2px; padding: 0 1px; }
.pc-src-cortex-btn {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%;
  padding: 2px 0; border: 0; background: none; color: #eef5ff; cursor: pointer; text-align: left;
  font-family: var(--font-serif); font-size: 17px; line-height: 1.2;
}
.pc-src-cortex-pre { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 15px; color: #93a7c9; }
.pc-src-cortex-btn strong { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-quick) var(--ease-out); }
.pc-src-cortex-btn svg {
  width: 14px; height: 14px; flex: none; align-self: center; color: #6d81a6; opacity: 0;
  transition: opacity var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.pc-src-cortex-btn:hover strong { color: var(--pc-accent); }
.pc-src-cortex-btn:hover svg, .pc-src-cortex-btn[aria-expanded="true"] svg { opacity: 1; color: var(--pc-accent); }
.pc-src-cortex.editing { gap: 7px; }
.pc-src-cortex.editing input {
  flex: 1; min-width: 0; padding: 3px 8px; border-radius: 7px;
  border: 1px solid rgba(138, 170, 235, .35); background: rgba(6, 12, 26, .85); color: #fff;
  font-family: var(--font-serif); font-size: 15px; outline: none;
  animation: pc-in-item var(--t-quick) var(--ease-out) both;
}
.pc-src-cortex.editing input::placeholder { color: #5f7399; font-style: italic; }
.pc-src-cortex.editing input:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px var(--pc-accent-soft); }
.pc-src-toggle {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; margin: 0 auto;
  border: 0; border-radius: 0; background: none;
  color: #6d81a6; cursor: pointer; transition: all .14s ease;
}
#pc-sources.open .pc-src-toggle { margin: 0; }
.pc-src-toggle:hover { color: #cfe0ff; }
.pc-src-toggle svg { width: 17px; height: 17px; }

/* ==========================================================================
   A régua de fontes — marcas soltas, não botõezinhos em caixa
   Quadrado arredondado com borda de 1px e ícone de traço uniforme dentro é o
   kit que vem de fábrica em qualquer template. Aqui não há caixa nenhuma: a
   marca fica solta, desenhada no vocabulário da logo (pontos ligados por
   linhas, com os nós cheios), e a seção corrente é dita por um ponto laranja
   — o mesmo sinal que o menu da conta usa para a seção aberta.
   ========================================================================== */
/* ==========================================================================
   As fontes são abas de TEXTO
   Ícone de 21 px não sobrevive à grade de pixels — três versões desenhadas
   aqui morreram no tamanho real. E a barra já é tipográfica no resto: a
   árvore não tem ícone de pasta nem de arquivo, usa "/" e ".md". Aberta, a
   aba é a palavra e faz as vezes de título da seção; recolhida, é a inicial.
   ========================================================================== */
.pc-src-tabs {
  display: flex; align-items: baseline; gap: 13px;
  justify-content: flex-start; flex-wrap: nowrap;
  padding-bottom: 2px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(138, 170, 235, .13);
}
#pc-sources:not(.open) .pc-src-tabs {
  flex-direction: column; align-items: center; gap: 3px;
  border-bottom: 0; padding-bottom: 0;
}
.pc-src-tab {
  position: relative; flex: none; padding: 4px 1px 7px;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  font-family: var(--font-serif); font-size: 13px; font-weight: 500;
  letter-spacing: -.005em; white-space: nowrap;
  color: #93a7c9; opacity: .6;
}
/* recolhida: glifo cheio, branco, sem caixa e sem contorno */
#pc-sources:not(.open) .pc-src-tab {
  width: 38px; height: 38px; display: grid; place-items: center;
  padding: 0; color: #eef5ff; opacity: .86;
}
#pc-sources:not(.open) .pc-src-tab svg {
  width: 24px; height: 24px; display: block;
  transition: transform var(--t-base) var(--ease-spring), filter var(--t-quick) var(--ease-out);
}
/* passar o mouse acende um neon laranja atrás do glifo */
#pc-sources:not(.open) .pc-src-tab:hover { color: #fff; opacity: 1; }
#pc-sources:not(.open) .pc-src-tab:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 0 5px rgba(239, 127, 47, .95))
          drop-shadow(0 0 13px rgba(239, 127, 47, .55));
}
#pc-sources:not(.open) .pc-src-tab:active svg { transform: scale(.94); }
/* a fonte aberta fica laranja cheia */
#pc-sources:not(.open) .pc-src-tab.on { color: var(--pc-accent); opacity: 1; }
#pc-sources:not(.open) .pc-src-tab.on svg {
  filter: drop-shadow(0 0 6px rgba(239, 127, 47, .5));
}
/* com glifo, o fio embaixo vira ruído */
#pc-sources:not(.open) .pc-src-tab.on::before { display: none; }
.pc-src-tab:hover { color: #eef5ff; opacity: 1; }
.pc-src-tab.on { color: var(--pc-accent); opacity: 1; }
/* fio sob a aba corrente, na mesma língua do fio sob o nome da área */
.pc-src-tab.on::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; border-radius: 1px; background: var(--pc-accent);
}
.pc-src-tab { transition: color var(--t-quick) var(--ease-out), opacity var(--t-quick) var(--ease-out); }
.pc-src-tab[data-label]::after {
  content: attr(data-label); position: absolute; left: calc(100% + 9px); top: 50%;
  transform: translateY(-50%); white-space: nowrap; z-index: 3;
  padding: 4px 8px; border-radius: 7px; font-size: 11.5px; color: #dbe6ff;
  background: rgba(6, 14, 30, .96); border: 1px solid var(--border);
  opacity: 0; pointer-events: none; transition: opacity .14s ease;
}
.pc-src-tab:hover::after { opacity: 1; }
#pc-sources.open .pc-src-tab::after { display: none; }


.pc-src-body { display: flex; flex-direction: column; gap: 2px; }
.pc-src-kids { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }

.pc-src-branch {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 6px 7px; border: 0; border-radius: 8px; background: transparent;
  color: #dce7fb; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .13s ease;
}
.pc-src-branch:hover { background: rgba(255, 255, 255, .055); }
.pc-src-chev { display: inline-block; flex: none; width: 10px; font-size: 9px; color: #7f93b8; transition: transform .15s ease; }
.pc-src-chev.open { transform: rotate(90deg); }
.pc-src-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.pc-src-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-src-n { font-size: 11px; color: #8296b8; font-variant-numeric: tabular-nums; }

.pc-src-note {
  display: block; width: 100%; text-align: left;
  padding: 5px 8px 5px 24px; border: 0; border-radius: 8px; background: transparent;
  color: #9db0d2; font-size: 12.5px; font-weight: 400; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .13s ease;
}
.pc-src-note:hover { color: #eef5ff; background: rgba(255, 255, 255, .05); }
.pc-src-note.on {
  color: #fff; background: linear-gradient(90deg, var(--pc-accent-soft), transparent);
  box-shadow: inset 2px 0 var(--pc-accent);
}
.pc-src-hint { margin: 4px 0 2px; padding-left: 8px; font-size: 11px; color: #7f93b8; }
.pc-src-snippet { margin: 0 0 6px; padding-left: 24px; font-size: 11px; line-height: 1.45; color: #7f93b8; }
.pc-src-res { display: flex; flex-direction: column; gap: 2px; }
.pc-src-foot { margin: auto 0 0; padding-top: 10px; font-size: 11px; color: #7f93b8; border-top: 1px solid rgba(138, 170, 235, .14); }

@media (max-width: 899px) {
  .graph-view, .graph-view:has(#pc-sources.open) { grid-template-columns: 1fr !important; }
  #pc-sources { display: none; }
}

/* ==========================================================================
   Palco limpo: as barras de "Atualizar" e de câmera saem de cima do cérebro.
   Ficam no DOM (escondidas, não removidas) porque o botão Atualizar continua
   sendo acionado por código quando uma nota é criada, renomeada ou apagada —
   é assim que o app refaz o grafo. A câmera se controla direto na cena:
   arrastar gira, roda do mouse aproxima.
   ========================================================================== */
.graph-toolbar, .graph-camera-toolbar { display: none !important; }
/* nunca pintam — nem no quadro entre o React montar e o nosso host entrar:
   a barra lateral do app (a nossa vive no lugar dela; a dele fica guardada em
   #pc-panel-host, só para os cliques), o "Carregando o grafo…" e a tela de
   entrar do app ("Verificando sua sessão…" a cada refresh; sem sessão, o host
   manda para a entrada nossa) */
.graph-sidebar { display: none !important; }
.graph-overlay.muted { display: none !important; }
/* só a do app: a NOSSA tela de entrar (index.html, body.pc-entrada-pagina) reusa
   as classes login-* do CSS do app e carrega este tema; sem o :not ela sumia inteira */
body:not(.pc-entrada-pagina) .login-experience { display: none !important; }
.workspace > p.muted.center.pad { display: none !important; }   /* o "Carregando o grafo…" do Suspense, enquanto o pedaço do grafo baixa */

/* a faixa de status continua, só acompanhando a largura da barra de fontes
   (o app fixa left:246px, da coluna antiga de 232px) */
.graph-status-region { left: 74px !important; }
.graph-view:has(#pc-sources.open) .graph-status-region { left: 302px !important; }

/* ==========================================================================
   Córtex: área de conhecimento › projeto › pasta › nota .md
   ========================================================================== */
.pc-src-find {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border-radius: 11px;
  border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .62);
}
.pc-src-find svg { width: 14px; height: 14px; flex: none; color: #7f93b8; }
.pc-src-find input {
  flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent;
  color: var(--text); font-size: 12.5px; outline: none;
}
.pc-src-find:focus-within { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }

.pc-src-body {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; margin-right: -6px; padding-right: 6px;
}
.pc-src-body::-webkit-scrollbar { width: 7px; }
.pc-src-body::-webkit-scrollbar-thumb { background: rgba(138, 170, 235, .22); border-radius: 4px; }
.pc-src-body::-webkit-scrollbar-thumb:hover { background: rgba(138, 170, 235, .38); }

/* ==========================================================================
   O Córtex é um índice, não um painel: sem cartões, sem faixa colorida à
   esquerda, sem linha-guia por nível. A hierarquia aparece na tipografia —
   a área é uma entrada em serifa sobre um fio na cor dela, e cada degrau
   desce um tom. Pasta termina em "/", arquivo termina em ".md", então não
   é preciso ícone nenhum para saber o que é cada linha.
   ========================================================================== */

.pc-src-area { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.pc-src-area + .pc-src-area { margin-top: 20px; }

.pc-src-branch {
  display: flex; align-items: baseline; gap: 7px; width: 100%; text-align: left;
  padding: 5px 2px; border: 0; border-radius: 0; background: transparent;
  color: #b9c8e4; font-size: 12.5px; cursor: pointer;
  transition: color .13s ease;
}
.pc-src-branch:hover { background: none; color: #f2f6fd; }

/* a entrada da área: serifa sobre um fio tingido com a cor do lobo */
.pc-src-branch.pc-src-area {
  align-items: center; gap: 8px; padding: 0 1px 7px; margin-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-area, #9aa0b5) 68%, transparent);
}
.pc-src-branch.pc-src-area > .pc-src-label {
  font-family: var(--font-serif); font-size: 15px; font-weight: 500;
  color: #f2f6fd; letter-spacing: -.012em;
}
.pc-src-branch.pc-src-area:hover > .pc-src-label { color: #fff; }

/* cada degrau desce um tom — é isso que marca a profundidade */
.pc-src-branch.pc-src-proj > .pc-src-label { color: #dae5f9; font-weight: 500; }
.pc-src-branch.pc-src-folder > .pc-src-label { color: #a9bbdb; font-weight: 400; }

/* "Projeto" é fixo na hierarquia; entra em serifa itálica, discreto */
.pc-src-kind {
  flex: none; font-family: var(--font-serif); font-style: italic;
  font-size: 12px; font-weight: 400; color: #778bb0;
  text-transform: none; letter-spacing: 0;
}

/* "/" nas pastas e ".md" nos arquivos dizem o tipo sem ícone */
.pc-src-ext { flex: none; font-size: 11px; color: #5d7098; letter-spacing: .01em; }
.pc-src-note:hover .pc-src-ext { color: #7f93b8; }
.pc-src-note.on .pc-src-ext { color: color-mix(in srgb, var(--pc-accent) 70%, transparent); }

.pc-src-chev {
  flex: none; width: 8px; font-size: 8px; color: #55688c; line-height: 1;
  transition: transform .15s ease, color .13s ease;
}
.pc-src-chev.open { transform: rotate(90deg); }
.pc-src-branch:hover .pc-src-chev { color: #93a6c8; }

/* o nome não estica: assim "/" e ".md" ficam colados nele, e não jogados
   na borda direita como se fossem outra coluna */
.pc-src-label {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* contagem em algarismos tabulares, encostada na direita, sem pílula */
.pc-src-n {
  flex: none; margin-left: auto; padding-left: 10px;
  font-size: 11px; color: #5d7098; font-variant-numeric: tabular-nums;
  background: none; border-radius: 0; min-width: 0;
}
.pc-src-branch.pc-src-area > .pc-src-n { color: #8296b8; font-size: 11.5px; }

/* recuo puro, sem linha vertical */
.pc-src-kids {
  display: flex; flex-direction: column; gap: 1px;
  margin-left: 13px; padding-left: 0; border-left: 0;
}
.pc-src-area > .pc-src-kids { margin-left: 3px; }

/* o arquivo .md */
.pc-src-note {
  display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left;
  padding: 5px 2px; border: 0; border-radius: 0; background: transparent;
  color: #93a6c8; font-size: 12.5px; cursor: pointer;
  transition: color .13s ease, box-shadow .13s ease;
}
/* arquivo não abre nem fecha, mas guarda o lugar do chevron — senão fica
   mais à esquerda que a pasta irmã e o nível se perde */
.pc-src-note::before { content: ""; flex: none; width: 8px; }
.pc-src-note:hover { color: #f2f6fd; background: none; }
.pc-src-note.on {
  color: var(--pc-accent); font-weight: 500; background: none;
  box-shadow: -7px 0 0 -5px var(--pc-accent);
}

/* a linha inteira acende no hover, sangrando até as bordas da barra */
.pc-src-row { position: relative; }
.pc-src-row::before {
  content: ""; position: absolute; inset: -1px -8px; border-radius: 5px;
  background: rgba(255, 255, 255, .055); opacity: 0; pointer-events: none;
  transition: opacity .13s ease;
}
.pc-src-row:hover::before { opacity: 1; }
.pc-src-row:has(.pc-src-area)::before { display: none; }
.pc-src-row > * { position: relative; }

/* ==========================================================================
   Acervo editável — linha com ações, rótulo "Projeto", menu flutuante
   ========================================================================== */

/* cada linha é [conteúdo | ⋯]; o ⋯ só aparece no hover/foco */
.pc-src-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.pc-src-row > .pc-src-branch,
.pc-src-row > .pc-src-note { flex: 1; min-width: 0; }
.pc-src-act {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  margin-right: 2px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: #6f83a8; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.pc-src-act svg { width: 15px; height: 15px; }
.pc-src-row:hover .pc-src-act,
.pc-src-act:focus-visible { opacity: 1; }
.pc-src-act:hover { color: #eef5ff; background: rgba(255, 255, 255, .09); }

/* área sem região no cérebro 3D */
.pc-src-tagname {
  flex: none; font-family: var(--font-serif); font-style: italic;
  font-size: 11px; color: #667a9f; border: 0; padding: 0;
}

.pc-src-empty {
  margin: 0 0 2px; padding: 3px 2px 3px 15px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 11.5px; color: #55688c;
}

/* renomear no lugar */
.pc-src-row.editing { padding: 1px 0; }
.pc-src-row.editing input {
  flex: 1; min-width: 0; padding: 4px 8px; font-size: 12.5px;
  color: #fff; background: rgba(6, 12, 26, .9);
  border: 1px solid var(--pc-accent); border-radius: 7px; outline: 0;
  box-shadow: 0 0 0 3px rgba(239, 127, 47, .16);
}

/* criar área: mora na ponta da busca, sempre à mão e sem roubar uma linha */
.pc-src-add {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; margin-right: -2px;
  padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: #8296b8; cursor: pointer;
}
.pc-src-add svg { width: 15px; height: 15px; flex: none; }
.pc-src-add:hover { color: #fff; background: var(--pc-accent-soft); }

/* menu de ações — vai no body para não ser cortado pela barra */
.pc-src-menu {
  position: fixed; z-index: 90; min-width: 178px; max-width: 260px;
  max-height: 58vh; overflow-y: auto; padding: 5px;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(10, 16, 32, .97); border: 1px solid rgba(138, 170, 235, .22);
  border-radius: 11px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
}
.pc-src-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 10px; border: 0; border-radius: 7px; background: transparent;
  color: #cbd8f0; font-size: 12.5px; cursor: pointer; transition: all .12s ease;
}
.pc-src-menu-item svg { width: 16px; height: 16px; flex: none; color: #8296b8; }
.pc-src-menu-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-src-menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pc-src-menu-item:hover svg { color: var(--pc-accent); }
.pc-src-menu-item.danger { color: #f29b8a; }
.pc-src-menu-item.danger:hover { background: rgba(224, 91, 61, .16); color: #ffb3a1; }
.pc-src-menu-item.danger svg, .pc-src-menu-item.danger:hover svg { color: currentColor; }
.pc-src-menu-item.sub { font-size: 12px; color: #9db0d2; }
.pc-src-menu-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.pc-src-menu-sep { height: 1px; margin: 4px 6px; background: rgba(138, 170, 235, .16); }
.pc-src-menu-head {
  padding: 7px 10px 3px; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: #7f93b8; font-weight: 600;
}

/* paleta dentro do menu de ações */
.pc-src-swatches {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 4px 8px 7px;
}
.pc-src-sw {
  width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pc-src-sw:hover { transform: scale(1.14); }
.pc-src-sw.on { box-shadow: 0 0 0 2px rgba(10, 16, 32, .95), 0 0 0 4px #fff; }


/* ==========================================================================
   Conta, no canto superior direito
   O topbar do app sai de cena; as seções (Grafo, Tokens, Como conectar) e o
   Sair passam para o menu que abre daqui. Fica escondido, não removido: são
   os botões dele que o menu aciona.
   ========================================================================== */
header.topbar { display: none !important; }

#pc-user {
  position: fixed; top: 14px; right: 16px; z-index: 40;
  transition: right var(--t-slow) var(--ease-out);
}
/* com a nota aberta o painel ocupa a direita; a conta desliza para a esquerda
   dele em vez de ficar por cima do título */
body:has(.graph-stage.pc-com-nota) #pc-user { right: calc(var(--pc-painel) + 16px); }
.pc-user-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 4px 6px 4px 4px; border: 1px solid rgba(138, 170, 235, .18);
  border-radius: 999px; background: rgba(10, 16, 32, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #a8bad8; cursor: pointer; transition: all .14s ease;
}
.pc-user-btn:hover { border-color: var(--pc-accent); color: #fff; }
.pc-user-ini {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(145deg, var(--pc-accent), var(--pc-accent-deep));
  color: #1a0d04; font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.pc-user-chev { width: 15px; height: 15px; flex: none; transition: transform .16s ease; }
.pc-user-btn[aria-expanded="true"] .pc-user-chev { transform: rotate(180deg); }

/* seção corrente marcada no menu */
.pc-src-menu-item.on { color: var(--pc-accent); }
.pc-src-menu-item.on svg { color: var(--pc-accent); }
.pc-src-menu-item.on::after {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pc-accent);
}


/* ==========================================================================
   MOVIMENTO
   Antes era tudo `ease` em 150 ms, que é o mesmo que nada: a interface
   piscava de um estado para o outro. Aqui cada coisa que entra, sai, abre,
   fecha ou desliza usa os tempos e curvas de :root, e o que nasce de um
   clique nasce do lugar do clique.
   ========================================================================== */

@keyframes pc-in-menu   { from { opacity: 0; transform: translateY(-9px) scale(.93); } }
@keyframes pc-in-menu-up{ from { opacity: 0; transform: translateY(9px) scale(.93); } }
@keyframes pc-in-item   { from { opacity: 0; transform: translateY(-6px); } }
@keyframes pc-in-up     { from { opacity: 0; transform: translateY(9px); } }
@keyframes pc-in-left   { from { opacity: 0; transform: translateX(-10px); } }
@keyframes pc-in-card   { from { opacity: 0; transform: translateX(26px) scale(.97); } }
@keyframes pc-fade      { from { opacity: 0; } }
@keyframes pc-pulse-mark{ from { box-shadow: -7px 0 0 -7px var(--pc-accent); } }

/* --- menus: crescem do canto de onde foram chamados --- */
.pc-src-menu {
  transform-origin: var(--pc-origem, 100% 0%);
  animation: pc-in-menu var(--t-base) var(--ease-spring) both;
}
.pc-src-menu.para-cima {
  transform-origin: var(--pc-origem, 100% 100%);
  animation-name: pc-in-menu-up;
}
/* e os itens entram em cascata, de cima para baixo */
.pc-src-menu > * { animation: pc-in-item var(--t-quick) var(--ease-out) both; }
.pc-src-menu > *:nth-child(1) { animation-delay: 14ms; }
.pc-src-menu > *:nth-child(2) { animation-delay: 32ms; }
.pc-src-menu > *:nth-child(3) { animation-delay: 50ms; }
.pc-src-menu > *:nth-child(4) { animation-delay: 68ms; }
.pc-src-menu > *:nth-child(5) { animation-delay: 86ms; }
.pc-src-menu > *:nth-child(6) { animation-delay: 104ms; }
.pc-src-menu > *:nth-child(7) { animation-delay: 122ms; }
.pc-src-menu > *:nth-child(8) { animation-delay: 140ms; }
.pc-src-menu > *:nth-child(9) { animation-delay: 158ms; }
.pc-src-menu > *:nth-child(10) { animation-delay: 176ms; }
.pc-src-menu > *:nth-child(11) { animation-delay: 194ms; }
.pc-src-menu > *:nth-child(12) { animation-delay: 212ms; }

/* --- popover da engrenagem: nasce do botão, à direita --- */
#pc-pop {
  transform-origin: calc(100% + 76px) var(--pc-arrow, 50%);
  animation: pc-in-menu var(--t-base) var(--ease-spring) both;
}

/* --- dock: os botões saem da engrenagem em fila, de baixo para cima --- */
#pc-dock .pc-item {
  transition: opacity var(--t-quick) var(--ease-out),
              transform var(--t-base) var(--ease-spring);
  transform: translateY(16px) scale(.6);
}
#pc-dock.open .pc-item:nth-last-child(1) { transition-delay: 0ms; }
#pc-dock.open .pc-item:nth-last-child(2) { transition-delay: 34ms; }
#pc-dock.open .pc-item:nth-last-child(3) { transition-delay: 68ms; }
#pc-dock.open .pc-item:nth-last-child(4) { transition-delay: 102ms; }
#pc-dock.open .pc-item:nth-last-child(5) { transition-delay: 136ms; }
#pc-dock.open .pc-item:nth-last-child(6) { transition-delay: 170ms; }
#pc-dock.open .pc-item:nth-last-child(7) { transition-delay: 204ms; }
#pc-dock.open .pc-item:nth-last-child(8) { transition-delay: 238ms; }
/* ao fechar, some tudo junto e rápido — guardar não precisa de cerimônia */
#pc-dock:not(.open) .pc-item {
  transition-delay: 0ms !important;
  transition: opacity var(--t-quick) var(--ease-in), transform var(--t-quick) var(--ease-in);
}
.pc-fab.pc-gear svg { transition: transform var(--t-base) var(--ease-spring); }
.pc-fab.pc-gear[aria-expanded="true"] svg { transform: rotate(135deg); }

/* --- barra de fontes: a coluna estica, a marca e os rótulos acompanham --- */
.graph-view { transition: grid-template-columns var(--t-slow) var(--ease-out); }
/* No Mapa 2D a coluna muda de uma vez só.
   O app põe um ResizeObserver no contêiner do grafo e, a cada disparo,
   recalcula o orçamento de rótulos e redesenha. Animar a largura da coluna
   dispara esse observador ~20 vezes em 340 ms, e os elementos do mapa somem
   e voltam. Em 3D a transição fica: a cena é nossa e aguenta o redimensionamento.
   O seletor distingue os modos pelo que o palco contém. */
.graph-view:has(.graph-canvas) { transition: none; }
.pc-src-wordmark { animation: pc-in-left var(--t-base) var(--ease-out) both; }
.pc-src-eyebrow { animation: pc-in-left var(--t-base) var(--ease-out) both; animation-delay: 40ms; }
.pc-src-toggle svg { transition: transform var(--t-base) var(--ease-spring); }
.pc-src-toggle:hover svg { transform: translateX(2px); }
#pc-sources:not(.open) .pc-src-toggle:hover svg { transform: translateX(2px); }

/* --- a árvore: pasta abrindo e fechando tem altura, não aparece do nada --- */
.pc-src-kids.pc-abrindo { overflow: hidden; }

/* --- lista inteira trocando (aba, busca): entra de baixo, escalonada --- */
.pc-src-body.pc-trocou > * { animation: pc-in-up var(--t-base) var(--ease-out) both; }
.pc-src-body.pc-trocou > *:nth-child(1) { animation-delay: 0ms; }
.pc-src-body.pc-trocou > *:nth-child(2) { animation-delay: 30ms; }
.pc-src-body.pc-trocou > *:nth-child(3) { animation-delay: 60ms; }
.pc-src-body.pc-trocou > *:nth-child(4) { animation-delay: 90ms; }
.pc-src-body.pc-trocou > *:nth-child(5) { animation-delay: 115ms; }
.pc-src-body.pc-trocou > *:nth-child(n+6) { animation-delay: 140ms; }

/* --- linhas: o dedo tem resposta --- */
.pc-src-row > .pc-src-branch, .pc-src-row > .pc-src-note {
  transition: color var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out),
              box-shadow var(--t-base) var(--ease-spring);
}
.pc-src-row:hover > .pc-src-branch, .pc-src-row:hover > .pc-src-note { transform: translateX(2px); }
.pc-src-row:active > .pc-src-branch, .pc-src-row:active > .pc-src-note { transform: translateX(2px) scale(.99); }
.pc-src-note.on { animation: pc-pulse-mark var(--t-base) var(--ease-spring); }
.pc-src-row::before { transition: opacity var(--t-quick) var(--ease-out); }
.pc-src-chev { transition: transform var(--t-base) var(--ease-spring), color var(--t-quick) var(--ease-out); }
.pc-src-ext, .pc-src-n { transition: color var(--t-quick) var(--ease-out); }
.pc-src-row.editing input { animation: pc-in-item var(--t-quick) var(--ease-out) both; }
.pc-src-empty { animation: pc-fade var(--t-base) var(--ease-out) both; }

/* --- troca de seção: a tela nova sobe --- */
main.main { animation: pc-in-up var(--t-slow) var(--ease-out) both; }
.graph-detail { animation: pc-in-card var(--t-base) var(--ease-spring) both; }

/* --- pressionar tem retorno em tudo que é botão --- */
.pc-fab:active { transform: scale(.92); }
.pc-user-btn:active, .pc-src-add:active,
.pc-src-toggle:active, .pc-src-act:active, .pc-src-brand:active { transform: scale(.94); }
.pc-src-menu-item:active { transform: scale(.985); }
.pc-switch-opt:active { transform: scale(.96); }
.pc-user-btn, .pc-src-add, .pc-src-tab, .pc-src-toggle, .pc-src-act, .pc-src-brand,
.pc-src-menu-item, .pc-switch-opt {
  transition: transform var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out),
              background var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out),
              opacity var(--t-quick) var(--ease-out);
}
.pc-src-tab svg { transition: transform var(--t-base) var(--ease-spring), color var(--t-quick) var(--ease-out); }
.pc-src-tab:hover svg { transform: scale(1.12); }
.pc-src-tab:active svg { transform: scale(.94); }
.pc-src-sw { transition: transform var(--t-quick) var(--ease-spring), box-shadow var(--t-quick) var(--ease-out); }
.pc-src-sw:active { transform: scale(.9); }
.pc-user-chev { transition: transform var(--t-base) var(--ease-spring); }

/* --- rótulo dos botões flutuantes: desliza em vez de piscar --- */
.pc-fab[data-label]::after {
  transform: translateY(-50%) translateX(6px);
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.pc-fab[data-label]:hover::after { transform: translateY(-50%) translateX(0); }

/* --- quem prefere menos movimento não recebe nenhum --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* o menu é medido antes de entrar; enquanto isso fica invisível e parado */
.pc-src-menu.pc-medindo { animation: none !important; opacity: 0; }

/* passada a duração, a animação sai da frente e o elemento fica com o seu
   próprio estilo — vale como rede quando a aba está congelada */
.pc-anim-fim, .pc-anim-fim > *, #pc-pop.pc-anim-fim { animation: none !important; }


/* ==========================================================================
   A caixa da conta
   O e-mail estava em caixa alta com espaçamento — tratamento de rótulo, e um
   e-mail em maiúsculas é ilegível. Agora o topo é um bloco de identidade de
   verdade: avatar, o endereço como ele é, e a linha do plano com a cota viva.
   A seção corrente usa o mesmo sinal da nota selecionada na árvore — traço
   curto na margem — e não um ponto solto na borda direita. Sair sai do peso
   das seções.
   ========================================================================== */
.pc-user-pop {
  min-width: 282px; padding: 0 6px 6px;
  background: linear-gradient(180deg, rgba(23, 38, 66, .97), rgba(10, 17, 32, .98));
  box-shadow:
    inset 0 1px 0 rgba(180, 222, 255, .10),
    0 22px 52px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(239, 127, 47, .06);
}
/* bico apontando para o botão da conta */
.pc-user-pop::before {
  content: ""; position: absolute; top: -5px; right: 18px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: rgba(23, 38, 66, .97);
  border-left: 1px solid rgba(138, 170, 235, .22);
  border-top: 1px solid rgba(138, 170, 235, .22);
}

.pc-perfil {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 10px 12px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(138, 170, 235, .14);
}
.pc-perfil-av {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(145deg, var(--pc-accent), var(--pc-accent-deep));
  color: #1a0d04; font-size: 14px; font-weight: 600;
}
.pc-perfil-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-perfil-nome {
  font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0; text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-perfil-mail {
  font-size: 12.5px; color: #eef5ff; letter-spacing: 0; text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-perfil-nome + .pc-perfil-mail { color: #a5b4cd; font-size: 12px; }
.pc-perfil-sub {
  font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #778bb0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pc-user-pop .pc-src-menu-item {
  padding: 9px 10px; gap: 11px; font-size: 13px; border-radius: 9px;
}
/* seção corrente: traço na margem, igual à nota selecionada na árvore */
.pc-user-pop .pc-src-menu-item.on { color: var(--pc-accent); font-weight: 500; }
.pc-user-pop .pc-src-menu-item.on::after { display: none; }
.pc-user-pop .pc-src-menu-item.on { box-shadow: -6px 0 0 -4px var(--pc-accent); }

/* Sair não pesa como seção */
.pc-user-pop .pc-src-menu-item.miudo { padding: 7px 10px; font-size: 12px; color: #93a7c9; }
.pc-user-pop .pc-src-menu-item.miudo svg { width: 14px; height: 14px; }
.pc-user-pop .pc-src-menu-item.miudo:hover { color: #f29b8a; background: rgba(224, 91, 61, .14); }
.pc-user-pop .pc-src-menu-sep { margin: 5px 10px; }

/* ==========================================================================
   Marcas da árvore: cérebro na cor da área, pasta e folha nas demais linhas
   ========================================================================== */
.pc-src-mark { flex: none; display: grid; place-items: center; }
.pc-src-mark svg { display: block; }

/* o cérebro é o mesmo glifo da régua, na cor do lobo */
.pc-src-mark-area { margin-right: 1px; color: var(--pc-area, #9aa0b5); }
.pc-src-mark-area svg { width: 17px; height: 17px; }
.pc-src-branch.pc-src-area:hover .pc-src-mark-area svg {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pc-area, #9aa0b5) 70%, transparent));
}
.pc-src-mark-area svg { transition: filter var(--t-quick) var(--ease-out); }

.pc-src-mark-pasta { color: #6d81a6; }
.pc-src-mark-pasta svg { width: 13px; height: 13px; }
.pc-src-branch:hover .pc-src-mark-pasta { color: #93a7c9; }

.pc-src-mark-nota { color: #55688c; }
.pc-src-mark-nota svg { width: 12px; height: 12px; }
.pc-src-note:hover .pc-src-mark-nota { color: #93a7c9; }
.pc-src-note.on .pc-src-mark-nota { color: var(--pc-accent); }
.pc-src-mark-pasta, .pc-src-mark-nota { transition: color var(--t-quick) var(--ease-out); }

/* a folha ocupa o lugar que o vão do chevron guardava */
.pc-src-note::before { display: none; }
.pc-src-note { padding-left: 2px; }

/* na régua recolhida, todo botão diz o que é ao passar o mouse */
#pc-sources:not(.open) .pc-src-toggle,
#pc-sources:not(.open) .pc-src-brand { position: relative; }
#pc-sources:not(.open) .pc-src-toggle[data-label]::after,
#pc-sources:not(.open) .pc-src-brand[data-label]::after {
  content: attr(data-label); position: absolute; left: calc(100% + 9px); top: 50%;
  transform: translateY(-50%) translateX(-4px); white-space: nowrap; z-index: 40;
  padding: 4px 8px; border-radius: 7px; font-size: 11.5px; color: #dbe6ff;
  background: rgba(6, 14, 30, .96); border: 1px solid var(--border);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
#pc-sources:not(.open) .pc-src-toggle:hover::after,
#pc-sources:not(.open) .pc-src-brand:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ==========================================================================
   PAINEL DA MEMÓRIA — a coluna inteira da direita
   O app entrega o mesmo <aside class="graph-detail"> de sempre (é ele que
   renderiza o Markdown e os wikilinks); aqui ele deixa de ser um cartãozinho
   no canto e vira a coluna direita, com o material dos popovers.
   ========================================================================== */
.graph-detail {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  left: auto !important; z-index: 8;
  width: var(--pc-painel) !important; max-width: none !important;
  max-height: none !important; height: auto !important;
  margin: 0 !important; padding: 26px 26px 34px !important;
  border: 0 !important; border-left: 1px solid rgba(138, 170, 235, .22) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(23, 38, 66, .63), rgba(9, 16, 31, .71)) !important;
  -webkit-backdrop-filter: blur(44px) saturate(1.4); backdrop-filter: blur(44px) saturate(1.4);
  box-shadow: inset 1px 0 0 rgba(180, 222, 255, .08), -24px 0 60px rgba(0, 0, 0, .55) !important;
  overflow-y: auto; overscroll-behavior: contain;
  animation: pc-painel-entra var(--t-slow) var(--ease-out) both;
}
@keyframes pc-painel-entra { from { opacity: 0; transform: translateX(34px); } }
.graph-detail::-webkit-scrollbar { width: 8px; }
.graph-detail::-webkit-scrollbar-thumb { background: rgba(138, 170, 235, .22); border-radius: 4px; }

#graph-detail-heading {
  margin: 0 34px 10px 0 !important; padding: 0 !important;
  font-family: var(--font-serif); font-size: 25px; font-weight: 500;
  line-height: 1.18; letter-spacing: -.015em; color: #fff;
}
.graph-detail .tags {
  margin: 0 0 18px !important; padding-bottom: 16px;
  font-size: 12px; color: var(--pc-accent); letter-spacing: .01em;
  border-bottom: 1px solid rgba(138, 170, 235, .14);
}
.graph-detail .md { font-size: 14px; line-height: 1.72; color: #c9d7ef; }
.graph-detail .md p { margin: 0 0 14px; }
.graph-detail .md strong { color: #eef5ff; }
.graph-detail .md pre {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(3, 8, 20, .7); border: 1px solid rgba(138, 170, 235, .14);
  font-size: 12.5px; line-height: 1.6; overflow-x: auto;
}
.graph-detail .md code { font-size: .92em; color: #a8d8ff; }
.graph-detail .md .wikilink {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--pc-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--pc-accent) 45%, transparent);
  transition: color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.graph-detail .md .wikilink:hover { color: #ffb07a; border-color: #ffb07a; }

/* a procedência é informação de rodapé, não de manchete */
.graph-detail .md-meta {
  margin: 0 0 4px !important; font-size: 11px; line-height: 1.55; color: #6d81a6;
}
.graph-detail .md-meta:first-of-type { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid rgba(138, 170, 235, .14); }
.graph-detail .md-meta:last-of-type { color: #55688c; font-style: italic; }

.graph-detail .md-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.graph-detail .md-links-title {
  width: 100%; margin-bottom: 4px; font-family: var(--font-serif); font-style: italic;
  font-size: 12px; color: #778bb0; text-transform: none; letter-spacing: 0;
}
.graph-detail .md-links .chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .22); background: rgba(255, 255, 255, .03);
  color: #c9d7ef; font-size: 12px;
  transition: all var(--t-quick) var(--ease-out);
}
.graph-detail .md-links .chip:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* Fechar vira um × no alto do painel */
.graph-detail > .link {
  position: absolute; top: 20px; right: 20px;
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .03); color: #93a7c9;
  font-size: 0; text-decoration: none; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.graph-detail > .link::before { content: "✕"; font-size: 13px; line-height: 1; }
.graph-detail > .link:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* ==========================================================================
   CAIXA DE FOCO — vidro sobre o cérebro, no canto de baixo à esquerda
   Diz de onde a nota vem e desenha as conexões dela num mapa arrastável.
   ========================================================================== */
.pc-foco {
  position: absolute; left: 18px; bottom: 18px; z-index: 7;
  width: 344px; padding: 16px 16px 12px;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 33, 58, .38), rgba(8, 15, 29, .52));
  -webkit-backdrop-filter: blur(46px) saturate(1.55); backdrop-filter: blur(46px) saturate(1.55);
  box-shadow:
    inset 0 1px 0 rgba(180, 222, 255, .12),
    0 26px 64px rgba(0, 0, 0, .62),
    0 0 0 1px color-mix(in srgb, var(--pc-area, #6898de) 16%, transparent);
  animation: pc-foco-entra var(--t-slow) var(--ease-spring) both;
}
@keyframes pc-foco-entra { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.pc-foco.pc-foco-quieto { animation: none; }   /* refeita no lugar: sem entrar de novo */

.pc-foco-trilha { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.pc-foco-cerebro { flex: none; display: grid; place-items: center; }
.pc-foco-cerebro svg { width: 16px; height: 16px; display: block; }
.pc-foco-area { font-size: 12px; font-weight: 500; color: var(--pc-area, #c9d7ef); }
.pc-foco-sep { font-size: 11px; color: #55688c; }
.pc-foco-passo { font-size: 11.5px; color: #8296b8; }

.pc-foco-titulo {
  margin: 0 0 10px; font-family: var(--font-serif); font-size: 17px; font-weight: 500;
  line-height: 1.25; letter-spacing: -.012em; color: #fff;
}

.pc-foco-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pc-foco-tag {
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--pc-accent) 35%, transparent);
  background: transparent; color: var(--pc-accent); font-size: 11px;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-foco-tag:hover { background: var(--pc-accent-soft); color: #ffb07a; }
.pc-foco-semtag { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #55688c; }

.pc-foco-cont { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.pc-foco-num { font-size: 13px; font-weight: 600; color: #eef5ff; font-variant-numeric: tabular-nums; }
.pc-foco-rotu { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #778bb0; }
.pc-foco-ponto { color: #44567a; margin: 0 3px; }

.pc-foco-mapa { margin: 4px -4px 0; }
.pc-foco-svg { width: 100%; height: auto; display: block; overflow: visible; }
.pc-foco-vazio {
  margin: 10px 4px 6px; font-family: var(--font-serif); font-style: italic;
  font-size: 11.5px; line-height: 1.5; color: #55688c;
}
.pc-foco-linha { stroke: rgba(138, 170, 235, .3); stroke-width: 1.1; }
.pc-foco-linha.pc-foco-saida { stroke: color-mix(in srgb, var(--pc-accent) 55%, transparent); }
.pc-foco-linha.pc-foco-ambos { stroke: color-mix(in srgb, var(--pc-accent) 75%, transparent); stroke-width: 1.5; }
.pc-foco-no { cursor: grab; }
.pc-foco-no.puxando { cursor: grabbing; }
.pc-foco-no circle { fill: #8ea3c6; transition: fill var(--t-quick) var(--ease-out), r var(--t-quick) var(--ease-out); }
.pc-foco-no.centro { cursor: default; }
.pc-foco-no.centro circle { fill: var(--pc-area, #eef5ff); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--pc-area, #fff) 70%, transparent)); }
.pc-foco-no:not(.centro):hover circle { fill: var(--pc-accent); }
.pc-foco-no:focus-visible { outline: none; }
.pc-foco-no:focus-visible circle { fill: var(--pc-accent); stroke: #fff; stroke-width: 1.5; }
.pc-foco-rot {
  font-family: var(--font-sans); font-size: 9.5px; fill: #93a7c9;
  paint-order: stroke; stroke: rgba(8, 15, 29, .85); stroke-width: 2.6px; stroke-linejoin: round;
  text-anchor: middle; pointer-events: none;
}
.pc-foco-no.centro .pc-foco-rot { fill: #eef5ff; font-size: 10.5px; font-weight: 500; }
.pc-foco-no:hover .pc-foco-rot { fill: #eef5ff; }
.pc-foco-dica {
  margin: 6px 4px 0; font-family: var(--font-serif); font-style: italic;
  font-size: 10.5px; color: #4d5f81;
}
.graph-detail.pc-anim-fim { animation: none !important; }

/* ==========================================================================
   A caixa de foco não aparece chapada: cada parte entra em cascata, e o mapa
   se desenha — as linhas são traçadas e os nós brotam.
   ========================================================================== */
@keyframes pc-foco-sobe { from { opacity: 0; transform: translateY(10px); } }
@keyframes pc-foco-no   { from { opacity: 0; transform: scale(.2); } }
@keyframes pc-foco-fio  { from { opacity: 0; stroke-dashoffset: 260; } }

.pc-foco > * { animation: pc-foco-sobe var(--t-base) var(--ease-out) both; }
.pc-foco > .pc-foco-trilha { animation-delay: 60ms; }
.pc-foco > .pc-foco-titulo { animation-delay: 120ms; }
.pc-foco > .pc-foco-meta   { animation-delay: 180ms; }
.pc-foco > .pc-foco-cont   { animation-delay: 230ms; }
.pc-foco > .pc-foco-mapa   { animation-delay: 280ms; }
.pc-foco > .pc-foco-dica   { animation-delay: 620ms; }

/* os fios do mapa são traçados do centro para fora */
.pc-foco-linha {
  stroke-dasharray: 260;
  animation: pc-foco-fio 620ms var(--ease-out) both;
  animation-delay: 360ms;
}
/* e os nós brotam, o centro primeiro.
   A animação vai no <circle>, não no <g>: o <g> carrega o translate da
   simulação num atributo, e uma transform em CSS o descartaria, jogando
   todos os nós para a origem. */
.pc-foco-no circle {
  animation: pc-foco-no var(--t-base) var(--ease-spring) both;
  transform-box: fill-box; transform-origin: center;
}
.pc-foco-rot { animation: pc-foco-fade 320ms var(--ease-out) both; }
@keyframes pc-foco-fade { from { opacity: 0; } }

.pc-foco-svg > .pc-foco-no:nth-of-type(1) circle { animation-delay: 300ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(2) circle { animation-delay: 430ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(3) circle { animation-delay: 490ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(4) circle { animation-delay: 550ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(5) circle { animation-delay: 610ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(n+6) circle { animation-delay: 660ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(1) .pc-foco-rot { animation-delay: 380ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(2) .pc-foco-rot { animation-delay: 510ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(3) .pc-foco-rot { animation-delay: 570ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(4) .pc-foco-rot { animation-delay: 630ms; }
.pc-foco-svg > .pc-foco-no:nth-of-type(n+5) .pc-foco-rot { animation-delay: 690ms; }

/* a rede de segurança precisa alcançar o SVG, que está mais fundo que "> *" */
.pc-foco.pc-anim-fim, .pc-foco.pc-anim-fim * { animation: none !important; }


/* ==========================================================================
   O cérebro 3D do APP nunca aparece
   Ele existe (o app o monta e nós encolhemos por JS, para não custar GPU),
   mas entre a troca de modo e o nosso `mount()` havia até 500 ms — o intervalo
   do laço de manutenção — em que o cérebro do app ficava visível em tamanho
   cheio. Era o "frame de outro cérebro" ao alternar Mapa → Córtex. Esta regra
   o apaga já na primeira pintura, sem depender de quando o JS roda.
   ========================================================================== */
.brain-3d-canvas { opacity: 0 !important; pointer-events: none !important; }
/* O aviso "Carregando o grafo…" do app (z-index 2) ficava por cima da cena
   (z-index 1) — inclusive durante a dissolução para o Mapa, quando o app
   recarrega o grafo 2D embaixo. Enquanto a cena existe, quem mostra o grafo é
   ela; o aviso de erro do app (.graph-overlay.error) continua aparecendo. */
.graph-stage:has(#pc-brain-scene) .graph-overlay.muted { display: none; }

/* ==========================================================================
   VIDA NA BARRA LATERAL
   Cada tipo de linha reage do jeito dele: o cérebro da área respira e acende
   na própria cor, a pasta ABRE a aba da frente, a folha da nota se inclina
   como papel levantado. Nada dura mais que um quarto de segundo — é resposta
   ao dedo, não espetáculo.
   ========================================================================== */

/* --- o cérebro da área respira --- */
.pc-src-mark-area svg {
  transition: transform var(--t-base) var(--ease-spring), filter var(--t-base) var(--ease-out);
}
.pc-src-row:hover .pc-src-mark-area svg {
  transform: scale(1.16) rotate(-7deg);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc-area, #9aa0b5) 85%, transparent))
          drop-shadow(0 0 14px color-mix(in srgb, var(--pc-area, #9aa0b5) 45%, transparent));
}
.pc-src-row:active .pc-src-mark-area svg { transform: scale(1.02) rotate(-3deg); }
/* e o fio embaixo do nome acende junto */
.pc-src-branch.pc-src-area { transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.pc-src-row:hover .pc-src-branch.pc-src-area {
  border-bottom-color: color-mix(in srgb, var(--pc-area, #9aa0b5) 95%, transparent);
  box-shadow: 0 2px 14px -8px var(--pc-area, #9aa0b5);
}

/* --- a pasta abre --- */
.pc-src-mark-pasta .pc-pasta-fundo { opacity: .55; }
.pc-src-mark-pasta .pc-pasta-frente {
  transform-box: fill-box; transform-origin: 3% 100%;
  transition: transform var(--t-base) var(--ease-spring);
}
.pc-src-row:hover .pc-src-mark-pasta .pc-pasta-frente { transform: rotate(-17deg); }
.pc-src-mark-pasta svg { transition: transform var(--t-base) var(--ease-spring); }
.pc-src-row:hover .pc-src-mark-pasta svg { transform: translateY(-1px); }
/* pasta aberta fica com a aba levemente erguida, sem hover */
.pc-src-branch[aria-expanded="true"] .pc-src-mark-pasta .pc-pasta-frente { transform: rotate(-8deg); }

/* --- a folha da nota se levanta --- */
.pc-src-mark-nota svg {
  transform-box: fill-box; transform-origin: 50% 90%;
  transition: transform var(--t-base) var(--ease-spring);
}
.pc-src-row:hover .pc-src-mark-nota svg { transform: translateY(-1.5px) rotate(-8deg); }
.pc-src-note.on .pc-src-mark-nota svg { transform: rotate(-5deg); }
.pc-src-row:active .pc-src-mark-nota svg { transform: translateY(0) rotate(-2deg); }

/* --- o chevron dos ramos acende --- */
.pc-src-row:hover .pc-src-chev { color: var(--pc-accent); }
.pc-src-row:hover .pc-src-n { color: #a8bad8; }
.pc-src-row:hover .pc-src-ext { color: #7f93b8; }

/* --- filhos nascendo quando um nó abre --- */
@keyframes pc-linha-nasce { from { opacity: 0; transform: translateX(-9px); } }
.pc-src-kids.pc-nasceu > * { animation: pc-linha-nasce 280ms var(--ease-out) both; }
.pc-src-kids.pc-nasceu > *:nth-child(1) { animation-delay: 30ms; }
.pc-src-kids.pc-nasceu > *:nth-child(2) { animation-delay: 75ms; }
.pc-src-kids.pc-nasceu > *:nth-child(3) { animation-delay: 115ms; }
.pc-src-kids.pc-nasceu > *:nth-child(4) { animation-delay: 150ms; }
.pc-src-kids.pc-nasceu > *:nth-child(n+5) { animation-delay: 180ms; }

/* --- o chevron de recolher gira quando a barra abre ou fecha --- */
.pc-src-toggle svg { transition: transform var(--t-base) var(--ease-spring); }
#pc-sources.open .pc-src-toggle svg { transform: rotate(180deg); }
#pc-sources.open .pc-src-toggle:hover svg { transform: rotate(180deg) translateX(2px); }
#pc-sources:not(.open) .pc-src-toggle:hover svg { transform: translateX(2px); }
@keyframes pc-gira-meia { from { transform: rotate(0deg); } }
@keyframes pc-gira-volta { from { transform: rotate(180deg); } }
#pc-sources.open .pc-src-toggle.pc-girou svg { animation: pc-gira-meia var(--t-slow) var(--ease-spring) both; }
#pc-sources:not(.open) .pc-src-toggle.pc-girou svg { animation: pc-gira-volta var(--t-slow) var(--ease-spring) both; }

/* --- a busca reage ao foco --- */
.pc-src-find svg { transition: transform var(--t-base) var(--ease-spring), color var(--t-quick) var(--ease-out); }
.pc-src-find:focus-within svg { transform: scale(1.14) rotate(-10deg); color: var(--pc-accent); }
.pc-src-add svg { transition: transform var(--t-base) var(--ease-spring); }
.pc-src-add:hover svg { transform: rotate(90deg); }

/* --- o fio da aba corrente cresce a partir da esquerda --- */
.pc-src-tab.on::before {
  transform-origin: left center;
  animation: pc-fio-cresce var(--t-base) var(--ease-spring) both;
}
@keyframes pc-fio-cresce { from { transform: scaleX(0); opacity: 0; } }

/* --- a marca do produto pulsa ao passar o mouse --- */
@keyframes pc-marca-pulsa {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.32); }
}
.pc-src-brand svg circle { transform-box: fill-box; transform-origin: center; }
.pc-src-brand:hover svg circle { animation: pc-marca-pulsa 1.1s var(--ease-out) infinite; }
.pc-src-brand:hover svg circle:nth-of-type(2) { animation-delay: .09s; }
.pc-src-brand:hover svg circle:nth-of-type(3) { animation-delay: .18s; }
.pc-src-brand:hover svg circle:nth-of-type(4) { animation-delay: .27s; }
.pc-src-brand:hover svg circle:nth-of-type(5) { animation-delay: .36s; }
.pc-src-brand:hover svg line { opacity: .9; transition: opacity var(--t-base) var(--ease-out); }

/* ==========================================================================
   Alça de largura da coluna da memória
   Fica no palco, não dentro do painel: o painel é do React e a alça seria
   varrida no próximo render. A posição vem da mesma `--pc-painel` que dita a
   largura, então as duas nunca se descolam.
   ========================================================================== */
#pc-ajuste {
  position: absolute; top: 0; bottom: 0; right: var(--pc-painel);
  width: 14px; margin-right: -7px; z-index: 9;
  cursor: col-resize; touch-action: none;
  display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t-quick) var(--ease-out);
}
.graph-stage:not(.pc-com-nota) #pc-ajuste { display: none; }
#pc-ajuste::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--pc-accent) 18%, var(--pc-accent) 82%, transparent);
}
/* a pega no meio, para a alça se anunciar */
.pc-ajuste-pega {
  position: relative; width: 4px; height: 34px; border-radius: 3px;
  background: var(--pc-accent);
  box-shadow: 0 0 10px var(--pc-accent-glow);
  transition: height var(--t-base) var(--ease-spring);
}
#pc-ajuste:hover, #pc-ajuste:focus-visible, #pc-ajuste.puxando { opacity: 1; }
#pc-ajuste:hover .pc-ajuste-pega, #pc-ajuste.puxando .pc-ajuste-pega { height: 52px; }
#pc-ajuste:focus-visible { outline: none; }
#pc-ajuste:focus-visible .pc-ajuste-pega { height: 52px; box-shadow: 0 0 0 2px #fff, 0 0 12px var(--pc-accent-glow); }
/* enquanto arrasta, a coluna acompanha na hora — sem transição */
#pc-ajuste.puxando ~ .graph-detail { transition: none !important; }

/* uma dica discreta na primeira vez que o ponteiro chega perto */
#pc-ajuste::after {
  content: "Arraste para ajustar"; position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(6px); white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; font-size: 11.5px; color: #dbe6ff;
  background: rgba(6, 14, 30, .96); border: 1px solid var(--border);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
#pc-ajuste:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
#pc-ajuste.puxando::after { opacity: 0; }

/* ==========================================================================
   "focar" — destaca a área no cérebro
   Fixo e sempre visível, entre o nome da área e a contagem:
   "Frontal ........ focar  2 ⋯". Miúdo, em serifa itálica como os outros
   rótulos discretos; quando ativo vira "focado", cheio na cor da área.
   ========================================================================== */
.pc-src-focar {
  flex: none; margin: 0 2px 0 6px; padding: 0 5px 1px;
  border: 0; border-radius: 999px; background: transparent;
  font-family: var(--font-serif); font-style: italic; font-size: 11px; line-height: 1.4;
  color: #667a9f; cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out),
              transform var(--t-quick) var(--ease-out);
}
.pc-src-focar:hover { color: var(--pc-area, #dce7fb); background: color-mix(in srgb, var(--pc-area, #9aa0b5) 16%, transparent); }
.pc-src-focar.on {
  background: var(--pc-area, #9aa0b5); color: #0a0f1c; font-style: normal; font-weight: 600;
  box-shadow: 0 0 9px color-mix(in srgb, var(--pc-area, #9aa0b5) 55%, transparent);
}
.pc-src-focar:active { transform: scale(.94); }
/* a contagem da área mora na linha agora, mas continua igual às outras */
.pc-src-n-area { flex: none; font-size: 11.5px; color: #8296b8; font-variant-numeric: tabular-nums; margin-right: 2px; }
/* no Mapa 2D não há cérebro para focar */
.graph-view:has(.graph-canvas) .pc-src-focar { display: none; }


/* ==========================================================================
   Página de Tokens — plano e URL do MCP
   O cartão de cota do app ("10 de 100 memórias") sai: o gratuito passa a ser
   descrito pelos limites que importam, com o uso vivo ao lado, e ganha um
   botão de upgrade. Embaixo, a URL do MCP — a que se cola no agente, com o
   token no fim — para copiar e para revogar.
   ========================================================================== */
/* Os cartões do app saem inteiros desta página: o de cota ("10 de 100
   memórias") e também o de gerar token e a tabela de tokens. Quem identifica o
   usuário agora é o token no fim da URL do MCP — uma credencial por agente,
   com rótulo e perfil, virou trabalho sem função. O `:has` limita a regra à
   página onde os nossos blocos entraram. */
.dashboard > .card { display: none !important; }   /* sempre, não só depois de a nossa entrar: senão o cartão antigo pisca */

.pc-tokens { display: flex; flex-direction: column; gap: 16px; }
.pc-tokens > * { animation: pc-in-up var(--t-slow) var(--ease-out) both; }
.pc-tokens > *:nth-child(1) { animation-delay: 40ms; }
.pc-tokens > *:nth-child(2) { animation-delay: 130ms; }
/* rede: animação congelada (aba em segundo plano) não pode deixar nada invisível */
.pc-tokens.pc-anim-fim, .pc-tokens.pc-anim-fim * { animation: none !important; }

.pc-bloco {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px; border-radius: 14px;
  border: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(152deg, rgba(23, 38, 66, .92), rgba(9, 16, 31, .95));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .09), 0 18px 46px rgba(0, 0, 0, .36);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
/* fio de luz no topo, na cor da marca */
.pc-bloco::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(239, 127, 47, .55), transparent);
}

/* ---- o plano ---- */
.pc-plano-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pc-selo {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(239, 127, 47, .38); background: var(--pc-accent-soft);
  color: var(--pc-accent-strong, #ffb07a);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.pc-plano-titulo { margin: 9px 0 0; font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: #eef5ff; }
.pc-mcp .pc-plano-titulo { margin: 0; }

.pc-upgrade {
  position: relative; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px; border-radius: 999px;
  border: 1px solid rgba(255, 190, 140, .45);
  background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent));
  color: #1b1205; font-weight: 600; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(239, 127, 47, .26);
  transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pc-upgrade svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.pc-upgrade::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -70%; width: 45%;
  transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.pc-upgrade:hover { transform: translateY(-1px); box-shadow: 0 11px 28px rgba(239, 127, 47, .4); }
.pc-upgrade:hover::after { animation: pc-brilho 760ms var(--ease-out); }
.pc-upgrade:active { transform: translateY(0) scale(.985); }
.pc-upgrade:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@keyframes pc-brilho { from { left: -70%; } to { left: 130%; } }

.pc-plano-lista { display: flex; flex-direction: column; }
.pc-plano-linha {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 118px auto; align-items: center; gap: 13px;
  padding: 11px 4px; border-top: 1px solid rgba(138, 170, 235, .13);
  animation: pc-in-left var(--t-base) var(--ease-out) both;
  animation-delay: calc(150ms + var(--pc-ordem, 0) * 60ms);
}
.pc-plano-linha:first-child { border-top: 0; }
.pc-plano-icone { display: grid; place-items: center; color: #8296b8; transition: color var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-spring); }
.pc-plano-icone svg { width: 18px; height: 18px; display: block; }
.pc-plano-linha:hover .pc-plano-icone { color: var(--pc-accent); transform: scale(1.1); }
.pc-plano-nome { font-size: 13.5px; color: #cbd8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-plano-valor {
  font-size: 12.5px; color: #eef5ff; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pc-plano-linha.acima .pc-plano-valor { color: var(--pc-accent-strong, #ffb07a); }
.pc-plano-medidor {
  height: 5px; border-radius: 999px; overflow: hidden;
  /* o trilho precisa se ler mesmo vazio: com 2 MB de teto, 2 KB guardados não
     desenham nada, e uma linha invisível pareceria defeito */
  background: rgba(138, 170, 235, .16); box-shadow: inset 0 0 0 1px rgba(138, 170, 235, .1);
}
.pc-plano-medidor i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  transform: scaleX(var(--pc-frac, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--pc-accent-deep), var(--pc-accent));
  box-shadow: 0 0 12px var(--pc-accent-glow);
  transition: transform 560ms var(--ease-out);
}
/* a barra cresce do zero só na entrada; sem fill-mode, o valor real fica valendo depois */
/* a entrada inteira cabe em 1 s: a rede que destrava animações congeladas
   (`.pc-anim-fim`, armada em 1,05 s) não pode cortar a barra no meio */
.pc-tokens.entrando .pc-plano-medidor i {
  animation: pc-medidor 620ms var(--ease-out);
  animation-delay: calc(200ms + var(--pc-ordem, 0) * 60ms);
}
@keyframes pc-medidor { from { transform: scaleX(0); } }
.pc-plano-linha.acima .pc-plano-medidor i { background: linear-gradient(90deg, #d9631a, #f2c94c); }

.pc-plano-nota { margin: 0; color: #8295b8; font-size: 12.5px; }

/* ---- a URL do MCP ---- */
.pc-mcp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pc-mcp-sub { margin: 6px 0 0; color: #8295b8; font-size: 12.8px; line-height: 1.55; max-width: 62ch; }
.pc-mcp-marca {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid rgba(138, 170, 235, .22); background: rgba(6, 14, 28, .7); color: var(--pc-accent);
}
.pc-mcp-marca svg { width: 19px; height: 19px; }

.pc-mcp-campo {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 9px 9px 14px; border-radius: 11px;
  border: 1px solid rgba(138, 170, 235, .22); background: rgba(3, 9, 20, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 0 26px rgba(2, 7, 18, .7);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pc-mcp-campo:hover, .pc-mcp-campo:focus-within { border-color: rgba(239, 127, 47, .38); }
.pc-mcp-url {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.6px;
  color: #cfe0ff; letter-spacing: .2px;
}
.pc-mcp-url::-webkit-scrollbar { display: none; }
.pc-mcp-url.aberta { color: var(--pc-accent-strong, #ffb07a); }
.pc-mcp-url.trocou { animation: pc-url-nova 820ms var(--ease-out); }
@keyframes pc-url-nova {
  0%   { opacity: 0; transform: translateY(7px); filter: blur(5px); }
  55%  { color: #ffd2ad; }
  100% { opacity: 1; transform: none; filter: none; }
}
.pc-mcp-icone {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border-radius: 9px; border: 1px solid transparent; background: transparent; color: #8296b8; cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
.pc-mcp-icone svg { width: 17px; height: 17px; }
.pc-mcp-icone:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.pc-mcp-icone[aria-pressed="true"] { color: var(--pc-accent); }
.pc-mcp-copiar {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(239, 127, 47, .42); background: rgba(239, 127, 47, .13);
  color: var(--pc-accent-strong, #ffb07a); font-size: 13px; font-weight: 500;
  transition: background var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out),
              color var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-spring);
}
.pc-mcp-copiar svg { width: 15px; height: 15px; }
.pc-mcp-copiar:hover { background: rgba(239, 127, 47, .22); color: #fff; }
.pc-mcp-copiar:active { transform: scale(.97); }
.pc-mcp-copiar.copiado {
  border-color: rgba(126, 224, 168, .5); background: rgba(126, 224, 168, .14); color: #9be9bf;
  animation: pc-copiado var(--t-base) var(--ease-spring);
}
.pc-mcp-copiar.falhou { border-color: rgba(242, 112, 138, .5); background: rgba(242, 112, 138, .12); color: #f29b8a; }
@keyframes pc-copiado { 40% { transform: scale(1.06); } }

.pc-mcp-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-mcp-data { color: #8295b8; font-size: 12px; }
.pc-mcp-revogar {
  padding: 8px 13px; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 500;
  border: 1px solid rgba(242, 112, 138, .3); background: transparent; color: #f29b8a;
  transition: background var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.pc-mcp-revogar:hover:not(:disabled) { background: rgba(224, 91, 61, .14); border-color: rgba(242, 112, 138, .55); color: #ffb3a1; }
.pc-mcp-revogar:disabled { opacity: .5; cursor: default; }

/* estreito: nome e valor na primeira linha, medidor embaixo atravessando —
   empilhar os três em colunas deixaria o valor numa terceira linha solta */
@media (max-width: 720px) {
  .pc-plano-linha { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 7px; }
  .pc-plano-icone { grid-area: 1 / 1; }
  .pc-plano-nome  { grid-area: 1 / 2; }
  .pc-plano-valor { grid-area: 1 / 3; }
  .pc-plano-medidor { grid-area: 2 / 2 / 3 / -1; }
  .pc-plano-head, .pc-mcp-head { flex-direction: column; align-items: flex-start; }
  .pc-mcp-marca { display: none; }
  .pc-mcp-campo { flex-wrap: wrap; }
  .pc-mcp-url { flex: 1 0 100%; order: -1; padding-bottom: 2px; }
}


/* ---- a página de Planos: uma página de conversão ----
   O argumento é o produto: o cérebro da cena na abertura, crescendo conforme o
   plano sob o mouse; um plano recomendado de verdade; cada plano diz para quem
   é; garantias perto dos botões; empresas; e as perguntas que travam a compra. */
.connect-guide > :not(#pc-planos-pagina) { display: none !important; }   /* idem: o guia do app nunca aparece */
.pc-planos-pagina { display: flex; flex-direction: column; gap: 60px; padding: 8px 0 72px; }
.pc-planos-pagina.pc-anim-fim, .pc-planos-pagina.pc-anim-fim * { animation: none !important; }
.pc-planos-pagina .pc-src-eyebrow { color: var(--pc-accent); font-size: 12px; margin: 0; }

/* abertura */
.pc-planos-abertura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 44px; align-items: center; min-height: 440px; }
.pc-planos-abertura-txt > * { animation: pc-in-up var(--t-slow) var(--ease-out) both; }
.pc-planos-abertura-txt > :nth-child(1) { animation-delay: 40ms; }
.pc-planos-abertura-txt > :nth-child(2) { animation-delay: 110ms; }
.pc-planos-abertura-txt > :nth-child(3) { animation-delay: 180ms; }
.pc-planos-abertura-txt > :nth-child(4) { animation-delay: 250ms; }
.pc-planos-abertura-txt > :nth-child(5) { animation-delay: 320ms; }
.pc-planos-titulo { margin: 12px 0 16px; font-family: var(--font-serif); font-size: clamp(34px, 3.8vw, 50px); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; color: #f6f8ff; }
.pc-planos-sub { margin: 0; max-width: 52ch; color: #a5b4cd; font-size: 16px; line-height: 1.6; }
.pc-planos-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.pc-planos-miuda { margin: 14px 0 0; font-size: 12.5px; color: #7f93b8; }
.pc-planos-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 190, 140, .45);
  background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent));
  color: #1b1205; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 24px rgba(239, 127, 47, .28);
  transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pc-planos-cta::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -70%; width: 45%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.pc-planos-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(239, 127, 47, .4); filter: none; }
.pc-planos-cta:hover::after { animation: pc-brilho 760ms var(--ease-out); }
.pc-planos-ghost {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(138, 170, 235, .26); background: rgba(10, 21, 38, .6); color: #cfe0ff; font-size: 14px; font-weight: 500;
  transition: border-color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.pc-planos-ghost:hover { border-color: rgba(239, 127, 47, .5); color: #fff; background: rgba(239, 127, 47, .1); }

/* a cena: o cérebro que cresce com o plano */
.pc-planos-cena {
  position: relative; min-height: 440px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(520px 520px at 50% 45%, rgba(51, 83, 204, .22), transparent 70%), #040a18;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(138, 170, 235, .14);
  animation: pc-cena-chega 900ms var(--ease-out) both; animation-delay: 160ms;
}
@keyframes pc-cena-chega { from { opacity: 0; transform: scale(.97); } }
.pc-planos-cena-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #01040e; opacity: 0; transition: opacity 700ms var(--ease-out); }
.pc-planos-cena-iframe.pronta { opacity: 1; }
.pc-planos-cena::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(4, 10, 24, .75)); }
.pc-planos-cena-legenda { position: absolute; left: 20px; right: 20px; bottom: 36px; z-index: 2; margin: 0; font-family: var(--font-serif); font-size: 15px; color: #dfe7ff; }
.pc-planos-cena-legenda strong { font-weight: 600; color: var(--pc-accent-strong, #ffb07a); }
.pc-planos-cena-legenda.pc-troca { animation: pc-in-up var(--t-base) var(--ease-out) both; }
.pc-planos-cena-dica { position: absolute; left: 20px; bottom: 14px; z-index: 2; margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #7f93b8; }

/* os planos */
.pc-planos-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; scroll-margin-top: 24px; }
.pc-plano {
  position: relative; display: flex; flex-direction: column; padding: 26px 22px 20px; border-radius: 18px;
  border: 1px solid rgba(138, 170, 235, .18);
  background: linear-gradient(168deg, rgba(20, 34, 60, .78), rgba(7, 12, 26, .9));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .07);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  animation: pc-in-up var(--t-slow) var(--ease-out) both; animation-delay: calc(260ms + var(--pc-ordem, 0) * 80ms);
}
.pc-plano:hover { transform: translateY(-4px); border-color: rgba(239, 127, 47, .42); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.pc-plano.recomendado {
  padding-top: 40px;
  border-color: rgba(239, 127, 47, .55);
  background: linear-gradient(168deg, rgba(64, 34, 14, .55), rgba(10, 14, 28, .92) 58%);
  box-shadow: 0 0 0 1px rgba(239, 127, 47, .22), 0 34px 70px -28px rgba(239, 127, 47, .6), inset 0 1px 0 rgba(255, 200, 150, .14);
}
.pc-plano.recomendado::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, rgba(239, 127, 47, .28), transparent 72%);
  animation: pc-plano-respira 4.5s ease-in-out infinite;
}
@keyframes pc-plano-respira { 50% { opacity: .45; } }
.pc-plano-marca { position: absolute; top: 13px; left: 22px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: var(--pc-accent-strong, #ffb07a); }
.pc-plano-marca::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-accent); box-shadow: 0 0 10px var(--pc-accent-glow); }
.pc-plano-nome { margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: #eef5ff; }
.pc-plano-quem { margin: 6px 0 18px; min-height: 2.8em; font-family: var(--font-serif); font-style: italic; font-size: 13.5px; line-height: 1.4; color: #9fb0d4; }
.pc-plano-preco { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; }
.pc-plano-preco strong { font-family: var(--font-serif); font-size: 32px; font-weight: 600; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-plano-preco small { color: #8295b8; font-size: 12px; }
.pc-plano-btn {
  width: 100%; padding: 11px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(239, 127, 47, .45); background: transparent; color: var(--pc-accent-strong, #ffb07a);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  transition: background var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-spring);
}
.pc-plano-btn:hover:not(:disabled) { background: var(--pc-accent); border-color: var(--pc-accent); color: #1b1205; filter: none; }
.pc-plano-btn:active:not(:disabled) { transform: scale(.97); }
.pc-plano.recomendado .pc-plano-btn { background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent)); border-color: rgba(255, 190, 140, .45); color: #1b1205; box-shadow: 0 8px 22px rgba(239, 127, 47, .3); }
.pc-plano.recomendado .pc-plano-btn:hover:not(:disabled) { filter: brightness(1.06); }
.pc-plano-btn:disabled { border-color: rgba(138, 170, 235, .22); background: transparent; color: #8295b8; cursor: default; opacity: 1; }
.pc-plano-btn.pc-quis { background: transparent; border-color: rgba(138, 170, 235, .3); color: #9fb0d4; font-style: italic; animation: pc-copiado var(--t-base) var(--ease-spring); }
.pc-plano-specs { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(138, 170, 235, .14); display: flex; flex-direction: column; gap: 9px; }
.pc-plano-specs li { font-size: 13px; line-height: 1.4; color: #a5b4cd; }
.pc-plano-specs b { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: #eef5ff; font-variant-numeric: tabular-nums; margin-right: 2px; }
.pc-plano-specs small { display: block; margin-top: 2px; font-size: 11px; color: #7d8dae; font-variant-numeric: tabular-nums; }   /* "500 por córtex", em letra menor sob o total */

/* garantias: perto dos botões, onde a dúvida aparece */
.pc-planos-garantias { list-style: none; margin: -34px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 12.5px; color: #8ea0c2; animation: pc-fade var(--t-slow) var(--ease-out) both; animation-delay: 700ms; }
.pc-planos-garantias li::before { content: "✓"; margin-right: 7px; color: var(--pc-accent); font-weight: 700; }

/* a conversa de exemplo (Planos e a página de empresas): a pergunta do dono
   do negócio e a resposta que só sai dos sistemas dele — o benefício mostrado */
.pc-chat { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; font-family: var(--font-sans); }
.pc-chat-rotulo { margin: 0 0 2px; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: #7d8dae; }
.pc-chat-q, .pc-chat-a { position: relative; max-width: 88%; padding: 9px 13px; border-radius: 15px; }
.pc-chat-q { align-self: flex-end; color: #fff4ea; background: linear-gradient(135deg, rgba(239, 127, 47, .92), rgba(214, 102, 30, .92)); border-bottom-right-radius: 4px; box-shadow: 0 6px 18px rgba(239, 127, 47, .18); }
.pc-chat-q.digitando .pc-chat-txt::after { content: "|"; margin-left: 1px; animation: pc-chat-cursor 1s steps(2) infinite; }
@keyframes pc-chat-cursor { to { opacity: 0; } }
.pc-chat-a { align-self: flex-start; color: #dbe5fb; background: rgba(14, 24, 46, .92); border: 1px solid rgba(138, 170, 235, .22); border-bottom-left-radius: 4px; }
.pc-chat-fonte { display: block; margin-top: 6px; font-size: 11px; color: #7fb7ff; }
.pc-chat-fonte:empty { display: none; }
.pc-chat-pontos { display: none; gap: 4px; padding: 4px 2px; }
.pc-chat-pontos i { width: 6px; height: 6px; border-radius: 50%; background: #8ea0c2; animation: pc-chat-ponto 1s infinite; }
.pc-chat-pontos i:nth-child(2) { animation-delay: .15s; }
.pc-chat-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes pc-chat-ponto { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.pc-chat-a.pensando .pc-chat-pontos { display: inline-flex; }
.pc-chat-a.pensando .pc-chat-txt, .pc-chat-a.pensando .pc-chat-fonte { display: none; }

/* empresas: o texto, a conversa de exemplo ao lado, o botão embaixo do texto */
.pc-planos-empresas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); grid-template-areas: "txt chat" "cta chat";
  align-items: center; column-gap: 40px; row-gap: 20px;
  padding: 30px 32px; border-radius: 22px; border: 1px solid rgba(138, 170, 235, .2);
  background: radial-gradient(520px 260px at 0% 0%, rgba(51, 83, 204, .22), transparent 70%), linear-gradient(120deg, rgba(23, 38, 66, .9), rgba(8, 14, 28, .95));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .08);
}
.pc-planos-empresas-txt { grid-area: txt; min-width: 0; align-self: end; }
.pc-planos-empresas h2 { margin: 8px 0 8px; font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: #f2f6ff; }
.pc-planos-empresas p:last-child { margin: 0; max-width: 64ch; color: #a5b4cd; font-size: 14px; line-height: 1.55; }
.pc-planos-empresas .pc-chat { grid-area: chat; }
.pc-planos-empresas .pc-planos-cta { grid-area: cta; justify-self: start; align-self: start; }

/* as perguntas que travam a compra */
.pc-planos-faq { max-width: 760px; }
.pc-planos-faq h2 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: #f2f6ff; }
.pc-planos-pergunta { border-top: 1px solid rgba(138, 170, 235, .14); animation: pc-in-left var(--t-base) var(--ease-out) both; animation-delay: calc(var(--pc-ordem, 0) * 60ms); }
.pc-planos-pergunta:last-of-type { border-bottom: 1px solid rgba(138, 170, 235, .14); }
.pc-planos-pergunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; cursor: pointer; font-family: var(--font-serif); font-size: 17px; color: #eef5ff; transition: color var(--t-quick) var(--ease-out); }
.pc-planos-pergunta summary::-webkit-details-marker { display: none; }
.pc-planos-pergunta summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--pc-accent); transition: transform var(--t-base) var(--ease-spring); }
.pc-planos-pergunta[open] summary::after { transform: rotate(45deg); }
.pc-planos-pergunta summary:hover { color: var(--pc-accent-strong, #ffb07a); }
.pc-planos-pergunta p { margin: -4px 0 18px; max-width: 62ch; color: #a5b4cd; font-size: 14px; line-height: 1.6; animation: pc-in-up var(--t-base) var(--ease-out) both; }

.pc-planos-nota {
  margin: -30px 0 0; max-width: 60ch; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(239, 127, 47, .28); background: rgba(239, 127, 47, .08);
  color: #e7d6c6; font-size: 13px; line-height: 1.5;
  animation: pc-in-up var(--t-base) var(--ease-out) both;
}

@media (max-width: 1000px) {
  .pc-planos-empresas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "chat" "cta"; }
  .pc-planos-abertura { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pc-planos-cena { min-height: 320px; order: -1; }
  .pc-planos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .pc-plano.recomendado { padding-top: 40px; }
  .pc-plano-quem { min-height: 0; }
}
@media (hover: none) { .pc-planos-cena-dica { display: none; } }   /* no toque não há "passar o mouse" */
@media (max-width: 600px) {
  .pc-planos-lista { grid-template-columns: minmax(0, 1fr); }
  .pc-planos-garantias { justify-content: flex-start; }
}

/* ==========================================================================
   O gancho para empresas — canto inferior esquerdo do palco
   O material da barra lateral em miniatura: fio de luz, degradê, a isca em
   serifa itálica, a pergunta digitada numa caixa escura com cursor, o link
   laranja. Entra de baixo depois que o cérebro chegou; o × leva embora.
   ========================================================================== */
.pc-gancho {
  position: absolute; left: 18px; bottom: 18px; z-index: 4;
  width: min(360px, calc(100% - 36px));
  padding: 14px 16px 13px; border-radius: 16px;
  border: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(180deg, rgba(23, 38, 66, .92), rgba(10, 17, 32, .95));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 18px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(239, 127, 47, .06);
  opacity: .55;                                  /* bem transparente em repouso: é gancho, não aviso */
  transition: opacity var(--t-base) var(--ease-out);
  animation: pc-gancho-entra 620ms var(--ease-spring) both; animation-delay: 900ms;
}
.pc-gancho:hover, .pc-gancho:focus-within { opacity: 1; }
/* com uma memória em foco, o canto é da caixa de foco: o gancho espera */
.graph-stage.pc-com-nota .pc-gancho { opacity: 0; pointer-events: none; }
@keyframes pc-gancho-entra { from { opacity: 0; transform: translateY(16px); } }
.pc-gancho.pc-gancho-sai { animation: pc-gancho-vai 300ms var(--ease-in) both; }
@keyframes pc-gancho-vai { to { opacity: 0; transform: translateY(10px); } }
.pc-gancho-x {
  position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px; background: none; color: #7f93b8; font-size: 17px; line-height: 1; cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
.pc-gancho-x:hover { color: #fff; background: rgba(138, 170, 235, .14); filter: none; }
.pc-gancho-isca { margin: 0 22px 9px 0; font-family: var(--font-serif); font-style: italic; font-size: 13.5px; line-height: 1.35; color: #eef5ff; }
.pc-gancho-isca::before { content: "✦"; margin-right: 7px; font-style: normal; color: var(--pc-accent); }
/* o chat de exemplo: os balões do tema, menores, chegando um de cada vez */
.pc-gancho-chat { min-height: 86px; font-size: 12px; gap: 6px; }
.pc-gancho-chat .pc-chat-q, .pc-gancho-chat .pc-chat-a { max-width: 94%; padding: 7px 10px; border-radius: 12px; opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.pc-gancho-chat .pc-chat-q.visto, .pc-gancho-chat .pc-chat-a.visto { opacity: 1; transform: none; }
.pc-gancho-chat .pc-chat-q .pc-chat-txt:empty::after { content: "|"; }
.pc-gancho-chat .pc-chat-fonte { font-size: 10.5px; margin-top: 4px; }
.pc-gancho-vivo { display: flex; align-items: center; gap: 7px; margin: 7px 0 0; font-size: 11px; color: #8ea0c2; }
.pc-gancho-vivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7ed957; box-shadow: 0 0 7px rgba(126, 217, 87, .8); animation: pc-gancho-pulsa 2.2s ease-in-out infinite; }
@keyframes pc-gancho-pulsa { 50% { opacity: .45; } }
.pc-gancho-link {
  display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--pc-accent-strong, #ffb07a); text-decoration: none;
  transition: color var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out);
}
.pc-gancho-link:hover { color: #fff; transform: translateX(2px); }
/* no toque, o palco é apertado: o cartão encolhe e não cobre o interruptor */
@media (max-width: 899px) {
  .pc-gancho { left: 12px; right: 12px; bottom: 74px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-gancho { animation: none; }
}

/* ==========================================================================
   O aviso do backend (js/api.js): limite do plano, versão velha da árvore,
   degustação encerrada. Uma faixa discreta no alto do palco, que some sozinha.
   ========================================================================== */
.pc-aviso {
  position: fixed; left: 50%; top: 14px; z-index: 60; transform: translate(-50%, -12px);
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px;
  border: 1px solid rgba(138, 170, 235, .28);
  background: linear-gradient(180deg, rgba(23, 38, 66, .97), rgba(10, 17, 32, .98));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 18px 44px rgba(0, 0, 0, .45);
  color: #eef5ff; font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.pc-aviso.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pc-aviso.erro { border-color: rgba(242, 112, 138, .45); }
.pc-aviso.erro::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; background: rgba(242, 112, 138, .9); color: #1a0509; font-size: 12px; font-weight: 700; }
.pc-aviso.info { border-color: rgba(239, 127, 47, .4); }

/* ==========================================================================
   Além do plano. Quem desce de plano não perde nada: as fontes e os projetos
   que passam do teto continuam na lista, só para ler. Um cadeado miúdo marca a
   linha; tentar criar ou alterar ali faz "fazer upgrade" aparecer na própria
   linha por uns segundos (js/host/50-acervo.js).
   ========================================================================== */
.pc-src-cadeado { flex: none; width: 11px; height: 11px; margin-left: 5px; color: #55688c; }
.pc-src-cadeado svg { width: 11px; height: 11px; display: block; }
.pc-src-branch:hover .pc-src-cadeado { color: #93a6c8; }
.pc-src-row.pc-src-alem > .pc-src-branch > .pc-src-label { color: #93a3c2; }

.pc-src-upgrade {
  flex: none; margin: 0 2px 0 6px; padding: 1px 8px 2px;
  border: 1px solid color-mix(in srgb, var(--pc-accent) 55%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--pc-accent) 14%, transparent);
  font-family: var(--font-serif); font-style: italic; font-size: 11px; line-height: 1.4;
  color: var(--pc-accent); cursor: pointer; white-space: nowrap;
  animation: pc-upgrade-entra .28s var(--ease-out);
  transition: background var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.pc-src-upgrade:hover { background: var(--pc-accent); color: #0a0f1c; font-style: normal; font-weight: 600; }
.pc-src-upgrade:active { transform: scale(.94); }
@keyframes pc-upgrade-entra { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }

/* com a pílula na linha, "focar", a contagem e o cadeado saem do caminho por
   esses segundos: o nome da fonte precisa continuar legível (a linha é apertada) */
.pc-src-row:has(.pc-src-upgrade) > .pc-src-focar,
.pc-src-row:has(.pc-src-upgrade) > .pc-src-n-area,
.pc-src-row:has(.pc-src-upgrade) .pc-src-cadeado { display: none; }
.pc-src-row:has(.pc-src-upgrade) > .pc-src-branch > .pc-src-label { min-width: 9ch; }

/* ==========================================================================
   EDITOR DE MEMÓRIA — a mesma coluna da direita onde a leitura mora
   (js/host/87-editor.js). O painel de leitura do app fica atrás, escondido,
   enquanto se edita; o material é o do painel da memória (15-painel-memoria).
   ========================================================================== */
.pc-editor {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 12;
  width: var(--pc-painel); display: flex; flex-direction: column;
  border-left: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(180deg, rgba(23, 38, 66, .72), rgba(9, 16, 31, .8));
  -webkit-backdrop-filter: blur(44px) saturate(1.4); backdrop-filter: blur(44px) saturate(1.4);
  box-shadow: inset 1px 0 0 rgba(180, 222, 255, .08), -24px 0 60px rgba(0, 0, 0, .55);
  color: #c9d7ef; font-family: var(--font-sans);
  animation: pc-painel-entra var(--t-slow) var(--ease-out) both;
}
body.pc-editando .graph-detail { visibility: hidden; }          /* a leitura espera atrás */
body.pc-editando #pc-user { right: calc(var(--pc-painel) + 16px); }
body.pc-editando .pc-foco { pointer-events: none; opacity: .7; }

.pc-ed-cab { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 0 26px; }
.pc-ed-eyebrow { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #778bb0; }
.pc-ed-fechar {
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .03); color: #93a7c9; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-ed-fechar::before { content: "✕"; font-size: 13px; line-height: 1; }
.pc-ed-fechar:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* onde mora: a trilha da área, como na caixa de foco */
.pc-ed-trilha { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 8px 26px 0; min-height: 22px; }
.pc-ed-cerebro { flex: none; display: grid; place-items: center; }
.pc-ed-cerebro svg { width: 16px; height: 16px; display: block; }
.pc-ed-area { font-size: 12px; font-weight: 500; color: var(--pc-area, #c9d7ef); }
.pc-ed-sep { font-size: 11px; color: #55688c; }
.pc-ed-passo { font-size: 11.5px; color: #8296b8; }
.pc-ed-onde {
  margin-left: 4px; padding: 5px 28px 5px 10px; max-width: 100%;
  border: 1px solid rgba(138, 170, 235, .22); border-radius: 9px;
  background: rgba(3, 9, 20, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93b8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  color: #eef5ff; font-size: 12.5px; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.pc-ed-onde:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }

.pc-ed-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 26px 20px; }
.pc-ed-corpo::-webkit-scrollbar { width: 8px; }
.pc-ed-corpo::-webkit-scrollbar-thumb { background: rgba(138, 170, 235, .22); border-radius: 4px; }

/* o título é o mesmo da leitura, só que se escreve nele */
.pc-ed-titulo {
  display: block; width: 100%; margin: 0 0 14px; padding: 4px 0 10px; border: 0;
  border-bottom: 1px solid rgba(138, 170, 235, .14); background: transparent;
  font-family: var(--font-serif); font-size: 25px; font-weight: 500; line-height: 1.18;
  letter-spacing: -.015em; color: #fff; outline: none;
  transition: border-color var(--t-quick) var(--ease-out);
}
.pc-ed-titulo::placeholder { color: #55688c; font-style: italic; font-weight: 400; }
.pc-ed-titulo:focus { border-bottom-color: color-mix(in srgb, var(--pc-accent) 60%, transparent); }

.pc-ed-secao { margin: 0 0 14px; }
.pc-ed-rotulo {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
  font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #778bb0;
}
.pc-ed-rotulo svg { width: 13px; height: 13px; color: #55688c; }

/* etiquetas: chips com o × dentro, e o campo no fim da linha */
.pc-ed-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px;
  padding: 5px 8px; border-radius: 11px; cursor: text;
  border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .5);
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.pc-ed-chips:focus-within { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-ed-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 5px 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 40%, transparent);
  background: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 12%, transparent);
  color: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 70%, #fff);
  animation: pc-chip-entra .2s var(--ease-spring) both;
}
@keyframes pc-chip-entra { from { opacity: 0; transform: scale(.85); } }
.pc-ed-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ed-chip-x {
  flex: none; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: .6;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-ed-chip-x:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.pc-ed-novatag { flex: 1 1 120px; min-width: 100px; padding: 4px 4px; border: 0; background: transparent; color: #eef5ff; font-size: 12.5px; outline: none; }
.pc-ed-novatag::placeholder { color: #55688c; font-style: italic; }

/* o texto cru (modo "Texto"): a mesma medida da leitura */
.pc-ed-texto {
  display: block; width: 100%; min-height: 220px; margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid rgba(138, 170, 235, .18); border-radius: 12px; resize: vertical;
  background: rgba(3, 9, 20, .5); color: #dbe6f8; font-family: var(--font-sans);
  font-size: 14px; line-height: 1.72; outline: none; tab-size: 2;
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.pc-ed-texto::placeholder { color: #55688c; font-style: italic; }
.pc-ed-texto:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-ed-texto:disabled { color: #55688c; }

/* ligações: a busca e as duas listas */
.pc-ed-busca { position: relative; margin-bottom: 10px; }
.pc-ed-busca > input {
  display: block; width: 100%; padding: 9px 12px; border-radius: 11px; outline: none;
  border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .5); color: #eef5ff; font-size: 12.5px;
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.pc-ed-busca > input::placeholder { color: #55688c; font-style: italic; }
.pc-ed-busca > input:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-ed-sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 2;
  padding: 5px; border-radius: 11px;
  border: 1px solid rgba(138, 170, 235, .24);
  background: linear-gradient(180deg, rgba(23, 38, 66, .98), rgba(10, 17, 32, .99));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.pc-ed-sug {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px;
  border: 0; border-radius: 8px; background: transparent; color: #dbe6f8;
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.pc-ed-sug svg { width: 13px; height: 13px; flex: none; color: #7f93b8; }
.pc-ed-sug span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ed-sug em { margin-left: auto; flex: none; font-family: var(--font-serif); font-size: 11px; color: #667a9f; }
.pc-ed-sug:hover, .pc-ed-sug:focus { background: var(--pc-accent-soft); color: #fff; outline: none; }
.pc-ed-sug-nova span { color: var(--pc-accent); }

.pc-ed-cita, .pc-ed-citada { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.pc-ed-mini { width: 100%; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #667a9f; }
.pc-ed-chip-link { --pc-tag: #8ea3c6; }
.pc-ed-chip-link.fantasma { --pc-tag: #8794ad; border-style: dashed; }
.pc-ed-chip-back { --pc-tag: #9aa0b5; padding-right: 10px; cursor: pointer; font: inherit; font-size: 12px; }
.pc-ed-chip-back:hover { --pc-tag: var(--pc-accent); }

/* rodapé: o estado, cancelar, guardar */
.pc-ed-pe {
  display: flex; align-items: center; gap: 10px; padding: 12px 22px 18px 26px;
  border-top: 1px solid rgba(138, 170, 235, .14);
}
.pc-ed-status { flex: 1; min-width: 0; font-size: 12px; color: #778bb0; }
.pc-ed-status.erro { color: #ffb0be; }
.pc-ed-cancelar, .pc-ed-guardar {
  flex: none; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-ed-cancelar { border: 1px solid rgba(138, 170, 235, .2); background: transparent; color: #93a7c9; }
.pc-ed-cancelar:hover { color: #fff; border-color: rgba(138, 170, 235, .45); }
.pc-ed-guardar {
  border: 1px solid rgba(255, 190, 140, .45); color: #1b1205;
  background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent));
  box-shadow: 0 8px 22px rgba(239, 127, 47, .3);
}
.pc-ed-guardar:hover:not(:disabled) { filter: brightness(1.06); }
.pc-ed-guardar:active:not(:disabled) { transform: scale(.97); }
.pc-ed-guardar:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* o lápis na caixa de foco */
.pc-foco-nome { display: flex; align-items: flex-start; gap: 8px; }
.pc-foco-nome .pc-foco-titulo { flex: 1; min-width: 0; }
.pc-foco-editar {
  flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; margin-top: -1px;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .03); color: #93a7c9; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-foco-editar svg { width: 12px; height: 12px; }
.pc-foco-editar:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* ---- a barra de ferramentas: escreve a sintaxe pela pessoa ---- */
.pc-ed-bar {
  position: sticky; top: -14px; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 0 0 8px; padding: 6px 6px; border-radius: 11px;
  border: 1px solid rgba(138, 170, 235, .16);
  background: linear-gradient(180deg, rgba(23, 38, 66, .96), rgba(12, 21, 40, .96));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.pc-ed-fer {
  min-width: 28px; height: 26px; padding: 0 7px; border: 0; border-radius: 7px;
  background: transparent; color: #a9bbdb; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.pc-ed-fer:hover { background: rgba(138, 170, 235, .14); color: #fff; }
.pc-ed-fer.neg { font-weight: 800; }
.pc-ed-fer.ita { font-style: italic; font-family: var(--font-serif); font-weight: 500; font-size: 14px; }
.pc-ed-fer.risco { text-decoration: line-through; }
.pc-ed-bar-sep { width: 1px; height: 16px; margin: 0 3px; background: rgba(138, 170, 235, .18); }
.pc-ed-modo {
  margin-left: auto; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(138, 170, 235, .22); background: transparent; color: #93a7c9;
  font-family: var(--font-serif); font-style: italic; font-size: 12px; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-ed-modo:hover, .pc-ed-modo.on { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* ---- o documento em blocos: a nota formatada; clicar num bloco abre só ele ---- */
.pc-ed-area-texto { margin: 0 0 16px; }
.pc-ed-doc {
  min-height: 220px; padding: 10px 12px 12px; border-radius: 12px;
  border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .5);
}
.pc-ed-bloco { position: relative; margin: 0 -8px; padding: 2px 8px; border-radius: 8px; cursor: text; transition: background var(--t-quick) var(--ease-out); }
.pc-ed-bloco > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pc-ed-bloco + .pc-ed-bloco { margin-top: 10px; }
.pc-ed-bloco-titulo + .pc-ed-bloco { margin-top: 6px; }
.pc-ed-bloco + .pc-ed-bloco-titulo { margin-top: 18px; }
.pc-ed-bloco:hover { background: rgba(138, 170, 235, .07); }
.pc-ed-bloco:hover::before {
  content: "✎"; position: absolute; left: -14px; top: 4px; font-size: 11px; color: #55688c;
}
.pc-ed-bloco.editando { background: transparent; cursor: auto; }
.pc-ed-bloco.editando::before { content: none; }
.pc-ed-bloco-hr { padding: 8px; }
.pc-ed-doc .pc-md-hr { margin: 4px 0; }
.pc-ed-doc .pc-md-h { line-height: 1.3; }
.pc-ed-doc .pc-md-pre { margin: 0; }
.pc-ed-doc .pc-md-tabela-rolagem { margin: 0; }
.pc-ed-doc .pc-md-props { margin: 0; }

/* o bloco aberto: a caixa de texto no lugar dele, na mesma medida do desenho */
.pc-ed-src {
  display: block; width: 100%; min-height: 30px; margin: 0; padding: 4px 8px; resize: none; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pc-accent) 55%, transparent); border-radius: 8px;
  background: rgba(23, 38, 66, .55); color: #eef5ff; font-family: var(--font-sans);
  font-size: 14px; line-height: 1.72; outline: none; tab-size: 2;
  box-shadow: 0 0 0 3px rgba(239, 127, 47, .12);
}
.pc-ed-src::placeholder { color: #55688c; font-style: italic; }
.pc-ed-src.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre; overflow-x: auto; }
.pc-ed-bloco-titulo .pc-ed-src { font-family: var(--font-serif); font-size: 18px; line-height: 1.35; }
.pc-ed-vazio { margin: 6px 0; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #55688c; }
.pc-ed-mais {
  display: block; width: 100%; margin-top: 8px; padding: 8px 6px; border: 1px dashed rgba(138, 170, 235, .18); border-radius: 8px;
  background: transparent; color: #55688c; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; text-align: left; cursor: text;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-ed-mais:hover { color: #a9bbdb; border-color: rgba(138, 170, 235, .4); }
.pc-ed-bloco-novo { margin-top: 8px; }

/* ==========================================================================
   MARKDOWN RENDERIZADO (.pc-md) — o texto das memórias, na leitura e no editor
   em blocos (js/host/83-markdown.js). A medida da leitura: 14px, entrelinha
   1.72; títulos em serifa, como o resto do painel.
   ========================================================================== */
.pc-md { font-size: 14px; line-height: 1.72; color: #c9d7ef; overflow-wrap: anywhere; }
.pc-md > :first-child { margin-top: 0 !important; }
.pc-md > :last-child { margin-bottom: 0 !important; }

.pc-md-h { margin: 22px 0 8px; font-family: var(--font-serif); font-weight: 500; line-height: 1.22; letter-spacing: -.012em; color: #fff; }
.pc-md-h1 { font-size: 22px; }
.pc-md-h2 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid rgba(138, 170, 235, .14); }
.pc-md-h3 { font-size: 16.5px; }
.pc-md-h4 { font-size: 14.5px; }
.pc-md-h5, .pc-md-h6 { font-size: 13px; color: #dae5f9; }
.pc-md-h6 { font-style: italic; }

.pc-md-p { margin: 0 0 12px; }
.pc-md-b { color: #eef5ff; font-weight: 600; }
.pc-md-i { font-style: italic; }
.pc-md-del { color: #7f93b8; text-decoration: line-through; }
.pc-md-mark { padding: 0 3px; border-radius: 3px; background: rgba(247, 201, 72, .28); color: #fff3c4; }
.pc-md-code { padding: 1px 5px; border-radius: 5px; background: rgba(3, 8, 20, .7); border: 1px solid rgba(138, 170, 235, .14); font-size: .9em; color: #a8d8ff; }
.pc-md-a { color: #8ec5ff; text-decoration: none; border-bottom: 1px solid rgba(142, 197, 255, .4); }
.pc-md-a:hover { color: #fff; border-color: #fff; }
.pc-md-img { display: block; max-width: 100%; margin: 6px 0 12px; border-radius: 10px; }

/* [[ligações]]: as que existem em laranja; as que ainda não, tracejadas */
.pc-md-wiki {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--pc-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--pc-accent) 45%, transparent);
  transition: color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.pc-md-wiki:hover { color: #ffb07a; border-color: #ffb07a; }
.pc-md-wiki.fantasma { color: #a8b3cc; border-bottom-style: dashed; border-color: rgba(168, 179, 204, .5); }
.pc-md-wiki.fantasma:hover { color: var(--pc-accent); border-color: var(--pc-accent); }

/* #etiquetas no texto: chips miúdos, na cor da etiqueta */
.pc-md-tag {
  display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 40%, transparent);
  background: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 12%, transparent);
  color: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 70%, #fff);
  font: inherit; font-size: .86em; line-height: 1.6; vertical-align: baseline;
  transition: background var(--t-quick) var(--ease-out);
}
.pc-md-tag:hover { background: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 28%, transparent); }

.pc-md-hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid rgba(138, 170, 235, .2); }

/* código: fundo escuro, o nome da linguagem no canto e "copiar" */
.pc-md-pre {
  position: relative; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(3, 8, 20, .7); border: 1px solid rgba(138, 170, 235, .14);
  font-size: 12.5px; line-height: 1.6; overflow-x: auto;
}
.pc-md-pre code { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #cfe3ff; white-space: pre; }
.pc-md-pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 6px; right: 62px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #55688c; }
.pc-md-copiar {
  position: absolute; top: 5px; right: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(138, 170, 235, .2); background: rgba(255, 255, 255, .03);
  color: #93a7c9; font-size: 10.5px; cursor: pointer; opacity: 0;
  transition: opacity var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.pc-md-pre:hover .pc-md-copiar { opacity: 1; }
.pc-md-copiar:hover { color: #fff; border-color: var(--pc-accent); }

.pc-md-quote {
  margin: 0 0 14px; padding: 4px 0 4px 14px;
  border-left: 3px solid color-mix(in srgb, var(--pc-accent) 60%, transparent);
  color: #aebddb; font-style: italic;
}
.pc-md-quote .pc-md-p { margin-bottom: 6px; }

/* listas: recuo curto, marcador na cor do texto apagada; tarefas com caixa */
.pc-md-lista { margin: 0 0 12px; padding-left: 22px; }
.pc-md-lista .pc-md-lista { margin: 2px 0 0; }
.pc-md-lista li { margin: 2px 0; }
.pc-md-lista.solta > li { margin: 0 0 8px; }
.pc-md-lista li::marker { color: #7f93b8; }
.pc-md-li > .pc-md-p { margin: 0 0 6px; }
.pc-md-tarefa { list-style: none; margin-left: -22px !important; display: flex; align-items: flex-start; gap: 8px; }
.pc-md-tarefa input {
  flex: none; width: 15px; height: 15px; margin: 5px 0 0 1px; accent-color: var(--pc-accent); cursor: pointer;
}
.pc-md-tarefa input:disabled { cursor: default; }
.pc-md-tarefa.feita > .pc-md-li { color: #7f93b8; text-decoration: line-through; text-decoration-color: rgba(127, 147, 184, .6); }
.pc-md-tarefa > .pc-md-li { flex: 1; min-width: 0; }

/* tabelas: rolam na horizontal quando não cabem */
.pc-md-tabela-rolagem { margin: 0 0 14px; overflow-x: auto; border-radius: 10px; border: 1px solid rgba(138, 170, 235, .16); }
.pc-md-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.pc-md-tabela th, .pc-md-tabela td { padding: 7px 11px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(138, 170, 235, .12); }
.pc-md-tabela th { font-weight: 600; color: #eef5ff; background: rgba(138, 170, 235, .08); white-space: nowrap; }
.pc-md-tabela tr:last-child td { border-bottom: 0; }
.pc-md-tabela tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }

/* propriedades (front matter): a caixinha de chave: valor do topo */
.pc-md-props {
  margin: 0 0 16px; padding: 8px 12px 6px; border-radius: 10px;
  border: 1px solid rgba(138, 170, 235, .16); background: rgba(3, 9, 20, .4);
}
.pc-md-props-rotulo { margin-bottom: 4px; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #667a9f; }
.pc-md-prop { display: flex; gap: 10px; padding: 3px 0; font-size: 12.5px; border-top: 1px solid rgba(138, 170, 235, .08); }
.pc-md-prop-k { flex: 0 0 34%; min-width: 0; color: #8296b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-md-prop-v { flex: 1; min-width: 0; color: #dbe6f8; }

/* ==========================================================================
   PAINEL DE LEITURA (.pc-leitura) — a coluna da direita, nossa
   (js/host/84-leitura.js). O painel do app fica atrás, invisível: ele decide
   qual memória está aberta; este mostra. O material é o mesmo da coluna de
   antes (15-painel-memoria.css): vidro escuro, título em serifa, chips.
   ========================================================================== */
.pc-leitura {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9;
  width: var(--pc-painel); display: flex; flex-direction: column;
  border-left: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(180deg, rgba(23, 38, 66, .63), rgba(9, 16, 31, .71));
  -webkit-backdrop-filter: blur(44px) saturate(1.4); backdrop-filter: blur(44px) saturate(1.4);
  box-shadow: inset 1px 0 0 rgba(180, 222, 255, .08), -24px 0 60px rgba(0, 0, 0, .55);
  color: #c9d7ef; font-family: var(--font-sans);
}
.pc-leitura.pc-lt-entra { animation: pc-painel-entra var(--t-slow) var(--ease-out) both; }
/* o painel do app nunca pinta: ele só diz qual memória está aberta; quem mostra
   é o nosso, montado no mesmo quadro. Aparece só quando mostra algo que não é
   nosso (uma etiqueta do Mapa 2D) — o host marca body.pc-app-detail nessa hora. */
.graph-detail { visibility: hidden; }
body.pc-app-detail .graph-detail { visibility: visible; }
body.pc-editando .pc-leitura { visibility: hidden; }         /* editando, é o editor que ocupa a coluna */

.pc-lt-acoes { position: absolute; top: 20px; right: 20px; z-index: 1; display: flex; align-items: center; gap: 8px; }
.pc-lt-editar {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 999px;
  background: rgba(255, 255, 255, .03); color: #93a7c9; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-lt-editar svg { width: 13px; height: 13px; }
.pc-lt-editar:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-lt-editar.criar { color: var(--pc-accent); border-color: color-mix(in srgb, var(--pc-accent) 45%, transparent); }
.pc-lt-fechar {
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 50%;
  background: rgba(255, 255, 255, .03); color: #93a7c9; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-lt-fechar::before { content: "✕"; font-size: 13px; line-height: 1; }
.pc-lt-fechar:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* Cabeçalho com ar: a trilha na linha dos botões (centro em 35px, como eles),
   e o título 20px abaixo dela — antes vinha a 8px, colado. A altura da linha
   da trilha é explícita para o espaçamento não depender do que se herda. */
.pc-lt-trilha { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 26px 26px 0; margin-right: 190px; line-height: 18px; }
.pc-lt-cerebro { flex: none; display: grid; place-items: center; }
.pc-lt-cerebro svg { width: 16px; height: 16px; display: block; }
.pc-lt-area { font-size: 12px; font-weight: 500; color: var(--pc-area, #c9d7ef); }
.pc-lt-sep { font-size: 11px; color: #55688c; }
.pc-lt-passo { font-size: 11.5px; color: #8296b8; }

.pc-lt-titulo {
  margin: 20px 26px 14px; padding: 0;
  font-family: var(--font-serif); font-size: 25px; font-weight: 500; line-height: 1.18; letter-spacing: -.015em; color: #fff;
}

.pc-lt-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 26px 34px; }
.pc-lt-corpo::-webkit-scrollbar { width: 8px; }
.pc-lt-corpo::-webkit-scrollbar-thumb { background: rgba(138, 170, 235, .22); border-radius: 4px; }

.pc-lt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(138, 170, 235, .14); }
.pc-lt-tag {
  padding: 3px 10px; border-radius: 999px; cursor: pointer; font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 40%, transparent);
  background: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 12%, transparent);
  color: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 70%, #fff);
  transition: background var(--t-quick) var(--ease-out);
}
.pc-lt-tag:hover { background: color-mix(in srgb, var(--pc-tag, var(--pc-accent)) 28%, transparent); }
.pc-lt-semtag { font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #55688c; }

.pc-lt-vazio { margin: 4px 0 14px; font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.5; color: #778bb0; }

/* rodapé: quando, revisão, quem — informação de rodapé, não de manchete */
.pc-lt-meta { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid rgba(138, 170, 235, .14); font-size: 11px; line-height: 1.55; color: #6d81a6; }
.pc-lt-backlinks { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 18px; }
.pc-lt-rotulo { width: 100%; margin-bottom: 2px; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #778bb0; }
.pc-lt-chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .22); background: rgba(255, 255, 255, .03);
  color: #c9d7ef; font-size: 12px;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-lt-chip:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* ==========================================================================
   UPLOAD DE MEMÓRIAS — a janela (js/host/56-upload.js) e o botão da barra
   ========================================================================== */
.pc-src-upload {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px;
  border: 1px solid rgba(138, 170, 235, .22); border-radius: 999px; background: rgba(255, 255, 255, .03);
  color: #93a7c9; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-src-upload svg { width: 13px; height: 13px; }
.pc-src-upload:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }
#pc-sources:not(.open) .pc-src-upload { display: none; }

.pc-up-fundo {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 8, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pc-up-fundo-entra var(--t-base) var(--ease-out) both;
}
@keyframes pc-up-fundo-entra { from { opacity: 0; } }
.pc-up {
  width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 22px 24px 20px; border-radius: 18px;
  border: 1px solid rgba(138, 170, 235, .26);
  background: linear-gradient(180deg, rgba(23, 38, 66, .98), rgba(10, 17, 32, .99));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 30px 80px rgba(0, 0, 0, .6);
  color: #c9d7ef; font-family: var(--font-sans); font-size: 13px;
  animation: pc-up-entra var(--t-slow) var(--ease-spring) both;
}
@keyframes pc-up-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pc-up::-webkit-scrollbar { width: 8px; }
.pc-up::-webkit-scrollbar-thumb { background: rgba(138, 170, 235, .22); border-radius: 4px; }

.pc-up-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pc-up-titulo { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; color: #fff; }
.pc-up-sub { margin: 3px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #778bb0; }
.pc-up-fechar {
  flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 50%; background: rgba(255, 255, 255, .03); color: #93a7c9; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-up-fechar::before { content: "✕"; font-size: 13px; line-height: 1; }
.pc-up-fechar:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

.pc-up-secao { margin: 0 0 16px; }
.pc-up-secao:last-child { margin-bottom: 0; }
.pc-up-rotulo { margin-bottom: 8px; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #778bb0; }

/* o tipo: dois cartões */
.pc-up-tipos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pc-up-tipo {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 2px; align-items: center;
  min-width: 0; padding: 11px 12px; border-radius: 12px; text-align: left; cursor: pointer;
  white-space: normal;   /* o app original põe nowrap em todo <button> */
  border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .5); color: #c9d7ef;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-up-tipo svg { grid-row: 1 / span 2; width: 20px; height: 20px; color: #7f93b8; }
.pc-up-tipo strong { min-width: 0; font-size: 13px; color: #eef5ff; white-space: normal; }
.pc-up-tipo span { min-width: 0; font-size: 11.5px; line-height: 1.35; color: #8296b8; white-space: normal; overflow-wrap: anywhere; }
.pc-up-tipo:hover { border-color: rgba(138, 170, 235, .4); }
.pc-up-tipo.on { border-color: var(--pc-accent); background: var(--pc-accent-soft); box-shadow: 0 0 0 3px rgba(239, 127, 47, .14); }
.pc-up-tipo.on svg { color: var(--pc-accent); }

/* o destino */
.pc-up-trilha { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.pc-up-cerebro { flex: none; display: grid; place-items: center; }
.pc-up-cerebro svg { width: 15px; height: 15px; }
.pc-up-area { font-size: 12.5px; font-weight: 500; color: var(--pc-area, #c9d7ef); }
.pc-up-sep { font-size: 11px; color: #55688c; }
.pc-up-passo { font-size: 12px; color: #a9bbdb; }
.pc-up-grade { display: grid; gap: 8px; }
.pc-up-campo { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; }
.pc-up-campo-rotulo { font-size: 12px; color: #8296b8; }
.pc-up-select {
  width: 100%; padding: 7px 30px 7px 10px; border-radius: 9px; appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .22); color: #eef5ff; font-size: 12.5px;
  background: rgba(3, 9, 20, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93b8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
}
.pc-up-select:focus { outline: none; border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-up-vazio { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #778bb0; }

/* os arquivos */
.pc-up-zona {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px;
  border: 1px dashed rgba(138, 170, 235, .3); border-radius: 12px; background: rgba(3, 9, 20, .35);
  transition: all var(--t-quick) var(--ease-out);
}
.pc-up-zona.sobre { border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-up-escolher {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 190, 140, .45); color: #1b1205; font-size: 13px; font-weight: 600;
  background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent)); box-shadow: 0 8px 22px rgba(239, 127, 47, .3);
  transition: filter var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out);
}
.pc-up-escolher svg { width: 15px; height: 15px; }
.pc-up-escolher:hover { filter: brightness(1.06); }
.pc-up-escolher:active { transform: scale(.97); }
.pc-up-dica { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #778bb0; text-align: center; }

/* a prévia e o resultado */
.pc-up-conta { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.pc-up-num { font-size: 13px; color: #c9d7ef; }
.pc-up-num strong { font-size: 18px; font-weight: 600; color: #eef5ff; font-variant-numeric: tabular-nums; }
.pc-up-num.apagado, .pc-up-num.apagado strong { color: #778bb0; }
.pc-up-ignorados { margin: 0 0 10px; font-size: 12px; }
.pc-up-ignorados summary { cursor: pointer; color: #8ea0c2; font-family: var(--font-serif); font-style: italic; }
.pc-up-ignorados ul { margin: 6px 0 0; padding: 0 0 0 4px; list-style: none; max-height: 160px; overflow-y: auto; }
.pc-up-ignorados li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid rgba(138, 170, 235, .08); }
.pc-up-ignorados li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a9bbdb; }
.pc-up-ignorados li em { flex: none; color: #667a9f; font-style: normal; font-size: 11px; }
.pc-up-aviso { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(239, 127, 47, .35); background: rgba(239, 127, 47, .1); font-size: 12.5px; line-height: 1.5; color: #f3d9c4; }
.pc-up-escolher, .pc-up-cancelar, .pc-up-importar { white-space: normal; }
.pc-up-upgrade { white-space: normal; padding: 0; border: 0; background: none; color: var(--pc-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pc-up-erro { margin: 10px 0 0; font-size: 12.5px; color: #ffb0be; }
.pc-up-ok { margin: 0 0 6px; font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: #fff; }
.pc-up-barra { height: 6px; border-radius: 3px; background: rgba(138, 170, 235, .16); overflow: hidden; margin-bottom: 8px; }
.pc-up-barra-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--pc-accent-deep), var(--pc-accent)); transition: width var(--t-base) var(--ease-out); }

.pc-up-pe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.pc-up-cancelar, .pc-up-importar { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--t-quick) var(--ease-out); }
.pc-up-cancelar { border: 1px solid rgba(138, 170, 235, .2); background: transparent; color: #93a7c9; }
.pc-up-cancelar:hover { color: #fff; border-color: rgba(138, 170, 235, .45); }
.pc-up-importar { border: 1px solid rgba(255, 190, 140, .45); color: #1b1205; background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent)); box-shadow: 0 8px 22px rgba(239, 127, 47, .3); }
.pc-up-importar:hover:not(:disabled) { filter: brightness(1.06); }
.pc-up-importar:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* ---- a vetorização: o que aparece enquanto o córtex recebe as memórias (js/host/upload.js) ---- */
.pc-up-vet-titulo { margin: 0 0 10px; font-family: var(--font-serif); font-size: 19px; font-weight: 500; line-height: 1.25; color: #fff; }
.pc-up-vet-palco { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 10px; align-items: center; margin-bottom: 12px; }
.pc-up-vet-canvas { width: 100%; height: 176px; display: block; }
.pc-up-vet-cerebro { width: 176px; height: 130px; }
.pc-up-vet-cerebro .pc-cx-cerebro { width: 100%; height: 100%; overflow: visible; display: block; }
.pc-up-vet .pc-cx-lobo { opacity: .5; transition: opacity .4s var(--ease-out), filter .4s var(--ease-out); }
.pc-up-vet .pc-cx-lobo.aceso { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc-lobo) 75%, transparent)) brightness(1.2); }
.pc-up-vet .pc-cx-lobo.pulsa { animation: pc-up-lobo-pulsa .7s var(--ease-out); }
@keyframes pc-up-lobo-pulsa { 0% { filter: drop-shadow(0 0 16px var(--pc-lobo)) brightness(1.9); } 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc-lobo) 75%, transparent)) brightness(1.2); } }
.pc-up-no-novo { animation: pc-up-no-nasce .8s var(--ease-spring) both; transform-box: fill-box; transform-origin: center; }
@keyframes pc-up-no-nasce { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.pc-up-vet-cerebro.pronto .pc-cx-silhueta { stroke: rgba(239, 127, 47, .6); fill: rgba(239, 127, 47, .08); transition: stroke .5s, fill .5s; }
.pc-up-vet-contador { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 12px; color: #93a7c9; }
.pc-up-vet-contador strong { color: #fff; font-variant-numeric: tabular-nums; }
.pc-up-vet-legenda { margin: 8px 0 0; min-height: 40px; font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.45; color: #a9bbdb; }
.pc-up-vet-legenda strong { font-style: normal; font-weight: 500; color: #fff; }
/* o resultado entra embaixo do palco, que fica como terminou */
.pc-up-vet-fim { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(138, 170, 235, .14); }
.pc-up-vet-fim .pc-up-pe { margin-top: 10px; }
@media (max-width: 520px) { .pc-up-vet-palco { grid-template-columns: 1fr; } .pc-up-vet-cerebro { width: 100%; } }

/* ==========================================================================
   O PAINEL DE CÓRTEX (js/host/62-cortex-painel.js): as 4 vagas em cartões e,
   embaixo, as áreas do cérebro do córtex aberto. O mesmo vidro escuro das
   outras janelas; o laranja só no que é ação.
   ========================================================================== */
.pc-cx-fundo {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 8, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pc-up-fundo-entra var(--t-base) var(--ease-out) both;
}
.pc-cx {
  width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 24px 26px 22px; border-radius: 20px;
  border: 1px solid rgba(138, 170, 235, .26);
  background: linear-gradient(180deg, rgba(23, 38, 66, .98), rgba(10, 17, 32, .99));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 30px 80px rgba(0, 0, 0, .6);
  color: #c9d7ef; font-family: var(--font-sans); font-size: 13px;
  animation: pc-up-entra var(--t-slow) var(--ease-spring) both;
}
.pc-cx::-webkit-scrollbar { width: 8px; }
.pc-cx::-webkit-scrollbar-thumb { background: rgba(138, 170, 235, .22); border-radius: 4px; }
.pc-cx button { white-space: normal; }   /* o app original põe nowrap em todo <button> */

.pc-cx-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pc-cx-titulo { margin: 0; font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; color: #fff; }
.pc-cx-sub { margin: 4px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #778bb0; }
.pc-cx-fechar {
  flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(138, 170, 235, .2); border-radius: 50%; background: rgba(255, 255, 255, .03); color: #93a7c9; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-cx-fechar::before { content: "✕"; font-size: 13px; line-height: 1; }
.pc-cx-fechar:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }

/* ---- os cartões ---- */
.pc-cx-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 820px) { .pc-cx-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-cx-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 250px; padding: 12px 14px 12px;
  border: 1px solid rgba(138, 170, 235, .18); border-radius: 16px; text-align: left; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, rgba(30, 48, 84, .55), rgba(8, 15, 29, .8) 70%); color: #c9d7ef;
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out);
}
.pc-cx-card:not(.aberto):not(.trancado) { cursor: pointer; }
.pc-cx-card:not(.aberto):not(.trancado):hover { border-color: rgba(138, 170, 235, .45); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .4); }
.pc-cx-card.aberto {
  border-color: color-mix(in srgb, var(--pc-accent) 60%, transparent);
  box-shadow: 0 0 0 3px rgba(239, 127, 47, .12), 0 18px 44px rgba(0, 0, 0, .45), inset 0 0 60px rgba(239, 127, 47, .06);
}
.pc-cx-card.desligado { opacity: .7; }
.pc-cx-card.vago { border-style: dashed; background: radial-gradient(120% 90% at 50% 38%, rgba(20, 33, 58, .4), rgba(8, 15, 29, .7) 70%); }
.pc-cx-card.vago:hover { border-color: var(--pc-accent); }
.pc-cx-card.trancado { opacity: .55; border-style: dashed; }
.pc-cx-topo { display: flex; align-items: center; gap: 8px; min-height: 20px; }

/* o herói: o cérebro de partículas */
.pc-cx-hero { position: relative; margin: 2px -8px 2px; height: 140px; display: grid; place-items: center; }
.pc-cx-cerebro { width: 100%; height: 100%; overflow: visible; display: block; }
.pc-cx-silhueta { fill: rgba(138, 170, 235, .06); stroke: rgba(138, 170, 235, .26); stroke-width: .8; }
.pc-cx-card.aberto .pc-cx-silhueta { stroke: rgba(239, 127, 47, .35); fill: rgba(239, 127, 47, .05); }
.pc-cx-cerebro.cinza .pc-cx-silhueta { fill: rgba(138, 170, 235, .03); stroke: rgba(138, 170, 235, .12); }
.pc-cx-lobo { transition: opacity var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out); }
.pc-cx-lobo-alvo { fill: transparent; stroke: none; }
.pc-cx-lobo.vazio { opacity: .5; }   /* lobo ainda sem área */
.pc-cx-lobo-rotulo { font-family: var(--font-sans); font-size: 7.5px; font-weight: 600; fill: color-mix(in srgb, var(--pc-lobo) 70%, #fff); paint-order: stroke; stroke: rgba(4, 9, 20, .85); stroke-width: 2.4px; stroke-linejoin: round; pointer-events: none; }
.pc-cx-lobo.cinza .pc-cx-lobo-rotulo { fill: #66738f; }
.pc-cx-no { fill: color-mix(in srgb, var(--pc-lobo) 35%, #fff); }
.pc-cx-cerebro.vivo .pc-cx-no { animation: pc-cx-pisca 3.4s ease-in-out infinite; }
@keyframes pc-cx-pisca { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pc-cx-cerebro.vivo { animation: pc-cx-respira 7s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes pc-cx-respira { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.015); } }
.pc-cx-card.aberto .pc-cx-hero::before {
  content: ""; position: absolute; inset: 10% 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(239, 127, 47, .16), transparent 70%);
}
.pc-cx-card.desligado .pc-cx-cerebro { filter: grayscale(1) brightness(.75); }
.pc-cx-mais {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px dashed rgba(138, 170, 235, .45); color: #93a7c9; font-size: 20px; line-height: 1;
  background: rgba(8, 15, 29, .7); transition: all var(--t-quick) var(--ease-out);
}
.pc-cx-card.vago:hover .pc-cx-mais { border-color: var(--pc-accent); color: var(--pc-accent); transform: translate(-50%, -50%) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .pc-cx-cerebro.vivo, .pc-cx-cerebro.vivo .pc-cx-no { animation: none; } }
.pc-cx-selo { flex: 1; min-width: 0; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #778bb0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cx-card.aberto .pc-cx-selo { color: var(--pc-accent); }
.pc-cx-cadeado { display: grid; place-items: center; color: #55688c; }
.pc-cx-cadeado svg { width: 14px; height: 14px; }

/* o interruptor ligado/desligado */
.pc-cx-switch {
  flex: none; position: relative; width: 34px; height: 20px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .3); background: rgba(3, 9, 20, .6);
  transition: background var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.pc-cx-switch-bola { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #7f93b8; transition: transform var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out); }
.pc-cx-switch.on { background: color-mix(in srgb, var(--pc-accent) 45%, transparent); border-color: var(--pc-accent); }
.pc-cx-switch.on .pc-cx-switch-bola { transform: translateX(14px); background: #fff; }
.pc-cx-switch:disabled { cursor: default; opacity: .7; }

.pc-cx-nome {
  display: flex; align-items: baseline; gap: 5px; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-serif); font-size: 17px; color: #fff; min-width: 0;
}
.pc-cx-nome strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cx-nome svg { flex: none; width: 12px; height: 12px; align-self: center; color: #55688c; opacity: 0; transition: opacity var(--t-quick) var(--ease-out); }
.pc-cx-nome:hover svg { opacity: 1; }
.pc-cx-nome.sugestao { cursor: inherit; color: #a9bbdb; }
.pc-cx-pre { font-style: italic; font-weight: 400; font-size: 13px; color: #93a7c9; }
.pc-cx-nome-edit { display: flex; align-items: baseline; gap: 5px; margin: 2px 0 0; font-family: var(--font-serif); font-size: 17px; }
.pc-cx-nome-edit input {
  flex: 1; min-width: 0; padding: 2px 6px; border-radius: 6px; outline: none;
  border: 1px solid var(--pc-accent); background: rgba(3, 9, 20, .6); color: #fff; font: inherit; font-weight: 600;
  box-shadow: 0 0 0 3px rgba(239, 127, 47, .16);
}
.pc-cx-meta { margin: 0; flex: 1; font-size: 11.5px; color: #778bb0; }
.pc-cx-card.vago .pc-cx-usar { margin-top: 2px; }
.pc-cx-acoes { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pc-cx-renomear {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .2); background: transparent; color: #93a7c9; font-size: 12px; font-weight: 600;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-cx-renomear svg { width: 12px; height: 12px; }
.pc-cx-renomear:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-cx-abrir, .pc-cx-apagar, .pc-cx-upgrade {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-cx-abrir { border: 1px solid rgba(255, 190, 140, .45); color: #1b1205; background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent)); }
.pc-cx-abrir:hover { filter: brightness(1.06); }
.pc-cx-apagar { margin-left: auto; border: 1px solid transparent; background: transparent; color: #667a9f; }
.pc-cx-apagar:hover { color: #ffb0be; border-color: rgba(242, 112, 138, .4); }
.pc-cx-dica { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #667a9f; }
.pc-cx-usar { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--pc-accent); }
.pc-cx-upgrade { align-self: flex-start; margin-top: 4px; border: 1px solid color-mix(in srgb, var(--pc-accent) 45%, transparent); background: transparent; color: var(--pc-accent); }
.pc-cx-upgrade:hover { background: var(--pc-accent-soft); }

/* ---- as áreas ---- */
.pc-cx-areas { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(138, 170, 235, .14); }
.pc-cx-areas-cab { margin-bottom: 10px; }
.pc-cx-areas-titulo { margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: #fff; }
.pc-cx-areas-sub { margin: 3px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #778bb0; }
.pc-cx-areas-duas { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .pc-cx-areas-duas { grid-template-columns: 1fr; } }
.pc-cx-mapa {
  position: sticky; top: 0; padding: 14px 10px 8px; border-radius: 16px;
  border: 1px solid rgba(138, 170, 235, .16);
  background: radial-gradient(110% 90% at 50% 40%, rgba(30, 48, 84, .5), rgba(8, 15, 29, .75) 72%);
}
.pc-cx-mapa .pc-cx-cerebro { height: auto; aspect-ratio: 240 / 168; }
.pc-cx-mapa .pc-cx-lobo:not(.cinza) { cursor: pointer; }
.pc-cx-mapa .pc-cx-lobo.aceso { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc-lobo) 70%, transparent)) brightness(1.25); }
.pc-cx-mapa .pc-cx-lobo.apagado { opacity: .35; }
.pc-cx-mapa .pc-cx-lobo.aceso .pc-cx-lobo-rotulo { fill: #fff; }
.pc-cx-areas-grade { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pc-cx-area {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(138, 170, 235, .16); background: rgba(3, 9, 20, .4); color: #c9d7ef;
  transition: border-color var(--t-quick) var(--ease-out);
}
.pc-cx-area.acesa { border-color: color-mix(in srgb, var(--pc-area) 65%, transparent); background: color-mix(in srgb, var(--pc-area) 8%, rgba(3, 9, 20, .4)); }
.pc-cx-area.vaga { cursor: pointer; border-style: dashed; }
.pc-cx-area.vaga:hover { border-color: var(--pc-area, var(--pc-accent)); }
.pc-cx-area.trancada, .pc-cx-area.alem { opacity: .6; }
.pc-cx-area.trancada { border-style: dashed; }
.pc-cx-cor { position: relative; flex: none; width: 22px; height: 22px; cursor: pointer; }
.pc-cx-cor input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pc-cx-cor input:disabled { cursor: default; }
.pc-cx-cor-bola { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--pc-area, #9aa0b5); box-shadow: 0 0 10px color-mix(in srgb, var(--pc-area, #9aa0b5) 55%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; }
.pc-cx-area-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-cx-area-nomes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-cx-area-lobo { font-family: var(--font-serif); font-style: italic; font-size: 11px; color: #667a9f; }
.pc-cx-area-nome {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-size: 14px; color: #eef5ff; min-width: 0;
}
.pc-cx-area-nome strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cx-area-nome svg { flex: none; width: 11px; height: 11px; color: #55688c; opacity: 0; transition: opacity var(--t-quick) var(--ease-out); }
.pc-cx-area-nome:hover svg { opacity: 1; }
.pc-cx-area-nome:disabled { cursor: default; }
.pc-cx-area-nome.sugestao { cursor: inherit; color: #a9bbdb; }
input.pc-cx-area-nome.editando {
  padding: 2px 6px; border-radius: 6px; outline: none; border: 1px solid var(--pc-accent);
  background: rgba(3, 9, 20, .6); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 0 0 3px rgba(239, 127, 47, .16);
}
.pc-cx-area-ex { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: var(--pc-accent); opacity: .85; }
.pc-cx-area-ex:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
.pc-cx-area-n { flex: none; font-size: 11px; color: #667a9f; text-align: right; }
.pc-cx-area .pc-cx-usar { flex: none; margin: 0; font-size: 11.5px; }
.pc-cx-area .pc-cx-upgrade { flex: none; margin: 0; padding: 4px 9px; font-size: 11px; }

/* o botão de nova área no fim da lista — ou o convite de upgrade, com o plano cheio */
.pc-cx-nova-area {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1px dashed rgba(138, 170, 235, .3); background: rgba(3, 9, 20, .3); color: #c9d7ef;
  font-size: 13px; font-weight: 600; transition: all var(--t-quick) var(--ease-out);
}
.pc-cx-nova-area:hover { border-color: var(--pc-accent); background: var(--pc-accent-soft); color: #fff; }
.pc-cx-nova-mais { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(138, 170, 235, .35); color: var(--pc-accent); font-size: 17px; line-height: 1; }
.pc-cx-nova-area em { margin-left: auto; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; font-weight: 400; color: #778bb0; }
.pc-cx-nova-area.cheio { border-color: color-mix(in srgb, var(--pc-accent) 40%, transparent); color: var(--pc-accent); }
.pc-cx-nova-area.cheio svg { width: 15px; height: 15px; }
.pc-cx-nova-area.cheio:hover { background: var(--pc-accent-soft); }

/* ---- o formulário de nova área: nome, sugestões, onde vai ficar; só cria no "Criar" ---- */
.pc-cx-nova-form {
  display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pc-area, var(--pc-accent)) 55%, transparent); background: rgba(3, 9, 20, .5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-area, var(--pc-accent)) 14%, transparent);
}
.pc-cx-nova-cab { display: flex; align-items: center; gap: 10px; }
.pc-cx-nova-cab input {
  flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px; outline: none;
  border: 1px solid rgba(138, 170, 235, .3); background: rgba(3, 9, 20, .6); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.pc-cx-nova-cab input:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-cx-nova-cab input.erro { border-color: #f2708a; box-shadow: 0 0 0 3px rgba(242, 112, 138, .2); }
.pc-cx-nova-sugs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-cx-mini { font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #778bb0; }
.pc-cx-nova-sug {
  padding: 3px 10px; border-radius: 999px; cursor: pointer; font-size: 12px;
  border: 1px solid rgba(138, 170, 235, .22); background: rgba(255, 255, 255, .03); color: #c9d7ef;
  transition: all var(--t-quick) var(--ease-out);
}
.pc-cx-nova-sug:hover { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-cx-nova-onde { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: #93a7c9; }
.pc-cx-nova-pe { display: flex; justify-content: flex-end; gap: 8px; }
.pc-cx-cancelar, .pc-cx-criar { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--t-quick) var(--ease-out); }
.pc-cx-cancelar { border: 1px solid rgba(138, 170, 235, .2); background: transparent; color: #93a7c9; }
.pc-cx-cancelar:hover { color: #fff; border-color: rgba(138, 170, 235, .45); }
.pc-cx-criar { border: 1px solid rgba(255, 190, 140, .45); color: #1b1205; background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent)); box-shadow: 0 8px 22px rgba(239, 127, 47, .3); }
.pc-cx-criar:hover { filter: brightness(1.06); }
/* a área recém-criada chama a atenção por um instante */
.pc-cx-area.recem { animation: pc-cx-recem 1.6s var(--ease-out); }
@keyframes pc-cx-recem { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-area) 60%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ==========================================================================
   O TÍTULO DO CÓRTEX — no alto do palco, sobre o cérebro (js/host/60-cortex.js)
   "Córtex" discreto em itálico e o complemento grande em serifa, com uma
   linha miúda de contagens. É um botão: abre o painel de córtex.
   ========================================================================== */
.pc-titulo-cortex {
  position: absolute; top: 22px; left: 28px; z-index: 6;
  display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline;
  padding: 4px 8px; margin: -4px -8px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer;
  font-family: var(--font-serif); color: #fff;
  text-shadow: 0 2px 14px rgba(3, 8, 20, .9), 0 0 2px rgba(3, 8, 20, .8);
  transition: background var(--t-quick) var(--ease-out);
}
/* ao passar o mouse só o complemento fica laranja ("Córtex" não muda): sem fundo, sem trocar fonte ou itálico */
.pc-titulo-cortex:hover strong { color: var(--pc-accent); }
.pc-titulo-cortex:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pc-titulo-cortex-pre { font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.1; color: #a9bbdb; transition: color var(--t-quick) var(--ease-out); }
.pc-titulo-cortex strong { font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -.015em; max-width: min(46vw, 520px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-quick) var(--ease-out); }
.pc-titulo-cortex-sub { grid-column: 1 / -1; margin-top: 2px; font-family: var(--font-sans); font-size: 12px; color: #93a7c9; }
/* a barra recolhida deixa o palco começar mais à esquerda; o título acompanha */
.pc-titulo-cortex.pc-desliza-dir { animation: pc-desliza-dir 400ms var(--ease-out) both; }
.pc-titulo-cortex.pc-desliza-esq { animation: pc-desliza-esq 400ms var(--ease-out) both; }
@media (max-width: 900px) { .pc-titulo-cortex strong, .pc-titulo-cortex-pre { font-size: 26px; } }

/* a linha de cima da barra: a sobrelinha à esquerda, o Upload à direita */
.pc-src-cortex { justify-content: space-between; }
.pc-src-cortex .pc-src-eyebrow { margin: 0; }

/* ==========================================================================
   DESTAQUE NO MAPA 2D — o canvas nosso por cima do mapa do app, só para o
   nó da nota sob o cursor (js/host/52-destaque.js). Acima do canvas do app
   (z 1), abaixo da caixa de foco (7) e do painel (8).
   ========================================================================== */
.pc-destaque-2d { position: absolute; z-index: 2; pointer-events: none; }

/* ==========================================================================
   ARRASTAR na barra (js/host/arrastar.js) — o fantasma que acompanha o
   cursor, a linha de destino acesa, a linha que chegou, a rolagem — e o
   pop-up que impede (js/host/bloqueio.js), no material dos outros diálogos.
   ========================================================================== */
body.pc-arrastando, body.pc-arrastando * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* o fantasma: um cartão de vidro pequeno, com o nome e para onde vai */
.pc-arrasto {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  display: flex; align-items: center; gap: 9px; max-width: 320px; padding: 8px 12px 8px 10px;
  border: 1px solid rgba(138, 170, 235, .3); border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 38, 66, .96), rgba(10, 17, 32, .98));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 18px 44px rgba(0, 0, 0, .5);
  color: #eef5ff; font-family: var(--font-sans); font-size: 13px; line-height: 1.3;
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
  animation: pc-arrasto-entra .16s var(--ease-out);
}
@keyframes pc-arrasto-entra { from { opacity: 0; transform: translate(0, 0) scale(.96); } }
.pc-arrasto-ic { flex: none; display: grid; place-items: center; color: #93a7c9; }
.pc-arrasto-ic svg { width: 15px; height: 15px; display: block; }
.pc-arrasto-txt { min-width: 0; }
.pc-arrasto-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-arrasto-para { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; color: #778bb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-arrasto-seta { font-style: normal; color: var(--pc-accent); }
.pc-arrasto-cadeado { flex: none; display: grid; place-items: center; }
.pc-arrasto-cadeado svg { width: 12px; height: 12px; display: block; }
.pc-arrasto.pode { border-color: color-mix(in srgb, var(--pc-accent) 60%, transparent); box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 3px color-mix(in srgb, var(--pc-accent) 16%, transparent); }
.pc-arrasto.pode .pc-arrasto-para { color: #ffb07a; }
.pc-arrasto.nao { border-color: rgba(242, 112, 138, .55); }
.pc-arrasto.nao .pc-arrasto-para { color: #f2708a; }

/* as linhas: a de origem esmaece; a de destino acende na cor da área */
.pc-src-row.pc-src-origem { opacity: .42; }
.pc-src-row.pc-src-solta > .pc-src-branch,
.pc-src-row.pc-src-solta > .pc-src-note {
  background: color-mix(in srgb, var(--pc-area, var(--pc-accent)) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-area, var(--pc-accent)) 70%, transparent);
  border-radius: 8px;
}
.pc-src-row.pc-src-solta-nao > .pc-src-branch,
.pc-src-row.pc-src-solta-nao > .pc-src-note {
  background: rgba(242, 112, 138, .12); box-shadow: inset 0 0 0 1px rgba(242, 112, 138, .55); border-radius: 8px;
}
/* a linha que acabou de chegar */
.pc-src-row.pc-src-chegou > .pc-src-branch,
.pc-src-row.pc-src-chegou > .pc-src-note { animation: pc-src-chegou 1.3s var(--ease-out) both; border-radius: 8px; }
@keyframes pc-src-chegou { 0% { background: color-mix(in srgb, var(--pc-area, var(--pc-accent)) 34%, transparent); } 100% { background: transparent; } }

/* ---- o pop-up que impede ---- */
.pc-bloq-fundo {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 8, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pc-bloq-fundo-entra var(--t-base) var(--ease-out) both;
}
@keyframes pc-bloq-fundo-entra { from { opacity: 0; } }
.pc-bloq {
  width: min(440px, 100%); padding: 24px 26px 20px; border-radius: 18px;
  border: 1px solid rgba(138, 170, 235, .26);
  background: linear-gradient(180deg, rgba(23, 38, 66, .98), rgba(10, 17, 32, .99));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 30px 80px rgba(0, 0, 0, .6);
  color: #c9d7ef; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55;
  animation: pc-bloq-entra var(--t-slow) var(--ease-spring) both;
}
@keyframes pc-bloq-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pc-bloq-ic {
  width: 38px; height: 38px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid rgba(138, 170, 235, .22); background: rgba(255, 255, 255, .03); color: #93a7c9;
}
.pc-bloq-ic.plano { color: var(--pc-accent); border-color: color-mix(in srgb, var(--pc-accent) 45%, transparent); background: color-mix(in srgb, var(--pc-accent) 10%, transparent); }
.pc-bloq-ic svg { width: 19px; height: 19px; }
.pc-bloq-titulo { margin: 0 0 8px; font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.22; letter-spacing: -.012em; color: #fff; }
.pc-bloq-texto { margin: 0; color: #b6c5e2; }
.pc-bloq-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.pc-bloq-ok, .pc-bloq-planos { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--t-quick) var(--ease-out); }
.pc-bloq-ok { border: 1px solid rgba(138, 170, 235, .2); background: transparent; color: #93a7c9; }
.pc-bloq-ok:hover { color: #fff; border-color: rgba(138, 170, 235, .45); }
.pc-bloq-planos { border: 1px solid transparent; background: var(--pc-accent); color: #1a0d05; }
.pc-bloq-planos:hover { filter: brightness(1.08); box-shadow: 0 0 18px color-mix(in srgb, var(--pc-accent) 45%, transparent); }
.pc-bloq-ok:focus-visible, .pc-bloq-planos:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; }

/* ==========================================================================
   ÁREAS DE ESPECIALIDADE — sob o título do córtex (js/host/especialidade.js):
   um interruptor por área, as duas barras (tokens economizados, acurácia
   estimada) e a linha que diz o que a IA enxerga. No material do palco: sem
   caixa, texto com sombra; os interruptores são pílulas de vidro escuro.
   ========================================================================== */
.pc-esp {
  position: absolute; top: 94px; left: 28px; z-index: 6; width: 316px;
  font-family: var(--font-sans); color: #c9d7ef; text-shadow: 0 1px 8px rgba(3, 8, 20, .85);
}
/* o bloco fica sobre o cérebro; quando um lobo claro passa por trás, uma sombra
   difusa (sem caixa, sem borda) mantém os números legíveis */
.pc-esp::before {
  content: ""; position: absolute; inset: -16px -22px -14px -20px; z-index: -1; border-radius: 22px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 8, 20, .62), rgba(3, 8, 20, .38) 60%, rgba(3, 8, 20, 0));
}
.pc-esp-cab { display: flex; align-items: center; gap: 6px; }
.pc-esp-rotulo { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #93a7c9; }
.pc-esp-conta { font-size: 11px; color: #778bb0; font-variant-numeric: tabular-nums; }
.pc-esp-conta:empty { display: none; }
.pc-esp-info {
  width: 16px; height: 16px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(138, 170, 235, .28); background: rgba(6, 14, 30, .55); color: #93a7c9;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help; text-shadow: none;
}
.pc-esp-info:hover, .pc-esp-info[aria-expanded="true"] { color: #fff; border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.pc-esp-info:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
/* a explicação, ao passar o cursor no "?": um cartão de vidro escuro logo abaixo do cabeçalho */
.pc-esp { position: absolute; }
.pc-esp-ajuda {
  position: absolute; top: 24px; left: 0; z-index: 9; width: 340px; padding: 12px 14px 10px;
  border: 1px solid rgba(138, 170, 235, .28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 38, 66, .985), rgba(10, 17, 32, .99));
  box-shadow: inset 0 1px 0 rgba(180, 222, 255, .1), 0 18px 44px rgba(0, 0, 0, .5);
  color: #c9d7ef; font-size: 12px; line-height: 1.5; text-shadow: none;
  animation: pc-esp-ajuda-entra .16s var(--ease-out);
}
@keyframes pc-esp-ajuda-entra { from { opacity: 0; transform: translateY(-4px); } }
.pc-esp-ajuda-titulo { margin: 0 0 6px; font-family: var(--font-serif); font-size: 14px; font-weight: 500; color: #fff; }
.pc-esp-ajuda p { margin: 0 0 7px; }
.pc-esp-ajuda p:last-child { margin-bottom: 0; }
.pc-esp-ajuda strong { color: #eef5ff; font-weight: 600; }
.pc-esp-ajuda em { font-style: italic; color: #ffb07a; }
.pc-esp-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pc-esp-int {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 6px;
  border: 1px solid rgba(138, 170, 235, .22); border-radius: 999px;
  background: rgba(6, 14, 30, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #b6c5e2; font-size: 12px; font-weight: 500; cursor: pointer; text-shadow: none;
  transition: color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.pc-esp-int:hover { color: #fff; border-color: color-mix(in srgb, var(--pc-area) 55%, transparent); }
.pc-esp-int:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
.pc-esp-nome { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* o interruptor em si: trilho e bolinha */
.pc-esp-bola { position: relative; flex: none; width: 24px; height: 13px; border-radius: 999px; background: rgba(138, 170, 235, .24); transition: background var(--t-quick) var(--ease-out); }
.pc-esp-bola::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #c9d7ef;
  transition: transform var(--t-base) var(--ease-spring), background var(--t-quick) var(--ease-out);
}
.pc-esp-int.on {
  color: #fff; border-color: color-mix(in srgb, var(--pc-area) 65%, transparent);
  background: color-mix(in srgb, var(--pc-area) 16%, rgba(6, 14, 30, .6));
  box-shadow: 0 0 14px color-mix(in srgb, var(--pc-area) 30%, transparent);
}
.pc-esp-int.on .pc-esp-bola { background: var(--pc-area); }
.pc-esp-int.on .pc-esp-bola::after { transform: translateX(11px); background: #0a0f1c; }

/* as barras */
.pc-esp-barras { display: grid; gap: 7px; margin-top: 10px; }
.pc-esp-barra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: #93a7c9; }
.pc-esp-barra-cab strong { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(3, 8, 20, 1), 0 0 2px rgba(3, 8, 20, 1); }
.pc-esp-trilho { height: 4px; margin-top: 3px; border-radius: 999px; background: rgba(138, 170, 235, .18); overflow: hidden; }
.pc-esp-cheio { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--pc-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--pc-accent) 55%, transparent); transition: width .6s var(--ease-out); }
.pc-esp-barra.acuracia .pc-esp-cheio { background: #7ed957; box-shadow: 0 0 8px rgba(126, 217, 87, .55); }
.pc-esp-nota { margin: 7px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 11.5px; line-height: 1.4; color: #778bb0; }
.pc-esp.com-esp .pc-esp-nota { color: #a9bbdb; }

/* no Mapa 2D: o canvas dos anéis, por cima do canvas do app (z 1), abaixo do realce de hover */
.pc-especialidade-2d { position: absolute; z-index: 2; pointer-events: none; }

/* na barra lateral, a área que a IA enxerga leva a faísca */
.pc-src-esp { flex: none; margin-left: 5px; font-size: 10px; line-height: 1; color: var(--pc-area, var(--pc-accent)); text-shadow: 0 0 6px color-mix(in srgb, var(--pc-area, var(--pc-accent)) 60%, transparent); }

@media (max-width: 900px) { .pc-esp { display: none; } }

/* ==========================================================================
   A JANELA DAS IAs — a mesma pergunta, na IA que a pessoa já usa. Peça
   compartilhada pela landing pessoal (faixa de empresas) e pela página de
   empresas (abertura); o comportamento está em js/janela-das-ias.js.
   Cada pele é um conjunto de variáveis no data-ia da janela: fundo, texto,
   balão do usuário, caixa de entrada, acento e o glifo (máscara SVG). Evocam
   o Claude (creme, laranja-terracota, nome em serifa), o ChatGPT (grafite,
   balão cinza, botão branco redondo) e o Gemini (grafite azulado, brilho
   azul-roxo, entrada arredondada) sem copiar nenhum. A linha "consultando
   ERP…" (a página de empresas liga) mostra a ponte trabalhando.
   ========================================================================== */
.cp-ias { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-ias figcaption { margin: 0; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: #7d8dae; }
.cp-ias-abas { display: flex; gap: 6px; }
.cp-ias-abas button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(138, 170, 235, .2); background: rgba(6, 14, 30, .55); color: #9fb0d4; font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  transition: color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
.cp-ias-abas button:hover { color: #fff; border-color: rgba(138, 170, 235, .4); }
.cp-ias-abas button.on { color: #fff; border-color: rgba(239, 127, 47, .55); background: rgba(239, 127, 47, .12); }
.cp-ias-abas button:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
/* os glifos: máscaras SVG, pintadas pela cor da casa */
.cp-ias-glifo { flex: none; display: inline-block; width: 18px; height: 18px; -webkit-mask: var(--glifo) center / contain no-repeat; mask: var(--glifo) center / contain no-repeat; background: var(--glifo-cor, #fff); }
.cp-ias-glifo.claude, .cp-ias-janela[data-ia="claude"] { --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l1.9 6.9 6.1-3.8-3.8 6.1 6.3 1.3-6.3 1.3 3.8 6.1-6.1-3.8L12 22.5l-1.9-6.9-6.1 3.8 3.8-6.1L1.5 12l6.3-1.3-3.8-6.1 6.1 3.8z'/%3E%3C/svg%3E"); --glifo-cor: #d97757; }
.cp-ias-glifo.chatgpt, .cp-ias-janela[data-ia="chatgpt"] { --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3.2v5.2M19.6 7.6l-4.5 2.6M19.6 16.4l-4.5-2.6M12 20.8v-5.2M4.4 16.4l4.5-2.6M4.4 7.6l4.5 2.6'/%3E%3C/g%3E%3Cpath d='M12 8.4l3.1 1.8v3.6L12 15.6l-3.1-1.8v-3.6z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); --glifo-cor: #fff; }
.cp-ias-glifo.gemini, .cp-ias-janela[data-ia="gemini"] { --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6.1 4.9 10.3 11 11-6.1.7-10.3 4.9-11 11-.7-6.1-4.9-10.3-11-11 6.1-.7 10.3-4.9 11-11z'/%3E%3C/svg%3E"); --glifo-cor: linear-gradient(135deg, #4285f4, #9b72cb 60%, #d96570); }
.cp-ias-abas .cp-ias-glifo { width: 14px; height: 14px; }
/* a janela */
.cp-ias-janela {
  display: flex; flex-direction: column; min-height: 300px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
  font-family: var(--fonte, var(--font-sans)); font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transition: background var(--t-slow) var(--ease-out), color var(--t-slow) var(--ease-out), border-color var(--t-slow) var(--ease-out);
}
.cp-ias-janela[data-ia="claude"] { --fundo: #f4f3ee; --texto: #2f2e2b; --secundario: #6b6a64; --balao: #e8e6db; --borda: #d9d6c9; --entrada: #fff; --acento: #d97757; --enviar-fundo: #d97757; --enviar-cor: #fff; --enviar-raio: 8px; --fonte-nome: var(--font-serif); }
.cp-ias-janela[data-ia="chatgpt"] { --fundo: #212121; --texto: #ececec; --secundario: #9a9a9a; --balao: #303030; --borda: #3a3a3a; --entrada: #303030; --acento: #fff; --enviar-fundo: #fff; --enviar-cor: #000; --enviar-raio: 50%; --fonte-nome: var(--font-sans); }
.cp-ias-janela[data-ia="gemini"] { --fundo: #1b1c1d; --texto: #e3e3e3; --secundario: #a2a9b0; --balao: #333537; --borda: #444746; --entrada: #1e1f20; --acento: #8ab4f8; --enviar-fundo: #8ab4f8; --enviar-cor: #062e6f; --enviar-raio: 50%; --fonte-nome: var(--font-sans); }
.cp-ias-topo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.cp-ias-nome { font-family: var(--fonte-nome); font-size: 14px; font-weight: 600; }
.cp-ias-janela[data-ia="gemini"] .cp-ias-nome { background: linear-gradient(90deg, #4285f4, #9b72cb 55%, #d96570); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-ias-mcp { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: var(--secundario); }
.cp-ias-mcp i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-accent); box-shadow: 0 0 8px rgba(239, 127, 47, .8); }
.cp-ias-conversa { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 8px; flex: 1; }
.cp-ias-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 92%; }
.cp-ias-msg.usuario { align-self: flex-end; }
.cp-ias-balao { display: inline-block; padding: 9px 14px; border-radius: 18px; border-bottom-right-radius: 6px; background: var(--balao); }
.cp-ias-janela[data-ia="chatgpt"] .cp-ias-balao, .cp-ias-janela[data-ia="gemini"] .cp-ias-balao { border-radius: 20px; }
.cp-ias-txt.digitando::after { content: "|"; margin-left: 1px; color: var(--secundario); animation: pc-chat-cursor 1s steps(2) infinite; }
.cp-ias-msg.ia .cp-ias-glifo { margin-top: 2px; }
.cp-ias-janela[data-ia="chatgpt"] .cp-ias-msg.ia .cp-ias-glifo { width: 22px; height: 22px; padding: 3px; box-sizing: border-box; -webkit-mask-size: 70%; mask-size: 70%; border-radius: 50%; background: #fff; }
.cp-ias-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-ias-resposta b { font-weight: 600; }
.cp-ias-fonte { font-size: 11.5px; color: var(--acento); }
.cp-ias-janela[data-ia="chatgpt"] .cp-ias-fonte { color: #9a9a9a; text-decoration: underline; text-decoration-color: rgba(154, 154, 154, .5); }
.cp-ias-pontos { display: none; gap: 4px; padding: 6px 2px; }
.cp-ias-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--secundario); animation: pc-chat-ponto 1s infinite; }
.cp-ias-pontos i:nth-child(2) { animation-delay: .15s; }
.cp-ias-pontos i:nth-child(3) { animation-delay: .3s; }
.cp-ias-msg.ia.pensando .cp-ias-pontos { display: inline-flex; }
.cp-ias-msg.ia.pensando .cp-ias-resposta, .cp-ias-msg.ia.pensando .cp-ias-fonte, .cp-ias-msg.ia.calada .cp-ias-resposta, .cp-ias-msg.ia.calada .cp-ias-fonte, .cp-ias-msg.ia.calada .cp-ias-pontos { display: none; }
.cp-ias-msg.ia.calada { visibility: hidden; }
.cp-ias-entrada { display: flex; align-items: center; gap: 10px; margin: 8px 14px 14px; padding: 9px 9px 9px 16px; border-radius: 14px; border: 1px solid var(--borda); background: var(--entrada); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.cp-ias-janela[data-ia="chatgpt"] .cp-ias-entrada, .cp-ias-janela[data-ia="gemini"] .cp-ias-entrada { border-radius: 999px; }
.cp-ias-placeholder { flex: 1; font-size: 13px; color: var(--secundario); }
.cp-ias-enviar { flex: none; width: 28px; height: 28px; border-radius: var(--enviar-raio); background: var(--enviar-fundo); color: var(--enviar-cor); display: grid; place-items: center; }
.cp-ias-enviar::before { content: "↑"; font-size: 15px; font-weight: 700; line-height: 1; }
/* a ponte trabalhando: "consultando ERP…", antes da resposta (só quem liga a opção) */
.cp-ias-consulta { display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--secundario); }
.cp-ias-consulta::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--acento); border-right-color: transparent; animation: cp-ias-gira .8s linear infinite; }
@keyframes cp-ias-gira { to { transform: rotate(360deg); } }
.cp-ias-msg.ia.consultando .cp-ias-consulta { display: inline-flex; }
.cp-ias-msg.ia.consultando .cp-ias-resposta, .cp-ias-msg.ia.consultando .cp-ias-fonte, .cp-ias-msg.ia.consultando .cp-ias-pontos { display: none; }
@media (prefers-reduced-motion: reduce) { .cp-ias-consulta::before { animation: none; } }