/* Generated At: Wed Oct 21 2026 09:24:08 GMT+0000 (Coordinated Universal Time) 
 Latest Commit: a661e11bf6c2d2a45846a276f8a43bb4672e291c - sjadhav-vs, 1 year, 10 months ago : PKB | MicroFE | Common : Prepend Meta Data Fix  
 Latest Build Number: 1.0.562-develop */ 
/*
 * 2026.08.11: Gladly-9
 * Overrides for the Gladly Chat widget's host elements.
 *
 * Loaded by insertGladlyScript() in main.ts, not by any app's index.html, so it ships only
 * when the enableGladlyChatIntegration toggle selects Gladly — the same reason
 * selectAndInsertChatVendor() keeps the two vendors' bundles apart. Putting these rules in
 * src/styles.scss instead would compile them into tvs-common.css, which every consuming app
 * links unconditionally, and Genesys sessions would carry them too.
 *
 * Served from /microfe/common/styles/gladly.css: files in public/styles are copied verbatim
 * to publish/styles by the copy:css npm script, then out to each app's
 * public/microfe/common/styles. Nothing compiles this file, so it must stay valid plain CSS.
 *
 * Scope note: Gladly iframes the conversation content, so message bubbles, fonts and the
 * composer are out of reach here and come from the Gladly admin theme settings. The widget
 * shell around that iframe — container, panel and header — is rendered into our own document
 * and is styleable from this file, but every element in it sits inside Gladly's cleanslate
 * reset, which declares background and color with !important, so a rule that repaints one
 * needs !important too regardless of how specific its selector is.
 */

.gladlyChat_open #gladlyChat_container {
	max-height: 600px !important;
}

/*
 * 2026.08.11: Gladly-9
 * No #gladlyChat_container rules live here on purpose.
 *
 * Reshaping that container (circular border-radius, the Genesys bottom/right offsets, a
 * launcher drop shadow) only made sense while Gladly rendered its own minimized button inside
 * it. It no longer does: the SDK's isVisible selector for the widget container includes the
 * term (!hasCustomButton() || !isMinimized), where hasCustomButton() is a live
 * getElementById('custom-gladly-chat-button') check. With our button in the DOM the container
 * is therefore never rendered while minimized, and the only time it does render is as the
 * opened chat panel — which a border-radius of 50% would visibly break.
 *
 * If the opened panel ever needs repositioning, add rules here for that state deliberately.
 * Do not reintroduce launcher styling.
 */

/*
 * 2026.08.11: Gladly-9
 * Custom minimized chat button, per gladly/gladapp-examples docs/custom-minimized-button.
 *
 * The element is built by public/scripts/gladlyChatButton.js, loaded both by main.ts and by
 * the legacy PDP page in the website repo. Gladly finds it by the
 * custom-gladly-chat-button id and decorates it with gladly-show once the button should be
 * visible; it applies no styling of its own, so every rule below is ours and nothing competes
 * for these selectors — hence no !important here, unlike the vendor-container rules above.
 *
 * Geometry is lifted from .genesys-mxg-frame as served on www.vitaminshoppe.com: fixed at
 * right 5px / bottom 135px, 72x72, z-index 99999999, with the visible 56px circle centred
 * inside that box. Genesys declares those in a rule with no media query, so the launcher sits
 * identically at every width and this file needs no breakpoint of its own.
 */
#custom-gladly-chat-button {
	position: fixed;
	right: 5px;
	bottom: 135px;
	z-index: 99999999;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	/* Hidden until Gladly opts the button in. The vendor only ever adds gladly-show — it never
	   hides the button for us — so display:none has to be the default or the launcher would
	   flash on screen before the SDK has a conversation to open. */
	display: none;
}

#custom-gladly-chat-button.gladly-show {
	display: flex;
}

/*
 * 2026.08.25: Gladly-11
 * Unavailable launcher — hidden outright, not dimmed.
 *
 * The class is applied by the Gladly adapter's syncAvailability() in chatLibrary.js whenever
 * window.Gladly.getAvailability() is not "AVAILABLE" (office closed, or every agent busy),
 * polled once a minute. The rule is here rather than injected from JS because this stylesheet
 * already ships only on the Gladly branch, so a Genesys session cannot pick it up — the same
 * reason the launcher's other rules live here instead of in tvs-common.css.
 *
 * This is the behaviour the floating icon has always had outside office hours, where Gladly
 * drops gladly-show of its own accord and the button falls back to the display:none default
 * above. Stating it as our own class keeps it true in the case the vendor does not cover —
 * UNAVAILABLE_BUSY, where the office is open, every agent is occupied, and Gladly leaves its
 * button on screen.
 *
 * Must stay AFTER the .gladly-show rule: both selectors are one id plus one class, so they
 * carry identical specificity and source order is the only thing that decides which wins.
 *
 * No pointer-events, cursor or filter rules are needed — a display:none element takes no
 * clicks and has nothing to grey out. Note that this is the whole of what availability does to
 * this launcher: it is hidden, never disabled. The other entry points (the PLP/PDP CTAs, the
 * CMS onclick) do not go near this element and are not blocked either — they open the messenger
 * and let Gladly render its own out-of-hours message, rather than clicking to nothing.
 */
