/* Stellar Orbit v3 — presentation only. Existing chat, auth, billing and model routing remain authoritative. */
:root {
  --orbit-bg: #07050d;
  --orbit-bg-2: #0b0715;
  --orbit-panel: #100b1d;
  --orbit-panel-2: #151024;
  --orbit-line: rgba(221, 211, 255, .12);
  --orbit-line-strong: rgba(203, 184, 255, .25);
  --orbit-text: #f8f5ff;
  --orbit-muted: #a79fb8;
  --orbit-dim: #746c82;
  --orbit-violet: #b29aff;
  --orbit-violet-2: #8d70ee;
  --orbit-mint: #7ee8d1;
  --orbit-blue: #91b8ff;
  --orbit-gold: #f1cc77;
}

body.stellar-orbit-v3:not(.light) {
  color: var(--orbit-text) !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(126, 101, 255, .11), transparent 27rem),
    radial-gradient(circle at 30% 94%, rgba(96, 226, 198, .055), transparent 28rem),
    var(--orbit-bg) !important;
}

body.stellar-orbit-v3:not(.light) #main-col,
body.stellar-orbit-v3:not(.light) #chat,
body.stellar-orbit-v3:not(.light) .input-area.glass {
  background: transparent !important;
}

/* Sidebar */
body.stellar-orbit-v3 #sidebar {
  width: 292px !important;
}

body.stellar-orbit-v3:not(.light) #sidebar {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--orbit-line) !important;
  background:
    radial-gradient(circle at 10% 4%, rgba(178, 154, 255, .20), transparent 15rem),
    radial-gradient(circle at 92% 42%, rgba(126, 232, 209, .075), transparent 17rem),
    linear-gradient(180deg, #0d0819 0%, #090611 62%, #07050d 100%) !important;
  box-shadow: 22px 0 65px rgba(0, 0, 0, .24) !important;
}

body.stellar-orbit-v3:not(.light) #sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .52;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.76) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(183,164,255,.66) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(126,232,209,.48) 0 1px, transparent 1.2px);
  background-size: 43px 43px, 67px 67px, 97px 97px;
  background-position: 5px 9px, 19px 34px, 52px 18px;
  mask-image: linear-gradient(to bottom, #000 0 70%, transparent 98%);
}

body.stellar-orbit-v3:not(.light) #sidebar::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -165px;
  top: 118px;
  z-index: -1;
  border: 1px solid rgba(178,154,255,.10);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(178,154,255,.025), 0 0 0 56px rgba(126,232,209,.018);
  pointer-events: none;
}

body.stellar-orbit-v3 .sidebar-brand-row {
  position: relative;
  z-index: 3;
  margin-bottom: 11px !important;
}

body.stellar-orbit-v3:not(.light) .brand-star {
  border: 1px solid rgba(190,173,255,.28) !important;
  color: #e6ddff !important;
  background: linear-gradient(145deg, rgba(178,154,255,.23), rgba(126,232,209,.08)) !important;
  box-shadow: 0 0 22px rgba(178,154,255,.13) !important;
}

body.stellar-orbit-v3:not(.light) .brand-grad {
  color: #fbf9ff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Current model / power card */
.stellar-space-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  margin: 0 0 12px;
  padding: 10px 11px;
  border: 1px solid rgba(201,184,255,.17);
  border-radius: 15px;
  color: inherit;
  text-align: left;
  background: linear-gradient(135deg, rgba(178,154,255,.12), rgba(126,232,209,.045));
  overflow: hidden;
}

.stellar-space-strip:hover,
.stellar-space-strip:focus-visible {
  border-color: rgba(201,184,255,.34);
  background: linear-gradient(135deg, rgba(178,154,255,.17), rgba(126,232,209,.065));
}

.stellar-space-strip:focus-visible {
  outline: 2px solid rgba(126,232,209,.75);
  outline-offset: 2px;
}

.stellar-space-orbit {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(211,198,255,.22);
  border-radius: 50%;
  color: #ded4ff;
  background: rgba(10,7,18,.80);
  font-size: 15px;
}

.stellar-space-orbit::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(178,154,255,.16);
  border-radius: 50%;
  transform: rotate(-26deg) scaleY(.55);
}

.stellar-space-orbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: -2px;
  top: 3px;
  border-radius: 50%;
  background: var(--orbit-mint);
  box-shadow: 0 0 10px rgba(126,232,209,.8);
}

