/* ═══════════════════════════════════════════════════════
   FCFVA BuddyPress Mobile Fix v1.0
   Fixes: activity layout, comment threading, profile duplication,
          floating buttons, subnav, responsive sizing
   ═══════════════════════════════════════════════════════ */

/* ── 1. FLOATING BUTTONS — ABOVE BOTTOM NAV ── */
.dd-floating-btn {
  position: fixed;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dd-floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.dd-back-to-top {
  bottom: 80px;
  right: 16px;
  background: var(--dd-bg-card, #1a1a2e);
  color: var(--dd-text-primary, #f0f0f0);
  border: 1px solid var(--dd-border-color, rgba(0, 212, 255, 0.1));
}

.dd-messenger-btn {
  bottom: 140px;
  right: 16px;
  background: var(--dd-primary, #00bcd4);
  color: #fff;
}

/* On mobile, push above bottom tab bar */
@media (max-width: 767px) {
  .dd-back-to-top {
    bottom: 80px; /* 60px bar + 20px spacing */
  }
  .dd-messenger-btn {
    bottom: 140px;
  }
}

.dd-messenger-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e94560;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Messenger Panel */
/* dd-messenger-panel display controlled by JS */ .dd-messenger-panel-DISABLED {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 340px;
  max-height: 480px;
  background: var(--dd-bg-card, #1a1a2e);
  border: 1px solid var(--dd-border-color, rgba(0, 212, 255, 0.1));
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 767px) {
  /* dd-messenger-panel display controlled by JS */ .dd-messenger-panel-DISABLED {
    bottom: 76px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 60vh;
  }
}

.dd-messenger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dd-border-color, rgba(0, 212, 255, 0.1));
}

.dd-messenger-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dd-text-primary, #f0f0f0);
}

.dd-messenger-actions {
  display: flex;
  gap: 4px;
}

.dd-messenger-action {
  background: none;
  border: none;
  color: var(--dd-text-muted, #6b7280);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 1rem;
}

.dd-messenger-action:hover {
  background: var(--dd-bg-input, #222);
  color: var(--dd-text-primary, #f0f0f0);
}

.dd-messenger-search input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--dd-border-color, rgba(0, 212, 255, 0.1));
  background: transparent;
  color: var(--dd-text-primary, #f0f0f0);
  font-size: 0.85rem;
}

.dd-messenger-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}


/* ── 2. HIDE DEFAULT BP COVER IMAGE (we use dd_profile_header instead) ── */
body #buddypress #header-cover-image,
body #buddypress .bp-profile-cover-image,
body #buddypress #cover-image-container,
body #buddypress .cover-image-block,
body #buddypress #item-header-cover-image {
  display: none !important;
}

/* Also hide default BP profile header since dd_profile_header replaces it */
body #buddypress #item-header-content {
  display: none !important;
}


/* ── 3. ACTIVITY CARDS — MOBILE RESPONSIVE ── */
@media (max-width: 767px) {
  body #buddypress ul.activity-list li.activity {
    border-radius: 0 !important;
    margin-bottom: 8px !important;
    border-left: none !important;
    border-right: none !important;
  }

  body #buddypress .activity-header {
    padding: 12px 12px 0 12px !important;
    gap: 10px !important;
  }

  body #buddypress .activity-avatar img.avatar {
    width: 40px !important;
    height: 40px !important;
  }

  body #buddypress .activity-header p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }

  body #buddypress .activity-inner,
  body #buddypress .activity-content {
    padding: 10px 12px !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  body #buddypress .activity-meta {
    padding: 10px 12px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  body #buddypress .activity-meta a {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }

  /* Make activity content fill width */
  body #buddypress #activity-stream {
    padding: 0 !important;
    margin: 0 !important;
  }

  body #buddypress .activity-list {
    padding: 0 !important;
  }
}

/* Activity post form — mobile */
@media (max-width: 767px) {
  body #buddypress form#whats-new-form {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  body #buddypress #whats-new-textarea textarea,
  body #buddypress textarea#whats-new {
    min-height: 80px !important;
    font-size: 0.9rem !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }

  body #buddypress #whats-new-submit {
    padding: 8px 12px !important;
  }

  /* Media buttons row */
  .dd-media-buttons {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .dd-media-buttons button {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
  }
}


