/* ============================================================================
   UNICHAT-MOBILE-UX-ARCHITECTURE-01 (Phase B / B1) — primitivos de ARQUITETURA DE INTERAÇÃO
   mobile. Complementa uni-components.css (composição visual) sem redefinir tokens: usa apenas
   --uni-* e --crm-color-* já homologados. Nada aqui altera o desktop (>=1024): tudo que muda a
   composição vive dentro de @media (max-width: 1023px) / 767px, e os primitivos de menu/sheet/
   chips têm aparência neutra fora dessas faixas.

   Sumário:
     1. App bar de página (UniPageAppBar / UniDetailHeader) + interplay com o chrome global
     2. Menu de overflow (UniMenu)
     3. Sheet (UniSheet)
     4. Chips de filtro ativo (UniFilterChips)
     5. Linha de scan (UniScanRow)
     6. Barra de seleção (UniSelectionBar)
     7. Superfície de detalhe (uni-detail-surface)
     8. Utilitários (segmented, search row, hide-on-mobile helpers)
   ============================================================================ */

/* ---------- 0. Tokens de ritmo do shell mobile ---------- */

:root {
    --uni-appbar-h: 64px;
    /* Respiro entre a app bar e o primeiro elemento do conteúdo. */
    --uni-appbar-gap: 16px;
    /* Respiro no fim de qualquer superfície rolável: nada encosta na borda inferior. */
    --uni-page-tail: 32px;
}

/* Padding horizontal corrente do container de página — a app bar e as faixas roláveis
   usam este valor para romper a margem sem chutar pixels. Páginas que redefinem o
   próprio padding redefinem também esta variável (bloco 10). */
.crm-page-container {
    --uni-page-pad-x: 32px;
}

/* ---------- 1. App bar de página ---------- */

.uni-appbar {
    display: none;
}

.uni-appbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.uni-appbar-btn:hover,
.uni-appbar-btn:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.uni-appbar-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

.uni-appbar-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.uni-appbar-btn.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.uni-appbar-btn .crm-icon,
.uni-appbar-btn svg {
    width: 22px;
    height: 22px;
}

.uni-appbar-btn-wrap {
    position: relative;
    display: inline-flex;
}

.uni-appbar-dot {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--crm-color-primary);
    box-shadow: 0 0 0 2px var(--crm-color-sidebar-bg);
}

