/* ==========================================================================
   Editor visual de fluxos (botflow) — design system Bitrix24 Air.

   Só o que é do editor mora aqui: a moldura de tela cheia, a paleta, o canvas,
   os blocos e o painel lateral. Botões, campos e cores vêm prontos do design
   system (separator/static/src/input.css): use `btn`, `form-control`,
   `form-select`, `form-label`, `form-text` no HTML em vez de criar classe nova.
   Nenhuma cor literal fora dos tokens, exceto o azul do Bitrix24 (categoria b24).
   ========================================================================== */
:root {
  /* Sombra das camadas flutuantes (modal, barra de zoom, minimapa). Cards não
     têm sombra no Air; estes elementos pairam sobre o canvas e precisam dela. */
  --bfe-pop: 0 6px 24px rgb(0 51 102 / .16);
  --bfe-radius: var(--ui-border-radius-md);
  --bfe-radius-sm: var(--ui-border-radius-sm);
  --bfe-line: var(--ui-color-divider-default);
  --bfe-stroke: var(--ui-color-base-7);
}

/* ---------------------------------------------------------------- moldura */
body:has(.bfe-app) { overflow: hidden; }
body:has(.bfe-app) .help-fab { display: none !important; }

.bfe-app {
  position: fixed; top: 58px; right: 0; bottom: 0; left: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: var(--air-theme-bg-color);
  font-family: var(--ui-font-family-primary);
  font-size: var(--ui-font-size-md);
  color: var(--ui-color-base-1);
}
@media (min-width: 1024px) {
  .bfe-app { left: 240px; }
  /* Menu recolhido: o editor encosta na faixa de ícones. Precisa estar NESTE
     arquivo — o input.css entra numa camada de cascata de menor prioridade e a
     regra de cima venceria, deixando um vão vazio na esquerda. */
  html.sidebar-collapsed .bfe-app { left: 64px; }
}
/* Tela cheia: vale com o menu aberto ou recolhido. O menu e o topo somem em vez de
   o editor tentar passar por cima deles (ficam em outra camada da página). */
.bfe-app.is-full, html.sidebar-collapsed .bfe-app.is-full { top: 0; left: 0; z-index: 60; }
html.bfe-full .app-sidebar, html.bfe-full .app-topbar { visibility: hidden; }

.bfe-vsep { width: 1px; height: 24px; background: var(--bfe-stroke); flex: none; }

/* ------------------------------------------------------------ barra do topo */
.bfe-top {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 14px;
  background: var(--ui-color-bg-content-primary);
  border-bottom: 1px solid var(--bfe-line);
}
/* O título encolhe até um mínimo; depois disso os botões vão para o menu ⋯. */
.bfe-titlebox { min-width: 6rem; flex: 0 1 auto; display: flex; flex-direction: column; line-height: 1.2; }
/* No funil o título vira um seletor de bot: fica na mesma linha do portal,
   senão os dois se empilham e a barra ganha altura à toa. */
.bfe-titlebox.is-linha { flex-direction: row; align-items: center; gap: 10px; }
.bfe-titlebox.is-linha .bfe-bot-sel { flex: none; }
.bfe-titlebox.is-linha .bfe-sub { font-size: var(--ui-font-size-sm); }
.bfe-title {
  margin: 0; font-size: var(--ui-font-size-xl); font-weight: var(--ui-font-weight-semi-bold);
  color: var(--ui-color-base-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bfe-sub {
  font-size: var(--ui-font-size-xs); color: var(--ui-color-base-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bfe-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 22px; padding: 0 9px; border-radius: var(--ui-border-radius-pill);
  font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-medium);
  color: var(--ui-color-base-3); background: var(--ui-color-base-7);
}
.bfe-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bfe-status.ok    { color: var(--ui-color-accent-main-success-alt-2); background: var(--ui-color-accent-soft-green-3); }
.bfe-status.dirty { color: var(--ui-color-accent-soft-element-orange); background: var(--ui-color-accent-soft-orange-3); }
.bfe-status.busy  { color: var(--app-info-color); background: var(--app-info-bg); }
.bfe-status.err   { color: var(--ui-color-accent-soft-element-red); background: var(--ui-color-accent-soft-red-3); }

.bfe-top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bfe-top-actions > * { flex: none; }
.bfe-top-actions > .bfe-recolhido { display: none !important; }
.bfe-top.is-sem-texto .bfe-top-actions .btn .txt,
.bfe-top.is-sem-texto .bfe-top-actions .btn kbd,
.bfe-top.is-sem-status .bfe-status,
.bfe-top.is-mini .bfe-vsep { display: none; }
.bfe-top.is-sem-texto .bfe-top-actions .btn:not(.btn-icon) { padding: 0 10px; }
.bfe-top.is-mini { gap: 6px; padding: 0 8px; }
.bfe-top.is-mini .bfe-titlebox { min-width: 3rem; }
.bfe-top.is-mini .bfe-top-actions { gap: 4px; }
.bfe-top-actions .btn kbd {
  font: inherit; font-size: var(--ui-font-size-3xs); font-weight: var(--ui-font-weight-medium);
  padding: 2px 5px; border-radius: var(--ui-border-radius-2xs); background: rgb(255 255 255 / .22);
}
.bfe-top-actions .btn-outline kbd { background: var(--ui-color-base-7); color: var(--ui-color-base-3); }

/* ------------------------------------------------------------------ corpo */
.bfe-body { flex: 1; display: flex; min-height: 0; position: relative; }

/* --------------------------------------------------------------- paleta */
.bfe-palette {
  flex: none; width: 236px; display: flex; flex-direction: column; min-height: 0;
  background: var(--ui-color-bg-content-secondary);
  border-right: 1px solid var(--bfe-line);
  transition: width .15s ease;
}
.bfe-pal-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 14px; }
.bfe-pal-head strong {
  font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semi-bold);
  color: var(--ui-color-base-2);
}
.bfe-pal-head .btn { margin-left: auto; }
.bfe-search { position: relative; margin: 0 12px 8px; }
.bfe-search .ui-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--ui-color-base-4); pointer-events: none;
}
.bfe-search .form-control { padding-left: 32px; }
.bfe-pal-list { flex: 1; overflow-y: auto; padding: 2px 10px 12px; }
.bfe-group-label {
  margin: 14px 6px 4px; font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium); color: var(--ui-color-base-3);
}
.bfe-chip {
  width: 100%; display: flex; align-items: center; gap: 9px; margin-bottom: 2px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: var(--bfe-radius-sm);
  background: transparent; color: var(--ui-color-base-2);
  font: inherit; font-size: var(--ui-font-size-md); text-align: left;
  cursor: grab; transition: background-color .1s linear;
}
.bfe-chip:hover { background: var(--ui-color-bg-state-hover-default); color: var(--ui-color-base-1); }
.bfe-chip:active { cursor: grabbing; }
.bfe-chip .tile { width: 28px; height: 28px; border-radius: var(--bfe-radius-sm); display: grid; place-items: center; flex: none; }
.bfe-chip .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfe-pal-foot {
  padding: 10px 14px; border-top: 1px solid var(--bfe-line);
  font-size: var(--ui-font-size-xs); color: var(--ui-color-base-3); line-height: 1.45;
}
.bfe-palette.is-collapsed { width: 58px; }
.bfe-palette.is-collapsed .bfe-pal-head { padding: 12px 0 8px; justify-content: center; }
.bfe-palette.is-collapsed .bfe-pal-head strong,
.bfe-palette.is-collapsed .bfe-search,
.bfe-palette.is-collapsed .bfe-group-label,
.bfe-palette.is-collapsed .bfe-chip .lbl,
.bfe-palette.is-collapsed .bfe-pal-foot { display: none; }
.bfe-palette.is-collapsed .bfe-pal-head .btn { margin: 0; }
.bfe-palette.is-collapsed .bfe-pal-list { padding: 2px 8px 12px; }
.bfe-palette.is-collapsed .bfe-chip { justify-content: center; padding: 4px; }

/* ------------------------------------------------- categorias dos blocos
   Cores de acento do Air. O azul (--app-info-*) fica só nos blocos que
   representam o Bitrix24, e o vermelho da marca só no atendimento humano. */
