/* Pack Lightly Chatbot widget. Brand tokens: teal #124F53, orange #F29B07, cream #FCEACF.
   Fonts: Bricolage Grotesque (display), Poppins (UI), Karla (body). Loaded site-wide by the theme;
   listed here as families with safe fallbacks. Prefix: .plcb- */

:root {
  --plcb-teal: #124F53;
  --plcb-teal-700: #0d3d40;
  --plcb-orange: #F29B07;
  --plcb-orange-600: #d98905;
  --plcb-cream: #FCEACF;
  --plcb-ink: #1c2b2c;
  --plcb-muted: #5a6b6c;
  --plcb-line: #e4ded2;
  --plcb-radius: 16px;
}

#plcb-root, #plcb-root * { box-sizing: border-box; }
/* Lock a light scheme so a device/browser in dark mode does not auto-invert the widget's form
   controls (input value + placeholder) to a near-white that vanishes on the white composer. */
#plcb-root { color-scheme: light; }

/* ---- launcher ---- */
.plcb-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--plcb-teal);
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(18, 79, 83, 0.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.plcb-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18, 79, 83, 0.34); }
.plcb-launcher:focus-visible { outline: 3px solid var(--plcb-orange); outline-offset: 2px; }
.plcb-launcher__icon { flex: 0 0 auto; }
.plcb-launcher__label { white-space: nowrap; }

/* ---- launcher A/B-varianten ----------------------------------------------------------------
   Drie varianten, elk een eigen hypothese over waarom er weinig geopend wordt. De variant staat als
   data-attribuut op de root, zodat CSS beslist en de JS alleen het label en de telemetrie regelt.

   A "control"  : teal pil, "Ask Pack Lightly" (de huidige knop, de nulmeting).
   B "value"    : oranje pil met een concrete belofte ("Plan your trip"). Hypothese: de bezoeker
                  klikt niet omdat de knop vraagt om een handeling zonder te zeggen wat het oplevert,
                  en omdat teal op teal wegvalt. Oranje is het merk-accent voor de primaire actie.
   C "prompt"   : teal pil met een voorbeeldvraag ("Best time to visit Japan?"). Hypothese: mensen
                  weten niet WAT ze kunnen vragen; een echte vraag laat de mogelijkheid zien.

   De knop blijft in alle varianten dezelfde vorm, positie en hitbox: alleen kleur en tekst
   verschillen, anders meet de test twee dingen tegelijk. */
/* Variant B blijft teal met een oranje rand in plaats van een oranje vlak. Reden: de hero draagt al
   een oranje primaire CTA ("Explore destinations"), en twee volvlak-oranje knoppen in een scherm
   breken de brand-regel van een accent per frame: de bezoeker ziet dan twee gelijkwaardige primaire
   acties. De rand geeft de knop wel het accent mee zonder met de hero te concurreren.
   Gemeten op de live homepage voordat dit werd bijgesteld. */
#plcb-root[data-variant="value"] .plcb-launcher {
  background: var(--plcb-teal);
  color: #fff;
  box-shadow: 0 8px 24px rgba(18, 79, 83, 0.28), 0 0 0 2px var(--plcb-orange) inset;
}
#plcb-root[data-variant="value"] .plcb-launcher:hover {
  background: var(--plcb-teal-700);
  box-shadow: 0 12px 30px rgba(18, 79, 83, 0.34), 0 0 0 2px var(--plcb-orange) inset;
}
#plcb-root[data-variant="value"] .plcb-launcher__icon { color: var(--plcb-orange); }
#plcb-root[data-variant="prompt"] .plcb-launcher {
  /* Een vraag leest als tekst, niet als knop: iets rustiger en met ruimte voor meer woorden. */
  font-weight: 500;
  max-width: min(78vw, 320px);
}
#plcb-root[data-variant="prompt"] .plcb-launcher__label {
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

/* ---- attention-nudge ------------------------------------------------------------------------
   Een korte puls die de knop EEN keer aanstipt nadat de bezoeker even op de pagina is. Bewust geen
   doorlopende animatie: dat leest als een advertentie en gaat irriteren op elke pagina. Drie pulsen,
   dan stil, en nooit meer in dezelfde sessie (de JS zet de klasse maar een keer).

   De ring is een ::after zodat de knop zelf niet van grootte verandert (geen layout-shift), en de
   schaal blijft klein: hij trekt de blik, hij springt niet. */
