/**
 * APK Kurs-Chatbot
 * Colours come from CSS variables set by PHP, so the settings screen
 * controls the look without touching this file.
 */

.apk-widget {
	--apk-accent: #e0796b;
	--apk-accent-hover: #c56a5e;
	--apk-bubble-bg: #f1f1f1;
	--apk-text: #1a1a1a;
	--apk-radius: 20px;
	--apk-panel-w: 400px;
	--apk-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);

	position: fixed;
	bottom: 24px;
	z-index: 2147483000;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--apk-text);
}

.apk-widget.apk-left {
	left: 24px;
}

.apk-widget.apk-right {
	right: 24px;
}

/* ---------- Launcher ---------- */

.apk-launcher {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--apk-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	transition: transform 0.18s ease, background-color 0.18s ease;
	padding: 0;
}

.apk-launcher:hover {
	background: var(--apk-accent-hover);
	transform: scale(1.05);
}

.apk-launcher:focus-visible {
	outline: 3px solid var(--apk-text);
	outline-offset: 3px;
}

.apk-launcher svg {
	width: 26px;
	height: 26px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.apk-launcher .apk-icon-close {
	display: none;
}

.apk-widget.apk-open .apk-launcher .apk-icon-open {
	display: none;
}

.apk-widget.apk-open .apk-launcher .apk-icon-close {
	display: block;
}

/* ---------- Panel ---------- */

.apk-panel {
	position: absolute;
	bottom: 72px;
	width: var(--apk-panel-w);
	max-height: min(680px, calc(100vh - 120px));
	/* Nur Optik für breite Fenster. Im Mobilblock unten wieder aufgehoben,
	   sonst kann das Sheet nicht auf die sichtbare Höhe schrumpfen und die
	   Eingabezeile rutscht hinter die Tastatur. */
	min-height: min(460px, calc(100vh - 140px));
	background: #fff;
	border-radius: var(--apk-radius);
	box-shadow: var(--apk-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* display:flex above outranks the browser default for [hidden], so restate it. */
.apk-panel[hidden] {
	display: none;
}

.apk-left .apk-panel {
	left: 0;
}

.apk-right .apk-panel {
	right: 0;
}

.apk-widget.apk-open .apk-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* ---------- Close button ---------- */

.apk-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8a8a8a;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.apk-close:hover {
	background: var(--apk-bubble-bg);
	color: var(--apk-text);
}

.apk-close:focus-visible {
	outline: 2px solid var(--apk-accent);
	outline-offset: 2px;
}

.apk-close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* ---------- Header ---------- */

.apk-header {
	flex: 0 0 auto;
	padding: 26px 24px 18px;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	transition: padding 0.22s ease;
}

.apk-avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 12px;
	display: block;
	background: var(--apk-bubble-bg);
	transition: width 0.22s ease, height 0.22s ease, margin 0.22s ease;
}

.apk-avatar-fallback {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--apk-accent);
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	transition: width 0.22s ease, height 0.22s ease, margin 0.22s ease, font-size 0.22s ease;
}

.apk-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--apk-text);
	line-height: 1.3;
}

.apk-tagline {
	margin: 0;
	font-size: 13px;
	color: #777;
	line-height: 1.45;
}

/* ---------- Messages ---------- */

.apk-messages {
	/* Basis auto, not 0: on desktop the panel height is content-driven, and a
	   basis of 0 would make this area contribute nothing, collapsing the panel
	   to header plus input. min-height: 0 still allows shrinking when the panel
	   height is constrained, which is the mobile case. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 18px 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overscroll-behavior: contain;
}

.apk-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	max-width: 100%;
}

.apk-row-bot {
	justify-content: flex-start;
}

.apk-row-user {
	justify-content: flex-end;
}

.apk-row-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex: 0 0 28px;
	object-fit: cover;
	background: var(--apk-bubble-bg);
}

.apk-bubble {
	padding: 11px 15px;
	border-radius: 16px;
	max-width: 78%;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	font-size: 14.5px;
}

.apk-row-bot .apk-bubble {
	background: var(--apk-bubble-bg);
	border-bottom-left-radius: 5px;
	color: var(--apk-text);
}

.apk-row-user .apk-bubble {
	background: var(--apk-accent);
	color: #fff;
	border-bottom-right-radius: 5px;
}

.apk-bubble p {
	margin: 0 0 8px;
}

.apk-bubble p:last-child {
	margin-bottom: 0;
}

.apk-bubble a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.apk-row-bot .apk-bubble a {
	color: var(--apk-accent-hover);
	font-weight: 600;
}

.apk-bubble ul {
	margin: 0 0 8px;
	padding-left: 18px;
}

/* Typing indicator */

.apk-typing {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 14px 16px;
}

.apk-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b0b0b0;
	animation: apk-bounce 1.2s infinite ease-in-out;
}

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

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

