/* ===================================================================
   xp.css - Windows XP "Luna" theme primitives
   Fonts, window chrome, buttons, scrollbars, the taskbar + start button.
   =================================================================== */

:root {
  --xp-blue-1: #0058ee;
  --xp-blue-2: #3f8cf3;
  --xp-blue-title-1: #0058e6;
  --xp-blue-title-2: #2f7bf0;
  --xp-blue-title-3: #1d5fd6;
  --xp-face: #ece9d8;      /* classic window face */
  --xp-face-2: #f6f4ec;
  --xp-border: #0831d9;
  --xp-shadow: rgba(0,0,0,.35);
  --xp-green-1: #5aa733;
  --xp-green-2: #3d8113;
  --xp-taskbar-1: #245edb;
  --xp-taskbar-2: #3f8cf3;
  --xp-taskbar-3: #1941a5;
  --xp-text: #0a0a0a;
  --tahoma: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  overflow: hidden;
  font-family: var(--tahoma);
  font-size: 13px;
  color: var(--xp-text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

/* Custom XP-ish arrow cursor across the whole OS */
body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 2 L2 20 L7 15 L10 22 L13 21 L10 14 L17 14 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>") 2 2, default;
}
.link, .btn, .icon, .start-btn, .taskbtn, .titlebar-btn, .startitem, .deskicon, .clippy-agent, a { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M9 2 C7 2 7 4 9 5 L9 5 C6 5 6 7 8 8 C6 8 6 10 8 11 C6 11 7 13 9 13 L9 20 L11 22 L13 20 L13 13 C15 13 15 11 14 10 L11 7 Z' fill='white' stroke='black' stroke-width='1.1'/></svg>") 8 2, pointer; }

/* ---------- Beveled XP button ---------- */
.xp-btn {
  font-family: var(--tahoma);
  font-size: 12px;
  padding: 3px 12px;
  min-width: 70px;
  background: linear-gradient(180deg,#fff 0%, #f2f1ea 45%, #e4e1d3 55%, #f5f4ee 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #fff, inset -1px -1px 0 #c5c2b8;
  color: #0a0a0a;
}
.xp-btn:hover { background: linear-gradient(180deg,#fdfdfd 0%, #f6f0d8 45%, #efe6bf 55%, #fbf8ea 100%); box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #ffd98a55; }
.xp-btn:active { background: linear-gradient(180deg,#e0ddd0 0%, #ecebe3 100%); box-shadow: inset 1px 1px 2px #b7b4a8; }
.xp-btn.primary { font-weight: bold; box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #ffb400; }

/* ---------- Window chrome ---------- */
.window {
  position: absolute;
  min-width: 220px;
  background: var(--xp-face);
  border: 1px solid #0831d9;
  border-top: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 14px var(--xp-shadow), inset 0 0 0 1px #fff8;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.window.maxed { border-radius: 0; }

.titlebar {
  height: 30px;
  display: flex; align-items: center;
  padding: 0 4px 0 6px;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0053ee 40%, #0641e0 88%, #0831d9 100%);
  background-blend-mode: normal;
  color: #fff;
  border-radius: 7px 7px 0 0;
  box-shadow: inset 0 1px 0 #4aa3ff, inset 0 2px 3px #2f7bf0;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.55);
  cursor: default;
  flex: 0 0 auto;
}
.window.inactive .titlebar {
  background: linear-gradient(180deg,#7ba2e7 0%, #6a90d8 50%, #7196db 100%);
  box-shadow: inset 0 1px 0 #a9c3ef;
}
.titlebar .tbicon { width: 16px; height: 16px; margin-right: 5px; flex: 0 0 auto; object-fit: contain; }
.titlebar .tbtitle { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .tbbtns { display: flex; gap: 2px; }
.titlebar-btn {
  width: 22px; height: 22px;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff; font-weight: bold; font-family: "Marlett", var(--tahoma);
  display: grid; place-items: center;
  font-size: 13px;
  background: linear-gradient(180deg,#3f8cf3,#0e56d6);
  box-shadow: inset 0 1px 0 #a9c3ef;
}
.titlebar-btn:hover { background: linear-gradient(180deg,#68a8f7,#2a70e8); }
.titlebar-btn.close { background: linear-gradient(180deg,#f79a7f,#e14b25); }
.titlebar-btn.close:hover { background: linear-gradient(180deg,#ffb89f,#f15a2e); }

.window-menu {
  display: flex; gap: 2px;
  padding: 2px 4px;
  background: var(--xp-face);
  border-bottom: 1px solid #d5d1c2;
  font-size: 12px;
}
.window-menu span { padding: 2px 7px; border-radius: 3px; }
.window-menu span:hover { background: #316ac5; color: #fff; }

.window-body {
  flex: 1;
  overflow: auto;
  background: #fff;
  position: relative;
}
.window-body.face { background: var(--xp-face); }
.window-statusbar {
  height: 22px; flex: 0 0 auto;
  border-top: 1px solid #d5d1c2;
  background: var(--xp-face);
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px; font-size: 11px; color: #333;
}
.window-statusbar .cell { border: 1px solid; border-color: #b0ad9e #fff #fff #b0ad9e; padding: 1px 8px; }

/* ---------- XP scrollbars ---------- */
.window-body::-webkit-scrollbar { width: 16px; height: 16px; }
.window-body::-webkit-scrollbar-track { background: #d4d0c8; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080; }
.window-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#e9f0fb,#a7c1ec); border: 1px solid #4a7fd6; border-radius: 2px; }
.window-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#f0f6ff,#8fb2e8); }

/* ---------- Taskbar ---------- */
#taskbar {
  position: fixed; left: 0; bottom: 0;
  width: 100%; height: 34px;
  padding-bottom: env(safe-area-inset-bottom, 0px);   /* clear the iOS home bar */
  display: flex; align-items: stretch;
  background: linear-gradient(180deg,#3f8cf3 0%, #245edb 9%, #245edb 88%, #1941a5 100%);
  border-top: 1px solid #0f60ff;
  box-shadow: inset 0 1px 0 #5a9bff;
  z-index: 9000;
}

.start-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px 0 10px;
  height: 100%;
  margin-right: 6px;
  font-style: italic; font-weight: bold; font-size: 16px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  background: linear-gradient(180deg,#5aa733 0%, #48901f 45%, #3d8113 55%, #4c9a1e 100%);
  border-right: 2px solid #2c5e0e;
  border-radius: 0 12px 12px 0;
  box-shadow: inset 0 1px 0 #8ed15c, inset -3px 0 6px #2c5e0e;
}
.start-btn:hover { background: linear-gradient(180deg,#6bbf3f 0%, #529f24 45%, #468e18 55%, #58ab25 100%); }
.start-btn.active { background: linear-gradient(180deg,#3d8113 0%, #326a10 55%, #3d8113 100%); box-shadow: inset 2px 2px 5px #204d08; }
.start-btn img { width: auto; height: 26px; object-fit: contain; margin-right: 2px; }

#taskbtns { display: flex; align-items: center; gap: 4px; flex: 1; padding: 3px 4px; overflow: hidden; }
.taskbtn {
  display: flex; align-items: center; gap: 6px;
  min-width: 130px; max-width: 165px; height: 26px;
  padding: 0 8px;
  color: #fff; font-size: 12px;
  background: linear-gradient(180deg,#3f8cf3,#245edb);
  border: 1px solid #1941a5;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #6ba3f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.taskbtn img { width: 16px; height: 16px; flex: 0 0 auto; }
.taskbtn span { overflow: hidden; text-overflow: ellipsis; }
.taskbtn.active { background: linear-gradient(180deg,#1c4db8,#3f7de0); box-shadow: inset 1px 1px 3px #0d2f7a; }
.taskbtn:hover { background: linear-gradient(180deg,#5a9df7,#3170e6); }

#systray {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg,#1288e9 0%, #139ff0 50%, #0e7ada 100%);
  border-left: 1px solid #0f60ff;
  box-shadow: inset 1px 0 0 #4aa3ff;
  color: #fff; font-size: 12px;
}
#systray .tray-ico { width: 16px; height: 16px; display: grid; place-items: center; font-size: 12px; }
#clock { min-width: 52px; text-align: center; }