#custom-gladly-chat-button.vsi-chat-launcher--hidden {
	display: none;
}

/*
 * 2026.10.05: WD-8935 hide-chat-app
 * Launcher never shown in the VShoppe app webview. chatLibrary.js puts the class on <html>
 * before this button is inserted; the button itself stays in the DOM so Gladly does not
 * render its own default launcher instead. Chat still opens from the page's own CTAs
 * (Contact Us "Chat Now").
 *
 * Out-specifies the .gladly-show rule (one id, one class, one element), so source order
 * does not matter here.
 */
html.vsi-chat-launcher-suppressed #custom-gladly-chat-button {
	display: none;
}

#custom-gladly-chat-button .vsi-gladly-button__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #14377d;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -2px, rgba(0, 0, 0, 0.14) 0px 1px 4px 2px, rgba(0, 0, 0, 0.12) 0px 1px 4px 1px;
}

#custom-gladly-chat-button .vsi-gladly-button__circle:hover {
	background-color: #012169;
}

#custom-gladly-chat-button .vsi-gladly-button__circle svg {
	user-select: none;
	flex-shrink: 0;
	fill: currentcolor;
	font-size: 1.60714rem;
	width: 26px;
	height: 26px;
	display: inherit;
	-webkit-box-align: inherit;
	align-items: inherit;
	-webkit-box-pack: inherit;
	justify-content: inherit;
	transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1)
}

/*
 * 2026.10.09: Gladly-63
 * Unread-message alert on the minimized launcher.
 *
 * The Alert Color in Gladly's Chat admin screen colours only the vendor's default minimized
 * button, which never renders here because this launcher replaces it — so the admin setting on
 * its own changes nothing on our pages. What the SDK does give a custom button is a class: it
 * adds gladly-unread to #custom-gladly-chat-button while the conversation's unread count is
 * above zero and removes it once the count drops back to zero, the same way it drives
 * gladly-show. The constant (SHOW_UNREAD_DOT: "gladly-unread") is read from the vendor's
 * apiBootstrap chunk on cdn.gladly.com; it is not in Gladly's public docs, so if a vendor
 * release renames it the launcher simply shows no dot — nothing breaks.
 *
 * Shown as a badge dot on the circle's top-right edge, matching the unread indicator on
 * Gladly's own default button, rather than recolouring the whole circle: the launcher keeps
 * its navy Genesys look and only the dot signals the unread message. The dot is a pseudo-element
 * so gladlyChatButton.js needs no extra markup, and it sits on the circle rather than the
 * 72px button box so it tracks the visible 56px circle. It is inset 12px from the circle's
 * top and right, so it sits inside the circle's edge, with a white ring so it separates from
 * the navy behind it.
 *
 * The colour comes from Gladly admin's Alert Color, not from this file: after Gladly
 * initialises, chatLibrary.js's Gladly adapter (syncAlertColor) reads colors.alert from the org
 * config and sets --vsi-gladly-alert-color inline on the button, which overrides the value
 * below. The value here is only the fallback for when that read fails (init failed, the config
 * 404s — prod has no org yet — or no colour is configured).
 */
#custom-gladly-chat-button {
	--vsi-gladly-alert-color: #D4240D;
}

#custom-gladly-chat-button .vsi-gladly-button__circle {
	position: relative;
}

#custom-gladly-chat-button.gladly-unread .vsi-gladly-button__circle::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: var(--vsi-gladly-alert-color);
	pointer-events: none;
}

