:root{--bg:#050b1a;--panel:#0a1a30;--line:#14406a;--cyan:#27e6ff;--blue:#2f7bff;--teal:#0fb5a8;--text:#d8f3ff;--err:#ff6b8a}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at 50% 20%,#0b2a4a 0,var(--bg) 60%);color:var(--text);font:16px/1.5 "Segoe UI",system-ui,sans-serif;overflow-x:hidden}
[hidden]{display:none!important}
#boot{position:fixed;inset:0;display:grid;place-items:center;letter-spacing:.5em;color:var(--cyan);background:var(--bg)}
.logo{margin:0 0 .5rem;text-align:center;letter-spacing:.35em;color:var(--cyan);text-shadow:0 0 18px var(--cyan)}.logo.sm{font-size:1.1rem;text-align:left;margin:0}
#auth{min-height:100%;display:grid;place-items:center;padding:1rem}
.card{width:min(420px,100%);background:rgba(10,26,48,.85);border:1px solid var(--line);border-radius:14px;padding:1.5rem;box-shadow:0 0 40px rgba(39,230,255,.12)}
form{display:grid;gap:.7rem}h2{margin:.2rem 0;font-weight:500}
input{width:100%;padding:.7rem .8rem;background:#06142a;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit}
input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button{padding:.7rem 1rem;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
.primary{background:linear-gradient(90deg,var(--blue),var(--teal));border:0;font-weight:600;color:#02101f}
.ghost:hover{border-color:var(--cyan)}
.pw{position:relative}.pw .eye{position:absolute;right:4px;top:4px;bottom:4px;padding:0 .7rem;border:0;color:var(--cyan)}
.links{display:flex;justify-content:space-between;margin:.2rem 0 0;font-size:.9rem}a{color:var(--cyan)}
#msg{min-height:1.4em;margin:.2rem 0 .6rem;text-align:center;font-size:.92rem;color:var(--cyan)}#msg.err{color:var(--err)}
#app{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto;padding:.6rem 1rem}
header{display:flex;gap:.6rem;align-items:center}header #who{flex:1;font-size:.85rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{display:grid;justify-items:center;padding:.5rem 0}#brain{width:min(260px,52vw);height:auto}
#status{margin:.2rem 0;color:var(--cyan);font-size:.9rem}
.ring{fill:none;stroke:var(--blue);stroke-width:.8;opacity:.6;transform-origin:100px 100px}
.r1{stroke-dasharray:4 8;animation:spin 40s linear infinite}.r2{stroke-dasharray:60 20;stroke:var(--cyan);animation:spin 26s linear infinite reverse}.r3{stroke-dasharray:2 5;stroke:var(--teal);animation:spin 18s linear infinite}
.core path{fill:rgba(39,230,255,.08);stroke:var(--cyan);stroke-width:1.6}.core .fold{fill:none;stroke:var(--blue);stroke-width:1.2}.node{fill:var(--cyan);animation:pulse 2.4s ease-in-out infinite}
#brain[data-state=listening] .core{filter:drop-shadow(0 0 10px var(--teal))}#brain[data-state=listening] .ring{stroke:var(--teal)}
#brain[data-state=thinking] .ring{animation-duration:6s}#brain[data-state=speaking] .core{animation:pulse 0.9s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45}}
#log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.4rem 0}.hint{opacity:.55;text-align:center}
.m{padding:.6rem .8rem;border-radius:10px;max-width:88%;white-space:pre-wrap;word-wrap:break-word}.m.user{align-self:flex-end;background:#0e3a66}.m.ai{background:var(--panel);border:1px solid var(--line)}.m.err{color:var(--err);border:1px solid var(--err)}
#chat{display:flex;gap:.5rem;padding:.6rem 0}#chat #text{flex:1}
#mic.on{border-color:var(--cyan);box-shadow:0 0 14px var(--cyan)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:480px){#chat{flex-wrap:wrap}#chat #text{flex-basis:100%;order:-1}}
/* ZYVOR futuristic brand */
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}

.brand-brain {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 7px rgba(39, 230, 255, .45));
}

.logo.sm {
  font-size: 1rem;
  letter-spacing: .2em;
}

#chat {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 .8rem;
}

#mic {
  width: 76px;
  height: 76px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  background: radial-gradient(circle, #103b59, #06142a 72%);
  box-shadow: 0 0 22px rgba(39, 230, 255, .2),
              inset 0 0 18px rgba(39, 230, 255, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

#mic svg {
  width: 30px;
  height: 30px;
}

#mic:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(39, 230, 255, .42);
}

#mic.on {
  color: #fff;
  border-color: var(--teal);
  background: radial-gradient(circle, #087d78, #06142a 75%);
  box-shadow: 0 0 28px rgba(15, 181, 168, .5);
  animation: micPulse 1.5s ease-in-out infinite;
}

@keyframes micPulse {
  50% {
    box-shadow: 0 0 40px rgba(15, 181, 168, .65);
  }
}

@media (max-width: 480px) {
  .brand-brain {
    width: 32px;
    height: 32px;
  }

  header {
    gap: .4rem;
  }

  header button {
    padding: .5rem .55rem;
    font-size: .8rem;
  }

  #mic {
    width: 70px;
    height: 70px;
  }
}