:root{
  --bg:#05060a; --bg2:#0a0e1a; --cyan:#37e0ff; --cyan-dim:#1b6b82;
  --text:#e8f4ff; --muted:#7f93a8; --user:#16324a; --jarvis:#0e2233;
  --danger:#ff5577;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1200px 800px at 50% -10%,#0d2033 0%,var(--bg) 60%);
  color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;flex-direction:column;height:100dvh;max-width:820px;margin:0 auto}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;font-size:14px;letter-spacing:.5px}
.brand{font-weight:600;display:flex;align-items:center;gap:8px;color:var(--cyan)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
.status{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.status.aktiv{color:var(--cyan)}

/* Orb */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:hidden;padding:6px 14px 0}
.orb-wrap{padding:14px 0 6px}
.orb{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.orb .core{width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#bff6ff,#37e0ff 45%,#0a6b86 100%);
  box-shadow:0 0 40px rgba(55,224,255,.7),0 0 90px rgba(55,224,255,.35);
  transition:transform .25s ease,box-shadow .25s ease}
.orb .ring{position:absolute;border:1.5px solid var(--cyan-dim);border-radius:50%;
  opacity:.55;animation:spin 9s linear infinite}
.orb .r1{width:110px;height:110px;border-top-color:var(--cyan)}
.orb .r2{width:145px;height:145px;border-left-color:var(--cyan);animation-duration:14s;animation-direction:reverse}
.orb .r3{width:178px;height:178px;border-bottom-color:var(--cyan);animation-duration:20s}
.orb.hoert .core{transform:scale(1.18);box-shadow:0 0 60px rgba(55,224,255,.95),0 0 120px rgba(55,224,255,.5)}
.orb.hoert .ring{opacity:.9;animation-duration:2.5s}
.orb.denkt .core{animation:pulse 1.1s ease-in-out infinite}
.orb.spricht .core{animation:spricht .5s ease-in-out infinite}
.orb.leise .core{background:radial-gradient(circle at 40% 35%,#5a5f66,#33373d);box-shadow:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spricht{0%,100%{transform:scale(1.05)}50%{transform:scale(1.22)}}

.hint{color:var(--muted);font-size:13px;margin:6px 0 10px;min-height:16px;text-align:center}

/* Verlauf */
.conversation{width:100%;overflow-y:auto;padding:6px 2px 12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.msg{max-width:86%;padding:10px 14px;border-radius:16px;line-height:1.45;font-size:15px;
  white-space:pre-wrap;word-wrap:break-word;animation:ein .25s ease}
@keyframes ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;background:var(--user);border-bottom-right-radius:4px}
.msg.jarvis{align-self:flex-start;background:var(--jarvis);border:1px solid #14384f;border-bottom-left-radius:4px}
.msg.jarvis .who{color:var(--cyan);font-size:11px;letter-spacing:.8px;text-transform:uppercase;margin-bottom:3px}
.caret{display:inline-block;width:8px;background:var(--cyan);animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

/* Steuerung */
.controls{display:flex;align-items:center;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));}
.mic{flex:0 0 auto;width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  color:#031018;background:linear-gradient(145deg,#7ef0ff,#2bbfe0);
  box-shadow:0 6px 22px rgba(55,224,255,.45);display:grid;place-items:center;transition:transform .12s}
.mic:active{transform:scale(.94)}
.mic.rec{background:linear-gradient(145deg,#ff8aa6,#ff3b62);color:#fff;box-shadow:0 0 26px rgba(255,59,98,.65)}
.textform{flex:1;display:flex;gap:6px;background:#0c1622;border:1px solid #17313f;border-radius:14px;padding:4px 4px 4px 14px}
.textform input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px}
.textform .send{border:none;background:transparent;color:var(--cyan);cursor:pointer;padding:8px;border-radius:10px}
.textform .send:hover{background:#12283a}
.ghost{background:#0c1622;border:1px solid #17313f;color:var(--muted);border-radius:12px;
  padding:12px 10px;cursor:pointer;font-size:13px}
.ghost:hover{color:var(--text)}

/* Login */
.login-body{display:grid;place-items:center;min-height:100dvh;margin:0}
.login-card{background:var(--bg2);border:1px solid #16313f;border-radius:20px;padding:30px 26px;width:min(340px,90vw);
  display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.login-card h1{margin:6px 0 0;color:var(--cyan);font-size:22px;letter-spacing:2px}
.login-card .sub{margin:0;color:var(--muted);font-size:13px}
.login-card .err{color:var(--danger);font-size:13px;margin:0}
.login-card input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #17313f;
  background:#0c1622;color:var(--text);font-size:15px;outline:none}
.login-card button{width:100%;padding:12px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(145deg,#7ef0ff,#2bbfe0);color:#031018;font-size:15px;font-weight:600}
.orb-small{width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#bff6ff,#37e0ff 45%,#0a6b86 100%);
  box-shadow:0 0 30px rgba(55,224,255,.6)}

/* Zustandspunkt: grau = wartet auf Weckwort, gruen = hoert zu,
   orange = denkt, blau = spricht */
.hint-zeile{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 10px}
.hint-zeile .hint{margin:0}
.punkt{width:10px;height:10px;border-radius:50%;background:#6b7480;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);flex:0 0 auto}
.punkt.wartet{background:#6b7480}
.punkt.hoert{background:#2ed573;box-shadow:0 0 10px rgba(46,213,115,.8)}
.punkt.denkt{background:#ffa502;box-shadow:0 0 10px rgba(255,165,2,.8);
  animation:puls 1s infinite ease-in-out}
.punkt.spricht{background:#1e90ff;box-shadow:0 0 10px rgba(30,144,255,.8)}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
.kl-hinweis{font-size:11px;opacity:.72;line-height:1.25}
@media (max-width:520px){.kl-hinweis{display:none}}

@media (max-width:520px){
  .orb{width:150px;height:150px}
  .orb .r3{width:148px;height:148px}
  .orb .r2{width:120px;height:120px}
  .orb .r1{width:92px;height:92px}
  .mic{width:58px;height:58px}
  .ghost{padding:10px 8px;font-size:12px}
}