/* ---------------------------------------------------
   ChurchLink — design tokens
   Palette: night sky + sky blue
   Display + UI: Mulish (a free, near-identical stand-in for Proxima Nova —
   Proxima Nova itself is commercially licensed and not available for free
   embedding, so this is the closest open substitute)
   (--gold-* variable names kept as-is to avoid touching every rule that
   references them — only the values moved from warm gold to light blue.)
--------------------------------------------------- */
:root{
  --ink-950:#0A0D17;
  --ink-900:#12172A;
  --ink-800:#1B2138;
  --gold-500:#4DA8DA;
  --gold-300:#8FD3F4;
  --cream-100:#F5EFE3;
  --muted-400:#9098B0;
  --burgundy-500:#8B3A3A;
  --like-red:#E04040;
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.45);

  /* Theme surface tokens — control the app "chrome" (settings, profile,
     inbox, chat, groups, search). The video feed keeps the fixed dark
     colors above so captions stay legible over any clip, exactly like
     TikTok's own feed, which never goes light even in light mode. */
  --surface-bg:var(--ink-950);
  --surface-bg-rgb:10,13,23;
  --surface-card:var(--ink-900);
  --surface-border:var(--ink-800);
  --text-primary:var(--cream-100);
  --text-secondary:var(--muted-400);
  --accent-label:var(--gold-300);
}

:root[data-theme="light"]{
  --surface-bg:#FFFFFF;
  --surface-bg-rgb:255,255,255;
  --surface-card:#F5F5F7;
  --surface-border:#E7E7EA;
  --text-primary:#14141A;
  --text-secondary:#6B7280;
  --accent-label:#0F6E9E;
}

/* Text size (Settings > Preferences). Nearly every rule in this file sets an
   explicit px font-size rather than inheriting one, so a root font-size
   override wouldn't cascade down to any of it — `zoom` scales the whole
   rendered layout (fonts, paddings, icons) proportionally instead, which
   actually reaches every element. Supported in Chromium/Edge/Safari, not
   Firefox — an acceptable trade-off for a prototype tested in Edge. */
:root[data-text-size="small"]{ zoom:0.92; }
:root[data-text-size="large"]{ zoom:1.12; }

/* Reduce motion (Settings > Preferences) — a user-controlled override of the
   same idea as the @media (prefers-reduced-motion) rules already used for a
   couple of specific animations elsewhere in this file, applied globally. */
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--surface-bg);
  color:var(--text-primary);
  font-family:'Mulish', sans-serif;
  overscroll-behavior:none;
}

.app{
  position:relative;
  height:100dvh;
  width:100%;
  max-width:480px;
  margin:0 auto;
  overflow:hidden;
  background:var(--surface-bg);
}

/* ---------------- Top bar ---------------- */
.topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:calc(env(safe-area-inset-top, 14px) + 10px) 16px 14px;
  background:linear-gradient(to bottom, rgba(10,13,23,0.75), transparent);
}
.topbar__tabs{
  display:flex;
  gap:22px;
  margin-right:auto;
  margin-left:auto;
}
.tab{
  background:none;
  border:none;
  color:var(--muted-400);
  font-family:'Mulish', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.2px;
  padding:4px 2px;
  position:relative;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.tab__label{
  display:inline-block;
}
.tab__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--burgundy-500);
  box-shadow:0 0 0 0 rgba(139,58,58,0.6);
  animation:pulse 2s infinite;
  display:inline-block;
}
.tab--active{
  color:var(--cream-100);
}
.tab--active::after{
  content:"";
  position:absolute;
  left:50%; bottom:-6px;
  transform:translateX(-50%);
  width:22px; height:3px;
  border-radius:2px;
  background:var(--gold-500);
}
.topbar__search{
  position:absolute;
  right:14px;
  background:transparent;
  border:none;
  color:var(--cream-100);
  opacity:0.7;
  cursor:pointer;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.topbar__search svg{
  stroke:rgba(255,255,255,0.9);
  fill:none;
}
.topbar__devotional{
  position:absolute;
  left:14px;
  background:transparent;
  border:none;
  color:var(--cream-100);
  opacity:0.85;
  cursor:pointer;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------------- Screens (crossfade) ---------------- */
.screen{
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease;
}
.screen--active{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

.iconbtn{
  background:none;
  border:none;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:6px;
  width:36px;
  height:36px;
}
.iconbtn--ghost{ visibility:hidden; }
.iconbtn--light{ color:#fff; }
.iconbtn--send{ color:var(--accent-label); }

/* generic secondary-screen header (back + title) */
.subheader{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 14px) + 8px) 12px 12px;
  background:var(--surface-bg);
  border-bottom:1px solid var(--surface-border);
}
.subheader__actions{ display:flex; align-items:center; gap:2px; }
.subheader__title{
  font-family:'Mulish', sans-serif;
  font-weight:800;
  font-size:18px;
}
.subheader__stories{
  display:flex;
  gap:6px;
}
.story-avatar{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--surface-border);
  color:var(--accent-label);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  border:1.5px solid var(--gold-500);
}
.story-avatar.avatar--alt{ background:var(--burgundy-500); color:var(--cream-100); border-color:var(--burgundy-500); }
.story-avatar.avatar--alt2{ background:var(--gold-300); color:var(--ink-950); border-color:var(--gold-300); }
.story-avatar{ cursor:pointer; padding:0; font-family:'Mulish', sans-serif; flex-shrink:0; }
.story-avatar--seen{ border-color:var(--surface-border); opacity:0.75; }
.subheader--overlay .story-avatar--seen{ border-color:rgba(255,255,255,0.3); }

/* Friends header floats over the video feed instead of pushing it down —
   same treatment as .topbar on Home, and deliberately NOT theme-aware:
   it sits directly on video, which stays dark in both themes, so its
   gradient and text stay fixed-light regardless of the light/dark toggle. */
.subheader--overlay{
  position:absolute;
  top:0; left:0; right:0;
  background:linear-gradient(to bottom, rgba(10,13,23,0.75), transparent);
  border-bottom:none;
}
.subheader--overlay .subheader__title{ color:var(--cream-100); }
.subheader--overlay .iconbtn{ color:var(--cream-100); }
.subheader--overlay .story-avatar{ background:var(--ink-800); color:var(--gold-300); }
.subheader--overlay .story-avatar.avatar--alt{ background:var(--burgundy-500); color:var(--cream-100); }
.subheader--overlay .story-avatar.avatar--alt2{ background:var(--gold-300); color:var(--ink-950); }

.panel{
  height:calc(100% - 60px);
  overflow-y:auto;
  padding:18px 18px 100px;
  scrollbar-width:none;
}
.panel::-webkit-scrollbar{ display:none; }
.panel--flush{ padding-left:14px; padding-right:14px; }
.panel__lead{
  font-size:14.5px;
  color:var(--text-secondary);
  line-height:1.5;
  margin:0 0 22px;
}
.panel__section-label{
  font-family:'Mulish', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--accent-label);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin:22px 0 12px;
}
/* The two spacing exceptions this label ever needs — named instead of ad hoc
   inline margin-top overrides scattered across index.html. */
.panel__section-label--first{ margin-top:0; }
.panel__section-label--tight{ margin-top:8px; }

/* ---------------- Feed ---------------- */
.feed{
  height:100%;
  width:100%;
  overflow-y:scroll;
  /* proximity (not mandatory) so fast mouse-wheel flings can sail past a card;
     app.js snaps the nearest card into view once the wheel goes idle */
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.feed::-webkit-scrollbar{ display:none; }
.post{ scroll-snap-stop:always; }
.feed-empty{
  height:100%;
  width:100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 32px;
  text-align:center;
  background:var(--ink-950);
}
.feed-empty__title{ font-size:16px; font-weight:800; color:#fff; margin:0; }
.feed-empty__body{ font-size:13.5px; color:var(--text-secondary); margin:0; line-height:1.5; }
.feed-empty[hidden]{ display:none; }

.post{
  position:relative;
  height:100%;
  width:100%;
  scroll-snap-align:start;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  user-select:none; /* keeps double-click from selecting caption text */
  touch-action:manipulation; /* tells the browser not to wait for a possible double-tap zoom, so the real double-tap-to-like handler isn't racing it */
}
/* The `hidden` attribute (used by filterFeed's tab switching) is UA-styled
   as `display:none`, but that's the same specificity as the `display:flex`
   above, and author styles win cascade ties — so without this, a "hidden"
   post would still render. */
.post[hidden]{ display:none; }

/* gradient stand-ins remain as a fallback behind/around the <video> */
.post__media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.post__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:transparent;
}
.post__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------------- Loading skeleton (shown until a clip reports loadeddata) ---------------- */
.post__skeleton{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(100deg,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.03) 70%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.6s ease-in-out infinite;
  opacity:1;
  transition:opacity 0.3s ease;
  pointer-events:none;
}
.post__skeleton.is-hidden{ opacity:0; }
@keyframes skeletonShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .post__skeleton{ animation:none; }
}

