/* UNIPLIM-WHATSAPP-FLOWS-01 — Formulários do WhatsApp (WhatsApp Flow oficial). Só o que é próprio do formulário:
   o canvas, o painel e o inspetor reaproveitam as classes cb-* do Chatbot (mesma infraestrutura visual). Somente
   tokens --uni-* (claro/escuro herdados do tema; nada de cor fixa). */

/* ---------- Journey Canvas ---------- */

.wf-node .cb-node-head { min-height: 64px; }
.wf-node--start { border-left: 3px solid var(--uni-color-success); }
.wf-node--terminal { border-left: 3px solid var(--uni-color-primary); }
.wf-node--start .cb-node-icon { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.wf-node--terminal .cb-node-icon { background: var(--uni-color-primary-soft); color: var(--uni-color-primary); }

.wf-node-fields {
    list-style: none;
    margin: 0;
    padding: 0 var(--uni-space-3) var(--uni-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wf-node-fields li {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
}

.wf-node-fields li.is-input {
    color: var(--uni-color-text);
    padding-left: var(--uni-space-2);
    border-left: 2px solid var(--uni-color-border-strong);
}

.wf-node-fields li.is-more { font-style: italic; }

.cb-edge.wf-edge-route { stroke-dasharray: 6 4; }

/* UNIPLIM-V2-OVV-CORRECTIONS-01 (OVV-F51) — situação de cada número no modal "Implantar num número oficial". */
.wf-deploy-channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
}

.wf-deploy-channel {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding: var(--uni-space-2) var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
}

.wf-deploy-channel[data-tone="danger"] { border-color: var(--uni-color-danger); }
.wf-deploy-channel[data-tone="warning"] { border-color: var(--uni-color-warning); }

.wf-deploy-channel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
}

.wf-deploy-channel-name {
    font-weight: 600;
    color: var(--uni-color-text);
    overflow-wrap: anywhere;
}

.wf-deploy-channel-reason {
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

/* ---------- Screen/Form Builder ---------- */

.wf-panel { max-height: 720px; overflow-y: auto; }

.wf-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-2);
}

.wf-screen-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uni-space-3);
}

.wf-check {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
    cursor: pointer;
    min-height: 32px;
}

.wf-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--uni-color-primary);
}

.wf-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }

.wf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--uni-font-size-sm); }

.wf-component-issues { color: var(--uni-color-danger); margin-bottom: var(--uni-space-2); }

/* ---------- Prévia aproximada (não é o renderizador da Meta) ---------- */

.wf-phone {
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-app-bg);
    overflow: hidden;
    max-width: 320px;
    width: 100%;
    margin: var(--uni-space-2) auto 0;
}

.wf-phone-bar {
    padding: var(--uni-space-2) var(--uni-space-3);
    border-bottom: 1px solid var(--uni-color-border);
    font-weight: 600;
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
    background: var(--uni-color-surface);
}

.wf-phone-body {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-3);
    min-height: 120px;
}

.wf-phone-body p { margin: 0; color: var(--uni-color-text); overflow-wrap: anywhere; }
.wf-p-heading { font-size: var(--uni-font-size-lg); font-weight: 700; }
.wf-p-subheading { font-size: var(--uni-font-size-md); font-weight: 600; }
.wf-p-body { font-size: var(--uni-font-size-sm); }
.wf-p-caption { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted) !important; }

.wf-p-input {
    border: 1px solid var(--uni-color-border-strong);
    border-radius: var(--uni-radius-md);
    padding: var(--uni-space-2) var(--uni-space-3);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
    background: var(--uni-color-surface);
}

.wf-p-group { display: flex; flex-direction: column; gap: var(--uni-space-1); }
.wf-p-label { font-size: var(--uni-font-size-sm); font-weight: 600; color: var(--uni-color-text); }
.wf-p-option { display: inline-flex; align-items: center; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); color: var(--uni-color-text); }
.wf-p-option.is-dynamic { color: var(--uni-color-text-muted); font-style: italic; }
.wf-p-optin { display: flex; align-items: flex-start; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); }

.wf-p-radio,
.wf-p-box {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1.5px solid var(--uni-color-border-strong);
    background: var(--uni-color-surface);
}
.wf-p-radio { border-radius: 50%; }
.wf-p-box { border-radius: 3px; }

.wf-phone-footer {
    padding: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
    background: var(--uni-color-surface);
}

.wf-phone-footer span {
    display: block;
    text-align: center;
    border-radius: 999px;
    padding: var(--uni-space-2);
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    font-weight: 600;
    font-size: var(--uni-font-size-sm);
}

/* ---------- Publicação e técnico ---------- */

.wf-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--uni-space-1) var(--uni-space-4);
    margin: 0 0 var(--uni-space-3);
    font-size: var(--uni-font-size-sm);
}
.wf-facts dt { color: var(--uni-color-text-muted); }
.wf-facts dd { margin: 0; color: var(--uni-color-text); overflow-wrap: anywhere; }

.wf-json {
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-app-bg);
    color: var(--uni-color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--uni-font-size-xs);
    white-space: pre;
}
.wf-json:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }

@media (max-width: 767px) {
    .wf-facts { grid-template-columns: minmax(0, 1fr); }
    .wf-facts dd { margin-bottom: var(--uni-space-2); }
    .wf-phone { max-width: 100%; }
}

