/* /connect/views/views.css — Bible Connect member views
 * Shared styles for Dashboard, Feed, and Directory.
 * Relies on bcc-* design tokens from connect-tokens.css.
 * ─────────────────────────────────────────────────────────── */

/* ================================================================
   SHARED VIEW LAYOUT
================================================================ */

.bcc-view-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 var(--bcc-s10);
}

.bcc-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bcc-s4);
  margin-bottom: var(--bcc-s6);
  flex-wrap: wrap;
}

.bcc-view-title {
  font-size: var(--bcc-t-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bcc-ink);
  margin: 0 0 var(--bcc-s1) 0;
}

.bcc-view-sub {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  margin: 0;
}

/* ================================================================
   SECTION HEADING ROW  (title + see-all link)
================================================================ */

.bcc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--bcc-s4);
}

.bcc-section-title {
  font-size: var(--bcc-t-md);
  font-weight: 600;
  color: var(--bcc-ink);
  margin: 0;
}

/* ================================================================
   EMPTY STATE
================================================================ */

.bcc-empty {
  text-align: center;
  padding: var(--bcc-s12) var(--bcc-s4);
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}

.bcc-empty-sm {
  padding: var(--bcc-s6) var(--bcc-s4);
  text-align: center;
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}

.bcc-empty p { margin: 0 0 var(--bcc-s4); }

/* ================================================================
   BADGE  (category label in prayer card)
================================================================ */

/* ================================================================
   GRID — 4-col stat cards
================================================================ */

.bcc-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bcc-s4);
}

/* ================================================================
   SEARCH BAR
================================================================ */

.bcc-searchbar {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding: 0 var(--bcc-s3);
  height: 38px;
  min-width: 220px;
  transition: border-color var(--bcc-dur-2) var(--bcc-ease);
}

.bcc-searchbar:focus-within {
  border-color: var(--bcc-primary);
  box-shadow: 0 0 0 2px var(--bcc-primary-tint);
}

.bcc-searchbar__icon {
  color: var(--bcc-ink-3);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}

.bcc-searchbar input {
  background: none;
  border: none;
  outline: none;
  color: var(--bcc-ink);
  font-size: var(--bcc-t-sm);
  font-family: var(--bcc-font);
  width: 100%;
  min-width: 0;
}

.bcc-searchbar input::placeholder {
  color: var(--bcc-ink-3);
}

/* ================================================================
   FILTER BAR + PILLS
================================================================ */

.bcc-filter-bar {
  display: flex;
  gap: var(--bcc-s2);
  padding: var(--bcc-s3) 0;
  margin-bottom: var(--bcc-s4);
  flex-wrap: wrap;
}

.bcc-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border);
  background: transparent;
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease);
}

.bcc-pill:hover {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink);
  border-color: var(--bcc-border-soft);
}

.bcc-pill.active {
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  border-color: var(--bcc-primary);
}

/* ================================================================
   DASHBOARD — QUICK ACTIONS
================================================================ */

.dash-quick-actions {
  display: flex;
  gap: var(--bcc-s3);
  margin-bottom: var(--bcc-s6);
  flex-wrap: wrap;
}

.dash-quick-action {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--bcc-s4);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border);
  background: var(--bcc-surface-1);
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-sm);
  font-weight: 500;
  text-decoration: none;
  gap: var(--bcc-s2);
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease),
              transform var(--bcc-dur-1) var(--bcc-ease);
}

.dash-quick-action:hover {
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  border-color: var(--bcc-primary);
  transform: translateY(-1px);
}

/* ================================================================
   DASHBOARD — STAT CARDS
================================================================ */

.dash-stats {
  margin-bottom: var(--bcc-s8);
}

.dash-stat-card {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s5);
  min-height:    90px;
  display:       flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:    none;
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-2) var(--bcc-ease);
}

.dash-stat-card:hover {
  border-color: var(--bcc-border-soft);
  box-shadow:   var(--bcc-shadow-1);
}

.dash-stat-label {
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcc-ink-3);
  margin-bottom: var(--bcc-s2);
}

.dash-stat-value {
  font-size: var(--bcc-t-xl);
  font-weight: 700;
  color: var(--bcc-ink);
  line-height: 1.15;
}

.dash-stat-sub {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin-top: 2px;
}

/* ================================================================
   DASHBOARD — TWO-COLUMN LAYOUT
================================================================ */

.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bcc-s8);
}

/* ================================================================
   DASHBOARD — EVENT CARDS
================================================================ */

.dash-event-card {
  display: flex;
  align-items: flex-start;
  gap: var(--bcc-s3);
  padding: var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border);
}

.dash-event-card:last-child { border-bottom: none; }

.dash-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  background: var(--bcc-primary-soft);
  border-radius: var(--bcc-r-md);
  flex-shrink: 0;
}

.dash-event-month {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bcc-primary);
  line-height: 1;
}

.dash-event-day {
  font-size: var(--bcc-t-lg);
  font-weight: 700;
  color: var(--bcc-primary);
  line-height: 1.1;
}

.dash-event-info {
  flex: 1;
  min-width: 0;
}

.dash-event-title {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-event-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin-top: 2px;
}

/* ================================================================
   DASHBOARD — PRAYER CARDS
================================================================ */

.dash-prayer-card {
  display: flex;
  align-items: flex-start;
  gap: var(--bcc-s3);
  padding: var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border);
}

.dash-prayer-card:last-child { border-bottom: none; }

.dash-prayer-avatar { flex-shrink: 0; }

.dash-prayer-body {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink);
  line-height: 1.5;
}

.dash-prayer-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin-top: var(--bcc-s1);
  display: flex;
  align-items: center;
  gap: var(--bcc-s1);
  flex-wrap: wrap;
}

/* ================================================================
   DASHBOARD — ATTENDANCE BANNER
================================================================ */

.dash-attendance-banner {
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
  background: var(--bcc-primary-soft);
  border: 1px solid var(--bcc-primary);
  border-radius: var(--bcc-r-lg);
  padding: var(--bcc-s3) var(--bcc-s5);
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-primary);
  animation: bcc-pulse 2.4s ease-in-out infinite;
}

@keyframes bcc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bcc-primary-rgb), .25); }
  50%       { box-shadow: 0 0 0 6px rgba(var(--bcc-primary-rgb), 0); }
}

/* ================================================================
   FEED — FEED ITEMS
================================================================ */

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feed-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s4);
  padding:       var(--bcc-s4);
  border-radius: var(--bcc-r-md);
  transition:    background var(--bcc-dur-1) var(--bcc-ease);
}

.feed-item:hover { background: var(--bcc-surface-1); }

.feed-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bcc-r-md);
  font-size: .9rem;
  flex-shrink: 0;
  font-style: normal;
}

/* Icon colour variants */
.feed-icon-prayer   { background: var(--bcc-accent-soft);   color: var(--bcc-accent);   }
.feed-icon-event    { background: var(--bcc-primary-soft);  color: var(--bcc-primary);  }
.feed-icon-member   { background: var(--bcc-info-soft);     color: var(--bcc-info);     }
.feed-icon-giving   { background: var(--bcc-success-soft);  color: var(--bcc-success);  }
.feed-icon-group    { background: var(--bcc-warning-soft);  color: var(--bcc-warning);  }
.feed-icon-announce { background: var(--bcc-danger-soft);   color: var(--bcc-danger);   }
.feed-icon-default  { background: var(--bcc-surface-3);     color: var(--bcc-ink-3);    }

.feed-item-body { flex: 1; min-width: 0; }

.feed-item-text {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink);
  line-height: 1.5;
}

.feed-item-time {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin-top: 2px;
}

/* Skeleton icon placeholder */
.feed-item-icon-skel {
  width: 36px;
  height: 36px;
  border-radius: var(--bcc-r-md);
  flex-shrink: 0;
}

.feed-load-more {
  padding: var(--bcc-s4) var(--bcc-s4);
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s2);
}

/* ================================================================
   DIRECTORY — GRID + CARDS
================================================================ */

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--bcc-s4);
}

.dir-card {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s5) var(--bcc-s4);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  gap:           var(--bcc-s2);
  box-shadow:    none;
  transition:    border-color  var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow    var(--bcc-dur-2) var(--bcc-ease),
                 transform     var(--bcc-dur-2) var(--bcc-ease);
}

.dir-card:hover {
  border-color: var(--bcc-border-soft);
  box-shadow:   var(--bcc-shadow-1);
  transform:    translateY(-2px);
}

.dir-card-name {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink);
  line-height: 1.3;
  word-break: break-word;
}

.dir-card-role {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  min-height: 16px;
}

.dir-card-actions {
  margin-top: var(--bcc-s2);
}

/* Skeleton card */
.dir-card-avatar-skel {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

/* ================================================================
   SKELETON UTILITIES
   (augments any existing bcc-skeleton definitions in shell.css)
================================================================ */

.bcc-skeleton {
  background: linear-gradient(
    90deg,
    var(--bcc-surface-3) 25%,
    var(--bcc-surface-4) 50%,
    var(--bcc-surface-3) 75%
  );
  background-size: 200% 100%;
  animation: bcc-shimmer 1.4s ease infinite;
  border-radius: var(--bcc-r-sm);
}

@keyframes bcc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.bcc-skeleton-text  { height: 14px; }
.bcc-skeleton-w100  { width: 100%; }
.bcc-skeleton-w75   { width: 75%; }
.bcc-skeleton-w50   { width: 50%; }

/* ================================================================
   RESPONSIVE BREAKPOINTS
================================================================ */

/* Tablet: 4-col stat grid → 2-col */
@media (max-width: 860px) {
  .bcc-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-two-col {
    grid-template-columns: 1fr;
    gap: var(--bcc-s6);
  }
}

/* Mobile: stack everything, tighten grid */
@media (max-width: 560px) {
  .bcc-view-page {
    padding-bottom: var(--bcc-s6);
  }

  .bcc-view-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .bcc-searchbar {
    width: 100%;
    min-width: unset;
  }

  .bcc-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bcc-s3);
  }

  .dash-quick-actions {
    gap: var(--bcc-s2);
  }

  .dash-attendance-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bcc-s2);
  }

  .dir-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--bcc-s3);
  }
}

/* ================================================================
   PROFILE VIEW
================================================================ */
.prof-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

.prof-card {
  padding: 20px;
}

