/* ============================================================================
   client-shell.css: LAYOUT da casca do portal (cliente e atendente).
   docs/ux/CASCA.md (02/10/2026). Só larguras, posição, estados de recolher e a
   gaveta do celular; a aparência dos itens vem do kit (ui-nav, ui-btn, ui-menu,
   ui-search, ui-kbd, ui-count, ui-avatar, ui-badge). Tokens --ui-*; os --cls-*
   antigos continuam como apelidos para as folhas que já os usam. Escopo .cls-shell.
   Sem box-shadow, sem !important (fora o reset do topo antigo do style.css), sem
   style= inline nas views.
   ============================================================================ */

/* ── Medidas e apelidos ───────────────────────────────────────────────────── */
:root {
    --cls-header-h: 56px;          /* cabeçalho da casca (era 64); páginas calculam a altura com ele */
    --cls-side-w: 248px;           /* menu aberto */
    --cls-rail-w: 64px;            /* menu recolhido (só ícones) */
    --cls-sidebar-w: var(--cls-side-w);
    --cls-panel-w: calc(var(--cls-side-w) - var(--cls-rail-w));   /* apelido antigo (chat-list.css) */
    --cls-drawer-w: min(320px, 86vw);

    /* Fundo do conteúdo (o .cl-main usa var(--body-bg)); o kit lê o mesmo. */
    --body-bg: #F6F7F9;

    /* Apelidos antigos (palette-calm.css e folhas de página ainda leem): apontam para o kit. */
    --cls-bg: var(--ui-bg-card);
    --cls-rail-bg: var(--ui-bg-card);
    --cls-panel-bg: var(--ui-bg-card);
    --cls-header-bg: var(--ui-bg-card);
    --cls-line: var(--ui-border);
    --cls-line-2: var(--ui-border-subtle);
    --cls-ink: var(--ui-ink);
    --cls-ink-2: var(--ui-ink-2);
    --cls-muted: var(--ui-muted);
    --cls-hover: var(--ui-fill-2);
    --cls-active: rgba(var(--ui-accent-rgb), .10);
    --cls-accent: var(--ui-accent);
    --cls-on-accent: var(--ui-on-primary, #FFFFFF);
    --cls-radius: var(--ui-r-md);
    --cls-ease: var(--ui-ease);
}
:root[data-theme="dark"] { --body-bg: #0B0D12; }

/* ── Grade: menu | (cabeçalho + conteúdo) ─────────────────────────────────── */
.cls-shell {                       /* no .cl-layout do cliente e do atendente */
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.cls-shell .cl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* a rolagem vive no .cl-main-inner */
    margin-top: 0;
    background: var(--body-bg, #F6F7F9);
}
/* Alvo do "Pular para o conteúdo" (<main id="clsMain" tabindex="-1">): recebe o foco
   sem anel (é a região inteira); o próximo Tab já cai na página. */
.cls-shell #clsMain:focus { outline: none; }
/* Tela cheia (header_wide): o <main> só marca a região; o layout continua do .cl-main-wide. */
.cls-main-flow { display: contents; }
.cls-shell .cl-main-inner {
    flex: 1;
    overflow-y: auto;
    padding: var(--ui-space-6);
    /* SH-17 (DS-5, pedido IA): rótulo só para leitor de tela (.ui-sr, .visually-hidden) é absoluto;
       sem bloco de contenção aqui ele contava no DOCUMENTO e a casca inteira rolava (160 px no painel do
       teste grátis no celular). Só posiciona: nenhum sticky nem flutuante (fixed) muda. */
    position: relative;
}
/* Conversas dentro da casca: o .wa-layout ocupa o resto da coluna. */
.cls-shell .cl-main-wide { overflow: hidden; }
.cls-shell .cl-main-wide .wa-layout { height: auto; flex: 1 1 auto; min-height: 0; }

/* "Pular para o conteúdo": invisível até receber o foco (1º Tab da página). */
.cls-skip {
    position: fixed; top: var(--ui-space-2); left: var(--ui-space-2); z-index: var(--ui-z-toast);
    padding: var(--ui-space-2) var(--ui-space-4);
    border: 1px solid var(--ui-border); border-radius: var(--ui-r-md);
    background: var(--ui-bg-raised); color: var(--ui-ink);
    font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); text-decoration: none;
    transform: translateY(-200%);
}
.cls-skip:focus { transform: none; outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* Texto só para leitor de tela. */
.cls-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Alertas de flash (Bootstrap .alert) com os tokens do kit ─────────────── */
.cls-shell .alert {
    position: relative;
    border-radius: var(--ui-r-sm);
    border: 1px solid transparent;
    padding: 12px 42px 12px 16px;
    margin-bottom: var(--ui-space-4);
    font-size: var(--ui-fs-label);
    line-height: var(--ui-lh-body);
}
.cls-shell .alert svg, .cls-shell .alert i { flex: 0 0 auto; }
.cls-shell .alert-danger  { background: rgba(var(--ui-danger-rgb), .10); border-color: rgba(var(--ui-danger-rgb), .28); color: var(--ui-danger-ink); }
.cls-shell .alert-success { background: rgba(var(--ui-ok-rgb), .10);     border-color: rgba(var(--ui-ok-rgb), .28);     color: var(--ui-ok-ink); }
.cls-shell .alert-warning { background: rgba(var(--ui-warn-rgb), .10);   border-color: rgba(var(--ui-warn-rgb), .28);   color: var(--ui-warn-ink); }
.cls-shell .alert-info    { background: rgba(var(--ui-info-rgb), .10);   border-color: rgba(var(--ui-info-rgb), .28);   color: var(--ui-info-ink); }
.cls-shell .alert-link { color: inherit; font-weight: var(--ui-fw-semibold); text-decoration: underline; }
.cls-shell .alert .btn-close {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    width: 15px; height: 15px; padding: 0; border: 0; background: none; opacity: .65;
    background-color: currentColor; cursor: pointer; transition: opacity var(--ui-dur-1) var(--ui-ease);
    -webkit-mask: var(--ui-ico-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")) center/contain no-repeat;
    mask: var(--ui-ico-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")) center/contain no-repeat;
}
.cls-shell .alert .btn-close:hover { opacity: 1; }

/* ============================================================================
   MENU LATERAL (uma coluna). v2 (02/10/2026): sobrelinhas por bloco, rodapé que
   encosta embaixo, linha-guia nos itens de dentro do grupo, grupo que abre com
   altura animada, e o recolhido que abre por cima ao passar o mouse.
   Eixo único: o centro dos ícones fica em x = 32 (meio do trilho de 64) aberto,
   recolhido e espiando; a logo também. Abrir/fechar não faz nada pular de lado.
   ============================================================================ */
.cls-sidebar {
    position: relative;
    flex: 0 0 auto;
    width: var(--cls-side-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ui-bg-card);
    border-right: 1px solid var(--ui-border);
    z-index: 40;
}
@media (min-width: 992px) {
    /* Computador: as alturas do kit (36 no 1º nível, 32 dentro do grupo) no menu INTEIRO,
       em cima, no bloco do pé e no rodapé fixo (11/10/2026: era 34/30 em cima e 40 no
       rodapé; o dono pediu um menu só). A lista rola quando não cabe. Celular: 44 do kit. */
    .cls-sidebar { --ui-nav-item-h: 36px; --ui-nav-sub-h: 32px; }
}

/* Topo: marca + recolher, na mesma altura do cabeçalho (a linha de baixo continua). */
.cls-side-top {
    flex: 0 0 auto;
    height: var(--cls-header-h);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-3) 0 18px;    /* logo de 28 centrada em 32, no eixo dos ícones */
    border-bottom: 1px solid var(--ui-border);
    overflow: hidden;
}
.cls-brand {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    color: var(--ui-ink);
    text-decoration: none;
    border-radius: var(--ui-r-sm);
}
.cls-brand { min-height: 36px; }   /* alvo do mesmo tamanho dos itens do menu */
.cls-brand:hover { color: var(--ui-ink); }
.cls-brand:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.cls-brand-logo { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--ui-r-sm); object-fit: contain; }
span.cls-brand-logo { --ui-tile-size: 28px; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); }
.cls-brand-name {
    min-width: 0;
    font-size: var(--ui-fs-body-lg);
    font-weight: var(--ui-fw-semibold);
    letter-spacing: var(--ui-ls-title);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cls-collapse { flex: 0 0 auto; }
.cls-collapse .cls-ico-open, .cls-collapse .cls-ico-x { display: none; }

/* Lista: rola sozinha; a casca dá o espaçamento. */
.ui-nav.cls-nav {               /* .ui-nav.cls-nav: o ui-kit.css carrega depois e o gap dele (20) venceria */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 6px 10px;           /* 10 + 12 do item = ícone em 22..42, centro 32 */
    gap: var(--ui-space-1);      /* entre blocos: a sobrelinha já dá o respiro */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.ui-nav.cls-nav:hover { scrollbar-color: var(--ui-border) transparent; }   /* a barra só aparece com a mão no menu */

/* Sobrelinha do bloco ("Canais", "Operação"): pequena, caixa alta, quieta. */
.cls-nav .ui-nav-heading.cls-sec-head {
    min-height: 24px;
    margin: 0;
    padding: 6px var(--ui-space-3) 4px;
    align-items: flex-end;
    font-size: var(--ui-fs-caption);
    letter-spacing: .06em;
    color: var(--ui-muted);
}

/* Rodapé (Ferramentas, Indique): encosta embaixo quando sobra altura; com um grupo grande
   aberto, rola junto com o resto (nunca cobre item). */
.cls-nav > .ui-nav-sec.cls-nav-foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--ui-border-subtle);
}
/* Cliente: o bloco do pé começa pelo banner "Conectar IA", que já separa por si (sem a linha). */
.cls-nav > .ui-nav-sec.cls-nav-foot:has(> .cls-assist-wrap) { border-top: 0; padding-top: var(--ui-space-2); }

/* Itens: retorno do toque (encolhe 2%) além do fundo; o ícone acende no hover. */
.cls-nav .ui-nav-item {
    transition: background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease), transform var(--ui-dur-1) var(--ui-ease);
}
.cls-nav .ui-nav-item:active { transform: scale(.98); }
.cls-nav .ui-nav-item:hover > svg { color: var(--ui-ink); }
.cls-nav .ui-nav-item[aria-current="page"]:hover > svg { color: var(--ui-accent-ink); }
/* Seta do grupo mais quieta; escurece com a mão em cima. */
.cls-nav .ui-nav-group > summary.ui-nav-item::after { background: var(--ui-muted-2, var(--ui-muted)); transition: transform var(--ui-dur-2) var(--ui-ease-out), background-color var(--ui-dur-1) var(--ui-ease); }
.cls-nav .ui-nav-group > summary.ui-nav-item:hover::after { background: var(--ui-ink-2); }

/* Itens de dentro do grupo: linha-guia fina no eixo do ícone do grupo, item recuado depois
   dela com ícone de 16. O fundo do item atual começa depois da linha (não a cobre). */
.cls-nav .ui-nav-sub { position: relative; gap: 0; padding: 2px 0 var(--ui-space-1); }
.cls-nav .ui-nav-sub::before {
    content: ""; position: absolute; left: 21px; top: 4px; bottom: 8px; width: 1px;
    background: var(--ui-border);
}
.cls-nav .ui-nav-item.is-sub {
    width: calc(100% - 30px);
    margin-left: 30px;
    padding-left: 10px;
    gap: 10px;
    font-size: var(--ui-fs-label);   /* 13: um degrau abaixo do grupo (14), como no Linear */
}
.cls-nav .ui-nav-item.is-sub > svg { display: block; width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.cls-nav .ui-nav-heading.is-sub { padding-left: 40px; }   /* "Ferramentas" do Afiliados: no eixo dos ícones de dentro */

/* Grupo abre e fecha com a altura animada (Chrome/Edge 131+; nos outros abre na hora).
   Só a lateral reflui: uma coluna de 248 px, barato. */
@supports selector(::details-content) {
    .cls-nav { interpolate-size: allow-keywords; }
    .cls-nav .ui-nav-group::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size var(--ui-dur-2) var(--ui-ease-out), content-visibility var(--ui-dur-2) allow-discrete;
    }
    .cls-nav .ui-nav-group[open]::details-content { block-size: auto; }
}
/* Grupo aberto pela pessoa (.is-anim, posto pelo client-shell.js só nesse clique): os itens
   chegam em cascata curta. Ao carregar a página o grupo atual já nasce aberto, sem animar. */
.cls-nav .ui-nav-group.is-anim[open] > .ui-nav-sub > * { animation: clsSubIn var(--ui-dur-2) var(--ui-ease-out) backwards; }
.cls-nav .ui-nav-group.is-anim[open] > .ui-nav-sub > :nth-child(2) { animation-delay: 15ms; }
.cls-nav .ui-nav-group.is-anim[open] > .ui-nav-sub > :nth-child(3) { animation-delay: 30ms; }
.cls-nav .ui-nav-group.is-anim[open] > .ui-nav-sub > :nth-child(4) { animation-delay: 45ms; }
.cls-nav .ui-nav-group.is-anim[open] > .ui-nav-sub > :nth-child(5) { animation-delay: 60ms; }
.cls-nav .ui-nav-group.is-anim[open] > .ui-nav-sub > :nth-child(n+6) { animation-delay: 75ms; }
@keyframes clsSubIn { from { opacity: 0; transform: translateY(-4px); } }

/* ── Recolhido (computador): 64 px de ícones; a lateral fica fixa e o conteúdo
   ganha a largura. Passar o mouse (ou focar pelo teclado, ou clicar num grupo)
   "espia": a lateral abre por cima da página (.is-peek) sem empurrar nada. A
   preferência chega antes de pintar pelo html[data-cls-collapsed]; a tela
   imersiva pede .cls-railonly no servidor. ── */
@media (min-width: 992px) {
    .cls-shell:has(> .cls-sidebar.cls-railonly) { padding-left: var(--cls-rail-w); }
    :root[data-cls-collapsed] .cls-shell { padding-left: var(--cls-rail-w); }

    .cls-sidebar.cls-railonly,
    :root[data-cls-collapsed] .cls-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: var(--cls-rail-w);
        overflow: hidden;
        transition: width 150ms var(--ui-ease-in);              /* saída ~75% da entrada */
    }
    .cls-sidebar.cls-railonly.is-peek,
    :root[data-cls-collapsed] .cls-sidebar.is-peek {
        width: var(--cls-side-w);
        z-index: calc(var(--ui-z-dropdown) + 10);               /* acima de cabeçalho que suba de camada (Flow Builder: 60) */
        transition: width var(--ui-dur-2) var(--ui-ease-out);
    }
    /* Espiando, o conteúdo já nasce na largura final e a borda desliza por cima dele (cortina):
       nenhum rótulo se espreme nem vira "..." durante a abertura. */
    .cls-sidebar.is-peek > .cls-side-top,
    .cls-sidebar.is-peek > .cls-nav { width: var(--cls-side-w); flex-shrink: 0; }
    .cls-sidebar.is-peek > .cls-nav { flex: 1 1 auto; }

    /* Topo recolhido: só a logo, no eixo dos ícones. O botão de fixar aparece ao espiar. */
    .cls-sidebar.cls-railonly:not(.is-peek) .cls-side-top .cls-brand-name,
    :root[data-cls-collapsed] .cls-sidebar:not(.is-peek) .cls-side-top .cls-brand-name,
    .cls-sidebar.cls-railonly:not(.is-peek) .cls-collapse,
    :root[data-cls-collapsed] .cls-sidebar:not(.is-peek) .cls-collapse { display: none; }
    .cls-sidebar.cls-railonly .cls-collapse .cls-ico-close,
    :root[data-cls-collapsed] .cls-sidebar .cls-collapse .cls-ico-close { display: none; }
    .cls-sidebar.cls-railonly .cls-collapse .cls-ico-open,
    :root[data-cls-collapsed] .cls-sidebar .cls-collapse .cls-ico-open { display: block; }

    .cls-sidebar.cls-railonly:not(.is-peek) .cls-nav,
    :root[data-cls-collapsed] .cls-sidebar:not(.is-peek) .cls-nav { scrollbar-width: none; }

    /* Lista recolhida (.ui-nav.is-collapsed, posto pelo servidor na tela imersiva, pelo script
       logo depois do menu e pelo client-shell.js). O kit centra itens de 40; aqui o item ocupa
       os 44 do trilho com o ícone no MESMO lugar de quando está aberto, e a sobrelinha vira
       um traço curto da mesma altura (os ícones não sobem nem descem ao espiar). */
    .cls-sidebar .ui-nav.cls-nav.is-collapsed { align-items: stretch; gap: var(--ui-space-1); }
    .cls-sidebar .cls-nav.is-collapsed .ui-nav-sec { align-items: stretch; }
    .cls-sidebar .cls-nav.is-collapsed .ui-nav-item { width: 100%; padding: 0 var(--ui-space-3); justify-content: flex-start; gap: var(--ui-space-3); }
    .cls-sidebar .cls-nav.is-collapsed .ui-nav-heading.cls-sec-head {
        position: relative; height: auto; min-height: 24px; margin: 0; padding: 0;
        font-size: 0; color: transparent; background: none;
    }
    .cls-sidebar .cls-nav.is-collapsed .ui-nav-heading.cls-sec-head::after {
        content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: var(--ui-border);
    }
    /* Grupo da página atual: o ícone ganha o fundo da marca (o nome está escondido, então é
       o ícone que diz onde você está). */
    .cls-sidebar .cls-nav.is-collapsed .ui-nav-group > summary.is-current { background: rgba(var(--ui-accent-rgb), .10); }
    :root[data-theme="dark"] .cls-sidebar .cls-nav.is-collapsed .ui-nav-group > summary.is-current { background: rgba(var(--ui-accent-rgb), .16); }
    /* Ponto de "pede ação" no canto do ícone, separado do desenho por um anel da cor do fundo. */
    .cls-sidebar .cls-nav.is-collapsed .ui-nav-n { top: 4px; right: 8px; outline: 2px solid var(--ui-bg-card); }
    /* Com altura animada: o grupo aberto continua no lugar (altura 0) e abre de verdade ao
       espiar, em vez de surgir de uma vez. */
    @supports selector(::details-content) {
        .cls-sidebar .cls-nav.is-collapsed .ui-nav-sub { display: flex; }
        .cls-sidebar .cls-nav.is-collapsed .ui-nav-item.is-sub,
        .cls-sidebar .cls-nav.is-collapsed .ui-nav-heading.is-sub { display: flex; opacity: 0; }
        .cls-sidebar .cls-nav.is-collapsed .ui-nav-group[open]::details-content { block-size: 0; }
    }

    /* Ao espiar: nomes, contadores, setas e sobrelinhas aparecem logo atrás da borda. */
    .cls-sidebar.is-peek .cls-nav .ui-nav-label,
    .cls-sidebar.is-peek .cls-nav .ui-nav-item.is-sub > svg,
    .cls-sidebar.is-peek .cls-nav .ui-nav-n,
    .cls-sidebar.is-peek .cls-nav .cls-sec-head,
    .cls-sidebar.is-peek .cls-side-top .cls-brand-name,
    .cls-sidebar.is-peek .cls-collapse { animation: clsPeekIn var(--ui-dur-2) var(--ui-ease-out) 40ms backwards; }
    .cls-sidebar.is-peek .cls-nav .ui-nav-group > summary.ui-nav-item::after,
    .cls-sidebar.is-peek .cls-nav .ui-nav-item.is-locked::after { animation: clsFadeIn var(--ui-dur-2) var(--ui-ease-out) 40ms backwards; }
}
@keyframes clsPeekIn { from { opacity: 0; transform: translateX(-6px); } }
@keyframes clsFadeIn { from { opacity: 0; } }
/* Tela imersiva (Flow Builder em tela cheia: html.fb-immersive esconde a casca): sem o vão do menu recolhido. */
:root.fb-immersive .cls-shell { padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
    .cls-sidebar, .cls-sidebar.is-peek, .cls-nav .ui-nav-item { transition: none; }
    .cls-nav .ui-nav-group::details-content { transition: none; }
    .cls-sidebar *, .cls-sidebar *::after { animation: none; }
    .cls-nav .ui-nav-item:active { transform: none; }
}

