/* Shared controls, cards and scrollbars are defined in genio-visual-system.css. This file retains Library-specific layout and overrides. */
/* Styling del mockup design-lab/library-reader.html applicato alla Library reale. */
/* Genio Visual System - Library & Reader Utilitarian Minimalist Overrides */

        /* Root & layout hygiene */
        :root {
            --closed-navigation-rail-width: 48px;
        }
        body {
            background-color: var(--genio-bg) !important;
            background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
            color: var(--genio-ink);
            -webkit-font-smoothing: antialiased;
        }

        /* Ensure browser hides native scrollbars on custom-managed areas */

        /* Minimal floating capsule scrollbars ("pallina allungata"): zero track line, zero shadow, short clamped pill */

        /* Minimal fallback scrollbars for other containers */

        /* Resizer and main column divider: seamless integration, no harsh shadows or gaps */

        #main-header {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            min-height: 60px !important;
            height: 60px !important;
            padding: 0 16px !important;
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            z-index: 100 !important;
        }

        /* Search input as soft rounded rectangle (10px) - non forzata a tonda */
        #main-header .search-container {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Wide / Full library view: Search bar centered */

        /* Three-column or Split view (when reader is open): Search bar anchors to the left without colliding with actions */

        /* Controlli header: solo icone, niente bottoni a scatola / contorno */
        #main-header .header-actions .icon-btn:hover,
        #mainHeaderHamburgerBtn:hover,
        #sidebarHeaderHamburgerBtn:hover {
            border: none !important;
            color: var(--genio-accent) !important;
            background: color-mix(in srgb, var(--genio-accent) 10%, transparent) !important;
        }
        #main-header .header-actions #openSourceButton {
            border: none !important;
            color: var(--genio-accent) !important;
            background: transparent !important;
        }
        html[data-theme] #sortFilterButton i {
            display: inline-block !important;
            line-height: 1 !important;
            font-size: 15px !important;
        }

        /* Hamburger menu & header as blocco unico con lo stesso colore - Opzione B Borderless */
        #hamburger-menu .sidebar-account-controls {
            border: none !important;
            border-top: none !important;
            background: transparent !important;
        }
        #add-source-url {
            border: none !important;
            background: color-mix(in srgb, var(--genio-muted) 8%, var(--genio-surface)) !important;
            border-radius: var(--genio-radius-s) !important;
        }
        #add-source-submit {
            border: none !important;
        }

        .library-view-bar {
            border: none !important;
            border-bottom: none !important;
        }

        .library-view-eyebrow {
            color: var(--genio-accent) !important;
            font-weight: 700 !important;
            letter-spacing: .08em !important;
        }

        .library-view-title-row h1 {
            font-weight: 800 !important;
        }

        .library-view-bar {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            min-height: 0 !important;
            padding: 12px 28px 4px !important;
            background: transparent !important;
            border-bottom: 0 !important;
        }
        .library-view-title-row {
            display: flex !important;
            align-items: baseline !important;
            gap: 8px !important;
        }
        .library-view-title-row h1 {
            margin: 0 !important;
            color: var(--genio-ink) !important;
            font-size: 20px !important;
            line-height: 1.2 !important;
            letter-spacing: -.025em !important;
            font-weight: 750 !important;
        }
        .library-view-count {
            color: var(--genio-subtle) !important;
            font-size: 12px !important;
            font-weight: 600 !important;
        }

        /* Dossier / Fascicolo Tabs - Borderless Pill Capsules */

        /* Unread indicator dot */
        .article-card.unread-feed-article .card-title-actions-row h3::before,
        .feed-item-card.unread .article-card-title::before {
            content: '●';
            color: var(--genio-accent);
            font-size: .58em;
            margin-right: 8px;
            line-height: 1;
            vertical-align: .14em;
            display: inline-block;
        }

        /* Rounded sheet division container - Borderless with soft shoulders */
        #article-list-content {
            margin: 0 16px !important;
            padding: 24px 28px 36px !important;
            background-color: var(--genio-library-bg) !important;
            background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
            border: none !important;
            border-top: none !important;
            border-left: none !important;
            border-bottom: none !important;
            border-right: none !important;
            border-radius: 20px 20px 0 0 !important;
            box-shadow: none !important;
            position: relative !important;
            z-index: 1 !important;
        }

        /* Standard Article Cards (Grid / Library View) - Borderless with Soft Elevation */
        .article-card {
            border: none !important;
            border-radius: 16px !important;
            background: var(--genio-surface) !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.03) !important;
            overflow: hidden !important;
            transition: box-shadow .18s ease !important;
            transform: none !important;
            cursor: pointer;
        }
        .article-card:hover {
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
            transform: none !important;
            border: none !important;
        }
        .article-card.active,
        .article-card.selected {
            border: none !important;
            box-shadow: 0 0 0 2px var(--genio-accent), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
        }
        html[data-theme="dark"] .article-card {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.2) !important;
        }
        html[data-theme="dark"] .article-card:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
        }
        html[data-theme="dark"] .article-card.active,
        html[data-theme="dark"] .article-card.selected {
            box-shadow: 0 0 0 2px var(--genio-accent), 0 4px 14px rgba(0, 0, 0, 0.3) !important;
        }
        .article-card .card-image-top {
            width: 100% !important;
            height: 136px !important;
            padding-top: 0 !important;
            position: relative !important;
            overflow: hidden !important;
            background: var(--genio-well) !important;
            border: none !important;
            border-bottom: none !important;
            border-radius: 16px 16px 0 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .article-card .card-image-top .article-card-image-placeholder {
            position: static !important;
            display: flex;
            align-items: center !important;
            justify-content: center !important;
        }
        .article-card .card-image-top .article-card-image-placeholder i {
            color: var(--genio-accent) !important;
            opacity: 0.9 !important;
            font-size: 28px !important;
            filter: none !important;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
        }
        .article-card:hover .card-image-top .article-card-image-placeholder i {
            transform: scale(1.08);
            opacity: 1;
        }
        .article-card .card-content-wrapper {
            padding: 14px 16px !important;
        }
        .article-card .article-card-title {
            font-size: 15px !important;
            line-height: 1.38 !important;
            font-weight: 700 !important;
            color: var(--genio-ink) !important;
            margin: 0 !important;
        }
        .article-card .article-card-excerpt {
            font-size: 12.5px !important;
            line-height: 1.5 !important;
            color: var(--genio-muted) !important;
            margin: 6px 0 12px 0 !important;
        }
        .article-card .article-card-meta-bottom {
            padding-top: 10px !important;
            border: none !important;
            border-top: none !important;
            color: var(--genio-subtle) !important;
            font-size: 11.5px !important;
        }
        .article-card .card-actions-horizontal .icon-btn {
            width: 28px !important;
            min-width: 28px !important;
            height: 28px !important;
            min-height: 28px !important;
            border-radius: var(--genio-radius-s) !important;
            border: none !important;
            background: color-mix(in srgb, var(--genio-muted) 8%, var(--genio-surface)) !important;
            color: var(--genio-subtle) !important;
            box-shadow: none !important;
            display: inline-grid !important;
            place-items: center !important;
            padding: 0 !important;
            transition: all .15s ease !important;
        }
        .article-card .card-actions-horizontal .icon-btn:hover {
            border: none !important;
            color: var(--genio-accent) !important;
            background: color-mix(in srgb, var(--genio-accent) 15%, var(--genio-surface)) !important;
        }
        .article-card .card-actions-horizontal .icon-btn i {
            font-size: 12.5px !important;
            line-height: 1 !important;
        }

        /* Narrowed cards in split reader view - Borderless */
        .articles-container.main-column-narrowed .article-card {
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch !important;
            min-height: 112px !important;
            max-height: 122px !important;
            height: 118px !important;
            overflow: hidden !important;
            background: var(--genio-surface) !important;
            border: none !important;
            border-radius: 14px !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 3px 10px rgba(15, 23, 42, 0.03) !important;
            cursor: pointer;
            transition: box-shadow .18s ease, transform .18s ease;
        }
        .articles-container.main-column-narrowed .article-card:hover {
            border: none !important;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
            transform: translateY(-1px);
        }
        .articles-container.main-column-narrowed .article-card.active,
        .articles-container.main-column-narrowed .article-card.selected {
            border: none !important;
            box-shadow: 0 0 0 2px var(--genio-accent), 0 3px 10px rgba(15, 23, 42, 0.06) !important;
        }
        html[data-theme="dark"] .articles-container.main-column-narrowed .article-card {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2) !important;
        }
        html[data-theme="dark"] .articles-container.main-column-narrowed .article-card:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
        }
        html[data-theme="dark"] .articles-container.main-column-narrowed .article-card.active,
        html[data-theme="dark"] .articles-container.main-column-narrowed .article-card.selected {
            box-shadow: 0 0 0 2px var(--genio-accent), 0 3px 10px rgba(0, 0, 0, 0.3) !important;
        }
        .articles-container.main-column-narrowed .article-card .card-image-top {
            width: 92px !important;
            min-width: 92px !important;
            max-width: 92px !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: var(--genio-well) !important;
            border: none !important;
            border-right: none !important;
            border-bottom: none !important;
            border-radius: 14px 0 0 14px !important;
            flex-shrink: 0 !important;
        }
        .articles-container.main-column-narrowed .article-card .card-image-top .article-card-image-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .articles-container.main-column-narrowed .article-card .card-image-top .article-card-image-placeholder i {
            color: var(--genio-accent) !important;
            opacity: 0.9 !important;
            font-size: 22px !important;
            filter: none !important;
        }
        .articles-container.main-column-narrowed .article-card .card-content-wrapper {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            padding: 10px 13px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }
        .articles-container.main-column-narrowed .article-card .card-title-actions-row {
            margin: 0 0 4px 0 !important;
            display: flex !important;
            align-items: flex-start !important;
            justify-content: space-between !important;
            gap: 6px !important;
            min-height: 0 !important;
        }
        .articles-container.main-column-narrowed .article-card .article-card-title {
            font-size: 13.5px !important;
            line-height: 1.34 !important;
            font-weight: 700 !important;
            color: var(--genio-ink) !important;
            margin: 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        .articles-container.main-column-narrowed .article-card .article-card-excerpt {
            font-size: 12px !important;
            line-height: 1.4 !important;
            color: var(--genio-muted) !important;
            margin: 2px 0 6px 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 1 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            min-height: 0 !important;
        }
        .articles-container.main-column-narrowed .article-card .article-card-meta-bottom {
            padding-top: 6px !important;
            border: none !important;
            border-top: none !important;
            color: var(--genio-subtle) !important;
            font-size: 11px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            margin-top: auto !important;
        }
        .articles-container.main-column-narrowed .article-card .card-actions-horizontal {
            display: none !important;
        }

        #main-header .search-container {
            width: 100%;
        }

        /* Reading pane layout and typography - Opzione B Borderless with clean continuous top bar and rounded top-left shoulder */
        #reading-pane {
            container-type: inline-size;
            container-name: reader;
            background-color: var(--genio-surface) !important;
            border: none !important;
            border-left: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
            border-right: 0 !important;
            border-top: 0 !important;
            border-bottom: 0 !important;
            border-top-left-radius: 20px !important;
            border-radius: 20px 0 0 0 !important;
            box-shadow: -4px 0 20px rgba(15, 23, 42, 0.06) !important;
            overflow: hidden !important;
            background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
            z-index: 20 !important;
        }
        #reading-pane .toolbar {
            height: 60px !important;
            min-height: 60px !important;
            border: none !important;
            border-top-left-radius: 20px !important;
            border-radius: 20px 0 0 0 !important;
            border-bottom: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
            background-color: color-mix(in srgb, var(--genio-surface) 90%, transparent) !important;
            backdrop-filter: blur(16px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
            padding-left: 18px !important;
            padding-right: 18px !important;
        }
        #reading-pane .article-content-scroll-wrapper {
            background-color: var(--genio-surface) !important;
            background-image: var(--genio-sheen), var(--genio-paper-grain) !important;
        }
        #reading-pane .article-header-container {
            max-width: 68ch;
            margin: 0 auto;
        }
        #reading-pane .article-header-container h2 {
            font-size: 28px !important;
            line-height: 1.28 !important;
            font-weight: 800 !important;
            color: var(--genio-ink) !important;
            margin-bottom: 8px !important;
        }
        #reading-pane .article-header-container .original-url {
            color: var(--genio-muted) !important;
            font-size: 12.5px !important;
            display: flex !important;
            gap: 12px !important;
            align-items: center !important;
        }
        #reading-pane .article-header-container .original-url a {
            color: var(--genio-accent) !important;
            text-decoration: none !important;
            font-weight: 600 !important;
        }
        #reading-pane .article-header-divider {
            border: 0 !important;
            height: 1px !important;
            background: color-mix(in srgb, var(--genio-muted) 12%, transparent) !important;
            margin: 18px auto 24px auto !important;
            max-width: 68ch !important;
        }
        #reading-pane .article-body-container {
            max-width: 68ch !important;
            margin: 0 auto !important;
            line-height: 1.75 !important;
            font-size: 17.5px !important;
            color: var(--genio-ink) !important;
        }
        #reading-pane .article-body-container h3 {
            font-size: 20px !important;
            font-weight: 750 !important;
            color: var(--genio-ink) !important;
            margin: 2em 0 0.6em 0 !important;
        }
        #reading-pane .article-body-container p {
            margin-bottom: 1.5em !important;
            color: var(--genio-ink) !important;
        }
        #reading-pane .article-body-container blockquote {
            border-left: 3px solid var(--genio-accent) !important;
            background: var(--genio-well) !important;
            margin: 1.8em 0 !important;
            padding: 12px 18px !important;
            border-radius: 0 var(--genio-radius-s) var(--genio-radius-s) 0 !important;
            font-style: italic !important;
            color: var(--genio-ink) !important;
        }

        /* Dark mode overrides for Reader - clean continuous top bar and rounded top-left shoulder */
        html[data-theme="dark"] #reading-pane {
            background-color: var(--genio-surface) !important;
            color: var(--genio-ink) !important;
            border-top-left-radius: 20px !important;
            border-radius: 20px 0 0 0 !important;
            border-left: 1px solid color-mix(in srgb, var(--genio-line) 40%, transparent) !important;
            box-shadow: -6px 0 28px rgba(0, 0, 0, 0.40) !important;
        }
        html[data-theme="dark"] #reading-pane .article-content-scroll-wrapper {
            background-color: var(--genio-surface) !important;
            background-image: var(--genio-sheen), var(--genio-reader-grain-dark) !important;
        }

        /* Appearance menu visible class & styling - Borderless Float */
        .appearance-dropdown.visible {
            display: block !important;
        }
        .appearance-dropdown {
            background-color: var(--genio-surface) !important;
            border: none !important;
            border-radius: var(--genio-radius-m) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
            color: var(--genio-ink) !important;
        }
        .omnivore-appearance-arrow {
            background-color: var(--genio-surface) !important;
            border: none !important;
            border-top: none !important;
            border-left: none !important;
        }
        .omnivore-label {
            color: var(--genio-ink) !important;
        }
        .omnivore-font-select {
            background-color: color-mix(in srgb, var(--genio-muted) 8%, var(--genio-surface)) !important;
            border: none !important;
            border-radius: var(--genio-radius-s) !important;
            color: var(--genio-ink) !important;
        }
        .omnivore-line {
            background-color: color-mix(in srgb, var(--genio-muted) 12%, transparent) !important;
        }
        .slider-side-text {
            color: var(--genio-muted) !important;
        }
        .slider-side-icon svg {
            stroke: var(--genio-muted) !important;
        }
        .omni-foot-btn {
            color: var(--genio-muted) !important;
        }
        .omni-foot-btn:hover {
            color: var(--genio-accent) !important;
        }

        /* Reader appearance themes */
        #reading-pane[data-reader-theme="sepia"] {
            --bg-reader-content: #fbf3e4;
            --genio-ink: #3b2a1a;
            --genio-muted: #6f5945;
            --genio-line: #e7dac7;
            --genio-well: #f4e9d5;
            background: #fbf3e4 !important;
            color: #3b2a1a !important;
        }
        #reading-pane[data-reader-theme="sepia"] .toolbar,
        #reading-pane[data-reader-theme="sepia"] .article-content-scroll-wrapper {
            background: #fbf3e4 !important;
        }
        #reading-pane[data-reader-theme="gray"] {
            --bg-reader-content: #f1f5f9;
            --genio-ink: #0f172a;
            --genio-muted: #475569;
            --genio-line: #cbd5e1;
            --genio-well: #e2e8f0;
            background: #f1f5f9 !important;
            color: #0f172a !important;
        }
        #reading-pane[data-reader-theme="gray"] .toolbar,
        #reading-pane[data-reader-theme="gray"] .article-content-scroll-wrapper {
            background: #f1f5f9 !important;
        }
        #reading-pane[data-reader-theme="dark"] {
            --bg-reader-content: #0b0f17;
            --genio-ink: #f8fafc;
            --genio-muted: #94a3b8;
            --genio-line: #1e293b;
            --genio-well: #162032;
            background: #0b0f17 !important;
            color: #f8fafc !important;
        }
        #reading-pane[data-reader-theme="dark"] .toolbar,
        #reading-pane[data-reader-theme="dark"] .article-content-scroll-wrapper {
            background: #0b0f17 !important;
        }

        /* Notes panel cards - Borderless Soft Float */
        .annotation-card {
            padding: 12px 14px;
            border: none !important;
            border-radius: var(--genio-radius-m) !important;
            background: var(--genio-surface) !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 3px 10px rgba(15, 23, 42, 0.03) !important;
            margin-bottom: 10px;
        }
        .annotation-quote {
            font-style: italic;
            color: var(--genio-ink);
            font-size: 13.5px;
            line-height: 1.45;
            margin-bottom: 8px;
            border-left: 3px solid var(--genio-accent);
            padding-left: 10px;
        }
        .annotation-note-text {
            color: var(--genio-ink);
            font-size: 13px;
            line-height: 1.45;
            margin-bottom: 8px;
        }
        .annotation-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--genio-muted);
            font-size: 11px;
        }
        .annotation-delete-btn {
            border: 0;
            background: transparent;
            color: var(--genio-muted);
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            transition: color .15s ease;
        }
        .annotation-delete-btn:hover {
            color: #ef4444;
        }

