/* BioStudio AI — Orbit.
   No bar at all. A soft clay hub sits in the bottom-left corner; tapping it
   fans your pinned and running apps along quarter-circle rings (seven to a
   ring) — big, close targets that are quick to hit. All apps and Search sit
   on the inner ring; the tray is a small pill in the top-right. Windows are
   soft clay cards whose title rides in a pill. Pastel, rounded and calm. */

/* --- Palette ---------------------------------------------------------------- */
html:not(.shell-mobile) #os.theme-orbit[data-color-theme],
html:not(.shell-mobile) body.theme-orbit[data-color-theme] {
  --ct-desktop: #efe9ff;
  --ct-bg: #f8f6ff;
  --ct-surface: #ffffff;
  --ct-surface-2: #fbfaff;
  --ct-surface-3: #f1edff;
  --ct-titlebar: #fbfaff;
  --ct-flyout: #ffffff;
  --ct-input: #ffffff;
  --ct-text: #221c3d;
  --ct-muted: #6b6488;
  --ct-faint: #9c96b6;
  --ct-line: rgba(80, 60, 160, 0.12);
  --ct-line-strong: rgba(80, 60, 160, 0.22);
  --ct-hover: rgba(122, 92, 255, 0.08);
  --ct-taskbar: #ffffff;
  --ct-shadow: 0 24px 60px rgba(80, 60, 160, 0.2);
  --nv-clay: linear-gradient(160deg, #ffffff, #f0ecff);
  --nv-clay-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.9), inset 0 -4px 8px rgba(80, 60, 160, 0.1), 0 10px 22px rgba(80, 60, 160, 0.2), 0 2px 4px rgba(80, 60, 160, 0.12);
}

html:not(.shell-mobile) #os.theme-orbit:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]),
html:not(.shell-mobile) body.theme-orbit:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  --ct-desktop: #15122a;
  --ct-bg: #181530;
  --ct-surface: #211d3b;
  --ct-surface-2: #1d1a35;
  --ct-surface-3: #2a2548;
  --ct-titlebar: #1d1a35;
  --ct-flyout: #231f40;
  --ct-input: #17142c;
  --ct-text: #ece8ff;
  --ct-muted: #aca5cf;
  --ct-faint: #7b74a0;
  --ct-line: rgba(169, 150, 255, 0.14);
  --ct-line-strong: rgba(169, 150, 255, 0.26);
  --ct-hover: rgba(169, 150, 255, 0.1);
  --ct-taskbar: #211d3b;
  --ct-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --nv-clay: linear-gradient(160deg, #2c2750, #1f1b39);
  --nv-clay-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.1), inset 0 -4px 8px rgba(0, 0, 0, 0.25), 0 10px 22px rgba(0, 0, 0, 0.45);
}

