/* ================================================================
   BUDDYPRESS + BETTER MESSAGES — Apple-inspired Redesign v2
   Child Theme: tutorstarter-child
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  --bp-accent:        #007aff;
  --bp-accent-hover:  #0062cc;
  --bp-accent-light:  rgba(0, 122, 255, 0.10);
  --bp-accent-light2: rgba(0, 122, 255, 0.06);
  --bp-red:           #ff3b30;
  --bp-green:         #34c759;
  --bp-bg:            #f2f2f7;
  --bp-surface:       #ffffff;
  --bp-border:        rgba(0, 0, 0, 0.07);
  --bp-border-strong: rgba(0, 0, 0, 0.14);
  --bp-text:          #1d1d1f;
  --bp-text-2:        #6e6e73;
  --bp-text-3:        #aeaeb2;
  --bp-radius-xl:     20px;
  --bp-radius-lg:     16px;
  --bp-radius-md:     12px;
  --bp-radius-sm:     8px;
  --bp-shadow-sm:     0 1px 4px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04);
  --bp-shadow-md:     0 4px 18px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --bp-shadow-lg:     0 8px 36px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --bp-transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Page Background ───────────────────────────────────────── */
body.buddypress #page,
body.bp-user    #page,
body.bp-activity #page,
body.bp-groups  #page,
body.bp-members #page {
  background: var(--bp-bg);
}

/* ── 3. Main Wrapper ──────────────────────────────────────────── */
#buddypress,
.bp-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: var(--body-font, -apple-system, "Poppins", sans-serif);
  color: var(--bp-text);
}

/* ── 4. Global resets ─────────────────────────────────────────── */
#buddypress *, .bp-messages-wrap * { box-sizing: border-box; }
#buddypress ul { list-style: none; padding: 0; margin: 0; }
#buddypress img { max-width: 100%; height: auto; }
#buddypress a { color: var(--bp-accent); text-decoration: none; transition: color var(--bp-transition); }
#buddypress a:hover { color: var(--bp-accent-hover); }

/* ── 5. Buttons ───────────────────────────────────────────────── */
#buddypress .generic-button a,
#buddypress .generic-button button,
#buddypress input[type="submit"],
#buddypress input[type="button"],
#buddypress button.button,
#buddypress a.button,
#buddypress .activity-read-more a,
#buddypress .comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--bp-accent) !important;
  background: var(--bp-accent-light);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--bp-transition), transform var(--bp-transition), box-shadow var(--bp-transition);
  text-decoration: none !important;
}
#buddypress .generic-button a:hover,
#buddypress .generic-button button:hover,
#buddypress button.button:hover {
  background: var(--bp-accent);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,122,255,0.30);
}

/* Primary submit */
#buddypress input[type="submit"] {
  background: var(--bp-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25);
}
#buddypress input[type="submit"]:hover {
  background: var(--bp-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,122,255,0.35);
}

/* Destructive */
#buddypress .friendship-button.is_friend a,
#buddypress .group-button.leave-group a {
  color: var(--bp-red) !important;
  background: rgba(255,59,48,0.08) !important;
}
#buddypress .friendship-button.is_friend a:hover,
#buddypress .group-button.leave-group a:hover {
  background: var(--bp-red) !important;
  color: #fff !important;
}

/* ── 6. Forms ─────────────────────────────────────────────────── */
#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress input[type="search"],
#buddypress input[type="url"],
#buddypress textarea,
#buddypress select {
  width: 100%;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--bp-text);
  background: var(--bp-surface);
  border: 1.5px solid var(--bp-border-strong);
  border-radius: var(--bp-radius-sm);
  outline: none;
  transition: border-color var(--bp-transition), box-shadow var(--bp-transition);
}
#buddypress input:focus,
#buddypress textarea:focus,
#buddypress select:focus {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px var(--bp-accent-light);
}
#buddypress textarea { resize: vertical; min-height: 80px; }

/* ── 7. Navigation Tabs ───────────────────────────────────────── */
#item-nav,
#subnav,
.bp-navs {
  margin: 16px 0 0;
}

#item-nav ul,
#subnav ul,
.bp-navs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
}