/* ============================================================================
   CABEÇALHO (56 px)
   ============================================================================ */
.cls-header {
    flex: 0 0 auto;
    height: var(--cls-header-h);
    min-height: var(--cls-header-h);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-6);
    background: var(--ui-bg-card);
    border-bottom: 1px solid var(--ui-border);
    position: relative;
    z-index: var(--ui-z-header);
}
.cls-header-spacer { flex: 1 1 auto; min-width: 0; }
/* Seletores com .cls-header na frente: o ui-kit.css carrega DEPOIS desta folha e, com o
   mesmo peso, a regra do kit (display/width dos botões e da busca) venceria. */
.cls-header .cls-menu-btn, .cls-brand-m { display: none; }
.cls-header .ui-search.cls-search { width: 280px; max-width: 40vw; flex: 0 1 auto; }
.cls-plan-line { display: flex; align-items: center; gap: var(--ui-space-2); margin-right: var(--ui-space-2); white-space: nowrap; }
.cls-only-m { display: none; }

/* Botão da conta: só o avatar (32), alvo de 40. */
.cls-user {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
    min-width: var(--ui-target); height: var(--ui-target); padding: 4px;
    border: 0; border-radius: var(--ui-r-pill); background: transparent; color: var(--ui-ink-2);
    cursor: pointer; font: inherit;
    transition: background-color var(--ui-dur-1) var(--ui-ease);
}
.cls-user:hover, .cls-user[aria-expanded="true"] { background: var(--ui-fill-2); }
.cls-user:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.cls-user .ui-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Atendente: status em palavra ao lado do avatar (é o que ele mais confere). */
.cls-user.is-agent { padding: 4px 4px 4px var(--ui-space-3); font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); }