@keyframes apk-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Suggestions ---------- */

.apk-suggestions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 18px 12px;
}

.apk-chip {
	border: 1px solid var(--apk-accent);
	background: transparent;
	color: var(--apk-accent-hover);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	line-height: 1.3;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.apk-chip:hover {
	background: var(--apk-accent);
	color: #fff;
}

.apk-chip:focus-visible {
	outline: 2px solid var(--apk-text);
	outline-offset: 2px;
}

/* ---------- Composer ---------- */

.apk-composer {
	flex: 0 0 auto;
	padding: 12px 18px 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.apk-input-wrap {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 6px 6px 6px 18px;
	background: #fff;
	transition: border-color 0.15s ease;
}

.apk-input-wrap:focus-within {
	border-color: var(--apk-accent);
}

.apk-input {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	resize: none;
	font-family: inherit;
	/* Muss mindestens 16px sein. Bei kleinerer Schrift zoomt iOS Safari beim
	   Fokussieren automatisch in die Seite hinein, wodurch das Panel breiter
	   als der Bildschirm wird und Absenden- und Schliessen-Knopf abgeschnitten
	   werden. */
	font-size: 16px;
	line-height: 1.45;
	padding: 8px 0;
	max-height: 96px;
	background: transparent;
	color: var(--apk-text);
}

.apk-send {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--apk-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	padding: 0;
}

.apk-send:hover:not(:disabled) {
	background: var(--apk-accent-hover);
}

.apk-send:disabled {
	opacity: 0.4;
	cursor: default;
}

.apk-send:focus-visible {
	outline: 2px solid var(--apk-text);
	outline-offset: 2px;
}

.apk-send svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.apk-privacy {
	margin: 8px 4px 0;
	font-size: 11px;
	line-height: 1.4;
	color: #999;
	text-align: center;
}

.apk-privacy a {
	color: #999;
	text-decoration: underline;
}

/* ---------- Mobile ---------- */

/* ---------- Mobile: full-screen sheet ---------- */

/* Schmal ODER niedrig. Ein Handy im Querformat ist breit, hat mit Tastatur
   aber kaum Hoehe, und ein schwebendes Panel passt dort nicht mehr hinein. */
@media (max-width: 640px), (max-height: 500px) {
	.apk-widget {
		bottom: 16px;
	}

	.apk-widget.apk-left {
		left: 16px;
	}

	.apk-widget.apk-right {
		right: 16px;
	}

	.apk-panel {
		position: fixed;
		/* The sheet is pinned to the VISUAL viewport, not the layout viewport.
		   When iOS opens the keyboard it scrolls the layout viewport to reveal
		   the focused field, which drags fixed elements off the top of the
		   screen. Following visualViewport.offsetTop cancels that out, and
		   following its height keeps the composer above the keyboard. */
		top: var(--apk-vtop, 0px);
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		max-width: none;
		height: var(--apk-vh, 100dvh);
		max-height: none;
		min-height: 0;
		border-radius: 0;
		transform: translateY(100%);
		opacity: 1;
	}

	.apk-widget.apk-open .apk-panel {
		transform: translateY(0);
	}

	/* The sheet covers the whole screen, so the launcher would sit underneath
	   it. Closing happens through the header button instead. */
	.apk-widget.apk-open .apk-launcher {
		display: none;
	}

	.apk-header {
		padding: calc(18px + env(safe-area-inset-top)) 18px 14px;
	}

	.apk-avatar,
	.apk-avatar-fallback {
		width: 52px;
		height: 52px;
		margin-bottom: 8px;
	}

	.apk-title {
		font-size: 17px;
	}

	.apk-close {
		top: calc(10px + env(safe-area-inset-top));
		width: 40px;
		height: 40px;
	}

	.apk-messages {
		padding: 16px 16px 8px;
	}

	.apk-bubble {
		max-width: 85%;
		font-size: 15px;
	}

	.apk-composer {
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
	}

}

/* Wenn wenig Hoehe da ist (Tastatur offen, niedriges Fenster), klappt der
   Kopfbereich zu einer Zeile zusammen. Gesteuert ueber die Klasse, damit es
   unabhaengig von der Fensterbreite greift. */
.apk-panel.apk-compact .apk-header {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: calc(7px + env(safe-area-inset-top)) 54px 7px 16px;
}

.apk-panel.apk-compact .apk-avatar,
.apk-panel.apk-compact .apk-avatar-fallback {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	margin: 0;
	font-size: 15px;
}

.apk-panel.apk-compact .apk-title {
	font-size: 15px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.apk-panel.apk-compact .apk-tagline {
	display: none;
}

/* Nobody needs canned questions while typing their own. */
.apk-panel.apk-compact .apk-suggestions {
	display: none;
}

.apk-panel.apk-compact .apk-close {
	top: calc(4px + env(safe-area-inset-top));
}

.apk-panel.apk-compact .apk-privacy {
	font-size: 10px;
	margin-top: 6px;
}


/* Locks the page behind the sheet so it cannot scroll away underneath. */
body.apk-locked {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.apk-panel,
	.apk-launcher,
	.apk-typing span {
		transition: none;
		animation: none;
	}
}

/* ---------- Schutz vor fremdem CSS ---------- */

/*
 * Themes und Formular-Plugins stylen textarea, input, button und a global.
 * Divi setzt zum Beispiel eine Mindesthöhe für Textfelder, wodurch die
 * Eingabezeile des Chats auf mehrere hundert Pixel aufgeht.
 *
 * Diese Regeln hängen an der ID des Einhängepunkts und gewinnen damit gegen
 * praktisch jeden Theme-Selektor. Zurückgesetzt wird nur, was Themes
 * üblicherweise anfassen, damit das Widget überall gleich aussieht.
 *
 * Wichtig: auf height bewusst KEIN !important, sonst könnte das Eingabefeld
 * beim Tippen nicht mehr mitwachsen.
 */

#apk-chatbot-root,
#apk-chatbot-root *,
#apk-chatbot-root *::before,
#apk-chatbot-root *::after {
	box-sizing: border-box;
}

#apk-chatbot-root textarea,
#apk-chatbot-root input,
#apk-chatbot-root button {
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	float: none !important;
	font-family: inherit !important;
	outline-offset: 2px;
}

#apk-chatbot-root textarea.apk-input {
	height: auto;
	width: auto;
	padding: 8px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 16px !important;
	line-height: 1.45 !important;
	color: var(--apk-text) !important;
	max-height: 96px !important;
}

