/* ===== Mobile Responsive Styles ===== */

/* Écrans peu hauts (paysage, ultrawide, etc.) */
@media screen and (max-height: 600px) {
    .desktop-icons {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: calc(100vh - 80px);
        max-width: calc(100vw - 40px);
    }

    .desktop-icon {
        width: 80px;
    }

    .icon-img {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .desktop-icon span {
        font-size: 0.65rem;
    }
}

/* Écrans très peu hauts */
@media screen and (max-height: 500px) {
    .desktop-icons {
        top: 10px;
        left: 10px;
        gap: 5px;
    }

    .desktop-icon {
        width: 70px;
        padding: 8px;
    }

    .icon-img {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .taskbar {
        height: 45px;
    }
}

/* Tablets and below */
@media screen and (max-width: 1024px) {
    .window {
        min-width: 300px;
        min-height: 200px;
    }

    .taskbar-app span {
        display: none;
    }

    .desktop-icons {
        max-height: calc(100vh - 90px);
    }
}

/* Tablettes en mode paysage */
@media screen and (max-width: 1024px) and (max-height: 768px) {
    .desktop-icons {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        grid-auto-rows: min-content;
        max-width: 380px;
        max-height: calc(100vh - 80px);
    }
}

/* Mobile devices */
@media screen and (max-width: 768px) {
    /* Desktop icons - bigger touch targets */
    .desktop-icons {
        top: 10px;
        left: 10px;
        gap: 5px;
        max-height: calc(100vh - 80px);
    }

    .desktop-icon {
        width: 80px;
        padding: 10px;
    }

    .icon-img {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .desktop-icon span {
        font-size: 0.7rem;
    }

    /* Windows - almost full screen on mobile */
    .window {
        position: fixed !important;
        top: 10px !important;
        left: 5px !important;
        right: 5px !important;
        width: calc(100% - 10px) !important;
        height: calc(100vh - 68px) !important;
        min-width: unset;
        min-height: unset;
        border-radius: 16px;
        resize: none;
    }

    .window::after {
        display: none;
    }

    .window-header {
        padding: 14px 12px;
    }

    .window-controls {
        gap: 10px;
    }

    .win-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .window-content {
        padding: 15px;
    }

    /* Taskbar mobile */
    .taskbar {
        height: 56px;
        padding: 0 5px;
    }

    .start-btn {
        width: 48px;
        height: 48px;
    }

    .taskbar-apps {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .taskbar-apps::-webkit-scrollbar {
        display: none;
    }

    .taskbar-app {
        padding: 10px 14px;
        min-width: 48px;
        justify-content: center;
    }

    .taskbar-app span {
        display: none;
    }

    .taskbar-app i {
        font-size: 1.1rem;
    }

    .tray-item {
        width: 40px;
        height: 40px;
    }

    .tray-time {
        font-size: 0.9rem;
    }

    /* Start menu mobile */
    .start-menu {
        left: 5px;
        right: 5px;
        width: auto;
        bottom: 64px;
    }

    .start-app {
        padding: 14px;
    }

    /* About window mobile */
    .about-header {
        flex-direction: column;
        text-align: center;
    }

    .about-avatar {
        width: 80px;
        height: 80px;
        font-size: 1.8rem;
    }

    .about-details {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .about-socials {
        justify-content: center;
    }

    /* Skills window mobile */
    .skills-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .skill-tab {
        flex: 1;
        min-width: 80px;
        padding: 10px;
        font-size: 0.8rem;
    }

    .tools-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .tool-item {
        padding: 10px 5px;
        font-size: 0.7rem;
    }

    /* Domains / Hardware mobile */
    .hardware-showcase {
        margin-top: 12px;
    }

    .hardware-img {
        border-radius: 8px;
    }

    .domain-item {
        padding: 12px;
        gap: 12px;
    }

    .domain-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }

    .domain-info h4 {
        font-size: 0.9rem;
    }

    .domain-info p {
        font-size: 0.75rem;
    }

    /* Projects window mobile */
    .projects-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .search-box {
        width: 100%;
    }

    .project-card {
        padding: 12px;
    }

    /* Contact window mobile */
    .contact-methods {
        flex-direction: column;
    }

    .contact-card {
        width: 100%;
    }

    /* Music window mobile */
    .music-window {
        padding: 10px;
    }

    .music-cover {
        width: 120px;
        height: 120px;
    }

    .music-controls {
        gap: 15px;
    }

    .music-btn {
        width: 48px;
        height: 48px;
    }

    .play-btn {
        width: 60px;
        height: 60px;
    }

    .music-playlist {
        max-height: 150px;
    }

    /* Terminal mobile */
    .terminal-input {
        font-size: 14px;
    }

    .neofetch-output {
        font-size: 0.6rem;
        overflow-x: auto;
    }
}

/* Small phones */
@media screen and (max-width: 480px) {
    .desktop-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        left: 5px;
        right: 5px;
        width: auto;
    }

    .desktop-icon {
        width: 100%;
    }

    .icon-img {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .about-details {
        grid-template-columns: 1fr;
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-item {
        flex-wrap: wrap;
    }

    .skill-bar-container {
        width: 100%;
        order: 3;
        margin-top: 5px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Bigger touch targets */
    .desktop-icon {
        min-height: 80px;
    }

    .win-btn {
        width: 40px;
        height: 40px;
    }

    .taskbar-app {
        min-width: 52px;
        min-height: 44px;
    }

    .start-app {
        min-height: 52px;
    }

    .music-btn {
        min-width: 52px;
        min-height: 52px;
    }

    .playlist-item {
        min-height: 52px;
        padding: 12px;
    }

    /* Remove hover effects that don't work on touch */
    .desktop-icon:hover {
        background: transparent;
    }

    .desktop-icon:active {
        background: rgba(108, 92, 231, 0.2);
        transform: scale(0.95);
    }
}