/* 客服悬浮入口（全站公共，customer-service.blade.php） */
.ost-cs {
	position: fixed;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	z-index: 1000;
}

.ost-cs-trigger {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #4cc9ff 0%, #0a84ff 58%, #0066ff 100%);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 132, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

/* 呼吸光晕 */
.ost-cs-trigger::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(10, 132, 255, .3) 0%, rgba(10, 132, 255, 0) 70%);
	z-index: -1;
	animation: ost-cs-glow 2.4s ease-in-out infinite;
}

/* 扩散光圈 */
.ost-cs-trigger::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(10, 132, 255, .42);
	z-index: -1;
	animation: ost-cs-pulse 2.4s ease-out infinite;
}

.ost-cs-trigger:hover,
.ost-cs-trigger:active {
	color: #fff;
	background: linear-gradient(135deg, #66d2ff 0%, #1a8cff 58%, #0066ff 100%);
	box-shadow: 0 14px 30px rgba(0, 132, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
	text-decoration: none;
	transform: scale(1.08);
}

.ost-cs-trigger:active {
	transform: scale(.98);
}

.ost-cs-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
}

.ost-cs-icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	display: block;
}

.ost-cs-trigger:hover .ost-cs-icon svg {
	animation: ost-cs-wiggle .45s ease-in-out;
}

/* 圆形按钮里放不下长文案：改为悬停气泡显示 */
.ost-cs-text {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	padding: 7px 11px;
	border-radius: 8px;
	background: rgba(17, 24, 39, .92);
	box-shadow: 0 6px 18px rgba(16, 24, 40, .22);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(4px, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

.ost-cs-text::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left-color: rgba(17, 24, 39, .92);
	transform: translateY(-50%);
}

.ost-cs-trigger:hover .ost-cs-text,
.ost-cs-trigger:focus-visible .ost-cs-text {
	opacity: 1;
	transform: translate(0, -50%);
}

@keyframes ost-cs-pulse {
	0% {
		transform: scale(1);
		opacity: .5;
	}

	70%,
	100% {
		transform: scale(1.55);
		opacity: 0;
	}
}

@keyframes ost-cs-glow {
	0%,
	100% {
		transform: scale(1);
		opacity: .55;
	}

	50% {
		transform: scale(1.16);
		opacity: .95;
	}
}

@keyframes ost-cs-wiggle {
	0%,
	100% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(-9deg);
	}

	75% {
		transform: rotate(9deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ost-cs-trigger::before,
	.ost-cs-trigger::after,
	.ost-cs-trigger:hover .ost-cs-icon svg {
		animation: none;
	}
}

.ost-cs-panel {
	position: absolute;
	top: 50%;
	right: 86px;
	transform: translateY(-50%);
	width: 220px;
	padding: 18px 16px 16px;
	box-sizing: border-box;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
	text-align: center;
}

.ost-cs-panel[hidden] {
	display: none;
}

.ost-cs-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: #34333b;
}

.ost-cs-qr {
	display: block;
	width: 170px;
	height: 170px;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 8px;
}

.ost-cs-wechat {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #555e6d;
	word-break: break-all;
}

.ost-cs-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #9aa0ad;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ost-cs-close:hover {
	color: #555e6d;
}

@media (max-width: 740px) {
	.ost-cs {
		right: 12px;
	}

	.ost-cs-trigger {
		width: 50px;
		height: 50px;
		padding: 0;
	}

	.ost-cs-icon svg {
		width: 22px;
		height: 22px;
	}

	/* 触屏没有 hover，隐藏悬停气泡 */
	.ost-cs-text {
		display: none;
	}

	.ost-cs-panel {
		right: 74px;
		width: 200px;
	}

	.ost-cs-qr {
		width: 150px;
		height: 150px;
	}
}