:root{
  --bg0:#050b18; --bg1:#0a1730; --teal:#1fd9e6; --teal2:#37e7f0; --teal-deep:#0e7c86;
  --ink:#dff1f6; --muted:#7d97a8; --silver1:#eaf2f6; --silver2:#9fb3c2;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  background:radial-gradient(120% 90% at 50% 38%, #0b1c3a 0%, var(--bg0) 60%, #02060f 100%);
  color:var(--ink);
  font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  overflow:hidden; user-select:none;
}
#app{height:100dvh; display:flex; flex-direction:column; align-items:center; padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);}

/* TOP BAR */
.topbar{width:100%; max-width:560px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 4px 6px; position:relative;}
.brand-intelligo{display:flex; flex-direction:column; line-height:1;}
.i-logo{font-size:15px; letter-spacing:.5px; color:#cde0ea;}
.i-logo b{color:var(--teal);}
.i-tag{font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:3px;}
.wordmark{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:1px; font-weight:800; font-size:26px; letter-spacing:4px;
  background:linear-gradient(180deg,#fff 0%,#cdd9e2 45%,#7e93a3 75%,#aebfcb 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.o-glyph{display:inline-block; width:24px; height:24px; color:var(--teal2); -webkit-text-fill-color:var(--teal2); transform:translateY(1px);
  filter:drop-shadow(0 0 6px rgba(55,231,240,.8));}
.lab-pill{font-size:11px; color:var(--teal2); border:1px solid rgba(55,231,240,.35); background:rgba(31,217,230,.08); padding:5px 11px; border-radius:20px; white-space:nowrap;}

/* STAGE / ORB */
.stage{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:0;}
#orb{width:min(78vw,360px); height:min(78vw,360px); touch-action:none;}
.status{position:absolute; bottom:6px; font-size:13px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; transition:color .3s;}
.status.live{color:var(--teal2);}

/* CAPTIONS */
.captions{width:100%; max-width:560px; min-height:96px; padding:4px 8px; text-align:center;}
.cap-neuron{font-size:16px; line-height:1.45; color:var(--ink); min-height:22px;}
.cap-user{font-size:13px; color:var(--muted); margin-top:8px; font-style:italic; min-height:16px;}

/* CHIPS */
.chips{width:100%; max-width:560px; display:flex; gap:8px; overflow-x:auto; padding:10px 4px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; font-size:12.5px; color:#bfe6ec; background:rgba(31,217,230,.07); border:1px solid rgba(31,217,230,.25); padding:8px 14px; border-radius:18px; cursor:pointer; transition:.2s; white-space:nowrap;}
.chip:hover,.chip:active{background:rgba(31,217,230,.18); color:#fff;}

/* CONTROLS */
.controls{display:flex; align-items:center; gap:14px; padding:6px 0 10px;}
.mic{
  width:74px; height:74px; border-radius:50%; border:none; cursor:pointer; color:#02161a;
  background:radial-gradient(circle at 50% 35%, #6ff2fb, var(--teal) 55%, var(--teal-deep));
  box-shadow:0 0 0 0 rgba(31,217,230,.45), 0 8px 26px rgba(31,217,230,.4);
  display:grid; place-items:center; transition:transform .15s;
}
.mic:active{transform:scale(.94);}
.mic.recording{animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,217,230,.5),0 8px 26px rgba(31,217,230,.4);}70%{box-shadow:0 0 0 22px rgba(31,217,230,0),0 8px 26px rgba(31,217,230,.4);}100%{box-shadow:0 0 0 0 rgba(31,217,230,0),0 8px 26px rgba(31,217,230,.4);}}
.stop{width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#cfe1e8; cursor:pointer; display:grid; place-items:center;}

.demo-note{font-size:9.5px; color:#46586a; letter-spacing:.5px; padding:2px 0 8px; text-align:center;}

/* PWA INSTALL BANNER */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:50; max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px;
  background:linear-gradient(180deg,#0c1c38,#081427);
  border:1px solid rgba(55,231,240,.28); border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  animation:ib-in .35s ease;
}
@keyframes ib-in{from{opacity:0; transform:translateY(20px);}to{opacity:1; transform:translateY(0);}}
.ib-icon{width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  box-shadow:0 0 14px rgba(31,217,230,.35);}
.ib-text{display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0;}
.ib-text strong{font-size:14px; color:var(--silver1); font-weight:700;}
.ib-text span{font-size:11.5px; color:var(--muted);}
.ib-install{flex:0 0 auto; border:none; cursor:pointer; color:#02161a; font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:20px;
  background:radial-gradient(circle at 50% 30%, #6ff2fb, var(--teal) 60%, var(--teal-deep));
  box-shadow:0 4px 16px rgba(31,217,230,.35);}
.ib-install:active{transform:scale(.96);}
.ib-dismiss{flex:0 0 auto; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--muted);
  display:grid; place-items:center;}
.ib-dismiss:active{background:rgba(255,255,255,.12);}