/* ═══════════════════════════════════════════════════════════
   SEW Activity Feed — Discord-Faithful Chat Experience
   MOBILE FIRST · v4 Complete Rewrite
   ═══════════════════════════════════════════════════════════ */

/* ─── PAGE WRAPPER ───────────────────────────────────────── */
.buddypress.activity #buddypress {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 !important;
  background: #fff;
}

/* ─── HIDE BB CRUFT ──────────────────────────────────────── */
.buddypress.activity .dir-component-heading,
.buddypress.activity .sew-comm-header__title,
.buddypress.activity .activity-avatar,
.buddypress.activity .bp-activity-head,
.buddypress.activity .sew-comm-header__top { display: none !important; }

/* ─── CHANNEL HEADER — # feed ────────────────────────────── */
.sew-channel-hdr {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.sew-channel-hdr__hash {
  font-size: 1.15rem;
  font-weight: 800;
  color: #b5b5b5;
  line-height: 1;
}
.sew-channel-hdr__name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sew-dark-600, #1A1A1A);
}
.sew-channel-hdr__sep {
  color: #ddd;
  font-size: 0.8rem;
  margin: 0 0.1rem;
}
.sew-channel-hdr__topic {
  font-size: 0.72rem;
  color: #8e9297;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ─── COMMUNITY NAV on activity page ─────────────────────── */
.buddypress.activity .sew-comm-nav {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 4px;
}
.buddypress.activity .sew-comm-nav .sew-comm-nav__item {
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8e9297;
  border-bottom: 2px solid transparent;
}
.buddypress.activity .sew-comm-nav .sew-comm-nav__item.is-active {
  color: var(--sew-primary-500);
  border-bottom-color: var(--sew-primary-500);
  font-weight: 700;
}
.buddypress.activity .sew-comm-nav .sew-comm-nav__item:hover {
  color: var(--sew-dark-600);
}

/* ─── CHANNEL TABS — horizontal scroll (BB native, fallback) */
.buddypress.activity .bp-dir-hori-nav .main-navs {
  display: flex !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 0 4px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.buddypress.activity .bp-dir-hori-nav .main-navs::-webkit-scrollbar { display: none; }
.buddypress.activity .bp-dir-hori-nav .main-navs li {
  flex-shrink: 0;
  list-style: none;
}
.buddypress.activity .bp-dir-hori-nav .main-navs li a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.85rem !important;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8e9297;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none !important;
  transition: all 0.15s;
}
.buddypress.activity .bp-dir-hori-nav .main-navs li a:hover {
  color: var(--sew-dark-600);
}
.buddypress.activity .bp-dir-hori-nav .main-navs li.selected a,
.buddypress.activity .bp-dir-hori-nav .main-navs li.current a {
  color: var(--sew-primary-500) !important;
  border-bottom-color: var(--sew-primary-500) !important;
  font-weight: 700 !important;
}
.buddypress.activity .bp-dir-hori-nav .main-navs li .count {
  background: var(--sew-primary-500);
  color: #fff;
  padding: 0.05rem 0.35rem;
  border-radius: 10px;
  font-size: 0.58rem;
  font-weight: 700;
  min-width: 15px;
  text-align: center;
}
.buddypress.activity .bp-dir-hori-nav .main-navs li a svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ─── COMPOSER TRIGGER — hidden, real form is shown ───────── */
.sew-composer-trigger {
  display: none !important;
}
.sew-composer-trigger--unused {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 10px;
  padding: 0.55rem 0.75rem;
  background: #f2f3f5;
  border-radius: 22px;
  cursor: text;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.sew-composer-trigger:hover {
  background: #ebedef;
  border-color: #e0e0e0;
}
.sew-composer-trigger__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #b5bac1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sew-composer-trigger:hover .sew-composer-trigger__icon {
  background: #8e9297;
}
.sew-composer-trigger__text {
  flex: 1;
  font-size: 0.84rem;
  color: #8e9297;
  user-select: none;
}
.sew-composer-trigger__actions {
  display: flex;
  gap: 0.35rem;
}
.sew-composer-trigger__btn {
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
  user-select: none;
}
.sew-composer-trigger__btn:hover { opacity: 1; }

/* ─── COMPOSER — placeholder for position, see bottom ────── */

/* ─── FILTER BAR — compact Discord-style ─────────────────── */
.subnav-filters,
#subnav-filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 10px !important;
  font-size: 0.7rem;
  color: #8e9297;
  background: #fafbfc !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  flex-wrap: wrap;
}
.subnav-filters label,
#subnav-filters label { font-size: 0.7rem; color: #8e9297; }
.subnav-filters select,
#subnav-filters select {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #555;
  -webkit-appearance: none;
  cursor: pointer;
}
.subnav-filters select:focus { border-color: var(--sew-primary-400); }
/* Search bar — style it Discord-like */
#buddypress .dir-search.activity-search {
  margin: 0 10px 0.35rem;
}
#buddypress .dir-search.activity-search input[type="search"] {
  border-radius: 18px;
  border: 1px solid #e0e0e0;
  background: #f2f3f5;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
#buddypress .dir-search.activity-search input[type="search"]:focus {
  border-color: var(--sew-primary-400);
  background: #fff;
}
/* Only show filter dropdowns */
.subnav-filters .feed-filters-item { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ─── ACTIVITY LIST ──────────────────────────────────────── */
.activity-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Reset items */
.activity-list > li,
ul.activity-list > li.activity-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  position: relative;
}

/* ─── MESSAGE LAYOUT — Discord chat ──────────────────────── */
.sew-msg {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 12px;
  position: relative;
}
.sew-msg-item:hover {
  background: rgba(0,0,0,0.02) !important;
}

/* Avatar column */
.sew-msg__avatar {
  flex-shrink: 0;
  width: 40px;
  padding-top: 2px;
}
.sew-msg__avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}
.sew-msg__avatar-ph {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.3px;
  cursor: pointer;
}

/* Body */
.sew-msg__body {
  flex: 1;
  min-width: 0;
}

/* Header — colored name + timestamp */
.sew-msg__header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.1rem;
}
.sew-msg__name {
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
  cursor: pointer;
  /* Color set inline by JS for each user */
}
.sew-msg__name:hover {
  text-decoration: underline !important;
}
.sew-msg__time,
.sew-msg__time a {
  font-size: 0.65rem !important;
  color: #a3a6aa !important;
  text-decoration: none !important;
  font-weight: 400;
}
.sew-msg__time a:hover {
  text-decoration: underline !important;
  color: #72767d !important;
}

