/* Stellar AI — chat-first product polish v21
   Final override layer: quiet surfaces, readable hierarchy, clear credit balance. */
:root{
  --stellar-bg:#0b0b0d;
  --stellar-sidebar:#111113;
  --stellar-surface:#1b1b1f;
  --stellar-surface-hover:#232329;
  --stellar-border:rgba(255,255,255,.08);
  --stellar-text:#f4f4f5;
  --stellar-muted:#9a9aa3;
  --stellar-accent:#8b7cf6;
  --stellar-accent-soft:rgba(139,124,246,.14);
  --side:244px!important;
  --max:780px!important;
}
html,body,.app,.main{background:var(--stellar-bg)!important}
body{color:var(--stellar-text)!important}
.side{
  background:var(--stellar-sidebar)!important;
  border-right:1px solid var(--stellar-border)!important;
  padding:10px!important;
  gap:6px!important;
}
.brand-row{padding:2px 4px 7px!important}
.brand .mark{box-shadow:none!important;background:#1b1b20!important}
.side>.btn.primary{
  justify-content:flex-start!important;
  background:transparent!important;
  border:0!important;
  color:#efeff1!important;
  border-radius:9px!important;
  padding:0 10px!important;
}
.side>.btn.primary:hover{background:var(--stellar-surface-hover)!important}
.side-section{border-top:0!important;padding-top:5px!important}
.side-title{padding-inline:9px!important;color:#777780!important;font-size:10px!important}
.nav-link,.set-item{
  border:0!important;
  background:transparent!important;
  min-height:38px!important;
  border-radius:9px!important;
  padding:0 9px!important;
  color:#c9c9cf!important;
}
.nav-link:hover,.set-item:hover,.nav-link.active{
  background:var(--stellar-surface-hover)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.top{
  height:56px!important;
  border-bottom:0!important;
  background:var(--stellar-bg)!important;
  padding:0 14px!important;
}
.model-pill{
  border:0!important;
  background:transparent!important;
  border-radius:10px!important;
  font-size:13px!important;
}
.model-pill:hover{background:var(--stellar-surface-hover)!important}
.model-dot{background:#9f94ff!important;box-shadow:none!important}
.top-actions{gap:4px!important}
.top-actions>.btn{
  min-height:38px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#cfcfd5!important;
  padding:0 10px!important;
}
.top-actions>.btn:hover{background:var(--stellar-surface-hover)!important;color:#fff!important}
.top-actions .stellar-credit-pill{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:82px!important;
  background:var(--stellar-accent-soft)!important;
  color:#e9e6ff!important;
}
.stellar-credit-icon{
  width:18px;height:18px;display:grid;place-items:center;
  border-radius:6px;background:rgba(139,124,246,.22);
  font-size:12px;line-height:1;color:#d8d2ff;
}
.stellar-credit-balance{font-variant-numeric:tabular-nums;font-weight:750}
.stellar-credit-label{color:#b9b4d8;font-size:11px;font-weight:600}
.chat{padding:12px 18px 10px!important}
.chat-inner{width:min(100%,var(--max))!important;gap:18px!important}
.home-welcome{
  padding:clamp(74px,16vh,155px) 0 24px!important;
  text-align:center!important;
}
.home-welcome:before{display:none!important}
.home-welcome h1{
  max-width:720px!important;
  margin-inline:auto!important;
  font-size:clamp(30px,4.5vw,46px)!important;
  letter-spacing:-.04em!important;
  font-weight:600!important;
  color:#f5f5f6!important;
}
.home-welcome .home-hint{display:none!important}
.msg{max-width:100%!important;width:100%!important}
.msg.user{justify-self:stretch!important;display:flex!important;justify-content:flex-end!important}
.msg.user .bubble{
  max-width:min(80%,680px)!important;
  border:0!important;
  border-radius:18px!important;
  background:#242429!important;
  color:#f5f5f6!important;
  padding:10px 14px!important;
}
.msg.assistant .bubble{
  max-width:100%!important;
  border:0!important;
  background:transparent!important;
  padding:8px 2px!important;
  color:#ededf0!important;
  line-height:1.62!important;
}
.meta{color:#6f6f78!important}
.composer-wrap{
  border-top:0!important;
  padding:8px 16px max(14px,calc(9px + env(safe-area-inset-bottom)))!important;
  background:linear-gradient(180deg,rgba(11,11,13,0),#0b0b0d 28%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.composer{
  width:min(100%,780px)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:24px!important;
  background:#1c1c20!important;
  padding:8px 9px 8px 12px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.22)!important;
}
.composer:focus-within{
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 9px 30px rgba(0,0,0,.25)!important;
}
.composer textarea{
  min-height:48px!important;
  max-height:28dvh!important;
  padding:9px 8px!important;
  resize:none!important;
  font-size:15px!important;
}
.composer textarea::placeholder{color:#8b8b94!important}
.composer-bottom{align-items:end!important}
.composer-tools{padding:0!important}
.composer-plus{
  width:38px!important;height:38px!important;min-height:38px!important;
  padding:0!important;border-radius:50%!important;
  border:0!important;background:transparent!important;
  font-size:22px!important;color:#b9b9c1!important;
}
.composer-plus:hover{background:#2a2a30!important;color:#fff!important}
.composer-bar{grid-template-columns:minmax(0,1fr) auto auto!important}
#status{font-size:10px!important;color:#777780!important}
#sendBtn{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  padding:0!important;border-radius:50%!important;
  background:#f2f2f4!important;color:#111!important;box-shadow:none!important;
}
#sendBtn .send-label{display:none!important}
.composer-more{
  border:0!important;
  background:transparent!important;
  padding:8px 0 0!important;
}
.composer-tool:not(.composer-plus){
  border:0!important;
  background:#26262c!important;
  border-radius:10px!important;
  color:#c9c9d0!important;
}
.composer-tool:not(.composer-plus):hover{background:#303037!important;color:#fff!important}
.settings-panel{
  background:rgba(0,0,0,.56)!important;
  backdrop-filter:blur(10px)!important;
}
.settings-card{
  width:min(640px,calc(100% - 28px))!important;
  max-height:88dvh!important;
  background:#17171b!important;
  border:1px solid var(--stellar-border)!important;
  border-radius:20px!important;
  box-shadow:0 24px 80px rgba(0,0,0,.42)!important;
}
.settings-header{background:#17171b!important}
.settings-row{
  border:0!important;
  background:transparent!important;
  border-radius:10px!important;
}
.settings-row:hover{background:#202026!important}
.settings-plan-hero{
  background:var(--stellar-accent-soft)!important;
  border:1px solid rgba(139,124,246,.14)!important;
}
#usage-copy{display:block!important;color:#a7a7b1!important;line-height:1.4!important}
.stellar-wallet-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:5px 0 7px;padding:10px 12px;border-radius:11px;
  background:#202026;color:#dddde2;font-size:12px;
}
.stellar-wallet-summary strong{font-size:13px;color:#fff}
@media(max-width:900px){
  .side{width:min(300px,88vw)!important}
  .home-welcome{padding-top:clamp(52px,12vh,110px)!important}
}
@media(max-width:640px){
  .top{padding:0 8px!important}
  .top-actions>.btn{padding-inline:8px!important}
  .top-actions .stellar-credit-pill{min-width:52px!important}
  .stellar-credit-label{display:none!important}
  .top-actions .top-plans:not(.stellar-credit-pill){display:none!important}
  #account-button{font-size:0!important;width:40px!important;padding:0!important}
  #account-button::before{content:"◉";font-size:16px!important}
  .model-pill{max-width:44vw!important}
  .chat{padding-inline:12px!important}
  .home-welcome{padding-top:clamp(42px,10vh,85px)!important}
  .home-welcome h1{font-size:30px!important}
  .composer-wrap{padding-inline:8px!important}
  .composer{border-radius:22px!important}
  .msg.user .bubble{max-width:90%!important}
  .settings-card{width:100%!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important}
}
@media(max-width:380px){
  .stellar-credit-icon{display:none!important}
  .top-actions .stellar-credit-pill{min-width:46px!important}
  .model-pill{max-width:40vw!important}
}