/* ==========================================================================
   Offerte-assistent

   Staat linksonder. Rechtsonder is bezet: daar zit de knop "terug naar
   boven" (.ovw-omhoog), en op smal scherm loopt onderaan de belbalk met
   Bellen en WhatsApp (.ovw-belbalk, z-index 80, ruim 3,6 rem hoog). Die
   twee mogen nooit bedekt raken — bellen is de belangrijkste conversie en
   moet altijd bereikbaar blijven.

   Kleuren komen uit assets/css/site.css; hier staat geen enkele losse
   hexwaarde die daar niet vandaan komt, op WhatsApp-groen na.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zwevende knop
   -------------------------------------------------------------------------- */
.ovw-cb-knop {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 75;

  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.4rem;

  background: var(--ovw-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ovw-schaduw-h);

  transition: transform .3s var(--ovw-soepel), background-color .25s, box-shadow .3s;
}
.ovw-cb-knop:hover {
  background: var(--ovw-accent-alt);
  transform: translateY(-3px);
}
.ovw-cb-knop__ico { font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   Aandachtsbelletje
   -------------------------------------------------------------------------- */
.ovw-cb-teaser {
  position: fixed;
  left: 1.2rem;
  bottom: 5rem;
  z-index: 75;

  display: flex;
  align-items: flex-start;
  gap: .4rem;
  max-width: 17rem;
  padding: .3rem .3rem .3rem .2rem;

  background: #fff;
  border: 1px solid var(--ovw-rand);
  border-radius: var(--ovw-radius) var(--ovw-radius) var(--ovw-radius) 4px;
  box-shadow: var(--ovw-schaduw-h);
  animation: ovw-cb-op .35s var(--ovw-soepel);
}
.ovw-cb-teaser__tekst {
  flex: 1;
  padding: .6rem .7rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ovw-titel);
  text-align: left;
  cursor: pointer;
}
.ovw-cb-teaser__weg {
  flex: none;
  width: 26px;
  height: 26px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: #8299A0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.ovw-cb-teaser__weg:hover { background: var(--ovw-licht); color: var(--ovw-accent); }

@keyframes ovw-cb-op {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Gesprekspaneel
   -------------------------------------------------------------------------- */
.ovw-cb-paneel {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 76;

  display: flex;
  flex-direction: column;
  width: 22rem;
  max-width: calc(100vw - 2.4rem);
  height: 30rem;
  max-height: calc(100vh - 2.4rem);

  background: #fff;
  border-radius: var(--ovw-radius);
  box-shadow: var(--ovw-schaduw-xl);
  overflow: hidden;
  animation: ovw-cb-op .3s var(--ovw-soepel);
}
.ovw-cb-paneel[hidden] { display: none; }

.ovw-cb-kop {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  background: var(--ovw-accent);
  color: #fff;
}
.ovw-cb-kop__punt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ovw-primair);
  flex: none;
}
.ovw-cb-kop__tekst { display: flex; flex-direction: column; line-height: 1.25; }
.ovw-cb-kop__tekst strong { font-family: var(--ovw-titel-font); font-size: .98rem; }
.ovw-cb-kop__tekst small { font-size: .76rem; opacity: .8; }
.ovw-cb-sluit {
  margin-left: auto;
  width: 32px; height: 32px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.ovw-cb-sluit:hover { background: rgba(255,255,255,.14); }

/* --------------------------------------------------------------------------
   Berichten
   -------------------------------------------------------------------------- */
.ovw-cb-berichten {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: var(--ovw-grijs);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  scroll-behavior: smooth;
}

.ovw-cb-bericht {
  max-width: 88%;
  margin: 0;
  padding: .65rem .85rem;
  font-size: .9rem;
  line-height: 1.5;
  border-radius: var(--ovw-radius);
}
.ovw-cb-bericht--bot {
  background: #fff;
  color: var(--ovw-titel);
  border: 1px solid var(--ovw-rand);
  border-radius: var(--ovw-radius) var(--ovw-radius) var(--ovw-radius) 4px;
  align-self: flex-start;
}
.ovw-cb-bericht--ik {
  background: var(--ovw-accent);
  color: #fff;
  border-radius: var(--ovw-radius) var(--ovw-radius) 4px var(--ovw-radius);
  align-self: flex-end;
}

/* Drie stipjes terwijl het antwoord "getypt" wordt. */
.ovw-cb-typt { display: inline-flex; gap: 4px; align-items: center; }
.ovw-cb-typt i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9FB3B6;
  animation: ovw-cb-stip 1s infinite;
}
.ovw-cb-typt i:nth-child(2) { animation-delay: .15s; }
.ovw-cb-typt i:nth-child(3) { animation-delay: .3s; }
@keyframes ovw-cb-stip {
  0%, 60%, 100% { transform: none; opacity: .5; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Keuzeknoppen
   -------------------------------------------------------------------------- */
.ovw-cb-keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 95%;
}
.ovw-cb-keuze {
  padding: .5rem .9rem;
  background: #fff;
  border: 1.5px solid var(--ovw-accent-alt);
  border-radius: 999px;
  color: var(--ovw-accent);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .25s var(--ovw-soepel);
}
.ovw-cb-keuze:hover {
  background: var(--ovw-accent-alt);
  color: #fff;
  transform: translateY(-2px);
}

.ovw-cb-overslaan {
  align-self: flex-end;
  padding: .3rem .6rem;
  background: none;
  border: 0;
  color: #8299A0;
  font-family: inherit;
  font-size: .82rem;
  text-decoration: underline;
  cursor: pointer;
}
.ovw-cb-overslaan:hover { color: var(--ovw-accent); }

.ovw-cb-wa {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .2rem;
  padding: .6rem 1.1rem;
  background: #25D366;
  color: #06331a;
  border-radius: 999px;
  font-weight: 800;
  font-size: .87rem;
  text-decoration: none;
}
.ovw-cb-wa:hover { background: #1eb457; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   Invoerregel
   -------------------------------------------------------------------------- */
.ovw-cb-invoer {
  display: flex;
  gap: .5rem;
  padding: .7rem;
  background: #fff;
  border-top: 1px solid var(--ovw-rand);
}
.ovw-cb-invoer[hidden] { display: none; }
.ovw-cb-invoer input {
  flex: 1;
  min-width: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--ovw-rand);
  border-radius: var(--ovw-radius-sm);
  font-family: inherit;
  /* 16px: kleiner laat iOS bij focus op het veld inzoomen. */
  font-size: 16px;
  color: var(--ovw-titel);
}
.ovw-cb-invoer input:focus {
  border-color: var(--ovw-primair);
  outline: none;
  box-shadow: 0 0 0 3px rgba(25,193,182,.18);
}
.ovw-cb-invoer input[aria-invalid="true"] {
  border-color: #D64545;
  box-shadow: 0 0 0 3px rgba(214,69,69,.15);
}
.ovw-cb-verstuur {
  flex: none;
  padding: 0 1.1rem;
  background: var(--ovw-primair);
  border: 0;
  border-radius: var(--ovw-radius-sm);
  color: #042b30;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ovw-cb-verstuur:hover { background: var(--ovw-accent-alt); color: #fff; }

/* --------------------------------------------------------------------------
   Rondje "1" op de knop, tot het paneel een eerste keer openging
   -------------------------------------------------------------------------- */
.ovw-cb-badge {
  position: absolute;
  top: -5px;
  right: -3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D64545;
  color: #fff;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* --------------------------------------------------------------------------
   Foto's
   -------------------------------------------------------------------------- */
.ovw-cb-foto {
  flex: none;
  padding: 0 .7rem;
  background: #fff;
  border: 1px solid var(--ovw-rand);
  border-radius: var(--ovw-radius-sm);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.ovw-cb-foto:hover { border-color: var(--ovw-accent-alt); }
.ovw-cb-foto[hidden] { display: none; }

.ovw-cb-acties {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-self: flex-start;
}
.ovw-cb-acties .ovw-cb-wa { margin-top: 0; }
.ovw-cb-fotoknop {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.1rem;
  background: var(--ovw-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: .87rem;
  cursor: pointer;
}
.ovw-cb-fotoknop:hover { background: var(--ovw-accent-alt); }

.ovw-cb-duimen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: .3rem;
}
.ovw-cb-duimen img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.6);
}

/* --------------------------------------------------------------------------
   Adviseur neemt over
   Een andere kleur in de kop: de bezoeker moet meteen zien dat hij nu met
   een persoon spreekt en niet meer met de assistent.
   -------------------------------------------------------------------------- */
.ovw-cb-paneel--mens .ovw-cb-kop { background: #B4532A; }
.ovw-cb-paneel--mens .ovw-cb-kop__punt { background: #7EE2A8; }

.ovw-cb-bericht--adviseur {
  background: #FFF7ED;
  border-color: #F6D2B5;
}
.ovw-cb-wie {
  display: block;
  margin-bottom: .15rem;
  font-size: .72rem;
  font-weight: 800;
  color: #B4532A;
}
.ovw-cb-systeem {
  align-self: center;
  max-width: 95%;
  margin: 0;
  padding: .25rem .75rem;
  background: var(--ovw-licht);
  color: var(--ovw-titel);
  border-radius: 999px;
  font-size: .76rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Smal scherm
   Onderaan staat de belbalk (3,6 rem). Knop en paneel schuiven daarboven,
   zodat Bellen en WhatsApp altijd bereikbaar blijven.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ovw-cb-knop {
    left: .9rem;
    bottom: 4.4rem;
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .ovw-cb-knop__tekst,
  .ovw-cb-badge { display: none; }

  .ovw-cb-teaser { display: none; }

  .ovw-cb-paneel {
    left: .5rem;
    right: .5rem;
    bottom: 4.2rem;
    width: auto;
    max-width: none;
    height: min(26rem, calc(100vh - 6rem));
  }
}

/* --------------------------------------------------------------------------
   Beperkte beweging
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ovw-cb-paneel,
  .ovw-cb-teaser { animation: none; }
  .ovw-cb-berichten { scroll-behavior: auto; }
  .ovw-cb-typt i { animation: none; }
  .ovw-cb-knop:hover,
  .ovw-cb-keuze:hover { transform: none; }
}

@media print {
  .ovw-cb-knop,
  .ovw-cb-paneel,
  .ovw-cb-teaser { display: none !important; }
}