#item-nav ul li a,
#subnav ul li a,
.bp-navs ul li a {
  display: block;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bp-text-2) !important;
  border-radius: var(--bp-radius-md);
  transition: all var(--bp-transition);
  white-space: nowrap;
  text-decoration: none !important;
}
#item-nav ul li a:hover,
#subnav ul li a:hover,
.bp-navs ul li a:hover {
  background: var(--bp-accent-light2);
  color: var(--bp-accent) !important;
}
#item-nav ul li.current a,
#item-nav ul li.selected a,
#subnav ul li.current a,
#subnav ul li.selected a,
.bp-navs ul li.current a,
.bp-navs ul li.selected a {
  background: var(--bp-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.28);
}

/* Nav count badges */
#item-nav ul li a span,
#subnav ul li a span,
.bp-navs ul li a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.09);
  border-radius: 999px;
  margin-left: 4px;
  color: inherit;
}
#item-nav ul li.current a span,
#subnav ul li.current a span,
.bp-navs ul li.current a span {
  background: rgba(255,255,255,0.28);
}

/* Mostra / sort select inline */
#buddypress .activity-type-select,
#buddypress select#activity-filter-select,
#buddypress select#group-order-select,
#buddypress select#member-order-select {
  width: auto;
  padding: 7px 30px 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--bp-border-strong);
  background-color: var(--bp-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236e6e73'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  font-size: 13px;
  cursor: pointer;
}

/* ── 8. Profile Header ────────────────────────────────────────── */
#item-header {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-xl);
  box-shadow: var(--bp-shadow-md);
  padding: 28px 28px 24px;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
}

#item-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,122,255,0.03), transparent 55%);
  pointer-events: none;
}

/* Profile header: float-based layout (BP default) */
#item-header-avatar {
  float: left;
  margin-right: 20px;
}
#item-header-avatar img,
#item-header-avatar a img {
  display: block;
  width: 88px !important;
  height: 88px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bp-surface);
  box-shadow: 0 0 0 2px var(--bp-accent-light), var(--bp-shadow-md);
  transition: transform var(--bp-transition), box-shadow var(--bp-transition);
}
#item-header-avatar img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--bp-accent), var(--bp-shadow-lg);
}

#item-header-content { overflow: hidden; padding-top: 4px; }
#item-header-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--bp-text);
  margin: 0 0 4px;
  line-height: 1.2;
}
#item-header-content h2 a { color: var(--bp-text) !important; }

.item-meta,
#item-header-content .activity {
  font-size: 13px;
  color: var(--bp-text-2);
  margin: 0 0 12px;
}

#item-buttons,
.item-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  clear: left;
}

/* ── 9. Activity Feed — correct flex layout ───────────────────── */

/* Feed container */
#activity-stream,
.activity-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * IMPORTANT: BP structure for each item:
 *   <li>
 *     <div class="activity-avatar">  ← sibling, NOT inside activity-header
 *     <div class="activity-content">
 *       <div class="activity-header">
 *       <div class="activity-inner">
 *       <div class="activity-meta">
 *
 * We make the li a flex row so avatar + content sit side by side inside the card.
 */

/* Top-level items only — exclude nested comment li */
#activity-stream > li,
.activity-list > li {
  display: flex;
  flex-wrap: wrap;       /* allows .activity-comments to wrap to full-width row below */
  align-items: flex-start;
  gap: 13px;
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  padding: 18px 20px;
  transition: box-shadow var(--bp-transition), transform var(--bp-transition);
  list-style: none;
  position: relative;
}

#activity-stream > li:hover,
.activity-list > li:hover {
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-1px);
}

/* Pinned */
#activity-stream > li.pinned { border-left: 3px solid var(--bp-accent); }

/* Avatar column */
.activity-avatar {
  flex-shrink: 0;
  width: 42px;
}
.activity-avatar a { display: block; }
.activity-avatar img,
.activity-avatar a img {
  display: block;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bp-surface);
  box-shadow: 0 0 0 1.5px var(--bp-border);
  transition: transform var(--bp-transition);
}
#activity-stream > li:hover .activity-avatar img { transform: scale(1.05); }

