/* UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01 — 9 regras de /contatos removidas apos o
   OWNER VISUAL ACCEPTED: descreviam a tabela e o modal antigos e nao eram referenciadas por nenhum
   markup, codigo ou JS do projeto (verificado antes da remocao). Ver o anexo de superficie em
   docs/ux/unichat/UNICHAT_CONTACTS_VISUAL_CHANGE_PLAN_01.md §8.5. */
/*
  Layout do App Shell do CRM (Corte 2A-1).
  Ver docs/modules/crm-chatbot/specs/CRM_CHATBOT_APP_SHELL_IMPLEMENTATION_PLAN.md.
  Usa exclusivamente tokens --crm-* definidos em crm-theme.css.
*/

.crm-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.crm-shell {
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* Sidebar: a "rail" reserva o espaco colapsado no layout de forma permanente e estavel;
   a sidebar em si e posicionada em cima (absolute) e cresce por CIMA do conteudo no hover,
   sem nunca redimensionar/empurrar a area principal. */
.crm-sidebar-rail {
    position: relative;
    flex: 0 0 var(--crm-sidebar-collapsed-width);
    width: var(--crm-sidebar-collapsed-width);
    height: 100%;
}

.crm-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--crm-sidebar-collapsed-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--crm-color-sidebar-bg);
    /* visible (nao hidden): o flyout do perfil e mais largo que a propria sidebar e precisa
       "flutuar" por cima do painel central, igual a sidebar ja faz sobre o conteudo no hover.
       Seguro porque .crm-sidebar-nav tem seu proprio overflow-x:hidden/overflow-y:auto,
       entao o menu de navegacao continua clipado/rolavel independente disso. */
    overflow: visible;
    z-index: var(--uni-z-sidebar, 50);
    transition: width var(--crm-transition-normal), box-shadow var(--crm-transition-normal);
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Owner Visual Review) — a expansão por hover/foco é uma
   capacidade do RAIL do desktop, não da .crm-sidebar em si. Sem o escopo `.crm-sidebar-rail`
   estas regras (0,2,0) venciam `.crm-sidebar--drawer { width: 100% }` (0,1,0) e o drawer
   mobile ENCOLHIA de 343px para 250px ao passar o mouse — com transition de 220ms, animado.
   O mesmo valia para :focus-within, encolhendo o drawer na navegação por teclado. */
.crm-sidebar-rail .crm-sidebar:hover,
.crm-sidebar-rail .crm-sidebar:focus-within {
    width: var(--crm-sidebar-expanded-width);
    box-shadow: var(--crm-shadow-lg);
}

/* CUT 5F (Workstream C) — com um guia rápido aberto (html.uni-tour-open, ver uni-tour.js) a sidebar
   NÃO expande por hover nem por foco. Medido em /primeiros-passos: o item de navegação recém-clicado
   segurava :focus-within (e o mouse, :hover), a sidebar crescia por cima do conteúdo e cobria o alvo
   realçado e o cartão do tour. Nenhum passo de tour aponta para a sidebar, então recolhê-la durante o
   tour não esconde nada que o tour precise mostrar. Especificidade maior que a regra acima (html). */
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within {
    width: var(--crm-sidebar-collapsed-width);
    box-shadow: none;
}

/* ...e o conteúdo da expansão (rótulos, marca, rodapé) também fica no estado recolhido — senão os
   rótulos vazariam para fora dos 72 px da rail. Espelha, negando, cada regra de hover/foco abaixo. */
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-brand-word,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-brand-word,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-sidebar-item-label,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-sidebar-item-label,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-sidebar-group-label,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-sidebar-group-label,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-sidebar-divider-label,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-sidebar-divider-label,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-user-copy,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-user-copy,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-user-kebab,
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-user-kebab {
    opacity: 0;
}

/* Durante o tour a sidebar deve parecer recolhida mesmo sob o cursor: so o sino. */
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:hover .crm-utility-icons > :not(.crm-notification-anchor),
html.uni-tour-open .crm-sidebar-rail .crm-sidebar:focus-within .crm-utility-icons > :not(.crm-notification-anchor) {
    display: none;
}

.crm-sidebar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    min-height: var(--crm-topbar-height);
    box-sizing: border-box;
}

.crm-brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.crm-brand-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-primary);
    color: var(--crm-color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.crm-brand-word {
    color: var(--crm-color-text-inverse);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Owner Visual Review) — contraste semântico do wordmark.
   O símbolo (azul de marca) é o mesmo nos dois fundos; só o wordmark troca de cor, como no
   par uni-mark/uni-white do UniCursos. */
.crm-brand-mark--on-dark .crm-brand-word {
    color: #ffffff;
}

.crm-brand-mark--on-light .crm-brand-word {
    color: var(--crm-color-text);
}

.crm-brand-icon-img {
    object-fit: contain;
    background: transparent;
    padding: 3px;
}

.crm-brand-logo-img {
    max-width: 160px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* UNICHAT-UX-PRODUCT-ATENDIMENTO-OMNICHANNEL-05 (D-35, ajuste pedido pelo Owner na Acceptance) —
   a primeira versao usava o mesmo teto de tamanho do logo customizavel (ate 160x26) e ficou grande
   demais ao lado do simbolo de 32px. Aqui so a largura e limitada; a altura segue proporcional
   (width:auto/height:auto mantem a proporcao real do PNG) e o alinhamento vertical com o simbolo
   vem do align-items:center ja existente em .crm-brand-mark. */
.crm-brand-wordmark-img {
    max-width: 68px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.crm-sidebar-rail .crm-sidebar:hover .crm-brand-word,
.crm-sidebar-rail .crm-sidebar:focus-within .crm-brand-word {
    opacity: 1;
}

.crm-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.crm-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--crm-radius-xs);
}

.crm-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    border-radius: var(--crm-radius-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--crm-transition-fast), color var(--crm-transition-fast);
}

