/* === Global & Body === */
html { height: 100%; overflow: hidden; }
body {
    height: 100vh; margin: 0; padding: 0; overflow: hidden;
    font-family: "Pixelated MS Sans Serif", Arial, sans-serif; font-size: 11px;
    background-color: #008080; cursor: default; display: flex;
    align-items: center; justify-content: center;
}
body.desktop-background { background: url('../res/clouds.jpg') no-repeat center center fixed; background-size: cover; } /* Adjust path if needed */
body, .desktop-icon span { font-smooth: never; -webkit-font-smoothing: none; }
.taskbar, #start-menu, #start-submenu, .desktop-icon, .window .title-bar { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
img { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; }
*:focus { outline: none; outline: 0; }
::-moz-focus-inner { border: 0; }


/* === @font-face Declarations === */
/* Arial Family */
@font-face { font-family: 'Arial'; src: url('../fonts/ARIAL.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Arial'; src: url('../fonts/ARIALBD.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Arial'; src: url('../fonts/ARIALI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Arial'; src: url('../fonts/ARIALBI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Arial Narrow'; src: url('../fonts/ARIALN.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Arial Narrow'; src: url('../fonts/ARIALNB.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Arial Narrow'; src: url('../fonts/ARIALNI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Arial Narrow'; src: url('../fonts/ARIALNBI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Bell MT'; src: url('../fonts/BELL.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bell MT'; src: url('../fonts/BELLI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Bell MT'; src: url('../fonts/BELLB.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Century Schoolbook'; src: url('../fonts/SCHLBKB.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Century Schoolbook'; src: url('../fonts/SCHLBKI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Century Schoolbook'; src: url('../fonts/SCHLBKBI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Comic Sans MS'; src: url('../fonts/COMIC.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Comic Sans MS'; src: url('../fonts/COMICBD.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Copperplate Gothic Light'; src: url('../fonts/COPRGTL.TTF') format('truetype'); }
@font-face { font-family: 'Copperplate Gothic Bold'; src: url('../fonts/COPRGTB.TTF') format('truetype'); }
@font-face { font-family: 'Courier New'; src: url('../fonts/COUR.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Courier New'; src: url('../fonts/COURBD.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Courier New'; src: url('../fonts/COURI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Courier New'; src: url('../fonts/COURBI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Georgia'; src: url('../fonts/GEORGIA.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Georgia'; src: url('../fonts/GEORGIAB.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Georgia'; src: url('../fonts/GEORGIAI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Georgia'; src: url('../fonts/GEORGIAZ.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Impact'; src: url('../fonts/IMPACT.TTF') format('truetype'); }
@font-face { font-family: 'Lucida Bright'; src: url('../fonts/LBRITE.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Lucida Bright'; src: url('../fonts/LBRITED.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Lucida Bright'; src: url('../fonts/LBRITEI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Lucida Bright'; src: url('../fonts/LBRITEDI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Lucida Calligraphy'; src: url('../fonts/LCALLIG.TTF') format('truetype'); }
@font-face { font-family: 'Lucida Sans Typewriter'; src: url('../fonts/LBLACK.TTF') format('truetype'); }
@font-face { font-family: 'Monotype Corsiva'; src: url('../fonts/MONOTYPE.TTF') format('truetype'); }
@font-face { font-family: 'Papyrus'; src: url('../fonts/PAPYRUS.TTF') format('truetype'); }
@font-face { font-family: 'Pepita MT'; src: url('../fonts/PEPITA.TTF') format('truetype'); }
@font-face { font-family: 'Poor Richard'; src: url('../fonts/POORICH.TTF') format('truetype'); }
@font-face { font-family: 'Stencil'; src: url('../fonts/STENCIL.TTF') format('truetype'); }
@font-face { font-family: 'Tahoma'; src: url('../fonts/TAHOMA.TTF') format('truetype'); }
@font-face { font-family: 'Times New Roman'; src: url('../fonts/TIMES.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Times New Roman'; src: url('../fonts/TIMESBD.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Times New Roman'; src: url('../fonts/TIMESI.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Times New Roman'; src: url('../fonts/TIMESBI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Trebuchet MS'; src: url('../fonts/TREBUC.TTF') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Trebuchet MS'; src: url('../fonts/TREBUCBD.TTF') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Trebuchet MS'; src: url('../fonts/TREBUCIT.TTF') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Trebuchet MS'; src: url('../fonts/TREBUCBI.TTF') format('truetype'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Verdana'; src: url('../fonts/VERDANA.TTF') format('truetype'); }
@font-face { font-family: 'Viner Hand ITC'; src: url('../fonts/VINERITC.TTF') format('truetype'); }
@font-face { font-family: 'Andy'; src: url('../fonts/ANDYB.TTF') format('truetype'); }
@font-face { font-family: 'Century Schoolbook'; src: url('../fonts/CENSCBK.TTF') format('truetype'); font-weight: bold; }
@font-face { font-family: 'Freestyle Script'; src: url('../fonts/FREESCPT.TTF') format('truetype'); }
@font-face { font-family: 'Secretarial Script'; src: url('../fonts/SECRETST.TTF') format('truetype'); }


/* === Layout Containers === */
#window-area-container { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: 0; }
#window-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#window-area > .window { pointer-events: auto; }
#desktop-icons-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 15px 5px; z-index: 0; }


/* === Desktop Icons (If Used) === */
.desktop-icon { display: flex; flex-direction: column; align-items: center; width: 90px; height: 90px; padding: 4px; border: 1px solid transparent; box-sizing: border-box; overflow: hidden; position: relative; }
.desktop-icon a { text-decoration: none; color: white; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; width: 100%; height: 100%; }
.desktop-icon img { width: 48px; height: 48px; margin-bottom: 5px; }
.desktop-icon span { color: white; text-shadow: 1px 1px 1px black; font-size: 11px; line-height: 12px; max-height: 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; background-color: transparent; padding: 1px 2px; border: 1px solid transparent; box-sizing: border-box; width: 100%; text-align: center; flex-grow: 1; text-rendering: optimizeLegibility; }
.desktop-icon.selected { border-color: white; border-style: dotted; }
.desktop-icon.selected span { background-color: #0000a8; color: white; text-shadow: none; }
.desktop-icon.selected a::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; background-color: rgba(0, 0, 168, 0.4); pointer-events: none; z-index: 1; }


/* === Taskbar (Minimal for Standalone) === */
.taskbar { height: 28px; width: 100%; box-sizing: border-box; position: fixed; bottom: 0; left: 0; z-index: 50; display: none; align-items: center; padding: 2px; background-color: #c0c0c0; border-top: 1px solid white; box-shadow: inset 0px 1px 1px #dfdfdf; }
#start-button { font-weight: bold; min-width: 60px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-right: 2px; }
#start-button img { width: 16px; height: 16px; margin-right: 4px; }
#start-button.active img { position: relative; top: 1px; left: 1px; }
.taskbar-tasks-container { flex-grow: 1; display: flex; align-items: center; height: 100%; overflow: hidden; padding: 0 2px; }
.taskbar-button { flex-shrink: 1; min-width: 60px; max-width: 160px; height: 22px; margin-right: 2px; padding: 0 4px; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.taskbar-button.active { padding-top: 2px; padding-left: 5px; border-style: inset; }
.taskbar-button img { width: 16px; height: 16px; margin-right: 4px; }
.taskbar-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; text-align: left; }
.system-tray { display: flex; align-items: center; margin-left: auto; }
#taskbar-clock { height: 22px; line-height: 22px; padding: 0 6px; }


/* === Start Menu (Generic, Not used by Notepad's in-window menu) === */
#start-menu { position: fixed; bottom: 28px; left: 0; min-width: 170px; background-color: #c0c0c0; border: 1px solid; border-color: white #808080 #808080 white; box-shadow: 1px 1px 3px rgba(0,0,0,0.4); z-index: 100; padding: 2px; box-sizing: border-box; display: none; }
.menu { background-color: #c0c0c0; }
.menu-item { padding: 2px 8px 2px 4px; white-space: nowrap; display: flex; align-items: center; position: relative; cursor: default; }
.menu-item.selected { background-color: #0000a8; color: white; } /* Base selected style */
.separator { height: 1px; background-color: #808080; border-bottom: 1px solid white; margin: 2px 0; padding: 0 !important; list-style: none; }


/* === Windows === */
.window { box-sizing: border-box; position: relative; }
.window .window-body {
    box-sizing: border-box;
    height: calc(100% - 18px); /* IMPORTANT: ADJUST 18px TO YOUR ACTUAL TITLE BAR HEIGHT! */
    overflow: hidden; padding: 0; margin: 0; display: flex; flex-direction: column; background-color: #c0c0c0;
}
.window.active > .title-bar { background-color: #0000a8; color: white; }
.window.active > .title-bar .title-bar-text { color: white; }


/* === In-Window Menu Bar === */
.window:not(.dialog-window) .toolbar.window-menubar {
    box-sizing: border-box; flex-shrink: 0; position: relative; z-index: 100; height: 21px;
    border-bottom: 1px solid #808080; box-shadow: 0px 1px 0px 0px white;
    margin: 0; padding: 0 2px; list-style: none; display: flex; align-items: center; background-color: #c0c0c0;
}
.window-menubar > li.menu-item {
    padding: 2px 6px; border: 1px solid transparent; box-sizing: border-box; height: 100%;
    display: inline-flex; align-items: center; white-space: nowrap; cursor: default; color: black; /* Default color for top items */
}
.window-menubar > li.menu-item.active, /* When its dropdown is open */
.window-menubar > li.menu-item.selected { /* Hover state for top items */
    background-color: #0000a8; color: white; border-color: #0000a8;
}


/* === In-Window Menu Dropdowns === */
.window-menu-dropdown {
    position: absolute; min-width: 120px; box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    border: 1px solid; border-color: white #808080 #808080 white;
    padding: 1px; background-color: #c0c0c0; z-index: 1050;
    list-style: none; margin: 0;
    display: none;
}
.window-menu-dropdown.active { display: block !important; }
.window-menu-dropdown li.menu-item {
    padding: 2px 8px 2px 4px; white-space: nowrap; display: flex; align-items: center; position: relative;
    color: black; /* Default text color for dropdown items */
}
.window-menu-dropdown li.menu-item.selected { /* Item directly under mouse/focus */
    background-color: #0000a8; color: white;
}
.window-menu-dropdown li.menu-item.disabled { color: #808080; background-color: #c0c0c0; cursor: default; }
.window-menu-dropdown li.menu-item.checked { position: relative; padding-left: 20px; }
.window-menu-dropdown li.menu-item.checked::before { content: '✓'; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-weight: bold; color: black; /* Checkmark color */ }
.window-menu-dropdown li.menu-item.checked.selected::before { color: white; } /* Checkmark on selected item */

.window-menu-dropdown li.menu-item.has-arrow::after,
.window-menubar li.menu-item.has-arrow::after { /* Arrow for items with submenus */
    content: ''; display: inline-block; width: 0; height: 0;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    border-left: 4px solid black;
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
}
.window-menu-dropdown li.menu-item.has-arrow.selected::after,
.window-menubar li.menu-item.has-arrow.selected::after {
    border-left-color: white;
}
/* Sub-submenu specific positioning if needed */
.window-menu-dropdown > li.menu-item > ul.window-menu-dropdown {
    top: -2px; /* Align with parent li, adjust for borders */
    left: calc(100% - 2px); /* Position to the right, adjust for borders */
    margin-left: 0;
}


/* === Window Content & Status Bar === */
.window:not(.dialog-window) .window-content-inner.inset-deep {
    box-sizing: border-box; padding: 0px; overflow: hidden; flex-grow: 1; background-color: white;
    border: 1px solid; border-color: #808080 white white #808080;
    margin: 2px; display: flex;
}
.window:not(.dialog-window) .status-bar {
    box-sizing: border-box; flex-shrink: 0; height: 17px; border-top: 1px solid white;
    display: flex; background-color: #c0c0c0;
}
.window:not(.dialog-window) .status-bar-field {
    box-sizing: border-box; border: 1px solid; border-color: #808080 white white #808080; margin: -1px 0 0 -1px;
    padding: 0 4px; height: 100%; line-height: 15px; background-color: #c0c0c0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.window:not(.dialog-window) .status-bar-field:first-child { margin-left: 0; }
.window:not(.dialog-window) .status-bar-field:nth-child(2) { flex-grow: 1; }


/* === Dialog Window Styles === */
.dialog-window .title-bar-controls button[aria-label="Minimize"],
.dialog-window .title-bar-controls button[aria-label="Maximize"] { display: none; }
.dialog-window .window-body {
    box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
    padding: 15px; height: calc(100% - 18px); /* Adjust 18px if title bar different */
    background-color: #c0c0c0; overflow: hidden;
}
.dialog-content { display: flex; align-items: center; flex-grow: 1; }
.dialog-icon { width: 32px; height: 32px; margin-right: 15px; flex-shrink: 0; }
.dialog-message { font-size: 11px; line-height: 1.4; white-space: normal; word-wrap: break-word; }
.dialog-buttons { padding: 8px; margin: 0; margin-top: 15px; border: none; display: flex; justify-content: center; gap: 6px; flex-shrink: 0; }
.dialog-buttons button { min-width: 70px; }

/* === Window Content Icons (Generic - Not for Notepad editor) === */
.window-icon-grid { display: flex; flex-wrap: wrap; gap: 15px; padding: 5px; }
.window-icon-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 60px; cursor: default; padding: 4px; border: 1px solid transparent; }
.window-icon-item:focus { border: 1px dotted black; background-color: #ddd; }
.window-icon-item img { width: 32px; height: 32px; margin-bottom: 4px; }
.window-icon-item span { font-size: 11px; line-height: 1.2; word-wrap: break-word; max-height: calc(1.2em * 2); overflow: hidden; }

/* === Interaction Styles === */
body.dragging-window, body.dragging-window * { cursor: move !important; }
body.resizing-window, body.resizing-window * { cursor: nwse-resize !important; }

/* === Notepad App Specific Styles (Editor Area) === */
.notepad-editor-container { display: flex; width: 100%; height: 100%; background-color: white; }
.notepad-line-numbers {
    padding: 8px 4px 8px 8px; font-family: 'Courier New', Courier, monospace; font-size: 1rem;
    line-height: 1.5; text-align: right; color: #888; background-color: #f0f0f0;
    border-right: 1px solid #ccc; user-select: none; overflow: hidden; white-space: pre;
    display: none;
}
.notepad-editor-area {
    flex-grow: 1; border: none; resize: none; font-family: 'Courier New', Courier, monospace;
    font-size: 1rem; line-height: 1.5; padding: 8px; box-sizing: border-box;
    white-space: pre; overflow-wrap: normal; outline: none;
}
.notepad-editor-area.wrap-lines { white-space: pre-wrap; overflow-wrap: break-word; }
.notepad-about-dialog-content p { margin-bottom: 10px; line-height: 1.4; }
.notepad-about-dialog-content strong { font-weight: bold; }


/* === Window Resize Handle === */
.window-resize-handle {
    position: absolute; bottom: 0px; right: 0px; width: 12px; height: 12px;
    cursor: nwse-resize; z-index: 5;
}


/* === Mobile Floating Save Button (Using Wrapper) === */

/* Wrapper DIV: Handles fixed positioning and visibility via media query */
.floating-save-wrapper {
    position: fixed !important; /* Ensure it's fixed */
    bottom: 48px;
    right: 14px;
    z-index: 1000; /* High enough to be on top of most page content */
    display: none; /* Hidden by default */
}


/* Inner BUTTON: Receives 98.css styling and is scaled up */
.floating-save-wrapper > button#mobileFloatingSaveButton.button {
    transform: scale(1.2);
    transform-origin: bottom right;
    margin: 0;
    pointer-events: auto;

}

@media (max-width: 600px) {
    .floating-save-wrapper {
        display: block !important; /* Make the wrapper visible */
    }
}


/* === Responsive Standalone Notepad Window Sizing (Keep as is from previous working version) === */
.window[data-window-id="notepadStandaloneInstance"] { }
    @media (max-width: 600px) {
    .window[data-window-id="notepadStandaloneInstance"] { border: none !important; box-shadow: none !important; }
    .window[data-window-id="notepadStandaloneInstance"] .window-body { height: calc(97% - 18px) !important; box-sizing: border-box !important; }
}