/* /connect/shell.css — Bible Connect App Shell v3
 * "Vibrant Community" — energetic, welcoming member chrome.
 * Uses connect-tokens.css custom properties throughout; shared
 * components (buttons, avatar, badge, modal, drawer, toast, skeleton,
 * icons) live in connect-tokens.css and are NOT redefined here.
 * Scoped to .bcc-app so it doesn't bleed into the rest of Bible Parlor.
 * ------------------------------------------------------------------ */

/* ================================================================
   RESET & BASE
================================================================ */
.bcc-app *,
.bcc-app *::before,
.bcc-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure the HTML `hidden` attribute always wins, even when a CSS rule
   on the same element sets display:flex or display:grid. Without this,
   showScreen() toggling el.hidden has no visual effect. */
[hidden] { display: none !important; }

/* Suppress the grey tap flash across the shell chrome */
.bcc-app,
.bcc-app * {
  -webkit-tap-highlight-color: transparent;
}

/* Typography / colours come from connect-tokens.css .bcc-app */

/* ================================================================
   SPLASH / LOADING SCREEN
================================================================ */
#bcc-loading-screen {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      radial-gradient(120% 120% at 50% 0%, var(--bcc-surface-1) 0%, var(--bcc-bg) 60%);
}

.bcc-splash-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--bcc-s6);
}

.bcc-splash-logo {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
}

.bcc-splash-icon {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  color:       var(--bcc-accent);
  line-height: 1;
  filter:      drop-shadow(0 0 14px var(--bcc-accent-soft));
}

.bcc-splash-wordmark {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-2xl);
  font-weight: 600;
  letter-spacing: .005em;
  color:       var(--bcc-ink);
}

/* ================================================================
   SPINNER
================================================================ */
.bcc-spinner {
  width:         32px;
  height:        32px;
  border:        3px solid var(--bcc-surface-3);
  border-top-color: var(--bcc-primary);
  border-radius: 50%;
  animation:     bcc-spin .7s linear infinite;
}

/* ================================================================
   GATE SCREENS (auth-required / no-church / pending)
================================================================ */
.bcc-gate-screen {
  position:        fixed;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bcc-bg);
  padding:         var(--bcc-s6);
}

.bcc-gate-card {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-xl);
  padding:       var(--bcc-s12) var(--bcc-s10);
  max-width:     420px;
  width:         100%;
  text-align:    center;
  box-shadow:    var(--bcc-shadow-3), var(--bcc-shadow-glow);
}

.bcc-gate-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--bcc-primary-soft);
  font-size:       1.75rem;
  color:           var(--bcc-primary);
  line-height:     1;
  margin:          0 auto var(--bcc-s5);
}

.bcc-gate-icon--warn {
  color: var(--bcc-warning);
  background: var(--bcc-warning-soft);
}

.bcc-gate-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-2xl);
  font-weight:    600;
  letter-spacing: .005em;
  margin-bottom:  var(--bcc-s3);
}

.bcc-gate-body {
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-sm);
  line-height:   1.7;
  margin-bottom: var(--bcc-s6);
}

.bcc-gate-sub {
  margin-top: var(--bcc-s4);
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
}

.bcc-gate-sub--code {
  margin-top:   var(--bcc-s4);
  font-size:    var(--bcc-t-xs);
  color:        var(--bcc-ink-3);
  opacity:      0.6;
}

.bcc-gate-back-btn {
  margin-top: var(--bcc-s6);
}

.bcc-link-btn {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--bcc-primary);
  font-size:  inherit;
  padding:    0;
}

.bcc-link-btn:hover { text-decoration: underline; }

/* ================================================================
   APP LAYOUT — CSS Grid (desktop ≥768px)
   Columns: [sidebar] [main column]
   Rows:    [topbar]  [content]
================================================================ */
#bcc-app-layout {
  display:              grid;
  grid-template-columns: var(--bcc-sidebar-w) 1fr;
  grid-template-rows:   auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height:   100dvh;
  overflow: hidden;
  background: var(--bcc-bg);
}

/* ================================================================
   SIDEBAR
================================================================ */
#bcc-sidebar {
  grid-area:       sidebar;
  display:         flex;
  flex-direction:  column;
  width:           var(--bcc-sidebar-w);
  height:          100dvh;
  background:      var(--bcc-sidebar-bg);
  background-image:
    radial-gradient(130% 55% at 0% 0%, rgba(var(--bcc-primary-rgb), .18) 0%, transparent 62%),
    linear-gradient(180deg, var(--bcc-sidebar-bg) 0%, color-mix(in srgb, var(--bcc-surface-1) 16%, var(--bcc-sidebar-bg)) 100%);
  border-right:    1px solid var(--bcc-border);
  overflow-y:      auto;
  overflow-x:      hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  position:        relative;
  z-index:         100;
  flex-shrink:     0;
  /* Safe-area insets: keep brand + footer clear of notches / home bar */
  padding-top:     env(safe-area-inset-top, 0px);
  padding-bottom:  env(safe-area-inset-bottom, 0px);
  padding-left:    env(safe-area-inset-left, 0px);
}

#bcc-sidebar::-webkit-scrollbar { display: none; }

/* ── Church logo chip (BCC.churchLogoHTML) ─────────────────────── */
.bcc-logo-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            none;
  overflow:        hidden;
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border-strong);
  font-weight:     700;
  line-height:     1;
}

/* contain-fit so logos never crop (beats the view-layer cover rule) */
.bcc-logo-chip .bcc-church-logo-img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

.bcc-logo-fallback {
  width:           100%;
  height:          100%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
}

