/* ==========================================================================
   ABC Floating Chat Buttons — Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.abc-fb-wrap {
	--abc-fb-tooltip-bg: #333;
	--abc-fb-tooltip-color: #fff;
	--abc-fb-icon-color: #fff;
	--abc-fb-spacing: 8px;
	--abc-fb-offset: 20px;
	--abc-fb-z: 9999;
	box-sizing: border-box;
}

.abc-fb-wrap *,
.abc-fb-wrap *::before,
.abc-fb-wrap *::after {
	box-sizing: border-box;
}

.abc-fb-fixed {
	position: fixed;
	z-index: var(--abc-fb-z);
	display: flex;
	flex-direction: column;
}

/* Positions */
.abc-fb-pos-right-middle {
	right: var(--abc-fb-offset);
	top: 50%;
	transform: translateY(-50%);
}

.abc-fb-pos-left-middle {
	left: var(--abc-fb-offset);
	top: 50%;
	transform: translateY(-50%);
}

.abc-fb-pos-bottom-right {
	right: var(--abc-fb-offset);
	bottom: var(--abc-fb-offset);
}

.abc-fb-pos-bottom-left {
	left: var(--abc-fb-offset);
	bottom: var(--abc-fb-offset);
}

/* Scroll-trigger: hidden until JS reveals it */
.abc-fb-scroll-trigger {
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.abc-fb-scroll-trigger.abc-fb-revealed {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */
.abc-fb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--abc-fb-spacing);
	align-items: flex-end;
}

.abc-fb-pos-left-middle .abc-fb-list,
.abc-fb-pos-bottom-left .abc-fb-list {
	align-items: flex-start;
}

.abc-fb-item {
	position: relative;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.abc-fb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
	border: none;
	outline: none;
	line-height: 1;
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	color: var(--abc-fb-icon-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	isolation: isolate;
}

.abc-fb-btn:hover,
.abc-fb-btn:focus-visible {
	opacity: 0.9;
	transform: scale(1.06);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.abc-fb-btn:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */
.abc-fb-size-small .abc-fb-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	justify-content: center;
}

.abc-fb-size-medium .abc-fb-btn {
	width: 48px;
	height: 48px;
	padding: 0;
	justify-content: center;
}

.abc-fb-size-large .abc-fb-btn {
	width: 56px;
	height: 56px;
	padding: 0;
	justify-content: center;
}

/* When labels are visible, let button expand */
.abc-fb-has-labels .abc-fb-btn {
	width: auto;
	padding: 0 14px 0 10px;
}

.abc-fb-size-small.abc-fb-has-labels .abc-fb-btn { height: 40px; }
.abc-fb-size-medium.abc-fb-has-labels .abc-fb-btn { height: 48px; }
.abc-fb-size-large.abc-fb-has-labels .abc-fb-btn  { height: 56px; }

/* --------------------------------------------------------------------------
   Shapes
   -------------------------------------------------------------------------- */
.abc-fb-shape-circle .abc-fb-btn {
	border-radius: 50%;
}

.abc-fb-shape-rounded .abc-fb-btn {
	border-radius: 8px;
}

.abc-fb-shape-soft-square .abc-fb-btn {
	border-radius: 4px;
}

/* With labels — override circle to pill */
.abc-fb-has-labels.abc-fb-shape-circle .abc-fb-btn {
	border-radius: 50px;
}

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */
.abc-fb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.abc-fb-size-small .abc-fb-icon svg  { width: 18px; height: 18px; }
.abc-fb-size-medium .abc-fb-icon svg { width: 22px; height: 22px; }
.abc-fb-size-large .abc-fb-icon svg  { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Label
   -------------------------------------------------------------------------- */
.abc-fb-label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--abc-fb-icon-color);
}

.abc-fb-size-large .abc-fb-label {
	font-size: 15px;
}

/* Hide label on mobile when option is set */
@media (max-width: 768px) {
	.abc-fb-hide-labels-mobile .abc-fb-label {
		display: none;
	}
	.abc-fb-hide-labels-mobile .abc-fb-btn {
		width: 40px !important;
		padding: 0 !important;
		justify-content: center !important;
	}
}

/* --------------------------------------------------------------------------
   Tooltip
   -------------------------------------------------------------------------- */
.abc-fb-tooltip {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--abc-fb-tooltip-bg);
	color: var(--abc-fb-tooltip-color);
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 1;
}

/* Arrow on tooltip */
.abc-fb-tooltip::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: var(--abc-fb-tooltip-bg);
}

/* Left-side containers — flip tooltip to the right */
.abc-fb-pos-left-middle .abc-fb-tooltip,
.abc-fb-pos-bottom-left .abc-fb-tooltip {
	left: calc(100% + 10px);
	right: auto;
}

