/* =========================
   CHAT / REVIEW / MESSAGE BOXES
========================= */

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

/* =========================================
   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;
        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: #6f42c1;
    }

/* =========================================
   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: #6f42c1;
    }

        .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);
    }
}

/* =========================================
   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.72rem;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === 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;
}

/* Quill toolbar button fixes */
.ql-toolbar .ql-gif {
    min-width: 28px !important;
    padding: 4px 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ql-toolbar button.ql-gif::before {
    content: "GIF";
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    color: #555;
}

.ql-toolbar button.ql-emoji,
.ql-toolbar button.ql-gif,
.ql-toolbar button.ql-spoiler {
    width: 32px;
    text-align: center;
}

/* =========================
   Review Quill Wrapper
========================= */

.review-quill-wrap {
    position: relative;
}

/* Left-pointing speech-bubble caret toward avatar */
.review-quill-wrap::before,
.review-quill-wrap::after {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
}

/* Outer triangle — border colour */
.review-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 fill */
.review-quill-wrap::after {
    left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #f8f9fa;
    transform: translateY(-50%);
}

/* Toolbar */
.review-quill-wrap .ql-toolbar.ql-snow {
    border: 1px solid #dee2e6;
    border-radius: .375rem .375rem 0 0;
    padding: 3px 6px;
    margin-left: 10px;
    background: #f8f9fa;
}

/* Editor container */
.review-quill-wrap .ql-container.ql-snow {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    font-family: inherit;
    font-size: .875rem;
    margin-left: 10px;
}

/* Editor area */
.review-quill-wrap .ql-editor {
    padding: 6px 12px;
    min-height: 80px;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
    transition: min-height 0.2s ease;
    background: white;
}

/* Expanded on focus or content */
.review-quill-wrap.is-focused .ql-editor,
.review-quill-wrap.has-content .ql-editor {
    min-height: 160px;
}

/* Inside the review form card — small by default, expand on focus or content */
.review-form-card .review-quill-wrap .ql-editor {
    min-height: 60px;
    transition: min-height 0.2s ease;
}

.review-form-card .review-quill-wrap.is-focused .ql-editor,
.review-form-card .review-quill-wrap.has-content .ql-editor {
    min-height: 160px;
}

/* Placeholder */
.review-quill-wrap .ql-editor.ql-blank::before {
    font-style: normal;
    color: #6c757d;
    left: 12px;
}

/* GIF button icon */
.review-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;
}

/* Tag (artist) button icon */
.review-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;
}

/* Album button icon */
.review-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;
}

/* Button sizing and layout */
.review-quill-wrap .ql-toolbar button.ql-gif,
.review-quill-wrap .ql-toolbar button.ql-emoji,
.review-quill-wrap .ql-toolbar button.ql-tag,
.review-quill-wrap .ql-toolbar button.ql-album,
.review-quill-wrap .ql-toolbar button.ql-spoiler {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    margin-top: 0;
}

/* Hover color for custom button icons */
.review-quill-wrap .ql-toolbar button.ql-gif:hover::before,
.review-quill-wrap .ql-toolbar button.ql-emoji:hover::before,
.review-quill-wrap .ql-toolbar button.ql-tag:hover::before,
.review-quill-wrap .ql-toolbar button.ql-album:hover::before {
    color: #2B988F;
}

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

/* Wrap is the positioning context for the mobile toolbar toggle. */
.review-quill-wrap { position: relative; }

/* Mobile-only toggle button — hidden on desktop */
.ql-toolbar-more-btn { display: none; }

/* =========================
   Review Send Bar
========================= */

.review-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;
}

/* Always visible inside the review form card; conditional elsewhere */
.review-form-card .review-send-bar,
.review-quill-wrap.is-focused .review-send-bar,
.review-quill-wrap.has-content .review-send-bar {
    display: flex;
}

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

