/* ══════════════════════════════════════════════════════════════
   FluxoBot — construtor de fluxo (tema escuro)
   Paleta: slate profundo + acento violeta/índigo, sucesso teal.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0e14;          /* fundo app */
  --bg2:#0f131c;         /* canvas */
  --panel:#141a26;       /* painéis/cards */
  --panel2:#1a2130;      /* inputs, nós */
  --bd:#26304a;          /* bordas */
  --bd2:#334063;
  --tx:#e7edf7;          /* texto */
  --mut:#8a97ad;         /* texto suave */
  --ac:#7c5cff;          /* acento (violeta) */
  --ac2:#6248e0;
  --ok:#2dd4bf;          /* sucesso/conexão */
  --warn:#f5a623;
  --bad:#f2555a;
  --wire:#4a5a86;        /* fios conexão */
  --grid:#151b28;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
.hide{display:none!important}
.mut{color:var(--mut)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26304a;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ───── Botões ───── */
.btn{border:1px solid var(--bd);background:var(--panel2);color:var(--tx);
  padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--bd2);background:#212a3d}
.btn.primary{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.primary:hover{background:var(--ac2)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#04241f}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.danger:hover{border-color:var(--bad);color:#ffd7d8}
.btn:disabled{opacity:.45;cursor:default}

/* ───── Login ───── */
#login{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 50% -10%,#171f30,var(--bg))}
.login-card{width:340px;background:var(--panel);border:1px solid var(--bd);
  border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;margin-bottom:4px}
.brand .dot{width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg,var(--ac),#a48bff);display:grid;place-items:center;font-size:15px}
.login-card p{margin:2px 0 18px;color:var(--mut);font-size:13px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--mut);margin-bottom:6px;font-weight:600}
.inp{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--bd);
  background:var(--panel2);color:var(--tx);outline:none;transition:.15s}
.inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.lerr{color:#ffb3b5;font-size:13px;min-height:18px;margin-top:2px}

/* ───── Topbar ───── */
.top{position:fixed;top:0;left:0;right:0;height:56px;z-index:30;
  display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--bd)}
.top .brand{font-size:16px}
.top .sep{flex:1}
.flowname{background:var(--panel2);border:1px solid var(--bd);border-radius:9px;
  padding:7px 11px;color:var(--tx);min-width:180px;font-weight:600}
.flowname:focus{border-color:var(--ac);outline:none}
.chip{font-size:12px;color:var(--mut);background:var(--panel2);border:1px solid var(--bd);
  padding:4px 9px;border-radius:999px}

/* ───── Dashboard ───── */
#dash{position:fixed;inset:56px 0 0 0;overflow:auto;padding:26px}
.dash-wrap{max-width:960px;margin:0 auto}
.dash-head{display:flex;align-items:center;margin-bottom:20px}
.dash-head h1{font-size:22px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.flowcard{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);
  padding:16px;cursor:pointer;transition:.15s;position:relative}
.flowcard:hover{border-color:var(--ac);transform:translateY(-2px)}
.flowcard h3{margin:0 0 6px;font-size:15px}
.flowcard .meta{font-size:12px;color:var(--mut)}
.flowcard .del{position:absolute;top:10px;right:10px;opacity:0;transition:.15s}
.flowcard:hover .del{opacity:1}
.newcard{border:1.5px dashed var(--bd2);display:grid;place-items:center;
  min-height:110px;color:var(--mut);font-weight:600;gap:6px}
.newcard:hover{color:var(--ac);border-color:var(--ac)}

/* ───── Editor layout ───── */
#editor{position:fixed;inset:56px 0 0 0;display:grid;grid-template-columns:210px 1fr 0;transition:grid-template-columns .2s}
#editor.insp{grid-template-columns:210px 1fr 320px}
.palette{background:var(--panel);border-right:1px solid var(--bd);padding:14px;overflow:auto}
.palette h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.pblock{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--bd);
  border-radius:10px;background:var(--panel2);margin-bottom:9px;cursor:grab;transition:.15s;user-select:none}
.pblock:hover{border-color:var(--ac);background:#212a3d}
.pblock .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.ic svg{display:block}
.pblock .nm{font-size:13px;font-weight:600}

/* canvas */
.canvas-wrap{position:relative;overflow:hidden;background:
  radial-gradient(circle at 1px 1px,var(--grid) 1px,transparent 0) 0 0/22px 22px,var(--bg2)}
.canvas{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.svg-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.svg-wires path{fill:none;stroke:var(--wire);stroke-width:2.5}
.svg-wires path.hot{stroke:var(--ac)}
.zoombar{position:absolute;right:14px;bottom:14px;z-index:5;display:flex;gap:6px;
  background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:5px}
.zoombar button{width:30px;height:30px;border-radius:7px;border:0;background:transparent;color:var(--tx);cursor:pointer;font-size:16px}
.zoombar button:hover{background:var(--panel2)}
.hint-empty{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  color:var(--mut);text-align:center;pointer-events:none;z-index:2}

/* nós */
.node{position:absolute;width:252px;background:var(--panel);border:1px solid var(--bd);
  border-radius:12px;box-shadow:var(--shadow);z-index:2;user-select:none}
.node.sel{border-color:var(--ac);box-shadow:0 0 0 3px rgba(124,92,255,.25),var(--shadow)}
.node .nhead{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--bd);
  cursor:grab;border-radius:12px 12px 0 0}
.node .nhead .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:13px;flex:none}
.node .nhead .t{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .nbody{padding:10px 11px;display:flex;flex-direction:column;gap:8px}
/* inputs editáveis dentro do bloco */
.ninp{width:100%;background:var(--panel2);border:1px solid var(--bd);border-radius:8px;color:var(--tx);
  padding:7px 9px;font:inherit;font-size:12.5px;outline:none;resize:none;line-height:1.4}
.ninp:focus{border-color:var(--ac);box-shadow:0 0 0 2px rgba(124,92,255,.18)}
.ninp::placeholder{color:#66738a}
select.ninp{cursor:pointer}
.ndel{margin-left:auto;width:24px;height:24px;border:0;background:transparent;color:var(--mut);
  cursor:pointer;border-radius:6px;font-size:18px;line-height:1;flex:none}
.ndel:hover{background:rgba(242,85,90,.15);color:#ffb3b5}
.inline-row{display:flex;gap:6px;align-items:center}
.olist{display:flex;flex-direction:column;gap:6px}
.orow{display:flex;align-items:center;gap:5px;position:relative}
.orow .ninp{flex:1}
.oremove{width:22px;height:30px;border:0;background:transparent;color:var(--mut);cursor:pointer;border-radius:6px;font-size:12px;flex:none}
.oremove:hover{color:#ffb3b5;background:rgba(242,85,90,.12)}
.orow .port.out{right:-19px;top:50%;transform:translateY(-50%)}
.addbtn{align-self:flex-start;background:transparent;border:1px dashed var(--bd2);color:var(--mut);
  padding:5px 11px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600}
.addbtn:hover{border-color:var(--ac);color:var(--ac)}
.condrow{display:flex;align-items:center;justify-content:space-between;position:relative;
  padding:5px 8px;background:var(--panel2);border:1px solid var(--bd);border-radius:8px}
.condrow .port.out{right:-19px;top:50%;transform:translateY(-50%)}
.dropz{border:1.5px dashed var(--bd2);border-radius:9px;padding:12px;text-align:center;color:var(--mut);
  font-size:12px;cursor:pointer;transition:.15s}
.dropz:hover,.dropz.over{border-color:var(--ac);color:var(--ac);background:rgba(124,92,255,.06)}
.mediaprev{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mediaprev img,.mediaprev video{max-width:100%;max-height:130px;border-radius:8px;object-fit:cover}
.mrem{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6)!important;border-radius:6px;color:#fff}
.mrem:hover{background:rgba(242,85,90,.85)!important;color:#fff}
.node.start{border-color:#2dd4bf55}
.node.start .ic{background:rgba(45,212,191,.15)}
.node.end .ic{background:rgba(242,85,90,.15)}

/* portas */
.port{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--panel2);
  border:2px solid var(--wire);cursor:crosshair;z-index:4;transition:.12s}
.port:hover{border-color:var(--ac);background:var(--ac);transform:scale(1.25)}
.port.armed{border-color:var(--ac);background:var(--ac);box-shadow:0 0 0 5px rgba(124,92,255,.25)}
.port.in.armed{transform:translateY(-50%) scale(1.15)}
.port.in{left:-8px;top:50%;transform:translateY(-50%)}
.port.out{right:-8px}
.port.out.single{top:50%;transform:translateY(-50%)}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 8px;margin:5px 0;background:var(--panel2);border:1px solid var(--bd);border-radius:8px;position:relative;font-size:12px}
.opt-row .port.out{right:-19px;top:50%;transform:translateY(-50%)}
.cond-out{display:flex;justify-content:space-between;padding:4px 2px;font-size:11px;color:var(--mut);position:relative}

/* ───── Inspector ───── */
.inspector{background:var(--panel);border-left:1px solid var(--bd);overflow:auto;padding:16px}
.inspector h3{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px}
.inspector .sub{color:var(--mut);font-size:12px;margin-bottom:16px}
.itxt{width:100%;padding:10px;border-radius:9px;border:1px solid var(--bd);background:var(--panel2);
  color:var(--tx);outline:none;resize:vertical;min-height:70px}
.itxt:focus,.inspector .inp:focus{border-color:var(--ac)}
.optlist .oitem{display:flex;gap:6px;margin-bottom:7px}
.optlist .oitem .inp{flex:1}
.addopt{margin-top:2px}
.insp-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--bd);display:flex;gap:8px}

/* ───── Player (Testar) ───── */
#player{position:fixed;inset:0;z-index:50;background:rgba(4,6,12,.72);
  display:grid;place-items:center;backdrop-filter:blur(3px)}
.phone{width:390px;max-width:94vw;height:720px;max-height:92vh;background:#0c1017;
  border:1px solid var(--bd);border-radius:26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden}
.phone-top{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--panel);border-bottom:1px solid var(--bd)}
.phone-top .av{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--ac),#a48bff);
  background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.phone-top .nm{font-weight:700;font-size:14px}
.head-meta{display:flex;flex-direction:column;line-height:1.28}
.head-meta .status{font-size:11px;color:#3ddc97;display:flex;align-items:center;gap:5px;font-weight:600}
.dot-on{width:7px;height:7px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 3px rgba(61,220,151,.16)}
.phone-top .cls{margin-left:auto;cursor:pointer;color:var(--mut);font-size:20px;background:none;border:0}
.chat{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,#0c1017,#0a0d13)}
.row{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.row.bot{justify-content:flex-start}
.row.me{justify-content:flex-end}
.row.choices{justify-content:flex-end;margin-top:2px}
.row.choices .opts{justify-content:flex-end}
.row.grouped{margin-top:-6px}
.row.embed{display:block;width:100%}
.embedwrap{width:100%;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--bd)}
.embedwrap iframe,.embedwrap video,.embedwrap img{max-width:100%;display:block}
.htmlcode{background:#fff;color:#111}
/* vídeo estilo VSL (clique pra iniciar) */
.vslwrap{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;background:#000;max-width:100%}
.vslwrap video{display:block;width:100%;border-radius:10px}
.vslover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.5));cursor:pointer;transition:.15s}
.vslover:hover{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.4))}
.vslplay{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);color:#111;
  display:grid;place-items:center;font-size:26px;padding-left:5px;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:.15s}
