.window-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.window-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 12, 0.5);
  opacity: 0;
  transition: opacity 0.35s var(--ease-os);
}

.window-layer.is-open {
  pointer-events: auto;
}

.window-layer.is-open .window-backdrop {
  opacity: 1;
}

.app-window {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--window-bg);
  color: var(--window-ink);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  opacity: 0;
  will-change: left, top, width, height, border-radius, opacity;
  transition: left 0.46s var(--ease-os), top 0.46s var(--ease-os),
    width 0.46s var(--ease-os), height 0.46s var(--ease-os),
    border-radius 0.46s var(--ease-os), opacity 0.3s ease;
}

/* Same branded splash as #pageLoader (see initPageLoader() in js/main.js),
   scoped to the window body instead of the whole page — masks a project's
   images/content while they load in, each time an app is opened or
   switched (see showAppLoader()/hideAppLoader() in js/windowManager.js). */
.app-window__loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--window-bg);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.app-window__loader img {
  width: min(140px, 40%);
  height: auto;
}

.app-window__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.window-layer.is-open .app-window {
  opacity: 1;
}

.window-layer.is-closing .window-backdrop {
  opacity: 0;
}

.window-layer.is-closing .app-window {
  opacity: 0;
}

/* ===== Title bar — desktop (macOS) ===== */
.app-window__titlebar {
  flex: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(246, 246, 248, 0.24);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  user-select: none;
}

.is-desktop .app-window__titlebar {
  cursor: grab;
}

.is-desktop .app-window.is-dragging .app-window__titlebar {
  cursor: grabbing;
}

.traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.traffic {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  padding: 0;
  border: none;
}

.traffic--red {
  background: var(--traffic-red);
}

.traffic--yellow {
  background: var(--traffic-yellow);
}

.traffic--green {
  background: var(--traffic-green);
}

button.traffic--red {
  cursor: pointer;
}

.app-window__title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #3a3a3e;
  margin: 0;
  pointer-events: none;
}

/* Project nav — shown (via wireSwitcher() in render.js) flanking the title
   for apps whose project-switcher lives in the titlebar now (Storyboard,
   Editorial), instead of a separate header row under it. Sized +15% over
   the standard .icon-btn. */
/* Bold and on the content itself, not tucked into the thin titlebar strip —
   real user testing showed people plain didn't notice the previous subtle
   grey buttons there, even with the "use the arrows" hint text also on
   screen. Positioned relative to .app-window itself (not the titlebar), so
   they float at the vertical center of the WHOLE window, over both the
   titlebar and the body — same bold look on desktop and mobile. */
/* Frosted glass, like Apple's own translucent round controls (Photos'
   playback buttons, Control Center, …) — a blurred, semi-opaque white disc
   with a soft inner highlight ring, instead of a flat color. Still reads
   clearly over any photo behind it: the blur+shadow give it depth and
   separation regardless of what's underneath. */
.app-window__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 3;
  transition: transform 0.15s var(--ease-out-soft), background 0.15s;
}

.app-window__nav:hover {
  background: rgba(255, 255, 255, 0.4);
}

.app-window__nav:active {
  transform: translateY(-50%) scale(0.9);
}

.app-window__nav[hidden] {
  display: none;
}

.app-window__nav--prev {
  left: 16px;
}

.app-window__nav--next {
  right: 16px;
}

.app-window__close-mobile {
  display: none;
}

.app-window__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--window-bg);
  display: flex;
  flex-direction: column;
}

/* ===== Fullscreen variant — mobile / tablet (iOS/iPadOS) ===== */
/* No visible title bar on mobile — it floats over the content as an overlay
   instead of taking up its own layout row, so the app itself gets the full
   screen height. Just a red ✕ to close (the project-nav arrows live outside
   the titlebar now — see .app-window__nav above — so they need no special
   handling here). */
.is-mobile .app-window__titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  background: transparent;
  /* The base rule's blur still applied here even at background:transparent
     — backdrop-filter blurs whatever's behind the element regardless of its
     own background opacity, so the "invisible" bar was still visibly
     smudging the content under it. Canceling it leaves truly nothing but
     the close ✕ floating on the page. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.is-mobile .traffic-lights {
  display: none;
}

.is-mobile .app-window__titlebar::before {
  display: none;
}

.is-mobile .app-window__title {
  display: none;
}

.is-mobile .app-window__close-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ff3b30;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .app-window,
  .window-backdrop,
  #wallpaper {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}