/* Checkboxes on the left, auto-push buttons right */
.review-send-checks {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

/* Compact checkbox labels — keep natural indicator size, just shrink text */
.review-send-checks .control--checkbox {
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    color: #495057;
}

/* =========================
   Review Actions Row (phone + tablet)
========================= */

/* Empty on desktop: review-panel.js only moves Submit Review / Cancel in
   here below 992px, where they sit outside the editor box on their own row. */
.review-actions-row { display: none; }

@media (max-width: 991.98px) {
    .review-actions-row {
        display: flex;
        align-items: center;
        gap: 8px;
        /* Left edge lines up with the editor box: 32px avatar + 4px gap +
           the quill wrap's 10px offset (which drops to 0 below 769px). */
        margin: 10px 0 0 46px;
    }
    .review-actions-row:empty { display: none; }

    .review-actions-row #submitReviewBtn {
        font-size: 0.82rem;
        padding: 0.35rem 0.9rem;
    }

    /* Send bar is just the checkboxes now — nothing left to push right. */
    #reviewFormBox .review-send-bar { justify-content: flex-start; }
    #reviewFormBox .review-send-checks { margin-right: 0; }
}

@media (max-width: 768px) {
    /* The quill wrap loses its 10px caret offset at this width. */
    .review-actions-row { margin-left: 36px; }
}

/* =========================
   Review Form Card
========================= */

.review-form-card {
    background: linear-gradient(160deg, #ffffff 0%, #f0faf9 100%);
    border: 1px solid rgba(43, 152, 143, 0.18);
    border-radius: 14px;
    padding: 22px 24px 18px;
    margin-bottom: 20px;
}

/* =========================
   "You haven't left a review yet" prompt
========================= */

#reviewCta[hidden],
#reviewStatsCard[hidden] {
    display: none !important;
}
.review-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border-radius: 16px;
    /* Flat: no border, no background fill and no drop shadow — the CTA
       sits directly on the page and leans on its own type and the icon
       badge for weight. */
    border: none;
    background: none;
    box-shadow: none;
    animation: reviewCtaIn 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes reviewCtaIn {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* Icon badge */
.review-cta-badge {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #3fb5aa 0%, #1b6b62 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: rotate(-6deg);
    animation: reviewCtaBob 4s ease-in-out infinite;
}

.review-cta-badge .material-icons {
    font-size: 1.75rem;
}

@keyframes reviewCtaBob {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-3px); }
}

.review-cta-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FFC107;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: reviewCtaTwinkle 2.4s ease-in-out infinite;
}
.review-cta-spark--1 { top: -5px;   right: -6px; }
.review-cta-spark--2 { bottom: 2px; right: -10px; width: 6px; height: 6px; animation-delay: 0.8s; }
.review-cta-spark--3 { top: 8px;    left: -8px;  width: 5px; height: 5px; animation-delay: 1.6s; }

@keyframes reviewCtaTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* Copy */
.review-cta-text {
    flex: 1;
    min-width: 0;
}

.review-cta-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #b7791f;
    margin: 0 0 3px;
}

.review-cta-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #0c3530;
    margin: 0 0 4px;
}

.review-cta-sub {
    font-size: 0.875rem;
    color: #4f615f;
    margin: 0;
    line-height: 1.5;
}

.review-cta-pick-text {
    color: #1b6b62;
    font-weight: 700;
}

/* Quick-start star row */
.review-cta-stars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 0 -3px;
}

.review-cta-star {
    padding: 1px;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    color: #d6dcdb;
    transition: color 0.12s, transform 0.18s cubic-bezier(0.34, 1.6, 0.64, 1);
    animation: reviewCtaStarPulse 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
}

.review-cta-star .material-icons {
    font-size: 21px;
}

