/* Taski, der KI-Assistent: Startknopf und Chatfenster unten rechts (template-parts/assistent.php). */

.ki {
	--ki-rand: max(20px, env(safe-area-inset-right, 0px));
	--ki-unten: max(20px, env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: var(--ki-rand);
	bottom: var(--ki-unten);
	z-index: 60;
	font-family: var(--tl-schrift);
}

.ki[hidden],
.ki [hidden] {
	display: none !important;
}

/* ---------- Startknopf ---------- */
.ki__start {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 20px 0 10px;
	border: 1px solid rgba(60, 184, 255, 0.45);
	border-radius: 999px;
	background: var(--tl-nacht);
	box-shadow: 0 14px 34px -14px rgba(0, 7, 14, 0.8), 0 0 0 4px rgba(0, 167, 254, 0.08);
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.ki__start:hover,
.ki__start:focus-visible {
	border-color: var(--tl-blau);
	background: #031726;
}

.ki__start:focus-visible {
	outline-color: var(--tl-blau);
}

.ki__start-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.ki__start-name {
	font-family: var(--tl-schrift-titel);
	font-size: 1rem;
	font-weight: 700;
}

.ki__start-art {
	color: #b9c6d3;
	font-size: 0.75rem;
	font-weight: 500;
}

/* ---------- Figur ---------- */
.ki-figur {
	flex: none;
	width: 40px;
	height: 40px;
	overflow: visible;
}

.ki-figur--start {
	width: 38px;
	height: 38px;
}

.ki-figur--kopf {
	width: 44px;
	height: 44px;
}

.ki-figur--zeile {
	width: 30px;
	height: 30px;
	margin-bottom: 2px;
}

.ki-figur__stab {
	fill: none;
	stroke: var(--tl-blau);
	stroke-width: 2;
	stroke-linecap: round;
}

.ki-figur__spitze {
	fill: var(--tl-rot);
}

.ki-figur__ohr {
	fill: var(--tl-blau);
}

.ki-figur__kopf {
	fill: #0b2a44;
	stroke: var(--tl-blau);
	stroke-width: 2;
}

.ki-figur__schirm {
	fill: #021220;
}

.ki-figur__augen circle {
	fill: #5cc8ff;
}

.ki-figur__mund {
	fill: none;
	stroke: #5cc8ff;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.ki-figur__augen,
.ki-figur__spitze,
.ki-figur--start {
	transform-box: fill-box;
	transform-origin: center;
}

.ki--offen .ki__start {
	display: none;
}

/* ---------- Fenster ---------- */
.ki__fenster {
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 40px));
	height: min(640px, calc(100dvh - 140px));
	overflow: hidden;
	border: 1px solid #d5dee8;
	border-radius: 12px;
	background: var(--tl-weiss);
	box-shadow: 0 30px 70px -24px rgba(0, 13, 22, 0.55);
	color: var(--tl-tinte);
}

/* Kopf: Figur, Name und „KI-Assistent von Tasklytic“, Knöpfe rechts. Er scrollt nie mit, nur der Verlauf darunter. */
.ki__kopf {
	display: grid;
	flex: none;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	padding: 10px 8px 10px 16px;
	background: var(--tl-nacht);
	color: var(--tl-text-hell);
}

.ki__kopf .ki-figur {
	grid-row: 1 / 3;
	grid-column: 1;
}

.ki__titel {
	align-self: end;
	grid-column: 2;
}

.ki__hinweis {
	align-self: start;
	grid-row: 2;
	grid-column: 2;
}

.ki__kopf :focus-visible {
	outline-color: #ffffff;
}

.ki__titel {
	grid-row: 1;
	margin: 0;
	color: #ffffff;
	font-family: var(--tl-schrift-titel);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.ki__hinweis {
	margin: 0;
	color: #c3cdd8;
	font-size: 0.8125rem;
	line-height: 1.35;
}


.ki__kopf-knoepfe {
	grid-row: 1 / 3;
	grid-column: 3;
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
}

.ki__vorlesen,
.ki__neu,
.ki__zu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tl-ziel);
	min-height: var(--tl-ziel);
	padding: 0 8px;
	border: 0;
	border-radius: var(--tl-radius);
	background: transparent;
	color: #dfe7ef;
	font-size: 0.8125rem;
	cursor: pointer;
}

.ki__vorlesen:hover,
.ki__neu:hover,
.ki__zu:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.ki__vorlesen .icon,
.ki__neu .icon,
.ki__zu .icon {
	width: 20px;
	height: 20px;
}

.ki__vorlesen[hidden] {
	display: none;
}