.c-start { --cat: var(--ui-color-accent-main-success-alt-2); --cat-bg: var(--ui-color-accent-soft-green-3); }
.c-msg   { --cat: var(--ui-color-base-2);                    --cat-bg: var(--ui-color-base-7); }
.c-ask   { --cat: var(--ui-color-accent-soft-element-orange); --cat-bg: var(--ui-color-accent-soft-orange-3); }
.c-ai    { --cat: var(--ui-color-accent-soft-element-violet); --cat-bg: var(--ui-color-accent-soft-violet-3); }
.c-logic { --cat: var(--ui-color-accent-turquoise);          --cat-bg: color-mix(in srgb, var(--ui-color-accent-turquoise) 9%, #fff); }
.c-b24   { --cat: var(--app-info-color);                     --cat-bg: var(--app-info-bg); }
.c-human { --cat: var(--ui-color-accent-main-primary);       --cat-bg: var(--ui-color-accent-soft-red-3); }
.c-end   { --cat: var(--ui-color-base-3);                    --cat-bg: var(--ui-color-base-7); }
.tile { background: var(--cat-bg); color: var(--cat); }

/* --------------------------------------------------------------- canvas */
.bfe-canvas {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  background-color: var(--air-theme-bg-color);
  background-image: radial-gradient(circle, var(--ui-color-base-5) 1px, transparent 1.2px);
}
.bfe-canvas.is-drop { box-shadow: inset 0 0 0 2px var(--ui-color-accent-main-primary); }
#drawflow { width: 100%; height: 100%; }

.bfe-float {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px;
  padding: 4px; background: var(--ui-color-bg-content-primary);
  border: 1px solid var(--bfe-stroke); border-radius: var(--ui-border-radius-lg);
  box-shadow: var(--bfe-pop);
}
.bfe-zoom { left: 16px; bottom: 16px; }
.bfe-zoom-val {
  min-width: 48px; height: 28px; padding: 0 4px; border: 0; border-radius: var(--bfe-radius-sm);
  background: transparent; color: var(--ui-color-base-2);
  font: inherit; font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium);
  cursor: pointer;
}
.bfe-zoom-val:hover { background: var(--ui-color-bg-state-hover-default); }

.bfe-hints {
  /* começa depois da barra de zoom, senão o texto passa por baixo dela */
  position: absolute; left: 210px; right: 16px; bottom: 16px; z-index: 4;
  display: flex; gap: 14px; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap;
  font-size: var(--ui-font-size-xs); color: var(--ui-color-base-3); pointer-events: none;
}
.bfe-hints kbd {
  font: inherit; font-weight: var(--ui-font-weight-medium); color: var(--ui-color-base-2);
  background: var(--ui-color-bg-content-primary); border: 1px solid var(--ui-color-base-6);
  border-bottom-width: 2px; border-radius: var(--ui-border-radius-2xs); padding: 0 4px;
}
.bfe-app.has-props .bfe-hints { display: none; }

.bfe-minimap { right: 16px; bottom: 16px; width: 170px; height: 110px; padding: 0; overflow: hidden; cursor: pointer; }
.bfe-minimap svg { display: block; }
.bfe-minimap rect { opacity: .8; }
.bfe-minimap rect.sel { opacity: 1; stroke: var(--ui-color-base-1); stroke-width: 1.2; }
.bfe-minimap rect.vp {
  opacity: 1; fill: rgb(var(--marca-600-rgb, 178 30 75) / .05);
  stroke: var(--ui-color-accent-main-primary); stroke-width: 1.2;
}
.bfe-app:not(.no-minimap) .bfe-hints { right: 200px; }
/* Um canto para cada coisa, senão elas se empilham:
   cima-esquerda = barra do funil | baixo-esquerda = zoom e avisos
   baixo-direita = minimapa, com as dicas à esquerda dele.
   Telas estreitas não têm canto sobrando: as dicas saem. */
@media (max-width: 1180px) { .bfe-hints { display: none; } }
@media (max-height: 560px) { .bfe-hints, .bfe-minimap { display: none; } }
.bfe-app.no-minimap .bfe-minimap { display: none; }

.bfe-toast {
  /* Ancorado na lateral: no meio da tela ele tapava os blocos. */
  position: absolute; left: 16px; bottom: 60px; z-index: 20;
  max-width: min(22rem, calc(100% - 32px)); transform: translateY(8px);
  opacity: 0; pointer-events: none;
  padding: 9px 14px; border-radius: var(--bfe-radius);
  background: var(--ui-color-base-1); color: #fff;
  font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-medium);
  box-shadow: var(--bfe-pop); transition: opacity .18s, transform .18s;
}
.bfe-toast.show { opacity: 1; transform: translateY(0); }
.bfe-toast.err { background: var(--ui-color-accent-main-alert); }

/* ---------------------------------------------------------------- blocos */
/* No canvas os blocos pairam sobre a grade: uma sombra curta dá profundidade
   (os cards do resto do painel continuam sem sombra, como no Air). */
.bfe-app .drawflow .drawflow-node {
  width: 248px; padding: 0; background: var(--ui-color-bg-content-primary);
  border: 1.5px solid var(--bfe-stroke); border-radius: var(--bfe-radius);
  box-shadow: 0 1px 2px rgb(0 32 64 / .06); color: var(--ui-color-base-1);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.bfe-app .drawflow .drawflow-node:hover { border-color: var(--ui-color-base-5); box-shadow: 0 6px 18px rgb(0 32 64 / .10); }
.bfe-app .drawflow .drawflow-node.selected {
  border-color: var(--ui-color-accent-main-primary);
  box-shadow: 0 0 0 3px var(--ui-color-accent-soft-red-2), 0 6px 18px rgb(0 32 64 / .10);
}
.bfe-app .drawflow .drawflow-node .drawflow_content_node { width: 100%; }
.bfe-app .drawflow .drawflow-node.start,
.bfe-app .drawflow .drawflow-node.end { width: 158px; }

.bfe-n .nh {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 10px;
  border-bottom: 1px solid var(--bfe-line); border-radius: 9px 9px 0 0; background: var(--cat-bg);
}
.bfe-n .nh .tile {
  width: 24px; height: 24px; border-radius: var(--ui-border-radius-xs); flex: none;
  display: grid; place-items: center; background: var(--ui-color-bg-content-primary); color: var(--cat);
}
.bfe-n .nh .nt {
  font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semi-bold);
  color: var(--ui-color-base-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bfe-n .nh .nfmt { margin-left: auto; color: var(--cat); opacity: .75; display: grid; place-items: center; }
.bfe-n.t-start .nh, .bfe-n.t-end .nh { border-bottom: 0; border-radius: 9px; }

.bfe-n .nb { padding: 10px 12px 11px; font-size: var(--ui-font-size-md); color: var(--ui-color-base-2); line-height: 1.45; }
/* A prévia mantém as quebras de linha do texto, e o corte continua em 4 linhas. */
.bfe-n .nbt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.bfe-n .nb.empty {
  margin: 10px 12px; padding: 7px 10px; color: var(--ui-color-base-4);
  border: 1px dashed var(--ui-color-base-6); border-radius: var(--bfe-radius-sm);
}
.bfe-n.t-start .nb, .bfe-n.t-end .nb { display: none; }

.bfe-n .nouts {
  padding: 4px 0 5px; border-top: 1px solid var(--bfe-line); border-radius: 0 0 9px 9px;
  background: var(--ui-color-bg-content-secondary);
}
.bfe-n .no {
  height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 10px;
  font-size: var(--ui-font-size-sm); color: var(--ui-color-base-2);
}
.bfe-n .no .k {
  flex: none; min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--ui-border-radius-xs);
  display: grid; place-items: center; background: var(--cat-bg); color: var(--cat);
  font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-semi-bold);
}
.bfe-n .no .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfe-n .no.muted .lbl { color: var(--ui-color-base-4); }
.bfe-n .no.alt .k,
.bfe-n .no.fallback .k { background: var(--ui-color-base-7); color: var(--ui-color-base-3); }
.bfe-n .no.fallback .lbl { color: var(--ui-color-base-4); }
.bfe-n .no.hint { justify-content: center; color: var(--ui-color-base-4); font-size: var(--ui-font-size-xs); }

