/* ============================================================
   DESKTOP.CSS — Desktop, icons, taskbar, start menu
   Frutiger Aero — Heavy gradients, real reflections, orbs
   ============================================================ */

/* ---- Desktop ---- */
#desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #001228;
}

#desktop-bg {
  position: absolute;
  inset: 0;
  background-color: #001228;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: saturate(1.05);
  transition: opacity 0.5s;
}

#bg-canvas {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- Desktop ambient orb decorations ---- */
.desk-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

/* ---- Icon container ---- */
#icon-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 44px;
  z-index: 10;
}

/* ---- Desktop icon ---- */
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
  position: absolute;
  width: 82px;
  text-align: center;
}

.desktop-icon:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(100,180,255,0.10) 100%);
  border-color: rgba(255,255,255,0.32);
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 18px rgba(0,150,214,0.32),
    0 1px 0 rgba(255,255,255,0.20) inset;
}

.desktop-icon.selected {
  background: linear-gradient(180deg, rgba(0,150,214,0.28) 0%, rgba(0,100,180,0.20) 100%);
  border-color: rgba(64,196,232,0.60);
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 20px rgba(0,150,214,0.45),
    0 0 0 1px rgba(64,196,232,0.32),
    0 1px 0 rgba(255,255,255,0.25) inset;
}

.desktop-icon.dragging {
  opacity: 0.80;
  transform: scale(1.10) rotate(1deg);
  z-index: 999;
  box-shadow: 0 16px 48px rgba(0,150,214,0.65);
}

.icon-img {
  width: 48px;
  height: 48px;
  font-size: 38px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,0.65))
    drop-shadow(0 1px 2px rgba(0,0,0,0.40));
  transition: transform 0.22s var(--ease-spring), filter 0.22s;
  position: relative;
}

.desktop-icon:hover .icon-img {
  transform: translateY(-4px) scale(1.12);
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,0.70))
    drop-shadow(0 0 10px rgba(64,196,232,0.55));
}

/* Icon shine — drop-shadow only, no overlay box */

/* Icon floor reflection */
.desktop-icon::after {
  content: attr(data-emoji);
  position: absolute;
  bottom: -30px;
  left: 50%; transform: translateX(-50%) scaleY(-0.35);
  transform-origin: top center;
  font-size: 38px;
  opacity: 0.18;
  filter: blur(1.5px);
  pointer-events: none;
  z-index: -1;
}

.icon-label {
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.95),
    0 0 10px rgba(0,0,0,0.70),
    0 0 2px rgba(0,0,0,1);
  line-height: 1.3;
  word-break: break-word;
  max-width: 74px;
  letter-spacing: 0.2px;
}

/* ============================
   TASKBAR
   ============================ */
#taskbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 46px;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;

  /* Aero glass — bright top half fading into deep dark body */
  background:
    linear-gradient(180deg,
      rgba(175,215,255,0.68) 0%,
      rgba(100,160,248,0.72) 22%,
      rgba(22,78,198,0.86) 44%,
      rgba(8,46,155,0.93) 66%,
      rgba(0,20,96,0.97) 84%,
      rgba(0,10,52,1.00) 100%
    );
  backdrop-filter: blur(16px) saturate(200%) brightness(108%);
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(108%);

  /* Top highlight line (the iconic Aero shine) */
  border-top: 1px solid rgba(200,235,255,0.90);

  box-shadow:
    0 -1px 0 rgba(80,150,255,0.65),
    0 -10px 40px rgba(0,40,160,0.75),
    0 -3px 16px rgba(0,90,220,0.45),
    inset 0 1px 0 rgba(220,245,255,0.55),
    inset 0 3px 14px rgba(140,200,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.30);
}

/* Taskbar glass-top reflection band */
#taskbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(200,235,255,0.12) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* Ultra-bright specular strip at top edge */
#taskbar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.90) 50%,
    rgba(255,255,255,0.55) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* ---- Start button ---- */
#start-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 16px 5px 8px;
  border-radius: 22px;
  border: 1px solid rgba(0,220,140,0.50);
  background:
    linear-gradient(180deg,
      rgba(60,220,140,0.50) 0%,
      rgba(0,180,100,0.60) 40%,
      rgba(0,120,70,0.72) 70%,
      rgba(0,80,50,0.82) 100%
    );
  backdrop-filter: blur(12px);
  color: white;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,60,30,0.70);
  box-shadow:
    0 0 14px rgba(0,200,128,0.45),
    0 3px 10px rgba(0,0,0,0.40),
    0 1px 0 rgba(120,255,190,0.50) inset,
    0 -1px 0 rgba(0,0,0,0.20) inset;
  transition: all 0.18s var(--ease-smooth);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative; overflow: hidden;
}

