/* Heyming OS — window resize: edge/corner handles + visible bottom-right drag grip. */

/* Window Resize Handles */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 2; /* Lower than iframe content */
  pointer-events: auto;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.resize-handle:hover {
  background: var(--accent-primary-soft);
}

.os-window:hover .resize-handle {
  opacity: 0.8;
}

.os-window .resize-handle {
  opacity: 0.2;
}

.resize-handle.n {
  top: -4px;
  left: 12px;
  right: 12px;
  height: 8px;
  cursor: n-resize;
}

.resize-handle.s {
  bottom: -4px;
  left: 12px;
  right: 12px;
  height: 8px;
  cursor: s-resize;
}

.resize-handle.e {
  top: 12px;
  bottom: 12px;
  right: -4px;
  width: 8px;
  cursor: e-resize;
}

.resize-handle.w {
  top: 12px;
  bottom: 12px;
  left: -4px;
  width: 8px;
  cursor: w-resize;
}

.resize-handle.ne {
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  cursor: ne-resize;
}

.resize-handle.nw {
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  cursor: nw-resize;
}

.resize-handle.se {
  bottom: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  position: relative;
}

.resize-handle.sw {
  bottom: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  cursor: sw-resize;
}

/* Visible Drag Handle.
 * The diagonal stripe pattern is painted via three brand-routed CSS
 * variables so the colors stay in sync with the surface scale even
 * inside the linear-gradient stop list (color-stops can't read tokens
 * directly, but they can read CSS variables). */
.window-drag-handle {
  --drag-stripe: var(--text-3);
  --drag-stripe-hover: var(--accent-primary-bg);
  --drag-dot: var(--text-2);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    transparent 30%,
    var(--drag-stripe) 30%,
    var(--drag-stripe) 40%,
    transparent 40%,
    transparent 50%,
    var(--drag-stripe) 50%,
    var(--drag-stripe) 60%,
    transparent 60%,
    transparent 70%,
    var(--drag-stripe) 70%
  );
  cursor: se-resize;
  z-index: 1000;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
  border-top-left-radius: 4px;
  pointer-events: auto;
}

.window-drag-handle:hover {
  opacity: 1;
  background: linear-gradient(
    135deg,
    transparent 30%,
    var(--drag-stripe-hover) 30%,
    var(--drag-stripe-hover) 40%,
    transparent 40%,
    transparent 50%,
    var(--drag-stripe-hover) 50%,
    var(--drag-stripe-hover) 60%,
    transparent 60%,
    transparent 70%,
    var(--drag-stripe-hover) 70%
  );
  transform: scale(1.1);
}

.window-drag-handle::before {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  background: var(--drag-dot);
  border-radius: 50%;
}

.window-drag-handle::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--drag-dot);
  border-top: none;
  border-left: none;
  transform: rotate(-45deg);
}