/**
 * LKRBot — Floating Bubble Button (Light DOM)
 *
 * The floating chat button intentionally lives OUTSIDE the Shadow DOM so that
 * theme CSS, Elementor CSS and Customizer CSS can style it directly — the
 * same way as any other element on the page.
 *
 * All selectors here are kept at minimal specificity (a single class) so that
 * site CSS wins ties by source order; a `body .lkrbot-bubble { ... }` rule
 * always wins outright. No `!important` is used for layout.
 *
 * Position is driven by CSS custom properties (see docs/designer-handbuch.md):
 *   --lkrbot-bubble-bottom / -right / -left            normal state
 *   --lkrbot-bubble-bottom-scrolled / -right-scrolled  after page scroll
 *   --lkrbot-bubble-bottom-mobile / -right-mobile      small screens
 *
 * The plugin toggles the class `lkrbot-scrolled` on `.lkrbot-container`
 * once `window.scrollY` passes the configured threshold — so descendant
 * selectors like `.lkrbot-scrolled .lkrbot-bubble` (or the site's own
 * `body.scrolled .lkrbot-bubble`) work as expected.
 *
 * Hint flag next to the button: --lkrbot-bubble-tooltip-* (see below).
 */

/* Button IDENTITY (border, background, radius, typography reset, cursor):
   specificity (0,2,0) so global theme/Elementor-kit button styles like
   `.elementor-kit-X button { border: ... }` (0,1,1) can NOT leak in.
   To restyle these via selector, use `.lkrbot-container .lkrbot-bubble { ... }`. */
