:root {
    --chatbot-hoofd: #1a1a2e;
    --chatbot-op-hoofd: #ffffff;   /* icoon/tekst op de hoofdkleur (instelbaar) */
    --chatbot-licht: #eef0f7;
    --chatbot-tekst-licht: #282828;

    /* ── Tekstgrootte (WCAG 2.1 AA, 1.4.4: tekst tot 200% schaalbaar) ─────────
       Alle maten in de chatbot rekenen door op één basis. Die basis is 1rem, dus
       hij schaalt mee met de tekstgrootte-instelling van de browser (vroeger
       stond alles vast in px en deed die instelling niets).
       De ondergrens van 16px vangt thema's af die html { font-size: 62.5% }
       zetten (een veelgebruikte truc); zonder die grens zou de chatbot op zo'n
       site ineens minuscuul worden. Zet een bezoeker zijn tekst groter, dan wint
       1rem en groeit alles gewoon mee.
       Uitkomst bij de standaardinstelling: exact de maten van vroeger (10 t/m 24 px),
       alleen schalen ze nu mee. De drie kleinste (Online-regel, AVG-regel en de
       powered-by) mogen van Tim klein blijven: de norm eist geen minimumgrootte,
       alleen dat de tekst tot 200% te vergroten is — en dat doet ze nu. */
    --chatbot-basis:      max(1rem, 16px);
    --chatbot-tekst-xxxs: calc(var(--chatbot-basis) * 0.625);    /* 10px   — powered by */
    --chatbot-tekst-xxs:  calc(var(--chatbot-basis) * 0.6875);   /* 11px   — Online-regel, AVG-regel */
    --chatbot-tekst-mini: calc(var(--chatbot-basis) * 0.71875);  /* 11.5px — testbandje */
    --chatbot-tekst-xs:   calc(var(--chatbot-basis) * 0.75);     /* 12px   */
    --chatbot-tekst-s:    calc(var(--chatbot-basis) * 0.8125);   /* 13px   */
    --chatbot-tekst-m:    calc(var(--chatbot-basis) * 0.875);    /* 14px   */
    --chatbot-tekst-l:    calc(var(--chatbot-basis) * 0.9375);   /* 15px   */
    --chatbot-tekst-xl:   calc(var(--chatbot-basis) * 1.5);      /* 24px   */
}

/* Alleen voor schermlezers: zichtbaar voor AT, onzichtbaar op het scherm.
   Wordt gebruikt voor het aankondigingsveld (#aichatbot-melding). */
.aichatbot-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Zichtbare toetsenbord-focus (WCAG 2.4.7). De thema-reset van veel sites haalt
   de outline weg; hier zetten we hem expliciet terug op alles wat focus kan
   krijgen binnen de chatbot. */
#aichatbot-knop:focus-visible,
#aichatbot-venster :focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}
#aichatbot-invoer:focus-visible,
#aichatbot-berichten:focus-visible {
    outline: 2px solid var(--chatbot-hoofd) !important;
    outline-offset: 1px !important;
}

/* Alle stijlen met !important om thema conflicten te voorkomen */

/* De zwevende chatknop (WCAG 2.1 AA, 1.4.4). Hoogte, icoon, padding en de
   uitgeklapte labelbreedte rekenen door op dezelfde tekstbasis als de rest van
   de chatbot, zodat de knop meegroeit met de tekst in plaats van hem af te
   knijpen. Stonden ze vast in px, dan liep het label bij 200% tegen die vaste
   breedte aan en verdween het eind van de naam: "Chat met Sam" werd "Chat met S".
   Bij de standaardinstelling verandert er niets aan de vormgeving (56px hoog,
   26px icoon); alleen de labelruimte is van 140 naar 192px gegaan, en dat is
   niet zichtbaar omdat het label smaller is dan beide. */
