:root {
  --marca: #B5124F;
  --marca-escura: #8E0E3E;
  --fundo: #F6EFE9;
  --papel: #FFFDFB;
  --balao-cliente: #F9D9E4;
  --texto: #2B1B21;
  --suave: #7A6A70;
  --linha: #E8DCD4;
  --aviso: #FFF4D6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #1C1517;
    --papel: #2A2023;
    --balao-cliente: #5A1D33;
    --texto: #F3E9EC;
    --suave: #B9A9AE;
    --linha: #3B2E32;
    --aviso: #3A3020;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #1C1517; --papel: #2A2023; --balao-cliente: #5A1D33; --texto: #F3E9EC;
  --suave: #B9A9AE; --linha: #3B2E32; --aviso: #3A3020; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 Poppins, system-ui, sans-serif;
}
.app {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 560px; margin: 0 auto;
  background: var(--fundo);
  border-inline: 1px solid var(--linha);
}

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--marca); color: #fff;
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #FFF6EE; color: var(--marca);
  font: italic 500 26px/1 "Cormorant Garamond", serif;
}
.quem { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.quem strong { font: 600 21px/1.1 "Cormorant Garamond", serif; letter-spacing: .3px; }
.quem span { font-size: 12.5px; opacity: .9; }
.limpar {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px; padding: 6px 12px; font: 500 12.5px Poppins, sans-serif; cursor: pointer;
}

.cenario {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 16px; font-size: 12.5px; color: var(--suave);
  border-bottom: 1px solid var(--linha); background: var(--papel);
}
.cenario label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cenario input { accent-color: var(--marca); margin: 0; }

.chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.aviso-demo {
  align-self: center; text-align: center; margin: 0 0 8px;
  background: var(--aviso); color: var(--texto); font-size: 12px;
  padding: 6px 12px; border-radius: 8px; max-width: 90%;
}
.msg {
  max-width: 84%; padding: 8px 12px 6px; border-radius: 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  animation: entra .18s ease-out;
}
.msg .hora { display: block; text-align: right; font-size: 10.5px; color: var(--suave); margin-top: 2px; }
.cliente { align-self: flex-end; background: var(--balao-cliente); border-top-right-radius: 4px; }
.atendente { align-self: flex-start; background: var(--papel); border-top-left-radius: 4px; }
.cliente + .atendente, .atendente + .cliente { margin-top: 8px; }
.digitando { align-self: flex-start; background: var(--papel); border-radius: 12px; padding: 12px 14px; display: flex; gap: 4px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); animation: pula 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
.erro { align-self: center; color: var(--marca); font-size: 13px; }

.passou {
  align-self: stretch; margin: 10px 0 4px;
  border: 1px dashed var(--marca); border-radius: 12px;
  background: var(--papel); padding: 10px 12px; font-size: 13.5px;
}
.passou b { color: var(--marca); display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.passou p { margin: 0; white-space: pre-wrap; }

.sugestoes {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px;
  scrollbar-width: none;
}
.sugestoes::-webkit-scrollbar { display: none; }
.sugestoes button {
  flex: none; border: 1px solid var(--marca); color: var(--marca); background: var(--papel);
  border-radius: 999px; padding: 7px 12px; font: 500 13px Poppins, sans-serif; cursor: pointer;
}
.sugestoes[hidden] { display: none; }

.escrever {
  display: flex; gap: 8px; padding: 8px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--fundo);
}
.escrever input {
  flex: 1; min-width: 0; border: 1px solid var(--linha); border-radius: 999px;
  padding: 11px 16px; font: 16px Poppins, sans-serif;
  background: var(--papel); color: var(--texto);
}
.escrever input:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.escrever button {
  width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%;
  background: var(--marca); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.escrever button:disabled { background: var(--suave); cursor: default; }

@keyframes entra { from { opacity: 0; transform: translateY(4px); } }
@keyframes pula { 50% { transform: translateY(-4px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .msg, .digitando i { animation: none; } }