/* Bible reader, styled like shlokdhavalpatel.com and /course: a retro Mac window
   (gray pixel grid, #c0c0c0 title bar, monospace type) with light "paper" panels. */
:root {
  --mono-bold: "Menlo", "Monaco", "Consolas", monospace; /* Menlo has a real bold; Monaco doesn't */
  --desk: #131313;
  --window: #a0a0a0;
  --window-border: #888;
  --titlebar: #c0c0c0;
  --grid-line: #b0b0b0;
  --paper: #e0e0e0;
  --paper-2: #d4d4d4;
  --paper-hover: #cfcfcf;
  --ink: #222222;
  --ink-strong: #111111;
  --muted: #555555;
  --faint: #777777;
  --line: #888888;
  --accent: #111111;              /* primary buttons, like Silver Tongue's Btn */
  --discussed: #111111;           /* underline for verses you've asked about */
  --selection: rgba(0, 0, 0, 0.18);

  --mono: "Monaco", "Menlo", "Consolas", "Chicago", "Geneva", "Arial", monospace;
  --vt: "VT323", "IBM Plex Mono", "Monaco", "Menlo", "Consolas", monospace;

  --verse-size: 17px;
  --verse-line: 1.75;
  --chat-width: 400px;
  --sidebar-w: 236px;
  --pixel-grid:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 4px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 14px/1.5 var(--mono);
  overflow: hidden;
}
::selection { background: var(--selection); }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---------- Window chrome ---------- */
.desk { height: 100vh; padding: 16px; display: flex; justify-content: center; }
.window {
  position: relative;
  width: 100%; max-width: 1320px; height: 100%;
  display: flex; flex-direction: column;
  background-color: var(--window); background-image: var(--pixel-grid);
  border: 2px solid var(--window-border); border-radius: 12px;
  box-shadow: 0 0 24px #0008; overflow: hidden;
}
.titlebar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px; background: var(--titlebar); border-bottom: 1px solid var(--line);
}
.titlebar-left { display: flex; align-items: center; gap: 10px; }
.home-dot {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: #b0b0b0; border: 1.5px solid var(--line); color: #444; text-decoration: none;
  box-shadow: 0 1px 2px #8882; font: 13px/1 var(--vt);
}
.home-dot span { transform: translateY(-1px); }
.titlebar-title { font: bold 16px var(--vt); color: var(--ink); letter-spacing: 1px; }
.titlebar-clock { font: 14px var(--vt); color: #444; }

/* ---------- Name gate ---------- */
.gate {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 10vh 24px 40px;
}
.gate-icon { width: 56px; height: 56px; margin-bottom: 18px; }
.gate h1 { font: 400 40px/1.1 var(--mono); color: var(--ink); margin: 0 0 12px; letter-spacing: -0.01em; }
.gate-sub { font: italic 16px/1.5 var(--mono); color: var(--muted); margin: 0 0 40px; max-width: 460px; }
.gate form { display: flex; flex-direction: column; align-items: center; }
.gate input {
  width: 280px; max-width: 80vw; padding: 12px 16px; text-align: center;
  font: 17px var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 2px; outline: none;
}
.gate input:focus { border-color: var(--ink); }
.gate-note { font: italic 12.5px/1.5 var(--mono); color: var(--muted); margin: 12px 0 24px; max-width: 320px; }
.gate-btn {
  padding: 10px 22px; border-radius: 2px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--paper); font: 15px var(--mono);
}
.gate-btn:hover { background: #333; }
.gate-welcome { max-width: 460px; display: flex; flex-direction: column; align-items: center; }
.gate-welcome h2 { font: 400 22px var(--mono); margin: 0 0 18px; color: var(--ink); }
.gate-points { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.gate-points li { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; font: 13px/1.6 var(--mono); color: var(--ink); }

/* ---------- App layout inside the window ---------- */
.app { flex: 1; min-height: 0; display: flex; padding: 0 12px 12px; gap: 12px; }

/* Sidebar sits on the gray grid, like the homepage icons */
.sidebar {
  position: relative; width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  transition: margin-left .22s ease;
}
.app.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w) - 12px); }
.app.sidebar-collapsed .sidebar .resizer { display: none; }

