/* Visual do atendimento. A cor da marca vem de fluxo.js (aparencia.corPrincipal). */

:root {
  /* Calculadas a partir da cor principal pelo motor.js */
  --cor-principal: #0a7c6e;
  --usuario-claro: #d8eae8;
  --usuario-escuro: #0a554e;
  --destaque-claro: #0a7c6e;
  --destaque-escuro: #78b7af;

  --fundo-pagina: #d8d2ca;
  --fundo-chat: #efe7de;
  --balao-bot: #ffffff;
  --balao-usuario: var(--usuario-claro);
  --texto: #111b21;
  --texto-suave: #667781;
  --cabecalho: var(--cor-principal);
  --cabecalho-texto: var(--cabecalho-texto-claro, #ffffff);
  --destaque: var(--destaque-claro);
  --lido: #2c9be0;
  --barra: #f0f2f5;
  --campo: #ffffff;
  --chip: #ffffff;
  --chip-texto: #54656f;
  --aviso: #fcf1c4;
  --aviso-texto: #54656f;
  --padrao: 0.07;
  --sombra: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not(.sem-escuro) {
    --fundo-pagina: #070c0f;
    --fundo-chat: #0b141a;
    --balao-bot: #202c33;
    --balao-usuario: var(--usuario-escuro);
    --texto: #e9edef;
    --texto-suave: #8696a0;
    --cabecalho: #202c33;
    --cabecalho-texto: #e9edef;
    --destaque: var(--destaque-escuro);
    --lido: #5cbcf0;
    --barra: #202c33;
    --campo: #2a3942;
    --chip: #182229;
    --chip-texto: #8696a0;
    --aviso: #182229;
    --aviso-texto: #e3c46f;
    --padrao: 0.035;
    --sombra: none;
    color-scheme: dark;
  }

  :root:not(.sem-escuro) .area-chat::before { filter: invert(1); }
  :root:not(.sem-escuro) .usuario .meta { color: rgba(233, 237, 239, 0.65); }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--fundo-pagina);
  color: var(--texto);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

/* ---------- Estrutura ---------- */

/* A conversa ocupa a janela inteira, no celular e no computador */
.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--fundo-chat);
}

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

.cabecalho {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 6px 10px 12px;
  background: var(--cabecalho);
  color: var(--cabecalho-texto);
}

.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22) center / cover no-repeat;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.identidade {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.identidade strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#status {
  min-height: 18px;
  font-size: 13px;
  opacity: 0.85;
}

.botao-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
}

.botao-icone:hover { background: rgba(255, 255, 255, 0.12); }
.botao-icone:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.botao-icone svg { width: 22px; height: 22px; }

/* ---------- Área da conversa ---------- */

.area-chat {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--fundo-chat);
}

.area-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 12h22a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6H24l-7 6v-6h-3a6 6 0 0 1-6-6V18a6 6 0 0 1 6-6z'/%3E%3Cpath d='M92 28c-2.5-5-10-3.5-10 2 0 5 10 10 10 10s10-5 10-10c0-5.5-7.5-7-10-2z'/%3E%3Cpath d='M40 74v12M34 80h12'/%3E%3Ccircle cx='100' cy='90' r='7'/%3E%3Cpath d='M8 104q8-8 16 0t16 0'/%3E%3Cpath d='M66 104l6 6 10-12'/%3E%3Ccircle cx='64' cy='50' r='2'/%3E%3Ccircle cx='18' cy='64' r='2'/%3E%3Cpath d='M84 62l4-8 4 8z'/%3E%3C/svg%3E");
  background-size: 160px;
  opacity: var(--padrao);
  pointer-events: none;
}

.mensagens {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px clamp(12px, 4%, 22px) 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

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

.linha {
  display: flex;
  animation: entrar 0.18s ease-out;
}

.linha.bot { justify-content: flex-start; }
.linha.usuario { justify-content: flex-end; }
.linha.primeira { margin-top: 8px; }

.balao {
  position: relative;
  max-width: 85%;
  padding: 6px 8px 8px 9px;
  border-radius: 8px;
  background: var(--balao-bot);
  box-shadow: var(--sombra);
  overflow-wrap: anywhere;
}

.usuario .balao { background: var(--balao-usuario); }

/* "Rabinho" no primeiro balão de cada sequência */
.bot.primeira .balao { border-top-left-radius: 0; }
.usuario.primeira .balao { border-top-right-radius: 0; }

.primeira .balao::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
  background: inherit;
}

