/* ============================================================
   cadencias.css — namespace .cad-*
   ============================================================ */

.cad-page { display:flex; flex-direction:column; gap:18px; padding:8px 0; }

.cad-loading-sm, .cad-empty {
  padding:24px; text-align:center; color:var(--cf-text-3, #64748b); font-size:13px;
}

/* head */
.cad-head {
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  flex-wrap:wrap; padding:14px;
  background:#fff; border:1px solid var(--cf-border, #e2e8f0); border-radius:10px;
}
.cad-head-info strong { font-size:18px; font-family:'IBM Plex Sans', sans-serif; }
.cad-head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* templates */
.cad-section-title {
  font-size:11px; font-weight:600; color:var(--cf-text-3, #64748b);
  text-transform:uppercase; letter-spacing:0.5px; margin:0 0 12px 0;
}
.cad-templates-row {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;
}
.cad-tpl-card {
  background:#fff; border:1px solid var(--cf-border, #e2e8f0); border-radius:10px;
  padding:14px; cursor:pointer; text-align:left;
  display:flex; gap:12px; align-items:flex-start;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.cad-tpl-card:hover { border-color:var(--cf-brand, #1E5BAA); transform:translateY(-1px); box-shadow: 0 4px 12px rgba(14, 20, 36, 0.08); }
.cad-tpl-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cad-tpl-icon svg { stroke-width: 1.75; }
.cad-tpl-body { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.cad-tpl-name { font-size:13px; font-weight:600; color:var(--cf-text, #0f172a); }
.cad-tpl-desc { font-size:12px; color:var(--cf-text-3, #64748b); line-height:1.4; }
.cad-tpl-meta { font-size:11px; color:var(--cf-text-3, #94a3b8); margin-top:4px; }
.cad-card-cat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cad-card-cat-icon svg { stroke-width: 1.75; }

/* cards */
.cad-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.cad-card {
  background:#fff; border:1px solid var(--cf-border, #e2e8f0); border-radius:10px;
  padding:14px; cursor:pointer; transition: border-color .15s, transform .1s;
  display:flex; flex-direction:column; gap:10px;
}
.cad-card:hover { border-color:var(--cf-brand, #1E5BAA); transform:translateY(-1px); }
.cad-card-head { display:flex; justify-content:space-between; align-items:center; }
.cad-card-cat { font-size:13px; font-weight:500; color:var(--cf-text-2, #475569); }
.cad-card-body { display:flex; flex-direction:column; gap:4px; }
.cad-card-name { font-size:14px; font-weight:600; color:var(--cf-text, #0f172a); }
.cad-card-meta { font-size:11px; color:var(--cf-text-3, #64748b); }
.cad-card-foot { font-size:11px; color:var(--cf-text-3, #94a3b8); }

.cad-empty {
  text-align:center; padding:48px 24px;
  background:#f8fafc; border-radius:12px;
  border:2px dashed var(--cf-border, #e2e8f0);
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.cad-empty-icon { font-size:48px; }
.cad-empty-title { font-size:16px; font-weight:600; color:var(--cf-text, #0f172a); }
.cad-empty-msg { font-size:13px; color:var(--cf-text-3, #64748b); max-width:400px; }

/* pills + buttons */
.cad-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:500; }
.cad-pill-green { background:#dcfce7; color:#166534; }
.cad-pill-amber { background:#fef3c7; color:#92400e; }
.cad-pill-gray { background:#f1f5f9; color:#475569; }

.cad-btn-primary {
  background:var(--cf-brand, #1E5BAA); color:#fff; border:none;
  padding:8px 14px; border-radius:6px; font-size:13px; font-weight:500;
  cursor:pointer;
}
.cad-btn-ghost-sm {
  background:transparent; color:var(--cf-text-2, #475569);
  border:1px solid var(--cf-border, #e2e8f0);
  padding:5px 10px; border-radius:5px; font-size:12px; cursor:pointer;
}
.cad-btn-ghost-sm:hover { background:#f1f5f9; }

.cad-input {
  padding:9px 12px; border:1px solid var(--cf-border, #e2e8f0); border-radius:7px;
  font-size:13px; background:#fff;
}
.cad-input-sm { padding:6px 10px; font-size:12px; }

/* form base */
.cad-form { display:flex; flex-direction:column; gap:12px; }
.cad-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cad-label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--cf-text-2, #475569); }
.cad-textarea { resize:vertical; min-height:100px; font-family:inherit; }
.cad-toggle { display:inline-flex; gap:6px; align-items:center; cursor:pointer; font-size:13px; }
.cad-hint { font-size:11px; color:var(--cf-text-3, #94a3b8); margin:0; }
.cad-hint code { background:#0f172a; color:#fff; padding:2px 6px; border-radius:3px; font-size:10px; }

/* ============================================================
   CANVAS OVERLAY (full-screen editor)
   ============================================================ */

.cad-canvas-overlay {
  /* M55.B: elevado de 100 → 8900 pra ficar acima de drawers laterais
     mas abaixo de modais filhos (9999). Padronização global de z-index. */
  position:fixed; inset:0; z-index:8900;
  background:#f6f9fc;
  display:flex; flex-direction:column;
  animation: cadOverlayIn .25s ease-out;
}
@keyframes cadOverlayIn { from { opacity:0; } to { opacity:1; } }

.cad-canvas-topbar {
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding:8px 18px; background:#fff;
  border-bottom:1px solid #ecf0f4;
  gap:12px; min-height:56px;
}
.cad-canvas-topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.cad-canvas-topbar-center { display:flex; justify-content:center; }
.cad-canvas-topbar-right { display:flex; gap:6px; justify-content:flex-end; align-items:center; }

/* Bloco título: dot de status + nome editável + pencil + pill + subtitle */
.cad-canvas-title-block { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.cad-canvas-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
.cad-canvas-title-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.cad-canvas-rename {
  width:24px; height:24px; border-radius:5px;
  background:transparent; border:none; cursor:pointer;
  color:#94a3b8; display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.cad-canvas-rename:hover { background:#f1f5f9; color:#475569; }
.cad-canvas-subtitle { font-size:11px; color:#94a3b8; padding-left:17px; }

/* Botões da topbar */
.cad-topbar-btn {
  height:34px; padding:0 14px; border-radius:7px;
  font-size:13px; font-weight:500; cursor:pointer;
  font-family:inherit; transition: background .15s, border-color .15s;
}
.cad-topbar-btn-outline {
  background:#fff; color:#475569; border:1px solid #d1d9e0;
}
.cad-topbar-btn-outline:hover { background:#f8fafc; border-color:#94a3b8; }
.cad-topbar-btn-primary {
  background:var(--cf-brand, #1E5BAA); color:#fff; border:1px solid var(--cf-brand, #1E5BAA);
}
.cad-topbar-btn-primary:hover { background:#16498f; }
.cad-canvas-name-input {
  font-size:15px; font-weight:600; color:var(--cf-text, #0f172a);
  background:transparent; border:none; outline:none; padding:4px 6px;
  border-radius:5px; min-width:120px; max-width:320px;
  font-family: inherit;
}
.cad-canvas-name-input:hover, .cad-canvas-name-input:focus { background:#f1f5f9; }

.cad-canvas-main {
  flex:1; position:relative; display:flex; min-height:0;
}
.cad-canvas-main-insights { display:block; }

/* Painel lateral ESQUERDO — flutua sobre o canvas (estilo Clint) */
.cad-canvas-sidepanel {
  position:absolute; top:0; left:0; bottom:0; width:420px;
  background:#fff; border-right:1px solid #ecf0f4;
  display:flex; flex-direction:column; min-height:0;
  overflow:hidden; z-index:5;
  box-shadow: 2px 0 16px rgba(15,23,42,0.04);
  animation: cadPanelSlide .25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cadPanelSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.cad-canvas-sidepanel[hidden] { display:none; }

/* Quando painel abre, JS move o pan do canvas pra empurrar conteúdo pra direita */

/* Rail DIREITA — paleta vertical compacta (ícones coloridos) */
.cad-canvas-rail-wrap {
  position:absolute; top:14px; right:14px; bottom:14px; z-index:4;
  display:flex; align-items:flex-start;
}
.cad-rail {
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:8px 6px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.cad-rail-collapse {
  width:32px; height:24px; border:none; background:transparent;
  border-radius:5px; cursor:pointer; color:#94a3b8;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px; transition: background .15s;
}
.cad-rail-collapse:hover { background:#f1f5f9; color:#475569; }
.cad-rail-item {
  width:42px; height:42px; border:none; background:transparent;
  border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, transform .12s;
}
.cad-rail-item:hover { background:#f8fafc; transform: translateY(-1px); }
.cad-rail-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.cad-rail-icon svg { stroke-width: 1.75; }

.cad-canvas-toolbox {
  background:#fff; border-right:1px solid var(--cf-border, #e2e8f0);
  display:flex; flex-direction:column; min-height:0;
}
.cad-toolbox-tabs { display:flex; border-bottom:1px solid var(--cf-border, #e2e8f0); }
.cad-toolbox-tab {
  flex:1; padding:10px; background:transparent; border:none; cursor:pointer;
  font-size:12px; font-weight:500; color:var(--cf-text-3, #64748b);
  border-bottom:2px solid transparent;
}
.cad-toolbox-tab.active { color:var(--cf-brand, #1E5BAA); border-bottom-color:var(--cf-brand, #1E5BAA); }
.cad-toolbox-content { padding:12px; overflow-y:auto; flex:1; }
.cad-toolbox-hint { font-size:11px; color:var(--cf-text-3, #94a3b8); margin:0 0 10px 0; }

.cad-palette { display:flex; flex-direction:column; gap:6px; }
.cad-palette-item {
  display:flex; gap:10px; align-items:center; padding:10px;
  background:#f8fafc; border:1px solid var(--cf-border, #e2e8f0); border-radius:8px;
  cursor:pointer; text-align:left; transition: border-color .15s, transform .1s;
}
.cad-palette-item:hover { border-color:var(--cf-brand, #1E5BAA); transform:translateX(2px); }
.cad-palette-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cad-palette-icon svg { stroke-width: 1.75; }
.cad-palette-label { font-size:13px; font-weight:600; color:var(--cf-text, #0f172a); }
.cad-palette-desc { font-size:11px; color:var(--cf-text-3, #94a3b8); }

.cad-vars-list { display:flex; flex-direction:column; gap:8px; }
.cad-vars-group summary {
  font-size:11px; font-weight:600; color:var(--cf-text-3, #64748b);
  text-transform:uppercase; letter-spacing:0.5px; cursor:pointer;
  padding:6px; background:#f1f5f9; border-radius:4px;
}
.cad-var-item {
  display:flex; flex-direction:column; gap:2px; padding:8px 10px;
  background:transparent; border:none; cursor:pointer;
  width:100%; text-align:left; border-radius:4px;
  margin-top:2px;
}
.cad-var-item:hover { background:#f8fafc; }
.cad-var-item code {
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  color:var(--cf-brand, #1E5BAA);
}
.cad-var-item small { font-size:10px; color:var(--cf-text-3, #94a3b8); }

/* canvas area */
.cad-canvas-area {
  position:relative; flex:1;
  background:
    radial-gradient(circle, #e2e8f0 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #f5f9fd 0%, #f0f5fb 100%);
  overflow:hidden;
}
.cad-canvas-svg { display:block; user-select:none; }
.cad-canvas-controls {
  position:absolute; left:14px; bottom:14px; z-index:6;
  display:flex; flex-direction:column; gap:4px; background:#fff;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:5px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.cad-canvas-control {
  width:30px; height:30px; border:none; background:transparent;
  cursor:pointer; font-size:14px; border-radius:6px; color:#475569;
  display:flex; align-items:center; justify-content:center;
}
.cad-canvas-control:hover { background:#f1f5f9; }
.cad-canvas-zoom-label {
  font-size:10px; color:var(--cf-text-3, #94a3b8);
  display:flex; align-items:center; justify-content:center; padding:2px 0;
  font-family:'IBM Plex Mono', monospace;
}

/* ─── CARDS NO CANVAS (estilo Clint via foreignObject) ─── */
.cad-svg-node { transition: opacity .15s; }
.cad-svg-node-bg {
  filter: drop-shadow(0 1px 2px rgba(15,23,42,0.04));
  transition: filter .15s, stroke .15s;
}
.cad-svg-node:hover .cad-svg-node-bg {
  filter: drop-shadow(0 4px 14px rgba(15,23,42,0.10));
}

/* Toolbar flutuante (duplicar/excluir) — só visível no hover */
.cad-node-toolbar { opacity:0; transition: opacity .15s; pointer-events:none; overflow:visible; }
.cad-svg-node:hover .cad-node-toolbar,
.cad-svg-node.on .cad-node-toolbar { opacity:1; pointer-events:all; }
.cad-node-toolbar-inner {
  display:flex; gap:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:7px;
  padding:2px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.10);
  width: fit-content;
}
.cad-node-tb-btn {
  width:24px; height:22px; border:none; background:transparent;
  border-radius:4px; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:#64748b; transition: background .15s, color .15s;
}
.cad-node-tb-btn:hover { background:#f1f5f9; color:#0f172a; }
.cad-node-tb-btn-danger:hover { background:#fee2e2; color:#dc2626; }
.cad-node-tb-btn svg { width:13px; height:13px; stroke-width:1.75; }

/* Conteúdo HTML dentro do foreignObject */
.cad-node-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px; color: #334155;
  padding: 12px 16px 8px 16px;
  display: flex; flex-direction: column; gap: 8px;
  line-height: 1.4;
}
.cad-node-body code {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  background: #f1f5f9; color: #475569; padding: 1px 5px; border-radius: 3px;
}
.cad-node-line { font-size: 11px; color: #64748b; }
.cad-node-meta {
  font-size: 10px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.cad-node-empty { font-size: 11px; color: #94a3b8; font-style: italic; }
.cad-node-add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: #f1f5f9; border-radius: 6px;
  font-size: 11px; color: #64748b; align-self: flex-start;
}
.cad-node-add svg { width: 12px; height: 12px; }

.cad-node-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: #f1f5f9; border-radius: 14px;
  font-size: 11px; color: #475569; align-self: flex-start;
  font-weight: 500;
}
.cad-node-chip svg { width: 12px; height: 12px; color: #64748b; }
.cad-node-chip-light { background: transparent; padding: 0; }

.cad-node-text {
  font-size: 12px; color: #334155;
  background: #f8fafc; border-radius: 6px;
  padding: 8px 10px; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: break-word;
}
.cad-node-text-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

.cad-node-cond {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: 11.5px;
}
.cad-node-cond-op { color: #64748b; font-style: italic; }

.cad-node-wait, .cad-node-action, .cad-node-block-delay,
.cad-node-block-media, .cad-node-block-save {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #475569;
  background: #fef9e6; border-radius: 6px;
  padding: 6px 10px;
}
.cad-node-wait { background: #fef3c7; color: #92400e; }
.cad-node-wait svg { color: #92400e; }
.cad-node-action { background: #fce7f3; color: #9f1239; }
.cad-node-action svg { color: #9f1239; }
.cad-node-block-delay { background: #fee2e2; color: #b91c1c; }
.cad-node-block-delay svg { color: #b91c1c; }
.cad-node-block-media { background: #dbeafe; color: #1e40af; }
.cad-node-block-media svg { color: #1e40af; }
.cad-node-block-save { background: #d1fae5; color: #065f46; }
.cad-node-block-save svg { color: #065f46; }
.cad-node-block-buttons { display: flex; flex-direction: column; gap: 4px; }
.cad-node-btn-preview {
  text-align: center; padding: 5px;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 5px;
  font-size: 11px; color: #1e5baa; font-weight: 500;
}

/* SVG ports + edges */
.cad-svg-port { transition: r .12s; }
.cad-svg-port:hover { r: 8; }
.cad-svg-port-out:hover { fill:#fff; stroke-width:3; }
.cad-svg-edge:hover path[stroke="#cbd5e1"] { stroke:#1e5baa; stroke-dasharray:none; }

/* test result modal */
.cad-test-result { display:flex; flex-direction:column; gap:14px; }
.cad-test-stats { display:flex; gap:14px; }
.cad-test-stats div { padding:10px 14px; background:#f8fafc; border-radius:8px; font-size:13px; }
.cad-test-stats strong { font-size:18px; color:var(--cf-brand, #1E5BAA); display:block; }
.cad-test-path {
  background:#0f172a; color:#cbd5e1; padding:14px; border-radius:6px;
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  overflow-x:auto; max-height:400px; overflow-y:auto;
  white-space:pre-wrap; line-height:1.6;
}
.cad-warn { color:#f59e0b; font-size:13px; margin:0; }

/* ============================================================
   NODE PANEL (.np-*) — painel lateral esquerdo (estilo Clint)
   Substitui o modal central de configuração do nó
   ============================================================ */

.np-panel {
  display:flex; flex-direction:column; height:100%;
  background:#fff;
}

/* Header colorido pastel pelo tipo de nó (cor inline via style) */
.np-head {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; flex-shrink:0;
}
.np-head-icon {
  width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:#fff;
}
.np-head-label { font-size:15px; font-weight:600; }

/* Footer fixo Cancelar | Salvar (estilo Clint) */
.np-foot {
  flex-shrink:0; padding:12px 18px; background:#fff;
  border-top:1px solid #ecf0f4;
  display:flex; justify-content:flex-end; gap:8px;
}
.np-foot-btn {
  height:36px; padding:0 16px; border-radius:7px;
  font-size:13px; font-weight:500; cursor:pointer;
  font-family:inherit; transition: background .15s, border-color .15s;
}
.np-foot-btn-ghost {
  background:#fff; color:#475569; border:1px solid #d1d9e0;
}
.np-foot-btn-ghost:hover { background:#f8fafc; }
.np-foot-btn-primary {
  background:var(--cf-brand, #1E5BAA); color:#fff; border:1px solid var(--cf-brand, #1E5BAA);
}
.np-foot-btn-primary:hover { background:#16498f; }

.np-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:22px 22px 28px 22px; display:flex; flex-direction:column; gap:22px;
  background:#fff;
}

/* sections */
.np-section { display:flex; flex-direction:column; gap:8px; }
.np-section-label {
  font-size:11px; font-weight:600; color:var(--cf-text-3, #64748b);
  text-transform:uppercase; letter-spacing:0.5px;
}
.np-hint { font-size:11px; color:var(--cf-text-3, #94a3b8); line-height:1.4; }
.np-hint code {
  font-family:'IBM Plex Mono', monospace; background:#0f172a; color:#fff;
  padding:1px 5px; border-radius:3px; font-size:10px;
}
.np-hint b { color:var(--cf-text-2, #475569); }

/* inputs */
.np-input, .np-textarea {
  padding:9px 11px; border:1px solid var(--cf-border, #e2e8f0); border-radius:7px;
  font-size:13px; background:#fff; width:100%;
  font-family:inherit; color:var(--cf-text, #0f172a);
  transition: border-color .15s, box-shadow .15s;
}
.np-input:focus, .np-textarea:focus {
  outline:none; border-color:var(--cf-brand, #1E5BAA);
  box-shadow:0 0 0 3px rgba(30,91,170,0.12);
}
.np-textarea { resize:vertical; min-height:60px; line-height:1.5; }
.np-input-narrow { width:90px; }
.np-input-sm { padding:6px 10px; font-size:12px; }
.np-row { display:flex; gap:8px; align-items:center; }
.np-row-tight { gap:6px; }
.np-row-label { font-size:13px; color:var(--cf-text-2, #475569); }

.np-check {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; color:var(--cf-text-2, #475569);
}
.np-check input { width:15px; height:15px; cursor:pointer; }

/* radio cards (gatilho, fim) */
.np-radio-list { display:flex; flex-direction:column; gap:6px; }
.np-radio-card {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1px solid var(--cf-border, #e2e8f0); border-radius:8px;
  background:#fff; cursor:pointer;
  transition: border-color .15s, background .15s;
}
.np-radio-card:hover { border-color:#cbd5e1; }
.np-radio-card.on {
  border-color:var(--cf-brand, #1E5BAA);
  background:#f0f6ff;
}
.np-radio-card input { margin-top:2px; cursor:pointer; }
.np-radio-card-text { display:flex; flex-direction:column; gap:2px; }
.np-radio-card-title { font-size:13px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-radio-card-desc { font-size:11px; color:var(--cf-text-3, #94a3b8); line-height:1.4; }

/* info card */
.np-info-card {
  display:flex; gap:8px; align-items:flex-start;
  padding:10px 12px; border-radius:8px;
  background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af;
  font-size:12px; line-height:1.5;
}
.np-info-card svg { flex-shrink:0; margin-top:2px; }
.np-info-card-warn { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.np-info-card-info { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.np-tag { padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; }
.np-tag-ok { background:#dcfce7; color:#166534; }
.np-tag-no { background:#fee2e2; color:#991b1b; }

/* botões compactos do painel */
.np-btn-icon-ghost {
  width:32px; height:32px; border-radius:7px;
  background:transparent; border:1px solid transparent;
  color:#475569; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s;
}
.np-btn-icon-ghost:hover { background:#f1f5f9; border-color:var(--cf-border, #e2e8f0); }

.np-btn-ghost-sm {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--cf-border, #e2e8f0); border-radius:6px;
  background:#fff; color:var(--cf-text-2, #475569);
  font-size:12px; font-weight:500; cursor:pointer;
  transition: background .15s, border-color .15s;
}
.np-btn-ghost-sm:hover { background:#f8fafc; border-color:#cbd5e1; }

.np-btn-ghost-xs {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px; border:none; border-radius:5px;
  background:transparent; color:var(--cf-brand, #1E5BAA);
  font-size:11px; font-weight:500; cursor:pointer;
  transition: background .15s;
}
.np-btn-ghost-xs:hover { background:#eff6ff; }
.np-btn-ghost-xs:disabled { color:#94a3b8; cursor:not-allowed; }

.np-btn-primary-sm {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border:none; border-radius:6px;
  background:var(--cf-brand, #1E5BAA); color:#fff;
  font-size:12px; font-weight:600; cursor:pointer;
  transition: background .15s, transform .1s;
}
.np-btn-primary-sm:hover { background:#16498f; }

.np-btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border:1px solid var(--cf-border, #e2e8f0); border-radius:7px;
  background:#fff; color:var(--cf-text, #0f172a);
  font-size:13px; font-weight:500; cursor:pointer;
  transition: border-color .15s, background .15s;
}
.np-btn-secondary:hover { border-color:var(--cf-brand, #1E5BAA); background:#f8fafc; }
.np-btn-block { width:100%; }

/* ─── window panes (Fora/Dentro da janela 24h) — estilo Clint ─── */
.np-window {
  border:1px solid #e8edf2; border-radius:8px;
  background:#fff; overflow:hidden;
  margin-top:8px;
}
.np-window-head {
  display:flex; align-items:center; gap:8px;
  padding:11px 12px; cursor:pointer; user-select:none;
  font-size:13px; color:#475569;
  list-style:none;
}
.np-window-head::-webkit-details-marker { display:none; }
.np-window-head::after {
  content: ''; display:inline-block; margin-left:auto;
  width:7px; height:7px; border-right:1.5px solid #94a3b8; border-bottom:1.5px solid #94a3b8;
  transform: rotate(45deg); transition: transform .15s;
}
.np-window[open] .np-window-head::after { transform: rotate(225deg); border-color: var(--cf-brand, #1E5BAA); margin-top:4px; }
.np-window-title { font-weight:500; color:#334155; flex:1; }
.np-window-tag { display:none; } /* ocultas — clutter visual */
.np-window-body { padding:12px; display:flex; flex-direction:column; gap:8px; }

/* "+ Selecionar modelo" botão pontilhado fantasma estilo Clint */
.np-window-body select.np-input ~ button[data-act="manage-templates"] { display:none; }

/* ─── sequência de blocos de mensagem ─── */
.np-sequence { display:flex; flex-direction:column; gap:6px; }
.np-seq-empty {
  padding:14px; text-align:center; font-size:11px; color:var(--cf-text-3, #94a3b8);
  border:1px dashed var(--cf-border, #e2e8f0); border-radius:6px;
}

/* Bloco estilo Clint: SEM header colorido, X no canto sup-dir, drag handle direita */
.np-block {
  position: relative;
  border:1px solid #e8edf2; border-radius:7px;
  background:#fff;
  padding-right: 18px; /* espaço pro side handle */
  transition: border-color .15s, box-shadow .15s;
}
.np-block:hover { border-color:#cbd5e1; }

.np-block-x {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border: none; border-radius: 4px;
  background: transparent; color: #94a3b8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
  z-index: 2;
}
.np-block:hover .np-block-x { opacity: 1; }
.np-block-x:hover { background: #fee2e2; color: #dc2626; }

.np-block-side {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  opacity: 0; transition: opacity .15s;
}
.np-block:hover .np-block-side { opacity: 1; }
.np-block-side-btn {
  width: 16px; height: 14px; border: none; border-radius: 3px;
  background: transparent; color: #94a3b8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.np-block-side-btn:hover { background: #e2e8f0; color: #475569; }
.np-block-side-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.np-block-grip { color: #cbd5e1; cursor: grab; padding: 1px 0; }

.np-block-body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.np-block-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 22px); margin: 0 12px 10px 12px;
  padding: 9px; background: transparent;
  border: 1px dashed #c7d2e0; border-radius: 6px;
  font-size: 12.5px; color: var(--cf-brand, #1E5BAA);
  font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.np-block-cta:hover { border-color: var(--cf-brand, #1E5BAA); background: #f0f6ff; }

.np-list-items { display:flex; flex-direction:column; gap:5px; }
.np-list-item { display:flex; gap:5px; align-items:center; }

/* ─── pickers de blocos (2 colunas horizontais — label esq, ícone dir) ─── */
.np-blocks-picker { margin-top:8px; }
.np-blocks-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.np-block-pick {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px;
  background:#fff; border:1px solid #e8edf2; border-radius:7px;
  color:#334155; cursor:pointer;
  font-size:13px; font-weight:500;
  transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
}
.np-block-pick:hover {
  border-color:var(--cf-brand, #1E5BAA); background:#f8fbff;
  color:var(--cf-brand, #1E5BAA);
}
.np-block-pick:hover .np-block-pick-icon { color:var(--cf-brand, #1E5BAA); }
.np-block-pick-label { text-align:left; }
.np-block-pick-icon { color:#94a3b8; flex-shrink:0; transition: color .15s; }
.np-block-pick svg { stroke-width: 1.75; }

/* ─── action picker preview ─── */
.np-action-preview {
  padding:10px 12px; border:1px solid var(--cf-border, #e2e8f0); border-radius:7px;
  background:#fff; margin-bottom:8px;
}
.np-action-preview-cat {
  font-size:10px; color:var(--cf-text-3, #94a3b8); text-transform:uppercase;
  letter-spacing:0.5px; font-weight:600; margin-bottom:2px;
}
.np-action-preview-label {
  font-size:13px; font-weight:600; color:var(--cf-text, #0f172a);
}

/* ─── action modal (categorizado) ─── */
.np-action-modal { width:780px !important; max-width:calc(100vw - 32px); }
.np-action-modal-body {
  display:grid; grid-template-columns:200px 1fr;
  height:480px; max-height:65vh; overflow:hidden;
}
.np-action-cats {
  display:flex; flex-direction:column; gap:2px;
  padding:14px 8px; border-right:1px solid var(--cf-border, #e2e8f0);
  background:#f8fafc; overflow-y:auto;
}
.np-action-cat {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:none; border-radius:7px;
  background:transparent; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--cf-text-2, #475569);
  text-align:left; transition: background .15s, color .15s;
}
.np-action-cat:hover { background:#fff; color:var(--cf-text, #0f172a); }
.np-action-cat.on { background:#fff; color:var(--cf-brand, #1E5BAA); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.np-action-cat-icon {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.np-action-list { padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.np-action-list-head { display:flex; align-items:center; gap:12px; }
.np-action-list-title { font-size:15px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-action-list-count { font-size:11px; color:var(--cf-text-3, #94a3b8); margin-top:2px; }
.np-action-items { display:flex; flex-direction:column; gap:6px; }
.np-action-item {
  display:flex; gap:12px; align-items:center;
  padding:12px 14px; border:1px solid var(--cf-border, #e2e8f0); border-radius:8px;
  background:#fff; cursor:pointer;
  text-align:left; transition: border-color .15s, background .15s, transform .1s;
}
.np-action-item:hover {
  border-color:var(--cf-brand, #1E5BAA); background:#f8fafc;
  transform:translateX(2px);
}
.np-action-item.on { border-color:var(--cf-brand, #1E5BAA); background:#f0f6ff; }
.np-action-item-icon {
  width:36px; height:36px; border-radius:8px;
  background:#f1f5f9; color:var(--cf-text-2, #475569);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.np-action-item-text { flex:1; }
.np-action-item-label { font-size:13px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-action-item-desc { font-size:11px; color:var(--cf-text-3, #94a3b8); margin-top:2px; line-height:1.4; }

/* ─── variable picker ─── */
.np-var-group { border-bottom:1px solid var(--cf-border, #e2e8f0); padding:6px 0; }
.np-var-group:last-child { border-bottom:none; }
.np-var-group-head {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:var(--cf-text-3, #64748b);
  text-transform:uppercase; letter-spacing:0.5px;
  cursor:pointer; padding:6px 4px; list-style:none;
}
.np-var-group-head::-webkit-details-marker { display:none; }
.np-var-list { display:flex; flex-direction:column; gap:2px; padding:4px 0; }
.np-var-item {
  display:flex; flex-direction:column; gap:2px;
  padding:7px 10px; border-radius:5px;
  background:transparent; border:none; cursor:pointer;
  text-align:left; transition: background .15s;
}
.np-var-item:hover { background:#f8fafc; }
.np-var-item code {
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  color:var(--cf-brand, #1E5BAA);
}
.np-var-item small { font-size:10px; color:var(--cf-text-3, #94a3b8); }

/* ─── test (dry run) modal ─── */
.np-test-stats { display:flex; gap:10px; margin-bottom:14px; }
.np-test-stat {
  flex:1; padding:12px 14px; background:#f8fafc; border-radius:7px;
  display:flex; flex-direction:column; gap:2px;
}
.np-test-stat strong { font-size:20px; font-family:'IBM Plex Sans', sans-serif; color:var(--cf-brand, #1E5BAA); }
.np-test-stat span { font-size:11px; color:var(--cf-text-3, #64748b); }
.np-test-path {
  display:flex; flex-direction:column; gap:4px;
  max-height:380px; overflow-y:auto;
  padding:8px; background:#f8fafc; border-radius:6px;
}
.np-test-step {
  display:flex; gap:10px; align-items:center;
  padding:8px 10px; background:#fff; border-radius:5px;
  font-size:12px;
}
.np-test-step-num {
  width:22px; height:22px; border-radius:50%;
  background:var(--cf-brand, #1E5BAA); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; flex-shrink:0;
}
.np-test-step-info { color:var(--cf-text, #0f172a); }

/* ─── INSIGHTS PANEL ─── */
.cad-canvas-insights {
  flex:1; overflow-y:auto;
  /* Sessão 134: full-width sem max-width */
  padding:24px 32px;
  display:flex; flex-direction:column; gap:20px;
  background:#f8fafc;
  width:100%;
}
.np-insights { display:flex; flex-direction:column; gap:18px; }
.np-insights-head { display:flex; justify-content:space-between; align-items:flex-start; }
.np-insights-title { font-size:18px; font-weight:600; margin:0; font-family:'IBM Plex Sans', sans-serif; }
.np-insights-subtitle { font-size:12px; color:var(--cf-text-3, #64748b); margin:4px 0 0 0; }

.np-insights-kpis {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
.np-kpi-card {
  display:flex; gap:12px; align-items:center;
  padding:14px 16px; background:#fff; border-radius:9px;
  border:1px solid var(--cf-border, #e2e8f0);
}
.np-kpi-icon {
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.np-kpi-text { display:flex; flex-direction:column; gap:1px; }
.np-kpi-label { font-size:11px; color:var(--cf-text-3, #64748b); text-transform:uppercase; letter-spacing:0.4px; font-weight:500; }
.np-kpi-value { font-size:22px; font-weight:600; font-family:'IBM Plex Sans', sans-serif; color:var(--cf-text, #0f172a); }

.np-insights-section {
  background:#fff; border:1px solid var(--cf-border, #e2e8f0); border-radius:10px;
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.np-insights-section-head h4 { margin:0; font-size:14px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-insights-section-desc { font-size:11px; color:var(--cf-text-3, #94a3b8); margin:3px 0 0 0; }

.np-insights-flow { display:flex; flex-direction:column; gap:8px; }
.np-empty-sm {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:32px; color:var(--cf-text-3, #94a3b8);
  text-align:center; font-size:12px;
}

.np-insights-nodes-list { display:flex; flex-direction:column; gap:6px; }
.np-insights-node {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; background:#f8fafc; border-radius:7px;
}
.np-insights-node-icon {
  width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.np-insights-node-info { flex:1; min-width:0; }
.np-insights-node-label { font-size:13px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-insights-node-metrics { display:flex; gap:10px; font-size:11px; color:var(--cf-text-3, #94a3b8); margin-top:2px; flex-wrap:wrap; }
.np-insights-node-pass { color:var(--cf-brand, #1E5BAA); font-weight:500; }
.np-insights-node-metric { display:inline-flex; align-items:center; gap:3px; }
.np-insights-node-bar {
  width:130px; height:18px; background:#e2e8f0; border-radius:9px;
  position:relative; overflow:hidden; flex-shrink:0;
}
.np-insights-node-bar-fill { height:100%; transition: width .3s ease-out; }
.np-insights-node-bar-pct {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:var(--cf-text-2, #475569);
}

.np-empty {
  padding:24px; text-align:center; color:var(--cf-text-3, #64748b); font-size:12px;
}

/* ════════════════════════════════════════════════════════════════
   TRIGGER PICKER (estilo Clint: 4 categorias + lista de gatilhos)
   ════════════════════════════════════════════════════════════════ */

.np-trigger-picker { display:flex; flex-direction:column; gap:14px; }
.np-trigger-pick-head { padding:0 0 4px 0; }
.np-trigger-pick-title { font-size:18px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-trigger-pick-body {
  display:grid; grid-template-columns:128px 1fr; gap:14px;
  align-items:start;
}
@media (max-width: 600px) { .np-trigger-pick-body { grid-template-columns: 1fr; } }

.np-trigger-cats {
  display:flex; flex-direction:column; gap:2px;
  padding:0;
}
.np-trigger-cat {
  display:flex; align-items:center; gap:8px;
  padding:8px 9px; border:none; border-radius:7px;
  background:transparent; cursor:pointer;
  font-size:12.5px; font-weight:500; color:#475569;
  text-align:left; transition: background .15s, color .15s;
  position:relative;
}
.np-trigger-cat-label { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-trigger-cat:hover { background:#f8fafc; color:var(--cf-text, #0f172a); }
.np-trigger-cat.on { background:#f0f6ff; color:var(--cf-brand, #1E5BAA); font-weight:600; }
.np-trigger-cat-icon {
  width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.np-trigger-cat-tag {
  font-size:10px; padding:1px 6px; border-radius:4px;
  background:#dbeafe; color:#1e40af; font-weight:600;
  margin-left:auto;
}

.np-trigger-list { display:flex; flex-direction:column; gap:12px; }
.np-trigger-list-head { display:flex; flex-direction:column; gap:2px; }
.np-trigger-list-title { font-size:15px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-trigger-list-desc { font-size:12px; color:var(--cf-text-3, #94a3b8); }
.np-trigger-items { display:flex; flex-direction:column; gap:6px; }
.np-trigger-item {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1px solid #e8edf2; border-radius:8px;
  background:#fff; cursor:pointer; min-width:0;
  text-align:left; transition: border-color .15s, background .15s, transform .1s;
}
.np-trigger-item:hover {
  border-color:var(--cf-brand, #1E5BAA); background:#f8fbff;
  transform:translateX(2px);
}
.np-trigger-item-icon {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.np-trigger-item-text { flex:1; min-width:0; }
.np-trigger-item-label {
  font-size:13px; font-weight:600; color:var(--cf-text, #0f172a);
  line-height:1.3;
}
.np-trigger-item-desc {
  font-size:11.5px; color:var(--cf-text-3, #94a3b8); margin-top:3px;
  line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ─── trigger form (após escolha) ─── */
.np-trigger-form-head {
  display:flex; align-items:center; gap:10px;
  padding-bottom:12px; border-bottom:1px solid #ecf0f4;
  margin-bottom:14px;
}
.np-trigger-back {
  width:24px; height:24px; border:none; border-radius:5px;
  background:transparent; cursor:pointer; color:#64748b;
  display:flex; align-items:center; justify-content:center;
}
.np-trigger-back:hover { background:#f1f5f9; color:#1e5baa; }
.np-trigger-form-icon { display:flex; }
.np-trigger-form-title { font-size:15px; font-weight:600; color:var(--cf-text, #0f172a); }
.np-trigger-form-body { display:flex; flex-direction:column; gap:14px; }

.np-form-row { display:flex; flex-direction:column; gap:6px; }
.np-form-label { font-size:12.5px; font-weight:500; color:var(--cf-text-2, #475569); display:flex; align-items:center; gap:5px; }

/* botão imitando input com chevron */
.np-input-as-button {
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; background:#fff; border:1px solid #e2e8f0; border-radius:7px;
  cursor:pointer; font-size:13px; color:var(--cf-text, #0f172a);
  font-family:inherit; text-align:left;
  transition: border-color .15s;
}
.np-input-as-button:hover { border-color:#cbd5e1; }
.np-input-placeholder { color:#94a3b8; }
.np-input-clear {
  width:20px; height:20px; border:none; border-radius:4px;
  background:transparent; color:#94a3b8; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  margin-left:auto;
}
.np-input-clear:hover { background:#fee2e2; color:#dc2626; }

/* link-style select (azul sublinhado, estilo Clint "Foi alterado e é igual a") */
.np-input-link {
  background:transparent !important; border:none !important;
  color:var(--cf-brand, #1E5BAA) !important; padding:2px 0 !important;
  border-bottom:1px dashed var(--cf-brand, #1E5BAA) !important; border-radius:0 !important;
  width:auto !important; font-size:12.5px !important; cursor:pointer !important;
}
.np-input-link-btn { font-family:inherit; font-weight:500; }

/* tabs (Mensagem | Dispositivo) estilo Clint */
.np-tabs {
  display:flex; gap:0; border-bottom:1px solid #ecf0f4;
  margin-bottom:8px;
}
.np-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; border:none; background:transparent;
  cursor:pointer; font-size:13px; font-weight:500; color:#94a3b8;
  border-bottom:2px solid transparent;
  font-family:inherit;
  transition: color .15s, border-color .15s;
}
.np-tab:hover { color:#475569; }
.np-tab.on { color:var(--cf-brand, #1E5BAA); border-bottom-color:var(--cf-brand, #1E5BAA); }

/* status list (Aberto / Ganho / Perdido) */
.np-status-list { display:flex; flex-direction:column; gap:4px; padding:6px; background:#f8fafc; border-radius:7px; }
.np-status-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:none; border-radius:5px;
  background:transparent; cursor:pointer;
  font-size:13px; color:var(--cf-text, #0f172a);
  text-align:left; font-family:inherit;
  transition: background .15s;
}
.np-status-item:hover { background:#f1f5f9; }
.np-status-item.on { background:#dbeafe; font-weight:600; }

/* CTA centralizado (Conectar com Facebook) */
.np-cta-center { display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 0; }
.np-btn-primary-full {
  background:var(--cf-brand, #1E5BAA); color:#fff; border:none;
  padding:11px 22px; border-radius:6px;
  font-size:13px; font-weight:500; cursor:pointer;
  font-family:inherit; transition: background .15s;
}
.np-btn-primary-full:hover { background:#16498f; }

/* ════════════════════════════════════════════════════════════════
   MULTI-SELECT MODAL (origens, etapas) — estilo Clint 2 colunas
   ════════════════════════════════════════════════════════════════ */

.np-msel-modal { width: 640px !important; max-width: calc(100vw - 32px); }
.np-msel-body {
  display:grid; grid-template-columns: 1fr 1fr;
  height:380px; max-height:60vh;
}
.np-msel-list-wrap {
  border-right:1px solid #ecf0f4;
  display:flex; flex-direction:column; min-height:0;
}
.np-msel-search {
  padding:12px; position:relative; flex-shrink:0;
}
.np-msel-search .np-input { padding-right:32px; }
.np-msel-search > i {
  position:absolute; right:22px; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none;
}
.np-msel-list { flex:1; overflow-y:auto; padding:0 8px 12px 12px; display:flex; flex-direction:column; gap:10px; }
.np-msel-group { display:flex; flex-direction:column; gap:1px; }
.np-msel-group-head {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:var(--cf-text-3, #64748b);
  padding:5px 0;
}
.np-msel-group-tag {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:4px;
  font-size:9px; font-weight:700; color:#fff;
}
.np-msel-item {
  padding:8px 10px; border:none; border-radius:5px;
  background:transparent; cursor:pointer;
  font-size:13px; color:var(--cf-text, #0f172a);
  text-align:left; font-family:inherit;
}
.np-msel-item:hover { background:#f1f5f9; }
.np-msel-item.on { background:#dbeafe; color:var(--cf-brand, #1E5BAA); font-weight:500; }

.np-msel-selected-wrap {
  display:flex; flex-direction:column; min-height:0;
  padding:12px;
}
.np-msel-selected-head {
  font-size:13px; font-weight:600; color:var(--cf-text, #0f172a);
  margin-bottom:10px;
}
.np-msel-selected { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:5px; }
.np-msel-selected-empty { font-size:12px; color:#94a3b8; }
.np-msel-chip {
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; background:#f1f5f9; border-radius:5px;
  font-size:12.5px; color:var(--cf-text, #0f172a);
}
.np-msel-chip-x {
  width:18px; height:18px; border:none; border-radius:3px;
  background:transparent; color:#94a3b8; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  margin-left:auto;
}
.np-msel-chip-x:hover { background:#fee2e2; color:#dc2626; }

.np-fp-cat {
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border:none; border-radius:6px;
  background:transparent; cursor:pointer;
  font-size:13px; color:#475569; text-align:left;
  width:calc(100% - 16px); margin: 0 8px; font-family:inherit;
}
.np-fp-cat:hover { background:#f8fafc; color:var(--cf-text, #0f172a); }
.np-fp-cat.on { background:#f0f6ff; color:var(--cf-brand, #1E5BAA); font-weight:600; }

/* ════════════════════════════════════════════════════════════════
   DROPZONES (mídia: imagem/áudio/vídeo/arquivo)
   ════════════════════════════════════════════════════════════════ */

.np-dropzone {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:24px 16px; border-radius:7px;
  background:#fafbfc; border:1px dashed #cbd5e1;
  color:var(--cf-brand, #1E5BAA); cursor:pointer;
  transition: background .15s, border-color .15s;
}
.np-dropzone:hover { background:#f0f6ff; border-color:var(--cf-brand, #1E5BAA); }
.np-dropzone svg { color:#94a3b8; }
.np-dropzone:hover svg { color:var(--cf-brand, #1E5BAA); }
.np-dropzone-label { font-size:13px; font-weight:500; }

/* ════════════════════════════════════════════════════════════════
   SAVE DATA BLOCK (especial: textarea + Resposta + Salvar em + aviso)
   ════════════════════════════════════════════════════════════════ */

.np-save-meta {
  display:flex; flex-direction:column; gap:6px;
  padding:0 2px;
}
.np-save-meta-row {
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--cf-text-2, #475569);
}
.np-save-warn {
  display:flex; align-items:flex-start; gap:6px;
  font-size:11.5px; color:#b45309;
  margin-top:4px;
}
.np-save-warn svg { flex-shrink:0; margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   LIST BLOCK (Lista de mensagem com seções)
   ════════════════════════════════════════════════════════════════ */

.np-block-cta-static {
  cursor:default !important; opacity: 0.7;
  pointer-events:none;
}
.np-list-popup-hint {
  font-size:11px; color:#94a3b8; text-align:center;
  margin: -4px 0 4px 0;
}
.np-list-section {
  display:flex; flex-direction:column; gap:6px;
  padding:8px; background:#f8fafc; border-radius:6px;
  margin-top:4px;
}
.np-list-options { display:flex; flex-direction:column; gap:4px; }
.np-list-option {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; background:#fff; border:none; border-radius:5px;
  cursor:pointer; font-size:13px; color:var(--cf-text, #0f172a);
  font-family:inherit; text-align:left;
  transition: background .15s;
}
.np-list-option:hover { background:#f1f5f9; }
.np-block-cta-mini {
  font-size:12px; padding:7px;
  margin: 4px 0 0 0; width:100%;
}
.np-btn-link {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:none; cursor:pointer;
  color:var(--cf-brand, #1E5BAA); font-size:12.5px; font-weight:500;
  padding:6px 0; font-family:inherit;
}
.np-btn-link:hover { text-decoration:underline; }

/* ════════════════════════════════════════════════════════════════
   BUTTONS BLOCK (cada botão é um card clicável que abre modal)
   ════════════════════════════════════════════════════════════════ */

.np-btn-card {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; background:#f8fafc;
  border:1px solid transparent; border-radius:6px;
  cursor:pointer; font-size:13px; color:var(--cf-text, #0f172a);
  text-align:left; font-family:inherit;
  transition: background .15s, border-color .15s;
}
.np-btn-card:hover { background:#f0f6ff; border-color:#bfdbfe; }

/* ════════════════════════════════════════════════════════════════
   SWITCH (checkbox toggle estilo iOS)
   ════════════════════════════════════════════════════════════════ */

.np-switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--cf-text-2, #475569); }
.np-switch input {
  appearance:none; width:34px; height:20px;
  background:#cbd5e1; border-radius:10px; cursor:pointer;
  position:relative; transition: background .15s;
}
.np-switch input::after {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; background:#fff; border-radius:50%;
  transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.np-switch input:checked { background:var(--cf-brand, #1E5BAA); }
.np-switch input:checked::after { transform: translateX(14px); }

/* Cad-node pill detail no card (gatilho com config) */
.cad-node-pill {
  display:inline-flex; padding:2px 8px; border-radius:10px;
  font-size:10.5px; color:#475569; background:#f1f5f9;
  align-self:flex-start; font-weight:500;
}
.cad-node-pill-cyan { background:#cffafe; color:#155e75; }

/* ────────────────────────────────────────────
   EMOJI POPOVER
   ──────────────────────────────────────────── */
.np-emoji-pop {
  background:#fff; border:1px solid #e5e7eb; border-radius:9px;
  padding:8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.18);
  display:grid; grid-template-columns: repeat(8, 28px); gap:2px;
  max-width:260px;
  animation: cadEmojiIn .15s ease-out;
}
@keyframes cadEmojiIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }
.np-emoji-btn {
  width:28px; height:28px; border:none; background:transparent;
  border-radius:5px; cursor:pointer; font-size:16px; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition: background .12s;
}
.np-emoji-btn:hover { background:#f1f5f9; transform: scale(1.15); }