/* Contact Widget — frontend styles */

.cw-widget {
	--cw-size: 56px;
	--cw-brand: #0866ff;
	--cw-gap: 14px;
	--cw-bg: #ffffff;
	--cw-tip-bg: #1f2937;
	--cw-tip-fg: #ffffff;
	position: fixed;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cw-gap);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s ease, transform .35s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cw-widget.cw-ready {
	opacity: 1;
	transform: none;
}

/* Positions */
.cw-pos-right  { right: 22px; bottom: 22px; }
.cw-pos-left   { left: 22px;  bottom: 22px; align-items: flex-start; }
.cw-pos-bottom { left: 50%; bottom: 18px; transform: translateX(-50%) translateY(12px); flex-direction: row; }
.cw-pos-bottom.cw-ready { transform: translateX(-50%); }

/* List */
.cw-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cw-gap);
}
.cw-pos-bottom .cw-list { flex-direction: row; }

/* Buttons */
.cw-btn {
	--cw-c: var(--cw-brand);
	width: var(--cw-size);
	height: var(--cw-size);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cw-c);
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
	position: relative;
}
.cw-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	color: #fff;
}
.cw-shape-round  .cw-btn { border-radius: 50%; }
.cw-shape-square .cw-btn { border-radius: 16px; }

.cw-icon { width: 54%; height: 54%; display: flex; }
.cw-icon svg { width: 100%; height: 100%; }

/* Channel items in toggle mode start hidden */
.cw-mode-toggle .cw-item {
	opacity: 0;
	transform: scale(.4) translateY(8px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.cw-mode-toggle.cw-open .cw-item {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* Stagger the fan-out */
.cw-mode-toggle.cw-open .cw-item:nth-child(1) { transition-delay: .03s; }
.cw-mode-toggle.cw-open .cw-item:nth-child(2) { transition-delay: .08s; }
.cw-mode-toggle.cw-open .cw-item:nth-child(3) { transition-delay: .13s; }

/* Static mode: hide toggle button (none rendered) — items always visible */
.cw-mode-static .cw-item { opacity: 1; }

/* Toggle button icon swap */
.cw-toggle .cw-icon-close { display: none; }
.cw-open .cw-toggle .cw-icon-open { display: none; }
.cw-open .cw-toggle .cw-icon-close { display: flex; }
.cw-toggle .cw-icon { transition: transform .25s ease; }
.cw-open .cw-toggle { transform: rotate(0); }

/* Tooltip */
.cw-tip {
	position: absolute;
	white-space: nowrap;
	background: var(--cw-tip-bg);
	color: var(--cw-tip-fg);
	font-size: 13px;
	line-height: 1;
	padding: 8px 11px;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.cw-pos-right .cw-tip  { right: calc(100% + 12px); transform: translateX(6px); }
.cw-pos-left .cw-tip   { left: calc(100% + 12px);  transform: translateX(-6px); }
.cw-pos-bottom .cw-tip { bottom: calc(100% + 12px); transform: translateY(6px); }
.cw-btn:hover .cw-tip { opacity: 1; transform: none; }
.cw-tip::after {
	content: "";
	position: absolute;
	border: 6px solid transparent;
}
.cw-pos-right .cw-tip::after  { left: 100%; top: 50%; margin-top: -6px; border-left-color: var(--cw-tip-bg); }
.cw-pos-left .cw-tip::after   { right: 100%; top: 50%; margin-top: -6px; border-right-color: var(--cw-tip-bg); }
.cw-pos-bottom .cw-tip::after { top: 100%; left: 50%; margin-left: -6px; border-top-color: var(--cw-tip-bg); }

/* CTA bubble */
.cw-cta {
	position: absolute;
	bottom: calc(var(--cw-size) + 16px);
	background: var(--cw-bg);
	color: #1f2937;
	font-size: 14px;
	padding: 11px 34px 11px 14px;
	border-radius: 14px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
	opacity: 0;
	transform: translateY(8px) scale(.9);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
	max-width: 220px;
}
.cw-pos-right .cw-cta  { right: 0; }
.cw-pos-left .cw-cta   { left: 0; }
.cw-pos-bottom .cw-cta { left: 50%; transform: translateX(-50%) translateY(8px) scale(.9); }
.cw-cta.cw-cta-show { opacity: 1; transform: none; pointer-events: auto; }
.cw-pos-bottom .cw-cta.cw-cta-show { transform: translateX(-50%); }
.cw-cta-x {
	position: absolute;
	top: 4px;
	right: 6px;
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
}

/* Entrance animations on the toggle / first button */
.cw-anim-pulse  .cw-toggle { animation: cw-pulse 2s infinite; }
.cw-anim-bounce .cw-toggle { animation: cw-bounce 2.4s infinite; }
.cw-anim-shake  .cw-toggle { animation: cw-shake 3s infinite; }
.cw-open.cw-anim-pulse  .cw-toggle,
.cw-open.cw-anim-bounce .cw-toggle,
.cw-open.cw-anim-shake  .cw-toggle { animation: none; }

@keyframes cw-pulse {
	0%   { box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 0 var(--cw-c); }
	70%  { box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 16px rgba(0,0,0,0); }
	100% { box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes cw-bounce {
	0%, 100%, 60% { transform: translateY(0); }
	30% { transform: translateY(-9px); }
	45% { transform: translateY(-4px); }
}
@keyframes cw-shake {
	0%, 92%, 100% { transform: rotate(0); }
	93% { transform: rotate(-12deg); }
	95% { transform: rotate(10deg); }
	97% { transform: rotate(-8deg); }
	99% { transform: rotate(6deg); }
}

/* Dark theme */
.cw-theme-dark .cw-cta,
.cw-theme-auto .cw-cta { /* light default */ }
.cw-theme-dark .cw-cta { background: #1f2937; color: #f3f4f6; }
.cw-theme-dark .cw-cta-x { color: #6b7280; }
@media (prefers-color-scheme: dark) {
	.cw-theme-auto { --cw-bg: #1f2937; }
	.cw-theme-auto .cw-cta { background: #1f2937; color: #f3f4f6; }
	.cw-theme-auto .cw-cta-x { color: #6b7280; }
}

/* Device rules (enforced client-side via class toggle) */
.cw-hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.cw-widget, .cw-btn, .cw-item, .cw-cta { transition: none; }
	.cw-toggle { animation: none !important; }
}