@keyframes reviewCtaStarPulse {
    0%, 82%, 100% { color: #d6dcdb; }
    88%           { color: #FFD66B; }
}

/* Fill every star up to the hovered one */
.review-cta-stars:has(.review-cta-star:hover) .review-cta-star,
.review-cta-stars:has(.review-cta-star:focus-visible) .review-cta-star {
    animation: none;
    color: #FFC107;
}
.review-cta-star:hover ~ .review-cta-star,
.review-cta-star:focus-visible ~ .review-cta-star {
    color: #d6dcdb;
}
.review-cta-star:hover,
.review-cta-star:focus-visible {
    transform: scale(1.3) rotate(-8deg);
    outline: none;
}

.review-cta-stars-hint {
    margin-left: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a9896;
}

/* Button with a shine sweep */
.review-cta-btn {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #34ab9f 0%, #1b6b62 100%);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s;
}

.review-cta-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    animation: reviewCtaShine 4.5s ease-in-out 1s infinite;
}

@keyframes reviewCtaShine {
    0%, 70% { left: -60%; }
    100%    { left: 130%; }
}

.review-cta-btn:hover {
    transform: translateY(-2px);
}

.review-cta-btn:active {
    transform: translateY(0);
}

.review-cta-btn .material-icons {
    font-size: 1.1rem;
}

@media (max-width: 576px) {
    .review-cta {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 16px;
    }
    .review-cta-badge {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
    .review-cta-badge .material-icons {
        font-size: 1.45rem;
    }
    .review-cta-text {
        flex: 1 1 calc(100% - 62px);
    }
    .review-cta-title {
        font-size: 1rem;
    }
    .review-cta-star .material-icons {
        font-size: 19px;
    }
    .review-cta-stars-hint {
        flex-basis: 100%;
        margin: 4px 0 0 3px;
    }
    .review-cta-btn {
        flex: 1 0 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-cta,
    .review-cta-badge,
    .review-cta-spark,
    .review-cta-star,
    .review-cta-btn::after {
        animation: none;
    }
    .review-cta-spark { opacity: 0.8; }
}


/* =========================
   Review Form Header
========================= */

.review-form-header {
    position: relative;
    border-bottom: 1px solid rgba(43, 152, 143, 0.12);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.review-form-close {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: 1px solid rgba(43, 152, 143, 0.25);
    color: #2B988F;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.review-form-close:hover {
    background: rgba(43, 152, 143, 0.12);
    color: #1b6b62;
    border-color: rgba(43, 152, 143, 0.45);
}
.review-form-close .material-icons {
    font-size: 1.1rem;
    line-height: 1;
}

.review-form-eyebrow {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #2B988F;
    margin: 0 0 5px;
}

.review-form-eyebrow .material-icons {
    font-size: 0.95rem;
    line-height: 1;
}

.review-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
    line-height: 1.25;
    font-style: italic;
}

/* =========================
   Review Meta Row (stars + track)
========================= */

.review-meta-row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.review-meta-col {
    display: flex;
    flex-direction: column;
}

.review-meta-track {
    flex: 1;
    min-width: 160px;
}

.review-field-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
}

/* Star box — bigger, padded */
.review-star-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.review-star-box .material-icons {
    font-size: 22px;
}

.review-rating-value {
    font-size: 1rem;
    font-weight: 700;
    color: #2B988F;
    white-space: nowrap;
    min-width: 52px;
}

/* =========================================
   REVIEW LAYOUT — APP STYLE
========================================= */

.my-review {
    border-radius: 4px;
    border: 1px solid #e6eaea;
    padding: 18px 20px 22px;
    margin-bottom: 18px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    background-color: #F8FAFB;
}

.review-layout-app {
    border-radius: 8px;
    border: 1px solid #e6eaea;
    padding: 16px 20px 20px;
    margin-bottom: 20px;
    position: relative;
}


.review-app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    line-height: 1;
}


.review-app-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}


.review-app-user {
    font-weight: 600;
    font-size: 0.95rem;
}

.review-app-sub {
    font-size: 0.8rem;
    color: #666;
    display: flex;
    gap: 6px;
    align-items: center;
    line-height: 1;
}

    .review-app-sub .material-icons {
        font-size: 1.1rem; 
        line-height: 1;
        vertical-align: middle;
    }

.review-app-rating {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-top: 2px;
}



.review-app-date {
    margin-left: auto;
    font-size: 0.75rem;
    align-self: center;
    color: #888;
    border-bottom: 1px dashed #d0d0d0;
}

.review-app-favorite {
    font-size: .8rem;
    margin: 6px 6px;
    color: black;
    font-weight: 400;
}

    .review-app-favorite span {
        color: #bb2222;
        font-weight: 600;
    }