.brand { display: flex; align-items: center; gap: 10px; padding: 12px 4px 12px 4px; }
.brand-home { display: flex; align-items: center; gap: 10px; flex: 1; color: inherit; text-decoration: none; }
.brand-icon { width: 30px; height: 30px; }
.brand-name {
  font: 13px var(--mono); background: #fff; color: var(--ink);
  padding: 3px 8px; border: 1px solid var(--line);
}
.collapse-btn { width: 24px; height: 24px; border-radius: 50%; color: #444; background: #b0b0b0 !important; border: 1.5px solid var(--line) !important; }

.nav { display: flex; flex-direction: column; padding: 2px 2px 12px; flex: 1; min-height: 0; overflow-y: auto; }

.book-card {
  display: block; width: 100%; text-align: left; color: inherit; font: inherit;
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
}
.book-card:hover { background: #e8e8e8; }
.book-eyebrow { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.book-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: bold 17px/1.25 var(--mono); margin-top: 6px; color: var(--ink); }
.book-chevron { font-size: 11px; color: var(--muted); transition: transform .2s; }
.book-card[aria-expanded="true"] .book-chevron { transform: rotate(180deg); }
.book-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

.book-list { margin-top: 10px; background: var(--paper); border: 1px solid var(--line); padding: 4px 6px 8px; }
.book-group { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: 10px 4px 6px; }
.book-names { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.book-names button {
  text-align: left; padding: 5px 6px; border: 0; background: transparent; border-radius: 0;
  font: 12px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book-names button:hover { background: var(--paper-hover); }
.book-names button.active { background: var(--ink); color: var(--paper); }

.nav-label {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #333;
  padding: 18px 2px 8px;
}
.chapter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.chapter-grid button {
  height: 28px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
  font: 12px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums;
}
.chapter-grid button:hover { background: #fff; }
.chapter-grid button.active { background: var(--ink); color: var(--paper); }

.recents { display: flex; flex-direction: column; gap: 4px; }
.recent-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 4px 6px; border: 1px solid transparent; background: transparent;
  font: 12.5px var(--mono); color: var(--ink); text-align: left;
}
.recent-item:hover { background: var(--paper); border-color: var(--line); }
.recent-num {
  width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); font: 12px var(--mono); color: var(--ink);
}
.recent-item.active .recent-num { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.account { padding: 10px 2px; font-size: 12px; }
.account-btn {
  width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); color: var(--ink); font: 12.5px var(--mono);
}
.account-btn:hover { background: #fff; }
.account-form { display: flex; gap: 6px; }
.account-form input {
  flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); color: var(--ink); font: 12px var(--mono); outline: none;
}
.account-form button { height: 32px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: var(--paper); font: 12px var(--mono); }
.account-note { color: #333; font-size: 11.5px; line-height: 1.45; margin-top: 8px; }
.account-note:empty { display: none; }
.account-status { display: flex; align-items: center; gap: 8px; color: var(--ink); overflow: hidden; }
.account-status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-dot { width: 8px; height: 8px; background: #1f7a3a; flex-shrink: 0; }
.account-link { border: 0; background: none; padding: 0; margin-top: 4px; color: #333; font: 11.5px var(--mono); text-decoration: underline; }

.sidebar-foot { display: flex; flex-direction: column; gap: 4px; padding: 10px 4px 2px; border-top: 1px solid var(--line); }
.foot-verse { font: italic 12px/1.5 var(--mono); color: #2a2a2a; }
.foot-ref { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #3a3a3a; }

/* ---------- Main reading panel (paper) ---------- */
.main { flex: 1; display: flex; min-width: 0; gap: 12px; }
.reader-pane {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
}

.topbar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.topbar .expand-btn { display: none; width: 30px; height: 30px; }
.app.sidebar-collapsed .topbar .expand-btn { display: grid; }
.search {
  display: flex; align-items: center; gap: 8px; width: 300px; min-width: 0; height: 32px; padding: 0 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 2px; color: var(--muted);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 13px var(--mono); }
.search input::placeholder { color: var(--faint); }
.topbar-spacer { flex: 1; }
.icon-btn { display: grid; place-items: center; background: transparent; border: 0; color: #333; padding: 0; border-radius: 2px; }
.icon-btn:hover { color: #000; background: rgba(0,0,0,.08); }
.circle-btn, .pill-btn {
  height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink);
}
.circle-btn { width: 30px; }
.circle-btn:hover, .pill-btn:hover { background: #fff; }
.circle-btn.aa { width: auto; padding: 0 9px; font: 13px/1 var(--mono); letter-spacing: .02em; }
.circle-btn.aa[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.size-wrap { position: relative; }
.size-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 240px; padding: 12px 14px 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.size-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.size-head span:last-child { letter-spacing: 0; text-transform: none; color: var(--ink); }
.size-row { display: flex; align-items: center; gap: 10px; }
.size-a { font-family: var(--mono); color: var(--ink); line-height: 1; }
.size-a.small { font-size: 12px; }
.size-a.big { font-size: 20px; }
.size-row input[type="range"] { flex: 1; accent-color: var(--ink); cursor: pointer; }
.size-reset { margin-top: 8px; border: 0; background: none; padding: 0; color: var(--muted); font: 11px var(--mono); text-decoration: underline; }
.pill-btn { padding: 0 12px; font: bold 12px var(--mono); letter-spacing: .04em; }
.chat-toggle {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; margin-left: 4px;
  border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: var(--paper); font: 12.5px var(--mono);
}
.chat-toggle:hover { background: #333; }
.app.chat-open .chat-toggle { display: none; }

/* ---------- Chapter text ---------- */
.reader-scroll { flex: 1; overflow-y: auto; padding: 0 72px 120px; scroll-behavior: smooth; }
.scripture { max-width: 640px; margin: 0 auto; font-family: var(--mono); color: var(--ink); }
.scripture h1 { font: 700 calc(var(--verse-size) * 1.75)/1.15 var(--mono-bold); text-align: center; margin: 40px 0 36px; color: var(--ink-strong); letter-spacing: -0.01em; }
.scripture .notice { font: 12px/1.5 var(--mono); color: var(--muted); text-align: center; margin: -20px 0 24px; }
.scripture .loading { font: 13px var(--mono); color: var(--muted); text-align: center; margin-top: 30vh; }

/* USFM-style markup (what YouVersion returns; the WEB text is rendered the same way) */
.scripture .s1, .scripture .s, .scripture .s2, .scripture .yv-h, .scripture .heading, .scripture .ms {
  display: block; font: 700 calc(var(--verse-size) * 1.15)/1.3 var(--mono-bold); color: #000;
  margin: 1.9em 0 .7em; font-style: normal; letter-spacing: 0;
  font-synthesis: weight; /* fall back to a synthesized bold if Menlo isn't available */
}
.scripture .s2 { font-size: calc(var(--verse-size) * 1.02); }
.scripture h1 + .s1, .scripture h1 + * > .s1:first-child { margin-top: 0; }
/* Every text block YouVersion can send uses the reading size (lists, poetry, closings, etc.). */
.scripture .p, .scripture .m, .scripture .pi, .scripture .pi1, .scripture .pi2, .scripture .pmo, .scripture .pm,
.scripture .pmc, .scripture .pmr, .scripture .mi, .scripture .nb, .scripture .pc, .scripture .pr, .scripture .ph,
.scripture .li, .scripture .li1, .scripture .li2, .scripture .li3, .scripture .li4, .scripture .lim, .scripture .lim1, .scripture .lim2,
.scripture .q, .scripture .q1, .scripture .q2, .scripture .q3, .scripture .q4, .scripture .qr, .scripture .qc, .scripture .qm, .scripture .qm1, .scripture .qm2,
.scripture .qa, .scripture .cls, .scripture .d {
  display: block; font-size: var(--verse-size); line-height: var(--verse-line);
}
/* Lists (genealogies, tribe lists): hanging indents by level, no gaps between lines */
.scripture .li, .scripture .li1, .scripture .lim, .scripture .lim1 { padding-left: 24px; text-indent: -24px; }
.scripture .li2, .scripture .lim2 { padding-left: 48px; text-indent: -24px; }
.scripture .li3 { padding-left: 72px; text-indent: -24px; }
.scripture .li4 { padding-left: 96px; text-indent: -24px; }
.scripture :not([class^="li"]) + .li1, .scripture :not([class^="li"]) + .li { margin-top: 12px; }
.scripture [class^="li"] + :not([class^="li"]) { margin-top: 12px; }
.scripture .mi, .scripture .pm, .scripture .pmo { padding-left: 20px; }
.scripture .pc, .scripture .qc { text-align: center; }
.scripture .pr, .scripture .qr, .scripture .pmr { text-align: right; }
.scripture .qs { font-style: italic; color: var(--muted); margin-left: 8px; } /* "Selah" */
.scripture .cls { margin-top: 12px; }
.scripture .d { font-style: italic; color: var(--muted); font-size: calc(var(--verse-size) - 2px); margin-bottom: 8px; }
.scripture .p, .scripture .pi, .scripture .pmo { margin: 0 0 14px; }
.scripture .m, .scripture .nb { margin: 0 0 14px; }
.scripture .pi { padding-left: 20px; }
.scripture .q, .scripture .q1 { padding-left: 32px; text-indent: -16px; }
.scripture .q2 { padding-left: 52px; text-indent: -16px; }
.scripture .q3 { padding-left: 72px; text-indent: -16px; }
.scripture .q1:first-child, .scripture :not(.q1):not(.q2) + .q1 { margin-top: 16px; }
.scripture .q1 + :not(.q1):not(.q2), .scripture .q2 + :not(.q1):not(.q2) { margin-top: 16px; }
.scripture .b { display: block; height: 14px; }
.scripture .yv-vlbl, .scripture .label {
  font: calc(var(--verse-size) * 0.65) var(--mono); color: var(--muted); vertical-align: 0.55em; line-height: 0;
  margin: 0 4px 0 2px; user-select: none;
}
/* Footnotes, cross-refs and chapter numbers inside the passage are hidden for clean reading. */
.scripture .yv-n, .scripture .note, .scripture .r, .scripture [data-verse-footnote],
.scripture .chapter > .label, .scripture .c, .scripture .cl { display: none; }
.scripture .wj { color: inherit; }
.scripture .content.discussed { text-decoration: underline; text-decoration-color: var(--discussed); text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* Verse you jumped to: holds a soft highlight for ~3s, then fades out over ~1s */
.scripture .content.flash { animation: flash 4s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes flash { 0%, 72% { background: rgba(244, 205, 82, .55); } 100% { background: transparent; } }

.copyright { max-width: 640px; margin: 40px auto 0; font: 11px/1.5 var(--mono); color: var(--muted); }

.chapter-nav {
  position: absolute; bottom: 20px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper-2); color: var(--ink);
}
.chapter-nav:hover { background: #fff; }
.chapter-nav:disabled { opacity: .35; cursor: default; }
.chapter-nav.prev { left: 14px; }
.chapter-nav.next { right: 14px; }

/* ---------- Chat panel (paper) ---------- */
.chat-pane { position: relative;
  width: 0; flex-shrink: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--paper); border: 0 solid var(--line); border-radius: 2px;
  transition: width .25s ease;
}
.app.chat-open .chat-pane { width: var(--chat-width); border-width: 1px; }
.app.chat-open .reader-scroll { padding-left: 48px; padding-right: 48px; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); min-width: var(--chat-width);
}
.chat-title { font: bold 13px var(--mono); }
.chat-sub { font-size: 11px; color: var(--muted); }
.chat-head-actions { display: flex; gap: 4px; }
.chat-head-actions .icon-btn { width: 28px; height: 28px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; min-width: var(--chat-width); display: flex; flex-direction: column; gap: 16px; }
.chat-empty { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: auto 8px; text-align: center; }
.chat-empty strong { color: var(--ink); }

.msg-user { align-self: flex-end; max-width: 88%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.quote-card {
  border: 0; border-left: 3px solid var(--ink); background: var(--paper-2); padding: 8px 12px; border-radius: 0;
  font: italic 12.5px/1.5 var(--mono); color: var(--ink); cursor: pointer; text-align: left;
}
.quote-card:hover { background: var(--paper-hover); }
.quote-card .ref { display: block; font: bold 10.5px/1.4 var(--mono); font-style: normal; color: var(--muted); letter-spacing: .06em; margin-top: 4px; }
.bubble { background: var(--ink); color: var(--paper); padding: 7px 12px; border-radius: 2px; font-size: 12.5px; line-height: 1.45; }
.msg-ai { font-size: 13px; line-height: 1.65; color: var(--ink); }
.msg-ai p { margin: 0 0 10px; }
.msg-ai p:last-child { margin-bottom: 0; }
.msg-ai ul, .msg-ai ol { margin: 4px 0 10px; padding-left: 20px; }
.msg-ai li { margin: 3px 0; }
.msg-ai strong { color: #000; }
.msg-ai code { font-size: 12px; background: var(--paper-2); padding: 1px 4px; }
.msg-ai h3, .msg-ai h4 { font-size: 13px; margin: 12px 0 6px; }
.msg-ai .xref { color: var(--ink); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; font-weight: bold; }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.composer { padding: 10px 12px 12px; border-top: 1px solid var(--line); min-width: var(--chat-width); background: var(--paper-2); }
.composer-quote {
  display: flex; align-items: flex-start; gap: 8px; border-left: 3px solid var(--ink); background: var(--paper);
  padding: 6px 8px 6px 10px; margin-bottom: 8px; font: italic 12px/1.4 var(--mono); color: var(--ink);
}
.composer-quote .q-text { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-clear { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 5px 5px 5px 10px; }
.composer-row:focus-within { border-color: var(--ink); }
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font: 13px/1.45 var(--mono); padding: 5px 0; max-height: 140px; }
.composer textarea::placeholder { color: var(--faint); }
.send-btn { width: 30px; height: 30px; border-radius: 2px; border: 0; flex-shrink: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.send-btn:disabled { background: #9a9a9a; cursor: default; }

.pw-form { padding: 14px; border-top: 1px solid var(--line); background: var(--paper-2); min-width: var(--chat-width); }
.pw-title { font: bold 13px var(--mono); margin-bottom: 4px; }
.pw-form p { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.pw-row { display: flex; gap: 6px; }
.pw-row input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; background: #fff; font: 13px var(--mono); outline: none; }
.pw-row input:focus { border-color: var(--ink); }
.pw-row button { height: 32px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent); color: var(--paper); font: 12.5px var(--mono); }
.pw-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 16px; }
.pw-note { font-size: 11.5px; color: #8a1f1f; }
.pw-cancel { border: 0; background: none; padding: 0; color: var(--muted); font: 11.5px var(--mono); text-decoration: underline; }

/* ---------- Selection toolbar + toast ---------- */
.sel-pop {
  position: fixed; z-index: 50; display: flex; align-items: center; transform: translate(-50%, -100%);
  background: var(--ink); color: var(--paper); border: 1px solid #000; border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); padding: 3px; font: 12px var(--mono); white-space: nowrap;
}
.sel-pop button { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; padding: 6px 10px; border-radius: 2px; }
.sel-pop button:hover { background: rgba(255,255,255,.14); }
.sel-divider { width: 1px; height: 16px; background: rgba(255,255,255,.25); }
.sel-pop::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 2px; font: 12.5px var(--mono);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  :root { --chat-width: 340px; }
  .app.chat-open .reader-scroll { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 760px) {
  .desk { padding: 0; }
  .window { border-radius: 0; border: 0; }
  .app { padding: 0; gap: 0; }
  .sidebar {
    position: absolute; top: 31px; bottom: 0; left: 0; z-index: 30; margin-left: -260px; padding: 0 12px;
    background-color: var(--window); background-image: var(--pixel-grid); border-right: 1px solid var(--line);
  }
  .app.sidebar-open-mobile .sidebar { margin-left: 0; }
  .topbar .expand-btn { display: grid; }
  .topbar { padding: 8px 10px; gap: 6px; }
  .search { width: auto; flex: 1; }
  .topbar-spacer, #booksBtn { display: none; }
  .reader-pane { border: 0; }
  .reader-scroll, .app.chat-open .reader-scroll { padding: 0 16px 100px; }
  .scripture h1 { font-size: calc(var(--verse-size) * 1.45); margin: 28px 0; }
  .titlebar-clock { display: none; }
  .chat-pane {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; width: 100% !important; height: 0;
    border-top: 1px solid var(--line) !important;
    transition: height .25s ease;
  }
  .app.chat-open .chat-pane { height: 62vh; }
  .chat-head, .chat-log, .composer, .pw-form { min-width: 0; }
}

/* Reading-only mode (no AI companion reachable) */
.app.no-ai .chat-toggle, .app.no-ai .chat-pane { display: none; }
.gate-points li strong { color: #000; font-weight: bold; }
.account-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: #2f2f2f; }

/* Gate: choose new/returning, link-sent step */
.gate-choose { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.gate-choose .gate-btn { width: 240px; }
.gate-btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.gate-btn.secondary:hover { background: #fff; }
.gate form input + input { margin-top: 8px; }
.gate-link { margin-top: 12px; border: 0; background: none; padding: 0; color: #333; font: 12px var(--mono); text-decoration: underline; }
.gate-sent { max-width: 420px; display: flex; flex-direction: column; align-items: center; }
.gate-sent h2 { font: 400 22px var(--mono); margin: 0 0 10px; color: var(--ink); }
.gate-sent p { font: 13px/1.6 var(--mono); color: var(--ink); margin: 0 0 22px; }
.gate-err { color: #8a1f1f !important; margin-top: 12px !important; }
.gate-err:empty { display: none; }
/* The divine name (Hebrew YHWH), shown as LORD in slightly smaller capitals, like printed Bibles
   (the monospace font has no true small caps, and faked ones look uneven) */
.scripture .nd { text-transform: uppercase; font-size: .84em; letter-spacing: .04em; }

/* ---------- Highlights & notes ---------- */
:root {
  --hl-honey: rgba(244, 205, 82, .62);
  --hl-sage:  rgba(143, 196, 132, .55);
  --hl-sky:   rgba(126, 178, 230, .52);
  --hl-rose:  rgba(234, 150, 176, .52);
}
/* Highlighter-pen look: color sits on the lower part of the line, and wraps cleanly across lines */
.scripture .content[data-hl] {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 1px; border-radius: 2px;
}
.scripture .content[data-hl="honey"] { background: linear-gradient(180deg, transparent 38%, var(--hl-honey) 38%, var(--hl-honey) 92%, transparent 92%); }
.scripture .content[data-hl="sage"]  { background: linear-gradient(180deg, transparent 38%, var(--hl-sage) 38%, var(--hl-sage) 92%, transparent 92%); }
.scripture .content[data-hl="sky"]   { background: linear-gradient(180deg, transparent 38%, var(--hl-sky) 38%, var(--hl-sky) 92%, transparent 92%); }
.scripture .content[data-hl="rose"]  { background: linear-gradient(180deg, transparent 38%, var(--hl-rose) 38%, var(--hl-rose) 92%, transparent 92%); }
.scripture .content.has-note { text-decoration: underline dotted #555; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }
.note-mark {
  display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin: 0 2px 0 3px;
  vertical-align: 0.3em; border: 1px solid var(--line); border-radius: 2px; background: #fff;
  font: calc(var(--verse-size) * 0.6) var(--mono); color: var(--ink); cursor: pointer; user-select: none; line-height: 1;
}
.note-mark:hover, .note-mark.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.sel-pop { flex-wrap: wrap; max-width: calc(100vw - 16px); justify-content: center; }
.sel-group { display: flex; align-items: center; }
.hl-dot {
  width: 20px; height: 20px; padding: 0 !important; margin: 0 3px; border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.75) !important;
}
.hl-dot[data-color="honey"] { background: #f2cd55 !important; }
.hl-dot[data-color="sage"]  { background: #8fc484 !important; }
.hl-dot[data-color="sky"]   { background: #7eb2e6 !important; }
.hl-dot[data-color="rose"]  { background: #ea96b0 !important; }
.hl-dot:hover { transform: scale(1.12); border-color: #fff !important; }
.hl-dot.current { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
.hl-clear { padding: 4px !important; margin-left: 2px; opacity: .85; }

.note-card {
  position: fixed; z-index: 55; width: 300px; max-width: calc(100vw - 16px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28); font: 13px/1.55 var(--mono); color: var(--ink);
}
.note-card.pinned { border-color: var(--ink); }
.note-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.note-x { border: 0; background: none; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 4px; }
.note-view, .note-edit { padding: 10px 12px 12px; }
.note-text { margin: 0 0 10px; white-space: pre-wrap; word-wrap: break-word; }
.note-actions { display: flex; gap: 6px; }
.note-actions button { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); font: 12px var(--mono); }
.note-actions button:hover { background: #fff; }
.note-actions button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.note-edit textarea { width: 100%; resize: vertical; min-height: 80px; margin-bottom: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 2px; background: #fff; font: 13px/1.5 var(--mono); color: var(--ink); outline: none; }
.note-edit textarea:focus { border-color: var(--ink); }

/* ---------- Save-to-note + chat history ---------- */
.msg-actions { margin-top: 8px; }
.msg-save {
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper-2); color: var(--ink);
  font: 11.5px var(--mono); padding: 3px 8px;
}
.msg-save:hover:not(:disabled) { background: #fff; }
.msg-save:disabled { opacity: .65; cursor: default; }
.icon-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chat-history { flex: 1; overflow-y: auto; padding: 12px 14px; min-width: var(--chat-width); }
.history-head { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.history-item { display: flex; align-items: stretch; gap: 4px; margin-bottom: 6px; }
.history-open {
  flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-2); color: var(--ink);
}
.history-open:hover, .history-open.editing { background: #fff; }
.history-title { font: 12.5px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta { font: 11px var(--mono); color: var(--muted); }
.history-del { width: 28px; border: 1px solid transparent; border-radius: 2px; background: none; color: var(--muted); font-size: 16px; }
/* ---------- Bookmark (a ribbon, like in a paper Bible) ---------- */
.bm-ribbon { display: inline-block; width: 9px; height: 13px; flex: none; background: #b8443a; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.bm-ribbon.in-text { margin-right: 5px; vertical-align: -1px; cursor: default; }
.bookmark-row { display: flex; align-items: stretch; gap: 4px; margin-bottom: 14px; }
.bookmark-go {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; text-align: left;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-2); color: var(--ink);
}
.bookmark-go:hover { background: #fff; }
.bookmark-go .bm-ribbon { margin-top: 2px; }
.bookmark-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bookmark-ref { font: 12.5px var(--mono); }
.bookmark-snip { font: 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-rename { width: 28px; border: 1px solid transparent; border-radius: 2px; background: none; color: var(--muted); font-size: 13px; }
.history-rename:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.history-input { font: 12.5px var(--mono); color: var(--ink); background: #fff; border: 1px solid var(--ink); border-radius: 2px; padding: 3px 6px; width: 100%; outline: none; }
.history-del:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.history-empty { font: 12.5px/1.6 var(--mono); color: var(--muted); }
@media (max-width: 760px) { .chat-history { min-width: 0; } }

/* Headings can be highlighted/noted too */
.scripture .hk-text[data-hl] { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; border-radius: 2px; }
.scripture .hk-text[data-hl="honey"] { background: linear-gradient(180deg, transparent 38%, var(--hl-honey) 38%, var(--hl-honey) 92%, transparent 92%); }
.scripture .hk-text[data-hl="sage"]  { background: linear-gradient(180deg, transparent 38%, var(--hl-sage) 38%, var(--hl-sage) 92%, transparent 92%); }
.scripture .hk-text[data-hl="sky"]   { background: linear-gradient(180deg, transparent 38%, var(--hl-sky) 38%, var(--hl-sky) 92%, transparent 92%); }
.scripture .hk-text[data-hl="rose"]  { background: linear-gradient(180deg, transparent 38%, var(--hl-rose) 38%, var(--hl-rose) 92%, transparent 92%); }
.scripture .hk-text.has-note { text-decoration: underline dotted #555; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }

/* Sidebar: My notes & highlights */
.marks-list { display: flex; flex-direction: column; gap: 4px; }
.mark-item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink);
}
.mark-item:hover { background: #fff; }
.mark-icons { display: flex; align-items: center; gap: 3px; padding-top: 2px; flex-shrink: 0; }
.mark-swatch { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.mark-swatch[data-hl="honey"] { background: #f2cd55; }
.mark-swatch[data-hl="sage"]  { background: #8fc484; }
.mark-swatch[data-hl="sky"]   { background: #7eb2e6; }
.mark-swatch[data-hl="rose"]  { background: #ea96b0; }
.mark-pen { font-size: 11px; line-height: 1; }
.mark-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mark-ref { font: bold 11.5px var(--mono-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark-snip { font: 11px/1.4 var(--mono); color: #3a3a3a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.marks-more { margin-top: 2px; border: 0; background: none; padding: 2px 0; text-align: left; color: #333; font: 11.5px var(--mono); text-decoration: underline; }

/* "Back to where I was" button */
.back-wrap {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: stretch; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.back-btn { height: 34px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 2px 0 0 2px; background: var(--ink); color: var(--paper); font: 12.5px var(--mono); white-space: nowrap; }
.back-btn:hover { background: #333; }
.back-x { width: 30px; border: 1px solid var(--ink); border-left: 1px solid #444; border-radius: 0 2px 2px 0; background: var(--ink); color: var(--paper); font-size: 15px; }
.back-x:hover { background: #333; }

/* Instant hover tooltips with keyboard shortcuts */
[data-tip-text] { position: relative; }
[data-tip-text]::after {
  content: attr(data-tip-text); position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  white-space: pre; padding: 4px 8px; border-radius: 2px; background: var(--ink); color: var(--paper);
  font: 11.5px var(--mono); letter-spacing: 0; pointer-events: none;
  opacity: 0; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease;
}
[data-tip-align="right"]::after { left: auto; right: 0; }
[data-tip-text]:hover::after, [data-tip-text]:focus-visible::after { opacity: 1; transform: none; }

/* Key hints in the selection toolbar: underlined shortcut letters (like Windows menus),
   and color numbers that appear only while hovering the dots */
.sel-pop .lbl { white-space: nowrap; } /* one flex item, so the underlined letter doesn't get spaced apart */
.sel-pop u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.7); }
.sel-pop .hl-dot kbd {
  margin: 0; padding: 0; border: 0; display: grid; place-items: center; width: 100%; height: 100%;
  font: bold 10px var(--mono); color: rgba(0,0,0,.6); background: transparent;
  opacity: 0; transition: opacity .12s ease;
}
#markGroup:hover .hl-dot kbd, .hl-dot:focus-visible kbd { opacity: 1; }

/* Drag handles to resize the sidebar and the AI chat */
.resizer {
  position: absolute; top: 0; bottom: 0; width: 10px; z-index: 6; cursor: col-resize; touch-action: none;
}
.resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 1px;
  background: transparent; transition: background .15s ease;
}
.resizer:hover::after, .app.resizing .resizer.active::after { background: var(--ink); }
#sidebarResizer { right: -11px; }
#chatResizer { left: 0; }
.app.resizing, .app.resizing * { cursor: col-resize !important; user-select: none !important; }
.app.resizing .sidebar, .app.resizing .chat-pane { transition: none !important; }
@media (max-width: 760px) { .resizer { display: none; } }