/* ChatPop — floating WhatsApp widget
   Semua aturan diberi awalan #chatpop-root agar menang atas CSS tema.
   Properti yang paling sering ditimpa tema memakai !important. */

/* ==================================================================
   1. Isolasi dari CSS tema
   ================================================================== */

#chatpop-root,
#chatpop-root *,
#chatpop-root *::before,
#chatpop-root *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	list-style: none !important;
	float: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	text-indent: 0 !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-style: normal !important;
	font-variant: normal !important;
	-webkit-font-smoothing: antialiased;
}

#chatpop-root button,
#chatpop-root a {
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	color: inherit;
	transform: none;
	filter: none !important;
	opacity: 1;
}

#chatpop-root button::before,
#chatpop-root button::after,
#chatpop-root a::before,
#chatpop-root a::after {
	content: none !important;
	display: none !important;
}

#chatpop-root button:hover,
#chatpop-root button:focus,
#chatpop-root button:active,
#chatpop-root a:hover,
#chatpop-root a:focus,
#chatpop-root a:active {
	text-decoration: none !important;
	outline: none;
}

#chatpop-root svg {
	display: block !important;
	max-width: none !important;
	fill: none;
}

#chatpop-root :focus-visible {
	outline: 3px solid var(--chatpop-brand, #25D366) !important;
	outline-offset: 3px !important;
}

/* ==================================================================
   2. Wadah
   ================================================================== */

.chatpop {
	position: fixed;
	bottom: var(--chatpop-offset-y, 24px);
	z-index: var(--chatpop-z, 999999);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	line-height: 1.45;
	pointer-events: none;
}

.chatpop--right { right: var(--chatpop-offset-x, 24px); }
.chatpop--left { left: var(--chatpop-offset-x, 24px); align-items: flex-start; }

#chatpop-root > * { pointer-events: auto; }

/* ==================================================================
   3. Tombol utama
   ================================================================== */

#chatpop-root .chatpop__launcher {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	width: var(--chatpop-size, 62px) !important;
	height: var(--chatpop-size, 62px) !important;
	border-radius: 50% !important;
	background: linear-gradient(150deg, #2ee06d 0%, var(--chatpop-brand, #25D366) 55%, #1eb455 100%) !important;
	color: var(--chatpop-icon, #fff) !important;
	box-shadow: 0 12px 28px var(--chatpop-glow, rgba(37, 211, 102, .45)), 0 3px 8px rgba(6, 40, 24, .18) !important;
	transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s ease, filter .2s ease;
}

#chatpop-root.chatpop--pill .chatpop__launcher {
	width: auto !important;
	padding: 0 24px 0 18px !important;
	border-radius: 999px !important;
}

#chatpop-root .chatpop__launcher:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 16px 34px var(--chatpop-glow, rgba(37, 211, 102, .55)), 0 4px 10px rgba(6, 40, 24, .2) !important;
}
#chatpop-root .chatpop__launcher:active { transform: translateY(0) scale(.96); }

#chatpop-root .chatpop__icon {
	display: block !important;
	width: calc(var(--chatpop-size, 62px) * .54) !important;
	height: calc(var(--chatpop-size, 62px) * .54) !important;
	flex: none;
}
#chatpop-root .chatpop__icon svg { width: 100% !important; height: 100% !important; }

#chatpop-root .chatpop__label {
	font-size: 15px !important;
	font-weight: 600 !important;
	white-space: nowrap;
	color: inherit !important;
}

#chatpop-root .chatpop__badge {
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	display: grid !important;
	place-items: center;
	min-width: 21px !important;
	height: 21px !important;
	padding: 0 6px !important;
	border-radius: 999px !important;
	background: #ff3b30 !important;
	color: #fff !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow: 0 0 0 2px #fff !important;
}

/* Animasi */

#chatpop-root .chatpop__ring {
	position: absolute;
	inset: 0;
	border-radius: 50% !important;
	pointer-events: none;
}

#chatpop-root.chatpop--anim-pulse .chatpop__launcher { animation: chatpop-pulse 2.4s ease-in-out infinite; }
#chatpop-root.chatpop--anim-bounce .chatpop__launcher { animation: chatpop-bounce 2.8s ease-in-out infinite; }
#chatpop-root.chatpop--anim-wiggle .chatpop__icon { animation: chatpop-wiggle 3.2s ease-in-out infinite; }

#chatpop-root.chatpop--anim-ripple .chatpop__ring::before,
#chatpop-root.chatpop--anim-ripple .chatpop__ring::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	inset: 0;
	border-radius: 50% !important;
	background: var(--chatpop-brand, #25D366) !important;
	opacity: .4;
	animation: chatpop-ripple 2.6s ease-out infinite;
	z-index: -1;
}
#chatpop-root.chatpop--anim-ripple .chatpop__ring::after { animation-delay: 1.3s; }
#chatpop-root.is-panel-open .chatpop__launcher { animation: none; }

