/* ═══ Community, feed first (community-v2.js) ═══════════════════════
   The posts come first. Everything in front of them is one post box and
   one slim bar; the rest steps aside or waits for strong numbers. */

/* pieces that now live somewhere better */
#communityPage.cv2 #cmpNudge,
#communityPage.cv2 #cpxPrompt,
#communityPage.cv2 #commTrendChips,
#communityPage.cv2 .cact-block { display: none !important; }

/* ── one post box ── */
#communityPage.cv2 #commComposer { padding: 16px 16px 12px; border-radius: 20px; gap: 0; }
#communityPage.cv2 #commComposer .feed-composer-input { height: 48px; border-radius: 999px; font-size: 0.98rem; }
#communityPage.cv2 #commComposer.cv2-fresh { box-shadow: 0 0 0 1px rgba(255,90,110,0.45) inset, 0 12px 30px -12px rgba(200,16,46,0.45); }
#communityPage.cv2 #commComposer.cv2-fresh .feed-composer-input { color: #fff; border-color: rgba(255,90,110,0.45); }
#communityPage.cv2 #commQuick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
#communityPage.cv2 #commQuick .comm-quick-chip { height: 36px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 0.84rem; }
#communityPage.cv2 #commQuick .cv2-prompt { order: 9; margin-left: auto; gap: 8px; color: #ffd36b; background: rgba(244,176,0,0.1); border: 1px solid rgba(244,176,0,0.3); }
#communityPage.cv2 #commQuick .cv2-prompt b { color: #ffe39a; font-weight: 700; }
#communityPage.cv2 #commQuick .cv2-prompt:hover { background: rgba(244,176,0,0.18); }

/* ── one slim bar ── */
#communityPage.cv2 .ctd-bar.cv2-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 20px 0 16px; height: 44px; }
#communityPage.cv2 .cv2-bar #cpxTabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; flex-wrap: nowrap !important; overflow: visible !important; -webkit-mask-image: none; mask-image: none; margin: 0; padding: 0; }
#communityPage.cv2 .cv2-bar #cpxTabs .cpx-tab { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 0.9rem; font-weight: 650; color: rgba(255,255,255,0.7); white-space: nowrap; }
#communityPage.cv2 .cv2-bar #cpxTabs .cpx-tab:hover { color: #fff; background: rgba(255,255,255,0.06); }
#communityPage.cv2 .cv2-bar #cpxTabs .cpx-tab.active { color: #fff; background: rgba(200,16,46,0.22); border-color: rgba(255,90,110,0.55); }
#communityPage.cv2 .cv2-bar #cpxTabs .cv2-tab-extra,
#communityPage.cv2 .cv2-bar #cpxTabs .cpx-tab-sep { display: none !important; }
#communityPage.cv2 .cv2-more { position: relative; flex: none; }
#communityPage.cv2 .cv2-more-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.7); font: inherit; font-size: 0.9rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
#communityPage.cv2 .cv2-more-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
#communityPage.cv2 .cv2-more-btn.active { color: #fff; background: rgba(200,16,46,0.22); border-color: rgba(255,90,110,0.55); }
#communityPage.cv2 .cv2-bar #cpxTabs { order: 1; }
#communityPage.cv2 .cv2-bar .comm-feed-controls { order: 2; }
#communityPage.cv2 .cv2-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 190px; padding: 6px; border-radius: 16px; background: #1e1418; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
#communityPage.cv2 .cv2-menu-item { display: flex; width: 100%; align-items: center; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: rgba(255,255,255,0.85); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
#communityPage.cv2 .cv2-menu-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
#communityPage.cv2 .cv2-menu-item.is-on { color: #fff; background: rgba(200,16,46,0.22); }

#communityPage.cv2 .cv2-bar .comm-feed-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; }
#communityPage.cv2 .cv2-bar .comm-search-wrap { position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 999px; overflow: hidden; display: flex; align-items: center; transition: width .25s ease; }
#communityPage.cv2 .cv2-bar .comm-search-wrap > i { display: none; }
#communityPage.cv2 .cv2-bar .comm-search-input { width: 0; min-width: 0; padding: 0; opacity: 0; border: 0; background: transparent; }
#communityPage.cv2 .cv2-search-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.8); cursor: pointer; }
#communityPage.cv2 .cv2-search-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
#communityPage.cv2 .cv2-bar .comm-sort-toggle { height: 40px; border-radius: 999px; white-space: nowrap; }
/* searching: the search takes the whole row */
#communityPage.cv2 .cv2-bar.cv2-searching #cpxTabs { display: none; }
#communityPage.cv2 .cv2-bar.cv2-searching .comm-feed-controls { flex: 1 1 auto; }
#communityPage.cv2 .cv2-bar.cv2-searching .comm-search-wrap { flex: 1 1 auto; width: auto; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
#communityPage.cv2 .cv2-bar.cv2-searching .comm-search-input { flex: 1; width: auto; opacity: 1; padding: 0 14px 0 0; color: #fff; outline: none; }
#communityPage.cv2 .cv2-bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── posts ── */
#communityPage.cv2 #commPosts > .fpost { border-radius: 20px; }
#communityPage.cv2 #commPosts > .cmp-strip { margin: 4px 0; }