#aichatbot-knop {
    position: fixed !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    right: 0 !important;
    width: auto !important;
    min-width: calc(var(--chatbot-basis) * 3.5) !important;
    height: calc(var(--chatbot-basis) * 3.5) !important;
    background: var(--chatbot-hoofd) !important;
    border-radius: calc(var(--chatbot-basis) * 1.75) 0 0 calc(var(--chatbot-basis) * 1.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 9998 !important;
    padding: 0 calc(var(--chatbot-basis) * 0.625) 0 var(--chatbot-basis) !important;
    box-shadow: -2px 4px 16px rgba(0,0,0,0.25) !important;
    transition: box-shadow 0.2s !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* De chatknop is een echte <button> (toetsenbord + schermlezer); deze regels
       halen de standaard knop-opmaak van de browser en het thema eruit. */
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--chatbot-op-hoofd, #fff) !important;
    text-align: left !important;
}
#aichatbot-knop:hover {
    box-shadow: -4px 6px 24px rgba(0,0,0,0.35) !important;
}

#aichatbot-knop-label {
    display: inline-block !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    font-size: var(--chatbot-tekst-m) !important;
    font-weight: 600 !important;
    color: var(--chatbot-op-hoofd, #fff) !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
}
/* Hover én de tijdelijke .toon-label-staat (kort uitgeklapt bij paginaload) delen dezelfde uitgeklapte styling. */
#aichatbot-knop:hover #aichatbot-knop-label,
#aichatbot-knop.toon-label #aichatbot-knop-label {
    max-width: calc(var(--chatbot-basis) * 12) !important;
    opacity: 1 !important;
    margin-left: calc(var(--chatbot-basis) * 0.5) !important;
}
#aichatbot-knop svg {
    width: calc(var(--chatbot-basis) * 1.625) !important;
    height: calc(var(--chatbot-basis) * 1.625) !important;
    fill: var(--chatbot-op-hoofd, #fff) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* De open tekstballon (instelling "Icoon zwevende knop") is een lijntekening en
   geen vlak. De regels hierboven en bij de avatar zetten een vulling met
   !important, dus die moet hier expliciet weer uit; de class maakt deze selector
   specifieker, waardoor hij wint bij gelijke !important. Geldt voor de knop en
   voor de avatar in de kop van het venster, want dat is dezelfde tekening. */
#aichatbot-knop svg.aichatbot-icoon-lijn,
.aichatbot-avatar svg.aichatbot-icoon-lijn {
    fill: none !important;
    stroke: var(--chatbot-op-hoofd, #fff) !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

#aichatbot-venster {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    /* Breedte en hoogte rekenen mee met de tekstbasis: zet iemand zijn tekst
       groter, dan groeit het venster mee in plaats van de tekst af te knijpen.
       26.25 × 16px = 420px en 32.5 × 16px = 520px, dus bij de standaard-
       instelling verandert er niets aan de vormgeving. De viewport-caps
       voorkomen dat het venster bij grote tekst buiten beeld valt. */
    width: calc(var(--chatbot-basis) * 26.25) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: min(calc(var(--chatbot-basis) * 32.5), calc(100vh - 48px)) !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    display: none !important;
    flex-direction: column !important;
    z-index: 10100 !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Alleen voor de sluit-animatie (krimpen naar de chatknop). Bij openen verandert
       er niets aan transform/opacity, dus dit veroorzaakt geen open-animatie. */
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.7, 1), opacity 0.3s ease !important;
}
#aichatbot-venster.open { display: flex !important; }
/* Sluit-animatie: het venster schaalt met een lichte draai weg naar de rechterrand
   (waar de zwevende chatknop staat) en vervaagt; ná de transitie gaat '.open' eraf. */
#aichatbot-venster.aichatbot-dicht {
    transform-origin: right center !important;
    transform: scale(0.1) translateX(40px) rotate(-8deg) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#aichatbot-header {
    background: var(--chatbot-hoofd) !important;
    color: var(--chatbot-op-hoofd, #fff) !important;
    padding: 14px 20px !important;
    font-weight: 600 !important;
    font-size: var(--chatbot-tekst-l) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}
#aichatbot-header * {
    box-sizing: border-box !important;
    margin: 0 !important;
}
.aichatbot-id {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
}
.aichatbot-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    background: rgba(255,255,255,0.2) !important;   /* origineel frosted icoon-rondje */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.aichatbot-avatar svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--chatbot-op-hoofd, #fff) !important;
    display: block !important;
}
.aichatbot-id-tekst { display: block !important; }
.aichatbot-naam   { font-weight: 600 !important; font-size: var(--chatbot-tekst-l) !important; }
/* "Online"-regel: bolletje + tekst; bolletje links (onder de "S") en verticaal gecentreerd. */
.aichatbot-status {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: var(--chatbot-tekst-xxs) !important;
}
.aichatbot-online-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    background: #22c55e !important;   /* Tailwind green-500, geen animatie */
    border-radius: 50% !important;
    display: inline-block !important;
}
/* opacity op de tekst i.p.v. de hele regel, zodat het bolletje fel groen blijft */
.aichatbot-online-tekst { font-weight: 400 !important; opacity: 0.7 !important; }

