:root {
    --body-font: "Roboto", sans-serif;
    --body-color: #2B988F;
}

.main-color {
    color: #2B988F;
    margin-top: 4px;
    font-size: 95% !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    max-height: 350px;
}

h4 {
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 1.3rem;
}

/* =========================
   BOOK / MEDIA UI
========================= */

.book-store {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#clubTabsContent {
    min-height: 300px;
    overflow: visible;
}


.book {
    background: #fff;
}

.book-cell {
    display: flex;
    padding: 25px;
    height: 250px;
    width: 100%;
}

.book-photo {
    width: 100%;
    border-radius: 2px;
    box-shadow: -2px 6px 19px 0px #7f818e;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
}



    .book-photo:hover {
        transform: scale(1.03);
    }

.book-content {
    padding: 0 20px;
    overflow: hidden;
}

.book-title,
.book-author {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   HEADER / ALBUM
========================= */

/* Scoped to club dashboard only */
.book-store .album-cover,
.book-cell .album-cover {
    position: relative;
    margin-bottom: -50px;
    z-index: 10;
}


.album-cover-wrapper {
    overflow: hidden;
    border-radius: 8px;
    max-width: 280px;
    margin-left: -5px;
}

.album-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 0 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

    /* gradient layer */
    .album-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
        z-index: -1;
    }


/* =========================
   CLUB TABS
========================= */

#clubTabs {
    justify-content: space-between;
    border-bottom: none;
    background: #fff;
    margin-top: -90px;
    padding: 10px 20px;
}

    #clubTabs .nav-link {
        flex: 1;
        text-align: center;
        color: #585858;
        font-size: 13px;
        border-radius: 4px;
        transition: color .2s, background-color .2s;
    }

        #clubTabs .nav-link:hover {
            background-color: #f4f4f4;
            color: #2B988F;
        }

        #clubTabs .nav-link.active {
            color: #2B988F;
            font-weight: 600;
            position: relative;
        }

            #clubTabs .nav-link.active::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 10%;
                width: 80%;
                height: 4px;
                background-color: #2B988F;
                border-radius: 2px;
            }

/* =========================
   CHAT
========================= */

.chat-box,
.review-box,
.message-box {
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.chat-msg-own {
    flex-direction: row-reverse !important;
}

.msg-text {
    line-height: 1.65;
}

.msg-edited-mark {
    opacity: 0.45;
    font-size: 0.85em;
    margin-left: 2px;
    cursor: default;
}

    .chat-msg-own .msg-text {
        background: #DCEBFA !important;
    }

.chat-msg-other .msg-text {
    background: #f1f1f1 !important;
}

/* ── Inline chat message editor ── */
.msg-edit-wrap {
    width: 100%;
}

.msg-edit-quill-mount .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0 0;
    background: #f8f9fa;
    padding: 4px 8px;
    border-color: #d0d5dd;
}

.msg-edit-quill-mount .ql-container.ql-snow {
    border-radius: 0 0 8px 8px;
    border-color: #d0d5dd;
    font-size: 0.9rem;
}

.msg-edit-quill-mount .ql-editor {
    min-height: 52px;
    padding: 8px 10px;
}

.msg-edit-hint {
    font-size: 0.72rem;
    color: #adb5bd;
    padding: 4px 2px 0;
}

.msg-edit-hint kbd {
    font-size: 0.68rem;
    padding: 1px 4px;
    background: #f1f3f5;
    border: 1px solid #ced4da;
    border-radius: 3px;
    color: #495057;
}

.chat-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1rem 0;
    font-size: 0.8rem;
    color: #888;
}

    .chat-divider::before,
    .chat-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ccc;
    }

/* =========================
   QUEUE
========================= */

.queue-card:not(.add-to-queue-card) { cursor: pointer; }
.queue-card {
    box-shadow: 0 1px 4px rgba(25,25,60,0.06);
    border-radius: 10px;
    transition: box-shadow .14s, transform .13s;
}

    .queue-card:hover {
        z-index: 5;
        box-shadow: 0 0 0 1px rgba(41, 181, 168, 0.22), 0 4px 18px rgba(41, 181, 168, 0.16);
    }

.queue-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .14s, box-shadow .14s;
    z-index: 2;
}

    .queue-item:hover::after {
        border-color: rgba(41, 181, 168, 0.5);
        box-shadow: inset 0 0 16px rgba(41, 181, 168, 0.1);
    }

.queue-editing-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* =========================
   MEMBERS
========================= */

.member-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    background: #fff;
}

    .member-item.pending {
        background: #F8F9FA !important;
        border: 1px dashed #EBEBEB;
    }

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 0.65rem;
}

/* =========================
   BUTTONS
========================= */

.send-btn-theme {
    background-color: #2B988F !important;
    color: white !important;
}

    .send-btn-theme:hover {
        background-color: #17756D !important;
    }

/* =========================
   FOOTER
========================= */

footer {
    background-color: #0A0A0D;
    border-top: 1px solid #eaeaea;
    font-size: 0.85rem;
    border-radius: 0;
    margin-bottom: 0;
}

    footer a {
        color: white !important;
    }

/* =========================
   ANIMATIONS
========================= */

@keyframes waveMove {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 120px;
    }
}


/* =====================================================
   ARCHIVE NAV — MATCH FORUM PAGINATION
===================================================== */

/* --- Top nav wrapper: whole block is clickable --- */
.archive-top-nav-wrap {
    display: block;
    text-align: center;
    min-width: 120px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.archive-top-nav-wrap:hover {
    background: rgba(43, 152, 143, 0.07);
}
.archive-top-nav-wrap.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Pick-date eyebrow ("Mar 4, 2026") above the archive item title */
.archive-current-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #2B988F;
    margin-bottom: 2px;
}
.archive-current-eyebrow[hidden] {
    display: none !important;
}

/* Arrow button inside wrapper — circular, teal */
.archive-top-arrow-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* clicks handled by wrapper */
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.archive-top-nav-wrap:hover .archive-top-arrow-btn {
    background: #DEF1EF;
    border-color: rgba(43, 152, 143, 0.5);
}
.archive-top-arrow-btn .material-icons {
    font-size: 20px;
    line-height: 1;
}

/* --- Arrow button: keep original disabled state via JS toggling wrapper --- */
#archivePrevBtn,
#archiveNextBtn {
    /* no extra overrides needed — styled via .archive-top-arrow-btn */
}
#archivePrevBtn:disabled,
#archiveNextBtn:disabled {
    opacity: 0.4;
}

/* --- Album + artist labels under arrows --- */
#archivePrevLabel,
#archiveNextLabel {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #6b7280;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}
.archive-top-nav-wrap:hover #archivePrevLabel,
.archive-top-nav-wrap:hover #archiveNextLabel {
    color: #1f2937;
}

/* --- Dropdown styled like "active page" --- */
#archiveCycleSelect {
    min-height: 32px;
    padding: 7px 14px;
    border: 1px solid rgba(43, 152, 143, .35);
    background-color: transparent;
    color: #2B988F;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}


    /* Focus ring — soft, not Bootstrap blue */
    #archiveCycleSelect:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }

    /* Dropdown options (clean, readable) */
    #archiveCycleSelect option {
        color: #222;
        background: #fff;
        font-weight: 500;
    }


    #archiveAlbumHeader img {
        border-radius: 6px;
    }

.archive-tab-wrapper .border {
    background: #fafafa;
}

/* Bottom archive nav */
.archive-bottom-nav {
    padding: 6px 8px;
}

/* ── Bottom nav: whole block is the button ── */
.archive-bot-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    max-width: 50%;
}
.archive-bot-side--right {
    justify-content: flex-end;
    text-align: right;
}
.archive-bot-side:disabled {
    opacity: 0.3;
    pointer-events: none;
}
.archive-bot-side:hover:not(:disabled) {
    background: rgba(43, 152, 143, 0.06);
}
.archive-bot-arrow {
    font-size: 22px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.15s;
}
.archive-bot-side:hover:not(:disabled) .archive-bot-arrow {
    color: #2B988F;
}
.archive-bot-label {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.3;
    transition: color 0.15s;
}
.archive-bot-side:hover:not(:disabled) .archive-bot-label {
    color: #1f2937;
}


.archive-tab-wrapper h6 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================
   ARCHIVE REVIEW STATS — COMPACT + CLEAN
========================================= */

.archive-rating-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

/* Top row: stars + rating */
.archive-rating-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

    .archive-rating-main .stars {
        display: flex;
        gap: 1px;
        line-height: 1;
    }

    .archive-rating-main .material-icons {
        font-size: 14px; /* 🔑 smaller stars */
        color: #d0d0d0;
    }

        .archive-rating-main .material-icons.filled {
            color: #f5b301;
        }

    .archive-rating-main .rating-value {
        font-size: 0.78rem;
        font-weight: 600;
        color: #2B988F;
        margin-left: 2px;
    }

/* Second row: review count */
.archive-rating-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: #6b7280;
}

    .archive-rating-sub .material-icons {
        font-size: 13px;
        color: #1d6ad4; /* subtle purple */
    }

/* =========================================
   ARCHIVE ALBUM HEADER — STAR RATING
========================================= */

.archive-album-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
}

    .archive-album-rating .rating-count {
        font-size: 0.68rem;
        opacity: 0.85;
        white-space: nowrap;
    }


    .archive-album-rating .stars {
        display: flex;
        gap: 1px;
        line-height: 1;
    }

    .archive-album-rating .material-icons {
        font-size: 14px;
        color: #d0d0d0;
    }

        .archive-album-rating .material-icons.filled {
            color: #f5b301;
        }

    .archive-album-rating .rating-value {
        font-weight: 600;
        color: #2B988F;
        white-space: nowrap;
    }

    .archive-album-rating .rating-count {
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 0.68rem;
        color: #1d6ad4; /* purple accent */
    }

        .archive-album-rating .rating-count .material-icons {
            font-size: 13px;
        }

/* =========================================
   ARCHIVE RATING LOADING (INLINE)
========================================= */

.archive-rating-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #9aa0a6;
}

    .archive-rating-loading .spinner {
        width: 12px;
        height: 12px;
        border: 2px solid rgba(43, 152, 143, 0.25);
        border-top-color: #2B988F;
        border-radius: 50%;
        animation: archiveSpin 0.7s linear infinite;
    }

    .archive-rating-loading .loading-text {
        white-space: nowrap;
    }

@keyframes archiveSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Spotify Button (Archive)
   ========================= */
/* =========================================
   ARCHIVE PREVIEW ITEMS — TIGHT + CLEAN
========================================= */

.archive-preview-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #e6eaea;
}

    .archive-preview-item:last-child {
        border-bottom: none;
    }

.archive-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e5e7eb;
}

.archive-preview-body {
    flex: 1;
    min-width: 0;
}

.archive-preview-user {
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-preview-text {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   ARCHIVE CARDS — STICKY FOOTERS
========================================= */

/* Archive activity boxes: 3-col only at 1162px+, stacked below */
@media (max-width: 1161px) {
    #pane-archive .col-md-4 {
        width: 100%;
    }
}

.archive-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: none;
    border: none;
}

/* ── Archive summary dividers ── */

/* Wide (3 cols side-by-side): vertical dividers */
@media (min-width: 1162px) {
    .archive-summary-row .col-md-4:not(:last-child) .archive-card {
        border-right: 1px solid #e9ecef;
    }
}

/* Narrow (stacked): horizontal dividers */
@media (max-width: 1161px) {
    .archive-summary-row .col-md-4:not(:last-child) .archive-card {
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 18px;
    }
    .archive-summary-row .col-md-4:not(:first-child) .archive-card {
        padding-top: 18px;
    }
}

.arch-full-close {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 1.1rem;
    line-height: 1;
    color: #bbb;
    cursor: pointer;
    transition: color .15s;
}
.arch-full-close:hover { color: #555; }

.archive-card-body {
    flex-grow: 1;
    font-size: 0.85rem;
}

.archive-card-footer {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.68rem;
}

    .archive-card-footer a {
        color: #2B988F;
        font-weight: 600;
        text-decoration: none;
    }

        .archive-card-footer a:hover {
            text-decoration: underline;
        }

/* =========================================
   ARCHIVE FOOTER LINK — DISABLED
========================================= */

.archive-footer-link.disabled {
    color: #9aa0a6;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

/* =========================================
   ARCHIVE ALBUM HEADER — CLEAN SKELETON
========================================= */

.archive-album-header {
    position: relative;
}

    /* Lock layout so skeleton never jumps */
    .archive-album-header > .d-flex {
        min-height: 100px;
        align-items: center;
    }

/* COVER */
.archive-cover-wrap {
    width: 130px !important;
    height: 130px !important;
    position: relative;
    flex-shrink: 0;
}

.archive-cover-img {
    width: 130px !important;
    height: 130px !important;
    object-fit: cover;
    border-radius: 6px;
}

/* TEXT SKELETONS */
.archive-text-skeleton {
    height: 10px;
    border-radius: 4px;
    background: #e5e7eb;
    margin-bottom: 4px;
}

    .archive-text-skeleton.w-60 {
        width: 60%;
    }

    .archive-text-skeleton.w-50 {
        width: 50%;
    }

    .archive-text-skeleton.w-40 {
        width: 40%;
    }

    .archive-text-skeleton.w-30 {
        width: 30%;
    }

/* SHIMMER */
.shimmer {
    background: linear-gradient( 90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63% );
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* LOADING STATE */
.archive-album-header.is-loading .archive-cover-img {
    opacity: 0;
}

.archive-album-header.is-loading #archiveTitle,
.archive-album-header.is-loading #archiveArtist,
.archive-album-header.is-loading #archiveDates {
    visibility: hidden;
}

/* LOADED STATE */
.archive-album-header:not(.is-loading) .archive-cover-skeleton,
.archive-album-header:not(.is-loading) .archive-text-skeleton {
    display: none;
}

/* Prevent skeleton wrap jump on archive header */
.archive-album-header > .d-flex {
    flex-wrap: nowrap;
}

.archive-cover-skeleton {
    width: 82px;
    height: 82px;
    border-radius: 6px;
    background: #e5e7eb;
}

.archive-album-header:not(.is-loading) .archive-cover-skeleton {
    display: none;
}

/* =========================================
   ARCHIVE TEXT SKELETON — OVERLAY (NO JUMP)
========================================= */

.archive-text-wrap {
    position: relative;
    min-height: 56px; /* locks layout height */
}

.archive-text-skeleton-wrap {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.archive-album-header.is-loading .archive-text-skeleton-wrap {
    display: flex;
}

.archive-album-header.is-loading #archiveTitle,
.archive-album-header.is-loading #archiveArtist,
.archive-album-header.is-loading #archiveDates,
.archive-album-header.is-loading #archiveAlbumRating {
    visibility: hidden;
}

.archive-album-header.is-loading #archivePickerRow {
    display: none !important;
}

.archive-picker-skeleton {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.archive-picker-skeleton .arch-skel-line {
    margin-bottom: 0;
}

.archive-album-header.is-loading .archive-picker-skeleton {
    display: flex;
}

/* Rating shimmer line (stars placeholder) */
.archive-rating-skeleton {
    height: 8px;
    margin-top: 6px;
}

/* =========================================
   ARCHIVE — SPOTIFY SHIMMER REVEAL
========================================= */

.archive-spotify-wrap {
    position: relative;
    width: fit-content;
}

/* Real button */
.archive-spotify-btn {
    position: relative;
    z-index: 2;
    transition: opacity 0.25s ease, filter 0.35s ease;
}

/* Skeleton overlay */
.archive-spotify-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient( 110deg, rgba(29,185,84,0.25) 25%, rgba(29,185,84,0.4) 37%, rgba(29,185,84,0.25) 63% );
    background-size: 400% 100%;
    pointer-events: none;
    z-index: 3;
}

/* LOADING STATE */
.archive-album-header.is-loading .archive-spotify-btn {
    opacity: 0;
    filter: blur(6px);
}

.archive-album-header.is-loading .archive-spotify-skeleton {
    display: block;
    animation: shimmer 1.2s ease-in-out infinite;
}

/* LOADED STATE */
.archive-album-header:not(.is-loading) .archive-spotify-skeleton {
    display: none;
}

.archive-album-header:not(.is-loading) .archive-spotify-btn {
    opacity: 1;
    filter: blur(0);
}

/* =============================================
   ARCHIVE ALBUM HEADER — IMMERSIVE VINYL
============================================= */

.archive-album-header {
    background: #0f0f12;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
}

/* Blurred album art atmosphere — fills the background with the cover's mood */
.archive-album-header::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: var(--arch-bg-url, none);
    background-size: cover;
    background-position: center;
    filter: blur(45px) brightness(0.28) saturate(1.8);
    z-index: 0;
    transition: background-image 0.5s ease;
    pointer-events: none;
}

