:root {
  --bg:#06121a; --ink:#eaf6ff; --dim:rgba(170,210,235,.6);
  --cyan:#38e1ff; --teal:#1de9c6;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background:radial-gradient(ellipse at 50% 22%,#0a2738 0%,#06121a 55%,#020a0e 100%);
  color:var(--ink); font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  height:100vh; display:flex; flex-direction:column; overflow:hidden;
}

/* Header */
.top { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(12px,4vw,24px); }
.brand { display:flex; align-items:center; gap:8px; letter-spacing:.16em; font-size:14px; font-weight:700; }
.brand .dot { width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--teal));display:grid;place-items:center;color:#04101f;font-weight:800;font-size:14px; }
.brand small { color:var(--dim); font-weight:400; letter-spacing:.1em; font-size:11px; }
.status { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:6px; }
.status i { width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal); }

/* Orbe 3D arriba */
#scene { flex:0 0 auto; width:100%; height:38vh; min-height:200px; display:block; }

/* Respuesta: zona legible debajo del orbe */
#answer {
  flex:1 1 auto; overflow-y:auto; display:flex; align-items:flex-start; justify-content:center;
  padding:6px clamp(16px,5vw,40px) 10px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 22px);
}
#subtitle {
  max-width:640px; text-align:center; font-size:clamp(14px,2.2vw,18px); line-height:1.55;
  color:var(--ink); white-space:pre-wrap;
}

/* Controles abajo */
.bottom { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:9px; padding:10px clamp(12px,4vw,24px) 16px; border-top:1px solid rgba(56,225,255,.1); background:rgba(3,11,16,.5); }
.chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.chip { background:rgba(8,24,32,.7);border:1px solid rgba(56,225,255,.2);color:var(--dim);padding:5px 11px;border-radius:16px;font-size:12px;cursor:pointer; }
.chip:hover { color:var(--ink);border-color:var(--cyan); }
.controls { display:flex; align-items:center; gap:10px; width:min(560px,94vw); }
.mic { flex:0 0 auto; width:52px;height:52px;border-radius:50%;cursor:pointer;border:1.5px solid rgba(56,225,255,.5);color:var(--cyan);background:radial-gradient(circle at 50% 35%,rgba(56,225,255,.18),rgba(6,18,26,.6));display:grid;place-items:center;transition:.2s; }
.mic svg { fill:currentColor; }
.mic:hover { transform:scale(1.06); }
.mic.active { color:#fff;border-color:var(--cyan);box-shadow:0 0 0 8px rgba(56,225,255,.07),0 0 28px rgba(56,225,255,.5);animation:mp 1.1s infinite; }
@keyframes mp { 0%,100%{box-shadow:0 0 0 6px rgba(56,225,255,.08),0 0 26px rgba(56,225,255,.5);} 50%{box-shadow:0 0 0 16px rgba(56,225,255,0),0 0 44px rgba(56,225,255,.7);} }
form { flex:1 1 auto; display:flex; gap:8px; }
input { flex:1;background:rgba(8,24,32,.8);border:1px solid rgba(56,225,255,.25);color:var(--ink);padding:12px 14px;border-radius:12px;font:inherit;font-size:14px;outline:none; }
input:focus { border-color:var(--cyan); }
form button { background:rgba(56,225,255,.15);border:1px solid rgba(56,225,255,.4);color:var(--cyan);border-radius:12px;padding:0 16px;cursor:pointer;font-size:16px; }
form button:hover { background:rgba(56,225,255,.28); }
#hint { font-size:11px; color:var(--dim); text-align:center; min-height:13px; }

@media (max-width:480px){ #scene{ height:32vh; } }