/*
 * 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 ---------- */

/* O desenho é o dos aplicativos de conversa, como o WhatsApp (pedido do dono
   em 5/11/2026): o fundo próprio da conversa, quente, de borda a borda da
   coluna; o balão de quem pergunta no tom do acento — o petróleo do sistema
   é quase o verde-escuro desses aplicativos, e o verde de verdade continua
   reservado à entrada —; o da resposta, claro; a hora no canto do balão, com
   o "visto" que fica azul quando a troca deixa de esperar. As cores do chat
   são tokens próprios, nos dois temas, como os de `application.css`. */
:root {
  --chat-fundo:  #EFEAE2;
  --chat-minha:  #D5EEE7;
  --chat-dele:   #FFFFFF;
  --chat-campo:  #FFFFFF;
  --chat-hora:   #56625F;
  --chat-lido:   #1B84C2;
  --chat-sombra: 0 1px .5px rgb(11 20 26 / 13%);
}

:root[data-theme="dark"] {
  --chat-fundo:  #0B1513;
  --chat-minha:  #0F4A41;
  --chat-dele:   #1D2B29;
  --chat-campo:  #1D2B29;
  --chat-hora:   #A3B3B0;
  --chat-lido:   #53BDEB;
  --chat-sombra: 0 1px .5px rgb(0 0 0 / 40%);
}

/* O mesmo escuro, para quem escolheu o automático e tem o aparelho no escuro.
   Tem de ficar igual ao bloco de cima: o spec dos temas confere. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --chat-fundo:  #0B1513;
    --chat-minha:  #0F4A41;
    --chat-dele:   #1D2B29;
    --chat-campo:  #1D2B29;
    --chat-hora:   #A3B3B0;
    --chat-lido:   #53BDEB;
    --chat-sombra: 0 1px .5px rgb(0 0 0 / 40%);
  }
}

.app__principal:has(> main > .chat) { background: var(--chat-fundo); }

/* 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-top: 1rem;
  padding-bottom: 0;
}

/* Na medida de leitura, no meio da coluna: 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;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
}

/* O cabeçalho da conversa: a foto redonda de quem responde — a estrela do
   assistente, no acento —, o nome e, embaixo, o perfil de que se fala. */
.chat__cabecalho {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .55rem .8rem;
  border-radius: var(--raio-caixa);
  background: var(--surface);
  box-shadow: var(--chat-sombra);
}
.chat__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-texto);
}
.chat__avatar .icone { width: 1.45rem; height: 1.45rem; }
.chat__quem { flex: 1; min-width: 0; }
.chat__nome { font-size: 1.05rem; line-height: 1.25; }
.chat__perfil {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .8125rem;
  color: var(--ink-medio);
  overflow-wrap: anywhere;
}
.chat__perfil .ponto-cor { flex: none; margin: 0; }
.chat__nova { flex: none; margin: 0; }

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

/* O selo do dia, no meio, entre as trocas: "Hoje", "Ontem" ou a data. */
.chat__dia { justify-self: center; margin: .5rem 0 .2rem; }
.chat__dia span {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: .5rem;
  background: var(--chat-dele);
  box-shadow: var(--chat-sombra);
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-medio);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* O convite da conversa vazia fica no meio do espaço entre o cabeçalho e o
   campo, num balão do sistema, e não grudado num dos dois. */
.assistente__vazio {
  align-self: center;
  max-width: 34rem;
  margin-block: auto;
  display: grid;
  gap: .6rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: .6rem;
  background: var(--chat-dele);
  box-shadow: var(--chat-sombra);
  color: var(--ink-medio);
}
.assistente__vazio .texto-apoio { margin-inline: auto; color: var(--ink-medio); }

/* 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 conversa, para ela não aparecer no vão
   entre o campo e a borda quando passa por baixo — e ela se apaga aos
   poucos no alto do pé, em vez de sumir cortada atrás do campo. 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 .6rem;
  background: linear-gradient(to bottom, transparent, var(--chat-fundo) 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);
}

/* O cartão do pé: o que diz por que não há campo — a instalação sem o
   assistente, o perfil desligado ou arquivado, o limite do mês. Com o campo,
   o cartão some, e o que se vê é a pílula e o botão de enviar sobre o fundo
   da conversa, como no aplicativo. */