.aichatbot-acties {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;            /* iconen iets dichter bij elkaar */
    padding: 0 !important;
    position: relative !important;  /* anker voor het "..."-overloopmenu */
}
/* Header-iconen (Nieuw gesprek + Sluiten) in één uniforme stijl: wit op de header,
   verticaal gecentreerd. Bij hover/focus verdwijnt het icoon en verschijnt het
   label in het wit op dezelfde headerlijn (loopt naar links uit). */
.aichatbot-actie {
    background: transparent !important;
    border: 0 !important;
    color: var(--chatbot-op-hoofd, #fff) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;         /* gelijk klikbaar gebied rondom beide iconen */
    border-radius: 6px !important;
    line-height: 1 !important;
    overflow: hidden !important;     /* collapse van icoon/label netjes afsnijden */
    opacity: 0.8 !important;
    transition: opacity 0.15s ease !important;
}
.aichatbot-actie:hover, .aichatbot-actie:focus { opacity: 1 !important; }
.aichatbot-actie svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;      /* zodat het naar 0 kan animeren bij hover */
    display: block !important;
    transition: max-width 0.2s ease, opacity 0.15s ease !important;
    /* géén stroke-width hier: dat zou de per-icoon waarde overschrijven. De refresh
       gebruikt een uitgezoomde viewBox + dikkere stroke-width zodat tekening én
       streekdikte optisch gelijk zijn aan de X (zie de SVG's in chatbox.php). */
}
/* Het label staat standaard ingeklapt; bij hover/focus klapt het icoon dicht en
   verschijnt het label (witte tekst op de oranje header). */
.aichatbot-actie-label {
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: var(--chatbot-tekst-xs) !important;
    font-weight: 500 !important;
    line-height: 20px !important;    /* gelijk aan de icoonhoogte: geen verticale sprong */
    transition: max-width 0.2s ease, opacity 0.2s ease !important;
}
.aichatbot-actie:hover svg,
.aichatbot-actie:focus-visible svg {
    max-width: 0 !important;
    opacity: 0 !important;
}
.aichatbot-actie:hover .aichatbot-actie-label,
.aichatbot-actie:focus-visible .aichatbot-actie-label {
    max-width: 140px !important;
    opacity: 1 !important;
}
/* Vensterknoppen (… en ×) hebben geen hover-label — de iconen spreken voor zich.
   Het icoon mag dus niet dichtklappen bij hover; alleen de opacity loopt naar 1.
   Bewust GEEN hover-achtergrondvlak op … (dat oogde onrustig). */
.aichatbot-sluit:hover svg,
.aichatbot-sluit:focus-visible svg,
.aichatbot-min:hover svg,
.aichatbot-min:focus-visible svg,
.aichatbot-menu-knop:hover svg,
.aichatbot-menu-knop:focus-visible svg {
    max-width: 20px !important;
    opacity: 1 !important;
}
/* Alleen de sluitknop krijgt een hover-vlak: rood, zoals de × van een venster (witte X blijft). */
.aichatbot-sluit:hover,
.aichatbot-sluit:focus-visible {
    background: #e81123 !important;
    opacity: 1 !important;
}
/* Drie header-knoppen (… − ×) gelijk gespatieerd via de gap van .aichatbot-acties;
   geen extra marge op de … zodat de afstanden identiek zijn. */
/* ── "..."-overloopmenu ─────────────────────────────────────────────────────
   Minder-gebruikte acties (vergroten, nieuw gesprek, downloaden, voorlezen) als
   dropdown onder de "..."-knop. Wit menu met donkere tekst; opent binnen het venster. */