/* portas */
.bfe-app .drawflow .drawflow-node .inputs,
.bfe-app .drawflow .drawflow-node .outputs { position: absolute; top: 0; width: 0; height: 100%; }
.bfe-app .drawflow .drawflow-node .inputs { left: 0; }
.bfe-app .drawflow .drawflow-node .outputs { right: 0; }
.bfe-app .drawflow .drawflow-node .input,
.bfe-app .drawflow .drawflow-node .output {
  position: absolute; width: 14px; height: 14px; margin: 0; border-radius: 50%;
  background: var(--ui-color-bg-content-primary); border: 2px solid var(--ui-color-base-4);
  transition: transform .1s, background-color .1s, border-color .1s;
}
.bfe-app .drawflow .drawflow-node .input { left: -8px; }
.bfe-app .drawflow .drawflow-node .output { right: -8px; }
.bfe-app .drawflow .drawflow-node .input:hover,
.bfe-app .drawflow .drawflow-node .output:hover {
  background: var(--ui-color-accent-main-primary); border-color: var(--ui-color-accent-main-primary); transform: scale(1.3);
}
.bfe-app .drawflow .drawflow-node.selected .input,
.bfe-app .drawflow .drawflow-node.selected .output {
  border-color: var(--ui-color-accent-main-primary); background: var(--ui-color-accent-soft-red-2);
}
/* Alvo invisível de 30px em volta da porta: puxar e soltar uma ligação no
   círculo de 14px exigia mira. O Drawflow lê o clique pela classe da porta,
   e o pseudo-elemento conta como a própria porta. */
.bfe-app .drawflow .drawflow-node .input::after,
.bfe-app .drawflow .drawflow-node .output::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
}

/* ligações
   O <svg> de cada ligação é um retângulo invisível que vai de um bloco ao outro.
   Sem isto ele recebe o clique no lugar do fundo e o canvas não arrasta nessas
   áreas (o Drawflow só faz pan quando o alvo é .drawflow/.parent-drawflow).
   O traço e os pontos de rota seguem clicáveis. */
.bfe-app .drawflow svg.connection { pointer-events: none; }
.bfe-app .drawflow svg.connection .main-path { pointer-events: stroke; }
.bfe-app .drawflow svg.connection .point { pointer-events: all; }

.bfe-app .drawflow .connection .main-path {
  stroke: var(--ui-color-base-4); stroke-width: 2px; fill: none;
  transition: stroke .12s, opacity .12s;
}
.bfe-app .drawflow .connection.is-fallback .main-path { stroke: var(--ui-color-base-5); stroke-dasharray: 6 5; }
.bfe-app .drawflow .connection.is-alt .main-path { stroke: var(--ui-color-base-5); }
.bfe-app .drawflow .connection.is-hl .main-path { stroke: var(--ui-color-accent-main-primary); stroke-width: 2.6px; }
.bfe-app .drawflow .connection.is-dim .main-path { opacity: .28; }
.bfe-app .drawflow .connection .main-path:hover,
.bfe-app .drawflow .connection .main-path.selected { stroke: var(--ui-color-accent-main-primary); stroke-width: 3px; opacity: 1; }
.bfe-app .drawflow .connection .point { stroke: var(--ui-color-accent-main-primary); fill: var(--ui-color-bg-content-primary); }
.bfe-app .drawflow-delete {
  background: var(--ui-color-accent-main-alert); border: 0; color: #fff;
  line-height: 18px; width: 20px; height: 20px; border-radius: 50%; font-weight: var(--ui-font-weight-bold);
}
.bfe-app .parent-node .drawflow-delete { right: -12px; top: -12px; }

/* ------------------------------------------------------- painel de edição */
.bfe-props {
  flex: none; width: 0; overflow: hidden;
  background: var(--ui-color-bg-content-primary);
  border-left: 1px solid transparent; transition: width .15s ease;
}
.bfe-app.has-props .bfe-props { width: 360px; border-left-color: var(--bfe-line); }
.bfe-props-inner { width: 360px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.bfe-props-head {
  display: flex; align-items: flex-start; gap: 11px; padding: 14px 12px 14px 18px;
  border-bottom: 1px solid var(--bfe-line);
}
.bfe-props-head .tile { width: 36px; height: 36px; border-radius: var(--bfe-radius); display: grid; place-items: center; flex: none; }
.bfe-props-head .t { font-size: var(--ui-font-size-xl); font-weight: var(--ui-font-weight-semi-bold); }
.bfe-props-head .d { margin-top: 1px; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3); line-height: 1.35; }
.bfe-props-head .btn, .bfe-props-head .btn-close { margin-left: auto; align-self: flex-start; flex: none; }
.bfe-props-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
.bfe-props-foot {
  display: flex; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--bfe-line); background: var(--ui-color-bg-content-primary);
}
.bfe-props-foot .btn { flex: 1; }

.bf-field { margin-bottom: 14px; }
.bf-field .form-label { display: block; margin-bottom: 5px; }
.bf-field textarea.form-control { min-height: 88px; resize: vertical; }

.bfe-sec {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
  font-size: var(--ui-font-size-md); font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1);
}
.bfe-sec::after { content: ""; flex: 1; height: 1px; background: var(--bfe-line); }
.bfe-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bfe-opt .num {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: var(--ui-border-radius-xs); background: var(--ui-color-base-7);
  color: var(--ui-color-base-2); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semi-bold);
}
.bfe-opt .form-control { flex: 1; min-width: 0; }
/* botões de link/cupom nos blocos de opções */
.bfe-acao {
  display: grid; gap: 6px; margin-bottom: 8px; padding: 8px;
  border: 1px solid var(--bfe-line); border-radius: var(--bfe-radius-sm);
}
.bfe-acao-top { display: flex; align-items: center; gap: 8px; }
.bfe-acao-top .form-select { flex: 1; min-width: 0; }
.bfe-acao .num {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: var(--ui-border-radius-xs); background: var(--ui-color-base-7); color: var(--ui-color-base-2);
}
.bfe-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.bfe-add:empty { display: none; }
.bfe-empty-props { color: var(--ui-color-base-3); font-size: var(--ui-font-size-md); }

/* campo de arquivo (blocos Imagem e Arquivo) */
.bfe-file-botao { width: 100%; justify-content: center; }
.bfe-file-atual {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px;
  border-radius: var(--bfe-radius-sm); background: var(--ui-color-bg-content-tertiary);
  color: var(--ui-color-base-2);
}
.bfe-file-atual .ui-icon { color: var(--ui-color-base-3); flex: none; }
.bfe-file-atual .nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1);
}
.bfe-file-status:empty { display: none; }
.bfe-file-status {
  margin-top: 6px; font-size: var(--ui-font-size-xs); color: var(--ui-color-base-3);
}
.bfe-file-status.is-err { color: var(--ui-color-accent-main-alert); }

/* mini-editor de BBCode (descrição de tarefa, comentário no CRM, notificação) */
.bfe-bb-bar {
  display: flex; align-items: center; gap: 2px; margin-bottom: 6px;
}
.bfe-bb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--ui-border-radius-xs);
  background: transparent; color: var(--ui-color-base-2);
  font: inherit; font-size: var(--ui-font-size-sm); line-height: 1; cursor: pointer;
  transition: background-color .1s linear;
}
.bfe-bb-btn:hover { background: var(--ui-color-bg-state-hover-default); color: var(--ui-color-base-1); }
.bfe-bb-hint { margin-left: auto; font-size: var(--ui-font-size-xs); color: var(--ui-color-base-4); }
.bfe-bb textarea.form-control { min-height: 104px; resize: vertical; }

.bfe-note {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--bfe-radius-sm);
  background: var(--ui-color-bg-content-tertiary); color: var(--ui-color-base-2);
  font-size: var(--ui-font-size-sm); line-height: 1.5;
}
.bfe-note code {
  padding: 0 4px; border-radius: var(--ui-border-radius-2xs);
  background: var(--ui-color-accent-soft-blue-3); color: var(--ui-color-accent-main-primary);
  font-size: var(--ui-font-size-xs);
}

