/* --- GLOBAL RESET --- */
:root {
    --glass-bg: rgba(8, 16, 28, 0.50);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-top: rgba(255, 255, 255, 0.22);
    --text-color: #e0e0e0;
    --accent: #fff;
}

body {
    background-color: #000;
    color: var(--text-color);
    font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0; padding: 0;
    overflow: hidden; height: 100vh; width: 100vw;
}

/* --- BACKGROUND VIDEO --- */
#my-video {
    position: fixed !important; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    z-index: -9999 !important;
}

/* --- MAIN CONTAINER --- */
.main-container {
    position: fixed; 
    bottom: 20px; right: 20px;
    width: 360px; max-width: 90vw;
    z-index: 100;
    display: flex; flex-direction: column; 
    gap: 12px;
    align-items: flex-end;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* --- WIDGET CARDS (Order 1) --- */
.widget-wrapper { 
    width: 100%; 
    display: flex; 
    justify-content: flex-end;
    order: 1; 
}

.widget {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-left-color: var(--glass-border-top);
    border-radius: 20px; padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    width: 100%; box-sizing: border-box;
    animation: widgetReveal 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.widget.hidden { display: none; }

h2 {
    margin: 0 0 10px 0; font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;
    display: flex; justify-content: space-between;
}

/* --- THE DOCK / APP BAR (Order 2) --- */
/* Ytre container for HELE app-baren */
.widget-controls {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    order: 2; 
}

/* Indre container for selve verktøy-knappene */
.app-bar-buttons {
    display: flex;
    gap: 12px;
    flex: 1; 
}

/* FELLES FROSTET GLASS-STYLING FOR ALLE KNAPPER I REKKEN */
.widget-controls button {
    background: rgba(0, 0, 0, 0.30);
    color: #fff; 
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 10px 14px; 
    cursor: pointer; 
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-radius: 10px;
    transition: all 0.2s; 
    font-family: inherit; 
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Verktøy-knappene fyller ut jevnt */
.app-bar-buttons button {
    flex: 1; 
}

/* Pop-out button: fixed width, doesn't grow with the others */
#btn-popout {
    flex: 0 0 auto;
    font-size: 1.1rem;
    padding: 8px 12px;
    opacity: 0.6;
}
#btn-popout:hover { opacity: 1; }

.widget-controls button:hover { 
    background: rgba(255, 255, 255, 0.15); 
    color: #fff; 
}

/* Aktiv knapp deaktiverer blur for å skille seg ut */
.app-bar-buttons button.active {
    background: #fff; color: #000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Gi SKJUL-knappen litt ekstra bredde på sidene slik den ser riktig proporsjonert ut */
.toggle-btn {
    padding: 10px 20px !important;
}

/* --- TABLET & LANDSCAPE OPTIMIZATION --- */
@media (max-width: 1000px) {
    .main-container { 
        bottom: 15px; 
        left: 15px; 
        right: 15px; 
        width: auto; 
        max-width: none;
        align-items: stretch;
    }
    .widget-controls button { 
        padding: 12px 14px; 
        font-size: 0.75rem;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.35);
        /* Disable blur on tablet — it renders async and causes a visible flash */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-shadow:
            0 0 4px rgba(0,0,0,1),
            1px  1px 0 rgba(0,0,0,0.9),
           -1px -1px 0 rgba(0,0,0,0.9),
            1px -1px 0 rgba(0,0,0,0.9),
           -1px  1px 0 rgba(0,0,0,0.9),
            0 2px 6px rgba(0,0,0,1);
    }
}

/* --- PHONE PORTRAIT OPTIMIZATION --- */
@media (max-width: 600px) {
    /* Button bar wraps to 2 rows of 3 */
    .app-bar-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }
    .app-bar-buttons button {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 0;
        min-height: 44px; /* WCAG 2.5.5 minimum touch target */
        font-size: 0.68rem;
        padding: 11px 10px;
        letter-spacing: 0.02em;
        /* Transparent fill on mobile — no backdrop-filter to avoid async blur flicker */
        background: transparent;
        border-color: rgba(255, 255, 255, 0.35);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-shadow:
            0 0 4px rgba(0,0,0,1),
            1px  1px 0 rgba(0,0,0,0.9),
           -1px -1px 0 rgba(0,0,0,0.9),
            1px -1px 0 rgba(0,0,0,0.9),
           -1px  1px 0 rgba(0,0,0,0.9),
            0 2px 6px rgba(0,0,0,1);
    }
    /* Stacking SKJUL button below the grid */
    .widget-controls {
        flex-wrap: wrap;
    }
    .toggle-btn {
        width: 100%;
        padding: 10px !important;
    }
    /* Prevent open widget card from fully obscuring the background video */
    .widget-wrapper {
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Compact modal */
    .modal-content {
        padding: 15px;
        width: 95%;
        max-height: 92vh;
        border-radius: 16px;
    }
    .modal-header-area {
        padding-right: 38px;
    }
    /* Smaller folder tiles */
    .folder-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .folder-item {
        padding: 13px 7px 12px;
    }
    /* Tighter image grid */
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
    }
    /* Lightbox nav: smaller, don't overlap image */
    .lb-nav {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
}

/* --- MODALS --- */
.modal {
    display: none; position: fixed; z-index: 5000; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(4,10,20,0.97); backdrop-filter: blur(10px);
    align-items: center; justify-content: center;
}
.modal-content {
    background: #0a1628;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px; padding: 25px; width: 90%; max-width: 1100px; max-height: 85vh;
    overflow-y: auto; position: relative;
    box-shadow: 0 28px 70px rgba(0,0,0,0.9);
}
.modal-header-area {
    margin-bottom: 18px;
    padding-right: 40px; 
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 12px;
}
.modal-title {
    margin: 0; font-size: 1.2rem; color: #fff; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
}
.close-btn {
    position: absolute; top: 14px; right: 14px;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent; border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.28); font-size: 18px; cursor: pointer; z-index: 10;
    line-height: 1; font-family: inherit;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}
.close-btn:hover  { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }
.close-btn:active { color: #fff; background: rgba(255,255,255,0.10); }

/* Folder Grid */
.folder-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px; margin-top: 18px;
}
.folder-item {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-top: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px; padding: 18px 10px 15px; text-align: center; cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.folder-item:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.14);
    border-top-color: rgba(255,255,255,0.25);
}
.folder-icon { font-size: 1.65rem; }
.folder-name {
    font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.6);
    letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.3; word-break: break-word;
}

