/* ==========================================================================
   Faith In — shared design system
   Tokens, primitives and page components used across every screen.
   ========================================================================== */

/* --- colour tokens ------------------------------------------------------- */
:root{
  --canvas: 244 245 247;
  --surface: 255 255 255;
  --raised: 248 249 251;
  --line: 226 230 236;
  --ink: 17 24 39;
  --muted: 100 111 128;
  --faint: 148 158 172;
  --brand: 47 91 234;
  --brand-strong: 30 64 175;
  --brand-soft: 233 239 254;
  --gold: 191 143 43;
  --rose: 225 76 96;
}
html.dark{
  --canvas: 8 12 22;
  --surface: 17 24 39;
  --raised: 24 32 49;
  --line: 39 50 71;
  --ink: 232 237 245;
  --muted: 154 165 183;
  --faint: 116 128 148;
  --brand: 122 155 255;
  --brand-strong: 158 182 255;
  --brand-soft: 29 42 79;
  --gold: 226 184 92;
  --rose: 247 122 139;
}

/* Universal Typography: Inter for English, Koh Santepheap for all Khmer glyphs */
html, body, input, button, select, optgroup, option, textarea,
h1, h2, h3, h4, h5, h6, p, span, a, label, div, blockquote, article, section,
.font-sans {
  font-family: 'Inter', 'Koh Santepheap', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.font-serif {
  font-family: 'Lora', 'Koh Santepheap', Georgia, serif !important;
}

.font-khmer,
:lang(km),
[lang="km"],
.khmer-text,
.fi-bible-verses.is-khmer,
.fi-bible-verses.is-khmer * {
  font-family: 'Koh Santepheap', sans-serif !important;
}

body{
  background: rgb(var(--canvas));
  color: rgb(var(--ink));
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04";
}
::selection{ background: rgb(var(--brand) / .22); }

/* --- surfaces ------------------------------------------------------------ */
.card{
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(16 24 40 / .04);
}
html.dark .card{ box-shadow: none; }

/* --- focus --------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid rgb(var(--brand));
  outline-offset: 2px;
  border-radius: 8px;
}
/* borderless editors and inline menu triggers: the caret is the focus indicator */
#blessing-text:focus-visible, #article-body:focus-visible,
[data-menu-btn]:focus-visible, [data-menu-btn]:focus,
.modal input[type="text"]:focus-visible{ outline:none; }

/* --- top navigation ------------------------------------------------------ */
.top-link{
  position: relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width: 76px; height: 100%; gap: 2px; color: rgb(var(--muted));
  font-size: 12px; font-weight: 500; transition: color .15s ease;
}
.top-link i{ font-size: 18px; }
.top-link:hover{ color: rgb(var(--ink)); }
.top-link[aria-current="page"]{ color: rgb(var(--ink)); font-weight: 600; }
.top-link[aria-current="page"]::after{
  content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px;
  background: rgb(var(--brand));
}

/* --- left-rail navigation (colour coded, sits on the canvas) ------------- */
.nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  font-size:14.5px; font-weight:500; color: rgb(var(--ink));
  transition: background .15s ease, color .15s ease;
}
.nav-item i{ width:22px; text-align:center; font-size:16px; transition: transform .15s ease; }
.nav-item:hover{ background: rgb(var(--surface)); }
.nav-item:hover i{ transform: scale(1.12); }
.nav-item.is-active{
  background: rgb(var(--brand)); color:#fff; font-weight:600;
  box-shadow: 0 1px 2px rgb(47 91 234 / .25);
}
html.dark .nav-item.is-active{ color:#0b1120; }
.nav-item.is-active i{ color: currentColor !important; }

/* --- in-card list navigation (library / jobs / notifications sidebars) --- */
.side-link{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-size:14px; font-weight:500; color: rgb(var(--muted));
  transition: background .15s ease, color .15s ease;
}
.side-link i{ width:20px; text-align:center; font-size:15px; }
.side-link:hover{ background: rgb(var(--raised)); color: rgb(var(--ink)); }
.side-link[aria-current="page"], .side-link.is-active{
  background: #E9EFFE; color: #2F5BEA; font-weight:600;
}
.side-link[aria-current="page"] i, .side-link.is-active i{
  color: #2F5BEA;
}
html.dark .side-link[aria-current="page"], html.dark .side-link.is-active{
  background: rgb(var(--brand-soft)); color: rgb(var(--brand-strong));
}
html.dark .side-link[aria-current="page"] i, html.dark .side-link.is-active i{
  color: rgb(var(--brand-strong));
}

/* row with a trailing count — network sidebar */
.count-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; font-size:14.5px; font-weight:500; color: rgb(var(--ink));
  transition: background .15s ease;
}
.count-link:hover{ background: rgb(var(--raised)); }
.count-link .count{ font-size:13px; color: rgb(var(--muted)); font-variant-numeric: tabular-nums; }
.count-link.is-active{ box-shadow: inset 3px 0 0 rgb(var(--brand)); background: rgb(var(--raised)); }

/* --- buttons ------------------------------------------------------------- */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; color: rgb(var(--muted));
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.icon-btn:hover{ background: rgb(var(--raised)); color: rgb(var(--ink)); }

/* Custom styles for modern icons & badges */
.glass-icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.notification-badge {
  animation: pulse-soft 2s infinite;
}

