/* ============================================================================
   UNICHAT-CAMPAIGN-DECISION-INTELLIGENCE-01 — D1.5 (Dynamic Segments em Contatos) e D2
   (exposição/fadiga/afinidade/settings). Só tokens de crm-theme.css.

   Faixas: <=767 tela cheia com regras empilhadas · 768..1023 idem · >=1024 detail surface ao lado
   da lista (segue uni-mobile-ux.css §7 para a transformação uni-detail-surface).
   ============================================================================ */

/* ---------- Reuso: chip row genérica (Automations G26 já tem .aut-chip, faltava o container) ---------- */

.aut-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aut-chip-row .automation-input { flex: 1; min-width: 140px; margin: 0; }

/* ---------- Seção "Segmentos dinâmicos" em Contatos → Listas ---------- */

.crm-lists-segments-section { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Badge "Dinâmica" na lista de Contatos → Listas ---------- */

.crm-lists-type-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: var(--crm-radius-sm); font-size: 11px; font-weight: 700; letter-spacing: .02em;
    border: 1px solid var(--crm-color-border);
}
.crm-lists-type-badge--dynamic { background: var(--crm-color-primary-soft); border-color: var(--crm-color-primary-border); color: var(--crm-color-primary-soft-text); }
.crm-lists-type-badge--static { background: var(--crm-color-surface-elevated); color: var(--crm-color-text-muted); }

/* ---------- Escolha de tipo ao criar (sheet) ---------- */

.segment-type-choice { display: flex; flex-direction: column; gap: 10px; }
.segment-type-option {
    display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px;
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface); cursor: pointer;
}
.segment-type-option:hover { border-color: var(--crm-color-primary-border); background: var(--crm-color-primary-soft); }
.segment-type-option strong { font-size: 14px; color: var(--crm-color-text); }
.segment-type-option span { font-size: 12.5px; color: var(--crm-color-text-muted); }

/* ---------- Builder shell (QUEM + SE + Prévia, dentro de .user-editor-body padrão) ---------- */

.segment-builder-surface { width: min(880px, calc(100vw - 32px)); max-height: min(860px, calc(100vh - 32px)); }
.segment-builder-body { display: flex; flex-direction: column; gap: 20px; }
.segment-builder-section { display: flex; flex-direction: column; gap: 10px; }
.segment-builder-section h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--crm-color-text); text-transform: uppercase; letter-spacing: .04em; }
.segment-builder-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--crm-color-text-muted); }
.segment-builder-preview { border-top: 1px solid var(--crm-color-border); padding-top: 16px; }

.segment-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.segment-preview-count { font-size: 14px; font-weight: 700; color: var(--crm-color-text); }
.segment-preview-count .muted { font-weight: 500; color: var(--crm-color-text-muted); font-size: 12px; }
.segment-preview-actions { display: flex; gap: 8px; }
.segment-preview-examples { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }

/* ---------- Rule tree (grupos AND/OR/NOT) ---------- */

.segment-rule-group {
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-md);
    padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--crm-color-surface);
}
.segment-rule-group--nested { background: var(--crm-color-surface-elevated); }
.segment-rule-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.segment-rule-op-label {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--crm-color-primary); background: var(--crm-color-primary-soft);
    border: 1px solid var(--crm-color-primary-border); border-radius: var(--crm-radius-sm); padding: 2px 8px;
}
.segment-rule-not-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--crm-color-text-muted); cursor: pointer; }
.segment-rule-not-toggle.is-active { color: var(--crm-color-danger); font-weight: 700; }

.segment-rule-and-divider { font-size: 11px; font-weight: 700; color: var(--crm-color-text-muted); text-align: center; padding: 2px 0; }

.segment-rule-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid var(--crm-color-border); border-radius: var(--crm-radius-sm);
    padding: 8px 10px; background: var(--crm-color-surface); cursor: pointer; text-align: left;
}
.segment-rule-row:hover { border-color: var(--crm-color-primary-border); }
.segment-rule-row--static { cursor: default; }
.segment-rule-row--static:hover { border-color: var(--crm-color-border); }
.segment-rule-row-label { font-size: 13px; color: var(--crm-color-text); }
.segment-rule-row-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.segment-rule-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.segment-rule-limit-hint { font-size: 11.5px; color: var(--crm-color-text-muted); }
.segment-rule-limit-hint.is-blocked { color: var(--crm-color-danger); font-weight: 600; }

