/* Kelira ChatKit – Widget. Farben kommen aus CSS-Variablen (per JS gesetzt). */
.kck {
	--kck-accent: #2563eb;
	--kck-accent-contrast: #ffffff;
	--kck-bg: #ffffff;
	--kck-surface: #f5f7fb;
	--kck-text: #14181f;
	--kck-muted: #667085;
	--kck-border: #e4e8ef;
	--kck-shadow: 0 24px 60px rgba(0,0,0,.22);
	--kck-radius: 16px;
	position: fixed;
	z-index: 2147483000;
	bottom: 1.25rem;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}
.kck--right { right: 1.25rem; }
.kck--left { left: 1.25rem; }
.kck *, .kck *::before, .kck *::after { box-sizing: border-box; }

/* Launcher */
.kck__launcher {
	display: inline-flex; align-items: center; gap: .55rem;
	border: 0; cursor: pointer;
	background: var(--kck-accent); color: var(--kck-accent-contrast);
	border-radius: 999px; padding: .8rem 1.15rem;
	font: inherit; font-weight: 700;
	box-shadow: var(--kck-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.kck__launcher:hover { transform: translateY(-2px); }
.kck__launcher svg { width: 20px; height: 20px; }
.kck__launcher-label { white-space: nowrap; }
@media (max-width: 480px) { .kck__launcher-label { display: none; } }

/* Panel */
.kck__panel {
	position: absolute; bottom: calc(100% + 12px);
	width: min(380px, calc(100vw - 2.5rem));
	height: min(580px, calc(100vh - 7rem));
	background: var(--kck-bg); color: var(--kck-text);
	border: 1px solid var(--kck-border);
	border-radius: var(--kck-radius);
	box-shadow: var(--kck-shadow);
	display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}
.kck--right .kck__panel { right: 0; }
.kck--left .kck__panel { left: 0; }
.kck.is-open .kck__panel { opacity: 1; transform: none; pointer-events: auto; }
.kck.is-open .kck__launcher { transform: scale(.96); }

.kck__head {
	display: flex; align-items: center; gap: .65rem;
	padding: .9rem 1rem; background: var(--kck-accent); color: var(--kck-accent-contrast);
}
.kck__avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-weight: 800; overflow: hidden; }
.kck__avatar img { width: 100%; height: 100%; object-fit: contain; }
.kck__title { font-weight: 800; font-size: .98rem; }
.kck__status { font-size: .76rem; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.kck__dot { width: 7px; height: 7px; border-radius: 50%; background: #43e08a; display: inline-block; }
.kck__close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.4rem; line-height: 1; opacity: .85; padding: .2rem; }
.kck__close:hover { opacity: 1; }

.kck__main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kck__body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; background: var(--kck-surface); display: flex; flex-direction: column; gap: .6rem; }

.kck__msg { max-width: 86%; padding: .6rem .85rem; border-radius: 14px; font-size: .92rem; white-space: pre-wrap; word-wrap: break-word; }
.kck__msg a { color: var(--kck-accent); text-decoration: underline; }
.kck__msg--bot { align-self: flex-start; background: var(--kck-bg); border: 1px solid var(--kck-border); border-bottom-left-radius: 4px; }
.kck__msg--user { align-self: flex-end; background: var(--kck-accent); color: var(--kck-accent-contrast); border-bottom-right-radius: 4px; }
.kck__msg a { color: inherit; }

.kck__fb { display: flex; gap: .35rem; align-self: flex-start; margin-top: -.2rem; }
.kck__fb button { background: none; border: 0; cursor: pointer; font-size: .95rem; opacity: .55; padding: .1rem .25rem; }
.kck__fb button:hover, .kck__fb button.is-active { opacity: 1; }

.kck__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: .7rem .85rem; background: var(--kck-bg); border: 1px solid var(--kck-border); border-radius: 14px; }
.kck__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--kck-muted); opacity: .5; animation: kck-typing 1.2s infinite; }
.kck__typing span:nth-child(2){ animation-delay:.2s; } .kck__typing span:nth-child(3){ animation-delay:.4s; }
@keyframes kck-typing { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }

.kck__foot { border-top: 1px solid var(--kck-border); padding: .6rem; background: var(--kck-bg); }
.kck__inputrow { display: flex; gap: .5rem; align-items: flex-end; }
.kck__input { flex: 1; resize: none; border: 1px solid var(--kck-border); border-radius: 12px; padding: .6rem .75rem; font: inherit; font-size: .92rem; color: var(--kck-text); background: var(--kck-surface); max-height: 110px; }
.kck__input:focus { outline: none; border-color: var(--kck-accent); }
.kck__send { border: 0; cursor: pointer; background: var(--kck-accent); color: var(--kck-accent-contrast); border-radius: 12px; width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; }
.kck__send svg { width: 20px; height: 20px; }
.kck__send:disabled { opacity: .5; cursor: default; }
.kck__human { display: block; width: 100%; margin-top: .45rem; background: none; border: 0; color: var(--kck-muted); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; }

/* Consent / Formular */
.kck__pane { padding: 1.25rem; overflow-y: auto; }
.kck__pane h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.kck__pane p { margin: 0 0 1rem; color: var(--kck-muted); font-size: .88rem; }
.kck__pane a { color: var(--kck-accent); }
.kck__field { margin-bottom: .6rem; }
.kck__field label { display: block; font-size: .8rem; color: var(--kck-muted); margin-bottom: .25rem; }
.kck__field input, .kck__field textarea { width: 100%; border: 1px solid var(--kck-border); border-radius: 10px; padding: .55rem .7rem; font: inherit; background: var(--kck-surface); color: var(--kck-text); }
.kck__field input:focus, .kck__field textarea:focus { outline: none; border-color: var(--kck-accent); }
.kck__btn { width: 100%; border: 0; cursor: pointer; background: var(--kck-accent); color: var(--kck-accent-contrast); border-radius: 999px; padding: .7rem 1rem; font: inherit; font-weight: 700; }
.kck__powered { text-align: center; font-size: .72rem; color: var(--kck-muted); padding: .35rem 0 .15rem; }
.kck__powered a { color: var(--kck-muted); }

@media (prefers-reduced-motion: reduce) {
	.kck__panel, .kck__launcher { transition: none; }
	.kck__typing span { animation: none; }
}