/**
 * Gestaltung des Website-Chats.
 *
 * Der Ausloeser sitzt NEBEN dem Knopf zurueck nach oben, nicht darueber: der
 * ist bis 400 Pixel Scrollweg unsichtbar, und zwei Knoepfe uebereinander an
 * derselben Stelle sind auf dem Telefon nicht zu treffen.
 *
 * Stapelordnung 900 und 990 - beide UNTER dem Einwilligungsdialog (1000).
 * Der gewinnt immer; ein Chatfenster darf ihn nie verdecken.
 *
 * @package modernx
 */

.mx-chat-ausloeser {
	position: fixed;
	right: 50px;
	bottom: 0;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	border: 0;
	border-radius: 4px 4px 0 0;
	background: #006AA1;
	color: #fff;
	font: 600 0.95rem/1.2 inherit;
	cursor: pointer;
	box-shadow: 0 -2px 10px rgba( 0, 0, 0, 0.16 );
}

.mx-chat-ausloeser:hover,
.mx-chat-ausloeser:focus-visible {
	background: #00587f;
}

.mx-chat-ausloeser:focus-visible {
	outline: 3px solid #003a55;
	outline-offset: 2px;
}

.mx-chat-ausloeser__zeichen {
	font-size: 0.7em;
	color: #7ce0a3;
}

/*
 * Das Fenster wird mit dem Attribut hidden ausgeliefert. Ohne diese Zeile
 * bliebe es sichtbar: display:flex weiter unten ist eine Autorenregel und
 * schlaegt [hidden]{display:none} aus dem Browser-Stylesheet. Das Fenster
 * stuende dann auf jeder Seite offen, und der Schliessen-Knopf, der nur
 * hidden setzt, bliebe wirkungslos. Das Theme deklariert das an fuenf
 * anderen Stellen genauso einzeln - eine globale Regel gibt es hier nicht.
 */
.mx-chat[hidden],
.mx-chat__vorschlaege[hidden] {
	display: none;
}

.mx-chat {
	position: fixed;
	right: 50px;
	bottom: 0;
	z-index: 990;
	display: flex;
	flex-direction: column;
	width: min( 26rem, calc( 100vw - 2rem ) );
	max-height: min( 34rem, calc( 100vh - 2rem ) );
	background: #fff;
	border: 1px solid #d3dae2;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 -4px 26px rgba( 0, 0, 0, 0.18 );
	overflow: hidden;
}

/* Ohne prefers-reduced-motion faehrt das Fenster kurz hoch. Mit: es ist
   einfach da. */
.mx-chat--auf {
	animation: mx-chat-auf 180ms ease-out;
}

@keyframes mx-chat-auf {
	from { transform: translateY( 12px ); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mx-chat--auf { animation: none; }
}

.mx-chat__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	background: #006AA1;
	color: #fff;
}

.mx-chat__titel {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
}

.mx-chat__schliessen {
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0 0.2rem;
	cursor: pointer;
}

.mx-chat__schliessen:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Lage 2 der Kennzeichnung nach Artikel 50: nicht wegklickbar, immer da. */
.mx-chat__hinweis {
	margin: 0;
	padding: 0.7rem 1rem;
	background: #eef4f8;
	border-bottom: 1px solid #d3dae2;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #2c3a44;
}

.mx-chat__lauf {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.9rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.mx-chat__vorschlaege {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mx-chat__vorschlag {
	border: 1px solid #b9c6d1;
	background: #fff;
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
	font-size: 0.85rem;
	cursor: pointer;
	text-align: left;
}

.mx-chat__vorschlag:hover,
.mx-chat__vorschlag:focus-visible {
	border-color: #006AA1;
	color: #006AA1;
}

.mx-chat__zeile--ich {
	align-self: flex-end;
	max-width: 85%;
	background: #006AA1;
	color: #fff;
	border-radius: 10px 10px 2px 10px;
	padding: 0.55rem 0.8rem;
}

.mx-chat__zeile--ki {
	align-self: flex-start;
	max-width: 92%;
	background: #f4f7fa;
	border: 1px solid #e2e9ef;
	border-radius: 10px 10px 10px 2px;
	padding: 0.55rem 0.8rem;
}

.mx-chat__zeile--warten .mx-chat__text {
	color: #61707c;
	font-style: italic;
}

/* Lage 3: die Marke an jeder einzelnen Antwort. */
.mx-chat__marke {
	display: inline-block;
	margin-bottom: 0.3rem;
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
	background: #dbe7ef;
	color: #124f70;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.mx-chat__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	white-space: pre-wrap;   /* Zeilenumbrueche des Modells erhalten */
	overflow-wrap: anywhere; /* lange Adressen sprengen das Fenster nicht */
}

.mx-chat__quellen {
	margin-top: 0.55rem;
	padding-top: 0.45rem;
	border-top: 1px solid #e2e9ef;
	font-size: 0.8rem;
}

.mx-chat__quellen-titel {
	display: block;
	color: #61707c;
	margin-bottom: 0.2rem;
}

.mx-chat__quellen ul {
	margin: 0;
	padding-left: 1.1rem;
}

.mx-chat__angebot {
	margin-top: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.mx-chat__angebot-text {
	flex: 1 1 100%;
	margin: 0 0 0.2rem;
	font-size: 0.85rem;
	color: #2c3a44;
}

.mx-chat__knopf {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border-radius: 4px;
	background: #006AA1;
	color: #fff;
	font-size: 0.85rem;
	text-decoration: none;
}

.mx-chat__knopf--zweit {
	background: #fff;
	color: #006AA1;
	border: 1px solid #006AA1;
}

/* WordPress definiert .screen-reader-text im Block-Stylesheet. Der Chat soll
   aber auch dann lesbar bleiben, wenn das jemand abbestellt - die Beschriftung
   des Eingabefeldes gehoert Vorleseprogrammen, nicht dem Fenster. */
.mx-chat .screen-reader-text,
.mx-chat__melder {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.mx-chat__form {
	display: flex;
	gap: 0.5rem;
	padding: 0.7rem 1rem 0.9rem;
	border-top: 1px solid #d3dae2;
	background: #fff;
}

.mx-chat__eingabe {
	flex: 1 1 auto;
	resize: none;
	border: 1px solid #b9c6d1;
	border-radius: 4px;
	padding: 0.45rem 0.6rem;
	font: inherit;
	font-size: 0.92rem;
}

.mx-chat__senden {
	border: 0;
	border-radius: 4px;
	background: #006AA1;
	color: #fff;
	padding: 0 1rem;
	font: 600 0.9rem/1 inherit;
	cursor: pointer;
}

.mx-chat__senden[disabled] {
	background: #8fa9b9;
	cursor: default;
}

/* Unter 992 Pixel blendet das Theme den Knopf zurueck nach oben aus - dann
   darf der Ausloeser dessen Platz einnehmen. */
@media ( max-width: 991px ) {
	.mx-chat-ausloeser {
		right: 12px;
		bottom: 12px;
		border-radius: 4px;
	}

	.mx-chat {
		right: 0;
		left: 0;
		width: auto;
		max-height: 80vh;
		border-radius: 0;
	}
}