@keyframes pulse-soft {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.icon-hover-bounce:hover svg {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}
.icon-hover-bounce svg {
  transition: transform 0.2s ease;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-weight:600; font-size:14px; border-radius:999px; padding:8px 16px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-primary{ background: rgb(var(--brand)); color:#fff; }
.btn-primary:hover{ background: rgb(var(--brand-strong)); }
html.dark .btn-primary{ color:#0b1120; }
.btn-primary:disabled{ background: rgb(var(--line)); color: rgb(var(--faint)); cursor:not-allowed; }
.btn-ghost{ color: rgb(var(--muted)); }
.btn-ghost:hover{ background: rgb(var(--raised)); color: rgb(var(--ink)); }
.btn-outline{ border:1.5px solid rgb(var(--brand)); color: rgb(var(--brand)); }
.btn-outline:hover{ background: rgb(var(--brand-soft)); }
.btn-neutral{ border:1.5px solid rgb(var(--line)); color: rgb(var(--muted)); }
.btn-neutral:hover{ background: rgb(var(--raised)); color: rgb(var(--ink)); border-color: rgb(var(--muted)); }

.action-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 6px; border-radius:10px; font-size:14px; font-weight:600; color: rgb(var(--muted));
  transition: background .15s ease, color .15s ease;
}
.action-btn:hover{ background: rgb(var(--raised)); color: rgb(var(--ink)); }
.action-btn.is-on{ color: rgb(var(--brand)); }
.action-btn.is-on.rose{ color: rgb(var(--rose)); }
.fi-composer-actions .action-btn{ min-width:0; }
@media (max-width:420px){
  .fi-composer-actions{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
  .fi-composer-actions .action-btn{
    width:100%; gap:2px; padding-left:2px !important; padding-right:2px !important;
    font-size:10.5px !important;
  }
}
.faith-reaction-wrap{ position:relative; flex:1; min-width:0; display:flex; }
.faith-reaction-trigger{ width:100%; }
.faith-reaction-trigger.amen{ color:#3157d5; }
.faith-reaction-trigger.love{ color:#e11d48; }
.faith-reaction-trigger.pray{ color:#7c3aed; }
.faith-reaction-trigger.hallelujah{ color:#d99000; }
.faith-reaction-trigger.praise{ color:#059669; }
.faith-reaction-popup{
  position:absolute; left:0; bottom:calc(100% + 8px); z-index:100;
  display:flex; align-items:center; gap:6px; width:max-content; max-width:calc(100vw - 32px);
  padding:6px 8px; border:1px solid rgb(var(--line)); border-radius:999px;
  background:rgb(var(--surface)); box-shadow:0 12px 32px rgb(15 23 42 / .22);
  opacity:0; pointer-events:none; transform:translateY(6px) scale(.94);
  transform-origin:bottom left; transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1);
}
.faith-reaction-wrap:hover .faith-reaction-popup,
.faith-reaction-wrap:focus-within .faith-reaction-popup,
.faith-reaction-wrap.is-open .faith-reaction-popup{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.faith-reaction-option{ position:relative; width:40px; height:40px; padding:0; border:0; border-radius:999px; transition:transform .14s ease; cursor:pointer; background:transparent; }
.faith-reaction-option:hover,.faith-reaction-option:focus-visible{ transform:translateY(-6px) scale(1.18); outline:none; z-index:2; }
.faith-reaction-bubble{ width:40px; height:40px; display:grid; place-items:center; border-radius:999px; color:#fff; font-size:17px; box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 3px 8px rgb(15 23 42 / .2); }
.faith-reaction-option.amen .faith-reaction-bubble{ background:linear-gradient(145deg,#4f7df3,#2854c5); }
.faith-reaction-option.love .faith-reaction-bubble{ background:linear-gradient(145deg,#fb7185,#e11d48); }
.faith-reaction-option.pray .faith-reaction-bubble{ background:linear-gradient(145deg,#a78bfa,#7c3aed); }
.faith-reaction-option.hallelujah .faith-reaction-bubble{ background:linear-gradient(145deg,#ffc940,#f08a00); }
.faith-reaction-option.praise .faith-reaction-bubble{ background:linear-gradient(145deg,#34d399,#059669); }
.faith-reaction-option.is-selected .faith-reaction-bubble{ outline:2.5px solid rgb(var(--surface)); box-shadow:0 0 0 4px rgb(var(--brand) / .3),0 4px 10px rgb(15 23 42 / .24); }
.faith-reaction-tooltip{ position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%); padding:4px 8px; border-radius:999px; background:#111827; color:#fff; font-size:11px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; }
.faith-reaction-option:hover .faith-reaction-tooltip,.faith-reaction-option:focus-visible .faith-reaction-tooltip{ opacity:1; }
@media (max-width:560px){
  .faith-reaction-popup{ left:0; transform:translateY(6px) scale(.94); transform-origin:bottom left; gap:4px; padding:5px 6px; }
  .faith-reaction-wrap:hover .faith-reaction-popup,.faith-reaction-wrap:focus-within .faith-reaction-popup,.faith-reaction-wrap.is-open .faith-reaction-popup{ transform:translateY(0) scale(1); }
  .faith-reaction-option,.faith-reaction-bubble{ width:36px; height:36px; font-size:15px; }
}

/* pill filter (notifications, jobs) */
.chip{
  padding:7px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  border:1.5px solid rgb(var(--line)); color: rgb(var(--muted)); white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ background: rgb(var(--raised)); color: rgb(var(--ink)); border-color: rgb(var(--muted)); }
.chip.is-on{ background: rgb(var(--brand)); border-color: rgb(var(--brand)); color:#fff; }
html.dark .chip.is-on{ color:#0b1120; }

/* --- settings rows ------------------------------------------------------- */
.settings-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 20px; border-bottom:1px solid rgb(var(--line));
  transition: background .15s ease;
}
.settings-row:last-child{ border-bottom:none; }
.settings-row:hover{ background: rgb(var(--raised)); }
.settings-row.danger:hover{ background: rgb(var(--rose) / .07); }

/* --- toggle switch ------------------------------------------------------- */
.switch{ position:relative; width:44px; height:24px; flex:none; display:inline-block; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; }
.switch span{
  position:absolute; inset:0; border-radius:999px;
  background: rgb(var(--line)); transition: background .18s ease;
}
.switch span::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px;
  background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / .25); transition: transform .18s ease;
}
.switch input:checked + span{ background: rgb(var(--brand)); }
.switch input:checked + span::after{ transform: translateX(20px); }
.switch input:focus-visible + span{ outline:2px solid rgb(var(--brand)); outline-offset:2px; }

/* --- segmented control --------------------------------------------------- */
.segmented{ display:inline-flex; padding:3px; gap:3px; border-radius:999px; background: rgb(var(--raised)); border:1px solid rgb(var(--line)); }
.segmented button{
  padding:5px 14px; border-radius:999px; font-size:13px; font-weight:600; color: rgb(var(--muted));
  transition: background .15s ease, color .15s ease;
}
.segmented button:hover{ color: rgb(var(--ink)); }
.segmented button.is-on{ background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: 0 1px 2px rgb(16 24 40 / .08); }

/* --- hover-revealed controls (profile edit pencils) ---------------------- */
.reveal{ opacity:0; transition: opacity .15s ease; }
.group:hover .reveal, .reveal:focus-visible, .reveal:focus-within{ opacity:1; }
@media (hover: none){ .reveal{ opacity:1; } }

/* --- form fields --------------------------------------------------------- */
.field{
  width:100%; background: rgb(var(--raised)); border:1px solid rgb(var(--line));
  border-radius:10px; padding:10px 12px; font-size:14px; color: rgb(var(--ink));
  transition: border-color .15s ease, background .15s ease;
}
.field::placeholder{ color: rgb(var(--faint)); }
.field:focus{ background: rgb(var(--surface)); border-color: rgb(var(--brand)); outline:none; }

/* --- avatar -------------------------------------------------------------- */
.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  border-radius:9999px; font-weight:600; letter-spacing:.01em; color:#fff; user-select:none;
  object-fit: cover;
}
.avatar-sq{ border-radius:10px; }

/* --- profile hero avatar ------------------------------------------------ */
.profile-avatar-hero,
#profile-avatar,
[data-profile-hero-avatar] {
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  min-height: 140px !important;
  max-width: 140px !important;
  max-height: 140px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  border: 4px solid rgb(var(--surface)) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  margin-top: -70px !important;
  font-size: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 20 !important;
  background-color: rgb(var(--surface)) !important;
}

@media (max-width: 640px) {
  .profile-avatar-hero,
  #profile-avatar,
  [data-profile-hero-avatar] {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    min-height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
    margin-top: -55px !important;
    font-size: 32px !important;
  }
}

/* --- verified tick badge (Purple Tick) ---------------------------------- */
.fi-verified-tick {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  border-radius: 9999px !important;
  background-color: #7C3AED !important;
  background: #7C3AED !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.45) !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  border: 1.5px solid #FFFFFF !important;
}

.dark .fi-verified-tick {
  border-color: #1e293b !important;
}

.fi-verified-tick svg {
  width: 10px !important;
  height: 10px !important;
  stroke: #FFFFFF !important;
  stroke-width: 3.2 !important;
  fill: none !important;
  display: block !important;
}

.fi-verified-tick--profile {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin-left: 8px !important;
  border-width: 2px !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.5) !important;
}

.fi-verified-tick--profile svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 3.2 !important;
}

.fi-verified-tick--blue {
  background-color: #2563EB !important;
  background: #2563EB !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45) !important;
}

.fi-verified-tick--gold {
  background-color: #F59E0B !important;
  background: #F59E0B !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.45) !important;
}

/* --- settings sidebar & status badges ----------------------------------- */
.settings-menu-item {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 1rem !important;
  color: rgb(var(--muted)) !important;
  transition: all 0.2s ease-in-out !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 8px 8px 0 !important;
  text-decoration: none !important;
}
.settings-menu-item:hover {
  background-color: rgb(var(--raised)) !important;
  color: rgb(var(--ink)) !important;
}
.settings-menu-item.active,
.settings-menu-item.is-active {
  background-color: rgba(47, 91, 234, 0.08) !important;
  color: rgb(var(--brand)) !important;
  border-left-color: rgb(var(--brand)) !important;
  font-weight: 600 !important;
}
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  margin-left: 0.5rem !important;
}
.status-on {
  background-color: #dcfce7 !important;
  color: #166534 !important;
}
.dark .status-on {
  background-color: rgba(22, 101, 52, 0.35) !important;
  color: #86efac !important;
}
.status-off {
  background-color: rgb(var(--raised)) !important;
  color: rgb(var(--muted)) !important;
}

/* --- contacts card & widget --------------------------------------------- */
#contacts {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#contacts > li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 2px 0 !important;
  width: 100% !important;
}

#contacts img,
#contacts .avatar,
#contacts img.avatar,
#contacts span.avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#contacts .contact-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

#contacts .contact-name-row {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#contacts .contact-name {
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  color: rgb(var(--ink)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

#contacts .contact-subtitle {
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: rgb(var(--muted)) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#contacts .contact-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#contacts .contact-follow-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 82px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  background: transparent !important;
  border: 1.5px solid #2554D7 !important;
  color: #2554D7 !important;
}

#contacts .contact-follow-btn.is-following,
#contacts .contact-follow-btn[data-following="true"] {
  border-color: rgb(var(--line)) !important;
  color: rgb(var(--muted)) !important;
  background: transparent !important;
}

#contacts .contact-follow-btn.is-following:hover,
#contacts .contact-follow-btn[data-following="true"]:hover {
  background: rgb(var(--raised)) !important;
}

#contacts .contact-chat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgb(var(--muted)) !important;
  cursor: pointer !important;
  border-radius: 9999px !important;
  transition: color .15s ease, background .15s ease !important;
}

#contacts .contact-chat-btn:hover {
  color: #2554D7 !important;
  background: rgb(var(--raised)) !important;
}

#contacts .contact-chat-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* --- rows that highlight on hover (jobs, notifications, invitations) ----- */
.row-hover{ transition: background .15s ease; }
.row-hover:hover{ background: rgb(var(--raised)); }

.notif-unread{ background: rgb(var(--brand-soft) / .55); box-shadow: inset 3px 0 0 rgb(var(--brand)); }
.notif-unread:hover{ background: rgb(var(--brand-soft)); }

/* Sticky rails that are taller than the viewport: let the rail scroll its
   own content, otherwise everything below the fold becomes unreachable once
   the rail sticks. */
.rail-scroll {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail-scroll::-webkit-scrollbar { display: none; }

/* --- Notifications ------------------------------------------------------ */

/* A date header every time the day changes, so a long list reads as a
   timeline instead of one undifferentiated column. */
.fi-notif-day {
  position: sticky;
  /* clears the app header, which is sticky and 57px tall */
  top: 57px;
  z-index: 2;
  padding: 8px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--muted));
  background: rgb(var(--raised));
  border-bottom: 1px solid rgb(var(--line));
}

.fi-notif-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .15s ease;
}
.fi-notif-row:hover { background: rgb(var(--raised)); }
.fi-notif-row:focus-visible {
  outline: 2px solid rgb(var(--brand));
  outline-offset: -2px;
}

.fi-notif-avatar {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.fi-notif-avatar .avatar,
.fi-notif-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* A small mark on the avatar says what happened before the sentence does. */
.fi-notif-kind {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  color: #fff;
  background: #64748b;
  box-shadow: 0 0 0 2px rgb(var(--surface));
}
.fi-notif-kind.is-reaction { background: #E11D48; }
.fi-notif-kind.is-comment  { background: #2F5BEA; }
.fi-notif-kind.is-follow   { background: #059669; }
.fi-notif-kind.is-message  { background: #4F46E5; }
.fi-notif-kind.is-reply    { background: #0284C7; }
.fi-notif-kind.is-job      { background: #D97706; }
.fi-notif-kind.is-new_post { background: #475569; }

.fi-notif-body { min-width: 0; flex: 1; }
.fi-notif-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgb(var(--ink));
  overflow-wrap: break-word;
}
.fi-notif-time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: rgb(var(--muted));
}
.fi-notif-row .fi-notif-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--brand));
  flex-shrink: 0;
  align-self: center;
}

.fi-notif-skeleton {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
.fi-notif-skeleton .fi-skel-avatar,
.fi-notif-skeleton .fi-skel-lines > span {
  background: linear-gradient(90deg, rgb(var(--raised)) 25%, rgb(var(--line)) 37%, rgb(var(--raised)) 63%);
  background-size: 400% 100%;
  animation: fi-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.fi-notif-skeleton .fi-skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.fi-notif-skeleton .fi-skel-lines { flex: 1; display: block; }
.fi-notif-skeleton .fi-skel-lines > span { display: block; height: 11px; }
.fi-notif-skeleton .fi-skel-lines > span + span { margin-top: 8px; width: 42%; }
@media (prefers-reduced-motion: reduce) {
  .fi-notif-skeleton .fi-skel-avatar,
  .fi-notif-skeleton .fi-skel-lines > span { animation: none; }
}

.fi-notif-summary dt { font-size: 13px; color: rgb(var(--muted)); }
.fi-notif-summary dd { font-size: 14px; font-weight: 700; color: rgb(var(--ink)); font-variant-numeric: tabular-nums; }
.fi-notif-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgb(var(--line));
}
.fi-notif-summary > div:first-child { border-top: 0; padding-top: 0; }

/* --- Notifications: Facebook-style surface ------------------------------
   Facebook's page furniture — a grey canvas with white cards floating on
   it, 8px corners, a shadow instead of a border, big avatars and roomy
   rows. Scoped to this page only; FaithIn's own blue, logo and Khmer type
   are untouched. */

body[data-page="home"],
body[data-page="jobs"],
body[data-page="messaging"],
body[data-page="network"],
body[data-page="notifications"],
body[data-page="profile"],
body[data-page="settings"],
body[data-page="settings-security"] {
  --fb-canvas: #F0F2F5;
  --fb-surface: #FFFFFF;
  --fb-text: #050505;
  --fb-secondary: #65676B;
  --fb-hover: #F2F2F2;
  --fb-chip: #E4E6EB;
  --fb-unread: #EFF3FE;
  --fb-tint: #E9EFFE;
  --fb-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  background: var(--fb-canvas);
}
html.dark body[data-page="home"],
html.dark body[data-page="jobs"],
html.dark body[data-page="messaging"],
html.dark body[data-page="network"],
html.dark body[data-page="notifications"],
html.dark body[data-page="profile"],
html.dark body[data-page="settings"],
html.dark body[data-page="settings-security"] {
  --fb-canvas: #18191A;
  --fb-surface: #242526;
  --fb-text: #E4E6EB;
  --fb-secondary: #B0B3B8;
  --fb-hover: #3A3B3C;
  --fb-chip: #3A3B3C;
  --fb-unread: rgba(122, 155, 255, .12);
  --fb-tint: rgba(122, 155, 255, .18);
  --fb-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

body[data-page="home"] .card,
body[data-page="jobs"] .card,
body[data-page="messaging"] .card,
body[data-page="network"] .card,
body[data-page="notifications"] .card,
body[data-page="profile"] .card,
body[data-page="settings"] .card,
body[data-page="settings-security"] .card {
  background: var(--fb-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--fb-shadow);
}

/* Section heading: a real heading, the way Facebook sets "New" and
   "Earlier" — not a micro-caps label. */
body[data-page="notifications"] .fi-notif-day {
  top: 57px;
  padding: 16px 16px 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fb-text);
  background: var(--fb-surface);
  border-bottom: 0;
}

/* Rows: Facebook's proportions — a 56px avatar, 15px sentence, a rounded
   hover plate inset from the card edge, and no divider lines. */
body[data-page="notifications"] .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 0;
}
body[data-page="notifications"] .fi-notif-row {
  gap: 12px;
  align-items: center;
  margin: 0 8px;
  padding: 8px;
  border-radius: 8px;
}
body[data-page="notifications"] .fi-notif-row:hover {
  background: var(--fb-hover);
}
body[data-page="notifications"] .fi-notif-row.notif-unread {
  background: var(--fb-unread);
  box-shadow: none;
}
body[data-page="notifications"] .fi-notif-row.notif-unread:hover {
  background: var(--fb-unread);
  filter: brightness(.97);
}
body[data-page="notifications"] .fi-notif-avatar,
body[data-page="notifications"] .fi-notif-avatar .avatar,
body[data-page="notifications"] .fi-notif-avatar img {
  width: 56px;
  height: 56px;
}
body[data-page="notifications"] .fi-notif-kind {
  width: 28px;
  height: 28px;
  right: -3px;
  bottom: -3px;
  font-size: 12px;
  box-shadow: 0 0 0 2px var(--fb-surface);
}
body[data-page="notifications"] .fi-notif-text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--fb-text);
}
body[data-page="notifications"] .fi-notif-time {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-secondary);
}
body[data-page="notifications"] .notif-unread .fi-notif-time {
  color: #2F5BEA;
}
body[data-page="notifications"] .fi-notif-row .fi-notif-dot {
  width: 12px;
  height: 12px;
}

/* Filter pills, Facebook's flavour: grey by default, tinted blue when on */
body[data-page="jobs"] .chip,
body[data-page="notifications"] .chip {
  border: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fb-text);
  background: var(--fb-chip);
}
body[data-page="jobs"] .chip:hover,
body[data-page="notifications"] .chip:hover { filter: brightness(.95); }
body[data-page="jobs"] .chip.is-on,
body[data-page="notifications"] .chip.is-on {
  background: var(--fb-tint);
  color: #2F5BEA;
}
html.dark body[data-page="jobs"] .chip.is-on,
html.dark body[data-page="notifications"] .chip.is-on { color: #7A9BFF; }

/* Rails and headings pick up the same type colours */
body[data-page="notifications"] .side-link { border-radius: 8px; font-size: 15px; }
body[data-page="notifications"] .side-link.is-active { background: var(--fb-tint); }
html.dark body[data-page="notifications"] .side-link.is-active { background: rgba(122, 155, 255, .15); }
body[data-page="notifications"] h2 { color: var(--fb-text); }
body[data-page="notifications"] .fi-notif-summary dd { color: var(--fb-text); }
body[data-page="notifications"] .fi-notif-summary dt { color: var(--fb-secondary); }

/* Footer link: Facebook's full-width "See previous notifications" */
body[data-page="notifications"] section.card > button:last-child {
  border-top: 0;
  margin: 4px 8px 8px;
  width: calc(100% - 16px);
  border-radius: 8px;
  background: var(--fb-chip);
  color: var(--fb-text);
  font-size: 15px;
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
}
body[data-page="notifications"] section.card > button:last-child:hover { filter: brightness(.95); }

/* --- Profile and Settings: Facebook's surface --------------------------- */

/* Profile ---------------------------------------------------------------- */

/* Facebook gives the cover far more room than a banner strip, and hangs the
   picture off its lower edge. */
body[data-page="profile"] .media-plate {
  height: 240px;
}
@media (min-width: 1024px) {
  body[data-page="profile"] .media-plate { height: 316px; }
}

body[data-page="profile"] .profile-avatar-hero,
body[data-page="profile"] #profile-avatar,
body[data-page="profile"] [data-profile-hero-avatar] {
  border-width: 5px !important;
  box-shadow: none !important;
}
@media (min-width: 1024px) {
  body[data-page="profile"] .profile-avatar-hero,
  body[data-page="profile"] #profile-avatar,
  body[data-page="profile"] [data-profile-hero-avatar] {
    width: 168px !important;
    height: 168px !important;
    min-width: 168px !important;
    min-height: 168px !important;
    max-width: 168px !important;
    max-height: 168px !important;
  }
}

body[data-page="profile"] #profile-name {
  font-size: 24px;
  line-height: 1.25;
  color: var(--fb-text);
}
@media (min-width: 1024px) {
  body[data-page="profile"] #profile-name { font-size: 32px; }
}
body[data-page="profile"] .fi-profile-identity > p { color: var(--fb-secondary); }

/* On a wide screen the name sits on the left and the actions on the right,
   sharing one row, the way a Facebook profile header reads. */
@media (min-width: 1024px) {
  body[data-page="profile"] .fi-profile-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 24px;
  }
  body[data-page="profile"] .fi-profile-avatar-row { grid-column: 1 / -1; }
  body[data-page="profile"] .fi-profile-identity { grid-column: 1; grid-row: 2; }
  body[data-page="profile"] .fi-profile-actions { grid-column: 2; grid-row: 2; margin-top: 0; }
  body[data-page="profile"] .fi-profile-services { grid-column: 1 / -1; }
}

/* Facebook's secondary buttons are grey, not outlined */
body[data-page="profile"] .btn-outline,
body[data-page="profile"] .btn-neutral {
  background: var(--fb-chip);
  border-color: transparent;
  color: var(--fb-text);
}
body[data-page="profile"] .btn-outline:hover,
body[data-page="profile"] .btn-neutral:hover { filter: brightness(.95); }

body[data-page="profile"] h2 { color: var(--fb-text); }

/* Settings --------------------------------------------------------------- */

body[data-page="settings"] h2.text-\[22px\],
body[data-page="settings-security"] h2.text-\[22px\] {
  font-size: 26px;
  color: var(--fb-text);
}

/* Section titles sit inside the white card rather than on a grey strip */
body[data-page="settings"] section.card > h3,
body[data-page="settings-security"] section.card > h3 {
  background: var(--fb-surface);
  border-bottom: 1px solid rgb(var(--line));
  padding: 14px 16px;
  font-size: 17px;
  color: var(--fb-text);
}

/* Rows take Facebook's inset hover plate instead of a full-bleed highlight */
body[data-page="settings"] .settings-row,
body[data-page="settings-security"] .settings-row {
  margin: 4px 8px;
  padding: 12px;
  border-radius: 8px;
  border-bottom: 0;
}
body[data-page="settings"] .settings-row:hover,
body[data-page="settings-security"] .settings-row:hover {
  background: var(--fb-hover);
}
body[data-page="settings"] .settings-row h4,
body[data-page="settings-security"] .settings-row h4 { color: var(--fb-text); }
body[data-page="settings"] .settings-row p,
body[data-page="settings-security"] .settings-row p { color: var(--fb-secondary); }

/* The rail's own header strip goes white, and the active section takes
   Facebook's blue tint */
body[data-page="settings"] aside .bg-raised,
body[data-page="settings-security"] aside .bg-raised {
  background: var(--fb-surface);
}
body[data-page="settings"] .side-link,
body[data-page="settings-security"] .side-link {
  border-radius: 8px;
  font-size: 15px;
}
body[data-page="settings"] .side-link.is-active,
body[data-page="settings-security"] .side-link.is-active {
  background: var(--fb-tint);
}
html.dark body[data-page="settings"] .side-link.is-active,
html.dark body[data-page="settings-security"] .side-link.is-active {
  background: rgba(122, 155, 255, .18);
}

/* --- book spines (library) ---------------------------------------------- */
.book-cover{
  border-radius: 3px 8px 8px 3px;
  box-shadow: -4px 5px 12px rgb(16 24 40 / .18);
  position: relative;
  overflow: hidden;
}
.book-cover::before{
  content:''; position:absolute; top:0; bottom:0; left:3px; width:3px;
  background: rgb(255 255 255 / .32);
}

/* --- media placeholder that reads correctly in both themes -------------- */
.media-plate{ background: linear-gradient(135deg,#dbe6ff,#b9cbfb); color:#1e3a8a; }
html.dark .media-plate{ background: linear-gradient(135deg,#1c2a4e,#0f1930); color: rgb(var(--brand)); }

/* --- utilities ----------------------------------------------------------- */
/* component classes set `display`, so Tailwind's .hidden needs to win back */
.side-link.hidden, .nav-item.hidden, .count-link.hidden,
.chip.hidden, .btn.hidden, .action-btn.hidden, .top-link.hidden,
.icon-btn.hidden, .avatar.hidden,
.msg-verse-modal.hidden, .msg-lightbox.hidden, .msg-emoji-picker.hidden{ display:none !important; }

/* The same applies to the responsive variants. `.icon-btn` and `.md\:hidden`
   have equal specificity and this file loads last, so without these an
   element marked `md:hidden` stayed visible on desktop — which is why the
   header's mobile search button and the conversation back arrow both showed
   up alongside the layout they were meant to replace. */
@media (min-width: 640px){
  .side-link.sm\:hidden, .nav-item.sm\:hidden, .count-link.sm\:hidden,
  .chip.sm\:hidden, .btn.sm\:hidden, .action-btn.sm\:hidden, .top-link.sm\:hidden,
  .icon-btn.sm\:hidden, .avatar.sm\:hidden{ display:none; }
}
@media (min-width: 768px){
  .side-link.md\:hidden, .nav-item.md\:hidden, .count-link.md\:hidden,
  .chip.md\:hidden, .btn.md\:hidden, .action-btn.md\:hidden, .top-link.md\:hidden,
  .icon-btn.md\:hidden, .avatar.md\:hidden{ display:none; }
}
@media (min-width: 1024px){
  .side-link.lg\:hidden, .nav-item.lg\:hidden, .count-link.lg\:hidden,
  .chip.lg\:hidden, .btn.lg\:hidden, .action-btn.lg\:hidden, .top-link.lg\:hidden,
  .icon-btn.lg\:hidden, .avatar.lg\:hidden{ display:none; }
}

/* The `hidden` attribute is the plainest way to hide a region, but Tailwind's
   preflight declares it at the same specificity as a display utility, so a
   `flex` container ignored it. Nothing should out-rank an explicit hidden. */
[hidden]{ display:none !important; }

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.skeleton{
  background: linear-gradient(90deg, rgb(var(--line) / .5) 25%, rgb(var(--line) / .9) 37%, rgb(var(--line) / .5) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer{ 0%{ background-position:100% 0 } 100%{ background-position:0 0 } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- messaging ----------------------------------------------------------- */
/* The conversation screen is the one page that fills the viewport instead of
   scrolling with it, so its height is expressed here rather than as an
   arbitrary Tailwind value repeated across three breakpoints. The subtractions
   are the sticky header (56px), the mobile tab bar (4rem, hidden from lg) and
   the page's own vertical padding (2.5rem, applied from sm). */
.msg-shell{
  display: flex;
  min-height: 360px;
  height: calc(100dvh - 56px - 4rem);
}
@media (min-width: 640px){ .msg-shell{ height: calc(100dvh - 56px - 4rem - 2.5rem); } }
@media (min-width: 1024px){ .msg-shell{ height: calc(100dvh - 56px - 2.5rem); } }

/* conversation row in the inbox */
.msg-thread{
  display:flex; gap:12px; width:calc(100% - 16px); text-align:left; padding:10px 12px;
  margin: 2px 8px; border-radius: 12px;
  border-left: none; transition: background .12s ease;
}
.msg-thread:hover{ background: rgb(var(--raised)); }
.msg-thread.is-active{ background: rgba(47, 91, 234, 0.1); }
html.dark .msg-thread.is-active{ background: rgba(47, 91, 234, 0.2); }
.msg-thread.is-unread .msg-thread__name,
.msg-thread.is-unread .msg-thread__preview{ color: rgb(var(--ink)); font-weight:700; }

/* Facebook online presence indicator */
.msg-dot{
  position: absolute; bottom: 1px; right: 1px;
  width: 13px; height: 13px; border-radius: 999px;
  background: #31A24C; border: 2.5px solid rgb(var(--surface));
}

/* Facebook Messenger message bubbles */
:root {
  --msg-mine-bg: #2F5BEA;
}
.msg-bubble{
  position: relative;
  max-width: min(78%, 34rem); padding:9px 14px; border-radius:18px;
  font-size:14.5px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap;
  background: #F0F2F5; color: #050505;
  border: none; border-bottom-left-radius:4px;
  transition: background .15s ease, color .15s ease;
}
html.dark .msg-bubble{
  background: #3A3B3C; color: #E4E6EB;
}
.msg-bubble.is-mine{
  background: var(--msg-mine-bg, #2F5BEA); color:#fff !important;
  border-bottom-left-radius:18px; border-bottom-right-radius:4px;
}
html.dark .msg-bubble.is-mine{ color:#fff !important; }
.msg-bubble a{ text-decoration: underline; }

/* Message row with Facebook action bar on hover/touch */
.msg-row-wrap{
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.msg-row-wrap.is-mine{ justify-content: flex-end; }
.msg-bubble-group{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 82%;
}
.msg-row-wrap.is-mine .msg-bubble-group{ flex-direction: row-reverse; }

.msg-bubble-actions{
  opacity: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: opacity .15s ease, transform .15s ease;
  transform: scale(0.92);
}
.msg-row-wrap:hover .msg-bubble-actions,
.msg-row-wrap:focus-within .msg-bubble-actions,
.msg-row-wrap.show-actions .msg-bubble-actions{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.msg-action-btn{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgb(var(--muted));
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.msg-action-btn:hover{
  background: rgb(var(--raised));
  color: rgb(var(--ink));
  transform: scale(1.1);
}

/* Facebook Reaction Popover */
.msg-reactions-popover{
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  margin-bottom: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  z-index: 40;
  gap: 4px;
  animation: msg-pop .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.msg-row-wrap.is-mine .msg-reactions-popover{ right: 0; }
.msg-row-wrap:not(.is-mine) .msg-reactions-popover{ left: 0; }
.msg-reactions-popover.is-open{ display: flex; }
.msg-reactions-popover button{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.msg-reactions-popover button:hover{ transform: scale(1.35) translateY(-3px); }

@keyframes msg-pop{
  from{ opacity: 0; transform: scale(0.85) translateY(4px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}

/* Facebook Attached Reaction Pill on Bubble */
.msg-reaction-pill{
  position: absolute;
  bottom: -9px;
  right: 10px;
  background: #ffffff;
  color: #050505;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: transform .12s ease;
  user-select: none;
  z-index: 10;
}
html.dark .msg-reaction-pill{
  background: #242526;
  color: #e4e6eb;
  border-color: rgba(255,255,255,0.12);
}
.msg-row-wrap.is-mine .msg-reaction-pill{ right: auto; left: 10px; }
.msg-reaction-pill:hover{ transform: scale(1.15); }

/* Quoted Reply inside Message Bubble */
.msg-reply-quote{
  font-size: 12px;
  opacity: 0.88;
  border-left: 3px solid currentColor;
  padding-left: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Quoted Reply banner above composer */
.msg-composer-reply{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: rgb(var(--raised));
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgb(var(--line));
  font-size: 12.5px;
  color: rgb(var(--muted));
}
.msg-composer-reply strong{ color: rgb(var(--ink)); }

/* In-conversation Search Bar & Highlight */
.msg-search-highlight{
  background: #fde047 !important;
  color: #0b1120 !important;
  border-radius: 3px;
  padding: 0 2px;
}
.msg-bubble.is-search-active{
  outline: 2px solid #2F5BEA;
  outline-offset: 2px;
}

/* ── Useful Messaging Features: Emoji Picker, Scripture Share, Lightbox ── */

/* Composer Emoji Picker */
.msg-emoji-picker{
  position: absolute;
  bottom: 100%;
  left: 12px;
  margin-bottom: 8px;
  width: 280px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 10px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: msg-pop .18s ease-out;
}
.msg-emoji-picker.hidden{
  display: none !important;
}
.msg-emoji-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.msg-emoji-btn{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.msg-emoji-btn:hover{
  background: rgb(var(--raised));
  transform: scale(1.2);
}

/* Scripture Quick Share Modal */
.msg-verse-modal{
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(11, 17, 32, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: msg-pop .2s ease-out;
}
.msg-verse-modal.hidden{
  display: none !important;
}
.msg-verse-card{
  width: 100%;
  max-width: 480px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.msg-verse-item{
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease;
  text-align: left;
  border: 1px solid transparent;
}
.msg-verse-item:hover{
  background: rgb(var(--raised));
  border-color: rgb(var(--line));
}

/* Image Lightbox */
.msg-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.msg-lightbox.hidden{
  display: none !important;
}
.msg-lightbox img{
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: msg-pop .2s ease-out;
}
.msg-lightbox-close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.msg-lightbox-close:hover{
  background: rgba(255,255,255,0.35);
}

/* Pinned message indicator */
.msg-bubble.is-pinned::before{
  content: '★ Pinned';
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .8;
  margin-bottom: 4px;
}

.msg-day{
  align-self:center; padding:3px 12px; border-radius:999px;
  background: rgb(var(--line) / .6); color: rgb(var(--muted));
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* presence dot on an avatar */
.msg-dot{
  position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:999px;
  background: #16a34a; box-shadow: 0 0 0 2px rgb(var(--surface));
}

/* typing indicator */
.msg-typing{ display:inline-flex; gap:4px; align-items:center; }
.msg-typing span{
  width:6px; height:6px; border-radius:999px; background: rgb(var(--faint));
  animation: msg-typing 1.4s ease-in-out infinite both;
}
.msg-typing span:nth-child(2){ animation-delay:.16s; }
.msg-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes msg-typing{ 0%,80%,100%{ transform:scale(.5); opacity:.5 } 40%{ transform:scale(1); opacity:1 } }

/* Facebook Messenger composer */
.msg-composer{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #F0F2F5;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 8px 4px 14px;
  min-height: 40px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html.dark .msg-composer{
  background: #3A3B3C;
}
.msg-composer:focus-within{
  border-color: #2F5BEA;
  background: rgb(var(--surface));
  box-shadow: 0 0 0 2px rgba(47, 91, 234, 0.15);
}
.msg-composer textarea{
  flex: 1;
  min-height: 22px;
  max-height: 120px;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: rgb(var(--ink));
  font-size: 15px;
  line-height: 1.4;
  padding: 4px 0;
}
.msg-composer textarea::placeholder{
  color: #65676B;
}
html.dark .msg-composer textarea::placeholder{
  color: #B0B3B8;
}

@keyframes fb-call-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 91, 234, 0.5); }
  70% { box-shadow: 0 0 0 22px rgba(47, 91, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 91, 234, 0); }
}
.fb-call-pulsing{
  animation: fb-call-pulse 2s infinite;
  border-radius: 999px;
}

.msg-shell .msg-thread.hidden{ display:none; }

/* Feed videos keep their original portrait, square, or landscape ratio. */
.fi-feed-video,
.fi-video-preview{
  display:block;
  width:100%;
  height:auto;
  max-height:min(76vh, 720px);
  margin-inline:auto;
  object-fit:contain;
  background:#05070a;
}

.blessing-media-tool{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 10px;
  border:1px solid rgb(var(--line)); border-radius:10px; color:rgb(var(--muted));
  font-size:12px; font-weight:650; transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.blessing-media-tool:hover{ background:rgb(var(--raised)); color:rgb(var(--ink)); border-color:rgb(var(--brand) / .45); }
.blessing-media-tool i{ color:rgb(var(--brand)); }
.blessing-media-preview.is-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.blessing-media-preview.is-gallery img{ width:100%; height:180px; object-fit:cover; background:rgb(var(--raised)); }
.blessing-media-preview.is-gallery img:only-child{ grid-column:1 / -1; height:auto; max-height:420px; object-fit:contain; }
.blessing-media-preview.is-video video{ display:block; width:100%; height:auto; max-height:min(70vh,560px); object-fit:contain; background:#05070a; }

/* Compact Library shelf cards. Explicit CSS keeps the fixed book dimensions
   reliable even though these cards are created dynamically after page load. */
/* --- Dedicated Rock-Solid Library Layout System ----------------------- */
.fi-library-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .fi-library-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}
@media (min-width: 1200px) {
  .fi-library-layout {
    grid-template-columns: 280px minmax(0, 1fr) 280px;
  }
}
@media (min-width: 1280px) {
  .fi-library-layout { max-width: 1360px; }
}
@media (min-width: 1536px) {
  .fi-library-layout { max-width: 1440px; }
}

.fi-library-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px;
}
@media (max-width: 899px) {
  .fi-library-sidebar {
    display: none !important;
  }
}

.fi-library-right-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px;
}
@media (max-width: 1199px) {
  .fi-library-right-rail {
    display: none !important;
  }
}

.fi-library-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Shelf Grid */
.fi-library-shelf {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .fi-library-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .fi-library-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .fi-library-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fb-publish-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  background-color: #2F5BEA !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(47, 91, 234, 0.3) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.fb-publish-btn:hover {
  background-color: #166fe5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(47, 91, 234, 0.35) !important;
  transform: translateY(-1px) !important;
}
.fb-publish-btn:active {
  background-color: #1464cc !important;
  transform: translateY(0) !important;
}
.fb-publish-btn i {
  color: #ffffff !important;
  font-size: 13px !important;
}

.fb-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.fb-filter-bar::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .fb-filter-bar {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 8px;
  }
}
.fb-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  text-decoration: none;
}
.fb-filter-chip:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
.fb-filter-chip.is-active {
  background: #E9EFFE;
  color: #2F5BEA;
  border-color: #bad9ff;
}
html.dark .fb-filter-chip {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
html.dark .fb-filter-chip:hover {
  background: #334155;
  color: #f8fafc;
}
html.dark .fb-filter-chip.is-active {
  background: rgba(47, 91, 234, 0.2);
  color: #60a5fa;
  border-color: rgba(47, 91, 234, 0.4);
}

.fb-library-card {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.fb-library-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}
html.dark .fb-library-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
html.dark .fb-library-card:hover {
  border-color: #475569;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.fb-library-cover-box {
  background: linear-gradient(180deg, #F0F2F5 0%, #E4E6EB 100%);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
html.dark .fb-library-cover-box {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.fb-book-3d-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.fb-library-card:hover .fb-book-3d-wrap {
  transform: scale(1.05);
}
.fb-book-3d-wrap img {
  max-height: 180px;
  max-width: 135px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px 6px 6px 2px;
  filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.28));
}

/* CSS fallback 3D book when no thumbnail is uploaded */
.fb-book-fallback {
  width: 124px;
  height: 178px;
  display: flex;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  background: #14532d;
}
.fb-book-spine {
  width: 16px;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 0;
  box-shadow: inset -2px 0 5px rgba(0,0,0,0.6);
  flex-shrink: 0;
}
.fb-spine-line {
  width: 100%;
  height: 2px;
  background: #eab308;
  opacity: 0.85;
}
.fb-book-front {
  flex: 1;
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px 12px;
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.35);
}
.fb-book-badge {
  border: 1px solid #eab308;
  padding: 7px 5px;
  text-align: center;
  width: 92%;
  background: rgba(20, 83, 45, 0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.fb-book-author {
  color: #facc15;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fb-book-divider {
  width: 100%;
  height: 1px;
  background: #eab308;
  margin: 3px 0;
  opacity: 0.85;
}
.fb-book-title {
  color: #ffffff;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}

/* Card details area */
.fb-card-body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fb-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.55;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(2 * 1.55em);
  overflow: hidden;
  overflow-wrap: break-word;
  transition: color 0.15s ease;
}
.fb-library-card:hover .fb-card-title {
  color: #2F5BEA;
}
html.dark .fb-card-title {
  color: #f8fafc;
}
html.dark .fb-library-card:hover .fb-card-title {
  color: #60a5fa;
}
.fb-card-author {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-card-author strong {
  color: #0f172a;
  font-weight: 600;
}
html.dark .fb-card-author strong {
  color: #e2e8f0;
}
.fb-card-translator {
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .fb-card-translator {
  color: #94a3b8;
}
.fb-format-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: #E9EFFE;
  color: #2F5BEA;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 2px;
  margin-bottom: 10px;
}
html.dark .fb-format-pill {
  background: rgba(47, 91, 234, 0.2);
  color: #60a5fa;
}

/* Khmer sits on a taller line box than Latin: Koh Santepheap stacks
   subscript consonants below the baseline and vowel signs above it, so a
   default line box clips them — visibly so inside the cards, which hide
   their overflow. */
body[data-page="library"] .font-khmer:not(.truncate):not(.whitespace-nowrap) {
  line-height: 1.65;
}

.fb-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html.dark .fb-card-footer {
  border-top-color: #334155;
}
.fb-download-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  background: transparent;
  border: none;
}
.fb-download-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
html.dark .fb-download-btn {
  color: #94a3b8;
}
html.dark .fb-download-btn:hover {
  background: #334155;
  color: #f8fafc;
}
.fb-download-btn i {
  color: #2F5BEA;
  font-size: 13px;
}

.fb-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.fb-action-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fb-action-icon-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
html.dark .fb-action-icon-btn {
  color: #94a3b8;
}
html.dark .fb-action-icon-btn:hover {
  background: #334155;
  color: #f8fafc;
}
.fb-action-icon-btn.is-saved {
  color: #2F5BEA !important;
}
.fb-action-icon-btn.is-edit:hover {
  color: #2F5BEA !important;
  background: rgba(47, 91, 234, 0.1) !important;
}
.fb-action-icon-btn.is-delete:hover {
  color: #ef4444 !important;
}

.fi-media-grid{
  display:grid; gap:20px; padding-bottom:4px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-items:start;
}
@media (max-width:640px){
  .fi-media-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); gap:16px; }
}

/* wide 16:9 sermon / video card */
.fi-video-card{ width:100%; min-width:0; }
.fi-video-cover{
  position:relative; display:block; width:100%; aspect-ratio:16 / 9;
  border:0; padding:0; border-radius:12px; overflow:hidden; cursor:pointer;
  background:linear-gradient(150deg,#1d4ed8,#172554);
}
.fi-video-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
.fi-video-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center; padding:14px;
  color:#fff; font-family:var(--font-serif,Georgia,serif); font-weight:600; font-size:13px; line-height:1.3;
}
.fi-media-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgb(4 8 20 / .30); opacity:0; transition:opacity .18s ease;
}
.fi-video-cover:hover .fi-media-play,
.fi-video-cover:focus-visible .fi-media-play,
.fi-audio-art:hover .fi-media-play,
.fi-audio-art:focus-visible .fi-media-play{ opacity:1; }
@media (hover:none){ .fi-media-play{ opacity:1; background:rgb(4 8 20 / .16); } }
.fi-media-play span{
  width:54px; height:54px; border-radius:999px; display:grid; place-items:center;
  background:rgb(255 255 255 / .95); color:#0b1120; font-size:17px;
  box-shadow:0 8px 22px rgb(4 8 20 / .38);
}
.fi-media-play span i{ margin-left:3px; }
.fi-media-badge{
  position:absolute; right:8px; bottom:8px; z-index:2;
  background:rgb(4 8 20 / .78); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px;
}

/* audio / music card */
.fi-audio-card{ width:100%; min-width:0; }
.fi-audio-art{
  position:relative; display:block; width:100%; aspect-ratio:1 / 1;
  border:0; padding:0; border-radius:12px; overflow:hidden; cursor:pointer;
  background:linear-gradient(150deg,#7c3aed,#3b1d94);
}
.fi-audio-art img{ display:block; width:100%; height:100%; object-fit:cover; }

/* book covers keep their shape, centred inside a grid cell */
.fi-media-grid .fi-resource-card{ flex:none; width:100%; min-width:0; }
.fi-media-grid .fi-resource-cover{ width:154px; height:196px; margin-inline:auto; }
@media (max-width:560px){
  .fi-media-grid .fi-resource-cover{ width:142px; height:181px; }
}

/* --- Library: toolbar, shelf states and card refinements ---------------- */

.fi-library-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fi-library-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.fi-library-search > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
}
.fi-library-search input {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 36px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fi-library-search input::placeholder { color: #94a3b8; text-overflow: ellipsis; }
.fi-library-search input:focus {
  border-color: #2F5BEA;
  box-shadow: 0 0 0 3px rgba(47, 91, 234, .15);
}
.fi-library-search button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.fi-library-search button:hover { color: rgb(var(--ink)); background: rgb(var(--raised)); }

.fi-library-sort {
  height: 40px;
  padding: 0 32px 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.2 1.8 4l.9-.9L6 6.4l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.fi-library-sort:focus { border-color: #2F5BEA; box-shadow: 0 0 0 3px rgba(47, 91, 234, .15); }

.fi-library-count {
  font-size: 12.5px;
  color: rgb(var(--muted));
  font-variant-numeric: tabular-nums;
}

/* Loading: shaped placeholders rather than a line of text, so the shelf does
   not jump when the resources arrive. */
.fb-skeleton-card {
  border-radius: 12px;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  overflow: hidden;
}
.fb-skeleton-card > span {
  display: block;
  background: linear-gradient(90deg, rgb(var(--raised)) 25%, rgb(var(--line)) 37%, rgb(var(--raised)) 63%);
  background-size: 400% 100%;
  animation: fi-shimmer 1.4s ease-in-out infinite;
}
.fb-skeleton-card .fb-skeleton-cover { height: 220px; }
.fb-skeleton-card .fb-skeleton-line { height: 12px; border-radius: 6px; margin: 14px 16px 0; }
.fb-skeleton-card .fb-skeleton-line.is-short { width: 55%; margin-bottom: 18px; }
@keyframes fi-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .fb-skeleton-card > span { animation: none; }
}

.fi-library-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 24px;
  border: 1px dashed rgb(var(--line));
  border-radius: 14px;
  background: rgb(var(--surface));
}
.fi-library-empty i { font-size: 26px; color: #cbd5e1; }
.fi-library-empty h3 { font-size: 15px; font-weight: 700; color: rgb(var(--ink)); margin-top: 6px; }
.fi-library-empty p { font-size: 13px; color: rgb(var(--muted)); max-width: 42ch; line-height: 1.6; }

.fi-load-more {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 4px;
  height: 40px;
  padding: 0 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.fi-load-more:hover { background: rgb(var(--raised)); border-color: #cbd5e1; }

/* Cards: keyboard focus, and full-bleed covers for the formats that have a
   real picture — a sermon should look like a sermon, not a book. */
.fb-library-card:focus-within {
  border-color: #2F5BEA;
  box-shadow: 0 0 0 3px rgba(47, 91, 234, .18);
}
.fb-library-card .fb-action-icon-btn:focus-visible,
.fb-library-card .fb-download-btn:focus-visible {
  outline: 2px solid #2F5BEA;
  outline-offset: 2px;
}
.fb-library-cover-box.is-media {
  height: auto;
  padding: 0;
  display: block;
  background: none;
}
.fb-library-cover-box.is-media .fi-cover-media {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(150deg, #1d4ed8, #172554);
}
/* On a mixed shelf every cover is the same height, so the grid reads as one
   row of resources rather than a ragged pile. A shelf filtered to one medium
   gets that medium's natural ratio instead — 16:9 for sermons, square for
   audio. */
.fb-library-cover-box.is-media .fi-cover-media { height: 220px; }
.fb-library-cover-box.is-audio .fi-cover-media { background: linear-gradient(150deg, #7c3aed, #3b1d94); }
.fi-library-shelf.is-video-shelf .fb-library-cover-box.is-video .fi-cover-media { height: auto; aspect-ratio: 16 / 9; }
.fi-library-shelf.is-audio-shelf .fb-library-cover-box.is-audio .fi-cover-media { height: auto; aspect-ratio: 1 / 1; }
.fb-library-cover-box.is-media .fi-cover-fallback .fi-cover-fallback-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-library-cover-box.is-media .fi-cover-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-library-cover-box.is-media .fi-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* Format badge, coloured by what the resource actually is */
.fb-format-pill { gap: 5px; letter-spacing: .04em; }
.fb-format-pill i { font-size: 10px; }
.fb-format-pill.is-video { background: #FFE9E9; color: #DC2626; }
.fb-format-pill.is-audio { background: #F3E8FF; color: #7C3AED; }
.fb-format-pill.is-image { background: #E6FBF4; color: #0F766E; }
.fb-format-pill.is-zip   { background: #EEF2F7; color: #475569; }
html.dark .fb-format-pill.is-video { background: rgba(220, 38, 38, .18); color: #FCA5A5; }
html.dark .fb-format-pill.is-audio { background: rgba(124, 58, 237, .2); color: #C4B5FD; }
html.dark .fb-format-pill.is-image { background: rgba(15, 118, 110, .2); color: #5EEAD4; }
html.dark .fb-format-pill.is-zip   { background: rgba(71, 85, 105, .3); color: #CBD5E1; }

/* One quiet line for language and category, so a card says where a resource
   belongs without shouting. */
.fi-library-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fi-library-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgb(var(--line));
}
.fi-library-stats > div:first-child { border-top: 0; padding-top: 0; }
.fi-library-stats dt { font-size: 13px; color: rgb(var(--muted)); }
.fi-library-stats dd { font-size: 14px; font-weight: 700; color: rgb(var(--ink)); font-variant-numeric: tabular-nums; }

/* A resource with no translator still reserves that line, so the format
   badges line up across a row. */
.fb-card-translator-gap {
  height: 19px;
  margin-bottom: 6px;
}

.fb-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgb(var(--muted));
}
.fb-card-meta .fb-meta-dot { opacity: .5; }

/* --- in-app player ------------------------------------------------------ */
.fi-player-backdrop{
  position:fixed; inset:0; z-index:260; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgb(4 8 20 / .84); backdrop-filter:blur(6px);
}
.fi-player-shell{
  width:100%; max-width:960px; max-height:92vh; overflow:auto;
  background:rgb(var(--surface)); color:rgb(var(--ink));
  border-radius:16px; box-shadow:0 26px 70px rgb(4 8 20 / .55);
}
.fi-player-shell.is-audio{ max-width:420px; }
.fi-player-head{
  display:flex; align-items:flex-start; gap:12px; justify-content:space-between;
  padding:14px 16px 12px;
}
.fi-player-video{
  display:block; width:100%; max-height:min(72vh,620px);
  background:#05070a; object-fit:contain;
}
.fi-player-art{
  width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block;
  background:linear-gradient(150deg,#7c3aed,#3b1d94);
}
.fi-player-art-fallback{
  width:100%; aspect-ratio:1 / 1; display:grid; place-items:center; color:#fff; font-size:46px;
  background:linear-gradient(150deg,#7c3aed,#3b1d94);
}
.fi-player-body{ padding:16px; }
.fi-seek{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px;
  background:rgb(var(--line)); cursor:pointer; outline:none;
}
.fi-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:999px;
  background:rgb(var(--brand)); border:2px solid rgb(var(--surface)); box-shadow:0 1px 4px rgb(4 8 20 / .35);
}
.fi-seek::-moz-range-thumb{
  width:14px; height:14px; border:2px solid rgb(var(--surface)); border-radius:999px;
  background:rgb(var(--brand));
}
.fi-player-times{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:11.5px; color:rgb(var(--muted)); font-variant-numeric:tabular-nums;
}
.fi-player-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:12px; }
.fi-player-btn{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  color:rgb(var(--muted)); background:transparent; border:0; cursor:pointer; font-size:15px;
}
.fi-player-btn:hover{ background:rgb(var(--raised)); color:rgb(var(--ink)); }
.fi-player-btn:disabled{ opacity:.35; cursor:default; background:transparent; }
.fi-player-btn.is-main{
  width:56px; height:56px; font-size:19px;
  background:rgb(var(--brand)); color:#fff; box-shadow:0 8px 20px rgb(4 8 20 / .25);
}
.fi-player-btn.is-main:hover{ background:rgb(var(--brand)); color:#fff; filter:brightness(1.06); }

/* auto-thumbnail preview in the publish dialog */
.fi-thumb-preview{
  width:132px; aspect-ratio:16 / 9; border-radius:8px; object-fit:cover;
  border:1px solid rgb(var(--line)); background:rgb(var(--raised));
}

body.fi-auth-locked, body.fi-logged-out{ overflow:hidden !important; background:#f0f2f5 !important; }
body.fi-auth-locked > header,
body.fi-auth-locked > #main,
body.fi-auth-locked > nav,
body.fi-auth-locked > aside,
body.fi-auth-locked > .fi-tab-bar,
body.fi-auth-locked > [data-menu-root],
body.fi-auth-locked > #story-canvas,
body.fi-auth-locked [data-modal],
body.fi-logged-out > header,
body.fi-logged-out > #main,
body.fi-logged-out > nav,
body.fi-logged-out > aside,
body.fi-logged-out > .fi-tab-bar,
body.fi-logged-out > [data-menu-root],
body.fi-logged-out > #story-canvas,
body.fi-logged-out [data-modal]{
  display:none !important;
}
.fi-auth{
  position:fixed; inset:0; z-index:500; overflow:auto;
  color:#111827; background:#f0f2f5;
}
.fi-auth.is-locked{
  position:fixed !important; inset:0 !important; z-index:99999 !important;
  background:#f0f2f5 !important;
}
.fi-auth.is-locked .fi-auth__close{ display:none !important; }
.dark body.fi-auth-locked, .dark body.fi-logged-out, .dark .fi-auth.is-locked{ background:#0f172a !important; color:#f8fafc !important; }
.dark .fi-auth.is-locked .fi-auth__card{ background:#1e293b !important; border-color:#334155 !important; color:#f8fafc !important; }
.dark .fi-auth.is-locked .fi-auth__intro h1{ color:#f8fafc !important; }
.dark .fi-auth.is-locked .fi-auth__intro p{ color:#94a3b8 !important; }
.fi-auth.hidden{ display:none; }
.fi-auth__page{ min-height:100dvh; display:flex; flex-direction:column; }
.fi-auth__brand{
  width:100%; max-width:1128px; margin:0 auto; padding:22px 24px;
  display:flex; align-items:center; gap:7px; color:#2f5bea;
  font-size:30px; line-height:1; font-weight:800; letter-spacing:-.035em;
}
.fi-auth__brand i{ font-size:21px; }
.fi-auth__main{
  width:100%; max-width:1128px; margin:0 auto; padding:12px 24px 44px;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.fi-auth__intro{ max-width:760px; margin:0 auto 38px; text-align:center; }
.fi-auth__intro h1{
  color:#111827; font-family:Georgia,Cambria,"Times New Roman",serif;
  font-size:clamp(34px,5vw,52px); line-height:1.04; font-weight:700; letter-spacing:-.025em;
}
.fi-auth__intro p{ margin-top:22px; color:#4b5563; font-size:clamp(17px,2vw,22px); line-height:1.55; }
.fi-auth__card{
  position:relative; width:100%; max-width:640px; padding:52px;
  border:1px solid rgba(17,24,39,.05); border-radius:18px; background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.10),0 2px 5px rgba(15,23,42,.04);
  overflow:hidden;
}
.fi-auth__card h2{ font-size:31px; line-height:1.2; font-weight:800; letter-spacing:-.025em; }
.fi-auth__subtitle{ margin-top:9px; color:#6b7280; font-size:18px; line-height:1.5; }
.fi-auth__close{
  position:absolute; right:18px; top:18px; width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; color:#6b7280; background:transparent;
}
.fi-auth.is-locked .fi-auth__close{ display:none; }
.fi-auth__close:hover{ color:#111827; background:#f3f4f6; }
.fi-auth__form{ margin-top:31px; display:grid; gap:17px; }
.fi-auth__form input:not([type="checkbox"]){
  width:100%; height:58px; padding:0 18px; border:1px solid #667085; border-radius:7px;
  color:#111827; background:#fff; font-size:18px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fi-auth__form input:not([type="checkbox"])::placeholder{ color:#98a2b3; }
.fi-auth__form input:not([type="checkbox"]):focus{ border-color:#2f5bea; box-shadow:0 0 0 3px rgba(47, 91, 234,.14); }
.fi-auth__password{ position:relative; display:block; }
.fi-auth__password input{ padding-right:54px !important; }
.fi-auth__password button{
  position:absolute; right:0; top:0; width:52px; height:58px; display:grid; place-items:center;
  color:#667085; background:transparent; font-size:18px;
}
.fi-auth__options{ display:flex; align-items:center; justify-content:space-between; gap:18px; color:#475467; font-size:16px; }
.fi-auth__options label{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.fi-auth__options input{ width:18px; height:18px; accent-color:#2f5bea; }
.fi-auth__options button,.fi-auth__switch button,.fi-auth__terms a,.fi-auth__back,.fi-auth__text-button{ color:#2f5bea; font-weight:700; }
.fi-auth__options button:hover,.fi-auth__switch button:hover,.fi-auth__terms a:hover,.fi-auth__back:hover,.fi-auth__text-button:hover{ text-decoration:underline; }
.fi-auth__primary,.fi-auth__social{
  min-height:58px; width:100%; border-radius:999px; display:flex; align-items:center;
  justify-content:center; gap:12px; font-size:19px; font-weight:750; transition:.15s ease;
}
.fi-auth__primary{ border:1px solid #2f5bea; color:#fff; background:#2f5bea; }
.fi-auth__primary:hover{ border-color:#1d4ed8; background:#1d4ed8; }
.fi-auth__primary:disabled,.fi-auth__social:disabled,.fi-auth__text-button:disabled{ opacity:.65; cursor:wait; }
.fi-auth__spinner{
  display:none; width:19px; height:19px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:999px; animation:fi-auth-spin .7s linear infinite;
}
.is-busy .fi-auth__spinner{ display:block; }
.fi-auth__social .fi-auth__spinner{
  border:2.5px solid rgba(100, 116, 139, 0.25);
  border-top-color:#1e293b;
  width:20px; height:20px;
}
.fi-auth__social--facebook .fi-auth__spinner{
  border-color:rgba(24, 119, 242, 0.25);
  border-top-color:#1877F2;
}
.fi-auth__social--phone .fi-auth__spinner{
  border-color:rgba(5, 150, 105, 0.25);
  border-top-color:#059669;
}
.fi-auth__social.is-busy svg{ display:none !important; }
.fi-auth__social.is-busy .fi-auth__spinner{ display:block !important; }
@keyframes fi-auth-spin{ to{ transform:rotate(360deg); } }
.fi-auth__divider{ margin:31px 0; display:flex; align-items:center; gap:18px; color:#667085; font-size:16px; }
.fi-auth__social-group{ display:flex; flex-direction:column; gap:10px; width:100%; }
.fi-auth__social{ border:1px solid #d0d5dd; color:#344054; background:#fff; cursor:pointer; }
.fi-auth__social svg{ flex-shrink:0; vertical-align:middle; }
.fi-auth__social:hover{ color:#111827; border-color:#98a2b3; background:#f9fafb; }
.fi-auth__social--facebook{ border-color:#1877F2; color:#1877F2; }
.fi-auth__social--facebook:hover{ border-color:#166fe5; background:#f0f6ff; color:#166fe5; }
.fi-auth__social--phone{ border-color:#059669; color:#059669; }
.fi-auth__social--phone:hover{ border-color:#047857; background:#ecfdf5; color:#059669; }
.fi-auth__google{ width:24px; height:24px; display:grid; place-items:center; color:#4285f4; font-weight:900; font-family:Arial,sans-serif; }

/* ── Auth Loading Overlay ("Going to Faith In") ── */
.fi-auth__loading-overlay{
  position:absolute; inset:0; z-index:40;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  padding:44px 32px;
  animation:fi-auth-fade-in .2s ease-out;
  border-radius:18px;
}
.dark .fi-auth__loading-overlay{
  background:#1e293b;
}
.fi-auth__loading-overlay.hidden{
  display:none !important;
}
.fi-auth__loading-box{
  width:100%; max-width:440px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px;
}
.fi-auth__loading-spinner-ring{
  width:48px; height:48px; border-radius:999px;
  border:3.5px solid #ebedf0;
  border-top-color:#1877f2;
  border-right-color:#1877f2;
  animation:fi-auth-spin .85s linear infinite;
  margin-bottom:4px;
}
.dark .fi-auth__loading-spinner-ring{
  border-color:#334155;
  border-top-color:#3b82f6;
  border-right-color:#3b82f6;
}
.fi-auth__loading-brand-row{
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.fi-auth__loading-brand-name{
  font-size:32px; font-weight:800; color:#1877f2; letter-spacing:-0.02em; line-height:1;
}
.fi-auth__loading-brand-globe{
  width:28px; height:28px; flex-shrink:0;
}
.fi-auth__loading-title{
  font-size:22px; font-weight:800; color:#050505; letter-spacing:-0.02em;
  line-height:1.25; margin:4px 0 0;
}
.dark .fi-auth__loading-title{ color:#f8fafc; }
.fi-auth__loading-desc{
  font-size:14.5px; line-height:1.45; color:#65676b; margin:0; max-width:340px;
}
.dark .fi-auth__loading-desc{ color:#94a3b8; }
.fi-auth__loading-progress-track{
  width:100%; max-width:340px; height:5px; background:#e4e6eb; border-radius:999px;
  overflow:hidden; position:relative; margin:8px 0 4px;
}
.dark .fi-auth__loading-progress-track{ background:#334155; }
.fi-auth__loading-progress-bar{
  position:absolute; top:0; bottom:0; left:0; width:58%;
  background:#1877f2;
  border-radius:999px;
  animation:fi-progress-indeterminate 1.4s ease-in-out infinite;
}
@keyframes fi-progress-indeterminate{
  0% { left:-45%; width:45%; }
  50% { left:25%; width:55%; }
  100% { left:100%; width:45%; }
}
.fi-auth__loading-progress-bar.is-complete{
  animation:none !important;
  left:0 !important; width:100% !important;
  background:#1877f2 !important;
  transition:width .25s ease-out;
}
.fi-auth__loading-status-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:15px; font-weight:600; color:#ffffff;
  background:#1877f2;
  padding:11px 24px; border-radius:8px; margin-top:8px;
  box-shadow:0 2px 6px rgba(24, 119, 242, 0.25);
  user-select:none; cursor:default;
}
.dark .fi-auth__loading-status-btn{
  background:#1877f2; color:#ffffff;
}
.fi-auth__loading-status-icon{
  flex-shrink:0;
}
@keyframes fi-auth-fade-in{
  from { opacity:0; transform:scale(0.98); }
  to { opacity:1; transform:scale(1); }
}

.fi-auth__switch{ margin-top:35px; text-align:center; color:#475467; font-size:17px; }
.fi-auth__names{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fi-auth__terms{ color:#667085; font-size:13px; line-height:1.5; text-align:center; }
.fi-auth__error,.fi-auth__success{ padding:11px 13px; border-radius:8px; font-size:14px; line-height:1.45; }
.fi-auth__error{ color:#b42318; border:1px solid #fecdca; background:#fef3f2; }
.fi-auth__success{ color:#067647; border:1px solid #abefc6; background:#ecfdf3; }
.fi-auth__back{ margin-bottom:23px; display:inline-flex; align-items:center; gap:8px; font-size:14px; }
.fi-auth__verify-icon{
  width:56px; height:56px; margin-bottom:20px; border-radius:999px; display:grid; place-items:center;
  color:#2f5bea; background:#e9effe; font-size:24px;
}
.fi-auth__text-button{ display:block; margin:20px auto 0; font-size:15px; }
.fi-auth__footer{
  width:100%; max-width:1128px; margin:0 auto; padding:21px 24px;
  display:flex; justify-content:center; gap:22px; color:#667085; font-size:13px;
}
.fi-auth__footer a:hover{ color:#2f5bea; text-decoration:underline; }
@media (max-width:767px){
  .fi-auth__brand{ padding:18px 20px; font-size:26px; }
  .fi-auth__main{ padding:8px 14px 32px; justify-content:flex-start; }
  .fi-auth__intro{ margin:18px auto 25px; }
  .fi-auth__intro h1{ font-size:31px; }
  .fi-auth__intro h1 br{ display:none; }
  .fi-auth__intro p{ margin-top:13px; font-size:16px; }
  .fi-auth__card{ padding:30px 22px; border-radius:14px; }
  .fi-auth__card h2{ font-size:27px; }
  .fi-auth__subtitle{ font-size:16px; }
  .fi-auth__form{ margin-top:24px; }
  .fi-auth__form input:not([type="checkbox"]){ height:54px; font-size:16px; }
  .fi-auth__password button{ height:54px; }
  .fi-auth__primary,.fi-auth__social{ min-height:54px; font-size:16px; }
  .fi-auth__names{ grid-template-columns:1fr; }
  .fi-auth__options{ font-size:14px; }
}

/* --- Article Editor Modal ---------------------------------------------- */
.article-editor-modal {
  width: 100%;
  max-width: 960px;
  height: 90vh;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 1px solid #e5e7eb;
}
.article-editor-modal:not(.hidden) {
  display: flex !important;
}
.article-editor-modal.hidden,
.modal.hidden {
  display: none !important;
}
html.dark .article-editor-modal {
  background: #111827;
  border-color: #374151;
}
.article-editor-content::-webkit-scrollbar {
  width: 8px;
}
.article-editor-content::-webkit-scrollbar-track {
  background: transparent;
}
.article-editor-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}
html.dark .article-editor-content::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}
.article-editable:empty:before {
  content: attr(placeholder);
  color: #9ca3af;
  pointer-events: none;
  display: block;
}
.article-editable:focus {
  outline: none;
}
.article-tooltip {
  position: relative;
  display: inline-flex;
}
.article-tooltip .tooltiptext {
  visibility: hidden;
  width: max-content;
  background-color: #374151;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px 8px;
  position: absolute;
  z-index: 50;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  pointer-events: none;
}
.article-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.format-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #6b7280;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.format-btn:hover {
  background-color: #e5e7eb;
  color: #1f2937;
}
html.dark .format-btn:hover {
  background-color: #374151;
  color: #f9fafb;
}
.format-btn.active {
  background-color: #e9effe;
  color: #2f5bea;
  border-color: #cbd8fa;
}
html.dark .format-btn.active {
  background-color: #1e3a8a;
  color: #a3b8f5;
  border-color: #4f76ed;
}

/* Khmer font support and Article formatting */
.font-khmer,
:lang(km),
[lang="km"],
.khmer-text {
  font-family: 'Koh Santepheap', sans-serif !important;
}
.font-serif,
.article-serif,
.article-editable,
#article-headline,
#article-body,
.article-preview-body {
  font-family: 'Lora', 'Koh Santepheap', Georgia, serif;
}
.article-preview-body h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 1.5rem 0 1rem;
  line-height: 1.3;
}
.article-preview-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1.25rem 0 0.75rem;
  line-height: 1.35;
}
.article-preview-body blockquote {
  border-left: 4px solid #2f5bea;
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #4b5563;
}
html.dark .article-preview-body blockquote {
  color: #9ca3af;
  border-color: #4f76ed;
}
.article-preview-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.article-preview-body ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.article-preview-body p {
  margin-bottom: 1.25rem;
  line-height: 1.8;
}
.article-preview-body a {
  color: #2f5bea;
  text-decoration: underline;
}

/* --- multilingual Bible reader ------------------------------------------ */
:root { --bible-reader-size: 18px; }
.fi-bible-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 56px;
}
.fi-bible-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4px 24px;
}
.fi-bible-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: rgb(var(--brand));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fi-bible-hero h1 {
  margin: 0;
  color: rgb(var(--ink));
  font-family: 'Koh Santepheap', 'Merriweather', 'Noto Serif Khmer', Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.16;
}
.fi-bible-hero p {
  max-width: 760px;
  margin: 9px 0 0;
  color: rgb(var(--muted));
  font-size: 15px;
  line-height: 1.7;
}
.fi-bible-hero-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgb(var(--line));
  border-radius: 999px;
  background: rgb(var(--surface));
}
.fi-bible-text-size {
  min-width: 46px;
  color: rgb(var(--muted));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
.fi-bible-controls { padding: 18px; }
.fi-bible-control-grid {
  display: grid;
  grid-template-columns: 1.2fr .72fr 1.35fr 1.35fr;
  gap: 12px;
}
.fi-bible-field { display: grid; gap: 6px; min-width: 0; }
.fi-bible-field > span {
  color: rgb(var(--muted));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fi-bible-field select,
.fi-bible-search input {
  width: 100%;
  min-width: 0;
  height: 43px;
  border: 1px solid rgb(var(--line));
  border-radius: 10px;
  background: rgb(var(--raised));
  color: rgb(var(--ink));
  font-size: 14px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fi-bible-field select { padding: 0 34px 0 12px; }
.fi-bible-field select:focus,
.fi-bible-search input:focus {
  border-color: rgb(var(--brand));
  background: rgb(var(--surface));
  box-shadow: 0 0 0 3px rgb(var(--brand) / .12);
}
.fi-bible-control-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--line));
}
.fi-bible-chapter-nav { display: flex; gap: 8px; }
.fi-bible-search { position: relative; flex: 1; min-width: 170px; }
.fi-bible-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: rgb(var(--faint));
  font-size: 13px;
  pointer-events: none;
}
.fi-bible-search input { padding: 0 14px 0 38px; }
.fi-bible-status {
  min-height: 20px;
  margin: 14px 4px 10px;
  color: rgb(var(--muted));
  font-size: 12.5px;
  font-weight: 600;
}
.fi-bible-reader-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
.fi-bible-panel { min-width: 0; overflow: hidden; }
.fi-bible-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 82px;
  padding: 17px 18px;
  border-bottom: 1px solid rgb(var(--line));
  background: linear-gradient(180deg, rgb(var(--surface)), rgb(var(--raised) / .78));
}
.fi-bible-language {
  display: block;
  margin-bottom: 3px;
  color: rgb(var(--brand));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fi-bible-panel-header h2 {
  margin: 0;
  color: rgb(var(--ink));
  font-family: 'Inter', 'Koh Santepheap', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.fi-bible-verses {
  min-height: 440px;
  padding: 10px 18px 20px;
  background: rgb(var(--surface));
}
.fi-bible-verse {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 18px;
  align-items: start;
  width: 100%;
  gap: 6px;
  padding: 10px 7px;
  border: 0;
  border-bottom: 1px solid rgb(var(--line) / .58);
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--ink));
  font-family: 'Lora', 'Koh Santepheap', Georgia, serif;
  font-size: var(--bible-reader-size);
  line-height: 1.78;
  text-align: left;
  transition: background .15s ease;
}
.fi-bible-verses.is-khmer .fi-bible-verse,
.fi-bible-panel[data-bible-panel="primary"] .fi-bible-verse,
.fi-bible-panel[data-bible-panel="primary"] h2,
.fi-bible-panel[data-bible-panel="primary"] .fi-bible-language {
  font-family: 'Koh Santepheap', sans-serif !important;
  line-height: 2;
}
.fi-bible-verse:hover { background: rgb(var(--raised)); }
.fi-bible-verse[hidden] { display: none; }
.fi-bible-verse sup {
  position: static;
  padding-top: 4px;
  color: rgb(var(--brand));
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.fi-bible-verse > i {
  margin-top: 7px;
  color: rgb(var(--faint));
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s ease;
}
.fi-bible-verse:hover > i,
.fi-bible-verse:focus-visible > i { opacity: 1; }
.fi-bible-attribution {
  min-height: 48px;
  padding: 13px 18px;
  border-top: 1px solid rgb(var(--line));
  background: rgb(var(--raised));
  color: rgb(var(--muted));
  font-size: 11px;
  line-height: 1.55;
}
.fi-bible-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fi-bible-loading { display: grid; gap: 12px; padding: 12px 0; }
.fi-bible-loading span {
  display: block;
  height: 56px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgb(var(--raised)), rgb(var(--line) / .65), rgb(var(--raised)));
  background-size: 220% 100%;
  animation: fi-bible-shimmer 1.35s ease-in-out infinite;
}
.fi-bible-loading span:nth-child(2) { width: 92%; }
.fi-bible-loading span:nth-child(3) { width: 97%; }
.fi-bible-loading span:nth-child(4) { width: 84%; }
@keyframes fi-bible-shimmer { to { background-position: -220% 0; } }
.fi-bible-setup,
.fi-bible-panel-error {
  display: flex;
  min-height: 400px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  color: rgb(var(--muted));
  text-align: center;
}
.fi-bible-setup-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 16px;
  background: rgb(var(--brand-soft));
  color: rgb(var(--brand));
  font-size: 21px;
}
.fi-bible-setup h3 { margin: 0; color: rgb(var(--ink)); font-size: 18px; }
.fi-bible-setup p,
.fi-bible-panel-error p { max-width: 390px; margin: 9px 0 18px; font-size: 13.5px; line-height: 1.65; }
.fi-bible-setup-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.fi-bible-panel-error > i { color: rgb(var(--brand)); font-size: 23px; }
.fi-bible-empty { padding: 50px 15px; color: rgb(var(--muted)); text-align: center; }
.fi-bible-help {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 15px 17px;
  color: rgb(var(--muted));
  font-size: 12.5px;
  line-height: 1.6;
}
.fi-bible-help > i { margin-top: 3px; color: rgb(var(--brand)); }
.fi-bible-help p { margin: 0; }
.fi-bible-help strong { color: rgb(var(--ink)); }

@media (max-width: 900px) {
  .fi-bible-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-bible-reader-grid { grid-template-columns: 1fr; }
  .fi-bible-verses { min-height: 280px; }
}
@media (max-width: 640px) {
  .fi-bible-shell { width: min(100% - 20px, 1180px); padding-top: 12px; }
  .fi-bible-hero { align-items: flex-start; padding-top: 10px; }
  .fi-bible-hero-actions { margin-top: 4px; }
  .fi-bible-hero p { font-size: 13.5px; }
  .fi-bible-controls { padding: 13px; }
  .fi-bible-control-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fi-bible-field:nth-child(n+3) { grid-column: 1 / -1; }
  .fi-bible-control-row { flex-wrap: wrap; }
  .fi-bible-chapter-nav { flex: 1; }
  .fi-bible-chapter-nav .btn { flex: 1; }
  .fi-bible-search { order: 3; flex-basis: 100%; }
  #bible-swap { margin-left: auto; }
  .fi-bible-panel-header { padding: 15px; }
  .fi-bible-verses { padding: 8px 10px 15px; }
  .fi-bible-verse { grid-template-columns: 22px minmax(0, 1fr); padding: 9px 5px; }
  .fi-bible-verse > i { display: none; }
  .fi-bible-setup-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .fi-bible-loading span { animation: none; }
}

/* --- Account menu: Facebook's profile dropdown --------------------------
   Facebook builds this menu out of one shape repeated: a 44px row with a
   grey 36px disc holding the icon, 15px medium label, 8px corners and a
   flat grey hover. The card itself is an 8px white sheet on a deep,
   soft-edged shadow rather than a hairline border. Scoped to the header
   account menu only — every other menu, rail and .side-link elsewhere in
   the app keeps FaithIn's own styling. Icon colours, labels, links and
   order are untouched. */

[data-account-menu] {
  --fb-surface: #FFFFFF;
  --fb-text: #050505;
  --fb-secondary: #65676B;
  --fb-hover: #F2F2F2;
  --fb-press: #E4E6EB;
  --fb-chip: #E4E6EB;
  --fb-line: #CED0D4;
  --fb-tint: #E9EFFE;

  width: 300px;
  padding: 8px;
  background: var(--fb-surface);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .1);
}
html.dark [data-account-menu] {
  --fb-surface: #242526;
  --fb-text: #E4E6EB;
  --fb-secondary: #B0B3B8;
  --fb-hover: #3A3B3C;
  --fb-press: #4E4F50;
  --fb-chip: #3A3B3C;
  --fb-line: #3E4042;
  --fb-tint: rgba(122, 155, 255, .18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);
}

/* Identity block: Facebook sets the name at reading size, the role beneath
   it in secondary grey, and rules it off from the actions. */
[data-account-menu] > .border-b {
  padding: 8px 8px 12px;
  margin-bottom: 8px;
  gap: 12px;
  border-bottom: 1px solid var(--fb-line);
}
[data-account-menu] > .border-b p:first-child {
  font-size: 15px;
  font-weight: 600;
  color: var(--fb-text);
}
[data-account-menu] > .border-b p + p {
  font-size: 13px;
  color: var(--fb-secondary);
}

/* Divider above Sign out */
[data-account-menu] > .border-t {
  margin: 8px 0;
  border-top: 1px solid var(--fb-line);
}

/* The row */
[data-account-menu] .side-link {
  gap: 12px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fb-text);
  transition: background .1s ease;
}
[data-account-menu] .side-link:hover { background: var(--fb-hover); color: var(--fb-text); }
[data-account-menu] .side-link:active { background: var(--fb-press); }

/* The grey disc — Facebook's one recurring motif in this menu. FaithIn's
   icon colours ride inside it unchanged. */
[data-account-menu] .side-link i {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--fb-chip);
  font-size: 16px;
  /* no colour here on purpose: icons without a colour utility inherit the
     row's ink, and FaithIn's coloured icons keep their own class. */
}

/* Current page keeps FaithIn's blue highlight, rendered flat like the rest */
[data-account-menu] .side-link.is-active,
[data-account-menu] .side-link[aria-current="page"] {
  background: var(--fb-tint);
  color: #2F5BEA;
  font-weight: 600;
}
[data-account-menu] .side-link.is-active i,
[data-account-menu] .side-link[aria-current="page"] i {
  background: rgba(47, 91, 234, .12);
  color: #2F5BEA;
}
html.dark [data-account-menu] .side-link.is-active,
html.dark [data-account-menu] .side-link[aria-current="page"] { color: #7A9BFF; }
html.dark [data-account-menu] .side-link.is-active i,
html.dark [data-account-menu] .side-link[aria-current="page"] i {
  background: rgba(122, 155, 255, .16);
  color: #7A9BFF;
}

/* Home, continued: the pieces the shared .card rule doesn't reach. Surface
   values only — no element moves, nothing is added or removed. */

/* Facebook's composer field is a flat grey pill with no border. */
body[data-page="home"] [data-modal-open="modal-blessing"].rounded-pill {
  background: var(--fb-chip);
  border-color: transparent;
  color: var(--fb-secondary);
}
body[data-page="home"] [data-modal-open="modal-blessing"].rounded-pill:hover {
  background: #D8DADF;
}
html.dark body[data-page="home"] [data-modal-open="modal-blessing"].rounded-pill:hover {
  background: #4E4F50;
}

/* Rail rows take Facebook's flat grey hover rather than the raised tint. */
body[data-page="home"] .side-link:hover { background: var(--fb-hover); }

/* Facebook keeps its dividers hairline-thin and cool grey. */
body[data-page="home"] .card .border-line { border-color: #CED0D4; }
html.dark body[data-page="home"] .card .border-line { border-color: #3E4042; }

/* ── feed media viewer ─────────────────────────────────────────────────────
   Click a photo or a video's expand control and it grows out of the
   thumbnail onto a black stage, with a download that actually saves the
   file. Facebook's shape: opaque black, media contained rather than
   cropped, a thin bar of controls, arrows only when there is more than one. */

.fi-media-cell { position: relative; display: block; min-width: 0; }
.fi-media-cell img[data-media-open] { cursor: zoom-in; }
.fi-media-cell img[data-media-open]:focus-visible {
  outline: 3px solid rgb(var(--brand));
  outline-offset: -3px;
}

/* Video keeps its own controls; the expand button sits clear of them. */
.fi-media-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  color: #fff;
  background: rgb(0 0 0 / .55);
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.fi-media-cell:hover .fi-media-expand,
.fi-media-expand:focus-visible { opacity: 1; }
.fi-media-expand:hover { background: rgb(0 0 0 / .75); }
@media (hover: none) { .fi-media-expand { opacity: 1; } }

.fi-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid, not 92%: the sticky header sits under this and bled through at
     any transparency. Facebook's photo theatre is opaque black too. */
  background: #000;
  opacity: 0;
  transition: opacity .2s ease;
}
.fi-viewer.is-open { opacity: 1; }

.fi-viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 64px 16px 24px;
}
.fi-viewer-media {
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  will-change: transform;
}

.fi-viewer-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.fi-viewer-count {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgb(0 0 0 / .6);
}
.fi-viewer-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.fi-viewer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  background: rgb(255 255 255 / .16);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease;
}
.fi-viewer-btn:hover { background: rgb(255 255 255 / .28); }
.fi-viewer-btn:disabled { opacity: .7; cursor: default; }
.fi-viewer-btn.is-icon { width: 38px; padding: 0; justify-content: center; font-size: 17px; }

.fi-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  color: #fff;
  background: rgb(255 255 255 / .16);
  font-size: 16px;
  transition: background .15s ease;
}
.fi-viewer-nav:hover { background: rgb(255 255 255 / .3); }
.fi-viewer-nav.is-prev { left: 14px; }
.fi-viewer-nav.is-next { right: 14px; }
.fi-viewer-nav[hidden] { display: none; }

@media (max-width: 600px) {
  .fi-viewer-stage { padding: 58px 8px 16px; }
  .fi-viewer-btn { height: 36px; padding: 0 12px; font-size: 13px; }
  .fi-viewer-nav { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-viewer { transition: none; }
}

/* Network, continued. Facebook's people cards carry solid rectangular
   buttons — a filled primary and a grey secondary — rather than outlined
   lozenges. Shapes and fills only: the labels, icons, states and order are
   exactly as they were. */
body[data-page="network"] [data-connect],
body[data-page="network"] [data-message] {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  transition: filter .15s ease, background .15s ease;
}

/* Not yet connected — Facebook's filled "Add friend". */
body[data-page="network"] [data-connect].btn-outline {
  background: rgb(var(--brand));
  color: #fff;
}
body[data-page="network"] [data-connect].btn-outline:hover { background: rgb(var(--brand-strong)); }

/* Already following, and Message: its grey secondary. */
body[data-page="network"] [data-connect].btn-neutral,
body[data-page="network"] [data-message] {
  background: var(--fb-chip);
  color: var(--fb-text);
}
body[data-page="network"] [data-connect].btn-neutral:hover,
body[data-page="network"] [data-message]:hover { filter: brightness(.95); }

body[data-page="network"] [data-message] { margin-top: 8px; }
body[data-page="network"] .side-link:hover { background: var(--fb-hover); }

/* Jobs, continued: the list rows and the search fields. Surface values only —
   the form, the filters, the row contents and the order are unchanged. */

/* Facebook hovers a list row flat grey rather than tinting it. */
body[data-page="jobs"] .row-hover:hover { background: var(--fb-hover); }

/* Its dividers are a cool hairline. */
body[data-page="jobs"] .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #CED0D4; }
html.dark body[data-page="jobs"] .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #3E4042; }

/* And its search inputs are filled grey with no border. */
body[data-page="jobs"] .field {
  background: var(--fb-chip);
  border-color: transparent;
  border-radius: 8px;
}
body[data-page="jobs"] .field:focus {
  background: var(--fb-surface);
  border-color: rgb(var(--brand));
}

body[data-page="jobs"] .side-link:hover { background: var(--fb-hover); }

/* ── share sheet ───────────────────────────────────────────────────────────
   Facebook's shape: a dim backdrop, a white 8px card, the destinations as a
   row of round brand marks, and the raw link underneath for anyone who would
   rather paste it themselves. */
.fi-share {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / .55);
  opacity: 0;
  transition: opacity .15s ease;
}
.fi-share.is-open { opacity: 1; }

.fi-share-card {
  width: 100%;
  max-width: 420px;
  background: var(--fb-surface, #fff);
  color: var(--fb-text, #050505);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgb(0 0 0 / .2), 0 2px 4px rgb(0 0 0 / .1);
  overflow: hidden;
}
html.dark .fi-share-card { background: #242526; color: #E4E6EB; }

.fi-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #CED0D4;
}
html.dark .fi-share-head { border-color: #3E4042; }
.fi-share-head h2 { font-size: 17px; font-weight: 700; margin: 0; }

.fi-share-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  background: #E4E6EB;
  color: inherit;
  font-size: 15px;
}
.fi-share-close:hover { filter: brightness(.95); }
html.dark .fi-share-close { background: #3A3B3C; }

.fi-share-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px;
}
.fi-share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
.fi-share-target:hover { background: var(--fb-hover, #F2F2F2); }
html.dark .fi-share-target:hover { background: #3A3B3C; }
.fi-share-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  color: #fff;
}
.fi-share-mark svg { width: 21px; height: 21px; display: block; }

.fi-share-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fb-secondary, #65676B);
}
.fi-share-note i { margin-top: 2px; }

.fi-share-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}
.fi-share-link input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #E4E6EB;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-overflow: ellipsis;
}
html.dark .fi-share-link input { background: #3A3B3C; }
.fi-share-copy {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: rgb(var(--brand));
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.fi-share-copy:hover { background: rgb(var(--brand-strong)); }

.fi-share-native {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  height: 38px;
  margin: 0 16px 16px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: #E4E6EB;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.fi-share-native:hover { filter: brightness(.95); }
html.dark .fi-share-native { background: #3A3B3C; }

@media (prefers-reduced-motion: reduce) { .fi-share { transition: none; } }

/* Messenger, on the same surface as the rest of the app. The shell is a full
   -height pane rather than a stack of cards, so it takes Facebook's chrome
   from the outside in: hairline shadow, 8px corners, cool dividers. */
body[data-page="messaging"] .msg-shell {
  border-radius: 8px;
}
body[data-page="messaging"] .border-line { border-color: #CED0D4; }
html.dark body[data-page="messaging"] .border-line { border-color: #3E4042; }

/* Conversation rows: Facebook's flat grey hover, brand tint when open. */
body[data-page="messaging"] .msg-thread:hover { background: var(--fb-hover); }
html.dark body[data-page="messaging"] .msg-thread:hover { background: #3A3B3C; }

/* The composer and the two search fields are its filled grey inputs. */
body[data-page="messaging"] .field {
  background: var(--fb-chip);
  border-color: transparent;
}
body[data-page="messaging"] .field:focus {
  background: var(--fb-surface);
  border-color: rgb(var(--brand));
}

body[data-page="messaging"] .side-link:hover { background: var(--fb-hover); }

/* The message stream carries bg-canvas, which on this skin is the page grey —
   so the conversation read as a hole in the pane. Messenger's thread area is
   white (and #242526 in dark), which is what --fb-surface already resolves to. */
body[data-page="messaging"] [data-messages] { background: var(--fb-surface); }