/* ==========================================================
   PREMIUM SaaS DARK — Convers-IA
   Estilo inspirado em: Make.com, FlowiseAI, ManyChat
========================================================== */

/* ------------------------------
   ÁREA DO EDITOR / VISOR
------------------------------ */

#flow-editor {
    width: 100%;
    height: 720px;
    background: #0d0d0d;
    border: 1px solid #1c1c1c;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 25px #0008 inset;
}

#flow-viewport {
    position: absolute;
    width: 5000px;
    height: 3500px;
    transform-origin: 0 0;
}

#flow-connections {
    position: absolute;
    inset: 0;
    width: 5000px;
    height: 5000px;
    pointer-events: none;
    overflow: visible;
    z-index: 1 !important;
}

#flow-connections line {
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px #3b82f6aa);
    transition: 0.15s;
}

#flow-connections line.highlight {
    stroke: #60a5fa;
    stroke-width: 3;
}

#flow-connections line.dimmed {
    opacity: 0.14;
}

/* ------------------------------
   BLOCOS DO FLUXO
------------------------------ */

.flow-box {
    position: absolute;
    width: 270px;
    padding: 18px;
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid #2b2b2b;
    border-radius: 14px;
    box-shadow: 0px 6px 22px #0009;
    cursor: grab;
    transition: transform .15s, box-shadow .2s;
    color: #e5e5e5;
    z-index: 2 !important;
}

.flow-box:hover {
    transform: scale(1.03);
    box-shadow: 0px 10px 26px #000c;
}

.flow-box strong {
    font-size: 15px;
    color: #fff;
}

.flow-box small {
    color: #bbb;
}

.flow-box button {
    margin-top: 8px;
    margin-right: 4px;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    background: #1f2937 !important;
    color: #d1d5db !important;
    border: 1px solid #374151 !important;
    transition: .15s;
}

.flow-box button:hover {
    background: #3b82f6 !important;
    border-color: #60a5fa !important;
    color: #fff !important;
}

/* ------------------------------
   MODAL PREMIUM
------------------------------ */

.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
}

.modal {
    width: 900px !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    background: #111418 !important;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.55) !important;
    animation: modalPop .25s ease;
    color: #ddd;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;

    scrollbar-width: thin;
    scrollbar-color: #475569 #0f172a;
}

.modal::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.modal::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 999px;
}

.modal::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #334155, #475569);
    border-radius: 999px;
    border: 2px solid #0f172a;
}

.modal::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #475569, #64748b);
}

.modal::-webkit-scrollbar-corner {
    background: #0f172a;
}

@keyframes modalPop {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.modal-header h2 {
    font-weight: 600;
    font-size: 22px !important;
    margin: 0;
    color: #f8fafc !important;
}

/* ------------------------------
   TABS PREMIUM
------------------------------ */

.modal-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 4px 2px 10px 2px;
    margin-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #475569 #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modal-tabs::-webkit-scrollbar {
    height: 8px;
}

.modal-tabs::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 999px;
}

.modal-tabs::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 999px;
    border: 1px solid #0f172a;
}

.modal-tabs::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.modal-tab {
    white-space: nowrap;
    padding: 10px 18px !important;
    background: linear-gradient(180deg, #1e293b, #172033) !important;
    border: 1px solid #334155 !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
    transition: 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.modal-tab:hover {
    background: linear-gradient(180deg, #2a3950, #1e293b) !important;
    border-color: #475569 !important;
}

.modal-tab.active {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border-color: #60a5fa !important;
    font-weight: 600 !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(96,165,250,0.18), 0 8px 18px rgba(37,99,235,0.18);
}

/* Conteúdo */
.modal-tab-content {
    display: none;
    margin-top: 18px;
}

.modal-tab-content.active {
    display: block;
}

/* Inputs */

.modal input,
.modal textarea,
.modal select {
    width: 100%;
    padding: 10px;
    border-radius: 8px !important;
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    margin-bottom: 14px;
}

.modal input:focus,
.modal textarea:focus,
.modal select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.35) !important;
}

.modal * {
    box-sizing: border-box;
}

.modal textarea {
    min-height: 90px;
    resize: vertical;
}

/* ------------------------------
   Botões do modal
------------------------------ */

.modal-footer {
    text-align: right;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    bottom: 0;
    background: #111418 !important;
}

.modal-footer .button-primary {
    background: #3b82f6 !important;
    border-color: #1d4ed8 !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.modal-footer .button {
    background: #1e293b !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
}

/* ------------------------------
   SIMULADOR — PREMIUM
------------------------------ */

#simulator-panel {
    width: 300px !important;
    height: 100vh !important;
    background: #111418 !important;
    border-left: 2px solid #1e293b !important;
    position: fixed !important;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: .3s ease-in-out;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    box-shadow: -3px 0 18px rgba(0,0,0,0.55) !important;
}