.aichatbot-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;              /* rechts-uitgelijnd onder de knoppengroep */
    left: auto !important;
    min-width: 220px !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18) !important;
    padding: 0 !important;               /* geen rand-padding: eerste/laatste item strak tegen de rand */
    overflow: hidden !important;         /* item-hovers netjes binnen de afgeronde menuhoeken */
    z-index: 20 !important;
    flex-direction: column !important;
    gap: 2px !important;                 /* kleine ruimte tússen de items; flex-gap zit niet boven/onder */
}
.aichatbot-menu.open { display: flex !important; }

/* Menu-item = volle breedte, recht (geen eigen radius); de hover-highlight loopt zo
   van rand tot rand en bovenaan strak tegen de bovenkant. */
.aichatbot-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;        /* compactere rijen; linkerkant (16px) ongewijzigd */
    cursor: pointer !important;
    color: var(--chatbot-tekst-licht) !important;
    font-size: var(--chatbot-tekst-s) !important;
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-align: left !important;
    line-height: 1.2 !important;
}
.aichatbot-menu-item:hover,
.aichatbot-menu-item:focus-visible {
    background: var(--chatbot-licht) !important;
    outline: none !important;
}
/* Menu-iconen in de hoofdkleur. De stroke-iconen erven currentColor via 'color';
   de luidspreker is een fill-icoon en krijgt daarom expliciet fill. */
.aichatbot-menu-item svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: block !important;
    color: var(--chatbot-hoofd) !important;
}
.aichatbot-menu-item.aichatbot-voorlezen svg { fill: var(--chatbot-hoofd) !important; }
/* Voorlezen-aan krijgt een accent zodat de actieve stand opvalt in het menu. */
.aichatbot-menu-item.aichatbot-voorlezen.actief { color: var(--chatbot-hoofd) !important; font-weight: 600 !important; }
.aichatbot-menu-label { flex: 1 !important; white-space: nowrap !important; }

/* ── Groot venster (□ vergroten) ───────────────────────────────────────────
   Een nette grote box (breder én hoger, ruwweg vierkant); groeit naar boven mee
   omdat het venster aan de onderkant verankerd is. */
#aichatbot-venster.groot {
    width: calc(var(--chatbot-basis) * 37.5) !important;      /* 600px */
    max-width: calc(100vw - 48px) !important;
    max-height: min(calc(var(--chatbot-basis) * 45), calc(100vh - 48px)) !important;   /* 720px */
}
#aichatbot-venster.groot #aichatbot-berichten {
    max-height: min(calc(var(--chatbot-basis) * 35), calc(100vh - 260px)) !important;  /* 560px */
}

#aichatbot-berichten {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;            /* krappe basisafstand binnen één reeks */
    max-height: min(calc(var(--chatbot-basis) * 21.25), calc(100vh - 260px)) !important;  /* 340px */
    margin: 0 !important;
    box-sizing: border-box !important;
}

.aichatbot-bericht {
    max-width: 85% !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: var(--chatbot-tekst-m) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
}
.aichatbot-bericht.bot {
    background: var(--chatbot-ballon-bot, var(--chatbot-licht)) !important;
    color: var(--chatbot-ballon-bot-tekst, var(--chatbot-tekst-licht)) !important;
    align-self: flex-start !important;
    position: relative !important;
    margin-left: 10px !important;   /* normale marge; genoeg ruimte zodat het puntje niet wordt afgesneden */
}
.aichatbot-bericht.bot a {
    color: var(--chatbot-hoofd) !important;
}
/* Eerste ballon van een Sam-reeks (incl. de welkomst) krijgt een vierkantere
   bovenhoek + een puntje linksboven. Vervolgballonnen blijven volledig rond. */
.aichatbot-bericht.bot:not(.aichatbot-vervolg) {
    border-top-left-radius: 4px !important;   /* vierkantere bovenhoek waar het puntje aanhaakt */
}
/* Puntje aan de BOVENKANT-LINKS van de ballon: border-driehoek die naar links wijst.
   left:-6px valt binnen de 10px linkermarge, dus het wordt niet door overflow afgesneden. */
.aichatbot-bericht.bot:not(.aichatbot-vervolg)::before {
    content: "" !important;
    position: absolute !important;
    left: -6px !important;
    top: 10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 6px 8px 6px 0 !important;
    border-color: transparent var(--chatbot-ballon-bot, var(--chatbot-licht)) transparent transparent !important;  /* wijst naar links */
}
/* Welkomstballon: toont het ingestelde welkomstbericht als één geheel, met behoud
   van handmatige regelafbrekingen (enters) uit het instelveld. */