.bcc-logo-shape--circle  { border-radius: 50%; }
.bcc-logo-shape--rounded { border-radius: var(--bcc-r-md); }
.bcc-logo-shape--square  { border-radius: 0; }

.bcc-logo-chip-sm { width: 32px; height: 32px; font-size: .8rem; }
.bcc-logo-chip-md { width: 48px; height: 48px; font-size: 1.1rem; }
.bcc-logo-chip-lg { width: 72px; height: 72px; font-size: 1.6rem; }

/* ── Sidebar church brand (logo + name + Bible Connect sub-label) ── */
.bcc-sidebar-brand {
  display:               grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows:    auto auto;
  align-items:           center;
  column-gap:            var(--bcc-s3);
  margin:                var(--bcc-s3) var(--bcc-s3) var(--bcc-s1);
  padding:               var(--bcc-s2) var(--bcc-s3);
  min-height:            60px;
  flex-shrink:           0;
  text-decoration:       none;
  color:                 inherit;
  border-radius:         var(--bcc-r-lg);
  transition:            background var(--bcc-dur-2) var(--bcc-ease);
}

@media (hover: hover) {
  .bcc-sidebar-brand:hover { background: var(--bcc-surface-2); }
}

.bcc-sidebar-brand-logo {
  grid-row:        1 / span 2;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}

.bcc-sidebar-brand-name {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-lg);
  font-weight:    600;
  color:          var(--bcc-ink);
  letter-spacing: .005em;
  min-width:      0;
  overflow-wrap:  anywhere;
}

.bcc-sidebar-brand-sub {
  font-size:      var(--bcc-t-xs);
  font-weight:    500;
  color:          var(--bcc-ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* Nav list */
.bcc-sidebar-nav {
  flex:       1;
  padding:    var(--bcc-s3) var(--bcc-s3) var(--bcc-s2);
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        3px;
}

/* Section grouping label */
.bcc-nav-section {
  list-style:     none;
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color:          var(--bcc-ink-3);
  padding:        var(--bcc-s4) var(--bcc-s3) var(--bcc-s1);
  user-select:    none;
}

.bcc-sidebar-nav > li.bcc-nav-section:first-child {
  padding-top: var(--bcc-s1);
}

/* Nav item shared (used in sidebar + admin link) */
.bcc-nav-item {
  display:         flex;
  align-items:     center;
  gap:             var(--bcc-s3);
  padding:         0 var(--bcc-s3);
  height:          42px;
  border-radius:   var(--bcc-r-md);
  text-decoration: none;
  color:           var(--bcc-ink-2);
  font-size:       var(--bcc-t-sm);
  font-weight:     500;
  letter-spacing:  .005em;
  transition:      background var(--bcc-dur-2) var(--bcc-ease),
                   color      var(--bcc-dur-2) var(--bcc-ease);
  position:        relative;
  white-space:     nowrap;
  cursor:          pointer;
}

@media (hover: hover) {
  .bcc-nav-item:hover {
    background: var(--bcc-surface-3);
    color:      var(--bcc-ink);
  }
}

/* Touch/active feedback for sidebar nav items */
.bcc-nav-item:active {
  background: var(--bcc-surface-3);
  color:      var(--bcc-ink);
}

.bcc-nav-item.bcc-nav-active {
  background: linear-gradient(90deg, var(--bcc-primary-soft) 0%, rgba(var(--bcc-primary-rgb), .04) 100%);
  color:      var(--bcc-primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--bcc-primary-rgb), .20), 0 0 18px rgba(var(--bcc-primary-rgb), .16);
}

.bcc-nav-item.bcc-nav-active .bcc-nav-icon {
  color:   var(--bcc-primary);
  filter:  drop-shadow(0 0 8px rgba(var(--bcc-primary-rgb), .45));
}

/* Left accent bar on active item */
.bcc-nav-item.bcc-nav-active::before {
  content:  '';
  position: absolute;
  left:     0;
  top:      9px;
  bottom:   9px;
  width:    3px;
  border-radius: 0 3px 3px 0;
  background: var(--bcc-primary);
  box-shadow: 0 0 10px rgba(var(--bcc-primary-rgb), .70);
}

.bcc-nav-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  flex-shrink:     0;
  font-size:       1.05rem;
  line-height:     1;
  color:           inherit;
}

.bcc-nav-icon .bcc-icon { width: 1.15em; height: 1.15em; }

.bcc-nav-label {
  flex: 1;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Bottom section */
.bcc-sidebar-bottom {
  padding:     var(--bcc-s2) var(--bcc-s3) var(--bcc-s5);
  border-top:  1px solid var(--bcc-border-soft);
  flex-shrink: 0;
  display:     flex;
  flex-direction: column;
  gap:         3px;
}

/* Admin link (inherits .bcc-nav-item) */
.bcc-nav-admin {
  color: var(--bcc-ink-2);
}

@media (hover: hover) {
  .bcc-nav-admin:hover {
    color: var(--bcc-accent);
    background: var(--bcc-accent-soft);
  }
}

/* Profile row */
.bcc-sidebar-profile {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s2) var(--bcc-s3);
  min-height:  52px;
  border-radius: var(--bcc-r-md);
  cursor:      pointer;
  background:  none;
  border:      1px solid transparent;
  color:       var(--bcc-ink-2);
  font-size:   var(--bcc-t-sm);
  font-weight: 500;
  width:       100%;
  text-align:  left;
  transition:  background var(--bcc-dur-2) var(--bcc-ease),
               border-color var(--bcc-dur-2) var(--bcc-ease),
               color      var(--bcc-dur-2) var(--bcc-ease);
}

