/* Fonts: Archivo (titles), Saira (messages), Source Code Pro (typing box) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,900&family=Saira:wdth,wght@100,400..700&family=Source+Code+Pro:wght@400;500&display=swap");

/* =========================================
   NOVABOT CHAT WIDGET
   Loaded on the live site from the Worker (see the
   Squarespace snippet in README-SQUARESPACE.md).
   Everything is tied to the nv- IDs, so it
   won't clash with the site's own styles.
   ========================================= */

/* Keep Squarespace's own styles from leaking into the widget */
#nv-chat-toggle,
#nv-chat-teaser,
#nv-chat-teaser *,
#nv-chat-panel,
#nv-chat-panel * {
  box-sizing: border-box;
}
#nv-chat-panel {
  letter-spacing: normal;
  line-height: 1.4;
}

/* ----- The bubble button (a ring, like the logo) ----- */
#nv-chat-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(229, 194, 224, 0.7);
  background: linear-gradient(120deg, #9c1757 0%, #5e1b82 55%, #25194d 100%);
  color: rgb(229, 194, 224);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 6px rgba(158, 92, 200, 0.18),
    0 0 28px rgba(158, 92, 200, 0.45),
    0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, filter 0.15s ease;
}
#nv-chat-toggle:hover {
  transform: scale(1.16);
  filter: brightness(1.15);
}
#nv-chat-toggle svg {
  width: 26px;
  height: 26px;
}
/* A slow breathing glow, so the button feels alive */
#nv-chat-toggle {
  animation: nv-breathe 3.6s ease-in-out infinite;
}
@keyframes nv-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(158, 92, 200, 0.18),
      0 0 28px rgba(158, 92, 200, 0.45),
      0 10px 30px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(158, 92, 200, 0.24),
      0 0 40px rgba(176, 29, 104, 0.6),
      0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

/* Waveform bars inside the chat bubble icon, swaying gently */
#nv-chat-toggle .nv-wave rect {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.35);
  animation: nv-sway 1.8s ease-in-out infinite;
}
#nv-chat-toggle .nv-wave rect:nth-child(2) { animation-delay: -0.3s; }
#nv-chat-toggle .nv-wave rect:nth-child(3) { animation-delay: -0.6s; }
#nv-chat-toggle .nv-wave rect:nth-child(4) { animation-delay: -0.9s; }
#nv-chat-toggle .nv-wave rect:nth-child(5) { animation-delay: -1.2s; }
@keyframes nv-sway {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(0.7); }
}

/* Music, video or NovaBot's voice playing (sound we can't follow):
   a busier beat */
#nv-chat-toggle.nv-playing {
  animation-duration: 1s;
}
#nv-chat-toggle.nv-playing .nv-wave rect {
  animation: nv-beat 0.6s ease-in-out infinite alternate;
}
#nv-chat-toggle.nv-playing .nv-wave rect:nth-child(2) { animation-duration: 0.45s; animation-delay: -0.2s; }
#nv-chat-toggle.nv-playing .nv-wave rect:nth-child(3) { animation-duration: 0.7s; animation-delay: -0.5s; }
#nv-chat-toggle.nv-playing .nv-wave rect:nth-child(4) { animation-duration: 0.5s; animation-delay: -0.1s; }
#nv-chat-toggle.nv-playing .nv-wave rect:nth-child(5) { animation-duration: 0.65s; animation-delay: -0.35s; }
@keyframes nv-beat {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* Following the page's actual sound (set from novabot.js) */
#nv-chat-toggle.nv-live {
  animation: none;
  box-shadow:
    0 0 0 calc(6px + var(--nv-level, 0) * 8px) rgba(158, 92, 200, 0.22),
    0 0 calc(28px + var(--nv-level, 0) * 50px) rgba(176, 29, 104, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.5);
}
#nv-chat-toggle.nv-live .nv-wave rect {
  animation: none;
  transform: scaleY(var(--nv-bar, 0.3));
}

/* While the speech bubble is up, or a reply arrives while the chat is
   tucked away, the button pulses a ring outwards */
#nv-chat-toggle.nv-attention,
#nv-chat-toggle.nv-unread {
  animation: nv-ping 2s ease-out 0.6s infinite;
}
@keyframes nv-ping {
  0% {
    box-shadow:
      0 0 0 6px rgba(158, 92, 200, 0.18),
      0 0 0 6px rgba(208, 42, 125, 0.6),
      0 0 28px rgba(158, 92, 200, 0.45),
      0 10px 30px rgba(0, 0, 0, 0.5);
  }
  70%, 100% {
    box-shadow:
      0 0 0 6px rgba(158, 92, 200, 0.18),
      0 0 0 22px rgba(208, 42, 125, 0),
      0 0 28px rgba(158, 92, 200, 0.45),
      0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

/* ----- Speech bubble over the button ("I can help with...") ----- */
#nv-chat-teaser {
  position: fixed;
  right: 24px;
  bottom: 104px;
  z-index: 9999;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  transform-origin: calc(100% - 32px) 100%;
  animation:
    nv-teaser-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    nv-float 4s ease-in-out 0.5s infinite;
}
#nv-chat-teaser[hidden] {
  display: none;
}
@keyframes nv-teaser-in {
  from { opacity: 0; transform: translateY(16px) scale(0.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nv-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.nv-teaser-open {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 40px 14px 18px;
  border: 1px solid rgba(229, 194, 224, 0.35);
  border-radius: 22px 22px 6px 22px;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(74, 26, 120, 0.55) 0%, transparent 70%),
    #150d1f;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(158, 92, 200, 0.35);
  color: rgb(229, 194, 224);
  font-family: saira, "Futura", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  text-shadow: 0 0 6px rgb(155, 20, 222);
  cursor: pointer;
}
/* The little tail pointing down at the button */
.nv-teaser-open::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #1d1230;
  border-right: 1px solid rgba(229, 194, 224, 0.35);
  border-bottom: 1px solid rgba(229, 194, 224, 0.35);
  transform: rotate(45deg);
}
.nv-teaser-open:hover {
  border-color: rgba(255, 95, 168, 0.7);
}
.nv-teaser-name {
  display: block;
  margin-bottom: 2px;
  font-family: "Archivo", "Futura", Arial, sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5fa8;
  text-shadow: none;
}
.nv-teaser-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(229, 194, 224, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.nv-teaser-close:hover {
  color: #fff;
}

/* ----- The chat window ----- */
#nv-chat-panel {
  display: flex;
  position: fixed;
  right: 24px;
  bottom: 104px;
  z-index: 9999;
  width: 440px;
  height: 720px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  border-radius: 56px 56px 74px 56px;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(74, 26, 120, 0.55) 0%, transparent 60%),
    #150d1f;

  box-shadow: 0 20px 60px rgba(113, 4, 57, 0.6);
  filter: drop-shadow(0px 0px 90px rgba(158, 92, 200, 0.3));
  font-family: "Source Code Pro", "Futura", Arial, sans-serif;
  transform-origin: calc(100% - 32px) 100%; /* grows out of the chat button */
  animation:
    nv-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    nv-glow 18s ease-in-out 0.2s infinite,
    nv-text-glow 6s ease-in-out infinite;
  color: #fff;
  /* A soft glow on all the chat's text (also the still version for reduced motion) */
  text-shadow: 0 0 6px rgba(155, 20, 222, 0.75);
}
/* The text glow drifts slowly between the logo purple and pink */
@keyframes nv-text-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(155, 20, 222, 0.75); }
  50%      { text-shadow: 0 0 9px rgba(208, 42, 125, 0.7), 0 0 2px rgba(255, 95, 168, 0.45); }
}
#nv-chat-panel.nv-closed,
#nv-chat-panel.nv-waiting {
  display: none;
}
/* Slightly see-through so the page shows behind it, until the mouse is
   over it or someone is typing in it */
#nv-chat-panel {
  opacity: 0.85;
}
#nv-chat-panel:hover,
#nv-chat-panel:focus-within {
  opacity: 1;
}
/* Moving out of the way of the page: it glides to the other side of the
   screen (--nv-shift, set by novabot.js), or shrinks down to its header bar */
#nv-chat-panel {
  transform: translateX(var(--nv-shift, 0px));
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;
}
#nv-chat-panel.nv-small {
  height: var(--nv-small-height, 96px);
  cursor: pointer;
}
/* Only the header bar shows while it's small */
#nv-chat-panel.nv-small > :not(.nv-header) {
  visibility: hidden;
}
/* The header bar says how to open it up again */
#nv-chat-panel.nv-small .nv-subtitle {
  font-size: 0;
}
#nv-chat-panel.nv-small .nv-subtitle::after {
  content: "Hover or tap to open";
  font-size: 13px;
  animation: nv-hint 2.4s ease-in-out infinite;
}
@keyframes nv-hint {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
/* Opening: it rises a little into place and comes into focus, without
   travelling across the screen */
@keyframes nv-rise {
  from { opacity: 0; transform: translateX(var(--nv-shift, 0px)) translateY(18px) scale(0.96); filter: blur(3px); }
  to   { transform: translateX(var(--nv-shift, 0px)); }
}

/* Phones and tablets (a finger, no mouse): solid (nothing to hover over to
   bring it into focus), and it stays in its place */
@media (hover: none) and (pointer: coarse) {
  #nv-chat-panel {
    opacity: 1;
  }
}

/* The on-screen keyboard is up (novabot.js fitToScreen): on bigger screens the
   chat sits just above it, never under it */
#nv-chat-panel.nv-keyboard {
  bottom: calc(var(--nv-keyboard, 0px) + 12px);
  max-height: calc(var(--nv-view-height, 100dvh) - 24px);
}
/* Slow, uneven breathing glow that drifts between
   the logo purple and pink */
@keyframes nv-glow {
  0%, 100% { filter: drop-shadow(0 0 115px rgba(158, 92, 200, 0.5)); }
  18%      { filter: drop-shadow(-8px 4px 135px rgba(176, 29, 104, 0.5)); }
  37%      { filter: drop-shadow(6px -7px 90px rgba(122, 31, 134, 0.5)); }
  55%      { filter: drop-shadow(0 8px 150px rgba(208, 42, 125, 0.5)); }
  76%      { filter: drop-shadow(7px 0 100px rgba(90, 28, 134, 0.5)); }
}

/* ----- Header with jagged peaks, like the homepage ----- */
.nv-header {
  position: relative;
  padding: 18px 32px 32px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #9c1757 0%, #5e1b82 55%, #25194d 100%);
  clip-path: polygon(
    0 0, 100% 0, 100% 72%,
    93% 100%, 85% 80%, 76% 96%, 66% 70%, 55% 100%,
    45% 78%, 34% 94%, 24% 68%, 13% 98%, 5% 80%, 0 92%
  );
}
.nv-title {
  margin: 0;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(18px, 5vw, 24px);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
.nv-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: saira;
  color: rgba(255, 255, 255, 0.8);
}
#nv-chat-close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  padding: 16px 4px;
  transform: translateX(30px);
}

/* ----- Message area ----- */
#nv-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  text-align: center;
  
  gap: 10px;
}

/* ----- Scrollbar (message area) -----
   A wide grab area (14px) that looks slim until you use it: the thumb has a
   see-through border, which shrinks on hover and while dragging, so it
   thickens under the pointer. It never gets shorter than 48px, and the track
   shows faintly so it's clear where to click to jump up or down. */
#nv-chat-messages {
  overscroll-behavior: contain; /* reaching the end doesn't scroll the page */
}
#nv-chat-messages::-webkit-scrollbar {
  width: 14px;
  background: transparent;
}
#nv-chat-messages::-webkit-scrollbar-corner,
#nv-chat-messages::-webkit-scrollbar-button {
  display: none;
  background: transparent;
}
#nv-chat-messages::-webkit-scrollbar-track {
  background: rgba(122, 31, 134, 0.14);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 14px;
  margin: 14px 0;
}
/* Hovering the bar: a slightly deeper purple from the panel, not grey */
#nv-chat-messages::-webkit-scrollbar-track:hover {
  background: rgba(122, 31, 134, 0.28);
  background-clip: padding-box;
}
#nv-chat-messages::-webkit-scrollbar-thumb {
  min-height: 48px;
  background: linear-gradient(180deg, #b01d68, #5a1c86);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 14px;
}
#nv-chat-messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d02a7d, #7a1f86);
  background-clip: padding-box;
  border-width: 2px;
}
#nv-chat-messages::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #ff5fa8, #9a2fb0);
  background-clip: padding-box;
  border-width: 1px;
}
/* Firefox (no gradient support, so flat brand colours).
   Kept out of Chrome, where scrollbar-color would
   override the gradient styles above. The track colour
   must be solid: Firefox widens the bar on hover and
   paints a see-through track over its own light grey. */