html:not(.shell-mobile) #os.theme-orbit,
html:not(.shell-mobile) body.theme-orbit {
  --nv-font: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", "BS Inter", "Helvetica Neue", sans-serif;
  --nv-font-title: var(--nv-font);
  --nv-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nv-ink: var(--ct-text);
  --nv-ink-2: var(--ct-muted);
  --nv-ink-3: var(--ct-faint);
  --nv-line: var(--ct-line);
  --nv-surface: var(--ct-surface);
  --nv-surface-3: var(--ct-surface-3);
  --nv-accent: #7a5cff;
  --nv-on-accent: #ffffff;
  --nv-radius: 22px;
  --nv-radius-menu: 18px;
  --nv-radius-item: 12px;
  --nv-win-border: 1px solid rgba(255, 255, 255, 0.75);
  --nv-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 28px 70px rgba(80, 60, 160, 0.24), 0 4px 12px rgba(80, 60, 160, 0.1);
  --nv-shadow-idle: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 40px rgba(80, 60, 160, 0.14);
  --nv-titlebar: var(--ct-surface-2);
  --nv-titlebar-rule: 0 solid transparent;
  --nv-titlebar-h: 44px;
  --nv-title-size: 13px;
  --nv-title-weight: 650;
  --nv-ctl-w: 26px;
  --nv-ctl-h: 22px;
  --nv-ctl-radius: 11px;
  --nv-ctl-gap: 5px;
  --nv-ctl-pad: 12px;
  --nv-ctl-glyph: 11px;
  --nv-hover: var(--ct-hover);
  --nv-close-hover: #ff7aa8;
  --nv-close-ink: #3a0d1e;
  --nv-menu: var(--ct-surface);
  --nv-menu-border: 0 solid transparent;
  --nv-menu-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px rgba(80, 60, 160, 0.22), 0 0 0 1px var(--ct-line);
  --nv-menu-hover: #efeaff;
  --nv-menu-hover-ink: #221c3d;
  --nv-item-h: 32px;
  --nv-scrim: rgba(60, 40, 140, 0.16);
  --nv-desk-ink: var(--ct-text);
  --nv-desk-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  --nv-desk-hover: rgba(255, 255, 255, 0.45);
  --nv-desk-selected: rgba(122, 92, 255, 0.16);
  --nv-scroll: color-mix(in srgb, #7a5cff 45%, transparent);
  --nv-scroll-radius: 999px;
  --taskbar-h: 0px;
  --taskbar-clearance: 0px;
  --orbit-x: 22px;
  --orbit-y: 22px;
}

html:not(.shell-mobile) #os.theme-orbit:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]),
html:not(.shell-mobile) body.theme-orbit:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  --nv-accent: #a996ff;
  --nv-on-accent: #15122a;
  --nv-win-border: 1px solid rgba(255, 255, 255, 0.08);
  --nv-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 70px rgba(0, 0, 0, 0.55);
  --nv-shadow-idle: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.4);
  --nv-menu-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--ct-line);
  --nv-menu-hover: #342d5e;
  --nv-menu-hover-ink: #ece8ff;
  --nv-desk-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  --nv-desk-hover: rgba(255, 255, 255, 0.06);
}

html:not(.shell-mobile) #os.theme-orbit.wp-orbit[data-os-theme] {
  background: url("../assets/wallpapers/orbit-light.svg") left bottom / cover no-repeat, var(--ct-desktop);
}

html:not(.shell-mobile) #os.theme-orbit.wp-orbit[data-os-theme]:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  background: url("../assets/wallpapers/orbit-dark.svg") left bottom / cover no-repeat, var(--ct-desktop);
}

.tk-orbit {
  background: url("../assets/wallpapers/orbit-light.svg") left bottom / cover no-repeat, #efe9ff;
}

html:not(.shell-mobile) #os.theme-orbit .wallpaper-logo-layer,
html:not(.shell-mobile) #os.theme-orbit .wallpaper-wordmark {
  display: none !important;
}

/* Windows stay clear of the tray pill in the top-right corner. */
html:not(.shell-mobile) #os.theme-orbit .desktop-surface {
  inset: 60px 0 0 0;
}

/* --- Windows: clay cards with a title pill ---------------------------------- */
html:not(.shell-mobile) #os.theme-orbit .window .window-titlebar,
html:not(.shell-mobile) #os.theme-orbit .window[data-app-color-theme] .window-titlebar {
  position: relative;
  justify-content: center;
  padding: 0 12px;
}

html:not(.shell-mobile) #os.theme-orbit .window .window-title-text {
  height: 26px;
  padding: 0 14px 0 10px;
  gap: 8px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--nv-accent) 10%, transparent);
}

html:not(.shell-mobile) #os.theme-orbit .window .window-controls {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
}

html:not(.shell-mobile) #os.theme-orbit .window :is(.win-btn.min, .win-btn.max, .win-btn.close) {
  color: #221c3d !important;
}

html:not(.shell-mobile) #os.theme-orbit .window .win-btn.min { background: #ffe9a8 !important; }
html:not(.shell-mobile) #os.theme-orbit .window .win-btn.max { background: #c8f1df !important; }
html:not(.shell-mobile) #os.theme-orbit .window .win-btn.close { background: #ffd0dd !important; }

html:not(.shell-mobile) #os.theme-orbit .window :is(.win-btn.min, .win-btn.max, .win-btn.close):hover {
  filter: saturate(1.4) brightness(0.96);
}