@media (hover: hover) {
  .bcc-sidebar-profile:hover {
    background: var(--bcc-surface-3);
    border-color: var(--bcc-border);
    color:      var(--bcc-ink);
  }
}

.bcc-sidebar-profile:active {
  background: var(--bcc-surface-3);
  border-color: var(--bcc-border);
  color:      var(--bcc-ink);
}

.bcc-sidebar-profile-meta {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  flex:           1;
  line-height:    1.2;
}

.bcc-sidebar-profile-name {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
  overflow-wrap: anywhere;
}

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

@media (hover: hover) {
  .bcc-sidebar-profile:hover .bcc-sidebar-profile-name { color: var(--bcc-primary); }
}

#bcc-profile-avatar {
  box-shadow: 0 0 0 1px var(--bcc-border);
}

/* ================================================================
   TOPBAR — frosted glass over surface-1
================================================================ */
#bcc-topbar {
  grid-area:      topbar;
  height:         auto;
  min-height:     var(--bcc-topbar-h);
  display:        flex;
  align-items:    center;
  gap:            var(--bcc-s3);
  padding:        0 clamp(16px, 4vw, var(--bcc-s8));
  /* Safe-area insets: pad below notch / beside rounded corners */
  padding-top:    env(safe-area-inset-top, 0px);
  padding-left:   max(clamp(16px, 4vw, var(--bcc-s8)), env(safe-area-inset-left, 0px));
  padding-right:  max(clamp(16px, 4vw, var(--bcc-s8)), env(safe-area-inset-right, 0px));
  background:     var(--bcc-surface-1);
  background:     color-mix(in srgb, var(--bcc-surface-1) 82%, transparent);
  border-bottom:  1px solid var(--bcc-border);
  box-shadow:     0 10px 30px -22px rgba(var(--bcc-primary-rgb), .70);
  position:       sticky;
  top:            0;
  z-index:        90;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter:         blur(14px) saturate(1.3);
}

.bcc-topbar-menu-btn {
  display: none; /* hidden on desktop */
}

/* Mobile topbar church identity (≤767px) */
.bcc-topbar-church {
  flex:        1;
  min-width:   0;
  align-items: center;
  gap:         var(--bcc-s2);
  display:     none; /* hidden on desktop — desktop shows the view title */
}

.bcc-topbar-church-logo {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.bcc-topbar-church-name {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
  min-width:   0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Desktop topbar view title (>767px) */
.bcc-topbar-view {
  flex:        1;
  min-width:   0;
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
  display:     block;
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bcc-topbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Multi-church switcher (only rendered for 2+ active memberships) */
.bcc-church-switch {
  position:    relative;
  display:     inline-flex;
  align-items: center;
}
.bcc-church-switch[hidden] { display: none; }

.bcc-church-switch-btn {
  min-height:  44px;
  max-width:   min(220px, 42vw);
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     0 var(--bcc-s3);
  border:      1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  color:       var(--bcc-ink-2);
  background:  var(--bcc-surface-2);
}
.bcc-church-switch-btn:hover,
.bcc-church-switch-btn[aria-expanded="true"] {
  color:        var(--bcc-ink);
  border-color: var(--bcc-border-strong);
  background:   var(--bcc-surface-3);
}
.bcc-church-switch-logo { display: inline-flex; flex-shrink: 0; }
.bcc-church-switch-name {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
}
.bcc-church-switch-chevron { flex-shrink: 0; opacity: .7; }

.bcc-church-menu {
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  z-index:       120;
  min-width:     220px;
  max-width:     min(320px, calc(100vw - 24px));
  max-height:    min(60vh, 420px);
  overflow-y:    auto;
  padding:       var(--bcc-s2);
  padding-bottom: max(var(--bcc-s2), env(safe-area-inset-bottom, 0px));
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    0 20px 48px -20px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter:         blur(14px);
}
.bcc-church-menu[hidden] { display: none; }

.bcc-church-menu-item {
  width:         100%;
  min-height:    44px;
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s2) var(--bcc-s3);
  background:    none;
  border:        1px solid transparent;
  border-radius: var(--bcc-r-md);
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-sm);
  text-align:    left;
  cursor:        pointer;
}
.bcc-church-menu-item:hover,
.bcc-church-menu-item:focus-visible {
  background: var(--bcc-surface-3);
  color:      var(--bcc-ink);
}
.bcc-church-menu-item.is-active {
  background:   var(--bcc-primary-tint);
  color:        var(--bcc-primary);
  border-color: rgba(var(--bcc-primary-rgb), .35);
}
.bcc-church-menu-logo { display: inline-flex; flex-shrink: 0; }
.bcc-church-menu-name {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-weight:   600;
}
.bcc-church-menu-check { flex-shrink: 0; color: var(--bcc-primary); }

@media (max-width: 480px) {
  .bcc-church-switch-btn {
    min-width: 44px;
    max-width: 44px;
    padding:   0;
    justify-content: center;
  }
  .bcc-church-switch-name,
  .bcc-church-switch-chevron { display: none; }
}

/* Notification wrapper */
.bcc-notif-wrap {
  position:    relative;
  display:     inline-flex;
}

/* Ring colour matches the topbar surface (token default targets the sidebar) */
#bcc-notif-badge { border-color: var(--bcc-surface-1); }

/* Member theme toggle — icon-only, aria-pressed set by shell.js */
.bcc-theme-toggle {
  color: var(--bcc-ink-2);
}
.bcc-theme-toggle:hover {
  color:      var(--bcc-primary);
  background: var(--bcc-primary-tint);
}
.bcc-theme-toggle[aria-pressed="true"] {
  color:      var(--bcc-accent);
  background: var(--bcc-accent-soft);
}

/* Topbar profile avatar button */
.bcc-topbar-avatar-btn {
  width:      36px;
  height:     36px;
  cursor:     pointer;
  border:     none;
  padding:    0;
  background: none;
  transition: box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.bcc-topbar-avatar-btn:hover {
  box-shadow: 0 0 0 2px rgba(var(--bcc-primary-rgb), .55), var(--bcc-shadow-glow);
}

/* ================================================================
   MAIN CONTENT AREA
================================================================ */
#bcc-main {
  grid-area:  main;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    var(--bcc-s6) clamp(16px, 4vw, var(--bcc-s12));
  scrollbar-width: thin;
  scrollbar-color: var(--bcc-surface-4) transparent;
}

#bcc-main::-webkit-scrollbar       { width: 8px; }
#bcc-main::-webkit-scrollbar-track { background: transparent; }
#bcc-main::-webkit-scrollbar-thumb { background: var(--bcc-surface-4); border-radius: 4px; }

/* View slot — only one shown at a time */
.bcc-view {
  width:     100%;
  max-width: 1180px;
  margin:    0 auto;
}

/* ================================================================
   MOBILE NAV (bottom bar) — hidden on desktop
================================================================ */
#bcc-mobile-nav {
  display: none;
}