/* Content column — takes remaining space */
.activity-content {
  flex: 1;
  min-width: 0;
  padding-left: 0; /* reset any theme override */
}

/* Activity header: action text */
.activity-header {
  margin-bottom: 8px;
}
.activity-header p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bp-text);
}
.activity-header p a {
  font-weight: 600;
  color: var(--bp-text) !important;
}

/* Timestamp */
.activity-time-since,
.activity-header .time-since {
  font-size: 11.5px !important;
  color: var(--bp-text-3) !important;
  margin-top: 2px !important;
  display: block;
}
.activity-time-since a,
.activity-header .time-since a {
  color: var(--bp-text-3) !important;
  font-weight: 400 !important;
}

/* Activity body text */
.activity-inner p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bp-text);
  margin: 0 0 10px;
  word-break: break-word;
}

/* Media */
.activity-inner .bp-activity-media-wrap,
.activity-inner .bp-activity-video-wrap {
  border-radius: var(--bp-radius-md);
  overflow: hidden;
  margin: 10px 0;
}

/* Action buttons row */
.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bp-border);
}
.activity-meta a,
.activity-meta button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bp-text-2) !important;
  background: var(--bp-bg);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--bp-transition);
  text-decoration: none !important;
}
.activity-meta a:hover,
.activity-meta button:hover {
  background: var(--bp-accent-light);
  color: var(--bp-accent) !important;
}
.activity-meta .bp-activity-is-liked,
.activity-meta .selected {
  color: var(--bp-accent) !important;
  background: var(--bp-accent-light) !important;
}

/* ── 10. Activity Comments ────────────────────────────────────── */

/*
 * .activity-comments can be a direct flex sibling of .activity-content
 * inside the li. Give it full width so it wraps below, not to the right.
 */
#activity-stream > li .activity-comments,
.activity-list > li .activity-comments {
  flex-basis: 100%;
  width: 100%;
  order: 10;
}

.activity-comments {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bp-border);
}

/* Comment list — force vertical stack, prevent side-by-side */
.activity-comments ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Each comment card — use block + float so content never collapses */
.activity-comments ul li {
  display: block !important;
  overflow: hidden;         /* clear float */
  background: var(--bp-bg) !important;
  border-radius: var(--bp-radius-sm) !important;
  padding: 11px 13px !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  transition: none !important;
  list-style: none !important;
  width: 100% !important;
}
.activity-comments ul li:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Avatar floats left */
.activity-comments ul li .acomment-avatar {
  float: left;
  margin-right: 10px;
  flex-shrink: 0;
}
.activity-comments ul li .acomment-avatar img {
  display: block;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* Content fills remaining width */
.activity-comments ul li .acomment-content {
  overflow: hidden;         /* BFC — content wraps around float */
  min-width: 0;
}
.activity-comments ul li .acomment-meta {
  font-size: 12px;
  color: var(--bp-text-3);
  margin-bottom: 3px;
}
.activity-comments ul li .acomment-content p {
  font-size: 13.5px !important;
  margin: 0 0 4px !important;
  line-height: 1.5;
  color: var(--bp-text);
  word-break: break-word;
}

/* Reply/delete action links inside a comment */
.activity-comments ul li .acomment-options,
.activity-comments ul li .acomment-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.activity-comments ul li .acomment-options a,
.activity-comments ul li .acomment-actions a {
  font-size: 12px !important;
  color: var(--bp-text-3) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.activity-comments ul li .acomment-options a:hover,
.activity-comments ul li .acomment-actions a:hover {
  color: var(--bp-accent) !important;
  background: none !important;
  transform: none !important;
}

/* Comment form */
.activity-comments .ac-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: flex-start;
}
.activity-comments .ac-form textarea {
  border-radius: var(--bp-radius-md) !important;
  font-size: 13.5px !important;
  min-height: 56px !important;
}
.activity-comments .ac-form .ac-submit { flex-shrink: 0; }

/* ── 11. What's New / Post Form ───────────────────────────────── */

/*
 * Layout: 2-column grid
 *   col1 = avatar (46px)  col2 = 1fr
 *   row1 = avatar | BP heading label
 *   row2 = full-width textarea (col1/-1)
 *   row3 = full-width options + submit (col1/-1)
 */
#whats-new-form,
#bp-nouveau-activity-form,
.bp-activity-whats-new-form {
  display: grid !important;
  grid-template-columns: 46px 1fr;
  column-gap: 13px;
  row-gap: 10px;
  align-items: start;
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-md);
  border: 1.5px solid var(--bp-border-strong);
  padding: 18px;
  margin-bottom: 10px;
}

