/*
 * Behov — MOBILE app-style responsive skin.
 *
 * Loaded AFTER styles.css on index.html / profile.html / account.html.
 * Every rule (except the namespaced .bhv-* scaffolding) lives inside
 * @media (max-width: 768px), so desktop rendering is untouched.
 *
 * Design language mirrors the AllBeam app: gold (#F5B234) accents,
 * glass-blur chrome, 14px-radius cards with always-visible info,
 * 2-column masonry, and a bottom-right nav FAB that expands into
 * Browse/Connect/Power/Alerts/Profile (built by mobile.js).
 */

:root {
    --bhv-gold: #f5b234;
    --bhv-gold-deep: #d89018;       /* readable gold on white */
    --bhv-gold-soft: rgba(245, 178, 52, 0.14);
    --bhv-purple: #6b0050;
    --bhv-ink: #1d1d1f;
    --bhv-card-radius: 14px;
    /* Retired pill tab bar height — kept at 0 so downstream calc() offsets
       (chat bubble, flow FAB) collapse to their natural bottom positions. */
    --bhv-tabbar-h: 0px;
    --bhv-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* FAB nav elements exist in the DOM once built; they only ever show on
   mobile (rules inside the media query below). */
.bhv-tabbar, .bhv-fabnav, .bhv-fabnav-backdrop, .bhv-profile-dock { display: none; }

/* "Manage" nav link: desktop only (mobile uses Profile tab instead) */
@media (max-width: 768px) {
    .bhv-desktop-only { display: none !important; }
}

@media (max-width: 768px) {

    /* ════════════════════════════════════════════════════════════════════
       1. NAV FAB  (bottom right — collapses the header nav into a popup)
       ════════════════════════════════════════════════════════════════════ */
    .bhv-fabnav {
        position: fixed;
        right: 14px;
        bottom: calc(var(--bhv-safe-bottom) + 18px);
        z-index: 6000;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }
    .bhv-fabnav-btn {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(22px) saturate(1.7);
        backdrop-filter: blur(22px) saturate(1.7);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
        color: #74747c;
        cursor: pointer;
        padding: 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        overflow: visible;
    }
    /* Inner glyph wrapper — fills the button and centers the avatar/icon/× so
       swapping the glyph never disturbs the badge sibling. */
    .bhv-fabnav-glyph {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .bhv-fabnav-btn svg { width: 26px; height: 26px; display: block; }
    .bhv-fabnav.open .bhv-fabnav-btn { border-color: var(--bhv-gold); color: var(--bhv-gold-deep); }
    /* Slightly larger, gold × while open. */
    .bhv-fabnav.open .bhv-fabnav-glyph svg { width: 24px; height: 24px; }
    .bhv-fabnav-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        background: #ececf0;
    }
    .bhv-fabnav-btn .bhv-fabnav-glyph .bhv-fabnav-avatar { width: 48px; height: 48px; }
    .bhv-fabnav-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: #e0245e;
        color: #fff;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }
    .bhv-fabnav-badge[hidden] { display: none; }

    /* Popup nav (Browse → Profile, top to bottom, above the FAB) */
    .bhv-fabnav-menu {
        display: none;
        flex-direction: column;
        align-items: flex-end;
        gap: 9px;
        margin-bottom: 2px;
    }
    .bhv-fabnav.open .bhv-fabnav-menu { display: flex; animation: bhvFabPop 0.18s ease-out; }
    @keyframes bhvFabPop {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
    .bhv-fabnav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .bhv-fabnav-item-label {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        padding: 6px 12px;
        font-size: 0.78rem;
        font-weight: 700;
        color: #444;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
        white-space: nowrap;
    }
    .bhv-fabnav-item-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        backdrop-filter: blur(18px) saturate(1.5);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
        color: #74747c;
        flex-shrink: 0;
        overflow: hidden;
    }
    .bhv-fabnav-item-icon svg { width: 21px; height: 21px; display: block; }
    .bhv-fabnav-item-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    /* Active page = gold (Browse highlighted on the homepage, etc.) */
    .bhv-fabnav-item.active .bhv-fabnav-item-icon { border-color: var(--bhv-gold); color: var(--bhv-gold-deep); }
    .bhv-fabnav-item.active .bhv-fabnav-item-label { color: var(--bhv-gold-deep); border-color: rgba(216, 144, 24, 0.4); }

    /* Dimmer behind the open popup */
    .bhv-fabnav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 5990;
        background: rgba(0, 0, 0, 0.28);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
    }
    .bhv-fabnav-backdrop.open { display: block; opacity: 1; pointer-events: auto; }

    /* Own-profile settings gear (injected top right of the header) */
    .bhv-header-gear {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #74747c;
        z-index: 10;
    }
    .bhv-header-gear svg { width: 22px; height: 22px; }

    /* Visitor Connect button, injected top-right of the header (script.js). */
    .profile-visitor-actions.bhv-mobile-connect {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        z-index: 10;
    }
    .profile-visitor-actions.bhv-mobile-connect .prof-connect-btn {
        display: inline-flex; align-items: center;
        background: var(--color-blue, #2f6fed); color: #fff;
        font-weight: 700; font-size: 0.82rem; font-family: inherit;
        border: none; border-radius: 999px; padding: 7px 15px; cursor: pointer;
        line-height: 1;
    }
    .profile-visitor-actions.bhv-mobile-connect .prof-connect-btn.is-pending { background: #eef1f5; color: #555; }
    .profile-visitor-actions.bhv-mobile-connect .prof-connect-btn.is-connected { background: #e8f5e9; color: #2e7d32; }

    /* Header nav (account + location) DOCKED beside the FAB on non-home pages.
       mobile.js moves .main-nav out of the header and adds .bhv-nav-docked. */
    .main-nav.bhv-nav-docked {
        position: fixed !important;
        right: 78px; /* 14 (FAB right) + 54 (FAB) + 10 gap */
        bottom: calc(var(--bhv-safe-bottom) + 21px);
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 6000;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .main-nav.bhv-nav-docked ul { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
    .main-nav.bhv-nav-docked .dropbtn {
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(22px) saturate(1.7);
        backdrop-filter: blur(22px) saturate(1.7);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 999px;
        padding: 9px 14px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
        font-size: 0.8rem;
        font-weight: 700;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
    }
    /* Dropdowns open UPWARD from the docked bar (it sits at the screen bottom). */
    .main-nav.bhv-nav-docked .dropdown-content,
    .main-nav.bhv-nav-docked .location-dropdown {
        top: auto !important;
        bottom: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
    }
    .main-nav.bhv-nav-docked .header-location-tag {
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
    }
    /* Profile page: drop the location pin from the docked nav (kept elsewhere). */
    body.profile-page .main-nav.bhv-nav-docked .header-location-tag { display: none; }

    /* Profile actions row (hero tabs + share/message) docked at the very bottom of
       the header (full-width), with the name/photo above it. Tabs fill + scroll;
       the share/message buttons sit at the right end. */
    .profile-actions-row.bhv-herotabs-docked {
        order: 99;
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .profile-actions-row.bhv-herotabs-docked #hero-tabs {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        gap: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .profile-actions-row.bhv-herotabs-docked #hero-tabs::-webkit-scrollbar { display: none; }
    .profile-actions-row.bhv-herotabs-docked .profile-action-buttons {
        flex: 0 0 auto;
        margin: 0;
    }

    /* The Bio/Creds/Links/Details "more info" pop-ups: centered under the header
       (anchor = .header-content-wrapper, which is position:relative and spans the
       full width), clamped inside the viewport, scrolling internally if tall. */
    .profile-actions-row.bhv-herotabs-docked .hero-content {
        position: absolute;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: min(92vw, 400px);
        max-width: 92vw;
        max-height: 55vh;
        overflow-y: auto;
        margin-top: 4px;
    }

    /* Room for the FAB at the end of every page. */
    body { padding-bottom: calc(var(--bhv-safe-bottom) + 96px); }

    /* ════════════════════════════════════════════════════════════════════
       2. HEADER / HERO / SEARCH  (compact app chrome)
       ════════════════════════════════════════════════════════════════════ */
    .site-header {
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        backdrop-filter: blur(18px) saturate(1.5);
        background-color: rgba(255, 255, 255, 0.88);
    }
    .brand img { max-height: 34px; }

    /* Show the page title in the header on mobile (Connect / Power / Alerts /
       Account) — the base rule hides it. In-flow + centered so it doesn't overlap
       the brand (the nav is docked out to the FAB on these pages). */
    .header-page-title {
        display: flex !important;
        position: static;
        transform: none;
        left: auto;
        top: auto;
        flex: 1 1 auto;
        margin: 0 8px;
        min-width: 0;
    }
    .header-page-title h2 {
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* App-style pinned header: the search bar lives INSIDE the sticky header
       at all times — the desktop scroll-dock in/out animation is disabled on
       mobile (script.js bails ≤768px; !important beats any inline dock styles
       left over from a resize). Filters/tabs flow around it in the page. */
    .site-header {
        position: sticky;
        top: 0;
        height: auto !important;
        padding: 0;
    }
    .site-header .header-content-wrapper {
        position: relative;
        flex-wrap: wrap;
        row-gap: 2px;
        min-height: 0;
        height: auto !important;   /* base rule pins it to 50px — the search row wraps below */
        padding: 6px 12px;
    }
    .search-chat-wrapper {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        order: 99;
        flex: 1 1 100%;
        padding: 0 10px 8px;
        box-sizing: border-box;
    }
    .search-dock-bg { display: none !important; }
    #search-anchor, .search-anchor { height: 0 !important; }

    /* Row 1: brand left, nav (Welcome + location pin) right — IN FLOW.
       styles.css absolutely positions .main-nav with top:-20px hacks tuned to
       the desktop header; on mobile that floated it over the search bar. */
    .site-header .brand { order: 1; }
    .site-header .main-nav {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        order: 2;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .site-header .main-nav .dropbtn {
        font-size: 0.85rem;
        padding: 0.25rem 0.4rem;
        white-space: nowrap;
        max-width: 44vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    /* Admin priority (mobile): admin users get "Admin" + "Analytics" nav links.
       On NON-home pages (docked nav) the Welcome/account dropdown is hidden for
       them so only the two admin links show. On home/browse this rule can't
       match — mobile.js MOVES the account li out of .main-nav ul entirely
       (.bhv-account-docked on <body>), so admins keep their bottom Welcome pill.
       Un-scoped selector = mobile-only via this @media. */
    body.bhv-admin .main-nav ul .dropdown { display: none; }
    .main-nav .nav-admin-top {
        font-size: 0.8rem;
        font-weight: 700;
        padding: 0.25rem 0.45rem;
        white-space: nowrap;
    }
    /* Docked-nav admin links get the same glassy pill chrome as the Welcome btn. */
    .main-nav.bhv-nav-docked .nav-admin-top {
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(22px) saturate(1.7);
        backdrop-filter: blur(22px) saturate(1.7);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 999px;
        padding: 9px 14px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
        color: var(--bhv-gold-deep);
    }

    /* HOME/BROWSE: the account pill ("Welcome (Name)!" / "Sign In/Up") is MOVED
       out of the header by mobile.js (li gets .bhv-account-docked, appended to
       <body>) and pinned bottom-right on the SAME 54px row as the nav FAB, with
       the FAB to its right. It must physically LEAVE the header: the header's
       backdrop-filter makes it the containing block for fixed descendants, so a
       fixed pill kept inside it pins to the header box, not the screen. The
       header keeps Admin/Analytics + the location selector top-right. */
    li.bhv-account-docked {
        position: fixed;
        right: 78px;   /* FAB right:14 + 54 wide + 10 gap → pill sits left of it */
        bottom: calc(var(--bhv-safe-bottom) + 18px);   /* same bottom as the FAB */
        top: auto;
        left: auto;
        height: 54px;                                   /* FAB height — centers align */
        display: flex;
        align-items: center;
        z-index: 6000;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li.bhv-account-docked .dropbtn {
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(22px) saturate(1.7);
        backdrop-filter: blur(22px) saturate(1.7);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 999px;
        padding: 9px 14px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
        font-size: 0.8rem;
        font-weight: 700;
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
        display: inline-block;
    }
    /* Logged out, the pill is the Sign In/Up gate — its login dropdown opens
       UPWARD from the pill (it sits at the screen bottom). */
    li.bhv-account-docked .dropdown-content {
        top: auto !important;
        bottom: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
    }

    .hero { padding: 0.5rem 0 0.25rem; }
    .hero-content { padding: 0 1rem; }
    .hero-text h2 {
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--bhv-ink);
        text-align: center;
        margin: 0.35rem 0 0.6rem;
    }

    /* App-style rounded search bar. 16px font stops iOS auto-zoom. */
    .hero-search textarea,
    #site-search {
        border-radius: 14px;
        font-size: 16px;
        border: 1px solid rgba(0, 0, 0, 0.14);
        background: rgba(255, 255, 255, 0.92);
    }
    /* Search row: textarea + compact icon-only submit button side by side. */
    #site-search-form {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
    }
    .hero-search textarea,
    #site-search { flex: 1 1 auto; min-width: 0; }
    .hero-search .button.primary,
    #site-search-form .button.primary {
        background: var(--bhv-gold);
        border-color: var(--bhv-gold);
        color: #1a1a1a;
        font-weight: 700;
        border-radius: 14px;
        width: auto;
        flex: 0 0 auto;
        padding: 0.45rem 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-search .button.primary:hover,
    #site-search-form .button.primary:hover {
        background: var(--bhv-gold-deep);
        border-color: var(--bhv-gold-deep);
        color: #1a1a1a;
    }
    /* Icon-only submit on mobile (label shows on desktop). */
    .search-btn-label { display: none; }
    .search-btn-icon { display: block; line-height: 0; }
    /* Results panel drops below the full row. */
    #chat-response-container { flex: 1 1 100%; }

    /* ════════════════════════════════════════════════════════════════════
       3. SKILLS ROW + FILTER RAIL
       ════════════════════════════════════════════════════════════════════ */
    .skills-intro {
        font-size: 0.78rem;
        color: #6b6b70;
        padding: 0 1rem;
        margin: 0.4rem 0;
    }
    /* Swipe is natural on touch — drop the custom scrollbar + arrows. */
    .skills-scrollbar { display: none; }

    /* Skills as compact TEXT TABS on mobile — the image thumbnails eat too much
       vertical space on a phone, so collapse each card to a word chip in the
       same horizontal scroll row. (Overrides the inline sizing on .image-container
       and the absolutely-positioned .skill-title from renderSkills.) */
    .skills-slider { align-items: center; padding: 2px 8px 4px; gap: 6px; }
    .skills-slider .skill-item {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    .skills-slider .skill-item .image-container {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }
    .skills-slider .skill-item .skill-img,
    .skills-slider .skill-item .skill-overlay { display: none !important; }
    .skills-slider .skill-item .skill-title {
        position: static !important;
        transform: none !important;
        width: auto !important;
        margin: 0 !important;
        white-space: nowrap;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: #333 !important;
        text-shadow: none !important;
        padding: 8px 14px;
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 999px;
        background: #fff;
    }
    .skills-slider .skill-item.selected .skill-title {
        background: var(--bhv-gold);
        color: #1a1a1a !important;
        border-color: var(--bhv-gold);
        font-weight: 700 !important;
    }

    /* Full filter rail on mobile — every option visible (Members, Discussions,
       Listings▾, sort, Saved, Tagged, Add), wrapping onto extra rows as needed.
       The rail sticks just under the pinned header (JS scroll-dock is
       desktop-only; --bhv-header-h is measured by mobile.js). */
    .card-filters-rail {
        position: sticky;
        top: var(--bhv-header-h, 110px);
        z-index: 2500;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
        padding: 6px 6px 7px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        height: auto !important;   /* the desktop dock sets a placeholder height */
    }
    /* Kill any leftover desktop-dock inline styles after a resize. */
    .card-filters, .card-filters.docked {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        transform: none !important;
    }
    /* One-row filter rail, matching the desktop ≤760px layout: Members ·
       Discussions · Listings▾ · sort · ⋯  (Saved / Tagged / Add collapse behind
       the ⋯ overflow button). Stays a single row under the pinned header; scrolls
       horizontally if it can't fit rather than wrapping onto extra rows. */
    .card-filters {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .card-filters::-webkit-scrollbar { display: none; }
    .card-filters .cf-group { display: flex !important; gap: 0.25rem; flex-wrap: nowrap; }
    .card-filters .cf-left { display: flex !important; order: 1; flex: 0 0 auto; }
    .card-filters .cf-sort-wrap { order: 2; flex: 0 0 auto; margin: 0; }
    .card-filters .cf-sep-a {
        order: 3; display: block !important; flex: 0 0 auto;
        width: 1px; height: auto; min-height: 1.4rem; margin: 0 0.15rem;
        align-self: stretch; background: rgba(0, 0, 0, 0.12);
    }
    .card-filters .cf-sep-b { display: none !important; }
    /* Saved / Tagged / Add collapse into the ⋯ overflow (like desktop narrow). */
    .card-filters .cf-right { display: none !important; }
    .card-filters .cf-overflow-wrap { order: 4; flex: 0 0 auto; display: inline-flex !important; }
    .card-filters .listing-filter-button {
        border-radius: 999px;
        font-size: 0.78rem;
        padding: 0.38rem 0.6rem;
        white-space: nowrap;
    }
    .card-filters .cf-sort-btn {
        background: var(--bhv-gold);
        border-color: var(--bhv-gold);
        color: #1a1a1a;
    }
    .card-filters .cf-sort-btn:hover,
    .card-filters .cf-sort-btn.selected,
    .card-filters .cf-sort-btn[aria-expanded="true"] {
        background: #fff;
        color: var(--bhv-gold-deep);
        border-color: var(--bhv-gold);
    }

    /* Active-skill chips → gold app chips. Also strip any desktop-dock inline
       styles left behind when the window narrows past 768px mid-scroll. */
    .active-skills-bar, .active-skills-bar.docked {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    .active-skills-placeholder { display: none !important; }
    .active-skill-tab {
        background: var(--bhv-gold);
        color: #1a1a1a;
        font-weight: 700;
        border-radius: 999px;
    }

    /* Touch scrolling over card media: embeds/videos in the masonry swallow
       touch gestures (iframe scrub/seek), which makes the feed feel stuck.
       Cards open the detail view on tap anyway — let touches pass through. */
    .listing-card .lc-embed iframe,
    .listing-card iframe,
    .listing-card video.listing-media,
    .listing-card video {
        pointer-events: none;
    }
    /* Same problem in the listing DETAIL preview: a linked video (iframe embed)
       eats the swipe, so the preview sheet won't scroll while your finger is over
       the player. Let touches pass through to the sheet so the whole wrapper
       scrolls smoothly. */
    .listing-detail-dialog .ld-media-wrap iframe,
    .listing-detail-dialog .ld-embed iframe,
    .listing-detail-dialog .ld-media-wrap video {
        pointer-events: none;
    }
    .active-skills-bar.docked .ask-collapsed-btn {
        background: var(--bhv-gold);
        color: #1a1a1a;
    }

    /* ════════════════════════════════════════════════════════════════════
       4. FEED — 2-column app masonry, compact cards, info always visible
       ════════════════════════════════════════════════════════════════════ */
    /* Desktop keeps wide gutters (24px page + 30px section); the app look is
       a near edge-to-edge grid with ~9px gutters. */
    .page-wrapper { padding-left: 10px; padding-right: 10px; }
    .section#skills,
    .section.profile-listings { padding-left: 4px; padding-right: 4px; }
    .listing-stack-container { padding: 0 2px; }

    /* Plain CSS-multicol masonry (filtered views). */
    .listing-masonry { column-count: 2 !important; column-gap: 10px; }
    .listing-masonry.profile-masonry { column-count: 2 !important; }
    /* Empty states ("No listings found") must not fragment across columns. */
    .listing-masonry:not(:has(.listing-card)) { column-count: 1 !important; }

    /* JS-packed feed renders ONE column at this width — re-flow its cards
       into a 2-col CSS masonry inside that single column. The :only-child
       guard backs off if the JS ever renders 2+ real columns. */
    .listing-masonry.listing-masonry-cols { gap: 10px; }
    .listing-masonry-cols .listing-col:only-child {
        display: block;
        max-width: none;
        columns: 2;
        column-gap: 10px;
    }
    .listing-masonry-cols .listing-col:only-child > * {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-bottom: 10px;
    }
    .listing-masonry-cols .listing-col { gap: 10px; max-width: none; }

    /* App-style card shell. */
    .listing-card {
        min-height: 0;
        border-radius: var(--bhv-card-radius);
        border: 1px solid rgba(0, 0, 0, 0.09);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        margin-bottom: 10px;
    }
    .listing-card:hover { transform: none; }

    /* Title + tags + owner bar permanently visible IN FLOW (the desktop
       hover-overlay pattern is useless on touch). DOM order: media → info →
       bottom bar, which is exactly the app's card anatomy. */
    .listing-card .listing-card-info,
    .listing-card .lc-bottom-bar {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: none;
        color: inherit;
        transition: none;
    }
    .listing-card .listing-card-info { padding: 7px 10px 0; gap: 4px; }
    .listing-masonry .listing-card .lc-title,
    .listing-card:hover .lc-title {
        color: var(--bhv-ink);
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1.25;
    }
    .listing-card .lc-bottom-bar { padding: 5px 10px 9px; margin-top: 0; }
    .listing-masonry .listing-card .lc-owner,
    .listing-card:hover .lc-owner {
        color: #5c5c63;
        font-size: 0.74rem;
    }
    .listing-card .lc-comment-btn { color: #8a8a90; }

    /* Gold-outline skill chips (app chip spec). */
    .listing-card .lc-tag,
    .lc-info-tags .lc-tag {
        background: transparent;
        border: 1px solid rgba(245, 178, 52, 0.9);
        color: #b97f10;
        border-radius: 10px;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 1px 7px;
    }

    /* Type tag stays readable on the media (no hover state on touch). */
    .listing-card:hover .lc-type-tag,
    .listing-card:focus-within .lc-type-tag {
        opacity: 1;
        visibility: visible;
    }
    .lc-type-tag { font-size: 0.6rem; padding: 2px 8px; }

    /* Keystone / Artisan — gold ring + app-style glow. */
    .listing-card.lc-tier-keystone {
        border-color: transparent;
        box-shadow: 0 0 0 2px var(--bhv-gold), 0 0 14px rgba(245, 178, 52, 0.45);
    }
    .listing-card.lc-tier-artisan {
        border-color: transparent;
        box-shadow: 0 0 0 1.5px rgba(245, 178, 52, 0.67);
    }
    .lc-tier-badge.lc-tier-keystone {
        background: var(--bhv-gold);
        color: #1a1a1a;
        border-color: var(--bhv-gold);
    }
    /* Narrow cards: keep the owner name readable next to the tier badge. */
    .lc-bottom-bar .lc-tier-badge { font-size: 0.52rem; padding: 1px 4px; }
    .lc-bottom-bar .lc-owner-name { min-width: 3ch; }

    /* Member cards — app: square photo, name/loc/chips, gold CTA. */
    .member-card .member-card-avatar { aspect-ratio: 1 / 1; max-height: 220px; }
    .member-card .member-card-body { padding: 0.55rem 0.65rem 0.65rem; gap: 0.3rem; }
    .member-card .member-card-name { font-size: 0.88rem; }
    .member-card .member-card-loc { font-size: 0.7rem; }
    .member-card .member-card-cta {
        display: block;
        text-align: center;
        background: var(--bhv-gold);
        color: #1a1a1a;
        font-weight: 700;
        font-size: 0.78rem;
        border-radius: 10px;
        padding: 7px 8px;
        margin-top: 0.35rem;
    }

    /* Forum cards — app Discuss card: dark title, gold reply count. */
    .listing-card.forum-card {
        border-radius: var(--bhv-card-radius);
        padding: 0.7rem 0.8rem;
    }
    .forum-card-title { color: var(--bhv-ink); font-size: 0.92rem; font-weight: 700; }
    .forum-card-body { font-size: 0.78rem; }
    .forum-card-tag {
        background: var(--bhv-gold-soft);
        color: #b97f10;
        border-radius: 8px;
    }
    .forum-card-replies { color: var(--bhv-gold-deep); font-weight: 700; }

    /* Add-card stays compact. */
    .listing-card.add-card { min-height: 150px; }
    .add-card-plus { color: var(--bhv-gold-deep); }
    .add-card-title { color: var(--bhv-ink); font-size: 0.88rem; }

    /* ════════════════════════════════════════════════════════════════════
       5. OVERLAYS → BOTTOM SHEETS (app modal pattern)
       ════════════════════════════════════════════════════════════════════ */
    @keyframes bhvSheetUp {
        from { transform: translateY(35%); opacity: 0.5; }
        to   { transform: translateY(0);   opacity: 1; }
    }

    /* Listing detail. */
    .listing-detail-overlay {
        padding: 0;
        align-items: flex-end;
        overflow-y: hidden;
    }
    .listing-detail-overlay .listing-detail-dialog {
        max-width: none;
        width: 100%;
        max-height: 94dvh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        animation: bhvSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding-bottom: calc(10px + var(--bhv-safe-bottom));
    }
    .listing-detail-overlay .listing-detail-dialog::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 2px;
        background: #d4d4d8;
        margin: 8px auto 2px;
    }

    /* Forum thread modal. */
    .forum-thread-modal {
        padding: 0;
        align-items: flex-end !important;
    }
    .forum-thread-modal .ftm-dialog {
        max-width: none !important;
        width: 100% !important;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0 !important;
        margin: 0 !important;
        animation: bhvSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding-bottom: calc(14px + var(--bhv-safe-bottom)) !important;
    }
    .forum-thread-modal .ftm-dialog::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 2px;
        background: #d4d4d8;
        margin: 0 auto 10px;
    }
    .ftm-replies { max-height: 46dvh; }
    .ftm-form button[type="submit"],
    .ftm-form .ftm-cancel { border-radius: 14px; }

    /* Generic modals (add-listing / add-forum / comment / phone change …). */
    .modal .modal-content {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        padding: 1.2rem 1.1rem calc(1.2rem + var(--bhv-safe-bottom));
        animation: bhvSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-sizing: border-box;
    }
    .modal .modal-content input,
    .modal .modal-content textarea,
    .modal .modal-content select { font-size: 16px; }

    /* ════════════════════════════════════════════════════════════════════
       6. FLOATING CONTROLS (lift above the tab bar)
       ════════════════════════════════════════════════════════════════════ */
    .view-toggle {
        bottom: calc(var(--bhv-tabbar-h) + var(--bhv-safe-bottom) + 73px);   /* raised 55px */
        padding: 0.6rem 1.1rem;
        font-size: 0.9rem;
        background-color: rgba(29, 29, 31, 0.82);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    /* Directly to the right of the chat FAB (.bw-bubble: left:14, width:50). */
    .back-to-top {
        bottom: calc(var(--bhv-safe-bottom) + 23px);
        left: 74px;
        right: auto;
        width: 40px;
        height: 40px;
    }

    /* ════════════════════════════════════════════════════════════════════
       7. MAP VIEW — full-bleed map, members list as a bottom panel
       ════════════════════════════════════════════════════════════════════ */
    .main-map-wrap { margin: 0.25rem 0 0.5rem; gap: 8px; }
    /* Shorter map so it fits the phone screen and leaves room for the members
       list below (map + list stack in a column — see styles.css). */
    .mv-map-col {
        height: 48dvh;
        min-height: 240px;
        max-height: 440px;
    }
    /* When the list is collapsed, let the map use more of the screen. */
    .main-map-wrap.mv-collapsed .mv-map-col {
        height: 62dvh;
        max-height: none;
    }
    #main-map { border-radius: var(--bhv-card-radius); }
    .mv-sidebar {
        border-radius: var(--bhv-card-radius);
        max-height: 34dvh;
    }
    .mv-show-list { border-radius: 999px; }

    /* ════════════════════════════════════════════════════════════════════
       8. CHAT WIDGET + FLOW FAB — floating pair lifted above the tab bar
          (app parity: chat bubble on the left, smaller Flow FAB to its right).
          The Alerts tab still opens chat too. Panel becomes a full sheet.
       ════════════════════════════════════════════════════════════════════ */
    .bw-bubble {
        left: 14px !important;
        right: auto !important;
        bottom: calc(var(--bhv-tabbar-h) + var(--bhv-safe-bottom) + 18px) !important;
        width: 50px !important;
        height: 50px !important;
    }
    .bw-bubble svg { width: 23px !important; height: 23px !important; }
    .bhv-flow-fab {
        left: 74px;   /* 14 (bubble left) + 50 (bubble) + 10 gap */
        bottom: calc(var(--bhv-tabbar-h) + var(--bhv-safe-bottom) + 21px);
        width: 44px;
        height: 44px;
    }
    .bhv-flow-fab svg { width: 21px; height: 21px; }

    /* Flow FAB placement variants (Appearance settings). Base above = 'between'
       (right of the chat bubble, above the pill). Compound selectors outrank
       the base rule. */
    .bhv-flow-fab.bhv-flow-fab--chat {        /* stacked above the chat bubble */
        left: 17px;
        right: auto;
        bottom: calc(var(--bhv-tabbar-h) + var(--bhv-safe-bottom) + 76px);
    }
    .bhv-flow-fab.bhv-flow-fab--profile {     /* bottom-right column, stacked
                                                 clear above the nav FAB */
        left: auto;
        right: 19px;
        bottom: calc(var(--bhv-safe-bottom) + 84px);
    }
    .bw-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 52px) !important;
        max-height: none !important;
        border-radius: 18px 18px 0 0 !important;
        padding-bottom: var(--bhv-safe-bottom);
        box-sizing: border-box;
    }
    .bw-reply input, .bw-reply .bw-reply-input { font-size: 16px !important; }

    /* ════════════════════════════════════════════════════════════════════
       9. PROFILE PAGE (profile.html) — app profile layout
       ════════════════════════════════════════════════════════════════════ */
    /* Tight header: no outer padding (the slim `body.bhv-loggedin .site-header`
       rule adds 8px on top of the wrapper's own padding → dead white space). */
    .profile-page .site-header { height: auto; min-height: 0; padding: 0 !important; }
    .profile-page .header-content-wrapper { padding: 0.4rem 0.7rem 0.15rem; }
    .profile-header {
        flex-wrap: wrap;
        row-gap: 0;
        column-gap: 6px;
        align-items: center;
    }
    .profile-header .profile-avatar-header {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50%;
        border: 2px solid var(--bhv-gold);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    /* 3 columns: back · avatar · info (name+meta then share/message), with the
       docked section tabs wrapping full-width beneath. Info column is a single
       row — name + meta on the left, action icons right-aligned — so it doesn't
       look jumbled. Explicit `order` beats the ≤600px styles.css rule that
       floated the actions ABOVE the name (order:-1), which on this row layout
       shoved share/message to the LEFT of the name. */
    .profile-header-info {
        min-width: 0;
        transform: none; /* desktop-only raise reset */
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    .profile-header-info .profile-name-row {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        margin: 0;
        width: auto;
    }
    .profile-header-info .profile-actions-row {
        order: 2;
        flex: 0 0 auto;
        margin: 0 0 0 auto;   /* push share/message to the right edge */
        display: flex;
        align-items: center;
        width: auto;
    }
    /* Compact avatar column: the base .col-photo reserves 150×100px for the big
       desktop photo, leaving dead white space around the 56px mobile avatar. */
    .profile-header .col-photo { width: 56px; height: 56px; }
    .profile-header .profile-avatar-header {
        position: static !important;
        top: auto !important;
        left: auto !important;
    }
    /* Meta (badge + location) stays on the name line and never wraps under it. */
    .profile-header .profile-meta { flex-wrap: nowrap; white-space: nowrap; }
    .profile-header #profile-name {
        font-size: 1.05rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .profile-meta { font-size: 0.72rem; flex: 0 0 auto; }
    /* Share + Message live in the docked actions row now (right of the tabs). */
    .profile-action-buttons {
        display: flex;
        gap: 4px;
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
    }
    /* Plain icons — NO circle background/border; just the icon + hover tooltip. */
    .profile-action-buttons .share-btn,
    .profile-action-buttons .message-btn {
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        border: none;
        color: var(--bhv-gold-deep);
        padding: 3px;
    }
    .profile-action-buttons .share-btn svg,
    .profile-action-buttons .message-btn svg { width: 20px; height: 20px; }

    /* PROFILE PAGE: Admin/Analytics stay in the header TOP-RIGHT (mobile.js no
       longer docks the nav here). Only admin links show — the account/Welcome
       dropdown + location pin are hidden. Anchored to the position:relative
       .header-content-wrapper. */
    body.profile-page .site-header .main-nav {
        position: absolute !important;
        top: 8px !important;    /* beat the base .site-header .main-nav top/right auto !important */
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    /* Hide the account dropdown here only when LOGGED IN (admins show Admin/
       Analytics instead; non-admins show nothing). Logged-out visitors KEEP the
       "Sign In/Up" dropdown so the FAB login gate still works on a shared profile
       link — the FAB clicks #account-button, which must be visible. */
    body.profile-page.bhv-loggedin .site-header .main-nav ul .dropdown { display: none; }
    body.profile-page .site-header .main-nav .header-location-tag { display: none; }
    body.profile-page .site-header .main-nav .nav-admin-top { font-size: 0.78rem; padding: 3px 6px; }
    /* Reserve room top-right so the name never runs under the admin links
       (Admin + Analytics ≈ 130px, offset 10px from the edge). */
    body.bhv-admin.profile-page .profile-name-row { padding-right: 144px; }

    /* Own-profile edit-mode (pencil/eye) + settings (gear) icons — docked bottom-
       right on the FAB's row, just LEFT of it. .bhv-profile-dock is body-level
       (fixed), so it's not trapped by the header's backdrop-filter. */
    .bhv-profile-dock {
        position: fixed;
        right: 78px;   /* FAB right:14 + 54 wide + 10 gap → sits left of the FAB */
        bottom: calc(var(--bhv-safe-bottom) + 18px);
        height: 54px;   /* FAB height — icons centre-align with it */
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 6000;
    }
    .bhv-profile-dock .bhv-header-edit,
    .bhv-profile-dock .bhv-header-gear {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(22px) saturate(1.7);
        backdrop-filter: blur(22px) saturate(1.7);
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #74747c;
        padding: 0;
        cursor: pointer;
    }
    .bhv-profile-dock .bhv-header-edit svg,
    .bhv-profile-dock .bhv-header-gear svg { width: 21px; height: 21px; }
    /* The desktop text toggle + bottom master-nav Edit button are replaced by the
       docked icon on mobile (private toggle still floats in master-nav on edit). */
    #master-nav #edit-mode-toggle { display: none !important; }
    /* Settings lives in the header gear now — drop the bottom-right settings FAB. */
    #settings-fab { display: none !important; }

    /* Hero columns stack into app-style cards. */
    .profile-hero { padding: 0.5rem 0.75rem; }
    .profile-rq { padding: 0.25rem 0.25rem 0; }
    .profile-rq .prq-row { gap: 0.6rem; }
    .profile-hero-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .profile-hero-container > div {
        width: 100%;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.09);
        border-radius: var(--bhv-card-radius);
        padding: 0.8rem 0.9rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    .profile-hero-container .hero-header h3 {
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--bhv-gold-deep);
    }
    .hero-drag-handle { display: none; }

    /* Breadcrumb (arriving from a listing) — one compact scrollable line. */
    .crumb-trail {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        font-size: 0.74rem;
        gap: 0.3rem;
        padding: 0.35rem 0.75rem;
        max-width: 100%;
    }
    .crumb-trail::-webkit-scrollbar { display: none; }
    .crumb-trail .crumb-current {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }

    /* Listing-type tabs scroll horizontally; gold active state. */
    .combined-profile-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Dock flush under the profile header. The header is content-driven, so
           use the measured height (mobile.js publishes --bhv-header-h). */
        top: var(--bhv-header-h, 90px);
        border-radius: 0;
        padding: 0.4rem 0.5rem;
    }
    .combined-profile-tabs::-webkit-scrollbar { display: none; }
    .listing-type-tab { white-space: nowrap; font-size: 0.88rem; }
    .listing-type-tab.active {
        color: var(--bhv-gold-deep);
        background: var(--bhv-gold-soft);
        font-weight: 700;
    }

    .profile-listings { padding: 0.5rem 0.75rem; }

    /* Settings FAB sits above the tab bar. */
    #settings-fab {
        bottom: calc(var(--bhv-tabbar-h) + var(--bhv-safe-bottom) + 18px) !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       10. ACCOUNT PAGE (account.html) — app settings feel
       ════════════════════════════════════════════════════════════════════ */
    .acct-wrapper { padding: 0.9rem 0.8rem 3rem; }
    .acct-hero {
        flex-wrap: wrap;
        gap: 0.8rem;
        padding: 0.9rem;
        border-radius: var(--bhv-card-radius);
    }
    .acct-hero .acct-avatar {
        width: 56px;
        height: 56px;
        border: 2px solid var(--bhv-gold);
    }
    .acct-hero #edit-profile-link,
    .acct-hero #view-profile-link {
        flex: 1 1 calc(50% - 0.4rem);
        text-align: center;
        border-radius: 12px;
        padding: 0.55rem 0.5rem;
    }
    .acct-tabs-nav {
        position: sticky;
        top: 50px;
        z-index: 1200;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-radius: 0;
    }
    /* Extra specificity: account.html's inline <style> loads after this file. */
    .acct-tabs-nav .acct-tab-btn { font-size: 0.88rem; padding: 0.7rem 0.8rem; }
    .acct-tabs-nav .acct-tab-btn.active {
        color: var(--bhv-gold-deep);
        border-bottom-color: var(--bhv-gold);
    }
    .acct-tabs-nav .acct-tab-btn:hover { color: var(--bhv-gold-deep); }
    /* The bottom-right "go to profile" FAB duplicates the Profile tab. */
    #account-profile-fab { display: none !important; }
    .acct-card { border-radius: var(--bhv-card-radius); }
    .acct-wrapper input[type="text"],
    .acct-wrapper input[type="email"],
    .acct-wrapper input[type="tel"],
    .acct-wrapper input[type="date"],
    .acct-wrapper select,
    .acct-wrapper textarea { font-size: 16px; }

    /* ════════════════════════════════════════════════════════════════════
       11. FOOTER
       ════════════════════════════════════════════════════════════════════ */
    .site-footer { padding-bottom: 0.5rem; font-size: 0.78rem; }
}

/* ════════════════════════════════════════════════════════════════════
   BEHOV PANELS — Connect | Saved | Alerts slide-up sheets
   Available at all viewport widths; auto-sizing on desktop.
   ════════════════════════════════════════════════════════════════════ */

/* Overlay backdrop */
.bhp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.38);
    z-index: 7000;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.bhp-overlay.bhp-visible {
    display: block;
    opacity: 1;
}

/* The panel itself */
.bhp-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7001;
    background: #fff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
}
.bhp-panel.bhp-open { transform: translateY(0); }

/* One mobile layout across the whole ≤768px range — this panel-centering used
   to kick in at 600px, creating a second mid-mobile layout. Only apply it on
   desktop/tablet (≥769px) so phones get a single, consistent full-width sheet. */
@media (min-width: 769px) {
    .bhp-panel {
        left: 50%;
        right: auto;
        width: 420px;
        transform: translateX(-50%) translateY(100%);
        border-radius: 20px 20px 0 0;
    }
    .bhp-panel.bhp-open { transform: translateX(-50%) translateY(0); }
}

/* Header */
.bhp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.bhp-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}
.bhp-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}
.bhp-close:hover { color: #333; }

/* Sub-tab row */
.bhp-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bhp-tabs::-webkit-scrollbar { display: none; }
.bhp-tab {
    background: none;
    border: none;
    padding: 6px 12px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.bhp-tab.bhp-tab-active {
    color: #d89018;
    border-bottom-color: #f5b234;
}

/* Scrollable body */
.bhp-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
}

/* Loading & empty states */
.bhp-loading { display: flex; justify-content: center; padding: 40px 0; }
.bhp-spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: #f5b234;
    border-radius: 50%;
    animation: bhp-spin 0.7s linear infinite;
}
@keyframes bhp-spin { to { transform: rotate(360deg); } }
.bhp-empty {
    text-align: center;
    padding: 36px 20px;
    color: #999;
    font-size: 0.88rem;
    white-space: pre-line;
}

/* Section labels */
.bhp-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    margin: 14px 0 6px;
}
.bhp-section-label:first-child { margin-top: 4px; }

/* Connection / member cards */
.bhp-connections { display: flex; flex-direction: column; }
.bhp-conn-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.bhp-conn-card:last-child { border-bottom: none; }
.bhp-conn-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.bhp-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bhp-av-initials {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.bhp-conn-info { display: flex; flex-direction: column; min-width: 0; }
.bhp-conn-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bhp-conn-sub {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bhp-pending { color: #f5b234 !important; }
.bhp-conn-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* Buttons */
.bhp-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.bhp-btn:disabled { opacity: 0.5; cursor: default; }
.bhp-btn:active { opacity: 0.75; }
.bhp-btn-gold { background: #f5b234; color: #fff; }
.bhp-btn-ghost {
    background: rgba(0,0,0,0.06);
    color: #444;
}
.bhp-btn-ghost:hover { background: rgba(0,0,0,0.1); }
.bhp-btn-sm { padding: 4px 9px; font-size: 0.75rem; }
.bhp-btn-icon { background: none; padding: 4px; color: #888; }
.bhp-btn-icon:hover { color: #f5b234; }
.bhp-btn-del { color: #c0392b !important; }

/* Tagged listings grid */
.bhp-tagged-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}
.bhp-tagged-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8f8;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0,0,0,0.06);
}
.bhp-tagged-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.bhp-thumb-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
}
.bhp-tagged-info { padding: 8px; }
.bhp-tagged-title { font-size: 0.8rem; font-weight: 600; color: #1d1d1f; display: block; }
.bhp-tagged-owner { font-size: 0.72rem; color: #888; display: block; margin-top: 2px; }

/* Contacts section */
.bhp-contacts { padding-top: 4px; }
.bhp-contacts-intro { font-size: 0.84rem; color: #666; margin-bottom: 16px; line-height: 1.5; }
.bhp-contacts-share { margin-top: 20px; }
.bhp-label { display: block; font-size: 0.75rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.bhp-input-row { display: flex; gap: 7px; }
.bhp-input {
    flex: 1;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.88rem;
    color: #1d1d1f;
    background: #fafafa;
    outline: none;
}
.bhp-input:focus { border-color: #f5b234; background: #fff; }
.bhp-select { background: #fafafa; cursor: pointer; }
.bhp-contact-msg { font-size: 0.8rem; margin-top: 6px; min-height: 16px; }

/* Templates */
.bhp-tpl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bhp-tpl-types {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-right: 8px;
}
.bhp-tpl-types::-webkit-scrollbar { display: none; }
.bhp-tpl-type-btn {
    background: rgba(0,0,0,0.05);
    border: none;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.bhp-tpl-type-btn.active { background: #f5b234; color: #fff; }
.bhp-tpl-compose {
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bhp-textarea {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    color: #1d1d1f;
    background: #fff;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.bhp-textarea:focus { border-color: #f5b234; }
.bhp-tpl-compose-actions { display: flex; gap: 6px; justify-content: flex-end; }
.bhp-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.bhp-tpl-card {
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    padding: 12px;
}
.bhp-tpl-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.bhp-tpl-tag {
    background: rgba(245,178,52,0.18);
    color: #d89018;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.bhp-tpl-card-title { font-size: 0.88rem; font-weight: 700; color: #1d1d1f; }
.bhp-tpl-body {
    font-size: 0.78rem;
    color: #555;
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0 0 10px;
    line-height: 1.55;
    max-height: 100px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.bhp-tpl-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* Alerts */
.bhp-alert-top-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.bhp-alerts-list { display: flex; flex-direction: column; gap: 2px; }
.bhp-alert-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}
.bhp-alert-card.bhp-alert-unread { background: rgba(245,178,52,0.08); }
.bhp-alert-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.2; }
.bhp-alert-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bhp-alert-label { font-size: 0.86rem; font-weight: 600; color: #1d1d1f; }
.bhp-alert-sub { font-size: 0.77rem; color: #666; }
.bhp-alert-time { font-size: 0.72rem; color: #aaa; }
.bhp-btn-readmark { font-size: 0.9rem; color: #27ae60 !important; flex-shrink: 0; }

/* Assigned / Reminders */
.bhp-assigned-list { display: flex; flex-direction: column; gap: 10px; }
.bhp-assigned-card {
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    padding: 12px;
}
.bhp-assigned-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.bhp-assigned-task { font-size: 0.9rem; font-weight: 700; color: #1d1d1f; flex: 1; }
.bhp-assigned-status {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.bhp-status-pending { background: rgba(0,0,0,0.07); color: #666; }
.bhp-status-accepted { background: rgba(39,174,96,0.15); color: #1e8449; }
.bhp-status-done { background: rgba(39,174,96,0.25); color: #1e8449; }
.bhp-status-declined { background: rgba(192,57,43,0.12); color: #c0392b; }
.bhp-assigned-note { font-size: 0.8rem; color: #666; margin: 0 0 5px; line-height: 1.4; }
.bhp-assigned-meta { font-size: 0.73rem; color: #aaa; margin-bottom: 8px; }
.bhp-assigned-actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   APP VIEW — inline panel host for Connect / Saved / Alerts / Profile
   ════════════════════════════════════════════════════════════════════ */

/* #bhv-app-view is always injected by mobile.js but only shows in active state */
#bhv-app-view {
    display: none;
    flex-direction: column;
    min-height: calc(100vh - var(--bhv-tabbar-h) - var(--bhv-safe-bottom) - 48px);
    padding-bottom: calc(var(--bhv-tabbar-h) + var(--bhv-safe-bottom) + 12px);
}

body.bhv-app-active #bhv-app-view { display: flex; }

/* Hide browse sections when an app tab is active */
body.bhv-app-active .hero,
body.bhv-app-active #hero { display: none !important; }

body.bhv-app-active .section,
body.bhv-app-active #skills { display: none !important; }

body.bhv-app-active footer.site-footer { display: none; }

/* Search bar — hide in app-tab mode */
body.bhv-app-active .search-chat-wrapper { display: none !important; }

/* Logged-in: collapse the header account button (tab bar takes over) */
body.bhv-loggedin .account-dropdown,
body.bhv-loggedin #account-dropdown { display: none !important; }

/* Header becomes slim brand bar only. No outer padding on the header itself —
   the .header-content-wrapper carries its own padding — so the sticky filter
   rail can dock flush (snug) right under the header with no dead gap. */
body.bhv-loggedin .site-header {
    padding: 0;
}
body.bhv-loggedin .header-content-wrapper {
    min-height: unset;
}

/* Inline tabs row (rendered inside #bhv-app-view by BehovPanels.renderInto) */
.bhv-app-tabs {
    display: flex;
    overflow-x: auto;
    gap: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 0 12px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    scrollbar-width: none;
}
.bhv-app-tabs::-webkit-scrollbar { display: none; }

/* panels.js renders .bhp-tab elements into .bhv-app-tabs */
.bhv-app-tabs .bhp-tab {
    flex: 0 0 auto;
    padding: 11px 14px;
    font-size: 0.82rem;
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    color: #555;
    white-space: nowrap;
}
.bhv-app-tabs .bhp-tab.bhp-tab-active {
    color: var(--bhv-gold-deep);
    border-bottom-color: var(--bhv-gold-deep);
    font-weight: 600;
}

/* panels.js renders its body HTML into .bhv-app-body */
.bhv-app-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

/* ── Profile mini-page ─────────────────────────────────────────────── */
.bhv-profile-card {
    display: flex;
    flex-direction: column;
    padding: 0 0 24px;
}
.bhv-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 16px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bhv-profile-av {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bhv-profile-av-init {
    background: var(--bhv-gold-soft);
    color: var(--bhv-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}
.bhv-profile-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bhv-profile-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bhv-ink);
}
.bhv-profile-loc {
    font-size: 0.78rem;
    color: #777;
}
.bhv-profile-links {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.bhv-profile-link {
    display: block;
    padding: 13px 20px;
    font-size: 0.92rem;
    color: var(--bhv-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.bhv-profile-link:active { background: rgba(0,0,0,0.04); }
.bhv-profile-admin-group {
    background: rgba(245,178,52,0.07);
}
.bhv-profile-admin-label {
    display: block;
    padding: 8px 20px 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bhv-gold-deep);
}
.bhv-profile-link-admin { color: var(--bhv-purple); }
.bhv-profile-logout { color: #c0392b; }

/* Ultra-small phones: tighten the grid + chrome a notch. */
@media (max-width: 380px) {
    .listing-masonry { column-gap: 8px; }
    .listing-masonry-cols .listing-col:only-child { column-gap: 8px; }
    .bhv-tab .bhv-tab-label { font-size: 0.55rem; }
    .hero-text h2 { font-size: 0.95rem; }
}