#electricpro-chatbot-root {
	--epc-primary: #0A2157;
	--epc-accent: #fba406;
	/* Corner-notch sizes for the angular, cut-corner "engineered" shape
	   language used across the site's own cards and icon badges. */
	--epc-notch-lg: 22px;
	--epc-notch-sm: 10px;
	position: fixed;
	z-index: 999999;
	bottom: 24px;
	font-family: "Poppins", "Segoe UI", Tahoma, Arial, sans-serif;
	line-height: normal;
}

#electricpro-chatbot-root, #electricpro-chatbot-root * {
	box-sizing: border-box;
}

/* Themes (Woodmart/WooCommerce) apply aggressive global `button` resets with
   higher effective specificity than a single class selector — strip every
   button under the widget back to nothing first, then rebuild each one below,
   so the theme can never leak its own border-radius/background/shadow in. */
#electricpro-chatbot-root button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}

#electricpro-chatbot-root.epc-pos-right { right: 24px; }
#electricpro-chatbot-root.epc-pos-left { left: 24px; }

/* -------------------------------------------------------------- *
 * Launcher — a cut-corner square badge instead of a generic round
 * chat bubble, carrying a bolt icon to match the electrical brand.
 * -------------------------------------------------------------- */
.epc-launcher {
	width: 60px !important;
	height: 60px !important;
	clip-path: polygon(0 0, calc(100% - var(--epc-notch-sm)) 0, 100% var(--epc-notch-sm), 100% 100%, 0 100%);
	border: none !important;
	background: var(--epc-primary) !important;
	box-shadow: 0 6px 20px rgba(10, 33, 87, 0.35) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--epc-accent) !important;
	transition: transform 0.2s ease;
	position: relative;
}
.epc-launcher::after {
	content: '';
	position: absolute;
	top: 6px; right: 6px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--epc-accent);
}
.epc-launcher:hover { transform: scale(1.06); }
.epc-launcher svg { width: 26px; height: 26px; }

/* A single floating button toggles the panel; while it's open the header's
   own close button is the only visible control, so nothing overlaps. */
#electricpro-chatbot-root.epc-open .epc-launcher {
	display: none !important;
}

.epc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--epc-accent);
	color: var(--epc-primary);
	border-radius: 999px;
	font-size: 11px;
	line-height: 1;
	padding: 4px 6px;
	font-weight: 700;
	box-shadow: 0 0 0 2px #fff;
}

/* Small teaser bubble shown on auto-open, on every screen size, instead of
   the full panel — a lightweight preview with a deliberate "Start Chat" step
   instead of the big panel appearing over the page uninvited. The launcher
   button itself becomes the X to dismiss it (see setLauncherMode in JS),
   so there's a single control in one place rather than a second close
   button on the card. Shares the site's cut-corner card shape and corner
   ring accents rather than a plain rounded rectangle. */