.prof-card-danger {
  border-color: var(--bcc-border, #e5e7eb);
}

.prof-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bcc-muted, #57606a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

.prof-back-btn {
  margin-bottom: 4px;
}

/* Avatar */
.prof-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.prof-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bcc-border, #e5e7eb);
  border: 2px solid var(--bcc-border, #e5e7eb);
}

.prof-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prof-upload-label {
  cursor: pointer;
  display: inline-block;
}

.prof-file-input {
  display: none;
}

.prof-upload-status {
  font-size: 12px;
  color: var(--bcc-muted, #57606a);
}

/* Church info */
.prof-church-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

/* Sign out */
.prof-signout-btn {
  color: var(--bcc-danger, #dc2626);
  border-color: currentColor;
}

.prof-signout-btn:hover {
  background: var(--bcc-danger-bg, #fef2f2);
}

/* ═══════════════════════════════════════════════════════════════
   GIVING VIEW — Visual Polish
   ═══════════════════════════════════════════════════════════════ */

/* Live amount display */
.gv-amount-display {
  font-size: var(--bcc-t-4xl);
  font-weight: 700;
  color: var(--bcc-ink);
  text-align: center;
  letter-spacing: -.02em;
  padding: var(--bcc-s4) 0 var(--bcc-s3);
  line-height: 1;
}

/* Amount input wrapper */
.gv-amount-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.gv-currency-symbol {
  position: absolute;
  left: var(--bcc-s4);
  font-size: var(--bcc-t-xl);
  font-weight: 600;
  color: var(--bcc-ink-2);
  pointer-events: none;
  z-index: 1;
}

.gv-amount-input {
  width: 100%;
  height: 52px !important;
  font-size: var(--bcc-t-xl) !important;
  font-weight: 600 !important;
  padding-left: calc(var(--bcc-s4) + 16px + var(--bcc-s2)) !important;
  border-radius: var(--bcc-r-md) !important;
  text-align: left;
}

/* Quick-amount tiles */
.gv-quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bcc-s2);
  margin-top: var(--bcc-s3);
}

.gv-quick-btn {
  height: 44px;
  border-radius: var(--bcc-r-md);
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease);
}

.gv-quick-btn:hover {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink);
}

.gv-quick-btn.active {
  background: var(--bcc-primary);
  color: #fff;
  border-color: var(--bcc-primary);
}

/* Fund selection chips */
.gv-fund-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
}

.gv-fund-chip {
  height: 36px;
  padding: 0 var(--bcc-s4);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border-strong);
  background: transparent;
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease);
}

.gv-fund-chip:hover:not(.active) {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink);
}

.gv-fund-chip.active {
  background: var(--bcc-primary);
  color: #fff;
  border-color: var(--bcc-primary);
}

/* Frequency segmented control */
.gv-freq-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  padding: 3px;
  gap: 3px;
}

.gv-freq-btn {
  width: 100%;
  height: 34px;
  border-radius: calc(var(--bcc-r-md) - 3px);
  border: none;
  background: transparent;
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease);
}

.gv-freq-btn:hover:not(.active) {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink);
}

.gv-freq-btn.active {
  background: var(--bcc-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* Give card spacing */
.giving-give-card {
  padding: var(--bcc-s8) !important;
}

.giving-give-card .bcc-field {
  margin-bottom: var(--bcc-s6);
}

.giving-card-title {
  font-size: var(--bcc-t-xl);
  font-weight: 700;
  color: var(--bcc-ink);
  margin: 0 0 var(--bcc-s6);
}

/* Give Now button */
.gv-give-btn {
  width: 100% !important;
  justify-content: center !important;
  height: 52px !important;
  font-size: var(--bcc-t-md) !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--bcc-primary), var(--bcc-accent)) !important;
  border: none !important;
  border-radius: var(--bcc-r-md) !important;
  letter-spacing: .01em;
}

.gv-give-btn:hover:not(:disabled) {
  opacity: .9;
}

.gv-give-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Secure note */
.gv-secure-note {
  text-align: center;
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin: var(--bcc-s3) 0 0;
  letter-spacing: .02em;
}

/* Giving history section */
.gv-history-section {
  margin-top: var(--bcc-s10);
}

.gv-amount-cell {
  color: var(--bcc-success) !important;
  font-weight: 600 !important;
}

/* ================================================================
   GROUPS — HERO HEADER
================================================================ */

.grp-hero {
  background: linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-accent) 100%);
  border-radius: var(--bcc-r-xl);
  padding: var(--bcc-s10) var(--bcc-s8);
  margin-bottom: var(--bcc-s8);
  position: relative;
  overflow: hidden;
}

.grp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(0,0,0,.15) 0%, transparent 50%);
  pointer-events: none;
}

.grp-hero-inner { position: relative; z-index: 1; }

.grp-hero-title {
  font-size: var(--bcc-t-3xl);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 var(--bcc-s2);
  line-height: 1.1;
}

.grp-hero-sub {
  font-size: var(--bcc-t-sm);
  color: rgba(255,255,255,.72);
  margin: 0;
  font-weight: 400;
}

/* ================================================================
   GROUPS — MY GROUPS SECTION HEAD
================================================================ */

.grp-my-head {
  margin-bottom: var(--bcc-s4);
}

/* ================================================================
   GROUPS — DISCOVER SECTION HEAD
================================================================ */

.grp-discover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bcc-s4);
  margin-top: var(--bcc-s10);
  margin-bottom: var(--bcc-s4);
  flex-wrap: wrap;
}

.grp-discover-head .bcc-section-title { margin: 0; }

/* ================================================================
   GROUPS — FILTER BAR OVERRIDES
================================================================ */

.bcc-filter-bar {
  gap: var(--bcc-s2);
  padding: var(--bcc-s3) 0;
  margin-bottom: var(--bcc-s4);
}

.bcc-pill {
  height: 30px;
  padding: 0 var(--bcc-s3);
  white-space: nowrap;
}

/* ================================================================
   GROUPS — GRID
================================================================ */

.grp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--bcc-s5);
  margin-bottom: var(--bcc-s8);
}

/* ================================================================
   GROUPS — CARD
================================================================ */

.grp-card {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-xl);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  cursor:        pointer;
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-2) var(--bcc-ease),
                 transform    var(--bcc-dur-2) var(--bcc-ease);
  user-select:   none;
}

.grp-card:hover {
  border-color: var(--bcc-primary);
  box-shadow:   var(--bcc-shadow-2);
  transform:    translateY(-2px);
}

.grp-card:focus-visible {
  outline: none;
  box-shadow: var(--bcc-focus), var(--bcc-shadow-2);
}

/* Banner */
.grp-card-banner {
  height:    120px;
  overflow:  hidden;
  position:  relative;
  flex-shrink: 0;
}

.grp-card-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grp-card-banner-bg {
  width: 100%;
  height: 100%;
}

/* Logo overlap */
.grp-card-logo-wrap {
  width:         56px;
  height:        56px;
  border-radius: var(--bcc-r-lg);
  border:        3px solid var(--bcc-surface-1);
  overflow:      hidden;
  flex-shrink:   0;
  position:      relative;
  margin:        -28px 0 0 var(--bcc-s5);
  z-index:       1;
  box-shadow:    var(--bcc-shadow-1);
}

.grp-card-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grp-card-logo-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: var(--bcc-t-md);
  letter-spacing: .02em;
}

/* Card body */
.grp-card-body {
  padding:        var(--bcc-s2) var(--bcc-s5) var(--bcc-s3);
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  flex:           1;
}

.grp-card-name {
  font-size:   var(--bcc-t-md);
  font-weight: 700;
  color:       var(--bcc-ink);
  line-height: 1.3;
  margin-top:  var(--bcc-s2);
  word-break:  break-word;
}

.grp-card-type {
  align-self: flex-start;
}

.grp-card-meta {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
}

/* Card footer */
.grp-card-footer {
  padding:     var(--bcc-s3) var(--bcc-s5);
  border-top:  1px solid var(--bcc-border);
  margin-top:  auto;
  display:     flex;
  align-items: center;
}

.grp-card-footer .bcc-btn {
  width: 100%;
  justify-content: center;
}

/* ================================================================
   GROUPS — RESPONSIVE
================================================================ */

@media (max-width: 860px) {
  .grp-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--bcc-s4);
  }
  .grp-hero {
    padding: var(--bcc-s8) var(--bcc-s6);
  }
}

@media (max-width: 560px) {
  .grp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bcc-s3);
  }
  .grp-hero {
    padding: var(--bcc-s6) var(--bcc-s4);
    border-radius: var(--bcc-r-lg);
  }
  .grp-hero-title {
    font-size: var(--bcc-t-xl);
  }
  .grp-discover-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .grp-discover-head .bcc-searchbar {
    width: 100%;
    min-width: unset;
  }
}

/* ================================================================
   GROUPS — DETAIL VIEW
================================================================ */

.grp-detail-page {
  padding: var(--bcc-s2) 0 var(--bcc-s10);
}

.grp-detail-cover {
  width:         100%;
  height:        200px;
  object-fit:    cover;
  border-radius: var(--bcc-r-xl);
  display:       block;
  margin-bottom: 0;
}

.grp-detail-cover-gradient {
  /* gradient set via inline style; class just ensures sizing */
}

.grp-detail-identity {
  display:     flex;
  align-items: flex-end;
  gap:         var(--bcc-s4);
  margin:      -32px 0 var(--bcc-s5) var(--bcc-s5);
  position:    relative;
  z-index:     2;
}

.grp-detail-logo-wrap {
  position:      relative;
  width:         64px;
  height:        64px;
  border-radius: var(--bcc-r-lg);
  border:        3px solid var(--bcc-bg);
  overflow:      hidden;
  flex-shrink:   0;
  box-shadow:    var(--bcc-shadow-2);
}

.grp-detail-logo-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.grp-detail-logo-initials {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-weight:     700;
  font-size:       var(--bcc-t-lg);
  letter-spacing:  .02em;
}

.grp-detail-info {
  flex:       1;
  min-width:  0;
  padding-bottom: var(--bcc-s1);
}

.grp-detail-name {
  font-size:      var(--bcc-t-2xl);
  font-weight:    700;
  letter-spacing: -.02em;
  color:          var(--bcc-ink);
  margin:         0 0 var(--bcc-s2);
  line-height:    1.2;
  word-break:     break-word;
}

.grp-detail-meta-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
}

.grp-detail-count {
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
  font-weight: 500;
}

.grp-detail-desc {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.65;
  margin:      var(--bcc-s3) 0 0;
}

/* Tabs */
.grp-tabs {
  display:       flex;
  gap:           0;
  border-bottom: 1px solid var(--bcc-border);
  margin:        var(--bcc-s5) 0 var(--bcc-s6);
}

