/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: var(--serif);
  --display: var(--serif);
  --ink: #0b1c17;
  --ink-s: #3d5048;
  --muted: #5f6f68;
  --soft: #eff5f2;
  --line: #dfe9e4;
  --line-s: rgba(10,35,42,.09);
  --teal: #12889a;
  --teal-d: #0f6e7a;
  --teal-rgb: 18,136,154;
  --teal-sf: rgba(18,136,154,.08);
  --gold: #c99a35;
  --gold-s: rgba(201,154,53,.12);
  --gold-d: #a07a1f;
  --paper: #fbfdfd;
  --paper-2: #f4f7f5;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(17,49,40,.10);
  --shadow-sm: 0 4px 18px rgba(17,49,40,.08);
  --r: 12px;
  --r-lg: 20px;
  --sb-w: 312px;
  --sb-w-collapsed: 0px;
  --tb-h: 56px;
  --mode-bar-h: 58px;
  --chat-font-scale: 1;
  --chat-line-height: 1.58;
  /* Comfortable column, matching the thread as it is today. */
  --chat-max-width: 768px;
  --answer-lh: 1.78;
  --answer-lead-lh: 1.7;
  --answer-para-gap: 18px;
}
/*
 * Dark mode is warm charcoal, not green-black.
 *
 * The old palette tinted every neutral toward green (#0d1814 ground, #98b0a8
 * text), which with the teal accent read as murky. Neutrals are now warm greys
 * — page #262624, deeper panels #1f1e1d, raised surfaces #30302e, off-white
 * text — and colour is left to the brand accents, teal and gold, which stand
 * out cleanly against a neutral ground. Requested by the user, 2026-09-13.
 */
[data-dark="1"] {
  --ink: #faf9f5;
  --ink-s: #c3c0b6;
  /* 5.4:1 on #262624 and 4.9:1 on #30302e — above AA on every surface it is
     painted on, and still clearly below --ink-s so the hierarchy holds. */
  --muted: #9c9a92;
  --soft: #33322f;
  --line: #3d3d3a;
  --line-s: rgba(222,220,209,.10);
  --teal: #1aa8bc;
  --teal-d: #159aae;
  --teal-sf: rgba(26,168,188,.1);
  --gold: #d4a83c;
  --gold-s: rgba(212,168,60,.12);
  --paper: #262624;
  --paper-2: #1f1e1d;
  --white: #30302e;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --shadow-sm: 0 4px 18px rgba(0,0,0,.25);
}
/* Accent colour presets (override --teal*). The dark-mode pair wins over
   [data-dark="1"], which otherwise paints every highlight the fixed cyan. */
[data-accent="blue"]{--teal:#0285ff;--teal-d:#0074e0;--teal-rgb:2,133,255;--teal-sf:rgba(2,133,255,.1)}
[data-accent="teal"]{--teal:#12889a;--teal-d:#0f6e7a;--teal-rgb:18,136,154;--teal-sf:rgba(18,136,154,.08)}
[data-accent="emerald"]{--teal:#059669;--teal-d:#047857;--teal-rgb:5,150,105;--teal-sf:rgba(5,150,105,.1)}
[data-accent="sapphire"]{--teal:#2563eb;--teal-d:#1d4ed8;--teal-rgb:37,99,235;--teal-sf:rgba(37,99,235,.1)}
[data-accent="forest"]{--teal:#15803d;--teal-d:#166534;--teal-rgb:21,128,61;--teal-sf:rgba(21,128,61,.1)}
[data-accent="gold"]{--teal:#b45309;--teal-d:#92400e;--teal-rgb:180,83,9;--teal-sf:rgba(180,83,9,.1)}
[data-accent="rose"]{--teal:#be123c;--teal-d:#9f1239;--teal-rgb:190,18,60;--teal-sf:rgba(190,18,60,.1)}
[data-accent="plum"]{--teal:#7c3aed;--teal-d:#6d28d9;--teal-rgb:124,58,237;--teal-sf:rgba(124,58,237,.1)}
[data-dark="1"][data-accent="blue"]{--teal:#0285ff;--teal-d:#0074e0;--teal-rgb:2,133,255;--teal-sf:rgba(2,133,255,.18)}
[data-dark="1"][data-accent="teal"]{--teal:#12889a;--teal-d:#0f6e7a;--teal-rgb:18,136,154;--teal-sf:rgba(18,136,154,.2)}
[data-dark="1"][data-accent="emerald"]{--teal:#059669;--teal-d:#047857;--teal-rgb:5,150,105;--teal-sf:rgba(5,150,105,.18)}
[data-dark="1"][data-accent="sapphire"]{--teal:#2563eb;--teal-d:#1d4ed8;--teal-rgb:37,99,235;--teal-sf:rgba(37,99,235,.18)}
[data-dark="1"][data-accent="forest"]{--teal:#15803d;--teal-d:#166534;--teal-rgb:21,128,61;--teal-sf:rgba(21,128,61,.2)}
[data-dark="1"][data-accent="gold"]{--teal:#b45309;--teal-d:#92400e;--teal-rgb:180,83,9;--teal-sf:rgba(180,83,9,.2)}
[data-dark="1"][data-accent="rose"]{--teal:#be123c;--teal-d:#9f1239;--teal-rgb:190,18,60;--teal-sf:rgba(190,18,60,.18)}
[data-dark="1"][data-accent="plum"]{--teal:#7c3aed;--teal-d:#6d28d9;--teal-rgb:124,58,237;--teal-sf:rgba(124,58,237,.18)}
[data-line-spacing="compact"]{--chat-line-height:1.4;--answer-lh:1.52;--answer-lead-lh:1.48;--answer-para-gap:10px}
[data-line-spacing="relaxed"]{--chat-line-height:1.85;--answer-lh:2.05;--answer-lead-lh:1.95;--answer-para-gap:28px}
[data-chat-width="narrow"]{--chat-max-width:620px}
[data-chat-width="wide"]{--chat-max-width:960px}
@media(max-width:680px){
  :root{--chat-line-height:1.5;--answer-lh:1.72;--answer-lead-lh:1.68;--answer-para-gap:18px}
  [data-line-spacing="compact"]{--chat-line-height:1.32;--answer-lh:1.48;--answer-lead-lh:1.44;--answer-para-gap:10px}
  [data-line-spacing="relaxed"]{--chat-line-height:1.7;--answer-lh:1.98;--answer-lead-lh:1.9;--answer-para-gap:26px}
}
[data-font-family="dyslexic"]{
  --serif:"Atkinson Hyperlegible",system-ui,sans-serif;
  --display:"Atkinson Hyperlegible",system-ui,sans-serif;
}
[data-high-contrast="1"]{
  --ink:#000;--ink-s:#111;--muted:#222;--soft:#f5f5f5;--line:#000;
  --paper:#fff;--paper-2:#f0f0f0;--teal:#005a5a;--teal-d:#003838;
}
[data-high-contrast="1"][data-dark="1"]{
  --ink:#fff;--ink-s:#f0f0f0;--muted:#ddd;--soft:#111;--line:#fff;
  --paper:#000;--paper-2:#111;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
html, body, button, input, textarea, select{
  font-family:var(--serif);
}
body{
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:
    linear-gradient(rgba(10,35,42,.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,35,42,.034) 1px,transparent 1px),
    var(--paper);
  background-size:40px 40px,40px 40px,auto;
  min-height:100%;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,rgba(251,253,253,.97),rgba(251,253,253,.94));
}
[data-dark="1"] body::before{
  background:var(--paper);
}
/* Flat ground in dark mode: the faint grid read as texture on green-black but
   as noise on a neutral charcoal. */
[data-dark="1"] body{
  background:var(--paper);
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img,svg{display:block}

/* ── View switching ────────────────────────────────────────────────────────── */
.view{position:relative;z-index:1;animation:viewIn .32s ease both}
.view.hidden{display:none!important}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Topbar (home) ─────────────────────────────────────────────────────────── */
.topbar-wrap{
  position:sticky;top:0;z-index:100;
  padding:0 clamp(18px,4vw,72px);
  border-bottom:1px solid var(--line);
  background:rgba(251,253,253,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
[data-dark="1"] .topbar-wrap{background:rgba(38,38,36,.92)}
.topbar{
  width:min(1400px,100%);
  margin:0 auto;
  min-height:var(--tb-h);
  display:flex;
  align-items:center;
  gap:20px;
}
.topbar-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:24px;font-weight:600;
  letter-spacing:-.02em;
}
.topbar-brand-mark{
  width:30px;height:30px;border-radius:6px;flex-shrink:0;
  overflow:hidden;background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.topbar-brand-mark img{width:100%;height:100%;object-fit:contain}
.topbar-brand-ar{
  font-family:var(--display);font-size:.7em;font-weight:400;
  color:var(--muted);margin-left:2px;font-style:italic;
}
.topbar-nav{
  flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
}
.topbar-nav a{
  padding:6px 12px;border-radius:6px;
  font-size:17px;color:var(--ink-s);
  transition:color .2s,background .2s;
  cursor:pointer;
}
.topbar-nav a:hover,.topbar-nav a.active{color:var(--ink)}
.topbar-acts{display:flex;align-items:center;gap:8px}
.btn-open-chat{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:var(--r);
  background:var(--teal);color:var(--paper);
  font-size:16px;font-family:var(--display);font-weight:500;
  transition:background .2s,transform .15s,box-shadow .2s;
  cursor:pointer;border:none;
}
.btn-open-chat:hover{background:var(--teal-d);transform:translateY(-1px);box-shadow:0 8px 24px rgba(var(--teal-rgb),.35)}
.btn-open-chat:active{transform:translateY(0)}
.btn-icon{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;background:none;
  color:var(--muted);transition:color .2s,background .2s;
}
.btn-icon:hover{color:var(--ink);background:var(--soft)}
.btn-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar-mob-menu{display:none;margin-left:auto}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:calc(100svh - var(--tb-h));
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:clamp(60px,10vh,120px) clamp(20px,6vw,80px);
}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 20%,rgba(var(--teal-rgb),.10),transparent 65%),
    radial-gradient(ellipse 40% 30% at 80% 60%,rgba(201,154,53,.06),transparent 50%),
    radial-gradient(ellipse 40% 30% at 20% 70%,rgba(var(--teal-rgb),.05),transparent 50%);
}
.hero-deco{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-52%);
  font-size:clamp(200px,28vw,380px);
  font-family:'Amiri','Traditional Arabic','Arabic Typesetting',serif;
  color:rgba(var(--teal-rgb),.045);
  pointer-events:none;
  user-select:none;
  line-height:1;
  white-space:nowrap;
  z-index:0;
}
.hero-content{position:relative;z-index:1;max-width:680px}
.bismillah-banner{
  font-family:'Amiri','Traditional Arabic','Arabic Typesetting',serif;
  font-size:clamp(15px,2vw,20px);
  direction:rtl;color:var(--teal);
  margin-bottom:20px;
  letter-spacing:.02em;
  opacity:.85;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  border:1px solid rgba(var(--teal-rgb),.18);
  border-radius:20px;
  font-size:14px;color:var(--muted);
  margin-bottom:26px;
  background:rgba(var(--teal-rgb),.04);
  backdrop-filter:blur(4px);
}
.hero-badge-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--teal);
  box-shadow:0 0 6px rgba(var(--teal-rgb),.6);
  animation:pulse-glow 2.5s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 6px rgba(var(--teal-rgb),.6)}
  50%{box-shadow:0 0 14px rgba(var(--teal-rgb),.9)}
}
.hero-title{
  font-family:var(--display);
  font-size:clamp(44px,7vw,88px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:8px;
}
.hero-title-ar{
  display:block;
  font-family:var(--display);
  font-size:0.55em;
  font-weight:400;
  font-style:italic;
  color:var(--teal);
  letter-spacing:0;
  margin-bottom:4px;
}
.hero-sub{
  font-size:clamp(17px,2.2vw,21px);
  color:var(--muted);
  margin-bottom:38px;
  max-width:520px;
  margin-left:auto;margin-right:auto;
  line-height:1.6;
}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;
  border-radius:var(--r);
  background:var(--teal);color:var(--paper);
  font-family:var(--display);font-size:18px;font-weight:500;
  cursor:pointer;border:none;
  transition:background .2s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(var(--teal-rgb),.25);
}
.btn-primary:hover{background:var(--teal-d);transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--teal-rgb),.4)}
.btn-primary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:transparent;color:var(--ink-s);
  font-family:var(--display);font-size:18px;font-weight:400;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-sf)}
.hero-scroll{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  animation:float-down 2.8s ease-in-out infinite;
  cursor:pointer;
}
@keyframes float-down{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
.hero-scroll svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ── Section wrapper ───────────────────────────────────────────────────────── */
.section{
  width:min(1200px,100%);
  margin:0 auto;
  padding:clamp(60px,8vw,100px) clamp(20px,5vw,60px);
}
.section-label{
  font-size:13px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:12px;
}
.section-title{
  font-family:var(--display);
  font-size:clamp(28px,4vw,44px);
  font-weight:600;line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ink);margin-bottom:16px;
}
.section-sub{
  font-size:17px;color:var(--muted);
  max-width:520px;line-height:1.65;
  margin-bottom:48px;
}

/* ── Features ──────────────────────────────────────────────────────────────── */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.feat-card{
  padding:28px 26px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--white);
  position:relative;
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s,transform .2s;
}
.feat-card:hover{
  border-color:rgba(var(--teal-rgb),.3);
  box-shadow:var(--shadow-sm);
  transform:translateY(-3px);
}
.feat-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--teal-d));
  opacity:0;
  transition:opacity .25s;
}
.feat-card:hover::before{opacity:1}
.feat-icon{
  width:46px;height:46px;
  border-radius:11px;
  background:linear-gradient(135deg,var(--teal-sf),rgba(var(--teal-rgb),.04));
  border:1px solid rgba(var(--teal-rgb),.14);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  font-size:22px;
}
.feat-heading{
  font-family:var(--display);
  font-size:21px;font-weight:600;
  color:var(--ink);margin-bottom:10px;
  letter-spacing:-.01em;
}
.feat-body{font-size:16px;color:var(--muted);line-height:1.65}

/* ── Topics ────────────────────────────────────────────────────────────────── */
.topics-bg{
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.topics-intro{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:16px;margin-bottom:32px;
}
.topics-chips{
  display:flex;flex-wrap:wrap;gap:10px;
}
.topic-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--white);
  font-size:15px;color:var(--ink-s);
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s,transform .15s,box-shadow .2s;
}
.topic-chip:hover,.topic-chip.active{
  border-color:var(--teal);
  color:var(--teal);
  background:var(--white);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.topic-chip-ic{font-size:16px}

/* ── Quote ─────────────────���───────────────────────────────────────────────── */
.quote-band{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.quote-band::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.quote-content{
  position:relative;z-index:1;
  text-align:center;
  max-width:860px;
  margin:0 auto;
  padding:clamp(60px,8vw,100px) clamp(24px,6vw,80px);
}
.quote-ar{
  font-family:'Amiri','Traditional Arabic','Arabic Typesetting',serif;
  font-size:clamp(22px,3.5vw,34px);
  line-height:2;
  direction:rtl;
  color:rgba(var(--teal-rgb),.9);
  margin-bottom:20px;
  font-weight:400;
}
.quote-text{
  font-family:var(--display);font-style:italic;
  font-size:clamp(18px,2.5vw,26px);
  line-height:1.6;
  color:rgba(251,253,253,.88);
  margin-bottom:16px;
}
.quote-attr{
  font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(var(--teal-rgb),.8);
}
.quote-divider{
  width:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  margin:20px auto;
}

/* ── CTA Band ─��─────────────────────────────────────────────────────────────── */
.cta-band{
  text-align:center;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper),var(--soft));
}
.cta-content{
  max-width:640px;margin:0 auto;
}
.cta-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border-radius:20px;
  border:1px solid rgba(var(--teal-rgb),.2);
  background:rgba(var(--teal-rgb),.06);
  font-size:13px;color:var(--teal);
  margin-bottom:22px;
}
.cta-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}
.cta-title{
  font-family:var(--display);
  font-size:clamp(28px,4vw,46px);
  font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:14px;
}
.cta-sub{font-size:17px;color:var(--muted);margin-bottom:32px;line-height:1.65}
.cta-actions{display:flex;justify-content:center}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--line);
  padding:40px clamp(20px,5vw,72px);
}
.footer-inner{
  width:min(1200px,100%);
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.footer-brand{
  font-family:var(--display);font-size:20px;font-weight:500;
  color:var(--ink);
}
.footer-brand span{color:var(--muted);font-style:italic;font-size:.8em;margin-left:6px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:15px;color:var(--muted);transition:color .2s}
.footer-links a:hover{color:var(--teal)}
.footer-copy{font-size:13px;color:var(--muted)}

/* ──────────────────────────────────────────────────────────────────────────── */
/* CHAT VIEW                                                                    */
/* ──────────────────────────────────────────────────────────────────────────── */
#view-home, #view-chat, .rf-landing{
  font-family:var(--serif);
}
.chat-shell{
  display:flex;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  position:relative;z-index:1;
  overflow:hidden;
}
#view-chat{
  font-size:calc(17px * var(--chat-font-scale));
}
/* Sidebar */
.chat-sb{
  width:var(--sb-w);
  min-width:var(--sb-w);
  display:flex;flex-direction:column;
  /* White, so the sidebar reads as a separate surface from the tinted chat
     canvas rather than as more of the same wash. */
  background:var(--white);
  border-right:1px solid var(--line);
  overflow:hidden;
  z-index:20;
  flex-shrink:0;
  transition:width .28s cubic-bezier(.4,0,.2,1),min-width .28s cubic-bezier(.4,0,.2,1),opacity .22s,border-color .22s;
}
.chat-shell.sb-collapsed .chat-sb{
  width:0;min-width:0;opacity:0;border-right-color:transparent;
  pointer-events:none;
}
.sb-head-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
#btn-sb-collapse{display:none}
.chat-sb-head{
  padding:18px 16px 16px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.chat-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:18px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);
}
.chat-brand-mark{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);
  border:1px solid var(--line);
  padding:5px;
}
.chat-brand-mark img{width:100%;height:100%;object-fit:contain}
.chat-sb-body{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  padding:14px 10px;
}
/* New chat sits in a row with the search trigger; the popup replaced the
   inline search field, so the two controls share one line. */
