:root{--bg:#000;--navy:#0A1628;--ink:#F5F5F7;--soft:#B0B0BB;--faint:#6B6B75;--ouro:#FFC857;--ciano:#00E5FF;--card:rgba(255,255,255,.04);--linha:rgba(0,229,255,.28)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(120% 80% at 50% 0%,#0d2140 0%,var(--navy) 45%,#000 100%);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--ouro)}
.topo{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.topo img{width:36px;height:36px;border-radius:8px}
.topo h1{font-size:17px;margin:0;letter-spacing:.06em}
.topo small{display:block;color:var(--soft);font-size:12px;letter-spacing:0}
.topo .esp{flex:1}
.btn{appearance:none;border:1px solid var(--linha);background:rgba(0,229,255,.08);color:var(--ink);border-radius:999px;padding:9px 14px;font-size:14px;cursor:pointer;min-height:40px}
.btn:hover{background:rgba(0,229,255,.16)}
.btn.ouro{border-color:rgba(255,200,87,.5);background:rgba(255,200,87,.12)}
[hidden]{display:none!important}
.palco{flex:1;display:grid;grid-template-columns:1fr;gap:16px;padding:16px;max-width:1100px;width:100%;margin:0 auto}
.holo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0}
.orbe{position:relative;width:min(44vw,220px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(0,229,255,.18),rgba(0,229,255,0) 65%)}
.orbe::before,.orbe::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--linha)}
.orbe::after{inset:-10%;border-style:dashed;animation:gira 18s linear infinite}
.orbe img{width:62%;border-radius:50%;filter:drop-shadow(0 0 18px rgba(0,229,255,.45))}
.orbe.ouvindo::before{animation:pulsa 1.1s ease-in-out infinite;border-color:var(--ciano)}
.orbe.falando img{animation:respira 1.4s ease-in-out infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes pulsa{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:.4}}
@keyframes respira{50%{filter:drop-shadow(0 0 30px rgba(255,200,87,.7))}}
@media (prefers-reduced-motion:reduce){.orbe::after,.orbe.ouvindo::before,.orbe.falando img{animation:none}}
.estado{margin-top:10px;color:var(--soft);font-size:13px;text-align:center;min-height:1.2em}
.selo{display:inline-block;margin-top:6px;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.15);color:var(--soft)}
.selo.on{border-color:rgba(0,229,255,.5);color:var(--ciano)}
.chat{display:flex;flex-direction:column;min-height:0;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden}
.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:240px;max-height:58dvh}
.m{max-width:88%;padding:10px 13px;border-radius:14px;line-height:1.45;font-size:15px;white-space:pre-wrap;word-wrap:break-word}
.m.j{align-self:flex-start;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.18)}
.m.v{align-self:flex-end;background:rgba(255,200,87,.12);border:1px solid rgba(255,200,87,.25)}
.sug{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px}
.sug button{font-size:13px;padding:7px 11px;min-height:34px}
form.entrada{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.25)}
form.entrada input{flex:1;min-width:0;background:rgba(255,255,255,.06);color:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:11px 14px;font-size:16px}
.mic{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:18px}
.mic.ativo{background:var(--ciano);color:#000}
.rodape{padding:10px 16px 14px;color:var(--faint);font-size:12px;text-align:center}
.rodape a{color:var(--soft)}
.ios-dica{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));background:#0d2140;border:1px solid var(--linha);border-radius:14px;padding:12px 14px;font-size:14px;z-index:9}
/* tablet / desktop: holograma ao lado do chat */
@media (min-width:760px){.palco{grid-template-columns:minmax(260px,38%) 1fr;align-items:stretch}.msgs{max-height:none}.chat{min-height:62dvh}.orbe{width:min(28vw,280px)}}
/* tablet em pé (820x1180): chat mais alto */
@media (min-width:760px) and (orientation:portrait){.palco{grid-template-columns:1fr}.orbe{width:220px}.chat{min-height:56dvh}}
/* celular pequeno */
@media (max-width:380px){.topo small{display:none}.m{font-size:14px}}