/* LLC — Love Like Christ | App Stylesheet */
/* Auto-extracted from prototype */

:root {
  --white:#FFFFFF; --ivory:#FAF8F3; --cream:#F5F0E8; --bg:#FAF8F3;
  --gold:#D4AF37; --gold-warm:#C9A227; --gold-light:#F5E6B8;
  --gold-glow:rgba(212,175,55,0.13); --gold-glow-strong:rgba(212,175,55,0.25);
  --blue:#003366; --blue-deep:#001A33; --blue-mid:#0A4A7A; --blue-light:#1A6AB5;
  --green:#16A34A; --green-light:rgba(22,163,74,0.1);
  --rose:#9E3B5C; --rose-light:rgba(158,59,92,0.1);
  --text-primary:#1C1C2E; --text-secondary:#50506E; --text-muted:#9090A8;
  --border:rgba(0,51,102,0.07); --border-gold:rgba(212,175,55,0.2);
  --shadow-sm:0 1px 4px rgba(0,30,60,0.06); --shadow-md:0 4px 16px rgba(0,30,60,0.08);
  --shadow-lg:0 8px 32px rgba(0,30,60,0.12);
  --radius:18px; --radius-sm:12px; --radius-xs:8px;
  --heading:'Cormorant Garamond',Georgia,serif;
  --body:'Nunito Sans',system-ui,sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1);
}
html.dark {
  --white:#0F1318; --ivory:#141A22; --cream:#1A222C; --bg:#141A22;
  --gold:#D4AF37; --gold-warm:#C9A227; --gold-light:#2E2510;
  --gold-glow:rgba(212,175,55,0.10); --gold-glow-strong:rgba(212,175,55,0.20);
  --blue:#5AA0E0; --blue-deep:#0F1318; --blue-mid:#3B7BBF; --blue-light:#6BB0F0;
  --green:#22C55E; --green-light:rgba(34,197,94,0.1);
  --rose:#D4668A; --rose-light:rgba(212,102,138,0.12);
  --text-primary:#E6E4F0; --text-secondary:#A8A8C0; --text-muted:#6A6A82;
  --border:rgba(212,175,55,0.08); --border-gold:rgba(212,175,55,0.15);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.2); --shadow-md:0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.35);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--ivory);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100dvh;}

/* ══════════════════════════════
   SPLASH
══════════════════════════════ */
#splash{
  position:fixed;inset:0;z-index:3000;
  background:linear-gradient(165deg,#001020 0%,#001A33 45%,#002244 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);overflow:hidden;
}
#splash::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(212,175,55,0.07) 0%,transparent 70%);}
#splash.hide{opacity:0;pointer-events:none;transform:scale(1.03);}
.sp-cross{width:64px;height:64px;position:relative;margin-bottom:24px;animation:crossIn 1s ease-out forwards;opacity:0;}
.sp-cross::before,.sp-cross::after{content:'';position:absolute;background:var(--gold);border-radius:2px;}
.sp-cross::before{width:5px;height:64px;left:29.5px;top:0;}
.sp-cross::after{width:44px;height:5px;left:10px;top:18px;}
.sp-glow{position:absolute;width:36px;height:36px;top:4px;left:14px;background:radial-gradient(circle,rgba(212,175,55,0.4),transparent 70%);border-radius:50%;filter:blur(8px);}
.sp-title{font-family:var(--heading);font-size:52px;font-weight:300;color:#fff;letter-spacing:14px;text-transform:uppercase;animation:fadeUp 0.8s 0.3s ease-out forwards;opacity:0;}
.sp-sub{font-family:var(--heading);font-size:16px;font-style:italic;color:var(--gold);letter-spacing:4px;margin-top:6px;animation:fadeUp 0.8s 0.55s ease-out forwards;opacity:0;}
.sp-quote{font-family:var(--heading);font-size:12px;font-style:italic;color:rgba(255,255,255,0.32);margin-top:36px;max-width:260px;text-align:center;line-height:1.7;animation:fadeUp 0.8s 0.8s ease-out forwards;opacity:0;}
.sp-bar-wrap{width:90px;height:2px;background:rgba(255,255,255,0.1);margin-top:32px;border-radius:2px;overflow:hidden;animation:fadeUp 0.8s 1s ease-out forwards;opacity:0;}
.sp-bar{width:0;height:100%;background:var(--gold);animation:barFill 2.2s 1.2s ease-in-out forwards;}

/* ══════════════════════════════
   VERIFICATION FLOW (replaces devo gate)
══════════════════════════════ */
/* ══ AUTHENTICATION FLOW ══ */
#authFlow { position: relative; height: 100%; overflow-y: auto; padding: 40px 24px; background: var(--ivory); }
.auth-screen { animation: fadeUp 0.6s ease-out; max-width: 400px; margin: 0 auto; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; color: var(--blue); font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700; }
.tb-cross { width: 18px; height: 26px; background: var(--gold); clip-path: polygon(33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 55%, 66% 55%, 66% 100%, 33% 100%, 33% 55%, 0% 55%, 0% 33%, 33% 33%); }
.auth-heading { font-family: 'Cormorant Garamond', serif; font-size: 32px; text-align: center; margin-bottom: 8px; color: var(--blue); }
.auth-sub { text-align: center; color: var(--text-secondary); margin-bottom: 32px; font-size: 15px; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-input { background: var(--white); border: 1.5px solid var(--border); padding: 16px; border-radius: 12px; font-size: 16px; transition: all 0.3s; outline: none; }
.auth-input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
.auth-btn { background: var(--blue); color: #fff; border: none; padding: 18px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(0,51,102,0.2); transition: transform 0.2s; }
.auth-btn:active { transform: scale(0.98); }
.auth-btn.mbtn-disabled { background: var(--text-muted); opacity: 0.5; pointer-events: none; }
.auth-link { background: none; border: none; color: var(--blue-mid); font-weight: 600; margin-top: 10px; cursor: pointer; font-size: 14px; }

/* ══ GENDER SELECTOR ══ */
.gender-selector { margin-top: 10px; }
.gender-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; display: block; }
.auth-gender-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gender-btn { background: var(--white); border: 1.5px solid var(--border); padding: 14px; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; color: var(--text-secondary); }
.gender-btn.active { border-color: var(--gold); background: var(--gold-glow); color: var(--blue); }

/* ══ OTP & VERIFICATION ══ */
.vf-icon-ring { width: 80px; height: 80px; background: var(--gold-glow); color: var(--gold-warm); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px; border: 2px solid var(--gold-light); }
.otp-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.otp-box { width: 45px; height: 55px; text-align: center; font-size: 24px; font-weight: 700; border-radius: 8px; border: 1.5px solid var(--border); background: var(--white); outline: none; transition: 0.3s; }
.otp-box:focus { border-color: var(--gold); background: var(--gold-glow); }

/* ══ COVENANT SCREEN ══ */
.cov-scroll { height: 220px; overflow-y: auto; background: var(--white); border: 1px solid var(--border); padding: 20px; border-radius: 12px; margin-bottom: 20px; line-height: 1.6; font-size: 14px; color: var(--text-secondary); }
.cov-scroll p { margin-bottom: 15px; }
.cov-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--blue-deep); margin-bottom: 24px; }
.cov-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); }

