/**
 * Technische AI-assistent, Bakker IJlst (charliens-theme).
 *
 * Let op: dit theme gebruikt extreem hoge z-index-waarden. De chat staat op
 * 2147483200, bewust onder de side cart (2147483646 en 2147483647). Voegt een
 * klant vanuit de chat een product toe, dan schuift de side cart er dus
 * overheen. Dat is de bedoeling, niet een fout.
 *
 * Geen border-left gebruiken in dit project.
 */

/* Het theme zet box-sizing niet globaal, alleen op .container en een paar
   losse elementen. Zonder deze regel telt padding bij elke opgegeven breedte
   op en wordt onder meer de uitnodiging breder dan bedoeld. De side cart
   doet hetzelfde voor zijn eigen elementen. */
.bakker-ai,
.bakker-ai * {
	box-sizing: border-box;
}

.bakker-ai {
	/* Huisstijl Bakker IJlst, gelijk aan de side cart zodat beide modules
	   op elkaar aansluiten. Basis komt uit core.css: --maincolor #014b9a
	   en --tricolor #1b3699. */
	--bai-blauw: #014b9a;
	--bai-blauw-licht: #1b3699;
	--bai-accent: #014b9a;
	--bai-rand: #e3e6ee;
	--bai-grijs: #f7fbff;
	--bai-tekst: #222222;
	--bai-zacht: #646b7a;
	--bai-radius: 14px;

	position: fixed;
	bottom: 24px;
	z-index: 2147483200;
	font-family: inherit;
	line-height: 1.5;
}

/* Rechtsonder staat ook de zwevende winkelwagen-knop van de side cart. Die
   staat op right 22px en bottom 22px en is 58px groot, dus zijn bovenkant zit
   op 80px. De chatknop komt daar 14px boven en wordt horizontaal op hetzelfde
   midden uitgelijnd: 22 + 58/2 = 51 vanaf rechts, min de halve breedte van
   deze knop (60/2) geeft 21px. Verandert de side cart van formaat of positie,
   dan moeten deze twee waarden mee. */
.bakker-ai--rechtsonder {
	right: 21px;
	bottom: 94px;
}

.bakker-ai--linksonder {
	left: 24px;
}

/* -------------------------------------------------------------------------
 * De zwevende knop
 * ---------------------------------------------------------------------- */

.bakker-ai__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bai-blauw);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(1, 75, 154, 0.28);
	transition: transform 0.18s ease, background 0.18s ease;
}

.bakker-ai__knop:hover {
	background: var(--bai-blauw-licht);
	transform: translateY(-2px);
}

.bakker-ai__knop:focus-visible {
	outline: 3px solid var(--bai-accent);
	outline-offset: 3px;
}

.bakker-ai__knop svg {
	width: 27px;
	height: 27px;
}

.bakker-ai__knop-sluit {
	display: none;
}

.bakker-ai.is-open .bakker-ai__knop-icoon {
	display: none;
}

.bakker-ai.is-open .bakker-ai__knop-sluit {
	display: flex;
}

/* Pulsje om de aandacht te trekken, één keer bij het laden. */
.bakker-ai__knop::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(1, 75, 154, 0.55);
	animation: bakker-ai-puls 2.6s ease-out 3;
	pointer-events: none;
}

.bakker-ai.is-open .bakker-ai__knop::after {
	animation: none;
}

