/*
 * Onmate Floating Chat — Frontend Styles
 *
 * Architecture: always-visible vertical stack of circular channel icons.
 * Size + margin position driven by CSS custom properties injected inline by PHP:
 *   --onmate-btn-size      (px)  set from admin btn_size setting (40 / 50 / 60)
 *   --onmate-margin-bottom (px)  set from admin margin_bottom setting
 *   --onmate-margin-side   (px)  set from admin margin_side setting
 *
 * Per-channel animations:
 *   .onmate-shake  — gentle wobble via rotation keyframes
 *   .onmate-ripple — soft, transparent water-ripple via box-shadow scaling
 *
 * @package OnmateFloatingChat
 */

/* =========================================================================
   Fallback custom properties (overridden by PHP inline style)
   ========================================================================= */
:root {
	--onmate-btn-size:      50px;
	--onmate-margin-bottom: 20px;
	--onmate-margin-side:   20px;
}

/* =========================================================================
   Widget Container — always visible, fixed
   ========================================================================= */
#onmate-fc-widget {
	position: fixed;
	bottom: var(--onmate-margin-bottom);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

#onmate-fc-widget.onmate-fc-pos-right {
	right: var(--onmate-margin-side);
	align-items: flex-end;
}
#onmate-fc-widget.onmate-fc-pos-left {
	left: var(--onmate-margin-side);
	align-items: flex-start;
}

#onmate-fc-widget * {
	pointer-events: auto;
}

/* =========================================================================
   Device Visibility
   ========================================================================= */
@media (min-width: 1025px) {
	#onmate-fc-widget.onmate-fc-hide-desktop { display: none !important; }
}
@media (max-width: 1024px) {
	#onmate-fc-widget.onmate-fc-hide-mobile  { display: none !important; }
}

/* =========================================================================
   Channel Link — the circular icon button
   ========================================================================= */
.onmate-fc-channel-link {
	position: relative;
	width:  var(--onmate-btn-size);
	height: var(--onmate-btn-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #fff;
	flex-shrink: 0;

	/* Flat, modern shadow — subtle and soft */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

	transition:
		transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s ease;

	/* Must be visible so ripple rings extend outside the circle */
	overflow: visible;

	/* Create local stacking context for z-index containment */
	isolation: isolate;
}

/* SVG / img sizing inside the button */
.onmate-fc-channel-link svg,
.onmate-fc-channel-link img {
	display: block;
	/* Slightly smaller than button to leave breathing room */
	width:  calc(var(--onmate-btn-size) * 0.48);
	height: calc(var(--onmate-btn-size) * 0.48);
	max-width:  26px;
	max-height: 26px;
	object-fit: contain;
	flex-shrink: 0;
}

/* =========================================================================
   Tooltip
   ========================================================================= */
.onmate-fc-tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	transform: translateY(-50%) translateX(6px);
	background: rgba(15, 23, 42, 0.85);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: 4px 11px;
	border-radius: 20px;
	white-space: nowrap;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#onmate-fc-widget.onmate-fc-pos-left .onmate-fc-tooltip {
	right: auto;
	left: calc(100% + 10px);
	transform: translateY(-50%) translateX(-6px);
}

/* =========================================================================
   Keyboard Focus & Tooltip Display
   ========================================================================= */
.onmate-fc-channel-link:focus {
	outline: 3px solid #0f172a;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #ffffff, 0 4px 14px rgba(0, 0, 0, 0.22);
}

.onmate-fc-channel-link:focus:not(:focus-visible) {
	outline: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.onmate-fc-channel-link:focus-visible {
	outline: 3px solid #0f172a;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #ffffff, 0 4px 14px rgba(0, 0, 0, 0.22);
	transform: scale(1.1);
}

/* Keyboard Tooltip display via focus-visible */
.onmate-fc-channel-link:focus-visible .onmate-fc-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Fallback for browsers not supporting focus-visible */
@supports not selector(:focus-visible) {
	.onmate-fc-channel-link:focus .onmate-fc-tooltip {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* =========================================================================
   Hover-specific interactions (Disabled on Touch Devices to avoid sticky states)
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
	.onmate-fc-channel-link:hover {
		transform: scale(1.1);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	}
	.onmate-fc-channel-link:hover .onmate-fc-tooltip {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
	.onmate-shake:hover svg,
	.onmate-shake:hover img {
		animation-play-state: paused;
	}
}

/* =========================================================================
   Per-channel animation: Rung lắc (Shake)
   Targeting inner icons (svg, img) so the tooltip and outer button do not wobble
   ========================================================================= */
.onmate-shake svg,
.onmate-shake img {
	animation: onmate-shake 4s ease-in-out infinite;
	transform-origin: center;
}

.onmate-fc-channel-link:focus-visible svg,
.onmate-fc-channel-link:focus-visible img {
	animation-play-state: paused;
}

@keyframes onmate-shake {
	0%,  50%, 100% { transform: rotate(0deg); }
	52%            { transform: rotate(-11deg); }
	55%            { transform: rotate(11deg); }
	58%            { transform: rotate(-8deg); }
	61%            { transform: rotate(7deg); }
	64%            { transform: rotate(-4deg); }
	67%            { transform: rotate(3deg); }
	70%            { transform: rotate(0deg); }
}

/* =========================================================================
   Per-channel animation: Gợn sóng (Ripple)
   Elegant water-ripple effect using ::before and ::after.
   ========================================================================= */
.onmate-ripple::before,
.onmate-ripple::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;

	/*
	 * The ripple is a box-shadow that grows and vanishes.
	 * Starting at 0 spread with moderate opacity, expanding to a wide,
	 * near-invisible halo. Two rings (::before, ::after) are staggered.
	 */
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
	animation: onmate-ripple 2.8s ease-out infinite;
	z-index: -1;
	pointer-events: none;
}

.onmate-ripple::after {
	animation-delay: 1s;
}

@keyframes onmate-ripple {
	0%   {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.50);
		opacity: 1;
	}
	70%  {
		box-shadow: 0 0 0 calc(var(--onmate-btn-size) * 0.7) rgba(255, 255, 255, 0);
		opacity: 0.6;
	}
	100% {
		box-shadow: 0 0 0 calc(var(--onmate-btn-size) * 0.7) rgba(255, 255, 255, 0);
		opacity: 0;
	}
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 480px) {
	#onmate-fc-widget {
		gap: 8px;
	}
}

/* =========================================================================
   Accessibility Hardening & Forced Colors Mode
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.onmate-shake svg,
	.onmate-shake img,
	.onmate-ripple::before,
	.onmate-ripple::after {
		animation: none !important;
		transition: none !important;
	}
	.onmate-fc-channel-link,
	.onmate-fc-tooltip {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.onmate-fc-channel-link {
		border: 2px solid CanvasText;
	}
	.onmate-fc-channel-link:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 3px;
	}
	.onmate-fc-tooltip {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}
}