/* ============================================================
   flat-surfaces.css — FindFyre global override layer
   Loaded LAST in Site.Master (after each page's own CSS) and
   prefixed with body.ff-dark / body.fp-light so these rules win
   even over page rules that use !important.

   Model:
     • Page background is one solid fill (theme.css --ff-bg).
     • MESSAGES is fully blended in BOTH themes — no card boxes, just a
       divider + row separators (fansly chat style).
     • EVERY OTHER content page (settings, payments, banking,
       notifications, create-post, feed, profile) uses the SAME
       look as the notifications page: unified var(--ff-bg) panels with
       a subtle hairline border, NO darker fills, NO shadow, NO blur.
       Borders stay "where they matter" to group content.

   Deliberately NOT touched (meant to stand out / float):
     • Modals & popups (.oo-popup, .latest-pop, .dot-pop-up,
       .wallet-modal, notification modal, jquery-confirm)
     • Buttons, chips/pills, badges, avatars, pink CTAs, nav highlights
     • Nav chrome (.fp-topbar, .fp-sidebar) — the app frame
     • Inputs/textareas (keep their field styling so forms are usable)
   ============================================================ */


/* ========================================================
   DARK MODE
   ======================================================== */

/* ── MESSAGES — fully blended (one continuous surface) ──────────
   No card boxes: no border, no radius, no shadow, no blur. */