.sim-header {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    padding: 12px !important;
    font-size: 16px !important;
    border-bottom: 1px solid #334155 !important;
}

/* mensagens */

#simulator-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
}

.sim-msg-bot {
    background: #1e40af !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
}

.sim-msg-user {
    background: #0f766e !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    text-align: right !important;
}

/* Campo de digitação */
#simulator-input-area {
    display: flex !important;
    gap: 8px !important;
    padding: 12px !important;
    background: #0f172a !important;
    border-top: 1px solid #1e293b !important;
}

#simulator-input {
    flex: 1;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: #111827 !important;
    border: 1px solid #334155 !important;
    color: #fff !important;
}

#simulator-send {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: #3b82f6 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
}

#simulator-send:hover {
    background: #60a5fa !important;
}

/* ------------------------------
   BOTÃO DE FECHAR DO MODAL
------------------------------ */

.modal .close,
.modal .modal-close,
.modal button[aria-label="Fechar"] {
    background: #172033 !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.modal .close:hover,
.modal .modal-close:hover,
.modal button[aria-label="Fechar"]:hover {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #fff !important;
}

/* ------------------------------
   RESPONSIVO
------------------------------ */

@media (max-width: 768px) {
    .modal-bg {
        padding: 10px;
    }

    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        padding: 18px !important;
    }
}

/* ==========================================================
   IA POR FLUXO — V3.6
========================================================== */
.flow-box-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.flow-ai-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 8px;border-radius:999px;background:rgba(99,91,255,.18);border:1px solid rgba(139,128,255,.45);color:#c4bfff;font-size:10px;font-weight:800;letter-spacing:.04em}.conversia-block-ai-settings{margin-top:18px;padding:16px;border:1px solid #293449;border-radius:14px;background:rgba(99,91,255,.07)}.conversia-check-row{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:12px!important;border:1px solid #293449!important;border-radius:12px!important;background:#0f172a!important;margin-bottom:12px!important}.conversia-check-row input[type=checkbox]{width:18px!important;height:18px!important;min-width:18px!important;margin:2px 0 0!important}.conversia-check-row span{display:grid;gap:3px}.conversia-check-row strong{color:#f8fafc;font-size:13px}.conversia-check-row small{color:#94a3b8;font-size:11px;line-height:1.45}.conversia-flow-ai-modal .modal{width:980px!important}.conversia-flow-ai-modal .modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.conversia-flow-ai-modal .modal-header p{margin:5px 0 0;color:#94a3b8}.conversia-flow-ai-summary,.conversia-flow-ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.conversia-flow-ai-rules-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;margin-top:8px;border-top:1px solid rgba(255,255,255,.08)}.conversia-flow-ai-rules-head>div{display:grid;gap:4px}.conversia-flow-ai-rules-head small{color:#94a3b8}.conversia-flow-ai-rule{margin-top:14px;padding:16px;border:1px solid #293449;border-radius:14px;background:#0d1119}.conversia-flow-ai-rule-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.conversia-flow-ai-empty{margin-top:14px;padding:16px;border:1px dashed #334155;border-radius:14px;color:#94a3b8;text-align:center}.conversia-ai-router-btn{border-color:#c9c4ff!important;color:#5547e8!important;background:#f7f6ff!important}.conversia-ai-router-btn:hover{background:#eeecff!important;color:#4338ca!important}@media(max-width:760px){.conversia-flow-ai-summary,.conversia-flow-ai-grid{grid-template-columns:1fr}.conversia-flow-ai-rules-head{align-items:flex-start;flex-direction:column}}
/* ==========================================================
   Ajuste v11 — Builder no padrão SaaS do dashboard
   Escopo visual do editor, sem alterar lógica do fluxo
========================================================== */
.conversia-builder-wrap,
.conversia-builder-wrap * {
    font-family: inherit;
}