@keyframes chatpop-pulse {
	0%, 100% { box-shadow: 0 12px 28px var(--chatpop-glow, rgba(37,211,102,.45)), 0 0 0 0 var(--chatpop-glow, rgba(37,211,102,.5)); }
	55% { box-shadow: 0 12px 32px var(--chatpop-glow, rgba(37,211,102,.45)), 0 0 0 18px rgba(37,211,102,0); }
}
@keyframes chatpop-bounce {
	0%, 82%, 100% { transform: translateY(0); }
	88% { transform: translateY(-10px); }
	94% { transform: translateY(-4px); }
}
@keyframes chatpop-wiggle {
	0%, 88%, 100% { transform: rotate(0); }
	90% { transform: rotate(-14deg); }
	93% { transform: rotate(12deg); }
	96% { transform: rotate(-6deg); }
}
@keyframes chatpop-ripple {
	0% { transform: scale(1); opacity: .45; }
	100% { transform: scale(2); opacity: 0; }
}

/* ==================================================================
   4. Gelembung ajakan
   ================================================================== */

#chatpop-root .chatpop__teaser {
	display: none;
	align-items: center !important;
	gap: 12px;
	width: max-content;
	max-width: 250px !important;
	padding: 12px 14px 12px 18px !important;
	border-radius: 24px !important;
	border-end-end-radius: 8px !important;
	background: #fff !important;
	color: #14261e !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	box-shadow: 0 14px 32px rgba(10, 46, 30, .18) !important;
	opacity: 0;
	transform: translateY(10px) scale(.94);
	transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
	cursor: pointer;
}
#chatpop-root.chatpop--left .chatpop__teaser {
	border-end-end-radius: 24px !important;
	border-end-start-radius: 8px !important;
}
#chatpop-root.is-teaser-visible .chatpop__teaser {
	display: flex;
	opacity: 1;
	transform: translateY(0) scale(1);
}
#chatpop-root.is-panel-open .chatpop__teaser { display: none !important; }

#chatpop-root .chatpop__teaser-text { color: inherit !important; }

#chatpop-root .chatpop__teaser-close {
	flex: none;
	display: grid !important;
	place-items: center;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #eef3f0 !important;
	color: #63756d !important;
	font-size: 15px !important;
	line-height: 1 !important;
}
#chatpop-root .chatpop__teaser-close:hover { background: #e1e9e5 !important; }

/* ==================================================================
   5. Panel chat
   ================================================================== */

#chatpop-root .chatpop__panel {
	display: flex;
	flex-direction: column;
	width: 336px !important;
	max-width: calc(100vw - 32px) !important;
	max-height: min(520px, calc(100vh - 150px)) !important;
	overflow: hidden !important;
	border-radius: 26px !important;
	background: #f2f6f4 !important;
	box-shadow: 0 26px 60px rgba(8, 36, 22, .28), 0 4px 12px rgba(0, 0, 0, .1) !important;
	opacity: 0;
	transform: translateY(16px) scale(.96);
	transform-origin: bottom right;
	transition: opacity .22s ease, transform .28s cubic-bezier(.34, 1.3, .64, 1);
}
#chatpop-root.chatpop--left .chatpop__panel { transform-origin: bottom left; }
#chatpop-root .chatpop__panel[hidden] { display: none !important; }
#chatpop-root.is-panel-open .chatpop__panel { opacity: 1; transform: translateY(0) scale(1); }

/* Header */

#chatpop-root .chatpop__panel-head {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 12px;
	padding: 20px 20px 18px !important;
	background: linear-gradient(135deg, var(--chatpop-accent, #075E54) 0%, #128C7E 55%, var(--chatpop-brand, #25D366) 130%) !important;
	color: #fff !important;
}
#chatpop-root .chatpop__panel-title {
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #fff !important;
}
#chatpop-root .chatpop__panel-sub {
	margin-top: 4px !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: rgba(255, 255, 255, .82) !important;
}
#chatpop-root .chatpop__close {
	flex: none;
	display: grid !important;
	place-items: center;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .18) !important;
	color: #fff !important;
}
#chatpop-root .chatpop__close:hover { background: rgba(255, 255, 255, .3) !important; }
#chatpop-root .chatpop__close svg { width: 15px !important; height: 15px !important; }

/* Status */

#chatpop-root .chatpop__status {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	padding: 9px 20px !important;
	background: #e7efeb !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #35473f !important;
}
#chatpop-root .chatpop__dot {
	flex: none;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #9aa5a1 !important;
}
#chatpop-root.is-open-hours .chatpop__dot {
	background: #22c55e !important;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, .2) !important;
}
#chatpop-root .chatpop__tz {
	margin-inline-start: auto !important;
	font-weight: 500 !important;
	font-size: 11.5px !important;
	opacity: .72;
}

/* Isi */

#chatpop-root .chatpop__panel-body {
	flex: 1 1 auto;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px;
	padding: 18px 16px !important;
	scrollbar-width: thin;
	scrollbar-color: #cbd8d2 transparent;
}
#chatpop-root .chatpop__panel-body::-webkit-scrollbar { width: 6px; }
#chatpop-root .chatpop__panel-body::-webkit-scrollbar-thumb {
	background: #cbd8d2;
	border-radius: 999px;
}
#chatpop-root .chatpop__panel-body::-webkit-scrollbar-track { background: transparent; }

