/*
 * Chaty launcher
 *
 * Recreates the compact Shopify Inbox launcher used by the SLINKOR reference
 * theme. These rules intentionally target only Chaty's collapsed main trigger;
 * the close trigger and individual channel buttons retain their plugin styles.
 */

[id^="chaty-widget-"] .chaty-cta-main.active,
[id^="chaty-widget-"] .chaty-cta-main.active .chaty-cta-button,
[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty {
	width: 56px;
	height: 56px;
	min-width: 56px;
	min-height: 56px;
}

[id^="chaty-widget-"] .chaty-cta-main.active .chaty-cta-button {
	box-sizing: border-box;
	/* Chaty injects its configured launcher color after theme styles. */
	background: rgba(255, 255, 255, 0.78) !important;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 50%;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 1px 3px rgba(15, 23, 42, 0.08),
		0 8px 22px rgba(15, 23, 42, 0.1);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: #374151;
}

[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty > .chaty-svg {
	opacity: 0;
	visibility: hidden;
}

[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23374151' stroke-width='2' stroke-linejoin='round' d='M7 5h18a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4h-3v4.2a.8.8 0 0 1-1.3.6L15 23H7a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4Z'/%3E%3Cpath fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' d='M9 12h14M9 17h10'/%3E%3C/svg%3E");
	content: "";
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Match only the expanded Close trigger colors to the main launcher. */
[id^="chaty-widget-"] .chaty-widget.chaty-open .chaty-cta-close .chaty-cta-button {
	background: rgba(255, 255, 255, 0.78) !important;
}

[id^="chaty-widget-"] .chaty-widget.chaty-open .chaty-cta-close button {
	background: transparent !important;
}

[id^="chaty-widget-"] .chaty-widget.chaty-open .chaty-cta-close ellipse {
	fill: transparent !important;
}

[id^="chaty-widget-"] .chaty-widget.chaty-open .chaty-cta-close rect {
	fill: #374151 !important;
}

@media (hover: hover) and (pointer: fine) {
	[id^="chaty-widget-"] .chaty-cta-main.active:hover .chaty-cta-button {
		transform: scale(1.04);
	}
}

[id^="chaty-widget-"] .chaty-cta-main.active:active .chaty-cta-button {
	transform: scale(0.98);
}

[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty:focus-visible {
	outline: 2px solid rgba(55, 65, 81, 0.35);
	outline-offset: 3px;
}

@media (min-width: 1200px) {
	[id^="chaty-widget-"] .chaty-widget .chaty-channel-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		width: 52px;
		height: 180px !important;
		right: 4px;
		bottom: 64px;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-channel-list > .chaty-channel {
		position: relative;
		inset: auto;
		flex: 0 0 52px;
		width: 52px !important;
		height: 52px !important;
		margin: 0;
		border-radius: 50%;
		transform: none !important;
		transition: opacity 0.5s ease;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-channel-list > .chaty-channel > :is(a, button),
	[id^="chaty-widget-"] .chaty-widget .chaty-channel-list > .chaty-channel .chaty-svg {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px;
		min-height: 52px;
		max-width: 52px;
		max-height: 52px;
		border-radius: 50%;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-channel-list > .chaty-channel .chaty-svg {
		display: grid;
		place-items: center;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-channel-list > .chaty-channel .chaty-svg > svg {
		width: 40px !important;
		height: 40px !important;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger :is(.chaty-cta-main, .chaty-cta-close) {
		position: absolute;
		inset: auto 4px 0 auto;
		width: 52px;
		height: 52px;
		min-width: 52px;
		min-height: 52px;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		transform-origin: 50% 50%;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger :is(.chaty-cta-main, .chaty-cta-close) .chaty-cta-button {
		display: grid;
		place-items: center;
		box-sizing: border-box;
		width: 52px;
		height: 52px;
		min-width: 52px;
		min-height: 52px;
		background: rgba(255, 255, 255, 0.78) !important;
		border: 1px solid rgba(15, 23, 42, 0.08);
		border-radius: 50%;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.7),
			0 1px 3px rgba(15, 23, 42, 0.08),
			0 8px 22px rgba(15, 23, 42, 0.1);
		transform-origin: 50% 50%;
		transition:
			opacity 0.25s ease,
			visibility 0.25s ease,
			transform 0.25s ease,
			box-shadow 0.25s ease;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-main > .chaty-cta-button > button.open-chaty,
	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-close > .chaty-cta-button > button {
		display: grid;
		place-items: center;
		width: 50px !important;
		height: 50px !important;
		min-width: 50px;
		min-height: 50px;
		max-width: 50px;
		max-height: 50px;
		padding: 0;
		background: transparent !important;
		border: 0;
		border-radius: 50%;
		box-shadow: none;
		transform-origin: 50% 50%;
		transition: none;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-main > .chaty-cta-button > button.open-chaty > .chaty-svg,
	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-close > .chaty-cta-button > button > .chaty-svg {
		width: 50px !important;
		height: 50px !important;
		background: transparent !important;
		border-radius: 50%;
	}

	[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty::after {
		width: 24px;
		height: 24px;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-main > .chaty-cta-button > button.open-chaty circle,
	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-close > .chaty-cta-button > button ellipse {
		fill: transparent !important;
	}

	[id^="chaty-widget-"] .chaty-widget .chaty-i-trigger .chaty-cta-close rect {
		fill: #374151 !important;
	}
}

@media (max-width: 767px) {
	[id^="chaty-widget-"] .chaty-cta-main.active,
	[id^="chaty-widget-"] .chaty-cta-main.active .chaty-cta-button,
	[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty {
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
	}

	[id^="chaty-widget-"] .chaty-cta-main.active button.open-chaty::after {
		width: 22px;
		height: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[id^="chaty-widget-"] .chaty-cta-main.active .chaty-cta-button {
		transition: none;
	}
}