/* TSA Chatbot — in de stijl van thesleepingagency.com (navy #002134 + geel #F8E801, Poppins). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   VERBERGEN MOET WINNEN.
   Dit stond er niet, en dat was de hele storing: `.tsa-cb-panel { display:flex }`
   is een class-regel en die verslaat het ingebouwde `[hidden] { display:none }`
   van de browser. Het paneel stond dus ALTIJD open — leeg, want de begroeting
   wordt pas geplaatst als je 'm echt opent — en op de kruisknop drukken deed
   niets, want `hidden = true` werd genegeerd. Zelfde probleem met het
   invoerveld tijdens de offerte-flow.
   ───────────────────────────────────────────────────────────────────────── */
.tsa-cb [hidden],
.tsa-cb[hidden] { display: none !important; }

/* Een WordPress-thema stylet vaak élke input, textarea en button op de pagina.
   De widget draait daarom in een shadow root, maar dit blijft staan voor het
   geval een browser dat niet ondersteunt. */
.tsa-cb, .tsa-cb *, .tsa-cb *::before, .tsa-cb *::after { box-sizing: border-box; }
.tsa-cb button, .tsa-cb input, .tsa-cb textarea {
  margin: 0; min-height: 0; min-width: 0; max-width: none; letter-spacing: normal; text-transform: none;
}

.tsa-cb {
  --navy: #002134;
  --navy-2: #0e3450;
  /* Exact het geel van thesleepingagency.com. De hub gebruikt intern #F8E801;
     deze widget staat op de site zelf, dus die volgt de site. */
  --yellow: #F9ED1A;
  --ink: #eaf1f7;
  --muted: #9db4c7;
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
}

/* Launcher */
.tsa-cb-launch {
  width: 56px; height: 56px; border: none; border-radius: 50%;
  background: var(--yellow); color: var(--navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 33, 52, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tsa-cb-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 33, 52, .45); }
/* Staat het venster open, dan is de bubbel overbodig — hij stond er eerst
   half onder te bungelen naast een venster dat al open was. */
.tsa-cb.is-open .tsa-cb-launch { display: none; }

