/**
 * Mersal Assistant — front-end chat widget (1.16 design).
 *
 * Scoped under #mersal-widget-root / .mw-* to avoid theme conflicts. Colours
 * are tokens on the root (light) and on .mw-panel.is-dark; the accent comes
 * from the dashboard (--mw-accent, --mw-accent-2 is a lighter shade set by
 * widget.js). Layouts: floating card, expanded card, full screen — and phones
 * get full screen by default (root class mw-mfull).
 */
#mersal-widget-root, #mersal-widget-root * { box-sizing: border-box; }
#mersal-widget-root {
	--mw-accent: #5B5BD6;
	--mw-accent-2: #7C7CF0;
	--mw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mw-x: var(--mw-x-d, 24px);
	--mw-y: var(--mw-y-d, 24px);
	--mw-size: 60px;
	--mw-w: 400px;
	--mw-stack: calc(var(--mw-y) + var(--mw-size) + 16px);
	--mw-vvh: 100dvh;
	font-family: var(--mw-font);
}
@media (max-width: 782px) {
	#mersal-widget-root {
		--mw-x: var(--mw-x-m, var(--mw-x-d, 16px));
		--mw-y: var(--mw-y-m, var(--mw-y-d, 16px));
	}
	#mersal-widget-root.mw-hide-mobile { display: none !important; }
}
@media (min-width: 783px) {
	#mersal-widget-root.mw-hide-desktop { display: none !important; }
}
#mersal-widget-root .mw-panel,
#mersal-widget-root .mw-panel * { font-family: var(--mw-font); }

/* ---------------------------------------------------------------- tokens */
.mw-panel {
	--mw-bg: #FFFFFF;
	--mw-surface: #F5F6FA;
	--mw-card: #FFFFFF;
	--mw-text: #1B1A29;
	--mw-muted: #6C6982;
	--mw-line: rgba(24, 22, 48, .09);
	--mw-soft: color-mix(in srgb, var(--mw-accent) 9%, #fff);
	--mw-soft-line: color-mix(in srgb, var(--mw-accent) 26%, #fff);
	--mw-shadow: 0 1px 2px rgba(18, 16, 40, .05), 0 4px 14px rgba(18, 16, 40, .04);
	--mw-r: 18px;
}
.mw-panel.is-dark {
	--mw-bg: #121119;
	--mw-surface: #17161F;
	--mw-card: #211F2C;
	--mw-text: #EEEDF6;
	--mw-muted: #A4A1BA;
	--mw-line: rgba(255, 255, 255, .08);
	--mw-soft: color-mix(in srgb, var(--mw-accent) 18%, #17161F);
	--mw-soft-line: color-mix(in srgb, var(--mw-accent) 40%, #17161F);
	--mw-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.mw-shape-square { --mw-r: 8px; }
.mw-shape-pill { --mw-r: 24px; }

/* -------------------------------------------------------------- launcher */
.mw-fab {
	position: fixed; bottom: var(--mw-y); width: var(--mw-size); height: var(--mw-size);
	border-radius: 50%; border: none; cursor: pointer; z-index: 2147483000; padding: 0;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2));
	box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--mw-accent) 60%, transparent), 0 4px 12px rgba(0,0,0,.14);
	display: flex; align-items: center; justify-content: center; color: #fff;
	transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .2s, opacity .2s;
}
.mw-fab:hover { transform: translateY(-3px) scale(1.04); }
.mw-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--mw-accent) 45%, #fff); outline-offset: 3px; }
.mw-fab.is-left { left: var(--mw-x); }
.mw-fab.is-right { right: var(--mw-x); }
.mw-fab::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--mw-accent) 45%, transparent);
	animation: mwPing 3.2s ease-out 1.5s infinite;
}
@keyframes mwPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mw-accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } }
.mw-fab__icon { display: flex; transition: transform .3s ease, opacity .2s; }
.mw-fab.is-open .mw-fab__icon--main { transform: rotate(-90deg) scale(.4); opacity: 0; position: absolute; }
.mw-fab__icon--close { position: absolute; opacity: 0; transform: rotate(90deg) scale(.4); }
.mw-fab.is-open .mw-fab__icon--close { position: static; opacity: 1; transform: none; }
.mw-fab.is-open::after { animation: none; }