.crm-sidebar-item:hover {
    background: var(--crm-color-sidebar-bg-hover);
    color: #ffffff;
}

.crm-sidebar-item.active {
    background: var(--crm-color-sidebar-active-bg);
    color: var(--crm-color-sidebar-active-text);
}

.crm-sidebar-item-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-sidebar-item-label {
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-sidebar-rail .crm-sidebar:hover .crm-sidebar-item-label,
.crm-sidebar-rail .crm-sidebar:focus-within .crm-sidebar-item-label {
    opacity: 1;
}

/* UNICHAT-MVP-UX-PRODUCT-EXPERIENCE-COMPLETION-01 (Fase A) — cabecalho de grupo da sidebar.
   Substitui o divisor unico "Administracao" por um rotulo por grupo de jobs. Some no estado
   colapsado (so icones) e aparece no hover/focus, como o rotulo do divisor. */
.crm-sidebar-group {
    margin: 12px 4px 2px;
    min-height: 12px;
}

.crm-sidebar-group:first-child {
    margin-top: 2px;
}

.crm-sidebar-group-label {
    display: block;
    padding-left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
}

.crm-sidebar-rail .crm-sidebar:hover .crm-sidebar-group-label,
.crm-sidebar-rail .crm-sidebar:focus-within .crm-sidebar-group-label {
    opacity: 1;
}

.crm-sidebar-divider {
    margin: 10px 10px 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    height: 1px;
    overflow: visible;
}

.crm-sidebar-divider-label {
    display: block;
    margin-top: -20px;
    padding-left: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
}

.crm-sidebar-rail .crm-sidebar:hover .crm-sidebar-divider-label,
.crm-sidebar-rail .crm-sidebar:focus-within .crm-sidebar-divider-label {
    opacity: 1;
}

/* Rodape: icones utilitarios + bloco do usuario, sempre fora da area rolavel */
.crm-user-footer {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Linha unica de 32px, recolhida ou expandida - a altura do rodape nao muda ao expandir.
   Recolhida (padrao, decisao do Owner na revisao local do Cut 6, 2026-09-18): so o sino aparece;
   som, chat interno e ajuda ficam escondidos (display:none, nao opacity - nao ocupam espaco).
   Expandida (hover/focus-within): os quatro lado a lado, na mesma linha.
   Alinha o CENTRO do icone com o centro do icone de .crm-sidebar-item, nao so a borda do
   container: o icone de nav fica numa caixa de 22px (quase do tamanho do svg de 20px, ou
   seja, quase sem centralizacao extra), com centro em nav-padding(10) + item-padding(10) +
   22/2 = 31px a partir da borda esquerda da sidebar. O botao utilitario e uma caixa de 32px
   com o svg de 17px centralizado dentro dela - para o centro dele cair tambem em 31px,
   preciso de footer-padding(10) + X + 32/2 = 31, ou seja X=5px (nao 10px). */
.crm-utility-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 4px 0 8px 5px;
    min-height: 32px;
}

.crm-sidebar-rail .crm-sidebar:not(:hover):not(:focus-within) .crm-utility-icons > :not(.crm-notification-anchor) {
    display: none;
}

.crm-utility-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-sm);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crm-utility-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.crm-utility-button:hover:not(:disabled) {
    background: var(--crm-color-sidebar-bg-hover);
    color: #ffffff;
}

.crm-utility-button.active {
    color: var(--crm-color-primary);
}

.crm-utility-button:focus-visible {
    outline: 2px solid var(--crm-color-focus-ring);
    outline-offset: 1px;
}

.crm-utility-button svg {
    width: 17px;
    height: 17px;
}

.crm-user-block {
    position: relative;
}