@keyframes bakker-ai-puls {
	0% { box-shadow: 0 0 0 0 rgba(1, 75, 154, 0.55); }
	70% { box-shadow: 0 0 0 18px rgba(1, 75, 154, 0); }
	100% { box-shadow: 0 0 0 0 rgba(1, 75, 154, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bakker-ai__knop::after { animation: none; }
	.bakker-ai__knop { transition: none; }
}

/* -------------------------------------------------------------------------
 * Uitnodiging naast de knop
 * ---------------------------------------------------------------------- */

.bakker-ai__tip {
	position: absolute;
	bottom: 4px;
	/* Vaste breedte: zonder width krimpt een flex-container naar de smalste
	   inhoud, waardoor de tekst per woord afbreekt. En geen overflow hidden,
	   want dat knipt het pijltje weg. */
	width: 258px;
	padding: 15px 17px;
	background: #fff;
	border: 1px solid var(--bai-rand);
	border-radius: 14px;
	/* Zwaardere schaduw dan een gewone kaart: dit moet loskomen van de pagina
	   en de aandacht pakken. */
	box-shadow: 0 4px 12px rgba(1, 75, 154, 0.1), 0 16px 40px rgba(1, 75, 154, 0.22);
	opacity: 0;
	transform: translateY(14px) scale(0.9);
	transform-origin: bottom right;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

/* De uitnodiging komt met een klein overshoot binnen, zodat hij opvalt
   zonder dat het als een reclamebanner voelt. */
.bakker-ai__tip.is-zichtbaar {
	animation: bakker-ai-binnenkomst 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	pointer-events: auto;
}

@keyframes bakker-ai-binnenkomst {
	0% {
		opacity: 0;
		transform: translateY(14px) scale(0.9);
	}
	60% {
		opacity: 1;
		transform: translateY(-3px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.bakker-ai--rechtsonder .bakker-ai__tip {
	right: 74px;
}

.bakker-ai--linksonder .bakker-ai__tip {
	left: 74px;
	transform-origin: bottom left;
}

/* ---------------------------------------------------------------------------
 * De knop stuitert zolang de uitnodiging openstaat
 *
 * Dit legt de link tussen de melding en de knop, en trekt de aandacht van
 * iemand die net iets anders aan het lezen is. Het stopt zodra de bezoeker
 * de uitnodiging wegklikt of de chat opent.
 * ------------------------------------------------------------------------ */

.bakker-ai.is-uitnodiging .bakker-ai__knop {
	animation: bakker-ai-stuiter 2.4s ease-in-out 0.3s infinite;
}

@keyframes bakker-ai-stuiter {
	0%, 62%, 100% {
		transform: translateY(0);
	}
	70% {
		transform: translateY(-9px);
	}
	78% {
		transform: translateY(0);
	}
	85% {
		transform: translateY(-4px);
	}
	92% {
		transform: translateY(0);
	}
}

/* Een ring die meepulseert, zodat de knop ook zonder beweging opvalt. */
.bakker-ai.is-uitnodiging .bakker-ai__knop::after {
	animation: bakker-ai-puls 2.4s ease-out 0.3s infinite;
}

/* Het pijltje naar de knop toe. Twee vlakjes over elkaar: het onderste
   levert de rand, het bovenste dekt de rand van de tip zelf af. */
.bakker-ai__tip::before,
.bakker-ai__tip::after {
	content: "";
	position: absolute;
	/* Uitgelijnd op het midden van de knop: die staat op bottom 94px en is
	   60px hoog, de tip op bottom 4px. Midden van de knop ligt dus 26px boven
	   de onderkant van de tip, min de halve pijlhoogte geeft 20px. */
	bottom: 20px;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
}

.bakker-ai__tip::before {
	background: var(--bai-rand);
}

.bakker-ai__tip::after {
	background: #fff;
}

.bakker-ai--rechtsonder .bakker-ai__tip::before {
	right: -7px;
}

.bakker-ai--rechtsonder .bakker-ai__tip::after {
	right: -6px;
}

.bakker-ai--linksonder .bakker-ai__tip::before {
	left: -7px;
}

.bakker-ai--linksonder .bakker-ai__tip::after {
	left: -6px;
}

.bakker-ai__tip-tekst {
	display: block;
	width: 100%;
	padding: 0 20px 0 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.bakker-ai__tip-titel {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bai-blauw);
	margin-bottom: 3px;
}

/* Een groen stipje dat meepulseert: het universele teken dat er iemand
   beschikbaar is. Werkt beter dan een uitroepteken of een icoon. */
.bakker-ai__tip-titel::before {
	content: "";
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #17a34a;
	box-shadow: 0 0 0 0 rgba(23, 163, 74, 0.55);
	animation: bakker-ai-stip 2.2s ease-out infinite;
}

@keyframes bakker-ai-stip {
	0% {
		box-shadow: 0 0 0 0 rgba(23, 163, 74, 0.5);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(23, 163, 74, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(23, 163, 74, 0);
	}
}

.bakker-ai__tip-sub {
	display: block;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--bai-zacht);
}

.bakker-ai__tip-tekst:hover .bakker-ai__tip-titel {
	text-decoration: underline;
}

/* Het kruisje in de hoek, los van de tekstknop zodat het niet meeklikt. */
.bakker-ai__tip-sluit {
	position: absolute;
	top: 7px;
	right: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--bai-zacht);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.bakker-ai__tip-sluit:hover {
	background: var(--bai-grijs);
	color: var(--bai-tekst);
}

.bakker-ai__tip-sluit svg {
	width: 12px;
	height: 12px;
}

/* Wie beweging liever niet ziet, krijgt alles zonder animatie. De uitnodiging
   verschijnt dan gewoon, de knop stuitert niet en het stipje pulseert niet. */
@media (prefers-reduced-motion: reduce) {

	.bakker-ai__tip {
		transition: opacity 0.01s linear;
		transform: none;
	}

	.bakker-ai__tip.is-zichtbaar {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.bakker-ai.is-uitnodiging .bakker-ai__knop,
	.bakker-ai.is-uitnodiging .bakker-ai__knop::after,
	.bakker-ai__tip-titel::before {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Het venster
 * ---------------------------------------------------------------------- */

.bakker-ai__venster {
	position: absolute;
	bottom: 76px;
	width: 420px;
	max-width: calc(100vw - 32px);
	height: 620px;
	/* De wortel staat rechtsonder op 94px, het venster 76px daarboven, dus
	   de onderkant zit op 170px. Plus 20px marge bovenaan. Zonder deze
	   correctie steekt het venster op schermen van 720px en lager uit beeld. */
	max-height: calc(100vh - 190px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bai-rand);
	border-radius: var(--bai-radius);
	box-shadow: 0 18px 50px rgba(1, 75, 154, 0.22);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bakker-ai--rechtsonder .bakker-ai__venster {
	right: 0;
}

.bakker-ai--linksonder .bakker-ai__venster {
	left: 0;
	/* Linksonder staat de wortel op 24px in plaats van 94px, dus daar is
	   meer ruimte: 24 + 76 = 100, plus 20px marge. */
	max-height: calc(100vh - 120px);
}

.bakker-ai.is-open .bakker-ai__venster {
	opacity: 1;
	transform: translateY(0);
}

/* Kop */

.bakker-ai__kop {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 16px 14px;
	background: var(--bai-blauw);
	color: #fff;
	flex-shrink: 0;
}

.bakker-ai__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 5px;
	border-radius: 9px;
	/* Het logo is donkerblauw op transparant en zou op de blauwe kop
	   wegvallen. Een wit vlak eronder houdt het leesbaar, ongeacht welk
	   logo er in Weergave > Aanpassen staat. */
	background: #fff;
	overflow: hidden;
}

.bakker-ai__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bakker-ai__kop-tekst {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.bakker-ai__titel {
	font-size: 16px;
	font-weight: 700;
	color: #fff !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bakker-ai__ondertitel {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.76) !important;
	/* Naast het logo blijft er weinig ruimte over. Op smalle telefoons kapt
	   deze regel netjes af in plaats van de kop uit elkaar te duwen. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bakker-ai__wissen,
.bakker-ai__sluit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.bakker-ai__wissen:hover,
.bakker-ai__sluit:hover {
	background: rgba(255, 255, 255, 0.24);
}

.bakker-ai__wissen svg,
.bakker-ai__sluit svg {
	width: 17px;
	height: 17px;
}

/* Berichten */

.bakker-ai__berichten {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 18px 16px;
	background: var(--bai-grijs);
	display: flex;
	flex-direction: column;
	gap: 14px;
	overscroll-behavior: contain;
}

.bakker-ai__bericht {
	max-width: 88%;
	padding: 11px 14px;
	border-radius: var(--bai-radius);
	font-size: 14.5px;
	color: var(--bai-tekst);
	white-space: pre-wrap;
	word-wrap: break-word;
}

.bakker-ai__bericht--klant {
	align-self: flex-end;
	background: var(--bai-blauw);
	color: #fff !important;
	border-bottom-right-radius: 4px;
	/* De klantbubbel krijgt platte tekst zonder alinea's, dus die volgt
	   dezelfde regelafstand als de alinea's in het antwoord. */
	line-height: normal;
}

.bakker-ai__bericht--bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--bai-rand);
	border-bottom-left-radius: 4px;
}

.bakker-ai__bericht--fout {
	align-self: stretch;
	max-width: 100%;
	background: #fdf2f2;
	border: 1px solid #f3c9c9;
	color: #8c2b2b;
	font-size: 13.5px;
	text-align: center;
}

.bakker-ai__bericht p {
	margin: 0 0 9px;
	font-size: 14.5px;
	line-height: normal;
}

.bakker-ai__bericht p:last-child {
	margin-bottom: 0;
}

.bakker-ai__bericht ol,
.bakker-ai__bericht ul {
	margin: 0 0 9px;
	padding-left: 20px;
}

/* Het theme zet in core.css 'ul li { list-style-type: none }' en haalt zo
   de opsommingstekens overal weg. Binnen een antwoord wil je die juist wel,
   anders wordt een opsomming een muur tekst. */
.bakker-ai__bericht ul li {
	list-style-type: disc;
}

.bakker-ai__bericht ol li {
	list-style-type: decimal;
}

.bakker-ai__bericht li {
	margin-bottom: 4px;
	font-size: 14.5px;
	line-height: normal;
}

/* Het theme kleurt in core.css elke strong met var(--maincolor). Binnen een
   chatbericht moet vet gewoon vet zijn, niet blauw. In de klantbubbel zou
   dat zelfs blauw op blauw worden en dus onleesbaar. Vandaar !important:
   de theme-regel wint anders op volgorde. */
.bakker-ai__bericht strong {
	font-weight: 700;
	color: inherit !important;
}

.bakker-ai__bericht a {
	color: var(--bai-accent);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Welkomstbericht
 *
 * Krijgt een eigen vorm zodat het niet leest als het eerste antwoord op een
 * vraag die niemand gesteld heeft. Volle breedte, met een icoon ernaast.
 * ------------------------------------------------------------------------ */

.bakker-ai__welkom {
	position: relative;
	align-self: stretch;
	padding: 0;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--bai-rand);
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(1, 75, 154, 0.06), 0 12px 28px rgba(1, 75, 154, 0.1);
	animation: bakker-ai-welkom-op 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* De kopbalk in huisstijlblauw. Dit is wat het bericht laat opvallen: het
   leest als een begroeting en niet als het eerste antwoord op een vraag die
   niemand gesteld heeft. */
.bakker-ai__welkom-kop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--bai-blauw) 0%, #013a78 100%);
	overflow: hidden;
}

/* Een zachte gloed die van links naar rechts trekt, een keer, bij het
   openen. Genoeg om het oog te trekken zonder dat het knippert. */
.bakker-ai__welkom-kop::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 55%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	transform: skewX(-18deg);
	animation: bakker-ai-glans 1.5s ease-out 0.5s both;
	pointer-events: none;
}

@keyframes bakker-ai-glans {
	0% {
		left: -60%;
	}
	100% {
		left: 120%;
	}
}

.bakker-ai__welkom-icoon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	/* Het icoon veert apart op, net iets later dan het blok zelf. */
	animation: bakker-ai-icoon-op 0.6s cubic-bezier(0.34, 1.7, 0.5, 1) 0.12s both;
}

@keyframes bakker-ai-icoon-op {
	0% {
		opacity: 0;
		transform: scale(0.4) rotate(-14deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
}

.bakker-ai__welkom-icoon svg {
	width: 23px;
	height: 23px;
}

.bakker-ai__welkom-titel {
	position: relative;
	flex: 1;
	min-width: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* Groen stipje: laat zien dat er iemand klaarstaat. */
.bakker-ai__welkom-status {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.bakker-ai__welkom-status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: #4ade80;
	vertical-align: middle;
	animation: bakker-ai-stip 2s ease-in-out infinite;
}

@keyframes bakker-ai-stip {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
	}
	50% {
		opacity: 0.75;
		box-shadow: 0 0 0 5px rgba(74, 222, 128, 0);
	}
}

@keyframes bakker-ai-welkom-op {
	0% {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.bakker-ai__welkom-tekst {
	padding: 15px 16px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--bai-tekst);
}

.bakker-ai__welkom-tekst p {
	margin: 0 0 8px;
	font-size: 14.5px;
	line-height: 1.55;
}

.bakker-ai__welkom-tekst p:last-child {
	margin-bottom: 0;
}

/* Statusregel tijdens het werken */

.bakker-ai__status {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--bai-rand);
	border-radius: var(--bai-radius);
	font-size: 13.5px;
	color: var(--bai-zacht);
}

.bakker-ai__punten {
	display: inline-flex;
	gap: 4px;
}

.bakker-ai__punten span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bai-accent);
	animation: bakker-ai-hop 1.2s infinite ease-in-out;
}

.bakker-ai__punten span:nth-child(2) { animation-delay: 0.16s; }
.bakker-ai__punten span:nth-child(3) { animation-delay: 0.32s; }

@keyframes bakker-ai-hop {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
	30% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bakker-ai__punten span { animation: none; opacity: 0.7; }
}

/* Producttegels */

.bakker-ai__producten {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bakker-ai__producten-kop {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bai-zacht);
	margin-bottom: 2px;
}

.bakker-ai__product {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px;
	background: #fff;
	border: 1px solid var(--bai-rand);
	border-radius: 11px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bakker-ai__product:hover {
	border-color: var(--bai-accent);
	box-shadow: 0 3px 12px rgba(1, 75, 154, 0.09);
}

.bakker-ai__product-afb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 7px;
	background: var(--bai-grijs);
}

.bakker-ai__product-info {
	flex: 1;
	min-width: 0;
}

.bakker-ai__product-naam {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bai-tekst) !important;
	text-decoration: none;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Twee regels maximaal. Het theme zet links op inline-block, wat de
	   line-clamp breekt, dus display wordt hier geforceerd. */
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bakker-ai__product-naam:hover {
	color: var(--bai-accent) !important;
}

.bakker-ai__product-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--bai-zacht);
}

.bakker-ai__product-prijs {
	font-weight: 700;
	color: var(--bai-blauw);
}

.bakker-ai__product-prijs .amount {
	color: inherit;
}

.bakker-ai__product-prijs del {
	font-weight: 400;
	opacity: 0.6;
	margin-right: 4px;
}

.bakker-ai__product-voorraad {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bakker-ai__product-voorraad::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #157a3e;
}

.bakker-ai__product-voorraad.is-uit::before {
	background: #c97a2c;
}

.bakker-ai__product-actie {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: var(--bai-blauw);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

.bakker-ai__product-actie:hover {
	background: var(--bai-blauw-licht);
	color: #fff;
}

.bakker-ai__product-actie svg {
	width: 17px;
	height: 17px;
}

.bakker-ai__product-actie.is-bezig {
	opacity: 0.6;
	pointer-events: none;
}

.bakker-ai__product-actie.is-klaar {
	background: #157a3e;
}

/* Bronnen */

.bakker-ai__bronnen {
	align-self: flex-start;
	max-width: 100%;
	font-size: 12px;
	color: var(--bai-zacht);
}

.bakker-ai__bronnen-kop {
	font-weight: 600;
	margin-bottom: 3px;
}

.bakker-ai__bronnen a {
	color: var(--bai-zacht);
	text-decoration: underline;
	/* Het theme zet alle links op inline-block. Hier moeten ze onder elkaar
	   staan, vandaar block met !important. */
	display: block !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 2px;
}

.bakker-ai__bronnen a:hover {
	color: var(--bai-accent);
}

/* Suggesties */

.bakker-ai__suggesties {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 11px 16px 0;
	flex-shrink: 0;
}

.bakker-ai__suggesties::-webkit-scrollbar {
	display: none;
}

.bakker-ai__suggesties.is-verborgen {
	display: none;
}

.bakker-ai__suggestie {
	padding: 7px 13px;
	border: 1px solid var(--bai-rand);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--bai-tekst);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bakker-ai__suggestie:hover {
	border-color: var(--bai-accent);
	background: var(--bai-grijs);
}

/* Invoerveld */

.bakker-ai__invoer {
	display: flex;
	align-items: flex-end;
	gap: 9px;
	padding: 12px 16px;
	background: #fff;
	flex-shrink: 0;
}

.bakker-ai__tekst {
	flex: 1;
	min-height: 42px;
	max-height: 120px;
	padding: 11px 13px !important;
	border: 1px solid var(--bai-rand) !important;
	border-radius: 11px !important;
	background: var(--bai-grijs) !important;
	font-family: inherit;
	font-size: 14px !important;
	color: var(--bai-tekst) !important;
	resize: none;
	overflow-y: auto;
	line-height: 1.45;
	box-shadow: none !important;
}

.bakker-ai__tekst:focus {
	outline: none;
	border-color: var(--bai-accent) !important;
	background: #fff !important;
}

.bakker-ai__tekst::placeholder {
	color: #646b7a;
}

.bakker-ai__verstuur {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: var(--bai-blauw);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.bakker-ai__verstuur:hover:not(:disabled) {
	background: var(--bai-blauw-licht);
}

.bakker-ai__verstuur:disabled {
	opacity: 0.42;
	cursor: default;
}

.bakker-ai__verstuur svg {
	width: 18px;
	height: 18px;
}

/* Voetnoot */

.bakker-ai__voet {
	margin: 0;
	padding: 0 16px 12px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--bai-zacht);
	text-align: center;
	background: #fff;
	flex-shrink: 0;
}

.bakker-ai__voet a {
	color: var(--bai-accent);
	text-decoration: underline;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Mobiel: schermvullend
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {

	.bakker-ai {
		bottom: 18px;
	}

	/* Mobiel staat de side cart-knop op bottom 16px met een hoogte van 54px,
	   dus de bovenkant zit op 70px. De chatknop komt daar 12px boven. Beide
	   knoppen zijn hier 54px, dus right is gelijk. */
	.bakker-ai--rechtsonder {
		right: 16px;
		bottom: 82px;
	}

	.bakker-ai--linksonder {
		left: 18px;
	}

	.bakker-ai__knop {
		width: 54px;
		height: 54px;
	}

	/* De knop is hier 54px in plaats van 60px, dus de tip schuift mee. */
	.bakker-ai--rechtsonder .bakker-ai__tip {
		right: 68px;
	}

	.bakker-ai--linksonder .bakker-ai__tip {
		left: 68px;
	}

	.bakker-ai__tip {
		width: min(244px, calc(100vw - 96px));
	}

	/* Knop is hier 54px en de wortel staat op bottom 82px, dus het knopmidden
	   verschuift en het pijltje mee. */
	.bakker-ai__tip::before,
	.bakker-ai__tip::after {
		bottom: 17px;
	}

	.bakker-ai__venster {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		height: 100dvh;
		max-height: none;
		border: 0;
		border-radius: 0;
		transform: translateY(100%);
		transition: transform 0.24s ease, opacity 0.24s ease;
	}

	.bakker-ai.is-open .bakker-ai__venster {
		transform: translateY(0);
	}

	.bakker-ai__kop {
		padding-top: max(16px, env(safe-area-inset-top));
	}

	.bakker-ai__voet {
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}

	.bakker-ai__bericht {
		max-width: 92%;
		font-size: 15px;
	}

	/* Voorkomt inzoomen op iOS bij focus. */
	.bakker-ai__tekst {
		font-size: 16px !important;
	}
}

/* Als de chat openstaat op mobiel, de pagina eronder vastzetten. */
body.bakker-ai-open {
	overflow: hidden;
}

@media (min-width: 641px) {
	body.bakker-ai-open {
		overflow: visible;
	}
}

/* -------------------------------------------------------------------------
 * Beweging uitzetten voor wie daarom vraagt
 *
 * Dit blok staat bewust helemaal onderaan: bij gelijke specificiteit wint de
 * laatste regel, en de welkomstopmaak staat verderop in het bestand dan het
 * eerdere reduced-motion blok.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.bakker-ai__welkom,
	.bakker-ai__welkom-icoon,
	.bakker-ai__welkom-kop::after,
	.bakker-ai__welkom-status::before {
		animation: none;
	}

	.bakker-ai__welkom,
	.bakker-ai__welkom-icoon {
		opacity: 1;
		transform: none;
	}

	/* Zonder de glansanimatie hoort dat vlakje ook niet zichtbaar te zijn. */
	.bakker-ai__welkom-kop::after {
		display: none;
	}
}