.post[data-bg="1"] .post__media{
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(77,168,218,0.35), transparent 55%),
    linear-gradient(160deg, #171C33 0%, #0A0D17 70%);
}
.post[data-bg="2"] .post__media{
  background:
    radial-gradient(110% 80% at 70% 20%, rgba(139,58,58,0.30), transparent 55%),
    linear-gradient(160deg, #1B2138 0%, #0A0D17 75%);
}
.post[data-bg="3"] .post__media{
  background:
    radial-gradient(120% 85% at 40% 80%, rgba(143,211,244,0.20), transparent 55%),
    linear-gradient(200deg, #171C33 0%, #0A0D17 70%);
}
.post[data-bg="4"] .post__media{
  background:
    radial-gradient(115% 85% at 55% 25%, rgba(139,58,58,0.24), transparent 55%),
    linear-gradient(170deg, #1B2138 0%, #0A0D17 72%);
}
.post[data-bg="5"] .post__media{
  background:
    radial-gradient(115% 85% at 25% 65%, rgba(143,211,244,0.22), transparent 55%),
    linear-gradient(190deg, #171C33 0%, #0A0D17 72%);
}
.post[data-bg="6"] .post__media{
  background:
    radial-gradient(120% 85% at 60% 75%, rgba(77,168,218,0.26), transparent 55%),
    linear-gradient(210deg, #1B2138 0%, #0A0D17 72%);
}
.post[data-bg="7"] .post__media{
  background:
    radial-gradient(115% 80% at 35% 30%, rgba(139,58,58,0.22), transparent 55%),
    linear-gradient(150deg, #171C33 0%, #0A0D17 74%);
}

/* Group cards previously carried a data-group-bg attribute that no CSS rule
   consumed at all — a dead attribute. Subtle (not full-bleed, unlike feed
   posts) since group-card text sits directly on this background with no
   scrim protecting it. */
.group-card[data-group-bg="1"]{ background: radial-gradient(140% 100% at 15% 0%, rgba(77,168,218,0.16), transparent 60%), var(--surface-card); }
.group-card[data-group-bg="2"]{ background: radial-gradient(140% 100% at 85% 0%, rgba(139,58,58,0.14), transparent 60%), var(--surface-card); }
.group-card[data-group-bg="3"]{ background: radial-gradient(140% 100% at 15% 100%, rgba(143,211,244,0.14), transparent 60%), var(--surface-card); }
.group-card[data-group-bg="4"]{ background: radial-gradient(140% 100% at 85% 100%, rgba(139,58,58,0.12), transparent 60%), var(--surface-card); }

.post__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(6,8,14,0.85) 0%, rgba(6,8,14,0.15) 45%, rgba(6,8,14,0.35) 100%);
}
/* Text/sticker overlays baked in from the post editor — purely decorative
   once posted (dragging only makes sense while editing), so pointer-events
   is off here to keep the feed's own tap/double-tap handlers working normally. */
.post__overlays{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Per-post play/pause for a photo post's attached sound -- distinct from the
   global mute-toggle below, since each photo+audio post has its own
   independent, tap-to-start playback state rather than a shared feed setting. */
.post__sound-toggle{
  position:absolute;
  left:14px;
  top:calc(env(safe-area-inset-top, 14px) + 66px);
  z-index:6;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(10,13,23,0.55);
  backdrop-filter:blur(6px);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.15s ease, transform 0.15s ease;
}
.post__sound-toggle:active{ transform:scale(0.92); }
.post__sound-toggle.is-playing{ background:rgba(77,168,218,0.35); border-color:rgba(77,168,218,0.5); }

/* ---------------- Global mute toggle (overlays the videos) ---------------- */
.mute-toggle{
  position:absolute;
  right:14px;
  top:calc(env(safe-area-inset-top, 14px) + 66px);
  z-index:15;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(10,13,23,0.55);
  backdrop-filter:blur(6px);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.15s ease, transform 0.15s ease;
}
.mute-toggle:active{ transform:scale(0.92); }
.mute-toggle.is-unmuted{ background:rgba(77,168,218,0.35); border-color:rgba(77,168,218,0.5); }
.mute-toggle--friends{ top:calc(env(safe-area-inset-top, 14px) + 60px); }

/* A real volume control, not just mute/unmute — sits directly below the mute
   button, rotated into a vertical slider (a horizontal <input type=range>
   rotated 90deg, the standard cross-browser way to get one). */
.volume-slider-wrap{
  position:absolute;
  right:14px;
  top:calc(env(safe-area-inset-top, 14px) + 110px);
  z-index:15;
  width:38px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.volume-slider-wrap--friends{ top:calc(env(safe-area-inset-top, 14px) + 104px); }
.volume-slider{
  -webkit-appearance:none;
  appearance:none;
  width:78px;
  height:4px;
  margin:0;
  background:rgba(255,255,255,0.25);
  border-radius:999px;
  outline:none;
  transform:rotate(-90deg);
  cursor:pointer;
}
.volume-slider::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:14px;
  margin-top:-5px;
  border-radius:50%;
  background:var(--gold-500);
  border:2px solid #fff;
  cursor:pointer;
}
.volume-slider::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
}
.volume-slider::-moz-range-thumb{
  width:14px; height:14px;
  border-radius:50%;
  background:var(--gold-500);
  border:2px solid #fff;
  cursor:pointer;
}

/* ---------------- Double-click "cross pop" like animation ---------------- */
.pop-cross{
  position:absolute;
  top:50%; left:50%;
  width:72px; height:72px;
  color:var(--like-red);
  opacity:0;
  z-index:30;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0.4);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.45));
  animation:popCrossAnim 0.85s cubic-bezier(.22,.85,.25,1) forwards;
}
.pop-cross svg{ width:100%; height:100%; display:block; }

/* Shown only while a video is deliberately paused by a tap (not for other
   reasons a video might be paused, like scrolling off-screen) — tapping
   anywhere on the post resumes it, same as the tap that paused it. */
.pause-indicator{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  opacity:0.32;
  z-index:6;
  pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.35));
}
@keyframes popCrossAnim{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-6deg); }
  22%{ opacity:0.6; transform:translate(-50%,-50%) scale(1.15) rotate(0deg); }
  38%{ transform:translate(-50%,-50%) scale(0.98); }
  70%{ opacity:0.6; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.06); }
}

/* ---------------- Post body / captions ---------------- */
.post__body{
  position:relative;
  z-index:5;
  padding:0 84px 100px 18px;
  width:100%;
}
.post__church{
  font-family:'Mulish', sans-serif;
  font-weight:800;
  font-size:19px;
  margin:0 0 8px;
  color:var(--cream-100);
}
.post__caption{
  font-size:14.5px;
  line-height:1.5;
  color:var(--cream-100);
  margin:0 0 10px;
  opacity:0.92;
}
.post__tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.post__tags span{
  font-size:13px;
  color:var(--gold-300);
  font-weight:600;
}
.post__meter{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--muted-400);
  font-weight:600;
}
.dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--muted-400);
  display:inline-block;
}
.dot--live{
  background:var(--burgundy-500);
  box-shadow:0 0 0 0 rgba(139,58,58,0.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(139,58,58,0.55); }
  70%{ box-shadow:0 0 0 8px rgba(139,58,58,0); }
  100%{ box-shadow:0 0 0 0 rgba(139,58,58,0); }
}

/* ---------------- Right action rail ---------------- */
.post__actions{
  position:absolute;
  right:12px;
  bottom:110px;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.avatar-btn{
  background:none;
  border:none;
  padding:0;
  margin-bottom:4px;
  cursor:pointer;
  position:relative;
}
/* Friends feed only — a plausible "online now" indicator on the friend's
   avatar, since there's no real presence system to drive it from. */
.online-dot{
  position:absolute;
  bottom:2px;
  right:2px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#3BA55D;
  border:2px solid var(--ink-950);
}
.avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--ink-950);
  font-family:'Mulish', sans-serif;
  font-weight:700;
  font-size:15px;
  border:2px solid var(--cream-100);
}
.avatar--alt{ background:var(--burgundy-500); color:var(--cream-100); }
.avatar--alt2{ background:var(--gold-300); }
.avatar--sm{ width:38px; height:38px; font-size:13px; border-width:1.5px; flex-shrink:0; }
.avatar--xs{ width:26px; height:26px; font-size:10.5px; border-width:1px; }
.avatar--lg{ width:80px; height:80px; font-size:25px; border-width:3px; }
/* Own account's avatar — a smiling emoji standing in for a real photo */
.avatar--emoji{
  background:var(--surface-border);
  font-size:1.15em;
  line-height:1;
}
/* Applied once a real photo (profile or group) has been uploaded — replaces
   the emoji/initials background with the actual image. */
