.dmm-chat {
	--ink: #2a0f14;
	--red: #d62828;
	--red-dark: #a61c1c;
	--paper: #fbf7f6;
	--line: #e6d8d6;
	--field: #d9c9c6;
	--muted: #6b5557;
	--font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--display: "Bricolage Grotesque", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	position: fixed;
	right: 24px;
	bottom: 52px;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 13px;
	font: 15px/1.5 var(--font);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.dmm-chat *, .dmm-chat *::before, .dmm-chat *::after { box-sizing: border-box; }
.dmm-chat [hidden] { display: none !important; }

/* Buttons: reset so theme button styles can't leak in */
.dmm-chat button { all: unset; box-sizing: border-box; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dmm-chat button:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }
.dmm-chat button:disabled { opacity: .6; cursor: default; }
.dmm-chat .dmm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Launcher ---------- */
.dmm-chat .dmm-launcher {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--red); color: #fff;
	box-shadow: 0 8px 20px rgba(214, 40, 40, .35), 0 2px 6px rgba(42, 15, 20, .2);
	transition: background .15s, transform .15s;
}
.dmm-chat .dmm-launcher:hover { background: var(--red-dark); transform: translateY(-1px); }
.dmm-chat .dmm-launcher svg { display: block; shape-rendering: geometricPrecision; }
.dmm-chat .dmm-tip {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 16px;
	background: #fff; color: var(--ink); font-size: 16px; line-height: 1.2; white-space: nowrap;
	box-shadow: 0 6px 20px rgba(42, 15, 20, .16), 0 0 0 1px rgba(42, 15, 20, .05);
}
.dmm-chat .dmm-tip svg { display: block; flex: none; width: 22px; height: 22px; }