/* ------------------------------------------- modais do editor (mesmo cartão do painel) */
.bfe-modal {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgb(0 51 102 / .22);
  animation: bfe-backdrop-in .12s ease-out both;
}
.bfe-modal[hidden] { display: none; }
.bfe-modal-card {
  width: min(620px, 100%); max-height: calc(100% - 16px); display: flex; flex-direction: column;
  background: var(--ui-color-bg-content-primary); border-radius: 20px;
  box-shadow: 0 24px 64px rgb(0 51 102 / .22); overflow: hidden;
  animation: bfe-modal-in .14s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes bfe-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfe-modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bfe-modal, .bfe-modal-card { animation: none; } }
.bfe-modal-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 22px 60px 6px 24px; }
.bfe-modal-head .tile { width: 40px; height: 40px; border-radius: var(--ui-border-radius-md); display: grid; place-items: center; flex: none; }
.bfe-modal-head .t { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1); }
.bfe-modal-head .d { margin-top: 3px; font-size: var(--ui-font-size-md); color: var(--ui-color-base-3); line-height: 1.4; }
.bfe-modal-head .btn-close { position: absolute; top: 16px; right: 16px; margin: 0; }
.bfe-modal-body { padding: 10px 24px 8px; overflow-y: auto; }
.bfe-confirm-card { width: min(440px, 100%); }
.bfe-confirm-card .bfe-modal-head { padding-bottom: 4px; }
.bfe-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
@media (max-width: 639px) {
  .bfe-modal { padding: 0; align-items: flex-end; }
  .bfe-modal-card { width: 100%; max-height: calc(100% - 24px); border-radius: 20px 20px 0 0; animation-name: bfe-sheet-in; animation-duration: .16s; }
  @keyframes bfe-sheet-in { from { transform: translateY(24px); } to { transform: none; } }
  .bfe-modal-foot > .btn { flex: 1 1 auto; }
}

.bfe-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 22px 16px;
  border: 1.5px dashed var(--ui-color-base-5); border-radius: var(--bfe-radius);
  background: var(--ui-color-bg-content-secondary); text-align: center; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.bfe-drop:hover, .bfe-drop.is-over {
  border-color: var(--ui-color-accent-main-primary); background: var(--ui-color-accent-soft-blue-3);
}
.bfe-drop .ui-icon { color: var(--ui-color-accent-main-primary); margin-bottom: 4px; }
.bfe-drop b { font-size: var(--ui-font-size-lg); color: var(--ui-color-base-1); word-break: break-all; }
.bfe-drop span:last-child { font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3); }
.bfe-or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 8px;
  font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3);
}
.bfe-or::before, .bfe-or::after { content: ""; flex: 1; height: 1px; background: var(--bfe-line); }
.bfe-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: var(--ui-font-size-sm) !important; line-height: 1.5;
  min-height: 120px; resize: vertical; white-space: pre;
}

.bfe-imp-box {
  display: flex; gap: 10px; margin-top: 12px; padding: 11px 13px;
  border-radius: var(--bfe-radius); font-size: var(--ui-font-size-sm); line-height: 1.45;
}
.bfe-imp-box > .ui-icon { flex: none; }
.bfe-imp-box ul { margin: 6px 0 0; padding-left: 18px; }
.bfe-imp-box.ok   { background: var(--ui-color-accent-soft-green-3); color: var(--ui-color-accent-main-success-alt-2); }
.bfe-imp-box.warn { background: var(--ui-color-accent-soft-orange-3); color: var(--ui-color-accent-soft-element-orange); }
.bfe-imp-box.err  { background: var(--ui-color-accent-soft-red-3); color: var(--ui-color-accent-soft-element-red); }
.bfe-imp-box.busy { background: var(--ui-color-bg-content-tertiary); color: var(--ui-color-base-2); }

.bfe-formats { margin-top: 14px; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3); }
.bfe-formats summary { cursor: pointer; font-weight: var(--ui-font-weight-medium); color: var(--ui-color-base-2); }
.bfe-formats ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.bfe-formats code {
  padding: 1px 5px; border-radius: var(--ui-border-radius-2xs);
  background: var(--ui-color-base-7); color: var(--ui-color-base-2); font-size: var(--ui-font-size-xs);
}

/* ----------------------------------------------------------- responsivo */
@media (max-width: 900px) {
  .bfe-app.has-props .bfe-props {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 8;
    width: min(360px, 100%); box-shadow: var(--bfe-pop);
  }
  .bfe-props-inner { width: min(360px, 100vw); }
  .bfe-hints, .bfe-hide-sm, .bfe-minimap, #bfe-mm-toggle { display: none !important; }
}
@media (max-width: 640px) {
  .bfe-top { gap: 8px; padding: 0 10px; }
  .bfe-status, .bfe-top-actions .btn .txt, .bfe-top-actions .btn kbd { display: none; }
  .bfe-top-actions .btn { padding: 0 10px; }
}

/* ---------- publicar, versões e cenários ---------- */
.bfe-muted { margin: 0; color: var(--ui-color-base-3); font-size: var(--ui-font-size-sm); line-height: 1.45; }
.bfe-muted.is-err { color: var(--ui-color-accent-main-alert); }
.bfe-muted a { color: var(--ui-color-accent-main-primary); }
.bfe-cen, .bfe-ver {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--bfe-line);
}
.bfe-cen:last-of-type, .bfe-ver:last-child { border-bottom: 0; }
.bfe-cen > span:last-child, .bfe-ver-info { display: grid; min-width: 0; flex: 1; font-size: var(--ui-font-size-sm); }
.bfe-cen b, .bfe-ver-info b { color: var(--ui-color-base-1); font-weight: var(--ui-font-weight-semi-bold); }
.bfe-cen small, .bfe-ver-info small { color: var(--ui-color-base-3); }
.bfe-cen .pill { margin-top: 1px; flex: none; }
.bfe-ver .tile { width: 32px; height: 32px; border-radius: var(--bfe-radius-sm); display: grid; place-items: center; flex: none; }
.bfe-ver .btn { flex: none; align-self: center; }
.bfe-ver-info .pill { justify-self: start; margin: 2px 0; }
#bfe-ver-lista { max-height: 60vh; overflow-y: auto; }

/* ---------- funil ---------- */
.bfe-top-actions .btn.is-on { background: var(--app-info-bg); border-color: var(--app-info-color); color: var(--app-info-color); }
.bfe-funil-bar {
  /* Sempre na lateral, nunca por cima do desenho. */
  left: 16px; top: 16px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 6px 6px 6px 8px;
  max-width: calc(100% - 32px);
}
.bfe-funil-bar[hidden] { display: none; }
.bfe-funil-bar .tile { width: 30px; height: 30px; border-radius: var(--bfe-radius-sm); display: grid; place-items: center; flex: none; }
.bfe-funil-resumo { font-size: var(--ui-font-size-sm); color: var(--ui-color-base-1); }
.bfe-funil-bar .form-select { width: auto; }
.bfe-app .drawflow .drawflow-node .bfe-fn {
  position: absolute; left: 8px; top: -30px; z-index: 3;
  display: flex; gap: 6px; pointer-events: none;
}
.bfe-fn span {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: 99rem; background: var(--app-info-color); color: #fff;
  font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-semi-bold); white-space: nowrap;
}
.bfe-fn span em { font-style: normal; opacity: .8; font-weight: var(--ui-font-weight-normal); }
.bfe-fn span.is-warn { background: var(--ui-color-accent-soft-element-orange); }
.bfe-fn-op {
  margin-left: auto; padding: 0 6px; border-radius: 99rem;
  background: var(--app-info-bg); color: var(--app-info-color);
  font-size: var(--ui-font-size-xs); font-weight: var(--ui-font-weight-semi-bold); white-space: nowrap;
}
.bfe-app.is-funil .drawflow .drawflow-node.is-frio { opacity: .5; }
/* O drawflow.min.css põe todo <svg> do canvas em position:absolute; nos selos do
   funil o ícone precisa ficar na linha, ao lado do número. */
.bfe-app .drawflow .bfe-fn svg.ui-icon { position: static; width: 14px; height: 14px; flex: none; }

