/* body {
    margin: 0;
    font-family: "VT323", "W95FA", monospace; 
    background-color: #008080; 
    overflow: hidden; 
} */

.desktop {
    width: 100vw;
    height: 100vh;
    padding: 20px; /* Keep padding for icon positioning */
    box-sizing: border-box;
    position: relative; /* For absolute positioning of icons */
    /* background-color: #008080; */ /* Let 95CSS handle desktop background if it has one, or we add it back specifically */
}

.icon {
    position: absolute; 
    width: 80px; 
    cursor: pointer;
    text-align: center;
    /* color: white; */ /* Let 95CSS or our specific span style handle this */
}

.icon img {
    width: 48px; /* Standard icon size */
    height: 48px;
    image-rendering: pixelated; /* Keep the pixelated look */
    display: block; /* Ensure it can be centered with auto margins */
    margin: 0 auto 5px auto; /* Center the image and provide bottom margin */
}

.icon span {
    color: white; /* Ensuring text is white, 95CSS might default to black */
    background-color: transparent;
    padding: 1px 3px;
    font-size: 13px;
    text-shadow: 1px 1px 0px #00000040;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    line-height: 1.1;
    display: block; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    text-align: center; /* Explicitly center text within the span */
}

/* Initial icon positions */
.desktop .icon:nth-of-type(1) {
    top: 20px;
    left: 20px;
}

/* Styling for Notepad textarea */
.notepad-textarea {
    width: 100%;
    flex-grow: 1; /* Fill available height */
    box-sizing: border-box;
    resize: none; /* Typically, old Notepad textarea wasn't resizable by user */
    background-color: white !important; /* Force white background */
    border: 1px solid #808080; /* Simple border, 95CSS might have specific input borders */
    padding: 2px;
    margin: 0;
    min-height: 50px; /* Reduced minimum height - was 100px */
}

.desktop .icon:nth-of-type(2) {
    top: 115px; /* Adjusted for tighter spacing */
    left: 20px;
}

.desktop .icon:nth-of-type(3) {
    top: 210px; /* Adjusted for tighter spacing */
    left: 20px;
}

.desktop .icon:nth-of-type(4) { /* Style for the new Notepad icon */
    top: 305px; /* Adjust as needed */
    left: 20px;
}

/* Basic Start Menu Bar - ensure this is active and styled */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* Standard height */
    background-color: #c0c0c0; /* Windows silver/grey - 95CSS might have a variable for this */
    border-top: 2px solid #ffffff;
    box-shadow: 0 -1px 1px #808080;
    display: flex;
    align-items: center;
    padding: 0 5px;
    z-index: 2000; /* High z-index to be on top of other elements */
}

.start-button {
    /* Apply 95CSS button class if available, or style manually */
    /* For now, using previous custom styles */
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #000000 inset;
    padding: 2px 10px;
    font-weight: bold;
    cursor: pointer;
    font-family: "VT323", "W95FA", monospace; /* Ensure font matches */
    font-size: 13px; /* Match icon text size */
    color: black; /* Default button text color */
}

.start-button:active {
    border-style: inset;
    box-shadow: 1px 1px 0 #000000 inset, -1px -1px 0 #ffffff inset;
}

/* Ensure window has the classic raised border */
.window {
    border: 2px outset #dfdfdf; /* Standard outer border */
    box-shadow: 1px 1px 0px black; /* Subtle shadow for depth */
    display: none; /* Hidden by default, JS will toggle with .active class */
}

.window.active {
    display: block !important; /* Show when active */
}

/* Style for the window title bar */
.title-bar {
    background: linear-gradient(to right, #000080, #1084d0); /* Classic blue gradient */
    padding: 3px 5px;
    display: flex; /* To align text and controls */
    justify-content: space-between;
    align-items: center;
    height: 20px; /* Approximate height */
}

.title-bar-text {
    color: white;
    font-weight: bold;
    margin-left: 2px;
}

/* Ensure title bar buttons are styled by 95CSS or have minimal overrides if needed */
.title-bar-controls button {
    /* 95CSS should handle most of this. We can add overrides if absolutely necessary */
    /* For example, ensure no extra padding or margin if it looks off */
    padding: 0 2px; 
    min-width: 16px; /* Ensure buttons are somewhat square */
    height: 14px; /* Ensure buttons are appropriately sized */
    font-size: 10px; /* Make symbols smaller if needed */
    line-height: 10px; /* Adjust line height for symbols */
}

/* Style for the window body, ensuring it has a background */
.window-body {
    background-color: white !important; /* Force white background */
    padding: 2px; /* Small padding around the content, typical for Win95 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100% - 22px); /* Full height minus title bar */
}

/* Ensure the notepad window has proper styling at all widths */
.window.notepad-window {
    background-color: white;
    overflow: hidden; /* Prevents content from spilling out */
    /* --- Desktop View Defaults --- */
    position: absolute !important; 
    width: 450px !important;      /* Default desktop width, slightly wider */
    height: 200px !important;     /* Desktop height (e.g., titlebar 22px + padding + textarea ~150-170px) */
    top: 40px !important;         /* Default desktop top */
    left: 120px !important;       /* Default desktop left */
    z-index: 100;                 /* Managed by JS for active state */
}

.window-body {
    background-color: white !important; 
    padding: 2px;
    box-sizing: border-box;
    display: flex; /* Use flex to make textarea fill space */
    flex-direction: column;
    flex-grow: 1; /* Allow window-body to grow and fill the window */
    overflow: hidden; /* Important for containing the textarea */
}

.notepad-textarea {
    width: 100%;
    flex-grow: 1; /* Textarea fills the window-body */
    box-sizing: border-box;
    resize: none; 
    background-color: white !important; 
    border: 1px solid #808080; 
    padding: 2px;
    margin: 0;
    min-height: 30px; /* Absolute minimum height for the textarea */
}

/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 600px) {
    .desktop {
        padding: 10px;
        display: flex; 
        flex-direction: column; 
        flex-wrap: nowrap; 
        justify-content: flex-start;
        align-items: center; 
        overflow-y: auto; 
        padding-bottom: 40px; /* Space for taskbar */
        min-height: 100vh; /* Ensure full viewport height */
    }

    .desktop-icons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center icons on mobile */
        align-items: flex-start;
        width: 100%;
    }

    .icon {
        position: relative !important; 
        top: auto !important; 
        left: auto !important; 
        margin: 10px;
    }
    /* Explicitly reset nth-of-type for icons on mobile */
    .desktop .icon:nth-of-type(1),
    .desktop .icon:nth-of-type(2),
    .desktop .icon:nth-of-type(3),
    .desktop .icon:nth-of-type(4) {
        top: auto !important;
        left: auto !important;
    }

    .window.notepad-window.active { /* Ensure .active is targeted for display */
        display: block !important;
        width: 90vw !important;
        max-width: 95vw;
        height: 45vh !important; /* Mobile height for notepad window */
        position: relative !important; /* In flow for mobile */
        margin: 20px auto; /* More vertical margin */
        order: 2; /* Place it after the icons container */
        /* Clear absolute positioning properties from desktop */
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
    }

    /* .window-body flex properties are fine from base style */
    /* .notepad-textarea flex-grow is fine, min-height is fine */
}

@media (max-width: 400px) {
    .window.notepad-window.active {
        height: 40vh !important; /* Slightly less height for very small screens */
        margin: 15px auto;
    }
    .desktop-icons-container {
        justify-content: space-around; /* Spread out icons a bit more on very small screens */
    }
}