#window-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--safe-left);
  right: var(--safe-right);
  z-index: 10;
  pointer-events: none;
}

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 180px;
  max-width: 100%;
  max-height: 100%;
  background: var(--primary-bg);
  border: var(--window-border) solid var(--border-color);
  box-shadow: var(--hard-shadow);
  pointer-events: auto;
  animation: windowIn 0.14s ease-out;
}

@keyframes windowIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.window-header {
  position: relative;
  flex: 0 0 var(--window-header-height);
  height: var(--window-header-height);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-sm);
  background: var(--primary-bg);
  border-bottom: var(--window-border) solid var(--border-color);
  cursor: grab;
  touch-action: none;           
  user-select: none;
  -webkit-user-select: none;
}

.window:not(.focused) .window-header { background: var(--secondary-bg); }

.window-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 auto;
  padding: 0 var(--space-md);
  font-size: var(--font-size-normal);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-button,
.window-button {
  flex-shrink: 0;
  width: calc(var(--window-header-height) - 12px);
  height: calc(var(--window-header-height) - 12px);
  min-width: 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  border: var(--window-border) solid var(--border-color);
  font-weight: 700;
  line-height: 1;
  position: relative;
}

.close-button::before {
  content: '';
  position: absolute;
  inset: 6px;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(-45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.fullscreen-button::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
}

.close-button::after,
.window-button::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.close-button:hover,
.window-button:hover { background: var(--light-grey); }
.close-button:active,
.window-button:active { background: var(--selected-bg); color: var(--selected-text); }

.window-controls { display: flex; gap: var(--space-xs); flex-shrink: 0; }

.window-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.window.dragging { opacity: 0.82; }
.window.dragging,
.window.resizing { user-select: none; -webkit-user-select: none; }
.window.dragging iframe,
.window.resizing iframe,
.window.resizing .window-content { pointer-events: none; }
.window.dragging .window-header { cursor: grabbing; }

.resize-zone { position: absolute; z-index: 20; touch-action: none; }
.rz-n  { top: -5px;    left: 14px;  right: 14px;  height: 10px; cursor: n-resize; }
.rz-s  { bottom: -5px; left: 14px;  right: 14px;  height: 10px; cursor: s-resize; }
.rz-w  { left: -5px;   top: 14px;   bottom: 14px; width: 10px;  cursor: w-resize; }
.rz-e  { right: -5px;  top: 14px;   bottom: 14px; width: 10px;  cursor: e-resize; }
.rz-nw { top: -5px;    left: -5px;  width: 16px;  height: 16px; cursor: nw-resize; }
.rz-ne { top: -5px;    right: -5px; width: 16px;  height: 16px; cursor: ne-resize; }
.rz-sw { bottom: -5px; left: -5px;  width: 16px;  height: 16px; cursor: sw-resize; }
.rz-se { bottom: -5px; right: -5px; width: 20px;  height: 20px; cursor: se-resize; }
.rz-se::after {                       
  content: '';
  position: absolute;
  right: 5px; bottom: 5px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.rz-se:hover::after { border-color: var(--dark-grey); }

.window.fullscreen {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  box-shadow: none;
}
.window.fullscreen .resize-zone { display: none; }

/* On phones a window opens edge-to-edge (borderless, flush with the screen) exactly as
   before; once resized/moved away from fullscreen it looks like any other floating window. */
html.is-compact .window.fullscreen { border-width: 0; }

.window.slideshow-window {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3000 !important;   
  border: 0;
}
.window.slideshow-window .window-header { display: none; }

html.is-compact .collection-status { display: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--taskbar-height) + var(--safe-bottom) + 24px);
  z-index: 6000;
  max-width: 90vw;
  padding: 10px 18px;
  background: var(--primary-bg);
  border: var(--window-border) solid var(--border-color);
  box-shadow: var(--hard-shadow);
  font-weight: 700;
  translate: -50% 0;
  animation: toastLife 2.2s ease-out forwards;
  pointer-events: none;
}
@keyframes toastLife {
  0% { opacity: 0; }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* Printing a window (the PRINT button in About/CV): event-handler.js marks the clicked
   window .print-target before calling window.print(). Everything else — desktop chrome,
   other windows, this window's own header/resize handles/print button — is hidden, and
   the target's fixed/absolute positioning is reset so its content flows as a normal
   printed document instead of a clipped, scrollable screen panel. */
@media print {
  .menubar, .taskbar, .desktop-grid, .start-menu, .menubar-search-results { display: none !important; }
  .desktop, #window-container { position: static !important; inset: auto !important; overflow: visible !important; background: none !important; }
  .window { display: none !important; }
  .window.print-target {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .window.print-target .window-header,
  .window.print-target .resize-zone,
  .window.print-target [data-print] { display: none !important; }
  .window.print-target .window-content { position: static !important; overflow: visible !important; height: auto !important; }
  .window.print-target .html-content { max-width: none; color: #000; }
}