/* Stellar AI v24 — calm ChatGPT-inspired product shell (original Stellar styling) */
:root{
  --st-bg:#212121;
  --st-sidebar:#171717;
  --st-surface:#2f2f2f;
  --st-surface-2:#383838;
  --st-hover:#2a2a2a;
  --st-line:rgba(255,255,255,.09);
  --st-text:#ececec;
  --st-muted:#a9a9a9;
  --st-purple:#9b8cff;
  --side:260px!important;
  --max:768px!important;
}
html,body{background:var(--st-bg)!important;color:var(--st-text)!important}
body{background:var(--st-bg)!important}
.app,.main{background:var(--st-bg)!important}
.main{background-image:none!important}

/* Sidebar */
.side{
  background:var(--st-sidebar)!important;
  border-right:0!important;
  padding:10px 8px!important;
  gap:5px!important;
  box-shadow:none!important
}
.brand-row{min-height:44px!important;padding:0 8px 6px!important}
.brand{font-weight:700!important}
.brand .mark{
  width:28px!important;height:28px!important;flex-basis:28px!important;
  border-radius:8px!important;background:#262626!important;color:#c9c1ff!important;
  filter:none!important
}
.side>.btn.primary{
  min-height:40px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#ececec!important;
  padding:0 10px!important;
  justify-content:flex-start!important;
  box-shadow:none!important
}
.side>.btn.primary:hover{background:#262626!important}
.side-section{border:0!important;padding-top:3px!important}
.side-title{padding:4px 10px 2px!important;margin:0!important;color:#777!important;font-size:10px!important}
.nav-link,.set-item{
  min-height:38px!important;padding:0 10px!important;border:0!important;border-radius:8px!important;
  background:transparent!important;color:#cfcfcf!important;font-size:12.5px!important;
  box-shadow:none!important
}
.nav-link:hover,.nav-link.active,.set-item:hover{
  background:#262626!important;color:#fff!important;border:0!important;box-shadow:none!important
}
.chat-actions{grid-template-columns:repeat(3,1fr)!important;gap:3px!important}
.chat-actions .nav-link{font-size:10px!important;padding:0 4px!important}
#saved-chat-empty{padding:7px 10px!important;color:#6f6f6f!important}

/* Topbar */
.top{
  height:56px!important;
  min-height:56px!important;
  padding:0 14px!important;
  border:0!important;
  background:var(--st-bg)!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}
.top-left,.top-actions{gap:4px!important}
.model-pill{
  min-height:38px!important;padding:0 9px!important;border:0!important;border-radius:8px!important;
  background:transparent!important;color:#e5e5e5!important;font-size:13px!important
}
.model-pill:hover{background:#2a2a2a!important}
.model-dot{width:6px!important;height:6px!important;background:var(--st-purple)!important;box-shadow:none!important}
.top-actions>.btn{
  min-height:38px!important;padding:0 10px!important;border:0!important;border-radius:8px!important;
  background:transparent!important;color:#cfcfcf!important;box-shadow:none!important
}
.top-actions>.btn:hover{background:#2a2a2a!important;color:#fff!important}
.top-actions .jarvis-call-top,
.top-actions .top-plans:not(.stellar-credit-pill){display:none!important}
.stellar-credit-pill{
  min-width:auto!important;min-height:36px!important;padding:0 10px!important;
  border:0!important;border-radius:999px!important;background:#2b2b2b!important;
  color:#e6e2ff!important
}
.stellar-credit-icon{background:transparent!important;width:auto!important;height:auto!important;color:#b8afff!important}
.stellar-credit-label{display:none!important}
#account-button{min-width:auto!important}

/* Chat */
.chat{padding:14px 18px 8px!important}
.chat-inner{width:min(100%,var(--max))!important;gap:20px!important}
.home-welcome{
  padding:clamp(96px,20vh,180px) 0 22px!important;
  text-align:center!important
}
.home-welcome::before{display:none!important}
.home-welcome h1{
  max-width:680px!important;margin:0 auto!important;
  font-size:clamp(28px,4vw,38px)!important;font-weight:600!important;
  line-height:1.15!important;letter-spacing:-.035em!important;color:#ececec!important
}
.home-welcome .home-hint{
  display:block!important;max-width:500px!important;margin:9px auto 0!important;
  color:#8f8f8f!important;font-size:13px!important
}
.stellar-starters{margin-top:19px!important;gap:6px!important}
.stellar-starter{
  min-height:36px!important;padding:0 11px!important;border:1px solid #3c3c3c!important;
  border-radius:999px!important;background:transparent!important;color:#aaa!important;font-size:11px!important
}
.stellar-starter:hover{background:#292929!important;border-color:#4a4a4a!important;color:#eee!important}
.msg{width:100%!important;max-width:100%!important}
.msg.user{display:flex!important;justify-content:flex-end!important;justify-self:stretch!important}
.msg.user .bubble{
  max-width:min(78%,640px)!important;padding:10px 14px!important;border:0!important;
  border-radius:18px!important;background:#303030!important;color:#f1f1f1!important
}
.msg.assistant .bubble{
  max-width:100%!important;padding:7px 0!important;border:0!important;
  background:transparent!important;color:#ececec!important;line-height:1.66!important
}
.meta{font-size:10px!important;color:#737373!important}

/* Composer */
.composer-wrap{
  border:0!important;padding:8px 14px max(14px,calc(8px + env(safe-area-inset-bottom)))!important;
  background:linear-gradient(180deg,rgba(33,33,33,0),#212121 30%)!important;
  backdrop-filter:none!important
}
.composer{
  width:min(100%,768px)!important;padding:8px 9px 8px 11px!important;
  border:1px solid #444!important;border-radius:26px!important;
  background:#2f2f2f!important;box-shadow:none!important
}
.composer:focus-within{border-color:#555!important;box-shadow:none!important}
.composer textarea{
  min-height:46px!important;max-height:28dvh!important;padding:8px!important;
  resize:none!important;color:#f0f0f0!important;font-size:15px!important
}
.composer textarea::placeholder{color:#8d8d8d!important}
.composer-plus{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  border:0!important;border-radius:50%!important;background:transparent!important;color:#bbb!important
}
.composer-plus:hover{background:#3a3a3a!important;color:#fff!important}
#sendBtn{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:#ececec!important;color:#1d1d1d!important;box-shadow:none!important
}
#sendBtn .send-label{display:none!important}
#status{font-size:10px!important;color:#777!important}
.composer-more{border:0!important;background:transparent!important;padding:8px 0 0!important}
.composer-tool:not(.composer-plus){
  border:0!important;border-radius:10px!important;background:#3a3a3a!important;color:#ccc!important
}
.composer-tool:not(.composer-plus):hover{background:#444!important;color:#fff!important}

/* Model menu */
#model-menu{
  border:1px solid #3b3b3b!important;border-radius:14px!important;
  background:#262626!important;box-shadow:0 14px 48px rgba(0,0,0,.35)!important
}
#model-menu button{border:0!important;border-radius:9px!important}
#model-menu button:hover,#model-menu button[aria-checked="true"]{
  background:#333!important;border:0!important;box-shadow:none!important
}

/* Settings shell */
.settings-panel{
  padding:20px!important;background:rgba(0,0,0,.48)!important;
  backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important
}
.settings-card{
  width:min(720px,100%)!important;height:min(720px,88dvh)!important;max-height:88dvh!important;
  margin:4dvh auto 0!important;overflow:hidden!important;
  border:1px solid #3a3a3a!important;border-radius:18px!important;
  background:#202020!important;box-shadow:0 22px 70px rgba(0,0,0,.45)!important;
  display:grid!important;grid-template-rows:auto auto minmax(0,1fr)!important
}
.settings-header{
  position:relative!important;min-height:68px!important;padding:14px 16px!important;
  border-bottom:0!important;background:#202020!important
}
.settings-header h2{font-size:19px!important;font-weight:650!important}
.settings-header p{margin-top:3px!important;color:#858585!important;font-size:11px!important}
.settings-close-x{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  border-radius:9px!important;background:transparent!important;color:#aaa!important;font-size:21px!important
}
.settings-close-x:hover{background:#303030!important;color:#fff!important}
.stellar-settings-tabs{
  display:flex;gap:4px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid #303030
}
.stellar-settings-tabs::-webkit-scrollbar{display:none}
.stellar-settings-tab{
  flex:0 0 auto;min-height:38px;padding:0 12px;border:0;border-radius:9px;
  background:transparent;color:#999;font:650 11px/1 inherit;cursor:pointer;white-space:nowrap
}
.stellar-settings-tab:hover{background:#292929;color:#ddd}
.stellar-settings-tab[aria-selected="true"]{background:#303030;color:#fff}
.settings-grid{
  min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;
  display:grid!important;align-content:start!important;gap:2px!important;padding:10px 12px 18px!important
}
.settings-grid::before,.settings-section-label,.settings-divider{display:none!important}
.settings-row{
  width:100%!important;min-height:56px!important;padding:8px 10px!important;
  border:0!important;border-radius:10px!important;background:transparent!important;color:#e8e8e8!important
}
.settings-row:hover{background:#292929!important}
.settings-row[data-st-settings-hidden="true"]{display:none!important}
.settings-icon{
  width:32px!important;height:32px!important;min-width:32px!important;border-radius:9px!important;
  background:#2d2d2d!important;color:#bdbdbd!important
}
.settings-row strong,.settings-credit-copy strong{font-size:13px!important;font-weight:650!important;color:#eee!important}
.settings-row small,.settings-credit-copy small{font-size:10.5px!important;color:#8f8f8f!important}
.settings-row-meta{color:#777!important}
.settings-plan-hero{
  min-height:76px!important;margin:0 0 6px!important;padding:10px!important;
  border:1px solid rgba(155,140,255,.16)!important;background:rgba(155,140,255,.07)!important
}
.settings-plan-hero .settings-icon{background:rgba(155,140,255,.14)!important;color:#cfc8ff!important}
.settings-plan-actions{
  display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:start!important
}
.settings-plan-actions .credit-buy-controls{
  grid-column:2!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;
  width:100%!important;margin-top:7px!important
}
.settings-plan-actions .btn{
  min-height:38px!important;border:1px solid #3c3c3c!important;border-radius:9px!important;
  background:#2b2b2b!important;color:#ddd!important;box-shadow:none!important
}
.settings-plan-actions .btn.primary{background:#ececec!important;color:#1b1b1b!important;border-color:#ececec!important}
.stellar-wallet-summary{
  margin:0 0 6px!important;padding:10px 12px!important;border-radius:10px!important;
  background:#292929!important;color:#aaa!important
}
.settings-wallet-row,.settings-referral-row{
  display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:start!important;
  background:transparent!important
}
.settings-wallet-row .credit-buy-controls,.settings-referral-actions{
  grid-column:2!important;margin-top:8px!important
}
.settings-wallet-row select{
  border:1px solid #3b3b3b!important;background:#171717!important;color:#eee!important
}
.settings-close-footer{display:none!important}
[data-settings-advanced]{display:none!important}
.settings-card.advanced-open [data-settings-advanced]:not([hidden]){display:flex!important}

/* Make app visible even if older style layers left stale visibility rules */
body,.app,.main{visibility:visible!important;opacity:1!important}

@media(max-width:900px){
  :root{--side:280px!important}
  .side{width:min(300px,88vw)!important}
  .home-welcome{padding-top:clamp(70px,15vh,130px)!important}
}
@media(max-width:640px){
  .top{padding:0 8px!important}
  .mobile-menu{width:40px!important;padding:0!important;font-size:0!important}
  .mobile-menu::before{content:"☰";font-size:16px}
  .model-pill{max-width:48vw!important}
  #account-button{width:40px!important;min-width:40px!important;padding:0!important;font-size:0!important}
  #account-button::before{content:"◉";font-size:15px}
  .stellar-credit-pill{padding:0 8px!important}
  .chat{padding-inline:12px!important}
  .home-welcome{padding-top:clamp(52px,12vh,95px)!important;text-align:center!important}
  .home-welcome h1{font-size:29px!important}
  .home-welcome .home-hint{font-size:12px!important}
  .composer-wrap{padding-inline:8px!important}
  .composer{border-radius:24px!important}
  .msg.user .bubble{max-width:90%!important}
  .settings-panel{padding:0!important}
  .settings-card{
    width:100%!important;height:92dvh!important;max-height:92dvh!important;margin:8dvh 0 0!important;
    border-radius:18px 18px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important
  }
  .settings-header{min-height:62px!important;padding:12px!important}
  .settings-header::before{
    content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
    width:32px;height:4px;border-radius:99px;background:#444
  }
  .settings-header p{display:none!important}
  .stellar-settings-tabs{padding:0 8px 8px!important}
  .stellar-settings-tab{min-height:40px!important;padding-inline:11px!important}
  .settings-grid{padding:8px 8px calc(16px + env(safe-area-inset-bottom))!important}
  .settings-plan-actions .credit-buy-controls{grid-template-columns:1fr!important}
  .settings-wallet-row .credit-buy-controls{display:grid!important;grid-template-columns:1fr!important}
  .settings-wallet-row .btn{width:100%!important}
  .settings-row-meta{font-size:0!important}
  .settings-row-meta span{font-size:18px!important}
}