/* Action text — "posted an update", "posted a new job" */
.sew-msg__action {
  font-size: 0.72rem;
  color: #8e9297;
  margin-bottom: 0.15rem;
  font-style: italic;
}

/* ─── GROUPED MESSAGES — compact, no avatar repeat ───────── */
.sew-msg--grouped {
  padding-top: 0.05rem !important;
  padding-bottom: 0.05rem !important;
  margin-top: -0.15rem;
}
.sew-msg-item:has(.sew-msg--grouped) {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.sew-msg__gutter {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
}
.sew-msg__hover-time {
  font-size: 0.58rem;
  color: transparent;
  transition: color 0.1s;
  white-space: nowrap;
}
.sew-msg-item:hover .sew-msg__hover-time {
  color: #a3a6aa;
}

/* ─── MESSAGE CONTENT ────────────────────────────────────── */
.sew-msg__content {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #2e3338;
  word-break: break-word;
}
.sew-msg__content p {
  margin: 0 0 0.25rem;
}
.sew-msg__content a {
  color: var(--sew-primary-500);
  text-decoration: none;
}
.sew-msg__content a:hover {
  text-decoration: underline;
}

/* Embedded content (job posts, links) — Discord embed style */
.sew-msg__content .activity-inner,
.sew-msg__content > div:not(.sew-reactions) {
  background: #f2f3f5;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--sew-primary-500);
  margin-top: 0.2rem;
  max-width: 400px;
}
.sew-msg__content h3,
.sew-msg__content h4 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.15rem !important;
  line-height: 1.3;
}
.sew-msg__content h3 a,
.sew-msg__content h4 a {
  color: var(--sew-primary-500) !important;
  text-decoration: none !important;
}
.sew-msg__content h3 a:hover,
.sew-msg__content h4 a:hover { text-decoration: underline !important; }
.sew-msg__content .activity-inner p {
  font-size: 0.82rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* ─── REACTIONS — emoji pill buttons ─────────────────────── */
.sew-reactions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  padding: 0;
}
.sew-reaction {
  display: inline-flex !important;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.35rem !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  border: 1px solid #e8e8e8 !important;
  background: #f2f3f5 !important;
  color: #72767d !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1.2;
  min-height: 0 !important;
  box-shadow: none !important;
  height: 24px;
}
.sew-reaction:hover {
  background: #e8e9eb !important;
  border-color: #d5d7d9 !important;
}
.sew-reaction--active,
.sew-reaction.liked {
  background: rgba(255,106,112,0.08) !important;
  border-color: rgba(255,106,112,0.35) !important;
  color: var(--sew-primary-500) !important;
}
.sew-reaction__emoji {
  font-size: 0.78rem;
  line-height: 1;
}
.sew-reaction__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ─── HOVER TOOLBAR — floating action buttons ────────────── */
.sew-msg__toolbar {
  position: absolute;
  top: -10px;
  right: 12px;
  display: none;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;
  z-index: 10;
}
.sew-msg-item:hover .sew-msg__toolbar {
  display: flex;
}
.sew-msg__tool {
  background: none;
  border: none;
  padding: 0.3rem 0.45rem;
  font-size: 0.95rem;
  cursor: pointer;
  color: #8e9297;
  transition: background 0.1s;
  line-height: 1;
}
.sew-msg__tool:hover {
  background: #f2f3f5;
}
.sew-msg__tool:first-child { border-radius: 6px 0 0 6px; }
.sew-msg__tool:last-child { border-radius: 0 6px 6px 0; }

/* ─── COMMENT THREAD — Discord reply chain ───────────────── */
.sew-msg .activity-comments {
  margin-top: 0.45rem;
  margin-left: 0;
  padding-left: 0.85rem;
  border-left: 2px solid #e0e0e0;
}
.sew-msg .activity-comments ul { padding: 0; margin: 0; list-style: none; }
.sew-msg .activity-comments .acomment-item {
  padding: 0.3rem 0;
  font-size: 0.8rem;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.sew-msg .activity-comments .acomment-avatar img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
}
.sew-msg .activity-comments .acomment-content {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #2e3338;
}
.sew-msg .activity-comments .acomment-meta {
  font-size: 0.68rem;
  color: #8e9297;
}

/* Comment input — reply bar */
.sew-msg .ac-form {
  margin-top: 0.3rem;
  padding: 0;
  background: transparent;
}
.sew-msg .ac-form .ac-input,
.sew-msg .ac-form textarea {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  outline: none;
  resize: none;
  min-height: 34px;
  background: #f2f3f5;
  transition: all 0.2s;
}
.sew-msg .ac-form .ac-input:focus,
.sew-msg .ac-form textarea:focus {
  background: #fff;
  border-color: var(--sew-primary-500);
  box-shadow: 0 0 0 2px rgba(255,106,112,0.08);
}
#buddypress .sew-msg .ac-form input[type="submit"],
#buddypress .sew-msg .ac-form .generic-button a {
  background: var(--sew-primary-500) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  margin-top: 0.25rem;
}

/* ─── DIVIDERS ───────────────────────────────────────────── */
.activity-list > li.sew-msg-item + li.sew-msg-item:not(:has(.sew-msg--grouped)) {
  border-top: 1px solid #f0f0f0 !important;
  margin-top: 0.15rem !important;
  padding-top: 0.15rem !important;
}
/* Fallback for :has() — add divider to non-grouped messages */
.sew-msg:not(.sew-msg--grouped) {
  padding-top: 0.5rem;
}

/* ─── LOAD MORE ──────────────────────────────────────────── */
.activity-list .load-more,
.activity-list .load-newest {
  text-align: center;
  padding: 0.75rem 0;
}
#buddypress .activity-list .load-more a,
#buddypress .activity-list .load-newest a {
  display: inline-block !important;
  background: transparent !important;
  color: var(--sew-primary-500) !important;
  border: 1px solid var(--sew-primary-500) !important;
  border-radius: 18px !important;
  padding: 0.4rem 1.25rem !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  transition: all 0.15s;
}
#buddypress .activity-list .load-more a:hover,
#buddypress .activity-list .load-newest a:hover {
  background: var(--sew-primary-500) !important;
  color: #fff !important;
}

