/* DENSIDADE AUTOMÁTICA (aprovado pelo dono 14/09/2026) — substitui o compacto.css
   ------------------------------------------------------------------------------
   O densidade.js grava <html data-densidade="amplo|compacto|minimo"> pela medida
   da janela. "amplo" = visual de sempre: NENHUMA regra de layout vale nele (só o
   controle A−/A+ do menu, que é peça nova).

   REGRA DO DONO (14/09): "não esconder nada e não diminuir as fontes".
   Densidade ganha espaço SÓ com respiro (padding/margens/vãos), larguras fluidas
   com mínimo, rolagem interna e quebra de linha. Toda letra fica do tamanho do
   amplo. Exceções conscientes:
     . ícones decorativos podem encolher (logo, ícones do menu e dos cartões);
     . selo do canal na lista de conversas vira só o ícone (pedido explícito);
     . o subtítulo do cabeçalho do Atendimento e de Fluxos fica oculto: são telas
       de altura cheia e a frase é descrição, não informação operacional.
   Menu lateral CONTINUA com ícone + nome; se o nome não couber, quebra em 2 linhas.

   COMO ESTÁ ORGANIZADO
   1. TOKENS: cada nível redefine variáveis (--d-*). Mudar um espaço = mudar 1 token.
   2. REGRAS: consomem os tokens. Dois prefixos, de propósito:
        :where([data-densidade=…])  especificidade ZERO → só troca o PADRÃO (ex.: `.btn`);
                                    regra mais específica do tema ou style="" inline vence.
        :is([data-densidade=…])     especificidade de atributo → vence regra específica.
      !important só onde há style="" inline (index.html / app.js) ou regra :has() do tema.
   Tudo dentro de @media (min-width:901px): abaixo disso o layout de celular do
   style.css assume e nada aqui briga com ele.
   DESLIGAR: remova do index.html o <script densidade.js> e o <link densidade.css>. */

/* ---------- controle A− / A+ no rodapé do menu (todos os níveis) ---------- */
.dens-ctl{display:flex;align-items:center;gap:3px;margin:6px 0 2px;padding:3px;border-radius:10px;
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);}
.dens-ctl button{font-family:inherit;border:0;cursor:pointer;color:#fff;background:transparent;
  border-radius:7px;line-height:1;height:24px;transition:background .12s;}
