/* windows.css — Custom window chrome
   Jailbroken retro. Monospace. Dark matte. */

/* === WINDOW === */
.wm-window {
  position: fixed;
  display: flex;
  flex-direction: column;
  max-width: 96vw;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 8px 30px rgba(0,0,0,0.2),
    0 2px 8px rgba(0,0,0,0.1),
    0 0 0 1px rgba(0,0,0,0.08);
  will-change: transform;
  cursor: pointer;
}

/* In carousel mode — content is not interactive */
.wm-window:not(.wm-open) .wm-content {
  pointer-events: none;
}

.wm-window:not(.wm-open) .wm-titlebar {
  pointer-events: none;
}

/* When open — full interactive, no cursor override */
.wm-window.wm-open {
  cursor: default;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.2),
    0 0 0 1px rgba(0,0,0,0.12);
  max-height: 94vh;
}

.wm-window.wm-open .wm-content {
  pointer-events: auto;
}

.wm-window.wm-open .wm-titlebar {
  pointer-events: auto;
}

.wm-window.wm-focused {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.4),
    0 10px 30px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.15);
}

.wm-window.wm-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Not-ready windows — dimmed in carousel */
.wm-window.wm-not-ready {
  opacity: 0.5;
  filter: grayscale(0.3);
}

/* === TITLEBAR === */
.wm-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 0 0;
  background: #1a1a1e;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: grab;
  user-select: none;
  min-height: 34px;
  position: relative;
  flex-shrink: 0;
}

.wm-titlebar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.008) 2px,
    rgba(255,255,255,0.008) 3px
  );
  pointer-events: none;
}

.wm-window.wm-dragging .wm-titlebar { cursor: grabbing; }

/* Accent bar */
.wm-accent {
  width: 4px;
  align-self: stretch;
  background: var(--wm-accent, #e04560);
  flex-shrink: 0;
}

/* Title text */
.wm-title {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  flex: 1;
  padding-left: 8px;
}

.wm-window.wm-focused .wm-title {
  color: rgba(255,255,255,0.8);
}

/* Control buttons */
.wm-controls {
  display: flex;
  gap: 2px;
  padding: 4px;
  position: relative;
  z-index: 1;
}

.wm-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.wm-btn:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
}

.wm-close:hover {
  background: #e04560;
  color: #fff;
}

/* === CONTENT AREA === */
.wm-content {
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
  background: var(--page-bg, #0a0a10);
}

/* === INSOMNICHORD WINDOW === */
#wm-insomnichord {
  width: 1100px;
}

#wm-insomnichord.wm-open .wm-content {
  max-height: calc(94vh - 34px);
}

/* === CHROMELESS — instruments float as raw shapes === */
/* !important beats .wm-window.wm-focused / .wm-open specificity */
.wm-chromeless {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: transparent !important;
}

.wm-chromeless .wm-titlebar {
  display: none;
}

/* These ONLY apply in carousel mode — when open, restore normal layout */
.wm-chromeless:not(.wm-open) .wm-content {
  background: transparent !important;
  overflow: visible;
}

/* Strip inner padding so the instrument shape IS the bounding box */
.wm-chromeless:not(.wm-open) #page {
  padding: 0;
}

/* When open, ensure content scrolls properly */
.wm-chromeless.wm-open .wm-content {
  overflow: auto;
  overflow-x: hidden;
}

/* In carousel mode, hide all rectangular backgrounds behind the D-shape
   so only the curved instrument body floats on the white site.
   When opened, the site background transitions to match --page-bg anyway. */
.wm-chromeless:not(.wm-open) #page,
.wm-chromeless:not(.wm-open) .wm-content {
  background: transparent !important;
}

/* Hover glow — instrument "wakes up" when mouse approaches */
.wm-chromeless {
  filter: brightness(0.85) saturate(0.8);
  transition: filter 0.4s ease;
}

.wm-chromeless.hover-glow {
  filter: brightness(1.15) saturate(1.1);
}

.wm-chromeless.hover-glow #omnichord-body {
  box-shadow:
    0 4px 20px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 -2px 8px rgba(0,0,0,0.3) inset,
    0 0 40px rgba(200,168,78,0.08);
}

/* When open — always full brightness */
.wm-chromeless.wm-open {
  filter: none !important;
}

.wm-chromeless.wm-open .wm-content {
  max-height: none;
}

/* === PLACEHOLDER WINDOWS === */
#wm-drumbyte {
  width: 1100px;
}

#wm-nullamp {
  width: 700px;
}

#wm-nullamp.wm-open {
  width: min(72vh, 75vw);
  aspect-ratio: 1 / 1;
}

/* === MOBILE === */
@media (max-width: 768px) {
  /* Carousel mode — flow layout, no absolute positioning */
  .wm-window {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .wm-window:not(.wm-open) {
    max-width: 85vw;
    max-height: 50vh;
  }

  #wm-insomnichord:not(.wm-open) {
    width: 80vw;
  }

  #wm-drumbyte:not(.wm-open) {
    width: 80vw;
  }

  #wm-nullamp:not(.wm-open) {
    width: 65vw;
  }

  /* Open state — full viewport overlay */
  .wm-window.wm-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0;
    z-index: 500 !important;
    transform: none !important;
  }

  .wm-window.wm-open .wm-content {
    max-height: calc(100vh - 34px);
    overflow: auto;
  }

  /* Nullamp open on mobile — override desktop aspect-ratio */
  #wm-nullamp.wm-open {
    width: 100vw !important;
    aspect-ratio: auto;
  }

  /* Chromeless — full brightness on mobile, clip overflow */
  .wm-chromeless {
    filter: none !important;
    overflow: hidden !important;
  }

  .wm-chromeless.wm-open {
    overflow: hidden !important;
  }
}