/* Friendspace profile experience: identity, belonging, and conversation. */
html { scroll-behavior: smooth; }

body {
    overflow-x: hidden;
}

[data-owner-only="true"][hidden],
[data-owner-only="true"].hidden {
    display: none !important;
}

html,
body {
    width: 100%;
    max-width: 100%;
}

img,
video,
iframe { max-width: 100%; }

.profile-top-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
    backdrop-filter: blur(18px);
}

.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .04) 30%, rgba(15, 23, 42, .52) 100%);
    pointer-events: none;
}

.profile-cover > * { z-index: 2; }

.profile-identity-card {
    min-height: 178px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 1.5rem !important;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .16) !important;
}

.profile-identity-kicker,
.profile-section-kicker {
    margin: 0 0 .25rem;
    color: var(--friendspace-accent-color) !important;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

#full-name {
    overflow-wrap: anywhere;
    line-height: 1.08;
}

.profile-presence-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .6rem;
}

.profile-presence-pill,
.profile-circle-pill,
.profile-composer-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.75rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.profile-presence-pill { background: #ecfdf5; }
.profile-circle-pill { background: #fff7ed; color: #c2410c !important; }
#copyProfileLinkBtn.is-copied { background: #ecfdf5; border-color: #86efac; color: #166534; }

.profile-journey-nav {
    position: sticky;
    top: 4.35rem;
    z-index: 35;
    display: flex;
    gap: .45rem;
    width: max-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: .45rem;
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, .94);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .1);
    scrollbar-width: none;
    backdrop-filter: blur(16px);
}

.profile-journey-nav::-webkit-scrollbar { display: none; }

.profile-journey-nav a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    min-height: 2.35rem;
    padding: .5rem .8rem;
    border-radius: 999px;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.profile-journey-nav a:hover,
.profile-journey-nav a:focus-visible,
.profile-journey-nav a.is-active {
    background: #fff7ed;
    color: #ea580c;
    outline: none;
    transform: translateY(-1px);
}

.profile-journey-nav a.is-active {
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .18), 0 5px 14px rgba(249, 115, 22, .11);
}

