/*
 * Visual language ported from 95CSS (https://github.com/YoshiMannaert/95CSS, MIT).
 * Tokens, layered box-shadow bevels and the checker pattern are theirs,
 * re-scaled to the 1px pixel grid of the tile embed (~410x270).
 */

/* == 95CSS tokens (pixel-grid halves) ===================================== */

:root {
  /* Spacing */
  --spacing-base: 2px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 6px;
  --spacing-5: 8px;
  --spacing-6: 16px;

  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #dedede;
  --color-gray-200: #c0c0c0;
  --color-gray-300: #808080;
  --color-blue: #000080;
  --color-teal: #008080;

  /* Box shadows - Inner */
  --shadow-inner-1: inset -1px -1px 0 var(--color-white),
    inset 1px 1px 0 var(--color-gray-300);
  --shadow-inner-3: inset -1px -1px 0 var(--color-white),
    inset 1px 1px 0 var(--color-black),
    inset -2px -2px 0 var(--color-gray-100),
    inset 2px 2px 0 var(--color-gray-300);

  /* Box shadows - Outer */
  --shadow-outer-3: inset -1px -1px 0 var(--color-black),
    inset 1px 1px 0 var(--color-gray-100),
    inset -2px -2px 0 var(--color-gray-300),
    inset 2px 2px 0 var(--color-white);
  --shadow-outer-4: inset -1px -1px 0 var(--color-black),
    inset 1px 1px 0 var(--color-white),
    inset -2px -2px 0 var(--color-gray-300);

  /* Checker pattern (pressed/selected states), 1px checks */
  --checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='white'/%3E%3Crect width='1' height='1' fill='%23DEDEDE'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23DEDEDE'/%3E%3C/svg%3E");
}

/* == Base ================================================================= */

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

body {
  background: #1b1d1d;
  overflow: hidden;
  font-family: "w95px", "w95font", sans-serif;
  font-size: 12px;
  line-height: 12px;
  color: var(--color-black);
  user-select: none;
}

button {
  border: none;
  font: inherit;
  color: inherit;
}

::selection {
  color: var(--color-white);
  background: var(--color-blue);
}

.desktop {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-teal);
  position: relative;
  overflow: hidden;
  touch-action: none;
}

/* == Windows (95CSS dialog language: layered shadow bevel, no borders) ===== */