/* ── side columns: calmer ── */
#communityPage.cv2 .comm-sb-heading,
#communityPage.cv2 .cmp-strip header b { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.92rem !important; font-weight: 700 !important; color: #fff !important; }
#communityPage.cv2 .comm-sb-heading i, #communityPage.cv2 .comm-sb-heading svg { color: #ff5c78; }
#communityPage.cv2 .comm-sb-card.cv2-quiet { display: none !important; }
#communityPage.cv2 .comm-trend-count.cv2-quiet { display: none !important; }
#communityPage.cv2 .cpx-mycircle.cpx-mc-more { display: none; }
#communityPage.cv2 .is-open > .cpx-mycircle.cpx-mc-more { display: flex; }
#communityPage.cv2 .cpx-mc-toggle { margin: 6px 0 0; padding: 6px 0; border: 0; background: none; color: rgba(255,255,255,0.6); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
#communityPage.cv2 .cpx-mc-toggle:hover { color: #fff; }

/* one button shape everywhere: the pill, like Publish Event */
#communityPage.cv2 .cmp-btn,
#communityPage.cv2 .cpx-btn-sm,
#communityPage.cv2 .cmn-all,
#communityPage.cv2 .ppl-net-invite,
#communityPage.cv2 .cme-view,
#communityPage.cv2 .comm-sort-toggle { border-radius: 999px !important; }

/* ── phone: post box, tabs, posts ── */
@media (max-width: 640px) {
  #communityPage.cv2 .ctd-bar.cv2-bar { margin: 14px 0 12px; }
  #communityPage.cv2 .cv2-bar #cpxTabs { overflow-x: auto !important; scrollbar-width: none; }
  #communityPage.cv2 .cv2-bar #cpxTabs::-webkit-scrollbar { display: none; }
  #communityPage.cv2 .cv2-bar #cpxTabs .cpx-tab { padding: 0 12px; font-size: 0.84rem; }
  #communityPage.cv2 .cv2-bar .comm-sort-toggle #commSortLabel { display: none; }
  #communityPage.cv2 #commQuick .cv2-prompt { order: -1; margin-left: 0; width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  /* phones: the tab row scrolls sideways, so every tab sits in it and there is no More menu */
  #communityPage.cv2 .cv2-bar #cpxTabs .cv2-tab-extra { display: inline-flex !important; }
  #communityPage.cv2 .cv2-more { display: none; }
}
#communityPage.cv2 .fpost-pinned-badge { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.82rem !important; font-weight: 700; }
@media (max-width: 640px) {
  #communityPage.cv2 #commQuick { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #communityPage.cv2 #commQuick .comm-quick-chip { width: auto; min-width: 0; padding: 0 8px; justify-content: center; white-space: nowrap; }
  #communityPage.cv2 #commQuick .cv2-prompt { grid-column: 1 / -1; order: -1; width: 100%; margin: 0 0 2px; white-space: nowrap; overflow: hidden; }
  #communityPage.cv2 #commQuick .cv2-prompt span { overflow: hidden; text-overflow: ellipsis; }
}

/* ── post box, roomier and calmer ──
   space between the photo and the bar, a bigger face, a quiet outline that turns red
   only on hover or focus, a soft hint, and the photo button inside the bar as a chip */
#communityPage.cv2 #commComposer { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#communityPage.cv2 #commComposer .feed-composer-av { flex: none; width: 42px !important; height: 42px !important; margin: 0 !important; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }
#communityPage.cv2 #commComposer .feed-composer-av img { width: 100%; height: 100%; object-fit: cover; }
#communityPage.cv2 #commComposer .feed-composer-input,
#communityPage.cv2 #commComposer.cv2-fresh .feed-composer-input { flex: 1 1 0; min-width: 0; height: 52px; margin: 0; padding: 0 124px 0 22px; text-align: left;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.58); font-size: 0.98rem; font-weight: 400; transition: border-color .2s, background .2s; }
#communityPage.cv2 #commComposer .feed-composer-input:hover,
#communityPage.cv2 #commComposer .feed-composer-input:focus-visible { border-color: rgba(255,90,110,0.6); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); outline: none; }
#communityPage.cv2 #commComposer.cv2-fresh { box-shadow: none; }
#communityPage.cv2 #commComposer .feed-composer-photo { position: absolute; z-index: 1; top: 23px; right: 24px; display: inline-flex; align-items: center; gap: 7px; height: 38px; width: auto; margin: 0; padding: 0 14px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); font: inherit; font-size: 0.86rem; font-weight: 650; cursor: pointer; transition: background .2s; }
#communityPage.cv2 #commComposer .feed-composer-photo::after { content: 'Photo'; }
#communityPage.cv2 #commComposer .feed-composer-photo svg { width: 17px; height: 17px; color: #ff6b84; }
#communityPage.cv2 #commComposer .feed-composer-photo:hover { background: rgba(255,255,255,0.14); color: #fff; }
/* the Photo chip now lives in the bar, so the row below keeps the other actions */
#communityPage.cv2 #commQuick > .comm-quick-chip[onclick="openCreatePost()"] { display: none; }
#communityPage.cv2 #commQuick { flex: 1 1 100%; }
@media (max-width: 560px) {
  #communityPage.cv2 #commComposer { gap: 10px; }
  #communityPage.cv2 #commComposer .feed-composer-av { width: 38px !important; height: 38px !important; }
  #communityPage.cv2 #commComposer .feed-composer-input, #communityPage.cv2 #commComposer.cv2-fresh .feed-composer-input { height: 48px; padding: 0 56px 0 16px; font-size: 0.92rem; }
  #communityPage.cv2 #commComposer .feed-composer-photo { top: 21px; right: 22px; width: 38px; padding: 0; justify-content: center; }
  #communityPage.cv2 #commComposer .feed-composer-photo::after { content: none; }
}
[data-theme="light"] #communityPage.cv2 #commComposer .feed-composer-input { border-color: rgba(0,0,0,0.14); background: #fff; color: #6b5a5e; }
[data-theme="light"] #communityPage.cv2 #commComposer .feed-composer-photo { background: rgba(0,0,0,0.06); color: #18090C; }