/*
 * 2026.09.09: GLADLY-21
 * Panel header — navy bar with white text, matching the Genesys header customers know.
 *
 * Reachable from this file, unlike the message list: Gladly renders the widget shell into our
 * own document (#gladlyChat_container > #gladlyWidget > ... > #sidekick-title) and iframes only
 * the conversation content, so the header is an ordinary element in our DOM tree.
 *
 * Hooked on data-aid rather than the class attribute. Every class on the element is a
 * styled-components hash (GladlyChat-ctIGYp hflULQ) that changes whenever the vendor rebuilds
 * its bundle; data-aid is the vendor's own test hook and has stayed put. #sidekick-title is
 * equally stable and is kept in the selector only as the container scope.
 *
 * !important is required, not defensive. Gladly wraps the widget in the cleanslate reset, whose
 * rules declare background and color with !important on every element they touch; a plain
 * declaration here loses to it no matter how specific the selector, which is why the id in the
 * selector is not enough on its own.
 *
 * One selector covers both header states — the self-service header ("Let's chat!") and the
 * conversation header ("Message Us") are the same element re-rendered, sharing this data-aid.
 *
 * The h2 rule is not a cosmetic extra: cleanslate paints the title black, so setting only the
 * bar's background would leave black text on navy. The close control needs the same treatment
 * and gets it in its own block below, where the glyph is also swapped.
 *
 * No border-radius needed. The panel wrapper is already 8px/overflow:hidden, so the bar is
 * clipped to the panel's rounded top corners on its own.
 */
#gladlyChat_container [data-aid="selfService-header"] {
	background: #14377d !important;
	color: #fff !important;
}

/*
 * 2026.09.09: GLADLY-21
 * Title sized to the Genesys header.
 *
 * Measured off Genesys at a 1536px viewport rather than copied from its stylesheet, which sits
 * in a cross-origin iframe and cannot be read: its "Message Us" run is ~115px wide with a cap
 * height of ~15.5px, which is Lato at 22px regular. Gladly ships the same title at 13px/700, so
 * the two headers read as different products even once the bar and the glyph match.
 *
 * Weight matters as much as size here. Gladly's 700 at 13px and Genesys' 400 at 22px are not
 * the same typographic gesture, and dropping to 400 is what stops the resized title looking
 * like a shouted label.
 *
 * line-height is set as a ratio because Gladly pins it to the font size (13px/13px), which
 * would clamp a 22px glyph box and clip descenders.
 *
 * Fits without reflow: the title sits in the middle of three flex children, and at 22px it
 * measures 115px against 321px of header content box, so the header keeps its 58.8px height
 * and the close button does not move.
 */
#gladlyChat_container [data-aid="selfService-header"] h2 {
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

/*
 * 2026.09.10: GLADLY-21
 * Close control — Gladly's own X, repainted for the navy bar.
 *
 * The trash glyph this block used to mask in has been dropped. It made the control read as
 * Genesys' "end conversation" while still doing what Gladly's X does — closing the panel — so
 * the vendor's icon is left in place and only its colour is ours.
 *
 * The glyph needs both paints, not just fill. Gladly fills the X with its own brand blue
 * (rgb(0, 118, 180)) from a rule on the svg, and its button rule also declares
 * stroke: rgb(0, 0, 0) !important, which inherits down into the path and outlines it at 1px —
 * on a 16x15 viewBox drawn into 32px that outline is most of the glyph, so filling white alone
 * still reads as a black X on the navy bar. Setting both on the svg covers the whole icon: the
 * path declares neither itself, as an attribute or from a vendor rule, so it inherits them.
 *
 * No colour is set on the button. The vendor's base rule declares color: inherit !important on
 * it, so it takes the header's white on its own — cleanslate does not intercept this element
 * the way it does the h2 above.
 *
 * background and box-shadow are held flat for the self-service header state ("Let's chat!"),
 * where the previous revision of this block found Gladly raising the button into a white pill.
 * The conversation header already computes transparent with no shadow from the vendor's own
 * base rule, so both declarations are no-ops in that state.
 *
 * The vendor's :hover / :focus-visible rules out-specify these — its selector is one id plus a
 * class and a pseudo-class against the id, attribute and element here — so its rgba(0, 0, 0,
 * .04) wash and its focus ring both still land. That is deliberate now that the glyph is drawn
 * by the vendor's svg rather than masked out of the button's own background, which is what made
 * the wash destructive before.
 *
 * Selector is the header's descendant button, not the CloseButton__closeButton___zvV8i class
 * the element also carries: that is a CSS-modules hash and changes whenever Gladly rebuilds its
 * bundle, the same reason data-aid is the hook on the bar itself. The header renders exactly
 * one button in both states, so the descendant selector cannot pick up anything else.
 */
#gladlyChat_container [data-aid="selfService-header"] button {
	background: transparent !important;
	box-shadow: none !important;
}

#gladlyChat_container [data-aid="selfService-header"] button svg {
	fill: #fff !important;
	stroke: #fff !important;
}

/* only desktop css - gladly mobile breakpoint - max-width: 667 */
@media (min-width: 668px) {
	#gladlyChat_container>div>div {
		max-width: 363px !important;
	}
}