.alynivo {
	--alynivo-color: #7257ff;
	--alynivo-ink: #17151f;
	--alynivo-muted: #716d7d;
	--alynivo-line: #e9e6ef;
	--alynivo-soft: #f7f6fa;
	position: fixed;
	bottom: 22px;
	z-index: 999998;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0;
}

/* Die Huelle gibt Klicks durch, ihre Kinder fangen sie wieder.
 *
 * ANLASS: Auf socialvantix.com war der Knopf „Auswahl ansehen" des
 * Cookie-Banners am Telefon an keiner Stelle erreichbar — links, Mitte und
 * rechts landete jeder Klick im Chat. Dem Besucher blieb nur alles annehmen
 * oder alles ablehnen; die abgestufte Einwilligung liess sich nicht oeffnen.
 *
 * URSACHE: Unter 480px setzt die Regel weiter unten `left` UND `right` auf
 * 12px. Fuer das Panel ist das richtig — es soll die volle Breite haben.
 * Dieselbe Huelle traegt aber auch den Launcher: Auf einem 390px breiten
 * Schirm reicht sie dann von 12 bis 378px, sichtbar sind davon nur die
 * rechten 54px. Die uebrigen 312px sind eine unsichtbare Klickfalle — und
 * bei z-index 999998 liegt sie ueber praktisch allem.
 *
 * Betroffen war nie nur das Cookie-Banner, sondern alles am unteren
 * Seitenrand: Zurueck-nach-oben-Knoepfe, Kaufleisten, Hinweisbalken.
 *
 * Bewusst hier und nicht in der 480px-Regel: Auch auf breiten Schirmen
 * kostet es nichts, und eine Regel, die nur unterhalb einer Breite gilt,
 * wird beim naechsten Umbau des Panels leicht uebersehen. */
.alynivo { pointer-events: none; }
.alynivo > * { pointer-events: auto; }

/* Bei geoeffnetem Chat faengt die Huelle wieder — und muss es auch.
 *
 * Der freie Streifen ueber dem Blatt ist ein ::before am Wurzelelement
 * (.alynivo.is-open::before). Ein Tippen darauf schliesst den Chat, und
 * genau dafuer muss das Wurzelelement Treffer annehmen. Ohne diese Zeile
 * reagierte der Streifen nicht mehr — ein bestehender Test hat das sofort
 * gemeldet.
 *
 * Ein Fanggebiet ist das nicht: Bei offenem Chat deckt das Blatt den Schirm
 * fast vollstaendig ab, und was daneben bleibt, ist der Streifen selbst. Die
 * unsichtbare Falle entstand nur im geschlossenen Zustand, wo ausser dem
 * kleinen Knopf nichts zu sehen war. */
.alynivo.is-open { pointer-events: auto; }

.alynivo--right { right: 22px; }
.alynivo--left { left: 22px; }
.alynivo *, .alynivo *::before, .alynivo *::after { box-sizing: border-box; }
.alynivo button, .alynivo input, .alynivo a { font: inherit; letter-spacing: 0; }

