/* Contact Hub — front-end widget. No external fonts, images or requests. */

.ch-scope {
	--ch-accent: #2f3fd0;
	--ch-accent-rgb: 47, 63, 208;
	--ch-on-accent: #fff;
	--ch-surface: #fff;
	--ch-ink: #14181f;
	--ch-muted: #5b6573;
	--ch-line: #e6e9ee;
	--ch-hover: #f2f4f8;
	--ch-ok: #16a34a;
	--ch-off: #9aa4b2;
	--ch-shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 14px 36px -10px rgba(20, 24, 31, .28);
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
	-webkit-text-size-adjust: 100%;
}
.ch-scope *,
.ch-scope *::before,
.ch-scope *::after { box-sizing: inherit; }

#contact-hub[data-theme="dark"] {
	--ch-surface: #171b22;
	--ch-ink: #eef1f5;
	--ch-muted: #9aa4b2;
	--ch-line: #272d38;
	--ch-hover: #202632;
	--ch-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px -10px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
	#contact-hub[data-theme="auto"] {
		--ch-surface: #171b22;
		--ch-ink: #eef1f5;
		--ch-muted: #9aa4b2;
		--ch-line: #272d38;
		--ch-hover: #202632;
		--ch-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px -10px rgba(0, 0, 0, .7);
	}
}

/* ---------- anchor ---------- */
#contact-hub {
	position: fixed;
	z-index: 99990;
	bottom: calc(var(--ch-y, 20px) + env(safe-area-inset-bottom, 0px));
	width: 56px;
	height: 56px;
}
#contact-hub[data-pos="right"] { right: calc(var(--ch-x, 20px) + env(safe-area-inset-right, 0px)); }
#contact-hub[data-pos="left"]  { left: calc(var(--ch-x, 20px) + env(safe-area-inset-left, 0px)); }

@media (max-width: 767px) { .ch-scope.ch-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .ch-scope.ch-hide-desktop { display: none !important; } }

/* ---------- launcher ---------- */
.ch-scope .ch-launch {
	appearance: none;
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ch-accent);
	color: var(--ch-on-accent);
	box-shadow: var(--ch-shadow);
	cursor: pointer;
	transition: transform .2s ease;
	/* spring-in on page load; `backwards` so it never fights the hover transform afterwards */
	animation: ch-enter .6s cubic-bezier(.34, 1.56, .64, 1) .5s backwards;
}
.ch-scope .ch-launch:hover { transform: scale(1.06); background: var(--ch-accent); color: var(--ch-on-accent); }
.ch-scope .ch-launch:focus-visible,
.ch-scope .ch-bubble-body:focus-visible,
.ch-scope .ch-bubble-x:focus-visible,
.ch-scope .ch-item:focus-visible,
.ch-scope .ch-copy:focus-visible,
.ch-scope .ch-btn:focus-visible {
	outline: 2px solid var(--ch-accent);
	outline-offset: 2px;
}
.ch-scope .ch-launch:focus-visible { box-shadow: 0 0 0 3px var(--ch-surface), 0 0 0 5px var(--ch-accent), var(--ch-shadow); outline: 0; }

.ch-scope .ch-ico { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .25s ease, opacity .2s ease; }
.ch-scope .ch-ico .ch-svg { width: 26px; height: 26px; }
.ch-scope .ch-ico-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
#contact-hub[data-state="open"] .ch-ico-open { opacity: 0; transform: rotate(45deg) scale(.6); }
#contact-hub[data-state="open"] .ch-ico-close { opacity: 1; transform: none; }

.ch-scope .ch-status-dot {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 16px;
	border: 3px solid var(--ch-surface);
	border-radius: 50%;
	background: var(--ch-off);
}
#contact-hub[data-status] .ch-status-dot { display: block; }
#contact-hub[data-status="online"] .ch-status-dot { background: var(--ch-ok); }