.aichatbot-bericht.bot.aichatbot-welkomst {
    white-space: pre-wrap !important;
}

.aichatbot-bericht.gebruiker {
    background: var(--chatbot-ballon-bezoeker, var(--chatbot-hoofd)) !important;
    color: var(--chatbot-ballon-bezoeker-tekst, var(--chatbot-op-hoofd, #fff)) !important;
    align-self: flex-end !important;
    /* Alle vier de hoeken gelijk afgerond (12px uit .aichatbot-bericht); geen tail. */
}
/* Spacing-groepering (WhatsApp-stijl): binnen één reeks staan bubbels krap op
   elkaar (alleen de 4px gap); bij een nieuwe spreker komt er ruimte bij, zodat
   het totaal ~16px wordt. Geldt voor zowel Sam als de gebruiker. */
.aichatbot-bericht:not(.aichatbot-vervolg) { margin-top: 12px !important; }
#aichatbot-berichten > .aichatbot-bericht:first-child { margin-top: 0 !important; }

/* WhatsApp typing dots */
.aichatbot-bericht.laden {
    background: var(--chatbot-ballon-bot, var(--chatbot-licht)) !important;
    align-self: flex-start !important;
    border-bottom-left-radius: 4px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 60px !important;
    margin-left: 10px !important;  /* lijn uit met de bot-bubbels */
}
.aichatbot-bericht.laden span {
    width: 8px !important;
    height: 8px !important;
    background: var(--chatbot-hoofd) !important;
    opacity: 0.4 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: aichatbot-typing 1.2s infinite ease-in-out !important;
    padding: 0 !important;
    margin: 0 !important;
}
.aichatbot-bericht.laden span:nth-child(1) { animation-delay: 0s !important; }
.aichatbot-bericht.laden span:nth-child(2) { animation-delay: 0.2s !important; }
.aichatbot-bericht.laden span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes aichatbot-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1; }
}

/* Bevestiging bij "Nieuw gesprek" */
.aichatbot-bevestig {
    align-self: center !important;
    max-width: 90% !important;
    background: #fff !important;
    border: 1px solid var(--chatbot-licht) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
}
.aichatbot-bevestig-tekst {
    font-size: var(--chatbot-tekst-s) !important;
    color: #333 !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}
.aichatbot-bevestig-knoppen {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
}
.aichatbot-bevestig-ja, .aichatbot-bevestig-nee {
    border: 0 !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: var(--chatbot-tekst-xs) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-family: inherit !important;
}
.aichatbot-bevestig-ja  { background: var(--chatbot-hoofd) !important; color: var(--chatbot-op-hoofd, #fff) !important; }
.aichatbot-bevestig-nee { background: #ececec !important; color: #333 !important; }

#aichatbot-invoer-wrapper {
    padding: 12px 16px !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

#aichatbot-invoer {
    flex: 1 !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: var(--chatbot-tekst-m) !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #282828 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    height: auto !important;
}
#aichatbot-invoer:focus {
    border-color: var(--chatbot-hoofd) !important;
    box-shadow: none !important;
    outline: none !important;
}

#aichatbot-verstuur {
    background: var(--chatbot-hoofd) !important;
    color: var(--chatbot-op-hoofd, #fff) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
    font-size: var(--chatbot-tekst-m) !important;
    transition: opacity 0.2s !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: auto !important;
    box-shadow: none !important;
}
#aichatbot-verstuur:hover { opacity: 0.85 !important; }
#aichatbot-verstuur svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--chatbot-op-hoofd, #fff) !important;
    margin: 0 !important;
}

#aichatbot-avg {
    padding: 8px 16px !important;
    font-size: var(--chatbot-tekst-xxs) !important;
    color: #aaa !important;
    text-align: center !important;
    margin: 0 !important;
    background: #fff !important;
    line-height: 1.4 !important;
}
#aichatbot-avg a {
    color: #aaa !important;
    text-decoration: underline !important;
}

#aichatbot-powered {
    padding: 6px 16px 10px !important;
    text-align: center !important;
    font-size: var(--chatbot-tekst-xxxs) !important;
}
#aichatbot-powered a {
    color: #ccc !important;
    text-decoration: none !important;
    opacity: 0.7 !important;
}
#aichatbot-powered a:hover {
    opacity: 1 !important;
}