/* ---------- UNIPLIM-WHATSAPP-FLOWS-02 — Atendimento: cartão do formulário no balão ---------- */

.crm-msg-wflow.is-response {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: min(260px, 100%);
}

.crm-msg-wflow-head {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
}
.crm-msg-wflow-head .crm-icon { width: 16px; height: 16px; color: var(--uni-color-success); flex: 0 0 auto; }
.crm-msg-wflow-version { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.crm-msg-wflow-answers {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px var(--uni-space-3);
    margin: 0;
    font-size: var(--uni-font-size-sm);
}
.crm-msg-wflow-answers dt { color: var(--uni-color-text-muted); }
.crm-msg-wflow-answers dd { margin: 0; color: var(--uni-color-text); overflow-wrap: anywhere; white-space: pre-wrap; }
.crm-msg-wflow-answers dd.is-sensitive { color: var(--uni-color-text-muted); font-style: italic; }

.crm-msg-wflow-note,
.crm-msg-wflow-empty { margin: 0; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.crm-msg-wflow-action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    min-height: 32px;
    padding: 0 var(--uni-space-3);
    border: 1px solid var(--uni-color-border-strong);
    border-radius: 999px;
    background: var(--uni-color-surface);
    color: var(--uni-color-primary);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    cursor: pointer;
}
.crm-msg-wflow-action .crm-icon { width: 16px; height: 16px; }
.crm-msg-wflow-action:hover { background: var(--uni-color-primary-soft); }
.crm-msg-wflow-action:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
.crm-msg-wflow-meta { align-self: flex-end; }

@media (max-width: 480px) {
    .crm-msg-wflow-answers { grid-template-columns: minmax(0, 1fr); }
    .crm-msg-wflow-answers dd { margin-bottom: var(--uni-space-1); }
}

/* ---------- Modal de envio ---------- */

.wf-send-list { display: flex; flex-direction: column; gap: var(--uni-space-2); margin-bottom: var(--uni-space-3); }

.wf-send-option {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    cursor: pointer;
}
.wf-send-option.is-selected { border-color: var(--uni-color-primary); box-shadow: 0 0 0 1px var(--uni-color-primary); }
.wf-send-option.is-disabled { cursor: not-allowed; opacity: 0.72; }
.wf-send-option input[type="radio"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--uni-color-primary); flex: 0 0 auto; }
.wf-send-option input[type="radio"]:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }
.wf-send-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-send-copy strong { color: var(--uni-color-text); font-size: var(--uni-font-size-sm); }
.wf-send-copy small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); overflow-wrap: anywhere; }

.wf-fallback-preview {
    margin: 0;
    padding: var(--uni-space-3);
    border: 1px dashed var(--uni-color-border-strong);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-app-bg);
    color: var(--uni-color-text);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- UNIPLIM-WHATSAPP-FLOWS-02 — Agent Experience Canvas (OD-F4) ---------- */

.ax-profile { min-width: 220px; }

.ax-lanes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--uni-space-4);
    align-items: start;
}

.ax-lane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-app-bg);
}

/* Conector entre raias (desktop): a leitura é da identidade aos limites. */
.ax-lane:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px;
    right: calc(var(--uni-space-4) * -1);
    width: var(--uni-space-4);
    border-top: 2px solid var(--uni-color-border-strong);
}

.ax-lane-title {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    margin: 0 0 var(--uni-space-1);
    font-size: var(--uni-font-size-sm);
    font-weight: 700;
    color: var(--uni-color-text);
}
.ax-lane-title .crm-icon { width: 16px; height: 16px; color: var(--uni-color-primary); }
.ax-lane-note { margin: 0; font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); }

.ax-node {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--uni-space-2) var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-left: 3px solid var(--uni-color-border-strong);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
    overflow-wrap: anywhere;
}
.ax-node strong { color: var(--uni-color-text); font-size: var(--uni-font-size-sm); }
.ax-node .app-badge { align-self: flex-start; margin-top: var(--uni-space-1); }
.ax-node.is-off { opacity: 0.6; }
.ax-node--primary { border-left-color: var(--uni-color-primary); }
.ax-detail { color: var(--uni-color-text-subtle); }
.ax-policy { font-weight: 600; }
.ax-policy--automatic { border-left-color: var(--uni-color-success); }
.ax-policy--requiresapproval { border-left-color: var(--uni-color-warning); }
.ax-policy--observe { border-left-color: var(--uni-color-info); }
.ax-policy--prohibited { border-left-color: var(--uni-color-danger); }

.ax-rules { margin: 0; padding-left: var(--uni-space-4); display: flex; flex-direction: column; gap: var(--uni-space-1); font-size: var(--uni-font-size-xs); color: var(--uni-color-text); }

@media (max-width: 1279px) {
    .ax-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ax-lane::after { display: none; }
}

@media (max-width: 767px) {
    .ax-lanes { grid-template-columns: minmax(0, 1fr); }
}

/* UNIPLIM-WHATSAPP-FLOWS-03 — Resultados: fatos do provedor e derivados em grupos visualmente separados. */
.wf-metrics-title {
    margin: var(--uni-space-4) 0 var(--uni-space-2);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--uni-color-text-muted);
}

.wf-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--uni-space-2);
}

.wf-metric {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
}

.wf-metrics-derived .wf-metric {
    border-style: dashed;
}

.wf-metric-value {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
    font-variant-numeric: tabular-nums;
}

.wf-metric-label {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}