/* Compact pagination control. */
#loadMoreButton {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 18px auto 8px !important;
    padding: 0 !important;
    border: 1px solid var(--genio-line) !important;
    border-radius: 50% !important;
    background: var(--genio-surface) !important;
    color: var(--genio-accent) !important;
    box-shadow: var(--genio-shadow-card) !important;
    cursor: pointer !important;
}
#loadMoreButton:hover:not(:disabled) {
    border-color: var(--genio-accent) !important;
    background: var(--genio-well) !important;
}
#loadMoreButton[hidden] { display: none !important; }
#loadMoreButton i { font-size: 15px; line-height: 1; }
#loadMoreButton:disabled { position: relative; cursor: progress !important; }
#loadMoreButton:disabled i { visibility: hidden; animation: none; }
#loadMoreButton:disabled::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--genio-line-strong);
    border-top-color: var(--genio-accent);
    border-radius: 50%;
    animation: genio-reader-spin .8s linear infinite;
}

#main-pages-list .genio-chat-nav{padding:0}
#main-pages-list .genio-chat-nav a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:0 12px;color:inherit;text-decoration:none}
#main-pages-list .genio-chat-nav:hover{background:var(--genio-accent-soft);color:var(--genio-accent)}
/* Reserve identical slots for mixed Library/Inbox items, including videos. */
.articles-container:not(.main-column-narrowed) > .article-card {
    height: 376px !important; min-height: 376px !important; max-height: 376px !important;
    display: flex !important; flex-direction: column !important; box-sizing: border-box;
}
.articles-container > .article-card.detailed-card { padding: 0 !important; }
.articles-container:not(.main-column-narrowed) > .article-card .card-image-top {
    height: 136px !important; flex: 0 0 136px !important; padding-top: 0 !important;
}
.articles-container:not(.main-column-narrowed) > .article-card .card-content-wrapper {
    flex: 1 1 0 !important; min-height: 0 !important; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}