body.ff-dark .message-section .chatting,
body.ff-dark .message-section .messages,
body.ff-dark .message-section .click-message-block {
    background: var(--ff-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Messages — one subtle vertical divider between the left column
   (inbox or the new-message picker) and the thread on the right. */
body.ff-dark .message-section .messages,
body.ff-dark .message-section .click-message-block {
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Messages — search field: quiet inset, not a dark overlay box. */
body.ff-dark .message-section .msg-search-block {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Messages — empty state: quiet muted text, no pink bordered box. */
body.ff-dark .message-section .no-results-settings {
    background: transparent !important;
    border: none !important;
}

/* Messages — conversation rows: hairline separators, slight radius on hover/active so the row is easy to hit. */
body.ff-dark .message-section .msg-wrap {
    border-radius: 10px !important;
    border-bottom: none !important;
}
body.ff-dark .message-section .msg-wrap:last-child {
    border-bottom: none !important;
}

/* Messages — align the two column headers so their bottom borders
   line up neatly (empty-state right header only, so an open
   conversation header keeps its natural height). */
body.ff-dark .message-section .msg-head,
body.ff-dark .message-section .chating-message .chatting-head {
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
    align-items: center !important;
}
body.ff-dark .message-section .chating-message .chatting-head {
    display: flex !important;
}

/* Messages — composer bar: flat, keeps its own top edge. */
body.ff-dark .message-section .chat-form {
    background: var(--ff-bg) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}


/* ── EVERY OTHER CONTENT PAGE — notifications-style bordered panels ─
   Unified with page bg (var(--ff-bg)), subtle hairline border, no shadow/blur.
   Panels keep their own rounded corners. Covers:
     payments / banking             (.settings.new-setting …, not /my/settings)
     feed / profile / generic cards (.fp-…, .card-dark, …)
   Open settings-shell pages (settings, create, banking) skip when
   .fs-settings-main is present — they use hairline section dividers, not cards. */
body.ff-dark:not(:has(.fs-settings-main)) .settings.new-setting .setting-menu,
body.ff-dark:not(:has(.fs-settings-main)) .settings.new-setting .account-content,
body.ff-dark:not(:has(.fs-settings-main)) .settings.new-setting .fs-section,
body.ff-dark:not(:has(.fs-settings-main)) .create-post-page .fcp-side-panel,
body.ff-dark:not(:has(.fs-settings-main)) .create-post-page .fcp-main-card .account-content,
body.ff-dark:not(:has(.fs-settings-main)) .create-post-page .fs-section,
body.ff-dark .fp-card,
body.ff-dark .fp-feed-card,
body.ff-dark .following-content,
body.ff-dark .fp-right-column,
body.ff-dark .card-dark,
body.ff-dark .bookmark-section .recommended-wrap {
    background: var(--ff-bg) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ── Bars / media placeholders: match the page, keep their own edges ── */
body.ff-dark .fp-banner-carousel,
body.ff-dark .fp-banner-placeholder,
body.ff-dark .video-block {
    background: var(--ff-bg) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}


/* ========================================================
   LIGHT MODE
   ======================================================== */

/* ── MESSAGES — same blended split-pane as dark ───────────────
   No card boxes: no border, no radius, no shadow, no blur.
   One hairline between the inbox column and the thread. */
body.fp-light .message-section .chatting,
body.fp-light .message-section .messages,
body.fp-light .message-section .click-message-block {
    background: var(--ff-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.fp-light .message-section .messages,
body.fp-light .message-section .click-message-block {
    border-right: 1px solid var(--border-subtle) !important;
}

body.fp-light .message-section .msg-search-block {
    background: rgba(10, 48, 73, 0.04) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.fp-light .message-section .no-results-settings {
    background: transparent !important;
    border: none !important;
}

body.fp-light .message-section .msg-wrap {
    border-radius: 10px !important;
    border-bottom: none !important;
}
body.fp-light .message-section .msg-wrap:last-child {
    border-bottom: none !important;
}

body.fp-light .message-section .msg-head,
body.fp-light .message-section .chating-message .chatting-head {
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
    align-items: center !important;
}
body.fp-light .message-section .chating-message .chatting-head {
    display: flex !important;
}

body.fp-light .message-section .chat-form {
    background: var(--ff-bg) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* All headers and subheaders use the brand navy in light mode.
   Profile overlay display name sits on the dark banner — keep it white. */
body.fp-light h1:not(.fp-display-name),
body.fp-light h2,
body.fp-light h3,
body.fp-light h4,
body.fp-light h5,
body.fp-light h6 {
    color: #0a3049 !important;
}

/* Feed pages: flat post list, no card boxes */
body.ff-dark .bookmark-section .following-content,
body.fp-light .bookmark-section .following-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.ff-dark .bookmark-section .bookmark-wrap,
body.ff-dark .bookmark-section .recommended-wrap.profile-slide {
    border: none !important;
    box-shadow: none !important;
}

/* Profile page: flat posts with hover + hairline like the other feeds */
body.ff-dark .fp-profile-page #fp-posts .following-content,
body.ff-dark .fp-profile-page #fp-posts-private-sub .following-content,
body.ff-dark .fp-profile-page #fp-posts-private-pre .following-content,
body.fp-light .fp-profile-page #fp-posts .following-content,
body.fp-light .fp-profile-page #fp-posts-private-sub .following-content,
body.fp-light .fp-profile-page #fp-posts-private-pre .following-content,
body.ff-dark .fp-mobile-shell .following-content,
body.fp-light .fp-mobile-shell .following-content {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: none !important;
}

body.fp-light .fp-profile-page #fp-posts .following-content,
body.fp-light .fp-profile-page #fp-posts-private-sub .following-content,
body.fp-light .fp-profile-page #fp-posts-private-pre .following-content,
body.fp-light .fp-mobile-shell .following-content {
    border-bottom-color: transparent !important;
}

.fp-profile-page #fp-posts .following-content:last-child,
.fp-profile-page #fp-posts-private-sub .following-content:last-child,
.fp-profile-page #fp-posts-private-pre .following-content:last-child {
    border-bottom: none !important;
}

body.ff-dark .fp-profile-page #fp-posts .following-content:hover,
body.ff-dark .fp-profile-page #fp-posts-private-sub .following-content:hover,
body.ff-dark .fp-profile-page #fp-posts-private-pre .following-content:hover,
body.ff-dark .fp-mobile-shell .following-content:hover,
.fp-profile-page #fp-posts .following-content:hover,
.fp-profile-page #fp-posts-private-sub .following-content:hover,
.fp-profile-page #fp-posts-private-pre .following-content:hover,
.fp-mobile-shell .following-content:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}

body.fp-light .fp-profile-page #fp-posts .following-content:hover,
body.fp-light .fp-profile-page #fp-posts-private-sub .following-content:hover,
body.fp-light .fp-profile-page #fp-posts-private-pre .following-content:hover,
body.fp-light .fp-mobile-shell .following-content:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Light mode: titles, usernames, and stat numbers stay brand navy */
body.fp-light h1:not(.fp-display-name):not(.fp-display-name-text),
body.fp-light h2,
body.fp-light h3,
body.fp-light h4,
body.fp-light h5,
body.fp-light h6,
body.fp-light .fs-people-name,
body.fp-light .fs-people-stat-value,
body.fp-light .fs-people-title,
body.fp-light .settings-save h1,
body.fp-light .fp-accsidebar-uname,
body.fp-light .fp-info-value,
body.fp-light .user-name,
body.fp-light .user-id {
    color: #0a3049 !important;
}

/* Supporting copy: slightly lifted navy so it is not identical to headers,
   but still readable on white (no washed-out 45% greys). */
body.fp-light {
    --text-secondary: #245870;
    --text-muted: #3a6b82;
    --ff-text-secondary: #245870;
}

body.fp-light ::placeholder {
    color: #3a6b82 !important;
    opacity: 1 !important;
}

body.fp-light .fs-choice-text,
body.fp-light .fs-choice-item,
body.fp-light .settings.new-setting .fs-choice-item,
body.fp-light .settings.new-setting .radio-btns label.agree,
body.fp-light .create-post-page .fcp-chip.create-check.fs-choice-item,
body.fp-light .create-post-page .fcp-chip.create-check.fs-choice-item:has(input:checked),
body.fp-light .fs-bio-box textarea,
body.fp-light .fcp-upload-title,
body.fp-light .fcp-tags-menu-item b,
body.fp-light .settings.new-setting .active-setting,
body.fp-light .settings.new-setting .setting-menu .active-setting,
body.fp-light .settings.new-setting .active-setting .setting-name,
body.fp-light .ff-login-heading,
body.fp-light .ff-login-label {
    color: #0a3049 !important;
}

body.fp-light label:not([class*="btn"]):not(.fp-display-name):not(.fs-choice-item):not(.create-check),
body.fp-light .fs-identity-fields .fs-field label,
body.fp-light .fs-field label,
body.fp-light .fill-name label,
body.fp-light .fs-toggle-card p,
body.fp-light .fcp-toggle-label,
body.fp-light .fcp-tags-menu-item,
body.fp-light .fcp-price-tip,
body.fp-light .settings.new-setting .setting:not(.active-setting),
body.fp-light .ff-login-subheading,
body.fp-light .ff-login-signup-row,
body.fp-light .jconfirm .jconfirm-content label,
body.fp-light .ffhelp-answer,
body.fp-light .ffhelp-page .policy-text,
body.fp-light .ffhelp-page .policy-list-item,
body.fp-light .ffdoc-paper .policy-text,
body.fp-light .ffdoc-paper .policy-list-item,
body.fp-light .ffdoc-paper p,
body.fp-light .ffdoc-note p,
body.fp-light .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content,
body.fp-light .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content p {
    color: #245870 !important;
}

body.fp-light .fs-helper,
body.fp-light .fs-content-subtitle,
body.fp-light .fs-section-title p,
body.fp-light .fcp-media-hint,
body.fp-light .fcp-upload-sub,
body.fp-light .fcp-tip-text span,
body.fp-light .fcp-tags-clear,
body.fp-light .fcp-tags-counter:not(.is-full),
body.fp-light .fcp-tags-row-label,
body.fp-light .fcp-tags-browse:not(:hover):not(.is-open),
body.fp-light .fcp-price-tip-sub,
body.fp-light .fcp-confirm-facts span,
body.fp-light .fp-text-muted,
body.fp-light .fp-post-meta,
body.fp-light .fp-stat-label,
body.fp-light .fp-nav-section-label,
body.fp-light .fp-content-tab:not(.fp-tab-active),
body.fp-light .fp-info-label,
body.fp-light .fp-modal-note,
body.fp-light .fp-accsidebar-status,
body.fp-light .fp-accsidebar-ref-desc,
body.fp-light .fyre-sidebar__section-label,
body.fp-light .fyre-sidebar__boost-sub,
body.fp-light .msg-media-hint,
body.fp-light .msg-upload-sub,
body.fp-light .msg-broadcast-copy span,
body.fp-light .msg-new-or,
body.fp-light .media-message-kicker,
body.fp-light .ffp-top-copy span,
body.fp-light .ffp-meta,
body.fp-light .ffp-empty p,
body.fp-light .ffp-earn-strip,
body.fp-light .ffp-thumb-kicker,
body.fp-light .ffp-modal-card p,
body.fp-light .fd-status,
body.fp-light .fd-card-head p,
body.fp-light .fd-stat-label,
body.fp-light .fd-stat-delta,
body.fp-light .fd-progress-label,
body.fp-light .fd-next-done p,
body.fp-light .fd-check-text span,
body.fp-light .fd-empty,
body.fp-light .fd-review-hint,
body.fp-light .fs-verify-mini p,
body.fp-light .ffshare-apps-label,
body.fp-light .ffshare-qr-caption,
body.fp-light .ff-login-or,
body.fp-light .ff-login-legal,
body.fp-light .fs-url-origin,
body.fp-light .fs-people-stat-label,
body.fp-light .settings.new-setting .fs-content-subtitle,
body.fp-light .settings.new-setting .fs-section-title p,
body.fp-light .settings.new-setting .fs-helper,
body.fp-light .settings.new-setting .fs-verify-slot-copy p,
body.fp-light .settings.new-setting .fs-tags-count:not(.is-full),
body.fp-light .settings.new-setting .fs-tags-nudge,
body.fp-light .settings.new-setting .account-slider:not(.fs-verify-upload-wrap) .fcp-upload-sub,
body.fp-light .settings.fd-dashboard .fd-status,
body.fp-light .settings.fd-dashboard .fd-card-head p,
body.fp-light .settings.fd-dashboard .fd-stat-label,
body.fp-light .settings.fd-dashboard .fd-stat-delta,
body.fp-light .settings.fd-dashboard .fd-progress-label,
body.fp-light .settings.fd-dashboard .fd-next-done p,
body.fp-light .settings.fd-dashboard .fd-check-text span,
body.fp-light .settings.fd-dashboard .fd-empty,
body.fp-light .settings.fd-dashboard .fd-review-hint,
body.fp-light .settings.fd-posts-view .ffp-top-copy span,
body.fp-light .settings.fd-posts-view .ffp-meta,
body.fp-light .settings.fd-posts-view .ffp-empty p,
body.fp-light .settings.fd-posts-view .ffp-earn-strip {
    color: #3a6b82 !important;
}