/**
 * Mobile optimization: drawer sidebar, single-column workspace, touch targets, safe areas.
 * Desktop (900px+) is unchanged; these rules apply only below 900px.
 */

/* ========== Breakpoint: mobile/tablet ========== */
@media (max-width: 899px) {
    /* --- Shell grid: single column, sidebar out of flow --- */
    .app-root {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "workspace"
            "dock";
    }

    /* --- Sidebar: off-canvas drawer --- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(320px, 85vw);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        border-right: 1px solid var(--border-color);
        box-shadow: none;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    /* Backdrop: only visible when drawer is open */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 199;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sidebar-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Header: compact, safe area --- */
    .header {
        padding-top: calc(var(--spacing-md) + env(safe-area-inset-top, 0px));
        padding-left: calc(var(--spacing-md) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--spacing-md) + env(safe-area-inset-right, 0px));
    }

    .header-left {
        gap: var(--spacing-sm);
        min-width: 0;
    }

    .header-title {
        font-size: 1.15rem;
    }

    /* Hide music player on small screens to free space */
    .music-player {
        display: none;
    }

    .visualizer-canvas {
        display: none;
    }

    /* Favorites: allow wrapping or scroll, limit height */
    .favorites-tabs {
        max-width: 50vw;
        max-height: 2.5rem;
        align-items: center;
    }

    /* Touch targets: minimum 44px for interactive elements */
    .icon-button,
    .sidebar-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .tile-button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .btn {
        min-height: 44px;
        padding: 10px var(--spacing-md);
    }

    .favorite-tab {
        min-height: 44px;
        padding: 10px var(--spacing-sm);
    }

    .app-item {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Workspace: single column, scroll --- */
    .workspace {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .workspace-grid.single,
    .workspace-grid.double,
    .workspace-grid.triple,
    .workspace-grid.quad {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fill, minmax(280px, 1fr));
        grid-auto-rows: minmax(280px, 1fr);
        min-height: min-content;
    }

    .app-tile {
        min-height: 280px;
    }

    /* Sticky tile header so close button stays reachable when workspace scrolls */
    .app-tile-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg-glass);
        flex-shrink: 0;
    }

    .app-tile-content {
        min-height: 0;
    }

    /* Dock: safe area bottom --- */
    .dock {
        padding-bottom: calc(var(--spacing-xs) + env(safe-area-inset-bottom, 0px));
        padding-left: calc(var(--spacing-sm) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--spacing-sm) + env(safe-area-inset-right, 0px));
    }

    .dock-datetime,
    .dock-coming-up {
        font-size: 0.75rem;
    }

    .dock-button {
        min-height: 44px;
        padding: 10px var(--spacing-sm);
    }

    /* Toast: avoid notch on small screens */
    .toast-container {
        top: calc(var(--spacing-lg) + env(safe-area-inset-top, 0px));
        left: var(--spacing-md);
        right: var(--spacing-md);
    }
}

/* ========== Desktop: hide mobile-only UI ========== */
@media (min-width: 900px) {
    .sidebar-toggle {
        display: none;
    }

    .sidebar-backdrop {
        display: none;
    }

    .header-close-app {
        display: none !important;
    }
}