/* Mobile uses the existing Library data and controls, with a drawer and bottom navigation. */
.library-menu-backdrop { display: none; }
@media (max-width: 900px) {
    html, body, #app { height: 100dvh; min-height: 0; }
    #reader-main-content {
        box-sizing: border-box;
        margin-left: 0 !important;
        width: 100% !important;
        height: 100dvh;
        padding: 0 0 calc(64px + env(safe-area-inset-bottom)) !important;
        transition: none;
    }
    #reader-content-wrapper { height: 100%; min-height: 0; border-radius: 0; }
    #main-column { flex: 1 1 100% !important; min-width: 0; width: 100%; }
    #resizer, .genio-capsule-scroll-track, .sidebar-scroll-track { display: none !important; }
    html[data-theme] #hamburger-menu {
        z-index: 602 !important;
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
        box-sizing: border-box;
        transition: none;
    }
    html[data-theme] #hamburger-menu.closed { width: 0 !important; visibility: hidden; }
    html[data-theme] #hamburger-menu.open {
        width: min(340px, calc(100vw - 48px)) !important;
        box-shadow: 12px 0 40px #0003 !important;
    }
    #hamburger-menu .sidebar-nav { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .library-menu-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 601;
        padding: 0;
        border: 0;
        background: #0006;
        touch-action: none;
    }
    #app #hamburger-menu.closed ~ #mainHeaderHamburgerBtn {
        top: env(safe-area-inset-top) !important;
        left: max(6px, env(safe-area-inset-left)) !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 60px !important;
    }
    #app #main-header {
        height: calc(60px + env(safe-area-inset-top)) !important;
        min-height: calc(60px + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(56px, calc(50px + env(safe-area-inset-left))) !important;
        gap: 4px !important;
        justify-content: flex-start !important;
        box-sizing: border-box;
    }
    #app #reader-content-wrapper #main-header .search-wrapper {
        position: static !important;
        transform: none !important;
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    #main-header .search-container { width: 100%; min-width: 0; }
    #app #searchInput { font-size: 16px !important; height: 44px !important; padding-right: 8px !important; }
    #app #main-header .header-actions { gap: 0 !important; }
    #app #main-header .header-actions .icon-btn,
    #app #sidebarHeaderHamburgerBtn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
    #app .library-view-bar { padding: 12px 16px 4px !important; }
    #app .context-filter-bar { padding: 0 12px !important; min-height: 48px !important; flex-shrink: 0; }
    #app .context-filter-group { gap: 4px !important; white-space: nowrap; }
    #app .context-filter-group button { height: 44px !important; flex-shrink: 0; font-size: 13px !important; }
    #app #article-list-content {
        margin: 0 !important;
        padding: 16px max(14px, env(safe-area-inset-right)) 28px max(14px, env(safe-area-inset-left)) !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
    #app .articles-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
    #app .articles-container:not(.main-column-narrowed) > .article-card { height: 400px !important; min-height: 400px !important; max-height: 400px !important; }
    #app .article-card:hover { transform: none !important; }
    #app .article-card .article-card-title { font-size: 16px !important; }
    #app .article-card .article-card-excerpt { font-size: 14px !important; }
    #app .articles-container:not(.main-column-narrowed) > .article-card .article-card-excerpt { height: 42px !important; min-height: 42px !important; max-height: 42px !important; }
    #app .articles-container:not(.main-column-narrowed) > .article-card .card-actions-horizontal { height: 44px; gap: 4px !important; }
    #app .article-card .card-actions-horizontal .icon-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
    #app .article-card .card-actions-horizontal .icon-btn i { font-size: 15px !important; }
    .card-select-control { position: absolute; z-index: 3; top: 4px; left: 4px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--genio-surface) 86%, transparent); cursor: pointer; }
    #app .card-select-control .card-select-checkbox { position: static; width: 20px; height: 20px; margin: 0; opacity: 1; transform: none; }
    #app #hamburger-menu ~ #reader-main-content #quick-nav-header {
        box-sizing: border-box;
        position: fixed !important;
        inset: auto 0 0 !important;
        z-index: 300 !important;
        width: 100% !important;
        height: calc(64px + env(safe-area-inset-bottom)) !important;
        padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        background: var(--genio-bg) !important;
        border-top: 1px solid var(--genio-line) !important;
    }
    #app #hamburger-menu ~ #reader-main-content #quick-nav-header .quick-nav-btn {
        flex: 1 1 0;
        width: 0 !important;
        min-width: 0 !important;
        height: 56px !important;
        min-height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px;
        padding: 7px 2px !important;
        margin: 0 !important;
    }
    #app #hamburger-menu ~ #reader-main-content #quick-nav-header .quick-nav-btn span { display: block !important; font-size: 10px; line-height: 1.2; }
    #app #hamburger-menu ~ #reader-main-content #quick-nav-header #themeToggleBtn { margin: 0 !important; }
    .bulk-actions-bar { flex-wrap: wrap; padding: 6px 12px; gap: 2px; }
    #app .bulk-actions-bar .icon-btn, #app .bulk-actions-bar .action-btn { min-height: 44px; min-width: 44px; }
    #app .library-controls-menu { position: fixed !important; top: calc(64px + env(safe-area-inset-top)); right: 8px; width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; box-sizing: border-box; }
    #app :is(.library-controls-menu, .sidebar-nav, .appearance-dropdown, #annotationsPanel) :is(input:not([type="range"]):not([type="checkbox"]), select, textarea) { font-size: 16px !important; min-height: 44px; }
    #app .sidebar-nav .main-pages-nav li, #app #hamburger-feeds-list li { min-height: 44px; }
    #app .feed-actions-hamburger .icon-btn { width: 44px; height: 44px; }
    #app #loadMoreButton { min-width: 44px; min-height: 44px; }

    /* The article overlays the list; returning preserves the list position. */
    body.mobile-reader-open #reader-main-content { padding-bottom: 0 !important; }
    body.mobile-reader-open #main-column { visibility: hidden; pointer-events: none; }
    body.mobile-reader-open #app #mainHeaderHamburgerBtn,
    body.mobile-reader-open #app #hamburger-menu ~ #reader-main-content #quick-nav-header,
    body.mobile-menu-open #app #hamburger-menu ~ #reader-main-content #quick-nav-header { display: none !important; }
    html[data-theme] #app #reading-pane:not(.collapsed) { position: fixed; inset: 0; z-index: 500 !important; width: 100%; height: 100dvh; min-width: 0; margin: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    #app #reading-pane .toolbar { min-height: calc(58px + env(safe-area-inset-top)); height: auto; padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)) !important; border-radius: 0 !important; }
    #app #reading-pane .toolbar :is(#closeArticleBtn, #readerPromptButton, #playSpeechBtn, .reader-actions-trigger, #toggleAppearanceMenuBtn) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; flex-basis: 44px; }
    #app #reading-pane #closeArticleBtn { display: inline-flex !important; }
    #app #reading-pane :is(#toggleFullscreenReader, .reader-document-actions) { display: none !important; }
    #app #reading-pane #readerContextRail { opacity: 1 !important; pointer-events: auto !important; }
    #app #reading-pane #readerContextRail :is(#toggleAnnotationsBtn, #toggleReadingStatusBtn) { display: none !important; }
    #app #reading-pane .reader-actions-menu { width: min(280px, calc(100vw - 20px)); max-height: calc(100dvh - 90px - env(safe-area-inset-top)); overflow-y: auto; }
    #app #reading-pane .reader-actions-menu button { min-height: 44px; font-size: 14px; }
    #app #reading-pane .reader-actions-menu .reader-compact-action { display: flex; }
    #app #reading-pane .reader-actions-menu .reader-mobile-action { display: flex; }
    #app #reading-pane #readerPromptMenu { max-height: 48px; }
    #app #reading-pane #readerPromptMenu .genio-prompt-option { min-height: 44px; height: 44px; }
    #app #reading-pane #readerPromptMenu .genio-prompt-option > span:last-child { display: none; }
    #app #reading-pane .article-content-scroll-wrapper { padding-block: 24px calc(80px + env(safe-area-inset-bottom)); overscroll-behavior-y: contain; }
    #app #reading-pane .article-content-scroll-wrapper { padding-left: max(var(--reader-side-margin, 10%), env(safe-area-inset-left)); padding-right: max(var(--reader-side-margin, 10%), env(safe-area-inset-right)); }
    #app #reading-pane .article-header-container h2 { font-size: clamp(24px, 6vw, 30px) !important; }
    #app #reading-pane .article-header-container .original-url { font-size: 13px !important; }
    #app #reading-pane #articleContent :is(pre, table) { max-width: 100%; overflow-x: auto; }
    #app #reading-pane #articleContent table { display: block; }
    #app #reading-pane #articleContent :is(img, video, iframe) { max-width: 100%; }
    #app #reading-pane #annotationsPanel { top: calc(64px + env(safe-area-inset-top)); right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); box-sizing: border-box; }
    #app #reading-pane .appearance-dropdown { top: calc(100% + 4px); right: 8px; bottom: auto; left: auto; width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 90px - env(safe-area-inset-top)); box-sizing: border-box; overflow-y: auto; }
    #app #readerTocDock { top: calc(100px + env(safe-area-inset-top)); }
    #app .reader-toc-item { min-height: 44px; }
    #app .tts-player { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 20px); box-sizing: border-box; gap: 5px; }
    #app .tts-player button { min-width: 44px; min-height: 44px; }
    #app .tts-player-provider { display: none; }
    #app #genioChatView .chat-topbar { padding-left: 56px; }
    #app #genioChatView .chat-main { margin: 0; border-radius: 0; }
    .account-center, .web-auth-dialog { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    .account-center-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; }
    .web-auth-card { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
    :is(.web-auth-card, .account-center-dialog) :is(input:not([type="checkbox"]), select, textarea) { font-size: 16px !important; min-height: 44px; }
    :is(.web-auth-card, .account-center-dialog) button { min-height: 44px; }
    .account-center-close, .web-auth-close { min-width: 44px; }
    .highlight-workspace-card footer, .highlight-workspace-actions { flex-wrap: wrap; }
    .highlight-workspace-card :is(button[data-highlight-action="labels"], .highlight-workspace-actions button, select) { min-height: 44px; min-width: 44px; }
    .highlight-workspace-card :is(textarea, select) { font-size: 16px; }
    .keyboard-shortcuts-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
    .reader-supplement-delete, .reader-supplement-status button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 599px) {
    #app .articles-container { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px) {
    .card-select-control { display: contents; }
    .reader-actions-menu .reader-mobile-action { display: none; }
}