@supports not selector(::-webkit-scrollbar) {
  #nv-chat-messages {
    scrollbar-width: auto;
    scrollbar-color: #b01d68 #1d1230;
  }
}

/* ----- Messages ----- */
.nv-msg {
  max-width: 95%;
  padding: 11px 14px;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-line; /* keeps paragraph breaks, tidies spaces */
  overflow-wrap: break-word; /* only splits a word if it can't fit at all */
  hyphens: none;
  text-wrap: pretty; /* avoids a lonely last word on its own line */
  font-family: saira;
  text-align: center;
  border-radius: 24px 16px 24px 16px;
  
  color: rgb(229, 194, 224);
 
  
  
}
.nv-msg a {
  color: #ff5fa8;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere; /* long links wrap instead of overflowing */
}
.nv-msg a:hover {
  color: #fff;
}
.nv-bot {
  align-self: center;

  
  
}
.nv-user {
  align-self: center;
  color: rgb(203, 61, 179);
}
/* Someone from the studio, live (they took the chat over in Portal): their first name above */
.nv-staff {
  color: rgb(246, 222, 238);
  box-shadow: inset 0 0 0 1px rgba(255, 95, 168, 0.35);
  background: rgba(176, 29, 104, 0.12);
}
.nv-from {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ff5fa8;
}
/* "Sam from the studio has joined the chat." */
.nv-note {
  align-self: center;
  max-width: 90%;
  padding: 4px 10px;
  font-size: 13px;
  font-style: italic;
  color: rgba(229, 194, 224, 0.7);
}
.nv-typing {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  animation: nv-pulse 1.2s ease-in-out infinite;
}
@keyframes nv-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ----- Typing row ----- */
/* ----- Message box: a bigger, glowing Novacane box with Send beside it ----- */
.nv-composer {
  padding: 16px 18px 6px;
  border-top: 1px solid rgba(229, 194, 224, 0.12);
  background: linear-gradient(180deg, rgba(122, 31, 134, 0.1), transparent);
}
.nv-input-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
#nv-chat-input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  max-height: 140px;
  margin: 0;
  padding: 12px 16px;
  resize: none;
  overflow-y: auto;
  border: 1.5px solid transparent;
  border-radius: 16px 24px 32px 4px; /* the site's angled button shape */
  /* A gradient border: dark inside, pink-to-purple edge */
  background:
    linear-gradient(#170e22, #170e22) padding-box,
    linear-gradient(120deg, rgba(176, 29, 104, 0.75), rgba(122, 31, 134, 0.75)) border-box;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: saira, "Jost", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: #b01d68 transparent;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
#nv-chat-input::placeholder {
  color: rgba(229, 194, 224, 0.45);
  font-style: italic;
}
#nv-chat-input:hover {
  background:
    linear-gradient(#1a1027, #1a1027) padding-box,
    linear-gradient(120deg, #d02a7d, #8a3fb0) border-box;
}
#nv-chat-input:focus {
  outline: none;
  background:
    linear-gradient(#1c1129, #1c1129) padding-box,
    linear-gradient(120deg, #ff5fa8, #d02a7d 45%, #8a4fd8) border-box;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(208, 42, 125, 0.16),
    0 0 18px rgba(208, 42, 125, 0.35);
}
#nv-chat-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px 32px 24px 16px; /* mirrors the message box */
  background: linear-gradient(120deg, #b01d68 0%, #9a1c72 60%, #7a1f86 100%);
  box-shadow: 0 4px 14px rgba(176, 29, 104, 0.4);
  color: #fff;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#nv-chat-send svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
#nv-chat-send:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(208, 42, 125, 0.6);
}
#nv-chat-send:hover svg {
  transform: translateX(3px);
}
#nv-chat-send:active {
  transform: scale(0.96);
}
#nv-chat-send:disabled {
  filter: grayscale(0.6) brightness(0.7);
  box-shadow: none;
  cursor: wait;
}

/* ----- Speak and Voice replies, under the message box ----- */
.nv-tools {
  display: flex;
  flex-wrap: nowrap; /* Speak, Voice, Sounds and Feedback all on one row */
  justify-content: center;
  gap: 6px;
  padding: 14px 0 6px;
}
.nv-tools:not(:has(> :not([hidden]))) {
  display: none; /* neither is available on this device */
}
.nv-tool {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 5px;
  padding: 7px 11px;
  white-space: nowrap;
  border: 1px solid rgba(229, 194, 224, 0.3);
  border-radius: 999px;
  background: rgba(122, 31, 134, 0.16);
  color: rgb(229, 194, 224);
  font-family: saira, "Jost", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 400px) {
  .nv-tools { gap: 4px; }
  .nv-tool { gap: 4px; padding: 6px 8px; font-size: 10px; letter-spacing: 0.05em; }
  .nv-tool svg { width: 13px; height: 13px; }
}
.nv-tool[hidden] {
  display: none;
}
.nv-tool svg {
  flex: none;
  width: 15px;
  height: 15px;
}
.nv-tool:hover {
  color: #fff;
  border-color: rgba(255, 95, 168, 0.65);
}
.nv-tool:disabled {
  opacity: 0.45;
  cursor: wait;
}

/* Voice replies on: filled pink, like the other active buttons */
#nv-voice-toggle[aria-pressed="true"] {
  background: linear-gradient(120deg, #8e1a55, #5a1a6a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 12px rgba(208, 42, 125, 0.5);
}
/* Show the matching icon for on / off */
#nv-voice-toggle[aria-pressed="true"] .nv-when-off,
#nv-voice-toggle[aria-pressed="false"] .nv-when-on {
  display: none;
}
/* A soft glow until the visitor has tried it once, so they notice it */
#nv-voice-toggle.nv-nudge {
  animation: nv-nudge 2.4s ease-in-out infinite;
}
@keyframes nv-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208, 42, 125, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(208, 42, 125, 0.55); }
}
/* Mic glows and pulses while listening */
#nv-mic.nv-listening {
  background: linear-gradient(120deg, #8e1a55, #5a1a6a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px rgba(208, 42, 125, 0.7);
  animation: nv-pulse 1.2s ease-in-out infinite;
}

/* ----- Under the message box: "Keep chat closed" switch + privacy note ----- */
.nv-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 14px;
  text-align: center;
}
.nv-privacy {
  margin: 0;
  font-family: "Source Code Pro", monospace;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(229, 194, 224, 0.55);
}
.nv-privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nv-privacy a:hover {
  color: #ff5fa8;
}

/* The switch, in the Novacane style: the wordmark's pink-to-purple gradient,
   heavy slanted lettering, and the logo's sigil as the knob */
#nv-keep-closed {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: rgb(229, 194, 224);
}
.nv-keep-label {
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: skewX(-12deg); /* slanted, like the NOVACANE wordmark */
  color: rgba(229, 194, 224, 0.75);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
#nv-keep-closed:hover .nv-keep-label {
  color: #fff;
}
#nv-keep-closed[aria-checked="true"] .nv-keep-label {
  background: linear-gradient(100deg, #ff5fa8 0%, #d02a7d 35%, #8a4fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(208, 42, 125, 0.35);
}

/* The track */
.nv-switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(229, 194, 224, 0.35);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#nv-keep-closed:hover .nv-switch {
  border-color: rgba(255, 95, 168, 0.7);
}
#nv-keep-closed[aria-checked="true"] .nv-switch {
  border-color: transparent;
  background: linear-gradient(100deg, #b01d68, #d02a7d, #7a1f86, #b01d68);
  background-size: 300% 100%;
  box-shadow: 0 0 14px rgba(208, 42, 125, 0.65), inset 0 1px 3px rgba(0, 0, 0, 0.35);
  animation: nv-shimmer 4s linear infinite;
}
@keyframes nv-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* The knob: the Novacane sigil */
.nv-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a1840, #150d1f 70%);
  box-shadow: 0 0 0 1px rgba(229, 194, 224, 0.25), 0 2px 6px rgba(0, 0, 0, 0.6);
  color: rgba(229, 194, 224, 0.8);
  /* Slides across with a spin, overshooting slightly like a flick */
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.3s ease, box-shadow 0.3s ease;
}
.nv-sigil {
  width: 16px;
  height: 16px;
  overflow: visible;
}
.nv-sigil-ring {
  transform-box: view-box;
  transform-origin: 12px 12px;
}
#nv-keep-closed:hover .nv-knob {
  color: #fff;
}
#nv-keep-closed[aria-checked="true"] .nv-knob {
  transform: translateX(22px) rotate(360deg);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 95, 168, 0.9);
}
/* While on: the ring slowly turns and the sigil breathes */
#nv-keep-closed[aria-checked="true"] .nv-sigil-ring {
  animation: nv-ring-turn 6s linear infinite;
}
#nv-keep-closed[aria-checked="true"] .nv-sigil {
  animation: nv-sigil-glow 2.4s ease-in-out infinite;
}
@keyframes nv-ring-turn {
  to { transform: rotate(360deg); }
}
@keyframes nv-sigil-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 95, 168, 0.6)); }
  50%      { filter: drop-shadow(0 0 4px rgba(255, 95, 168, 1)); }
}

/* ----- Booking button ----- */
/* The chat's main button, at the top of the bottom panel (above the message
   box), in the same style as the Send button */
.nv-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin: 0 0 12px;
  border-radius: 16px 24px 32px 4px; /* the site's angled button shape, like the message box */
  background: linear-gradient(120deg, #b01d68 0%, #9a1c72 60%, #7a1f86 100%);
  box-shadow: 0 3px 10px rgba(120, 20, 72, 0.3);
  color: #f3dcea;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.nv-book svg {
  width: 16px;
  height: 16px;
}
.nv-book:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(208, 42, 125, 0.6);
}
.nv-book-busy {
  cursor: progress;
  animation: nv-pulse 1.2s ease-in-out infinite;
}


/* ----- "Book it for me" / "I'll book it myself" (under a reply) ----- */
.nv-choice {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 6px;
  animation: nv-choice-in 0.35s ease-out;
}
.nv-choice-me,
.nv-choice-self {
  display: inline-block;
  padding: 11px 16px;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 22px 26px 28px 24px;
  transition: filter 0.15s ease, background-color 0.15s ease;
}
.nv-choice-me {
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, #b01d68 0%, #9a1c72 60%, #7a1f86 100%);
  box-shadow: 0 6px 20px rgba(176, 29, 104, 0.4);
  text-shadow: 0 0 8px rgba(255, 209, 234, 0.35);
}
.nv-choice-self {
  color: rgb(229, 194, 224);
  background: transparent;
  border: 1.5px solid rgba(255, 95, 168, 0.55);
}
.nv-choice-me:hover {
  filter: brightness(1.18);
}
.nv-choice-self:hover {
  background-color: rgba(255, 95, 168, 0.12);
}
@keyframes nv-choice-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ----- Keyboard focus ----- */
#nv-chat-toggle:focus-visible,
#nv-chat-close:focus-visible,
#nv-chat-send:focus-visible,
.nv-tool:focus-visible,
#nv-chat-input:focus-visible,
.nv-teaser-open:focus-visible,
.nv-privacy a:focus-visible,
#nv-keep-closed:focus-visible,
.nv-teaser-close:focus-visible,
#nv-voice-toggle:focus-visible,
.nv-choice-me:focus-visible,
.nv-choice-self:focus-visible,
.nv-book:focus-visible {
  outline: 2px solid #ff5fa8;
  outline-offset: 3px;
}

