/* Poliana — interface do cliente convidado.
 *
 * Substitui o tema do Converse.js, que não servia para o que esta tela precisa
 * ser. Motivo medido, não estético: no CSS distribuído pelo Converse 14.0.0 a
 * variante "minha mensagem" (.chat-msg__content--me) tem DUAS regras, e as duas
 * mexem só em `color` — não existe align-self, margin-left:auto nem
 * justify-content:flex-end em nenhuma regra de mensagem. O Converse desenha uma
 * coluna única alinhada à esquerda e diferencia o autor pela cor do texto.
 * Bolha esquerda/direita não é um tema por cima dele; é outro desenho.
 *
 * Aqui a folha inteira tem ~9 KB, contra os 536 KB que vinham no dist.
 */

/* ---------------------------------------------------------------------------
 * Tokens. A paleta mora AQUI e só aqui — trocar a identidade é editar este
 * bloco, nada mais.
 *
 * Os dois neutros vêm do único precedente visual do repo (test/widget-test.html);
 * o acento foi escolhido na mesma família de matiz. Os contrastes foram MEDIDOS
 * (02/09/2026), não estimados:
 *   #1f5eb8 sobre branco ............ 6.27:1   (WCAG AA texto normal: >= 4.5)
 *   #1f2430 sobre #f2f4f7 ........... 14.08:1
 *   #1f2430 sobre branco ............ 15.52:1
 *   #5b6472 sobre branco ............  5.98:1  (metadado)
 *   #d8e4f7 sobre #1f5eb8 ...........  4.88:1  (metadado na bolha enviada)
 * ------------------------------------------------------------------------- */
:root {
  --page:        #f2f4f7;
  --surface:     #ffffff;
  --ink:         #1f2430;
  --ink-soft:    #5b6472;
  --accent:      #1f5eb8;
  --on-accent:   #ffffff;
  --on-accent-soft: #d8e4f7;
  --line:        #e3e7ee;

  /* Escala de espaçamento em múltiplos de 4px (grade 4dp do Material 3). */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Raio 16px = token "large" do Material 3. O canto do lado de quem fala é
   * menor (4px), que é o que dá a leitura de "rabinho" sem desenhar um. */
  --radius:      16px;
  --radius-tail: 4px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Altura da barra de composição, lida pelo JS quando o teclado virtual abre. */
  --composer-h: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;   /* fallback para navegador sem unidade dinâmica */
  height: 100dvh;  /* 100vh no mobile mede o viewport GRANDE (barra de endereço
                    * recolhida) e vaza da tela quando ela está expandida;
                    * 100dvh acompanha. Chrome só a partir da 108.
                    * https://web.dev/blog/viewport-units */
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------------
 * Esqueleto: cabeçalho fixo, lista que rola, composição colada embaixo.
 * ------------------------------------------------------------------------- */
/* Flex e não grid: as faixas de cima (grupos, avisos) aparecem e somem, e com
 * grid o `hidden` de uma delas faria as outras escorregarem de trilha — a lista
 * herdaria uma trilha `auto` e o layout quebraria. Em flex, o que some some. */
.app {
  position: relative;   /* âncora do botão .novas, que é absolute */
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 820px;      /* em desktop a conversa não se esparrama pela tela */
  margin-inline: auto;
  background: var(--page);
}

/* ---- cabeçalho ---- */
.topo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  /* O notch e a ilha dinâmica do iPhone comem o topo em modo standalone (PWA
   * instalada), onde não há barra do navegador protegendo.
   * https://developer.mozilla.org/en-US/docs/Web/CSS/env */
  padding-top: calc(var(--s3) + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topo__marca {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px;
}
.topo__texto { min-width: 0; }         /* deixa o title truncar em vez de empurrar */
.topo__nome {
  margin: 0;
  font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo__estado {
  margin: 0;
  font-size: 13px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo__estado[data-estado="ligando"]  { color: var(--ink-soft); }
.topo__estado[data-estado="caiu"]     { color: #b42318; }

/* ---- barra de grupos ---- */
.grupos {
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  overflow-x: auto;              /* com muitos grupos, rola em vez de quebrar */
  scrollbar-width: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.grupos[hidden] { display: none; }
.grupos::-webkit-scrollbar { display: none; }

.grupo {
  flex: none;
  display: flex; align-items: center; gap: var(--s1);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--page); color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.grupo--ativo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* O contador de não lidas do grupo que está em segundo plano. */
.grupo__pinta {
  display: grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700;
}
.grupo--ativo .grupo__pinta { background: var(--on-accent); color: var(--accent); }
.grupo__pinta[hidden] { display: none; }

/* ---- listas de mensagens: uma por grupo, só a ativa visível ---- */
.listas {
  flex: 1;
  min-height: 0;        /* sem isto o filho que rola estoura o flex */
  display: flex;
}

.lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;   /* não arrasta a página inteira no iOS */
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s3) var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.lista[hidden] { display: none; }

/* ---- separador de data ---- */
.dia {
  align-self: center;
  margin: var(--s4) 0 var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px; font-weight: 500;
}

/* ---- mensagem ---- */
.msg {
  --lado: flex-start;
  align-self: var(--lado);
  max-width: min(85%, 480px);   /* no celular quase toda a largura; no desktop,
                                 * a linha para de ficar longa demais para ler */
  padding: 10px var(--s3);
  border-radius: var(--radius);
  border-bottom-left-radius: var(--radius-tail);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-top: var(--s3);        /* entre autores diferentes */
  word-wrap: break-word;
  overflow-wrap: anywhere;      /* URL comprida não estoura a bolha */
}

/* O ponto do pedido: enviada à DIREITA, recebida à esquerda. */
.msg--minha {
  --lado: flex-end;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius-tail);
}

/* Mensagens seguidas da mesma pessoa viram um bloco: cola-se a margem e some o
 * nome repetido. É o que impede a tela de virar uma lista de etiquetas. */
.msg--seguida {
  margin-top: 2px;
  border-top-left-radius: var(--radius-tail);
}
.msg--minha.msg--seguida {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius-tail);
}
.msg--seguida .msg__autor { display: none; }

.msg__autor {
  margin: 0 0 2px;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
}
.msg--minha .msg__autor { color: var(--on-accent-soft); }

.msg__texto { margin: 0; white-space: pre-wrap; }

.msg__hora {
  display: block;
  margin-top: 2px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  text-align: right;
}
.msg--minha .msg__hora { color: var(--on-accent-soft); }

.msg--enviando { opacity: .6; }

/* ---- aviso do sistema (entrou, saiu, sala encerrada) ---- */
.aviso {
  align-self: center;
  max-width: 90%;
  margin: var(--s2) 0;
  color: var(--ink-soft);
  font-size: 13px; text-align: center;
}

/* ---- "digitando" ---- */
.digitando {
  align-self: flex-start;
  margin-top: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; gap: var(--s1);
}
.digitando span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-soft);
  animation: pulso 1.2s infinite ease-in-out;
}
.digitando span:nth-child(2) { animation-delay: .15s; }
.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pulso { 0%,60%,100% { opacity:.3; transform:translateY(0) }
                   30% { opacity:1; transform:translateY(-3px) } }

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  .digitando span { animation: none; opacity: .5; }
  * { scroll-behavior: auto !important; }
}