/* Menu da conta (ui-menu do kit): cabeçalho com nome, e-mail e plano. */
.cls-user-menu { min-width: 260px; }
.cls-user-head { padding: var(--ui-space-1) 10px var(--ui-space-2); }
.cls-user-head-name { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-user-head-email,
.cls-user-head-plan { font-size: var(--ui-fs-help); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cls-ext { width: var(--ui-ic-xs); height: var(--ui-ic-xs); }

/* Notificações (lista dentro do ui-menu do kit; itens montados pelo notif_js.php). */
.cls-notif { width: 340px; max-width: calc(100vw - 24px); padding: 0; }
.cls-notif-n { margin-left: var(--ui-space-2); font-size: var(--ui-fs-help); font-weight: var(--ui-fw-medium); color: var(--ui-muted); }
.cls-notif-head { padding: 12px 16px; border-bottom: 1px solid var(--ui-border-subtle); font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.cls-notif-body { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.cls-notif-empty { padding: 32px 16px; text-align: center; color: var(--ui-muted); font-size: var(--ui-fs-label); }
.cls-notif-empty svg { display: block; width: 28px; height: 28px; margin: 0 auto var(--ui-space-2); color: var(--ui-muted-2); }
.cls-notif-loading { padding: 28px 16px; text-align: center; color: var(--ui-muted); font-size: var(--ui-fs-label); }
.cls-notif-item { display: flex; gap: var(--ui-space-3); align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--ui-border-subtle); text-decoration: none; color: inherit; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.cls-notif-item:last-child { border-bottom: 0; }
a.cls-notif-item:hover, a.cls-notif-item:focus-visible { background: var(--ui-fill-2); outline: none; }
.cls-notif-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-fill-2); color: var(--ui-ink-2); }
.cls-notif-ico svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.cls-notif-ico.ok { color: var(--ui-ok-ink); background: rgba(var(--ui-ok-rgb), .12); }
.cls-notif-ico.warn { color: var(--ui-warn-ink); background: rgba(var(--ui-warn-rgb), .12); }
.cls-notif-ico.danger { color: var(--ui-danger-ink); background: rgba(var(--ui-danger-rgb), .12); }
.cls-notif-txt { flex: 1; min-width: 0; }
.cls-notif-title { font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); color: var(--ui-ink); line-height: var(--ui-lh-snug); }
.cls-notif-item.is-unread .cls-notif-title { font-weight: var(--ui-fw-semibold); }
.cls-notif-desc { font-size: var(--ui-fs-help); color: var(--ui-muted); line-height: var(--ui-lh-snug); margin-top: 2px; }
.cls-notif-time { font-size: var(--ui-fs-caption); color: var(--ui-muted); margin-top: 4px; }
.cls-notif-udot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); margin-top: 6px; }

