.kcb-root {
	--kcb-shadow: 0 18px 48px rgba( 0, 0, 0, 0.18 );
	font-family: var( --kcb-font-family, inherit );
	font-size: var( --kcb-font-size, 15px );
	color: var( --kcb-text, #1c1e21 );
	line-height: 1.5;
}

.kcb-root:not( .kcb-inline ) {
	position: fixed;
	z-index: 99999;
	display: flex;
	/* Umgekehrt, damit der Startknopf unten sitzt und das Panel darueber aufgeht. */
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 12px;
}

/* --- Die vier Ecken --- */
.kcb-root.kcb-pos-bottom-right:not( .kcb-inline ) {
	bottom: var( --kcb-offset-y, 20px );
	right: var( --kcb-offset-x, 20px );
}

.kcb-root.kcb-pos-bottom-left:not( .kcb-inline ) {
	bottom: var( --kcb-offset-y, 20px );
	left: var( --kcb-offset-x, 20px );
	align-items: flex-start;
}

.kcb-root.kcb-pos-top-right:not( .kcb-inline ) {
	top: var( --kcb-offset-y, 20px );
	right: var( --kcb-offset-x, 20px );
	flex-direction: column; /* Knopf oben, Panel darunter. */
}

.kcb-root.kcb-pos-top-left:not( .kcb-inline ) {
	top: var( --kcb-offset-y, 20px );
	left: var( --kcb-offset-x, 20px );
	flex-direction: column;
	align-items: flex-start;
}

.kcb-launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	height: var( --kcb-launcher-size, 56px );
	border: 0;
	border-radius: 999px;
	background: var( --kcb-primary, #1f6feb );
	color: var( --kcb-on-primary, #fff );
	font: inherit;
	font-family: var( --kcb-font-family, inherit );
	font-weight: 600;
	cursor: pointer;
	box-shadow: var( --kcb-shadow );
	transition: background 0.15s ease, transform 0.15s ease;
}

.kcb-launcher:hover {
	background: var( --kcb-primary-dark, #1a5ec4 );
	transform: translateY( -1px );
}

.kcb-launcher:focus-visible {
	outline: 3px solid var( --kcb-primary-dark, #1a5ec4 );
	outline-offset: 2px;
}

/* Runder oder eckiger Knopf ohne Text. */
.kcb-launcher-circle,
.kcb-launcher-square {
	width: var( --kcb-launcher-size, 56px );
	padding: 0;
}

.kcb-launcher-square {
	border-radius: calc( var( --kcb-radius, 16px ) * 0.75 );
}

.kcb-launcher-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.kcb-launcher-icon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	border-radius: 50%;
}

.kcb-launcher-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var( --kcb-primary, #1f6feb );
	animation: kcb-pulse 2.4s infinite;
	pointer-events: none;
}

.kcb-launcher-pulse {
	position: relative;
}

@keyframes kcb-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 0, 0, 0, 0.25 ); }
	70% { box-shadow: 0 0 0 14px rgba( 0, 0, 0, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 0, 0, 0, 0 ); }
}

