:root {
  --bg: #0b141a;
  --topbar: #202c33;
  --bot: #202c33;
  --user: #005c4b;
  --text: #e9edef;
  --muted: #8696a0;
  --accent: #00a884;
  --accent-hover: #06cf9c;
  --danger: #f15c6d;
  --tick: #53bdeb;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg);
}

/* ---------- cabecalho ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 6px;
  background: var(--topbar);
  flex-shrink: 0;
  color: #aebac1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.topbar .voltar { flex-shrink: 0; margin-right: -4px; color: #aebac1; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.topbar-info { flex: 1; min-width: 0; }
.topbar-nome { font-weight: 500; font-size: 16.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-status { font-size: 13px; color: var(--muted); min-height: 17px; }
.topbar-status.digitando { color: var(--accent); }
.topbar-icones { display: flex; align-items: center; gap: 22px; }

/* ---------- conversa com papel de parede do WhatsApp ---------- */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px 9px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none' stroke='%238696a0' stroke-opacity='.11' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='30' r='8'/%3E%3Cpath d='M98 18l4.5 9.5 10.5 1.2-7.8 7.2 2.2 10.4-9.4-5.3-9.4 5.3 2.2-10.4-7.8-7.2 10.5-1.2z'/%3E%3Cpath d='M156 30c-9-10 6-19 13-7 7-12 22-3 13 7l-13 14z'/%3E%3Crect x='20' y='88' width='32' height='21' rx='7'/%3E%3Cpath d='M30 109l-5 10 12-10'/%3E%3Cpath d='M84 100q9-11 18 0t18 0'/%3E%3Cpath d='M154 84l11 11-11 11-11-11z'/%3E%3Ccircle cx='34' cy='160' r='3.5'/%3E%3Cpath d='M98 148v20M88 158h20'/%3E%3Cpath d='M150 160q6-12 12 0t12 0'/%3E%3Cpath d='M64 52l6 6M70 52l-6 6'/%3E%3Cpath d='M126 128a6 6 0 1 0 0 .1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  scroll-behavior: smooth;
}

.data-chip {
  align-self: center;
  background: #182229;
  color: #8696a0;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 8px;
  margin: 4px 0 8px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);
}
.aviso-cripto {
  align-self: center;
  max-width: 88%;
  text-align: center;
  background: #182229;
  color: #ffd279;
  font-size: 12.5px;
  line-height: 1.35;
  padding: 7px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);
}

/* ---------- baloes ---------- */
.msg {
  position: relative;
  max-width: 84%;
  padding: 6px 8px 5px 9px;
  border-radius: var(--radius);
  font-size: 14.8px;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.35);
  animation: entrar 0.16s ease-out;
}
.msg.bot { align-self: flex-start; background: var(--bot); }
.msg.user { align-self: flex-end; background: var(--user); }

/* "rabinho" so na primeira mensagem de cada sequencia */
.msg.cauda { margin-top: 6px; }
.msg.cauda.bot { border-top-left-radius: 0; }
.msg.cauda.user { border-top-right-radius: 0; }
.msg.cauda.bot::before,
.msg.cauda.user::before {
  content: '';
  position: absolute;
  top: 0;
  width: 9px;
  height: 13px;
}
.msg.cauda.bot::before {
  left: -8px;
  background: var(--bot);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.msg.cauda.user::before {
  right: -8px;
  background: var(--user);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.msg .texto { white-space: pre-wrap; }
/* espaco reservado pro horario nao cobrir o texto */
.msg .texto::after { content: ''; display: inline-block; width: 62px; }
.msg.bot .texto::after { width: 44px; }

/* horario fixo no canto inferior direito, como no WhatsApp */
.msg .hora {
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 11px;
  color: rgba(233, 237, 239, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.msg > .pix-card, .msg > .links { margin-bottom: 16px; }
.msg .tick { width: 17px; height: 11px; color: rgba(233, 237, 239, 0.6); transition: color 0.3s; }
.msg .tick.lido { color: var(--tick); }

.msg s { color: var(--muted); }

.msg.midia { padding: 3px; }
.msg.midia .hora { position: static; display: flex; justify-content: flex-end; margin: 3px 4px 1px; }
.msg video, .msg img.midia {
  display: block;
  width: 100%;
  max-width: 300px;
  border-radius: 6px;
  background: #000;
}

.msg img.zoomavel { cursor: zoom-in; height: auto; max-width: 100%; }

.zoom {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  cursor: zoom-out;
}
.zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.zoom button {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.digitando-bolha {
  align-self: flex-start;
  background: var(--bot);
  border-radius: var(--radius);
  border-top-left-radius: 0;
  padding: 11px 13px;
  display: flex;
  gap: 4px;
  margin-top: 6px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.35);
}
.digitando-bolha span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: pulo 1.1s infinite ease-in-out;
}
.digitando-bolha span:nth-child(2) { animation-delay: 0.15s; }
.digitando-bolha span:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Pix ---------- */
.pix-card { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 240px; }
.pix-card .qr { background: #fff; border-radius: 10px; padding: 8px; align-self: center; }
.pix-card .qr img { display: block; width: 190px; height: 190px; image-rendering: pixelated; }
.pix-card .codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted);
  background: #111b21;
  border-radius: 8px;
  padding: 8px;
  /* uma linha so, cortada: o codigo inteiro nao precisa aparecer (o botao copia tudo) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all; /* tocar e segurar seleciona o codigo completo, mesmo cortado na tela */
}
.pix-card .contador { text-align: center; font-size: 13px; color: var(--muted); }

/* Botao de copiar: o elemento mais importante da tela de pagamento no celular */
.btn.grande { font-size: 17px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(0, 168, 132, 0.35); }

/* QR Code recolhido: no celular ninguem escaneia a propria tela; serve para pagar de outro aparelho */
.qr-caixa { background: #111b21; border-radius: 10px; }
.qr-caixa summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
  list-style: none;
  text-align: center;
}
.qr-caixa summary::-webkit-details-marker { display: none; }
.qr-caixa summary::after { content: ' ▾'; }
.qr-caixa[open] summary::after { content: ' ▴'; }
.qr-caixa .qr { margin: 0 auto 12px; width: fit-content; }
.qr-caixa .qr img { width: 160px; height: 160px; }
.pix-card .contador b { color: var(--text); }

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background 0.15s, transform 0.05s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }
.btn.secundario { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.secundario:hover { background: rgba(0, 168, 132, 0.12); }
.btn.copiado { background: #128c7e; }
.btn:disabled { opacity: 0.5; cursor: default; }

.links { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }

/* ---------- barra de mensagem (rodape) ---------- */
.composer {
  flex-shrink: 0;
  background: transparent;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
.composer .barra { display: flex; align-items: center; gap: 6px; }
.composer .barra[hidden] { display: none; }
.pilula {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #2a3942;
  color: #8696a0;
  border-radius: 999px;
  padding: 11px 16px;
}
.pilula .ph { flex: 1; font-size: 16px; }
.mic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acoes { padding: 2px 0 8px; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }

.campo { display: flex; align-items: center; gap: 6px; }
.campo input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* 16px evita o zoom automatico do iOS */
  color: var(--text);
  background: #2a3942;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 12px 16px;
  outline: none;
}
.campo input:focus { border-color: var(--accent); }
.campo input::placeholder { color: var(--muted); }
.campo .enviar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.campo .enviar:hover { background: var(--accent-hover); }
.erro-campo { color: var(--danger); font-size: 13px; margin: 6px 6px 0; min-height: 16px; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulo {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat { scroll-behavior: auto; }
  .msg { animation: none; }
  .digitando-bolha span { animation: none; }
}