.articles-container:not(.main-column-narrowed) > .article-card .card-title-actions-row {
    display: flex; flex-direction: column; align-items: stretch; flex: 0 0 auto;
}
.articles-container:not(.main-column-narrowed) > .article-card .article-card-title {
    min-height: 42px !important; max-height: 42px !important; line-height: 21px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
}
.articles-container:not(.main-column-narrowed) > .article-card .card-actions-horizontal { height: 28px; flex-shrink: 0; }
.articles-container:not(.main-column-narrowed) > .article-card .article-card-excerpt {
    height: 37.5px !important; min-height: 37.5px !important; max-height: 37.5px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    flex-shrink: 0; overflow-wrap: anywhere;
}
.articles-container:not(.main-column-narrowed) > .article-card .library-card-labels { flex-wrap: nowrap; max-height: 22px; overflow: hidden; }
.articles-container:not(.main-column-narrowed) > .article-card :is(.article-card-meta-bottom, .article-card-meta) {
    margin-top: auto !important; height:36px; min-height:36px; box-sizing:border-box; padding-top:8px !important;
    display:flex; align-items:center; justify-content:space-between; gap:8px; border:none !important;
    flex-wrap: nowrap; white-space: nowrap; overflow: hidden; flex-shrink: 0;
}
.article-card :is(.article-card-url-display, .article-card-domain) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.article-card :is(.article-card-url-display, .article-card-domain), .feed-title-hamburger {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.source-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; line-height: 1; }
.source-badge :is(img, svg) { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
.source-badge [hidden] { display: none !important; }
.article-card .library-progress.completed {
    align-items: center; justify-content: center; flex: 0 0 auto;
    padding: 0; border: 0; background: transparent; color: #23855a;
    font-size: 14px; line-height: 1;
}
html[data-theme="dark"] .article-card .library-progress.completed { color: #69c98a; }

.youtube-video-container, .genio-video-frame { width:100%; aspect-ratio:16/9; height:auto; padding-bottom:0; }
.youtube-video-container iframe, .genio-video-frame iframe { width:100%; height:100%; border:0; }
.video-transcript-controls { display:flex; gap:12px; align-items:center; margin:12px 0 8px; font:13px/1.5 system-ui; }
.video-transcript-controls input[type="search"] { min-width:0; flex:1; border:1px solid var(--genio-line); border-radius:8px; padding:8px 10px; background:var(--genio-surface); color:var(--genio-ink); font:inherit; }
.video-transcript-controls label { white-space:nowrap; cursor:pointer; }
.video-transcript-controls input[type="checkbox"] { accent-color:var(--genio-accent); }
.video-transcript-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.video-transcript-actions button, .video-transcript-retry { padding:7px 12px; border:1px solid var(--genio-line); border-radius:8px; background:var(--genio-surface); color:var(--genio-ink); cursor:pointer; font:13px/1.4 system-ui; }
.video-transcript-status { display:block; font:12px/1.5 system-ui; color:var(--genio-muted); margin-bottom:8px; }
.video-transcript-lines { max-height:480px; overflow-y:auto; position:relative; padding:4px; }
#articleContent .genio-transcript-cue { display:flex; gap:14px; margin:0; padding:8px 10px; border-radius:7px; transition:background .15s; }
#articleContent .genio-transcript-cue[hidden] { display:none; }
.genio-transcript-time { flex:0 0 60px; font:12px/1.8 ui-monospace, monospace; color:var(--genio-accent); }
.genio-transcript-cue.is-playing { background:color-mix(in srgb, var(--genio-accent) 14%, transparent); }
.genio-transcript-unavailable { color:var(--genio-muted); }

/* Reader margins follow the current pane, including a genuinely edge-to-edge view. */
#reading-pane .article-content-scroll-wrapper,
#reading-pane.fullscreen .article-content-scroll-wrapper {
    box-sizing: border-box;
    padding-inline: var(--reader-side-margin, 10%);
}
#reading-pane :is(.article-header-container, .article-body-container, .article-header-divider, #articleContent) {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    overflow-wrap: anywhere;
}
#readerMarginValue { margin-left: auto; color: var(--genio-muted); font-size: 12px; white-space: nowrap; }
#reading-pane .article-header-container .original-url { flex-wrap: wrap; row-gap: 6px !important; }
#articleViewDate:empty, #articleViewReadTime:empty { display: none; }
html[data-theme="dark"] .reader-state-indicator { color: #e5b667; }
html[data-theme="dark"] .reader-state-notice[data-state="processing"] .reader-state-indicator { color: var(--genio-muted); }

body.reader-fullscreen #hamburger-menu,
body.reader-fullscreen #app #mainHeaderHamburgerBtn,
body.reader-fullscreen #app #reader-main-content #mainHeaderHamburgerBtn,
body.reader-fullscreen #app #reader-main-content #quick-nav-header {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.reader-fullscreen #reader-main-content { margin-left: 0 !important; width: 100% !important; }
html[data-theme] #reading-pane.fullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-width: 0;
    z-index: 1000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html[data-theme] #reading-pane.fullscreen .toolbar { border-radius: 0 !important; }
#reading-pane.fullscreen #closeArticleBtn { display: none !important; }
#reading-pane.reader-controls-in-toolbar #readerContextRail {
    position: static;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
#reading-pane.reader-controls-in-toolbar #readerContextRail .icon-btn { display: grid !important; }
#reading-pane.reader-controls-in-toolbar #readerContextRail .appearance-menu-container {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
}
#reading-pane.reader-controls-in-toolbar #readerContextRail .appearance-dropdown {
    top: calc(100% + 8px);
    right: 12px;
    left: auto;
    transform: none;
    max-width: calc(100vw - 24px);
}