/* Avatar: col1, row1 */
#whats-new-avatar,
#whats-new-form .whats-new-avatar {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
#whats-new-avatar a { display: block; }
#whats-new-avatar img,
#whats-new-avatar a img {
  display: block;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bp-border);
}

/* Content (textarea + options): col1/-1, row2 */
#whats-new-content,
#bp-nouveau-activity-form .form-field {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#whats-new-content textarea,
#bp-nouveau-activity-form textarea {
  width: 100%;
  border: 1.5px solid var(--bp-border-strong) !important;
  border-radius: var(--bp-radius-md) !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  background: var(--bp-bg) !important;
  box-shadow: none !important;
  resize: none;
  min-height: 80px !important;
  color: var(--bp-text);
  transition: border-color var(--bp-transition), box-shadow var(--bp-transition) !important;
}
#whats-new-content textarea:focus,
#bp-nouveau-activity-form textarea:focus {
  border-color: var(--bp-accent) !important;
  box-shadow: 0 0 0 3px var(--bp-accent-light) !important;
  background: var(--bp-surface) !important;
  outline: none !important;
}
/* Placeholder still visible but lighter — heading ::before serves as the main label */
#whats-new-content textarea::placeholder {
  color: var(--bp-text-3);
}

/* Options (media buttons): row inside content */
#whats-new-options,
#bp-nouveau-activity-form .bp-activity-submit-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

/* Submit: col1/-1, row3 — right-aligned */
#whats-new-submit {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Media attachment wrapper divs — inline so they sit in a row */
#whats-new-options > div,
#whats-new-options > span {
  display: inline-flex !important;
  align-items: center;
}

/* Individual media icon buttons */
#whats-new-options a,
#whats-new-options button,
#whats-new-attachments a,
#whats-new-attachments button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--bp-radius-sm);
  background: var(--bp-bg);
  border: 1px solid var(--bp-border-strong);
  color: var(--bp-text-2) !important;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--bp-transition), border-color var(--bp-transition);
  text-decoration: none !important;
  padding: 0;
}
#whats-new-options a:hover,
#whats-new-options button:hover {
  background: var(--bp-accent-light) !important;
  border-color: var(--bp-accent) !important;
  color: var(--bp-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* BP Media / BuddyBoss file-picker popup */
.bp-media-uploader,
.bp-document-uploader,
.bp-video-uploader,
.bb-media-modal,
.bp-media-model-popup,
.bp-uploader-modal {
  background: var(--bp-surface) !important;
  border: 1.5px solid var(--bp-border-strong) !important;
  border-radius: var(--bp-radius-lg) !important;
  box-shadow: var(--bp-shadow-lg) !important;
  overflow: hidden;
}

/* Drop zone */
.bp-media-uploader .dropzone,
.bb-media-modal .dropzone,
.bp-uploader-modal .dropzone {
  border: 2px dashed var(--bp-border-strong) !important;
  border-radius: var(--bp-radius-md) !important;
  background: var(--bp-bg) !important;
  padding: 28px !important;
  text-align: center;
}

/* "Select files" button inside uploader */
.bp-media-uploader .dz-button,
.bp-uploader-modal .select-files-button,
.bb-media-modal .select-files-button {
  background: var(--bp-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
}

/* "Enter a link" input inside uploader */
.bp-media-uploader input[type="text"],
.bb-media-modal input[type="text"] {
  border-radius: var(--bp-radius-sm) !important;
  border: 1.5px solid var(--bp-border-strong) !important;
}

#whats-new-submit input[type="submit"],
#bp-nouveau-activity-form .bp-activity-submit {
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--bp-accent) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,122,255,0.25);
}
#whats-new-submit input[type="submit"]:hover {
  background: var(--bp-accent-hover) !important;
  box-shadow: 0 4px 14px rgba(0,122,255,0.35);
  transform: translateY(-1px);
}