.dens-btn{flex:none;width:30px;font-size:12px;font-weight:700;}
.dens-modo{flex:1;min-width:0;font-size:12px;font-weight:600;padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dens-modo.on{background:rgba(255,255,255,.20);}
.dens-ctl button:hover:not(:disabled){background:rgba(255,255,255,.26);}
.dens-ctl button:disabled{opacity:.38;cursor:default;}
.dens-ctl button:focus-visible{outline:2px solid #fff;outline-offset:1px;}

@media (min-width: 901px) {

/* ==========================================================================
   1. TOKENS POR NÍVEL (só espaço e largura — nenhum tamanho de letra)
   ========================================================================== */
html[data-densidade="compacto"] {
  --d-side-w: clamp(200px, 16vw, 248px);  --d-side-pad: 12px 10px;  --d-nav-pad: 5px 10px;  --d-nav-ic: 17px;  --d-nav-gap: 10px;
  --d-navlabel-pad: 8px 10px 3px;  --d-logo: 34px;
  --d-main-pad: 10px 16px 16px;  --d-main-pad-v: 26px;
  --d-head-mb: 14px;
  --d-btn-pad: 8px 13px;  --d-btn-sm-pad: 5px 10px;  --d-campo-pad: 8px 11px;  --d-seg-pad: 5px 12px;
  --d-mb: 11px;  --d-gap: 10px;  --d-g2-gap: 16px;  --d-painel-pad: 15px;
  --d-mc-pad: 12px 14px;  --d-card-min: 220px;  --d-g2-min: 380px;
  --d-cel-pad: 8px 10px;  --d-tab-h: max(280px, calc(100vh - 150px));
  --dash-h: 370px;  --d-in-pad: 12px 14px;  --d-barra-h: 130px;
  /* Atendimento: lista e ficha fluidas com limite; a conversa fica com o resto */
  --d-lista-w: clamp(220px, 21%, 290px);  --d-ficha-w: clamp(220px, 23%, 320px);
  --d-chat-h: calc(100vh - 118px);  --d-chat-min: 440px;
  --d-fone-body: 240px;  --d-tpl-min: 300px;  --d-bi-w: 250px;  --d-bot-min: 300px;
  --d-fl-pal: 180px;  --d-fl-min: 400px;
}
html[data-densidade="minimo"] {
  --d-side-w: clamp(200px, 16vw, 248px);  --d-side-pad: 8px 8px;  --d-nav-pad: 4px 9px;  --d-nav-ic: 16px;  --d-nav-gap: 8px;
  --d-navlabel-pad: 6px 9px 2px;  --d-logo: 30px;
  --d-main-pad: 8px 12px 12px;  --d-main-pad-v: 20px;
  --d-head-mb: 10px;
  --d-btn-pad: 7px 11px;  --d-btn-sm-pad: 4px 9px;  --d-campo-pad: 7px 10px;  --d-seg-pad: 5px 10px;
  --d-mb: 9px;  --d-gap: 8px;  --d-g2-gap: 12px;  --d-painel-pad: 12px;
  --d-mc-pad: 10px 12px;  --d-card-min: 200px;  --d-g2-min: 360px;
  --d-cel-pad: 7px 8px;  --d-tab-h: max(260px, calc(100vh - 120px));
  --dash-h: 330px;  --d-in-pad: 10px 12px;  --d-barra-h: 110px;
  --d-lista-w: clamp(220px, 21%, 290px);  --d-ficha-w: clamp(220px, 23%, 320px);
  --d-chat-h: calc(100vh - 106px);  --d-chat-min: 400px;
  --d-fone-body: 200px;  --d-tpl-min: 280px;  --d-bi-w: 220px;  --d-bot-min: 270px;
  --d-fl-pal: 160px;  --d-fl-min: 360px;
}

/* ==========================================================================
   2. MENU E MOLDURA
   ========================================================================== */
  /* a largura real do menu é a 1ª coluna do .app; fluida entre 200 e 248px */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .app { grid-template-columns: var(--d-side-w) minmax(0, 1fr) !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side { width: var(--d-side-w) !important; padding: var(--d-side-pad) !important; gap: 1px; }
  /* em 768px de altura o menu passava 79–120px do fim da tela e o "Sair" ficava inalcançável
     (é sticky 100vh): menos respiro vertical e, se ainda faltar, ele rola por dentro */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side,
  [data-densidade-modo="manual"] .side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .nav { padding: var(--d-nav-pad) !important; gap: var(--d-nav-gap); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .nav i { font-size: var(--d-nav-ic); width: 18px; flex: none; }   /* ícone: decorativo */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .navlabel { padding: var(--d-navlabel-pad); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .brand { padding: 2px 8px 6px; gap: 10px; margin-bottom: 6px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .logo { width: var(--d-logo); height: var(--d-logo); font-size: calc(var(--d-logo) * .56); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .tg { padding-bottom: 6px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side .lgpd-badge { margin: 4px 0 2px !important; padding: 4px 10px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side #logoutBtn { margin-top: 3px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .dens-ctl { margin: 3px 0 1px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .main { padding: var(--d-main-pad) !important; }

/* ==========================================================================
   3. ATENDIMENTO (regras do compacto.css, QA 14/09, sem redução de letra)
   ========================================================================== */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="atendimento"] .head { margin-bottom: 6px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="atendimento"] .head h1 { margin: 0 !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="atendimento"] .head p { display: none !important; }   /* descrição; a altura vai para a conversa */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="atendimento"] .row.mb { margin-bottom: 6px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="atendimento"] .seg button { padding: 4px 10px !important; }

  /* três colunas fluidas: lista e ficha entre mínimo e máximo, a CONVERSA fica com o resto
     (ela nunca recolhe). Com o cabeçalho enxuto a conversa ganha a altura da tela. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chatgrid { grid-template-columns: var(--d-lista-w) minmax(0, 1fr) var(--d-ficha-w) !important; height: var(--d-chat-h) !important; min-height: var(--d-chat-min) !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead { padding: 8px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead input,
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead select { padding-top: 5px !important; padding-bottom: 5px !important; }
  /* filtros da lista com a letra normal não cabem em 220px: quebram linha em vez de sair pela esquerda
     (Todos · Massivo · Backoffice cortava "Todos" em 1093px). Filtro "aguardando" do app.js: só respiro. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead .seg { flex-wrap: wrap; row-gap: 2px; border-radius: 16px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead .seg button { flex: 1 1 auto; justify-content: center; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead .atd-espera { gap: 4px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convlist .av,
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chathead .av { width: 32px !important; height: 32px !important; min-width: 32px !important; }

  /* cabeçalho da conversa: nome e telefone numa linha só; min-width:0 deixa o nome longo
     encolher com "…" — sem ele o nome empurrava "Encerrar" para baixo */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chathead { padding: 7px 10px !important; gap: 6px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chathead > .row:first-child { min-width: 0; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chathead > .row:last-child { flex: none; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chathead .row > div { min-width: 0; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) #cname,
  :is([data-densidade="compacto"],[data-densidade="minimo"]) #csub { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: block; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chathead .btn.sm { padding: 4px 7px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .orig-bar { padding: 5px 10px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chatbody { padding: 10px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .chatfoot { padding: 8px 10px; gap: 8px; }

  /* ficha da direita: sempre visível, com menos respiro */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .leadpanel { padding: 10px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .leadpanel .lpav { width: 48px !important; height: 48px !important; }

  /* LISTA DE CONVERSAS: com a letra do tamanho normal, cada item vira uma grade de 3 linhas
       1. nome sozinho, na largura toda (… só em nome longo)
       2. prévia (…) · selo do canal só com ícone · ícone IA/humano
       3. aguardando + etiquetas · contador de não lidas
     As duas primeiras <div> do app.js viram display:contents para os filhos entrarem na grade. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item { gap: 6px !important; padding-left: 6px !important; padding-right: 6px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > input { width: 14px !important; min-width: 14px !important; margin: 0 !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 5px; row-gap: 3px; align-items: center; min-width: 0 !important; flex: 1 !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:nth-child(-n+2),
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:first-child > span:last-child { display: contents !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item .conv-nome { grid-column: 1 / -1; grid-row: 1; min-width: 0 !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item .conv-nome > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:nth-child(2) > .muted { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:nth-child(2) > .ctag { grid-column: 2; grid-row: 2; font-size: 0 !important; gap: 0 !important; padding: 1px 5px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:nth-child(2) > .ctag i { font-size: 12px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:first-child i:is(.ti-user, .ti-robot) { grid-column: 3; grid-row: 2; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child > div:nth-child(3) { grid-column: 1 / 3; grid-row: 3; min-width: 0; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item > div:last-child:not(:has(.conv-n)) > div:nth-child(3) { grid-column: 1 / -1; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .conv-item .conv-n { grid-column: 3; grid-row: 3; justify-self: end; }

/* ==========================================================================
   4. DEMAIS TELAS — só respiro, grades que quebram linha e rolagem interna
   ========================================================================== */
  /* CABEÇALHO: grupos de botões quebram linha em vez de sair da tela (Fluxos: +258px em 1024) */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .head { margin-bottom: var(--d-head-mb); gap: 10px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .head .row { flex-wrap: wrap; justify-content: flex-end; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .chip { padding: 5px 10px; }

  /* CONTROLES (só o padrão; botão com estilo próprio ou inline mantém o dele).
     nowrap: "Construir com IA" e "Ativar no atendimento" quebravam em 2 linhas. */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .btn { padding: var(--d-btn-pad); white-space: nowrap; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .btn.sm { padding: var(--d-btn-sm-pad); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) input:where(:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range])),
  :where([data-densidade="compacto"],[data-densidade="minimo"]) select,
  :where([data-densidade="compacto"],[data-densidade="minimo"]) textarea { padding: var(--d-campo-pad); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .seg button { padding: var(--d-seg-pad); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .lbl { margin-bottom: 4px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .mb { margin-bottom: var(--d-mb); }
  /* formulário estreito: campos lado a lado descem para a linha de baixo (rótulo segue em cima) */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .main .row:has(> div > .lbl) { flex-wrap: wrap; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .main .row:has(> div > .lbl) > div { min-width: min(150px, 100%) !important; }

  /* CARTÕES DE NÚMERO E GRADES: quebram para nova fileira em vez de espremer; a página rola.
     !important: o tema fixa colunas por quantidade com :has() e o Validador tem style="" inline. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .cards { grid-template-columns: repeat(auto-fit, minmax(min(var(--d-card-min), 100%), 1fr)) !important; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .cards { gap: var(--d-gap); margin-bottom: 14px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .mc { padding: var(--d-mc-pad); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .mc .ic { width: 28px; height: 28px; font-size: 16px; margin-bottom: 7px; }   /* ícone: decorativo */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .panel.pad { padding: var(--d-painel-pad); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .g2 { grid-template-columns: repeat(auto-fit, minmax(min(var(--d-g2-min), 100%), 1fr)); gap: var(--d-g2-gap); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .sec-lbl { margin-bottom: 9px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .funnel { gap: 10px; flex-wrap: wrap; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .fstep { padding: 11px 13px; min-width: 150px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .tiercard { padding: 10px; }

  /* TABELAS: nunca cortar coluna. O painel (overflow:hidden inline) rola POR DENTRO, com
     cabeçalho e 1ª coluna presos — Agendador e Equipe cortavam em 1024. Continua tabela. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .panel:has(table) { overflow: auto !important; max-height: var(--d-tab-h); overscroll-behavior: contain; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) th,
  :where([data-densidade="compacto"],[data-densidade="minimo"]) td { padding: var(--d-cel-pad); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) td .av { width: 32px; height: 32px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .panel:has(table) thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .panel:has(table) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .panel:has(table) thead th:first-child { z-index: 3; }

  /* INÍCIO: os cartões já são auto-fit (style="" inline, mín. 210px); aqui só respiro.
     Gráfico e atividade mantêm a mesma altura (--dash-h); a lista rola por dentro. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) #inCards { gap: var(--d-gap) !important; margin-bottom: 12px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) #inCards > .panel { padding: var(--d-in-pad) !important; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .in-duo { gap: var(--d-gap); }

  /* DASHBOARD */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .barchart { height: var(--d-barra-h); gap: 10px; }

  /* ENVIOS META / AGENDADOR: prévia do celular com menos altura mínima */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .fone .wa-body { min-height: var(--d-fone-body); }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen:is([data-screen="filaxprisma"],[data-screen="agendador"]) h2 { margin-bottom: 9px !important; }

  /* TEMPLATES */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--d-tpl-min), 100%), 1fr)); gap: 10px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .tpl-card { padding: 11px 12px; }

  /* AGENTES */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .bi-grid { grid-template-columns: var(--d-bi-w) minmax(0,1fr); gap: 14px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .bi-bots { max-height: 340px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .bi-sec { padding: 11px 13px; }

  /* RELATÓRIOS META / CAMPANHAS: filtros com min-width inline menores (quebram linha) */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen:is([data-screen="relmeta"],[data-screen="campanhas"]) select[style*="min-width"] { min-width: 150px !important; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .rm-aba { padding: 7px 14px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .cp-mets { gap: 6px; margin-top: 9px; }

  /* BOTS & QUALIDADE (o caso de 1 bot só, do tema, continua valendo) */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .botgrid { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(var(--d-bot-min), 100%), 1fr)); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .botcard { padding: 13px; }

  /* FLUXOS: ferramenta de tela cheia (o quadro não reflui). A tela vira coluna da altura
     da janela, a barra de ferramentas quebra linha e o quadro pega o que sobrar. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="fluxos"] .head { margin-bottom: 8px; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="fluxos"] .head p { display: none; }   /* descrição; a altura vai para o quadro */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="fluxos"] #flSel { min-width: 150px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="fluxos"] #flBot { min-width: 190px !important; }
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .screen[data-screen="fluxos"].show { display: flex; flex-direction: column; height: calc(100vh - var(--d-main-pad-v)); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .flbuilder { grid-template-columns: var(--d-fl-pal) minmax(0,1fr); gap: 10px; flex: 1 1 auto; height: auto; min-height: var(--d-fl-min); }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .flpalette { padding: 10px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .flnode-btn { padding: 7px 10px; margin-bottom: 6px; }

  /* ETIQUETAS */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .etbot-hd { padding: 10px 13px; }
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .etbot-body { padding: 11px 13px 12px; }

  /* MODAIS (login-card como caixa) sem altura inline: nunca mais altos que a tela */
  :where([data-densidade="compacto"],[data-densidade="minimo"]) .login-overlay .login-card { max-height: calc(100vh - 32px); overflow-y: auto; }

/* ==========================================================================
   5. SÓ NO MÍNIMO — ainda menos respiro (letra continua a mesma)
   ========================================================================== */
  [data-densidade="minimo"] .conv-item { padding-top: 9px !important; padding-bottom: 9px !important; }
  [data-densidade="minimo"] .bub { padding: 7px 11px; }
  [data-densidade="minimo"] .lprow { padding: 4px 0; }
  [data-densidade="minimo"] .lpsec { margin: 12px 0 6px; }
  [data-densidade="minimo"] .leadpanel .lphead { padding-bottom: 10px; margin-bottom: 8px; }
  [data-densidade="minimo"] .fone { width: min(260px, 100%); }

/* ==========================================================================
   6. FICHA DO CONTATO RECOLHÍVEL — DESLIGADA (dono 14/09: não esconder nada)
   ----------------------------------------------------------------------------
   Inerte enquanto FICHA_GAVETA = false no densidade.js (sem data-ficha no <html>).
   Mantida só para religar sem reescrever; a ficha fica SEMPRE visível.
   ========================================================================== */
  [data-ficha="recolhida"] .chatgrid,
  [data-ficha="gaveta"] .chatgrid { grid-template-columns: var(--d-lista-w, 290px) minmax(0, 1fr) !important; position: relative; }
  [data-ficha="recolhida"] .leadpanel { display: none !important; }
  [data-ficha="gaveta"] .leadpanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 85%); z-index: 6;
    background: #fff; border-left: 1px solid var(--line); box-shadow: -14px 0 34px rgba(23,26,43,.20); animation: fichaEntra .16s ease-out; }
  [data-ficha="gaveta"] #infobtn { background: var(--brand-l); color: var(--brand-tx); box-shadow: inset 0 0 0 1px var(--brand-bd); }
  @keyframes fichaEntra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { [data-ficha="gaveta"] .leadpanel { animation: none; } }

} /* fim @media (min-width:901px) */