:root {
  --fundo: #0a0d12;
  --superficie: #121821;
  --superficie-2: #19212c;
  --linha: #232d3a;
  --texto: #e8edf3;
  --texto-2: #8b97a6;
  --acento: #3ee0c1;
  --acento-escuro: #0d3b35;
  --erro: #ff6b6b;
  --raio: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.tela {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

/* ---------- porta (entrar / primeiro acesso) ---------- */
.porta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, #10302b 0%, var(--fundo) 60%);
}

.marca { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 18px; }
.marca img { border-radius: 22px; box-shadow: 0 10px 40px rgba(62, 224, 193, .18); }
.marca h1 { font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.marca.pequena { margin-bottom: 4px; }
.marca.pequena h1 { font-size: 22px; }

.primario {
  width: 100%;
  max-width: 320px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--acento);
  color: #04201b;
  font-weight: 650;
  font-size: 17px;
}
.primario:active { transform: scale(.98); }
.primario:disabled { opacity: .5; }

.link { color: var(--texto-2); font-size: 15px; padding: 8px; }

.aviso { min-height: 20px; font-size: 14px; color: var(--texto-2); max-width: 320px; }
.aviso.erro { color: var(--erro); }

.dica {
  max-width: 320px;
  font-size: 13px;
  color: var(--texto-2);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 10px 12px;
}

.explica { max-width: 300px; color: var(--texto-2); font-size: 15px; }

.codigo {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  font: 600 24px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
.codigo:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

/* ---------- chat ---------- */
.chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 0;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  border-bottom: 1px solid var(--linha);
  background: rgba(10, 13, 18, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.titulo { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 18px; }
.vivo {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 0 rgba(62, 224, 193, .6);
  animation: pulso 2.4s infinite;
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(62, 224, 193, .55); }
  70% { box-shadow: 0 0 0 8px rgba(62, 224, 193, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 224, 193, 0); }
}

.acoes { display: flex; gap: 8px; }
.chip {
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--texto-2);
}
.chip.destaque { border-color: var(--acento); color: var(--acento); }

.lista {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vazio { margin: auto; text-align: center; color: var(--texto-2); font-size: 15px; max-width: 260px; }

.msg { max-width: 84%; display: flex; flex-direction: column; gap: 4px; }
.msg .bolha {
  padding: 10px 14px;
  border-radius: var(--raio);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 16px;
}
.msg .meta { font-size: 11px; color: var(--texto-2); padding: 0 6px; }

.msg.manolo { align-self: flex-end; align-items: flex-end; }
.msg.manolo .bolha { background: var(--acento-escuro); border: 1px solid #16564d; border-bottom-right-radius: 6px; }

.msg.neurox { align-self: flex-start; }
.msg.neurox .bolha { background: var(--superficie); border: 1px solid var(--linha); border-bottom-left-radius: 6px; }

.msg.iniciativa .bolha { border-color: var(--acento); }
.msg.iniciativa .meta::before { content: "por iniciativa · "; color: var(--acento); }

.msg.pensando .bolha { color: var(--texto-2); }
.pontos::after { content: "…"; animation: pontos 1.2s steps(3) infinite; }
@keyframes pontos { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } }

.faixa-erro {
  margin: 0 16px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 107, 107, .1);
  border: 1px solid rgba(255, 107, 107, .35);
  color: var(--erro);
  font-size: 14px;
}

.compor {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 10px);
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.compor textarea {
  flex: 1;
  resize: none;
  max-height: 160px;
  padding: 11px 14px;
  border-radius: 22px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
}
.compor textarea:focus { outline: none; border-color: var(--acento); }
.enviar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--acento);
  color: #04201b;
  display: grid; place-items: center;
}
.enviar:disabled { opacity: .4; }

/* ---------- voz ---------- */
.mic {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--linha);
  color: var(--acento);
  display: grid; place-items: center;
}
.mic:disabled { opacity: .4; }

.msg.voz .meta::before { content: "por voz · "; color: var(--texto-2); }

.painel-voz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
  border-top: 1px solid var(--linha);
  background: radial-gradient(90% 120% at 50% 100%, #0f2a26 0%, var(--fundo) 70%);
}
.orbe {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.orbe span {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9ff5e4, var(--acento) 45%, #0b6b5c 100%);
  box-shadow: 0 0 30px rgba(62, 224, 193, .35);
  transition: transform .3s ease;
}
.painel-voz[data-estado="ouvindo"] .orbe span { animation: respira 2.6s ease-in-out infinite; }
.painel-voz[data-estado="pensando"] .orbe span { animation: gira 1.2s linear infinite; background: conic-gradient(from 0deg, var(--acento), #0b6b5c, var(--acento)); }
.painel-voz[data-estado="falando"] .orbe span { animation: fala .45s ease-in-out infinite alternate; }
.painel-voz[data-estado="erro"] .orbe span { background: #6b2b2b; box-shadow: none; }
@keyframes respira { 50% { transform: scale(1.12); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes fala { from { transform: scale(.94); } to { transform: scale(1.14); } }
.estado-voz { color: var(--texto-2); font-size: 15px; min-height: 22px; text-align: center; }
.acoes-voz { display: flex; gap: 10px; }