/* ---------- pulsing rings (like the original widget, but two staggered ripples) ---------- */
.ch-scope .ch-launch::before,
.ch-scope .ch-launch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	animation: ch-pulse 2.4s ease-out 1.4s infinite;
}
.ch-scope .ch-launch::after { animation-delay: 2.6s; }
.ch-scope.ch-no-pulse .ch-launch::before,
.ch-scope.ch-no-pulse .ch-launch::after,
.ch-scope .ch-launch:hover::before,
.ch-scope .ch-launch:hover::after,
.ch-scope .ch-launch:focus-visible::before,
.ch-scope .ch-launch:focus-visible::after,
#contact-hub[data-state="open"] .ch-launch::before,
#contact-hub[data-state="open"] .ch-launch::after { animation: none; }

@keyframes ch-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--ch-accent-rgb), .55); }
	70%  { box-shadow: 0 0 0 16px rgba(var(--ch-accent-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--ch-accent-rgb), 0); }
}
@keyframes ch-enter {
	from { opacity: 0; transform: translateY(24px) scale(.4); }
	to   { opacity: 1; transform: none; }
}

/* ---------- staggered rows when the panel opens ---------- */
#contact-hub[data-state="open"] .ch-head { animation: ch-rise .35s cubic-bezier(.2, .8, .2, 1) backwards; }
#contact-hub[data-state="open"] .ch-item-row {
	animation: ch-rise .38s cubic-bezier(.2, .8, .2, 1) backwards;
	animation-delay: calc(var(--i, 0) * 50ms + 90ms);
}
.ch-scope .ch-item-row:nth-child(2)  { --i: 1; }
.ch-scope .ch-item-row:nth-child(3)  { --i: 2; }
.ch-scope .ch-item-row:nth-child(4)  { --i: 3; }
.ch-scope .ch-item-row:nth-child(5)  { --i: 4; }
.ch-scope .ch-item-row:nth-child(6)  { --i: 5; }
.ch-scope .ch-item-row:nth-child(7)  { --i: 6; }
.ch-scope .ch-item-row:nth-child(8)  { --i: 7; }
.ch-scope .ch-item-row:nth-child(9)  { --i: 8; }
.ch-scope .ch-item-row:nth-child(10) { --i: 9; }
.ch-scope .ch-item-row:nth-child(11) { --i: 10; }
.ch-scope .ch-item-row:nth-child(12) { --i: 11; }
@keyframes ch-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* icon tiles react on hover */
.ch-scope .ch-tile { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.ch-scope .ch-item:hover .ch-tile,
.ch-scope .ch-item:focus-visible .ch-tile { transform: scale(1.1) rotate(-6deg); }

/* ---------- panel ---------- */
.ch-scope .ch-panel {
	position: absolute;
	bottom: calc(100% + 12px);
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100vw - 2 * var(--ch-x, 20px)));
	max-height: calc(100vh - var(--ch-y, 20px) - 96px);
	max-height: calc(100dvh - var(--ch-y, 20px) - 96px);
	overflow: hidden;
	border: 1px solid var(--ch-line);
	border-radius: 20px;
	background: var(--ch-surface);
	color: var(--ch-ink);
	box-shadow: var(--ch-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(.98);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
#contact-hub[data-pos="right"] .ch-panel { right: 0; transform-origin: bottom right; }
#contact-hub[data-pos="left"] .ch-panel { left: 0; transform-origin: bottom left; }
#contact-hub[data-state="open"] .ch-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.ch-scope .ch-head { display: flex; gap: 10px; align-items: flex-start; padding: 18px 20px 12px; }
.ch-scope .ch-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ch-ink); }
.ch-scope .ch-sub { margin: 2px 0 0; font-size: 13px; color: var(--ch-muted); }
.ch-scope .ch-dot { display: none; flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--ch-off); }
#contact-hub[data-status] .ch-dot { display: block; }
#contact-hub[data-status="online"] .ch-dot { background: var(--ch-ok); }

.ch-scope .ch-list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; }
.ch-scope .ch-item-row { position: relative; margin: 0; padding: 0; list-style: none; }
.ch-scope .ch-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 14px;
	color: var(--ch-ink);
	text-decoration: none;
	transition: background-color .15s ease;
}
.ch-scope .ch-item:hover { background: var(--ch-hover); color: var(--ch-ink); text-decoration: none; }