/* ─── EMPTY STATE ────────────────────────────────────────── */
.activity-list .bp-feedback,
.activity-list .bp-template-notice {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.88rem;
  color: #72767d;
}

/* ─── BOTTOM SPACING ─────────────────────────────────────── */
.activity-list > li:last-child {
  margin-bottom: 68px !important;
}

/* ─── BB SKELETON OVERRIDE ───────────────────────────────── */
.bb-activity-placeholder { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════
   MOBILE REFINEMENTS — < 768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sew-channel-hdr { padding: 0.45rem 10px; }
  .sew-channel-hdr__topic { display: none; }
  .sew-channel-hdr__divider { display: none; }
  .sew-channel-hdr__hash { font-size: 1rem; }
  .sew-channel-hdr__name { font-size: 0.88rem; }

  .sew-msg {
    gap: 0.55rem;
    padding: 0.3rem 8px;
  }
  .sew-msg__avatar { width: 36px; }
  .sew-msg__avatar img,
  .sew-msg__avatar-ph { width: 36px; height: 36px; }
  .sew-msg__avatar-ph { font-size: 0.75rem; }
  .sew-msg__gutter { width: 36px; }

  .sew-msg__name { font-size: 0.82rem !important; }
  .sew-msg__time, .sew-msg__time a { font-size: 0.6rem !important; }
  .sew-msg__action { font-size: 0.7rem; }
  .sew-msg__content { font-size: 0.84rem; }
  .sew-msg__content .activity-inner p { font-size: 0.8rem; }
  .sew-msg__content h3, .sew-msg__content h4 { font-size: 0.84rem !important; }

  .sew-reaction { padding: 0.1rem 0.35rem !important; }
  .sew-reaction__emoji { font-size: 0.78rem; }
  .sew-reaction__label { font-size: 0.64rem; }

  /* Hover toolbar — tap instead on mobile */
  .sew-msg__toolbar { display: none !important; }

  /* Composer trigger */
  .sew-composer-trigger {
    margin: 0.5rem 8px;
    padding: 0.45rem 0.65rem;
  }
  .sew-composer-trigger__icon { width: 24px; height: 24px; font-size: 0.9rem; }
  .sew-composer-trigger__text { font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — Single column, centered, wider messages
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .buddypress.activity #buddypress {
    max-width: 720px;
    margin: 0 auto;
  }
  .sew-msg { padding: 0.4rem 16px; }
  .sew-msg__avatar { width: 44px; }
  .sew-msg__avatar img,
  .sew-msg__avatar-ph { width: 44px; height: 44px; }
  .sew-msg__gutter { width: 44px; }
  .sew-msg__content .activity-inner,
  .sew-msg__content > div:not(.sew-reactions) {
    max-width: 520px;
  }
  .sew-channel-hdr { padding: 0.5rem 16px; }
  .sew-composer-trigger { margin: 0.6rem 16px; }
  #bp-nouveau-activity-form,
  .activity-update-form { margin: 0 16px 0.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   TABLET — 769-1023px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) {
  .sew-msg__avatar { width: 42px; }
  .sew-msg__avatar img,
  .sew-msg__avatar-ph { width: 42px; height: 42px; }
  .sew-msg__gutter { width: 42px; }
  .sew-msg { padding: 0.35rem 16px; }
  .sew-channel-hdr { padding: 0.55rem 16px; }
  .sew-composer-trigger { margin: 0.6rem 16px; }
}

/* ═══════════════════════════════════════════════════════════
   COMPOSER — Discord-inspired post creation form
   Overrides BB's default activity-update-form
   ═══════════════════════════════════════════════════════════ */

/* ─── FORM WRAPPER — clean card (inline state) ──────────── */
#bp-nouveau-activity-form,
.activity-update-form {
  margin: 0.5rem 8px 0.6rem !important;
  border-radius: 12px !important;
  border: 1px solid #e0e0e0 !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}
/* BB adds .modal-popup class when expanded — full screen modal */
#bp-nouveau-activity-form.modal-popup,
.activity-update-form.modal-popup {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  box-shadow: none !important;
}
/* Form fills available space */
.modal-popup #whats-new-form {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
}
.modal-popup .whats-new-scroll-view {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
/* Content area gets breathing room */
.modal-popup #whats-new-content {
  flex: 1;
  padding: 0 0.75rem;
}
.modal-popup #whats-new-textarea {
  padding: 0 !important;
  flex: 1;
}
.modal-popup #whats-new,
.modal-popup .medium-editor-element {
  min-height: 120px !important;
  flex: 1;
}
/* Bottom toolbar sticks to bottom */
.modal-popup #whats-new-toolbar {
  position: sticky;
  bottom: 0;
  background: #f8f9fa !important;
  border-top: 1px solid #eee;
  padding: 0.5rem 0.75rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Formatting toolbar in modal */
.modal-popup #editor-toolbar {
  padding: 0.3rem 0.75rem !important;
}
/* Post button in modal — bottom right, always visible */
.modal-popup #aw-whats-new-submit {
  margin-left: auto !important;
}

/* ─── HEADER — "Create a post" bar ───────────────────────── */
#activity-header,
.sew-composer__header,
.bb-model-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem !important;
  background: #fafafa !important;
  border-bottom: 1px solid #f0f0f0 !important;
  min-height: 40px;
}
#activity-header h3,
.bb-model-header h3 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #333 !important;
  text-shadow: none !important;
}
/* Header action icons */
.bb-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bb-modal-header-actions a,
.bb-modal-header-actions .bb-activity-post-feature-image-ctrl {
  color: #8e9297 !important;
  font-size: 1rem;
  text-decoration: none !important;
  transition: color 0.12s;
}
.bb-modal-header-actions a:hover { color: #333 !important; }

/* ─── USER ROW — avatar + name + privacy ─────────────────── */
.whats-new-form-header,
#user-status-huddle,
.bp-activity-huddle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.35rem !important;
}
/* Avatar */
#whats-new-avatar img,
.activity-post-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
/* Username — kill shadows, clean style */
.activity-post-user-name,
.activity-post-user-name-container a,
.activity-post-user-name-container h5 a {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--sew-dark-600) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: normal !important;
}
.activity-post-user-name-container h5 {
  margin: 0 !important;
  line-height: 1.3;
}
/* Privacy badge */
#whats-new-status,
#bp-activity-privacy-point {
  font-size: 0.7rem !important;
  color: #8e9297 !important;
}
#bp-activity-privacy-point {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: #f2f3f5;
  cursor: pointer;
  max-width: none !important;
  overflow: visible !important;
}
.bp-activity-privacy-status {
  font-weight: 600;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
.activity-post-name-status {
  flex: 1;
  min-width: 0;
  overflow: visible !important;
}

/* ─── TITLE INPUT ────────────────────────────────────────── */
.whats-new-title,
#whats-new-title {
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.whats-new-title::placeholder,
#whats-new-title::placeholder {
  color: #bbb !important;
  font-weight: 400 !important;
}