.profile-page-surface {
    margin-top: 1rem;
    border: 1px solid rgba(226, 232, 240, .62);
    border-radius: 1.5rem 1.5rem 0 0;
    background: color-mix(in srgb, var(--bg-color, #f0f2f5) 90%, transparent);
    box-shadow: 0 -16px 46px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px) saturate(.85);
}

/* A custom page background is the profile canvas. Keep cards solid for
   readability, but let the chosen image show through their gutters. */
body.profile-has-custom-background {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background-color: transparent !important;
    background-image: none !important;
}

/* Avoid iOS Safari's heavily downsampled background-attachment: fixed path.
   A dedicated viewport layer keeps uploaded photos and patterns crisp. */
body.profile-has-custom-background::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: '';
    pointer-events: none;
    background-color: var(--bg-color, #eef2f7);
    background-image: var(--profile-custom-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.profile-has-custom-background .profile-page-surface {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 -16px 46px rgba(15, 23, 42, .14);
    backdrop-filter: none;
}

@media (max-width: 767px) {
    body.profile-has-custom-background::before { background-position: top center; }
}

#profile-content-grid { align-items: start; }

.profile-context-column { order: 2; }
.profile-social-column { order: 1; min-width: 0; }

.profile-card {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 1rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
}

.business-front-porch {
    border-top: 3px solid var(--theme-accent);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,247,237,.92));
}

.business-catalog { border-top: 3px solid var(--theme-accent); }
.business-catalog-description { margin: -.2rem 0 1rem; color: var(--text-color-secondary); font-size: .82rem; line-height: 1.45; }
.business-catalog-items { display: grid; gap: .75rem; }
.business-catalog-item { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .75rem; padding: .65rem; border: 1px solid var(--border-color-soft); border-radius: .85rem; background: rgba(255,255,255,.74); }
.business-catalog-image { width: 5rem; height: 5rem; overflow: hidden; border-radius: .65rem; background: #f1f5f9; }
.business-catalog-image img { width: 100%; height: 100%; object-fit: cover; }
.business-catalog-image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--theme-accent); font-size: 1.35rem; }
.business-catalog-copy { min-width: 0; }
.business-catalog-copy h4 { margin: 0; color: var(--text-color-primary); font-size: .92rem; font-weight: 800; line-height: 1.2; }
.business-catalog-copy p { margin: .25rem 0 .45rem; color: var(--text-color-secondary); font-size: .78rem; line-height: 1.4; }
.business-catalog-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.business-catalog-meta span, .business-catalog-direct { color: #9a3412; font-size: .7rem; font-weight: 700; }
.business-catalog-edit { position: absolute; top: .45rem; right: .45rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px; color: #475569; background: #f1f5f9; }
.business-catalog-empty { padding: 1rem; border: 1px dashed rgba(100,116,139,.32); border-radius: .8rem; color: var(--text-color-secondary); text-align: center; font-size: .82rem; }
.business-catalog-empty i { color: var(--theme-accent); font-size: 1.2rem; }
.business-catalog-manager { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1rem; background: rgba(15,23,42,.58); }
.business-catalog-manager-card { width: min(100%, 38rem); max-height: min(90dvh, 46rem); overflow: auto; border-radius: 1.1rem; background: #fff; box-shadow: 0 24px 64px rgba(15,23,42,.32); }
.business-catalog-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border-color-soft); }
.business-catalog-manager-head h3 { margin: 0; color: var(--text-color-primary); font-size: 1.25rem; font-weight: 800; }
.business-catalog-close { width: 2rem; height: 2rem; border: 0; border-radius: 999px; color: #475569; background: #f1f5f9; font-size: 1.5rem; line-height: 1; }
.business-catalog-form { display: grid; gap: .85rem; padding: 1.2rem; }
.business-catalog-form label { display: grid; gap: .35rem; color: var(--text-color-primary); font-size: .8rem; font-weight: 750; }
.business-catalog-form input, .business-catalog-form textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .65rem; padding: .6rem .7rem; color: #0f172a; font: inherit; font-weight: 400; }
.business-catalog-form label span { color: var(--text-color-secondary); font-size: .7rem; font-weight: 500; }
.business-catalog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.business-catalog-manager-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: .55rem; align-items: center; margin-top: .2rem; }
.business-catalog-delete { border: 0; color: #b91c1c; background: transparent; font-weight: 750; }
@media (max-width: 480px) { .business-catalog-manager { padding: .5rem; align-items: end; } .business-catalog-manager-card { max-height: 94dvh; border-radius: 1rem 1rem .5rem .5rem; } .business-catalog-form-grid { grid-template-columns: 1fr; } .business-catalog-manager-actions { grid-template-columns: 1fr 1fr; } .business-catalog-manager-actions > span { display: none; } .business-catalog-delete { grid-column: 1 / -1; justify-self: start; } }

.business-front-porch-heading { display: flex; align-items: center; gap: .75rem; }
.business-front-porch-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .8rem; background: #fff1e7; color: var(--theme-accent); }
.business-front-porch-category { margin-top: .1rem; color: var(--text-secondary-color); font-size: .78rem; font-weight: 700; }
.business-front-porch-copy { margin-top: .85rem; color: var(--text-primary-color); font-size: .9rem; line-height: 1.55; }
.business-front-porch-promise { display: flex; gap: .55rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid rgba(251,146,60,.2); color: var(--text-secondary-color); font-size: .77rem; line-height: 1.4; }
.business-front-porch-promise i { margin-top: .1rem; color: var(--theme-accent); }

.profile-identity-card { overflow: visible; }

.profile-profile-composer {
    border-top: 3px solid var(--friendspace-accent-color);
}

.profile-composer-heading,
.profile-flow-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.profile-composer-heading h2,
.profile-flow-heading h2 {
    margin: 0;
    color: var(--text-primary-color);
    font-size: 1.1rem;
    font-weight: 800;
}

.profile-composer-state {
    flex: 0 0 auto;
    background: #f1f5f9;
    color: #64748b;
}

.profile-composer-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
}

.profile-composer-tools {
    display: flex;
    flex: 1 1 auto;
    gap: .4rem;
    min-width: 0;
    padding-bottom: .15rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.profile-composer-tools .profile-action-chip { flex: 0 0 auto; }

.profile-flow-heading {
    margin: .25rem .25rem -.25rem;
    padding: .25rem .2rem;
}

.profile-flow-heading a {
    flex: 0 0 auto;
    color: var(--friendspace-accent-color);
    font-size: .76rem;
    font-weight: 700;
}

#profile-about,
#profile-media,
#profile-social,
#profile-stories,
#profile-notes,
#profile-blog-section,
#posts-feed { scroll-margin-top: 8.5rem; }

.profile-blog-library {
    border-top: 3px solid #0f766e;
}

.profile-blog-library-header,
.profile-blog-library-tools,
.profile-blog-conversation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.profile-blog-library-description {
    margin-top: .3rem;
    color: var(--text-secondary-color) !important;
    font-size: .82rem;
}

.profile-blog-library-tools {
    margin: 1rem 0;
    padding-top: .85rem;
    border-top: 1px solid var(--border-color-soft);
}

.profile-blog-search {
    position: relative;
    display: block;
    width: min(100%, 22rem);
}

.profile-blog-search i {
    position: absolute;
    top: 50%;
    left: .85rem;
    color: #94a3b8;
    transform: translateY(-50%);
}

.profile-blog-search input {
    width: 100%;
    min-height: 2.5rem;
    padding: .6rem .85rem .6rem 2.45rem;
    border: 1px solid var(--border-color-soft);
    border-radius: 999px;
    background: var(--input-bg-color);
    color: var(--text-primary-color);
    font-size: .8rem;
    outline: none;
}

.profile-blog-search input:focus {
    border-color: var(--friendspace-accent-color);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

.profile-blog-count {
    flex: 0 0 auto;
    color: var(--text-secondary-color);
    font-size: .75rem;
    font-weight: 700;
}

.profile-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.profile-blog-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 13.5rem;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--border-color-soft);
    border-radius: .9rem;
    background: linear-gradient(155deg, var(--card-bg-color) 62%, rgba(240, 253, 250, .9));
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.profile-blog-card:hover,
.profile-blog-card:focus-within {
    border-color: #5eead4;
    box-shadow: 0 14px 30px rgba(15, 118, 110, .11);
    transform: translateY(-2px);
}

.profile-blog-card-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #0f766e;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-blog-card h4 {
    margin: .65rem 0 .45rem;
    color: var(--text-primary-color);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
}

.profile-blog-card-preview {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary-color) !important;
    font-size: .8rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.profile-blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .9rem;
}