.assistente {
  display: grid;
  gap: .6rem;
  padding: .85rem 1rem;
  box-shadow: var(--sombra-alta);
}
.assistente:has(.assistente__formulario) {
  gap: .4rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.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; }

/* A pílula e, ao lado dela, o botão redondo de enviar. Dentro da pílula, o
   microfone à esquerda, o campo e, à direita, o clipe e a câmera — todos com
   o alvo de 44px. O campo começa com uma linha; onde o navegador sabe
   crescê-lo com o texto (`field-sizing`), ele cresce até seis, e rola por
   dentro dali em diante. O anel do foco é o da pílula inteira, e não o do
   campo dentro dela. */
.assistente__botoes { display: flex; align-items: flex-end; gap: .375rem; }

.assistente__caixa {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  min-height: 2.75rem;
  padding: 0 .1rem;
  border-radius: 1.375rem;
  background: var(--chat-campo);
  box-shadow: var(--chat-sombra);
}
.assistente__caixa:has(textarea:focus) { outline: 2px solid var(--foco); outline-offset: 1px; }
.assistente__caixa .campo { flex: 1; min-width: 0; }
/* O trecho do clipe só existe para a recarga o atualizar; não entra no layout. */
.assistente__clipe-lugar { display: contents; }
.assistente__caixa .campo textarea:focus { outline: none; }

.assistente__formulario textarea {
  display: block;
  resize: none;
  padding: .65rem .3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.45;
  min-height: calc(1lh + 1.3rem);
  max-height: calc(6lh + 1.3rem);
  field-sizing: content;
}

/* Enquanto há texto no campo, a câmera sai da pílula e devolve a largura
   dela ao texto, como no aplicativo: tirar a foto é começo de conversa, e
   não meio de frase. */
.assistente__caixa:has(textarea:not(:placeholder-shown)) .assistente__camera { display: none; }

/* O botão de enviar: redondo, no acento, só com o desenho; o nome fica para
   o leitor de tela e para o `title`. */
.assistente__formulario .assistente__enviar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0 0 .15rem;
  border-radius: 999px;
}
.assistente__enviar:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* As linhas do ditado, logo abaixo da pílula: 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; padding-inline: .75rem; }
.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, o clipe e a câmera dentro da pílula: redondos, sem borda,
   no tom do texto de apoio. Ouvindo, o microfone 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: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-medio);
  cursor: pointer;
}
.assistente__microfone:hover { background: var(--surface-alt); color: var(--ink); }
.assistente__microfone:focus-visible { outline-offset: -2px; border-radius: 999px; }
.assistente__microfone[aria-pressed="true"] {
  background: var(--acento);
  color: var(--acento-texto);
  animation: assistente-ouvindo 1.6s ease-out infinite;
}
.assistente__microfone[aria-pressed="true"]:hover {
  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. Sobre o fundo da
   conversa, no tom médio: o fraco não chega ao contraste do texto pequeno
   nele. */
.assistente__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .15rem 1rem;
  font-size: .8125rem;
  color: var(--ink-fraco);
}
.assistente:has(.assistente__formulario) .assistente__rodape { padding-inline: .75rem; color: var(--ink-medio); }
.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. Só
   onde há a barra de abas — a área do cliente: a conversa do chat com o
   suporte na administração (Fase 63), que não tem barra, fica com o pé na
   borda da tela, e a altura da barra que não existe cobriria a última
   mensagem. */