@media (max-width: 460px) {
    #aichatbot-venster,
    #aichatbot-venster.groot {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        right: 16px !important;
    }
    /* Smaller scherm: dropdown iets krapper zodat hij binnen de smalle chat past. */
    .aichatbot-menu { min-width: 200px !important; }
}

/* Inline CTA-knop via shortcode [aichatbot_knop].
   Op Elementor-sites neemt de Elementor-knopstijl het over. Deze regel gebruikt
   :where() (specificiteit 0) en dient alleen als nette fallback op sites zonder
   Elementor. */
@media (max-width: 768px) {
    .aichatbot-cta-knop { display: none !important; }
}

:where(a.aichatbot-cta-knop) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--chatbot-hoofd);
    color: var(--chatbot-op-hoofd, #fff);
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: var(--chatbot-tekst-l);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Zachte fade-in van de CTA-knop ([aichatbot_knop]) bij paginaload: 0,4s lucht,
   dan 0,5s infaden. Een animation (geen transition) zodat de hover-stijl van de
   knop intact blijft; fill-mode 'both' houdt opacity 0 tijdens de vertraging, dus
   geen flash en geen layout-shift. Bij prefers-reduced-motion meteen zichtbaar. */
.aichatbot-cta-knop.aichatbot-cta-intro {
    animation: aichatbot-cta-infade 0.5s ease 0.4s both;
}
@keyframes aichatbot-cta-infade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .aichatbot-cta-knop.aichatbot-cta-intro {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* Snelkeuze-knoppen onder de welkomst. 8px tussen de knoppen onderling; 16px lucht
   boven (vanaf het laatste bericht) via 4px gap + 12px margin. De afstand naar het
   invoerveld is de onderpadding van het berichtenvak (16px). */
.aichatbot-snelkeuze {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-self: flex-start !important;
    margin: 0 !important;
    margin-top: 12px !important;
    max-width: 100% !important;
}
.aichatbot-snelkeuze-knop {
    background: #fff !important;
    color: var(--chatbot-hoofd) !important;
    border: 1px solid var(--chatbot-hoofd) !important;
    border-radius: 16px !important;
    padding: 7px 14px !important;
    font-size: var(--chatbot-tekst-s) !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    transition: background 0.2s, color 0.2s !important;
}
.aichatbot-snelkeuze-knop:hover {
    background: var(--chatbot-hoofd) !important;
    color: var(--chatbot-op-hoofd, #fff) !important;
}

/* ── Gespreksbeoordeling (smiley-kaart aan het einde van een gesprek) ────────
   Los kaartje midden in de berichtenstroom: witte vulling + zachte schaduw
   (bewust geen omranding), titel erboven, vijf smileys eronder. */
.aichatbot-beoordeling {
    align-self: center !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    padding: 14px 18px !important;
    margin: 14px 0 4px !important;
    text-align: center !important;
    max-width: 90% !important;
    box-sizing: border-box !important;
}
.aichatbot-beoordeling-titel {
    font-size: var(--chatbot-tekst-s) !important;
    color: #555 !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
}
.aichatbot-beoordeling-rij {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
}
.aichatbot-smiley {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: var(--chatbot-tekst-xl) !important;
    line-height: 1 !important;
    padding: 4px 5px !important;
    opacity: 0.55 !important;
    filter: grayscale(100%) !important;
    transition: transform 0.15s ease, opacity 0.15s ease, filter 0.15s ease !important;
}
.aichatbot-smiley:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.2) !important;
}
.aichatbot-smiley-actief {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.15) !important;
}
.aichatbot-beoordeling-gegeven .aichatbot-smiley:not(.aichatbot-smiley-actief) {
    opacity: 0.3 !important;
}

/* Testgesprek-bandje (codewoord-testmodus): discreet, bovenin de berichtenstroom. */
.aichatbot-testmelding {
    align-self: center !important;
    background: #fff4d6 !important;
    color: #7a5b00 !important;
    font-size: var(--chatbot-tekst-mini) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin: 0 0 4px !important;
    max-width: 90% !important;
    box-sizing: border-box !important;
}