.profile-blog-card-stats {
    display: flex;
    gap: .7rem;
    color: var(--text-secondary-color);
    font-size: .7rem;
}

.profile-blog-open-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.2rem;
    padding: .45rem .7rem;
    border-radius: .65rem;
    background: #ccfbf1;
    color: #115e59;
    font-size: .74rem;
    font-weight: 800;
}

.profile-blog-composer-modal {
    overflow: hidden;
}

#postModal,
#blogPostModal,
#blogReaderModal {
    position: fixed;
    inset: 0;
    z-index: 110;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(15, 23, 42, .64);
    backdrop-filter: blur(8px);
}

.profile-blog-composer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: -1.5rem -1.5rem 1.25rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color-soft);
    background: linear-gradient(135deg, #f0fdfa, #fff7ed);
}

.profile-blog-reader-modal {
    display: flex;
    flex-direction: column;
    width: min(95vw, 72rem);
    max-width: 72rem;
    height: min(92vh, 56rem);
    max-height: min(92vh, 56rem);
    padding: 0 !important;
    overflow: hidden;
    border-radius: 1.25rem !important;
}

.profile-blog-reader-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color-soft);
    background: linear-gradient(135deg, #f0fdfa, #fff7ed);
}

.profile-blog-reader-label {
    margin: 0;
    color: var(--text-primary-color) !important;
    font-weight: 800;
}

.profile-blog-reader-actions { display: flex; gap: .45rem; }

.profile-blog-reader-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: #475569;
}

.profile-blog-reader-layout {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .75fr);
    min-height: 0;
    overflow: hidden;
}

.profile-blog-reader-article,
.profile-blog-reader-conversation {
    min-width: 0;
    min-height: 0;
    padding: clamp(1.2rem, 3vw, 2.4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.profile-blog-reader-article {
    background: var(--card-bg-color);
}

.profile-blog-reader-meta {
    margin: 0 0 .6rem;
    color: #0f766e !important;
    font-size: .75rem;
    font-weight: 700;
}

#blog-reader-title {
    margin: 0;
    color: var(--text-primary-color);
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    font-weight: 850;
    line-height: 1.12;
}

.profile-blog-reader-content {
    margin-top: 1.4rem;
    color: var(--text-primary-color);
    font-size: 1rem;
    line-height: 1.78;
    white-space: pre-wrap;
}

.profile-blog-reader-reactions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color-soft);
}

