/*
 * O assistente: a página das perguntas do perfil — um chat, com o campo no pé
 * —, o botão redondo que leva a ela de qualquer página, o cartão de ligar o
 * assistente na página do perfil e o cartão de proposta com "Salvar" e "Abrir
 * no formulário". E a página de privacidade, que nasceu com ele (decisão 6 do
 * plano).
 *
 * Mora aqui o que só o assistente desenha. Cor, espaço, cartão, botão,
 * etiqueta e formulário vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles.
 */

/* Toda grade daqui tem uma coluna que cabe no espaço que há. Sem isso a coluna
   implícita cresce até a largura natural do conteúdo — e um campo de texto
   com `maxlength` grande se acha com milhares de pixels: foi assim que um
   campo de pergunta empurrou o botão "Enviar" para fora do cartão. */
.assistente,
.assistente__conversa,
.troca,
.troca__fontes,
.assistente-cartao,
.privacidade,
.privacidade__lista,
.proposta { grid-template-columns: minmax(0, 1fr); }

/* ---------- A página do assistente: um chat ---------- */

/* A página ocupa a altura da tela, para o campo morar no pé dela mesmo com a
   conversa curta — sempre no mesmo lugar, como em qualquer chat. A coluna
   (`.app__principal`) já tem a altura da tela: o `main` cresce até o fim
   dela, e o respiro de baixo fica por conta do pé da conversa, que é o que
   termina a página. */
main.container:has(> .chat) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

/* Na medida de leitura: a resposta é texto corrido, e uma linha da largura
   da tela larga cansa o olho antes do fim. */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 56rem;
}

.assistente__conversa { display: grid; gap: 1.25rem; }

/* O convite da conversa vazia fica no meio do espaço entre o título e o
   campo, e não grudado num dos dois. */
.assistente__vazio { margin-block: auto; display: grid; gap: .6rem; }
.assistente__vazio .texto-apoio { margin-inline: auto; }

/* O pé da conversa, preso ao fim da tela enquanto se rola: o campo, a cota do
   mês e as recusas. O fundo é o da página, para a conversa que passa por
   baixo não aparecer no vão entre o campo e a borda — e ela se apaga aos
   poucos no alto do pé, em vez de sumir cortada atrás do cartão. Na tela
   larga, o pé encosta na borda de baixo; no celular, na barra de abas (logo
   abaixo). `--teclado` é a altura do teclado do celular aberto
   (`conversa_controller`). */
.assistente__pe {
  position: sticky;
  bottom: var(--teclado, 0px);
  z-index: 5;
  margin-top: auto;
  padding: 1.25rem 0 .75rem;
  background: linear-gradient(to bottom, transparent, var(--ground) 1.25rem);
}

/* A rolagem que leva à vista o que ganha o foco desconta o que fica preso na
   tela: a faixa de cima e o pé da conversa. Sem isso o navegador acha visível
   o link que está atrás deles, e não rola — quem percorre a conversa pelo
   teclado perde o foco de vista, descendo atrás do pé e subindo atrás da
   faixa. A altura do pé muda (a recusa e o aviso acima do campo, o campo que
   cresce com o texto), e o `conversa_controller` a mede (`--altura-do-pe`).
   A da faixa quase não muda — uns 4rem, e 84px logo acima de 64rem, onde ela
   quebra em duas linhas ao lado da lateral —, e 6rem a cobrem com o anel do
   foco. O respiro de cima também deixa abaixo da faixa a pergunta enviada, à
   qual a âncora leva quem navega sem JavaScript. */
html:has(.assistente__pe) {
  scroll-padding-top: 6rem;
  scroll-padding-bottom: calc(var(--altura-do-pe, 10rem) + .75rem);
}

.assistente {
  display: grid;
  gap: .6rem;
  padding: .85rem 1rem;
  box-shadow: var(--sombra-alta);
}
.assistente p { margin: 0; }

/* Os avisos da página (`shared/flash`) moram no pé, logo acima do campo: o
   respiro deles é o do pé, e não o do alto da página. */
