/* === Desktop baseline === */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "MS Sans Serif", Arial, sans-serif;
  background: #008080;           /* Win98 teal */
  color: #000;
  cursor: url('MP5SD_angled.gif'), auto;
}

/* Desktop area where icons live */
#desktop {
  height: calc(100vh - 40px);
  position: relative;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
}

/* Desktop icons */
.desktop-icon {
  width: 80px;
  text-align: center;
  color: #fff;
  user-select: none;
  cursor: url('MP5SD_angled.gif'), auto;
}
.desktop-icon img { width: 48px; height: 48px; display: block; margin: 0 auto 6px; }
.desktop-icon span { font-size: 12px; }

/* Taskbar */
#taskbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 40px;
  background: #C0C0C0;
  border-top: 2px solid #fff;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px;
}
#start-btn {
  background: #000080; color: #fff;
  border: 2px solid #808080; padding: 6px 12px;
  height: 28px; cursor: pointer;
}
#clock { margin-left: auto; font-size: 12px; color: #000; }

/* Start menu */
#start-menu {
  position: fixed; bottom: 40px; left: 8px;
  width: 180px;
  background: #C0C0C0; border: 2px solid #808080; padding: 6px;
}
.menu-item { padding: 6px 8px; font-size: 13px; }
.menu-item:hover { background: #000080; color: #fff; cursor: pointer; }
.hidden { display: none; }

/* Taskbar window buttons */
#taskbar-windows button {
  padding: 4px 8px; border: 1px solid #808080; background: #E0E0E0;
  cursor: pointer; font-size: 12px;
}
#taskbar-windows button.active { background: #D0F0D0; }

/* Generic window */
.window {
  position: absolute;
  min-width: 320px;
  min-height: 160px;
  background: #2C2C2C;
  color: #00FF66;
  border: 2px solid #808080;
  box-shadow: 3px 3px 0 #808080;
  font-family: "Courier New", monospace;
  left: 100px; top: 100px;
}
.window-header {
  background: #000080; color: #fff; padding: 6px 8px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: grab; font-weight: bold;
}
.window-content { padding: 10px; background: #1f1f1f; color: #00ff66; }

/* Window header controls */
.window-header .btn-min,
.window-header .btn-max,
.window-header .window-close {
  font: inherit; border: 1px solid #aaa; background: #eee; padding: 2px 6px; cursor: pointer;
}
.window.maximized { width: 100vw !important; height: calc(100vh - 40px) !important; }
.window.minimized { display: none; }

/* === Winamp-ish player === */
.dbs-player { width: 660px; }
.dbs-header { background: linear-gradient(#05173a, #03102a); }
.dbs-body { background: #111; color: #d0ffd8; }
.led {
  background: #010b01; color: #9cffb3; border: 1px solid #0a3;
  padding: 6px 10px; margin-bottom: 8px; font-weight: bold; text-align: center;
}
.badge {
  display: inline-block; padding: 2px 6px; border: 1px solid #0a3; color: #9cffb3;
  background: #062; font-size: 11px; border-radius: 2px; user-select: none;
}
.badge.on { background: #0a3; color: #001b0d; }

/* Album art display replaces visualizer */
.display {
  position: relative;
  height: 140px;               /* adjust to taste */
  background: #0b0f0b;
  border: 1px solid #0a3;
  margin-bottom: 8px;
  overflow: hidden;
}
#cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;         /* switch to 'cover' to fill edge-to-edge */
  filter: saturate(0.95) brightness(1.05);
  opacity: 0.95;
}

/* Controls row */
.ctrls { display: grid; grid-template-columns: auto auto auto 60px 1fr 60px auto 140px auto; gap: 8px; align-items: center; }
.ctrls button {
  background: #333; color: #90ff9f; border: 1px solid #0a3; padding: 4px 8px; cursor: pointer;
}
.ctrls button:hover { background: #445; }
.time { font-variant-numeric: tabular-nums; text-align: center; }

/* Sliders */
.seek, .vol { width: 100%; }
input[type="range"] { accent-color: #00ff66; }

/* Playlist */
#playlist {
  list-style: none; margin: 10px 0 0; padding: 0; max-height: 220px; overflow-y: auto;
  border: 1px solid #0a3;
}
#playlist li { padding: 6px 10px; cursor: default; }
#playlist li:hover { background: #133; }
#playlist li.active { background: #00ff66; color: #001b0d; }

.rb-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.rb-photos img {
  width: 120px;
  height: auto;
  border: 1px solid #0a3;
  border-radius: 4px;
}

/* Recycle Bin window internals */
.window .rb-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  /* Tiled animated background (replace with your gif) */
  background-image: url('cloudgif.gif'); 
  background-repeat: repeat;
  background-size: auto;
  overflow: hidden; /* keep chaos inside the window */
  border: 1px solid #0a3;
}

/* Content overlay inside */
.window .rb-content {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #0a3;
  padding: 8px;
  color: #cfc;
  font-family: "MS Sans Serif", Arial, sans-serif;
}

/* Little image strip */
.window .rb-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.window .rb-strip img {
  display: block;
  width: 140px;
  height: auto;
  border: 1px solid #0a3;
}

/* Floaters */
.window .rb-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none; /* clicks fall through to content */
}
.window .rb-floater {
  position: absolute;
  width: 96px;   /* tweak sizes per gif */
  height: 96px;
  will-change: transform;
}
.window .rb-floater img {
  width: 100%;
  height: 100%;
  display: block;
}