/* BioStudio AI — base reset + design tokens (Windows 11) */

:root {
  --accent: #2f6bff;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-ink: #ffffff;
  --on-primary: #ffffff;
  --primary: var(--accent);
  --primary-soft: var(--accent-soft);

  --ink: #1b1b1f;
  --ink-soft: #5d6470;

  /* Aliases used by apps (ELN, search, graph) that predate the OS token names.
     Keep these pointing at the live shell tokens so theme switches propagate. */
  --text: var(--ink);
  --muted: var(--ink-soft);
  --surface: var(--win-body-bg, #fbfbfd);
  --border: var(--win-border, rgba(20, 30, 50, 0.12));
  --app-bg: var(--win-body-bg, #fbfbfd);
  --app-bar: var(--titlebar-bg, rgba(245, 246, 249, 0.9));
  --app-line: var(--win-border, rgba(0, 0, 0, 0.1));
  --app-btn: var(--win-bg, rgba(255, 255, 255, 0.8));
  --app-btn-hover: var(--tb-hover, rgba(0, 0, 0, 0.06));
  --app-input: var(--input-bg, #fff);
  --menu-bg: var(--flyout-bg, #ffffff);
  --menu-border: var(--flyout-border, rgba(15, 23, 42, 0.12));
  --menu-hover: var(--tb-hover, rgba(15, 23, 42, 0.06));
  --scrollbar-thumb: rgba(120, 130, 150, 0.4);
  --scrollbar-thumb-hover: rgba(120, 130, 150, 0.6);

  --radius: 8px;
  --shell-scale: 1;
  --taskbar-h: clamp(42px, calc(48px * var(--shell-scale)), 54px);
  /* Space reserved below windows for the taskbar/dock (may exceed --taskbar-h
     when the dock floats above the bottom edge). */
  --taskbar-clearance: var(--taskbar-h);
  /* Extra inset when the browser window extends under the OS dock/taskbar. */
  --os-system-dock-clearance: 0px;
  --desktop-pad: clamp(8px, calc(16px * var(--shell-scale)), 18px);
  --desktop-icon-glyph-large: clamp(38px, calc(50px * var(--shell-scale)), 54px);
  --desktop-icon-width-large: clamp(78px, calc(100px * var(--shell-scale)), 106px);
  --desktop-icon-cell-large: calc(var(--desktop-icon-width-large) + 36px);
  --desktop-icon-row-large: clamp(96px, calc(122px * var(--shell-scale)), 130px);
  --desktop-icon-glyph-medium: clamp(30px, calc(38px * var(--shell-scale)), 42px);
  --desktop-icon-width-medium: clamp(68px, calc(86px * var(--shell-scale)), 92px);
  --desktop-icon-cell-medium: calc(var(--desktop-icon-width-medium) + 36px);
  --desktop-icon-row-medium: clamp(86px, calc(106px * var(--shell-scale)), 114px);
  --desktop-icon-glyph-small: clamp(24px, calc(28px * var(--shell-scale)), 32px);
  --desktop-icon-width-small: clamp(58px, calc(74px * var(--shell-scale)), 80px);
  --desktop-icon-cell-small: calc(var(--desktop-icon-width-small) + 36px);
  --desktop-icon-row-small: clamp(76px, calc(92px * var(--shell-scale)), 100px);
  --desktop-icon-label: clamp(10px, calc(12px * var(--shell-scale)), 13px);
  --desktop-icon-label-large: clamp(11px, calc(13px * var(--shell-scale)), 14px);
  --desktop-icon-label-small: clamp(9.5px, calc(11px * var(--shell-scale)), 12px);
  --window-titlebar-h: clamp(34px, calc(40px * var(--shell-scale)), 42px);
  --window-control-w: clamp(38px, calc(46px * var(--shell-scale)), 50px);
  --window-min-w: min(260px, calc(100vw - 16px));
  --window-min-h: min(180px, calc(100vh - var(--taskbar-h) - 16px));
  --taskbar-button: clamp(36px, calc(40px * var(--shell-scale)), 44px);
  --taskbar-icon: clamp(20px, calc(24px * var(--shell-scale)), 26px);

  --font: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* taskbar */
  --taskbar-bg: rgba(243, 244, 248, 0.72);
  --taskbar-border: rgba(255, 255, 255, 0.4);
  --tb-hover: rgba(0, 0, 0, 0.06);
  --tb-active: rgba(0, 0, 0, 0.045);
}

@media (min-width: 1600px) and (min-height: 900px) {
  :root { --shell-scale: 1.08; }
}

@media (max-width: 1100px), (max-height: 700px) {
  :root { --shell-scale: 0.92; }
}

@media (max-width: 760px), (max-height: 560px) {
  :root { --shell-scale: 0.84; }
}

@media (max-width: 430px) {
  :root { --shell-scale: 0.78; }
}

.dark {
  --ink: #f3f3f5;
  --ink-soft: #a9b0bd;
  --text: var(--ink);
  --muted: var(--ink-soft);
  --surface: var(--win-body-bg, #1f1f25);
  --border: var(--win-border, rgba(255, 255, 255, 0.1));
  --taskbar-bg: rgba(30, 30, 36, 0.72);
  --taskbar-border: rgba(255, 255, 255, 0.08);
  --tb-hover: rgba(255, 255, 255, 0.08);
  --tb-active: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure the [hidden] attribute always wins over author display rules. */
[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; }

html.shell-mobile,
html.shell-mobile body,
#os.shell-mobile {
  height: 100dvh;
  min-height: 100dvh;
}

html.shell-mobile {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.shell-mobile body {
  overscroll-behavior: none;
}

html.shell-mobile button,
html.shell-mobile a,
html.shell-mobile .mobile-tab,
html.shell-mobile .btn,
html.shell-mobile .st-btn,
html.shell-mobile .st-tbtn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(10, 132, 255, 0.18);
}

html.shell-mobile.keyboard-open,
html.shell-mobile.keyboard-open body,
html.shell-mobile.keyboard-open #os.shell-mobile {
  height: var(--vv-height, 100dvh);
  min-height: 0;
}


body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: text;
  -webkit-user-select: text;
}

/* Opt-out for drag handles, canvases during move, and other interactive chrome. */
.no-select,
.no-select * {
  user-select: none;
  -webkit-user-select: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

html { scrollbar-color: var(--scrollbar-thumb, rgba(120, 130, 150, 0.4)) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(120, 130, 150, 0.4));
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, rgba(120, 130, 150, 0.6)); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Icon helper rendering */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
  line-height: 1;
  flex: 0 0 auto;
}
.icon svg { width: 100%; height: 100%; display: block; }
.icon.icon-emoji { font-style: normal; }

/* App-icon shape language.
   Every registry app icon draws its artwork as a 40x40 rounded rect inside a
   48-unit box, which leaves a transparent margin and a fixed corner radius.
   Themes re-cut that: --app-icon-bleed scales the art out to the element edge
   and --app-icon-radius clips it to the theme's own shape, so one artwork set
   reads as macOS squircles in one theme and as circles in another. Defaults
   leave the artwork exactly as drawn. */
:root {
  --app-icon-radius: 0px;
  --app-icon-bleed: 1;
}
.icon.icon-app {
  border-radius: var(--app-icon-radius);
  overflow: hidden;
}
.icon.icon-app > svg { transform: scale(var(--app-icon-bleed)); }

/* Shared "account" flyout (js/core/user-flyout.js) — the panel dropped by
   every OS-style dashboard's top-right user button. Token-driven so it
   matches whatever theme/dark-mode is active without per-theme CSS;
   callers only add a positioning rule for their own wrapper class (see
   `.bsx-user-flyout` / `.bs2-user-flyout`). */
.user-flyout {
  z-index: 20;
  width: min(260px, 90vw);
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: user-flyout-in 0.14s ease;
}
@keyframes user-flyout-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.user-flyout-head { display: flex; align-items: center; gap: 10px; }
.user-flyout-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-primary, #fff);
  font: 700 12.5px var(--font);
}
.user-flyout-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-flyout-name {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-flyout-email {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-flyout-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.user-flyout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 9px;
  font: 600 12.5px var(--font);
  color: var(--ink);
  transition: background 0.12s ease;
}
.user-flyout-item:hover { background: var(--tb-hover, rgba(0, 0, 0, 0.06)); }
.user-flyout-item.danger { color: var(--danger, #e5484d); }

#os {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: background 0.6s ease;
}

/* Screen brightness dimmer driven by Quick Settings */
#os::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(1 - var(--screen-dim, 1));
  pointer-events: none;
  z-index: 9990;
  transition: opacity 0.2s ease;
}

/* Windows 11-style "Bloom" wallpapers — original abstract gradients */
#os.wp-aurora {
  background:
    radial-gradient(1100px 760px at 72% 18%, rgba(120, 170, 255, 0.55), transparent 60%),
    radial-gradient(900px 700px at 24% 88%, rgba(170, 110, 255, 0.5), transparent 62%),
    radial-gradient(700px 600px at 50% 50%, rgba(80, 200, 255, 0.25), transparent 60%),
    linear-gradient(140deg, #0a1a45, #143084 48%, #2f6bff);
}
#os.wp-mint {
  background:
    radial-gradient(1000px 700px at 80% 12%, rgba(110, 255, 203, 0.5), transparent 60%),
    radial-gradient(800px 620px at 18% 90%, rgba(60, 230, 200, 0.4), transparent 62%),
    linear-gradient(140deg, #04332b, #0f9d76 60%, #43d6a6);
}
#os.wp-sunset {
  background:
    radial-gradient(1000px 700px at 22% 8%, rgba(255, 208, 107, 0.5), transparent 60%),
    radial-gradient(900px 700px at 82% 92%, rgba(255, 80, 140, 0.45), transparent 62%),
    linear-gradient(140deg, #34103c, #b5305f 46%, #ff6a3d);
}
#os.wp-midnight {
  background:
    radial-gradient(1100px 780px at 70% 12%, rgba(124, 92, 255, 0.45), transparent 60%),
    radial-gradient(800px 700px at 20% 92%, rgba(60, 90, 200, 0.4), transparent 62%),
    linear-gradient(160deg, #04050d, #121433 56%, #262a58);
}
#os.wp-biostudio {
  background:
    linear-gradient(90deg, rgba(3, 10, 24, 0.18), rgba(3, 10, 24, 0) 52%, rgba(3, 10, 24, 0.1)),
    url("../biostudio-branded-background-base.png") center / cover no-repeat,
    radial-gradient(1100px 760px at 78% 18%, rgba(34, 211, 238, 0.35), transparent 62%),
    linear-gradient(135deg, #020815, #071a2c 55%, #092f36);
}
.wallpaper-logo-layer {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wallpaper-logo-layer.is-active {
  display: block;
}
.wallpaper-logo {
  position: absolute;
  background: url("../icons/logo-mark.svg") center / contain no-repeat;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.wallpaper-logo-big {
  animation: wallpaper-logo-idle var(--wallpaper-idle-ms, 360s) linear infinite;
  animation-play-state: paused;
}
.wallpaper-logo-layer.is-idle-spinning .wallpaper-logo-big {
  will-change: transform;
  animation-play-state: running;
}
.wallpaper-logo-layer.is-ticking .wallpaper-logo-small {
  will-change: transform;
}
.wallpaper-logo-small {
  z-index: 2;
  transition: scale 0.5s cubic-bezier(0.2, 1.5, 0.35, 1), filter 0.6s ease;
}
/* The small mark invites a click, then fires: it pops and glows while the
   splash plays (js/core/wallpaper-logos.js). */
#os.wallpaper-logo-hover-small .wallpaper-logo-small {
  scale: 1.04;
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.55));
}
.wallpaper-logo-layer.is-splashing .wallpaper-logo-small {
  scale: 1.1;
  filter: drop-shadow(0 0 18px rgba(45, 212, 191, 0.8)) drop-shadow(0 0 42px rgba(34, 211, 238, 0.35)) saturate(1.25) brightness(1.08);
}
.wallpaper-logo-layer.is-splashing .wallpaper-wordmark-rule {
  transform-origin: right center;
  animation: wallpaper-rule-charge 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes wallpaper-rule-charge {
  0% { transform: scaleX(0.04); box-shadow: 0 0 0 rgba(45, 212, 191, 0); }
  55% { transform: scaleX(1); box-shadow: 0 0 16px rgba(45, 212, 191, 0.95); }
  100% { transform: scaleX(1); box-shadow: 0 0 0 rgba(45, 212, 191, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wallpaper-logo-small { transition: none; }
  .wallpaper-logo-layer.is-splashing .wallpaper-wordmark-rule { animation: none; }
}
@keyframes wallpaper-logo-idle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wallpaper-logo-big {
    animation: none;
  }
}
.wallpaper-wordmark {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12em;
  pointer-events: none;
  user-select: none;
  color: #fff;
  font-family: Manrope, "Avenir Next", "Segoe UI", sans-serif;
  text-align: right;
  line-height: 1;
  filter: drop-shadow(0 2px 14px rgba(2, 8, 23, 0.88));
}
.wallpaper-wordmark-title {
  font-weight: 700;
  font-size: var(--word-title, 102px);
  letter-spacing: -0.034em;
  white-space: nowrap;
}
.wallpaper-wordmark-title .ai {
  color: #2dd4bf;
}
.wallpaper-wordmark-rule {
  width: 74%;
  height: 3px;
  border-radius: 2px;
  background: #2dd4bf;
  opacity: 0.85;
}
.wallpaper-wordmark-url {
  font-weight: 600;
  font-size: var(--word-url, 32px);
  letter-spacing: 0.17em;
  color: #c9d6e8;
  white-space: nowrap;
}
.wallpaper-logo-splash {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#os.wallpaper-logo-hover-small .desktop-surface,
#os.wallpaper-logo-hover-big .desktop-surface {
  cursor: pointer;
}
#os.wp-biostudio.theme-macos {
  background-position: center;
}
/* macOS Big Sur / Sonoma-style layered sky wallpaper */
#os.wp-macos {
  background:
    radial-gradient(1200px 820px at 78% 8%, rgba(255, 160, 120, 0.55), transparent 58%),
    radial-gradient(1000px 760px at 18% 22%, rgba(255, 110, 170, 0.5), transparent 60%),
    radial-gradient(1100px 900px at 50% 100%, rgba(70, 120, 255, 0.6), transparent 62%),
    linear-gradient(160deg, #5a2a8f, #7b3fb0 30%, #c0517f 60%, #ff8a6a);
}
#os.wp-macos.dark {
  background:
    radial-gradient(1200px 820px at 78% 8%, rgba(120, 80, 200, 0.55), transparent 58%),
    radial-gradient(1000px 760px at 18% 22%, rgba(60, 70, 160, 0.55), transparent 60%),
    radial-gradient(1100px 900px at 50% 100%, rgba(30, 40, 110, 0.7), transparent 62%),
    linear-gradient(160deg, #0a0a1f, #16193b 45%, #221a44 70%, #3a2360);
}