/* ================================================================================================
   UNIPLIM-CONVERSATIONAL-PLATFORM-FOUNDATION-01 — Automações → Chatbot (lista, detalhe, editor, teste).

   Regras desta folha:
   - só tokens `--uni-*` (nenhum tamanho, cor, raio, sombra ou z-index literal fora da escada);
   - o CANVAS é especializado (etapas, saídas, setas, grade); tudo em volta reusa a página de Automações
     (`ah-page`, `ah-section`, `uni-list-card`, `uni-field`, `UniTabs`, `UniModal`, `UniSectionAlert`);
   - estado selecionado nunca só por cor: anel de foco + destaque das setas ligadas;
   - ≤1023 o canvas some e a MESMA definição vira lista de etapas (`uni-scan-list`) + edição em UniModal.
   ================================================================================================ */

.cb-editor {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
    min-width: 0;
}

.cb-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
}

.cb-toolbar-meta {
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

.cb-toolbar-zoom.uni-desktop-only {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    margin-left: auto;
}

.cb-zoom-value {
    min-width: calc(var(--uni-space-8) + var(--uni-space-2));
    text-align: center;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Área de trabalho (desktop) ---------- */

.cb-workspace.uni-desktop-only {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: var(--uni-space-4);
    height: clamp(520px, 72vh, 920px);
    min-width: 0;
}

.cb-viewport {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background-color: var(--uni-color-app-bg);
    background-image: radial-gradient(var(--uni-color-border) 1px, transparent 1px);
    background-size: var(--uni-flow-grid, var(--uni-space-5)) var(--uni-flow-grid, var(--uni-space-5));
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.cb-viewport.is-panning { cursor: grabbing; }

.cb-stage {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.cb-edges {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
}

.cb-edge {
    fill: none;
    stroke: var(--uni-color-border-strong);
    stroke-width: 2;
}

.cb-edge.is-active {
    stroke: var(--uni-color-primary);
    stroke-width: 2.5;
}

.cb-arrow-head { fill: var(--uni-color-border-strong); }

/* ---------- Etapa ---------- */

.cb-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--uni-color-surface);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    box-shadow: var(--uni-shadow-sm);
}

.cb-node.is-dragging { box-shadow: var(--uni-shadow-md); opacity: 0.92; }
.cb-node.is-selected { border-color: var(--uni-color-primary); outline: 2px solid var(--uni-color-primary); outline-offset: 2px; }
.cb-node.has-error { border-color: var(--uni-color-danger); }
.cb-node.has-warning { border-color: var(--uni-color-warning); }

.cb-node-head {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    width: 100%;
    height: 58px;
    padding: 0 var(--uni-space-3);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: grab;
    border-radius: var(--uni-radius-md) var(--uni-radius-md) 0 0;
}

.cb-node-head:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }

.cb-node-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: calc(var(--uni-space-6) + var(--uni-space-1));
    height: calc(var(--uni-space-6) + var(--uni-space-1));
    border-radius: var(--uni-radius-sm);
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary-soft-text);
}

.cb-node-icon .crm-icon { width: 16px; height: 16px; }

.cb-node--start .cb-node-icon { background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.cb-node--humanhandoff .cb-node-icon { background: var(--uni-color-warning-soft); color: var(--uni-color-warning); }
.cb-node--agenthandoff .cb-node-icon { background: var(--uni-color-info-soft); color: var(--uni-color-info); }
.cb-node--end .cb-node-icon { background: var(--uni-color-neutral-soft); color: var(--uni-color-neutral); }

.cb-node-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cb-node-title,
.cb-node-summary {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cb-node-title {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--uni-color-text);
}

.cb-node-summary {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

.cb-node-badge { color: var(--uni-color-danger); display: inline-flex; }
.cb-node.has-warning .cb-node-badge { color: var(--uni-color-warning); }

/* UNIPLIM-V2-OVV-CORRECTIONS-01 (OVV-F50) — modo alça (data-flow-drag-mode="handle", Chatbot e Formulários): seleção ≠
   arraste. O cabeçalho/corpo é clique (cursor de ponteiro) e só a alça do canto ("Mover") arrasta; a alça tem área de toque
   própria e não deixa o navegador rolar durante o arraste. */
.cb-viewport[data-flow-drag-mode="handle"] .cb-node { cursor: pointer; }
.cb-viewport[data-flow-drag-mode="handle"] .cb-node-head { cursor: pointer; padding-right: calc(var(--uni-space-3) + 28px); }

.cb-node-grip {
    position: absolute;
    top: var(--uni-space-1);
    right: var(--uni-space-1);
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--uni-radius-sm);
    color: var(--uni-color-text-muted);
    cursor: grab;
    touch-action: none;
}

/* N8-6 (D-N5-02) — a alça entrou na ordem do Tab: o mesmo anel de foco do cabeçalho da tela (.cb-node-head:focus-visible). */
.cb-node-grip:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; }

.cb-node-grip:hover { background: var(--uni-color-neutral-soft); color: var(--uni-color-text); }
.cb-node.is-dragging .cb-node-grip { cursor: grabbing; }
.cb-node-grip .crm-icon { width: 16px; height: 16px; }