/* ----- Phones: full screen chat ----- */
@media (max-width: 480px), (max-height: 560px) {
  #nv-chat-panel,
  #nv-chat-panel.nv-small {
    opacity: 1; /* full screen, so nothing to see through to */
    transform: none; /* never moves or shrinks on phones */
    transform-origin: 50% 100%;
    /* Exactly the part of the screen that's showing, so the on-screen
       keyboard never covers the message box (novabot.js fitToScreen) */
    top: var(--nv-view-top, 0px);
    right: 0;
    bottom: auto;
    width: 100%;
    height: var(--nv-view-height, 100%);
    max-width: none;
    max-height: none;
    transition: height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 0;
    border-radius: 0;
  }
  /* Already fitted to the part of the screen above the keyboard */
  #nv-chat-panel.nv-keyboard {
    bottom: auto;
    max-height: none;
  }
  .nv-header {
    padding: 16px 24px 32px;
  }
  #nv-chat-close {
    transform: translateX(16px);
  }
  #nv-chat-messages {
    padding: 14px;
  }
  /* 16px stops iPhones zooming in when the box is tapped */
  #nv-chat-input {
    font-size: 16px;
  }
  .nv-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* ----- Less motion for people who ask for it ----- */
@media (prefers-reduced-motion: reduce) {
  #nv-chat-panel,
  #nv-chat-teaser,
  #nv-chat-toggle,
  #nv-chat-toggle .nv-wave rect,
  #nv-chat-toggle.nv-attention,
  #nv-chat-toggle.nv-unread,
  #nv-keep-closed[aria-checked="true"] .nv-switch,
  #nv-keep-closed[aria-checked="true"] .nv-sigil,
  #nv-keep-closed[aria-checked="true"] .nv-sigil-ring,
  .nv-typing,
  #nv-mic.nv-listening,
  #nv-voice-toggle.nv-nudge {
    animation: none;
  }
  #nv-chat-toggle,
  #nv-chat-panel,
  #nv-chat-panel.nv-small,
  .nv-switch,
  .nv-knob,
  .nv-keep-label,
  .nv-book {
    transition: none;
  }
}

/* ----- Sounds button: off is dimmed and crossed through ----- */
#nv-sounds[aria-pressed="false"] {
  opacity: 0.6;
}
#nv-sounds[aria-pressed="false"] span {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* ----- Gradients that drift slowly ----- */
.nv-header,
#nv-chat-send,
.nv-book,
#nv-voice-toggle[aria-pressed="true"] {
  background-size: 220% 220%;
  animation: nv-drift 12s ease-in-out infinite;
}
.nv-header {
  background-image: linear-gradient(120deg, #9c1757 0%, #5e1b82 35%, #25194d 60%, #7a1f86 80%, #9c1757 100%);
}
#nv-chat-send,
.nv-book {
  background-image: linear-gradient(120deg, #b01d68 0%, #9a1c72 30%, #7a1f86 55%, #c42a7e 80%, #b01d68 100%);
}
@keyframes nv-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* The panel's own glow drifts too, very slowly */
#nv-chat-panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 30% 70%, rgba(176, 29, 104, 0.18), transparent 45%),
    radial-gradient(circle at 75% 30%, rgba(122, 31, 134, 0.2), transparent 45%);
  animation: nv-float 18s ease-in-out infinite alternate;
}
@keyframes nv-float {
  from { transform: translate(-4%, 3%) rotate(0deg); }
  to   { transform: translate(4%, -3%) rotate(8deg); }
}

/* ----- A subtle sparkle on the text ----- */
/* The NOVACANE title: a light passing across it now and then */
.nv-title {
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffe0f0 47%, #ffffff 50%, #ffd1ea 53%, #fff 60%, #fff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nv-sweep 6s ease-in-out infinite;
  position: relative;
  /* a glow around the letters (a text shadow would hide the shimmer) */
  text-shadow: none;
  filter: drop-shadow(0 0 6px rgba(155, 20, 222, 0.75));
}
@keyframes nv-sweep {
  0%, 55% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}
/* Two tiny stars that twinkle beside the title */
.nv-title::before,
.nv-title::after {
  content: "✦";
  position: absolute;
  font-size: 10px;
  color: #ffd1ea;
  -webkit-text-fill-color: #ffd1ea;
  text-shadow: 0 0 6px #ff5fa8;
  opacity: 0;
  pointer-events: none;
  animation: nv-twinkle 4.5s ease-in-out infinite;
}
.nv-title::before { top: -8px; left: -14px; }
.nv-title::after  { bottom: -6px; right: -14px; font-size: 8px; animation-delay: 2.2s; }
@keyframes nv-twinkle {
  0%, 70%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  80%           { opacity: 1; transform: scale(1) rotate(45deg); }
  90%           { opacity: 0.4; transform: scale(0.7) rotate(90deg); }
}
/* New replies from NovaBot shimmer once as they appear */
.nv-bot:last-child:not(.nv-typing) {
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 209, 234, 0.12) 50%, transparent 65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: nv-reply-shine 1.6s ease-out 1;
}
@keyframes nv-reply-shine {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
/* The Book and Send labels catch the light too */
.nv-book,
#nv-chat-send span {
  text-shadow: 0 0 8px rgba(255, 209, 234, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .nv-header,
  #nv-chat-send,
  .nv-book,
  #nv-voice-toggle[aria-pressed="true"],
  #nv-chat-panel::before,
  .nv-title,
  .nv-title::before,
  .nv-title::after,
  .nv-bot:last-child:not(.nv-typing),
  .nv-choice {
    animation: none;
  }
}

/* ----- Novacane cursors, all over the website (novabot.js adds
   nv-site-cursor to the page): a pink-to-purple arrow, the same arrow with a
   glowing ring over anything clickable, a pink text cursor in text boxes, and
   the Novacane sigil for a moment after a click (nv-acted) ----- */
html.nv-site-cursor,
html.nv-site-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff5fa8'/%3E%3Cstop offset='1' stop-color='%238a4fd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2l19 9.5-8 2.3-4 7.7z' fill='url(%23g)' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='4' r='1.3' fill='%23ffd1ea'/%3E%3C/svg%3E") 3 2, auto;
}
html.nv-site-cursor a,
html.nv-site-cursor button,
html.nv-site-cursor [role="button"],
html.nv-site-cursor label,
html.nv-site-cursor select,
html.nv-site-cursor summary,
html.nv-site-cursor input[type="submit"],
html.nv-site-cursor input[type="button"],
html.nv-site-cursor input[type="checkbox"],
html.nv-site-cursor input[type="radio"],
html.nv-site-cursor #nv-chat-panel.nv-small,
html.nv-site-cursor #nv-chat-panel.nv-small * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff5fa8'/%3E%3Cstop offset='1' stop-color='%238a4fd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='4' cy='3' r='3.6' fill='none' stroke='%23ff5fa8' stroke-width='1.4' stroke-opacity='0.85'/%3E%3Cpath d='M4 3l19 9.5-8 2.3-4 7.7z' fill='url(%23g)' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer;
}
html.nv-site-cursor input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.nv-site-cursor textarea,
html.nv-site-cursor [contenteditable="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M5.5 3h9M10 3v22M5.5 25h9' fill='none' stroke='%23ff5fa8' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M5.5 3h9M10 3v22M5.5 25h9' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 10 14, text;
}
html.nv-site-cursor.nv-acted,
html.nv-site-cursor.nv-acted * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23ff5fa8' fill-opacity='0.18'/%3E%3Cpath d='M20.19 6.26A10 10 0 0 1 6.26 20.19M3.81 17.74A10 10 0 0 1 17.74 3.81' fill='none' stroke='%23ff5fa8' stroke-width='2.4'/%3E%3Cpath d='M3.9 20.1 11.3 7.5M12.5 8.3 13.5 16M14.7 16.5 20.1 3.9' fill='none' stroke='%23fff' stroke-width='1.9'/%3E%3C/svg%3E") 16 16, pointer;
}
html.nv-site-cursor button:disabled {
  cursor: wait;
}

/* The sparkles: a trail over the chat and over the website's links and
   buttons, and a little burst wherever someone clicks */
