#ta-wurzel {
	--ta-akzent: #d8232a;
	--ta-text: #1d1d1f;
	--ta-rand: #e3e3e6;
	--ta-unten: 96px;
	--ta-groesse: 64px;
	position: fixed;
	right: 20px;
	bottom: calc( var( --ta-unten ) + env( safe-area-inset-bottom, 0px ) );
	z-index: 99999;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}

#ta-wurzel .ta-knopf {
	position: relative;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --ta-groesse );
	height: var( --ta-groesse );
	padding: 0;
	background: var(--ta-akzent);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .28 );
	transition: transform .15s ease, filter .15s ease;
}

#ta-wurzel .ta-knopf:hover { filter: brightness( 1.08 ); transform: scale( 1.05 ); }
#ta-wurzel .ta-knopf:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

#ta-wurzel .ta-knopf .ta-avatar {
	width: calc( var( --ta-groesse ) * .56 );
	height: calc( var( --ta-groesse ) * .56 );
}

/* Grüner Punkt: signalisiert, dass sofort geantwortet wird. */
#ta-wurzel .ta-punkt {
	position: absolute;
	right: calc( var( --ta-groesse ) * .06 );
	bottom: calc( var( --ta-groesse ) * .06 );
	width: calc( var( --ta-groesse ) * .2 );
	height: calc( var( --ta-groesse ) * .2 );
	min-width: 10px;
	min-height: 10px;
	background: #26a65b;
	border: 2.5px solid #fff;
	border-radius: 50%;
}

/* Kleine Ansprache neben dem Icon, verschwindet nach dem ersten Öffnen. */
#ta-wurzel .ta-sprechblase {
	position: absolute;
	right: calc( var( --ta-groesse ) + 10px );
	top: 50%;
	transform: translateY( -50% );
	white-space: nowrap;
	background: #fff;
	color: var(--ta-text);
	font-size: 14px;
	font-weight: 500;
	padding: 9px 14px;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, .18 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

#ta-wurzel .ta-knopf:hover .ta-sprechblase,
#ta-wurzel .ta-knopf:focus-visible .ta-sprechblase { opacity: 1; }

#ta-wurzel.ta-gesehen .ta-sprechblase { display: none; }

/* Avatar im Fensterkopf */
#ta-wurzel .ta-kopf .ta-avatar {
	width: 24px;
	height: 24px;
	color: var(--ta-akzent);
	flex: 0 0 auto;
}

#ta-wurzel .ta-fenster {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 370px;
	max-width: calc( 100vw - 32px );
	background: #fff;
	color: var(--ta-text);
	border: 1px solid var(--ta-rand);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, .25 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Muss nach der Regel oben stehen: "display: flex" hat mehr Gewicht als das
   hidden-Attribut, sonst steht das Fenster beim Laden der Seite offen. */
#ta-wurzel .ta-fenster[hidden] { display: none; }

#ta-wurzel .ta-kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ta-rand);
	background: #fafafa;
}

#ta-wurzel .ta-test {
	font-size: 11px;
	background: #ffe9a8;
	color: #6b4e00;
	padding: 2px 8px;
	border-radius: 999px;
}

#ta-wurzel .ta-zu {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	touch-action: manipulation;
}

#ta-wurzel .ta-lauf {
	padding: 14px;
	height: 340px;
	max-height: 55vh;
	overflow-y: auto;
	/* Verhindert, dass am Ende der Liste die Seite dahinter weiterscrollt. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#ta-wurzel .ta-blase {
	padding: 10px 13px;
	border-radius: 14px;
	max-width: 85%;
	overflow-wrap: anywhere;
}

#ta-wurzel .ta-ich,
#ta-wurzel .ta-warten,
#ta-wurzel .ta-fehler,
#ta-wurzel .ta-mensch { white-space: pre-wrap; }

/* Formatierte Antworten: Absätze und Aufzählungen */
#ta-wurzel .ta-blase p {
	margin: 0 0 8px;
	padding: 0;
}

#ta-wurzel .ta-blase p:last-child { margin-bottom: 0; }

#ta-wurzel .ta-blase ul {
	margin: 0 0 8px;
	padding-left: 18px;
	list-style: disc;
}

#ta-wurzel .ta-blase ul:last-child { margin-bottom: 0; }

#ta-wurzel .ta-blase li {
	margin: 0 0 4px;
	padding: 0;
	list-style: disc;
}

#ta-wurzel .ta-blase li:last-child { margin-bottom: 0; }

#ta-wurzel .ta-blase strong { font-weight: 700; }

#ta-wurzel .ta-bot  { background: #f1f1f4; align-self: flex-start; border-bottom-left-radius: 4px; }
#ta-wurzel .ta-ich  { background: var(--ta-akzent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
#ta-wurzel .ta-warten { opacity: .6; font-style: italic; }
#ta-wurzel .ta-fehler { background: #fde8e8; color: #8a1f1f; }
#ta-wurzel .ta-mensch { background: #e8f1fd; color: #123a6b; font-weight: 600; }

/* Eigene Fassung statt der Theme-Klasse: nicht jedes Theme bringt
   "screen-reader-text" mit, sonst steht das Label sichtbar im Formular. */
#ta-wurzel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

#ta-wurzel .ta-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--ta-rand);
}

#ta-wurzel .ta-form input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #c9c9cf;
	border-radius: 8px;
	font-size: 16px;
}

#ta-wurzel .ta-form button {
	background: var(--ta-akzent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
}

#ta-wurzel .ta-hinweis {
	margin: 0;
	padding: 0 12px 12px;
	font-size: 11.5px;
	color: #6b6b70;
}

@media ( max-width: 600px ) {

	#ta-wurzel {
		right: 14px;
		--ta-unten: 88px;
	}

	#ta-wurzel .ta-sprechblase { display: none; }

	/* Auf dem Handy als Blatt am unteren Rand statt als kleines Fenster.
	   Fest positioniert, damit es sich nicht am Icon ausrichtet. */
	#ta-wurzel .ta-fenster {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc( 8px + env( safe-area-inset-bottom, 0px ) );
		top: auto;
		width: auto;
		max-width: none;
		/* dvh statt vh: rechnet die eingeblendete Tastatur und die
		   Safari-Leisten mit, vh tut das nicht. */
		max-height: 80dvh;
		border-radius: 16px;
	}

	/* Höhe ergibt sich aus dem verbleibenden Platz, nicht aus einem festen Wert. */
	#ta-wurzel .ta-lauf {
		flex: 1 1 auto;
		height: auto;
		min-height: 120px;
		max-height: none;
		padding: 12px;
	}

	#ta-wurzel .ta-kopf { padding: 14px; }

	#ta-wurzel .ta-form {
		padding: 10px 12px;
		padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	}

	#ta-wurzel .ta-form button {
		padding: 12px 18px;
		touch-action: manipulation;
	}

	#ta-wurzel .ta-blase { max-width: 90%; }

	#ta-wurzel .ta-hinweis {
		padding: 0 12px 10px;
		padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	}
}

/* Sehr niedrige Fenster (Tastatur offen, Handy quer) */
@media ( max-height: 480px ) {
	#ta-wurzel .ta-fenster { max-height: 92dvh; }
	#ta-wurzel .ta-hinweis { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	#ta-wurzel .ta-knopf { transition: none; }
	#ta-wurzel .ta-knopf:hover { transform: none; }
}