.profile-blog-reader-conversation {
    border-left: 1px solid var(--border-color-soft);
    background: rgba(248, 250, 252, .94);
    overflow-x: hidden;
}

.profile-blog-conversation-heading h3 {
    color: var(--text-primary-color);
    font-weight: 800;
}

#blog-reader-comment-count {
    color: var(--text-secondary-color);
    font-size: .72rem;
    font-weight: 700;
}

.profile-blog-reader-comments { margin-top: 1rem; }

#blog-reader-comments,
#blog-reader-comments .comment-display,
#blog-reader-comments .comment-display > div,
#blog-reader-comments [id^="comment-replies-section-"],
#blog-reader-comments [id^="comment-reply-input-container-"] {
    min-width: 0;
    max-width: 100%;
}

#blog-reader-comments .comment-content,
#blog-reader-comments strong {
    overflow-wrap: anywhere;
}

#blog-reader-comments [id^="comment-reply-input-container-"] > .flex {
    flex-wrap: wrap;
    align-items: center;
}

#blog-reader-comments input[id^="comment-reply-input-"] {
    width: auto;
    min-width: 0;
    flex: 1 1 calc(100% - 2rem);
}

#blog-reader-comments [id^="comment-reply-input-container-"] button {
    flex: 0 0 auto;
}

#post-add-photo-btn.profile-media-mode-selected,
#post-add-video-btn.profile-media-mode-selected {
    border-color: #fb923c;
    background: #fff7ed;
    color: #c2410c;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .1);
}

.profile-actions-more {
    position: relative;
    flex: 0 0 auto;
}

.profile-actions-more > summary {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border: 1px solid var(--border-color-soft);
    border-radius: .75rem;
    background: var(--card-bg-color);
    color: var(--text-secondary-color);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    list-style: none;
}

.profile-actions-more > summary::-webkit-details-marker { display: none; }
.profile-actions-more > summary:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }

.profile-actions-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    width: 12rem;
    padding: .4rem;
    border: 1px solid var(--border-color-soft);
    border-radius: .85rem;
    background: var(--card-bg-color);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.profile-actions-menu button {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-radius: .6rem;
    color: var(--text-primary-color);
    font-size: .82rem;
    font-weight: 650;
    text-align: left;
}

.profile-actions-menu button:hover,
.profile-actions-menu button:focus-visible { background: var(--subtle-bg-color); }
.profile-actions-menu button:last-child { color: #b91c1c; }

.inner-circle-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 5.25rem;
    padding: .85rem;
    border: 1px dashed var(--border-color-soft);
    border-radius: .85rem;
    background: var(--subtle-bg-color);
    color: var(--text-secondary-color);
    text-align: left;
}

.inner-circle-empty-state > i { color: var(--theme-accent); font-size: 1.15rem; }
.inner-circle-empty-state strong,
.inner-circle-empty-state span { display: block; }
.inner-circle-empty-state strong { color: var(--text-primary-color); font-size: .82rem; }
.inner-circle-empty-state span { margin-top: .15rem; font-size: .72rem; line-height: 1.35; }

@media (min-width: 768px) {
    .profile-social-column { grid-column: span 8 / span 8; }
    .profile-context-column { grid-column: span 4 / span 4; }
}