#start-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 52%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.22) 55%,
    transparent 100%
  );
  pointer-events: none; border-radius: inherit;
}

#start-btn:hover {
  background:
    linear-gradient(180deg,
      rgba(80,240,160,0.58) 0%,
      rgba(0,210,120,0.68) 40%,
      rgba(0,150,90,0.80) 70%,
      rgba(0,100,65,0.88) 100%
    );
  box-shadow:
    0 0 24px rgba(0,220,140,0.75),
    0 0 48px rgba(0,200,128,0.35),
    0 3px 10px rgba(0,0,0,0.40),
    0 1px 0 rgba(160,255,210,0.60) inset;
  transform: translateY(-1px);
}

#start-btn.active {
  transform: translateY(1px);
  box-shadow: 0 0 18px rgba(0,200,128,0.55), inset 0 2px 6px rgba(0,0,0,0.25);
}

.start-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,0.95) 0%,
      var(--green-light) 22%,
      var(--green-bright) 44%,
      var(--green-mid) 64%,
      var(--green-dark) 100%
    );
  box-shadow:
    0 0 10px rgba(0,220,140,0.85),
    0 0 22px rgba(0,200,128,0.45),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    inset 0 1px 2px rgba(255,255,255,0.55);
  flex-shrink: 0;
  position: relative;
}

.start-orb::after {
  content: '';
  position: absolute;
  top: 7%; left: 18%; width: 44%; height: 38%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.85) 0%, transparent 100%);
  border-radius: 50%; filter: blur(1.5px);
}

/* ---- Quick launch ---- */
#quick-launch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
  height: 34px;
}

.quick-icon {
  width: 30px;
  height: 30px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: all 0.14s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
  position: relative;
}

.quick-icon:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(100,180,255,0.14) 100%);
  transform: translateY(-2px);
  filter: drop-shadow(0 5px 10px rgba(0,150,214,0.60));
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
}

/* ---- Taskbar app buttons ---- */
#taskbar-buttons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  overflow: hidden;
  padding: 0 4px;
}

.taskbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  max-width: 160px;
  min-width: 80px;
  height: 34px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      rgba(100,160,255,0.10) 45%,
      rgba(0,50,140,0.22) 100%
    );
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.14s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.60);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
  position: relative;
}

.taskbar-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
  pointer-events: none;
}

.taskbar-btn:hover {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(100,180,255,0.18) 45%,
      rgba(0,80,180,0.30) 100%
    );
  border-color: rgba(64,196,232,0.40);
  box-shadow: 0 0 10px rgba(64,196,232,0.28), 0 1px 0 rgba(255,255,255,0.18) inset;
}

.taskbar-btn.active {
  background:
    linear-gradient(180deg,
      rgba(64,196,232,0.32) 0%,
      rgba(0,150,214,0.42) 55%,
      rgba(0,100,180,0.55) 100%
    );
  border-color: rgba(64,196,232,0.65);
  box-shadow:
    0 0 14px rgba(64,196,232,0.42),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  color: white;
}

.taskbar-btn-icon { font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.taskbar-btn-label { overflow: hidden; text-overflow: ellipsis; }

/* ---- System tray ---- */
#system-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-left: 1px solid rgba(255,255,255,0.12);
  height: 34px;
  flex-shrink: 0;
}

.tray-icon {
  font-size: 16px;
  opacity: 0.82;
  transition: all 0.14s;
  filter: drop-shadow(0 0 4px rgba(64,196,232,0.40));
}

.tray-icon:hover {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(64,196,232,0.90));
  transform: scale(1.12);
}

#tray-clock {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 0 10px rgba(64,196,232,0.60), 0 1px 3px rgba(0,0,0,0.50);
  min-width: 48px;
  text-align: center;
  letter-spacing: 0.8px;
}

/* ============================
   START MENU
   ============================ */
#start-menu {
  position: absolute;
  bottom: 50px;
  left: 4px;
  width: 390px;
  border-radius: 12px 12px 0 12px;
  background:
    linear-gradient(160deg,
      rgba(30,70,160,0.88) 0%,
      rgba(10,50,140,0.84) 25%,
      rgba(0,38,110,0.90) 60%,
      rgba(0,20,72,0.96) 100%
    );
  backdrop-filter: blur(20px) saturate(200%) brightness(112%);
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(112%);
  border: 1px solid rgba(100,185,255,0.45);
  border-top-color: rgba(180,230,255,0.60);
  border-bottom: none;
  box-shadow:
    0 -24px 80px rgba(0,30,130,0.82),
    0 0 0 1px rgba(255,255,255,0.12) inset,
    inset 0 1px 0 rgba(210,240,255,0.42),
    inset 0 0 40px rgba(0,60,160,0.18);
  z-index: 5500;
  overflow: hidden;
  animation: start-menu-open 0.26s var(--ease-spring);
}

