/* Chatbot – Phase P1 (vollständiges Layer-CSS).
 * Alles unter #cb-root, Klassen mit cb-Präfix – kein Einfluss auf das Seiten-CSS.
 * position:fixed hält die Position beim Scrollen; im Panel scrollt nur die
 * Nachrichtenliste, die Eingabezeile bleibt unten fix. */

#cb-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
	pointer-events: none; /* Layer selbst ist durchlässig … */
	font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}
#cb-root.cb-pos-left { right: auto; left: 20px; }

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

/* --- Bubble ---------------------------------------------------------------- */
#cb-bubble {
	pointer-events: auto;           /* … nur die Bedienelemente sind klickbar */
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--cb-color, #0096d6);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
	transition: transform .15s ease;
}
#cb-bubble:hover { transform: scale(1.06); }
#cb-bubble:focus-visible { outline: 3px solid #ffd54f; outline-offset: 2px; }

/* --- Panel ------------------------------------------------------------------ */
#cb-panel {
	pointer-events: auto;
	position: absolute;
	right: 0;
	bottom: 68px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 500px;
	max-height: min(72vh, 640px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#cb-panel[hidden] { display: none; }

.cb-head {
	background: var(--cb-color, #0096d6);
	color: #fff;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
}
.cb-title { font-weight: 600; }
.cb-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}
.cb-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* --- Nachrichten (im Panel scrollbar) ---------------------------------------- */
.cb-msgs {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px;
	color: #222;
	font-size: 14px;
}
.cb-msg {
	margin: 0 0 8px;
	padding: 8px 11px;
	border-radius: 10px;
	max-width: 88%;
	width: fit-content;
	overflow-wrap: break-word;
}
.cb-msg-bot { background: #eef3f8; }
.cb-msg-user {
	background: var(--cb-color, #0096d6);
	color: #fff;
	margin-left: auto;
}
.cb-typing {
	color: #667;
	font-style: italic;
	padding: 8px 11px;
}
.cb-error {
	background: #fdecea;
	color: #a12622;
	margin: 0 0 8px;
	padding: 8px 11px;
	border-radius: 10px;
}

/* Quellen-Links unter der Antwort */
.cb-sources {
	margin: 6px 0 10px;
	padding: 0;
	list-style: none;
	max-width: 88%;
}
.cb-sources a {
	display: inline-block;
	font-size: 12.5px;
	color: #0b5e8f;
	text-decoration: underline;
	margin: 0 0 4px;
}
.cb-sources a:focus-visible { outline: 2px solid #ffd54f; outline-offset: 1px; }

/* Vorschlagsfragen als klickbare Chips */
.cb-chips { margin: 0 0 10px; padding: 0; list-style: none; }
.cb-chips button {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 10px;
	font: inherit;
	font-size: 12.5px;
	color: #0b5e8f;
	background: #eef3f8;
	border: 1px solid #cdd9e5;
	border-radius: 14px;
	cursor: pointer;
}
.cb-chips button:hover { background: #dfe9f2; }
.cb-chips button:focus-visible { outline: 2px solid #ffd54f; outline-offset: 1px; }

/* --- Eingabezeile (fix am Panel-Boden) ---------------------------------------- */
.cb-input-row {
	display: flex;
	gap: 6px;
	padding: 8px;
	border-top: 1px solid #e3e8ee;
	background: #fff;
	flex: none;
}
.cb-input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #cdd6e0;
	border-radius: 8px;
	font: inherit;
}
.cb-input:focus { border-color: var(--cb-color, #0096d6); outline: none; }
.cb-send {
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: var(--cb-color, #0096d6);
	color: #fff;
	cursor: pointer;
}
.cb-send:focus-visible { outline: 2px solid #ffd54f; outline-offset: 1px; }
.cb-send[disabled] { opacity: .55; cursor: wait; }

/* --- Mobile: Panel füllt fast den ganzen Bildschirm ---------------------------- */
@media (max-width: 600px) {
	#cb-root { right: 12px; bottom: 12px; }
	#cb-root.cb-pos-left { right: auto; left: 12px; }
	#cb-panel {
		/* Am Viewport ausrichten, nicht an der (56 px schmalen) Bubble –
		   sonst rutscht das Panel auf dem iPhone halb aus dem Bild. */
		position: fixed;
		left: 6px;
		right: 6px;
		bottom: 76px;
		width: auto;
		max-width: none;
		height: auto;
		max-height: calc(100vh - 96px);
		max-height: calc(100dvh - 96px); /* iOS: sichtbare Höhe ohne URL-Leiste */
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	#cb-bubble { transition: none; }
}