@media (max-width: 767px) {
    html,
    body { overflow-x: clip; }

    .container,
    .profile-page-surface,
    #profile-content-grid,
    .profile-context-column,
    .profile-social-column,
    .profile-card,
    #posts-feed,
    #blog-posts-feed {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .profile-cover { height: 11rem !important; border-radius: 0 !important; }

    .profile-identity-card {
        display: grid !important;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-areas:
            "avatar identity"
            "actions actions";
        min-height: 0;
        margin-top: -3.75rem !important;
        padding: .85rem !important;
        border-radius: 1.15rem !important;
        align-items: flex-start !important;
    }

    #profile-pic {
        width: 5.5rem !important;
        height: 5.5rem !important;
        border-radius: 1rem !important;
    }

    .profile-identity-photo { grid-area: avatar; }
    .profile-identity-copy {
        grid-area: identity;
        width: 100%;
        min-width: 0;
        padding-top: .1rem;
        text-align: left !important;
    }
    .profile-identity-kicker { display: none; }
    #full-name {
        max-width: 100%;
        font-size: 1.3rem !important;
        line-height: 1.08;
        overflow-wrap: normal;
        word-break: normal;
    }

    .profile-identity-actions {
        grid-area: actions;
        width: 100%;
        margin: .8rem 0 0 !important;
        padding-top: .75rem;
        border-top: 1px solid rgba(226, 232, 240, .9);
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    body.profile-viewing-public .profile-identity-actions {
        align-items: stretch;
        flex-wrap: nowrap;
    }

    body.profile-viewing-public .profile-identity-actions #copyProfileLinkBtn {
        flex: 0 0 2.5rem;
        min-height: 2.65rem;
    }

    .profile-identity-card #editProfileBtn,
    .profile-identity-card #copyProfileLinkBtn {
        width: 2.5rem !important;
        min-width: 2.5rem;
        padding: .55rem !important;
        font-size: 0 !important;
    }

    .profile-identity-card #editProfileBtn i,
    .profile-identity-card #copyProfileLinkBtn i { font-size: .9rem; }

    #public-profile-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) 2.75rem;
        gap: .4rem;
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto;
        align-items: stretch;
    }
    #public-profile-actions.hidden { display: none !important; }
    #public-profile-actions .profile-action-chip {
        width: 100% !important;
        min-width: 0;
        min-height: 2.65rem;
        padding: .5rem .35rem !important;
        font-size: .72rem !important;
        line-height: 1.05;
    }
    #public-profile-actions[data-primary-actions="1"] > .profile-action-chip:first-child { grid-column: 1 / 3; }
    #public-profile-actions .profile-actions-more { width: 2.75rem; }
    #public-profile-actions .profile-actions-more[open] { z-index: 100; }
    #public-profile-actions .profile-actions-more > summary {
        width: 2.75rem;
        height: 100%;
        min-height: 2.65rem;
        padding: .45rem;
    }
    #public-profile-actions .profile-actions-more > summary span { display: none; }
    #public-profile-actions .profile-actions-menu {
        top: auto;
        right: 0;
        bottom: calc(100% + .45rem);
        width: min(12rem, calc(100vw - 2rem));
    }

    .profile-journey-nav {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .35rem;
        width: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        margin-top: .75rem;
        padding: .4rem;
        border-radius: .9rem;
        overflow: hidden;
    }

    .profile-journey-nav a {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: .58rem .35rem;
        font-size: .72rem;
        white-space: nowrap;
    }

    .profile-page-surface {
        margin-top: .75rem;
        padding-top: .75rem !important;
        border-radius: 1rem 1rem 0 0;
    }

    #profile-content-grid { gap: .75rem; }
    .profile-context-column,
    .profile-social-column { gap: .75rem; }

    /* Mobile tells one continuous profile story: identity and personality,
       close people, current conversation, then the deeper media library. */
    #profile-content-grid { display: flex; flex-direction: column; }
    .profile-context-column,
    .profile-social-column { display: contents; }
    #profile-basics-card { order: 1; }
    #profile-details-card { order: 2; }
    #inner-circle-card { order: 3; }
    #profile-stories { order: 4; }
    #profile-anthem-card { order: 5; }
    #profile-featured-video-card { order: 6; }
    .profile-profile-composer { order: 7; }
    #profile-blog-section { order: 9; }
    #profile-notes { order: 10; }
    .profile-flow-heading { order: 11; }
    #posts-feed { order: 12; }
    #profile-media { order: 13; }

    .profile-comment-delete {
        display: inline-grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        border-radius: 999px;
        color: #64748b;
    }
    .profile-comment-delete:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }

    .profile-composer-footer { align-items: stretch; flex-direction: column; }
    .profile-composer-tools {
        flex-wrap: wrap;
        gap: .4rem;
        padding-bottom: 0;
        overflow-x: visible;
        scrollbar-width: none;
    }
    .profile-composer-tools::-webkit-scrollbar { display: none; }
    .profile-composer-tools .profile-action-chip { min-height: 2.25rem; }
    #direct-text-post-btn { align-self: flex-end; min-width: 6rem; }
    .profile-flow-heading { align-items: flex-end; }

    #inner-circle-card > .flex:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }
    #inner-circle-card > .flex:first-child > .flex {
        width: 100%;
        flex-wrap: wrap;
        gap: .45rem .85rem;
    }
    #top-friends-section { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    body.profile-viewing-public #inner-circle-card > .flex:first-child {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    body.profile-viewing-public #inner-circle-card > .flex:first-child > .flex {
        width: auto;
        flex: 0 0 auto;
    }
    body.profile-viewing-public #inner-circle-card .inner-circle-empty-state { min-height: 4.5rem; }

    .profile-page-surface { padding-bottom: 6rem !important; }
    #profile-basics-card,
    #profile-details-card,
    #inner-circle-card,
    #profile-anthem-card,
    #profile-featured-video-card,
    #profile-stories,
    #profile-blog-section,
    #profile-notes,
    #profile-media { scroll-margin-top: 5.25rem; }

    .profile-blog-library-header { align-items: flex-start; }
    .profile-blog-library-header .profile-action-chip { flex: 0 0 auto; font-size: 0; padding: .55rem; }
    .profile-blog-library-header .profile-action-chip i { margin: 0; font-size: .85rem; }
    .profile-blog-library-tools { align-items: stretch; flex-direction: column; }
    .profile-blog-search { width: 100%; }
    .profile-blog-grid { grid-template-columns: 1fr; }

    .profile-blog-reader-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0 !important;
    }

    .profile-blog-reader-layout {
        display: block;
        height: auto;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .profile-blog-reader-article,
    .profile-blog-reader-conversation { overflow: visible; }
    .profile-blog-reader-conversation { border-top: 1px solid var(--border-color-soft); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .profile-journey-nav a { transition: none; }
}

/* Profile timeline: calm cards with conversations available on demand. */
.profile-timeline-post {
    padding: 1.15rem;
    border: 1px solid var(--border-color-soft);
    border-radius: 1.15rem !important;
    overflow: visible;
    box-shadow: 0 12px 34px rgba(35, 46, 66, .07) !important;
}
.profile-timeline-post:has(.profile-modern-reaction-menu[open]) { z-index: 100; }

.profile-post-head,
.profile-post-author,
.profile-post-meta,
.profile-timeline-actions,
.profile-timeline-action,
.profile-comment-composer,
.profile-comment-composer-actions {
    display: flex;
    align-items: center;
}

.profile-post-head { justify-content: space-between; gap: .75rem; }
.profile-post-author { min-width: 0; align-items: flex-start; }
.profile-post-author > :first-child { flex: 0 0 auto; }
.profile-post-author-name { color: var(--text-color-primary); font-size: .95rem; font-weight: 750; line-height: 1.25; }
.profile-post-meta { gap: .35rem; min-width: 0; flex-wrap: wrap; color: var(--text-color-secondary); font-size: .72rem; line-height: 1.35; }
.profile-post-audience { display: inline-flex; align-items: center; gap: .3rem; }

.profile-post-owner-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .15rem; }

