/* ============================================================
   FansXpress — Liquid Glass desktop sidebar (md+)
   Applies to .fx-glass-sidebar (side-menu) and .sidebar (More drawer).
   Brand accent = var(--primary, #d10054). Desktop only.
   ============================================================ */

@media (min-width: 768px) {

    /*
        Fixed (sticky) full-height sidebar, square edges, no border/shadow, no scrollbar.

        The left rail is excluded. It carries pt-4 p-0 like its siblings, so this rule was
        stripping its padding as well -- and because the selector names a parent and two
        classes it beat the rail's own padding-top outright, which is why the ten pixels set
        there never appeared and the border ran straight into the header.
    */
    .main-wrapper > div.pt-4.p-0:not(.fx-layout-sidebar) { padding-top: 0 !important; }

    /*
        The left rail, less the fixed header.

        It pinned at 0 and stood a full viewport tall, so its bottom 60px lay under the
        header's own height and the last menu item could not be reached. Same fault as the
        messenger panel, same cause: a fixed header overlays the window rather than taking
        room in the flow, so anything measured as 100vh is that much too tall.
    */
    .fx-glass-sidebar {
        position: sticky !important;
        top: 60px !important;
        align-self: flex-start;
        height: calc(100vh - 60px) !important;
        height: calc(100dvh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 0;
        border: none;
        box-shadow: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        scrollbar-width: none;                 /* Firefox: hide scrollbar */
        -ms-overflow-style: none;              /* IE/Edge */
    }

    /* Hide the scrollbar (WebKit) */
    .fx-glass-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

    .fx-glass-sidebar.side-menu-theme-light {
        background: rgba(255, 255, 255, .55);
    }

    .fx-glass-sidebar.side-menu-theme-dark {
        background: rgba(13, 20, 34, .5);
        border-color: rgba(255, 255, 255, .12);
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, .1),
            0 18px 50px rgba(0, 0, 0, .5);
    }

    /* Ambient mesh — behind the sidebar only */
    .fx-side-mesh {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        overflow: hidden;
        pointer-events: none;
    }

    /* ambient mesh disabled — no blur/glass effects anywhere on the site */
    .fx-side-mesh, .fx-side-mesh::before { display: none !important; }

    .side-menu-theme-light .fx-side-mesh::before {
        background:
            radial-gradient(circle at 25% 15%, rgba(209,0,84, .18), transparent 42%),
            radial-gradient(circle at 80% 30%, rgba(124, 58, 237, .12), transparent 45%),
            radial-gradient(circle at 60% 90%, rgba(70, 72, 212, .10), transparent 50%);
    }

    .side-menu-theme-dark .fx-side-mesh::before {
        opacity: .5;
        background:
            radial-gradient(circle at 25% 12%, rgba(209,0,84, .30), transparent 42%),
            radial-gradient(circle at 82% 32%, rgba(124, 58, 237, .22), transparent 46%),
            radial-gradient(circle at 55% 90%, rgba(0, 200, 255, .12), transparent 52%);
    }

    @keyframes fxMeshMove {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(4%, 4%) rotate(2deg); }
        66% { transform: translate(-4%, 2%) rotate(-1deg); }
    }

    /* Keep all content above the mesh */
    .fx-glass-sidebar > *:not(.fx-side-mesh) {
        position: relative;
        z-index: 1;
    }

    /* ---------- Brand row ---------- */
    .fx-glass-sidebar .fx-brand {
        border-radius: 16px;
        padding: 0 .5rem .5rem .5rem;
        align-items: center;
    }

    .fx-avatar-wrap {
        position: relative;
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
    }

    .fx-avatar-ring {
        display: block;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        padding: 2px;
        background: linear-gradient(135deg, #ff5fae, #d10054);   /* gorgeous pink gradient ring */
    }

    .fx-avatar-ring .user-avatar {
        width: 100% !important;
        height: 100% !important;
        border: 2px solid #ffffff;   /* theme-overridden below */
        object-fit: cover;
    }

    .fx-status-dot {
        position: absolute;
        right: 1px;
        bottom: 1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #10b981;
        border: 2px solid rgba(255, 255, 255, .9);
    }

    .side-menu-theme-dark .fx-status-dot { border-color: #0d1422; }

    .fx-brand-name { font-weight: 800; letter-spacing: -.01em; }
    .fx-brand:hover .fx-brand-name { color: var(--primary, #d10054); }

    /* ---------- Compact top icon row ---------- */
    /* Liquid Glass — same recipe as the mobile bottom nav (.fx-liquid) */
    .fx-icon-row {
        position: relative;
        align-items: center;
        justify-content: space-between;
        gap: .2rem;
        padding: .3rem;
        margin: 0 .25rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .28);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, .45);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, .5),
            0 2px 8px rgba(0, 0, 0, .05);
        isolation: isolate;
    }

    /* Specular sheen on the top edge */
    .fx-icon-row::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%);
        pointer-events: none;
        z-index: 0;
    }
    /* Keep the buttons above the sheen */
    .fx-icon-row > * { position: relative; z-index: 1; }

    .side-menu-theme-dark .fx-icon-row {
        background: rgba(23, 31, 51, .42);
        border-color: rgba(255, 255, 255, .16);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, .12),
            0 2px 10px rgba(0, 0, 0, .22);
    }

    .fx-icon-btn {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        border-radius: 999px;
        color: inherit;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease, transform .15s ease;
    }

    .fx-icon-btn:hover { background: rgba(138, 150, 163, .16); }
    .side-menu-theme-dark .fx-icon-btn:hover { background: rgba(255, 255, 255, .1); }

    .fx-icon-btn .ion-icon-wrapper,
    .fx-icon-btn ion-icon { font-size: 1.35rem; }

    .fx-icon-btn.active {
        background: color-mix(in srgb, var(--primary, #d10054) 14%, transparent);
        color: var(--primary, #d10054);
    }
    .fx-icon-btn.active ion-icon,
    .fx-icon-btn.active .ion-icon-wrapper { color: var(--primary, #d10054); }

    .fx-theme-toggle ion-icon { color: var(--primary, #d10054); }

    /* Icon-row badges */
    .fx-badge-dot {
        position: absolute;
        top: 7px;
        right: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary, #d10054);
    }

    .fx-badge-count {
        position: absolute;
        top: 2px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        /* Solid pink pill with the number — same in light AND dark. No ring/shadow (that
           looked like an empty circle when the badge was hidden/behind). */
        background: var(--primary, #d10054) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* When empty (count 0) the badge carries d-none from the blade; make doubly sure it
       never shows as an empty circle in either theme. */
    .fx-badge-count.d-none,
    .fx-badge-count:empty { display: none !important; }

    /* Desktop right-topbar badge position (user-specified): sit on the icon's top-right
       corner. Keeps the solid pink pill + white text from .fx-badge-count above. */
    .fx-right-topbar .fx-badge-count {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 15px;
        height: 15px;
        padding: 0 5px;
        border-radius: 9px;
        color: #fff;
        font-size: 11px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---------- Nav pills ---------- */
    .fx-glass-sidebar .user-side-menu .nav-link.h-pill-primary {
        background: transparent !important;
        border-radius: 14px !important;
        margin-bottom: .15rem;
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    .fx-glass-sidebar .user-side-menu .nav-link.h-pill-primary:hover {
        background: rgba(138, 150, 163, .12) !important;
        transform: translateX(2px);
    }
    .side-menu-theme-dark .user-side-menu .nav-link.h-pill-primary:hover {
        background: rgba(255, 255, 255, .07) !important;
    }

    .fx-glass-sidebar .user-side-menu .nav-link.h-pill-primary.active {
        background: color-mix(in srgb, var(--primary, #d10054) 12%, transparent) !important;
        color: var(--primary, #d10054) !important;
    }
    .fx-glass-sidebar .user-side-menu .nav-link.h-pill-primary.active ion-icon,
    .fx-glass-sidebar .user-side-menu .nav-link.h-pill-primary.active .side-menu-label {
        color: var(--primary, #d10054) !important;
    }

    /* ---------- Icon uniformity (nav + top icon row) ---------- */
    /* Every nav icon sits in a fixed 26px box and renders at one size/weight. */
    .fx-glass-sidebar .user-side-menu .icon-wrapper {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }
    .fx-glass-sidebar .user-side-menu .icon-wrapper .ion-icon-wrapper,
    .fx-glass-sidebar .user-side-menu .icon-wrapper ion-icon,
    .fx-glass-sidebar .user-side-menu .icon-wrapper svg {
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
    }
    /* Uniform stroke weight so outline icons don't look thinner/heavier */
    .fx-glass-sidebar .user-side-menu .icon-wrapper svg {
        stroke-width: 1.9px;
    }
    /* Top icon row: identical glyph sizing */
    .fx-icon-btn .ion-icon-wrapper,
    .fx-icon-btn ion-icon,
    .fx-icon-btn svg {
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
    }
    .fx-icon-btn svg { stroke-width: 1.9px; }

    /* ---------- Label typography (professional) ---------- */
    .fx-glass-sidebar .side-menu-label {
        font-size: .95rem;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.2;
    }
    .fx-glass-sidebar .user-side-menu .nav-link.h-pill-primary {
        padding-top: .55rem !important;
        padding-bottom: .55rem !important;
    }
    .fx-glass-sidebar .user-side-menu .nav-link .icon-wrapper + .side-menu-label,
    .fx-glass-sidebar .user-side-menu .nav-link .side-menu-label { margin-left: .85rem !important; }

    /* ---------- CREATE + BULK POST glow buttons ---------- */
    .fx-glass-sidebar .side-menu-action-btn.btn-primary {
        box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--primary, #d10054) 55%, transparent);
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .fx-glass-sidebar .side-menu-action-btn.btn-primary:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
    }

    /* ---------- Cursor shimmer glow ---------- */
    .fx-glow-el { position: relative; overflow: hidden; }
    .fx-glow-el::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle 160px at var(--gx, -200px) var(--gy, -200px), rgba(209,0,84, .22), transparent 65%);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
        z-index: 0;
    }
    .side-menu-theme-dark .fx-glow-el::after {
        background: radial-gradient(circle 160px at var(--gx, -200px) var(--gy, -200px), rgba(255, 255, 255, .16), transparent 65%);
    }
    .fx-glow-el:hover::after { opacity: 1; }
    .fx-glow-el > *:not(.fx-side-mesh) { position: relative; z-index: 1; }
}

/* ============================================================
   "More" off-canvas drawer — same glass treatment
   ============================================================ */
.sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sidebar:not(.light) {
    background: rgba(13, 20, 34, .8) !important;
}
.sidebar.light {
    background: rgba(255, 255, 255, .82) !important;
}
.sidebar .menu-elements a:hover,
.sidebar .menu-elements button:hover {
    background: color-mix(in srgb, var(--primary, #d10054) 10%, transparent);
    border-radius: 12px;
}

/* ---- Wallet icon amount (inside the sidebar icon-row button) ---- */
.fx-wallet-btn {
    flex-direction: row !important;
    align-items: center;
    gap: 2px;
    height: 40px !important;
    padding: 0 4px;
}
.fx-wallet-dollar {
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary, #d10054);
}
.fx-wallet-btn-amount {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary, #d10054);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Wallet quick popover (moved to <body> at runtime, positioned by JS) ---- */
.fx-wallet-pop-wrap { position: relative; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.fx-wallet-pop-wrap .fx-wallet-btn { width: 100%; }
/* Hidden by default even before JS makes it floating, so it never shows inline. */
.fx-wallet-pop { display: none; }
.fx-wallet-pop.fx-wallet-pop-floating { display: block; }
.fx-wallet-pop.fx-wallet-pop-floating {
    position: fixed;
    left: 0;
    top: 0;
    width: 285px !important;
    min-width: 285px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16) !important;
    border: 1px solid #eceaf0 !important;
    padding: 18px 16px 14px !important;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.fx-wallet-pop.fx-wallet-pop-floating.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Dark theme: JS adds .is-dark based on the sidebar's theme */
.fx-wallet-pop.fx-wallet-pop-floating.is-dark {
    background: #1e222d !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
    color: #e9edf2 !important;
}

.fx-wallet-pop-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #8a96a3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 2px !important;
}

.fx-wallet-pop-amount {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 2px 0 10px !important;
    color: #1c1e21 !important;
    letter-spacing: -0.01em !important;
}
.fx-wallet-pop.is-dark .fx-wallet-pop-amount {
    color: #ffffff !important;
}

.fx-wallet-pop-quick-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8a96a3 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Custom wallet amount input form inside dropdown popover */
.fx-wallet-custom-form {
    margin-bottom: 10px !important;
}
.fx-wallet-input-group {
    position: relative !important;
    background: #f0f2f5 !important;
    border: 1px solid #e4e6eb !important;
    border-radius: 10px !important;
    padding: 3px 4px 3px 10px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}
.fx-wallet-pop.is-dark .fx-wallet-input-group {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.fx-wallet-input-group:focus-within {
    border-color: var(--primary, #d10054) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(209, 0, 84, 0.12) !important;
}
.fx-wallet-pop.is-dark .fx-wallet-input-group:focus-within {
    background: #141720 !important;
    box-shadow: 0 0 0 3px rgba(209, 0, 84, 0.2) !important;
}
.fx-wallet-currency-prefix {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--primary, #d10054) !important;
    margin-right: 4px !important;
    user-select: none !important;
}
.fx-wallet-custom-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 32px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
}
.fx-wallet-pop.is-dark .fx-wallet-custom-input {
    color: #ffffff !important;
}
.fx-wallet-custom-input::placeholder {
    color: #8a96a3 !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
}
.fx-wallet-custom-submit,
button.fx-wallet-custom-submit,
.btn.fx-wallet-custom-submit,
form.fx-wallet-custom-form button.fx-wallet-custom-submit {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: var(--primary, #d10054) !important;
    background-color: var(--primary, #d10054) !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    margin: auto 0 !important;
    line-height: 0 !important;
    transition: transform 0.15s ease, filter 0.15s ease !important;
}
.fx-wallet-custom-submit svg,
button.fx-wallet-custom-submit svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
    stroke-width: 2.5 !important;
    display: block !important;
    margin: 0 auto !important;
}
.fx-wallet-custom-submit:hover,
button.fx-wallet-custom-submit:hover {
    background: var(--primary, #d10054) !important;
    background-color: var(--primary, #d10054) !important;
    filter: brightness(1.1) !important;
    transform: scale(1.06) !important;
    color: #ffffff !important;
}

/* Quick-add chips — SINGLE HORIZONTAL ROW */
.fx-wallet-pop-quick {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
}
.fx-wallet-quick-chip,
a.fx-wallet-quick-chip {
    flex: 1 1 0 !important;
    text-align: center !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    background: #f0f2f5 !important;
    border: 1px solid #e4e6eb !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
body.fx-theme-dark .fx-wallet-quick-chip,
.fx-wallet-pop.is-dark .fx-wallet-quick-chip {
    color: #e9edf2 !important;
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
.fx-wallet-quick-chip:hover,
a.fx-wallet-quick-chip:hover,
.fx-wallet-pop .fx-wallet-quick-chip:hover,
.fx-wallet-pop.is-dark .fx-wallet-quick-chip:hover,
body.fx-theme-light .fx-wallet-pop .fx-wallet-quick-chip:hover,
body.fx-theme-dark .fx-wallet-pop .fx-wallet-quick-chip:hover,
body.fx-theme-light a.fx-wallet-quick-chip:hover,
body.fx-theme-dark a.fx-wallet-quick-chip:hover {
    background: var(--primary, #d10054) !important;
    background-color: var(--primary, #d10054) !important;
    border-color: var(--primary, #d10054) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}
.fx-wallet-pop-more {
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    color: var(--primary, #d10054) !important;
    text-decoration: none !important;
}
.fx-wallet-pop-more:hover { text-decoration: underline !important; }

/* Verified badge next to the sidebar brand name */
.fx-brand-verified {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
}
.fx-brand-verified .ion-icon-wrapper,
.fx-brand-verified svg { width: 15px; height: 15px; }

/* ============================================================
   UNIFIED SURFACE SYSTEM
   One continuous mesh background across the WHOLE page, matching the
   sidebar. Panels become translucent glass so the same tone shows
   through everywhere — sidebar, feed, right column, cards, popups.
   Body theme class comes from user-no-nav.blade.php.
   ============================================================ */

/* ================= DARK — deep navy "ink void" + glass (mockup) ======= */
body.fx-theme-dark {
    background-color: #050914;
    background-image:
        radial-gradient(600px circle at 95% -5%, rgba(255, 0, 127, .10), transparent 60%),
        radial-gradient(700px circle at -5% 105%, rgba(124, 58, 237, .07), transparent 60%);
    background-attachment: fixed;
}
/* Sidebar = floating glass rail */
body.fx-theme-dark .fx-glass-sidebar.side-menu-theme-dark {
    background: rgba(255, 255, 255, .03) !important;
    /* The column draws the dividing line; see the light rule below. */
    border-right: none !important;
    box-shadow: none !important;
}
/* Feed columns transparent so the void shows through */
body.fx-theme-dark .neutral-bg,
body.fx-theme-dark .suggestions-wrapper,
body.fx-theme-dark .border-left { background: transparent !important; border-left-color: rgba(255, 255, 255, .06) !important; }

/* Glass panels: 3% white fill, 40px blur, specular top/left border, organic shadow */
body.fx-theme-dark .feed-widgets .card,
body.fx-theme-dark .search-box-wrapper,
body.fx-theme-dark .feed-box .post-box,
body.fx-theme-dark .fx-disc-block {
    background: rgba(255, 255, 255, .03) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
    border-left: 1px solid rgba(255, 255, 255, .10) !important;
    border-right: 1px solid rgba(0, 0, 0, .20) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .30) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .30) !important;
}
/* Search input = "etched slot" */
body.fx-theme-dark .search-box-wrapper .form-control {
    background: rgba(5, 9, 20, .6) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #e2e2e2 !important;
}
body.fx-theme-dark .search-box-wrapper .form-control:focus { border-color: #d10054 !important; }
/* Our own floating wallet popup on-theme */
body.fx-theme-dark .fx-wallet-pop.fx-wallet-pop-floating {
    background: rgba(18, 22, 38, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #e2e2e2;
}

/* Avatar inner border blends with the page background per theme (everywhere:
   sidebar ring + story thumbs) so the gap reads as part of the surface. */
body.fx-theme-dark .fx-avatar-ring .user-avatar,
body.fx-theme-dark .story-thumb-avatar { border-color: #050914 !important; }
body.fx-theme-light .fx-avatar-ring .user-avatar,
body.fx-theme-light .story-thumb-avatar { border-color: #f4eef4 !important; }

/* ================= LIGHT — soft frosted glass ========================= */
body.fx-theme-light {
    background-color: #f4eef4;
    background-image:
        radial-gradient(600px circle at 95% -5%, rgba(255, 0, 127, .08), transparent 60%),
        radial-gradient(700px circle at -5% 105%, rgba(124, 58, 237, .06), transparent 60%);
    background-attachment: fixed;
}
body.fx-theme-light .fx-glass-sidebar.side-menu-theme-light {
    background: rgba(255, 255, 255, .35) !important;
}
body.fx-theme-light .neutral-bg,
body.fx-theme-light .suggestions-wrapper,
body.fx-theme-light .border-left { background: transparent !important; border-left-color: rgba(0, 0, 0, .05) !important; }
body.fx-theme-light .feed-widgets .card,
body.fx-theme-light .search-box-wrapper,
body.fx-theme-light .feed-box .post-box,
body.fx-theme-light .fx-disc-block {
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, .8) !important;
    border-left: 1px solid rgba(255, 255, 255, .6) !important;
    border-right: 1px solid rgba(0, 0, 0, .04) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .06) !important;
}
body.fx-theme-light .search-box-wrapper .form-control {
    background: rgba(255, 255, 255, .5) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
}
body.fx-theme-light .search-box-wrapper .form-control:focus { border-color: #d10054 !important; }

/* ============================================================
   3-column layout proportions (match competitor)
   Left 22% · center 49% · right 29% of the full page.
   Content wrapper = 78%; inside it center/right split
   62.821%/37.179% (= 49/29 of the page).
   ============================================================ */
@media (min-width: 1004px) {
    .container-xl { max-width: 1600px; }

    /* Left sidebar → 22% */
    .fx-layout-sidebar {
        flex: 0 0 22% !important;
        max-width: 22% !important;
        width: 22% !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        /*
            Pinned at the header's own height, not ten pixels below it.

            At 70px the rail started lower than the content beside it, and its maximum was
            measured from 80 -- so it also ended short, which is why the right-hand border
            stopped before the foot of the window instead of running the full height.
        */
        top: 60px !important;
        align-self: flex-start !important;
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        padding-top: 10px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
    }
    .fx-layout-sidebar::-webkit-scrollbar { width: 0; display: none; }
    /* Content holder → 78% */
    .fx-layout-content {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        width: 78% !important;
    }

    /* Inside the FEED: center 62.821% of content (= 49% page) */
    .fx-layout-content .row > .second {
        flex: 0 0 62.821% !important;
        max-width: 62.821% !important;
        width: 62.821% !important;
        border-right: 1px solid rgb(255 255 255 / 28%) !important;
    }
    /* right 37.179% of content (= 29% page). STICKY below top header */
    .fx-layout-content .row > .suggestions-wrapper,
    .suggestions-wrapper.min-vh-100 {
        /*
            THIS IS THE COPY THAT WINS.

            The same rule exists in app.css, and this file loads after it -- so every edit
            made there was overridden here and appeared to do nothing, through several
            attempts at what looked like a specificity problem and never was. Kept in step
            with app.css deliberately; deleting one of the two is the real fix and means
            checking what else in this file the layout leans on.
        */
        flex: 0 0 37.179% !important;
        max-width: 37.179% !important;
        width: 37.179% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 60px !important;
        align-self: flex-start !important;
        height: auto !important;
        max-height: calc(100vh - 60px) !important;
        padding-top: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
    }
    .fx-layout-content .row > .suggestions-wrapper::-webkit-scrollbar { width: 0; display: none; }
}

/* Suggestion cards: flush, no border/radius/padding (user spec) */
.feed-widgets .suggestion-box,
.feed-widgets .suggestions-box,
body.fx-theme-light .feed-widgets .suggestion-box,
body.fx-theme-light .feed-widgets .suggestions-box,
body.fx-theme-dark .feed-widgets .suggestion-box,
body.fx-theme-dark .feed-widgets .suggestions-box {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border: none !important;
    border-radius: .25rem !important;
}

/* Remove x-padding utility inside the feed widgets (user spec) */
.feed-widgets .pl-1, .feed-widgets .px-1 { padding-left: 0 !important; }
.feed-widgets .pr-1, .feed-widgets .px-1 { padding-right: 0 !important; }

/* Right sidebar background = SAME as the left glass sidebar (both themes) */
body.fx-theme-dark .suggestions-wrapper {
    background: rgba(255, 255, 255, .03) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.fx-theme-light .suggestions-wrapper {
    background: rgba(255, 255, 255, .30) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ============================================================
   Customizable menu — drag-to-reorder list in the More drawer
   ============================================================ */
.fx-menu-customize-hint {
    font-size: .72rem;
    color: rgba(138, 150, 163, .9);
    padding: .2rem .4rem .5rem;
    letter-spacing: .01em;
}
.fx-sortable { margin: 0; padding: 0; }
.fx-sortable-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .5rem;
    border-radius: 12px;
    position: relative;
    cursor: default;
    transition: background-color .15s ease;
}
/* Theme-aware hover: dark drawer (default) vs light (.sidebar.light) */
.sidebar .fx-sortable-item:hover {
    background: rgba(255, 255, 255, .08);
}
.sidebar .fx-sortable-item:hover .fx-sort-link,
.sidebar .fx-sortable-item:hover .fx-sort-link .ion-icon-wrapper,
.sidebar .fx-sortable-item:hover .fx-sort-link ion-icon { color: var(--primary, #d10054) !important; }
.sidebar.light .fx-sortable-item:hover { background: rgba(209,0,84, .08); }
.fx-sortable-item.fx-dragging { opacity: .5; background: rgba(138, 150, 163, .18) !important; }
.fx-sort-handle {
    cursor: grab;
    color: rgba(138, 150, 163, .8);
    display: inline-flex;
    line-height: 0;
    flex: 0 0 auto;
    touch-action: none;
}
.fx-sort-handle:active { cursor: grabbing; }
.fx-sort-link {
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.fx-sort-link:hover { color: inherit; text-decoration: none; }
.fx-sort-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Items that land in the main sidebar get a subtle accent dot */
.fx-sortable-item.is-main .fx-sort-label { font-weight: 700; }
.fx-sortable-item.is-main::after {
    content: "";
    position: absolute;
    right: .55rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary, #d10054);
}
/* "More below" divider label after the 6th item */
.fx-sort-divider-label {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: -12px;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(138, 150, 163, .7);
    padding: 0 .5rem;
}
.fx-sortable-item:has(.fx-sort-divider-label) { margin-bottom: 20px; }

/* Customize menu: save button + saved message */
.fx-menu-customize-head { padding: .2rem .4rem .3rem; gap: .5rem; }
.fx-menu-customize-head .fx-menu-customize-hint { padding: 0; flex: 1 1 auto; }
.fx-menu-save-btn { flex: 0 0 auto; font-weight: 700; white-space: nowrap; padding: .25rem .8rem; }
.fx-menu-saved { color: #22c55e; font-weight: 700; font-size: .78rem; white-space: nowrap; }

/* ============================================================
   FLAT / FACEBOOK-STYLE OVERRIDE (loads last — wins)
   Strips all Liquid Glass: no blur, no mesh, no page-tint, no
   translucent panels. Light = clean white; dark = plain slate.
   LAYOUT (22/49/29 widths, sticky rail, scroll) is untouched —
   only cosmetics (background/blur/border/shadow) are overridden.
   ============================================================ */

/* ---- Page background: flat ---- */
body.fx-theme-light {
    background: #ffffff !important;   /* solid white — no bare grey showing through */
    background-image: none !important;
}
body.fx-theme-dark {
    background: #18191a !important;    /* solid dark */
    background-image: none !important;
}

/* ---- Kill blur everywhere in our theme surfaces ---- */
.fx-glass-sidebar,
.sidebar,
.fx-icon-row,
.fx-icon-row::before,
.fx-mob-topbar.fx-liquid,
.mobile-bottom-nav.fx-liquid,
.mobile-bottom-nav.fx-glass-nav,
.navbar.sticky-nav.top.fx-top-light,
.navbar.sticky-nav.top.fx-top-dark,
.fx-mob-topbar.fx-top-light,
.fx-mob-topbar.fx-top-dark,
body.fx-theme-light .feed-widgets .card,
body.fx-theme-light .search-box-wrapper,
body.fx-theme-light .feed-box .post-box,
body.fx-theme-light .fx-disc-block,
body.fx-theme-dark .feed-widgets .card,
body.fx-theme-dark .search-box-wrapper,
body.fx-theme-dark .feed-box .post-box,
body.fx-theme-dark .fx-disc-block,
#fx-crypto-modal .modal-content,
#fx-gift-modal .modal-content,
.fx-giftdrop-modal-content,
.ppv-info-bg {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* PERF: the app is fully flat now, so kill EVERY remaining backdrop blur.
   backdrop-filter:blur() is repainted by the GPU every frame and is the single
   biggest cause of scroll jank / slowness on mobile. Flat theme doesn't need it. */
* , *::before, *::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---- Remove the animated mesh + cursor glow ---- */
.fx-side-mesh, .fx-side-mesh::before { display: none !important; }
.fx-glow-el::after { display: none !important; }

/* ---- LIGHT: solid white panels, hairline borders (Facebook look) ---- */
body.fx-theme-light .fx-glass-sidebar,
body.fx-theme-light .fx-glass-sidebar.side-menu-theme-light {
    background: #ffffff !important;
    /*
        No border here: the dividing line is drawn on .fx-layout-sidebar, the column this
        panel sits inside. Keeping one on both produced two lines a few pixels apart -- the
        column's at the true edge, and this one inset by the column's padding.
    */
    border-right: none !important;
    box-shadow: none !important;
}
body.fx-theme-light .fx-icon-row {
    background: #f0f2f5 !important;
    border: 1px solid #dadde1 !important;
    box-shadow: none !important;
}
body.fx-theme-light .neutral-bg,
body.fx-theme-light .suggestions-wrapper,
body.fx-theme-light .border-left { background: transparent !important; border-left-color: #dadde1 !important; }
body.fx-theme-light .feed-widgets .card,
body.fx-theme-light .search-box-wrapper {
    background: #ffffff !important;
    border: 1px solid #dadde1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
}
body.fx-theme-light .feed-box .post-box,
body.fx-theme-light .posts-wrapper .post-box,
body.fx-theme-light .fx-disc-block {
    background: #ffffff !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #dadde1 !important;
    border-bottom: 1px solid #dadde1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.fx-theme-light .search-box-wrapper .form-control { background: #f0f2f5 !important; border: 1px solid #dadde1 !important; }
body.fx-theme-light .second { border-right-color: #dadde1 !important; }

/* ---- DARK: transparent background (blend with page) but keep a right border
   matching the right sidebar's left border (#3a3b3c). Was #242526 box before. ---- */
body.fx-theme-dark .fx-glass-sidebar,
body.fx-theme-dark .fx-glass-sidebar.side-menu-theme-dark {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/*
    THE DIVIDING LINE GOES ON THE COLUMN, NOT ON THE PANEL INSIDE IT.

    .fx-glass-sidebar sits within .fx-layout-sidebar, which carries its own padding -- so a
    border drawn on the inner panel appeared inset from the edge of the column by that
    padding, a line floating in the middle of a gap rather than dividing anything.

    On the column itself it lands where the two columns actually meet. It runs the column's
    full height for the same reason.
*/
/*
 * The divider between the left sidebar and the feed.
 *
 * Both were rgba(..., .01) -- one percent opacity, which is a line you cannot see. The
 * intent was clearly a hairline; the value made it invisible, so the sidebar ran into the
 * feed with no separation at all.
 *
 * Now .08 dark / .10 light: the same weight as the header's own bottom border (#ECEAF0 on
 * white is about .08), so the two lines read as one system rather than two different greys.
 *
 * DESKTOP ONLY. Below 768px the sidebar is not on screen -- the bottom nav replaces it --
 * and a border on a hidden column would do nothing but risk a stray line if the column were
 * ever shown at that width.
 */
@media (min-width: 768px) {
    body.fx-theme-dark .fx-layout-sidebar {
        border-right: 1px solid rgba(255, 255, 255, .08) !important;
    }

    body.fx-theme-light .fx-layout-sidebar {
        border-right: 1px solid rgba(0, 0, 0, .10) !important;
    }
}
body.fx-theme-dark .fx-icon-row {
    background: #3a3b3c !important;
    border: 1px solid #3a3b3c !important;
    box-shadow: none !important;
}
body.fx-theme-dark .neutral-bg,
body.fx-theme-dark .suggestions-wrapper,
body.fx-theme-dark .border-left { background: transparent !important; border-left-color: #3a3b3c !important; }
body.fx-theme-dark .feed-widgets .card,
body.fx-theme-dark .search-box-wrapper {
    background: #242526 !important;
    border: 1px solid #3a3b3c !important;
    box-shadow: none !important;
}
body.fx-theme-dark .feed-box .post-box,
body.fx-theme-dark .posts-wrapper .post-box,
body.fx-theme-dark .fx-disc-block {
    background: #242526 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #3a3b3c !important;
    border-bottom: 1px solid #3a3b3c !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.fx-theme-dark .second { border-right-color: #3a3b3c !important; }

/* ---- More drawer: solid ---- */
.sidebar.light { background: #ffffff !important; }
.sidebar:not(.light) { background: #242526 !important; }

/* ---- Our modals: solid (no frost) ---- */
#fx-crypto-modal .modal-content,
#fx-gift-modal .modal-content,
.fx-giftdrop-modal-content { box-shadow: 0 12px 40px rgba(0,0,0,.2) !important; }

/* ---- Avatar ring: flat (no gradient) ---- */
.fx-avatar-ring { background: transparent !important; }

/* ---- Button shimmer sweep off ---- */
.deposit-continue-btn::after, .fx-wallet-tile::after { display: none !important; }

/* ---- Mobile bars: solid (flat) ---- */
@media (max-width: 767.98px) {
    /* Top & bottom mobile nav share the exact page background so they blend in:
       light #f1f2f6, dark #18191a. Flat, no shadow. */
    /* Top + bottom nav match the full-page body: light #ffffff, dark #18191a */
    .navbar.sticky-nav.top.fx-top-light,
    .fx-mob-topbar.fx-top-light,
    .fx-mob-topbar.fx-liquid { background: #ffffff !important; box-shadow: none !important; }
    .navbar.sticky-nav.top.fx-top-dark,
    .fx-mob-topbar.fx-top-dark { background: #18191a !important; box-shadow: none !important; }

    .mobile-bottom-nav.fx-liquid,
    .mobile-bottom-nav.fx-glass-nav { background: #ffffff !important; box-shadow: none !important; border-top: 1px solid rgba(0,0,0,.06) !important; border-bottom: none !important; }
    .mobile-bottom-nav.fx-liquid.fx-nav-dark,
    .mobile-bottom-nav.fx-glass-nav.fx-nav-dark { background: #0d0e11 !important; box-shadow: none !important; border-top: 1px solid rgba(255,255,255,.08) !important; border-bottom: none !important; }
    /*
     * Bottom-nav wrapper + safe-area: EXACTLY the nav's own colour.
     *
     * The wrapper was #f1f2f6 while the bar inside it is #ffffff, so any part of the
     * wrapper the bar does not cover -- the safe-area strip at the foot -- showed as a
     * different colour rather than as a continuation of the bar. Chrome hid this because
     * the inset resolves to 0 there and the strip has no height; the Facebook in-app
     * browser does not, and the band appeared.
     *
     * padding-bottom with an env() fallback keeps the wrapper filling that strip even on a
     * UA that drops env() declarations outright.
     */
    body.fx-theme-light .fixed-bottom {
        background: #ffffff !important;
        padding-bottom: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    body.fx-theme-dark .fixed-bottom {
        background: #0d0e11 !important;
        padding-bottom: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    body.fx-in-app .fixed-bottom,
    body.fx-in-app #fx-mobile-bottom-nav-wrap {
        padding-bottom: 0 !important;
    }
    .mobile-bottom-nav.fx-liquid::before,
    .fx-mob-topbar.fx-liquid::before { display: none !important; }
}

/* ---- Wallet balance card (above the sidebar icon-row) ---- */
@media (min-width: 768px) {
    .fx-wallet-card-wrap { margin: 0; }
    .fx-wallet-card {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .8rem;
        border-radius: 10px;
        border: 1px solid #dadde1;
        background: #ffffff;
        color: inherit;
        cursor: pointer;
        transition: background-color .15s ease;
    }
    .fx-wallet-card:hover { background: #f0f2f5; }
    .fx-wallet-card-icon { display: inline-flex; color: var(--primary, #d10054); }
    .fx-wallet-card-icon .ion-icon-wrapper,
    .fx-wallet-card-icon ion-icon { font-size: 1.25rem; }
    .fx-wallet-card-amount { font-weight: 800; font-size: 1rem; flex: 1 1 auto; text-align: left; }
    .fx-wallet-card-chev { color: var(--fx-muted, #8a96a3); display: inline-flex; }

    /* ---- Wallet card v2: everything on ONE line — BALANCE  $amount  [Add] ---- */
    .fx-wallet-card--v2 {
        display: flex;
        /* height: 58px; */
        padding: .2rem .2rem .2rem .5rem;
        gap: .6rem;
        cursor: default;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, .08);
        align-items: center;          /* vertical center — no more up/down */
    }
    .fx-wallet-card--v2:hover { background: #ffffff; }
    .fx-wallet-info {
        flex: 1 1 auto;
        display: flex; flex-direction: row; align-items: center;   /* center, not baseline */
        gap: .5rem; background: transparent; border: none; padding: 0;
        color: inherit; cursor: pointer; text-align: left; min-width: 0;
    }
    .fx-wallet-card-label {
        font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
        color: #8a96a3; line-height: 1; flex: 0 0 auto;
    }
    .fx-wallet-card--v2 .fx-wallet-card-amount {
        font-size: 1.15rem; font-weight: 800; flex: 1 1 auto; line-height: 1;
        letter-spacing: -.01em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fx-wallet-add-btn {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        background: #d10054; color: #fff !important;
        font-weight: 700; font-size: .85rem;
        padding: .55rem 1.35rem; border-radius: 999px;
        text-decoration: none;
        box-shadow: none;
        transition: background-color .15s ease, transform .15s ease;
    }
    .fx-wallet-add-btn:hover {
        background: #ab0045; transform: translateY(-1px);
        color: #fff !important; text-decoration: none;
    }
}
/* Dark theme card matches the mock (#212121 card, subtle border) */
body.fx-theme-dark .fx-wallet-card--v2,
body.fx-theme-dark .fx-wallet-card--v2:hover { background: #212121; border-color: rgba(255, 255, 255, .06); }
body.fx-theme-dark .fx-wallet-card--v2 .fx-wallet-card-amount { color: #ffffff; }
body.fx-theme-dark .fx-wallet-card { background: #3a3b3c; border-color: #3a3b3c; }
body.fx-theme-dark .fx-wallet-card:hover { background: #4e4f50; }

/* ============================================================
   FB-style filled/outline bottom-nav icons (Home, Reels, Bell)
   Two SVGs per item: .fxm-ic-line (idle) + .fxm-ic-fill (active).
   These are solid-fill icons, so override the old stroke rules.
   ============================================================ */
.mobile-bottom-nav .fxm-item .fxm-ic,
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
    stroke: none !important;
    stroke-width: 0 !important;
    filter: none !important;
}

/* Plus (+) button: the pink create button is deliberately BIGGER than the other nav
   icons (which are 24px) so it stands out as the primary action. Only the + is
   enlarged — the other icons are untouched. */
.mobile-bottom-nav .fxm-item--plus > svg,
.mobile-bottom-nav.fx-glass-nav .fxm-item--plus > svg {
    width: 40px !important;
    height: 40px !important;
}
/* Plus group is stretched full-height too — keep the button vertically centred */
.mobile-bottom-nav .mobile-create-group {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mobile-bottom-nav .fxm-item--plus {
    align-self: center !important;
}
/* show line when idle, fill when active (max specificity + !important so nothing hides them) */
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic.fxm-ic-line { display: inline-block !important; }
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic.fxm-ic-fill { display: none !important; }
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg.fxm-ic.fxm-ic-line { display: none !important; }
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg.fxm-ic.fxm-ic-fill { display: inline-block !important; }

/* colours: idle = theme icon colour, active = fixed blue/cyan.
   High specificity (.mobile-bottom-nav.fx-glass-nav ... svg.fxm-ic) so fill:currentColor
   BEATS the old `.fxm-item.active > svg { fill:var(--primary) }` rule in app.css. */
.mobile-bottom-nav.fx-glass-nav.fx-nav-light .fxm-item svg.fxm-ic { color: #000 !important; fill: currentColor !important; stroke: none !important; }
.mobile-bottom-nav.fx-glass-nav.fx-nav-dark  .fxm-item svg.fxm-ic { color: #fff !important; fill: currentColor !important; stroke: none !important; }
.mobile-bottom-nav.fx-glass-nav.fx-nav-light .fxm-item.active svg.fxm-ic { color: #d10054 !important; fill: currentColor !important; stroke: none !important; }
.mobile-bottom-nav.fx-glass-nav.fx-nav-dark  .fxm-item.active svg.fxm-ic { color: #d10054 !important; fill: currentColor !important; stroke: none !important; }
/* Override the old `.fxm-home.active > svg path:last-child { fill:none }` (and reels rect) rule
   at path level, else the new single-path filled Home icon disappears. */
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg.fxm-ic path,
.mobile-bottom-nav.fx-glass-nav .fxm-item.active > svg.fxm-ic rect,
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic path,
.mobile-bottom-nav.fx-glass-nav .fxm-item > svg.fxm-ic rect { fill: currentColor !important; }

/* Make the whole nav + inner + each item span the full nav height so an item's
   top edge lines up with the nav's TOP border. (nav/inner have inline align-items:center,
   so we force stretch here.) */
.mobile-bottom-nav.fx-liquid { align-items: stretch !important; }
.mobile-bottom-nav .fx-glass-nav-inner { align-items: stretch !important; }
.mobile-bottom-nav .fxm-item { align-self: stretch !important; }

/* FB-style indicator bar: full item width, sitting ON the nav's top border (1-2px above the edge). */
.mobile-bottom-nav .fxm-item.active::after {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 5% !important;
    right: 20% !important;
    width: 85% !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--primary, #d10054) !important;
    background-color: #d10054 !important;
    z-index: 99 !important;
    transform: none !important;
    display: block !important;
}

/* ============================================================
   GLOBAL BORDER CAP — no border anywhere heavier than
   rgba(0,0,0,.1) (light) / a matching hairline in dark.
   Softens the old #dadde1 / #3a3b3c panel borders site-wide.
   ============================================================ */
body.fx-theme-light .fx-glass-sidebar,
body.fx-theme-light .fx-glass-sidebar.side-menu-theme-light,
body.fx-theme-light .fx-icon-row,
body.fx-theme-light .feed-widgets .card,
body.fx-theme-light .search-box-wrapper,
body.fx-theme-light .feed-box .post-box,
body.fx-theme-light .fx-disc-block,
body.fx-theme-light .search-box-wrapper .form-control,
body.fx-theme-light .neutral-bg,
body.fx-theme-light .suggestions-wrapper,
body.fx-theme-light .border-left,
body.fx-theme-light .second,
body.fx-theme-light .fx-wallet-card,
body.fx-theme-light .fx-wallet-card--v2 {
    border-color: rgba(0, 0, 0, .1) !important;
}

body.fx-theme-dark .fx-glass-sidebar,
body.fx-theme-dark .fx-glass-sidebar.side-menu-theme-dark,
body.fx-theme-dark .fx-icon-row,
body.fx-theme-dark .feed-widgets .card,
body.fx-theme-dark .search-box-wrapper,
body.fx-theme-dark .feed-box .post-box,
body.fx-theme-dark .fx-disc-block,
body.fx-theme-dark .search-box-wrapper .form-control,
body.fx-theme-dark .neutral-bg,
body.fx-theme-dark .suggestions-wrapper,
body.fx-theme-dark .border-left,
body.fx-theme-dark .second,
body.fx-theme-dark .fx-wallet-card,
body.fx-theme-dark .fx-wallet-card--v2 {
    border-color: rgba(255, 255, 255, .1) !important;
}

/* Profile filter tabs: soften the bright core border (#495057 dark / #dee2e6 light)
   so it matches the sidebar borders on EVERY page (feed already softened it). */
body.fx-theme-dark .inline-border-tabs .nav-link {
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}
body.fx-theme-light .inline-border-tabs .nav-link {
    border-bottom-color: rgba(0, 0, 0, .08) !important;
}
/* keep the active/hover accent underline */
body.fx-theme-dark .inline-border-tabs .nav-link.active,
body.fx-theme-dark .inline-border-tabs .nav-link:hover,
body.fx-theme-light .inline-border-tabs .nav-link.active,
body.fx-theme-light .inline-border-tabs .nav-link:hover {
    border-bottom-color: #d10054 !important;
}

/* ============================================================
   SEARCH BOX — one clean soft-rounded box (same on ALL pages).
   The input IS the box and spans full width; the magnifier floats
   on the right (no separate segment). Rounded rectangle, not pill.
   No overflow:hidden -> the live-search dropdown is not clipped.
   ============================================================ */
/* wrapper is just a positioning container — NO border/bg/shadow of its own.
   (theme-prefixed to out-specify the panel-card rules that give it #dadde1.) */
.search-box-wrapper,
body.fx-theme-light .search-box-wrapper,
body.fx-theme-dark .search-box-wrapper,
body.fx-theme-light .feed-widgets .search-box-wrapper,
body.fx-theme-dark .feed-widgets .search-box-wrapper {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
}
/* the input-group must not add any border/bg either */
.search-box-wrapper .input-group.input-group-seamless-append,
.search-box-wrapper .input-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.search-box-wrapper .input-group.input-group-seamless-append {
    position: relative;
    display: block;                 /* stop the flex input | append split */
}
/* the visible box */
.search-box-wrapper .form-control {
    width: 100% !important;
    height: 46px;
    border-radius: 12px !important;    /* soft corners, both ends */
    padding: 0 2.75rem 0 1rem !important; /* room for the magnifier on the right */
    font-size: .95rem;
}
body.fx-theme-light .search-box-wrapper .form-control {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    color: #1c1e21 !important;
}
body.fx-theme-dark .search-box-wrapper .form-control {
    background: #3a3b3c !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: #e4e6eb !important;
}
/* focus = OUR pink accent (not blue) */
.search-box-wrapper .form-control:focus {
    border-color: #d10054 !important;
    box-shadow: 0 0 0 1px #d10054 !important;
}

/* ---- Joined state: when the dropdown is open, box + dropdown share ONE
   border with no double line between them. ---- */
.search-box-wrapper.is-open .form-control {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-color: #d10054 !important;
    box-shadow: 0 0 0 1px #d10054 !important;
}
.search-box-wrapper.is-open .fx-live-search-dropdown {
    top: 100% !important;                 /* no gap */
    margin-top: -1px;                     /* overlap the shared border line */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-color: #d10054 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
}

/* ---- X (clear): replaces the magnifier on the right when there is text ---- */
.fx-live-clear {
    position: absolute;
    top: 0;
    right: .55rem;                        /* same spot as the magnifier */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    border: 0;
    background: transparent;
    color: #8a96a3;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    padding: 0;
}
.fx-live-clear:hover { color: #1c1e21; }
body.fx-theme-dark .fx-live-clear:hover { color: #e4e6eb; }
/* hide the magnifier while there is text (X takes its place) */
.search-box-wrapper.has-text .input-group-append { display: none; }
/* magnifier = floating icon on the right, no box of its own */
.search-box-wrapper .input-group-append {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding-right: .85rem;
    pointer-events: none;           /* let the click fall through to .h-pill */
    z-index: 2;
}
.search-box-wrapper .input-group-append .input-group-text {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.search-box-wrapper .input-group-append .h-pill.fx-search-btn {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: auto;           /* the icon stays clickable */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #8a96a3;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.search-box-wrapper .input-group-append .h-pill.fx-search-btn .fx-search-svg {
    display: block;
    transition: transform .15s ease;
}
.search-box-wrapper .input-group-append .h-pill.fx-search-btn:hover {
    color: #d10054;
    background: rgba(209, 0, 84, .1) !important;
}
.search-box-wrapper .input-group-append .h-pill.fx-search-btn:active .fx-search-svg {
    transform: scale(.9);
}
/* focused/typing -> icon takes our accent so it feels alive */
.search-box-wrapper.is-open .input-group-append .h-pill.fx-search-btn { color: #d10054; }
body.fx-theme-dark .search-box-wrapper .input-group-append .h-pill.fx-search-btn { color: #b0b3b8; }
body.fx-theme-dark .search-box-wrapper .input-group-append .h-pill.fx-search-btn:hover { color: #ab0045; background: rgba(255, 45, 119, .12) !important; }

/* Echo-row icon: use our inline SVG, not the emoji magnifier (kill the ::before glyph) */
.fx-live-search-ico::before { content: none !important; }
.fx-live-search-ico {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #8a96a3;
}
.fx-live-search-ico svg { display: block; }

/* ============================================================
   MOBILE balance chip in the top header (desktop keeps the sidebar card)
   ============================================================ */
.fx-mob-wallet {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-right: .25rem;
    /* Subtle pill background so the balance reads as its own tappable chip and stands
       out from the plain icons next to it (both themes).
       Side padding cut from 1rem: on a phone this chip sits between the logo and the
       search/menu icons, and 1rem each side was enough to push them off the edge. */
    padding: .28rem .55rem;
    border-radius: 999px;
    transition: background .15s ease, box-shadow .15s ease;
}
.fx-mob-wallet-amount {
    /* Was 20px, which is what made the chip wide enough to crowd out the icons beside
       it in the mobile header. */
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -.01em;
    text-decoration: none;
}
.fx-mob-wallet { text-decoration: none; }
/* colours + pill background follow the header theme */
.fx-mob-topbar.fx-top-light .fx-mob-wallet {
    background: rgba(209, 0, 84, .08);              /* soft primary tint */
    box-shadow: inset 0 0 0 1px rgba(209, 0, 84, .16);
}
.fx-mob-topbar.fx-top-light .fx-mob-wallet:active {
    background: rgba(209, 0, 84, .14);
}
/*
    The site's primary, not a darker variant of it.

    #b80049 was a shade chosen for contrast on a white pill, but the balance is the one
    figure in the header that should read as the brand's own colour -- and it is what the
    rest of the site uses for anything to do with money.
*/
.fx-mob-topbar.fx-top-light .fx-mob-wallet-amount { color: #d10054; }
.fx-mob-topbar.fx-top-dark .fx-mob-wallet {
    background: rgba(255, 255, 255, .10);           /* soft light tint on dark */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.fx-mob-topbar.fx-top-dark .fx-mob-wallet:active {
    background: rgba(255, 255, 255, .16);
}
.fx-mob-topbar.fx-top-dark  .fx-mob-wallet-amount { color: #ffffff; }

/* ============================================================
   Tip icon (custom dollar SVG) — circular border everywhere it appears
   (Send a tip buttons, messenger tip, tip notifications).
   ============================================================ */
/* Tip icon (custom dollar SVG). NO extra border — the SVG already has its own
   circular outline. Keep it the SAME visual size as sibling icons (hearts/comment). */
.fx-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* "Send a tip" pill: always keep it a money-colored CTA with a visible background,
   so on hover the white text always sits on the pink fill (was going white-on-white
   on pages where the .post-footer background rule didn't apply). */
.send-a-tip {
    color: var(--primary, #d10054) !important;
    background: color-mix(in srgb, var(--primary, #d10054) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary, #d10054) 32%, transparent);
    border-radius: 12px;
}
.send-a-tip:hover,
.send-a-tip:focus {
    background: var(--primary, #d10054) !important;
    color: #fff !important;
}
.send-a-tip:hover .ion-icon-wrapper,
.send-a-tip:hover .fx-tip-icon,
.send-a-tip:focus .fx-tip-icon { color: #fff !important; }
.send-a-tip.disabled { opacity: .6; }

/* User-specified: desktop right-topbar wallet amount styling. Colour follows the brand (the
   #d10054 fallback is recoloured by the theme generator on an admin theme change). */
.fx-right-topbar .fx-wallet-card-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary, #d10054);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}


/* ============================================================
   MOBILE: kill the left/right column borders outright
   ============================================================

   liquid-sidebar.css sets `border-left-color` on `.border-left` in three separate theme
   blocks (light around line 997, dark at 669, 1056 and 1312). Those give the line its
   COLOUR; Bootstrap's own `.border-left` gives it its WIDTH. Between them a hairline is
   drawn down the edge of the content column and, on the profile page, down the right of its
   own column.

   On a desktop that line is correct -- it separates the column from the sidebar beside it.
   On a phone there is no sidebar: the column is the full width of the screen and the line
   just sits along the edge of the page.

   WHY THIS IS AT THE END OF THE FILE. The rules it has to beat are `body.fx-theme-light
   .border-left` and its dark twin -- two classes deep, and !important. A rule in app.css
   loses to those on specificity no matter how it is written, which is why the attempt in
   update 2316 did not take. Matching their specificity and coming later in the same
   stylesheet is what settles it.

   Width AND colour are both zeroed: clearing only the colour leaves a transparent border
   still occupying its pixel, which shifts the layout by a hair.
   ============================================================ */
@media (max-width: 767.98px) {
    /*
     * BOTH SIDES, on the feed AND on a profile.
     *
     * The theme blocks above set `border-color` as a SHORTHAND -- all four edges at once --
     * on `.border-left`, `.second` and the rest. So a rule that only cleared the left edge
     * left the right one coloured wherever a column also carries `.border-right`, which is
     * what the profile page's own column does:
     *
     *     <div class="min-vh-100 col-12 col-md-8 border-right pr-md-0 px-0">
     *
     * That column is listed here explicitly because it is NOT in the theme blocks above --
     * they cover `.second` (the feed's column) but nothing on the profile page.
     */
    body.fx-theme-light .border-left,
    body.fx-theme-dark .border-left,
    body.fx-theme-light .border-right,
    body.fx-theme-dark .border-right,
    body.fx-theme-light .fx-layout-content,
    body.fx-theme-dark .fx-layout-content,
    body.fx-theme-light .second,
    body.fx-theme-dark .second,
    body.fx-theme-light .col-md-8.border-right,
    body.fx-theme-dark .col-md-8.border-right,
    body.fx-theme-light .content-wrapper,
    body.fx-theme-dark .content-wrapper,
    .fx-layout-content,
    .content-wrapper,
    .second,
    .col-md-8.border-right {
        /*
         * Three longhand declarations, NOT `border-left: 0 none transparent`.
         *
         * That shorthand is what stopped the CSS parser dead. Everything after it in the
         * concatenated bundle was dropped -- 300+ rules including the entire desktop top
         * header, which is why the header rendered unstyled while every grep of the source
         * and of the served file showed the rules present. A rule can be in the text and
         * absent from document.styleSheets, and that gap is exactly where this hid.
         *
         * Longhand cannot be mis-parsed, and it does the same job: width, style and colour
         * all cleared, so nothing is left occupying a pixel.
         */
        border-left-width: 0 !important;
        border-left-style: none !important;
        border-left-color: transparent !important;
        border-right-width: 0 !important;
        border-right-style: none !important;
        border-right-color: transparent !important;
    }
}


/* ============================================================
   THE ROOT ELEMENT'S BACKGROUND
   ============================================================

   Reported: in the installed app on the dark theme, a WHITE BAND sat across the top of the
   screen, above the page content.

   The dark ground is painted on the BODY (`body.fx-theme-dark` above, #050914) and nothing
   in the stylesheets ever sets a background on `html`. In an ordinary browser tab that is
   invisible: the body's background propagates to the canvas when html has none, so the
   whole viewport is painted.

   It stops being invisible in a PWA. In standalone display mode the document is laid out
   under the status bar, and the strip the body does not cover -- the status-bar inset, and
   the overscroll area at either end -- is painted by the ROOT element. With html unset,
   that strip falls back to white and reads as a white band above the app.

   The browser's own default `background-color: #fff` on body (which even
   theme/bootstrap.dark.css still carries) is what fills it.

   Setting html to the same two grounds the body uses closes the gap. Both themes are
   declared, not just dark: the light theme was only accidentally correct, resting on that
   same browser default, and an explicit value costs nothing and removes the accident.

   THE BOTTOM STRIP TOO. The same root background fills the area BELOW the content, behind
   Android's navigation bar -- so the colour is chosen to match the app's own bottom nav
   (#18191a dark, #ffffff light, the values app.css paints
   `#fx-mobile-bottom-nav-wrap` with) rather than the page ground (#050914). The strip sits
   directly under that bar, so matching the bar is what makes the two read as one surface;
   matching the page ground instead would put a visible second shade under the nav.

   The top inset takes the same colour. That is deliberate: a single root colour cannot be
   two values at once, and the nav shade is the one that touches a system bar.

   `:has()` is required because the theme class is on BODY, not html (see
   template/head.blade.php). It is already used elsewhere in this codebase, so support is
   established here -- and where it is unsupported the rule is simply dropped and the
   result is today's behaviour, not something worse.

   NOTE: this does NOT change the system bars' own colour. Those come from the manifest's
   theme_color / background_color (SettingsServiceProvider::setupPwaConfig), which Android
   caches at install time. This rule is about what the PAGE paints behind them.
   ============================================================ */
html {
    background-color: #ffffff;
}

html:has(body.fx-theme-dark) {
    background-color: #18191a;
}