/* ================================================================
   LINK
================================================================ */
.bcc-link {
  color:           var(--bcc-primary);
  text-decoration: none;
}
.bcc-link:hover { text-decoration: underline; }

/* ================================================================
   TOAST — component lives in connect-tokens.css
   (responsive positioning overrides remain below)
=============================================================== */

/* ================================================================
   MODAL / OVERLAY — component lives in connect-tokens.css
   Entrance/exit helper classes referenced by core.js remain here.
=============================================================== */
.bcc-overlay-in  { opacity: 1; }
.bcc-overlay-out { opacity: 0; }
.bcc-modal-in    { transform: scale(1) translateY(0); }

/* ================================================================
   DRAWER — component lives in connect-tokens.css
   State + helper classes for the member sidebar overlay remain here.
=============================================================== */
.bcc-drawer-overlay-in  { opacity: 1; }
.bcc-drawer-overlay-out { opacity: 0; }

/* Member sidebar overlay becomes visible when sidebar is open */
body.bcc-sidebar-is-open #bcc-sidebar-overlay { opacity: 1; }

/* Lock body scroll when sidebar overlay is active */
body.bcc-sidebar-is-open { overflow: hidden; }

.bcc-drawer-in  { transform: translateX(0); }
.bcc-drawer-out { transform: translateX(100%); }

/* ================================================================
   SKELETON LOADERS
================================================================ */
.bcc-skeleton-page       { display: flex; flex-direction: column; gap: var(--bcc-s4); padding: var(--bcc-s6) 0; }
.bcc-skeleton-title      { height: 28px; width: 220px; }
.bcc-skeleton-line       { height: 16px; width: 100%; }
.bcc-skeleton-short      { width: 60%; }
.bcc-skeleton-card       { height: 120px; width: 100%; border-radius: var(--bcc-r-lg); }

/* ================================================================
   VIEW ERROR STATE
================================================================ */
.bcc-view-error {
  padding:    var(--bcc-s16) var(--bcc-s6);
  text-align: center;
  max-width:  440px;
  margin:     0 auto;
}

.bcc-view-error-icon {
  font-size:     2.5rem;
  color:         var(--bcc-warning);
  margin-bottom: var(--bcc-s4);
  line-height:   1;
}

.bcc-view-error-title {
  font-family:   var(--bcc-font-display);
  font-size:     var(--bcc-t-xl);
  font-weight:   600;
  margin-bottom: var(--bcc-s3);
  color:         var(--bcc-ink);
}

.bcc-view-error-body {
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-2);
  line-height:   1.7;
  margin-bottom: var(--bcc-s6);
}

/* ================================================================
   TABLET RESPONSIVE — 768–1024px
   Tighter gutters + a narrower sidebar. Desktop (>1024) is untouched
   because this query does not match there.
=============================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Redefine the sidebar width token for tablet only — the layout grid
     and the sidebar element both read var(--bcc-sidebar-w). */
  .bcc-app {
    --bcc-sidebar-w: clamp(184px, 20vw, 208px);
  }

  #bcc-main {
    padding: var(--bcc-s5) clamp(16px, 3vw, var(--bcc-s8));
  }

  #bcc-topbar {
    padding: 0 clamp(16px, 3vw, var(--bcc-s6));
    padding-top:   env(safe-area-inset-top, 0px);
    padding-left:  max(clamp(16px, 3vw, var(--bcc-s6)), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(16px, 3vw, var(--bcc-s6)), env(safe-area-inset-right, 0px));
  }

  /* Comfortable, slightly narrower reading column on tablets */
  .bcc-view {
    max-width: 1000px;
  }
}

/* Large desktop: widen the reading column a touch (still ≤1200px) */
@media (min-width: 1440px) {
  .bcc-view {
    max-width: 1200px;
  }
}