.stellar-space-copy { min-width: 0; }
.stellar-space-kicker {
  display: block;
  color: #81798e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stellar-space-model {
  display: block;
  margin-top: 3px;
  color: #f1ecfa;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stellar-space-depth {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #aaa2b8;
  background: rgba(255,255,255,.035);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stellar-power-meter {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: -2px;
}
.stellar-power-meter span {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.stellar-power-meter span.is-on:nth-child(1) { background: var(--orbit-mint); }
.stellar-power-meter span.is-on:nth-child(2) { background: var(--orbit-violet); }
.stellar-power-meter span.is-on:nth-child(3) { background: var(--orbit-blue); }
.stellar-power-meter span.is-on:nth-child(4) { background: var(--orbit-gold); }

body.stellar-orbit-v3:not(.light) .side-new {
  position: relative;
  z-index: 3;
  min-height: 44px !important;
  border: 1px solid rgba(190,173,255,.25) !important;
  border-radius: 12px !important;
  color: #f8f5ff !important;
  background: linear-gradient(135deg, rgba(178,154,255,.25), rgba(126,232,209,.12)) !important;
}
body.stellar-orbit-v3:not(.light) .side-new:hover,
body.stellar-orbit-v3:not(.light) .side-new:focus-visible {
  border-color: rgba(190,173,255,.48) !important;
  background: linear-gradient(135deg, rgba(178,154,255,.33), rgba(126,232,209,.16)) !important;
}

body.stellar-orbit-v3:not(.light) #search {
  position: relative;
  z-index: 3;
  min-height: 38px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  color: #f0edf7 !important;
  background: rgba(255,255,255,.035) !important;
}
body.stellar-orbit-v3:not(.light) #search:focus {
  border-color: rgba(178,154,255,.38) !important;
  background: rgba(255,255,255,.055) !important;
}

/* Workspace shortcuts */
.stellar-orbit-primary {
  position: relative;
  z-index: 3;
  margin: -2px 0 12px;
}
.stellar-orbit-rail-label {
  margin: 0 4px 6px;
  color: #716a7d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.stellar-orbit-primary-grid {
  display: grid;
  gap: 5px;
}
.stellar-orbit-primary-btn,
.stellar-orbit-primary-link {
  display: grid;
  grid-template-columns: 27px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 39px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #a9a2b5 !important;
  text-decoration: none !important;
  background: transparent;
  text-align: left;
}
.stellar-orbit-primary-btn:hover,
.stellar-orbit-primary-btn:focus-visible,
.stellar-orbit-primary-link:hover,
.stellar-orbit-primary-link:focus-visible {
  color: #f4effc !important;
  border-color: rgba(190,173,255,.13);
  background: rgba(178,154,255,.07);
}
.stellar-orbit-primary-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  color: #cbbdff;
  background: rgba(255,255,255,.025);
  font-size: 12px;
}
.stellar-orbit-primary-copy strong {
  display: block;
  color: inherit;
  font-size: 10px;
  font-weight: 850;
}
.stellar-orbit-primary-copy span {
  display: block;
  margin-top: 1px;
  color: #706978;
  font-size: 8px;
  line-height: 1.3;
}
.stellar-orbit-primary-meta {
  color: #756d83;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

body.stellar-orbit-v3 .chats-label {
  margin-top: 2px !important;
  color: #756e80 !important;
  letter-spacing: .14em !important;
}
body.stellar-orbit-v3:not(.light) .sidebar-item.active {
  border-left-color: var(--orbit-violet) !important;
  background: linear-gradient(90deg, rgba(178,154,255,.13), rgba(178,154,255,.025)) !important;
}
body.stellar-orbit-v3:not(.light) .sidebar-item:hover {
  background: rgba(255,255,255,.035) !important;
}
body.stellar-orbit-v3:not(.light) .acct-box,
body.stellar-orbit-v3:not(.light) .side-foot {
  border-color: rgba(255,255,255,.07) !important;
}
body.stellar-orbit-v3:not(.light) .side-act {
  border-radius: 9px !important;
  color: #9f98ab !important;
}
body.stellar-orbit-v3:not(.light) .side-act:hover,
body.stellar-orbit-v3:not(.light) .side-act:focus-visible {
  color: #f2edf8 !important;
  background: rgba(178,154,255,.065) !important;
}

/* Topbar and composer */
body.stellar-orbit-v3:not(.light) .topbar.glass {
  border-bottom-color: rgba(214,202,255,.09) !important;
  background: rgba(7,5,13,.78) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}
body.stellar-orbit-v3:not(.light) #model-btn {
  border-color: rgba(190,173,255,.23) !important;
  color: #e7ddff !important;
  background: linear-gradient(135deg, rgba(178,154,255,.14), rgba(126,232,209,.055)) !important;
}
body.stellar-orbit-v3:not(.light) #model-btn:hover,
body.stellar-orbit-v3:not(.light) #model-btn[aria-expanded="true"] {
  border-color: rgba(190,173,255,.45) !important;
  background: linear-gradient(135deg, rgba(178,154,255,.21), rgba(126,232,209,.08)) !important;
}

/* Model picker */
body.stellar-orbit-v3:not(.light) #model-menu {
  width: min(366px, calc(100vw - 24px)) !important;
  padding: 10px !important;
  border: 1px solid rgba(201,184,255,.22) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(178,154,255,.14), transparent 12rem),
    rgba(9,7,15,.99) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.60) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
body.stellar-orbit-v3:not(.light) #model-menu .model-menu-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 5px 6px 8px !important;
  color: #f8f5ff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
body.stellar-orbit-v3:not(.light) #model-menu .model-menu-heading span:last-child {
  color: #766e82 !important;
  font-size: 7px !important;
  letter-spacing: .11em !important;
}

