/* BioStudio AI — cross-browser / cross-OS compatibility.
   Mac desktop look is not restyled here. Windows, Firefox, Edge, and compact
   viewports get fallbacks the WebKit/macOS path does not need. */

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

html, body {
  width: 100%;
  max-width: 100%;
}

html.shell-mobile,
html.shell-mobile body,
#os.shell-mobile {
  height: 100%;
  height: -webkit-fill-available;
  height: 100dvh;
  height: var(--vv-height, 100dvh);
  min-height: 100%;
  min-height: 100dvh;
  min-height: var(--vv-height, 100dvh);
}

:root {
  --accent-soft: rgba(47, 107, 255, 0.2);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

/* Windows ClearType: antialiased makes Segoe look thin and grey. Keep
   antialiased on Apple, where it is the intended rendering. */
html.os-windows body,
html.os-android body,
html.os-windows #os:not(.theme-macos) {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

html.os-macos body,
html.os-ios body,
body.theme-macos,
#os.theme-macos {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.os-windows {
  color-scheme: light;
}

html.os-windows.dark,
html.os-windows .dark,
html.os-windows #os.dark {
  color-scheme: dark;
}

html.os-windows,
html.os-windows body,
html.os-windows #os:not(.theme-macos) {
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Tahoma,
    "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

html.os-android,
html.os-android body {
  --font: "Roboto", "Noto Sans", "Segoe UI", system-ui, sans-serif;
}

html.os-windows #os:not(.theme-macos) {
  font-family: var(--font);
}

/* Firefox / classic Windows scrollbars should not shove the layout. */
html.os-windows {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 130, 150, 0.5) transparent;
}

html.os-windows ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.os-windows button,
html.os-android button,
html.shell-mobile button,
html.os-windows [type="button"],
html.os-windows [type="submit"],
html.shell-mobile a,
html.os-windows a {
  touch-action: manipulation;
}

html.os-windows input[type="text"],
html.os-windows input[type="email"],
html.os-windows input[type="password"],
html.os-windows input[type="search"],
html.os-windows input[type="url"],
html.os-windows input[type="number"],
html.os-windows textarea,
html.shell-mobile input[type="text"],
html.shell-mobile input[type="email"],
html.shell-mobile input[type="password"],
html.shell-mobile input[type="search"],
html.shell-mobile textarea {
  appearance: none;
  -webkit-appearance: none;
}

iframe {
  border: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .taskbar,
  .start-menu,
  .toast,
  .user-flyout,
  .fullscreen-message,
  .login-os-picker,
  .auth-loading-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .window,
  .taskbar,
  .start-menu,
  .mobile-tab-bar,
  .auth-gate {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard on compact shells */
#os.shell-mobile {
  padding-bottom: var(--keyboard-inset, 0px);
  box-sizing: border-box;
}