/* ─── TEXTAREA — the main content editor ─────────────────── */
#whats-new-textarea {
  padding: 0 0.75rem !important;
  overflow: hidden !important;
}
#whats-new,
#whats-new-textarea .medium-editor-element {
  min-height: 60px !important;
  max-height: 300px !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #333 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0.5rem 0 !important;
  resize: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#whats-new::placeholder,
.medium-editor-placeholder::after {
  color: #999 !important;
  font-size: 0.85rem !important;
  text-shadow: none !important;
}
/* Fix double placeholder — contenteditable div renders placeholder attr as text */
#whats-new[placeholder]::placeholder {
  color: transparent !important;
}
/* MediumEditor's ::after is the real placeholder */
#whats-new.medium-editor-placeholder::after {
  color: #999 !important;
  -webkit-text-fill-color: #999 !important;
}
/* Kill horizontal scrollbar */
.whats-new-scroll-view {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ─── EDITOR TOOLBAR — formatting + mention buttons ──────── */
#editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.75rem !important;
  border-top: 1px solid #f0f0f0;
  justify-content: flex-start !important;
}
#editor-toolbar .post-elements-buttons-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#editor-toolbar .toolbar-button,
#editor-toolbar .post-elements-buttons-item > span,
#editor-toolbar .post-elements-buttons-item > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #666 !important;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.12s;
  text-decoration: none !important;
  background: transparent;
  border: none;
}
#editor-toolbar .toolbar-button:hover,
#editor-toolbar .post-elements-buttons-item > a:hover {
  background: #f2f3f5;
  color: #333 !important;
}

/* MediumEditor formatting bar */
.medium-editor-toolbar.static-toolbar {
  background: #f8f8f8 !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 0.15rem 0.2rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.medium-editor-toolbar-actions {
  display: flex !important;
  gap: 1px;
  flex-wrap: nowrap;
}
.medium-editor-action {
  background: transparent !important;
  color: #555 !important;
  border: none !important;
  border-radius: 5px !important;
  min-width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem !important;
  cursor: pointer;
  transition: background 0.1s;
  padding: 0 4px !important;
}
.medium-editor-action:hover { background: #eee !important; }
.medium-editor-action.medium-editor-button-active {
  background: var(--sew-primary-500) !important;
  color: #fff !important;
}
/* Bold/Italic labels inside buttons */
.medium-editor-action b {
  font-size: 0.72rem;
  font-weight: 700;
}

/* ─── BOTTOM TOOLBAR — poll + schedule + Post ────────────── */
#whats-new-toolbar {
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem !important;
  border-top: none !important;
  background: #fff !important;
}
/* Poll button bg */
#whats-new-toolbar .bb-post-poll-button,
#whats-new-toolbar .post-elements-buttons-item {
  background: transparent !important;
}
#whats-new-toolbar .post-elements-buttons-item {
  display: inline-flex;
}
#whats-new-toolbar .toolbar-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #8e9297 !important;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.12s;
  background: transparent;
  border: none;
  text-decoration: none !important;
}
#whats-new-toolbar .toolbar-button:hover {
  background: #eee;
  color: #333 !important;
}

/* Schedule section + Post button pushed right */
#activity-schedule-section { margin-left: auto; }
/* Post button container */
#aw-whats-new-submit { margin-left: auto !important; }

/* ─── POST BUTTON — prominent ────────────────────────────── */
#aw-whats-new-submit {
  background: var(--sew-primary-500) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.45rem 1.5rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 72px;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
}
#aw-whats-new-submit:hover {
  background: var(--sew-primary-600, #e55b61) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255,106,112,0.3) !important;
}
#aw-whats-new-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ─── PRIVACY STAGE (expanded radio list) ────────────────── */
#whats-new-privacy-stage {
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}
.bp-activity-privacy__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.1s;
}
.bp-activity-privacy__label:hover { background: #f0f0f0; }
.privacy-label { font-weight: 600; color: #333; font-size: 0.82rem; }
.privacy-sub-label { font-size: 0.7rem; color: #8e9297; }
.privacy-status-form-footer {
  padding: 0.4rem 0.75rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #eee;
}

/* ─── KILL ALL TEXT SHADOWS ──────────────────────────────── */
#bp-nouveau-activity-form *,
.activity-update-form * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* ─── FORM FOOTER — kill grey bg, clean layout ───────────── */
.whats-new-form-footer {
  background: #fff !important;
  border-top: 1px solid #eee;
  padding: 0 !important;
}
#activity-form-submit-wrapper {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem !important;
  justify-content: flex-end;
  background: #fff !important;
}
/* Hide duplicate header inside footer */
.whats-new-form-footer > .whats-new-form-header { display: none !important; }

/* ─── OVERLAY — collapse state ───────────────────────────── */
.activity-update-form-overlay {
  cursor: text;
}
/* Hide FAB when composer modal is open */
body:has(.modal-popup) #sewn-fab,
body:has(.modal-popup) .sewn-fab-container {
  display: none !important;
}

/* ─── FEATURE IMAGE BUTTON ───────────────────────────────── */
.bb-activity-post-feature-image-button a {
  color: #8e9297 !important;
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   COMPOSER DETAIL PASS — Human-quality polish
   ═══════════════════════════════════════════════════════════ */

/* ── COLLAPSED STATE — compact, inviting ─────────────────── */
/* Make it look like Discord's single-line input hint */
#bp-nouveau-activity-form:not(.modal-popup) {
  margin: 0.4rem 8px 0.5rem !important;
  border-radius: 22px !important;
  border: 1px solid #e0e0e0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Collapsed: hide header, just show avatar + placeholder inline */
#bp-nouveau-activity-form:not(.modal-popup) #activity-header {
  display: none !important;
}
/* Collapsed: compact horizontal layout */
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-scroll-view {
  padding: 0 !important;
}
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-form-header {
  padding: 0.5rem 0.65rem !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #user-status-huddle {
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-avatar img {
  width: 32px !important;
  height: 32px !important;
}
/* Hide username/privacy in collapsed */
#bp-nouveau-activity-form:not(.modal-popup) .activity-post-name-status,
#bp-nouveau-activity-form:not(.modal-popup) #activity-schedule-section {
  display: none !important;
}
/* Collapsed textarea — single line look */
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-content {
  padding: 0 !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-title {
  display: none !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-textarea {
  padding: 0 !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new {
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  font-size: 0.84rem !important;
  line-height: 20px !important;
  overflow: hidden !important;
}
/* Collapsed: hide editor/formatting toolbar */
#bp-nouveau-activity-form:not(.modal-popup) #editor-toolbar,
#bp-nouveau-activity-form:not(.modal-popup) .medium-editor-toolbar {
  display: none !important;
}
/* Collapsed: compact footer — just poll icon inline */
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-form-footer {
  display: none !important;
}
/* Collapsed: hide privacy, toolbar, submit */
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-privacy-stage,
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-toolbar,
#bp-nouveau-activity-form:not(.modal-popup) #activity-form-submit-wrapper,
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-form-footer {
  display: none !important;
}

/* ── MODAL STATE — full-screen compose sheet ─────────────── */
.modal-popup #activity-header {
  display: flex !important;
  padding: 0.6rem 0.85rem !important;
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.modal-popup #activity-header h3 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}
/* Close + image buttons */
.modal-popup .bb-modal-header-actions {
  gap: 0.75rem;
}
.modal-popup .bb-model-close-button {
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.12s;
}
.modal-popup .bb-model-close-button:hover {
  background: #f2f3f5;
}

/* User row — LEFT aligned, not centered */
.modal-popup .whats-new-form-header,
.modal-popup #user-status-huddle {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem 0.4rem !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.modal-popup #whats-new-avatar {
  flex-shrink: 0;
}
.modal-popup #whats-new-avatar img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
}
.modal-popup .activity-post-user-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}
.modal-popup .activity-post-name-status {
  text-align: left !important;
}

/* Title input — subtle underline */
.modal-popup #whats-new-title {
  border-bottom: 1px solid #f0f0f0 !important;
  margin: 0 0.85rem !important;
  padding: 0.5rem 0 !important;
  width: auto !important;
}