.cb-node-port {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 0 var(--uni-space-4) 0 var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

.cb-node-port span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.cb-port-dot {
    position: absolute;
    right: calc(var(--uni-space-1) * -1.5);
    width: 10px;
    height: 10px;
    border-radius: var(--uni-radius-pill);
    background: var(--uni-color-primary);
    border: 2px solid var(--uni-color-surface);
}

.cb-node-port.is-open .cb-port-dot {
    background: var(--uni-color-surface);
    border-color: var(--uni-color-border-strong);
    border-style: dashed;
}

.cb-node-port.is-open { color: var(--uni-color-text-subtle); }

/* ---------- Painel de edição ---------- */

.cb-panel {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    min-width: 0;
    overflow: auto;
    padding: var(--uni-space-4);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}

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

.cb-panel-title {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.cb-panel-empty {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.cb-panel-empty p { margin: 0; }
.cb-panel-empty strong { color: var(--uni-color-text); }

/* UNIPLIM-V2-OVV-UX-RESIDUAL-01 (OVV-F50) — "Posição na tela": cruz de setas (um ponteiro, sem arraste) no fim do painel da seleção,
   usada pelo Chatbot e pela Jornada dos formulários. */
.cb-position {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    margin-top: var(--uni-space-4);
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
}
.cb-position-title { font-size: var(--uni-font-size-sm); font-weight: 600; color: var(--uni-color-text); }
.cb-position-pad {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-areas: ". up ." "left . right" ". down .";
    gap: var(--uni-space-1);
    justify-content: start;
}
.cb-position-up { grid-area: up; }
.cb-position-left { grid-area: left; }
.cb-position-right { grid-area: right; }
.cb-position-down { grid-area: down; }

.cb-inspector {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    min-width: 0;
}

.cb-inspector-type {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text-muted);
}

.cb-subsection { display: flex; flex-direction: column; gap: var(--uni-space-3); }

.cb-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--uni-space-2);
    align-items: end;
}

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

.cb-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uni-space-3);
}

.cb-form-row-end { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

.cb-inspector-footer {
    padding-top: var(--uni-space-3);
    border-top: 1px solid var(--uni-color-border);
}

.cb-issue-list {
    margin: 0;
    padding-left: var(--uni-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
}

/* ---------- Lista de etapas (≤1023) ---------- */

@media (max-width: 1023px) {
    .cb-step-list.uni-mobile-only {
        display: flex !important;
        flex-direction: column;
        gap: var(--uni-space-2);
    }
}

@media (max-width: 767px) {
    .cb-option-row,
    .cb-form-row { grid-template-columns: minmax(0, 1fr); }
    .cb-option-row { align-items: stretch; }
}

/* ---------- Teste de conversa ---------- */

/* F12 — conversa + composer (UniChatComposer) num cartão só; o composer é a base do cartão, como em /ajuda. */
.cb-sim-chat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-app-bg);
    overflow: hidden;
}

.cb-sim-transcript {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-height: 200px;
    max-height: 440px;
    overflow: auto;
    padding: var(--uni-space-4);
}

.cb-sim-bubble {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    max-width: 80%;
    padding: var(--uni-space-2) var(--uni-space-3);
    border-radius: var(--uni-radius-md);
    white-space: pre-wrap;
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
}

.cb-sim-bubble--customer { align-self: flex-end; background: var(--uni-color-primary-soft); }
.cb-sim-bubble--bot { align-self: flex-start; background: var(--uni-color-surface); border: 1px solid var(--uni-color-border); }

.cb-sim-speaker { font-size: var(--uni-font-size-2xs); color: var(--uni-color-text-muted); }

.cb-sim-status {
    margin: 0;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}


.cb-steps {
    margin: 0;
    padding-left: var(--uni-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
}

.cb-vars {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--uni-space-1) var(--uni-space-3);
    margin: var(--uni-space-3) 0 0;
    font-size: var(--uni-font-size-xs);
}

.cb-vars dt { color: var(--uni-color-text-muted); }
.cb-vars dd { margin: 0; color: var(--uni-color-text); overflow-wrap: anywhere; }

.cb-list .uni-list-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto; }

@media (max-width: 767px) {
    .cb-sim-bubble { max-width: 92%; }
    .cb-sim-transcript { min-height: 160px; max-height: 55dvh; padding: var(--uni-space-3); }
}

/* ---------- UNIPLIM-V3-02 — jornada guiada (inspector) ----------
   Anatomia da caixa de marcação reproduzida com tokens desta superfície (G44: não referenciar .aiproc-check fora do procedimento). */
.cb-check { display: inline-flex; align-items: center; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); color: var(--uni-color-text); }
.cb-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--uni-space-2); }
.cb-journey-slots { display: flex; flex-direction: column; gap: var(--uni-space-1); }
.cb-upgrade-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); gap: var(--uni-space-3); align-items: center; }
@media (max-width: 767px) {
    .cb-upgrade-row { grid-template-columns: minmax(0, 1fr); }
}