.grp-tab {
  padding:        var(--bcc-s3) var(--bcc-s5);
  font-size:      var(--bcc-t-sm);
  font-weight:    600;
  color:          var(--bcc-ink-3);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  cursor:         pointer;
  transition:     color          var(--bcc-dur-2) var(--bcc-ease),
                  border-color   var(--bcc-dur-2) var(--bcc-ease);
  letter-spacing: .01em;
}

.grp-tab:hover {
  color: var(--bcc-ink-2);
}

.grp-tab.active {
  color:             var(--bcc-primary);
  border-bottom-color: var(--bcc-primary);
}

/* ================================================================
   GROUPS — COMPOSER
================================================================ */

.grp-composer {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s5);
  margin-bottom: var(--bcc-s6);
}

.grp-composer .bcc-input {
  margin-bottom: 0;
  resize:        vertical;
  min-height:    80px;
  border-radius: var(--bcc-r-md);
}

.grp-composer-footer {
  display:         flex;
  justify-content: flex-end;
  margin-top:      var(--bcc-s3);
}

/* ================================================================
   GROUPS — POST FEED
================================================================ */

.grp-posts-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s4);
}

.grp-post-card {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s5);
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease);
}

.grp-post-card:hover {
  border-color: var(--bcc-border-soft);
}

.grp-post-head {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  margin-bottom: var(--bcc-s4);
}

.grp-post-head-info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.grp-post-author {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
  line-height: 1.2;
}

.grp-post-time {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
}

.grp-post-badges {
  display:     flex;
  gap:         var(--bcc-s1);
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.grp-post-body {
  font-size:   var(--bcc-t-sm);
  line-height: 1.7;
  color:       var(--bcc-ink);
  margin:      0 0 var(--bcc-s4);
  white-space: pre-wrap;
  word-break:  break-word;
}

.grp-post-foot {
  border-top:  1px solid var(--bcc-border);
  padding-top: var(--bcc-s3);
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
}

/* Reaction button */
.grp-react-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--bcc-s1);
  padding:       var(--bcc-s1) var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  border:        1px solid var(--bcc-border);
  background:    transparent;
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  color:         var(--bcc-ink-2);
  cursor:        pointer;
  transition:    background    var(--bcc-dur-2) var(--bcc-ease),
                 color         var(--bcc-dur-2) var(--bcc-ease),
                 border-color  var(--bcc-dur-2) var(--bcc-ease);
  min-width:     52px;
  justify-content: center;
}

.grp-react-btn:hover {
  background:   var(--bcc-surface-3);
  color:        var(--bcc-ink);
  border-color: var(--bcc-border-strong);
}

.grp-react-btn.grp-react-active {
  background:   var(--bcc-primary-soft);
  color:        var(--bcc-primary);
  border-color: var(--bcc-primary);
}

.grp-react-emoji {
  font-size: .875rem;
  line-height: 1;
}

.grp-react-count {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   GROUPS — MEMBERS TAB
================================================================ */

.grp-members-list {
  display:        flex;
  flex-direction: column;
}

.grp-member-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s4) 0;
  border-bottom: 1px solid var(--bcc-border);
}

.grp-member-row:last-child {
  border-bottom: none;
}

.grp-member-name {
  flex:        1;
  font-size:   var(--bcc-t-sm);
  font-weight: 500;
  color:       var(--bcc-ink);
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grp-member-role {
  flex-shrink: 0;
}

/* ================================================================
   GROUPS — DETAIL RESPONSIVE
================================================================ */

@media (max-width: 560px) {
  .grp-detail-cover {
    height:        140px;
    border-radius: var(--bcc-r-lg);
  }

  .grp-detail-identity {
    margin-left: var(--bcc-s4);
    gap:         var(--bcc-s3);
    margin-top:  -24px;
  }

  .grp-detail-logo-wrap {
    width:  48px;
    height: 48px;
  }

  .grp-detail-name {
    font-size: var(--bcc-t-xl);
  }

  .grp-tab {
    padding:   var(--bcc-s3) var(--bcc-s4);
    font-size: var(--bcc-t-xs);
  }

  .grp-post-card {
    padding: var(--bcc-s4);
  }
}

/* Group logo edit overlay (leaders only) */
.grp-logo-edit-label {
  position:        absolute;
  inset:           0;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0);
  cursor:          pointer;
  transition:      background 0.15s;
}
.grp-logo-edit-label:hover {
  background: rgba(0,0,0,0.45);
}
.grp-logo-edit-icon {
  opacity:    0;
  font-size:  18px;
  transition: opacity 0.15s;
  color:      #fff;
}
.grp-logo-edit-label:hover .grp-logo-edit-icon {
  opacity: 1;
}

/* ================================================================
   AVAILABILITY VIEW
================================================================ */
.va-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s4);
}
.va-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bcc-s3);
  padding: var(--bcc-s4) var(--bcc-s5);
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
}
.va-card-info { flex: 1; min-width: 180px; }
.va-card-title { font-size: var(--bcc-t-md); font-weight: 600; color: var(--bcc-ink); }
.va-card-date  { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); margin-top: var(--bcc-s1); }
.va-card-actions { display: flex; gap: var(--bcc-s2); }
.va-btn {
  padding: var(--bcc-s2) var(--bcc-s4);
  border-radius: 999px;
  border: 1.5px solid var(--bcc-border);
  background: transparent;
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--bcc-ink-2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.va-btn:hover { border-color: var(--bcc-accent); color: var(--bcc-accent); }
.va-btn-avail-active {
  background: var(--bcc-success-soft);
  border-color: var(--bcc-success);
  color: var(--bcc-success);
}
.va-btn-unavail-active {
  background: var(--bcc-danger-soft);
  border-color: var(--bcc-danger);
  color: var(--bcc-danger);
}

/* ================================================================
   LIGHT MODE OVERRIDES — MEMBER VIEWS
================================================================ */
/* Pill active: solid fill in light mode so it's readable on white */
.bcc-app.bcc-light .bcc-pill.active,
body.theme-light .bcc-app .bcc-pill.active {
  background:   var(--bcc-primary);
  color:        #fff;
  border-color: var(--bcc-primary);
}

/* ================================================================
   PROFILE v2 — Tab layout, Faith Journey Timeline, Drawer
================================================================ */

/* ── Tab bar ─────────────────────────────────────────────────── */
.prof-tab-bar {
  display:       flex;
  gap:           0;
  border-bottom: 1px solid var(--bcc-border);
  margin-bottom: var(--bcc-s6);
}

.prof-tab {
  padding:        var(--bcc-s3) var(--bcc-s5);
  font-size:      var(--bcc-t-sm);
  font-weight:    600;
  color:          var(--bcc-ink-3);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  cursor:         pointer;
  transition:     color        var(--bcc-dur-2) var(--bcc-ease),
                  border-color var(--bcc-dur-2) var(--bcc-ease);
  letter-spacing: .01em;
  white-space:    nowrap;
}

.prof-tab:hover   { color: var(--bcc-ink-2); }
.prof-tab.active  { color: var(--bcc-primary); border-bottom-color: var(--bcc-primary); }

/* ── Panels ─────────────────────────────────────────────────── */
.prof-panel       { display: none; }
.prof-panel-active { display: block; }

/* ── Overview hero card ─────────────────────────────────────── */
.prof-overview-hero {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s5);
  padding:     var(--bcc-s5);
  flex-wrap:   wrap;
}

.prof-overview-name-block {
  flex:        1;
  min-width:   0;
}

.prof-display-name {
  font-size:      var(--bcc-t-xl);
  font-weight:    700;
  letter-spacing: -.02em;
  color:          var(--bcc-ink);
  margin:         0 0 var(--bcc-s1);
}

.prof-member-since {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  margin-top: var(--bcc-s1);
}

/* ── Bio block ──────────────────────────────────────────────── */
.prof-bio-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--bcc-s3);
  margin-bottom:   var(--bcc-s3);
  flex-wrap:       wrap;
}

.prof-visibility-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
}

.prof-bio-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--bcc-s2);
}

.prof-char-count {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
}

/* ── Faith Journey panel ────────────────────────────────────── */
.prof-journey-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--bcc-s5);
}

.prof-journey-empty {
  text-align: center;
  padding:    var(--bcc-s12) var(--bcc-s4);
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-sm);
}

.prof-journey-empty-icon {
  font-size:     2rem;
  margin-bottom: var(--bcc-s3);
  opacity:       .4;
}

/* ── Vertical timeline ──────────────────────────────────────── */
.prof-timeline {
  position:      relative;
  padding-left:  32px;
}

.prof-timeline::before {
  content:    '';
  position:   absolute;
  left:       10px;
  top:        0;
  bottom:     0;
  width:      2px;
  background: var(--bcc-border);
  border-radius: 1px;
}

.prof-timeline-item {
  position:      relative;
  margin-bottom: var(--bcc-s6);
}

.prof-timeline-dot {
  position:  absolute;
  left:      -26px;
  top:       4px;
  width:     12px;
  height:    12px;
  border-radius: 50%;
  background: var(--bcc-primary);
  border:    2px solid var(--bcc-bg, #fff);
  box-shadow: 0 0 0 2px var(--bcc-primary-tint, rgba(var(--bcc-primary-rgb), .2));
}

.prof-timeline-content {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s4) var(--bcc-s5);
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease);
}

.prof-timeline-content:hover {
  border-color: var(--bcc-border-soft);
}

.prof-milestone-date {
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
  font-weight: 500;
  margin-bottom: var(--bcc-s1);
}

.prof-milestone-title {
  font-size:   var(--bcc-t-sm);
  font-weight: 700;
  color:       var(--bcc-ink);
  line-height: 1.4;
  margin-bottom: var(--bcc-s2);
}

.prof-milestone-type {
  display:       inline-block;
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  padding:       2px 8px;
  border-radius: var(--bcc-r-pill);
  margin-bottom: var(--bcc-s2);
  letter-spacing: .03em;
}

.prof-milestone-body {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.65;
  margin-top:  var(--bcc-s2);
}

.prof-scripture-card {
  display:       flex;
  align-items:   baseline;
  flex-wrap:     wrap;
  gap:           var(--bcc-s2);
  margin-top:    var(--bcc-s3);
  padding:       var(--bcc-s3) var(--bcc-s4);
  background:    var(--bcc-primary-soft);
  border-left:   3px solid var(--bcc-primary);
  border-radius: var(--bcc-r-sm);
}

.prof-scripture-ref {
  font-size:   var(--bcc-t-sm);
  font-weight: 700;
  color:       var(--bcc-primary);
  white-space: nowrap;
}

.prof-scripture-text {
  font-size:    var(--bcc-t-sm);
  color:        var(--bcc-ink-2);
  font-style:   italic;
  line-height:  1.5;
}