/* ── 12. Members Directory ────────────────────────────────────── */
#members-list,
.members-list,
.bp-list.members-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  padding: 0;
}

#members-list li,
.members-list li {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  padding: 20px 16px;
  text-align: center;
  transition: box-shadow var(--bp-transition), transform var(--bp-transition);
  list-style: none;
  /* reset flex from activity rule above */
  display: block !important;
}
#members-list li:hover,
.members-list li:hover {
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-2px);
}

.members-list .item-avatar,
#members-list .item-avatar {
  margin: 0 auto 12px;
  display: block;
  width: fit-content;
}
.members-list .item-avatar img,
#members-list .item-avatar img {
  display: block;
  width: 68px !important;
  height: 68px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bp-surface);
  box-shadow: 0 0 0 2px var(--bp-border), var(--bp-shadow-sm);
  transition: transform var(--bp-transition), box-shadow var(--bp-transition);
}
#members-list li:hover .item-avatar img,
.members-list li:hover .item-avatar img {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--bp-accent), var(--bp-shadow-md);
}

.members-list .item .item-title,
#members-list .item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-text);
  margin: 0 0 4px;
}
.members-list .item .item-title a { color: var(--bp-text) !important; }
.members-list .last-activity,
#members-list .last-activity {
  font-size: 11.5px;
  color: var(--bp-text-3);
  margin: 0 0 10px;
}
.members-list .action,
#members-list .action {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* ── 13. Groups Directory ─────────────────────────────────────── */
#groups-list,
.groups-list,
.bp-list.groups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  padding: 0;
}

#groups-list li,
.groups-list li {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  overflow: hidden;
  transition: box-shadow var(--bp-transition), transform var(--bp-transition);
  list-style: none;
  display: block !important;  /* reset flex from activity rule */
}
#groups-list li:hover,
.groups-list li:hover {
  box-shadow: var(--bp-shadow-md);
  transform: translateY(-2px);
}

/* Group avatar strip */
.groups-list .item-avatar,
#groups-list .item-avatar {
  position: relative;
  height: 90px;
  background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
  overflow: hidden;
  display: block;
}
.groups-list .item-avatar img,
#groups-list .item-avatar img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Fallback: centered avatar inside strip */
.groups-list .item-avatar a,
#groups-list .item-avatar a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.groups-list .item-avatar a img,
#groups-list .item-avatar a img {
  width: 60px !important;
  height: 60px !important;
  border-radius: var(--bp-radius-md) !important;
  box-shadow: var(--bp-shadow-md);
  object-fit: cover;
}

/* Group info text */
.groups-list .item,
#groups-list .item {
  padding: 14px 16px;
}
.groups-list .item-title,
#groups-list .item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-text);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.groups-list .item-title a { color: var(--bp-text) !important; }
.groups-list .item-desc,
#groups-list .item-desc {
  font-size: 12.5px;
  color: var(--bp-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
}
.groups-list .item-meta,
#groups-list .item-meta {
  font-size: 11.5px;
  color: var(--bp-text-3);
  margin: 0 0 10px;
}
.groups-list .action,
#groups-list .action {
  padding: 0 16px 14px;
}

/* ── 14. Profile Fields ───────────────────────────────────────── */
#profile-group {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  padding: 22px;
  margin-bottom: 10px;
}
#profile-group h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-text-3);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-border);
}

.bp-profile-field,
#profile-group dl.field {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bp-border);
  align-items: start;
}
.bp-profile-field:last-child,
#profile-group dl.field:last-child { border-bottom: none; }
.bp-profile-field dt,
#profile-group dl.field dt { font-size: 13px; font-weight: 600; color: var(--bp-text-2); }
.bp-profile-field dd,
#profile-group dl.field dd { font-size: 14px; color: var(--bp-text); margin: 0; }