.bot.primeira .balao::before { left: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.usuario.primeira .balao::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Espaço no fim do texto para o horário não ficar por cima */
.texto::after {
  content: "";
  display: inline-block;
  width: 44px;
}

.usuario .texto::after { width: 64px; }

.meta {
  position: absolute;
  right: 8px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--texto-suave);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.tiques { width: 16px; height: 11px; }
.tiques.lido { color: var(--lido); }

/* "digitando…" */
.balao.digitando {
  display: flex;
  gap: 4px;
  padding: 13px 14px;
}

.digitando i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-suave);
  animation: pulo 1.2s infinite ease-in-out;
}

.digitando i:nth-child(2) { animation-delay: 0.15s; }
.digitando i:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Botões de resposta ---------- */

.opcoes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: min(85%, 340px);
  margin-top: 1px;
}

.opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--balao-bot);
  box-shadow: var(--sombra);
  color: var(--destaque);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.opcao:hover:not(:disabled) { filter: brightness(0.97); }
.opcao:active:not(:disabled) { transform: scale(0.985); }
.opcao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
.opcao:disabled { cursor: default; opacity: 0.45; }
.opcao.escolhida { opacity: 1; }
.opcao svg { flex-shrink: 0; width: 16px; height: 16px; }

/* ---------- Avisos centralizados ---------- */

.nota {
  align-self: center;
  max-width: 90%;
  margin: 10px 0 4px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--chip);
  box-shadow: var(--sombra);
  color: var(--chip-texto);
  font-size: 12.5px;
  text-align: center;
  animation: entrar 0.18s ease-out;
}

.nota.aviso {
  background: var(--aviso);
  color: var(--aviso-texto);
}

.nota button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--destaque);
  font-weight: 600;
  cursor: pointer;
}

.nota button:hover { text-decoration: underline; }

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

.barra {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  background: var(--barra);
}

#campo {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 21px;
  outline: none;
  background: var(--campo);
  color: var(--texto);
  font: inherit;
  font-size: 16px; /* 16px evita o zoom automático do iPhone */
}

#campo::placeholder { color: var(--texto-suave); }
#campo:focus-visible { box-shadow: 0 0 0 1.5px var(--destaque); }
#campo:disabled { opacity: 0.75; }

.botao-enviar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--cor-principal);
  color: var(--cabecalho-texto-claro, #ffffff);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.botao-enviar:active:not(:disabled) { transform: scale(0.94); }
.botao-enviar:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.botao-enviar:disabled { cursor: default; opacity: 0.45; }
.botao-enviar svg { width: 20px; height: 20px; margin-left: 2px; }

noscript {
  position: fixed;
  inset: auto 0 0;
  padding: 12px;
  background: #fcf1c4;
  color: #111b21;
  text-align: center;
}

/* ---------- Animações ---------- */

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulo {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .linha, .nota { animation: none; }
  .digitando i { animation-duration: 2.4s; }
  .mensagens { scroll-behavior: auto; }
}

/* ---------- Imagens, arquivos e galerias ---------- */

[hidden] { display: none !important; }

.balao.com-imagem { padding: 3px; }

.com-imagem .foto {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(127, 127, 127, 0.12);
}

.com-imagem .texto {
  display: block;
  padding: 5px 5px 4px 6px;
}

.com-imagem.sem-legenda .meta {
  right: 9px;
  bottom: 8px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.foto-falhou {
  display: block;
  width: 240px;
  max-width: 100%;
  padding: 36px 14px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.15);
  color: var(--texto-suave);
  font-size: 13px;
  text-align: center;
}

.com-imagem.sem-legenda .foto-falhou + .meta {
  color: var(--texto-suave);
  text-shadow: none;
}

.documento {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 230px;
  vertical-align: middle;
}

.documento svg { flex-shrink: 0; width: 32px; height: 32px; color: var(--destaque); }
.documento > span { display: flex; flex-direction: column; min-width: 0; }
.documento strong { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.documento small { color: var(--texto-suave); font-size: 12px; }

.opcoes.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(92%, 380px);
}

.opcao.cartao {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.cartao img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(127, 127, 127, 0.12);
}

.cartao .rotulo { padding: 8px 6px 9px; }

.botao-anexar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 42px;
  margin-right: -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--destaque);
  cursor: pointer;
  animation: entrar 0.18s ease-out;
}

.botao-anexar:hover { background: rgba(127, 127, 127, 0.12); }
.botao-anexar:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
.botao-anexar svg { width: 24px; height: 24px; transform: rotate(45deg); }

/* ---------- Telas largas (computador): como no WhatsApp Web ---------- */

@media (min-width: 900px) {
  .cabecalho { padding: 10px 16px; }
  .mensagens { padding: 14px clamp(24px, 6%, 96px) 20px; }
  .balao { max-width: 65%; }
  .opcoes { width: min(65%, 380px); }

  .opcoes.galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(65%, 560px);
  }

  .barra { padding: 10px 16px; }
}