.nv-spark {
  position: fixed;
  z-index: 10001;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffd1ea 35%, rgba(255, 95, 168, 0) 70%);
  box-shadow: 0 0 6px rgba(255, 95, 168, 0.8);
  animation: nv-spark 0.75s ease-out forwards;
}
.nv-spark.nv-star {
  width: auto;
  height: auto;
  margin: -6px 0 0 -4px;
  background: none;
  box-shadow: none;
  color: #ffd1ea;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 0 6px #ff5fa8;
}
@keyframes nv-spark {
  from { opacity: 0.9; transform: translate(0, 0) scale(1) rotate(0deg); }
  to   { opacity: 0; transform: translate(var(--nv-dx, 0px), var(--nv-dy, 12px)) scale(0.3) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nv-spark { display: none; }
}

/* ----- The booking moment: shown while the Novacane track plays, just
   before going to the booking page ----- */
.nv-booking-moment {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(176, 29, 104, 0.55), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(90, 28, 134, 0.6), transparent 65%),
    rgba(21, 13, 31, 0.94);
  animation: nv-moment-in 0.6s ease-out both;
}
.nv-booking-moment[hidden] {
  display: none;
}
.nv-booking-moment svg {
  width: 96px;
  height: 96px;
  color: #fff;
  filter: drop-shadow(0 0 18px rgba(255, 95, 168, 0.9));
  animation: nv-moment-spin 4.5s cubic-bezier(0.3, 0, 0.2, 1) both;
}
.nv-moment-title {
  margin: 0;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  transform: skewX(-10deg);
  background: linear-gradient(100deg, #ffd1ea, #ff5fa8 30%, #fff 50%, #c7a4ff 70%, #ffd1ea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: nv-moment-text 3s linear infinite;
}
.nv-moment-sub {
  margin: 0;
  font-family: saira, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(229, 194, 224, 0.85);
}
.nv-moment-go {
  margin-top: 6px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 95, 168, 0.6);
  border-radius: 999px;
  background: rgba(176, 29, 104, 0.25);
  color: #fff;
  font-family: saira, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nv-moment-go:hover {
  background: rgba(176, 29, 104, 0.5);
}
@keyframes nv-moment-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nv-moment-spin {
  from { transform: scale(0.4) rotate(-200deg); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes nv-moment-text {
  to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-booking-moment,
  .nv-booking-moment svg,
  .nv-moment-title {
    animation: none;
  }
}

/* ----- The booking card: everything a booking needs in one go (novabot.js showForm) ----- */
.nv-card {
  position: relative;
  flex-shrink: 0; /* the message list mustn't squash it */
  align-self: stretch;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 4px 0 8px;
  padding: 16px 14px 14px;
  overflow: hidden;
  text-align: left;
  font-family: saira, "Jost", Arial, sans-serif;
  color: rgb(229, 194, 224);
  border: 1.5px solid transparent;
  border-radius: 22px 14px 26px 12px;
  background:
    linear-gradient(160deg, rgba(36, 17, 52, 0.97), rgba(20, 11, 30, 0.97)) padding-box,
    linear-gradient(120deg, rgba(255, 95, 168, 0.8), rgba(122, 31, 134, 0.8), rgba(255, 95, 168, 0.8)) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 18px rgba(120, 20, 72, 0.14);
  animation: nv-card-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15) both, nv-card-edge 6s linear infinite;
}
.nv-card-glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 140px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 95, 168, 0.12), transparent 70%);
  animation: nv-card-glow 5s ease-in-out infinite alternate;
}
.nv-card-title {
  position: relative;
  margin-bottom: 10px;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 95, 168, 0.3);
}
.nv-card-body { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nv-card-body > * { min-width: 0; }
.nv-card-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 209, 234, 0.7);
}
.nv-card-select,
.nv-card-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  font: 500 15px saira, "Jost", Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  border: 1.5px solid rgba(255, 95, 168, 0.3);
  border-radius: 12px 8px 14px 6px;
  background: rgba(10, 5, 16, 0.65);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nv-card-select option { color: #fff; background: #1a0f26; }
.nv-card-input::placeholder { color: rgba(229, 194, 224, 0.45); }
.nv-card-select:focus,
.nv-card-input:focus {
  border-color: #ff5fa8;
  background: rgba(30, 12, 40, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 95, 168, 0.18), 0 0 18px rgba(255, 95, 168, 0.2);
}
.nv-card-wrong { border-color: #ff6b8a; animation: nv-card-shake 0.4s; }
.nv-card-row { display: flex; gap: 8px; }
.nv-card-row > .nv-card-input { flex: 1 1 0; }

/* Days: a strip of little tickets that scrolls sideways */
.nv-card-days {
  display: flex;
  gap: 6px;
  padding: 6px 4px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 95, 168, 0.4) transparent;
}
.nv-day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 7px 6px 6px;
  scroll-snap-align: center;
  cursor: pointer;
  font-family: saira, Arial, sans-serif;
  color: rgb(229, 194, 224);
  border: 1.5px solid rgba(255, 95, 168, 0.22);
  border-radius: 12px 8px 12px 8px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.nv-day:hover { transform: translateY(-2px); border-color: rgba(255, 95, 168, 0.6); }
.nv-day-name { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.nv-day-num { font-size: 19px; font-weight: 700; line-height: 1.15; color: #fff; }
.nv-day-month { font-size: 10px; opacity: 0.6; }
.nv-day-on {
  border-color: transparent;
  background: linear-gradient(150deg, #c42476, #7a1f86);
  box-shadow: 0 4px 12px rgba(120, 20, 72, 0.3);
  transform: translateY(-2px) scale(1.04);
}
.nv-day-on .nv-day-name,
.nv-day-on .nv-day-month { opacity: 0.95; }

/* Times: chips that pop in one after another */
.nv-card-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  min-height: 38px;
}
.nv-time {
  padding: 8px 4px;
  cursor: pointer;
  font: 600 14px saira, Arial, sans-serif;
  color: #fff;
  text-align: center;
  border: 1.5px solid rgba(255, 95, 168, 0.28);
  border-radius: 10px 6px 10px 6px;
  background: rgba(255, 255, 255, 0.04);
  animation: nv-time-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nv-time:hover { transform: scale(1.06); border-color: rgba(255, 95, 168, 0.7); }
.nv-time-on {
  border-color: transparent;
  background: linear-gradient(130deg, #ff5fa8, #b01d68 55%, #7a1f86);
  box-shadow: 0 0 0 1.5px rgba(255, 209, 234, 0.22), 0 4px 12px rgba(120, 20, 72, 0.3);
  transform: scale(1.06);
}
.nv-time-loading {
  height: 18px;
  cursor: default;
  border-color: transparent;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 30%, rgba(255, 95, 168, 0.18) 50%, rgba(255, 255, 255, 0.04) 70%);
  background-size: 250% 100%;
  animation: nv-card-shimmer 1.1s linear infinite;
}
.nv-card-note { grid-column: 1 / -1; padding: 8px 0; font-size: 14px; text-align: center; color: rgba(229, 194, 224, 0.7); }

.nv-card-summary {
  max-height: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #ffd1ea;
  opacity: 0;
  transition: max-height 0.35s, opacity 0.35s, margin 0.35s;
}
.nv-card-summary-on { max-height: 60px; margin-top: 4px; opacity: 1; }
.nv-card-problem { font-size: 14px; text-align: center; color: #ff8fab; }
.nv-card-problem:empty { display: none; }
.nv-card-link { color: #ffd1ea; font-weight: 600; }

.nv-card-book {
  position: relative;
  margin-top: 6px;
  padding: 13px 16px;
  overflow: hidden;
  cursor: pointer;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  border-radius: 16px 24px 32px 4px;
  background: linear-gradient(120deg, #ff5fa8 0%, #b01d68 45%, #7a1f86 100%);
  background-size: 200% 100%;
  box-shadow: 0 5px 16px rgba(120, 20, 72, 0.35);
  text-shadow: 0 0 6px rgba(255, 209, 234, 0.25);
  transition: transform 0.15s, filter 0.2s, background-position 0.6s;
}
.nv-card-book::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: nv-card-sweep 3.2s ease-in-out infinite;
}
.nv-card-book:hover { filter: brightness(1.15); background-position: 100% 0; transform: translateY(-1px); }
.nv-card-book:active { transform: scale(0.98); }
.nv-card-book:disabled { cursor: progress; }
.nv-card-sending .nv-card-book:disabled { animation: nv-card-breathe 1s ease-in-out infinite; }
/* "I'll book it myself": the quieter of the two choices */
.nv-card-book.nv-card-self {
  margin-top: 0;
  padding: 10px 16px;
  font-size: 12px;
  color: #ffd1ea;
  background: transparent;
  border: 1.5px solid rgba(255, 95, 168, 0.55);
  box-shadow: none;
}
.nv-card-book.nv-card-self::after { display: none; }
.nv-card-book.nv-card-self:hover { background: rgba(255, 95, 168, 0.12); }

.nv-card-sending .nv-card-body > :not(.nv-card-book) { opacity: 0.55; pointer-events: none; transition: opacity 0.3s; }

/* Booked: a tick draws itself inside a glowing ring */
.nv-card-done { animation: nv-card-pop 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.3), nv-card-edge 3s linear infinite; }
.nv-card-done-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 4px; text-align: center; }
.nv-card-tick { width: 76px; height: 76px; filter: drop-shadow(0 0 8px rgba(255, 95, 168, 0.4)); animation: nv-tick-pop 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.5) both; }
.nv-card-tick svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nv-card-tick circle { stroke: #ff5fa8; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; animation: nv-draw 0.7s ease-out 0.1s forwards; }
.nv-card-tick path { stroke: #fff; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: nv-draw 0.45s ease-out 0.65s forwards; }
.nv-card-done-title {
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 95, 168, 0.4);
  animation: nv-rise-in 0.5s ease-out 0.5s both;
}
.nv-card-done-when { white-space: pre-line; font-size: 15px; font-weight: 600; color: #ffd1ea; animation: nv-rise-in 0.5s ease-out 0.65s both; }
.nv-card-done-note { font-size: 13px; line-height: 1.45; color: rgba(229, 194, 224, 0.8); animation: nv-rise-in 0.5s ease-out 0.8s both; }
/* Nova Bot's own booking system: "Pay the deposit now" on a booked card */
.nv-card-pay {
  display: inline-block; margin-top: 12px; padding: 11px 20px; border-radius: 16px 24px 32px 4px;
  background: linear-gradient(120deg, #b01d68, #7a1f86); color: #fff !important; font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; animation: nv-rise-in 0.5s ease-out 1s both;
}
.nv-card-pay:hover { filter: brightness(1.15); }
.nv-card-pay:focus-visible { outline: 2px solid #ff5fa8; outline-offset: 3px; }

.nv-day:focus-visible,
.nv-time:focus-visible,
.nv-card-book:focus-visible {
  outline: 2px solid #ff5fa8;
  outline-offset: 2px;
}

@keyframes nv-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes nv-card-edge { to { background-position: 0 0, 300% 0; } }
@keyframes nv-card-glow { from { transform: translateX(-12%); opacity: 0.6; } to { transform: translateX(12%); opacity: 1; } }
@keyframes nv-time-in { from { opacity: 0; transform: translateY(6px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes nv-card-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes nv-card-sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes nv-card-breathe { 50% { filter: brightness(1.3); box-shadow: 0 8px 30px rgba(255, 95, 168, 0.75); } }
@keyframes nv-card-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes nv-card-pop { 40% { transform: scale(1.03); } }
@keyframes nv-tick-pop { from { transform: scale(0.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nv-draw { to { stroke-dashoffset: 0; } }
@keyframes nv-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .nv-card { padding: 14px 10px 12px; }
  .nv-card-select, .nv-card-input { font-size: 16px; } /* stops phones zooming in */
}
@media (prefers-reduced-motion: reduce) {
  .nv-book-busy { animation: none; }
  .nv-card, .nv-card-glow, .nv-time, .nv-card-book::after, .nv-card-done, .nv-card-tick,
  .nv-card-done-title, .nv-card-done-when, .nv-card-done-note, .nv-card-pay, .nv-time-loading { animation: none; }
  .nv-card-tick circle, .nv-card-tick path { animation: none; stroke-dashoffset: 0; }
}

/* ===== Texture: Novacane in deep space =====
   One family of textures across all of NovaBot, a little different in each
   area: fine film grain, star specks, nebula haze, and the Novacane sigil
   traced as a constellation. All very faint, so it reads as texture, not
   decoration. */
#nv-chat {
  --nv-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.95 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --nv-stars-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='39.6' cy='19.5' r='0.81' fill='%23c9b8ff' fill-opacity='0.16'/%3E%3Ccircle cx='12.9' cy='69.6' r='0.99' fill='%23fff' fill-opacity='0.20'/%3E%3Ccircle cx='52.3' cy='10.1' r='0.41' fill='%23c9b8ff' fill-opacity='0.26'/%3E%3Ccircle cx='16.4' cy='27.9' r='0.79' fill='%23c9b8ff' fill-opacity='0.42'/%3E%3Ccircle cx='69.9' cy='7.8' r='0.50' fill='%23fff' fill-opacity='0.31'/%3E%3Ccircle cx='35.6' cy='18.7' r='0.43' fill='%23fff' fill-opacity='0.23'/%3E%3Ccircle cx='14.0' cy='68.3' r='0.48' fill='%23fff' fill-opacity='0.17'/%3E%3Ccircle cx='67.5' cy='73.8' r='0.70' fill='%23ffd1ea' fill-opacity='0.30'/%3E%3Ccircle cx='56.0' cy='109.1' r='0.60' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='83.1' cy='30.3' r='0.75' fill='%23ffd1ea' fill-opacity='0.30'/%3E%3Ccircle cx='86.6' cy='35.4' r='1.04' fill='%23e5c2e0' fill-opacity='0.17'/%3E%3Ccircle cx='21.1' cy='41.7' r='1.00' fill='%23fff' fill-opacity='0.26'/%3E%3Ccircle cx='90.7' cy='68.5' r='0.96' fill='%23ffd1ea' fill-opacity='0.23'/%3E%3Ccircle cx='70.9' cy='69.3' r='0.67' fill='%23ffd1ea' fill-opacity='0.39'/%3E%3Ccircle cx='57.0' cy='79.0' r='0.39' fill='%23c9b8ff' fill-opacity='0.35'/%3E%3Ccircle cx='117.2' cy='97.3' r='0.55' fill='%23ffd1ea' fill-opacity='0.25'/%3E%3Ccircle cx='4.6' cy='55.6' r='0.47' fill='%23fff' fill-opacity='0.17'/%3E%3Ccircle cx='27.3' cy='35.3' r='0.87' fill='%23e5c2e0' fill-opacity='0.26'/%3E%3Ccircle cx='11.3' cy='54.1' r='0.73' fill='%23e5c2e0' fill-opacity='0.41'/%3E%3Ccircle cx='102.2' cy='34.3' r='0.64' fill='%23e5c2e0' fill-opacity='0.25'/%3E%3Ccircle cx='113.1' cy='19.5' r='0.47' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='3.4' cy='98.4' r='0.48' fill='%23fff' fill-opacity='0.23'/%3E%3Ccircle cx='50.6' cy='44.8' r='0.75' fill='%23c9b8ff' fill-opacity='0.42'/%3E%3Ccircle cx='112.2' cy='78.0' r='0.87' fill='%23c9b8ff' fill-opacity='0.28'/%3E%3Cpath d='M48.8 47.1Q48.8 49.5 51.2 49.5Q48.8 49.5 48.8 51.8Q48.8 49.5 46.5 49.5Q48.8 49.5 48.8 47.1Z' fill='%23ffd1ea' fill-opacity='0.25'/%3E%3C/svg%3E");
  --nv-stars-sparse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='15.4' cy='16.5' r='0.43' fill='%23ffd1ea' fill-opacity='0.11'/%3E%3Ccircle cx='131.8' cy='24.1' r='0.64' fill='%23ffd1ea' fill-opacity='0.17'/%3E%3Ccircle cx='134.6' cy='17.2' r='0.42' fill='%23ffd1ea' fill-opacity='0.14'/%3E%3Ccircle cx='208.4' cy='132.1' r='0.58' fill='%23e5c2e0' fill-opacity='0.10'/%3E%3Ccircle cx='216.5' cy='102.7' r='0.59' fill='%23fff' fill-opacity='0.10'/%3E%3Ccircle cx='163.9' cy='161.9' r='0.59' fill='%23c9b8ff' fill-opacity='0.20'/%3E%3Ccircle cx='7.0' cy='207.4' r='0.62' fill='%23c9b8ff' fill-opacity='0.10'/%3E%3Ccircle cx='199.5' cy='165.8' r='0.48' fill='%23fff' fill-opacity='0.19'/%3E%3Ccircle cx='152.4' cy='58.4' r='0.52' fill='%23fff' fill-opacity='0.11'/%3E%3Ccircle cx='117.0' cy='170.3' r='0.50' fill='%23fff' fill-opacity='0.12'/%3E%3Ccircle cx='176.1' cy='178.8' r='0.74' fill='%23c9b8ff' fill-opacity='0.12'/%3E%3Ccircle cx='108.4' cy='159.9' r='0.89' fill='%23e5c2e0' fill-opacity='0.21'/%3E%3Ccircle cx='58.0' cy='151.6' r='0.87' fill='%23ffd1ea' fill-opacity='0.15'/%3E%3Ccircle cx='208.3' cy='80.8' r='0.43' fill='%23fff' fill-opacity='0.12'/%3E%3Cpath d='M76.9 102.9Q76.9 106.5 80.5 106.5Q76.9 106.5 76.9 110.0Q76.9 106.5 73.3 106.5Q76.9 106.5 76.9 102.9Z' fill='%23ffd1ea' fill-opacity='0.25'/%3E%3Cpath d='M8.4 190.8Q8.4 193.5 11.1 193.5Q8.4 193.5 8.4 196.2Q8.4 193.5 5.7 193.5Q8.4 193.5 8.4 190.8Z' fill='%23ffd1ea' fill-opacity='0.25'/%3E%3C/svg%3E");
  --nv-dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ccircle cx='73.8' cy='12.3' r='0.39' fill='%23fff' fill-opacity='0.12'/%3E%3Ccircle cx='43.1' cy='17.4' r='0.53' fill='%23e5c2e0' fill-opacity='0.08'/%3E%3Ccircle cx='41.8' cy='65.9' r='0.28' fill='%23fff' fill-opacity='0.06'/%3E%3Ccircle cx='4.4' cy='52.8' r='0.41' fill='%23c9b8ff' fill-opacity='0.12'/%3E%3Ccircle cx='73.1' cy='86.3' r='0.48' fill='%23c9b8ff' fill-opacity='0.08'/%3E%3Ccircle cx='49.2' cy='3.8' r='0.53' fill='%23fff' fill-opacity='0.13'/%3E%3Ccircle cx='47.3' cy='82.3' r='0.40' fill='%23fff' fill-opacity='0.14'/%3E%3Ccircle cx='4.4' cy='20.3' r='0.43' fill='%23ffd1ea' fill-opacity='0.13'/%3E%3Ccircle cx='24.3' cy='38.0' r='0.30' fill='%23ffd1ea' fill-opacity='0.14'/%3E%3Ccircle cx='79.2' cy='59.0' r='0.54' fill='%23c9b8ff' fill-opacity='0.10'/%3E%3Ccircle cx='13.2' cy='15.1' r='0.43' fill='%23fff' fill-opacity='0.14'/%3E%3Ccircle cx='54.3' cy='68.7' r='0.30' fill='%23c9b8ff' fill-opacity='0.06'/%3E%3Ccircle cx='64.4' cy='49.9' r='0.36' fill='%23c9b8ff' fill-opacity='0.10'/%3E%3Ccircle cx='43.5' cy='68.8' r='0.56' fill='%23fff' fill-opacity='0.05'/%3E%3Ccircle cx='25.8' cy='68.4' r='0.43' fill='%23fff' fill-opacity='0.10'/%3E%3Ccircle cx='40.1' cy='54.7' r='0.43' fill='%23ffd1ea' fill-opacity='0.10'/%3E%3C/svg%3E");
  --nv-specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='29.1' cy='34.0' r='0.69' fill='%23c9b8ff' fill-opacity='0.32'/%3E%3Ccircle cx='54.6' cy='58.5' r='0.58' fill='%23fff' fill-opacity='0.26'/%3E%3Ccircle cx='52.4' cy='10.2' r='0.51' fill='%23fff' fill-opacity='0.24'/%3E%3Ccircle cx='42.3' cy='27.7' r='0.56' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='55.8' cy='11.3' r='0.81' fill='%23fff' fill-opacity='0.28'/%3E%3Ccircle cx='17.2' cy='10.2' r='0.68' fill='%23fff' fill-opacity='0.29'/%3E%3Ccircle cx='25.9' cy='31.2' r='0.94' fill='%23fff' fill-opacity='0.30'/%3E%3C/svg%3E");
  --nv-sigil-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='240' height='240' fill='none' stroke='%23ffd1ea' stroke-width='0.22' stroke-linecap='round' stroke-dasharray='0.25 0.9' stroke-opacity='0.11'%3E%3Cpath d='M20.19 6.26A10 10 0 0 1 6.26 20.19'/%3E%3Cpath d='M3.81 17.74A10 10 0 0 1 17.74 3.81'/%3E%3Cpath d='M3.9 20.1 11.3 7.5M12.5 8.3 13.5 16M14.7 16.5 20.1 3.9' stroke-dasharray='none' stroke-opacity='0.09'/%3E%3Cg fill='%23fff' fill-opacity='0.22' stroke='none'%3E%3Ccircle cx='3.9' cy='20.1' r='0.42'/%3E%3Ccircle cx='11.3' cy='7.5' r='0.36'/%3E%3Ccircle cx='12.5' cy='8.3' r='0.3'/%3E%3Ccircle cx='13.5' cy='16' r='0.36'/%3E%3Ccircle cx='14.7' cy='16.5' r='0.3'/%3E%3Ccircle cx='20.1' cy='3.9' r='0.46'/%3E%3Ccircle cx='20.19' cy='6.26' r='0.26' fill-opacity='0.39'/%3E%3Ccircle cx='6.26' cy='20.19' r='0.26' fill-opacity='0.39'/%3E%3Ccircle cx='3.81' cy='17.74' r='0.26' fill-opacity='0.39'/%3E%3Ccircle cx='17.74' cy='3.81' r='0.26' fill-opacity='0.39'/%3E%3C/g%3E%3C/svg%3E");
  --nv-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='240' height='240' fill='none' stroke='%23ffd1ea' stroke-width='0.22' stroke-linecap='round' stroke-dasharray='0.25 0.9' stroke-opacity='0.30'%3E%3Cpath d='M20.19 6.26A10 10 0 0 1 6.26 20.19'/%3E%3Cpath d='M3.81 17.74A10 10 0 0 1 17.74 3.81'/%3E%3Cpath d='M3.9 20.1 11.3 7.5M12.5 8.3 13.5 16M14.7 16.5 20.1 3.9' stroke-dasharray='none' stroke-opacity='0.22'/%3E%3Cg fill='%23fff' stroke='none'%3E%3Ccircle cx='3.9' cy='20.1' r='0.42'/%3E%3Ccircle cx='11.3' cy='7.5' r='0.36'/%3E%3Ccircle cx='12.5' cy='8.3' r='0.3'/%3E%3Ccircle cx='13.5' cy='16' r='0.36'/%3E%3Ccircle cx='14.7' cy='16.5' r='0.3'/%3E%3Ccircle cx='20.1' cy='3.9' r='0.46'/%3E%3Ccircle cx='20.19' cy='6.26' r='0.26' fill-opacity='0.39'/%3E%3Ccircle cx='6.26' cy='20.19' r='0.26' fill-opacity='0.39'/%3E%3Ccircle cx='3.81' cy='17.74' r='0.26' fill-opacity='0.39'/%3E%3Ccircle cx='17.74' cy='3.81' r='0.26' fill-opacity='0.39'/%3E%3C/g%3E%3C/svg%3E");
}

/* The panel: a big faint sigil constellation behind the messages, and grain */
#nv-chat-panel {
  background:
    var(--nv-sigil-faint) no-repeat left -80px top 150px / 280px 280px,
    var(--nv-grain) 0 0 / 140px 140px,
    radial-gradient(ellipse at 100% 100%, rgba(74, 26, 120, 0.55) 0%, transparent 60%),
    #150d1f;
}
/* The header: a dense starfield, the sigil constellation, grain, all drifting slowly with the gradient */
.nv-header {
  background-image: var(--nv-sigil), var(--nv-stars-dense), var(--nv-grain),
    linear-gradient(120deg, #9c1757 0%, #5e1b82 35%, #25194d 60%, #7a1f86 80%, #9c1757 100%);
  background-size: 120px 120px, 120px 120px, 140px 140px, 220% 220%;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  animation: nv-drift-header 24s ease-in-out infinite;
}
@keyframes nv-drift-header {
  0%, 100% { background-position: right 84px top -28px, 0 0, 0 0, 0% 50%; }
  50%      { background-position: right 84px top -28px, 36px 18px, 0 0, 100% 50%; }
}
/* The messages: a sparse starfield that scrolls with the chat */
#nv-chat-messages {
  background: var(--nv-stars-sparse) 0 0 / 220px 220px repeat local;
}
/* The bottom panel: stardust and grain */
.nv-composer {
  background:
    var(--nv-dust) 0 0 / 90px 90px,
    var(--nv-grain) 0 0 / 140px 140px,
    linear-gradient(180deg, rgba(122, 31, 134, 0.12), transparent);
}
.nv-foot {
  background: var(--nv-dust) 30px 10px / 90px 90px, var(--nv-grain) 0 0 / 140px 140px;
}
.nv-tool {
  background: var(--nv-dust) 0 0 / 90px 90px, rgba(122, 31, 134, 0.16);
}
/* The chat button and the teaser bubble */
#nv-chat-toggle {
  background: var(--nv-specks) 0 0 / 64px 64px, var(--nv-grain) 0 0 / 140px 140px, linear-gradient(120deg, #9c1757 0%, #5e1b82 55%, #25194d 100%);
}
.nv-teaser-open {
  background:
    var(--nv-dust) 0 0 / 90px 90px,
    var(--nv-grain) 0 0 / 140px 140px,
    radial-gradient(ellipse at 100% 100%, rgba(74, 26, 120, 0.55) 0%, transparent 70%),
    #150d1f;
}

/* Book a session and Send: the same shape family, font, grain and specks.
   Book is the solid one (the main action); Send is dark glass with a glowing
   gradient edge that fills in when you point at it. */
.nv-book {
  background-image: var(--nv-grain), var(--nv-specks),
    linear-gradient(120deg, #8e1a55 0%, #74175f 30%, #5a1a6a 55%, #94205f 80%, #8e1a55 100%);
  background-size: 140px 140px, 64px 64px, 220% 220%;
  animation: nv-drift-book 12s ease-in-out infinite;
}
@keyframes nv-drift-book {
  0%, 100% { background-position: 0 0, 0 0, 0% 50%; }
  50%      { background-position: 0 0, 22px 10px, 100% 50%; }
}
#nv-chat-send {
  border: 1.5px solid transparent;
  color: #e9bcd8;
  background-image: var(--nv-grain), var(--nv-specks),
    linear-gradient(rgba(23, 14, 34, 0.94), rgba(23, 14, 34, 0.94)),
    linear-gradient(120deg, #c2407f 0%, #8e1a55 35%, #5a1a6a 65%, #c2407f 100%);
  background-size: 140px 140px, 64px 64px, 100% 100%, 220% 220%;
  background-origin: padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
  box-shadow: 0 3px 10px rgba(120, 20, 72, 0.25), inset 0 0 12px rgba(255, 95, 168, 0.06);
  animation: nv-drift-send 12s ease-in-out infinite;
}
#nv-chat-send:hover {
  color: #fff;
  background-image: var(--nv-grain), var(--nv-specks),
    linear-gradient(rgba(23, 14, 34, 0.25), rgba(23, 14, 34, 0.25)),
    linear-gradient(120deg, #c2407f 0%, #8e1a55 35%, #5a1a6a 65%, #c2407f 100%);
}
@keyframes nv-drift-send {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0% 50%; }
  50%      { background-position: 0 0, -18px 12px, 0 0, 100% 50%; }
}

/* The cards (booking, feedback): nebula haze, stars and a sigil in the corner */
.nv-card {
  background:
    var(--nv-stars-sparse) 0 0 / 220px 220px padding-box,
    var(--nv-grain) 0 0 / 140px 140px padding-box,
    radial-gradient(ellipse at 15% 0%, rgba(255, 95, 168, 0.08), transparent 60%) padding-box,
    radial-gradient(ellipse at 100% 100%, rgba(122, 31, 134, 0.18), transparent 65%) padding-box,
    linear-gradient(160deg, rgba(36, 17, 52, 0.97), rgba(20, 11, 30, 0.97)) padding-box,
    linear-gradient(120deg, rgba(194, 64, 127, 0.55), rgba(90, 26, 106, 0.6), rgba(194, 64, 127, 0.55)) border-box;
  background-size: 220px 220px, 140px 140px, 100% 100%, 100% 100%, 100% 100%, 300% 100%;
}
@keyframes nv-card-edge {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 300% 0; }
}
.nv-day, .nv-time:not(.nv-time-loading) {
  background-image: var(--nv-dust);
  background-size: 90px 90px;
}
.nv-day-on {
  background: var(--nv-specks) 0 0 / 64px 64px, var(--nv-grain) 0 0 / 140px 140px, linear-gradient(150deg, #8e1a55, #5a1a6a);
}
.nv-time-on {
  background: var(--nv-specks) 0 0 / 64px 64px, var(--nv-grain) 0 0 / 140px 140px, linear-gradient(130deg, #b23673, #8e1a55 55%, #5a1a6a);
}
.nv-card-book {
  background-image: var(--nv-grain), var(--nv-specks), linear-gradient(120deg, #a52f6b 0%, #861a55 45%, #5a1a6a 100%);
  background-size: 140px 140px, 64px 64px, 200% 100%;
}
.nv-card-book.nv-card-self { background: transparent; }

/* ----- Feedback card ----- */
.nv-feedback-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(229, 194, 224, 0.75);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.nv-feedback-close:hover { color: #fff; background: rgba(255, 95, 168, 0.15); }
.nv-feedback-rates { display: flex; justify-content: center; gap: 12px; }
.nv-rate {
  width: 56px;
  height: 46px;
  font-size: 22px;
  cursor: pointer;
  border: 1.5px solid rgba(255, 95, 168, 0.3);
  border-radius: 14px 10px 16px 8px;
  background: var(--nv-dust) 0 0 / 90px 90px, rgba(255, 255, 255, 0.04);
  filter: grayscale(0.6);
  transition: transform 0.15s, filter 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nv-rate:hover { transform: scale(1.08); filter: none; }
.nv-rate[aria-pressed="true"] {
  filter: none;
  border-color: transparent;
  background: var(--nv-specks) 0 0 / 64px 64px, linear-gradient(130deg, #b23673, #8e1a55 55%, #5a1a6a);
  box-shadow: 0 4px 12px rgba(120, 20, 72, 0.3);
  transform: scale(1.08);
}
.nv-feedback-text { resize: vertical; min-height: 78px; line-height: 1.45; }
.nv-feedback-row { display: flex; gap: 8px; align-items: stretch; }
.nv-feedback-row .nv-feedback-send { flex: 1; margin-top: 0; }
.nv-feedback-mic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  cursor: pointer;
  font: 600 11px saira, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd1ea;
  border: 1.5px solid rgba(255, 95, 168, 0.45);
  border-radius: 16px 10px 18px 6px;
  background: var(--nv-dust) 0 0 / 90px 90px, rgba(23, 14, 34, 0.9);
  transition: background 0.2s, border-color 0.2s;
}
.nv-feedback-mic[hidden] { display: none; }
.nv-feedback-mic svg { width: 16px; height: 16px; flex: none; }
.nv-feedback-mic:hover { border-color: #ff5fa8; }
.nv-feedback-mic.nv-recording {
  color: #fff;
  border-color: #ff5fa8;
  animation: nv-card-breathe 1s ease-in-out infinite;
}
.nv-feedback-mic:disabled { cursor: progress; opacity: 0.8; }
.nv-feedback .nv-card-problem { color: rgba(255, 209, 234, 0.85); }
.nv-feedback-star {
  font-size: 54px;
  line-height: 1;
  color: #ffd1ea;
  text-shadow: 0 0 10px rgba(255, 95, 168, 0.45), 0 0 24px rgba(122, 31, 134, 0.4);
  animation: nv-tick-pop 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.5) both, nv-star-turn 6s linear 0.7s infinite;
}
@keyframes nv-star-turn { to { transform: rotate(360deg); } }
.nv-feedback-fade { transition: opacity 0.6s, transform 0.6s; opacity: 0; transform: scale(0.96); }
.nv-rate:focus-visible, .nv-feedback-mic:focus-visible, .nv-feedback-close:focus-visible {
  outline: 2px solid #ff5fa8;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nv-header, .nv-book, #nv-chat-send, .nv-feedback-star, .nv-feedback-mic.nv-recording { animation: none; }
}


/* ----- See-through peaks: messages scroll up underneath the header's
   jagged edge, and the peaks are half see-through so the text shows ----- */
.nv-header {
  z-index: 2;
  /* Solid down to where the peaks start, then half see-through */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0.45) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0.45) 100%);
}
#nv-chat-messages {
  /* --nv-peaks: how deep the jagged edge is (measured by novabot.js, 34px until then) */
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--nv-peaks, 34px));
  padding-top: calc(14px + var(--nv-peaks, 34px));
  scroll-padding-top: var(--nv-peaks, 34px);
}

/* ----- Booking mode (novabot.js enterBooking): the chat grows and tucks
   everything else away, so the whole booking card shows at once ----- */
.nv-composer,
.nv-foot {
  max-height: 420px;
  transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, padding 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
#nv-chat-panel.nv-booking {
  width: 540px;
  height: calc(100vh - 130px);
  height: calc(100dvh - 130px);
  opacity: 1;
}
#nv-chat-panel.nv-booking .nv-composer,
#nv-chat-panel.nv-booking .nv-foot,
#nv-chat-panel.nv-feedbacking .nv-composer,
#nv-chat-panel.nv-feedbacking .nv-foot {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border-top-color: transparent;
  pointer-events: none;
}
#nv-chat-panel.nv-booking #nv-chat-messages {
  padding: calc(16px + var(--nv-peaks, 34px)) 12px 12px; /* clear of the header's peaks */
}
/* A soft ring of light sweeps round the edge as it opens up */
#nv-chat-panel.nv-booking::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 95, 168, 0.45), inset 0 0 36px rgba(255, 95, 168, 0.14);
  animation: nv-booking-ring 1.3s ease-out forwards;
}
@keyframes nv-booking-ring {
  from { opacity: 0; }
  30%  { opacity: 1; }
  to   { opacity: 0.35; }
}

/* A tighter card, so nothing needs scrolling */
.nv-card .nv-card-close { top: 10px; right: 10px; }
.nv-card-body { gap: 6px; }
.nv-card-label { margin-top: 2px; gap: 5px; }
.nv-card-label-row { flex-direction: row; align-items: center; justify-content: space-between; }
.nv-week-nav { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.04em; }
.nv-week-name { min-width: 104px; text-align: center; font-size: 11px; text-transform: none; color: rgba(255, 209, 234, 0.8); white-space: nowrap; }
.nv-week-arrow {
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: #ffd1ea;
  border: 1px solid rgba(255, 95, 168, 0.35);
  border-radius: 50%;
  background: var(--nv-dust) 0 0 / 90px 90px, rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s, background-color 0.2s, opacity 0.2s;
}
.nv-week-arrow:hover:not(:disabled) { border-color: #ff5fa8; background-color: rgba(255, 95, 168, 0.12); }
.nv-week-arrow:disabled { opacity: 0.3; cursor: default; }
.nv-card-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 4px 0 2px;
  overflow: visible;
}
.nv-day { min-width: 0; padding: 6px 2px 5px; }
.nv-day-name { font-size: 9.5px; }
.nv-day-num { font-size: 17px; }
.nv-days-from-right { animation: nv-days-in-right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nv-days-from-left { animation: nv-days-in-left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes nv-days-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes nv-days-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.nv-card-times { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; min-height: 32px; }
.nv-time { padding: 6px 4px; font-size: 13px; }
.nv-time-loading { height: 16px; }
.nv-card-select, .nv-card-input { padding: 9px 11px; }
.nv-card-book { margin-top: 4px; padding: 12px 16px; }

/* Phones: already full screen, so booking mode only tucks things away */
@media (max-width: 480px), (max-height: 560px) {
  #nv-chat-panel.nv-booking {
    width: 100%;
    height: var(--nv-view-height, 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #nv-chat-panel.nv-booking::after, .nv-days-from-right, .nv-days-from-left { animation: none; }
}

/* ----- The scrollbar's trail (novabot.js): faint copies of the handle that fade away ----- */
.nv-scroll-trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.nv-scroll-ghost {
  position: absolute;
  width: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(208, 42, 125, 0.55), rgba(122, 31, 134, 0.45));
  box-shadow: 0 0 8px rgba(255, 95, 168, 0.35);
  animation: nv-ghost-fade 0.9s ease-out forwards;
}
@keyframes nv-ghost-fade {
  from { opacity: 0.4; transform: scaleX(1); }
  to   { opacity: 0; transform: scaleX(0.4); filter: blur(2px); }
}
@media (max-width: 480px), (max-height: 560px) {
  .nv-scroll-ghost { display: none; } /* phones hide the scrollbar until scrolling */
}

/* ----- Closing: folding down into the chat button (novabot.js foldAway) ----- */
#nv-chat-panel.nv-closing {
  pointer-events: none;
  transform-origin: calc(100% - 32px) 100%; /* towards the chat button */
  animation: nv-fold-away 0.34s cubic-bezier(0.4, 0, 0.9, 0.6) forwards;
}
/* Sinking softly back where it came from (no spinning or flying off) */
@keyframes nv-fold-away {
  from { opacity: 1; transform: translateX(var(--nv-shift, 0px)) scale(1); filter: none; }
  to   { opacity: 0; transform: translateX(var(--nv-shift, 0px)) translateY(14px) scale(0.94); filter: blur(3px); }
}
/* The chat button catching it: a ring of light and a little bounce */
#nv-chat-toggle.nv-caught {
  animation: nv-catch 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
#nv-chat-toggle.nv-caught::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(255, 95, 168, 0.6);
  box-shadow: 0 0 18px rgba(255, 95, 168, 0.45);
  animation: nv-catch-ring 0.85s ease-out forwards;
}
@keyframes nv-catch {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.14); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes nv-catch-ring {
  from { opacity: 1; transform: scale(0.9); }
  to   { opacity: 0; transform: scale(1.9); }
}
@media (max-width: 480px), (max-height: 560px) {
  /* Full screen on phones: fold down towards the bottom middle instead */
  #nv-chat-panel.nv-closing { transform-origin: 50% 100%; }
}

/* ----- "Book a session" centred in the top of the bottom panel: the same
   space above it (to the panel's edge) as below it (to the message box) ----- */
.nv-composer { padding-top: 14px; }
.nv-book { margin: 0 4px 14px; }

/* ----- Booking mode: the card sits in the middle of the chat, on its own ----- */
#nv-chat-panel.nv-booking #nv-chat-messages > :not(.nv-card) {
  display: none; /* the earlier messages step aside while booking (they're back afterwards) */
}
/* The card fills the whole inside of the chat until the booking is done or closed */
#nv-chat-panel.nv-booking #nv-chat-messages > .nv-card {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* It fills the chat, but its contents stay together as one block, centred */
#nv-chat-panel.nv-booking #nv-chat-messages > .nv-card { justify-content: center; }
#nv-chat-panel.nv-booking .nv-card-body {
  flex: 0 0 auto;
  gap: 14px;
}
#nv-chat-panel.nv-booking .nv-card-book { padding: 14px 16px; }
#nv-chat-panel.nv-booking .nv-card-done-box { flex: 1; justify-content: center; }
/* A little more room for everything now there's space */
#nv-chat-panel.nv-booking .nv-card-title { margin-bottom: 14px; font-size: 14px; }
#nv-chat-panel.nv-booking .nv-day { padding: 10px 2px 8px; }
#nv-chat-panel.nv-booking .nv-day-num { font-size: 20px; }
#nv-chat-panel.nv-booking .nv-time { padding: 9px 4px; font-size: 14px; }
#nv-chat-panel.nv-booking .nv-card-select,
#nv-chat-panel.nv-booking .nv-card-input { padding: 11px 12px; }
#nv-chat-panel.nv-booking .nv-card-label { margin-top: 6px; }

/* ----- The booking card, a little more beautiful ----- */
/* Stars that twinkle slowly across the card */
.nv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--nv-stars-dense) 0 0 / 120px 120px;
  opacity: 0.45;
  animation: nv-card-twinkle 7s ease-in-out infinite alternate, nv-card-stars-drift 60s linear infinite;
}
@keyframes nv-card-twinkle { from { opacity: 0.25; } to { opacity: 0.55; } }
@keyframes nv-card-stars-drift { to { background-position: 120px -120px; } }
/* A slow aurora drifting behind everything */
.nv-card-glow {
  inset: -30% -40% auto;
  height: 200px;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(255, 95, 168, 0.1), transparent 70%),
    radial-gradient(ellipse 50% 45% at 70% 60%, rgba(122, 31, 134, 0.16), transparent 70%);
  filter: blur(6px);
  animation: nv-aurora 14s ease-in-out infinite alternate;
}
@keyframes nv-aurora {
  from { transform: translateX(-10%) rotate(-3deg); opacity: 0.7; }
  to   { transform: translateX(10%) rotate(3deg); opacity: 1; }
}
/* The title glows softly, with the Novacane star either side */
.nv-card-title {
  background: linear-gradient(90deg, #e9bcd8, #fff, #e9bcd8);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nv-title-sheen 6s ease-in-out infinite;
}
.nv-card-title::before,
.nv-card-title::after {
  content: "✦";
  display: inline-block;
  margin: 0 10px;
  font-size: 10px;
  color: rgba(255, 150, 200, 0.7);
  -webkit-text-fill-color: rgba(255, 150, 200, 0.7);
  vertical-align: 2px;
  animation: nv-title-star 4s ease-in-out infinite;
}
.nv-card-title::after { animation-delay: -2s; }
@keyframes nv-title-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes nv-title-star { 0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
/* Booking mode: it opens up from the middle */
#nv-chat-panel.nv-booking .nv-card:not(.nv-card-done) {
  animation: nv-card-bloom 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.1) both, nv-card-edge 6s linear infinite;
}
@keyframes nv-card-bloom {
  from { opacity: 0; transform: scale(0.86); filter: blur(6px); }
  60%  { opacity: 1; filter: none; }
  to   { opacity: 1; transform: none; }
}
/* Each part of the card arrives one after another */
#nv-chat-panel.nv-booking .nv-card-body > * {
  animation: nv-rise-in 0.45s ease-out both;
}
#nv-chat-panel.nv-booking .nv-card-body > :nth-child(1) { animation-delay: 0.15s; }
#nv-chat-panel.nv-booking .nv-card-body > :nth-child(2),
#nv-chat-panel.nv-booking .nv-card-body > :nth-child(3) { animation-delay: 0.22s; }
#nv-chat-panel.nv-booking .nv-card-body > :nth-child(4),
#nv-chat-panel.nv-booking .nv-card-body > :nth-child(5) { animation-delay: 0.29s; }
#nv-chat-panel.nv-booking .nv-card-body > :nth-child(n + 6) { animation-delay: 0.36s; }
.nv-card-body, .nv-card-done-box, .nv-card-title { position: relative; z-index: 1; }
.nv-card .nv-feedback-close { position: absolute; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  #nv-chat-panel.nv-closing, #nv-chat-toggle.nv-caught, #nv-chat-toggle.nv-caught::after,
  .nv-card::before, .nv-card-glow, .nv-card-title, .nv-card-title::before, .nv-card-title::after,
  #nv-chat-panel.nv-booking .nv-card:not(.nv-card-done), #nv-chat-panel.nv-booking .nv-card-body > * { animation: none; }
}