html:not(.shell-mobile) #os.theme-orbit .window :is(.win-btn.skills, .win-btn.notes, .win-btn.newtab, .win-btn.mergeback, .win-btn.pin) {
  background: transparent !important;
}

/* --- The hub and its rings -------------------------------------------------- */
html:not(.shell-mobile) #os.theme-orbit .taskbar {
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none;
  font-family: var(--nv-font);
}

/* A soft glow washes out from the hub while the rings are open. */
html:not(.shell-mobile) #os.theme-orbit .taskbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(var(--orbit-x) + 32px) calc(100% - var(--orbit-y) - 32px), color-mix(in srgb, var(--nv-accent) 22%, transparent), transparent 480px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar.orbit-open::before {
  opacity: 1;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-left,
html:not(.shell-mobile) #os.theme-orbit .tb-show-desktop {
  display: none;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-center {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  display: block;
  gap: 0;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-center > :is(.tb-desktop-pill, .dock-divider, .dock-stack),
html:not(.shell-mobile) #os.theme-orbit .taskbar-center > .tb-icon-btn[title^="Task"] {
  display: none !important;
}

/* Hub. */
html:not(.shell-mobile) #os.theme-orbit .taskbar-start {
  position: absolute;
  left: var(--orbit-x);
  bottom: var(--orbit-y);
  z-index: 3;
  width: 64px;
  min-width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nv-clay);
  box-shadow: var(--nv-clay-shadow);
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.6, 1), box-shadow 0.2s ease;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-start:hover {
  transform: scale(1.05);
}

html:not(.shell-mobile) #os.theme-orbit .taskbar.orbit-open .taskbar-start {
  transform: scale(0.92) rotate(-12deg);
  box-shadow: var(--nv-clay-shadow), 0 0 0 6px color-mix(in srgb, var(--nv-accent) 22%, transparent);
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-start > .icon {
  width: 34px;
  height: 34px;
}

/* Everything on a ring starts folded into the hub. */
html:not(.shell-mobile) #os.theme-orbit :is(.task-btn, .taskbar-center > .tb-search, .taskbar-apps-launcher) {
  position: absolute;
  z-index: 2;
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nv-clay);
  box-shadow: var(--nv-clay-shadow);
  color: var(--ct-text);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition:
    left 0.32s cubic-bezier(0.25, 1.3, 0.5, 1),
    bottom 0.32s cubic-bezier(0.25, 1.3, 0.5, 1),
    opacity 0.2s ease,
    transform 0.32s cubic-bezier(0.25, 1.3, 0.5, 1);
  left: calc(var(--orbit-x) + 6px);
  bottom: calc(var(--orbit-y) + 6px);
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-apps {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  display: block;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar.orbit-open :is(.task-btn, .taskbar-center > .tb-search, .taskbar-apps-launcher) {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar.orbit-open .task-btn {
  left: calc(var(--orbit-x) + 32px + cos(var(--orbit-a, 45deg)) * var(--orbit-r, 142px) - 26px);
  bottom: calc(var(--orbit-y) + 32px + sin(var(--orbit-a, 45deg)) * var(--orbit-r, 142px) - 26px);
  transition-delay: calc(var(--orbit-i, 0) * 22ms);
}

/* Inner ring: Search and All apps. */
html:not(.shell-mobile) #os.theme-orbit .taskbar-center > :is(.tb-search, .taskbar-apps-launcher) {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar.orbit-open .taskbar-center > .tb-search {
  left: calc(var(--orbit-x) + 32px + cos(70deg) * 84px - 21px);
  bottom: calc(var(--orbit-y) + 32px + sin(70deg) * 84px - 21px);
}

html:not(.shell-mobile) #os.theme-orbit .taskbar.orbit-open .taskbar-center > .taskbar-apps-launcher {
  left: calc(var(--orbit-x) + 32px + cos(20deg) * 84px - 21px);
  bottom: calc(var(--orbit-y) + 32px + sin(20deg) * 84px - 21px);
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-center > .tb-search .tb-search-label {
  display: none;
}

html:not(.shell-mobile) #os.theme-orbit :is(.taskbar-center > .tb-search, .taskbar-apps-launcher) > .icon {
  width: 18px;
  height: 18px;
  color: var(--nv-accent);
}

