/* Menu na logo (20/09, pedido do Daniel): por PREFERÊNCIA do usuário (Configurações >
   Menu: "Horizontal" ou "Na logo"; html[data-menu="logo"], gravado em localStorage —
   web/js/app.js), não mais por largura de tela. No modo "logo", o cabeçalho horizontal
   some do fluxo no Atendimento e o "LA" da logo aparece na linha da busca, alinhado à
   esquerda com o chip "Todas". Passar o mouse (ou tocar/clicar — web/js/topo-menu.js)
   abre, via web/js/topo-menu.js, o PRÓPRIO <header class="topo"> como balão embaixo da logo, com tudo o que ele
   já tinha, empilhado. Nas outras telas (Gestão, Templates, Conexão, Configurações) a
   logo fica no canto superior esquerdo (#logo-menu-telas) e o título da tela se afasta. */

.logo-menu { display: none; }
.aba-icone { display: none; }

html[data-menu="logo"] .app { position: relative; }

/* ---------- a logo na busca ---------- */
html[data-menu="logo"] .logo-menu { display: block; position: relative; flex: none; }
html[data-menu="logo"] .logo-menu-gatilho {
  position: relative; display: block; padding: 0; margin: 0; border: 0; background: transparent;
  cursor: pointer; border-radius: 6px; line-height: 0;
}
/* recorte do "LA": no PNG (500×107) o monograma ocupa as colunas 0–109 e a altura toda,
   então a janela tem a proporção 110/107 da altura e a imagem entra inteira na altura. */
/* 28px (Daniel 20/09: "diminua um pouco"), centralizado na altura do campo de busca */
html[data-menu="logo"] .logo-menu { align-self: center; }
html[data-menu="logo"] .logo-menu-corte { display: block; height: 28px; width: calc(28px * 110 / 107); overflow: hidden; }
html[data-menu="logo"] .logo-menu-corte img { display: block; height: 100%; width: auto; max-width: none; }
html[data-menu="logo"] .logo-menu-gatilho:hover, html[data-menu="logo"] .logo-menu:focus-within > .logo-menu-gatilho,
html[data-menu="logo"] .logo-menu[data-aberto="true"] > .logo-menu-gatilho { background: var(--marca-fundo); }
html[data-menu="logo"] .logo-menu-gatilho:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
/* A travessia até o balão tem tolerância de saída em topo-menu.js. */


/* ---------- a logo nas telas sem busca (Gestão, Templates, Conexão, Configurações) ---------- */
.logo-menu-telas { display: none; }
html[data-menu="logo"] .app:has(#tela-inbox:not([hidden])) .logo-menu-telas { display: none; }
html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .logo-menu-telas { display: block; position: absolute; top: 11px; left: 16px; z-index: 41; }
/* nas telas a logo é maior (20/09, Daniel) e centrada na altura da barra de atalhos */
html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .logo-menu-telas .logo-menu-corte { height: 30px; width: calc(30px * 110 / 107); }
/* o título da tela (.gestao-topo) sai de baixo da logo */
html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .gestao > .gestao-topo:first-child,
html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .gestao > * > .gestao-topo:first-child { padding-left: 40px; min-height: 28px; }
/* Gestão: a barra fixa de atalhos (chips) é o primeiro elemento e cola no topo — abre espaço para a logo */
/* sem o cabeçalho por cima, a barra é a primeira coisa da tela: fundo sólido (o translúcido
   com blur deixava o que rola por baixo "vazar" no topo) e nada de vão acima dela */
html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .gestao-atalhos {
  padding-left: 62px; top: 0; min-height: 52px; background: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 760px) {
  html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .logo-menu-telas { top: 8px; left: 12px; }
  html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .logo-menu-telas .logo-menu-corte { height: 32px; width: calc(32px * 110 / 107); }
  html[data-menu="logo"] .app:has(#tela-inbox[hidden]) .gestao-atalhos { padding-left: 58px; min-height: 48px; }
}

/* ---------- o cabeçalho vira balão (em todas as telas, 20/09 noite) ---------- */
html[data-menu="logo"] .app { --topo-altura: 0px; }
html[data-menu="logo"] .app > .topo {
  position: absolute; top: calc(10px + 36px + 8px); left: 10px; z-index: 42;
  height: auto; width: 250px; max-height: calc(100% - 60px); overflow: auto; overscroll-behavior: contain;
  flex-direction: column; align-items: stretch; gap: 8px; padding: 10px;
  background: var(--fundo-2); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.26);
  opacity: 0; visibility: hidden; pointer-events: none; transition: none;
}
html[data-menu="logo"] .app > .topo[data-menu-aberto="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
html[data-menu="logo"] .app:has(#tela-inbox[hidden]) > .topo { top: calc(18px + 28px + 8px); left: 18px; }

/* dentro do balão: cores do tema (o cabeçalho horizontal é sempre escuro; o balão segue o tema) */
html[data-menu="logo"] .app > .topo .topo-marca { gap: 9px; padding: 2px 4px 6px; border-bottom: 1px solid var(--borda); }
html[data-menu="logo"] .app > .topo .topo-logo { height: 22px; }
html[data-menu="logo"] .app > .topo .topo-produto { display: inline; border-color: var(--borda); }
html[data-menu="logo"] .app > .topo .topo-abas { flex-direction: column; gap: 2px; margin: 0; overflow: visible; }
html[data-menu="logo"] .app > .topo .aba { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13.5px; color: var(--texto-2); text-align: left; }
html[data-menu="logo"] .app > .topo .aba:hover { background: var(--fundo-3); color: var(--texto); }
html[data-menu="logo"] .app > .topo .aba.ativa { background: var(--marca-fundo); color: var(--marca); }
html[data-menu="logo"] .app > .topo .aba-icone { display: block; flex: none; width: 18px; height: 18px; }
html[data-menu="logo"] .app > .topo .so-largo { display: inline; }
html[data-menu="logo"] .app > .topo .so-estreito { display: none; }
html[data-menu="logo"] .app > .topo .topo-direita { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding-top: 8px; border-top: 1px solid var(--borda); }
html[data-menu="logo"] .app > .topo .canal-seg { background: var(--input); border-color: var(--borda); }
html[data-menu="logo"] .app > .topo .canal-seg-opcao { flex: 1; color: var(--texto-2); }
html[data-menu="logo"] .app > .topo .canal-seg-opcao.ativo { color: var(--marca); }
html[data-menu="logo"] .app > .topo .icone { color: var(--texto-2); width: 100%; text-align: left; padding: 0 10px; font-size: 15px; }
html[data-menu="logo"] .app > .topo .icone::after { content: " tema claro/escuro"; font-size: 13px; }
html[data-menu="logo"] .app > .topo .icone:hover { background: var(--fundo-3); color: var(--texto); }
html[data-menu="logo"] .app > .topo .usuario { flex-direction: column; align-items: stretch; gap: 4px; }
html[data-menu="logo"] .app > .topo .usuario-rotulo { display: inline; color: var(--texto-3); }
html[data-menu="logo"] .app > .topo .usuario select,
html[data-menu="logo"] .app > .topo .usuario-nome-btn { width: 100%; background: var(--input); color: var(--texto); border-color: var(--borda); text-align: left; }
html[data-menu="logo"] .app > .topo .botao-discreto { color: var(--texto-2); text-align: left; }
html[data-menu="logo"] .app > .topo .botao-discreto:hover { background: var(--fundo-3); color: var(--texto); }
/* Mouse, teclado e toque compartilham o estado explícito de topo-menu.js. */