/* Mobile Responsive Styles */

/* TABLET AND SMALL DESKTOPS */
@media screen and (max-width: 1024px) {
    #desktop-quote {
        right: 30px;
        bottom: 70px;
    }

    .quote-card {
        padding: 30px 40px;
        border-radius: 20px;
    }

    .quote-text {
        font-size: 38px;
    }
}

/* MOBILE PHONES */
@media screen and (max-width: 768px) {
    body {
        overflow: hidden;
        /* Prevent scrolling of the whole page */
        position: fixed;
        width: 100%;
        height: 100%;
    }

    #desktop {
        height: calc(100% - 60px);
        margin-top: 60px;
        /* Offset for top taskbar */
    }

    #desktop-icons {
        padding: 15px;
        gap: 15px;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        display: grid;
        height: auto;
        width: 100%;
    }

    .desktop-icon {
        width: 100% !important;
        padding: 8px;
    }

    .desktop-icon-icon {
        width: 50px;
        height: 50px;
        font-size: 36px;
    }

    .desktop-icon-label {
        font-size: 11px;
    }

    #desktop-utilities {
        display: none;
        /* Hide utilities on mobile to save space */
    }

    #desktop-quote {
        right: 0;
        left: 0;
        bottom: 80px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        /* Still below icons (10) but visible */
    }

    .quote-card {
        padding: 20px 30px;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 20px;
        width: 85%;
        max-width: 450px;
        align-items: center;
    }

    .quote-text {
        font-size: 24px;
        margin-bottom: 10px;
        text-align: center;
    }

    .quote-author {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .desktop-credit {
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
    }

    /* Taskbar Mobile - Shift to TOP */
    #taskbar {
        height: 60px;
        padding: 0 5px;
        top: 0;
        bottom: auto;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    #taskbar::before {
        top: auto;
        bottom: 0;
    }

    #start-button {
        width: 60px;
        height: 48px;
    }

    #taskbar-apps {
        gap: 2px;
    }

    .taskbar-app {
        width: 48px;
        height: 48px;
    }

    #system-tray {
        padding: 0 5px;
        gap: 5px;
    }

    #clock {
        min-width: 45px;
        padding: 0 5px;
    }

    #time {
        font-size: 11px;
    }

    #date {
        display: none;
    }

    /* Start Menu Mobile - Drop down from TOP */
    #start-menu {
        width: 100% !important;
        left: 0 !important;
        top: 60px !important;
        bottom: auto !important;
        height: calc(100% - 60px) !important;
        border-radius: 0;
        z-index: 25000;
        animation: startFadeDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes startFadeDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #start-menu-content {
        flex-direction: column;
        flex: 1;
        /* Take all available space between header and footer */
        overflow-y: hidden;
    }

    #start-menu-left {
        width: 100%;
        border-right: none;
        flex: 1;
        /* Expand to fill space */
        max-height: none !important;
        /* Allow it to grow */
    }

    #start-menu-right {
        display: none;
        /* Hide right panel on mobile start menu to focus on apps */
    }

    /* Context Menu Mobile */
    #context-menu {
        min-width: 220px;
    }

    #context-menu li {
        padding: 15px 25px;
        font-size: 16px;
    }

    /* Window Mobile */
    .window {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: fixed !important;
    }

    .window-header {
        height: 48px;
        /* Taller header for touch */
    }

    .window-controls {
        gap: 10px;
    }

    .window-btn {
        width: 40px;
        height: 36px;
        font-size: 14px;
    }

    .maximize-btn {
        display: none !important;
        /* Maximizing is redundant on mobile */
    }

    .window-resize-handle {
        display: none;
        /* No resizing on mobile */
    }

    .window-body {
        height: calc(100% - 48px) !important;
    }

    #window-container .window.maximized {
        top: 60px !important;
        height: calc(100% - 60px) !important;
    }

    /* Login Screen Mobile */
    #login-panel {
        right: 50% !important;
        bottom: 50% !important;
        transform: translate(50%, 50%) !important;
        width: 280px !important;
    }

    /* Boot Screen Mobile */
    .logo-orb {
        width: 80px;
        height: 80px;
    }

    .logo-text {
        font-size: 24px;
        letter-spacing: 4px;
    }

    #boot-loader {
        width: 80%;
    }

    .window-body [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    .window-body [style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .window-body h2 {
        font-size: 1.5rem !important;
    }

    .about-header-container,
    .window-body [style*="display: flex"][style*="gap: 22px"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Skills Grid specifically */
    .skills-grid {
        grid-template-columns: 1fr !important;
    }

    .skills-header-stats {
        flex-direction: column !important;
    }

    /* Project Cards */
    .window-body [style*="grid-template-columns: repeat(auto-fill, minmax(360px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Experience App */
    .experience-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .experience-filters {
        justify-content: center !important;
    }
}

/* EXTRA SMALL DEVICES */
@media screen and (max-width: 480px) {
    .window-body {
        padding: 5px !important;
    }

    .taskbar-app:nth-child(n+4) {
        display: none;
    }

    #desktop-quote {
        display: none !important;
    }

    .desktop-credit {
        display: none !important;
    }
}