/* ═══════════════════════════════════════════════════════════════════════════
   KARAMELOO — BARRA DE NAVEGAÇÃO FIXA (#kmlPersistentMarketShell) · v2
   ═══════════════════════════════════════════════════════════════════════════
   Dono único do topo. Carrega por último no index.html.

   Medido antes de mexer, em janela de 1920×900:

     barra inteira ........ 167px fixos  (104 do topo + 62 dos chips)
     19% de uma tela de 900px · 22% de um notebook de 768 · 25% de um celular
     chips de categoria ... visíveis em TODAS as telas — Banco, Cursos,
                            Notícias, Freelas e Chat inclusive, onde filtrar
                            editor por "Reels & Shorts" não quer dizer nada
     cobria conteúdo ...... #screenBanco em 30px e #screenChat em 167px
                            (o chat inteiro nascia embaixo da barra)

   A causa da sobreposição: `--kml-persistent-market-h` estava CHUTADA em
   214px/206px/190px/184px no redesign.css, e a barra real mede 167. Um número
   fixo nunca acompanha o conteúdo. Agora quem escreve essa variável é uma
   medição real (ResizeObserver em app.js), e aqui ela é só consumida.

   O que muda:
     1. chips só no marketplace       → devolve 62px a todas as telas internas
     2. topo de 104px para 64px       → devolve mais 40px
     3. espaço reservado pela medida  → nada mais nasce coberto

   Resultado: telas internas passam de 167px de barra para 64px.

   Cérebro: LEIS/01 - Design Anti-IA (sem sombra colorida, sem radius gigante)
   e 32 - Auditoria Publica/Guia - Mobile Karameloo Sem Corte.
   ═══════════════════════════════════════════════════════════════════════════ */

#kmlPersistentMarketShell{
  --t-papel:#ffffff;
  --t-tinta:#111827;
  --t-mut:#4b5563;
  --t-soft:#5c6573;
  --t-linha:rgba(17,24,39,.12);
  --t-ouro:#fcbc1d;
  --t-r:4px;
  --t-dur:200ms;
  --t-ease:cubic-bezier(.16,1,.3,1);
}

/* ── a casca ─────────────────────────────────────────────────────────────── */
/* Fundo sólido em vez do translúcido de antes: com o conteúdo passando por
   baixo, o texto da página aparecia fantasma atrás da barra. */
#kmlPersistentMarketShell{
  background:var(--t-papel) !important;
  border-bottom:1px solid var(--t-linha) !important;
  box-shadow:none !important;
}
/* sombra só depois que a página rola — dá o limite sem pesar parado */
body.kmlTopoRolado #kmlPersistentMarketShell{
  box-shadow:0 1px 3px rgba(17,24,39,.10) !important;
}

#kmlPersistentMarketShell .kmlPersistentMarketInner{
  width:min(1680px, calc(100vw - 84px)) !important;
}

/* ── linha superior: 104px → 64px ────────────────────────────────────────── */
/* A grade do redesign.css declara QUATRO colunas
   (`auto auto minmax(320px,1fr) auto`) para TRÊS filhos: marca, busca e ações.
   A busca caía numa coluna `auto` e ficava com 184px — medido — enquanto a
   coluna larga sobrava vazia no fim. Aqui a grade descreve o que existe. */
/* Prefixo `body:not(.preAuth)` de propósito: sem ele a grade e o padding do
   redesign.css venciam (medido — as colunas continuavam `192px 184px 1256px
   0px` e o padding `27px 0 20px`, que espremia a linha e empurrava a busca
   para fora dela). Só a altura passava. */
body:not(.preAuth) #kmlPersistentMarketShell .kmlPersistentMarketTop{
  grid-template-columns:auto minmax(220px, 560px) 1fr !important;
  min-height:64px !important;
  height:64px !important;
  padding:0 !important;
  align-items:center !important;
  gap:16px !important;
  border-bottom:0 !important;
}
body:not(.preAuth) #kmlPersistentMarketShell .marketActions{
  justify-self:end !important;
  align-self:center !important;
}

