/* ====================================================================
   web/css/barra.css — a barra lateral do ecossistema novo (rodada
   "Ecossistema", 07/10/2026; refino 08/10/2026) + os tokens do design
   system em TODA tela com a flag ligada.

   Escopo: `html[data-visual-a]` — o atributo existe (mesmo vazio) sempre
   que a flag da trilha nova está ligada (js/visual-a.js põe "home", "chat"
   ou ""). Sem a flag, nada aqui vale: a barra é a de style.css.
   A estrutura (.bl-topo, .bl-meio, .bl-secao, .bl-pe, .bl-borda) é criada
   por js/barra.js; `html[data-bl-modo]` diz a faixa da tela
   (lado ≥ 1024 · trilho 769–1023 · gaveta ≤ 768).

   ---------------------------------------------------------------------
   O PADRÃO VISUAL (selo Apple / ChatGPT, direção A — 08/10/2026)
   Vale para a barra e para as telas do ecossistema (conta, plano,
   checkout, Aprender o método, perfil, relatório, simulador,
   questionários). Os tokens --ds-* abaixo são a fonte; as outras folhas
   (eco-modulos.css, conta.css, aprender.css) usam os mesmos valores.
   1. Tipografia: a fonte do sistema (SF / Segoe). Escala 12 · 13 · 14 ·
      15 · 16 (leitura) · 18 · 22 · 26 (título de página; 24 no celular).
      Pesos só 400 / 500 / 600 — nunca 700. Títulos com -0.02em. Número
      com tabular-nums. Rótulo de grupo em caixa normal, 13/500, cinza.
   2. Cor: tinta #0a1628; texto secundário #5b6472; terciário #8a929e;
      hairline rgba(10,22,40,.08). Fundo de hover rgba(10,22,40,.045),
      de ativo rgba(10,22,40,.07). UMA cor de ação (azul #152848);
      dourado só como acento (marca, selo "Demo", cupom); perigo #b42318.
   3. Forma: raio 10 em item de lista/menu, 12 em campo e card pequeno,
      16 em card e popover, 999 (pílula) em botão de ação e chip. Sombra
      nenhuma em repouso; popover 0 12px 32px rgba(10,22,40,.12) +
      hairline; diálogo 0 24px 64px rgba(10,22,40,.18).
   4. Espaço: grade de 4. Item 36 px de altura (44 no toque), recuo 10.
      Página: coluna de 720 (configuração, listas) ou 680 (leitura);
      título → conteúdo 24; entre grupos 28.
   5. Estados e movimento: hover muda só o fundo (o peso não pula);
      ativo = fundo + tinta plena + peso 500; foco-visível = anel 2 px
      azul com 2 px de folga; cor em 150 ms, layout em 220 ms
      cubic-bezier(.23,1,.32,1); prefers-reduced-motion desliga tudo.
      Ícones lucide 16–18 px, traço 1.6.
   ==================================================================== */

/* ---------- tokens: os de visual-a.css + os do padrão, valendo em qualquer tela com a flag ---------- */
html[data-visual-a] {
  --va-navy: #0a1628;
  --va-gold: #c9a040;
  --va-gold-ink: #7d5e10;
  --va-gold-soft: rgba(201, 160, 64, 0.16);
  --va-ink: #0a1628;
  --va-dim: #5b6472;
  --va-line: #e6e8ec;
  --va-fill: #f3f4f6;
  --va-bg: #ffffff;
  --va-azul: #152848;
  --va-azul-texto: #33476b;
  --va-azul-06: #f1f4f9;
  --va-azul-10: #e6ecf6;
  --va-azul-linha: #d5dcea;
  --va-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* o padrão (ver o cabeçalho) */
  --ds-ink: #0a1628;
  --ds-ink-2: #5b6472;
  --ds-ink-3: #8a929e;
  --ds-hair: rgba(10, 22, 40, 0.08);
  --ds-hover: rgba(10, 22, 40, 0.045);
  --ds-ativo: rgba(10, 22, 40, 0.07);
  --ds-fill: #f3f4f6;
  --ds-azul: #152848;
  --ds-perigo: #b42318;
  --ds-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-sombra-pop: 0 12px 32px rgba(10, 22, 40, 0.12);
  /* a barra */
  --bl-fundo: #f7f8fa;
  --bl-texto: #222b3a;
  --bl-icone: #6b7380;
  --bl-w: 264px;
  --bl-trilho: 56px;
}

