/* --- TYPOGRAPHY & DESKTOP --- */
body, html {
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 11px;
}

#desktop {
    background-color: #e6cce3; 
    background-image: url('https://images4.alphacoders.com/684/thumb-1920-684686.jpg'); 
    background-size: cover;
    background-position: center;
}

/* =========================================
   DESKTOP SELECTION BOX & TEXT-SELECT DISABLE
   ========================================= */

/* Prevent native browser text-highlighting on wallpaper and icons */
#desktop, .desktop-icon, .icon-text, #taskbar {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Classic Windows XP Blue Rubber-Band Marquee */
#desktop-marquee {
    position: absolute;
    border: 1px solid #316ac5;
    background: rgba(49, 106, 197, 0.25);
    pointer-events: none; /* Allows mouse events to pass straight through */
    z-index: 15;
    box-sizing: border-box;
}

/* =========================================
   CUSTOM XP CURSORS & WINDOW RESIZING
   ========================================= */

/* 1. Default Arrow Cursor across the OS */
*, html, body {
    cursor: url('/custom_cursor/Cursor arrow white.png'), url('../custom_cursor/Cursor arrow white.png'), default;
}

/* Clickable elements still show the classic arrow */
a, button, .start-item, .explorer-item, .desktop-icon, .win-btn {
    cursor: url('/custom_cursor/Cursor arrow white.png'), url('../custom_cursor/Cursor arrow white.png'), pointer !important;
}

/* 2. Drag Move Cursor (When moving/holding windows by titlebar) */
.window-titlebar {
    cursor: url('/custom_cursor/Cursor drag move.png') 4 4, url('../custom_cursor/Cursor drag move.png') 4 4, move !important;
}
body.window-dragging, body.window-dragging * {
    cursor: url('/custom_cursor/Cursor drag move.png') 4 4, url('../custom_cursor/Cursor drag move.png') 4 4, move !important;
}

/* 3. Busy Hourglass Cursor (Boot screen) */
#boot-screen, body.os-busy, body.os-busy * {
    cursor: url('/custom_cursor/Cursor hourglass white.png') 8 8, url('../custom_cursor/Cursor hourglass white.png') 8 8, wait !important;
}

/* 4. Working in Background (Shows briefly when opening an app!) */
body.os-working, body.os-working * {
    cursor: url('/custom_cursor/Cursor arrow hourglass white.png') 0 0, url('../custom_cursor/Cursor arrow hourglass white.png') 0 0, progress !important;
}

/* =========================================
   8-DIRECTION RESIZE HANDLES
   ========================================= */
.os-window {
    position: absolute;
    min-width: 280px;
    min-height: 180px;
    box-sizing: border-box;
}

.resizer {
    position: absolute;
    z-index: 20;
}
.resizer.r-top { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize !important; }
.resizer.r-bottom { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize !important; }
.resizer.r-left { top: 8px; bottom: 8px; left: -3px; width: 6px; cursor: w-resize !important; }
.resizer.r-right { top: 8px; bottom: 8px; right: -3px; width: 6px; cursor: e-resize !important; }

.resizer.r-top-left { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nwse-resize !important; }
.resizer.r-top-right { top: -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize !important; }
.resizer.r-bottom-left { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: nesw-resize !important; }
.resizer.r-bottom-right { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize !important; }

/* --- ICON SIZING FIXES --- */

/* 1. Desktop Icons */
.desktop-icon .icon-img img { 
    width: 48px !important; 
    height: 48px !important; 
    object-fit: contain; 
    margin-bottom: 5px; 
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.4)); 
}

/* 2. File Explorer Icons */
.explorer-item .icon-img img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
    margin-bottom: 3px;
}

/* Force all titlebar and taskbar icons to stay 16x16 */
.window-title img,
.window-icon img,
.taskbar-app img,
#taskbar-apps img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* 3. Start Menu Icons */
.start-item img { 
    width: 28px !important; 
    height: 28px !important; 
    object-fit: contain;
    margin-right: 10px; 
}

/* Lock window titlebar icon to classic 16x16 size */
.window-title .window-icon img,
.window-title img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: middle;
}

