:root{--fundo:#0b1020;--texto:#f3f4f6;--sub:#9aa3b2;--acento:#5aa9ff;--ok:#5bd49a;--alerta:#ffb454}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fundo);color:var(--texto);font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif}
main{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));text-align:center}
h1{font-weight:500;font-size:28px;margin:8px 0 0}
#esfera{display:block;border:0;padding:0;appearance:none;-webkit-appearance:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;width:min(62vw,260px);height:min(62vw,260px);border-radius:50%;margin:24px auto;background:radial-gradient(circle at 35% 35%,#6fb3ff,#1b3a7a 60%,#0b1020 100%);box-shadow:0 0 60px rgba(90,169,255,.25);transition:transform .3s,box-shadow .3s}
#esfera.estado-ouvindo{animation:pulso 1.6s ease-in-out infinite;box-shadow:0 0 90px rgba(91,212,154,.45)}
#esfera.estado-pensando{animation:gira 2.4s linear infinite;box-shadow:0 0 90px rgba(255,180,84,.45)}
#esfera.estado-falando{animation:pulso .9s ease-in-out infinite;box-shadow:0 0 110px rgba(90,169,255,.6)}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes gira{to{filter:hue-rotate(360deg)}}
#frase{font-size:34px;margin:0}
#sub{color:var(--sub);font-size:18px;margin:6px 0 20px;min-height:24px}
button{border:0;border-radius:18px;color:#fff;font-size:20px;cursor:pointer}
button.grande{width:100%;max-width:420px;padding:20px;background:var(--acento);color:#0b1020;font-size:24px}
button.grande.ativo{background:#c0392b;color:#fff}
button.pequeno{padding:14px 20px;background:#1e2a44;margin:14px 8px 0}
button:disabled{opacity:.4}
.linha{display:flex;justify-content:center;flex-wrap:wrap}
#texto{width:100%;max-width:520px;max-height:30vh;overflow:auto;text-align:left;background:#121a30;border-radius:14px;padding:12px;font-size:18px;margin-top:14px}
#texto .eu{color:var(--ok)}
#texto .ele{color:var(--texto)}
#rodape{color:var(--sub);font-size:16px;margin:16px 0 0}
#camera{width:min(80vw,360px);margin:12px auto}
#video{width:100%;border-radius:16px;background:#000;aspect-ratio:3/4;object-fit:cover}
#cameraAviso{color:var(--sub);font-size:17px;margin:6px 0 0}
#esfera.oculta{display:none}
#semToken{color:var(--alerta);font-size:18px}