.prof-recorded-by {
  font-size:    var(--bcc-t-xs);
  color:        var(--bcc-ink-3);
  font-style:   italic;
  margin-top:   var(--bcc-s2);
}

.prof-milestone-actions {
  display:     flex;
  gap:         var(--bcc-s2);
  margin-top:  var(--bcc-s3);
  padding-top: var(--bcc-s2);
  border-top:  1px solid var(--bcc-border);
}

/* ── Serving panel ──────────────────────────────────────────── */
.prof-serve-section-title {
  font-size:      var(--bcc-t-xs);
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  margin:         0 0 var(--bcc-s3);
}

.prof-serve-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border);
}

.prof-serve-row:last-child { border-bottom: none; }

.prof-serve-date {
  flex-shrink: 0;
  min-width:   90px;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
}

.prof-serve-info {
  flex:      1;
  min-width: 0;
}

.prof-serve-plan {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prof-serve-role {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
  margin-top: 2px;
}

/* ── Profile drawer (for viewing other members) ─────────────── */
.prof-drawer-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s5);
}

.prof-drawer-hero {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s4);
}

.prof-drawer-name {
  font-size:      var(--bcc-t-xl);
  font-weight:    700;
  letter-spacing: -.02em;
  color:          var(--bcc-ink);
  margin:         0 0 var(--bcc-s2);
}

.prof-drawer-bio {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.65;
  margin:      0;
}

.prof-drawer-journey {
  border-top: 1px solid var(--bcc-border);
  padding-top: var(--bcc-s5);
}

.prof-drawer-section-title {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  margin-bottom:  var(--bcc-s4);
}

/* ── Admin people drawer: Profile tab ──────────────────────── */
.ppl-profile-bio {
  font-size:    var(--bcc-t-sm);
  color:        var(--bcc-ink-2);
  line-height:  1.65;
  padding:      var(--bcc-s3) var(--bcc-s4);
  background:   var(--bcc-surface-2);
  border-radius: var(--bcc-r-md);
  margin-bottom: var(--bcc-s3);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .prof-tab { padding: var(--bcc-s3) var(--bcc-s4); font-size: var(--bcc-t-xs); }
  .prof-overview-hero { gap: var(--bcc-s4); }
  .prof-timeline { padding-left: 24px; }
  .prof-timeline-dot { left: -18px; }
}


/* ================================================================
   MESSAGES
   Split-pane layout: sidebar (conversation list) + thread area.
   The view slot uses .bcc-view-full so it fills the available
   main content height rather than scrolling as a normal page.
================================================================ */

/* ── The view slot override ─────────────────────────────────── */
.bcc-view-full {
  height:   100%;
  overflow: hidden;
}

/* ── Top-level layout ───────────────────────────────────────── */
.bcc-messages-layout {
  display:  flex;
  height:   100%;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.bcc-messages-sidebar {
  width:        300px;
  flex-shrink:  0;
  display:      flex;
  flex-direction: column;
  border-right: 1px solid var(--bcc-border);
  overflow:     hidden;
  transition:   transform .2s ease;
}

.bcc-messages-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--bcc-s4) var(--bcc-s5);
  border-bottom:   1px solid var(--bcc-border);
  flex-shrink:     0;
}

.bcc-messages-sidebar-title {
  font-size:   var(--bcc-t-lg);
  font-weight: 700;
  margin:      0;
  color:       var(--bcc-ink);
}

.bcc-convo-list {
  flex:       1;
  overflow-y: auto;
  padding:    var(--bcc-s2) 0;
}

.bcc-convo-loading,
.bcc-convo-empty {
  padding:    var(--bcc-s6) var(--bcc-s5);
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-sm);
  text-align: center;
  line-height: 1.6;
}

/* ── Conversation item ──────────────────────────────────────── */
.bcc-convo-item {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s3) var(--bcc-s4);
  cursor:      pointer;
  border-radius: var(--bcc-r-md);
  margin:      0 var(--bcc-s2);
  transition:  background .15s;
}

.bcc-convo-item:hover {
  background: var(--bcc-surface-2);
}

.bcc-convo-item-active {
  background: var(--bcc-surface-2);
}

.bcc-convo-avatar {
  flex-shrink: 0;
}

.bcc-convo-avatar-group {
  width:            32px;
  height:           32px;
  border-radius:    50%;
  background:       var(--bcc-surface-3, var(--bcc-surface-2));
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        14px;
  color:            var(--bcc-ink-2);
}

.bcc-convo-info {
  flex:      1;
  min-width: 0;
}

.bcc-convo-name {
  font-weight:   600;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.bcc-convo-preview {
  font-size:     var(--bcc-t-xs);
  color:         var(--bcc-ink-3);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-top:    2px;
}

.bcc-convo-meta {
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             var(--bcc-s1);
}

.bcc-convo-time {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
  white-space: nowrap;
}

.bcc-convo-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  min-width:        18px;
  height:           18px;
  padding:          0 5px;
  border-radius:    999px;
  background:       var(--bcc-primary);
  color:            #fff;
  font-size:        11px;
  font-weight:      700;
  line-height:      1;
}

/* ── Messages / Connections nav badges (sidebar nav item) ───── */
.bcc-messages-nav-badge,
.bcc-nav-badge {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  min-width:        18px;
  height:           18px;
  padding:          0 5px;
  border-radius:    999px;
  background:       var(--bcc-primary);
  color:            #fff;
  font-size:        11px;
  font-weight:      700;
  line-height:      1;
  margin-left:      auto;
}

/* ── Thread area ────────────────────────────────────────────── */
.bcc-messages-thread {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-width:      0;
  overflow:       hidden;
}

.bcc-thread-header {
  display:        flex;
  align-items:    center;
  gap:            var(--bcc-s3);
  padding:        var(--bcc-s3) var(--bcc-s5);
  border-bottom:  1px solid var(--bcc-border);
  flex-shrink:    0;
}

.bcc-thread-title {
  font-weight: 600;
  font-size:   var(--bcc-t-md);
  color:       var(--bcc-ink);
  flex:        1;
  min-width:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.bcc-thread-back {
  display: none; /* shown via media query on mobile */
}

/* ── Message scroll area ────────────────────────────────────── */
.bcc-thread-messages {
  flex:       1;
  overflow-y: auto;
  padding:    var(--bcc-s5);
  display:    flex;
  flex-direction: column;
  gap:        var(--bcc-s2);
}

.bcc-thread-empty,
.bcc-msg-loading {
  margin:     auto;
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-sm);
  text-align: center;
}

/* ── Message groups ─────────────────────────────────────────── */
.bcc-msg-group {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.bcc-msg-group-mine {
  align-items: flex-end;
}

.bcc-msg-group-theirs {
  align-items: flex-start;
}

/* ── Individual bubble ──────────────────────────────────────── */
.bcc-msg-bubble {
  position:      relative;
  max-width:     72%;
  display:       inline-flex;
  flex-direction: column;
  gap:           var(--bcc-s1);
}

.bcc-msg-sender {
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
  font-weight: 600;
  padding:     0 var(--bcc-s2);
}

.bcc-msg-body {
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-radius: var(--bcc-r-lg);
  font-size:     var(--bcc-t-sm);
  line-height:   1.55;
  word-break:    break-word;
}

.bcc-msg-bubble[data-mine="true"] .bcc-msg-body {
  background: var(--bcc-primary);
  color:      #fff;
  border-bottom-right-radius: 4px;
}

.bcc-msg-bubble[data-mine="false"] .bcc-msg-body {
  background: var(--bcc-surface-2);
  color:      var(--bcc-ink);
  border-bottom-left-radius: 4px;
}

.bcc-msg-time {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  opacity:    0;
  transition: opacity .15s;
  padding:    0 var(--bcc-s2);
  align-self: flex-end;
}

.bcc-msg-bubble:hover .bcc-msg-time {
  opacity: 1;
}

/* ── Scripture card ─────────────────────────────────────────── */
.bcc-msg-scripture-card {
  border-left:   3px solid var(--bcc-primary);
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
  background:    var(--bcc-surface-2);
  margin-bottom: var(--bcc-s1);
}

.bcc-msg-bubble[data-mine="true"] .bcc-msg-scripture-card {
  background: rgba(255,255,255,.15);
  border-left-color: rgba(255,255,255,.6);
}

.bcc-msg-scripture-ref {
  font-size:   var(--bcc-t-xs);
  font-weight: 700;
  color:       var(--bcc-primary);
  margin-bottom: 4px;
}

.bcc-msg-bubble[data-mine="true"] .bcc-msg-scripture-ref {
  color: rgba(255,255,255,.85);
}

.bcc-msg-scripture-text {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink);
  font-style:  italic;
  line-height: 1.55;
}

.bcc-msg-bubble[data-mine="true"] .bcc-msg-scripture-text {
  color: rgba(255,255,255,.9);
}

/* ── Prayer card ────────────────────────────────────────────── */
.bcc-msg-prayer-card {
  border-left:   3px solid var(--bcc-prayer-color, #a855f7);
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
  background:    var(--bcc-surface-2);
  margin-bottom: var(--bcc-s1);
}

.bcc-msg-bubble[data-mine="true"] .bcc-msg-prayer-card {
  background: rgba(255,255,255,.15);
  border-left-color: rgba(168,85,247,.8);
}

.bcc-msg-prayer-label {
  font-size:   var(--bcc-t-xs);
  font-weight: 700;
  color:       var(--bcc-prayer-color, #a855f7);
  margin-bottom: 4px;
}

.bcc-msg-prayer-cat {
  font-size:     var(--bcc-t-xs);
  color:         var(--bcc-ink-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.bcc-msg-prayer-body {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink);
  line-height: 1.55;
}

.bcc-msg-bubble[data-mine="true"] .bcc-msg-prayer-body {
  color: rgba(255,255,255,.9);
}

/* ── Reactions ──────────────────────────────────────────────── */
.bcc-msg-reactions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         4px;
  padding:     0 var(--bcc-s2);
}

.bcc-reaction-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  padding:       2px 8px;
  border-radius: 999px;
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  font-size:     12px;
  cursor:        pointer;
  transition:    background .15s, border-color .15s;
}

.bcc-reaction-pill:hover {
  background:   var(--bcc-surface-3, var(--bcc-surface-2));
  border-color: var(--bcc-primary);
}

.bcc-reaction-mine {
  background:   rgba(var(--bcc-primary-rgb), .15);
  border-color: var(--bcc-primary);
}

.bcc-msg-react-btn {
  opacity:       0;
  cursor:        pointer;
  font-size:     12px;
  color:         var(--bcc-ink-3);
  padding:       2px 6px;
  border-radius: var(--bcc-r-sm);
  transition:    opacity .15s, background .15s;
  align-self:    flex-end;
}

.bcc-msg-bubble:hover .bcc-msg-react-btn {
  opacity: 1;
}

.bcc-msg-react-btn:hover {
  background: var(--bcc-surface-2);
  color:      var(--bcc-ink);
}

/* ── Emoji picker ───────────────────────────────────────────── */
.bcc-emoji-picker {
  display:       flex;
  gap:           4px;
  padding:       6px 8px;
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    0 4px 16px rgba(0,0,0,.25);
}

.bcc-emoji-option {
  font-size:     18px;
  padding:       4px 6px;
  border-radius: var(--bcc-r-sm);
  cursor:        pointer;
  transition:    background .1s;
  background:    transparent;
  border:        none;
}

.bcc-emoji-option:hover {
  background: var(--bcc-surface-2);
}

/* ── Composer ───────────────────────────────────────────────── */
.bcc-thread-composer {
  display:     flex;
  align-items: flex-end;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s3) var(--bcc-s4);
  border-top:  1px solid var(--bcc-border);
  flex-shrink: 0;
}