/* ================================================================
   MOBILE RESPONSIVE — < 768px
=============================================================== */
@media (max-width: 767px) {

  /* Grid collapses to single column: no sidebar column, just [main] */
  #bcc-app-layout {
    grid-template-columns: 1fr;
    grid-template-rows:    auto 1fr auto;
    grid-template-areas:
      "topbar"
      "main"
      "mobile-nav";
  }

  /* Sidebar slides in from left as an overlay panel — above backdrop */
  #bcc-sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    bottom:     0;
    z-index:    920;
    transform:  translateX(-100%);
    transition: transform var(--bcc-dur-4) var(--bcc-ease);
    box-shadow: var(--bcc-shadow-3);
    width:      var(--bcc-sidebar-w);
  }

  #bcc-sidebar.bcc-sidebar-open {
    transform: translateX(0);
  }

  /* Topbar: show hamburger + church identity on mobile, hide view title */
  .bcc-topbar-menu-btn  { display: inline-flex; }
  .bcc-topbar-church    { display: flex; }
  .bcc-topbar-view      { display: none; }

  /* Topbar: reduce side padding + enforce ≥44px touch targets */
  #bcc-topbar {
    padding: 0 var(--bcc-s4);
    padding-top:   env(safe-area-inset-top, 0px);
    padding-left:  max(var(--bcc-s4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--bcc-s4), env(safe-area-inset-right, 0px));
  }
  #bcc-topbar .bcc-btn-icon { width: 44px; height: 44px; }
  #bcc-topbar .bcc-topbar-avatar-btn { width: 44px; height: 44px; }

  /* Sidebar nav items: ≥44px touch targets on mobile */
  #bcc-sidebar .bcc-nav-item { min-height: 44px; }

  /* Main content: less padding, add bottom clearance for mobile nav.
     Clearance = nav min-height (56px) + bottom safe-area inset + gutter. */
  #bcc-main {
    padding:        var(--bcc-s4);
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--bcc-s4));
  }

  /* ── Mobile bottom nav ── */
  #bcc-mobile-nav {
    grid-area:     mobile-nav;
    display:       flex;
    align-items:   stretch;
    justify-content: space-between;
    height:        auto;
    min-height:    56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left, 0px);
    padding-right:  env(safe-area-inset-right, 0px);
    background:    var(--bcc-surface-1);
    background:    color-mix(in srgb, var(--bcc-surface-1) 90%, transparent);
    border-top:    1px solid var(--bcc-border);
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    z-index:       80;
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter:         blur(14px) saturate(1.3);
  }

  .bcc-mobile-nav-item {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    flex:            1 1 0;
    min-width:       0;
    min-height:      44px;
    padding:         6px 2px;
    text-decoration: none;
    color:           var(--bcc-ink-2);
    /* Keep labels legible on touch devices (FIX 3): 0.6875rem = 11px floor. */
    font-size:       .6875rem;
    font-weight:     500;
    letter-spacing:  .01em;
    text-align:      center;
    transition:      color var(--bcc-dur-1) var(--bcc-ease);
  }

  .bcc-mobile-nav-item > span:not(.bcc-mobile-icon):not(.bcc-messages-nav-badge):not(.bcc-nav-badge) {
    max-width:     100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }

  @media (hover: hover) {
    .bcc-mobile-nav-item:hover {
      color: var(--bcc-primary);
    }
  }

  .bcc-mobile-nav-item.bcc-nav-active {
    color: var(--bcc-primary);
  }

  /* Touch feedback for the primary destinations */
  .bcc-mobile-nav-item:active {
    color: var(--bcc-primary);
    background: var(--bcc-surface-2);
  }

  /* Soft pill highlight behind the icon on the active item */
  .bcc-mobile-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.2rem;
    line-height:     1;
    width:           40px;
    height:          26px;
    border-radius:   var(--bcc-r-sm);
    transition:      background var(--bcc-dur-1) var(--bcc-ease);
  }

  .bcc-mobile-nav-item.bcc-nav-active .bcc-mobile-icon {
    background: var(--bcc-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(var(--bcc-primary-rgb), .22);
  }

  /* Primary top indicator + glow on the active destination */
  .bcc-mobile-nav-item.bcc-nav-active::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      26px;
    height:     3px;
    border-radius: 0 0 3px 3px;
    background: var(--bcc-primary);
    box-shadow: 0 0 12px rgba(var(--bcc-primary-rgb), .80);
  }

  .bcc-mobile-icon .bcc-icon { width: 1.05em; height: 1.05em; }

  /* Unread messages badge on the bottom nav — distinct pill pinned to the
     top-right of the Messages icon so it reads on the compact nav bar. */
  .bcc-mobile-nav-item .bcc-messages-nav-badge,
  .bcc-mobile-nav-item .bcc-nav-badge {
    position:       absolute;
    top:            3px;
    left:           50%;
    margin:         0 0 0 7px;
    min-width:      16px;
    height:         16px;
    padding:        0 4px;
    border-radius:  var(--bcc-r-pill);
    background:     var(--bcc-danger);
    color:          #fff;
    font-size:      .6rem;
    font-weight:    700;
    line-height:    16px;
    text-align:     center;
    border:         2px solid var(--bcc-surface-1);
    pointer-events: none;
    z-index:        1;
  }

  /* Toast stack: centered at bottom above mobile nav
     (nav min-height + safe-area inset + gutter) */
  .bcc-toast-stack {
    bottom:  calc(56px + env(safe-area-inset-bottom, 0px) + var(--bcc-s4));
    right:   var(--bcc-s4);
    left:    var(--bcc-s4);
    align-items: stretch;
  }

  .bcc-toast { max-width: 100%; }

  /* Gate cards: less padding on mobile */
  .bcc-gate-card {
    padding: var(--bcc-s8) var(--bcc-s6);
  }
}