/* ---------- Leaf editor sheet ---------- */

.segment-leaf-params { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.segment-leaf-error { color: var(--crm-color-danger); font-size: 12.5px; margin: 4px 0 0; }
.segment-enum-multi { display: flex; flex-wrap: wrap; gap: 10px; }
.segment-enum-option { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--crm-color-text); cursor: pointer; }
.segment-window { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--crm-color-text); }
input.segment-window-input { width: 80px; }

/* Bare inputs/selects rendered by the leaf editor's RenderFragments sit inside a .field-stack div
   (same as every other form in this codebase), so app.css's global ".field-stack input/select" rule
   already styles them — no scoped duplicate needed here. */

/* ---------- Explainability popover/sheet ---------- */

.segment-explain-list { display: flex; flex-direction: column; gap: 8px; }
.segment-explain-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.segment-explain-mark { flex: none; width: 18px; text-align: center; font-weight: 700; }
.segment-explain-mark.is-matched { color: var(--crm-color-success); }
.segment-explain-mark.is-unmatched { color: var(--crm-color-text-muted); }
.segment-explain-evidence { color: var(--crm-color-text-muted); font-size: 12px; }
.segment-explain-partial { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--crm-color-warning); margin-left: 4px; }

/* ---------- Mobile (<=1023): stacked groups, no side-by-side columns ---------- */

@media (max-width: 1023px) {
    .segment-builder-body { padding: 16px; }
    .segment-preview-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
    .segment-rule-row-label { font-size: 12.5px; }

    /* .modal-actions' shared min-width:130px per button (app.css) assumes 2 buttons; this builder
       has 3 (Cancelar / Salvar rascunho / Publicar) plus a spacing span, which needs 420px+ and
       clips "Publicar" at 390px. Stack full-width here instead of touching the shared rule. */
    .segment-builder-surface > footer.modal-actions {
        flex-wrap: wrap;
        padding: 12px 16px;
    }
    .segment-builder-surface > footer.modal-actions span { flex-basis: 100%; height: 0; }
    .segment-builder-surface > footer.modal-actions button { flex: 1 1 100%; min-width: 0; }
}

/* ============================================================================
   Construtor de regras — revisão visual do proprietário (2026-09-07)
   "Está tudo bagunçado, jogado de todo jeito, sem alinhamento, sem entender o que tem ligação
   com o que."

   Os três defeitos concretos e o que cada regra abaixo corrige:

   1. O "NÃO" aparecia DUAS VEZES na mesma linha — uma como prefixo do estado atual, outra como
      botão de inverter — e nada distinguia um do outro. O prefixo agora é um selo vermelho de
      estado; o botão vira ação discreta na área de ações, com rótulo próprio.
   2. O "E" entre condições flutuava centralizado, sem indicar que ligava a linha de cima à de
      baixo. Passa a ser um conector com filete, encostado à esquerda, alinhado à coluna das
      condições.
   3. Os botões de adicionar e o contador de condições ficavam soltos. Passam a formar uma faixa
      de rodapé alinhada à mesma coluna, com o contador à direita.
   ============================================================================ */

.segment-rule-root {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
}

/* 2) Conector "E" / "OU": filete vertical + rótulo, ancorado à esquerda. */
.segment-rule-and-divider {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    padding: 0 0 0 var(--uni-space-3);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    user-select: none;
}

.segment-rule-and-divider::before {
    content: "";
    width: 1px;
    height: 14px;
    background: var(--uni-color-border);
}

.segment-rule-row {
    min-height: 44px;
    padding: var(--uni-space-2) var(--uni-space-3);
    border-radius: var(--uni-radius-md);
    gap: var(--uni-space-3);
}

.segment-rule-row-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--uni-font-size-md);
    line-height: 1.35;
}

/* 1) Prefixo de estado: selo, não texto solto — e visualmente distinto do botão de inverter. */
.segment-rule-row > .segment-rule-op-label {
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--uni-color-danger) 40%, var(--uni-color-border));
    background: var(--uni-color-danger-soft);
    color: var(--uni-color-danger);
}

