:root{
  --bg:#0b1020; --panel:#121a33; --fg:#eaf0ff; --muted:#8a97c0;
  --accent:#5b8cff; --accent2:#7bd0ff; --me:#1f2a4d; --her:#16203f;
  --ok:#53d08a; --warn:#ffb86b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
#app{min-height:100%; display:flex; flex-direction:column}
.screen{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  text-align:center;
}
.hidden{display:none !important}
.logo{font-size:40px; color:var(--accent)}
h1{margin:0; font-size:26px; font-weight:650}
.sub{margin:0; color:var(--muted)}
.msg{min-height:20px; color:var(--warn); font-size:14px; margin:4px 0 0}
input#passcode{
  width:min(320px,90%); padding:14px 16px; font-size:18px; text-align:center;
  background:var(--panel); border:1px solid #243156; border-radius:14px; color:var(--fg);
}
button{font-family:inherit; cursor:pointer; border:none; border-radius:14px; font-size:17px}
.primary{background:linear-gradient(180deg,var(--accent),#3f6fe0); color:#fff; padding:14px 22px; font-weight:600}
.primary.big{width:min(340px,92%); padding:18px; font-size:19px}
.ghost{background:transparent; color:var(--fg); border:1px solid #33406b; padding:12px 20px}
.controls{display:flex; flex-direction:column; gap:10px; align-items:center; width:100%}

/* la linea */
#line{justify-content:flex-start; padding-top:28px}
.orb{
  width:132px; height:132px; border-radius:50%; margin:6px auto 2px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #1b2650, #0c1430);
  box-shadow:0 0 0 1px #26315a inset, 0 10px 40px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.orb #orb-core{
  width:66px; height:66px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, var(--accent2), var(--accent));
  opacity:.55; transition:all .18s ease;
}
.orb.idle #orb-core{opacity:.25; transform:scale(.8)}
.orb.listen{animation:breathe 2.4s ease-in-out infinite}
.orb.listen #orb-core{opacity:.85; box-shadow:0 0 26px 6px rgba(123,208,255,.55)}
.orb.think #orb-core{opacity:.7; animation:spin 1s linear infinite; background:conic-gradient(var(--accent2),var(--accent),#2a3a6e,var(--accent2))}
.orb.speak #orb-core{opacity:1; animation:pulse .5s ease-in-out infinite alternate; box-shadow:0 0 34px 10px rgba(91,140,255,.6)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes pulse{from{transform:scale(.92)}to{transform:scale(1.12)}}
@keyframes spin{to{transform:rotate(360deg)}}
.status{color:var(--muted); font-size:15px; margin:4px 0 10px; min-height:20px}

.log{
  width:min(560px,96%); flex:1; overflow-y:auto; display:flex; flex-direction:column;
  gap:8px; padding:4px 2px 12px; margin:0 auto 10px;
}
.bubble{padding:10px 14px; border-radius:16px; max-width:86%; line-height:1.35; font-size:16px; white-space:pre-wrap; word-wrap:break-word}
.bubble.me{align-self:flex-end; background:var(--me); border-bottom-right-radius:5px}
.bubble.her{align-self:flex-start; background:var(--her); border-bottom-left-radius:5px}
.bubble.her.interim,.bubble.me.interim{opacity:.6}