.bcc-composer-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s1);
  flex-shrink: 0;
}

.bcc-composer-input {
  flex:        1;
  resize:      none;
  min-height:  36px;
  max-height:  120px;
  overflow-y:  auto;
  padding:     8px 12px;
  border-radius: var(--bcc-r-md);
  border:      1px solid var(--bcc-border);
  background:  var(--bcc-surface-2);
  color:       var(--bcc-ink);
  font-size:   var(--bcc-t-sm);
  font-family: inherit;
  line-height: 1.5;
  transition:  border-color .15s;
}

.bcc-composer-input:focus {
  outline:      none;
  border-color: var(--bcc-primary);
}

.bcc-composer-send {
  flex-shrink: 0;
}

/* ── Composer meta preview (scripture / prayer attachment) ──── */
#bcc-composer-meta-preview {
  padding: 0 var(--bcc-s4) var(--bcc-s2);
}

.bcc-composer-meta-card {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s2) var(--bcc-s3);
  background:    var(--bcc-surface-2);
  border-radius: var(--bcc-r-md);
  border-left:   3px solid var(--bcc-primary);
}

.bcc-composer-meta-text {
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-2);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.bcc-composer-meta-clear {
  flex-shrink: 0;
}

/* ── Scripture / Prayer side panels ────────────────────────── */
#bcc-scripture-panel,
#bcc-prayer-panel {
  position:    relative;
  border-top:  1px solid var(--bcc-border);
}

.bcc-side-panel {
  padding:        var(--bcc-s3) var(--bcc-s4);
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  max-height:     260px;
  overflow-y:     auto;
}

.bcc-side-panel-header {
  font-weight: 600;
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink);
}

.bcc-side-panel-noresult {
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
}

.bcc-scripture-preview {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}

.bcc-scripture-preview-ref {
  font-size:   var(--bcc-t-sm);
  font-weight: 700;
  color:       var(--bcc-primary);
}

.bcc-scripture-preview-text {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  font-style:  italic;
  line-height: 1.55;
}

/* ── Prayer list in panel ───────────────────────────────────── */
.bcc-prayer-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}

.bcc-prayer-item {
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  cursor:        pointer;
  transition:    background .15s;
}

.bcc-prayer-item:hover {
  background: var(--bcc-surface-3, var(--bcc-border));
}

.bcc-prayer-item-cat {
  font-size:     var(--bcc-t-xs);
  color:         var(--bcc-prayer-color, #a855f7);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight:   700;
  margin-bottom: 2px;
}

.bcc-prayer-item-body {
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-2);
  line-height: 1.5;
}

/* ── Empty state (no conversation selected) ─────────────────── */
.bcc-messages-empty {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s3);
  color:           var(--bcc-ink-3);
  font-size:       var(--bcc-t-sm);
}

.bcc-messages-empty-icon {
  font-size: 2.5rem;
  opacity:   .4;
}

/* ── New conversation modal helpers ─────────────────────────── */
.bcc-people-results {
  margin-top:   var(--bcc-s2);
  max-height:   200px;
  overflow-y:   auto;
  border-radius: var(--bcc-r-md);
}

.bcc-person-result {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s2) var(--bcc-s3);
  border-radius: var(--bcc-r-md);
  cursor:      pointer;
  transition:  background .15s;
}

.bcc-person-result:hover {
  background: var(--bcc-surface-2);
}

.bcc-person-name {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink);
}

.bcc-people-noresult {
  padding:    var(--bcc-s3);
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-sm);
}

.bcc-selected-people {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--bcc-s2);
  margin:    var(--bcc-s2) 0;
}

.bcc-selected-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       4px 10px;
  border-radius: 999px;
  background:    rgba(var(--bcc-primary-rgb), .15);
  border:        1px solid var(--bcc-primary);
  color:         var(--bcc-ink);
  font-size:     var(--bcc-t-xs);
}

.bcc-chip-remove {
  background: transparent;
  border:     none;
  cursor:     pointer;
  color:      var(--bcc-ink-3);
  font-size:  14px;
  line-height: 1;
  padding:    0;
}

.bcc-chip-remove:hover {
  color: var(--bcc-ink);
}

/* ── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .bcc-messages-sidebar {
    width: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background: var(--bcc-surface-1);
  }

  .bcc-msg-sidebar-hidden {
    display: none;
  }

  .bcc-messages-thread {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: var(--bcc-surface-1);
  }

  .bcc-messages-empty {
    display: none;
  }

  .bcc-thread-back {
    display: inline-flex;
  }

  .bcc-msg-bubble {
    max-width: 86%;
  }
}


/* ================================================================
   GROUP SPACES — Sub-Task 3
   Channels, post cards, thread drawer, @mention autocomplete
================================================================ */