.stellar-model-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 5px;
  margin: 0 5px 9px;
  padding: 9px 8px 7px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
.stellar-model-ladder span {
  position: relative;
  padding-top: 10px;
  color: #6f6879;
  font-size: 7px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
.stellar-model-ladder span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}
.stellar-model-ladder span.is-on:nth-child(1)::before { background: var(--orbit-mint); }
.stellar-model-ladder span.is-on:nth-child(2)::before { background: var(--orbit-violet); }
.stellar-model-ladder span.is-on:nth-child(3)::before { background: var(--orbit-blue); }
.stellar-model-ladder span.is-on:nth-child(4)::before { background: var(--orbit-gold); }
.stellar-model-ladder span.is-current { color: #ddd6e9; }

body.stellar-orbit-v3:not(.light) #model-menu [data-model-choice] {
  min-height: 62px !important;
  margin: 3px 0 !important;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
}
body.stellar-orbit-v3:not(.light) #model-menu [data-model-choice]:hover,
body.stellar-orbit-v3:not(.light) #model-menu [data-model-choice]:focus-visible {
  border-color: rgba(190,173,255,.16) !important;
  background: rgba(178,154,255,.075) !important;
}
body.stellar-orbit-v3:not(.light) #model-menu [data-model-choice][aria-checked="true"] {
  border-color: rgba(190,173,255,.33) !important;
  background: linear-gradient(135deg, rgba(178,154,255,.16), rgba(126,232,209,.055)) !important;
  box-shadow: inset 3px 0 var(--orbit-violet) !important;
}
body.stellar-orbit-v3:not(.light) #model-menu #nova-model-btn[aria-checked="true"] {
  border-color: rgba(241,204,119,.40) !important;
  background: linear-gradient(135deg, rgba(241,204,119,.12), rgba(178,154,255,.08)) !important;
  box-shadow: inset 3px 0 var(--orbit-gold) !important;
}
.stellar-model-line { display: flex; align-items: center; gap: 7px; }
.stellar-model-symbol { width: 19px; color: var(--orbit-violet); font-size: 15px; }
.stellar-model-name { color: #f4f0fb; font-size: 12px; font-weight: 900; }
.stellar-model-mode,
.stellar-model-badge {
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  color: #9e96a9;
  background: rgba(255,255,255,.025);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}
.stellar-model-badge { color: #181221; background: #d8c9ff; border-color: transparent; }
.stellar-model-pro { color: #181208; background: var(--orbit-gold); border-color: transparent; }
.stellar-model-desc {
  display: block;
  max-width: 268px;
  margin: 4px 0 0 26px;
  color: #81798d;
  font-size: 8px;
  line-height: 1.38;
}
.stellar-model-note {
  margin: 8px 5px 3px;
  padding: 9px 10px;
  border: 1px solid rgba(126,232,209,.10);
  border-radius: 10px;
  color: #8e879a;
  background: rgba(126,232,209,.025);
  font-size: 8px;
  line-height: 1.45;
}
.stellar-model-note strong { color: #bcefe5; }
body.stellar-orbit-v3:not(.light) #provider-models {
  border-color: rgba(255,255,255,.07) !important;
}

/* Light mode keeps the Orbit structure but dials back the space effects. */
body.stellar-orbit-v3.light #sidebar {
  border-right-color: rgba(88,68,132,.12) !important;
  background: radial-gradient(circle at 8% 4%, rgba(126,101,255,.10), transparent 15rem), linear-gradient(180deg,#faf8ff,#f3f1fa) !important;
}
body.stellar-orbit-v3.light .stellar-space-strip {
  border-color: rgba(94,74,138,.13);
  background: linear-gradient(135deg, rgba(126,101,255,.075), rgba(58,190,164,.045));
}
body.stellar-orbit-v3.light .stellar-space-model,
body.stellar-orbit-v3.light .stellar-orbit-primary-copy strong { color: #282134; }
body.stellar-orbit-v3.light .stellar-space-kicker,
body.stellar-orbit-v3.light .stellar-orbit-primary-copy span,
body.stellar-orbit-v3.light .stellar-orbit-primary-meta { color: #746b80; }
body.stellar-orbit-v3.light .stellar-orbit-primary-btn,
body.stellar-orbit-v3.light .stellar-orbit-primary-link { color: #51485e !important; }

@media (max-width: 767px) {
  body.stellar-orbit-v3 #sidebar { width: min(88vw, 320px) !important; }
  .stellar-space-strip { min-height: 62px; }
  .stellar-orbit-primary-btn,
  .stellar-orbit-primary-link { min-height: 43px; }
  body.stellar-orbit-v3 #model-menu {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(66dvh, 560px) !important;
    overflow-y: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .stellar-space-orbit::before { animation: stellarOrbitSpin 9s linear infinite; }
  @keyframes stellarOrbitSpin { to { transform: rotate(334deg) scaleY(.55); } }
}

@media (prefers-reduced-motion: reduce) {
  .stellar-space-orbit::before { animation: none !important; }
}
