/* =============================
   Windows XP Desktop + Wallpaper
   ============================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: url('../images/WindowsXP_Desktop.jpg') center / cover no-repeat fixed;
  background-color: #0d2c6e; /* fallback blue */
}

/* Desktop container */
.desktop-area {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Desktop icons */
.icon {
  position: absolute;
  width: 80px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}

.icon img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}

.icon span {
  display: block;
  margin-top: 4px;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: white;
  text-shadow: 1px 1px 2px black;
}

.icon.selected span {
  background-color: rgba(0, 120, 215, 0.6);
  border-radius: 3px;
  padding: 2px 4px;
}

/* Taskbar image pinned to bottom (static PNG) */
.taskbar-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.taskbar-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   Authentic Windows XP Window
   ============================= */
.window[hidden] { display: none; }

.window {
  position: absolute;
  top: 15vh;
  left: 15vw;
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  background: #ece9d8;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  z-index: 999;
  font-family: "Trebuchet MS", Tahoma, sans-serif;

  /* XP bevel (already existed) */
  box-shadow:
    inset -1px -1px #00138c,
    inset 1px 1px #0831d9,
    inset -2px -2px #001ea0,
    inset 2px 2px #166aee,
    inset -3px -3px #003bda,
    inset 3px 3px #0855dd;

  /* ⭐ NEW — Thick XP blue side & bottom borders */
  border-left: 4px solid #003DD7;
  border-right: 4px solid #003DD7;
  border-bottom: 4px solid #003DD7;
}

/* Title Bar */
.title-bar {
  font-family: "Trebuchet MS";
  background: linear-gradient(
    180deg,
    rgba(9,151,255,1) 0%,
    rgba(0,83,238,1) 8%,
    rgba(0,80,238,1) 40%,
    rgba(0,102,255,1) 88%,
    rgba(0,102,255,1) 93%,
    rgba(0,91,255,1) 95%,
    rgba(0,61,215,1) 96%,
    rgba(0,61,215,1) 100%
  );
  height: 28px;
  border-top: 1px solid #0831d9;
  border-top-left-radius: 8px;
  border-top-right-radius: 7px;
  color: white;
  text-shadow: 1px 1px #0f1089;
  font-size: 13px;
  padding: 3px 5px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  user-select: none;
 
 /* 🔹 New: let the bar overlap the thick outer border */
  margin-left: -4px;
  margin-right: -4px;
}

/* Title text with icon */
.title-bar-text {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}
.title-bar-text img {
  width: 16px;
  height: 16px;
}

/* XP Titlebar Control Buttons */
.title-bar-controls {
  display: flex;
  gap: 2px;
}

.title-bar-controls button {
  width: 21px;
  height: 21px;
  border: 1px solid white;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: all 0.1s ease-in-out;
  box-shadow: inset 0 0 1px rgba(255,255,255,0.6);
}

/* Minimize + Maximize buttons */
.min-btn,
.max-btn {
  background: linear-gradient(to bottom,
    rgba(9,151,255,1) 0%,
    rgba(0,83,238,1) 40%,
    rgba(0,61,215,1) 100%);
}

/* Close button: true XP red */
.close-btn {
  background: linear-gradient(to bottom, #ff4c4c 0%, #cc0000 70%);
}

/* Hover / active */
.title-bar-controls button:hover { filter: brightness(1.2); }
.title-bar-controls button:active { filter: brightness(0.9); transform: translateY(1px); }

/* White symbols */
.min-btn::before,
.max-btn::before,
.close-btn::before {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
}
.min-btn::before { content: "_"; top: -2px; }
.max-btn::before { content: "☐"; font-size: 11px; }
.close-btn::before { content: "✕"; }

/* Hover outlines */
.title-bar-controls button:hover {
  box-shadow: 0 0 3px white, inset 0 0 1px rgba(255,255,255,0.8);
}

/* Window Body (XP dialog background) */
.window-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 10px;
  background: #ece9d8; /* XP gray for all windows */
  border: 1px solid #7f9db9;
  border-top: none;
  font-size: 12px;
  color: black;
}

/* =============================
   Recycle Bin (Files entry in Windows)
   ============================= */
.file {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.file img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.file span {
  font: 11px Tahoma, sans-serif;
  color: #000;
}

/* =============================
   OK Button (Fine Tuned popup)
   ============================= */
.ok-container {
  width: 100%;              /* stretch full width of window body */
  text-align: center;       /* center the button horizontally */
  margin-top: 16px;
  padding-bottom: 6px;
}

.ok-btn {
  background: #d4d0c8;
  border: 1px solid #7f9db9;
  border-radius: 3px;
  padding: 4px 18px;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  cursor: pointer;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
}
.ok-btn:hover {
  background: #e6e3df;
}
.ok-btn:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
  transform: translateY(1px);
}

/* =============================
   MaxyMail - XP Email Window
   ============================= */

.mail-window {
  padding: 8px 10px 10px;
}