.assistente__pe .flash-stack { margin-bottom: .6rem; }

/* O campo na largura toda e, embaixo dele, a linha dos botões: o microfone à
   esquerda — e o clipe da Fase 43a ao lado dele — e o "Enviar" à direita.
   Ao lado do campo, cada botão tiraria dele uns 54px: no celular, sete letras
   por linha. Duas linhas de começo; onde o navegador sabe crescer o campo com
   o texto (`field-sizing`), ele cresce até sete, e rola por dentro dali em
   diante. */
.assistente__formulario textarea {
  resize: none;
  line-height: 1.45;
  min-height: calc(2lh + 1.1rem + 2px);
  max-height: calc(7lh + 1.1rem + 2px);
  field-sizing: content;
}
.assistente__botoes { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.assistente__formulario .botao { flex: none; min-height: 2.75rem; }
.assistente__enviar { margin-left: auto; }
.assistente__enviar-seta { display: none; }

/* As linhas do ditado, logo abaixo do campo: a de status — "Ouvindo…",
   "Pronto." e os erros — e a do que o navegador ainda está reconhecendo, que
   ainda não é o texto do campo. Vazias, não ocupam altura; a de status fica
   na página mesmo vazia, porque a região que o leitor de tela anuncia
   precisa existir antes da frase. O provisório se separa do texto pelo
   itálico, e não por um tom mais fraco: é por ele que a pessoa confere a
   fala antes do final, e o texto pequeno pede o contraste todo. */
.assistente__status,
.assistente__provisorio { font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.assistente__status { color: var(--ink-medio); }
.assistente__status--aviso { color: var(--aviso); }
.assistente__provisorio { color: var(--ink-medio); font-style: italic; }
.assistente__provisorio:empty { display: none; }
.assistente__status:not(:empty),
.assistente__provisorio:not(:empty) { margin-top: .4rem; }

/* O microfone: redondo, do tamanho da seta do celular. Ouvindo, ele fica
   marcado (`aria-pressed`), na cor do acento — verde e vermelho são do
   dinheiro —, e pulsa; parado, com o anel, para quem pede menos movimento. A
   regra geral do foco arredonda o contorno em 3px: no botão redondo, ele
   sairia quadrado. */
.assistente__microfone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-medio);
  cursor: pointer;
}
.assistente__microfone:hover { background: var(--surface-alt); color: var(--ink); }
.assistente__microfone:focus-visible { outline-offset: 3px; border-radius: 999px; }
.assistente__microfone[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-texto);
  animation: assistente-ouvindo 1.6s ease-out infinite;
}
.assistente__microfone[aria-pressed="true"]:hover {
  border-color: var(--acento-forte);
  background: var(--acento-forte);
  color: var(--acento-texto);
}

@keyframes assistente-ouvindo {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 45%, transparent); }
  to { box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--acento) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .assistente__microfone[aria-pressed="true"] {
    animation: none;
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--acento) 35%, transparent);
  }
}

/* "45 de 300 perguntas em novembro": quem chega perto do limite sabe antes de
   tentar, mas a frase não disputa o olho com o campo. */
.assistente__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .15rem 1rem;
  font-size: .8125rem;
  color: var(--ink-fraco);
}
.assistente__cota { color: var(--ink-medio); }

/* No celular o pé encosta na barra de abas, e não na borda da tela: a altura
   dela é a do respiro que `.app--com-abas .app__principal` guarda embaixo
   (`application.css`), e o campo nunca fica por baixo dela. Com o teclado
   aberto a barra fica atrás dele, e o pé sobe até a borda do teclado. */
@media (max-width: 64rem) {
  .assistente__pe { bottom: max(3.9rem + env(safe-area-inset-bottom), var(--teclado, 0px)); }

  html:has(.assistente__pe) {
    scroll-padding-bottom: calc(var(--altura-do-pe, 10rem) + 3.9rem + env(safe-area-inset-bottom) + .75rem);
  }
}

/* No celular o botão é só a seta, redonda: o campo fica com a largura. O
   nome "Enviar" sai da vista e fica para o leitor de tela, como o
   `.sr-only`. */
