/* ============================================================================
   pedro.css — balão de suporte do site (assistente "Pedro")
   Markup: includes/ia-suporte-widget.php
   ----------------------------------------------------------------------------
   ARQUIVO PRÓPRIO, E NÃO UM BLOCO NO FIM DO main.css. Três motivos, em ordem
   de peso:

     1. main.css tem 135 KB e é servido em todas as páginas desde sempre.
        Editá-lo para um recurso novo põe o site inteiro na mesma remessa de
        risco do recurso, e o envio para a hospedagem é manual (o cliente de
        FTP já pulou arquivo existente em silêncio uma vez, ver o README).
        Arquivo NOVO sobe sempre.
     2. O widget é opcional: com IA_SUPORTE_ENABLED em false, o <link> nem sai
        do rodapé e ninguém baixa nada.
     3. Isolamento real de nomes. Tudo aqui começa com .pedro, e nenhuma regra
        toca em elemento do site. Desligar o recurso não pode mudar um pixel
        do que já existe.

   Os tokens (--c-primary, --sp-*, --radius-*) vêm do :root de main.css, que
   sempre carrega antes. Se um dia este arquivo for usado sem ele, os fallbacks
   de cada var() seguram a aparência.
   ============================================================================ */

.pedro {
  --pedro-primary: var(--c-primary, #102A48);
  --pedro-accent:  var(--c-accent, #5DAF43);
  --pedro-borda:   var(--c-border, #E4EAF1);
  --pedro-texto:   var(--c-text, #102A48);
  --pedro-suave:   var(--c-text-muted, #55677D);
  --pedro-fundo:   var(--c-bg, #fff);
  --pedro-alt:     var(--c-bg-alt, #F5F8FB);

  /* Azul claro do balão de quem escreve. É hex fixo, e não um derivado de
     --c-primary, porque o navy da marca é pouco saturado: clareado ele vira
     cinza e o balão deixa de ser reconhecível como "o meu". Opaco, e não rgba,
     pelo mesmo motivo do --c-accent-deep no main.css: é fundo de TEXTO, e
     translúcido mudaria de contraste conforme o que estivesse atrás. */
  --pedro-eu:      #DCE8F7;

  /* Altura do gatilho, em um lugar só: o painel se apoia nela para não cobrir
     o botão, e ela também é o DIÂMETRO do círculo no estado aberto. Repetir a
     medida solta nos dois lugares foi o que já deixou o painel desencontrado
     do botão uma vez. 46px e não menos porque, fechado, o círculo do X não
     pode ficar abaixo do alvo de toque de 44px. */
  --pedro-fab-h: 46px;

  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 95;               /* acima do conteúdo, abaixo dos modais (1000) */
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1.5;
}

/* ---------- Gatilho (pílula com ícone e rótulo) ---------- */
/*
   Três decisões de UX estão coladas nestas regras, e nenhuma é enfeite:

   1. ÍCONE E RÓTULO JUNTOS. O balão de conversa sozinho é ambíguo (comentário?
      avaliação? notificação?) e obriga a passar o mouse para ler o title, o
      que no celular nem existe. As três palavras ao lado dizem a proposta
      antes do clique, que é o trabalho deste botão.
   2. UMA LINHA, E NÃO TRÊS ELEMENTOS. A versão anterior era uma pílula de 60px
      com foto de 44px mais duas linhas de texto: ~12.900px² fixos na tela em
      todas as páginas para dizer uma coisa só. Esta tem 46px de altura e uma
      linha: cerca de 7.900px², ~39% menos. O rosto do assistente passou para o
      cabeçalho do painel, onde saber com quem se fala tem valor.
   3. COR DE DESTAQUE. O azul primário é a cor do cabeçalho, dos botões e do
      rodapé; um botão azul sobre um site azul desaparece. O verde da marca
      destaca sem introduzir cor nova, e o tom fechado (--c-accent-deep) é o
      único da família com contraste AA para texto branco: 5,2:1, contra 2,7:1
      do --c-accent e 3,9:1 do --c-accent-dark.
*/

.pedro__fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: var(--pedro-fab-h);
  /* Assimétrico: o ícone tem menos massa visual que o texto, então o lado dele
     pede folga um pouco menor para a pílula não parecer torta. */
  padding: 0 1.05rem 0 .9rem;
  border: none;
  border-radius: 999px;
  background: var(--c-accent-deep, #3B7A29);
  color: #fff;
  /* Sombra baixa: o botão precisa se destacar do branco da página, não flutuar
     dois centímetros acima dela. */
  box-shadow: 0 4px 14px rgba(16, 42, 72, .20);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* O hover ESCURECE, e não clareia como é o hábito. Clarear para
   --c-accent-dark (#4a9234) levaria o contraste do texto branco de 5,2:1 para
   3,9:1, abaixo do mínimo AA, justamente no estado em que a pessoa está
   olhando o botão. Escurecer sobe para 7,0:1 e dá a mesma sensação de resposta
   ao toque. */
.pedro__fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 42, 72, .26);
  background: #2F6522;
}
.pedro__fab:focus-visible {
  outline: 3px solid var(--pedro-primary);
  outline-offset: 3px;
}

/* ---- Ícone ---- */

.pedro__fab-icone {
  flex-shrink: 0;
  display: block;
}
.pedro__fab-icone svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
}

/* ---- Rótulo ---- */
/* 600 e não 700: em branco sobre cor saturada, o peso cheio engorda a letra e
   embaça a contra-forma no tamanho pequeno. */

.pedro__fab-texto {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
}

/* ---- Estado aberto: vira um X redondo ---- */
/* A pílula não é animada até virar círculo: largura de pílula depende do texto,
   e animar largura calculada é o caminho mais curto para tremer no meio da
   transição. Troca seca, que a 180ms ninguém percebe como corte. */

.pedro__fab-fechar { display: none; }
.pedro__fab-fechar svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
}

.pedro.is-aberto .pedro__fab {
  width: var(--pedro-fab-h);
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
}
.pedro.is-aberto .pedro__fab-icone,
.pedro.is-aberto .pedro__fab-texto { display: none; }
.pedro.is-aberto .pedro__fab-fechar { display: block; }

/* ---------- Painel ---------- */

.pedro__painel[hidden] { display: none; }

.pedro__painel {
  position: absolute;
  right: 0;
  bottom: calc(var(--pedro-fab-h) + var(--sp-3, .75rem));
  width: min(380px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  background: var(--pedro-fundo);
  border: 1px solid var(--pedro-borda);
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 24px 60px -20px rgba(16, 42, 72, .38);
  overflow: hidden;
  animation: pedro-sobe 180ms cubic-bezier(.22, .61, .36, 1);
}

@keyframes pedro-sobe {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pedro__painel { animation: none; }
  .pedro__fab { transition: none; }
  .pedro__fab:hover { transform: none; }
}

/* ---------- Cabeçalho ---------- */

.pedro__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--sp-3, .75rem);
  padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
  background: var(--pedro-primary);
  color: #fff;
  flex-shrink: 0;
}

.pedro__avatar { flex-shrink: 0; position: relative; }
.pedro__avatar img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Mesmo anel branco do gatilho: sobre o azul do cabeçalho, o fundo
     branco do retrato precisa de uma borda para virar avatar em vez de
     mancha clara. */
  border: 2px solid rgba(255, 255, 255, .9);
  background: #fff;
}

/* Bolinha de disponibilidade sobre o retrato. Responde, sem uma palavra, a
   dúvida de quem abre um canal de atendimento e não sabe se tem alguém do
   outro lado. Quando NÃO tem, ela não é desenhada: quem decide isso é o PHP,
   não o CSS (ver $pedroOnline no widget).

   O anel é da cor do CABEÇALHO, e não branco. Branco brigaria com o anel que o
   próprio retrato já tem e o conjunto viraria um alvo de tiro; na cor da
   superfície atrás, a bolinha parece recortada do avatar, que é como toda
   interface de conversa desenha isso.

   -1px nas duas bordas: o ponto exato a 45° do círculo ficaria a -1,6px e
   pareceria solto do retrato. Um pixel para dentro ele encosta sem cobrir
   rosto nenhum. */
.pedro__avatar-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #35c759;
  border: 2px solid var(--pedro-primary);
}

.pedro__identidade { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
/* As reticências são defesa, não enfeite: o cabeçalho é uma linha só de 380px
   (menos no celular) e agora divide o espaço com a pílula "Nova". Sem elas, um
   papel mais comprido empurraria os botões para fora da borda; com elas, o
   texto corta e os botões ficam sempre alcançáveis. */
.pedro__nome,
.pedro__papel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedro__nome  { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.pedro__papel { font-size: .75rem; opacity: .82; }

.pedro__acao {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: .8;
  transition: background-color .15s ease, opacity .15s ease;
}
.pedro__acao:hover,
.pedro__acao:focus-visible { background: rgba(255, 255, 255, .16); opacity: 1; outline: none; }
.pedro__acao:focus-visible { box-shadow: 0 0 0 2px var(--pedro-accent); }
.pedro__acao svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Variante com rótulo: deixa de ser um círculo de 30px e vira pílula. A borda
   discreta é o que a faz parecer clicável sobre o azul do cabeçalho, onde um
   botão fantasma se confunde com texto. */
.pedro__acao--rotulada {
  width: auto;
  gap: .3rem;
  padding: 0 .6rem 0 .5rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.pedro__acao--rotulada svg { width: 14px; height: 14px; }

/* Desabilitado: some o cursor de mão e o realce do hover, mas o botão CONTINUA
   legível. Esmaecer até o limite esconderia a existência da ação de quem ainda
   não sabe que ela existe, que é o contrário do motivo de ter posto rótulo. */
.pedro__acao:disabled {
  opacity: .45;
  cursor: default;
}
.pedro__acao:disabled:hover { background: transparent; opacity: .45; }
/* A moldura some quase por inteiro junto com a opacidade. Só o texto
   esmaecido, sobre o azul do cabeçalho, ainda parecia clicável; é a borda que
   dizia "botão", e é ela que precisa recuar. */
.pedro__acao--rotulada:disabled { border-color: rgba(255, 255, 255, .12); }

/* ---------- Corpo da conversa ---------- */

.pedro__corpo {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;      /* rolar o chat não rola a página atrás */
  padding: var(--sp-4, 1rem);
  background: var(--pedro-alt);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, .75rem);
  -webkit-overflow-scrolling: touch;
}

.pedro__intro[hidden] { display: none; }
.pedro__intro { color: var(--pedro-texto); font-size: .9rem; }
.pedro__intro-oi   { margin: 0 0 var(--sp-2, .5rem); }
.pedro__intro-dica { margin: 0 0 var(--sp-2, .5rem); color: var(--pedro-suave); font-size: .82rem; }

.pedro__sugestoes { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }

.pedro__sugestao {
  text-align: left;
  padding: .5rem .7rem;
  background: var(--pedro-fundo);
  border: 1px solid var(--pedro-borda);
  border-radius: var(--radius, 12px);
  color: var(--pedro-primary);
  font-size: .84rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pedro__sugestao:hover,
.pedro__sugestao:focus-visible {
  border-color: var(--c-border-strong, #CFDAE6);
  background: #fff;
  outline: none;
}
.pedro__sugestao:focus-visible { box-shadow: 0 0 0 2px var(--pedro-accent); }

/* ---------- Visão "Seus atendimentos" ---------- */

/* Ocupa o corpo inteiro no lugar da conversa. Herda de .pedro__corpo a rolagem
   e o respiro; daqui para baixo é só o conteúdo dela.

   As três regras de [hidden] abaixo NÃO são redundantes com o atributo: a regra
   do navegador para [hidden] é `display: none`, e ela perde para o
   `display: flex` que .pedro__corpo e .pedro__composer declaram. Sem elas,
   trocar de visão pelo JavaScript esconderia exatamente nada. */
.pedro__corpo[hidden],
.pedro__historico[hidden],
.pedro__composer[hidden] { display: none; }

/* Menos respiro entre as peças da lista do que entre balões de conversa, que é
   para o que o gap de .pedro__corpo foi calibrado. */
.pedro__historico { gap: var(--sp-2, .5rem); }

/* GRUDA NO TOPO ao rolar. A partir do sétimo atendimento a lista passa da
   altura do painel, e sem isto o "Voltar à conversa" sai de vista justamente
   para quem tem mais histórico (o ícone do cabeçalho ainda fecha a lista, mas
   procurar a saída lá em cima depois de rolar é trabalho à toa).

   As margens negativas levam o fundo até as bordas do painel: sem elas, o
   padding lateral do corpo deixaria duas frestas por onde os cartões passariam
   à vista enquanto rolam por baixo. */
.pedro__historico-topo {
  position: sticky;
  /* NEGATIVO, e igual ao padding do corpo. O `top` do sticky é medido a partir
     da caixa de CONTEÚDO do elemento que rola, que começa depois do
     padding: com `top: 0` o bloco grudava 16px abaixo da borda visível e o
     cartão seguinte aparecia cortado nessa faixa, por cima do "Voltar à
     conversa". Medido, não deduzido: o delta era 16px em qualquer posição de
     rolagem. */
  top: calc(var(--sp-4, 1rem) * -1);
  z-index: 1;
  /* A margem negativa sobe o bloco por cima do respiro do corpo e o abre até as
     bordas do painel; o padding devolve o mesmo espaço por dentro, então parado
     ele fica idêntico ao que era. Juntos, os dois fazem o bloco pintar a faixa
     inteira do topo enquanto a lista rola por baixo. */
  margin: calc(var(--sp-4, 1rem) * -1) calc(var(--sp-4, 1rem) * -1) 0;
  padding: var(--sp-4, 1rem) var(--sp-4, 1rem) var(--sp-2, .5rem);
  background: var(--pedro-alt);
}

.pedro__voltar {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .45rem .3rem .25rem;
  margin-left: -.25rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 8px);
  color: var(--pedro-primary);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.pedro__voltar:hover { background: var(--pedro-fundo); }
.pedro__voltar:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pedro-accent); }
.pedro__voltar svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.pedro__historico-titulo {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pedro-suave);
}

.pedro__historico-lista { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }

/* Cartão com moldura, igual às sugestões: aqui a lista É a tela, então ela
   pode (e deve) ter o peso da ação principal do momento. Era o contrário
   quando ela dividia a tela de boas-vindas com as sugestões. */
.pedro__atendimento {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  width: 100%;
  padding: .55rem .7rem;
  background: var(--pedro-fundo);
  border: 1px solid var(--pedro-borda);
  border-radius: var(--radius, 12px);
  color: var(--pedro-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pedro__atendimento:hover,
.pedro__atendimento:focus-visible {
  border-color: var(--c-border-strong, #CFDAE6);
  background: #fff;
  outline: none;
}
.pedro__atendimento:focus-visible { box-shadow: 0 0 0 2px var(--pedro-accent); }

/* Duas linhas: o assunto e, abaixo, a data com o tamanho da conversa. O assunto
   corta em UMA linha com reticências porque o título vem da primeira pergunta
   da pessoa, que às vezes é um parágrafo inteiro. */
.pedro__atendimento-titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .85rem;
}
.pedro__atendimento-meta {
  font-size: .74rem;
  color: var(--pedro-suave);
}

/* ---------- Balões ---------- */

.pedro__msg { display: flex; }
.pedro__msg--user { justify-content: flex-end; }
.pedro__msg--bot  { justify-content: flex-start; }

.pedro__bolha {
  max-width: 88%;
  padding: .55rem .8rem;
  border-radius: var(--radius, 12px);
  font-size: .88rem;
  word-wrap: break-word;
  overflow-wrap: anywhere;           /* link longo não estoura o painel */
}

/* O balão de quem escreve é AZUL CLARO, e não o navy da marca.
   Com o navy, o balão do usuário tinha exatamente a mesma cor do cabeçalho e
   do botão de enviar, e o painel passava a ter duas massas escuras idênticas
   com papéis opostos: uma é moldura (diz quem é o assistente), a outra é
   conteúdo (é a fala da pessoa). Ler as duas como a mesma coisa é o que
   confundia. Agora o navy aparece uma vez só, no cabeçalho, e tudo o que for
   conversa é claro: a distinção entre as duas falas vem do PREENCHIMENTO
   (azul de um lado, branco com borda do outro) somado ao alinhamento e ao
   canto chanfrado, que é sinal de sobra sem precisar de um bloco escuro.

   Sem borda de propósito: o azul já se destaca do fundo do corpo (#F5F8FB) e
   uma borda só acrescentaria um contorno a mais numa área de 380px. */
.pedro__msg--user .pedro__bolha {
  background: var(--pedro-eu);
  color: var(--pedro-texto);
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;             /* preserva as quebras do Shift+Enter */
}

.pedro__msg--bot .pedro__bolha {
  background: var(--pedro-fundo);
  color: var(--pedro-texto);
  border: 1px solid var(--pedro-borda);
  border-bottom-left-radius: 4px;
}

.pedro__bolha p  { margin: 0 0 .5rem; }
.pedro__bolha p:last-child { margin-bottom: 0; }
.pedro__bolha ul,
.pedro__bolha ol { margin: 0 0 .5rem; padding-left: 1.15rem; }
.pedro__bolha ul:last-child,
.pedro__bolha ol:last-child { margin-bottom: 0; }
.pedro__bolha li { margin-bottom: .2rem; }
.pedro__bolha strong { font-weight: 700; }
.pedro__bolha a { color: var(--c-primary-light, #1a4068); text-decoration: underline; }
/* O link do balão do usuário NÃO tem mais regra própria: ele era branco porque
   o fundo era navy. Sobre o azul claro, o mesmo azul de link do balão do Pedro
   dá 8,6:1 e os dois lados da conversa passam a tratar link do mesmo jeito. */

/* Três pontinhos do "escrevendo". Anima opacidade e posição, que são as duas
   propriedades que o navegador compõe sem repintar o painel inteiro. */
.pedro__bolha--digitando { padding: .7rem .8rem; }
.pedro__bolha--digitando span { display: inline-flex; gap: 4px; }
.pedro__bolha--digitando i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pedro-suave);
  animation: pedro-pulsa 1.2s infinite ease-in-out;
}
.pedro__bolha--digitando i:nth-child(2) { animation-delay: .18s; }
.pedro__bolha--digitando i:nth-child(3) { animation-delay: .36s; }

@keyframes pedro-pulsa {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .pedro__bolha--digitando i { animation: none; opacity: .55; }
}

/* ---------- Erro ---------- */

.pedro__erro[hidden] { display: none; }
.pedro__erro {
  margin: 0;
  padding: .55rem var(--sp-4, 1rem);
  background: #fdf1f1;
  color: var(--c-danger, #c53030);
  border-top: 1px solid #f6dada;
  font-size: .8rem;
  flex-shrink: 0;
}
.pedro__erro a { color: inherit; }

/* ---------- Confirmação da nova conversa ---------- */

/* Mesma faixa da mensagem de erro (mesmo lugar, mesma altura, mesma borda
   superior), em tom neutro: aqui não houve falha nenhuma, só uma pergunta. */
.pedro__confirma[hidden] { display: none; }
.pedro__confirma {
  padding: .6rem var(--sp-4, 1rem);
  background: var(--pedro-alt);
  border-top: 1px solid var(--pedro-borda);
  flex-shrink: 0;
}
.pedro__confirma-texto {
  margin: 0 0 .5rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--pedro-texto);
}
.pedro__confirma-acoes { display: flex; gap: .5rem; }
.pedro__confirma-btn {
  flex: 1 1 0;
  padding: .4rem .6rem;
  font: inherit;
  font-size: .8rem;
  line-height: 1.2;
  border: 1px solid var(--pedro-borda);
  border-radius: var(--radius-sm, 8px);
  background: var(--pedro-fundo);
  color: inherit;
  cursor: pointer;
}
.pedro__confirma-btn:hover { border-color: var(--pedro-primary); }
.pedro__confirma-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pedro-accent);
}
.pedro__confirma-btn--sim {
  background: var(--pedro-primary);
  border-color: var(--pedro-primary);
  color: #fff;
}

/* ---------- Caixa de digitação ---------- */

.pedro__composer {
  display: flex;
  /* O botão redondo acompanha a BASE da caixa, não o centro dela: numa caixa
     de três linhas, centralizado, ele flutuaria no meio do texto. */
  align-items: flex-end;
  gap: var(--sp-2, .5rem);
  /* Embaixo respira mais que em cima: esta é agora a última peça do painel, e
     herdou a margem inferior que a linha de aviso removida dava. */
  padding: var(--sp-3, .75rem) var(--sp-4, 1rem) var(--sp-4, 1rem);
  border-top: 1px solid var(--pedro-borda);
  background: var(--pedro-fundo);
  flex-shrink: 0;
}

.pedro__rotulo,
.pedro__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pedro__input {
  flex: 1 1 auto;
  /* Três linhas de altura em repouso, e não uma. O espaço veio da linha de
     aviso que existia aqui embaixo, e foi para cá por um motivo: a pergunta
     típica do suporte tem duas ou três linhas ("preenchi o faturamento e a
     folha, mas o fator R não apareceu, o que eu esqueci?"), e uma caixa de uma
     linha faz o texto rolar dentro de si mesma enquanto a pessoa escreve, que
     é quando ela perde o fio e encurta a pergunta. Pergunta encurtada vira
     resposta genérica.
     O `height` inline que o JavaScript escreve a cada tecla fica ABAIXO deste
     min-height enquanto o texto é curto, então a caixa não encolhe: ela só
     começa a crescer quando passa das três linhas. */
  min-height: 76px;
  max-height: 160px;
  padding: .55rem .7rem;
  border: 1px solid var(--pedro-borda);
  border-radius: var(--radius, 12px);
  background: var(--pedro-alt);
  color: var(--pedro-texto);
  /* 16px é o mínimo que o iOS aceita sem dar zoom no campo ao focar, e o zoom
     desalinharia o painel inteiro. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}
.pedro__input:focus {
  outline: none;
  border-color: var(--c-primary-light, #1a4068);
  background: #fff;
}
.pedro__input:disabled { opacity: .65; cursor: not-allowed; }

.pedro__enviar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pedro-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.pedro__enviar:hover:not(:disabled) { background: var(--c-primary-light, #1a4068); }
.pedro__enviar:focus-visible { outline: 3px solid var(--pedro-accent); outline-offset: 2px; }
.pedro__enviar:disabled { opacity: .45; cursor: not-allowed; }
.pedro__enviar svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Estados sem chat (visitante / indisponível) ---------- */

.pedro__gate { padding: var(--sp-5, 1.25rem) var(--sp-4, 1rem); text-align: center; }
.pedro__gate-titulo {
  margin: 0 0 var(--sp-2, .5rem);
  font-size: 1rem; font-weight: 700;
  color: var(--pedro-texto);
}
.pedro__gate-texto {
  margin: 0 0 var(--sp-4, 1rem);
  font-size: .86rem;
  color: var(--pedro-suave);
}
.pedro__gate-acoes { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.pedro__gate-acoes .btn { width: 100%; justify-content: center; }
.pedro__gate-nota {
  margin: var(--sp-4, 1rem) 0 0;
  font-size: .78rem;
  color: var(--c-text-subtle, #8494A6);
}

/* ---------- Mobile ---------- */
/* No celular o painel vira uma folha que ocupa a tela quase inteira. Ancorá-lo
   ao botão, como no desktop, deixaria 340px de conversa sobrando num aparelho
   de 360px de largura, com o teclado cobrindo metade disso. */

@media (max-width: 560px) {
  .pedro { right: .75rem; bottom: .75rem; --pedro-fab-h: 44px; }

  /* A pílula ENCOLHE, mas não perde o rótulo. Numa tela de 360px ela fica com
     ~155px, pouco mais de 40% da largura, e é a única coisa desenhada sobre o
     conteúdo. Trocá-la por um ícone sozinho economizaria esses pixels e
     custaria o que o botão tem de melhor: dizer para que serve antes do toque,
     justamente onde não existe passar o mouse para descobrir. */
  .pedro__fab { padding: 0 .9rem 0 .8rem; gap: .45rem; }
  .pedro__fab-icone svg { width: 18px; height: 18px; }
  .pedro__fab-texto { font-size: .8125rem; }

  .pedro__painel {
    position: fixed;
    right: .5rem;
    left: .5rem;
    bottom: .5rem;
    width: auto;
    /* dvh acompanha a barra de endereço do navegador móvel; o vh acima é o
       fallback para quem não tem dvh. */
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: var(--radius-lg, 18px);
  }

  /* Com o painel aberto, o botão sai da frente: no celular ele ficaria por
     cima da própria conversa. */
  .pedro.is-aberto .pedro__fab { opacity: 0; pointer-events: none; }

  .pedro__corpo { min-height: 0; }
  .pedro__bolha { max-width: 92%; font-size: .9rem; }
}

/* Telas muito baixas (celular deitado, ou teclado virtual aberto ocupando
   metade da altura): o painel encolhe em vez de sair da tela por cima.
   A caixa de digitação volta a UMA linha aqui: com 460px de altura, três
   linhas de campo deixariam a conversa sem espaço nenhum, e nessa situação
   ver o que o Pedro respondeu vale mais que escrever com folga. Ela continua
   crescendo com o texto, só parte do menor tamanho. */
@media (max-height: 460px) {
  /* O max-height NÃO é afrouxado aqui, e isso é o conserto de um erro:
     soltá-lo para calc(100vh - 1rem) fazia o painel ficar mais alto do que o
     espaço que existe acima do botão flutuante (que ocupa 56px da base), e o
     topo dele, com o nome do Pedro e o X de fechar, saía pela borda de cima da
     tela. Em celular deitado o painel ficava sem como ser fechado.
     O teto base, calc(100vh - 7rem), já desconta esse espaço. */
  .pedro__corpo { min-height: 0; }
  .pedro__input { min-height: 40px; max-height: 84px; }
}

@media print {
  .pedro { display: none !important; }
}