/* Image Grid */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px; margin-top: 15px;
}
.gallery-item {
    position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.09); background: #000;
    transition: border-color 0.18s;
}
.gallery-item:hover { border-color: rgba(255,255,255,0.22); }
.gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gallery-item:hover .gallery-img { transform: scale(1.07); }
.score-badge {
    position: absolute; bottom: 4px; right: 4px;
    background: rgba(7,17,31,0.88); color: rgba(255,213,0,0.95);
    font-size: 0.68rem; padding: 2px 5px; border-radius: 5px; font-weight: 700;
    letter-spacing: 0.02em; border: 1px solid rgba(255,255,255,0.07);
}

/* Favorite heart button — admin only, shown as overlay on gallery images */
.fav-btn {
    position: absolute; top: 5px; left: 5px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); border: none; border-radius: 50%;
    color: rgba(255,255,255,0.45); font-size: 0.95rem; cursor: pointer;
    transition: color 0.15s, background 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    z-index: 3;
}
.fav-btn:hover          { background: rgba(0,0,0,0.75); color: #f472b6; }
.fav-btn:active         { transform: scale(0.88); }
.fav-btn.fav-active     { color: #f43f5e; background: rgba(0,0,0,0.70); }

/* Video List */
.simple-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.list-item {
    padding: 13px 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.list-item:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.24);
}

/* Back-link pill (← Tilbake inside gallery/archive modal title) */
.back-link {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 2px 10px 2px 7px;
    color: rgba(255,255,255,0.45);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
    margin-right: 6px;
}
.back-link:hover { background: rgba(255,255,255,0.09); color: #fff; }

/* Loading skeleton — shown while gallery.json is in flight */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 15px;
}
.skeleton-item {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 0.85; }
}

/* --- LIGHTBOX (FIXED ZOOM) --- */
#lightbox { 
    display: none; position: fixed; z-index: 6000; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.98); 
    align-items: center; justify-content: center; 
}
#lightbox.visible { display: flex; }
#lightbox-media-container { 
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center; 
    padding: 0; margin: 0;
}

/* STRICT IMAGE SIZING */
#lb-img, #lb-vid { 
    max-width: 90vw !important; 
    max-height: 90vh !important; 
    width: auto !important; 
    height: auto !important; 
    object-fit: contain; 
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    display: block;
    margin: auto;
}

.lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); color: white; border: none;
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.5rem; backdrop-filter: blur(5px); transition: 0.2s; z-index: 6010;
}
.lb-nav:hover { background: rgba(255,255,255,0.3); }
.lb-prev { left: 30px; } .lb-next { right: 30px; }
.lb-close {
    position: absolute; top: 12px; right: 12px;
    font-size: 2.5rem; cursor: pointer; z-index: 6020; color: #fff;
    background: none; border: none; padding: 12px; line-height: 1;
    min-width: 48px; min-height: 48px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
#lb-fav-btn {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0,0,0,0.50); color: rgba(255,255,255,0.55);
    border: 1.5px solid rgba(255,255,255,0.2);
    font-size: 1.4rem; cursor: pointer; z-index: 6020;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#lb-fav-btn:hover         { background: rgba(0,0,0,0.75); color: #f472b6; }
#lb-fav-btn.fav-active    { color: #f43f5e; background: rgba(180,20,60,0.25); border-color: rgba(244,63,94,0.5); }

/* --- PHONE LANDSCAPE OPTIMIZATION --- */
/* Pins the widget column right so the 320px canvas buffer isn't stretched to full screen width */
@media (orientation: landscape) and (max-height: 500px) {
    .main-container {
        left: auto;
        right: 15px;
        width: 320px;
        max-width: 48vw;
        align-items: flex-end;
    }
    .widget-wrapper {
        max-height: 82vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-bar-buttons {
        flex-wrap: nowrap;
    }
    .app-bar-buttons button {
        font-size: 0.62rem;
        padding: 9px 6px;
        letter-spacing: 0.01em;
    }
}

/* Tilbake button — shown only when a video is open in the lightbox */
.lb-back-btn {
    position: absolute; top: 14px; left: 14px;
    background: rgba(0,0,0,0.45); color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px; padding: 0 18px;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer; z-index: 6020;
    font-family: inherit;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    letter-spacing: 0.02em;
    min-height: 44px;
    display: flex; align-items: center; gap: 5px;
}
.lb-back-btn:active { background: rgba(255,255,255,0.18); }

/* --- KEYFRAME ANIMATIONS --- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes widgetReveal {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}



/*  */
/*  GALLERY FILTER PANEL  */
/*  */

/* Filter toggle button next to the modal title */
.fp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    color: rgba(255,255,255,0.75);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.fp-toggle-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.fp-toggle-btn.fp-toggle-active {
    background: rgba(129,140,248,0.18);
    border-color: rgba(129,140,248,0.5);
    color: #a5b4fc;
}

/* Outer wrapper  collapsible */
#gallery-filter-wrap {
    margin-bottom: 14px;
    animation: widgetReveal 0.22s ease both;
}

/* Panel card */
.gallery-filter-panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A row of filter groups */
.fp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* One labelled group of chips */
.fp-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fp-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
}

/* Chip row */
.fp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Individual filter chip */
.fp-chip {
    padding: 5px 11px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: rgba(255,255,255,0.65);
    font-family: inherit;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.fp-chip:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.fp-chip.fp-chip-on {
    background: rgba(129,140,248,0.22);
    border-color: rgba(129,140,248,0.55);
    color: #c7d2fe;
}
/* Chips whose filter value isn't present in the current album */
.fp-chip.fp-chip-unavailable {
    opacity: 0.28;
    filter: grayscale(0.5);
}
.fp-chip.fp-chip-unavailable.fp-chip-on {
    opacity: 0.6;  /* still noticeable if the user activated it anyway */
}

/* Date row */
.fp-row-date { flex-wrap: nowrap; align-items: flex-start; }
.fp-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fp-date-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 0.8rem;
    padding: 5px 9px;
    min-width: 130px;
    cursor: pointer;
}
.fp-date-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.fp-date-sep {
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
}