.nv-card-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }


/* ===== Performance (looks the same, far less work for the browser) =====
   The glow round the window used to be an animated blur filter on the whole
   window, which re-blurred the entire chat every frame. It's now a separate
   layer behind the window that only moves and fades (done by the graphics
   card). Slow drifts update a few times a second instead of 60, which looks
   the same at their speed, and the message area and cards keep their own
   redraws to themselves. */
#nv-chat-panel {
  filter: none;
  animation: nv-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), nv-text-glow 6s steps(30) infinite;
}
.nv-panel-glow {
  position: fixed;
  right: 24px;
  bottom: 104px;
  z-index: 9998;
  width: 440px;
  height: 720px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  border-radius: 56px 56px 74px 56px;
  pointer-events: none;
  transform: translateX(var(--nv-shift, 0px));
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;
  animation: nv-glow-in 0.5s ease-out;
}
.nv-panel-glow::before,
.nv-panel-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  will-change: transform, opacity;
}
.nv-panel-glow::before {
  box-shadow: 0 0 110px rgba(158, 92, 200, 0.32);
  animation: nv-glow-a 18s ease-in-out infinite;
}
.nv-panel-glow::after {
  box-shadow: 0 0 130px rgba(208, 42, 125, 0.22);
  animation: nv-glow-b 18s ease-in-out infinite;
}
@keyframes nv-glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv-glow-a {
  0%, 100% { opacity: 1; transform: none; }
  37%      { opacity: 0.55; transform: translate(6px, -7px); }
  76%      { opacity: 0.85; transform: translate(7px, 0); }
}
@keyframes nv-glow-b {
  0%, 100% { opacity: 0.25; transform: none; }
  18%      { opacity: 0.9; transform: translate(-8px, 4px); }
  55%      { opacity: 1; transform: translate(0, 8px); }
}
/* The glow follows the window: hidden with it, small with it, big while booking */
#nv-chat-panel.nv-closed ~ .nv-panel-glow,
#nv-chat-panel.nv-waiting ~ .nv-panel-glow { display: none; }
#nv-chat-panel.nv-closing ~ .nv-panel-glow { opacity: 0; }
#nv-chat-panel.nv-small ~ .nv-panel-glow { height: var(--nv-small-height, 96px); }
#nv-chat-panel.nv-booking ~ .nv-panel-glow {
  width: 540px;
  height: calc(100vh - 130px);
  height: calc(100dvh - 130px);
}
@media (max-width: 480px), (max-height: 560px) {
  .nv-panel-glow { display: none; } /* full screen on phones: nothing to glow round */
}

