/* Shared chat presentation for both public shells. */
.ask, .guide {
  --fs-base: calc(1rem / var(--host-scale, 1));
  --fs-display: clamp(calc(var(--fs-base) * 1.8), 4.8vw, calc(var(--fs-base) * 4.2));
  --fs-h2: clamp(calc(var(--fs-base) * 1.2), 2.1vw, calc(var(--fs-base) * 1.7));
  --fs-h3: calc(var(--fs-base) * 1.5);
  --fs-body: calc(var(--fs-base) * 1.375);
  --fs-body-sm: calc(var(--fs-base) * 1.125);
  --fs-label: calc(var(--fs-base) * 0.95);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
}


.ask, .guide { --line-dark: rgba(244,239,227,0.14); --z-chrome-panel: 10000; --ls-label: 0.2em; }
/* ── .ask button + guide panel (chat) ──────────────────── */
.ask {
  /* --shell-pad is half the dark surround above the ultrawide cap (see the
     "ultrawide cap" block in master.css). Without it the button floats in the
     empty surround, detached from the page. It is 0px below the cap. */
  position: fixed;
  right: calc(var(--shell-pad, 0px) + clamp(16px,3vw,32px));
  bottom: clamp(16px,3vw,28px);
  z-index: 230; display: inline-flex; align-items: center; gap: 11px;
  background: var(--gold); color: var(--ink); border: 0; cursor: pointer;
  font: inherit; font-size: calc(var(--fs-base) * 0.84); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 17px 26px; border-radius: 999px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.45);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ask::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255,217,0,0.5); animation: askring 2.8s var(--ease) infinite; pointer-events: none;
}
@keyframes askring { 0% { box-shadow: 0 0 0 0 rgba(255,217,0,0.5); } 70%,100% { box-shadow: 0 0 0 20px rgba(255,217,0,0); } }
.ask:hover { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(0,0,0,0.5); }
/* De FAB wijkt voor de belangrijkste knop van de pagina.
   Waarom: op 375px dekte hij de rechteronderhoek van "Boeking aanvragen" af —
   precies waar een rechterduim landt. De knop bleef in het midden klikbaar, dus
   niets leek stuk; je mist alleen aanvragen. De .foot-padding hieronder houdt de
   LAATSTE sectie vrij, maar een knop midden in een lang formulier bereikt hij
   niet. Opt-in per pagina via [data-fab-guard], zodat de rest van de site niets
   merkt. */
.ask.is-yielding {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}
.ask .ask-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: translateY(-3px); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.4; } }

.guide { position: fixed; inset: 0; z-index: calc(var(--z-chrome-panel) + 40); visibility: hidden; transition: visibility 0s 0.5s; }
.guide.is-open { visibility: visible; transition: visibility 0s 0s; }
.guide-backdrop { position: absolute; inset: 0; background: rgba(15,14,11,0.65); opacity: 0; transition: opacity 0.4s; }
.guide.is-open .guide-backdrop { opacity: 1; }
.guide-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(480px,100vw);
  background: var(--ink-2); border-left: 1px solid var(--line-dark);
  display: flex; flex-direction: column; transform: translateX(102%); transition: transform 0.5s var(--ease);
}
.guide.is-open .guide-panel { transform: none; }
.guide-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line-dark); }
.guide-head img { height: 36px; width: auto; display: block; }
.guide-head .guide-title { font-family: var(--sans); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: 0.04em; }
.guide-head .guide-close {
  margin-left: auto; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(244,239,227,0.66); padding: 8px 4px; min-height: 44px;
  display: inline-flex; align-items: center; transition: color 0.2s var(--ease);
}
.guide-head .guide-close:hover { color: var(--gold); }
.guide-thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px;
  display: flex; flex-direction: column; gap: 22px;
  scrollbar-width: thin; scrollbar-color: rgba(244,239,227,0.2) transparent;
}
/* Screen-reader-only announcer for the guide chat: carries just the newest reply, so a
   re-render of the thread no longer re-announces the whole conversation. */
.guide-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* text-wrap: pretty — this intro is the one paragraph in the panel that always
   wraps, and its last line was landing as a single orphan word. */