@media (max-width: 48rem) {
  .assistente { padding: .7rem .75rem; }

  .assistente__formulario .assistente__enviar { width: 2.75rem; padding: 0; border-radius: 999px; }
  .assistente__enviar-seta { display: block; }
  .assistente__enviar-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Com o celular deitado a tela é baixa e larga: a linha de botões embaixo do
   campo tiraria da conversa a altura que falta — com o "Ouvindo…" e o
   provisório, o pé chegaria à faixa de cima —, sem dar ao campo largura que
   faça falta. Ali os botões, com o clipe, vão para o lado do campo, e as
   linhas do ditado e a do anexo ficam embaixo dos dois. */
@media (max-height: 30rem) and (min-width: 36rem) {
  .assistente__formulario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .5rem;
    align-items: end;
  }
  .assistente__formulario > * { grid-column: 1 / -1; }
  .assistente__formulario > .campo { grid-area: 1 / 1; }
  .assistente__formulario > .assistente__botoes { grid-area: 1 / 2; margin-top: 0; }
}

/* Uma troca: a pergunta de quem usa e, embaixo, a resposta. A pergunta fica
   à direita, num balão no fundo neutro, e a resposta na largura toda, no
   branco do cartão, com a borda de acento — dá para saber quem falou sem ler
   o rótulo, como em qualquer conversa. */
.troca {
  display: grid;
  gap: .6rem;
}

.troca__pergunta {
  justify-self: end;
  max-width: min(85%, 38rem);
  background: var(--surface-alt);
  border-radius: var(--raio-caixa);
  padding: .85rem 1.1rem;
}

.troca__quem { margin: 0 0 .3rem; font-size: .8rem; color: var(--ink-fraco); }

.troca__texto { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.troca__texto:last-child { margin-bottom: 0; }

.troca__resposta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-caixa);
  padding: .95rem 1.2rem;
  box-shadow: var(--sombra);
}

.troca__resposta--falhou { border-left-color: var(--aviso); background: var(--aviso-fundo); }

.troca__resposta--esperando { border-left-color: var(--line-forte); color: var(--ink-medio); }
.troca__resposta--esperando .texto-apoio { margin: .2rem 0 0; font-size: .875rem; }
.troca__resposta--esperando .troca__texto { animation: assistente-pulsa 1.6s ease-in-out infinite; }

@keyframes assistente-pulsa {
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .troca__resposta--esperando .troca__texto { animation: none; }
}

.troca__fontes {
  list-style: none;
  margin: .75rem 0 0;
  padding: .6rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .25rem;
  font-size: .85rem;
  color: var(--ink-medio);
}

/* O ouvir, no pé da resposta, depois das fontes: pequeno e redondo, com o
   alto-falante. Lendo, ele fica marcado (`aria-pressed`), na cor do acento,
   como o microfone que ouve, e o desenho vira o de parar. A regra geral do
   foco arredonda o contorno em 3px: no botão redondo, ele sairia quadrado.
   Escondido — sem JavaScript, ou sem voz que sirva —, o último parágrafo
   fecha a resposta sem o respiro de baixo, como fechava antes dele. */
.troca__ouvir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: .6rem;
  padding: 0;
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-medio);
  cursor: pointer;
}
.troca__ouvir:hover { background: var(--surface-alt); color: var(--ink); }
.troca__ouvir:focus-visible { outline-offset: 3px; border-radius: 999px; }
.troca__ouvir[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-texto);
}
.troca__ouvir[aria-pressed="true"]:hover {
  border-color: var(--acento-forte);
  background: var(--acento-forte);
  color: var(--acento-texto);
}
.troca__ouvir-parar,
.troca__ouvir[aria-pressed="true"] .troca__ouvir-falar { display: none; }
.troca__ouvir[aria-pressed="true"] .troca__ouvir-parar { display: block; }
.troca__texto:has(+ .troca__ouvir[hidden]) { margin-bottom: 0; }

/* ---------- O cartão de proposta, dentro da resposta ---------- */