/* ---------- Panel ---------- */
.dmm-chat .dmm-panel {
	position: absolute; right: 0; bottom: 72px;
	width: 384px; max-width: calc(100vw - 24px);
	height: min(640px, calc(100vh - 150px));
	display: flex; flex-direction: column;
	background: var(--paper); border-radius: 20px; overflow: hidden;
	box-shadow: 0 28px 64px -12px rgba(42, 15, 20, .38), 0 0 0 1px rgba(42, 15, 20, .08);
	transform-origin: bottom right;
	animation: dmm-pop .2s ease-out;
}
.dmm-chat .dmm-panel:focus { outline: none; }
@keyframes dmm-pop {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* Header */
.dmm-chat .dmm-head {
	display: flex; align-items: center; gap: 12px; flex: none;
	margin: 12px 12px 0; padding: 14px 14px 14px 14px; border-radius: 16px;
	background: var(--ink); color: #fff;
}
.dmm-chat .dmm-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 40px; height: 40px; border-radius: 12px; background: var(--red); color: #fff;
	font: 800 22px/1 var(--display); letter-spacing: -.02em;
}
.dmm-chat .dmm-avatar svg { display: block; }
.dmm-chat .dmm-titles { flex: 1; min-width: 0; }
.dmm-chat .dmm-title { font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.dmm-chat .dmm-sub { margin-top: 2px; font-size: 13px; line-height: 1.2; color: rgba(255, 255, 255, .72); }
.dmm-chat .dmm-back {
	display: inline-flex; align-items: center; gap: 2px; flex: none;
	height: 36px; padding: 0 14px 0 8px; margin-left: -6px; border-radius: 999px;
	background: rgba(255, 255, 255, .12); font-size: 14px; font-weight: 600;
	transition: background .15s;
}
.dmm-chat .dmm-back:not([hidden]) ~ .dmm-avatar { display: none; }
.dmm-chat .dmm-back:not([hidden]) ~ .dmm-titles { margin-left: 2px; }
.dmm-chat .dmm-close {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 36px; height: 36px; border-radius: 50%; margin-right: -4px;
	background: rgba(255, 255, 255, .12); transition: background .15s;
}
.dmm-chat .dmm-back:hover, .dmm-chat .dmm-close:hover { background: rgba(255, 255, 255, .24); }
.dmm-chat .dmm-head button:focus-visible { outline-color: #fff; outline-offset: 1px; }

/* Body */
.dmm-chat .dmm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.dmm-chat .dmm-scroll { flex: 1; overflow: auto; padding: 20px 18px; scrollbar-width: thin; scrollbar-color: var(--field) transparent; }

/* ---------- Home + answers ---------- */
.dmm-chat .dmm-greet { margin: 0 0 6px; font: 700 19px/1.25 var(--display); letter-spacing: -.01em; }
.dmm-chat .dmm-hello { font-size: 26px; line-height: 1.15; }
.dmm-chat .dmm-lede { margin: 0 0 18px; color: var(--muted); }
.dmm-chat .dmm-list { display: flex; flex-direction: column; gap: 8px; }
.dmm-chat .dmm-opt {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
	font-weight: 600; line-height: 1.3;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.dmm-chat .dmm-opt::after {
	content: ""; flex: none; width: 18px; height: 18px; background: var(--muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background .15s, transform .15s;
}
.dmm-chat .dmm-opt:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(42, 15, 20, .08); }
.dmm-chat .dmm-opt:hover::after { background: var(--red); transform: translateX(2px); }
.dmm-chat .dmm-opt-alt { background: #fff; }
.dmm-chat .dmm-opt-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.dmm-chat .dmm-opt-dark::after { background: #fff; }
.dmm-chat .dmm-opt-dark:hover { background: #3d1a21; border-color: #3d1a21; box-shadow: 0 6px 16px rgba(42, 15, 20, .25); }
.dmm-chat .dmm-opt-dark:hover::after { background: #fff; }
.dmm-chat .dmm-opt-icon { justify-content: flex-start; }
.dmm-chat .dmm-opt-icon::after { margin-left: auto; }
.dmm-chat .dmm-opt-ico { display: inline-flex; flex: none; color: var(--muted); }
.dmm-chat .dmm-opt-dark .dmm-opt-ico { color: #fff; }
.dmm-chat .dmm-opt-ico svg { display: block; }
.dmm-chat .dmm-opt-label { min-width: 0; }
.dmm-chat .dmm-inline { margin: 4px 0 8px; }
.dmm-chat .dmm-more { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.dmm-chat .dmm-q { margin: 0 0 12px; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.dmm-chat .dmm-answer { margin: 0; }
.dmm-chat .dmm-answer p { margin: 0 0 10px; }
.dmm-chat .dmm-bot a, .dmm-chat .dmm-answer a, .dmm-chat .dmm-track a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.dmm-chat .dmm-hint { margin: 20px 0 0; color: var(--muted); font-weight: 600; }
.dmm-chat .dmm-hint + .dmm-more { margin-top: 8px; padding-top: 0; border-top: 0; }

/* Home footer */
.dmm-chat .dmm-home { display: flex; flex-direction: column; }
.dmm-chat .dmm-foot { margin: auto 0 0; padding-top: 24px; text-align: center; font-size: 14px; color: var(--muted); }
.dmm-chat .dmm-foot a { color: var(--ink); font-weight: 700; text-decoration: none; }
.dmm-chat .dmm-foot a:hover { color: var(--red); text-decoration: underline; }

/* ---------- Chat ---------- */
.dmm-chat .dmm-log { padding: 18px; }
.dmm-chat .dmm-msg { max-width: 86%; margin: 0 0 10px; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dmm-chat .dmm-bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.dmm-chat .dmm-me { background: var(--ink); color: #fff; margin-left: auto; border-bottom-right-radius: 6px; }
.dmm-chat .is-typing { display: inline-block; padding: 14px 16px; }
.dmm-chat .dmm-dots { display: inline-flex; gap: 5px; align-items: center; }
.dmm-chat .dmm-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .35; animation: dmm-dot 1.2s infinite ease-in-out; }
.dmm-chat .dmm-dots i:nth-child(2) { animation-delay: .15s; }
.dmm-chat .dmm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dmm-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.dmm-chat .dmm-form { display: flex; gap: 8px; align-items: flex-end; flex: none; padding: 12px 14px; background: #fff; border-top: 1px solid var(--line); }
.dmm-chat .dmm-field {
	display: block; width: 100%; height: auto; margin: 0; padding: 12px 14px;
	border: 1px solid var(--field); border-radius: 12px; background: #fff; color: var(--ink);
	font: inherit; line-height: 1.4; box-shadow: none; resize: none;
	transition: border-color .15s, box-shadow .15s;
}
.dmm-chat .dmm-field::placeholder { color: #9a8a8c; }
.dmm-chat .dmm-field:focus,
.dmm-chat .dmm-field:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(214, 40, 40, .18); }
.dmm-chat .dmm-send {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff;
	transition: background .15s;
}
.dmm-chat .dmm-send:hover { background: var(--red-dark); }

/* ---------- Forms ---------- */
.dmm-chat .dmm-intro { margin: 0 0 20px; color: var(--muted); }
.dmm-chat .dmm-emailform .dmm-field { padding: 13px 14px; font-size: 16px; }
.dmm-chat .dmm-row { margin: 0 0 18px; }
.dmm-chat .dmm-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.dmm-chat .dmm-fieldhint { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.dmm-chat .dmm-submit {
	display: block; width: 100%; margin-top: 6px; padding: 14px; border-radius: 12px;
	background: var(--red); color: #fff; font-weight: 700; text-align: center;
	box-shadow: 0 6px 16px rgba(214, 40, 40, .28);
	transition: background .15s, box-shadow .15s;
}
.dmm-chat .dmm-submit:hover { background: var(--red-dark); }
.dmm-chat .dmm-error { margin: 0 0 10px; color: #b00020; font-weight: 600; }
.dmm-chat .dmm-error:empty { display: none; }
.dmm-chat .dmm-notice { margin: 0 0 18px; padding: 12px 14px; background: #fff6e0; border: 1px solid #f0cf86; border-radius: 12px; }
.dmm-chat .dmm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Order lookup ---------- */
.dmm-chat .dmm-result { margin-top: 20px; }
.dmm-chat .dmm-order { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(42, 15, 20, .06); }
.dmm-chat .dmm-order .dmm-q { margin-bottom: 8px; }
.dmm-chat .dmm-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px; }
.dmm-chat .dmm-date { font-size: 13px; color: var(--muted); }
.dmm-chat .dmm-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 700; line-height: 1.4; }
.dmm-chat .dmm-chip-ok { background: #e8f5ee; border-color: #bfe3cf; color: #176a42; }
.dmm-chat .dmm-chip-wait { background: #fff4d9; border-color: #f0cf86; color: #7a4f00; }
.dmm-chat .dmm-chip-bad { background: #fdeaea; border-color: #f3c3c3; color: var(--red-dark); }
.dmm-chat .dmm-items { margin: 12px 0; padding: 12px 0 12px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dmm-chat .dmm-sublabel { margin: 12px 0 2px; font-size: 14px; font-weight: 700; }
.dmm-chat .dmm-track { margin: 0 0 4px; overflow-wrap: anywhere; }
.dmm-chat .dmm-order .dmm-hint { margin-top: 14px; }

/* ---------- Phones: bottom sheet, launcher hides while open ---------- */
@media (max-width: 480px) {
	.dmm-chat { right: 14px; bottom: 14px; }
	.dmm-chat .dmm-launcher.is-open { display: none; }
	/* full-screen, like a messaging app: the chat covers the whole phone screen */
	.dmm-chat .dmm-panel {
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		width: 100%; max-width: none; height: 100vh; height: 100dvh;
		border-radius: 0; box-shadow: none; background: var(--paper);
		padding-bottom: env(safe-area-inset-bottom, 0);
		animation-name: dmm-fade;
	}
	.dmm-chat .dmm-head { margin-top: calc(10px + env(safe-area-inset-top, 0px)); }
	.dmm-chat .dmm-scroll, .dmm-chat .dmm-field { overscroll-behavior: contain; }
	.dmm-chat .dmm-panel { overscroll-behavior: contain; touch-action: pan-y; }
	.dmm-chat .dmm-field { font-size: 16px; } /* stops iOS zoom on focus */
	.dmm-chat .dmm-panel.is-kb { padding-bottom: 0; }

	/* while the chat is open the website behind it is hidden completely and the background is solid,
	   so no part of the page (product photos, text) can show around the keyboard */
	html.dmm-chat-open,
	html.dmm-chat-open body { background: #fbf7f6 !important; overflow: hidden !important; }
	/* While the chat is open the page behind it is switched off completely (not just hidden), so its layout,
	   animations and scroll scripts do no work while the customer types. It comes back when the chat closes. */
	html.dmm-chat-open body > *:not(.dmm-chat):not(script):not(style):not(link) { display: none !important; }
}
@keyframes dmm-fade { from { opacity: 0; } to { opacity: 1; } }

/* Phones: small round button, no label, sits above the theme's sticky "Buy now" bar (--dmm-bar) when there is one */
@media (max-width: 640px) {
	.dmm-chat { right: 12px; bottom: calc(14px + var(--dmm-bar, 0px) + env(safe-area-inset-bottom, 0px)); }
	.dmm-chat .dmm-tip { display: none; }
	/* product pages: no floating button (the page has an "Ask us" link under the features that opens the chat) */
	body.single-product .dmm-chat .dmm-launcher { display: none; }
	.dmm-chat .dmm-launcher { width: 44px; height: 44px; }
	.dmm-chat .dmm-launcher svg { width: 22px; height: 22px; }
	.dmm-chat.dmm-nomobile { display: none; }
	/* no chat button on the phone cart */
	body.woocommerce-cart .dmm-chat { display: none; }
}

/* no chat on the checkout page (desktop and phone). The thank-you page keeps it, for order questions. */
body.woocommerce-checkout:not(.woocommerce-order-received) .dmm-chat { display: none; }

@media (prefers-reduced-motion: reduce) {
	.dmm-chat .dmm-panel, .dmm-chat .dmm-dots i { animation: none; }
	.dmm-chat * { transition: none !important; }
}

/* "Was this answer helpful?" */
.dmm-chat .dmm-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 12px; font-size: 13px; color: var(--muted); }
.dmm-chat .dmm-fb-btn { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.dmm-chat .dmm-fb-btn:hover { border-color: var(--red); }
.dmm-chat .dmm-fb-text { flex-basis: 100%; font-size: 15px; }
.dmm-chat .dmm-fb-send { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Assistant replies: paragraphs and numbered steps with breathing room */
.dmm-chat .dmm-bot { white-space: normal; }
.dmm-chat .dmm-bot .dmm-p { margin: 0; }
.dmm-chat .dmm-bot .dmm-p + .dmm-p, .dmm-chat .dmm-bot .dmm-steps + .dmm-p, .dmm-chat .dmm-bot .dmm-p + .dmm-steps, .dmm-chat .dmm-bot .dmm-steps + .dmm-steps { margin-top: 12px; }
.dmm-chat .dmm-bot .dmm-steps { margin: 0; padding-left: 1.6em; }
.dmm-chat .dmm-bot ol.dmm-steps { list-style: decimal; }
.dmm-chat .dmm-bot ul.dmm-steps { list-style: disc; }
.dmm-chat .dmm-bot .dmm-steps li { margin: 0; padding-left: .2em; }
.dmm-chat .dmm-bot .dmm-steps li + li { margin-top: 10px; }
.dmm-chat .dmm-bot .dmm-steps li::marker { font-weight: 700; color: var(--ink); }
.dmm-chat .dmm-bot a { overflow-wrap: anywhere; }