/*
 * Stellar AI app completion layer — v60
 * Loaded last on /app so the product has one authoritative visual finish.
 */
:root{
  --bg:#090a0f!important;
  --side:#0d0e13!important;
  --panel:#111218!important;
  --panel2:#171821!important;
  --line:rgba(255,255,255,.085)!important;
  --text:#f7f7fb!important;
  --muted:#9497a3!important;
  --soft:#d5d6dc!important;
  --accent:#9b8cff!important;
  --accent2:#f2efff!important;
  --good:#73ddb0!important;
  --warn:#e8c96f!important;
  --bad:#ff8282!important;
  --max:860px!important;
}
html,body{background:var(--bg)!important}
body{font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
::selection{background:rgba(155,140,255,.3);color:#fff}
button,a,input,textarea,select{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(155,140,255,.82)!important;
  outline-offset:2px!important;
}
.app{grid-template-columns:252px minmax(0,1fr)!important;background:var(--bg)!important}
.side{
  padding:10px 8px!important;
  background:rgba(13,14,19,.98)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
}
.brand{font-size:15px!important;letter-spacing:-.025em!important}
.side .btn.primary{
  min-height:44px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:#f3f1ff!important;
  color:#111116!important;
  box-shadow:none!important;
}
.nav{border-radius:11px!important;color:#a8abb5!important;font-weight:650!important}
.nav:hover,.nav:focus-visible,.chat-item:hover,.chat-item:focus-visible{background:rgba(255,255,255,.055)!important;color:#f5f5f8!important}
.nav-title{color:#666a75!important;font-size:10px!important;letter-spacing:.11em!important}
.chat-group-label{color:#686b75!important}
.chat-history-row{position:relative!important}
.chat-item{min-height:42px!important;padding:7px 34px 7px 10px!important;border-radius:11px!important}
.chat-item.active{background:rgba(155,140,255,.085)!important;border-color:rgba(155,140,255,.13)!important}
.chat-title{font-weight:660!important}
.chat-meta{color:#6f737e!important}
.side-account{margin-top:auto!important;padding-top:8px!important;border-top:1px solid rgba(255,255,255,.055)!important}

.main{background:
  radial-gradient(circle at 50% -22%,rgba(155,140,255,.075),transparent 34%),
  var(--bg)!important}
.top{
  height:56px!important;
  padding:0 14px!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  background:rgba(9,10,15,.84)!important;
  backdrop-filter:blur(18px)!important;
}
.top-brand{font-size:14px!important;font-weight:760!important}
.chip,.top .btn.ghost{
  min-height:40px!important;
  border-color:rgba(255,255,255,.075)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.025)!important;
  color:#d9dae0!important;
}
.chip:hover,.top .btn.ghost:hover{background:rgba(255,255,255,.06)!important}
.model-chip{max-width:min(240px,36vw)!important}
.model-chip span{overflow:hidden;text-overflow:ellipsis}

.chat{padding:24px 18px 16px!important;scrollbar-gutter:stable}
.chat-inner{width:min(860px,100%)!important;gap:18px!important}
.welcome{
  min-height:min(52vh,500px)!important;
  display:grid!important;
  place-content:center!important;
  padding:46px 0 24px!important;
  text-align:center!important;
}
.welcome h1{
  font-size:clamp(34px,5vw,48px)!important;
  line-height:1.03!important;
  letter-spacing:-.05em!important;
  font-weight:690!important;
}
.welcome p{
  max-width:560px!important;
  margin-top:13px!important;
  color:#8f929d!important;
  font-size:14px!important;
  line-height:1.6!important;
}
.msg{width:100%!important;max-width:100%!important;gap:6px!important}
.msg.user{justify-items:end!important}
.msg .meta{font-size:10px!important;color:#6d707a!important;padding-inline:4px!important}
.bubble{line-height:1.68!important}
.user .bubble{
  max-width:min(680px,88%)!important;
  padding:11px 14px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:18px!important;
  background:#202126!important;
}
.assistant .bubble{max-width:820px!important;padding:0!important;color:#ededf2!important}
.assistant .bubble p{margin:0 0 12px!important}
.assistant .bubble h2,.assistant .bubble h3,.assistant .bubble h4{margin:22px 0 10px!important;letter-spacing:-.025em!important}
.assistant .bubble ul,.assistant .bubble ol{padding-left:22px!important}
.message-actions{opacity:.58!important;transition:opacity .16s ease!important}
.msg:hover .message-actions,.message-actions:focus-within{opacity:1!important}
.message-action{border-radius:9px!important;color:#7f828c!important}
.message-action:hover{color:#e7e7eb!important}

.code-block-shell{
  margin:14px 0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:15px!important;
  background:#0d0e12!important;
}
.code-block-toolbar{
  min-height:42px!important;
  padding:7px 9px 7px 13px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:#121318!important;
}
.code-block-language{color:#9a9da8!important}
.code-export-button{
  min-height:32px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.035)!important;
}
.code-block-shell pre{margin:0!important;padding:16px!important;background:#0b0c10!important}

.composer-wrap{
  padding:12px 18px max(16px,calc(10px + env(safe-area-inset-bottom)))!important;
  background:linear-gradient(180deg,rgba(9,10,15,0),rgba(9,10,15,.94) 28%,#090a0f 58%)!important;
}
.composer-mode-tabs{
  width:min(860px,100%)!important;
  margin:0 auto 7px!important;
  gap:5px!important;
}
.composer-mode-tab{
  min-height:36px!important;
  border-color:transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#777a84!important;
  padding:0 10px!important;
}
.composer-mode-tab:hover{background:rgba(255,255,255,.045)!important;color:#d7d8dd!important}
.composer-mode-tab[aria-selected="true"]{
  border-color:rgba(155,140,255,.16)!important;
  background:rgba(155,140,255,.09)!important;
  color:#ded9ff!important;
}
.composer{
  width:min(860px,100%)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:24px!important;
  background:#17181d!important;
  box-shadow:0 16px 42px rgba(0,0,0,.26)!important;
}
.composer:focus-within{
  border-color:rgba(155,140,255,.42)!important;
  box-shadow:0 0 0 3px rgba(155,140,255,.07),0 18px 48px rgba(0,0,0,.3)!important;
}
.composer-main{padding:7px 8px!important;gap:4px!important}
.composer-tool,#sendBtn{width:42px!important;height:42px!important;min-height:42px!important}
.composer-tool{color:#aaaeb8!important}
.composer-tool:hover,.composer-tool:focus-visible{background:rgba(255,255,255,.06)!important;color:#fff!important}
.web-search-tool.active{background:rgba(155,140,255,.13)!important;color:#dcd6ff!important}
#sendBtn{background:#f3f1ff!important;color:#111116!important}
#sendBtn:hover{transform:translateY(-1px)}
textarea{min-height:44px!important;padding:9px 8px!important;color:#f6f6f9!important}
textarea::placeholder{color:#747782!important}
.image-upload-status{
  display:inline-flex!important;
  align-items:center!important;
  max-width:calc(100% - 82px)!important;
  margin:0 8px 8px!important;
  padding:6px 10px!important;
  border:1px solid rgba(155,140,255,.16)!important;
  border-radius:999px!important;
  background:rgba(155,140,255,.075)!important;
  color:#c8c2ef!important;
}
.image-upload-status:empty{display:none!important}
.attachment-clear{
  min-height:30px!important;
  margin:0 8px 8px 0!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.035)!important;
  color:#aeb0b9!important;
  padding:0 9px!important;
  font-size:11px!important;
}
.attachment-clear:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.composer-status{display:block!important;width:min(860px,100%)!important;margin:6px auto 0!important;padding-inline:4px!important;color:#777a84!important}
.composer-note{width:min(860px,100%)!important;margin:4px auto 0!important;color:#5f626d!important;font-size:10px!important;text-align:center!important}

.panel-backdrop{background:rgba(0,0,0,.64)!important;backdrop-filter:blur(3px)!important}
.panel{
  border-color:rgba(255,255,255,.09)!important;
  background:#111217!important;
  box-shadow:0 28px 100px rgba(0,0,0,.56)!important;
}
.panel-head{
  border-bottom-color:rgba(255,255,255,.07)!important;
  background:rgba(17,18,23,.94)!important;
}
.panel h2{font-size:23px!important}
.close{background:transparent!important;color:#9a9da7!important}
.close:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
.card,.plan,.row,.google-box{
  border-color:rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.025)!important;
}
.plan.popular,.model-card.selected{
  border-color:rgba(155,140,255,.42)!important;
  background:linear-gradient(135deg,rgba(155,140,255,.12),rgba(255,255,255,.025))!important;
}
.mini-badge,.model-card.selected .model-card-badge{border-color:rgba(155,140,255,.25)!important;background:rgba(155,140,255,.1)!important;color:#dcd6ff!important}
.settings-switch[aria-checked="true"]{background:#8f82f7!important}
.settings-usage-fill{background:linear-gradient(90deg,#8274ef,#a79cff)!important}

.stellar-auth-shell{max-width:430px!important;margin-inline:auto!important}
.stellar-auth-brand{margin-bottom:18px!important}
.auth-provider,.auth-email-submit{min-height:48px!important}
.auth-eyebrow{margin:0 0 8px!important;color:#8f82f7!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em!important;text-align:center!important;text-transform:uppercase!important}
.auth-provider-note{margin:-2px 4px 2px!important;color:#777a84!important;font-size:10px!important;line-height:1.45!important;text-align:center!important}
.auth-free-strip{border-color:rgba(155,140,255,.15)!important;background:rgba(155,140,255,.055)!important}

.stellar-toast{
  border-color:rgba(255,255,255,.1)!important;
  background:#17181e!important;
}

@media(max-width:900px){
  .app{grid-template-columns:1fr!important}
  .side{width:min(296px,86vw)!important}
  .top{padding-inline:10px!important}
  .chat,.composer-wrap{padding-inline:10px!important}
  .model-chip{max-width:42vw!important}
}
@media(max-width:640px){
  .top{height:54px!important}
  .chat{scroll-padding-bottom:160px!important}
  .welcome{min-height:44vh!important;padding-top:32px!important}
  .welcome h1{font-size:34px!important}
  .welcome p{font-size:13px!important}
  .message-actions{opacity:1!important}
  .composer-wrap{padding-top:8px!important;padding-bottom:max(12px,calc(8px + env(safe-area-inset-bottom)))!important}
  .composer{border-radius:22px!important}
  .composer-main{padding:6px!important}
  .composer-tool,#sendBtn{width:44px!important;height:44px!important;min-height:44px!important}
  .composer-status{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important}
  .user .bubble{max-width:92%!important}
  .panel-backdrop{align-items:end!important;padding:0!important}
  .panel{width:100%!important;max-height:90dvh!important;border-radius:22px 22px 0 0!important;border-bottom:0!important}
  .settings-dev-nav-tabs{overflow-x:auto!important;scrollbar-width:none!important}
  .settings-dev-nav-tabs::-webkit-scrollbar{display:none!important}
  .settings-dev-tab{min-height:44px!important;white-space:nowrap!important}
}
@media(max-width:380px){
  .composer-main{grid-template-columns:auto minmax(0,1fr) auto auto!important}
  .web-search-tool{display:none!important}
  .model-chip{max-width:34vw!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}