:root {
    --friendspace-orange: #f97316;
    --friendspace-orange-dark: #c2410c;
    --friendspace-ink: #172033;
    --friendspace-muted: #64748b;
    --friendspace-border: #dbe4ee;
    --friendspace-radius: 16px;
    --friendspace-focus: 0 0 0 3px rgba(249, 115, 22, .2);
}

.friendspace-composer { border: 1px solid var(--friendspace-border); border-radius: var(--friendspace-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, .06); }
.friendspace-composer textarea { min-height: 104px; border-color: #cbd5e1; border-radius: 12px; line-height: 1.55; }
.friendspace-composer textarea:focus { border-color: #fb923c; box-shadow: var(--friendspace-focus); }
.friendspace-composer-draft { display: inline-flex; min-height: 30px; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 999px; color: #64748b; background: #f1f5f9; font-size: .72rem; font-weight: 800; }
.friendspace-composer-draft.saved { color: #047857; background: #ecfdf5; }
.friendspace-composer-tools { overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; scroll-snap-type: x proximity; }
.friendspace-composer-tools button { flex: 0 0 auto; min-height: 40px; scroll-snap-align: start; }
.friendspace-primary-action { min-height: 42px; min-width: 92px; box-shadow: 0 8px 18px rgba(249, 115, 22, .22); }
.friendspace-primary-action:focus-visible, .friendspace-feed-tabs button:focus-visible, .friendspace-composer-tools button:focus-visible { outline: none; box-shadow: var(--friendspace-focus); }
.friendspace-feed-tabs { overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; scroll-snap-type: x proximity; }
.friendspace-feed-tabs button { min-height: 40px; flex: 0 0 auto; scroll-snap-align: start; font-weight: 750; }

.friendspace-post-card { overflow: visible; isolation: isolate; border: 1px solid var(--friendspace-border); border-radius: var(--friendspace-radius); box-shadow: 0 8px 24px rgba(15, 23, 42, .045); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.friendspace-post-card:has(.friendspace-reaction-menu[open]) { z-index: 70; }
.friendspace-post-footer { position: relative; z-index: 6; }
.friendspace-post-card:hover { border-color: #cbd5e1; box-shadow: 0 12px 30px rgba(15, 23, 42, .07); }
.friendspace-post-avatar { width: 46px; height: 46px; flex: 0 0 46px; margin-right: .75rem; border: 2px solid #fed7aa; border-radius: 999px; }
.friendspace-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .15rem; color: #64748b; font-size: .74rem; }
.friendspace-post-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.friendspace-post-context { display: flex; flex-wrap: wrap; gap: .35rem; }
.friendspace-post-menu-button { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 999px; color: #64748b; transition: color .15s ease, background-color .15s ease; }
.friendspace-post-menu-button:hover, .friendspace-post-menu-button[aria-expanded="true"] { color: #c2410c; background: #fff7ed; }
.friendspace-post-body .post-content-container { color: #334155; font-size: .98rem; line-height: 1.7; }
.friendspace-post-media { display: grid; place-items: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #0f172a; }
.friendspace-post-media img { background: #f8fafc; }
.friendspace-post-reactions { overflow: visible; }
.friendspace-reaction-row { display: flex; align-items: center; gap: .5rem; overflow-x: auto; padding: .15rem 0 .35rem; scrollbar-width: thin; scroll-snap-type: x proximity; }
.friendspace-reaction-row > * { flex: 0 0 auto; scroll-snap-align: start; }
.friendspace-reaction-summary { display: inline-flex; min-height: 30px; align-items: center; gap: .3rem; padding-right: .35rem; color: #64748b; font-size: .76rem; white-space: nowrap; }
.friendspace-comment-bubble { padding: .65rem .8rem; border: 1px solid #e2e8f0; border-radius: 6px 14px 14px; color: #334155; background: #f8fafc; line-height: 1.55; }
.friendspace-comment-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.friendspace-comment-delete { display: inline-grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 999px; color: #94a3b8; }
.friendspace-comment-delete:hover, .friendspace-comment-delete:focus-visible { color: #be123c; background: #fff1f2; outline: none; }
.friendspace-comment-composer { padding-top: .75rem; border-top: 1px solid #f1f5f9; }
.friendspace-comments-panel { padding-top: .15rem; }
.friendspace-comment-count { min-width: 1.15rem; padding: .15rem .35rem; border-radius: 999px; background: #f1f5f9; color: inherit; text-align: center; }
.friendspace-reaction-row button[aria-expanded="true"] { border-color: #fb923c; color: #c2410c; background: #fff7ed; }
.friendspace-comment-composer-row { gap: .45rem; }
.friendspace-comment-composer .comment-input, .friendspace-comment input { min-height: 40px; outline: none; }
.friendspace-comment-composer .comment-input:focus, .friendspace-comment input:focus { border-color: #fb923c; box-shadow: var(--friendspace-focus); }
.friendspace-post-menu { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 18px 42px rgba(15, 23, 42, .18); }
.friendspace-post-menu a { display: flex; min-height: 42px; align-items: center; gap: .7rem; padding: .65rem .8rem; color: #334155; font-size: .84rem; font-weight: 700; }
.friendspace-post-menu a i { width: 1rem; color: #64748b; text-align: center; }
.friendspace-post-menu a:hover, .friendspace-post-menu a:focus-visible { color: #c2410c; background: #fff7ed; outline: none; }
.friendspace-post-menu-separator { border-top: 1px solid #f1f5f9; }
.friendspace-post-menu a.danger, .friendspace-post-menu a.danger i { color: #be123c; }
.friendspace-post-menu a.danger:hover { background: #fff1f2; }
.friendspace-post-menu button { display: flex; width: 100%; min-height: 42px; align-items: center; gap: .7rem; padding: .65rem .8rem; color: #334155; font-size: .84rem; font-weight: 700; text-align: left; }
.friendspace-post-menu button i { width: 1rem; color: #64748b; text-align: center; }
.friendspace-post-menu button:hover, .friendspace-post-menu button:focus-visible { color: #c2410c; background: #fff7ed; outline: none; }
.friendspace-post-menu-mobile-close { display: none; border-bottom: 1px solid #f1f5f9; }
.friendspace-linked-post { border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .17), 0 16px 34px rgba(15, 23, 42, .1); }

.friendspace-feed-skeleton { overflow: hidden; border: 1px solid var(--friendspace-border); border-radius: var(--friendspace-radius); }
.friendspace-skeleton-row { display: flex; align-items: center; gap: .75rem; }
.friendspace-skeleton-avatar, .friendspace-skeleton-lines i, .friendspace-skeleton-block { display: block; background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 45%, #e2e8f0 65%); background-size: 220% 100%; animation: friendspace-skeleton 1.4s ease-in-out infinite; }
.friendspace-skeleton-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 999px; }
.friendspace-skeleton-lines { display: grid; flex: 1; gap: .45rem; }
.friendspace-skeleton-lines i { height: 10px; border-radius: 999px; }
.friendspace-skeleton-lines i:last-child { width: 38%; }
.friendspace-skeleton-block { height: 112px; margin-top: 1rem; border-radius: 12px; }
.friendspace-skeleton-block.short { height: 72px; }
@keyframes friendspace-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 640px) {
    .friendspace-composer { padding: .9rem !important; border-radius: 14px; }
    .friendspace-composer-draft { font-size: .68rem; }
    .friendspace-composer-tools { width: calc(100% + .5rem); margin-right: -.25rem; margin-left: -.25rem; padding-right: .25rem; padding-left: .25rem; }
    .friendspace-audience-select { flex: 1 1 140px; min-height: 44px; }
    .friendspace-primary-action { flex: 1 1 92px; min-height: 44px; }
    .friendspace-feed-tabs { width: calc(100% + .75rem); margin-right: -.375rem; margin-left: -.375rem; padding-right: .375rem; padding-left: .375rem; }
    .friendspace-post-card { padding: .9rem !important; border-radius: 14px; }
    .friendspace-post-avatar { width: 42px; height: 42px; flex-basis: 42px; margin-right: .6rem; }
    .friendspace-post-body .post-content-container { font-size: .94rem; line-height: 1.65; }
    .friendspace-post-media { margin-right: -.9rem; margin-left: -.9rem; border-right: 0; border-left: 0; border-radius: 0; }
    .friendspace-reaction-row { width: calc(100% + .4rem); margin-right: -.2rem; margin-left: -.2rem; padding-right: .2rem; padding-left: .2rem; }
    .friendspace-comment-primary { position: sticky; left: 0; z-index: 2; background: #fff; }
    .friendspace-comment-primary { box-shadow: 8px 0 12px rgba(255, 255, 255, .95); }
    .friendspace-comment-composer-row { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; }
    .friendspace-comment-composer-row .newsfeed-comment-gif-btn { grid-column: 2; margin-left: 0 !important; justify-self: start; }
    .friendspace-comment-composer-row .newsfeed-comment-send-btn { grid-column: 3; margin-left: 0 !important; }
    .friendspace-comment .friendspace-comment-bubble { font-size: .84rem; }
    .friendspace-post-menu { position: fixed !important; right: .75rem !important; left: .75rem !important; top: auto !important; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 1000; width: auto !important; max-height: min(72dvh, 28rem); overflow-y: auto; }
    .friendspace-post-menu-mobile-close { display: block; }
    .friendspace-comment-delete { width: 36px; height: 36px; flex-basis: 36px; color: #64748b; }
}

/* Friendspace identity system: personal corner, social compass, and connected contexts. */
.friendspace-your-corner {
    overflow: hidden;
    border: 1px solid #fed7aa;
    border-radius: 16px !important;
    background: linear-gradient(155deg, #fff7ed 0, #fff 34%, #f8fafc 100%);
    box-shadow: 0 14px 32px rgba(124, 45, 18, .08);
}
.friendspace-corner-title { margin: -1rem -1rem .85rem; padding: .75rem 1rem .65rem; border-bottom: 1px solid #ffedd5; background: rgba(255, 247, 237, .88); }
.friendspace-corner-title p,
.friendspace-compass-identity p,
.friendspace-around-header p,
.friendspace-conversations-heading p {
    color: #ea580c;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .12em;
    line-height: 1.2;
}
.friendspace-corner-title h2 { margin-top: .15rem; color: #172033; font-size: 1.06rem; font-weight: 800; }
.friendspace-corner-profile-link { display: flex; align-items: center; justify-content: space-between; margin: -.2rem 0 .7rem; padding: .4rem .15rem .65rem; border-bottom: 1px solid #e2e8f0; color: #c2410c; font-size: .76rem; font-weight: 750; }
.friendspace-corner-profile-link:hover { color: #9a3412; }
.friendspace-corner-nav { display: grid; gap: .05rem; }
.friendspace-corner-group-label { margin: .6rem .55rem .18rem; color: #94a3b8; font-size: .59rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.friendspace-your-corner .feed-mini-link { min-height: 36px; padding: .42rem .55rem; font-size: .83rem; font-weight: 650; }

.friendspace-social-compass {
    position: sticky;
    top: 4.45rem;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    padding: .72rem .85rem;
    border: 1px solid rgba(219, 228, 238, .94);
    border-radius: 16px;
    background: rgba(248, 250, 252, .94);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
}
.friendspace-compass-identity { min-width: 0; }
.friendspace-compass-identity h2 { display: flex; align-items: center; gap: .4rem; margin-top: .12rem; color: #172033; font-size: 1rem; font-weight: 800; }
.friendspace-compass-identity h2 i { color: #f97316; }
.friendspace-social-compass .friendspace-feed-tabs {
    position: static;
    top: auto;
    z-index: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    scrollbar-width: none;
}
.friendspace-social-compass .friendspace-feed-tabs::-webkit-scrollbar { display: none; }
.friendspace-social-compass .friendspace-feed-tabs button { min-height: 36px; gap: .28rem; padding: .38rem .52rem; font-size: .72rem; }
.friendspace-social-compass .friendspace-lane-count { min-width: 1.12rem; padding: .12rem .28rem; font-size: .61rem; }

.feed-sidebar { max-height: calc(100vh - 5.65rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.feed-sidebar::-webkit-scrollbar { display: none; }

.friendspace-around-panel {
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.friendspace-around-header { padding: .9rem 1rem .75rem; border-bottom: 1px solid #ffedd5; background: linear-gradient(120deg, #fff7ed, #fff); }
.friendspace-around-header h2 { display: flex; align-items: center; gap: .5rem; margin-top: .18rem; color: #172033; font-size: 1.04rem; font-weight: 820; }
.friendspace-around-header h2 i { color: #f97316; }
.friendspace-around-section { padding: 1rem; border-top: 1px solid #eef2f7; }
.friendspace-around-header + .friendspace-around-section { border-top: 0; }
.friendspace-around-section .feed-module-title { font-size: .91rem; }

.friendspace-conversations-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .15rem .35rem .65rem; }
.friendspace-conversations-heading h2 { margin-top: .12rem; color: #172033; font-size: 1.03rem; font-weight: 800; }
.friendspace-conversations-heading > span { max-width: 250px; color: #64748b; font-size: .7rem; line-height: 1.35; text-align: right; }

.friendspace-post-card { --friendspace-context: #f97316; position: relative; border-color: #e2e8f0; }
.friendspace-post-card::before { content: ''; position: absolute; top: 0; right: 14px; left: 14px; height: 3px; border-radius: 0 0 999px 999px; background: var(--friendspace-context); opacity: .72; transition: height .18s ease, opacity .18s ease; pointer-events: none; }
.friendspace-post-card:hover::before { height: 4px; opacity: 1; }
.friendspace-context-person { --friendspace-context: #f97316; }
.friendspace-context-community { --friendspace-context: #059669; }
.friendspace-context-music { --friendspace-context: #7c3aed; }
.friendspace-context-inner { --friendspace-context: #d97706; }
.friendspace-context-moment { --friendspace-context: #0284c7; }
.friendspace-context-marker { display: inline-flex; align-items: center; gap: .32rem; margin-top: .25rem; padding: .22rem .48rem; border: 1px solid rgba(249, 115, 22, .16); border-radius: 999px; color: #c2410c; background: #fff7ed; font-size: .62rem; font-weight: 800; letter-spacing: .01em; }
.friendspace-context-community .friendspace-context-marker { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.friendspace-context-music .friendspace-context-marker { border-color: #ddd6fe; color: #6d28d9; background: #f5f3ff; }
.friendspace-context-inner .friendspace-context-marker { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.friendspace-context-moment .friendspace-context-marker { border-color: #bae6fd; color: #0369a1; background: #f0f9ff; }

@media (max-width: 640px) {
    .friendspace-social-compass { top: 3.95rem; display: block; margin-right: -.25rem; margin-left: -.25rem; padding: .42rem; border-radius: 14px; }
    .friendspace-compass-identity { display: block; padding: .1rem .35rem .45rem; }
    .friendspace-compass-identity p { font-size: .55rem; }
    .friendspace-compass-identity h2 { margin-top: .08rem; font-size: .88rem; }
    .friendspace-social-compass .friendspace-feed-tabs { width: 100%; margin: 0; }
    .friendspace-conversations-heading { align-items: center; margin: .1rem .2rem .55rem; }
    .friendspace-conversations-heading h2 { font-size: .94rem; }
    .friendspace-conversations-heading > span { display: none; }
    .friendspace-post-card::before { right: 10px; left: 10px; }
    .friendspace-context-marker { font-size: .59rem; }
}

@media (prefers-reduced-motion: reduce) {
    .friendspace-skeleton-avatar, .friendspace-skeleton-lines i, .friendspace-skeleton-block { animation: none; }
}

/* Newsfeed efficiency pass: keep Friendspace tools rich without delaying the feed. */
.friendspace-story-deck {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 76px;
    padding: .35rem .25rem;
    border-bottom: 1px solid #e2e8f0;
}
.friendspace-section-heading { min-width: 0; }
.friendspace-section-heading span { display: block; margin-top: .12rem; color: #64748b; font-size: .69rem; line-height: 1.25; }
.friendspace-story-deck .story-bubble { width: 62px; min-width: 62px; height: 62px; }

.friendspace-feed-tabs {
    position: sticky;
    top: 4.45rem;
    z-index: 24;
    padding: .4rem;
    border: 1px solid rgba(219, 228, 238, .9);
    border-radius: 999px;
    background: rgba(240, 242, 245, .92);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    backdrop-filter: blur(12px);
}
.friendspace-feed-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; }
.friendspace-lane-count {
    min-width: 1.25rem;
    padding: .14rem .34rem;
    border-radius: 999px;
    color: inherit;
    background: rgba(100, 116, 139, .12);
    font-size: .65rem;
    font-weight: 800;
    line-height: 1.2;
}
.friendspace-feed-tabs button[aria-selected="true"] .friendspace-lane-count { background: rgba(255, 255, 255, .24); }

.friendspace-composer { transition: box-shadow .18s ease, border-color .18s ease; }
.friendspace-composer:not(.is-expanded) textarea { min-height: 68px; }
.friendspace-composer.is-expanded { border-color: #fdba74; box-shadow: 0 14px 34px rgba(249, 115, 22, .11); }
.friendspace-composer.is-expanded textarea { min-height: 96px; }
.friendspace-composer:not(.is-expanded) .friendspace-composer-tools button { min-height: 34px; padding-top: .35rem; padding-bottom: .35rem; }
.friendspace-composer:not(.is-expanded) .friendspace-composer-details { gap: .35rem; }
.friendspace-composer-header h2 { line-height: 1.2; }

.friendspace-circle-checkin {
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    min-height: 82px;
    padding: .55rem .65rem;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: linear-gradient(105deg, #fff7ed 0, #fff 38%, #f8fafc 100%);
}
.friendspace-circle-checkin .horizontal-scroll { align-items: center; padding: .1rem .25rem .25rem; }
.friendspace-circle-checkin-heading button { display: inline-flex; margin-top: .25rem; font-size: .73rem; }
.friendspace-checkin-person { color: #334155; text-decoration: none; }
.friendspace-checkin-person img { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.friendspace-checkin-person:hover img,
.friendspace-checkin-person:focus-visible img { border-color: #f97316; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(249, 115, 22, .14); }
.friendspace-checkin-person:focus-visible { outline: none; color: #c2410c; }

@media (max-width: 640px) {
    .friendspace-story-deck { grid-template-columns: 125px minmax(0, 1fr); gap: .35rem; min-height: 70px; }
    .friendspace-section-heading h2 { font-size: .95rem; }
    .friendspace-section-heading span { font-size: .62rem; }
    .friendspace-story-deck .story-bubble { width: 56px; min-width: 56px; height: 56px; }
    .friendspace-feed-tabs { top: 3.95rem; margin-right: -.25rem; margin-left: -.25rem; border-radius: 14px; }
    .friendspace-feed-tabs button { min-height: 38px; }
    .friendspace-feed-tabs button i { display: none; }
    .friendspace-lane-count { min-width: 1.1rem; padding-inline: .28rem; }
    .friendspace-circle-checkin { display: grid; grid-template-columns: 155px minmax(0, 1fr); align-items: center; gap: .35rem; min-height: 92px; padding: .65rem; }
    .friendspace-circle-checkin-heading { display: block; margin-bottom: 0; }
    .friendspace-circle-checkin-heading button { flex: 0 0 auto; margin-top: .25rem; }
    .friendspace-circle-checkin-heading h2 { font-size: 1rem; }
    .friendspace-composer-header p { display: none; }
    .friendspace-feed-tabs,
    .friendspace-composer-tools,
    .friendspace-reaction-row,
    .friendspace-story-deck .horizontal-scroll,
    .friendspace-circle-checkin .horizontal-scroll { scrollbar-width: none; }
    .friendspace-feed-tabs::-webkit-scrollbar,
    .friendspace-composer-tools::-webkit-scrollbar,
    .friendspace-reaction-row::-webkit-scrollbar,
    .friendspace-story-deck .horizontal-scroll::-webkit-scrollbar,
    .friendspace-circle-checkin .horizontal-scroll::-webkit-scrollbar { display: none; }
}