/* Clear button */
.fp-clear-btn {
    padding: 5px 12px;
    background: rgba(244,63,94,0.12);
    border: 1px solid rgba(244,63,94,0.3);
    border-radius: 20px;
    color: rgba(244,63,94,0.85);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.fp-clear-btn:hover { background: rgba(244,63,94,0.22); }

/* Result count label */
.fp-result-count {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    padding: 4px 4px 0;
    letter-spacing: 0.04em;
    min-height: 1.2em;
}

/*  Meta badge overlay on gallery thumbnails  */
/* Shows emoji badges () for golden hour / full moon / aurora images     */
.meta-badge {
    position: absolute;
    bottom: 26px;    /* just above score badge */
    right: 4px;
    background: rgba(0,0,0,0.65);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    pointer-events: none;
}

/*  Mobile tweaks for filter panel  */
@media (max-width: 600px) {
    .gallery-filter-panel { padding: 10px 12px 8px; gap: 8px; }
    .fp-row               { gap: 10px; }
    .fp-chip              { font-size: 0.68rem; padding: 5px 9px; }
    .fp-date-input        { font-size: 0.75rem; min-width: 110px; }
}

/* ─── CHAPTER PANEL (in-lightbox) ───────────────────────────────────────── */

/* Outer strip — gradient fade so the video isn't hard-blocked */
#lb-chapters-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: none; /* JS shows it when VTT loads */
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 10px 14px 12px;
    background: linear-gradient(to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.80) 55%,
        transparent     100%);
    z-index: 6015;
    min-height: 58px;
    box-sizing: border-box;
}

/* "Now playing" sticky label on the left */
.lb-chapter-now {
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.90);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    min-width: 80px;
    padding-right: 14px;
    border-right: 1px solid rgba(255,255,255,0.15);
    margin-right: 10px;
}

/* Scrollable chapter list */
#lb-chapters-list {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding: 2px 0;
    align-items: center;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-behavior: smooth;
}
#lb-chapters-list::-webkit-scrollbar { display: none; }

/* Individual chapter button / pill */
.lb-ch-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 20px;
    color: rgba(255,255,255,0.60);
    font-family: inherit;
    font-size: 0.80rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    letter-spacing: 0.02em;
}
.lb-ch-item:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.30);
}
/* Active (currently playing) chapter */
.lb-ch-item.lb-ch-active {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.12);
}
/* Notable weather/celestial events get a warm accent */
.lb-ch-item.lb-ch-notable {
    border-color: rgba(255,210,50,0.30);
    color: rgba(255,235,140,0.85);
}
.lb-ch-item.lb-ch-notable:hover {
    background: rgba(255,210,50,0.12);
    border-color: rgba(255,210,50,0.55);
    color: #ffe566;
}
.lb-ch-item.lb-ch-notable.lb-ch-active {
    background: rgba(255,210,50,0.15);
    border-color: rgba(255,210,50,0.65);
    color: #ffd700;
    box-shadow: 0 0 10px rgba(255,210,50,0.20);
}

/* Timestamp prefix inside each pill */
.lb-ch-time {
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.60;
    margin-right: 1px;
}
.lb-ch-label { font-size: 0.82rem; }

/* Mobile: smaller chapter pills */
@media (max-width: 600px) {
    .lb-chapter-now  { max-width: 120px; min-width: 60px; font-size: 0.78rem; }
    .lb-ch-item      { padding: 4px 9px; font-size: 0.73rem; }
    .lb-ch-time      { font-size: 0.67rem; }
}

/* ─── ARCHIVE HLS QUALITY SELECTOR ─────────────────────────────────────────── */
#lb-quality-btn {
    position: absolute;
    bottom: 76px;
    right: 16px;
    top: auto;
    z-index: 60;
    display: none;           /* shown via JS when HLS manifest is parsed */
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background: rgba(8,14,24,0.65);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 22px;
    padding: 6px 13px 6px 10px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(255,255,255,0.82);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    user-select: none;
    transition: background 0.18s, transform 0.15s;
}
#lb-quality-btn:hover {
    background: rgba(255,255,255,0.14);
    transform: scale(1.04);
}
#lb-quality-btn span:first-child { font-size: 14px; opacity: 0.75; }

#lb-quality-menu {
    position: absolute;
    bottom: 114px;
    right: 16px;
    top: auto;
    z-index: 60;
    background: rgba(8,14,24,0.90);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 14px;
    padding: 6px 0;
    min-width: 148px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 36px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#lb-quality-menu.open { display: flex; }

#lb-quality-menu .q-option {
    padding: 10px 18px;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.14s, color 0.14s;
    font-family: inherit;
}
#lb-quality-menu .q-option:hover  { background: rgba(255,255,255,0.09); color: #fff; }
#lb-quality-menu .q-option.active { color: #60a5fa; }

#lb-quality-menu .q-badge {
    display: inline-block;
    margin-left: 7px;
    font-size: 0.68rem;
    opacity: 0.50;
    font-weight: 400;
}