/* O que o assistente preparou e ainda não foi gravado: um quadro dentro da
   resposta, com a borda tracejada de rascunho — dá para ver de longe que é
   uma proposta, e não um registro. O em branco e o motivo dele saem no tom de
   aviso; verde e vermelho ficam para o dinheiro. */
.proposta {
  display: grid;
  gap: .65rem;
  margin: .9rem 0 .2rem;
  padding: .85rem 1rem;
  border: 1px dashed var(--line-forte);
  border-radius: var(--raio);
  background: var(--surface-alt);
}

.proposta p { margin: 0; }

.proposta__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 600; }

/* Os campos em colunas que se ajeitam à largura: duas ou três no computador,
   uma no celular. */
.proposta__campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: .55rem 1rem;
  margin: 0;
}

.proposta__campo { min-width: 0; }
.proposta__campo dt { font-size: .75rem; color: var(--ink-fraco); }
.proposta__campo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.proposta__campo .proposta__vazio { font-weight: 400; font-style: italic; color: var(--aviso); }

/* As frases — o título e a mensagem do chamado — na largura toda; o texto
   corrido da mensagem, sem negrito e com as quebras de linha de quem
   escreveu. */
.proposta__campo--largo { grid-column: 1 / -1; }
.proposta__campo--corrido dd { font-weight: 400; white-space: pre-line; }

.proposta__avisos {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: .85rem;
  color: var(--aviso);
  overflow-wrap: anywhere;
}

.proposta__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.proposta__acoes form { margin: 0; }

.proposta__salva { font-size: .85rem; color: var(--acento); font-weight: 600; }
/* O mês de chamados esgotado, no lugar do "Abrir o chamado": quando libera. */
.proposta__limite { font-size: .85rem; color: var(--aviso); font-weight: 600; }
.proposta .texto-apoio { font-size: .85rem; }

/* ---------- O anexo e o cartão do extrato (Fase 43a) ---------- */

/* O anexo no pé da conversa. Com o campo, o clipe mora na linha dos botões
   dele, ao lado do microfone da Fase 42, sem tirar largura do campo, e a
   linha que diz que o arquivo está subindo, ou por que não subiu, mora
   embaixo das do ditado, como elas: vazia, não ocupa nada. O formulário do
   anexo fica então só com o "Enviar o arquivo" de quem navega sem
   JavaScript, e com ele escondido sai da grade do cartão: vazio, ainda
   somaria o espaço entre as linhas, uma faixa à toa no pé do celular.

   Sem o campo — as perguntas do mês esgotadas —, o clipe e a linha moram no
   formulário do anexo, embaixo da frase do limite, lado a lado. */
.assistente__anexo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
.assistente__anexo:not(:has(.assistente__clipe:not([hidden]), [type="submit"]:not([hidden]))) { display: none; }
.assistente__anexo-status { flex: 1 1 10rem; font-size: .8125rem; line-height: 1.4; color: var(--ink-medio); overflow-wrap: anywhere; }
.assistente__anexo-status:empty { flex-basis: 0; }
.assistente__anexo-status--aviso { color: var(--aviso); }
.assistente__formulario > .assistente__anexo-status:not(:empty) { margin-top: .4rem; }

/* O clipe: redondo, do tamanho da seta do celular, como o microfone da Fase
   42. É o rótulo do campo do arquivo, que mora dentro dele fora da vista: o
   foco do teclado no campo aparece no clipe, com o contorno de foco do
   sistema — redondo, como o botão. Enviando, ele espera. */