.plcb-launcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}
.plcb-launcher { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .plcb-nudge .plcb-launcher::after {
    animation: plcb-ring 1.6s ease-out 3;
    box-shadow: 0 0 0 0 rgba(242, 155, 7, 0.55);
  }
  .plcb-nudge .plcb-launcher {
    animation: plcb-tilt 1.6s ease-out 3;
  }
}
@keyframes plcb-ring {
  0%   { opacity: .9; box-shadow: 0 0 0 0 rgba(242, 155, 7, 0.55); }
  70%  { opacity: 0;  box-shadow: 0 0 0 14px rgba(242, 155, 7, 0); }
  100% { opacity: 0;  box-shadow: 0 0 0 0 rgba(242, 155, 7, 0); }
}
@keyframes plcb-tilt {
  0%, 100% { transform: none; }
  15% { transform: translateY(-3px) rotate(-2deg); }
  30% { transform: translateY(0) rotate(1.5deg); }
  45% { transform: translateY(-1px) rotate(0deg); }
}

/* Het teaser-bubbeltje: een korte zin naast de knop die zegt wat er nieuw is. Verschijnt met de
   nudge mee, verdwijnt bij de eerste klik of na een tik ernaast. Cream met teal tekst, zodat het bij
   het merk hoort en niet als systeemmelding leest. */
.plcb-teaser {
  /* #plcb-root is een smalle fixed container (op mobiel 56px, de breedte van de ronde knop), dus een
     `max-width` alleen wordt door die ouder afgeknepen: de tekst brak af tot een kolom van een woord
     per regel. `width` + `right: 0` maakt het bubbeltje zo breed als het nodig heeft, links uitlopend
     vanaf de knop. Gemeten op 420px voordat dit gefixt was. */
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: min(72vw, 260px);
  padding: 10px 30px 10px 14px;
  border-radius: 14px;
  background: var(--plcb-cream);
  color: var(--plcb-ink);
  font-family: "Karla", Georgia, serif;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 10px 28px rgba(18, 79, 83, 0.18);
  cursor: pointer;
  /* Boven de pagina-inhoud: het bubbeltje zweeft over de sectie eronder, dus het moet volledig
     dekkend zijn en niet half door de tekst heen lezen. */
  z-index: 1;
  opacity: 1;
}
.plcb-teaser::after {
  /* Puntje richting de knop, zodat het bubbeltje bij de launcher hoort en niet zweeft. */
  content: "";
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--plcb-cream);
  transform: rotate(45deg);
}
.plcb-teaser__close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: 0;
  background: transparent;
  color: var(--plcb-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.plcb-teaser__close:hover { color: var(--plcb-ink); }
@media (prefers-reduced-motion: no-preference) {
  /* `backwards` houdt de begin-staat vast tot de animatie start, `forwards` de eindstaat daarna:
     zonder beide flitst het bubbeltje half-transparant in beeld over de tekst eronder. */
  .plcb-teaser { animation: plcb-teaser-in .32s cubic-bezier(.32,.72,0,1) both; }
}
@keyframes plcb-teaser-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---- panel ---- */
.plcb-panel {
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 40px);
  background: #fff;
  border: 1px solid var(--plcb-line);
  border-radius: var(--plcb-radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(18, 79, 83, 0.28);
  animation: plcb-pop .18s ease;
}
@keyframes plcb-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.plcb-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  background: var(--plcb-teal);
  color: #fff;
}
.plcb-panel__titles { min-width: 0; }
.plcb-panel__title {
  margin: 0;
  font-family: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Explicit white: the widget relies on inheriting #fff from the teal header, but the theme's global
     h2 { color: <brand teal> } beats inheritance, rendering the title teal-on-teal (invisible). */
  color: #fff;
}
.plcb-panel__subtitle {
  margin: 4px 0 0;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}