.abc-fb-pos-left-middle .abc-fb-tooltip::after,
.abc-fb-pos-bottom-left .abc-fb-tooltip::after {
	left: auto;
	right: 100%;
	border-left-color: transparent;
	border-right-color: var(--abc-fb-tooltip-bg);
}

.abc-fb-tooltips .abc-fb-btn:hover .abc-fb-tooltip,
.abc-fb-tooltips .abc-fb-btn:focus-visible .abc-fb-tooltip,
.abc-fb-btn.abc-fb-copied .abc-fb-tooltip {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.abc-fb-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ff3b30;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
	z-index: 2;
}

.abc-fb-pos-left-middle .abc-fb-badge,
.abc-fb-pos-bottom-left .abc-fb-badge {
	right: auto;
	left: -4px;
}

/* --------------------------------------------------------------------------
   Launcher toggle (collapse/expand)
   -------------------------------------------------------------------------- */

/* Collapse the *list itself* to zero height while closed — opacity and
   transform (below) are purely visual and don't remove an element from
   layout, so without this the list would keep occupying its full expanded
   height even while invisible. Anything positioned relative to the wrap's
   own box — like the greeting bubble floating above it — would then sit
   way too high above the visible toggle, off the phantom "collapsed but
   still full-height" box instead of snug against the toggle itself. */
.abc-fb-launcher .abc-fb-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.abc-fb-launcher.is-open .abc-fb-list {
	max-height: 640px;
	overflow: visible;
}

/* Channel items start hidden and collapsed toward the toggle button. */
.abc-fb-launcher .abc-fb-item {
	opacity: 0;
	transform: scale(0.4);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	transform-origin: bottom center;
}

.abc-fb-launcher.is-open .abc-fb-item {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* Stagger the reveal slightly, nearest item first. */
.abc-fb-launcher.is-open .abc-fb-item:nth-last-child(1) { transition-delay: 0.02s; }
.abc-fb-launcher.is-open .abc-fb-item:nth-last-child(2) { transition-delay: 0.06s; }
.abc-fb-launcher.is-open .abc-fb-item:nth-last-child(3) { transition-delay: 0.1s; }
.abc-fb-launcher.is-open .abc-fb-item:nth-last-child(4) { transition-delay: 0.14s; }
.abc-fb-launcher.is-open .abc-fb-item:nth-last-child(n+5) { transition-delay: 0.18s; }

/* Entrance animations (fade/slide/zoom/bounce) use animation-fill-mode:
   both, which — once the animation finishes — holds the item at its final
   keyframe value (opacity: 1) with higher priority than a later plain
   `opacity: 0` rule for the same property. Left unchecked, that silently
   un-hides every collapsed item ~0.5s after page load regardless of
   is-open. The reveal transition above already animates items in on
   click, so the entrance animation is switched off entirely in launcher
   mode rather than fighting it. */
.abc-fb-launcher .abc-fb-item {
	animation: none !important;
}

/* Don't waste the attention loop on buttons the visitor can't see yet —
   the toggle itself carries it instead while collapsed. */
.abc-fb-launcher:not(.is-open) .abc-fb-item .abc-fb-btn {
	animation: none !important;
}

.abc-fb-toggle {
	background: var(--abc-fb-launcher-bg, #1f2937);
	position: relative;
	border: none;
	font: inherit;
}

/* The toggle keeps a fixed circular footprint even when labels are on —
   it never grows a text label of its own. */
.abc-fb-size-small .abc-fb-toggle  { width: 40px !important; height: 40px !important; padding: 0 !important; }
.abc-fb-size-medium .abc-fb-toggle { width: 48px !important; height: 48px !important; padding: 0 !important; }
.abc-fb-size-large .abc-fb-toggle  { width: 56px !important; height: 56px !important; padding: 0 !important; }

.abc-fb-toggle-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.abc-fb-toggle-icon-close {
	opacity: 0;
	transform: scale(0.4) rotate(-45deg);
}

.abc-fb-launcher.is-open .abc-fb-toggle-icon-open {
	opacity: 0;
	transform: scale(0.4) rotate(45deg);
}

.abc-fb-launcher.is-open .abc-fb-toggle-icon-close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.abc-fb-launcher .abc-fb-list,
	.abc-fb-launcher .abc-fb-item,
	.abc-fb-toggle-icon {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Greeting bubble
   -------------------------------------------------------------------------- */
.abc-fb-greeting {
	position: absolute;
	bottom: calc(100% + 14px);
	right: 0;
	width: 250px;
	max-width: calc(100vw - 40px);
	background: #fff;
	color: #1d2327;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	padding: 16px 34px 16px 16px;
	opacity: 0;
	transform: translateY(10px) scale(0.97);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	text-decoration: none;
}

.abc-fb-greeting[hidden] {
	display: block; /* keep transitions working; visibility handled by is-visible */
}

.abc-fb-greeting.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.abc-fb-pos-left-middle .abc-fb-greeting,
.abc-fb-pos-bottom-left .abc-fb-greeting {
	right: auto;
	left: 0;
}

/* A small tail pointing down at the buttons — without it the bubble reads
   as an unrelated floating box instead of visibly belonging to them. */
.abc-fb-greeting::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 22px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top-color: #fff;
}

.abc-fb-pos-left-middle .abc-fb-greeting::after,
.abc-fb-pos-bottom-left .abc-fb-greeting::after {
	right: auto;
	left: 22px;
}

.abc-fb-greeting-link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.abc-fb-greeting-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 4px;
}

.abc-fb-greeting-message {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: #50575e;
}

.abc-fb-greeting-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: transparent;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: #8c8f94;
	cursor: pointer;
	padding: 4px;
}

