/* Heyming OS — desktop surface: icons, file drag, selection box, wallpaper, drop zone.
 *
 * Color literals migrated to brand tokens. The Ghostscript tiger SVG stays
 * (it's a wallpaper, not chrome). Selection/drop accents are now brand violet.
 */

/* Desktop Icons */
.desktop-icon {
  position: absolute;
  width: 64px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: transform var(--motion-hover);
  user-select: none;
  z-index: 5;
  padding: 4px;
}

.desktop-icon:hover .icon {
  transform: scale(1.1);
}

.desktop-icon:hover .label {
  background: var(--accent-primary-bg);
  color: var(--text-on-accent);
}

.desktop-icon .icon {
  font-size: 48px;
  margin-bottom: 4px;
  transition: transform var(--motion-hover);
  text-shadow: 1px 1px 2px color-mix(in srgb, var(--pure-black) 30%, transparent);
}

.desktop-icon .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-on-accent);
  text-shadow: 1px 1px 2px color-mix(in srgb, var(--pure-black) 80%, transparent);
  text-align: center;
  line-height: 1.2;
  max-width: 64px;
  word-wrap: break-word;
  padding: 1px 3px;
  border-radius: 2px;
  transition: background var(--motion-hover), color var(--motion-hover);
}

/* Dragging state for file icons */
.desktop-icon.file-icon[draggable='true'] {
  cursor: grab;
}

.desktop-icon.file-icon:active {
  cursor: grabbing;
  opacity: 0.7;
  transform: scale(0.95);
}

.desktop-icon.file-icon.selected {
  background: var(--accent-primary-soft);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent-primary);
}

.desktop-icon.file-icon.selected .label {
  background: var(--accent-primary-bg);
  color: var(--text-on-accent);
}

/* Keyboard focus rings for desktop icons (tab / arrow navigation) */
.desktop-icon:focus-visible {
  outline: 2px solid var(--focus-ring-inner);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--focus-ring-outer);
}

.desktop-icon.file-icon.selected:focus-visible {
  outline-color: var(--accent-primary-hover);
}

/* Desktop drag selection box */
.desktop-selection-box {
  position: absolute;
  border: 1px solid var(--accent-primary);
  background: var(--accent-primary-soft);
  border-radius: 2px;
  pointer-events: none;
  z-index: 100;
}

/* Desktop Background with Nyxbrkr Systems mark */
#os-desktop {
  background-image: url('../../brand/nyx/nyx-symbol.png');
  background-size: min(34vw, 360px);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Nyx telemetry veil. */
#os-desktop::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 43, 242, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 224, 0.05) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(0, 255, 224, 0.16), transparent 34%);
  background-size: 28px 28px, 28px 28px, auto;
  opacity: 0.82;
}

/* Drop zone active state */
#os-desktop.drop-active {
  background-color: var(--accent-primary-soft);
}

#os-desktop.drop-active::after {
  content: '📥 Drop files here';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-on-accent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--pure-black) 55%, transparent);
  background: var(--accent-primary-bg);
  padding: 1.75rem 3rem;
  border-radius: var(--radius-lg);
  border: 3px dashed var(--accent-primary-hover);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pure-black) 16%, transparent);
  pointer-events: none;
  z-index: 9999;
  animation: pulse-drop 1.2s ease-in-out infinite;
}

@keyframes pulse-drop {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  #os-desktop.drop-active::after {
    animation: none;
  }
}