/*
 * Desktop shell, wallpaper, desktop icons, menus, overlays, and shared controls.
 */

#app,
.desktop-shell {
  width: 100%;
  height: 100%;
}

.desktop-shell {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 78% 120% at 18% 100%, rgba(6, 44, 82, 0.82) 0%, transparent 58%),
    linear-gradient(145deg, var(--wallpaper-deep) 0%, var(--wallpaper-base) 42%, #082745 100%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.desktop-shell::before,
.desktop-shell::after {
  content: "";
  position: absolute;
  z-index: var(--z-wallpaper);
  pointer-events: none;
}

.desktop-shell::before {
  inset: -22% -18% -28% 7%;
  background:
    radial-gradient(ellipse 15% 46% at 55% 60%, rgba(177, 246, 255, 0.48) 0%, rgba(65, 200, 235, 0.22) 27%, transparent 64%),
    radial-gradient(ellipse 27% 57% at 51% 53%, rgba(28, 149, 212, 0.75) 0%, rgba(10, 83, 157, 0.54) 44%, transparent 72%),
    radial-gradient(ellipse 34% 70% at 61% 46%, rgba(6, 72, 142, 0.68) 0%, transparent 69%);
  filter: blur(1px) saturate(112%);
  transform: rotate(-17deg);
}

.desktop-shell::after {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 18%, rgba(90, 215, 238, 0.09) 44%, transparent 68%),
    radial-gradient(ellipse at center, transparent 34%, var(--wallpaper-vignette) 118%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.04));
}

.desktop-shell[data-wallpaper="midnight"] {
  --wallpaper-base: #081324;
  --wallpaper-deep: #020711;
  --wallpaper-blue: #183b6d;
  --wallpaper-cyan: #466eb4;
}

.desktop-shell[data-wallpaper="sea-glass"] {
  --wallpaper-base: #08272c;
  --wallpaper-deep: #03171d;
  --wallpaper-blue: #087484;
  --wallpaper-cyan: #4ec6be;
}

.desktop-surface,
.desktop-workspace {
  position: absolute;
  z-index: var(--z-desktop);
  inset: 0 0 var(--taskbar-total-height);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.desktop-surface:focus {
  outline: none;
}

.desktop-icons {
  position: absolute;
  inset: var(--desktop-gutter);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--icon-cell-width);
  grid-template-rows: repeat(auto-fill, var(--icon-cell-height));
  align-content: start;
  justify-content: start;
  gap: 2px 4px;
  overflow: visible;
  pointer-events: none;
}

.desktop-icon {
  position: relative;
  display: grid;
  grid-template-rows: calc(var(--icon-size) + 8px) minmax(24px, auto);
  justify-items: center;
  align-items: start;
  width: var(--icon-cell-width);
  min-height: var(--icon-cell-height);
  padding: 5px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: #fff;
  text-align: center;
  text-shadow: var(--shadow-text);
  pointer-events: auto;
  touch-action: none;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.desktop-icon:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.09);
}

.desktop-icon:active {
  background: rgba(255, 255, 255, 0.055);
  transform: scale(0.98);
}

.desktop-icon.is-selected,
.desktop-icon[aria-selected="true"] {
  border-color: rgba(158, 216, 255, 0.48);
  background: rgba(22, 124, 196, 0.28);
}

.desktop-icon.is-selected:hover,
.desktop-icon[aria-selected="true"]:hover {
  background: rgba(26, 132, 207, 0.35);
}

.desktop-icon:focus-visible {
  outline-offset: -2px;
}

.desktop-icon__tile {
  display: grid;
  place-items: center;
  width: calc(var(--icon-size) + 8px);
  height: calc(var(--icon-size) + 8px);
}

.desktop-icon__label {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.22;
  letter-spacing: 0.01em;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.desktop-icon.is-selected .desktop-icon__label,
.desktop-icon[aria-selected="true"] .desktop-icon__label {
  -webkit-line-clamp: 3;
}

.app-icon {
  --icon-color-a: #28a9e9;
  --icon-color-b: #075eb6;
  --icon-ink: #ffffff;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 11px;
  color: var(--icon-ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.19), transparent 42%),
    linear-gradient(145deg, var(--icon-color-a), var(--icon-color-b));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    var(--shadow-icon);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.app-icon::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.16), transparent 42%);
  pointer-events: none;
}

.app-icon__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
  font-size: calc(var(--icon-size) * 0.39);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}

.app-icon[data-category="arcade"],
.app-icon--arcade,
[data-category="arcade"] > .app-icon {
  --icon-color-a: #10a6e8;
  --icon-color-b: #0755b7;
}