.conversia-builder-wrap {
    color: #0f172a;
}

.conversia-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}

.conversia-builder-head h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: #0f172a !important;
}

.conversia-builder-head p {
    margin: 7px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #64748b !important;
}

.conversia-builder-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}

.conversia-builder-toolbar .button,
.conversia-builder-save,
#connect-notice .button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}

.conversia-builder-toolbar .button:not(.button-primary),
#connect-notice .button {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #dbe3ef !important;
}

.conversia-builder-toolbar .button:not(.button-primary):hover,
#connect-notice .button:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.conversia-builder-toolbar .button-primary,
.conversia-builder-save {
    background: linear-gradient(135deg, #635bff, #6d5dfc) !important;
    color: #ffffff !important;
    border: 1px solid rgba(99,91,255,.22) !important;
}

.conversia-builder-toolbar .button-primary:hover,
.conversia-builder-save:hover {
    filter: brightness(.97);
    color: #ffffff !important;
}

.conversia-builder-simulate {
    margin-left: auto !important;
}

.conversia-builder-save {
    margin-top: 12px !important;
}

.conversia-connect-notice,
#connect-notice.conversia-connect-notice {
    display: none;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    border-radius: 14px;
    color: #334155;
    font-size: 13px;
}

#flow-editor {
    height: 640px !important;
    border-radius: 16px !important;
    border: 1px solid #111827 !important;
}

.flow-box {
    width: 250px !important;
    padding: 14px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
}