.plcb-panel__close {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.plcb-panel__close:hover { background: rgba(255, 255, 255, 0.22); }
.plcb-panel__close:focus-visible { outline: 2px solid var(--plcb-orange); outline-offset: 2px; }

/* ---- messages ---- */
.plcb-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(180deg, #fffdf9 0%, var(--plcb-cream) 220%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plcb-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.plcb-msg--user { align-items: flex-end; }
.plcb-msg--bot { align-items: flex-start; }
.plcb-msg--in { animation: plcb-fade .2s ease; }
@keyframes plcb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.plcb-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--plcb-ink);
  word-wrap: break-word;
}
.plcb-msg--user .plcb-bubble {
  background: var(--plcb-teal);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.plcb-msg--bot .plcb-bubble {
  background: #fff;
  border: 1px solid var(--plcb-line);
  border-bottom-left-radius: 4px;
}

/* markdown inside a bot bubble (bold / paragraphs / bullet lists) */
.plcb-bubble strong { font-weight: 700; color: var(--plcb-teal); }
.plcb-md-p { margin: 0 0 8px; }
.plcb-md-p:last-child { margin-bottom: 0; }
.plcb-md-ul { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
.plcb-md-ul:last-child { margin-bottom: 0; }
.plcb-md-ul li { margin: 2px 0; }
/* inline page links woven into the answer text: teal, underlined so they read as links in running prose */
.plcb-md-a { color: var(--plcb-teal); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.plcb-md-a:hover { text-decoration-thickness: 2px; }

/* grounded links */
.plcb-links { display: flex; flex-direction: column; gap: 6px; width: 88%; }
.plcb-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--plcb-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.plcb-link:hover { border-color: var(--plcb-teal); transform: translateX(2px); }
.plcb-link__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--plcb-teal);
  line-height: 1.25;
}
.plcb-link__go {
  flex: 0 0 auto;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--plcb-orange);
  white-space: nowrap;
}

/* grounded images */
.plcb-imgs { display: flex; gap: 8px; width: 88%; }
.plcb-img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--plcb-line);
}

/* suggestions */
.plcb-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.plcb-suggestion {
  padding: 8px 12px;
  border: 1px solid var(--plcb-line);
  border-radius: 999px;
  background: #fff;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 13px;
  color: var(--plcb-teal);
  -webkit-text-fill-color: var(--plcb-teal);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.plcb-suggestion:hover { background: var(--plcb-cream); border-color: var(--plcb-orange); }

/* typing indicator */
.plcb-typing .plcb-bubble { display: inline-flex; gap: 4px; padding: 12px 14px; }
.plcb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--plcb-muted); animation: plcb-blink 1.2s infinite; }
.plcb-dot:nth-child(2) { animation-delay: .2s; }
.plcb-dot:nth-child(3) { animation-delay: .4s; }

/* Status-label: wat de bot NU aan het opzoeken is (klimaatcijfers, tickets, een wisselkoers). Staat
   in de plek van de drie stipjes tot het eerste woord van het antwoord binnen is. Het label komt van
   de server en beschrijft een echte fetch, dus het is nooit nep-voortgang. */
