/**
 * Community Feed Page Styles
 *
 * @package WPFolks
 * @since 1.0.0
 */

/* --- Feed Layout --- */
.feed-page {
  padding: 32px 0 64px;
}
.feed-layout {
  display: grid;
  /* 1.22.970 — Sidebar widened from 300px to 360px and feed column
     tightened so the right rail can host richer widgets (upcoming
     sessions, etc.) without crowding. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  margin: 0 auto;
}
.feed-main {
  /* 1.22.970 — Was 820px. Tightened to 680px so the right sidebar
     has room to host the Upcoming Sessions widget and future cards.
     Still inside the comfortable-reading band for short-form posts. */
  max-width: 680px;
  width: 100%;
}

/* --- Guest gate (shown on /community/ when logged out) --- */
.feed-guest-gate {
  text-align: center;
  padding: 40px 28px;
  margin: 0 0 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.feed-guest-gate__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-off-white, #f6f7f7);
  color: var(--color-primary, #2145e6);
}
.feed-guest-gate__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-text, #1d2327);
}
.feed-guest-gate__copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary, #50575e);
  margin: 0 0 20px;
}
.feed-guest-gate__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.feed-guest-gate__hint {
  font-size: 13px;
  color: var(--color-text-secondary, #50575e);
  margin: 0;
}
.feed-guest-gate__hint a {
  color: var(--color-primary, #2145e6);
  text-decoration: underline;
  font-weight: 500;
}

/* --- Compose Box --- */
.compose-box {
  padding: 24px;
  margin-bottom: 24px;
  position: relative; /* anchor for @mention + # autocomplete dropdowns */
}
.compose-header {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}
.compose-textarea {
  width: 100%;
  min-height: 180px;
  padding: 14px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-off-white);
  color: var(--color-text);
  resize: vertical;
  transition: border-color 0.2s, background 0.2s;
}
.compose-textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,115,170,0.1);
}

/* 1.22.146 — Quill WYSIWYG editor styling for compose + reply.
 * Wraps the Quill editor (`.compose-editor`, `.feed-reply-editor`) so
 * it matches the original textarea visual envelope while letting the
 * Quill toolbar (.ql-toolbar) sit above the content area cleanly. */
.compose-editor-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wpfolks-quill-editor {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  min-height: 140px;
  transition: border-color 0.2s, background 0.2s;
}
.wpfolks-quill-editor.ql-container {
  font-family: var(--font-body);
  font-size: 15px;
}
/* The toolbar — Quill's "snow" theme. Make borders match the editor
 * so the whole compose looks like one unified widget. */
.ql-toolbar.ql-snow {
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-white);
  padding: 6px 8px;
}

/* 1.22.146 — explicit visibility for Quill's SVG-icon buttons.
 * Without these, if the parent's `color` cascades to white or a CSS
 * var fails to resolve, the icons render invisible (white-on-white).
 * Quill paths use `.ql-stroke` (most icons) and `.ql-fill` (filled
 * shapes); the picker label has its own arrow. */
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
  color: var(--text-primary);
}
.ql-toolbar.ql-snow .ql-stroke {
  stroke: #1e1e1e;
}
.ql-toolbar.ql-snow .ql-fill,
.ql-toolbar.ql-snow .ql-stroke.ql-fill {
  fill: #1e1e1e;
}
.ql-toolbar.ql-snow .ql-picker {
  color: var(--text-primary);
}
.ql-toolbar.ql-snow .ql-picker-label::before {
  color: var(--text-primary);
}
/* Active state — clicked button or selection has the format applied. */
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  color: #2145e6;
}
.ql-toolbar.ql-snow button.ql-active .ql-stroke,
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke {
  stroke: #2145e6;
}
.ql-toolbar.ql-snow button.ql-active .ql-fill,
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill {
  fill: #2145e6;
}

/* 1.22.149 — Quill 1.3.7's default snow CSS ships ::before content
 * rules for H1 and H2 only. Our toolbar uses H2 + H3, so the H3
 * button renders as an empty (invisible) button without this rule.
 * Same font sizing as the default H2 label so they read as a pair. */
.ql-toolbar.ql-snow button.ql-header[value="3"]::before {
  content: 'H3';
  font-weight: 700;
}

/* When the toolbar is followed by our Quill editor, give the editor
 * a flat top so they merge visually. */