.review-app-body {
    background: white;
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.review-app-body.truncatable:not(.expanded) {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.review-app-body.truncatable:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

.review-toggle-link {
    display: block;
    background: white;
    padding: 2px 16px 10px;
    font-size: 0.82rem;
    color: #2B988F;
    cursor: pointer;
    border: none;
    text-align: left;
    width: 100%;
}

.review-toggle-link:hover {
    text-decoration: underline;
    color: #1e7069;
}

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.review-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

    .review-actions button {
        background: none;
        border: none;
        cursor: pointer;
        color: #999;
    }

        .review-actions button:hover {
            color: #2B988F;
        }

.review-inline-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.review-inline-actions button {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: #bbb;
    cursor: pointer;
    transition: color 0.15s;
}

.review-inline-actions button:hover {
    color: #2B988F;
}

.review-inline-actions i {
    font-size: 0.8rem;
}

.review-forum-link {
    text-align: right;
}

    .review-forum-link .btn {
        font-size: 0.8rem;
        padding: 4px 10px;
        border-radius: 20px;
    }

    a.btn.review-forum-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;

    background-color: rgba(43, 152, 143, 0.12) !important;
    color: #2B988F !important;
    border: 1px solid rgba(43, 152, 143, 0.25) !important;

    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

        a.btn.review-forum-btn:hover {
            background-color: rgba(43, 152, 143, 0.18) !important;
            border-color: rgba(43, 152, 143, 0.45) !important;
            box-shadow: 0 2px 6px rgba(43, 152, 143, 0.25) !important;
            transform: translateY(-1px);
            color: #2B988F !important;
            text-decoration: none !important;
        }

        a.btn.review-forum-btn:active {
            transform: translateY(0);
            box-shadow: 0 1px 3px rgba(43, 152, 143, 0.2) !important;
        }

/* =========================================
   FAVORITE TRACK — FULL CARD (PARITY MODE)
========================================= */

.favorite-track-col {
    min-width: 260px;
}

.favorite-track-card {
    background: #f8fafb;
    border: 1px solid #e6eaea;
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    min-height: 74px; /* matches avg rating visual weight */
}

.favorite-track-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

    .favorite-track-content .track-emoji {
        font-size: 1.3rem;
    }

    .favorite-track-content .track-name {
        color: #2B988F;
        font-weight: 700;
    }

    .favorite-track-content .track-count {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 500;
    }

/* =========================================
   MY REVIEW RIBBON — CLEAN APP STYLE
========================================= */

.review-layout-app.my-review {
    position: relative; /* anchor for ribbon */
    overflow: hidden; /* keeps ribbon clean */
}

.my-review-ribbon {
    position: absolute;
    top: 14px;
    right: -34px;
    width: 140px;
    text-align: center;
    background: #2B988F;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 0;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    pointer-events: none;
    padding-left: 10px;
}



    .my-review-ribbon::before {
        left: 0;
    }

    .my-review-ribbon::after {
        right: 0;
    }


.review-sub-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.review-sub-heart {
    font-size: 0.95rem;
    transform: translateY(-1px);
}

.review-sub-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 600;
}

.review-sub-track-name {
    color: #2B988F;
    font-weight: 600;
    display: inline-block;
    line-height: 1;
    transform: translateY(-1px);
}

.review-sub-divider {
    color: #e2e8f0;
    margin: 0 10px;
    font-weight: 300;
}

/* =========================================
   REVIEW STATS BAR — SINGLE CONTAINER HERO
========================================= */

.review-stats-bar {
    background: #f8fafb;
    border: 1px solid #e6eaea;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-top: 20px !important;
}

/* LEFT SIDE CONTENT */
.review-stats-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}


/* ⭐ HERO: CLUB AVERAGE */
.review-stat-avg {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
}

.review-stat-hero-icon {
    font-size: 1.8rem;
    color: #d0d0d0;
    flex-shrink: 0;
}

.review-stat-stars .material-icons {
    font-size: 18px;
    vertical-align: middle;
}

.review-stat-score {
    font-size: 1.15rem;
    font-weight: 800;
    color: #212529;
    white-space: nowrap;
}

