:root {
  --navy: #0b1f3d;
  --brand: #1d4ed8;
  --ink: #0f172a;
  --muted: #596d85;
  --line: #e2e8f0;
  --fundo: #eef2f7;
  --balao-camila: #ffffff;
  --balao-pessoa: #dcfce7;
  --balao-pessoa-borda: #bbf7d0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
.app {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 48rem; margin: 0 auto;
  background: var(--fundo);
}
.topo {
  display: flex; align-items: center; gap: .75rem;
  padding: calc(.6rem + env(safe-area-inset-top)) .9rem .6rem;
  background: var(--navy); color: #fff;
}
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; flex: none; }
.quem { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.quem strong { font-size: 1rem; }
.quem span { font-size: .78rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca { display: inline-flex; padding: .25rem; border-radius: 8px; }
.marca img { display: block; border-radius: 6px; }
.conversa {
  flex: 1; overflow-y: auto; padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .4rem;
  background:
    radial-gradient(circle at 1px 1px, rgba(11, 31, 61, .06) 1px, transparent 0) 0 0 / 18px 18px;
}
.balao {
  max-width: 82%; padding: .55rem .75rem; border-radius: 14px;
  font-size: .97rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .06);
  animation: entrar .18s ease-out;
}
.balao.assistente { align-self: flex-start; background: var(--balao-camila); border-top-left-radius: 4px; }
.balao.usuario { align-self: flex-end; background: var(--balao-pessoa); border: 1px solid var(--balao-pessoa-borda); border-top-right-radius: 4px; }
.balao time { display: block; margin-top: .2rem; font-size: .68rem; color: var(--muted); text-align: right; }
.balao.digitando { color: var(--muted); font-style: italic; }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aviso {
  margin: 0; padding: .4rem .9rem; font-size: .8rem; color: #991b1b; background: #fef2f2; border-top: 1px solid #fecaca;
}
.envio {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .55rem .7rem; background: #f8fafc; border-top: 1px solid var(--line);
}
.envio textarea {
  flex: 1; resize: none; max-height: 7.5rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: 20px; font: inherit; line-height: 1.35; background: #fff;
}
.envio textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.envio button {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.envio button:disabled { opacity: .5; cursor: default; }
.rodape {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .45rem .9rem calc(.5rem + env(safe-area-inset-bottom));
  font-size: .68rem; color: var(--muted); background: #f8fafc; text-align: center;
}
.rodape a { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 48rem) {
  .app { height: 100vh; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}