.guide-empty { margin: auto 0; text-align: center; color: rgba(244,239,227,0.55); font-size: var(--fs-body); line-height: 1.7; padding: 0 12px; text-wrap: pretty; }
.guide-empty a { color: var(--cream); transition: color 0.2s var(--ease); }
.guide-empty a:hover, .guide-empty a:focus-visible { color: var(--gold); }
.g-msg { display: grid; gap: 8px; }
.g-meta { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(244,239,227,0.55); }
.g-msg.is-user .g-text { font-style: italic; font-size: var(--fs-body); line-height: 1.45; color: var(--cream); }
.g-msg.is-assistant .g-text { font-size: var(--fs-body); line-height: 1.7; color: rgba(244,239,227,0.85); }
.g-text p { margin: 0; } .g-text p + p { margin-top: 8px; }
.g-dots { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; min-height: 22px; }
.g-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cream); opacity: 0.18; transform: scale(0.8);
  animation: gdot 1.4s ease-in-out infinite;
}
.g-dots span:nth-child(2) { animation-delay: 0.28s; }
.g-dots span:nth-child(3) { animation-delay: 0.56s; }
/* Sequential count-up: each dot pops in bright yellow, settles to white,
   then dims — staggered so you read . then .. then ... and back. */
@keyframes gdot {
  0%, 72%, 100% { opacity: 0.18; transform: scale(0.8);  background: var(--cream); }
  18%           { opacity: 1;    transform: scale(1.25); background: var(--gold);  }
  40%           { opacity: 0.95; transform: scale(1);    background: var(--cream); }
}
.g-cards { display: grid; }
.g-card {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--line-dark);
  padding: 14px 0; cursor: pointer; font: inherit; color: var(--cream);
  transition: padding-left 0.3s var(--ease), color 0.25s;
}
.g-card:last-child { border-bottom: 1px solid var(--line-dark); }
.g-card:hover { color: var(--gold); padding-left: 10px; }
.g-card-title { font-weight: 600; font-size: var(--fs-body); display: block; }
.g-card-desc { display: block; font-size: var(--fs-body-sm); color: rgba(244,239,227,0.55); margin-top: 3px; }
.g-card-arrow { font-family: var(--sans); font-size: var(--fs-body); flex: 0 0 auto; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip {
  background: none; border: 1px solid var(--line-dark); color: rgba(244,239,227,0.8);
  cursor: pointer; font: inherit; font-size: var(--fs-body-sm); letter-spacing: 0.06em;
  padding: 9px 16px; transition: border-color 0.25s, color 0.25s;
}
.g-chip:hover { border-color: var(--gold); color: var(--gold); }
.g-chip.is-selected { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.guide-suggest { padding: 0 22px 18px; }
.guide-form { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line-dark); padding: 6px 22px; }
.guide-form input {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none;
  color: var(--cream); font: inherit; font-size: max(16px, var(--fs-body-sm)); padding: 16px 0;
}
.guide-form input::placeholder { color: rgba(244,239,227,0.55); }
/* The send row is a hairline, not a boxed field, so the chrome's 4px-offset ring
   painted a yellow rectangle across the whole row — the thing that made the panel
   read as broken. Same affordance, fitted to the line the caret sits on. */
.guide-form input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 0 var(--gold); }

.guide-form button {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-body-sm);
  font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--gold); padding: 12px 0; white-space: nowrap;
}
.guide-form button:disabled { opacity: 0.5; cursor: wait; }
/* Send is a real button in the chat panel and had no hover state. */
.guide-form button:not(:disabled) { transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.guide-form button:not(:disabled):hover,
.guide-form button:not(:disabled):focus-visible { color: var(--cream); transform: translateX(2px); }


.guide :focus, .ask:focus { outline: none; }
.guide :focus-visible, .ask:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.guide-form input:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .guide, .guide-backdrop, .guide-panel { transition: none; }
}
@media (max-width: 600px) {
  .ask { right: 14px; bottom: 14px; gap: 8px; font-size: calc(var(--fs-base) * 0.72); letter-spacing: 0.1em; padding: 13px 18px; }
  @keyframes askring { 0% { box-shadow: 0 0 0 0 rgba(255,217,0,0.5); } 70%,100% { box-shadow: 0 0 0 12px rgba(255,217,0,0); } }
}