.book-bottom-navigation {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: .2rem;
  padding: .55rem max(1rem, env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
  border-top: 1px solid rgb(148 163 184 / 35%);
  background: #fff;
  box-shadow: 0 -8px 24px rgb(15 23 42 / 8%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.book-bottom-navigation__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 3.4rem;
  padding: .3rem .2rem;
  border-radius: .7rem;
  color: #6b7280;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  pointer-events: auto;
}

.book-bottom-navigation__more {
  min-width: 0;
  pointer-events: auto;
}

.book-bottom-navigation__more > button {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.book-bottom-navigation__more-icon {
  letter-spacing: .12em;
  transform: translateY(-.08rem);
}

.book-bottom-navigation__menu {
  max-height: min(75dvh, 36rem);
  overflow-y: auto;
  color: #374151;
}

.book-more-menu__section + .book-more-menu__section {
  margin-top: .35rem;
  border-top: 1px solid #e5e7eb;
  padding-top: .35rem;
}

.book-more-menu__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.5rem;
  padding: .55rem .85rem;
  border: 0;
  background: transparent;
  color: #374151;
  font-size: .875rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}

.book-more-menu__link:hover,
.book-more-menu__link:focus-visible {
  background: #f9fafb;
  color: #111827;
}

.book-more-menu__form {
  margin: 0;
}

.book-more-menu__section .theme-mode-form {
  margin: 0;
}

.book-more-menu__section .theme-mode-toggle {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .85rem;
  border: 0;
  background: transparent;
  color: #374151;
  font-size: .875rem;
  text-align: left;
}

.book-more-menu__section .theme-mode-toggle:hover,
.book-more-menu__section .theme-mode-toggle:focus-visible {
  background: #f9fafb;
  color: #111827;
}

.book-bottom-navigation__item:hover,
.book-bottom-navigation__item:focus-visible,
.book-bottom-navigation__item.is-active {
  background: #fff;
  color: #8f4937;
}

.book-bottom-navigation__icon {
  font-size: 1.35rem;
  line-height: 1;
}

@media (min-width: 1024px) {
  .book-bottom-navigation {
    right: clamp(24rem, 30vw, 36rem);
  }
}

.site-ai-v2-composer-action__label {
  display: none;
}

/* Keep short conversations close to the composer without making the oldest
   message unreachable once the history becomes taller than the scroll rail.
   Flex auto margins resolve to zero when the contents overflow. */
.site-ai-v2-messages > :first-child {
  margin-top: auto;
}

@media (max-width: 640px) {
  .book-bottom-navigation {
    gap: .05rem;
    padding-right: max(.25rem, env(safe-area-inset-right));
    padding-left: max(.25rem, env(safe-area-inset-left));
  }

  .book-bottom-navigation__item {
    gap: .1rem;
    min-height: 3.1rem;
    padding-right: .05rem;
    padding-left: .05rem;
    font-size: .62rem;
  }

  .book-bottom-navigation__icon {
    font-size: 1.15rem;
  }
}

/* New book-navigation contract. This is intentionally separate from the
   legacy book-bottom-navigation selectors so old templates cannot style or
   reintroduce the active menu. */
.sl-book-navigation {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: .2rem;
  padding: .55rem max(1rem, env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
  border-top: 1px solid rgb(148 163 184 / 35%);
  background: #fff;
  box-shadow: 0 -8px 24px rgb(15 23 42 / 8%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.sl-book-navigation__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 3.4rem;
  padding: .3rem .2rem;
  border-radius: .7rem;
  color: #6b7280;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  pointer-events: auto;
}

.sl-book-navigation__item:hover,
.sl-book-navigation__item:focus-visible,
.sl-book-navigation__item.is-active {
  background: #fff;
  color: #8f4937;
}

.sl-book-navigation__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.sl-book-navigation__sticker {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
}

.sl-book-navigation__more {
  min-width: 0;
  pointer-events: auto;
}

.sl-book-navigation__more > button {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sl-book-navigation__more-icon {
  letter-spacing: .12em;
  transform: translateY(-.08rem);
}

/* Active desktop reader layout. The book and Sofia panes are normal-flow
   grid children; only their content regions scroll. */
.book-layout--reader {
  min-width: 0;
}

.book-layout--reader .book-pane,
.book-layout--reader .book-main,
.book-layout--reader .book-content-scroll {
  min-width: 0;
  min-height: 0;
}

.book-layout--reader .book-pane {
  display: flex;
  flex-direction: column;
}

.book-layout--reader .book-main {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.book-layout--reader .book-content-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}

.book-layout--reader > #site-ai-chat-panel {
  min-width: 0;
  min-height: 0;
}

@media (min-width: 1024px) {
  .book-layout--reader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(24rem, 30vw, 36rem);
    height: 100dvh;
    overflow: hidden;
  }

  .book-layout--reader .book-pane {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .book-layout--reader > #site-ai-chat-panel {
    display: flex;
    height: 100%;
    overflow: hidden;
  }
}

@media (max-width: 1023px) {
  .book-layout--reader .book-content-scroll {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}

.sl-book-navigation__menu {
  max-height: min(75dvh, 36rem);
  overflow-y: auto;
  color: #374151;
}

.sl-more-menu__section + .sl-more-menu__section {
  margin-top: .35rem;
  border-top: 1px solid #e5e7eb;
  padding-top: .35rem;
}

.sl-more-menu__link {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .85rem;
  border: 0;
  background: transparent;
  color: #374151;
  font-size: .875rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}

.sl-more-menu__link:hover,
.sl-more-menu__link:focus-visible,
.sl-more-menu__section .theme-mode-toggle:hover,
.sl-more-menu__section .theme-mode-toggle:focus-visible {
  background: #f9fafb;
  color: #111827;
}

.sl-more-menu__form,
.sl-more-menu__section .theme-mode-form {
  margin: 0;
}

.sl-more-menu__section .theme-mode-toggle {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .85rem;
  border: 0;
  background: transparent;
  color: #374151;
  font-size: .875rem;
  text-align: left;
}

.sl-narrative-menu-dialog {
  position: fixed;
  inset: 0 clamp(24rem, 30vw, 36rem) calc(5.5rem + env(safe-area-inset-bottom)) 0;
  display: none;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(255 255 255 / 38%);
  color: var(--app-ink, #172033);
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px) brightness(1.1);
  backdrop-filter: blur(12px) brightness(1.1);
}

.sl-narrative-menu-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sl-narrative-menu-dialog::backdrop {
  background: transparent;
}

body:has(.sl-narrative-menu-dialog[open]) .book-content-scroll {
  background: #fff;
  filter: blur(13px) saturate(.62) opacity(.38);
}

.sl-narrative-menu-dialog__panel {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: none;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sl-narrative-menu-dialog__header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .75rem .65rem;
}

.sl-narrative-menu-dialog__eyebrow,
.sl-narrative-menu-section__eyebrow {
  margin: 0;
  color: var(--app-muted, #6b7280);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sl-narrative-menu-dialog__header h2,
.sl-narrative-menu-section__heading h3 {
  margin: .2rem 0 0;
  color: var(--app-ink, #172033);
  font-size: 1.25rem;
  font-weight: 800;
}

.sl-narrative-menu-dialog__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-muted, #6b7280);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.sl-narrative-menu-dialog__close:hover,
.sl-narrative-menu-dialog__close:focus-visible {
  background: var(--app-hover, #f3f4f6);
  color: var(--app-ink, #172033);
}

.sl-narrative-menu-dialog__content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: .65rem .5rem 0;
  overscroll-behavior: contain;
}

.sl-narrative-menu-section + .sl-narrative-menu-section {
  margin-top: .7rem;
  padding-top: .1rem;
}

.sl-narrative-menu-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .35rem;
  padding: 0 .15rem;
}

.sl-narrative-menu-subheading {
  margin: .55rem .15rem .2rem;
  color: var(--app-muted, #6b7280);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sl-narrative-menu-grid {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-narrative-menu-grid--elements {
  --narrative-grid-gap: clamp(.35rem, .7cqw, .75rem);
  --narrative-grid-unit: calc((100% - (35 * var(--narrative-grid-gap))) / 36);
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  grid-template-rows: repeat(var(--narrative-row-count, 1), var(--narrative-grid-unit));
  grid-auto-rows: var(--narrative-grid-unit);
  grid-auto-flow: dense;
  gap: var(--narrative-grid-gap);
  align-content: end;
  min-height: 100%;
  contain: paint;
}

.sl-narrative-menu-grid__item {
  min-width: 0;
  min-height: 0;
}

.sl-narrative-menu-grid__item--main,
.sl-narrative-menu-card--main {
  grid-column: span 9;
  grid-row: span 9;
}

.sl-narrative-menu-grid__item--major,
.sl-narrative-menu-card--major {
  grid-column: span 6;
  grid-row: span 6;
}

.sl-narrative-menu-grid__item--minor,
.sl-narrative-menu-card--minor {
  grid-column: span 4;
  grid-row: span 4;
}

.sl-narrative-menu-card {
  box-sizing: border-box;
  border: 1px solid #6b7280;
  box-shadow: 0 2px 7px rgb(15 23 42 / 12%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  border-radius: .7rem;
  color: var(--app-ink, #172033);
  text-decoration: none;
  transform-origin: center;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.sl-narrative-menu-card:hover,
.sl-narrative-menu-card:focus-visible {
  z-index: 2;
  filter: brightness(.99);
  box-shadow: 0 7px 16px rgb(15 23 42 / 22%);
  transform: scale(1.035);
}

.sl-narrative-menu-card--minor { --narrative-chip-scale: .666667; }
.sl-narrative-menu-card--major { --narrative-chip-scale: 1; }
.sl-narrative-menu-card--main { --narrative-chip-scale: 1.5; }

.sl-narrative-menu-card__media {
  position: relative;
  display: block;
  width: calc(100% - clamp(.7rem, 2cqw, 2rem));
  height: calc(100% - clamp(1.8rem, 5cqw, 4rem));
  margin: clamp(.35rem, 1cqw, 1rem) auto 0;
  overflow: hidden;
  border: 2px solid #4b5563;
  border-radius: .65rem;
  background: var(--app-raised, #f3f4f6);
}

.sl-narrative-menu-card__image,
.sl-narrative-menu-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: center;
}

.sl-narrative-menu-card--chapter {
  min-height: 6.4rem;
}

.sl-narrative-menu-card__placeholder {
  display: grid;
  place-items: center;
  color: var(--app-muted, #6b7280);
  font-size: 1.2rem;
  font-weight: 800;
}

.sl-narrative-menu-card__title {
  display: -webkit-box;
  flex: 0 0 auto;
  align-self: center;
  min-width: 0;
  width: calc(100% - clamp(.7rem, 2cqw, 2rem));
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: #000;
  --narrative-chip-font-min: .65rem;
  --narrative-chip-font-fluid: 1.45cqw;
  --narrative-chip-font-max: 1.35rem;
  font-size: clamp(
    calc(var(--narrative-chip-font-min) * var(--narrative-chip-scale, 1)),
    calc(var(--narrative-chip-font-fluid) * var(--narrative-chip-scale, 1)),
    calc(var(--narrative-chip-font-max) * var(--narrative-chip-scale, 1))
  );
  font-weight: 750;
  line-height: 1.05;
  padding: clamp(.25rem, 1cqw, .7rem) clamp(.2rem, .8cqw, .6rem) clamp(.35rem, 1.2cqw, .9rem);
  text-align: center;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sl-narrative-menu-card__title--long {
  --narrative-chip-font-min: .45rem;
  --narrative-chip-font-fluid: .8cqw;
  --narrative-chip-font-max: .82rem;
}

.sl-narrative-menu-card__title--very-long {
  --narrative-chip-font-min: .4rem;
  --narrative-chip-font-fluid: .65cqw;
  --narrative-chip-font-max: .72rem;
}

.sl-narrative-menu-grid--elements .sl-narrative-menu-card:focus-visible {
  outline: 3px solid var(--app-link, #4f46e5);
  outline-offset: 3px;
}

.sl-narrative-menu-card--paragraph {
  align-items: flex-start;
  min-height: 3rem;
  justify-content: center;
  padding: .7rem .8rem;
  border: 1px solid var(--app-border, rgb(148 163 184 / 35%));
  text-align: left;
}

.sl-narrative-menu-grid--paragraphs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-narrative-menu-empty,
.sl-narrative-menu-dialog__empty {
  margin: .6rem .15rem;
  color: var(--app-muted, #6b7280);
  font-size: .85rem;
}

.sl-narrative-menu-gate {
  margin: .5rem 0;
  padding: 1rem;
  border: 1px dashed var(--app-border, rgb(148 163 184 / 45%));
  border-radius: .75rem;
  color: var(--app-muted, #6b7280);
  font-size: .85rem;
}

.sl-narrative-menu-gate a {
  display: inline-block;
  margin-top: .5rem;
  color: #4f46e5;
  font-weight: 750;
}

.sl-narrative-menu-actions {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--app-border, rgb(148 163 184 / 35%));
}

.sl-narrative-menu-actions label {
  display: block;
  color: var(--app-muted, #6b7280);
  font-size: .72rem;
  font-weight: 750;
}

.sl-narrative-menu-create-row {
  display: flex;
  gap: .4rem;
  margin-top: .35rem;
}

.sl-narrative-menu-create-row input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--app-border, #d1d5db);
  border-radius: .5rem;
  background: var(--app-surface, #fff);
  padding: .5rem .6rem;
}

.sl-narrative-menu-create-row button {
  border: 0;
  border-radius: .5rem;
  background: #4f46e5;
  color: white;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
  padding: .45rem .75rem;
}

.sl-narrative-menu-status {
  margin: .35rem .15rem 0;
  color: var(--app-muted, #6b7280);
  font-size: .75rem;
}

.sl-book-navigation__noscript-links { display: none; }

.sl-paragraph-reader__eyebrow {
  color: #4f46e5;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sl-paragraph-reader__title {
  margin-top: .5rem;
  color: var(--app-ink, #172033);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
}

.sl-paragraph-reader__topic {
  margin-top: 1rem;
  color: var(--app-muted, #4b5563);
  font-size: 1.1rem;
  line-height: 1.7;
}

.sl-paragraph-reader__variants { display: grid; gap: 1rem; margin-top: 2rem; }
.sl-paragraph-reader__card,
.sl-paragraph-reader__empty {
  border: 1px solid var(--app-border, rgb(148 163 184 / 35%));
  border-radius: 1rem;
  background: var(--app-surface, #fff);
  padding: 1.2rem;
}

.sl-paragraph-reader__card-label {
  color: #4f46e5;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sl-paragraph-reader__body {
  margin-top: .7rem;
  white-space: pre-line;
  color: var(--app-ink, #172033);
  font-size: 1rem;
  line-height: 1.8;
}

.sl-paragraph-reader__empty { margin-top: 2rem; color: var(--app-muted, #6b7280); }

@media (max-width: 1023px) {
  .sl-narrative-menu-dialog { display: none !important; }
}

/* Keep Sofia visibly active while she is thinking/typing or speaking. */
#site-ai-chat-panel:has(#sofia-v2-messages .sofia-typing-bubble, #sofia-v2-messages [data-sofia-audio-state="playing"]) .site-ai-v2-avatar-button {
  filter: drop-shadow(0 0 5px rgb(29 78 216 / .78)) drop-shadow(0 0 11px rgb(30 64 175 / .62));
  animation: sofia-avatar-activity-glow 1.8s ease-in-out infinite alternate;
}
@keyframes sofia-avatar-activity-glow {
  from { filter: drop-shadow(0 0 4px rgb(29 78 216 / .72)) drop-shadow(0 0 8px rgb(30 64 175 / .54)); }
  to { filter: drop-shadow(0 0 7px rgb(37 99 235 / .9)) drop-shadow(0 0 14px rgb(30 64 175 / .72)); }
}
@media (prefers-reduced-motion: reduce) {
  #site-ai-chat-panel:has(#sofia-v2-messages .sofia-typing-bubble, #sofia-v2-messages [data-sofia-audio-state="playing"]) .site-ai-v2-avatar-button {
    animation: none;
    filter: drop-shadow(0 0 6px rgb(29 78 216 / .82)) drop-shadow(0 0 12px rgb(30 64 175 / .64));
  }
}

@media (max-width: 720px) {
  .sl-narrative-menu-grid,
  .sl-narrative-menu-grid--paragraphs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (prefers-reduced-motion: reduce) {
  .sl-narrative-menu-card {
    transition: none;
  }

  .sl-narrative-menu-card:hover,
  .sl-narrative-menu-card:focus-visible {
    transform: none;
  }
}

@media (min-width: 1024px) {
  .sl-book-navigation {
    right: clamp(24rem, 30vw, 36rem);
  }

  .site-ai-v2-composer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: center;
    gap: 1rem;
    transform: translateY(.5rem);
  }

  .site-ai-v2-avatar-wrap,
  .site-ai-v2-avatar-button {
    width: 100% !important;
    height: 7rem !important;
  }

  .site-ai-v2-avatar-wrap {
    align-self: center;
    align-items: center;
    justify-content: center;
    transform: translateY(-.25rem);
  }

  .site-ai-v2-input-wrap {
    display: block;
    align-self: stretch;
    height: 6rem;
    min-height: 0;
  }

  .site-ai-v2-message-input {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
    overflow-y: auto;
    padding: .6rem .75rem 2.5rem !important;
  }

  .site-ai-v2-input-controls {
    position: absolute !important;
    right: .75rem;
    bottom: .5rem;
    width: auto;
    margin-top: 0;
    justify-content: flex-end;
  }

  .site-ai-v2-composer-action {
    width: 2rem !important;
    min-width: 2rem;
    height: 2rem !important;
    border-radius: 9999px !important;
    padding: .25rem !important;
    gap: 0;
  }

  .site-ai-v2-composer-action svg {
    width: 1rem;
    height: 1rem;
  }

  .site-ai-v2-composer-action[data-sofia-enable-audio] {
    width: auto !important;
    min-width: 0;
    border-radius: .55rem !important;
    padding: .15rem .5rem !important;
  }

  .site-ai-v2-composer-action[data-sofia-enable-audio] .site-ai-v2-composer-action__label {
    display: inline;
  }
}

@media (max-width: 640px) {
  .sl-book-navigation {
    gap: .05rem;
    padding-right: max(.25rem, env(safe-area-inset-right));
    padding-left: max(.25rem, env(safe-area-inset-left));
  }

  .sl-book-navigation__item {
    gap: .1rem;
    min-height: 3.1rem;
    padding-right: .05rem;
    padding-left: .05rem;
    font-size: .62rem;
  }

  .sl-book-navigation__icon {
    font-size: 1.15rem;
  }

  .sl-book-navigation__sticker {
    width: 1.45rem;
    height: 1.45rem;
  }
}