/* The unfolded iPhone layout uses its canvas, rather than framing a phone-width
   website in the middle. The folded outer screen keeps the existing layout. */
@media (min-width: 600px) and (max-width: 899px) {
  .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .main-view {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
    padding-inline: clamp(26px, 4.5vw, 44px);
  }

  /* A cover remains hand-sized; another column is more useful than a larger
     three-column phone grid when the device opens. */
  .book-grid.shelf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 16px;
  }

  .bottom-nav { bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Reading is immersive on both displays. The text itself retains its
     comfortable measure while the page and controls reach the safe edges. */
  .reader {
    inset: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .reader-content { max-width: 660px; }
}

@media (min-width: 700px) and (max-width: 899px) {
  .book-grid.shelf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The phone dock is a quiet, icon-led glass control. Text stays only in the accessibility tree. */
@media (max-width: 899px) {
  .bottom-nav {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(calc(100% - 40px), 400px);
    height: 58px;
    padding: 5px;
    gap: 2px;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, .68);
    background: rgba(247, 249, 253, .56);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    box-shadow: 0 10px 26px rgba(28, 38, 52, .15),
      inset 0 1px 0 rgba(255, 255, 255, .82);
  }
  .bottom-nav::before {
    background: linear-gradient(175deg, rgba(255, 255, 255, .4), transparent 52%);
  }
  .bottom-nav .nav-item {
    display: grid;
    place-items: center;
    min-height: 46px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
  }
  .bottom-nav .nav-item svg { width: 22px; height: 22px; }
  .bottom-nav .nav-item span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .bottom-nav[data-liquid-glass="fallback"] {
    background: rgba(247, 249, 253, .58);
  }
  .bottom-nav[data-liquid-glass] .nav-item.active {
    background: rgba(255, 255, 255, .55);
  }

  /* The browser is a full-screen in-app view; its fixed canvas must not hide
     the persistent dock or put the page's last controls underneath it. */
  #app:has(.browser-workspace) > .bottom-nav,
  #app:has(.browser-workspace.is-browsing) > .bottom-nav {
    display: flex !important;
    z-index: 60;
  }
  #app:has(.browser-workspace) .browser-workspace:not(.is-browsing) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  #app:has(.browser-workspace) .browser-workspace.is-browsing {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
  #app:has(.browser-workspace) .browser-embed-hint {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .browser-workspace .browser-bar { overflow-x: clip; }

  html[data-theme="dark"] .bottom-nav,
  html[data-theme="dark"] .bottom-nav[data-liquid-glass="fallback"] {
    background: rgba(35, 38, 44, .60);
    border-color: rgba(227, 236, 251, .26);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32),
      inset 0 1px 0 rgba(255, 255, 255, .15);
  }
  html[data-theme="dark"] .bottom-nav::before {
    background: linear-gradient(175deg, rgba(255, 255, 255, .12), transparent 52%);
  }
  html[data-theme="dark"] .bottom-nav[data-liquid-glass] .nav-item.active {
    background: rgba(97, 139, 194, .18);
    box-shadow: inset 0 1px 0 rgba(225, 239, 255, .18);
  }
}

.source-review-book {
  margin: 0 0 8px;
  color: #263b53;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html[data-theme="dark"] .source-review-book { color: #e8f1fc; }

@media (max-width: 899px) and (prefers-reduced-transparency: reduce) {
  .bottom-nav,
  .bottom-nav[data-liquid-glass="fallback"] {
    background: #f4f6f9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme="dark"] .bottom-nav,
  html[data-theme="dark"] .bottom-nav[data-liquid-glass="fallback"] { background: #24272d; }
}

/* 导航拖动时让选中态跟随手指，松开后才提交页面；尊重已有玻璃主题。 */
@media (max-width: 899px) {
  .bottom-nav.is-scrubbing .nav-item.active:not(.scrub-target),
  html[data-theme="dark"] .bottom-nav.is-scrubbing .nav-item.active:not(.scrub-target) {
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
  .bottom-nav.is-scrubbing .nav-item.scrub-target,
  .bottom-nav.is-scrubbing[data-liquid-glass] .nav-item.scrub-target {
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 2px 7px rgba(28, 38, 52, .10);
    color: #1760a9;
    transform: scale(1.035);
  }
  html[data-theme="dark"] .bottom-nav.is-scrubbing .nav-item.scrub-target,
  html[data-theme="dark"] .bottom-nav.is-scrubbing[data-liquid-glass] .nav-item.scrub-target {
    background: rgba(97, 139, 194, .30);
    box-shadow: inset 0 1px 0 rgba(225, 239, 255, .23);
    color: #d1e8ff;
  }
}