/* ---------- a barra ---------- */
html[data-visual-a] .sidebar.bl {
  position: relative;
  width: var(--bl-w); padding: 8px;
  display: flex; flex-direction: column; gap: 0;
  overflow: visible;
  background: var(--bl-fundo); border-right: 1px solid var(--ds-hair);
  font-family: var(--va-font); font-size: 14px; color: var(--bl-texto);
  -webkit-font-smoothing: antialiased;
}
html[data-visual-a].bl-pronta:not([data-bl-modo="gaveta"]) .sidebar.bl { transition: width 0.22s var(--ds-ease), margin-right 0.22s var(--ds-ease), box-shadow 0.22s var(--ds-ease); }
html[data-visual-a] body.bl-arrastando .sidebar.bl { transition: none !important; }
/* o que a barra nova não usa (fica no DOM: outros scripts ainda clicam #logout-btn e #fb-fab) */
html[data-visual-a] .sidebar.bl > .nav,
html[data-visual-a] .sidebar.bl > .nav-section-label,
html[data-visual-a] .sidebar.bl > .sidebar-foot,
html[data-visual-a] .sidebar.bl > .sidebar-close { display: none !important; }
html[data-visual-a] .bottom-nav { display: none !important; }

/* topo: a marca (a mesma) e o botão de esconder/mostrar */
html[data-visual-a] .sidebar.bl .bl-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  min-height: 44px; padding: 0 0 8px 2px; flex: none; overflow: hidden;
}
html[data-visual-a] .sidebar.bl .brand {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px; margin: 0;
  border-radius: 10px; cursor: pointer;
}
@media (hover: hover) { html[data-visual-a] .sidebar.bl .brand:hover { background: var(--ds-hover); } }
html[data-visual-a] .sidebar.bl .brand-mark svg { width: 26px; height: 26px; display: block; }
html[data-visual-a] .sidebar.bl .brand-text { min-width: 0; }
html[data-visual-a] .sidebar.bl .brand-text strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--ds-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em;
}
html[data-visual-a] .sidebar.bl .brand-text span { display: none; }

html[data-visual-a] .bl-ib {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--bl-icone); cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
html[data-visual-a] .bl-ib:hover { background: var(--ds-hover); color: var(--ds-ink); }
html[data-visual-a] .sidebar.bl button:focus-visible,
html[data-visual-a] .sidebar.bl [role="button"]:focus-visible { outline: 2px solid var(--ds-azul); outline-offset: -2px; }
html[data-visual-a] .bl-ib svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* o meio rola sozinho; o topo e o usuário ficam parados */
html[data-visual-a] .sidebar.bl .bl-meio {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px;
  overflow-x: hidden; overflow-y: auto; margin: 0 -8px; padding: 2px 8px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(10, 22, 40, 0.16) transparent;
}

/* as duas seções (macrotemas), recolhíveis: o cabeçalho é um botão com a seta */
html[data-visual-a] .sidebar.bl .bl-secao { display: flex; flex-direction: column; gap: 0; }
html[data-visual-a] .sidebar.bl .bl-cab {
  display: flex; align-items: center; gap: 4px; width: 100%; min-height: 30px; margin: 0 0 2px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ds-ink-2); text-align: left;
  transition: background-color 0.15s, color 0.15s;
}
html[data-visual-a] .sidebar.bl .bl-cab:hover { color: var(--ds-ink); background: var(--ds-hover); }
html[data-visual-a] .sidebar.bl .bl-cab-seta {
  width: 14px; height: 14px; stroke-width: 1.8; color: var(--ds-ink-3);
  opacity: 0; transition: transform 0.22s var(--ds-ease), opacity 0.15s;
}
html[data-visual-a] .sidebar.bl .bl-cab:hover .bl-cab-seta,
html[data-visual-a] .sidebar.bl .bl-cab:focus-visible .bl-cab-seta,
html[data-visual-a] .sidebar.bl .bl-fechada .bl-cab-seta { opacity: 1; }
html[data-visual-a] .sidebar.bl .bl-fechada .bl-cab-seta { transform: rotate(-90deg); }
@media (hover: none) { html[data-visual-a] .sidebar.bl .bl-cab-seta { opacity: 1; } }
html[data-visual-a] .sidebar.bl .bl-corpo {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s var(--ds-ease), opacity 0.18s;
}
html[data-visual-a] .sidebar.bl .bl-fechada .bl-corpo { grid-template-rows: 0fr; opacity: 0; }
html[data-visual-a] .sidebar.bl .bl-corpo-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }

