/**
 * FG LiveChat – Widget-Styles
 *
 * Alle Regeln sind mit .fglc- präfixiert und arbeiten mit den CSS-Variablen
 * --fglc-bg / --fglc-fg, die widget.js aus den Einstellungen setzt.
 * Bewusst ohne Reset – das Widget lebt in einem eigenen Container.
 */

/* Eigenes box-sizing im Widget-Scope: sonst rechnen Höhenangaben je nach
   Theme des Hosts unterschiedlich (content-box vs. border-box) und das
   Eingabefeld wird z. B. 140 statt der vorgesehenen 120 px hoch. */
.fglc-root,
.fglc-root *,
.fglc-root *::before,
.fglc-root *::after {
	box-sizing: border-box;
}

.fglc-root {
	--fglc-bg: #1f6feb;
	--fglc-fg: #ffffff;
	--fglc-surface: #ffffff;
	--fglc-text: #1c2128;
	--fglc-muted: #6a737d;
	--fglc-line: #e6e8eb;
	--fglc-radius: 16px;

	position: fixed;
	bottom: 20px;
	z-index: 999998;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--fglc-text);
}

.fglc-right { right: 20px; }
.fglc-left  { left: 20px; }

/* ---------------------------------------------------------------- Launcher */

.fglc-launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fglc-bg);
	color: var(--fglc-fg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fglc-launcher:hover  { transform: translateY(-2px); }
.fglc-launcher:focus-visible {
	outline: 3px solid var(--fglc-bg);
	outline-offset: 3px;
}
.fglc-launcher svg { width: 28px; height: 28px; display: block; }
/* Farbe direkt aus der Variablen, nicht über die geerbte color: sonst
   uebersteuern Theme-Regeln wie button[type="submit"] das Icon. */
.fglc-launcher svg path { fill: var(--fglc-fg); }

.fglc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #e5484d;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

/* ------------------------------------------------------------------- Panel */

.fglc-panel {
	position: absolute;
	bottom: 72px;
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 120px);
	overflow: hidden;
	border: 1px solid var(--fglc-line);
	border-radius: var(--fglc-radius);
	background: var(--fglc-surface);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.fglc-right .fglc-panel { right: 0; }
.fglc-left  .fglc-panel { left: 0; }

.fglc-root.is-open .fglc-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.fglc-panel[hidden] { display: none; }

/* ---------------------------------------------------------------- Kopfzeile */

.fglc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--fglc-bg);
	color: var(--fglc-fg);
}

.fglc-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	font-weight: 600;
}

.fglc-avatar img { width: 100%; height: 100%; object-fit: cover; }

.fglc-head-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fglc-head-text strong { font-size: 15px; }

.fglc-status { font-size: 12px; opacity: 0.85; }
.fglc-status.is-online::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	border-radius: 50%;
	background: #3fb950;
}

.fglc-end {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 11px;
	line-height: 1;
	padding: 5px 8px;
	margin-right: 4px;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0.85;
	white-space: nowrap;
}
.fglc-end:hover { opacity: 1; }
.fglc-end:focus-visible { outline: 2px solid var(--fglc-fg); outline-offset: 2px; }
.fglc-end[hidden] { display: none; }

.fglc-close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	padding: 6px;
	cursor: pointer;
	border-radius: 6px;
}
.fglc-close:focus-visible { outline: 2px solid var(--fglc-fg); }

/* --------------------------------------------------------- Nachrichtenliste */

.fglc-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	background: #f6f7f9;
	scroll-behavior: smooth;
}

.fglc-row {
	display: flex;
	flex-direction: column;
	max-width: 82%;
	margin-bottom: 10px;
}

.fglc-me   { margin-left: auto; align-items: flex-end; }
.fglc-them { margin-right: auto; align-items: flex-start; }
.fglc-sys  { max-width: 100%; align-items: center; }

.fglc-bubble {
	padding: 9px 12px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--fglc-line);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.fglc-me .fglc-bubble {
	background: var(--fglc-bg);
	border-color: transparent;
	color: var(--fglc-fg);
}

.fglc-sys .fglc-bubble {
	background: transparent;
	border: 0;
	color: var(--fglc-muted);
	font-size: 13px;
	text-align: center;
}

