:root{ --bg:#c0c0c0; --win:#d4d0c8; --text:#000; --accent:#c8d4f0; --border:#000; }
*{ box-sizing:border-box; }
body{ margin:0; font:13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); }
#desktop{ position:fixed; inset:0; background:url('assets/wallpaper.png') center/cover no-repeat; }
#taskbar{ position:fixed; left:0; right:0; bottom:0; height:32px; background:var(--win); border-top:1px solid var(--border); display:flex; align-items:center; gap:6px; padding:3px; }
#start-btn{ border:1px solid var(--border); background:var(--win); box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; }
#start-menu{ position:fixed; left:6px; bottom:36px; background:var(--win); border:1px solid var(--border); box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; }
#start-menu ul{ list-style:none; margin:0; padding:4px; }
#start-menu li{ margin:2px 0; }
#start-menu .separator{ border-top:1px solid #808080; margin:4px 0; }
#task-buttons{ display:flex; gap:4px; flex:1; }
#task-buttons button{ border:1px solid var(--border); background:var(--win); padding:2px 8px; }
#clock{ min-width:56px; text-align:center; font-variant-numeric:tabular-nums; }

.window{ position:absolute; width:500px; height:400px; background:var(--win); border:1px solid var(--border); box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; }
.titlebar{ height:24px; background:linear-gradient(#0a246a,#a6caf0); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 4px; cursor:move; }
.titlebar .title{ font-weight:bold; text-shadow:0 1px 0 #000; }
.titlebar .buttons button{ width:22px; height:18px; margin-left:2px; }
.window .content{ position:absolute; left:0; right:0; top:24px; bottom:18px; overflow:auto; background:#fff; }
.window .statusbar{ position:absolute; left:0; right:0; bottom:0; height:18px; background:var(--win); border-top:1px solid #808080; padding:1px 6px; font-size:12px; }

.desktop-icon{ position:absolute; width:109px; text-align:center; color:#fff; text-shadow:0 1px 2px #000; }
.desktop-icon img{ width:62px; height:62px; display:block; margin:8px auto 2px; image-rendering:pixelated; }
.desktop-icon .label{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Explorer */
.toolbar{ display:flex; gap:6px; padding:6px; background:var(--win); border-bottom:1px solid #808080; }
.labelpath{ padding:4px 8px; border-bottom:1px solid #808080; background:#eee; font-family:monospace; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); gap:8px; padding:8px; }
.tile{ border:1px solid var(--border); background:#fff; padding:4px; text-align:center; }
.tile img{ width:64px; height:64px; object-fit:cover; display:block; margin:4px auto; }
.tile .name{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile.selected{ outline:2px dotted #000; }

/* Photo Explorer */
.photoexplorer{display:flex; flex-direction:column; height:100%}
.photoexplorer .pe-body{flex:1; display:flex; min-height:0}
.photoexplorer .pe-list{width:320px; overflow:auto; border-right:1px solid #808080; padding:8px; background:#f4f4f4; display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:8px}
.photoexplorer .pe-item{display:block; padding:0; border:1px solid #000; background:#fff}
.photoexplorer .pe-item img{width:100%; height:100px; object-fit:cover; display:block}
.photoexplorer .pe-item.active{outline:2px dotted #000; background:#c8d4f0}
.photoexplorer .pe-viewer{flex:1; display:flex; align-items:center; justify-content:center; background:#000}
.photoexplorer .pe-viewer img{max-width:100%; max-height:100%; object-fit:contain}
.photoexplorer .controls{display:flex; gap:6px; padding:6px; background:var(--win); align-items:center}


/* === Aesthetic updates (2025-08-10) === */

/* 1) Titlebar without gradient (solid classic Win95 blue) */
.titlebar{
  background:#0a246a !important;
  color:#fff !important;
  text-shadow:none !important;
  border-bottom:1px solid #000;
}

/* 2) Start button + Start menu styled closer to Windows 95 */
#start-btn{
  background:#d4d0c8 !important;
  border:1px solid #000 !important;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080 !important;
  padding:3px 10px 3px 28px !important;
  position:relative;
}


#start-menu{
  background:#d4d0c8 !important;
  border:1px solid #000 !important;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080 !important;
  min-width:220px;
  padding:4px;
}
#start-menu ul{ list-style:none; margin:0; padding:2px; }
#start-menu li{ margin:0; }
#start-menu .separator{ border-top:1px solid #808080; margin:4px 2px; }
#start-menu button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:4px 10px;
  font:inherit;
  color:#000;
}
#start-menu button:hover, #start-menu button:focus{
  background:#000080;
  color:#fff;
  outline:0;
}

/* 3) Photo Explorer — single column, smaller thumbs like a menu */
.photoexplorer .pe-body{ display:flex; min-height:0; }
.photoexplorer .pe-list{
  width:240px !important;
  max-width:260px;
  overflow:auto;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:8px !important;
  border-right:1px solid #000;
  background:#fff;
}
.photoexplorer .pe-item{
  border:1px solid #000;
  background:#fff;
  padding:0;
}
.photoexplorer .pe-item img{
  width:100%;
  height:84px; /* smaller */
  object-fit:cover;
  display:block;
}
.photoexplorer .pe-item.active{
  outline:2px dotted #000;
  background:#c8d4f0;
}
.photoexplorer .pe-viewer{ background:#000; display:flex; align-items:center; justify-content:center; }

/* 4) Force Trash icon to bottom-right of desktop */
.desktop-icon[data-role="trash"]{
  right:16px !important;
  bottom:48px !important; /* keep above taskbar */
  left:auto !important;
  top:auto !important;
  position:absolute;
}


/* === Resizable Windows (Global) === */
.window{
  resize: both;           /* enable bottom-right grip */
  overflow: hidden;       /* keep chrome tidy while resizing */
  min-width: 280px;
  min-height: 180px;
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 44px); /* keep above taskbar */
}
.window .content{
  overflow: auto;         /* content scrolls when smaller */
}
.window.maximized{
  resize: none;           /* disable grip when maximized */
}


/* === Resize Handles (8-way) === */
.window{ position:absolute; } /* ensure absolute for math */
.resize-handle{
  position:absolute;
  z-index:3;
  /* Slightly larger than Win95 grip for usability */
  width:10px; height:10px;
  background:transparent;
}
/* edges */
.resize-handle.n{ top:-2px; left:10px; right:10px; height:6px; width:auto; cursor:n-resize; }
.resize-handle.s{ bottom:-2px; left:10px; right:10px; height:6px; width:auto; cursor:s-resize; }
.resize-handle.e{ right:-2px; top:10px; bottom:10px; width:6px; height:auto; cursor:e-resize; }
.resize-handle.w{ left:-2px; top:10px; bottom:10px; width:6px; height:auto; cursor:w-resize; }
/* corners */
.resize-handle.ne{ top:-2px; right:-2px; cursor:ne-resize; }
.resize-handle.nw{ top:-2px; left:-2px; cursor:nw-resize; }
.resize-handle.se{ bottom:-2px; right:-2px; cursor:se-resize; }
.resize-handle.sw{ bottom:-2px; left:-2px; cursor:sw-resize; }
/* disable when maximized */
.window.maximized .resize-handle{ display:none; }


/* === Sticky toolbars for viewers === */
.stickybar{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--win);
  /* Win95-ish bottom edge */
  border-bottom: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #fff, inset -1px 0 0 #808080;
}


/* Minimize behavior */
.window.minimized{ display:none !important; }

#start-btn { background-image:none !important; padding:2px 10px !important; }
#start-btn img, #start-btn .logo { display:none !important; }


/* --- Start Button size tweak (2025-08-11) ---
   Minimal, non-breaking overrides. Increase taskbar height + Start button size.
   Use a CSS var so future adjustments are trivial.
*/
:root{ --taskbar-h: 36px; } /* was 32px */

#taskbar{ height: var(--taskbar-h) !important; }

/* Keep the start menu docked just above the taller taskbar */
#start-menu{ bottom: calc(var(--taskbar-h) + 4px) !important; }

/* Slightly larger Start button for better Fitts' Law ergonomics */
#start-btn{
  padding: 5px 14px !important;   /* was ~2-3px vertical */
  font-size: 14px !important;     /* base was 13px */
  line-height: 1 !important;
  min-height: calc(var(--taskbar-h) - 6px) !important;
}

/* Keep task buttons visually balanced with the taller bar */
#task-buttons button{ padding: 3px 10px !important; }