.app-page {
  min-height: 100vh;
  min-height: 100svh;
}

:root {
  --wa-size: 3.5rem;
  --wa-left: max(clamp(.75rem, 1.4vw, 1.5rem), env(safe-area-inset-left, 0px));
}

.app-nav {
  position: fixed;
  left: var(--wa-left);
  bottom: max(clamp(1rem, 2.3vh, 1.75rem), env(safe-area-inset-bottom, 0px));
  z-index: 12;
  width: var(--wa-size);
}

.app-nav-book {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--wa-size);
  height: var(--wa-size);
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2b68a6, var(--blue) 65%, #194778);
  box-shadow: 0 3px 12px #12365335, 0 1px 3px #12365324;
  cursor: pointer;
}
.wa-glyph { display: grid; place-items: center; position: relative; width: 1.75rem; height: 1.75rem; }
.wa-glyph svg { display: block; width: 100%; height: 100%; }
.app-nav-item { display: none; }
.app-book-label {
  position: absolute;
  left: calc(100% + .65rem);
  padding: .48rem .8rem;
  border-radius: .55rem;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 8px #142f4b20;
  font: 500 .85rem/1.3 var(--sans);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.app-nav-book:is(:hover, :focus-visible) .app-book-label { opacity: 1; }
.app-nav :focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px var(--ink); }
body:has(#conversa[open]) .app-nav { opacity: 0; pointer-events: none; }

@media (min-width: 741px) {
  .foot-main, .foot-visit, .foot-base {
    padding-inline-start: max(0px, calc(var(--wa-left) + var(--wa-size) + .65rem - var(--gutter)));
  }
}

@media (max-width: 740px) {
  :root { --app-nav-space: calc(4.375rem + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--app-nav-space) + .5rem); }
  body { padding-bottom: var(--app-nav-space); }
  .app-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: .2rem;
    inset: auto 0 0;
    min-height: var(--app-nav-space);
    width: auto;
    padding: .375rem max(.45rem, env(safe-area-inset-right)) calc(.375rem + env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 -3px 18px #16394e12;
  }
  .app-nav-item, .app-nav-book {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    width: 100%;
    height: auto;
    min-height: 3.35rem;
    padding: .25rem .125rem;
    border: 0;
    border-radius: .55rem;
    font: 550 .78rem/1.15 var(--sans);
    text-align: center;
    box-shadow: none;
  }
  .app-nav-item { color: var(--ink); }
  .app-nav-item:hover { background: var(--ice); }
  .app-nav-book { background: var(--blue); }
  .app-nav-book:hover { background: var(--ink); }
  .app-book-label { position: static; padding: 0; background: none; box-shadow: none; color: inherit; font: inherit; opacity: 1; white-space: normal; }
  .app-nav .icon, .wa-glyph { width: 1.25rem; height: 1.25rem; }
  body:has(.menu-toggle[aria-expanded="true"]) .app-nav { visibility: hidden; }
}

@keyframes wa-halo {
  0% { transform: scale(.95); opacity: 0; }
  15% { opacity: .52; }
  58%, 100% { transform: scale(1.38); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .app-book-label { transition: opacity .16s ease-out; }
  .app-nav-book::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1.5px solid var(--blue);
    border-radius: 50%;
    pointer-events: none;
    animation: wa-halo 3.2s ease-out infinite;
  }
  .app-nav-book:is(:hover, :focus-visible)::before { animation: none; opacity: 0; }
  @media (max-width: 740px) {
    .app-nav-book::before { display: none; animation: none; }
    .wa-glyph::after {
      content: ""; position: absolute; inset: -1px;
      border-radius: 50%; border: 1px solid #fff; pointer-events: none;
      animation: wa-halo 3.2s ease-out infinite;
    }
  }
}
@media print {
  .app-nav { display: none; }
  body { padding-bottom: 0; }
}