:root{
  --bg:#0b1020; --bg2:#121a33; --bubble-bot:#1c2747; --bubble-user:#2f6df6;
  --text:#eef2ff; --muted:#8da0c8; --accent:#2f6df6; --ok:#36d399; --off:#f87171;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg),#070a14);
  color:var(--text);
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
}

/* Top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:rgba(11,16,32,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:10px; }
.titles{ display:flex; flex-direction:column; line-height:1.1; }
.brand h1{ font-size:18px; margin:0; font-weight:700; letter-spacing:.2px; }
.subtitle{ font-size:11px; color:var(--muted); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.dot.off{ background:var(--off); box-shadow:0 0 8px var(--off); }

.icon-btn{
  border:0; background:transparent; color:var(--text); font-size:20px;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{ background:rgba(255,255,255,.08); }

/* Messages */
.messages{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  -webkit-overflow-scrolling:touch;
}
.msg{
  max-width:80%; padding:10px 14px; border-radius:18px;
  font-size:16px; line-height:1.4; white-space:pre-wrap; word-wrap:break-word;
  animation:pop .15s ease-out;
}
@keyframes pop{ from{ transform:scale(.96); opacity:0; } to{ transform:scale(1); opacity:1; } }
.msg.user{ align-self:flex-end; background:var(--bubble-user); border-bottom-right-radius:5px; }
.msg.bot{ align-self:flex-start; background:var(--bubble-bot); border-bottom-left-radius:5px; }
.msg.bot.speakable{ cursor:pointer; }
.msg.sys{
  align-self:center; background:transparent; color:var(--muted);
  font-size:13px; text-align:center; max-width:90%;
}

/* Thinking dots */
.thinking{ display:flex; gap:5px; padding:4px 22px 0; }
.thinking span{
  width:7px; height:7px; border-radius:50%; background:var(--muted);
  animation:blink 1.2s infinite both;
}
.thinking span:nth-child(2){ animation-delay:.2s; }
.thinking span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }
.hidden{ display:none !important; }

/* Composer */
.composer{
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background:rgba(11,16,32,.9); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.06);
}
#input{
  flex:1; resize:none; border:0; outline:0;
  background:var(--bg2); color:var(--text);
  border-radius:20px; padding:11px 14px; font-size:16px; line-height:1.3;
  max-height:120px; font-family:inherit;
}
.mic.listening{ background:var(--accent); color:#fff; animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,109,246,.5);} 50%{ box-shadow:0 0 0 10px rgba(47,109,246,0);} }
.send{ background:var(--accent); color:#fff; }
.send:active{ background:#2257d6; }

/* Settings sheet */
.sheet{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center; z-index:10;
}
.sheet-card{
  width:100%; max-width:480px;
  background:var(--bg2); border-radius:20px 20px 0 0;
  padding:20px 20px calc(env(safe-area-inset-bottom) + 24px);
  animation:slideUp .2s ease-out;
}
@keyframes slideUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
.sheet-card h2{ margin:0 0 16px; font-size:18px; }
.sheet-card label{ display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
.sheet-card label.row{ display:flex; align-items:center; gap:8px; color:var(--text); font-size:15px; }
.sheet-card input[type=password], .sheet-card select{
  width:100%; padding:11px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--bg); color:var(--text); font-size:15px;
}
.hint{ font-size:12px; color:var(--muted); margin:6px 0 0; }
.sheet-actions{ display:flex; gap:10px; margin-top:22px; }
.sheet-actions button{
  flex:1; padding:13px; border-radius:12px; border:0; font-size:15px; font-weight:600;
  background:var(--accent); color:#fff; cursor:pointer;
}
.sheet-actions .ghost{ background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); }