/* ---------- gerar com IA: "Pensando…" ---------- */
.bfe-think { display: flex; align-items: center; gap: 16px; padding: 28px 8px; }
.bfe-think[hidden] { display: none; }
.bfe-think-ic {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: var(--ui-color-accent-soft-violet-3); color: var(--ui-color-accent-soft-element-violet);
}
.bfe-think-ic .ui-icon { animation: bfe-gira 3.2s linear infinite, bfe-pulsa 1.6s ease-in-out infinite; }
.bfe-think-t {
  font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semi-bold);
  background: linear-gradient(90deg, var(--ui-color-base-2) 0%, var(--ui-color-base-2) 40%,
              var(--ui-color-accent-soft-element-violet) 50%, var(--ui-color-base-2) 60%, var(--ui-color-base-2) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bfe-brilho 2s linear infinite;
}
.bfe-think-d { margin-top: 2px; color: var(--ui-color-base-3); font-size: var(--ui-font-size-sm); font-variant-numeric: tabular-nums; }
@keyframes bfe-gira { to { transform: rotate(360deg); } }
@keyframes bfe-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes bfe-brilho { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .bfe-think-ic .ui-icon, .bfe-think-t { animation: none; }
  .bfe-think-t { color: var(--ui-color-base-2); background: none; }
}

/* gerar com IA: modelos de descrição */
.bfe-gen-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 320px; overflow: auto; }
.bfe-gen-tool { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ui-color-design-tokens-stroke); border-radius: 10px; cursor: pointer; }
.bfe-gen-tool:hover { background: var(--ui-color-base-alt-2); }
.bfe-gen-tool input { margin-top: 3px; }
.bfe-gen-tool span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bfe-gen-tool code { font-size: 12px; color: var(--ui-color-accent-soft-element-violet); word-break: break-all; }
.bfe-gen-tool em { font-style: normal; font-size: 12px; color: var(--ui-color-base-5); }
.bfe-gen-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.bfe-gen-modelos { display: flex; flex-wrap: wrap; gap: 6px; }
.bfe-gen-modelos .btn.is-on { background: var(--ui-color-accent-soft-violet-3); border-color: var(--ui-color-accent-soft-element-violet); color: var(--ui-color-accent-soft-element-violet); }

/* IA em um bloco só (painel de propriedades): cartão leve, com a cor da IA
   (violeta) só no ícone, nas bolhas dela e no botão de enviar. */
.bfe-ia-toggle.is-on { --btn-bg: var(--ui-color-accent-soft-violet-3); --btn-color: var(--ui-color-accent-soft-element-violet); }
.bfe-ia {
  margin-bottom: 16px; padding: 16px 14px 14px;
  border: 1px solid var(--ui-color-design-outline-stroke); border-radius: var(--ui-border-radius-md);
  background: var(--ui-color-bg-content-primary);
  box-shadow: 0 1px 2px rgb(0 51 102 / .04);
  animation: bfe-ia-in .14s ease-out both;
}
@keyframes bfe-ia-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bfe-ia[hidden] { display: none; }
.bfe-ia-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bfe-ia-ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--ui-border-radius-md);
  background: var(--ui-color-accent-soft-violet-3); color: var(--ui-color-accent-soft-element-violet);
}
.bfe-ia-ic .ui-icon { width: 22px; height: 22px; }
.bfe-ia-head-t { min-width: 0; line-height: 1.3; }
.bfe-ia-head-t b { display: block; font-size: var(--ui-font-size-lg); font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1); }
.bfe-ia-head-t small { display: block; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-3); }
.bfe-ia-msgs { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; }
.bfe-ia-msg { max-width: 92%; padding: 9px 13px; border-radius: 12px; font-size: var(--ui-font-size-md); line-height: 1.45; overflow-wrap: anywhere; }
.bfe-ia-msg.is-ia { justify-self: start; background: var(--ui-color-accent-soft-violet-3); color: var(--ui-color-base-1); border-bottom-left-radius: 4px; }
.bfe-ia-msg.is-eu { justify-self: end; background: var(--ui-color-bg-content-tertiary); color: var(--ui-color-base-1); border-bottom-right-radius: 4px; }
/* compositor: caixa única com o botão dentro */
.bfe-ia-linha {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px;
  border-radius: var(--ui-border-radius-md); background: var(--ui-color-design-outline-bg);
  box-shadow: inset 0 0 0 1px var(--ui-color-design-outline-stroke);
  transition: box-shadow .15s ease;
}
.bfe-ia-linha:focus-within { box-shadow: inset 0 0 0 1px var(--ui-color-accent-soft-element-violet), 0 0 0 3px var(--ui-color-accent-soft-violet-3); }
.bfe-ia-txt {
  flex: 1; min-width: 0; min-height: 84px; max-height: 240px; padding: 9px 0; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--ui-color-base-1); font: inherit; font-size: var(--ui-font-size-md); line-height: 1.4; overflow-y: auto;
}
.bfe-ia-txt::placeholder { color: var(--ui-color-base-4); }
.bfe-ia-go {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--ui-border-radius-sm);
  background: var(--ui-color-accent-soft-element-violet); color: #fff; cursor: pointer; transition: background-color .1s linear, opacity .1s linear;
}
.bfe-ia-go:hover { background: color-mix(in srgb, var(--ui-color-accent-soft-element-violet) 88%, #000); }
.bfe-ia-go:disabled { opacity: .35; cursor: default; }
.bfe-ia-go:focus-visible { outline: 2px solid var(--ui-color-design-outline-focused-stroke); outline-offset: 2px; }
.bfe-ia-hint { margin-top: 8px; font-size: var(--ui-font-size-sm); color: var(--ui-color-base-4); }
.bfe-ia-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.bfe-ia-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ui-color-accent-soft-element-violet); animation: bfe-ia-pulo 1.2s infinite ease-in-out; }
.bfe-ia-dots i:nth-child(2) { animation-delay: .2s; }
.bfe-ia-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bfe-ia-pulo { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Bloco desativado: continua no desenho e nas ligações, mas o bot passa direto. */
.bfe-n.is-off { opacity: .6; border-style: dashed; }
.bfe-n.is-off .nb, .bfe-n.is-off .nouts { filter: grayscale(1); }
.bfe-n .noff { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
               padding: 1px 6px; border-radius: 999px; background: var(--ui-color-base-7); color: var(--ui-color-base-3); }

/* Menu do botão direito no bloco. */
.bfe-nmenu {
  position: fixed; z-index: 1200; min-width: 200px; padding: 6px;
  background: var(--ui-color-bg-content-primary); border: 1px solid var(--ui-color-design-tokens-stroke);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column; gap: 2px;
}
.bfe-nmenu[hidden] { display: none; }
.bfe-nmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 14px; color: var(--ui-color-base-1); text-align: left; cursor: pointer;
}
.bfe-nmenu button:hover { background: var(--ui-color-base-alt-2); }
.bfe-nmenu button .ui-icon { color: var(--ui-color-base-4); flex: none; }
.bfe-nmenu button.is-danger { color: var(--ui-color-accent-main-alert); }
.bfe-nmenu button.is-danger .ui-icon { color: var(--ui-color-accent-main-alert); }
.bfe-nmenu button.is-danger:hover { background: var(--ui-color-accent-soft-red-2, rgba(217,54,49,.1)); }

/* ------------------------------------------------- funil fora do editor */
.fn-ops { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-width: 32rem; }
.fn-op { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ui-color-base-3); }
.fn-op-l { flex: 0 0 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-op-n { flex: none; min-width: 4.5rem; text-align: right; color: var(--ui-color-base-2); }
.fn-op-n em { font-style: normal; color: var(--ui-color-base-4); }
.fn-op.is-warn .fn-op-l { color: var(--ui-color-accent-extra-orange); }
.fn-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--ui-color-base-7); overflow: hidden; display: block; }
.fn-bar.is-wide { min-width: 6rem; margin-bottom: 4px; }
.fn-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ui-color-accent-main-primary); }