/* --- Sprechblase am Startknopf --- */
.kcb-teaser {
	position: relative;
	max-width: 260px;
	padding: 10px 34px 10px 14px;
	border-radius: 14px;
	background: var( --kcb-panel-bg, #fff );
	color: var( --kcb-text, #1c1e21 );
	box-shadow: var( --kcb-shadow );
	font-size: 0.92em;
	line-height: 1.4;
	cursor: pointer;
	animation: kcb-teaser-in 0.28s ease both;
}

.kcb-teaser::after {
	content: "";
	position: absolute;
	bottom: -6px;
	right: 22px;
	width: 12px;
	height: 12px;
	background: inherit;
	transform: rotate( 45deg );
	box-shadow: 3px 3px 6px rgba( 0, 0, 0, 0.06 );
}

.kcb-pos-left .kcb-teaser::after,
.kcb-pos-bottom-left .kcb-teaser::after,
.kcb-pos-top-left .kcb-teaser::after {
	right: auto;
	left: 22px;
}

.kcb-pos-top-right .kcb-teaser::after,
.kcb-pos-top-left .kcb-teaser::after {
	bottom: auto;
	top: -6px;
}

.kcb-teaser-close {
	position: absolute;
	top: 4px;
	right: 6px;
	background: transparent;
	border: 0;
	font-size: 16px;
	line-height: 1;
	color: inherit;
	opacity: 0.5;
	cursor: pointer;
	padding: 2px 4px;
}

.kcb-teaser-close:hover {
	opacity: 1;
}

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

.kcb-panel {
	display: flex;
	flex-direction: column;
	width: var( --kcb-width, 380px );
	max-width: calc( 100vw - 32px );
	height: var( --kcb-height, 560px );
	max-height: calc( 100vh - 120px );
	background: var( --kcb-panel-bg, #fff );
	border-radius: var( --kcb-radius, 16px );
	box-shadow: var( --kcb-shadow );
	overflow: hidden;
}

.kcb-panel-inline {
	width: 100%;
	max-width: 100%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.12 );
	border: 1px solid rgba( 0, 0, 0, 0.08 );
}

.kcb-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var( --kcb-primary, #1f6feb );
	color: var( --kcb-on-primary, #fff );
}

.kcb-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.kcb-titles {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.kcb-title {
	font-size: 1em;
	line-height: 1.2;
}

.kcb-subtitle {
	font-size: 0.82em;
	opacity: 0.85;
}

.kcb-close,
.kcb-reset {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	opacity: 0.85;
}

.kcb-close:hover,
.kcb-reset:hover {
	opacity: 1;
	background: rgba( 255, 255, 255, 0.15 );
}

.kcb-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var( --kcb-panel-bg, #fff );
}

.kcb-msg {
	display: flex;
}

.kcb-msg-user {
	justify-content: flex-end;
}

.kcb-bubble {
	max-width: 86%;
	padding: 9px 12px;
	border-radius: 14px;
	background: var( --kcb-bot-bubble, #f1f3f5 );
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.kcb-msg-user .kcb-bubble {
	background: var( --kcb-user-bubble, #1f6feb );
	color: var( --kcb-user-text, #fff );
}

.kcb-typing .kcb-bubble {
	display: flex;
	gap: 4px;
	align-items: center;
}

.kcb-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	animation: kcb-blink 1.2s infinite;
}

.kcb-typing span:nth-child( 2 ) {
	animation-delay: 0.2s;
}

.kcb-typing span:nth-child( 3 ) {
	animation-delay: 0.4s;
}

@keyframes kcb-blink {
	0%, 60%, 100% { opacity: 0.25; }
	30% { opacity: 0.9; }
}

@media ( prefers-reduced-motion: reduce ) {
	.kcb-typing span,
	.kcb-launcher-pulse::after,
	.kcb-teaser { animation: none; }
	.kcb-launcher { transition: none; }
	.kcb-anim-fade .kcb-panel,
	.kcb-anim-slide .kcb-panel,
	.kcb-anim-scale .kcb-panel { animation: none; }
}

/* --- Art des Aufgehens --- */
.kcb-anim-fade .kcb-panel:not( [hidden] ) { animation: kcb-fade 0.22s ease both; }
.kcb-anim-slide .kcb-panel:not( [hidden] ) { animation: kcb-slide 0.26s cubic-bezier( 0.22, 1, 0.36, 1 ) both; }
.kcb-anim-scale .kcb-panel:not( [hidden] ) { animation: kcb-scale 0.24s cubic-bezier( 0.22, 1, 0.36, 1 ) both; }

.kcb-pos-top-right.kcb-anim-slide .kcb-panel:not( [hidden] ),
.kcb-pos-top-left.kcb-anim-slide .kcb-panel:not( [hidden] ) { animation-name: kcb-slide-down; }

@keyframes kcb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes kcb-slide {
	from { opacity: 0; transform: translateY( 16px ); }
	to { opacity: 1; transform: none; }
}

@keyframes kcb-slide-down {
	from { opacity: 0; transform: translateY( -16px ); }
	to { opacity: 1; transform: none; }
}

@keyframes kcb-scale {
	from { opacity: 0; transform: scale( 0.94 ); }
	to { opacity: 1; transform: none; }
}

.kcb-card {
	align-self: flex-start;
	max-width: 90%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var( --kcb-primary, #1f6feb );
	background: rgba( 0, 0, 0, 0.02 );
}

.kcb-card-link {
	margin-top: 6px;
	font-weight: 600;
	color: var( --kcb-primary, #1f6feb );
}

.kcb-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* Oben Luft zum Verlauf, unten zum Eingabefeld — sonst kleben die
	   Uhrzeiten an der letzten Antwort. */
	padding: 12px 14px 4px;
}

.kcb-quick:empty {
	display: none;
}

.kcb-quick-btn {
	padding: 6px 12px;
	border: 1px solid var( --kcb-primary, #1f6feb );
	border-radius: 999px;
	background: transparent;
	color: var( --kcb-primary, #1f6feb );
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

.kcb-quick-btn:hover {
	background: var( --kcb-primary, #1f6feb );
	color: var( --kcb-on-primary, #fff );
}

.kcb-form {
	padding: 10px 14px 12px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.kcb-consent {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: flex-start;
	font-size: 0.82em;
	margin-bottom: 8px;
	opacity: 0.9;
}

/* Der Text nimmt die Restbreite, der Link steht darunter. Stehen beide
   nebeneinander, bleiben fuer den Satz keine 180 Pixel — er zerfaellt dann
   in vier Zeilen. */
.kcb-consent > span {
	flex: 1 1 0;
	min-width: 0;
}

.kcb-consent > a {
	flex: 1 0 100%;
	margin-left: 21px;
}

.kcb-input-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.kcb-input {
	flex: 1;
	resize: none;
	/* Die Hoehe kommt aus der einen Zeile (rows="1"). Feste Pixel waeren
	   bei groesserer Schrift zu knapp; die !important brauchen wir nur,
	   um Theme-Regeln auf textarea abzuwehren. */
	height: auto !important;
	min-height: 0 !important;
	max-height: 120px !important;
	padding: 9px 12px;
	border: 1px solid rgba( 0, 0, 0, 0.16 );
	border-radius: 12px;
	font: inherit;
	color: inherit;
	background: #fff;
}

.kcb-input:focus {
	outline: 2px solid var( --kcb-primary, #1f6feb );
	outline-offset: 1px;
}

.kcb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.kcb-send {
	flex: none;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --kcb-primary, #1f6feb );
	color: var( --kcb-on-primary, #fff );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font: inherit;
	font-weight: 550;
	line-height: 1;
}

/* Form des Senden-Knopfes — einstellbar unter Anzeige. */
.kcb-send-square { border-radius: var( --kcb-radius, 10px ); }
.kcb-send-pill   { border-radius: 999px; }

/* Steht ein Text auf dem Knopf, waechst er mit statt rund zu bleiben. */
.kcb-send-mit-text {
	width: auto;
	padding: 0 16px;
	border-radius: var( --kcb-radius, 10px );
}

.kcb-send-mit-text.kcb-send-pill   { border-radius: 999px; }
.kcb-send-mit-text.kcb-send-circle { border-radius: 999px; }

.kcb-send-text { white-space: nowrap; }

.kcb-send:disabled {
	opacity: 0.5;
	cursor: default;
}

.kcb-branding {
	margin-top: 8px;
	font-size: 0.72em;
	text-align: center;
	opacity: 0.55;
}

.kcb-status-dot {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.kcb-status-dot::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	flex: none;
}

@media ( max-width: 600px ) {
	/*
	 * Auf dem Handy darf das Fenster die volle Breite nutzen — der Startknopf
	 * muss aber in der eingestellten Ecke bleiben. Frueher stand hier
	 * `align-items: stretch`, was den Knopf ueber die ganze Breite zog und
	 * ihn dadurch links erscheinen liess, obwohl rechts eingestellt war.
	 */
	.kcb-root:not( .kcb-inline ) {
		left: 12px;
		right: 12px;
	}

	.kcb-root.kcb-pos-bottom-right:not( .kcb-inline ),
	.kcb-root.kcb-pos-bottom-left:not( .kcb-inline ) {
		bottom: 12px;
		top: auto;
	}

	.kcb-root.kcb-pos-top-right:not( .kcb-inline ),
	.kcb-root.kcb-pos-top-left:not( .kcb-inline ) {
		top: 12px;
		bottom: auto;
	}

	.kcb-root.kcb-pos-bottom-right:not( .kcb-inline ),
	.kcb-root.kcb-pos-top-right:not( .kcb-inline ) {
		align-items: flex-end;
	}

	.kcb-root.kcb-pos-bottom-left:not( .kcb-inline ),
	.kcb-root.kcb-pos-top-left:not( .kcb-inline ) {
		align-items: flex-start;
	}

	.kcb-panel {
		width: 100%;
	}

	.kcb-root.kcb-mobile-full.kcb-open:not( .kcb-inline ) .kcb-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.kcb-root.kcb-mobile-full.kcb-open:not( .kcb-inline ) .kcb-launcher,
	.kcb-root.kcb-open:not( .kcb-inline ) .kcb-teaser {
		display: none;
	}

	.kcb-teaser {
		max-width: none;
	}
}


/* ==========================================================================
   Gestaltungsvorlagen
   Die Vorlage legt nur die Form fest: Rundungen, Abstaende, Kopfzeile,
   Schatten. Farben und Schrift kommen weiterhin aus den Einstellungen und
   ueberschreiben die Vorlage, wo der Betreiber sie anfasst.
   ========================================================================== */

/* --- Klar: flach und eckig, viel Luft, duenne Linien --- */
.kcb-tpl-klar .kcb-panel { border-radius: 4px; border: 1px solid rgba( 0, 0, 0, 0.12 ); box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.08 ); }
.kcb-tpl-klar .kcb-head { background: var( --kcb-panel-bg, #fff ); color: var( --kcb-text, #1c1e21 ); border-bottom: 2px solid var( --kcb-primary, #1f6feb ); padding: 16px 18px; }
.kcb-tpl-klar .kcb-reset,
.kcb-tpl-klar .kcb-close { color: var( --kcb-text, #1c1e21 ); }
.kcb-tpl-klar .kcb-messages { padding: 18px; }
.kcb-tpl-klar .kcb-msg { margin-bottom: 14px; }
.kcb-tpl-klar .kcb-bubble { border-radius: 4px; padding: 12px 14px; }
.kcb-tpl-klar .kcb-msg-assistant .kcb-bubble { border: 1px solid rgba( 0, 0, 0, 0.07 ); }
.kcb-tpl-klar .kcb-quick-btn,
.kcb-tpl-klar .kcb-input,
.kcb-tpl-klar .kcb-send,
.kcb-tpl-klar .kcb-launcher { border-radius: 4px; }

/* --- Weich: runde Blasen, Farbverlauf im Kopf, weicher Schatten --- */
.kcb-tpl-weich .kcb-panel { border-radius: 20px; border: 0; box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.16 ); }
.kcb-tpl-weich .kcb-head { background: linear-gradient( 135deg, var( --kcb-primary, #1f6feb ), var( --kcb-primary-dark, #1a5ec4 ) ); padding: 18px; border-radius: 20px 20px 0 0; }
.kcb-tpl-weich .kcb-bubble { border-radius: 18px; padding: 11px 15px; }
.kcb-tpl-weich .kcb-msg-assistant .kcb-bubble { border-bottom-left-radius: 5px; }
.kcb-tpl-weich .kcb-msg-user .kcb-bubble { border-bottom-right-radius: 5px; }
.kcb-tpl-weich .kcb-quick-btn { border-radius: 999px; }
.kcb-tpl-weich .kcb-input { border-radius: 999px; padding-left: 16px; }
.kcb-tpl-weich .kcb-send { border-radius: 50%; }
.kcb-tpl-weich .kcb-send.kcb-send-mit-text { border-radius: 999px; }
.kcb-tpl-weich .kcb-launcher { border-radius: 999px; }

/* --- Kompakt: dicht und klein, fuer lange Gespraeche --- */
.kcb-tpl-kompakt .kcb-panel { border-radius: 8px; box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.12 ); font-size: 0.94em; }
.kcb-tpl-kompakt .kcb-head { padding: 11px 14px; }
.kcb-tpl-kompakt .kcb-subtitle { display: none; }
.kcb-tpl-kompakt .kcb-messages { padding: 12px; }
.kcb-tpl-kompakt .kcb-msg { margin-bottom: 7px; }
.kcb-tpl-kompakt .kcb-bubble { border-radius: 8px; padding: 7px 11px; line-height: 1.45; }
.kcb-tpl-kompakt .kcb-quick { gap: 5px; padding: 9px 12px 3px; }
.kcb-tpl-kompakt .kcb-quick-btn { border-radius: 6px; padding: 4px 9px; }
.kcb-tpl-kompakt .kcb-form { padding: 9px 12px; }
.kcb-tpl-kompakt .kcb-input,
.kcb-tpl-kompakt .kcb-send { border-radius: 6px; }
.kcb-tpl-kompakt .kcb-send { min-width: 34px; height: 34px; }
.kcb-tpl-kompakt .kcb-branding { display: none; }
.kcb-tpl-kompakt .kcb-launcher { border-radius: 8px; }

/* --- Kontrast: dunkles Fenster, helle Schrift --- */
.kcb-tpl-kontrast .kcb-panel { border-radius: 14px; background: #16181c; color: #e8eaed; border: 1px solid #2a2e35; box-shadow: 0 14px 44px rgba( 0, 0, 0, 0.4 ); }
.kcb-tpl-kontrast .kcb-head { background: #0f1114; color: #fff; border-bottom: 1px solid #2a2e35; padding: 16px 18px; }
.kcb-tpl-kontrast .kcb-messages { padding: 18px; }
.kcb-tpl-kontrast .kcb-bubble { border-radius: 14px; }
.kcb-tpl-kontrast .kcb-msg-assistant .kcb-bubble { background: #22262c; color: #e8eaed; }
.kcb-tpl-kontrast .kcb-quick-btn { background: transparent; border-color: #3a3f47; color: #e8eaed; border-radius: 999px; }
.kcb-tpl-kontrast .kcb-quick-btn:hover { background: var( --kcb-primary, #1f6feb ); border-color: var( --kcb-primary, #1f6feb ); color: var( --kcb-on-primary, #fff ); }
.kcb-tpl-kontrast .kcb-form { border-top: 1px solid #2a2e35; }
.kcb-tpl-kontrast .kcb-input { background: #22262c; border-color: #3a3f47; color: #e8eaed; border-radius: 10px; }
.kcb-tpl-kontrast .kcb-input::placeholder { color: #8b9199; }
.kcb-tpl-kontrast .kcb-send { border-radius: 10px; }
.kcb-tpl-kontrast .kcb-branding { color: #8b9199; }
.kcb-tpl-kontrast .kcb-launcher { border-radius: 999px; }

/* --- Klassisch: Serifen-Titel, Rahmen statt Schatten --- */
.kcb-tpl-klassisch .kcb-panel { border-radius: 2px; border: 1px solid rgba( 0, 0, 0, 0.18 ); box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 ); }
.kcb-tpl-klassisch .kcb-head { background: rgba( 0, 0, 0, 0.03 ); color: var( --kcb-text, #1c1e21 ); border-bottom: 1px solid rgba( 0, 0, 0, 0.18 ); padding: 16px 18px; }
.kcb-tpl-klassisch .kcb-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.06em; }
.kcb-tpl-klassisch .kcb-subtitle { font-style: italic; }
.kcb-tpl-klassisch .kcb-reset,
.kcb-tpl-klassisch .kcb-close { color: var( --kcb-text, #1c1e21 ); }
.kcb-tpl-klassisch .kcb-messages { padding: 18px; }
.kcb-tpl-klassisch .kcb-msg { margin-bottom: 13px; }
.kcb-tpl-klassisch .kcb-bubble { border-radius: 2px; padding: 11px 14px; line-height: 1.6; }
.kcb-tpl-klassisch .kcb-msg-assistant .kcb-bubble { border-left: 3px solid var( --kcb-primary, #1f6feb ); }
.kcb-tpl-klassisch .kcb-quick-btn,
.kcb-tpl-klassisch .kcb-input,
.kcb-tpl-klassisch .kcb-send,
.kcb-tpl-klassisch .kcb-launcher { border-radius: 2px; }