.epc-teaser {
	position: absolute;
	bottom: 76px;
	width: 270px;
	max-width: calc(100vw - 32px);
	background: var(--epc-primary);
	clip-path: polygon(0 0, calc(100% - var(--epc-notch-lg)) 0, 100% var(--epc-notch-lg), 100% 100%, 0 100%);
	box-shadow: 0 16px 40px rgba(10, 33, 87, 0.35);
	padding: 16px;
	animation: epc-teaser-in 0.25s ease;
}
#electricpro-chatbot-root.epc-pos-right .epc-teaser { right: 0; }
#electricpro-chatbot-root.epc-pos-left .epc-teaser { left: 0; }
@keyframes epc-teaser-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
.epc-teaser-header { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.epc-teaser-avatar {
	width: 36px; height: 36px; flex-shrink: 0;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
	background: var(--epc-accent); color: var(--epc-primary);
	display: flex; align-items: center; justify-content: center;
}
.epc-teaser-avatar svg { width: 18px; height: 18px; }
.epc-teaser-eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--epc-accent);
	margin-bottom: 1px;
}
.epc-teaser-title { font-size: 13.5px; font-weight: 700; color: #fff; }
.epc-teaser-text { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); margin: 12px 0 14px; line-height: 1.55; }
.epc-teaser-start {
	display: flex !important;
	width: 100%;
	align-items: center !important;
	justify-content: center !important;
	background: var(--epc-accent) !important;
	color: var(--epc-primary) !important;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
	padding: 10px !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.epc-panel {
	position: absolute;
	bottom: 76px;
	width: 420px;
	max-width: calc(100vw - 32px);
	height: 660px;
	max-height: calc(100vh - 110px);
	background: #fff;
	clip-path: polygon(0 0, calc(100% - var(--epc-notch-lg)) 0, 100% var(--epc-notch-lg), 100% 100%, 0 100%);
	box-shadow: 0 12px 40px rgba(10, 33, 87, 0.3);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
#electricpro-chatbot-root.epc-pos-right .epc-panel { right: 0; }
#electricpro-chatbot-root.epc-pos-left .epc-panel { left: 0; }

#electricpro-chatbot-root.epc-open .epc-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.epc-header {
	background: var(--epc-primary);
	color: #fff;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	position: relative;
	border-bottom: 3px solid var(--epc-accent);
}
.epc-header-title { font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.epc-header-sub {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--epc-accent);
	margin-top: 3px;
}
.epc-close-btn {
	background: rgba(255, 255, 255, 0.14) !important;
	border: none !important;
	color: #fff !important;
	width: 28px !important;
	height: 28px !important;
	clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
	font-size: 16px;
	line-height: 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.epc-close-btn:hover { background: rgba(255, 255, 255, 0.28) !important; }

.epc-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.epc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #f5f6f9;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Flex items shrink below their content's natural size by default once the
   column runs out of room — that's what was clipping the bottom off product
   cards (price/stock/buttons) instead of just letting the container scroll
   past them. Message bubbles never showed the problem only because they
   don't clip overflow, but they were being squeezed too. */
.epc-messages > * {
	flex-shrink: 0;
}

.epc-msg {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 3px;
	font-size: 13.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
	/* Each bubble picks its own text direction from its content (a reply can
	   mix Arabic and English/product names) instead of inheriting one fixed
	   direction from the panel, which is what made mixed text look jumbled. */
	unicode-bidi: plaintext;
	text-align: start;
}
.epc-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.epc-msg-user {
	align-self: flex-end;
	background: var(--epc-primary);
	color: #fff;
	border-end-end-radius: 0;
}
.epc-msg-assistant {
	align-self: flex-start;
	background: #fff;
	color: #23282d;
	border: 1px solid #e0e3e8;
	border-inline-start: 3px solid var(--epc-accent);
	border-end-start-radius: 0;
}

/* -------------------------------------------------------------- *
 * Rich cards (product / contact / order) — share the site's
 * cut-corner shape and a small ring accent at the opposite corner.
 * -------------------------------------------------------------- */

.epc-card {
	align-self: flex-start;
	max-width: 88%;
	background: #fff;
	border: 1px solid #e0e3e8;
	clip-path: polygon(0 0, calc(100% - var(--epc-notch-sm)) 0, 100% var(--epc-notch-sm), 100% 100%, 0 100%);
	overflow: hidden;
	display: flex;
	gap: 10px;
	position: relative;
}
.epc-card::after {
	content: '';
	position: absolute;
	bottom: 6px; left: 6px;
	width: 5px; height: 5px;
	border-radius: 50%;
	border: 1px solid var(--epc-primary);
	opacity: 0.35;
}
/* Image/icon get their own breathing room from the card edges instead of
   sitting flush against the border, matching the padding the text side
   already has. */
.epc-card-img-wrap { padding: 10px 0 10px 10px; flex-shrink: 0; display: flex; }
.epc-card-img { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.epc-card-icon {
	width: 80px; height: 80px; flex-shrink: 0;
	margin: 10px 0 10px 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--epc-primary); color: var(--epc-accent); font-weight: 700; font-size: 13px;
}
.epc-card-body { padding: 10px 12px 12px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.epc-card-product .epc-card-body, .epc-card-contact .epc-card-body, .epc-card-order .epc-card-body, .epc-card-whatsapp .epc-card-body { padding-right: 12px; justify-content: center; }
/* The contact card has no icon/image sibling, so it needs its own left
   padding — every other card type gets that spacing for free from the
   image/icon wrapper next to it. */
.epc-card-contact .epc-card-body { padding-left: 12px; }
.epc-card-title { font-size: 13.5px; font-weight: 700; }
.epc-card-desc { font-size: 12px; color: #666; }
.epc-card-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.epc-card-price { font-size: 13px; font-weight: 700; color: var(--epc-primary); }
.epc-card-price-old { font-size: 11px; font-weight: 400; color: #999; text-decoration: line-through; }
.epc-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.epc-card-btn {
	display: inline-block;
	align-self: flex-start;
	background: var(--epc-primary);
	color: #fff !important;
	text-decoration: none;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 7px 13px;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.epc-card-btn-outline {
	background: #fff;
	color: var(--epc-primary) !important;
	border: 1px solid var(--epc-primary);
}
.epc-pill { display: inline-block; font-size: 11px; padding: 2px 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.epc-stock-in { background: #e8f5ec; color: #2f7d4f; }
.epc-stock-out { background: #fbeaea; color: #b32d2e; }

/* WhatsApp keeps its own recognizable brand green — visitors specifically
   look for that color when scanning for a way to reach a human. */
.epc-card-icon-whatsapp { background: #25d366 !important; }
.epc-card-btn-whatsapp { background: #25d366 !important; }

.epc-typing {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: 10px 13px;
	background: #fff;
	border: 1px solid #e0e3e8;
	border-inline-start: 3px solid var(--epc-accent);
}
.epc-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--epc-primary);
	animation: epc-bounce 1.2s infinite ease-in-out;
}
.epc-typing span:nth-child(2) { animation-delay: 0.15s; }
.epc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes epc-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.epc-feedback {
	display: flex;
	gap: 6px;
	margin-top: 4px;
	align-self: flex-start;
}
.epc-feedback button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid #e0e3e8 !important;
	background: #fff !important;
	padding: 3px 7px !important;
	font-size: 12px;
}
.epc-feedback button:hover { border-color: var(--epc-primary) !important; }
.epc-feedback button.epc-voted { background: var(--epc-primary) !important; color: #fff !important; border-color: var(--epc-primary) !important; }
.epc-feedback button:disabled { opacity: 0.6; }

.epc-quickchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 16px 12px;
	background: #f5f6f9;
	flex-shrink: 0;
}
.epc-chip {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid var(--epc-primary) !important;
	color: var(--epc-primary) !important;
	background: #fff !important;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
	padding: 6px 13px !important;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background 0.15s ease, color 0.15s ease;
}
.epc-chip:hover { background: var(--epc-primary) !important; color: #fff !important; }

.epc-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #ececec;
	background: #fff;
	flex-shrink: 0;
}
.epc-input {
	flex: 1;
	border: 1px solid #dcdfe4 !important;
	border-radius: 3px !important;
	padding: 9px 12px !important;
	margin: 0 !important;
	font-size: 13.5px;
	line-height: 1.4;
	resize: none !important;
	min-height: 38px !important;
	max-height: 100px !important;
	overflow-y: auto;
	font-family: inherit;
	background: #fff !important;
	box-shadow: none !important;
}
.epc-input:focus { outline: none !important; border-color: var(--epc-primary) !important; box-shadow: none !important; }
.epc-send-btn {
	background: var(--epc-primary) !important;
	border: none !important;
	color: var(--epc-accent) !important;
	width: 40px !important;
	height: 40px !important;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
}
.epc-send-btn:disabled { opacity: 0.5 !important; cursor: default; }
.epc-send-btn svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
	/* A bottom-offset "floating card" doesn't work reliably on phones —
	   100vh doesn't account for the mobile browser's collapsing address bar,
	   which was leaving the panel floating with gaps above and below,
	   pushing its header (and close button) out of reach. A true full-screen
	   takeover pinned to the real viewport edges avoids that entirely. */
	.epc-panel {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		clip-path: none;
	}
}

@media (prefers-color-scheme: dark) {
	.epc-panel { background: #14161a; }
	.epc-messages { background: #0e1013; }
	.epc-msg-assistant { background: #1c1f24; color: #eee; border-color: #2b2f36; }
	.epc-card { background: #1c1f24; border-color: #2b2f36; }
	.epc-card-desc { color: #b7b7b7; }
	.epc-input-row { background: #14161a; border-top-color: #2b2f36; }
	.epc-input { background: #1c1f24; border-color: #2b2f36; color: #eee; }
	.epc-quickchips { background: #0e1013; }
	.epc-chip { background: #1c1f24; }
	.epc-feedback button { background: #1c1f24; border-color: #2b2f36; color: #eee; }
}