/* The floating "Ask anything" widget (inc/ask-widget.php, js/ask-widget.js). Claude Design handoff
   "Ask anything widget · final (01 + pose 02)", 3 Nov 2026: Seashell button with a hairline, white bar,
   Bordeaux send, Seashell chips and header, mascot pose 02. It sits in the bottom row next to the WhatsApp
   button (css/utility.css: left 24px, 56px; phone left 14px, 52px) with a 12px gap and opens toward the
   middle. RTL first; physical left like .shg-wa. Motion: width only, nothing scales or bounces. */

.shg-aw {
	--aw-h: 56px; --aw-w: 440px; --aw-line: inset 0 0 0 1px rgb(56 27 32 / .14); --aw-shadow: 0 12px 32px -12px rgb(56 27 32 / .28);
	position: fixed; left: 92px; inset-block-end: 24px; z-index: 51; inline-size: 0; block-size: var(--aw-h);
	transition: inset-block-end 300ms var(--ease-circ, ease);
}
.shg-aw [hidden] { display: none !important; }
.shg-aw, .shg-aw *, .shg-aw *::before, .shg-aw *::after { box-sizing: border-box; } /* It lives outside .qs-pg, which sets this for the page. */

/* The bar: a 56px circle when closed, the question bar when open, the panel's input row in the panel */
.shg-aw__bar {
	position: absolute; z-index: 3; inset-block-end: 0; left: 0; display: flex; align-items: center; gap: 8px;
	inline-size: var(--aw-h); block-size: var(--aw-h); margin: 0; padding: 8px 16px 8px 8px; border-radius: 999px;
	background: var(--seashell, #fff6ee); box-shadow: var(--aw-line), var(--aw-shadow);
	transition: inline-size 160ms var(--m-out, cubic-bezier(.16, 1, .3, 1)), background-color 160ms, block-size 160ms;
}
.shg-aw:not([data-state="closed"]) .shg-aw__bar { inline-size: var(--aw-w); background: var(--ground, #fff); transition-duration: var(--m-base, 220ms); }

/* Closed: the round button with the mascot cropped to his head, paw and the top of the "?" (one asset, CSS crop) */
.shg-aw__btn { position: absolute; inset: 0; z-index: 2; display: block; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; transition: opacity var(--m-fast, 120ms); }
.shg-aw__face { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; }
.shg-aw__face img { position: absolute; left: -20px; top: -6px; inline-size: 94px; block-size: 94px; max-inline-size: none; }
.shg-aw__dot { position: absolute; inset-block-start: 0; right: 0; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--inverse, #4c1e20); box-shadow: 0 0 0 2px var(--ground, #fff); }
.shg-aw[data-state="closed"] .shg-aw__btn:hover .shg-aw__face img { transform: translateY(-1px); }
.shg-aw:not([data-state="closed"]) .shg-aw__btn { opacity: 0; pointer-events: none; }

/* Open: the placeholder on the reading side, the send on the far end */
.shg-aw__field { position: relative; flex: 1; min-inline-size: 0; block-size: 100%; display: flex; align-items: center; overflow: hidden; }
.shg-aw__in { inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink, #381b20); font: inherit; font-size: 16px; box-shadow: none; }
.shg-aw__ph { position: absolute; inset-inline: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; color: rgb(56 27 32 / .55); pointer-events: none; transition: opacity 160ms; }
.shg-aw__ph.is-out { opacity: 0; }
.shg-aw__send { flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin: -4px; padding: 4px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.shg-aw__send > span { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--inverse, #4c1e20); color: var(--seashell, #fff6ee); }
.shg-aw__send svg { inline-size: 18px; block-size: 18px; }
.shg-aw__field, .shg-aw__send { opacity: 0; visibility: hidden; transition: opacity var(--m-fast, 120ms), visibility 0s var(--m-fast, 120ms); }
.shg-aw:not([data-state="closed"]) .shg-aw__field, .shg-aw:not([data-state="closed"]) .shg-aw__send { opacity: 1; visibility: visible; transition: opacity var(--m-fast, 120ms) var(--m-base, 220ms), visibility 0s; }

/* The mascot peeks over the bar's send-side corner, his lower half behind the bar */
.shg-aw__peek { position: absolute; z-index: 2; left: -4px; inset-block-end: 34px; inline-size: 72px; block-size: 72px; max-inline-size: none; opacity: 0; pointer-events: none; transition: opacity var(--m-fast, 120ms); }
.shg-aw[data-state="bar"] .shg-aw__peek { opacity: 1; transition-delay: var(--m-base, 220ms); }

/* Chips: three, stacked above the bar, aligned to its reading start */
.shg-aw__chips { position: absolute; z-index: 2; inset-block-end: calc(var(--aw-h) + 12px); left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; inline-size: var(--aw-w); pointer-events: none; }
.shg-aw__chip { block-size: 40px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: var(--seashell, #fff6ee); box-shadow: var(--aw-line), 0 8px 20px -14px rgb(56 27 32 / .3); color: var(--ink, #381b20); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity var(--m-fast, 120ms), transform var(--m-fast, 120ms); }
.shg-aw__chip:nth-child(1) { transition-delay: 0ms; }
.shg-aw__chip:nth-child(2) { transition-delay: 40ms; }
.shg-aw__chip:nth-child(3) { transition-delay: 80ms; }
.shg-aw[data-state="bar"] .shg-aw__chips { pointer-events: auto; }
.shg-aw[data-state="bar"] .shg-aw__chip { opacity: 1; transform: none; }
.shg-aw[data-state="bar"] .shg-aw__chip:nth-child(3) { transition-delay: calc(var(--m-base, 220ms) + 0ms); } /* The first chip last: the stack grows upward. */
.shg-aw[data-state="bar"] .shg-aw__chip:nth-child(2) { transition-delay: calc(var(--m-base, 220ms) + 40ms); }
.shg-aw[data-state="bar"] .shg-aw__chip:nth-child(1) { transition-delay: calc(var(--m-base, 220ms) + 80ms); }
.shg-aw__chip:hover { background: var(--ground, #fff); }

/* Panel: 380 x 520 above the bar, which becomes its input row (48px, 36px send) */
.shg-aw__panel {
	position: absolute; z-index: 1; left: -12px; inset-block-end: -12px; display: flex; flex-direction: column;
	inline-size: 380px; block-size: min(520px, calc(100vh - 120px)); padding-block-end: 72px; border-radius: 20px;
	background: var(--ground, #fff); box-shadow: var(--aw-line), 0 24px 60px -20px rgb(56 27 32 / .4); overflow: hidden;
	animation: shg-aw-rise var(--m-base, 220ms) var(--m-out, ease-out);
}
@keyframes shg-aw-rise { from { opacity: 0; transform: translateY(8px); } }
.shg-aw[data-state="panel"] .shg-aw__bar { --aw-w: 356px; block-size: 48px; padding: 6px 14px 6px 6px; box-shadow: var(--aw-line); }
.shg-aw[data-state="panel"] .shg-aw__send > span { inline-size: 36px; block-size: 36px; }
.shg-aw__head { flex: none; display: flex; align-items: center; gap: 10px; block-size: 56px; padding-inline: 14px 10px; background: var(--seashell, #fff6ee); box-shadow: inset 0 -1px 0 rgb(56 27 32 / .14); }
.shg-aw__hm { inline-size: 36px; block-size: 36px; object-fit: contain; }
.shg-aw__ht { flex: 1; margin: 0; font-size: 16px; font-weight: 500; color: var(--ink, #381b20); }
.shg-aw__x { display: grid; place-items: center; inline-size: 36px; block-size: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink, #381b20); cursor: pointer; }
.shg-aw__x svg { inline-size: 18px; block-size: 18px; }
.shg-aw__body { flex: 1; min-block-size: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
.shg-aw__msg { max-inline-size: 82%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.4; color: var(--ink, #381b20); overflow-wrap: anywhere; }
.shg-aw__msg p { margin: 0; white-space: pre-line; }
.shg-aw__msg--us { align-self: flex-start; background: var(--seashell, #fff6ee); border-end-start-radius: 4px; }
.shg-aw__msg--me { align-self: flex-end; background: var(--pale-sky, #c6dae6); border-end-end-radius: 4px; }
.shg-aw__msg.is-err { background: var(--ground, #fff); box-shadow: var(--aw-line); }
.shg-aw__msg.is-err a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.shg-aw__card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--ground, #fff); box-shadow: var(--aw-line); color: var(--ink, #381b20); font-size: 14px; text-decoration: none; }
.shg-aw__card:hover { box-shadow: inset 0 0 0 1px var(--ink, #381b20); }
.shg-aw__ct { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.shg-aw__cp { font-size: 13px; color: rgb(56 27 32 / .7); }
.shg-aw__cg { flex: none; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--pale-sky, #c6dae6); }
.shg-aw__cg svg { inline-size: 14px; block-size: 14px; }
.shg-aw__typing { display: flex; gap: 5px; padding-block: 14px; }
.shg-aw__typing i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ink, #381b20); animation: shg-aw-dot 1.2s infinite; }
.shg-aw__typing i:nth-child(2) { animation-delay: 200ms; }
.shg-aw__typing i:nth-child(3) { animation-delay: 400ms; }
@keyframes shg-aw-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.shg-aw__foot { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 0; box-shadow: inset 0 1px 0 rgb(56 27 32 / .14); }
.shg-aw__wa { margin: 0; font-size: 13px; color: rgb(56 27 32 / .7); }
.shg-aw__wa a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.shg-aw__fine { margin: 0; font-size: 11.5px; color: rgb(56 27 32 / .55); }
.shg-aw__scrim { display: none; }

.shg-aw__btn:focus-visible, .shg-aw__chip:focus-visible, .shg-aw__send:focus-visible, .shg-aw__x:focus-visible, .shg-aw__card:focus-visible { outline: 2px solid var(--ink, #381b20); outline-offset: 2px; }

/* Moves with the WhatsApp button; hides behind open drawers and menus */
body.hnk-bar-on .shg-aw { inset-block-end: 96px; }
html.shg-lock:not(.shg-aw-sheet) .shg-aw { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 749px) {
	.shg-aw { --aw-h: 52px; --aw-w: calc(100vw - 94px); left: 78px; inset-block-end: 16px; }
	.shg-aw__face img { left: -18px; top: -5px; inline-size: 87px; block-size: 87px; }
	.shg-aw__in, .shg-aw__ph { font-size: 15px; }
	.shg-aw__send > span { inline-size: 36px; block-size: 36px; }
	html:has(.shg-sbar.is-on) .shg-aw { inset-block-end: 88px; } /* Above the sticky buy bar, like WhatsApp (css/product.css). */
	body.hnk-bar-on .shg-aw { inset-block-end: 92px; }
	/* The panel is a bottom sheet; the bar is its input row at the bottom */
	.shg-aw__scrim { position: fixed; z-index: 0; inset: 0; display: block; background: rgb(56 27 32 / .3); opacity: 0; pointer-events: none; transition: opacity var(--m-base, 220ms); }
	.shg-aw[data-state="panel"] .shg-aw__scrim { opacity: 1; pointer-events: auto; }
	.shg-aw__panel { position: fixed; inset-inline: 0; inset-block-end: 0; left: 0; inline-size: auto; block-size: 85vh; padding-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; animation-name: shg-aw-up; }
	@keyframes shg-aw-up { from { transform: translateY(24px); opacity: 0; } }
	.shg-aw[data-state="panel"] .shg-aw__bar { position: fixed; left: 16px; inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px)); --aw-w: calc(100vw - 32px); }
}

[dir="ltr"] .shg-aw { left: auto; right: 92px; }
[dir="ltr"] .shg-aw__bar, [dir="ltr"] .shg-aw__chips { left: auto; right: 0; }
[dir="ltr"] .shg-aw__panel { left: auto; right: -12px; }
@media (max-width: 749px) { [dir="ltr"] .shg-aw { right: 78px; } [dir="ltr"] .shg-aw__panel { right: 0; } [dir="ltr"] .shg-aw[data-state="panel"] .shg-aw__bar { left: auto; right: 16px; } }

@media (prefers-reduced-motion: reduce) {
	.shg-aw, .shg-aw *, .shg-aw__panel { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
	.shg-aw__typing i { opacity: .7; }
}

/* With the widget on, the WhatsApp tip bubble stays hidden: it opened where the widget sits, and the widget's
   panel already offers WhatsApp. */
html:has(.shg-aw) .shg-wa__tip { display: none !important; }

/* Closed (Jonas, 3 Nov): the whole mascot on his own, no circle. The bar's circle is see-through until it opens;
   he stands on the bottom row next to WhatsApp, a soft shadow keeps him readable over photos. */
.shg-aw[data-state="closed"] .shg-aw__bar { background: transparent; box-shadow: none; }
.shg-aw[data-state="closed"] .shg-aw__face { overflow: visible; border-radius: 0; }
.shg-aw__face img { transition: transform var(--m-fast, 120ms); }
.shg-aw[data-state="closed"] .shg-aw__face img { left: -12px; top: auto; bottom: -6px; inline-size: 80px; block-size: 80px; filter: drop-shadow(0 6px 10px rgb(56 27 32 / .22)); }
@media (max-width: 749px) { .shg-aw[data-state="closed"] .shg-aw__face img { left: -10px; bottom: -6px; inline-size: 74px; block-size: 74px; } }

/* The open bar's close button (Jonas, 3 Nov): a small round X on the bar's reading-side top corner.
   It folds the bar back to the mascot and stops the auto opens for the visit. */
.shg-aw__bx { position: absolute; z-index: 4; inset-block-start: -10px; right: -6px; display: grid; place-items: center; inline-size: 26px; block-size: 26px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ground, #fff); box-shadow: var(--aw-line), 0 4px 10px -4px rgb(56 27 32 / .3); color: var(--ink, #381b20); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--m-fast, 120ms), visibility 0s var(--m-fast, 120ms); }
.shg-aw__bx::before { content: ""; position: absolute; inset: -9px; } /* A 44px tap target. */
.shg-aw__bx svg { inline-size: 13px; block-size: 13px; }
.shg-aw[data-state="bar"] .shg-aw__bx { opacity: 1; visibility: visible; transition: opacity var(--m-fast, 120ms) var(--m-base, 220ms), visibility 0s; }
.shg-aw__bx:focus-visible { outline: 2px solid var(--ink, #381b20); outline-offset: 2px; }
[dir="ltr"] .shg-aw__bx { right: auto; left: -6px; }

/* No floating WhatsApp button (off for now, inc/utility.php): the widget takes its corner. */
html:not(:has(.shg-wa)) .shg-aw { left: 24px; }
@media (max-width: 749px) {
	html:not(:has(.shg-wa)) .shg-aw { left: 14px; --aw-w: calc(100vw - 30px); }
	html:not(:has(.shg-wa)):not(:has(.shg-sbar.is-on)) .shg-aw { inset-block-end: 16px; }
}
[dir="ltr"]:not(:has(.shg-wa)) .shg-aw { left: auto; right: 24px; }
@media (max-width: 749px) { [dir="ltr"]:not(:has(.shg-wa)) .shg-aw { right: 14px; } }