/* ── 15. Sidebar ──────────────────────────────────────────────── */
#item-actions,
.bp-secondary { display: flex; flex-direction: column; gap: 10px; }
#item-actions > div,
.bp-secondary .widget {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  padding: 18px;
}
#item-actions > div h2,
.widget h2.widget-title,
.widget .widgettitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-text-3);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bp-border);
}
#item-actions ul li,
.bp-secondary ul li {
  padding: 7px 0;
  border-bottom: 1px solid var(--bp-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--bp-text);
}
#item-actions ul li:last-child,
.bp-secondary ul li:last-child { border-bottom: none; }
#item-actions ul li img,
.bp-secondary ul li img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
}

/* ── 16. Pagination ───────────────────────────────────────────── */
#buddypress .pagination,
.bp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 18px 0;
  font-size: 13px;
  color: var(--bp-text-2);
}
.bp-pagination a,
.bp-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bp-text-2);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  transition: all var(--bp-transition);
}
.bp-pagination a:hover { background: var(--bp-accent-light); color: var(--bp-accent); }
.bp-pagination .current,
.bp-pagination span.current {
  background: var(--bp-accent);
  color: #fff;
  border-color: var(--bp-accent);
}

/* ── 17. Feedback / Alerts ────────────────────────────────────── */
#buddypress .bp-feedback {
  padding: 13px 16px;
  border-radius: var(--bp-radius-md);
  font-size: 14px;
  border: none;
  margin-bottom: 10px;
}
#buddypress .bp-feedback.info    { background: rgba(0,122,255,0.08); color: var(--bp-accent); }
#buddypress .bp-feedback.success { background: rgba(52,199,89,0.10); color: #1a7a39; }
#buddypress .bp-feedback.error   { background: rgba(255,59,48,0.10); color: var(--bp-red); }

/* ── 18. Notifications List ───────────────────────────────────── */
#buddypress #notifications-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
}
#buddypress #notifications-list li {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  padding: 12px 16px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  list-style: none;
  transition: box-shadow var(--bp-transition);
}
#buddypress #notifications-list li.unread {
  border-left: 3px solid var(--bp-accent);
  background: #f0f6ff;
}
#buddypress #notifications-list li:hover {
  box-shadow: var(--bp-shadow-md);
  transform: none;
}

/* ── 19. Directory Search ─────────────────────────────────────── */
#buddypress .dir-search,
#buddypress .directory-search {
  background: var(--bp-surface);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  border: 1px solid var(--bp-border);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
#buddypress .dir-search input[type="search"],
#buddypress .directory-search input[type="text"] {
  flex: 1;
  border-radius: 999px !important;
  padding: 9px 16px !important;
}
#buddypress .dir-search input[type="submit"] {
  padding: 9px 16px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ── 20. Load More ────────────────────────────────────────────── */
#buddypress .load-more,
#buddypress #load-more-activity,
#buddypress a.bp-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-accent) !important;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-sm);
  cursor: pointer;
  transition: all var(--bp-transition);
  text-decoration: none !important;
}
#buddypress .load-more:hover,
#buddypress a.bp-load-more:hover {
  background: var(--bp-accent);
  color: #fff !important;
  border-color: var(--bp-accent);
  box-shadow: 0 4px 14px rgba(0,122,255,0.28);
}

/* ── 21. Reactions ────────────────────────────────────────────── */
.bp-reaction-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--bp-transition);
}
.bp-reaction-count:hover { background: var(--bp-accent-light); border-color: var(--bp-accent); }

/* ── 22. Better Messages — Reskin ────────────────────────────── */

.bp-messages-wrap {
  --bm-font-family: var(--body-font, -apple-system, "Poppins", sans-serif);
  --bm-border-radius: 12px;
  --bm-border-color: 229, 229, 234;
  --bm-border-secondary-color: 242, 242, 247;
  --bm-bg-color: 255, 255, 255;
  --bm-bg-secondary: 242, 242, 247;
  --bm-hover-bg: 242, 242, 247;
  --bm-text-color: 29, 29, 31;
  --bm-button-bg: 0, 122, 255;
  --bm-button-color: 255, 255, 255;
  --bm-message-font-size: 14px;
  --bm-message-line-height: 20px;
  --bm-message-border-radius: 16px;
  --bm-avatar-radius: 50%;
  --bm-date-radius: 999px;
  --left-message-bg-color:   232, 232, 237;
  --left-message-text-color: 29, 29, 31;
  --right-message-bg-color:  0, 122, 255;
  --right-message-text-color: 255, 255, 255;
  --main-bm-border-color: #e5e5ea;
  --bm-sticky-date-bg: rgba(29,29,31,0.70);
  --bm-sticky-date-color: #fff;
  --bm-widgets-button-radius: 999px;
  --bm-border-active: 174, 174, 178;
}

