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

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

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

  --radius: 8px;
  --taskbar-h: 48px;

  --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);
}

.dark {
  --ink: #f3f3f5;
  --ink-soft: #a9b0bd;
  --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; }

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

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

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 150, 0.4);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: 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; }

#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);
}
/* 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);
}