/* Textarea — fill space, visible placeholder */
.modal-popup #whats-new-textarea {
  padding: 0 0.85rem !important;
  flex: 1;
}
.modal-popup #whats-new {
  min-height: 80px !important;
  padding: 0.5rem 0 !important;
}

/* ── FORMATTING TOOLBAR — tight against footer ───────────── */
.modal-popup #editor-toolbar {
  padding: 0.2rem 0.75rem !important;
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: none !important;
  margin-bottom: 0;
  gap: 0.15rem;
}
/* All bottom elements in one clean row */
.modal-popup .whats-new-form-footer {
  background: #fff !important;
  border-top: none !important;
  padding: 0.3rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.4rem;
}
.modal-popup #whats-new-toolbar {
  display: contents !important;
}
.modal-popup #activity-form-submit-wrapper {
  display: contents !important;
}
/* All toolbar children flow inline in the footer row */
.modal-popup .whats-new-form-footer .post-elements-buttons-item {
  flex-shrink: 0;
}
/* Push Post button to far right */
.modal-popup .whats-new-form-footer #aw-whats-new-submit,
.modal-popup #aw-whats-new-submit {
  margin-left: auto !important;
  flex-shrink: 0;
}
/* Schedule section inline */
.modal-popup .whats-new-form-footer #activity-schedule-section {
  display: inline-flex;
}
/* Poll button — clean icon, no bg box */
.modal-popup .bb-post-poll-button {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
.modal-popup .bb-post-poll-button a,
.modal-popup .bb-post-poll-button .toolbar-button {
  background: none !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #72767d !important;
  font-size: 1rem;
}
.modal-popup .bb-post-poll-button a:hover {
  background: #f2f3f5 !important;
  color: #333 !important;
}

/* Schedule button */
.modal-popup #activity-schedule-section {
  margin: 0 !important;
}

/* POST BUTTON — prominent, right side */
.modal-popup #aw-whats-new-submit {
  background: var(--sew-primary-500) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.5rem 1.6rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  height: 38px !important;
  min-width: 80px !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(255,106,112,0.15) !important;
}
.modal-popup #aw-whats-new-submit:hover {
  box-shadow: 0 4px 12px rgba(255,106,112,0.25) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   DETAIL PASS — pixel-perfect human-quality polish
   ═══════════════════════════════════════════════════════════ */

/* 1. Channel header — simpler, no orphan pipe */
.sew-channel-hdr {
  padding: 0.3rem 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  gap: 0.3rem !important;
}
.sew-channel-hdr__hash {
  font-size: 1rem !important;
  color: #ccc !important;
}
.sew-channel-hdr__name {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}
.sew-channel-hdr__sep,
.sew-channel-hdr__topic,
.sew-channel-hdr__divider { display: none !important; }

