/* ============================================================
   CarpetPro OS — Desktop Environment Stylesheet v3
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  user-select: none;
  background: transparent;
  color: #1e293b;
}

/* ── Desktop ─────────────────────────────────────────────── */
#desktop {
  position: fixed;
  inset: 0;
  background-color: #1a1a2e;
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a1a2e 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  animation: gridDrift 80s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* ── Desktop Icons ───────────────────────────────────────── */
#desktop-icons {
  position: absolute;
  top: 24px; left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  width: 88px;
  transition: background .18s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.desktop-icon:hover  { background: rgba(255,255,255,.1); transform: scale(1.07); }
.desktop-icon:active { transform: scale(.95); }

.desktop-icon .icon-img {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.desktop-icon:hover .icon-img {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}
.desktop-icon .icon-label {
  font-size: 11px; font-weight: 600;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0,0,0,.7);
  white-space: nowrap;
}

/* ── Windows ─────────────────────────────────────────────── */
.os-window {
  position: absolute;
  min-width: 320px; min-height: 200px;
  border-radius: 12px;
  overflow: visible; /* allow resize handles to extend */
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07);
  background: #fff;
  will-change: transform, opacity;
  transition: box-shadow .22s ease;
  clip-path: none;
}

/* inner content must clip so iframe doesn't overflow */
.os-window .window-body {
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.os-window.is-focused {
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
}

/* Opening animation */
.os-window.is-opening {
  animation: winOpen .25s cubic-bezier(.34,1.5,.64,1) forwards;
}
@keyframes winOpen {
  from { opacity: 0; transform: scale(.87) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Closing animation */
.os-window.is-closing {
  pointer-events: none;
  animation: winClose .2s ease forwards;
}
@keyframes winClose {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.9) translateY(8px); }
}

/* Minimizing */
.os-window.is-minimizing {
  pointer-events: none;
  animation: winMin .23s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes winMin {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(.85) translateY(24px); }
}

/* Restoring from minimize */
.os-window.is-restoring {
  animation: winRestore .26s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes winRestore {
  from { opacity: 0; transform: scale(.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Snapped windows lose border-radius on edges */
.os-window.is-snapped { border-radius: 0; }
.os-window.is-snapped .window-body { border-radius: 0; }

/* Maximized: override all the way */
.os-window.is-maximized {
  border-radius: 0 !important;
}
.os-window.is-maximized .window-body { border-radius: 0 !important; }

/* ── Window Titlebar ─────────────────────────────────────── */
.window-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 40px;
  background: rgba(248,250,252,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  border-radius: 12px 12px 0 0;
  cursor: grab;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.window-titlebar:active { cursor: grabbing; }
.os-window.is-snapped   .window-titlebar { border-radius: 0; }
.os-window.is-maximized .window-titlebar { border-radius: 0; }
.os-window.is-dragging  .window-titlebar { cursor: grabbing; }
.os-window.is-resizing  .window-titlebar { cursor: default; }

/* Windows Controls */
.win-controls { display: flex; align-items: stretch; height: 100%; flex-shrink: 0; margin-left: auto; margin-right: -12px; }
.win-btn {
  background: transparent; border: none;
  width: 46px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #374151;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.win-btn:hover { background: rgba(0,0,0,.08); }
.win-btn.win-close { border-top-right-radius: 12px; }
.win-btn.win-close:hover { background: #e81123; color: #fff; }
.win-btn:active { background: rgba(0,0,0,.15); }
.win-btn.win-close:active { background: #f1707a; }
.os-window.is-snapped .win-btn.win-close { border-top-right-radius: 0; }
.os-window.is-maximized .win-btn.win-close { border-top-right-radius: 0; }

/* Centered title */
.window-title {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-size: 12.5px; font-weight: 600;
  color: #374151;
  pointer-events: none;
  white-space: nowrap;
}

/* Reload button */
.titlebar-actions { display: flex; align-items: center; }
.tl-action-btn {
  background: none; border: none;
  color: #94a3b8; font-size: 16px;
  cursor: pointer; padding: 2px 5px;
  border-radius: 5px; line-height: 1;
  transition: color .15s, background .15s;
}
.tl-action-btn:hover { color: #374151; background: rgba(0,0,0,.06); }

/* ── Window Body ─────────────────────────────────────────── */
.window-body {
  flex: 1; overflow: hidden;
  position: relative; background: #fff;
}
.window-body iframe {
  width: 100%; height: 100%;
  border: none; display: block;
  pointer-events: auto;
}

/* Block iframe events during drag/resize */
.window-body .iframe-blocker {
  position: absolute; inset: 0;
  z-index: 10; display: none;
}
.os-window.is-dragging  .iframe-blocker,
.os-window.is-resizing  .iframe-blocker { display: block; }

/* ── Resize Handles ──────────────────────────────────────── */
.resize-handle {
  position: absolute;
  z-index: 20;
}

/* Edge handles */
.resize-n  { top: -4px;    left: 10px;  right: 10px; height: 8px;  cursor: n-resize;  }
.resize-s  { bottom: -4px; left: 10px;  right: 10px; height: 8px;  cursor: s-resize;  }
.resize-e  { right: -4px;  top: 10px;   bottom: 10px; width: 8px;  cursor: e-resize;  }
.resize-w  { left: -4px;   top: 10px;   bottom: 10px; width: 8px;  cursor: w-resize;  }

/* Corner handles */
.resize-nw { top: -4px;    left: -4px;   width: 14px; height: 14px; cursor: nw-resize; }
.resize-ne { top: -4px;    right: -4px;  width: 14px; height: 14px; cursor: ne-resize; }
.resize-se { bottom: -4px; right: -4px;  width: 14px; height: 14px; cursor: se-resize; }
.resize-sw { bottom: -4px; left: -4px;   width: 14px; height: 14px; cursor: sw-resize; }

/* Visual hint on corner bottom-right */
.resize-se::after {
  content: '';
  position: absolute; bottom: 4px; right: 4px;
  width: 9px; height: 9px;
  border-right: 2px solid rgba(0,0,0,.18);
  border-bottom: 2px solid rgba(0,0,0,.18);
  border-radius: 1px;
  pointer-events: none;
}

/* ── Snap Preview ────────────────────────────────────────── */
#snap-preview {
  position: absolute;
  background: rgba(99,163,255,.13);
  border: 2px solid rgba(99,163,255,.5);
  border-radius: 10px;
  pointer-events: none;
  z-index: 9500;
  opacity: 0;
  transition: opacity .14s, left .16s ease, top .16s ease, width .16s ease, height .16s ease;
}
#snap-preview.visible { opacity: 1; }

/* ── Dock ────────────────────────────────────────────────── */
#dock {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 5px;
  padding: 10px 14px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.32), inset 0 0 0 .5px rgba(255,255,255,.06);
  z-index: 20;
}

.dock-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; cursor: pointer; position: relative; padding: 0 2px;
}

.dock-item .dock-icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.dock-item:hover .dock-icon {
  transform: translateY(-8px) scale(1);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Neighbour magnification
.dock-item:has(+ .dock-item:hover) .dock-icon,
.dock-item:hover + .dock-item .dock-icon {
  transform: translateY(-4px) scale(0.4);
} */

.dock-item .dock-label {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .14s, transform .14s;
}

/* Running dot */
.dock-item .dock-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  position: absolute; bottom: -9px;
  display: none;
  box-shadow: 0 0 5px rgba(255,255,255,.5);
}
.dock-item.is-running .dock-dot { display: block; }

/* Bounce when opening */
.dock-item.dock-bounce .dock-icon {
  animation: dockBounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dockBounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-18px) scale(1.22); }
  70%  { transform: translateY(-4px)  scale(1.05); }
  100% { transform: translateY(0)     scale(1);    }
}

/* Dock separator */
.dock-separator {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.2);
  margin: 0 4px;
  align-self: center;
}