.sb-top-row{display:flex;align-items:stretch;gap:8px;margin-bottom:12px;flex-shrink:0}
.btn-sb-search{
  display:flex;align-items:center;justify-content:center;
  width:40px;flex-shrink:0;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.btn-sb-search svg{width:17px;height:17px;stroke:currentColor;fill:none}
.btn-sb-search:hover{border-color:rgba(var(--teal-rgb),.5);color:var(--teal-d);background:var(--teal-sf)}
.btn-new-chat{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex:1;min-width:0;padding:10px 14px;
  border-radius:9px;
  border:1px solid var(--teal-d);
  background:var(--teal);
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:#fff;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s,transform .15s,box-shadow .2s;
  margin-bottom:10px;
  flex-shrink:0;
}
.btn-new-chat:hover{
  border-color:rgba(var(--teal-rgb),.4);color:var(--teal);
  background:rgba(var(--teal-rgb),.1);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(var(--teal-rgb),.12);
}
.btn-new-chat svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.sb-sect-label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:0 6px;margin-bottom:6px;flex-shrink:0;
}
.sb-hist-search{
  width:100%;box-sizing:border-box;
  padding:8px 10px 8px 32px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--ink);
  font-size:14px;flex-shrink:0;
}
.sb-hist-search:focus{outline:none;border-color:rgba(var(--teal-rgb),.45);box-shadow:0 0 0 2px rgba(var(--teal-rgb),.12)}
.sb-search-wrap{position:relative;flex-shrink:0;margin:0 0 8px}
.sb-conv-label-row{margin:0 0 4px;padding:0 2px}
.sb-folders-block{display:none!important}
.sb-search-wrap svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;stroke:var(--muted);fill:none;pointer-events:none;
}
.sb-hist-empty{padding:8px 10px;font-size:14px;color:var(--muted)}
.hist-item.pinned .hist-pin{color:var(--teal);opacity:1}
.hist-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:4px}
.hist-more{
  opacity:0;padding:2px 8px;border-radius:6px;border:none;background:none;
  font-size:18px;line-height:1;color:var(--muted);cursor:pointer;flex-shrink:0;
  transition:opacity .15s,background .15s,color .15s;
}
.hist-item:hover .hist-more{opacity:.55}
.hist-more:hover{opacity:1!important;background:var(--soft);color:var(--teal)}
.hist-more-menu,.hist-folder-menu{
  position:fixed;z-index:300;min-width:168px;max-width:220px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:4px;max-height:240px;overflow-y:auto;
}
.hist-more-menu-item,.hist-folder-menu-item{
  display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:none;
  font-family:var(--serif);font-size:14px;color:var(--ink-s);border-radius:6px;cursor:pointer;
}
.hist-more-menu-item:hover,.hist-folder-menu-item:hover{background:var(--teal-sf);color:var(--teal-d)}
.hist-more-menu-sep{
  padding:6px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);pointer-events:none;user-select:none;
}
.hist-item.pinned .hist-title::after{content:''}
.sb-folders-block{
  margin:10px 0 12px;padding:0 2px;flex-shrink:0;
}
.sb-folders-block.is-empty .sb-folder-hint{
  margin:0;padding:8px 10px;font-size:13px;color:var(--muted);line-height:1.45;
}
.sb-folder-list{display:flex;flex-direction:column;gap:2px;max-height:140px;overflow-y:auto}
.sb-folder-item-row{display:flex;align-items:center;gap:2px}
.sb-folder-item{
  flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  padding:7px 10px;border-radius:8px;border:none;background:none;
  font-family:var(--serif);font-size:14px;color:var(--ink-s);cursor:pointer;text-align:left;
  transition:background .15s,color .15s;
}
.sb-folder-item:hover{background:var(--soft)}
.sb-folder-item.active{background:var(--teal-sf);color:var(--teal-d);font-weight:600}
.sb-folder-icon{display:flex;align-items:center;flex-shrink:0;opacity:.65}
.sb-folder-icon svg{width:14px;height:14px;stroke:currentColor;fill:none}
.sb-folder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-folder-count{
  font-size:11px;color:var(--muted);background:var(--soft);
  padding:1px 7px;border-radius:999px;flex-shrink:0;
}
.sb-folder-item.active .sb-folder-count{color:var(--teal-d);background:rgba(var(--teal-rgb),.12)}
.sb-folder-item.sb-folder-drop-target{
  background:var(--teal-sf);color:var(--teal-d);outline:2px dashed rgba(var(--teal-rgb),.45);outline-offset:-2px;
}
.sb-folder-mini{
  opacity:.65;padding:4px;border:none;background:none;border-radius:6px;
  cursor:pointer;color:var(--muted);flex-shrink:0;transition:opacity .15s,background .15s;
}
.sb-folder-item-row:hover .sb-folder-mini{opacity:1}
.sb-folder-mini:hover{opacity:1!important;background:var(--soft);color:var(--teal)}
.sb-folder-add{font-size:15px;font-weight:700;line-height:1;width:22px}
.sb-folder-mini svg{width:12px;height:12px;stroke:currentColor;fill:none}
.sb-folder-del:hover{color:rgb(185,28,28);background:rgba(185,28,28,.1)}
.sb-hist-empty-hint{font-size:12px;color:var(--muted);margin-top:6px;display:block}
.sb-folder-empty{font-size:13px;padding:6px 10px 10px}
.hist-pin,.hist-ren,.hist-del,.hist-folder{
  opacity:0;padding:2px 4px;border-radius:4px;
  transition:opacity .15s,background .15s;flex-shrink:0;cursor:pointer;border:none;background:none;
}
.hist-item:hover .hist-pin,.hist-item:hover .hist-ren,.hist-item:hover .hist-del,.hist-item:hover .hist-folder{opacity:.45}
.hist-pin:hover,.hist-ren:hover,.hist-folder:hover{opacity:1!important;background:var(--soft);color:var(--teal)}
.hist-pin svg,.hist-ren svg,.hist-del svg,.hist-folder svg{width:12px;height:12px;stroke:currentColor;fill:none}
.hist-del:hover{opacity:1!important;background:rgba(185,28,28,.1);color:rgb(185,28,28)}
.chat-tb-title-btn{
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;text-align:left;
  max-width:min(420px,50vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-tb-title-btn:hover{color:var(--teal)}
.load-older-wrap{display:flex;justify-content:center;padding:8px 0 4px}
.load-older-btn{
  border:1px solid var(--line);background:var(--soft);color:var(--ink-s);
  border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;
}
.load-older-btn:hover{border-color:var(--teal);color:var(--teal)}
.sb-hist{
  flex:1;overflow-y:auto;
  /* Long titles ellipsis; they must never produce a horizontal bar. The thumb
     stays invisible until the list is hovered or scrolled. */
  overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:transparent transparent;
}
.sb-hist:hover,.sb-hist.is-scrolling{scrollbar-color:rgba(0,0,0,.28) transparent}
.sb-hist::-webkit-scrollbar:horizontal{height:0;display:none}
.sb-hist::-webkit-scrollbar{width:8px}
.sb-hist::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
.sb-hist:hover::-webkit-scrollbar-thumb,
.sb-hist.is-scrolling::-webkit-scrollbar-thumb{background:rgba(0,0,0,.28)}
.sb-hist::-webkit-scrollbar-track{background:transparent}
.hist-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  cursor:pointer;transition:background .15s;
  color:var(--ink-s);font-size:15px;line-height:1.4;
}
.hist-item{border-bottom:1px solid var(--line)}
.hist-item:last-child{border-bottom:none}
.hist-item:hover{background:var(--soft);color:var(--ink)}
.hist-item[draggable="true"]{cursor:grab}
.hist-item.hist-dragging{opacity:.45;cursor:grabbing}
.hist-item.active{background:var(--teal-sf);color:var(--teal)}
.hist-item svg{width:13px;height:13px;stroke:currentColor;fill:none;flex-shrink:0;opacity:.5}
.hist-title{flex:1;overflow:hidden;text-overflow:clip;white-space:nowrap;min-width:0}
.hist-del{
  opacity:0;padding:2px 4px;border-radius:4px;
  transition:opacity .15s,background .15s;flex-shrink:0;cursor:pointer;border:none;background:none;
}
.hist-item:hover .hist-del{opacity:.4}
.hist-del:hover{opacity:1!important;background:rgba(185,28,28,.1);color:rgb(185,28,28)}
.hist-del svg{width:12px;height:12px;stroke:currentColor;fill:none}
.chat-sb-foot{
  padding:12px 10px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
.sb-foot-row{
  display:flex;gap:4px;width:100%;
}
.sb-foot-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 8px;border-radius:8px;font-size:14px;color:var(--muted);
  cursor:pointer;border:none;background:none;
  transition:background .15s,color .15s;
}
.sb-foot-btn:hover{background:var(--soft);color:var(--ink)}
.sb-foot-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.sb-foot-auth{width:100%}
.sb-foot-legal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;
  padding:4px 2px 2px;font-family:var(--sans);font-size:11px;line-height:1.35;color:var(--muted);
}
.sb-foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sb-foot-legal a:hover{color:var(--teal-d)}
.sb-auth-signin{
  /* Signing in syncs chats across devices and was the quietest thing in the
     sidebar — same muted grey as Theme and Settings. Given its own weight. */
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px 14px;
  border-radius:9px;border:1px solid var(--teal-d);
  background:var(--teal);
  font-family:var(--sans);font-size:14px;font-weight:600;color:#fff;
  cursor:pointer;
  transition:filter .2s,box-shadow .2s;
}
.sb-auth-signin svg{width:16px;height:16px;stroke:currentColor;fill:none;opacity:.95}
.sb-auth-signin:hover{filter:brightness(1.06);box-shadow:0 3px 12px rgba(var(--teal-rgb),.28)}
.sb-auth-signed{
  display:flex;align-items:center;gap:6px;
  width:100%;min-width:0;
  padding:4px 6px 2px;
}
.sb-auth-who{
  flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  padding:4px 2px;
}
.sb-auth-avatar{
  width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:rgba(var(--teal-rgb),.12);
}
.sb-auth-avatar.fallback{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--teal);
}
.sb-auth-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--ink);
}
.sb-auth-out{
  flex:0 0 auto;
  padding:7px 10px !important;
}
/* Chat topbar */
.chat-topbar{
  height:var(--tb-h);
  display:flex;align-items:center;
  padding:0 18px;gap:10px;
  border-bottom:1px solid var(--line-s);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  flex-shrink:0;z-index:10;
}
[data-dark="1"] .chat-topbar{background:rgba(38,38,36,.85)}
.chat-tb-left{display:flex;align-items:center;gap:6px}
.btn-back{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px 6px 8px;
  border-radius:8px;border:none;background:none;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);
  cursor:pointer;transition:color .2s,background .2s;
}
.btn-back:hover{color:var(--ink);background:var(--soft)}
.btn-back svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.chat-tb-title{
  flex:1;font-family:var(--display);font-size:15px;font-weight:600;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;letter-spacing:-.01em;
}
.chat-tb-acts{display:flex;gap:2px}
.tb-btn{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;
  color:var(--muted);transition:color .2s,background .2s;
}
.tb-btn:hover{color:var(--ink);background:var(--soft)}
.tb-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.chat-tb-menu-btn{display:none}
.chat-tb-center{
  flex:1;display:flex;align-items:center;justify-content:center;min-width:0;
}
/* Mode bar — below topbar */
.chat-mode-bar{
  display:flex;align-items:center;justify-content:center;
  padding:11px 22px 12px;
  border-bottom:1px solid var(--line-s);
  background:var(--paper-2);
  flex-shrink:0;
}
[data-dark="1"] .chat-mode-bar{background:rgba(31,30,29,.95)}
.mode-pill{
  display:inline-flex;align-items:stretch;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:4px;gap:4px;
  box-shadow:0 2px 10px rgba(17,49,40,.06);
}
.mode-opt{
  min-width:118px;
  padding:10px 22px;border-radius:7px;border:none;background:transparent;
  font-family:var(--serif);font-size:15px;font-weight:600;
  color:var(--muted);cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s,transform .15s;
  white-space:nowrap;line-height:1.3;
}
.mode-opt:hover:not(.active){
  color:var(--ink);background:rgba(var(--teal-rgb),.06);
}
.mode-opt.active[data-mode="muslim"]{
  background:linear-gradient(165deg,var(--teal),var(--teal-d));
  color:#fff;
  box-shadow:0 3px 12px rgba(var(--teal-rgb),.32);
}
.mode-opt.active[data-mode="non_muslim"]{
  background:linear-gradient(165deg,var(--gold),var(--gold-d));
  color:#fff;
  box-shadow:0 3px 12px rgba(201,154,53,.35);
}
[data-dawah="1"] .chat-mode-bar{
  background:linear-gradient(180deg,rgba(201,154,53,.08),var(--paper-2));
  border-bottom-color:rgba(201,154,53,.22);
}
[data-dark="1"][data-dawah="1"] .chat-mode-bar{
  background:linear-gradient(180deg,rgba(201,154,53,.1),rgba(31,30,29,.95));
}
[data-dawah="1"] .inp-ta::placeholder{color:var(--gold-d,#a07a1f);opacity:.65}
/* Chat body */
.chat-main{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  position:relative;
  isolation:isolate;
  background:#fffcfa;
}
[data-dark="1"] .chat-main{
  background:var(--paper);
}
.chat-main > *:not(.chat-aurora){
  position:relative;
  z-index:1;
}
/* Ethereal aurora / liquid-light backdrop (poster style) */
.chat-aurora{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#fffcfa;
}
.chat-aurora-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:1;
  /* translate only — scale softens the bitmap on large screens */
  animation:aurora-photo-drift 56s ease-in-out infinite alternate;
  will-change:transform;
}
.chat-aurora-photo--phone{display:none}
.chat-aurora-veil{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(ellipse 52% 46% at 50% 30%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 70%, transparent 84%);
}
.chat-aurora-noise{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:.01;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@keyframes aurora-photo-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-0.8%,0.5%,0)}
}
[data-dark="1"] .chat-aurora{
  background:var(--paper);
}
/*
 * The aurora photo is a near-WHITE pastel image (average rgb ~242,239,247;
 * nothing in it darker than 73% luma). It was chosen for the light theme, and a
 * white image cannot be turned into a dark backdrop by dimming it — dimming
 * white gives grey, and screen-blending grey over near-black gives fog. That is
 * exactly what dark mode used to show: a flat grey-green smudge.
 *
 * So instead of dimming it as a picture, we use it as a source of coloured
 * light: crush the luminance right down, push saturation up hard so the faint
 * pastel hues survive the crush, and screen only those hues onto the dark
 * ground. What lands is a soft aurora rather than a washed-out photograph.
 * Do not raise `brightness` here to "see the image better" — that is what made
 * it grey.
 */
/*
 * SUPERSEDED 2026-09-13: dark mode is now a flat warm charcoal, so the aurora is
 * switched off rather than tuned. Even crushed and saturated, the screened
 * pastel hues landed as a coloured haze, and against the old green-black ground
 * that haze was a large part of why dark mode looked murky. The reasoning above
 * still stands if an aurora is ever brought back to dark mode.
 */
[data-dark="1"] .chat-aurora-photo{
  display:none;
}
/*
 * Light mode puts a white glow at the centre so dark text reads. Dark mode had
 * simply swapped that white for near-black, which darkened the middle and left
 * the murk pooling in the corners — a vignette running the wrong way round.
 * Here the darkening is moved to the edges and the bottom where it belongs, and
 * the centre is left clear. A teal glow was tried behind the mark and removed:
 * it read as a green wash sitting on top of the page rather than as depth.
 */
[data-dark="1"] .chat-aurora-veil{
  background:none;
}
[data-dark="1"] .chat-aurora-noise{opacity:0}
[data-high-contrast="1"] .chat-aurora{display:none}
[data-high-contrast="1"] .chat-main{background:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .chat-aurora-photo{animation:none !important}
}
@media (max-width:720px){
  .chat-aurora-photo--desk{display:none}
  .chat-aurora-photo--phone{
    display:block;
    background-position:center 70%;
    opacity:.88;
  }
}
/* Keep aurora full-bleed on welcome; top+bottom bands when answers load (phone-style) */
#view-chat:has(.msg-user) .chat-aurora-photo,
#view-chat:has(.msg-asst) .chat-aurora-photo{
  opacity:.95;
  filter:none;
  animation:none;
  -webkit-mask-image:none;
  mask-image:none;
  background-position:center center;
  background-size:cover;
}
/* Desktop: aurora in the side gutters; solid white only behind the message column */
@media (min-width:721px){
  #view-chat:has(.msg-user) .chat-aurora-photo,
  #view-chat:has(.msg-asst) .chat-aurora-photo{
    opacity:.58;
  }
  #view-chat:has(.msg-user) .chat-main,
  #view-chat:has(.msg-asst) .chat-main{
    background:transparent;
  }
  #view-chat:has(.msg-user) .chat-aurora-veil,
  #view-chat:has(.msg-asst) .chat-aurora-veil{
    background:linear-gradient(
      90deg,
      transparent 0,
      transparent max(0px, calc(50% - (var(--chat-max-width) / 2) - 36px)),
      #fffcfa max(0px, calc(50% - (var(--chat-max-width) / 2) - 12px)),
      #fffcfa min(100%, calc(50% + (var(--chat-max-width) / 2) + 12px)),
      transparent min(100%, calc(50% + (var(--chat-max-width) / 2) + 36px)),
      transparent 100%
    );
  }
  #view-chat:has(.msg-user) .chat-inp-area,
  #view-chat:has(.msg-asst) .chat-inp-area{
    background:transparent;
    border-top-color:transparent;
  }
  [data-dark="1"] #view-chat:has(.msg-user) .chat-aurora-veil,
  [data-dark="1"] #view-chat:has(.msg-asst) .chat-aurora-veil{
    background:linear-gradient(
      90deg,
      transparent 0,
      transparent max(0px, calc(50% - (var(--chat-max-width) / 2) - 36px)),
      var(--paper) max(0px, calc(50% - (var(--chat-max-width) / 2) - 12px)),
      var(--paper) min(100%, calc(50% + (var(--chat-max-width) / 2) + 12px)),
      transparent min(100%, calc(50% + (var(--chat-max-width) / 2) + 36px)),
      transparent 100%
    );
  }
  [data-dark="1"] #view-chat:has(.msg-user) .chat-main,
  [data-dark="1"] #view-chat:has(.msg-asst) .chat-main{
    background:transparent;
  }
  [data-dark="1"] #view-chat:has(.msg-user) .chat-inp-area,
  [data-dark="1"] #view-chat:has(.msg-asst) .chat-inp-area{
    background:transparent;
  }
}
@media (max-width:720px){
  /* Hide aurora while a response is open — revisit phone treatment later */
  #view-chat:has(.msg-user) .chat-aurora,
  #view-chat:has(.msg-asst) .chat-aurora{
    display:none;
  }
  #view-chat:has(.msg-user) .chat-main,
  #view-chat:has(.msg-asst) .chat-main{
    background:#fffcfa;
  }
  #view-chat:has(.msg-user) .chat-inp-area,
  #view-chat:has(.msg-asst) .chat-inp-area{
    background:transparent;
  }
  [data-dark="1"] #view-chat:has(.msg-user) .chat-main,
  [data-dark="1"] #view-chat:has(.msg-asst) .chat-main,
  [data-dark="1"] #view-chat:has(.msg-user) .chat-inp-area,
  [data-dark="1"] #view-chat:has(.msg-asst) .chat-inp-area{
    background:var(--paper);
  }
}
#view-chat:has(.msg-user) .chat-aurora-noise,
#view-chat:has(.msg-asst) .chat-aurora-noise{
  opacity:0;
}
/*
 * With an answer open the photo sits in the gutters either side of the reading
 * column, so it is directly beside a near-black panel. At the old brightness the
 * pale source image glared there — bright lilac and cream clouds against black.
 * Same treatment as the welcome screen, dimmer still, since here it is only
 * meant to keep the edges from going dead flat.
 */
[data-dark="1"] #view-chat:has(.msg-user) .chat-aurora-photo,
[data-dark="1"] #view-chat:has(.msg-asst) .chat-aurora-photo{
  display:none;
}
/* Reading column no longer needs a frosted panel — middle is solid white */
.msgs:has(.msg-user)::before,
.msgs:has(.msg-asst)::before{
  display:none;
}
.msgs:has(.msg-user),
.msgs:has(.msg-asst){
  position:relative;
}
.msgs:has(.msg-user) > *,
.msgs:has(.msg-asst) > *{
  position:relative;
  z-index:1;
}
.chat-body{
  flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  scroll-behavior:smooth;
}
.chat-body::-webkit-scrollbar{width:4px}
.chat-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.msgs{
  max-width:var(--chat-max-width);margin:0 auto;
  padding:12px 24px 16px;
  display:flex;flex-direction:column;gap:22px;
  min-height:100%;
}
.msg-user-bub,.msg-direct,.msg-expl,.msg-answer-body,.sec-body,.inp-ta,.starter-btn{
  line-height:var(--chat-line-height);
}
/* Welcome screen */
.chat-welcome{
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;text-align:center;
  padding:8px 24px 24px;
  flex:0 0 auto;
  gap:22px;
}
.chat-welcome[aria-hidden="true"],
.msgs:has(.msg-user) .chat-welcome,
.msgs:has(.msg-asst) .chat-welcome{
  display:none !important;
}
.chat-wlc-hero{
  display:flex;flex-direction:column;align-items:center;
  max-width:520px;
}
/* The logo and salam were the top of a column that continued into the starter
   cards. With those gone they are the whole of the empty state, so they centre
   in the space instead of hanging from the top of it. */
.chat-welcome{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* Viewport-relative, not `min-height:100%`: the scroll parent has no definite
     height, so a percentage collapsed to the content's own 336px and the hero
     "centred" inside itself near the top of the page. The subtraction is the
     top bar plus the composer, so the hero lands in the middle of what is
     actually free space. */
  min-height:calc(100vh - 200px);
  text-align:center;
}
.chat-wlc-mark{
  width:auto;height:auto;border-radius:0;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  position:relative;
}
.chat-wlc-mark-ring{
  width:120px;height:120px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
}
.chat-wlc-mark svg{display:none}
.chat-wlc-mark-ring .rafiq-logo-img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  flex-shrink:0;
}
.chat-wlc-title{display:none!important}
.chat-wlc-tagline{
  font-family:var(--serif);font-size:clamp(17px,2.5vw,20px);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal);margin:0 0 12px;
}
.starters-section{width:100%;max-width:680px}
.starters-label{
  font-family:var(--serif);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;text-align:center;
}
.starters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
@media(min-width:520px){.starters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.starters{grid-template-columns:1fr}}
.starter-btn{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;border-radius:14px;
  min-height:72px;
  border:1px solid var(--line);background:rgba(255,255,255,.85);
  font-family:var(--serif);font-size:14px;text-align:left;line-height:1.45;
  cursor:pointer;color:var(--ink-s);
  transition:border-color .22s,color .22s,background .22s,transform .18s,box-shadow .22s;
  position:relative;overflow:hidden;
  backdrop-filter:blur(4px);
}
[data-dark="1"] .starter-btn{background:rgba(48,48,46,.9)}
.starter-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(var(--teal-rgb),.04),transparent 60%);
  opacity:0;transition:opacity .2s;
}
.starter-btn:hover{
  border-color:rgba(var(--teal-rgb),.32);color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(var(--teal-rgb),.1);
}
.starter-btn:hover::after{opacity:1}
.starter-ic{
  font-size:17px;line-height:1;flex-shrink:0;
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--teal-rgb),.08);
  margin-top:0;
}
.starter-txt{
  flex:1;align-self:center;
  font-weight:500;font-size:13.5px;line-height:1.5;color:var(--ink-s);
}
.starter-btn:hover .starter-txt{color:var(--ink)}