/* ------------------------------------------- funil: o fluxo em só leitura */
.bfe-app.is-leitura .bfe-palette,
.bfe-app.is-leitura .bfe-props,
.bfe-app.is-leitura .bfe-top-actions > :not(.bfe-so-leitura):not(#bfe-full),
.bfe-app.is-leitura .drawflow-delete,
.bfe-app.is-leitura #bfe-funil-fechar { display: none !important; }
.bfe-app.is-leitura .drawflow-node { cursor: default; }
.bfe-app.is-leitura .bfe-n:hover { box-shadow: none; }
.bfe-bot-sel { max-width: 15rem; font-weight: var(--ui-font-weight-semi-bold); }
.bfe-funil-custom { display: inline-flex; align-items: center; gap: 6px; }
.bfe-funil-custom input { width: 9.5rem; }
.bfe-funil-ate { font-size: 12px; color: var(--ui-color-base-4); }

/* ------------------------------------------------- chat do funil (lateral) */
.bfe-fchat[hidden] { display: none; }
.bfe-fchat {
  flex: none; width: 340px; display: flex; flex-direction: column; min-height: 0;
  background: var(--ui-color-bg-content-primary); border-left: 1px solid var(--bfe-line);
}
.bfe-fchat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bfe-line); }
.bfe-fchat-head .tile { width: 32px; height: 32px; border-radius: var(--bfe-radius-sm); display: grid; place-items: center; flex: none; }
.bfe-fchat-head .t { font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1); }
.bfe-fchat-head .d { font-size: 12px; color: var(--ui-color-base-4); }
.bfe-fchat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bfe-fchat-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.bfe-fchat-msg.is-ia { background: var(--ui-color-base-alt-2); color: var(--ui-color-base-1); align-self: flex-start; }
.bfe-fchat-msg.is-eu { background: var(--ui-color-accent-main-primary); color: #fff; align-self: flex-end; }
.bfe-fchat-exemplos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.bfe-fchat-exemplos button {
  border: 1px solid var(--bfe-line); background: transparent; border-radius: 999px;
  padding: 5px 10px; font-size: 12px; color: var(--ui-color-base-3); cursor: pointer;
}
.bfe-fchat-exemplos button:hover { border-color: var(--ui-color-accent-main-primary); color: var(--ui-color-accent-main-primary); }
.bfe-fchat-linha { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--bfe-line); }
.bfe-fchat-linha textarea { resize: none; max-height: 120px; font-size: 13px; }
@media (max-width: 900px) { .bfe-fchat { display: none; } }

/* ------------------------------------- melhorar o fluxo (lateral, editor) */
.bfe-mchat-checks { flex: 0 1 auto; max-height: 42%; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--bfe-line); }
.bfe-mchat-checks-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 14px; font-size: 13px; }
.bfe-mchat-resumo { flex: 1 1 auto; font-size: 12px; color: var(--ui-color-base-4); min-width: 0; }
.bfe-mchat-lista { list-style: none; margin: 0; padding: 0 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.bfe-mchat-lista li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline;
  padding: 7px 9px; border-radius: var(--bfe-radius-sm); font-size: 12px; line-height: 1.4;
  background: var(--ui-color-base-alt-2); color: var(--ui-color-base-2);
}
.bfe-mchat-lista li[data-no] { cursor: pointer; }
.bfe-mchat-lista li[data-no]:hover, .bfe-mchat-lista li[data-no]:focus-visible { outline: 1px solid var(--ui-color-accent-main-primary); outline-offset: -1px; }
.bfe-mchat-lista .nivel { grid-row: span 2; font-weight: var(--ui-font-weight-semi-bold); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.bfe-mchat-lista .onde { font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1); }
.bfe-mchat-lista .txt { grid-column: 2; }
.bfe-mchat-lista li:not([data-no]) .txt { grid-row: 1; }
.bfe-mchat-lista li.is-erro .nivel { color: var(--ui-color-accent-main-alert); }
.bfe-mchat-lista li.is-aviso .nivel { color: var(--ui-color-accent-extra-orange); }
.bfe-mchat-lista li.is-dica .nivel { color: var(--ui-color-base-4); }
.bfe-mchat-ref { color: var(--ui-color-accent-main-primary); font-weight: var(--ui-font-weight-semi-bold); text-decoration: none; }
.bfe-mchat-ref:hover { text-decoration: underline; }
.bfe-app .drawflow-node.is-alvo .bfe-n { transition: box-shadow .2s ease; }
.bfe-mchat-aplicar { display: flex; align-items: center; gap: 6px; margin-top: 8px; white-space: nowrap; }
.bfe-mchat-prop { max-width: 100%; align-self: stretch; white-space: normal; display: flex; flex-direction: column; gap: 6px; }
.bfe-mchat-prop .res { margin: 0 0 2px; font-weight: var(--ui-font-weight-semi-bold); }
.bfe-mchat-prop .desc { margin: 0; font-size: 12px; color: var(--ui-color-base-4); }
.bfe-mchat-mud {
  display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: var(--bfe-radius-sm);
  background: var(--ui-color-bg-content-primary); border: 1px solid var(--bfe-line); cursor: pointer; margin: 0;
}
.bfe-mchat-mud input { margin-top: 3px; flex: none; }
.bfe-mchat-mud > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bfe-mchat-mud .tit { font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1); }
.bfe-mchat-mud.is-excluir .tit { color: var(--ui-color-accent-main-alert); }
.bfe-mchat-mud .mot { font-size: 12px; color: var(--ui-color-base-3); }
.bfe-mchat-mud .campo { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ui-color-base-2); }
.bfe-mchat-mud .campo b { font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-4); margin-right: 4px; }
.bfe-mchat-prop .acoes { display: flex; gap: 6px; align-items: center; margin-top: 4px; }

/* Menu do bloco aberto: a barra de dicas sai da frente. */
.bfe-app.is-menu .bfe-hints { opacity: 0; pointer-events: none; }
.bfe-app .drawflow-node.is-alvo .bfe-n { box-shadow: 0 0 0 2px var(--ui-color-accent-main-primary); }
.bfe-nmenu { z-index: 1300; }

/* Botão "Remover ligação": aparece junto do clique numa ligação. */
.bfe-conn-del {
  position: absolute; z-index: 25;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--ui-color-design-outline-stroke); border-radius: var(--ui-border-radius-pill);
  background: var(--ui-color-bg-content-primary); color: var(--ui-color-accent-main-alert);
  font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semi-bold);
  box-shadow: var(--bfe-pop); cursor: pointer;
  animation: bfe-pop-in .12s ease-out;
}
.bfe-conn-del[hidden] { display: none; }
.bfe-conn-del:hover { background: var(--ui-color-accent-soft-red-3); }
.bfe-conn-del:focus-visible { outline: 2px solid var(--ui-color-design-outline-focused-stroke); outline-offset: 2px; }
@keyframes bfe-pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bfe-conn-del { animation: none; } }

/* Paleta: busca sem resultado */
.bfe-pal-empty { padding: 16px 8px; color: var(--ui-color-base-3); font-size: var(--ui-font-size-sm); text-align: center; }

/* Guia de início: aparece enquanto o fluxo só tem o bloco Início. */
.bfe-start {
  position: absolute; left: 50%; top: 58%; z-index: 6; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px)); padding: 28px 28px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  background: var(--ui-color-bg-content-primary); border: 1px solid var(--bfe-stroke);
  border-radius: var(--ui-border-radius-lg); box-shadow: var(--bfe-pop);
  animation: bfe-pop-in .18s ease-out;
}
.bfe-start[hidden] { display: none; }
.bfe-start .ui-tile-icon { margin-bottom: 8px; }
.bfe-start-title { margin: 0; font-size: var(--ui-font-size-2xl); font-weight: var(--ui-font-weight-semi-bold); color: var(--ui-color-base-1); }
.bfe-start-text { margin: 0 0 12px; color: var(--ui-color-base-3); }
.bfe-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bfe-start-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; text-align: start;
  border: 1px solid var(--ui-color-design-outline-stroke); border-radius: var(--ui-border-radius-md);
  background: var(--ui-color-bg-content-primary); color: var(--ui-color-base-1); font: inherit; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.bfe-start-opt:hover { border-color: var(--ui-color-accent-main-primary); background: var(--ui-color-accent-soft-red-3); color: var(--ui-color-base-1); }