/* ================================================================
   SMALL PHONE — ≤ 480px
   Tighten the 5-item bottom nav so labels never clip.
=============================================================== */
@media (max-width: 480px) {
  .bcc-mobile-nav-item {
    /* 0.6875rem (11px) floor; ellipsis handles anything longer. */
    font-size:      .6875rem;
    letter-spacing: 0;
    padding:   6px 1px;
  }

  .bcc-mobile-icon {
    width:     36px;
    height:    24px;
    font-size: 1.1rem;
  }

  #bcc-topbar {
    padding: 0 var(--bcc-s3);
    padding-top:   env(safe-area-inset-top, 0px);
    padding-left:  max(var(--bcc-s3), env(safe-area-inset-left, 0px));
    padding-right: max(var(--bcc-s3), env(safe-area-inset-right, 0px));
  }
  .bcc-topbar-church-name { font-size: var(--bcc-t-md); }

  /* Notification drawer header reflows so 44px targets always fit */
  .bcc-notif-drawer-header {
    flex-wrap: wrap;
    gap:        8px;
    padding:    14px 16px;
  }
  .bcc-notif-drawer-actions { flex-wrap: wrap; }
}

/* ================================================================
   COARSE-POINTER (TOUCH) TARGETS — tablets + phones.
   The max-width:767px block only reached phones, so the shell chrome
   regressed to sub-44px controls on touch tablets. The back-to-
   Bible-Parlor widget is body-mounted; no mobile rule reaches it.
   ================================================================ */
@media (pointer: coarse) {
  /* Sidebar / admin nav links (desktop height 42px) */
  .bcc-nav-item { min-height: 44px; }

  /* Notification drawer + preferences controls (desktop 32px) */
  .bcc-notif-close,
  .bcc-notif-settings-btn,
  .bcc-notif-pref-close { min-width: 44px; min-height: 44px; }

  /* Back-to-Bible-Parlor floating widget (body-mounted, desktop 26-30px) */
  .bcc-bp-close,
  .bcc-bp-notif-btn { min-width: 44px; min-height: 44px; }

  /* Toggle switch rows: 44px tap target while the 40x22 track keeps
     its size (the row/label is the clickable element). */
  .bcc-toggle { min-height: 44px; }
}

/* ================================================================
   REDUCED MOTION
   Disable the sidebar / drawer slide transitions when the user
   prefers reduced motion.
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  #bcc-sidebar,
  .bcc-drawer-overlay,
  .bcc-drawer,
  .bcc-notif-drawer,
  .bcc-toast {
    transition: none !important;
  }
}

/* Sidebar backdrop overlay (mobile) — z-index below sidebar */
#bcc-sidebar-overlay {
  z-index: 490;
}

/* ================================================================
   BACK-TO-BIBLE-PARLOR FLOATING WIDGET
================================================================ */
.bcc-bp-widget {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right:  calc(20px + env(safe-area-inset-right, 0px));
  z-index: 1100;
  user-select: none;
  pointer-events: none;
}

.bcc-bp-widget-toggle,
.bcc-bp-panel {
  pointer-events: auto;
}

.bcc-bp-widget-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  box-shadow: var(--bcc-shadow-2), 0 0 24px rgba(var(--bcc-primary-rgb), .45);
  border: 1px solid transparent;
  cursor: pointer;
  /* Drag only the toggle — never the whole widget */
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--bcc-dur-2) var(--bcc-ease-spring),
              box-shadow var(--bcc-dur-2) var(--bcc-ease);
}

.bcc-bp-widget-toggle:hover {
  transform: scale(1.07);
  box-shadow: var(--bcc-shadow-3), 0 0 30px rgba(var(--bcc-primary-rgb), .60);
}

.bcc-bp-panel {
  position: absolute;
  bottom: 56px;
  right: 0;
  width: 228px;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
  box-shadow: var(--bcc-shadow-3);
  padding: var(--bcc-s3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: bcc-bp-fadein var(--bcc-dur-2) var(--bcc-ease);
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  /* Allow vertical scrolling of the panel contents on touch devices */
  touch-action: pan-y;
}

@keyframes bcc-bp-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bcc-bp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 0 2px;
}

.bcc-bp-panel-title {
  font-family: var(--bcc-font-display);
  font-weight: 600;
  font-size: var(--bcc-t-md);
  color: var(--bcc-ink);
}

/* Signed-in member identity row */
.bcc-bp-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--bcc-border);
  margin-bottom: 6px;
}

.bcc-bp-identity-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.bcc-bp-username {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink);
}

.bcc-bp-signout {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-bp-signout:hover { color: var(--bcc-danger); }

.bcc-bp-notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--bcc-r-sm);
  background: none;
  color: var(--bcc-ink-2);
  cursor: pointer;
  transition: background var(--bcc-dur-1) var(--bcc-ease), color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-bp-notif-btn:hover { background: var(--bcc-surface-3); color: var(--bcc-primary); }

.bcc-bp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bcc-ink-3);
  width: 26px;
  height: 26px;
  border-radius: var(--bcc-r-sm);
  line-height: 1;
  transition: background var(--bcc-dur-1) var(--bcc-ease), color var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-bp-close:hover { background: var(--bcc-surface-3); color: var(--bcc-ink); }

.bcc-bp-home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--bcc-r-md);
  text-decoration: none;
  font-size: var(--bcc-t-sm);
  font-weight: 500;
  color: var(--bcc-primary);
  background: transparent;
  transition: background var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-bp-home-link:hover { background: var(--bcc-primary-tint); }

.bcc-bp-tools-label {
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bcc-ink-3);
  padding: 8px 10px 2px;
  margin-top: 2px;
}