/* Slow drifts: a few updates a second (they move too slowly to tell) */
.nv-header { animation: nv-drift-header 24s steps(96) infinite; }
.nv-book { animation: nv-drift-book 12s steps(60) infinite; }
#nv-chat-send { animation: nv-drift-send 12s steps(60) infinite; }
.nv-card { animation: nv-card-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15) both, nv-card-edge 6s steps(48) infinite; }
.nv-card-done { animation: nv-card-pop 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.3), nv-card-edge 3s steps(24) infinite; }
#nv-chat-panel.nv-booking .nv-card:not(.nv-card-done) {
  animation: nv-card-bloom 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.1) both, nv-card-edge 6s steps(48) infinite;
}
.nv-card::before {
  will-change: opacity;
  animation: nv-card-twinkle 7s ease-in-out infinite alternate, nv-card-stars-drift 60s steps(240) infinite;
}
.nv-card-title { animation: nv-title-sheen 6s steps(36) infinite; }
/* Moving layers the graphics card can handle on its own */
.nv-card-glow, .nv-card-title::before, .nv-card-title::after, .nv-scroll-ghost { will-change: transform, opacity; }
/* Redraws inside these stay inside them */
#nv-chat-messages { contain: content; }
.nv-card { contain: layout paint; }
.nv-composer, .nv-foot { contain: layout paint; }