@media (max-width: 1023px) {
    .uni-appbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px;
        min-height: calc(64px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
        background: var(--crm-color-sidebar-bg);
        color: #ffffff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        position: sticky;
        top: 0;
        z-index: var(--uni-z-sticky);
        box-sizing: border-box;
    }

    /* A app bar é o teto fixo da rota: o container de página zera o padding de topo para
       que ela encoste no topo (um sticky não pode sair da caixa de conteúdo do pai — era daí
       que vinha a brecha por onde o conteúdo passava) e ela rompe o padding lateral usando
       --uni-page-pad-x, respeitando páginas que redefinem o próprio padding. */
    .crm-page-container.crm-page-container:has(> .uni-appbar) {
        padding-top: 0;
        overflow-x: hidden;
        scroll-padding-top: var(--uni-appbar-h);
    }

    .crm-page-container > .uni-appbar {
        margin-top: 0;
        margin-inline: calc(-1 * var(--uni-page-pad-x));
        margin-bottom: var(--uni-appbar-gap);
        width: calc(100% + 2 * var(--uni-page-pad-x));
    }

    /* Nada encosta na app bar: o primeiro elemento útil abaixo dela sempre respira, mesmo
       quando ele traz margem negativa ou o container não tem gap próprio. */
    .crm-page-container > .uni-appbar + * {
        margin-top: 0;
    }

    /* OD-2 B: nas rotas que têm app bar de página o topbar de PRODUTO sai — a marca fica no
       drawer e o sino no drawer/"Mais". Bottom nav e drawer continuam do chrome global. */
    .crm-shell:has(.uni-appbar) .crm-mobile-topbar {
        display: none;
    }

    /* O cabeçalho de página do corpo (título + subtítulo + ações) é substituído pela app bar. */
    .crm-page-container:has(> .uni-appbar) > .crm-page-header,
    .crm-page-container:has(> .uni-appbar) > .cmp-header,
    .crm-page-container:has(> .uni-appbar) > .automation-header,
    .crm-page-container:has(> .uni-appbar) > .tpl-header,
    .crm-page-container:has(> .uni-appbar) > .ops-header {
        display: none;
    }
    /* `.kanban-board-header` saiu desta lista em
       UNICHAT-KANBAN-AGENDA-TAREFAS-VISUAL-ASSISTED-CONVERGENCE-01: o Kanban passou a usar o
       `CrmPageHeader` canônico, que a primeira linha desta regra já cobre. Seletor sem alvo é a
       terceira armadilha do §22.2 — some junto com a ficha que ele escondia. */

    .uni-appbar-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: 0 4px;
    }

    .uni-appbar-h {
        display: block;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .uni-appbar-sub,
    .uni-appbar-eyebrow {
        display: block;
        font-size: 12px;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.72);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .uni-appbar-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 10.5px;
        font-weight: 700;
    }

    .uni-appbar-actions {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* Chip de estado dentro da app bar (ex.: "IA atende" na conversa). */
    .uni-appbar-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        min-height: 26px;
        padding: 2px 10px 2px 8px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.1;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .uni-appbar-chip .crm-icon,
    .uni-appbar-chip svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
    }

    .uni-appbar-chip-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 auto;
    }

    .uni-appbar-chip.is-ai { color: #9ad0ff; }
    .uni-appbar-chip.is-me { color: #9be7b5; }
    .uni-appbar-chip.is-other { color: #ffd98a; }
    .uni-appbar-chip.is-waiting { color: #ffb3a7; }

    .uni-appbar-chip:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.75);
        outline-offset: 2px;
    }
}



/* ---------- 2. Menu de overflow ---------- */

.uni-menu {
    position: relative;
    display: inline-flex;
}

.uni-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--uni-z-dropdown) - 1);
    background: transparent;
}

/* UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01, revisao visual do proprietario (2026-09-07):
   "o icone dos 3 pontinhos pode ficar sem contorno. So o icone."
   O gatilho de overflow nao e uma acao de igual peso as outras da barra — desenhar uma borda em
   volta dele dava a ele o mesmo peso visual de um botao secundario. Passa a ser so o glifo, com o
   alvo de toque preservado, e ganha chrome apenas no hover/foco. */
.uni-menu-trigger,
.uni-menu-row-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--crm-color-text-muted);
    border-radius: 999px;
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
}

.uni-menu-row-trigger {
    border-color: transparent;
    background: transparent;
    color: var(--crm-color-text-muted);
    min-width: 40px;
    min-height: 40px;
    padding: 0;
}

.uni-menu-trigger:hover,
.uni-menu-row-trigger:hover,
.uni-menu-trigger:focus-visible,
.uni-menu-row-trigger:focus-visible {
    color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    border-color: transparent;
}

.uni-menu-row-trigger:hover,
.uni-menu-row-trigger:focus-visible {
    border-color: transparent;
    background: var(--crm-color-primary-soft);
}

.uni-menu-trigger .crm-icon,
.uni-menu-row-trigger .crm-icon {
    width: 18px;
    height: 18px;
}