/* ============================================================================
   CELULAR (até 991 px): cabeçalho [menu][marca] … [busca][sino][conta];
   o menu vira gaveta pela esquerda com a MESMA marcação.
   ============================================================================ */
.cls-backdrop {
    position: fixed; inset: 0; z-index: calc(var(--ui-z-drawer) - 1);
    background: var(--ui-scrim);
    opacity: 0;
    transition: opacity var(--ui-dur-4) var(--ui-ease-out);
}
.cls-shell.cls-drawer-open .cls-backdrop { opacity: 1; }
@media (min-width: 992px) { .cls-backdrop { display: none; } }

@media (max-width: 991.98px) {
    .cls-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: var(--cls-drawer-w);
        z-index: var(--ui-z-drawer);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--ui-dur-4) var(--ui-ease-out), visibility 0s linear var(--ui-dur-4);
    }
    .cls-shell.cls-drawer-open .cls-sidebar {
        transform: none; visibility: visible;
        transition: transform var(--ui-dur-4) var(--ui-ease-out), visibility 0s;
    }
    /* No celular o "recolhido" do computador não vale: a gaveta sempre tem os nomes. */
    .cls-collapse .cls-ico-close, .cls-collapse .cls-ico-open { display: none; }
    .cls-collapse .cls-ico-x { display: block; }
    .cls-side-top { padding-left: var(--ui-space-4); }
    /* Alvos de 44 na gaveta: a marca e o "Fechar menu". */
    .cls-brand { min-height: var(--ui-target-touch); }
    .cls-sidebar .cls-side-top .cls-collapse { --ui-btn-h: var(--ui-target-touch); width: var(--ui-target-touch); min-width: var(--ui-target-touch); height: var(--ui-target-touch); }

    .cls-header { padding: 0 var(--ui-space-2) 0 var(--ui-space-1); gap: var(--ui-space-1); }
    .cls-header .cls-menu-btn { display: inline-flex; }
    .cls-brand-m { display: flex; flex: 0 1 auto; min-width: 0; }
    /* Busca vira só a lupa (mesmo desenho do .is-icon do kit), depois do respiro. */
    .cls-header .ui-search.cls-search { width: var(--ui-target-touch); min-width: var(--ui-target-touch); height: var(--ui-target-touch); padding: 0; justify-content: center; order: 2; border-color: transparent; background: transparent; }
    .cls-header .ui-search.cls-search > svg { position: static; margin: 0; }
    .cls-header .ui-search.cls-search > :not(svg) { display: none; }
    .cls-header-spacer { order: 1; }
    .cls-header .cls-notif-dd { order: 3; }
    .cls-header .cls-user-dd { order: 4; }
    .cls-header .cls-plan-line, .cls-header .cls-help-dd { display: none; }
    .cls-only-m { display: block; }
    .cls-user.is-agent .cls-user-status { display: none; }
    .cls-user.is-agent { padding: 4px; }
    .cls-user { min-width: var(--ui-target-touch); height: var(--ui-target-touch); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .cls-sidebar, .cls-shell.cls-drawer-open .cls-sidebar, .cls-backdrop { transition: none; }
}
html.cls-drawer-lock, html.cls-drawer-lock body { overflow: hidden; }