/* ── 4. COMMENT THREADING — PREVENT INFINITE SHRINK ── */
body #buddypress .activity-comments {
  background: var(--dd-bg-secondary, #111122) !important;
  border-top: 1px solid var(--dd-border-color) !important;
  padding: 0 !important;
}

body #buddypress .activity-comments > ul {
  margin: 0 !important;
  padding: 12px !important;
  list-style: none !important;
}

body #buddypress .activity-comments ul li {
  display: flex !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  min-width: 0 !important; /* CRITICAL: prevents flex shrink */
}

body #buddypress .activity-comments ul li:last-child {
  border-bottom: none !important;
}

/* Nested replies — indent but STOP shrinking */
body #buddypress .activity-comments ul ul {
  margin: 0 !important;
  padding: 0 0 0 16px !important; /* Fixed indent */
  border-left: 2px solid rgba(0, 212, 255, 0.1);
}

/* Cap nesting depth visually at 3 levels */
body #buddypress .activity-comments ul ul ul {
  padding-left: 8px !important;
}

body #buddypress .activity-comments ul ul ul ul {
  padding-left: 4px !important;
}

body #buddypress .activity-comments ul ul ul ul ul {
  padding-left: 0 !important;
  border-left: none !important;
}

/* Comment content — never overflow */
body #buddypress .activity-comments .acomment-content {
  color: var(--dd-text-secondary, #c8c8d8) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
  flex: 1 !important;
}

body #buddypress .activity-comments .acomment-meta {
  font-size: 0.78rem !important;
  min-width: 0 !important;
}

body #buddypress .activity-comments .acomment-meta a {
  font-weight: 600 !important;
  color: var(--dd-text-primary, #f0f0f0) !important;
}

body #buddypress .activity-comments .acomment-avatar img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Comment reply form */
body #buddypress .ac-form {
  padding: 10px 12px !important;
  background: var(--dd-bg-input, #1a1a2e) !important;
  border-radius: 10px !important;
  margin-top: 8px !important;
}

body #buddypress .ac-form textarea {
  min-height: 60px !important;
  font-size: 0.85rem !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

@media (max-width: 767px) {
  body #buddypress .activity-comments > ul {
    padding: 8px !important;
  }

  body #buddypress .activity-comments ul ul {
    padding-left: 12px !important;
  }

  body #buddypress .activity-comments ul li {
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  body #buddypress .activity-comments .acomment-avatar img {
    width: 28px !important;
    height: 28px !important;
  }

  body #buddypress .activity-comments .acomment-content {
    font-size: 0.82rem !important;
  }
}


/* ── 5. PROFILE HEADER — MOBILE RESPONSIVE ── */
@media (max-width: 767px) {
  .dd-profile-header {
    margin-bottom: 16px !important;
    border-radius: 0 !important;
  }

  .dd-cover-image {
    height: 140px !important;
  }

  .dd-profile-info {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 16px 16px !important;
    margin-top: -40px !important;
    gap: 10px !important;
  }

  .dd-avatar-wrapper img {
    width: 80px !important;
    height: 80px !important;
  }

  .dd-user-details h2 {
    font-size: 1.1rem !important;
  }

  .dd-user-handle {
    font-size: 0.85rem !important;
  }

  .dd-profile-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .dd-profile-actions a,
  .dd-profile-actions button {
    font-size: 0.8rem !important;
    padding: 8px 16px !important;
  }
}