/* ══════════════════════════════
   OVERLAY / MODAL
══════════════════════════════ */
/* ── LLC Modal System ────────────────────────────────────────
   .overlay wraps every showModal() popup.
   z-index 3200 puts it above ALL other panels:
     splash(3000), gatheringModal(inline~2600), devotional(2500)
   The trick to animating display:none→flex is to use
   pointer-events:none + opacity:0 instead of display:none,
   then flip to pointer-events:auto + opacity:1 on .show
   ──────────────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;
  z-index:3200;
  background:rgba(0,10,24,0.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;                     /* always flex — no display toggle */
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;              /* invisible AND non-interactive when hidden */
  transition:opacity 0.22s ease;
}
.overlay.show{
  opacity:1;
  pointer-events:auto;
}
.modal{
  background:var(--white);
  border-radius:22px;
  padding:0;                        /* inner sections own their padding */
  max-width:400px;
  width:100%;
  box-shadow:0 20px 60px rgba(0,10,30,0.4),0 4px 16px rgba(0,10,30,0.2);
  text-align:center;
  max-height:88dvh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#D4AF37 var(--cream);
  transform:translateY(14px) scale(0.97);
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),opacity 0.22s ease;
  opacity:0;
}
.modal::-webkit-scrollbar{width:4px;}
.modal::-webkit-scrollbar-track{background:var(--cream);}
.modal::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#D4AF37,#5A2D8A);border-radius:4px;}
.overlay.show .modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
/* Modal themed header stripe */
.modal-hd{
  background:linear-gradient(135deg,#001A33,#003D80);
  padding:20px 22px 18px;
  border-radius:22px 22px 0 0;
  text-align:center;
}
.modal-hd-icon{
  width:48px;height:48px;border-radius:50%;
  background:rgba(212,175,55,0.15);
  border:1.5px solid rgba(212,175,55,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#D4AF37;
  margin:0 auto 10px;
}
/* Modal body wrapper — owns padding */
.modal-body{padding:20px 22px 24px;}
/* Legacy icon (centred, gold ring) */
.modal-icon{width:52px;height:52px;border-radius:50%;background:var(--gold-glow);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--gold);border:1px solid var(--border-gold);}
.modal h2{font-family:var(--heading);font-size:22px;font-weight:600;color:var(--text-primary);}
.modal p{font-size:13px;color:var(--text-secondary);line-height:1.65;margin-top:8px;}
.modal-btns{display:flex;gap:10px;margin-top:18px;}
.mbtn{flex:1;padding:12px;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;border:none;font-family:var(--body);letter-spacing:0.3px;}
.mbtn-primary{background:linear-gradient(135deg,var(--blue),#0A4A7A);color:#fff;box-shadow:0 3px 10px rgba(0,51,102,0.3);}
.mbtn-primary:hover{filter:brightness(1.1);}
.mbtn-secondary{background:var(--cream);color:var(--text-secondary);border:1.5px solid var(--border);}
.mbtn-secondary:hover{border-color:var(--border-gold);}
.mbtn-gold{background:linear-gradient(135deg,#D4AF37,#a07c10);color:#fff;}
.mbtn-disabled{opacity:0.35;pointer-events:none;}

/* ══════════════════════════════
   MAIN APP SHELL
══════════════════════════════ */
#app{display:none;opacity:0;transition:opacity 0.6s var(--ease);padding-bottom:88px;}
#app.show{display:block;opacity:1;}
.tab{display:none;}
.tab.active{display:block;}

/* Top Bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;}
.tb-brand{display:flex;align-items:center;gap:8px;}
.tb-cross{width:20px;height:20px;position:relative;}
.tb-cross::before,.tb-cross::after{content:'';position:absolute;background:var(--gold);border-radius:1px;}
.tb-cross::before{width:2.5px;height:20px;left:8.75px;}
.tb-cross::after{width:14px;height:2.5px;left:3px;top:5.5px;}
.tb-name{font-family:var(--heading);font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:2px;}
.tb-actions{display:flex;gap:8px;}
.tb-btn{width:38px;height:38px;border-radius:50%;background:var(--cream);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:15px;cursor:pointer;transition:all 0.2s;position:relative;}
.tb-btn:hover{background:var(--gold-glow);color:var(--gold);border-color:var(--border-gold);}
.tb-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--rose);border-radius:50%;font-size:8px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--white);}

/* Bottom Nav */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--white);border-top:1px solid var(--border);display:flex;padding:4px 0 max(4px,env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,0.04);}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0;cursor:pointer;transition:color 0.2s;color:var(--text-muted);background:none;border:none;font-family:var(--body);position:relative;}
.bnav-item.active{color:var(--gold);}
.bnav-item.active::before{content:'';position:absolute;top:-1px;width:22px;height:2.5px;background:var(--gold);border-radius:0 0 3px 3px;}
.bnav-item i{font-size:16px;}
.bnav-item span{font-size:8.5px;font-weight:600;letter-spacing:0.3px;}
/* E2EE chat nav badge */
.bnav-item .nav-e2e{
  position:absolute;top:2px;right:calc(50% - 22px);
  font-size:7px;font-weight:800;color:var(--green);
  background:var(--green-light);padding:1px 4px;border-radius:4px;
  letter-spacing:0.3px;border:1px solid rgba(22,163,74,0.2);
}

/* ══════════════════════════════
   DISCOVER TAB
══════════════════════════════ */
.greeting{padding:22px 20px 4px;}
.gr-label{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:3px;text-transform:uppercase;}
.gr-name{font-family:var(--heading);font-size:28px;font-weight:500;color:var(--text-primary);margin-top:2px;}
.gr-sub{font-size:13px;color:var(--text-muted);margin-top:2px;}

/* ── DAILY BREAD WIDGET (skippable, inline) ── */
.bread-widget{
  margin:14px 20px 0;
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue-mid) 100%);
  border-radius:var(--radius);padding:18px 18px 14px;
  position:relative;overflow:hidden;cursor:pointer;
}
.bread-widget::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:rgba(212,175,55,0.08);border-radius:50%;}
.bread-widget::after{content:'';position:absolute;bottom:-20px;left:-10px;width:70px;height:70px;background:rgba(212,175,55,0.05);border-radius:50%;}
.bw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bw-label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:6px;}
.bw-skip{font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);cursor:pointer;padding:3px 8px;border-radius:10px;transition:all 0.2s;z-index:2;position:relative;}
.bw-skip:hover{color:rgba(255,255,255,0.7);}
.bw-verse{font-family:var(--heading);font-size:18px;font-style:italic;color:rgba(255,255,255,0.92);line-height:1.5;position:relative;z-index:1;}
.bw-ref{font-size:11px;font-weight:600;color:var(--gold);margin-top:6px;position:relative;z-index:1;}
.bw-expand{font-size:11px;color:rgba(255,255,255,0.45);margin-top:8px;display:flex;align-items:center;gap:4px;}

/* ── TRUST / VERIFICATION BANNER ── */
.trust-row{display:flex;gap:8px;padding:14px 20px 0;overflow-x:auto;scrollbar-width:none;}
.trust-row::-webkit-scrollbar{display:none;}
.trust-chip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:10px;font-weight:700;padding:5px 12px;border-radius:20px;
  letter-spacing:0.3px;flex-shrink:0;
}
.trust-chip.green{background:rgba(22,163,74,0.1);color:var(--green);border:1px solid rgba(22,163,74,0.2);}
.trust-chip.gold{background:var(--gold-glow);color:var(--gold-warm);border:1px solid var(--border-gold);}
.trust-chip.blue{background:rgba(0,51,102,0.08);color:var(--blue);border:1px solid rgba(0,51,102,0.12);}
html.dark .trust-chip.blue{background:rgba(90,160,224,0.1);color:var(--blue-light);border-color:rgba(90,160,224,0.15);}

/* ── SECTION HEADER ── */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 12px;}
.sec-title{font-family:var(--heading);font-size:21px;font-weight:600;color:var(--text-primary);}
.sec-link{font-size:12px;font-weight:600;color:var(--gold);cursor:pointer;}

/* ── FEATURED CAROUSEL ── */
.fc-track-outer{position:relative;padding:0 0 8px;}
.fc-track{display:flex;gap:16px;padding:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;}
.fc-track::-webkit-scrollbar{display:none;}
.fc-card{min-width:282px;max-width:300px;flex-shrink:0;scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-md);cursor:pointer;transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease);}
.fc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.fc-hero{height:200px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.fc-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,10,25,0.78) 100%);}
.fc-avatar-lg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--heading);font-size:64px;font-weight:500;color:rgba(255,255,255,0.82);}
.fc-overlay{position:absolute;bottom:0;left:0;right:0;padding:14px;z-index:2;}
.fc-name{font-family:var(--heading);font-size:22px;font-weight:600;color:#fff;}
.fc-age{font-size:20px;font-weight:300;opacity:0.8;font-family:var(--heading);color:#fff;}
.fc-loc{font-size:11px;color:rgba(255,255,255,0.65);display:flex;align-items:center;gap:3px;margin-top:2px;}
/* Verified badge on card */
.fc-verified{position:absolute;top:10px;right:10px;z-index:5;display:flex;align-items:center;gap:4px;background:rgba(22,163,74,0.9);backdrop-filter:blur(6px);padding:4px 8px;border-radius:10px;font-size:9px;font-weight:800;color:#fff;letter-spacing:0.5px;}
.fc-compat{position:absolute;top:10px;left:10px;z-index:5;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);padding:4px 10px;border-radius:10px;font-size:10px;font-weight:700;color:var(--gold);}
.fc-body{padding:12px 14px 14px;}
.fc-verse-preview{font-family:var(--heading);font-size:13px;font-style:italic;color:var(--text-secondary);line-height:1.6;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.fc-tag{font-size:9px;font-weight:700;padding:3px 9px;border-radius:12px;}
.fc-tag-faith{background:rgba(0,51,102,0.08);color:var(--blue);border:1px solid rgba(0,51,102,0.1);}
.fc-tag-interest{background:var(--gold-glow);color:var(--gold-warm);border:1px solid var(--border-gold);}
html.dark .fc-tag-faith{background:rgba(90,160,224,0.12);color:var(--blue-light);}
.fc-actions{display:flex;gap:8px;}
.fc-action-btn{flex:1;padding:8px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:var(--body);transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:5px;}
.fc-btn-connect{background:linear-gradient(135deg,var(--blue),var(--blue-mid));color:#fff;}
.fc-btn-connect:hover{opacity:0.9;}
.fc-btn-connect.sent{background:var(--cream);color:var(--text-muted);pointer-events:none;}
.fc-btn-pray{background:var(--gold-glow);color:var(--gold);border:1px solid var(--border-gold);flex:0 0 40px;}
.fc-dots{display:flex;justify-content:center;gap:6px;padding:8px 0 0;}
.fc-dot{width:6px;height:6px;border-radius:50%;background:var(--border);cursor:pointer;transition:all 0.25s;}
.fc-dot.active{background:var(--gold);width:18px;border-radius:3px;}

/* ── PROFILES GRID ── */
.profiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 20px 4px;}
.pcard{border-radius:var(--radius-sm);overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;transition:all 0.25s;}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.pcard-top{height:130px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pcard-top::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,10,25,0.6));}
.pcard-initials{font-family:var(--heading);font-size:36px;font-weight:500;color:rgba(255,255,255,0.7);}
.pcard-info-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;z-index:2;}
.pcard-name{font-family:var(--heading);font-size:14px;font-weight:600;color:#fff;}
.pcard-loc{font-size:9px;opacity:0.65;color:#fff;display:flex;align-items:center;gap:2px;}
/* verified tick on grid card */
.pcard-verified{position:absolute;top:6px;right:6px;z-index:5;width:18px;height:18px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;border:1.5px solid rgba(255,255,255,0.6);}
.pcard-body{padding:9px 10px 12px;}
.pcard-church{font-size:10px;color:var(--text-muted);display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;}
.pcard-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:12px;background:var(--gold-glow);color:var(--gold);}
.pcard-btn{width:100%;margin-top:7px;padding:7px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--blue);color:var(--blue);background:transparent;font-family:var(--body);transition:all 0.2s;}
.pcard-btn:hover{background:var(--blue);color:#fff;}
.pcard-btn.sent{border-color:var(--text-muted);color:var(--text-muted);pointer-events:none;}

/* ══════════════════════════════
   E2EE CHATS TAB  ← FOREGROUNDED
══════════════════════════════ */
.e2ee-hero{
  background:linear-gradient(135deg,var(--blue-deep),var(--blue-mid));
  padding:22px 20px 20px;position:relative;overflow:hidden;
}
.e2ee-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:rgba(212,175,55,0.07);border-radius:50%;}
.e2ee-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.e2ee-title{font-family:var(--heading);font-size:26px;font-weight:600;color:#fff;}
.e2ee-badge{
  display:flex;align-items:center;gap:5px;
  background:rgba(22,163,74,0.2);border:1px solid rgba(22,163,74,0.35);
  color:#4ADE80;font-size:10px;font-weight:800;letter-spacing:0.5px;
  padding:5px 10px;border-radius:20px;
}
.e2ee-desc{font-size:12px;color:rgba(255,255,255,0.55);line-height:1.6;}
.e2ee-stats{display:flex;gap:12px;margin-top:14px;}
.e2ee-stat{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-xs);padding:10px 14px;flex:1;text-align:center;}
.e2ee-stat-num{font-family:var(--heading);font-size:20px;font-weight:600;color:var(--gold);}
.e2ee-stat-label{font-size:9px;color:rgba(255,255,255,0.4);letter-spacing:1px;text-transform:uppercase;margin-top:1px;}