#kmlPersistentMarketShell .marketBrandTop{
  background:transparent !important; border:0 !important; padding:0 !important;
}
#kmlPersistentMarketShell .marketBrandTop img{ width:28px !important; height:28px !important }
#kmlPersistentMarketShell .marketBrandTop strong{
  color:var(--t-tinta) !important; font-weight:800; letter-spacing:-.02em; font-size:1.02rem;
}

/* Tinha 46px de altura própria e nascia em y=32: vazava 14px para dentro da
   faixa dos chips — medido. Altura travada e centralizada na linha. */
body:not(.preAuth) #kmlPersistentMarketShell .kmlMarketTopSearch{
  background:var(--t-papel) !important;
  border:1px solid var(--t-linha) !important;
  border-radius:var(--t-r) !important;
  box-shadow:none !important;
  height:38px !important; min-height:38px !important; max-height:38px !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 12px !important;
  width:100% !important; max-width:none !important;
  display:flex !important; align-items:center !important; gap:8px !important;
}
#kmlPersistentMarketShell .kmlMarketTopSearch input{
  height:100% !important; min-height:0 !important; padding:0 !important;
  border:0 !important; width:100% !important;
}
#kmlPersistentMarketShell .kmlMarketTopSearch:focus-within{
  border-color:rgba(17,24,39,.34) !important;
}
#kmlPersistentMarketShell .kmlMarketTopSearch input{
  color:var(--t-tinta) !important; background:transparent !important; font-size:.88rem;
}
#kmlPersistentMarketShell .kmlMarketTopSearch input::placeholder{ color:var(--t-soft) !important }
#kmlPersistentMarketShell .kmlMarketTopSearch svg{ color:var(--t-soft) !important }

#kmlPersistentMarketShell .marketActions{ gap:8px !important }
#kmlPersistentMarketShell .iconBtn{
  height:38px !important; padding:0 14px !important;
  border-radius:var(--t-r) !important;
  background:var(--t-papel) !important; color:var(--t-tinta) !important;
  border:1px solid var(--t-linha) !important;
  font-weight:700 !important; font-size:.82rem !important;
  box-shadow:none !important;
  transition:border-color var(--t-dur) var(--t-ease);
}
#kmlPersistentMarketShell .iconBtn:hover{ border-color:rgba(17,24,39,.3) !important }
/* O rótulo saía branco sobre o dourado — contraste 2.46, medido. Quem manda
   nele é `body:not(.preAuth) #kmlPersistentMarketShell .kmlMarketPostBtn span`
   no redesign.css, que tem uma pseudo-classe a mais que um seletor comum.
   Repetir o mesmo prefixo empata a especificidade, e este arquivo carrega
   depois — por isso ganha. */
body:not(.preAuth) #kmlPersistentMarketShell .kmlMarketPostBtn,
body:not(.preAuth) #kmlPersistentMarketShell .kmlMarketPostBtn span,
body:not(.preAuth) #kmlPersistentMarketShell .kmlMarketPostBtn svg{
  color:#1c1405 !important;
}
#kmlPersistentMarketShell .kmlMarketPostBtn{
  background:var(--t-ouro) !important;
  border-color:var(--t-ouro) !important; font-weight:800 !important;
}
#kmlPersistentMarketShell .kmlMarketPostBtn:hover{ background:#b98f1f !important }
/* mesma precaução nos demais: a cor desce do botão para o rótulo e o ícone */
#kmlPersistentMarketShell .iconBtn span,
#kmlPersistentMarketShell .iconBtn svg{ color:inherit !important }
#kmlPersistentMarketShell .iconBtn:focus-visible{ outline:2px solid #7a5d10; outline-offset:2px }

/* ── chips: só no marketplace ────────────────────────────────────────────── */
/* Aqui está o ganho principal. São filtros de categoria de EDITOR; fora da
   busca eles não filtram nada e ainda comem 62px de toda tela interna.
   A classe no body é escrita pelo showScreen (app.js). */