.alynivo__launcher {
	position: relative;
	display: grid;
	width: 60px;
	height: 60px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 15px;
	place-items: center;
	/* Ohne eigene Einstellung bleibt es bei Weiß — genau wie bisher. */
	background: var(--alynivo-launcher-bg, #fff);
	box-shadow: 0 15px 38px rgba(61, 44, 148, .3);
	color: #fff;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}

.alynivo__launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(61, 44, 148, .36); }
.alynivo__launcher.is-open { transform: scale(.94); }
.alynivo__launcher-mark { display: block; width: 66%; height: 66%; overflow: hidden; border-radius: 10px; }
.alynivo__brand-mark { display: block; width: 100%; height: 100%; object-fit: contain; }

.alynivo__launcher--generic { background: var(--alynivo-launcher-bg, var(--alynivo-color)); }

/* Logo formatfüllend: Der Knopf und die Logokachel werden ein Körper. Ohne das
   sitzt ein Logo mit eigener Hintergrundfarbe als zweites, kleineres Quadrat im
   weißen Knopf — zwei verschachtelte Ecken, die wie ein Fehler aussehen. */
.alynivo__launcher--fill .alynivo__launcher-mark { width: 100%; height: 100%; border-radius: inherit; }
.alynivo__launcher--fill .alynivo__brand-mark { object-fit: cover; border-radius: inherit; }

/* Auf dunklem Grund trägt ein weicher violetter Schatten nicht — er verschwindet
   einfach. Dort grenzt eine dezente helle Kante den Knopf ab. Ob dunkel oder
   hell, entscheidet widget.js anhand der tatsächlichen Helligkeit der Farbe. */
.alynivo__launcher--dark {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 30px rgba(0, 0, 0, .45);
}
.alynivo__launcher--dark:hover {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 10px 24px rgba(0, 0, 0, .5);
}
.alynivo__launcher:focus-visible { outline: 2px solid var(--alynivo-color); outline-offset: 3px; }
.alynivo__launcher--dark:focus-visible { outline-color: #fff; }
.alynivo__launcher-mark--generic { display: grid; width: 100%; height: 100%; place-items: center; }

/* Der Fokusrahmen muss sich vom Untergrund abheben — vorgeschrieben sind 3:1.
   Vorher stand hier `rgba(114, 87, 255, .3)`: 30 Prozent Deckkraft auf weiss
   ergibt rund 1,5:1, also die Haelfte. Wer mit der Tastatur bedient, sah kaum,
   wo er gerade steht. Deckend statt durchscheinend bringt dieselbe Farbe auf
   ueber 4:1, ohne dass sich das Aussehen sonst aendert. */
.alynivo__launcher:focus-visible,
.alynivo button:focus-visible,
.alynivo input:focus-visible,
.alynivo textarea:focus-visible,
.alynivo a:focus-visible { outline: 2px solid var(--alynivo-color); outline-offset: 2px; }

.alynivo__teaser {
	position: absolute;
	bottom: 70px;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(240px, calc(100vw - 48px));
	padding: 10px 10px 10px 14px;
	border-radius: 14px;
	background: #fff;
	color: var(--alynivo-ink);
	font-size: 13px;
	line-height: 1.35;
	box-shadow: 0 14px 32px rgba(23, 21, 31, .18);
	animation: alynivo-teaser-in .25s ease;
}

.alynivo--right .alynivo__teaser { right: 0; }
.alynivo--left .alynivo__teaser { left: 0; }

.alynivo__teaser span { cursor: pointer; }

.alynivo__teaser-close {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--alynivo-soft);
	color: var(--alynivo-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

@keyframes alynivo-teaser-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.alynivo__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	display: grid;
	/* Das Panel ist ein <section>. Themes, die alle Abschnitte einer Seite mit
	   Innenabstand versehen, treffen damit auch unser Chatfenster — auf
	   mavilab.de waren es 64px oben und unten, sichtbar als weißer Block über
	   der Kopfzeile. Der Wert gehört uns, nicht dem Theme. */
	margin: 0;
	padding: 0;
	width: min(410px, calc(100vw - 32px));
	height: min(720px, calc(100dvh - 96px));
	min-height: 470px;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	overflow: hidden;
	border: 1px solid rgba(34, 28, 48, .1);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 28px 80px rgba(25, 19, 43, .24);
	color: var(--alynivo-ink);
}

.alynivo--left .alynivo__panel { right: auto; left: 0; }
.alynivo__panel[hidden] { display: none; }

/* Der Ziehgriff. Auf dem Rechner gibt es nichts zu ziehen, dort bleibt er
   ausgeblendet; die Regel für Telefone steht in der 480px-Abfrage. */
.alynivo__grabber { display: none; }

.alynivo__header {
	display: flex;
	min-height: 74px;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px 13px 16px;
	border-bottom: 1px solid var(--alynivo-line);
	background: rgba(255, 255, 255, .97);
}

.alynivo__identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.alynivo__identity > div { display: flex; min-width: 0; flex-direction: column; }
.alynivo__identity strong { overflow: hidden; color: var(--alynivo-ink); font-size: 15px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.alynivo__identity > div > span { display: flex; align-items: center; gap: 5px; color: var(--alynivo-muted); font-size: 11px; }
/* Green means a person is attending, and nothing else. Without Live Chat
   there is no person, so the dot carries the brand colour instead of
   borrowing the signal every other chat widget uses to fake presence. */
.alynivo__identity > div > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--alynivo-color); }
.alynivo--live .alynivo__identity > div > span i { background: #9b96a3; }
.alynivo--live.is-live-connected .alynivo__identity > div > span i { background: #20b778; }

.alynivo__avatar,
.alynivo__mini-avatar {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	background: transparent;
}

.alynivo__avatar { width: 42px; height: 42px; border-radius: 10px; box-shadow: 0 7px 18px rgba(114, 87, 255, .22); }
.alynivo__mini-avatar { width: 27px; height: 27px; border-radius: 7px; }

/* Zurückhaltend, nicht unsichtbar: kein grauer Kreis mehr, aber die
   Trefferfläche bleibt 36px, sonst trifft niemand mit dem Daumen. */
.alynivo__close {
	display: grid;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	place-items: center;
	background: transparent;
	color: #9b96a3;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background .16s ease, color .16s ease;
}

.alynivo__close:hover,
.alynivo__close:focus-visible { background: #f4f2f7; color: var(--alynivo-ink); }

.alynivo__messages {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 20px 16px 18px;
	background: var(--alynivo-soft);
	overscroll-behavior: contain;
	scroll-behavior: smooth;
}

.alynivo__message-row { display: flex; max-width: 90%; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.alynivo__message-row--user { margin-left: auto; justify-content: flex-end; }
/* white-space: pre-wrap, weil die Antworten der KI in Absaetzen gesetzt sind.
   Ohne die Regel fielen alle Zeilenumbrueche zu Leerzeichen zusammen, und eine
   Aufzaehlung von Zusagen stand als ein Fliesstext da - der Posteingang zeigte
   dieselbe Nachricht dagegen umgebrochen. */
.alynivo__bubble { padding: 10px 12px; border: 1px solid var(--alynivo-line); border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 0 3px 12px rgba(28, 23, 40, .04); color: var(--alynivo-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Die echte Domain steht neben dem Link, nicht darin: als Text im Link waere
   sie faelschbar. Eigene Farbe und Schriftgroesse machen sie unterscheidbar. */
.alynivo__link-real { color: #b4232c; font-size: .85em; font-weight: 700; white-space: nowrap; }
.alynivo__message-row--user .alynivo__bubble { border-color: var(--alynivo-color); border-radius: 8px 8px 2px 8px; background: var(--alynivo-color); box-shadow: 0 5px 15px rgba(114, 87, 255, .17); color: #fff; }

/* Überschrift des Fragenmenüs. Sitzt im Knopfblock statt in einer eigenen
   Sprechblase: als Sprechblase wäre sie eine Assistentenantwort, die nichts
   beantwortet — und würde als ungespiegelt gemeldet. */
.alynivo__quick-caption {
	width: 100%;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	opacity: .75;
}

.alynivo__quick-replies { display: flex; align-items: stretch; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px 35px; }
.alynivo__quick-replies--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alynivo__quick-reply { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border: 1px solid rgba(114, 87, 255, .27); border-radius: 7px; background: #fff; color: var(--alynivo-color); cursor: pointer; font-size: 12px; font-weight: 670; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.alynivo__quick-reply:hover { border-color: var(--alynivo-color); background: #f2efff; transform: translateY(-1px); }
.alynivo__quick-reply small { display: grid; min-width: 23px; height: 23px; border-radius: 50%; place-items: center; background: #f1eefe; color: #7160d5; font-size: 10px; }
.alynivo__quick-replies.is-previous { margin-bottom: 8px; opacity: .48; }
.alynivo__quick-replies.is-previous button { cursor: default; transform: none; }

.alynivo__typing { display: flex; min-height: 38px; align-items: center; gap: 4px; }
.alynivo__typing i { width: 6px; height: 6px; border-radius: 50%; background: #a7a2ae; animation: alynivo-typing 1.1s infinite ease-in-out; }
.alynivo__typing i:nth-child(2) { animation-delay: .14s; }
.alynivo__typing i:nth-child(3) { animation-delay: .28s; }
.alynivo__typing span { margin-left: 6px; color: var(--alynivo-muted); font-size: 11px; }

.alynivo__product-list { display: grid; gap: 9px; margin: 3px 0 14px 35px; }
.alynivo__product { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; padding: 10px; border: 1px solid var(--alynivo-line); border-radius: 8px; background: #fff; box-shadow: 0 4px 15px rgba(28, 23, 40, .04); }
.alynivo__product img { width: 62px; height: 62px; border-radius: 6px; background: #f0eef4; object-fit: cover; }
.alynivo__product-copy { min-width: 0; }
.alynivo__product h3 { margin: 0 0 3px; overflow-wrap: anywhere; color: var(--alynivo-ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.alynivo__price { margin-bottom: 7px; color: #383440; font-size: 12px; font-weight: 720; }
.alynivo__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.alynivo__actions a,
.alynivo__actions button { min-height: 30px; padding: 5px 8px; border: 1px solid rgba(114, 87, 255, .35); border-radius: 5px; background: #fff; color: var(--alynivo-color); cursor: pointer; font-size: 11px; font-weight: 680; text-decoration: none; }
.alynivo__actions button { border-color: var(--alynivo-color); background: var(--alynivo-color); color: #fff; }
.alynivo__actions button.is-added { border-color: #16845c; background: #16845c; }
.alynivo__actions button:disabled { cursor: wait; opacity: .7; }
.alynivo__cart-link { border: 0 !important; padding-inline: 2px !important; }

.alynivo__plan-list { display: grid; gap: 10px; margin: 3px 0 14px 35px; }
.alynivo__plan { padding: 13px; border: 1px solid var(--alynivo-line); border-radius: 8px; background: #fff; box-shadow: 0 4px 15px rgba(28, 23, 40, .04); }
.alynivo__plan h3 { margin: 0 0 10px; color: var(--alynivo-ink); font-size: 14px; font-weight: 740; }
.alynivo__plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.alynivo__plan li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--alynivo-line); font-size: 11px; }
.alynivo__plan li > span:first-child { display: grid; min-width: 0; }
.alynivo__plan li strong { overflow-wrap: anywhere; font-size: 11px; }
.alynivo__plan li small { color: var(--alynivo-muted); font-size: 10px; }
.alynivo__plan li > span:last-child { flex: 0 0 auto; font-weight: 700; }
.alynivo__plan-total { margin: 10px 0; color: var(--alynivo-ink); font-size: 16px; font-weight: 760; text-align: right; }
.alynivo__plan-choose { width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 6px; background: var(--alynivo-color); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.alynivo__plan-choose:hover { filter: brightness(.95); }
.alynivo__messages > .alynivo__cart-link { display: block; margin: 4px 0 14px 35px; color: var(--alynivo-color); font-weight: 700; text-decoration: none; }

.alynivo__leave-fields {
	display: grid;
	gap: 8px;
	padding: 0 12px 8px;
	border-top: 1px solid var(--alynivo-line);
	background: #fff;
}
.alynivo__leave-fields[hidden] { display: none; }
.alynivo__leave-fields input {
	width: 100%;
	height: 38px;
	min-width: 0;
	padding: 0 12px;
	border: 1px solid #dedbe5;
	border-radius: 7px;
	background: #faf9fc;
	color: var(--alynivo-ink);
	font-size: 13px;
}
.alynivo__leave-fields input:focus {
	border-color: var(--alynivo-color);
	background: #fff;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(114, 87, 255, .1);
}
.alynivo__composer { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; padding: 11px 12px 8px; border-top: 1px solid var(--alynivo-line); background: #fff; }
.alynivo__composer--live { grid-template-columns: 42px minmax(0, 1fr) 42px; }
.alynivo__composer-hint {
	margin: 0;
	padding: 8px 14px 0;
	color: #6b6575;
	font-size: 12px;
	line-height: 1.4;
}
.alynivo__composer-hint[hidden] { display: none; }
.alynivo__composer input[name="message"] { width: 100%; height: 42px; min-width: 0; padding: 0 13px; border: 1px solid #dedbe5; border-radius: 7px; background: #faf9fc; color: var(--alynivo-ink); font-size: 13px; }
.alynivo__composer input[name="message"]::placeholder { color: #9893a2; }
/* `outline: 0` bleibt fuer den Mausklick richtig — der farbige Rand reicht
   dort. Beim Tastaturfokus muss der Rahmen aber stehen bleiben. */
.alynivo__composer input[name="message"]:focus { border-color: var(--alynivo-color); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(114, 87, 255, .1); }
.alynivo__composer input[name="message"]:focus-visible { outline: 2px solid var(--alynivo-color); outline-offset: 2px; }
.alynivo__composer button[type="submit"] { display: grid; width: 42px; height: 42px; border: 0; border-radius: 7px; place-items: center; background: var(--alynivo-color); color: #fff; cursor: pointer; font-size: 20px; font-weight: 700; }
.alynivo__composer button[type="submit"]:hover { filter: brightness(.95); }
.alynivo__attach { display: grid; width: 42px; height: 42px; border: 1px solid #dedbe5; border-radius: 7px; place-items: center; background: #faf9fc; color: var(--alynivo-ink); cursor: pointer; font-size: 20px; font-weight: 600; line-height: 1; }
.alynivo__attach:hover:not(:disabled) { border-color: var(--alynivo-color); }
.alynivo__attach:disabled { opacity: .45; cursor: default; }
.alynivo__bubble--attachment { padding: 8px; }
.alynivo__attachment-image { display: block; max-width: min(220px, 70vw); max-height: 180px; border-radius: 6px; }
.alynivo__attachment-chip { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alynivo__powered {
	padding: 0 12px 8px;
	background: #fff;
	color: #8a8592;
	font-size: 9px;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
}
.alynivo__powered--ai {
	padding-top: 7px;
	font-size: 10.5px;
	text-transform: none;
	border-top: 1px solid #f1eef4;
}
.alynivo__powered a {
	color: inherit;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.alynivo__powered a:hover { color: var(--alynivo-color); }

@keyframes alynivo-typing {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30% { transform: translateY(-3px); opacity: 1; }
}

/* Keep the desktop browser widget focused and compact. A 720px fixed panel
   leaves too much empty conversation space on tall screens and at higher
   browser zoom levels. The message area remains scrollable as threads grow.
   Phones keep their dedicated near-full-screen sheet below. */
@media (min-width: 481px) {
	.alynivo__panel {
		height: min(620px, calc(100dvh - 112px));
		min-height: 430px;
	}
}

@media (max-width: 480px) {
	.alynivo { right: 12px; bottom: 12px; left: 12px; }
	.alynivo--left { left: 12px; }
	/* Near-full-screen sheet on phones, with a visible gap at the top so the
	   page stays reachable behind it rather than a full takeover. The two
	   custom properties are only set by widget.js WHILE the composer input
	   is focused (keyboard open): they pin the panel to the Visual
	   Viewport's live top/height so the keyboard cannot expose the page
	   around the panel on iOS. At rest they are unset and the fallbacks
	   below (resting top gap, dvh height) apply. Android/Chrome resizes the
	   layout viewport natively via interactive-widget=resizes-content. */
	.alynivo__panel,
	.alynivo--left .alynivo__panel {
		position: fixed;
		right: 0;
		left: 0;
		top: var(--alynivo-vv-top, 104px);
		bottom: auto;
		width: auto;
		height: var(--alynivo-vv-height, calc(100dvh - 104px));
		min-height: 0;
		border-radius: 18px 18px 0 0;
		border-width: 1px 0 0;
		touch-action: none;
	}
	/* Folgt dem Daumen beim Herunterziehen. Ohne Übergang, solange gezogen
	   wird — sonst hinkt das Blatt dem Finger hinterher. */
	.alynivo__panel { transition: transform .22s ease; }
	.alynivo.is-dragging .alynivo__panel { transition: none; }

	/* Der Ziehgriff: die Geste, die jeder vom Handy kennt. Er ist auch die
	   Fläche, die den Zug entgegennimmt, deshalb ist er höher als der Strich
	   aussieht. */
	/* Der Griff ist ein zusätzliches Kind im Raster des Panels. Ohne eigene
	   Zeile rutschen alle folgenden Zeilen um eins weiter — die Kopfzeile
	   bekäme dann die große Zeile der Nachrichten und würde riesig. Genau das
	   ist beim ersten Aufspielen auf mavilab.de passiert. */
	.alynivo__panel { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
	.alynivo__grabber {
		display: block;
		flex: 0 0 auto;
		padding: 9px 0 3px;
		cursor: grab;
		touch-action: none;
	}
	.alynivo__grabber::after {
		content: '';
		display: block;
		width: 38px;
		height: 4px;
		margin: 0 auto;
		border-radius: 2px;
		background: #d8d4e0;
	}
	/* Die Kopfzeile zieht mit — der Griff allein ist ein schmales Ziel. */
	.alynivo__header { touch-action: none; }
	/* Nur die Nachrichten und die Eingabe scrollen wieder normal, sonst
	   ließe sich das Gespräch nicht mehr durchblättern. */
	.alynivo__messages,
	.alynivo__composer,
	.alynivo__leave-fields { touch-action: auto; }
	/* iOS freezes `position: fixed` boxes while the keyboard is open, so no
	   amount of repositioning can guarantee the panel covers every pixel the
	   keyboard scroll exposes. Instead, make what slips through harmless: a
	   neutral curtain three screens tall sits behind the panel while the
	   chat is open, so any exposed strip shows this backdrop — never the
	   page. Painted before the panel in tree order, so it stays behind it. */
	.alynivo.is-open::before {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		top: -100dvh;
		height: 300dvh;
		/* In Ruhe nur abgedunkelt: der Besucher sieht seine Seite hinter dem
		   Blatt liegen, statt vor einer grauen Wand zu stehen. Ein Tippen auf
		   den freien Streifen schließt den Chat (Behandlung in widget.js).
		   Sobald die Tastatur offen ist, wird daraus wieder eine deckende
		   Fläche — siehe .is-typing weiter unten. */
		background: rgba(26, 22, 36, .38);
		transition: background .2s ease;
	}
	/* Solange getippt wird, friert iOS `position: fixed` ein und legt Streifen
	   der Seite frei. Genau dann muss der Vorhang wieder decken, sonst springt
	   und zuckt sichtbarer Seiteninhalt neben dem Blatt. */
	.alynivo.is-open.is-typing::before { background: var(--alynivo-soft); }
	.alynivo__launcher { width: 54px; height: 54px; }
	.alynivo__messages { padding: 16px 12px; }
	/* iOS Safari auto-zooms the whole page when a focused input's font-size
	   is below 16px. That zoom makes the layout viewport wider than the
	   screen, so the right edge of the fixed panel — including the send
	   button — lands outside the visible area and everything looks shifted.
	   16px on phones prevents the zoom entirely. */
	.alynivo__composer input[name="message"],
	.alynivo__leave-fields input { font-size: 16px; }
	.alynivo__quick-replies,
	.alynivo__product-list,
	.alynivo__plan-list { margin-left: 34px; }
	.alynivo__quick-replies--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
	.alynivo__quick-replies--grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.alynivo *, .alynivo *::before, .alynivo *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Enquiry form (free tier): shown inside the message list when the assistant
   cannot help. Deliberately plain — it inherits the panel's own spacing. */
.alynivo__lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 8px;
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.02);
}

.alynivo__lead-intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.85;
}

.alynivo__lead input,
.alynivo__lead select,
.alynivo__lead textarea {
	width: 100%;
	box-sizing: border-box;
	/* 16px keeps iOS Safari from zooming the page when the field is focused. */
	font: inherit;
	font-size: 16px;
	padding: 9px 10px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 8px;
	background: #fff;
	color: inherit;
}

.alynivo__lead textarea {
	resize: vertical;
	min-height: 68px;
}

.alynivo__lead button[type="submit"] {
	align-self: flex-start;
	font: inherit;
	font-weight: 600;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--alynivo-primary, #7257ff);
	color: #fff;
	cursor: pointer;
}

.alynivo__lead button[type="submit"][disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Senden und Abbrechen nebeneinander. Ohne den zweiten Knopf war das Formular
   eine Sackgasse — der einzige Ausweg war, seine Kontaktdaten abzuschicken. */
.alynivo__lead-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.alynivo__lead-cancel {
	font: inherit;
	font-weight: 600;
	padding: 9px 14px;
	border: 1px solid var(--alynivo-line, #e7e4ea);
	border-radius: 8px;
	background: transparent;
	color: var(--alynivo-muted, #6f6878);
	cursor: pointer;
}

.alynivo__lead-cancel:hover {
	border-color: var(--alynivo-primary, #7257ff);
	color: var(--alynivo-primary, #7257ff);
}

.alynivo__lead-error {
	margin: 0;
	font-size: 13px;
	color: #b3261e;
}

/* ---- Motion polish -------------------------------------------------------
   Small, fast movements in the 200ms range: messages slide in, the panel
   scales up from the launcher corner, buttons lift on hover. The
   prefers-reduced-motion block above disables all of it. */
.alynivo__panel { animation: alynivo-panel-in .22s cubic-bezier(.21,.86,.38,1); transform-origin: bottom right; }
.alynivo--left .alynivo__panel { transform-origin: bottom left; }
.alynivo__message-row { animation: alynivo-message-in .22s ease both; }
.alynivo__quick-replies { animation: alynivo-message-in .25s ease both; }
.alynivo__quick-reply { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.alynivo__quick-reply:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20, 15, 45, .10); }
.alynivo__launcher { transition: transform .18s ease, box-shadow .18s ease; }
.alynivo__launcher:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(20, 15, 45, .28); }

@keyframes alynivo-panel-in {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes alynivo-message-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Links inside a message: readable on both the assistant's light bubble and
   the visitor's colored one, where the text is already white. */
.alynivo__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.alynivo__link:hover,
.alynivo__link:focus { text-decoration-thickness: 2px; }
.alynivo__message-row--assistant .alynivo__link { color: var(--alynivo-primary, #7257ff); }

/* Beschriftung über dem Feld. Der Platzhalter verschwindet beim ersten
   Zeichen; ohne Beschriftung weiß der Besucher dann nicht mehr, welches
   Feld welches ist. */
.alynivo__lead label.alynivo__lead-label { display: block; margin: 8px 0 3px; color: var(--alynivo-muted); font-size: 11.5px; font-weight: 600; }
.alynivo__lead label.alynivo__lead-label:first-of-type { margin-top: 4px; }