/* =============================================================
   THEME TOKENS
   ============================================================= */
:root {
  /* Shared */
  --black: #000;
  --blue: #0000ff;

  /* macOS 9 */
  --mac-platinum: #d4d4d4;
  --mac-pin-1: #f5f5f5;
  --mac-pin-2: #e9e9e9;
  --mac-window: #ececec;
  --mac-shadow: #9a9a9a;

  /* Windows 95 */
  --win-desktop: #008080;
  --win-gray: #c0c0c0;
  --win-gray-dark: #808080;
  --win-gray-light: #ffffff;
  --win-blue: #000080;
  --win-blue-inactive: #8080a0;
  --win-blue-light: #1084d0;
  --win-text: #000000;
}

/* =============================================================
   BASE / RESET
   ============================================================= */
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.35 Chicago, "ChicagoFLF", "Helvetica Neue", Arial, sans-serif;
  color: #000;
  user-select: none;
  overflow: hidden;
}
 a { color: var(--blue); text-decoration: none; }
 a:hover { text-decoration: underline; }

/* =============================================================
   THEME SURFACES
   ============================================================= */
body.theme-mac {
  background: repeating-linear-gradient(90deg, var(--mac-pin-1), var(--mac-pin-1) 4px, var(--mac-pin-2) 4px, var(--mac-pin-2) 8px);
  font-family: Chicago, "ChicagoFLF", system-ui, -apple-system, Arial, sans-serif;
}
body.theme-win {
  background: var(--win-desktop);
  font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
  image-rendering: pixelated;
}

/* Utility bevels for Win95 */
.bevel-out { border: 2px solid var(--black); box-shadow: inset -1px -1px 0 var(--win-gray-dark), inset 1px 1px 0 var(--win-gray-light); }
.bevel-in { border: 2px solid var(--black); box-shadow: inset 1px 1px 0 var(--win-gray-dark), inset -1px -1px 0 var(--win-gray-light); }

/* =============================================================
   MENUBAR (mac) & TASKBAR (win)
   ============================================================= */
.menubar, .taskbar { position: fixed; left: 0; right: 0; z-index: 5000; }

.menubar { top: 0; height: 22px; display: none; align-items: center; gap: 12px; padding: 0 8px; background: var(--mac-platinum); border-bottom: 1px solid var(--mac-shadow); }
/* Account for iOS safe area so the bar never hides under the notch */
.menubar { padding-top: env(safe-area-inset-top); height: calc(22px + env(safe-area-inset-top)); }
body.theme-mac .menubar { display: flex; }
.menubar .apple { font-weight: bold; }
.menubar .menu { cursor: default; }
 .menubar #clock { margin-left: auto; margin-right: -12px; }
/* Prevent time text wrapping */
 .menubar #clock, #trayClock, #clockAge, #trayAge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 .clock-age { margin-right: 8px; }
 .taskbar .tray { margin-left: auto; display: flex; align-items: center; gap: 0; }
 .age { display:inline-flex; align-items:center; gap:4px; flex: 0 0 190px; justify-content: flex-end; }
 .age-icon { width:12px; height:12px; image-rendering: pixelated; }