.ql-toolbar.ql-snow + .wpfolks-quill-editor {
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.wpfolks-quill-editor .ql-editor {
  min-height: 120px;
  padding: 14px;
  line-height: 1.55;
}
.wpfolks-quill-editor .ql-editor.ql-blank::before {
  color: var(--color-text-secondary, #50575e);
  font-style: normal;
  left: 14px;
  right: 14px;
}

/* Reply composer Quill — tighter padding, smaller min-height for
 * inline use under each post. */
.feed-reply-compose--quill {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-reply-compose--quill .feed-reply-editor {
  min-height: 80px;
}
.feed-reply-compose--quill .feed-reply-editor .ql-editor {
  min-height: 60px;
  padding: 8px 10px;
  font-size: 14px;
}
.feed-reply-compose--quill .feed-reply-submit {
  align-self: flex-end;
}

/* Quill mention dropdown — match the WPFolks dropdown styling.
 * `quill-mention` uses `.ql-mention-list-container`. */
.ql-mention-list-container {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  z-index: 9999;
  max-height: 280px;
  overflow-y: auto;
}
.ql-mention-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.ql-mention-list-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ql-mention-list-item.selected,
.ql-mention-list-item:hover {
  background: rgba(33, 69, 230, 0.08);
}
.wpfolks-mention-name {
  font-weight: 600;
  color: var(--color-text, #1e1e1e);
}
.wpfolks-mention-slug {
  color: var(--color-text-secondary, #50575e);
  font-size: 13px;
}
.wpfolks-mention-type {
  font-size: 11px;
  text-transform: uppercase;
  background: rgba(33, 69, 230, 0.1);
  color: var(--color-primary, #2145e6);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
}
/* Mention blot style inside the editor. */
.ql-editor .mention {
  background: rgba(33, 69, 230, 0.08);
  color: var(--color-primary, #2145e6);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 500;
}

/* Rendered HTML output styling — feed posts and replies that come
 * out of the Quill pipeline include real HTML markup, so spacing
 * needs to be tightened for feed context. */
.feed-post-content h1,
.feed-post-content h2,
.feed-post-content h3,
.feed-reply-body h1,
.feed-reply-body h2,
.feed-reply-body h3 {
  font-family: inherit;
  font-weight: 700;
  margin: 8px 0 4px;
  line-height: 1.25;
}
.feed-post-content h1, .feed-reply-body h1 { font-size: 19px; }
.feed-post-content h2, .feed-reply-body h2 { font-size: 17px; }
.feed-post-content h3, .feed-reply-body h3 { font-size: 15px; }
.feed-post-content p,
.feed-reply-body p {
  margin: 0 0 12px;
  line-height: 1.6;
}
.feed-post-content p:first-child,
.feed-reply-body p:first-child {
  margin-top: 0;
}
.feed-post-content p:last-child,
.feed-reply-body p:last-child {
  margin-bottom: 0;
}
/* Empty paragraphs that slip past server-side cleanup (cached older
 * posts, etc.) shouldn't add visible gap. */
.feed-post-content p:empty,
.feed-reply-body p:empty {
  display: none;
}
/* The bottom margin on the last block-level child shouldn't add gap. */
.feed-post-content > *:last-child,
.feed-reply-body > *:last-child {
  margin-bottom: 0;
}
/* 1.22.146 — explicit list markers. The theme's main.css:166 has a
 * global `ul, ol { list-style: none; }` reset that strips bullets
 * and numbers everywhere. Restore them inside feed content with
 * !important to win over the global rule. */
.feed-post-content ul,
.feed-reply-body ul {
  list-style: disc outside !important;
  margin: 10px 0 14px !important;
  padding-left: 28px !important;
}
.feed-post-content ol,
.feed-reply-body ol {
  list-style: decimal outside !important;
  margin: 10px 0 14px !important;
  padding-left: 28px !important;
}
.feed-post-content li,
.feed-reply-body li {
  margin: 4px 0 !important;
  padding-left: 4px !important;
  line-height: 1.55 !important;
  display: list-item !important;
}
/* Nested lists indent without doubling the outer margin. */
.feed-post-content li > ul,
.feed-post-content li > ol,
.feed-reply-body li > ul,
.feed-reply-body li > ol {
  margin: 4px 0 !important;
}
.feed-post-content blockquote,
.feed-reply-body blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--color-border, #dcdcde);
  color: var(--color-text-secondary, #50575e);
  background: var(--color-off-white, #f6f7f7);
  border-radius: 0 4px 4px 0;
}
.feed-post-content code,
.feed-reply-body code {
  background: var(--color-off-white, #f6f7f7);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.feed-post-content pre,
.feed-reply-body pre,
.feed-post-content .ql-syntax,
.feed-reply-body .ql-syntax {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--color-off-white, #f6f7f7);
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  white-space: pre;
}
.feed-post-content pre code,
.feed-reply-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}
.compose-hashtags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  /* 1.22.149 — let hashtags consume the remaining row width but never
   * push the action pair off-edge. min-width:0 prevents the long
   * pill-wrap row from forcing the actions wrapper to shrink. */
  flex: 1 1 auto;
  min-width: 0;
}
.compose-hashtag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0,115,170,0.08);
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.2s;
  border: none;
}
.compose-hashtag:hover {
  background: rgba(0,115,170,0.15);
}

/* --- Feed Posts --- */
.feed-post {
  padding: 24px;
  margin-bottom: 16px;
}
/* Author sees their own pending posts dimmed + pilled so it's obvious
   they're not public yet. No one else sees them (filtered server-side). */
.feed-post--pending {
  background: #fffbeb;
  border: 1px dashed #f59e0b;
}
.feed-post--pending .feed-post-content {
  color: var(--color-text, #1d2327);
}
.feed-post__status {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  cursor: help;
}
.feed-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.feed-post-meta {
  flex: 1;
  min-width: 0;
  /* Reserve space for the absolute-positioned kebab menu (.feed-post__report
     is 28px wide, anchored top:0/right:0). Without this, when name + time
     wrap to a second line, the wrapped text slides under the kebab. */
  padding-right: 36px;
}
.feed-post-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
}
.feed-post-name a {
  color: var(--color-text);
}
.feed-post-name a:hover {
  color: var(--color-primary);
}
.feed-post-username {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-left: 6px;
  font-weight: 400;
}
/* Time renders on its own line beneath name+username. Inline-wrapping
   "13 minutes ago" used to break mid-string ("13" on line 1, "minutes
   ago" on line 2 under the kebab), which read as a layout bug. Forcing
   the timestamp to its own block makes the wrap point predictable and
   keeps the kebab clear. */
.feed-post-time {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.feed-post-content {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.feed-reply-body {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.feed-post-content .hashtag,
.feed-post-content .mention,
.feed-reply-body .hashtag,
.feed-reply-body .mention {
  color: var(--color-primary);
  font-weight: 500;
  cursor: pointer;
  /* 1.22.146 — explicit reset because quill-mention's CSS styles
   * `.mention` globally (chip with background, padding, border-
   * radius). The same class name is used by our server-side mention
   * renderer, so without this override the chip styling leaks into
   * rendered posts and replies. */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}
.feed-post-content .mention a,
.feed-reply-body .mention a {
  color: inherit;
  text-decoration: none;
}
.feed-post-content .hashtag:hover,
.feed-post-content .mention:hover,
.feed-reply-body .hashtag:hover,
.feed-reply-body .mention:hover {
  text-decoration: underline;
}

/* --- Reaction click animation ------------------------------------------
 * Three coordinated effects when a user adds a reaction:
 *   1. .is-reacting on the button       → emoji pops briefly
 *   2. .reaction-particle floating copy → emoji drifts up + fades
 *   3. .is-bumping on the count span    → number pops
 * All gated behind prefers-reduced-motion so motion-sensitive users get
 * the click-handler's functionality (count updates) without the flourish.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .feed-action-btn.is-reacting {
    animation: wpf-reaction-pop 400ms ease-out;
  }
  @keyframes wpf-reaction-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
  }

  .reaction-particle {
    position: fixed;
    pointer-events: none;
    font-size: 22px;
    line-height: 1;
    z-index: 10000;
    transform: translate(-50%, 0);
    animation: wpf-reaction-float 900ms ease-out forwards;
    will-change: transform, opacity;
  }
  @keyframes wpf-reaction-float {
    0%   { opacity: 1; transform: translate(-50%, 0)    scale(1); }
    60%  { opacity: 1; transform: translate(-50%, -40px) scale(1.4); }
    100% { opacity: 0; transform: translate(-50%, -70px) scale(1.6); }
  }

  .reaction-count.is-bumping {
    display: inline-block;
    animation: wpf-count-bump 500ms ease-out;
  }
  @keyframes wpf-count-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
  }
}
.feed-post-hashtags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.feed-post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.feed-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: none;
}
.feed-action-btn:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}
.feed-action-btn.active {
  background: var(--brand-primary-light);
  color: var(--color-primary);
  font-weight: 700;
}
.feed-action-btn.active:hover {
  background: var(--brand-primary-light);
  color: var(--color-primary);
}

/* ==========================================================================
   1.22.147 — Phase 1 LinkedIn-style action bar.
   Replaces the 6 reaction buttons with a single Like button + reaction
   picker popup, a labelled Comment button, and a labelled Share button.
   Reactor summary line above surfaces social proof.
   ========================================================================== */

.feed-reactor-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}
.feed-reactor-summary:hover .feed-reactor-text,
.feed-reactor-summary:focus-visible .feed-reactor-text {
  color: var(--color-primary);
  text-decoration: underline;
}
.feed-reactor-summary strong {
  color: var(--color-text);
  font-weight: 600;
}
.feed-reactor-summary:hover strong {
  color: var(--color-primary);
}
.feed-reactor-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 1.22.148 — LinkedIn-style reaction-type pile. Emojis sit on small
 * white circles with a subtle ring — the emoji itself provides the
 * color, no tinted background. Tighter overlap makes the cluster
 * read as a single social-proof pile. */
.feed-reactor-pile {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.feed-reactor-pile__type {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--color-white);
  margin-left: -7px;
  font-size: 14px;
  line-height: 1;
  background: var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  flex: none;
}
.feed-reactor-pile__type:first-child {
  margin-left: 0;
}

.feed-post-actions--v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
/* When the reactor summary line is visible, drop the bar's top border so
 * the summary + bar read as a single block. */
.feed-reactor-summary + .feed-post-actions--v2 {
  border-top: 0;
  padding-top: 0;
}

.feed-post-actions--v2 .feed-action {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.feed-post-actions--v2 .feed-action:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}
.feed-post-actions--v2 .feed-action__icon {
  font-size: 18px;
  line-height: 1;
}
.feed-post-actions--v2 .feed-action__label {
  white-space: nowrap;
}

/* Active reaction state on the Like button: tint the label so the user
 * sees their reaction at a glance. The icon already swaps to the picked
 * emoji from JS / SSR. */
.feed-post-actions--v2 .feed-action--active {
  color: var(--color-primary);
}
.feed-post-actions--v2 .feed-action--love.feed-action--active       { color: #e0245e; }
.feed-post-actions--v2 .feed-action--celebrate.feed-action--active  { color: #d97706; }
.feed-post-actions--v2 .feed-action--strong.feed-action--active     { color: #7c3aed; }
.feed-post-actions--v2 .feed-action--insightful.feed-action--active { color: #b45309; }
.feed-post-actions--v2 .feed-action--funny.feed-action--active      { color: #0ea5e9; }

/* --- Reaction picker popup --- */
.feed-action-like-wrap {
  flex: 1 1 0;
  position: relative;
  display: flex;
}
.feed-action-like-wrap .feed-action--like {
  width: 100%;
}
.feed-reaction-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 30;
}
.feed-action-like-wrap--open .feed-reaction-popup {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.feed-reaction-popup__item {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s, background-color 0.12s;
}
.feed-reaction-popup__item:hover {
  background: var(--color-off-white);
  transform: scale(1.25) translateY(-2px);
}

/* Mobile: shrink labels to icons only on narrow viewports so the bar
 * doesn't wrap awkwardly. */
@media (max-width: 480px) {
  .feed-post-actions--v2 .feed-action__label {
    display: none;
  }
  .feed-post-actions--v2 .feed-action {
    padding: 10px 6px;
  }
  .feed-reaction-popup__item {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}

/* 1.22.186 — Reply action bar mirrors the main feed v2 chrome but
 * tighter (reply rows are denser than top-level cards). Single Like
 * button + hover-reveal popup, plus the existing Reply button.
 *
 * 1.22.188 — switched from inline-flex to full-width flex so the
 * reactor summary on the right can be pushed there by margin-left:
 * auto. Wraps on narrow viewports. */
.feed-reply-actions--v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.feed-reply-actions--v2 .feed-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.feed-reply-actions--v2 .feed-action:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}
.feed-reply-actions--v2 .feed-action__icon {
  font-size: 14px;
  line-height: 1;
}
.feed-reply-actions--v2 .feed-action__count {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-left: 2px;
}
.feed-reply-actions--v2 .feed-action--active                         { color: var(--color-primary); }
.feed-reply-actions--v2 .feed-action--love.feed-action--active       { color: #e0245e; }
.feed-reply-actions--v2 .feed-action--celebrate.feed-action--active  { color: #d97706; }
.feed-reply-actions--v2 .feed-action--strong.feed-action--active     { color: #7c3aed; }
.feed-reply-actions--v2 .feed-action--insightful.feed-action--active { color: #b45309; }
.feed-reply-actions--v2 .feed-action--funny.feed-action--active      { color: #0ea5e9; }

/* Reactor summary inline on the right side of the reply action bar
 * (1.22.188 — was above the bar, but inline-right reads cleaner in
 * the denser reply row). `margin-left: auto` floats it past the
 * Like + Reply buttons; on narrow viewports it wraps under. */
.feed-reactor-summary--reply {
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 12px;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.feed-reactor-summary--reply .feed-reactor-pile__type {
  width: 16px;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
}
.feed-reactor-summary--reply .feed-reactor-text {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Reply variant of the like-wrap: same anchor for the hover popup,
 * but doesn't stretch flex-1 like the top-level version. */
.feed-action-like-wrap--reply {
  flex: 0 0 auto;
}
.feed-action-like-wrap--reply .feed-action--like {
  width: auto;
}
/* Reply popup pops UP from the small button. Items shrink slightly
 * to match the tighter row scale. */
.feed-action-like-wrap--reply .feed-reaction-popup__item {
  width: 32px;
  height: 32px;
  font-size: 20px;
}

/* --- Replies --- */
.feed-replies {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.feed-reply-list .feed-reply-item:first-child {
  border-top: 0 !important;
}
.feed-reply-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 1.22.146 — second-level replies. The depth-1 reply is a regular
 * .feed-reply-item; its children sit in .feed-reply-children which
 * indents the whole block. Each child is also marked with
 * --depth-2 in case styling needs a per-row hook later. */
.feed-reply-children {
  margin-left: 24px;
  padding-left: 12px;
  border-left: 2px solid var(--color-border);
}
.feed-reply-item--depth-2 {
  /* Visual cue: subtle bg tint so the eye reads it as nested. */
  background: rgba(0, 0, 0, 0.015);
  border-radius: 6px;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.feed-reply-actions .feed-action-btn,
.feed-reply-action {
  /* Smaller buttons on replies — keeps the second tier visually
   * lighter than the post-level reactions. */
  font-size: 12px;
  padding: 4px 8px;
}
.feed-reply-to {
  /* Inline "Replying to @X" prefix above the reply body. */
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}
.feed-reply-to a {
  color: var(--color-primary);
  text-decoration: none;
}

/* Tighter indent on narrow viewports so the second tier doesn't eat
 * the reading width. */
@media (max-width: 560px) {
  .feed-reply-children {
    margin-left: 12px;
    padding-left: 8px;
  }
}

/* --- Sidebar --- */
.feed-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.feed-sidebar-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.feed-sidebar-card h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* 1.22.972 — Upcoming sessions widget reuses .feed-events-* classes
 * for the tear-off calendar tile + meta row, so there's no
 * sessions-specific block here. The only new selector is the time
 * chip; it sits alongside .feed-events-location / .feed-events-year
 * in the meta row and inherits their styling. */
.feed-events-time {
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
  font-variant-numeric: tabular-nums;
}

/* Trending Hashtags */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.trending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trending-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.trending-tag:hover {
  text-decoration: underline;
}
.trending-count {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Active Members */
.active-members-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.active-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.active-member-item .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}
.active-member-info {
  flex: 1;
  min-width: 0;
}
.active-member-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  display: block;
}
.active-member-name a {
  color: var(--color-text);
}
.active-member-name a:hover {
  color: var(--color-primary);
}
.active-member-posts {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────
 * Upcoming Events sidebar card (redesigned)
 *
 * Stacked month/day date badge on the left, event title + meta
 * chips (online / location / attendee count) on the right. Each
 * row is a full-width hover-highlighted link.
 * ────────────────────────────────────────────────────────── */
.feed-events-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.feed-events-card__head h3 {
  margin: 0;
}
/* "· India" scope label rendered next to the heading so viewers know
   why the list differs from the public /events/ page. */
.feed-events-card__scope {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
  white-space: nowrap;
}
.feed-events-card__all {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.feed-events-card__all:hover { text-decoration: underline; }

.feed-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feed-events-item {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}
.feed-events-item:last-child { border-bottom: 0; }

.feed-events-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s;
}
.feed-events-link:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}

/* Stacked month/day badge — like a mini tear-off calendar page. */
.feed-events-date {
  width: 44px;
  flex-shrink: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  line-height: 1;
}
.feed-events-date__month {
  display: block;
  padding: 3px 0;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.feed-events-date__day {
  display: block;
  padding: 5px 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.feed-events-body {
  flex: 1;
  min-width: 0;
}
.feed-events-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-events-link:hover .feed-events-title { color: var(--color-primary); }

.feed-events-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.feed-events-location,
.feed-events-attendees {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.feed-events-year {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 999px;
}
.feed-events-location svg,
.feed-events-attendees svg {
  color: var(--text-muted, var(--color-text-secondary));
  flex-shrink: 0;
}
.feed-events-badge--online {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.feed-events-badge--online svg { color: #059669; }

.feed-events-empty {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin: 0;
}

/* Digest Widget */
.digest-widget {
  background: var(--color-off-white);
  text-align: center;
}
.digest-widget h3 {
  margin-bottom: 8px;
}
.digest-widget p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}
.digest-form {
  display: flex;
  gap: 8px;
}
.digest-form input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.digest-form input:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .feed-layout {
    grid-template-columns: 1fr;
  }
  .feed-main {
    max-width: 100%;
  }
}
/* 1.22.149 — Stack the compose footer earlier (was 480px). On any
 * viewport narrower than ~720px the side-by-side layout was getting
 * crushed by the long hashtag pill row, leaving the Poll + Post
 * buttons cramped against the right edge. Stacking puts hashtags on
 * their own line and gives the action row full width below. */
@media (max-width: 720px) {
  .compose-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .compose-hashtags {
    /* Take full width when stacked — feels intentional, not cramped. */
    flex: 1 1 auto;
  }
  .compose-actions {
    /* Right-align the Poll + Post pair at the end of its own line so
     * it visually anchors the bottom of the compose box. */
    justify-content: flex-end;
  }
}
@media (max-width: 480px) {
  .feed-post-actions {
    flex-wrap: wrap;
  }
  .digest-form {
    flex-direction: column;
  }
}

/* =====================================================================
 * Community Hero
 * ===================================================================== */
.community-hero {
  background: var(--surface-dark, #101517);
  color: #fff;
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}
.community-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  left: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(33,69,230,0.35), rgba(33,69,230,0) 65%);
  pointer-events: none;
  filter: blur(10px);
  animation: community-hero-drift 14s ease-in-out infinite alternate;
}
@keyframes community-hero-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(200px, 80px, 0) scale(1.15); }
}
.community-hero .container { position: relative; z-index: 1; }
.community-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.community-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c3c4c7;
  margin-bottom: 12px;
}
.community-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: community-pulse-dot 2s ease-in-out infinite;
}
@keyframes community-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50%     { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.community-hero h1 {
  font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -0.01em;
}
.community-hero p {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #c3c4c7;
  max-width: 560px;
  margin: 0;
}
.community-hero__stats {
  display: flex;
  gap: 28px;
  align-items: flex-end;
}
.community-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.community-hero__stat-num {
  font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
  font-size: 32px;
  color: #fff;
  line-height: 1;
}
.community-hero__stat-label {
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8c8f94;
}
@media (max-width: 600px) {
  .community-hero { padding: 40px 0 32px; }
  .community-hero h1 { font-size: 32px; }
  .community-hero__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .community-hero__stats { gap: 22px; }
  .community-hero__stat-num { font-size: 26px; }
}

/* =====================================================================
 * Sarcastic community notice banner
 * ===================================================================== */
.community-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin: 24px 0 20px;
  background: linear-gradient(180deg, rgba(33,69,230,0.05), rgba(33,69,230,0.02));
  border: 1px solid rgba(33,69,230,0.2);
  border-left: 4px solid var(--color-primary, #2145e6);
  border-radius: 10px;
  color: var(--color-text, #1e1e1e);
  transition: opacity 0.25s, transform 0.25s;
}
.community-notice.is-hidden { opacity: 0; transform: translateY(-6px); }
.community-notice__copy {
  flex: 1;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.community-notice__copy strong { color: var(--color-primary, #2145e6); margin-right: 4px; }
.community-notice__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--color-text-secondary, #50575e);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.community-notice__close:hover { color: var(--color-primary, #2145e6); background: rgba(33,69,230,0.08); }

/* =====================================================================
 * Report button (⋯) on feed posts
 * ===================================================================== */
.feed-post-header { position: relative; }
.feed-post__report {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, #8c8f94);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.feed-post:hover .feed-post__report { opacity: 1; }
.feed-post__report:hover { background: rgba(239,68,68,0.08); color: #ef4444; }

/* =====================================================================
 * Author menu (⋯ → Edit / Delete) — replaces the report button on
 * posts the current user owns (or admin-viewed). Dropdown lives inside
 * the post card so it inherits card stacking context without needing
 * a portal.
 * ===================================================================== */
.feed-post__author-menu {
  position: absolute;
  top: 0;
  right: 0;
}
.feed-post__menu-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, #8c8f94);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.feed-post:hover .feed-post__menu-btn { opacity: 1; }
.feed-post__menu-btn:hover,
.feed-post__menu-btn[aria-expanded="true"] {
  background: rgba(33, 69, 230, 0.08);
  color: var(--brand-primary, #2145e6);
  opacity: 1;
}
.feed-post__menu-dropdown {
  position: absolute;
  top: 32px;
  right: 0;
  min-width: 140px;
  background: var(--surface-white, #ffffff);
  border: 1px solid var(--border-default, #e4e4e7);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 6px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feed-post__menu-dropdown[hidden] { display: none; }
.feed-post__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.feed-post__menu-item:hover {
  background: rgba(33, 69, 230, 0.08);
  color: var(--brand-primary);
}
.feed-post__menu-item--danger { color: #b42318; }
.feed-post__menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #b42318;
}

/* Disabled state — used on the Edit item after the 2-min window closes.
   Greyed, not-allowed cursor, no hover colour change. */
.feed-post__menu-item--disabled,
.feed-post__menu-item[disabled] {
  color: var(--color-text-secondary, #8c8f94);
  opacity: 0.55;
  cursor: not-allowed;
}
.feed-post__menu-item--disabled:hover,
.feed-post__menu-item[disabled]:hover {
  background: transparent;
  color: var(--color-text-secondary, #8c8f94);
}

/* "(edited)" pill next to the timestamp. Very subtle — small, muted,
   nothing that begs attention. */
.feed-post__edited {
  font-size: 11px;
  color: var(--color-text-secondary, #8c8f94);
  margin-left: 4px;
  font-style: italic;
}

/* Inline edit textarea — replaces .feed-post-content while editing. */
.feed-post--editing .feed-post-header { opacity: 0.85; }
.feed-post__editor {
  margin: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-post__editor-textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-white, #ffffff);
  border: 1.5px solid var(--brand-primary, #2145e6);
  border-radius: 6px;
  resize: vertical;
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 69, 230, 0.15);
  transition: box-shadow 0.15s;
}
.feed-post__editor-textarea:focus {
  box-shadow: 0 0 0 4px rgba(33, 69, 230, 0.22);
}
.feed-post__editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-post__editor-countdown {
  margin-right: auto;
  font-size: 12px;
  color: var(--color-text-secondary, #8c8f94);
  font-variant-numeric: tabular-nums;
}
/* Final 20 seconds — turn the countdown amber to signal urgency. */
.feed-post__editor-countdown[data-remaining="20"],
.feed-post__editor-countdown[data-remaining="19"],
.feed-post__editor-countdown[data-remaining="18"],
.feed-post__editor-countdown[data-remaining="17"],
.feed-post__editor-countdown[data-remaining="16"],
.feed-post__editor-countdown[data-remaining="15"],
.feed-post__editor-countdown[data-remaining="14"],
.feed-post__editor-countdown[data-remaining="13"],
.feed-post__editor-countdown[data-remaining="12"],
.feed-post__editor-countdown[data-remaining="11"],
.feed-post__editor-countdown[data-remaining="10"],
.feed-post__editor-countdown[data-remaining="9"],
.feed-post__editor-countdown[data-remaining="8"],
.feed-post__editor-countdown[data-remaining="7"],
.feed-post__editor-countdown[data-remaining="6"],
.feed-post__editor-countdown[data-remaining="5"],
.feed-post__editor-countdown[data-remaining="4"],
.feed-post__editor-countdown[data-remaining="3"],
.feed-post__editor-countdown[data-remaining="2"],
.feed-post__editor-countdown[data-remaining="1"] {
  color: #b45309;
  font-weight: 600;
}

/* =====================================================================
 * Report modal
 * ===================================================================== */
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.report-modal.is-open { display: block; }
.report-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,21,23,0.55);
  backdrop-filter: blur(2px);
}
.report-modal__panel {
  position: relative;
  margin: 6vh auto;
  max-width: 480px;
  width: calc(100% - 32px);
  background: var(--surface-1);
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
  overflow: hidden;
  outline: none;
}
.report-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 14px;
}
.report-modal__header h2 {
  font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  color: var(--color-text, #1e1e1e);
}
.report-modal__close {
  background: transparent; border: 0;
  font-size: 26px; line-height: 1;
  color: var(--color-text-secondary, #646970);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 6px;
}
.report-modal__close:hover { background: var(--surface-light-2); }
.report-modal__form { padding: 0 24px 22px; }
.report-modal__intro { font-size: 14px; color: var(--color-text-secondary, #50575e); margin: 0 0 14px; }
.report-modal__reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.report-modal__reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.report-modal__reason:hover { background: var(--surface-light-1); }
.report-modal__reason input:checked ~ span { font-weight: 600; color: var(--color-primary, #2145e6); }
.report-modal__reason:has(input:checked) { border-color: var(--color-primary, #2145e6); background: rgba(33,69,230,0.04); }
.report-modal__details-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text, #1e1e1e); }
.report-modal__details-label span { display: block; margin-bottom: 6px; }
.report-modal__details-label textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 8px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 13px;
  resize: vertical;
  min-height: 70px;
  background: var(--surface-1);
  color: var(--color-text, #1e1e1e);
}
.report-modal__details-label textarea:focus { outline: 0; border-color: var(--color-primary, #2145e6); box-shadow: 0 0 0 3px rgba(33,69,230,0.12); }
.report-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f1;
}

/* =====================================================================
 * @mention autocomplete dropdown
 * ===================================================================== */
.compose-box { position: relative; }
.mention-dropdown,
.hashtag-dropdown {
  position: absolute;
  /* left/top/width are set inline by JS so the dropdown floats just
     below the caret. These fallback values render a usable dropdown
     even if JS positioning fails for any reason. */
  left: 16px;
  top: 100%;
  min-width: 220px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--color-border, #dcdcde);
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.25);
  z-index: 20;
}
.hashtag-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.12s;
}
.hashtag-dropdown__item.is-active,
.hashtag-dropdown__item:hover {
  background: var(--color-off-white, #f6f7f7);
}
.hashtag-dropdown__tag {
  font-weight: 600;
  color: var(--color-text, #1d2327);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hashtag-dropdown__count {
  font-size: 12px;
  color: var(--color-text-secondary, #50575e);
}
.mention-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.mention-dropdown__item.is-active,
.mention-dropdown__item:hover {
  background: rgba(33,69,230,0.08);
}
.mention-dropdown__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-primary, #2145e6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.mention-dropdown__avatar--fallback { line-height: 28px; text-align: center; }
.mention-dropdown__name { font-weight: 600; color: var(--color-text, #1e1e1e); }
.mention-dropdown__handle { color: var(--color-text-secondary, #8c8f94); font-size: 12px; }

/* Type pill — shown right of the handle when the suggestion is a
 * business or plugin (user type is visually implied by the default
 * row style, so no pill). */
.mention-dropdown__handle { margin-left: auto; }
.mention-dropdown__type {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.mention-dropdown__type--business {
  background: #eef4ff;
  color: #2145e6;
}
.mention-dropdown__type--plugin {
  background: #fff7e6;
  color: #a86a00;
}

/* Distinguish rendered mentions in feed content by entity type —
 * users stay brand-blue (the default), businesses tint toward teal,
 * plugins amber. Underline on hover keeps them readable as links. */
.mention--business a { color: #0f7d72; }
.mention--plugin a   { color: #a86a00; }

/* =====================================================================
 * Shared toast container (also used elsewhere via window.wpfolksNotify)
 * ===================================================================== */
.wpfolks-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}
.wpfolks-toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--font-body, 'Figtree'), sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background: #1d2327;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
}
.wpfolks-toast.is-visible { opacity: 1; transform: translateY(0); }
.wpfolks-toast--error   { background: #8a2424; }
.wpfolks-toast--success { background: #2e7d32; }
.wpfolks-toast--info    { background: #2145e6; }

/* --- Reactor hover tooltip ----------------------------------------
 * Floating popover over a reaction button showing who reacted that way.
 * Position: fixed via JS (top/left computed from button rect). Small,
 * dark, text-only — styled like native OS tooltips to read as metadata
 * rather than content. Shows the per-reaction-type reactor list.
 * ----------------------------------------------------------------- */
.feed-reactor-tooltip {
	position: absolute;
	z-index: 10000;
	background: #1e1e1e;
	color: #ffffff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.4;
	max-width: 220px;
	min-width: 120px;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	font-family: var(--font-body, 'Figtree'), sans-serif;
}
.feed-reactor-tooltip__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 1px 0;
}
/* 1.22.146 — avatar + name row layout for the rich `users` payload. */
.feed-reactor-tooltip__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}
.feed-reactor-tooltip__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	display: inline-block;
}
.feed-reactor-tooltip__avatar--placeholder {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}
.feed-reactor-tooltip__row .feed-reactor-tooltip__name {
	font-size: 12px;
	color: #ffffff;
}
.feed-reactor-tooltip__overflow {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
}
/* Small arrow at the bottom pointing at the button. */
.feed-reactor-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--text-primary);
}

/* =====================================================================
 * 1.22.148 — Reactions modal (LinkedIn-style click-to-open reactor list).
 * ===================================================================== */
.wpf-reactions-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.wpf-reactions-modal.is-open { display: block; }
.wpf-reactions-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 21, 23, 0.55);
  backdrop-filter: blur(2px);
}
.wpf-reactions-modal__panel {
  position: relative;
  margin: 8vh auto;
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 80vh;
  background: var(--color-white, #fff);
  border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wpf-reactions-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.wpf-reactions-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}
.wpf-reactions-modal__close {
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.wpf-reactions-modal__close:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}

/* Tab strip — All N, plus one tab per reaction type with count. */
.wpf-reactions-modal__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  overflow-x: auto;
  flex: none;
}
.wpf-reactions-modal__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: color 0.12s, border-color 0.12s;
}
.wpf-reactions-modal__tab:hover {
  color: var(--color-text);
}
.wpf-reactions-modal__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.wpf-reactions-modal__tab-icon {
  font-size: 16px;
  line-height: 1;
}
.wpf-reactions-modal__tab-count {
  font-variant-numeric: tabular-nums;
}

/* Scrollable reactor list. */
.wpf-reactions-modal__list {
  overflow-y: auto;
  padding: 4px 0;
}
.wpf-reactions-modal__loading,
.wpf-reactions-modal__empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* Reactor row — avatar with reaction badge + name + headline. */
.wpf-reactor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s;
}
.wpf-reactor-row:hover {
  background: var(--color-off-white);
}
.wpf-reactor-row__avatar-wrap {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
}
.wpf-reactor-row__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  background: var(--color-off-white);
}
.wpf-reactor-row__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.wpf-reactor-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.wpf-reactor-row__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpf-reactor-row__handle {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.3;
}
.wpf-reactor-row__headline {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .wpf-reactions-modal__panel {
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/* =====================================================================
 * 1.22.149 — Polls
 * Compose builder + per-card poll widget.
 * ===================================================================== */

/* --- Compose builder ------------------------------------------------- */
.compose-poll {
  margin: 12px 0 0;
  padding: 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  background: var(--color-off-white, #f9fafb);
}
.compose-poll__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.compose-poll__close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
}
.compose-poll__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}
.compose-poll__hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.compose-poll__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.compose-poll__option {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-white);
  color: var(--color-text);
}
.compose-poll__option:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 69, 230, 0.1);
}
.compose-poll__add {
  background: none;
  border: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.compose-poll__add:hover {
  text-decoration: underline;
}
.compose-poll__duration {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.compose-poll__duration-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-white);
  color: var(--color-text);
}

/* Bottom-row layout — poll toggle sits left of the Post button. */
.compose-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 1.22.149 — never compress the Poll/Post pair under flex pressure
   * from a tall hashtag wrap row. The hashtag container is now
   * `flex: 1 1 auto` with min-width:0 so it absorbs the squeeze
   * instead of forcing the actions wrapper to shrink. */
  flex: none;
}
.compose-poll-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.compose-poll-toggle:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}
.compose-poll-toggle__icon {
  flex: none;
  display: block;
}
/* Pressed/active state — when the poll panel is open, give the toggle
 * a primary-tinted look so it reads as "this mode is on." Toggled by
 * JS via the `is-active` class. */
.compose-poll-toggle.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(33, 69, 230, 0.06);
}

/* 1.22.952 — Photo button (compose) — mirrors .compose-poll-toggle
   shape so the two sit visually equal in the actions row. */
.compose-photo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.compose-photo-toggle:hover {
  background: var(--color-off-white);
  color: var(--color-text);
}

/* Photo chips below the editor — small thumbs with × removal. */
.compose-photos { position: relative; padding: 0; }
.compose-photos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.compose-photos__list:empty { display: none; }
.compose-photo-chip {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-off-white);
  border: 1px solid var(--color-border, #e5e7eb);
}
.compose-photo-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compose-photo-chip button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Rendered photo strip on feed posts. Grid that adapts based on count. */
.feed-post-photos {
  margin: 10px 0 4px;
  display: grid;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
  grid-template-columns: 1fr 1fr;
}
.feed-post-photos--count-1 { grid-template-columns: 1fr; }
.feed-post-photos--count-3 .feed-post-photo:first-child { grid-row: span 2; }
.feed-post-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
}
.feed-post-photos--count-1 .feed-post-photo { aspect-ratio: 16/10; }
.feed-post-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.feed-post-photos__pending {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--color-text-secondary);
  background: var(--color-off-white);
  border-radius: 8px;
  border: 1px dashed var(--color-border, #e5e7eb);
}

/* oEmbed preview block on feed posts. */
.feed-post-embed {
  margin: 10px 0 4px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-off-white);
}
.feed-post-embed__media iframe,
.feed-post-embed__media video {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  /* 1.22.963 — Force a 16:9 letterbox so YouTube / Vimeo / video embeds
   * fill the card width with a properly tall player. Without this the
   * provider's default width/height (often 480x270) wins and renders
   * a tiny thumbnail-sized player inside a wide card. */
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 360px;
  background: #000;
}
.feed-post-embed__media blockquote { margin: 0; padding: 14px; }

/* 1.22.970 — Open Graph link card. Two layouts:
 *
 *   --hero    : image-dominant (X / Twitter "summary_large_image"
 *               style). Title sits as a dark pill overlay at the
 *               bottom-left of the image; host attribution shows
 *               outside, below the image.
 *   --compact : no image found — falls back to host + title +
 *               description stacked in a slim card.
 *
 * Used for any non-oEmbed URL that has OG / meta tags. oEmbed
 * (YouTube / X / Vimeo / Reddit) goes through .feed-post-embed
 * instead. */
.feed-post-link-card {
  display: block;
  margin: 12px 0 4px;
  text-decoration: none;
  color: inherit;
}

/* === hero (image-dominant, X-style) ============================ */
.feed-post-link-card--hero .feed-post-link-card__hero {
  position: relative;
  display: block;
  aspect-ratio: 1.91 / 1;        /* matches og:image standard */
  overflow: hidden;
  border-radius: 14px;
  background: #0b1023;
  border: 1px solid var(--color-border, #e5e7eb);
}
.feed-post-link-card--hero .feed-post-link-card__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feed-post-link-card__overlay-title {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-post-link-card__host-row {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.feed-post-link-card--hero:hover .feed-post-link-card__hero {
  border-color: var(--color-primary, #2563eb);
}

/* === compact (no-image fallback) =============================== */
.feed-post-link-card--compact {
  display: flex;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-off-white, #f8fafc);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.feed-post-link-card--compact:hover {
  border-color: var(--color-primary, #2563eb);
  background: var(--surface-1, #fff);
}
.feed-post-link-card--compact .feed-post-link-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.feed-post-link-card__host {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.feed-post-link-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-post-link-card__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Per-card poll widget ------------------------------------------- */
.feed-poll {
  margin: 6px 0 14px;
  padding: 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: var(--color-white);
}
.feed-poll__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pre-vote: clickable button rows.
 * Soft tint at rest, lift + shadow on hover so the click affordance
 * is obvious without screaming "primary CTA" — a poll has 2-4 of
 * these so they need to feel inviting, not loud. */
.feed-poll__option {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(33, 69, 230, 0.05);
  border: 1.5px solid rgba(33, 69, 230, 0.4);
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.feed-poll__option:hover:not(:disabled) {
  background: rgba(33, 69, 230, 0.1);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(33, 69, 230, 0.14);
}
.feed-poll__option:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.feed-poll__option:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Post-vote (results): bar + label + percentage.
 * Border removed — the bar fill is the dominant visual cue, a border
 * on top reads as competing chrome. Picked option uses a stronger
 * bar tint plus a subtle outline so it still pops in a tied race. */
.feed-poll__option--result {
  position: relative;
  background: rgba(0, 0, 0, 0.025);
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: default;
  overflow: hidden;
  min-height: 48px;
}
.feed-poll__option--result.feed-poll__option--mine {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  background: rgba(33, 69, 230, 0.04);
}
.feed-poll__option-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(33, 69, 230, 0.14);
  z-index: 0;
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feed-poll__option--mine .feed-poll__option-bar {
  background: rgba(33, 69, 230, 0.26);
}
.feed-poll__option-text {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Checkmark prefix on the user's pick — replaces the louder
 * "Your vote" pill so the row stays clean while still reading
 * "this is the one I voted for" at a glance. */
.feed-poll__option--mine .feed-poll__option-text::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.5l2 2 4-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.feed-poll__option-pct {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin-left: 12px;
  flex: none;
}
/* Legacy "Your vote" tag — superseded by the checkmark prefix above.
 * Kept in markup for backwards compat but visually suppressed. */
.feed-poll__mine-tag {
  display: none;
}
.feed-poll__footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-secondary);
}
.feed-poll--expired .feed-poll__time {
  font-weight: 600;
  color: var(--color-text);
}

/* =====================================================================
 * 1.22.149 — @announce broadcasts.
 * Inline chip on the keyword + "Announcement" pill in the post header.
 * ===================================================================== */
.feed-announce-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-weight: 700;
  color: #92400e; /* amber-800 */
  background: #fef3c7; /* amber-100 */
  border-radius: 4px;
  font-size: 0.95em;
}
.feed-post__announce {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  vertical-align: middle;
}
.feed-post__announce svg {
  flex: none;
}

/* ============================================================
 * 1.22.955 — X / Twitter-style compose modal.
 *
 * The inline compose box is retired. Folks now see a slim
 * always-visible trigger row at the top of the feed; clicking
 * it opens a full-fledged modal with editor, hashtags, photo
 * upload, poll builder, and emoji picker.
 *
 * Mobile (<= 600px): the modal goes full-screen.
 * ============================================================ */

/* Trigger row — sits where the old compose-box used to be. */
.compose-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--border-1, #e5e7eb);
  background: var(--surface-1, #fff);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.compose-trigger:hover {
  background: var(--surface-2, #f8fafc);
  border-color: var(--border-2, #d1d5db);
}
.compose-trigger img,
.compose-trigger .avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.compose-trigger__label {
  flex: 1 1 auto;
  color: var(--text-muted, #6b7280);
  font-size: 15px;
  font-weight: 500;
}
.compose-trigger__post {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--brand, #2563eb);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  pointer-events: none; /* Whole row is the click target. */
}

/* Modal scaffold. */
.compose-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 16px 16px;
  overflow-y: auto;
}
.compose-modal[hidden] { display: none; }
.compose-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.compose-modal__panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--surface-1, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.compose-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-1, #eef0f4);
}
.compose-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text, #1a1a1a);
  cursor: pointer;
}
.compose-modal__close:hover { background: var(--surface-2, #f1f5f9); }
.compose-modal__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text, #1a1a1a);
}
.compose-modal__body {
  padding: 18px 22px 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compose-modal__body > .compose-editor-wrap,
.compose-modal__body > .compose-photos,
.compose-modal__body > .compose-hashtags,
.compose-modal__body > .compose-poll,
.compose-modal__body > .compose-emoji-palette { margin: 0; }
.compose-modal__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.compose-modal__author img,
.compose-modal__author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.compose-modal__author-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text, #1a1a1a);
}
.compose-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-1, #eef0f4);
}
.compose-actions-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.compose-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--brand, #2563eb);
  cursor: pointer;
  transition: background 0.15s ease;
}
.compose-icon-btn:hover { background: rgba(37, 99, 235, 0.08); }
.compose-icon-btn.is-active { background: rgba(37, 99, 235, 0.15); }
.compose-modal__post {
  border-radius: 999px;
  padding: 8px 22px;
  font-weight: 600;
}

/* Emoji palette inside the modal. */
.compose-emoji-palette {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 10px;
  margin: 8px 0 0;
  border: 1px solid var(--border-1, #eef0f4);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.compose-emoji-palette[hidden] { display: none; }
.compose-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.compose-emoji:hover { background: rgba(37, 99, 235, 0.1); }

/* Body scroll-lock while modal is open. */
body.is-compose-open { overflow: hidden; }

/* 1.22.968 — Edit mode toolbar tweaks.
 * Photo + emoji stay (editor wants to swap/remove images and
 * insert reactions). Poll is hidden because polls are one-shot —
 * options can't be edited once a post exists. Link preview pane
 * is hidden too; the embed already shows on the card behind the
 * modal, and we don't want a duplicate during edit. */
.compose-modal--edit .compose-poll-toggle,
.compose-modal--edit .compose-poll,
.compose-modal--edit .compose-link-preview { display: none !important; }
.compose-modal__countdown {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2, #f1f5f9);
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* 1.22.959 — Live link preview inside the compose modal. */
.compose-link-preview {
  position: relative;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-1, #fff);
}
.compose-link-preview[hidden] { display: none; }
.compose-link-preview__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compose-link-preview__loading {
  padding: 16px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
/* 1.22.970 — Compose preview mirrors the published card:
 *   .--hero    image-dominant with overlay title + host below
 *   .--compact stacked host / title / desc when no image */
.compose-link-preview__card { display: block; padding: 12px; }

.compose-link-preview__card--hero .compose-link-preview__hero {
  position: relative;
  display: block;
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #0b1023;
}
.compose-link-preview__card--hero .compose-link-preview__hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.compose-link-preview__overlay-title {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compose-link-preview__host-row {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.compose-link-preview__card--compact { display: flex; gap: 0; padding: 0; }
.compose-link-preview__card--compact .compose-link-preview__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.compose-link-preview__host {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.compose-link-preview__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compose-link-preview__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compose-link-preview__embed iframe,
.compose-link-preview__embed video {
  display: block;
  width: 100%;
  border: 0;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Inside-modal tweaks: the poll panel and hashtag row were tuned for
 * the old inline box; reset their inherited padding so the modal's
 * own flex/gap layout owns spacing. */
.compose-modal .compose-poll { padding: 14px; border: 1px solid var(--border-1, #eef0f4); border-radius: 12px; }
.compose-modal .compose-hashtags { padding: 0; }
.compose-modal .compose-hashtag { padding: 6px 12px; font-size: 13px; }

/* 1.22.955 — Pending photo overlay on feed cards (only the author and
 * admins ever see this; everyone else sees just approved photos + a
 * "pending review" count line). */
.feed-post-photo { position: relative; }
.feed-post-photo--pending img { opacity: 0.65; filter: saturate(0.8); }
.feed-post-photo__badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Mobile: full-screen takeover. */
@media (max-width: 600px) {
  .compose-modal { padding: 0; align-items: stretch; }
  .compose-modal__backdrop { display: none; }
  .compose-modal__panel {
    max-width: none;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
  .compose-trigger { border-radius: 12px; }
  .compose-emoji-palette { grid-template-columns: repeat(8, 1fr); }
}