.assistente__clipe,
.assistente__camera {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-medio);
  cursor: pointer;
}
.assistente__clipe[hidden],
.assistente__camera[hidden] { display: none; }
.assistente__clipe:hover,
.assistente__camera:hover { background: var(--surface-alt); color: var(--ink); }
.assistente__clipe:has(:focus-visible),
.assistente__camera:has(:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
.assistente__clipe:has(:disabled),
.assistente__camera:has(:disabled) { cursor: progress; opacity: .55; }

/* A câmera do comprovante (Fase 45), ao lado do clipe, igual a ele: só no
   celular — na tela estreita, ou onde o toque é o jeito de apontar. No
   computador o `capture` não faz nada, e ela seria um segundo clipe. */
@media (min-width: 48.0625rem) and (pointer: fine) {
  .assistente__camera { display: none; }
}

/* Onde soltar o arquivo arrastado: a área da página por cima da conversa,
   com o convite no meio da tela. Não recebe o arrasto — passa para a
   conversa embaixo, que é quem o trata (`anexo_controller`). */
.assistente__soltura {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  pointer-events: none;
}
.assistente__soltura[hidden] { display: none; }
.assistente__soltura-aviso {
  margin: 0;
  padding: 1.6rem 2.2rem;
  border: 2px dashed var(--acento);
  border-radius: var(--raio-caixa);
  background: var(--surface);
  color: var(--acento);
  font-weight: 600;
  box-shadow: var(--sombra-alta);
  text-align: center;
}

/* Na tela larga, a área começa depois da lateral, que não recebe arquivo. */
@media (width > 64rem) {
  .assistente__soltura { left: var(--lateral); }
}

/* O cartão do sistema: a resposta que o sistema montou sem o modelo, com o
   rodapé que diz isso. A borda é a de toda resposta; quem fez está escrito. */
.troca__autoria {
  margin: .75rem 0 0;
  padding-top: .55rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--ink-fraco);
}

/* O cartão do extrato: o título com a situação da importação ao lado, o que
   o sistema contou dela e as saídas. As esperas — lendo, gravando — no tom
   da espera da pergunta; o aviso dos finais que não batem, no tom de aviso,
   antes de tudo. */
.extrato { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
.extrato p { margin: 0; overflow-wrap: anywhere; }
.extrato__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.extrato__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.extrato__espera { color: var(--ink-medio); animation: assistente-pulsa 1.6s ease-in-out infinite; }
.extrato__atencao { color: var(--aviso); font-weight: 600; }
.extrato__rotulo { font-size: .85rem; color: var(--ink-medio); }
.extrato__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.extrato__acoes form { margin: 0; }
.extrato .texto-apoio { font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .extrato__espera { animation: none; }
}

/* ---------- O cartão de conciliação (Fase 44) ---------- */

/* As linhas em aberto de uma conta, cada uma com os dois lados do par — a do
   banco e o lançamento — e o que o sistema sugere. É proposta: o quadro com a
   borda tracejada de rascunho, como o cartão de formulário, porque nada está
   conciliado até o clique. Cada linha num quadro branco, com a caixa à
   esquerda e a sugestão embaixo, alinhada ao texto da linha. A linha já
   resolvida sai sem o branco, a resolução no tom de acento, e a que mudou
   desde o cartão no tom de aviso; verde e vermelho ficam para o dinheiro. */
.conciliacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .65rem;
  margin: .9rem 0 .2rem;
  padding: .85rem 1rem;
  border: 1px dashed var(--line-forte);
  border-radius: var(--raio);
  background: var(--surface-alt);
}
.conciliacao p { margin: 0; overflow-wrap: anywhere; }
.conciliacao .texto-apoio { font-size: .85rem; }

.conciliacao__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.conciliacao__titulo { margin: 0; font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }

.conciliacao__linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.conciliacao__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--surface);
}
.conciliacao__linha--conciliada,
.conciliacao__linha--ignorada { background: transparent; }

.conciliacao__extrato { display: flex; align-items: flex-start; gap: .6rem; }
.conciliacao__extrato input[type="checkbox"] { flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; }

/* A linha leva à mesa, nela: a data, o histórico — que quebra onde
   precisar — e o valor, que nunca quebra. No celular o histórico desce para
   a linha de baixo, na largura toda: espremido entre a data e o valor, ele
   quebraria no meio das palavras. As sugestões do cartão do extrato (Fase
   54) desenham a linha do mesmo jeito, sem o link: ela ainda não está no
   extrato, nem na mesa (`conciliacao__banco`). */
