/* ===== Windows XP Taskbar (Luna) ===== */
:root {
  --xp-font: Tahoma, "Segoe UI", Verdana, sans-serif;
  --xp-height: 32px;
  --xp-blue-1: #1f4f9c; /* top border-ish */
  --xp-blue-2: #2a64be;
  --xp-blue-3: #2e6dd5;
  --xp-blue-4: #3f7ee8;
  --xp-blue-5: #1452a5; /* bottom edge */
  --xp-start-green-1: #6cc04a;
  --xp-start-green-2: #4aa730;
  --xp-start-green-3: #3f8f2b;
  --xp-start-green-4: #2f6f22;
  --xp-gray-1: #edf3ff;
  --xp-gray-2: #d7e6ff;
  --xp-gray-3: #c4d9ff;
  --xp-gray-4: #9fbef5;
  --xp-sep-light: #f3f8ff;
  --xp-sep-dark: #204a8e;
  --xp-btn-border: #1d3f7f;
  --xp-shadow: rgba(0, 0, 0, 0.35);
}

html, body { height: 100%; }
body { margin: 0; font-family: var(--xp-font); }

/* Container */
.xp-taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--xp-height);
  display: flex; align-items: center;
  gap: 6px;
  padding: 3px 6px;
  box-sizing: border-box;
  background:
    linear-gradient(#4d86f6, #2f6fce 45%, #265fb8 46%, #2458b0 65%, #1f55ad 100%);
  border-top: 1px solid #184a93;
  box-shadow: 0 -1px 0 #4c8bf7 inset, 0 -2px 0 #103a7a inset, 0 -3px 0 #0b2b5b inset;
  z-index: 9999;
}

/* Start button */
.xp-start {
  height: calc(var(--xp-height) - 6px);
  min-width: 90px;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  border: 1px solid #2a5f15;
  background:
    linear-gradient(180deg,
      var(--xp-start-green-1) 0%,
      var(--xp-start-green-2) 45%,
      var(--xp-start-green-3) 46%,
      var(--xp-start-green-4) 100%);
  box-shadow:
    0 1px 0 #a6d98f inset,
    0 -1px 0 #1b4f14 inset,
    0 2px 3px var(--xp-shadow);
  color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  text-shadow: 0 1px 0 #1b5117;
  font-weight: 700;
}
.xp-start:focus-visible { outline: 2px solid #ffd24d; outline-offset: 2px; }
.xp-start:active {
  transform: translateY(1px);
  filter: saturate(1.1);
}

/* Windows logo (CSS-only) */
.xp-start-logo {
  width: 16px; height: 16px; position: relative; display: inline-block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}
.xp-start-logo::before,
.xp-start-logo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    conic-gradient(from 45deg,
      #f35322 0 25%, #81bb0e 0 50%, #05a6f0 0 75%, #ffba08 0 100%);
  border-radius: 3px;
  mask:
    radial-gradient(8px 8px at 40% 40%, #000 95%, transparent 96%) subtract,
    radial-gradient(8px 8px at 60% 60%, #000 95%, transparent 96%) subtract;
}

/* "Start" text */
.xp-start-text { font-size: 13px; letter-spacing: .2px; }

/* separators (double-line XP style) */
.xp-separator {
  width: 2px; align-self: stretch; margin: 0 4px;
  background:
    linear-gradient(180deg, var(--xp-sep-light), var(--xp-sep-light)) left/1px 100% no-repeat,
    linear-gradient(180deg, var(--xp-sep-dark), var(--xp-sep-dark)) right/1px 100% no-repeat;
  opacity: .9;
}

/* Quicklaunch */
.xp-quicklaunch { display: inline-flex; gap: 4px; }
.xp-ql-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--xp-btn-border);
  border-radius: 3px;
  background:
    linear-gradient(#ffffff, #eaf2ff 45%, #d7e6ff 46%, #c7dbff 100%);
  box-shadow: 0 1px 0 #f9fbff inset, 0 -1px 0 #b8d0ff inset, 0 1px 1px rgba(0,0,0,.25);
  cursor: pointer;
}
.xp-ql-btn:hover { filter: brightness(1.05); }
.xp-ql-btn:active { transform: translateY(1px); }

/* Tasks container grows */
.xp-tasks {
  display: flex; gap: 4px; align-items: center;
  flex: 1 1 auto; min-width: 0;
}

/* Task buttons */
.xp-task {
  min-width: 140px; max-width: 320px;
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--xp-btn-border);
  background:
    linear-gradient(#f5faff, #e4efff 45%, #d2e5ff 46%, #bcd6ff 100%);
  box-shadow: 0 1px 0 #ffffff inset, 0 -1px 0 #9fc0ff inset, 0 1px 1px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; gap: 8px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12px; color: #0b2b5b;
  cursor: pointer;
}
.xp-task:hover { filter: brightness(1.03); }
.xp-task:active { transform: translateY(1px); }

.xp-task--active {
  background:
    linear-gradient(#fff, #f4f8ff 45%, #e9f1ff 46%, #d9e7ff 100%);
  border-color: #1e4590;
}

.xp-task-icon {
  width: 16px; height: 16px; border-radius: 3px;
  background:
    radial-gradient(circle at 30% 30%, #6aa2ff, #2a64be 70%);
  box-shadow: 0 0 0 1px #1e4590 inset, 0 1px 0 rgba(255,255,255,.5);
  flex: 0 0 auto;
}
.xp-task-label { overflow: hidden; text-overflow: ellipsis; }

/* System tray + clock */
.xp-tray {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.xp-tray-icon {
  width: 16px; height: 16px; border-radius: 3px;
  background:
    radial-gradient(circle at 30% 30%, #ffe27a, #d6a700 70%);
  box-shadow: 0 0 0 1px #7a5a00 inset, 0 1px 0 rgba(255,255,255,.35);
}
.xp-clock {
  min-width: 64px; text-align: right;
  font-size: 12px; color: #ffffff; text-shadow: 0 1px 0 #0b2b5b;
  padding: 2px 8px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 3px;
  background: linear-gradient(#3d74d8, #2d65c8);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 1px 1px rgba(0,0,0,.25);
}

/* Make sure page content doesn't hide under the bar */
body { padding-bottom: var(--xp-height); }

/* Optional: constrain on very small screens */
@media (max-width: 480px) {
  .xp-task { min-width: 110px; }
  .xp-start { min-width: 76px; padding: 0 10px; }
  .xp-start-text { display: none; } /* just the logo on tiny screens */
}