#ilc-widget-root {
	position: fixed;
	right: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

#ilc-widget-root.ilc-pos-bottom {
	/* Raised from 20px so the launcher clears the theme's own
	   "back to top" button on desktop. Tweak this single value
	   if it still overlaps or if the gap looks too big. */
	bottom: 90px;
}

@media (max-width: 767px) {
	#ilc-widget-root.ilc-pos-bottom {
		/* Raised further on mobile to clear the theme's sticky
		   bottom nav bar (Home/Produk/Whatsapp/Cart/Account).
		   Tweak this single value to match the nav bar's height. */
		bottom: 120px;
	}
}

#ilc-widget-root.ilc-pos-middle {
	top: 50%;
	transform: translateY(-50%);
}

#ilc-launcher {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* Rounded on the image itself, not via overflow:hidden on the button — the
   unread badge below is a child of this same button, positioned partly
   outside its box, and overflow:hidden would clip it too. */
#ilc-launcher img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

#ilc-launcher .dashicons {
	width: 28px;
	height: 28px;
	font-size: 28px;
	line-height: 1;
}

/* WhatsApp-style floating green "new reply" badge on the launcher button. */
.ilc-unread-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #25D366;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

#ilc-panel {
	position: absolute;
	right: 0;
	bottom: 70px;
	width: 320px;
	max-width: 90vw;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ilc-hidden {
	display: none !important;
}

.ilc-panel-header {
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.ilc-panel-sub {
	font-size: 12px;
	opacity: .85;
	margin-top: 2px;
}

.ilc-panel-header button {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
}

#ilc-gate {
	padding: 16px;
}

#ilc-gate p {
	margin-top: 0;
	font-size: 14px;
}

#ilc-gate input[type="text"],
#ilc-gate input[type="tel"] {
	width: 100%;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-sizing: border-box;
}

#ilc-start-btn {
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	border: none;
	padding: 8px 14px;
	border-radius: 6px;
	cursor: pointer;
}

#ilc-chat-body {
	display: flex;
	flex-direction: column;
	height: 380px;
}

#ilc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}

.ilc-msg {
	margin-bottom: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	max-width: 80%;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
}

.ilc-msg-visitor {
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	margin-left: auto;
}

.ilc-msg-agent {
	background: #f1f3f5;
	color: #222;
	margin-right: auto;
}

/* Auto-reply / greeting — visually distinct from a real human agent message,
   so visitors aren't misled about who (or what) they're talking to. */
.ilc-msg-bot {
	background: #eaf6ee;
	border: 1px solid #cdebd4;
	color: #1f5c33;
	margin-right: auto;
}

/* --- Product card sent by an agent --- */

.ilc-msg-product {
	padding: 0;
	overflow: hidden;
	max-width: 220px;
	background: #fff;
	border: 1px solid #eee;
}

.ilc-product-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ilc-product-card-img {
	width: 100%;
	height: 120px;
	background-color: #f0f0f0;
	background-size: cover;
	background-position: center;
}

.ilc-product-card-body {
	padding: 8px 10px;
}

.ilc-product-card-name {
	font-size: 13px;
	font-weight: 600;
	color: #222;
	margin-bottom: 2px;
}

.ilc-product-card-price {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ilc-primary, #EA6C34);
}

.ilc-product-card-stock {
	font-size: 10.5px;
	color: #d63638;
	margin-top: 2px;
}

.ilc-product-card-link {
	font-size: 11px;
	color: #888;
	margin-top: 4px;
}

.ilc-msg-system {
	background: transparent;
	color: #888;
	font-size: 12px;
	text-align: center;
	margin: 6px auto;
	max-width: 100%;
}

.ilc-input-row {
	position: relative;
	display: flex;
	align-items: center;
	border-top: 1px solid #eee;
	padding: 8px;
	gap: 6px;
}

#ilc-emoji-btn {
	background: none;
	border: none;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

#ilc-emoji-btn:hover {
	background: rgba(0, 0, 0, .06);
}

#ilc-msg-input {
	flex: 1;
	padding: 8px 14px;
	border: 1px solid #ddd;
	border-radius: 20px;
	font-size: 14px;
}

#ilc-msg-input:focus {
	outline: 2px solid var(--ilc-primary, #EA6C34);
	outline-offset: -1px;
}

#ilc-send {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#ilc-send:hover {
	opacity: .9;
}

