/**
 * KiKi-Feld unten mittig + Chat-Panel (Phase 1, Dennis 20.10.).
 * Geschlossen: schmale Leiste mit Blob, Eingabe, Mikrofon, Senden.
 * Offen: Desktop Seitenpanel rechts unten (Seite bleibt bedienbar), mobil Vollbild.
 */

.kzdock {
	--kzdock-navy: #1D2B4F;
	--kzdock-ink: #1e2634;
	--kzdock-edge: #e3e7f0;
	--kzdock-lift: 0px;
	/* Bewusst ohne z-index (ausdrücklich gesetzt, falls ein älteres Rocket-Used-CSS noch einen hat):
	   sonst eigener Stapelkontext und das Panel käme nicht über die Anfrage-Leiste. */
	position: static;
	z-index: auto;
}

/* ── Leiste ───────────────────────────────────────────────── */
.kzdock__bar {
	position: fixed;
	left: 50%;
	bottom: calc(18px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 4px;
	width: min(480px, calc(100vw - 40px));
	margin: 0;
	padding: 5px 5px 5px 8px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--kzdock-edge);
	border-radius: 999px;
	box-shadow: 0 12px 32px -12px rgba(29, 43, 79, .38), 0 2px 6px rgba(29, 43, 79, .08);
	transform: translateX(-50%);
	transition: transform .28s ease, opacity .28s ease, bottom .2s ease;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.kzdock__bar:focus-within {
	border-color: var(--kzdock-navy);
	box-shadow: 0 0 0 4px rgba(29, 43, 79, .12), 0 12px 32px -12px rgba(29, 43, 79, .38);
}

.kzdock .kzdock__blob {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	border-radius: 50%;
	cursor: pointer;
	background-image:
		radial-gradient(circle at 28% 30%, #7fa0e6 0%, rgba(127, 160, 230, 0) 55%),
		radial-gradient(circle at 72% 70%, #1D2B4F 0%, rgba(29, 43, 79, 0) 55%),
		radial-gradient(circle at 50% 85%, #3a5fa8 0%, rgba(58, 95, 168, 0) 60%),
		radial-gradient(circle at 65% 25%, #aec6f2 0%, rgba(174, 198, 242, 0) 50%);
	background-color: #cdd9f0;
	background-size: 200% 200%, 200% 200%, 200% 200%, 180% 180%;
	box-shadow: 0 2px 8px rgba(29, 43, 79, .25);
	animation: kzdock-blob 10s ease-in-out infinite;
}
@keyframes kzdock-blob {
	0%, 100% { border-radius: 50%; background-position: 0% 0%, 100% 100%, 50% 100%, 100% 0%; }
	33%      { border-radius: 58% 42% 55% 45% / 52% 48% 56% 44%; background-position: 100% 30%, 0% 70%, 70% 30%, 20% 70%; }
	66%      { border-radius: 45% 55% 42% 58% / 58% 42% 50% 50%; background-position: 30% 100%, 70% 0%, 30% 70%, 80% 40%; }
}

.kzdock__label {
	display: none;
	color: var(--kzdock-navy);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}

.kzdock .kzdock__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 6px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--kzdock-ink);
	font: inherit;
	font-size: 15px;
	line-height: 40px;
}
.kzdock .kzdock__input::placeholder { color: #8a93a3; opacity: 1; }

.kzdock__mic,
.kzdock__send {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	margin: 0;
	/* iOS Safari zentriert Inhalte in <button> nicht per Grid/Flex (Pfeil saß am iPhone verschoben, 25.10.):
	   deshalb Icon absolut mittig setzen und das native Button-Rendering abschalten. */
	position: relative;
	display: block;
	-webkit-appearance: none !important;
	appearance: none !important;
	line-height: 0;
	font-size: 0;
	border: 0;
	border-radius: 50% !important;
	cursor: pointer;
	transition: background .15s, color .15s, transform .12s;
}
.kzdock__mic[hidden] { display: none; }
.kzdock__mic svg,
.kzdock__send svg { width: 19px; height: 19px; display: block; position: absolute; top: 50%; left: 50%; margin: -9.5px 0 0 -9.5px; }
/* Theme (ListingHive) färbt Buttons koralle: Farben hier fest setzen */
.kzdock .kzdock__mic { background: transparent !important; color: #5b6472 !important; box-shadow: none !important; }
.kzdock .kzdock__mic:hover { background: #eef1f8 !important; color: var(--kzdock-navy) !important; }
.kzdock .kzdock__send { background: var(--kzdock-navy) !important; color: #fff !important; box-shadow: none !important; }
.kzdock .kzdock__send:hover { background: #142038 !important; }
.kzdock__send:active { transform: scale(.94); }

/* Diktat läuft: pulsierender Navy-Ring (auch für den Mikrofon-Knopf im Chat) */
.kzdock .kzdock__mic.is-rec,
.kzchat__mic.is-rec {
	background: var(--kzdock-navy, #1D2B4F) !important;
	color: #fff !important;
	animation: kzdock-rec 1.4s ease-out infinite;
}
@keyframes kzdock-rec {
	0%   { box-shadow: 0 0 0 0 rgba(29, 43, 79, .45); }
	100% { box-shadow: 0 0 0 12px rgba(29, 43, 79, 0); }
}

/* Ausblenden: Startseite solange das Titelbild sichtbar ist, mobil beim Runterscrollen, offen */
.kzdock.kzdock--away .kzdock__bar,
.kzdock.kzdock--hidden .kzdock__bar {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 140%);
}
.kzdock[data-state="open"] .kzdock__bar { display: none; }
/* Vollflächige Überlagerungen (Such-Sheet im Header, Filter-Modal, Burger-Menü, „Mehr Details“ und Fotoraster der Detailseite):
   das KiKi-Feld darf nicht darüber schweben. */
/* Such-Sheet: Feld bleibt beim Wegwischen sichtbar, liegt aber HINTER dem Sheet (Topbar z 100, Dennis 25.10.) */
body.kzcf-sb-open .kzdock__bar,
body.kzcf-sb-open .kzdock__peek,
body.kzcf-sb-open .kzdock__sug,
body.kzcf-sb-open .kzdock__tip,
body.kzcf-sb-open .kzdock__nudge,
body.kzcf-sb-open .kzdock__nudge,
body.kzcf-sb-open .kzdock__panel { z-index: 90 !important; }
body.kzcf-sb-open.kzcf-sb-away .kzdock { opacity: 1; visibility: visible; transition: none !important; } /* sofort da, keine Einblendung */
body.kzcf-sb-open:not( .kzcf-sb-away ) .kzdock,
body.kzcf-modal-open .kzdock,
body.kz-drawer-open .kzdock,
body.kzld-dm-open .kzdock,
body.kzld-pg-open .kzdock,
/* Hub-Seiten mobil: Filter-Dropdowns werden zum Bottom-Sheet (Dennis 25.10.) */
body.kzhub:has( .kzcf-scoped-filters .kzcf-filter__pop:not([hidden]) ) .kzdock {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility 0s linear .15s;
}

/* ── Panel ────────────────────────────────────────────────── */
.kzdock__backdrop { display: none; }
.kzdock__panel {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100001;          /* über Anfrage-Leiste (9999) und Karten-Vollbild (99991) */
	width: min(460px, calc(100vw - 48px));
	height: min(720px, calc(100dvh - 110px));
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--kzdock-edge);
	border-radius: 20px;
	box-shadow: 0 30px 80px -24px rgba(29, 43, 79, .45), 0 4px 14px rgba(29, 43, 79, .08);
	animation: kzdock-in .22s ease-out;
}
.kzdock__panel[hidden] { display: none; }
@keyframes kzdock-down-out {
	from { transform: none; }
	to   { transform: translateY(100%); }
}
@keyframes kzdock-up {
	from { transform: translateY(100%); }
	to   { transform: none; }
}
@keyframes kzdock-down {
	from { opacity: 0; transform: translateY(-24px); }
	to   { opacity: 1; transform: none; }
}
@keyframes kzdock-in {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.kzdock__mount { height: 100%; }
.kzdock__panel.is-loading .kzdock__mount { visibility: hidden; }
.kzdock__panel.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	border: 3px solid #e3e7f0;
	border-top-color: #1D2B4F;
	animation: kzdock-spin .8s linear infinite;
}
@keyframes kzdock-spin { to { transform: rotate(360deg); } }

/* Kontakt-Button ausblenden, solange der Chat offen ist (sitzt sonst unter dem Panel) */
html.kzdock-open .kz-fab { display: none; }

/* ── Hinweis nach dem Filtern (mobil) ─────────────────────── */
.kzdock__peek {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(80px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 0;
	border-radius: 14px;
	background: var(--kzdock-navy);
	color: #fff;
	font: inherit;
	font-size: 14px;
	text-align: left;
	box-shadow: 0 14px 30px -10px rgba(29, 43, 79, .55);
	animation: kzdock-in .25s ease-out;
	transition: opacity .5s, transform .5s;
}
.kzdock__peek span:nth-child(2) { flex: 1; }
.kzdock__peek strong { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.kzdock__peek-ok {
	flex: 0 0 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	font-weight: 700;
}
.kzdock__peek.is-out { opacity: 0; transform: translateY(10px); }
@media (min-width: 761px) {
	/* Desktop: kompakte Pille direkt über dem KiKi-Feld statt über die ganze Breite */
	.kzdock__peek { left: 0; right: 0; margin: 0 auto; width: min(480px, calc(100vw - 40px)); bottom: calc(76px + var(--kzdock-lift)); cursor: pointer; }
}

/* ── Mobil ────────────────────────────────────────────────── */
@media (max-width: 760px) {
	/* Mobil ohne Kontakt-Blase (UX-Test 28.10.): Inhalte im Menü, KiKi-Feld über die ganze Breite. */
	.kz-fab { display: none !important; }
	.kzdock__bar {
		left: 12px;
		right: 12px;
		width: auto;
		bottom: calc(14px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px));
		transform: none;
	}
	.kzdock--nofab .kzdock__bar { right: 12px; }

	/* Kompakt über hohen Leisten: nur „KiKi“-Knopf rechts */
	.kzdock--compact .kzdock__bar {
		left: auto;
		right: 14px;
		width: auto;
		padding: 5px 16px 5px 5px;
		gap: 8px;
		bottom: calc(12px + var(--kzdock-lift));
		cursor: pointer;
	}
	.kzdock--compact .kzdock__input,
	.kzdock--compact .kzdock__mic,
	.kzdock--compact .kzdock__send { display: none !important; }
	.kzdock.kzdock--compact .kzdock__blob { flex-basis: 36px; width: 36px; height: 36px; }
	.kzdock--compact .kzdock__label { display: inline; }
	.kzdock.kzdock--away .kzdock__bar,
	.kzdock.kzdock--hidden .kzdock__bar { transform: translateY(140%); }
	.kzdock .kzdock__input { font-size: 16px; } /* iOS zoomt sonst beim Antippen */
	/* Karte-Umschalter der Filterseite etwas höher, damit er nicht am Feld klebt */
	.kzcf-maptoggle { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }

	/* Chat als Blatt von unten wie das Suchmenü (Dennis 29.10.): Griff oben, nach unten ziehen schließt,
	   die Seite bleibt oben sichtbar. Antippen daneben klappt ihn ein. */
	/* Ganze Seite, Verhalten wie das Suchmenü (Dennis 29.10.): gleiche Einblend-Kurve, Schließen nach unten,
	   Ziehen nur am Griff (Seite scrollt dabei nicht mit), schneller Wisch schließt auch. */
	.kzdock__panel {
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
		padding-top: 0;
		box-sizing: border-box;
		animation: kzdock-up .34s cubic-bezier(.2, .8, .2, 1);
		will-change: transform;
	}
	.kzdock__panel.is-closing { animation: kzdock-down-out .22s ease-in forwards; }
	.kzdock__panel[style*="translateY"] { animation: none !important; } /* während/nach dem Ziehen nur die Transition */
	/* Griff sitzt in der KiKi-Kopfzeile (Dennis 29.10.), mittig über dem Namen; die Knöpfe links/rechts bleiben frei. */
	.kzdock__grab { position: absolute; top: 0; left: 50%; width: 150px; margin-left: -75px; height: 40px; z-index: 3; cursor: grab; touch-action: none;
		background: linear-gradient(#cfd5df, #cfd5df) center 10px / 40px 4px no-repeat; }
	.kzdock .kzdock__panel .kzchat-layout--dock .kzchat__header { padding-top: 34px; padding-bottom: 12px; }
	/* X braucht es am Handy nicht mehr: Griff ziehen oder antippen schließt. */
	.kzdock__panel #kzchat-close { display: none !important; }
	.kzdock__panel .kzdock__starters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px 44px; animation: kzdock-in .22s ease-out; }
	.kzdock__panel .kzdock__starters button { background: #fff; color: var(--kzdock-navy, #1D2B4F); border: 1.5px solid #d5ddec; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; }
	.kzdock.kzdock--large .kzdock__panel { height: calc(100dvh - 16px - env(safe-area-inset-top, 0px)); }
	/* KEIN overflow:hidden an html/body: das setzt den Scrollwert auf 0 (Seite springt nach oben, Kopfzeile
	   taucht auf). Das Scrollen der Seite hält dock.js per touchmove an. Das KiKi-Feld bleibt unter dem Blatt
	   stehen, damit beim Herunterziehen alles so aussieht wie vorher. */
	.kzdock[data-state="open"] .kzdock__bar { display: flex; }
	/* Seite eingefroren (dock.js setzt top:-scrollY), damit iOS den Chat statt der Seite scrollt */
	body.kzdock-lock { position: fixed !important; left: 0; right: 0; width: 100%; }
	.kzdock__panel .kzchat__stream { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
	.kzdock__blob, .kzdock__panel, .kzdock__peek { animation: none; }
	.kzdock__bar { transition: none; }
}

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

/* Newsletter-Einblendung nicht über den offenen Chat legen */
html.kzdock-open .kz-nl-slidein { display: none !important; }

/* Einladung zum Familienprofil über dem Feld */
.kzdock__nudge {
	position: fixed;
	right: 24px;
	bottom: calc(86px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	width: min(340px, calc(100vw - 24px));
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--kzdock-edge);
	border-radius: 16px;
	box-shadow: 0 18px 40px -14px rgba(29, 43, 79, .4);
	color: var(--kzdock-ink);
	font-size: 14px;
	line-height: 1.45;
	animation: kzdock-in .3s ease-out;
}
.kzdock__nudge p { margin: 0 0 10px; }
.kzdock__nudge div { display: flex; gap: 10px; align-items: center; }
.kzdock .kzdock__nudge-go { padding: 9px 16px !important; border: 0 !important; border-radius: 10px !important; background: var(--kzdock-navy) !important; color: #fff !important; font: inherit; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.kzdock .kzdock__nudge-later { padding: 6px 4px !important; border: 0 !important; background: none !important; color: #5b6472 !important; font: inherit; text-decoration: underline; cursor: pointer; box-shadow: none !important; }
@media (max-width: 760px) {
	.kzdock__nudge { left: 12px; right: 12px; width: auto; bottom: calc(78px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Großes Fenster: Modal in der Mitte der aktuellen Seite (Dennis 21.10.) ── */
.kzdock--large .kzdock__backdrop {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(20, 32, 56, .45);
	animation: kzdock-fade .2s ease-out;
}
@keyframes kzdock-fade { from { opacity: 0; } to { opacity: 1; } }
.kzdock--large .kzdock__panel {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: min(1180px, calc(100vw - 64px));
	height: min(860px, calc(100dvh - 64px));
	transform: translate(-50%, -50%);
	border-radius: 22px;
	animation: kzdock-grow .22s ease-out;
}
@keyframes kzdock-grow {
	from { opacity: .6; transform: translate(-50%, -48%) scale(.97); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
html.kzdock-large,
html.kzdock-large body { overflow: hidden !important; }
@media (max-width: 760px) {
	/* Mobil ist das Panel ohnehin Vollbild */
	.kzdock--large .kzdock__backdrop { display: none; }
	.kzdock--large .kzdock__panel { inset: 0; width: 100%; height: 100dvh; transform: none; border-radius: 0; animation: none; }
}

/* Großes Fenster: groß, aber mit etwas Luft rundherum (Dennis 25.10., zweimal nachjustiert) */
.kzdock--large .kzdock__panel {
	width: min(1260px, calc(100vw - 64px));
	height: min(860px, calc(100dvh - 56px));
	border-radius: 20px;
}

/* ── Was KiKi hier kann (Dennis 22.10.): Vorschläge beim Antippen + einmaliger Tipp je Seitentyp ── */
.kzdock__sug,
.kzdock__tip {
	position: fixed;
	left: 50%;
	bottom: calc(80px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	transform: translateX(-50%);
	width: min(480px, calc(100vw - 40px));
}
.kzdock__sug[hidden] { display: none; }
.kzdock__sug { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kzdock .kzdock__sug button {
	padding: 7px 13px !important;
	border: 1px solid var(--kzdock-edge) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--kzdock-ink) !important;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(29, 43, 79, .35) !important;
}
.kzdock .kzdock__sug button:hover { border-color: var(--kzdock-navy) !important; }
.kzdock__tip {
	padding: 12px 34px 12px 14px;
	background: #fff;
	border: 1px solid var(--kzdock-edge);
	border-radius: 16px;
	box-shadow: 0 18px 40px -14px rgba(29, 43, 79, .4);
	color: var(--kzdock-ink);
	font-size: 14px;
	line-height: 1.45;
	animation: kzdock-tip-in .3s ease-out;
	transition: opacity .4s ease, transform .4s ease;
}
.kzdock__tip.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); }
@keyframes kzdock-tip-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } }
.kzdock__tip p { margin: 0 0 9px; }
.kzdock__tip div { display: flex; flex-wrap: wrap; gap: 6px; }
.kzdock .kzdock__tip-chip { padding: 6px 12px !important; border: 0 !important; border-radius: 999px !important; background: var(--kzdock-navy) !important; color: #fff !important; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none !important; }
.kzdock .kzdock__tip-chip + .kzdock__tip-chip { background: #eef2f8 !important; color: var(--kzdock-navy) !important; }
.kzdock .kzdock__tip-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0 !important; border: 0 !important; background: none !important; color: #8a93a3 !important; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none !important; }
html.kzdock-open .kzdock__tip, html.kzdock-open .kzdock__sug { display: none; }
@media (max-width: 760px) {
	.kzdock__sug, .kzdock__tip { bottom: calc(76px + var(--kzdock-lift) + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); }
	.kzdock__sug { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .kzdock__tip { animation: none; } }

/* Beim Schließen springt die Seite unsichtbar an die alte Stelle zurück: Kopfzeile, Leisten und KiKi-Feld
   sollen dabei nicht ein- und ausblenden (Dennis 29.10.: einzelne Elemente kamen ruckelig nach). */
html.kzdock-unlocking .kzcf-topbar,
html.kzdock-unlocking .kzcf-listing-chrome,
html.kzdock-unlocking .kzcf-listing-chrome *,
html.kzdock-unlocking .kzld-mbar,
html.kzdock-unlocking .kzld-sticky,
html.kzdock-unlocking .kzcf-mbar,
html.kzdock-unlocking .kzdock__bar,
html.kzdock-unlocking .kz-fab { transition: none !important; animation: none !important; }

/* Filter-Fenster mobil liegt jetzt über dem KiKi-Feld: Feld bleibt dahinter stehen statt auszublenden (Dennis 29.10.) */
@media (max-width: 760px) {
	body.kzcf-modal-open .kzdock { opacity: 1; visibility: visible; pointer-events: none; transition: none; }
}

/* Mobil: blauer Senden-Knopf im eingeklappten KiKi-Feld weg (Antippen öffnet den Chat, Dennis 29.10.) */
@media (max-width: 760px) {
	.kzdock__bar .kzdock__send { display: none !important; }
}