.crm-user-summary {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Recuo esquerdo de 5px (nao 10px): o avatar de 32px nao tem uma caixa extra de
       centralizacao como o icone de nav (ver comentario em .crm-utility-icons) - com
       footer-padding(10) + 5 + 32/2 = 31px, o centro do avatar cai no mesmo eixo x dos
       demais icones da sidebar. */
    padding: 8px 8px 8px 5px;
    border: none;
    border-radius: var(--crm-radius-md);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.crm-user-summary:hover {
    background: var(--crm-color-sidebar-bg-hover);
}

/* VL-33 — o avatar do produto é o degradê cinza frio com a inicial em branco, aprovado em
   `/contatos` ("degradê cinza com letra branca", contra o círculo colorido chapado). O rodapé da
   sidebar era o último lugar com o círculo azul sólido: mesma peça, duas aparências.

   Revisão do proprietário (2026-09-08): *"o Menu do usuário deveria mostrar o avatar/foto do
   usuário, não as iniciais"*. **Foto de usuário não existe no produto** — não há coluna, DTO,
   endpoint de upload nem claim (registrado como pendência funcional delegada no plano desta
   superfície, §11). A anatomia já aceita a imagem: quando o campo existir, basta um `<img>` aqui
   dentro e as iniciais viram o fallback, sem tocar neste CSS de novo. */
.crm-user-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(160deg, #8892a3 0%, #737c8d 52%, #5d6675 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

:root[data-crm-theme="dark"] .crm-user-avatar {
    background: linear-gradient(160deg, #6b7383 0%, #565e6d 52%, #434a57 100%);
}

.crm-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-user-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
    white-space: nowrap;
}

.crm-sidebar-rail .crm-sidebar:hover .crm-user-copy,
.crm-sidebar-rail .crm-sidebar:focus-within .crm-user-copy {
    opacity: 1;
}

.crm-user-copy strong {
    font-size: 13px;
    font-weight: 600;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-user-copy small {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

.crm-user-kebab {
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--crm-transition-fast);
    color: rgba(255, 255, 255, 0.6);
}

.crm-sidebar-rail .crm-sidebar:hover .crm-user-kebab,
.crm-sidebar-rail .crm-sidebar:focus-within .crm-user-kebab {
    opacity: 1;
}

/* Camada invisivel atras do flyout - fecha o menu ao clicar em qualquer lugar fora dele,
   sem precisar de interop JS para detectar clique externo (mesmo padrao de .modal-backdrop). */
.crm-user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--uni-z-sidebar-menu-backdrop, 55);
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.crm-user-menu {
    position: absolute;
    /* Ancorado perto dos "3 pontinhos" (.crm-user-kebab), nao da borda do botao inteiro:
       o kebab fica em ~217px (de 230px de largura util do bloco) e ~26px de altura (bloco
       tem 52.75px, kebab e centralizado verticalmente) - medido via getBoundingClientRect. */
    bottom: calc(100% - 26px);
    left: calc(100% - 15px);
    /* Mais largo que a propria sidebar expandida (250px) de proposito: o flyout deve se
       estender por cima do painel central, nao ficar espremido dentro da largura da sidebar. */
    width: 320px;
    background: var(--crm-color-surface-elevated);
    color: var(--crm-color-text);
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-lg);
    padding: 6px;
    z-index: var(--uni-z-sidebar-menu, 60);
}

.crm-user-menu:focus-visible {
    outline: none;
}

.crm-user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 10px;
}

.crm-user-menu-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-user-menu-identity strong {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-user-menu-identity small {
    font-size: 11.5px;
    color: var(--crm-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.crm-user-menu button,
.crm-user-menu form button {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    border-radius: var(--crm-radius-sm);
    background: transparent;
    color: var(--crm-color-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.crm-user-menu button:hover {
    background: var(--crm-color-app-bg);
}

.crm-user-menu form {
    margin: 0;
}

.crm-user-menu svg {
    width: 16px;
    height: 16px;
}

/* Area principal */
.crm-shell-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* .crm-topbar (label de workspace <1024) foi removida no UNICHAT-MOBILE-UX-CONFORMANCE-01:
   o chrome mobile canônico (.crm-mobile-topbar, seção no fim do arquivo) assume <=1023;
   no desktop >=1024 ela nunca era renderizada. */


.crm-shell-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Paginas novas (Dashboard/placeholders) usam este container com respiro proprio;
   o chat legado (/atendimentos) nao usa este wrapper e continua ocupando 100% em edge-to-edge. */
.crm-page-container {
    height: 100%;
    box-sizing: border-box;
    padding: 28px 32px;
    overflow-y: auto;
}

.crm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.crm-page-header-text h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--crm-color-text);
}

.crm-page-header-text p {
    margin: 0;
    font-size: 13.5px;
    color: var(--crm-color-text-muted);
}

.crm-page-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.crm-empty-state {
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    color: var(--crm-color-text-muted);
}

.crm-empty-state-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.crm-empty-state-icon svg {
    width: 22px;
    height: 22px;
}

.crm-empty-state h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--crm-color-text);
}

.crm-empty-state p {
    margin: 0;
    max-width: 460px;
    font-size: 13.5px;
    line-height: 1.5;
}

.crm-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.crm-dashboard-skeleton {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.crm-dashboard-skeleton-card {
    height: 88px;
    border-radius: var(--crm-radius-md);
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
}

@media (max-width: 1023px) {
    .crm-dashboard-skeleton {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Contrato F: padding de página no shell mobile/tablet (~24px; 20px <=767 abaixo). */
    .crm-page-container {
        padding: 24px;
    }
}

@media (max-width: 767px) {
    .crm-dashboard-skeleton {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-page-container {
        padding: 20px;
    }

    .crm-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-page-header-actions {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }
}

/* Painel de Aparencia (Configuracoes).
   UNICHAT-CONFIGURACOES-VISUAL-ASSISTED-CONVERGENCE-01 — os valores literais aqui (12.5px, 13px,
   10px, 14px, 6px, 11px) estavam fora das escadas de VL-01 e VL-05. Trocados pelos tokens, sem
   mudar a composição. */
.crm-appearance-panel {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}

.crm-appearance-section h3 {
    margin: 0 0 var(--uni-space-1);
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    color: var(--uni-color-text);
}

.crm-appearance-hint {
    margin: 0 0 var(--uni-space-3);
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

.crm-appearance-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
}

/* VL-10 — controles que compartilham uma linha compartilham a altura: 42px, como todo o resto. */
.crm-theme-option {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    height: 42px;
    padding: 0 var(--uni-space-4);
    border-radius: var(--uni-radius-md);
    border: 1px solid var(--uni-color-border);
    cursor: pointer;
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-md);
    font-weight: 500;
    user-select: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.crm-theme-option:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

.crm-theme-option .crm-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.crm-theme-option-light {
    background: #ffffff;
    color: #16202e;
    border-color: #d9e2ec;
}

.crm-theme-option-dark {
    background: #0d1117;
    color: #ffffff;
    border-color: #243041;
}

/* Sistema nao tem "cor propria" (segue o SO) - usa a superficie neutra do tema atual da pagina,
   deliberadamente diferente do Claro/Escuro fixos acima, e o icone/swatch dedicados abaixo
   deixam claro que essa opcao acompanha o dispositivo. */
.crm-theme-option-system {
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    border-color: var(--crm-color-border);
}

/* VL-24 — selecionado NÃO é foco: o marcador persistente é o halo da cor do produto, e o anel
   âmbar continua reservado ao `:focus-visible` acima. Antes os dois usavam o mesmo token. */
.crm-theme-option.active {
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
    font-weight: 600;
}

.crm-theme-swatch {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border-strong);
}

.crm-theme-swatch-light {
    background: #ffffff;
}

.crm-theme-swatch-dark {
    background: #0d1117;
}

.crm-theme-swatch-system {
    background: conic-gradient(from 180deg, #ffffff 0deg 180deg, #0d1117 180deg 360deg);
}

.crm-appearance-swatches {
    display: flex;
    gap: 8px;
}

.crm-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.crm-color-swatch.active {
    border-color: var(--crm-color-text);
}

.crm-appearance-actions {
    display: flex;
}

.crm-appearance-actions button {
    padding: 8px 14px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
}

.crm-appearance-note {
    margin: 0;
    font-size: 12px;
    color: var(--crm-color-text-muted);
}

.crm-appearance-color-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.crm-appearance-logo-row {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-4);
    flex-wrap: wrap;
}

.crm-appearance-logo-preview {
    width: 96px;
    height: 96px;
    border-radius: var(--uni-radius-md);
    border: 1px dashed var(--uni-color-border);
    background: var(--uni-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.crm-appearance-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.crm-appearance-logo-placeholder {
    font-size: var(--uni-font-size-2xs);
    color: var(--uni-color-text-muted);
}

.crm-appearance-logo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--uni-space-2);
}

/* VL-10 — "Escolher logo" e "Remover logo" dividem uma linha, logo dividem o tamanho. */
.crm-appearance-logo-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
}

.crm-appearance-error {
    color: var(--crm-color-danger);
}

/* Upload de logo/icone (Marca do workspace) */
.crm-brand-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.crm-brand-upload-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    padding: 12px;
    background: var(--crm-color-app-bg);
}

.crm-brand-upload-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-color-text-muted);
}