/* ── 6. PROFILE SUBNAV — HORIZONTAL SCROLL ON MOBILE ── */
@media (max-width: 767px) {
  body #buddypress .item-list-tabs,
  body #buddypress #subnav,
  body #buddypress #object-nav {
    margin-bottom: 12px !important;
    overflow: visible !important;
  }

  body #buddypress .item-list-tabs ul,
  body #buddypress #object-nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    scroll-snap-type: x mandatory !important;
  }

  body #buddypress .item-list-tabs ul::-webkit-scrollbar,
  body #buddypress #object-nav ul::-webkit-scrollbar {
    display: none !important;
  }

  body #buddypress .item-list-tabs ul li,
  body #buddypress #object-nav ul li {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  body #buddypress .item-list-tabs ul li a,
  body #buddypress #object-nav ul li a {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
  }

  /* Tab count badges */
  body #buddypress .item-list-tabs ul li a span,
  body #buddypress #object-nav ul li a .count {
    font-size: 0.65rem !important;
    background: var(--dd-primary, #00bcd4) !important;
    color: #000 !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    margin-left: 4px !important;
  }
}


/* ── 7. MEMBERS DIRECTORY — MOBILE GRID ── */
@media (max-width: 767px) {
  body #buddypress #members-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  body #buddypress #members-list li {
    background: var(--dd-bg-card, #1a1a2e) !important;
    border: 1px solid var(--dd-border-color) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body #buddypress #members-list li .item-avatar img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
  }

  body #buddypress #members-list li .item-title {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
  }

  body #buddypress #members-list li .item-meta {
    font-size: 0.72rem !important;
    color: var(--dd-text-muted) !important;
  }

  body #buddypress #members-list li .action {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }

  body #buddypress #members-list li .action a {
    font-size: 0.72rem !important;
    padding: 6px !important;
    text-align: center !important;
    border-radius: 8px !important;
  }
}


/* ── 8. GROUPS DIRECTORY — MOBILE ── */
@media (max-width: 767px) {
  body #buddypress #groups-list li {
    padding: 12px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }

  body #buddypress #groups-list li .item-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  body #buddypress #groups-list li .item-title {
    font-size: 0.9rem !important;
  }

  body #buddypress #groups-list li .item-desc {
    font-size: 0.8rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}


/* ── 9. STORIES BAR — MOBILE ── */
.dd-stories-bar {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  margin-bottom: 12px;
  scrollbar-width: none;
}

.dd-stories-bar::-webkit-scrollbar {
  display: none;
}

.dd-story-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.dd-story-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--dd-primary, #00bcd4);
  padding: 2px;
  object-fit: cover;
}

.dd-story-avatar.viewed {
  border-color: var(--dd-border-color, rgba(0, 212, 255, 0.1));
}

.dd-story-name {
  font-size: 0.68rem;
  color: var(--dd-text-muted, #6b7280);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 767px) {
  .dd-story-avatar {
    width: 52px;
    height: 52px;
  }
}


/* ── 10. GENERAL MOBILE OVERRIDES ── */
@media (max-width: 767px) {
  /* Make BP container full width */
  body #buddypress {
    padding: 8px 0 !important;
    max-width: 100% !important;
  }

  body #buddypress .padder,
  body #buddypress #item-body {
    padding: 0 !important;
  }

  /* Search bar mobile */
  body #buddypress .dir-search {
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
  }

  body #buddypress .dir-search input {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
  }

  /* Pagination */
  body #buddypress .pagination-links {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 12px !important;
  }

  body #buddypress .pagination-links a,
  body #buddypress .pagination-links span {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
  }

  /* Notification list */
  body #buddypress #notifications-list {
    padding: 0 !important;
  }

  body #buddypress #notifications-list li {
    padding: 12px !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid var(--dd-border-color) !important;
  }

  /* Settings forms */
  body #buddypress #settings-form {
    padding: 12px !important;
  }

  body #buddypress #settings-form label {
    font-size: 0.85rem !important;
  }

  /* Messages */
  body #buddypress #message-threads {
    padding: 0 !important;
  }

  body #buddypress #message-threads li {
    padding: 12px !important;
    border-bottom: 1px solid var(--dd-border-color) !important;
  }

  body #buddypress #message-threads li .thread-from img {
    width: 36px !important;
    height: 36px !important;
  }

  body #buddypress .bp-messages-content {
    padding: 12px !important;
  }

  /* Friends list */
  body #buddypress #friend-list li {
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
}