.arch-hero-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 26px;
    flex-wrap: nowrap;
}

/* Cover */
.archive-album-header .archive-cover-wrap {
    width: 170px !important;
    height: 170px !important;
}

.archive-album-header .archive-cover-skeleton {
    width: 170px !important;
    height: 170px !important;
    border-radius: 8px;
    background: rgba(255,255,255,0.07) !important;
}

.arch-cover-col {
    flex-shrink: 0;
}

/* Cover wrap needs overflow:hidden so the gradient clips to rounded corners */
.archive-album-header .archive-cover-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.arch-cover-img {
    width: 170px !important;
    height: 170px !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow:
        0 8px 40px rgba(0,0,0,0.75),
        0 2px 10px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.06);
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.arch-cover-img:hover {
    transform: scale(1.03) translateY(-3px);
    box-shadow:
        0 16px 50px rgba(0,0,0,0.85),
        0 4px 14px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.1);
}

/* Film/TV clubs: portrait poster art (2:3) instead of the square album cover.
   Header gets .archive-album-header--poster from archive.js. */
.archive-album-header--poster .archive-cover-wrap,
.archive-album-header--poster .archive-cover-skeleton,
.archive-album-header--poster .archive-cover-img,
.archive-album-header--poster .arch-cover-img {
    width: 150px !important;
    height: 225px !important;
}

.arch-info-col {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Cover + details row. The wrapper carries the side-by-side layout so the
   mobile badge/stats pill can sit on its own line above it; on desktop the
   wrapper is the only visible child of .arch-hero-wrap and just fills it. */
.arch-hero-cols {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Swipe-hint chevrons are a mobile-only affordance (see dash-mobile.css). */
.arch-swipe-hint { display: none; }

/* The copy-link button is an icon-only circle on desktop; its text label is
   only shown in the mobile hero's inline button row (see dash-mobile.css).
   (.arch-hero-detail / .arch-hero-actions are created only by the mobile
   reflow in archive.js, so they never appear in this desktop layout.) */
.arch-share-btn__label { display: none; }
/* Mobile-only share glyph — the desktop layout keeps .arch-share-btn__icon
   (the chain-link). dash-mobile.css swaps which of the two is shown. */
/* Two classes, not one: material-icons.css loads after this file and sets
   .material-icons { display: inline-block }, which beat the single-class
   rule on the tie — so desktop showed the link AND the share glyph. */
.arch-share-btn .arch-share-btn__icon--m { display: none; }

/* ARCHIVED badge — pill now holds the static label plus an optional
   "Add/Edit review" inline link separated by a thin divider. Flexed so
   both segments share the same height and vertical centring. */
.arch-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2B988F;
    background: rgba(43,152,143,0.12);
    border: 1px solid rgba(43,152,143,0.28);
    border-radius: 4px;
    padding: 2px 7px;
    line-height: 1.7;
    margin-bottom: 8px;
}
.arch-badge__label { display: inline-flex; }
.arch-badge__slot {
    display: inline-flex; align-items: center; gap: 6px;
}
.arch-badge__slot:empty { display: none; }
.arch-badge__divider {
    width: 1px; height: 0.8em;
    background: rgba(43,152,143,0.45);
}
.arch-badge__link {
    color: #2B988F;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.14em;
    transition: color 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.arch-badge__link-icon {
    font-size: 10px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* Material Icons ship with internal padding around the glyph; nudge
       up a hair so the optical centre lines up with the uppercase label
       (which sits slightly above its em box because of the line-height). */
    margin-top: -1px;
}
.arch-badge__link:hover,
.arch-badge__link:focus {
    color: #3ecac0; text-decoration: none;
    outline: none;
}

/* Title */
.arch-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f0f0f0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s;
    letter-spacing: -0.015em;
}

    .arch-title:hover { color: #2B988F; }

/* Artist */
.arch-artist {
    font-size: 0.88rem;
    color: #2B988F;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s;
    letter-spacing: 0.01em;
}

    .arch-artist:hover { color: #3ecac0; }

/* Mobile Add/Edit review CTA — a clean pill under the artist name, above
   the date/divider. Desktop uses the inline badge link instead, so this
   row is hidden at >=992px. Empty (no review action) collapses it. */
.arch-review-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.arch-review-cta-row:empty { display: none; }
.arch-review-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(94, 232, 224, 0.40);
    background: rgba(94, 232, 224, 0.12);
    color: #5ee8e0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.arch-review-cta:hover,
.arch-review-cta:focus-visible {
    background: rgba(94, 232, 224, 0.20);
    border-color: rgba(94, 232, 224, 0.65);
    color: #8ff5ef;
    outline: none;
}
.arch-review-cta .material-icons { font-size: 1.05rem; line-height: 1; }
@media (min-width: 992px) {
    .arch-review-cta-row { display: none; }
}

/* Subtle rule */
.arch-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 11px 0;
}

/* Meta pills */
.arch-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.arch-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71rem;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    line-height: 1.4;
}

.arch-pill-icon {
    font-size: 12px !important;
    opacity: 0.55;
    line-height: 1;
}

/* Gradient overlay — always present, not affected by display:none on picker row */
.arch-cover-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
    z-index: 2;
    pointer-events: none;
}

/* Picker row — sits on top of the gradient */
.arch-picker-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    color: #fff;
    z-index: 3;
}

.arch-picker-row img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.arch-picker-row .small {
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arch-picker-row a {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.15s;
}

    .arch-picker-row a:hover { color: #2B988F !important; }

/* Skeleton placeholder inside cover */
.arch-picker-skeleton-cover {
    display: none;
    position: absolute;
    bottom: 7px;
    left: 8px;
    right: 8px;
    height: 10px;
    border-radius: 4px;
}

.archive-album-header.is-loading .arch-picker-skeleton-cover {
    display: block;
}

/* Bottom row */
.arch-bottom-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.arch-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.75);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
}

.arch-share-btn .material-icons {
    font-size: 17px;
    pointer-events: none;
}

.arch-share-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
    transform: translateY(-1px);
}

.arch-share-btn:active {
    transform: translateY(0);
}

.arch-share-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

/* Glass tooltip */
.arch-share-btn::after {
    content: attr(data-tooltip-right);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.92);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 10;
}

/* Caret — triangle pointing left toward the button */
.arch-share-btn::before {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    width: 6px;
    height: 12px;
    background: rgba(255,255,255,0.20);
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 11;
}

.arch-share-btn:hover::after,
.arch-share-btn:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Rating */
.arch-rating-num {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.arch-rating-star {
    color: #f59e0b;
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 0 5px rgba(245,158,11,0.45));
}

.arch-rating-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.arch-rating-denom {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.25);
    margin-left: 2px;
}

.arch-rating-count {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.25);
    margin-left: 5px;
}

/* Spotify — ghost green on dark, fills on hover */
.arch-spotify-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(29,185,84,0.12);
    color: #1db954 !important;
    font-size: 0.77rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
    letter-spacing: 0.02em;
    border: 1px solid rgba(29,185,84,0.3);
}

    .arch-spotify-btn:hover {
        background: #1db954;
        color: #fff !important;
        transform: scale(1.04);
        box-shadow: 0 0 14px rgba(29,185,84,0.35);
    }

    .arch-spotify-btn i,
    .arch-spotify-btn .material-icons {
        font-size: 0.95rem;
        line-height: 1;
    }

/* Per-destination color variants for the archive external-link pill.
   The base .arch-spotify-btn already provides the green Spotify look;
   these overrides recolor it for film/book/etc. picks. */
/* TMDB uses the site's teal rather than TMDB's own blue, which stuck out
   against the dark archive header. */
.arch-spotify-btn.arch-ext-tmdb {
    background: rgba(52,216,199,0.12);
    color: #34d8c7 !important;
    border-color: rgba(52,216,199,0.3);
}
    .arch-spotify-btn.arch-ext-tmdb:hover {
        background: #2B988F;
        color: #fff !important;
        box-shadow: 0 0 14px rgba(43,152,143,0.4);
    }

.arch-spotify-btn.arch-ext-imdb {
    background: rgba(245,197,24,0.15);
    color: #f5c518 !important;
    border-color: rgba(245,197,24,0.35);
}
    .arch-spotify-btn.arch-ext-imdb:hover {
        background: #f5c518;
        color: #000 !important;
        box-shadow: 0 0 14px rgba(245,197,24,0.4);
    }

.arch-spotify-btn.arch-ext-gbooks {
    background: rgba(66,133,244,0.14);
    color: #4285f4 !important;
    border-color: rgba(66,133,244,0.3);
}
    .arch-spotify-btn.arch-ext-gbooks:hover {
        background: #4285f4;
        color: #fff !important;
        box-shadow: 0 0 14px rgba(66,133,244,0.35);
    }

.arch-spotify-btn.arch-ext-amazon {
    background: rgba(255,153,0,0.14);
    color: #ff9900 !important;
    border-color: rgba(255,153,0,0.3);
}
    .arch-spotify-btn.arch-ext-amazon:hover {
        background: #ff9900;
        color: #111 !important;
        box-shadow: 0 0 14px rgba(255,153,0,0.4);
    }

.arch-spotify-btn.arch-ext-generic {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.2);
}
    .arch-spotify-btn.arch-ext-generic:hover {
        background: rgba(255,255,255,0.18);
        color: #fff !important;
    }

/* Dark-mode shimmer for skeletons inside dark header */
.archive-album-header .shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0.11) 37%,
        rgba(255,255,255,0.05) 63%
    ) !important;
    background-size: 400% 100% !important;
}

/* Hide dynamic content during load */
.archive-album-header.is-loading .arch-meta-pills,
.archive-album-header.is-loading .arch-bottom-row,
.archive-album-header.is-loading .arch-badge,
.archive-album-header.is-loading .arch-divider {
    visibility: hidden;
}