.crm-brand-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-sidebar-bg);
    overflow: hidden;
}

.crm-brand-upload-preview-icon {
    width: 56px;
}

.crm-brand-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.crm-brand-upload-placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11.5px;
    font-weight: 600;
    padding: 0 8px;
    text-align: center;
}

.crm-brand-upload-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-brand-upload-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.crm-brand-upload-button:hover {
    border-color: var(--crm-color-primary);
    color: var(--crm-color-primary);
}

.crm-brand-upload-button input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.crm-brand-upload-actions button:not(.crm-brand-upload-button) {
    padding: 6px 10px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.crm-brand-upload-actions button:not(.crm-brand-upload-button):hover {
    border-color: var(--crm-color-danger);
    color: var(--crm-color-danger);
}

/* Nota: o estilo real da pagina de Login vive em Components/Pages/Login.razor.css
   (CSS isolation do Blazor, mais especifico que qualquer regra .login-* aqui por causa
   do atributo de escopo b-xxxx) - nao duplicar regras .login-* neste arquivo. */

/* Color picker reutilizavel (Crm/Shared/CrmColorPicker.razor) */
.crm-color-picker {
    position: relative;
    display: inline-block;
}

/* VL-10 — controles que compartilham uma linha compartilham o tamanho. Medido no navegador: este
   gatilho ficava em ~34px ao lado do campo Nome de 42px no modal de fila, que é exatamente o
   defeito de pareamento do §1.2. Borda `border-strong` porque é controle de entrada (VL-06). */
.crm-color-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-2);
    height: 42px;
    padding: 0 var(--uni-space-3);
    border-radius: var(--uni-radius-md);
    border: 1px solid var(--uni-color-border-strong);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    font-family: var(--uni-font-family);
    font-size: var(--uni-font-size-md);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

/* VL-44 — controle de entrada usa neon azul, não o anel âmbar. */
.crm-color-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--uni-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uni-color-primary) 22%, transparent);
}

.crm-color-picker-trigger:hover {
    border-color: var(--crm-color-primary);
    box-shadow: 0 0 0 3px var(--crm-color-focus-ring);
}

.crm-color-picker-swatch {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--crm-color-border-strong);
    flex: 0 0 auto;
}

.crm-color-picker-popover {
    position: absolute;
    z-index: 70;
    top: calc(100% + 8px);
    left: 0;
    width: 240px;
    padding: 14px;
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface-elevated);
    box-shadow: var(--crm-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crm-color-picker-square {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--crm-radius-md);
    cursor: crosshair;
    touch-action: none;
    background: linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, hsl(210, 100%, 50%));
}

.crm-color-picker-pointer {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), var(--crm-shadow-sm);
}

/* Pagina de Contatos (/contatos). Reaproveita .automation-table/.automation-pagination/
   .automation-btn (crm-automation.css) para tabela+paginacao e .modal-backdrop/.user-editor/
   .field-stack/.settings-feedback/.crm-settings-section (app.css/crm-settings.css) para o
   modal de detalhe - aqui ficam so as classes realmente novas, prefixadas crm-contacts-*. */