.window {
  position: absolute;
  background: var(--color-gray-200);
  box-shadow: var(--shadow-outer-3);
  /* 1px bevel bands sit inside these 4px: visible face framing around the
     title bar and body = 2px, per the Win95 window frame */
  padding: 4px;
  gap: 2px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.title-bar {
  background: var(--color-gray-300); /* Inactive */
  color: var(--color-white);
  /* 2px bevel + 14px content: the 16x14 buttons fit with zero drift; the
     title text (13px line) pins to the top for integer offsets too. */
  padding: 2px 2px 2px 3px;
  height: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
  touch-action: none;
  z-index: 5;
}

.window.active .title-bar {
  background: var(--color-blue); /* Active */
}

/* Maximized: flat 1px face line between title bar and body; +1px height
   keeps the 14px button row intact under border-box */
.window[data-maximized] .title-bar {
  height: 19px;
  border-bottom: 1px solid var(--color-gray-200);
}

.title {
  font-weight: bold;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  min-width: 0;
  margin-right: var(--spacing-2);
}

/* Window buttons: 16x14 glyphs, min+max flush, 2px gap to close */
.controls {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

/* 16px title icons sit 1px into the padding on each side for a 1px/1px fit */
.title-icon {
  width: 16px;
  height: 16px;
  margin: -1px 4px -1px 0;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.controls button {
  width: 16px;
  height: 14px;
  background-color: var(--color-gray-200);
  background-origin: border-box;
  box-shadow: var(--shadow-outer-4);
  cursor: pointer;
  display: block;
  padding: 0;
  image-rendering: pixelated;
  position: relative;
  z-index: 200; /* Ensure buttons are clickable over resizers */
  touch-action: none;
}

.controls button.min-btn {
  background-image: url("./assets/minimize95.webp");
}

.controls button.max-btn {
  background-image: url("./assets/maximize95.webp");
}

.window[data-maximized] .controls button.max-btn {
  background-image: url("./assets/restore95.webp");
}

.window[data-maximized] {
  box-shadow: none;
  padding: 0;
  gap: 0;
}

.controls button.close-btn {
  background-image: url("./assets/close95.webp");
  margin-left: 2px;
}

.controls button:active {
  box-shadow: var(--shadow-inner-3);
  background-position: 1px 1px;
}

.window-body {
  padding: var(--spacing-3);
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  touch-action: pan-y; /* Allow vertical scrolling inside windows */
}

.window-body:has(> .content-img),
.window-body:has(> .content-gif) {
  padding: 0;
}

.window-body a {
  display: block;
  width: 100%;
}

.content-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.content-gif {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

/* Resizers */
.resizer {
  position: absolute;
  z-index: 100;
  touch-action: none;
}
/* Offset by -5px to ensure they don't overlap the content (title bar) */
.resizer.n {
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  cursor: n-resize;
}
.resizer.s {
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  cursor: s-resize;
}
.resizer.e {
  top: 0;
  right: -5px;
  width: 5px;
  height: 100%;
  cursor: e-resize;
}
.resizer.w {
  top: 0;
  left: -5px;
  width: 5px;
  height: 100%;
  cursor: w-resize;
}
.resizer.ne {
  top: -5px;
  right: -5px;
  width: 8px;
  height: 8px;
  cursor: ne-resize;
}
.resizer.nw {
  top: -5px;
  left: -5px;
  width: 8px;
  height: 8px;
  cursor: nw-resize;
}
.resizer.se {
  bottom: -5px;
  right: -5px;
  width: 8px;
  height: 8px;
  cursor: se-resize;
}
.resizer.sw {
  bottom: -5px;
  left: -5px;
  width: 8px;
  height: 8px;
  cursor: sw-resize;
}

/* == Desktop Icons ========================================================= */

.desktop-icon {
  position: absolute;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-white);
  text-align: center;
  cursor: pointer;
  z-index: 1;
  touch-action: none;
}

.desktop-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  margin-bottom: var(--spacing-1);
}

.desktop-icon span {
  font-size: 12px;
  line-height: 16px;
  background: var(--color-teal);
  padding: 0 2px;
}

.desktop-icon:active span,
.desktop-icon.selected span {
  background: var(--color-blue);
  border: 1px dotted var(--color-white);
  padding: 0 1px;
}

/* == Start Menu ============================================================ */

.start-menu {
  position: absolute;
  /* Anchored to the Start button's top-left corner: taskbar left padding
     (2px) horizontally; taskbar top padding (4px) above the taskbar edge. */
  bottom: 24px;
  left: 2px;
  width: 150px;
  background: var(--color-gray-200);
  box-shadow: var(--shadow-outer-3);
  padding: 3px;
  display: flex;
  z-index: 1000; /* Increased z-index */
}

.menu-sidebar {
  background: #808080;
  width: 21px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--color-white);
  padding: var(--spacing-3) 3px;
  font-size: 12px;
  line-height: 14px;
  display: flex;
  align-items: center;
  text-align: center;
}

.menu-sidebar span {
  font-weight: normal;
}

.menu-sidebar .side-name {
  font-family: "Jersey25", monospace;
  font-size: 20px;
  color: #c0c0c0;
}

.menu-sidebar .side-ver {
  font-family: "Jersey25", monospace;
  font-size: 20px;
}

.menu-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.menu-item {
  height: 38px;
  padding: 0 var(--spacing-3);
  text-decoration: none;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
}

.menu-item img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.menu-sep {
  height: 2px;
  margin: var(--spacing-1) 0;
  background: linear-gradient(to bottom, #808080 0 1px, #ffffff 1px 2px);
}

.menu-item:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

/* == Taskbar (95CSS header: layered bevel, checkered pressed states) ======= */

.taskbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 28px;
  background-color: var(--color-gray-200);
  /* Double top edge: 1px taskbar gray + 1px white, painted over the first
     2px of the top padding (border-substitute on the pixel grid). */
  background-image: linear-gradient(
    to bottom,
    var(--color-gray-200) 0 1px,
    var(--color-white) 1px 2px,
    transparent 2px
  );
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  /* top: 2px double border + 2px face; sides/bottom: 2px face */
  padding: 4px 2px 2px;
  box-sizing: border-box;
  z-index: 900;
  justify-content: space-between;
}

.taskbar-clock {
  margin-left: var(--spacing-1);
  box-shadow: var(--shadow-inner-1);
  background: var(--color-gray-200);
  padding: 1px var(--spacing-3) 2px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 22px;
  min-width: 56px;
}

.start-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: bold;
  height: 22px;
  padding: 1px var(--spacing-3) 2px var(--spacing-2);
  background: var(--color-gray-200);
  box-shadow: var(--shadow-outer-4);
  font-size: 12px;
  line-height: 22px;
  font-family: inherit;
  cursor: pointer;
  touch-action: none;
}