/* ---- botão "novas mensagens" ---- */
/* Existe porque a lista NÃO rola sozinha quando o cliente subiu para ler o
 * histórico: puxar a tela dele no meio da leitura é o defeito clássico. */
.novas {
  position: absolute;
  left: 50%;
  bottom: calc(var(--composer-h) + var(--s4));
  transform: translateX(-50%);
  z-index: 5;
  padding: var(--s2) var(--s4);
  min-height: 44px;
  border: none; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 12px rgba(31,36,48,.25);
  cursor: pointer;
}
.novas[hidden] { display: none; }

/* ---- composição ---- */
.composicao {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  /* O home indicator do iPhone fica por cima de um rodapé colado embaixo. */
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.composicao__campo {
  flex: 1;
  min-width: 0;
  max-height: 120px;         /* cresce até 5 linhas, depois rola por dentro */
  padding: 10px var(--s3);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 16px;           /* < 16px faz o iOS dar zoom sozinho ao focar */
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}
.composicao__campo:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.composicao__enviar {
  flex: none;
  /* 44x44 é o alvo de toque mínimo recomendado (WCAG 2.5.8 / HIG). */
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  cursor: pointer;
}
.composicao__enviar:disabled { opacity: .4; cursor: default; }
.composicao__enviar svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------------------------------------------------------------------------
 * Telas de estado: entrando, erro, pedido de instalação.
 * ------------------------------------------------------------------------- */
.tela {
  position: fixed; inset: 0;
  z-index: 10;
  display: grid; place-items: center;
  padding: var(--s5);
  padding-top: calc(var(--s5) + env(safe-area-inset-top));
  padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  background: var(--page);
  text-align: center;
}
.tela[hidden] { display: none; }
.tela__caixa { max-width: 380px; }
.tela__titulo { margin: 0 0 var(--s2); font-size: 20px; font-weight: 600; }
.tela__texto  { margin: 0 0 var(--s4); color: var(--ink-soft); }
.tela__erro   { color: #b42318; }

.botao {
  min-height: 44px;
  padding: 0 var(--s5);
  border: none; border-radius: 22px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.botao--secundario {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}

/* Passos de instalação: numerados, porque no iOS não existe prompt de
 * instalação programático — o usuário TEM de fazer à mão. */
.passos { margin: 0 0 var(--s4); padding-left: var(--s5); text-align: left; }
.passos li { margin-bottom: var(--s2); }

/* Acessibilidade: o leitor de tela precisa do rótulo, a tela não. */
.oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
 * Barra de avisos
 *
 * Fica ENTRE o cabeçalho e a lista, e não flutuando por cima das mensagens:
 * cobrir a conversa para pedir permissão é o padrão que as pessoas aprenderam
 * a fechar sem ler.
 * ------------------------------------------------------------------------- */
.barra {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: #eef3fb;
  border-bottom: 1px solid var(--line);
}
.barra[hidden] { display: none; }
.barra__texto { flex: 1; margin: 0; font-size: 14px; }
.barra__botao {
  flex: none;
  min-height: 36px;
  padding: 0 var(--s3);
  border: none; border-radius: 18px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.barra__fechar {
  flex: none;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Câmera do login por QR
 * ------------------------------------------------------------------------- */
.camera {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto var(--s4);
  border-radius: var(--radius);
  background: #000;
  object-fit: cover;
}