/* Portrait-only layout (SECOND DESIGN). DO NOT TOUCH landscape/desktop layout. Activation strategy: - This stylesheet is always loaded. - It only takes effect when has class="portrait-mode". (Set by static/index.html early script + static/portrait.js runtime sync.) This avoids Android Firefox "Desktop site" issues where CSS media queries can fail due to a fake wide layout viewport. */ :root{ --p-safe-top: env(safe-area-inset-top, 0px); --p-safe-bottom: env(safe-area-inset-bottom, 0px); --p-dock-reserve: 260px; /* reserve for bottom player docks */ } /* ------------------------------ GLOBAL PORTRAIT OVERRIDES ------------------------------ */ html.portrait-mode .legacy-topbar{ display:none !important; } html.portrait-mode body{ overflow:hidden !important; } /* Turn the whole app into a vertical stack: top rail + content */ html.portrait-mode .app-shell{ display:flex !important; flex-direction:column !important; width:100% !important; /* robust viewport height chain */ height:100vh !important; height:100svh !important; height:100dvh !important; overflow:hidden !important; } /* Sidebar becomes TOP RAIL */ html.portrait-mode .sidebar{ width:100% !important; min-width:0 !important; height:auto !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; padding: calc(10px + var(--p-safe-top)) 10px 10px !important; border-right:none !important; border-bottom:1px solid var(--line) !important; position:sticky !important; top:0 !important; z-index:500 !important; } /* Make sidebar children horizontal */ html.portrait-mode .sidebar-top, html.portrait-mode .sidebar-bottom{ width:auto !important; display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; flex-wrap:nowrap !important; min-width:0 !important; } /* Left section can horizontally scroll if it overflows */ html.portrait-mode .sidebar-top{ flex:1 1 auto !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling: touch; } html.portrait-mode .sidebar-bottom{ flex:0 0 auto !important; } /* Show portrait nav buttons (overrides inline display:none) */ html.portrait-mode #portraitNav{ display:flex !important; gap:10px !important; align-items:center !important; } html.portrait-mode #portraitNav .icon.active{ outline:2px solid rgba(255,255,255,.18); border-radius:12px; } /* Keep bottom area compact */ html.portrait-mode .sidebar-status-mount{ display:none !important; } html.portrait-mode .sidebar-progress-mount{ display:none !important; } html.portrait-mode .sidebar-progress-label{ min-width:44px; text-align:right; opacity:.9; } /* Content area */ html.portrait-mode .app-main{ flex:1 1 auto !important; min-height:0 !important; width:100% !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; } html.portrait-mode main.grid{ flex:1 1 auto !important; min-height:0 !important; width:100% !important; display:block !important; position:relative !important; overflow:hidden !important; } /* Panels are full-screen pages in portrait */ html.portrait-mode main.grid > .panel{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; border-radius:0 !important; border-left:none !important; border-right:none !important; display:none !important; flex-direction:column !important; min-height:0 !important; } /* Default page: Home */ html.portrait-mode body:not([data-portrait-page]) #panelHome, html.portrait-mode body[data-portrait-page="home"] #panelHome{ display:flex !important; } html.portrait-mode body[data-portrait-page="playlist"] #panelPlaylist{ display:flex !important; } html.portrait-mode body[data-portrait-page="similar"] #panelSimilar{ display:flex !important; } html.portrait-mode body[data-portrait-page="library"] #panelLibrary{ display:flex !important; } /* Home: centered */ html.portrait-mode #panelHome{ align-items:center !important; justify-content:center !important; } html.portrait-mode #panelHome .portrait-home-card{ width:100% !important; max-width:520px !important; margin:0 auto !important; } /* Lists must scroll reliably on Android Firefox */ html.portrait-mode .panel .list{ flex:1 1 auto !important; min-height:0 !important; overflow-y:scroll !important; /* scroll instead of auto: more reliable on some Android builds */ overflow-x:hidden !important; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--p-dock-reserve) + var(--p-safe-bottom)) !important; touch-action: pan-y; } /* Keep buttons next to the track (row) */ html.portrait-mode .item{ flex-direction:row !important; align-items:center !important; } html.portrait-mode .item .meta{ flex:1 1 auto !important; min-width:0 !important; } /* Bottom dock layer in portrait */ html.portrait-mode .portrait-dock-layer{ position:fixed; left:0; right:0; bottom:0; z-index:600; padding: 8px 10px calc(8px + var(--p-safe-bottom)); pointer-events:none; } html.portrait-mode .portrait-dock-layer > *{ pointer-events:auto; /* neutralize absolute positioning from .floating-dock */ position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:auto !important; max-width:100% !important; margin: 0 auto 8px auto; } /* ------------------------------ PORTRAIT FIX: Keep players bound to their panels ------------------------------ */ html.portrait-mode .panel .list{ padding-bottom: calc(16px + var(--p-safe-bottom)) !important; } html.portrait-mode .floating-dock, html.portrait-mode .side-player-dock, html.portrait-mode .playlist-floating-dock{ position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; } /* If any dock wrapper has fixed sizing in landscape, neutralize it in portrait */ html.portrait-mode .floating-dock .playerbox, html.portrait-mode .floating-dock .pl-player-wrap{ width: 100% !important; } html.portrait-mode .floating-dock{ pointer-events: auto !important; }