.abc-fb-greeting-close:hover {
	color: #1d2327;
}

/* --------------------------------------------------------------------------
   Device visibility
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.abc-fb-device-mobile {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.abc-fb-device-desktop {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Entrance animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.abc-fb-anim-fade .abc-fb-item {
		animation: abc-fb-fadeIn 0.5s ease both;
	}

	.abc-fb-anim-slide.abc-fb-pos-right-middle .abc-fb-item,
	.abc-fb-anim-slide.abc-fb-pos-bottom-right .abc-fb-item {
		animation: abc-fb-slideInRight 0.5s ease both;
	}

	.abc-fb-anim-slide.abc-fb-pos-left-middle .abc-fb-item,
	.abc-fb-anim-slide.abc-fb-pos-bottom-left .abc-fb-item {
		animation: abc-fb-slideInLeft 0.5s ease both;
	}

	.abc-fb-anim-zoom .abc-fb-item {
		animation: abc-fb-zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	.abc-fb-anim-bounce .abc-fb-item {
		animation: abc-fb-bounceIn 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) both;
	}

	/* Stagger children */
	.abc-fb-item:nth-child(1) { animation-delay: 0.1s; }
	.abc-fb-item:nth-child(2) { animation-delay: 0.2s; }
	.abc-fb-item:nth-child(3) { animation-delay: 0.3s; }
	.abc-fb-item:nth-child(4) { animation-delay: 0.4s; }
	.abc-fb-item:nth-child(5) { animation-delay: 0.5s; }
	.abc-fb-item:nth-child(6) { animation-delay: 0.6s; }
	.abc-fb-item:nth-child(n+7) { animation-delay: 0.65s; }
}

@keyframes abc-fb-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes abc-fb-slideInRight {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes abc-fb-slideInLeft {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes abc-fb-zoomIn {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes abc-fb-bounceIn {
	0%   { opacity: 0; transform: translateY(30px); }
	60%  { opacity: 1; transform: translateY(-6px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Attention loop (repeating "look at me" effects)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	/* Pulse ring */
	.abc-fb-attn-pulse .abc-fb-btn::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: currentColor;
		opacity: 0.55;
		z-index: -1;
		animation: abc-fb-pulseRing 2.2s ease-out infinite;
	}

	/* Gentle bounce */
	.abc-fb-attn-bounce .abc-fb-btn {
		animation: abc-fb-gentleBounce 2.4s ease-in-out infinite;
	}

	/* Occasional shake */
	.abc-fb-attn-shake .abc-fb-btn {
		animation: abc-fb-occasionalShake 5s ease-in-out infinite;
	}
}

@keyframes abc-fb-pulseRing {
	0%   { transform: scale(1); opacity: 0.5; }
	80%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}

@keyframes abc-fb-gentleBounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@keyframes abc-fb-occasionalShake {
	0%, 92%, 100% { transform: rotate(0); }
	93%  { transform: rotate(-8deg); }
	94%  { transform: rotate(8deg); }
	95%  { transform: rotate(-6deg); }
	96%  { transform: rotate(6deg); }
	97%  { transform: rotate(-3deg); }
	98%  { transform: rotate(0); }
}

/* --------------------------------------------------------------------------
   Style presets
   -------------------------------------------------------------------------- */

/* Minimal — flat, no shadow, thin border */
.abc-fb-preset-minimal .abc-fb-btn {
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Glass — translucent, blurred backdrop */
.abc-fb-preset-glass .abc-fb-btn {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.abc-fb-preset-glass .abc-fb-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

/* Neon — glow ring */
.abc-fb-preset-neon .abc-fb-btn {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 22px 4px rgba(0, 0, 0, 0.4);
}

.abc-fb-preset-neon .abc-fb-btn:hover,
.abc-fb-preset-neon .abc-fb-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 30px 8px rgba(0, 0, 0, 0.45);
}

/* Gradient — glossy diagonal sheen */
.abc-fb-preset-gradient .abc-fb-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.15));
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Mobile safety — don't let the group overwhelm the screen
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.abc-fb-size-large .abc-fb-btn {
		width: 44px;
		height: 44px;
	}
	.abc-fb-size-large .abc-fb-icon svg {
		width: 22px;
		height: 22px;
	}
}