/* ── Channel tab bar ─────────────────────────────────────────── */
.bcc-channel-tabs {
  display: flex;
  gap: var(--bcc-s2);
  overflow-x: auto;
  padding: var(--bcc-s3) 0 var(--bcc-s4);
  /* Hide scrollbar but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bcc-channel-tabs::-webkit-scrollbar { display: none; }

.bcc-channel-tab {
  flex-shrink: 0;
  padding: 4px 14px;
  border-radius: 9999px;
  border: 1px solid var(--bcc-border, #e5e7eb);
  background: var(--bcc-surface-1);
  color: var(--bcc-ink-2, #57606a);
  font-size: var(--bcc-t-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.bcc-channel-tab:hover {
  background: var(--bcc-surface-2, #eff1f3);
  color: var(--bcc-ink, #1f2328);
}
.bcc-channel-tab.active {
  background: var(--bcc-primary, #3b82d4);
  color: #fff;
  border-color: var(--bcc-primary, #3b82d4);
}

/* ── Post card ───────────────────────────────────────────────── */
.bcc-post-card {
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: var(--bcc-radius, 10px);
  padding: var(--bcc-s4) var(--bcc-s5);
  margin-bottom: var(--bcc-s3);
}

.bcc-post-card.bcc-post-announcement {
  border-left: 3px solid var(--bcc-accent);
  background: var(--bcc-accent-soft);
}

/* ── Post header ─────────────────────────────────────────────── */
.bcc-post-header {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  margin-bottom: var(--bcc-s2);
  flex-wrap: wrap;
}
.bcc-post-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.bcc-post-author {
  font-size: var(--bcc-t-sm, 0.875rem);
  font-weight: 600;
  color: var(--bcc-ink, #1f2328);
}
.bcc-post-time {
  font-size: var(--bcc-t-xs, 0.75rem);
  color: var(--bcc-ink-3, #888);
}
.bcc-post-badges {
  display: flex;
  gap: var(--bcc-s1);
  flex-wrap: wrap;
  margin-left: auto;
}
.bcc-post-avatar-wrap {
  flex-shrink: 0;
}

/* ── Post body ───────────────────────────────────────────────── */
.bcc-post-body {
  line-height: 1.7;
  font-size: var(--bcc-t-base, 0.9375rem);
  color: var(--bcc-ink, #1f2328);
  margin: var(--bcc-s1) 0 var(--bcc-s3);
}

/* ── Scripture embed ─────────────────────────────────────────── */
.bcc-post-scripture-embed {
  border-left: 3px solid var(--bcc-primary, #3b82d4);
  padding: var(--bcc-s2) var(--bcc-s3);
  margin: var(--bcc-s2) 0 var(--bcc-s3);
  background: var(--bcc-surface-2, #f0f4ff);
  border-radius: 0 var(--bcc-radius-sm, 6px) var(--bcc-radius-sm, 6px) 0;
}
.bcc-scripture-ref {
  font-size: var(--bcc-t-xs, 0.75rem);
  font-weight: 700;
  color: var(--bcc-primary, #3b82d4);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.bcc-scripture-text {
  font-size: var(--bcc-t-sm, 0.875rem);
  color: var(--bcc-ink-2, #57606a);
  font-style: italic;
  line-height: 1.6;
}

/* ── Post action bar ─────────────────────────────────────────── */
.bcc-post-actions {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
  margin-top: var(--bcc-s2);
}
.bcc-bookmark-btn.bcc-bookmark-active {
  color: var(--bcc-primary, #3b82d4);
}

/* ── @mention autocomplete dropdown ─────────────────────────── */
.bcc-mention-autocomplete {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 900;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: var(--bcc-radius-sm, 6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  max-height: 200px;
  overflow-y: auto;
  min-width: 200px;
}
.bcc-mention-item {
  padding: 8px 12px;
  font-size: var(--bcc-t-sm, 0.875rem);
  color: var(--bcc-ink, #1f2328);
  cursor: pointer;
}
.bcc-mention-item:hover {
  background: var(--bcc-surface-2, #f0f4ff);
}

/* ── Thread drawer ───────────────────────────────────────────── */
.bcc-thread-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;   /* fallback for browsers without dvh */
  height: 100dvh;  /* avoid the mobile toolbar cutting off the composer */
  background: var(--bcc-surface-1);
  border-left: 1px solid var(--bcc-border, #e5e7eb);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 800;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bcc-thread-drawer[hidden] { display: none; }

.bcc-thread-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bcc-thread-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s3);
  padding: var(--bcc-s4) var(--bcc-s5);
  border-bottom: 1px solid var(--bcc-border, #e5e7eb);
  flex-shrink: 0;
}
.bcc-thread-title {
  font-size: var(--bcc-t-base, 0.9375rem);
  font-weight: 600;
  color: var(--bcc-ink, #1f2328);
}
.bcc-thread-replies {
  flex: 1;
  overflow-y: auto;
  padding: var(--bcc-s4) var(--bcc-s5);
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
}
.bcc-thread-composer {
  flex-shrink: 0;
  padding: var(--bcc-s3) var(--bcc-s5) var(--bcc-s4);
  border-top: 1px solid var(--bcc-border, #e5e7eb);
}

/* ── Reply bubble (simplified) ───────────────────────────────── */
.bcc-reply-bubble {
  background: var(--bcc-surface-2, #f7f8fa);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: var(--bcc-radius-sm, 8px);
  padding: var(--bcc-s3) var(--bcc-s4);
}

/* ── Admin channels tab ──────────────────────────────────────── */
.grpadm-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border, #e5e7eb);
  flex-wrap: wrap;
  gap: var(--bcc-s2);
}
.grpadm-channel-row:last-child { border-bottom: none; }
.grpadm-channel-row-info {
  display: flex;
  align-items: center;
  gap: var(--bcc-s1);
}
.grpadm-channel-row-actions {
  display: flex;
  align-items: center;
  gap: var(--bcc-s1);
  flex-wrap: wrap;
}
.grpadm-channel-name {
  font-size: var(--bcc-t-sm, 0.875rem);
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 640px) {
  .bcc-thread-drawer {
    width: 100vw;
    border-left: none;
  }
}

/* ================================================================
   VERSE OF DAY — Dashboard widget
================================================================ */

.dash-votd-card {
  border-left: 4px solid var(--bcc-accent);
  background: var(--bcc-surface-1);
  border-radius: var(--bcc-r-lg);
  padding: var(--bcc-s4) var(--bcc-s5);
  margin-bottom: var(--bcc-s5);
}

.dash-votd-ref {
  font-size: var(--bcc-t-sm, 0.875rem);
  font-weight: 700;
  color: var(--bcc-accent);
  margin-bottom: var(--bcc-s2);
  letter-spacing: .01em;
}

.dash-votd-text {
  font-family: var(--bcc-font-display);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bcc-ink, #1f2328);
  margin-bottom: var(--bcc-s3);
}

.dash-votd-actions {
  display: flex;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
}

/* ================================================================
   VERSE MOMENTS — Dashboard widget
================================================================ */

.dash-verse-moments-strip {
  display: flex;
  gap: var(--bcc-s3);
  overflow-x: auto;
  padding-bottom: var(--bcc-s2);
  margin-bottom: var(--bcc-s5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dash-verse-moment-card {
  flex: 0 0 auto;
  width: 180px;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: var(--bcc-radius, 10px);
  padding: var(--bcc-s3) var(--bcc-s4);
}

.dash-verse-moment-ref {
  font-size: var(--bcc-t-xs, 0.75rem);
  font-weight: 700;
  color: var(--bcc-accent, #6366f1);
  margin-bottom: var(--bcc-s1);
}

.dash-verse-moment-preview {
  font-size: var(--bcc-t-xs, 0.75rem);
  color: var(--bcc-ink-2, #57606a);
  line-height: 1.5;
  margin-bottom: var(--bcc-s2);
}

.dash-verse-moment-count {
  font-size: var(--bcc-t-xs, 0.75rem);
  font-weight: 600;
  color: var(--bcc-ink-3, #68687e);
}

/* ================================================================
   SCRIPTURE RESPONSES — Prayer Wall expanded view
================================================================ */

.pw-scripture-responses-section {
  border-top: 1px solid var(--bcc-border, #e5e7eb);
  padding: var(--bcc-s3) 0 var(--bcc-s2);
  margin-bottom: var(--bcc-s3);
}

.pw-scripture-responses-label {
  font-size: var(--bcc-t-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bcc-ink-3, #68687e);
  margin-bottom: var(--bcc-s2);
}

.pw-scripture-response {
  background: var(--bcc-surface-1);
  border-left: 3px solid var(--bcc-accent);
  border-radius: 0 var(--bcc-r-sm) var(--bcc-r-sm) 0;
  padding: var(--bcc-s2) var(--bcc-s3);
  margin-bottom: var(--bcc-s2);
}

.pw-scripture-response-ref {
  font-size: var(--bcc-t-xs, 0.75rem);
  font-weight: 700;
  color: var(--bcc-accent);
  margin-bottom: 2px;
}

.pw-scripture-response-text {
  font-family: var(--bcc-font-display);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bcc-ink, #1f2328);
}

.pw-scripture-response-who {
  font-size: var(--bcc-t-xs, 0.75rem);
  color: var(--bcc-ink-3, #68687e);
  margin-top: 2px;
}

/* ================================================================
   ADMIN COMMUNICATIONS — Scripture / VOTD tab
================================================================ */

.com-votd-preview {
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: var(--bcc-radius-sm, 6px);
  padding: var(--bcc-s3) var(--bcc-s4);
  margin-top: var(--bcc-s2);
}

.com-votd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bcc-t-sm, 0.875rem);
}

.com-votd-table th {
  text-align: left;
  font-size: var(--bcc-t-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bcc-ink-3, #68687e);
  border-bottom: 1px solid var(--bcc-border, #e5e7eb);
  padding: var(--bcc-s2) var(--bcc-s3);
}

.com-votd-table td {
  padding: var(--bcc-s3);
  border-bottom: 1px solid var(--bcc-border, #e5e7eb);
  vertical-align: middle;
}

.com-votd-table tr:last-child td {
  border-bottom: none;
}

.com-top-verse-row {
  padding: var(--bcc-s2) 0;
  border-bottom: 1px solid var(--bcc-border, #e5e7eb);
}

.com-top-verse-row:last-child {
  border-bottom: none;
}

/* ================================================================
   PRAYER PRESENCE & CHAINS
================================================================ */

/* Live "N praying now" indicator */
.pw-presence-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bcc-ink-3, #68687e);
  padding: 4px var(--bcc-s4, 16px);
}

.pw-presence-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bcc-success);
  flex-shrink: 0;
  animation: pw-pulse 1s ease-in-out infinite;
}

@keyframes pw-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}

/* Prayer chain section inside expanded thread */
.pw-chain-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bcc-border, #e5e7eb);
  padding-left: var(--bcc-s4, 16px);
  padding-right: var(--bcc-s4, 16px);
  padding-bottom: var(--bcc-s3, 12px);
}

.pw-chain-desc {
  font-size: var(--bcc-t-sm, 0.875rem);
  color: var(--bcc-ink-3, #68687e);
  margin: 0 0 4px;
}

.pw-chain-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.pw-chain-slot {
  border: 2px dashed var(--bcc-border, #e5e7eb);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  transition: border-color 0.2s, background 0.2s;
}

.pw-chain-slot.pw-slot-claimed {
  border-style: solid;
  border-color: var(--bcc-success);
  background: var(--bcc-success-soft);
}

.pw-chain-slot.pw-slot-empty {
  border-color: var(--bcc-accent);
}

.pw-slot-label {
  font-size: 18px;
  line-height: 1;
}

.pw-slot-time {
  font-size: 11px;
  color: var(--bcc-ink-3, #68687e);
}

.pw-slot-fill {
  margin-top: 4px;
}

.pw-slot-taken {
  font-size: var(--bcc-t-xs, 0.75rem);
  color: var(--bcc-success);
  font-weight: 600;
}

@media (max-width: 600px) {
  .pw-chain-band {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   CONNECTION GRAPH
================================================================ */

/* Button row in member profile drawer */
.conn-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Status pills (Connected ✓ / Pending) */
.conn-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  line-height: 1.6;
}

/* Connection + mutual count row */
.conn-count-row {
  font-size: 13px;
  color: var(--bcc-ink-3, #68687e);
  margin-top: 6px;
}

/* "✓ Connected" badge on directory cards */
.dir-connection-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 10px;
  background: var(--bcc-success);
  color: #fff;
  border-radius: 8px;
  padding: 1px 5px;
  font-weight: 600;
  pointer-events: none;
}

/* Suggested connections section header */
.dir-suggested-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--bcc-ink-2, #444);
  margin-bottom: 8px;
}

/* Horizontal scroll row of suggestion cards */
.dir-suggested-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  margin-bottom: 20px;
  padding-bottom: 8px;
}

/* Individual suggestion card */
.dir-suggested-card {
  min-width: 140px;
  text-align: center;
  padding: 12px;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: var(--bcc-radius, 8px);
  flex-shrink: 0;
}

.dir-suggested-name {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 2px;
  color: var(--bcc-ink, #1f2328);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dir-suggested-label {
  font-size: 11px;
  color: var(--bcc-ink-3, #68687e);
  margin-bottom: 8px;
}

/* Feed filter tabs */
.feed-filter-tabs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 16px;
}

.feed-filter-tab {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--bcc-border, #e5e7eb);
  background: transparent;
  color: var(--bcc-ink-2, #444);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.feed-filter-tab:hover {
  background: var(--bcc-surface-1);
}

.feed-filter-tab.active {
  background: var(--bcc-primary, #6366f1);
  color: #fff;
  border-color: var(--bcc-primary, #6366f1);
}

/* ================================================================
   SERVE VIEW
================================================================ */

.srv-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px;
}

.srv-section {
  margin-top: 32px;
}

.srv-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--bcc-ink, #1f2328);
}

/* Open roles grid */
.srv-slots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.srv-slot-card {
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
}

.srv-slot-date {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bcc-ink-2, #57606a);
  margin-bottom: 4px;
}

.srv-slot-role {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--bcc-ink, #1f2328);
}

.srv-slot-plan {
  font-size: 13px;
  color: var(--bcc-ink-2, #57606a);
}

.srv-slot-actions {
  margin-top: 12px;
}

/* Ministry groups grid */
.srv-groups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.srv-group-card {
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.srv-group-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--bcc-ink, #1f2328);
}

/* Admin pending signups rows */
.svc-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bcc-border, #e5e7eb);
}

.svc-pending-row:last-child {
  border-bottom: none;
}

.svc-pending-info {
  flex: 1;
  min-width: 0;
}

.svc-pending-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ================================================================
   AI DIGEST & PRAYER INTELLIGENCE
================================================================ */

/* Digest widget container */
.dash-digest-wrap {
  margin-top: 24px;
  padding: 20px;
  background: var(--bcc-surface-1);
  border-radius: 12px;
  border: 1px solid var(--bcc-border, #e5e7eb);
}

/* Header row: title + refresh button */
.dash-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dash-section-header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--bcc-ink, #1f2328);
}

/* Empty / generate state */
.dash-digest-empty {
  text-align: center;
  padding: 20px;
  color: var(--bcc-ink-2, #57606a);
}

.dash-digest-empty p {
  margin-bottom: 16px;
  font-size: 14px;
}

/* Digest content */
.dash-digest-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--bcc-ink, #1f2328);
}

.dash-digest-content p {
  margin: 0 0 8px;
}

.dash-digest-list {
  margin: 4px 0 8px 20px;
  padding: 0;
}

.dash-digest-list li {
  margin-bottom: 4px;
}

/* Shimmer loading animation */
@keyframes bcc-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.dash-digest-shimmer {
  padding: 4px 0;
}

.dash-digest-shimmer-line {
  height: 14px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--bcc-border, #e5e7eb) 25%, var(--bcc-surface-2, #eef0f3) 50%, var(--bcc-border, #e5e7eb) 75%);
  background-size: 800px 100%;
  animation: bcc-shimmer 1.4s infinite linear;
}

/* ── Prayer Intelligence ──────────────────────────────────── */

/* AI Summary trigger button on prayer cards */
.pw-ai-summary-btn {
  font-size: 12px;
  color: var(--bcc-ink-3, #6e7781);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--bcc-border, #e5e7eb);
  background: transparent;
  cursor: pointer;
  margin-top: 6px;
}

.pw-ai-summary-btn:hover {
  background: var(--bcc-surface-1);
  color: var(--bcc-ink, #1f2328);
}

/* Wrap keeps button + card together */
.pw-ai-summary-wrap {
  padding: 0 4px;
}

/* Streamed/cached pastoral summary card */
.pw-ai-summary-card {
  background: var(--bcc-surface-2, #eef0f3);
  border-left: 3px solid var(--bcc-primary, #3b82d4);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  font-style: italic;
  color: var(--bcc-ink, #1f2328);
}

/* Community Health preset button emphasis */
.adm-ai-preset-health {
  border-color: var(--bcc-primary, #3b82d4);
  color: var(--bcc-primary, #3b82d4);
}

/* ================================================================
   MILESTONE CELEBRATIONS  (Sub-Task 9)
================================================================ */

/* Shared milestone card — gold border glow */
.bcc-milestone-shared {
  border: 2px solid var(--bcc-accent) !important;
  box-shadow: 0 0 8px var(--bcc-accent-soft);
}

/* Celebration count badge */
.bcc-milestone-celebration-count {
  display: inline-block;
  font-size: 11px;
  background: var(--bcc-accent-soft);
  color: var(--bcc-accent);
  border-radius: 10px;
  padding: 2px 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* Celebration list container */
.bcc-celebration-list {
  margin-top: 12px;
  padding: 12px;
  background: var(--bcc-surface-2, #eef0f3);
  border-radius: 8px;
}

/* Individual celebration row */
.bcc-celebration-item {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bcc-border-subtle, rgba(0,0,0,0.06));
}
.bcc-celebration-item:last-child {
  border-bottom: none;
}

/* Celebration message text */
.bcc-celebration-msg {
  font-size: 13px;
  flex: 1;
  line-height: 1.5;
  word-break: break-word;
}

/* Inline input row for sending a celebration */
.bcc-celebration-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.bcc-celebration-input {
  flex: 1;
  min-width: 0;
}

/* Feed milestone card — gold left border + warm background */
.feed-milestone-card {
  border-left: 3px solid var(--bcc-accent) !important;
  background: var(--bcc-accent-soft);
}

/* Feed milestone icon color */
.feed-icon-milestone {
  color: var(--bcc-accent);
}

/* Milestone type badge in feed card */
.feed-milestone-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: var(--bcc-accent-soft);
  color: var(--bcc-accent);
  border-radius: 6px;
  padding: 2px 7px;
  margin-right: 6px;
  text-transform: capitalize;
}

/* ── Mobile: celebration input full-width ───────────────────── */
@media (max-width: 600px) {
  .bcc-celebration-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .bcc-celebration-input-row .bcc-btn {
    width: 100%;
  }
}


/* ================================================================
   LIVING DASHBOARD (Sub-Task 10)
================================================================ */

.dash-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Hero banner ─────────────────────────────────────────────── */
.dash-hero {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 4px;
}

.dash-hero-inner {
  padding: 28px 24px;
}

.dash-hero-greeting {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.dash-hero-context {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Quick actions ───────────────────────────────────────────── */
.dash-quick-actions {
  margin: 0;
}

.dash-qa-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dash-qa-btn {
  all: unset;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: 12px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}

.dash-qa-btn:hover {
  background: var(--bcc-surface-hover, var(--bcc-surface-2, #f3f4f6));
}

.dash-qa-icon {
  font-size: 22px;
  line-height: 1;
}

.dash-qa-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--bcc-ink-2);
}

/* ── Section wrapper ─────────────────────────────────────────── */
.dash-section {
  display: flex;
  flex-direction: column;
}

.dash-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--bcc-ink);
}

/* ── Today strip ─────────────────────────────────────────────── */
.dash-today-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.dash-today-strip::-webkit-scrollbar {
  display: none;
}

.dash-today-card {
  min-width: 180px;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: 10px;
  padding: 14px;
  flex-shrink: 0;
}

.dash-today-card-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bcc-ink-3);
  margin-bottom: 4px;
}

.dash-today-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bcc-ink);
}

.dash-today-card-sub {
  font-size: 12px;
  color: var(--bcc-ink-3);
  margin-top: 4px;
}

/* ── This week grid ──────────────────────────────────────────── */
.dash-week-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dash-week-col {
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: 12px;
  padding: 16px;
}

.dash-week-col-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--bcc-ink);
}

/* ── Connections activity ────────────────────────────────────── */
.dash-connections-strip {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-conn-activity-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bcc-border-subtle, var(--bcc-border));
  font-size: 13px;
  color: var(--bcc-ink);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dash-week-grid {
    grid-template-columns: 1fr;
  }

  .dash-hero-greeting {
    font-size: 18px;
  }
}

/* ================================================================
   SANCTUARY MODERN — MEMBER VIEW REFINEMENTS (v2 override layer)
   Appended last so it wins the cascade. Uses only --bcc-* tokens.
   Does not rename or remove any existing class.
   ================================================================ */

/* ── A1. Serif display accents on view / section / hero titles ── */
.bcc-view-title,
.bcc-section-title,
.bcc-messages-sidebar-title,
.prof-display-name,
.prof-drawer-name,
.grp-detail-name,
.grp-hero-title,
.dash-section-title,
.dash-hero-greeting,
.dash-today-card-title,
.dash-week-col-title,
.dir-suggested-header,
.srv-slot-role,
.srv-group-name {
  font-family: var(--bcc-font-display);
  letter-spacing: .003em;
}
.bcc-view-title  { font-weight: 600; letter-spacing: -.005em; }
.bcc-section-title { font-weight: 600; }
.grp-hero-title  { font-weight: 600; letter-spacing: -.01em; }
.dash-hero-greeting { font-weight: 600; }

/* ── A2. Unified elevated cards: r-lg, shadow-1 idle, shadow-2 hover ── */
.dash-stat-card,
.dir-card,
.grp-post-card,
.grp-composer,
.va-card,
.srv-slot-card,
.srv-group-card,
.dash-today-card,
.dash-week-col,
.dash-verse-moment-card,
.dir-suggested-card,
.bcc-post-card,
.prof-timeline-content,
.dash-votd-card,
.dash-digest-wrap {
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow: var(--bcc-shadow-1);
  transition: border-color var(--bcc-dur-2) var(--bcc-ease),
              box-shadow   var(--bcc-dur-2) var(--bcc-ease),
              transform    var(--bcc-dur-2) var(--bcc-ease);
}
.dash-stat-card:hover,
.dir-card:hover,
.grp-post-card:hover,
.va-card:hover,
.srv-slot-card:hover,
.srv-group-card:hover,
.dash-today-card:hover,
.dash-verse-moment-card:hover,
.dir-suggested-card:hover,
.bcc-post-card:hover,
.dash-votd-card:hover,
.dash-digest-wrap:hover {
  border-color: var(--bcc-border-strong);
  box-shadow: var(--bcc-shadow-2);
}

/* ── A3. Tabs / pills / chips — consistent radii + active states ── */
.bcc-pill,
.gv-fund-chip,
.feed-filter-tab,
.bcc-channel-tab,
.ev-toggle-btn,
.feed-filter-tabs .feed-filter-tab {
  border-radius: var(--bcc-r-pill);
}
.bcc-pill.active,
.gv-fund-chip.active,
.feed-filter-tab.active,
.bcc-channel-tab.active {
  background: var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
}
.grp-tab,
.prof-tab,
.bcc-tab {
  transition: color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease);
}

/* ── A4. View button-like controls → consistent with .bcc-btn ── */
.dash-qa-btn,
.gv-quick-btn,
.gv-freq-btn,
.bcc-composer-send,
.bcc-bookmark-btn,
.pw-ai-summary-btn,
.prof-read-more,
.prof-edit-milestone,
.prof-del-milestone,
.ev-rsvp-btn {
  border-radius: var(--bcc-r-md);
  font-weight: 600;
  transition: background   var(--bcc-dur-2) var(--bcc-ease),
              color        var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease),
              box-shadow   var(--bcc-dur-2) var(--bcc-ease),
              transform    var(--bcc-dur-2) var(--bcc-ease);
}
.va-btn,
.grp-react-btn,
.bcc-msg-react-btn,
.bcc-verse-pill,
.bcc-verse-add-btn {
  border-radius: var(--bcc-r-pill);
}
.dash-qa-btn:focus-visible,
.gv-quick-btn:focus-visible,
.gv-freq-btn:focus-visible,
.va-btn:focus-visible,
.grp-react-btn:focus-visible,
.bcc-msg-react-btn:focus-visible,
.bcc-composer-send:focus-visible,
.bcc-bookmark-btn:focus-visible,
.pw-ai-summary-btn:focus-visible,
.prof-read-more:focus-visible,
.prof-edit-milestone:focus-visible,
.prof-del-milestone:focus-visible,
.ev-rsvp-btn:focus-visible,
.bcc-verse-add-btn:focus-visible,
.bcc-verse-pill:focus-visible {
  outline: none;
  box-shadow: var(--bcc-focus);
}
.dash-qa-btn:hover,
.gv-quick-btn:hover,
.pw-ai-summary-btn:hover {
  transform: translateY(-1px);
}
.va-btn:hover {
  border-color: var(--bcc-accent);
  color: var(--bcc-accent);
}

/* ── A5. Giving CTA — refined violet→gold gradient with soft glow ── */
.gv-give-btn {
  background: linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-accent) 120%) !important;
  box-shadow: 0 6px 20px rgba(var(--bcc-primary-rgb), .35), var(--bcc-shadow-glow);
  border-radius: var(--bcc-r-md) !important;
  transition: filter var(--bcc-dur-2) var(--bcc-ease),
              transform var(--bcc-dur-2) var(--bcc-ease),
              box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.gv-give-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(var(--bcc-primary-rgb), .42), var(--bcc-shadow-glow);
}
.gv-give-btn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* ================================================================
   C1. EVENTS VIEW (.ev-*) — previously unstyled
   ================================================================ */
.ev-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bcc-s1);
  padding: 3px;
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-pill);
}
.ev-toggle-btn {
  height: 32px;
  padding: 0 var(--bcc-s4);
  border: 1px solid transparent;
  border-radius: var(--bcc-r-pill);
  background: transparent;
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease);
}
.ev-toggle-btn:hover:not(.active) { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.ev-toggle-btn.active {
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  border-color: var(--bcc-primary);
}

.ev-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
}

.ev-item {
  display: flex;
  align-items: flex-start;
  gap: var(--bcc-s4);
  padding: var(--bcc-s4);
  cursor: pointer;
}
.ev-item-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 60px;
  padding: var(--bcc-s2) var(--bcc-s2);
  background: var(--bcc-primary-soft);
  border-radius: var(--bcc-r-md);
  flex-shrink: 0;
  text-align: center;
}
.ev-month {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bcc-primary);
  line-height: 1;
}
.ev-day {
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-2xl);
  font-weight: 600;
  color: var(--bcc-primary);
  line-height: 1;
}
.ev-dow {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcc-ink-3);
  line-height: 1;
}
.ev-item-info { flex: 1; min-width: 0; }
.ev-item-title {
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-lg);
  font-weight: 600;
  color: var(--bcc-ink);
  margin: 0 0 var(--bcc-s1);
  line-height: 1.25;
}
.ev-item-meta {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-3);
}
.ev-item-desc {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  line-height: 1.55;
  margin-top: var(--bcc-s2);
}
.ev-item-actions {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  flex-shrink: 0;
}
.ev-rsvp-btn { height: 32px; }

/* ── Calendar ── */
.ev-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s3);
  margin-bottom: var(--bcc-s4);
}
.ev-cal-month-label {
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-xl);
  font-weight: 600;
  color: var(--bcc-ink);
}
.ev-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--bcc-s1);
}
.ev-cal-dow {
  text-align: center;
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bcc-ink-3);
  padding: var(--bcc-s2) 0;
}
.ev-cal-cell {
  position: relative;
  min-height: 76px;
  padding: var(--bcc-s2);
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s1);
  transition: background var(--bcc-dur-1) var(--bcc-ease),
              border-color var(--bcc-dur-1) var(--bcc-ease);
}
.ev-cal-cell.ev-cal-has-events { cursor: pointer; }
.ev-cal-cell.ev-cal-has-events:hover {
  background: var(--bcc-surface-3);
  border-color: var(--bcc-border-strong);
}
.ev-cal-cell.ev-cal-blank {
  background: transparent;
  border-color: transparent;
  min-height: 0;
}
.ev-cal-cell.ev-cal-today {
  border-color: var(--bcc-accent);
  background: var(--bcc-accent-soft);
}
.ev-cal-day-num {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink-2);
}
.ev-cal-today .ev-cal-day-num { color: var(--bcc-accent); font-weight: 700; }
.ev-cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}
.ev-cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bcc-primary);
  display: inline-block;
}

