#p4misr-chatbot-root {
	--p4c-primary: #015ab6;
	--p4c-accent: #e06300;
	position: fixed;
	z-index: 999999;
	bottom: 24px;
	font-family: "Bahnschrift", "Segoe UI", Tahoma, Arial, sans-serif;
	line-height: normal;
}

#p4misr-chatbot-root, #p4misr-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. */
#p4misr-chatbot-root button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}

#p4misr-chatbot-root.p4c-pos-right { right: 24px; }
#p4misr-chatbot-root.p4c-pos-left { left: 24px; }

.p4c-launcher {
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--p4c-primary) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff !important;
	transition: transform 0.2s ease;
}
.p4c-launcher:hover { transform: scale(1.06); }
.p4c-launcher svg { width: 28px; height: 28px; }

/* 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. */
#p4misr-chatbot-root.p4c-open .p4c-launcher {
	display: none !important;
}

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

.p4c-panel {
	position: absolute;
	bottom: 76px;
	width: 420px;
	max-width: calc(100vw - 32px);
	height: 660px;
	max-height: calc(100vh - 110px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	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;
}
#p4misr-chatbot-root.p4c-pos-right .p4c-panel { right: 0; }
#p4misr-chatbot-root.p4c-pos-left .p4c-panel { left: 0; }

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

.p4c-header {
	background: var(--p4c-primary);
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.p4c-header-title { font-weight: 600; font-size: 15px; }
.p4c-header-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.p4c-close-btn {
	background: rgba(255, 255, 255, 0.18) !important;
	border: none !important;
	color: #fff !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	font-size: 16px;
	line-height: 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.p4c-close-btn:hover { background: rgba(255, 255, 255, 0.3) !important; }

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

/* -------------------------------------------------------------- *
 * Lead capture gate
 * -------------------------------------------------------------- */

.p4c-lead-gate {
	flex: 1;
	overflow-y: auto;
	padding: 24px 20px;
	background: #f7f8fa;
	display: flex;
	flex-direction: column;
}
.p4c-lead-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.p4c-lead-desc { font-size: 13px; color: #666; margin-bottom: 18px; }
.p4c-lead-field { margin-bottom: 12px; }
.p4c-lead-field input {
	width: 100%;
	border: 1px solid #dcdfe4;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	background: #fff;
}
.p4c-lead-field input:focus { outline: none; border-color: var(--p4c-primary); }
.p4c-lead-error { color: #c0392b; font-size: 11.5px; margin-top: 4px; min-height: 14px; }
.p4c-lead-submit {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--p4c-primary) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 11px !important;
	font-size: 14px !important;
	font-weight: 600;
	margin-top: 4px;
}
.p4c-lead-privacy { font-size: 11px; color: #8a8a8a; margin-top: 14px; text-align: center; }

.p4c-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #f7f8fa;
	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. */
.p4c-messages > * {
	flex-shrink: 0;
}

.p4c-msg {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 14px;
	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;
}
.p4c-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.p4c-msg-user {
	align-self: flex-end;
	background: var(--p4c-primary);
	color: #fff;
	border-end-end-radius: 4px;
}
.p4c-msg-assistant {
	align-self: flex-start;
	background: #fff;
	color: #23282d;
	border: 1px solid #e5e7eb;
	border-end-start-radius: 4px;
}

/* -------------------------------------------------------------- *
 * Rich cards (product / catalog / contact / order)
 * -------------------------------------------------------------- */

.p4c-card {
	align-self: flex-start;
	max-width: 88%;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	gap: 10px;
}
/* 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. */
.p4c-card-img-wrap { padding: 10px 0 10px 10px; flex-shrink: 0; display: flex; }
.p4c-card-img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.p4c-card-icon {
	width: 80px; height: 80px; flex-shrink: 0;
	margin: 10px 0 10px 10px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--p4c-primary); color: #fff; font-weight: 700; font-size: 13px;
}
.p4c-card-body { padding: 10px 12px 12px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p4c-card-product .p4c-card-body, .p4c-card-catalog .p4c-card-body, .p4c-card-contact .p4c-card-body, .p4c-card-order .p4c-card-body, .p4c-card-whatsapp .p4c-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. */
.p4c-card-contact .p4c-card-body { padding-left: 12px; }
.p4c-card-title { font-size: 13.5px; font-weight: 600; }
.p4c-card-desc { font-size: 12px; color: #666; }
.p4c-card-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.p4c-card-price { font-size: 13px; font-weight: 600; color: var(--p4c-primary); }
.p4c-card-price-old { font-size: 11px; font-weight: 400; color: #999; text-decoration: line-through; }
.p4c-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.p4c-card-btn {
	display: inline-block;
	align-self: flex-start;
	background: var(--p4c-primary);
	color: #fff !important;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 8px;
}
.p4c-card-btn-outline {
	background: #fff;
	color: var(--p4c-primary) !important;
	border: 1px solid var(--p4c-primary);
}
.p4c-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.p4c-stock-in { background: #e8f5ec; color: #2f7d4f; }
.p4c-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. */
.p4c-card-icon-whatsapp { background: #25d366 !important; }
.p4c-card-btn-whatsapp { background: #25d366 !important; }

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

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

.p4c-quickchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 16px 12px;
	background: #f7f8fa;
	flex-shrink: 0;
}
.p4c-chip {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid var(--p4c-primary) !important;
	color: var(--p4c-primary) !important;
	background: #fff !important;
	border-radius: 999px !important;
	padding: 5px 12px !important;
	font-size: 12px;
	transition: background 0.15s ease, color 0.15s ease;
}
.p4c-chip:hover { background: var(--p4c-primary) !important; color: #fff !important; }

.p4c-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #ececec;
	background: #fff;
	flex-shrink: 0;
}
.p4c-input {
	flex: 1;
	border: 1px solid #dcdfe4 !important;
	border-radius: 12px !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;
}
.p4c-input:focus { outline: none !important; border-color: var(--p4c-primary) !important; box-shadow: none !important; }
.p4c-send-btn {
	background: var(--p4c-primary) !important;
	border: none !important;
	color: #fff !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
}
.p4c-send-btn:disabled { opacity: 0.5 !important; cursor: default; }
.p4c-send-btn svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
	.p4c-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); }
}

@media (prefers-color-scheme: dark) {
	.p4c-panel { background: #1e1f22; }
	.p4c-lead-gate { background: #17181a; }
	.p4c-lead-field input { background: #26282b; border-color: #34363a; color: #eee; }
	.p4c-messages { background: #17181a; }
	.p4c-msg-assistant { background: #26282b; color: #eee; border-color: #34363a; }
	.p4c-card { background: #26282b; border-color: #34363a; }
	.p4c-card-desc { color: #b7b7b7; }
	.p4c-input-row { background: #1e1f22; border-top-color: #34363a; }
	.p4c-input { background: #26282b; border-color: #34363a; color: #eee; }
	.p4c-quickchips { background: #17181a; }
	.p4c-chip { background: #26282b; }
	.p4c-feedback button { background: #26282b; border-color: #34363a; color: #eee; }
}