/* 2. Collapsed composer — true pill shape, tighter */
#bp-nouveau-activity-form:not(.modal-popup) {
  border-radius: 24px !important;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0.35rem 8px 0.25rem !important;
}
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-form-header {
  padding: 0.4rem 0.55rem !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-avatar img {
  width: 28px !important;
  height: 28px !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new {
  font-size: 0.82rem !important;
  color: #999 !important;
}

/* 3. Tighten gap between composer and filter */
#bp-nouveau-activity-form:not(.modal-popup) + .bb-subnav-filters-container,
#bp-nouveau-activity-form + .bb-subnav-filters-container {
  margin-top: 0 !important;
}

/* 4. Filter bar — slightly bigger, more readable */
.bb-subnav-filters-container-main {
  padding: 0.3rem 8px !important;
}
.bb-subnav-filters-label {
  font-size: 0.72rem !important;
  color: #8e9297 !important;
}
.subnav-filters-opener {
  font-size: 0.72rem !important;
  color: #555 !important;
  font-weight: 600 !important;
}

/* 5. Feed message spacing — avatar not touching divider */
.sew-msg-item + .sew-msg-item:not(:has(.sew-msg--grouped)) {
  padding-top: 0.4rem !important;
}
.sew-msg:not(.sew-msg--grouped) {
  padding-top: 0.55rem !important;
}

/* 6. Reaction pills — smaller, subtler, Discord-proportioned */
.sew-reactions {
  margin-top: 0.2rem !important;
  gap: 0.2rem !important;
}
.sew-reaction {
  height: 22px !important;
  padding: 0 0.3rem !important;
  border-radius: 5px !important;
  font-size: 0.65rem !important;
  border: 1px solid #eee !important;
  background: #f7f7f8 !important;
}
.sew-reaction:hover {
  background: #eee !important;
}
.sew-reaction__emoji {
  font-size: 0.72rem !important;
}
.sew-reaction__label {
  font-size: 0.6rem !important;
}
.sew-reaction--active {
  background: rgba(255,106,112,0.06) !important;
  border-color: rgba(255,106,112,0.2) !important;
}

/* 7. Grouped message hover timestamp — not bleeding left */
.sew-msg__gutter {
  overflow: hidden !important;
}
.sew-msg__hover-time {
  font-size: 0.55rem !important;
  text-align: center;
  width: 100%;
  display: block;
}

/* 8. Embedded cards — thinner accent, tighter padding */
.sew-msg__content .activity-inner,
.sew-msg__content > div:not(.sew-reactions) {
  border-left-width: 3px !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 6px !important;
  background: #f8f8fa !important;
}
.sew-msg__content .activity-inner p {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* 9. Image posts — align with text column, rounded corners */
.sew-msg__content img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 0.3rem;
}

/* 10. Embed title — slightly smaller */
.sew-msg__content h3,
.sew-msg__content h4 {
  font-size: 0.82rem !important;
}

/* 11. Username — tighter line height */
.sew-msg__header {
  line-height: 1.2;
  margin-bottom: 0.05rem !important;
}
.sew-msg__name {
  font-size: 0.84rem !important;
}

/* 12. Timestamp — even more subtle */
.sew-msg__time,
.sew-msg__time a {
  font-size: 0.6rem !important;
  color: #b0b0b0 !important;
}

/* 13. Action text — smaller, barely visible */
.sew-msg__action {
  font-size: 0.68rem !important;
  color: #a0a0a0 !important;
  margin-bottom: 0.1rem !important;
}

/* 14. Mobile avatars — slightly smaller for density */
@media (max-width: 768px) {
  .sew-msg__avatar { width: 34px !important; }
  .sew-msg__avatar img,
  .sew-msg__avatar-ph { width: 34px !important; height: 34px !important; font-size: 0.72rem !important; }
  .sew-msg__gutter { width: 34px !important; }
  .sew-msg { gap: 0.5rem !important; padding-left: 8px !important; padding-right: 8px !important; }
}

/* 15. Hide reactions on grouped messages (show only on last of group) */
.sew-msg-item:has(.sew-msg--grouped) + .sew-msg-item:has(.sew-msg--grouped) .sew-reactions,
.sew-msg-item:not(:has(.sew-msg--grouped)) + .sew-msg-item:has(.sew-msg--grouped):not(:last-child) .sew-reactions {
  display: none !important;
}
/* Simpler: hide reactions on ALL grouped items, only show on non-grouped */
.sew-msg--grouped .sew-reactions { display: none !important; }

/* 16. Divider between message groups — ultra subtle */
.activity-list > li.sew-msg-item + li.sew-msg-item:not(:has(.sew-msg--grouped)) {
  border-top: 1px solid #f5f5f5 !important;
}

/* ═══════════════════════════════════════════════════════════
   LINKEDIN-INSPIRED COMPOSER MODAL — clean, professional
   ═══════════════════════════════════════════════════════════ */

/* FULL-WIDTH RESET — kill BB's 16px 20px padding */
#bp-nouveau-activity-form.modal-popup,
.activity-update-form.modal-popup {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Inner form takes full width */
#bp-nouveau-activity-form.modal-popup form,
#bp-nouveau-activity-form.modal-popup .activity-form {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* HEADER — LinkedIn style: "Create a post" left, X right */
.modal-popup #activity-header,
.modal-popup .bb-model-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem !important;
  background: #fff !important;
  border-bottom: 1px solid #e8e8e8 !important;
  min-height: 48px;
  width: 100% !important;
  box-sizing: border-box !important;
}
.modal-popup #activity-header h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
  flex: 1;
}
.modal-popup .bb-model-close-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  color: #666 !important;
  transition: background 0.15s !important;
  order: 10;
}
.modal-popup .bb-model-close-button:hover {
  background: #f2f3f5 !important;
}
/* Feature image button in header */
.modal-popup .bb-activity-post-feature-image-ctrl {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666 !important;
}

/* SCROLL VIEW — full width */
.modal-popup .whats-new-scroll-view {
  width: 100% !important;
  padding: 0 !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

/* USER ROW — LEFT aligned, LinkedIn style */
.modal-popup .whats-new-form-header {
  padding: 0.75rem 1rem 0.5rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}
.modal-popup #user-status-huddle,
.modal-popup .bp-activity-huddle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  justify-content: flex-start !important;
  width: 100% !important;
}
.modal-popup #whats-new-avatar {
  flex-shrink: 0 !important;
}
.modal-popup #whats-new-avatar img,
.modal-popup #whats-new-avatar .sew-msg__avatar-ph {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}
.modal-popup .activity-post-name-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0.1rem !important;
}
.modal-popup .activity-post-user-name,
.modal-popup .activity-post-user-name-container h5 a {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}
.modal-popup #bp-activity-privacy-point {
  font-size: 0.7rem !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 12px !important;
  background: #f0f0f0 !important;
  border: 1px solid #ddd !important;
  color: #666 !important;
}

/* TITLE INPUT — full width with padding */
.modal-popup #whats-new-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
  box-sizing: border-box !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 0.9rem !important;
}

/* CONTENT / TEXTAREA — full width */
.modal-popup #whats-new-content {
  padding: 0 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.modal-popup #whats-new-textarea {
  padding: 0 !important;
  width: 100% !important;
}
.modal-popup #whats-new,
.modal-popup .medium-editor-element {
  padding: 0.65rem 0 !important;
  min-height: 100px !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  width: 100% !important;
}

