/* Website chat bubble: brand colours from base.css (dark cards, flame→gold gradient). */
.pm-chat {
	position: fixed;
	/* same corner as the floating WhatsApp button (.pm-wa in base.css), just above it */
	inset-inline-end: 22px;
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	font-family: var(--pm-font, "Cairo", system-ui, sans-serif);
	color: var(--pm-text, #f4f1ea);
}

.pm-chat__bubble {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 18px 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--pm-grad, linear-gradient(100deg, #ff3d4f, #e98c00 55%, #edb118));
	color: #120c02;
	font: 700 15px/1 var(--pm-font, "Cairo", sans-serif);
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
	transition: transform .2s var(--pm-ease, ease);
}
.pm-chat__bubble:hover { transform: translateY(-2px); }
.pm-chat__bubble:focus-visible, .pm-chat button:focus-visible, .pm-chat__input:focus-visible { outline: 2px solid var(--pm-gold, #edb118); outline-offset: 2px; }
.pm-chat__bubble svg { width: 22px; height: 22px; fill: currentColor; }
.pm-chat.is-open .pm-chat__bubble-label { display: none; }
.pm-chat.is-open .pm-chat__bubble { padding: 0 14px; }

.pm-chat__panel {
	position: absolute;
	bottom: 64px;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 110px);
	display: flex;
	flex-direction: column;
	background: var(--pm-card, #111117);
	border: 1px solid var(--pm-line-2, rgba(255, 255, 255, .14));
	border-radius: var(--pm-radius, 20px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
	overflow: hidden;
}
.pm-chat__panel[hidden] { display: none; }
.pm-chat__panel { inset-inline-end: 0; }

.pm-chat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	background: var(--pm-card-2, #16161e);
	border-bottom: 1px solid var(--pm-line, rgba(255, 255, 255, .08));
}
.pm-chat__head > div { flex: 1; min-width: 0; }
.pm-chat__title { font-weight: 800; font-size: 15px; }
.pm-chat__sub { font-size: 12px; color: var(--pm-muted, #a29f99); }
.pm-chat__reset, .pm-chat__close {
	border: 1px solid var(--pm-line-2, rgba(255, 255, 255, .14));
	background: transparent;
	color: var(--pm-muted, #a29f99);
	border-radius: 999px;
	cursor: pointer;
	font: 600 12px/1 var(--pm-font, sans-serif);
	padding: 7px 10px;
}
.pm-chat__close { font-size: 20px; padding: 2px 10px 4px; }
.pm-chat__reset:hover, .pm-chat__close:hover { color: var(--pm-text, #f4f1ea); }

.pm-chat__list {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--pm-line-2, rgba(255, 255, 255, .14)) transparent;
}
.pm-chat__msg {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.pm-chat__msg--bot { align-self: flex-start; background: var(--pm-card-2, #16161e); border: 1px solid var(--pm-line, rgba(255, 255, 255, .08)); }
.pm-chat__msg--me { align-self: flex-end; background: rgba(233, 140, 0, .16); border: 1px solid rgba(233, 140, 0, .35); }
.pm-chat__msg a { color: var(--pm-gold, #edb118); text-decoration: underline; }
.pm-chat__typing { display: flex; gap: 4px; padding: 13px; }
.pm-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-muted, #a29f99); animation: pm-chat-dot 1s infinite ease-in-out; }
.pm-chat__typing i:nth-child(2) { animation-delay: .15s; }
.pm-chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pm-chat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.pm-chat__note { padding: 6px 14px; font-size: 11.5px; color: var(--pm-dim, #6d6a66); border-top: 1px solid var(--pm-line, rgba(255, 255, 255, .08)); }
.pm-chat__note a { color: var(--pm-muted, #a29f99); }
.pm-chat__form { display: flex; gap: 8px; padding: 10px 12px 12px; }
.pm-chat .pm-chat__input,
.pm-chat .pm-chat__input:focus {
	flex: 1;
	resize: none;
	min-height: 42px;
	max-height: 110px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid var(--pm-line-2, rgba(255, 255, 255, .14));
	background: var(--pm-bg-2, #0c0c11) !important;
	color: var(--pm-text, #f4f1ea) !important;
	box-shadow: none;
	font: 400 14.5px/1.5 var(--pm-font, sans-serif);
}
.pm-chat__send {
	border: 0;
	border-radius: 14px;
	padding: 0 16px;
	background: var(--pm-grad, linear-gradient(100deg, #ff3d4f, #e98c00 55%, #edb118));
	color: #120c02;
	font: 700 14px/1 var(--pm-font, sans-serif);
	cursor: pointer;
}
.pm-chat__send:disabled { opacity: .5; cursor: default; }

@media (max-width: 860px) {
	.pm-chat { inset-inline-end: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	/* cart & checkout on phones: WhatsApp is hidden there, so the bubble takes its place */
	body.woocommerce-checkout .pm-chat, body.woocommerce-cart .pm-chat { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
	.pm-chat__bubble-label { display: none; }
	.pm-chat__bubble { padding: 0 14px; }
	.pm-chat__panel { width: calc(100vw - 28px); height: calc(100vh - 170px); }
}
@media (prefers-reduced-motion: reduce) {
	.pm-chat__bubble, .pm-chat__typing i { transition: none; animation: none; }
}