/* ============================================================================
   glixy OS - Official Theme Override & Token Unification
   Entity: glix // Product: glixy OS
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Silkscreen&display=swap');
@import url('/Rules/glixy-colors.css');
@import url('/Rules/glixy-font.css');

:root {
  /* Unified Palette Tokens */
  --glixy-pink: #FF1493;
  --glixy-violet: #7C3AED;
  --glixy-lavender: #C084FC;
  --glixy-bg-void: #0A0814;
  --glixy-bg-surface: #161626;
  --glixy-bg-glass: rgba(22, 22, 38, 0.88);
  --glixy-border-glass: rgba(255, 255, 255, 0.12);
  --glixy-text-primary: #FFFFFF;
  --glixy-text-muted: #94A3B8;

  /* Gradients */
  --glixy-gradient-core: linear-gradient(135deg, #7C3AED 0%, #FF1493 45%, #C084FC 100%);
  --glixy-gradient-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);

  /* Dual-Level Shadows: physical shadow + soft neon glow */
  --glixy-shadow-window-active: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 20, 147, 0.38);
  --glixy-shadow-window-inactive: 0 14px 32px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.4);
  --glixy-shadow-card: 0 16px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(124, 58, 237, 0.25);
  --glixy-shadow-cta: 0 10px 24px rgba(255, 20, 147, 0.4), 0 0 14px rgba(124, 58, 237, 0.3);

  /* Global typography override */
  --font-system: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Force Plus Jakarta Sans on desktop UI elements */
body, button, input, textarea, select, .xp-window, .xp-titlebar, .xp-taskbar, .xp-start-menu, .desktop-icon-btn, .start-item-text, .xp-dialog-btn, .desktop-aero-sound-widget, .desktop-aero-theme-widget {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ============================================================================
   TASKBAR: Void Obsidian (#0A0814) with subtle Cyber accents
   ============================================================================ */
.xp-taskbar,
body.theme-xp-luna .xp-taskbar,
body.theme-mode-dark .xp-taskbar,
body.theme-mode-blind .xp-taskbar {
  background: linear-gradient(180deg, #161626 0%, #0A0814 60%, #06050C 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.75), 0 -1px 8px rgba(255, 20, 147, 0.15) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Tasto Start: glixy Liquid Glass */
.xp-start-btn,
body.theme-xp-luna .xp-start-btn,
body.theme-mode-dark .xp-start-btn,
body.theme-mode-blind .xp-start-btn {
  height: 100% !important;
  padding: 0 16px 0 12px !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(255, 20, 147, 0.9) 60%, rgba(192, 132, 252, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 0 16px rgba(255, 20, 147, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

/* Aero Sheen reflection on Start Button */
.xp-start-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 0 10px 0 0;
  pointer-events: none;
}

.xp-start-btn:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 0 22px rgba(255, 20, 147, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-1px);
}

.xp-start-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95) !important;
}

.glixy-start-icon {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* Taskbar task buttons */
.xp-task-btn,
body.theme-xp-luna .xp-task-btn,
body.theme-mode-dark .xp-task-btn {
  background: rgba(22, 22, 38, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
}

.xp-task-btn:hover {
  background: rgba(35, 35, 55, 0.9) !important;
  border-color: rgba(255, 20, 147, 0.45) !important;
  box-shadow: 0 0 10px rgba(255, 20, 147, 0.3) !important;
}

.xp-task-btn.active {
  background: rgba(124, 58, 237, 0.35) !important;
  border-color: #FF1493 !important;
  box-shadow: 0 0 12px rgba(255, 20, 147, 0.5), inset 0 0 8px rgba(124, 58, 237, 0.3) !important;
}

/* Systray dark */
.xp-systray,
body.theme-xp-luna .xp-systray {
  background: rgba(10, 8, 20, 0.65) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
  border-radius: 4px;
  margin: 2px 4px 2px 0;
}

/* ============================================================================
   FINESTRE: Bordo sottile Cyber Pink (#FF1493) sulle finestre attive
   Doppio livello di ombra (fisica scura + glow neon fucsia/viola)
   ============================================================================ */
.xp-window {
  border-radius: 12px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease !important;
}

/* Finestra ATTIVA */
.xp-window:not(.inactive),
.xp-window.active {
  border: 1.5px solid #FF1493 !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85), 0 0 22px rgba(255, 20, 147, 0.42) !important;
}

/* Titlebar finestra ATTIVA */
.xp-window:not(.inactive) .xp-titlebar,
.xp-window.active .xp-titlebar {
  background: linear-gradient(135deg, #1b1633 0%, #2a112f 50%, #161626 100%) !important;
  border-bottom: 1px solid rgba(255, 20, 147, 0.35) !important;
  color: #FFFFFF !important;
}

/* Finestra INATTIVA */
.xp-window.inactive {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.3) !important;
  opacity: 0.94;
}

.xp-window.inactive .xp-titlebar {
  background: #161626 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

/* ============================================================================
   START MENU glixy OS
   ============================================================================ */
.xp-start-menu {
  background: rgba(16, 14, 28, 0.95) !important;
  border: 1px solid rgba(255, 20, 147, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 25px rgba(124, 58, 237, 0.3) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  overflow: hidden !important;
}

.start-menu-header {
  background: linear-gradient(135deg, #7C3AED 0%, #FF1493 60%, #C084FC 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.start-menu-left {
  background: rgba(10, 8, 20, 0.7) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.start-menu-right {
  background: rgba(22, 22, 38, 0.75) !important;
}

.start-menu-footer {
  background: #0A0814 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.start-menu-item:hover {
  background: rgba(255, 20, 147, 0.14) !important;
  border-radius: 8px;
}

.start-menu-item:hover b {
  color: #FF1493 !important;
}

/* myglixy badges in Tagboard & Chat */
.myglixy-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--glixy-gradient-core);
  color: #FFFFFF !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(255, 20, 147, 0.35);
}