/* ================================================================
   THOMZY.com — Window Manager (Windows XP retro style)
   ================================================================ */

/* ---- Taskbar ---------------------------------------------------- */
.wm-taskbar {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  height: 32px;
  background:
    linear-gradient(to bottom,
      #3d78d8 0%,
      #2259bb 5%,
      #1a50b0 48%,
      #1c54b5 52%,
      #2a68c4 100%);
  border-top: 1px solid #6898f0;
  border-bottom: 2px solid #082068;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  z-index: 9999;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 5px rgba(0,0,0,0.6);
}

.wm-tb-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  height: 26px;
  min-width: 100px;
  max-width: 160px;
  background:
    linear-gradient(to bottom,
      #78b0f4 0%,
      #4080d8 12%,
      #2460be 50%,
      #2060bc 51%,
      #3070cc 88%,
      #58a0e8 100%);
  border: 1px solid #1a3c90;
  border-top-color: #90c0f8;
  border-left-color: #60a0f0;
  border-radius: 3px;
  color: #fff;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
  cursor: pointer;
  user-select: none;
  text-align: left;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.08s;
}

.wm-tb-btn:hover {
  background:
    linear-gradient(to bottom,
      #90c4f8 0%,
      #58a0e8 12%,
      #3878d4 50%,
      #3676d0 51%,
      #4888dc 88%,
      #70b8f4 100%);
}

/* active = window is open and focused */
.wm-tb-btn.wm-tb-active {
  background:
    linear-gradient(to bottom,
      #0d2868 0%,
      #183888 45%,
      #0e2c72 51%,
      #142e6a 100%);
  border-color: #06123a;
  border-style: inset;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.7), inset -1px -1px 0 rgba(80,120,220,0.15);
  color: #aac4ff;
  text-shadow: 0 0 6px rgba(100,160,255,0.4);
}

/* minimized = window is in taskbar, not focused */
.wm-tb-btn.wm-tb-minimized {
  background:
    linear-gradient(to bottom,
      #3a68c0 0%,
      #1e50a8 50%,
      #1c4ea4 51%,
      #2a5eb8 100%);
  opacity: 0.82;
}

.wm-tb-btn.wm-tb-minimized:hover {
  opacity: 1;
}

.wm-tb-icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}

.wm-tb-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}

/* ---- Desktop area (fills between taskbar and player bar) --------- */
.wm-desktop {
  position: fixed;
  top: 84px;          /* 52px header + 32px taskbar */
  left: 0;
  right: 0;
  bottom: var(--player-bar-h);
  overflow: hidden;
  z-index: 1;
}

/* ---- Window chrome ---------------------------------------------- */
.wm-win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 35, 0.97);
  /* XP-style 3-layer border: outer highlight, main color, inner shadow */
  border: 3px solid #1a50d8;
  box-shadow:
    0 0 0 1px #0a2888,
    4px 4px 8px rgba(0,0,40,0.7),
    inset 1px 1px 0 rgba(140,180,255,0.25);
  min-width: 150px;
  min-height: 60px;
  transition: opacity 0.15s;
  opacity: 0.99; /* Fix Chrome hw acc glitch with iframe mirroring */
}

/* Initial hide via CSS for minimized windows (before JS runs).
   JS restore uses win.style.display = 'flex' (inline) which overrides this
   rule synchronously — no CSS cascade timing issues. */
.wm-win.wm-minimized,
.wm-win[data-minimized="1"] {
  display: none;
}

/* ---- Retro minimize/restore wireframe (Win9x/XP style) ---------- */
.wm-anim-wireframe {
  position: fixed;
  pointer-events: none;
  z-index: 100000;
  border: 2px dotted #fff;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  background: transparent;
  mix-blend-mode: difference;
  box-sizing: border-box;
  will-change: left, top, width, height;
}

.wm-win.wm-dragging {
  opacity: 0.88;
  user-select: none;
}

.wm-win.wm-resizing {
  user-select: none;
}

/* ---- Titlebar --------------------------------------------------- */
.wm-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 6px;
  /* XP Luna blue gradient */
  background:
    linear-gradient(90deg,
      #0840c8 0%,
      #1460f0 30%,
      #2278ff 55%,
      #1060e8 80%,
      #0840c8 100%);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  height: 28px;
  border-bottom: 1px solid #082090;
  box-shadow: inset 0 1px 0 rgba(180,210,255,0.3);
}