/* ── 11. BOTTOM BAR CONTENT CLEARANCE ── */
@media (max-width: 767px) {
  body.fcfva-has-bottombar #buddypress {
    padding-bottom: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   12. LONG USERNAME FIX — sitewide
   ═══════════════════════════════════════════════════════ */
body #buddypress .item-title,
body #buddypress .item-title a,
body #buddypress .acomment-meta a,
body #buddypress .activity-header p a,
.dd-profile-header .dd-user-details h2,
.dd-popular-member-name,
.dd-trending-post-meta strong {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Truncate usernames in compact views */
body #buddypress #members-list li .item-title a,
body #buddypress #friend-list li .item-title a,
body #buddypress .members-list li .item-title a {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}


/* ═══════════════════════════════════════════════════════
   13. MEMBERS & FRIENDS — mobile overflow fix
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Prevent horizontal overflow on the page */
  body #buddypress,
  body .site-content,
  body #content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Members grid — proper containment */
  body #buddypress #members-list,
  body #buddypress .members-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body #buddypress #members-list li,
  body #buddypress .members-list li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  /* Username truncation in member cards */
  body #buddypress #members-list li .item-title,
  body #buddypress .members-list li .item-title {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body #buddypress #members-list li .item-title a,
  body #buddypress .members-list li .item-title a {
    font-size: 0.75rem !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Action buttons — stack and fit */
  body #buddypress #members-list li .action,
  body #buddypress .members-list li .action {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
  }

  body #buddypress #members-list li .action a,
  body #buddypress .members-list li .action a {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
    text-align: center !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Friends list — same treatment */
  body #buddypress #friend-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    list-style: none !important;
  }

  body #buddypress #friend-list li {
    background: var(--social-card, #0f0f23) !important;
    border: 1px solid var(--social-border) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body #buddypress #friend-list li .item-avatar img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
  }

  body #buddypress #friend-list li .item-title {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body #buddypress #friend-list li .item-title a {
    font-size: 0.75rem !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #buddypress #friend-list li .item-meta {
    font-size: 0.7rem !important;
    color: var(--social-text-dim) !important;
  }

  body #buddypress #friend-list li .action {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
    position: static !important;
  }

  body #buddypress #friend-list li .action a {
    font-size: 0.68rem !important;
    padding: 5px 8px !important;
    text-align: center !important;
    border-radius: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   14. EXPLORE PAGE — full mobile overhaul
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Full-width explore wrapper */
  .dd-explore-wrap {
    padding: 0 8px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Single column layout — hide sidebar on mobile */
  .dd-explore-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .dd-explore-sidebar {
    display: none !important;
  }

  /* Explore tabs — horizontal scroll */
  .dd-explore-tabs {
    gap: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }

  .dd-explore-tab {
    font-size: 0.78rem !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
  }

  /* Page header — stack on mobile */
  .dd-explore-wrap > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 4px !important;
  }

  .dd-explore-wrap > div:first-child h1 {
    font-size: 1.3rem !important;
  }

  /* Media grid — 3 columns on mobile, full width */
  .dd-media-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  .dd-media-grid-item {
    aspect-ratio: 1 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }

  .dd-media-grid-item img,
  .dd-media-grid-item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Trending posts — full width cards */
  .dd-trending-post-card {
    padding: 10px !important;
    gap: 10px !important;
  }

  .dd-trending-post-avatar {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  .dd-trending-post-body {
    min-width: 0 !important;
  }

  .dd-trending-post-text {
    font-size: 0.85rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
  }

  .dd-trending-post-media img {
    max-height: 200px !important;
    border-radius: 8px !important;
  }

  /* People tab — 2 column grid, contained */
  #tab-people > .dd-explore-section > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* People cards — prevent overflow */
  #tab-people a[style*="background"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #tab-people a[style*="background"] > div:last-child > div:first-child {
    font-size: 0.82rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Groups tab — single column */
  #tab-groups > .dd-explore-section > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Hashtags tab — tighter spacing */
  #tab-hashtags a[style*="display:flex"] {
    padding: 10px 0 !important;
  }

  /* Popular member follow buttons — always visible, compact */
  .dd-popular-member-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .dd-popular-member-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100px !important;
  }

  .dd-popular-member-follow {
    font-size: 0.7rem !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

   
  /* ═══════════════════════════════════════════════════════
   FCFVA BuddyPress Mobile Fix v1.1
   v1.1 additions: Explore people/groups overflow fix,
   media grid click fix, sidebar follow button fix
   ═══════════════════════════════════════════════════════ */

/* ── 15. EXPLORE — People cards overflow fix ── */
@media (max-width: 767px) {
  /* People tab — force 2 columns with proper containment */
  #tab-people .dd-explore-section > div:last-child,
  #tab-people div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* People cards — prevent right-side cutoff */
  #tab-people a[style*="background"],
  #tab-people div[style*="grid"] > a {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
  }

  /* People card avatar */
  #tab-people a img[style*="72px"],
  #tab-people a img[style*="border-radius:50%"] {
    width: 56px !important;
    height: 56px !important;
  }

  /* People card display name — truncate */
  #tab-people a > div:last-child > div:first-child,
  #tab-people a div[style*="font-weight:700"] {
    font-size: 0.78rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* People card post count */
  #tab-people a > div:last-child > div:last-child,
  #tab-people a div[style*="font-size:0.75rem"] {
    font-size: 0.7rem !important;
  }

  /* Groups tab — single column, no cutoff */
  #tab-groups .dd-explore-section > div:last-child,
  #tab-groups div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Group cards — prevent overflow */
  #tab-groups a[style*="background"],
  #tab-groups div[style*="grid"] > a {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  /* Group cover image */
  #tab-groups a > div:first-child[style*="height:100px"] {
    height: 80px !important;
  }

  /* Group name text — prevent wrap */
  #tab-groups a div[style*="font-weight:700"],
  #tab-groups a div[style*="font-size:0.95rem"] {
    font-size: 0.88rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Group description */
  #tab-groups a div[style*="-webkit-line-clamp:2"] {
    font-size: 0.78rem !important;
    -webkit-line-clamp: 1 !important;
  }
}


