:root {
  --bg:#f6f7f9; --panel:#fff; --side:#f0f2f5; --ink:#1c2430; --muted:#5c6773; --line:#e3e7ec;
  --accent:#2f6f4f; --accent-deep:#245c40; --user:#2f6f4f; --radius:16px;
  --sans:"Source Sans 3",system-ui,-apple-system,sans-serif;
}
* { box-sizing:border-box; } html,body { margin:0; height:100%; }
body { font-family:var(--sans); color:var(--ink); background:var(--bg); }
[hidden] { display:none !important; } /* must win over .landing/.app display rules */
.btn { font:inherit; font-weight:600; font-size:.92rem; cursor:pointer; border-radius:10px; padding:.6rem 1rem; border:1px solid transparent; text-decoration:none; display:inline-block; text-align:center; }
.btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent-deep); }
.btn-ghost { background:#fff; color:var(--accent-deep); border-color:var(--line); } .btn-ghost:hover { background:var(--bg); }
.btn.sm { padding:.4rem .7rem; font-size:.85rem; }

/* ── Landing ───────────────────────────────────────────── */
.landing { position:fixed; inset:0; display:grid; place-items:center; padding:1.2rem; background:var(--bg); overflow:auto; z-index:20; }
.landing-shell { display:grid; grid-template-columns:1.1fr .9fr; gap:0; max-width:900px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:0 10px 50px rgba(16,29,47,.10); overflow:hidden; }
.landing-intro { padding:2.4rem 2rem; background:linear-gradient(160deg,#f2f7f3,#eef3f7); border-right:1px solid var(--line); }
.landing-brand { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.landing-brand h1 { font-size:1.8rem; color:var(--accent-deep); margin:0; }
.landing-lead { font-size:1.08rem; line-height:1.5; color:var(--ink); margin:0 0 1.3rem; }
.landing-points { list-style:none; padding:0; margin:0 0 1.3rem; display:flex; flex-direction:column; gap:.7rem; }
.landing-points li { display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; line-height:1.4; color:var(--ink); }
.landing-points li span:first-child { flex:none; font-size:1.05rem; }
.landing-points li span:last-child { min-width:0; flex:1; } /* text wraps instead of overflowing under the next column */
.landing-fine { font-size:.82rem; color:var(--muted); line-height:1.45; margin:0; }
.landing-panel { padding:2.4rem 2rem; display:flex; flex-direction:column; }
.landing-panel h2 { font-size:1.3rem; color:var(--accent-deep); margin:0 0 1.1rem; }
.landing-label { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:.5rem; }
.landing-lang-select { width:100%; font:inherit; font-size:1rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px; background:#fdfefe; color:var(--ink); margin-bottom:1.3rem; }
.landing-lang-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,79,.14); }
.landing-actions { display:flex; flex-direction:column; gap:.6rem; }
.landing-actions .btn { width:100%; }
.landing-note-sm { color:var(--muted); font-size:.83rem; margin:.9rem 0 0; line-height:1.4; }
.landing-note { color:var(--accent-deep); font-size:.85rem; margin-top:.7rem; }
.imb-footer { grid-column:1 / -1; text-align:center; padding:1rem 1.4rem calc(1rem + env(safe-area-inset-bottom)); font-size:.82rem; color:#e8eef5; background:#0a2a4e; border-top:1px solid rgba(255,255,255,.08); }
.imb-footer a { color:#fff; font-weight:600; text-decoration:underline; }
.imb-footer strong { color:#fff; }
.imb-footer-legal { display:block; margin-top:.5rem; opacity:.9; font-size:.78rem; }
@media (max-width:720px) {
  /* display:block (not grid) so the page scrolls when content is taller than the screen —
     otherwise grid place-items:stretch clamps it to viewport height and the guest/sign-in
     buttons fall below the fold with no way to reach them (short phones). */
  .landing { padding:0; display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .landing-shell { grid-template-columns:1fr; border-radius:0; min-height:100%; box-shadow:none; }
  .landing-intro { border-right:none; border-bottom:1px solid var(--line); padding:1.4rem 1.4rem 1.2rem; }
  .landing-panel { padding:1.4rem 1.4rem calc(1.8rem + env(safe-area-inset-bottom)); }
  .lang-chooser { max-height:104px; }
}

/* ── App layout ────────────────────────────────────────── */
.app { display:flex; height:100vh; height:100dvh; }
.sidebar { width:270px; flex:none; background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.side-top { padding:.9rem .8rem; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:.6rem; }
.brand { font-weight:700; color:var(--accent-deep); display:flex; align-items:center; gap:.45rem; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }
.side-new { width:100%; }
.side-lang { font-size:.78rem; color:var(--muted); display:flex; flex-direction:column; gap:.25rem; }
.side-lang select { font:inherit; font-size:.9rem; padding:.45rem .5rem; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.side-history { flex:1; overflow-y:auto; padding:.6rem .5rem; }
.side-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:.2rem .4rem .4rem; }
.side-empty { color:var(--muted); font-size:.85rem; padding:.4rem; }
.hist { display:flex; flex-direction:column; width:100%; text-align:left; border:none; background:transparent; border-radius:9px; padding:.5rem .6rem; cursor:pointer; gap:.1rem; }
.hist:hover { background:#e6e9ee; } .hist.active { background:#e0e7e2; }
.hist-t { font-size:.9rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-m { font-size:.72rem; color:var(--muted); }
.hist-row { display:flex; align-items:center; border-radius:9px; }
.hist-row:hover { background:#e6e9ee; } .hist-row.active { background:#e0e7e2; }
.hist-row .hist { flex:1; min-width:0; }
.hist-row:hover .hist, .hist-row.active .hist { background:transparent; }
.hist-del { flex:none; border:none; background:transparent; cursor:pointer; font-size:.82rem; line-height:1; padding:.4rem .5rem; border-radius:9px; opacity:.4; color:var(--muted); }
.hist-row:hover .hist-del { opacity:.8; }
.hist-del:hover { opacity:1; background:#e6d6d6; }
.confirm-card { text-align:left; }
.confirm-title { margin:0 0 .4rem; font-size:1.1rem; color:var(--ink); }
.confirm-sub { margin:0 0 1.1rem; color:var(--muted); font-size:.92rem; line-height:1.45; }
.confirm-actions { display:flex; gap:.6rem; justify-content:flex-end; }
.btn-danger { background:#c0392b; color:#fff; border-color:#c0392b; } .btn-danger:hover { background:#a93226; }
.acct-legal { margin-top:.6rem; font-size:.72rem; color:var(--muted); text-align:center; }
.acct-legal a { color:var(--muted); text-decoration:underline; }
.side-foot { border-top:1px solid var(--line); padding:.8rem; display:flex; flex-direction:column; gap:.5rem; }
.acct { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.acct-name { font-size:.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-admin { font-size:.78rem; color:var(--accent-deep); } .acct-guest { font-size:.82rem; color:var(--muted); }

/* ── Chat pane ─────────────────────────────────────────── */
.chat { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--panel); }
.chat-head { display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-bottom:1px solid var(--line); }
.chat-head #chatTitle { font-weight:600; color:var(--accent-deep); flex:1; }
.chat-head-actions { margin-left:auto; }
.icon { border:1px solid var(--line); background:#fff; color:var(--muted); width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:1rem; display:grid; place-items:center; }
.icon:hover { background:var(--bg); } .icon.on { background:var(--accent); color:#fff; border-color:var(--accent); }
#menuBtn { display:none; }
.transcript { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.7rem; max-width:820px; width:100%; margin:0 auto; }
.msg { display:flex; flex-wrap:wrap; } .msg.user { justify-content:flex-end; } .msg.assistant { justify-content:flex-start; }
.bubble { max-width:82%; padding:.65rem .9rem; border-radius:var(--radius); font-size:.98rem; line-height:1.55; word-wrap:break-word; }
.bubble.user { background:var(--user); color:#fff; border-bottom-right-radius:5px; }
.bubble.assistant { background:var(--bg); border:1px solid var(--line); border-bottom-left-radius:5px; }
.bubble p { margin:.3rem 0; } .bubble p:first-child { margin-top:0; } .bubble p:last-child { margin-bottom:0; }
.bubble ul, .bubble ol { margin:.3rem 0; padding-inline-start:1.2rem; } .bubble a { color:var(--accent-deep); }
[dir="rtl"] .bubble.user { border-bottom-right-radius:var(--radius); border-bottom-left-radius:5px; }
[dir="rtl"] .bubble.assistant { border-bottom-left-radius:var(--radius); border-bottom-right-radius:5px; }
.typing { display:inline-flex; gap:4px; } .typing span { width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.5; animation:fbb 1s infinite; }
.typing span:nth-child(2){ animation-delay:.15s; } .typing span:nth-child(3){ animation-delay:.3s; }
@keyframes fbb { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:.9; } }
.suggestions { display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1rem .4rem; max-width:820px; width:100%; margin:0 auto; }
.chip { border:1px solid var(--line); background:#fff; color:var(--accent-deep); border-radius:999px; padding:.4rem .8rem; font:inherit; font-size:.85rem; cursor:pointer; }
.chip:hover { background:var(--bg); border-color:var(--accent); }
.composer { display:flex; align-items:flex-end; gap:.5rem; padding:.7rem 1rem 1rem; border-top:1px solid var(--line); max-width:820px; width:100%; margin:0 auto; }
.mic.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.input { flex:1; resize:none; font:inherit; font-size:.98rem; color:var(--ink); padding:.6rem .8rem; border:1px solid var(--line); border-radius:12px; background:#fdfefe; max-height:160px; }
.input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,79,.14); }
.send { flex:none; width:42px; height:42px; border-radius:12px; border:none; cursor:pointer; background:var(--accent); color:#fff; font-size:1.1rem; }
.send:hover:not(:disabled) { background:var(--accent-deep); } .send:disabled { opacity:.5; }
[dir="rtl"] .send { transform:scaleX(-1); }
.composer-note { text-align:center; color:var(--muted); font-size:.72rem; margin:0 auto; padding:0 1rem calc(.5rem + env(safe-area-inset-bottom)); max-width:820px; }
.usage-note { margin:.4rem auto 0; max-width:820px; font-size:.82rem; color:var(--muted); background:#f2f7f3; border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; line-height:1.4; }
.usage-note-link { margin-left:.35rem; color:var(--accent-deep); font-weight:600; text-decoration:underline; }
.scrim { display:none; }

/* ── Verbatim Scripture — inline tappable references + popup ─ */
.verse-link { color:var(--accent-deep); font-weight:600; text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:2px; cursor:pointer; border-radius:4px; padding:0 .05em; }
.verse-link:hover { background:rgba(47,111,79,.10); }
.verse-sheet { text-align:start; }
.verse-ref { font-size:.85rem; font-weight:700; color:var(--accent-deep); margin-bottom:.5rem; }
.verse-text { font-size:1.05rem; line-height:1.6; color:var(--ink); }
.verse-attr { font-size:.72rem; color:var(--muted); margin-top:.7rem; }
/* Read-only verbatim passage/chapter block (from the Bible API), rendered inline in the conversation. */
.passage-block { align-self:stretch; flex-basis:100%; background:#f2f7f3; border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; margin:.3rem 0 .2rem; }
.passage-head { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-bottom:.5rem; }
.passage-ref { font-weight:700; color:var(--accent-deep); font-size:.95rem; }
.passage-ver { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.passage-text { font-size:1.02rem; line-height:1.7; color:var(--ink); max-height:55vh; overflow-y:auto; white-space:normal; }
.passage-attr { font-size:.72rem; color:var(--muted); margin-top:.7rem; }
.passage-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.6rem; }
.passage-copy { margin-top:0; }
.passage-listen { display:inline-flex; align-items:center; gap:.3rem; }
.passage-audio { flex-basis:100%; width:100%; margin-top:.5rem; height:2.4rem; }
.passage-offers { flex-basis:100%; display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem .1rem .1rem; }
.offer-chip { border:1px solid var(--accent); background:#fff; color:var(--accent-deep); cursor:pointer; font-size:.82rem; padding:.35rem .65rem; border-radius:999px; font-weight:600; }
.offer-chip:hover { background:#f2f7f3; } .offer-chip:disabled { opacity:.6; cursor:default; }
.verse-sheet .btn-primary { width:100%; margin-top:1.1rem; }

/* ── Message actions (copy / feedback) ─────────────────── */
.msg-actions { flex-basis:100%; display:flex; gap:.5rem; margin:.4rem .1rem .1rem; } /* full-width → sits BELOW the reply, always visible */
.act { border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; font-size:.82rem; line-height:1; padding:.35rem .55rem; border-radius:8px; }
.act:hover { background:var(--bg); color:var(--ink); } .act.picked { background:#e0e7e2; border-color:var(--accent); color:var(--accent-deep); }
.f-note { width:100%; box-sizing:border-box; font:inherit; font-size:.95rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px; resize:vertical; min-height:90px; margin:.2rem 0 .9rem; color:var(--ink); background:#fdfefe; }
.f-note:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,79,.14); }
.act:hover { background:var(--bg); } .act.picked { background:#e0e7e2; }

/* ── Modal + forms ─────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(16,29,47,.45); display:grid; place-items:center; padding:1.2rem; z-index:40; }
.modal-card { position:relative; background:var(--panel); border-radius:18px; max-width:460px; width:100%; padding:1.6rem 1.5rem; box-shadow:0 20px 60px rgba(16,29,47,.25); max-height:90vh; overflow:auto; }
.modal-x { position:absolute; top:.6rem; right:.7rem; border:none; background:transparent; font-size:1.4rem; color:var(--muted); cursor:pointer; line-height:1; }
.f-form h2, .f-thanks h2 { color:var(--accent-deep); margin:0 0 .3rem; font-size:1.3rem; }
.f-sub { color:var(--muted); font-size:.9rem; margin:0 0 1rem; }
.f-lbl { display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:.7rem; }
.f-in { width:100%; font:inherit; font-size:.95rem; padding:.55rem .7rem; border:1px solid var(--line); border-radius:10px; background:#fdfefe; color:var(--ink); margin-top:.25rem; }
.f-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,79,.14); }
.f-row { display:flex; gap:.5rem; margin-top:.25rem; } .f-row select { flex:none; width:36%; } .f-row .f-in { margin-top:0; }
.f-check { display:flex; align-items:flex-start; gap:.5rem; font-size:.88rem; color:var(--ink); margin:.2rem 0 1rem; cursor:pointer; }
.f-check input { margin-top:.15rem; }
.f-err { color:#c0392b; font-size:.85rem; min-height:1em; margin:.2rem 0 .6rem; }
.f-form > .btn-primary { width:100%; }
.f-actions { display:flex; flex-direction:row; gap:.6rem; flex-wrap:wrap; } .f-actions .btn { flex:1; min-width:130px; }
.f-thanks { text-align:center; } .f-big { font-size:2.4rem; margin-bottom:.3rem; } .f-thanks p { color:var(--muted); margin:.4rem 0 1.2rem; }
.toast { position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:.55rem 1rem; border-radius:999px; font-size:.88rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; }
.toast.show { opacity:.96; transform:translateX(-50%) translateY(0); }

/* ── First-run walkthrough / tour ──────────────────────── */
#tour-catch { position:fixed; inset:0; z-index:58; }
#tour-hole { position:fixed; z-index:59; border-radius:12px; box-shadow:0 0 0 9999px rgba(16,29,47,.62); pointer-events:none; transition:all .2s ease; border:2px solid var(--accent); }
#tour-hole.center { display:none; }
#tour-tip { position:fixed; z-index:60; background:var(--panel); border-radius:14px; box-shadow:0 12px 40px rgba(16,29,47,.3); width:min(320px,calc(100vw - 2rem)); padding:1.1rem 1.2rem; }
#tour-tip.center { top:50%; left:50%; transform:translate(-50%,-50%); }
#tour-tip h3 { margin:0 0 .4rem; color:var(--accent-deep); font-size:1.1rem; }
#tour-tip p { margin:0; color:var(--ink); font-size:.93rem; line-height:1.5; }
.tour-foot { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; gap:.5rem; }
.tour-dots { display:flex; gap:.3rem; } .tour-dot { width:6px; height:6px; border-radius:50%; background:var(--line); } .tour-dot.on { background:var(--accent); }
.tour-btns { display:flex; gap:.4rem; }
.tour-skip { background:none; border:none; color:var(--muted); font:inherit; font-size:.83rem; cursor:pointer; text-decoration:underline; }

/* ── Mobile: off-canvas sidebar + touch-friendly polish ─── */
@media (max-width:820px) {
  #menuBtn { display:grid; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(86vw,320px); z-index:30; transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 40px rgba(0,0,0,.2); }
  body.side-open .sidebar { transform:translateX(0); }
  .scrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:25; }
  .scrim[hidden] { display:none; }

  /* Roomier chat, bigger tap targets, no iOS zoom on focus (needs ≥16px). */
  .chat-head { padding:.5rem .6rem; gap:.35rem; }
  .chat-head #chatTitle { font-size:.98rem; }
  .chat-head-actions { display:flex; gap:.15rem; }
  .icon { width:40px; height:40px; font-size:1.05rem; }
  .transcript { padding:1rem .8rem; gap:.6rem; }
  .bubble { max-width:90%; font-size:1rem; }
  .suggestions { padding:0 .8rem .4rem; }
  .chip { padding:.5rem .85rem; font-size:.9rem; }
  .composer { padding:.6rem .7rem calc(.7rem + env(safe-area-inset-bottom)); gap:.4rem; }
  .input, .f-in { font-size:16px; padding:.7rem .85rem; } /* ≥16px prevents iOS zoom-on-focus */
  .send { width:46px; height:46px; }
  .verse-link { padding:.05em .15em; } /* easier to tap */

  /* Modals become bottom sheets — thumb-reachable, full-width, slide up. */
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal-card { max-width:none; width:100%; border-radius:20px 20px 0 0; padding:1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom)); max-height:88vh; animation:sheet-up .22s ease; }
  .verse-text { font-size:1.12rem; }
}
@keyframes sheet-up { from { transform:translateY(100%); } to { transform:translateY(0); } }