html:not(.shell-mobile) #os.theme-orbit :is(.task-btn-icon, .task-btn-icon .icon) {
  width: 30px;
  height: 30px;
}

html:not(.shell-mobile) #os.theme-orbit :is(.task-btn, .tb-icon-btn):hover {
  background: var(--nv-clay);
  transform: scale(1.1);
}

html:not(.shell-mobile) #os.theme-orbit .task-btn:active {
  transform: scale(0.94);
}

/* Name pill on hover. */
html:not(.shell-mobile) #os.theme-orbit .task-btn .task-btn-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  display: block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ct-surface);
  box-shadow: 0 6px 14px rgba(80, 60, 160, 0.18);
  color: var(--ct-text);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}

html:not(.shell-mobile) #os.theme-orbit .task-btn:hover .task-btn-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Running: a lavender ring; focused: filled accent ring. */
html:not(.shell-mobile) #os.theme-orbit .task-btn-indicator {
  inset: -4px;
  width: auto !important;
  height: auto;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent !important;
  transform: none;
  opacity: 1;
  box-shadow: none !important;
}

html:not(.shell-mobile) #os.theme-orbit .task-btn.running .task-btn-indicator {
  border-color: color-mix(in srgb, var(--nv-accent) 45%, transparent);
}

html:not(.shell-mobile) #os.theme-orbit .task-btn.active .task-btn-indicator {
  border-color: var(--nv-accent);
}

/* Tray: a clay pill in the top-right corner. */
html:not(.shell-mobile) #os.theme-orbit .taskbar-right {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 40px;
  pointer-events: auto;
}

html:not(.shell-mobile) #os.theme-orbit .taskbar-tray {
  height: 40px;
  gap: 2px;
  padding: 0 6px;
  border-radius: 20px;
  background: var(--nv-clay);
  box-shadow: var(--nv-clay-shadow);
}

html:not(.shell-mobile) #os.theme-orbit :is(.tray-chevron, .tray-cluster, .tray-clock, .tray-notif-btn, .tb-style-toggle) {
  height: 30px;
  border-radius: 15px;
  background: transparent;
  color: var(--ct-text);
}

html:not(.shell-mobile) #os.theme-orbit :is(.tray-chevron, .tray-cluster, .tray-clock, .tray-notif-btn, .tb-style-toggle):hover {
  background: var(--ct-hover);
}

html:not(.shell-mobile) #os.theme-orbit .tray-clock {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
}

html:not(.shell-mobile) #os.theme-orbit .tray-clock .clock-date {
  font-size: 12px;
  color: var(--ct-muted);
}

html:not(.shell-mobile) #os.theme-orbit .flyout.opens-up {
  top: 60px !important;
  bottom: auto !important;
}

/* --- Apps view: clay circles on a lavender haze ----------------------------- */
html:not(.shell-mobile) #os.theme-orbit .launchpad-backdrop {
  background: color-mix(in srgb, var(--ct-desktop) 70%, transparent);
  backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.3);
  -webkit-backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.3);
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-glow {
  display: none;
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-searchbar {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: var(--nv-clay);
  box-shadow: var(--nv-clay-shadow);
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-search {
  color: var(--ct-text);
  font-family: var(--nv-font);
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-section-title {
  color: var(--ct-muted);
  font-family: var(--nv-font);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-icon-glyph {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nv-clay);
  box-shadow: var(--nv-clay-shadow);
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-icon-glyph .icon {
  width: 44px;
  height: 44px;
}

html:not(.shell-mobile) #os.theme-orbit .launchpad-label {
  color: var(--ct-text);
  font-family: var(--nv-font);
  font-weight: 600;
  text-shadow: none;
}

/* Desktop icons sit in clay circles too. */
html:not(.shell-mobile) #os.theme-orbit .desktop-icon-glyph {
  border-radius: 50%;
  background: var(--nv-clay);
  box-shadow: var(--nv-clay-shadow);
  padding: 8px;
}

html:not(.shell-mobile) #os.theme-orbit .toast-layer {
  top: 62px;
  bottom: auto;
}