/* Mobile Responsive Styles for Windows 95 Clone */

/* Mobile breakpoints */
@media screen and (max-width: 768px) {
    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Make desktop full height on mobile */
    #desktop {
        height: calc(100vh - 28px);
        overflow: hidden;
        position: relative;
    }

    /* Desktop icons - smaller and better positioned */
    .desktop-icon {
        width: 60px;
        padding: 2px;
    }

    .desktop-icon img {
        width: 24px;
        height: 24px;
    }

    .desktop-icon span {
        font-size: 9px;
        line-height: 11px;
    }

    /* Windows container should not overflow */
    #windows-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

    /* Constrain windows to viewport */
    .app-window {
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100vh - 38px) !important;
        position: absolute !important;
    }

    /* Specific window adjustments */
    #notepad-window {
        width: 90vw !important;
        height: 60vh !important;
        left: 5vw !important;
        top: 5vh !important;
    }

    #calculator-window {
        width: 280px !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    #file-explorer-window {
        width: 90vw !important;
        height: 70vh !important;
        left: 5vw !important;
        top: 5vh !important;
    }

    #paint-window {
        width: 95vw !important;
        height: 80vh !important;
        left: 2.5vw !important;
        top: 2vh !important;
    }

    #dos-window {
        width: 90vw !important;
        height: 50vh !important;
        left: 5vw !important;
        top: 10vh !important;
    }

    #solitaire-window {
        width: 95vw !important;
        height: 70vh !important;
        left: 2.5vw !important;
        top: 5vh !important;
    }

    /* Cracktro window specific */
    #cracktro-window {
        width: 95vw !important;
        height: 60vh !important;
        left: 2.5vw !important;
        top: 10vh !important;
    }

    /* Error dialog responsive */
    #error-dialog {
        width: 90vw !important;
        max-width: 350px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Start menu adjustments */
    #start-menu {
        max-width: 250px;
        bottom: 28px !important;
    }

    /* Taskbar stays at bottom */
    #taskbar {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 9999;
    }

    /* Webamp/Winamp responsive */
    #winamp-container {
        transform: scale(0.8);
        transform-origin: top left;
        left: 10px !important;
        top: 50px !important;
    }

    /* Context menu responsive */
    .context-menu {
        max-width: 200px;
    }

    /* Font sizes for better readability */
    .window .title-bar-text {
        font-size: 11px;
    }

    .menu-item {
        font-size: 10px;
        padding: 3px 6px;
    }

    /* Paint app adjustments */
    #paint-iframe {
        width: 100% !important;
        height: calc(100% - 18px) !important;
    }

    /* File explorer tree view */
    .tree-view {
        font-size: 10px;
    }

    .file-item {
        padding: 2px 4px;
        font-size: 10px;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    /* Even smaller icons on very small screens */
    .desktop-icon {
        width: 50px;
    }

    .desktop-icon img {
        width: 20px;
        height: 20px;
    }

    .desktop-icon span {
        font-size: 8px;
        line-height: 10px;
    }

    /* Reposition desktop icons for mobile */
    .desktop-icon[data-app="computer"] {
        top: 10px !important;
        left: 10px !important;
    }

    .desktop-icon[data-app="outlook"] {
        top: 10px !important;
        left: 70px !important;
    }

    .desktop-icon[data-app="documents"] {
        top: 70px !important;
        left: 10px !important;
    }

    .desktop-icon[data-app="ie"] {
        top: 70px !important;
        left: 70px !important;
    }

    .desktop-icon[data-app="recycle"] {
        top: 130px !important;
        left: 10px !important;
    }

    .desktop-icon[data-app="winamp"] {
        top: 130px !important;
        left: 70px !important;
    }

    .desktop-icon[data-app="network"] {
        top: 190px !important;
        left: 10px !important;
    }

    .desktop-icon[data-app="calc"] {
        top: 190px !important;
        left: 70px !important;
    }

    .desktop-icon[data-app="paint"] {
        top: 250px !important;
        left: 10px !important;
    }

    .desktop-icon[data-app="dos"] {
        top: 250px !important;
        left: 70px !important;
    }

    .desktop-icon[data-app="solitaire"] {
        top: 10px !important;
        left: 130px !important;
    }

    .desktop-icon[data-app="cracktro"] {
        top: 310px !important;
        left: 10px !important;
    }

    /* Start menu even smaller */
    #start-menu {
        max-width: 200px;
        font-size: 10px;
    }

    /* Window title bars */
    .title-bar {
        height: 18px;
    }

    .title-bar-text {
        font-size: 10px;
    }

    /* Title bar buttons smaller */
    .title-bar-controls button {
        width: 14px;
        height: 14px;
    }
}

/* Landscape orientation adjustments */
@media screen and (max-height: 500px) and (orientation: landscape) {
    /* Reduce window heights in landscape */
    .app-window {
        max-height: calc(100vh - 50px) !important;
    }

    #notepad-window,
    #file-explorer-window,
    #dos-window {
        height: 70vh !important;
        top: 2vh !important;
    }

    #cracktro-window {
        height: 85vh !important;
        top: 2vh !important;
    }

    /* Hide less important icons in landscape */
    .desktop-icon[data-app="network"],
    .desktop-icon[data-app="outlook"] {
        display: none;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Larger click targets for touch */
    .title-bar-controls button {
        min-width: 24px;
        min-height: 24px;
    }

    .menu-item {
        padding: 6px 10px;
        min-height: 28px;
    }

    .desktop-icon {
        padding: 6px;
    }

    #start-button {
        min-height: 28px;
        padding: 0 8px;
    }

    /* Taskbar buttons bigger for touch */
    .taskbar-button {
        min-height: 26px;
        padding: 2px 6px;
    }

    /* Context menu items bigger */
    .context-menu-item {
        padding: 8px 12px;
        min-height: 30px;
    }
}

/* Prevent window dragging outside viewport */
.window.dragging {
    transition: none !important;
}

/* Ensure windows snap back if dragged outside */
@media screen and (max-width: 768px) {
    .window {
        transition: left 0.2s ease, top 0.2s ease;
    }
}