.flow-box strong {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.flow-box small {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.flow-box button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    line-height: 26px !important;
    border-radius: 8px !important;
}

.modal {
    border-radius: 16px !important;
    padding: 22px !important;
}

.modal-header h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

.modal label,
.modal p,
.modal input,
.modal textarea,
.modal select {
    font-size: 13px !important;
}

.modal input,
.modal textarea,
.modal select {
    padding: 9px 10px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
}

.modal-tab {
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.modal .close,
.modal .modal-close,
.modal button[aria-label="Fechar"] {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.sim-header {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.sim-msg-bot,
.sim-msg-user,
#simulator-input,
#simulator-send {
    font-size: 13px !important;
}

@media (max-width: 900px) {
    .conversia-builder-simulate {
        margin-left: 0 !important;
    }
    .conversia-builder-head h1 {
        font-size: 22px !important;
    }
    #flow-editor {
        height: 560px !important;
    }
}

/* Assistente IA Autônomo — fontes, regras e bloco visual */
.conversia-autonomous-source-card,
.conversia-assistant-greeting {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #f8fafc;
}
.conversia-flow-ai-rules-head > div { display:flex; flex-direction:column; gap:2px; }
.conversia-flow-ai-rules-head small,
.conversia-assistant-source-row small { color:#64748b; }
.conversia-autonomous-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.conversia-assistant-source-row,
.conversia-assistant-editor-head { display:flex; align-items:center; gap:10px; }
.conversia-assistant-source-row { padding:9px 0; border-bottom:1px solid #e2e8f0; }
.conversia-assistant-source-row input,
.conversia-assistant-source-row > div,
.conversia-assistant-editor-head input { flex:1; }
.conversia-assistant-source-row > div { display:flex; flex-direction:column; min-width:0; }
.conversia-assistant-editor-row { padding:11px 0; border-bottom:1px solid #e2e8f0; }
.conversia-assistant-editor-row textarea { margin-top:8px; width:100%; }
.conversia-assistant-greeting code { padding:2px 5px; border-radius:4px; background:#e2e8f0; }
.flow-box.flow-box-assistant-ai { border:2px solid #7c3aed; background:linear-gradient(145deg,#faf5ff,#eef2ff); box-shadow:0 12px 30px rgba(124,58,237,.16); }
.flow-box-assistant-ai .flow-box-title { color:#5b21b6; }
.assistant-ai-block-copy { margin-top:10px; color:#334155; }
.conversia-catalog-actions { display:flex; flex-wrap:wrap; gap:7px; }
.conversia-catalog-source-row { margin-top:12px; padding:12px; border:1px solid #e2e8f0; border-radius:9px; background:#f8fafc; }
.conversia-catalog-source-head { display:grid; grid-template-columns:minmax(180px,1fr) minmax(155px,.55fr) auto auto; align-items:center; gap:8px; }
.conversia-catalog-active { display:flex!important; align-items:center; gap:5px; margin:0!important; white-space:nowrap; font-size:12px; }
.conversia-catalog-active input { width:auto!important; margin:0!important; }
.conversia-catalog-primary-fields { margin-top:10px; }
.conversia-catalog-advanced { margin-top:10px; border-top:1px solid #e2e8f0; padding-top:9px; }
.conversia-catalog-advanced summary { cursor:pointer; color:#4f46e5; font-weight:650; font-size:12px; }
.conversia-catalog-advanced > .conversia-flow-ai-grid { margin-top:10px; }
.conversia-catalog-map-title { display:block; margin:12px 0 7px; font-size:12px; }
.conversia-catalog-field-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.conversia-catalog-field-grid label { font-size:11px; }
.conversia-catalog-field-grid input { margin-top:4px; width:100%; }
.conversia-catalog-source-row.is-catalog-file .catalog-source-method { opacity:.6; }
.conversia-catalog-safety-note { padding:11px 13px; border-left:3px solid #635bff; border-radius:7px; background:#f4f2ff; color:#475569; font-size:12px; line-height:1.5; }
.conversia-knowledge-cache-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:14px 0; padding:12px 14px; border:1px solid #dbe4f0; border-radius:9px; background:#f8fafc; }
.conversia-knowledge-cache-actions > div { display:grid; gap:3px; }
.conversia-knowledge-cache-actions small { color:#64748b; line-height:1.45; }
.conversia-memory-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.conversia-memory-settings .conversia-check-row { margin:0!important; padding:12px; border:1px solid #dbe4f0; border-radius:9px; background:#fff; }
.conversia-memory-thresholds { margin:12px 0; }
.conversia-memory-head { margin-top:16px; }
.conversia-memory-row { display:grid; gap:8px; margin-top:10px; padding:12px; border:1px solid #dbe4f0; border-radius:9px; background:#fff; }
.conversia-memory-row-head { display:grid; grid-template-columns:minmax(180px,.65fr) 1fr auto auto; gap:8px; align-items:center; }
.conversia-memory-row-head small { color:#64748b; }
.conversia-memory-row label { display:grid; gap:5px; font-size:12px; font-weight:650; }
.conversia-memory-row textarea { width:100%; resize:vertical; }
.conversia-split-settings { margin-top:14px; }
@media (max-width: 900px) {
    .conversia-autonomous-source-grid { grid-template-columns:1fr; }
    .conversia-catalog-source-head, .conversia-catalog-field-grid { grid-template-columns:1fr; }
    .conversia-memory-settings, .conversia-memory-row-head { grid-template-columns:1fr; }
    .conversia-knowledge-cache-actions { align-items:flex-start; flex-direction:column; }
}

/* Modos Fluxo / IA Autônoma / Híbrido */
.conversia-assistant-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}.conversia-assistant-mode-card{display:flex!important;gap:10px;align-items:flex-start;margin:0!important;padding:14px;border:1px solid #dfe4ec;border-radius:12px;background:#f8fafc;cursor:pointer}.conversia-assistant-mode-card:has(input:checked){border-color:#635bff;background:#f1f0ff;box-shadow:0 0 0 1px #635bff}.conversia-assistant-mode-card input{width:auto!important;margin:3px 0 0!important}.conversia-assistant-mode-card span{display:grid;gap:4px}.conversia-assistant-mode-card strong{font-size:13px;color:#111827}.conversia-assistant-mode-card small{font-size:11px;line-height:1.45;color:#667085}.conversia-autonomous-settings{margin:0 0 18px;padding:16px;border:1px solid #dfe4ec;border-radius:14px;background:#fbfcfe}.conversia-autonomous-settings[hidden],#flow-router-settings[hidden]{display:none!important}.conversia-autonomous-settings h3{margin:0 0 14px;font-size:16px}.conversia-autonomous-settings>label{display:block;margin:12px 0 5px;font-weight:650}.conversia-autonomous-settings textarea{width:100%}.conversia-autonomous-limits{margin-top:12px}@media(max-width:900px){.conversia-assistant-mode-grid{grid-template-columns:1fr}}


/* ==========================================================
   Ajuste v12 — refinamento final do Builder
   Escopo: visual/UX, sem alterar lógica do fluxo
========================================================== */

/* Remove o título redundante dentro do card; mantém apenas contexto leve do perfil */
.conversia-builder-head-compact {
    margin: 0 0 10px !important;
}
.conversia-builder-head-compact h1 {
    display: none !important;
}
.conversia-builder-head-compact p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
}

/* Toolbar mais compacta no padrão SaaS aprovado */
.conversia-builder-toolbar {
    gap: 7px !important;
    margin-bottom: 10px !important;
}
.conversia-builder-toolbar .button,
.conversia-builder-save,
#connect-notice .button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    line-height: 28px !important;
    gap: 6px !important;
}
.conversia-builder-toolbar .button span,
.conversia-builder-save span {
    font-size: 12px !important;
    line-height: 1 !important;
}
.conversia-builder-save {
    margin-top: 10px !important;
}

/* Canvas com visão inicial mais ampla, sem mudar o funcionamento do drag/zoom */
#flow-editor {
    height: 600px !important;
    border-radius: 15px !important;
}
.flow-box {
    width: 240px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}
.flow-box strong {
    font-size: 13px !important;
}
.flow-box small {
    font-size: 11.5px !important;
    line-height: 1.42 !important;
}
.flow-box button {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 23px !important;
    border-radius: 7px !important;
}

/* Faz o fundo/menu lateral acompanhar a altura visual da página do Builder */
html body .conversia-public-dashboard.cpd-builder-dashboard {
    align-items: stretch !important;
    background: linear-gradient(to right, #0d1322 0, #0d1322 245px, #f6f7fb 245px, #f6f7fb 100%) !important;
}
html body .conversia-public-dashboard.cpd-builder-dashboard .cpd-sidebar {
    min-height: 100vh !important;
    height: auto !important;
    align-self: stretch !important;
    background: #0d1322 !important;
}
html body .conversia-public-dashboard.cpd-builder-dashboard .cpd-main {
    background: #f6f7fb !important;
}
html body .conversia-public-dashboard .cpd-builder-panel {
    overflow: visible !important;
}

@media (max-width: 900px) {
    .conversia-builder-toolbar .button,
    .conversia-builder-save {
        min-height: 29px !important;
        height: 29px !important;
        padding: 0 10px !important;
        font-size: 11.5px !important;
    }
    #flow-editor {
        height: 540px !important;
    }
}

/* v16 — refinamento do header do Builder/modal */
.conversia-builder-head.conversia-builder-head-compact p {
  font-family: Poppins, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  margin: 0 0 12px !important;
}
.conversia-builder-flow-name {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f1efff;
  color: #5746e8;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* v13.6.2 — Modal Criar Assistente IA refinado */
.conversia-ai-assistant-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(2, 6, 23, .70);
    backdrop-filter: blur(3px);
    font-family: Poppins, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.conversia-ai-assistant-card {
    width: min(1040px, 100%);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.conversia-ai-assistant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.conversia-ai-assistant-header h2 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -0.03em;
}
.conversia-ai-assistant-header p {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 400;
}
.conversia-ai-close-btn {
    border-radius: 10px !important;
    min-height: 36px !important;
    padding: 0 15px !important;
    border-color: rgba(236, 72, 153, .7) !important;
    color: #f472b6 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}
.conversia-ai-assistant-body {
    overflow: auto;
    padding: 18px 22px 20px;
}
.conversia-ai-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 14px;
}
.conversia-ai-field {
    display: block;
    margin: 0;
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.conversia-ai-field input,
.conversia-ai-field select,
.conversia-ai-field textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    border: 1px solid #d7dce5 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-family: Poppins, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}
.conversia-ai-field input,
.conversia-ai-field select {
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 12px !important;
}
.conversia-ai-field textarea {
    min-height: 76px !important;
    padding: 10px 12px !important;
    resize: vertical;
}
.conversia-ai-field input::placeholder,
.conversia-ai-field textarea::placeholder {
    color: #7b8190 !important;
    opacity: 1;
    font-weight: 400 !important;
}
.conversia-ai-span-2 {
    grid-column: 1 / -1;
}
.conversia-ai-assistant-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .94);
}
#ai-flow-status {
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.35;
}
.conversia-ai-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-shrink: 0;
}
.conversia-ai-secondary-btn,
.conversia-ai-primary-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 15px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.conversia-ai-secondary-btn {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}
.conversia-ai-primary-btn {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
}
.conversia-ai-primary-btn:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}
@media (max-width: 900px) {
    .conversia-ai-assistant-modal { padding: 12px; align-items: flex-start; }
    .conversia-ai-assistant-card { max-height: 96vh; }
    .conversia-ai-assistant-header { padding: 15px 16px; }
    .conversia-ai-assistant-header h2 { font-size: 21px; }
    .conversia-ai-assistant-body { padding: 15px 16px; }
    .conversia-ai-form-grid { grid-template-columns: 1fr; row-gap: 12px; }
    .conversia-ai-span-2 { grid-column: auto; }
    .conversia-ai-assistant-footer { padding: 13px 16px; flex-direction: column; align-items: stretch; }
    .conversia-ai-actions { justify-content: flex-end; }
}

/* ==========================================================
   Builder v3.8.1 — espaço de trabalho e modal de IA simplificados
========================================================== */
.conversia-builder-wrap {
    width: 100%;
    min-height: 620px;
    height: calc(100vh - 24px);
    margin: 0 !important;
    padding: 10px 10px 10px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.conversia-builder-head-compact { flex: 0 0 auto; }
.conversia-builder-toolbar {
    position: relative;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    min-height: 38px;
    margin-bottom: 10px !important;
}
.conversia-builder-toolbar-primary,
.conversia-builder-toolbar-end {
    display: flex;
    align-items: center;
    gap: 7px;
}
.conversia-builder-toolbar-end {
    margin-left: auto;
}
.conversia-builder-toolbar .conversia-builder-save,
.conversia-builder-toolbar .conversia-builder-simulate {
    margin: 0 !important;
}
.conversia-builder-toolbar .conversia-builder-save {
    min-width: 112px;
}
.conversia-builder-toolbar .conversia-builder-simulate {
    color: #4f46e5 !important;
    border-color: #c9c4ff !important;
    background: #f7f6ff !important;
}
.conversia-builder-more { position: relative; flex: 0 0 auto; }
.conversia-builder-more > summary {
    list-style: none;
    cursor: pointer;
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #dbe3ef !important;
}
.conversia-builder-more > summary::-webkit-details-marker { display: none; }
.conversia-builder-more[open] > summary {
    border-color: #a5b4fc !important;
    box-shadow: 0 0 0 3px rgba(99,91,255,.10) !important;
}
.conversia-builder-more-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 80;
    width: 205px;
    padding: 7px;
    display: grid;
    gap: 3px;
    border: 1px solid #dfe6f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
}
.conversia-builder-more-menu .button {
    width: 100%;
    justify-content: flex-start !important;
    border: 0 !important;
    background: transparent !important;
}
.conversia-builder-more-menu .button:hover { background: #f5f6ff !important; }
.conversia-builder-canvas-shell {
    position: relative;
    flex: 1 1 auto;
    min-height: 420px;
    overflow: hidden;
}
.conversia-builder-canvas-help {
    position: absolute;
    z-index: 12;
    top: 13px;
    left: 16px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    background: rgba(15,23,42,.78);
    color: #94a3b8;
    font-size: 10.5px;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.conversia-builder-zoom {
    position: absolute;
    z-index: 14;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(15,23,42,.88);
    box-shadow: 0 10px 26px rgba(0,0,0,.24);
    backdrop-filter: blur(10px);
}
.conversia-builder-zoom .button {
    min-width: 29px !important;
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 9px !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    font-size: 11px !important;
    line-height: 27px !important;
}
.conversia-builder-zoom #zoomOutFlow,
.conversia-builder-zoom #zoomInFlow { font-size: 17px !important; }
#flowZoomLabel {
    min-width: 43px;
    color: #cbd5e1;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
}
.conversia-builder-canvas-shell #flow-editor {
    width: 100%;
    height: 100% !important;
    min-height: 420px;
    margin: 0;
    cursor: grab;
    background-color: #0b0d11 !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.16) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    border-radius: 8px !important;
}
.conversia-builder-canvas-shell #flow-editor.is-panning { cursor: grabbing; }
.conversia-builder-canvas-shell .flow-box { cursor: grab; }
.conversia-builder-canvas-shell .flow-box:active { cursor: grabbing; }

/* Modal de modo/IA: cabeçalho e rodapé fixos, apenas o conteúdo rola. */
.conversia-flow-ai-modal { padding: 16px !important; }
.conversia-flow-ai-modal .modal {
    width: min(1120px, calc(100vw - 32px)) !important;
    max-width: 1120px !important;
    max-height: calc(100vh - 32px) !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border: 1px solid #e2e8f0;
    border-radius: 10px !important;
    background: #fff !important;
    color: #334155 !important;
}
.conversia-flow-ai-modal .modal-header {
    flex: 0 0 auto;
    padding: 18px 20px 15px;
    border-bottom: 1px solid #e8edf4;
    background: #fff;
}
.conversia-flow-ai-modal .modal-header h2 { color: #0f172a !important; }
.conversia-flow-ai-modal .modal-header p {
    color: #64748b !important;
    font-size: 12px !important;
}
.conversia-flow-ai-modal .modal-close {
    flex: 0 0 auto;
    border: 1px solid #dbe3ef !important;
    background: #f8fafc !important;
    color: #475569 !important;
}
.conversia-flow-ai-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}
.conversia-flow-ai-modal .modal-footer {
    position: static !important;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-height: 66px;
    margin: 0 !important;
    padding: 13px 20px !important;
    border-top: 1px solid #e8edf4;
    background: #fff !important;
    box-shadow: 0 -8px 25px rgba(15,23,42,.05);
}
.conversia-flow-ai-modal .modal-footer .button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 16px !important;
    color: #334155 !important;
    border: 1px solid #dbe3ef !important;
    background: #fff !important;
}
.conversia-flow-ai-modal .modal-footer .button-primary {
    color: #fff !important;
    border-color: #4f46e5 !important;
    background: #4f46e5 !important;
}
.conversia-flow-ai-modal label,
.conversia-flow-ai-modal h3,
.conversia-flow-ai-modal h4,
.conversia-flow-ai-modal strong { color: #172033 !important; }
.conversia-flow-ai-modal h4 {
    margin: 0 0 14px;
    font-size: 14px;
}
.conversia-flow-ai-modal input:not([type="radio"]):not([type="checkbox"]),
.conversia-flow-ai-modal textarea,
.conversia-flow-ai-modal select {
    min-height: 40px;
    border: 1px solid #dbe3ef !important;
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: none !important;
}
.conversia-flow-ai-modal textarea { min-height: 84px; }
.conversia-flow-ai-modal input::placeholder,
.conversia-flow-ai-modal textarea::placeholder { color: #94a3b8 !important; opacity: 1; }
.conversia-flow-ai-modal .conversia-check-row {
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
}
.conversia-flow-ai-modal .conversia-check-row strong { color: #172033 !important; }
.conversia-flow-ai-modal .conversia-check-row small { color: #64748b !important; }
.conversia-assistant-mode-grid { gap: 8px; margin-bottom: 14px; }
.conversia-assistant-mode-card {
    min-height: 96px;
    padding: 12px !important;
    background: #f8fafc !important;
}

/* Conteúdo do Builder aberto no iframe: ocupa toda a janela, sem moldura do tema. */
.cpd-builder-modal-content {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f3f5f9 !important;
}
.cpd-builder-modal-content .conversia-builder-wrap {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #f3f5f9 !important;
}
.cpd-builder-modal-content .conversia-builder-head-compact {
    margin-bottom: 6px !important;
}
.cpd-builder-modal-content .conversia-builder-toolbar {
    margin-bottom: 7px !important;
}
.cpd-builder-modal-content .conversia-builder-canvas-shell,
.cpd-builder-modal-content #flow-editor {
    border-radius: 7px !important;
}
.cpd-builder-modal-content .conversia-builder-flow-name {
    border-radius: 7px;
}
.conversia-assistant-mode-card:has(input:checked) {
    border-color: #635bff !important;
    background: #f4f2ff !important;
}
.conversia-assistant-mode-card input { accent-color: #635bff; }
.conversia-autonomous-settings {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.conversia-autonomous-settings:not([hidden]) {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.conversia-assistant-section-head {
    grid-column: 1;
    grid-row: 1;
    display: block;
    position: sticky;
    top: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.conversia-assistant-section-head h3 { margin: 0 0 3px !important; }
.conversia-assistant-section-head p,
.conversia-assistant-panel-help {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 11.5px !important;
}
.conversia-assistant-config-tabs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.conversia-assistant-config-tabs button {
    min-height: 38px;
    padding: 8px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    font-weight: 650;
}
.conversia-assistant-config-tabs button.is-active {
    background: #ebe9ff;
    color: #4f46e5;
    box-shadow: inset 3px 0 #635bff;
}
.conversia-assistant-config-panel { display: none; }
.conversia-assistant-config-panel.is-active {
    grid-column: 2;
    grid-row: 1;
    display: block;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fbfcfe;
}
.conversia-assistant-objectives{display:flex;flex-wrap:wrap;gap:10px 18px;margin:16px 0;padding:16px;border:1px solid #dbe3f0;border-radius:10px}.conversia-assistant-objectives legend{padding:0 8px;font-weight:700}.conversia-assistant-objectives label{display:flex;align-items:center;gap:7px;margin:0}.assistant-objection-row,.assistant-action-criterion-row{margin-bottom:12px}
.conversia-flow-ai-modal .conversia-autonomous-source-card,
.conversia-flow-ai-modal .conversia-assistant-greeting {
    border-color: #e2e8f0;
    background: #fff;
}
.conversia-flow-ai-modal .conversia-flow-ai-rules-head {
    border-top-color: #e8edf4;
}
.conversia-flow-ai-modal .conversia-flow-ai-empty {
    border-color: #cbd5e1;
    color: #94a3b8;
    background: #fff;
}
.conversia-flow-ai-modal .conversia-flow-ai-rule {
    border-color: #e2e8f0;
    background: #fff;
}
.conversia-flow-ai-modal #flow-router-settings {
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .conversia-builder-wrap { height: auto; min-height: calc(100vh - 16px); padding: 10px !important; }
    .conversia-builder-toolbar { flex-wrap: wrap !important; }
    .conversia-builder-toolbar-end { margin-left: 0; }
    .conversia-builder-canvas-shell { min-height: 520px; }
    .conversia-builder-canvas-shell #flow-editor { height: 520px !important; }
    .conversia-builder-canvas-help { display: none; }
    .conversia-autonomous-settings:not([hidden]) { display: block; }
    .conversia-assistant-section-head { position: static; margin-bottom: 12px; }
    .conversia-assistant-config-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .conversia-flow-ai-modal { padding: 8px !important; }
    .conversia-flow-ai-modal .modal { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px) !important; }
    .conversia-flow-ai-scroll { padding: 13px; }
}
@media (max-width: 620px) {
    .conversia-builder-toolbar-primary,
    .conversia-builder-toolbar-end { width: 100%; flex-wrap: wrap; }
    .conversia-builder-more { order: 3; }
    .conversia-builder-zoom #fitFlow { display: none; }
    .conversia-assistant-config-tabs { width: 100%; }
    .conversia-assistant-config-tabs button { flex: 1 1 40%; }
}