/* .crm-contacts-filters legado removido por UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01:
   era a barra de filtros inline antiga (gap 10px, margin-bottom 18px). MEDIDO no navegador: a
   margem inferior de 18px continuava aplicada ao novo container do botao Filtros, esticando a
   linha da barra de ferramentas para 60px; com align-items:center a busca de 42px ficava
   centralizada nesses 60px e caia 9px abaixo do botao. Era a causa do desalinhamento vertical.
   O container atual vive em crm-contacts.css. */

/* .crm-contacts-search legado removido por UNICHAT-VISUAL-SYSTEM-ASSISTED-CONVERGENCE-01:
   descrevia o campo antigo (38px, radius-sm, padding proprio) e continuava vencendo em min-height
   sobre a busca nova, empurrando-a para fora do alinhamento com o botao Filtros. A busca atual
   vive em crm-contacts.css. */

.crm-contacts-filter-select {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    font-size: 12.5px;
}

.crm-contacts-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--crm-color-text-muted);
    white-space: nowrap;
}



.crm-contacts-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-color-surface);
}

.crm-contacts-table {
    min-width: 960px;
}

.crm-contacts-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm-contacts-name-cell div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-contacts-name-cell small {
    color: var(--crm-color-text-muted);
    font-size: 11.5px;
}



.crm-contacts-muted {
    color: var(--crm-color-text-muted);
}

.crm-contacts-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.crm-contacts-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--crm-radius-xl);
    background: var(--crm-color-primary-soft);
    color: var(--crm-color-primary-soft-text);
    font-size: 11px;
    font-weight: 600;
}


.crm-contacts-row-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.crm-contacts-detail {
    width: min(820px, calc(100vw - 32px));
    max-height: min(860px, calc(100vh - 32px));
}

.crm-contacts-detail-body {
    gap: 22px;
}



.crm-contacts-status-customer {
    background: color-mix(in srgb, var(--crm-color-success) 16%, transparent);
    color: var(--crm-color-success);
}

.crm-contacts-status-archived {
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text-muted);
}

.crm-contacts-detail-actions {
    display: flex;
    justify-content: flex-end;
}


.crm-contacts-summary-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--crm-color-text);
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B) — card de contato mobile (contratos J/K)
   + filtros/paginação no contrato N. A tabela desktop segue intocada >=1024. */

.crm-contacts-card-identity {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crm-contacts-card-select {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--crm-color-primary);
}

@media (max-width: 1023px) {
    .crm-contacts-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-contacts-search {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        flex: 0 0 auto;
    }

    .crm-contacts-filter-select {
        width: 100%;
        min-width: 0;
        min-height: 42px;
    }

    .crm-contacts-filter-toggle {
        min-height: 32px;
        align-items: center;
    }



    .automation-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

.crm-color-picker-pointer {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), var(--crm-shadow-sm);
    pointer-events: none;
}

.crm-color-picker-hue {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    appearance: none;
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    cursor: pointer;
}

.crm-color-picker-hue::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid var(--crm-color-text);
    cursor: pointer;
}

.crm-color-picker-hue::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid var(--crm-color-text);
    cursor: pointer;
}

.crm-color-picker-fields {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-color-picker-eyedropper {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-surface);
    color: var(--crm-color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crm-color-picker-eyedropper svg {
    width: 15px;
    height: 15px;
}

.crm-color-picker-eyedropper:hover {
    color: var(--crm-color-primary);
    border-color: var(--crm-color-primary);
}

.crm-color-picker-preview {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border-strong);
}

.crm-color-picker-hex {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text);
    padding: 0 8px;
    font-size: 12.5px;
    text-transform: uppercase;
}

.crm-color-picker-rgb-row {
    display: flex;
    gap: 8px;
}

.crm-color-picker-rgb-row label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-color-text-muted);
}

.crm-color-picker-rgb-row input {
    width: 100%;
    min-width: 0;
    height: 28px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-border);
    background: var(--crm-color-app-bg);
    color: var(--crm-color-text);
    padding: 0 6px;
    font-size: 12px;
}

.crm-color-picker-actions {
    display: flex;
    justify-content: flex-end;
}

.crm-color-picker-actions button.primary {
    padding: 7px 14px;
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-color-primary);
    background: var(--crm-color-primary);
    color: var(--crm-color-on-primary);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
}

.crm-color-picker-actions button.primary:hover:not(:disabled) {
    border-color: var(--crm-color-primary-hover);
    background: var(--crm-color-primary-hover);
    color: var(--crm-color-on-primary);
}

/* Nota legada de rotulo da sidebar. O drawer dedicado EXISTE desde o
   UNICHAT-MOBILE-UX-CONFORMANCE-01 (CrmMobileChrome + CrmSidebar Variant=drawer). */
@media (max-width: 767px) {
    .crm-sidebar-expanded-width-note {
        display: none;
    }
}

/* UNICHAT-CONTACT-LISTS-01 — listas de contatos (/contatos/listas). Reaproveita
   .automation-table/.automation-pagination/.automation-btn e o chrome de modal
   .modal-backdrop/.user-editor, exatamente como a pagina de Contatos; aqui ficam so as classes
   realmente novas, prefixadas crm-lists-* e crm-contacts-*. */




/* FU-01 — a versão legada de `.crm-contacts-bulkbar` também foi removida daqui (a classe não
   existe mais em markup nenhum). Ela ainda carregava `12.5px`, valor fora da escada de VL-01. */