/* Neutraliza o topo móvel ANTIGO do style.css (`.cl-layout { margin-top:56px;
   height:calc(100dvh - 56px) }`, de um topo fixo que não existe mais). */
@media (max-width: 767.98px) {
    .cl-layout.cls-shell { margin-top: 0 !important; height: 100vh !important; height: 100dvh !important; }
    .cls-shell .cl-main { margin-top: 0 !important; height: auto !important; }
    /* Sino no celular: o menu fica preso à tela com margens iguais (não sangra para a esquerda). */
    .ui-menu.cls-notif:not(.is-float) { position: fixed; top: calc(var(--cls-header-h) + 6px); right: 12px; left: 12px; width: auto; max-width: none; }
}

/* ============================================================================
   BANNER "CONECTAR IA" + RODAPÉ FIXO DO MENU DO CLIENTE (11/10/2026, referência do dono
   "Flow Assist"): o banner mora na lista, no topo do bloco do pé (acima de Ferramentas);
   o rodapé fixo (.cls-foot) tem só a divisória e o usuário (Configurações e Ajuda ficam
   no cabeçalho).
   Banner: raio 20, fundo da marca tingido (18% no claro), sem sombra, sem faixa; sparkles
   + título em negrito, frase de até 2 linhas e a pílula clara, que é o link e cobre o
   banner inteiro. No ESCURO a tinta da marca sobre o quase-preto vira marrom: lá o fundo
   é um tingido mais leve (10%) com um brilho suave no canto do sparkles e um contorno fino
   da marca, e a pílula é clara de verdade (texto escuro), como na referência.
   Na própria página (.is-here): contorno da marca e a pílula "Você está aqui", parada.
   Recolhido: ladrilho quadrado de raio grande no mesmo fundo, com o sparkles e a dica.
   Movimento só em opacity/transform; prefers-reduced-motion desliga.
   ============================================================================ */
