/* ==========================================================
   best of GREEN – Green Assistant
   Gilt auf allen Seiten. Farben sind hier selbst hinterlegt,
   damit der Assistent auch auf Astra-Seiten ohne bog.css passt.
   ========================================================== */

#chatbot-toggle,
#chatbot-window {
	--ga-forest: #203928;
	--ga-moss: #4A6B55;
	--ga-white: #FFFFFF;
	--ga-off-white: #F7F5EE;
	--ga-text: #2A3D2E;
	--ga-text-mute: #5C6E61;
	--ga-border: rgba(59, 92, 69, 0.15);
	--ga-font-display: 'Open Sans', Verdana, 'Helvetica Neue', Arial, sans-serif;
	--ga-font-body: Verdana, 'Open Sans', Geneva, Arial, sans-serif;
	box-sizing: border-box;
}
#chatbot-window *,
#chatbot-window *::before,
#chatbot-window *::after {
	box-sizing: border-box;
}

/* ---------- Knopf unten rechts ---------- */
#chatbot-toggle {
	position: fixed !important;
	bottom: calc(2rem + 1cm);
	right: 2rem;
	z-index: 9000;
	width: 64px !important;
	height: 64px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 6px 4px !important;
	border: none !important;
	border-radius: 16px !important;
	background: var(--ga-forest) !important;
	color: var(--ga-white) !important;
	cursor: pointer;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(59, 92, 69, 0.35);
	transition: background 0.3s, transform 0.2s;
	font-family: var(--ga-font-display);
	line-height: 1.2;
}
#chatbot-toggle:hover { background: var(--ga-moss) !important; transform: scale(1.05); }
#chatbot-toggle svg,
#chatbot-toggle span { color: var(--ga-white) !important; }

/* ---------- Fenster ---------- */
#chatbot-window {
	position: fixed;
	bottom: calc(5.5rem + 1cm);
	right: 2rem;
	z-index: 9000;
	width: 340px;
	max-width: calc(100vw - 2rem);
	max-height: 480px;
	background: var(--ga-white);
	box-shadow: 0 8px 40px rgba(59, 92, 69, 0.2);
	display: none;
	flex-direction: column;
	border: 0.5px solid var(--ga-border);
	font-family: var(--ga-font-body);
	text-align: left;
}
#chatbot-window.open { display: flex; }

#chatbot-window .chatbot-header {
	background: var(--ga-forest);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#chatbot-window .chatbot-header-info { display: flex; align-items: center; gap: 0.75rem; }
#chatbot-window .chatbot-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--ga-forest);
	display: flex; align-items: center; justify-content: center;
}
#chatbot-window .chatbot-avatar svg { width: 16px; height: 16px; color: var(--ga-white); }
#chatbot-window .chatbot-name {
	margin: 0 !important;
	font-family: var(--ga-font-display);
	font-size: 0.85rem; font-weight: 700; line-height: 1.3;
	color: var(--ga-white) !important;
}
#chatbot-window .chatbot-status {
	margin: 0 !important;
	font-size: 0.65rem; line-height: 1.3;
	color: rgba(255, 255, 255, 0.55) !important;
	display: flex; align-items: center; gap: 0.3rem;
}
#chatbot-window .chatbot-status::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: #7FB87A; display: block;
}
#chatbot-window .chatbot-close {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: auto !important;
}
#chatbot-window .chatbot-close:hover { color: var(--ga-white) !important; }

/* ---------- Nachrichten ---------- */
#chatbot-window .chatbot-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 310px;
}
#chatbot-window .chat-msg {
	max-width: 82%;
	padding: 0.65rem 0.9rem;
	font-size: 0.82rem;
	line-height: 1.65;
}
#chatbot-window .chat-msg.bot { background: var(--ga-off-white); color: var(--ga-text); align-self: flex-start; }
#chatbot-window .chat-msg.user { background: var(--ga-forest); color: var(--ga-white); align-self: flex-end; }

#chatbot-window .chat-suggestions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
#chatbot-window .chat-suggestion {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0.6rem 0.85rem !important;
	background: var(--ga-white) !important;
	color: var(--ga-forest) !important;
	border: 1px solid rgba(61, 102, 71, 0.28) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	font-family: var(--ga-font-display);
	font-size: 0.78rem !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	cursor: pointer;
	transition: all 0.2s;
}
#chatbot-window .chat-suggestion:hover {
	background: var(--ga-off-white) !important;
	border-color: var(--ga-forest) !important;
}

/* ---------- Eingabezeile ---------- */
#chatbot-window .chatbot-input-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-top: 0.5px solid var(--ga-border);
	padding: 0.75rem;
}
#chatbot-window #chatbot-input {
	flex: 1;
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	background: transparent !important;
	padding: 0.3rem 0 !important;
	font-family: var(--ga-font-body);
	font-size: 16px; /* kein Auto-Zoom auf dem iPhone */
	color: var(--ga-text);
}
#chatbot-window #chatbot-input::placeholder { color: var(--ga-text-mute); }
#chatbot-window #chatbot-send {
	margin: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	background: var(--ga-forest) !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	padding: 0.4rem 0.75rem !important;
	color: var(--ga-white) !important;
	font-size: 0.9rem;
	line-height: 1.4;
	transition: background 0.2s;
}
#chatbot-window #chatbot-send:hover { background: var(--ga-moss) !important; }

/* ---------- Handy ---------- */
@media (max-width: 600px) {
	#chatbot-toggle { right: 1rem; bottom: 1.25rem; width: 56px !important; height: 56px !important; }
	#chatbot-window {
		right: 0.75rem;
		left: 0.75rem;
		bottom: 5.25rem;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 7rem);
	}
	#chatbot-window .chatbot-messages { max-height: none; }
}

/* In der Kasse etwas kleiner, damit nichts verdeckt wird */
@media (max-width: 600px) {
	body.woocommerce-checkout #chatbot-toggle { width: 48px !important; height: 48px !important; }
	body.woocommerce-checkout #chatbot-toggle span { display: none !important; }
}

/* Nur auf der Startseite sichtbar */
body:not(.bog-echte-startseite) #chatbot-toggle,
body:not(.bog-echte-startseite) #chatbot-window { display:none !important; }