/* Keep chrome at a fixed 1x scale; scripture text size is controlled in JS. */
html, body, #root, .app-shell {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

html.lw-mobile-reader {
  touch-action: manipulation;
}

:root {
  --lw-sticky-heading-top: 0px;
}

@media (max-width: 820px) {
  html:not([data-hide-subtoolbar="true"]) {
    --lw-sticky-heading-top: 42px;
  }
  html[data-hide-subtoolbar="true"] {
    --lw-sticky-heading-top: 0px;
  }

  .main-scroll,
  .main-scroll.view-reader {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .reader-page,
  .reader-frame {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100% !important;
  }

  /* Unbox toolbar on mobile so child sections stick and scroll independently within .reader-page */
  .app-shell:not(.presentation-mode) .reader-toolbar {
    display: contents !important;
  }

  /* Passage selectors scroll out naturally when reading */
  .app-shell:not(.presentation-mode) .passage-selectors {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(95px, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    align-items: center !important;
    background: var(--surface, #1e293b) !important;
    padding: 8px 12px 6px !important;
    box-sizing: border-box !important;
  }

  /* Tools button row stays fixed at the top when visible */
  .app-shell:not(.presentation-mode) .reader-tools {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--surface, #1e293b) !important;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
    box-sizing: border-box !important;
    padding: 3px 12px 2px !important;
    scrollbar-width: none !important;
  }

  .app-shell:not(.presentation-mode) .reader-tools::-webkit-scrollbar {
    display: none !important;
  }

  /* Chapter heading section remains fixed and compact on mobile */
  html .app-shell:not(.presentation-mode) .chapter-heading,
  .app-shell:not(.presentation-mode) .chapter-heading {
    position: sticky !important;
    top: var(--lw-sticky-heading-top, 0px) !important;
    z-index: 30 !important;
    background: var(--surface, #1e293b) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-row,
  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-columns,
  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-copy {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .app-shell:not(.presentation-mode) .reader-page > .chapter-heading::before,
  .app-shell:not(.presentation-mode) .chapter-heading::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    background: none !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-identity {
    display: none !important;
  }

  /* Single-line book name & chapter number on the left */
  .app-shell:not(.presentation-mode) .chapter-heading h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(16px, 4.2vw, 19px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
    cursor: pointer !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-footer > p {
    display: none !important;
  }

  /* Navigation cluster on the right: Prev, Next, Bookmark, Search */
  .app-shell:not(.presentation-mode) .reader-heading-navigation {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* Remove squished chapter-contents-trigger bubble */
  .app-shell:not(.presentation-mode) .reader-heading-navigation .chapter-contents-trigger,
  .app-shell:not(.presentation-mode) .chapter-heading .chapter-contents-trigger {
    display: none !important;
    content: none !important;
  }

  .app-shell:not(.presentation-mode) .reader-heading-navigation > button {
    min-width: auto !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 2px 7px !important;
    font-size: 13px !important;
    gap: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  .app-shell:not(.presentation-mode) .reader-heading-navigation > .icon-button {
    min-width: 30px !important;
    min-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  @media (max-width: 380px) {
    .app-shell:not(.presentation-mode) .reader-heading-navigation > button span {
      display: none !important;
    }
    .app-shell:not(.presentation-mode) .reader-heading-navigation > button {
      padding: 2px 5px !important;
    }
  }

  .appearance-settings-controls {
    width: 100% !important;
    max-width: 100% !important;
  }

  .appearance-mode-options button {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .appearance-scheme-option {
    min-height: 52px !important;
  }

  .topbar {
    gap: 6px !important;
    padding: 0 8px !important;
  }

  .quick-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
  }

  .quick-search input {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
  }
}

html.lw-mobile-reader .topbar,
html.lw-mobile-reader .reader-toolbar,
html.lw-mobile-reader .left-sidebar,
html.lw-mobile-reader .right-panel,
html.lw-mobile-reader .profile-switcher,
html.lw-mobile-reader .mobile-menu-button,
html.lw-mobile-reader .primary-nav,
html.lw-mobile-reader .app-text-zoom,
html.lw-mobile-reader .passage-selectors,
html.lw-mobile-reader .reader-tools {
  touch-action: manipulation;
}

html.lw-mobile-reader .main-scroll.view-reader {
  touch-action: pan-y;
}

.lw-chapter-carousel {
  display: none !important;
}

.appearance-settings-controls,
.appearance-scheme-options,
.appearance-mode-options,
.appearance-scheme-option,
.appearance-mode-options button,
.reader-font-options,
.reader-font-options button {
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

.lw-reader-font-hud {
  position: fixed;
  z-index: 100010;
  top: calc(88px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 13px/1.2 system-ui, -apple-system, sans-serif;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.lw-reader-font-hud[data-visible="1"] {
  opacity: 1;
}

/* Updated brand-mark styling for scripture book logo */
.brand-mark,
.app-shell .brand-mark {
  background: #2b2b2b !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.loading-brand-mark {
  border-radius: 12px !important;
  background: #2b2b2b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.welcome-introduction > img {
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.main-scroll.view-reader .verses:empty::after {
  content: "Loading chapter...";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--text-muted, #8b949e);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
}