.uni-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: var(--uni-z-dropdown);
    min-width: 220px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 6px;
    background: var(--crm-color-surface-elevated, var(--crm-color-surface));
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
    color: var(--crm-color-text);
    text-align: left;
    /* Observação do proprietário (2026-09-08): o conteúdo do menu vazava para fora do painel em
       Atendimentos. `uniUx.anchor` já media o espaço disponível e escrevia `max-height`, mas sem
       `overflow-y` o conteúdo simplesmente transbordava a caixa em vez de rolar dentro dela — a
       altura era respeitada pelo painel e ignorada pelo conteúdo. Vale para todo UniMenu do app,
       não só para esta superfície. */
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* O painel recebe foco por programa quando abre (é o que faz o Escape funcionar). O anel de
   foco ali não comunica nada — quem tem foco visível é o item que o teclado percorre. */
.uni-menu-panel:focus { outline: none; }
.uni-menu-panel.is-left {
    right: auto;
    left: 0;
}

.uni-menu-heading {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--crm-color-text-muted);
}

.uni-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--crm-color-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.uni-menu-item .crm-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--crm-color-text-muted);
}

.uni-menu-item small {
    margin-left: auto;
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

/* CUT 5F — item em duas linhas (rótulo + descrição). A descrição quebra dentro do painel em vez de
   vazar pela direita, como o `small` (sufixo de uma linha) fazia quando recebia uma frase. */
.uni-menu-item .uni-menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.uni-menu-item .uni-menu-item-desc {
    font-size: 12px;
    line-height: 1.3;
    color: var(--crm-color-text-muted);
    white-space: normal;
}

.uni-menu-item.has-desc {
    align-items: flex-start;
    padding-block: 9px;
}

.uni-menu-item.has-desc .crm-icon {
    margin-top: 1px;
}

.uni-menu-item:hover:not(:disabled),
.uni-menu-item:focus-visible:not(:disabled) {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
}

.uni-menu-item:disabled {
    opacity: 0.5;
    cursor: default;
}

.uni-menu-item.is-danger {
    color: var(--crm-color-danger);
}

.uni-menu-item.is-danger .crm-icon {
    color: var(--crm-color-danger);
}

.uni-menu-check {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-color-primary);
    flex: 0 0 auto;
}

/* Quando o item marcavel TEM icone, a marca vai para o fim da linha: assim o icone fica na mesma
   coluna dos demais itens do menu, que era a queixa medida. */
.uni-menu-check.is-trailing {
    margin-left: auto;
}

.uni-menu-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--crm-color-border);
}

/* ---------- 3. Sheet ---------- */

.uni-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--uni-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.uni-sheet-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: default;
}

.uni-sheet {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(560px, calc(100vw - 32px));
    max-height: min(92dvh, calc(100dvh - 32px));
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.28));
    overflow: hidden;
    outline: none;
}

.uni-sheet--large {
    width: min(720px, calc(100vw - 32px));
}

.uni-sheet-head {
    padding: 10px 16px 10px;
    border-bottom: 1px solid var(--crm-color-border);
}

.uni-sheet-grip {
    display: none;
}

.uni-sheet-head-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.uni-sheet-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.uni-sheet-titles h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.uni-sheet-titles p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--crm-color-text-muted);
}

.uni-sheet-head-actions {
    display: flex;
    gap: 6px;
}

.uni-sheet-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: -4px -8px -4px 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--crm-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uni-sheet-close:hover,
.uni-sheet-close:focus-visible {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary);
}

.uni-sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.uni-sheet-foot {
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
}

.uni-sheet-foot > * {
    flex: 1 1 0;
}

/* Conteúdo padrão de sheet: formulário empilhado, listas de opção e ações. */
.uni-sheet-form {
    display: grid;
    gap: 14px;
}

.uni-sheet-form label,
.uni-sheet-field {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.uni-sheet-form select,
.uni-sheet-form textarea,
.uni-sheet-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font: inherit;
    font-weight: 400;
    box-sizing: border-box;
}

/* UNICHAT-CAMPAIGN-DECISION-INTELLIGENCE-01 — primeiro uso de <textarea> dentro de uni-sheet-form;
   a regra acima cobria só select/input. Redimensiona só verticalmente para não estourar a largura
   do sheet. */