.ch-scope .ch-tile {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--ch-c, var(--ch-accent));
	color: #fff;
}
.ch-scope .ch-tile .ch-svg { width: 20px; height: 20px; }

.ch-scope .ch-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ch-scope .ch-label { font-size: 14px; font-weight: 600; color: var(--ch-ink); }
.ch-scope .ch-cta { font-size: 12.5px; color: var(--ch-muted); }
.ch-scope .ch-chev { display: grid; flex: none; color: var(--ch-muted); }
.ch-scope .ch-chev .ch-svg { width: 18px; height: 18px; }
.ch-scope.ch-rtl .ch-chev .ch-svg { transform: scaleX(-1); }

.ch-scope .ch-copy {
	display: none;
	appearance: none;
	position: absolute;
	top: 50%;
	inset-inline-end: 38px;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ch-muted);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .15s ease, background-color .15s ease;
}
.ch-scope .ch-copy .ch-svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
	.ch-scope .ch-copy { display: grid; }
	.ch-scope .ch-item-row:hover .ch-copy,
	.ch-scope .ch-item-row:focus-within .ch-copy { opacity: 1; }
	.ch-scope .ch-copy:hover { background: var(--ch-line); color: var(--ch-ink); }
}

.ch-scope .ch-toast {
	max-height: 0;
	margin: 0;
	padding: 0 20px;
	overflow: hidden;
	font-size: 12.5px;
	color: var(--ch-muted);
	transition: max-height .2s ease, padding .2s ease;
}
.ch-scope .ch-toast.is-on { max-height: 40px; padding-block: 4px 12px; }

/* ---------- welcome bubble ---------- */
.ch-scope .ch-bubble {
	position: absolute;
	bottom: 8px;
	display: flex;
	align-items: stretch;
	width: max-content;
	max-width: min(260px, calc(100vw - 2 * var(--ch-x, 20px) - 72px));
	border: 1px solid var(--ch-line);
	border-radius: 16px;
	background: var(--ch-surface);
	color: var(--ch-ink);
	box-shadow: var(--ch-shadow);
	animation: ch-pop .28s ease both;
}
.ch-scope .ch-bubble[hidden] { display: none; }
#contact-hub[data-pos="right"] .ch-bubble { right: calc(100% + 12px); }
#contact-hub[data-pos="left"] .ch-bubble { left: calc(100% + 12px); }

.ch-scope .ch-bubble-body {
	appearance: none;
	margin: 0;
	padding: 10px 6px;
	padding-inline-start: 14px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 13.5px;
	text-align: start;
	cursor: pointer;
}
.ch-scope .ch-bubble-x {
	appearance: none;
	display: grid;
	place-items: center;
	align-self: flex-start;
	width: 28px;
	height: 28px;
	margin: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ch-muted);
	cursor: pointer;
}
.ch-scope .ch-bubble-x:hover { background: var(--ch-hover); color: var(--ch-ink); }
.ch-scope .ch-bubble-x .ch-svg { width: 14px; height: 14px; }

@keyframes ch-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- [contact_hub_buttons] shortcode ---------- */
.ch-scope.ch-inline { display: flex; flex-wrap: wrap; gap: 10px; margin: 1em 0; padding: 0; list-style: none; }
.ch-scope.ch-inline li { margin: 0; padding: 0; list-style: none; }
.ch-scope .ch-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 6px 6px;
	padding-inline: 6px 16px;
	border-radius: 999px;
	background: var(--ch-hover);
	color: var(--ch-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease;
}
.ch-scope .ch-btn:hover { background: var(--ch-line); color: var(--ch-ink); text-decoration: none; }
.ch-scope .ch-btn .ch-tile { width: 32px; height: 32px; border-radius: 50%; }
.ch-scope .ch-btn .ch-tile .ch-svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
	.ch-scope *,
	.ch-scope *::before,
	.ch-scope *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}