.bp-messages-wrap {
  border-radius: var(--bp-radius-xl) !important;
  box-shadow: var(--bp-shadow-lg) !important;
  border: 1px solid var(--bp-border) !important;
  overflow: hidden;
  font-family: var(--body-font, -apple-system, sans-serif) !important;
}

/* Thread list */
.bp-messages-wrap .bpbm-thread-item {
  border-radius: var(--bp-radius-sm) !important;
  margin: 3px 6px !important;
}
.bp-messages-wrap .bpbm-thread-item:hover { background: var(--bp-bg) !important; }
.bp-messages-wrap .bpbm-thread-item.bpbm-thread-item-active { background: var(--bp-accent-light) !important; }
.bp-messages-wrap .bpbm-thread-item .avatar,
.bp-messages-wrap .bpbm-thread-item img.avatar { border-radius: 50% !important; }
.bp-messages-wrap .bpbm-thread-name { font-weight: 600 !important; color: var(--bp-text) !important; font-size: 14px !important; }
.bp-messages-wrap .bpbm-thread-last-message { font-size: 12.5px !important; color: var(--bp-text-2) !important; }

/* Unread badge */
.bp-messages-wrap .bpbm-thread-unread-count {
  background: var(--bp-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Chat background */
.bp-messages-wrap .bpbm-chat-content { background: #f8f8fa !important; }

/* Message bubbles */
.bp-messages-wrap .bm-message.bm-left .bm-message-content {
  background: rgb(var(--left-message-bg-color)) !important;
  color: rgb(var(--left-message-text-color)) !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.bp-messages-wrap .bm-message.bm-right .bm-message-content {
  background: rgb(var(--right-message-bg-color)) !important;
  color: rgb(var(--right-message-text-color)) !important;
  border-radius: 18px 4px 18px 18px !important;
  box-shadow: 0 1px 8px rgba(0,122,255,0.22) !important;
}
.bp-messages-wrap .bm-message-content {
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 9px 13px !important;
}
.bp-messages-wrap .bm-message-time { font-size: 11px !important; color: var(--bp-text-3) !important; }
.bp-messages-wrap .bm-message .avatar,
.bp-messages-wrap .bm-message img.avatar {
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
}

/* Send form */
.bp-messages-wrap .bpbm-send-form,
.bp-messages-wrap .bm-send-form {
  background: var(--bp-surface) !important;
  border-top: 1px solid var(--bp-border) !important;
  padding: 10px 14px !important;
}
.bp-messages-wrap .bm-message-editor,
.bp-messages-wrap .bpbm-message-input {
  background: var(--bp-bg) !important;
  border: 1.5px solid var(--bp-border-strong) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
}
.bp-messages-wrap .bm-message-editor:focus,
.bp-messages-wrap .bpbm-message-input:focus {
  border-color: var(--bp-accent) !important;
  box-shadow: 0 0 0 3px var(--bp-accent-light) !important;
  background: var(--bp-surface) !important;
}

/* Send button */
.bp-messages-wrap .bm-send-btn,
.bp-messages-wrap .bpbm-send-btn {
  background: var(--bp-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.28) !important;
  transition: all var(--bp-transition) !important;
}
.bp-messages-wrap .bm-send-btn:hover,
.bp-messages-wrap .bpbm-send-btn:hover {
  background: var(--bp-accent-hover) !important;
  transform: scale(1.07) !important;
}

/* Thread header */
.bp-messages-wrap .bm-thread-info-container {
  background: var(--bp-surface) !important;
  border-bottom: 1px solid var(--bp-border) !important;
  padding: 12px 18px !important;
}
.bp-messages-wrap .bm-thread-info-container .name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bp-text) !important;
}
.bp-messages-wrap .bm-thread-info-container .sub-name {
  font-size: 12px !important;
  color: var(--bp-text-3) !important;
}

/* Sticky date pill */
.bp-messages-wrap .bm-sticky-date {
  background: var(--bm-sticky-date-bg) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-size: 11.5px !important;
  backdrop-filter: blur(10px) !important;
}

/* BM scrollbar */
.bp-messages-wrap ::-webkit-scrollbar { width: 4px; height: 4px; }
.bp-messages-wrap ::-webkit-scrollbar-track { background: transparent; }
.bp-messages-wrap ::-webkit-scrollbar-thumb { background: var(--bp-border-strong); border-radius: 999px; }
.bp-messages-wrap ::-webkit-scrollbar-thumb:hover { background: var(--bp-text-3); }

/* BM search */
.bp-messages-wrap .bm-search input,
.bp-messages-wrap .bpbm-search-input {
  border-radius: 999px !important;
  border: 1.5px solid var(--bp-border-strong) !important;
  padding: 7px 14px !important;
  background: var(--bp-bg) !important;
}

/* ── 23. Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  #buddypress, .bp-wrap { padding: 0 10px; }

  #item-header { padding: 18px; }
  #item-header-avatar img { width: 68px !important; height: 68px !important; }
  #item-header-content h2 { font-size: 17px; }

  #members-list,
  .members-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #groups-list,
  .groups-list  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  #activity-stream > li,
  .activity-list > li { padding: 14px 14px; gap: 10px; }

  #item-nav ul,
  #subnav ul { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  #members-list, .members-list { grid-template-columns: 1fr 1fr; }
  #groups-list, .groups-list   { grid-template-columns: 1fr; }
}

/* ── 24. Stories (WP Story Premium plugin) ────────────────────── */

/* Horizontal scroll row */
.wpstory-item-circles {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 10px 4px 14px !important;
  margin-bottom: 6px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wpstory-item-circles::-webkit-scrollbar { display: none; }

/* Each story bubble */
.wpstory-item-circles .wpstory-feed-item-ins,
.wpstory-item-circles .wpstory-appended {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: 90px !important;
  cursor: pointer;
  text-decoration: none !important;
}

/* Circle image container — keep the plugin's border-radius and sizing */
.wpstory-item-circles .wpstory-feed-item-ins .wpstory-circle-image,
.wpstory-item-circles .wpstory-feed-item-ins .wpstory-feed-canvas {
  display: block !important;
  width: 90px !important;
  height: 90px !important;
  min-height: 90px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Fix: our global `#buddypress img { height: auto }` flattens story images */
.wpstory-item-circles img,
.wpstory-shortcode-wrapper img {
  height: auto;          /* reset first */
}
.wpstory-item-circles .wpstory-circle-image img,
.wpstory-item-circles .wpstory-feed-canvas img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  min-height: calc(100% - 10px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  max-width: unset !important;
}

/* Canvas inside circle */
.wpstory-item-circles .wpstory-circle-image canvas,
.wpstory-item-circles .wpstory-feed-canvas canvas {
  border-radius: 50% !important;
}

/* Story title label */
.wpstory-item-circles .wpstory-circle-title {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--bp-text-2) !important;
  text-align: center !important;
  width: 90px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 6px !important;
  display: block !important;
}

/* ── 25. Global scrollbar ─────────────────────────────────────── */
#buddypress ::-webkit-scrollbar { width: 5px; height: 5px; }
#buddypress ::-webkit-scrollbar-track { background: transparent; }
#buddypress ::-webkit-scrollbar-thumb { background: var(--bp-border-strong); border-radius: 999px; }

/* ── 26. Entrance animation ───────────────────────────────────── */
@keyframes bp-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#activity-stream > li,
.activity-list > li { animation: bp-fadein 0.25s ease both; }

@media (prefers-reduced-motion: reduce) {
  #activity-stream > li,
  .activity-list > li { animation: none; }
}