.conciliacao__link,
.conciliacao__banco {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "data historico valor";
  gap: .2rem .6rem;
  align-items: baseline;
  color: var(--ink);
  text-decoration: none;
}
.conciliacao__link:hover .conciliacao__historico { text-decoration: underline; }
.conciliacao__data { grid-area: data; font-variant-numeric: tabular-nums; color: var(--ink-fraco); font-size: .85rem; }
.conciliacao__historico { grid-area: historico; font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
.conciliacao__valor { grid-area: valor; justify-self: end; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

@media (max-width: 48rem) {
  .conciliacao { padding: .75rem; }
  .conciliacao__linha { padding: .5rem .6rem; }
  .conciliacao__link,
  .conciliacao__banco {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "data valor" "historico historico";
  }
}

.conciliacao__sugestao { display: grid; gap: .3rem; font-size: .875rem; }
.conciliacao__linha:has(.conciliacao__extrato input[type="checkbox"]) .conciliacao__sugestao { padding-left: 1.65rem; }
.conciliacao__par { color: var(--ink-medio); }
.conciliacao__pista { color: var(--ink-fraco); font-style: italic; }
.conciliacao__seletor { width: 100%; max-width: 30rem; min-width: 0; }
.conciliacao__estado { color: var(--ink-medio); }
.conciliacao__estado--feito { color: var(--acento); font-weight: 600; }
.conciliacao__estado--mudou { color: var(--aviso); }

.conciliacao__mais { font-size: .875rem; color: var(--ink-medio); }
.conciliacao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.conciliacao__acoes .botao[disabled] { opacity: .5; cursor: not-allowed; }
.conciliacao .troca__autoria { margin-top: .1rem; }

/* ---------- O cartão de ligar, na página do perfil ---------- */

.assistente-cartao { margin-top: 1.5rem; display: grid; gap: .8rem; }
.assistente-cartao > p,
.assistente-cartao .cartao__cabecalho { margin: 0; }
.assistente-cartao .acoes-admin form { margin: 0; }

/* O aviso é o que se lê antes de ligar: no tamanho do texto, e não da nota
   de rodapé. */
.assistente-cartao__aviso { max-width: 46rem; }

/* ---------- O botão que leva ao assistente ---------- */

/* Redondo, no canto de baixo à direita de toda página do perfil em que o
   assistente responde — só na tela larga. Abaixo de 64rem, onde a barra de
   abas aparece (`.abas`, `application.css`), quem leva ao assistente é a aba
   dele, e o botão some. */
.assistente-flutuante { display: none; }

@media (width > 64rem) {
  .assistente-flutuante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    /* Acima da página, e abaixo de tudo o que se abre por cima dela — a
       lista do combo (25), a faixa de contexto com as gavetas do período e do
       perfil (15) —: o botão não cobre o que a pessoa abriu. */
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: var(--acento);
    color: var(--acento-texto);
    box-shadow: var(--sombra-alta);
    transition: background .15s ease, transform .15s ease;
  }
  .assistente-flutuante:hover { background: var(--acento-forte); color: var(--acento-texto); transform: translateY(-2px); }
  /* A regra geral do foco arredonda o contorno em 3px: no botão redondo, o
     contorno sairia quadrado. */
  .assistente-flutuante:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 999px; }
  .assistente-flutuante .icone { width: 1.6rem; height: 1.6rem; }

  /* O fim da página não pode ficar atrás do botão: com ele na tela, o
     respiro de baixo cresce até passar da altura dele. */
  .app__principal:has(> .assistente-flutuante) > main.container { padding-bottom: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .assistente-flutuante { transition: none; }
  .assistente-flutuante:hover { transform: none; }
}

/* ---------- A página de privacidade ---------- */

.privacidade { display: grid; gap: 1rem; max-width: 52rem; }
.privacidade .cartao__titulo { margin-bottom: .6rem; }
.privacidade .texto-apoio { margin: .75rem 0 0; }

/* Lista de leitura, com marcador: frase longa com rótulo em negrito no começo,
   e não as linhas de ação de `.lista-simples`. */
.privacidade__lista { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; line-height: 1.55; }