/* --- System Variables --- */
:root {
    --wallpaper: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070&auto=format&fit=crop'); /* Dark/Abstract MacOS style */
    --glass-light: rgba(255, 255, 255, 0.3);
    --glass-heavy: rgba(40, 40, 40, 0.4); /* Darker menu bar for contrast */
    --dock-bg: rgba(255, 255, 255, 0.2);
    --text-white: #ffffff;
    --shadow-soft: 0 4px 24px rgba(0,0,0,0.15);
    --shadow-window: 0 20px 60px rgba(0,0,0,0.4);
    --system-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; user-select: none; }

/* style.css */

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    /* --- NEW LINE --- */
    background: linear-gradient(to bottom, #142850, #0a1930);
    /* ---------------- */
    font-family: var(--system-font);
    overflow: hidden;
    color: var(--text-white);
}


/* --- Menu Bar --- */
.menu-bar {
    width: 100%;
    height: 28px;
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    z-index: 1000;
}

.left-menu, .right-menu { display: flex; align-items: center; gap: 18px; }
.app-name { font-weight: 700; }
.apple-logo { font-size: 14px; }
.clock { font-variant-numeric: tabular-nums; }

/* --- Desktop Grid --- */
.desktop {
    width: 100%;
    height: 100%;
    padding: 50px 20px 100px 20px; /* Space for dock and menu */
}

.desktop-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end; /* Stack icons on the right like Mac defaults */
    height: 100%;
    gap: 15px;
    width: 100px;
    position: absolute;
    right: 20px;
    top: 40px;
}

.app-icon {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: white;
    margin-bottom: 15px;
}

/* --- Icons (The "Squircle" Look) --- */
.icon-squircle {
    width: 56px;
    height: 56px;
    background: #ccc;
    border-radius: 14px; /* Critical for Mac look */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin-bottom: 6px;
    position: relative;
}

/* Icon Styles mimicking macOS gradients */
.folder-blue { background: linear-gradient(180deg, #50bafc 0%, #0075ff 100%); color: rgba(255,255,255,0.9); }
.notes-yellow { background: linear-gradient(180deg, #ffe58a 0%, #ffc12e 100%); color: #b38b00; border: 1px solid #dcb246; }
.finder-face { background: linear-gradient(180deg, #e3e3e3 0%, #dcdcdc 50%, #0075ff 50%, #005fd6 100%); color: transparent; } /* Abstract finder */
.rainbow { background: linear-gradient(135deg, #ff5f5f, #ffbd2e, #27c93f, #0075ff); color: white; }
.trash-can { background: linear-gradient(180deg, #e0e0e0 0%, #b0b0b0 100%); color: #555; }

.app-label {
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    line-height: 1.2;
}

.app-icon:active .app-label { background: rgba(0,0,80,0.5); }
.app-icon:active .icon-squircle { filter: brightness(0.8); }

/* --- Window (Glassy & Modern) --- */
.mac-window {
    position: absolute;
    width: 600px;
    height: 400px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 12px;
    box-shadow: var(--shadow-window);
    border: 1px solid rgba(255,255,255,0.4);
    top: 15%;
    left: 20%;
    display: none; /* Hidden initially */
    flex-direction: row;
    overflow: hidden;
    animation: openWindow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    color: #333;
}

@keyframes openWindow {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.sidebar {
    width: 160px;
    background: rgba(240, 240, 240, 0.5);
    border-right: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.traffic-lights { display: flex; gap: 8px; margin-bottom: 20px; }
.light { width: 12px; height: 12px; border-radius: 50%; }
.close { background: #ff5f57; border: 1px solid #e0443e; cursor:pointer;}
.minimize { background: #febc2e; border: 1px solid #d89e24; }
.maximize { background: #28c840; border: 1px solid #1aab29; }

/* Hover effect on traffic lights */
.traffic-lights:hover .close::after { content: '×'; display: block; text-align: center; font-size: 9px; line-height: 11px; opacity: 0.5; }

.sidebar-items { font-size: 13px; color: #555; flex-grow: 1;}
.sidebar-item { padding: 6px 10px; border-radius: 5px; margin-bottom: 2px; cursor: pointer; display: flex; gap: 8px; align-items: center;}
.sidebar-item.active { background: rgba(0,0,0,0.1); color: #000; font-weight: 600;}

.copyright-tag { font-size: 10px; color: #999; text-align: center; padding-top: 10px; }

.main-content { flex-grow: 1; display: flex; flex-direction: column; background: #fff; }
.window-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    color: #999;
    cursor: default; /* Can drag here */
}
#note-area {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0 20px 20px 20px;
    font-family: -apple-system, sans-serif;
    font-size: 16px;
    resize: none;
    color: #333;
    line-height: 1.5;
}

/* --- Dock --- */
.dock-wrapper {
    position: fixed;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 2000;
}

.dock {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px;
    border-radius: 24px;
    display: flex;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    align-items: flex-end;
    height: 70px;
}

.dock-icon {
    width: 50px;
    height: 50px;
    transition: transform 0.2s ease;
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.dock-icon .icon-squircle { width: 100%; height: 100%; border-radius: 12px; font-size: 24px;}

.dock-icon:hover { transform: translateY(-10px) scale(1.15); margin: 0 5px; }

.separator { width: 1px; height: 40px; background: rgba(255,255,255,0.3); margin: 0 5px; align-self: center;}

.dot {
    width: 4px;
    height: 4px;
    background: #333; /* Dark dot for active app */
    border-radius: 50%;
    position: absolute;
    bottom: -8px;
}