/* icpo.pk – WhatsApp chat button */
.icpo-wa { --wa: #25d366; position: fixed; bottom: 24px; z-index: 1000; font-family: inherit; line-height: 1.4; }
.icpo-wa--right { right: 24px; }
.icpo-wa--left { left: 24px; }
.icpo-wa svg { width: 28px; height: 28px; display: block; }

/* Floating button */
.icpo-wa-btn {
	position: relative; display: flex; align-items: center; gap: 10px;
	height: 58px; min-width: 58px; padding: 0 15px; border: 0; border-radius: 30px;
	background: var(--wa); color: #fff; cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22); transition: transform .2s, box-shadow .2s;
}
.icpo-wa--right .icpo-wa-btn { margin-left: auto; }
.icpo-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .26); }
.icpo-wa-btn:focus-visible { outline: 3px solid rgba(37, 211, 102, .45); outline-offset: 3px; }
.icpo-wa-btn::before { /* soft pulse */
	content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--wa);
	opacity: .5; z-index: -1; animation: icpoWaPulse 2.4s ease-out 3;
}
@keyframes icpoWaPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.45); opacity: 0; } }
.icpo-wa-label { font-size: 14px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.icpo-wa-x { display: none; font-size: 30px; line-height: 1; width: 28px; text-align: center; }
.icpo-wa.is-open .icpo-wa-btn svg, .icpo-wa.is-open .icpo-wa-label { display: none; }
.icpo-wa.is-open .icpo-wa-x { display: block; }
.icpo-wa.is-open .icpo-wa-btn::before { display: none; }

/* Chat box */
.icpo-wa-box {
	position: absolute; bottom: 74px; width: 340px; max-width: calc(100vw - 32px);
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
	transform-origin: bottom right; animation: icpoWaIn .22s ease-out;
}
.icpo-wa--right .icpo-wa-box { right: 0; }
.icpo-wa--left .icpo-wa-box { left: 0; transform-origin: bottom left; }
.icpo-wa-box[hidden] { display: none; }
@keyframes icpoWaIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

.icpo-wa-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #075e54; color: #fff; }
.icpo-wa-avatar { position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.icpo-wa-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 4px; }
.icpo-wa-avatar span { color: #075e54; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.icpo-wa-dot { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #4ade80; border: 2px solid #075e54; }
.icpo-wa.is-offline .icpo-wa-dot { background: #b0b7bd; }
.icpo-wa-who { flex: 1; min-width: 0; }
.icpo-wa-who strong { display: block; font-size: 15px; line-height: 1.3; }
.icpo-wa-who small { display: block; font-size: 12px; opacity: .85; }
.icpo-wa-close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px; }
.icpo-wa-close:hover { opacity: 1; }

.icpo-wa-body {
	padding: 18px 16px 22px; min-height: 120px; background-color: #efeae2;
	background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 14px 14px;
}
.icpo-wa-bubble {
	position: relative; max-width: 88%; padding: 8px 12px 18px; margin-bottom: 8px;
	background: #fff; border-radius: 0 8px 8px 8px; color: #303030; font-size: 14px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .08); animation: icpoWaIn .25s ease-out;
}
.icpo-wa-bubble::before { content: ""; position: absolute; left: -7px; top: 0; border: 7px solid transparent; border-top-color: #fff; border-right-color: #fff; border-width: 0 8px 8px 0; }
.icpo-wa-bubble-name { display: block; font-size: 12px; font-weight: 600; color: #075e54; margin-bottom: 2px; }
.icpo-wa-time { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: #8696a0; }
.icpo-wa-offline { background: #fff8e1; }
.icpo-wa-offline::before { border-right-color: #fff8e1; }
.icpo-wa-bubble[hidden] { display: none; }
.icpo-wa-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 0 8px 8px 8px; }
.icpo-wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5ab; animation: icpoWaDot 1s infinite; }
.icpo-wa-typing i:nth-child(2) { animation-delay: .15s; }
.icpo-wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes icpoWaDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.icpo-wa-body.is-typing .icpo-wa-bubble { display: none; }
.icpo-wa-body:not(.is-typing) .icpo-wa-typing { display: none; }

.icpo-wa-foot { padding: 12px 16px 16px; background: #fff; }
.icpo-wa-start {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	height: 46px; border-radius: 24px; background: var(--wa); color: #fff !important;
	font-size: 15px; font-weight: 600; text-decoration: none !important; transition: filter .2s;
}
.icpo-wa-start:hover { filter: brightness(.94); }
.icpo-wa-start svg { width: 22px; height: 22px; }

/* Teaser bubble */
.icpo-wa-teaser {
	position: absolute; bottom: 72px; width: max-content; max-width: 240px;
	padding: 10px 30px 10px 14px; background: #fff; color: #303030; font-size: 13px;
	border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); cursor: pointer; animation: icpoWaIn .3s ease-out;
}
.icpo-wa--right .icpo-wa-teaser { right: 4px; }
.icpo-wa--left .icpo-wa-teaser { left: 4px; }
.icpo-wa-teaser[hidden] { display: none; }
.icpo-wa-teaser-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; font-size: 18px; line-height: 1; color: #999; cursor: pointer; }

/* Keep other floating items clear of the button */
body.icpo-wa-right .scroll-to-top { top: auto !important; bottom: 98px; right: 38px; }
body.icpo-wa-right .icpo-vc--float_right { margin-bottom: 118px; }
body.icpo-wa-left .icpo-vc--float_left { margin-bottom: 76px; }

@media (max-width: 767px) {
	.icpo-wa { bottom: 16px; }
	.icpo-wa--right { right: 16px; }
	.icpo-wa--left { left: 16px; }
	.icpo-wa-label { display: none; }
	.icpo-wa-btn { padding: 0 15px; }
	.icpo-wa-box { width: calc(100vw - 32px); }
	body.icpo-wa-right .scroll-to-top { bottom: 86px; right: 28px; }
	body.icpo-wa-no-xs .icpo-wa { display: none; }
	body.icpo-wa-no-xs .scroll-to-top { bottom: auto; top: 94% !important; }
}
@media (prefers-reduced-motion: reduce) {
	.icpo-wa-btn::before, .icpo-wa-box, .icpo-wa-bubble, .icpo-wa-teaser { animation: none; }
}
@media print { .icpo-wa { display: none; } }