/* BIGGER ICONS */
.desktop-icon {
    width: 80px; margin: 10px 5px; text-align: center;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
.desktop-icon img { 
    width: 48px; height: 48px; /* Changed from 32px to 48px */
    margin-bottom: 5px; 
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.4)); /* Adds a tiny shadow to the icons */
}
.desktop-icon .icon-text {
    color: white; text-shadow: 1px 1px 2px black;
    background: transparent; padding: 2px 4px; border-radius: 3px;
}
/* --- PERSISTENT WINDOWS SELECTION STATE --- */

/* Hover state before clicking */
.desktop-icon:hover .icon-text {
    background: rgba(212, 148, 194, 0.25);
}

/* Selected icon image effect */
.desktop-icon.selected .icon-img img {
    filter: drop-shadow(0 0 3px #fff) brightness(0.9);
    opacity: 0.85;
}

/* Selected icon text box with XP dotted border */
.desktop-icon.selected .icon-text {
    background: #863972 !important; /* Cool plum/pink selection box */
    color: #ffffff !important;
    outline: 1px dotted rgba(255, 255, 255, 0.9);
    outline-offset: -1px;
}


/* --- TASKBAR & START BUTTON (COOL PINK) --- */
#taskbar {
    /* Icy cool pink gradient */
    background: linear-gradient(to bottom, #f8eaf4 0%, #ebd1e2 10%, #d494c2 90%, #ca85b5 100%);
    border-top: 1px solid #ffffff;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.2);
}

#start-button {
    height: 100%; padding: 0 20px 0 10px; 
    font-weight: bold; font-size: 16px; font-style: italic; font-family: 'Trebuchet MS', sans-serif;
    color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    /* Vibrant cool magenta start button */
    background: linear-gradient(to bottom, #d47ab2 0%, #bd5c9f 10%, #aa498b 90%, #993979 100%);
    border: none; border-right: 1px solid #7a1f5c; border-radius: 0 15px 15px 0; cursor: pointer;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.7), 2px 0 4px rgba(0,0,0,0.2);
}
#start-button:hover { filter: brightness(1.1); }

.taskbar-app {
    height: 24px; margin: 3px 2px; padding: 0 10px; min-width: 120px; text-align: left;
    background: linear-gradient(to bottom, #f8eaf4 0%, #ebd1e2 100%);
    border: 1px solid #b57c9f; border-radius: 3px; color: #401f33; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-shadow: inset 1px 1px 1px rgba(255,255,255,0.8);
}
.taskbar-app:hover { filter: brightness(1.05); }
.taskbar-app.active {
    background: linear-gradient(to bottom, #bd5c9f 0%, #aa498b 100%);
    color: white; border-color: #7a1f5c;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4);
}

#system-tray { background: rgba(255, 255, 255, 0.4); border-left: 1px solid #b57c9f; color: #401f33; font-weight: bold;}

/* --- WINDOW CHROME (LUNA STYLE) --- */
.os-window {
    /* Thick cool pink border */
    background: linear-gradient(to right, #ebd1e2 0%, #d494c2 5%, #d494c2 95%, #c07ea8 100%);
    padding: 0 4px 4px 4px;
    border-radius: 8px 8px 3px 3px;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8);
    border: none;
}

.window-titlebar {
    background: linear-gradient(to bottom, #f8eaf4 0%, #e2b8d3 15%, #c586b2 85%, #b674a2 100%);
    border-radius: 5px 5px 0 0;
    height: 28px; padding: 0 5px; margin-bottom: 2px;
    color: white; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.window-content { border: 1px solid #995c84; background: #fff; }

/* Min/Max/Close Buttons */
.window-controls { display: flex; gap: 2px; padding-right: 2px; }
.win-btn {
    width: 21px; height: 21px; border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.9);
    font-weight: bold; font-family: 'Tahoma', sans-serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,0.15);
    cursor: pointer; font-size: 10px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.win-btn.min, .win-btn.max { background: linear-gradient(to bottom, #f3dcf0 0%, #cba2c1 100%); border-color: #aa7a99; }
.win-btn.close { background: linear-gradient(to bottom, #e38896 0%, #cc4259 100%); border-color: #fff; font-size: 11px; padding-bottom: 1px; }
.win-btn:hover { filter: brightness(1.1); }
.win-btn:active { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); }

/* --- START MENU (TRUE 3D GLOSSY LUNA) --- */
#start-menu {
    box-shadow: 2px -2px 15px rgba(0,0,0,0.4);
    border-radius: 8px 8px 0 0;
    border: 1px solid #752962; 
    border-bottom: none;
}

.start-header {
    height: 60px; padding: 0 10px;
    /* This creates the severe 3D bubble effect of XP Luna */
    background: linear-gradient(to bottom, #ebc0e0 0%, #c175b0 10%, #9e4685 40%, #a24b8d 92%, #6e2759 100%);
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.7);
    border-bottom: 2px solid #f2d4e9;
    color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.start-header .user-avatar {
    width: 42px; height: 42px; 
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 5px; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    background: white; 
    display: flex; justify-content: center; align-items: center; 
    margin-right: 12px;
    overflow: hidden;
}

.start-header .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.start-header .user-name { font-size: 20px; font-weight: bold; }

.start-body { background: white; border-top: 1px solid #5a1d47; display: flex; }
.start-left { padding: 5px; background: #ffffff; width: 50%; }
.start-right {
    padding: 5px; width: 50%;
    /* Creates a distinct icy column for the right side */
    background: linear-gradient(to right, #f8eaf4 0%, #e6cce3 100%);
    border-left: 1px solid #f2d4e9; 
    box-shadow: inset 1px 0 0 #c77cb1;
}

.start-item { padding: 8px; cursor: pointer; display: flex; align-items: center; border-radius: 3px; color: #401f33; }
.start-item img { width: 28px; height: 28px; margin-right: 10px; } /* Larger start menu icons */
.start-item:hover { background: #b3639d; color: white; box-shadow: inset 0 0 1px rgba(255,255,255,0.7); }

/* --- APP INTERNALS (EXPLORER / NOTEPAD) --- */
.explorer-toolbar, .notepad-menu { 
    padding: 2px 5px; background: #f8eaf4; border-bottom: 1px solid #d494c2; color: #401f33; display: flex; align-items: center; gap: 15px; 
}
.explorer-actions {
    display: flex; gap: 5px; padding: 5px; background: #f8eaf4; border-bottom: 1px solid #d494c2; align-items: center;
}
.explorer-actions button {
    display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: 3px; color: #401f33;
}
.explorer-actions button:hover { border: 1px solid #b57c9f; background: #ebd1e2; }
.address-bar-container {
    display: flex; align-items: center; padding: 4px 8px; background: #f8eaf4; border-bottom: 1px solid #d494c2; color: #666;
}
.address-bar-container .address-input {
    flex: 1; background: white; border: 1px solid #b57c9f; padding: 2px 5px; display: flex; align-items: center; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); margin-left: 5px;
}
.explorer-main { display: flex; flex: 1; overflow: hidden; background: white; }
.explorer-sidebar {
    width: 160px; background: linear-gradient(to bottom, #f8eaf4 0%, #ebd1e2 100%); border-right: 1px solid #d494c2; padding: 10px; overflow-y: auto;
}
.sidebar-box { background: white; border-radius: 4px; overflow: hidden; border: 1px solid #d494c2; margin-bottom: 10px; }
.sidebar-header { background: linear-gradient(to bottom, #f8eaf4 0%, #e2b8d3 100%); color: #401f33; padding: 4px 8px; font-weight: bold; border-bottom: 1px solid #d494c2; }
.sidebar-content { padding: 8px; font-size: 11px; color: #5a3c4f; text-decoration: underline; cursor: pointer; line-height: 1.5;}
.explorer-body { flex: 1; padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; overflow-y: auto; }
.explorer-item { width: 70px; text-align: center; cursor: pointer; padding: 5px; border-radius: 3px; }
.explorer-item:hover { background: #f8eaf4; }
.explorer-item .icon-img { font-size: 32px; margin-bottom: 3px; }

.notepad-textarea { 
    flex: 1; border: none; resize: none; padding: 10px; font-family: 'Courier New', Courier, monospace; 
    font-size: 14px; outline: none; background: #fff;
}

/* =========================================
   AUTHENTIC WINDOWS MEDIA PLAYER 9 THEME
   ========================================= */
.wmp-app-container {
    display: flex; flex-direction: column; height: 100%; width: 100%;
    background: #020514; user-select: none; font-family: 'Tahoma', sans-serif;
}

/* 1. Menubar */
.wmp-menubar {
    background: linear-gradient(to bottom, #f0f4fa 0%, #d8e2f0 100%);
    padding: 2px 8px; border-bottom: 1px solid #99aebb; font-size: 11px;
    display: flex; gap: 12px; color: #1a2c4e;
}
.wmp-menubar span:hover { color: #0044bb; cursor: pointer; }

/* 2. Main Body */
.wmp-body { flex: 1; display: flex; overflow: hidden; background: #000; }

/* Left Sidebar Tabs */
.wmp-sidebar {
    width: 105px; background: linear-gradient(to right, #cfdaf0 0%, #b4c5e3 100%);
    border-right: 1px solid #7890b8; display: flex; flex-direction: column; padding-top: 4px;
}
.wmp-tab {
    padding: 7px 6px; font-size: 11px; font-weight: bold; color: #20355a;
    border-bottom: 1px solid rgba(255,255,255,0.6); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; line-height: 1.2;
}
.wmp-tab:hover { background: rgba(255,255,255,0.4); }
.wmp-tab.active {
    background: linear-gradient(to right, #ffffff 0%, #e6eefc 100%);
    color: #0b224e; border-left: 3px solid #ff7eb3; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
.wmp-tab-indicator { font-size: 8px; color: #406090; }
.wmp-sidebar-spacer { flex: 1; }
.wmp-sidebar-arrows {
    display: flex; justify-content: center; gap: 10px; font-size: 8px;
    color: #406090; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.5);
}

/* Center Visualizer */
.wmp-screen-area { flex: 1; display: flex; flex-direction: column; position: relative; background: #000; }
.wmp-canvas { flex: 1; width: 100%; display: block; }
.wmp-screen-footer {
    height: 24px; background: #0c172d; border-top: 1px solid #1f335c;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 8px; font-size: 10px; color: #7f9ec9;
}
.wmp-screen-btn { cursor: pointer; padding: 1px 4px; border-radius: 2px; }
.wmp-screen-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Right Playlist Panel */
.wmp-playlist-panel {
    width: 195px; background: #233454; border-left: 1px solid #4a638d;
    display: flex; flex-direction: column;
}
.wmp-playlist-header {
    background: linear-gradient(to bottom, #5d7ca8 0%, #3e587d 100%);
    padding: 5px 8px; font-size: 11px; font-weight: bold; color: #fff;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #233454;
}
.wmp-playlist-list { flex: 1; overflow-y: auto; background: #162238; padding: 2px; }
.wmp-playlist-row {
    padding: 5px 6px; font-size: 11px; color: #bed2ee; cursor: pointer;
    border-bottom: 1px solid #1e2c44; display: flex; flex-direction: column;
}
.wmp-playlist-row:hover { background: #263857; color: #fff; }
.wmp-playlist-row.active {
    background: linear-gradient(to right, #44689e 0%, #2f4970 100%);
    color: #ffffff; font-weight: bold; border-left: 2px solid #56ff78;
}
.wmp-track-artist { font-size: 9px; opacity: 0.75; margin-top: 1px; }

/* 3. WMP9 Metallic Curved Controls Bar */
.wmp-controls-bar {
    height: 68px;
    background: linear-gradient(to bottom, #dde5f2 0%, #b8c8e2 35%, #9cb2d4 50%, #8ca4cb 51%, #b3c5e0 100%);
    border-top: 1px solid #ffffff; box-shadow: inset 0 1px 2px rgba(255,255,255,0.8);
    display: flex; flex-direction: column; padding: 2px 12px 4px 12px;
}

/* WMP9 Glowing Green Scrubber */
.wmp-scrubber-row { width: 100%; display: flex; align-items: center; padding: 2px 0 4px 0; }
.wmp-seek-bar {
    width: 100%; height: 5px; -webkit-appearance: none; appearance: none;
    background: #3a4f72; border-radius: 2px; outline: none; border: 1px solid #22334d;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.5);
}
.wmp-seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 10px;
    background: linear-gradient(to bottom, #7df07d 0%, #22bb33 50%, #0e7e1e 100%);
    border: 1px solid #084c12; border-radius: 2px; cursor: pointer;
    box-shadow: 0 0 3px #33ff55, inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Buttons Row */
.wmp-buttons-row { flex: 1; display: flex; justify-content: space-between; align-items: center; }

/* Left Windows Logo Badge */
.wmp-left-controls { display: flex; align-items: center; gap: 8px; width: 180px; }
.wmp-xp-logo {
    width: 20px; height: 20px; border-radius: 50%; background: #ffffff;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 3px;
    box-sizing: border-box; box-shadow: inset 0 1px 1px #fff, 1px 1px 3px rgba(0,0,0,0.35);
    border: 1px solid #758aa8;
}
.wmp-flag-red { background: #ee4433; border-radius: 2px 0 0 0; }
.wmp-flag-green { background: #33cc44; border-radius: 0 2px 0 0; }
.wmp-flag-blue { background: #2277ee; border-radius: 0 0 0 2px; }
.wmp-flag-yellow { background: #ffcc00; border-radius: 0 0 2px 0; }

.wmp-time-text { font-size: 11px; font-weight: bold; color: #1c3258; }

/* Perfectly Centered Metallic Transport Buttons */
.wmp-center-buttons { display: flex; align-items: center; gap: 6px; }

.wmp-btn-round {
    width: 36px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #d8e5f5 35%, #8ba7cc 75%, #6a8ab5 100%);
    border: 1px solid #3c5a82; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 1px 1px 2px #fff, 0 1px 3px rgba(0,0,0,0.3);
    padding: 0; line-height: 0;
}
.wmp-btn-round:hover { filter: brightness(1.1); }
.wmp-btn-round:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5); }

.wmp-btn-ctrl {
    width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2ecf8 40%, #9cb7db 80%, #7d9bc2 100%);
    border: 1px solid #4a6892; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 1px 1px 1px #fff, 0 1px 2px rgba(0,0,0,0.25);
    padding: 0; line-height: 0;
}
.wmp-btn-ctrl:hover { filter: brightness(1.1); }
.wmp-btn-ctrl:active { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); }

.wmp-icon-holder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}

/* Right Volume & Aux Controls */
.wmp-right-controls { display: flex; align-items: center; gap: 8px; width: 180px; justify-content: flex-end; }
.wmp-volume-slider {
    width: 60px; height: 4px; -webkit-appearance: none; appearance: none;
    background: #3a4f72; border-radius: 2px; outline: none; border: 1px solid #22334d;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.5);
}
.wmp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 9px;
    background: linear-gradient(to bottom, #7df07d 0%, #22bb33 50%, #0e7e1e 100%);
    border: 1px solid #084c12; border-radius: 2px; cursor: pointer;
    box-shadow: 0 0 2px #33ff55, inset 0 1px 0 rgba(255,255,255,0.8);
}

.wmp-btn-aux {
    background: transparent; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 2px;
}
.wmp-btn-aux:hover { filter: brightness(1.2); }

/* =========================================
   WMP9 ALBUM ART BOX
   ========================================= */
.wmp-art-box {
    padding: 10px 8px;
    background: linear-gradient(to bottom, #1e2e4b 0%, #162238 100%);
    border-bottom: 1px solid #334b73;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.wmp-cover-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid #4a638d;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    background: #0b1526;
}

.wmp-cover-info {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}

.wmp-cover-info b {
    color: #ffffff;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wmp-cover-info span {
    color: #8faed9;
    font-size: 10px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   RIGHT-CLICK CONTEXT MENU
   ========================================= */
#os-context-menu {
    position: absolute;
    z-index: 999999;
    background: #ffffff;
    border: 1px solid #a0a0a0;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    padding: 2px;
    font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    min-width: 160px;
    display: none;
    color: #000;
}

.context-menu-item {
    padding: 4px 15px 4px 28px;
    cursor: default;
    position: relative;
    user-select: none;
}

.context-menu-item:hover {
    background: #bd5c9f; /* Rose OS highlight */
    color: #ffffff;
}

.context-menu-divider {
    border-top: 1px solid #dcdcdc;
    margin: 3px 2px;
}

.context-menu-icon {
    position: absolute;
    left: 4px;
    top: 3px;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* =========================================
   PROPERTIES DIALOG
   ========================================= */
.properties-tabs {
    display: flex;
    border-bottom: 1px solid #fff;
    margin-bottom: 10px;
    position: relative;
}
.properties-tab {
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #995c84;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    margin-right: 2px;
    z-index: 2;
    position: relative;
    top: 1px;
}
.properties-body {
    border: 1px solid #995c84;
    padding: 12px;
    background: #fff;
    box-shadow: inset 1px 1px 0 #fff, 1px 1px 2px rgba(0,0,0,0.1);
}
.properties-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.properties-label {
    width: 80px;
    color: #555;
}
.properties-hr {
    border: 0;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #fff;
    margin: 10px 0;
}

/* Disabled context menu options */
.context-menu-item.disabled {
    color: #999999;
    cursor: default;
}
.context-menu-item.disabled:hover {
    background: transparent !important;
    color: #999999 !important;
}

/* CRT Monitor Preview inside Display Properties */
.display-monitor-frame {
    width: 152px;
    height: 120px;
    background: #d4d0c8;
    border: 3px solid #808080;
    border-radius: 8px 8px 3px 3px;
    margin: 0 auto 12px auto;
    padding: 6px;
    box-shadow: inset 1px 1px 0 #fff, 2px 2px 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.display-monitor-screen {
    width: 100%;
    flex: 1;
    background-color: #e6cce3;
    background-image: url('https://images4.alphacoders.com/684/thumb-1920-684686.jpg');
    background-size: cover;
    background-position: center;
    border: 2px inset #000;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.display-monitor-stand {
    width: 40px;
    height: 10px;
    background: #b0aba2;
    border: 1px solid #706b63;
    border-top: none;
    margin: 0 auto;
}
.display-monitor-base {
    width: 80px;
    height: 6px;
    background: #d4d0c8;
    border: 1px solid #706b63;
    border-radius: 2px;
    margin: 0 auto 10px auto;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Windows XP Photo Preview Thumbnail */
.explorer-item .icon-img img.img-preview-thumb {
    width: 34px !important;
    height: 34px !important;
    object-fit: cover !important;
    background: #ffffff;
    border: 1px solid #787878;
    padding: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    border-radius: 1px;
}

/* =========================================
   ROSE MESSENGER (AIM/MSN STYLE)
   ========================================= */
.im-buddy {
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}
.im-buddy:hover {
    background: #fdf2f8;
}
.im-msg {
    margin-bottom: 4px;
    line-height: 1.4;
    word-wrap: break-word;
}
.im-time {
    color: #999;
    font-size: 10px;
}
.im-me {
    color: #0000ff; /* Classic IM Blue */
    font-weight: bold;
}
.im-them {
    color: #ff0000; /* Classic IM Red */
    font-weight: bold;
}
.im-sys {
    color: #008000; /* Classic IM Green for system notices */
    font-weight: bold;
    font-size: 11px;
    margin: 8px 0;
    text-align: center;
}

/* =========================================
   XP SYSTEM TRAY BALLOON NOTIFICATION
   ========================================= */
#tray-balloon {
    position: absolute;
    bottom: 42px;
    right: 15px;
    width: 260px;
    background: #ffffe1; /* Authentic XP post-it yellow */
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.35);
    z-index: 100001;
    font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    color: #000;
    display: none;
    animation: balloonPop 0.3s ease-out;
}

/* Balloon pointing arrow */
#tray-balloon::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 35px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #ffffe1 transparent;
    display: block;
    width: 0;
}
#tray-balloon::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 34px;
    border-width: 9px 9px 0;
    border-style: solid;
    border-color: #000 transparent;
    display: block;
    width: 0;
}

@keyframes balloonPop {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.balloon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 6px;
    color: #401f33;
}
.balloon-close {
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #666;
}
.balloon-close:hover { color: #000; }
.balloon-body {
    display: flex;
    gap: 8px;
    line-height: 1.4;
    font-size: 11px;
}

/* =========================================
   DATE AND TIME PROPERTIES (SEPTEMBER 2009)
   ========================================= */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 11px;
    background: #fff;
    border: 1px solid #7f9db9;
}
.calendar-table th {
    padding: 3px;
    color: #7f9db9;
    font-weight: normal;
    border-bottom: 1px solid #dcdcdc;
}
.calendar-table td {
    padding: 4px;
    cursor: default;
}
.calendar-table td.active-day {
    background: #316ac5;
    color: #fff;
    font-weight: bold;
    outline: 1px dotted #fff;
}
.calendar-table td.dim-day {
    color: #bbb;
}

#boot-screen { background: black; color: white; padding: 20px; font-family: monospace; font-size: 16px; align-items: flex-start;}
#shutdown-screen { background: black; color: #f8eaf4; align-items: center; justify-content: center; flex-direction: column; }
#mobile-warning { background: rgba(0,0,0,0.8); align-items: center; justify-content: center; }
.warning-box { background: white; padding: 20px; border-radius: 10px; text-align: center; max-width: 80%; border: 3px solid #d494c2; }