.lkrbot-container .lkrbot-bubble {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	background: linear-gradient(135deg, var(--lkrbot-primary, #1a5276), var(--lkrbot-accent, #2e86c1));
	color: #fff;
	font-size: 0;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Button LAYOUT: kept at minimal specificity (0,1,0) so simple site rules
   (`.lkrbot-bubble { bottom: ... }` in a later sheet, `body .lkrbot-bubble`)
   win as documented. */
.lkrbot-bubble {
	position: fixed;
	bottom: var(--lkrbot-bubble-bottom, 24px);
	right: var(--lkrbot-bubble-right, 24px);
	left: var(--lkrbot-bubble-left, auto);
	z-index: var(--lkrbot-z-index, 9999);
	width: var(--lkrbot-bubble-size, 60px);
	height: var(--lkrbot-bubble-size, 60px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--lkrbot-shadow, 0 8px 32px rgba(0,0,0,.12));
	/* `scale` instead of `transform` so site CSS can use transform freely. */
	transition: scale var(--lkrbot-transition-spring, .5s cubic-bezier(.175,.885,.32,1.275)),
	            box-shadow var(--lkrbot-transition, .3s ease),
	            bottom .35s ease, right .35s ease, left .35s ease;
	outline: none;
}

.lkrbot-bubble:hover {
	scale: 1.08;
	box-shadow: var(--lkrbot-shadow-hover, 0 12px 48px rgba(0,0,0,.18));
}

.lkrbot-bubble:active {
	scale: .95;
}

.lkrbot-bubble:focus-visible {
	outline: 2px solid var(--lkrbot-accent, #2e86c1);
	outline-offset: 2px;
}

/* --- Scrolled state (class set by the plugin on .lkrbot-container) --- */
:where(.lkrbot-scrolled) .lkrbot-bubble {
	bottom: var(--lkrbot-bubble-bottom-scrolled, var(--lkrbot-bubble-bottom, 24px));
	right: var(--lkrbot-bubble-right-scrolled, var(--lkrbot-bubble-right, 24px));
	left: var(--lkrbot-bubble-left-scrolled, var(--lkrbot-bubble-left, auto));
}

/* --- Icon / close icon swap --- */
.lkrbot-bubble-icon,
.lkrbot-bubble-close {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lkrbot-bubble-icon svg,
.lkrbot-bubble-icon img {
	width: var(--lkrbot-bubble-icon-size, 34px);
	height: var(--lkrbot-bubble-icon-size, 34px);
	translate: var(--lkrbot-bubble-icon-offset-x, 0) var(--lkrbot-bubble-icon-offset-y, 0);
	transition: transform .3s ease, opacity .2s ease;
}

.lkrbot-bubble-close svg {
	width: var(--lkrbot-bubble-icon-size, 34px);
	height: var(--lkrbot-bubble-icon-size, 34px);
	transition: transform .3s ease, opacity .2s ease;
}

.lkrbot-bubble .lkrbot-bubble-close {
	position: absolute;
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

.lkrbot-bubble.is-open .lkrbot-bubble-icon {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

.lkrbot-bubble.is-open .lkrbot-bubble-close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* --- Notification badge --- */
.lkrbot-bubble-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0);
	transition: transform var(--lkrbot-transition-spring, .5s cubic-bezier(.175,.885,.32,1.275));
}

.lkrbot-bubble-badge.is-visible {
	transform: scale(1);
}

/* --- Hint flag next to the bubble ---
   Built like the "Menü öffnen" hint at the site's menu button:
   ::after is the label, ::before the arrow pointing at the button.
   Visible after page load, fades out while the pointer is over the button
   and while the page is scrolled (class `lkrbot-tooltip-scrolled`, back at
   the very top), stays hidden once the chat has been opened (class
   `lkrbot-tooltip-used` — until the next page load). Both classes are set
   by the plugin JS.

   Text and pages: Settings → LKRBot → "Hinweis am Chat-Button" (empty = off).
   The plugin sets `data-lkrbot-tooltip` only where the hint is shown.
   Look: --lkrbot-bubble-tooltip-* variables (they reach label AND arrow),
   or plain selectors such as `.lkrbot-bubble::after { … }` in "Eigenes CSS" —
   the attribute checks sit in :where() and add no specificity, so equal
   selectors loaded later win.
   Movement uses `translate`; `transform` on the arrow would act in its
   rotated coordinates. */
.lkrbot-bubble:where([data-lkrbot-tooltip])::after {
	content: attr(data-lkrbot-tooltip);
	content: attr(data-lkrbot-tooltip) / ""; /* the button's aria-label already names it */
	position: absolute;
	/* Centred by layout (not by a -50% translate), so the 1px border lands
	   on whole pixels and stays sharp. */
	top: 0;
	bottom: 0;
	height: fit-content;
	margin-block: auto;
	right: calc(100% + var(--lkrbot-bubble-tooltip-gap, 15px));
	width: max-content;
	max-width: calc(100vw - var(--lkrbot-bubble-size, 60px) - var(--lkrbot-bubble-tooltip-gap, 15px) - 48px);
	padding: 10px 15px 5px 15px;
	background: var(--lkrbot-bubble-tooltip-bg, #ffffff);
	color: var(--lkrbot-bubble-tooltip-color, #565B69);
	border: var(--lkrbot-bubble-tooltip-border-width, 1px) solid var(--lkrbot-bubble-tooltip-border-color, #DFE0E4);
	border-radius: var(--lkrbot-bubble-tooltip-radius, 4px);
	/* The button inherits the site's button typography (e.g. serif italic) —
	   the label resets it and follows the site's text font instead. */
	font-family: var(--lkrbot-bubble-tooltip-font, var(--e-global-typography-text-font-family, sans-serif)), sans-serif;
	font-size: var(--lkrbot-bubble-tooltip-font-size, 15px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.3em;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: start;
	white-space: normal;
	overflow-wrap: anywhere;
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	pointer-events: none;
	z-index: 0;
	transition: opacity .35s ease, translate .35s ease, visibility .35s ease;
}

/* Arrow: a square turned by 45°, bordered on two sides, centred on the
   label's outer edge (any size). It sits ABOVE the label (z-index 1 vs 0)
   and covers the label's border where both meet; the margin pulls it in by
   border-width × (1 − 1/√2) so thicker borders still join cleanly. */
.lkrbot-bubble:where([data-lkrbot-tooltip])::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(100% + var(--lkrbot-bubble-tooltip-gap, 15px));
	margin-right: calc(var(--lkrbot-bubble-tooltip-border-width, 1px) * .2929);
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	translate: 50% -50%;
	rotate: 45deg;
	background: var(--lkrbot-bubble-tooltip-bg, #ffffff);
	border-style: solid;
	border-color: var(--lkrbot-bubble-tooltip-border-color, #DFE0E4);
	border-width: var(--lkrbot-bubble-tooltip-border-width, 1px) var(--lkrbot-bubble-tooltip-border-width, 1px) 0 0;
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	z-index: 1;
	transition: opacity .35s ease, translate .35s ease, visibility .35s ease;
}

/* Hover, scrolled page, after opening the chat: fade out, move 5px away from the button. */
.lkrbot-bubble:hover::after,
.lkrbot-bubble.lkrbot-tooltip-scrolled::after,
.lkrbot-bubble.lkrbot-tooltip-used::after {
	opacity: 0;
	visibility: hidden;
	translate: -5px 0;
}

.lkrbot-bubble:hover::before,
.lkrbot-bubble.lkrbot-tooltip-scrolled::before,
.lkrbot-bubble.lkrbot-tooltip-used::before {
	opacity: 0;
	visibility: hidden;
	translate: calc(50% - 5px) -50%;
}

/* Button in the bottom-left corner: the hint sits on its right side. */
.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"])::after {
	right: auto;
	left: calc(100% + var(--lkrbot-bubble-tooltip-gap, 15px));
}

.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"])::before {
	right: auto;
	left: calc(100% + var(--lkrbot-bubble-tooltip-gap, 15px));
	margin-right: 0;
	margin-left: calc(var(--lkrbot-bubble-tooltip-border-width, 1px) * .2929);
	translate: -50% -50%;
	rotate: 225deg;
}

.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"]):hover::after,
.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"]).lkrbot-tooltip-scrolled::after,
.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"]).lkrbot-tooltip-used::after {
	translate: 5px 0;
}

.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"]):hover::before,
.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"]).lkrbot-tooltip-scrolled::before,
.lkrbot-bubble:where([data-lkrbot-tooltip-side="right"]).lkrbot-tooltip-used::before {
	translate: calc(-50% + 5px) -50%;
}

/* --- Responsive --- */
@media (max-width: 480px) {
	.lkrbot-bubble {
		bottom: var(--lkrbot-bubble-bottom-mobile, calc(16px + env(safe-area-inset-bottom, 0px)));
		right: var(--lkrbot-bubble-right-mobile, var(--lkrbot-bubble-right, 16px));
		left: var(--lkrbot-bubble-left-mobile, var(--lkrbot-bubble-left, auto));
	}
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
	.lkrbot-bubble,
	.lkrbot-bubble *,
	.lkrbot-bubble::before,
	.lkrbot-bubble::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --- Print --- */
@media print {
	.lkrbot-mode-chatbox {
		display: none;
	}
}