/* === FORCE forum avatars to be perfectly circular === */
.forum-author img,
.forum-op-avatar {
    width: 56px;
    height: 56px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.forum-reactions {
    line-height: 1;
}

/* =====================================================
   QUILL CUSTOM TOOLBAR ICONS
===================================================== */

.ql-toolbar button.ql-emoji::before {
    content: "\f118";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #555;
}

.ql-toolbar button.ql-gif::before {
    content: "GIF";
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #555;
}

.ql-toolbar button.ql-tag::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-album::before {
    content: "\f51f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-film::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-book::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-actor::before {
    content: "\f508";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-director::before {
    content: "\f03d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-author::before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #555;
    line-height: 1;
}

.ql-toolbar button.ql-mention::before {
    content: "@";
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: #555;
    font-style: normal;
    font-family: inherit;
}

/* The film (\f008), actor (\f508) and director (\f03d) glyphs sit a hair lower
   within their line box than the other tag glyphs, so they read as misaligned in
   the toolbar. Nudge just those three up by 1px in the non-chat toolbars (chat
   has its own tuned rules above). Flip the sign if they end up sitting too high. */
.forum-quill-wrap .ql-toolbar button.ql-film::before,
.review-quill-wrap .ql-toolbar button.ql-film::before,
.msg-edit-quill-mount .ql-toolbar button.ql-film::before,
.forum-quill-wrap .ql-toolbar button.ql-actor::before,
.review-quill-wrap .ql-toolbar button.ql-actor::before,
.msg-edit-quill-mount .ql-toolbar button.ql-actor::before,
.forum-quill-wrap .ql-toolbar button.ql-director::before,
.review-quill-wrap .ql-toolbar button.ql-director::before,
.msg-edit-quill-mount .ql-toolbar button.ql-director::before {
    position: relative;
    top: -1px;
}

/* Forum + inline-edit + review Quill: override Quill's own specificity so the @ button aligns correctly */
.forum-quill-wrap .ql-toolbar button.ql-mention,
.msg-edit-quill-mount .ql-toolbar button.ql-mention,
.review-quill-wrap .ql-toolbar button.ql-mention {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    margin-top: 0;
}

.review-quill-wrap .ql-toolbar button.ql-mention {
    margin-top: -1px;
}

.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-gif,
.ql-toolbar button.ql-tag,
.ql-toolbar button.ql-album,
.ql-toolbar button.ql-film,
.ql-toolbar button.ql-book,
.ql-toolbar button.ql-actor,
.ql-toolbar button.ql-director,
.ql-toolbar button.ql-author,
.ql-toolbar button.ql-mention,
.ql-toolbar button.ql-spoiler {
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ql-toolbar button.ql-gif:hover::before,
.ql-toolbar button.ql-tag:hover::before,
.ql-toolbar button.ql-album:hover::before,
.ql-toolbar button.ql-film:hover::before,
.ql-toolbar button.ql-book:hover::before,
.ql-toolbar button.ql-actor:hover::before,
.ql-toolbar button.ql-director:hover::before,
.ql-toolbar button.ql-author:hover::before,
.ql-toolbar button.ql-mention:hover::before {
    color: #2B988F;
}

.ql-toolbar button.ql-spoiler:hover::after {
    color: #2B988F;
}




/* =========================
   Queue Header Actions
========================= */

.queue-header-actions {
    opacity: 0.65;
    margin-left: 10px;
}

.queue-header-btn {
    background: none;
    border: none;
    padding: 4px;
    color: #9aa0a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

    .queue-header-btn .material-icons {
        font-size: 15px;
    }

    .queue-header-btn:hover {
        color: #ffffff;
        opacity: 1;
        transform: translateY(-1px);
    }

    .queue-header-btn:active {
        transform: translateY(0);
    }

    .queue-header-btn:focus {
        outline: none;
    }

.show-more-members-btn, #openForumTab, #openReviewsTab, #openArchiveTab, #openQueueTab {
    display: block;
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2B988F;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(43, 152, 143, 0.25);
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}

.forum-sidebar-item {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .forum-sidebar-item:hover {
        background: rgba(43, 152, 143, 0.08);
    }

    .forum-sidebar-item.unread .fw-semibold {
        color: #2B988F;
    }

.forum-sidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}


.queue-expanded {
    width: 100%;
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    animation: expandFade 0.2s ease;
}

.queue-expanded-inner {
    font-size: 0.85rem;
}

.queue-tracklist {
    padding-left: 18px;
    margin-bottom: 6px;
}

@keyframes expandFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.album-info-shimmer {
    position: absolute;
    inset: 0;
    z-index: 10;
    /* CRITICAL */
    display: none;
    pointer-events: none;
}

    .album-info-shimmer.active {
        display: block;
        pointer-events: all;
    }


.shimmer-cover {
    width: 180px;
    height: 180px;
    border-radius: 12px;
    background: #eee;
    flex-shrink: 0;
}

.shimmer-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .5rem;
}

.shimmer-line {
    height: 14px;
    border-radius: 6px;
    background: #eee;
}

.shimmer {
    position: relative;
    overflow: hidden;
}

    .shimmer::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100% );
        animation: shimmer 1.3s infinite;
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.queue-genre-bubble {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 12px;
    font-size: 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8f6f4, #f5fbfa);
    color: #1f6f68;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(43,152,143,0.25), 0 1px 4px rgba(43,152,143,0.15);
}

.queue-explicit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    line-height: 1;
    letter-spacing: 0.05em;
}


.latest-review-widget {

}

.review-stars {
    letter-spacing: 1px;
    font-size: 0.9em;
}

.review-comment p {
    margin: 0;
}


.queue-edit-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: rgba(43, 152, 143, 0.08);
    border: 1px solid rgba(43, 152, 143, 0.35);
    border-radius: 8px;
    color: #1e6f68;
}

    .queue-edit-notice .material-icons {
        font-size: 22px;
        color: #2b988f;
    }

.queue-edit-notice-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

    .queue-edit-notice-text span {
        font-size: 0.85rem;
        opacity: 0.85;
    }


.tab-section-header {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 18px 0 14px;
    position: relative;
    display: inline-block;
}


/* =========================================
   TAB SECTION HEADERS SYSTEM
========================================= */

h4 {
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 1.3rem;
}

/* Base class */
.tab-section-header {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 18px 0 14px;
    position: relative;
    display: inline-block;
}

    /* 1 — Underline Accent */
    .tab-section-header.style-1 {
        color: #2B988F;
        padding-bottom: 6px;
    }

        .tab-section-header.style-1::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 42px;
            height: 4px;
            background: #2B988F;
            border-radius: 4px;
        }

    /* 2 — Faded Divider Lines */
    .tab-section-header.style-2 {
        text-align: center;
        width: 100%;
    }

        .tab-section-header.style-2::before,
        .tab-section-header.style-2::after {
            content: "";
            display: inline-block;
            width: 40%;
            height: 1px;
            background: linear-gradient(to right, transparent, #ccc, transparent);
            vertical-align: middle;
            margin: 0 10px;
        }

    /* 3 — Soft Glow */
    .tab-section-header.style-3 {
        color: #2B988F;
        text-shadow: 0 2px 6px rgba(43,152,143,0.35);
    }

    /* 4 — Badge Label */
    .tab-section-header.style-4 {
        color: #2B988F;
        font-size: 1.6rem;
    }

    /* 5 — Gradient Text */
    .tab-section-header.style-5 {
        background: linear-gradient(90deg, #2B988F, #5bd3c7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* 6 — Left Accent Line */
    .tab-section-header.style-6 {
        padding-left: 14px;
    }

        .tab-section-header.style-6::before {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            height: 22px;
            width: 4px;
            background: #2B988F;
            border-radius: 4px;
        }

    /* 7 — Card Label */
    .tab-section-header.style-7 {
        background: #f5fcfb;
        border: 1px solid #dcefed;
        padding: 8px 12px;
        border-radius: 8px;
    }

    /* 8 — Animated Underline */
    .tab-section-header.style-8 {
        padding-bottom: 4px;
    }

        .tab-section-header.style-8::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 3px;
            background: #2B988F;
            transition: width .3s ease;
        }

        .tab-section-header.style-8:hover::after {
            width: 60%;
        }

    /* 9 — Icon Header */
    .tab-section-header.style-9 {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .tab-section-header.style-9 .material-icons {
            font-size: 22px;
            color: #2B988F;
        }

    /* 10 — Elevated Shadow Title */
    .tab-section-header.style-10 {
        color: #2B988F;
        text-shadow: 0 1px 0 white, 0 3px 6px rgba(0,0,0,0.12);
    }


/* =====================================================
   ARCHIVE DROPDOWN ACTION BUTTONS
===================================================== */

.archive-dropdown-row {
    min-height: 60px;
}

#archiveIconRow {
    position: relative;
    width: fit-content;
    margin: 14px auto 0;   /* space between the buttons and the nav row above */
}




.archive-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.archive-action-label {
    display: none;
}

    .archive-action-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        pointer-events: none; /* IMPORTANT: tooltips + hover trigger on the button, not the icon span */
    }


    .archive-action-btn:hover {
        background-color: #DEF1EF;
        border-color: rgba(43, 152, 143, .5);
        transform: translateY(-1px);
    }

    .archive-action-btn:active {
        transform: translateY(0);
    }

    .archive-action-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }

/* =====================================================
   ARCHIVE SEARCH EXPAND
===================================================== */

.archive-dropdown-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
}

.archive-dropdown-row {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.archive-search-overlay {
    /* Now lives inside #archiveIconRow (position:relative), covers it fully */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

    .archive-search-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .archive-search-overlay > .d-flex {
        width: 60%;
        max-width: 420px;
        background: #fff;
        border-radius: 30px;
        padding: 0 8px;
        transition: width 0.25s ease;
    }

    .archive-search-overlay:not(.active) > .d-flex {
        width: 0;
        overflow: hidden;
    }



/* Smooth input styling */
#archiveSearchInput {
    flex: 1;
    border: 1px solid rgba(43, 152, 143, .35);
    font-size: 0.9rem;
}

    #archiveSearchInput:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
    }


/* =========================================
   ARCHIVE SEARCH RESULTS
========================================= */

.archive-search-input-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
}

.archive-search-results {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(43,152,143,.25);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 260px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

    .archive-search-results.active {
        display: block;
    }

.archive-search-item {
    display: flex;
    text-align: left;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .archive-search-item:hover,
    .archive-search-item.active {
        background: rgba(43,152,143,.08);
    }

    .archive-search-item img {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0;
    }

.archive-search-meta {
    flex: 1;
    min-width: 0;
}

.archive-search-title {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-search-artist {
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   ARCHIVE CALENDAR PANEL (expand-down)
===================================================== */

.archive-calendar-panel {
    margin-top: 10px;
    background: #fff;
    border: 1px solid rgba(43,152,143,.18);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    padding: 12px;
}

.archive-calendar-inner {
    max-width: 520px;
    margin: 0 auto;
}

.archive-calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.archive-cal-month-title {
    font-weight: 700;
    color: #2B988F;
    letter-spacing: .01em;
}

.archive-cal-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #dbe7e6;
    background: #fff;
    color: #2B988F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

    .archive-cal-nav-btn .material-icons {
        font-size: 20px;
        line-height: 1;
    }

    .archive-cal-nav-btn:hover {
        background-color: #DEF1EF;
        border-color: rgba(43, 152, 143, .5);
        transform: translateY(-1px);
    }

    .archive-cal-nav-btn:disabled {
        opacity: 0.45;
        pointer-events: none;
        transform: none;
    }

.archive-calendar-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.archive-cal-dow {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.archive-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.archive-cal-blank {
    height: 36px;
}

.archive-cal-day {
    height: 36px;
    border-radius: 10px;
    border: 1px solid #eef2f1;
    background: #fff;
    color: #111827;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .12s ease, box-shadow .14s ease, background-color .15s ease, border-color .15s ease;
}

    .archive-cal-day.has-pick {
        background: rgba(43,152,143,.08);
        border-color: rgba(43,152,143,.20);
        color: #1f6f68;
        cursor: pointer;
    }

        .archive-cal-day.has-pick:hover {
            background: rgba(43,152,143,.14);
            border-color: rgba(43,152,143,.35);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0,0,0,.06);
        }

        .archive-cal-day.has-pick.is-active {
            background: #2B988F;
            border-color: #2B988F;
            color: #fff;
            box-shadow: 0 8px 18px rgba(43,152,143,.25);
        }

    .archive-cal-day.no-pick {
        opacity: 0.35;
        cursor: default;
    }

/* =====================================================
   ARCHIVE RANDOM SPIN
========================================= */


.archive-action-btn.spinning .material-icons {
    animation: archiveDiceSpin 0.18s ease;
}

@keyframes archiveDiceSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

/* =====================================================
   ARCHIVE COPY LINK TOAST
===================================================== */

.archive-copy-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #1e2a29;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-copy-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


.archive-cal-day {
    position: relative;
}

.archive-cal-day-number {
    position: relative;
    z-index: 1;
}

.archive-cal-avatar {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    z-index: 2;
}


.archive-calendar-loading {
    height: 220px;
    border-radius: 12px;
}

    .archive-calendar-loading.shimmer {
        background: linear-gradient( 90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63% );
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite linear;
    }

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.archive-cal-tooltip {
    position: absolute;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 9999;
}

    .archive-cal-tooltip.visible {
        opacity: 1;
        visibility: visible;
    }

#archivePrevBtn.disabled,
#archiveNextBtn.disabled {
    opacity: 0.5;
    pointer-events: none;
}


/* =====================================================
   ARCHIVE FILTER PANEL
===================================================== */

.archive-filter-panel {
    margin-top: 12px;
    animation: archiveFilterSlide .18s ease;
}

@keyframes archiveFilterSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inner card */
.archive-filter-inner {
    border: 1px solid rgba(43,152,143,.18);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.archive-filter-count {
    font-size: 0.8rem;
    color: #2B988F;
    font-weight: 600;
    min-height: 1.2em;
    transition: opacity .15s;
}
.archive-filter-count.is-loading { opacity: .4; }

/* ── Year dual-range slider ── */
.arch-year-slider-wrap { width: 100%; padding-top: 4px; }
.arch-year-labels {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 600;
    color: #2B988F;
    margin-bottom: 6px;
}
.arch-year-track-wrap {
    position: relative;
    height: 24px;          /* room for the thumbs */
    margin: 4px 0;
}
.arch-year-track-wrap::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: #e2e8f0;
    border-radius: 2px;
}
.arch-year-track-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #2B988F;
    border-radius: 2px;
    pointer-events: none;
}
.arch-year-range {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
    margin: 0;
    padding: 0;
}
.arch-year-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2B988F;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
    transition: transform .1s;
}
.arch-year-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.arch-year-range::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2B988F;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    pointer-events: all;
}

    /* Section labels */
    .archive-filter-inner .fw-semibold {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #6b7280;
    }

/* Dropdown button */
#archiveUserDropdownBtn {
    border: 1px solid rgba(43,152,143,.35);
    background: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2B988F;
    border-radius: 8px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    #archiveUserDropdownBtn:hover {
        border-color: #2B988F;
    }

    #archiveUserDropdownBtn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,.25);
    }

/* Dropdown menu */
#archiveUserDropdownMenu {
    border-radius: 10px;
    border: 1px solid rgba(43,152,143,.18);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    padding: 10px 12px;
    max-height: 220px;
    overflow-y: auto;
}

/* Checkbox styling */
.archive-user-filter {
    cursor: pointer;
}

    .archive-user-filter:checked {
        background-color: #2B988F;
        border-color: #2B988F;
    }

#archiveUserDropdownMenu .form-check {
    margin-bottom: 6px;
    font-size: 0.82rem;
}

/* =========================================
   FILTER SELECTS — MATCH DROPDOWN STYLE
========================================= */

#archiveFilterRating {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid rgba(43,152,143,.35);
    background-color: #fff;
    color: #2B988F;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    padding: 6px 36px 6px 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    background-image: url("data:image/svg+xml,%3Csvg fill='%232B988F' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

    #archiveFilterRating:hover { border-color: #2B988F; }

    #archiveFilterRating:focus {
        outline: none;
        border-color: #2B988F;
        box-shadow: 0 0 0 3px rgba(43,152,143,.25);
    }

    #archiveFilterRating option { color: #111827; }

/* Year range inputs */
#archiveYearFrom,
#archiveYearTo {
    border: 1px solid rgba(43,152,143,.35);
    border-radius: 8px;
    color: #2B988F;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 8px;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
    -moz-appearance: textfield;
}
#archiveYearFrom::-webkit-inner-spin-button,
#archiveYearTo::-webkit-inner-spin-button { display: none; }
#archiveYearFrom:focus,
#archiveYearTo:focus {
    outline: none;
    border-color: #2B988F;
    box-shadow: 0 0 0 3px rgba(43,152,143,.25);
}


/* =========================================
   ARCHIVE FILTER ACTION BUTTONS
========================================= */

#archiveApplyFiltersBtn,
#archiveClearFiltersBtn {
    min-height: 34px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === APPLY (Primary) === */