.uni-sheet-form textarea {
    resize: vertical;
    min-height: 64px;
}

.uni-sheet-form select:focus-visible,
.uni-sheet-form textarea:focus-visible,
.uni-sheet-form input:not([type="checkbox"]):not([type="radio"]):focus-visible {
    outline: none;
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
}

.uni-sheet-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-weight: 500 !important;
}

.uni-sheet-toggle input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
}

.uni-sheet-group {
    display: grid;
    gap: 4px;
}

.uni-sheet-group-title {
    margin: 4px 0 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crm-color-text-muted);
}

.uni-sheet-options {
    display: grid;
    gap: 2px;
}

.uni-sheet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--crm-color-text);
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.uni-sheet-option .crm-icon {
    width: 20px;
    height: 20px;
    color: var(--crm-color-text-muted);
    flex: 0 0 auto;
}

.uni-sheet-option small {
    display: block;
    color: var(--crm-color-text-muted);
    font-size: 12px;
}

.uni-sheet-option-body {
    flex: 1 1 auto;
    min-width: 0;
}

.uni-sheet-option-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--uni-option-color, var(--crm-color-primary));
}

.uni-sheet-option:hover:not(:disabled),
.uni-sheet-option:focus-visible:not(:disabled) {
    background: var(--crm-color-primary-soft);
}

.uni-sheet-option.is-selected {
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
    font-weight: 600;
}

.uni-sheet-option.is-danger {
    color: var(--crm-color-danger);
}

.uni-sheet-option:disabled {
    opacity: 0.5;
    cursor: default;
}

.uni-sheet-note {
    margin: 0;
    font-size: 13px;
    color: var(--crm-color-text-muted);
    line-height: 1.45;
}

.uni-sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.uni-sheet-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.uni-sheet-chip.is-active {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
}

body:has(.uni-sheet-overlay) {
    overflow: hidden;
}

@media (max-width: 767px) {
    .uni-sheet-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .uni-sheet {
        width: 100%;
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 24px));
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        animation: uni-sheet-up 200ms ease-out;
    }

    .uni-sheet-grip {
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 8px;
        border-radius: 2px;
        background: var(--crm-color-border);
    }

    .uni-sheet-foot {
        flex-direction: column-reverse;
    }

    .uni-sheet-foot > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .uni-sheet-foot .app-button,
    .uni-sheet-foot button {
        min-height: 44px;
    }
}

@keyframes uni-sheet-up {
    from { transform: translateY(24px); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .uni-sheet { animation: none; }
}

/* ---------- 4. Chips de filtro ativo ---------- */

.uni-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0 6px;
    margin-bottom: 8px;
    min-width: 0;
}

.uni-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 6px 0 12px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.uni-filter-chip-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uni-filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.uni-filter-chip-x .crm-icon {
    width: 14px;
    height: 14px;
}

.uni-filter-chip-x:hover,
.uni-filter-chip-x:focus-visible {
    background: rgba(0, 0, 0, 0.08);
}

.uni-filter-chip--clear {
    padding: 0 12px;
    border-color: var(--crm-color-border);
    background: transparent;
    color: var(--crm-color-text-muted);
    cursor: pointer;
}

/* ---------- 5. Linha de scan ---------- */

.uni-scan-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.uni-scan-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    cursor: pointer;
    box-sizing: border-box;
    min-width: 0;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.uni-scan-row:hover,
.uni-scan-row:focus-visible {
    border-color: var(--crm-color-primary);
}

.uni-scan-row:focus-visible {
    outline: 2px solid var(--crm-color-primary);
    outline-offset: 1px;
}

.uni-scan-row.is-selected {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
}

.uni-scan-row.is-muted {
    opacity: 0.72;
}

.uni-scan-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.uni-scan-check.is-on {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary);
}

.uni-scan-check .crm-icon {
    width: 16px;
    height: 16px;
}

