/* Best Bro — Fluxo principal
   Implementação do protótipo "Fluxo principal.dc.html". */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bb-surface-sunken);
  font-family: Archivo, sans-serif;
  color: var(--bb-ink);
}

a { color: var(--bb-accent); text-decoration: underline; }
a:hover { color: var(--bb-ink); }
button { font-family: Archivo, sans-serif; cursor: pointer; border: none; }
textarea, input { font-family: Archivo, sans-serif; }
textarea::placeholder, input::placeholder { color: var(--bb-ink-45); opacity: 1; }
*:focus-visible { outline: 2px solid var(--bb-focus-ring); outline-offset: 2px; }

/* ---------- palco (fora do aparelho) ---------- */

.palco {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 36px;
}

.cenarios { flex: none; width: 210px; display: flex; flex-direction: column; gap: 3px; }
.cenarios__titulo {
  padding: 0 12px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--bb-ink-45);
}
.cenarios__lista { display: flex; flex-direction: column; gap: 3px; }
.cenario {
  height: 34px; padding: 0 12px;
  border-radius: 10px;
  background: var(--bb-ink-08); color: var(--bb-ink-80);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; text-align: left;
  transition: background var(--bb-dur-fade) var(--bb-ease), color var(--bb-dur-fade) var(--bb-ease);
}
.cenario:hover { background: rgba(11,11,11,.14); }
.cenario[aria-current="true"] { background: var(--bb-ink); color: #FFFFFF; }

/* ---------- aparelho ---------- */

.fone {
  position: relative; flex: none;
  width: 390px; height: 844px;
  overflow: hidden;
  border-radius: 60px;
  background: var(--bb-cream);
  box-shadow: 0 24px 60px rgba(11,11,11,.18);
}
.tela { position: absolute; inset: 0; }

.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; z-index: 50;
  color: var(--bb-ink);
}
.statusbar__hora { width: 76px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-align: center; }
.statusbar__ilha {
  position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
  width: 125px; height: 37px; border-radius: 999px; background: #000;
}
.statusbar__dir { display: flex; align-items: center; gap: 7px; }
.statusbar__bateria { position: relative; width: 27px; height: 13px; border-radius: 4px; border: 1px solid currentColor; opacity: .9; }
.statusbar__bateria i { position: absolute; inset: 1.5px; width: 17px; border-radius: 2px; background: currentColor; }
.statusbar__bateria u { position: absolute; right: -3px; top: 4px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; }

/* ---------- telas ---------- */

