:root{
  --bg:#0a0e1a; --panel:#121a2e; --accent:#3da9fc; --accent2:#7bdfff;
  --text:#e8f1ff; --muted:#7e8aa3; --danger:#ff5d6c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 50% -10%,#16233f 0,var(--bg) 55%);
  color:var(--text);overflow:hidden;
}
#app{
  display:flex;flex-direction:column;height:100dvh;
  padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
  max-width:560px;margin:0 auto;
}
header{display:flex;align-items:center;justify-content:center;position:relative;padding:18px 0 6px}
header h1{
  margin:0;font-size:26px;letter-spacing:8px;font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 24px rgba(61,169,252,.35);
}
#settingsBtn{position:absolute;right:0;top:14px;background:none;border:0;color:var(--muted);font-size:24px}
#status{text-align:center;color:var(--muted);font-size:14px;margin:6px 0 10px;min-height:20px;transition:color .2s}
#status.listening{color:var(--accent2)}
#status.thinking{color:#ffd166}
#status.error{color:var(--danger)}

#transcript{flex:1;overflow-y:auto;padding:6px 2px}
#log{display:flex;flex-direction:column;gap:10px}
.bubble{padding:11px 14px;border-radius:16px;max-width:82%;font-size:15px;line-height:1.4;animation:pop .18s ease}
.you{align-self:flex-end;background:var(--accent);color:#04122a;border-bottom-right-radius:5px}
.jarvis{align-self:flex-start;background:var(--panel);border:1px solid #20304f;border-bottom-left-radius:5px}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

#ptt{
  margin:16px auto 24px;width:170px;height:170px;border-radius:50%;
  border:none;color:#04122a;font-weight:700;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 50% 35%,var(--accent2),var(--accent));
  box-shadow:0 0 0 6px rgba(61,169,252,.12),0 12px 40px rgba(61,169,252,.35);
  transition:transform .1s,box-shadow .2s;user-select:none;touch-action:none;
}
#ptt .mic{font-size:46px;line-height:1}
#ptt .label{font-size:12px;letter-spacing:2px}
#ptt.active{transform:scale(.94);box-shadow:0 0 0 10px rgba(123,223,255,.2),0 0 60px rgba(123,223,255,.6);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 10px rgba(123,223,255,.2),0 0 60px rgba(123,223,255,.55)}50%{box-shadow:0 0 0 18px rgba(123,223,255,.05),0 0 90px rgba(123,223,255,.85)}}

dialog#settings{
  border:1px solid #20304f;background:var(--panel);color:var(--text);
  border-radius:18px;padding:22px;width:88%;max-width:380px;
}
dialog#settings::backdrop{background:rgba(2,6,18,.7)}
dialog h2{margin:0 0 16px;font-size:18px}
dialog label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px}
dialog input{width:100%;margin-top:6px;padding:11px;border-radius:10px;border:1px solid #2a3a5c;background:#0c1426;color:var(--text);font-size:15px}
.row{display:flex;gap:10px;margin-top:6px}
.row button{flex:1;padding:12px;border-radius:10px;border:0;font-size:15px;font-weight:600;background:var(--accent);color:#04122a}
.row button.ghost{background:transparent;border:1px solid #2a3a5c;color:var(--text)}