.avatar--photo{
  background-size:cover;
  background-position:center;
  font-size:0;
}

/* ---------------- Profile highlights (Instagram-style, own profile only) ---------------- */
.highlights{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:4px 2px 18px;
  margin-top:2px;
}
.highlight{
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  flex-shrink:0;
}
.highlight__circle{
  width:58px; height:58px;
  border-radius:50%;
  background:var(--surface-card);
  border:1.5px solid var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}
.highlight__name{
  font-size:11.5px;
  font-weight:600;
  color:var(--text-primary);
  max-width:64px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------------- Profile link (Edit profile) ---------------- */
.profile-links{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:var(--accent-label);
  margin:0 0 12px;
}

/* ---------------- Groups / cards ---------------- */
.group-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border-radius:14px;
  margin-bottom:8px;
  background:var(--surface-card);}
.group-card[hidden]{ display:none; }
/* Only the Groups list's cards open a chat on tap (Blocked/Muted/Devices/
   People-list reuse this same component for a non-clickable row). */
#screen-groups .group-card{ cursor:pointer; }
.group-card__info{ flex:1; min-width:0; }
.group-card__name{ font-weight:700; font-size:14.5px; margin:0 0 2px; color:var(--text-primary); }
.group-card__meta{ font-size:12.5px; color:var(--text-secondary); margin:0; }
.pill{
  background:var(--gold-500);
  color:var(--ink-950);
  border:none;
  font-weight:700;
  font-size:12.5px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  flex-shrink:0;
}
.pill--muted{ background:transparent; color:var(--text-secondary); border:1.5px solid var(--surface-border); }

/* ---------------- Group detail ---------------- */
.group-detail{
  height:100%;
  overflow-y:auto;
  scrollbar-width:none;
}
.group-detail::-webkit-scrollbar{ display:none; }
.group-detail__body{
  position:relative;
}
.group-detail__header{
  text-align:center;
  padding-top:12px;
}
.group-detail__avatar{
  border:4px solid var(--surface-bg);
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
  margin-bottom:10px;
}
.group-detail__name{
  font-weight:800;
  font-size:19px;
  color:var(--text-primary);
  margin:0 0 4px;
}
.group-detail__meta{
  font-size:13px;
  color:var(--text-secondary);
  margin:0 0 14px;
}
.group-detail__join{
  display:inline-block;
  width:auto;
  padding:10px 32px;
  margin-bottom:16px;
}
.group-detail__desc{
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-secondary);
  margin:0 0 8px;
  padding:0 6px;
}
.group-detail__members{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface-card);
  border:none;
  border-radius:14px;  padding:12px 14px;
  cursor:pointer;
  text-align:left;
  margin-bottom:4px;
}
.group-detail__stack{
  display:flex;
  flex-shrink:0;
}
.group-detail__stack .avatar{
  width:30px; height:30px;
  font-size:11px;
  border-width:2px;
  border-color:var(--surface-card);
  margin-left:-10px;
}
.group-detail__stack .avatar:first-child{ margin-left:0; }
.group-detail__members-text{
  flex:1;
  font-size:13.5px;
  font-weight:700;
  color:var(--text-primary);
}

