/* ==========================================================================
   NovaCup Mobile Stylesheet (CapCut-inspired UI/UX)
   Active on screens <= 900px or when .device-mobile class is present
   ========================================================================== */

@media screen and (max-width: 900px), .device-mobile {
    /* 1. Touch targets scale and padding */
    button, 
    .btn, 
    .control-btn, 
    select, 
    input {
        min-height: 44px;
        font-size: 13px !important;
    }

    /* 2. Page & Framework Grid Adaptation */
    .app-container {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 100vw !important;
        overflow: hidden !important;
    }

    /* 3. Header adaptation */
    .app-header {
        height: 48px !important;
        padding: 0 12px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        background-color: var(--bg-surface) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .app-header .header-left .logo,
    .app-header .project-title-container,
    .app-header .header-center,
    .app-header .header-right #btn-load-demo,
    .app-header .header-right #btn-projects-modal,
    .app-header .header-right #btn-login-modal,
    .app-header .header-right #user-profile-section {
        display: none !important;
    }

    .app-header .header-left {
        display: flex !important;
        align-items: center !important;
    }

    .app-header .header-right {
        margin-left: auto;
    }

    .app-header #btn-export-modal {
        padding: 6px 12px !important;
        min-height: 32px !important;
        font-size: 12px !important;
    }

    /* 4. Workspace Flow adaptation */
    .app-workspace {
        flex-direction: column !important;
        flex: 1 !important;
        display: flex !important;
        overflow: hidden !important;
    }

    /* Hide sidebars on workspace and convert drawer & properties to slide-up sheets */
    .panel-left,
    .panel-right {
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
        border: none !important;
        background: transparent !important;
        display: block !important;
    }

    .sidebar-nav {
        display: none !important;
    }

    .sidebar-drawer,
    #panel-properties {
        position: fixed !important;
        bottom: -100% !important; /* Slide out bottom */
        left: 0 !important;
        width: 100vw !important;
        height: 400px !important;
        background-color: var(--bg-surface) !important;
        border-top: 1px solid var(--border-color) !important;
        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        z-index: 1250 !important;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.65) !important;
        transition: bottom var(--transition-normal) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .sidebar-drawer.open,
    #panel-properties:not(.mobile-hidden) {
        bottom: 0 !important; /* Slide in bottom */
    }

    /* Mobile Drawer Header */
    .mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-surface-elevated);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.5px;
        color: var(--text-main);
        flex-shrink: 0;
    }

    .btn-close-drawer {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        transition: var(--transition-fast);
    }

    .btn-close-drawer:hover {
        background: var(--bg-surface-highlight);
        color: var(--text-main);
    }

    .sidebar-drawer .tab-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 16px 20px 80px 20px !important; /* Bottom padding to prevent visual overlaps */
    }

    #panel-properties .panel-header-inside {
        padding: 12px 20px !important;
        background: var(--bg-surface-elevated) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    #panel-properties .panel-body-inside {
        padding: 16px 20px 80px 20px !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    /* Center player preview space allocation */
    .panel-center {
        flex: 0 0 auto !important;
        height: 35vh !important;
        min-height: 240px !important;
        padding: 8px !important;
        background-color: #000 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .player-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .canvas-wrapper {
        flex: 1 !important;
        min-height: 0 !important;
        background: #000 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Mobile Player Controls */
    .player-controls {
        padding: 8px 12px !important;
        border-radius: var(--border-radius-sm) !important;
        background: rgba(16, 16, 20, 0.85) !important;
        gap: 12px !important;
        margin-top: 4px !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }

    .player-controls .volume-container {
        display: none !important; /* Hide volume slider on mobile */
    }

    .player-controls .time-display {
        width: auto !important;
        font-size: 12px !important;
    }

    /* 5. Timeline on mobile */
    .app-timeline {
        flex: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        flex-shrink: 0 !important;
        border-top: 1px solid var(--border-color) !important;
        background-color: var(--bg-surface) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .timeline-toolbar {
        display: flex !important;
        height: 48px !important;
        padding: 4px 12px !important;
        justify-content: center !important;
        gap: 16px !important;
        background: var(--bg-darker) !important;
        overflow-x: auto !important;
    }

    .timeline-body-wrapper {
        flex: 1 !important;
        display: flex !important;
        overflow: hidden !important;
    }

    .track-headers {
        width: 44px !important;
        flex-shrink: 0 !important;
        grid-template-rows: 24px repeat(4, 36px) !important;
    }

    .track-header-cell {
        width: 44px !important;
        padding: 2px !important;
        height: 36px !important;
    }

    .track-header-cell.ruler-header {
        height: 24px !important;
    }

    .track-header-title i {
        width: 14px !important;
        height: 14px !important;
    }

    .track-header-title span,
    .btn-track-add,
    .btn-track-mute,
    .track-actions-wrapper {
        display: none !important;
    }

    .timeline-content-scroll {
        flex: 1 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .timeline-ruler {
        height: 24px !important;
    }

    .tracks-container {
        grid-template-rows: repeat(4, 36px) !important;
    }

    .track-lane {
        height: 36px !important;
        margin-bottom: 2px !important;
    }

    .timeline-clip {
        --available-height: 28px !important;
        height: 28px !important;
        top: 4px !important;
        border-radius: var(--border-radius-xs) !important;
    }

    /* 6. Touch-optimized trim handles (CapCut style) */
    .clip-handle {
        width: 24px !important; /* Thick target for thumb */
        background-color: var(--color-primary) !important;
        opacity: 0.95 !important;
        border-radius: 4px !important;
        box-shadow: 0 0 6px rgba(0,0,0,0.5) !important;
    }

    .clip-handle::after {
        content: '' !important;
        width: 3px !important;
        height: 14px !important;
        background: #fff !important;
        border-radius: 1px !important;
    }

    .assets-list {
        grid-template-columns: 1fr !important; /* Stack assets list */
    }

    .welcome-split {
        flex-direction: column !important;
    }

    /* 7. Bottom sheets for modal backdrops / modals */
    .modal-backdrop {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 2000 !important;
    }

    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        border: 1px solid var(--border-color) !important;
        border-bottom: none !important;
        margin: 0 !important;
        transform: none !important;
        animation: slide-up-sheet 0.3s cubic-bezier(0.1, 0.76, 0.55, 0.94);
    }

    @keyframes slide-up-sheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .modal-header {
        padding: 14px 20px !important;
    }

    .modal-body {
        padding: 16px 20px !important;
    }

    /* Custom CapCut Style bottom toolbar on mobile */
    .mobile-bottom-nav {
        display: flex !important;
        background-color: var(--bg-surface) !important;
        border-top: 1px solid var(--border-color) !important;
        height: 60px !important;
        width: 100vw !important;
        align-items: center !important;
        justify-content: space-around !important;
        flex-shrink: 0 !important;
        z-index: 1100 !important;
    }

    .mobile-bottom-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        width: 60px !important;
        height: 100% !important;
        cursor: pointer !important;
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--color-primary) !important;
    }

    .mobile-bottom-nav .nav-item i {
        width: 20px !important;
        height: 20px !important;
    }
}