/* Design tokens. Fonts: CCF Brand Book, Proxima Nova for web text (CCF's Adobe Fonts kit, loaded in the page head) */
:root{
  --teal:#00A6B6;          /* CCF brand teal (accents) */
  --teal-dark:#007a87;     /* "clay" — primary actions */
  --teal-deeper:#006a76;
  --teal-light:#3ec6d0;
  --teal-wash:#e2f3f5;
  --navy:#0b2532;          /* "night" — dark panels */
  --navy-deep:#0d2b3a;     /* "ink" — text */
  --ink-soft:#2b4654;
  --coral:#007a87;         /* the old coral accent now follows the Centris teal */
  --coral-dark:#006a76;
  --gold:#3ec6d0;
  --purple:#7d1235;        /* Centris maroon accent */
  --gray:#4d6878;          /* "ink-mute" */
  --bg:#f8fafb;            /* "paper" */
  --paper-deep:#eef3f5;
  --mist:#f1f5f7;
  --hairline:#dbe5ea;
  --white:#ffffff;
  --radius:16px;
  --radius-sm:8px;
  --shadow:0 0 0 1px #dbe5ea, 0 2px 4px rgba(13,43,58,0.024), 0 8px 20px -8px rgba(13,43,58,0.09);
  --shadow-sm:0 1px 2px rgba(13,43,58,0.04), 0 6px 16px -10px rgba(13,43,58,0.10);
  --font-head:proxima-nova,'Proxima Nova','Helvetica Neue',Arial,sans-serif;
  --font-body:proxima-nova,'Proxima Nova','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 12px;color:var(--navy-deep);}
p{line-height:1.6;color:var(--gray);}
a{color:var(--teal-dark);}
.hidden{display:none !important;}
img{max-width:100%;display:block;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:0.95rem;
  padding:11px 22px;border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(135deg,var(--coral),var(--gold));color:#fff;box-shadow:0 6px 16px rgba(255,107,91,0.35);}
.btn-primary:hover{box-shadow:0 8px 22px rgba(255,107,91,0.45);}
.btn-outline{background:#fff;color:var(--teal-dark);border:2px solid var(--teal);}
.btn-outline:hover{background:var(--teal);color:#fff;}
.btn-ghost{background:transparent;color:var(--navy-deep);}
.btn-ghost:hover{background:rgba(11,46,69,0.06);}
.btn-lg{padding:14px 30px;font-size:1.05rem;}
.btn-block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(11,46,69,0.08);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand-logo{height:34px;}
.header-actions{display:flex;align-items:center;gap:14px;}
#guestAuth{display:flex;gap:10px;}

.lang-switcher{position:relative;}
.lang-btn{
  display:flex;align-items:center;gap:6px;background:#eef7f8;border:1px solid #d7ecee;
  color:var(--navy-deep);border-radius:999px;padding:8px 14px;font-family:var(--font-body);
  font-weight:700;font-size:0.85rem;cursor:pointer;
}
.lang-btn:hover{background:#e0f2f3;}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;
  box-shadow:var(--shadow);padding:6px;display:none;min-width:170px;z-index:60;
}
.lang-menu.open{display:block;}
.lang-menu button{
  display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;
  padding:9px 12px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:0.9rem;color:var(--navy-deep);
}
.lang-menu button:hover{background:#f0f6f7;}
.beta-tag{font-size:0.62rem;background:var(--gold);color:#5c3a00;padding:2px 6px;border-radius:6px;font-weight:800;}

.user-auth{display:flex;align-items:center;gap:12px;}
.user-chip{display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.9rem;}
.user-avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--purple));
  color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;
}

/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-deep) 0%, var(--navy) 45%, var(--teal-dark) 100%);
  padding:56px 24px 40px;
}
.hero-bg-shape{position:absolute;border-radius:50%;filter:blur(10px);opacity:0.35;}
.shape-1{width:420px;height:420px;background:var(--coral);top:-180px;right:-120px;}
.shape-2{width:300px;height:300px;background:var(--gold);bottom:-140px;left:-80px;opacity:0.25;}
.hero-inner{
  position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.eyebrow{
  display:inline-block;background:rgba(255,255,255,0.14);color:#ffe6b3;font-weight:700;font-size:0.8rem;
  padding:6px 14px;border-radius:999px;margin-bottom:14px;letter-spacing:0.03em;
}
.hero-copy h1{color:#fff;font-size:2.4rem;line-height:1.2;margin-bottom:16px;}
.hero-copy p{color:#d7e6ec;font-size:1.05rem;}
.hero-video-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius);padding:14px;backdrop-filter:blur(4px);}
.video-frame{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000;}
.video-frame iframe{width:100%;height:100%;border:0;}
.dot{width:8px;height:8px;border-radius:50%;background:#ff4b4b;animation:pulse 1.5s infinite;}
.dot-offline{background:#9aa7ad;animation:none;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,75,75,0.6);}70%{box-shadow:0 0 0 8px rgba(255,75,75,0);}100%{box-shadow:0 0 0 0 rgba(255,75,75,0);}}
.video-meta{display:flex;flex-direction:column;gap:2px;color:#fff;margin-top:12px;padding:0 4px;}
.video-meta strong{font-family:var(--font-head);}
.video-meta span{color:#bcd3db;font-size:0.85rem;}

.moments-strip{position:relative;max-width:1200px;margin:56px auto 0;}
.moments-strip h2{color:#fff;}
.section-sub{color:#cfe3ea;margin-bottom:20px;}
.moments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.moment-card{
  aspect-ratio:4/3;border-radius:14px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:10px;color:#fff;font-weight:700;font-size:0.85rem;font-family:var(--font-head);
  box-shadow:var(--shadow-sm);
}
.moment-card span{position:relative;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,0.4);}
.moment-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.45),transparent 60%);}

/* ===== Panels ===== */
.panel{padding:64px 24px;}
.panel-inner{max-width:1200px;margin:0 auto;}
.panel-title{font-size:1.8rem;}
.info-panel{background:var(--white);}
.rooms-teaser{background:linear-gradient(120deg,#eafcfb,#fef3e6);}

/* ===== Tabbar ===== */
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;border-bottom:2px solid #eef2f3;}
.tab-btn{
  background:none;border:none;padding:12px 18px;font-family:var(--font-head);font-weight:600;font-size:0.95rem;
  color:var(--gray);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s;
}
.tab-btn:hover{color:var(--teal-dark);}
.tab-btn.active{color:var(--navy-deep);border-bottom-color:var(--coral);}
.tab-panel{display:none;animation:fadein .25s ease;}
.tab-panel.active{display:block;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* About */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start;}
.about-card{background:linear-gradient(135deg,var(--navy),var(--teal-dark));color:#fff;border-radius:var(--radius);padding:28px;}
.about-card h4{color:#ffe6b3;margin-top:0;}
.about-card h4 ~ h4{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.15);}
.mission-quote{color:#eaf6f7;font-style:italic;font-size:1.05rem;}

/* We're Here for You (data-section-panel="connect"): three cards in a row, then the feedback form across the page */
.connect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:18px;}
.connect-card{background:#fbfdfd;border:1px solid #eef2f3;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;scroll-margin-top:90px;}
.connect-card > .btn{margin-top:auto;align-self:flex-start;}
.connect-icon{font-size:2rem;margin-bottom:8px;}
.connect-feedback{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px;align-items:start;}
@media (max-width:980px){
  .connect-grid{grid-template-columns:1fr;}
  .connect-feedback{grid-template-columns:1fr;gap:6px;}
}

/* Give */
.give-wrap{max-width:700px;}
.give-scripture{
  display:block;margin:16px 0 22px;padding:16px 20px;border-left:4px solid var(--gold);
  background:#fffaf0;color:var(--navy-deep);font-style:italic;font-size:1rem;line-height:1.7;border-radius:0 10px 10px 0;
}
.embed-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:24px;background:#fff;}
.give-embed iframe{width:100%;height:520px;border:0;}
.embed-fallback-note{font-size:0.8rem;color:#64757a;margin-top:8px;}

/* ===== Interaction Panel ===== */
.interaction-panel{background:var(--bg);}
.interaction-shell{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;position:relative;overflow:hidden;}
.interaction-body{position:relative;min-height:420px;}
.itab-panel{display:none;}
.itab-panel.active{display:block;}

.lock-overlay{
  position:absolute;inset:0;z-index:20;background:rgba(255,255,255,0.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;border-radius:12px;
}
.lock-card{text-align:center;max-width:380px;padding:24px;}
.lock-icon{font-size:2.4rem;margin-bottom:10px;}

/* Chat */
.chat-box{display:flex;flex-direction:column;height:420px;}
.chat-header{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);font-weight:700;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.translate-toggle{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;font-size:0.82rem;color:var(--gray);}
.chat-messages{flex:1;overflow-y:auto;background:#f7fafb;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{max-width:75%;padding:9px 13px;border-radius:14px;font-size:0.92rem;line-height:1.4;}
.chat-msg.other{background:#fff;border:1px solid #eef2f3;align-self:flex-start;border-bottom-left-radius:4px;}
.chat-msg.me{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.chat-msg .msg-author{display:block;font-weight:800;font-size:0.72rem;margin-bottom:2px;opacity:0.8;}
.chat-msg .msg-translated{display:block;font-size:0.72rem;opacity:0.7;margin-top:4px;font-style:italic;}
.chat-input-row{display:flex;gap:10px;margin-top:12px;}
.chat-input-row input{flex:1;padding:11px 14px;border-radius:999px;border:1px solid #dde5e7;font-family:var(--font-body);}

/* Pray */
.pray-subtabbar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.subtab-btn{background:#f0f6f7;border:none;padding:9px 16px;border-radius:999px;font-family:var(--font-head);font-weight:600;font-size:0.85rem;color:var(--gray);cursor:pointer;}
.subtab-btn.active{background:var(--teal);color:#fff;}
.pray-sub{display:none;}
.pray-sub.active{display:block;}
.live-prayer-card{background:#f7fafb;border-radius:14px;padding:26px;text-align:center;}
.host-status{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;margin-bottom:10px;}

.form-card{max-width:460px;background:#f7fafb;border-radius:14px;padding:22px;}
.form-card label{display:block;font-weight:700;font-size:0.85rem;margin:12px 0 6px;}
.form-card input,.form-card textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);}
.form-success{background:#e6f8ee;color:#1c7a4a;padding:10px 14px;border-radius:10px;margin-top:14px;font-size:0.88rem;}

.wall-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.prayer-wall{
  background:repeating-linear-gradient(#f0e6cf,#f0e6cf 100%);
  border:14px solid #caa06b;border-radius:10px;padding:20px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;min-height:240px;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.15);
}
.sticky-note{
  background:#fff6b0;border-radius:4px;padding:14px;box-shadow:2px 4px 8px rgba(0,0,0,0.18);
  transform:rotate(var(--rot,-1deg));font-size:0.88rem;display:flex;flex-direction:column;gap:8px;
}
.sticky-note:nth-child(3n){background:#c9f2d8;}
.sticky-note:nth-child(3n+1){background:#ffe0c2;}
.sticky-note .note-author{font-weight:800;font-size:0.75rem;}
.sticky-note .note-replies{display:flex;flex-direction:column;gap:5px;margin-top:4px;border-top:1px dashed rgba(0,0,0,0.15);padding-top:6px;}
.sticky-note .note-reply{font-size:0.78rem;background:rgba(255,255,255,0.5);border-radius:6px;padding:5px 7px;}
.sticky-note .note-reply-row{display:flex;gap:6px;margin-top:6px;}
.sticky-note .note-reply-row input{flex:1;border:none;border-radius:6px;padding:5px 7px;font-size:0.78rem;}
.sticky-note .note-reply-row button{border:none;background:var(--navy-deep);color:#fff;border-radius:6px;padding:0 8px;cursor:pointer;font-size:0.78rem;}

/* Schedule */
.schedule-list{display:flex;flex-direction:column;gap:14px;}
.schedule-item{display:flex;gap:16px;align-items:center;background:#f7fafb;border-radius:12px;padding:16px 18px;}
.schedule-date{
  min-width:64px;text-align:center;background:linear-gradient(135deg,var(--coral),var(--gold));color:#fff;
  border-radius:10px;padding:8px 6px;font-family:var(--font-head);font-weight:800;
}
.schedule-date small{display:block;font-weight:600;font-size:0.65rem;text-transform:uppercase;}
.schedule-item h4{margin:0 0 3px;font-size:1rem;}
.schedule-item p{margin:0;font-size:0.85rem;}

/* Notes */
.notes-card textarea{
  width:100%;border-radius:14px;border:1px solid #dde5e7;padding:16px;font-family:var(--font-body);font-size:0.95rem;resize:vertical;
}
.autosave-note{font-size:0.8rem;color:#64757a;align-self:center;}

/* Rooms teaser */
.rooms-teaser-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;}
.rooms-teaser-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mini-room-card{background:#fff;border-radius:12px;padding:14px;box-shadow:var(--shadow-sm);}
.mini-room-card strong{display:block;font-family:var(--font-head);font-size:0.9rem;margin-bottom:6px;}
.mini-avatars{display:flex;}
.mini-avatar{
  width:26px;height:26px;border-radius:50%;background:var(--purple);color:#fff;font-size:0.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-left:-8px;border:2px solid #fff;
}
.mini-avatar:first-child{margin-left:0;}

/* Rooms full page */
.rooms-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
.back-btn{margin-bottom:14px;padding-left:4px;}
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.room-card{background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);}
.room-card h4{margin-bottom:4px;}
.room-purpose{font-size:0.85rem;color:var(--gray);margin-bottom:12px;}
.room-occupants{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.room-occupants .mini-avatar{margin-left:-8px;}
.room-occupants .mini-avatar:first-child{margin-left:0;}
.room-occ-count{font-size:0.78rem;color:var(--gray);font-weight:700;}
.room-actions{display:flex;gap:8px;}

.active-room-shell{display:grid;grid-template-columns:1fr 280px;gap:20px;}
.active-room-video{background:#0d1b22;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.active-room-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#fff;}
.room-video-wrap{position:relative;}
#roomVideoFrame{display:block;width:100%;height:520px;border:0;background:#0d1b22;}
.room-video-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#c3d5dd;font-weight:600;background:#0d1b22;}
.active-room-side{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);}
.active-room-side ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;}
.active-room-side li{display:flex;align-items:center;gap:8px;font-size:0.88rem;font-weight:600;}
.request-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.request-row button{border:none;background:var(--teal);color:#fff;border-radius:8px;padding:4px 9px;font-size:0.75rem;cursor:pointer;}

/* ===== Modals ===== */
/* above IsAIah's chat (901), so Sign Up / Log In and the connect card opened from his chat show on top */
.modal-overlay{
  position:fixed;inset:0;background:rgba(7,29,46,0.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:950;padding:20px;
}
.modal-card{background:#fff;border-radius:var(--radius);padding:32px;max-width:440px;width:100%;position:relative;max-height:90vh;overflow-y:auto;}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--gray);}
.auth-logo{height:44px;margin:0 auto 16px;}
.auth-tabbar{display:flex;background:#f0f6f7;border-radius:999px;padding:4px;margin-bottom:20px;}
.auth-tab{flex:1;background:none;border:none;padding:10px;border-radius:999px;font-family:var(--font-head);font-weight:700;cursor:pointer;color:var(--gray);}
.auth-tab.active{background:var(--teal);color:#fff;}
.auth-form{display:none;flex-direction:column;}
.auth-form.active{display:flex;}
.auth-form label{font-weight:700;font-size:0.85rem;margin:10px 0 5px;}
.auth-form input{padding:11px 13px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);}
.auth-hint{font-size:0.8rem;background:#eafcfb;color:var(--teal-dark);padding:8px 12px;border-radius:8px;margin:0 0 6px;}
.forgot-link{align-self:flex-end;font-size:0.8rem;margin:6px 0 16px;}
.auth-divider{text-align:center;font-size:0.78rem;color:#64757a;margin:18px 0 12px;position:relative;}
.social-row{display:flex;gap:10px;}
.social-btn{flex:1;font-weight:800;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-weight:600;font-size:0.82rem;margin:14px 0;}
.checkbox-row input{width:auto;}
/* sign up: mobile number as + country code and number */
.mobile-row{display:flex;align-items:stretch;gap:6px;}
.mobile-plus{display:flex;align-items:center;font-weight:800;color:var(--navy-deep);padding:0 2px;}
.auth-form .mobile-row input:first-of-type{width:64px;flex:none;text-align:center;}
.auth-form .mobile-row input:last-of-type{flex:1;min-width:0;}
.field-hint{margin:5px 0 0;font-size:0.76rem;color:var(--gray);}
/* sign up: the two agreements, each with its link (like the clinic booking form) */
.auth-form .agree-row{align-items:flex-start;gap:12px;margin:12px 0 0;font-weight:500;font-size:0.86rem;line-height:1.5;color:var(--ink-soft);cursor:pointer;}
.auth-form .agree-row input{flex:none;width:20px;height:20px;margin:1px 0 0;padding:0;accent-color:var(--teal-dark);cursor:pointer;}
.agree-row a{color:var(--teal-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
#signupSubmit{margin-top:18px;}
#signupSubmit:disabled{background:#eef1f3;color:#8d9aa2;border-color:#dfe5e8;box-shadow:none;cursor:not-allowed;}
.agree-hint{margin:8px 0 0;text-align:center;font-size:0.78rem;color:var(--gray);}
.agree-hint.hidden{display:none;}
/* check your email / forgot password / new password */
.auth-form h4{margin:4px 0 8px;font-size:1.1rem;}
.auth-form .btn-block + .btn-block{margin-top:8px;}
.auth-done{text-align:center;align-items:stretch;}
.auth-done p{font-size:0.9rem;line-height:1.55;color:var(--ink-soft);margin:0 0 16px;overflow-wrap:anywhere;}
.auth-done-icon{width:64px;height:64px;margin:6px auto 10px;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:var(--teal-wash);color:var(--teal-dark);}
#resendVerifyBtn{margin-bottom:8px;}
/* staff login code (2-step login) */
#codeForm h4{text-align:center;}
#codeForm .auth-hint{overflow-wrap:anywhere;}
.code-input{font-size:1.6rem;letter-spacing:0.45em;text-align:center;font-variant-numeric:tabular-nums;}
#codeResendBtn{margin-top:8px;}

/* Create room modal reuses form-card style bits */
.room-form-card form label{display:block;font-weight:700;font-size:0.85rem;margin:12px 0 6px;}
.room-form-card form input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);}
.room-form-card form .checkbox-row{display:flex;}
.room-form-card form .checkbox-row input{width:auto;}
.room-form-card form button[type="submit"]{margin-top:14px;}

/* ===== Footer: one slim line, shorter than the header, so the page keeps the room ===== */
.site-footer{background:var(--navy-deep);color:#bcd3db;padding:9px 24px;text-align:center;font-size:0.78rem;line-height:1.4;}
.footer-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;}
.footer-inner p{margin:0;}
.footer-logo{height:18px;width:auto;margin:0;filter:invert(1) brightness(2);}
.footer-copy{font-size:0.8rem;color:#b3c7cf;}
@media (max-width:600px){ .site-footer{padding:8px 14px 10px;} .footer-inner{gap:2px 10px;} }

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy-deep);color:#fff;padding:12px 22px;border-radius:999px;font-weight:600;font-size:0.9rem;
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:1000;box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .rooms-teaser-inner{grid-template-columns:1fr;}
  .active-room-shell{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .header-inner{flex-wrap:wrap;gap:10px;}
  .hero-copy h1{font-size:1.7rem;}
  #guestAuth{gap:6px;}
  .btn{padding:9px 16px;font-size:0.85rem;}
}

/* ===================================================== */
/* ===== APP SHELL: side-nav + content + chat columns === */
/* ===================================================== */
.app-shell{
  display:flex;align-items:stretch;
  max-width:1600px;margin:0 auto;
  min-height:calc(100vh - var(--header-h,54px));       /* --header-h: the header's real height (js/app.js) */
  background:var(--bg);
}

/* Side nav */
.side-nav{
  width:230px;flex-shrink:0;background:#fff;border-right:1px solid #eef2f3;
  padding:20px 12px;display:flex;flex-direction:column;justify-content:space-between;
  position:sticky;top:var(--header-h,54px);align-self:flex-start;height:calc(100vh - var(--header-h,54px));overflow-y:auto;
}
.side-nav nav{display:flex;flex-direction:column;gap:2px;}
.nav-group-label{
  font-family:var(--font-head);font-size:0.7rem;font-weight:800;letter-spacing:0.06em;
  color:#5f7177;text-transform:uppercase;margin:16px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;background:none;border:none;text-align:left;
  padding:10px 12px;border-radius:10px;cursor:pointer;font-family:var(--font-body);font-weight:700;
  font-size:0.9rem;color:var(--navy-deep);width:100%;
}
.nav-item:hover{background:#f0f6f7;}
.nav-item.active{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;}
.nav-ico{font-size:1.05rem;width:20px;text-align:center;}
.nav-lock{margin-left:auto;font-size:0.75rem;opacity:0.6;}
.nav-item.active .nav-lock{opacity:0.9;}
.admin-link{
  display:block;text-align:center;background:var(--navy-deep);color:#fff;border-radius:10px;
  padding:10px;font-family:var(--font-head);font-weight:700;font-size:0.85rem;text-decoration:none;margin-top:16px;
}
.admin-link:hover{background:var(--navy);}

/* Content area */
.content-area{flex:1;min-width:0;padding:28px 32px;}
.content-section{display:none;animation:fadein .25s ease;position:relative;}
.content-section.active{display:block;}
.section-sub-dark{color:var(--gray);margin-bottom:18px;}
.content-section .lock-overlay{border-radius:var(--radius);}

/* Home: persistent video/audience (left) + swappable Chat/Pray/Schedule/Notes (right) */
.live-shell{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;}
.live-left{flex:1 1 420px;min-width:0;max-width:720px;display:flex;flex-direction:column;gap:14px;}
.live-left .video-frame{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#000;position:relative;box-shadow:var(--shadow);}
.live-left .video-frame iframe{width:100%;height:100%;border:0;}

.next-service-card{
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;border-radius:12px;
  padding:10px 18px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.next-service-info{min-width:0;}
.next-service-label{font-family:var(--font-head);font-size:0.62rem;font-weight:800;letter-spacing:0.08em;color:#ffe6b3;}
.next-service-card h3{color:#fff;margin:1px 0;font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.next-service-time{color:#bcd3db;font-size:0.76rem;}
.countdown-compact{
  display:flex;align-items:baseline;gap:2px;background:rgba(255,255,255,0.1);border-radius:999px;
  padding:8px 14px;font-family:var(--font-head);font-weight:800;font-size:1rem;white-space:nowrap;flex-shrink:0;
}
.countdown-compact small{font-size:0.6rem;font-weight:600;color:#bcd3db;margin-right:6px;}
.countdown-compact small:last-child{margin-right:0;}

.audience-wrap{position:relative;}
.audience-block{background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow-sm);max-height:340px;overflow-y:auto;}
.audience-block h4{font-size:0.82rem;letter-spacing:0.05em;color:var(--gray);margin-bottom:12px;}
.audience-block ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.audience-block li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:0.9rem;}
.audience-block .mini-avatar{background:var(--teal);}
.audience-note{color:#64757a;font-size:0.82rem;font-weight:600;}

/* Live prayer overlay (host/admin view) covers the audience box until closed */
.live-prayer-overlay{
  position:absolute;inset:0;background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;z-index:10;
}
.live-prayer-overlay-header{
  display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;font-family:var(--font-head);font-size:0.9rem;
}
.overlay-close{background:rgba(255,255,255,0.2);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;}
.live-prayer-overlay .chat-messages{flex:1;margin:12px;}
.live-prayer-overlay .chat-input-row{margin:0 12px 12px;}

/* Host chat column (visible only for host/admin roles) */
.live-right-group{display:flex;gap:16px;flex-wrap:wrap;flex:1 1 auto;}
.host-chat-col{
  flex:1 1 260px;max-width:300px;background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);
  display:flex;flex-direction:column;height:calc(100vh - 130px);min-height:520px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.chat-col-header{padding:14px 16px;font-family:var(--font-head);font-weight:700;font-size:0.9rem;border-bottom:1px solid #eef2f3;}
.host-chat-col .chat-messages{flex:1;margin:12px;}
.host-chat-col .chat-input-row{margin:0 12px 12px;}
.host-notif-card{background:#fff6e6;border:1px solid #ffe1a8;border-radius:10px;padding:10px 12px;font-size:0.82rem;}
.host-notif-card .btn{margin-top:8px;padding:5px 12px;font-size:0.75rem;}
.host-notif-accepted{color:#1c7a4a;font-weight:700;font-size:0.78rem;margin-top:4px;}

/* Live right panel: Chat / Pray / Schedule / Notes, swapped via bottom tab bar */
.live-right{
  flex:1 1 320px;max-width:400px;background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);
  display:flex;flex-direction:column;height:calc(100vh - 130px);min-height:520px;
  position:sticky;top:96px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.live-panels{flex:1;min-height:0;position:relative;overflow-y:auto;padding:16px;}
.live-panel{display:none;height:100%;flex-direction:column;position:relative;}
.live-panel.active{display:flex;}
.live-panel-title{margin-bottom:14px;}
.live-panel .lock-overlay{border-radius:0;margin:-16px;height:calc(100% + 32px);width:calc(100% + 32px);}

.live-right-tabs{display:flex;border-top:1px solid #eef2f3;flex-shrink:0;}
.live-right-tabs button{
  flex:1;background:none;border:none;padding:10px 4px;font-family:var(--font-head);font-weight:700;
  font-size:0.68rem;color:#5f7177;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.live-right-tabs button.active{color:var(--teal-dark);}
.live-right-tabs .tab-ico{font-size:1.15rem;}

/* Chat (inside live-panel) */
.chat-box{display:flex;flex-direction:column;height:100%;}
.chat-box .chat-header{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);font-weight:700;margin-bottom:10px;flex-wrap:wrap;gap:8px;font-size:0.95rem;}
.chat-box .chat-messages{flex:1;overflow-y:auto;background:#f7fafb;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px;min-height:120px;}
.chat-box .chat-input-row{display:flex;gap:8px;margin-top:10px;}
.chat-box .chat-input-row input{flex:1;padding:9px 12px;border-radius:999px;border:1px solid #dde5e7;font-family:var(--font-body);font-size:0.88rem;min-width:0;}

.live-prayer-chat{margin-top:14px;border-top:1px dashed #dde5e7;padding-top:14px;}
.live-prayer-chat .chat-messages{max-height:200px;overflow-y:auto;background:#f7fafb;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.live-prayer-chat .chat-input-row{display:flex;gap:8px;}
.live-prayer-chat .chat-input-row input{flex:1;padding:9px 12px;border-radius:999px;border:1px solid #dde5e7;font-family:var(--font-body);font-size:0.85rem;}

/* Resources (classes / programs) */
.resources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;}
.resource-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease;
}
.resource-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.resource-card.is-open{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,182,0.15),var(--shadow);}
.resource-poster{aspect-ratio:4/5;background:#eef2f3;overflow:hidden;display:block;width:100%;border:none;padding:0;cursor:default;font:inherit;color:inherit;}
a.resource-poster,button.resource-poster{cursor:pointer;text-decoration:none;}
.resource-poster:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;}
.resource-body h4 a{color:inherit;text-decoration:none;}
.resource-body h4 a:hover{color:var(--teal-dark);}
.resource-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.res-btn{padding:9px 16px;font-size:0.84rem;text-decoration:none;}

/* App store badges */
.store-badge{
  display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border-radius:10px;padding:6px 14px 6px 10px;
  text-decoration:none;line-height:1.1;font-family:var(--font-head);font-weight:600;font-size:0.95rem;transition:background .15s ease;
}
.store-badge small{display:block;font-family:var(--font-body);font-weight:400;font-size:0.62rem;opacity:0.85;}
.store-badge:hover{background:#222;}
.store-badge:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}

/* Branded tiles (used when a resource has no poster) */
.resource-poster{container-type:inline-size;}
.res-tile{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(12px,7cqw,22px);text-align:left;}
.res-tile strong{font-family:var(--font-head);font-weight:800;font-size:clamp(0.8rem,6.5cqw,1.3rem);line-height:1.2;color:#fff;}
.res-tile-app{background:radial-gradient(circle at 30% 20%,#11c4d4 0%,var(--teal-dark) 45%,var(--navy-deep) 100%);align-items:flex-start;}
.res-phone{
  align-self:center;margin-top:6%;width:42%;aspect-ratio:9/17;border-radius:22px;background:#fff;border:6px solid #0d2333;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);display:flex;flex-direction:column;align-items:center;padding:16% 12% 0;gap:9%;
}
.res-phone img{width:58%;aspect-ratio:1;object-fit:contain;}
.res-phone span{display:block;width:100%;height:9%;border-radius:6px;background:#e3f4f5;}
.res-phone span:nth-of-type(2){background:#ffe2dc;width:80%;}
.res-phone span:nth-of-type(3){width:60%;}
.res-tile-journey{background:linear-gradient(160deg,#1b1f24,#2f343b);}
.res-tile-journey ol{list-style:none;margin:6% 0 0;padding:0;display:flex;flex-direction:column;gap:0;}
.res-tile-journey li{
  position:relative;display:flex;align-items:center;gap:clamp(8px,5cqw,14px);padding:clamp(5px,3.6cqw,11px) 0;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:clamp(0.85rem,8cqw,1.55rem);text-transform:lowercase;letter-spacing:0.01em;
}
.res-tile-journey li span{width:18px;height:18px;border-radius:50%;background:var(--step);box-shadow:0 0 0 5px rgba(255,255,255,0.08);flex-shrink:0;}
.res-tile-journey li:not(:last-child)::after{
  content:"";position:absolute;left:8px;top:calc(50% + 12px);height:calc(100% - 24px);width:2px;background:rgba(255,255,255,0.25);
}
.res-tile-growth{background:linear-gradient(140deg,var(--coral) 0%,#FFB443 100%);}
.res-growth-icons{display:flex;gap:12px;margin-top:6%;}
.res-growth-icons span{
  width:clamp(36px,20cqw,64px);height:clamp(36px,20cqw,64px);border-radius:28%;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;
  font-size:clamp(1rem,8cqw,1.7rem);color:var(--coral-dark);box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.res-growth-icons span:nth-child(2){transform:translateY(28%);}
.res-growth-icons span:nth-child(3){transform:translateY(56%);}

/* Discipleship Journey (expands below the Resources cards) */
.journey-panel{margin-top:26px;background:#fff;border:1px solid #e6eeef;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);scroll-margin-top:90px;}
.journey-panel.hidden{display:none;}
.journey-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;}
.journey-head h3{margin:2px 0 8px;font-size:1.4rem;}
.journey-head p{margin:0;max-width:700px;color:#4b5b60;line-height:1.6;}
.journey-eyebrow{font-family:var(--font-head);font-weight:700;font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--teal-dark);}
.journey-close{
  width:38px;height:38px;border-radius:50%;border:1px solid #e3eaeb;background:#fff;font-size:1.4rem;line-height:1;cursor:pointer;flex-shrink:0;color:var(--navy-deep);
}
.journey-close:hover{background:#f0f6f7;}
.journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:none;}
.journey-step{
  position:relative;background:#fbfcfc;border:1px solid #edf1f2;border-top:5px solid var(--step);border-radius:16px;padding:18px 18px 16px;
  display:flex;flex-direction:column;
}
/* the step's symbol, faded in the top right corner behind the text */
.journey-step.has-logo::before{
  content:"";position:absolute;top:12px;right:12px;width:96px;height:96px;background:var(--step-logo) no-repeat top right/contain;
  opacity:0.16;pointer-events:none;
}
.journey-step.has-logo > *{position:relative;}
.journey-step-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.journey-step-num{
  width:30px;height:30px;border-radius:50%;background:var(--step);color:#fff;font-family:var(--font-head);font-weight:800;font-size:0.9rem;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.journey-step-name{font-family:var(--font-head);font-weight:700;font-size:1.45rem;text-transform:lowercase;color:var(--navy-deep);}
.journey-step-tagline{font-family:var(--font-head);font-weight:600;color:var(--navy-deep);margin:0 0 8px;line-height:1.4;}
.journey-step-todo{font-size:0.88rem;color:#4b5b60;line-height:1.55;margin:0 0 14px;flex:1;}
.journey-step-todo strong{color:var(--navy-deep);}
.journey-step-actions{display:flex;flex-direction:column;gap:8px;}
.journey-action{
  display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:#fff;
  border:1px solid #e3eaeb;font-weight:700;font-size:0.84rem;color:var(--navy-deep);text-decoration:none;transition:border-color .15s ease,background .15s ease;
}
.journey-action span{color:var(--step);font-size:1rem;}
.journey-action:hover{border-color:var(--step);background:#f7fafa;}
.journey-action:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
@media (min-width:1100px){
  /* arrows between steps when they sit in one row */
  .journey-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}
  .journey-step:not(:last-child)::after{
    content:"";position:absolute;right:-14px;top:22px;width:10px;height:10px;border-top:3px solid #c9d5d7;border-right:3px solid #c9d5d7;transform:rotate(45deg);
  }
}
@media (max-width:600px){
  .journey-panel{padding:20px 16px;}
  .res-tile-journey li{font-size:1.3rem;}
}
.resource-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.resource-poster-placeholder{width:100%;height:100%;display:flex;align-items:flex-end;padding:18px;}
.resource-poster-placeholder span{color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.3rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,0.25);}
.resource-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.resource-body h4{margin:0;font-size:1rem;}
.resource-body p{margin:0;font-size:0.88rem;flex:1;}
.resource-cta{margin-top:8px;font-family:var(--font-head);font-weight:700;font-size:0.85rem;color:var(--coral-dark);}

/* Chat reactions: inline buttons + floating animation layer */
.chat-messages-wrap{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;}
.reaction-float-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:12px;}
.reaction-float{
  position:absolute;bottom:8px;font-size:1.8rem;line-height:1;
  animation:reactionFloat 2.2s ease-out forwards;will-change:transform,opacity;
}
@keyframes reactionFloat{
  0%{transform:translate(0,0) scale(0.6);opacity:0;}
  12%{transform:translate(0,-20px) scale(1.15);opacity:1;}
  100%{transform:translate(var(--drift,0px),-240px) scale(1);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .reaction-float{animation-duration:0.8s;}
}
.chat-box .chat-input-row{align-items:center;}
.reaction-btn{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid #eef2f3;background:#fff;
  font-size:1.05rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:transform .12s ease, background .12s ease;
}
.reaction-btn:hover{background:#f0f6f7;transform:scale(1.08);}
.reaction-btn:active{transform:scale(0.92);}

/* Moments shown inline inside the public chat */
.chat-messages .moment-live-card{align-self:stretch;max-width:100%;}
.moment-live-card-label{display:block;font-size:0.68rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:6px;}

/* Host/admin Moments control panel (replaces Audience card) */
.host-moments-panel{background:#fff;border:1px solid #eef2f3;border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow-sm);max-height:420px;overflow-y:auto;}
.host-moments-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.host-moments-header h4{font-size:0.82rem;letter-spacing:0.05em;color:var(--gray);margin:0;}
.host-moments-status{font-size:0.8rem;color:#64757a;margin:0 0 12px;}
.host-moments-list{display:flex;flex-direction:column;gap:10px;}
.host-moment-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #eef2f3;border-radius:10px;background:#fbfdfd;}
.host-moment-row .host-moment-text{font-size:0.86rem;font-weight:600;color:var(--navy-deep);min-width:0;}
.host-moment-row .host-moment-meta{display:block;font-size:0.72rem;color:#64757a;font-weight:600;margin-top:2px;}
.host-moment-type{display:inline-block;padding:2px 8px;border-radius:999px;font-size:0.66rem;font-weight:800;background:#eafcfb;color:var(--teal-dark);margin-right:6px;}
.host-moment-row .btn{padding:7px 14px;font-size:0.78rem;flex-shrink:0;}
.toggle-inline{display:flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:700;color:var(--gray);}
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#dde5e7;border-radius:999px;transition:.2s;}
.toggle-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--teal);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}
.toggle-switch input:disabled + .toggle-slider{opacity:0.5;cursor:not-allowed;}

/* Moments live feed */
.moments-panel-header{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);font-weight:700;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.moments-feed{display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1;}
.moments-empty{color:#64757a;font-size:0.88rem;text-align:center;padding:30px 10px;}
.moment-live-card{border-radius:14px;padding:14px 16px;font-size:0.9rem;box-shadow:var(--shadow-sm);}
.moment-live-card.type-response,.moment-live-card.type-connect,.moment-live-card.type-give,.moment-live-card.type-prayer{background:#fff;border:1px solid #eef2f3;}
.moment-live-card.type-salvation{background:linear-gradient(135deg,#efe9ff,#f7f2ff);border:1px solid #e2d6ff;}
.moment-live-card p{margin:0 0 10px;color:var(--navy-deep);font-weight:600;}
.moment-live-card .btn{font-size:0.82rem;padding:8px 16px;}
.moment-live-card-footer{display:flex;align-items:center;gap:10px;}
.moment-tally{font-size:0.76rem;font-weight:800;color:var(--teal-dark);background:#eafcfb;padding:3px 10px;border-radius:999px;}
.moment-responded{font-size:0.78rem;color:#1c7a4a;font-weight:700;}

/* Notes rich text editor */
.notes-toolbar{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap;}
.notes-toolbar button{
  background:#f0f6f7;border:none;border-radius:6px;padding:6px 10px;font-family:var(--font-body);font-size:0.8rem;
  cursor:pointer;color:var(--navy-deep);
}
.notes-toolbar button:hover{background:#e0f2f3;}
.notes-toolbar .notes-download{margin-left:auto;font-size:1rem;}
.notes-editor{
  flex:1;min-height:280px;border:1px solid #dde5e7;border-radius:12px;padding:14px;font-family:var(--font-body);
  font-size:0.9rem;line-height:1.6;overflow-y:auto;outline:none;
}
.notes-editor:empty::before{content:attr(data-i18n-placeholder);color:#aab7bb;}

.lock-login-btn{cursor:pointer;}

/* ===== 4Ws card at the top of the Notes pane (visible to everyone) ===== */
.fourws-card{
  background:linear-gradient(135deg,#f2fbfb,#fff);border:1px solid #dcefef;border-radius:14px;
  padding:14px 14px 12px;margin-bottom:14px;flex-shrink:0;
}
.fourws-eyebrow{display:block;font-family:var(--font-head);font-size:0.72rem;font-weight:700;color:var(--teal-dark);margin-bottom:4px;}
.fourws-title{font-size:1rem;line-height:1.3;margin:0 0 2px;}
.fourws-dates{display:block;font-size:0.76rem;color:#64757a;margin-bottom:10px;}
.fourws-btn{display:block;text-align:center;padding:9px 14px;font-size:0.82rem;margin-top:6px;text-decoration:none;}
.fourws-btn.disabled,.fourws-reader-dl.disabled{opacity:0.5;pointer-events:none;}
.notes-locked-area{position:relative;flex:1;display:flex;flex-direction:column;min-height:300px;}
.notes-locked-area .notes-editor{min-height:220px;}
.live-panel .notes-locked-area .lock-overlay{margin:0;width:auto;height:auto;inset:0;border-radius:12px;}
.notes-locked-area .lock-card{padding:16px;}
.notes-locked-area .lock-card h3{font-size:1rem;}

/* ===== 4Ws full-screen reader ===== */
body.fourws-open{overflow:hidden;}
.fourws-reader{position:fixed;inset:0;z-index:300;background:#f6f9f9;display:flex;flex-direction:column;}
.fourws-reader.hidden{display:none;}
.fourws-reader-bar{
  display:flex;align-items:center;gap:14px;padding:12px 24px;background:#fff;border-bottom:1px solid #e8eeef;flex-shrink:0;
}
.fourws-reader-logo{width:34px;height:34px;object-fit:contain;}
.fourws-reader-heading{flex:1;min-width:0;}
.fourws-reader-heading .fourws-eyebrow{margin:0;}
.fourws-reader-heading strong{display:block;font-family:var(--font-head);font-size:1rem;color:var(--navy-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fourws-reader-dl{padding:9px 18px;font-size:0.85rem;text-decoration:none;flex-shrink:0;}
.fourws-reader-close{
  width:40px;height:40px;border-radius:50%;border:1px solid #e3eaeb;background:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;color:var(--navy-deep);flex-shrink:0;
}
.fourws-reader-close:hover{background:#f0f6f7;}
.fourws-reader-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth;}
.fourws-reader-inner{max-width:1080px;margin:0 auto;padding:28px 24px 60px;}

.fw-meta{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:600;font-size:0.88rem;color:var(--navy-deep);margin-bottom:24px;}
.fw-week{background:#e3f4f4;color:var(--teal-dark);padding:4px 12px;border-radius:999px;font-size:0.8rem;}
.fw-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start;}
.fw-toc{position:sticky;top:0;display:flex;flex-direction:column;border-left:2px solid #e3eaeb;}
.fw-toc a{
  padding:10px 16px;margin-left:-2px;border-left:2px solid transparent;font-family:var(--font-head);font-weight:600;
  font-size:0.9rem;color:#4b5b60;text-decoration:none;
}
.fw-toc a:hover{color:var(--teal-dark);}
.fw-toc a.active{background:#e3f1f2;border-left-color:var(--teal-dark);color:var(--teal-dark);}
.fw-main{display:flex;flex-direction:column;gap:24px;max-width:680px;}
.fw-card{background:#fff;border-radius:22px;padding:30px 32px;box-shadow:0 10px 30px rgba(7,29,46,0.06);scroll-margin-top:20px;}
.fw-card h2{display:flex;align-items:center;gap:14px;font-size:1.5rem;margin:0 0 18px;}
.fw-num{
  width:32px;height:32px;border-radius:50%;background:#e3f1f2;color:var(--teal-dark);font-size:0.85rem;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fw-card p{color:#3d4b50;line-height:1.65;margin:0 0 12px;}
.fw-big-question{font-family:var(--font-head);font-weight:600;font-size:1.45rem;line-height:1.4 !important;color:var(--navy-deep) !important;}
.fw-hint{font-size:0.85rem;color:#7f8d91 !important;}
.fw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px;}
.fw-chip{padding:7px 13px;border-radius:999px;border:1px solid #e3eaeb;background:#f8fafa;font-size:0.86rem;color:#3d4b50;}
.fw-chip-bold{font-family:var(--font-head);font-weight:700;border:none;background:#eef2f3;}
.fw-passage{
  margin:0 0 22px;padding:16px 18px;background:#f0f8f8;border-left:3px solid #bfdfe0;border-radius:4px;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;line-height:1.6;color:var(--navy-deep);
}
.fw-passage-ref{display:block;font-size:0.8rem;font-weight:700;color:var(--teal-dark);text-transform:uppercase;letter-spacing:0.02em;margin-bottom:6px;}
.fw-label{font-size:0.9rem;color:#4b5b60;margin:18px 0 10px;}
.fw-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.fw-points li{display:flex;gap:14px;align-items:flex-start;}
.fw-point-num{font-family:var(--font-head);font-weight:700;color:#5bb5b9;min-width:20px;}
.fw-points strong{display:block;font-family:var(--font-head);text-transform:uppercase;font-size:0.92rem;color:var(--navy-deep);}
.fw-points small{display:block;color:#7f8d91;font-size:0.8rem;margin-top:2px;}
.fw-questions{list-style:none;padding:0;margin:0;}
.fw-questions li{padding:11px 0 11px 22px;border-bottom:1px solid #edf1f2;position:relative;color:#3d4b50;}
.fw-questions li:last-child{border-bottom:none;}
.fw-questions li::before{content:"?";position:absolute;left:2px;color:#5bb5b9;font-weight:700;}
.fw-iwill{
  background:#f3f7f7;border:1px dashed #d5e3e4;border-radius:12px;padding:18px;margin:4px 0 8px;
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--navy-deep);
}
.fw-pcs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.fw-pcs-card{background:#f5f8f8;border-radius:16px;padding:18px;}
.fw-pcs-card strong{display:block;font-family:var(--font-head);color:var(--teal-dark);margin-bottom:8px;}
.fw-pcs-card p{font-size:0.9rem;margin:0;}
.fw-accordion{background:#f5f8f8;border-radius:12px;margin-bottom:10px;}
.fw-accordion summary{
  padding:14px 16px;font-family:var(--font-head);font-weight:700;color:var(--navy-deep);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.fw-accordion summary::-webkit-details-marker{display:none;}
.fw-accordion summary::after{content:"\2304";color:#7f8d91;font-size:1rem;transition:transform .15s ease;}
.fw-accordion[open] summary::after{transform:rotate(180deg);}
.fw-accordion ul{margin:0;padding:0 16px 14px 34px;color:#3d4b50;font-size:0.92rem;line-height:1.6;}
.fw-memory{background:#00767f;color:#fff;border-radius:14px;}
.fw-memory h2{color:#fff;margin-bottom:12px;}
.fw-memory p{color:#e6f6f6 !important;font-size:1.02rem;}
.fw-memory-label{display:block;font-family:var(--font-head);font-weight:700;font-size:0.85rem;color:#b8e2e4;margin-bottom:10px;}
.fw-footer-links{display:flex;gap:12px;flex-wrap:wrap;}
.fw-pill{
  padding:10px 18px;border-radius:999px;border:1px solid #dfe7e8;background:#fff;font-family:var(--font-head);
  font-weight:600;font-size:0.88rem;color:#3d4b50;text-decoration:none;cursor:pointer;
}
.fw-pill:hover{border-color:var(--teal);color:var(--teal-dark);}

@media (max-width:860px){
  .fw-layout{grid-template-columns:minmax(0,1fr);gap:16px;}
  .fw-toc{min-width:0;}
  .fw-toc{
    position:sticky;top:0;z-index:2;flex-direction:row;overflow-x:auto;border-left:none;background:#f6f9f9;
    padding:6px 0;gap:6px;scrollbar-width:none;
  }
  .fw-toc a{border-left:none;margin:0;border-radius:999px;white-space:nowrap;padding:8px 14px;background:#fff;}
  .fw-toc a.active{background:var(--teal-dark);color:#fff;}
  .fw-card{padding:22px 20px;border-radius:18px;}
  .fw-big-question{font-size:1.2rem;}
  .fourws-reader-bar{padding:10px 16px;gap:10px;}
  .fourws-reader-inner{padding:18px 16px 48px;}
}
@media (max-width:520px){
  .fourws-reader-dl{display:none;}
}

@media (max-width:700px){
  .app-shell{flex-direction:column;min-height:0;}
  .side-nav{
    position:relative;top:0;width:100%;height:auto;flex-direction:row;overflow-x:auto;
    padding:10px 14px;gap:8px;
  }
  .side-nav nav{flex-direction:row;overflow-x:auto;gap:6px;}
  .nav-group-label{display:none;}
  .nav-item{white-space:nowrap;flex-shrink:0;width:auto;}   /* full width here showed only "Home" on tablets */
  .side-nav nav{scrollbar-width:thin;}
  .admin-link{flex-shrink:0;margin:0 0 0 8px;padding:10px 16px;}
  .live-left{max-width:100%;}
  .live-right-group{width:100%;}
  .live-right, .host-chat-col{position:relative;top:0;max-width:100%;width:100%;height:480px;min-height:0;}
}
@media (max-width:640px){
  .next-service-card{flex-direction:column;align-items:flex-start;}
  .countdown-compact{align-self:stretch;justify-content:center;}
  .next-service-card h3{white-space:normal;}
}

/* Large / ultra-wide screens (e.g. 2560x1600): use the extra space instead of centering with dead margins */
@media (min-width:1700px){
  .app-shell{max-width:2360px;}
  .side-nav{width:260px;}
  .live-left{max-width:1100px;flex:1 1 700px;}
  .live-right{max-width:520px;flex:1 1 460px;}
  .host-chat-col{max-width:420px;flex:1 1 360px;}
  .content-area{padding:32px 48px;}
  .about-grid,.connect-grid{gap:32px;}
  .moments-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
  .rooms-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}
@media (min-width:2200px){
  .app-shell{max-width:2560px;}
  .live-left{max-width:1300px;}
  .live-right{max-width:580px;}
  .host-chat-col{max-width:460px;}
}

/* =====================================================================
   CENTRIS THEME — matches the look and feel of ccfcentris.org.ph
   (kept as one layer so it is easy to adjust or remove)
   ===================================================================== */
body{
  background-color:var(--bg);
  background-image:radial-gradient(rgba(13,43,58,0.086) 1px, transparent 1.2px);
  background-size:22px 22px;
  color:var(--navy-deep);
  font-feature-settings:"ss01" on;
}
.app-shell{background:transparent;}
h1,h2,h3{font-weight:800;letter-spacing:-0.02em;}
h4{font-weight:700;letter-spacing:-0.01em;}
p{color:var(--gray);}
a{color:var(--teal-dark);}

/* Buttons: solid clay teal, 8px corners, crisp small shadow */
.btn{border-radius:8px;font-weight:600;font-size:0.92rem;padding:10px 20px;letter-spacing:0;}
.btn-lg{padding:12px 26px;font-size:1rem;}
.btn-primary{background:var(--teal-dark);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);}
.btn-primary:hover{background:var(--teal-deeper);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px -1px rgba(0,0,0,0.12);}
.btn-outline{background:#fff;color:var(--navy-deep);border:1px solid var(--hairline);}
.btn-outline:hover{background:var(--mist);color:var(--navy-deep);}
.btn-ghost:hover{background:var(--mist);}
.btn:focus-visible,.nav-item:focus-visible,a:focus-visible{outline:2px solid var(--teal-dark);outline-offset:2px;}

/* Header: white bar with a hairline */
.site-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--hairline);}
.lang-btn{background:#fff;border:1px solid var(--hairline);border-radius:8px;font-weight:600;}
.lang-btn:hover{background:var(--mist);}
.lang-menu{border-radius:12px;box-shadow:var(--shadow);}
.beta-tag{background:var(--teal-wash);color:var(--teal-dark);}
.user-avatar{background:var(--teal-dark);}

/* Side nav: light, with a soft teal "you are here" state */
.side-nav{background:#fff;border-right:1px solid var(--hairline);}
.nav-group-label{color:#7f97a3;font-weight:700;}
.nav-item{font-weight:600;font-size:0.92rem;border-radius:8px;}
.nav-item:hover{background:var(--mist);}
.nav-item.active{background:var(--teal-wash);color:var(--teal-dark);}
.admin-link{background:var(--navy-deep);border-radius:8px;font-weight:600;}

/* Cards: white, 16px corners, hairline ring + soft shadow */
.connect-card,.room-card,.audience-block,.host-moments-panel,.live-right,.host-chat-col,
.resource-card,.active-room-side,.mini-room-card,.journey-panel,.embed-frame{
  background:#fff;border:0;box-shadow:var(--shadow);border-radius:var(--radius);
}
.resource-card:hover{box-shadow:0 0 0 1px var(--hairline),0 4px 8px rgba(13,43,58,0.04),0 16px 32px -12px rgba(13,43,58,0.16);}
.modal-card{border-radius:var(--radius);box-shadow:var(--shadow);}
.modal-overlay{background:rgba(11,37,50,0.55);}

/* Dark panels use Centris "night" with a light-teal label */
.next-service-card{background:var(--navy);border-radius:var(--radius);box-shadow:none;}
.next-service-label{color:var(--teal-light);font-weight:700;letter-spacing:0.06em;}
.next-service-time{color:#a9c1cc;}
.countdown-compact{background:rgba(255,255,255,0.08);border-radius:8px;}
.about-card{background:var(--navy);}
.about-card h4{color:var(--teal-light);}
.eyebrow{color:var(--teal-light);}
.site-footer{background:var(--navy);}

/* Tabs, pills, small labels */
.tab-btn.active{border-bottom-color:var(--teal-dark);}
.subtab-btn{background:var(--paper-deep);color:var(--ink-soft);font-weight:600;}
.subtab-btn.active{background:var(--teal-dark);color:#fff;}
.auth-tabbar{background:var(--paper-deep);border-radius:10px;}
.auth-tab{border-radius:8px;}
.auth-tab.active{background:#fff;color:var(--teal-dark);box-shadow:0 1px 3px rgba(13,43,58,0.12);}
.auth-hint,.admin-login-note{background:var(--teal-wash);color:var(--teal-dark);}
.live-right-tabs button{font-weight:600;color:#8aa0aa;}
.live-right-tabs button.active{color:var(--teal-dark);}

/* Inputs */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],input[type="number"],
input[type="datetime-local"],input[type="date"],input[type="time"],select,textarea{border-color:var(--hairline);border-radius:8px;}
input:focus,select:focus,textarea:focus,.notes-editor:focus{outline:none;border-color:var(--teal-dark);box-shadow:0 0 0 3px rgba(0,122,135,0.15);}

/* Chat / schedule / overlays */
.chat-msg.me{background:var(--teal-dark);}
.chat-msg.other{border-color:var(--hairline);}
.chat-messages,.chat-box .chat-messages,.live-prayer-chat .chat-messages{background:var(--mist);}
.schedule-date{background:var(--teal-dark);border-radius:8px;}
.schedule-item{background:var(--mist);}
.live-prayer-overlay-header{background:var(--teal-dark);}
.live-prayer-card,.form-card{background:var(--mist);}
.host-notif-card{background:#f8ecf0;border-color:#efd3dd;}
.audience-block .mini-avatar{background:var(--teal-dark);}
.mini-avatar{background:var(--purple);}

/* Prayer Wall: calm paper board instead of cork */
.prayer-wall{background:var(--paper-deep);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:none;}
.sticky-note{border-radius:10px;box-shadow:0 1px 2px rgba(13,43,58,0.06),0 6px 14px -8px rgba(13,43,58,0.18);}

/* Give scripture */
.give-scripture{border-left-color:var(--teal-dark);background:var(--teal-wash);}

/* Toast */
.toast{background:var(--navy-deep);border-radius:10px;}

/* Notes pane 4Ws card */
.fourws-card{background:#fff;border:1px solid var(--hairline);}

/* Resources tiles in the Centris palette */
.res-tile-app{background:radial-gradient(circle at 30% 20%,#3ec6d0 0%,#007a87 45%,#0b2532 100%);}
.res-tile-journey{background:var(--navy);}
.res-tile-growth{background:var(--paper-deep);}
.res-tile-growth strong{color:var(--navy-deep);}
.res-growth-icons span{background:#fff;color:var(--teal-dark);box-shadow:0 0 0 1px var(--hairline),0 8px 20px -8px rgba(13,43,58,0.2);}
.journey-step{background:#fff;border-color:var(--hairline);}
.journey-action{border-color:var(--hairline);border-radius:8px;}

/* 4Ws reader */
.fourws-reader{background:var(--bg);}
.fourws-reader-bar{border-bottom-color:var(--hairline);}
.fw-card{border-radius:var(--radius);box-shadow:var(--shadow);}
.fw-memory{background:var(--teal-dark);}
.fw-toc a.active{background:var(--teal-wash);}
.header-inner{max-width:1600px;padding:6px 24px;}     /* slim: the logo, buttons and text keep their size */
.brand-logo{height:40px;}

/* =====================================================================
   HOME LAYOUTS BY ROLE
   Members & guests: big video + one chat panel on the right.
   Hosts & admins (body.role-elevated): smaller video + Audience |
   Host Chat | Public Chat, as three equal columns.
   ===================================================================== */
.live-shell{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,26vw,460px);gap:20px;align-items:start;}
.live-left{max-width:none;flex:none;}
.live-right-group{display:contents;}
.live-right,.host-chat-col{max-width:none;flex:none;width:auto;min-width:0;height:calc(100vh - var(--header-h,54px) - 61px);min-height:520px;position:sticky;top:calc(var(--header-h,54px) + 21px);}
body:not(.role-elevated) .audience-wrap{display:none;}

.viewer-count{
  position:absolute;top:12px;right:12px;z-index:5;background:rgba(0,0,0,0.55);color:#fff;font-weight:700;font-size:0.78rem;
  padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:5px;pointer-events:none;
}
body.role-elevated .viewer-count{display:none;}

body.role-elevated .live-shell{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
body.role-elevated .live-left{height:calc(100vh - var(--header-h,54px) - 61px);min-height:520px;position:sticky;top:calc(var(--header-h,54px) + 21px);}
body.role-elevated .audience-wrap{flex:1;min-height:0;display:flex;flex-direction:column;}
body.role-elevated .audience-block,
body.role-elevated .host-moments-panel{flex:1;min-height:0;max-height:none;}

/* portrait tablets: hosts get the video on top, then the two chats side by side (wider screens keep three columns) */
@media (max-width:900px){
  body.role-elevated .live-shell{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.role-elevated .live-left{grid-column:1 / -1;height:auto;min-height:0;position:static;}
  body.role-elevated .live-left .video-frame{max-width:700px;width:100%;}
  body.role-elevated .audience-block,body.role-elevated .host-moments-panel{max-height:320px;}
}
/* Tablets and phones: everything stacks */
@media (max-width:700px){
  .live-shell,body.role-elevated .live-shell{grid-template-columns:minmax(0,1fr);}
  .live-right,.host-chat-col{position:relative;top:0;height:520px;min-height:0;}
}
@media (min-width:1700px){ .header-inner{max-width:2360px;} }
@media (min-width:2200px){ .header-inner{max-width:2560px;} }

/* Team message forms (feedback + Talk to Someone) */
.form-error{background:#fbeaea;color:#a12d2d;padding:10px 14px;border-radius:8px;margin-top:14px;font-size:0.88rem;}
.talk-form label{display:block;font-weight:700;font-size:0.85rem;margin:12px 0 6px;}
.talk-form input,.talk-form textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--hairline);font-family:var(--font-body);font-size:0.92rem;}
.talk-form .btn{margin-top:18px;}
button.journey-action{width:100%;cursor:pointer;font-family:var(--font-body);text-align:left;}

/* 4Ws reader header + breadcrumb (same layout as ccfcentris.org.ph) */
.fw-hero{
  margin:-28px -24px 28px;padding:44px 24px 40px;
  background:
    radial-gradient(circle at 92% 8%, rgba(62,198,208,0.30), transparent 34%),
    radial-gradient(circle at 70% 100%, rgba(125,18,53,0.08), transparent 32%),
    #fff;
  border-bottom:1px solid var(--hairline);
}
.fw-hero-eyebrow{display:block;font-weight:600;font-size:0.9rem;color:var(--teal-dark);margin-bottom:8px;}
.fw-hero h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-0.022em;margin:0 0 12px;max-width:780px;}
.fw-hero p{margin:0 0 22px;color:var(--gray);}
.fw-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:0.88rem;color:var(--gray);margin-bottom:18px;}
.fw-crumbs a,.fw-crumbs button{color:var(--gray);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;}
.fw-crumbs a:hover,.fw-crumbs button:hover{color:var(--teal-dark);}
.fw-crumbs strong{color:var(--navy-deep);font-weight:600;}
@media (max-width:860px){ .fw-hero{margin:-18px -16px 22px;padding:32px 16px 28px;} }
/* the header band spans the reader; its content lines up with the guide column below */
.fw-hero{margin:0;padding:48px 0 44px;}
.fw-hero-inner{max-width:1080px;margin:0 auto;padding:0 24px;}
@media (max-width:860px){ .fw-hero{margin:0;padding:32px 0 28px;} .fw-hero-inner{padding:0 16px;} }/* Talk to Someone pop-up: same boxed form as "Got Questions, Feedback & Suggestions?" */
.modal-card .talk-form.form-card{max-width:none;margin-top:14px;padding:26px 22px 22px;}
.talk-form.form-card input,.talk-form.form-card textarea{background:#fff;}
.talk-form.form-card .btn{margin-top:10px;}
.modal-card{overflow-x:hidden;}

/* Player: filler image + offline message (Setup → Offline Content) */
.offline-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.offline-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
  background:radial-gradient(circle at 80% 15%, rgba(62,198,208,0.28), transparent 40%), var(--navy);color:#fff;
}
.offline-placeholder strong{font-family:var(--font-head);font-size:1.25rem;font-weight:800;}
.offline-placeholder span{color:#a9c1cc;font-size:0.92rem;}
.offline-placeholder-logo{width:54px;height:54px;object-fit:contain;filter:brightness(0) invert(1);opacity:0.9;margin-bottom:4px;}

/* Chat name tags: ★★ Owner, ★ Admin, "Host" */
.msg-author{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.role-stars{color:#e0a800;font-size:0.72rem;letter-spacing:0.5px;line-height:1;}
.chat-msg.me .role-stars{color:#ffd54d;}
.role-host-tag{display:inline-block;font-size:0.6rem;font-weight:800;line-height:1;padding:2px 5px;border-radius:4px;background:var(--teal-wash);color:var(--teal-dark);text-transform:none;letter-spacing:0;}
.chat-msg.me .role-host-tag{background:rgba(255,255,255,0.22);color:#fff;}

/* Schedule panel (from Admin → Services) */
.schedule-next{display:flex;flex-direction:column;gap:3px;background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;margin-bottom:14px;}
.schedule-next-label{display:flex;align-items:center;gap:6px;font-size:0.68rem;font-weight:800;letter-spacing:0.07em;color:var(--teal-light);text-transform:uppercase;}
.schedule-next strong{font-family:var(--font-head);font-size:1rem;font-weight:800;}
.schedule-next span{color:#c3d5dd;font-size:0.82rem;}
.schedule-next .schedule-next-until{margin-top:4px;align-self:flex-start;background:rgba(255,255,255,0.1);color:#fff;font-weight:700;font-size:0.78rem;padding:3px 10px;border-radius:999px;}
.schedule-next.is-live{background:linear-gradient(135deg,#0b2532,#00515a);}
.schedule-next.is-live .schedule-next-label{color:#ff8a8a;}
.schedule-subhead{font-size:0.72rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--gray);margin:4px 0 10px;}
.schedule-list .schedule-item{padding:12px 14px;gap:12px;}
.schedule-item.is-live{box-shadow:inset 3px 0 0 #e5484d;}
.schedule-info{min-width:0;}
.schedule-info h4{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:0.92rem;}
.schedule-tag{font-size:0.62rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--teal-wash);color:var(--teal-dark);}
.schedule-tag.live{background:#fde8e8;color:#c62828;}
.schedule-empty,.schedule-more,.schedule-tz{font-size:0.8rem;color:var(--gray);margin:10px 2px 0;}
.schedule-tz{font-size:0.72rem;color:#64757a;}

/* Main-page Moments panel */
.moments-auto-state{font-size:0.76rem;font-weight:800;color:var(--teal-dark);min-width:22px;text-align:right;}
.host-moment-row.is-posted{background:#f3f8f8;}
.host-moment-row.is-posted .host-moment-meta{color:#1c7a4a;font-weight:700;}
.active-room-bar .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,0.35);}
.active-room-bar .btn-ghost:hover{background:rgba(255,255,255,0.12);color:#fff;}

/* ===== Open Digital Room: fills the Digital Rooms area ===== */
.content-section.in-room .rooms-header,
.content-section.in-room .rooms-group{display:none;}
.in-room .active-room-shell{
  grid-template-columns:minmax(0,1fr) clamp(320px,26vw,400px);gap:16px;
  height:calc(100vh - var(--header-h,54px) - 61px);min-height:540px;
}
.in-room .active-room-video{min-height:0;}
.in-room .room-video-wrap{flex:1;min-height:0;}
.in-room #roomVideoFrame{height:100%;}
.active-room-side{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0;}
.room-side-tabs{display:flex;border-bottom:1px solid var(--hairline);flex-shrink:0;}
.room-side-tabs button{
  flex:1;background:none;border:0;padding:12px 8px;font-family:var(--font-head);font-weight:700;font-size:0.86rem;color:var(--gray);
  cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;
}
.room-side-tabs button.active{color:var(--teal-dark);border-bottom-color:var(--teal-dark);}
.room-side-panel{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;}
.room-side-panel.hidden{display:none;}
.room-side-panel h4{font-size:0.88rem;margin:4px 0 10px;}
.room-notes-view{display:flex;flex-direction:column;flex:1;min-height:0;}
.room-notes-view .notes-editor{flex:1;min-height:200px;}
.room-4ws-view{display:flex;flex-direction:column;flex:1;min-height:0;margin:-14px -16px;}
.room-4ws-view.hidden{display:none;}
.room-4ws-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hairline);background:#fff;flex-shrink:0;}
.room-4ws-back{background:none;border:0;font-family:var(--font-head);font-weight:700;font-size:0.86rem;color:var(--teal-dark);cursor:pointer;padding:4px 0;}
.room-4ws-pdf{font-size:0.8rem;font-weight:700;color:var(--teal-dark);text-decoration:none;border:1px solid var(--hairline);border-radius:999px;padding:4px 10px;}
.room-4ws-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px;background:var(--bg);}

/* compact 4Ws (inside the room's Notes tab) */
.fw-compact{display:flex;flex-direction:column;gap:12px;}
.fw-compact-head{padding:2px 2px 4px;}
.fw-compact-head h3{font-size:1.05rem;margin:2px 0 4px;}
.fw-compact-head p{font-size:0.82rem;margin:4px 0 0;}
.fw-compact .fw-card{padding:16px;border-radius:12px;}
.fw-compact .fw-card h2{font-size:1.02rem;gap:8px;margin-bottom:10px;}
.fw-compact .fw-num{width:24px;height:24px;font-size:0.72rem;}
.fw-compact .fw-big-question{font-size:0.98rem;}
.fw-compact .fw-card p{font-size:0.86rem;}
.fw-compact .fw-passage{font-size:0.86rem;padding:12px;}
.fw-compact .fw-chip{font-size:0.76rem;padding:5px 10px;}
.fw-compact .fw-points strong{font-size:0.82rem;}
.fw-compact .fw-questions li{font-size:0.84rem;padding:8px 0 8px 18px;}
.fw-compact .fw-iwill{font-size:0.92rem;padding:12px;}
.fw-compact .fw-pcs-grid{grid-template-columns:1fr;}
.fw-compact .fw-accordion summary{padding:10px 12px;font-size:0.86rem;}
.fw-compact .fw-accordion ul{font-size:0.82rem;}
.fw-compact .fw-memory h2{font-size:1rem;}
.fw-compact .fw-footer-links{flex-direction:column;}
.fw-compact .fw-pill{text-align:center;font-size:0.82rem;}

@media (max-width:1100px){
  .in-room .active-room-shell{grid-template-columns:minmax(0,1fr);height:auto;min-height:0;}
  .in-room .room-video-wrap{flex:none;}
  .in-room #roomVideoFrame{height:62vh;min-height:360px;}
  .active-room-side{max-height:80vh;}
}

/* ===== Icons: Phosphor (duotone + fill), replacing emoji ===== */
.nav-ico{font-size:1.25rem;width:22px;display:inline-flex;justify-content:center;color:var(--teal-dark);flex-shrink:0;}
.nav-lock{margin-left:auto;font-size:1rem;color:#9aabb1;opacity:1;}
.nav-item.active .nav-lock{color:var(--teal-dark);}
.tab-ico{font-size:1.4rem;line-height:1;}
.lock-icon{display:flex;justify-content:center;margin-bottom:12px;}
.lock-icon i{font-size:2rem;color:var(--teal-dark);background:var(--teal-wash);border-radius:50%;padding:14px;}
.connect-icon{width:52px;height:52px;border-radius:14px;background:var(--teal-wash);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:12px;}
.reaction-btn i{font-size:1.15rem;line-height:1;}
.reaction-btn .ph-heart{color:#e5484d;}
.reaction-btn .ph-hands-clapping{color:#d4930a;}
.reaction-btn .ph-hand-palm{color:var(--teal-dark);}
.viewer-count i{font-size:0.95rem;}
.notes-download i{font-size:1.1rem;vertical-align:-2px;}
.role-stars{display:inline-flex;align-items:center;gap:1px;color:#e0a800;font-size:0.72rem;letter-spacing:0;}
.chat-msg.me .role-stars{color:#ffd54d;}
.moment-live-card-label i{font-size:0.95rem;vertical-align:-2px;}
.moment-responded i,.host-notif-accepted i{font-size:1rem;vertical-align:-3px;}
.host-notif-card .ph-bell-ringing{color:#c27c00;font-size:1.05rem;vertical-align:-3px;}
.note-reply i{color:var(--teal-dark);vertical-align:-2px;}
.room-side-tabs i{font-size:1.1rem;vertical-align:-3px;}
body.logged-in .nav-lock{display:none;}

/* =====================================================================
   PHONES (760px and narrower) - clean, full-width, app-like
   - one-row header with a menu button; the sidebar slides in as a menu
   - Home: video edge to edge, tabs right under it, chat fills the screen
   ===================================================================== */
.menu-btn,.side-nav-head,.side-nav-backdrop{display:none;}
@media (max-width:700px){
  .header-inner{padding:8px 10px 8px 14px;flex-wrap:nowrap;gap:8px;}
  .brand-logo{height:28px;}
  .header-actions{gap:6px;}
  .lang-btn{padding:7px 8px;}
  #langBtnLabel,.lang-btn svg:last-child{display:none;}
  #guestAuth{gap:4px;}
  #guestAuth .btn,#userAuth .btn{padding:8px 11px;font-size:0.82rem;}
  #userName{display:none;}
  .user-auth{gap:4px;}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:8px;
    background:none;color:var(--navy);font-size:1.65rem;cursor:pointer;flex-shrink:0;
  }
  /* menu (☰) and close (✕) buttons: plain lines, no gray box behind them —
     the duotone icon's faint filled square is hidden, the hover gray only shows with a real mouse
     (on phones it stayed stuck after a tap), and Android's tap flash is off */
  .menu-btn,.side-nav-close{-webkit-tap-highlight-color:transparent;}
  .menu-btn .ph-duotone::before,.side-nav-close .ph-duotone::before{opacity:0;}
  @media (hover:hover){ .menu-btn:hover{background:var(--mist);} }

  /* sidebar -> slide-in menu */
  .app-shell{display:block;min-height:0;}
  .side-nav{
    position:fixed;top:0;left:0;bottom:0;z-index:120;width:min(84vw,300px);height:100%;
    flex-direction:column;justify-content:flex-start;gap:0;overflow-y:auto;padding:12px 12px 20px;
    border-right:0;transform:translateX(-105%);transition:transform .25s ease;visibility:hidden;
  }
  body.nav-open .side-nav{transform:none;visibility:visible;box-shadow:0 0 40px rgba(11,37,50,0.25);}
  .side-nav nav{flex-direction:column;overflow:visible;gap:2px;}
  .nav-group-label{display:block;}
  .nav-item{white-space:normal;padding-top:12px;padding-bottom:12px;}
  .admin-link{margin:auto 0 0;padding:12px 16px;}
  .side-nav-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 14px;}
  .side-nav-logo{height:28px;}
  .side-nav-close{width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--navy);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  @media (hover:hover){ .side-nav-close:hover{background:var(--mist);} }
  .side-nav-backdrop{display:block;position:fixed;inset:0;z-index:110;background:rgba(11,37,50,0.45);opacity:0;pointer-events:none;transition:opacity .25s ease;}
  body.nav-open .side-nav-backdrop{opacity:1;pointer-events:auto;}
  body.nav-open{overflow:hidden;}

  /* every page: comfortable 16px side margins */
  .content-area{padding:18px 16px 28px;}

  /* Home: edge to edge */
  [data-section-panel="home"]{margin:-18px -16px -28px;}
  .live-shell,body.role-elevated .live-shell{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .live-left,body.role-elevated .live-left{gap:0;position:static;height:auto;}
  .live-left .video-frame,body.role-elevated .live-left .video-frame{border-radius:0;box-shadow:none;max-width:none;}
  .next-service-card{border-radius:0;padding:8px 16px;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0;max-width:100%;box-sizing:border-box;}
  /* a long service title shrinks to "…" instead of widening the whole page */
  .live-left{min-width:0;max-width:100%;width:100%;}
  .next-service-info{min-width:0;}
  .next-service-card h3{font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .next-service-label{font-size:0.66rem;}
  .next-service-time{font-size:0.75rem;}
  .countdown-compact{align-self:auto;flex-shrink:0;padding:6px 10px;}
  .live-right-group{display:flex;flex-direction:column;}
  .live-right,.host-chat-col{border-radius:0;border:0;border-bottom:1px solid var(--hairline);box-shadow:none;position:relative;top:0;width:100%;}
  .live-right-tabs{order:-1;border-top:0;border-bottom:1px solid var(--hairline);overflow-x:auto;scrollbar-width:none;background:#fff;}
  .live-right-tabs button{flex-direction:row;justify-content:center;gap:6px;font-size:0.86rem;padding:12px 10px 10px;border-bottom:2px solid transparent;white-space:nowrap;}
  .live-right-tabs button.active{border-bottom-color:var(--teal-dark);}
  .live-right-tabs .tab-ico{font-size:1.15rem;}
  .live-panels{padding:12px 14px;}
  .chat-box .chat-messages{border-radius:10px;}
  .chat-box .chat-input-row{gap:6px;}
  .chat-box .chat-input-row input{min-width:0;padding:10px 12px;}
  .chat-box .chat-input-row .btn{padding:9px 14px;}
  .reaction-btn{flex-shrink:0;}
  .audience-block,.host-moments-panel{border-radius:0;border-left:0;border-right:0;box-shadow:none;}

  /* members: an app-like screen - video, tabs, and the chat filling down to the bottom */
  body:not(.role-elevated) [data-section-panel="home"].active{display:flex;flex-direction:column;height:calc(100dvh - var(--header-h,57px));}
  body:not(.role-elevated) .live-shell{flex:1;min-height:0;}
  body:not(.role-elevated) .live-left{flex:none;}
  body:not(.role-elevated) .live-right-group{flex:1;min-height:0;}
  body:not(.role-elevated) .live-right{flex:1;min-height:0;height:auto;border-bottom:0;}
  /* hosts, admins and owners: everything stacked, each chat a good height */
  body.role-elevated .live-right,body.role-elevated .host-chat-col{height:72dvh;min-height:420px;}
  body.role-elevated .audience-block,body.role-elevated .host-moments-panel{max-height:340px;}
  /* order on phones: video, next service, public chat, Host Chat, then Audience / Moments */
  body.role-elevated .live-left{display:contents;}
  body.role-elevated .live-left .video-frame{order:1;}
  body.role-elevated .next-service-card{order:2;}
  body.role-elevated .live-right-group{order:3;}
  body.role-elevated .live-right{order:1;}
  body.role-elevated .host-chat-col{order:2;}
  body.role-elevated .audience-wrap{order:4;}

  /* pop-ups use the whole width */
  .modal-card{width:calc(100% - 24px);max-width:none;padding:22px 18px;}
  .toast{max-width:calc(100% - 32px);text-align:center;}
}

/* About: legal links (Terms and Conditions | Privacy Policy) */
.about-legal{margin-top:32px;padding-top:18px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 24px;font-size:0.8rem;color:var(--gray);}
.about-legal nav{display:flex;align-items:center;gap:10px;}
.about-legal a{color:var(--gray);text-decoration:none;font-weight:600;}
.about-legal a:hover,.about-legal a:focus-visible{color:var(--teal-dark);text-decoration:underline;}

/* ===== Language menu (searchable) + translated chat ===== */
.lang-menu{width:280px;padding:8px;}
.lang-search{display:flex;align-items:center;gap:8px;border:1px solid var(--hairline);border-radius:8px;padding:0 10px;margin-bottom:6px;}
.lang-search i{color:var(--gray);font-size:1.05rem;}
.lang-search input{flex:1;min-width:0;border:0 !important;outline:none;box-shadow:none !important;padding:9px 0 !important;font-size:0.9rem;background:transparent;}
.lang-list{max-height:min(380px,55vh);overflow-y:auto;display:flex;flex-direction:column;gap:1px;}
.lang-menu .lang-list button{justify-content:flex-start;padding:9px 10px;}
.lang-menu .lang-list button.active{background:var(--teal-wash);}
.lang-native{font-weight:600;}
.lang-english{color:var(--gray);font-size:0.8rem;}
.lang-check{margin-left:auto;color:var(--teal-dark);font-size:1rem;}
.lang-empty{padding:10px;font-size:0.85rem;margin:0;}
.lang-auto-note{display:flex;gap:6px;align-items:flex-start;margin:6px 2px 0;padding:8px 8px 2px;border-top:1px solid var(--hairline);font-size:0.74rem;line-height:1.4;}
.lang-auto-note i{color:var(--teal-dark);font-size:0.95rem;flex-shrink:0;margin-top:1px;}
.chat-msg .msg-body{white-space:pre-wrap;overflow-wrap:anywhere;}
.chat-msg .msg-translated{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:0.72rem;opacity:0.75;margin-top:4px;font-style:normal;}
.chat-msg .msg-translated i{font-size:0.85rem;}
.msg-original-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;}
@media (max-width:700px){
  .lang-menu{position:fixed;top:calc(var(--header-h,57px) + 6px);left:12px;right:12px;width:auto;}
}

/* ===== Digital Rooms: shared list ===== */
.room-when{display:flex;align-items:center;gap:6px;font-size:0.82rem;color:var(--navy-deep);margin:-6px 0 12px;}
.room-when i{color:var(--teal-dark);font-size:1rem;}
.room-actions .btn:disabled{opacity:.55;cursor:not-allowed;}
.room-remove{color:var(--gray);display:inline-flex;align-items:center;gap:4px;}
.room-remove:hover{color:#c0392b;}
.rooms-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 16px;text-align:center;color:var(--gray);background:#fff;border:1px dashed var(--hairline);border-radius:var(--radius);}
.rooms-empty i{font-size:2.2rem;color:var(--teal-dark);}
.rooms-empty p{margin:0;}

/* ===== Live Prayer: End session & leave ===== */
.live-prayer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.btn-end-session{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid #f1c9c4;background:#fdf1ef;color:#b23a2b;font-family:var(--font-body);font-weight:700;font-size:0.8rem;cursor:pointer;white-space:nowrap;}
.btn-end-session:hover{background:#b23a2b;border-color:#b23a2b;color:#fff;}
.btn-end-session i{font-size:1rem;}
.live-prayer-overlay-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
#cancelLivePrayerBtn{margin-top:10px;}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--gray);font-size:0.86rem;padding:24px 12px;max-width:260px;}
.chat-empty i{font-size:1.8rem;color:var(--teal-dark);}

/* ===== Public chat moderation (hosts, admins, owners) ===== */
/* the ⋮ menu on every message and Moment (staff only) */
.chat-msg.has-menu{position:relative;padding-right:34px;}
.chat-item.has-menu{position:relative;}
.chat-item.has-menu > .moment-live-card{padding-right:40px;}
.item-menu{position:absolute;top:4px;right:4px;z-index:3;}
.chat-item > .item-menu{top:8px;right:8px;}
.item-menu-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:inherit;opacity:0.55;cursor:pointer;font-size:1.05rem;padding:0;}
.item-menu-btn:focus-visible,.item-menu.open .item-menu-btn{opacity:1;background:rgba(0,0,0,0.08);}
.chat-msg.me .item-menu.open .item-menu-btn{background:rgba(255,255,255,0.2);}
@media (hover:hover){ .item-menu-btn:hover{opacity:1;background:rgba(0,0,0,0.08);} .chat-msg.me .item-menu-btn:hover{background:rgba(255,255,255,0.2);} }
.item-menu-pop{position:absolute;top:calc(100% + 4px);right:0;min-width:170px;padding:6px;border-radius:12px;background:#fff;border:1px solid var(--hairline);box-shadow:0 10px 28px rgba(15,35,50,0.18);}
.item-menu-pop.up{top:auto;bottom:calc(100% + 4px);}
.item-menu-del{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#b23a2b;font-family:var(--font-body);font-weight:700;font-size:0.9rem;text-align:left;cursor:pointer;white-space:nowrap;}
.item-menu-del i{font-size:1.1rem;}
.item-menu-del:hover,.item-menu-del:focus-visible{background:#fdf1ef;}
/* moderation: Mute / Remove / Remove & ban (api/_mod.js) */
.item-menu-sep{height:1px;margin:4px 6px;background:var(--hairline);}
.item-menu-del.mod{color:var(--navy,#16323f);}
.item-menu-del.mod:hover,.item-menu-del.mod:focus-visible{background:#eef6f8;}
body.mod-muted #chatInput{background:#f3f5f6;color:#7f8c90;cursor:not-allowed;}
.mod-cover{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:rgba(11,37,50,0.94);}
.mod-cover-card{max-width:440px;padding:32px 28px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,0.35);}
.mod-cover-card i{font-size:2.6rem;color:#b23a2b;}
.mod-cover-card h2{margin:10px 0 8px;font-size:1.3rem;color:var(--navy,#16323f);}
.mod-cover-card p{margin:0;color:#4c5d63;line-height:1.55;}
body.mod-out .isaiah-launcher,body.mod-out .isaiah-panel{display:none !important;}
/* ===== Live Prayer: Invite host ===== */
.prayer-head-actions{display:inline-flex;gap:8px;flex-wrap:wrap;}
.btn-invite-host{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--hairline);background:#fff;color:var(--teal-dark);font-family:var(--font-body);font-weight:700;font-size:0.8rem;cursor:pointer;white-space:nowrap;}
.btn-invite-host:hover:not(:disabled){background:var(--teal-wash);border-color:var(--teal-dark);}
.btn-invite-host:disabled{opacity:.6;cursor:default;}
.btn-invite-host i{font-size:1rem;}
.prayer-system{align-self:center;text-align:center;font-size:0.78rem;color:var(--gray);padding:2px 10px;}
.host-invite-card{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border-radius:12px;background:#f2f7f8;border:1px solid var(--hairline);font-size:0.84rem;}
.host-invite-card > i{font-size:1.2rem;color:var(--teal-dark);flex-shrink:0;}
.host-invite-card > span:first-of-type{flex:1;min-width:0;}
.host-invite-card .btn{padding:6px 14px;font-size:0.8rem;flex-shrink:0;}
.host-invite-card.done{background:#f6faf7;}
.invite-pending{font-size:0.78rem;font-weight:700;color:var(--gray);flex-shrink:0;}

/* ===== Show / hide password (eye button inside every password box) ===== */
.pw-wrap{position:relative;display:block;width:100%;}
.pw-wrap > input{width:100%;padding-right:46px !important;box-sizing:border-box;}
.pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--gray,#5b6b72);cursor:pointer;font-size:1.2rem;padding:0;margin:0 !important;}
.pw-eye:hover{background:rgba(0,122,135,0.08);color:var(--teal-dark,#007a87);}
.pw-eye:focus-visible{outline:2px solid var(--teal-dark,#007a87);outline-offset:1px;}
.pw-eye[aria-pressed="true"]{color:var(--teal-dark,#007a87);}

/* ===================== CCF On Air ===================== */
.onair-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.onair-header h3{margin-bottom:4px;}
.onair-spotify{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--hairline);color:var(--navy,#0b2532);font-weight:700;font-size:0.86rem;text-decoration:none;white-space:nowrap;}
.onair-spotify i{font-size:1.25rem;color:#1db954;}
.onair-spotify:hover{border-color:#1db954;}
/* the big player */
.onair-feature{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:16px;margin-bottom:28px;scroll-margin-top:calc(var(--header-h,57px) + 12px);}
.onair-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b2532;}
.onair-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.onair-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0b2532;}
.onair-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.onair-poster:hover img{transform:scale(1.02);}
.onair-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(0,122,135,0.92);color:#fff;font-size:1.9rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.onair-poster:hover .onair-bigplay{background:var(--teal-dark);}
.onair-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,0.78);color:#fff;font-size:0.74rem;font-weight:700;padding:2px 6px;border-radius:5px;}
.onair-feature-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.onair-eyebrow{font-size:0.72rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:6px;}
.onair-feature-info h4{margin:0 0 6px;font-size:1.2rem;line-height:1.3;}
.onair-meta{margin:0 0 10px;font-size:0.85rem;color:var(--gray);}
.onair-desc{margin:0;font-size:0.9rem;line-height:1.55;color:#33474f;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.onair-desc.open{display:block;max-height:340px;overflow-y:auto;}
.onair-more{border:0;background:none;padding:4px 0;margin-top:2px;color:var(--teal-dark);font-weight:700;font-size:0.84rem;cursor:pointer;}
.onair-yt{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font-size:0.85rem;font-weight:700;color:var(--gray);text-decoration:none;}
.onair-yt i{font-size:1.25rem;}
.onair-yt:hover{color:#c4302b;}
.onair-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 16px;text-align:center;color:var(--gray);}
.onair-empty i{font-size:2.4rem;color:var(--teal-dark);}
/* every episode */
.onair-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.onair-tools h4{margin:0;font-size:1.05rem;}
.onair-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:0 14px;min-width:min(260px,100%);}
.onair-search i{color:var(--gray);font-size:1.1rem;}
.onair-search input{border:0;outline:0;background:transparent;padding:9px 0;font-family:var(--font-body);font-size:0.9rem;width:100%;min-width:0;}
.onair-search:focus-within{border-color:var(--teal-dark);box-shadow:0 0 0 3px rgba(0,122,135,0.12);}
.onair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.onair-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;overflow:hidden;cursor:pointer;font-family:inherit;color:inherit;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;}
.onair-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,37,50,0.1);}
.onair-card.current{border-color:var(--teal-dark);box-shadow:0 0 0 3px rgba(0,122,135,0.14);}
.onair-thumb{position:relative;display:block;aspect-ratio:16/9;background:#0b2532;}
.onair-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.onair-live{position:absolute;left:8px;bottom:8px;background:#c4302b;color:#fff;font-size:0.7rem;font-weight:800;padding:2px 7px;border-radius:5px;text-transform:uppercase;}
.onair-playing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,74,82,0.72);color:#fff;font-weight:800;font-size:0.85rem;}
.onair-card-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;}
.onair-card-body strong{font-size:0.92rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.onair-card-body small{font-size:0.78rem;color:var(--gray);}
.onair-new{align-self:flex-start;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;background:var(--teal-wash);color:var(--teal-dark);padding:2px 8px;border-radius:999px;}
.onair-nomatch{grid-column:1 / -1;color:var(--gray);text-align:center;padding:24px 0;}
.onair-tools.hidden{display:none;}
@media (max-width:900px){
  .onair-feature{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:700px){
  .onair-feature{padding:0;border:0;background:transparent;margin-left:0;margin-right:0;}
  .onair-video{border-radius:10px;}
  /* phones: a compact list (picture left, title right) so 30+ episodes don't make a very long page */
  .onair-grid{grid-template-columns:1fr;gap:10px;}
  .onair-card{flex-direction:row;align-items:stretch;border-radius:12px;}
  .onair-card:hover{transform:none;}
  .onair-thumb{width:44%;max-width:180px;flex-shrink:0;align-self:flex-start;}
  .onair-card-body{padding:8px 10px;min-width:0;justify-content:center;}
  .onair-card-body strong{font-size:0.86rem;-webkit-line-clamp:3;}
  .onair-dur{font-size:0.68rem;right:5px;bottom:5px;padding:1px 5px;}
  .onair-playing{font-size:0.72rem;}
  .onair-search{flex:1 1 100%;}
  .onair-feature-info h4{font-size:1.08rem;}
}
@media (max-width:420px){
  .onair-bigplay{width:60px;height:60px;font-size:1.6rem;}
}

/* series chips (CCF Truth Stories: Truth Stories / Truth Stories Lite) */
.onair-chips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px;}
.onair-chips.hidden{display:none;}
.onair-chip{border:1px solid var(--hairline);background:#fff;border-radius:999px;padding:7px 14px;font-family:var(--font-body);font-weight:700;font-size:0.85rem;color:var(--gray);cursor:pointer;}
.onair-chip span{display:inline-block;min-width:22px;margin-left:4px;padding:1px 6px;border-radius:999px;background:#eef3f5;font-size:0.75rem;}
.onair-chip.active{border-color:var(--teal-dark);color:var(--teal-dark);background:var(--teal-wash);}
.onair-lang{font-weight:700;color:var(--teal-dark);}
/* phones: the chips are one row you swipe sideways (instead of 2–3 rows above the list) */
@media (max-width:700px){
  .onair-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:-4px -16px 12px;padding:2px 16px 4px;scroll-padding:0 16px;}
  .onair-chips::-webkit-scrollbar{display:none;}
  .onair-chip{flex-shrink:0;white-space:nowrap;padding:6px 12px;font-size:0.82rem;}
}
.onair-subscribe i{color:#c4302b;}
.onair-subscribe:hover{border-color:#c4302b;}


/* ===== Profile photos (small circles beside names; js/users-data.js avatarHtml) ===== */
.avatar{position:relative;flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal-dark);color:#fff;font-family:var(--font-head);font-weight:800;font-size:0.68rem;line-height:1;text-transform:uppercase;letter-spacing:0;}
.avatar img,.has-photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff;}
.has-photo-slot{position:relative;overflow:hidden;}
.msg-who{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.chat-msg.me .avatar{background:rgba(255,255,255,0.25);box-shadow:0 0 0 1.5px rgba(255,255,255,0.6);}
.mini-avatar.avatar{margin-left:0;}

/* My profile (click your name at the top) */
.user-chip{background:none;border:0;padding:4px 8px 4px 4px;border-radius:999px;cursor:pointer;color:inherit;font:inherit;font-weight:700;font-size:0.9rem;}
.user-chip:hover,.user-chip:focus-visible{background:var(--teal-wash);}
.profile-card{text-align:center;}
.profile-photo{position:relative;width:120px;height:120px;margin:6px auto 14px;border-radius:50%;}
.profile-photo .avatar{width:120px;height:120px;font-size:2.6rem;}
.profile-photo-btn{position:absolute;right:2px;bottom:2px;width:36px;height:36px;border-radius:50%;border:3px solid #fff;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;}
.profile-name{margin:0;font-size:1.15rem;}
.profile-meta{margin:2px 0 14px;color:var(--gray);font-size:0.86rem;overflow-wrap:anywhere;}
.profile-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;}
.profile-hint{margin:14px 0 0;color:var(--gray);font-size:0.8rem;}
/* my name and nickname */
.profile-form{display:flex;flex-direction:column;text-align:left;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline);}
.profile-form label{font-weight:700;font-size:0.85rem;margin:8px 0 5px;}
.profile-form input{padding:11px 13px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);font-size:0.95rem;}
.profile-form .btn{margin-top:14px;}
/* Fit your photo: the picture moves under a round window */
.photo-crop-card{max-width:380px;text-align:center;}
.crop-hint{margin:0 0 14px;color:var(--gray);font-size:0.86rem;}
.crop-stage{position:relative;width:min(280px,72vw);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:16px;background:#1d2a31;cursor:grab;touch-action:none;user-select:none;}
.crop-stage:active{cursor:grabbing;}
.crop-stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none;}
.crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(13,43,58,0.55);outline:2px solid rgba(255,255,255,0.9);outline-offset:-2px;pointer-events:none;}
.crop-zoom{display:flex;align-items:center;gap:10px;max-width:280px;margin:16px auto 10px;color:var(--gray);font-size:1.2rem;}
.crop-zoom input{flex:1;accent-color:var(--teal-dark);}
.profile-photo.busy::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='18' fill='none' stroke='%23007a87' stroke-width='5' stroke-dasharray='80 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/42px no-repeat;}
/* ===== IsAIah: AI assistant & online welcome center (js/isaiah.js) ===== */
/* the name "IsAIah": IBM Plex Sans has a capital I with crossbars and a lowercase l with a tail, so the name
   can't be misread (in Proxima Nova, I and l look the same); the "AI" tag gets space on both sides */
.isaiah-name{white-space:nowrap;font-family:'IBM Plex Sans',var(--font-head);font-weight:700;letter-spacing:0.02em;}
.ai-mark{display:inline-block;padding:0.02em 0.22em;margin:0 0.14em;border-radius:0.28em;background:linear-gradient(135deg,#ffd24d 0%,#ff9f43 100%);color:var(--navy);font-family:'IBM Plex Sans',var(--font-head);font-weight:700;letter-spacing:0.06em;line-height:1.25;}
/* the "AI" circle: warm gold, so it stands out next to CCF's teal and navy */
.isaiah-orb{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ffd24d 0%,#ff9f43 100%);color:var(--navy);font-family:'IBM Plex Sans',var(--font-head);font-weight:700;font-size:0.8rem;letter-spacing:0.06em;
  box-shadow:0 0 0 3px rgba(255,170,60,0.22);}
.isaiah-orb.big{width:64px;height:64px;font-size:1.35rem;box-shadow:0 0 0 6px rgba(255,170,60,0.18);}

/* under the video: one teal block that's hard to miss */
.isaiah-cta{margin-top:12px;}
.isaiah-cta-btn{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:16px;border:0;cursor:pointer;font:inherit;color:#fff;
  background:linear-gradient(120deg,var(--teal-deeper) 0%,var(--teal-dark) 45%,var(--teal) 100%);box-shadow:0 8px 22px rgba(0,106,118,0.28);transition:transform .15s, box-shadow .15s;}
.isaiah-cta-btn .isaiah-orb{width:46px;height:46px;font-size:1rem;box-shadow:0 0 0 4px rgba(255,255,255,0.25);}
.isaiah-cta-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.isaiah-cta-text strong{font-size:1.18rem;color:#fff;letter-spacing:0.01em;}
.isaiah-cta-text small{color:rgba(255,255,255,0.9);font-size:0.84rem;line-height:1.4;}
.isaiah-cta-go{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.18);display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;}
.isaiah-cta-go .ph-duotone::before{opacity:0;}
@media (hover:hover){ .isaiah-cta-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,106,118,0.34);} }
/* round button + greeting bubble */
.isaiah-launcher{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;}
.isaiah-launcher > *{pointer-events:auto;}
.isaiah-fab{width:58px;height:58px;border-radius:50%;border:0;padding:0;cursor:pointer;background:none;box-shadow:0 10px 26px rgba(15,35,50,0.28);border-radius:50%;}
.isaiah-fab .isaiah-orb{width:58px;height:58px;font-size:1.15rem;box-shadow:none;}
.isaiah-bubble{position:relative;max-width:270px;background:#fff;border:1px solid var(--hairline);border-radius:16px 16px 4px 16px;padding:12px 30px 12px 14px;box-shadow:0 12px 30px rgba(15,35,50,0.18);animation:izPop .25s ease-out;}
.isaiah-bubble p{margin:0;font-size:0.88rem;line-height:1.45;cursor:pointer;}
.isaiah-bubble-close{position:absolute;top:4px;right:6px;border:0;background:none;font-size:1.2rem;line-height:1;color:var(--gray);cursor:pointer;padding:4px;}
@keyframes izPop{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:none;}}
body.isaiah-open .isaiah-bubble{display:none;}

/* the chat panel */
.isaiah-panel{position:fixed;right:20px;bottom:92px;z-index:901;width:390px;max-width:calc(100vw - 32px);height:min(620px, calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;border-radius:18px;border:1px solid var(--hairline);box-shadow:0 24px 60px rgba(15,35,50,0.28);overflow:hidden;animation:izPop .2s ease-out;}
.isaiah-panel.hidden{display:none;}
.isaiah-head{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;border-bottom:1px solid var(--hairline);background:linear-gradient(180deg,#f3fbfc,#fff);}
.isaiah-head-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;}
.isaiah-head-text strong{font-size:1.02rem;}
.isaiah-head-text small{color:var(--gray);font-size:0.76rem;}
.isaiah-icon-btn{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--gray);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;}
/* no shaded circle: the duotone icons' fill layer is hidden, and there's no hover background */
.isaiah-icon-btn .ph-duotone::before{opacity:0;}
@media (hover:hover){ .isaiah-icon-btn:hover{color:var(--teal-dark);} }
.isaiah-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:#fafcfd;}
.isaiah-msg{display:flex;gap:8px;align-items:flex-end;max-width:100%;}
.isaiah-msg .isaiah-orb{width:26px;height:26px;font-size:0.6rem;box-shadow:none;}
.isaiah-msg .isaiah-text{padding:10px 13px;border-radius:16px;font-size:0.9rem;line-height:1.5;overflow-wrap:anywhere;min-width:0;}
.isaiah-msg.bot .isaiah-text{background:#fff;border:1px solid var(--hairline);border-bottom-left-radius:4px;max-width:calc(100% - 34px);}
.isaiah-msg.me{justify-content:flex-end;}
.isaiah-msg.me .isaiah-text{background:var(--teal-dark);color:#fff;border-bottom-right-radius:4px;max-width:85%;}
.isaiah-text p{margin:0 0 6px;} .isaiah-text p:last-child{margin-bottom:0;}
.isaiah-text ul{margin:4px 0 6px;padding-left:18px;} .isaiah-text li{margin:2px 0;}
.isaiah-text a{color:var(--teal-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.isaiah-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.isaiah-action{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;border:0;background:var(--teal-dark);color:#fff !important;font:inherit;font-size:0.82rem;font-weight:800;text-decoration:none !important;cursor:pointer;}
.isaiah-action + .isaiah-action{background:var(--teal-wash);color:var(--teal-dark) !important;}
.isaiah-dots{display:inline-flex;gap:4px;padding:3px 0;}
.isaiah-dots i{width:7px;height:7px;border-radius:50%;background:var(--teal);opacity:.35;animation:izDot 1s infinite;}
.isaiah-dots i:nth-child(2){animation-delay:.15s;} .isaiah-dots i:nth-child(3){animation-delay:.3s;}
@keyframes izDot{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}
/* quick questions wrap onto more lines, so every one can be read and tapped */
.isaiah-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px;}
.isaiah-chips:not(:empty){padding:8px 14px;background:#fafcfd;}
.isaiah-chip{flex:0 1 auto;max-width:100%;padding:7px 12px;border-radius:999px;border:1px solid var(--teal);background:#fff;color:var(--teal-dark);font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer;text-align:left;line-height:1.3;}
@media (hover:hover){ .isaiah-chip:hover{background:var(--teal-wash);} }
.isaiah-input{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--hairline);}
.isaiah-input.hidden{display:none;}
.isaiah-input textarea{flex:1;min-width:0;resize:none;border:1px solid var(--hairline);border-radius:14px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.35;max-height:120px;outline:none;}
.isaiah-input textarea:focus{border-color:var(--teal);}
.isaiah-input button{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--teal-dark);color:#fff;font-size:1.1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.isaiah-note{margin:0;padding:0 14px 10px;font-size:0.7rem;color:var(--gray);text-align:center;line-height:1.35;}
.isaiah-signin{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 12px;max-width:300px;}
.isaiah-signin h4{margin:6px 0 0;font-size:1.1rem;}
.isaiah-signin p{margin:0 0 4px;color:var(--gray);font-size:0.88rem;line-height:1.45;}
.isaiah-signin .btn{width:100%;}

/* phones: the chat fills the screen */
@media (max-width:600px){
  .isaiah-launcher{right:14px;bottom:14px;}
  .isaiah-fab,.isaiah-fab .isaiah-orb{width:52px;height:52px;}
  .isaiah-panel{inset:0;width:100%;max-width:none;height:100%;height:100dvh;border-radius:0;border:0;}
  body.isaiah-open{overflow:hidden;}
  body.isaiah-open .isaiah-launcher{display:none;}
  /* a slim block under the service bar */
  .isaiah-cta{margin:0;padding:8px 12px;background:#fff;border-bottom:1px solid var(--hairline);}
  .isaiah-cta-btn{padding:9px 12px;border-radius:14px;gap:10px;box-shadow:0 4px 12px rgba(0,106,118,0.22);}
  .isaiah-cta-btn .isaiah-orb{width:34px;height:34px;font-size:0.76rem;box-shadow:0 0 0 3px rgba(255,255,255,0.25);}
  .isaiah-cta-text strong{font-size:0.92rem;}
  .isaiah-cta-text small{font-size:0.72rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .isaiah-cta-go{width:28px;height:28px;font-size:0.9rem;}
  body.role-elevated .isaiah-cta{order:2;}}
/* ===== Series Theme (Admin → Setup → Series Theme; applySeriesTheme in js/app.js) =====
   Only while a series is on (body.series-on): the Next Service bar shows the series art and colors,
   a "Starting soon!" burst pulses in the last 10 minutes (body.series-starting; not "series-soon", which is the badge's own class and is hidden by default), and small stickers sit
   on the IsAIah block and the Log In / Sign Up buttons. */
:root{--series-accent:#ffd24d;--series-accent2:#3d8bff;--series-dark:#0b2532;--series-on-accent:#111;--series-on-accent2:#fff;--series-focus:35%;
  --burst:polygon(50% 0%,60.1% 12.3%,75% 6.7%,77.6% 22.4%,93.3% 25%,87.7% 39.9%,100% 50%,87.7% 60.1%,93.3% 75%,77.6% 77.6%,75% 93.3%,60.1% 87.7%,50% 100%,39.9% 87.7%,25% 93.3%,22.4% 77.6%,6.7% 75%,12.3% 60.1%,0% 50%,12.3% 39.9%,6.7% 25%,22.4% 22.4%,25% 6.7%,39.9% 12.3%);
  --bolt:polygon(58% 0%,14% 56%,44% 56%,32% 100%,86% 38%,54% 38%,70% 0%);}
.series-name,.series-headline,.series-soon{display:none;}
body.series-on .next-service-card{
  background:linear-gradient(90deg,rgba(11,37,50,0.92) 0%,rgba(11,37,50,0.72) 55%,rgba(11,37,50,0.3) 100%),var(--series-img) center var(--series-focus)/cover no-repeat,var(--series-dark);
  background:linear-gradient(90deg,color-mix(in srgb,var(--series-dark) 93%,transparent) 0%,color-mix(in srgb,var(--series-dark) 74%,transparent) 55%,color-mix(in srgb,var(--series-dark) 25%,transparent) 100%),var(--series-img) center var(--series-focus)/cover no-repeat,var(--series-dark);
  padding-top:12px;padding-bottom:12px;}
body.series-on .next-service-label{color:var(--series-accent);}
body.series-on .series-name{display:inline;margin-left:8px;padding-left:8px;border-left:1px solid rgba(255,255,255,0.4);color:#fff;font-family:var(--font-head);font-size:0.62rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;opacity:0.92;}
body.series-on .series-name:empty{display:none;}
body.series-on .series-headline{display:block;margin:2px 0 1px;color:var(--series-accent);font-family:var(--font-head);font-weight:800;font-size:1.15rem;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,0.4);overflow-wrap:anywhere;}
body.series-on .series-headline:empty{display:none;}
body.series-on .next-service-card h3{font-size:0.86rem;}
body.series-on .next-service-time{color:rgba(255,255,255,0.82);}
body.series-on .countdown-compact{background:rgba(0,0,0,0.38);border:1px solid rgba(255,255,255,0.22);border-color:color-mix(in srgb,var(--series-accent) 60%,transparent);}
body.series-on .countdown-compact span{color:var(--series-accent);}
body.series-on.series-starting .series-soon{display:flex;flex:none;margin-left:auto;margin-right:-4px;width:74px;height:74px;align-items:center;justify-content:center;text-align:center;padding:10px;box-sizing:border-box;
  background:var(--series-accent2);color:var(--series-on-accent2);clip-path:var(--burst);font-family:var(--font-head);font-weight:800;font-size:0.68rem;line-height:1.05;text-transform:uppercase;
  animation:seriesPulse 1.1s ease-in-out infinite;}
@keyframes seriesPulse{0%,100%{transform:scale(1) rotate(-10deg);}50%{transform:scale(1.12) rotate(-4deg);}}
/* stickers (#6) */
body.series-on .isaiah-cta-btn{position:relative;}
body.series-on .isaiah-cta-btn::after{content:"";position:absolute;top:-9px;right:-7px;width:30px;height:30px;background:var(--series-accent);clip-path:var(--burst);transform:rotate(12deg);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25));}
body.series-on .isaiah-cta-btn::before{content:"";position:absolute;top:-2px;right:0;width:16px;height:16px;z-index:1;background:var(--series-accent2);clip-path:var(--bolt);transform:rotate(12deg);pointer-events:none;}
body.series-on #openSignupBtn,body.series-on .lock-login-btn{position:relative;overflow:visible;}
body.series-on #openSignupBtn::after,body.series-on .lock-login-btn::after{content:"";position:absolute;top:-8px;right:-5px;width:15px;height:19px;background:var(--series-accent);clip-path:var(--bolt);transform:rotate(14deg);pointer-events:none;}
@media (max-width:600px){
  body.series-on .series-headline{font-size:0.98rem;}
  body.series-on .next-service-card{padding-top:9px;padding-bottom:9px;}
  body.series-on.series-starting .series-soon{width:58px;height:58px;font-size:0.56rem;padding:8px;margin-right:-2px;}
  body.series-on .isaiah-cta-btn::after{top:-7px;right:-5px;width:24px;height:24px;}
  body.series-on .isaiah-cta-btn::before{width:13px;height:13px;}
}
@media (prefers-reduced-motion:reduce){ body.series-on.series-starting .series-soon{animation:none;transform:rotate(-8deg);} }

/* Discipleship Journey: free book downloads under each step (GLC's download pages) */
.journey-books{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--hairline);}
.journey-books-label{display:flex;align-items:center;gap:6px;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray);}
.journey-books a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:#fff;border:1px solid var(--hairline);color:var(--navy-deep);font-size:0.84rem;font-weight:700;text-decoration:none;}
.journey-books a i{color:var(--step, var(--teal-dark));font-size:1.05rem;flex:none;}
@media (hover:hover){ .journey-books a:hover{border-color:var(--step, var(--teal));} }
/* quick replies inside IsAIah's greeting bubble */
.isaiah-bubble p{margin:0 0 4px;}
.isaiah-bubble-replies{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.isaiah-bubble-replies:empty{display:none;}
.isaiah-bubble-reply{padding:6px 11px;border-radius:999px;border:1px solid var(--teal);background:#fff;color:var(--teal-dark);font:inherit;font-size:0.78rem;font-weight:800;cursor:pointer;}
.isaiah-bubble-reply:first-child{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;}
/* wherever "IsAIah" is written (messages, bubble, input, note): the clear font, so it can't read as "IsAlah" */
.isaiah-input textarea::placeholder,.isaiah-note{font-family:'IBM Plex Sans',var(--font-body);}
.isaiah-text .isaiah-name,.isaiah-bubble .isaiah-name{font-weight:700;letter-spacing:0.02em;}
/* the CCF Net logo in CCF teal: the black logo image is used as a mask and filled with the brand color,
   cropped to the artwork (the image file has empty space around it) */
.logo-teal{display:block;aspect-ratio:1914/619;background:var(--teal-dark);
  -webkit-mask:url(/assets/logo-full.webp) center/104.5% 181.7% no-repeat;mask:url(/assets/logo-full.webp) center/104.5% 181.7% no-repeat;}
/* top left of the main page and the phone menu: CCF Online Church (Brand Book: the CCF mark with the name beside it in Futura Std Medium, 50px high on the web) */
.brand-logo.logo-teal{height:50px;}
.brand-logo.logo-teal,.side-nav-logo.logo-teal{aspect-ratio:953/200;background:#000;
  -webkit-mask:url(/assets/logo-online-church.webp) center/contain no-repeat;mask:url(/assets/logo-online-church.webp) center/contain no-repeat;}
.side-nav-logo.logo-teal{height:36px;}
.site-header .header-inner{padding-top:6px;padding-bottom:6px;}
@media (max-width:700px){ .brand-logo.logo-teal{height:34px;} }
/* =====================================================================
   Digital Rooms: who each room is for, Request to Join, passcodes, the owner's Manage panel (js/rooms.js)
   ===================================================================== */
.room-card{display:flex;flex-direction:column;}
/* opening Manage makes only that box taller, not the ones beside it */
.rooms-grid{align-items:start;}
.room-card.is-mine{border-color:var(--teal-light,#7fd3da);}
/* two parts: Starter Groups, then Dgroups, each with a heading and a short description */
.rooms-group{margin-bottom:36px;}
.rooms-group-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px 14px;margin-bottom:16px;}
.rooms-group-head > div{flex:1 1 320px;min-width:0;}
.rooms-group-head h4{font-size:1.15rem;margin:2px 0 4px;}
.rooms-group-head p{margin:0;max-width:700px;font-size:0.9rem;line-height:1.55;color:var(--ink-soft);}
.rooms-group-head #createRoomBtn{align-self:center;}
.rooms-group-icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:var(--teal-wash);color:var(--teal-dark);}
.rooms-group-starter .rooms-group-icon{background:#fdf0c4;color:#a87a00;}
/* starter group boxes: warm gold, the Engage color of the Discipleship Journey, with its seed symbol faded at the top right */
.room-card.is-starter{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff6d8 0%,#fffcf2 55%,#ffffff 100%);border-color:#f1dc9a;
  box-shadow:0 0 0 1px #f1dc9a, 0 8px 20px -10px rgba(168,122,0,0.25);}
.room-card.is-starter::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#f2c230,#f7d968);}
.room-card.is-starter::after{content:"";position:absolute;top:14px;right:12px;width:72px;height:72px;background:url('/assets/journey-engage.png') no-repeat top right/contain;opacity:0.16;pointer-events:none;}
.room-card.is-starter > *{position:relative;}
.room-card.is-starter h4{padding-right:56px;}
.room-card.is-starter .room-tag{background:#f2c230;color:#4d3800;}
.room-card.is-starter .room-meta i,.room-card.is-starter .room-when i{color:#a87a00;}
.room-card.is-starter.is-mine{border-color:#e0b93a;}
.rooms-empty.rooms-empty-starter{padding:28px 16px;background:#fffaea;border-color:#ecd48a;}
.rooms-empty.rooms-empty-starter i{color:#a87a00;}
.room-run{font-size:0.8rem;color:var(--gray);margin:-8px 0 12px 22px;}
.room-asks{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;padding:9px 12px;border:1px solid #f3d27a;border-radius:10px;background:#fff8e6;
  color:#7a4f00;font-family:var(--font-body);font-size:0.85rem;font-weight:700;text-align:left;cursor:pointer;}
.room-asks i{font-size:1.15rem;color:#c98a00;}
.room-asks span{flex:1;}
.room-asks b{font-size:0.8rem;color:var(--teal-dark);text-decoration:underline;}
.room-asks:hover{background:#fff2cf;}
.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e8a400;color:#fff;font-size:0.72rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.nav-count.hidden{display:none;}
.room-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px;}
.room-tag{font-size:0.74rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--teal-wash,#e6f4f5);color:var(--teal-dark);}
.room-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:0.82rem;color:var(--gray);margin:0 0 10px;}
.room-meta span{display:inline-flex;align-items:center;gap:5px;}
.room-meta i{color:var(--teal-dark);font-size:1rem;}
.room-card .room-occ-count{margin:0 0 10px;color:#1c7a4a;}
.room-card .room-actions{margin-top:auto;flex-wrap:wrap;}
.room-card .room-actions .btn{flex:1 1 auto;justify-content:center;}
.room-manage{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px;}
.rm-label{font-size:0.78rem;font-weight:800;color:var(--navy-deep);text-transform:uppercase;letter-spacing:0.04em;margin:6px 0 2px;}
.rm-pass{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;}
.rm-pass .rm-label{margin:0 4px 0 0;}
.rm-pass code{font-size:1.15rem;font-weight:800;letter-spacing:0.18em;color:var(--navy-deep);background:#f2f8f8;padding:4px 10px;border-radius:8px;}
.rm-pass .btn,.room-manage .rm-requests .btn{padding:6px 10px;font-size:0.82rem;}
.rm-hint{font-size:0.8rem;color:var(--gray);margin:0;}
.rm-time{display:flex;gap:8px;flex-wrap:wrap;}
.rm-time input{min-width:0;padding:9px 10px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);}
.rm-requests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.rm-requests li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--hairline);border-radius:10px;background:#fafcfc;font-size:0.85rem;line-height:1.5;overflow-wrap:anywhere;}
.rm-req-when{font-size:0.76rem;color:var(--gray);}
.room-manage .room-remove{align-self:flex-start;margin-top:6px;}
.my-rooms{margin-bottom:22px;display:flex;flex-direction:column;gap:10px;}
.my-rooms h4{margin:0;}
.my-room{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:#fff;border:1px solid #eef2f3;border-left:4px solid var(--gold,#f2b33d);border-radius:var(--radius);padding:14px 16px;}
.my-room.declined{border-left-color:#c0392b;}
.my-room p{margin:4px 0 0;font-size:0.85rem;color:var(--gray);}
.my-room-when{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.my-room-when .room-tag{font-size:0.7rem;}
.room-status{display:inline-block;font-size:0.72rem;font-weight:800;padding:2px 9px;border-radius:999px;background:#fdf3dd;color:#8a5a00;vertical-align:2px;}
.room-status.declined{background:#fbeaea;color:#a12d2d;}
.room-form-card form{margin-top:10px;}
.room-form-card select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);background:#fff;font-size:0.92rem;}
.room-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;}
.room-form-row .room-form-cap{max-width:none;}
.room-form-card form .room-age-input{max-width:120px;}
.room-form-card h3{padding-right:30px;}
.room-pass-card h3{padding:0 30px;}
.room-form-card form .room-consent{font-weight:500;font-size:0.82rem;margin:14px 0 6px;}
.room-daytime{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;}
.rm-time select{flex:1 1 130px;min-width:0;padding:9px 10px;border-radius:10px;border:1px solid #dde5e7;font-family:var(--font-body);background:#fff;}
.rm-time input{flex:1 1 110px;}
.room-field-hint{display:block;font-size:0.75rem;color:var(--gray);margin:4px 0 6px;}
.room-form-note{font-size:0.82rem;color:var(--navy-deep);background:#f2f8f8;border-radius:10px;padding:10px 12px;margin:10px 0 4px;}
.room-consent{align-items:flex-start;font-weight:500;line-height:1.45;}
.room-consent input{margin-top:3px;flex-shrink:0;}
.room-pass-card{text-align:center;}
.room-pass-card form{text-align:left;}
.room-pass-icon i{font-size:2.6rem;color:var(--teal-dark);}
.room-pass-input{font-size:1.6rem !important;letter-spacing:0.5em;text-align:center;font-weight:800;}
.room-pass-ask{background:none;border:0;color:var(--teal-dark);font-weight:700;font-size:0.85rem;cursor:pointer;margin-top:12px;text-decoration:underline;}
@media (max-width:520px){
  .room-form-row{grid-template-columns:minmax(0,1fr);}
  .my-room{flex-direction:column;}
}.my-room .room-remove{align-self:flex-start;padding-left:0;padding-right:0;}
/* tablets and phones: a short page (e.g. Digital Rooms with one room) still puts the footer at the bottom of the screen */
@media (max-width:1100px){
  html:not([data-admin]) body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;}
  html:not([data-admin]) body > .app-shell{flex:1 0 auto;width:100%;}
}
/* ===== First 3 minutes: guest chat, who's watching, host alerts for first-time guests ===== */
.link-btn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
/* "Say hi!" above the chat box (guests who haven't posted yet) */
.chat-hello{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--teal-wash);color:var(--navy-deep);font-size:0.88rem;line-height:1.45;}
.chat-hello.hidden{display:none;}
.chat-hello-intro{display:flex;flex-direction:column;gap:2px;}
.chat-hello-intro strong{font-size:0.95rem;}
.chat-hello-login{color:var(--ink-soft);font-size:0.84rem;}
.chat-hello-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:10px;}
.chat-hello-actions .btn{min-height:44px;}
/* "👋 New here" next to a first-time visitor's name */
.new-here-tag{display:inline-block;font-size:0.68rem;font-weight:800;line-height:1;padding:3px 6px;border-radius:999px;background:#fff4d6;color:#7a5200;}
.chat-msg.me .new-here-tag{background:rgba(255,255,255,0.22);color:#fff;}
/* under the video: "12 watching now from 🇵🇭 Philippines, 🇦🇪 UAE · 2 hosts online" */
.watching-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px;background:#fff;border:1px solid var(--hairline);border-radius:12px;font-size:0.88rem;color:var(--navy-deep);}
.watching-strip:empty{display:none;}
.watch-count{display:inline-flex;align-items:center;gap:6px;}
.watch-count i{font-size:1.2rem;color:var(--teal-dark);}
.watch-place{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:#f0f6f7;font-weight:700;font-size:0.84rem;}
.watch-place.more{color:var(--ink-soft);}
.watch-hosts{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:700;color:#1c7a4a;font-size:0.84rem;}
.watch-dot{width:8px;height:8px;border-radius:50%;background:#22a35a;box-shadow:0 0 0 3px rgba(34,163,90,0.18);}
body.role-elevated .watching-strip{display:none;}
/* hosts: first-time guest cards, top right under the header */
.newcomer-alerts{position:fixed;top:calc(var(--header-h,54px) + 12px);right:16px;z-index:880;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;}
.newcomer-alerts.hidden{display:none;}
.nc-card{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;background:#fff;border:1px solid #ffe1a8;border-left:4px solid #f0a500;border-radius:12px;box-shadow:0 12px 30px rgba(15,35,50,0.18);animation:izPop .25s ease-out;}
.nc-card.greeted{border-color:var(--hairline);border-left-color:#22a35a;}
.nc-wave{font-size:1.5rem;line-height:1;}
.nc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:0.9rem;color:var(--navy-deep);}
.nc-text small{color:var(--ink-soft);font-size:0.8rem;}
.nc-text .nc-greeted{color:#1c7a4a;font-weight:700;}
.nc-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.nc-actions .btn{padding:8px 12px;font-size:0.82rem;white-space:nowrap;}
.nc-x{border:0;background:none;color:var(--ink-soft);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 4px;}
/* IsAIah's round button: not on Home (Home has the "Talk with IsAIah" block), so it never covers the chat */
body.on-home .isaiah-fab{display:none;}
/* phones: "New here?" stays in the header (Sign Up is one tap away in the Log In box) */
@media (max-width:700px){
  body:not(.role-elevated) .newhere-btn{display:inline-flex;padding:7px 10px;gap:4px;font-size:0.8rem;white-space:nowrap;}
  #openSignupBtn{display:none;}
  .watching-strip{border-radius:0;border-left:0;border-right:0;border-top:0;padding:8px 14px;font-size:0.82rem;}
  .watch-hosts{margin-left:0;}
  .newcomer-alerts{top:auto;bottom:12px;right:12px;left:12px;width:auto;}
}
@media (max-width:400px){ .newhere-btn span{display:none;} body:not(.role-elevated) .newhere-btn{padding:8px;} }

/* ===== Poll Moments ===== */
.moment-live-card.type-poll{border-left-color:#7c5cff;}
.poll-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.poll-choices .btn{min-height:44px;}
.poll-else{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;}
.poll-pick{display:flex;gap:8px;margin-top:10px;}
.poll-pick select{flex:1;min-width:0;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid #c9dfe2;font:inherit;font-size:16px;background:#fff;}
.poll-results{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.poll-row{position:relative;display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 10px;border-radius:8px;background:#f0f4f6;overflow:hidden;font-size:0.9rem;}
.poll-bar{position:absolute;inset:0 auto 0 0;background:rgba(124,92,255,0.18);border-radius:8px;transition:width .4s ease;}
.poll-row.mine .poll-bar{background:rgba(0,128,141,0.22);}
.poll-label{position:relative;flex:1;min-width:0;font-weight:700;color:var(--navy-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.poll-n{position:relative;font-weight:800;color:var(--navy-deep);}
.poll-total,.poll-more,.poll-empty{margin:2px 0 0;font-size:0.82rem;color:var(--ink-soft);}

/* ===== "Your next steps today" under the video (computers; members and guests) ===== */
.next-steps{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);}
.next-steps:empty{display:none;}
.next-steps h4{margin:0 0 12px;font-size:1.02rem;color:var(--navy-deep);}
.step-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.step-tile{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:#f5f9fa;border:1px solid #e3eef0;}
.step-tile .step-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-wash);color:var(--teal-dark);display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;}
.step-text{display:flex;flex-direction:column;gap:3px;flex:1;}
.step-text strong{font-size:0.98rem;color:var(--navy-deep);line-height:1.3;}
.step-text span{font-size:0.88rem;color:var(--ink-soft);line-height:1.45;}
.step-tile .btn{align-self:flex-start;min-height:44px;}
body.role-elevated .next-steps{display:none;}
@media (min-width:1500px){ .step-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:700px){ .next-steps{display:none;} }

/* ===== Readability (WCAG AA): small labels at least 12px, interface text 14px, chat text 15-16px,
   grey text at least 4.5:1 contrast, and 44px tap targets (Apple's minimum) ===== */
.next-service-label{font-size:0.75rem;}
.next-service-time{font-size:0.84rem;color:#d3e3e9;}
.nav-group-label{font-size:0.75rem;}
.live-right-tabs button{font-size:0.78rem;color:#5f7177;}
.moment-live-card-label{font-size:0.75rem;}
.moment-live-card{font-size:0.95rem;}
.chat-msg{font-size:0.97rem;line-height:1.45;}
.chat-msg .msg-author{font-size:0.8rem;}
.chat-msg .msg-translated{font-size:0.78rem;}
.role-host-tag{font-size:0.7rem;padding:3px 6px;}
.site-footer{font-size:0.82rem;color:#d0e0e6;}
.translate-toggle{font-size:0.86rem;}
.isaiah-bubble p{font-size:0.92rem;}
.isaiah-bubble-reply{font-size:0.86rem;min-height:36px;}
.isaiah-cta-text small{font-size:0.88rem;}
.schedule-tz{font-size:0.78rem;}
.schedule-tag{font-size:0.72rem;}
.countdown-compact small{font-size:0.7rem;}
/* every text box: 16px, so iPhones don't zoom the page when someone taps to type */
.chat-input-row input,.form-card input,.form-card textarea,.auth-form input,.talk-form input,.talk-form textarea{font-size:16px;}
/* tap targets */
#guestAuth .btn,#userAuth .btn,.lang-btn,.newhere-btn{min-height:44px;}
.chat-input-row .btn,.moment-live-card .btn,.live-prayer-card .btn,.lock-login-btn,.subtab-btn,.nc-actions .btn{min-height:44px;}
.reaction-btn{width:44px;height:44px;font-size:1.2rem;}
.live-right-tabs button{min-height:52px;}
.nav-item{min-height:44px;}
.modal-close,.isaiah-bubble-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.modal-close{top:6px;right:6px;}
.isaiah-bubble-close{top:0;right:0;}
.isaiah-bubble{padding-right:40px;}
@media (max-width:700px){
  #guestAuth .btn,#userAuth .btn{padding:10px 12px;font-size:0.86rem;}
  .lang-btn{padding:10px;}
  .chat-box .chat-input-row{gap:4px;}
  .chat-box .chat-input-row .btn{padding:10px 12px;}
  .reaction-btn{width:40px;height:44px;border-radius:12px;}
  .live-right-tabs button{font-size:0.88rem;}
  .next-service-label{font-size:0.72rem;}
}/* the remaining small labels people see: 12px or more */
.schedule-next-label,.schedule-subhead,.onair-eyebrow,.onair-new,.onair-playing,.journey-books-label,.room-status,.fourws-eyebrow,.new-here-tag{font-size:0.75rem;}
.schedule-date small{font-size:0.75rem;}
.onair-dur{font-size:0.75rem;}
.starter-tag,.starter-good,.starter-eyebrow,.inv-stat span{font-size:0.78rem;}
@media (max-width:700px){
  .next-service-label{font-size:0.75rem;}
  .next-service-time{font-size:0.8rem;}
}
@media (max-width:600px){ .isaiah-cta-text small{font-size:0.8rem;} }
/* the chat box: the text box gets the full width, reactions and Send on the line below */
.chat-box .chat-input-row{flex-wrap:wrap;row-gap:8px;}
.chat-box .chat-input-row input{flex:1 1 100%;}
.chat-box .chat-input-row .reaction-btn{order:1;}
.chat-box #chatSendBtn{order:2;margin-left:auto;min-width:96px;}
@media (max-width:700px){ .reaction-btn{width:44px;} }
.chat-messages-wrap{min-height:110px;}
@media (max-width:700px){
  .chat-hello{margin-top:8px;padding:8px 12px;font-size:0.86rem;}
  .chat-hello-intro{display:block;}
  .chat-hello-intro strong{font-size:0.9rem;margin-right:4px;}
  .chat-hello-intro span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .chat-hello-actions{margin-top:6px;}
  .chat-hello-actions .btn{padding:8px 14px;font-size:0.86rem;}
  .chat-messages-wrap{min-height:90px;}
}
/* very narrow phones: "New here?" shows just the waving hand (the words stay for screen readers) */
@media (max-width:400px){ .newhere-btn span{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} }
/* phones: text box + Send on one line; the reactions sit in the chat's header row (the tab above already says "Chat") */
@media (max-width:700px){
  .chat-box{position:relative;}
  .chat-header{min-height:44px;margin-bottom:6px;}
  .chat-header > span:first-child{visibility:hidden;}
  .chat-box .chat-input-row{flex-wrap:nowrap;margin-top:8px;}
  .chat-box .chat-input-row input{flex:1 1 auto;}
  .chat-box #chatSendBtn{min-width:0;margin-left:0;}
  .chat-box .chat-input-row .reaction-btn{position:absolute;top:0;width:44px;height:44px;}
  .chat-box .chat-input-row .reaction-btn:nth-child(3){left:0;}
  .chat-box .chat-input-row .reaction-btn:nth-child(4){left:50px;}
  .chat-box .chat-input-row .reaction-btn:nth-child(5){left:100px;}
  .chat-box .chat-messages{min-height:80px;}
  .chat-messages-wrap{min-height:80px;}
}
/* contrast fixes for rules that won above */
.side-nav .nav-group-label{color:#5f7177;}
.site-footer p{color:#d0e0e6;}
.site-footer .footer-copy{color:#b3c7cf;}
.header-actions .newhere-btn{color:#005a64;}
.chat-box .chat-input-row input,.host-chat-col .chat-input-row input,.live-prayer-chat .chat-input-row input,.live-prayer-overlay .chat-input-row input{font-size:16px;}
/* phones, not logged in: the invite to sign up takes the text box's place (reactions stay in the header) */
@media (max-width:700px){
  body:not(.logged-in) .chat-box .chat-input-row input,body:not(.logged-in) .chat-box #chatSendBtn{display:none;}
  body:not(.logged-in) .chat-box .chat-input-row{margin-top:0;}
}
@media (max-width:700px){
  .chat-hello-intro span{display:none;}
  .chat-hello-actions{margin-top:6px;gap:4px 10px;}
}

/* ===== The bar under the video: one slim line on computers; not shown on phones ===== */
body:not(.series-on) .next-service-card{padding:6px 8px 6px 16px;min-height:0;}
body:not(.series-on) .next-service-info{display:flex;align-items:baseline;gap:4px 10px;min-width:0;flex:1;}
body:not(.series-on) .next-service-info .next-service-label{flex:none;}
body:not(.series-on) .next-service-card h3{margin:0;flex:0 1 auto;min-width:0;}
body:not(.series-on) .next-service-time{flex:none;white-space:nowrap;}
.next-service-card .countdown-compact{padding:4px 12px;font-size:0.92rem;}
body.series-on .next-service-card{padding-top:8px;padding-bottom:8px;}
@media (max-width:700px){
  .next-service-card,body.role-elevated .next-service-card{display:none;}
  /* footer on phones: one short line (logo + copyright) */
  .site-footer{padding:6px 14px;}
  .footer-inner{flex-wrap:nowrap;gap:8px;}
  .footer-inner p:not(.footer-copy){display:none;}
  .footer-logo{height:14px;}
  .site-footer .footer-copy{font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
}

/* ===== Starter Groups vs Dgroups: two pages, two colors (gold leaf = starter groups, teal people = Dgroups) ===== */
.nav-item[data-section="starter"] .nav-ico{color:#a87a00;}
.nav-item[data-section="starter"].active{background:linear-gradient(135deg,#f2c230,#e0a800);color:#3d2c00;}
.nav-item[data-section="starter"].active .nav-ico{color:#3d2c00;}
/* each page's heading: its icon beside the title and description */
.page-group-head{display:flex;align-items:flex-start;gap:12px 14px;}
.page-group-head > div{flex:1 1 320px;min-width:0;}
.page-group-head h3{margin:2px 0 6px;}
.page-group-head .section-sub-dark{margin-bottom:0;}
.starter-page-head .rooms-group-icon{background:#fdf0c4;color:#a87a00;}
.starter-head{margin-bottom:16px;}
[data-section-panel="starter"] .rooms-group-starter{margin:6px 0 22px;}
[data-section-panel="rooms"] .rooms-group-dgroup .rooms-group-head{margin-bottom:20px;}
/* an open room fills its page (a starter group's on Starter Groups, a Dgroup's on Dgroup Rooms) */
.content-section.in-room > :not(#activeRoomPanel){display:none;}
@media (max-width:700px){
  .page-group-head > div{flex:1 1 0;}
  .page-group-head #createRoomBtn{flex:1 0 100%;align-self:stretch;}
}

/* 4Ws reader: a clear "← Back" at the top left */
.fourws-reader-back{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;font-size:0.9rem;}
.fourws-reader-back i{font-size:1.1rem;}
@media (max-width:600px){ .fourws-reader-logo{display:none;} .fourws-reader-back{padding:8px 12px;} }
/* "Your next steps today": the Starter Group tile in starter-group gold */
.step-tile.is-starter .step-ico{background:#fdf0c4;color:#a87a00;}
/* IsAIah's button and greeting stay out of the way while the 4Ws reader is open */
body.fourws-open .isaiah-launcher{display:none;}

/* ===== Tablets (701–1100px): the same layout as computers — side menu, video + next steps left, chat right ===== */
@media (min-width:701px) and (max-width:1100px){
  .side-nav{width:200px;padding:16px 10px;}
  .content-area{padding:20px;}
  .live-shell{grid-template-columns:minmax(0,1fr) clamp(290px,34vw,360px);gap:16px;}
  .step-grid{grid-template-columns:minmax(0,1fr);}
  .header-inner{padding:10px 16px;}
}
/* tablets (portrait and landscape): the side menu shows just its icons (names on hover), so the video and chats have room */
@media (min-width:701px) and (max-width:1280px){
  .side-nav{width:72px;padding:14px 8px;align-items:center;}
  .side-nav nav{align-items:stretch;width:100%;}
  .side-nav .nav-item{justify-content:center;padding:12px 0;gap:0;}
  .side-nav .nav-item > span:not(.nav-count){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .side-nav .nav-item .nav-ico{font-size:1.45rem;width:auto;}
  .side-nav .nav-item{position:relative;}
  .side-nav .nav-count{position:absolute;top:4px;right:4px;min-width:18px;height:18px;font-size:0.7rem;}
  .side-nav .nav-group-label{font-size:0;height:1px;margin:10px 8px;background:var(--hairline);}
  .side-nav .admin-link{font-size:0;padding:10px 0;}
  .side-nav .admin-link::before{content:"\2699";font-size:1.2rem;}
  .content-area{padding:16px;}
}
@media (min-width:701px) and (max-width:900px){
  .live-shell{grid-template-columns:minmax(0,1fr) 290px;}
  body.role-elevated .live-shell{grid-template-columns:repeat(2,minmax(0,1fr));}
}/* a narrow video column (tablets, and the hosts' three columns): the date goes on its own line */
@media (min-width:701px) and (max-width:1280px){
  body:not(.series-on) .next-service-info{flex-wrap:wrap;row-gap:0;}
  body:not(.series-on) .next-service-card h3{flex:1 1 auto;min-width:0;}
  body:not(.series-on) .next-service-time{flex-basis:100%;}
}
@media (min-width:701px){
  body.role-elevated:not(.series-on) .next-service-info{flex-wrap:wrap;row-gap:0;}
  body.role-elevated:not(.series-on) .next-service-card h3{flex:1 1 auto;min-width:0;}
  body.role-elevated:not(.series-on) .next-service-time{flex-basis:100%;}
}

/* ===== Moments in the chat: compact (text and button side by side when they fit) ===== */
.moment-live-card{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 12px;border-radius:12px;font-size:0.9rem;box-shadow:none;}
.moment-live-card > .moment-live-card-label{flex:0 0 100%;margin:0;font-size:0.75rem;line-height:1.2;}
.moment-live-card > p{flex:1 1 150px;margin:0;line-height:1.35;font-size:0.9rem;}
.moment-live-card > .btn,.moment-live-card > .moment-live-card-footer{flex:none;margin-left:auto;}
.moment-live-card .btn{min-height:36px;padding:6px 14px;font-size:0.82rem;}
.moment-live-card-footer{gap:8px;}
.moment-live-card .moment-tally{padding:2px 8px;font-size:0.75rem;}
.moment-live-card > .moment-responded,.moment-live-card > .poll-choices,.moment-live-card > .poll-results,.moment-live-card > .poll-pick{flex:0 0 100%;margin-top:2px;}
.moment-live-card .poll-choices{gap:6px;}
.moment-live-card .poll-choices .btn,.moment-live-card .poll-pick select{min-height:36px;}
.moment-live-card .poll-results{gap:4px;}
.moment-live-card .poll-row{min-height:28px;padding:4px 8px;font-size:0.86rem;}
.moment-live-card .poll-total{font-size:0.78rem;}
.moment-live-card > p{flex-basis:110px;}
/* Moments: no label line, just the small icon beside the text (the type name stays for screen readers) */
.moment-live-card > .moment-live-card-label{flex:none;align-self:flex-start;font-size:0;line-height:0;margin:2px 0 0;}
.moment-live-card > .moment-live-card-label i{font-size:1.15rem;vertical-align:0;}
.moment-live-card > p{flex-basis:100px;}

/* ===== Talk with IsAIah: no series sticker in its corner, and it sits right under the service bar ===== */
body.series-on .isaiah-cta-btn::after,body.series-on .isaiah-cta-btn::before{content:none;display:none;}
.isaiah-cta{margin-top:0;}
/* ===== Tablets, host / admin / owner view: smaller service bar (countdown top right) and IsAIah bar ===== */
@media (min-width:701px) and (max-width:1280px){
  body.role-elevated .next-service-card{flex-wrap:nowrap;align-items:flex-start;gap:8px;padding:6px 8px 6px 12px;}
  body.role-elevated .next-service-info{flex:1 1 auto;min-width:0;}
  body.role-elevated .next-service-label{font-size:0.7rem;}
  body.role-elevated .next-service-card h3{font-size:0.8rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.role-elevated .next-service-time{font-size:0.72rem;}
  body.role-elevated .next-service-card .countdown-compact{flex:none;align-self:flex-start;margin-left:auto;padding:2px 8px;font-size:0.78rem;}
  body.role-elevated .countdown-compact small{font-size:0.6rem;margin-right:3px;}
  body.role-elevated .isaiah-cta-btn{padding:8px 12px;gap:10px;border-radius:14px;}
  body.role-elevated .isaiah-cta-btn .isaiah-orb{width:34px;height:34px;font-size:0.76rem;box-shadow:0 0 0 3px rgba(255,255,255,0.25);}
  body.role-elevated .isaiah-cta-text strong{font-size:0.95rem;}
  body.role-elevated .isaiah-cta-text small{font-size:0.78rem;line-height:1.3;}
  body.role-elevated .isaiah-cta-go{width:28px;height:28px;font-size:0.9rem;}
}
@media (min-width:701px) and (max-width:1280px){
  body.role-elevated.series-on .next-service-card{padding-top:6px;padding-bottom:6px;}
  body.role-elevated.series-on .series-name{display:none;}
  body.role-elevated.series-on .series-headline{font-size:0.88rem;line-height:1.2;margin:1px 0 0;}
  body.role-elevated.series-on .next-service-card h3{font-size:0.78rem;}
  body.role-elevated.series-on.series-starting .series-soon{width:52px;height:52px;font-size:0.55rem;padding:6px;}
}

/* ===== Chats (public, Host Chat, live prayer, private chats): tighter, still easy to read ===== */
.chat-messages{gap:4px;padding:8px 10px;}
.chat-msg{padding:5px 10px;line-height:1.32;font-size:0.94rem;border-radius:12px;}
.chat-msg .msg-author{margin-bottom:1px;font-size:0.76rem;line-height:1.2;}
.chat-msg .msg-who .avatar,.chat-msg .msg-who [class*="avatar"]{width:18px;height:18px;font-size:0.6rem;}
.chat-msg.has-menu{padding-right:30px;}
.item-menu{top:2px;right:2px;}
.item-menu-btn{width:26px;height:26px;}
.prayer-system{padding:0 8px;font-size:0.75rem;line-height:1.3;}
.chat-msg .msg-translated{margin-top:2px;}
/* ❤️ on other people's messages: a heart on the right of the name line, red once tapped */
.msg-heart{margin-left:auto;display:inline-flex;align-items:center;gap:3px;border:0;background:none;padding:1px 4px;border-radius:999px;cursor:pointer;color:#1d2b33;font:inherit;font-size:0.75rem;font-weight:800;line-height:1;opacity:1;}
.msg-heart i{font-size:1.05rem;}
.msg-heart .ph-duotone::before{opacity:0;}
.msg-heart.on,.msg-heart.on i{color:#e5484d;}
@media (hover:hover){ .msg-heart:hover{background:rgba(229,72,77,0.08);} }
.msg-heart-count{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:0.75rem;font-weight:800;line-height:1;}
.msg-heart-count i{font-size:0.95rem;color:#ffd0d1;}
/* public chat and Host Chat: Enter sends (no Send button); the reactions sit in the chat's header row */
#chatSendBtn,#hostChatSendBtn{display:none !important;}
.chat-box{position:relative;}
.chat-box .chat-header{min-height:40px;margin-bottom:6px;}
.chat-box .chat-header > span:first-child{visibility:hidden;}
.chat-box .chat-input-row{flex-wrap:nowrap;margin-top:8px;}
.chat-box .chat-input-row input{flex:1 1 auto;}
.chat-box .chat-input-row .reaction-btn{position:absolute;top:0;width:40px;height:40px;}
.chat-box .chat-input-row .reaction-btn:nth-child(3){left:0;}
.chat-box .chat-input-row .reaction-btn:nth-child(4){left:46px;}
.chat-box .chat-input-row .reaction-btn:nth-child(5){left:92px;}
/* "Tap for sound" over the video (it autoplays muted) */
.player-sound{position:absolute;left:12px;top:12px;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;min-height:44px;border:0;border-radius:999px;background:rgba(0,0,0,0.72);color:#fff;font:inherit;font-weight:800;font-size:0.95rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.35);animation:soundNudge 2.4s ease-in-out infinite;}
.player-sound i{font-size:1.2rem;}
.player-sound.hidden{display:none;}
@media (hover:hover){ .player-sound:hover{background:rgba(0,0,0,0.86);} }
@keyframes soundNudge{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@media (prefers-reduced-motion:reduce){ .player-sound{animation:none;} }

/* service videos without controls can't be clicked (no pausing); a full-screen button sits bottom right */
#serviceIframe.no-touch{pointer-events:none;}
.player-full{position:absolute;right:10px;bottom:24px;z-index:6;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:rgba(0,0,0,0.55);color:#fff;font-size:1.2rem;cursor:pointer;}
.player-full.hidden{display:none;}
@media (hover:hover){ .player-full:hover{background:rgba(0,0,0,0.8);} }
.live-left .video-frame:fullscreen{aspect-ratio:auto;border-radius:0;max-height:none;}

/* IsAIah: "Talk to a real person", always in the chat box for visitors (the team doesn't need it) */
.isaiah-human{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 14px;font-size:0.88rem;font-weight:700;color:var(--teal-dark);text-decoration:none;}
.isaiah-human i{font-size:1.05rem;}
@media (hover:hover){ .isaiah-human:hover{text-decoration:underline;} }
body.role-elevated .isaiah-human{display:none;}

/* the room's own chat (Chat tab beside a room's video) */
.room-chat-panel{gap:8px;overflow:hidden;}
.room-chat-note{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:0.76rem;line-height:1.35;color:#3d5560;}
.room-chat-note i{flex:none;margin-top:1px;color:var(--teal-dark);}
.room-chat-panel .chat-messages{flex:1;min-height:180px;overflow-y:auto;display:flex;flex-direction:column;background:#f6f9fa;border-radius:10px;}
.room-chat-empty{margin:auto;text-align:center;font-size:0.85rem;color:#3d5560;}
.room-chat-panel .chat-input-row{flex-wrap:nowrap;}
.room-chat-panel .chat-input-row input{flex:1 1 auto;min-width:0;font-size:16px;}
.room-side-tabs button{position:relative;}
.room-chat-dot{position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;background:#e5484d;}
.room-chat-dot.hidden{display:none;}

/* the service bar is attached to the bottom of the video */
@media (min-width:701px){
  .live-left .video-frame{border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .live-left .next-service-card{margin-top:-14px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:var(--shadow);}
}
/* live prayer / private chat, the person's view: once it starts, only "[host] is praying with you live!" and the conversation */
.pray-sub.active.in-session{display:flex;flex-direction:column;flex:1;min-height:0;}
.pray-sub.in-session .live-prayer-card{padding:6px 10px;text-align:left;border-radius:10px;}
.pray-sub.in-session .live-prayer-card .host-status{justify-content:flex-start;margin:0;font-size:0.9rem;}
.pray-sub.in-session .live-prayer-desc{display:none;}
.pray-sub.in-session .live-prayer-chat{flex:1;display:flex;flex-direction:column;min-height:0;margin-top:6px;padding-top:6px;}
.pray-sub.in-session .live-prayer-head{padding:4px 0 6px;border-bottom:0;font-size:0.82rem;}
.pray-sub.in-session .live-prayer-head .btn-end-session{padding:4px 10px;font-size:0.78rem;}
.pray-sub.in-session .live-prayer-chat .chat-messages{flex:1;max-height:none;min-height:120px;margin-bottom:6px;}
.live-panel[data-live-panel="pray"]:has(.in-session) .pray-subtabbar{margin-bottom:8px;}
.chat-box .chat-messages,.host-chat-col .chat-messages,.live-prayer-chat .chat-messages,.live-prayer-overlay .chat-messages,.active-room-side .chat-messages{gap:4px;}
.chat-msg .msg-author{display:flex;align-items:center;gap:8px;}

/* ===== Service bar on laptops and tablets: no "Starting soon!" burst, countdown at the top right, slimmer ===== */
.series-soon,body.series-on.series-starting .series-soon{display:none !important;}
@media (min-width:701px){
  .next-service-card,body.series-on .next-service-card{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:10px;padding:8px 10px 8px 14px;}
  .next-service-info{flex:1 1 auto;min-width:0;}
  .next-service-label{font-size:0.72rem;}
  .next-service-card h3{font-size:0.9rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .next-service-time{font-size:0.78rem;}
  .next-service-card .countdown-compact{flex:none;align-self:flex-start;margin-left:auto;padding:3px 9px;font-size:0.84rem;}
  .countdown-compact small{font-size:0.62rem;margin-right:3px;}
  body.series-on .series-headline{font-size:1rem;margin:1px 0 0;}
  body.series-on .next-service-card h3{font-size:0.84rem;}
}
/* ===== Hosts on laptops with shorter screens (e.g. 1600 x 900): the video gets shorter (the player letterboxes)
   so Moments / Live Prayer under it keep at least ~300px ===== */
@media (min-width:901px){
  body.role-elevated .live-left .video-frame{flex:none;max-height:max(150px, calc(100vh - var(--header-h,54px) - 61px - 470px));}
  body.role-elevated .live-left .video-frame iframe{display:block;}
  body.role-elevated .live-left .offline-image{object-fit:contain;background:#000;}
}
@media (min-width:901px) and (max-height:820px){
  body.role-elevated .isaiah-cta-btn{padding:7px 12px;gap:10px;border-radius:14px;}
  body.role-elevated .isaiah-cta-btn .isaiah-orb{width:32px;height:32px;font-size:0.74rem;box-shadow:0 0 0 3px rgba(255,255,255,0.25);}
  body.role-elevated .isaiah-cta-text strong{font-size:0.92rem;}
  body.role-elevated .isaiah-cta-text small{font-size:0.76rem;line-height:1.3;}
  body.role-elevated .isaiah-cta-go{width:28px;height:28px;font-size:0.9rem;}
  body.role-elevated .live-left{gap:10px;}
  body.role-elevated .live-left{min-height:0;}
  body.role-elevated.series-on .series-name{display:none;}
  body.role-elevated.series-on .series-headline{font-size:0.88rem;line-height:1.2;}
  body.role-elevated.series-on .next-service-card{padding-top:6px;padding-bottom:6px;}
}

/* ===== CCF standard look (the ccf.org.ph peg): white page, black text and pill buttons, flat hairline cards, tight lowercase page
   titles, black footer and dark panels. CCF teal (Brand Book) stays as the accent: links, active states, your own chat bubbles. ===== */
:root{
  --navy:#000;--navy-deep:#111;--ink-soft:#333;--gray:#4d4d4d;--bg:#fff;--paper-deep:#f0f0f0;--mist:#f6f6f6;--hairline:#d4d4d4;
  --shadow:0 0 0 1px var(--hairline);--shadow-sm:0 0 0 1px var(--hairline);
}
body{line-height:1.45;}
h1,h2,h3{font-weight:700;letter-spacing:-0.025em;}
.btn{font-weight:700;font-size:0.8rem;letter-spacing:0.02em;text-transform:uppercase;}
.btn-primary{background:#000;color:#fff;box-shadow:none;}
.btn-primary:hover{background:#333;box-shadow:none;}
.btn-outline{background:#fff;color:#000;border:1.5px solid #000;}
.btn-outline:hover{background:#000;color:#fff;}
.btn-ghost{color:#000;}
.subtab-btn.active,.schedule-date{background:#000;}
.nav-group-label{color:#4d4d4d;}
.site-footer,.site-footer p{color:#cfcfcf;}
.site-footer .footer-copy{color:#b5b5b5;}
.modal-overlay{background:rgba(0,0,0,0.55);}
/* Discipleship Journey (Engage, Edify, Equip, Empower): the same frame as the video boxes, and pill buttons */
.journey-step{border:1px solid #bdbdbd;border-radius:0 0 16px 16px;box-shadow:none;}
.journey-action{justify-content:center;gap:8px;padding:11px 18px;min-height:44px;border:0;border-radius:999px;background:#000;color:#fff;font-size:0.78rem;font-weight:700;letter-spacing:0.02em;line-height:1.2;text-transform:uppercase;text-align:center;}
button.journey-action{text-align:center;}
.journey-step-name{letter-spacing:-0.065em;line-height:1;-webkit-text-stroke:0.012em currentColor;}
.side-nav .nav-item > span:not(.nav-count),.side-nav .nav-group-label,.side-nav .admin-link{text-transform:lowercase;letter-spacing:-0.065em;-webkit-text-stroke:0.012em currentColor;}
@media (max-width:700px),(min-width:1281px){ .side-nav .nav-group-label{font-size:0.85rem;} }
#inviteTitle{font-size:1.9rem;text-transform:lowercase;letter-spacing:-0.065em;line-height:1;-webkit-text-stroke:0.012em currentColor;}
.journey-action span{color:#fff;}
.journey-action:hover{background:#333;border-color:transparent;}
.journey-books a{border-radius:999px;border:1.5px solid #000;padding:9px 16px;}
@media (hover:hover){ .journey-books a:hover{border-color:#000;background:#000;color:#fff;} .journey-books a:hover i{color:#fff;} }
/* We're Here for You: bigger lowercase titles, like the page titles */
.connect-card:first-child h4,#connectCounsel h4,#connectFeedback h4{font-size:1.9rem;font-weight:700;text-transform:lowercase;letter-spacing:-0.065em;line-height:1;-webkit-text-stroke:0.012em currentColor;}
/* #GoServe is a brand name: the same size and tight letters as the other titles, but it keeps its capitals */
.connect-card:nth-child(2) h4{font-size:1.9rem;font-weight:700;letter-spacing:-0.065em;line-height:1;-webkit-text-stroke:0.012em currentColor;}
/* "your next steps today": lowercase titles (the word 4Ws keeps its capitals) */
#nextStepsTitle,.step-text strong{text-transform:lowercase;}
#nextStepsTitle{font-size:1.4rem;line-height:1.1;letter-spacing:-0.065em;-webkit-text-stroke:0.012em currentColor;}
.step-text strong{font-size:1.18rem;line-height:1.15;letter-spacing:-0.065em;-webkit-text-stroke:0.012em currentColor;}
/* "new here?": lowercase titles, a little bigger than their descriptions */
#welcomeModal .welcome-choice strong{font-size:1.25rem;line-height:1.15;text-transform:lowercase;letter-spacing:-0.065em;-webkit-text-stroke:0.012em currentColor;}
.step-text strong .keep-case{text-transform:none;font:inherit;color:inherit;}
/* every button: the peg's pill (full round ends, black fill, small bold capitals, roomy sides) */
.btn{border-radius:999px;padding:11px 26px;}
.btn-lg{padding:14px 34px;font-size:0.88rem;}
/* phones: the longer logo still has to fit beside the header buttons ("New here?" is also in the menu) */
@media (max-width:700px){
  .brand-logo.logo-teal{height:30px;}
  .site-header .header-inner{padding-left:12px;padding-right:8px;gap:6px;}
  .site-header .header-actions{gap:4px;}
  #guestAuth .btn,#userAuth .btn{padding-left:8px;padding-right:8px;font-size:0.74rem;}
}
@media (max-width:700px){
  /* logged in, the header needs less: no "New here?", and the photo alone opens the profile */
  body.logged-in .site-header #newHereBtn,body.logged-in .site-header #userName{display:none;}
  body.logged-in .site-header .user-chip{padding:0;}
}
@media (max-width:372px){ .site-header #newHereBtn{display:none;} }
@media (max-width:340px){ .brand-logo.logo-teal{height:24px;} #guestAuth #openLoginBtn,#userAuth #logoutBtn{padding-left:4px;padding-right:4px;} .site-header .lang-btn{padding-left:4px;padding-right:4px;} }
/* page titles: big, tight and lowercase */
.content-section > h3,.page-group-head h3,.onair-header h3,.give-wrap > h3,.onair-tools h4{text-transform:lowercase;letter-spacing:-0.065em;line-height:1;-webkit-text-stroke:0.012em currentColor;}
.content-section > h3,.page-group-head h3,.onair-header h3,.give-wrap > h3{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:10px;}
.onair-tools h4{font-size:1.6rem;}
/* CCF On Air, Truth Stories, Every Language: the peg's video box (sharp top corners, rounder bottom corners, thin outline,
   date in small gray above a dark title); the latest video's box has the same corners */
.onair-card,.onair-feature{border:1px solid #bdbdbd;border-radius:0 0 16px 16px;}
.onair-card:hover{transform:none;box-shadow:0 0 0 1px #000;border-color:#000;}
.onair-card.current{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);}
/* the video inside the big box: round on all four corners, the same radius as the box */
.onair-video{border-radius:16px;}
.onair-thumb{background:#000;}
.onair-card-body{gap:3px;padding:10px 14px 22px;min-height:104px;justify-content:flex-start;}
.onair-card-body small{font-size:0.8rem;color:#6b6b6b;}
.onair-card-body strong{font-size:1rem;font-weight:400;line-height:1.25;color:#111;-webkit-line-clamp:3;}
@media (max-width:700px){
  .onair-card{border-radius:0 0 16px 16px;}
  .onair-feature{border:0;}
  .onair-card-body{min-height:0;padding:8px 12px 10px;}
}