/* FORMATTING TOOLBAR — LinkedIn has bold/italic/list row */
.modal-popup #editor-toolbar {
  padding: 0.35rem 0.75rem !important;
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
.modal-popup #editor-toolbar a,
.modal-popup #editor-toolbar .toolbar-button {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: #666 !important;
  font-size: 0.85rem !important;
}
.modal-popup #editor-toolbar a:hover {
  background: #f2f3f5 !important;
  color: #333 !important;
}

/* FOOTER — LinkedIn puts media icons + Post button */
.modal-popup .whats-new-form-footer {
  background: #fff !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.3rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.modal-popup .whats-new-form-footer #whats-new-toolbar {
  display: contents !important;
}
.modal-popup .whats-new-form-footer #activity-form-submit-wrapper {
  display: contents !important;
}

/* Poll icon — clean, no box */
.modal-popup .bb-post-poll-button {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
.modal-popup .bb-post-poll-button a,
.modal-popup .bb-post-poll-button .toolbar-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: background 0.15s !important;
}
.modal-popup .bb-post-poll-button a:hover {
  background: #f2f3f5 !important;
}

/* Schedule icon */
.modal-popup #activity-schedule-section {
  margin: 0 !important;
}
.modal-popup #activity-schedule-section > a,
.modal-popup #activity-schedule-section .toolbar-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666 !important;
}

/* POST BUTTON — LinkedIn blue → our coral, prominent pill */
.modal-popup #aw-whats-new-submit {
  margin-left: auto !important;
  background: var(--sew-primary-500, #FF6A70) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  height: 38px !important;
  min-width: 72px !important;
  cursor: pointer !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: all 0.15s !important;
}
.modal-popup #aw-whats-new-submit:hover {
  background: var(--sew-primary-600, #E05560) !important;
  box-shadow: 0 2px 8px rgba(255,106,112,0.2) !important;
}

/* Divider between editor toolbar and footer */
.modal-popup #editor-toolbar + .whats-new-form-footer {
  border-top: none !important;
}

/* Kill text shadows globally in modal */
.modal-popup * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL FORM HEADER — LinkedIn-style rows
   Avatar+Name+Privacy → Title → Textarea
   ═══════════════════════════════════════════════════════════ */

/* Wrap the form header into rows */
.modal-popup .whats-new-form-header {
  flex-wrap: wrap !important;
  padding: 0.65rem 1rem !important;
  gap: 0 !important;
  align-items: flex-start !important;
}

/* First row: huddle = avatar + name + privacy → full width */
.modal-popup #user-status-huddle {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0 0 0.5rem !important;
  margin: 0 !important;
}
/* Show the username */
.modal-popup #whats-new-heading {
  display: block !important;
  width: auto !important;
  height: auto !important;
}
.modal-popup .activity-post-user-name-container h5 {
  margin: 0 !important;
  line-height: 1.3 !important;
}
.modal-popup .activity-post-user-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}
/* Show privacy inline next to name */
.modal-popup #whats-new-status {
  display: block !important;
  height: auto !important;
  width: auto !important;
}
.modal-popup #bp-activity-privacy-point {
  display: inline-flex !important;
  height: auto !important;
  width: auto !important;
  font-size: 0.68rem !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: 10px !important;
  background: #f0f0f0 !important;
  border: 1px solid #e0e0e0 !important;
  color: #666 !important;
  align-items: center !important;
  gap: 0.15rem !important;
  cursor: pointer !important;
}
/* Name + privacy in a column */
.modal-popup .activity-post-name-status {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Second row: content placeholder → full width */
.modal-popup #whats-new-content-placeholder {
  width: 100% !important;
  flex: 0 0 100% !important;
}

/* Avatar bigger in modal */
.modal-popup #whats-new-avatar img,
.modal-popup #whats-new-avatar .sew-msg__avatar-ph {
  width: 44px !important;
  height: 44px !important;
  font-size: 0.85rem !important;
}

/* Title input — proper full-width */
.modal-popup #whats-new-title,
.modal-popup .whats-new-title {
  width: 100% !important;
  padding: 0.4rem 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Textarea inside content placeholder */
.modal-popup #whats-new-textarea-placeholder,
.modal-popup #whats-new-placeholder {
  width: 100% !important;
  padding: 0 !important;
}
.modal-popup #whats-new {
  min-height: 100px !important;
  padding: 0.5rem 0 !important;
  font-size: 0.88rem !important;
  width: 100% !important;
}
/* placeholder text */
.modal-popup .medium-editor-placeholder::after,
.modal-popup #whats-new[data-placeholder]::before {
  color: #b0b0b0 !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
}

/* Hide schedule section from huddle — it's in footer */
.modal-popup #user-status-huddle #activity-schedule-section {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL FINAL POLISH — merge toolbars, fix Post button, placeholder
   ═══════════════════════════════════════════════════════════ */

/* Textarea shouldn't be massive when empty — grow as needed */
.modal-popup .whats-new-scroll-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.modal-popup #whats-new,
.modal-popup .medium-editor-element {
  min-height: 80px !important;
  max-height: none !important;
}

/* Merge editor toolbar INTO footer — single combined bottom bar */
.modal-popup #editor-toolbar {
  border-top: 1px solid #eee !important;
  border-bottom: none !important;
  padding: 0.35rem 1rem 0 !important;
  background: #fff !important;
}

/* Footer — ONE row with all tools + Post */
.modal-popup .whats-new-form-footer {
  border-top: none !important;
  padding: 0.25rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.15rem !important;
  background: #fff !important;
}

/* POST BUTTON — bold coral, full opacity, not washed out */
.modal-popup #aw-whats-new-submit {
  background: #FF6A70 !important;
  color: #fff !important;
  opacity: 1 !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.45rem 1.4rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  height: 36px !important;
  min-width: 68px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  margin-left: auto !important;
}

/* Poll button — NO background box at all */
.modal-popup .bb-post-poll-button,
.modal-popup .bb-post-poll-button a,
.modal-popup .bb-post-poll-button .toolbar-button,
.modal-popup .post-elements-buttons-item {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
/* Poll/schedule icons — round hover */
.modal-popup .post-elements-buttons-item > a,
.modal-popup .post-elements-buttons-item .toolbar-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #72767d !important;
  transition: background 0.12s !important;
  background: transparent !important;
}
.modal-popup .post-elements-buttons-item > a:hover,
.modal-popup .post-elements-buttons-item .toolbar-button:hover {
  background: #f2f3f5 !important;
}

