/* De assistent (deel 2): de ballonnen, de typpuntjes, de pillen en de plek van de oude rekenstap in het chatvenster
   (mockups 09-10, goedgekeurd door Wesley: "ja, veel beter"). De schil (knopje, wolkje, venster, kop, invoerveld) staat
   in ah-site.css, zodat hij er bij de eerste klik al is; dit bestand laadt pas dan (ah-site.js), op de aparte pagina
   meteen (ah-site.php). De kaartjes staan in assistent-kaarten.css. De maten en kleuren zijn die van de mockup
   (fris-chat.html): Fris wit met een fijne rand en zijn teken links, de bezoeker mosterd rechts, de pillen wit met een
   mosterd rand. */

/* De berichten: Fris links met zijn teken bij de eerste ballon van een bericht, elke alinea een eigen ballon. */
.ah-assistent__berichten{display:flex;flex-direction:column;gap:10px}
.ah-bericht{display:flex;flex-direction:column;gap:10px;min-width:0}
.ah-rij{display:flex;align-items:flex-end;gap:8px;min-width:0}
.ah-rij .ah-mini{margin-bottom:2px}
.ah-mini--leeg{background:none}
.ah-ballon{max-width:84%;margin:0;padding:11px 14px;border:1px solid var(--chat-lijn);border-radius:18px 18px 18px 5px;background:var(--wit);font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.ah-ballon p{margin:0}
.ah-ballon a{color:var(--brons);text-decoration-color:var(--mosterd);text-decoration-thickness:2px;text-underline-offset:.2em}
.ah-ballon a:hover{text-decoration-color:var(--brons)}
/* Terwijl Fris typt: een dunne cursor achter de laatste letter (assistent-ballonnen.js). */
.ah-ballon.is-typend p:last-child::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--brons);animation:ah-cursor 1s steps(1) infinite}
@keyframes ah-cursor{50%{opacity:0}}
.ah-bericht--jij{align-items:flex-end}
.ah-bericht--jij .ah-ballon{max-width:80%;border:0;border-radius:18px 18px 5px 18px;background:var(--mosterd);white-space:pre-wrap}

/* De typpuntjes: een ballon van Fris met drie stippen die op en neer gaan. */
.ah-assistent__wacht{display:none;align-items:flex-end;gap:8px}
.ah-assistent__wacht.is-aan{display:flex}
.ah-assistent__wacht .ah-mini{margin-bottom:2px}
.ah-typt{display:inline-flex;gap:4px;padding:14px 16px;border:1px solid var(--chat-lijn);border-radius:18px 18px 18px 5px;background:var(--wit)}
.ah-typt i{width:7px;height:7px;border-radius:50%;background:var(--perkament);animation:ah-typt 1.2s infinite}
.ah-typt i:nth-child(2){animation-delay:.15s}
.ah-typt i:nth-child(3){animation-delay:.3s}
@keyframes ah-typt{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* De snelle antwoorden als pillen onder het laatste bericht, op één lijn met de ballonnen. Een pil is 36 px hoog, maar
   raakt op 44 px (de duim). */
.ah-assistent__snel{display:flex;flex-wrap:wrap;gap:8px;padding-left:34px}
.ah-assistent__keuze{position:relative;display:inline-flex;align-items:center;min-height:36px;margin:0;padding:9px 14px;border:1.5px solid var(--mosterd);border-radius:999px;background:var(--wit);color:var(--brons);font:550 14px/1.1 var(--letter);text-align:left;text-wrap:balance;text-decoration:none;cursor:pointer;transition:background-color .2s}
.ah-assistent__keuze::after{content:"";position:absolute;inset:-4px -2px}
.ah-assistent__keuze:hover{background:#fdf6df}
.ah-assistent__keuze.is-gekozen{background:var(--mosterd)}
.ah-assistent__keuze.is-gedempt{opacity:.5}

/* De oude rekenstap (de terugval zolang het CRM geen stand geeft): de keuzes als pillen, het formulier als kaartje. */
.ah-assistent__stap{padding-left:34px}
.ah-assistent__stap:focus{outline:none}
.ah-assistent__keuzes{display:flex;flex-wrap:wrap;gap:8px}

/* Binnenkomen: een nieuw bericht schuift zacht op; bij meer ballonnen in één bericht net na elkaar. */
@media (prefers-reduced-motion:no-preference){
  .ah-bericht.is-nieuw,.ah-assistent__snel.is-nieuw,.ah-assistent__stap.is-nieuw,.ah-assistent__wacht.is-aan{animation:ah-bericht-in .32s var(--sinus) both}
  .ah-bericht--assistent.is-nieuw{animation:none}
  .ah-bericht--assistent.is-nieuw>.ah-rij{animation:ah-bericht-in .32s var(--sinus) both}
  .ah-bericht--assistent.is-nieuw>.ah-rij:nth-child(3){animation-delay:.14s}
  .ah-bericht--assistent.is-nieuw>.ah-rij:nth-child(n+4){animation-delay:.28s}
}
@keyframes ah-bericht-in{from{opacity:0;transform:translateY(8px)}}

/* De aparte pagina: dezelfde ballonnen, een maat groter en wat smaller (mockup, stand pagina-gesprek). */
.ah-chat--groot .ah-ballon{max-width:72%;font-size:16px}
.ah-chat--groot .ah-bericht--jij .ah-ballon{max-width:64%}
@media (max-width:1023.98px){
  .ah-chat--groot .ah-ballon{max-width:84%;font-size:15px}
  .ah-chat--groot .ah-bericht--jij .ah-ballon{max-width:80%}
}