/* C1 (PRE-PRODUCTION-CORRECTIONS-01) — a tabela legada de membros (.crm-lists-members-table,
   .crm-lists-summary, .crm-lists-consent, .crm-lists-badge-archived) saiu do markup: o detalhe da
   lista usa o UniList e o app-badge canônicos de crm-contacts.css. Só o que ainda é usado ficou. */
.crm-lists-hint {
    margin: 8px 0 0;
    color: var(--crm-color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.crm-lists-editor {
    width: min(560px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 32px));
}

.crm-lists-picker {
    width: min(680px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
}

.crm-lists-picker-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
}

.crm-lists-picker-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.crm-lists-picker-row:hover {
    background: var(--crm-color-primary-soft);
}

.crm-lists-picker-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-lists-picker-meta {
    color: var(--crm-color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* (min-width das tabelas de listas removido: <=1023 elas cardificam via .uni-table-cardify) */

/* ============================================================================
   UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B) — shell mobile canônico.
   Autoridade: docs/design-system/uni/mobile-composition-contract.md §B–E + OD-2
   (navegação híbrida aprovada). O shell troca em 1023/1024 (não mais 640);
   bottom nav só <=767. Substitui a navegação mobile do corte MVP-UX (sheet).
   ============================================================================ */

/* Chrome mobile: invisível no desktop (>=1024), onde o shell homologado continua. */
.crm-mobile-topbar,
.crm-mobile-nav {
    display: none;
}

@media (max-width: 1023px) {
    /* A sidebar de hover não existe em touch: o rail desktop sai do fluxo e o
       chrome mobile assume (contrato C). */
    .crm-sidebar-rail {
        display: none !important;
    }

    /* Topbar mobile — contrato D: 64px + safe-area, grid 44 | 1fr | auto, alvos de
       44px. Identidade: o chrome escuro da marca UniChat (mesmo fundo da sidebar
       homologada), aplicação de produto do "workspace-primary" do contrato. */
    .crm-mobile-topbar {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        min-height: calc(64px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, 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);
    }

    .crm-mobile-topbar-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(255, 255, 255, 0.85);
        cursor: pointer;
    }

    .crm-mobile-topbar-button:hover,
    .crm-mobile-topbar-button:focus-visible {
        color: #ffffff;
        background: var(--crm-color-sidebar-bg-hover);
    }

    .crm-mobile-topbar-button:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: 2px;
    }

    .crm-mobile-topbar-button .crm-icon {
        width: 22px;
        height: 22px;
    }

    .crm-mobile-topbar-brand {
        display: flex;
        justify-content: center;
        min-width: 0;
    }

    /* No topbar a marca aparece completa (ícone + palavra), sem depender de hover. */
    .crm-mobile-topbar-brand .crm-brand-word {
        opacity: 1;
    }

    .crm-mobile-topbar-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .crm-mobile-topbar-icon-wrap {
        position: relative;
        display: inline-flex;
    }

    .crm-mobile-topbar-dot {
        position: absolute;
        top: -2px;
        right: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--crm-color-danger);
        border: 1.5px solid var(--crm-color-sidebar-bg);
    }

    .crm-mobile-topbar-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        /* VL-33 — mesmo degradê do avatar do desktop; era o círculo azul chapado. */
        background: linear-gradient(160deg, #8892a3 0%, #737c8d 52%, #5d6675 100%);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    /* Drawer — contrato E: painel esquerdo min(88vw, 360px), mesma navegação e
       permissões do desktop (CrmSidebar Variant="drawer"). */
    .crm-mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: var(--uni-z-backdrop);
    }

    .crm-mobile-drawer-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        background: rgba(15, 23, 42, 0.58);
        cursor: pointer;
        animation: crm-drawer-fade 160ms ease-out;
    }

    .crm-mobile-drawer-panel {
        position: absolute;
        inset: 0 auto 0 0;
        display: flex;
        flex-direction: column;
        width: min(88vw, 360px);
        max-width: 100%;
        min-width: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        background: var(--crm-color-sidebar-bg);
        box-shadow: 24px 0 56px rgba(15, 23, 42, 0.28);
        animation: crm-drawer-in 180ms ease-out;
        overflow: hidden;
    }

    .crm-mobile-drawer-close {
        position: absolute;
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        z-index: 1;
    }

    .crm-mobile-drawer-close:hover,
    .crm-mobile-drawer-close:focus-visible {
        color: #ffffff;
        background: var(--crm-color-sidebar-bg-hover);
    }

    .crm-mobile-drawer-close:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: 2px;
    }

    /* Sidebar em modo drawer: nasce expandida, sem hover, ocupa o painel inteiro.
       A área de navegação rola; marca e rodapé ficam estáveis. */
    .crm-sidebar--drawer {
        position: static;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: auto;
    }

    .crm-sidebar--drawer .crm-brand-word,
    .crm-sidebar--drawer .crm-sidebar-item-label,
    .crm-sidebar--drawer .crm-sidebar-group-label,
    .crm-sidebar--drawer .crm-sidebar-divider-label,
    .crm-sidebar--drawer .crm-user-copy,
    .crm-sidebar--drawer .crm-user-kebab {
        opacity: 1;
    }

    .crm-sidebar--drawer .crm-utility-icons {
        flex-direction: row;
        align-items: center;
    }

    .crm-sidebar--drawer .crm-sidebar-item {
        min-height: 44px;
    }

    .crm-sidebar--drawer .crm-user-footer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Menu do usuário dentro do DRAWER. No desktop ele é um flyout que se estende para a
       DIREITA, por cima do painel central (`left: calc(100% - 15px)`, 320px de largura) —
       ali existe espaço de sobra. No drawer isso jogava 305px do menu para fora da tela.
       Aqui ele passa a abrir SOBRE o próprio drawer: ancorado às bordas do bloco do usuário,
       subindo a partir dele, com altura limitada e rolagem própria para nunca estourar o
       topo (o drawer tem `overflow: hidden`). */
    .crm-sidebar--drawer .crm-user-menu {
        left: 0;
        right: 0;
        width: auto;
        bottom: calc(100% + 8px);
        max-height: min(60vh, 420px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Alvos de toque do menu (contrato S). */
    .crm-sidebar--drawer .crm-user-menu button,
    .crm-sidebar--drawer .crm-user-menu form button {
        min-height: 44px;
    }

    /* Notificações no chrome mobile: o painel (popover no desktop) vira overlay. */
    .crm-mobile-notif-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--uni-z-backdrop);
        background: rgba(15, 23, 42, 0.42);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        /* UNICHAT-CUT-6 (F-36) — folga do topo no celular: --uni-space-6 (32px), sem desperdiçar a altura. */
        padding: calc(var(--uni-space-6, 32px) + env(safe-area-inset-top, 0px)) 12px 12px;
        overflow-y: auto;
    }

    .crm-mobile-notif {
        width: 100%;
        max-width: 420px;
        z-index: var(--uni-z-modal);
    }

    .crm-mobile-notif .crm-notification-panel {
        position: static;
        width: 100%;
        max-height: none;
    }

    /* UNICHAT-CUT-6 (F-36, sweep 390px) — no celular o sino vive no rodapé do drawer "Mais" (overflow: hidden,
       até 360px de largura): ancorado ao sino, o painel saía pela direita e era cortado ("Marcar todas co…",
       datas truncadas). Aberto dali, ele assume a mesma composição do overlay de notificações acima: largura da
       tela menos 12px por lado (até 420px), centrado, com folga do topo --uni-space-6. Fixed escapa do corte. */
    .crm-mobile-drawer-panel .crm-notification-panel {
        position: fixed;
        top: calc(var(--uni-space-6, 32px) + env(safe-area-inset-top, 0px));
        bottom: auto;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: 420px;
        margin-inline: auto;
    }
}