#apk-chatbot-root button.apk-send {
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--apk-accent) !important;
	color: #fff !important;
	font-size: 0 !important;
}

#apk-chatbot-root button.apk-send:hover:not(:disabled) {
	background: var(--apk-accent-hover) !important;
}

#apk-chatbot-root button.apk-launcher {
	width: 56px !important;
	height: 56px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--apk-accent) !important;
	color: #fff !important;
	font-size: 0 !important;
}

#apk-chatbot-root button.apk-launcher:hover {
	background: var(--apk-accent-hover) !important;
}

#apk-chatbot-root button.apk-close {
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	font-size: 0 !important;
}

#apk-chatbot-root button.apk-close:hover {
	background: var(--apk-bubble-bg) !important;
}

#apk-chatbot-root button.apk-chip {
	width: auto !important;
	padding: 7px 14px !important;
	border: 1px solid var(--apk-accent) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--apk-accent-hover) !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
}

#apk-chatbot-root button.apk-chip:hover {
	background: var(--apk-accent) !important;
	color: #fff !important;
}

#apk-chatbot-root .apk-bubble a {
	box-shadow: none !important;
	text-decoration: underline !important;
}

#apk-chatbot-root .apk-row-bot .apk-bubble a {
	color: var(--apk-accent-hover) !important;
}

#apk-chatbot-root .apk-row-user .apk-bubble a {
	color: #fff !important;
}

#apk-chatbot-root .apk-title,
#apk-chatbot-root .apk-tagline,
#apk-chatbot-root .apk-privacy,
#apk-chatbot-root .apk-bubble p {
	text-transform: none;
	letter-spacing: normal;
}