#archiveApplyFiltersBtn {
    background-color: #2B988F;
    border: 1px solid #2B988F;
    color: #ffffff;
}

    #archiveApplyFiltersBtn:hover {
        background-color: #17756D;
        border-color: #17756D;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(43,152,143,0.25);
    }

    #archiveApplyFiltersBtn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    #archiveApplyFiltersBtn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,0.25);
    }

/* === CLEAR (Ghost) === */
#archiveClearFiltersBtn {
    background-color: transparent;
    border: 1px solid rgba(43,152,143,.35);
    color: #2B988F;
}

    #archiveClearFiltersBtn:hover {
        background-color: #DEF1EF;
        border-color: #2B988F;
        transform: translateY(-1px);
    }

    #archiveClearFiltersBtn:active {
        transform: translateY(0);
    }

    #archiveClearFiltersBtn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,0.25);
    }


/* Active filter button (icon row) */
#archiveFilterBtn.active {
    background-color: #DEF1EF;
    border-color: rgba(43, 152, 143, .6);
}

/* Small responsive tightening */
@media (max-width: 768px) {

    .archive-filter-inner .row > div {
        margin-bottom: 12px;
    }

    #archiveUserDropdownMenu {
        max-height: 180px;
    }

    /* Quill chat compose — mobile fixes */
    .chat-quill-wrap {
        width: auto; /* override Bootstrap w-100 which causes overflow in flex row */
        min-width: 0;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow,
    .chat-quill-input.ql-container.ql-snow,
    .chat-send-bar {
        margin-left: 0;
    }
    .chat-quill-wrap::before,
    .chat-quill-wrap::after {
        display: none;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 6px;
        scrollbar-width: none;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow::-webkit-scrollbar {
        display: none;
    }
    .chat-quill-wrap .ql-toolbar.ql-snow .ql-formats {
        display: inline-flex;
        vertical-align: middle;
    }
}


/* Filter has active filters (ON state) */
#archiveFilterBtn.has-active-filters {
    background-color: #2B988F;
    border-color: #2B988F;
    box-shadow: 0 0 0 2px rgba(43,152,143,0.25);
    color: #ffffff;
}

    #archiveFilterBtn.has-active-filters .material-icons {
        color: #ffffff;
    }



/* =========================
   ARCHIVE SEARCH RESULTS
========================= */

.archive-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 6px 0;
    z-index: 50;
}

/* Individual Item */
.archive-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .archive-search-item:hover,
    .archive-search-item.active {
        background: rgba(0,0,0,0.04);
    }

    /* Album Cover */
    .archive-search-item img {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0;
    }

/* Meta Wrapper */
.archive-search-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* required for text ellipsis */
}

/* Album Title */
.archive-search-title-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Artist Name */
.archive-search-artist-link {
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .archive-search-artist-link:hover {
        color: #000;
    }

.album-tab {
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(43,152,143,.25);
    background: #ffffff;
    color: #6b7280;
    transition: all .18s ease;
}

.album-tab + .album-tab {
    margin-left: 8px;
}

.album-tab:hover {
    border-color: #2B988F;
    color: #2B988F;
    transform: translateY(-1px);
}

.album-tab.active-tab {
    background: #f0fbfa;
    border-color: #2B988F;
    color: #2B988F;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* =========================================
   CLUB TAB — ARCHIVE STYLE MATCH
========================================= */

#queueListView .list-group-item {
    border-bottom: 1px solid #e6eaea;
}

    #queueListView .list-group-item:last-child {
        border-bottom: none;
    }

#queueListView img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#queueListView .fw-semibold {
    font-size: 0.92rem;
}

#queueListView .small.text-muted {
    font-size: 0.75rem;
}

#queueListView .archive-rating-sub {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* =========================
   CLUB TAB — QUEUE VIEW SWITCHER (List / Calendar)
========================= */

.queue-view-switcher {
    gap: 10px;
}

.queue-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 7px 12px;
    border: 1px solid rgba(43,152,143,.25);
    background: #ffffff;
    color: #6b7280;
    transition: transform .14s ease, box-shadow .18s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}

    .queue-view-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        color: #6b7280;
        transition: color .15s ease;
    }

    .queue-view-btn:hover {
        border-color: #2B988F;
        color: #2B988F;
        background: rgba(43,152,143,.06);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
    }

        .queue-view-btn:hover .material-icons {
            color: #2B988F;
        }

    .queue-view-btn.active {
        background: #f0fbfa;
        border-color: #2B988F;
        color: #2B988F;
    }

        .queue-view-btn.active .material-icons {
            color: #2B988F;
        }

/* =========================================
   CLUB QUEUE VIEW SWITCHER (CLEAN STYLE)
========================================= */

.queue-view-switcher {
    gap: 10px;
}

.queue-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    border: 1px solid rgba(43,152,143,.25);
    background: #ffffff;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all .18s ease;
    cursor: pointer;
}

    .queue-view-btn .material-icons {
        font-size: 18px;
        line-height: 1;
        transition: transform .18s ease;
    }

    /* Hover */
    .queue-view-btn:hover {
        border-color: #2B988F;
        color: #2B988F;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.06);
    }

        .queue-view-btn:hover .material-icons {
            transform: scale(1.05);
        }

    /* Active */
    .queue-view-btn.active {
        background: #f0fbfa;
        border-color: #2B988F;
        color: #2B988F;
        box-shadow: 0 8px 18px rgba(43,152,143,.18);
    }

        /* Active icon slight pop */
        .queue-view-btn.active .material-icons {
            transform: scale(1.08);
        }

    /* Click press */
    .queue-view-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    /* Remove default focus outline */
    .queue-view-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(43,152,143,.25);
    }

/* =========================================
   UPCOMING QUEUE — ZEBRA STRIPING
========================================= */

#queueListView .list-group-item:nth-child(odd) {
    background: #ffffff;
}

#queueListView .list-group-item:nth-child(even) {
    background: #f9fbfb; /* ultra-light teal tint */
}

/* Keep hover stronger than zebra */
#queueListView .list-group-item:hover {
}

/* =========================================
   QUEUE VIEW PANEL VISIBILITY CONTROL
========================================= */

.queue-view-panel {
    display: none;
}

    .queue-view-panel.is-active {
        display: block;
    }

/* =========================================
   CLUB CALENDAR (Isolated Namespace)
   - Cover preview in cells
   - Tooltip (custom)
   - Hover pop card
   - Gradient pick indicator
   - Month transitions
========================================= */

.club-cal-panel {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.06);
}

.club-cal-inner {
    width: 100%;
}

.club-cal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.club-cal-month-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    color: #111;
}

.club-cal-nav-btn {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .club-cal-nav-btn:hover {
        background: rgba(0,0,0,0.06);
        transform: translateY(-1px);
    }

.club-cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10px;
}

.club-cal-dow {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(0,0,0,0.45);
    padding: 6px 0;
    letter-spacing: 0.4px;
}

.club-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    will-change: transform, opacity;
}

/* Month transitions */
.club-cal-anim-out-prev {
    animation: clubCalOutPrev 0.18s ease forwards;
}

.club-cal-anim-out-next {
    animation: clubCalOutNext 0.18s ease forwards;
}

.club-cal-anim-in-prev {
    animation: clubCalInPrev 0.18s ease forwards;
}

.club-cal-anim-in-next {
    animation: clubCalInNext 0.18s ease forwards;
}

@keyframes clubCalOutPrev {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(14px);
    }
}

@keyframes clubCalOutNext {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-14px);
    }
}