.review-stat-count {
    font-size: 0.82rem;
    color: #6b7280;
    white-space: nowrap;
}

/* Divider between stats */
.review-stat-divider {
    width: 1px;
    height: 32px;
    background: #e5e7eb;
}


/* 🎵 FAVORITE TRACK */
.review-stat-track {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
}

.review-stat-sub-icon {
    font-size: 1.2rem;
    color: #d0d0d0;
    flex-shrink: 0;
}

.review-stat-track-text {
    font-size: 0.85rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.review-stat-track-text span {
    font-size: inherit;
    color: #6b7280;
}


/* RIGHT SIDE SORT */
.review-stat-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* pushes it to the right */
    flex-shrink: 0;
}



.review-sort-label {
    font-size: 0.85rem;
    color: #6b7280;
}

.review-sort-select {
    width: auto !important;
    display: inline-block !important;
    min-width: 140px;
    max-width: 180px;
}

#allReviews:has(.queue-empty-state) {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Review highlight (from chat link) ── */
@keyframes review-flash {
    0%   { box-shadow: 0 0 0 3px rgba(43,152,143,0.6); background: #e8f7f6; }
    60%  { box-shadow: 0 0 0 5px rgba(43,152,143,0.3); background: #f0fbfa; }
    100% { box-shadow: none; background: transparent; }
}

.review-card.review-highlight {
    animation: review-flash 2.5s ease forwards;
    border-radius: 8px;
}

/* ── Chat review card ── */
.review-chat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-left: 3px solid #2B988F;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    max-width: 420px;
    margin: 2px 0;
    /* The review excerpt is a bare text node inside the card (see
       ajax/review-post-to-forum-chat.php), so it inherits whatever colour
       the bubble has — white in your own teal bubble, which vanished on the
       light card (worst on the amber retroactive one). The card sets its
       own colour so everything in it reads on its light background. */
    color: #4b5563;
}

.review-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review-chat-rating {
    font-weight: 700;
    color: #2B988F;
    white-space: nowrap;
}

.review-chat-byline {
    color: #374151;
}

.review-chat-card > span,
.review-chat-card > p {
    color: #6b7280;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-chat-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2B988F;
    text-decoration: none;
}

.review-chat-link:hover {
    text-decoration: underline;
    color: #17756D;
}

/* Retroactive variant — same shape, amber accent so it reads as "this
   was posted after the fact" without screaming for attention. */
.review-chat-card--retro {
    border-left-color: #d97706;
    background: #fffbeb;
}
.review-chat-card--retro .review-chat-rating {
    color: #b45309;
}
.review-chat-card--retro .review-chat-link {
    color: #b45309;
}
.review-chat-card--retro .review-chat-link:hover {
    color: #92400e;
}
.review-chat-retro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 1px 7px;
    background: #fde68a;
    color: #78350f;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.review-chat-retro .material-icons {
    font-size: 0.85rem;
}

/* The phone chat whitens every link inside your own bubble
   (dash-mobile.css: #pane-live-chat .chat-msg-own .msg-text a), which out-
   ranks the card's own link colour and left "View Review →" white on the
   card. The card sits on its own light background, so its links keep their
   colours in any bubble. */
