.window{ position:absolute; top:120px; left:180px; min-width:280px; min-height:160px; border:1px solid #1f2633; border-radius:10px; background:rgba(7,10,14,0.92); box-shadow: var(--shadow); overflow:hidden; }
.window.hidden{ display:none; }
.window .titlebar{ display:flex; align-items:center; gap:10px; justify-content:space-between; padding:8px 10px; background:rgba(10,14,20,0.95); border-bottom:1px solid #1f2633; cursor:move; user-select:none; }
.titlebar .title{ font-weight:600; font-size:14px; color:#d8e0ea; }
.titlebar .controls{ display:flex; gap:8px; align-items:center; }
.ctrl{ width:12px; height:12px; border-radius:50%; border:1px solid #3a4353; background:#2a3242; display:inline-block; }
.ctrl.ctrl-close{ background:#cf4a4a; cursor:pointer; }
.ctrl.ctrl-min, .ctrl.ctrl-max{ opacity:.7; }
.ctrl.ctrl-min.disabled, .ctrl.ctrl-max.disabled{ cursor:not-allowed; opacity:.5; }

.window .content{ background:#0a0f16; height:calc(100% - 36px); overflow:auto; }

/* Browser window */
.browser .chrome-bar{ width:100%; display:block; height:auto; }
.browser .browser-viewport{ height:calc(100% - 32px); overflow:auto; }
.browser iframe{ width:100%; height:100%; border:0; background:#111; }
.browser .blocked{ position:absolute; inset:36px 0 0 0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; padding:18px; text-align:center; }

/* Image / Video viewer */
.viewer img, .viewer video{ display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.viewer .overlay{ position:absolute; inset:36px 0 0 0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.viewer .overlay.visible{ display:flex; }
.viewer .play-btn{ width:84px; height:84px; background:url('../play.png') center/contain no-repeat; opacity:.92; cursor:pointer; }

/* Helper to prevent selecting text while dragging */
.noselect{ -webkit-user-select:none; -moz-user-select:none; user-select:none; }


/* === Patch: prevent position jump on first show and dragging ===
   We restrict transitions to visual effects only (no left/top),
   so new windows appear exactly at their computed coordinates. */
.window {
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}

/* If we explicitly add this class in JS, transitions on left/top stay disabled. */
.window.no-pos-animate {
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease !important;
}

/* Smoother dragging with no accidental transitions */
.window.is-dragging {
  transition: none !important;
}