/* Agentennachricht mit Avatar davor */
.fglc-with-avatar {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	min-width: 0;
}

.fglc-avatar-sm {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	font-size: 12px;
	background: var(--fglc-bg);
	color: var(--fglc-fg);
}

.fglc-them .fglc-meta { padding-left: 33px; }

.fglc-meta {
	display: flex;
	gap: 5px;
	margin-top: 3px;
	font-size: 11px;
	color: var(--fglc-muted);
}

.fglc-tick { color: #3fb950; }
.fglc-row.is-pending { opacity: 0.6; }
.fglc-row.is-failed .fglc-bubble { border-color: #e5484d; }

/* ------------------------------------------------------------ Tipp-Anzeige */

.fglc-typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 16px 8px;
	background: #f6f7f9;
	font-size: 12px;
	color: var(--fglc-muted);
}

.fglc-typing[hidden] { display: none; }

.fglc-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fglc-muted);
	animation: fglc-blink 1.2s infinite ease-in-out;
}
.fglc-dot:nth-child(2) { animation-delay: 0.2s; }
.fglc-dot:nth-child(3) { animation-delay: 0.4s; }
.fglc-typing-label { margin-left: 6px; }

@keyframes fglc-blink {
	0%, 80%, 100% { opacity: 0.25; }
	40%           { opacity: 1; }
}

/* --------------------------------------------------------- Kontaktfelder */

.fglc-intro {
	display: flex;
	gap: 8px;
	padding: 10px 12px 0;
	border-top: 1px solid var(--fglc-line);
}
.fglc-intro[hidden] { display: none; }

.fglc-field { display: flex; flex-direction: column; flex: 1 1 0; gap: 3px; font-size: 12px; color: var(--fglc-muted); }

.fglc-field input {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--fglc-line);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: var(--fglc-text);
	background: #fff;
}
.fglc-field input:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 1px; }
.fglc-field input[aria-invalid="true"] { border-color: #e5484d; }

.fglc-field-error {
	font-size: 11px;
	font-style: normal;
	color: #e5484d;
}
.fglc-field-error[hidden] { display: none; }

/* ------------------------------------------------------- Chat beenden */

.fglc-endask-box,
.fglc-emailask-box { width: 100%; }

.fglc-endask-box {
	padding: 11px 12px;
	border: 1px solid var(--fglc-line);
	border-radius: 12px;
	background: #fff;
	text-align: left;
}

.fglc-endask-text {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--fglc-text);
}

.fglc-endask-actions { display: flex; gap: 8px; }

.fglc-endask-yes,
.fglc-endask-no {
	flex: 0 0 auto;
	padding: 7px 12px;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.fglc-endask-yes {
	border: 0;
	background: var(--fglc-bg);
	color: var(--fglc-fg);
}

.fglc-endask-no {
	border: 1px solid var(--fglc-line);
	background: transparent;
	color: var(--fglc-muted);
}

.fglc-endask-yes[disabled],
.fglc-endask-no[disabled] { opacity: 0.5; cursor: default; }

.fglc-endask-yes:focus-visible,
.fglc-endask-no:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 2px; }

.fglc-restart {
	padding: 8px 14px;
	border: 1px solid var(--fglc-line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	color: var(--fglc-text);
	cursor: pointer;
}
.fglc-restart:hover { border-color: var(--fglc-bg); }
.fglc-restart:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 2px; }

.fglc-form[hidden] { display: none; }

/* --------------------------------------------- Bitte um die E-Mail-Adresse */

.fglc-emailask { max-width: 100%; }

.fglc-emailask-box {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--fglc-line);
	border-radius: 12px;
	background: #fff;
	text-align: left;
}

.fglc-emailask-text {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--fglc-text);
}