.uni-scan-leading {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uni-scan-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
    overflow: hidden;
    flex: 0 0 auto;
}

.uni-scan-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uni-scan-avatar--square {
    border-radius: 12px;
}

.uni-scan-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uni-scan-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.uni-scan-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uni-scan-time {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
}

.uni-scan-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    max-width: 45%;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
    border: 1px solid var(--crm-color-border);
}

.uni-scan-status--success { background: color-mix(in srgb, var(--crm-color-success, #16a34a) 14%, transparent); color: var(--crm-color-success, #15803d); border-color: transparent; }
.uni-scan-status--warning { background: color-mix(in srgb, var(--crm-color-warning, #d97706) 16%, transparent); color: var(--crm-color-warning, #b45309); border-color: transparent; }
.uni-scan-status--danger { background: color-mix(in srgb, var(--crm-color-danger, #dc2626) 14%, transparent); color: var(--crm-color-danger, #b91c1c); border-color: transparent; }
.uni-scan-status--info { background: var(--crm-color-primary-soft); color: var(--crm-color-primary-soft-text, var(--crm-color-primary)); border-color: transparent; }
.uni-scan-status--muted { opacity: 0.8; }

.uni-scan-sub {
    font-size: 13px;
    line-height: 1.3;
    color: var(--crm-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uni-scan-meta {
    font-size: 12px;
    line-height: 1.3;
    color: var(--crm-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uni-scan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.uni-scan-tag {
    display: inline-flex;
    align-items: center;
    max-width: 140px;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uni-scan-tag--more {
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
}

.uni-scan-trailing {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: -4px;
}

.uni-scan-chevron {
    flex: 0 0 auto;
    color: var(--crm-color-text-muted);
    display: inline-flex;
}

.uni-scan-chevron .crm-icon {
    width: 18px;
    height: 18px;
}

/* Ação primária compacta na linha (1 por linha, contrato E). */
.uni-scan-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-primary);
    background: var(--crm-color-surface);
    color: var(--crm-color-primary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.uni-scan-action.is-primary {
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary, #fff);
}

.uni-scan-action:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------- 6. Barra de seleção ---------- */

.uni-selection-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--uni-z-nav) + 1);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--crm-color-sidebar-bg);
    color: #ffffff;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
    /* O fundo é escuro nos DOIS temas. Sem isto o checkbox nativo do "Selecionar todos" desenha
       com o esquema claro — a mesma armadilha já registrada em VL-37 para <select>/<option>. */
    color-scheme: dark;
}

/* FU-01 — revisão do proprietário: *"está por trás do Sidebar do shell. Deve ser algo como
   flutuante, apenas na área do painel central, com bordas arredondadas, afastado das
   extremidades."*

   Causa real: a barra nasceu no contrato MOBILE (`left: 0; right: 0; bottom: 0`), onde a
   navegação é a bottom nav e não existe sidebar. No desktop o shell tem um rail permanente de
   `--crm-sidebar-collapsed-width` à esquerda, então `left: 0` coloca a contagem e o
   "Selecionar todos" LITERALMENTE debaixo da sidebar — medido: barra em x=0..1440 com a
   sidebar ocupando x=0..72.

   A correção usa o próprio token do rail, não um número: o rail é `flex: 0 0` e nunca empurra
   o conteúdo (a sidebar cresce POR CIMA no hover), então a borda esquerda do painel central é
   exatamente essa largura em qualquer estado da sidebar. */
@media (min-width: 1024px) {
    .uni-selection-bar {
        left: calc(var(--crm-sidebar-collapsed-width) + var(--uni-space-6));
        right: var(--uni-space-6);
        bottom: var(--uni-space-5);
        width: auto;
        max-width: 760px;
        margin-inline: auto;
        padding: var(--uni-space-3) var(--uni-space-4);
        border-radius: var(--uni-radius-lg);
        box-shadow: var(--uni-shadow-lg);
    }

    /* Flutuar por cima do conteúdo só é aceitável se o conteúdo puder rolar por baixo dela:
       sem isto a última linha da lista fica inalcançável enquanto a barra existe. */
    .crm-shell:has(.uni-selection-bar) .crm-page-container {
        padding-bottom: calc(60px + var(--uni-space-5) + var(--uni-space-5));
    }
}

.uni-selection-count {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.2;
}

.uni-selection-count strong {
    font-size: 15px;
}

/* FU-02 — "Selecionar todos" deixa de ser link e vira caixa de verdade: ela espelha o estado e
   alterna nos dois sentidos. O rótulo fica ao LADO da caixa, como em `.uni-field-check`. */
.uni-selection-all {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    font-size: 13px;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    align-self: flex-start;
}

.uni-selection-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--uni-color-primary);
    cursor: pointer;
}

.uni-selection-count-value {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    padding-top: 2px;
}

.uni-selection-count-value strong {
    color: #ffffff;
}

.uni-selection-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.uni-selection-actions .app-button,
.uni-selection-actions button {
    min-height: 40px;
}

.uni-selection-exit {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uni-selection-exit:hover,
.uni-selection-exit:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
    .crm-shell:has(.uni-selection-bar) .crm-mobile-nav {
        display: none;
    }

    .crm-shell:has(.uni-selection-bar) .crm-shell-main {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- 7. Superfície de detalhe ---------- */

.uni-detail-head {
    display: none;
}

@media (max-width: 1023px) {
    /* Aplicado ao contêiner do detalhe (modal/drawer legado) para virar tela cheia com
       app bar própria. A regra tem especificidade alta de propósito: os modais legados
       (.user-editor, .kanban-drawer, .cmp-drawer, .aut-modal) posicionam por transform. */
    .uni-detail-surface.uni-detail-surface {
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 0;
        transform: none;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        z-index: var(--uni-z-modal);
        background: var(--crm-color-surface);
        overflow: hidden;
    }

    .uni-detail-surface > .uni-detail-head {
        display: grid;
        position: relative;
        margin: 0;
        width: auto;
    }

    /* Os cabeçalhos de modal legados são substituídos pela app bar de detalhe. */
    .uni-detail-surface > .modal-header,
    .uni-detail-surface > header:not(.uni-detail-head),
    .uni-detail-surface > .kanban-drawer-header {
        display: none;
    }

    .uni-detail-body,
    .uni-detail-surface > .user-editor-body,
    .uni-detail-surface > .kanban-drawer-body,
    .uni-detail-surface > .cmp-drawer-body,
    .uni-detail-surface > .aut-modal-body {
        overflow-y: auto;
        min-height: 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    .uni-detail-foot {
        display: flex;
        gap: 8px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--crm-color-border);
        background: var(--crm-color-surface);
    }

    .uni-detail-foot > * {
        flex: 1 1 0;
        min-height: 44px;
    }

    body:has(.uni-detail-surface) {
        overflow: hidden;
    }

    /* Seções de detalhe colapsáveis: sumário sempre visível, corpo sob demanda. */
    .uni-detail-section {
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-md);
        background: var(--crm-color-surface);
        margin-bottom: 10px;
    }

    .uni-detail-section > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 48px;
        padding: 8px 14px;
        list-style: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
    }

    .uni-detail-section > summary::-webkit-details-marker { display: none; }

    .uni-detail-section > summary small {
        color: var(--crm-color-text-muted);
        font-weight: 500;
        font-size: 12px;
    }

    .uni-detail-section > summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--crm-color-text-muted);
        border-bottom: 2px solid var(--crm-color-text-muted);
        transform: rotate(45deg);
        flex: 0 0 auto;
        margin-left: 6px;
        transition: transform 120ms;
    }

    .uni-detail-section[open] > summary::after {
        transform: rotate(-135deg);
    }

    .uni-detail-section > *:not(summary) {
        padding: 0 14px 14px;
    }
}

/* ---------- 8. Utilitários ---------- */

/* Faixa única de segmentação (status/etapas/visões) — chips roláveis. */
.uni-segmented {
    display: flex;
    gap: 6px;
    padding: 2px 0 6px;
    min-width: 0;
}

.uni-segmented-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.uni-segmented-item .uni-segmented-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
    font-size: 11px;
}

.uni-segmented-item.is-active {
    border-color: var(--crm-color-primary);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text, var(--crm-color-primary));
}

.uni-segmented-item.is-active .uni-segmented-count {
    background: var(--crm-color-primary);
    color: #ffffff;
}

/* Campo de busca P0 fixo abaixo da app bar (contrato I). */
.uni-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    margin-bottom: 10px;
    border: 1px solid var(--crm-color-border);
    border-radius: 999px;
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    min-width: 0;
}

.uni-search-row .crm-icon {
    width: 18px;
    height: 18px;
    color: var(--crm-color-text-muted);
    flex: 0 0 auto;
}

.uni-search-row input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    min-height: 42px;
    outline: none;
}

.uni-search-row button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--crm-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Chip de alerta compacto (health/estado) — 1 linha, tocável. */
.uni-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    padding: 0 14px 0 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--crm-color-warning, #d97706) 45%, transparent);
    background: color-mix(in srgb, var(--crm-color-warning, #d97706) 12%, transparent);
    color: var(--crm-color-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.uni-alert-chip.is-danger {
    border-color: color-mix(in srgb, var(--crm-color-danger, #dc2626) 45%, transparent);
    background: color-mix(in srgb, var(--crm-color-danger, #dc2626) 12%, transparent);
}

.uni-alert-chip.is-info {
    border-color: color-mix(in srgb, var(--crm-color-primary) 40%, transparent);
    background: var(--crm-color-primary-soft);
}

.uni-alert-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visibilidade por faixa — complementa uni-mobile-only/uni-desktop-only (<=1023) com o corte
   de conteúdo (<=767). */
.uni-phone-only { display: none !important; }

@media (max-width: 767px) {
    .uni-phone-only { display: revert !important; }
    .uni-phone-hide { display: none !important; }
}

/* Paginação compacta ao FIM da lista no mobile (contrato H). */
.uni-list-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0 4px;
    font-size: 12.5px;
    color: var(--crm-color-text-muted);
}

.uni-list-foot button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-weight: 600;
    cursor: pointer;
}

.uni-list-foot button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---------- 9. Interplay com uni-mobile-only (display: revert !important) ----------
   Os primitivos abaixo precisam do seu display próprio quando marcados como mobile-only. */
@media (max-width: 1023px) {
    .uni-search-row.uni-mobile-only,
    .uni-filter-chips.uni-mobile-only,
    .uni-scan-list.uni-mobile-only,
    .uni-list-foot.uni-mobile-only,
    .crm-tasks-mobile.uni-mobile-only,
    .crm-dashboard-mobile-controls.uni-mobile-only,
    .crm-thread-actions-compact.uni-mobile-only {
        display: flex !important;
    }

    .crm-agenda-mobile-controls.uni-mobile-only {
        display: grid !important;
    }

    .uni-menu.uni-mobile-only {
        display: inline-flex !important;
    }

    .uni-scan-list.uni-mobile-only,
    .crm-tasks-mobile.uni-mobile-only {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .aut-modal .aut-modal-subtitle {
        display: none;
    }
}


/* ============================================================================
   10. RITMO, RESPIRO E BORDAS (UNICHAT-MOBILE-UX-ARCHITECTURE-01 — Phase B / B8)

   Regras gerais de espaçamento do app mobile, aplicadas a todas as rotas:
     a) o scroll acontece abaixo da app bar, nunca por trás dela;
     b) nenhum elemento encosta na app bar nem nas bordas da tela;
     c) toda superfície rolável termina com respiro (--uni-page-tail);
     d) faixas horizontais entram alinhadas à margem e terminam cortadas na borda,
        que é a própria affordance de "tem mais coisa para o lado".
   ============================================================================ */

@media (max-width: 1023px) {
    .crm-page-container {
        --uni-page-pad-x: 24px;
    }

    /* Campanhas mantém padding próprio (32px no tablet, 12px no celular). */
    .crm-page-container.cmp-page {
        --uni-page-pad-x: 32px;
    }

    /* c) fim de página com respiro — o último card nunca encosta na borda inferior. */
    .crm-page-container.crm-page-container:has(> .uni-appbar) {
        padding-bottom: var(--uni-page-tail);
    }

    /* b) o chrome da rota não encolhe: em containers flex-column com altura fixa os blocos de
          topo eram espremidos (as abas do Atendente de IA ficavam com 1px e sumiam). */
    .crm-page-container > .uni-appbar,
    .crm-page-container > .uni-search-row,
    .crm-page-container > .uni-filter-chips,
    .crm-page-container > .uni-tabs-scroll,
    .crm-page-container > .uni-segmented,
    .crm-page-container > .uni-alert-chip {
        flex: 0 0 auto;
    }

    /* d) faixa horizontal edge-to-edge: entra na margem, sai cortada na borda direita e
          só ganha respiro no fim da rolagem. */
    .uni-edge-scroll {
        margin-inline: calc(-1 * var(--uni-page-pad-x, 20px));
        padding-inline: var(--uni-page-pad-x, 20px) 0;
        scroll-padding-inline: var(--uni-page-pad-x, 20px) 0;
        max-width: none;
        width: auto;
    }

    .uni-edge-scroll > :last-child {
        margin-inline-end: var(--uni-page-pad-x, 20px);
    }

    /* Superfícies de detalhe (modal/drawer legado em tela cheia) também terminam com respiro. */
    .uni-detail-surface .uni-detail-body,
    .uni-detail-surface > .kanban-drawer-body,
    .uni-detail-surface > .cmp-drawer-body,
    .uni-detail-surface > .aut-modal-body,
    .uni-detail-surface > .user-editor-body {
        padding-bottom: var(--uni-page-tail);
    }
}

@media (max-width: 767px) {
    .crm-page-container {
        --uni-page-pad-x: 20px;
    }

    /* Campanhas redefine o próprio padding lateral (12px). */
    .crm-page-container.cmp-page {
        --uni-page-pad-x: 12px;
    }
}

/* =============================================================================================
   UNICHAT-AUTOMATION-AI-KNOWLEDGE-VISUAL-ASSISTED-CONVERGENCE-01 — piso de toque de VL-59

   MEDIDO no navegador, 390x844: o gatilho de menu de linha media 40x40 e o botao `md` media
   42px de altura — abaixo do piso de 44 que D-38/VL-59 exigem no toque.

   Por que so agora: o controle negativo mediu Contatos, Tarefas e Campanhas no mesmo viewport e
   nenhuma delas RENDERIZA menu de linha ou botao `md` a 390 (usam lista de varredura e acoes por
   icone). Estas tres superficies sao as primeiras a expor os dois no toque, entao o piso nunca
   tinha sido exercitado — nao e regressao de superficie aceita, e por isso a correcao aqui nao
   muda nenhuma delas.

   VL-59 — o alvo cresce sem a caixa pintada crescer: os dois controles sao transparentes em
   repouso, entao aumentar a area nao altera o que se ve. E so no toque; o desktop fica como foi
   aceito.
   ============================================================================================= */

@media (max-width: 767px) {
    .uni-menu-row-trigger {
        min-width: 44px;
        min-height: 44px;
    }

    .app-button-md {
        min-height: 44px;
    }
}