/* Zwevende AI-widget (design-handoff AIWidget): launcher, promobubbel en paneel. Tokens, berichten, kaarten en het
   invoerveld komen uit ai-chat.css (wortel .aic met data-maat="widget"); hier staat alleen de omlijsting.
   Thema: client area (standaard) of website (.aic[data-theme="site"]). Nacht: body[data-night="1"] of data-night="1". */

/* Basistekst zoals de body van het design system (14px, regelhoogte 1,55). */
#ai-widget.aic { line-height: 1.55; }

/* ---------- Launcher ---------- */
.aiw-launcher { --aic-r: 50px; position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 14px; height: 64px; margin: 0; padding: 0 24px 0 9px;
	border-radius: 50px; border: 1px solid var(--gray-lighter-4); background: var(--surface); box-shadow: var(--shadow-lift); cursor: pointer; font-family: var(--font-sans); line-height: normal;
	transition: transform .2s var(--ease-standard), box-shadow .2s var(--ease-standard); }
.aiw-launcher:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(23,25,28,.06), 0 28px 56px rgba(16,98,254,.22); }
.aic .aiw-launcher:focus-visible { outline-offset: 3px; }
.aiw-launcher__kern { position: relative; display: flex; }
.aiw-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 50px; background: var(--brand-warning); border: 2px solid var(--surface);
	color: var(--aic-op-amber); font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center; }
.aiw-launcher__tekst { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--gray-darker); white-space: nowrap; }

/* ---------- Promobubbel (kaart en sluitknop naast elkaar, niet genest) ---------- */
.aiw-promo { --aiw-pijl: #1d65af; position: fixed; z-index: 70; right: 24px; bottom: 102px; width: 292px; max-width: calc(100vw - 32px); animation: aicIn .35s var(--ease-standard);
	transition: transform .2s var(--ease-standard); }
.aiw-promo:hover { transform: translateY(-2px); }
.aiw-promo__kaart { --aic-r: 16px; position: relative; display: block; cursor: pointer; border-radius: 16px; padding: 16px 44px 16px 18px; color: #fff;
	background: radial-gradient(300px 160px at 90% 0%, rgba(255,255,255,.18), transparent 60%), var(--grad); box-shadow: 0 18px 40px rgba(29,101,175,.35), 0 2px 6px rgba(10,15,30,.12); }
.aic .aiw-promo__kaart:focus-visible { outline-offset: 3px; }
.aiw-promo__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #152a80;
	background: var(--accent-yellow); border-radius: 50px; padding: 3px 9px 3px 7px; }