.bcc-bp-tools-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bcc-bp-tool-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--bcc-r-md);
  text-decoration: none;
  font-size: var(--bcc-t-xs);
  font-weight: 500;
  color: var(--bcc-ink-2);
  background: transparent;
  transition: background var(--bcc-dur-1) var(--bcc-ease), color var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-bp-tool-link:hover { background: var(--bcc-surface-2); color: var(--bcc-ink); }

.bcc-bp-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  line-height: 1;
  color: var(--bcc-ink-3);
}

.bcc-bp-tool-icon .bcc-icon { width: 1.15em; height: 1.15em; }
.bcc-bp-tool-link:hover .bcc-bp-tool-icon { color: var(--bcc-primary); }

.bcc-bp-divider {
  height: 1px;
  background: var(--bcc-border);
  margin: 2px 0;
}

/* Dragging state */
.bcc-bp-widget.bcc-bp-dragging .bcc-bp-widget-toggle {
  cursor: grabbing;
}

/* ================================================================
   NOTIFICATION CENTER — slide-in drawer
================================================================ */

/* ── Drawer container ───────────────────────────────────────── */
.bcc-notif-drawer {
  position:        fixed;
  top:             0;
  right:           -440px;
  width:           400px;
  height:          100vh;
  height:          100dvh;
  background:      var(--bcc-surface-1);
  border-left:     1px solid var(--bcc-border-strong);
  border-radius:   var(--bcc-r-xl) 0 0 var(--bcc-r-xl);
  box-shadow:      var(--bcc-shadow-3), -20px 0 60px rgba(6,5,10,.55);
  z-index:         900;
  transition:      right var(--bcc-dur-3) var(--bcc-ease);
  display:         flex;
  flex-direction:  column;
  /* Safe-area insets so header/list/footer clear notches + home bar */
  padding-top:     env(safe-area-inset-top, 0px);
  padding-right:   env(safe-area-inset-right, 0px);
  padding-bottom:  env(safe-area-inset-bottom, 0px);
  padding-left:    env(safe-area-inset-left, 0px);
}

.bcc-notif-drawer.open {
  right: 0;
}

/* Vibrant accent bar along the top edge of the drawer */
.bcc-notif-drawer::before {
  content:    '';
  position:   absolute;
  inset:      0 0 auto 0;
  height:     3px;
  border-top-left-radius: var(--bcc-r-xl);
  background: linear-gradient(90deg, var(--bcc-primary), var(--bcc-accent));
  z-index:    1;
}

.bcc-notif-drawer-inner {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  border-radius:  inherit;
}

/* ── Drawer header ──────────────────────────────────────────── */
.bcc-notif-drawer-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         16px 20px;
  border-bottom:   1px solid var(--bcc-border);
  background:      linear-gradient(180deg, var(--bcc-primary-tint), transparent);
  flex-shrink:     0;
}

.bcc-notif-drawer-header h3 {
  margin:      0;
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  color:       var(--bcc-ink);
}

.bcc-notif-drawer-actions {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.bcc-notif-settings-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          none;
  font-size:       16px;
  cursor:          pointer;
  color:           var(--bcc-ink-2);
  width:           32px;
  height:          32px;
  border-radius:   var(--bcc-r-sm);
  line-height:     1;
  transition:      background var(--bcc-dur-1) var(--bcc-ease),
                   color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-notif-settings-btn:hover {
  background: var(--bcc-surface-3);
  color:      var(--bcc-ink);
}

.bcc-notif-close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          none;
  font-size:       18px;
  cursor:          pointer;
  color:           var(--bcc-ink-2);
  width:           32px;
  height:          32px;
  border-radius:   var(--bcc-r-sm);
  line-height:     1;
  transition:      background var(--bcc-dur-1) var(--bcc-ease),
                   color var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-notif-close:hover {
  background: var(--bcc-surface-3);
  color:      var(--bcc-ink);
}

/* Drawer header controls: enforce ≥44px touch targets */
.bcc-notif-drawer .bcc-notif-settings-btn,
.bcc-notif-drawer .bcc-notif-close {
  min-width:  44px;
  min-height: 44px;
}
.bcc-notif-drawer #bcc-notif-mark-all {
  min-height: 44px;
}

/* ── Notification list (scrollable body) ────────────────────── */
.bcc-notif-drawer .bcc-notif-list {
  flex:          1;
  overflow-y:    auto;
  padding:       8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bcc-surface-4) transparent;
}

.bcc-notif-drawer .bcc-notif-list::-webkit-scrollbar       { width: 6px; }
.bcc-notif-drawer .bcc-notif-list::-webkit-scrollbar-track { background: transparent; }
.bcc-notif-drawer .bcc-notif-list::-webkit-scrollbar-thumb { background: var(--bcc-surface-4); border-radius: 3px; }

/* ── Drawer footer ──────────────────────────────────────────── */
.bcc-notif-footer {
  padding:      12px 20px;
  border-top:   1px solid var(--bcc-border);
  flex-shrink:  0;
}

/* ── Group labels ───────────────────────────────────────────── */
.bcc-notif-group-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color:          var(--bcc-ink-3);
  padding:        10px 20px 4px;
  font-weight:    600;
}

/* ── Individual notification items ─────────────────────────── */
.bcc-notif-drawer .bcc-notif-item {
  display:    flex;
  gap:        12px;
  padding:    12px 20px;
  cursor:     pointer;
  transition: background var(--bcc-dur-1) var(--bcc-ease);
  border-bottom: none; /* override old panel style */
}
@media (hover: hover) {
  .bcc-notif-drawer .bcc-notif-item:hover {
    background: var(--bcc-surface-2);
  }
}
/* Touch/active feedback for notification rows */
.bcc-notif-drawer .bcc-notif-item:active {
  background: var(--bcc-surface-2);
}