.wm-icon {
  font-size: 14px;
  flex-shrink: 0;
  filter: drop-shadow(1px 1px 1px rgba(0,0,80,0.6));
}

.wm-title {
  flex: 1;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,80,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wm-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Base XP control button */
.wm-btn {
  border-radius: 2px;
  width: 22px;
  height: 20px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  transition: filter 0.05s;
}

/* Minimize button — XP silver/blue */
.wm-btn-min {
  background: linear-gradient(to bottom, #d8e8fc 0%, #9ac0e8 45%, #86b0e0 51%, #a8cef4 100%);
  border: 1px solid #5080b8;
  border-top-color: #e8f4ff;
  border-left-color: #c0d8f8;
  color: #003080;
}

.wm-btn-min:hover {
  background: linear-gradient(to bottom, #e8f4ff 0%, #b0d4f4 45%, #98c4ec 51%, #c0e0ff 100%);
}

/* Close button — XP red */
.wm-btn-close {
  background: linear-gradient(to bottom, #e86030 0%, #c02810 45%, #b02008 51%, #d84020 100%);
  border: 1px solid #881008;
  border-top-color: #f09070;
  border-left-color: #e07060;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.wm-btn-close:hover {
  background: linear-gradient(to bottom, #f07040 0%, #d83018 45%, #c82010 51%, #e85028 100%);
}

/* Lock button — neutral grey, turns amber when active */
.wm-btn-lock {
  background: linear-gradient(to bottom, #c8c8c8 0%, #a0a0a0 45%, #909090 51%, #b8b8b8 100%);
  border: 1px solid #707070;
  border-top-color: #e0e0e0;
  border-left-color: #d0d0d0;
  color: #333;
  font-size: 10px;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.wm-btn-lock:hover {
  opacity: 1;
}
.wm-btn-lock.active {
  background: linear-gradient(to bottom, #ffe070 0%, #e8a800 45%, #d09400 51%, #f0c030 100%);
  border-color: #a06800;
  color: #4a3000;
  opacity: 1;
}

/* Locked window — hide resize handle, dim/disable minimize & close buttons */
.wm-locked .wm-resize {
  pointer-events: none;
  opacity: 0;
}
.wm-locked .wm-btn-min,
.wm-locked .wm-btn-close {
  pointer-events: none;
  opacity: 0.25;
  cursor: not-allowed;
}

.wm-btn:active {
  border-style: inset;
  filter: brightness(0.85);
  transform: translateY(1px);
}

/* ---- Body ------------------------------------------------------- */
.wm-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

/* Player body: no padding, no scroll — video fills the whole area */
.wm-body-player {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wm-body-chat {
  display: flex;
  flex-direction: column;
  overflow: visible; /* allow settings dropdown to overflow the window edge */
}

.wm-body-queue {
  display: flex;
  flex-direction: column;
}

/* ---- Resize handle ---------------------------------------------- */
.wm-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  z-index: 10; /* above .np-art (z-index:2) and other stage overlays */
  cursor: se-resize;
  /* XP-style dotted resize grip */
  background:
    linear-gradient(135deg, transparent 40%, rgba(80,130,220,0.6) 40%, rgba(80,130,220,0.6) 55%, transparent 55%),
    linear-gradient(135deg, transparent 55%, rgba(80,130,220,0.45) 55%, rgba(80,130,220,0.45) 70%, transparent 70%),
    linear-gradient(135deg, transparent 70%, rgba(80,130,220,0.3) 70%, rgba(80,130,220,0.3) 82%, transparent 82%);
  opacity: 0.85;
  flex-shrink: 0;
}

/* ---- History view (full-page overlay, not a window) ------------- */
.view-history {
  position: fixed;
  inset: 84px 0 var(--player-bar-h) 0;  /* 52px header + 32px taskbar */
  overflow-y: auto;
  padding: 14px;
  background: var(--bg);
  z-index: 2;
}

.history-scroll {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Scrollbar inside windows ----------------------------------- */
.wm-body::-webkit-scrollbar { width: 8px; }
.wm-body::-webkit-scrollbar-track { background: var(--bg2, #1a0a2e); }
.wm-body::-webkit-scrollbar-thumb { background: var(--magenta); }