/* winamp.css - charcoal-and-steel chrome, bevels, dotted texture, LCD insets.
 * Original CSS recreation of the late-90s Winamp 2.x look; no Nullsoft assets. */

:root {
  --steel-hi: #656c75;
  --steel-lo: #3c4147;
  --steel-face: #41464d;
  --steel-face2: #33373c;
  --edge-dark: #14161a;
  --edge-light: #7a828c;
  --lcd-bg: #10140f;
  --lcd-green: #1fcf1f;
  --lcd-dim: #0d5c0d;
  --green-text: #00d200;
  --bevel-light: rgba(255, 255, 255, 0.35);
  --bevel-dark: rgba(0, 0, 0, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    #0e7a7a;
  font-family: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  font-size: 11px;
  user-select: none;
  -webkit-user-select: none;
}

#desktop { position: fixed; inset: 0; overflow: hidden; }

/* ---------------- windows ---------------- */

.wa-window {
  position: absolute;
  border: 1px solid #101215;
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #4a5057 0%, #41464d 14%, #3a3f45 55%, #31353a 82%, #2a2d31 100%);
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -1px -1px 0 var(--bevel-dark),
    2px 3px 8px rgba(0,0,0,.45);
  transform-origin: top left;
}

.wa-window.hidden { display: none; }

/* title bar */
.wa-titlebar {
  position: relative;
  z-index: 10; /* above the body layer (bodyTop 0 windows) so the bar, its
                  drag handle and window buttons stay clickable */
  height: 18px;
  margin: 1px 1px 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #5d656e 0%, #4b5259 30%, #3f454b 60%, #353a40 100%);
  border: 1px solid;
  border-color: #6d757e #22262b #22262b #6d757e;
  cursor: default;
}

.wa-titlebar .wa-title-logo {
  position: absolute;
  left: 22px;
  top: 4px;
  image-rendering: pixelated;
  pointer-events: none;
}

.wa-tbtn {
  position: absolute;
  top: 3px;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wa-tbtn canvas { display: block; image-rendering: pixelated; }

.wa-tbtn:hover { filter: brightness(1.35); }
.wa-tbtn:active { filter: brightness(0.75); }

/* generic control buttons drawn on canvas */
.wa-ctrl {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 6; /* above slider canvases (z-index 5) so buttons always hit-test first */
}
.wa-ctrl canvas { display: block; image-rendering: pixelated; }

/* LCD panel */
.wa-lcd {
  position: absolute;
  background: var(--lcd-bg);
  border: 1px solid;
  border-color: #060806 #2f3a2f #2f3a2f #060806;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.9), inset 0 -1px 0 #343a26;
}

.wa-lcd canvas { position: absolute; image-rendering: pixelated; }

/* ---------------- equalizer window ---------------- */
.eq-band-slider { position: absolute; }

/* ---------------- playlist ---------------- */
.wa-pl-list {
  position: absolute;
  left: 0;
  right: 0;
  background: #000;
  border-left: 1px solid #232323;
  border-right: 1px solid #232323;
}
.wa-pl-list canvas { display: block; image-rendering: pixelated; cursor: default; }

.wa-pl-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #4a5057 0%, #41464d 40%, #31353a 100%);
  border-top: 1px solid #22262b;
}

/* ---------------- menus (Win95 style) ---------------- */
.wa-menu {
  position: fixed;
  z-index: 100000;
  min-width: 148px;
  background: #c6c6c6;
  border: 1px solid;
  border-color: #dfdfdf #4a4a4a #4a4a4a #dfdfdf;
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);
  padding: 2px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  color: #000;
}
.wa-menuitem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 18px 3px 7px;
  white-space: nowrap;
  cursor: default;
  position: relative;
}
.wa-menuitem.disabled { color: #7d7d7d; text-shadow: 1px 1px 0 #fff; }
.wa-menuitem:hover:not(.disabled), .wa-menuitem.open {
  background: #000080;
  color: #fff;
  text-shadow: none;
}
.wa-menuitem .wa-check { width: 12px; display: inline-block; text-align: center; }
.wa-menuitem .wa-sub-arrow { position: absolute; right: 4px; font-size: 9px; }
.wa-menusep { height: 1px; margin: 3px 2px; background: #808080; border-bottom: 1px solid #fff; }
.wa-menuitem kbd {
  margin-left: auto;
  padding-left: 18px;
  opacity: .75;
  font: inherit;
}
.wa-menuitem:hover:not(.disabled) kbd { opacity: .9; }

/* ---------------- dialogs ---------------- */
.wa-dialog {
  position: absolute;
  z-index: 90000;
  background: #c6c6c6;
  border: 2px solid;
  border-color: #dfdfdf #4a4a4a #4a4a4a #dfdfdf;
  box-shadow: 3px 3px 10px rgba(0,0,0,.5);
  color: #000;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
}
.wa-dialog .wa-dlg-title {
  height: 18px;
  line-height: 17px;
  padding: 0 4px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
}
.wa-dialog .wa-dlg-body { padding: 10px 12px; }
.wa-dialog input[type=text] {
  font: inherit;
  border: 1px solid;
  border-color: #4a4a4a #dfdfdf #dfdfdf #4a4a4a;
  background: #fff;
  padding: 2px 3px;
  outline: none;
}
.wa-btn95 {
  font: inherit;
  min-width: 70px;
  padding: 3px 10px;
  background: #c6c6c6;
  border: 1px solid;
  border-color: #dfdfdf #4a4a4a #4a4a4a #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff;
  cursor: pointer;
}
.wa-btn95:active { border-color: #4a4a4a #dfdfdf #dfdfdf #4a4a4a; box-shadow: inset -1px -1px 0 #fff; }

/* about box */
.wa-about { background: #000; }
.wa-about canvas { display: block; image-rendering: pixelated; margin: 0 auto; }

/* desktop restore chip (all windows closed) */
#wa-tray {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 95000;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
#wa-tray canvas { image-rendering: pixelated; }
#wa-tray span {
  color: #fff;
  font-size: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.8);
  background: rgba(0,0,0,.35);
  padding: 1px 4px;
}

/* toast (error/status) */
#wa-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 96000;
  display: none;
  max-width: 420px;
  background: #c6c6c6;
  color: #000;
  border: 2px solid;
  border-color: #dfdfdf #4a4a4a #4a4a4a #dfdfdf;
  padding: 6px 12px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
}

/* hidden file input */
#wav-file-input { display: none; }

canvas { image-rendering: pixelated; }