.fglc-emailask-input {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--fglc-line);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: var(--fglc-text);
	background: #fff;
}
.fglc-emailask-input:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 1px; }
.fglc-emailask-input[aria-invalid="true"] { border-color: #e5484d; }

.fglc-emailask-actions { display: flex; gap: 8px; margin-top: 8px; }

.fglc-emailask-send,
.fglc-emailask-later {
	flex: 0 0 auto;
	padding: 7px 12px;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.fglc-emailask-send {
	border: 0;
	background: var(--fglc-bg);
	color: var(--fglc-fg);
}
.fglc-emailask-send[disabled] { opacity: 0.5; cursor: default; }

.fglc-emailask-later {
	border: 1px solid var(--fglc-line);
	background: transparent;
	color: var(--fglc-muted);
}

.fglc-emailask-send:focus-visible,
.fglc-emailask-later:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 2px; }

/* ---------------------------------------------------------------- Eingabe */

/* Meldung zur Nachricht selbst – sitzt zwischen DSGVO-Hinweis und Formular. */
.fglc-form-error {
	display: block;
	padding: 6px 12px 0;
	background: #fff;
	font-size: 12px;
	font-style: normal;
	color: #e5484d;
}
.fglc-form-error[hidden] { display: none; }

.fglc-input[aria-invalid="true"] { border-color: #e5484d; }

.fglc-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid var(--fglc-line);
}

.fglc-input {
	flex: 1 1 auto;
	max-height: 120px;
	padding: 9px 11px;
	border: 1px solid var(--fglc-line);
	border-radius: 12px;
	font: inherit;
	color: var(--fglc-text);
	background: #fff;
	resize: none;
	overflow-y: auto;
}
.fglc-input:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 1px; }

.fglc-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border: 0;
	border-radius: 50%;
	background: var(--fglc-bg);
	color: var(--fglc-fg);
	cursor: pointer;
}
.fglc-send:focus-visible { outline: 3px solid var(--fglc-bg); outline-offset: 2px; }

/* Leeres Eingabefeld: gedaempft, aber weiterhin anklickbar – der Klick soll
   die Meldung ausloesen. Deshalb kein echtes disabled. */
.fglc-send.is-empty { opacity: 0.45; }
.fglc-send svg { width: 20px; height: 20px; display: block; }
.fglc-send svg path { fill: var(--fglc-fg); }

/* ------------------------------------------------------- Trigger-Nachricht */

.fglc-trigger {
	position: absolute;
	bottom: 72px;
	display: flex;
	align-items: flex-start;
	gap: 4px;
	width: 290px;
	max-width: calc(100vw - 40px);
	animation: fglc-einblenden 0.25s ease;
}

.fglc-right .fglc-trigger { right: 0; }
.fglc-left  .fglc-trigger { left: 0; }

.fglc-trigger-body {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid var(--fglc-line);
	border-radius: 14px;
	background: var(--fglc-surface);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	font: inherit;
	text-align: left;
	color: var(--fglc-text);
	cursor: pointer;
}

.fglc-trigger-body:hover { border-color: var(--fglc-bg); }
.fglc-trigger-body:focus-visible { outline: 3px solid var(--fglc-bg); outline-offset: 2px; }

.fglc-trigger-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fglc-trigger-text strong { font-size: 13px; }
.fglc-trigger-text span { font-size: 14px; overflow-wrap: anywhere; }

.fglc-trigger-close {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fglc-line);
	color: var(--fglc-text);
	font-size: 11px;
	line-height: 22px;
	cursor: pointer;
}
.fglc-trigger-close:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 2px; }

@keyframes fglc-einblenden {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Honeypot: unsichtbar, aber im DOM erreichbar für Bots. */
.fglc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.fglc-hint {
	padding: 9px 14px;
	background: #fff;
	border-top: 1px solid var(--fglc-line);
	font-size: 11px;
	line-height: 1.4;
	color: var(--fglc-muted);
	text-align: center;
}

.fglc-hint[hidden] { display: none; }

.fglc-hint-link {
	color: var(--fglc-bg);
	text-decoration: underline;
	white-space: nowrap;
}
.fglc-hint-link:focus-visible { outline: 2px solid var(--fglc-bg); outline-offset: 2px; }

/* ------------------------------------------------------------ Mobile/A11y */

@media (max-width: 480px) {
	.fglc-root { bottom: 14px; }
	.fglc-right { right: 14px; }
	.fglc-left  { left: 14px; }

	.fglc-panel {
		width: calc(100vw - 28px);
		height: calc(100vh - 110px);
	}

	.fglc-trigger { width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
	.fglc-panel,
	.fglc-launcher { transition: none; }
	.fglc-trigger { animation: none; }
	.fglc-dot { animation: none; }
	.fglc-list { scroll-behavior: auto; }
}