#chatpop-root .chatpop__bubble-msg {
	align-self: flex-start;
	max-width: 94% !important;
	padding: 12px 15px !important;
	border-radius: 20px !important;
	border-start-start-radius: 8px !important;
	background: #fff !important;
	color: #22322c !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	box-shadow: 0 2px 10px rgba(12, 44, 28, .07) !important;
}

#chatpop-root .chatpop__notice {
	padding: 11px 14px !important;
	border-radius: 16px !important;
	background: #fff6e6 !important;
	color: #7a5312 !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

/* Daftar agen */

#chatpop-root .chatpop__agents {
	display: flex !important;
	flex-direction: column !important;
	gap: 9px;
}

#chatpop-root .chatpop__agent-btn {
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	width: 100% !important;
	padding: 9px 14px 9px 9px !important;
	border-radius: 999px !important;
	background: #fff !important;
	text-align: start !important;
	box-shadow: 0 2px 8px rgba(12, 44, 28, .08) !important;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#chatpop-root .chatpop__agent-btn:hover {
	background: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(12, 44, 28, .16) !important;
}
#chatpop-root .chatpop__agent-btn:hover .chatpop__agent-go { transform: translateX(3px); }

#chatpop-root .chatpop__avatar {
	flex: none;
	display: grid !important;
	place-items: center;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: linear-gradient(145deg, #128C7E, var(--chatpop-brand, #25D366)) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}
#chatpop-root .chatpop__avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}
#chatpop-root .chatpop__avatar-initial { color: #fff !important; }

#chatpop-root .chatpop__agent-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 1px;
	min-width: 0 !important;
	overflow: hidden;
}
#chatpop-root .chatpop__agent-name {
	font-size: 14px !important;
	font-weight: 650 !important;
	line-height: 1.3 !important;
	color: #16281f !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#chatpop-root .chatpop__agent-role {
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #6d7d76 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#chatpop-root .chatpop__agent-go {
	margin-inline-start: auto !important;
	flex: none;
	display: grid !important;
	place-items: center;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: rgba(37, 211, 102, .14) !important;
	color: var(--chatpop-brand, #25D366) !important;
	transition: transform .18s ease;
}
#chatpop-root .chatpop__agent-go svg { width: 15px !important; height: 15px !important; }

/* Pesan cepat */

#chatpop-root .chatpop__replies-label {
	margin-bottom: 9px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #6d7d76 !important;
}
#chatpop-root .chatpop__replies-list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px;
}
#chatpop-root .chatpop__reply {
	padding: 8px 15px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .75) !important;
	box-shadow: inset 0 0 0 1px #d3e0da !important;
	color: #2b4038 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
#chatpop-root .chatpop__reply:hover {
	background: var(--chatpop-brand, #25D366) !important;
	box-shadow: inset 0 0 0 1px var(--chatpop-brand, #25D366) !important;
	color: #fff !important;
}

#chatpop-root .chatpop__panel-foot {
	padding: 11px 18px !important;
	background: #fff !important;
	box-shadow: inset 0 1px 0 #e4ebe8 !important;
	font-size: 11px !important;
	color: #93a09a !important;
	text-align: center !important;
}

/* ==================================================================
   6. Tombol shortcode
   ================================================================== */

.chatpop-inline {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px;
	padding: 13px 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(150deg, #2ee06d, var(--chatpop-brand, #25D366)) !important;
	color: #fff !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 8px 20px rgba(37, 211, 102, .3) !important;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.chatpop-inline svg { width: 20px !important; height: 20px !important; flex: none; display: block !important; }
.chatpop-inline:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(37, 211, 102, .38) !important;
	color: #fff !important;
}
.chatpop-inline--outline {
	background: transparent !important;
	color: var(--chatpop-brand, #25D366) !important;
	box-shadow: inset 0 0 0 2px var(--chatpop-brand, #25D366) !important;
}
.chatpop-inline--outline:hover {
	background: var(--chatpop-brand, #25D366) !important;
	color: #fff !important;
	box-shadow: 0 12px 26px rgba(37, 211, 102, .34) !important;
}

/* ==================================================================
   7. Mobile
   ================================================================== */

@media (max-width: 520px) {
	.chatpop--right { right: 16px; }
	.chatpop--left { left: 16px; }
	.chatpop { bottom: max(16px, var(--chatpop-offset-y, 24px)); }

	#chatpop-root .chatpop__panel {
		position: fixed;
		inset-inline: 14px !important;
		bottom: calc(var(--chatpop-size, 62px) + 30px);
		width: auto !important;
		max-height: calc(100vh - var(--chatpop-size, 62px) - 62px) !important;
	}
	#chatpop-root .chatpop__teaser { max-width: calc(100vw - 120px) !important; }
}

@media (prefers-reduced-motion: reduce) {
	#chatpop-root *,
	#chatpop-root *::before,
	#chatpop-root *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}