#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;
}