/* Placeholder text in empty textarea */
.modal-popup .medium-editor-placeholder::after {
  content: "What's on your mind?" !important;
  color: #b0b0b0 !important;
  font-size: 0.88rem !important;
  font-style: normal !important;
}

/* User row border-bottom */
.modal-popup .whats-new-form-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
/* Title underline slightly heavier */
.modal-popup #whats-new-title {
  border-bottom-color: #e8e8e8 !important;
}

/* Avatar in collapsed state — consistent colorful treatment */
#bp-nouveau-activity-form:not(.modal-popup) .sew-msg__avatar-ph {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.6rem !important;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE BOTTOM TOOLBAR — all icons in one row
   ═══════════════════════════════════════════════════════════ */

/* Hide the separate editor toolbar — we'll show formatting on long-press/expand */
.modal-popup #editor-toolbar {
  display: none !important;
}

/* Footer becomes THE toolbar — all icons + Post in one row */
.modal-popup .whats-new-form-footer {
  border-top: 1px solid #eee !important;
  padding: 0.45rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.2rem !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

/* Shrink the empty scroll area — don't take ALL flex space */
.modal-popup .whats-new-scroll-view {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
}

/* Remove bottom whitespace after toolbar */
.modal-popup form,
.modal-popup .activity-form {
  padding-bottom: 0 !important;
}

/* Schedule dropdown caret cleanup */
.modal-popup #activity-schedule-section .toolbar-button {
  border: 1px solid #e0e0e0 !important;
  border-radius: 16px !important;
  padding: 0.2rem 0.5rem !important;
  height: 30px !important;
  width: auto !important;
  font-size: 0.72rem !important;
  color: #666 !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
}

/* Kill BB's max-height on scroll view — let flex handle sizing */
.modal-popup .whats-new-scroll-view {
  max-height: none !important;
  height: auto !important;
}

/* Footer sticks to absolute bottom */
.modal-popup .whats-new-form-footer {
  margin-top: auto !important;
}

/* MediumEditor placeholder when empty */
.modal-popup .medium-editor-placeholder::after {
  content: "What's on your mind?" !important;
  color: #aaa !important;
  font-size: 0.88rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* data-placeholder fallback */
.modal-popup #whats-new:empty::before {
  content: attr(data-placeholder);
  color: #b0b0b0;
  font-size: 0.88rem;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   MODAL — prominent close button + top spacing
   ═══════════════════════════════════════════════════════════ */

/* Top spacing on the entire modal — prevent content touching status bar */
.modal-popup #activity-header,
.modal-popup .bb-model-header {
  padding-top: max(0.75rem, env(safe-area-inset-top, 15px)) !important;
  min-height: 52px !important;
}

/* Close button — large, obvious, always accessible */
.modal-popup .bb-model-close-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f2f3f5 !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  order: 99 !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.modal-popup .bb-model-close-button:hover,
.modal-popup .bb-model-close-button:active {
  background: #e0e0e0 !important;
}
.modal-popup .bb-model-close-button .bb-icon-times {
  font-size: 1.2rem !important;
  color: #333 !important;
  line-height: 1 !important;
}

/* Also handle browser back — close modal on popstate */

/* Header needs more top spacing */
.modal-popup #activity-header,
.modal-popup .bb-model-header {
  padding-top: 15px !important;
}

/* Close button — make the grey circle more visible */
.modal-popup .bb-model-close-button {
  background: #e8e8e8 !important;
}
.modal-popup .bb-model-close-button:hover,
.modal-popup .bb-model-close-button:active {
  background: #d4d4d4 !important;
}
.modal-popup .bb-model-close-button .bb-icon-times,
.modal-popup .bb-model-close-button .bb-icon-l {
  font-size: 1.3rem !important;
  color: #1A1A1A !important;
}

/* ═══════════════════════════════════════════════════════════
   CLOSE BUTTON — unmistakable, LinkedIn-style
   ═══════════════════════════════════════════════════════════ */

/* More top space */
.modal-popup #activity-header,
.modal-popup .bb-model-header {
  padding-top: 20px !important;
}

/* Close button — very obvious dark circle */
.modal-popup .bb-model-close-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: #ddd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}
.modal-popup .bb-model-close-button:active {
  background: #ccc !important;
  transform: scale(0.95) !important;
}

/* Force the icon to render with fallback */
.modal-popup .bb-model-close-button .bb-icon-times::before,
.modal-popup .bb-model-close-button .bb-icon-l::before {
  font-size: 22px !important;
  color: #333 !important;
  font-weight: normal !important;
}

/* Close button SVG centered */
.modal-popup .bb-model-close-button svg {
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   CLOSE BUTTON — NUCLEAR: pure CSS ✕ that always works
   ═══════════════════════════════════════════════════════════ */

/* Hide BB icon font glyph */
.modal-popup .bb-model-close-button .bb-icon-l,
.modal-popup .bb-model-close-button .bb-icon-times {
  display: none !important;
}

/* Pure CSS ✕ via ::before + ::after cross lines */
.modal-popup .bb-model-close-button {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: #e0e0e0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.modal-popup .bb-model-close-button::before,
.modal-popup .bb-model-close-button::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2.5px !important;
  background: #333 !important;
  border-radius: 2px !important;
  top: 50% !important;
  left: 50% !important;
}
.modal-popup .bb-model-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.modal-popup .bb-model-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.modal-popup .bb-model-close-button:active {
  background: #ccc !important;
  transform: scale(0.92) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL + WP ADMIN BAR — push modal below admin bar
   ═══════════════════════════════════════════════════════════ */

/* Mobile admin bar is 46px */
.admin-bar #bp-nouveau-activity-form.modal-popup,
.admin-bar .activity-update-form.modal-popup {
  top: 46px !important;
  height: calc(100vh - 46px) !important;
  height: calc(100dvh - 46px) !important;
}

/* Desktop admin bar is 32px */
@media (min-width: 783px) {
  .admin-bar #bp-nouveau-activity-form.modal-popup,
  .admin-bar .activity-update-form.modal-popup {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
  }
}

/* Overlay also needs to account for admin bar */
.admin-bar .modal-popup .activity-update-form-overlay {
  top: 46px !important;
  height: calc(100vh - 46px) !important;
}
@media (min-width: 783px) {
  .admin-bar .modal-popup .activity-update-form-overlay {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
  }
}