/* ── Welcoming chrome (shell only — do not restyle answer blocks) ─────────── */
#view-chat{
  --chrome-wash:rgba(18,136,154,.05);
  --chrome-glow:rgba(201,154,53,.07);
}
[data-dark="1"] #view-chat{
  --chrome-wash:rgba(26,168,188,.08);
  --chrome-glow:rgba(212,168,60,.08);
}
.chat-shell{
  background:transparent;
}
.chat-sb{
  background:var(--white);
  border-right:1px solid rgba(18,136,154,.12);
}
[data-dark="1"] .chat-sb{
  background:var(--paper-2);
  border-right-color:rgba(222,220,209,.08);
  box-shadow:none;
}
.chat-sb-head{
  padding:22px 18px 18px;
  border-bottom:1px solid rgba(18,136,154,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
}
[data-dark="1"] .chat-sb-head{
  border-bottom-color:rgba(255,255,255,.06);
  background:transparent;
}
.chat-brand{
  font-size:20px;font-weight:500;letter-spacing:.01em;
}
.chat-brand-mark{
  width:36px;height:36px;padding:4px;
  border-radius:12px;
  border:1px solid rgba(18,136,154,.16);
  background:linear-gradient(160deg,#fff,rgba(232,247,246,.95));
  box-shadow:0 4px 14px rgba(18,136,154,.1);
}
[data-dark="1"] .chat-brand-mark{
  background:rgba(26,168,188,.12);
  border-color:rgba(26,168,188,.22);
  box-shadow:none;
}
.chat-sb-body{padding:12px 12px 10px}
.btn-new-chat{
  padding:10px 14px;border-radius:9px;
  border:1px solid var(--teal-d);
  background:var(--teal);
  color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  margin-bottom:0;
  box-shadow:0 2px 10px rgba(var(--teal-rgb),.18);
}
.btn-new-chat svg{width:15px;height:15px;stroke-width:2}
.btn-new-chat:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(var(--teal-rgb),.14);
}
.sb-sect-label{
  font-size:11px;letter-spacing:.14em;
  color:var(--muted);opacity:.85;
  padding:4px 10px 8px;
}
.sb-hist-search{
  padding:10px 12px 10px 34px;border-radius:999px;
  border:1px solid rgba(18,136,154,.12);
  background:rgba(255,255,255,.7);
  font-size:14px;
}
[data-dark="1"] .sb-hist-search{background:var(--white);border-color:rgba(222,220,209,.10)}
.hist-item{
  padding:10px 12px;border-radius:12px;font-size:15px;
  transition:background .18s,color .18s,transform .15s;
}
.hist-item:hover{background:rgba(var(--teal-rgb),.06);transform:translateX(2px)}
/* Da'wah threads read as a different KIND of conversation, not a more
   important one: the two-bubble mark carries it, and the gold tint only
   reinforces what the shape already says. Shape first so it survives
   high-contrast mode and colour blindness. */
.hist-item.hist-dawah svg{color:var(--gold);stroke:var(--gold)}
.hist-item.active{
  background:linear-gradient(135deg,rgba(var(--teal-rgb),.12),rgba(var(--teal-rgb),.05));
  color:var(--teal-d);font-weight:500;
}
.sb-folder-item{border-radius:12px;padding:8px 12px}
.chat-sb-foot{
  padding:14px 12px 16px;
  border-top:1px solid rgba(18,136,154,.22);
  gap:6px;
  background:linear-gradient(0deg,rgba(255,255,255,.5),transparent);
}
[data-dark="1"] .chat-sb-foot{
  border-top-color:rgba(255,255,255,.06);
  background:transparent;
}
.sb-foot-btn{
  padding:9px 8px;border-radius:12px;font-size:13px;
  color:var(--ink-s);
}
.sb-foot-btn:hover{
  background:rgba(var(--teal-rgb),.08);color:var(--teal-d);
}
.sb-auth-signed{
  padding:2px 2px 0;
  border-radius:12px;
}
.sb-auth-who{
  padding:6px 4px;
  border-radius:10px;
}
.sb-auth-out{
  color:var(--muted);
}
.sb-auth-out:hover{
  background:rgba(var(--teal-rgb),.08);color:var(--teal-d);
}
.chat-topbar{
  position:relative;
  height:auto;min-height:var(--tb-h);
  padding:10px 22px;
  border-bottom:1px solid rgba(18,136,154,.08);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(18px) saturate(1.25);
}
[data-dark="1"] .chat-topbar{
  background:rgba(38,38,36,.85);
  border-bottom-color:rgba(222,220,209,.08);
}
.btn-back{
  padding:8px 14px 8px 10px;border-radius:999px;
  font-size:14px;color:var(--ink-s);
}
.btn-back:hover{background:rgba(var(--teal-rgb),.08);color:var(--teal-d)}
.chat-tb-title-btn,.chat-tb-title{display:none}
/* The old standalone mode bar stays retired — the pill lives in the topbar. */
.chat-mode-bar{display:none !important;height:0;padding:0;border:0;overflow:hidden}
.chat-tb-left,.chat-tb-acts{position:relative;z-index:2}
.chat-tb-acts{margin-left:auto;align-items:center}
.chat-tb-center{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  flex:none;width:auto;z-index:1;
  pointer-events:none;
}
.chat-tb-center .mode-pill{
  pointer-events:auto;
  border-radius:10px;padding:4px;gap:4px;
  border:1.5px solid var(--line);
  background:var(--white);
  box-shadow:0 2px 10px rgba(17,49,40,.06);
}
[data-dark="1"] .chat-tb-center .mode-pill{background:var(--paper-2);box-shadow:none}
.chat-tb-center .mode-opt{
  min-width:118px;padding:10px 22px;border-radius:7px;
  font-size:15px;font-weight:600;
}
.chat-tb-center .mode-opt.active[data-mode="muslim"],
.chat-tb-center .mode-opt.active[data-mode="non_muslim"]{
  box-shadow:0 3px 12px rgba(var(--teal-rgb),.32);
}
.tb-btn{
  width:36px;height:36px;border-radius:12px;
}
.tb-btn:hover{background:rgba(var(--teal-rgb),.08);color:var(--teal-d)}
.chat-main{
  background:transparent;
}
[data-dark="1"] .chat-main{
  background:transparent;
}
.chat-welcome{
  padding:28px 28px 32px;gap:28px;
}
.chat-wlc-mark{margin:0 auto 20px}
.chat-wlc-mark-ring{
  width:132px;height:132px;
  filter:drop-shadow(0 12px 28px rgba(18,136,154,.12));
}
.chat-wlc-tagline{
  font-size:clamp(19px,2.8vw,24px);font-weight:500;
  letter-spacing:.01em;text-transform:none;
  color:var(--ink);
  line-height:1.35;
  max-width:28ch;
}
.chat-wlc-tagline::after{
  content:"";
  display:block;width:42px;height:2px;margin:14px auto 0;
  border-radius:999px;
  /* Teal only. The teal-to-gold gradient read as a third accent colour sitting
     under the greeting rather than as a rule belonging to the brand. */
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  opacity:.75;
}
/* The greeting is two lines: the salam in Arabic, the invitation beneath it. */
.wlc-salam{
  display:block;
  font-family:'Amiri',var(--serif),Georgia,serif;
  font-size:clamp(28px,4.2vw,40px);
  font-weight:700;line-height:1.5;
  color:var(--ink);
  direction:rtl;
}
.wlc-salam .wlc-name{
  font-family:var(--serif);
  font-size:.62em;font-weight:600;
  color:var(--muted);
  display:block;margin-top:2px;
  direction:ltr;
}
.wlc-sub{
  display:block;margin-top:8px;
  font-family:var(--serif);
  font-size:clamp(17px,2.4vw,21px);
  font-weight:500;color:var(--muted);
}
.starters-label{
  font-size:12px;font-weight:500;letter-spacing:.08em;
  margin-bottom:16px;opacity:.9;
}
.starters{gap:12px}
.starter-btn{
  padding:16px 18px;border-radius:18px;min-height:78px;
  border:1px solid rgba(18,136,154,.12);
  background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 4px 16px rgba(17,49,40,.04);
}
[data-dark="1"] .starter-btn{
  background:var(--white);
  border-color:rgba(222,220,209,.10);
  box-shadow:none;
}
.starter-btn:hover{
  border-color:rgba(var(--teal-rgb),.28);
  box-shadow:0 12px 28px rgba(var(--teal-rgb),.12);
}
.starter-ic{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(160deg,rgba(var(--teal-rgb),.12),rgba(201,154,53,.08));
}
.starter-txt{font-size:14px;line-height:1.45}
.chat-inp-area{
  padding:16px 22px 22px;
  border-top:1px solid rgba(18,136,154,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.72));
}
[data-dark="1"] .chat-inp-area{
  background:linear-gradient(180deg,rgba(38,38,36,0),var(--paper) 40%);
  border-top-color:transparent;
}
.inp-box{
  border-radius:22px;padding:10px 10px 10px 22px;
  border:1.5px solid rgba(18,136,154,.14);
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 28px rgba(17,49,40,.06);
}
[data-dark="1"] .inp-box{background:var(--white);border-color:rgba(222,220,209,.12);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.inp-box:focus-within{
  border-color:rgba(var(--teal-rgb),.38);
  box-shadow:0 0 0 4px rgba(var(--teal-rgb),.1),0 10px 30px rgba(17,49,40,.08);
}
.inp-ta{
  font-size:calc(16px * var(--chat-font-scale));
  line-height:var(--chat-line-height);
  padding:8px 0;
  /* The box auto-grows with its content, so a scrollbar only ever appears at
     the height cap — but mobile browsers reserve and paint the track from the
     first render, putting a grey bar down an empty composer. Hidden in both
     engines; the field still scrolls once it reaches its maximum height. */
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.inp-ta::-webkit-scrollbar{width:0;height:0;display:none}
.inp-ta::placeholder{color:var(--muted);opacity:.8}
.inp-send{
  width:44px;height:44px;
  box-shadow:0 6px 18px rgba(var(--teal-rgb),.28);
}
.inp-hint{
  margin-top:12px;font-size:12.5px;line-height:1.5;
  color:var(--muted);opacity:.92;
}
.modal-overlay{
  background:rgba(11,28,23,.38);
  backdrop-filter:blur(8px) saturate(1.1);
}
.modal{
  border-radius:24px;
  border:1px solid rgba(18,136,154,.12);
  box-shadow:0 24px 80px rgba(17,49,40,.14);
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,rgba(var(--teal-rgb),.06),transparent 55%),
    var(--paper);
}
.modal-head{
  padding:22px 24px 18px;
  border-bottom:1px solid rgba(18,136,154,.08);
}
.modal-title{
  font-size:22px;font-weight:500;letter-spacing:.01em;
}
.modal-close{width:34px;height:34px;border-radius:12px}
.modal-body{padding:22px 24px 8px}
.field{margin-bottom:18px}
.field-label{margin-bottom:8px;color:var(--ink-s)}
.field-input,.field-select{
  padding:11px 14px;border-radius:14px;
  border:1.5px solid rgba(18,136,154,.12);
  background:rgba(255,255,255,.88);
}
[data-dark="1"] .field-input,[data-dark="1"] .field-select{background:var(--white);border-color:rgba(222,220,209,.12)}
.theme-opt,.pref-seg-btn{
  border-radius:14px;padding:10px 12px;
}
.settings-section{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(18,136,154,.08);
}
.settings-section-title{
  font-size:12px;font-weight:500;letter-spacing:.1em;
  margin-bottom:12px;
}
.modal-foot{
  border-top:1px solid rgba(18,136,154,.08);
  padding:16px 24px 20px;
  background:linear-gradient(0deg,rgba(244,247,245,.65),transparent);
}
[data-dark="1"] .modal-foot{background:transparent}

/* Messages */
.msg{display:flex;flex-direction:column}
.msg-user{align-self:flex-end;max-width:72%}
.msg-user-bub{
  background:var(--ink);color:var(--paper);
  padding:13px 17px;
  border-radius:18px 18px 4px 18px;
  font-family:var(--serif);
  font-size:calc(17.5px * var(--chat-font-scale));
  line-height:var(--chat-line-height);
  word-break:break-word;
}
[data-dark="1"] .msg-user-bub{background:var(--teal);color:#ffffff}
.msg-asst{align-self:flex-start;max-width:100%;width:100%}
.msg-asst-hd{display:none}
.rafiq-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
  border:1px solid var(--line);
  padding:2px;
}
.rafiq-av img{width:100%;height:100%;object-fit:contain;display:block}
.rafiq-av svg{display:none}
.rafiq-name{font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink-s)}
.msg-asst-body{padding-left:37px}
.msg-direct{
  font-family:var(--serif);
  font-size:calc(17.5px * var(--chat-font-scale));font-weight:400;
  line-height:var(--chat-line-height);letter-spacing:0;
  color:var(--ink);margin-bottom:14px;
}
.sec-body{
  font-family:var(--serif);
  font-size:calc(16px * var(--chat-font-scale));
  line-height:var(--chat-line-height);
}
/* ── Unified main answer (ChatGPT-style long essay) ── */
.msg-answer-main{
  font-family:var(--serif);
  max-width:100%;
  margin-bottom:22px;
}
.msg-answer-lead{
  font-size:calc(18px * var(--chat-font-scale));
  /* Not bold. The lead is the opening of the answer, not a headline — weight 500
     across a whole paragraph read as emphasis on everything, which is emphasis on
     nothing. Genuine **bold** inside it still stands out. */
  line-height:var(--chat-line-height);font-weight:400;
  color:var(--ink);margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.msg-answer-lead p{margin:0}
.msg-answer-body{
  font-family:var(--serif);
  font-size:calc(16.5px * var(--chat-font-scale));
  line-height:var(--chat-line-height);
  color:var(--ink-s);
}
.msg-answer-hadith{
  font-family:var(--serif);
  margin:20px 0 22px;
  max-width:100%;
}
.msg-answer-hadith strong,
.msg-answer-hadith .rfv4-hadith-ref strong,
.msg-answer-hadith .rfv4-evidence-en strong{
  font-weight:400;
}
.msg-answer-body .rfmt-h2{
  font-size:calc(18px * var(--chat-font-scale));margin:28px 0 10px;
  padding-top:4px;
  /* Headings carry no weight of their own otherwise — they inherit body text and
     read as ordinary prose, which is why sections stopped standing out when the
     lead paragraph's weight was removed. */
  font-weight:600;
  color:var(--ink);
}
.msg-answer-body .rfmt-h2:first-child{margin-top:0}
/* ── Qibla compass ─────────────────────────────────────────────────────────
   The needle and the ring go green together, so alignment is visible in
   peripheral vision while the phone is being turned. */
.qibla-compass{margin:16px 0 4px;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper,#fff);text-align:center}
.qibla-head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.qibla-head strong{font-size:calc(15.5px * var(--chat-font-scale));font-weight:600}
.qibla-bearing{font-size:calc(13px * var(--chat-font-scale));opacity:.65}
.qibla-dialwrap{display:flex;justify-content:center}
.qibla-dial{width:min(232px,66vw);height:auto}
.qibla-ring{fill:none;stroke:var(--line);stroke-width:2;transition:stroke .2s ease}
.qibla-hub{fill:var(--ink)}
.qibla-target{fill:var(--line)}
.qibla-card{font-size:15px;text-anchor:middle;fill:var(--ink);opacity:.5}
.qibla-kaaba{font-size:20px;text-anchor:middle}
.qibla-rose,.qibla-needle-group{transition:transform .16s linear;transform-origin:100px 100px}
.qibla-needle{fill:#c2410c;transition:fill .2s ease}
.qibla-compass.is-aligned .qibla-needle{fill:#15803d}
.qibla-compass.is-aligned .qibla-ring{stroke:#15803d;stroke-width:3}
.qibla-compass.is-aligned .qibla-status{color:#15803d;font-weight:600}
.qibla-status{margin-top:12px;font-size:calc(13.5px * var(--chat-font-scale));opacity:.85}

/* The location prompt. A filled button, because it is the one thing to do. */
.qibla-ask{margin:14px 0 4px;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper,#fff);text-align:center}
.qibla-locate{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border:0;border-radius:999px;
  background:var(--accent,#0f766e);color:#fff;
  font:inherit;font-size:calc(14.5px * var(--chat-font-scale));font-weight:600;
  cursor:pointer;transition:opacity .15s ease,transform .15s ease}
.qibla-locate:hover{opacity:.9}
.qibla-locate:active{transform:scale(.98)}
.qibla-locate:disabled{opacity:.6;cursor:default}
.qibla-note{margin-top:10px;font-size:calc(12.5px * var(--chat-font-scale));opacity:.7;line-height:1.5}
@media (prefers-reduced-motion:reduce){.qibla-rose,.qibla-needle-group{transition:none}}
.msg-answer-body .rfmt-h3{font-size:calc(16.5px * var(--chat-font-scale));margin:20px 0 8px;font-weight:600}
.msg-answer-main .rfmt-quote,
.msg-answer-main .rfmt-hadith-matn,
.msg-answer-main .rfmt-verse-matn,
.msg-answer-main .rfmt-fatwa-matn{
  margin:16px 0;padding:14px 18px;
  font-size:calc(15.5px * var(--chat-font-scale));
  line-height:var(--chat-line-height);
}
/* Arabic callouts need to beat the rule above on specificity, not just order:
   .msg-answer-main .rfmt-quote is (0,2,0) and was overriding .rfmt-ar's size,
   so the matn rendered in Amiri but still at 15.5px with Latin leading. Amiri
   sets a small x-height, so quoted scripture needs both a larger size and much
   looser line-height than the surrounding English. */
.msg-answer-main .rfmt-ar,
.msg-answer-body .rfmt-ar,
.msg-expl .rfmt-ar,
.sec-body .rfmt-ar{
  font-size:calc(20.5px * var(--chat-font-scale));
  line-height:2.05;
}
.msg-answer-body .rfmt-inline-verse-card,
.msg-answer-main .rfmt-inline-verse-card,
.msg-expl .rfmt-inline-verse-card,
.sec-body .rfmt-inline-verse-card{
  margin:20px auto 24px;
  max-width:min(42rem, 100%);
  text-align:center;
}
.msg-answer-main p{margin:0 0 14px}
.msg-answer-main p:last-child{margin-bottom:0}
.msg-direct .rfmt-h2{font-size:calc(18px * var(--chat-font-scale));margin-top:0}
/* The opening is the first thing in an empty conversation, and it sat hard
   against the top bar. Given room so it reads as Rafiq speaking, not a banner. */
.dawah-opening{margin-top:clamp(24px,7vh,72px)}
.dawah-open-lead{
  /* The taslim carries the same weight as the question that follows it: it is
     the greeting, not preamble to be skimmed past. */
  font-weight:700;
  color:var(--ink);
}
/* Answering the opening should not require typing. These are a shortcut, never
   a gate — the reader can ignore them and ask whatever they came to ask. */
.dawah-reply-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:16px 0 4px;
}
.dawah-chip{
  padding:9px 16px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--white);
  font-family:var(--serif);font-size:15px;font-weight:600;
  color:var(--ink-s,var(--ink));
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s,box-shadow .18s;
}
.dawah-chip:hover{
  border-color:rgba(176,144,74,.55);
  background:rgba(176,144,74,.09);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(176,144,74,.16);
}
.dawah-chip:active{transform:translateY(1px)}
[data-dark="1"] .dawah-chip{background:rgba(255,255,255,.04)}
/* Offered instead of an answer when a ruling question is asked in Dawah mode
   (src/dawah/route.ts). Switches to Rafiq when the countdown ends. */
/* Quiet on purpose — the reader asked for "aesthetic and clean and no Bold". */
.route-card{
  position:relative;overflow:hidden;
  max-width:500px;padding:18px 20px 17px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--white);
  animation:routeCardIn .35s ease-out both;
}
@keyframes routeCardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.route-card *{font-weight:400}
.route-card-text{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--ink-s)}
.route-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.route-card button{
  font-family:var(--serif);font-size:15px;line-height:1;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.route-card button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.route-card .route-switch{border:1px solid rgba(var(--teal-rgb),.35);background:var(--teal-sf);color:var(--teal-d)}
.route-card .route-switch:hover{border-color:var(--teal);background:rgba(var(--teal-rgb),.14)}
.route-card .route-stay{border:1px solid transparent;background:transparent;color:var(--muted)}
.route-card .route-stay:hover{color:var(--ink);border-color:var(--line)}
.route-card-note{margin:0 0 0 auto;font-family:var(--serif);font-size:13.5px;font-style:italic;color:var(--muted);font-variant-numeric:tabular-nums}
/* Countdown: a hairline draining along the bottom edge; width animated from app-main.js. */
.route-card-timer{position:absolute;left:0;right:0;bottom:0;height:2px}
.route-card-timer span{display:block;height:100%;width:100%;background:rgba(var(--teal-rgb),.5)}
.route-card.is-settled .route-card-actions{opacity:.5;pointer-events:none}
.route-card.is-settled .route-card-timer,.route-card.is-settled .route-card-note{visibility:hidden}
@media (max-width:520px){
  .route-card{padding:16px 16px 15px}
  .route-card-note{flex:1 1 100%;margin:4px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .route-card{animation:none}
  .route-card-timer span{transition:none!important}
}

/* ── Conversation search popup ─────────────────────────────
   Centred over the page rather than a field wedged above the list, so searching
   is a deliberate act with the whole result set in view. */
.search-modal{
  /* Explicit offsets rather than `inset`, and re-parented to the document body at init:
     an ancestor inside .chat-shell carries a filter/backdrop-filter, which
     makes it the containing block for position:fixed and collapsed the popup
     to 40x68px in the middle of the sidebar. */
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(48px,12vh,140px) 20px 20px;
}
.search-modal[hidden]{display:none}
.search-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(17,49,40,.34);
  backdrop-filter:blur(3px);
}
.search-modal-card{
  position:relative;
  width:min(620px,100%);
  max-height:min(70vh,640px);
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(17,49,40,.22);
  overflow:hidden;
}
.search-modal-field{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.search-modal-field > svg{width:18px;height:18px;stroke:var(--muted);fill:none;flex-shrink:0}
.search-modal-field input{
  flex:1;min-width:0;
  border:none;background:transparent;outline:none;
  font-family:var(--sans);font-size:16px;color:var(--ink);
}
.search-modal-field input::-webkit-search-cancel-button{display:none}
.search-modal-close{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;
  border:none;background:transparent;border-radius:7px;
  color:var(--muted);cursor:pointer;
}
.search-modal-close svg{width:15px;height:15px;stroke:currentColor;fill:none}
.search-modal-close:hover{background:var(--soft);color:var(--ink)}
.search-modal-results{
  flex:1;overflow-y:auto;padding:8px;
}
.search-modal-results .sb-hist{max-height:none;overflow:visible}
.search-modal-hint{
  padding:8px 16px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;color:var(--muted);
  flex-shrink:0;
}
.search-modal-hint kbd{
  font-family:var(--sans);font-size:11px;
  padding:1px 5px;border:1px solid var(--line);border-radius:4px;
}
[data-dark="1"] .search-modal-card{background:var(--paper)}

/* ── Dawah opening ─────────────────────────────────────────────────────────
   Rafiq speaks first in Non-Muslim mode. Three flat paragraphs read as a
   notice; the point is that it is a person asking, so the question carries the
   emphasis and the reassurance beside it steps back. */
/* All three at the size of an answer's text (.msg-answer-body): the opening is Rafiq
   speaking, and at 17px / 15px it read as a smaller, lesser voice than the answer that
   follows it. Weight and colour still set the question apart from the note. */
.dawah-open-lead{margin:0 0 14px;font-size:calc(18.5px * var(--chat-font-scale, 1))}
.dawah-open-q{
  margin:0 0 6px;
  font-weight:600;
  font-size:calc(18.5px * var(--chat-font-scale, 1));
  color:var(--ink);
}
.dawah-open-note{
  margin:0 0 14px;
  padding-left:14px;
  border-left:2px solid var(--line, rgba(0,0,0,.12));
  color:var(--muted, #5b6b72);
  font-size:calc(18.5px * var(--chat-font-scale, 1));
}
/* Caret, shown only while the text is being typed out. */
.dawah-open-typing > p:last-child::after{
  content:'';
  display:inline-block;
  width:2px;height:1em;
  margin-left:2px;
  vertical-align:-.15em;
  background:currentColor;
  opacity:.55;
  animation:dawah-caret 1s steps(2,start) infinite;
}
@keyframes dawah-caret{to{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .dawah-open-typing > p:last-child::after{animation:none;opacity:0}
}
.msg-expl{
  font-family:var(--serif);
  font-size:calc(16.5px * var(--chat-font-scale));
  line-height:var(--chat-line-height);
  color:var(--ink-s);margin-bottom:20px;
  max-width:100%;
}
.msg-expl .rfmt-h2{font-size:calc(17.5px * var(--chat-font-scale));margin-top:18px}
.msg-expl .rfmt-h3{font-size:calc(16px * var(--chat-font-scale))}
/* Rich text inside answer blocks */
.msg-expl p, .sec-body p, .msg-answer-body p, .deeper-block-body p { margin:0 0 18px; }
.msg-expl p:last-child, .sec-body p:last-child, .msg-answer-body p:last-child, .deeper-block-body p:last-child { margin-bottom:0; }
/* ── Diving deeper (centred heading + per-source collapsed cards) ── */
.diving-deeper-zone{margin:28px 0 20px}
.diving-deeper-heading{
  text-align:center;
  font-family:var(--display);
  font-size:13px;font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 16px;
}
.diving-deeper-stack{display:flex;flex-direction:column;gap:10px}
.diving-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--white);
  overflow:hidden;
  transition:border-color .2s,box-shadow .15s;
}
.diving-card[open]{
  border-color:rgba(var(--teal-rgb),.3);
  box-shadow:var(--shadow-sm);
}
.diving-card-summary{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:15.5px;font-weight:600;
  color:var(--ink);user-select:none;
}
.diving-card-summary::-webkit-details-marker{display:none}
.diving-card-title{flex:1;text-align:left;line-height:1.35}
.diving-card-chevron{
  width:17px;height:17px;stroke:var(--muted);fill:none;
  flex-shrink:0;transition:transform .2s;
}
.diving-card[open] .diving-card-chevron{transform:rotate(180deg)}
.diving-card-copy{
  font-family:var(--display);font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--white);color:var(--muted);cursor:pointer;
  flex-shrink:0;
}
.diving-card-copy:hover{border-color:rgba(var(--teal-rgb),.35);color:var(--teal)}
.diving-card-body{
  padding:14px 16px 16px;
  border-top:1px solid var(--line);
  font-family:var(--serif);font-size:calc(15.5px * var(--chat-font-scale));line-height:var(--chat-line-height);
  color:var(--ink-s);
}
.diving-card-body p{margin:0 0 10px}
.diving-card-body p:last-child{margin-bottom:0}
/* IslamWeb fatwa Q/A panels — bold labels + breathing room between blocks */
.diving-card-body.rfv4-fatwa-qa-panel .rfmt-h2,
.diving-card-body .rfmt-h2{
  font-family:var(--serif);font-size:17px;font-weight:700;
  color:var(--ink);margin:0 0 8px;line-height:1.3;
}
.diving-card-body.rfv4-fatwa-qa-panel .rfmt-h2 ~ .rfmt-h2,
.diving-card-body .rfmt-h2 ~ .rfmt-h2{
  margin-top:22px;
}
.diving-card-body.rfv4-fatwa-qa-panel p:not(.rfmt-h2),
.diving-card-body .rfmt-h2 + p{
  margin:0 0 14px;
}
.rfmt-quote,
.rfmt-hadith-matn,
.rfmt-verse-matn{
  /* Verse and hadith use the same quiet quote as a scholar's words. */
  margin:10px 0;padding:8px 0 8px 14px;border-left:2px solid var(--line);
  background:transparent;border-radius:0;
  font-family:var(--serif);
  font-size:calc(18.5px * var(--chat-font-scale));font-weight:400;line-height:var(--chat-line-height);color:var(--ink-s);
  font-style:italic;
}
.rfmt-scripture-speaker{
  margin:10px 0 2px;
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
}
.rfmt-fatwa-matn{
  margin:14px 0;padding:14px 18px 14px 16px;
  border-left:4px solid rgba(18,136,154,.72);
  background:rgba(18,136,154,.10);
  border-radius:0 8px 8px 0;
  font-family:var(--serif);
  font-size:calc(15.5px * var(--chat-font-scale));font-weight:400;line-height:var(--chat-line-height);color:var(--ink-s);
}
.rfmt-hadith-title{
  font-size:17px !important;font-weight:600 !important;
  color:var(--ink) !important;margin:22px 0 10px !important;
}
.rfmt-verse-title{
  font-size:17px !important;font-weight:600 !important;
  color:var(--ink) !important;margin:22px 0 10px !important;
}
.rfmt-fatwa-title{
  font-size:17px !important;font-weight:600 !important;
  color:var(--ink) !important;margin:22px 0 10px !important;
}
/* Arabic inside a quoted callout — matn, verse or plain quote.
   Applied by render-answer-dom.js via isArabicHeavyLine(); the callout class
   (verse/hadith/fatwa/quote) still supplies the frame, this supplies the script.
   Without it Arabic painted in EB Garamond at 15.5px LTR: a Latin serif
   rendering Arabic, which is what made quoted narrations look flat. */
.rfmt-ar{
  font-family:'Amiri','Traditional Arabic','Arabic Typesetting',serif;
  direction:rtl;
  text-align:right;
  font-style:normal;
  font-size:calc(20px * var(--chat-font-scale));
  line-height:2.05;
  letter-spacing:0;
}
.rfmt-quote strong,.rfmt-hadith-matn strong,.rfmt-verse-matn strong,.rfmt-fatwa-matn strong{font-weight:400}
[data-dark="1"] .rfmt-quote,
[data-dark="1"] .rfmt-hadith-matn,
[data-dark="1"] .rfmt-verse-matn{background:transparent;color:var(--ink-s);border-left-color:rgba(255,255,255,.18)}
[data-dark="1"] .rfmt-fatwa-matn{background:rgba(18,136,154,.14);border-left-color:rgba(132,227,241,.55)}
.rfmt-h2{
  font-family:var(--serif);font-size:17px;font-weight:600;
  color:var(--ink);margin:16px 0 6px;line-height:1.3;
}
.rfmt-h3{
  font-family:var(--serif);font-size:15.5px;font-weight:600;
  color:var(--ink-s);margin:12px 0 4px;line-height:1.3;
}
.rfmt-ul, .rfmt-ol{
  margin:8px 0 14px 0;padding-left:22px;
  display:flex;flex-direction:column;gap:10px;
}
.rfmt-ul li, .rfmt-ol li{
  font-size:16px;line-height:1.65;color:var(--ink-s);
  padding-left:2px;
  margin:0;
}
.rfmt-ul{list-style:disc}
.rfmt-ol{list-style:decimal}
/* Markdown tables */
.rfmt-table-wrap{
  margin:18px 0 22px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:calc(var(--r) + 2px);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.rfmt-table{
  width:100%;
  min-width:320px;
  border-collapse:collapse;
  font-family:var(--serif);
  font-size:15px;
  line-height:1.55;
}
.rfmt-table thead{
  background:linear-gradient(180deg,rgba(var(--teal-rgb),.1) 0%,rgba(var(--teal-rgb),.04) 100%);
  border-bottom:1px solid rgba(var(--teal-rgb),.22);
}
.rfmt-table th{
  padding:11px 14px;
  font-family:var(--display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:left;
  white-space:nowrap;
}
.rfmt-table td{
  padding:10px 14px;
  color:var(--ink-s);
  vertical-align:top;
  border-top:1px solid var(--line);
}
.rfmt-table tbody tr:hover td{
  background:rgba(var(--teal-rgb),.04);
}
.rfmt-table-row-even td{background:rgba(var(--teal-rgb),.02)}
.rfmt-table-ar{
  font-family:var(--arabic, "Amiri", "Scheherazade New", serif);
  font-size:1.12em;
  line-height:1.7;
  text-align:right;
}
.rfmt-table-wrap + .rfmt-h2,
.rfmt-table-wrap + .rfmt-h3{margin-top:24px}
.msg-answer-body .rfmt-table-wrap,
.msg-expl .rfmt-table-wrap,
.sec-body .rfmt-table-wrap,
.deeper-block-body .rfmt-table-wrap{
  max-width:100%;
}
[data-dark="1"] .rfmt-table-wrap{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.1);
}
[data-dark="1"] .rfmt-table thead{
  background:linear-gradient(180deg,rgba(var(--teal-rgb),.16) 0%,rgba(var(--teal-rgb),.06) 100%);
  border-bottom-color:rgba(var(--teal-rgb),.28);
}
[data-dark="1"] .rfmt-table td{border-top-color:rgba(255,255,255,.08)}
[data-dark="1"] .rfmt-table tbody tr:hover td{background:rgba(var(--teal-rgb),.08)}
[data-dark="1"] .rfmt-table-row-even td{background:rgba(255,255,255,.02)}
.sec-body .rfmt-ul, .sec-body .rfmt-ol{font-size:15.5px}
.msg-direct strong, .msg-expl strong, .sec-body strong{font-weight:600;color:var(--ink)}
.msg-direct em, .msg-expl em, .sec-body em{font-style:italic}
/* Sections accordion */
.msg-secs{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.sec-item{
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.sec-item:hover{border-color:rgba(var(--teal-rgb),.25);box-shadow:var(--shadow-sm)}
.sec-tog{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;background:var(--white);
  font-family:var(--display);font-size:16px;font-weight:600;
  text-align:left;gap:8px;cursor:pointer;border:none;color:var(--ink);
  transition:background .15s;
}
.sec-tog:hover{background:var(--soft)}
.sec-tog svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;transition:transform .2s;flex-shrink:0}
.sec-tog.open svg{transform:rotate(180deg)}
.sec-body{
  padding:13px 14px;font-size:15.5px;line-height:1.72;
  color:var(--ink-s);border-top:1px solid var(--line);display:none;
}
.sec-body.open{display:block}
.sec-body p{margin-bottom:10px}
.sec-body p:last-child{margin-bottom:0}
.arabic-block{
  font-family:'Amiri','Traditional Arabic','Arabic Typesetting',serif;
  font-size:1.35em;direction:rtl;text-align:right;
  line-height:2.1;color:var(--ink);
  background:var(--gold-s);
  border:1px solid rgba(201,154,53,.2);
  border-radius:6px;padding:10px 14px;margin:8px 0;
}
/* Notes */
.msg-note{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 13px;border-radius:8px;
  font-size:15px;line-height:1.55;margin-bottom:12px;
}
.note-gold{background:var(--gold-s);border:1px solid rgba(201,154,53,.22);color:var(--ink-s)}
.note-teal{background:var(--teal-sf);border:1px solid rgba(var(--teal-rgb),.18);color:var(--ink-s)}
.note-warn{background:rgba(194,68,28,.07);border:1px solid rgba(194,68,28,.18);color:var(--ink-s)}
.msg-note svg{width:15px;height:15px;stroke:currentColor;fill:none;flex-shrink:0;margin-top:2px;stroke-width:1.8}
/* Sources */
.msg-srcs{margin-bottom:14px}
.srcs-details{border:none;outline:none}
.srcs-summary{
  display:flex;align-items:center;gap:6px;
  list-style:none;cursor:pointer;user-select:none;
  padding:4px 2px;margin-bottom:6px;
}
.srcs-summary::-webkit-details-marker{display:none}
.srcs-chevron{
  width:14px;height:14px;stroke:var(--muted);fill:none;flex-shrink:0;
  transition:transform .18s ease;
}
.srcs-details[open] .srcs-chevron{transform:rotate(180deg)}
.srcs-label{
  font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.srcs-count{
  font-size:11px;font-weight:500;color:var(--white);
  background:var(--muted);border-radius:10px;
  padding:1px 6px;line-height:1.4;
}
.srcs-list{display:flex;flex-direction:column;gap:5px;padding-top:2px}
.src-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:7px;
  border:1px solid var(--line);background:var(--white);
  font-size:14px;color:var(--ink-s);line-height:1.35;
  text-decoration:none;
}
.src-chip-link{
  color:var(--teal);border-color:rgba(var(--teal-rgb),.2);
  background:var(--teal-sf);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.src-chip-link:hover{background:rgba(var(--teal-rgb),.14);border-color:rgba(var(--teal-rgb),.35);text-decoration:none}
.src-chip svg{width:12px;height:12px;stroke:currentColor;fill:none;flex-shrink:0;stroke-width:2}
.src-chip-link svg{stroke:var(--teal)}
/* Follow-ups */
.msg-fus{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.fu-chip{
  padding:7px 14px;border-radius:20px;
  border:1px solid rgba(var(--teal-rgb),.25);
  background:var(--teal-sf);color:var(--teal);
  font-family:var(--serif);font-size:15px;
  cursor:pointer;transition:background .15s,transform .12s,color .15s,border-color .15s;
}
.fu-chip:hover{background:var(--teal);color:var(--paper);border-color:var(--teal);transform:translateY(-1px)}

/* Prayer times — calculation method pills */
.prayer-method-zone{margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.prayer-method-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.prayer-method-pills{display:flex;flex-wrap:wrap;gap:6px}
.prayer-method-pill{
  font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.prayer-method-pill:hover{border-color:var(--teal);color:var(--teal-d);transform:translateY(-1px)}
.prayer-method-pill.active{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.prayer-method-pill:disabled{opacity:.55;cursor:wait}
/* Meta row */
.msg-meta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.msg-meta > div{justify-content:center;flex-wrap:wrap}
.intent-badge{
  display:inline-flex;padding:3px 9px;
  border-radius:4px;background:var(--soft);
  border:1px solid var(--line);
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.msg-act-btn{
  display:flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:6px;font-family:var(--serif);font-size:14px;
  color:var(--muted);cursor:pointer;border:none;background:none;
  transition:background .15s,color .15s;
}
.msg-act-btn:hover{background:var(--soft);color:var(--ink)}
.msg-act-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.msg-rating{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0}
.msg-rating-hint{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.msg-rating-stars{display:flex;align-items:center;gap:1px}
.msg-rating-star{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:none;background:none;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
  transition:color .15s,transform .12s;
}
.msg-rating-star.is-filled,.msg-rating-star:hover{color:var(--gold,#c9a227)}
.msg-rating-star.is-active{transform:scale(1.06)}
.msg-rating-star:disabled{opacity:.55;cursor:wait}
.msg-rating-label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.msg-rating-note-btn{
  font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted);cursor:pointer;font-family:var(--serif);
}
.msg-rating-note-btn:hover{border-color:var(--gold);color:var(--ink)}
.msg-rating-popover{
  position:fixed;z-index:120;width:min(320px,calc(100vw - 24px));
  padding:14px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.msg-rating-popover-title{font-size:14px;font-weight:600;color:var(--ink-s);margin-bottom:10px}
.msg-rating-popover-input{min-height:72px;margin-bottom:10px}
.msg-rating-popover-actions{display:flex;gap:8px;justify-content:flex-end}
/* Loading reminders (centered ayah / hadith while answer prepares) */
.rafiq-loading-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:min(48vh,340px);
  padding:32px 20px 36px;
  margin-left:-37px;
  width:calc(100% + 37px);
}
.rafiq-loading-reminder{
  width:min(100%,520px);
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .62s ease, transform .62s ease;
}
.rafiq-loading-reminder.is-visible{
  opacity:.58;
  transform:translateY(0);
}
[data-dark="1"] .rafiq-loading-reminder.is-visible{opacity:.52}
.rafiq-loading-rule{
  border:none;
  border-top:1px solid rgba(var(--teal-rgb),.22);
  margin:0;
  width:100%;
}
.rafiq-loading-text{
  font-family:var(--serif);
  /* The size of a quote in an answer (.rfmt-verse-matn), following the reader's text
     size, instead of a viewport clamp that made it 17px on a phone and 21px on a desktop. */
  font-size:calc(18.5px * var(--chat-font-scale, 1));
  line-height:var(--answer-lh, 1.72);
  color:var(--ink);
  font-style:italic;
  margin:22px 0 12px;
}
.rafiq-loading-source{
  display:block;
  font-family:var(--sans);
  font-size:13px;
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 22px;
}
.rafiq-loading-bismillah{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Amiri','Traditional Arabic','Arabic Typesetting',serif;
  font-size:clamp(32px,5.5vw,44px);
  direction:rtl;
  color:var(--teal);
  letter-spacing:.03em;
  opacity:0;
  transform:scale(.96);
  transition:opacity .48s ease, transform .48s ease;
  pointer-events:none;
}
.rafiq-loading-bismillah.is-visible{
  opacity:.85;
  transform:scale(1);
}
.rafiq-loading-status{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--muted);
  text-align:center;
  max-width:400px;
  opacity:0;
  transition:opacity .35s ease;
}
.rafiq-loading-status.is-visible{opacity:.75}
@media (prefers-reduced-motion:reduce){
  .rafiq-loading-reminder,
  .rafiq-loading-bismillah,
  .rafiq-loading-status{transition:none}
  .rafiq-loading-reminder.is-visible{opacity:.65;transform:none}
}
.msg-asst-body.msg-answer-reveal{
  animation:rafAnswerIn .52s ease both;
}
@keyframes rafAnswerIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .msg-asst-body.msg-answer-reveal{animation:none}
}
/* Legacy streaming dots (session load, etc.) */
.streaming-wrap{display:flex;flex-direction:column;gap:6px;padding:8px 0 8px 37px}
.streaming{display:flex;align-items:center;gap:5px}
.streaming-status{font-size:13px;line-height:1.45;color:var(--muted)}
.s-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:sd 1.4s ease-in-out infinite}
.s-dot:nth-child(2){animation-delay:.2s}
.s-dot:nth-child(3){animation-delay:.4s}
@keyframes sd{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}
.cursor-blink{
  display:inline-block;width:2px;height:1.1em;
  background:var(--teal);vertical-align:text-bottom;
  animation:cblink .85s ease-in-out infinite;margin-left:1px;
}
@keyframes cblink{0%,100%{opacity:1}50%{opacity:0}}
/* Input */
.chat-inp-area{
  flex-shrink:0;
  /* No strip behind the composer — the input box is the only surface here, so
     it floats on the page rather than sitting on a band of its own. */
  padding:24px 20px 22px;
  border-top:none;
  background:transparent;
}
.chat-inp-form{max-width:720px;margin:0 auto}
.inp-box{
  display:flex;align-items:flex-end;gap:10px;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:22px;
  padding:8px 8px 8px 20px;
  transition:border-color .2s,box-shadow .2s;
  box-shadow:0 2px 16px rgba(17,49,40,.06);
}
.inp-box:focus-within{
  border-color:rgba(var(--teal-rgb),.4);
  box-shadow:0 0 0 4px rgba(var(--teal-rgb),.1),0 4px 20px rgba(17,49,40,.08);
}
.inp-ta{
  flex:1;border:none;outline:none;background:transparent;
  font-family:var(--sans);font-size:15px;line-height:1.55;
  color:var(--ink);resize:none;max-height:200px;min-height:24px;
  overflow-y:auto;scrollbar-width:thin;
  padding:6px 0;
}
.inp-ta::placeholder{color:var(--muted);font-weight:400}
.inp-send{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(145deg,var(--teal),var(--teal-d));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border:none;cursor:pointer;
  transition:background .18s,transform .12s,opacity .15s,box-shadow .18s;
  box-shadow:0 3px 12px rgba(var(--teal-rgb),.32);
}
.inp-send:hover{background:var(--teal-d);transform:scale(1.06);box-shadow:0 4px 16px rgba(var(--teal-rgb),.38)}
.inp-send:active{transform:scale(.96)}
.inp-send:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.inp-send svg{width:17px;height:17px;stroke:#fff;stroke-width:2.5;fill:none}
.inp-send.inp-stop{background:linear-gradient(145deg,#c45c5c,#b54a4a)}
.inp-send.inp-stop:hover{background:#963d3d}
.inp-send.inp-stop svg{stroke:#fff;fill:#fff;stroke-width:0}
.msg-stopped .msg-direct{color:var(--muted);font-style:italic}
.inp-hint{text-align:center;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:10px}
.inp-hint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.inp-hint a:hover{color:var(--teal-d)}

/* ── Settings Modal ────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(11,28,23,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;
  /* The same gap above and below a modal. It was the status bar's height on top and the
     gesture bar's below, and the modal's 92dvh cap ignored both, so on a phone it ran
     past the bottom of the screen. --safe-area-inset-* comes from the app (Capacitor),
     env() from browsers; both are 0 where nothing overlaps the page. */
  --modal-gap:max(16px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  padding:var(--modal-gap) 16px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  width:min(480px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  transform:translateY(12px);
  transition:transform .25s;
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 2 * var(--modal-gap, 16px) - 24px);
  margin:12px auto;
  flex-shrink:0;
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.modal-title{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink)}
.settings-page-tabs{display:flex;align-items:baseline;gap:22px;min-width:0}
.settings-page-tab{
  appearance:none;background:none;border:none;padding:0 0 3px;margin:0;
  font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:.01em;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
}
.settings-page-tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--teal)}
.settings-page[hidden]{display:none !important}
#settings-display.settings-page{margin:0;padding:0;border:none}
.modal-close{
  width:30px;height:30px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;background:none;color:var(--muted);
  transition:color .2s,background .2s;
}
.modal-close:hover{color:var(--ink);background:var(--soft)}
.modal-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.modal-body{
  padding:22px;
  overflow-y:auto;
  flex:1;
  min-height:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.flag-modal-intro{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 18px}
.flag-mode-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin:0 0 14px}
.flag-mode-badge[data-mode="dawah"]{background:rgba(201,162,39,.18);color:var(--gold-d,#a07a1f)}
.flag-mode-badge[data-mode="regular"]{background:rgba(0,128,128,.12);color:var(--teal,#008080)}
[data-dark="1"] .flag-mode-badge[data-mode="dawah"]{background:rgba(201,162,39,.22);color:var(--gold,#c9a227)}
.flag-issues-sections{display:flex;flex-direction:column;gap:16px}
.flag-issues-section-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.flag-issues-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.flag-issue{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink-s);cursor:pointer;line-height:1.35}
.flag-issue input{accent-color:var(--gold);width:15px;height:15px;flex-shrink:0;margin-top:2px}
.flag-suggestions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-6px 0 14px}
.flag-suggestions-label{font-size:12px;font-weight:600;color:var(--muted);margin-right:4px}
.flag-suggestion-chip{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink-s);cursor:pointer;font-family:var(--serif);transition:border-color .2s,background .2s,color .2s}
.flag-suggestion-chip:hover{border-color:var(--gold);color:var(--ink)}
.flag-suggestion-chip.is-active{border-color:var(--gold);background:rgba(201,162,39,.12);color:var(--ink)}
.flag-severity-row{display:flex;gap:10px;flex-wrap:wrap}
.flag-severity-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;color:var(--ink-s);cursor:pointer;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .2s,background .2s;flex:1;min-width:140px}
.flag-severity-opt:has(input:checked){border-color:var(--gold);background:var(--soft)}
.flag-severity-label{font-weight:600}
.flag-severity-hint{font-size:12px;color:var(--muted);line-height:1.35}
.flag-preview{margin-top:4px;padding:12px 14px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line)}
.flag-preview-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.flag-preview-q{font-size:14px;color:var(--ink-s);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.flag-preview-a{font-size:13px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:520px){.flag-issues-grid{grid-template-columns:1fr}.flag-severity-opt{min-width:100%}}
.field{margin-bottom:20px}
.field-label{
  display:block;font-size:14px;font-weight:500;letter-spacing:.03em;
  color:var(--ink-s);margin-bottom:7px;
}
#settings-modal .field-label{
  font-size:17px;font-weight:600;letter-spacing:0;color:var(--ink);margin-bottom:8px;
}
#settings-modal .field-hint{
  margin:-2px 0 10px;font-size:14.5px;line-height:1.45;color:var(--muted);
}
#settings-modal .settings-block + .settings-block{
  margin-top:6px;padding-top:18px;border-top:1px solid var(--line);
}
#settings-modal .settings-split{display:flex;flex-direction:column;gap:8px}
#settings-general .pref-seg-btn{min-width:0;flex:1 1 120px;font-size:15px;padding:10px 8px}
.field-label span{font-weight:400;color:var(--muted);font-size:13px;margin-left:4px}
.field-input,.field-select{
  width:100%;padding:9px 13px;
  border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--white);color:var(--ink);
  font-family:var(--serif);font-size:16px;
  transition:border-color .2s,box-shadow .2s;
  appearance:none;-webkit-appearance:none;
}
.field-input:focus,.field-select:focus{
  outline:none;
  border-color:rgba(var(--teal-rgb),.4);
  box-shadow:0 0 0 3px rgba(var(--teal-rgb),.1);
}
.field-select-wrap{position:relative}
.field-select-wrap::after{
  content:"";
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--muted);
  pointer-events:none;
}
.theme-toggle{display:flex;gap:8px}
.theme-opt{
  flex:1;padding:9px;text-align:center;
  border-radius:var(--r);border:1.5px solid var(--line);
  background:var(--white);font-family:var(--serif);font-size:15px;
  cursor:pointer;color:var(--ink-s);transition:border-color .2s,color .2s,background .2s;
}
.theme-opt.active{border-color:var(--teal);color:var(--teal);background:var(--teal-sf)}
.settings-section{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
}
.settings-section:first-child{margin-top:0;padding-top:0;border-top:none}
.settings-section-title{
  font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;
}
.pref-segment{display:flex;flex-wrap:wrap;gap:8px}
.pref-seg-btn{
  flex:1;min-width:72px;padding:8px 10px;text-align:center;
  border-radius:var(--r);border:1.5px solid var(--line);
  background:var(--white);font-family:var(--serif);font-size:14px;
  cursor:pointer;color:var(--ink-s);transition:border-color .2s,color .2s,background .2s;
}
.pref-seg-btn.active{border-color:var(--teal);color:var(--teal);background:var(--teal-sf);font-weight:600}
.pref-seg-btn:hover:not(.active){border-color:rgba(var(--teal-rgb),.28);color:var(--ink)}
.accent-swatches{display:flex;flex-wrap:wrap;gap:10px}
.accent-swatch{
  width:38px;height:38px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.accent-swatch:hover{transform:scale(1.06)}
.accent-swatch.active{
  box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--teal);
}
.accent-swatch[data-accent="blue"]{background:#0285ff}
.accent-swatch[data-accent="teal"]{background:#12889a}
.accent-swatch[data-accent="emerald"]{background:#059669}
.accent-swatch[data-accent="sapphire"]{background:#2563eb}
.accent-swatch[data-accent="forest"]{background:#15803d}
.accent-swatch[data-accent="gold"]{background:#b45309}
.accent-swatch[data-accent="rose"]{background:#be123c}
.accent-swatch[data-accent="plum"]{background:#7c3aed}
.display-preview{
  margin-top:12px;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--soft);
  font-size:calc(18.5px * var(--chat-font-scale));line-height:var(--answer-lh);
  color:var(--ink-s);
}
.display-preview strong{color:var(--teal);font-weight:600}
.btn-display-reset{
  margin-top:10px;padding:0;border:none;background:none;
  font-family:var(--serif);font-size:13px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.btn-display-reset:hover{color:var(--teal)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.madhhab-badge{
  display:inline-flex;align-items:center;margin-bottom:10px;padding:3px 10px;
  border-radius:999px;font-size:12px;font-weight:600;
  background:var(--teal-sf);color:var(--teal-d);border:1px solid rgba(var(--teal-rgb),.25);
}
.retrieval-details,.retrieval-summary,.retrieval-list,.retrieval-needs{display:none!important}
.retrieval-panel{display:none!important}
.btn-scroll-latest{
  position:fixed;bottom:calc(88px + env(safe-area-inset-bottom,0px));right:20px;
  z-index:40;padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--white);color:var(--teal-d);font-size:13px;font-weight:600;
  box-shadow:var(--shadow-sm);cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.btn-scroll-latest.visible{opacity:1;pointer-events:auto}
.btn-scroll-latest:hover{border-color:var(--teal);color:var(--teal)}
#command-palette{
  align-items:flex-start;
  padding-top:min(18vh,120px);
}
.sb-folder-row{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 0 8px;padding:0 2px;
}
.sb-folder-row .sb-sect-label{margin:0}
.sb-new-folder-link{
  border:none;background:none;padding:4px 6px;font-size:12px;color:var(--muted);
  cursor:pointer;font-family:var(--serif);border-radius:6px;
}
.sb-new-folder-link:hover{color:var(--teal);background:var(--soft)}
.command-palette-box{
  width:min(520px,calc(100% - 32px));background:var(--white);
  border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--line);
  overflow:hidden;
}
.command-palette-input{
  width:100%;padding:14px 16px;border:none;border-bottom:1px solid var(--line);
  font-size:16px;background:var(--paper);color:var(--ink);
}
.command-palette-input:focus{outline:none}
.command-palette-list{max-height:320px;overflow:auto;padding:6px}
.cmd-item{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 12px;border:none;background:none;text-align:left;
  font-family:var(--serif);font-size:15px;color:var(--ink-s);cursor:pointer;
  border-radius:8px;
}
.cmd-item:hover,.cmd-item.active{background:var(--teal-sf);color:var(--teal-d)}
.cmd-keys{font-size:12px;color:var(--muted)}
.pref-check-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.pref-check-row input{width:18px;height:18px;accent-color:var(--teal)}
.modal-foot{
  padding:16px 22px 22px;
  display:flex;gap:10px;justify-content:flex-end;
  flex-shrink:0;
  border-top:1px solid var(--line);
  background:var(--paper);
  position:sticky;
  bottom:0;
  z-index:1;
}
.btn-modal-save{
  padding:9px 22px;border-radius:var(--r);
  background:var(--teal);color:var(--paper);
  font-family:var(--display);font-size:16px;font-weight:500;
  cursor:pointer;border:none;
  transition:background .2s;
}
.btn-modal-save:hover{background:var(--teal-d)}
.btn-modal-cancel{
  padding:9px 18px;border-radius:var(--r);
  background:transparent;color:var(--muted);
  font-family:var(--display);font-size:16px;
  cursor:pointer;border:1px solid var(--line);
  transition:color .2s,border-color .2s;
}
.btn-modal-cancel:hover{color:var(--ink);border-color:var(--line)}

/* ── Mob sidebar overlay ───────────────────────────────────────────────────── */
.mob-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(11,28,23,.4);z-index:15;
  backdrop-filter:blur(2px);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .features{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .features{grid-template-columns:1fr}
  .topbar-nav{display:none}
  .topbar-mob-menu{display:flex}
  :root{--sb-w:328px}
  .chat-shell.sb-collapsed .chat-sb{
    width:var(--sb-w);min-width:var(--sb-w);opacity:1;border-right-color:var(--line);
    pointer-events:auto;
  }
  .chat-sb{
    position:fixed;top:0;bottom:0;left:0;
    transform:translateX(-100%);
    box-shadow:var(--shadow);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .chat-sb.open{transform:translateX(0)}
  .mob-overlay.open{display:block}
  .chat-tb-menu-btn{display:flex}
  .chat-topbar{
    flex-wrap:wrap;align-items:center;row-gap:8px;
    padding:8px 12px 10px;
  }
  .chat-tb-center{
    position:static;transform:none;left:auto;top:auto;
    order:3;flex:1 0 100%;width:100%;
    display:flex;justify-content:center;pointer-events:auto;
  }
  .chat-tb-center .mode-pill{
    width:100%;max-width:340px;
  }
  .chat-tb-center .mode-opt{
    flex:1;min-width:0;padding:9px 12px;font-size:14px;
  }
  .chat-tb-acts .btn-back,
  #btn-command-palette,
  #btn-chat-export{display:none}
  .msgs{padding:20px 16px 10px}
  .chat-inp-area{
    padding:10px 14px max(28px, calc(18px + env(safe-area-inset-bottom, 0px)));
  }
  .chat-inp-form{max-width:none}
  .inp-box{
    border-radius:18px;
    padding:8px 8px 8px 16px;
    gap:8px;
    box-shadow:0 4px 18px rgba(17,49,40,.07);
  }
  .inp-ta{
    font-size:16px;line-height:1.45;padding:8px 0;
    font-family:var(--sans);
  }
  .inp-ta::placeholder{
    color:var(--muted);opacity:.75;font-family:var(--sans);font-weight:400;
  }
  [data-dawah="1"] .inp-ta::placeholder{color:var(--muted);opacity:.75}
  .inp-send{width:42px;height:42px}
  .inp-hint{
    margin-top:8px;font-size:11.5px;line-height:1.4;
    padding:0 4px;
  }
  .inp-hint-keys{display:none}
  .btn-scroll-latest{
    bottom:calc(118px + env(safe-area-inset-bottom, 0px));
    right:14px;
  }
  .chat-welcome{
    /* Extra bottom padding lifts the centred block: the hero sat visually low
       against the composer with the starters gone. */
    padding:24px 18px 96px;
    min-height:unset;
    gap:0;
    flex:1;
    width:100%;
    justify-content:center;
    align-items:center;
  }
  .chat-wlc-hero{
    width:100%;
    align-items:center;
    text-align:center;
    margin:0 auto;
  }
  .chat-wlc-mark{
    margin:0 auto 18px;
  }
  /* The greeting is the only thing on the empty screen now, so it can carry a
     little more size than it did when starter cards sat under it. */
  .wlc-salam{font-size:34px;line-height:1.45}
  .wlc-sub{font-size:19px}
  .chat-wlc-tagline{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .starters-section{
    display:none !important;
  }
  .msg-user{max-width:90%}
}
@media(min-width:681px){
  .chat-tb-menu-btn{display:flex}
  #btn-sb-collapse{display:flex}
  #btn-sb-close{display:none}
}
@media(max-width:420px){.starters{grid-template-columns:1fr}}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

/* === Rafiq Enhanced Interactive Blocks === */
.msg-secs-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--soft);
  flex-wrap:wrap;
}
.msg-secs-toolbar-label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.msg-secs-toolbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msg-secs-toolbar-actions{display:flex;gap:6px}
.msg-secs-filter{
  display:flex;gap:6px;flex-wrap:wrap;
}
.msg-secs-toolbtn{
  border:1px solid var(--line);background:var(--white);color:var(--ink-s);
  border-radius:7px;padding:4px 9px;font-size:12px;cursor:pointer;
}
.msg-secs-toolbtn:hover{border-color:rgba(var(--teal-rgb),.35);color:var(--teal)}
.msg-secs-filterbtn{
  border:1px solid rgba(var(--teal-rgb),.22);
  background:rgba(var(--teal-rgb),.06);color:var(--teal);
  border-radius:999px;padding:3px 9px;font-size:11px;cursor:pointer;
}
.msg-secs-filterbtn.active{
  background:var(--teal);color:var(--paper);border-color:var(--teal);
}
.sec-kind-head{display:flex;align-items:center;gap:8px;min-width:0}
.sec-kind-icon{
  width:22px;height:22px;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;
  background:var(--teal-sf);border:1px solid rgba(var(--teal-rgb),.18);
}
.sec-kind-pill{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--teal);background:rgba(var(--teal-rgb),.08);border:1px solid rgba(var(--teal-rgb),.2);
}
.sec-copy-btn{
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  border-radius:6px;padding:2px 6px;font-size:12px;cursor:pointer;margin-right:6px;
}
.sec-copy-btn:hover{color:var(--teal);border-color:rgba(var(--teal-rgb),.32)}
.sec-item.sec-kind-fiqh{border-left:none}
.sec-item.sec-kind-fiqh .sec-body{background:transparent}
.sec-item.sec-kind-general{border-left:3px solid rgba(var(--teal-rgb),.35)}
.sec-item.sec-kind-dhikr{border-left:none}
.sec-item.sec-kind-dhikr .sec-body{background:transparent}
/* Verse/hadith/dhikr: no side bar or panel tint — evidence blocks use teal dividers only */
.sec-item.sec-kind-verse,
.sec-item.sec-kind-hadith{border-left:none}
.sec-item.sec-kind-verse .sec-body,
.sec-item.sec-kind-hadith .sec-body{background:transparent}
.hadith-block{
  border:1px solid rgba(var(--teal-rgb),.22);background:rgba(var(--teal-rgb),.06);
  border-radius:8px;padding:10px 12px;margin:8px 0;
}
.verse-ref{
  display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;
  font-size:11px;background:var(--gold-s);border:1px solid rgba(201,154,53,.23);
  color:var(--gold-d);margin:0 0 4px;
}
.sec-item[data-hidden-kind="1"]{display:none}
.rf-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--white);
  padding:10px 12px;
  margin:10px 0;
}
.rf-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.rf-card-head-left{display:flex;align-items:center;gap:8px}
.rf-card-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rf-card-btn{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--muted);
  padding:2px 8px;
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
}
.rf-card-btn:hover{border-color:rgba(var(--teal-rgb),.32);color:var(--teal)}
.rf-card-btn.active{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.rf-card-body{font-size:15.5px;line-height:1.72}
.rf-card.collapsed .rf-card-body{display:none}
.rf-card-icon{
  width:18px;height:18px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.rf-card-verse{
  border-left:none;
  background:transparent;
}
.rf-card-verse .rf-card-icon{
  color:var(--gold-d);
  border:1px solid rgba(201,154,53,.35);
  background:var(--gold-s);
}
.rf-card-fatwa{
  border-left:none;
  background:transparent;
}
.rf-card-fatwa .rf-card-icon{
  color:var(--teal);
  border:1px solid rgba(var(--teal-rgb),.3);
  background:rgba(var(--teal-rgb),.08);
}
.rf-card-hadith{
  border-left:none;
  background:transparent;
}
.rf-card-hadith .rf-card-icon{
  color:var(--teal);
  border:1px solid rgba(var(--teal-rgb),.3);
  background:rgba(var(--teal-rgb),.08);
}
.rf-inline-head{
  margin:10px 0 6px;
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
}


<style id="rfv2-evidence-style">
.msg-secs .sec-body{display:grid;gap:10px}
.rfv2-evidence,.rf-card{
  border:none;
  background:transparent;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.rfv2-evidence .rfv2-k,.rf-card .rfv2-k{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#0f6e7a;margin-bottom:8px;
}
.rf-card.rfv2-plain{
  border-color:rgba(10,35,42,.1);
  background:transparent;
  box-shadow:none;
  padding:0;
}
[data-dark="1"] .rfv2-evidence,[data-dark="1"] .rf-card{
  border-color:rgba(26,168,188,.25);
  background:linear-gradient(180deg,rgba(26,168,188,.11),rgba(26,168,188,.06));
}
[data-dark="1"] .rf-card.rfv2-plain{background:transparent}

/* Chrome the reader does not need: the intent label, and a Branch action whose
   text was removed. A button with no label is worse than no button. */
.intent-badge{display:none!important}
.msg-act-branch{display:none!important}
/* Phones could be dragged sideways in the chat pane. Nothing is meant to sit
   outside the viewport, so the pane is pinned and only genuinely wide children
   (code, tables, long Arabic) scroll inside their own box. */
@media(max-width:768px){
  html,body{overflow-x:hidden;max-width:100%}
  #view-chat,.chat-wrap,.chat-scroll,.msg-list,.msg,.msg-body{max-width:100%;overflow-x:hidden}
  .msg-body pre,.msg-body table,.msg-body blockquote{max-width:100%;overflow-x:auto}
}

/* The dial and the locate button both sat off-centre: the dial's flex parent
   had no width to centre within, and .qibla-locate is inline-flex, which auto
   margins cannot centre. Give the wrap a width and make the button a
   fit-content block. */
.qibla-dialwrap{width:100%;margin-left:auto;margin-right:auto}
.qibla-dialwrap svg{display:block;margin-left:auto;margin-right:auto}
.qibla-locate{display:flex!important;width:fit-content;margin-left:auto!important;margin-right:auto!important}

/* ---- Shared read-only conversation ----------------------------------------
   The share page used to be a separate 443-line renderer with its own styles,
   which is why it looked nothing like the chat: two implementations of one
   surface, drifting apart with every change. It now serves THIS page with a
   flag, so the background, blocks, typography and logo are identical because
   they are the same CSS - and cannot diverge again.
   Only what a reader cannot act on is removed. */
body.share-mode #chat-sb,
body.share-mode #btn-sb-toggle,
body.share-mode #mob-overlay,
body.share-mode .chat-inp-area,
body.share-mode #chat-starters,
body.share-mode .chat-tb-acts,
body.share-mode #btn-scroll-latest,
body.share-mode .msg-acts,
body.share-mode .msg-rate{display:none!important}
body.share-mode .chat-main{margin-left:0;width:100%}
body.share-mode .chat-wrap{padding-left:0}
.share-cta{display:none;padding:20px 16px 30px;text-align:center}
body.share-mode .share-cta{display:block}
.share-cta-note{margin:0 0 12px;font-size:14px;color:var(--muted)}
/* Default blue (#0285ff), the same blue the send button uses before any accent
   override. --accent is not a token on this page, so the old fallback painted
   the button green. */
.share-cta-btn{display:inline-block;padding:12px 26px;border-radius:999px;background:#0285ff;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.share-cta-btn:hover{background:#0074e0}

<style id="rfv5-fullhero-fix">
.view#view-home{
  --rfvL-bg:#f4fafb;
  --rfvL-bg2:#eef6f8;
  --rfvL-ink:#08181d;
  --rfvL-muted:#46606a;
  --rfvL-line:rgba(10,44,53,.12);
  --rfvL-accent:#178ea0;
  --rfvL-accent2:#126a77;
  --rfvL-gold:#c79a3c;
  --rfvL-card:rgba(255,255,255,.88);
  --rfvL-shadow:0 18px 46px rgba(8,36,43,.12);
  position:relative;
  background:
    radial-gradient(1200px 540px at 84% -5%, rgba(23,142,160,.14), transparent 58%),
    radial-gradient(860px 500px at 10% 6%, rgba(199,154,60,.1), transparent 54%),
    linear-gradient(180deg,var(--rfvL-bg),var(--rfvL-bg2));
}
#view-home .topbar-wrap{
  border-bottom:1px solid var(--rfvL-line);
  background:rgba(247,252,253,.82);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}
#view-home .topbar{
  width:min(1320px,100%);
  gap:28px;
}
#view-home .topbar-brand{
  font-size:30px;
  letter-spacing:-.015em;
}
#view-home .topbar-nav a{
  font-size:16px;
  font-weight:500;
  color:#36505a;
  border-radius:999px;
  padding:7px 14px;
}
#view-home .topbar-nav a:hover,#view-home .topbar-nav a.active{
  color:#0c3f4a;
  background:rgba(23,142,160,.08);
}
#view-home .btn-open-chat{
  border-radius:999px;
  padding:10px 20px;
  font-weight:600;
  box-shadow:0 8px 28px rgba(23,142,160,.34);
}
#view-home .hero{
  min-height:92svh;
  align-items:stretch;
  text-align:left;
  padding:34px clamp(20px,5vw,72px) clamp(50px,8vh,90px);
}
#view-home .hero-content{
  max-width:1220px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,420px) minmax(580px,1fr);
  gap:26px;
  align-items:start;
}
#view-home .hero-content > .bismillah-banner,
#view-home .hero-content > .hero-badge,
#view-home .hero-content > .hero-title,
#view-home .hero-content > .hero-sub,
#view-home .hero-content > .hero-actions{
  display:none !important;
}
#view-home .hero-content::before{
  content:"Islamic AI Companion";
  grid-column:1/2;
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:6px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(23,142,160,.28);
  background:rgba(23,142,160,.08);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0f6672;
}
#view-home .hero-content::after{
  content:"";
  grid-column:1/2;
  width:100%;
  height:0;
}
#view-home .hero-content{
  counter-reset: none;
}
#view-home .hero-glow{opacity:.55}
#view-home .hero-deco{opacity:.32;top:42%}
#view-home .hero-scroll{display:none}
#view-home .hero-content{
  position:relative;
}
#view-home .hero-content:has(+*){}
#view-home .hero-content{
  align-items:stretch;
}
#view-home .hero-content > *{
  grid-column:1/2;
}
#view-home .hero-content{
  isolation:isolate;
}
#view-home .hero-content .rfv-landing-left{}
#view-home .hero-content .rfv-landing-preview{}
#view-home .hero-content{
  --leftCardPad:24px;
}
#view-home .hero-content{
  padding-top:12px;
}
#view-home .hero-content{
  /* left panel clone via pseudo blocks */
}
#view-home .hero-content{
  position:relative;
}
#view-home .hero-content .__rfvLandingInjected{display:none}
#view-home .hero-content{
  display:grid;
}
#view-home .hero-content{
  grid-auto-flow:row;
}
#view-home .hero-content{
  grid-template-areas:"left right";
}
#view-home .hero-content > *{grid-area:left}
#view-home .hero-content .rfv-landing-preview-shell{
  grid-area:right;
}
#view-home .section{
  width:min(1320px,100%);
  padding:72px clamp(20px,5vw,72px);
}
#view-home #features .section-sub,#view-home #topics .section-sub{
  max-width:760px;
  color:#43606a;
  font-size:18px;
}
#view-home .section-title{
  font-size:clamp(34px,4.7vw,56px);
  letter-spacing:-.025em;
}
#view-home .features{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
#view-home .feat-card{
  border:1px solid var(--rfvL-line);
  background:var(--rfvL-card);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:18px;
  box-shadow:var(--rfvL-shadow);
  padding:26px 24px 24px;
}
#view-home .feat-heading{font-size:24px}
#view-home .feat-body{font-size:17px;color:#3f5b65}
#view-home .topics-bg{
  border-top:1px solid var(--rfvL-line);
  border-bottom:1px solid var(--rfvL-line);
  background:
    radial-gradient(720px 260px at 80% -10%, rgba(23,142,160,.09), transparent 55%),
    #f1f8fa;
}
#view-home .topics-chips{gap:12px}
#view-home .topic-chip{
  border-radius:999px;
  font-size:15px;
  padding:10px 17px;
  border-color:rgba(10,44,53,.15);
  background:rgba(255,255,255,.9);
}
#view-home .topic-chip:hover,#view-home .topic-chip.active{
  border-color:rgba(23,142,160,.5);
  box-shadow:0 8px 22px rgba(23,142,160,.18);
}
#view-home .quote-band{
  background:linear-gradient(180deg,#0f252d,#0b1c22);
}
#view-home .cta-band{
  background:
    radial-gradient(800px 240px at 20% 0%, rgba(23,142,160,.12), transparent 60%),
    linear-gradient(180deg,#f8fcfd,#edf6f8);
}
#view-home .cta-title{font-size:clamp(34px,4.5vw,54px)}
#view-home .footer{
  background:#f6fbfc;
  border-top:1px solid var(--rfvL-line);
}
@media(max-width:980px){
  #view-home .hero-content{
    grid-template-columns:1fr;
    gap:18px;
  }
  #view-home .hero-content > *{grid-area:auto}
  #view-home .features{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  #view-home .features{grid-template-columns:1fr}
  #view-home .section{padding:56px 18px}
}
/* Hard reset: centered full-viewport landing hero */
#view-home .rfv-landing-left,
#view-home .rfv-landing-preview-shell{
  display:none !important;
}
#view-home .hero{
  min-height:100svh !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:calc(var(--tb-h) + 18px) 20px 46px !important;
}
#view-home .hero-content{
  width:min(980px,100%) !important;
  max-width:980px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  padding-top:0 !important;
}
#view-home .hero-content::before,
#view-home .hero-content::after{
  content:none !important;
  display:none !important;
}
#view-home .hero-content > .bismillah-banner,
#view-home .hero-content > .hero-badge,
#view-home .hero-content > .hero-title,
#view-home .hero-content > .hero-sub,
#view-home .hero-content > .hero-actions{
  display:block !important;
}
#view-home .hero-title{
  font-size:clamp(50px,8.7vw,106px) !important;
  line-height:1.03 !important;
  margin:4px 0 10px !important;
}
#view-home .hero-title-ar{
  font-size:.52em !important;
  display:block !important;
}
#view-home .hero-sub{
  max-width:760px !important;
  font-size:clamp(18px,2.4vw,24px) !important;
  line-height:1.65 !important;
  margin:0 auto 30px !important;
}
#view-home .hero-actions{
  justify-content:center !important;
}
#view-home .hero-scroll{
  display:flex !important;
}
.msg-secs .sec-body{font-size:15.5px;line-height:1.72;display:grid;gap:10px}
.msg-secs .sec-body p,.msg-secs .sec-body li{font-size:1em;line-height:1.68}
.msg-secs .sec-body strong{font-weight:700;color:var(--ink)}
.rfv4-stack{display:grid;gap:12px}
.rf-card,.rfv2-evidence{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.rfv4-card{
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.rfv4-card--quran,
.rfv4-card--hadith{
  border:none;
  background:transparent;
  box-shadow:none;
}
.rfv4-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rfv4-icon{
  width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:rgba(18,136,154,.16);color:#0f6e7a;border:1px solid rgba(18,136,154,.25)
}
.rfv4-chip{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid rgba(18,136,154,.28);
  color:#0f6e7a;background:rgba(18,136,154,.08)
}
.rfv4-list{
  border:1px solid rgba(10,35,42,.12);
  border-radius:12px;
  padding:10px 14px 10px 22px;
  background:rgba(255,255,255,.72);
}
.rfv4-note,.rfv4-reflect,.rfv4-practical,.rfv4-scholar{
  border-radius:12px;
  padding:11px 13px;
  border:1px solid rgba(10,35,42,.1);
}
.rfv4-note{background:rgba(18,136,154,.045);border-left:4px solid rgba(18,136,154,.55)}
.rfv4-reflect{background:rgba(201,154,53,.08);border-left:4px solid rgba(201,154,53,.55)}
.rfv4-practical{background:rgba(35,124,154,.05);border-left:4px solid rgba(35,124,154,.5)}
.rfv4-scholar{background:rgba(111,66,193,.06);border-left:4px solid rgba(111,66,193,.5)}
.rfv4-block-head{
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.rfv4-card--quran{border-color:rgba(18,136,154,.3)}
.rfv4-card--hadith{border-color:rgba(35,124,154,.3)}
.rfv4-card--fatwa{
  border-color:rgba(18,136,154,.3);
  background:transparent;
}
.rfv4-card--fatwa .rfv4-icon{background:rgba(18,136,154,.12);border-color:rgba(18,136,154,.35);color:#0f6e7a}
.rfv4-card--fatwa .rfv4-chip{border-color:rgba(18,136,154,.35);background:rgba(18,136,154,.1);color:#0f6e7a}
.rfv4-meta-grid{display:grid;gap:8px}
/* Fatwa block layout: shared/evidence/evidence-blocks.css */
.rfv4-meta-row{
  border:1px solid rgba(10,35,42,.1);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.74)
}
.rfv4-meta-row b{
  display:block;margin-bottom:3px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)
}
/* Ayah / hadith / fatwa block UI: src/ui/shared/evidence/evidence-blocks.css */

/* rfv6-nizam-center: hard override for current landing markup */
.rf-hero{
  min-height:100svh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:calc(var(--tb-h,72px) + 18px) clamp(18px,3vw,36px) 42px !important;
}
.rf-hero-grid{
  width:min(1140px,100%) !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
}
.rf-hero-copy{
  margin:0 auto !important;
  max-width:940px !important;
  text-align:center !important;
  border:1px solid rgba(10,44,53,.14) !important;
  border-radius:28px !important;
  padding:clamp(30px,5.8vw,72px) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,253,252,.92)) !important;
  box-shadow:0 28px 70px rgba(8,36,43,.14) !important;
}
.rf-hero-copy .rf-kicker{
  display:inline-flex !important;
  margin:0 auto 12px !important;
  padding:8px 15px !important;
  border-radius:999px !important;
  border:1px solid rgba(18,136,154,.22) !important;
  background:rgba(18,136,154,.08) !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.rf-hero-copy h1{font-size:clamp(62px,11vw,128px) !important;line-height:.94 !important;margin:6px 0 8px !important}
.rf-hero-copy .rf-ar{font-size:clamp(30px,4.1vw,48px) !important;margin-bottom:14px !important}
.rf-hero-copy .rf-lede{max-width:760px !important;margin:0 auto !important;font-size:clamp(20px,2.1vw,30px) !important;line-height:1.55 !important}
.rf-hero-actions,.rf-trust-row{justify-content:center !important}
.rf-home-metrics{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.rf-hero-stage,
.rf-home-board,
.rf-hero-sky{display:none !important}
@media (max-width: 900px){
  .rf-home-metrics{grid-template-columns:1fr !important}
  .rf-hero-copy{padding:30px 22px !important}
}

/* rfv8: nizam-events hero header clone for rafiq */
.rfv8-nizam-hero{
  min-height:calc(100svh - 72px);
  position:relative;
  display:grid;
  place-items:center;
  padding:clamp(88px,12.5vh,148px) 24px 112px;
  overflow:hidden;
}
.rfv8-hero-geometry{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rfv8-hero-geometry::before{
  content:"";
  position:absolute;
  width:min(60vw,880px);
  height:min(60vw,880px);
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%230c6b57' stroke-width='1.4' opacity='.46'%3E%3Cpath d='M450 42 544 261 779 121 639 356 858 450 639 544 779 779 544 639 450 858 356 639 121 779 261 544 42 450 261 356 121 121 356 261Z'/%3E%3Cpath d='M450 138 519 303 696 204 597 381 762 450 597 519 696 696 519 597 450 762 381 597 204 696 303 519 138 450 303 381 204 204 381 303Z'/%3E%3Cpath d='M450 224 500 350 626 300 550 400 676 450 550 500 626 600 500 550 450 676 400 550 274 600 350 500 224 450 350 400 274 300 400 350Z'/%3E%3C/g%3E%3Cg fill='%23c99a35' opacity='.28'%3E%3Ccircle cx='450' cy='42' r='9'/%3E%3Ccircle cx='858' cy='450' r='9'/%3E%3Ccircle cx='450' cy='858' r='9'/%3E%3Ccircle cx='42' cy='450' r='9'/%3E%3C/g%3E%3C/svg%3E")
    center/contain no-repeat;
  opacity:.40;
  filter:saturate(.85);
  animation:rfv8Spin 42s linear infinite;
}
.rfv8-hero-geometry::after{
  content:"";
  position:absolute;
  width:min(92vw,1320px);
  height:580px;
  left:50%;
  top:59%;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.82) 18%,rgba(255,255,255,.94) 50%,rgba(255,255,255,.82) 82%,transparent),
    repeating-linear-gradient(90deg,transparent 0 55px,rgba(12,107,87,.028) 55px 57px,transparent 57px 112px);
  opacity:.58;
  mask-image:radial-gradient(ellipse at 50% 55%, black 0 42%, transparent 70%);
}
.rfv8-orbital{
  position:absolute;
  left:50%;
  top:54%;
  width:min(64vw,840px);
  height:min(64vw,840px);
  transform:translate(-50%,-50%);
  opacity:.42;
  animation:rfv8Breathe 9s ease-in-out infinite;
}
.rfv8-orbital span{
  position:absolute;display:block;width:9px;height:9px;border-radius:50%;
  background:#c99a35;box-shadow:0 0 22px rgba(201,154,53,.36);
}
.rfv8-orbital span:nth-child(1){ left:18%; top:52%; animation:rfv8D1 10s ease-in-out infinite; }
.rfv8-orbital span:nth-child(2){ right:20%; top:38%; animation:rfv8D2 12s ease-in-out infinite; }
.rfv8-orbital span:nth-child(3){ left:45%; bottom:10%; animation:rfv8D3 11s ease-in-out infinite; }
.rfv8-orbital span:nth-child(4){ left:24%; top:28%; width:6px; height:6px; animation:rfv8D2 9.5s ease-in-out infinite; }
.rfv8-orbital span:nth-child(5){ right:27%; top:62%; width:7px; height:7px; animation:rfv8D3 10.5s ease-in-out infinite; }
.rfv8-orbital span:nth-child(6){ left:62%; bottom:21%; width:5px; height:5px; animation:rfv8D1 8.5s ease-in-out infinite; }
.rfv8-orbital span:nth-child(7){ left:50%; top:20%; width:8px; height:8px; animation:rfv8D4 13s ease-in-out infinite; }
.rfv8-orbital span:nth-child(8){ right:14%; top:52%; width:6px; height:6px; animation:rfv8D4 9s ease-in-out infinite reverse; }
.rfv8-orbital span:nth-child(9){ left:11%; bottom:29%; width:5px; height:5px; animation:rfv8D5 11.6s ease-in-out infinite; }
.rfv8-orbital span:nth-child(10){ right:35%; bottom:12%; width:7px; height:7px; animation:rfv8D5 10.3s ease-in-out infinite reverse; }
.rfv8-hero-content{
  width:min(1180px,100%);
  position:relative;
  z-index:2;
  text-align:center;
  padding:30px 0 36px;
}
.rfv8-hero-kicker{
  width:fit-content;
  margin:0 auto 24px;
  color:rgba(11,28,23,.62);
  font-size:clamp(15px,1.4vw,20px);
  font-weight:650;
  letter-spacing:.03em;
}
.rfv8-hero-kicker::before{
  content:"";
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  margin-right:13px;
  background:linear-gradient(135deg,#12889a,#34baa2);
  box-shadow:0 0 20px rgba(12,107,87,.32);
  vertical-align:.06em;
}
.rfv8-hero-title{
  margin:0 auto;
  max-width:1060px;
  font-size:clamp(52px,6.6vw,102px);
  line-height:.9;
  font-weight:500;
  color:#101d18;
}
.rfv8-hero-title .wash{
  display:block;
  color:transparent;
  background:linear-gradient(102deg,#0b1c17 0%,#0b1c17 20%,#7bb7a8 46%,#d4a947 77%,#0c6b57 100%);
  background-size:160% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:rfv8Sheen 9s ease-in-out infinite;
}
.rfv8-hero-copy{
  max-width:820px;
  margin:22px auto 0;
  color:rgba(11,28,23,.68);
  font-size:clamp(15px,1.25vw,20px);
  line-height:1.34;
  font-style:italic;
  font-weight:500;
}
.rfv8-hero-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.rfv8-hero-actions .pill-btn{
  min-height:38px;padding:0 16px;font-size:19px;border-radius:10px;
  border:1px solid rgba(10,35,42,.12);cursor:pointer;
}
.rfv8-hero-actions .pill-btn.primary{
  background:linear-gradient(135deg,#12889a,#0f6e7a);color:#fff;border-color:rgba(15,110,122,.35);
}
.rfv8-hero-actions .pill-btn.gold{
  background:linear-gradient(135deg,#fee8a7,#d9a33d);border-color:rgba(167,111,16,.28);color:#372a0e;
}
.rfv8-scroll-word{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:rgba(11,28,23,.42);font-size:18px;letter-spacing:.26em;font-weight:500;text-decoration:none;
  animation:rfv8Pulse 2.8s ease-in-out infinite;
}
@keyframes rfv8Spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rfv8Sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes rfv8Breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.04)}}
@keyframes rfv8D1{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-14px)}}
@keyframes rfv8D2{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,12px)}}
@keyframes rfv8D3{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,16px)}}
@keyframes rfv8D4{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-10px)}}
@keyframes rfv8D5{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}
@keyframes rfv8Pulse{0%,100%{opacity:.48}50%{opacity:.92}}

