/* windows.css — desktop container, hybrid-window chrome, taskbar/start-menu/tray */

/* ========================================== */
/* 💻 SECTION 2: DESKTOP & HYBRID WINDOWS     */
/* ========================================== */
.desktop-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: none;
  background-color: #008080; /* Classic Teal Default */
  background-size: cover;
  background-position: center;
}

/* Background Presets */
.bg-preset-void {
  background-color: #0a0a10;
  background-image: radial-gradient(#1f1f3a 1px, transparent 0);
  background-size: 20px 20px;
}

.bg-preset-w98 {
  background-color: #017E80;
  background-image: radial-gradient(#014E80 1px, transparent 0);
  background-size: 20px 20px;
}

.bg-preset-matrix {
  background-color: #020d04;
  background-image: linear-gradient(0deg, rgba(0, 255, 70, 0.05) 1px, transparent 0);
  background-size: 100% 4px;
}

.bg-preset-blood {
  background: radial-gradient(circle, #2b0000 0%, #000000 100%);
}

.bg-preset-aero {
  background: url('../assets/images/wallpapers/aeroblueglow.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.bg-preset-ubuntu {
  background-color: #7b4b2b !important;
  background-image: url('../assets/images/wallpapers/7.10-Gutsy-Gibbon.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.bg-preset-platinum {
  background-color: #8F9AC4 !important;
  background-image: url('../assets/images/wallpapers/macOS9.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Desktop Icons Grid */
.desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 20px;
  padding: 20px;
  height: calc(100vh - 40px);
}

.icon-item {
  width: 75px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  text-shadow: 1px 1px 2px #000;
}

.icon-item:hover span {
  background-color: #000080;
}

.icon-item .icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.icon-item span {
  font-size: 11px;
  padding: 1px 3px;
  word-break: break-word;
}

/* Hybrid Windows (Aero + Win9x) */
.hybrid-window {
  position: absolute;
  background: rgba(236, 233, 216, 0.95);
  border: 2px solid #0055ea;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.6);
  min-width: 320px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  contain: layout style;
  will-change: left, top;
}

.aero-titlebar {
  background: linear-gradient(180deg, #0058e6 0%, #003b9b 100%);
  color: white;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px 6px 0 0;
  cursor: move;
  font-weight: bold;
  font-size: 12px;
}

.win-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.title-glitch {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.win-controls {
  display: flex;
  gap: 3px;
}

.win-btn {
  width: 18px;
  height: 18px;
  background: #ece9d8;
  border: 1px solid #707070;
  font-size: 10px;
  cursor: pointer;
  line-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.win-btn.close {
  background: #e81123;
  color: white;
  border-color: #a80000;
}

.window-body {
  padding: 8px;
  background: #ece9d8;
  color: #000;
  font-size: 12px;
}

.aero-statusbar {
  background: #f0f0f0;
  border-top: 1px solid #a0a0a0;
  padding: 2px 6px;
  font-size: 10px;
  color: #555;
  display: flex;
  justify-content: space-between;
}

/* Inset Cards & UI Elements */
.inset-card {
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  background: #ffffff;
  padding: 8px;
  margin-bottom: 8px;
}

.card-label {
  display: block;
  font-size: 10px;
  font-weight: bold;
  color: #000080;
  margin-bottom: 6px;
}

.win95-btn {
  background: #ece9d8;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}

.win95-btn:active {
  border-color: #808080 #ffffff #ffffff #808080;
}

/* Marquee Box inside Window */
.marquee-box {
  background: #000;
  color: #00ff00;
  font-family: monospace;
  font-size: 11px;
  padding: 2px;
  margin-bottom: 8px;
  border: 2px inset #fff;
}

/* Journal Blog Layout */
.content-grid-journal {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  margin-top: 6px;
}

.profile-card {
  text-align: center;
}

.scary-avatar {
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  background: #222;
  border: 1px solid #444;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 45px;
  margin: 0 auto 6px auto;
  transition: transform 0.2s;
}

.scary-avatar:hover {
  transform: scale(1.1) rotate(5deg);
}

.status-indicator {
  font-size: 10px;
  margin-top: 4px;
}

.green-pulse {
  color: #00ff00;
  animation: blink 1s infinite alternate;
}

/* ==========================================
   🎮 GAMING ACCOUNTS — sidebar button + popup window
   (Frutiger Aero / Vista-era glass look)
   ========================================== */
.accounts-open-btn {
  width: 100%;
  margin-top: 4px;
  text-align: center;
}

.accounts-window-body {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eef8ff 0%, #d3ecfb 45%, #aedcf7 100%) !important;
  padding: 14px !important;
}

/* Classic Frutiger Aero glossy highlight sheen */
.accounts-window-body::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -20px;
  width: 220px;
  height: 90px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 72%);
  transform: rotate(-12deg);
  pointer-events: none;
}

.accounts-window-intro {
  position: relative;
  z-index: 1;
  margin: 0 0 10px !important;
  font-size: 11px;
  color: #0a5a91;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.accounts-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(223, 241, 255, 0.75) 48%, rgba(186, 224, 250, 0.65) 50%, rgba(213, 236, 253, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 5px rgba(0, 60, 120, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.account-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 120, 200, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.account-tile-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.7), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.account-tile-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.account-tile-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.account-tile-info strong {
  font-size: 12px;
  color: #063a5e;
}

.account-tile-info small {
  font-size: 10px;
  color: #2c6a94;
}

.account-tile-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.account-psn .account-tile-icon { background: linear-gradient(180deg, #57b0ee, #0b5fa5); }
.account-steam .account-tile-icon { background: linear-gradient(180deg, #4a4a52, #16171b); }
.account-xbox .account-tile-icon { background: linear-gradient(180deg, #79cf58, #2e7d1e); }

.cat-list {
  list-style: none;
}

.cat-item {
  padding: 4px;
  cursor: pointer;
  font-size: 11px;
}

.cat-item:hover, .cat-item.active {
  background-color: #000080;
  color: white;
}

.led-display {
  background: #000;
  color: #00ff00;
  font-family: monospace;
  font-size: 16px;
  text-align: center;
  padding: 4px;
  border: 1px inset #555;
}

.journal-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.current-view-tag {
  font-size: 11px;
  font-weight: bold;
  color: #333;
}

.journal-content-area {
  background: white;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  height: 280px;
  overflow-y: auto;
  padding: 10px;
}

.post-summary-card {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.post-summary-card:hover .post-title {
  color: #000080;
  text-decoration: underline;
}

.post-badge {
  background: #000080;
  color: white;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 2px;
}

.post-title {
  font-size: 13px;
  margin: 4px 0 2px 0;
}

.post-date {
  font-size: 10px;
  color: #666;
}

.terminal-block {
  background: #000;
  color: #00ff00;
  font-family: monospace;
  padding: 6px;
  font-size: 11px;
  margin: 6px 0;
  white-space: pre-wrap;
}

/* Winamp Mini Player */
.winamp-player {
  background: #000;
  color: #00ff00;
  font-family: monospace;
  padding: 6px;
  margin-top: 8px;
  border: 2px solid #808080;
}

.winamp-title {
  font-size: 10px;
  margin-bottom: 4px;
}

.winamp-controls button {
  background: #333;
  color: #fff;
  border: 1px solid #555;
  font-size: 9px;
  cursor: pointer;
  padding: 2px 6px;
}

.time-display {
  float: right;
  font-size: 11px;
}

/* Winamp Full Player Window */
.winamp-player-full {
  display: flex;
  flex-direction: column;
}

.winamp-screen {
  background: #000;
  color: #0ff;
  font-family: monospace;
  padding: 8px;
  border: 2px inset #fff;
  margin-bottom: 8px;
}

.winamp-time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: #00ff00;
}

.winamp-kbps {
  font-size: 10px;
  color: #888;
}

.winamp-button-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.track-playlist-box {
  background: #f0f0f0;
  border: 1px solid #a0a0a0;
  padding: 4px;
}

.playlist-items {
  list-style: none;
  background: #fff;
  border: 2px inset #fff;
  max-height: 100px;
  overflow-y: auto;
}

.playlist-items li {
  padding: 4px;
  cursor: pointer;
  font-size: 11px;
}

.playlist-items li:hover {
  background: rgba(255, 255, 255, 0.1);
}
.playlist-items li.active-track {
  background: #000080;
  color: #00ffcc;
  font-weight: bold;
}

.track-playlist-box {
  max-height: 120px; /* Adjust height as needed */
  overflow-y: auto;  /* Adds vertical scrollbar when tracks exceed height */
  margin-top: 8px;
}

/* Optional: Retro custom scrollbar styling */
.track-playlist-box::-webkit-scrollbar {
  width: 8px;
}
.track-playlist-box::-webkit-scrollbar-track {
  background: #000;
}
.track-playlist-box::-webkit-scrollbar-thumb {
  background: #555;
  border: 1px solid #aaa;
}