@keyframes crm-drawer-in {
    from { transform: translateX(-24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes crm-drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-mobile-drawer-backdrop,
    .crm-mobile-drawer-panel {
        animation: none;
    }
}

/* Bottom nav — só no mobile (<=767): 3 jobs de maior frequência + "Mais" (drawer).
   Exceção documentada do UniChat (OD-2 aprovada). */
@media (max-width: 767px) {
    /* Reserva a altura da barra inferior para nada ficar coberto (composer incluído). */
    .crm-shell-main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    .crm-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--uni-z-nav);
        height: 56px;
        display: flex;
        align-items: stretch;
        background: var(--crm-color-surface);
        border-top: 1px solid var(--crm-color-border);
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-sizing: content-box;
    }

    .crm-mobile-nav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        background: transparent;
        color: var(--crm-color-text-muted);
        text-decoration: none;
        font-size: 10.5px;
        font-weight: 600;
        cursor: pointer;
        min-width: 0;
    }

    .crm-mobile-nav-item .crm-icon,
    .crm-mobile-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .crm-mobile-nav-item.active {
        color: var(--crm-color-primary);
    }

    .crm-mobile-nav-icon-wrap {
        position: relative;
        display: inline-flex;
    }

    .crm-mobile-nav-dot {
        position: absolute;
        top: -2px;
        right: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--crm-color-danger);
        border: 1.5px solid var(--crm-color-surface);
    }

    .crm-mobile-nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================================
   UNICHAT-MOBILE-UX-ARCHITECTURE-01 (Phase B / B4) — Contatos: scan → detalhe; filtros em sheet;
   seleção sob demanda. Desktop (>=1024) intocado.
   ============================================================================ */

@media (max-width: 1023px) {
    .crm-contacts-filter-sheet .crm-contacts-filter-select,
    .crm-contacts-filter-sheet input[type="date"] {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--crm-color-border);
        border-radius: var(--crm-radius-sm);
        background: var(--crm-color-surface);
        color: var(--crm-color-text);
        padding: 8px 12px;
        font: inherit;
        box-sizing: border-box;
    }

    .crm-contacts-filter-sheet .crm-contacts-filter-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        font-size: 14px;
    }

    .crm-contacts-filter-sheet .crm-contacts-filter-toggle input {
        width: 20px;
        height: 20px;
        margin: 0;
    }



    .crm-contacts-detail.uni-detail-surface .crm-contacts-detail-body {
        padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    }


    .automation-pagination {
        justify-content: center;
        gap: 10px;
        padding-top: 12px;
    }
}

/* Surface="Auto" — as duas variantes da wordmark são emitidas e o tema aplicado escolhe.
   Precisa ser assim porque o modo "system" só se resolve no navegador: o servidor não sabe
   se o fundo daquela superfície vai sair claro ou escuro. */
.crm-brand-wordmark--for-dark { display: none; }
:root[data-crm-theme="dark"] .crm-brand-wordmark--for-light { display: none; }
:root[data-crm-theme="dark"] .crm-brand-wordmark--for-dark { display: inline-block; }

