/* FLOATING WHATSAPP — "Chat with us", fixed bottom-right on every scene.

   Built as a plain link to wa.me rather than a widget script: nothing to
   load, nothing gated on JS (DEF-03), and on a phone it opens the WhatsApp
   app directly with the first message already written.

   The green is WhatsApp's own (#25D366) and is used only on the circle that
   carries its glyph — the recognisable part. The words sit on a white pill
   in the deck's ink, because white text on that green is under 2:1 and
   would fail AA. Below 720px the pill drops to the circle alone: a 56px
   thumb target that doesn't cover content on a narrow screen. */

.chat {
  position: fixed; z-index: 400;           /* above scenes and the coverflow nav, below the header */
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(38px, 5svh, 52px);         /* clears the 24px scene-progress rail along the bottom edge */
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: var(--print); color: var(--ink);
  font-family: var(--body); font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 28px -10px rgb(4 16 15 / .45), 0 0 0 1px rgb(11 46 42 / .08);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chat__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: #25D366; color: #FFF;
}
.chat__icon svg { width: 24px; height: 24px; }

@media (hover: hover) and (pointer: fine) {
  .chat:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgb(4 16 15 / .5), 0 0 0 1px rgb(11 46 42 / .08); }
}
.chat:active { transform: translateY(0); }
.chat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 720px) {
  .chat { padding: 0; gap: 0; background: transparent; box-shadow: none; }
  .chat__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .chat__icon {
    width: 56px; height: 56px;
    box-shadow: 0 10px 24px -8px rgb(4 16 15 / .5);
  }
  .chat__icon svg { width: 30px; height: 30px; }
}

@media print { .chat { display: none; } }

/* The button floats over whatever is under it, which is fine mid-page — but
   at the very end of the page the last thing under it is the footer's legal
   links (desktop) and social icons (phone), and those have nowhere further
   to scroll to. Extra room under the footer's last row lets it clear the
   button. Kept here, not in camera.css, so removing the chat removes this. */
.foot__base { padding-bottom: clamp(104px, 13svh, 120px); }