#kmlPersistentMarketShell .kmlPersistentMarketCats{
  display:none !important;
}
body.kmlTelaMarketplace #kmlPersistentMarketShell .kmlPersistentMarketCats{
  display:flex !important;
  align-items:center;
  gap:8px !important;
  height:56px !important;
  padding:0 !important;
  border-top:1px solid var(--t-linha) !important;
  overflow-x:auto; scrollbar-width:none;
}
#kmlPersistentMarketShell .kmlPersistentMarketCats::-webkit-scrollbar{ height:0 }

#kmlPersistentMarketShell .catBtn{
  flex:0 0 auto;
  background:var(--t-papel) !important; color:var(--t-mut) !important;
  border:1px solid var(--t-linha) !important; border-radius:var(--t-r) !important;
  padding:6px 13px !important; font-size:.78rem !important; font-weight:700 !important;
  letter-spacing:.02em; text-transform:none !important;
  box-shadow:none !important;
  transition:border-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}
#kmlPersistentMarketShell .catBtn:hover{
  border-color:rgba(17,24,39,.3) !important; color:var(--t-tinta) !important;
}
#kmlPersistentMarketShell .catBtn.active{
  background:var(--t-tinta) !important; color:#fff !important; border-color:var(--t-tinta) !important;
}
#kmlPersistentMarketShell .catBtn:focus-visible{ outline:2px solid #7a5d10; outline-offset:2px }

/* ── menu de mais opções ─────────────────────────────────────────────────── */
#kmlPersistentMarketShell .kmlMarketMoreMenu{
  background:var(--t-papel) !important;
  border:1px solid var(--t-linha) !important;
  border-radius:var(--t-r) !important;
  box-shadow:0 10px 30px rgba(17,24,39,.14) !important;
}
#kmlPersistentMarketShell .kmlMarketMoreItem{
  background:transparent !important; border:0 !important;
  color:var(--t-tinta) !important;
}
#kmlPersistentMarketShell .kmlMarketMoreItem:hover{ background:#faf7f1 !important }
#kmlPersistentMarketShell .kmlMarketMoreItem small{ color:var(--t-soft) !important }
#kmlPersistentMarketShell .kmlMarketMoreItemDanger{ color:#a3341f !important }

/* ── espaço reservado ────────────────────────────────────────────────────── */
/* O valor vem medido de app.js. O fallback de 64px é a altura do topo sem
   chips — se o JS falhar, a tela ainda não nasce coberta. */
body:not(.preAuth) .screen.show{
  padding-top:var(--kml-persistent-market-h, 64px) !important;
}
/* O chat monta a própria altura e ignorava o padding, nascendo embaixo da
   barra. Aqui ele ganha o recuo por margem, que o layout dele respeita. */
body:not(.preAuth) #screenChat.screen.show{
  padding-top:0 !important;
  margin-top:var(--kml-persistent-market-h, 64px) !important;
  height:calc(100vh - var(--kml-persistent-market-h, 64px)) !important;
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
/* Media query com o MESMO prefixo `body:not(.preAuth)`: sem ele, a regra de
   desktop acima (que tem a pseudo-classe a mais) vencia a do celular e a barra
   continuava com 64px em 390px de largura — medido. Media query não aumenta
   especificidade. */
@media (max-width:860px){
  body:not(.preAuth) #kmlPersistentMarketShell .kmlPersistentMarketInner{ width:calc(100vw - 28px) !important }
  body:not(.preAuth) #kmlPersistentMarketShell .kmlPersistentMarketTop{
    height:56px !important; min-height:56px !important; gap:10px !important;
    grid-template-columns:auto minmax(120px, 1fr) auto !important;
  }
  body:not(.preAuth) #kmlPersistentMarketShell .marketBrandTop strong{ display:none }
  /* rótulos dos botões somem; ficam os ícones */
  body:not(.preAuth) #kmlPersistentMarketShell .iconBtn span{ display:none }
  body:not(.preAuth) #kmlPersistentMarketShell .iconBtn{ padding:0 10px !important }
  body.kmlTelaMarketplace #kmlPersistentMarketShell .kmlPersistentMarketCats{ height:48px !important }
}

@media (prefers-reduced-motion:reduce){
  #kmlPersistentMarketShell .iconBtn,
  #kmlPersistentMarketShell .catBtn{ transition:none }
}