.profile-post-edit,
.profile-post-delete {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: var(--text-color-secondary);
    background: transparent;
    transition: color .16s ease, background-color .16s ease;
}
.profile-post-edit:hover,
.profile-post-edit:focus-visible { color: var(--friendspace-accent-color); background: rgba(var(--button-primary-bg-rgb), .1); }
.profile-post-delete:hover,
.profile-post-delete:focus-visible { color: #dc2626; background: #fef2f2; }

.profile-post-body {
    margin-top: .9rem;
    color: var(--text-color-primary);
    font-size: .98rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.profile-timeline-actions {
    gap: .35rem;
    margin-top: .95rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border-color-soft);
    overflow-x: auto;
    scrollbar-width: none;
}
.profile-timeline-actions::-webkit-scrollbar { display: none; }
.profile-timeline-action {
    gap: .3rem;
    flex: 0 0 auto;
    min-height: 2.15rem;
    padding: .42rem .68rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-color-secondary);
    background: transparent;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.profile-timeline-action:hover,
.profile-timeline-action:focus-visible,
.profile-timeline-action[aria-expanded="true"],
.profile-timeline-action.active {
    color: var(--friendspace-orange, #f97316);
    border-color: rgba(249, 115, 22, .2);
    background: rgba(249, 115, 22, .07);
}
.profile-action-count {
    min-width: 1.15rem;
    padding: .18rem .35rem;
    border-radius: 999px;
    color: inherit;
    background: rgba(100, 116, 139, .1);
    text-align: center;
    font-size: .67rem;
}

.profile-modern-reaction-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .95rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-color-soft);
    overflow: visible;
}
.profile-modern-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-right: auto;
    color: var(--text-color-secondary);
    font-size: .78rem;
}
.profile-modern-reaction-summary span { margin-left: .2rem; }
.profile-modern-reaction-action,
.profile-modern-reaction-menu > summary {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    gap: .35rem;
    padding: .42rem .7rem;
    border: 1px solid var(--border-color-soft);
    border-radius: 999px;
    color: var(--text-color-secondary);
    background: var(--card-bg-color);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}