@keyframes clubCalInPrev {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes clubCalInNext {
    from {
        opacity: 0;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.club-cal-blank {
    height: 76px;
}

.club-cal-day {
    position: relative;
    height: 76px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fafafa;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    overflow: hidden;
}

    .club-cal-day:hover,
    .club-cal-day:focus {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
        outline: none;
    }

.club-cal-day-number {
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 0.74rem;
    font-weight: 800;
    color: rgba(0,0,0,0.55);
    z-index: 3;
}

/* In-cell album cover preview */
.club-cal-day-avatar {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    border: 2px solid #fff;
    z-index: 3;
}

.club-cal-day-status {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    color: #fff;
    background: #2B988F;
}

.club-cal-missing-pick {
    background: #fff5f5;
    border-color: #e11d48;
}

    .club-cal-has-pick.club-cal-missing-pick::before {
        background: radial-gradient(120px 90px at 18% 78%, rgba(225,29,72,0.20), rgba(255,255,255,0) 62%), linear-gradient(135deg, rgba(225,29,72,0.14), rgba(255,255,255,0) 60%);
    }

    .club-cal-has-pick.club-cal-missing-pick::after {
        background: linear-gradient(90deg, #e11d48, #f43f5e, #fb7185);
    }

    .club-cal-missing-pick .club-cal-day-status {
        background: #e11d48;
    }

/* Pick state */
.club-cal-has-pick {
    background: #ffffff;
    border-color: rgba(43,152,143,0.55);
}

    /* Gradient pick indicator (top wash + bottom stripe) */
    .club-cal-has-pick::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120px 90px at 18% 78%, rgba(43,152,143,0.22), rgba(255,255,255,0) 62%), linear-gradient(135deg, rgba(43,152,143,0.18), rgba(255,255,255,0) 60%);
        z-index: 1;
        pointer-events: none;
    }

    .club-cal-has-pick::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 7px;
        height: 6px;
        border-radius: 99px;
        background: linear-gradient(90deg, #2B988F, #29B5A8, #1A659E);
        opacity: 0.95;
        z-index: 2;
        pointer-events: none;
    }

/* No pick state */
.club-cal-no-pick {
    background: #f3f3f3;
    color: rgba(0,0,0,0.45);
    cursor: not-allowed;
    box-shadow: none;
}


/* =========================================
   Hover Pop Card
========================================= */
.club-cal-hovercard {
    position: fixed;
    z-index: 99991;
    width: 320px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

    .club-cal-hovercard.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: none;
    }

.club-cal-hovercard-inner {
    display: flex;
    gap: 12px;
    padding: 12px;
    align-items: center;
}

.club-cal-hovercard-cover {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-color: #e9e9e9;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    flex: 0 0 auto;
}

.club-cal-hovercard-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.club-cal-hovercard-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: rgba(0,0,0,0.65);
}

.club-cal-hovercard-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.club-cal-hovercard-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #111;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-cal-hovercard-artist {
    margin-top: 4px;
    font-weight: 650;
    font-size: 0.84rem;
    color: rgba(0,0,0,0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-cal-hovercard-date {
    margin-top: 8px;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 750;
    color: rgba(0,0,0,0.55);
    background: rgba(43,152,143,0.10);
    border: 1px solid rgba(43,152,143,0.20);
    padding: 4px 8px;
    border-radius: 999px;
}

.club-cal-week-active {
    background: linear-gradient( to bottom, rgba(41, 181, 168, 0.18), rgba(41, 181, 168, 0.08) );
    box-shadow: inset 0 0 0 1px rgba(41,181,168,0.35);
}

/* =========================
   UPCOMING ROTATION STATUS
========================= */

.rt-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: .4px;
}

.rt-next-up {
    background: linear-gradient(90deg,#2B988F,#29B5A8);
    color: #fff;
}

.rt-on-deck {
    background: rgba(43,152,143,.1);
    border: 1px solid rgba(43,152,143,.4);
    color: #2B988F;
}

.rt-countdown {
    font-weight: 600;
    color: #88231D;
}


/* =========================
/* =========================
   FUTURE PICKS — CENSOR MODES (CLEAN SYSTEM)
========================= */

/*
|--------------------------------------------------------------------------
| BASE WRAPPER (no visual effect by default)
|--------------------------------------------------------------------------
*/

.rt-censor-wrap {
    position: relative;
    border-radius: 10px;
}

/*
|--------------------------------------------------------------------------
| MODE 4 — Hover Reveal (Interactive)
|--------------------------------------------------------------------------
*/

.rt-censor-hover .rt-censor-wrap > * {
    opacity: 0;
    transition: opacity .25s ease;
}

.rt-censor-hover:hover .rt-censor-wrap > * {
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Live Badge
|--------------------------------------------------------------------------
*/

.rt-live {
    background: linear-gradient(90deg,#1A659E,#2B988F);
    color: #fff;
}

/* =========================================
   ROTATION — EMPTY SLOT (no queue)
========================================= */

.rt-empty-slot {
    background: #fffbf0;
    border-left: 3px solid #f0a500 !important;
}

.rt-empty-cover {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #fef3cd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rt-empty-cover .material-icons {
    font-size: 28px !important;
    color: #c87800;
}

.rt-empty-label {
    color: #92600a;
}

.rt-empty-sub {
    color: #a07030;
}

/* =========================================
   FUTURE PICKS — SOFT FROST (COVER + TEXT)
========================================= */

/* Shared positioning */
.rt-censored .rt-censor-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* ---- COVER (blur only, no label) ---- */

.rt-censored .rt-cover-wrap.rt-censor-wrap img {
    filter: blur(10px);
    opacity: 0.75;
    transition: all .25s ease;
    pointer-events: none;
}

/* ---- TEXT BLOCK (blur + overlay label) ---- */

.rt-censored .flex-grow-1 > .rt-censor-wrap > * {
    filter: blur(4px);
    opacity: 0.75;
    transition: all .25s ease;
    pointer-events: none;
}

.rt-censored .flex-grow-1 > .rt-censor-wrap::after {
    content: "🔒 Hidden Until Reveal";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: .3px;
    color: #2B988F;
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
}

/* =========================================
   UPCOMING ROTATION — GLASS DATE BOX
========================================= */

.rt-date-box {
    width: 80px;
    min-width: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255);
    text-align: center;
    font-family: "Nunito Sans", sans-serif !important;
    border: 1px solid #e5e7eb;
}

.rt-date-month {
    background: #2B988F;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #f5f5f5;
}

.rt-date-body {
    padding: 8px 6px 10px;
}

.rt-date-day {
    font-size: 0.7rem;
    opacity: .85;
    margin-bottom: 2px;
}

.rt-date-number {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0;
}

.rt-date-year {
    font-size: 0.7rem;
    opacity: .7;
}

/* ========================================
   ARCHIVE PREVIEW SHIMMER
======================================== */

.archive-preview-box {
    position: relative;
    min-height: 110px;
}

.archive-preview-loader {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient( 90deg, rgba(240,240,240,0.6) 25%, rgba(220,220,220,0.85) 37%, rgba(240,240,240,0.6) 63% );
    background-size: 400% 100%;
    animation: archiveShimmer 1.2s ease-in-out infinite;
    z-index: 5;
}

@keyframes archiveShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ========================================
   ARCHIVE PREVIEW SKELETONS
======================================== */

/* shared shimmer mixin — reuses same keyframe */
.arch-skel-circle,
.arch-skel-line,
.arch-skel-stars {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 400% 100%;
    animation: archiveShimmer 1.4s ease-in-out infinite;
}

/* chat row */
.arch-skel-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.arch-skel-msg:last-child { margin-bottom: 0; }

.arch-skel-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.arch-skel-lines {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

/* single skeleton line */
.arch-skel-line {
    height: 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.arch-skel-line:last-child { margin-bottom: 0; }

/* width variants */
.arch-skel-line.s-20 { width: 20%; }
.arch-skel-line.s-25 { width: 25%; }
.arch-skel-line.s-30 { width: 30%; }
.arch-skel-line.s-35 { width: 35%; }
.arch-skel-line.s-50 { width: 50%; }
.arch-skel-line.s-65 { width: 65%; }
.arch-skel-line.s-75 { width: 75%; }
.arch-skel-line.s-80 { width: 80%; }

/* forum thread row */
.arch-skel-thread {
    margin-bottom: 14px;
}
.arch-skel-thread:last-child { margin-bottom: 0; }

/* review stars placeholder */
.arch-skel-stars {
    height: 18px;
    width: 152px;
    border-radius: 4px;
    margin-bottom: 6px;
}

/* review row */
.arch-skel-review {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.arch-skel-review:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* divider between club average and user rating */
.archive-reviews-divider {
    height: 1px;
    border: none;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .12) 70%, transparent);
    margin: 2px 0 14px;
}

/* reviews overlay — covers existing content while re-loading */
.arch-skel-reviews-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: #fff;
    z-index: 5;
    padding: 4px 0;
}
/* =====================================================
   ARCHIVE — BUTTON FOOTER LINK (matches <a> style)
===================================================== */

button.archive-footer-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #2B988F;
    font-weight: 600;
    font-size: 0.68rem;
    cursor: pointer;
    text-decoration: none;
    display: inline;
    line-height: inherit;
}

button.archive-footer-link:hover {
    text-decoration: underline;
}

button.archive-footer-link.disabled,
button.archive-footer-link:disabled {
    color: #9aa0a6;
    cursor: default;
    text-decoration: none;
}

/* =====================================================
   ARCHIVE — FULL CHAT PANEL
===================================================== */

.archive-full-chat {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* Header bar */
.arch-fc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}
.arch-fc-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.arch-fc-header .material-icons {
    font-size: 17px !important;
    color: #2b988f;
}

.arch-fc-count {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Scrollable message list */
.arch-fc-messages {
    max-height: 520px;
    overflow-y: auto;
    padding: 14px 16px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Individual message row */
.arch-fc-msg {
    display: flex;
    gap: 10px;
    padding: 3px 0;
}

/* Grouped (same user within 5 min) — indent to align with text column */
.arch-fc-grouped {
    padding-left: 42px; /* 32px avatar + 10px gap */
}

.arch-fc-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.arch-fc-body {
    flex: 1;
    min-width: 0;
}

.arch-fc-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 2px;
}

.username-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
    .username-link:hover { text-decoration: underline; }

.arch-fc-user {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
}

.arch-fc-time {
    font-size: 0.68rem;
    color: #9ca3af;
}

.arch-fc-text {
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.5;
    word-break: break-word;
}

/* Strip Quill paragraph margins inside messages */
.arch-fc-text p {
    margin: 0;
}

/* Links inside messages */
.arch-fc-text a {
    color: #2b988f;
    text-decoration: underline;
    text-decoration-color: rgba(43, 152, 143, 0.4);
    text-underline-offset: 2px;
    word-break: break-all;
}

.arch-fc-text a:hover {
    text-decoration-color: #2b988f;
}

/* =====================================================
   ARCHIVE CHAT — LINK PREVIEW CARDS (IG / FB)
===================================================== */

.arch-link-preview {
    margin-top: 6px;
    margin-bottom: 8px;
    margin-left: 42px; /* align with grouped message text */
    max-width: 340px;
}

.arch-link-preview-inner {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: #fafafa;
    transition: box-shadow 0.15s ease;
}

.arch-link-preview-inner:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.arch-link-preview-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.arch-link-preview-body {
    padding: 8px 10px;
}

.arch-link-preview-site {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.arch-link-preview[data-site="youtube"]   .arch-link-preview-site { color: #ff0000; }
.arch-link-preview[data-site="spotify"]   .arch-link-preview-site { color: #1db954; }
.arch-link-preview[data-site="instagram"] .arch-link-preview-site { color: #c13584; }
.arch-link-preview[data-site="facebook"]  .arch-link-preview-site { color: #1877f2; }

/* Live-chat preview cards sit directly below the bubble, no extra left indent */
.arch-link-preview.chat-link-preview {
    margin-left: 0;
    max-width: 350px;
}

.arch-link-preview-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.35;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arch-link-preview-desc {
    font-size: 0.73rem;
    color: #6b7280;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Internal archive-cycle previews: cover-left, info-right card so portrait
   film/book covers don't blow out vertically the way a YouTube thumb does. */
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-inner {
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border-color: #d6d9e0;
}
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-img {
    width: 84px;
    height: auto;
    max-height: none;
    flex-shrink: 0;
    align-self: stretch;
    object-fit: cover;
}
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.arch-link-preview[data-kind="archive_cycle"] .arch-link-preview-site {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 0;
}
.arch-link-preview-badge {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Contain embedded images within the message column */
.arch-fc-text img {
    display: block;
    max-width: 320px;
    height: auto;
    margin-top: 6px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Empty / error state */
.arch-fc-empty {
    padding: 24px;
    text-align: center;
    font-size: 0.82rem;
    color: #9ca3af;
}

/* =====================================================
   ARCHIVE — FULL REVIEWS PANEL
===================================================== */

.arch-rv-avg-pill {
    font-size: 0.72rem;
    font-weight: 600;
    color: #2b988f;
    background: #e6f5f4;
    border-radius: 20px;
    padding: 2px 10px;
}

.arch-rv-sort-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: #fcfcfc;
    border-bottom: 1px solid #e5e7eb;
}

.arch-rv-sort-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

.arch-rv-sort-btn:hover {
    color: #374151;
    background: #f3f4f6;
}

.arch-rv-sort-btn.arch-rv-sort-active {
    color: #2b988f;
}

.arch-rv-sort-arrow {
    font-size: 13px !important;
    line-height: 1;
}

.arch-rv-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 560px;
    overflow-y: auto;
    padding: 4px 0;
    scroll-behavior: smooth;
}

.arch-rv-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.arch-rv-item:last-child {
    border-bottom: none;
}

.arch-rv-mine {
    background: #f8fffe;
}

@keyframes archRvHighlight {
    0%   { background: rgba(43,152,143,0.18); }
    70%  { background: rgba(43,152,143,0.12); }
    100% { background: transparent; }
}
.arch-rv-highlight {
    animation: archRvHighlight 2.4s ease forwards;
    border-radius: 6px;
    outline: 2px solid rgba(43,152,143,0.35);
    outline-offset: -2px;
}

.arch-rv-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.arch-rv-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.arch-rv-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    flex-shrink: 0;
}

.arch-rv-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.arch-rv-user {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 6px;
}

.arch-rv-you {
    font-size: 0.65rem;
    font-weight: 600;
    background: #2b988f;
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Wraps the username link + inline Edit button so they share a row. */
.arch-rv-user-row {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0;
}
.arch-rv-edit-btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px;
    background: transparent;
    border: 1px solid #d1d5db;
    color: #2B988F;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.arch-rv-edit-btn:hover {
    color: #1b6b62; border-color: #2B988F; background: #ecfdf5;
}
.arch-rv-edit-btn .material-icons {
    font-size: 11px !important; line-height: 1;
}

.arch-rv-date {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-top: 1px;
}

.arch-rv-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.arch-rv-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.arch-rv-stars .material-icons {
    font-size: 14px !important;
}

.arch-rv-nums {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arch-rv-rating {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1f2937;
}

.arch-rv-delta {
    font-size: 0.72rem;
    font-weight: 600;
}

.arch-rv-comment {
    margin-top: 10px;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.55;
    word-break: break-word;
}

.arch-rv-comment p {
    margin: 0 0 6px;
}

.arch-rv-comment p:last-child {
    margin-bottom: 0;
}

.arch-rv-track {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

.arch-rv-track .material-icons {
    font-size: 14px !important;
    color: #2b988f;
}

/* =====================================================
   ARCHIVE — FULL CHAT SKELETON LOADER
===================================================== */

.arch-fc-skeleton {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.arch-skel-circle-spacer {
    width: 32px;
    flex-shrink: 0;
}

/* =====================================================
   ARCHIVE CHAT — IMAGE LIGHTBOX
===================================================== */

.arch-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
}

.arch-lightbox-overlay.active {
    display: flex;
}

.arch-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    cursor: default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.arch-lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 10000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    backdrop-filter: blur(4px);
}

.arch-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.arch-lightbox-close .material-icons {
    font-size: 20px !important;
}

/* Prevent page scroll while lightbox is open */
body.arch-lightbox-open {
    overflow: hidden;
}

/* Clickable cursor on embedded chat images */
.arch-fc-text img,
.chat-messages img {
    cursor: zoom-in;
}
.chat-messages .arch-link-preview-img {
    cursor: pointer;
}

/* Reply preview text clamp — must live in stylesheet; -webkit-box-orient is stripped from inline styles */
/* Flash highlight when jumping to a quoted message */
@keyframes chat-msg-highlight-fade {
    0%   { background: rgba(41, 181, 168, 0.25); }
    100% { background: transparent; }
}
.chat-msg-highlight {
    border-radius: 6px;
    animation: chat-msg-highlight-fade 1.5s ease forwards;
}
@keyframes forum-post-highlight-fade {
    0%   { background: rgba(41, 181, 168, 0.2); box-shadow: 0 0 0 2px rgba(43,152,143,0.4); }
    100% { background: transparent; box-shadow: none; }
}
.forum-post-highlight {
    border-radius: 8px;
    animation: forum-post-highlight-fade 2s ease forwards;
}

.reply-clamp {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ==========================================
   ARTIST TAG AUTOCOMPLETE
   ========================================== */
.artist-tag-ac {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.artist-tag-ac-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: .92rem;
    color: #222;
    transition: background .1s;
}

.artist-tag-ac-row img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.artist-tag-ac-no-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
    display: inline-block;
}

.artist-tag-ac-row.active,
.artist-tag-ac-row:hover {
    background: #d0f4f0;
}

.artist-tag-ac-sub {
    color: #888;
    font-size: 0.82em;
}

/* Chat Quill — speech-bubble caret pointing left toward avatar */
.chat-quill-wrap::before,
.chat-quill-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
}
/* Outer triangle — border colour */
.chat-quill-wrap::before {
    left: 2px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 8px solid #dee2e6;
    transform: translateY(-50%);
}
/* Inner triangle — toolbar background, creates the 1px border effect */
.chat-quill-wrap::after {
    left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #f8f9fa;
    transform: translateY(-50%);
}

/* Chat Quill — toolbar + editor unified as one box */
.chat-quill-wrap .ql-toolbar.ql-snow {
    border: 1px solid #dee2e6;
    border-radius: .375rem .375rem 0 0;
    padding: 3px 6px;
    margin-left: 10px;
    background: #f8f9fa;
}

.chat-quill-input.ql-container.ql-snow {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0;
    font-family: inherit;
    font-size: .875rem;
    margin-left: 10px;
    flex: 1 1 0;
    min-width: 0;
}

/* Mobile-only tag buttons in the send bar — hidden on desktop */
.chat-mobile-quick-btns { display: none; }

/* Send bar — always visible in chat */
.chat-send-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(222, 226, 230);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 .375rem .375rem;
    background: #f8f9fa;
    margin-left: 10px;
    margin-top: -1px;
}

.chat-send-bar-hints {
    font-size: 0.68rem;
    color: #6c757d;
    line-height: 1;
}

/* Mobile-only shortcut hints — hidden on desktop */
.chat-mobile-hints {
    display: none;
}
@media (max-width: 768px) {
    .chat-send-bar-hints { display: none; }
    .chat-mobile-hints {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        margin-top: 16px;
        font-size: 0.67rem;
        color: #6c757d;
        padding-left: 48px;
    }
    .chat-mobile-hint-row {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .chat-mobile-hint-label {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #adb5bd;
    }
}

.chat-send-bar-hints kbd,
.chat-mobile-hints kbd {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 5px;
    background: #fff;
    border: 1px solid #adb5bd;
    border-bottom-width: 2px;
    border-radius: 4px;
    color: #2B988F;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
}

/* Fade the bottom border of the editor into the send bar */
.chat-quill-wrap.is-focused .chat-quill-input.ql-container.ql-snow,
.chat-quill-wrap.has-content .chat-quill-input.ql-container.ql-snow {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.chat-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2B988F;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: #237e76;
}

.chat-send-btn:active {
    background: #1d6b63;
}

.chat-send-btn:disabled {
    background: #b0bec5;
    cursor: default;
    pointer-events: none;
}

.send-btn-theme:disabled {
    background-color: #b0bec5 !important;
    cursor: default;
    pointer-events: none;
}

/* Forum new-thread: match chat Quill border color */
.forum-quill-wrap .ql-toolbar.ql-snow {
    border-color: #dee2e6;
}
.forum-quill-wrap .ql-container.ql-snow {
    border-color: #dee2e6;
    border-radius: 0px;
    background: white;
}

/* Forum new-thread: expand on focus / content — mirrors chat behavior */
.forum-quill-wrap.is-focused .ql-editor,
.forum-quill-wrap.has-content .ql-editor {
    min-height: 80px;
}

/* New thread card: expand on focus or content, small when empty+unfocused */
#forum-new-thread-box .forum-quill-wrap .ql-editor {
    min-height: 60px;
    transition: min-height 0.2s ease;
    
}

#forum-new-thread-box .forum-quill-wrap.is-focused .ql-editor,
#forum-new-thread-box .forum-quill-wrap.has-content .ql-editor {
    min-height: 160px;
}

/* Forum thread send bar — identical to .chat-send-bar */
.forum-thread-send-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #dee2e6;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 .375rem .375rem;
    background: #f8f9fa;
    margin-left: 10px;
    margin-top: -2px;
}

.forum-quill-wrap.is-focused .forum-thread-send-bar,
.forum-quill-wrap.has-content .forum-thread-send-bar {
    display: flex;
}

/* Fade the container's bottom border into the send bar, like chat */
.forum-quill-wrap.is-focused .ql-container.ql-snow,
.forum-quill-wrap.has-content .ql-container.ql-snow {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.chat-quill-input .ql-editor {
    padding: 6px 12px;
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.5;
    transition: min-height 0.2s ease;
    border-radius: 0px;
}

.chat-quill-input.is-focused .ql-editor,
.chat-quill-wrap.has-content .chat-quill-input .ql-editor {
    min-height: 80px;
}

.chat-quill-input .ql-editor.ql-blank::before {
    font-style: normal;
    color: #6c757d;
    left: 12px;
}

/* GIF toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-gif::before {
    content: "GIF";
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #555;
    display: inline-block;
    vertical-align: middle;
}

.chat-quill-wrap .ql-toolbar button.ql-emoji::before {
    font-weight: 900;
    color: #555;
}

/* Attach toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-attach::before {
    content: "\f0c6";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    color: #555;
}

.chat-quill-wrap .ql-toolbar button.ql-gif,
.chat-quill-wrap .ql-toolbar button.ql-attach,
.chat-quill-wrap .ql-toolbar button.ql-emoji,
.chat-quill-wrap .ql-toolbar button.ql-tag,
.chat-quill-wrap .ql-toolbar button.ql-album,
.chat-quill-wrap .ql-toolbar button.ql-film,
.chat-quill-wrap .ql-toolbar button.ql-book,
.chat-quill-wrap .ql-toolbar button.ql-actor,
.chat-quill-wrap .ql-toolbar button.ql-director,
.chat-quill-wrap .ql-toolbar button.ql-author,
.chat-quill-wrap .ql-toolbar button.ql-mention,
.chat-quill-wrap .ql-toolbar button.ql-spoiler {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    margin-top: 0;
}

.chat-quill-wrap .ql-toolbar button.ql-gif:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-attach:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-emoji:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-tag:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-album:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-film:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-book:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-actor:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-director:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-author:hover::before,
.chat-quill-wrap .ql-toolbar button.ql-mention:hover::before {
    color: #2B988F;
}

.chat-quill-wrap .ql-toolbar button.ql-actor::before {
    content: "\f508";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}
.chat-quill-wrap .ql-toolbar button.ql-director::before {
    content: "\f03d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}
.chat-quill-wrap .ql-toolbar button.ql-author::before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Film toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-film::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Book toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-book::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

.chat-quill-wrap .ql-toolbar button.ql-spoiler:hover::after {
    color: #2B988F;
}

/* Album toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-album::before {
    content: "\f51f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Tag toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-tag::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: #444;
    line-height: 1;
}

/* Mention toolbar button icon */
.chat-quill-wrap .ql-toolbar button.ql-mention::before {
    content: "@";
    font-weight: 700;
    font-size: 13px;
    color: #444;
    line-height: 1;
    font-style: normal;
    font-family: inherit;
}

/* ── Tag Modals (Album + Artist) ── */
.tag-modal-dialog { --tm-accent: #2B988F; }

.tag-modal-dialog { border-radius: 14px; overflow: hidden; }
.tag-modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.tag-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #2B988F 0%, #1d7a72 100%);
    color: #fff;
}
.tag-modal-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tag-modal-icon .material-icons { font-size: .9rem; color: #fff; }
.tag-modal-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    flex: 1;
}
.tag-modal-close {
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.tag-modal-close:hover { background: rgba(255,255,255,.28); }
.tag-modal-close .material-icons { font-size: .9rem; color: #fff; }

.tag-modal-body { padding: 12px 14px 14px; }

.tag-modal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tag-modal-search-icon {
    position: absolute;
    left: 10px;
    font-size: 1.05rem;
    color: #aaa;
    pointer-events: none;
}
.tag-modal-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .875rem;
    background: #f8fafa;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.tag-modal-search-input:focus {
    border-color: #2B988F;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(43,152,143,.12);
}

/* Results list */
.artist-tag-modal-list {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}
.artist-tag-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: background .12s;
}
.artist-tag-modal-row:hover,
.artist-tag-modal-row.is-active {
    background: #f0faf9;
}
.artist-tag-modal-row img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.artist-tag-modal-no-img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
    flex-shrink: 0;
    display: inline-block;
}
.artist-tag-modal-loading,
.artist-tag-modal-empty {
    font-size: 0.82rem;
    color: #999;
    padding: 10px 4px;
    text-align: center;
}

/* Member Mention Modal */
.mention-modal-list {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}
.mention-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background .12s;
}
.mention-modal-row:hover {
    background: #f0faf9;
}
.mention-modal-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.mention-modal-name {
    font-weight: 600;
    color: #2B988F;
}
.mention-modal-fullname {
    font-size: 0.78rem;
    color: #888;
    margin-left: 2px;
}

/* Album tag badge inside Quill editor */
.ql-album-tag-badge { color: #1e4db7; }
/* Film tag badge inside Quill editor */
.ql-film-tag-badge { color: #b5651d; }
/* Book tag badge inside Quill editor */
.ql-book-tag-badge { color: #7a4cb5; }
/* Actor tag badge inside Quill editor */
.ql-actor-tag-badge { color: #c0392b; }
/* Director tag badge inside Quill editor */
.ql-director-tag-badge { color: #34495e; }
/* Author tag badge inside Quill editor */
.ql-author-tag-badge { color: #0c7a73; }
/* Rendered actor tag — crimson */
a.actor-tag-link {
    display: inline-flex;
    align-items: center;
    color: #c0392b;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.actor-tag-link::before {
    content: "\f508";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.actor-tag-link:hover { color: #8c2a1f; text-decoration: none; }

/* Rendered director tag — slate */
a.director-tag-link {
    display: inline-flex;
    align-items: center;
    color: #34495e;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.director-tag-link::before {
    content: "\f03d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.director-tag-link:hover { color: #22303d; text-decoration: none; }

/* Rendered author tag — teal */
a.author-tag-link {
    display: inline-flex;
    align-items: center;
    color: #0c7a73;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.author-tag-link::before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.author-tag-link:hover { color: #08544f; text-decoration: none; }

a.actor-tag-link .tag-label,
a.director-tag-link .tag-label,
a.author-tag-link .tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* Rendered film tag badge — amber */
a.film-tag-link {
    display: inline-flex;
    align-items: center;
    color: #b5651d;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.film-tag-link::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.film-tag-link:hover {
    color: #8a4d15;
    text-decoration: none;
}

/* Rendered book tag badge — violet */
a.book-tag-link {
    display: inline-flex;
    align-items: center;
    color: #7a4cb5;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.book-tag-link::before {
    content: "\f02d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.book-tag-link:hover {
    color: #5d3590;
    text-decoration: none;
}

a.film-tag-link .tag-label,
a.book-tag-link .tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    margin-top: -2px;
}
/* Chat-rendered tags don't need the optical nudge — only reviews do. */
#pane-live-chat .chat-messages a.film-tag-link .tag-label,
#pane-live-chat .chat-messages a.book-tag-link .tag-label {
    margin-top: 0;
}
.ql-album-tag-artist {
    font-weight: 400;
    opacity: 0.75;
}

/* Artist tag badge inside Quill editor */
.ql-artist-tag-badge { color: #177a72; }
.ql-artist-tag-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #0369a1;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    width: 14px;
    height: 14px;
}
.ql-artist-tag-x:hover {
    opacity: 1;
}

/* Truncate long tag label text inside badge links */
a.artist-tag-link .tag-label,
a.album-tag-link .tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* Rendered artist tag badge — teal (site primary accent family) */
a.artist-tag-link {
    display: inline-flex;
    align-items: center;
    color: #177a72;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.artist-tag-link::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.artist-tag-link:hover {
    color: #0f5e58;
    text-decoration: none;
}

/* Rendered album tag badge — blue (site gradient accent family) */
a.album-tag-link {
    display: inline-flex;
    align-items: center;
    color: #1e4db7;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    gap: 2px;
    margin-top: -3px;
}
a.album-tag-link::before {
    content: "\f51f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1em;
    opacity: 0.85;
}
a.album-tag-link:hover {
    color: #1a3a8f;
    text-decoration: none;
}
a.album-tag-link .album-tag-artist {
    font-weight: 400;
    opacity: 0.75;
}

/* User mention badge inside Quill editor */
.ql-user-mention-badge { color: #5b21b6; cursor: default; }
/* Rendered user mention — purple matching artist/album tag style */
a.user-mention-link {
    display: inline-flex;
    align-items: center;
    color: #5b21b6;
    font-size: 0.82em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    margin-top: -3px;
    gap: 2px;
}
a.user-mention-link::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.78em;
    opacity: 0.85;
}
a.user-mention-link:hover {
    color: #4c1d95;
    text-decoration: none;
}

/* ============================================================
   PILL TAGS — unified styling for all 8 tag types.
   Editor badges (.ql-*-tag-badge) + rendered links (a.*-tag-link)
   render as rounded pills with a soft tinted background and a
   subtle border matching the foreground color of each tag type.
   Per-type rules above only set the foreground color + icon; this
   block layers on the pill shape, spacing, and consistent sizing.
   ============================================================ */
a.artist-tag-link,
a.album-tag-link,
a.film-tag-link,
a.book-tag-link,
a.actor-tag-link,
a.director-tag-link,
a.author-tag-link,
a.user-mention-link,
.ql-artist-tag-badge,
.ql-album-tag-badge,
.ql-film-tag-badge,
.ql-book-tag-badge,
.ql-actor-tag-badge,
.ql-director-tag-badge,
.ql-author-tag-badge,
.ql-user-mention-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;   /* applies to editor badges too, matching the
                                 rendered links — keeps icon+label aligned with
                                 the surrounding text instead of dropping to the
                                 baseline (which made badges look "off"). */
    gap: 4px;
    font-size: 0.92em;
    line-height: 1;           /* hug the glyphs so the icon centers ON the text
                                 instead of dropping below it — without this the
                                 inherited editor line-height makes the text item
                                 tall and the centered icon lands too low. */
    font-weight: 700;         /* bold label */
    white-space: nowrap;
    padding: 0;               /* flush — no outer spacing, so it's clear whether
                                 a space exists before/after when typing. */
    margin: -3px 0 0;         /* vertical optical nudge only; no horizontal margin */
    text-decoration: none;
}
a.artist-tag-link:hover,
a.album-tag-link:hover,
a.film-tag-link:hover,
a.book-tag-link:hover,
a.actor-tag-link:hover,
a.director-tag-link:hover,
a.author-tag-link:hover,
a.user-mention-link:hover {
    text-decoration: none;
}

a.artist-tag-link::before,
a.album-tag-link::before,
a.film-tag-link::before,
a.book-tag-link::before,
a.actor-tag-link::before,
a.director-tag-link::before,
a.author-tag-link::before,
a.user-mention-link::before,
.ql-tag-ico {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .78em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    opacity: 0.9;
}

/* Editor icon: unlike the rendered links (where ::before is a direct flex child
   of the <a>), Quill wraps the badge content in cursor-guard nodes + an inner
   span, so the badge's flex align/gap never reach this icon. Align it to the
   label and add the icon↔label gap here instead. */
.ql-tag-ico {
    vertical-align: middle;
    margin-right: 3px;
    margin-top: -3px;
}

/* Editor-only overrides: badges sit inside a contenteditable region so we keep
   no-select behavior. Quill inserts cursor-guard nodes () as extra flex items,
   so the unified gap:4px lands around the guards (phantom side spacing) instead
   of between icon and label — zero it out; the icon↔label gap comes from
   .ql-tag-ico's margin-right above. */
.ql-artist-tag-badge,
.ql-album-tag-badge,
.ql-film-tag-badge,
.ql-book-tag-badge,
.ql-actor-tag-badge,
.ql-director-tag-badge,
.ql-author-tag-badge,
.ql-user-mention-badge {
    user-select: none;
    gap: 0;
    /* Flow like words, not as an unbreakable box: a long tag ("The Meanest
       of Times (Limited Edition)") was one nowrap inline-flex block, so it
       ran past the edge of a phone's chat box and shoved the next words onto
       a new line. Inline + normal wrapping lets it break across lines with
       the text around it. */
    display: inline;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: inherit;
    margin: 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.ql-artist-tag-badge > span,
.ql-album-tag-badge > span,
.ql-film-tag-badge > span,
.ql-book-tag-badge > span,
.ql-actor-tag-badge > span,
.ql-director-tag-badge > span,
.ql-author-tag-badge > span,
.ql-user-mention-badge > span { display: inline; white-space: normal; }

/* Quote block inside chat bubbles — lighter than forum version */
.msg-text .forum-quote-block {
    padding: 5px 10px 5px 10px;
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.06);
    border-left-width: 3px;
}
.msg-text .forum-quote-block .fq-attr {
    font-size: 0.72rem;
    margin-bottom: 4px;
    padding-bottom: 4px;
    flex-wrap: wrap;
    gap: 4px;
}
.msg-text .forum-quote-block .fq-body {
    font-size: 0.82rem;
}
.msg-text .forum-quote-block::before {
    display: none;
}
/* In your OWN (teal) bubble the 6% dark wash read as more teal, and the
   teal name label vanished into it. There the quote is a near-white card
   with dark text and a deep-teal edge, so it reads as a quote at a glance. */
.chat-msg-own .msg-text .forum-quote-block {
    background: rgba(255, 255, 255, 0.93);
    border-left-color: #0f5e57;
    color: #1f2937;
}
.chat-msg-own .msg-text .forum-quote-block .fq-attr {
    color: #17756D;
    border-bottom-color: rgba(15, 94, 87, 0.15);
}
.chat-msg-own .msg-text .forum-quote-block .fq-source { color: #6b7280; }
.chat-msg-own .msg-text .forum-quote-block .fq-body { color: #374151; }

/* Reply preview bar shown above chat input */
.chat-reply-bar {
    display: block;
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    color: #212529;
    white-space: normal;
    font-size: 0.875rem;
}

/* Chat input hints bar */
.chat-input-hints kbd {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    color: #374151;
    font-family: inherit;
}

/* =====================================================
   ARCHIVE FULL FORUM
===================================================== */

.arch-forum-list {
    overflow-y: auto;
    max-height: 600px;
    padding: 0;
}

.arch-forum-thread {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px;
}

.arch-forum-thread:last-child {
    border-bottom: none;
}

.arch-forum-thread-op {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.arch-forum-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}

.arch-forum-op-body {
    flex: 1;
    min-width: 0;
}

.arch-forum-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.arch-forum-user {
    font-weight: 600;
    font-size: 0.82rem;
    color: #374151;
}

.arch-forum-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    margin-bottom: 6px;
}

.arch-forum-replies {
    margin-top: 12px;
    padding-left: 44px;
    border-left: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arch-forum-reply {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.arch-forum-reply-body {
    flex: 1;
    min-width: 0;
}

.shadow notification-dropdown {
    margin-top: 10px !important;
}

.dropdown-item:active {
    background-color: rgba(43, 152, 143, 0.25) !important;
    color: #2B988F !important;
}

.thread-link-display:not(:empty) + .reactions-display {
    margin-top: 8px;
}

/* Archive hero: mobile-only row is hidden on desktop */
.arch-mobile-top-row { display: none; }

.chat-forum-thread-link {
    margin-bottom: 4px;
}
/* ── CHAT RESIZE HANDLE (desktop only) ── */
.chat-resize-handle {
    height: 12px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.chat-resize-handle::after {
    content: '';
    width: 40px;
    height: 3px;
    background: #dee2e6;
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
}
.chat-resize-handle:hover::after,
.chat-resize-handle.is-dragging::after {
    background: #2B988F;
    width: 56px;
}
@media (max-width: 991px) {
    .chat-resize-handle { display: none !important; }
}

/* ── Queue list-view resize handle (mirrors .chat-resize-handle) ──
   Only shown on desktop in list (compact) view; drag to set the list height. */
.queue-resize-handle {
    height: 12px;
    cursor: ns-resize;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.queue-resize-handle::after {
    content: '';
    width: 40px;
    height: 3px;
    background: #dee2e6;
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
}
.queue-resize-handle:hover::after,
.queue-resize-handle.is-dragging::after {
    background: #2B988F;
    width: 56px;
}
@media (min-width: 992px) {
    /* Desktop list view: the wrap becomes a fixed-height scroll box whose
       height the handle controls via --queue-list-h (default 460px). Card
       view (no .queue-compact) is unaffected — it flows full height. */
    #pane-queue.queue-compact #queueListWrap {
        max-height: var(--queue-list-h, 460px);
        overflow-y: auto;
    }
    #pane-queue.queue-compact .queue-resize-handle {
        display: flex;
    }
}

/* Nothing to resize while the queue is empty — renderQueue() toggles
   .queue-is-empty on #pane-queue. */
#pane-queue.queue-is-empty .queue-resize-handle { display: none !important; }

/* ── CHAT SKELETON PRELOADER ── */
.chat-skeleton {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.chat-skel-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.chat-skel-row--right {
    flex-direction: row-reverse;
}
.chat-skel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e5e7eb;
}
.chat-skel-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-skel-name {
    height: 10px;
    border-radius: 4px;
    background: #e5e7eb;
}
.chat-skel-line {
    height: 12px;
    border-radius: 6px;
    background: #e5e7eb;
}

/* Desktop chat pane: restore top padding that the global * reset strips from .p-3 */
@media (min-width: 992px) {
    #pane-live-chat {
        padding-top: 1rem !important;
    }
}


/* ======================================================================================
   CLUB TAB — Shared AQM queue grid + mobile CT compact rows
   Single source of truth. Do NOT add <style> blocks in PHP partials for these classes.
   Loaded globally via header.php so all lazy-loaded tabs inherit these definitions.
====================================================================================== */

/* ── Section label (shared by club tab and admin queue manager) ── */
.aqm-section-label { font-size: 0.82rem; font-weight: 700; color: #374151; }

/* ── Base row: standalone card style (settings/admin queue manager context) ── */
.aqm-queue-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 6px;
}

/* ── Inside .ct-queue-list: flat list style (club tab desktop) ── */
.ct-queue-list { display: flex; flex-direction: column; gap: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.ct-queue-list .aqm-queue-row { border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid #e5e7eb; padding: 9px 14px; }
.ct-queue-list .aqm-queue-row:last-child { border-bottom: none; }

/* ── Now-playing row modifiers ── */
.aqm-queue-row.now-playing { background: #f0fdf4; border-color: #86efac; box-shadow: 0 1px 4px rgba(34,197,94,0.12); }
.aqm-queue-row.now-playing .aqm-queue-date-label { color: #15803d; }
.aqm-queue-row.now-playing .aqm-queue-date-val   { color: #14532d; }

/* ── On-deck row modifiers ── */
/* On-deck rows + tags use an amber palette to read clearly distinct from
   the green "Live / now-playing" treatment. Same role (next thing up),
   different state — warmer "warming up" feel without competing with live. */
.aqm-queue-row.on-deck { background: #fffbeb; border-color: #fde68a; }
.aqm-queue-row.on-deck .aqm-queue-date-label { color: #b45309; }
.aqm-on-deck-tag { color: #b45309; background: #fef3c7; }

/* ── Skipped / playlist-week row modifiers ── */
.aqm-queue-row.skipped { opacity: 1; }
.aqm-queue-row.skipped > * { opacity: 0.45; }
.aqm-queue-row.skipped > .aqm-queue-divider,
.aqm-queue-row.skipped > .ct-pick-missing,
.aqm-queue-row.skipped > .ct-pick-set { opacity: 1; }
.aqm-queue-row.playlist-week { background: #faf5ff; flex-wrap: wrap; }
.aqm-queue-row.playlist-week .aqm-queue-date-label { color: #7c3aed; }
.aqm-queue-row.playlist-week .aqm-queue-date-val   { color: #6d28d9; }
.aqm-queue-row.playlist-week .aqm-queue-member-name { color: #6d28d9; }

/* ── AQM shared components ── */
.aqm-queue-date { min-width: 68px; text-align: center; flex-shrink: 0; }
.aqm-queue-date-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; line-height: 1.2; }
.aqm-queue-date-val { font-size: 0.7rem; font-weight: 600; color: #374151; line-height: 1.3; }
.aqm-queue-divider { width: 1px; height: 40px; background: #e5e7eb; flex-shrink: 0; }
.aqm-queue-member { display: flex; align-items: center; gap: 7px; flex: 0 0 110px; width: 110px; }
.aqm-queue-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.aqm-queue-member-name { font-size: 0.75rem; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.aqm-queue-album { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.aqm-queue-cover { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.aqm-queue-meta { flex: 1; min-width: 0; }
.aqm-queue-title  { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
.aqm-queue-artist { font-size: 0.68rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aqm-queue-empty-pick { font-size: 0.75rem; color: #9ca3af; font-style: italic; flex: 1; }
.aqm-pw-label { font-size: 0.75rem; font-weight: 700; color: #7c3aed; display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.aqm-pw-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 1px 6px; }
.aqm-pw-badge--tbd { background: #f3f4f6; color: #6b7280; }
.aqm-pw-queue-icon { font-size: 20px; color: #7c3aed; flex-shrink: 0; }
.aqm-pw-play-icon { font-size: 16px; }
.aqm-pw-desc-panel { flex-basis: 100%; font-size: 0.78rem; color: #6b7280; line-height: 1.5; padding: 8px 4px 2px; border-top: 1px solid #e9d5ff; background: none; margin-top: 6px; }
.aqm-pw-caret .material-icons { font-size: 20px; }
.aqm-pw-spotify-link { display: inline-block; padding: 2px 8px; font-size: 0.68rem; background: #1db954; color: #fff; border-radius: 4px; text-decoration: none; }
.aqm-pw-spotify-link:hover { background: #17a349; color: #fff; }

/* ── Set Theme button (admin, purple) ── */
.btn.aqm-set-theme-btn, .ct-set-theme-btn {
  background: #ede9fe; border: 1px solid #c4b5fd; padding: 2px 8px; font-size: 0.65rem;
  color: #7c3aed; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 3px;
  transition: background 0.15s, border-color 0.15s;
}
.btn.aqm-set-theme-btn:hover, .ct-set-theme-btn:hover { background: #ddd6fe; border-color: #a78bfa; color: #5b21b6; }
.ct-set-theme-btn .material-icons { font-size: 13px; }

/* ── Picks set/missing states ── */
.ct-pick-set, .ct-pick-missing { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; }
.ct-pick-set { color: #059669; }
.ct-pick-set .material-icons, .ct-pick-missing .material-icons { font-size: 18px; }
.ct-pick-missing { color: #dc2626; }

/* ── Admin action buttons (used in both layouts) ── */
.ct-skip-btn { background: none; border: 1px solid #e5e7eb; padding: 2px 9px; font-size: 0.65rem; color: #6b7280; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.4; display: inline-flex; align-items: center; gap: 3px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ct-skip-btn:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.ct-undo-btn { background: none; border: 1px solid #fbbf24; padding: 2px 9px; font-size: 0.65rem; color: #92400e; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.4; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ct-undo-btn:hover { background: #fef3c7; }

/* ── Desktop club info card helpers ──
   The tab-pane's outer .p-3 already supplies the standard 16px gutter on
   every tab. These wrappers used to add another 12/14px on top of that,
   making the club tab's content sit further inset than reviews/forum.
   Strip their own padding so content lines up with the rest. */
.ct-desktop-info-wrap { padding: 0; }
.ct-desktop-club-img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.ct-desktop-card-body { padding: 0; }

/* ── Club tab: Now Playing + Last Week (partials/club-now-last.php) ──
   Two equal columns on the desktop layout, stacked on the mobile one (see
   the .ct-wrap override below). Each card is its own container: wide cards
   sit the cover beside the text, narrow ones stack it above. */
.cnl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.cnl:has(> .cnl-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.cnl-card {
  container-type: inline-size;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 12px 14px; min-width: 0;
}
.cnl-card--now { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%); }
.cnl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cnl-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #6b7280;
}
.cnl-card--now .cnl-label { color: #15803d; }
.cnl-when { font-size: 0.7rem; color: #9ca3af; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Playlist Week buttons: Open playlist + (admins) Edit, one row, same pill size. */
.cnl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cnl-actions .cnl-playlist { margin-top: 0; }
.ct-set-theme-btn.cnl-edit { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; line-height: normal; }
.ct-set-theme-btn.cnl-edit .material-icons { font-size: 13px; }
.ct-set-theme-btn.cnl-edit:hover { background: #ddd6fe; }

.cnl-body { display: flex; gap: 12px; align-items: flex-start; }
.cnl-cover-link { flex-shrink: 0; display: block; }
.cnl-cover {
  width: 84px; height: 84px; border-radius: 8px; object-fit: cover; display: block; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.cnl-cover--pw { display: flex; align-items: center; justify-content: center; background: #ede9fe; color: #7c3aed; box-shadow: none; }
.cnl-cover--pw .material-icons { font-size: 34px; }
.cnl-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cnl-title { font-size: 0.92rem; font-weight: 700; color: #111; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnl-title a { color: inherit; text-decoration: none; }
.cnl-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cnl-sub { font-size: 0.78rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnl-sub a { color: inherit; text-decoration: none; }
.cnl-sub a:hover { color: #111; }
.cnl-sub-label { font-weight: 600; color: #374151; }
.cnl-note {
  font-size: 0.75rem; font-style: italic; color: #6b7280; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cnl-card--pw .cnl-title { color: #6d28d9; }
.cnl-playlist {
  align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; color: #15803d; text-decoration: none;
  background: #dcfce7; border-radius: 999px; padding: 3px 10px;
}
.cnl-playlist:hover { background: #bbf7d0; color: #14532d; }
.cnl-picker { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.72rem; color: #6b7280; text-decoration: none; min-width: 0; }
.cnl-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnl-picker strong { font-weight: 600; color: #374151; }
.cnl-picker:hover strong { text-decoration: underline; }
.cnl-picker-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cnl-score { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cnl-score-count { font-size: 0.7rem; color: #9ca3af; }

@container (max-width: 280px) {
  .cnl-body { flex-direction: column; gap: 8px; }
  .cnl-cover { width: 64px; height: 64px; }
  .cnl-picker-by { display: none; }
  .cnl-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Mobile layout: partials/tabs/club.php renders the whole club tab twice —
   a .ct-wrap copy inside .d-md-none and a separate desktop copy — and each
   include pulls in its own .cnl. Scoping to .ct-wrap stacks Now Playing
   above Last Week on the mobile copy only, at whatever width Bootstrap's
   md breakpoint swaps the two layouts, without guessing a pixel value here.
   Full-width cards also put each cover back beside its text, since the
   280px container query above stops firing. */
.ct-wrap .cnl { grid-template-columns: minmax(0, 1fr); }

/* ── MOBILE: CT compact rows ── */
.ct-wrap { padding: 0; }
.ct-info { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.ct-info-img {
  width: 88px; height: 88px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18), 0 1.5px 4px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.45);
  outline: 1.5px solid rgba(255,255,255,0.18); outline-offset: -3px;
}
.ct-info-body { flex: 1; min-width: 0; }
.ct-info-name { font-weight: 700; font-size: 0.95rem; color: #111; margin-bottom: 3px; }
.ct-info-desc { font-size: 0.78rem; color: #6b7280; line-height: 1.4; margin-bottom: 7px; }
.ct-info-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-meta-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.65rem; font-weight: 500; color: #4b5563; background: #f3f4f6; border-radius: 20px; padding: 3px 9px; }
.ct-meta-chip .material-icons { font-size: 0.75rem; color: #9ca3af; }
.ct-rotation-hd { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; margin-bottom: 6px; }
.ct-empty { font-size: 0.8rem; color: #9ca3af; padding: 8px 0; }
.ct-row { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; }
.ct-row:last-child { border-bottom: none; }
.ct-row.skipped { opacity: 1; }
.ct-row.skipped > * { opacity: 0.45; }
.ct-row.skipped > .ct-row-actions { opacity: 1; }
/* On-deck shares the flat row style (no separate rounded card) — amber
   accent so it reads clearly distinct from the green Live row above. */
.ct-row.on-deck {
    background: #fffbeb;
    border-left: 3px solid #fde68a;
    padding-left: 9px; /* 12px - 3px border so avatar still aligns */
}
.ct-row.now-playing {
  position: relative; overflow: hidden; border-bottom: none;
  background: linear-gradient(135deg, #f0fdf4 0%, #f9fefb 100%);
  border: 1px solid #bbf7d0; border-radius: 10px 10px 0 0; padding: 10px 11px; margin-bottom: 0;
}
.ct-row.now-playing::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,.07) 50%, transparent 100%);
  animation: ct-live-sweep 3s ease-in-out infinite;
}
@keyframes ct-live-sweep {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  40%, 60% { opacity: 1; }
}
.ct-live-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #15803d; background: #dcfce7; border: 1px solid #86efac; border-radius: 10px; padding: 2px 8px; }
.ct-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; animation: ct-dot-pulse 1.6s ease-in-out infinite; }
@keyframes ct-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } }
.ct-row-top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.ct-row-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ct-row-pw-icon { font-size: 18px; color: #7c3aed; flex-shrink: 0; }
.ct-row-name { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row.playlist-week .ct-row-name { color: #6d28d9; flex: 0 0 auto; }
.ct-row-tag { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 10px; }
.ct-row-tag.on-deck-tag { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.ct-row-tag.upcoming    { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }
.ct-row-tag.pw          { background: #faf5ff; color: #7c3aed; border: 1px solid #c4b5fd; }
.ct-row-tag.skipped-tag { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.ct-row-album { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-left: 32px; position: relative; z-index: 1; }
.ct-row-cover { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 2px solid #e5e7eb; display: block; }
.ct-cover-link { flex-shrink: 0; display: block; border-radius: 6px; }
.ct-row.now-playing .ct-row-cover { border-color: #86efac; }  /* green = live */
.ct-row.on-deck    .ct-row-cover { border-color: #fcd34d; }  /* amber = next */
.ct-row-meta { flex: 1; min-width: 0; }
.ct-row-title  { font-size: 0.76rem; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row-artist { font-size: 0.67rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row-set { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #059669; margin-top: 5px; padding-left: 32px; }
.ct-row-set .material-icons { font-size: 15px; }
.ct-row-pw-body { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-left: 26px; flex-wrap: wrap; }
.ct-row.playlist-week { padding: 12px; }
.ct-pw-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 2px 7px; }
.ct-pw-badge.tbd { background: #f3f4f6; color: #6b7280; }
.ct-pw-badge-editable { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.ct-pw-inline-edit-btn { background: none; border: none; border-left: 1px solid #c4b5fd; border-radius: 0; margin-left: 2px; padding: 0 4px 0 6px; font-size: 0.58rem; font-weight: 600; color: #7c3aed; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; text-transform: lowercase; letter-spacing: 0; line-height: 1.5; }
.ct-pw-inline-edit-btn .material-icons { font-size: 11px; }
.ct-pw-inline-edit-btn:hover { background: none; border-color: #a78bfa; color: #5b21b6; }
.ct-pw-spotify { font-size: 0.65rem; font-weight: 600; background: #1db954; color: #fff; border-radius: 4px; padding: 2px 8px; text-decoration: none; }
.ct-pw-spotify:hover { background: #17a349; color: #fff; }
.ct-pw-label-group { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ct-pw-spotify-inline { flex-shrink: 0; }
.ct-pw-caret-btn { background: none; border: none; padding: 0; cursor: pointer; color: #9ca3af; display: flex; align-items: center; line-height: 1; transition: color 0.15s; }
.ct-pw-caret-btn:hover { color: #7c3aed; }
.ct-pw-caret-btn .material-icons { font-size: 17px; transition: transform 0.2s; }
.ct-pw-caret-btn[aria-expanded="true"] .material-icons { transform: rotate(180deg); }
.ct-pw-desc-panel { font-size: 0.75rem; color: #6b7280; line-height: 1.5; margin-top: 8px; padding: 8px 10px 8px 32px; background: #faf5ff; border-radius: 6px; border-left: 3px solid #c4b5fd; }
.ct-row-actions { padding-left: 32px; margin-top: 5px; }
.ct-member-link { color: #374151; text-decoration: none; }
.ct-member-link:hover { color: #2B988F; text-decoration: underline; }
.ct-media-link { color: inherit; text-decoration: none; }
.ct-media-link:hover { color: #2B988F; text-decoration: underline; }

/* ── Queue tab: create playlist button ── */
/* Enabled state mirrors .queue-view-icon-btn.active (white bg, soft shadow). */
#queueCreatePlaylistBtn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 500; color: #333; background: #fff;
  border: none; border-radius: 7px; padding: 4px 8px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
#queueCreatePlaylistBtn:hover:not(:disabled) {
  background: #f9fafb; color: #111;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
#queueCreatePlaylistBtn:disabled {
  background: #f0f0f0; color: #555; box-shadow: none; cursor: not-allowed;
}
.queue-create-playlist-icon { font-size: 14px; }

/* ── Queue playlist modal ── */
.qpl-modal-dialog { max-width: 440px; }
.qpl-modal-content { border-radius: 14px; overflow: hidden; }
.qpl-modal-header { border-bottom: 1px solid #f0f0f0; padding: 16px 20px 14px; }
.qpl-modal-footer { border-top: 1px solid #f0f0f0; padding: 12px 20px; }
.qpl-modal-title { font-size: 1rem; }
.qpl-modal-subtitle { font-size: 0.75rem; }
.qpl-spotify-svg { width: 20px; height: 20px; flex-shrink: 0; }
.qpl-upload-hint { font-size: 0.72rem; margin-top: 4px; }
.qpl-status { color: #6b7280; }
.qpl-create-btn { background: #1DB954; color: #fff; border: none; font-weight: 600; min-width: 110px; }


/* ── Retroactive review modal — fits the site's teal + slate palette */
.arch-review-modal .modal-dialog { max-width: 480px; }
.arch-review-modal__content {
    border: 0; border-radius: 14px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(12, 53, 48, 0.18);
}
.arch-review-modal__header {
    background: linear-gradient(135deg, #0c3530 0%, #1b6b62 100%);
    color: #fff; border-bottom: 0;
    padding: 18px 20px 16px; align-items: flex-start;
}
.arch-review-modal__header .btn-close {
    filter: invert(1) grayscale(1) brightness(2); opacity: 0.85;
}
.arch-review-modal__title-block { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.arch-review-modal__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #a7f3d0; opacity: 0.9;
}
.arch-review-modal__album {
    margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-review-modal__artist {
    font-size: 0.78rem; color: rgba(255,255,255,0.78);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-review-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.arch-review-modal__section { display: flex; flex-direction: column; gap: 8px; }
.arch-review-modal__label {
    font-size: 0.75rem; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
}
.arch-review-modal__optional { color: #9ca3af; font-weight: 500; text-transform: none; letter-spacing: 0; }
.arch-review-modal__select,
.arch-review-modal__textarea {
    border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 0.9rem; color: #111827; background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.arch-review-modal__select:focus,
.arch-review-modal__textarea:focus {
    border-color: #2B988F; box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.15);
    outline: none;
}
.arch-review-modal__textarea { resize: vertical; min-height: 96px; }

/* Share-to-forum/chat checkbox group. Hidden native input + a styled
   "card" per option so the choices feel like deliberate publish actions
   instead of an afterthought toggle. */
.arch-review-modal__section--share { gap: 10px; }
.arch-review-share {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) {
    .arch-review-share { grid-template-columns: 1fr; }
}
.arch-review-share__opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d1d5db; border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    margin: 0;
}
.arch-review-share__opt:hover { border-color: #9ca3af; }
.arch-review-share__opt input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.arch-review-share__box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border: 1.5px solid #d1d5db; border-radius: 6px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.arch-review-share__check {
    font-size: 18px; color: #fff; opacity: 0;
    transition: opacity 0.12s;
}
.arch-review-share__opt input[type="checkbox"]:checked ~ .arch-review-share__box {
    background: #2B988F; border-color: #2B988F;
}
.arch-review-share__opt input[type="checkbox"]:checked ~ .arch-review-share__box .arch-review-share__check {
    opacity: 1;
}
.arch-review-share__opt:has(input[type="checkbox"]:checked) {
    border-color: #2B988F;
    background: #f0fbf9;
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.1);
}
.arch-review-share__opt input[type="checkbox"]:focus-visible ~ .arch-review-share__box {
    box-shadow: 0 0 0 3px rgba(43, 152, 143, 0.25);
}
.arch-review-share__text {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.arch-review-share__name {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; color: #111827;
}
.arch-review-share__name .material-icons { font-size: 16px; color: #2B988F; }
.arch-review-share__hint {
    font-size: 0.72rem; color: #6b7280; line-height: 1.3;
}

/* Rating row — bg star_border with fg star clipped via width % for
   arbitrary 0.1-precision fills (e.g. 23% for a 2.3 rating). */
.arch-review-rate {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px 14px;
}
.arch-review-stars-stack {
    position: relative; display: inline-flex; cursor: pointer; user-select: none;
    touch-action: pan-y;
}
.arch-review-stars-bg,
.arch-review-stars-fg { display: inline-flex; }
.arch-review-stars-bg .material-icons { font-size: 28px; color: #d1d5db; }
.arch-review-stars-fg {
    position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
    pointer-events: none; width: 0%; color: #FFC107;
    transition: width 0.05s linear;
}
.arch-review-stars-fg .material-icons { font-size: 28px; color: #FFC107; }
.arch-review-rate__value { font-size: 0.85rem; color: #0c3530; font-weight: 700; }
.arch-review-rate__suffix { color: #6b7280; font-weight: 500; }

.arch-review-modal__error {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: 8px; padding: 8px 12px; font-size: 0.82rem;
}
.arch-review-modal__footer {
    background: #f9fafb; border-top: 1px solid #e5e7eb;
    padding: 12px 20px; gap: 8px;
}
.arch-review-modal__btn {
    appearance: none; border: 0; border-radius: 8px;
    font-size: 0.88rem; font-weight: 600; padding: 8px 18px;
    cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.arch-review-modal__btn--ghost {
    background: transparent; color: #6b7280; border: 1px solid #d1d5db;
}
.arch-review-modal__btn--ghost:hover { background: #f3f4f6; color: #111827; }
.arch-review-modal__btn--primary { background: #2B988F; color: #fff; }
.arch-review-modal__btn--primary:hover:not(:disabled) { background: #1b6b62; }
.arch-review-modal__btn--primary:disabled { opacity: 0.7; cursor: default; }
.arch-review-modal__btn--danger {
    background: transparent; color: #b91c1c;
    border: 1px solid #fecaca;
    display: inline-flex; align-items: center; gap: 4px;
}
.arch-review-modal__btn--danger:hover:not(:disabled) {
    background: #fef2f2; color: #991b1b; border-color: #fca5a5;
}
.arch-review-modal__btn--danger:disabled { opacity: 0.6; cursor: default; }
.arch-review-modal__btn--danger .material-icons { font-size: 16px; line-height: 1; }
.arch-review-modal__footer-spacer { flex: 1 1 auto; }

/* ── Add/Edit review modal: bottom-sheet on mobile, stops at tab bar ──
   Mirrors the Member Info / Playlist Week Theme modals (see dash-mobile.css)
   so the add/edit review modal slides up from the bottom, ends above the
   fixed .m-tab-bar (62px + safe-area), and scrolls its body — keeping the
   footer (Save) reachable. Desktop keeps the centered dialog. */
@media (max-width: 991.98px) {
    .arch-review-modal .modal-dialog {
        position: fixed !important;
        top: 82px !important;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }
    .arch-review-modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .arch-review-modal.show .modal-dialog {
        transform: none;
    }
    .arch-review-modal__content {
        height: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }
    .arch-review-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .arch-review-modal__footer {
        flex-shrink: 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Film clubs: current-pick-header watchlist chip ── */
.cph-film-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.cph-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 6px;
    border-radius: 999px;
    background: #eef7f6;
    color: #1b7d73;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.cph-chip .material-icons { font-size: 14px; }
.cph-chip--watchlist { background: #fff4e0; color: #8a5a00; }

/* "Discussing: <title>" in the current-pick header (partials/current-pick-
   header.php) — opens the pick in the club's media explorer. */
.cph-pick-link {
    color: var(--rt-primary-dark, #17756D);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(43, 152, 143, .35);
    transition: color .12s ease, border-color .12s ease;
}
.cph-pick-link:hover,
.cph-pick-link:focus-visible {
    color: var(--rt-primary, #2B988F);
    border-bottom-color: currentColor;
    outline: none;
}

/* ── Archive tabs (phones) ────────────────────────────────────────────────
   partials/tabs/archive.php: Chat / Forum / Reviews as a segmented tab bar,
   one panel at a time (switching in archive.js). Phones only — wider
   screens hide the bar and keep the column layout above. */
.arch-tabs { display: none; }

@media (max-width: 767.98px) {
    .arch-tabs {
        display: flex;
        gap: 4px;
        margin: 14px 16px 4px;
        padding: 4px;
        background: #f1f3f7;
        border-radius: 12px;
    }
    .arch-tab {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        padding: 8px 6px;
        font: inherit; font-size: .82rem; font-weight: 600;
        color: #64748b;
        background: transparent;
        border: 0; border-radius: 9px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .arch-tab .material-icons { font-size: 16px; }
    .arch-tab.is-active {
        background: #fff;
        color: var(--rt-primary-dark, #17756D);
        box-shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 1px 1px rgba(15, 23, 42, .04);
    }
    .arch-tab:focus-visible { outline: 2px solid var(--rt-primary, #2B988F); outline-offset: 1px; }
    .arch-tab__n {
        min-width: 18px; padding: 1px 6px;
        font-size: .66rem; font-weight: 700; line-height: 1.4;
        color: #64748b; background: #e2e8f0; border-radius: 999px;
    }
    .arch-tab__n:empty { display: none; }
    .arch-tab.is-active .arch-tab__n { color: #fff; background: var(--rt-primary, #2B988F); }

    /* One panel at a time. */
    .archive-summary-row[data-arch-active="chat"]    > [data-arch-panel]:not([data-arch-panel="chat"]),
    .archive-summary-row[data-arch-active="forum"]   > [data-arch-panel]:not([data-arch-panel="forum"]),
    .archive-summary-row[data-arch-active="reviews"] > [data-arch-panel]:not([data-arch-panel="reviews"]) { display: none; }

    /* The tab names the panel, so drop its heading and the stacked
       dividers/padding meant for three panels in a column. */
    .archive-summary-row > [data-arch-panel] .archive-card > h6 { display: none; }
    .archive-summary-row .col-md-4 .archive-card {
        border-bottom: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }
    .archive-summary-row > [data-arch-panel] { animation: archTabIn .2s ease both; }

    /* One panel at a time means nothing has to line up with its
       neighbours, so an empty panel ("No forum threads…") shrinks to its
       content instead of holding the 110px box open above the link. */
    .archive-summary-row > [data-arch-panel] .archive-preview-box { min-height: 0; }
    .archive-summary-row > [data-arch-panel] .archive-card-footer { margin-top: 10px; }
}
@keyframes archTabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .archive-summary-row > [data-arch-panel] { animation: none; }
}