.aiw-promo__chip svg { flex: none; }
.aiw-promo__titel { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; margin: 10px 0 4px; }
.aiw-promo__tekst { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.9); text-wrap: pretty; }
.aiw-promo__cta { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.aiw-promo__cta svg { flex: none; color: var(--accent-yellow); }
/* Pijltje naar de launcher: de eindkleur van de gradient (ook in de nacht, waar #1d65af afstak). */
.aiw-promo__pijl { position: absolute; right: 40px; bottom: -6px; width: 14px; height: 14px; background: var(--aiw-pijl); transform: rotate(45deg); border-radius: 0 0 3px 0; }
body[data-night="1"] .aic:not([data-theme="site"]) .aiw-promo, .aic[data-night="1"]:not([data-theme="site"]) .aiw-promo { --aiw-pijl: #123f6e; }
.aiw-promo__sluit { --aic-r: 50%; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
	background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s var(--ease-standard); }
.aiw-promo__sluit:hover { background: rgba(255,255,255,.16); }
.aic .aiw-promo__sluit:focus-visible { outline-color: #fff; }

/* ---------- Paneel ---------- */
.aiw-paneel { position: fixed; right: 24px; bottom: 24px; z-index: 71; width: 400px; height: min(640px, calc(100vh - 48px)); display: flex; flex-direction: column;
	background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-hero); overflow: hidden; animation: aicIn .22s var(--ease-standard); }
.aic[data-theme="site"] .aiw-paneel { border-radius: 24px; }

/* Kop */
.aiw-kop { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; color: #fff;
	background: radial-gradient(460px 220px at 90% 0%, rgba(255,255,255,.16), transparent 60%), var(--grad); }
.aiw-kop__tekst { flex: 1; min-width: 0; }
/* Koppen en alinea's met #ai-widget ervoor: de partial staat soms midden in paginacontent met eigen h2/p-regels. */
#ai-widget .aiw-kop__titel { margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.55; color: #fff; }
/* Wit (was 92%): op de lichtste plek van de gradient haalde 12px anders 4,3 tot 4,5:1 (1.4.3). */
#ai-widget .aiw-kop__sub { margin: 2px 0 0; font-size: 12px; line-height: 1.55; color: #fff; }
.aiw-kop__knop { --aic-r: 8px; width: 32px; height: 32px; flex: none; margin: 0; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;
	color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); cursor: pointer; transition: background .15s var(--ease-standard); }
.aic a.aiw-kop__knop, .aic a.aiw-kop__knop:hover { color: #fff; }
.aiw-kop__knop:hover { background: rgba(255,255,255,.14); }
.aic .aiw-kop__knop:focus-visible { outline-color: #fff; }

/* EU-balk met uitklapbare uitleg */
.aiw-eu { --aic-r: 0; flex: none; display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 8px 16px; border: none; border-bottom: 1px solid var(--gray-lighter-4); border-radius: 0;
	background: var(--i1); font-family: var(--font-sans); font-size: 12px; line-height: 1.55; color: var(--gray-base); text-align: left; cursor: pointer; transition: background .15s var(--ease-standard); }
.aiw-eu:hover { background: var(--i2); }
.aic .aiw-eu:focus-visible { outline-offset: -2px; }
/* Mag afbreken naar een tweede regel (1.4.12 tekstafstand: met ellips viel "je data blijft in de EU" weg). */
.aiw-eu__tekst { flex: 1; min-width: 0; }
.aiw-eu__tekst b { font-weight: 700; color: var(--gray-darker); }
.aiw-eu__chevron { flex: none; color: var(--gray-lighter); transition: transform .2s var(--ease-standard); }
.aiw-eu[aria-expanded="true"] .aiw-eu__chevron { transform: rotate(180deg); }
.aiw-eu-uitleg { flex: none; padding: 10px 16px 12px; background: var(--i1); border-bottom: 1px solid var(--gray-lighter-4); font-size: 12px; line-height: 1.55; color: var(--gray-base); text-wrap: pretty; }
.aiw-eu-uitleg a { font-weight: 700; }

/* Berichtenlijst */
.aiw-lijst { --aic-r: 0; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--body-bg); padding: 18px 16px 8px; }
.aic .aiw-lijst:focus-visible { outline-offset: -2px; }

/* Invoergebied met de voetregel */
.aiw-invoer { flex: none; padding: 10px 12px 12px; background: var(--body-bg); border-top: 1px solid var(--gray-lighter-4); }
.aiw-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--gray-base); }
.aiw-voet svg { flex: none; }
.aiw-voet__notitie { display: inline-flex; align-items: center; gap: 6px; }
/* De ticketknop staat naast de notitie als het past, anders eronder; beide gecentreerd. */
.aiw-ticket { --aic-r: 6px; display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent;
	font-family: var(--font-sans); font-size: 12px; font-weight: 700; line-height: 1.55; color: var(--brand-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.aiw-ticket:hover { color: var(--brand-primary-darker); }
.aiw-ticket[aria-disabled="true"] { color: var(--gray-base); cursor: default; text-decoration: none; }
body[data-night="1"] .aic:not([data-theme="site"]) .aiw-ticket:not([aria-disabled="true"]), .aic[data-night="1"] .aiw-ticket:not([aria-disabled="true"]) { color: #8fb4ff; }
.aiw-captcha { display: flex; justify-content: center; margin: 0 2px 8px; }

/* ---------- Volledig scherm ----------
   Zonder login: het paneel zelf groot en gecentreerd. Ingelogd: het AI Centrum in een overlay met een iframe. */
.aiw[data-groot="1"] .aiw-paneel, .aic[data-theme="site"][data-groot="1"] .aiw-paneel { inset: 0; margin: auto; width: min(960px, calc(100vw - 48px)); height: calc(100vh - 48px); animation: none; }
@supports (height: 100dvh) { .aiw[data-groot="1"] .aiw-paneel { height: calc(100dvh - 48px); } }
.aiw[data-groot="1"] .aiw-lijst, .aiw[data-groot="1"] .aiw-invoer { padding-left: max(16px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2)); }
.aiw-overlay { position: fixed; inset: 0; z-index: 120; display: flex; padding: 24px; background: rgba(10, 15, 30, .55); animation: aicIn .22s var(--ease-standard); }
.aiw-overlay__frame { flex: 1; width: 100%; height: 100%; border: 0; border-radius: 18px; background: var(--body-bg); box-shadow: var(--shadow-hero); }
html.aiw-overlay-open, html.aiw-overlay-open body { overflow: hidden; }

/* ---------- Vraag "Heb je al een account?" (alleen uitgelogd) ---------- */
.aiw-vraag { display: flex; gap: 10px; margin-bottom: 12px; }
.aiw-vraag__inhoud { min-width: 0; padding-top: 2px; }
.aiw-naam { font-size: 12px; font-weight: 700; line-height: 1.55; margin-bottom: 4px; color: var(--gray-darker); }
#ai-widget .aiw-vraag__titel { margin: 0 0 6px; font-size: 14px; line-height: 1.55; font-weight: 700; color: var(--gray-darker); }
#ai-widget .aiw-vraag__tekst { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--gray-base); text-wrap: pretty; }
.aiw-janee { display: flex; gap: 8px; padding-left: 34px; margin-bottom: 16px; }
.aiw-janee .aic-knop { min-width: 76px; justify-content: center; }
#ai-widget .aiw-privacy { margin: -6px 0 16px 34px; font-size: 12px; line-height: 1.5; color: var(--gray-base); text-wrap: pretty; }
.aiw-privacy a { font-weight: 700; }

/* ---------- Lege staat (ingelogd, met akkoord, nog niets gevraagd) ---------- */
.aiw-leeg { display: flex; flex-direction: column; gap: 14px; }
.aiw-leeg__groet { display: flex; gap: 10px; }
.aiw-leeg__tekst { min-width: 0; padding-top: 2px; }
#ai-widget .aiw-leeg__p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-darker); text-wrap: pretty; }
.aiw-leeg > .aic-wachtlink { margin-left: 34px; }
.aiw-leeg .aic-voorbeelden { margin: 0; }

/* Regelhoogtes zoals in het prototype: knoppen en velden 'normal' (voorbeeldvraag 35px, tekstveld 38px),
   statusregel boven het invoerveld zoals de basistekst. */
#ai-widget .aic-voorbeeld, #ai-widget .aic-veld__invoer { line-height: normal; }
#ai-widget .aic-regel { line-height: 1.55; }
#ai-widget .aic-regel--offline, #ai-widget .aic-regel--limiet { line-height: 1.45; }
/* De links in de inlogkaart staan in het prototype direct in de flexrij (geen extra regelruimte onder een
   afgebroken link), en een kaart onderaan een antwoord krijgt geen extra marge. */
#ai-widget .aic-login__rij > div { display: flex; }
#ai-widget .aic-antw__extra:last-child { margin-bottom: 0; }

/* Toast boven het paneel en daarin gecentreerd (de kern zet hem midden onder in het venster). Bij fixed is
   100% de breedte van het venster zonder schuifbalk, net als right: 24px van het paneel. */
@media (min-width: 520px) {
	#ai-widget .aic-toast { left: calc(100% - 224px); bottom: 104px; max-width: 352px; }
}

/* ---------- Mobiel: launcher en bubbel dichter bij de rand, paneel over het hele scherm ---------- */
@media (max-width: 519.98px) {
	.aiw-launcher { right: 16px; bottom: 16px; }
	.aiw-promo { right: 16px; bottom: 92px; }
	/* Schermvullend boven de hamburger (85) en de lade (95) van portaal en site; toast en venster daar weer boven. */
	.aiw-paneel, .aic[data-theme="site"] .aiw-paneel { right: 0; bottom: 0; width: 100vw; height: 100%; border-radius: 0; z-index: 100; }
	/* Het paneel vult het scherm al: groot verandert dan niets, de overlay krijgt geen rand. */
	.aiw[data-groot="1"] .aiw-paneel, .aic[data-theme="site"][data-groot="1"] .aiw-paneel { margin: 0; width: 100vw; height: 100%; }
	.aiw-overlay { padding: 0; }
	.aiw-overlay__frame { border-radius: 0; }
	#ai-widget .aic-toast { z-index: 110; }
	#ai-widget .aic-modal-laag { z-index: 111; }
	#ai-widget .aic-modal-wrap { z-index: 112; }
}
@supports (height: 100dvh) {
	@media (max-width: 519.98px) { .aiw-paneel, .aic[data-theme="site"] .aiw-paneel { height: 100dvh; } }
}