/* os itens: leves — 14/400, ícone 18 de traço fino em cinza, o ativo só ganha fundo e peso 500 */
html[data-visual-a] .sidebar.bl .bl-item,
html[data-visual-a] .sidebar.bl .neg-new {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 36px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--bl-texto); font: inherit; font-size: 14px; font-weight: 400; line-height: 1.3; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}
html[data-visual-a] .sidebar.bl .bl-item:hover,
html[data-visual-a] .sidebar.bl .neg-new:hover { background: var(--ds-hover); color: var(--bl-texto); border-color: transparent; }
html[data-visual-a] .sidebar.bl .bl-item.active { background: var(--ds-ativo); color: var(--ds-ink); font-weight: 500; }
html[data-visual-a] .sidebar.bl .bl-ic,
html[data-visual-a] .sidebar.bl .neg-new-icon { width: 18px; height: 18px; flex: none; color: var(--bl-icone); stroke-width: 1.6; }
html[data-visual-a] .sidebar.bl .bl-item.active .bl-ic { color: var(--ds-ink); }
html[data-visual-a] .sidebar.bl .bl-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-visual-a] .sidebar.bl .bl-tag {
  flex: none; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--va-gold-ink);
  background: var(--va-gold-soft); border-radius: 999px; padding: 1px 7px; line-height: 16px;
}
/* (11/10) o selo "Novo" em "Treinar com um caso", até abrir a galeria uma vez (js/casos.js) */
html[data-visual-a] .sidebar.bl .bl-novo { flex: none; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: #fff; background: var(--ds-azul, #152848); border-radius: 999px; padding: 1px 7px; }
html[data-visual-a] .sidebar.bl .neg-new { order: 0; margin-bottom: 2px; }
html[data-visual-a] .sidebar.bl .neg-new span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a lista de negociações */
html[data-visual-a] .sidebar.bl .bl-rolo { display: flex; flex-direction: column; }
html[data-visual-a] .sidebar.bl .neg-list { display: flex; flex-direction: column; gap: 1px; margin: 0; }
html[data-visual-a] .sidebar.bl .neg-item {
  position: relative; min-height: 36px; padding: 0 4px 0 10px; gap: 4px;
  border-radius: 10px; color: var(--bl-texto); font-family: var(--va-font); font-size: 14px; font-weight: 400;
  transition: background-color 0.15s;
}
html[data-visual-a] .sidebar.bl .neg-item:hover { background: var(--ds-hover); color: var(--bl-texto); }
html[data-visual-a] .sidebar.bl .neg-item.active { background: var(--ds-ativo); color: var(--ds-ink); font-weight: 500; }
html[data-visual-a] .sidebar.bl .neg-item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* os 3 pontos: aparecem no hover e no item aberto (como no Claude); sempre no toque */
html[data-visual-a] .sidebar.bl .neg-item-more {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--bl-icone);
  opacity: 0; cursor: pointer; transition: opacity 0.15s, background-color 0.15s;
}
html[data-visual-a] .sidebar.bl .neg-item:hover .neg-item-more,
html[data-visual-a] .sidebar.bl .neg-item.active .neg-item-more,
html[data-visual-a] .sidebar.bl .neg-item-more:focus-visible { opacity: 1; }
html[data-visual-a] .sidebar.bl .neg-item-more:hover { background: var(--ds-ativo); color: var(--ds-ink); }
html[data-visual-a] .sidebar.bl .neg-item-more svg { width: 16px; height: 16px; stroke-width: 1.8; }
@media (hover: none) {
  html[data-visual-a] .sidebar.bl .neg-item-more { opacity: 1; }
}
html[data-visual-a] .sidebar.bl .neg-item-rename {
  flex: 1; min-width: 0; height: 32px; margin: 2px 0; padding: 0 8px;
  border: 1px solid var(--ds-azul); border-radius: 8px; outline: 0;
  background: #fff; color: var(--ds-ink); font: inherit; font-family: var(--va-font); font-size: 14px;
}
html[data-visual-a] .sidebar.bl .bl-vazio { margin: 4px 10px; font-size: 13px; line-height: 1.45; color: var(--ds-ink-2); }