@media (prefers-reduced-motion: reduce) {
  .nv-panel-glow, .nv-panel-glow::before, .nv-panel-glow::after,
  #nv-chat-panel, .nv-header, .nv-book, #nv-chat-send, .nv-card, .nv-card-done, .nv-card::before, .nv-card-title { animation: none; }
}


/* ===== Phones and tablets (touch screens): smooth, with the same look =====
   Touch devices have far less graphics power, so the effects that make them
   redraw constantly are swapped for still or graphics-card-only versions. */

/* The chat button's breathing glow: a layer that only fades (on every device),
   instead of an animated shadow that was redrawn 60 times a second on every page */
#nv-chat-toggle { animation: none; }
#nv-chat-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 8px rgba(158, 92, 200, 0.14), 0 0 40px rgba(176, 29, 104, 0.5);
  opacity: 0;
  will-change: opacity;
  animation: nv-breathe-glow 3.6s ease-in-out infinite;
}
#nv-chat-toggle.nv-playing::before { animation-duration: 1s; }
#nv-chat-toggle.nv-live::before { animation: none; opacity: 0; }
@keyframes nv-breathe-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@media (hover: none), (pointer: coarse) {
  /* Film grain is barely visible but slow for phones to draw: left out */
  #nv-chat { --nv-grain: none; }
  /* Always fully solid (no mouse to hover, and see-through costs extra) */
  #nv-chat-panel { opacity: 1; }
  /* The text glow stays, but still rather than slowly shifting */
  #nv-chat-panel { animation: nv-rise 0.2s ease-out; }
  /* Stars sit behind the messages instead of scrolling with them, so
     scrolling uses the phone's smooth fast path */
  #nv-chat-messages { background-attachment: scroll; }
  /* Slow gradient drifts and shimmers: held still */
  .nv-header, .nv-book, #nv-chat-send, .nv-title, #nv-chat-panel::before { animation: none; }
  .nv-card { animation: nv-card-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
  .nv-card-done { animation: nv-card-pop 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.3); }
  #nv-chat-panel.nv-booking .nv-card:not(.nv-card-done) { animation: nv-card-bloom 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.1) both; }
  .nv-card::before { animation: nv-card-twinkle 7s ease-in-out infinite alternate; }
  .nv-card-title { animation: none; }
  /* The aurora without the blur (blurring is the slowest thing for a phone) */
  .nv-card-glow { filter: none; animation: none; opacity: 0.8; }
  /* Touch screens hide the scrollbar until scrolling, so no trail */
  .nv-scroll-trail { display: none; }
  #nv-keep-closed[aria-checked="true"] .nv-sigil { animation: none; }
}


/* ===== Lite mode (novabot.js adds .nv-lite on Android and slower devices) =====
   Looks the same at a glance, but nothing makes the device redraw all the
   time: no glow behind text, solid header peaks, a still glow round the
   window, the window resizes instantly, and no extra twinkle/aurora layers. */
#nv-chat.nv-lite #nv-chat-panel,
#nv-chat.nv-lite #nv-chat-panel * { text-shadow: none; }
#nv-chat.nv-lite #nv-chat-panel {
  animation: nv-rise 0.2s ease-out;
  opacity: 1;
  box-shadow: 0 16px 44px rgba(113, 4, 57, 0.5), 0 0 40px rgba(158, 92, 200, 0.22);
  /* Moves and fades still animate; its size changes happen at once */
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
#nv-chat.nv-lite #nv-chat-panel::before,
#nv-chat.nv-lite .nv-panel-glow,
#nv-chat.nv-lite .nv-scroll-trail { display: none; }
/* Solid peaks; messages start below them */
#nv-chat.nv-lite .nv-header { -webkit-mask-image: none; mask-image: none; animation: none; }
#nv-chat.nv-lite #nv-chat-messages { margin-top: 0; padding-top: 14px; }
#nv-chat.nv-lite #nv-chat-panel.nv-booking #nv-chat-messages { padding: 14px 12px 12px; }
#nv-chat.nv-lite .nv-composer,
#nv-chat.nv-lite .nv-foot { transition: opacity 0.2s ease; }
/* Still versions of the slow drifts and shimmers */
#nv-chat.nv-lite .nv-book,
#nv-chat.nv-lite #nv-chat-send,
#nv-chat.nv-lite .nv-title,
#nv-chat.nv-lite .nv-title::after,
#nv-chat.nv-lite .nv-card-title,
#nv-chat.nv-lite .nv-card-title::before,
#nv-chat.nv-lite .nv-card-title::after { animation: none; }
#nv-chat.nv-lite { --nv-grain: none; }
/* Cards: the entrance stays; the extra layers go */
#nv-chat.nv-lite .nv-card::before,
#nv-chat.nv-lite .nv-card-glow { display: none; }
#nv-chat.nv-lite .nv-card { animation: nv-card-in 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.1) both; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); }
#nv-chat.nv-lite #nv-chat-panel.nv-booking .nv-card:not(.nv-card-done) { animation: nv-card-in 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.1) both; }
#nv-chat.nv-lite .nv-card-done { animation: none; }
#nv-chat.nv-lite #nv-chat-panel.nv-booking .nv-card-body > * { animation: none; }
#nv-chat.nv-lite #nv-chat-panel.nv-booking::after { animation: none; opacity: 0.35; }
/* Closing: the same fold into the button, without the blur */
#nv-chat.nv-lite #nv-chat-panel.nv-closing { animation-name: nv-fold-away-lite; }
@keyframes nv-fold-away-lite {
  from { opacity: 1; transform: translateX(var(--nv-shift, 0px)) scale(1) rotate(0deg); }
  to   { opacity: 0; transform: translateX(var(--nv-shift, 0px)) scale(0.08) rotate(14deg); }
}
/* The chat button: its glow still breathes (a cheap fade); the bars hold still */
#nv-chat.nv-lite #nv-chat-toggle .nv-wave rect { animation: none; transform: scaleY(0.5); }
#nv-chat.nv-lite #nv-chat-toggle.nv-live { box-shadow: 0 0 0 6px rgba(158, 92, 200, 0.18), 0 0 28px rgba(158, 92, 200, 0.45), 0 10px 30px rgba(0, 0, 0, 0.5); }

