/* ==========================================================================
   QuantaBible Bible reader (book_detail) — extracted from book_detail.html
   Loaded only on the chapter reader page via {% block extra_head %}.
   Requires tokens.css, base.css, components.css, layout.css first.
   Sections (in original template order):
     1. Core reader: verses, highlights, picker, notes, XP toasts, panels
     2. Reading-card parallax transition
     3. Immersion modal
     4. Chapter progress dots
     5. aA text-settings popover
     6. Mobile chapter nav
   ========================================================================== */
  /* Override container constraints - centered layout */
  .main-content { padding: 0 !important; display: flex; flex-direction: column; }
  .main-content .container { max-width: 100% !important; padding: 0 !important; display: flex; flex-direction: column; flex: 1; }
  .content-wrapper { padding: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; display: flex; flex-direction: column; flex: 1; }

  .translation-btn {
    font-size: 0.85em;
    font-family: var(--font-ui);
    color: var(--color-accent);
    background: transparent;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    padding: 0.25em 0.7em;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
  }
  .translation-btn:hover { background: var(--color-accent-light); border-color: var(--color-accent); }

  /* Classic/Modern toggle */
  .mode-toggle {
    display: inline-flex; align-items: center; font-size: 0.78em; font-family: var(--font-ui);
    background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 8px;
    overflow: hidden; flex-shrink: 0; height: 28px;
  }
  .mode-toggle-opt {
    padding: 0.25em 0.6em; cursor: pointer; font-weight: 500; transition: all 0.2s;
    color: var(--color-text-secondary); border: none; background: none; font-family: var(--font-ui);
    font-size: inherit; line-height: 1;
  }
  .mode-toggle-opt.active {
    background: var(--color-accent); color: #fff;
  }
  .mode-toggle-opt:not(.active):hover {
    background: var(--color-accent-light);
  }
  .modern-loading {
    display: none; align-items: center; gap: 0.4em; font-size: 0.78em;
    color: var(--color-text-secondary); font-family: var(--font-ui);
  }
  .modern-loading.visible { display: inline-flex; }
  .modern-spinner {
    width: 14px; height: 14px; border: 2px solid var(--color-border);
    border-top-color: var(--color-accent); border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  /* Chapter Summary banner */
  .chapter-summary-banner {
    background: linear-gradient(135deg, rgba(139,108,44,0.06) 0%, rgba(74,124,89,0.06) 100%);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 10px 10px 0;
    padding: 0.8em 1.2em;
    margin-bottom: 1.2em;
    font-family: var(--font-reading);
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--color-text-primary);
  }
  .chapter-summary-banner .summary-text {
    margin: 0;
  }
  .chapter-summary-banner .summary-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    font-style: italic;
  }
  .chapter-summary-banner .summary-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
  }

  /* Chapter Toolbar – sticky, grouped controls */
  .chapter-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: none;
    padding: 0.5em 0;
    margin: 0 auto;
    max-width: 680px;
  }
  .ct-inner {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ct-inner::-webkit-scrollbar { display: none; }
  .ct-group {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
  }
  .ct-sep {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    flex-shrink: 0;
  }
  .ct-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
  }
  .ct-arrow-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
  }
  .ct-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.5em;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.78em;
    font-family: var(--font-ui);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ct-action-btn:hover { background: var(--color-accent-light); color: var(--color-accent); }
  .ct-action-btn.tts-active { background: var(--color-cta); color: #fff; }
  .ct-action-btn svg { fill: currentColor; flex-shrink: 0; }
  /* Verse-of-the-Day component (see _votd_section.html + votd.js) */
  .votd-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5em 2em;
    margin-bottom: 1.5em;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    position: relative;
  }
  .votd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.3em;
  }
  .votd-title {
    font-family: var(--font-display);
    font-size: 1.5em;
    color: var(--color-accent);
    margin: 0;
    flex: 1;
    text-align: center;
    letter-spacing: 0.02em;
  }
  .votd-collapse-btn { display:inline-flex; align-items:center; gap:0.3em; background:none; border:none; color:var(--color-accent); cursor:pointer; font-size:0.85em; font-family:var(--font-ui); font-weight:500; padding:0.3em 0; }
  .votd-collapse-btn:hover { text-decoration:underline; }
  .votd-collapse-btn i { width:16px; height:16px; transition:transform 0.2s; }
  .votd-collapse-btn.collapsed i { transform:rotate(-90deg); }
  .votd-verse-ref {
    text-align: center;
    font-family: var(--font-ui);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 1.02em;
    margin: 0.1em 0 0.7em;
  }
  .votd-blockquote {
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-alt, var(--bg-card));
    padding: 0.8em 1.1em;
    font-style: italic;
    font-family: var(--font-reading);
    margin: 0 0 1em;
    border-radius: 0 8px 8px 0;
    color: var(--color-text-primary);
    line-height: 1.6;
  }
  .votd-body { display: flex; flex-direction: column; gap: 1.1em; }
  .votd-block-title {
    font-family: var(--font-ui);
    font-size: 0.72em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 0.3em;
    font-weight: 600;
  }
  .votd-block-body {
    font-family: var(--font-reading);
    font-size: 0.98em;
    line-height: 1.75;
    color: var(--color-text-primary);
  }
  .votd-block-body p { margin: 0 0 0.8em; }
  .votd-block-body p:last-child { margin-bottom: 0; }
  .votd-block-carry .votd-block-body {
    font-style: italic;
    padding: 0.6em 0.9em;
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-alt, var(--bg-card));
    border-radius: 0 8px 8px 0;
  }
  .votd-block-prayer .votd-block-body {
    background: var(--color-bg, var(--bg-primary));
    padding: 0.8em 1em;
    border-radius: 10px;
  }
  .votd-loading { color: var(--color-text-secondary); font-family: var(--font-ui); font-size: 0.9em; }
  .votd-error { color: var(--color-danger, var(--danger)); font-family: var(--font-ui); font-size: 0.9em; }
  @media (max-width: 640px) {
    .votd-section { padding: 1.2em 1em; }
    .votd-title { font-size: 1.2em; }
  }
  /* Ask AI TTS btn */
  .ask-ai-tts-btn { display:inline-flex; align-items:center; background:none; border:none; color:var(--color-text-secondary); cursor:pointer; padding:2px 4px; border-radius:4px; transition:color 0.15s, background 0.15s; position:absolute; top:4px; right:4px; }
  .ask-ai-tts-btn:hover { color:var(--color-accent); background:var(--color-accent-light); }
  .ask-ai-tts-btn.tts-active { color:#fff; background:var(--color-cta); }
  .ask-ai-tts-btn svg { width:14px; height:14px; fill:currentColor; }
  .ct-label { font-weight: 500; }

  .ct-label { font-weight: 500; }

  @media (max-width: 700px) {
    .ct-label { display: none; }
    .book-selector-btn { font-size: 1.15em !important; }
    /* Hide visible nav group elements but keep dropdown accessible */
    .ct-nav-group .ct-arrow-btn { display: none; }
    .ct-nav-group .book-selector-btn { display: none; }
    .ct-nav-group { width: 0; overflow: visible; padding: 0; margin: 0; gap: 0; flex-shrink: 0; }
    #book-selector-wrapper { position: static; }
    .book-selector-dropdown.open {
      left: 4px !important; right: 4px !important; width: auto !important;
      max-height: 80vh !important; top: var(--nav-height, 50px) !important;
    }
    /* Hide the first separator since nav group is collapsed */
    .ct-inner > .ct-sep:first-of-type { display: none; }
  }
  .page-center {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 1.5em;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 900px) {
    .page-center,
    .content-flex-row { max-width: 100%; min-width: 0; overflow-x: hidden; }
  }
  /* Reading card */
  .reading-card {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.07);
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 3rem;
    flex: 1;
  }
  @media (max-width: 700px) {
    .reading-card { padding: 1.5rem 1rem; border-radius: 8px; }
  }
  /* Verse wrapper */
  .verse-wrapper {
    display: inline;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
    padding: 1px 2px;
    margin: 0 -2px;
  }
  .verse-wrapper:hover {
    background: rgba(232,217,176,0.4);
  }
  .verse-wrapper.active-verse {
    background: rgba(139,108,44,0.1);
    box-shadow: 0 0 0 2px rgba(139,108,44,0.15);
  }
  .verse-wrapper.highlighted {
    background: var(--color-accent-light);
    border-radius: 3px;
  }
  /* Color-coded highlights */
  .verse-wrapper.hl-yellow { background: rgba(241,196,15,0.25); }
  .verse-wrapper.hl-red { background: rgba(231,76,60,0.18); }
  .verse-wrapper.hl-blue { background: rgba(52,152,219,0.18); }
  .verse-wrapper.hl-green { background: rgba(39,174,96,0.18); }
  .verse-wrapper.hl-purple { background: rgba(155,89,182,0.18); }

  /* Highlight color picker */
  .hl-picker {
    display: none; position: absolute; top: -40px; left: 0; z-index: 20;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 0.25em 0.5em; box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    gap: 0.3em; align-items: center; white-space: nowrap;
  }
  .hl-picker.open { display: inline-flex; }
  .hl-dot {
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: all 0.15s; flex-shrink: 0;
  }
  .hl-dot:hover { transform: scale(1.2); border-color: var(--color-text-primary); }
  .hl-dot.active { border-color: var(--color-text-primary); box-shadow: 0 0 0 2px #fff; }
  .hl-dot-yellow { background: var(--warning); }
  .hl-dot-red { background: var(--danger); }
  .hl-dot-blue { background: var(--info); }
  .hl-dot-green { background: var(--success); }
  .hl-dot-purple { background: var(--info); }
  .hl-remove {
    font-size: 0.9em; cursor: pointer; color: var(--color-text-secondary);
    border: none; background: none; padding: 0 0.2em; line-height: 1;
  }
  .hl-remove:hover { color: var(--color-danger); }
  .hl-sep {
    width: 1px; height: 18px; background: var(--color-border); margin: 0 0.1em; flex-shrink: 0;
  }

  /* Inline reaction/save buttons inside picker */
  .vr-btn {
    display: inline-flex; align-items: center; gap: 0.1em;
    padding: 0.05em 0.25em; border-radius: 8px; font-size: 0.82em;
    border: 1px solid transparent; background: transparent;
    cursor: pointer; transition: all 0.15s; user-select: none; line-height: 1.2;
  }
  .vr-btn:hover { border-color: var(--color-accent); background: var(--color-accent-light); }
  .vr-btn.active { border-color: var(--color-accent); background: rgba(139,108,44,0.12); font-weight: 600; }
  .vr-count { font-size: 0.8em; font-weight: 600; color: var(--color-text-secondary); }

  /* Save to collection btn inside picker */
  .verse-save-btn {
    font-size: 0.82em; color: var(--color-text-secondary); border: none;
    background: none; cursor: pointer; padding: 0.05em 0.2em; transition: all 0.15s;
    line-height: 1.2;
  }
  .verse-save-btn:hover { color: var(--color-accent); transform: scale(1.1); }

  /* Verse note button in picker */
  .verse-note-btn {
    font-size: 0.82em; color: var(--color-text-secondary); border: none;
    background: none; cursor: pointer; padding: 0.05em 0.2em; transition: all 0.15s;
    line-height: 1.2; position: relative;
  }
  .verse-note-btn:hover { color: var(--color-accent); transform: scale(1.1); }
  .verse-note-btn.has-notes { color: var(--color-accent); }

  /* Inline verse note area */
  .verse-note-inline {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 3px 16px rgba(0,0,0,0.08);
    padding: 1em 1.2em;
    margin: 0.5em 0 0.8em 1.5em;
    font-family: var(--font-reading);
    font-size: 0.95em;
    color: var(--color-text-primary);
    line-height: 1.7;
    position: relative;
    animation: analysisSlideIn 0.25s ease-out;
  }

  /* Compact note preview */
  .verse-note-preview {
    display: block;
    margin: 0.3em 0 0.5em 1.5em;
    animation: analysisSlideIn 0.15s ease-out;
  }
  .verse-note-preview-card {
    background: var(--color-surface-alt);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: 0.4em 0.7em;
    margin-bottom: 0.3em;
    font-size: 0.85em;
    font-family: var(--font-ui);
    color: var(--color-text-primary);
    line-height: 1.4;
    transition: background 0.15s;
    cursor: pointer;
  }
  .verse-note-preview-card:hover {
    background: var(--color-accent-light);
  }
  .verse-note-preview-card .note-card-tag {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--brand-gold); border-radius: 3px; padding: 2px 5px;
    margin-right: 4px; vertical-align: middle;
  }
  .verse-note-preview-card .note-card-tag svg { width: 11px; height: 11px; }
  .verse-note-preview-card .note-preview-text {
    color: var(--color-text-secondary);
  }
  .verse-note-inline .note-close:hover { color: var(--color-text-primary); }

  /* Note tag pills */
  .note-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.5em; }
  .note-tag-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; font-size: 0.78em;
    font-family: var(--font-ui); cursor: pointer; transition: all 0.15s;
    border: 1.5px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-secondary); user-select: none;
  }
  .note-tag-pill:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
  .note-tag-pill.active { border-color: var(--brand-gold); background: var(--brand-gold); color: #fff; }
  .note-tag-pill svg { width: 14px; height: 14px; }

  /* Rich text mini toolbar */
  .note-toolbar {
    display: flex; gap: 0.2em; margin-bottom: 0.4em; padding: 0.2em;
    border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface);
  }
  .note-toolbar button {
    background: none; border: none; cursor: pointer;
    border-radius: 4px; font-size: 0.85em; color: var(--color-text-secondary);
    transition: all 0.15s; font-family: var(--font-ui);
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  }
  .note-toolbar button:hover { background: var(--color-accent-light); color: var(--color-text-primary); }
  .note-toolbar button.active { background: var(--color-accent); color: #fff; }

  /* Note textarea */
  .note-textarea {
    width: 100%; border-radius: 8px; border: 1.5px solid var(--color-border);
    padding: 0.5em; font-size: 0.88em; resize: vertical; font-family: var(--font-ui);
    min-height: 100px; background: #fff; color: var(--color-text-primary);
    transition: border-color 0.15s;
  }
  .verse-note-inline .note-textarea { min-height: 120px; }
  .note-textarea:focus { border-color: var(--color-accent); outline: none; }

  /* Existing verse note card (shown below verse inline) */
  .verse-note-card {
    background: var(--color-surface-alt); border-radius: 6px; padding: 0.6em 0.8em;
    margin-top: 0.5em; font-size: 0.88em; line-height: 1.5; position: relative;
    border-left: 3px solid var(--color-accent);
  }
  .verse-note-card[data-tag="prayer"] { border-left-color: #4A72A8; }
  .verse-note-card[data-tag="question"] { border-left-color: #C4842D; }
  .verse-note-card[data-tag="reflection"] { border-left-color: var(--success); }
  .verse-note-card[data-tag="cross-ref"] { border-left-color: var(--color-accent); }
  .verse-note-card[data-tag="application"] { border-left-color: #7B5EA7; }
  .verse-note-card .note-card-tag {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; margin-bottom: 0.2em; font-family: var(--font-ui);
    background: var(--brand-gold); border-radius: 4px; padding: 3px 6px;
    vertical-align: middle;
  }
  .verse-note-card .note-card-tag svg { width: 12px; height: 12px; }
  .verse-note-card .note-card-date {
    font-size: 11px; color: #A09882; font-family: var(--font-ui);
  }
  .verse-note-card .note-card-actions {
    position: absolute; top: 0.4em; right: 0.5em; display: flex; gap: 0.3em;
  }
  .verse-note-card .note-card-actions button {
    background: none; border: none; cursor: pointer; font-size: 0.82em;
    color: var(--color-text-secondary); padding: 0.1em 0.3em; border-radius: 4px;
    transition: all 0.15s;
  }
  .verse-note-card .note-card-actions button:hover { color: var(--color-text-primary); background: var(--color-surface); }

  /* Note indicator on verse number */
  .verse-num.has-note::after {
    content: ''; position: absolute; top: -2px; right: -3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-accent);
  }

  /* Chapter notes panel (in sidebar) */
  .chapter-notes-body {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    border-radius: 0 0 12px 12px;
  }
  #chat-body,
  #ask-ai-body {
    border-radius: 0 0 12px 12px;
  }
  .chapter-notes-list {
    flex: 1; overflow-y: auto; padding: 0.8em; display: flex;
    flex-direction: column; gap: 0.6em; min-height: 0;
  }
  .chapter-note-card {
    background: var(--color-surface-alt); border-radius: 6px; padding: 0.7em 0.9em;
    font-size: 0.88em; line-height: 1.5; position: relative;
    border-left: 3px solid var(--color-accent); animation: analysisSlideIn 0.2s ease-out;
  }
  .chapter-note-card[data-tag="prayer"] { border-left-color: #4A72A8; }
  .chapter-note-card[data-tag="question"] { border-left-color: #C4842D; }
  .chapter-note-card[data-tag="reflection"] { border-left-color: var(--success); }
  .chapter-note-card[data-tag="cross-ref"] { border-left-color: var(--color-accent); }
  .chapter-note-card[data-tag="application"] { border-left-color: #7B5EA7; }
  .chapter-note-card .note-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3em;
  }
  .chapter-note-card .note-card-tag {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-ui);
    background: var(--brand-gold); border-radius: 4px; padding: 3px 6px;
    vertical-align: middle;
  }
  .chapter-note-card .note-card-tag svg { width: 12px; height: 12px; }
  .chapter-note-card .note-card-date {
    font-size: 11px; color: #A09882; font-family: var(--font-ui);
  }
  .chapter-note-card .note-card-actions button {
    background: none; border: none; cursor: pointer; font-size: 0.82em;
    color: var(--color-text-secondary); padding: 0.1em 0.3em; border-radius: 4px;
    transition: all 0.15s;
  }
  .chapter-note-card .note-card-actions button:hover { color: var(--color-text-primary); background: var(--color-surface); }
  .chapter-note-card .note-card-text {
    white-space: pre-wrap; word-wrap: break-word;
  }

  /* Save-to-collection popover */
  .save-col-popover {
    display: none; position: absolute; top: 100%; left: 0; z-index: 25;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 0.5em; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px; font-size: 0.82em;
  }
  .save-col-popover.open { display: block; }
  .save-col-option {
    display: block; width: 100%; text-align: left;
    padding: 0.35em 0.6em; border: none; background: transparent;
    cursor: pointer; border-radius: 6px; font-family: var(--font-ui);
    transition: background 0.15s; font-size: 0.95em;
    color: var(--color-text-primary);
  }
  .save-col-option:hover { background: var(--color-surface-alt); }

  /* XP / notification toast system */
  #toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 500;
    display: flex; flex-direction: column-reverse; gap: 8px;
    pointer-events: none; font-family: var(--font-ui);
  }
  .xp-toast {
    background: linear-gradient(135deg, var(--color-cta), var(--brand-olive));
    color: #fff; padding: 0.6em 1.2em; border-radius: 14px;
    font-size: 0.88em; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(10px); transition: all 0.3s;
    pointer-events: none; white-space: nowrap;
  }
  .xp-toast.show { opacity: 1; transform: translateY(0); }
  .xp-toast.toast-badge { background: linear-gradient(135deg, var(--warning), #d35400); }
  .xp-toast.toast-level { background: linear-gradient(135deg, #8e44ad, #6c3483); }
  .xp-toast.toast-book { background: linear-gradient(135deg, #2980b9, #1a5276); }
  .xp-toast.toast-streak { background: linear-gradient(135deg, var(--warning), #d68910); }


  .verse-num {
    font-family: var(--font-reading);
    font-size: 0.7em;
    vertical-align: super;
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0 3px;
    transition: color 0.15s, background 0.15s;
    border-radius: 3px;
    position: relative;
    z-index: 2;
  }
  .verse-num:hover {
    color: var(--color-cta);
    background: var(--color-accent-light);
  }
  .verse-text {
    cursor: pointer;
  }
  /* Inline analysis */
  .verse-analysis-inline {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 3px 16px rgba(0,0,0,0.08);
    padding: 1em 1.2em;
    margin: 0.5em 0 0.8em 1.5em;
    font-family: var(--font-reading);
    font-size: 0.95em;
    color: var(--color-text-primary);
    line-height: 1.7;
    position: relative;
    animation: analysisSlideIn 0.25s ease-out;
  }
  .verse-analysis-inline .analysis-header {
    font-weight: 600;
    font-style: normal;
    margin-bottom: 0.4em;
    font-size: 0.85em;
    color: var(--color-accent);
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  /* Clean layered output per redesign §1 + §8 — Plain Meaning pill at top,
     then normal-weight paragraphs with breathing room. No italic wall of text. */
  .verse-analysis-inline .analysis-body {
    font-style: normal;
  }
  .verse-analysis-inline .analysis-body .plain-meaning {
    display: block;
    margin: 0.1em 0 0.9em;
    padding: 0.6em 0.9em;
    background: var(--color-surface-alt);
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--color-text-primary);
  }
  .verse-analysis-inline .analysis-body .plain-meaning-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.25em;
  }
  .verse-analysis-inline .analysis-body p {
    margin: 0 0 0.8em;
    line-height: 1.65;
    font-size: 0.96em;
  }
  .verse-analysis-inline .analysis-body p:last-child {
    margin-bottom: 0;
  }
  .verse-analysis-inline .analysis-body .ref {
    font-weight: 600;
    color: var(--color-accent);
  }
  .verse-analysis-inline .analysis-close {
    position: absolute;
    top: 0.4em;
    right: 0.7em;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.3em;
    cursor: pointer;
    padding: 0 0.2em;
  }
  .verse-analysis-inline .analysis-close:hover {
    color: var(--color-text-primary);
  }
  .verse-analysis-inline .analysis-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.6em;
    flex-wrap: wrap;
  }
  .verse-analysis-inline .analysis-reanalyze {
    display: inline-block;
    padding: 0.3em 0.8em;
    background: var(--color-cta);
    color: var(--color-cta-text);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.82em;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: background 0.15s;
  }
  .verse-analysis-inline .analysis-reanalyze:hover {
    background: var(--color-cta-hover);
  }
  .verse-analysis-inline .analysis-insight-plus {
    display: inline-block;
    padding: 0.3em 0.8em;
    background: transparent;
    color: var(--color-cta);
    border: 1.5px solid var(--color-cta);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.82em;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: background 0.15s, color 0.15s;
  }
  .verse-analysis-inline .analysis-insight-plus:hover {
    background: var(--color-cta);
    color: var(--color-cta-text);
  }
  /* Subtle "Personalize this" link — intentionally low-emphasis vs. the
     primary "Explain differently" button, per redesign §9. */
  .verse-analysis-inline .analysis-insight-plus-link {
    display: inline-block;
    margin-left: 0.75em;
    color: var(--color-text-secondary);
    font-size: 0.82em;
    font-family: var(--font-ui);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    opacity: 0.85;
    transition: color 0.15s, opacity 0.15s;
  }
  .verse-analysis-inline .analysis-insight-plus-link:hover {
    color: var(--color-cta);
    opacity: 1;
  }
  @keyframes analysisSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .ai-modal-bg {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(30,26,20,0.15);
    z-index: 999;
  }
  /* Book selector dropdown */
  .book-selector-btn {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1em 0.3em;
    border-radius: 6px;
    transition: background 0.15s;
  }
  .book-selector-btn:hover {
    background: var(--color-surface-alt);
  }
  .book-selector-btn::after {
    content: ' ▾';
    font-size: 0.7em;
    color: var(--color-accent);
  }
  .book-selector-dropdown {
    display: none;
    position: fixed;
    z-index: 1001;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: 0.8rem;
    width: 520px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .book-selector-dropdown.open { display: block; }
  .book-selector-columns {
    display: flex;
    gap: 1rem;
  }
  .book-selector-col {
    flex: 1;
    min-width: 0;
  }
  .bible-book-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0.5rem;
    margin: 1px 0;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.78em;
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .presence-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--success);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(34,197,94,0.5);
  }
  .chapter-grid-btn.has-readers {
    background: #e6f7ed;
    border-color: var(--success);
  }
  .chapter-grid-btn.has-readers:hover {
    background: #cef0da;
  }
  .bible-book-btn:hover {
    background: var(--color-surface-alt);
  }
  .bible-book-btn.active {
    background: var(--color-accent-light);
    font-weight: 600;
  }
  .testament-header {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--color-accent);
    padding: 0.4rem 0.5rem 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-ui);
  }

  /* Recents chip row above the book list */
  .passage-chip-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.2em 0.1em 0.7em;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
  }
  .passage-chip-label {
    font-size: 0.68em;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-ui);
  }
  .passage-chip-group {
    display: flex;
    gap: 0.35em;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  .passage-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28em 0.7em;
    background: var(--color-surface-alt, rgba(0,0,0,0.04));
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78em;
    font-family: var(--font-ui);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .passage-chip:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* OT/NT tabs — hidden on desktop, shown on mobile */
  .passage-tabs {
    display: none;
    gap: 0.3em;
    padding: 0 0.1em 0.6em;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
  }
  .passage-tab {
    flex: 1;
    min-height: 40px;
    padding: 0.45em 0.6em;
    background: var(--color-surface-alt, rgba(0,0,0,0.04));
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.82em;
    font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .passage-tab.active {
    background: var(--color-accent, var(--color-accent));
    color: var(--color-cta-text, #fff);
    border-color: var(--color-accent, var(--color-accent));
    font-weight: 600;
  }

  @media (max-width: 700px) {
    .passage-tabs { display: flex; }
    .book-selector-columns { flex-direction: column; gap: 0; }
    .book-selector-col[data-testament] { display: none; }
    .book-selector-col[data-testament].active { display: block; }
    /* Mobile book list items are bigger tap targets */
    .bible-book-btn { padding: 0.55rem 0.7rem; font-size: 0.92em; white-space: normal; }
    .testament-header { display: none; } /* redundant on mobile — tabs say it */
  }
  /* Go-to-verse suggestion items */
  .goto-suggestion {
    padding: 0.45em 0.8em;
    font-size: 0.82em;
    font-family: var(--font-ui);
    cursor: pointer;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.12s;
  }
  .goto-suggestion:last-child { border-bottom: none; }
  .goto-suggestion:hover, .goto-suggestion.active {
    background: var(--color-accent-light, #f5f0e6);
  }
  .goto-suggestion .goto-match { font-weight: 600; }
  .goto-suggestion .goto-hint { color: var(--color-text-secondary); font-size: 0.9em; margin-left: 0.3em; }
  /* Verse highlight flash */
  @keyframes verseHighlightFlash {
    0% { background: rgba(74, 124, 89, 0.35); }
    100% { background: transparent; }
  }
  @keyframes verseHighlightHold {
    0%, 100% { background: rgba(74, 124, 89, 0.35); }
  }
  .verse-highlight-flash {
    animation: verseHighlightFlash 10s ease-out forwards;
    border-radius: 4px;
  }
  .verse-highlight-hold {
    background: rgba(74, 124, 89, 0.35);
    border-radius: 4px;
  }
  /* Read panel persistent verse highlight */
  .verse-read-highlight {
    background: rgba(74, 124, 89, 0.22);
    border-radius: 4px;
    transition: background 0.3s ease;
  }
  /* TTS reading highlight */
  .verse-tts-reading {
    background: rgba(59, 130, 246, 0.22);
    border-radius: 4px;
    transition: background 0.25s ease;
  }
  /* Temp verse stop-speaker button */
  .verse-tts-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    vertical-align: top;
    margin-left: 4px;
    animation: verseStopFadeIn 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: background 0.15s;
  }
  .verse-tts-stop:hover { background: var(--color-cta); }
  .verse-tts-stop svg { width: 14px; height: 14px; fill: currentColor; }
  @keyframes verseStopFadeIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
  .chapter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    padding: 0.5rem;
  }
  .chapter-grid-btn {
    padding: 0.5rem 0.3rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88em;
    font-weight: 500;
    font-family: var(--font-ui);
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    min-height: 40px;
  }
  .chapter-grid-btn:hover {
    background: var(--color-surface-alt);
  }
  .chapter-grid-btn.active {
    background: var(--color-accent-light);
    font-weight: 600;
    border-color: var(--color-accent);
  }
  .chapter-grid-btn.chapter-read {
    color: var(--color-accent);
  }
  /* Subtle dot under the number for read chapters */
  .chapter-grid-btn.chapter-read::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-cta);
  }
  @media (max-width: 700px) {
    .chapter-grid { grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .chapter-grid-btn { min-height: 44px; font-size: 0.95em; }
  }
  @media (min-width: 414px) and (max-width: 700px) {
    .chapter-grid { grid-template-columns: repeat(8, 1fr); }
  }
  .chapter-selector-panel {
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 1rem;
    margin-top: 0.3rem;
  }
  .chapter-selector-panel.open { display: block; }
  .scripture-text {
    font-family: var(--font-reading);
    font-size: var(--reader-size, 1.125rem);
    line-height: var(--reader-lh, 1.75);
    color: var(--color-text-primary);
    text-align: left;
    padding: 0;
    max-width: 100%;
    margin: 0;
  }
  .scripture-text p {
    margin: 0 0 1.5em 0;
    text-indent: 1.5em;
  }
  .scripture-text p:first-child {
    text-indent: 0;
  }
  /* Content area: scripture + chat side by side */
  .content-flex-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 28px;
    justify-content: center;
    flex: 1;
  }
  /* Chat Panel */
  /* The chat column wraps the out-of-card tab bar + the card (.chat-panel).
     It handles all the desktop sizing and sticky behavior that previously
     lived on .chat-panel directly. Shown only when the panel is .visible
     (via :has() — keeps the 10 existing .chat-panel.visible JS toggles
     unchanged). Mobile override below makes the whole column go fullscreen. */
  .chat-column {
    display: none;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 680px;
    flex-direction: column;
    align-self: flex-start;
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 20px);
    /* Gap matches the vertical footprint of the left column's chapter-progress
       dots row (≈26px padding + 0.6rem margin ≈ 36px) so the card below lines
       up horizontally with .reading-card on the left. */
    gap: 2.25rem;
    box-sizing: border-box;
  }
  .chat-column:has(.chat-panel.visible) { display: flex; }

  .chat-panel {
    /* Sits inside .chat-column now; column owns the width. Card just fills
       what's left after the header. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: var(--color-surface);
    border-left: none;
    border-radius: 12px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.07);
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 0;
  }
  .chat-panel.visible { display: flex; }

  .chat-panel-header {
    /* Out-of-card tab bar. Mirrors the spacing of .chapter-toolbar on the left —
       flush to the column top, transparent over the page background, no radius. */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-secondary);
    font-family: var(--font-ui);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 0.5em;
    flex-wrap: wrap;
  }
  /* Ask Ai / Comments toggle in chat panel */
  .chat-mode-toggle {
    display: inline-flex; align-items: center; font-size: 0.82em; font-family: var(--font-ui);
    background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 8px;
    overflow: hidden; flex-shrink: 0; height: 28px; padding: 8px 0;
  }
  .chat-mode-toggle-opt {
    padding: 0.25em 0.7em; cursor: pointer; font-weight: 500; transition: all 0.2s;
    color: var(--color-text-secondary); border: none; background: none; font-family: var(--font-ui);
    font-size: inherit; line-height: 1; white-space: nowrap; position: relative;
  }
  .chat-mode-toggle-opt.active {
    background: var(--color-accent); color: #fff;
  }
  .chat-mode-toggle-opt.active::after {
    content: ''; position: absolute; bottom: -2px; left: 20%; right: 20%;
    height: 2px; background: #fff; border-radius: 1px;
  }
  .chat-mode-toggle-opt:not(.active):hover {
    background: rgba(107, 91, 42, 0.08);
  }
  /* Read panel */
  .read-greeting {
    font-family: var(--font-display);
    font-size: 1.25em;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }
  .read-greeting .read-greeting-sub {
    display: block;
    font-size: 0.7em;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    margin-top: 0.2em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  }
  .read-landscape-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .read-landscape-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2em 1em 0.8em;
    background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .read-landscape-img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Fallback greeting when no landscape loaded */
  .read-greeting-fallback {
    font-family: var(--font-display);
    font-size: 1.25em;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
  }
  .read-greeting-fallback .read-greeting-sub {
    display: block;
    font-size: 0.7em;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-top: 0.2em;
  }
  .read-back-bar {
    display: none;
  }
  .read-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    background: none;
    border: none;
    color: var(--color-accent);
    font-family: var(--font-ui);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5em 0.8em;
  }
  .read-back-btn:hover {
    text-decoration: underline;
  }
  /* Daily reading card */
  .daily-reading-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.2em 1.2em 1em;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .daily-reading-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 0.3em;
  }
  .daily-reading-streak {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.75em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: 0.6em;
  }
  .daily-reading-streak .streak-flame {
    font-size: 1.1em;
  }
  .daily-reading-title {
    font-family: var(--font-display);
    font-size: 1.15em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.15em;
  }
  .daily-reading-ref {
    font-size: 0.85em;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 0.8em;
    text-decoration: none;
    display: inline-block;
    background: rgba(139,108,44,0.08);
    padding: 0.15em 0.5em;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
  }
  .daily-reading-ref:hover {
    background: rgba(139,108,44,0.18);
    color: var(--color-cta);
  }
  /* Step progress line */
  .daily-reading-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 2em;
  }
  .daily-reading-steps::before {
    content: '';
    position: absolute;
    left: 0.65em;
    top: 0.5em;
    bottom: 0.5em;
    width: 2px;
    background: var(--color-border);
    border-radius: 1px;
  }
  .daily-reading-step {
    position: relative;
    padding: 0.6em 0;
  }
  .daily-reading-step-dot {
    position: absolute;
    left: -1.35em;
    top: 0.85em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-border);
    z-index: 1;
  }
  .daily-reading-step-label {
    font-size: 0.68em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 0.3em;
  }
  /* Verse text — scripture styling */
  .daily-reading-verse {
    font-family: var(--font-display);
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--color-text-primary);
    white-space: pre-line;
  }
  .daily-reading-verse .rv-num {
    font-family: var(--font-reading);
    font-size: 0.7em;
    vertical-align: super;
    font-weight: 600;
    color: var(--color-accent);
    padding: 0 3px;
  }
  /* Context — subtle background */
  .daily-reading-context {
    font-size: 0.86em;
    color: var(--color-text-primary);
    line-height: 1.55;
    border-left: 3px solid var(--color-accent);
    padding-left: 0.8em;
    background: var(--color-surface-alt, rgba(0,0,0,0.02));
    border-radius: 0 6px 6px 0;
    padding: 0.6em 0.8em;
  }
  .daily-reading-reflection {
    font-size: 0.88em;
    color: var(--color-text-primary);
    line-height: 1.55;
    white-space: pre-line;
  }
  /* Journal / Response prompt */
  .daily-reading-response {
    background: var(--color-surface-alt, rgba(0,0,0,0.02));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.8em;
  }
  .daily-reading-response-question {
    font-size: 0.88em;
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 0.5em;
    line-height: 1.4;
  }
  .daily-reading-reflect-hint {
    font-size: 0.82em;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: 0.4em;
    line-height: 1.4;
  }
  .daily-reading-share-toggle {
    display: inline-block;
    font-size: 0.78em;
    font-family: var(--font-ui);
    color: #5a6e45;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s;
  }
  .daily-reading-share-toggle:hover {
    color: #3d5a1e;
    text-decoration: underline;
  }
  .daily-reading-share-expand {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
  }
  .daily-reading-share-expand.open {
    max-height: 300px;
    opacity: 1;
    margin-top: 0.5em;
  }
  .daily-reading-share-expand textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5em;
    font-size: 0.85em;
    font-family: var(--font-ui);
    background: var(--color-surface);
    color: var(--color-text-primary);
    resize: vertical;
    box-sizing: border-box;
  }
  .daily-reading-share-expand textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }
  .daily-reading-share-helper {
    font-size: 0.75em;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-top: 0.3em;
    line-height: 1.3;
  }
  .daily-reading-response textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5em;
    font-size: 0.85em;
    font-family: var(--font-ui);
    background: var(--color-surface);
    color: var(--color-text-primary);
    resize: vertical;
    box-sizing: border-box;
  }
  .daily-reading-response textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }
  .daily-reading-journal-save {
    margin-top: 0.4em;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.35em 0.9em;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
  }
  .daily-reading-journal-save:hover { opacity: 0.9; }
  .daily-reading-journal-cancel {
    font-size: 0.78em;
    color: var(--color-text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-ui);
    padding: 0;
    text-decoration: underline;
  }
  .daily-reading-journal-cancel:hover { color: var(--color-text-primary); }
  .daily-reading-journal-saved {
    font-size: 0.78em;
    color: var(--color-accent);
    margin-left: 0.5em;
    display: none;
  }
  /* Prayer */
  .daily-reading-prayer {
    font-size: 0.85em;
    font-style: italic;
    color: var(--color-text-secondary);
    line-height: 1.5;
    white-space: pre-line;
  }
  .daily-reading-prayer-type {
    display: inline-block;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-accent);
    color: #fff;
    padding: 0.15em 0.55em;
    border-radius: 10px;
    font-weight: 600;
    margin-top: 0.3em;
  }
  /* Complete button */
  .daily-reading-complete {
    align-self: center;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.6em 1.6em;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
    margin-top: 0.8em;
    transition: all 0.3s ease;
  }
  .daily-reading-complete:hover { opacity: 0.9; }
  .daily-reading-complete.completed {
    background: var(--success);
    cursor: default;
  }
  /* What's Next section */
  .whats-next-section {
    display: none;
    flex-direction: column;
    gap: 0.8em;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border);
    animation: slideDown 0.4s ease;
  }
  .whats-next-section.show { display: flex; }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .whats-next-heading {
    font-family: var(--font-display);
    font-size: 0.85em;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .whats-next-generate {
    background: var(--color-cta, var(--color-accent));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.7em 1.4em;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
    text-align: center;
    width: 100%;
    transition: opacity 0.2s;
  }
  .whats-next-generate:hover { opacity: 0.9; }
  .whats-next-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
  }
  .suggestion-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.7em 0.9em;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .suggestion-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .suggestion-card-title {
    font-family: var(--font-display);
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.15em;
  }
  .suggestion-card-ref {
    font-size: 0.8em;
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: 0.3em;
  }
  .suggestion-card-why {
    font-size: 0.8em;
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.4;
  }
  .whats-next-divider {
    font-family: var(--font-display);
    font-size: 0.78em;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin-top: 0.3em;
  }
  .whats-next-insight-nudge {
    font-size: 0.82em;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.4;
    padding: 0.4em;
  }
  .whats-next-insight-nudge i {
    color: var(--color-accent);
    vertical-align: middle;
  }
  .trail-prompt-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.8em;
    text-align: center;
  }
  .trail-prompt-title {
    font-family: var(--font-display);
    font-size: 0.88em;
    font-weight: 600;
    margin-bottom: 0.2em;
    color: var(--color-text-primary);
  }
  .trail-prompt-desc {
    font-size: 0.8em;
    color: var(--color-text-secondary);
    margin-bottom: 0.5em;
    line-height: 1.4;
  }
  .trail-prompt-btn {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    padding: 0.4em 1em;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
  }
  .trail-prompt-btn:hover { background: var(--color-accent); color: #fff; }
  .suggestion-skeleton {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.7em 0.9em;
    animation: pulse 1.5s ease-in-out infinite;
  }
  .suggestion-skeleton-line {
    height: 0.7em;
    background: var(--color-border);
    border-radius: 4px;
    margin-bottom: 0.4em;
  }
  .suggestion-skeleton-line:last-child { margin-bottom: 0; width: 60%; }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .daily-reading-go {
    align-self: flex-start;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5em 1.2em;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-ui);
    margin-top: 0.3em;
  }
  .daily-reading-go:hover {
    opacity: 0.9;
  }
  .daily-reading-setup {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1em 1.1em;
  }
  @media (max-width: 900px) {
    /* Let the toggle scroll horizontally so all 5 panels (Read/Insight+/Ask Ai/Notes/Comments) are tappable on phones */
    .chat-mode-toggle {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      max-width: calc(100vw - 90px);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .chat-mode-toggle::-webkit-scrollbar { display: none; }
    /* Show back bar and hide toggle when Read panel is active on mobile */
    body.read-panel-mobile .chat-mode-toggle {
      display: none !important;
    }
    body.read-panel-mobile .chat-mobile-close {
      display: none !important;
    }
    body.read-panel-mobile .read-back-bar {
      display: block;
      padding: 0.3em 0;
      border-bottom: 1px solid var(--color-border);
    }
    /* Immediately show chat panel as fullscreen overlay when Read panel is pre-set */
    body.read-panel-mobile .chat-panel {
      display: flex;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      max-width: 100vw; min-width: 0;
      z-index: 1100;
      background: var(--color-bg);
      margin: 0; border-radius: 0; border: none;
    }
    body.read-panel-mobile #read-body {
      display: flex !important;
    }
    body.read-panel-mobile #ask-ai-body,
    body.read-panel-mobile #chat-body,
    body.read-panel-mobile #notes-body,
    body.read-panel-mobile #insight-plus-body {
      display: none !important;
    }
  }
  /* Ask Ai messages */
  .ask-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    min-height: 0;
  }
  .ask-ai-msg {
    padding: 0.6em 0.8em;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
    max-width: 92%;
    word-wrap: break-word;
  }
  .ask-ai-msg.user {
    align-self: flex-end;
    background: var(--color-accent-light);
    color: var(--color-text-primary);
    border-bottom-right-radius: 3px;
    font-family: var(--font-ui);
  }
  .ask-ai-msg.ai {
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 3px;
    font-family: var(--font-reading);
    position: relative;
  }
  .ask-ai-msg.ai.loading {
    color: var(--color-accent);
    font-style: italic;
  }
  /* Insight+ formatted content — matches I'm Feeling design language */
  .insight-plus-card {
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: 14px;
    padding: 1.2em 1.1em;
    font-family: var(--font-reading);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-primary);
    box-shadow: 0 2px 16px rgba(139,108,44,0.08);
  }
  .insight-plus-card .ip-verse-ref {
    font-family: var(--font-ui);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.4em;
  }
  .insight-plus-card .ip-verse-ref .lucide { width: 15px; height: 15px; }
  .insight-plus-card .ip-verse-title {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.1em;
    font-family: var(--font-display);
    display: block;
    margin-bottom: 0.2em;
  }
  .insight-plus-card .ip-verse-text {
    color: var(--color-text-primary);
    font-family: var(--font-reading);
    font-size: 0.95em;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1em;
  }
  .insight-plus-card .ip-demo-pill {
    margin-left: auto;
    background: var(--color-accent-light);
    border-radius: 14px;
    padding: 0.2em 0.7em;
    font-size: 1em;
    font-weight: 500;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    text-transform: none;
    letter-spacing: 0;
  }
  .insight-plus-card .ip-demo-pill .lucide { width: 13px; height: 13px; }
  .insight-plus-card .ip-section {
    margin-bottom: 1.2em;
  }
  .insight-plus-card .ip-section:last-child {
    margin-bottom: 0;
  }
  .insight-plus-card .ip-section-title {
    font-family: var(--font-ui);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-accent);
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.4em;
  }
  .insight-plus-card .ip-section-title .lucide { width: 15px; height: 15px; }
  .insight-plus-card .ip-section-tts {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    opacity: 0.6;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s, color 0.15s;
  }
  .insight-plus-card .ip-section-tts:hover { opacity: 1; }
  .insight-plus-card .ip-section-tts.tts-active { opacity: 1; color: var(--warning); }
  .insight-plus-card .ip-section-tts svg { width: 15px; height: 15px; }
  .insight-plus-card .scripture-ref {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    background: rgba(139,108,44,0.08);
    padding: 0.05em 0.3em;
    border-radius: 4px;
    cursor: pointer;
  }
  .insight-plus-card .scripture-ref:hover {
    text-decoration: underline;
    background: rgba(139,108,44,0.15);
  }
  .insight-plus-card .ip-section-body {
    color: var(--color-text-primary);
    font-family: var(--font-reading);
    font-size: 0.95em;
    line-height: 1.7;
  }
  .insight-plus-card .ip-section.ip-prayer .ip-section-body {
    font-style: italic;
    padding: 0.8em 1em;
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
  }
  .insight-plus-card .ip-read-more {
    display: inline;
    color: var(--color-accent);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88em;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-ui);
  }
  .insight-plus-card .ip-read-more:hover {
    text-decoration: underline;
  }
  .insight-plus-loading {
    text-align: center;
    padding: 2em 1em;
    color: var(--color-accent);
    font-family: var(--font-ui);
  }
  .insight-plus-loading .ip-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: ip-spin 0.8s linear infinite;
  }
  @keyframes ip-spin { to { transform: rotate(360deg); } }
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    min-height: 0;
  }
  .chat-msg {
    padding: 0.6em 0.8em;
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font-ui);
    line-height: 1.55;
    max-width: 92%;
    word-wrap: break-word;
  }
  .chat-msg.user {
    align-self: flex-end;
    background: var(--color-accent-light);
    color: var(--color-text-primary);
    border-bottom-right-radius: 3px;
  }
  .chat-msg.ai {
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 3px;
    font-family: var(--font-reading);
  }
  .chat-msg.ai.loading {
    color: var(--color-accent);
    font-style: italic;
  }
  .chat-input-wrapper {
    padding: 0.6em 0.8em;
    background: var(--color-bg);
    border-top: none;
    display: flex;
    gap: 0.4em;
    flex-shrink: 0;
    border-radius: 0 0 12px 12px;
  }
  .chat-input-wrapper textarea {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    padding: 0.5em 0.9em;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-ui);
    max-height: 80px;
    overflow-y: auto;
  }
  .chat-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139,108,44,0.15);
  }
  .chat-input-wrapper button {
    background: var(--color-cta);
    color: var(--color-cta-text);
    border: none;
    border-radius: 24px;
    font-weight: 500;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--font-ui);
    white-space: nowrap;
    transition: background 0.15s;
  }
  .chat-input-wrapper button:hover {
    background: var(--color-cta-hover);
  }
  /* Mobile close button - hidden on desktop */
  .chat-mobile-close {
    display: none;
  }
  @media (max-width: 900px) {
    /* Remove max-height on mobile so Ask/Notes sections are reachable */
    .scripture-scroll-container {
      max-height: none !important;
      overflow-y: visible !important;
    }
    /* Mobile: the whole chat-column (tab bar + card) goes fullscreen so
       the lifted-out tab header still lives inside the overlay. */
    .chat-column:has(.chat-panel.visible) {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      max-width: 100vw;
      max-height: 100vh;
      min-width: 0;
      z-index: 1100;
      background: var(--color-bg);
      margin: 0;
      padding: 0;
      gap: 0;
    }
    .chat-column:has(.chat-panel.visible) .chat-panel-header {
      padding: 0.5em 0.8em;
      background: var(--color-bg);
      border-bottom: 1px solid var(--color-border);
    }
    .chat-panel.visible {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      height: auto;
      flex: 1 1 auto;
      max-width: 100vw;
      min-width: 0;
      background: var(--color-bg);
      margin: 0;
      border-radius: 0;
      border: none;
      box-shadow: none;
    }
    .chat-panel.visible .chat-input-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      max-width: 100vw;
      background: var(--color-bg);
      border-top: 1px solid var(--color-border);
      padding: 0.6em 0.8em;
      z-index: 1101;
    }
    .chat-mobile-close {
      display: inline-block;
      background: none;
      border: none;
      font-size: 1.6em;
      color: var(--color-text-secondary);
      cursor: pointer;
      padding: 0 0.3em;
      line-height: 1;
    }
    .chat-mobile-close:hover {
      color: var(--color-text-primary);
    }
    /* Hide scripture when chat is open on mobile */
    body.mobile-chat-open #scripture-container {
      display: none !important;
    }
  }

  /* ── Bible Notes — floating draggable/resizable panel ── */
  /* Wrapper does NOT capture clicks — only the panel itself does */
  .bn-modal-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    pointer-events:none; background:transparent;
  }
  .bn-modal-overlay.open { display:block; }
  .bn-modal {
    position:absolute; top:80px; left:50%;
    transform:translateX(-50%);
    background:var(--color-surface, #fff);
    border-radius:12px; width:min(900px, 90vw); height:min(640px, 80vh);
    min-width:320px; min-height:260px;
    max-width:98vw; max-height:92vh;
    display:flex; flex-direction:column;
    box-shadow:0 12px 40px rgba(44,36,23,0.25), 0 2px 8px rgba(44,36,23,0.1);
    border:1px solid var(--color-border, var(--border-light));
    overflow:hidden;
    pointer-events:auto;
    resize:both;
    animation:bnSlideIn 0.18s ease-out;
  }
  .bn-modal.minimized { height:auto !important; min-height:0 !important; resize:none; }
  .bn-modal.minimized .bn-modal-body,
  .bn-modal.minimized .bn-search-results,
  .bn-modal.minimized .bn-resize-grip { display:none !important; }
  @keyframes bnSlideIn { from { transform:translateX(-50%) translateY(10px); opacity:0; } to { transform:translateX(-50%) translateY(0); opacity:1; } }
  /* After the user drags the panel, we replace translateX(-50%) with explicit coords */
  .bn-modal.dragged { transform:none; }
  .bn-resize-grip {
    position:absolute; right:2px; bottom:2px; width:14px; height:14px;
    cursor:nwse-resize; pointer-events:none;
    background:
      linear-gradient(135deg, transparent 40%, var(--color-border, #c0b8a8) 40% 52%, transparent 52% 65%, var(--color-border, #c0b8a8) 65% 77%, transparent 77%);
    opacity:0.7;
  }
  .bn-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.5em 0.9em; border-bottom:1px solid var(--color-border, var(--border-light)); flex-shrink:0;
    cursor:move; user-select:none;
    background:linear-gradient(to bottom, rgba(139,111,71,0.04), transparent);
  }
  .bn-modal-header input, .bn-modal-header button { cursor:auto; }
  .bn-min-btn {
    background:none; border:none; font-size:1.1em; cursor:pointer;
    color:var(--color-text-secondary); padding:0 0.25em; line-height:1; font-weight:600;
  }
  .bn-min-btn:hover { color:var(--color-text-primary); }
  .bn-modal-title { display:flex; align-items:center; gap:0.5em; font-weight:600; font-size:1.05em; font-family:var(--font-display, 'DM Sans', sans-serif); color:var(--color-text-primary); }
  .bn-modal-title svg { color:var(--color-accent, var(--brand-gold)); }
  .bn-modal-header-actions { display:flex; align-items:center; gap:0.5em; }
  .bn-search-input { border:1px solid var(--color-border, var(--border-light)); border-radius:8px; padding:0.35em 0.8em; font-size:0.85em; font-family:var(--font-ui, 'DM Sans', sans-serif); width:200px; background:var(--color-bg, var(--bg-primary)); color:var(--color-text-primary); outline:none; }
  .bn-search-input:focus { border-color:var(--color-accent, var(--brand-gold)); }
  .bn-close-btn { background:none; border:none; font-size:1.6em; cursor:pointer; color:var(--color-text-secondary); padding:0 0.2em; line-height:1; }
  .bn-close-btn:hover { color:var(--color-text-primary); }

  /* Notebook tab strip (new) */
  .bn-notebook-tabs {
    display:flex; align-items:center; gap:0.25em;
    padding:0.3em 0.5em; border-bottom:1px solid var(--color-border, var(--border-light));
    background:var(--color-bg, var(--bg-primary));
    flex-shrink:0; min-height:40px;
  }
  .bn-tabs-scroll {
    flex:1; display:flex; gap:0.25em; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .bn-tabs-scroll::-webkit-scrollbar { height:4px; }
  .bn-tabs-scroll::-webkit-scrollbar-thumb { background:var(--color-border, var(--border-light)); border-radius:2px; }
  .bn-tab {
    display:inline-flex; align-items:center; gap:0.4em;
    padding:0.35em 0.8em; border-radius:8px 8px 0 0;
    background:transparent; border:1px solid transparent; border-bottom:none;
    cursor:pointer; font-family:var(--font-ui, 'DM Sans', sans-serif);
    font-size:0.85em; color:var(--color-text-secondary);
    white-space:nowrap; flex-shrink:0;
    transition:background 0.12s, color 0.12s;
    position:relative; top:1px;  /* visually bleed into content border */
  }
  .bn-tab:hover { background:rgba(139,111,71,0.06); color:var(--color-text-primary); }
  .bn-tab.active {
    background:var(--color-surface, #fff); color:var(--color-text-primary);
    border-color:var(--color-border, var(--border-light)); font-weight:600;
  }
  .bn-tab-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .bn-tab-name { max-width:200px; overflow:hidden; text-overflow:ellipsis; }
  .bn-tab-add {
    flex-shrink:0; background:none; border:1px dashed var(--color-border, var(--border-light));
    border-radius:8px; width:32px; height:28px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1.1em; color:var(--color-accent, var(--brand-gold));
    font-weight:600; padding:0;
  }
  .bn-tab-add:hover { background:rgba(139,111,71,0.06); border-color:var(--color-accent, var(--brand-gold)); }
  .bn-tabs-empty {
    flex:1; display:flex; align-items:center; gap:0.5em;
    padding:0.2em 0.4em; font-size:0.82em; color:var(--color-text-secondary);
    font-family:var(--font-ui, 'DM Sans', sans-serif);
  }
  .bn-tabs-empty-btn {
    background:none; border:none; padding:0.2em 0.4em;
    font:inherit; color:var(--color-accent, var(--brand-gold)); cursor:pointer;
    font-weight:600;
  }
  .bn-tabs-empty-btn:hover { text-decoration:underline; }
  .bn-tabs-loading { flex:1; display:flex; justify-content:center; align-items:center; padding:0.2em; }
  .bn-tabs-loading .bn-spinner { width:18px; height:18px; border-width:2px; }
  .bn-tabs-error { flex:1; color:var(--color-danger, var(--danger)); font-size:0.8em; padding:0.3em 0.6em; font-family:var(--font-ui); }

  .bn-modal-body { display:flex; flex:1; min-height:0; overflow:hidden; position:relative; }
  .bn-col { display:flex; flex-direction:column; border-right:1px solid var(--color-border, var(--border-light)); min-height:0; }
  .bn-col:last-child { border-right:none; }
  .bn-col-sections { width:280px; flex-shrink:0; background:var(--color-bg, var(--bg-primary)); }
  .bn-col-editor { flex:1; min-width:0; background:var(--color-surface, #fff); }

  .bn-col-header { display:flex; align-items:center; justify-content:space-between; padding:0.6em 0.8em; font-weight:600; font-size:0.82em; font-family:var(--font-ui, 'DM Sans', sans-serif); color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--color-border-light, var(--bg-sidebar)); flex-shrink:0; gap:0.3em; }
  .bn-col-header span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bn-col-list { flex:1; overflow-y:auto; padding:0.4em; }
  .bn-add-btn { background:none; border:1px solid var(--color-border, var(--border-light)); border-radius:6px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1em; color:var(--color-accent, var(--brand-gold)); flex-shrink:0; }
  .bn-add-btn:hover { background:var(--color-accent-light, var(--bg-primary)); }
  .bn-back-btn { display:none; background:none; border:none; cursor:pointer; color:var(--color-text-secondary); padding:0.2em; flex-shrink:0; }

  /* Notebook items */
  .bn-notebook-item { display:flex; align-items:center; gap:0.6em; padding:0.6em 0.7em; border-radius:8px; cursor:pointer; transition:background 0.1s; }
  .bn-notebook-item:hover { background:var(--color-surface-alt, var(--bg-primary)); }
  .bn-notebook-item.active { background:var(--color-accent-light, var(--bg-primary)); }
  .bn-nb-color { width:6px; height:32px; border-radius:3px; flex-shrink:0; }
  .bn-nb-info { flex:1; min-width:0; }
  .bn-nb-name { font-weight:500; font-size:0.9em; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bn-nb-meta { font-size:0.75em; color:var(--color-text-secondary); margin-top:0.1em; }
  .bn-nb-menu-btn { background:none; border:none; cursor:pointer; color:var(--color-text-muted, var(--text-muted)); font-size:1.1em; padding:0.2em 0.3em; opacity:0; transition:opacity 0.1s; }
  .bn-notebook-item:hover .bn-nb-menu-btn { opacity:1; }

  /* Section items */
  .bn-section-group { margin-bottom:0.2em; }
  .bn-section-header { display:flex; align-items:center; gap:0.5em; padding:0.5em 0.6em; border-radius:8px; cursor:pointer; transition:background 0.1s; font-family:var(--font-ui, 'DM Sans', sans-serif); }
  .bn-section-header:hover { background:var(--color-surface-alt, var(--bg-primary)); }
  .bn-section-header.active { background:var(--color-accent-light, var(--bg-primary)); }
  .bn-sec-color { width:4px; height:20px; border-radius:2px; flex-shrink:0; }
  .bn-sec-name { flex:1; font-size:0.88em; font-weight:500; color:var(--color-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bn-sec-count { font-size:0.72em; color:var(--color-text-muted, var(--text-muted)); background:var(--color-bg, var(--bg-primary)); padding:0.1em 0.5em; border-radius:10px; flex-shrink:0; }
  .bn-sec-menu-btn { background:none; border:none; cursor:pointer; color:var(--color-text-muted, var(--text-muted)); font-size:1em; padding:0.1em 0.2em; opacity:0; transition:opacity 0.1s; flex-shrink:0; }
  .bn-section-header:hover .bn-sec-menu-btn { opacity:1; }
  .bn-sec-add-page { background:none; border:none; cursor:pointer; color:var(--color-accent, var(--brand-gold)); font-size:1em; padding:0.1em 0.2em; opacity:0; transition:opacity 0.1s; flex-shrink:0; }
  .bn-section-header:hover .bn-sec-add-page { opacity:1; }

  /* Page items */
  .bn-page-item { padding:0.4em 0.6em 0.4em 1.8em; border-radius:6px; cursor:pointer; transition:background 0.1s; }
  .bn-page-item:hover { background:var(--color-surface-alt, var(--bg-primary)); }
  .bn-page-item.active { background:var(--color-accent, var(--brand-gold)); }
  .bn-page-item.active .bn-page-item-title { color:#fff; }
  .bn-page-item.active .bn-page-item-preview { color:rgba(255,255,255,0.7); }
  .bn-page-item-inner { display:flex; align-items:center; gap:0.4em; }
  .bn-page-item-text { min-width:0; flex:1; }
  .bn-page-item-title { font-size:0.84em; font-weight:500; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bn-page-item-preview { font-size:0.72em; color:var(--color-text-muted, var(--text-muted)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:0.1em; }
  .bn-pinned, .bn-starred { font-size:0.7em; flex-shrink:0; }

  /* Editor */
  .bn-editor-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; padding:0.8em 1.2em; }
  .bn-editor-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--color-text-muted, var(--text-muted)); gap:0.8em; }
  .bn-editor-empty svg { opacity:0.4; }
  .bn-editor-empty p { font-family:var(--font-ui, 'DM Sans', sans-serif); font-size:0.9em; }
  .bn-editor-form { display:flex; flex-direction:column; flex:1; min-height:0; gap:0.6em; }
  .bn-page-title-input { border:none; outline:none; font-size:1.3em; font-weight:600; font-family:var(--font-display, 'DM Sans', sans-serif); color:var(--color-text-primary); background:transparent; padding:0; }
  .bn-page-title-input::placeholder { color:var(--color-text-muted, var(--text-muted)); }
  .bn-page-ref-row { display:flex; align-items:center; gap:0.4em; color:var(--color-text-secondary); }
  .bn-page-ref-input { border:none; outline:none; font-size:0.85em; font-family:var(--font-ui, 'DM Sans', sans-serif); color:var(--color-accent, var(--brand-gold)); background:transparent; flex:1; }
  .bn-page-ref-input::placeholder { color:var(--color-text-muted, var(--text-muted)); }
  .bn-page-content { flex:1; border:none; outline:none; resize:none; font-family:var(--font-reading, 'Crimson Pro', Georgia, serif); font-size:1.05em; line-height:1.8; color:var(--color-text-primary); background:transparent; min-height:200px; }
  .bn-page-content::placeholder { color:var(--color-text-muted, var(--text-muted)); }
  .bn-page-footer { display:flex; align-items:center; justify-content:space-between; padding-top:0.5em; border-top:1px solid var(--color-border-light, var(--bg-sidebar)); flex-shrink:0; }
  .bn-page-tags { display:flex; flex-wrap:wrap; gap:0.3em; align-items:center; }
  .bn-tag-chip { display:inline-flex; align-items:center; padding:0.15em 0.5em; border-radius:10px; font-size:0.72em; font-family:var(--font-ui, 'DM Sans', sans-serif); background:var(--color-bg, var(--bg-primary)); color:var(--color-text-secondary); cursor:pointer; }
  .bn-tag-chip:hover { text-decoration:line-through; color:var(--color-danger, var(--danger)); }
  .bn-add-tag-btn { background:none; border:1px dashed var(--color-border, var(--border-light)); border-radius:10px; padding:0.1em 0.5em; font-size:0.72em; font-family:var(--font-ui, 'DM Sans', sans-serif); color:var(--color-text-muted, var(--text-muted)); cursor:pointer; }
  .bn-add-tag-btn:hover { border-color:var(--color-accent, var(--brand-gold)); color:var(--color-accent, var(--brand-gold)); }
  .bn-page-actions { display:flex; gap:0.3em; }
  .bn-page-actions button { background:none; border:none; cursor:pointer; font-size:0.9em; padding:0.2em; opacity:0.5; transition:opacity 0.1s; }
  .bn-page-actions button:hover { opacity:1; }
  .bn-save-status { font-size:0.72em; color:var(--color-accent, var(--brand-gold)); font-family:var(--font-ui, 'DM Sans', sans-serif); margin-left:auto; flex-shrink:0; }

  /* Empty / loading states */
  .bn-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2em 1em; text-align:center; color:var(--color-text-muted, var(--text-muted)); gap:0.5em; }
  .bn-empty-state p { font-family:var(--font-ui, 'DM Sans', sans-serif); font-size:0.88em; margin:0; }
  .bn-create-first-btn { background:var(--color-cta, var(--brand-gold)); color:#fff; border:none; border-radius:8px; padding:0.5em 1.2em; font-family:var(--font-ui, 'DM Sans', sans-serif); font-size:0.85em; font-weight:500; cursor:pointer; }
  .bn-create-first-btn:hover { opacity:0.9; }
  .bn-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2em; gap:0.8em; color:var(--color-text-muted, var(--text-muted)); }
  .bn-spinner { width:28px; height:28px; border:3px solid var(--color-border, var(--border-light)); border-top-color:var(--color-accent, var(--brand-gold)); border-radius:50%; animation:spin 0.8s linear infinite; }

  /* Context menu */
  .bn-ctx-menu { position:fixed; z-index:10001; background:var(--color-surface, #fff); border-radius:10px; box-shadow:0 6px 24px rgba(44,36,23,0.15); padding:4px; min-width:140px; border:1px solid var(--color-border-light, var(--bg-sidebar)); }
  .bn-ctx-menu button { display:block; width:100%; text-align:left; padding:0.5em 0.8em; border:none; background:transparent; cursor:pointer; border-radius:6px; font-family:var(--font-ui, 'DM Sans', sans-serif); font-size:0.85em; color:var(--color-text-primary); }
  .bn-ctx-menu button:hover { background:var(--color-surface-alt, var(--bg-primary)); }
  .bn-ctx-menu button.danger { color:var(--color-danger, var(--danger)); }

  /* Search results overlay */
  .bn-search-results { display:none; position:absolute; inset:0; z-index:5; background:var(--color-surface, #fff); flex-direction:column; }
  .bn-search-results-header { display:flex; align-items:center; justify-content:space-between; padding:0.8em 1.2em; border-bottom:1px solid var(--color-border, var(--border-light)); font-weight:600; font-size:0.9em; font-family:var(--font-ui, 'DM Sans', sans-serif); }
  .bn-close-search { background:none; border:none; font-size:1.3em; cursor:pointer; color:var(--color-text-secondary); }
  .bn-search-results-list { flex:1; overflow-y:auto; padding:0.5em; }
  .bn-search-result-item { padding:0.6em 0.8em; border-radius:8px; cursor:pointer; transition:background 0.1s; border-bottom:1px solid var(--color-border-light, var(--bg-sidebar)); }
  .bn-search-result-item:hover { background:var(--color-surface-alt, var(--bg-primary)); }
  .bn-sr-title { font-weight:500; font-size:0.9em; color:var(--color-text-primary); }
  .bn-sr-meta { font-size:0.72em; color:var(--color-text-secondary); margin-top:0.1em; }
  .bn-sr-preview { font-size:0.78em; color:var(--color-text-muted, var(--text-muted)); margin-top:0.2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Toast */
  .bn-toast { position:absolute; bottom:1em; left:50%; transform:translateX(-50%); background:var(--color-text-primary, #2C2417); color:#fff; padding:0.5em 1.2em; border-radius:8px; font-family:var(--font-ui, 'DM Sans', sans-serif); font-size:0.82em; z-index:10; animation:bnFadeIn 0.2s ease-out; }
  @keyframes bnFadeIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

  /* Mobile: fullscreen, single-column with navigation */
  @media (max-width: 900px) {
    .bn-modal, .bn-modal.minimized, .bn-modal.dragged {
      position:fixed !important;
      top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
      width:100vw !important; height:100vh !important;
      height:100dvh !important;   /* iOS Safari correct viewport */
      max-width:100vw !important; max-height:100vh !important; max-height:100dvh !important;
      min-width:0 !important; min-height:0 !important;
      border-radius:0 !important;
      transform:none !important;
      resize:none !important;
    }
    .bn-modal.minimized .bn-modal-body,
    .bn-modal.minimized .bn-search-results { display:flex !important; }
    .bn-modal-body { position:relative; }
    .bn-col { position:absolute; inset:0; border-right:none; display:none; }
    /* Override desktop 280px width so the active panel fills the screen */
    .bn-col-sections { display:flex; z-index:1; width:100% !important; max-width:100% !important; }
    .bn-col-editor { width:100% !important; }
    .bn-col.bn-col-visible { display:flex; width:100% !important; z-index:3; }
    .bn-back-btn {
      display:flex; align-items:center; gap:0.4em;
      min-width:44px; min-height:44px; padding:0.3em 0.6em;
    }
    /* Header breathing room + search expands on focus */
    .bn-modal-header { padding:0.5em 0.8em; gap:0.5em; }
    .bn-search-input { width:100px; transition:width 0.2s ease; }
    .bn-search-input:focus { width:180px; }
    .bn-resize-grip { display:none !important; }
    .bn-min-btn { display:none !important; }
    /* Notebook tabs: scrollable + touch-friendly */
    .bn-notebook-tabs {
      padding:0.3em 0.5em; min-height:44px;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    .bn-tab { min-height:36px; padding:0.3em 0.8em; font-size:0.85em; white-space:nowrap; }
    .bn-tab-name { max-width:140px; }
    /* Section/page list headers + items: 44px+ touch targets */
    .bn-col-header { min-height:44px; padding:0.5em 1em; }
    .bn-col-header button, .bn-add-btn { min-width:44px; min-height:44px; }
    .bn-section-header, .bn-page-item, .bn-notebook-item { min-height:48px; padding:0.7em 1em; }
    .bn-page-item { padding-left:1.8em; }
    /* Editor textarea: 16px prevents iOS auto-zoom on focus */
    .bn-page-content {
      font-size:16px !important;
      padding:1em 0;
      line-height:1.6;
    }
    .bn-editor-body { padding:0.8em 1em; }
    /* Bottom footer (tags + pin/star/delete): sticky with safe-area inset */
    .bn-page-footer {
      position:sticky; bottom:0;
      padding:0.5em 0;
      padding-bottom:calc(0.5em + env(safe-area-inset-bottom));
      background:var(--color-surface, #fff);
      min-height:48px;
    }
    .bn-page-actions button, .bn-add-tag-btn { min-width:44px; min-height:44px; }
    .bn-page-actions button { opacity:0.8; }  /* always visible on touch */
  }
    /* Parallax scroll effect for reading card */
    .reading-card {
      transform: translateY(0);
      transition: transform 0.05s linear;
    }
  /* Immersion Modal */
  #immersion-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #0a0a0f;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #immersion-modal::-webkit-scrollbar { display: none; }
  #immersion-modal.active { display: block; }

  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Lora:ital,wght@0,400;0,700;1,400&display=swap');

  #immersion-modal * { box-sizing: border-box; }
  #immersion-modal { font-family: 'Lora', serif; color: #e2e8f0; }
  #immersion-modal h1, #immersion-modal h2, #immersion-modal h3, #immersion-modal h4 { font-family: 'Cinzel', serif; }

  /* Scene viewport */
  #imm-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 1;
  }
  #imm-scroll-spacer {
    height: 500vh;
    pointer-events: none;
  }

  /* Scene sections */
  .imm-section {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    will-change: transform, opacity;
  }
  .imm-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.8s ease;
    will-change: transform;
    transform-origin: center center;
  }
  .imm-bg.empty { opacity: 1; }
  .imm-bg.loaded { opacity: 1; }
  .imm-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.5) 100%);
  }
  .imm-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    width: 90%;
    text-align: center;
    padding: 2rem 2rem 3rem;
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 100%);
  }
  .imm-content::-webkit-scrollbar { display: none; }
  .imm-content h3 {
    font-size: 1.8rem;
    color: var(--warning);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(217,119,6,0.4);
  }
  .imm-content .imm-verse {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0.8rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    color: #e2e8f0;
  }
  .imm-verse-number {
    color: #d97706;
    font-weight: 700;
    margin-right: 0.25rem;
    font-size: 0.7rem;
    vertical-align: super;
  }
  .imm-title-section h1 {
    font-size: 3.5rem;
    color: var(--warning);
    margin-bottom: 0.5rem;
    text-shadow: 0 4px 30px rgba(217,119,6,0.3);
    letter-spacing: 0.15em;
  }
  .imm-title-section .imm-subtitle {
    font-size: 1.2rem;
    color: #94a3b8;
    font-style: italic;
    margin-bottom: 2rem;
  }
  .imm-title-section .imm-chapter-name {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #fcd34d;
  }

  /* HUD */
  .imm-hud-btn {
    position: fixed;
    z-index: 100200;
    padding: 0.5rem 0.8rem;
    font-size: 0.7rem;
    border-radius: 2rem;
    backdrop-filter: blur(12px);
    border: 1px solid;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Lora', serif;
  }
  #imm-btn-close {
    top: 1rem; left: 1rem;
    background: rgba(120,20,20,0.4);
    border-color: rgba(239,68,68,0.3);
    color: var(--danger);
  }
  #imm-btn-close:hover { background: rgba(120,20,20,0.7); }
  #imm-btn-read-aloud {
    top: 1rem; left: 50%;
    transform: translateX(-50%);
    background: rgba(120,53,15,0.4);
    border-color: rgba(217,119,6,0.3);
    color: var(--warning);
  }
  #imm-btn-read-aloud:hover { background: rgba(120,53,15,0.7); }

  /* Progress dots */
  #imm-progress-dots {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100200;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .imm-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s ease;
    cursor: pointer;
  }
  .imm-dot.active {
    background: var(--warning);
    border-color: #d97706;
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(217,119,6,0.5);
  }

  /* Narration player */
  #imm-player {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100400;
    backdrop-filter: blur(16px);
    background: rgba(10,10,15,0.92);
    border-top: 1px solid rgba(217,119,6,0.25);
    padding: 0.6rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transform: translateY(100%);
    transition: transform 0.4s ease;
  }
  #imm-player.visible { transform: translateY(0); }
  #imm-player .np-btn {
    background: none;
    border: none;
    color: var(--warning);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem;
  }
  #imm-np-progress-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
  }
  #imm-np-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #d97706, var(--warning));
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s linear;
  }
  #imm-np-time {
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: monospace;
    min-width: 70px;
    text-align: center;
  }
  #imm-np-scene-label {
    font-size: 0.7rem;
    color: var(--warning);
    font-family: 'Cinzel', serif;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .imm-verse.speaking {
    color: #fef3c7 !important;
    text-shadow: 0 0 20px rgba(217,119,6,0.4), 0 2px 8px rgba(0,0,0,0.8) !important;
    transition: color 0.4s, text-shadow 0.4s;
  }
  .imm-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(251,191,36,0.3);
    border-top-color: var(--warning);
    border-radius: 50%;
    animation: immSpin 0.8s linear infinite;
    margin-right: 0.4rem;
    vertical-align: middle;
  }
  @keyframes immSpin { to { transform: rotate(360deg); } }

  /* Loading overlay */
  #imm-loading {
    position: fixed;
    inset: 0;
    z-index: 100500;
    background: #0a0a0f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    font-family: 'Lora', serif;
  }
  #imm-loading.hidden { display: none; }
  #imm-loading h2 {
    font-family: 'Cinzel', serif;
    color: var(--warning);
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  #imm-loading .imm-loading-status {
    color: #94a3b8;
    font-style: italic;
    margin-bottom: 0.5rem;
  }

  /* Regenerate button (admin only) */
  #imm-btn-regenerate {
    top: 1rem; right: 1rem;
    background: rgba(88,28,135,0.4);
    border-color: rgba(168,85,247,0.3);
    color: #c4b5fd;
  }
  #imm-btn-regenerate:hover { background: rgba(88,28,135,0.7); }

  /* Nav arrows — positioned below the dots on the right */
  #imm-nav-arrows {
    position: fixed;
    right: 1rem;
    top: calc(50% + 6rem);
    z-index: 100200;
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
  }
  .imm-nav-arrow {
    position: static;
    transform: none;
    z-index: 100200;
    font-size: 1.5rem;
    padding: 0.25rem 0.55rem;
    background: rgba(30,30,40,0.6);
    border-color: rgba(255,255,255,0.15);
    color: var(--warning);
    line-height: 1;
    backdrop-filter: blur(8px);
    border-radius: 2rem;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    font-family: 'Lora', serif;
    transition: all 0.3s;
  }
  .imm-nav-arrow:hover { background: rgba(120,53,15,0.6); }
  @media (max-width: 768px) {
    #imm-nav-arrows { right: 0.5rem; top: calc(50% + 5rem); }
    .imm-nav-arrow { font-size: 1.2rem; padding: 0.3rem 0.45rem; }
  }

  @media (max-width: 768px) {
    .imm-title-section h1 { font-size: 2.2rem; }
    .imm-title-section .imm-chapter-name { font-size: 1.4rem; }
    .imm-content h3 { font-size: 1.3rem; }
    .imm-content .imm-verse { font-size: 0.95rem; }
  }
  /* Outer wrap: scroll container, clamped to parent width. */
  .chapter-progress-dots-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 0.6rem;
    box-sizing: border-box;
  }
  .chapter-progress-dots-wrap::-webkit-scrollbar { display: none; }
  /* Inner nav: natural content width, overflows inside the wrap. */
  .chapter-progress-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    width: max-content;
    background: transparent;
  }
  .chapter-progress-dots .cpd-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--color-text-muted);
    text-decoration: none;
    color: transparent;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
    position: relative;
  }
  .chapter-progress-dots .cpd-dot:hover {
    transform: scale(1.35);
    border-color: var(--color-accent);
  }
  .chapter-progress-dots .cpd-dot.cpd-read {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
  }
  .chapter-progress-dots .cpd-dot.cpd-current {
    width: 22px;
    border-radius: 999px;
    background: var(--color-accent, var(--color-accent));
    border-color: var(--color-accent, var(--color-accent));
    color: var(--color-cta-text, #fff);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-ui);
    letter-spacing: -0.2px;
  }
  .chapter-progress-dots .cpd-dot.cpd-current:hover { transform: none; }
  @media (max-width: 700px) {
    .chapter-progress-dots { padding: 8px 10px; gap: 4px; }
    .chapter-progress-dots .cpd-dot { width: 12px; height: 12px; }
    .chapter-progress-dots .cpd-dot.cpd-current { width: 26px; font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chapter-progress-dots .cpd-dot { transition: none; }
    .chapter-progress-dots .cpd-dot:hover { transform: none; }
  }
  .aa-popover-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.28);
    z-index: 990;
    animation: aaFade 0.15s ease;
  }
  .aa-popover-backdrop.open { display: block; }
  .aa-popover {
    display: none;
    position: fixed;
    z-index: 991;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    padding: 14px 16px;
    font-family: var(--font-ui);
    color: var(--color-text-primary);
    width: 280px;
    max-width: 92vw;
    /* Desktop: anchor near the Aa button via JS */
    top: 60px;
    right: 16px;
  }
  .aa-popover.open { display: block; }
  .aa-popover h4 {
    margin: 0 0 10px 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
  }
  .aa-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .aa-row:last-child { margin-bottom: 0; }
  .aa-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    width: 56px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .aa-seg {
    display: inline-flex;
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-alt, rgba(0,0,0,0.02));
  }
  .aa-seg button {
    flex: 1;
    min-height: 36px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background 0.12s;
  }
  .aa-seg button:hover { background: rgba(0,0,0,0.04); }
  .aa-seg button.active {
    background: var(--color-accent, var(--color-accent));
    color: var(--color-cta-text, #fff);
    font-weight: 600;
  }
  .aa-seg button + button {
    border-left: 1px solid var(--color-border);
  }
  .aa-seg button.active + button,
  .aa-seg button + button.active { border-left-color: transparent; }
  .aa-size-a { font-family: var(--font-display); font-weight: 600; }
  .aa-size-a.aa-small { font-size: 0.85rem; }
  .aa-size-a.aa-large { font-size: 1.25rem; }
  .aa-reset {
    margin-top: 6px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 0;
  }
  .aa-reset:hover { color: var(--color-accent); }

  @media (max-width: 700px) {
    /* Mobile: bottom sheet */
    .aa-popover {
      top: auto !important;
      right: 0 !important;
      left: 0;
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 16px 16px 0 0;
      padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
      animation: aaSlideUp 0.2s ease;
    }
  }
  @keyframes aaFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes aaSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .mobile-chapter-nav { display: none; }
  @media (max-width: 700px) {
    .mobile-chapter-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      left: 0; right: 0;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
      padding: 0 14px;
      pointer-events: none;
      z-index: 950;
    }
    .mobile-chapter-nav .mcn-btn {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--color-surface, #fff);
      color: var(--color-text-primary, #222);
      border: 1px solid var(--color-border, rgba(0,0,0,0.08));
      box-shadow: 0 2px 12px rgba(0,0,0,0.14);
      text-decoration: none;
      transition: transform 0.12s, box-shadow 0.15s;
    }
    .mobile-chapter-nav .mcn-btn:active { transform: scale(0.94); }
    .mobile-chapter-nav .mcn-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
    /* If only one of prev/next exists, push it to its corner */
    .mobile-chapter-nav .mcn-prev:only-child { margin-right: auto; }
    .mobile-chapter-nav .mcn-next:only-child { margin-left: auto; }

    /* Bigger tap targets for the three small insight-level dots — expands hit area
       via a pseudo-element so the visible dot stays 14×14 and never overlaps neighbors. */
    .verse-analysis-inline .analysis-level-btn {
      position: relative;
    }
    .verse-analysis-inline .analysis-level-btn::before {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 50%;
    }
  }