/* embaixo: o usuário e o menu da conta */
html[data-visual-a] .sidebar.bl .bl-pe { position: relative; flex: none; padding-top: 6px; border-top: 1px solid var(--ds-hair); }
html[data-visual-a] .sidebar.bl .bl-usuario {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 6px 8px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ds-ink);
  font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s;
}
html[data-visual-a] .sidebar.bl .bl-usuario:hover,
html[data-visual-a] .sidebar.bl .bl-usuario[aria-expanded="true"] { background: var(--ds-hover); }
html[data-visual-a] .sidebar.bl .bl-avatar {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--ds-azul); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
html[data-visual-a] .sidebar.bl .bl-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
html[data-visual-a] .sidebar.bl .bl-nome { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-visual-a] .sidebar.bl .bl-plano { font-size: 12px; color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-visual-a] .sidebar.bl .bl-seta { width: 16px; height: 16px; flex: none; color: var(--bl-icone); stroke-width: 1.6; }
html[data-visual-a] .sidebar.bl .bl-pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30;
  min-width: 232px; padding: 6px; background: #fff;
  border: 1px solid var(--ds-hair); border-radius: 16px;
  box-shadow: var(--ds-sombra-pop);
  animation: bl-pop-entra 0.16s var(--ds-ease);
  transform-origin: bottom left;
}
html[data-visual-a] .sidebar.bl .bl-pop[hidden] { display: none; }
html[data-visual-a] .sidebar.bl .bl-pop hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--ds-hair); }
html[data-visual-a] .sidebar.bl .bl-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ds-ink);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
html[data-visual-a] .sidebar.bl .bl-pop-item:hover,
html[data-visual-a] .sidebar.bl .bl-pop-item:focus-visible { background: var(--ds-hover); outline: 0; }
html[data-visual-a] .sidebar.bl .bl-pop-item svg { width: 17px; height: 17px; color: var(--bl-icone); stroke-width: 1.6; }
@keyframes bl-pop-entra { from { opacity: 0; transform: translateY(4px) scale(0.98); } }

/* o menu de 3 pontos de cada negociação (negotiations.js, no <body>) */
html[data-visual-a] .neg-item-menu {
  min-width: 196px; padding: 6px; background: #fff;
  border: 1px solid var(--ds-hair); border-radius: 16px;
  box-shadow: var(--ds-sombra-pop);
  font-family: var(--va-font);
}
html[data-visual-a] .neg-item-menu .neg-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ds-ink);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
html[data-visual-a] .neg-item-menu .neg-menu-item:hover,
html[data-visual-a] .neg-item-menu .neg-menu-item:focus-visible { background: var(--ds-hover); outline: 0; }
html[data-visual-a] .neg-item-menu .neg-menu-item svg { width: 17px; height: 17px; color: var(--bl-icone); stroke-width: 1.6; }
html[data-visual-a] .neg-item-menu .neg-menu-item.danger,
html[data-visual-a] .neg-item-menu .neg-menu-item.danger svg { color: var(--ds-perigo); }
html[data-visual-a] .neg-item-menu .neg-menu-sep { height: 1px; margin: 6px 4px; background: var(--ds-hair); }

/* ---------- a borda que arrasta a largura (computador; o mesmo gesto da borda do Painel de apoio) ---------- */
html[data-visual-a] .sidebar.bl .bl-borda { display: none; }
html[data-visual-a][data-bl-modo="lado"]:not(.bl-recolhida) .sidebar.bl .bl-borda {
  display: block; position: absolute; top: 0; bottom: 0; right: -5px; z-index: 5; width: 10px;
  cursor: col-resize; touch-action: none; outline: 0;
}
html[data-visual-a] .sidebar.bl .bl-borda::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px;
  background: transparent; transition: background-color 0.15s;
}
html[data-visual-a] .sidebar.bl .bl-borda:hover::after,
html[data-visual-a] .sidebar.bl .bl-borda:focus-visible::after,
html[data-visual-a] body.bl-arrastando .sidebar.bl .bl-borda::after { background: var(--ds-azul); opacity: 0.35; }
html[data-visual-a] body.bl-arrastando { cursor: col-resize; user-select: none; -webkit-user-select: none; }
/* arrastando para menos de 180 px: a barra avisa que vai virar trilho ao soltar */
html[data-visual-a] body.bl-vai-recolher .sidebar.bl { opacity: 0.55; }