/* ── Event detail (modal content) ── */
.ev-detail-cover {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--bcc-r-lg);
  margin-bottom: var(--bcc-s4);
  display: block;
}
.ev-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s2);
  margin-bottom: var(--bcc-s4);
}
.ev-detail-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
}
.ev-map-link {
  color: var(--bcc-primary);
  font-weight: 600;
  text-decoration: none;
}
.ev-map-link:hover { text-decoration: underline; }
.ev-detail-desc {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  line-height: 1.7;
  white-space: pre-wrap;
}
.ev-rsvp-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
}
.ev-rsvp-choice { height: 34px; }
.ev-day-event-row {
  display: flex;
  align-items: baseline;
  gap: var(--bcc-s2);
  padding: var(--bcc-s3);
  border-radius: var(--bcc-r-md);
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border);
  margin-bottom: var(--bcc-s2);
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink);
  transition: background var(--bcc-dur-1) var(--bcc-ease);
}
.ev-day-event-row:hover { background: var(--bcc-surface-3); }
.ev-day-time {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin-left: auto;
}
@media (max-width: 600px) {
  .ev-item { flex-wrap: wrap; }
  .ev-item-actions { width: 100%; }
  .ev-cal-cell { min-height: 56px; }
  .ev-cal-month-label { font-size: var(--bcc-t-lg); }
}