/* ── your own comments: readable in the dark theme, quiet edit and delete icons,
   editing in place inside the bubble ── */
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-cname { color: #fff; }
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-text { color: rgba(255,255,255,0.86); }
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-ctime,
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-like-btn,
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-reply-btn,
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-edited { color: rgba(255,255,255,0.5); }
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-bubble { background: rgba(255,255,255,0.05); }
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-reply-input,
html:not([data-theme="light"]) .fpost-comments-panel .fcomm-edit-input { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.fcomm-row-top { gap: 8px; }
.fcomm-own { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0.55; transition: opacity .15s; }
.fcomm-row:hover > .fcomm-right-col > .fcomm-bubble .fcomm-own, .fcomm-own:focus-within { opacity: 1; }
@media (hover: none) { .fcomm-own { opacity: 0.8; } }
.fcomm-own .fcomm-edit-btn, .fcomm-own .fcomm-del-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0 !important; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255,255,255,0.7) !important; cursor: pointer; opacity: 1; text-decoration: none !important; transition: background .15s, color .15s; }
.fcomm-own .fcomm-edit-btn:hover { background: rgba(255,255,255,0.1); color: #fff !important; }
.fcomm-own .fcomm-del-btn:hover { background: rgba(255,58,92,0.14); color: #ff5c78 !important; }
.fcomm-row.is-editing .fcomm-own { display: none; }
.fcomm-row.is-editing .fcomm-actions-row { display: none; }
.fcomm-edit-row { margin-top: 6px; }
.fcomm-edit-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); font: inherit; font-size: 0.9rem; line-height: 1.45; resize: none; }
.fcomm-edit-input:focus { outline: none; border-color: rgba(255,90,110,0.6) !important; }
.fcomm-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fcomm-edit-actions .fcomm-edit-save, .fcomm-edit-actions .fcomm-edit-cancel { height: 32px !important; min-height: 32px !important; min-width: 0 !important; padding: 0 16px !important; border-radius: 999px !important; font-size: 0.82rem !important; font-weight: 700; cursor: pointer; }
.fcomm-edit-actions .fcomm-edit-save { background: #c8102e; color: #fff; border: 0; }
.fcomm-edit-actions .fcomm-edit-cancel { background: transparent; color: rgba(255,255,255,0.7) !important; border: 1px solid rgba(255,255,255,0.18) !important; }
.fcomm-edit-actions::after { content: 'Enter to save, Esc to cancel'; margin-left: auto; font-size: 0.72rem; color: rgba(255,255,255,0.4); }
@media (hover: none) { .fcomm-edit-actions::after { content: none; } }
[data-theme="light"] .fcomm-own .fcomm-edit-btn, [data-theme="light"] .fcomm-own .fcomm-del-btn { color: #6b5a5e !important; }
[data-theme="light"] .fcomm-edit-actions .fcomm-edit-cancel { color: #6b5a5e !important; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .fcomm-edit-actions::after { color: #8a7a7e; }

/* ── side columns: they stay in view while the feed scrolls, but a column taller than
   the screen scrolls on its own, so the cards at the bottom (Active this week) are reachable ── */
#communityPage .comm-sidebar-left:not([style*="display: none"]),
#communityPage .comm-sidebar-right { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; padding-bottom: 16px; box-sizing: border-box; }
#communityPage .comm-sidebar-left::-webkit-scrollbar, #communityPage .comm-sidebar-right::-webkit-scrollbar { width: 6px; }
#communityPage .comm-sidebar-left::-webkit-scrollbar-thumb, #communityPage .comm-sidebar-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 6px; }
#communityPage .comm-sidebar-right > *, #communityPage .comm-sidebar-left > * { flex-shrink: 0; }
#communityPage .comm-sidebar-right { padding-bottom: 72px; }  /* room so the last card clears the first steps ring */