/* ---------- o trilho de ícones (barra escondida no computador; padrão no tablet) ---------- */
@media (min-width: 769px) {
  /* acima do conteúdo: o menu da conta e as dicas do trilho passam por cima dele */
  html[data-visual-a] .sidebar.bl { z-index: 40; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl { width: var(--bl-trilho); padding: 8px 8px; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-topo { justify-content: center; padding: 0 0 8px; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .brand,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-cab,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-rolo,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-txt,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-tag,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-novo,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .neg-new span,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-quem,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-seta { display: none; }
  /* no trilho os ícones aparecem todos, mesmo de seção recolhida; Nova negociação vem primeiro */
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-meio { gap: 8px; overflow: visible; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-neg { order: -1; padding-bottom: 8px; border-bottom: 1px solid var(--ds-hair); }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-corpo { grid-template-rows: 1fr; opacity: 1; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-corpo-in { overflow: visible; gap: 4px; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-item,
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .neg-new { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-usuario { width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-pe { border-top: 0; }
  html[data-visual-a].bl-recolhida:not(.bl-sobre) .sidebar.bl .bl-pop { right: auto; width: 240px; left: 0; }
  /* no tablet, mostrar abre a barra POR CIMA do conteúdo: ela ocupa o trilho no fluxo, o resto flutua */
  html[data-visual-a][data-bl-modo="trilho"].bl-sobre .sidebar.bl {
    z-index: 450; margin-right: calc(var(--bl-trilho) - var(--bl-w));
    box-shadow: 0 0 0 1px var(--ds-hair), 12px 0 40px rgba(10, 22, 40, 0.14);
  }
}

/* ---------- celular: a barra é a gaveta (app.js) ---------- */
@media (max-width: 768px) {
  html[data-visual-a] .sidebar.bl { position: fixed; width: min(300px, 86vw); padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); border-right: 0; }
  html[data-visual-a] .sidebar.bl .bl-item,
  html[data-visual-a] .sidebar.bl .neg-new,
  html[data-visual-a] .sidebar.bl .neg-item { min-height: 44px; font-size: 15px; }
  html[data-visual-a] .sidebar.bl .bl-cab { min-height: 36px; font-size: 13px; }
  html[data-visual-a] .sidebar.bl .bl-ib { width: 44px; height: 44px; }
  html[data-visual-a] .sidebar.bl .bl-pop-item { min-height: 44px; }
  html[data-visual-a] .sidebar.bl .neg-item-more { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-visual-a] .sidebar.bl,
  html[data-visual-a] .sidebar.bl .bl-corpo,
  html[data-visual-a] .sidebar.bl .bl-cab-seta,
  html[data-visual-a] .sidebar.bl .bl-pop { transition: none !important; animation: none !important; }
}

/* ---------- a barra do topo do celular nas outras telas: branca, como a tela inicial ---------- */
@media (max-width: 768px) {
  html[data-visual-a] .mobile-header { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--ds-hair); }
  html[data-visual-a] .mobile-hamburger { color: var(--ds-ink); }
  html[data-visual-a] .mobile-hamburger:hover { background: var(--ds-hover); color: var(--ds-ink); }
  html[data-visual-a] .mobile-header-brand { color: var(--ds-ink); font-family: var(--va-font); letter-spacing: -0.01em; }
  html[data-visual-a] .mobile-header-brand strong { font-size: 15px; font-weight: 600; }
  html[data-visual-a] .va-ib.va-fechar-tela { color: var(--ds-ink) !important; }
}

/* ---------- renomear pelo título do chat (visual-a.js) ---------- */
html[data-visual-a~="chat"] .va-title-txt { cursor: text; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
html[data-visual-a~="chat"] .va-title-txt:hover { background: var(--ds-hover); }
html[data-visual-a~="chat"] .va-title-input {
  min-width: 120px; width: min(420px, 60vw); height: 34px; padding: 0 10px;
  border: 1px solid var(--ds-azul); border-radius: 10px; outline: 0;
  background: #fff; color: var(--ds-ink);
  font: inherit; font-family: var(--va-font); font-size: 16px; font-weight: 600;
}
@media (max-width: 768px) {
  html[data-visual-a~="chat"] .va-title-input { flex: 1; width: auto; margin: 0 4px; }
}

/* o feedback sai do botão flutuante em todas as telas com a flag: entra pelo menu da conta ("Reportar problema") */
html[data-visual-a] .fb-fab { display: none !important; }