:root {
  color-scheme: dark;
  --noite: #070a1f; --tinta: #121741; --tinta-2: #182056; --borda: #29306c;
  --estrela: #eef0ff; --nevoa: #a2a9da; --ouro: #e2b34f; --violeta: #9b7bff; --ok: #5fd3a0; --erro: #ff8a8a;
  --display: "Zen Kaku Gothic Antique", "Noto Sans", system-ui, sans-serif;
  --corpo: "Noto Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--noite); color: var(--estrela); font-family: var(--corpo); font-size: 15px; line-height: 1.55; }
body { min-height: 100dvh; background:
  radial-gradient(120% 60% at 50% -10%, #1b1560 0%, rgba(27,21,96,0) 60%),
  radial-gradient(80% 50% at 100% 100%, #2a0f55 0%, rgba(42,15,85,0) 60%), var(--noite); background-attachment: fixed; }
.oculto { position: absolute; left: -9999px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: rgba(7,10,31,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.avatar { width: 46px; height: 46px; border-radius: 50%; transition: transform .1s linear, filter .2s; }
.avatar.falando { filter: drop-shadow(0 0 12px rgba(155,123,255,.9)); animation: fala .5s ease-in-out infinite alternate; }
@keyframes fala { to { transform: scale(1.08); } }
.quem { flex: 1; min-width: 0; }
.nome { font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1.1; }
.nome span { color: var(--ouro); font-weight: 500; font-size: 15px; }
.status { font-size: 12px; color: var(--nevoa); display: flex; align-items: center; gap: 6px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status.pensando i { background: var(--ouro); animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: .3; } }
.sair { background: none; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--nevoa); cursor: pointer; }

.abas { position: sticky; top: calc(67px + env(safe-area-inset-top, 0px)); z-index: 4; display: flex; gap: 4px; padding: 8px 16px; background: rgba(7,10,31,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.abas button { flex: 1; background: none; border: 1px solid transparent; border-radius: 999px; padding: 8px 10px; font-size: 14px; color: var(--nevoa); cursor: pointer; }
.abas button[aria-selected="true"] { color: var(--estrela); background: var(--tinta); border-color: var(--borda); }

main { max-width: 760px; margin: 0 auto; padding-inline: 16px; padding-block: 8px calc(150px + env(safe-area-inset-bottom, 0px)); }
h2 { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--nevoa); margin: 22px 0 10px; }
.cartao { background: var(--tinta); border: 1px solid var(--borda); border-radius: 16px; padding: 14px; }

.mensagens { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.yoru { align-self: flex-start; background: var(--tinta); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.msg.voce { align-self: flex-end; background: #2b2472; border-bottom-right-radius: 4px; }
.msg .meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--nevoa); }
.msg .ouvir { background: none; border: 1px solid var(--borda); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--nevoa); cursor: pointer; }
.msg.pensando { color: var(--nevoa); font-style: italic; }
.msg.erro { border-color: var(--erro); color: var(--erro); }
.dia { align-self: center; font-family: var(--mono); font-size: 11px; color: var(--nevoa); padding: 2px 10px; border: 1px solid var(--borda); border-radius: 999px; }

.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(7,10,31,.98) 70%, rgba(7,10,31,0)); }
.barra[hidden] { display: none; }
.opcoes { max-width: 760px; margin: 0 auto 6px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--nevoa); }
.opcoes input { accent-color: var(--violeta); }
#form { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
#msg { flex: 1; min-width: 0; resize: none; max-height: 140px; font: 15px/1.4 var(--corpo); color: var(--estrela); background: var(--tinta); border: 1px solid var(--borda); border-radius: 20px; padding: 11px 14px; }
#msg::placeholder { color: var(--nevoa); }
.mic, .enviar { border: 0; border-radius: 999px; height: 44px; cursor: pointer; flex: none; }
.mic { width: 44px; background: var(--tinta-2); border: 1px solid var(--borda); font-size: 18px; }
.mic.gravando { background: var(--erro); animation: pisca 1s infinite; }
.enviar { padding: 0 16px; background: var(--violeta); color: #0b0d22; font-weight: 600; }
.enviar:disabled, .mic:disabled { opacity: .5; cursor: wait; }

.md h3 { font-family: var(--display); font-size: 16px; margin: 10px 0 6px; }
.md h3:first-child { margin-top: 0; }
.md h4 { font-size: 14px; margin: 10px 0 4px; color: var(--ouro); }
.md p { margin: 6px 0; color: var(--nevoa); }
.md ul { margin: 6px 0; padding-left: 18px; }
.md li { margin: 4px 0; }
.area { margin-bottom: 10px; }
.area summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; }
.area summary::-webkit-details-marker { display: none; }
.area summary span { font-family: var(--mono); font-size: 12px; color: var(--ouro); }
.anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.anexos a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); background: var(--tinta); color: var(--nevoa); font-size: 12px; text-decoration: none; }
.anexos img { width: 100%; height: 100%; object-fit: cover; }
.vazio { color: var(--nevoa); font-size: 14px; }
.lista .item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); }
.lista .item:first-child { border-top: 0; padding-top: 0; }
.lista .h { font-family: var(--mono); font-size: 12px; color: var(--nevoa); white-space: nowrap; }
.chip { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--borda); color: var(--nevoa); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.grade .cartao { padding: 10px 12px; }
.grade .k { font-size: 12px; color: var(--nevoa); display: block; }
.grade .v { font-family: var(--display); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .avatar.falando, .status.pensando i, .mic.gravando { animation: none; } }