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