/* Bergetappe Chatbot – Widget v1.1
   Theme-sicher: Sichtbarkeit per Klassen + !important, Inputs gegen Flatsome gehaertet.
   Markenfarben: Thule-Gruen #35584B, Gold #E4B15F. */

#bgt-chat-root {
	--bgt-green: #35584B;
	--bgt-gold:  #E4B15F;
	--bgt-bg:    #ffffff;
	--bgt-user:  #35584B;
	--bgt-bot:   #f1efe9;
	--bgt-text:  #23302b;
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
#bgt-chat-root, #bgt-chat-root * { box-sizing: border-box !important; }

/* ---------- Launcher ---------- */
#bgt-launcher {
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	z-index: 99998 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 18px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--bgt-green) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important;
	transition: transform .15s ease, box-shadow .15s ease;
	text-transform: none !important;
	letter-spacing: normal !important;
}
#bgt-launcher:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, .24) !important; }
#bgt-launcher.bgt-hidden { display: none !important; }
.bgt-launcher-icon { font-size: 18px; line-height: 1; }

/* Online-Signal: Launcher atmet gruen, solange der Bot antworten kann.
   Klasse .bgt-signal setzt das JS nur bei online + eingeschaltetem Signal. */
#bgt-chat-root { --bgt-signal: #37c46b; }
#bgt-chat-root.bgt-signal #bgt-launcher {
	animation: bgt-glow 2s ease-out infinite;
}
@keyframes bgt-glow {
	0%   { box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 0 rgba(55, 196, 107, .5); }
	100% { box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 18px rgba(55, 196, 107, 0); }
}

/* Maskottchen (Lottie) oder Bild-Avatar */
.bgt-mascot { display: inline-block; vertical-align: middle; }
#bgt-launcher .bgt-mascot { width: 30px; height: 30px; }
#bgt-head .bgt-mascot { width: 28px; height: 28px; margin-right: 8px; }
.bgt-avatar {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	background: rgba(255, 255, 255, .15);
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
#bgt-head .bgt-mascot.bgt-has-avatar { width: 34px; height: 34px; }
#bgt-head-title { display: inline-flex; align-items: center; }

/* Kopfzeile: Titel + Statuszeile mit Punkt */
#bgt-head-col { display: inline-flex; flex-direction: column; line-height: 1.25; }
#bgt-status {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 400; opacity: .85;
}
#bgt-status-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--bgt-signal);
	animation: bgt-breathe 2s ease-in-out infinite;
}
#bgt-chat-root.bgt-offline #bgt-status-dot {
	background: #a8b0ab;
	animation: none;
}
@keyframes bgt-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
	#bgt-chat-root.bgt-signal #bgt-launcher,
	#bgt-status-dot { animation: none !important; }
}

/* ---------- Panel: standardmaessig ZU, nur mit .bgt-open sichtbar ---------- */
#bgt-panel { display: none !important; }
#bgt-panel.bgt-open {
	display: flex !important;
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	z-index: 99999 !important;
	width: 370px !important;
	max-width: calc(100vw - 32px) !important;
	height: 560px !important;
	max-height: calc(100vh - 40px) !important;
	flex-direction: column !important;
	background: var(--bgt-bg) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28) !important;
	margin: 0 !important;
	padding: 0 !important;
}

#bgt-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 13px 16px !important;
	background: var(--bgt-green) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	flex: 0 0 auto;
}
#bgt-close {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 24px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 4px !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	text-transform: none !important;
}
#bgt-close:hover { opacity: .8; }

#bgt-log {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	padding: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	background: #fafaf8 !important;
	margin: 0 !important;
}

.bgt-msg {
	max-width: 82%;
	padding: 10px 13px !important;
	border-radius: 14px;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	white-space: pre-wrap;
	word-wrap: break-word;
	color: var(--bgt-text);
	margin: 0 !important;
}
.bgt-user {
	align-self: flex-end;
	background: var(--bgt-user) !important;
	color: #fff !important;
	border-bottom-right-radius: 4px;
}
.bgt-assistant {
	align-self: flex-start;
	background: var(--bgt-bot) !important;
	border-bottom-left-radius: 4px;
	overflow-wrap: anywhere;
}
.bgt-assistant a {
	color: var(--bgt-green) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	font-weight: 600;
}
.bgt-assistant a:hover { color: #23423a !important; }

/* Typing-Indikator */
.bgt-typing { display: inline-flex; gap: 4px; align-items: center; }
.bgt-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: #9a9a90; display: inline-block;
	animation: bgt-blink 1.2s infinite ease-in-out;
}
.bgt-typing span:nth-child(2) { animation-delay: .2s; }
.bgt-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bgt-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ---------- Eingabezeile ---------- */
#bgt-form {
	display: flex !important;
	align-items: flex-end !important;
	gap: 8px !important;
	padding: 10px !important;
	margin: 0 !important;
	border-top: 1px solid #ece9e2 !important;
	background: #fff !important;
	flex: 0 0 auto;
}
#bgt-input {
	flex: 1 1 auto !important;
	resize: none !important;
	border: 1px solid #d8d4cb !important;
	border-radius: 10px !important;
	padding: 11px 12px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	height: 44px;              /* Starthoehe – JS erhoeht bei Bedarf */
	min-height: 44px !important;
	max-height: 120px !important;
	outline: none !important;
	box-shadow: none !important;
	background: #fff !important;
	color: var(--bgt-text) !important;
}
#bgt-input:focus { border-color: var(--bgt-green) !important; box-shadow: none !important; }
#bgt-send {
	flex: 0 0 auto !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	border: none !important;
	border-radius: 10px !important;
	background: var(--bgt-gold) !important;
	color: #2a2a2a !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: background .15s ease;
	text-transform: none !important;
}
#bgt-send:hover:not(:disabled) { background: #d6a24d !important; }
#bgt-send:disabled { opacity: .5; cursor: default; }

#bgt-foot {
	padding: 8px 12px !important;
	font-size: 11px !important;
	color: #8a8a80 !important;
	text-align: center !important;
	background: #fff !important;
	flex: 0 0 auto;
	margin: 0 !important;
}
#bgt-foot a {
	color: var(--bgt-green) !important;
	text-decoration: none !important;
}
#bgt-foot a:hover { text-decoration: underline !important; }
#bgt-foot .bgt-ver { white-space: nowrap; opacity: .75; }

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
	#bgt-panel.bgt-open {
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 85vh !important;
		max-height: 85vh !important;
		border-radius: 16px 16px 0 0 !important;
	}
}