.app-icon[data-category="strategy"],
.app-icon--strategy,
[data-category="strategy"] > .app-icon {
  --icon-color-a: #ec7041;
  --icon-color-b: #b72d35;
}

.app-icon[data-category="puzzle"],
.app-icon--puzzle,
[data-category="puzzle"] > .app-icon {
  --icon-color-a: #56c66b;
  --icon-color-b: #14754a;
}

.app-icon[data-category="simulation"],
.app-icon--simulation,
[data-category="simulation"] > .app-icon {
  --icon-color-a: #36bcbc;
  --icon-color-b: #087078;
}

.app-icon[data-category="idle"],
.app-icon--idle,
[data-category="idle"] > .app-icon {
  --icon-color-a: #f0b545;
  --icon-color-b: #c55b16;
}

.app-icon[data-category="system"],
.app-icon--system,
[data-category="system"] > .app-icon {
  --icon-color-a: #86a7bf;
  --icon-color-b: #3e5b72;
}

.app-icon--settings,
[data-icon="settings"] .app-icon {
  --icon-color-a: #aab7c2;
  --icon-color-b: #536472;
  border-radius: 50%;
}

.app-icon--about,
[data-icon="about"] .app-icon {
  --icon-color-a: #55b7ee;
  --icon-color-b: #1462b0;
}

.app-icon--recycle,
[data-icon="recycle"] .app-icon {
  --icon-color-a: #b7e9f4;
  --icon-color-b: #4da6bd;
  --icon-ink: #073e50;
}

.desktop-selection-box,
.selection-marquee {
  position: absolute;
  z-index: calc(var(--z-desktop) + 1);
  border: 1px solid rgba(96, 185, 244, 0.78);
  background: rgba(0, 120, 212, 0.16);
  pointer-events: none;
}

.context-menu,
.desktop-context-menu {
  position: fixed;
  z-index: var(--z-context);
  width: min(254px, calc(100vw - 16px));
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--border-window);
  border-radius: var(--radius-small);
  color: var(--text-primary);
  background: var(--surface-menu);
  box-shadow: var(--shadow-flyout);
  opacity: 0;
  transform: translateY(-3px) scale(0.985);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-standard);
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(var(--saturate-panel));
  backdrop-filter: blur(var(--blur-panel)) saturate(var(--saturate-panel));
}

.context-menu.is-open,
.desktop-context-menu.is-open,
.context-menu[aria-hidden="false"],
.desktop-context-menu[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.context-menu__item,
.context-menu [role="menuitem"] {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 4px 9px;
  border-radius: 4px;
  color: var(--text-primary);
  text-align: left;
}

.context-menu__item:hover,
.context-menu [role="menuitem"]:hover,
.context-menu [role="menuitem"]:focus-visible {
  background: var(--surface-layer-hover);
}

.context-menu__item:active,
.context-menu [role="menuitem"]:active {
  background: var(--surface-layer-pressed);
}

.context-menu__item[disabled],
.context-menu [role="menuitem"][aria-disabled="true"] {
  color: var(--text-disabled);
  pointer-events: none;
}

.context-menu__icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.context-menu__shortcut {
  padding-left: 18px;
  color: var(--text-tertiary);
  font-size: var(--font-size-caption);
}

.context-menu__separator,
.context-menu [role="separator"] {
  height: 1px;
  margin: 4px 7px;
  background: var(--border-subtle);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 16px;
  border: 1px solid var(--border-default);
  border-bottom-color: var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  background: var(--surface-layer);
  box-shadow: var(--shadow-control);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.button:hover {
  background: var(--surface-layer-hover);
}

.button:active {
  border-bottom-color: var(--border-default);
  background: var(--surface-layer-pressed);
  transform: translateY(1px);
}

.button:disabled,
.button[aria-disabled="true"] {
  color: var(--text-disabled);
  background: var(--surface-layer);
  box-shadow: none;
  pointer-events: none;
}

.button--primary {
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.32);
  color: var(--text-on-accent);
  background: var(--accent);
}

.button--primary:hover {
  background: var(--accent-hover);
}

.button--primary:active {
  background: var(--accent-pressed);
}

.button--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.boot-screen,
.shutdown-overlay {
  position: fixed;
  z-index: var(--z-boot);
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms var(--ease-standard),
    visibility 0s linear 0s;
}

.boot-screen[aria-hidden="true"],
.boot-screen.is-complete,
.shutdown-overlay[aria-hidden="true"]:not(.is-open),
.shutdown-overlay:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-standard),
    visibility 0s linear 420ms;
}

.boot-screen__content,
.shutdown-overlay__content {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
  width: min(320px, calc(100vw - 40px));
  text-align: center;
}