.bfe-start-opt > .ui-icon { flex: none; margin-top: 1px; color: var(--ui-color-accent-main-primary); }
.bfe-start-opt strong { display: block; font-weight: var(--ui-font-weight-semi-bold); }
.bfe-start-opt small { display: block; color: var(--ui-color-base-3); font-size: var(--ui-font-size-xs); line-height: 1.35; }
.bfe-start-foot { margin: 12px 0 0; color: var(--ui-color-base-4); font-size: var(--ui-font-size-xs); }
@media (max-width: 560px) { .bfe-start-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bfe-start { animation: none; } .bfe-app .drawflow .drawflow-node { transition: none; } }

/* Puxando uma ligação, os traços deixam de receber o mouse: assim nenhum traço
   que passe por cima do bloco de destino rouba o alvo do mouseup. */
.bfe-app.is-ligando .drawflow svg.connection .main-path,
.bfe-app.is-ligando .drawflow svg.connection .point { pointer-events: none; }

/* Puxando uma ligação: o bloco sob o mouse vira alvo inteiro (force_first_input).
   O Início não tem entrada e não acende. */
.bfe-app.is-ligando .drawflow .drawflow-node:not(.start):hover {
  border-color: var(--ui-color-accent-main-primary);
  box-shadow: 0 0 0 4px var(--ui-color-accent-soft-red-2), 0 6px 18px rgb(0 32 64 / .10);
  cursor: copy;
}
.bfe-app.is-ligando .drawflow .drawflow-node:not(.start):hover .input { background: var(--ui-color-accent-main-primary); border-color: var(--ui-color-accent-main-primary); transform: scale(1.3); }

/* Área de clique das ligações (path.bfe-hit, montado no editor.html): 18px
   transparentes em volta do traço. Ao passar o mouse vira um contorno suave. */
.bfe-app .drawflow .connection .main-path.bfe-hit {
  stroke: transparent; stroke-width: 18px; stroke-dasharray: none; opacity: 1;
  stroke-linecap: round; stroke-linejoin: round; cursor: pointer;
}
/* a área de clique fica sempre invisível; o contorno vai no próprio traço */
.bfe-app .drawflow .connection:has(.bfe-hit:hover) .main-path:not(.bfe-hit),
.bfe-app .drawflow .connection:has(.bfe-hit.selected) .main-path:not(.bfe-hit) {
  stroke: var(--ui-color-accent-main-primary); stroke-width: 3px; opacity: 1;
  filter: drop-shadow(0 0 3px rgb(var(--marca-600-rgb, 178 30 75) / .55)) drop-shadow(0 0 7px rgb(var(--marca-600-rgb, 178 30 75) / .25));
}
.bfe-app.is-leitura .drawflow .connection .main-path.bfe-hit { pointer-events: none; }

/* ==========================================================================
   Editor no tema Clickmax (2026-09-26)
   Blocos brancos com raio 14 e sombra leve; a cor da categoria fica só no
   ícone (quadrado arredondado), não pintando o cabeçalho inteiro. Início e Fim
   viram pílulas compactas. Paleta e painel usam os mesmos quadrados de ícone.
   Mesma curva e duração do painel (--cx-*).
   ========================================================================== */