/* ── 16. EXPLORE — Media grid touch targets ── */
.dd-media-grid-item {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(79,142,247,0.2);
  position: relative;
}

/* Ensure media grid items are clickable on mobile */
.dd-media-grid-item * {
  pointer-events: none;
}

/* Overlay — only show on hover/desktop */
.dd-media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.dd-media-grid-item:hover .dd-media-overlay {
  opacity: 1;
}

@media (max-width: 767px) {
  /* On mobile, always show overlay so users know items are tappable */
  .dd-media-overlay {
    opacity: 1;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    padding: 4px 6px;
  }

  .dd-media-overlay-info {
    font-size: 0.65rem !important;
  }
}


/* ── 17. SIDEBAR — "Who to Follow" button overflow fix ── */
.dd-popular-member-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.dd-popular-member-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

.dd-popular-member-name {
  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--social-text-bright, #f0f0fa) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.dd-popular-member-meta {
  font-size: 0.72rem !important;
  color: var(--social-text-dim, #6a6a88) !important;
}

.dd-popular-member-follow {
  flex-shrink: 0 !important;
  padding: 6px 14px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--social-accent, #4f8ef7) !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: var(--social-accent, #4f8ef7) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}

.dd-popular-member-follow:hover {
  background: var(--social-accent, #4f8ef7) !important;
  color: #fff !important;
}

.dd-popular-member-follow.following {
  background: rgba(79,142,247,0.1) !important;
  color: var(--social-accent, #4f8ef7) !important;
}


/* ── 18. SIDEBAR — Hidden on mobile (verify) ── */
@media (max-width: 767px) {
  .dd-explore-sidebar {
    display: none !important;
  }
}


/* ── 19. EXPLORE PAGE — Header responsive fix ── */
@media (max-width: 767px) {
  .dd-explore-wrap > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 4px !important;
  }

  .dd-explore-wrap > div:first-child h1 {
    font-size: 1.2rem !important;
  }

  .dd-explore-wrap > div:first-child p {
    font-size: 0.78rem !important;
  }

  .dd-explore-wrap > div:first-child > div:last-child {
    display: flex !important;
    gap: 6px !important;
  }

  .dd-explore-wrap > div:first-child > div:last-child a {
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
  }
}