/* Botão de inverter: ação, não estado. Fica na área de ações, discreto até o hover. */
.segment-rule-not-toggle {
    padding: 2px var(--uni-space-2);
    border: 1px solid transparent;
    border-radius: var(--uni-radius-sm);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.segment-rule-not-toggle:hover {
    border-color: color-mix(in srgb, var(--uni-color-danger) 40%, var(--uni-color-border));
    background: var(--uni-color-danger-soft);
    color: var(--uni-color-danger);
}

.segment-rule-not-toggle.is-active {
    border-color: color-mix(in srgb, var(--uni-color-danger) 40%, var(--uni-color-border));
    background: var(--uni-color-danger-soft);
}

/* 3) Rodapé do construtor: ações à esquerda, contador à direita, na mesma coluna das condições. */
.segment-rule-actions-row {
    align-items: center;
    gap: var(--uni-space-2);
    margin-top: var(--uni-space-2);
}

.segment-rule-limit-hint {
    margin-left: auto;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

/* Seção do construtor: título na escada tipográfica (era 13px/700 uppercase, fora da escala). */
.segment-builder-section {
    gap: var(--uni-space-3);
}

.segment-builder-section h4 {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* O botão de inverter deixou de repetir a palavra "NÃO" (que já é o selo de estado à esquerda da
   linha) e passou a ser um ícone com nome acessível próprio. */
.segment-rule-not-toggle .crm-icon { width: 14px; height: 14px; }
.segment-rule-not-toggle { padding: 4px; }

/* O "X" de remover condição herdava `.automation-icon-btn` de Automações: caixa quadrada de 28px
   com borda, o mesmo peso visual da própria condição. Owner: "está horroroso, deixe mais elegante,
   veja se pode ser mais discreto."
   Vira um alvo circular sem chrome, que só aparece no hover da linha — presente quando procurado,
   silencioso quando não. */
.segment-rule-row .automation-icon-btn,
.segment-rule-group-head .automation-icon-btn {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--uni-color-text-subtle);
    opacity: 0.55;
    transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.segment-rule-row:hover .automation-icon-btn,
.segment-rule-group-head:hover .automation-icon-btn { opacity: 1; }

.segment-rule-row .automation-icon-btn:hover,
.segment-rule-group-head .automation-icon-btn:hover {
    background: var(--uni-color-danger-soft);
    color: var(--uni-color-danger);
    opacity: 1;
}

.segment-rule-row .automation-icon-btn .crm-icon,
.segment-rule-group-head .automation-icon-btn .crm-icon { width: 14px; height: 14px; }

/* Teclado não tem hover: o alvo precisa aparecer ao receber foco. */
.segment-rule-row .automation-icon-btn:focus-visible,
.segment-rule-group-head .automation-icon-btn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

/* ---------- Revisão visual do proprietário, segunda rodada (2026-09-07) ---------- */

/* "O E deve ser do mesmo tamanho do Se e alinhado horizontalmente."
   O conector era um micro-label recuado, com filete: lia como enfeite entre as linhas, não como
   irmão do "Se" que abre a seção. Passa a ter a mesma tipografia do título da seção e a mesma
   coluna de origem — o filete sai, porque agora a hierarquia é dada pelo texto. */
.segment-rule-and-divider {
    padding: var(--uni-space-1) 0;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.segment-rule-and-divider::before { content: none; }

/* "O botão de Negar condição quando marcado fica com um contorno retangular arredondado. Quero
   esse contorno circular e com uma borda quase imperceptível. Está se destacando muito."
   O alvo vira circular e o estado ativo passa a ser dito pela COR do ícone, não por um contorno
   que competia com a própria condição. */
.segment-rule-not-toggle {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
}

.segment-rule-not-toggle:hover {
    border-color: color-mix(in srgb, var(--uni-color-danger) 18%, transparent);
    background: var(--uni-color-danger-soft);
    color: var(--uni-color-danger);
}

.segment-rule-not-toggle.is-active {
    border-color: color-mix(in srgb, var(--uni-color-danger) 16%, transparent);
    background: transparent;
    color: var(--uni-color-danger);
}

.segment-rule-not-toggle.is-active:hover {
    background: var(--uni-color-danger-soft);
    border-color: color-mix(in srgb, var(--uni-color-danger) 26%, transparent);
}

/* O dropdown do picker é ancorado por uniUx.anchor (position: fixed), então precisa ficar acima
   do sheet/overlay — senão continuaria escondido atrás dele. */
.automation-picker-dropdown {
    z-index: calc(var(--uni-z-modal) + 5);
}

/* ---------- Revisão visual do proprietário, terceira rodada (2026-09-07) ---------- */

/* "No dropdown do combobox, quando passar o mouse sobre os itens da lista, deve haver um hover de
   seleção. E um efeito ao clicar também."
   O hover existia mas era um cinza quase idêntico à superfície; e não havia estado de clique.
   Agora o hover pinta com o primary suave e o clique responde na hora. */
.automation-picker-dropdown .automation-picker-option {
    padding: var(--uni-space-2) var(--uni-space-3);
    border-radius: var(--uni-radius-sm);
    font-size: var(--uni-font-size-md);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.automation-picker-dropdown .automation-picker-option:hover {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

.automation-picker-dropdown .automation-picker-option:active {
    background: color-mix(in srgb, var(--uni-color-primary) 24%, transparent);
}

/* Mesmo tratamento no UniCombobox, para os dois lerem igual. */
.uni-combobox-option:hover,
.uni-combobox-option.is-highlight {
    background: var(--uni-color-primary-soft);
    color: var(--uni-color-primary);
}

.uni-combobox-option:active {
    background: color-mix(in srgb, var(--uni-color-primary) 24%, transparent);
}

/* "Os chips podem ser menores e mais elegantes (cantos mais arredondados, menos padding vertical,
   texto menor)." */
.segment-id-list .aut-chip,
.segment-id-list .aut-chip--value {
    gap: var(--uni-space-1);
    padding: 1px var(--uni-space-1) 1px var(--uni-space-2);
    border-radius: var(--uni-radius-pill);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    line-height: 1.4;
}

.segment-id-list .aut-chip .automation-icon-btn {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: 0.6;
}

.segment-id-list .aut-chip .automation-icon-btn:hover { opacity: 1; background: color-mix(in srgb, var(--uni-color-danger) 16%, transparent); color: var(--uni-color-danger); }
.segment-id-list .aut-chip .automation-icon-btn .crm-icon { width: 11px; height: 11px; }

/* "O input que digita as campanhas deve ficar em um lugar fixo. Não no mesmo flexbox dos chips."
   O campo saía de lugar a cada chip adicionado, porque compartilhava a linha com eles. Agora tem
   linha própria, acima; os chips do que já foi escolhido se acumulam abaixo. */
.segment-id-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--uni-space-2);
}

.segment-id-list-field { width: 100%; }
.segment-id-list-field .automation-picker { width: 100%; }
.segment-id-list-field .automation-input { width: 100%; }

.segment-id-list-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uni-space-1);
    min-width: 0;
}

.segment-id-list-chips:empty { display: none; }

/* Dropdown do UniCombobox: altura limitada e rolagem própria — estava sendo cortado embaixo. */
.uni-combobox-dropdown {
    max-height: min(320px, 50vh);
    overflow-y: auto;
}

/* Grupos do dropdown do editor de condição: reproduzir o <optgroup> nativo que o proprietário
   aprovou — rótulo em texto normal com negrito leve, sem caixa alta e sem espaçamento de letra,
   e os itens do grupo recuados em relação a ele.
   Escopo local: os grupos do UniCombobox em outras superfícies continuam como estão até serem
   revistos, para não mudar aparência fora do que está sendo homologado. */
.segment-leaf-type .uni-combobox-group {
    padding: var(--uni-space-3) var(--uni-space-3) var(--uni-space-1);
    /* Mapeado do <optgroup> do navegador, que era a referencia aprovada: o rotulo tem o MESMO
       tamanho de fonte das opcoes (nao menor), peso 700 e a cor de texto cheia — e o que faz ele
       se destacar da lista. A versao anterior usava 13px/600, que lia como legenda. */
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.segment-leaf-type .uni-combobox-option {
    padding-left: var(--uni-space-5);
}