/* Teaser-wolkje */
.tsa-cb-teaser {
  position: absolute; right: 0; bottom: 72px; width: 270px; max-width: calc(100vw - 40px);
  background: #fff; color: var(--navy); border-radius: 18px 18px 6px 18px;
  padding: 14px 16px 12px; box-shadow: 0 16px 40px rgba(0, 33, 52, .28); cursor: pointer;
  animation: tsa-cb-pop .25s ease;
}
@keyframes tsa-cb-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.tsa-cb-teaser-x { position: absolute; top: 6px; right: 8px; border: none; background: none; font-size: 18px; line-height: 1; color: #7c92a5; cursor: pointer; }
.tsa-cb-teaser-txt { font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; padding-right: 10px; }
.tsa-cb-teaser-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tsa-cb-tchip {
  border: none; background: var(--yellow); color: var(--navy);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.tsa-cb-tchip:hover { filter: brightness(.95); }
.tsa-cb-tchip-ghost { background: #fff; color: var(--navy); border: 1px solid #b6cbdc; }

/* Panel */
.tsa-cb-panel {
  position: absolute; right: 0; bottom: 0;
  width: 380px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 60px);
  background: var(--navy); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 33, 52, .45);
  animation: tsa-cb-pop .18s ease;
}
.tsa-cb-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tsa-cb-logo { display: inline-flex; }
.tsa-cb-title { color: #fff; font-weight: 600; font-size: 15px; flex: 1; }
.tsa-cb-close { background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .75; }
.tsa-cb-close:hover { opacity: 1; }

.tsa-cb-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tsa-cb-msg { max-width: 84%; padding: 10px 13px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.tsa-cb-bot { align-self: flex-start; background: var(--navy-2); color: var(--ink); border-radius: 14px 14px 14px 4px; }
.tsa-cb-bot strong { color: #fff; }
.tsa-cb-user { align-self: flex-end; background: var(--yellow); color: var(--navy); border-radius: 14px 14px 4px 14px; font-weight: 500; white-space: pre-wrap; }

.tsa-cb-typing { display: flex; gap: 4px; align-items: center; }
.tsa-cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: tsa-cb-blink 1.2s infinite both; }
.tsa-cb-typing span:nth-child(2) { animation-delay: .2s; }
.tsa-cb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes tsa-cb-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* Quick-reply chips onder een bericht */
.tsa-cb-chips { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; }
.tsa-cb-chip {
  border: none; background: var(--yellow); color: var(--navy);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.tsa-cb-chip:hover { filter: brightness(.95); }

/* Invoer */
.tsa-cb-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.tsa-cb-input {
  flex: 1 1 auto; width: 100%; resize: none;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; box-shadow: none;
  padding: 10px 12px; font-size: 14px; font-family: inherit; line-height: 1.4;
  height: 42px; min-height: 42px; max-height: 120px;
  background: #0b2c44; color: #fff;
}
.tsa-cb-input::placeholder { color: var(--muted); }
.tsa-cb-input:focus { outline: none; border-color: var(--yellow); }
.tsa-cb-send {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--yellow); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tsa-cb-send:disabled { opacity: .5; cursor: default; }

/* Offerte-formulier in de chat */
.tsa-cb-offerform { display: flex; flex-direction: column; gap: 7px; background: rgba(255, 255, 255, .06); padding: 12px; border-radius: 12px; align-self: stretch; }
.tsa-cb-offerform input, .tsa-cb-offerform textarea {
  border: 1px solid #d3d9e3; border-radius: 9px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: #fff; color: var(--navy);
}
.tsa-cb-offerform input:focus, .tsa-cb-offerform textarea:focus { outline: none; border-color: var(--navy); }
.tsa-cb-offerform button { border: none; border-radius: 9px; padding: 9px; font-size: 14px; font-weight: 700; background: var(--yellow); color: var(--navy); cursor: pointer; }
.tsa-cb-offerform button:disabled { opacity: .6; }
.tsa-cb-offermsg { margin: 2px 0 0; font-size: 12px; color: #ffd0d0; }
.tsa-cb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Intake-flow: overslaan-knop onder een niet-verplichte stap */
.tsa-cb-skip { background: none; border: none; padding: 2px 0; font-size: 12px; color: rgba(255, 255, 255, .55); cursor: pointer; align-self: flex-start; }
.tsa-cb-skip:hover { color: rgba(255, 255, 255, .85); }

@media (max-width: 480px) {
  .tsa-cb { right: 12px; bottom: 12px; }
  /* Bubbel is verborgen zodra het venster open is, dus die hoeft er niet meer
     onder te passen: het venster mag gewoon de hoogte hebben. */
  .tsa-cb-panel { width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); bottom: 0; }
  .tsa-cb-teaser { bottom: 68px; }
}

/* AI-mededeling (AI-verordening art. 50): de bezoeker moet meteen weten dat
   hij met een AI praat, niet met een medewerker. */
.tsa-cb-ai-note a { color: #0b6ea8; }
.tsa-cb-ai-note {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #4a5a67;
  background: #f4f6f8;
  border-bottom: 1px solid #e3e8ec;
}

/* Winkelwagen die de chatbot klaarzette in de webshop. */
.tsa-cb-mand {
  margin: 6px 14px 10px;
  padding: 10px 12px;
  border: 1px solid #e3e8ec;
  border-radius: 10px;
  background: #fbfcfd;
}
.tsa-cb-mand-lijst {
  font-size: 13px;
  line-height: 1.45;
  color: #4a5a67;
  margin-bottom: 8px;
}
.tsa-cb-mand-knop {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #002134;
  color: #F8E801;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.tsa-cb-mand-knop:hover { background: #01304c; }