/* Bug relatado pelo proprietário (2026-09-08): a sidebar expandia com o mouse a até 60px de
   distância dela — e, ao expandir, cobria justamente a seta de voltar do painel "Nova conversa".

   Causa medida, não suposta: recolhidos, o wordmark e o bloco do usuário ficam com `opacity: 0`
   mas continuam ocupando caixa, e `.crm-sidebar` precisa de `overflow: visible` (o flyout do
   perfil sai dela). `elementFromPoint(100, 40)` devolvia o wordmark; `(120, 900)`, o nome do
   usuário — ambos fora do trilho de 72px. O `:hover` da sidebar dispara em qualquer descendente,
   então tocar no invisível expandia tudo.

   Invisível não é ausente: opacidade esconde, largura zero remove a área de acerto. */
.crm-sidebar-rail .crm-sidebar:not(:hover):not(:focus-within) .crm-brand-word,
.crm-sidebar-rail .crm-sidebar:not(:hover):not(:focus-within) .crm-user-copy {
    max-width: 0;
    overflow: hidden;
}

/* UNICHAT-RESIDUAL-PRODUCT-SURFACE-VISUAL-COMPLETION-01 (RS-17) — linha de ação dentro de um bloco
   de "Minha conta".

   VL-45: a ação e o aviso que ela gera vivem no bloco que os originou. O rodapé do `UniDrawer`
   pertence ao Salvar do Perfil; empurrar "Trocar senha" e "Encerrar os outros dispositivos" para lá
   faria três ações de seções diferentes disputarem o mesmo lugar, e o aviso de cada uma nasceria
   longe do botão que o causou. */
.crm-account-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--uni-space-2);
    margin-top: var(--uni-space-3);
}

@media (max-width: 767px) {
    /* No celular a ação ocupa a largura toda: alvo maior e sem sobra à esquerda. */
    .crm-account-actions { justify-content: stretch; }
    .crm-account-actions > * { flex: 1 1 auto; }
}

/* UNICHAT-COMMERCE-FIRST-ACCESS-01 (D-32) — faixa comercial no topo do produto: tolerância
   (warning) e modo leitura (danger). Uma linha no desktop; no celular empilha e a ação vai
   para a largura toda. Tons pelos tokens semânticos; nada renderiza com a assinatura em dia. */
.crm-commercial-banner {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-2) var(--uni-space-5);
    border-bottom: 1px solid var(--uni-color-border);
    font-size: var(--uni-font-size-sm);
    line-height: 1.4;
}
.crm-commercial-banner-warning { background: var(--uni-color-warning-soft); color: var(--uni-color-text); }
.crm-commercial-banner-danger { background: var(--uni-color-danger-soft); color: var(--uni-color-text); }
.crm-commercial-banner-icon { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; }
.crm-commercial-banner-warning .crm-commercial-banner-icon { color: var(--uni-color-warning); }
.crm-commercial-banner-danger .crm-commercial-banner-icon { color: var(--uni-color-danger); }
.crm-commercial-banner-text { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 0 var(--uni-space-2); min-width: 0; }
.crm-commercial-banner-text strong { white-space: nowrap; }
.crm-commercial-banner > .app-button { flex: 0 0 auto; }

@media (max-width: 767px) {
    .crm-commercial-banner { flex-wrap: wrap; padding-inline: var(--uni-space-4); }
    .crm-commercial-banner-text { flex-direction: column; flex-basis: calc(100% - 20px - var(--uni-space-3)); }
    .crm-commercial-banner > .app-button { flex-basis: 100%; }
}

/* =====================================================================================
   UNICHAT-CUT-6 (polish, pedido do Owner 2026-09-18) — evolução visual DISCRETA da sidebar do
   shell, só CSS: estrutura, navegação, ordem, ícones, textos, dimensões e comportamento ficam
   exatamente como estão. Vale para o rail (retraído/expandido) e para o drawer, que é a mesma
   sidebar. Nenhuma outra área é tocada.

   - fundo: degradê vertical sutil preto-azulado → navy profundo;
   - item não selecionado: como hoje, hover levemente azulado;
   - item selecionado: degradê azul-marinho translúcido com luz sutil vindo da esquerda, borda
     azul quase invisível e highlight interno (inset), sem glassmorphism;
   - barra vertical fina à esquerda do selecionado, cantos suaves, degradê azul → ciano e brilho
     azul discreto — proporcional nos dois estados (a barra acompanha a altura do item, e o item
     retraído tem a mesma altura do expandido);
   - transições de 180 ms.
   Decisão em revisão visual: o Owner mantém ou reverte este bloco inteiro.
   ===================================================================================== */
.crm-sidebar {
    background: linear-gradient(180deg, #090D14 0%, #0B1420 55%, #09111B 100%);
}

.crm-sidebar-item {
    position: relative;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.crm-sidebar-item:hover {
    background: rgba(59, 111, 255, 0.10);
    color: #ffffff;
}

.crm-sidebar-item.active,
.crm-sidebar-item.active:hover {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(37, 99, 205, 0.36) 0%, rgba(25, 66, 140, 0.24) 55%, rgba(18, 46, 100, 0.18) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(96, 160, 255, 0.16),
        inset 1px 0 0 rgba(140, 200, 255, 0.10),
        0 4px 14px rgba(22, 135, 255, 0.10);
}

.crm-sidebar-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #00B7FF 0%, #1687FF 55%, #3B6FFF 100%);
    box-shadow: 0 0 8px rgba(22, 135, 255, 0.45);
    pointer-events: none;
}