/* Chat list */
.chat-list { display:flex; flex-direction:column; gap:0; }
.chat-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .15s;
}
.chat-item:hover { background:var(--cream); }
.chat-av {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:18px; font-weight:600;
  color:#fff; flex-shrink:0; position:relative; overflow:hidden;
}
.chat-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chat-info { flex:1; min-width:0; }
.chat-name-row { display:flex; align-items:center; justify-content:space-between; }
.chat-name { font-family:var(--heading); font-size:15px; font-weight:700; color:var(--text-primary); }
.chat-time { font-size:10px; color:var(--text-muted); flex-shrink:0; margin-left:6px; }
.chat-preview {
  font-size:12px; color:var(--text-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:4px;
}
.chat-unread {
  min-width:20px; height:20px; background:var(--blue);
  border-radius:10px; font-size:10px; font-weight:800;
  color:#fff; display:flex; align-items:center; justify-content:center;
  padding:0 5px; flex-shrink:0;
}
.chat-empty { text-align:center; padding:48px 20px; color:var(--text-muted); }
.chat-empty i { font-size:40px; margin-bottom:12px; color:var(--border-gold); display:block; }
.chat-empty-title { font-family:var(--heading); font-size:20px; color:var(--text-secondary); margin-bottom:6px; }
.chat-empty-sub { font-size:13px; line-height:1.6; }

/* ══════════════════════════════
   CHATS TAB — WhatsApp-style layout
══════════════════════════════ */

/* Tab container: flex row on all sizes */
#tabChats {
  display:none; flex-direction:row;
  overflow:hidden; height:100%;
}
#tabChats.active { display:flex !important; }

/* ── LEFT: Conversation list ── */
#chatListView {
  display:flex; flex-direction:column;
  width:100%; background:var(--white);
  border-right:1px solid var(--border);
  flex-shrink:0; overflow:hidden;
}

/* Search */
.cl-search-wrap {
  padding:10px 12px;
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.cl-search-bar {
  display:flex; align-items:center; gap:8px;
  background:var(--cream); border-radius:20px;
  padding:8px 14px; border:1px solid var(--border);
}
.cl-search-bar i { color:var(--text-muted); font-size:13px; flex-shrink:0; }
.cl-search-bar input {
  border:none; background:transparent; outline:none;
  font-size:13px; color:var(--text-primary); width:100%;
  font-family:var(--body);
}
.cl-search-bar input::placeholder { color:var(--text-muted); }

/* E2EE notice */
.cl-e2ee-notice {
  display:flex; align-items:center; gap:6px;
  padding:5px 14px; font-size:9px; font-weight:700;
  color:var(--green); background:rgba(22,163,74,.05);
  border-bottom:1px solid rgba(22,163,74,.1);
  letter-spacing:.2px;
}

/* Chat list */
#chatList { flex:1; overflow-y:auto; }
.chat-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .12s; position:relative;
}
.chat-item:hover { background:var(--cream); }
.chat-item.active { background:rgba(0,51,102,.06); }
.chat-av {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:17px; font-weight:700;
  color:#fff; overflow:hidden;
}
.chat-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chat-info { flex:1; min-width:0; }
.chat-name-row {
  display:flex; align-items:center;
  justify-content:space-between; gap:6px;
}
.chat-name {
  font-family:var(--heading); font-size:15px;
  font-weight:700; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-time { font-size:10px; color:var(--text-muted); flex-shrink:0; }
.chat-preview {
  font-size:12px; color:var(--text-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:4px;
}
.chat-unread {
  min-width:20px; height:20px; background:var(--blue);
  border-radius:10px; font-size:10px; font-weight:800;
  color:#fff; display:flex; align-items:center;
  justify-content:center; padding:0 5px; flex-shrink:0;
}
.chat-empty { text-align:center; padding:48px 20px; color:var(--text-muted); }
.chat-empty i { font-size:36px; margin-bottom:12px; color:var(--border-gold); display:block; }
.chat-empty-title { font-family:var(--heading); font-size:18px; color:var(--text-secondary); margin-bottom:6px; }
.chat-empty-sub { font-size:13px; line-height:1.6; max-width:260px; margin:0 auto; }

/* ── RIGHT: Chat panel ── */
#chatPanel {
  flex:1; display:flex; flex-direction:column;
  background:var(--ivory); overflow:hidden;
  position:relative; min-height:0;
}

/* Welcome screen — visible on desktop when no chat open */
#chatWelcome {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ivory);
}

/* Active chat window — hidden by default, JS adds .open */
#chatWindow {
  display:none; flex-direction:column;
  flex:1; min-height:0;
  background:var(--ivory);
  overflow:hidden;
}
#chatWindow.open { display:flex !important; }

/* Chat header */
.ch-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  flex-shrink:0; z-index:2;
}
.ch-back {
  width:34px; height:34px; border-radius:50%;
  background:var(--cream); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-secondary); font-size:13px;
  flex-shrink:0; transition:all .2s;
  /* Hidden on desktop by default */
}
.ch-back:hover { background:var(--gold-glow); color:var(--gold); }
.ch-av {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:15px; font-weight:700;
  color:#fff; overflow:hidden; cursor:pointer;
}
.ch-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ch-info { flex:1; min-width:0; cursor:pointer; }
.ch-name {
  font-family:var(--heading); font-size:16px; font-weight:700;
  color:var(--text-primary); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ch-meta { display:flex; align-items:center; gap:6px; margin-top:1px; }
.ch-stage {
  font-size:9px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:var(--gold-warm);
  background:var(--gold-glow); padding:1px 7px;
  border-radius:8px; border:1px solid var(--border-gold);
}
.ch-enc { font-size:9px; color:var(--green); font-weight:600; }
.ch-header-actions { display:flex; gap:4px; }
.ch-action-btn {
  width:34px; height:34px; border-radius:50%;
  background:var(--cream); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); font-size:14px;
  transition:all .2s; flex-shrink:0;
}
.ch-action-btn:hover { background:var(--gold-glow); color:var(--gold); border-color:var(--border-gold); }

/* Courtship stage bar */
.ch-stage-bar {
  display:flex; align-items:center; padding:8px 20px;
  background:var(--white); border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ch-stage-step {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  flex-shrink:0;
}
.ch-stage-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--border); border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--border); transition:all .3s;
}
.ch-stage-step.active .ch-stage-dot {
  background:var(--gold); box-shadow:0 0 0 3px var(--gold-glow);
}
.ch-stage-step.done .ch-stage-dot { background:var(--green); }
.ch-stage-label {
  font-size:8px; font-weight:700; color:var(--text-muted);
  letter-spacing:.3px; white-space:nowrap;
}
.ch-stage-step.active .ch-stage-label { color:var(--gold-warm); }
.ch-stage-step.done .ch-stage-label { color:var(--green); }
.ch-stage-line {
  flex:1; height:2px; background:var(--border); margin:0 4px;
  margin-bottom:12px; /* align with dots */
}
.ch-stage-line.done { background:var(--green); }

/* Messages area */
.ch-msgs {
  flex:1; overflow-y:auto; padding:12px 16px 8px;
  display:flex; flex-direction:column; gap:3px;
  /* Subtle chat background */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,51,102,.025) 1px, transparent 0);
  background-size:20px 20px;
  background-color:var(--ivory);
}

/* Date separator */
.ch-date-sep { text-align:center; margin:10px 0; }
.ch-date-sep span {
  font-size:10px; font-weight:700; color:var(--text-muted);
  background:rgba(0,51,102,.06); padding:3px 12px;
  border-radius:10px; text-transform:uppercase; letter-spacing:.4px;
}