@media (max-width: 64rem) {
  .app--com-abas .assistente__pe { bottom: max(3.9rem + env(safe-area-inset-bottom), var(--teclado, 0px)); }

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

/* No celular a conversa chega mais perto das bordas, como no aplicativo: a
   largura que sobra vai para os balões e para o texto da pílula. */
@media (max-width: 48rem) {
  .app main.container:has(> .chat) { width: min(100% - .75rem, var(--largura-painel)); padding-top: .5rem; }
  .chat__cabecalho { margin-bottom: .75rem; }
  .assistente { padding: .7rem .75rem; }
}

/* Uma troca: a pergunta de quem usa e, embaixo, a resposta, cada uma no seu
   balão — a pergunta à direita, no tom do acento, e a resposta à esquerda,
   clara —, com o canto de cima do lado de quem fala sem curva e o rabicho
   saindo dele. Dá para saber quem falou sem ler nada. */
.troca {
  display: grid;
  gap: .35rem;
}

.troca__pergunta,
.troca__resposta {
  position: relative;
  padding: .45rem .65rem .4rem;
  border-radius: .55rem;
  background: var(--balao);
  box-shadow: var(--chat-sombra);
}
.troca__pergunta::before,
.troca__resposta::before {
  content: "";
  position: absolute;
  top: 0;
  width: .5rem;
  height: .8rem;
  background: var(--balao);
}

/* A pergunta se ajusta ao texto, e a hora vai no fim da última linha quando
   cabe nela — senão, na linha de baixo, à direita, como no aplicativo. */
.troca__pergunta {
  --balao: var(--chat-minha);
  justify-self: end;
  max-width: min(85%, 36rem);
  margin-right: .5rem;
  border-top-right-radius: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: .6rem;
}
.troca__pergunta::before { right: -.5rem; clip-path: polygon(0 0, 100% 0, 0 100%); }
.troca__pergunta > .troca__texto { flex: 0 1 auto; min-width: 0; margin: 0; }
.troca__pergunta > .troca__texto:not(:last-of-type) { flex-basis: 100%; margin-bottom: .4rem; }
.troca__pergunta > .troca__quando { margin-left: auto; }

.troca__resposta {
  --balao: var(--chat-dele);
  justify-self: start;
  max-width: min(92%, 46rem);
  margin-left: .5rem;
  border-top-left-radius: 0;
}
.troca__resposta::before { left: -.5rem; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* Os cartões — a proposta, a conciliação, o extrato, o comprovante — pedem a
   largura toda do balão, e não a do texto. */
.troca__resposta:has(.proposta, .conciliacao, .extrato),
.troca__resposta--sistema { width: 100%; }

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

/* A hora no canto de baixo do balão, pequena, com o "visto" da pergunta —
   cinza enquanto ela espera, azul quando deixa de esperar. Na resposta, ela
   mora na faixa de baixo do balão, à direita, na mesma altura do ouvir. */
.troca__quando {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .2rem;
  margin: 0;
  font-size: .6875rem;
  line-height: 1.2;
  color: var(--chat-hora);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.troca__visto { flex: none; }
.troca__visto--lido { color: var(--chat-lido); }

.troca__resposta:has(> .troca__quando) { padding-bottom: 1.35rem; }
.troca__resposta:has(> .troca__ouvir:not([hidden])) { padding-bottom: .45rem; }
.troca__resposta > .troca__quando { position: absolute; right: .65rem; bottom: .45rem; }

.troca__resposta--falhou { --balao: var(--aviso-fundo); }

.troca__resposta--esperando { color: var(--ink-medio); }
.troca__resposta--esperando .texto-apoio { margin: .2rem 0 0; font-size: .875rem; color: var(--ink-medio); }
.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: .6rem 0 0;
  padding: .5rem 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, e a faixa da hora fica embaixo
   dele. */
.troca__ouvir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: .5rem;
  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__resposta > .troca__texto:last-of-type { 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__total { white-space: nowrap; }
.proposta__previa { margin: 0; padding-left: 1.25rem; font-size: .85rem; }
.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 pílula dele, à
   direita do texto, 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; }

/* Dentro da pílula do campo, sem a borda, como o microfone ao lado: o
   contorno é o da pílula. O anel do foco fica por dentro, para não sair dela. */
.assistente__caixa .assistente__clipe,
.assistente__caixa .assistente__camera { border-color: transparent; background: none; }
.assistente__caixa .assistente__clipe:hover,
.assistente__caixa .assistente__camera:hover { background: var(--surface-alt); }
.assistente__caixa .assistente__clipe:has(:focus-visible),
.assistente__caixa .assistente__camera:has(:focus-visible) { outline-offset: -2px; }

/* 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; }