/* character launcher: the bust pops out of its own badge */
.mw-fab.mw-fab--char {
	width: calc(var(--mw-size) * 1.22); height: calc(var(--mw-size) * 1.22);
	background: transparent; box-shadow: none; bottom: max(4px, calc(var(--mw-y) - 6px));
}
.mw-fab--char.is-left { left: max(4px, calc(var(--mw-x) - 6px)); }
.mw-fab--char.is-right { right: max(4px, calc(var(--mw-x) - 6px)); }
.mw-fab--char::after { inset: 14% 4% 0; }
.mw-fab--char .mw-char { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(16,14,40,.32)); animation: mwPop .6s cubic-bezier(.3,1.5,.45,1) both; }
.mw-fab--char .mw-fab__icon--close {
	width: 70%; height: 70%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); box-shadow: 0 10px 24px -6px rgba(16,14,40,.4);
}
.mw-fab--char.is-open .mw-char { display: none; }
@keyframes mwPop { from { transform: translateY(24px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.mw-fab__badge {
	position: absolute; top: 0; inset-inline-end: 0; min-width: 21px; height: 21px; padding: 0 6px;
	border-radius: 11px; background: #E5484D; color: #fff; font: 700 11px/21px -apple-system, 'Segoe UI', sans-serif;
	text-align: center; box-shadow: 0 0 0 2.5px #fff; pointer-events: none; animation: mwPop .4s both;
}

/* greeting teaser */
.mw-teaser {
	position: fixed; bottom: calc(var(--mw-y) + var(--mw-size) + 14px); z-index: 2147482999;
	max-width: min(290px, calc(100vw - 32px)); display: flex; align-items: center; gap: 10px;
	padding: 11px 34px 11px 12px; border-radius: 18px; cursor: pointer;
	background: #fff; color: #1B1A29; font-size: 13.5px; font-weight: 600; line-height: 1.45;
	box-shadow: 0 18px 44px -12px rgba(16,14,40,.35), 0 0 0 1px rgba(24,22,48,.06);
	animation: mwTeaserIn .45s cubic-bezier(.3,1.4,.5,1) both;
}
.mw-teaser.is-rtl { padding: 11px 12px 11px 34px; }
.mw-teaser.is-right { right: var(--mw-x); }
.mw-teaser.is-left { left: var(--mw-x); }
.mw-teaser--char { bottom: calc(var(--mw-y) + var(--mw-size) * 1.22 + 6px); }
.mw-teaser__avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff; }
.mw-teaser__avatar svg.mw-char { width: 40px; height: 40px; overflow: visible; }
.mw-teaser__x {
	position: absolute; top: 7px; inset-inline-end: 7px; width: 22px; height: 22px;
	border: none; background: transparent; color: #9794A8; font-size: 16px; line-height: 1;
	cursor: pointer; border-radius: 50%; padding: 0;
}
.mw-teaser__x:hover { background: #F1F0F7; color: #23212E; }
.mw-teaser--offer svg { color: var(--mw-accent); flex-shrink: 0; }
@keyframes mwTeaserIn { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- panel */
.mw-panel {
	position: fixed; bottom: var(--mw-stack); z-index: 2147483000;
	width: var(--mw-w); max-width: calc(100vw - 32px);
	height: min(720px, calc(var(--mw-vvh) - var(--mw-stack) - 24px));
	background: var(--mw-bg); color: var(--mw-text);
	border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 34px 90px -24px rgba(16,14,40,.5), 0 0 0 1px var(--mw-line);
	animation: mwIn .32s cubic-bezier(.2,1.2,.4,1) both;
	transform-origin: bottom right;
}
.mw-panel.is-left { left: var(--mw-x); transform-origin: bottom left; }
.mw-panel.is-right { right: var(--mw-x); }
.mw-panel.mw-layout-expanded { width: min(760px, calc(100vw - 48px)); height: calc(var(--mw-vvh) - var(--mw-stack) - 24px); }
@keyframes mwIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* full screen: requested by the visitor, set as the layout, or a phone */
.mw-panel.is-full {
	inset: 0; left: 0 !important; right: 0 !important; bottom: auto; top: 0;
	width: 100vw; max-width: none; height: var(--mw-vvh); border-radius: 0;
	animation: mwInFull .28s ease both;
}
@keyframes mwInFull { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.mw-panel.is-full .mw-body > *,
.mw-panel.is-full .mw-footer__inner { width: 100%; max-width: 820px; margin-inline: auto; }
html.mw-lock, html.mw-lock body { overflow: hidden !important; }

/* ---------------------------------------------------------------- header */
.mw-header {
	position: relative; isolation: isolate; flex-shrink: 0;
	display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff;
}
.mw-panel[dir="rtl"] .mw-header { padding: 14px 16px 14px 14px; }
.mw-header::before, .mw-header::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.mw-header::before { width: 180px; height: 180px; inset-block-start: -110px; inset-inline-end: -40px; background: rgba(255,255,255,.12); }
.mw-header::after { width: 90px; height: 90px; inset-block-end: -60px; inset-inline-start: 30%; background: rgba(255,255,255,.08); }
.mw-header__avatar {
	position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.2); box-shadow: 0 0 0 2px rgba(255,255,255,.45);
}
.mw-header__avatar--char { background: transparent; box-shadow: none; }
.mw-header__avatar svg.mw-char { width: 54px; height: 54px; margin-top: -8px; overflow: visible; }
.mw-header__text { flex: 1; min-width: 0; }
/* The whole title is shown: it wraps (on whole words) instead of being cut
   with an ellipsis. */
.mw-header__title { font-size: 15.5px; font-weight: 800; line-height: 1.3; white-space: normal; overflow-wrap: break-word; }
.mw-header__status { margin-top: 3px; font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 6px; line-height: 1.35; }
.mw-header__status .dot { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(61,220,151,.7); animation: mwDot 2s infinite; }
@keyframes mwDot { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(61,220,151,0); } }
.mw-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mw-hbtn {
	width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: #fff;
	background: rgba(255,255,255,.16); transition: background .15s, transform .15s;
}
.mw-hbtn:hover { background: rgba(255,255,255,.3); }
.mw-hbtn:active { transform: scale(.92); }
.mw-hbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mw-hbtn.is-on { background: #fff; color: var(--mw-accent); }
.mw-header__voice.is-speaking svg { animation: mwVoicePulse .7s ease-in-out infinite alternate; }
@keyframes mwVoicePulse { from { transform: scale(.85); } to { transform: scale(1.15); } }
.mw-hide-handoff .mw-header__human { display: none; }
.mw-panel { container-type: inline-size; container-name: mwpanel; }
@container mwpanel (max-width: 440px) {
	.mw-hbtn--opt { display: none; }
}
.mw-more {
	position: absolute; z-index: 5; inset-block-start: 66px; inset-inline-end: 12px; min-width: 210px;
	background: var(--mw-card); color: var(--mw-text); border: 1px solid var(--mw-line); border-radius: 16px; padding: 6px;
	box-shadow: 0 24px 50px -16px rgba(16,14,40,.4); animation: mwRise .18s ease both;
}
.mw-more__item {
	width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; border-radius: 11px;
	background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: start;
}
.mw-more__item:hover, .mw-more__item:focus-visible { background: var(--mw-soft); color: var(--mw-accent); outline: none; }
.mw-more__item svg { flex-shrink: 0; opacity: .85; }
.mw-header .cx-think circle { fill: #fff; }

/* ------------------------------------------------------------------ body */
.mw-body {
	flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
	padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 10px;
	background:
		radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--mw-accent) 9%, transparent), transparent 60%),
		var(--mw-surface);
	scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(120,120,140,.35) transparent;
}
.mw-body::-webkit-scrollbar { width: 8px; }
.mw-body::-webkit-scrollbar-thumb { background: rgba(120,120,140,.32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* hero shown on an empty conversation */
.mw-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 6px 4px; animation: mwRise .45s ease both; }
.mw-hero__avatar { width: 92px; height: 92px; margin-bottom: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff; box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--mw-accent) 60%, transparent); }
.mw-hero__avatar--char { background: transparent; box-shadow: none; }
.mw-hero__avatar svg.mw-char { width: 104px; height: 104px; overflow: visible; }
.mw-hero__title { font-size: 19px; font-weight: 800; color: var(--mw-text); line-height: 1.35; margin: 2px 0 6px; overflow-wrap: anywhere; }
.mw-hero__text { font-size: 14.5px; line-height: 1.7; color: var(--mw-muted); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 520px; }
.mw-hero__search { margin-top: 14px; width: 100%; max-width: 520px; position: relative; }
.mw-hero__search svg { position: absolute; top: 50%; inset-inline-start: 15px; transform: translateY(-50%); color: var(--mw-muted); pointer-events: none; }
.mw-hero__search input {
	width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid var(--mw-line); outline: none;
	background: var(--mw-card); color: var(--mw-text); font-size: 14px; padding-inline: 42px 16px;
	box-shadow: var(--mw-shadow); transition: border-color .15s, box-shadow .15s;
}
.mw-hero__search input::placeholder { color: var(--mw-muted); opacity: 1; }
.mw-hero__search input:focus { border-color: var(--mw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mw-accent) 16%, transparent); }
@keyframes mwRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* message rows */
.mw-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: mwRise .3s ease both; }
.mw-row.is-user { justify-content: flex-end; }
.mw-row__avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff; }
.mw-row__avatar--char { background: transparent; }
.mw-row__avatar svg.mw-char { width: 34px; height: 34px; overflow: visible; }
.mw-row.is-bot.is-cont .mw-row__avatar { visibility: hidden; }
.mw-msg {
	max-width: min(84%, 640px); padding: 11px 14px; font-size: 14.5px; line-height: 1.7;
	white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.mw-msg.is-bot {
	background: var(--mw-card); color: var(--mw-text); border: 1px solid var(--mw-line); box-shadow: var(--mw-shadow);
	border-radius: var(--mw-r); border-end-start-radius: 6px;
}
.mw-msg.is-user {
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff;
	border-radius: var(--mw-r); border-end-end-radius: 6px;
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--mw-accent) 70%, transparent);
}
.mw-shape-square .mw-msg { border-radius: 8px !important; }
.mw-msg.is-bot.is-agent { border-color: var(--mw-soft-line); }
.mw-agent { font-size: 11.5px; font-weight: 700; color: var(--mw-muted); margin: 4px 40px -4px; }
.mw-msg .mw-link { color: var(--mw-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mw-msg.is-user .mw-link { color: #fff; }
.mw-panel.is-dark .mw-msg.is-bot .mw-link { color: color-mix(in srgb, var(--mw-accent) 55%, #fff); }

/* sources under an answer: article cards with their date */
.mw-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; white-space: normal; }
.mw-sources__label { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--mw-muted); }
.mw-source {
	display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--mw-text);
	background: var(--mw-surface); border: 1px solid var(--mw-line); border-radius: 12px; padding: 8px 10px;
	font-size: 12.5px; font-weight: 600; line-height: 1.45; transition: border-color .15s, background .15s;
}
.mw-source:hover { border-color: var(--mw-soft-line); background: var(--mw-soft); }
.mw-source__ico { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--mw-soft); color: var(--mw-accent); }
.mw-source__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mw-source__date { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--mw-muted); background: var(--mw-card); border: 1px solid var(--mw-line); border-radius: 999px; padding: 2px 8px; }