.cls-foot {
    flex: 0 0 auto;
    padding: var(--ui-space-3) 10px;
    border-top: 1px solid var(--ui-border-subtle);
    background: var(--ui-bg-card);
}

.cls-assist-wrap {
    --cls-assist-bg: rgba(var(--ui-accent-rgb), .18);
    --cls-assist-glow: none;
    --cls-assist-line: transparent;
    --cls-assist-pill-bg: var(--ui-bg-card);
    --cls-assist-pill-ink: var(--ui-ink);
    margin: 2px 0 var(--ui-space-2);
}
:root[data-theme="dark"] .cls-assist-wrap {
    --cls-assist-bg: rgba(var(--ui-accent-rgb), .10);
    --cls-assist-glow: radial-gradient(120% 100% at 0% 0%, rgba(var(--ui-accent-rgb), .26), rgba(var(--ui-accent-rgb), 0) 62%);
    --cls-assist-line: rgba(var(--ui-accent-rgb), .30);
    --cls-assist-pill-bg: var(--ui-ink);
    --cls-assist-pill-ink: var(--ui-bg-card);
}
.cls-assist {
    position: relative;
    padding: 14px 14px var(--ui-space-3);
    border: 1px solid var(--cls-assist-line);
    border-radius: var(--ui-r-2xl);
    background: var(--cls-assist-glow), var(--cls-assist-bg);
    color: var(--ui-ink);
}
.cls-assist.is-here { border-color: rgba(var(--ui-accent-rgb), .55); }
@keyframes clsAssistIn { from { opacity: 0; transform: translateY(4px); } }
.cls-assist-head { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; }
.cls-assist-head > svg {
    flex: 0 0 auto; width: 18px; height: 18px; color: var(--ui-accent-ink);
    transition: transform var(--ui-dur-2) var(--ui-ease-out);
}
.cls-assist:hover .cls-assist-head > svg { transform: rotate(-12deg) scale(1.08); }
.cls-assist-t {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--ui-fs-body); font-weight: 700; line-height: var(--ui-lh-tight); letter-spacing: -.005em;
    color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cls-assist-d {
    margin: 6px 0 var(--ui-space-3);
    font-size: var(--ui-fs-help); line-height: var(--ui-lh-body); color: var(--ui-ink-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* O link (.cls-assist-btn) cobre o banner inteiro pelo ::after (alvo grande; um só ponto de foco
   e de leitura). O desenho da pílula fica no span de dentro (.cls-assist-pill), que é o que se
   move: um transform no próprio link viraria o bloco de referência do ::after e o alvo
   encolheria para o tamanho da pílula no meio do clique. */
.cls-assist-btn { display: inline-flex; border-radius: var(--ui-r-pill); text-decoration: none; }
a.cls-assist-btn::after { content: ""; position: absolute; inset: -1px; border-radius: var(--ui-r-2xl); }
a.cls-assist-btn:hover, a.cls-assist-btn:focus { text-decoration: none; }
a.cls-assist-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.cls-assist-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 0 14px;
    border-radius: var(--ui-r-pill);
    background: var(--cls-assist-pill-bg); color: var(--cls-assist-pill-ink);
    font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); line-height: 1;
    transition: transform var(--ui-dur-1) var(--ui-ease);
}
.cls-assist:hover a.cls-assist-btn > .cls-assist-pill { transform: translateY(-1px); }
.cls-assist:active a.cls-assist-btn > .cls-assist-pill { transform: scale(.97); }
.cls-assist-pill > svg { width: 14px; height: 14px; color: var(--ui-ok-ink); }
.cls-assist-btn.is-here > .cls-assist-pill { padding: 0 12px 0 10px; }
.cls-assist-btn.is-here { cursor: default; }
:root[data-theme="dark"] .cls-assist-btn.is-here .cls-assist-pill > svg { color: currentColor; }   /* pílula clara no escuro: o verde claro sumiria */