/* Production landing: keep the multi-page product site rich and visible. */
.rf-landing{
  --rf-bg:#F7FAFC;
  --rf-ink:#101827;
  --rf-muted:#536170;
  --rf-line:#D8E3EA;
  --rf-green:#237E7E;
  --rf-green-2:#145D66;
  --rf-gold:#B9862F;
  --rf-blue:#3C64A3;
  --rf-clay:#B45D48;
  --rf-panel:rgba(255,255,255,.88);
  --rf-shadow:0 18px 48px rgba(19,40,58,.10);
  background:
    radial-gradient(800px 420px at 8% 8%,rgba(185,134,47,.16),transparent 58%),
    radial-gradient(900px 480px at 96% 12%,rgba(35,126,126,.16),transparent 60%),
    linear-gradient(180deg,#F8FBFC 0%,#EEF5F3 52%,#F8F2E8 100%) !important;
}
.rf-header{border-radius:8px!important}
.rf-hero{display:block!important;min-height:calc(100svh - 92px)!important;padding:42px clamp(22px,5vw,72px) 44px!important}
.rf-hero-grid{width:min(1220px,100%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(340px,.86fr) minmax(430px,1.14fr)!important;gap:28px!important;align-items:center!important}
.rf-hero-copy,.rf-phone,.rf-home-board article,.rf-product-shot,.rf-gif-card,.rf-feature-grid article,.rf-capability-strip div,.rf-module-grid article,.rf-pathway-board article,.rf-principles article,.rf-response-preview{border-radius:8px!important;border:1px solid var(--rf-line)!important;background:var(--rf-panel)!important;box-shadow:var(--rf-shadow)!important}
.rf-hero-copy{padding:clamp(24px,3vw,38px)!important}
.rf-hero h1{font-size:clamp(70px,9.4vw,132px)!important;line-height:.86!important;letter-spacing:0!important;margin:0!important;color:var(--rf-ink)!important}
.rf-ar{font-size:clamp(24px,3vw,38px)!important;margin:12px 0 0!important;color:var(--rf-gold)!important;text-align:left!important}
.rf-lede{font-size:clamp(18px,1.55vw,22px)!important;line-height:1.58!important;max-width:620px!important;margin-top:22px!important;color:var(--rf-muted)!important}
.rf-kicker{color:var(--rf-green)!important}
.rf-hero-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:28px!important}
.rf-primary,.rf-chat-btn{background:linear-gradient(135deg,var(--rf-green),var(--rf-green-2))!important;color:#fff!important;border-radius:8px!important}
.rf-secondary{border-radius:8px!important;background:#fff!important}
.rf-trust-row{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:20px!important}
.rf-trust-row span{border-radius:8px!important;background:#fff!important;border-color:var(--rf-line)!important;color:var(--rf-muted)!important}
.rf-home-metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;max-width:none!important;margin-top:18px!important}
.rf-home-metrics div{border-radius:8px!important;background:#fff!important}
.rf-hero-stage{display:block!important;position:relative!important;min-height:610px!important;perspective:1300px!important}
.rf-phone.rf-hero-screen{position:absolute!important;right:7%!important;top:20px!important;width:min(430px,74%)!important;min-height:560px!important;max-height:none!important;padding:14px!important;background:#111A18!important;color:#102018!important;transform:rotateY(-12deg) rotateX(5deg) rotateZ(2deg)!important}
.rf-phone-bar{height:38px!important;background:transparent!important;color:#C9DAD5!important}
.rf-phone-bar small{margin-left:auto;font-size:12px;color:#9DB3AD}
.rf-mini-chat{padding:18px!important;gap:14px!important}
.rf-msg{border-radius:8px!important}
.rf-msg-user{background:#E7F6F5!important;color:#0D3135!important}
.rf-msg-ai{background:#FBFDF8!important;color:#14201A!important}
.rf-evidence-card{border-radius:8px!important;background:#EDF7EF!important}
.rf-screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rf-screen-grid span{min-height:54px;display:grid;place-items:center;text-align:center;border-radius:8px;background:#EEF3F7;color:#536170;font-size:12px;font-weight:700}
.rf-floating-shot{display:grid!important;border-radius:8px!important}
.rf-shot-left{left:0!important;top:104px!important}
.rf-shot-right{right:0!important;bottom:76px!important}
.rf-home-board{width:min(1220px,100%)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:28px auto 0!important}
.rf-home-board article:nth-child(n+4){display:block!important}
.rf-showcase,.rf-feature-band,.rf-topics,.rf-depth{padding:64px clamp(22px,5vw,72px)!important}
.rf-section-head{width:min(900px,100%)!important;margin-bottom:28px!important}
.rf-section-head h2,.rf-topics h2,.rf-depth h2{font-size:clamp(40px,5vw,70px)!important;line-height:1!important}
.rf-showcase-grid,.rf-feature-grid,.rf-capability-strip,.rf-module-grid,.rf-answer-anatomy,.rf-response-preview{width:min(1220px,100%)!important}
.rf-shot-body{min-height:430px!important}
.rf-gif-screen{height:310px!important}
.rf-answer-anatomy,.rf-principles{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.rf-feature-grid,.rf-module-grid,.rf-pathway-board{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.rf-capability-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.rf-topics{width:min(1220px,100%)!important;grid-template-columns:.82fr 1.18fr!important}
.rf-depth{width:min(1220px,calc(100% - 44px))!important;grid-template-columns:.86fr 1fr!important;padding:36px!important}
@media (max-width:940px){
  .rf-hero-grid,.rf-topics,.rf-depth,.rf-showcase-grid{grid-template-columns:1fr!important}
  .rf-hero-stage{min-height:auto!important}
  .rf-phone.rf-hero-screen{position:relative!important;right:auto!important;top:auto!important;width:100%!important;transform:none!important}
  .rf-floating-shot{display:none!important}
  .rf-home-metrics,.rf-home-board,.rf-feature-grid,.rf-capability-strip,.rf-topic-prompts,.rf-answer-anatomy,.rf-response-cols,.rf-module-grid,.rf-pathway-board,.rf-principles{grid-template-columns:1fr!important}
}
@media (max-width:620px){
  .rf-hero{padding:18px 12px 22px!important}
  .rf-hero h1{font-size:54px!important}
  .rf-hero-copy{padding:18px 14px!important}
  .rf-showcase,.rf-feature-band,.rf-topics,.rf-depth{padding:28px 12px!important}
  .rf-depth{width:calc(100% - 24px)!important;padding:18px!important}
}

/* Rafiq public site final direction */
.rf-landing{
  --rf-cream:#fbfaf6;
  --rf-mist:#eef6f2;
  --rf-ink:#17211d;
  --rf-muted:#61706a;
  --rf-line:rgba(23,33,29,.12);
  --rf-green:#147568;
  --rf-green-2:#0d514c;
  --rf-gold:#bd8f3f;
  --rf-blue:#496f9f;
  --rf-clay:#b86854;
  --rf-panel:rgba(255,255,255,.82);
  --rf-shadow:0 24px 70px rgba(32,50,43,.11);
  min-height:100svh;
  color:var(--rf-ink)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.24)),
    radial-gradient(900px 520px at 88% 8%,rgba(20,117,104,.14),transparent 62%),
    radial-gradient(760px 420px at 8% 0%,rgba(189,143,63,.13),transparent 60%),
    linear-gradient(180deg,var(--rf-cream) 0%,#f4f8f5 48%,#fbf7ee 100%)!important;
}
.rf-header{
  top:18px!important;
  width:min(1160px,calc(100% - 32px))!important;
  min-height:62px!important;
  border-radius:999px!important;
  padding:9px 10px 9px 16px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(23,33,29,.1)!important;
  box-shadow:0 16px 48px rgba(32,50,43,.08)!important;
}
.rf-brand-copy strong{font-size:18px!important;letter-spacing:0!important}
.rf-brand-copy small{font-size:13px!important;color:var(--rf-muted)!important}
.rf-nav a{
  border-radius:999px!important;
  font-size:14px!important;
  color:#5b6862!important;
  padding:8px 13px!important;
}
.rf-nav a:hover,.rf-nav a.active{
  color:var(--rf-ink)!important;
  background:rgba(20,117,104,.08)!important;
}
.rf-chat-btn,.rf-primary,.rf-secondary{
  min-height:42px!important;
  border-radius:999px!important;
  font-size:15px!important;
}
.rf-chat-btn,.rf-primary{
  background:#17211d!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(23,33,29,.16)!important;
}
.rf-secondary{
  background:rgba(255,255,255,.66)!important;
  border:1px solid var(--rf-line)!important;
  color:var(--rf-ink)!important;
}
.rf-hero{
  min-height:calc(100svh - 82px)!important;
  padding:76px clamp(22px,5vw,72px) 58px!important;
}
.rf-hero-grid{
  width:min(1180px,100%)!important;
  grid-template-columns:minmax(330px,.82fr) minmax(520px,1.18fr)!important;
  gap:56px!important;
}
.rf-hero-copy{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.rf-kicker{
  width:fit-content;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(20,117,104,.18);
  background:rgba(20,117,104,.07);
  font-size:11px!important;
  letter-spacing:.12em!important;
  color:var(--rf-green)!important;
}
.rf-hero h1{
  margin-top:22px!important;
  font-size:clamp(82px,10vw,148px)!important;
  line-height:.84!important;
  font-weight:500!important;
  color:var(--rf-ink)!important;
}
.rf-ar{
  margin-top:18px!important;
  color:var(--rf-green)!important;
  font-size:clamp(26px,3vw,42px)!important;
}
.rf-lede{
  max-width:560px!important;
  font-size:clamp(18px,1.35vw,21px)!important;
  line-height:1.68!important;
  color:#51615a!important;
}
.rf-trust-row span,.rf-home-metrics div{
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(23,33,29,.1)!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.rf-home-metrics{
  grid-template-columns:1fr!important;
  max-width:500px!important;
}
.rf-home-metrics div{
  border-radius:18px!important;
  padding:14px 16px!important;
}
.rf-home-metrics strong{font-size:17px!important;color:var(--rf-ink)!important}
.rf-home-metrics span{font-size:14px!important;color:var(--rf-muted)!important}
.rf-hero-stage{
  min-height:660px!important;
}
.rf-phone.rf-hero-screen{
  right:0!important;
  top:0!important;
  width:min(650px,100%)!important;
  min-height:600px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#fff!important;
  color:var(--rf-ink)!important;
  border:1px solid rgba(23,33,29,.12)!important;
  box-shadow:0 36px 90px rgba(32,50,43,.18)!important;
  transform:rotateY(-8deg) rotateX(4deg) rotateZ(1deg)!important;
}
.rf-phone:before{display:none!important}
.rf-phone-bar{
  height:48px!important;
  padding:0 18px!important;
  background:#f7faf8!important;
  border-bottom:1px solid rgba(23,33,29,.08)!important;
  color:#738078!important;
}
.rf-phone-bar span{width:9px!important;height:9px!important;background:#d8e4de!important}
.rf-phone-bar small{font-size:13px!important;color:#738078!important}
.rf-mini-chat{
  padding:28px!important;
  gap:18px!important;
  background:
    linear-gradient(rgba(23,33,29,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,33,29,.035) 1px,transparent 1px),
    #fff!important;
  background-size:34px 34px!important;
}
.rf-msg{
  border-radius:18px!important;
  padding:18px 20px!important;
  font-size:16px!important;
  line-height:1.55!important;
}
.rf-msg-user{
  max-width:72%!important;
  background:#17211d!important;
  color:#fff!important;
  border-radius:18px 18px 5px 18px!important;
}
.rf-msg-ai{
  max-width:86%!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(23,33,29,.1)!important;
  box-shadow:0 18px 40px rgba(32,50,43,.08)!important;
}
.rf-msg-ai strong{color:var(--rf-green)!important;font-size:21px!important}
.rf-evidence-card{
  background:#f2f8f4!important;
  border:1px solid rgba(20,117,104,.16)!important;
  border-radius:14px!important;
}
.rf-evidence-card p{font-size:22px!important;color:var(--rf-ink)!important}
.rf-screen-grid span{
  min-height:72px!important;
  border-radius:16px!important;
  background:#f7faf8!important;
  border:1px solid rgba(23,33,29,.08)!important;
  color:#60706a!important;
}
.rf-floating-shot{
  width:210px!important;
  padding:16px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(23,33,29,.1)!important;
  box-shadow:0 18px 48px rgba(32,50,43,.12)!important;
}
.rf-shot-left{left:-28px!important;top:74px!important}
.rf-shot-right{right:-22px!important;bottom:96px!important}
.rf-floating-shot strong{
  border-radius:12px!important;
  background:#f4f8f5!important;
  color:#31413b!important;
}
.rf-home-board{
  margin-top:54px!important;
  gap:18px!important;
}
.rf-home-board article,.rf-product-shot,.rf-gif-card,.rf-feature-grid article,.rf-capability-strip div,.rf-module-grid article,.rf-pathway-board article,.rf-principles article,.rf-response-preview,.rf-depth{
  border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(23,33,29,.1)!important;
  box-shadow:0 18px 48px rgba(32,50,43,.08)!important;
}
.rf-home-board article,.rf-feature-grid article,.rf-module-grid article,.rf-pathway-board article,.rf-principles article{
  padding:24px!important;
}
.rf-home-board h3,.rf-answer-anatomy h3,.rf-module-grid h3,.rf-pathway-board h3,.rf-principles h3,.rf-feature-grid h3{
  font-size:24px!important;
  font-weight:500!important;
}
.rf-home-board p,.rf-answer-anatomy p,.rf-module-grid p,.rf-pathway-board p,.rf-principles p,.rf-feature-grid p{
  font-size:16px!important;
  line-height:1.62!important;
  color:var(--rf-muted)!important;
}
.rf-showcase,.rf-feature-band,.rf-topics,.rf-depth{
  padding-top:88px!important;
  padding-bottom:88px!important;
}
.rf-section-head{
  margin-bottom:38px!important;
}
.rf-section-head h2,.rf-topics h2,.rf-depth h2{
  font-size:clamp(44px,5.4vw,78px)!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:var(--rf-ink)!important;
}
.rf-product-shot{
  overflow:hidden!important;
}
.rf-shot-top{
  height:52px!important;
  background:#f8faf8!important;
}
.rf-shot-body{
  min-height:480px!important;
}
.rf-shot-body aside span,.rf-shot-body aside button,.rf-topic-cloud span,.rf-topic-prompts button{
  border-radius:14px!important;
}
.rf-shot-question{
  background:#17211d!important;
  border-radius:18px 18px 5px 18px!important;
}
.rf-shot-answer{
  border-radius:18px!important;
  background:#fff!important;
}
.rf-answer-section{
  border-radius:14px!important;
  background:#f4f8f5!important;
}
.rf-feature-band{
  background:linear-gradient(180deg,rgba(238,246,242,.72),rgba(251,250,246,.72))!important;
}
.rf-feature-icon{
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
  background:#17211d!important;
  color:#fff!important;
}
.rf-topic-cloud span{
  background:rgba(255,255,255,.66)!important;
  font-weight:500!important;
}
.rf-topic-cloud span:hover{
  background:#17211d!important;
  color:#fff!important;
}
.rf-topic-prompts button{
  background:#fff!important;
  font-weight:600!important;
}
.rf-depth{
  background:
    radial-gradient(520px 300px at 15% 50%,rgba(20,117,104,.12),transparent 65%),
    rgba(255,255,255,.78)!important;
}
.rf-book-stack span{border-radius:14px!important}
.rf-footer{
  width:min(1160px,calc(100% - 32px))!important;
  padding:28px 0!important;
}
@media (max-width:940px){
  .rf-header{top:0!important;width:100%!important;margin:0!important;border-radius:0!important}
  .rf-hero{padding-top:42px!important}
  .rf-hero-grid{gap:30px!important}
  .rf-hero-stage{min-height:auto!important}
  .rf-phone.rf-hero-screen{width:100%!important;min-height:auto!important;transform:none!important}
  .rf-home-metrics{max-width:none!important}
}
@media (max-width:620px){
  .rf-hero h1{font-size:64px!important}
  .rf-ar{font-size:24px!important}
  .rf-lede{font-size:17px!important}
  .rf-hero-actions .rf-primary,.rf-hero-actions .rf-secondary{width:100%!important}
  .rf-mini-chat{padding:16px!important}
  .rf-msg{font-size:14px!important;padding:14px!important}
  .rf-msg-user{max-width:90%!important}
  .rf-msg-ai{max-width:100%!important}
  .rf-screen-grid{grid-template-columns:1fr!important}
  .rf-home-board article,.rf-feature-grid article,.rf-module-grid article,.rf-pathway-board article,.rf-principles article{padding:18px!important}
}

/* Evidence blocks (ayah, hadith, fatwa) — edit only this file for block UI */
.rfv4-evidence-stack{display:grid;gap:14px}
.rfv4-evidence-item{
  border-top:1px solid rgba(18,136,154,.35);
  border-bottom:1px solid rgba(18,136,154,.35);
  padding:12px 8px;
}
.rfv4-evidence-no{
  display:block;
  text-align:center;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f6e7a;
  margin-bottom:8px;
}
.rfv4-evidence-no strong{font-weight:700}
.rfv4-evidence-ar{
  display:block;
  text-align:center;
  font-family:'Amiri','Traditional Arabic',serif;
  font-size:1.38em;
  line-height:1.75;
  margin-bottom:5px;
}
.rfv4-evidence-en{
  display:block;
  text-align:center;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.04em;
  line-height:1.68;
}
.rfv4-evidence-tr{
  display:block;
  text-align:center;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1em;
  line-height:1.7;
  opacity:.88;
  margin-bottom:4px;
}
.sec-body.rfv4-verse-centered,
.msg-answer-body.rfv4-verse-centered,
.sec-body.rfv4-hadith-centered,
.msg-answer-body.rfv4-hadith-centered,
.sec-body.rfv4-fatwa-centered,
.msg-answer-body.rfv4-fatwa-centered,
.sec-body.rfv4-dua-centered,
.msg-answer-body.rfv4-dua-centered{
  text-align:center !important;
}
.sec-body.rfv4-verse-centered .rfv4-evidence-stack,
.msg-answer-body.rfv4-verse-centered .rfv4-evidence-stack,
.sec-body.rfv4-hadith-centered .rfv4-evidence-stack,
.msg-answer-body.rfv4-hadith-centered .rfv4-evidence-stack,
.sec-body.rfv4-fatwa-centered .rfv4-evidence-stack,
.msg-answer-body.rfv4-fatwa-centered .rfv4-evidence-stack{
  border-top:2px solid #12889a;
  border-bottom:2px solid #12889a;
  padding:12px 10px;
  margin:8px 0 10px;
  gap:14px;
  background:transparent !important;
  box-shadow:none !important;
}
.sec-body.rfv4-dua-centered .rfv4-evidence-stack,
.msg-answer-body.rfv4-dua-centered .rfv4-evidence-stack{
  border:none;
  padding:4px 0 8px;
  margin:8px 0 12px;
  gap:16px;
  background:transparent !important;
  box-shadow:none !important;
}
.sec-body.rfv4-verse-centered .rfv4-evidence-item,
.msg-answer-body.rfv4-verse-centered .rfv4-evidence-item,
.sec-body.rfv4-hadith-centered .rfv4-evidence-item,
.msg-answer-body.rfv4-hadith-centered .rfv4-evidence-item,
.sec-body.rfv4-fatwa-centered .rfv4-evidence-item,
.msg-answer-body.rfv4-fatwa-centered .rfv4-evidence-item{
  border-top:1px solid rgba(18,136,154,.35);
  border-bottom:1px solid rgba(18,136,154,.35);
  margin:0;
  padding:10px 8px;
  background:transparent !important;
}
.sec-body.rfv4-dua-centered .rfv4-evidence-item,
.msg-answer-body.rfv4-dua-centered .rfv4-evidence-item{
  border:none;
  margin:0;
  padding:0;
  background:transparent !important;
}
.sec-body.rfv4-verse-centered p,
.msg-answer-body.rfv4-verse-centered p,
.sec-body.rfv4-hadith-centered p,
.msg-answer-body.rfv4-hadith-centered p,
.sec-body.rfv4-fatwa-centered p,
.msg-answer-body.rfv4-fatwa-centered p,
.sec-body.rfv4-dua-centered p,
.msg-answer-body.rfv4-dua-centered p{
  text-align:center !important;
}
.sec-body:not(.rfv4-verse-centered):not(.rfv4-hadith-centered):not(.rfv4-fatwa-centered):not(.rfv4-dua-centered) .arabic-block{
  font-size:1.28em;
  line-height:1.9;
  padding:10px 12px;
  border-radius:8px;
}
.sec-body.rfv4-verse-centered .arabic-block,
.sec-body.rfv4-hadith-centered .arabic-block,
.sec-body.rfv4-fatwa-centered .arabic-block,
.sec-body.rfv4-dua-centered .arabic-block{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}
.rfv4-evidence-stack,
.rfv4-evidence-stack .rfv4-fatwa-title,
.rfv4-evidence-stack .rfv4-fatwa-en,
.rfv4-evidence-stack .rfv4-fatwa-source,
.rfv4-evidence-stack .rfv4-hadith-ref,
.rfv4-evidence-stack .rfv4-dua-ref,
.rfv4-evidence-stack .rfv4-verse-ref,
.rfv4-evidence-stack .rfv4-evidence-en,
.rfv4-evidence-stack .rfv4-evidence-tr,
.rfv4-evidence-stack .rfv4-evidence-cite{
  font-family:'EB Garamond',Garamond,Georgia,serif;
}
[data-dark="1"] .rfv4-card{
  border:none;
  background:transparent;
  box-shadow:none;
}
[data-dark="1"] .rfv4-card--quran,
[data-dark="1"] .rfv4-card--hadith{
  background:transparent !important;
}
[data-dark="1"] .rfv4-icon{background:rgba(26,168,188,.2);border-color:rgba(26,168,188,.36);color:#84e3f1}
[data-dark="1"] .rfv4-chip{border-color:rgba(26,168,188,.36);background:rgba(26,168,188,.12);color:#84e3f1}
[data-dark="1"] .rfv4-list,[data-dark="1"] .rfv4-meta-row{
  background:rgba(20,31,26,.62);
  border-color:rgba(255,255,255,.13)
}
[data-dark="1"] .rfv4-note{background:rgba(26,168,188,.09)}
[data-dark="1"] .rfv4-reflect{background:rgba(212,168,60,.1)}
[data-dark="1"] .rfv4-practical{background:rgba(132,227,241,.08)}
[data-dark="1"] .rfv4-scholar{background:rgba(172,130,255,.12)}
[data-dark="1"] .rfv4-fatwa-item{background:transparent;border-color:rgba(18,136,154,.35)}
[data-dark="1"] .rfv4-fatwa-title{color:#84e3f1}
[data-dark="1"] .rfv4-fatwa-source{color:#84e3f1}


.rfv4-hadith-stack,
.rfv4-hadith-centered .rfv4-evidence-stack,
.sec-body.rfv4-hadith-centered .rfv4-evidence-stack,
.rf-card-hadith .rfv4-hadith-stack{
  border-top:2px solid var(--teal,#12889a);
  border-bottom:2px solid var(--teal,#12889a);
  padding:12px 10px;
  margin:8px 0 10px;
  gap:14px;
  text-align:center;
  background:transparent !important;
  box-shadow:none !important;
}
.rfv4-hadith-item{
  border-top:1px solid rgba(18,136,154,.35);
  border-bottom:1px solid rgba(18,136,154,.35);
  padding:10px 8px;
  text-align:center;
  background:transparent !important;
}
.rfv4-hadith-item + .rfv4-hadith-item{margin-top:8px}
.rfv4-verse-ar{
  display:block;
  text-align:center;
  font-family:'Amiri','Traditional Arabic',serif;
  font-size:1.48em;
  line-height:1.8;
  margin-bottom:6px;
}
.rfv4-verse-en{
  display:block;
  text-align:center;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1em;
  line-height:1.65;
}
.rfv4-hadith-ar,
.rfv4-hadith-item .rfv4-evidence-ar{
  display:block;
  text-align:center !important;
  font-family:'Amiri','Traditional Arabic',serif;
  font-size:1.3em;
  line-height:1.75;
  margin-bottom:6px;
}
.rfv4-hadith-en,
.rfv4-hadith-item .rfv4-evidence-en{
  display:block;
  text-align:center !important;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.06em;
  line-height:1.68;
  margin-bottom:4px;
}
.rfv4-hadith-title,
.rfv4-hadith-ref{
  display:block;
  text-align:center !important;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1em;
  letter-spacing:.04em;
  color:#0f6e7a;
  margin-bottom:8px;
}
.rfv4-hadith-cite,
.rfv4-hadith-item .rfv4-evidence-cite.rfv4-hadith-cite{
  display:block;
  text-align:center !important;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:0.98em;
  line-height:1.55;
  color:var(--muted,#46606a);
  margin-top:12px;
  letter-spacing:.04em;
}
.rfv4-verse-ref{
  display:block;
  text-align:center;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:0.92em;
  letter-spacing:.06em;
  color:#0f6e7a;
  margin-bottom:6px;
}
.msg-answer-body .rfmt-inline-verse-card,
.msg-answer-main .rfmt-inline-verse-card,
.msg-expl .rfmt-inline-verse-card,
.sec-body .rfmt-inline-verse-card{
  margin:20px auto 24px;
  max-width:42rem;
  text-align:center;
}
.rfv4-hadith-ref strong,
.rfv4-verse-ref strong,
.rfv4-hadith-item strong,
.rfv4-evidence-stack strong,
.msg-answer-hadith strong{font-weight:400}
.rfmt-hadith-matn,
.rfmt-verse-matn{
  margin:10px 0;padding:8px 0 8px 14px;
  border-left:2px solid var(--line);
  background:transparent;
  border-radius:0;
  font-family:var(--serif);
  font-size:18.5px;font-weight:400;line-height:1.72;color:var(--ink-s);
  font-style:italic;
}
.rfmt-fatwa-matn{
  margin:14px 0;padding:14px 18px 14px 16px;
  border-left:4px solid rgba(18,136,154,.72);
  background:rgba(18,136,154,.10);
  border-radius:0 8px 8px 0;
  font-family:var(--serif);
  font-size:15.5px;font-weight:400;line-height:1.68;color:var(--ink-s);
}
.rfmt-bible-matn{
  /* The reader's own scripture, quoted back to them in dawah mode. Given the
     weight of a callout rather than a grey quote, but a DIFFERENT accent from
     Qur'an and hadith: it is evidence in the argument, not Muslim scripture. */
  margin:14px 0;padding:14px 18px 14px 16px;
  border-left:4px solid rgba(150,120,60,.62);
  background:rgba(176,144,74,.09);
  border-radius:0 8px 8px 0;
  font-family:var(--serif);
  font-size:15.5px;font-weight:400;line-height:1.68;color:var(--ink-s);
}
.rfmt-hadith-title{
  font-size:17px !important;font-weight:600 !important;
  color:var(--ink) !important;margin:22px 0 10px !important;
}
.rfmt-verse-title{
  font-size:17px !important;font-weight:600 !important;
  color:var(--ink) !important;margin:22px 0 10px !important;
}
.rfmt-fatwa-title{
  font-size:17px !important;font-weight:600 !important;
  color:var(--ink) !important;margin:22px 0 10px !important;
}
[data-dark="1"] .rfmt-hadith-matn,
[data-dark="1"] .rfmt-verse-matn{background:transparent;border-left-color:rgba(255,255,255,.18)}
[data-dark="1"] .rfmt-bible-matn{background:rgba(176,144,74,.15);border-left-color:rgba(214,184,118,.55)}
[data-dark="1"] .rfmt-fatwa-matn{background:rgba(18,136,154,.14);border-left-color:rgba(132,227,241,.55)}
.rfv4-evidence-cite,
.rfv4-verse-cite{
  display:block;
  text-align:center;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:0.95em;
  line-height:1.6;
  color:var(--muted,#46606a);
  margin-top:10px;
  letter-spacing:.05em;
}
.rfv4-verse-cite strong{font-weight:600;color:#0f6e7a}
.rfv4-hadith-centered,
.sec-body.rfv4-hadith-centered,
.rf-card-hadith .rf-card-body.rfv4-hadith-centered{
  text-align:center !important;
}
.rf-card-hadith .rf-card-body.rfv4-hadith-centered p{text-align:center !important}
.rfv4-hadith-centered .rfv4-card--hadith,
.rfv4-hadith-centered .rfv4-head{display:none}
.rf-card-hadith.rfv4-hadith-centered .rf-card-head,
.rf-card-hadith .rf-card-body.rfv4-hadith-centered .rf-card-head{display:none}
.rf-card-hadith .rf-card-body.rfv4-hadith-centered{
  border:none;
  background:transparent;
  padding:0;
}

.rfv4-fatwa-stack,
.rfv4-fatwa-centered .rfv4-evidence-stack,
.sec-body.rfv4-fatwa-centered .rfv4-evidence-stack,
.rf-card-fatwa .rfv4-fatwa-stack{
  border-top:2px solid var(--teal,#12889a);
  border-bottom:2px solid var(--teal,#12889a);
  padding:12px 10px;
  margin:8px 0 10px;
  gap:14px;
  text-align:center;
  background:transparent !important;
  box-shadow:none !important;
}
.rfv4-fatwa-item{
  border-top:1px solid rgba(18,136,154,.35);
  border-bottom:1px solid rgba(18,136,154,.35);
  padding:10px 8px;
  text-align:center;
  background:transparent !important;
}
.rfv4-fatwa-item + .rfv4-fatwa-item{margin-top:8px}
.rfv4-fatwa-title{
  display:block;
  text-align:center !important;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.02em;
  letter-spacing:.03em;
  line-height:1.45;
  color:#0f6e7a;
  margin-bottom:8px;
}
.rfv4-fatwa-title strong{font-weight:700}
.rfv4-fatwa-en,
.rfv4-fatwa-item .rfv4-evidence-en{
  display:block;
  text-align:center !important;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.06em;
  line-height:1.68;
  margin:0 0 6px;
  color:var(--ink,#0b1c17);
}
.rfv4-fatwa-en:last-of-type{margin-bottom:4px}
.rfv4-fatwa-source{
  display:block;
  text-align:center !important;
  margin-top:12px;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:0.98em;
  line-height:1.55;
  color:var(--teal,#12889a);
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;
}
.rfv4-fatwa-source:hover{color:var(--teal-d,#0f6e7a)}
.sec-body.rfv4-fatwa-centered,
.rf-card-fatwa .rf-card-body.rfv4-fatwa-centered{
  text-align:center !important;
  background:transparent !important;
}
.sec-body.rfv4-fatwa-centered .rfv4-fatwa-en,
.sec-body.rfv4-fatwa-centered p{
  text-align:center !important;
}
.rfv4-fatwa-centered .rfv4-card--fatwa,
.rfv4-fatwa-centered .rfv4-head{display:none}
.rfv4-verse-stack,
.rfv4-verse-centered .rfv4-evidence-stack,
.sec-body.rfv4-verse-centered .rfv4-evidence-stack,
.rf-card-verse .rfv4-verse-stack{
  border-top:2px solid var(--teal,#12889a);
  border-bottom:2px solid var(--teal,#12889a);
  padding:12px 10px;
  margin:8px 0 10px;
  gap:14px;
  text-align:center;
  background:transparent !important;
  box-shadow:none !important;
}
.rfv4-verse-item{
  border-top:1px solid rgba(18,136,154,.35);
  border-bottom:1px solid rgba(18,136,154,.35);
  padding:10px 8px;
  text-align:center;
  background:transparent !important;
}
.rfv4-verse-item + .rfv4-verse-item{margin-top:6px}
.rfv4-verse-ref strong{font-weight:700}
.rfv4-verse-tr,
.rfv4-evidence-tr.rfv4-verse-tr{
  font-size:0.94em;
  line-height:1.62;
  margin-bottom:5px;
  opacity:.9;
}
.rfv4-verse-cite,
.rfv4-evidence-cite.rfv4-verse-cite{
  font-size:0.88em;
  margin-top:6px;
}
/* Closing reflection (spiritualClose) — teal dividers, dua layout */
.msg-reflection{margin-top:18px}
.rfv4-reflection-close{
  border-top:2px solid var(--teal,#12889a);
  border-bottom:2px solid var(--teal,#12889a);
  padding:14px 12px 16px;
  margin:0;
  text-align:center;
  background:transparent !important;
}
.rfv4-reflection-label{
  display:block;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:0.78em;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0f6e7a;
  margin:0 0 12px;
}
.rfv4-reflection-en{
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.05em;
  font-weight:400;
  font-style:italic;
  line-height:1.68;
  color:var(--ink,#0b1c17);
  margin:0 0 10px;
  text-align:center;
}
.rfv4-reflection-en:last-child{margin-bottom:0}
.rfv4-reflection-ar{
  display:block;
  font-family:'Amiri','Traditional Arabic',serif;
  font-size:1.32em;
  line-height:1.85;
  direction:rtl;
  text-align:center;
  color:var(--ink,#0b1c17);
  margin:12px auto;
  padding:4px 8px;
  max-width:36em;
}
.rfv4-reflection-tr{
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1em;
  font-weight:400;
  font-style:italic;
  line-height:1.62;
  color:var(--muted,#46606a);
  margin:6px 0 12px;
  text-align:center;
}
.rfv4-reflection-close strong{font-weight:600;color:#0f6e7a}
[data-dark="1"] .rfv4-reflection-close{border-color:rgba(26,168,188,.55)}
[data-dark="1"] .rfv4-reflection-label{color:#84e3f1}
[data-dark="1"] .rfv4-reflection-en{color:var(--ink)}
[data-dark="1"] .rfv4-reflection-tr{color:var(--muted)}

/* Dua / dhikr cards */
.rfv4-dua-stack,
.sec-body.rfv4-dua-centered .rfv4-evidence-stack,
.msg-answer-body .rfv4-dua-stack,
.msg-answer-main .rfv4-dua-stack,
.msg-expl .rfv4-dua-stack{
  display:grid;
  gap:18px;
  margin:20px 0 24px;
  text-align:center;
}
.rfv4-dua-card{
  border:1px solid rgba(var(--teal-rgb),.2);
  border-radius:calc(var(--r) + 4px);
  overflow:hidden;
  background:var(--white,#fff);
  box-shadow:var(--shadow-sm,0 1px 0 rgba(10,44,53,.04),0 8px 24px rgba(10,44,53,.05));
  text-align:center;
  max-width:40rem;
  margin:0 auto;
}
.rfv4-dua-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 10px;
  padding:12px 16px;
  background:linear-gradient(180deg,rgba(var(--teal-rgb),.1),rgba(var(--teal-rgb),.03));
  border-bottom:1px solid rgba(var(--teal-rgb),.14);
}
.rfv4-dua-name{
  font-family:var(--serif,'EB Garamond',Garamond,Georgia,serif);
  font-size:1.1em;
  font-weight:700;
  color:var(--ink,#0a2c35);
  letter-spacing:.02em;
}
.rfv4-dua-occasion{
  display:inline-flex;
  align-items:center;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal,#0f6e7a);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(var(--teal-rgb),.1);
  border:1px solid rgba(var(--teal-rgb),.18);
}
.rfv4-dua-body{padding:16px 18px 18px}
.rfv4-dua-context{
  margin:0 0 14px;
  font-family:var(--serif,'EB Garamond',Garamond,Georgia,serif);
  font-size:1.02em;
  line-height:1.66;
  color:var(--muted,#46606a);
}
.rfv4-dua-matn{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.rfv4-dua-ar-panel{
  text-align:center;
  direction:rtl;
  margin:0;
  padding:4px 4px 0;
  line-height:2;
  font-size:1.42em;
  background:transparent;
  border:none;
  box-shadow:none;
}
.rfv4-dua-ar{
  display:block;
  font-family:'Amiri','Traditional Arabic',serif;
}
.rfv4-dua-field{
  text-align:center;
  padding:0 4px;
}
.rfv4-dua-label{
  display:block;
  font-family:var(--display,system-ui,sans-serif);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal,#0f6e7a);
  margin-bottom:6px;
}
.rfv4-dua-tr-text{
  display:block;
  font-family:var(--serif,'EB Garamond',Garamond,Georgia,serif);
  font-size:1.02em;
  font-style:italic;
  line-height:1.7;
  color:var(--muted,#53707a);
}
.rfv4-dua-meaning-text{
  display:block;
  font-family:var(--serif,'EB Garamond',Garamond,Georgia,serif);
  font-size:1.08em;
  line-height:1.74;
  color:var(--ink,#0a2c35);
}
.rfv4-dua-tr{margin:0}
.rfv4-dua-meaning{margin:0}
.rfv4-dua-virtue{
  margin:14px 0 0;
  padding:11px 13px;
  border-radius:10px;
  font-family:var(--serif,'EB Garamond',Garamond,Georgia,serif);
  font-size:.98em;
  line-height:1.62;
  color:var(--muted,#46606a);
  background:rgba(var(--teal-rgb),.06);
  border:1px solid rgba(var(--teal-rgb),.12);
}
.rfv4-dua-source{
  display:block;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(var(--teal-rgb),.2);
  font-family:var(--serif,'EB Garamond',Garamond,Georgia,serif);
  font-size:.92em;
  letter-spacing:.03em;
  color:var(--muted,#46606a);
}
.rfv4-dua-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid rgba(var(--teal-rgb),.1);
}
.rfv4-dua-copy{
  appearance:none;
  border:1px solid rgba(var(--teal-rgb),.28);
  background:var(--white,#fff);
  color:var(--teal,#0f6e7a);
  font-family:var(--display,system-ui,sans-serif);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.rfv4-dua-copy:hover{
  background:rgba(var(--teal-rgb),.08);
  border-color:rgba(var(--teal-rgb),.45);
}
.rfv4-dua-copy:active{transform:scale(.98)}
.sec-body.rfv4-dua-centered{padding:4px 2px 8px}
.sec-item.sec-kind-dhikr .sec-body{background:transparent !important}
[data-dark="1"] .rfv4-dua-card{background:rgba(255,255,255,.03);box-shadow:none;border-color:rgba(var(--teal-rgb),.28)}
[data-dark="1"] .rfv4-dua-head{background:rgba(var(--teal-rgb),.12)}
[data-dark="1"] .rfv4-dua-name{color:#e2eef0}
[data-dark="1"] .rfv4-dua-occasion{color:#8fd4dc;background:rgba(var(--teal-rgb),.14)}
[data-dark="1"] .rfv4-dua-ar-panel{background:transparent;border:none}
[data-dark="1"] .rfv4-dua-meaning-text{color:var(--ink)}
[data-dark="1"] .rfv4-dua-virtue{background:rgba(var(--teal-rgb),.1);color:#a8c4ca}
[data-dark="1"] .rfv4-dua-copy{background:rgba(255,255,255,.04);color:#8fd4dc;border-color:rgba(var(--teal-rgb),.35)}

/* Legacy aliases (older stacks) */
.rfv4-dua-item{border:none;padding:0;background:transparent !important}
.rfv4-dua-title,.rfv4-dua-ref,.rfv4-dua-intro,.rfv4-dua-footnote,.rfv4-dua-cite{display:none}
.sec-body.rfv4-dua-centered,
.rfv4-dua-centered{text-align:center !important;background:transparent !important}

/* Nizam evidence panels: dividers only — no side bar or panel tint */
.sec-item.sec-kind-verse,
.sec-item.sec-kind-hadith,
.sec-item.sec-kind-fiqh,
.sec-item.sec-kind-dhikr{border-left:none !important}
.sec-item.sec-kind-verse .sec-body,
.sec-item.sec-kind-hadith .sec-body,
.sec-item.sec-kind-fiqh .sec-body,
.sec-item.sec-kind-dhikr .sec-body{background:transparent !important}
.rf-card-verse .rf-card-body.rfv4-verse-centered,
.sec-body.rfv4-verse-centered,
.msg-answer-body.rfv4-verse-centered{text-align:center !important}
.rfv4-verse-centered .rfv4-card--quran,
.rfv4-verse-centered .rfv4-head{display:none}
[data-dark="1"] .rfv4-fatwa-item{background:transparent;border-color:rgba(18,136,154,.35)}
[data-dark="1"] .rfv4-fatwa-title{color:#e8c97d}
[data-dark="1"] .rfv4-fatwa-link{color:#e8c97d;border-color:rgba(212,168,60,.45);background:rgba(212,168,60,.12)}

/* Classical tafsir blocks */
.rfv4-tafsir-intro{
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:.98em;
  line-height:1.55;
  color:#53707a;
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(18,136,154,.07),rgba(18,136,154,.03));
  border:1px solid rgba(18,136,154,.14);
}
.rfv4-tafsir-intro em{font-style:italic;color:#0f6e7a}
.rfv4-tafsir-stack{display:grid;gap:14px}
.rfv4-tafsir-card{
  border:1px solid rgba(18,136,154,.18);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 0 rgba(10,44,53,.04),0 8px 24px rgba(10,44,53,.05);
}
.rfv4-tafsir-card--full{border-color:rgba(18,136,154,.28)}
.rfv4-tafsir-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:11px 14px;
  background:linear-gradient(180deg,rgba(18,136,154,.1),rgba(18,136,154,.04));
  border-bottom:1px solid rgba(18,136,154,.12);
}
.rfv4-tafsir-ayah{
  display:inline-flex;
  align-items:center;
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.08em;
  font-weight:700;
  color:#0a2c35;
  letter-spacing:.02em;
}
.rfv4-tafsir-edition{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#0f6e7a;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(18,136,154,.1);
  border:1px solid rgba(18,136,154,.16);
}
.rfv4-tafsir-mode{
  margin-left:auto;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
}
.rfv4-tafsir-mode--summary{color:#46606a;background:rgba(10,44,53,.06)}
.rfv4-tafsir-mode--full{color:#0f6e7a;background:rgba(18,136,154,.12)}
.rfv4-tafsir-text{padding:14px 16px 16px}
.rfv4-tafsir-p,
.rfv4-tafsir-body{
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.06em;
  line-height:1.74;
  color:var(--ink,#0a2c35);
  margin:0;
  text-align:left;
}
.rfv4-tafsir-card--summary .rfv4-tafsir-p{font-size:1.08em;line-height:1.78}
.rfv4-tafsir-expand{
  margin-top:12px;
  border-top:1px dashed rgba(18,136,154,.22);
  padding-top:10px;
}
.rfv4-tafsir-expand summary{
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#12889a;
  list-style:none;
  user-select:none;
}
.rfv4-tafsir-expand summary::-webkit-details-marker{display:none}
.rfv4-tafsir-expand summary::before{content:"+ ";font-weight:700}
.rfv4-tafsir-expand[open] summary::before{content:"− "}
.rfv4-tafsir-full{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(18,136,154,.1);
  font-family:'EB Garamond',Garamond,Georgia,serif;
  font-size:1.02em;
  line-height:1.72;
  color:#243a42;
  max-height:420px;
  overflow:auto;
}
.sec-body.rfv4-tafsir-centered{padding:4px 2px 8px}
.sec-item.sec-kind-tafsir .sec-body{background:transparent !important}
.sec-item.sec-kind-tafsir{border-left:none !important}
[data-dark="1"] .rfv4-tafsir-card{background:rgba(255,255,255,.03);box-shadow:none}
[data-dark="1"] .rfv4-tafsir-head{background:rgba(18,136,154,.12)}
[data-dark="1"] .rfv4-tafsir-intro{background:rgba(18,136,154,.08);color:#a8c4ca}

.rfv4-teaching-stack{display:grid;gap:12px}
.rfv4-teaching-card{
  border:1px solid rgba(10,44,53,.12);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(10,44,53,.06);
}
.rfv4-teaching-title{
  margin:0;
  padding:14px 16px 10px;
  font-size:1.02em;
  font-weight:600;
  line-height:1.45;
  color:#0a2c35;
  border-bottom:1px solid rgba(10,44,53,.08);
}
.rfv4-teaching-body{padding:12px 16px 14px}
.rfv4-teaching-p{
  margin:0 0 12px;
  font-size:1.05em;
  line-height:1.75;
  color:#243840;
}
.rfv4-teaching-p:last-child{margin-bottom:0}
.rfv4-teaching-qna-label{
  margin:0 0 4px;
  font-size:.82em;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0f6e7a;
}
.rfv4-teaching-qna-label strong{font-weight:700}
.rfv4-teaching-qna .rfv4-teaching-q{margin-bottom:14px;font-weight:700;color:#0a2c35}
.rfv4-teaching-qna .rfv4-teaching-a{font-weight:400}
[data-dark="1"] .rfv4-teaching-qna-label{color:#84e3f1}
[data-dark="1"] .rfv4-teaching-qna .rfv4-teaching-q{color:#e2eef0}
.rfv4-teaching-refs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 16px 14px;
}
.rfv4-teaching-ref{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:.82em;
  font-weight:600;
  letter-spacing:.02em;
  color:#0f6e7a;
  background:rgba(18,136,154,.1);
}
.sec-body.rfv4-teaching-centered{padding:4px 2px 8px}
.sec-item.sec-kind-teaching .sec-body{background:transparent !important}
.sec-item.sec-kind-teaching{border-left:none !important}
[data-dark="1"] .rfv4-teaching-card{background:rgba(255,255,255,.03);box-shadow:none}
[data-dark="1"] .rfv4-teaching-title{color:#d8e8ec;border-color:rgba(255,255,255,.08)}
[data-dark="1"] .rfv4-teaching-p{color:#b8c8cc}