:root {
  --fundo: #0b0b14; --fundo2: #12121f; --cartao: #171729; --borda: #262640; --texto: #e8e8f2; --texto2: #9a9ab4;
  --indigo: #6366f1; --rosa: #ec4899; --user: #1f1f3a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100dvh;
}
a { color: #a5b4fc; }

.topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: rgba(11,11,20,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--texto); font-weight: 700; font-size: 18px; }
.marca small { color: var(--texto2); font-weight: 500; font-size: 13px; padding: 2px 8px; border: 1px solid var(--borda); border-radius: 999px; }
.logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--indigo), var(--rosa));
}
.acoes { display: flex; align-items: center; gap: 12px; }
.cota { font-size: 12px; color: var(--texto2); }
.btn-ghost {
  background: transparent; color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 7px 12px;
  font-size: 14px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--indigo); }

.lista { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 22px 16px 10px; display: flex; flex-direction: column; gap: 18px; }

.vazio { text-align: center; margin: auto; padding: 40px 10px; position: relative; }
.halo {
  position: absolute; inset: -40px; z-index: -1; filter: blur(70px); opacity: .35;
  background: radial-gradient(circle at 30% 30%, var(--indigo), transparent 60%), radial-gradient(circle at 70% 70%, var(--rosa), transparent 60%);
}
.vazio h1 { font-size: 34px; margin: 0 0 8px; letter-spacing: -.5px; }
.vazio p { color: var(--texto2); max-width: 520px; margin: 0 auto 22px; }
.sugestoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; margin: 0 auto; }
.sugestoes button {
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px;
  text-align: left; font-size: 14px; cursor: pointer;
}
.sugestoes button:hover { border-color: var(--indigo); }

.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg.user { flex-direction: row-reverse; }
.avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.msg.assistant .avatar { background: linear-gradient(135deg, var(--indigo), var(--rosa)); color: #fff; }
.msg.user .avatar { background: var(--cartao); border: 1px solid var(--borda); color: var(--texto2); }
.balao { max-width: 88%; padding: 12px 16px; border-radius: 16px; overflow-wrap: anywhere; }
.msg.user .balao { background: var(--user); border: 1px solid var(--borda); white-space: pre-wrap; }
.msg.assistant .balao { background: transparent; padding-left: 0; max-width: calc(100% - 42px); }
.balao > :first-child { margin-top: 0; }
.balao > :last-child { margin-bottom: 0; }
.balao pre { background: var(--fundo2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; overflow: auto; font-size: 13.5px; }
.balao code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.balao :not(pre) > code { background: var(--cartao); padding: 1px 6px; border-radius: 6px; }
.balao table { border-collapse: collapse; margin: 8px 0; }
.balao td, .balao th { border: 1px solid var(--borda); padding: 5px 10px; }
.balao blockquote { border-left: 3px solid var(--indigo); margin: 8px 0; padding: 2px 12px; color: var(--texto2); }
.pensando { color: var(--texto2); font-size: 14px; }
.pensando::after { content: "…"; animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: .2; } }
.erro { color: #fca5a5; font-size: 14px; margin-top: 6px; }
.cursor::after { content: "▍"; color: var(--indigo); animation: pisca 1s infinite; }

.rodape { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fundo) 30%); padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); }
.caixa {
  max-width: 820px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 18px; padding: 8px 8px 8px 16px;
}
.caixa:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--texto); font: inherit;
  max-height: 200px; padding: 8px 0; line-height: 1.45;
}
#enviar {
  width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo), var(--rosa));
}
#enviar:disabled { opacity: .4; cursor: default; }
.nota { text-align: center; color: var(--texto2); font-size: 12px; margin: 8px 0 0; }

@media (max-width: 600px) {
  .vazio h1 { font-size: 26px; }
  .sugestoes { grid-template-columns: 1fr; }
  .balao { max-width: 100%; }
  .marca small { display: none; }
}