.boot-brand {
  display: grid;
  justify-items: center;
}

.boot-brand__mark {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 5px;
  transform: perspective(560px) rotateY(-12deg) skewX(-4deg);
}

.boot-brand__mark > span {
  display: block;
  background: #f2f2f2;
}

.boot-brand__mark > span:nth-child(1) {
  border-radius: 1px 0 0 0;
}

.boot-brand__mark > span:nth-child(2) {
  border-radius: 0 1px 0 0;
}

.boot-brand__mark > span:nth-child(3) {
  border-radius: 0 0 0 1px;
}

.boot-brand__mark > span:nth-child(4) {
  border-radius: 0 0 1px 0;
}

.blink-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 43%),
    linear-gradient(145deg, #17a6e9, #075bbb 70%);
  box-shadow:
    0 18px 42px rgba(0, 93, 176, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.08em;
}

.boot-spinner {
  position: relative;
  width: 44px;
  height: 44px;
}

.boot-screen .boot-spinner {
  margin-top: 88px;
}

.boot-spinner__arm {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  transform-origin: 50% 100%;
  opacity: 0;
}

.boot-spinner__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #fff;
}

.login-stub {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.login-stub__avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.login-stub__name {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
}

.shutdown-overlay {
  z-index: calc(var(--z-boot) + 1);
  background: #000;
}

.shutdown-overlay__message {
  color: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
}

.toast-region {
  position: fixed;
  z-index: var(--z-tooltip);
  right: 12px;
  bottom: calc(var(--taskbar-total-height) + 12px);
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - var(--taskbar-total-height) - 28px);
  overflow: hidden;
  pointer-events: none;
  transition: bottom 160ms ease;
}

body:has(.quick-settings.is-open) .toast-region {
  bottom: min(
    52vh,
    calc(var(--taskbar-total-height) + 12px + 360px)
  );
}

.toast,
.win-toast {
  position: relative;
  display: grid;
  gap: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-window);
  border-radius: 8px;
  color: var(--text-primary);
  background:
    linear-gradient(180deg, var(--toast-highlight), transparent 42%),
    var(--toast-surface);
  box-shadow: var(--toast-shadow);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(40px) saturate(1.35);
  backdrop-filter: blur(40px) saturate(1.35);
}

.win-toast__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 8px 8px 0 12px;
}

.win-toast__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-secondary);
}

.win-toast__app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #60cdff;
}

.win-toast__app-name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--text-secondary);
  background: transparent;
  opacity: 0.72;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    opacity var(--duration-fast) ease;
}

.win-toast__close:hover {
  color: var(--text-primary);
  background: var(--control-hover);
  opacity: 1;
}

.win-toast__close:active {
  background: var(--control-pressed);
}

.win-toast__body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 14px 14px 12px;
}

.win-toast__hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(145deg, #4cc2ff 0%, #0078d4 55%, #005a9e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 10px rgba(0, 120, 212, 0.28);
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.win-toast__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
}

.win-toast__title,
.toast__title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.win-toast__detail,
.toast__detail {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.win-toast__time {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.2;
}

.desktop-shell[data-theme="light"] .win-toast__app-icon {
  color: #0078d4;
}

.is-dragging,
.is-resizing,
.desktop-shell.is-window-dragging,
.desktop-shell.is-window-resizing {
  cursor: grabbing;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.desktop-shell.is-window-resizing iframe,
.desktop-shell.is-window-dragging iframe {
  pointer-events: none;
}

@media (max-width: 700px) {
  :root {
    --desktop-gutter: 6px;
    --icon-cell-width: 78px;
    --icon-cell-height: 88px;
  }

  .desktop-icons {
    right: auto;
    grid-template-rows: repeat(auto-fill, var(--icon-cell-height));
    max-width: 100%;
  }

  .desktop-icon {
    padding-inline: 2px;
  }

  .desktop-icon__label {
    font-size: 11px;
  }

  .toast-region {
    right: 8px;
    bottom: calc(var(--taskbar-total-height) + 8px);
    left: 8px;
    width: auto;
  }
}

@media (forced-colors: active) {
  .desktop-shell {
    background: Canvas;
  }

  .desktop-shell::before,
  .desktop-shell::after {
    display: none;
  }

  .desktop-icon:hover,
  .desktop-icon.is-selected,
  .desktop-icon[aria-selected="true"] {
    border-color: Highlight;
    color: HighlightText;
    background: Highlight;
    text-shadow: none;
    forced-color-adjust: none;
  }

  .app-icon,
  .context-menu,
  .desktop-context-menu,
  .toast {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}