.bfe-canvas { background-color: #f4f5f6; background-image: radial-gradient(circle, #d3d7dc 1px, transparent 1.3px); background-size: 22px 22px; }

.bfe-app .drawflow .drawflow-node {
  border: 1px solid #e6e8eb; border-radius: 14px;
  box-shadow: 0 1px 2px rgb(20 20 19 / .05), 0 10px 26px -18px rgb(20 20 19 / .30);
  transition: border-color var(--cx-fast, 120ms) var(--cx-ease, ease), box-shadow var(--cx-base, 180ms) var(--cx-ease, ease);
}
.bfe-app .drawflow .drawflow-node:hover { border-color: #d3d7dc; box-shadow: 0 1px 2px rgb(20 20 19 / .05), 0 16px 32px -18px rgb(20 20 19 / .38); }

/* cabeçalho branco: ícone colorido + título forte */
.bfe-n .nh {
  height: 52px; gap: 10px; padding: 0 12px;
  background: #fff; border-bottom: 1px solid #eef0f2; border-radius: 13px 13px 0 0;
}
.bfe-n .nh .tile {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--cat-bg); color: var(--cat);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 14%, transparent);
}
.bfe-n .nh .nt { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #1f2123; }
.bfe-n .nh .nfmt { color: #8a8f98; opacity: 1; }
.bfe-n .nb { padding: 11px 14px 12px; font-size: 13.5px; line-height: 1.5; color: #4b525c; }
.bfe-n .nb.empty { margin: 12px 14px; border-radius: 10px; border-color: #dfe2e6; color: #8a8f98; }
.bfe-n .nouts { background: #fafafb; border-top-color: #eef0f2; border-radius: 0 0 13px 13px; padding: 5px 0 6px; }
.bfe-n .no { height: 30px; font-size: 13px; color: #4b525c; }
.bfe-n .no .k { min-width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }

/* Início e Fim: pílulas compactas */
.bfe-app .drawflow .drawflow-node.start,
.bfe-app .drawflow .drawflow-node.end { width: auto; min-width: 132px; border-radius: 999px; }
.bfe-n.t-start .nh, .bfe-n.t-end .nh { height: 52px; padding: 0 18px 0 11px; border-radius: 999px; border-bottom: 0; } /* mesma altura do cabeçalho dos blocos: a ligação sai reta */
.bfe-n.t-start .nh .tile, .bfe-n.t-end .nh .tile { border-radius: 50%; width: 28px; height: 28px; }

/* portas: círculo branco com borda, acende na cor da marca */
.bfe-app .drawflow .drawflow-node .input,
.bfe-app .drawflow .drawflow-node .output {
  width: 14px; height: 14px; background: #fff; border: 2px solid #c9cdd3;
  transition: transform var(--cx-fast, 120ms) var(--cx-ease, ease), background-color var(--cx-fast, 120ms) var(--cx-ease, ease), border-color var(--cx-fast, 120ms) var(--cx-ease, ease);
}

/* ligações um tom mais suave, destacadas na cor da marca */
.bfe-app .drawflow .connection .main-path:not(.bfe-hit) { stroke: #b4bac2; stroke-width: 2px; }

/* paleta: mesmos quadrados de ícone dos blocos */
.bfe-palette { background: #fff; }
.bfe-group-label { margin: 16px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8f98; }
.bfe-chip { gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14px; color: #1f2123; }
.bfe-chip .tile { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 14%, transparent); }
.bfe-chip:hover .tile { transform: scale(1.04); }
.bfe-chip .tile { transition: transform var(--cx-base, 180ms) var(--cx-ease, ease); }

/* painel de propriedades */
.bfe-props { background: #fff; }
.bfe-props-head .tile { width: 38px; height: 38px; border-radius: 11px; }
.bfe-props-head .t { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.bfe-props-foot { background: #fafafb; }

/* barras flutuantes (zoom, minimapa, funil) com o raio e a sombra do tema */
.bfe-float { border-color: #e6e8eb; border-radius: 14px; box-shadow: 0 1px 2px rgb(20 20 19 / .05), 0 12px 28px -16px rgb(20 20 19 / .30); }
.bfe-zoom-val { border-radius: 999px; }

/* ==========================================================================
   Painéis e caixas de IA do editor no padrão IA Alega (ver .ia-* no input.css)
   ========================================================================== */
.bfe-fchat { width: 360px; background: #fff; }
.bfe-fchat-head { gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eef0f2; }
.bfe-fchat-msgs { padding: 18px 16px; gap: 14px; }
/* resposta da IA: selo pequeno + nome, texto sem balão */
.bfe-fchat-msg { max-width: 100%; padding: 0; border-radius: 0; font-size: 14px; line-height: 1.55; }
.bfe-fchat-msg.is-ia { background: none; color: #1f2123; padding-left: 30px; position: relative; }
.bfe-fchat-msg.is-ia::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--marca-600, #b21e4b), var(--marca-400, #e2517c)) center / cover;
  -webkit-mask: none;
}
.bfe-fchat-msg.is-ia::after {
  content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath  d='M6.357 3.865a.7.7 0 0 1 .7.7v.685h.685a.7.7 0 1 1 0 1.4h-.685v.686a.7.7 0 0 1-1.4 0V6.65H4.97a.7.7 0 1 1 0-1.4h.686v-.685a.7.7 0 0 1 .7-.7'%3E%3C/path%3E%3Cpath  fill-rule='evenodd' d='M11.263 4.902c.29-.783 1.398-.783 1.688 0l1.507 4.072a1.3 1.3 0 0 0 .768.768l4.072 1.507c.783.29.783 1.398 0 1.688l-4.072 1.507a1.3 1.3 0 0 0-.768.768l-1.507 4.072c-.29.783-1.398.783-1.688 0l-1.507-4.072a1.3 1.3 0 0 0-.768-.768l-4.072-1.507c-.783-.29-.783-1.398 0-1.688l4.072-1.507a1.3 1.3 0 0 0 .768-.768zm.844 1.753L11.069 9.46a2.7 2.7 0 0 1-1.595 1.595l-2.805 1.038 2.805 1.038a2.7 2.7 0 0 1 1.595 1.595l1.038 2.804 1.038-2.804a2.7 2.7 0 0 1 1.595-1.595l2.805-1.038-2.805-1.038a2.7 2.7 0 0 1-1.595-1.595z' clip-rule='evenodd'%3E%3C/path%3E%3Cpath  d='M18.085 17.233a.7.7 0 1 0-1.4 0v.683h-.683a.7.7 0 1 0 0 1.4h.683v.681a.7.7 0 1 0 1.4 0v-.681h.681a.7.7 0 1 0 0-1.4h-.681z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath  d='M6.357 3.865a.7.7 0 0 1 .7.7v.685h.685a.7.7 0 1 1 0 1.4h-.685v.686a.7.7 0 0 1-1.4 0V6.65H4.97a.7.7 0 1 1 0-1.4h.686v-.685a.7.7 0 0 1 .7-.7'%3E%3C/path%3E%3Cpath  fill-rule='evenodd' d='M11.263 4.902c.29-.783 1.398-.783 1.688 0l1.507 4.072a1.3 1.3 0 0 0 .768.768l4.072 1.507c.783.29.783 1.398 0 1.688l-4.072 1.507a1.3 1.3 0 0 0-.768.768l-1.507 4.072c-.29.783-1.398.783-1.688 0l-1.507-4.072a1.3 1.3 0 0 0-.768-.768l-4.072-1.507c-.783-.29-.783-1.398 0-1.688l4.072-1.507a1.3 1.3 0 0 0 .768-.768zm.844 1.753L11.069 9.46a2.7 2.7 0 0 1-1.595 1.595l-2.805 1.038 2.805 1.038a2.7 2.7 0 0 1 1.595 1.595l1.038 2.804 1.038-2.804a2.7 2.7 0 0 1 1.595-1.595l2.805-1.038-2.805-1.038a2.7 2.7 0 0 1-1.595-1.595z' clip-rule='evenodd'%3E%3C/path%3E%3Cpath  d='M18.085 17.233a.7.7 0 1 0-1.4 0v.683h-.683a.7.7 0 1 0 0 1.4h.683v.681a.7.7 0 1 0 1.4 0v-.681h.681a.7.7 0 1 0 0-1.4h-.681z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
.bfe-fchat-msg.is-eu {
  max-width: 88%; padding: 9px 14px; background: var(--marca-50, #fdf0f4); color: #1f2123;
  border: 1px solid var(--marca-200, #f7d6e0); border-radius: 16px 16px 6px 16px;
}
.bfe-mchat-prop.is-ia { padding: 12px 14px 12px 42px; background: #fafafb; border: 1px solid #eef0f2; border-radius: 14px; }
.bfe-mchat-prop.is-ia::before { left: 12px; top: 12px; }
.bfe-mchat-prop.is-ia::after { left: 17px; top: 17px; }

/* sugestões em cartão */
.bfe-fchat-exemplos { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; }
.bfe-fchat-exemplos button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid #e6e8eb; border-radius: 12px; background: #fff;
  font-size: 13px; color: #1f2123; text-align: start; cursor: pointer;
  transition: border-color var(--cx-fast, 120ms) var(--cx-ease, ease), background-color var(--cx-fast, 120ms) var(--cx-ease, ease), transform var(--cx-base, 180ms) var(--cx-ease, ease);
}
.bfe-fchat-exemplos button::after { content: "→"; color: #8a8f98; transition: transform var(--cx-base, 180ms) var(--cx-ease, ease), color var(--cx-fast, 120ms); }
.bfe-fchat-exemplos button:hover { border-color: var(--marca-300, #f3a3b8); background: var(--marca-50, #fdf7f9); color: #1f2123; }
.bfe-fchat-exemplos button:hover::after { color: var(--marca-600, #b21e4b); transform: translateX(2px); }

/* caixa de escrita */
.bfe-fchat-linha { display: block; padding: 12px 16px 14px; border-top: 1px solid #eef0f2; background: #fafafb; }

/* três pontos de "pensando" na cor da marca */
.bfe-ia-dots i { background: var(--marca-600, #b21e4b) !important; }

/* Preencher com IA (painel do bloco): mesma cor e caixa do padrão */
.bfe-ia-toggle.is-on { --btn-bg: var(--marca-50, #fdf0f4); --btn-color: var(--marca-600, #b21e4b); }
.bfe-ia-msg.is-ia { background: #fafafb; border: 1px solid #eef0f2; color: #1f2123; }
.bfe-ia-msg.is-eu { background: var(--marca-50, #fdf0f4); border: 1px solid var(--marca-200, #f7d6e0); }
.bfe-ia-linha { border-radius: 16px; }
.bfe-ia-linha:focus-within { box-shadow: inset 0 0 0 1px var(--marca-600, #b21e4b), 0 0 0 3px rgb(var(--marca-600-rgb, 178 30 75) / .14); }
.bfe-ia-go { border-radius: 50%; background: linear-gradient(135deg, var(--marca-600, #b21e4b) 0%, var(--marca-500, #d23a67) 100%); }
.bfe-ia-go:hover { background: linear-gradient(135deg, var(--marca-700, #9c1a42) 0%, var(--marca-600, #b21e4b) 100%); }

/* modal Gerar fluxo: cabeçalho com o selo */
.bfe-modal-head .ia-mark { width: 38px; height: 38px; }

/* Modal "Gerar fluxo" com o mesmo acabamento dos outros modais do painel */
.bfe-modal-card { border: 1px solid #e6e8eb; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px -12px rgb(20 20 19 / .28); }
.bfe-modal-head { padding: 20px 60px 16px 24px; border-bottom: 1px solid #eef0f2; gap: 12px; position: relative; }
.bfe-modal-head .btn-close { position: absolute; top: 16px; right: 16px; }
.bfe-modal-head .ia-head-t .t { font-size: 19px; }
.bfe-modal-body { padding: 20px 24px; }
.bfe-modal-foot { justify-content: flex-end; padding: 12px 24px; border-top: 1px solid #eef0f2; background: #fafafb; }

/* Painéis da IA Alega rolam inteiros: cabeçalho fixo no topo, caixa de escrita
   fixa embaixo, e dicas, conversa e sugestões em sequência no meio. Antes eram
   três áreas que se espremiam, e as dicas da Verificação sumiam com a conversa. */
.bfe-fchat { overflow-y: auto; overscroll-behavior: contain; }
.bfe-fchat-head { position: sticky; top: 0; z-index: 3; background: #fff; }
.bfe-fchat-linha { position: sticky; bottom: 0; z-index: 3; }
.bfe-fchat-msgs { flex: none; overflow: visible; min-height: 120px; }
.bfe-mchat-checks { flex: none; max-height: none; }
.bfe-mchat-lista { overflow: visible; }
.bfe-fchat-exemplos { flex: none; }
/* enquanto a IA responde, as sugestões esperam */
.bfe-fchat.is-pensando .bfe-fchat-exemplos button { opacity: .45; pointer-events: none; }