body{background:radial-gradient(circle at 50% 30%,rgba(79,209,232,.16),transparent 60%),#04060a;background-attachment:fixed;overscroll-behavior:none}
.app{max-width:460px;margin:0 auto;height:100vh;height:100dvh;padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column}
@media (min-width:700px){.app{border-left:1px solid #10161d;border-right:1px solid #10161d}}

/* login */
.login{display:flex;flex-direction:column;flex:1;justify-content:center;gap:8px}
.brand{text-align:center}
.brand .tag{font-size:.7rem}
.brand h1{font-size:2.6rem;letter-spacing:-.03em;margin:6px 0 0;line-height:1}
.brand h1 span{color:var(--cyan)}
.panel{display:flex;flex-direction:column;gap:12px;background:rgba(14,20,27,.85);border:1px solid #1c2631;border-radius:22px;padding:22px}
.panel label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.panel input{background:#081016;border:1px solid #243140;border-radius:14px;padding:14px 16px;font-size:1.1rem;outline:none}
.panel input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,209,232,.18)}
.panel input.code{font-family:var(--mono);font-size:2rem;letter-spacing:.4em;text-align:center}
.lead{margin:0;font-size:1.15rem}
.hint{margin:0;color:var(--muted);font-size:.9rem}
.primary{background:var(--cyan);color:#001;border:0;border-radius:99px;padding:15px;font-weight:700;font-size:1.05rem;cursor:pointer}
.primary:disabled{opacity:.5}
.link{background:none;border:0;color:var(--cyan);cursor:pointer;padding:4px}
.error{color:var(--red);font-size:.92rem;text-align:center;margin:10px 0 0}

/* principal */
.main{display:flex;flex-direction:column;flex:1;min-height:0}
.login{overflow-y:auto}
.top{display:flex;align-items:center;gap:12px;position:relative}
.top .avatar{width:44px;height:44px;font-size:1.2rem}
.me{line-height:1.25;min-width:0;display:flex;flex-direction:column}
.me b{font-size:1.1rem}
.me span{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{margin-left:auto;font-size:.72rem;padding:6px 12px;border-radius:99px;border:1px solid #243140;color:var(--muted);white-space:nowrap}
.chip.on{border-color:var(--cyan);color:var(--cyan)}
.chip.off{border-color:rgba(255,93,93,.5);color:var(--red)}
.menuBtn{background:none;border:1px solid #243140;border-radius:50%;width:36px;height:36px;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--muted)}
.menu{position:absolute;right:0;top:50px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:6px;z-index:5;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.menu button{display:block;background:none;border:0;padding:12px 18px;cursor:pointer;color:var(--text);white-space:nowrap;border-radius:10px}
.menu button:hover{background:#1a222c}

.orb{margin:clamp(16px,7vh,72px) auto clamp(12px,4vh,44px);width:min(56vw,220px,30vh);transition:width .3s,margin .3s;aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;flex:none}
.orb.small{width:110px;margin:22px auto 26px}
.orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(79,209,232,.5)}
.orb::after{inset:-14%;border-color:rgba(79,209,232,.18);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.1);opacity:0}}
.core{width:58%;height:58%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c9f6ff,var(--cyan) 35%,#0b4a57 75%);box-shadow:0 0 70px rgba(79,209,232,.55);transition:transform .25s,box-shadow .25s,filter .25s}
.orb.listening .core{transform:scale(1.12);box-shadow:0 0 110px rgba(79,209,232,.85)}
.orb.listening::after{animation-duration:1s}
.orb.thinking .core{animation:think 1.2s ease-in-out infinite}
@keyframes think{50%{filter:brightness(.7);transform:scale(.94)}}
.orb.speaking .core{background:radial-gradient(circle at 40% 35%,#fff0d6,var(--amber) 35%,#6b4510 75%);box-shadow:0 0 90px rgba(255,181,71,.55);animation:speak .5s ease-in-out infinite alternate}
.orb.speaking::before,.orb.speaking::after{border-color:rgba(255,181,71,.35)}
@keyframes speak{to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.orb::after,.orb .core{animation:none !important}}

.main.has-reply .orb{width:min(26vw,96px);margin:14px auto 10px}
.said{text-align:center;color:var(--muted);font-size:1rem;min-height:2.6em;flex:none}
.said b{display:block;color:var(--text);font-size:1.25rem;font-weight:500;margin-top:8px}
.reply{margin-top:22px;background:#0e141b;border:1px solid #1c2631;border-radius:22px;padding:16px 18px;font-size:1.02rem;color:#cfe6ee;line-height:1.45;min-height:0;flex:0 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.reply .tag{font-size:.68rem;margin-bottom:4px}
.reply.streaming #reply::after{content:"▍";color:var(--cyan);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.textRow{margin-top:auto;padding-top:14px;display:flex;gap:10px;flex:none}
.textRow input{flex:1;min-width:0;background:#0b1117;border:1px solid #1f2a35;border-radius:99px;padding:12px 18px;font-size:1rem;outline:none}
.textRow input:focus{border-color:var(--cyan)}
.textRow button{width:46px;height:46px;border-radius:50%;border:1px solid var(--cyan);background:none;color:var(--cyan);font-size:1.2rem;cursor:pointer;flex:none}
.ptt{flex:none;margin-top:12px;height:64px;border-radius:99px;background:var(--cyan);color:#001;font-weight:700;font-size:1.15rem;border:0;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .12s,box-shadow .12s,background .12s}
.ptt.on{background:var(--amber);transform:scale(.97);box-shadow:0 0 0 6px rgba(255,181,71,.18),0 0 40px rgba(255,181,71,.35)}
.ptt:disabled{opacity:.45}