.tela-abs { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tela-entrada { background: var(--bb-cream); padding: 62px 16px 24px; }
.tela-conversa { background: var(--bb-cream); overflow: hidden; }
.tela-conferir { background: var(--bb-cream); }
.tela-segura   { background: var(--bb-cream); animation: entra 240ms var(--bb-ease); }
.tela-manda    { background: #CFE7D6;         animation: entra 240ms var(--bb-ease); }

/* barra superior */
.topo {
  height: 56px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
}
.tela-conversa .topo { position: relative; z-index: 1; padding: 8px 16px; }

.btn-voltar {
  width: 44px; height: 44px; border-radius: 9999px;
  background: var(--bb-surface-card);
  box-shadow: inset 0 0 0 1px var(--bb-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.btn-voltar:hover { background: var(--bb-surface-sunken); }
.btn-voltar span { display: block; width: 10.5px; height: 1.65px; border-radius: 2px; background: var(--bb-ink); }
.topo__vazio { width: 40px; }
.marca-mini {
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--bb-surface-card);
  box-shadow: inset 0 0 0 1px var(--bb-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.marca-mini span { display: block; width: 10.5px; height: 1.65px; border-radius: 2px; background: var(--bb-ink); }


/* entrada */
.entrada__corpo {
  flex: 1; min-height: 24px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.display {
  color: var(--bb-ink); text-wrap: balance;
}
.display em { font-style: normal; color: var(--bb-red); }
.subtexto { margin-top: 24px; font-size: 16px; line-height: 1.55; color: var(--bb-ink-60); }
.entrada__acao { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }

/* maré do veredito */
.mare, .mare-cheia { position: absolute; z-index: 0; pointer-events: none; }
.mare {
  left: 0; right: 0; bottom: 0; height: 150%;
  transition: transform 1700ms var(--bb-ease);
}
.mare-cheia {
  inset: 0;
  transition: opacity 900ms var(--bb-ease) 1000ms;
}

/* rolagem da conversa */
.rolagem {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0 16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rolagem::-webkit-scrollbar { width: 0; height: 0; }
.rolagem__coluna {
  flex: none; min-height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 20px; padding-top: 8px; padding-bottom: 16px;
  transition: padding-bottom 420ms var(--bb-ease);
}

/* bolhas */
.linha-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.linha-esq { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.autor { font-size: 12px; line-height: 1; }

.enviada {
  max-width: 284px; border-radius: 14px 14px 2px 14px;
  background: var(--bb-bubble-him); padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  animation: enviada 420ms var(--bb-ease) both;
}
.enviada__texto { padding: 0 0 4px; font-size: 14px; line-height: 1.25; color: var(--bb-ink-80); }

.bolha-ela {
  max-width: 84%; padding: 10px 16px; border-radius: 22px 22px 22px 2px;
  background: var(--bb-bubble-her);
  font-size: 14px; line-height: 1.35; letter-spacing: -.2px; color: var(--bb-ink);
}
.bolha-voce {
  max-width: 84%; padding: 10px 16px; border-radius: 22px 22px 2px 22px;
  background: var(--bb-bubble-him);
  font-size: 14px; line-height: 1.35; letter-spacing: -.2px; color: var(--bb-ink-80);
}

/* miniaturas de print */
.thumbs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.thumbs::-webkit-scrollbar { width: 0; height: 0; }
.thumb {
  position: relative; flex: 0 0 auto;
  width: 107px; height: 51px; border-radius: 12px;
  background: var(--bb-white);
  box-shadow: inset 0 0 0 1px var(--bb-border);
  overflow: hidden; padding: 0 6px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.thumb--composer { width: 104px; height: 52px; border-radius: 16px; }
.thumb i { display: block; height: 8px; border-radius: 4px; background: var(--bb-surface-sunken); }
.thumb i.dir { background: rgba(11,11,11,.16); align-self: flex-end; }
.thumb__remover {
  position: absolute; top: 2px; right: 4px;
  width: 20px; height: 20px; border-radius: 9999px;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 1px var(--bb-border);
  display: flex; align-items: center; justify-content: center;
}

/* indicador de leitura — as duas barras da marca */
.lendo { display: flex; align-items: center; gap: 8px; animation: chegada 420ms var(--bb-ease) both; }
.lendo__texto { font-size: 14px; line-height: 1; color: var(--bb-ink-60); }
.barras { flex: none; overflow: visible; }
.barras path:first-child { animation: bbBarra var(--bb-dur-loop) var(--bb-ease) infinite; }
.barras path:last-child  { animation: bbBarra2 var(--bb-dur-loop) var(--bb-ease) -1120ms infinite; }

/* bloco de análise */
.analise { flex: none; padding-top: 24px; }
.manchete {
  text-align: center;
  animation: chegada 560ms var(--bb-ease) 80ms both;
}
.cartao {
  position: relative;
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 14px;
  border-radius: 24px;
  padding: 26px 16px 16px;
  animation: chegada 560ms var(--bb-ease) 220ms both;
}
.cartao__par { margin-left: 20px; margin-right: 20px; }
.divisor { height: 1px; background: rgba(11,11,11,.09); margin: 2px; }
.tag {
  align-self: flex-start;
  display: flex; align-items: center; height: 25px; padding: 0 8px;
  border-radius: 28px;
  font-size: 14px; line-height: 1; letter-spacing: -1px;
}
.veredito__titulo {
  margin-top: 6px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px; line-height: 1.05; letter-spacing: -1px;
}
.veredito__texto { font-size: 16px; line-height: 1.35; }

/* turnos de pergunta e resposta */
.turno { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.turno__pergunta {
  max-width: 284px; border-radius: 14px 14px 2px 14px;
  background: var(--bb-bubble-him); padding: 10px 14px;
  font-size: 16px; line-height: 1.25; letter-spacing: -.4px; color: var(--bb-ink-80);
  animation: enviada 420ms var(--bb-ease) both;
}
.resposta {
  margin-top: 16px; display: flex; flex-direction: column; gap: 14px;
  animation: surge 620ms var(--bb-ease) both;
}
.pensando { margin-top: 18px; display: flex; align-items: center; gap: 8px; animation: chegada 420ms var(--bb-ease) both; }

/* rodapé: sugestões + composer */
.rodape {
  position: relative; z-index: 1; flex: none;
  padding: 16px 16px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.rodape__vidro {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0), #000 40px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0), #000 40px);
}
.pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
.pill {
  flex: 0 0 auto; height: 44px; padding: 0 16px; border-radius: 22px;
  background: var(--bb-white);
  box-shadow: inset 0 0 0 1px rgba(11,11,11,.06), 0 8px 14px -8px rgba(0,0,0,.22);
  font-size: 16px; font-weight: 400; line-height: 1; color: var(--bb-ink);
  white-space: nowrap;
  animation: pillIn 420ms var(--bb-ease) both;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.pill:hover { background: var(--bb-cream); }

/* composer */
.composer {
  display: flex; flex-direction: column; gap: 16px;
  padding: 10px; min-height: 64px; border-radius: 34px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 6px 28px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.03);
}
.composer__linha { display: flex; align-items: center; gap: 8px; min-height: var(--bb-tap-min); }
.composer__campo {
  width: 100%; height: var(--bb-tap-min); min-height: var(--bb-tap-min); max-height: 176px;
  overflow-y: auto; border: none; background: none;
  padding: 13px 8px; font-size: 16px; line-height: 1.35; color: var(--bb-ink);
  outline: none; resize: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.composer__campo::-webkit-scrollbar { width: 0; height: 0; }
.composer__campo--inline { flex: 1; min-width: 0; width: auto; }
/* Com texto, o campo ocupa uma linha só dele e Print/Enviar descem —
   feito por CSS para o cursor não se perder no meio da digitação. */
.composer--texto .composer__linha { flex-wrap: wrap; row-gap: 8px; }
.composer--texto .composer__campo--inline { flex: 1 1 100%; order: -1; }
.btn-print {
  flex: 0 0 auto; height: var(--bb-tap-min); padding: 0 15px 0 5px; border-radius: var(--bb-radius-pill);
  color: var(--bb-ink-80); font-size: 16px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; gap: 2px;
  background-color: var(--bb-disabled-bg);
  transition: background-color var(--bb-dur-fade) var(--bb-ease);
}
.btn-print:hover { background-color: var(--bb-ink-14); }
.btn-print span { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.btn-circular {
  flex: 0 0 auto; margin-left: auto;
  width: var(--bb-tap-min); height: var(--bb-tap-min); border-radius: 9999px;
  background: var(--bb-red);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.btn-circular:hover { background: var(--bb-red-press); }
.btn-circular i { display: block; width: 14px; height: 14px; border-radius: 2px; background: var(--bb-cream); }

/* teclado simulado */
.teclado-veu { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bb-cream); z-index: 40; }
.teclado-veu__fechar { flex: 1; background: none; cursor: default; }
.teclado-veu__composer { padding: 0 16px 12px; }
.teclado {
  background: var(--bb-surface-sunken);
  padding: 8px 4px 12px;
  display: flex; flex-direction: column; gap: 8px;
  user-select: none;
}
.teclado--flutuante { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; animation: sobe 260ms var(--bb-ease); }
.teclado__fila { display: flex; gap: 5px; padding: 0 3px; }
.teclado__fila--2 { padding: 0 20px; }
.teclado__fila--3, .teclado__fila--4 { align-items: center; }
.tecla {
  flex: 1; height: 42px; border-radius: 8px;
  background: var(--bb-white); color: var(--bb-ink);
  font-size: 17px; display: flex; align-items: center; justify-content: center;
}
.tecla--larga { flex: 1.4; background: var(--bb-ink-14); }
.tecla--espaco { flex: 5; }
.tecla--acao { flex: 1.4; background: var(--bb-ink); }
.tecla--modo { flex: 1.4; background: var(--bb-ink-14); color: var(--bb-ink-80); font-size: 14px; }

/* conferir */
.conferir__corpo { flex: 1; overflow-y: auto; padding: 8px 20px 24px; }
.conferir__voltar {
  width: 48px; height: 48px; margin-left: -14px;
  background: none; display: flex; align-items: center; justify-content: center;
}
.conferir__campo {
  margin-top: 24px; width: 100%;
  border-radius: 16px; border: 1px solid var(--bb-border);
  background: var(--bb-white); padding: 14px 16px;
  font-size: 16px; line-height: 1.55; color: var(--bb-ink);
  outline: none; resize: none;
}
.conferir__rodape { padding: 16px 20px 34px; display: flex; flex-direction: column; gap: 16px; }

/* resultado */
.selo {
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.titulo-resultado {
  margin-top: 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 36px; line-height: .92; letter-spacing: .005em;
}
.rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
}
.ia-mandar { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ia-mandar__bolha {
  max-width: 82%; padding: 10px 14px; border-radius: 14px 14px 2px 14px;
  font-size: 16px; line-height: 1.35;
}
.nota { margin-top: 24px; font-size: 12px; line-height: 1.45; color: var(--bb-ink-60); }
.caixa-branca { margin-top: 24px; padding: 16px; border-radius: 16px; background: var(--bb-white); }

/* botões */
.btn {
  border-radius: 999px;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.btn--primario { height: 52px; width: 100%; background: var(--bb-red); color: var(--bb-cream); }
.btn--primario:hover { background: var(--bb-red-press); }
.btn--escuro { height: 48px; background: var(--bb-ink); color: var(--bb-cream); font-size: 15px; }
.btn--escuro:hover { background: #262626; }
.btn--texto {
  height: 28px; background: none; color: var(--bb-ink);
  font-size: 14px; font-weight: 600; text-decoration: underline;
}
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px 20px 34px; }
.rodape-unico { padding: 16px 20px 34px; }

/* folha "por que eu acho isso" */
.veu { position: absolute; inset: 0; background: rgba(11,11,11,.4); display: flex; align-items: flex-end; z-index: 70; }
.folha {
  width: 100%; max-height: 78%; overflow-y: auto;
  background: var(--bb-cream);
  border-radius: 28px 28px 0 0;
  padding: 32px 20px 34px;
  animation: sobe 240ms var(--bb-ease);
}
.folha__titulo { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--bb-ink); }
.folha__bloco { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.folha__bolha {
  max-width: 82%; padding: 10px 14px; border-radius: 14px 14px 14px 2px;
  background: var(--bb-white); border: 1px solid var(--bb-border);
  font-size: 16px; line-height: 1.35; color: var(--bb-ink);
}
.folha__regra { margin-top: 24px; padding: 16px; border-radius: 16px; background: var(--bb-white); display: flex; gap: 12px; align-items: flex-start; }
.folha__icone { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 4px; background: #EFE0BC; display: flex; align-items: center; justify-content: center; }

/* ---------- animações ---------- */

@keyframes enviada  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pillIn   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes chegada  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surge    { from { opacity: 0; } to { opacity: 1; } }
@keyframes entra    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sobe     { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes bbBarra  { 0% { transform: translateY(-3px); }   50% { transform: translateY(3px); }   100% { transform: translateY(-3px); } }
@keyframes bbBarra2 { 0% { transform: translateY(-3.3px); } 50% { transform: translateY(3.3px); } 100% { transform: translateY(-3.3px); } }

/* Acessibilidade: com movimento reduzido, a oscilação vira pulsação de opacidade
   e as entradas deixam de transladar (readme.md > VISUAL FOUNDATIONS > Animação). */
@media (prefers-reduced-motion: reduce) {
  .barras path:first-child,
  .barras path:last-child { animation: bbPulso 2400ms steps(60) infinite; }
  @keyframes bbPulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  .enviada, .manchete, .cartao, .pill, .resposta, .pensando, .lendo,
  .tela-segura, .tela-manda, .folha, .teclado--flutuante { animation: none; }
  .mare, .mare-cheia, .rolagem__coluna { transition: none; }
}

/* ---------- telas estreitas ---------- */

@media (max-width: 760px) {
  .palco { padding: 0; gap: 0; flex-direction: column; }
  .cenarios {
    width: 100%; order: 2;
    flex-direction: row; flex-wrap: wrap; gap: 6px;
    padding: 16px; background: var(--bb-surface-sunken);
  }
  .cenarios__titulo { width: 100%; padding: 0 0 4px; }
  .cenarios__lista { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .fone {
    order: 1;
    width: 100%; height: 100dvh; max-width: 430px;
    border-radius: 0; box-shadow: none;
  }
}

/* ==================================================================== *
 * Conta, menu, configurações e planos
 * ==================================================================== */

/* ---------- palco ---------- */

.palco { background: #E9E7E4; }

.conta-toggle {
  margin-bottom: 16px; height: 44px; padding: 0 12px 0 14px;
  border-radius: 12px; background: rgba(11, 11, 11, .06);
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.conta-toggle__rotulo { flex: 1; font-size: 13px; font-weight: 500; color: var(--bb-ink-80); }

.trilho {
  flex: none; border-radius: 999px; padding: 2px;
  display: flex;
  background: var(--bb-ink-14);
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.trilho i { border-radius: 999px; background: var(--bb-white); display: block; }
.trilho--p { width: 40px; height: 24px; }
.trilho--p i { width: 20px; height: 20px; }
.trilho--g { width: 52px; height: 32px; }
.trilho--g i { width: 28px; height: 28px; }
.trilho[data-ligado="true"] { background: var(--bb-ink); justify-content: flex-end; }
.trilho[data-ligado="false"] { justify-content: flex-start; }

/* ---------- camada do app (desloca quando o menu abre) ---------- */

.app-camada {
  position: absolute; inset: 0; z-index: 1;
  background: var(--bb-cream);
  border-radius: 60px; overflow: hidden;
  transition: transform 460ms var(--bb-ease), box-shadow 460ms var(--bb-ease), border-radius 460ms var(--bb-ease);
}
.app-camada[data-menu="true"] {
  transform: translateX(312px);
  border-radius: 32px;
  box-shadow: -18px 0 40px rgba(0, 0, 0, .07), 0 24px 60px rgba(0, 0, 0, .08);
}
.veu-app {
  position: absolute; inset: 0; z-index: 80; pointer-events: none;
  background: rgba(244, 241, 236, .60);
  backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
  opacity: 0;
  transition: opacity 460ms var(--bb-ease);
}
.veu-app[data-menu="true"] { opacity: 1; }
.fechar-menu { position: absolute; inset: 0; z-index: 90; background: none; cursor: pointer; }

/* ---------- gaveta lateral ---------- */

.gaveta {
  position: absolute; inset: 0; z-index: 0;
  background: #DCD5C8;
  display: flex; flex-direction: column;
  padding: 62px 0 24px;
}
.gaveta__topo {
  flex: none; height: 56px; padding: 8px 16px;
  display: flex; align-items: center; margin-right: 82px;
}
.gaveta__marca { display: flex; align-items: center; gap: 8px; }
/* A assinatura da gaveta usa metade da inclinação: é lida de canto de olho. */
.gaveta__nome {
  display: flex; flex-direction: column;
  transform: skewX(-10.25deg);
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; line-height: .98; letter-spacing: .01em; color: var(--bb-ink);
}
.gaveta__lista {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 36px 16px 0; margin-right: 82px;
  display: flex; flex-direction: column; gap: 8px;
}
.gaveta__secao { font-size: 16px; font-weight: 600; color: var(--bb-ink-45); }
.gaveta__chats { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px; }
.gaveta__chat {
  height: var(--bb-tap-min); padding: 0 12px; border-radius: 12px;
  background: transparent; color: var(--bb-ink);
  font-size: 17px; font-weight: 500; text-align: left;
  display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.gaveta__chat:hover { background: rgba(11, 11, 11, .05); }
.gaveta__chat[aria-current="true"] { background: var(--bb-ink-08); }
.gaveta__vazio { padding: 0 12px; font-size: 16px; line-height: 1.4; color: var(--bb-ink-45); }
.gaveta__rodape {
  flex: none; padding: 16px 16px 0; margin-right: 82px;
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
}
.btn-chat {
  height: var(--bb-control-height); padding: 0 22px; margin-bottom: 6px; align-self: flex-start;
  border-radius: 999px; background: var(--bb-color-action); color: var(--bb-color-action-fg);
  font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-chat:hover { background: var(--bb-color-action-press); }
.btn-perfil {
  width: var(--bb-control-height); height: var(--bb-control-height); margin-bottom: 6px; flex: none;
  border-radius: 999px; background: none;
  box-shadow: inset 0 0 0 1.5px rgba(11, 11, 11, .22);
  color: var(--bb-ink-60);
  display: flex; align-items: center; justify-content: center;
}
.btn-perfil--iniciais { color: var(--bb-ink); font-size: 17px; font-weight: 600; }

/* ---------- topo: entrar, menu, mais ---------- */

.btn-hamburguer {
  width: 52px; height: 52px; border-radius: 9999px; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.btn-hamburguer span { display: block; width: 24px; height: 1.83px; border-radius: 2px; background: var(--bb-ink); }
.btn-entrar {
  height: var(--bb-tap-min); padding: 0 20px; border-radius: 999px;
  background: var(--bb-ink); color: var(--bb-cream);
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center;
}
.btn-entrar:hover { background: #262626; }
.btn-mais {
  width: 44px; height: 44px; border-radius: 9999px; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.btn-mais span { display: block; width: 4px; height: 4px; border-radius: 999px; background: var(--bb-ink); }

.popover {
  position: absolute; top: 110px; right: 14px; width: 252px;
  transform-origin: top right;
  border-radius: var(--bb-radius-md);
  overflow: hidden;
  animation: entra 160ms var(--bb-ease);
}
.popover__item {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: none; display: flex; align-items: center; gap: 12px;
  text-align: left; font-size: 15px; color: var(--bb-ink);
}
.popover__item:hover { background: var(--bb-cream); }
.popover__nota { padding: 12px 14px; font-size: 13px; line-height: 1.4; color: var(--bb-ink-60); }
.divisor-linha { height: 1px; background: var(--bb-surface-sunken); }

/* ---------- telas de entrada de conta ---------- */

.tela-login {
  position: absolute; inset: 0; background: var(--bb-cream);
  display: flex; flex-direction: column;
  animation: entra 240ms var(--bb-ease);
}
.login__topo { flex: none; height: 56px; display: flex; align-items: center; padding: 0 12px; }
.login__voltar {
  width: 48px; height: 48px; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--bb-ink);
}
.login__corpo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 20px 24px;
  display: flex; flex-direction: column;
}
.login__titulo {
  color: var(--bb-ink); text-wrap: balance;
}
.login__apoio { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--bb-ink-60); }
.login__marca {
  margin: auto 0; display: flex; align-items: center; justify-content: center; gap: 22px;
}
.login__marca-nome {
  display: flex; flex-direction: column;
  transform: skewX(-10.25deg);
  font-family: 'Archivo Black', sans-serif;
  font-size: 44px; line-height: .98; letter-spacing: .01em; color: var(--bb-ink);
}
.campo {
  width: 100%; height: var(--bb-control-height);
  border: none; box-shadow: inset 0 0 0 1px var(--bb-border);
  border-radius: 14px; background: var(--bb-white);
  padding: 0 16px; font-size: 16px; color: var(--bb-ink); outline: none;
}
.erro { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--bb-red); font-weight: 600; }
.btn-alto {
  height: var(--bb-control-height); border-radius: 999px;
  background: var(--bb-ink); color: var(--bb-cream);
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: opacity var(--bb-dur-fade) var(--bb-ease), background var(--bb-dur-fade) var(--bb-ease);
}
.btn-alto:disabled { cursor: default; }
.btn-social {
  height: var(--bb-control-height); border-radius: 999px;
  background: var(--bb-white); box-shadow: inset 0 0 0 1px var(--bb-border);
  color: var(--bb-ink); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-social:hover { background: var(--bb-cream); }
.btn-social__aro {
  width: 20px; height: 20px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(11, 11, 11, .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.sociais { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.sociais--android { flex-direction: column-reverse; }
.legal { margin-top: 24px; font-size: 13px; line-height: 1.45; color: var(--bb-ink-60); text-align: center; }
.legal a { color: var(--bb-ink); }
.ou { margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.ou i { flex: 1; height: 1px; background: var(--bb-border); }
.ou span { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--bb-ink-45); }

/* código de 6 números: caixas visíveis, campo real invisível por cima */
.codigo { position: relative; margin-top: 28px; }
.codigo__caixas { display: flex; gap: 8px; }
.codigo__caixa {
  flex: 1; height: var(--bb-control-height); border-radius: 12px; background: var(--bb-white);
  box-shadow: inset 0 0 0 1px var(--bb-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; color: var(--bb-ink);
}
.codigo__caixa[data-ativa="true"] { box-shadow: inset 0 0 0 1.5px var(--bb-ink); }
.codigo__caixa[data-erro="true"] { box-shadow: inset 0 0 0 1.5px var(--bb-red); }
.codigo__campo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; background: none; color: transparent; caret-color: transparent;
  font-size: 16px; outline: none;
}
.link-sub {
  height: 44px; align-self: flex-start; background: none;
  color: var(--bb-ink); font-size: 14px; font-weight: 600; text-decoration: underline;
}
.link-sub--fraco { color: var(--bb-ink-60); }

/* ---------- diálogo de conferida ---------- */

.dialogo {
  position: absolute; inset: 0; z-index: 70;
  background: var(--bb-scrim-dark);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dialogo__caixa {
  position: relative; width: 100%;
  background: var(--bb-cream); border-radius: 24px; padding: 24px;
  display: flex; flex-direction: column;
  animation: entra 200ms var(--bb-ease);
}
.dialogo__marca { display: flex; align-items: center; gap: 8px; }
.dialogo__plano { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--bb-ink-60); }
.dialogo__titulo {
  margin-top: 14px; color: var(--bb-ink);
}
.dialogo__texto { margin-top: 14px; font-size: 16px; line-height: 1.45; color: var(--bb-ink); }
.dialogo__acoes { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.btn-fantasma {
  height: 48px; border-radius: 999px; background: none;
  color: var(--bb-ink-60); font-size: 15px; font-weight: 600;
}

/* ---------- folhas (configurações e plano) ---------- */

.folha-veu {
  position: absolute; inset: 0;
  background: var(--bb-scrim-dark);
  display: flex; align-items: flex-end;
}
.folha-painel {
  position: relative; width: 100%; height: 88%;
  background: var(--bb-cream); border-radius: 28px 28px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: sobe 300ms var(--bb-ease);
}
.alca { flex: none; padding: 10px 0 2px; display: flex; justify-content: center; }
.alca i { width: 44px; height: 4px; border-radius: 999px; background: rgba(11, 11, 11, .18); }
.btn-fechar {
  width: var(--bb-tap-min); height: var(--bb-tap-min); border-radius: 999px;
  background: rgba(11, 11, 11, .06); color: var(--bb-ink);
  display: flex; align-items: center; justify-content: center;
}
.folha-corpo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 16px 32px;
  display: flex; flex-direction: column; gap: 24px;
}

/* ---------- listas de configuração ---------- */

.grupo { flex: none; display: flex; flex-direction: column; gap: 8px; }
.lista { background: var(--bb-white); border-radius: 16px; overflow: hidden; }
.linha {
  width: 100%; min-height: 56px; padding: 16px;
  background: none; display: flex; align-items: center; gap: 12px; text-align: left;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
button.linha:hover { background: var(--bb-cream); }
.linha__texto { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linha__titulo { font-size: 16px; color: var(--bb-ink); }
.linha__titulo--perigo { font-weight: 600; color: var(--bb-red); }
.linha__apoio { font-size: 13px; line-height: 1.4; color: var(--bb-ink-60); }
.linha__valor { font-size: 16px; color: var(--bb-ink-60); }
.linha__seta { flex: none; color: var(--bb-ink-45); }
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  background: var(--bb-ink); color: var(--bb-cream);
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.aviso-copiado { padding: 0 16px 12px; font-size: 13px; line-height: 1.4; color: var(--bb-ink-60); }
.btn-sair {
  flex: none; height: var(--bb-control-height); border-radius: 999px; background: none;
  box-shadow: inset 0 0 0 1.5px var(--bb-ink);
  color: var(--bb-ink); font-size: 16px; font-weight: 600;
}
.btn-sair:hover { background: rgba(11, 11, 11, .04); }
.plano-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 22px; }
.plano-manchete {
  color: var(--bb-ink); text-align: center;
}
.plano-apoio {
  margin: 10px auto 0; max-width: 300px;
  font-size: 14px; line-height: 1.45; color: rgba(11, 11, 11, .7); text-align: center;
}
.ciclo {
  margin: 18px auto 0; width: 236px;
  display: flex; gap: 4px; padding: 3px;
  border-radius: 999px; background: rgba(11, 11, 11, .05);
}
.ciclo__pilula {
  position: relative; flex: 1; height: var(--bb-tap-min); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500;
  background: transparent; color: rgba(11, 11, 11, .65);
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.ciclo__pilula[aria-pressed="true"] {
  font-weight: 600; background: var(--bb-white); color: var(--bb-ink);
  box-shadow: 0 1px 2px rgba(11, 11, 11, .1);
}
.selo-desconto {
  margin-left: 5px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: #FFECEA; color: #A62A20;
  font-size: 10px; font-weight: 600; line-height: 16px; letter-spacing: .02em;
}

.planos { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.plano-card {
  width: 100%; display: flex; flex-direction: column; gap: 12px;
  text-align: left; padding: 16px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px var(--bb-border);
  transition: box-shadow var(--bb-dur-fade) var(--bb-ease), background var(--bb-dur-fade) var(--bb-ease);
}
.plano-card[aria-checked="true"] {
  background: var(--bb-white);
  box-shadow: inset 0 0 0 2px var(--bb-ink), 0 10px 26px -18px rgba(11, 11, 11, .7);
}
.radio {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(11, 11, 11, .3);
  transition: box-shadow var(--bb-dur-fade) var(--bb-ease);
}
.radio--marcado { box-shadow: inset 0 0 0 7px var(--bb-red); }
.radio--p { width: 20px; height: 20px; }
.plano-card__cabeca { display: flex; align-items: flex-start; gap: 12px; }
.plano-card__meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.plano-card__linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plano-card__nome-area { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.plano-card__nome { color: var(--bb-ink); }
.selo-rec {
  height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--bb-red); color: var(--bb-cream);
  font-size: 11px; font-weight: 600; line-height: 20px; letter-spacing: .04em;
}
.plano-card__preco-area { flex: none; display: flex; align-items: baseline; gap: 1px; }
.plano-card__preco { color: var(--bb-ink); }
.plano-card__sufixo { font-size: 13px; font-weight: 500; color: rgba(11, 11, 11, .65); }
.plano-card__apoio { margin-top: -2px; font-size: 13px; line-height: 1.3; color: var(--bb-ink-60); }
.plano-card__itens {
  margin-top: 2px; display: flex; flex-direction: column; gap: 7px;
  color: rgba(11, 11, 11, .62);
}
.plano-card[aria-checked="true"] .plano-card__itens { color: var(--bb-ink-80); }
.plano-item { display: flex; gap: 8px; align-items: flex-start; }
.plano-item svg { flex: none; margin-top: 2px; }
.plano-item span { font-size: 14px; line-height: 1.32; color: inherit; }
.plano-card__cta { margin-top: 2px; display: flex; flex-direction: column; gap: 8px; }
.btn-assinar {
  width: 100%; height: 50px; border-radius: 999px;
  background: var(--bb-red); color: var(--bb-cream);
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.btn-assinar:hover { background: var(--bb-red-press); }
.legal-mini { font-size: 11.5px; line-height: 1.35; color: rgba(11, 11, 11, .7); text-align: center; }

.plano-gratis {
  margin-top: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 18px; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px var(--bb-border);
  transition: box-shadow var(--bb-dur-fade) var(--bb-ease), background var(--bb-dur-fade) var(--bb-ease);
}
.plano-gratis[aria-checked="true"] { background: var(--bb-white); box-shadow: inset 0 0 0 2px var(--bb-ink); }
.plano-gratis__cabeca { display: flex; align-items: center; gap: 10px; }
.plano-gratis__nome { font-size: 15px; font-weight: 600; color: var(--bb-ink); }
.selo-atual {
  height: 19px; padding: 0 7px; border-radius: 999px;
  background: rgba(11, 11, 11, .1); color: rgba(11, 11, 11, .75);
  font-size: 10.5px; font-weight: 600; line-height: 19px; letter-spacing: .04em;
}
.plano-gratis__apoio { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: rgba(11, 11, 11, .65); }
.btn-continuar-gratis {
  width: 100%; height: 48px; border-radius: 999px;
  background: var(--bb-ink); color: var(--bb-cream);
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- avisos no composer e cota ---------- */

.cota {
  flex: 0 0 auto; height: 32px; margin-left: 4px; padding: 0 10px 0 8px;
  border-radius: 999px; background: rgba(11, 11, 11, .06);
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--bb-ink-80);
}
.travado-cartao {
  padding: 14px 16px; border-radius: 20px; background: var(--bb-white);
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .06);
  display: flex; flex-direction: column; gap: 12px;
}
.travado-cartao__texto { font-size: 15px; line-height: 1.4; color: var(--bb-ink); }
.contagem { flex: none; font-size: 13px; color: var(--bb-ink-45); }
.conferir__nota { margin-top: 10px; display: flex; align-items: flex-start; gap: 10px; }
.conferir__nota p { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--bb-ink-60); }
.aviso-rascunho { margin-top: 10px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--bb-red); }

/* A entrada agora é centralizada: saudação no meio, composer embaixo. */
.entrada__corpo--centro { justify-content: center; text-align: center; }
.entrada__corpo--centro .display { margin-top: auto; }
.entrada__acao--baixo { margin-top: auto; padding-top: 32px; text-align: left; }

/* ==================================================================== *
 * Créditos, simulação e confirmações
 * ==================================================================== */

/* A bolha do que foi enviado era vidro sobre a maré de cor. A maré saiu, e
   vidro sem nada passando por baixo é só cinza com custo: as bolhas voltam a
   ser sólidas, como o sistema sempre disse. Decisão de 30 set 2026 (D8). */

/* Espaço reservado no topo da análise — ainda sem conteúdo no design. */
.sinaleira { flex: none; }

/* O selo de crédito é tocável: abre o diálogo. */
button.cota { transition: background var(--bb-dur-fade) var(--bb-ease); }
button.cota:hover { background: var(--bb-ink-14); }
/* Desenha 32 para não competir com o Print ao lado, mas o alvo é o do
   sistema: a área cresce na vertical até 48, a altura da linha do composer. */
button.cota { position: relative; }
button.cota::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc((32px - var(--bb-tap-min)) / 2); bottom: calc((32px - var(--bb-tap-min)) / 2);
}

/* ---------- diálogo: agora folha de baixo ---------- */

.dialogo {
  position: absolute; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  background: var(--bb-scrim-dark);
}
.dialogo__caixa {
  position: relative; width: 100%;
  background: var(--bb-cream);
  /* O raio de baixo acompanha o do aparelho menos o recuo. */
  border-radius: 24px 24px 44px 44px;
  padding: 16px;
  display: flex; flex-direction: column;
  animation: entra 200ms var(--bb-ease);
}
.dialogo__topo { display: flex; justify-content: flex-end; }
.dialogo__bloco { display: flex; flex-direction: column; gap: 8px; }
.dialogo__titulo {
  margin: 0; color: var(--bb-ink); text-wrap: pretty;
}
.dialogo__texto { margin: 0; font-size: 16px; line-height: 1.45; color: var(--bb-ink-80); text-wrap: pretty; }
.dialogo__acoes { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; }

.btn-turbinar {
  height: 52px; border-radius: 999px;
  background: var(--bb-accent); color: var(--bb-cream);
  font-size: 16px; font-weight: 600;
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.btn-turbinar:hover { background: var(--bb-accent-press); }
.btn-entendi {
  height: 52px; border-radius: 999px;
  background: var(--bb-ink); color: var(--bb-cream);
  font-size: 16px; font-weight: 600;
}
.btn-fantasma:hover { background: rgba(11, 11, 11, .06); }

/* preview da simulação dentro do diálogo */
.dlg-sim { margin: 20px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.dlg-sim__minha {
  align-self: flex-end; max-width: 78%;
  padding: 8px 12px; border-radius: 14px 14px 2px 14px;
  background: rgba(11, 11, 11, .11);
  font-size: 12px; line-height: 1.3; color: var(--bb-ink-80);
}
.dlg-sim__bro {
  align-self: flex-start; max-width: 86%;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 14px 14px 14px 2px;
  background: var(--bb-white);
  box-shadow: inset 0 0 0 1px var(--bb-border);
}
.dlg-sim__cabeca { display: flex; align-items: center; gap: 5px; }
.dlg-sim__ponto { display: block; width: 8px; height: 8px; border-radius: 99px; background: #A1C893; }
.dlg-sim__veredito { font-family: 'Archivo Black', sans-serif; font-size: 12px; line-height: 1; color: var(--bb-ink); }
.dlg-sim__texto { font-size: 12px; line-height: 1.35; color: var(--bb-ink-80); }

/* quantas simulações cada plano dá */
.dlg-creditos { margin-top: 18px; display: flex; gap: 8px; }
.dlg-credito {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 10px; border-radius: 16px;
  background: var(--bb-surface-card);
  box-shadow: inset 0 0 0 1px var(--bb-border);
}
.dlg-credito--destaque { background: var(--bb-accent); box-shadow: inset 0 0 0 1px var(--bb-accent); }
.dlg-credito__n { color: var(--bb-ink); }
.dlg-credito__r { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--bb-ink-80); }
.dlg-credito--destaque .dlg-credito__n,
.dlg-credito--destaque .dlg-credito__r { color: var(--bb-cream); }
.dlg-creditos__nota { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: var(--bb-ink-60); }

/* ---------- confirmação de ação destrutiva ---------- */

.confirmar {
  position: absolute; inset: 0;
  background: var(--bb-scrim-dark);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
}
.confirmar__caixa {
  position: relative; width: 100%;
  background: var(--bb-cream);
  border-radius: 24px 24px 44px 44px;
  padding: 20px;
  display: flex; flex-direction: column;
  animation: entra 200ms var(--bb-ease);
}
.confirmar__titulo {
  color: var(--bb-ink); text-wrap: pretty;
}
.confirmar__texto {
  margin: 12px 0 0;
  font-size: 16px; line-height: 1.45; color: var(--bb-ink-80); text-wrap: pretty;
}
.confirmar .dialogo__acoes { margin-top: 20px; }

/* A folha de configurações passa a deixar o topo do aparelho à mostra. */
.folha-painel--config { height: calc(100% - 62px); }

/* ==================================================================== *
 * v3 — preto age, vermelho identifica. Barras sobrepostas, vidro,
 * veredito sem paleta. Esta camada vence a anterior.
 * ==================================================================== */

.palco { background: var(--bb-surface-sunken); }
.fone { background: var(--bb-surface-base); }
.cobre { position: absolute; inset: 0; background: none; }

/* ---------- botões ---------- */

.btn-icone {
  width: var(--bb-tap-min); height: var(--bb-tap-min); padding: 0;
  border-radius: var(--bb-radius-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--bb-text-primary); background: none;
}
.btn-acao {
  height: var(--bb-control-height); border-radius: var(--bb-radius-pill);
  background: var(--bb-color-action); color: var(--bb-color-action-fg);
  font-family: var(--bb-font-sans); font-size: var(--bb-size-body);
  font-weight: var(--bb-weight-semibold);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--bb-duration-instant) var(--bb-ease-standard);
}
.btn-acao:hover { background: var(--bb-color-action-press); }
.btn-critico {
  height: var(--bb-control-height); border-radius: var(--bb-radius-pill);
  background: var(--bb-color-critical); color: var(--bb-color-critical-fg);
  font-size: var(--bb-size-body); font-weight: var(--bb-weight-semibold);
}
.btn-critico:hover { background: var(--bb-color-critical-press); }
.btn-ghost {
  height: var(--bb-control-height); padding: 0 22px;
  border-radius: var(--bb-radius-pill); background: none;
  color: var(--bb-text-primary);
  font-family: var(--bb-font-sans); font-size: var(--bb-size-body);
  font-weight: var(--bb-weight-semibold);
}
.btn-ghost:hover { background: var(--bb-ink-08); }
.btn-ghost--apagado { color: var(--bb-text-secondary); cursor: default; }
.btn-ghost--apagado:hover { background: none; }
.btn-entrar { background: var(--bb-color-action); color: var(--bb-color-action-fg); }
.btn-entrar:hover { background: var(--bb-color-action-press); }
.btn-circular { background: var(--bb-color-action); color: var(--bb-color-action-fg); }
.btn-circular:hover { background: var(--bb-color-action-press); }
.btn-circular i { background: var(--bb-color-action-fg); }
.btn-print, button.cota { background-color: #E3DED6; color: var(--bb-text-primary); }
.btn-print:hover, button.cota:hover { background-color: #D6D1C9; }

/* ---------- composer: vidro ---------- */

.composer {
  background: var(--bb-glass-thin-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-thin);
  backdrop-filter: var(--bb-glass-filter-thin);
  box-shadow: var(--bb-glass-ring-light), var(--bb-shadow-md);
  border: 1px solid var(--bb-glass-border-light);
}

/* ---------- entrada ---------- */

.entrada__corpo {
  flex: 1; min-height: var(--bb-space-5); overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: 0 22px; margin: 0 -22px -26px;
  transition: padding-bottom var(--bb-duration-layer) var(--bb-ease-emphasis);
}
.display { color: var(--bb-text-primary); text-wrap: balance; }
.display em { font-style: normal; color: var(--bb-color-brand); }
.subtexto { margin-top: var(--bb-space-5); font-size: var(--bb-size-body); line-height: var(--bb-leading-body); color: var(--bb-text-secondary); }
.entrada__acao { margin-top: auto; padding-top: var(--bb-space-6); text-align: left; }
.teclado-veu--transparente { top: 118px; background: none; pointer-events: none; }
.teclado-veu--transparente > * { pointer-events: auto; }

/* ---------- conversa: barras sobrepostas ---------- */

.tela-conversa { background: var(--bb-surface-base); }

/* O fundo esmaece com desfoque progressivo; o conteúdo rola por baixo. */
.veu-topo, .veu-baixo {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: blur(var(--bb-scrim-blur));
  backdrop-filter: blur(var(--bb-scrim-blur));
}
.veu-topo {
  top: 0; height: 140px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bb-surface-base) 92%, transparent) 0%,
    color-mix(in srgb, var(--bb-surface-base) 70%, transparent) 55%,
    transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
}
.veu-baixo {
  bottom: 0; top: -24px; z-index: -1;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--bb-surface-base) 92%, transparent) 0%,
    color-mix(in srgb, var(--bb-surface-base) 70%, transparent) 55%,
    transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 100%);
}

/* 118px = área segura (62) + barra (56) */
.barra-sobreposta {
  position: absolute; top: 62px; left: 0; right: 0; z-index: 2;
  height: var(--bb-row-height); pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--bb-space-2) var(--bb-space-4);
}
.barra-sobreposta > * { pointer-events: auto; }

.tela-conversa .rolagem { padding: 118px var(--bb-space-4) 0; }
.rolagem__coluna { min-height: 0; }

.barra-baixo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; pointer-events: none;
}
.barra-baixo > * { pointer-events: auto; }
.barra-baixo .rodape {
  position: relative; background: none;
  padding: var(--bb-space-4) var(--bb-space-4) var(--bb-space-5);
  gap: var(--bb-space-2);
}
.barra-baixo .rodape__vidro { display: none; }
.rodape__composer { pointer-events: auto; }

/* A sombra da pill desce ~24px; a margem negativa devolve o espaço cortado. */
.pills { margin: -12px -16px -28px; padding: 12px 16px 28px; overflow-y: visible; }
.pill {
  background: none; box-shadow: none;
  height: var(--bb-tap-min); padding: 0 var(--bb-space-4);
  border-radius: var(--bb-radius-pill);
  font-size: var(--bb-size-body); font-weight: var(--bb-weight-medium);
  color: var(--bb-text-primary);
}

/* ---------- análise: sem paleta ---------- */

.analise { display: flex; flex-direction: column; gap: 18px; padding-top: var(--bb-space-5); }
.analise__texto { display: flex; flex-direction: column; gap: var(--bb-space-3); animation: chegada 560ms var(--bb-ease) 80ms both; }
.manchete {
  margin: 0; text-align: left;
  color: var(--bb-text-primary); text-wrap: pretty;
}
.resumo { margin: 0; font-size: var(--bb-size-body); line-height: 1.5; color: var(--bb-ink-80); text-wrap: pretty; }

.cartao-conversa {
  display: flex; flex-direction: column; gap: var(--bb-space-3);
  padding: 14px; border-radius: 20px;
  background: rgba(11, 11, 11, .045);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 0 0 1px var(--bb-ink-14);
  animation: chegada 560ms var(--bb-ease) 220ms both;
}
.cartao-conversa__rotulo { font-size: var(--bb-size-body); font-weight: var(--bb-weight-semibold); color: var(--bb-ink-80); }
.cartao-conversa__falas { display: flex; flex-direction: column; gap: 10px; }
.divisor { height: 1px; background: rgba(11, 11, 11, .09); margin: 0; }

.bolha-ela {
  padding: 9px 14px; border-radius: 18px 18px 18px 2px;
  background: var(--bb-surface-raised);
  box-shadow: inset 0 0 0 1px var(--bb-ink-14);
  color: var(--bb-text-primary);
}
.bolha-voce {
  padding: 9px 14px; border-radius: 18px 18px 2px 18px;
  background: var(--bb-bubble-him);
  color: var(--bb-ink-80);
}
.autor { font-size: 12px; font-weight: var(--bb-weight-semibold); color: var(--bb-ink-60); }

.resposta__titulo {
  margin-top: 6px;
  color: var(--bb-text-primary);
}
.resposta__texto { font-size: var(--bb-size-body); line-height: 1.35; color: var(--bb-text-primary); }
.lendo__texto { color: var(--bb-ink-60); }

/* ---------- campos ---------- */

.campo-com-botao { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.campo-bloco { position: relative; display: flex; flex-direction: column; gap: var(--bb-space-2); }
.campo {
  width: 100%; height: var(--bb-control-height); border: none;
  box-shadow: inset 0 0 0 1px var(--bb-ink-14);
  border-radius: var(--bb-radius-pill); background: var(--bb-surface-raised);
  padding: 0 20px;
  font-family: var(--bb-font-sans); font-size: var(--bb-size-body);
  color: var(--bb-text-primary); outline: none;
}
.campo--erro { box-shadow: inset 0 0 0 var(--bb-border-width-outline) var(--bb-color-critical); }
.campo--olho { padding-right: 58px; }
.erro-campo, .erro {
  padding: 0 20px; margin: 0;
  font-family: var(--bb-font-sans); font-size: var(--bb-size-label);
  font-weight: var(--bb-weight-semibold); line-height: 1.4;
  color: var(--bb-color-critical);
}
.btn-olho {
  position: absolute; top: 4px; right: 4px;
  width: var(--bb-tap-min); height: var(--bb-tap-min); padding: 0;
  border-radius: var(--bb-radius-pill); background: none;
  color: var(--bb-text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.btn-alto {
  height: var(--bb-control-height); border-radius: var(--bb-radius-pill);
  background: var(--bb-color-action); color: var(--bb-color-action-fg);
  font-family: var(--bb-font-sans); font-size: var(--bb-size-body);
  font-weight: var(--bb-weight-semibold);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--bb-duration-instant) var(--bb-ease-standard);
}
.btn-alto:hover { background: var(--bb-color-action-press); }
.btn-alto--apagado, .btn-alto:disabled {
  background: var(--bb-disabled-bg); color: var(--bb-disabled-fg); cursor: default;
}
.btn-alto--apagado:hover, .btn-alto:disabled:hover { background: var(--bb-disabled-bg); }

.sociais-lista { margin-top: var(--bb-space-5); display: flex; flex-direction: column; gap: 10px; }
.btn-social { background: var(--bb-surface-raised); box-shadow: inset 0 0 0 1px var(--bb-ink-14); }
.trocar-contato { margin-left: -22px; align-self: flex-start; }
.reenvio { margin-top: var(--bb-space-4); display: flex; justify-content: center; }
.tabular { white-space: nowrap; font-variant-numeric: tabular-nums; }
.codigo__caixa { background: var(--bb-surface-raised); box-shadow: inset 0 0 0 1px var(--bb-ink-14); }
.codigo__caixa[data-ativa="true"] { box-shadow: inset 0 0 0 var(--bb-border-width-outline) var(--bb-ink); }
.codigo__caixa[data-erro="true"] { box-shadow: inset 0 0 0 var(--bb-border-width-outline) var(--bb-color-critical); }

/* ---------- código promocional ---------- */

.tela-promo {
  position: absolute; inset: 0; z-index: 94;
  background: var(--bb-surface-base);
  display: flex; flex-direction: column;
  animation: entra var(--bb-duration-medium) var(--bb-ease-emphasis);
}
.promo__titulo {
  margin: 0;
  color: var(--bb-text-primary); text-wrap: balance;
}
.btn-promo { margin: var(--bb-space-5) auto 0; display: block; }

/* ---------- toast ---------- */

.toast-area {
  position: absolute; top: calc(62px + var(--bb-space-2));
  left: var(--bb-space-4); right: var(--bb-space-4);
  display: flex; justify-content: center; pointer-events: none;
}
.toast {
  max-width: 100%;
  padding: var(--bb-space-3) var(--bb-space-4);
  border-radius: var(--bb-radius-md);
  background: var(--bb-surface-dark); color: var(--bb-text-on-dark);
  font-size: var(--bb-size-body-s); line-height: 1.35; text-align: center;
  box-shadow: var(--bb-shadow-md);
  animation: bbRise var(--bb-duration-fast) var(--bb-ease-emphasis) both;
}

/* ---------- plano ---------- */

.plano-renova {
  margin-top: var(--bb-space-3);
  display: flex; align-items: flex-start; gap: var(--bb-space-2);
  padding: 10px 12px; border-radius: 14px;
  background: rgba(11, 11, 11, .05);
  font-size: 13px; line-height: 1.35; color: var(--bb-ink-80);
}
.plano-renova svg { flex: none; margin-top: 2px; color: var(--bb-ink-60); }
/* Verde de vantagem: fora do sistema, declarado aqui. */
.selo-vantagem {
  margin-left: 5px; height: 16px; padding: 0 5px; border-radius: var(--bb-radius-pill);
  background: #E4F2DD; color: #2E6B2A;
  font-size: 10px; font-weight: var(--bb-weight-semibold); line-height: 16px; letter-spacing: .02em;
}
.plano-gratis { background: var(--bb-surface-raised); padding: var(--bb-space-4); border-radius: 20px; }
.plano-gratis__cabeca { align-items: flex-start; gap: var(--bb-space-3); }
.plano-gratis__nome-area { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.plano-card[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--bb-ink), 0 10px 26px -18px rgba(11, 11, 11, .7); }
.radio--marcado { box-shadow: inset 0 0 0 7px var(--bb-color-action); }
.selo-rec { background: var(--bb-color-brand); color: var(--bb-ink); }
.btn-assinar { background: var(--bb-color-action); color: var(--bb-color-action-fg); }
.btn-assinar:hover { background: var(--bb-color-action-press); }
.folha-painel--plano, .folha-painel--config { height: calc(100% - 62px); }

/* ---------- popover ---------- */

.popover-area { position: absolute; inset: 0; z-index: 70; }

/* ---------- confirmação: o destrutivo usa o vermelho de situação ---------- */

.confirmar__caixa, .dialogo__caixa { background: var(--bb-surface-base); }
.dlg-credito--destaque { background: var(--bb-color-action); box-shadow: inset 0 0 0 1px var(--bb-color-action); }
.dlg-credito--destaque .dlg-credito__n,
.dlg-credito--destaque .dlg-credito__r { color: var(--bb-color-action-fg); }

/* Nota do grupo SEUS DADOS, só no modo "Controle de dados". */
.nota-dados {
  margin: 0; padding: 0 var(--bb-space-1);
  font-family: var(--bb-font-sans); font-size: var(--bb-size-caption);
  line-height: 1.4; color: var(--bb-text-secondary);
}
.folha-corpo { gap: var(--bb-space-4); }

/* A folha é de vidro grosso; os grupos de dentro continuam sólidos.
   Camada que flutua é vidro, e agora todas: Plano e a loja eram sólidos, e o
   menu era branco no lugar do Dropdown do sistema. Decisão de 30 set 2026 (D3). */
.folha-painel--config, .folha-painel--plano, .loja, .popover {
  background: var(--bb-glass-thick-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-thick);
  backdrop-filter: var(--bb-glass-filter-thick);
  box-shadow: var(--bb-glass-ring-light), var(--bb-shadow-lg);
}
.folha-painel--config, .folha-painel--plano {
  border-radius: var(--bb-radius-sheet) var(--bb-radius-sheet) 0 0;
}
/* O menu flutua sobre a tela, não sobe dela: contorno do material e a sombra
   média, como os botões de vidro. */
.popover {
  border: 1px solid var(--bb-glass-border-light);
  box-shadow: var(--bb-glass-ring-light), var(--bb-shadow-md);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .folha-painel--config, .folha-painel--plano, .loja, .popover { background: var(--bb-surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .folha-painel--config, .folha-painel--plano, .loja, .popover {
    background: var(--bb-surface-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---------- margens: o respiro vem daqui, não do navegador ----------
   Títulos e parágrafos vinham com a margem padrão do agente de usuário.
   Como as telas são colunas flex, margem vizinha não colapsa: ela soma.
   O respiro entre título e descrição saía em 43px onde o design pede 16.
   Zeramos o herdado e declaramos o espaçamento uma vez só. */

.display, .login__titulo, .promo__titulo, .plano-manchete, .manchete,
.titulo-resultado, .nav-sheet__titulo, .confirmar__titulo, .dialogo__titulo {
  margin: 0;
}
.subtexto { margin: var(--bb-space-5) 0 0; }
.login__apoio { margin: var(--bb-space-4) 0 0; }
.legal { margin: var(--bb-space-5) 0 0; }
.resumo, .dialogo__texto, .nota-dados, .legal-mini { margin: 0; }
.confirmar__texto { margin: var(--bb-space-3) 0 0; }
.nota { margin: var(--bb-space-5) 0 0; }
.plano-apoio { margin: 10px auto 0; }
.loop-desc { margin: 0; }

/* O voltar da subpágina de Configurações é 48 no design, não 44 como os
   outros botões de ícone. */

/* ---------- navegação em vidro ----------
   Todo controle de navegação — voltar e fechar — é vidro fino, inclusive
   dentro das folhas. Decisão de 23 set 2026.

   A regra precisa de duas classes porque `.btn-icone` e `.btn-fechar`
   declaravam o próprio fundo e venciam o utilitário do sistema: o desfoque e o
   anel pegavam, o fundo translúcido não. O vidro estava pela metade. */

.btn-icone.bb-glass-thin,
.btn-fechar.bb-glass-thin {
  background: var(--bb-glass-thin-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-thin);
  backdrop-filter: var(--bb-glass-filter-thin);
  border: 1px solid var(--bb-glass-border-light);
  box-shadow: var(--bb-glass-ring-light), var(--bb-shadow-md);
  color: var(--bb-text-primary);
}
.btn-icone.bb-glass-thin:hover,
.btn-fechar.bb-glass-thin:hover {
  background: var(--bb-glass-regular-light);
}

/* Mesmo fallback do sistema: sem desfoque, a superfície vira sólida. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-icone.bb-glass-thin,
  .btn-fechar.bb-glass-thin { background: var(--bb-surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn-icone.bb-glass-thin,
  .btn-fechar.bb-glass-thin {
    background: var(--bb-surface-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Sair da conta em vidro: o contorno de tinta sai e quem desenha a borda é o
   próprio material. Decisão de 23 set 2026. O material vem do utilitário — aqui
   fica só o estado de passagem, que sobe um nível. */
.btn-sair.bb-glass-thin:hover { background: var(--bb-glass-regular-light); }

/* Vão entre campo e botão: 16, o token de espaço. O design trazia 10 com a nota
   de que viraria token depois. Decisão de 23 set 2026.
   A tela do código não tinha vão nenhum — o botão ficava fora do bloco. */
.campo-com-botao { gap: var(--bb-space-4); }
.campo-com-botao .codigo { margin-top: 0; }

/* O botão de remover print fica concêntrico ao canto da miniatura: recuo =
   raio do canto (16) menos raio do botão (10). Assim a folga é a mesma em toda
   a curva. Antes eram 2 no topo e 4 na direita, o que deixava só 1,5px de folga
   no ponto mais apertado da curva — daí parecer torto e colado.
   É a regra concêntrica do próprio sistema de formas. Decisão de 23 set 2026. */
.thumb__remover { top: 6px; right: 6px; }

/* A miniatura encaixa no canto do composer pela mesma regra dos botões:
   raio do composer menos o respiro interno (10). Decisão de 23 set 2026.
   Com o alvo em 48 (30 set 2026), Print e enviar viraram pílulas de 24: o
   composer foi para 24 + 10 = 34, e a miniatura para 34 − 10 = 24.
   O botão de remover acompanha: 24 − 10 = 14 de recuo. */
.thumb--composer { border-radius: 24px; }
.thumb--composer .thumb__remover { top: 14px; right: 14px; }
/* O remover desenha 20, mas o alvo é o do sistema: 48, ancorado no canto da
   miniatura, que é onde o dedo mira. Sem mudar o desenho. */
.thumb--composer .thumb__remover::before {
  content: ""; position: absolute; top: -14px; right: -14px;
  width: var(--bb-tap-min); height: var(--bb-tap-min);
}

/* A fila de sugestões rola na horizontal, e o navegador reservava 15px de
   barra de rolagem dentro da caixa — era isso que afastava as pílulas do
   composer, não o espaçamento. O design esconde a barra em todo rolador
   horizontal; essa fila tinha ficado de fora. */
.pills {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pills::-webkit-scrollbar { width: 0; height: 0; }

/* ================================================================
   Barra de navegação das sheets — componente
   ================================================================

   Versão final, 23 set 2026. As tentativas anteriores erraram porque eu fiquei
   inventando um material novo — véu próprio, blur progressivo em camadas,
   estados de rolagem — quando o efeito já existe no produto: é o .veu-topo da
   conversa, o mesmo que faz o fundo do composer em .veu-baixo.

   Aqui a barra usa a MESMA receita, sem variação:

     · um desfoque só, blur(--bb-scrim-blur) = 8px
     · cor de 92% no topo, 70% na metade, 0 embaixo
     · máscara cheia até a metade, caindo a 0 no fim

   E as mesmas proporções da conversa, onde a barra acaba em 118, o véu tem 140
   e o conteúdo repousa em 126: o véu passa da barra, e o conteúdo nasce com
   ~20% de véu sobrando, o que é imperceptível. Aqui a barra acaba em 64, o véu
   tem 80 e o corpo começa em 72 — os mesmos 20%.

   Geometria única para as duas sheets, e o recuo do corpo é calculado a partir
   de --nav-fim, então véu e conteúdo não têm como se desencontrar. */

.folha-painel {
  position: relative;
  --nav-topo: var(--bb-space-2);
  --nav-altura: var(--bb-row-height);
  --nav-lado: 48px;
  --nav-cauda: var(--bb-space-4);
  --nav-fim: calc(var(--nav-topo) + var(--nav-altura));
  --nav-material: calc(var(--nav-fim) + var(--nav-cauda));
  --nav-cor: var(--bb-surface-base);
}

.nav-sheet {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: var(--nav-material);
  pointer-events: none;
}

/* Mesma receita do .veu-topo da conversa. */
.nav-sheet__material {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nav-cor) 92%, transparent) 0%,
    color-mix(in srgb, var(--nav-cor) 70%, transparent) 55%,
    transparent 100%);
  -webkit-backdrop-filter: blur(var(--bb-scrim-blur));
  backdrop-filter: blur(var(--bb-scrim-blur));
  /* Máscara de opacidade linear: 100% no topo, 0% embaixo, sem trecho cheio.
     É ela que faz cor e desfoque caírem juntos ao longo de toda a barra, em
     vez de virarem faixa. Pedido seu, 23 set 2026. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* Grade de três colunas com os lados iguais: o título fica centralizado com a
   página mesmo quando só existe um botão, sem sair do fluxo. */
.nav-sheet__linha {
  position: absolute; top: var(--nav-topo); left: 0; right: 0;
  height: var(--nav-altura);
  display: grid;
  grid-template-columns: var(--nav-lado) 1fr var(--nav-lado);
  align-items: center;
  padding: 0 var(--bb-space-4);
}
.nav-sheet__lado { display: flex; align-items: center; pointer-events: auto; }
.nav-sheet__lado--fim { justify-content: flex-end; }
.nav-sheet__titulo {
  margin: 0;
  font-size: var(--bb-size-body);
  font-weight: var(--bb-weight-semibold);
  color: var(--bb-text-primary);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O corpo nasce onde o VÉU acaba, não onde a barra acaba. Com o recuo preso ao
   fim da barra, os 16px de cauda do véu caíam sobre a primeira linha e o título
   da página aparecia embaçado sem ninguém ter rolado nada. */
.folha-corpo, .plano-corpo { padding-top: var(--nav-material); }

/* Quedas: as mesmas do resto do material de vidro. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-sheet__material {
    background: linear-gradient(180deg, var(--bb-glass-regular-light) 0%, transparent 100%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-sheet__material {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(180deg, var(--bb-surface-solid) 0%, transparent 100%);
  }
}

/* O card Grátis é irmão dos pagos e estava montado como bloco: sem flex, o
   gap de 12 não valia e sobrava só o margin-top:2px de .plano-card__itens —
   que existe justamente porque nos pagos o gap já dá os 12. Daí 2px entre o
   título e os itens, contra 14 nos outros.
   No design ele compensava com margin-top:12px próprio; aqui a correção é
   dar a ele o mesmo layout dos pagos, e não um número à parte.
   Decisão de 23 set 2026. */
.plano-gratis {
  display: flex; flex-direction: column;
  gap: var(--bb-space-3);
}

/* Os itens do card ficam na mesma grade do cabeçalho: o check mora numa casa
   da largura do rádio e centralizado nela, então os dois dividem o mesmo eixo.
   Antes o check tinha 15 de largura contra 22 do rádio, ambos encostados na
   margem — o centro do check caía 3,5px à esquerda do centro do rádio. E como
   o vão também era diferente (8 contra 12), o texto do item começava 11px
   antes do nome do plano.
   As duas medidas passam a sair das mesmas variáveis, então não têm como
   divergir de novo. Decisão de 23 set 2026. */
.plano-card, .plano-gratis {
  --plano-marca: 22px;
  --plano-vao: var(--bb-space-3);
}
.radio { width: var(--plano-marca, 22px); height: var(--plano-marca, 22px); }
.plano-card__cabeca, .plano-gratis__cabeca { gap: var(--plano-vao); }
.plano-item { gap: var(--plano-vao); }
.plano-item__marca {
  flex: none; width: var(--plano-marca, 22px); margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.plano-item svg { margin-top: 0; }

/* ---------- caixa alta sai do produto ----------
   Regra do designer, 23 set 2026: nunca texto em caixa alta. A única exceção é
   o logotipo BEST BRO, que é marca, não texto corrido. Siglas como SMS
   continuam, porque sigla não é estilo.

   O espaçamento entre letras ia junto: ele existia para abrir a caixa alta, que
   é mais apertada de leitura. Em caixa de frase ele só desalinha a palavra. */
.selo-rec, .selo-atual, .dlg-credito__r { letter-spacing: 0; }

/* O selo de recomendado usa o verde de vantagem, o mesmo par do -42%, e não
   mais o vermelho da marca. Pelo princípio do sistema — preto age, vermelho
   identifica — o vermelho num selo de recomendação dizia "atenção" onde a
   intenção era "vantagem". O par vive numa variável só para os dois selos não
   se afastarem. */
/* Sem prefixo bb-: não é token do sistema, é um par cravado com nome local,
   para os dois selos não se afastarem. Está na lista de pendências. */
.plano-card, .plano-gratis, .ciclo {
  --vantagem-fundo: #E4F2DD;
  --vantagem-tinta: #2E6B2A;
}
.selo-rec, .selo-vantagem {
  background: var(--vantagem-fundo, #E4F2DD);
  color: var(--vantagem-tinta, #2E6B2A);
}

/* ---------- o raio da camada do app segue a tela onde ela mora ----------
   O raio estava escrito como número fixo: 60 parado, 32 com a gaveta aberta.
   Os 60 casavam com os 60 da moldura do aparelho, e por isso no desktop não
   aparecia nada. Só que abaixo de 760px a moldura vira tela cheia e perde o
   raio — e aí os 60 da camada passam a recortar os quatro cantos, deixando a
   gaveta (mais escura) aparecer por baixo. Era esse o acabamento estranho.

   O raio da tela passa a ser uma variável do aparelho, e a camada parada usa
   ela: onde a tela é arredondada, a camada acompanha; onde é reta, ela é reta.
   Com a gaveta aberta a camada vira cartão solto, e aí os 32 do design valem
   em qualquer tamanho. Decisão de 23 set 2026. */

.fone { --tela-raio: 60px; }
.app-camada { border-radius: var(--tela-raio); }
.app-camada[data-menu="true"] { border-radius: var(--bb-radius-2xl); }

@media (max-width: 760px) {
  .fone { --tela-raio: 0px; }
}

/* ================================================================
   Utilitários de vidro, redeclarados por último
   ================================================================

   Armadilha de precedência, e não era só um botão. Os utilitários moram no
   tokens.css e os componentes aqui; os dois pesam igual — uma classe — e quem
   vem depois ganha. Como este arquivo carrega depois, toda regra de componente
   que declarasse `background` apagava o material do utilitário e deixava só o
   desfoque, que sobre fundo chapado não aparece. O botão continuava com a
   classe de vidro e sem vidro nenhum.

   Pegou três: o botão de perfil da gaveta (nas duas variantes) e as pílulas de
   sugestão, onde eu tinha até escrito `background: none` de propósito
   esperando que o utilitário preenchesse. Um quarto, o "Sair da conta", eu
   tinha remendado à mão sem perceber que era padrão.

   Redeclarar aqui resolve os quatro e os próximos, porque a partir daqui o
   material sempre ganha de quem só carrega a classe. As quedas vêm junto,
   senão elas ficariam para trás na ordem. Decisão de 23 set 2026. */

.bb-glass-thin, .bb-glass-regular, .bb-glass-thick {
  border: 1px solid var(--bb-glass-border-light);
  box-shadow: var(--bb-glass-ring-light), var(--bb-shadow-md);
  color: var(--bb-text-primary);
}
.bb-glass-thin {
  background: var(--bb-glass-thin-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-thin); backdrop-filter: var(--bb-glass-filter-thin);
}
.bb-glass-regular {
  background: var(--bb-glass-regular-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-regular); backdrop-filter: var(--bb-glass-filter-regular);
}
.bb-glass-thick {
  background: var(--bb-glass-thick-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-thick); backdrop-filter: var(--bb-glass-filter-thick);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bb-glass-thin, .bb-glass-regular, .bb-glass-thick { background: var(--bb-surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .bb-glass-thin, .bb-glass-regular, .bb-glass-thick {
    background: var(--bb-surface-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ---------- semântica de destrutivo ----------
   Pedido de 23 set 2026: "Sair da conta" com texto em vermelho, semântica de
   destructive. Isso fecha a pergunta que ficou aberta no item 10 — o botão era
   visualmente idêntico a um controle de navegação sem ser um. Agora o material
   continua sendo vidro e quem separa é a tinta, que é a regra do sistema:
   preto age, vermelho identifica.

   Precisa dos dois nomes de classe porque o utilitário de vidro declara
   `color` e, desde que ele passou a ser redeclarado por último, ganharia.

   Junto vai um defeito que apareceu ao conferir isto: `--bb-color-critical` é o
   token de destrutivo, mas "Apagar minha conta" pedia `--bb-red`, que **não
   existe em lugar nenhum**. Variável inválida não cai para a declaração
   anterior, cai para o valor inicial — então o único item destrutivo do produto
   vinha renderizando em preto puro (rgb(0,0,0)), nem sequer na tinta do
   sistema. */

.btn-sair.bb-glass-thin { color: var(--bb-color-critical); }
.linha__titulo--perigo { color: var(--bb-color-critical); }

/* ---------- painel de coerência do PLAN_CONFIG (só no protótipo) ----------
   Ferramenta de quem está construindo, não peça do produto: por isso fica na
   barra de cenários e não usa material de vidro nem tinta de marca. */
.regras {
  width: 100%; margin-top: var(--bb-space-5);
  display: flex; flex-direction: column; gap: var(--bb-space-2);
}
.regras__titulo {
  margin: 0; padding: 0 0 var(--bb-space-1);
  font-size: var(--bb-size-caption); font-weight: var(--bb-weight-semibold);
  letter-spacing: .04em; color: var(--bb-text-secondary);
}
.regras__lista { display: flex; flex-direction: column; gap: var(--bb-space-1); }
.regras__aviso, .regras__ok {
  margin: 0; padding: var(--bb-space-2) var(--bb-space-3);
  border-radius: var(--bb-radius-sm, 8px);
  font-size: var(--bb-size-caption); line-height: 1.35;
}
.regras__aviso {
  background: color-mix(in srgb, var(--bb-color-critical) 10%, transparent);
  color: var(--bb-color-critical);
}
.regras__ok { background: var(--bb-surface-raised); color: var(--bb-text-secondary); }

/* ---------- etapa 2: o que as lojas exigem na página ----------

   1 · O X tem de caber no alvo mínimo de toque. Estava em 40.
   O brief pedia 48 e o sistema declarava 44. Resolvido em 30 set 2026: o
   --bb-tap-min passou a 48, e todo X do produto é o mesmo .btn-fechar.

   2 · A linha legal fica no nível da página, não dentro do cartão selecionado.
   O brief diz "logo abaixo da linha de renovação", mas a renovação mora dentro
   do cartão e muda de lugar conforme o plano escolhido — e "Já assinei" é o
   restaurar compra, que as lojas exigem sempre alcançável, inclusive com o
   Grátis selecionado, onde não existe linha de renovação nenhuma. */


.plano-legal {
  margin-top: var(--bb-space-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: var(--bb-space-2);
}
.plano-legal .lnk {
  min-height: 48px; padding: 0 var(--bb-space-1);
  background: none;
  font-size: var(--bb-size-caption); line-height: 1.35;
  color: var(--bb-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.plano-legal .lnk:hover { color: var(--bb-text-primary); }
.plano-legal__ponto { color: var(--bb-text-secondary); font-size: var(--bb-size-caption); }

/* ---------- folha da loja simulada ----------
   Neutra de propósito: a Apple e a Google não deixam imitar as folhas delas, e
   um protótipo que imita ensina a equipe a esperar a coisa errada. Usa o mesmo
   material das folhas do app e diz em letras que é simulação. */
.loja {
  position: relative; margin-top: auto; width: 100%;
  padding: var(--bb-space-5) var(--bb-space-4) var(--bb-space-6);
  border-radius: var(--bb-radius-sheet) var(--bb-radius-sheet) 0 0;
  display: flex; flex-direction: column; gap: var(--bb-space-4);
  animation: sobe 300ms var(--bb-ease);
}
.loja__rotulo {
  margin: 0; font-size: var(--bb-size-caption); color: var(--bb-text-secondary);
}
.loja__linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bb-space-3);
}
.loja__plano { color: var(--bb-text-primary); }
.loja__preco { color: var(--bb-text-primary); }
.loja__sufixo {
  font-family: var(--bb-font-sans);
  font-size: 13px; font-weight: var(--bb-weight-medium); color: var(--bb-text-secondary);
}
.loja__acoes { display: flex; flex-direction: column; gap: var(--bb-space-2); }
/* Enquanto a loja responde, a folha não aceita outro toque. */
.loja[aria-busy="true"] { pointer-events: none; }
.loja[aria-busy="true"] .btn-acao { opacity: .6; }

/* ---------- controles de teste (só no protótipo) ---------- */
.controles {
  width: 100%; margin-top: var(--bb-space-5);
  display: flex; flex-direction: column; gap: var(--bb-space-3);
}
.controle { display: flex; flex-direction: column; gap: var(--bb-space-1); }
.controle__rotulo {
  font-size: var(--bb-size-caption); font-weight: var(--bb-weight-semibold);
  letter-spacing: .04em; color: var(--bb-text-secondary);
}
.controle__campo {
  width: 100%; height: var(--bb-tap-min); padding: 0 var(--bb-space-2);
  border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm, 8px);
  background: var(--bb-surface-raised);
  font-family: var(--bb-font-sans); font-size: var(--bb-size-body-s);
  color: var(--bb-text-primary);
}

/* ---------- cartão de quem já assina ---------- */
.loja__titulo {
  margin: 0;
  color: var(--bb-text-primary);
}
.loja__texto {
  margin: 0; font-size: var(--bb-size-body-s); line-height: 1.45;
  color: var(--bb-text-secondary);
}
.plano-card__nota {
  font-size: var(--bb-size-body-s); line-height: 1.4; color: var(--bb-text-secondary);
}
.plano-card__link {
  align-self: flex-start; min-height: var(--bb-tap-min);
  background: none; padding: 0;
  font-size: var(--bb-size-body-s); color: var(--bb-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.plano-card__link:hover { color: var(--bb-text-primary); }
/* Botão secundário: descer de plano não compete com subir. */
.btn-secundario {
  width: 100%; height: 50px; border-radius: var(--bb-radius-pill);
  background: var(--bb-surface-raised); color: var(--bb-text-primary);
  font-size: var(--bb-size-body); font-weight: var(--bb-weight-semibold);
  display: flex; align-items: center; justify-content: center;
}
.btn-secundario:hover { background: var(--bb-cream); }

/* ---------- avisos de cobrança ----------
   O erro nunca vai só na cor: o texto já diz o que houve, e a cor reforça.
   Exigência de acessibilidade e do brief. */
.linha__valor--erro { color: var(--bb-color-critical); font-weight: var(--bb-weight-semibold); }

.faixa-pagamento {
  position: absolute; top: 118px; left: var(--bb-space-4); right: var(--bb-space-4); z-index: 3;
  display: flex; align-items: flex-start; gap: var(--bb-space-2);
  padding: var(--bb-space-3);
  border-radius: var(--bb-radius-lg);
  background: color-mix(in srgb, var(--bb-color-critical) 8%, var(--bb-surface-solid));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-color-critical) 22%, transparent);
  font-size: var(--bb-size-body-s); line-height: 1.4; color: var(--bb-text-primary);
}
.faixa-pagamento svg { flex: none; margin-top: 2px; color: var(--bb-color-critical); }

.faixa__acao {
  display: block; min-height: var(--bb-tap-min); background: none; padding: 0;
  font-size: var(--bb-size-body-s); font-weight: var(--bb-weight-semibold);
  color: var(--bb-color-critical);
  text-decoration: underline; text-underline-offset: 3px;
}

.confirmar__aviso {
  margin-top: var(--bb-space-3); padding: var(--bb-space-3);
  border-radius: var(--bb-radius-lg);
  background: color-mix(in srgb, var(--bb-color-critical) 8%, var(--bb-surface-solid));
  font-size: var(--bb-size-body-s); line-height: 1.4; color: var(--bb-text-primary);
}
.nota-sair { margin-top: calc(var(--bb-space-2) * -1); text-align: center; }

/* ================================================================
   Revisão visual da assinatura — 24 set 2026
   ================================================================ */

/* ---------- espaçamento na escala do sistema ----------
   O corpo usava 18, 16, 12, 16, 24; os cartões 10 entre si e 14 por dentro.
   10, 14 e 18 não existem na escala (4/8/12/16/24/32).
   E o Grátis ficava a 12 do grupo pago enquanto os pagos ficavam a 10 — dois
   pixels para marcar que ali muda de categoria. Agora são 24. */
.plano-apoio { margin-top: var(--bb-space-3); }
.ciclo { margin-top: var(--bb-space-4); }
.planos { margin-top: var(--bb-space-4); gap: var(--bb-space-3); }
.plano-card, .plano-gratis { gap: var(--bb-space-4); }
.plano-card__itens { margin-top: 0; gap: var(--bb-space-2); }
.plano-card__cta { margin-top: 0; gap: var(--bb-space-2); }
.plano-gratis { margin-top: var(--bb-space-5); }
.plano-legal { margin-top: var(--bb-space-5); }
.btn-promo { margin-top: var(--bb-space-5); }

/* ---------- o Grátis é o que você já tem, não uma quarta compra ----------
   Estava em branco 100%, o mesmo peso do cartão escolhido e mais peso que o
   cartão pago não escolhido, que é branco 50%. O que não está à venda ganhava
   do que está. Agora ele é só contorno, sem preenchimento. */
.plano-gratis {
  background: none;
  box-shadow: inset 0 0 0 1px var(--bb-border);
}
.plano-gratis[aria-checked="true"] {
  background: var(--bb-surface-solid);
  box-shadow: inset 0 0 0 2px var(--bb-ink);
}

/* ---------- modo gestão: a data no lugar do preço ----------
   Para quem já assina, o preço em 26px continuava sendo o maior elemento do
   cartão, quando a informação que importa virou a data de renovação. */
.plano-card__status { display: flex; flex-direction: column; gap: 2px; }
.plano-card__status-forte {
  font-size: var(--bb-size-body); font-weight: var(--bb-weight-semibold);
  line-height: 1.3; color: var(--bb-text-primary);
}
.plano-card__status-fraco {
  font-size: var(--bb-size-body-s); line-height: 1.35; color: var(--bb-text-secondary);
}

/* Noutra plataforma o cartão não é controle: não recebe toque nem cursor. */
.plano-card--inerte { cursor: default; }

/* ---------- linha legal: a ação separada dos documentos ---------- */
.plano-legal { flex-direction: column; gap: var(--bb-space-1); }
.plano-legal__acao { font-weight: var(--bb-weight-semibold); color: var(--bb-text-primary); }
.plano-legal__docs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: var(--bb-space-2);
}

/* ---------- a faixa de pagamento entra no fluxo ----------
   Estava colada na barra, com vão zero, e absoluta: sobrepunha o conteúdo em
   vez de empurrar. Numa tela mais cheia, colidiria. */
/* A tela de entrada já tem 16 de respiro lateral: aqui só o vão vertical. */
.faixa-pagamento { position: static; flex: none; margin-top: var(--bb-space-4); }

/* ---------- saída de quem esqueceu a senha ----------
   Fica sob o campo, alinhada ao centro como o reenvio do código: é o mesmo
   papel — a saída secundária de uma tela de autenticação. */
.esqueci { margin-top: var(--bb-space-4); display: flex; justify-content: center; }
/* O btn-ghost é tinta cheia e semibold — ao lado de um "Continuar" ainda
   desabilitado, o link virava o elemento mais forte da tela. Ele é a saída
   secundária: fica no peso e na tinta de apoio. */
.esqueci .btn-ghost {
  font-weight: var(--bb-weight-regular, 400);
  color: var(--bb-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.esqueci .btn-ghost:hover { color: var(--bb-text-primary); }

/* ---------- teclado numérico ----------
   O campo do código só aceita dígito; teclado de letra ali é ruído. Herda
   tudo do teclado de letras e só troca a grade para três colunas. */
.teclado--numero .teclado__fila { padding: 0 40px; }
.teclado--numero .tecla { font-size: 22px; font-weight: var(--bb-weight-regular); }
.teclado--numero .tecla--vazia { background: none; box-shadow: none; }

/* ---------- o nome da conversa vira controle de verdade ----------
   Ele era transparente, com tinta a 60%, flutuando sobre o véu da conversa —
   então o contraste dele não era um número, era o que estivesse rolando atrás.
   Os dois irmãos na mesma barra já eram vidro; ele era o único sem superfície.

   Ganha junto o alvo mínimo de toque: estava em 36, contra os 44 do menu e do
   "mais" ao lado. Era um dos três alvos pequenos que a verificação apontou. */

/* ---------- menu da conversa ----------
   O botão do meio deixou de mostrar o nome e virou o menu da conversa. O nome
   continua visível na gaveta, que é onde se escolhe entre conversas.
   Decisão de 30 set 2026. */
.barra-sobreposta__vao { flex: 1; }
.popover__item--perigo { color: var(--bb-color-critical); }
.popover__item--perigo svg { color: currentColor; }

/* ---------- diálogo em vidro ----------
   Diálogo é camada que flutua, e no sistema camada que flutua é vidro. Os dois
   que já existiam eram sólidos por acidente de implementação, não por decisão:
   agora os quatro usam o mesmo material. */
.dialogo__caixa, .confirmar__caixa {
  background: var(--bb-glass-thick-light);
  -webkit-backdrop-filter: var(--bb-glass-filter-thick);
  backdrop-filter: var(--bb-glass-filter-thick);
  border: 1px solid var(--bb-glass-border-light);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dialogo__caixa, .confirmar__caixa { background: var(--bb-surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .dialogo__caixa, .confirmar__caixa {
    background: var(--bb-surface-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Diálogo com campo: o teclado entra como irmão da caixa, então o véu vira
   coluna — caixa em cima, teclado colado embaixo. Em linha, os dois brigavam
   pela largura. */
.dialogo--com-teclado {
  flex-direction: column; justify-content: flex-end;
  /* Em coluna, align-items manda na largura: sem stretch o teclado encolhia
     para o tamanho do conteúdo. */
  align-items: stretch;
  padding: var(--bb-space-4) var(--bb-space-4) 0;
}
.dialogo--com-teclado .teclado { margin: var(--bb-space-4) calc(var(--bb-space-4) * -1) 0; }
/* O ritmo vertical vinha de um gap de 12 somado a margens herdadas — o vão
   antes dos botões saía em 60, cinco vezes o dos outros. Aqui o gap é zero e
   cada distância é declarada uma vez:

     título → apoio      4   são um par, a frase explica o título
     apoio  → campo     24   a quebra que separa o dizer do fazer
     campo  → botões    16

   Ajuste de 30 set 2026. */
.dialogo__caixa--campo {
  gap: 0;
  padding: var(--bb-space-5);
  border-radius: var(--bb-radius-lg);
}
.dialogo__caixa--campo .dialogo__texto {
  margin: var(--bb-space-1) 0 0;
  font-size: var(--bb-size-body-s); line-height: 1.4; color: var(--bb-text-secondary);
}
.dialogo__caixa--campo .campo { margin-top: var(--bb-space-5); }
.dialogo__caixa--campo .dialogo__acoes { margin-top: var(--bb-space-4); }
.dialogo__caixa--campo .campo { width: 100%; }
/* Cancelar e OK lado a lado, como o pedido. */
.dialogo__acoes--lado { flex-direction: row; gap: var(--bb-space-2); }
/* Lado a lado, os dois botões dividem a largura e a altura: o do grande. */
.dialogo__acoes--lado > * { flex: 1; height: var(--bb-control-height); }

/* ---------- a gaveta em proporção, não em pixel ----------
   O deslocamento da camada era 312px fixos e a reserva da gaveta, 82px fixos.
   Nos 390 do desenho isso dava exatamente 1/5 de tela — mas o aparelho varia:
   em 375 a faixa visível caía para 16,8%, e em 430 subia para 27,4% e passava
   por cima do botão de perfil em 20px.

   Agora a camada anda 80% da própria largura, então sobra 1/5 em qualquer
   tela, e a gaveta reserva essa mesma fração mais um respiro.
   Decisão de 30 set 2026. */
.gaveta { --gaveta-reserva: calc(20% + var(--bb-space-1)); }
.gaveta__topo, .gaveta__lista, .gaveta__rodape { margin-right: var(--gaveta-reserva); }
.app-camada[data-menu="true"] { transform: translateX(80%); }

/* ---------- opções por conversa, na gaveta ----------
   A linha deixou de ser um botão só: o nome abre a conversa, o menu abre as
   opções dela. O menu nasce ancorado na linha que o abriu. */
/* A linha é uma pílula: com 44 de altura, o raio total dá 22 — o mesmo do
   botão de opções, que é um círculo de 44. Pela regra concêntrica do sistema,
   raios iguais pedem folga zero, então o botão encosta na ponta direita e os
   dois contornos viram um só. Com o raio de 12 que estava aqui, a ponta da
   linha e o círculo do botão desenhavam duas curvas diferentes no mesmo canto.
   Decisão de 30 set 2026. */
.gaveta__linha {
  display: flex; align-items: center; gap: var(--bb-space-1);
  border-radius: var(--bb-radius-pill);
  transition: background var(--bb-dur-fade) var(--bb-ease);
}
.gaveta__linha:hover { background: rgba(11, 11, 11, .05); }
.gaveta__linha[aria-current="true"] { background: var(--bb-ink-08); }
/* O fundo agora é da linha; o nome só empresta a área de toque. A pílula pede
   mais recuo à esquerda que o canto de 12: o texto começa no raio. */
.gaveta__chat { flex: 1; min-width: 0; padding-left: var(--bb-space-4); }
.gaveta__chat:hover, .gaveta__chat[aria-current="true"] { background: transparent; }
.gaveta__opcoes {
  flex: none; width: var(--bb-tap-min); height: var(--bb-tap-min);
  border-radius: var(--bb-radius-pill);
  background: none; color: var(--bb-text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.gaveta__opcoes:hover { background: var(--bb-ink-08); color: var(--bb-text-primary); }

/* Dentro da gaveta o menu é mais estreito, e nasce colado no botão que o
   abriu — o app.js acerta o topo e a esquerda. A animação cresce a partir do
   canto superior direito, que é de onde o toque veio. */
.popover--gaveta {
  top: 0; right: auto; left: var(--bb-space-4);
  width: min(224px, calc(80% - var(--bb-space-5)));
  transform-origin: top right;
}

/* ---------- título: um componente, quatro degraus ----------
   Oito tamanhos de Archivo Black viram quatro: 40, 32, 24, 20. E o peso fica
   declarado em 400 — a Archivo Black só existe nesse peso, e os títulos em h1 e
   h2 herdavam o negrito do navegador, que engrossava a letra sozinho (+5,8% de
   tinta, medido). A classe do lugar continua cuidando de margem, cor e
   alinhamento; tamanho, entrelinha e tracking moram só aqui.
   Todo título de diálogo, folha e confirmação é o degrau 3.
   Decisões de 30 set 2026 (D4 e D7). */
.titulo {
  font-family: var(--bb-font-display); font-weight: var(--bb-weight-regular);
  letter-spacing: .005em;
}
.titulo--1 { font-size: var(--bb-size-display-xl); line-height: var(--bb-leading-display); }
.titulo--2 { font-size: var(--bb-size-display-l); line-height: var(--bb-leading-display); }
.titulo--3 { font-size: var(--bb-size-display-m); line-height: var(--bb-leading-title); }
.titulo--4 { font-size: var(--bb-size-display-s); line-height: var(--bb-leading-title); }