/* Message bubbles */
.ch-msg {
  max-width:72%; padding:8px 12px 5px;
  border-radius:18px; font-size:14px; line-height:1.55;
  word-break:break-word; position:relative;
  animation:msgIn .15s ease;
}
@keyframes msgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.ch-msg.in {
  align-self:flex-start;
  background:var(--white); color:var(--text-primary);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.ch-msg.out {
  align-self:flex-end;
  background:linear-gradient(135deg,#003D80,#0A4A8A);
  color:#fff; border-bottom-right-radius:4px;
  box-shadow:0 1px 4px rgba(0,51,102,.2);
}
/* Verse messages — special style */
.ch-msg.verse {
  background:linear-gradient(135deg,#2D1A4A,#5A2D8A);
  color:#fff; font-style:italic;
  border-bottom-right-radius:4px;
}
.ch-msg.verse.in { border-bottom-left-radius:4px; border-bottom-right-radius:18px; }
.ch-msg-verse-ref {
  display:block; font-size:10px; font-weight:800;
  color:var(--gold); margin-top:4px; letter-spacing:.3px;
}
/* Reaction bubble */
.ch-msg-reaction {
  position:absolute; bottom:-10px; right:8px;
  background:var(--white); border:1px solid var(--border);
  border-radius:10px; padding:1px 5px; font-size:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.ch-msg.in .ch-msg-reaction { right:auto; left:8px; }
/* Footer row */
.ch-msg-footer {
  display:flex; align-items:center; justify-content:flex-end;
  gap:3px; margin-top:3px;
}
.ch-msg-time { font-size:9px; opacity:.55; }
.ch-msg.out .ch-msg-time { opacity:.75; }
.ch-msg-tick { font-size:10px; color:var(--gold); margin-left:1px; }
/* Loader */
.ch-msgs-loader { text-align:center; padding:40px; }

/* Reaction picker */
.ch-reactions {
  display:flex; gap:6px; padding:8px 14px;
  background:var(--white); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.ch-react {
  font-size:22px; background:var(--cream); border:1px solid var(--border);
  border-radius:50%; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s;
}
.ch-react:hover { transform:scale(1.2); }

/* Input bar */
.ch-input-bar {
  display:flex; align-items:flex-end; gap:6px;
  padding:8px 12px 10px; background:var(--white);
  border-top:1px solid var(--border); flex-shrink:0;
}
.ch-tool-btn {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--cream); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:15px; cursor:pointer;
  transition:all .15s;
}
.ch-tool-btn:hover { background:var(--gold-glow); color:var(--gold); border-color:var(--border-gold); }
.ch-input-wrap { flex:1; }
.ch-input {
  width:100%; max-height:100px; padding:9px 14px;
  border:1.5px solid var(--border); border-radius:20px;
  font-size:14px; font-family:var(--body); color:var(--text-primary);
  background:var(--cream); outline:none; resize:none; line-height:1.5;
  display:block; box-sizing:border-box; transition:border-color .2s;
  overflow-y:auto; scrollbar-width:none;
}
.ch-input:focus { border-color:var(--gold); background:var(--white); }
.ch-input::placeholder { color:var(--text-muted); }
.ch-send {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--gold); border:none; color:#fff; font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; box-shadow:0 2px 8px rgba(212,175,55,.4);
}
.ch-send:hover,.ch-send.sending { background:var(--blue); box-shadow:0 2px 8px rgba(0,51,102,.3); }

/* Voice message button */
.ch-voice-btn {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--blue); border:none; color:#fff; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; box-shadow:0 2px 8px rgba(0,51,102,.3);
  -webkit-tap-highlight-color:transparent;
}
.ch-voice-btn:hover { background:var(--blue-mid); }
.ch-voice-btn.recording {
  background:var(--rose);
  box-shadow:0 0 0 6px rgba(158,59,92,.2);
  animation:voicePulse 1s infinite;
}
@keyframes voicePulse {
  0%,100% { box-shadow:0 0 0 4px rgba(158,59,92,.25); }
  50%      { box-shadow:0 0 0 10px rgba(158,59,92,.08); }
}

/* Voice message bubble in chat */
.ch-voice-msg {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; min-width:180px;
}
.ch-voice-play {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.25); border:none;
  color:#fff; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .15s;
}
.ch-voice-play:hover { background:rgba(255,255,255,.4); }
.ch-voice-wave {
  flex:1; display:flex; align-items:center; gap:2px; height:24px;
}
.ch-voice-wave span {
  display:inline-block; width:3px; border-radius:2px;
  background:rgba(255,255,255,.6);
  animation:none;
}
.ch-voice-wave.playing span { animation:waveDance .6s infinite alternate; }
.ch-voice-wave span:nth-child(2n)   { animation-delay:.1s; }
.ch-voice-wave span:nth-child(3n)   { animation-delay:.2s; }
.ch-voice-wave span:nth-child(4n)   { animation-delay:.15s; }
@keyframes waveDance {
  from { height:4px; opacity:.5; }
  to   { height:18px; opacity:1; }
}
.ch-voice-dur { font-size:10px; opacity:.75; white-space:nowrap; }


/* ── RESPONSIVE ── */

/* ═══════════════════════════════════════════════════════
   MOBILE CHAT — WhatsApp / Telegram pattern
   Full-screen sliding panel, sticky input bar at bottom
   ═══════════════════════════════════════════════════════ */
@media (max-width:767px) {

  /* Tab container */
  #tabChats {
    height:calc(100dvh - 56px - 56px); /* viewport - topbar - bottom nav */
    position:relative;
    overflow:hidden;
  }

  /* Conversation list — fills full tab */
  #chatListView {
    width:100%; border-right:none;
    height:100%;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }

  /* Chat panel — slides in from right, covers full viewport */
  #chatPanel {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:500;
    background:var(--ivory);
    display:flex !important;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
  }
  #tabChats.chat-open #chatPanel {
    transform:translateX(0);
  }

  /* Chat window fills panel */
  #chatWindow {
    display:flex !important;
    flex-direction:column;
    flex:1; min-height:0;
    overflow:hidden;
  }
  #chatWelcome { display:none !important; }
  .ch-back { display:flex !important; }

  /* Header — fixed at top of panel */
  .ch-header { flex-shrink:0; }
  .ch-e2ee-bar { flex-shrink:0; }

  /* Messages — scrollable middle */
  .ch-msgs {
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px 12px 8px;
    /* MUST keep flex column so align-self works on bubbles */
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  /* Input bar — always visible at bottom, above keyboard */
  .ch-input-bar {
    flex-shrink:0;
    padding:8px 10px max(12px,env(safe-area-inset-bottom));
    background:var(--white);
    border-top:1px solid var(--border);
    /* Stay above iOS keyboard */
    position:sticky;
    bottom:0;
  }

  /* Stage bar — hide on mobile */
  .ch-stage-bar  { display:none; }
  .ch-stage-label { display:none; }

  /* Bubbles slightly wider on phone */
  .ch-msg { max-width:82%; font-size:13px; }

  /* Action buttons — smaller on mobile */
  .ch-tool-btn { width:34px; height:34px; font-size:14px; }
  .ch-send     { width:38px; height:38px; font-size:13px; }
}

/* Tablet: list 260px, panel fills rest */
@media (min-width:768px) and (max-width:1023px) {
  #chatListView { width:260px; }
  #chatPanel { position:relative; flex:1; }
  #chatWindow { display:none; }
  #chatWindow.open { display:flex !important; }
  #chatWelcome { display:flex; }
  .ch-back { display:none; }
}

/* Desktop: list 320px, panel fills rest */
@media (min-width:1024px) {
  #chatListView { width:320px; }
  #chatPanel { position:relative; flex:1; }
  #chatWindow { display:none; }
  #chatWindow.open { display:flex !important; }
  #chatWelcome { display:flex; }
  .ch-back { display:none; }
  .ch-stage-bar { display:flex; }
}