/* Visible focus ring for keyboard-operable notification rows */
.bcc-notif-drawer .bcc-notif-item:focus-visible {
  outline:        2px solid var(--bcc-primary);
  outline-offset: -2px;
}

.bcc-notif-drawer .bcc-notif-unread {
  background: var(--bcc-primary-tint);
}
@media (hover: hover) {
  .bcc-notif-drawer .bcc-notif-unread:hover {
    background: var(--bcc-surface-2);
  }
}
/* remove the old ::before dot — icon now serves that role */
.bcc-notif-drawer .bcc-notif-unread::before {
  display: none;
}

/* ── Type icon ──────────────────────────────────────────────── */
.bcc-notif-icon-wrap {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--bcc-primary);
}

.bcc-notif-type-icon {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  font-size:   15px;
  line-height: 1;
}
.bcc-notif-type-icon .bcc-icon { width: 1.1em; height: 1.1em; }

/* ── Notification body ──────────────────────────────────────── */
.bcc-notif-drawer .bcc-notif-body {
  flex:      1;
  min-width: 0;
}

.bcc-notif-title {
  font-size:     13px;
  font-weight:   500;
  line-height:   1.4;
  color:         var(--bcc-ink);
  overflow:      hidden;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bcc-notif-preview {
  font-size:     12px;
  color:         var(--bcc-ink-3);
  margin-top:    1px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.bcc-notif-drawer .bcc-notif-time {
  font-size:  11px;
  color:      var(--bcc-ink-3);
  margin-top: 2px;
}

/* ── Empty / loading states inside drawer ───────────────────── */
.bcc-notif-drawer .bcc-notif-empty {
  padding:    48px 20px;
  text-align: center;
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-sm);
}

/* ================================================================
   NOTIFICATION PREFERENCES MODAL
================================================================ */

.bcc-notif-pref-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(6,5,10,.62);
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter:         blur(6px);
}

.bcc-notif-pref-modal {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-xl);
  box-shadow:    var(--bcc-shadow-3), var(--bcc-shadow-glow);
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  max-height:    90dvh;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
}

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

.bcc-notif-pref-header h3 {
  margin:      0;
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
}

.bcc-notif-pref-close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          none;
  font-size:       18px;
  cursor:          pointer;
  color:           var(--bcc-ink-2);
  width:           32px;
  height:          32px;
  border-radius:   var(--bcc-r-sm);
  line-height:     1;
  transition:      background var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-notif-pref-close:hover { background: var(--bcc-surface-3); color: var(--bcc-ink); }

.bcc-notif-pref-body {
  flex:       1;
  overflow-y: auto;
  padding:    8px 20px 16px;
}

.bcc-notif-pref-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.bcc-notif-pref-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 0;
  border-bottom:   1px solid var(--bcc-border);
}
.bcc-notif-pref-row:last-child { border-bottom: none; }

.bcc-notif-pref-label {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   14px;
  color:       var(--bcc-ink);
}

.bcc-notif-pref-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  font-size:       14px;
  color:           var(--bcc-primary);
}
.bcc-notif-pref-icon .bcc-icon { width: 1.15em; height: 1.15em; }

/* ── Toggle switch ──────────────────────────────────────────── */
.bcc-toggle {
  position:  relative;
  display:   inline-flex;
  cursor:    pointer;
  flex-shrink: 0;
}

.bcc-toggle-input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.bcc-toggle-track {
  display:       inline-block;
  width:         40px;
  height:        22px;
  background:    var(--bcc-surface-3);
  border-radius: 999px;
  border:        1px solid var(--bcc-border-strong);
  position:      relative;
  transition:    background var(--bcc-dur-1) var(--bcc-ease),
                 border-color var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-toggle-thumb {
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--bcc-ink-3);
  transition:    left var(--bcc-dur-1) var(--bcc-ease),
                 background var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-toggle-input:checked + .bcc-toggle-track {
  background:    var(--bcc-primary);
  border-color:  var(--bcc-primary);
}

.bcc-toggle-input:checked + .bcc-toggle-track .bcc-toggle-thumb {
  left:       20px;
  background: #fff;
}

/* ── Quiet hours section ────────────────────────────────────── */
.bcc-notif-quiet-hours {
  margin-top: 20px;
}

.bcc-notif-quiet-label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--bcc-ink);
  margin-bottom: 6px;
}

.bcc-notif-quiet-inputs {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  6px;
}

.bcc-notif-quiet-to {
  font-size: 13px;
  color:     var(--bcc-ink-3);
}

.bcc-notif-quiet-inputs .bcc-input {
  flex:          1;
  height:        36px;
  font-size:     13px;
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  color:         var(--bcc-ink);
  padding:       0 10px;
  outline:       none;
}
.bcc-notif-quiet-inputs .bcc-input:focus {
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 3px var(--bcc-primary-tint);
}

.bcc-notif-quiet-desc {
  font-size:  12px;
  color:      var(--bcc-ink-3);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Modal footer ───────────────────────────────────────────── */
.bcc-notif-pref-footer {
  padding:     14px 20px;
  border-top:  1px solid var(--bcc-border);
  flex-shrink: 0;
  display:     flex;
  justify-content: flex-end;
}

/* ── Mobile: full-width drawer ──────────────────────────────── */
@media (max-width: 480px) {
  .bcc-notif-drawer {
    width: 100vw;
    right: -100vw;
    border-radius: 0;
    border-left: none;
  }
}