.msg-text .review-chat-card .review-chat-link { color: #2B988F !important; }
.msg-text .review-chat-card .review-chat-link:hover { color: #17756D !important; }
.msg-text .review-chat-card--retro .review-chat-link { color: #b45309 !important; }
.msg-text .review-chat-card--retro .review-chat-link:hover { color: #92400e !important; }
.msg-text .review-chat-card .review-chat-byline { color: #374151; }

/* Forum thread body: subtle amber rail when the OP is a retroactive
   review so threads in the list visually echo the chat card variant. */
.review-forum-body--retro {
    border-left: 3px solid #f59e0b;
    padding: 8px 12px;
    background: #fffdf5;
    border-radius: 0 6px 6px 0;
}

/* ── Review Quote Card (when a review message is quoted/replied-to in chat) ── */
.review-quote-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #fffdf5 0%, #fff9ea 100%);
    border: 1px solid rgba(218, 155, 30, 0.22);
    border-left: 3px solid #e8a020;
    border-radius: 6px;
    font-size: 0.85rem;
}

.rqc-header {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.rqc-stars {
    font-weight: 700;
    color: #b37000;
    white-space: nowrap;
    font-size: 0.88rem;
}

.rqc-byline {
    color: #374151;
    font-size: 0.82rem;
    flex: 1 1 auto;
    min-width: 0;
}

.rqc-jump {
    font-size: 0.74rem;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}

.rqc-jump:hover { color: #6b7280; }

.rqc-snippet {
    color: #6b7280;
    font-style: italic;
    font-size: 0.82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rqc-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #c67c00;
    text-decoration: none;
    align-self: flex-start;
}

.rqc-link:hover {
    color: #a85f00;
    text-decoration: underline;
}

/* =============================================
   MOBILE OVERRIDES
   ============================================= */
@media (max-width: 768px) {

    /* ── Stats bar container: tighten padding, allow content to show ── */
    .review-stats-card {
        padding: 12px 14px;
    }

    /* ── Stats bar: stack rating + fav track vertically ── */
    .review-stats-main {
        flex-wrap: wrap;
        gap: 6px;
        overflow: hidden;
    }

    .review-stat-avg {
        flex: 0 0 100%;
        min-width: 0;
    }

    /* Hide the inline pipe divider — doesn't make sense when stacked */
    .review-stats-main > .review-sub-divider {
        display: none;
    }

    .review-stat-track {
        flex: 0 0 100%;
        font-size: 0.82rem;
        min-width: 0;
        overflow: hidden;
    }

    .review-stat-track-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .review-stat-hero-icon {
        font-size: 1.1rem;
    }

    .review-stat-score {
        font-size: 0.9rem;
    }

    .review-stat-count {
        font-size: 0.75rem;
    }

    /* Override inline font-size on individual star spans */
    .review-stat-stars .material-icons {
        font-size: 11px !important;
    }

    /* Shrink stars inside review cards too */
    .review-app-stars .material-icons {
        font-size: 10px !important;
    }

    .review-app-rating {
        font-size: 0.78rem;
    }

    /* ── Review form card: tighter padding ── */
    .review-form-card {
        padding: 16px 14px 14px;
    }

    /* ── Review form: tighter gap on meta row, wraps if needed ── */
    .review-meta-row {
        gap: 12px;
    }

    /* Remove min-width so track select doesn't overflow */
    .review-meta-track {
        min-width: 0;
    }

    /* ── Review Quill wrap: collapsible wrapping toolbar (no horizontal scroll) ── */
    .review-quill-wrap {
        min-width: 0;
    }
    .review-quill-wrap::before,
    .review-quill-wrap::after { display: none; }
    .review-quill-wrap .ql-toolbar.ql-snow,
    .review-quill-wrap .ql-container.ql-snow { margin-left: 0; }
    .review-quill-wrap .ql-toolbar.ql-snow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 2px;
        padding: 4px 36px 4px 6px; /* room for the toggle on the right */
        max-height: 36px;
        overflow: hidden;
        transition: max-height 0.2s ease;
    }
    .review-quill-wrap.is-toolbar-expanded .ql-toolbar.ql-snow {
        max-height: 240px;
    }
    .review-quill-wrap .ql-toolbar.ql-snow .ql-formats {
        display: inline-flex;
        align-items: center;
        margin-right: 6px;
        vertical-align: middle;
    }
    /* Anchor the toggle to the wrap itself so it sits in line with the
       toolbar regardless of the toolbar's flex content/overflow state. */
    .review-quill-wrap .ql-toolbar-more-btn {
        position: absolute;
        right: 6px;
        top: 4px;
        background: transparent;
        border: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        cursor: pointer;
        padding: 0;
        line-height: 0;
        z-index: 2;
    }
    .review-quill-wrap .ql-toolbar-more-btn .material-icons {
        font-size: 22px;
        transition: transform 0.2s ease;
    }
    .review-quill-wrap.is-toolbar-expanded .ql-toolbar-more-btn .material-icons {
        transform: rotate(180deg);
    }

    /* ── Review send bar: stack checks on top, buttons right-aligned below ── */
    .review-send-bar {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        margin-left: 0;
        padding: 8px 10px;
    }
    .review-send-checks {
        flex: 0 0 100%;
        margin-right: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
    .review-send-bar .btn,
    #submitReviewBtn {
        font-size: 0.78rem;
        padding: 0.25rem 0.55rem;
    }

    /* ── Review cards ── */
    .review-layout-app {
        padding: 12px 14px 14px;
        margin-bottom: 12px;
    }

    .review-app-header {
        gap: 10px;
        margin-bottom: 10px;
        align-items: flex-start;
    }

    .review-avatar {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    .review-app-meta {
        flex: 1;
        min-width: 0;
    }

    /* Username row: stack name → date → actions vertically */
    .review-app-user {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        font-size: 0.88rem;
    }

    .review-app-user .text-muted {
        font-size: 0.72rem;
    }


    /* Sub row: stars + rating on first line, fav track below */
    .review-app-sub {
        flex-wrap: wrap;
        gap: 7px 8px;
        font-size: 0.78rem;
    }

    /* Fav track gets its own line, smaller text */
    .review-sub-track {
        flex: 0 0 100%;
        font-size: 0.72rem;
        min-width: 0;
        overflow: hidden;
    }

    .review-sub-heart {
        font-size: 0.7rem;
    }

    .review-sub-label {
        font-size: 0.72rem;
        flex-shrink: 0;
    }

    .review-sub-track-name {
        font-size: 0.72rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Hide the | divider before fav track on mobile */
    .review-sub-divider {
        display: none;
    }

    .review-app-body {
        padding: 10px 12px;
        font-size: 0.88rem;
    }

    .review-app-body.truncatable:not(.expanded) {
        max-height: 130px;
    }

    /* Forum link button at bottom of card */
    .review-app-footer {
        margin-top: 10px !important;
    }
}

/* ── Stack rating + track fields on very narrow screens ── */
@media (max-width: 590px) {
    .review-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .review-meta-track {
        min-width: 0;
    }
}

/* =========================================
   STAR RATING SLIDER (window.raStarSlider, review-panel.js)
   Review form, inline edit form and the archive review modal. Tap anywhere
   on the stars or drag across them; a bubble shows the value above the
   finger while dragging.
========================================= */
.ra-star-slider {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.ra-star-slider:focus-visible { outline: 2px solid #2B988F; outline-offset: 4px; border-radius: 6px; }
.ra-star-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 99px;
    background: #0c3530;
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) scale(.6);
    transform-origin: bottom center;
    transition: opacity .12s ease, transform .12s ease;
}
.ra-star-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #0c3530;
}
.ra-star-slider.is-dragging .ra-star-bubble { opacity: 1; transform: translateX(-50%) scale(1); }

/* Phones: the rating gets its own full-width row and the ten stars grow to
   fill it (10cqw each = exactly the box's width), capped at 40px, with the
   value in large type beside them. Bigger targets + drag = no more
   tap-and-hope. */
@media (max-width: 991px) {
    .review-meta-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .review-meta-row > .review-meta-col { width: 100%; }
    .review-meta-col > .d-flex:has(.review-star-box) { gap: 12px !important; margin-top: 8px !important; }
    .review-star-box {
        flex: 1 1 auto;
        min-width: 0;
        container-type: inline-size;
        padding: 12px 10px;
        border-radius: 14px;
        justify-content: center;
    }
    .review-star-box .material-icons { font-size: min(10cqw, 40px) !important; }
    .review-rating-value {
        min-width: 76px;
        font-size: 1.35rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .arch-review-rate {
        container-type: inline-size;
        padding: 14px 12px;
        border-radius: 14px;
        gap: 10px;
    }
    .arch-review-stars-bg .material-icons,
    .arch-review-stars-fg .material-icons { font-size: min(calc((100cqw - 70px) / 10), 40px); }
    .arch-review-rate__value { font-size: 1.35rem; font-variant-numeric: tabular-nums; margin-left: auto; }
}