/* --- RESET & FONTS --- */
:root {
    color-scheme: light; 
    --bg-teal: #008080;
    --win-gray: #c0c0c0;
    --win-text: #000000;
    --win-dark-shadow: #808080;
    --win-light-shadow: #ffffff;
    --win-darker-shadow: #404040;
    --win-title-blue: #000080;
    --win-title-light-blue: #1084d0;
}

body {
    background-color: var(--bg-teal);
    font-family: 'MS Sans Serif', 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    font-size: 11px;
    background-image: radial-gradient(#4BAEBF 1px, transparent 1px);
    background-size: 20px 20px;
    user-select: none;
}

/* --- TV SHUTDOWN ANIMATION --- */
#shutdown-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: black; z-index: 9999; display: none; 
    align-items: center; justify-content: center;
}
.tv-line {
    width: 100%; height: 2px; background: white;
    box-shadow: 0 0 10px white;
    animation: tv-off 0.6s ease-in forwards;
}
@keyframes tv-off {
    0% { transform: scaleX(1) scaleY(1); }
    50% { transform: scaleX(1) scaleY(0.01); }
    100% { transform: scaleX(0) scaleY(0); opacity: 0; }
}

/* --- DESKTOP SELECTION MARQUEE --- */
#selection-marquee {
    position: absolute; border: 1px dotted #78EBFF;
    background: rgba(120, 235, 255, 0.2); z-index: 50; display: none; pointer-events: none;
}

/* --- DESKTOP ICONS --- */
.desktop-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.icon { position: absolute; width: 70px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; color: white; }
.icon img { width: 32px; height: 32px; margin-bottom: 5px; pointer-events: none; }
.icon span { background: transparent; padding: 2px; border: 1px dotted transparent; }
.icon:hover span, .icon.selected span { background: var(--win-title-blue); border: 1px dotted var(--win-light-shadow); }