/* ----- Full screen on a phone: the page behind stays still (novabot.js lockPage) ----- */
html.nv-page-locked,
html.nv-page-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
/* Scrolling the chat never scrolls the page behind it */
#nv-chat-messages {
  overscroll-behavior: contain;
}

/* ----- The on-screen keyboard is up (novabot.js fitToScreen) ----- */
/* The glow rises with the window on bigger screens */
#nv-chat-panel.nv-keyboard ~ .nv-panel-glow {
  bottom: calc(var(--nv-keyboard, 0px) + 12px);
  max-height: calc(var(--nv-view-height, 100dvh) - 24px);
}
/* On phones there's only a little screen left: the header slims down and the
   extras under the message box fold away, so the conversation stays in view.
   They come back as soon as the keyboard goes. */
.nv-book,
.nv-tools {
  transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, margin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nv-header {
  transition: padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 480px), (max-height: 560px) {
  .nv-book { max-height: 80px; }
  .nv-tools { max-height: 80px; }
  #nv-chat-panel.nv-keyboard .nv-header {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  #nv-chat-panel.nv-keyboard .nv-subtitle {
    display: none;
  }
  #nv-chat-panel.nv-keyboard .nv-book,
  #nv-chat-panel.nv-keyboard .nv-tools,
  #nv-chat-panel.nv-keyboard .nv-foot {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

/* ===== Fitting everything in, on every screen ===== */

/* The cards inside the chat (booking, feedback) fit their boxes to their own
   width: the email gets a whole line when the card is narrow, and on the
   narrowest every box does, so nothing typed is cut off */
.nv-card {
  container-type: inline-size;
}
@container (max-width: 470px) {
  .nv-card-row { flex-wrap: wrap; }
  .nv-card-row > .nv-card-input[type="email"] { flex-basis: 100%; }
}
@container (max-width: 300px) {
  .nv-card-row > .nv-card-input { flex-basis: 100%; }
}

/* Tablets and computers: the window keeps its size for the booking card
   (everything else tucks away to make room), so it doesn't jump bigger */
@media (min-width: 481px) and (min-height: 561px) {
  #nv-chat-panel.nv-booking {
    width: 440px;
    height: 720px;
  }
  #nv-chat-panel.nv-booking ~ .nv-panel-glow {
    width: 440px;
    height: 720px;
  }
}

/* Small phones: the subtitle stays on one line and the tool buttons fit */
@media (max-width: 380px) {
  .nv-subtitle {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .nv-tools {
    gap: 4px;
  }
  .nv-tool {
    gap: 4px;
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* Short screens (a phone on its side, a small laptop): the header, the Book
   button, the tools and the footer all slim down so the conversation keeps
   most of the room */
@media (max-height: 520px) {
  .nv-header {
    padding-top: 10px;
    padding-bottom: 22px;
  }
  .nv-subtitle {
    display: none;
  }
  .nv-composer {
    padding-top: 8px;
  }
  .nv-book {
    height: 38px;
    margin-bottom: 8px;
  }
  .nv-tools {
    padding: 8px 0 2px;
  }
  .nv-tool {
    padding: 5px 10px;
  }
  .nv-foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    padding: 4px 18px calc(6px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 481px) and (max-height: 760px) {
  .nv-subtitle { margin-top: 4px; }
  .nv-foot { padding-top: 6px; padding-bottom: 10px; gap: 4px; }
  .nv-tools { padding-top: 10px; }
}

/* Nothing in the chat can push it sideways (e.g. focusing a box on a narrow phone) */
#nv-chat-panel {
  overflow: hidden;
  overflow: clip;
}
#nv-chat-messages {
  overflow-x: hidden;
}

/* The narrowest phones: the tool buttons drop their icons so the words fit */
@media (max-width: 360px) {
  .nv-tool svg {
    display: none;
  }
  .nv-tool {
    padding: 6px 9px;
  }
}

/* Wide but short (a phone on its side): Book a session and the tools share a
   row above the message box, leaving more room for the conversation */
@media (max-height: 520px) and (min-width: 600px) {
  .nv-composer {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "book tools" "input input";
    column-gap: 12px;
    align-items: center;
  }
  .nv-book { grid-area: book; }
  .nv-tools { grid-area: tools; padding: 0 0 8px; }
  .nv-input-row { grid-area: input; }
}

/* ----- Send: the same glowing pink-to-violet as "Book a session" (it was a near-black box: a
   dark layer covered its colours), the grain and specks kept, a soft glow round it ----- */
#nv-chat-send {
  color: #fff;
  background-image: var(--nv-grain), var(--nv-specks),
    linear-gradient(rgba(23, 14, 34, 0.18), rgba(23, 14, 34, 0.18)),
    linear-gradient(120deg, #c2407f 0%, #a01c6c 35%, #6e1f86 65%, #c2407f 100%);
  box-shadow: 0 4px 14px rgba(176, 29, 104, 0.38), inset 0 0 12px rgba(255, 170, 214, 0.12);
  text-shadow: 0 1px 6px rgba(60, 0, 40, 0.45);
}
#nv-chat-send:hover {
  background-image: var(--nv-grain), var(--nv-specks),
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    linear-gradient(120deg, #c2407f 0%, #a01c6c 35%, #6e1f86 65%, #c2407f 100%);
  box-shadow: 0 0 20px rgba(208, 42, 125, 0.6);
}

/* ----- Booking: the card fits the chat exactly. Its fields scroll inside it, and the Book
   button stays in sight at the bottom (it used to run past the chat's rounded bottom edge, and
   the right edge sat under the scrollbar) ----- */
#nv-chat-panel.nv-booking #nv-chat-messages {
  overflow: hidden;
  padding-bottom: 16px;
}
#nv-chat-panel.nv-booking #nv-chat-messages > .nv-card {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
}
#nv-chat-panel.nv-booking .nv-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -6px;
  padding: 2px 6px 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 95, 168, 0.45) transparent;
}
#nv-chat-panel.nv-booking .nv-card-body::-webkit-scrollbar { width: 6px; }
#nv-chat-panel.nv-booking .nv-card-body::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(255, 95, 168, 0.45); }
/* The buttons: under the fields, outside the scrolling part, one above the other */
.nv-card-foot { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; flex-shrink: 0; }
.nv-card-foot > .nv-card-book { margin: 0; }
#nv-chat-panel.nv-booking .nv-card-foot { padding-top: 12px; border-top: 1px solid rgba(255, 95, 168, 0.16); }
/* Clear of the chat's rounded bottom corners, so the card's whole border shows */
#nv-chat-panel.nv-booking #nv-chat-messages { padding-left: 14px; padding-right: 14px; padding-bottom: 26px; }
/* ----- Booking card: compact (it was spread out with big gaps), so it all fits at once ----- */
#nv-chat-panel.nv-booking .nv-card { padding: 12px 12px 12px; }
#nv-chat-panel.nv-booking .nv-card-title { margin-bottom: 8px; font-size: 13px; }
#nv-chat-panel.nv-booking .nv-card-body { gap: 8px; }
#nv-chat-panel.nv-booking .nv-card-section { gap: 5px; }
#nv-chat-panel.nv-booking .nv-card-label { margin-top: 0; }
#nv-chat-panel.nv-booking .nv-card-select,
#nv-chat-panel.nv-booking .nv-card-input { padding: 8px 11px; }
#nv-chat-panel.nv-booking .nv-day { padding: 5px 2px 4px; }
#nv-chat-panel.nv-booking .nv-day-num { font-size: 17px; }
#nv-chat-panel.nv-booking .nv-time { padding: 7px 4px; font-size: 13px; }
#nv-chat-panel.nv-booking .nv-card-foot { margin-top: 8px; padding-top: 8px; gap: 6px; }
#nv-chat-panel.nv-booking .nv-card-book { padding: 11px 14px; }
/* The card is as tall as what's in it (no empty gap above the buttons), and only shrinks, with
   its fields scrolling, when the chat is shorter than that */
#nv-chat-panel.nv-booking #nv-chat-messages > .nv-card { flex: 0 1 auto; }
#nv-chat-panel.nv-booking .nv-card-body { flex: 0 1 auto; }
/* ----- The Book button: still. No light sweeping across it, and the stars and grain don't slide
   when the pointer is on it: it just glows a little brighter ----- */
.nv-card-book::after { display: none; animation: none; }
.nv-card-book,
.nv-card-book:hover { background-position: 0 0, 0 0, 0 0; }
.nv-card-book { transition: transform 0.15s, filter 0.2s, box-shadow 0.2s; }
.nv-card-book:not(.nv-card-self):hover { filter: brightness(1.12); box-shadow: 0 0 18px rgba(208, 42, 125, 0.5); }
/* ----- Booking card: "Book your session" stays still (no shimmer sliding across it, no
   twinkling stars beside it) ----- */
.nv-card-title { animation: none; background-position: 50% 0; }
.nv-card-title::before,
.nv-card-title::after { animation: none; opacity: 0.8; }
/* ----- Booking: the whole card fits without scrolling. A slimmer header while booking, and
   a little less space round the card ----- */
#nv-chat-panel.nv-booking .nv-header { padding-top: 10px; padding-bottom: 22px; }
#nv-chat-panel.nv-booking #nv-chat-messages { padding-top: calc(8px + var(--nv-peaks, 34px)); padding-bottom: 18px; }
#nv-chat-panel.nv-booking .nv-card-section { gap: 4px; }
#nv-chat-panel.nv-booking .nv-card-body { gap: 7px; }
/* While booking on a computer or tablet the chat uses the window's full height (the chat button
   underneath steps aside meanwhile: the chat's own × still closes it), so the card fits */
@media (min-width: 521px) {
  #nv-chat-panel.nv-booking { bottom: 24px; height: calc(100vh - 48px); height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); }
  #nv-chat:has(#nv-chat-panel.nv-booking) #nv-chat-toggle { opacity: 0; pointer-events: none; }
}
/* While booking on a computer or tablet the chat is exactly as tall as the card needs (no big empty
   space under it), and never taller than the window: the card's fields only scroll if the window
   is shorter than the card */
@media (min-width: 521px) {
  #nv-chat-panel.nv-booking { height: auto; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
  #nv-chat-panel.nv-booking #nv-chat-messages { flex: 0 1 auto; min-height: 0; }
}
@media (min-width: 521px) {
  /* clear of the chat's big rounded bottom corners, with an even margin all round */
  #nv-chat-panel.nv-booking #nv-chat-messages { padding: calc(8px + var(--nv-peaks, 34px)) 16px 24px; }
}
/* Lite mode (some computers and Android) too: while booking, an even margin round the card and
   clear of the chat's big rounded bottom corners (lite's own tighter spacing let the corners
   cover the card's) */
@media (min-width: 521px) {
  #nv-chat.nv-lite #nv-chat-panel.nv-booking #nv-chat-messages { padding: 14px 16px 24px; }
}