/* Ajustes por cima do Bootstrap. Tema claro fixo: a página é lida por
   clientes externos, e "escuro por padrão do sistema" ficava com cara de
   terminal em vez de documentação. */

body { -webkit-font-smoothing: antialiased; }

.doc h1 { font-size: 1.9rem; margin-bottom: 1.5rem; padding-bottom: .5rem;
          border-bottom: 1px solid var(--bs-border-color); }
.doc h2 { font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: .9rem; }
.doc h3 { font-size: 1.1rem; margin-top: 1.8rem; margin-bottom: .7rem; }
.doc p, .doc li { line-height: 1.7; }

.doc table { width: 100%; margin: 1.2rem 0; font-size: .93rem;
             border-collapse: collapse; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--bs-border-color);
                   padding: .5rem .7rem; vertical-align: top; }
.doc th { background: var(--bs-tertiary-bg); font-weight: 600;
          white-space: nowrap; }

.doc pre { background: #1e2430; color: #e6edf3; padding: 1rem 1.1rem;
           border-radius: .5rem; overflow-x: auto; font-size: .87rem; }
.doc pre code { background: none; color: inherit; padding: 0; }
.doc :not(pre) > code { background: var(--bs-tertiary-bg);
                        color: var(--bs-emphasis-color); padding: .12em .38em;
                        border-radius: .25rem; font-size: .88em; }

.doc blockquote { border-left: 3px solid var(--bs-border-color);
                  padding-left: 1rem; color: var(--bs-secondary-color); }

.indice-lateral { position: sticky; top: 1.5rem; }

/* --- campo de senha com olhinho ------------------------------------------ */
/* O botão fica DENTRO do campo, à direita; o padding-right reserva o espaço
   para o texto digitado não passar por baixo do ícone. `tabindex=-1` no
   botão: o Tab vai da senha direto para o Entrar, e o olhinho é só mouse. */
.campo-senha { position: relative; }
.campo-senha .form-control { padding-right: 2.75rem; }

.olho {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: .3rem;
  line-height: 0;
  border-radius: .25rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.olho:hover,
.olho:focus-visible {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  outline: none;
}
.chave-gerada { font-family: var(--bs-font-monospace); font-size: .95rem;
                word-break: break-all; }

/* --- histórico de conversa (painel) -------------------------------------- */
/* Balões com a mesma leitura do WhatsApp: o que saiu daqui à direita, o que
   chegou à esquerda. Cor via variável do Bootstrap para o tema seguir junto. */
.conversa .card-body {
  /* Reserva para navegador sem flexbox de altura: a regra em
     `body.tela-cheia` acima substitui isto quando tudo funciona. */
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bs-tertiary-bg);
}

.balao {
  max-width: 80%;
  padding: .5rem .75rem;
  border-radius: .75rem;
  background: var(--bs-body-bg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.balao-meu {
  background: #d9fdd3;
}

.balao-dele {
  background: var(--bs-body-bg);
}

.balao .texto {
  white-space: pre-wrap;
  word-break: break-word;
}

.balao .rodape {
  font-size: .7rem;
  color: var(--bs-secondary-color);
  text-align: right;
  margin-top: .15rem;
}

.balao img,
.balao video {
  max-height: 320px;
}

/* Autor da fala dentro de grupo, como o WhatsApp mostra. */
.balao .autor {
  font-size: .78rem;
  font-weight: 600;
  color: #0a7c5a;
  margin-bottom: .1rem;
}

/* Reação grudada na mensagem, como o WhatsApp faz. */
.balao .reacoes {
  margin-top: .3rem;
  display: flex;
  gap: .15rem;
  flex-wrap: wrap;
}

.balao .reacao {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 0 .35rem;
  font-size: .95rem;
  line-height: 1.4;
}

/* Avatar da lista de conversas, redondo como no WhatsApp. */
.avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bs-secondary-bg);
}

.avatar-vazio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  letter-spacing: .02em;
}

/* A foto na lista é clicável: o cursor precisa dizer isso. */
.avatar-clicavel {
  cursor: zoom-in;
}

/* Foto de quem falou, dentro do balão do grupo. */
.avatar-fala {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bs-secondary-bg);
}

.autor-telefone {
  font-weight: 400;
  color: var(--bs-secondary-color);
}

/* --- a conversa ocupa a tela inteira --------------------------------------
   Igual ao app do WhatsApp: nada rola fora da área de mensagens. A primeira
   tentativa foi um cabeçalho `sticky` sobre a página rolando, e deu errado
   de dois jeitos — duas barras de rolagem na mesma tela, e o texto passando
   por baixo do cabeçalho, que parecia transparente.

   A causa do "transparente" era de empilhamento: os balões vivem dentro de
   um `.card` posicionado, e disputavam a pintura com o cabeçalho. Em vez de
   brigar com z-index, o desenho mudou: se a página não rola, nada passa por
   baixo de nada.

   A página vira uma coluna da altura da tela. Só o miolo rola. */
body.tela-cheia {
  height: 100vh;
  /* `dvh` porque no celular a barra do navegador some e volta, e `vh`
     congela na altura maior — o fim da conversa ficava escondido. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* `min-height: 0` em cada nível: sem isso um filho flex se recusa a encolher
   abaixo do próprio conteúdo, e a área de mensagens estoura a tela em vez de
   ganhar rolagem própria. */
body.tela-cheia > main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 0;
}

body.tela-cheia > footer {
  display: none;
}

/* O único filho que rola. A conversa usa o `.card-body` abaixo; a lista de
   conversas marca a caixa da lista com esta classe. */
body.tela-cheia .rolagem {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: .75rem;
}

body.tela-cheia .conversa {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

body.tela-cheia .conversa .card-body {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.conversa-topo .breadcrumb {
  margin-bottom: .5rem;
}

.conversa-rodape {
  margin: .5rem 0;
}

/* O player de áudio precisa de largura mínima: num balão sem texto o
   Chrome espreme os controles até sobrar só o menu de três pontinhos, e o
   áudio vira um botão misterioso. 260px é o que cabe play + linha do tempo. */
.audio-fala {
  width: 100%;
  min-width: 260px;
  max-width: 340px;
}

@media (max-width: 420px) {
  .audio-fala { min-width: 0; }
}

/* Marco de "não lidas", como a linha vermelha do WhatsApp. É onde a tela
   abre quando há pendência. */
.marco-nao-lidas {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0;
  color: var(--bs-danger);
  font-size: .78rem;
  font-weight: 600;
}

.marco-nao-lidas::before,
.marco-nao-lidas::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .4;
}

/* Aviso de criptografia de ponta a ponta, como o balão cinza centralizado
   que o WhatsApp mostra — usado para `secretEncryptedMessage` (voto de
   enquete e afins), que a Evolution entrega sem decifrar. */
.balao-sistema {
  max-width: 80%;
  padding: .4rem .9rem;
  border-radius: .75rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: .78rem;
  text-align: center;
}

/* Avisos de "salvo": fixos no rodape da janela, visiveis de qualquer
   ponto da pagina (no celular o formulario fica longe do topo). */
.avisos-fixos {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(40rem, calc(100% - 2rem));
  z-index: 1080;
}
.avisos-fixos .alert { margin-bottom: .5rem; }