/* ══ GATHERING PLACE ══ */
.gath-list { display:flex; flex-direction:column; gap:12px; }
.gath-filter {
  padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700;
  cursor:pointer; border:1.5px solid var(--border);
  color:var(--text-secondary); background:var(--cream);
  white-space:nowrap; font-family:var(--body); transition:all .15s; flex-shrink:0;
}
.gath-filter.active { background:#4A0E4E; color:#fff; border-color:#4A0E4E; }
.gath-card {
  background:var(--white); border-radius:18px;
  border:1px solid var(--border); overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:transform .15s, box-shadow .15s;
}
.gath-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.gath-card-hero {
  height:80px; display:flex; align-items:flex-end;
  padding:12px 16px; position:relative;
}
.gath-card-icon {
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.2); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; flex-shrink:0;
}
.gath-live-pill {
  position:absolute; top:10px; right:12px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
  border:1px solid rgba(74,222,128,.4); border-radius:20px;
  padding:3px 10px; display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; color:#4ADE80; letter-spacing:.5px;
}
.gath-live-dot { width:6px; height:6px; background:#4ADE80; border-radius:50%; animation:pulse 1.5s infinite; }
.gath-card-body { padding:12px 16px 14px; }
.gath-card-title {
  font-family:var(--heading); font-size:17px; font-weight:700;
  color:var(--text-primary); margin-bottom:3px;
}
.gath-card-desc { font-size:12px; color:var(--text-muted); line-height:1.6; margin-bottom:10px; }
.gath-card-footer { display:flex; align-items:center; justify-content:space-between; }
.gath-card-meta { display:flex; align-items:center; gap:12px; }
.gath-meta-item { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.gath-join-btn {
  padding:8px 20px; border-radius:20px; font-size:12px; font-weight:700;
  cursor:pointer; border:none; font-family:var(--body); transition:all .2s;
}
.gath-join-btn.join { background:linear-gradient(135deg,#4A0E4E,#7B2D8E); color:#fff; }
.gath-join-btn.joined { background:var(--cream); color:var(--text-secondary); border:1.5px solid var(--border); }
/* Enter Room — gold, prominent, only shown when room is LIVE */
.gath-enter-btn {
  padding:8px 20px; border-radius:20px; font-size:12px; font-weight:800;
  cursor:pointer; border:none; font-family:var(--body); transition:all .2s;
  background:linear-gradient(135deg,#D4AF37,#a07c10); color:#fff;
  box-shadow:0 3px 12px rgba(212,175,55,.4);
  animation:enter-pulse 2s infinite;
}
.gath-enter-btn:hover { filter:brightness(1.1); transform:scale(1.04); }
/* Join & Enter — purple, for non-members when live */
.gath-join-enter-btn {
  padding:8px 20px; border-radius:20px; font-size:12px; font-weight:800;
  cursor:pointer; border:none; font-family:var(--body); transition:all .2s;
  background:linear-gradient(135deg,#003366,#0A4A7A); color:#fff;
  box-shadow:0 3px 12px rgba(0,51,102,.3);
}
.gath-join-enter-btn:hover { filter:brightness(1.1); }
@keyframes enter-pulse {
  0%,100% { box-shadow:0 3px 12px rgba(212,175,55,.4); }
  50%      { box-shadow:0 3px 20px rgba(212,175,55,.7); }
}
.my-gath-bubble {
  flex-shrink:0; width:64px; display:flex;
  flex-direction:column; align-items:center; gap:4px; cursor:pointer;
}
.my-gath-av {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; position:relative;
}
.my-gath-live {
  position:absolute; top:-4px; right:-4px; width:12px; height:12px;
  background:#4ADE80; border-radius:50%; border:2px solid var(--white);
  animation:pulse 1.5s infinite;
}
.my-gath-name {
  font-size:9px; font-weight:700; color:var(--text-muted);
  text-align:center; max-width:60px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ══════════════════════════════
   PRAYER TAB
══════════════════════════════ */
/* ══ PRAYER WALL ══ */
.pray-card {
  background:var(--white); border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  overflow:hidden;
}
.pray-card-top {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 10px;
}
.pray-av {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:15px; font-weight:700;
  color:#fff; overflow:hidden;
}
.pray-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pray-name { font-family:var(--heading); font-size:14px; font-weight:700; color:var(--text-primary); }
.pray-time { font-size:10px; color:var(--text-muted); margin-top:1px; }
.pray-body { padding:0 16px 10px; }
.pray-text {
  font-size:14px; line-height:1.75; color:var(--text-secondary);
  font-family:var(--heading); font-style:italic;
}
.pray-locked {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-muted);
  background:var(--cream); border-radius:10px;
  padding:10px 14px; border:1px dashed var(--border);
}
.pray-e2e-strip {
  display:flex; align-items:center; gap:5px;
  font-size:9px; font-weight:700; color:var(--green);
  padding:6px 16px; border-top:1px solid var(--border);
  background:rgba(22,163,74,.03);
}
.pray-bar {
  display:flex; gap:0; border-top:1px solid var(--border);
}
.pray-btn {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:6px; padding:10px; font-size:12px; font-weight:700;
  color:var(--text-muted); background:none; border:none;
  cursor:pointer; font-family:var(--body); transition:all .15s;
  border-right:1px solid var(--border);
}
.pray-btn:last-child { border-right:none; }
.pray-btn:hover { background:var(--cream); color:var(--text-primary); }
.pray-btn.active { color:#5A2D8A; background:rgba(90,45,138,.06); }
.pray-btn.praying.active { color:#5A2D8A; }
.pray-own-actions {
  display:flex; gap:6px; padding:8px 16px;
  border-top:1px solid var(--border); justify-content:flex-end;
}

/* ══════════════════════════════
   PROFILE DETAIL
══════════════════════════════ */
#profileDetail{position:fixed;inset:0;z-index:1600;background:var(--ivory);display:none;flex-direction:column;overflow-y:auto;transition:transform 0.35s var(--ease),opacity 0.35s var(--ease);transform:translateY(100%);opacity:0;}
#profileDetail.show{display:flex;transform:translateY(0);opacity:1;}
.pd-hero{height:280px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pd-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,10,25,0.82));}
.pd-avatar-big{font-family:var(--heading);font-size:80px;font-weight:500;color:rgba(255,255,255,0.7);letter-spacing:6px;}
.pd-back{position:absolute;top:14px;left:14px;z-index:5;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,0.35);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;cursor:pointer;transition:all 0.2s;}
.pd-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;}
.pd-name{font-family:var(--heading);font-size:30px;font-weight:600;color:#fff;line-height:1.1;}
.pd-meta{font-size:12px;opacity:0.7;margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:#fff;}
.pd-badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.pd-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:800;padding:3px 9px;border-radius:10px;letter-spacing:0.3px;}
.pd-badge-verified{background:rgba(22,163,74,0.85);color:#fff;}
.pd-badge-covenant{background:rgba(212,175,55,0.85);color:#003;}
.pd-badge-denom{background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.15);}
.pd-content{padding:20px;}
.pd-section{margin-bottom:20px;}
.pd-section-title{font-family:var(--heading);font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.pd-section-title i{font-size:14px;color:var(--gold);}
.pd-text{font-size:14px;line-height:1.7;color:var(--text-secondary);}
.pd-verse{font-family:var(--heading);font-size:16px;font-style:italic;color:var(--text-primary);line-height:1.6;padding:14px;background:var(--gold-glow);border-radius:var(--radius-xs);border-left:3px solid var(--gold);}
.pd-tags{display:flex;flex-wrap:wrap;gap:6px;}
.pd-tag{font-size:11px;font-weight:600;padding:5px 14px;border-radius:20px;}
.pd-values-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pd-value-item{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 12px;}
.pd-value-label{font-weight:300;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;}
.pd-value-text{font-weight:700;color:var(--text-primary);margin-top:2px;font-size:13px;}
/* Compat bars */
.compat-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.compat-label{font-size:12px;color:var(--text-secondary);min-width:90px;}
.compat-bg{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.compat-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-warm));width:0;transition:width 1s ease-out;}
.compat-pct{font-size:11px;font-weight:700;color:var(--gold);min-width:32px;text-align:right;}
.pd-e2e{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green);background:var(--green-light);padding:8px 14px;border-radius:var(--radius-xs);border:1px solid rgba(22,163,74,0.15);}
.pd-actions{display:flex;gap:10px;padding:16px 20px;background:var(--white);border-top:1px solid var(--border);position:sticky;bottom:0;}
.pd-act-btn{flex:1;padding:14px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:var(--body);transition:all 0.25s var(--ease);display:flex;align-items:center;justify-content:center;gap:8px;}
.pd-act-primary{background:linear-gradient(135deg,var(--blue),var(--blue-mid));color:#fff;box-shadow:0 4px 16px rgba(0,51,102,0.25);}
.pd-act-primary.sent{background:var(--cream);color:var(--text-muted);box-shadow:none;pointer-events:none;}
.pd-act-secondary{background:var(--gold-glow);color:var(--gold);border:1px solid var(--border-gold);}
.shepherd-btn{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:20px;padding:5px 12px;cursor:pointer;font-family:var(--body);transition:all 0.2s;}
.shepherd-btn:hover{color:var(--rose);border-color:var(--rose);background:var(--rose-light);}

/* ══════════════════════════════
   MY PROFILE TAB
══════════════════════════════ */
.my-hero{text-align:center;padding:28px 20px 0;}
.my-av{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:var(--heading);font-size:34px;font-weight:600;color:#fff;border:3px solid var(--gold);position:relative;}
.my-verify-ring{position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--green);opacity:0.7;}
.my-name{font-family:var(--heading);font-size:26px;font-weight:600;color:var(--text-primary);}
.my-church{font-size:13px;color:var(--text-muted);margin-top:2px;}
.my-trust-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:12px;}
.my-stats{display:flex;justify-content:center;gap:28px;margin-top:18px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.my-stat{text-align:center;}
.my-stat-num{font-family:var(--heading);font-size:22px;font-weight:600;color:var(--text-primary);}
.my-stat-label{font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;}
.my-section{padding:18px 20px 0;}
.my-section-title{font-family:var(--heading);font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:8px;}
.my-bio{font-size:13.5px;line-height:1.7;color:var(--text-secondary);}
.my-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.my-tag{font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;background:var(--gold-glow);color:var(--gold);}
/* Reverification banner */
.reverify-banner{margin:16px 20px 0;background:linear-gradient(135deg,rgba(212,175,55,0.12),rgba(212,175,55,0.06));border:1px solid var(--border-gold);border-radius:var(--radius-sm);padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;}
.reverify-icon{width:40px;height:40px;border-radius:50%;background:var(--gold-glow);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px;flex-shrink:0;}
.reverify-text{flex:1;}
.reverify-title{font-size:13px;font-weight:700;color:var(--text-primary);}
.reverify-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}
.reverify-days{font-family:var(--heading);font-size:18px;font-weight:600;color:var(--gold);}

/* ══════════════════════════════
   NOTIFICATIONS PANEL
══════════════════════════════ */
#notifBg{position:fixed;inset:0;z-index:1850;background:rgba(0,0,0,0.3);display:none;backdrop-filter:blur(2px);}
#notifBg.show{display:block;}
#notifPanel{position:fixed;top:0;right:0;width:min(360px,100vw);height:100dvh;background:var(--ivory);z-index:1900;display:none;flex-direction:column;transform:translateX(100%);transition:transform 0.35s var(--ease);box-shadow:-4px 0 32px rgba(0,0,0,0.15);}
#notifPanel.show{display:flex;transform:translateX(0);}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--white);border-bottom:1px solid var(--border);}
.notif-title{font-family:var(--heading);font-size:20px;font-weight:600;color:var(--text-primary);}
.notif-close-btn{width:34px;height:34px;border-radius:50%;background:var(--cream);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);font-size:13px;transition:all 0.2s;}
.notif-close-btn:hover{background:var(--gold-glow);color:var(--gold);}
.notif-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;}
.notif-item{background:var(--white);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border);border-left:3px solid var(--gold);cursor:pointer;transition:all 0.2s;}
.notif-item.unread{border-left-color:var(--blue);}
.notif-type{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.notif-item.unread .notif-type{color:var(--blue);}
.notif-msg{font-size:13px;line-height:1.5;color:var(--text-primary);font-weight:500;}
.notif-time{font-size:10px;color:var(--text-muted);margin-top:4px;}
.notif-actions{display:flex;gap:6px;margin-top:10px;}
.notif-btn{flex:1;padding:7px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:var(--body);transition:all 0.2s;}
.notif-btn-accept{background:var(--blue);color:#fff;}
.notif-btn-decline{background:var(--cream);color:var(--text-secondary);border:1px solid var(--border);}
.notif-btn-decline:hover{background:var(--rose-light);color:var(--rose);}

/* ══════════════════════════════
   FILTER BOTTOM SHEET
══════════════════════════════ */
.bs-overlay{position:fixed;inset:0;z-index:1800;background:rgba(0,15,30,0.55);backdrop-filter:blur(6px);display:none;align-items:flex-end;opacity:0;transition:opacity 0.3s;}
.bs-overlay.show{display:flex;opacity:1;}
.filter-sheet{background:var(--white);border-radius:var(--radius) var(--radius) 0 0;padding:20px 22px 40px;max-height:85dvh;overflow-y:auto;width:100%;}
.filter-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px;}
.filter-row{margin-bottom:18px;}
.filter-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;display:block;}
.filter-chips{display:flex;flex-wrap:wrap;gap:7px;}
.filter-chip{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);color:var(--text-secondary);background:var(--cream);transition:all 0.2s;font-family:var(--body);}
.filter-chip.active{border-color:var(--gold);background:var(--gold-glow);color:var(--gold);}
.filter-apply{width:100%;padding:14px;background:linear-gradient(135deg,var(--blue),var(--blue-mid));color:#fff;border:none;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--body);box-shadow:0 4px 16px rgba(0,51,102,0.25);margin-top:4px;}

/* ══════════════════════════════
   MODALS (invite, gathering, shepherd)
══════════════════════════════ */
.modal-icon-rose{background:var(--rose-light);color:var(--rose);}

/* ══════════════════════════════
   JOURNEY TRACKER
══════════════════════════════ */
.journey-strip{margin:14px 20px 0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.journey-strip::before{content:'';position:absolute;top:0;left:0;width:25%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-warm));}
.journey-label-top{font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:5px;}
.journey-stages{display:flex;align-items:center;}
.journey-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;}
.journey-stage:not(:last-child)::after{content:'';position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--border);z-index:0;}
.journey-stage.done:not(:last-child)::after{background:var(--gold);}
.journey-stage.active:not(:last-child)::after{background:linear-gradient(90deg,var(--gold),var(--border));}
.jdot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;z-index:1;transition:all 0.3s;}
.journey-stage.done .jdot{background:var(--gold);color:#fff;box-shadow:0 0 0 3px var(--gold-glow-strong);}
.journey-stage.active .jdot{background:var(--blue);color:#fff;animation:pulse 2s infinite;}
.journey-stage.locked .jdot{background:var(--cream);color:var(--text-muted);border:1.5px solid var(--border);}
.jlabel{font-size:9px;font-weight:700;letter-spacing:0.5px;text-align:center;color:var(--text-muted);}
.journey-stage.done .jlabel{color:var(--gold);}
.journey-stage.active .jlabel{color:var(--blue);}

/* ══════════════════════════════
   ANIMATIONS
══════════════════════════════ */
@keyframes crossIn{0%{opacity:0;transform:scale(0.4) rotate(-25deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes barFill{0%{width:0}100%{width:100%}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes slideIn{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
@keyframes scanDown{0%{top:0}100%{top:calc(100% - 3px)}}
.ani{animation:slideIn 0.5s ease-out forwards;opacity:0;}
.ani-d1{animation-delay:0.08s;}.ani-d2{animation-delay:0.16s;}.ani-d3{animation-delay:0.24s;}.ani-d4{animation-delay:0.32s;}.ani-d5{animation-delay:0.40s;}

@media(min-width:520px){.profiles-grid{grid-template-columns:repeat(3,1fr);}.fc-card{min-width:300px;}}
@media(min-width:800px){.profiles-grid{grid-template-columns:repeat(4,1fr);}}

/* ══════════════════════════════
   STATUS MOMENTS
══════════════════════════════ */

/* Moments strip */
.moments-strip {
  display:flex; gap:14px; padding:14px 20px 10px;
  overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border);
}
.moments-strip::-webkit-scrollbar { display:none; }
.moment-item {
  flex-shrink:0; width:70px; display:flex;
  flex-direction:column; align-items:center; gap:5px; cursor:pointer;
}
.moment-ring {
  width:64px; height:64px; border-radius:50%; padding:3px;
  background:linear-gradient(135deg,var(--gold),var(--rose));
  transition:transform .2s; position:relative;
}
.moment-ring:hover { transform:scale(1.06); }
.moment-ring.seen { background:var(--border); }
.moment-ring.mine {
  background:none; border:2.5px dashed var(--gold);
}
.moment-inner {
  width:100%; height:100%; border-radius:50%;
  background:var(--white); border:2.5px solid var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:18px; color:var(--blue);
  overflow:hidden;
}
.moment-inner img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.moment-add-icon {
  position:absolute; bottom:0; right:0;
  width:20px; height:20px; background:var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; border:2px solid var(--white); z-index:2;
}
.moment-name {
  font-size:10px; font-weight:700; color:var(--text-secondary);
  max-width:66px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.moment-name {
  font-size:10px; font-weight:700; color:var(--text-secondary);
  max-width:66px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── STATUS COMPOSE MODAL ── */
#statusModal {
  position:fixed; inset:0; z-index:2400;
  background:rgba(0,15,30,.7); backdrop-filter:blur(8px);
  display:none; align-items:flex-end; justify-content:center;
}
.status-compose-sheet {
  background:var(--white); border-radius:28px 28px 0 0;
  width:100%; max-width:640px; padding:20px 20px 36px;
  max-height:94dvh; overflow-y:auto;
}
.scs-handle {
  width:40px; height:4px; background:var(--border);
  border-radius:2px; margin:0 auto 16px;
}
/* User row */
.scs-user-av {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:18px; color:#fff; overflow:hidden;
}
.scs-user-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.scs-user-name {
  font-family:var(--heading); font-size:16px; font-weight:700;
  color:var(--text-primary); margin-bottom:4px;
}
/* Type chips */
.scs-type {
  padding:4px 12px; border-radius:20px; font-size:10px; font-weight:700;
  cursor:pointer; border:1.5px solid var(--border);
  color:var(--text-secondary); background:var(--cream);
  transition:all .15s; font-family:var(--body); white-space:nowrap;
}
.scs-type.active {
  border-color:var(--gold); background:var(--gold-glow); color:var(--gold-warm);
}
/* Textarea */
.scs-textarea {
  width:100%; min-height:120px; padding:14px;
  background:transparent; border:none; outline:none;
  font-size:18px; font-family:var(--heading); font-style:italic;
  color:var(--text-primary); resize:none; line-height:1.65;
  box-sizing:border-box;
}
.scs-textarea::placeholder { color:var(--text-muted); }
.scs-char { font-size:11px; color:var(--text-muted); text-align:right; padding:0 4px 8px; }
/* Toolbar */
.scs-toolbar {
  display:flex; gap:6px; padding:10px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:12px;
}
.scs-tool-btn {
  display:flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:20px; border:none;
  background:var(--cream); color:var(--text-secondary);
  font-size:12px; font-weight:600; cursor:pointer;
  font-family:var(--body); transition:all .15s;
}
.scs-tool-btn:hover { background:var(--gold-glow); color:var(--gold); }
.scs-tool-btn i { font-size:14px; }
/* Footer */
.scs-footer { display:flex; gap:10px; }
.scs-cancel {
  flex:1; padding:12px; border-radius:12px;
  background:var(--cream); border:1px solid var(--border);
  color:var(--text-secondary); font-size:13px; font-weight:700;
  cursor:pointer; font-family:var(--body);
}
.scs-post {
  flex:2; padding:12px; border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  color:#fff; border:none; font-size:14px; font-weight:700;
  cursor:pointer; font-family:var(--body);
  box-shadow:0 4px 16px rgba(0,51,102,.25);
}

/* ── STORIES VIEWER ── */
#momentViewer {
  position:fixed; inset:0; z-index:2500; background:#000;
  display:none; flex-direction:column;
  user-select:none; -webkit-user-select:none;
}
/* Blurred gradient background */
.mv-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(24px) brightness(.35); transform:scale(1.1);
}
/* Multiple progress bars */
.mv-progress-row {
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; gap:3px; padding:12px 14px 8px;
}
.mv-prog-seg {
  flex:1; height:2.5px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden;
}
.mv-prog-fill {
  height:100%; background:#fff; width:0;
  transition:none;
}
.mv-prog-fill.done { width:100%; }
.mv-prog-fill.active { animation:mvFill var(--dur, 5s) linear forwards; }
@keyframes mvFill { from{width:0} to{width:100%} }
/* Header */
.mv-header {
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:42px 16px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 100%);
}
.mv-av {
  width:40px; height:40px; border-radius:50%;
  border:2px solid rgba(255,255,255,.8); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:15px; color:#fff;
  background:var(--blue); flex-shrink:0;
}
.mv-av img { width:100%; height:100%; object-fit:cover; }
.mv-name { font-family:var(--heading); font-size:15px; font-weight:700; color:#fff; }
.mv-time { font-size:10px; color:rgba(255,255,255,.6); margin-top:1px; }
.mv-close {
  margin-left:auto; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; color:#fff;
  font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
/* Tap zones */
.mv-tap-left, .mv-tap-right {
  position:absolute; top:0; bottom:0; z-index:9; width:35%;
  cursor:pointer;
}
.mv-tap-left  { left:0; }
.mv-tap-right { right:0; }
/* Content */
.mv-content {
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:80px 24px 120px;
}
.mv-img {
  max-width:100%; max-height:60vh; border-radius:16px;
  object-fit:contain; margin-bottom:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.mv-text {
  font-family:var(--heading); font-size:28px; font-style:italic;
  line-height:1.45; color:#fff; text-align:center;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
  max-width:380px;
}
.mv-verse-ref {
  font-size:12px; font-weight:700; color:var(--gold);
  text-align:center; letter-spacing:.8px; margin-top:10px;
}
/* Reactions bar */
.mv-reactions {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:16px 20px 36px;
  background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,transparent 100%);
}
.mv-react-btn {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  border-radius:24px; padding:9px 18px; cursor:pointer;
  color:#fff; font-size:14px; font-weight:700; font-family:var(--body);
  transition:all .2s;
}
.mv-react-btn:hover { background:rgba(255,255,255,.25); }
.mv-react-btn.active { background:rgba(212,175,55,.35); border-color:var(--gold); color:var(--gold); }
.mv-react-btn i { font-size:18px; }
.mv-type-badge {
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2); border-radius:20px;
  padding:6px 14px; font-size:12px; font-weight:700; color:#fff;
}

/* Cover edit button */
.me-cover-wrap { position:relative; }
.me-cover-edit-btn {
  position:absolute; bottom:10px; right:12px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); border-radius:20px;
  padding:6px 12px; font-size:11px; font-weight:700;
  color:#fff; cursor:pointer; display:flex; align-items:center; gap:5px;
  transition:background .2s; font-family:var(--body);
}
.me-cover-edit-btn:hover { background:rgba(0,0,0,.65); }

/* Topbar avatar */
.tb-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:13px; font-weight:700;
  color:#fff; cursor:pointer; overflow:hidden;
  border:2px solid var(--border-gold);
  transition:transform .2s;
}
.tb-avatar:hover { transform:scale(1.05); }
.tb-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Sidebar sign-out button */
.bnav-signout {
  margin-top:auto !important;
  color:var(--rose) !important;
  border-top:1px solid var(--border);
  border-radius:0 !important;
  padding:13px 14px !important;
}
.bnav-signout:hover {
  background:var(--rose-light) !important;
  color:var(--rose) !important;
}
/* Hide sign out from mobile bottom nav */
@media (max-width:1023px) { .bnav-signout { display:none !important; } }

/* Secondary nav items — hidden on mobile, shown in desktop sidebar */
.bnav-secondary { display:none; }
/* More button — only on mobile */
@media (min-width:768px) { #moreNavBtn { display:none !important; } }

/* More sheet grid items */
.more-item {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px; background:var(--cream); border-radius:16px;
  border:1px solid var(--border); cursor:pointer;
  font-size:11px; font-weight:700; color:var(--text-secondary);
  font-family:var(--body); transition:all .15s;
}
.more-item:hover { background:var(--gold-glow); color:var(--text-primary); border-color:var(--border-gold); }
.more-icon {
  width:44px; height:44px; border-radius:14px;
  background:rgba(0,51,102,.08); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:all .15s;
}
.more-item:hover .more-icon { background:rgba(0,51,102,.15); }

/* Moments strip */
.moments-strip {
  display:flex; gap:14px; padding:12px 20px;
  overflow-x:auto; scrollbar-width:none;
}
.moments-strip::-webkit-scrollbar { display:none; }
.moment-item {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; flex-shrink:0; cursor:pointer;
}
.moment-ring {
  width:58px; height:58px; border-radius:50%; padding:2.5px;
  background:linear-gradient(135deg,var(--gold),var(--rose));
  transition:transform .2s;
}

/* Status bar */
.status-bar {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; background:var(--white);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.status-av-sm {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:14px; color:#fff; overflow:hidden;
}
.status-av-sm img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.status-prompt {
  flex:1; padding:9px 16px; background:var(--cream);
  border:1.5px solid var(--border); border-radius:22px;
  font-size:13px; color:var(--text-muted); cursor:pointer;
  font-family:var(--body); text-align:left; transition:border-color .2s;
}
.status-prompt:hover { border-color:var(--gold); }

/* Moment viewer overlay */
#momentViewer {
  position:fixed; inset:0; z-index:2500;
  background:#000;
  flex-direction:column; align-items:center; justify-content:center;
}
.mv-bg {
  position:absolute; inset:0; background-size:cover;
  background-position:center; filter:blur(20px) brightness(.4);
}
.mv-card {
  position:relative; z-index:2; width:100%; max-width:420px;
  margin:0 auto; padding:24px; color:#fff;
  display:flex; flex-direction:column; gap:16px;
}
.mv-header { display:flex; align-items:center; gap:10px; }
.mv-av {
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--gold); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:16px; color:#fff;
  background:var(--blue); flex-shrink:0;
}
.mv-av img { width:100%; height:100%; object-fit:cover; }
.mv-name { font-family:var(--heading); font-size:18px; font-weight:600; }
.mv-time { font-size:11px; opacity:.6; margin-top:1px; }
.mv-close {
  margin-left:auto; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; color:#fff;
  font-size:14px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}
.mv-text {
  font-family:var(--heading); font-size:26px; font-style:italic;
  line-height:1.5; color:#fff; text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.mv-reactions { display:flex; gap:16px; justify-content:center; margin-top:8px; }
.mv-react-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:16px; padding:10px 20px; cursor:pointer;
  color:#fff; font-size:13px; font-weight:700; font-family:var(--body);
  transition:all .2s;
}
.mv-react-btn:hover { background:rgba(255,255,255,.22); }
.mv-react-btn.active { background:rgba(212,175,55,.3); border-color:var(--gold); color:var(--gold); }
.mv-react-btn i { font-size:22px; }
.mv-progress { position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.2); }
.mv-progress-bar { height:100%; background:var(--gold); animation:mvProgress 5s linear forwards; }
@keyframes mvProgress { 0%{width:0} 100%{width:100%} }

/* Status compose modal */
#statusModal {
  position:fixed; inset:0; z-index:2400;
  background:rgba(0,15,30,.65); backdrop-filter:blur(6px);
  align-items:flex-end; justify-content:center;
}
.status-compose-sheet {
  background:var(--white); border-radius:28px 28px 0 0;
  width:100%; max-width:600px; padding:24px 22px 40px;
  max-height:92dvh; overflow-y:auto;
}
.scs-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.scs-title { font-family:var(--heading); font-size:20px; font-weight:600; color:var(--text-primary); margin-bottom:14px; }
.scs-types { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.scs-type {
  padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700;
  cursor:pointer; border:1.5px solid var(--border);
  color:var(--text-secondary); background:var(--cream); transition:all .2s; font-family:var(--body);
}
.scs-type.active { border-color:var(--gold); background:var(--gold-glow); color:var(--gold-warm); }
.scs-textarea {
  width:100%; min-height:110px; padding:14px;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:14px; font-size:16px; font-family:var(--heading);
  font-style:italic; color:var(--text-primary); outline:none;
  resize:none; line-height:1.6; transition:border-color .2s; box-sizing:border-box;
}
.scs-textarea:focus { border-color:var(--gold); }
.scs-char { font-size:11px; color:var(--text-muted); text-align:right; margin-top:4px; }
.scs-footer { display:flex; gap:10px; margin-top:14px; }
.scs-cancel {
  flex:1; padding:12px; border-radius:12px; background:var(--cream);
  border:1px solid var(--border); color:var(--text-secondary);
  font-size:13px; font-weight:700; cursor:pointer; font-family:var(--body);
}
.scs-post {
  flex:2; padding:12px; border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  color:#fff; border:none; font-size:14px; font-weight:700;
  cursor:pointer; font-family:var(--body);
  box-shadow:0 4px 16px rgba(0,51,102,.25);
}

/* Cover edit btn */
.me-cover-wrap { position:relative; }
.me-cover-edit-btn {
  position:absolute; bottom:10px; right:12px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); border-radius:20px;
  padding:6px 12px; font-size:11px; font-weight:700;
  color:#fff; cursor:pointer; display:flex; align-items:center; gap:5px;
  transition:background .2s; font-family:var(--body);
}
.me-cover-edit-btn:hover { background:rgba(0,0,0,.65); }

/* Desktop sidebar: push signout to bottom */
@media (min-width:1024px) {
  .bnav { justify-content:flex-start; }
  .bnav-signout {
    margin-top:auto !important;
    border-radius:12px !important;
    border-top:none !important;
    padding:11px 14px !important;
  }
  /* Daily bread — hide in center col on desktop, right panel shows it */
  #breadWidget { display:none !important; }
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-gold); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }
* { scrollbar-width:thin; scrollbar-color:var(--border-gold) transparent; }