/* Ladrilho do menu recolhido: só aparece com .ui-nav.is-collapsed (computador). */
.cls-assist-tile { display: none; }

.cls-me { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 0 0 6px; }
.cls-me-av { flex: 0 0 auto; }
.cls-me-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cls-me-name { font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); line-height: var(--ui-lh-snug); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-me-sub { font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-me-out { flex: 0 0 auto; color: var(--ui-muted); }
/* Celular (gaveta): o sair com o alvo de 44. */
@media (max-width: 991.98px) {
    .cls-foot .cls-me-out { --ui-btn-h: var(--ui-target-touch); width: var(--ui-target-touch); min-width: var(--ui-target-touch); height: var(--ui-target-touch); margin-right: -6px; }
}

/* Recolhido no computador (e não espiando): o ladrilho e o avatar, no eixo do trilho. */
@media (min-width: 992px) {
    .cls-nav.is-collapsed .cls-assist { display: none; }
    .cls-nav.is-collapsed .cls-assist-wrap { margin: 2px 0 var(--ui-space-1); }
    .cls-nav.is-collapsed .cls-assist-tile {
        display: grid; place-items: center;
        width: 44px; height: 44px; margin: 0 auto;
        border: 1px solid var(--cls-assist-line);
        border-radius: var(--ui-r-xl);
        background: var(--cls-assist-glow), var(--cls-assist-bg);
        color: var(--ui-accent-ink);
        transition: transform var(--ui-dur-1) var(--ui-ease);
    }
    .cls-nav.is-collapsed .cls-assist-tile[aria-current="page"] { border-color: rgba(var(--ui-accent-rgb), .55); }
    .cls-nav.is-collapsed .cls-assist-tile > svg { width: 20px; height: 20px; transition: transform var(--ui-dur-2) var(--ui-ease-out); }
    .cls-nav.is-collapsed .cls-assist-tile:hover > svg { transform: rotate(-12deg) scale(1.08); }
    .cls-nav.is-collapsed .cls-assist-tile:active { transform: scale(.96); }
    .cls-nav.is-collapsed .cls-assist-tile:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
    .cls-sidebar.cls-railonly:not(.is-peek) .cls-me-txt,
    :root[data-cls-collapsed] .cls-sidebar:not(.is-peek) .cls-me-txt,
    .cls-sidebar.cls-railonly:not(.is-peek) .cls-me-out,
    :root[data-cls-collapsed] .cls-sidebar:not(.is-peek) .cls-me-out {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    /* Espiando: o rodapé já nasce na largura final, como a lista (a borda desliza por cima). */
    .cls-sidebar.is-peek > .cls-foot { width: var(--cls-side-w); flex-shrink: 0; }
    .cls-sidebar.is-peek .cls-me-txt,
    .cls-sidebar.is-peek .cls-me-out { animation: clsPeekIn var(--ui-dur-2) var(--ui-ease-out) 40ms backwards; }
    .cls-sidebar.is-peek .cls-assist { animation: clsAssistIn var(--ui-dur-2) var(--ui-ease-out) 60ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
    .cls-sidebar.is-peek .cls-assist, .cls-sidebar.is-peek .cls-me-txt, .cls-sidebar.is-peek .cls-me-out { animation: none; }
    .cls-assist-pill, .cls-assist-head > svg, .cls-assist-tile, .cls-assist-tile > svg { transition: none; }
    .cls-assist:hover .cls-assist-head > svg, .cls-assist-tile:hover > svg, .cls-assist:hover a.cls-assist-btn > .cls-assist-pill, .cls-assist:active a.cls-assist-btn > .cls-assist-pill { transform: none; }
}