/* Schalter „Antworten vorlesen“: an mit Fläche und Rahmen, nicht nur über die Farbe */
.ki__vorlesen[aria-checked="true"] {
	box-shadow: inset 0 0 0 1.5px var(--tl-blau);
	background: rgba(0, 167, 254, 0.18);
	color: #ffffff;
}

.ki__vorlesen-hinweis {
	margin: 0;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	background: #0b1a29;
	color: #e7edf3;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.ki__vorlesen-hinweis[hidden] {
	display: none;
}

/* ---------- Verlauf ---------- */
.ki__verlauf {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 18px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--tl-hell);
}

.ki__nachricht {
	max-width: 88%;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.ki__nachricht p,
.ki__nachricht ul {
	margin: 0;
}

.ki__nachricht p + p,
.ki__nachricht p + ul,
.ki__nachricht ul + p {
	margin-top: 8px;
}

.ki__nachricht ul {
	padding-left: 1.15em;
}

/* Antworten von Taski: Figur links neben der Blase */
.ki__zeile {
	display: flex;
	align-self: flex-start;
	align-items: flex-end;
	gap: 8px;
	max-width: 94%;
}

.ki__zeile .ki__nachricht {
	min-width: 0;
	max-width: none;
}

.ki__nachricht--assistent a:not(.ki__aktion) {
	color: var(--tl-blau-text);
}

.ki__nachricht--assistent {
	align-self: flex-start;
	border: 1px solid #dfe6ee;
	border-bottom-left-radius: 4px;
	background: var(--tl-weiss);
}

.ki__nachricht--nutzer {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: #0b2a44;
	color: #ffffff;
	white-space: pre-line;
}

.ki__nachricht--hinweis {
	align-self: stretch;
	max-width: none;
	border: 1px solid #f0c9a8;
	background: #fff6ee;
	color: #5a2b07;
	font-size: 0.875rem;
}

.ki__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ki__aktion {
	display: inline-flex;
	align-items: center;
	min-height: var(--tl-ziel);
	padding: 8px 14px;
	border: 1.5px solid var(--tl-blau);
	border-radius: var(--tl-radius);
	background: var(--tl-weiss);
	color: var(--tl-tinte);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.ki__aktion:hover,
.ki__aktion:focus-visible {
	background: rgba(0, 167, 254, 0.1);
}

.ki__aktion--formular,
.ki__aktion--termin {
	background: var(--tl-blau);
}

.ki__aktion--formular:hover,
.ki__aktion--formular:focus-visible,
.ki__aktion--termin:hover,
.ki__aktion--termin:focus-visible {
	background: #35bbff;
}

.ki__nachricht--hinweis .ki__aktion {
	border-color: #c96a1e;
}

/* Warten */
.ki__punkte {
	display: inline-flex;
	gap: 5px;
	padding: 4px 0;
}

.ki__punkte span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7d8a98;
}

@media (prefers-reduced-motion: no-preference) {
	.ki__punkte span {
		animation: ki-punkt 1.1s ease-in-out infinite;
	}

	.ki__punkte span:nth-child(2) {
		animation-delay: 0.15s;
	}

	.ki__punkte span:nth-child(3) {
		animation-delay: 0.3s;
	}

	.ki--offen .ki__fenster {
		animation: ki-auf 0.28s var(--tl-ease);
	}

	/* Taski winkt zweimal, wenn die Seite geladen ist, und blinzelt beim Öffnen und bei jeder neuen Antwort.
	   Alles läuft nur wenige Male, keine Dauerschleife. Beim Warten auf eine Antwort leuchtet die Antenne. */
	.ki__start .ki-figur--start {
		animation: ki-hallo 0.9s ease-in-out 1.5s 2;
	}

	.ki--offen .ki__kopf .ki-figur__augen,
	.ki__zeile--neu .ki-figur__augen {
		animation: ki-blinzeln 2.4s ease-in-out 0.3s 2;
	}

	.ki--denkt .ki__kopf .ki-figur__spitze,
	.ki__zeile--warten .ki-figur__spitze {
		animation: ki-denken 0.8s ease-in-out infinite alternate;
	}

	.bewegung-aus .ki-figur,
	.bewegung-aus .ki-figur * {
		animation: none !important;
	}
}

@keyframes ki-hallo {
	0%, 100% { transform: rotate(0); }
	30% { transform: rotate(-10deg) translateY(-2px); }
	60% { transform: rotate(8deg); }
}

@keyframes ki-blinzeln {
	0%, 42%, 54%, 100% { transform: scaleY(1); }
	48% { transform: scaleY(0.12); }
}

@keyframes ki-denken {
	from { opacity: 1; transform: scale(1); }
	to { opacity: 0.45; transform: scale(1.25); }
}

@keyframes ki-punkt {
	0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

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

/* Beispielfragen */
.ki__vorschlaege {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ki__vorschlag {
	min-height: var(--tl-ziel);
	padding: 8px 14px;
	border: 1px solid #c4d3e2;
	border-radius: 999px;
	background: var(--tl-weiss);
	color: var(--tl-blau-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.ki__vorschlag:hover,
.ki__vorschlag:focus-visible {
	border-color: var(--tl-blau-text);
}

/* ---------- Eingabe ---------- */
.ki__eingabe {
	padding: 12px 14px 12px;
	border-top: 1px solid #dfe6ee;
	background: var(--tl-weiss);
}

.ki__feld {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.ki__feld textarea {
	flex: 1;
	min-width: 0;
	min-height: var(--tl-ziel);
	max-height: 140px;
	padding: 10px 12px;
	border: 1.5px solid #9eb0c2;
	border-radius: 10px;
	background: var(--tl-weiss);
	color: var(--tl-tinte);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	resize: none;
	field-sizing: content;
}

.ki__feld textarea:focus-visible {
	border-color: var(--tl-blau-text);
	outline-offset: 1px;
}

.ki__feld textarea::placeholder {
	color: #5f6b78;
}

.ki__feld textarea:disabled {
	background: #eef2f6;
}

.ki__senden {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--tl-ziel);
	height: var(--tl-ziel);
	border: 0;
	border-radius: 10px;
	background: var(--tl-blau);
	color: var(--tl-tinte);
	cursor: pointer;
}

.ki__senden:hover,
.ki__senden:focus-visible {
	background: #35bbff;
}

.ki__senden:disabled {
	background: #c9d5e1;
	cursor: default;
}

.ki__senden .icon {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}

.ki__fuss {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 8px 2px 0;
	color: var(--tl-grau-hell);
	font-size: 0.75rem;
	line-height: 1.45;
}

.ki__fuss p {
	flex: 1 1 100%;
	margin: 0;
}

.ki__fuss a {
	color: inherit;
}

/* Widerspruch gegen das Speichern; Tippfläche mindestens 24 px hoch */
.ki__nicht-speichern {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	cursor: pointer;
}

.ki__nicht-speichern input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--tl-blau-text, #0073c2);
}

.ki__zaehler {
	font-weight: 600;
}

.ki__zaehler:empty {
	display: none;
}

/* Honigtopf für Programme, für Menschen unsichtbar */
.ki__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Platz am Seitenende, damit der Startknopf die letzte Zeile des Fußes nicht verdeckt */
.fuss {
	padding-bottom: 76px;
}

/* Hinweis im Kontaktformular nach der Übergabe */
.ki-uebernommen {
	margin: 4px 0 8px;
	padding: 10px 12px;
	border-left: 3px solid var(--tl-blau);
	background: #eaf6fe;
	color: var(--tl-tinte);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* ---------- Schmale Bildschirme: Fenster füllt den Bildschirm ---------- */
@media (max-width: 640px) {
	/* Solange das Einwilligungsbanner offen ist, verdeckt es den Startknopf nicht halb. */
	.einwilligung-offen .ki:not(.ki--offen) {
		display: none;
	}

	.ki {
		--ki-rand: max(16px, env(safe-area-inset-right, 0px));
		--ki-unten: max(16px, env(safe-area-inset-bottom, 0px));
	}

	.ki__start {
		min-height: 48px;
		padding: 0 16px 0 14px;
	}

	/* Offenes Fenster füllt die sichtbare Fläche. Die Seite dahinter scrollt nicht mit, der Kopf bleibt oben,
	   auch wenn die Tastatur aufgeht (Höhe und Lage aus visualViewport, gesetzt von assistent.js). */
	.ki--offen {
		top: var(--ki-oben, 0px);
		right: 0;
		bottom: auto;
		left: 0;
		height: var(--ki-hoehe, 100dvh);
	}

	html.ki-offen,
	html.ki-offen body {
		overflow: hidden;
		overscroll-behavior: none;
	}

	.ki__kopf {
		touch-action: none;
	}

	.ki__fenster {
		width: 100%;
		height: 100%;
		border: 0;
		border-radius: 0;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--tl-nacht);
	}

	.ki__kopf {
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(6px, env(safe-area-inset-right, 0px));
	}

	.ki__verlauf,
	.ki__eingabe {
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(16px, env(safe-area-inset-right, 0px));
	}
}

@media print {
	.ki {
		display: none !important;
	}
}