/* Top shine on start menu */
#start-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 42%;
  background: linear-gradient(180deg,
    rgba(180,225,255,0.26) 0%,
    rgba(120,190,255,0.10) 55%,
    transparent 100%
  );
  pointer-events: none; z-index: 1;
}

.start-menu-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(90deg,
      rgba(0,160,100,0.38) 0%,
      rgba(0,100,200,0.28) 50%,
      transparent 100%
    );
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.start-user-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,0.85) 0%,
      var(--blue-light) 38%,
      var(--blue-mid) 75%
    );
  box-shadow:
    0 0 14px rgba(64,196,232,0.60),
    inset 0 -2px 5px rgba(0,0,0,0.25),
    inset 0 1px 2px rgba(255,255,255,0.55);
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.30);
}

.start-username {
  font-size: 15px; font-weight: 800;
  color: white;
  text-shadow: 0 0 14px rgba(64,196,232,0.60), 0 1px 3px rgba(0,0,0,0.50);
}

.start-user-status {
  font-size: 11px; color: var(--green-light); margin-top: 3px;
  text-shadow: 0 0 8px rgba(0,200,128,0.60);
}

.start-menu-body { display: flex; height: 330px; }

.start-menu-left {
  flex: 1; padding: 8px;
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow-y: auto;
}

.start-menu-right {
  width: 155px; padding: 8px;
  background: rgba(0,15,60,0.35);
  overflow-y: auto;
}

.start-section-title {
  font-size: 10px; font-weight: 800;
  color: rgba(140,200,255,0.55);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 8px 4px;
}

.start-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(255,255,255,0.90);
  font-size: 13px; font-weight: 600;
  transition: all 0.12s;
  white-space: nowrap;
}

.start-item:hover {
  background: linear-gradient(90deg, rgba(64,196,232,0.22) 0%, rgba(64,196,232,0.08) 100%);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
  padding-left: 14px;
}

.start-item-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.50));
}

.start-menu-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,10,50,0.50);
}

.start-footer-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: 5px;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,0.90);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,30,80,0.20) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  transition: all 0.14s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.60);
}

.start-footer-btn:hover {
  background: linear-gradient(180deg, rgba(200,50,50,0.40) 0%, rgba(160,20,20,0.50) 100%);
  border-color: rgba(255,100,100,0.45);
  box-shadow: 0 0 14px rgba(255,60,60,0.35);
}

/* ============================
   CONTEXT MENU
   ============================ */
#context-menu {
  position: fixed;
  min-width: 190px;
  border-radius: 8px;
  background:
    linear-gradient(160deg,
      rgba(18,52,140,0.92) 0%,
      rgba(6,40,120,0.88) 40%,
      rgba(0,25,85,0.95) 100%
    );
  backdrop-filter: blur(16px) saturate(200%) brightness(110%);
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(110%);
  border: 1px solid rgba(100,185,255,0.42);
  border-top-color: rgba(180,230,255,0.58);
  box-shadow:
    0 16px 52px rgba(0,20,90,0.82),
    0 0 0 1px rgba(255,255,255,0.10) inset,
    inset 0 1px 0 rgba(210,240,255,0.38);
  z-index: 99000;
  padding: 5px;
  animation: context-appear 0.16s var(--ease-spring);
  overflow: hidden;
}

/* Top sheen */
#context-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 42%;
  background: linear-gradient(180deg,
    rgba(180,225,255,0.28) 0%,
    rgba(120,190,255,0.10) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.92);
  transition: all 0.10s;
  white-space: nowrap;
  position: relative; z-index: 1;
}

.ctx-item:hover {
  background: linear-gradient(90deg, rgba(64,196,232,0.25) 0%, rgba(64,196,232,0.10) 100%);
  color: white;
  padding-left: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}

.ctx-item-icon { font-size: 16px; width: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.50)); }

.ctx-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,170,255,0.30), transparent);
  margin: 4px 8px;
}

/* ============================
   FRUTIGER AERO image watermarks on desktop
   ============================ */
.desk-photo-float {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 2px 0 rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.18);
}

.desk-photo-float img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Wet glass shimmer on desk photos */
.desk-photo-float::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.20) 0%,
      transparent 45%,
      transparent 55%,
      rgba(255,255,255,0.05) 100%
    );
  pointer-events: none;
}