/* Prompt drawer shares the toolbar and scrolls sideways when the reader is narrow. */
#reading-pane .toolbar { flex-wrap: nowrap; justify-content: flex-start; overflow: visible; }
#reading-pane .toolbar .toolbar-spacer { flex: 0; }
.reader-prompt-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 1 1 auto; min-width: 0; }
#reading-pane #readerPromptMenu {
    position: static;
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: var(--genio-well);
    box-shadow: none;
    white-space: nowrap;
    scrollbar-width: thin;
}
#reading-pane #readerPromptMenu .genio-prompt-option {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    height: 32px;
    padding: 5px 8px;
    gap: 6px;
}
#reading-pane #readerPromptMenu .genio-prompt-option > span:last-child { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#reading-pane #readerPromptButton { flex: 0 0 32px; }
#reading-pane .toolbar > :is(.icon-btn, .reader-document-actions, .reader-actions-wrap) { flex-shrink: 0; }
.genio-prompt-error { padding: 0 8px; color: var(--genio-danger, #c85644); }
#reading-pane .reader-actions-menu .reader-compact-action { display: none; }
@container reader (max-width: 640px) {
    #reading-pane .toolbar { gap: 2px; padding-inline: 6px !important; }
    #reading-pane #readerPromptMenu .genio-prompt-option > span:last-child { display: none; }
    #reading-pane .reader-document-actions { display: none !important; }
    #reading-pane .reader-actions-menu .reader-compact-action { display: flex; }
    #reading-pane #readerContextRail #toggleReadingStatusBtn { display: none !important; }
    #reading-pane.reader-controls-in-toolbar #readerContextRail { gap: 0; }
    #reading-pane.reader-controls-in-toolbar #readerContextRail #toggleReaderTocBtn { display: none !important; }
}