/* css/desktop.css - Taskbar & Icons */
#desktop { width: 100vw; height: 100vh; position: relative; }

.desktop-icons { position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; flex-direction: column; gap: 10px; }

.icon { display: flex; flex-direction: column; align-items: center; width: 75px; padding: 5px; cursor: default; }
.icon img { width: 32px; height: 32px; pointer-events: none; }
.icon-text { color: white; text-align: center; text-shadow: 1px 1px #000; padding: 2px; }
.icon.selected .icon-text { background-color: var(--active-titlebar-start); outline: 1px dotted #fff; }

.taskbar { 
    position: fixed; bottom: 0; left: 0; right: 0; height: 30px; 
    background: var(--window-bg); display: flex; align-items: center; padding: 2px; z-index: 9999; 
}

.start-button { font-weight: bold; padding: 2px 8px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.taskbar-items { flex: 1; display: flex; gap: 4px; padding: 0 10px; }
.taskbar-item { height: 24px; min-width: 120px; padding: 0 8px; display: flex; align-items: center; cursor: default; }
#notification-tray { margin-left: auto; border: 2px inset #fff; padding: 2px 10px; display: flex; align-items: center; height: 24px; }

.start-menu { 
    position: fixed; bottom: 30px; left: 2px; width: 220px; height: 360px; 
    background: var(--window-bg); border: 2px outset #fff; display: none; z-index: 10000; 
}
.start-menu.visible { display: block; }
.start-menu-header { 
    background: linear-gradient(0deg, var(--active-titlebar-start), var(--active-titlebar-end)); 
    color: white; width: 25px; writing-mode: vertical-lr; transform: rotate(180deg); 
    padding: 10px 5px; font-weight: bold; font-size: 14px; position: absolute; left: 0; top: 0; bottom: 0; 
}
.start-menu-items { margin-left: 25px; padding: 5px; }
.start-menu-item { padding: 8px; cursor: default; display: flex; align-items: center; gap: 10px; }
.start-menu-item:hover { background: var(--active-titlebar-start); color: white; }
.start-menu-separator {height: 1px;
    background: var(--window-border-dark);
    margin: 2px 4px;
    border-top: 1px solid var(--window-border-light);}