@media (max-width: 480px) {
	#ilc-panel {
		width: calc(100vw - 24px);
		right: -8px;
	}
}

/* --- "Tanyakan Produk Ini" button on product pages (ILC_Product_Button) ---
   Lives in the page content, outside #ilc-widget-root, so --ilc-primary is
   set inline on its own wrapper. Selectors are doubled-up (wrap + button)
   to win against generic theme `button` styles. */

.ilc-ask-product-wrap {
	margin: 18px 0 8px;
}

.ilc-ask-product-wrap .ilc-ask-product {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: none;
	border-radius: 8px;
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	transition: opacity .15s ease, transform .15s ease;
}

.ilc-ask-product-wrap .ilc-ask-product:hover,
.ilc-ask-product-wrap .ilc-ask-product:focus-visible {
	opacity: .9;
	transform: translateY(-1px);
}

.ilc-ask-product-wrap .ilc-ask-product svg {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.ilc-ask-product-wrap .ilc-ask-product {
		width: 100%;
	}
}

/* Note at the top of the name/WhatsApp form: which product is being asked about. */
#ilc-gate-product {
	margin-bottom: 12px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #fff4ee;
	border: 1px solid #f6d2bf;
	color: #7a3a18;
	font-size: 12.5px;
	line-height: 1.4;
	word-wrap: break-word;
}

/* --- Returning visitor: "Lanjutkan Chat" / "Mulai Chat Baru" choice --- */

#ilc-choice {
	padding: 20px 16px 16px;
	text-align: center;
}

#ilc-choice .ilc-choice-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: #222;
}

#ilc-choice .ilc-choice-sub {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.45;
	color: #555;
}

#ilc-choice button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

#ilc-choice-continue {
	background: var(--ilc-primary, #EA6C34);
	border: 1px solid var(--ilc-primary, #EA6C34);
	color: #fff;
}

#ilc-choice-new {
	background: #fff;
	border: 1px solid var(--ilc-primary, #EA6C34);
	color: var(--ilc-primary, #EA6C34);
}

#ilc-choice button:disabled,
#ilc-closed-new:disabled {
	opacity: .6;
	cursor: default;
}

#ilc-choice .ilc-choice-note {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: #888;
}

/* Shown under the input once an agent closes the chat while it's open. */
#ilc-closed-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-top: 1px solid #eee;
	background: #fafafa;
	font-size: 12.5px;
	color: #666;
}

#ilc-closed-new {
	flex-shrink: 0;
	padding: 6px 10px;
	border: none;
	border-radius: 6px;
	background: var(--ilc-primary, #EA6C34);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

/* Cloudflare check shown on the choice screen only when the earlier chat was closed by an agent. */
#ilc-choice-turnstile {
	display: flex;
	justify-content: center;
	margin: 0 0 12px;
}


/* "Chat via WhatsApp" / "Tetap di Web" choice, shown above the messages once an agent with a WhatsApp number is connected. */
.ilc-wa-offer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: #f0faf4;
	border-bottom: 1px solid #d6efdf;
	font-size: 12.5px;
	line-height: 1.4;
	color: #555;
}

.ilc-wa-offer.ilc-hidden {
	display: none !important;
}

.ilc-wa-offer-text strong {
	display: block;
	font-size: 13px;
	color: #1a1a1a;
}

.ilc-wa-offer-actions {
	display: flex;
	gap: 8px;
}

.ilc-wa-btn,
.ilc-wa-dismiss {
	flex: 1;
	box-sizing: border-box;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	cursor: pointer;
}

.ilc-wa-btn {
	background: #25d366;
	border: 1px solid #25d366;
	color: #fff !important;
	text-decoration: none !important;
}

.ilc-wa-dismiss {
	background: #fff;
	border: 1px solid var(--ilc-primary, #EA6C34);
	color: var(--ilc-primary, #EA6C34);
}

/* ---- Indikator "sedang mengetik" ---- */
.ilc-typing {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 14px 6px;
	font-size: 12px;
	font-style: italic;
	color: #667781;
	background: transparent;
}
.ilc-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 6px 8px;
	border-radius: 12px;
	background: #e9edef;
}
.ilc-typing-dots i {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #8696a0;
	animation: ilc-typing-bounce 1.2s infinite ease-in-out;
}
.ilc-typing-dots i:nth-child(2) { animation-delay: .15s; }
.ilc-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ilc-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: .5; }
	30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ilc-typing-dots i { animation: none; opacity: .8; }
}