.plcb-typing .plcb-bubble:has(.plcb-status-text) { align-items: center; }
.plcb-status-text { color: var(--plcb-muted); font-size: 13px; line-height: 1.3; }
.plcb-status-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
@keyframes plcb-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ---- composer ---- */
.plcb-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--plcb-line);
  background: #fff;
}
.plcb-composer__input {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--plcb-line);
  border-radius: 12px;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--plcb-ink);
  -webkit-text-fill-color: var(--plcb-ink);
  background: #fff;
}
.plcb-composer__input::placeholder { color: var(--plcb-muted); -webkit-text-fill-color: var(--plcb-muted); opacity: 1; }
.plcb-composer__input:focus { outline: none; border-color: var(--plcb-teal); box-shadow: 0 0 0 3px rgba(18, 79, 83, 0.12); }
.plcb-composer__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--plcb-orange);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.plcb-composer__send:hover { background: var(--plcb-orange-600); }
.plcb-composer__send:active { transform: scale(.94); }
.plcb-composer__send:disabled { background: #cbd2d2; cursor: default; }
.plcb-composer__send:focus-visible { outline: 3px solid var(--plcb-teal); outline-offset: 2px; }
/* The paper-plane SVG is a flex child with no flex-basis guard; the theme's global svg sizing collapses
   it to width:0 (invisible glyph on the orange button). Pin its size like the launcher icon does. */
.plcb-composer__send svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: #fff; }

/* ---- mobile: FAB launcher + bottom sheet ---- */
@media (max-width: 640px) {
  #plcb-root { right: 16px; bottom: 16px; left: auto; }
  #plcb-root.plcb-open { right: 0; bottom: 0; left: 0; }
  /* Compact icon-only round FAB anchored bottom-right (the labelled pill is desktop-only). */
  .plcb-launcher { width: 56px; height: 56px; padding: 0; border-radius: 50%; justify-content: center; }
  .plcb-launcher__label { display: none; }
  /* Op mobiel toont de knop geen tekst, dus daar zou een copy-variant onzichtbaar zijn en meet de
     A/B-test alleen kleur. De teaser draagt op mobiel de boodschap: hij verschijnt eerder en blijft
     langer staan dan op desktop, waar het label het werk al doet. */
  #plcb-root[data-variant="prompt"] .plcb-launcher { max-width: none; }
  .plcb-teaser { width: max-content; max-width: min(78vw, 270px); font-size: 14px; }
  .plcb-launcher__icon { width: 26px; height: 26px; }
  .plcb-panel {
    width: 100%;
    max-width: 100%;
    height: 82vh;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    /* Bottom-sheet slide-up instead of the desktop pop (translate+scale), which reads as a jump on mobile. */
    animation: plcb-sheet .26s cubic-bezier(.32, .72, 0, 1);
  }
}
@keyframes plcb-sheet { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .plcb-launcher, .plcb-panel, .plcb-msg--in, .plcb-dot, .plcb-link, .plcb-teaser,
  .plcb-launcher::after { animation: none !important; transition: none !important; }
  /* De nudge is puur motion: zonder animatie blijft alleen het teaser-bubbeltje over, dat de
     boodschap ook stilstaand overbrengt. */
  .plcb-nudge .plcb-launcher { transform: none !important; }
}

/* ---- CTA and offer chips ---- */
.plcb-ctas, .plcb-offers { display: flex; flex-wrap: wrap; gap: 8px; width: 88%; }
.plcb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--plcb-teal);
  color: #fff;
  text-decoration: none;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
}
.plcb-cta:hover { background: var(--plcb-teal-700); }
.plcb-cta--offer { background: var(--plcb-orange); color: #1a1a1a; }
.plcb-cta--offer:hover { background: var(--plcb-orange-600); }
/* Lock the button text color past the theme's global `a { color }` (which repainted the label the same
   orange as the button = unreadable). Force color + -webkit-text-fill-color; label/tag inherit it. */
.plcb-cta { color: #fff !important; }
.plcb-cta--offer { color: #1a1a1a !important; }
.plcb-cta, .plcb-cta__label, .plcb-cta__tag { -webkit-text-fill-color: currentColor; }
.plcb-cta__label { color: inherit; font-weight: 600; }
.plcb-cta__tag {
  font-family: "Karla", system-ui, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: inherit;
  opacity: .75;
  font-weight: 700;
}

/* ---- feedback thumbs ---- */
.plcb-msg__foot { display: flex; gap: 6px; margin-top: 2px; }
.plcb-thumb {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  opacity: .55;
  padding: 2px 4px;
  transition: opacity .15s ease;
}
.plcb-thumb:hover { opacity: 1; }
.plcb-thumb[disabled] { cursor: default; }

/* Review-verzoek: een rustige regel onder het gesprek, geen pop-up. Verschijnt hoogstens een keer
   per sessie en alleen na een gesprek van een paar beurten. Teal is de merkkleur, de knop blijft
   bewust bescheiden: dit is een vraag, geen conversie-CTA. */
.plcb-review {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 2px; padding: 10px 12px;
  background: var(--plcb-cream, #FCEACF); border-radius: 12px;
}
.plcb-review-text { flex: 1 1 auto; font-size: 13px; line-height: 1.35; color: var(--plcb-ink, #124F53); }
.plcb-review-cta {
  flex: 0 0 auto; font-size: 13px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--plcb-teal, #124F53);
  padding: 7px 12px; border-radius: 999px;
}
.plcb-review-cta:hover, .plcb-review-cta:focus-visible { opacity: .9; text-decoration: none; }
.plcb-review-dismiss {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 6px; color: var(--plcb-muted);
}
.plcb-review-dismiss:hover { color: var(--plcb-ink, #124F53); }