.start-btn:active,
.start-btn.active {
  box-shadow: var(--shadow-inner-3);
  padding: 2px calc(var(--spacing-3) - 1px) 1px calc(var(--spacing-2) + 1px);
  font-weight: bold;
}

.start-icon {
  width: 16px;
  height: 14px;
  image-rendering: pixelated;
}

.task-items {
  display: flex;
  gap: 3px;
  margin-left: 2px;
  flex-grow: 1;
  overflow: hidden;
}

.task-item {
  height: 22px;
  font-size: 12px;
  line-height: 22px;
  background: var(--color-gray-200);
  box-shadow: var(--shadow-outer-4);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--spacing-3) 0 4px;
  width: auto;
  flex: 1 1 100px;
  max-width: 160px;
  min-width: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: normal;
  text-align: left;
  touch-action: none;
}

.task-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.task-item span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-item.active {
  box-shadow: var(--shadow-inner-3);
  background-color: var(--color-white);
  background-image: var(--checker);
  background-size: 2px 2px;
  font-weight: bold;
}

/* == Fonts (local assets, unchanged) ======================================= */

/* Grid-fitted pixel fonts: outlines snapped to the font's native design
   grid (80 units = 1px at 12.5ppem). Render binary-crisp when used at
   exactly 12.5px; any other size defeats the purpose. */
@font-face {
  font-family: "w95px";
  src: url("./assets/w95px-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "w95px";
  src: url("./assets/w95px-bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "w95font";
  src:
    url("./assets/w95font.woff2") format("woff2"),
    url("./assets/w95font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "w95font";
  src:
    url("./assets/w95font-bold.woff2") format("woff2"),
    url("./assets/w95font-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Jersey25";
  src: url("./assets/Jersey25-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "dosfont";
  src: url("./assets/LessPerfectDOSVGA.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.blink-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--color-white);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

.hidden {
  display: none !important;
}

#win-note .window-body,
#win-fetch .window-body {
  user-select: text;
  cursor: text;
}

/* == Scrollbars (95CSS pattern, pixel scale: 13px) ========================= */

::-webkit-scrollbar {
  width: 13px;
  min-height: 13px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-white);
  background-image: var(--checker);
  background-size: 2px 2px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-200);
  box-shadow: var(--shadow-outer-4);
}

::-webkit-scrollbar-button {
  height: 13px;
  background-color: var(--color-gray-200);
  box-shadow: var(--shadow-outer-4);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%209.42999L12%209.42999V7.71571L0%207.71571V9.42999ZM1.71429%207.71569L10.2857%207.71569V6.0014H8.57143V4.28712L6.85714%204.28712V2.57283H5.14286V4.28712H3.42857V6.0014L1.71429%206.0014V7.71569Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202.57001H0V4.28429H12V2.57001ZM10.2857%204.28431H1.71429V5.9986H3.42857V7.71288H5.14286V9.42717H6.85714V7.71288H8.57143V5.9986H10.2857V4.28431Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}