.taskbar { bottom: 0; height: 32px; display: none; align-items: center; gap: 8px; background: var(--win-gray); border-top: 2px solid var(--win-gray-light); box-shadow: inset 0 2px 0 var(--win-gray-dark); padding: 0 6px; }
/* Account for iOS safe area bottom (home indicator) */
.taskbar { padding-bottom: env(safe-area-inset-bottom); height: calc(32px + env(safe-area-inset-bottom)); }
body.theme-win .taskbar { display: flex; }
.start-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--win-gray); cursor: default; }
.start-btn { border: 2px solid var(--black); box-shadow: inset -1px -1px 0 var(--win-gray-dark), inset 1px 1px 0 var(--win-gray-light); }
.start-btn:active { box-shadow: inset 1px 1px 0 var(--win-gray-dark), inset -1px -1px 0 var(--win-gray-light); }
.start-flag { width: 14px; height: 14px; background: linear-gradient(90deg, #f00 50%, #0f0 50%), linear-gradient(90deg, #00f 50%, #ff0 50%); background-blend-mode: normal; }
.taskbar .tray { margin-left: auto; }

.start-menu { position: fixed; bottom: 32px; left: 6px; width: 240px; background: var(--win-gray); color: var(--win-text); border: 2px solid var(--black); box-shadow: 4px 4px 0 rgba(0,0,0,0.4); display: none; }
.start-menu .item { padding: 6px 8px; border-bottom: 1px solid var(--win-gray-dark); cursor: default; }
.start-menu .item:hover { background: var(--win-blue-light); color: white; }

/* =============================================================
   DESKTOP & ICONS
   ============================================================= */
.desktop { position: absolute; left: 0; right: 0; top: calc(22px + env(safe-area-inset-top)); bottom: calc(32px + env(safe-area-inset-bottom)); padding: 12px; }
body.theme-win .desktop { top: env(safe-area-inset-top); }
body.theme-mac .desktop { bottom: env(safe-area-inset-bottom); }
.icon { width: 120px; text-align: center; margin: 0 12px 24px; cursor: default; display: inline-block; color: #000; }
.icon img { width: 48px; height: 48px; image-rendering: pixelated; filter: grayscale(100%); }
/* Disable filter for generated previews to avoid Safari rendering issues */
.icon img.preview { filter: none; }
.icon span { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.icon.movable { position: absolute; margin: 0; }

/* Desktop selection rectangle */
.select-rect { position: absolute; border: 1px dashed #000; background: rgba(0,0,0,0.08); display:none; pointer-events:none; }

/* Context menu */
.context-menu { position: fixed; background: var(--win-gray); color: var(--win-text); display:none; z-index:2000; }
.context-menu .item { padding: 6px 10px; white-space: nowrap; }
.context-menu .item:hover { background: var(--win-blue-light); color: #fff; }
.context-menu.bevel-out { border: 2px solid var(--black); }

/* =============================================================
   WINDOWS
   ============================================================= */
.window { position: absolute; min-width: 300px; max-width: 840px; }
.window.hidden { display:none; }
.window { transition: filter 120ms ease; }
.window:not(.active) { filter: brightness(0.92) saturate(0.98); }

/* macOS 9 window */
body.theme-mac .window { background: var(--mac-window); border: 2px solid var(--black); box-shadow: 2px 2px 0 var(--mac-shadow); }
body.theme-mac .titlebar { background: linear-gradient(#e5e5e5, #cfcfcf); height: 18px; display: flex; align-items: center; padding: 0 4px; border-bottom: 1px solid #aaa; cursor: move; }
body.theme-mac .titlebar .buttons { display:flex; gap:4px; }
body.theme-mac .titlebar .buttons button { width: 11px; height: 11px; border: 1px solid #000; background: #fff; padding: 0; line-height: 11px; font-size: 10px; }
body.theme-mac .titlebar .title { font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-mac .content { background: #fff; border-top: 1px solid #aaa; padding: 12px; }

/* Windows 95 window */
body.theme-win .window { background: var(--win-gray); border: 2px solid var(--black); box-shadow: none; }
body.theme-win .titlebar { height: 20px; display: flex; align-items: center; padding: 0 6px; cursor: move; color: #fff; }
body.theme-win .window.active .titlebar { background: var(--win-blue); }
body.theme-win .window:not(.active) .titlebar { background: var(--win-blue-inactive); }
body.theme-win .titlebar .buttons { display:flex; }
body.theme-win .titlebar .buttons button { width: 16px; height: 14px; margin-left: 4px; background: var(--win-gray); line-height: 12px; font-weight: bold; }
body.theme-win .titlebar .buttons button { border: 2px solid var(--black); box-shadow: inset -1px -1px 0 var(--win-gray-dark), inset 1px 1px 0 var(--win-gray-light); }
body.theme-win .titlebar .buttons button:active { box-shadow: inset 1px 1px 0 var(--win-gray-dark), inset -1px -1px 0 var(--win-gray-light); }
body.theme-win .titlebar .title { font-weight: bold; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-win .content { background: #ffffff; padding: 12px; border: 2px solid var(--black); box-shadow: inset -1px -1px 0 var(--win-gray-dark), inset -1px -1px 0 var(--win-gray-light); }
.resize-handle { position:absolute; width:12px; height:12px; right:0; bottom:0; cursor:nwse-resize; }

/* Task buttons */
.task-button { margin-left:6px; padding: 2px 8px; background: var(--win-gray); }
.task-button { border: 2px solid var(--black); box-shadow: inset -1px -1px 0 var(--win-gray-dark), inset 1px 1px 0 var(--win-gray-light); }
.task-button.active { box-shadow: inset 1px 1px 0 var(--win-gray-dark), inset -1px -1px 0 var(--win-gray-light); }

/* Drag cursors */
.icon { cursor: pointer; }
.icon.dragging { cursor: grabbing; }
.window .titlebar { cursor: grab !important; }
/* Improve touch dragging usability */
.window .titlebar,
.resize-handle,
.icon {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* Paint */
.paint-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.paint-canvas { background:#fff; border:1px solid #000; display:block; max-width:100%; cursor:crosshair; }

/* Notepad */
.notepad-toolbar { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.notepad-toolbar input[type="text"] { flex:1; min-width:180px; }
.notepad-toolbar input[type="file"] { display:none; }
.notepad-area { width:100%; font-family: 'MS Sans Serif', Tahoma, monospace; font-size:14px; }

/* Browser */
.browser .browser-toolbar { display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
#browserUrl { flex:1; min-width:200px; height:22px; padding:2px 6px; border:1px solid #000; }
.browser-tabs { display:flex; gap:4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom:6px; padding-bottom: 2px; }
.browser-tabs::-webkit-scrollbar { height: 10px; }
.browser-tabs::-webkit-scrollbar-thumb { background: #b0b0b0; border: 2px solid #e0e0e0; }
.browser-tabs { scrollbar-color: #b0b0b0 #e0e0e0; scrollbar-width: thin; }
.browser-tab { display:flex; align-items:center; gap:6px; padding:2px 8px; background: var(--win-gray); border:2px solid var(--black); cursor:default; }
.browser-tab:hover { filter: brightness(1.02); }
.browser-tab.active { box-shadow: inset 1px 1px 0 var(--win-gray-dark), inset -1px -1px 0 var(--win-gray-light); background:#fff; }
.browser-tab .favicon { width:16px; height:16px; image-rendering: pixelated; }
.browser-tab .title { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browser-tab .close { margin-left:4px; display:none; }
.browser-tab:hover .close, .browser-tab.active .close { display:inline-block; }
.browser-views { position:relative; width:100%; height:60vh; border:1px solid #000; background:#fff; overflow:hidden; }
/* Prefer stable viewport units on mobile to avoid late reflow when bars collapse */
@supports (height: 1svh) {
  .browser-views { height: 60svh; }
}
.browser-views iframe { position:absolute; inset:0; width:125%; height:125%; border:0; display:none; transform: scale(0.8); transform-origin: 0 0; }
.browser-views iframe.active { display:block; }



/* =============================================================
   CRT MODE (scanlines, vignette, subtle color tweaks)
   ============================================================= */
body.crt {
  /* Mild global tone adjustments */
  filter: contrast(1.06) saturate(1.08) brightness(0.96);
}

/* Overlay for scanlines + vignette */
body.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* Two layers: scanlines + vignette */
  background:
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.06) 0px,
      rgba(0, 0, 0, 0.06) 1px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 3px
    ),
    /* vignette */
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.18) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.5;
  animation: crt-flicker 6s infinite steps(60);
}

/* Very subtle RGB fringe for text-heavy areas */
body.crt .menubar,
body.crt .taskbar,
body.crt .window .titlebar,
body.crt .window .content,
body.crt .icon span {
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 1px rgba(0, 255, 255, 0.15),
    0 0 2px rgba(255, 0, 0, 0.08);
}

@keyframes crt-flicker {
  0% { opacity: 0.48; }
  50% { opacity: 0.54; }
  100% { opacity: 0.48; }
} 

/* =============================================================
   CRT INTENSITY — STRONGER OVERRIDES
   ============================================================= */
/* Stronger global tone and slight tint */
body.crt {
  filter: contrast(1.15) saturate(1.25) brightness(0.92) hue-rotate(-3deg);
}

/* Tighter, darker scanlines and heavier vignette */
body.crt::before {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.12) 1px,
      rgba(0, 0, 0, 0) 2px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 48%,
      rgba(0, 0, 0, 0.28) 100%
    );
  opacity: 0.6;
}

/* Add phosphor RGB stripe mask + animated static */
body.crt::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    /* RGB phosphor triad (aperture grille feel) */
    repeating-linear-gradient(
      to right,
      rgba(255, 0, 0, 0.10) 0 1px,
      rgba(0, 255, 0, 0.10) 1px 2px,
      rgba(0, 0, 255, 0.10) 2px 3px
    ),
    /* coarse animated static */
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  opacity: 0.35;
  animation: crt-static 0.6s steps(2) infinite;
  background-size: auto, 100% 100%, 100% 100%;
}

/* Increase chromatic fringe for UI/text */
body.crt .menubar,
body.crt .taskbar,
body.crt .window .titlebar,
body.crt .window .content,
body.crt .icon span {
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 2px rgba(0, 255, 255, 0.25),
    0 0 3px rgba(255, 0, 0, 0.18);
}

@keyframes crt-static {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0.5px, -0.5px, 0); }
  100% { transform: translate3d(0,0,0); }
} 

/* Modal adjustments so alerts appear above everything */
.window.modal { position: fixed; z-index: 5001; } 

.photos-gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.photos-thumb { position:relative; background:#fff; border:1px solid #000; aspect-ratio: 1 / 1; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.photos-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.photos-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; z-index: 3000; }
.photos-lightbox.open { display:flex; }
.photos-lightbox img { max-width: min(92vw, 1600px); max-height: 92vh; border: 2px solid #000; background:#fff; }
.photos-lightbox .close { position:absolute; top:16px; right:20px; color:#fff; font-size:28px; cursor:pointer; } 

.photos-stage { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
.photos-stage img { max-width: 100%; max-height: 50vh; border:1px solid #000; background:#fff; display:block; }
.photos-viewport { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photos-viewport img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.photos-controls { display:flex; align-items:center; gap:8px; padding:6px 0; flex:0 0 auto; }
.photos-caption { flex:1; text-align:center; padding:4px 8px; background:#fffacd; border:1px solid #000; border-radius:4px; min-height:20px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.photos-caption:empty { display:none; }
/* Ensure windows stack above icons */
.desktop { z-index: 1; }
.window { z-index: 1000; }
/* Photos sizing tweaks */
.photos-strip { display:flex; gap:8px; overflow-x:auto; padding:4px 0; border-top:1px solid #ccc; flex:0 0 60px; }
.photos-strip .photos-thumb { width:56px; height:56px; border:1px solid #000; background:#fff; flex: 0 0 auto; cursor:pointer; opacity:0.7; }
.photos-strip .photos-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.photos-strip .photos-thumb.active { outline:2px solid var(--blue); opacity:1; } 

/* Photos window layout ensures height accounting for toolbar/strip */
#win-photos { display:flex; flex-direction:column; }
#win-photos.hidden { display: none !important; }
#win-photos .content { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

/* Mobile: slightly shrink only the Photos app window */
@media (max-width: 768px) {
  #win-photos { transform: scale(0.9); transform-origin: top left; }
}