/* ---------------- Live grid ---------------- */
.live-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.live-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:var(--surface-card);}
.live-card__media{ height:150px; }
.live-card__media--1{ background:radial-gradient(120% 90% at 30% 20%, rgba(77,168,218,0.30), transparent 55%), linear-gradient(160deg,#1B2138,#0A0D17); }
.live-card__media--2{ background:radial-gradient(110% 80% at 70% 20%, rgba(139,58,58,0.28), transparent 55%), linear-gradient(160deg,#171C33,#0A0D17); }
.live-card__media--3{ background:radial-gradient(120% 85% at 40% 80%, rgba(143,211,244,0.22), transparent 55%), linear-gradient(200deg,#1B2138,#0A0D17); }
.live-card__media--4{ background:radial-gradient(110% 85% at 60% 30%, rgba(77,168,218,0.22), transparent 55%), linear-gradient(180deg,#171C33,#0A0D17); }
.live-badge{
  position:absolute;
  top:8px; left:8px;
  background:var(--burgundy-500);
  color:var(--cream-100);
  font-size:10.5px;
  font-weight:800;
  padding:3px 7px;
  border-radius:5px;
  letter-spacing:0.3px;
}
.live-card__foot{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
}
.live-card__title{ font-size:12.5px; font-weight:700; margin:0; line-height:1.25; color:var(--text-primary); }
.live-card__host{ font-size:11px; color:var(--text-secondary); margin:2px 0 0; }

/* ---------------- Events ---------------- */
.event-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:14px;
  margin-bottom:8px;
  background:var(--surface-card);  cursor:pointer;
}
.event-card--past{ opacity:0.5; }
.event-card__rsvp:disabled{ cursor:default; opacity:0.7; }
.event-card__date{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  flex-shrink:0;
  border-radius:10px;
  background:var(--surface-border);
}
.event-card__day{ font-family:'Mulish', sans-serif; font-weight:700; font-size:17px; color:var(--text-primary); line-height:1.1; }
.event-card__month{ font-size:10px; font-weight:700; text-transform:uppercase; color:var(--accent-label); letter-spacing:0.4px; }
.event-card__info{ flex:1; min-width:0; }
.event-card__title{ font-weight:700; font-size:14px; margin:0 0 3px; color:var(--text-primary); }
.event-card__meta{ font-size:12px; color:var(--text-secondary); margin:0; }
.event-card__rsvp.is-going{ background:transparent; color:var(--text-secondary); border:1.5px solid var(--surface-border); }

/* ---------------- Search ---------------- */
.searchheader{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  padding:calc(env(safe-area-inset-top, 14px) + 8px) 10px 12px;
  background:var(--surface-bg);
  border-bottom:1px solid var(--surface-border);
}
.groups-search{
  padding:10px 18px;
  border-bottom:1px solid var(--surface-border);
}
.searchheader__box{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface-card);
  border-radius:10px;
  padding:9px 12px;
  color:var(--text-secondary);
}
.searchheader__box input{
  flex:1;
  background:none;
  border:none;
  color:var(--text-primary);
  font-family:'Mulish', sans-serif;
  font-size:14px;
  outline:none;
}
.searchheader__box input::placeholder{ color:var(--text-secondary); }
.searchheader__cancel{
  background:none;
  border:none;
  color:var(--accent-label);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
}
.search-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 2px;
  font-size:14px;
  border-bottom:1px solid var(--surface-border);
}
.search-row[hidden]{ display:none; }
.search-row__x{ color:var(--text-secondary); font-size:13px; cursor:pointer; }
.search-row--tag{ cursor:pointer; }
.search-row--tag span{ color:var(--accent-label); font-weight:600; }
.action-btn{
  background:none;
  border:none;
  color:var(--cream-100);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
  padding:0;
}
.action-btn[data-action="comment"],
.action-btn[data-action="share"],
.action-btn[data-action="save"] {
  opacity:0.75;
}
.action-btn[data-action="comment"] svg,
.action-btn[data-action="share"] svg,
.action-btn[data-action="save"] svg {
  stroke:rgba(255,255,255,1);
  fill:none;
  stroke-width:2;
}
.action-count{
  font-size:12px;
  font-weight:700;
  color:var(--cream-100);
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}

/* signature cross reaction */
.icon-cross,
.icon-flame{
  fill:var(--cream-100);
  color:var(--cream-100);
  opacity:0.9;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), fill 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.action-btn--flame.is-active .icon-cross,
.action-btn--flame.is-active .icon-flame{
  fill:var(--like-red);
  color:var(--like-red);
  filter:drop-shadow(0 0 10px rgba(224,64,64,0.85)) drop-shadow(0 0 18px rgba(224,64,64,0.6));
  transform:scale(1.18);
  opacity:1;
}
.action-btn--flame.is-active .action-count{
  color:var(--like-red);
}

/* save (bookmark) button — same red pop treatment as the like button */
.icon-save{
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.action-btn[data-action="save"].is-active{
  opacity:1;
}
.action-btn[data-action="save"].is-active .icon-save{
  fill:var(--gold-500);
  stroke:var(--gold-500);
  filter:drop-shadow(0 0 10px rgba(77,168,218,0.85)) drop-shadow(0 0 18px rgba(77,168,218,0.6));
  transform:scale(1.12);
}
.action-btn[data-action="save"].is-active .action-count{
  color:var(--gold-500);
}

/* ---------------- Bottom nav ---------------- */
.bottomnav{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px calc(env(safe-area-inset-bottom, 10px) + 10px);
  /* Solid on chrome screens (Groups/Inbox/Profile/etc). Home/Friends override
     this to a translucent scrim below, since there the video fills the whole
     screen and the nav floats on top of it rather than sitting on a surface. */
  background:var(--surface-bg);
}
.navbtn{
  background:none;
  border:none;
  color:var(--text-secondary);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
}
.navbtn svg{
  stroke:currentColor;
  fill:none;
  opacity:0.8;
}
.navbtn--active{ color:var(--text-primary); }
.navbtn span{ letter-spacing:0.2px; }

.navbtn--post{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
  width:42px; height:32px;
  border-radius:10px;
  justify-content:center;
}

/* Home/Friends: video fills the full screen, nav floats on top as a single
   smooth fade (one gradient stop only — a middle stop here previously created
   a visible kink/seam partway up the bar, which read as a hard shaded line). */
.bottomnav.bottomnav--over-video{
  background:linear-gradient(to top, rgba(10,13,23,0.85), rgba(10,13,23,0));
}
.bottomnav.bottomnav--over-video .navbtn{ color:var(--muted-400); }
.bottomnav.bottomnav--over-video .navbtn--active{ color:var(--cream-100); }

/* ---------------- Friends mini-feed tweak ---------------- */
/* Header is now an absolute overlay (see .subheader--overlay), so the video
   fills the full screen behind it rather than being pushed down. */
.feed--friends{ height:100%; }
.feed--friends .post__body{ padding-bottom:100px; }

/* ---------------- Create modal (camera / upload) ---------------- */
.create-modal{
  position:absolute;
  inset:0;
  z-index:90;
  background:linear-gradient(160deg, #23283d 0%, #0A0D17 65%);
  opacity:0;
  pointer-events:none;
  transform:scale(1.02);
  transition:opacity 0.28s ease, transform 0.28s ease;
  overflow:hidden;
}
.create-modal.is-open{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}
.create-modal__viewfinder{
  position:absolute;
  inset:0;
  background:radial-gradient(120% 70% at 50% 0%, rgba(77,168,218,0.10), transparent 60%);
}
/* Real camera feed, laid over the placeholder gradient when getUserMedia
   actually succeeds (needs a secure context — https or http://localhost). */
.create-modal__live-preview{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1); /* mirror the front camera, like every other camera app */
}
.create-modal__icon-btn{
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.4);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.15s ease, color 0.15s ease;
}
.create-modal__icon-btn.is-on{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
}
.create-modal__top-left{
  position:absolute;
  top:calc(env(safe-area-inset-top, 14px) + 14px);
  left:16px;
  z-index:2;
  display:flex;
  gap:10px;
}
.create-modal__top-right{
  position:absolute;
  top:calc(env(safe-area-inset-top, 14px) + 14px);
  right:16px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.create-modal__sound-island{
  position:absolute;
  top:calc(env(safe-area-inset-top, 14px) + 14px);
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:150px;
  background:rgba(0,0,0,0.4);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.create-modal__sound-island span:not(.create-modal__sound-icon):not(.chev){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.create-modal__sound-icon{ font-size:14px; flex-shrink:0; }
.create-modal__sound-island .chev{ color:rgba(255,255,255,0.7); flex-shrink:0; }
/* Small "now playing" equalizer — shown once a real sound (not "No sound") is picked */
.create-modal__sound-playing{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:12px;
  flex-shrink:0;
}
.create-modal__sound-playing[hidden]{ display:none; }
.create-modal__sound-playing span{
  width:3px;
  border-radius:1px;
  background:var(--gold-300);
  animation:soundBar 0.9s ease-in-out infinite;
}
.create-modal__sound-playing span:nth-child(1){ height:40%; animation-delay:0s; }
.create-modal__sound-playing span:nth-child(2){ height:100%; animation-delay:0.2s; }
.create-modal__sound-playing span:nth-child(3){ height:65%; animation-delay:0.4s; }
@keyframes soundBar{
  0%, 100%{ transform:scaleY(0.4); }
  50%{ transform:scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .create-modal__sound-playing span{ animation:none; }
}

/* Record countdown (3…2…1…) shown when a timer is set */
.create-modal__countdown{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
  color:#fff;
  font-family:'Mulish', sans-serif;
  font-weight:800;
  font-size:96px;
  pointer-events:none;
}
.create-modal__countdown[hidden]{ display:none; }
.create-modal__mode-switch{
  position:absolute;
  bottom:calc(env(safe-area-inset-bottom, 10px) + 34px + 76px + 18px);
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  gap:4px;
  background:rgba(0,0,0,0.4);
  border-radius:999px;
  padding:4px;
}
.create-modal__mode-btn{
  background:none;
  border:none;
  color:rgba(255,255,255,0.65);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.4px;
  padding:7px 16px;
  border-radius:999px;
  cursor:pointer;
}
.create-modal__mode-btn.is-active{
  background:rgba(255,255,255,0.18);
  color:#fff;
}
.create-modal__bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px calc(env(safe-area-inset-bottom, 10px) + 34px);
}
.create-modal__gallery,
.create-modal__spacer{
  width:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.create-modal__gallery{
  background:none;
  border:none;
  color:rgba(255,255,255,0.85);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.create-modal__gallery-icon{
  width:44px; height:44px;
  border-radius:10px;
  background:linear-gradient(160deg,#2a3050,#12172A);
  border:1.5px solid rgba(255,255,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.create-modal__record{
  width:76px; height:76px;
  border-radius:50%;
  background:none;
  border:4px solid #fff;
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.create-modal__record-inner{
  width:58px; height:58px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  transition:border-radius 0.2s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
}
.create-modal__record.is-recording .create-modal__record-inner{
  width:30px; height:30px;
  border-radius:8px;
  background:var(--like-red);
}
.create-modal__record.is-recording{
  border-color:var(--like-red);
}

/* ---------------- Post editor (filters / text / stickers / settings) ---------------- */
.post-edit{
  position:relative;
  width:100%; height:100%;
  background:#000;
  overflow:hidden;
}
.post-edit__media{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.post-edit__media img, .post-edit__media video{
  width:100%; height:100%;
  object-fit:cover;
  transition:filter 0.15s ease;
}
.post-edit__overlays{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none; /* lets taps on empty media pass through to pause/play the video underneath */
}
.post-edit__overlay-item{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  cursor:grab;
  touch-action:none;
  user-select:none;
  pointer-events:auto;
}
.post-edit__overlay-item--text{
  color:#fff;
  font-weight:800;
  font-size:20px;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.15);
  border-radius:8px;
}
.post-edit__overlay-item--sticker{ font-size:40px; }
.post-edit__overlay-remove{
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(0,0,0,0.65);
  color:#fff;
  border:none;
  font-size:11px;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.post-edit__top{
  position:absolute; top:0; left:0; right:0;
  z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 14px) + 10px) 14px 10px;
}
.post-edit__top-actions{ display:flex; align-items:center; gap:8px; }
.post-edit__story-btn, .post-edit__next-btn{
  border:none;
  border-radius:999px;
  padding:9px 18px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}
.post-edit__story-btn{
  background:rgba(0,0,0,0.4);
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.4);
}
.post-edit__next-btn{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
  font-weight:800;
}
.post-edit__tools{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.post-edit__tool-wrap{
  position:relative;
  display:flex;
}
.post-edit__sound-remove{
  position:absolute;
  top:-6px; right:-6px;
  width:16px; height:16px;
  border-radius:50%;
  background:rgba(0,0,0,0.75);
  color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  font-size:9px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.post-edit__tool{
  background:none;
  border:none;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.post-edit__tool.is-active{ color:var(--gold-300); }
.post-edit__tool.is-recording-voice{ color:var(--like-red); animation:voiceRecordPulse 1.1s ease-in-out infinite; }
.post-edit__tool-glyph{ font-size:19px; line-height:1; }
.post-edit__filters{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:4;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:14px 16px calc(env(safe-area-inset-bottom, 10px) + 14px);
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  scrollbar-width:none;
}
.post-edit__filters::-webkit-scrollbar{ display:none; }
.post-edit__filters[hidden]{ display:none; }
.post-edit__filter-chip{
  flex-shrink:0;
  background:rgba(255,255,255,0.12);
  border:1.5px solid transparent;
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.post-edit__filter-chip.is-active{
  background:rgba(255,255,255,0.22);
  border-color:#fff;
}

/* ---------------- Post details (caption / location / link / post-or-draft) ---------------- */
.post-details__media-row{
  display:flex;
  gap:12px;
  margin-bottom:18px;
}
.post-details__thumb{
  width:64px; height:64px;
  border-radius:10px;
  background-color:var(--surface-card);
  flex-shrink:0;
  overflow:hidden;
}
.post-details__thumb video, .post-details__thumb img{
  width:100%; height:100%; object-fit:cover;
}
.post-details__caption{
  flex:1;
  resize:none;
  background:none;
  border:none;
  color:var(--text-primary);
  font-family:'Mulish', sans-serif;
  font-size:14px;
  outline:none;
  min-height:64px;
}
.post-details__actions{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  gap:10px;
  padding:12px 16px calc(env(safe-area-inset-bottom, 10px) + 12px);
  background:var(--surface-bg);
  border-top:1px solid var(--surface-border);
}
.post-details__draft-btn, .post-details__post-btn{
  flex:1;
  border:none;
  border-radius:999px;
  padding:13px;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}
.post-details__draft-btn{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  color:var(--text-primary);
}
.post-details__post-btn{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
  font-weight:800;
}

/* ---------------- Post preview (how the post will actually render) ---------------- */
.post-preview__body{
  position:absolute; inset:0;
  background:#000;
}
.post-preview__media{ position:absolute; inset:0; }
.post-preview__media img, .post-preview__media video{ width:100%; height:100%; object-fit:cover; }
.post-preview__info{
  position:absolute;
  left:16px; right:90px; bottom:110px;
  z-index:2;
  color:#fff;
}
.post-preview__church{ font-weight:800; font-size:14.5px; margin:0 0 6px; }
.post-preview__caption{ font-size:13.5px; line-height:1.4; margin:0 0 8px; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.post-preview__meta{ font-size:12px; opacity:0.85; margin:0; }

/* ---------------- Profile screens ---------------- */
.profileheader{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 14px) + 8px) 12px 12px;
}
.profileheader__right{ display:flex; gap:4px; }

.panel--profile{ padding-top:6px; }
.profile-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:10px;
}
#ownAvatarLg{ cursor:pointer; }
.profile-name{
  font-family:'Mulish', sans-serif;
  font-weight:700;
  font-size:20px;
  margin:12px 0 3px;
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
}
.verified-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  display:inline-block;
}
.verified-dot[hidden]{ display:none; }
.profile-church{ font-size:13px; color:var(--text-secondary); margin:0; }

.profile-stats{
  display:flex;
  justify-content:center;
  gap:34px;
  margin-bottom:16px;
}
.stat{ text-align:center; cursor:pointer; }
.stat__num{
  font-family:'Mulish', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0 0 2px;
  color:var(--text-primary);
}
.stat__label{ font-size:11.5px; color:var(--text-secondary); margin:0; }

.edit-profile-btn{
  display:block;
  width:100%;
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  color:var(--text-primary);
  font-weight:700;
  font-size:14px;
  padding:10px 0;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:8px;
}
.bio-prompt{
  text-align:center;
  color:var(--text-secondary);
  font-size:13px;
  margin:0 0 20px;
}
.bio-text{
  text-align:center;
  font-size:14.5px;
  color:var(--text-secondary);
  line-height:1.5;
  margin:0 0 4px;
  padding:0 12px;
}

.profile-cta-row{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.follow-btn{
  flex:1;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
  border:none;
  font-weight:800;
  font-size:14px;
  padding:11px 0;
  border-radius:8px;
  cursor:pointer;
}
.follow-btn.is-following{
  background:var(--surface-card);
  color:var(--text-primary);
  border:1px solid var(--surface-border);
}
.message-btn{
  flex:1;
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  color:var(--text-primary);
  font-weight:700;
  font-size:14px;
  padding:11px 0;
  border-radius:8px;
  cursor:pointer;
}
.follow-btn:disabled,
.message-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.profile-tabs{
  display:flex;
  justify-content:center;
  gap:44px;
  border-bottom:1px solid var(--surface-border);
  padding-bottom:2px;
  margin-bottom:2px;
}
.profile-tab{
  background:none;
  border:none;
  color:var(--text-secondary);
  padding:10px 4px;
  cursor:pointer;
  position:relative;
}
.profile-tab--active{ color:var(--text-primary); }
.profile-tab--active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--gold-500);
}
.profile-tab .icon-cross{ opacity:1; fill:currentColor; }

.grid-thumbs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3px;
  margin-top:6px;
}
.grid-thumbs[hidden]{ display:none; }
.grid-thumb{
  position:relative;
  aspect-ratio:9/13;
  background:linear-gradient(160deg,#1B2138,#0A0D17);
}
.grid-thumb--1{ background:radial-gradient(120% 90% at 30% 15%, rgba(77,168,218,0.30), transparent 55%), linear-gradient(160deg,#171C33,#0A0D17); }
.grid-thumb--2{ background:radial-gradient(110% 80% at 70% 20%, rgba(139,58,58,0.26), transparent 55%), linear-gradient(160deg,#1B2138,#0A0D17); }
.grid-thumb--3{ background:radial-gradient(120% 85% at 40% 80%, rgba(143,211,244,0.20), transparent 55%), linear-gradient(200deg,#171C33,#0A0D17); }
.grid-thumb--4{ background:radial-gradient(110% 85% at 60% 30%, rgba(77,168,218,0.20), transparent 55%), linear-gradient(180deg,#1B2138,#0A0D17); }
.grid-thumb--5{ background:radial-gradient(120% 80% at 50% 60%, rgba(139,58,58,0.22), transparent 55%), linear-gradient(170deg,#171C33,#0A0D17); }
.grid-thumb--6{ background:radial-gradient(110% 80% at 20% 40%, rgba(143,211,244,0.18), transparent 55%), linear-gradient(190deg,#1B2138,#0A0D17); }
.grid-thumb__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.grid-thumb__plays{
  position:absolute;
  left:5px; bottom:5px;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}

/* ---------------- Modal backdrop + sheets ---------------- */
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:150;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }

.sheet{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:160;
  background:var(--surface-bg);
  border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,0.5);
  transform:translateY(100%);
  /* translateY(100%) only moves a sheet down by its OWN height, not the
     viewport's -- for a short sheet (a couple of picker rows, an icon grid)
     that's nowhere near enough to actually clear the screen, so a "closed"
     sheet was still sitting fully visible lower on screen and painting over
     whatever opened next (later in DOM order = higher paint priority at the
     same z-index). visibility is delayed until the slide-out finishes so the
     close animation still plays, but a closed sheet can never be seen or
     clicked again regardless of its own height. */
  visibility:hidden;
  transition:transform 0.3s cubic-bezier(.32,.72,0,1), visibility 0s linear 0.3s;
  display:flex;
  flex-direction:column;
}
.sheet.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform 0.3s cubic-bezier(.32,.72,0,1);
}
.sheet--comments{ height:64%; }
.sheet--share{ height:46%; }

.sheet__handle{
  width:36px; height:4px;
  background:var(--surface-border);
  border-radius:4px;
  margin:10px auto 6px;
}
.sheet__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 16px 10px;
  border-bottom:1px solid var(--surface-border);
  font-weight:700;
  font-size:14.5px;
}
.sheet__body{
  flex:1;
  overflow-y:auto;
  padding:8px 16px;
  scrollbar-width:none;
}
.sheet__body::-webkit-scrollbar{ display:none; }
.sheet__inputrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px calc(env(safe-area-inset-bottom, 10px) + 10px);
  border-top:1px solid var(--surface-border);
}
.sheet__inputrow input{
  flex:1;
  background:var(--surface-card);
  border:none;
  border-radius:999px;
  padding:10px 14px;
  color:var(--text-primary);
  font-size:13.5px;
  outline:none;
}

.comment-row{
  display:flex;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--surface-border);
}
.comment-row__content{ flex:1; min-width:0; }
.comment-row__name{ font-size:12px; color:var(--text-secondary); margin:0 0 3px; font-weight:700; }
.comment-row__text{ font-size:14px; margin:0 0 6px; line-height:1.4; }
.comment-row__meta{ display:flex; gap:14px; font-size:11.5px; color:var(--text-secondary); }
.comment-row__like{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--text-secondary);
  font-size:11px;
  padding-top:2px;
  cursor:pointer;
}
.post__more{
  position:absolute;
  top:calc(env(safe-area-inset-top, 14px) + 14px);
  right:14px;
  z-index:5;
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.4);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.comment-row__more{
  background:none;
  border:none;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 4px;
  cursor:pointer;
  align-self:flex-start;
}

.share-people{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:14px 16px 6px;
}
.share-person{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  cursor:pointer;
}
.share-person p{ font-size:11px; color:var(--text-secondary); margin:0; }
.share-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  padding:14px 16px;
}
.share-tile{
  background:none;
  border:none;
  color:var(--text-primary);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  font-weight:600;
  cursor:pointer;
}
.share-tile__icon{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--surface-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.share-tile__icon--gold{ background:var(--gold-500); color:var(--ink-950); }
.share-tile__icon--green{ background:#3BA55D; color:#fff; }

/* ---------------- Toast ---------------- */
.toast{
  position:absolute;
  left:50%;
  bottom:90px;
  transform:translate(-50%, 12px);
  z-index:170;
  background:var(--gold-500);
  color:var(--ink-950);
  font-weight:800;
  font-size:13px;
  padding:9px 18px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}
.toast.is-visible.is-clickable{
  pointer-events:auto;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------- Loading state (sign-in, join, finishing a post) ---------------- */
.is-loading{
  color:transparent !important;
  pointer-events:none;
  position:relative;
}
.is-loading::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border:2px solid rgba(77,168,218,0.25);
  border-top-color:var(--gold-500);
  border-radius:50%;
  animation:btnSpin 0.7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .is-loading::after{ animation:none; }
}

/* ---------------- Pull-to-refresh ---------------- */
.pull-refresh{
  height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pull-refresh__spinner{
  width:18px; height:18px;
  border:2px solid rgba(127,127,127,0.3);
  border-top-color:var(--gold-500);
  border-radius:50%;
}
.pull-refresh.is-refreshing .pull-refresh__spinner{
  animation:btnSpin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .pull-refresh.is-refreshing .pull-refresh__spinner{ animation:none; }
}

/* ---------------- Responsive floor ---------------- */
@media (min-width:481px){
  .app{
    border-radius:28px;
    box-shadow:var(--shadow-deep);
    margin-top:20px;
    height:calc(100dvh - 40px);
  }
}

@media (prefers-reduced-motion: reduce){
  .dot--live{ animation:none; }
  .icon-flame{ transition:none; }
}

:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:2px;
}

/* ---------------- Hover states (pointer devices only, so touch never gets
   a stuck :hover) — one consistent subtle treatment reused across every
   recurring interactive class rather than one-off styling per component ---------------- */
@media (hover: hover){
  .iconbtn:hover{
    background:rgba(77, 168, 218, 0.14);
    border-radius:50%;
  }
  .mute-toggle:hover,
  .profile-tab:hover{
    background:rgba(77, 168, 218, 0.14);
  }
  .action-btn:hover{ opacity:0.8; }
  .pill:hover,
  .edit-profile-photo__btn:hover{
    filter:brightness(1.08);
  }
  .follow-btn:hover,
  .message-btn:hover{
    filter:brightness(1.06);
  }
  .navbtn:hover{ opacity:0.85; }
  .settings-row:hover,
  .group-card:hover,
  .chat-row:hover{
    background:var(--surface-card);
  }
}

/* The rotated volume slider's default focus ring boxes the whole rotated
   track oddly — give just its thumb a properly sized ring instead. */
.volume-slider:focus-visible{ outline:none; }
.volume-slider:focus-visible::-webkit-slider-thumb{
  outline:2px solid var(--gold-300);
  outline-offset:2px;
}
.volume-slider:focus-visible::-moz-range-thumb{
  outline:2px solid var(--gold-300);
  outline-offset:2px;
}

/* =====================================================
   Inbox / Chat / Activity / Requests / Settings / Live viewer
   ===================================================== */

.chev{ color:var(--text-secondary); font-size:19px; line-height:1; }

/* ---- bottom nav badge ---- */
.navbtn{ position:relative; }
.navbtn__badge{
  position:absolute;
  top:-4px; right:2px;
  background:var(--burgundy-500);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  min-width:15px;
  height:15px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
}

/* ---- Inbox rows ---- */
.inbox-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  border:none;
  padding:12px 4px;
  cursor:pointer;
  text-align:left;
  border-bottom:1px solid var(--surface-border);
}
.inbox-row__icon{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--surface-card);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.inbox-row__icon--gold{ background:var(--gold-500); color:var(--ink-950); }
.inbox-row__text{ flex:1; min-width:0; }
.inbox-row__title{ font-weight:700; font-size:14.5px; margin:0 0 2px; color:var(--text-primary); }
.inbox-row__sub{ font-size:12px; color:var(--text-secondary); margin:0; }
.inbox-row__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--burgundy-500);
  flex-shrink:0;
}

/* ---- Chat list rows ---- */
.chat-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  border:none;
  padding:11px 4px;
  cursor:pointer;
  text-align:left;
}
.chat-row__text{ flex:1; min-width:0; }
.chat-row__name{ font-weight:700; font-size:14px; margin:0 0 2px; color:var(--text-primary); }
.chat-row__preview{
  font-size:12.5px;
  color:var(--text-secondary);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.chat-row__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  font-size:11px;
  color:var(--text-secondary);
  flex-shrink:0;
}
.chat-row__unread,
.group-card__unread{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--gold-500);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ---- Activity screen ---- */
.activity-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 2px;
  border-bottom:1px solid var(--surface-border);
  cursor:pointer;
}
.activity-row__text{
  flex:1;
  font-size:13.5px;
  line-height:1.4;
  margin:0;
  color:var(--text-primary);
}
.activity-row__text b{ font-weight:700; }
.activity-row__thumb{
  width:40px; height:40px;
  border-radius:6px;
  flex-shrink:0;
  background:radial-gradient(120% 90% at 30% 15%, rgba(77,168,218,0.30), transparent 55%), linear-gradient(160deg,#171C33,#0A0D17);
}
.activity-row__thumb--alt{
  background:radial-gradient(110% 80% at 70% 20%, rgba(139,58,58,0.28), transparent 55%), linear-gradient(160deg,#1B2138,#0A0D17);
}

/* ---- Requests screen ---- */
.request-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 2px;
  border-bottom:1px solid var(--surface-border);
  transition:opacity 0.2s ease;
}
.request-row__text{ flex:1; min-width:0; }
.request-row__name{ font-weight:700; font-size:14px; margin:0 0 3px; color:var(--text-primary); }
.request-row__preview{ font-size:12.5px; color:var(--text-secondary); margin:0 0 10px; }
.request-row__actions{ display:flex; gap:8px; }

/* ---- Chat (DM) screen ---- */
.chatheader{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(env(safe-area-inset-top, 14px) + 8px) 12px 12px;
  background:var(--surface-bg);
  border-bottom:1px solid var(--surface-border);
}
.chatheader__name{
  flex:1;
  font-family:'Mulish', sans-serif;
  font-weight:800;
  font-size:16px;
  background:none;
  border:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
  padding:0;
}
.chatheader .avatar-btn{ margin-bottom:0; }
.chatheader__group{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  cursor:pointer;
  padding:2px 0;
}
.chatheader__group .chatheader__name{
  flex:none;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chatheader__sub{
  font-size:11.5px;
  color:var(--text-secondary);
  margin-top:1px;
}
.chatbody{
  height:calc(100% - 60px - 62px - 44px);
  overflow-y:auto;
  padding:14px 14px 10px;
  scrollbar-width:none;
}
.chatbody::-webkit-scrollbar{ display:none; }
.chat-date{
  text-align:center;
  font-size:11px;
  color:var(--text-secondary);
  margin:14px 0;
}
/* Group system messages ("X created this group", "X added you") — centered,
   pill-shaped, same idea as WhatsApp's grey system bubbles. */
.chat-system{
  text-align:center;
  font-size:11.5px;
  color:var(--text-secondary);
  background:var(--surface-card);
  border-radius:999px;
  padding:6px 14px;
  margin:0 auto 8px;
  width:fit-content;
  max-width:85%;
}
.chat-bubble__sender{
  font-size:12px;
  font-weight:800;
  margin:0 0 2px;
}
.chat-bubble__sender--a{ color:var(--gold-500); }
.chat-bubble__sender--b{ color:var(--burgundy-500); }
.chat-bubble__sender--c{ color:var(--like-red); }
.chat-bubble{
  max-width:75%;
  padding:10px 13px;
  border-radius:16px;
  font-size:14px;
  line-height:1.4;
  margin-bottom:8px;
}
.chat-bubble--in{
  background:var(--surface-card);
  border-bottom-left-radius:4px;
  margin-right:auto;
}
.chat-bubble--out{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
  border-bottom-right-radius:4px;
  margin-left:auto;
  font-weight:600;
}
.chat-read-label{
  text-align:right;
  font-size:11px;
  color:var(--text-secondary);
  margin:-4px 2px 8px;
}
.chat-bubble--reaction{
  font-size:22px;
  padding:6px 10px;
  background:none;
}
.chat-bubble--image{
  padding:4px;
  background:none;
}
.chat-bubble--image img{
  display:block;
  max-width:100%;
  width:180px;
  border-radius:12px;
}
.chat-bubble--voice{
  display:flex;
  align-items:center;
  gap:8px;
}
.chat-bubble--voice audio{
  height:32px;
  max-width:210px;
}
.chat-bubble__voice-duration{
  font-size:11.5px;
  font-weight:700;
  opacity:0.75;
  flex-shrink:0;
}
@keyframes voiceRecordPulse{
  0%{ opacity:1; }
  50%{ opacity:0.35; }
  100%{ opacity:1; }
}
.chatinput .iconbtn.is-recording-voice{
  color:var(--like-red);
  animation:voiceRecordPulse 1.1s ease-in-out infinite;
}
.chat-share-card{
  width:200px;
  border-radius:10px;
  overflow:hidden;
  background:var(--surface-border);
}
.chat-share-card__media{
  height:110px;
  background:radial-gradient(120% 90% at 30% 20%, rgba(77,168,218,0.28), transparent 55%), linear-gradient(160deg,#1B2138,#0A0D17);
}
.chat-share-card__caption{
  font-size:12px;
  padding:8px 10px;
  margin:0;
  color:var(--text-primary);
}
.chat-reactions{
  position:absolute;
  left:0; right:0; bottom:62px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 4px;
  background:var(--surface-bg);
}
.chat-reactions button{
  background:var(--surface-card);
  border:none;
  border-radius:999px;
  width:32px; height:32px;
  font-size:15px;
  cursor:pointer;
}
.chat-reactions__shared{
  width:auto !important;
  padding:0 12px;
  font-size:11px !important;
  font-weight:700;
  color:var(--accent-label);
}
.chatinput{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px calc(env(safe-area-inset-bottom, 10px) + 8px);
  border-top:1px solid var(--surface-border);
  background:var(--surface-bg);
}
.chatinput input{
  flex:1;
  background:var(--surface-card);
  border:none;
  border-radius:999px;
  padding:10px 14px;
  color:var(--text-primary);
  font-size:14px;
  outline:none;
}
.chatinput input:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* ---- Settings screen ---- */
.settings-card{
  background:var(--surface-card);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:4px;}
.settings-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 14px;
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  border-bottom:1px solid var(--surface-border);
}
.settings-card .settings-row:last-child{ border-bottom:none; }
.settings-row span:first-child{ flex:1; }
.settings-row__value{ font-size:12.5px; color:var(--text-secondary); font-weight:500; }
.settings-row__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--burgundy-500);
}
.settings-row--danger span:first-child{ color:var(--burgundy-500); flex:1; font-weight:700; }
.settings-row[data-nav],
.settings-row[data-edit-field],
.settings-row[id]{
  cursor:pointer;
}
.settings-version{
  text-align:center;
  font-size:11px;
  color:var(--text-secondary);
  margin:18px 0 0;
}

/* ---- Plain text inputs living inside a settings-row (Password screen) ---- */
.field-input{
  flex:1;
  width:100%;
  background:none;
  border:none;
  color:var(--text-primary);
  font-family:'Mulish', sans-serif;
  font-size:14px;
  outline:none;
}
.field-input::placeholder{ color:var(--text-secondary); }

/* ---- Edit profile photo ---- */
.edit-profile-photo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:8px 0 22px;
}
.edit-profile-photo__btn{
  background:none;
  border:none;
  color:var(--accent-label);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
}

/* ---- Keyword filter chips (Content preferences / Comments) ---- */
.keyword-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.keyword-chip{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
  padding:6px 8px 6px 12px;
  border-radius:999px;
}
.keyword-chip button{
  background:none;
  border:none;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:2px;
}

/* ---- Picker sheet (generic single-choice list, reused across the app) ---- */
.sheet--picker{ max-height:75%; }
.picker-row{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--surface-border);
  color:var(--text-primary);
  font-size:14.5px;
  font-weight:600;
  padding:14px 4px;
  cursor:pointer;
}
.picker-row:last-child{ border-bottom:none; }
.picker-row.is-selected{ color:var(--accent-label); }
.picker-friend-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:none;
  border:none;
  border-bottom:1px solid var(--surface-border);
  padding:10px 4px;
  cursor:pointer;
  color:var(--text-primary);
  font-size:14px;
  font-weight:600;
  text-align:left;
}
.picker-friend-row__name{ flex:1; }
.picker-friend-row__check{
  opacity:0;
  color:var(--accent-label);
  font-weight:800;
}
.picker-friend-row.is-selected .picker-friend-row__check{ opacity:1; }

/* ---- Edit field sheet (Account information rows) ---- */
.edit-field-sheet__body{
  padding:6px 16px calc(env(safe-area-inset-bottom, 10px) + 16px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.edit-field-sheet__input{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-radius:10px;
  padding:12px 14px;
}

/* ---- Confirm sheet (destructive/blocking confirmations) ---- */
.confirm-sheet__body{ padding:8px 20px calc(env(safe-area-inset-bottom, 10px) + 20px); text-align:center; }
.confirm-sheet__title{
  font-family:'Mulish', sans-serif;
  font-weight:700;
  font-size:17px;
  margin:8px 0 8px;
  color:var(--text-primary);
}
.confirm-sheet__message{ font-size:13.5px; color:var(--text-secondary); line-height:1.5; margin:0 0 18px; }
.confirm-sheet__actions{ display:flex; gap:10px; }
.confirm-sheet__actions .pill{ flex:1; }
.confirm-sheet__confirm-btn.is-danger{ background:var(--like-red); color:#fff; }

/* ---- Story player ---- */
#screen-story-player{ background:#000; overflow:hidden; }
.story-player__progress{
  position:absolute;
  top:calc(env(safe-area-inset-top, 10px) + 8px);
  left:10px; right:10px;
  z-index:6;
  display:flex;
  gap:4px;
}
.story-player__progress-seg{
  flex:1;
  height:2.5px;
  border-radius:999px;
  background:rgba(255,255,255,0.35);
  overflow:hidden;
}
.story-player__progress-fill{
  display:block;
  height:100%;
  width:0%;
  background:#fff;
}
.story-player__progress-fill.is-filled{ width:100%; }
.story-player__progress-fill.is-animating{ width:100%; transition:width linear; }
.story-player__header{
  position:absolute;
  top:calc(env(safe-area-inset-top, 10px) + 20px);
  left:12px; right:12px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:8px;
}
.story-player__who{ flex:1; min-width:0; }
.story-player__name{ font-size:13px; font-weight:700; color:#fff; margin:0; }
.story-player__time{ font-size:11px; color:rgba(255,255,255,0.7); margin:1px 0 0; }
.story-player__media{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.story-player__media img, .story-player__media video{
  width:100%; height:100%; object-fit:cover;
}
.story-player__overlays{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
}
.story-player__tap-zones{
  position:absolute; inset:0;
  z-index:4;
  display:flex;
}
.story-player__tap{
  flex:1;
  height:100%;
  background:none;
  border:none;
  padding:0;
}
.story-player__viewers{
  position:absolute;
  left:14px;
  bottom:calc(env(safe-area-inset-bottom, 14px) + 14px);
  z-index:6;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
}
.story-player__delete{
  position:absolute;
  right:14px;
  bottom:calc(env(safe-area-inset-bottom, 14px) + 14px);
  z-index:6;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* ---- Theme switch (Settings > Preferences > Dark mode) ---- */
.switch{
  position:relative;
  width:46px;
  height:26px;
  border-radius:999px;
  border:none;
  background:var(--surface-border);
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:background 0.2s ease;
}
.switch__thumb{
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
  transition:transform 0.2s cubic-bezier(.4,0,.2,1);
}
.switch.is-on{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
}
.switch.is-on .switch__thumb{
  transform:translateX(20px);
}

/* ---- Avatar photo viewer (tap a chat header's avatar) ---- */
.avatar-viewer{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--ink-950);
  border:none;
  cursor:pointer;
}
.avatar--viewer{
  width:180px; height:180px;
  font-size:56px;
  border-width:0;
}
.avatar-viewer__name{
  font-weight:800;
  font-size:16px;
  color:var(--cream-100);
  margin:0;
}

/* ---- Highlight story viewer ---- */
.story-viewer{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
}
.story-viewer[data-bg="1"]{ background:radial-gradient(120% 90% at 30% 15%, rgba(77,168,218,0.35), transparent 55%), linear-gradient(160deg, #171C33 0%, #0A0D17 70%); }
.story-viewer[data-bg="3"]{ background:radial-gradient(120% 85% at 40% 80%, rgba(143,211,244,0.20), transparent 55%), linear-gradient(200deg, #171C33 0%, #0A0D17 70%); }
.story-viewer[data-bg="5"]{ background:radial-gradient(115% 85% at 25% 65%, rgba(143,211,244,0.22), transparent 55%), linear-gradient(190deg, #171C33 0%, #0A0D17 72%); }
.story-viewer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 14px) + 14px) 16px 0;
}
.story-viewer__title{ font-weight:800; font-size:16px; color:#fff; }
.story-viewer__hint{
  margin:auto;
  color:rgba(255,255,255,0.7);
  font-size:13px;
  text-align:center;
  padding:0 40px;
}

/* ---- Live viewer screen ---- */
.liveview{
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
}
.liveview__media{
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,#1B2138,#0A0D17);
}
.liveview__media--1{ background:radial-gradient(120% 90% at 30% 15%, rgba(77,168,218,0.32), transparent 55%), linear-gradient(160deg,#171C33,#0A0D17); }
.liveview__media--2{ background:radial-gradient(110% 80% at 70% 20%, rgba(139,58,58,0.30), transparent 55%), linear-gradient(160deg,#1B2138,#0A0D17); }
.liveview__media--3{ background:radial-gradient(120% 85% at 40% 80%, rgba(143,211,244,0.24), transparent 55%), linear-gradient(200deg,#171C33,#0A0D17); }
.liveview__media--4{ background:radial-gradient(110% 85% at 60% 30%, rgba(77,168,218,0.24), transparent 55%), linear-gradient(180deg,#171C33,#0A0D17); }

.liveview__top{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:9px;
  padding:calc(env(safe-area-inset-top, 14px) + 10px) 12px 0;
}
.liveview__host{ flex:1; min-width:0; }
.liveview__name{ font-size:13px; font-weight:700; color:#fff; margin:0; }
.liveview__viewers{ font-size:10.5px; color:rgba(255,255,255,0.7); margin:1px 0 0; }
.liveview__follow{
  background:var(--gold-500);
  color:var(--ink-950);
  border:none;
  font-weight:800;
  font-size:11.5px;
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
}
.liveview__follow.is-following{
  background:rgba(255,255,255,0.15);
  color:#fff;
}
.liveview__tags{
  position:relative;
  z-index:3;
  display:flex;
  gap:8px;
  padding:10px 12px 0;
}
.liveview__tags span{
  background:rgba(0,0,0,0.4);
  color:#fff;
  font-size:10.5px;
  font-weight:600;
  padding:5px 10px;
  border-radius:999px;
}
.liveview__pip{
  position:absolute;
  right:14px;
  bottom:150px;
  z-index:3;
  width:64px; height:86px;
  border-radius:8px;
  background:linear-gradient(160deg,#2a3050,#12172A);
  border:2px solid rgba(255,255,255,0.5);
}
.liveview__chat{
  position:absolute;
  left:12px;
  bottom:76px;
  z-index:3;
  max-width:72%;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.liveview__chat p{
  background:rgba(0,0,0,0.35);
  color:#fff;
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  margin:0;
  width:fit-content;
}
.liveview__bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px calc(env(safe-area-inset-bottom, 10px) + 8px);
}
.liveview__bottom input{
  flex:1;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:999px;
  padding:10px 14px;
  color:#fff;
  font-size:13px;
  outline:none;
}
.liveview__bottom input::placeholder{ color:rgba(255,255,255,0.6); }

/* ---- Bottom nav hidden on full-screen drill-ins ---- */
.bottomnav{
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.bottomnav.is-hidden{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}

/* ---- Sign in ---- */
/* .signin__primary is still used by the daily-devotional modal's "Amen"
   button -- kept as-is. Everything else auth-screen-specific now lives under
   .auth-* below, styled to a fixed dark look independent of the app's own
   light/dark theme setting, matching a supplied design reference. */
.signin__primary{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-950);
  border:none;
  font-weight:800;
  font-size:14.5px;
  padding:13px 0;
  border-radius:10px;
  cursor:pointer;
  width:100%;
}

/* ---------------- Auth screens (sign in / up, forgot password, verify, reset) ---------------- */
.auth{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:calc(env(safe-area-inset-top, 20px) + 26px) 26px 32px;
  background:#0A0A0C;
  color:#fff;
  position:relative;
}
.auth__top{ display:flex; justify-content:center; margin-bottom:22px; }
.auth__mark{
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:#0A0A0C;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.auth__back{
  position:absolute;
  top:calc(env(safe-area-inset-top, 20px) + 20px);
  left:22px;
  width:34px; height:34px;
  border-radius:50%;
  background:#1C1C1F;
  border:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.auth__title{
  font-family:'Mulish', sans-serif;
  font-weight:800;
  font-size:29px;
  line-height:1.15;
  margin:0 0 22px;
}
.auth__back + .auth__title{ margin-top:52px; }
.auth__lead{
  font-size:13.5px;
  color:#9A9AA2;
  margin:-12px 0 22px;
}
.auth__dev-code{
  font-size:13px;
  color:var(--gold-300);
  background:rgba(143,211,244,0.1);
  border:1px solid rgba(143,211,244,0.3);
  border-radius:8px;
  padding:9px 12px;
  margin:-10px 0 18px;
}
.auth__dev-code[hidden]{ display:none; }
.auth__form{ display:flex; flex-direction:column; gap:12px; }
.auth-field{
  display:flex;
  align-items:center;
  gap:10px;
  background:#18181B;
  border:1px solid #2A2A2E;
  border-radius:12px;
  padding:0 14px;
  height:48px;
}
.auth-field__icon{ flex-shrink:0; color:#7A7A82; }
.auth-field input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  outline:none;
  color:#fff;
  font-size:14px;
  font-family:inherit;
  height:100%;
}
.auth-field input::placeholder{ color:#6E6E76; }
.auth__forgot{
  align-self:flex-end;
  background:none;
  border:none;
  color:#9A9AA2;
  font-size:12.5px;
  cursor:pointer;
  padding:2px 0 4px;
  margin-top:-2px;
}
.auth__primary{
  background:#fff;
  color:#0A0A0C;
  border:none;
  font-weight:800;
  font-size:14.5px;
  padding:14px 0;
  border-radius:999px;
  cursor:pointer;
  width:100%;
  margin-top:6px;
}
.auth__divider{
  display:flex;
  align-items:center;
  gap:10px;
  color:#6E6E76;
  font-size:12px;
  margin:6px 0;
}
.auth__divider::before, .auth__divider::after{
  content:'';
  flex:1;
  height:1px;
  background:#26262A;
}
.auth__oauth{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:#18181B;
  border:1px solid #2A2A2E;
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  padding:12px 0;
  border-radius:12px;
  cursor:pointer;
  width:100%;
}
.auth__switch{
  text-align:center;
  color:#9A9AA2;
  font-size:13px;
  margin:14px 0 0;
}
.auth__switch button{
  background:none;
  border:none;
  color:#fff;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  padding:0;
}
.auth__resend{
  align-self:center;
  background:none;
  border:none;
  color:#9A9AA2;
  font-size:12.5px;
  text-decoration:underline;
  cursor:pointer;
  margin:2px 0 8px;
}
.auth__error{
  background:rgba(224,64,64,0.12);
  border:1px solid var(--like-red);
  color:var(--like-red);
  font-size:13px;
  font-weight:600;
  padding:9px 12px;
  border-radius:8px;
  text-align:left;
  margin:0 0 2px;
}
.auth__error[hidden]{ display:none; }
.auth-otp{ display:flex; gap:8px; margin-bottom:18px; }
.auth-otp__box{
  flex:1;
  min-width:0;
  height:52px;
  background:#18181B;
  border:1px solid #2A2A2E;
  border-radius:10px;
  color:#fff;
  font-size:18px;
  font-weight:700;
  text-align:center;
  outline:none;
}
.auth-otp__box:focus{ border-color:var(--gold-500); }

/* ---- Daily devotional ---- */
.devotional{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:40px; }
.devotional__date{
  font-size:12.5px;
  font-weight:700;
  color:var(--accent-label);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin:0 0 18px;
}
.devotional__verse{
  font-family:'Mulish', sans-serif;
  font-weight:800;
  font-size:21px;
  line-height:1.45;
  color:var(--text-primary);
  margin:0 0 10px;
  max-width:320px;
}
.devotional__ref{
  font-size:13px;
  font-weight:700;
  color:var(--text-secondary);
  margin:0 0 28px;
}
.devotional__reflection{
  font-size:14px;
  line-height:1.6;
  color:var(--text-secondary);
  margin:0 0 32px;
  max-width:320px;
}