/* typing */
.mw-typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; background: var(--mw-card); border: 1px solid var(--mw-line); border-radius: var(--mw-r); border-end-start-radius: 6px; box-shadow: var(--mw-shadow); }
.mw-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mw-accent); opacity: .5; animation: mwBounce 1.2s infinite; }
.mw-typing span:nth-child(2) { animation-delay: .15s; }
.mw-typing span:nth-child(3) { animation-delay: .3s; }
.mw-typing__label {
	font-style: normal; font-size: 13px; font-weight: 600; margin-inline-start: 8px;
	background: linear-gradient(90deg, var(--mw-muted) 0%, var(--mw-text) 50%, var(--mw-muted) 100%);
	background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
	animation: mwShimmer 1.6s linear infinite;
}
@keyframes mwShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes mwBounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* quick replies */
.mw-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding-inline-start: 38px; animation: mwRise .3s ease both; }
.mw-suggestion {
	text-align: start; font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1.4;
	color: var(--mw-accent); background: var(--mw-card); border: 1.5px solid var(--mw-soft-line);
	border-radius: 999px; padding: 8px 13px; cursor: pointer; white-space: normal; overflow-wrap: anywhere;
	transition: transform .12s, background .12s, border-color .12s;
}
.mw-suggestion:hover { transform: translateY(-1px); background: var(--mw-soft); border-color: var(--mw-accent); }
.mw-suggestion--choice { background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); border-color: transparent; color: #fff; }
.mw-suggestion--choice:hover { background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); filter: brightness(1.06); }
.mw-panel.is-dark .mw-suggestion { color: color-mix(in srgb, var(--mw-accent) 50%, #fff); }
.mw-panel.is-dark .mw-suggestion--choice { color: #fff; }

/* ---------------------------------------------------------- explore menu */
.mw-menu { align-self: stretch; padding: 4px 0 2px; animation: mwRise .4s ease both; }
.mw-menu__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mw-menu__heading { flex: 1; min-width: 0; }
.mw-menu__eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--mw-accent); margin-bottom: 2px; }
.mw-menu__title { font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--mw-text); overflow-wrap: anywhere; }
.mw-menu__nav { display: flex; gap: 6px; flex-shrink: 0; }
.mw-menu__nav button { width: 32px; height: 32px; border: 1px solid var(--mw-line); border-radius: 50%; background: var(--mw-card); color: var(--mw-text); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--mw-shadow); transition: border-color .15s, color .15s; }
.mw-menu__nav button:hover { border-color: var(--mw-accent); color: var(--mw-accent); }
.mw-menu__nav button:first-child svg { transform: scaleX(-1); }
[dir="rtl"] .mw-menu__nav button:first-child svg { transform: none; }
[dir="rtl"] .mw-menu__nav button:last-child svg { transform: scaleX(-1); }
.mw-menu__items {
	display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; margin-inline: -16px; padding: 2px 16px 10px;
	scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain;
}
.mw-menu__items::-webkit-scrollbar { display: none; }
.mw-menu__item {
	position: relative; flex: 0 0 168px; width: 168px; text-align: start; font-family: inherit; padding: 0;
	color: var(--mw-text); background: var(--mw-card); border: 1px solid var(--mw-line); border-radius: 18px;
	cursor: pointer; display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start;
	box-shadow: var(--mw-shadow); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mw-menu__item:hover { transform: translateY(-3px); border-color: var(--mw-soft-line); box-shadow: 0 14px 28px -14px rgba(16,14,40,.35); }
.mw-menu__art { position: relative; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); }
.mw-menu__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,20,.35), transparent 55%); }
.mw-menu__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mw-menu__item:hover .mw-menu__art img { transform: scale(1.07); }
.mw-menu__art--fallback { background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.3), transparent 38%), linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); }
.mw-menu__badge { position: absolute; z-index: 1; inset-block-end: 8px; inset-inline-start: 8px; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: var(--mw-accent); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.mw-menu__badge--link { inset-inline-start: auto; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%; }
.mw-menu__content { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* Labels are shown in full — no clamping. */
.mw-menu__label { font-size: 13.5px; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.mw-menu__meta { font-size: 11.5px; color: var(--mw-muted); font-weight: 600; }
.mw-panel.is-full .mw-menu__items,
.mw-panel.mw-layout-expanded .mw-menu__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
.mw-panel.is-full .mw-menu__item,
.mw-panel.mw-layout-expanded .mw-menu__item { width: auto; }
.mw-panel.is-full .mw-menu__nav,
.mw-panel.mw-layout-expanded .mw-menu__nav { display: none; }

/* ---------------------------------------------------------------- footer */
.mw-footer { flex-shrink: 0; padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--mw-bg); border-top: 1px solid var(--mw-line); }
.mw-composer {
	display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 24px;
	background: var(--mw-surface); border: 1.5px solid var(--mw-line); transition: border-color .15s, box-shadow .15s;
}
.mw-composer:focus-within { border-color: var(--mw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mw-accent) 14%, transparent); background: var(--mw-card); }
.mw-input {
	flex: 1; min-width: 0; border: none; background: transparent; color: var(--mw-text); outline: none; resize: none;
	font-family: inherit; font-size: 15px; line-height: 1.5; padding: 8px 8px; min-height: 38px; max-height: 140px; overflow-y: auto;
}
.mw-input::placeholder { color: var(--mw-muted); opacity: 1; }
.mw-send {
	width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer; color: #fff;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mw-accent) 80%, transparent); transition: transform .15s, opacity .15s;
}
.mw-send:hover { transform: scale(1.06); }
.mw-send.is-idle { opacity: .45; box-shadow: none; }
[dir="rtl"] .mw-send svg { transform: scaleX(-1); }
.mw-tool {
	width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; cursor: pointer; padding: 0;
	background: transparent; border: none; color: var(--mw-muted); display: flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
.mw-tool:hover { background: var(--mw-soft); color: var(--mw-accent); }
.mw-powered { text-align: center; font-size: 10.5px; color: var(--mw-muted); opacity: .75; margin-top: 6px; letter-spacing: .02em; }
.mw-powered b { font-weight: 800; }

.mw-attachwrap { display: flex; flex-shrink: 0; }
.mw-file { display: none; }
.mw-upload { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; color: var(--mw-muted); background: var(--mw-surface); border: 1px dashed var(--mw-soft-line); border-radius: 12px; padding: 7px 11px; }
.mw-upload span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-upload__x { margin-inline-start: auto; background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--mw-muted); }
.mw-attach { display: block; margin-top: 8px; }
.mw-attach__img { display: block; max-width: 200px; max-height: 200px; width: auto; height: auto; border-radius: 12px; }
.mw-attach--file { font-size: 12.5px; text-decoration: underline; color: inherit; word-break: break-all; }

.mw-consent { padding: 18px; background: var(--mw-card); border: 1px solid var(--mw-line); border-radius: 18px; font-size: 13.5px; color: var(--mw-muted); line-height: 1.65; box-shadow: var(--mw-shadow); }
.mw-consent button { margin-top: 12px; background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff; border: none; border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.mw-error { align-self: center; font-size: 12.5px; color: #C2363B; background: #FDECEC; padding: 7px 14px; border-radius: 999px; }

/* ------------------------------------------------------------- products */
.mw-products { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-inline-start: 38px; }
.mw-product { display: flex; align-items: center; gap: 12px; background: var(--mw-card); border: 1px solid var(--mw-line); border-radius: 18px; padding: 10px; box-shadow: var(--mw-shadow); color: inherit; }
.mw-product__img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--mw-surface); }
.mw-product__img--ph { display: flex; align-items: center; justify-content: center; color: var(--mw-accent); }
.mw-product__meta { flex: 1; min-width: 0; }
.mw-product__name { font-size: 13.5px; font-weight: 750; color: var(--mw-text); line-height: 1.4; overflow-wrap: anywhere; }
.mw-product__desc { font-size: 12px; color: var(--mw-muted); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.mw-product__price { font-size: 13.5px; font-weight: 800; color: var(--mw-accent); margin-top: 3px; }
.mw-product__stock { font-size: 11.5px; color: var(--mw-muted); margin-top: 1px; }
.mw-product__actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.mw-product__view, .mw-product__cart { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.mw-product__view { background: var(--mw-card); color: var(--mw-accent); border: 1.5px solid var(--mw-soft-line); }
.mw-product__cart { background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); color: #fff; border: none; }
@media (max-width: 420px) {
	.mw-product { flex-wrap: wrap; }
	.mw-product__actions { flex-direction: row; width: 100%; }
	.mw-product__view, .mw-product__cart { flex: 1; }
}

/* ------------------------------------------------------------- feedback */
.mw-feedback { display: flex; align-items: center; gap: 4px; margin-top: 8px; white-space: normal; }
.mw-feedback__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; border: 1px solid var(--mw-line); color: var(--mw-muted); transition: color .12s, border-color .12s, background .12s, transform .12s; }
.mw-feedback__btn:hover { color: var(--mw-accent); border-color: var(--mw-accent); }
.mw-feedback__btn.is-on { color: #fff; background: var(--mw-accent); border-color: var(--mw-accent); transform: scale(1.06); }
.mw-feedback.is-voted .mw-feedback__btn:not(.is-on) { opacity: .35; pointer-events: none; }
.mw-feedback__thanks { font-size: 12px; color: var(--mw-muted); margin-inline-start: 4px; }
.mw-msg-tools { display: flex; align-items: center; gap: 4px; margin-top: 8px; white-space: normal; }
.mw-msg-tools .mw-feedback { margin-top: 0; }
.mw-speak-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; border: 1px solid var(--mw-line); color: var(--mw-muted); }
.mw-speak-btn:hover, .mw-speak-btn.is-speaking { color: var(--mw-accent); border-color: var(--mw-accent); }

/* ------------------------------------------------------- phone & small */
@media (max-width: 640px) {
	#mersal-widget-root.mw-mfull .mw-panel {
		inset: 0; left: 0 !important; right: 0 !important; top: 0; bottom: auto;
		width: 100vw; max-width: none; height: var(--mw-vvh); border-radius: 0; animation: mwInFull .26s ease both;
	}
	#mersal-widget-root.mw-mfull.mw-open .mw-fab { opacity: 0; pointer-events: none; transform: scale(.6); }
	#mersal-widget-root.mw-mfull .mw-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
	#mersal-widget-root:not(.mw-mfull) .mw-panel { width: calc(100vw - 20px); height: min(680px, calc(var(--mw-vvh) - var(--mw-stack) - 10px)); }
	#mersal-widget-root:not(.mw-mfull) .mw-panel.is-left { left: 10px; }
	#mersal-widget-root:not(.mw-mfull) .mw-panel.is-right { right: 10px; }
	.mw-header__fullscreen { display: none; }
	.mw-header { gap: 10px; padding: 12px 12px; }
	.mw-panel[dir="rtl"] .mw-header { padding: 12px 12px; }
	.mw-hbtn { width: 32px; height: 32px; }
	.mw-header__actions { gap: 4px; }
	.mw-body { padding: 14px 12px 10px; }
	.mw-menu__items { margin-inline: -12px; padding-inline: 12px; }
	.mw-menu__item { flex-basis: 156px; width: 156px; }
	.mw-msg { max-width: 88%; }
	.mw-input { font-size: 16px; } /* 16px stops iOS zooming into the field */
	.mw-suggestions, .mw-products { padding-inline-start: 0; }
}
@media (max-width: 360px) {
	.mw-header__title { font-size: 14.5px; }
	.mw-header__avatar { width: 40px; height: 40px; }
	.mw-header__avatar svg.mw-char { width: 46px; height: 46px; }
	.mw-row__avatar { display: none; }
	.mw-msg { max-width: 94%; }
}

/* ------------------------------------------------------------ characters */
.mw-char { overflow: visible; }
.mw-char .cx-body { animation: cxFloat 4.6s ease-in-out infinite; }
.mw-char .cx-head { transform-box: fill-box; transform-origin: 50% 100%; animation: cxTilt 7.5s ease-in-out infinite; }
.mw-char .cx-eyes { transform-box: fill-box; transform-origin: center; animation: cxBlink 5.2s infinite; }
.mw-char .cx-look { transform: translate(var(--mw-lx, 0px), var(--mw-ly, 0px)); transition: transform .2s ease-out; }
.mw-char .cx-mouth { transform-box: fill-box; transform-origin: center; }
.mw-char .cx-glow { animation: cxGlow 2.6s ease-in-out infinite; }
.mw-char .cx-think { opacity: 0; transition: opacity .2s; }
.mw-char .cx-think circle { fill: var(--mw-accent, #5B5BD6); transform-box: fill-box; transform-origin: center; }
.mw-char .cx-arm { transform-box: fill-box; transform-origin: 20% 100%; }
.mw-thinking .mw-char .cx-think { opacity: 1; }
.mw-thinking .mw-char .cx-think circle { animation: cxDots 1.1s ease-in-out infinite; }
.mw-thinking .mw-char .cx-think circle:nth-child(2) { animation-delay: .15s; }
.mw-thinking .mw-char .cx-think circle:nth-child(3) { animation-delay: .3s; }
.mw-thinking .mw-char .cx-look { transform: translate(1.8px, -2.2px); }
.mw-thinking .mw-char .cx-head { animation: cxPonder 2.4s ease-in-out infinite; }
.mw-talking .mw-char .cx-mouth { animation: cxTalk .22s ease-in-out infinite alternate; }
.mw-happy .mw-char .cx-eyes { animation: none; transform: scaleY(.45); }
.mw-happy .mw-char .cx-body { animation: cxHop .5s ease 2; }
.mw-wave .mw-char .cx-arm, .mw-fab--char:hover .cx-arm { animation: cxWave 1.1s ease-in-out 2; }
.mw-wave .mw-char .cx-head, .mw-fab--char:hover .cx-head { animation: cxNod 1.1s ease-in-out 2; }
@keyframes cxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes cxTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.2deg); } 65% { transform: rotate(1.8deg); } }
@keyframes cxPonder { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-5deg) translateY(-1px); } }
@keyframes cxNod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
@keyframes cxBlink { 0%, 90%, 94%, 100% { transform: scaleY(1); } 92% { transform: scaleY(.08); } }
@keyframes cxGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes cxTalk { from { transform: scaleY(.6); } to { transform: scaleY(1.6) translateY(.6px); } }
@keyframes cxHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes cxWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-10deg); } }
@keyframes cxDots { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.mw-char *, .mw-fab, .mw-fab::after, .mw-panel, .mw-row, .mw-hero, .mw-menu, .mw-teaser, .mw-typing__label, .mw-header__status .dot { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------- site-logo avatar (1.17) */
.mw-logo-av { background: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.6); overflow: hidden; }
.mw-logo-av img { width: 78%; height: 78%; object-fit: contain; display: block; }
.mw-hero__avatar.mw-logo-av { box-shadow: 0 16px 36px -14px rgba(16,14,40,.35), 0 0 0 4px color-mix(in srgb, var(--mw-accent) 22%, transparent); }
.mw-row__avatar.mw-logo-av { box-shadow: 0 0 0 1px var(--mw-line); }
.mw-fab.mw-fab--logo { background: #fff; box-shadow: 0 14px 34px -8px rgba(16,14,40,.35), 0 0 0 3px var(--mw-accent); }
.mw-fab__logo { width: 72%; height: 72%; align-items: center; justify-content: center; }
.mw-fab__logo img { width: 100%; height: 100%; object-fit: contain; }
.mw-fab--logo .mw-fab__icon--close { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); align-items: center; justify-content: center; }
.mw-fab--logo.is-open .mw-fab__icon--close { display: flex; }

/* ---------------------------------------- native views: sections & articles */
.mw-msg.mw-browse { width: min(100%, 640px); max-width: 100%; white-space: normal; padding: 12px; }
.mw-browse__title { font-size: 14.5px; font-weight: 800; margin: 2px 2px 10px; overflow-wrap: anywhere; }
.mw-browse__empty { font-size: 13.5px; color: var(--mw-muted); padding: 6px 2px; }
.mw-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.mw-section {
	position: relative; overflow: hidden; border: none; padding: 0; cursor: pointer; text-align: start;
	min-height: 92px; border-radius: 14px; color: #fff; font: inherit; display: flex; flex-direction: column; justify-content: flex-end;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2)); transition: transform .15s, box-shadow .15s;
}
.mw-section:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(16,14,40,.5); }
.mw-section__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mw-section__img--ph { display: flex; align-items: center; justify-content: center; opacity: .5; }
.mw-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,20,.78), rgba(10,9,20,.08) 70%); }
.mw-section__name, .mw-section__count { position: relative; z-index: 1; padding: 0 10px; }
.mw-section__name { font-size: 14px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.mw-section__count { font-size: 11.5px; opacity: .85; padding-bottom: 9px; margin-top: 1px; }
.mw-posts { display: flex; flex-direction: column; gap: 8px; }
.mw-post { background: var(--mw-surface); border: 1px solid var(--mw-line); border-radius: 14px; overflow: hidden; }
.mw-post__link { display: flex; gap: 10px; padding: 9px; text-decoration: none; color: var(--mw-text); }
.mw-post__link:hover .mw-post__title { color: var(--mw-accent); }
.mw-post__img { width: 84px; height: 66px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: var(--mw-soft); }
.mw-post__img--ph { display: flex; align-items: center; justify-content: center; color: var(--mw-accent); }
.mw-post__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mw-post__title { font-size: 13.5px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; transition: color .15s; }
.mw-post__date { font-size: 11px; font-weight: 700; color: var(--mw-accent); }
.mw-post__ex { font-size: 12px; line-height: 1.55; color: var(--mw-muted); overflow-wrap: anywhere; }
.mw-post__actions { display: flex; gap: 6px; padding: 0 9px 9px; flex-wrap: wrap; }
.mw-post__btn {
	display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700;
	text-decoration: none; cursor: pointer; border: 1px solid var(--mw-soft-line); background: var(--mw-card); color: var(--mw-accent);
}
.mw-post__btn--ask { background: var(--mw-soft); }
.mw-post__btn:hover { border-color: var(--mw-accent); }
.mw-browse__more { margin-top: 10px; width: 100%; padding: 9px; border-radius: 12px; border: 1.5px dashed var(--mw-soft-line); background: transparent; color: var(--mw-accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mw-browse__more:disabled { opacity: .6; cursor: default; }
.mw-browse__searchwrap { position: relative; display: flex; align-items: center; color: var(--mw-muted); }
.mw-browse__searchwrap svg { position: absolute; inset-inline-start: 12px; }
.mw-browse__search { width: 100%; height: 44px; border-radius: 999px; border: 1.5px solid var(--mw-line); background: var(--mw-card); color: var(--mw-text); font: inherit; font-size: 15px; padding-inline: 38px 14px; outline: none; }
.mw-browse__search:focus { border-color: var(--mw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mw-accent) 14%, transparent); }
.mw-panel.is-full .mw-sections, .mw-panel.mw-layout-expanded .mw-sections { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.mw-panel.is-full .mw-post__img { width: 120px; height: 84px; }
@media (max-width: 360px) { .mw-post__img { width: 70px; height: 56px; } }

/* --------------------------------------------- message to the team (1.17.1) */
.mw-contact__lead { font-size: 13px; color: var(--mw-muted); line-height: 1.6; margin: -4px 2px 10px; }
.mw-contact__form { display: flex; flex-direction: column; gap: 8px; }
.mw-field {
	width: 100%; border: 1.5px solid var(--mw-line); border-radius: 12px; background: var(--mw-card); color: var(--mw-text);
	font: inherit; font-size: 15px; line-height: 1.5; padding: 10px 12px; outline: none; resize: vertical;
}
.mw-field--area { min-height: 96px; }
.mw-field::placeholder { color: var(--mw-muted); opacity: 1; }
.mw-field:focus { border-color: var(--mw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mw-accent) 14%, transparent); }
.mw-contact__err { font-size: 12.5px; color: #C2363B; min-height: 0; }
.mw-contact__err:empty { display: none; }
.mw-contact__send {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 999px; cursor: pointer;
	padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2));
}
.mw-contact__send:disabled { opacity: .65; cursor: default; }
[dir="rtl"] .mw-contact__send svg { transform: scaleX(-1); }
.mw-contact__done { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.7; color: var(--mw-text); }
.mw-contact__done svg { flex-shrink: 0; margin-top: 4px; color: #1F9D6B; }

/* search buttons (1.17.2) — phones do not always show a usable Enter key */
.mw-searchbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
	height: 44px; padding: 0 16px; border: none; border-radius: 999px; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, var(--mw-accent), var(--mw-accent-2));
	box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mw-accent) 80%, transparent);
}
.mw-searchbtn:active { transform: scale(.96); }
.mw-browse__searchwrap { gap: 8px; }
.mw-browse__searchwrap > svg { pointer-events: none; }
.mw-browse__search { flex: 1; min-width: 0; }
.mw-hero__search { display: flex; align-items: center; gap: 8px; }
.mw-hero__search input { flex: 1; min-width: 0; }
.mw-hero__search .mw-searchbtn { height: 46px; }
@media (max-width: 380px) { .mw-searchbtn span { display: none; } .mw-searchbtn { width: 44px; padding: 0; } }