/* Header rows: To / Cc / Subject */
.mail-header {
  margin-bottom: 8px;
}

.mail-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

.mail-label {
  width: 70px;
  font-weight: bold;
}

.mail-input {
  flex: 1;
  height: 20px;
  background: #ffffff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}

/* Message area */
.mail-message-box {
  background: #ffffff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
  padding: 8px 10px;
  min-height: 140px;
  font-size: 12px;
  color: #000;
}

.mail-greeting {
  margin-top: 0;
  margin-bottom: 6px;
}

.mail-body-text {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Contact links section */
.contact-links {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each link row with icon + text */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;       /* underline handled on span */
  width: fit-content;          /* keeps click area tight */
}

/* Icons next to link text */
.contact-link img {
  width: 16px;
  height: 16px;
}

/* Default hyperlink look: blue + underline */
.contact-link span {
  text-decoration: underline;
  color: #0000EE;              /* blue */
  font-size: 12px;
}

/* Our custom "visited" state (not :visited) */
.contact-link.visited span {
  color: #551A8B;              /* purple while window is open */
}

/* =============================
   Gaming GIF Window
   ============================= */

.gif-window {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.gif-container {
  max-width: 100%;
  max-height: 100%;
}

.gif-container img {
  max-width: 100%;
  max-height: 60vh; /* keep it from getting too tall */
  border: 1px solid #7f9db9;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  display: block;
}
/* =============================
   LIVE XP-STYLE TASKBAR
   ============================= */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28px; /* XP-ish height */
  z-index: 5000;
  pointer-events: none;  /* 👈 let clicks go through to icons */
   
  /* SAME GRADIENT as your XP window title bar */
  background: linear-gradient(
    180deg,
    rgba(9,151,255,1) 0%,
    rgba(0,83,238,1) 8%,
    rgba(0,80,238,1) 40%,
    rgba(0,102,255,1) 88%,
    rgba(0,102,255,1) 93%,
    rgba(0,91,255,1) 95%,
    rgba(0,61,215,1) 96%,
    rgba(0,61,215,1) 100%
  );

 border-radius: 10px; /* ← makes taskbar rounded */

  /* XP style bevel (matches your popup windows) */
box-shadow:
  inset 2px 2px 3px rgba(180,210,255,0.9),   /* strong light-blue highlight */
  inset -2px -2px 3px rgba(0,0,0,0.25),      /* XP dark shadow */
  inset 4px 4px 6px rgba(160,190,255,0.45),  /* secondary soft blue highlight */
  inset -4px -4px 6px rgba(0,0,0,0.18);      /* deeper corner shading */
}

/* =============================
   XP System Tray (Aesthetic Only)
   ============================= */
.taskbar-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;  /* Start on left, tray on right */
  align-items: stretch;
  padding: 0;

  /* Entire bar is still aesthetic-only */
  pointer-events: none;
}

.system-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 100%;

  /* Your chosen blue gradient */
  background: linear-gradient(
    to bottom,
    #6bb8f0 0%,      /* soft top highlight */
    #119def 45%,     /* core XP blue */
    #0b77c4 100%     /* deeper bottom edge */
  );

  /* XP bevel (restored) but brightest highlight matched to your blue */
 box-shadow:
    inset 2px 2px 3px rgba(180,210,255,0.9),
    inset -2px -2px 3px rgba(0,0,0,0.25),
    inset 4px 4px 6px rgba(160,190,255,0.45),
    inset -4px -4px 6px rgba(0,0,0,0.18);

  border-radius: 0;
  pointer-events: none;
}

.tray-icons {
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.tray-icons img {
  width: 16px;
  height: 16px;
  pointer-events: none; /* ensures click passes through */
}

/* XP-style clock */
.tray-clock {
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: white;
  padding-left: 10px;
  padding-right: 4px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* =============================
   XP Start Button (static)
   ============================= */
.start-button {
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none; /* aesthetic only */
}

.start-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 18px 4px 14px;
  height: 23px;        /* slightly shorter visually */
  margin-top: 2px;     /* nudges it down a bit */

  /* Green XP-style gradient using your core color #46aa45 */
  background: linear-gradient(
    to bottom,
    #76d06f 0%,    /* light top highlight */
    #46aa45 45%,   /* core green you chose */
    #2c7a2b 100%   /* darker bottom edge */
  );

  /* Bevel similar to taskbar style */
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.6),
    inset -2px -2px 3px rgba(0,0,0,0.35),
    inset 4px 4px 6px rgba(255,255,255,0.3),
    inset -4px -4px 6px rgba(0,0,0,0.4);

  border-radius: 0 6px 6px 0;
  border: 1px solid rgba(0,0,0,0.5);

  pointer-events: none; /* still non-clickable for now */
}

/* XP logo inside Start button */
.start-inner img {
  width: 16px;
  height: 16px;
  display: block;
}

/* "Start" text – thicker, slightly bubbly */
.start-inner span {
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
  letter-spacing: 0.2px;
}