/* The feed-scope toggle is the one topbar action that stays switched on across
   pages, so it needs a resting "this filter is applied" state - otherwise a feed
   showing only your own posts looks like a feed that ran out of posts. */
.um-feed-scope-toggle.is-active {
  box-shadow: inset 0 0 0 2px var(--um-primary-dark, #9f1239);
}

.um-feed {
  display: grid;
  gap: 14px;
}

.um-post-card.is-focused {
  border-color: rgba(225, 29, 72, 0.45);
  box-shadow: 0 14px 34px rgba(225, 29, 72, 0.14);
}

.um-card {
  overflow: hidden;
}

.um-post-card {
  display: block;
}

.um-card-head,
.um-card-body,
.um-card-actions,
.um-comments {
  padding: 12px;
}

.um-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.um-follow-badge {
  border: 1px solid rgba(225, 29, 72, 0.4);
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.16);
  color: var(--um-accent);
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.um-follow-badge.is-following {
  border-color: rgba(148, 163, 184, 0.36);
  background: rgba(148, 163, 184, 0.14);
  color: var(--um-muted);
}

.um-follow-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.um-feed-loader {
  min-height: 48px;
  display: grid;
  place-items: center;
  color: var(--um-muted);
  font-weight: 850;
  border: 1px dashed var(--um-line);
  border-radius: var(--um-radius);
  background: var(--um-chip-bg-strong, #fff1f2);
}

.um-feed-loader.is-complete {
  background: transparent;
}

.um-card-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  border-top: 1px solid var(--um-line);
  border-bottom: 1px solid var(--um-line);
  overflow-x: auto;
  scrollbar-width: thin;
}

.um-card-actions button,
.um-comment-form button {
  border: 0;
  border-radius: var(--um-radius);
  background: transparent;
  padding: 10px;
  cursor: pointer;
  color: var(--um-muted);
  font-weight: 850;
}

.um-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  white-space: nowrap;
}

.um-card-action-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  flex: 0 0 auto;
}

.um-card-action-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shown instead of .um-card-action-icon once a specific reaction has been picked -- see
   renderPostActionButton(). */
.um-card-action-emoji {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.um-card-actions button:hover,
.um-comment-form button:hover {
  background: var(--um-chip-active-bg, #ffe4e6);
  color: var(--um-primary-dark);
}

.um-card-actions button.is-reacted {
  background: var(--um-chip-active-bg, #ffe4e6);
  color: var(--um-primary);
}

.um-reaction-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--um-chip-bg, #fff7f8);
}

/* Floats above and beside the Like button (the row's first item) instead of pushing the
   actions row down in-flow, which used to shove Comment/Share/etc. downward whenever the
   picker opened. Anchored on the footer, not .um-card-actions itself: that row is
   overflow-x: auto (so it scrolls on narrow cards), which also clips an absolutely
   positioned child to its own box -- positioning against the footer escapes that clip.
   top:0 + translateY(-100%) floats it by its own height above the footer's top edge,
   which is also the actions row's top edge since the row is the footer's first child. */
.um-card-footer {
  position: relative;
}

.um-card-actions .um-reaction-picker {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(-100% - 8px));
  border: 1px solid var(--um-line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  z-index: 5;
}

/* Invisible bridge over the 8px gap between the picker and the Like button. That gap lies over
   the post's media, so moving up from Like to an emoji left the footer, and the hover-close
   timer (handleRootPointerout) fired and hid the picker. The click then landed on the video. */
.um-card-actions .um-reaction-picker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.um-reaction-picker button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--um-line);
  border-radius: 999px;
  background: var(--um-surface-strong);
  font-size: 18px;
  cursor: pointer;
}

.um-reaction-picker button:hover,
.um-reaction-picker button:focus {
  background: var(--um-chip-active-bg, #ffe4e6);
  border-color: #fecdd3;
}

.um-post-menu-summary {
  border: 1px solid var(--um-line);
  border-radius: var(--um-radius);
  padding: 12px;
  background: var(--um-chip-bg, #fff7f8);
  margin-bottom: 12px;
}

.um-post-menu-summary,
.um-tool-list {
  min-width: 0;
}

.um-post-menu-summary strong {
  display: block;
  color: var(--um-text);
  font-family: "Rubik", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.um-post-menu-summary p {
  margin: 6px 0 0;
  color: var(--um-muted);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.um-feed-notice {
  border: 1px solid rgba(225, 29, 72, 0.22);
  border-radius: var(--um-radius);
  padding: 12px 14px;
  background: var(--um-chip-active-bg, #ffe4e6);
  color: #9f1239;
  font-weight: 500;
}

.um-report-form {
  display: grid;
  gap: 10px;
}

.um-report-form label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--um-line);
  border-radius: var(--um-radius);
  padding: 10px 12px;
  background: var(--um-chip-bg, #fff7f8);
  font-weight: 500;
}

.um-see-more {
  justify-self: center;
  margin: 4px auto 18px;
}

/* Plain post text keeps the author's line breaks (jokes, dialogue, lists). */
.um-post-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.um-post-background-text {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.um-post-background-text.is-text-xl {
  font-size: 42px;
}

.um-post-background-text.is-text-lg {
  font-size: 35px;
}

.um-post-background-text.is-text-md {
  font-size: 28px;
}

.um-post-background-text.is-text-sm {
  font-size: 22px;
}

/* Two classes on purpose. These colours are also worn by the composer's background swatches and
   its writing area, and composer.css - which loads AFTER this file since the CSS split (see
   includes/style-parts.php) - gives those ".um-background-swatch { background: #e5e7eb }" and
   ".um-composer-writing-surface { background: transparent }". At one class each, those won on
   source order: every swatch rendered the same grey and picking one left the post blank, so the
   background picker looked dead. composerBackgroundClass() always emits "has-background" together
   with "um-post-bg-<key>", so matching both out-ranks them wherever the files load. */
.has-background.um-post-bg-lime {
  background: linear-gradient(135deg, #bef264 0%, #84cc16 52%, #16a34a 100%);
}

.has-background.um-post-bg-violet {
  background: #a855f7;
}

.has-background.um-post-bg-rose {
  background: #e11d48;
}

.has-background.um-post-bg-black {
  background: #050505;
}

.has-background.um-post-bg-ocean {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

.has-background.um-post-bg-orchid {
  background: linear-gradient(135deg, #c026d3 0%, #9333ea 100%);
}

.has-background.um-post-bg-sunset {
  background: linear-gradient(180deg, #f97316 0%, #facc15 52%, #ec4899 100%);
}

.has-background.um-post-bg-slate {
  background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
}

.um-empty {
  color: var(--um-muted);
  padding: 14px;
}

.um-card-body,
.um-module p,
.um-comment,
.um-feed-loader,
.um-empty {
  font-size: 14px;
  font-weight: 400;
}

/* Web addresses in post text are links (formatPostMessageHtml in the JS). Long ones wrap
   instead of pushing the card wider. */
.um-card-body .um-post-link {
  color: var(--um-primary, #be123c);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.um-card-body .um-post-link:hover,
.um-card-body .um-post-link:focus-visible {
  text-decoration: underline;
}