.profile-modern-reaction-menu > summary::-webkit-details-marker { display: none; }
.profile-modern-reaction-action:hover,
.profile-modern-reaction-action:focus-visible,
.profile-modern-reaction-action[aria-expanded="true"],
.profile-modern-reaction-menu[open] > summary {
    color: var(--friendspace-orange, #f97316);
    border-color: rgba(249, 115, 22, .28);
    background: rgba(249, 115, 22, .08);
}
.profile-modern-reaction-menu { position: relative; }
.profile-modern-reaction-menu[open] { z-index: 90; }
.profile-modern-reaction-picker {
    position: absolute;
    z-index: 80;
    top: auto;
    bottom: calc(100% + .45rem);
    right: 0;
    display: flex;
    width: max-content;
    max-width: min(25rem, calc(100vw - 2rem));
    gap: .35rem;
    padding: .5rem;
    overflow-x: auto;
    border: 1px solid var(--border-color-soft);
    border-radius: .75rem;
    background: var(--card-bg-color);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
.profile-modern-reaction-choice {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border: 1px solid var(--border-color-soft);
    border-radius: 999px;
    color: var(--text-color-secondary);
    background: var(--card-bg-color);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}
.profile-modern-reaction-choice:hover,
.profile-modern-reaction-choice.is-active {
    color: var(--friendspace-orange, #f97316);
    border-color: rgba(249, 115, 22, .3);
    background: rgba(249, 115, 22, .08);
}

.profile-post-conversation {
    margin-top: .8rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border-color-soft);
}
.profile-conversation-empty {
    margin: 0 0 .75rem;
    color: var(--text-color-secondary);
    font-size: .78rem;
    font-style: italic;
}
.profile-comment-composer { align-items: flex-start; gap: .55rem; margin-top: .75rem; }
.profile-comment-composer-actions { justify-content: space-between; gap: .5rem; margin-top: .45rem; }
.profile-inline-reply-composer { display: flex; align-items: flex-start; gap: .5rem; }
.profile-inline-reply-field { flex: 1; min-width: 0; }
.profile-inline-reply-field textarea { width: 100%; min-width: 0; }
.profile-inline-reply-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .4rem; }

.friendspace-linked-post {
    animation: profile-linked-post-pulse 3.2s ease both;
}
@keyframes profile-linked-post-pulse {
    0%, 100% { box-shadow: 0 12px 34px rgba(35, 46, 66, .07); }
    18%, 72% { box-shadow: 0 0 0 4px rgba(249, 115, 22, .18), 0 18px 42px rgba(35, 46, 66, .12); }
}

@media (max-width: 640px) {
    .profile-timeline-post { padding: .95rem; border-radius: 1rem !important; }
    .profile-timeline-actions {
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: .15rem;
        overflow-x: visible;
    }
    .profile-timeline-action { padding-inline: .58rem; }
    .profile-modern-reaction-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .42rem; }
    .profile-modern-reaction-summary { grid-column: 1 / -1; margin-right: 0; }
    .profile-modern-reaction-action,
    .profile-modern-reaction-menu > summary { width: 100%; min-height: 2rem; justify-content: center; padding-inline: .35rem; font-size: .7rem; }
    .profile-modern-reaction-action { min-width: 0; }
    .profile-modern-reaction-menu { position: static; }
    .profile-modern-reaction-picker {
        position: absolute;
        right: 0;
        bottom: calc(100% + .45rem);
        left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
        width: auto;
        max-width: none;
        margin-top: 0;
        overflow: visible;
    }
    .profile-comment-composer { gap: .45rem; }
    .profile-comment-composer > img,.profile-inline-reply-composer > img { width: 2rem !important; height: 2rem !important; margin-right: 0 !important; }
    .profile-comment-composer-actions,.profile-inline-reply-actions { justify-content: flex-end; }
    .profile-comment-composer-actions button,.profile-inline-reply-actions button { min-height: 2.15rem; padding: .4rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .friendspace-linked-post { animation: none; outline: 3px solid rgba(249, 115, 22, .22); }
}