/* ══════════════════════════════
   DESKTOP — FACEBOOK-STYLE
   Left 240px fixed | Center max 640px scrollable | Right 280px fixed
   All contained in 100vh, only center scrolls
══════════════════════════════ */
@media (min-width:1024px) {

  /* Auth */
  #authFlow {
    min-height:100vh; display:flex;
    align-items:center; justify-content:center;
    background:linear-gradient(135deg,#001020 0%,#001A33 55%,#002244 100%);
    padding:40px 24px; overflow:auto;
  }
  .auth-screen {
    background:var(--white); border-radius:28px;
    padding:52px 56px; max-width:460px; width:100%;
    box-shadow:0 40px 80px rgba(0,0,0,.35);
  }
  .auth-heading { font-size:2.2rem; }

  /* ── App shell ── */
  #app {
    display:grid !important;
    grid-template-columns:240px 1fr 280px;
    grid-template-rows:56px 1fr;
    height:100vh; max-height:100vh;
    overflow:hidden; padding-bottom:0;
    background:var(--ivory);
  }
  #app.show { display:grid !important; }

  /* ── Topbar — spans all 3 cols ── */
  .topbar {
    grid-column:1 / -1; grid-row:1;
    position:static; height:56px;
    border-bottom:1px solid var(--border);
    background:var(--white); z-index:300;
    padding:0 16px;
  }

  /* ── LEFT COL — fixed, always visible ── */
  .bnav {
    grid-column:1; grid-row:2;
    position:sticky; top:56px;
    width:240px; height:calc(100vh - 56px);
    display:flex; flex-direction:column;
    border-top:none; border-right:1px solid var(--border);
    background:var(--white); padding:12px 10px;
    gap:2px; box-shadow:none; overflow-y:auto;
  }

  /* Nav items — icon + label always shown */
  .bnav-item {
    flex-direction:row; justify-content:flex-start;
    width:100%; padding:9px 14px; border-radius:10px;
    gap:12px; border-bottom:none; font-size:14px;
    font-weight:600; color:var(--text-secondary);
    transition:all .15s;
  }
  .bnav-item::before { display:none; }
  .bnav-item i { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
  .bnav-item span { display:block; font-size:13px; font-weight:600; }
  .bnav-item:hover { background:var(--cream); color:var(--text-primary); }
  .bnav-item.active {
    background:linear-gradient(135deg,var(--blue),var(--blue-mid));
    color:#fff;
  }
  .bnav-item.active i { color:#fff; }
  .bnav-secondary { display:flex; }
  #moreNavBtn { display:none !important; }
  .nav-e2e { display:none; }

  /* ── CENTER COL — scrollable, max-width for readability ── */
  .tab {
    grid-column:2; grid-row:2;
    height:calc(100vh - 56px);
    overflow-y:auto; padding-bottom:0;
  }
  .tab.active { display:block; }
  .tab > .greeting,
  .tab > .trust-row,
  .tab > .journey-strip,
  .tab > .bread-widget,
  .tab > .status-bar,
  .tab > .moments-strip,
  .tab > .sec-hdr,
  .tab > .fc-track-outer,
  .tab > .fc-dots,
  .tab > .profiles-grid,
  .tab > div { max-width:660px; margin-left:auto; margin-right:auto; }

  /* Featured card — full width in center */
  .fc-card { min-width:280px; max-width:340px; }
  .fc-track { justify-content:center; }

  /* Profile grid — 2 col */
  .profiles-grid {
    grid-template-columns:repeat(2,1fr);
    padding:0 20px 20px;
  }

  /* Modal */
  .modal { max-width:520px; border-radius:24px; } /* padding lives in .modal-body / .modal-hd */

  /* Profile detail */
  #profileDetail {
    position:fixed; top:56px; right:0;
    width:480px; height:calc(100vh - 56px);
    transform:translateX(100%); opacity:1;
    border-left:1px solid var(--border);
    box-shadow:-8px 0 32px rgba(0,0,0,.08);
  }
  #profileDetail.show { transform:translateX(0); }

  /* ── RIGHT COL — fixed, contextual ── */
  #rightPanel {
    grid-column:3; grid-row:2;
    height:calc(100vh - 56px); overflow-y:auto;
    border-left:1px solid var(--border);
    background:var(--white);
    display:flex !important;
    flex-direction:column;
  }

  /* Status modal centred on desktop */
  #statusModal { align-items:center; }
  .status-compose-sheet { border-radius:24px; max-width:540px; margin-bottom:0; }
}