.vslover:hover .vslplay{transform:scale(1.06)}
.vslcta{color:#fff;font-weight:800;font-size:14.5px;text-shadow:0 1px 6px rgba(0,0,0,.7);text-align:center;padding:0 14px}
.vslrow{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);cursor:pointer;user-select:none}
.vslrow input{width:15px;height:15px;flex:none}
.pav{width:30px;height:30px;border-radius:50%;flex:none;background-size:cover;background-position:center;background-repeat:no-repeat}
.pav.ph.bot{background:linear-gradient(135deg,var(--ac),#a48bff)}
.pav.ph.me{background:linear-gradient(135deg,#3a4a6b,#5b6b8f)}
.pav.spacer{background:none!important;border:0;box-shadow:none}
.row .bub{max-width:calc(100% - 42px)}
.bub{max-width:80%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;animation:pop .18s ease;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.bub.bot{background:#1a2130;border:1px solid #263047;border-bottom-left-radius:6px}
.bub.me{background:linear-gradient(135deg,var(--ac),#6b52e8);color:#fff;border-bottom-right-radius:6px}
.bub img,.bub video{max-width:100%;border-radius:10px;display:block}
.bub .cap{margin-top:6px}
.typing{display:flex;gap:4px;padding:12px 14px;background:var(--panel);border:1px solid var(--bd);border-radius:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.chatfoot{padding:12px;border-top:1px solid var(--bd);background:var(--panel);display:flex;flex-direction:column;gap:8px}
.chatfoot.bar{display:block;padding:10px 12px 9px}
.cinput{flex:1;border-radius:12px;border:1px solid var(--bd);background:var(--panel2);color:var(--tx);padding:11px 14px;outline:none;font:inherit}
.cinput:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(124,92,255,.15)}
.cinput:disabled{opacity:.65;cursor:default}
.cbtn{width:42px;height:42px;flex:none;border:0;border-radius:12px;background:var(--ac);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s}
.cbtn:hover:not(:disabled){background:var(--ac2)}
.cbtn:disabled{background:#2a3448;color:#5b6b8f;cursor:default}
.poweredby{text-align:center;font-size:10.5px;color:#5f6c82;margin-top:9px;letter-spacing:.02em}
.poweredby b{color:#8a97ad;font-weight:700}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.optbtn{padding:9px 15px;border-radius:12px;border:1px solid var(--ac);color:#c6bbff;
  background:rgba(124,92,255,.10);cursor:pointer;font-weight:600;font-size:13px;transition:.15s;text-decoration:none}
.optbtn:hover{background:var(--ac);color:#fff;box-shadow:0 5px 16px rgba(124,92,255,.35);transform:translateY(-1px)}
.inputrow{display:flex;gap:8px}
.inputrow .inp{flex:1}
.done{text-align:center;color:var(--mut);font-size:12px;padding:6px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ═══════════ TEMAS DO WIDGET (classe em .pubcard / .phone) ═══════════ */
.btime{font-size:10px;margin-left:8px;float:right;position:relative;top:5px;opacity:.85}

/* ---- CLARO (Typebot) ---- */
.theme-light.pubcard,.theme-light.phone{background:#fff!important;color:#1c2430;border-color:#e6e9ef!important}
.theme-light .phone-top{background:#fff;border-bottom:1px solid #eef0f4}
.theme-light .phone-top .nm{color:#111827}
.theme-light .phone-top .cls{color:#9aa4b2}
.theme-light .chat{background:#fff}
.theme-light .bub.bot{background:#f2f4f7;border:1px solid #eaedf1;color:#1c2430;box-shadow:none}
.theme-light .bub.me{background:var(--ac);color:#fff}
.theme-light .typing{background:#f2f4f7;border:1px solid #eaedf1}
.theme-light .typing i{background:#aab2bf}
.theme-light .optbtn{background:#fff;border:1.5px solid var(--ac);color:var(--ac);box-shadow:none}
.theme-light .optbtn:hover{background:var(--ac);color:#fff}
.theme-light .chatfoot{background:#fff;border-top:1px solid #eef0f4}
.theme-light .cinput{background:#f4f6f9;border:1px solid #e3e7ee;color:#1c2430}
.theme-light .cinput::placeholder{color:#9aa4b2}
.theme-light .cbtn:disabled{background:#e9edf3;color:#b6bfcc}
.theme-light .embedwrap{border-color:#eaedf1}
.theme-light .btime{color:#9aa4b2}

/* ---- WHATSAPP ---- */
.theme-whatsapp.pubcard,.theme-whatsapp.phone{background:#efeae2!important;color:#111b21;border-color:#d9d3ca!important}
.theme-whatsapp .phone-top{background:#008069;border-bottom:0}
.theme-whatsapp .phone-top .nm{color:#fff}
.theme-whatsapp .phone-top .status{color:#d7f3ea}
.theme-whatsapp .phone-top .dot-on{background:#a9f0d1;box-shadow:0 0 0 3px rgba(169,240,209,.2)}
.theme-whatsapp .phone-top .av{box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.theme-whatsapp .phone-top .cls{color:#eafff5}
.theme-whatsapp .chat{background:#efeae2}
.theme-whatsapp .bub.bot{background:#fff;border:0;color:#111b21;box-shadow:0 1px .8px rgba(11,20,26,.13);border-top-left-radius:4px}
.theme-whatsapp .bub.me{background:#d9fdd3;color:#111b21;box-shadow:0 1px .8px rgba(11,20,26,.13);border-top-right-radius:4px}
.theme-whatsapp .typing{background:#fff;border:0;box-shadow:0 1px .8px rgba(11,20,26,.13)}
.theme-whatsapp .typing i{background:#8aa0a8}
.theme-whatsapp .optbtn{background:#fff;border:1px solid #d5dbdf;color:#008069;box-shadow:0 1px .8px rgba(11,20,26,.13)}
.theme-whatsapp .optbtn:hover{background:#008069;color:#fff;border-color:#008069}
.theme-whatsapp .chatfoot{background:#f0f2f5;border-top:0}
.theme-whatsapp .cinput{background:#fff;border:0;border-radius:22px;color:#111b21}
.theme-whatsapp .cinput::placeholder{color:#8696a0}
.theme-whatsapp .cbtn{background:#008069;border-radius:50%}
.theme-whatsapp .cbtn:hover:not(:disabled){background:#017561}
.theme-whatsapp .cbtn:disabled{background:#c3ccd1;color:#fff}
.theme-whatsapp .embedwrap{border-color:#d9d3ca}
.theme-whatsapp .btime{color:#667781}
.theme-whatsapp .bub.me .btime{color:#5a8f63}
.theme-whatsapp .done{color:#667781}

/* modal (aparência) */
.modalwrap{position:fixed;inset:0;z-index:60;background:rgba(4,6,12,.72);display:grid;place-items:center;backdrop-filter:blur(3px)}
.modal{width:380px;max-width:92vw;background:var(--panel);border:1px solid var(--bd);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 16px;font-size:16px}
.avpick{display:flex;align-items:center;gap:10px}
.avprev{width:44px;height:44px;border-radius:50%;flex:none;border:1px solid var(--bd);
  background:linear-gradient(135deg,var(--ac),#a48bff);background-size:cover;background-position:center}

/* toast */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--bd2);color:var(--tx);padding:11px 18px;
  border-radius:10px;box-shadow:var(--shadow);z-index:80;opacity:0;transition:.25s;pointer-events:none;font-weight:600}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}