/* ===== "Computer window" draggable container ===== */

:root{
  --win-radius: 12px;
  --win-border: rgba(255,50,50,.14);
  --win-bg: rgba(151, 20, 24, .92);
  --win-text: rgba(255,255,255,.92);  
  --win-shadow: 0 18px 60px rgba(0,0,0,.55);

  --titlebar-bg: rgba(255,255,255,.06);
  --titlebar-text: rgba(255,255,255,.9);
}

/* The window container */
.window{
  position: absolute;                 /* stays relative to viewport */
  left: 0; top: 0;                 /* JS will set these */
  transform: translate(0,0);        /* JS will not rely on transforms */
  z-index: 999;

  /* Size-to-content */
  width: fit-content;
  height: fit-content;
  max-width: min(90vw, 860px);
  max-height: min(90vh, 720px);

  color: var(--win-text);
  background: var(--win-bg);
  border: 2px solid;
  border-color: var(--win-border);
  box-shadow: var(--win-shadow);
  overflow: hidden;

  /* Optional: nice blur effect if supported */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Prevent accidental text selection while dragging (JS toggles a class too) */
  user-select: none;
  -webkit-user-select: none;
}

/* Title bar (the drag handle) */
.window__titlebar{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  background: var(--titlebar-bg);
  border-bottom: 1px solid rgba(255,255,255,.10);

  cursor: grab;
  touch-action: none; /* IMPORTANT for pointer dragging on touch devices */
}

.window.is-dragging .window__titlebar{
  cursor: grabbing;
}

/* Right-side titlebar text */
.window__meta{
  margin-left: auto;           /* pushes it to the far right */
  opacity: .75;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* Editable title text */
.window__title{
  cursor: default;
  flex: 1;
  min-width: 0;

  font: 600 13px;
  color: var(--titlebar-text);
  opacity: .95;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Window content area */
.window__content{
  padding: 14px 14px 16px;
  overflow: auto; /* if content gets large */
  user-select: text;
  -webkit-user-select: text;
}

/* ===== Image windows (robust) ===== */

.window--image{
  /* override the base window limits */
  max-width: 92vw;
  max-height: 86vh;
}

.window--image .window__content{
  padding: 0;
  overflow: hidden;

  min-width: 0;
  min-height: 0;
  
  max-height: calc(86vh - 44px);
  max-width: 92vw;
}

.window--image .window__content > img{
  display: block;

  width: 100%;
  height: 100%;

  max-width: 92vw;
  max-height: calc(86vh - 44px);

  object-fit: contain; 
}




/* Optional: if you want the window to shrink-wrap more aggressively */
.window--shrinkwrap{
  display: inline-flex;
  flex-direction: column;
}

/* Optional: bring clicked window to front (JS can toggle this) */
.window.is-active{
  z-index: 1000;
}

.stack{
  position: relative;
  width: 100%;
  min-height: 100vh; /* just a sensible minimum */
}