/* ── Tablet 768-1023px — 2 col, icon-only sidebar ── */
@media (min-width:768px) and (max-width:1023px) {
  #authFlow {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#001020,#001A33 50%,#002244); padding:40px 24px;
  }
  .auth-screen {
    background:var(--white); border-radius:24px; padding:44px 48px;
    max-width:440px; width:100%; box-shadow:0 24px 64px rgba(0,0,0,.25);
  }
  #app {
    display:grid !important;
    grid-template-columns:200px 1fr;
    grid-template-rows:56px 1fr;
    height:100vh; overflow:hidden; padding-bottom:0;
  }
  #app.show { display:grid !important; }
  .topbar { grid-column:1 / -1; grid-row:1; height:56px; position:static; }
  .bnav {
    grid-column:1; grid-row:2;
    position:static; height:calc(100vh - 56px);
    flex-direction:column; border-top:none;
    border-right:1px solid var(--border);
    padding:10px 8px; gap:2px; background:var(--white);
    overflow:hidden; width:200px;
  }
  .bnav-item {
    flex-direction:row; justify-content:flex-start; align-items:center;
    width:100%; padding:10px 12px; border-radius:10px;
    gap:10px; border-bottom:none; font-size:13px; font-weight:600;
  }
  .bnav-item::before { display:none; }
  .bnav-item i { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
  .bnav-item span { display:block; font-size:13px; font-weight:600; }
  .bnav-item:hover { background:var(--cream); color:var(--text-primary); }
  .bnav-item.active { background:linear-gradient(135deg,var(--blue),var(--blue-mid)); color:#fff; }
  .bnav-item.active i { color:#fff; }
  .bnav-secondary { display:flex; }
  #moreNavBtn { display:none !important; }
  .nav-e2e { display:none; }
  .bnav-stats { display:none; }
  .bnav-mark { display:none; }
  .tab { grid-column:2; grid-row:2; overflow-y:auto; height:calc(100vh - 56px); padding-bottom:0; }
  .tab.active { display:block; }
  #tabChats.active { display:flex !important; overflow:hidden; }
  #rightPanel { display:none !important; }
  #profileDetail {
    position:fixed; top:56px; right:0; width:400px;
    height:calc(100vh - 56px); transform:translateX(100%);
    opacity:1; border-left:1px solid var(--border);
  }
  #profileDetail.show { transform:translateX(0); }
  .profiles-grid { grid-template-columns:repeat(2,1fr); }
}
/* ══════════════════════════════
   SEE ALL MODAL — Believer cards
══════════════════════════════ */
.sa-card {
  background:var(--white); border-radius:16px;
  border:1px solid var(--border); overflow:hidden;
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.sa-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,51,102,.1); }
.sa-card-top {
  height:90px; position:relative;
  background:linear-gradient(135deg,#003366,#1A6AB5);
  display:flex; align-items:center; justify-content:center;
}
.sa-card-av {
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.2); border:3px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:20px; color:#fff;
  overflow:hidden;
}
.sa-card-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sa-card-verified {
  position:absolute; top:8px; right:8px;
  background:var(--green); color:#fff; border-radius:50%;
  width:18px; height:18px; font-size:9px;
  display:flex; align-items:center; justify-content:center;
}
.sa-card-body { padding:10px 12px 12px; }
.sa-card-name {
  font-family:var(--heading); font-size:14px; font-weight:700;
  color:var(--text-primary); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.sa-card-sub {
  font-size:10px; color:var(--text-muted);
  margin-top:2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.sa-card-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.sa-chip {
  font-size:9px; font-weight:700; padding:2px 8px;
  border-radius:10px; background:var(--gold-glow); color:var(--gold-warm);
}
.sa-chip.blue { background:rgba(0,51,102,.07); color:var(--blue); }
.sa-card-btn {
  width:100%; margin-top:8px; padding:7px;
  border-radius:10px; border:none;
  background:linear-gradient(135deg,var(--blue),var(--blue-mid));
  color:#fff; font-size:11px; font-weight:700;
  cursor:pointer; font-family:var(--body);
}

/* ══════════════════════════════
   CONNECTIONS TAB
══════════════════════════════ */
.conn-filter {
  padding:7px 16px; border-radius:20px; font-size:12px; font-weight:700;
  cursor:pointer; border:1.5px solid var(--border);
  color:var(--text-secondary); background:var(--cream);
  white-space:nowrap; font-family:var(--body); transition:all .15s;
  flex-shrink:0;
}
.conn-filter.active {
  background:var(--blue); color:#fff; border-color:var(--blue);
}
.conn-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:16px; padding:14px 16px; margin-bottom:10px;
  display:flex; align-items:center; gap:12px;
  transition:box-shadow .15s;
}
.conn-card:hover { box-shadow:0 4px 16px rgba(0,51,102,.08); }
.conn-av {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-size:18px; color:#fff; overflow:hidden;
  position:relative;
}
.conn-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.conn-av-badge {
  position:absolute; bottom:0; right:0;
  width:16px; height:16px; border-radius:50%; border:2px solid var(--white);
  font-size:7px; display:flex; align-items:center; justify-content:center;
}
.conn-av-badge.accepted { background:var(--green); color:#fff; }
.conn-av-badge.pending  { background:var(--gold);  color:#000; }
.conn-info { flex:1; min-width:0; }
.conn-name {
  font-family:var(--heading); font-size:15px; font-weight:700;
  color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.conn-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.conn-status-chip {
  font-size:9px; font-weight:800; padding:3px 8px; border-radius:10px;
  text-transform:uppercase; letter-spacing:.5px; margin-top:4px; display:inline-block;
}
.chip-accepted   { background:rgba(22,163,74,.1);  color:var(--green); }
.chip-pending    { background:rgba(212,175,55,.15); color:var(--gold-warm); }
.chip-declined   { background:rgba(158,59,92,.1);  color:var(--rose); }
.chip-sent       { background:rgba(0,51,102,.08);  color:var(--blue); }
.chip-disconnected { background:#f0f0f0; color:#888; }
.conn-actions { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.conn-btn {
  padding:5px 12px; border-radius:8px; font-size:11px; font-weight:700;
  cursor:pointer; border:none; font-family:var(--body); white-space:nowrap;
}
.conn-btn-accept { background:var(--green); color:#fff; }
.conn-btn-decline { background:var(--cream); color:var(--rose); border:1px solid var(--rose); }
.conn-btn-disconnect { background:var(--cream); color:var(--text-muted); border:1px solid var(--border); }
.conn-btn-chat { background:linear-gradient(135deg,var(--blue),var(--blue-mid)); color:#fff; }