/**
 * Desktop & Home Screen Stylings
 */

/* ============================================
   DESKTOP CONTAINER - Full viewport on mobile
   Uses dvh for mobile browser compatibility
   ============================================ */

/* Desktop container - ensure full viewport height on mobile */
.desktop {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic viewport height - excludes mobile address bar */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Fallback for browsers that don't support dvh */
@supports not (height: 100dvh) {
  .desktop {
    height: 100vh;
    /* Use calc with env() for safe area on iOS */
    height: calc(100vh - env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================
   iOS DESKTOP BACKGROUND ANIMATIONS
   Subtle zoom effect when apps open/close
   ============================================ */

/* Desktop wallpaper base - ensure it can animate */
.desktop-wallpaper {
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Dock container base - set transform-origin for animations
   NOTE: Do NOT use will-change here - it breaks backdrop-filter!
   will-change is applied only during active animations below */
.desktop--ios .dock-container {
  transform-origin: center bottom;
}

/* iOS home icons base - same approach */
.desktop--ios .ios-home-icons {
  transform-origin: center center;
}

/* When closing an iOS app, lower the desktop-content z-index below dock (1000)
   so the shrinking window goes behind the dock icon */
.desktop--ios.ios-app-closing .desktop-content {
  z-index: 999 !important;
}

/* ===== iOS APP OPENING: Wallpaper + Dock + Home Icons zoom out together ===== */
.desktop--ios.ios-app-opening .desktop-wallpaper {
  animation: ios-bg-expand var(--duration-bg-expand) var(--curve-ios-close) forwards;
}

.desktop--ios.ios-app-opening .dock-container {
  will-change: transform, opacity; /* Only during animation */
  animation: ios-dock-fade-out var(--duration-dock-fade) var(--curve-ios-close) forwards;
}

.desktop--ios.ios-app-opening .ios-home-icons {
  will-change: transform, opacity; /* Only during animation */
  animation: ios-icons-fade-out var(--duration-dock-fade) var(--curve-ios-close) forwards;
}

/* ===== iOS APP CLOSING: Wallpaper + Dock + Home Icons zoom back in ===== */
.desktop--ios.ios-app-closing .desktop-wallpaper {
  animation: ios-bg-shrink var(--duration-bg-shrink) var(--curve-ios-close) forwards;
}

.desktop--ios.ios-app-closing .dock-container {
  will-change: transform, opacity; /* Only during animation */
  animation: ios-dock-fade-in var(--duration-dock-fade) var(--curve-ios-close) forwards;
}

.desktop--ios.ios-app-closing .ios-home-icons {
  will-change: transform, opacity; /* Only during animation */
  animation: ios-icons-fade-in var(--duration-dock-fade) var(--curve-ios-close) forwards;
}

/* ===== STATIC STATES ===== */
/* When app is open (static state), keep background expanded, darkened and dock/icons hidden */
.desktop--ios.ios-app-open .desktop-wallpaper {
  transform: scale(1.2);
  opacity: 0.6;
}

.desktop--ios.ios-app-open .dock-container,
.desktop--ios.ios-app-open .ios-home-icons {
  transform: scale(1.15);
  opacity: 0;
}

/* ===== KEYFRAMES ===== */
@keyframes ios-bg-expand {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

@keyframes ios-bg-shrink {
  0% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ios-dock-fade-out {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }
}

@keyframes ios-dock-fade-in {
  0% {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes ios-icons-fade-out {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(-20px);
    opacity: 0;
  }
}

@keyframes ios-icons-fade-in {
  0% {
    transform: scale(0.8) translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ============================================
   DESKTOP ICONS - macOS Style
   macOS Finder uses 64x64 icons with 12px labels
   Grid flows top-to-bottom, then right-to-left
   Using CSS Grid for animated repositioning
   ============================================ */

.desktop-icons-container {
  display: grid;
  grid-auto-flow: column; /* Fill columns first */
  grid-template-rows: repeat(auto-fill, minmax(100px, auto)); /* Auto rows */
  justify-content: end; /* Align grid to right edge */
  align-content: start; /* Start from top */
  position: absolute;
  top: 40px; /* Below menu bar */
  right: 12px;
  bottom: 90px; /* Above dock */
  left: 210px; /* Leave space for widget (20px + 170px + 20px gap) */
  gap: 8px 12px; /* row-gap column-gap */
  z-index: 1; /* Below windows (desktop-content has z-index: 2+) */
  pointer-events: none; /* Let clicks pass through gaps */
}

/* When widget is hidden (narrow viewport), icons can use full width */
@media (max-width: 500px) {
  .desktop-icons-container {
    left: 12px; /* Use full width when widget is hidden */
  }
}

@media (max-height: 350px) {
  .desktop-icons-container {
    left: 12px; /* Use full width when widget is hidden */
  }
}

/* ============================================
   DESKTOP WIDGETS CONTAINER - macOS Sonoma style
   Positioned on the left side of desktop
   Sized to match 2x2 desktop icons (~170x170)
   ============================================ */

.desktop-widgets-container {
  position: absolute;
  top: 48px; /* Below menu bar with some padding */
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1; /* Below windows */
  pointer-events: auto;
}

/* Hide macOS widget when viewport is too narrow for widget + icons side by side
   Widget needs: 20px left + 170px widget + 20px gap = 210px
   Icons need: right half of screen
   So hide when viewport < 420px (where left half would be < 210px) */
@media (max-width: 500px) {
  .desktop-widgets-container {
    display: none;
  }
}

/* Also hide if viewport height is too short to fit widget + dock
   Widget: 48px top + 170px + 90px dock = 308px minimum */
@media (max-height: 350px) {
  .desktop-widgets-container {
    display: none;
  }
}

/* ============================================
   iOS WIDGET ROW
   Part of the home icons grid, spans all 4 columns
   Fluid height that scales with viewport
   ============================================ */

.ios-home-widget-row {
  grid-column: 1 / -1; /* Span all columns */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Fluid height - scales from ~170px on phones to ~200px on tablets */
  min-height: clamp(150px, 22vh, 220px);
  pointer-events: auto;
}

/* Hide iOS widget when viewport height is too short */
@media (max-height: 450px) {
  .ios-home-widget-row {
    display: none;
  }
}

/* Also hide iOS widget when viewport is very narrow */
@media (max-width: 350px) {
  .ios-home-widget-row {
    display: none;
  }
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: end; /* Right-align within grid cell */
  width: 76px; /* macOS uses ~76px cell width */
  cursor: pointer;
  pointer-events: auto; /* Re-enable clicks on icons */
}

.desktop-icon:active .desktop-icon__glass {
  opacity: 0.8;
}

/* Liquid Glass icon container - matches dock style */
.desktop-icon__glass {
  position: relative;
  width: 64px; /* macOS Finder icon size */
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

/* Glass background layer */
.desktop-icon__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* High-quality image rendering for Retina displays */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* Icon content layer */
.desktop-icon__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* High-quality image rendering for Retina displays */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.desktop-icon-label {
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  /* Strong shadow for contrast on any background */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 0, 0, 0.3);
  line-height: 1.3;
  max-width: 76px;
  /* Max 2 lines with ellipsis */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 2px 4px;
  border-radius: 3px;
  word-break: break-word;
}

/* Selected state - macOS uses blue highlight on label */
.desktop-icon.selected .desktop-icon-label {
  background-color: rgba(0, 102, 204, 0.85);
  text-shadow: none; /* Solid background, no shadow needed */
}

/* Desktop icon badge - iOS-style notification badge */
.desktop-icon__badge {
  display: flex;
  position: absolute;
  top: -6px;
  right: -4px;
  z-index: 10;
  height: 20px;
  padding: 0 6px;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 12px;
  line-height: 1;
  background-color: #FF3B30;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   iOS HOME SCREEN ICONS
   Fluid grid that scales from phones to tablets
   Uses CSS custom properties for adaptable sizing
   ============================================ */

.ios-home-icons {
  /* Fluid icon sizing - scales from ~72px on phones to ~90px on tablets */
  --ios-icon-size: clamp(72px, 18vw, 90px);
  --ios-icon-glass: clamp(64px, 16vw, 80px);
  /* Consistent padding for all sides */
  --ios-padding: clamp(20px, 3vw, 24px);
  
  display: grid;
  /* Auto-fit columns that fill available width - icons spread across viewport */
  grid-template-columns: repeat(4, 1fr);
  /* Spread rows to fill available height */
  grid-auto-rows: auto;
  /* Center icons within their cells */
  justify-items: center;
  align-items: start;
  /* Spread content across full height */
  /* align-content: space-evenly; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Dynamic dock clearance - scales with viewport */
  bottom: calc(clamp(100px, 15vh, 130px) + env(safe-area-inset-bottom, 0px));
  /* Consistent padding on all sides */
  padding: var(--ios-padding);
  z-index: 1;
  pointer-events: none;
  /* Animation readiness - same as dock */
  will-change: transform, opacity;
  transform-origin: center center;
  /* Enable touch events */
  touch-action: manipulation;
}

/* iOS icon styling - fluid sizing */
.ios-home-icons .desktop-icon {
  width: var(--ios-icon-size);
  /* Override macOS right-align - iOS icons are centered */
  justify-self: center;
  pointer-events: auto;
  /* Enable touch events */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ios-home-icons .desktop-icon__glass {
  width: var(--ios-icon-glass);
  height: var(--ios-icon-glass);
}

.ios-home-icons .desktop-icon-label {
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 400;
  max-width: var(--ios-icon-size);
  /* iOS uses lighter shadow */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(0, 0, 0, 0.3);
}