/* --- WINDOW COMPONENT --- */
.window {
    position: absolute; background: var(--win-gray); border: 2px solid;
    border-color: var(--win-light-shadow) var(--win-darker-shadow) var(--win-darker-shadow) var(--win-light-shadow);
    box-shadow: 1px 1px 0 black; padding: 3px; display: flex; flex-direction: column; min-width: 200px;
}
.title-bar {
    background: linear-gradient(90deg, var(--win-dark-shadow), #b0b0b0); padding: 3px 4px;
    display: flex; justify-content: space-between; align-items: center; color: var(--win-gray); font-weight: bold; cursor: default;
}
.title-bar.active-bar { background: linear-gradient(90deg, var(--win-title-blue), var(--win-title-light-blue)); color: white; }
.title-bar-controls button {
    width: 16px; height: 14px; background: var(--win-gray); border: 1px outset white;
    box-shadow: inset -1px -1px var(--win-darker-shadow), inset 1px 1px white; font-weight: bold; font-size: 8px; margin-left: 2px; padding: 0; line-height: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.title-bar-controls button:active { border: 1px inset white; padding-top: 2px; }
.window-body { padding: 10px; color: black; flex: 1; display: flex; flex-direction: column; }
.inset-box {
    background: white; border: 2px solid;
    border-color: var(--win-dark-shadow) var(--win-light-shadow) var(--win-light-shadow) var(--win-dark-shadow); padding: 10px; overflow-y: auto;
}
hr { border: 0; border-top: 1px solid var(--win-dark-shadow); border-bottom: 1px solid white; margin: 10px 0; }
button {
    font-family: inherit; background: var(--win-gray); color: black; border: 2px solid;
    border-color: white var(--win-darker-shadow) var(--win-darker-shadow) white; padding: 4px 10px; cursor: pointer;
}
button:active { border-color: var(--win-darker-shadow) white white var(--win-darker-shadow); padding: 5px 9px 3px 11px; }

/* --- TABS --- */
.tabs { display: flex; margin-bottom: -2px; z-index: 1; }
.tab { padding: 3px 8px; border: 1px solid white; border-bottom: none; border-right: 1px solid var(--win-darker-shadow); margin-right: 2px; cursor: pointer; background: var(--win-gray); }
.tab.active-tab { background: var(--win-gray); border-top: 2px solid white; border-left: 2px solid white; font-weight: bold; position: relative; z-index: 2; }
.tab-content { display: none; }
.tab-content.active-content { display: block; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 10px; }
.gallery-item { width: 100%; height: 80px; background: #ddd; border: 1px solid #999; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* --- ABOUT ME SPECIFIC --- */
.stamp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.stamp-grid img { width: 100%; border: 1px solid var(--win-dark-shadow); }

/* --- PAINT APP --- */
.paint-canvas-container { background: #808080; padding: 10px; flex: 1; display: flex; justify-content: center; align-items: center; overflow: auto; }
canvas#paintCanvas { background: white; border: 2px inset white; cursor: crosshair; }
.paint-toolbar { display: flex; gap: 5px; margin-bottom: 5px; padding: 2px; flex-wrap: wrap; align-items: center;}
.color-box { width: 20px; height: 20px; border: 2px inset white; cursor: pointer; }
.color-box.active-color { border: 2px solid black; }

/* --- TOS SPECIFIC FLAIR --- */
.menubar { list-style: none; padding: 0 0 5px 0; margin: 0; display: flex; gap: 10px; }
.menubar li { padding: 2px 5px; }
.menubar li:hover { background: var(--win-title-blue); color: white; cursor: pointer; }
.notepad-area { font-family: 'Courier New', monospace; background: white; }
.tos-list { list-style: none; padding: 0; }
.tos-list li { margin-bottom: 8px; line-height: 1.4; }

/* --- MESSENGER SPECIFIC FLAIR --- */
.messenger-body { background: white; border: 2px inset white; padding: 5px; height: 100%; overflow-y: auto; }
.msn-header { background: #eef; border-bottom: 1px solid #aad; padding: 5px; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
.msn-pfp { width: 32px; height: 32px; border: 1px solid gray; background: white; object-fit: cover; }
.friend-group { font-weight: bold; color: #444; margin-top: 10px; margin-bottom: 2px; cursor: pointer; }
.friend-item { padding: 4px 0 4px 5px; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid transparent; }
.friend-item:hover { background: #eef; border: 1px dotted #aad; }
.friend-pfp { width: 20px; height: 20px; border: 1px solid gray; background: white; object-fit: cover; }
.status-dot { width: 8px; height: 8px; background: green; border-radius: 50%; border: 1px solid darkgreen; flex-shrink: 0; }
.status-busy { background: red; }
.status-away { background: orange; }

/* --- LINKS SPECIFIC --- */
.address-bar { display: flex; gap: 5px; margin-bottom: 10px; align-items: center; }
.address-bar input { flex: 1; border: 2px inset white; padding: 2px; font-family: inherit; }
.link-item { display: block; margin-bottom: 8px; text-decoration: none; color: blue; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.link-item:hover { text-decoration: underline; }

/* --- TASKBAR --- */
.taskbar {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 28px; background: var(--win-gray); border-top: 2px solid var(--win-light-shadow); display: flex; align-items: center; padding: 2px; z-index: 2000;
}
.start-btn { display: flex; align-items: center; gap: 5px; font-weight: bold; padding: 2px 6px; margin-right: 5px; border: 2px solid; border-color: white var(--win-darker-shadow) var(--win-darker-shadow) white; background: var(--win-gray); cursor: pointer; }
.start-btn.active, .start-btn:active { border-color: var(--win-dark-shadow) white white var(--win-dark-shadow) !important; box-shadow: inset 1px 1px 0 black !important; padding: 3px 5px 1px 7px !important; }
.task-button { min-width: 120px; height: 22px; background: var(--win-gray); border: 2px solid; border-color: white var(--win-darker-shadow) var(--win-darker-shadow) white; display: none; align-items: center; padding-left: 5px; margin-right: 3px; cursor: pointer; }
.task-button.active { background: repeating-linear-gradient(45deg, #c0c0c0, #c0c0c0 2px, #fff 2px, #fff 4px); font-weight: bold; border-color: var(--win-dark-shadow) white white var(--win-dark-shadow) !important; box-shadow: inset 1px 1px 0 black !important; padding-top: 2px !important; padding-left: 6px !important; }

/* --- START MENU --- */
.start-menu { position: fixed; bottom: 32px; left: 2px; width: 180px; background: var(--win-gray); border: 2px solid; border-color: var(--win-light-shadow) var(--win-darker-shadow) var(--win-darker-shadow) var(--win-light-shadow); display: none; flex-direction: row; z-index: 2001; }
.start-side { width: 25px; background: linear-gradient(to bottom, #000080, #1084d0); position: relative; }
.start-side span { color: white; transform: rotate(-90deg); transform-origin: top left; white-space: nowrap; font-weight: bold; font-size: 14px; position: absolute; left: 4px; bottom: 5px; width: 150px; }
.start-items { flex: 1; display: flex; flex-direction: column; padding: 2px; }
.start-item { display: flex; align-items: center; gap: 10px; padding: 5px 10px; cursor: pointer; color: black; }
.start-item:hover { background: var(--win-title-blue); color: white; }
.start-item img { width: 24px; height: 24px; }

/* --- DIGITAL ASSISTANT --- */
#digital-assistant {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

#assistant-character {
    width: 150px; /* Back to a much more reasonable desktop pet size */
    height: 150px;
    object-fit: contain; /* This makes sure Fluttershy doesn't stretch or squish */
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.4));
    transition: transform 0.1s ease-out;
}

/* --- SCARE BOUNCE ANIMATION --- */
@keyframes scaredBounce {
    0% { transform: translateY(0) scale(1); }
    15% { transform: translateY(-40px) scale(1.1); } /* Jumps up and slightly expands */
    35% { transform: translateY(0) scale(1); } /* Hits the ground */
    60% { transform: translateY(-15px) scale(1.05); } /* Smaller secondary bounce */
    85% { transform: translateY(0) scale(1); }
    100% { transform: translateY(0) scale(1); }
}

.scared {
    animation: scaredBounce 0.6s ease-in-out;
}


/* --- NEW BALLOON TIP BUBBLE --- */
#assistant-speech-bubble {
    width: 180px;
    margin-bottom: 25px; /* Extra room for the tail */
    pointer-events: auto;
    position: relative;
    background-color: #ffffe1; /* Classic pale tooltip yellow */
    border: 1px solid #000000;
    border-radius: 8px; /* Smooth rounded corners */
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
    padding: 12px 15px 12px 12px;
    color: #000000;
    font-size: 12px;
    line-height: 1.4;
}

/* The subtle close button in the corner */
#bubble-close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    cursor: pointer;
    font-size: 10px;
    color: #808080;
    font-family: sans-serif;
}

#bubble-close-btn:hover {
    color: #000000;
}

/* The black outline of the pointer tail */
#assistant-speech-bubble::before {
    content: "";
    position: absolute;
    bottom: -20px;
    right: 40px;
    border-width: 20px 20px 0 0;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}

/* The inner yellow part of the pointer tail */
#assistant-speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -18px;
    right: 41px; /* Offset slightly to let the black border show */
    border-width: 19px 18px 0 0;
    border-style: solid;
    border-color: #ffffe1 transparent transparent transparent;
}

#screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    pointer-events: auto !important; /* Ensures the image can detect the mouse */
    user-select: auto !important;    /* Overrides global selection restrictions */
    -webkit-user-drag: none;        /* Prevents browser-default image dragging */
    cursor: pointer;
    z-index: 99;                    /* Initial depth; updated by JS */
    display: block;
}

/* --- MINESWEEPER STYLING --- */
.mine-field {
    display: grid;
    background-color: #808080;
    border: 3px inset #ffffff;
    padding: 2px;
}

.cell {
    width: 20px;
    height: 20px;
    background-color: var(--win-gray);
    border: 2px outset #ffffff;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell.revealed {
    border: 1px solid #808080;
    background-color: #bdbdbd;
}

/* Number Colors */
.cell[data-mines="1"] { color: blue; }
.cell[data-mines="2"] { color: green; }
.cell[data-mines="3"] { color: red; }
.cell[data-mines="4"] { color: darkblue; }

.cell.flagged::after { content: "🚩"; font-size: 10px; }
.cell.mine { background-color: red !important; }
.cell.mine::after { content: "💣"; font-size: 12px; }