/* ================================================================
   C2. VERSE PICKER (.bcc-vp-*) — previously unstyled
   ================================================================ */
.bcc-verse-picker {
  position: fixed;
  z-index: 1000;
  width: min(420px, calc(100vw - 2rem));
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
  box-shadow: var(--bcc-shadow-3);
  overflow: hidden;
  animation: bcc-slide-up var(--bcc-dur-2) var(--bcc-ease-spring);
}
.bcc-vp-header {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  padding: var(--bcc-s3) var(--bcc-s3) var(--bcc-s3) var(--bcc-s4);
  border-bottom: 1px solid var(--bcc-border);
}
.bcc-vp-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--bcc-ink);
  font-family: inherit;
  font-size: var(--bcc-t-sm);
}
.bcc-vp-input::placeholder { color: var(--bcc-ink-3); }
.bcc-vp-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--bcc-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bcc-ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--bcc-dur-1) var(--bcc-ease), color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-vp-close:hover { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.bcc-vp-results {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--bcc-s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bcc-vp-item {
  padding: var(--bcc-s2) var(--bcc-s3);
  border-radius: var(--bcc-r-sm);
  cursor: pointer;
  outline: none;
  transition: background var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-vp-item:hover,
.bcc-vp-item:focus {
  background: var(--bcc-surface-3);
}
.bcc-vp-item[aria-selected="true"] {
  background: var(--bcc-primary-soft);
}
.bcc-vp-item-ref {
  font-size: var(--bcc-t-sm);
  font-weight: 700;
  color: var(--bcc-accent);
  margin-bottom: 2px;
}
.bcc-vp-item-text {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-2);
  line-height: 1.5;
}
.bcc-vp-empty {
  padding: var(--bcc-s6) var(--bcc-s4);
  text-align: center;
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}

/* Verse picker on touch/mobile: 16px input stops iOS focus-zoom (the panel
   is appended to <body>, outside #bcc-main's zoom guard) and the close
   button grows to a full touch target. */
@media (max-width: 767px) {
  .bcc-vp-input { font-size: 16px; }
}
@media (pointer: coarse) {
  .bcc-vp-close { width: 44px; height: 44px; }
  .bcc-vp-item { min-height: 44px; }
}

/* ================================================================
   C3. VERSE REACTIONS (.bcc-verse-*) — previously unstyled
   ================================================================ */
.bcc-verse-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bcc-s2);
  margin-top: var(--bcc-s2);
}
.bcc-verse-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  color: var(--bcc-ink-2);
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bcc-dur-1) var(--bcc-ease),
              border-color var(--bcc-dur-1) var(--bcc-ease),
              color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-verse-pill:hover {
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
}
.bcc-verse-pill.bcc-mine {
  background: var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
}
.bcc-verse-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  border: 1px dashed var(--bcc-border-strong);
  background: transparent;
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bcc-dur-1) var(--bcc-ease),
              border-color var(--bcc-dur-1) var(--bcc-ease),
              color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-verse-add-btn:hover {
  background: var(--bcc-accent-soft);
  border-color: var(--bcc-accent);
  color: var(--bcc-accent);
}
/* Touch layouts: the compact 26px pills become full 44px targets. */
@media (pointer: coarse) {
  .bcc-verse-pill,
  .bcc-verse-add-btn {
    min-height: 44px;
    padding-inline: var(--bcc-s4);
  }
}
.bcc-verse-popover {
  z-index: 1001;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 2rem));
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  box-shadow: var(--bcc-shadow-3);
  padding: var(--bcc-s3) var(--bcc-s4);
}
.bcc-verse-popover-ref {
  font-size: var(--bcc-t-sm);
  font-weight: 700;
  color: var(--bcc-accent);
  margin-bottom: var(--bcc-s1);
}
.bcc-verse-popover-text {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  font-style: italic;
  line-height: 1.55;
}
.bcc-verse-popover-remove {
  margin-top: var(--bcc-s2);
}

/* ================================================================
   D. LIGHT-MODE LEGIBILITY (view components)
   Uses the same selectors as connect-tokens.css light-mode block.
   ================================================================ */
body.theme-light .bcc-app .ev-item-date,
.bcc-app.bcc-light .ev-item-date {
  background: var(--bcc-primary-soft);
}
body.theme-light .bcc-app .ev-cal-cell,
.bcc-app.bcc-light .ev-cal-cell {
  background: var(--bcc-surface-2);
}
body.theme-light .bcc-app .ev-cal-cell.ev-cal-today,
.bcc-app.bcc-light .ev-cal-cell.ev-cal-today {
  background: var(--bcc-accent-soft);
}
body.theme-light .bcc-app .bcc-verse-popover,
body.theme-light .bcc-app .bcc-verse-picker,
.bcc-app.bcc-light .bcc-verse-popover,
.bcc-app.bcc-light .bcc-verse-picker {
  background: var(--bcc-surface-1);
}
body.theme-light .bcc-app .bcc-verse-pill.bcc-mine,
.bcc-app.bcc-light .bcc-verse-pill.bcc-mine {
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
}

/* ================================================================
   E. MOBILE / TABLET SCALING FIXES (member portal)
   ================================================================ */

/* Sub-12px meta / badge floor on phones. */
@media (max-width: 480px) {
  .bcc-convo-badge,
  .bcc-messages-nav-badge,
  .bcc-nav-badge,
  .pw-slot-time,
  .conn-status-badge,
  .bcc-milestone-celebration-count,
  .dash-event-month,
  .ev-month,
  .ev-dow {
    font-size: 0.6875rem;
  }
}

/* Touch targets + safe areas (phones AND tablets). */
@media (pointer: coarse) {
  /* Group replies thread drawer + composer safe areas (notched phones,
     home indicator). */
  .bcc-thread-drawer { padding-top: env(safe-area-inset-top, 0px); }
  .bcc-thread-composer {
    padding-bottom: max(var(--bcc-s3), env(safe-area-inset-bottom, 0px));
  }

  /* Reaction pills (26px drawn chip): keep the control, add a 44px hit area. */
  .bcc-reaction-pill { position: relative; }
  .bcc-reaction-pill::after {
    content: '';
    position: absolute;
    inset: -9px 0;
  }
}