/* ============================================================
   TikTok-style profile theme (#25, 2026-09-29).
   View-layer only: overrides fb-profile.css fbp-* classes with the
   TikTok design language from the profile-revamp mockups
   (~/workspace/profile-revamp/). All JS hooks, real data wiring,
   and owner tile Edit/Delete menus are untouched.
   Direct-loaded (not minified) — bump ?v= on change.
   ============================================================ */

/* ---- Cover: taller, richer, deeper fade into the page ---- */
.fbp-cover { height: 150px; }
.fbp-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(24,25,26,0) 40%, #18191a 98%);
    pointer-events: none;
}
@media (min-width: 768px) {
    .fbp-cover { height: 220px; }
}

/* ---- Avatar: ONE design (2026-09-29, per Fabian) ----
   The wrap is a 152px gray disc while the image was only 104px: a gray
   circle showing behind the white avatar. Now the image fills the wrap,
   so there is a single circle with one ring. The legacy ::before story
   ring is suppressed in this header to avoid a second ring; seen-stories
   get the neutral gradient instead. */
.fbp-avatar-wrap { background: transparent; border: 0; }
.fbp-avatar-wrap img.profile-avatar-img {
    width: 100%; height: 100%;
    border: 3px solid transparent;
    background: linear-gradient(#0b0b0d, #0b0b0d) padding-box,
                linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) border-box;
}
.fbp-avatar-wrap.profile-stories-seen img.profile-avatar-img {
    background: linear-gradient(#0b0b0d, #0b0b0d) padding-box,
                linear-gradient(135deg, #8a8f98 0%, #d7dce1 100%) border-box;
}
.fbp-avatar-wrap.profile-has-stories::before { display: none; }
.fbp-avatar-row { margin-top: -76px; }
@media (min-width: 768px) {
    .fbp-avatar-row { margin-top: -84px; }
}

/* ---- Type hierarchy: sharper, TikTok-weight ---- */
.fbp-name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.fbp-handle {
    font-size: 14.5px; color: var(--tt-text-3, #a1a1aa);
    margin-top: 2px;
    text-align: center;
}

/* ---- Stats: TikTok 3-up row (Following / Followers / Posts) ---- */
.fbp-counts.tt-stats {
    display: flex; justify-content: center; gap: 28px;
    margin-top: 12px;
}
.tt-stat {
    display: flex; flex-direction: column; align-items: center;
    min-width: 72px;
}
.tt-stat b { font-size: 19px; font-weight: 800; color: #fff; }
.tt-stat span { font-size: 13px; color: var(--tt-text-3, #a1a1aa); }

/* ---- Action buttons: chunkier, friendlier ---- */
.fbp-actions .fbp-btn {
    min-height: 48px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}
.fbp-actions-row { gap: 10px; }

/* ---- Tabs: gradient pill active indicator ---- */
.fbp-tabs { position: relative; }
.fbp-tab { position: relative; }
.fbp-tab.active::after {
    content: '';
    position: absolute; left: 32%; right: 32%; bottom: -1px;
    height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, #7C3AED, #EC4899);
}

/* ---- Bio: TikTok centered rhythm ---- */
.fbp-bio { font-size: 14.5px; line-height: 1.5; }

/* ---- Creator badge: pill, on-brand (2026-10-03, per Fabian: no outline) ---- */
.fbp-creator-badge {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124,58,237,.18), rgba(236,72,153,.18));
    border: 1px solid transparent;
}

/* ---- Mobile canvas continuity is handled by fb-profile.css
        (body:has(.fbp-wrap) #18191a) — do not override here. ---- */

/* ---- Subscribe built into the page (2026-09-29, per Fabian) ----
   The floating bottom-fixed subscribe bar becomes a normal in-flow card
   on mobile. The legacy .ttsoc-subscription card is hidden on mobile: the
   bar now carries the complete subscribe UI (offer, email notice, tier
   selector, bundles), so there is exactly one subscribe section. */
@media (max-width: 767.98px) {
    .ttsoc-subscription { display: none; }
    .sticky-subscribe-bar {
        position: static;
        margin: 0 0 1rem;
        border-radius: 1rem;
        box-shadow: var(--ssb-shadow);
        animation: none;
        overflow: hidden;
    }
    /* Undo the floating-bar bottom clearance from subscribe-bar.css. */
    body:has(.sticky-subscribe-bar) .content-wrapper { padding-bottom: 0; }
    /* Card layout: identity row, then a full-width CTA, then extras. */
    .ssb-main { flex-wrap: wrap; padding: 0.875rem 1rem; }
    .ssb-avatar { width: 52px; height: 52px; }
    .ssb-name { font-size: 1.02rem; }
    .ssb-cta { flex: 1 1 100%; margin-top: 0.625rem; }
    .ssb-cta .btn-block { display: flex; width: 100%; }
    .ssb-cta .btn { justify-content: center; font-size: 1rem; }
    .ssb-email-notice { padding: 0 1rem; font-size: 0.82rem; }
    .ssb-tiers { padding: 0.75rem 1rem 0; }
    .ssb-bundles { padding: 0.75rem 1rem 0.875rem; }
}