/* Fahad AI Shopping Assistant Widget */

:root {
	--chatbot-accent:      #2563eb;
	--chatbot-accent-dark: #1d4ed8;
	/* Foreground for text/icons on accent backgrounds. JS overrides this with the
	   higher-contrast of black/white for the configured accent (>=4.5:1 across the
	   whole gamut); the literal here is the fallback for the default accent. */
	--chatbot-accent-fg:   #ffffff;
	--chatbot-bg:          #ffffff;
	--chatbot-border:      #e5e7eb;
	--chatbot-text:        #111827;
	/* #646b76 = 4.88:1 on the bot bubble (#f3f4f6) so muted text clears AA 4.5:1
	   for normal text; was #6b7280 (4.39:1, just under). */
	--chatbot-muted:       #646b76;
	--chatbot-bot-bubble:  #f3f4f6;
	--chatbot-user-bubble: var(--chatbot-accent);
	--chatbot-user-text:   var(--chatbot-accent-fg);
	--chatbot-radius:      16px;
	--chatbot-z:           9999;
}

/* ── Toggle button ── */
#chatbot-toggle {
	position:      fixed;
	bottom:        24px;
	right:         24px;
	width:         56px;
	height:        56px;
	border-radius: 50%;
	background:    var(--chatbot-accent);
	color:         var(--chatbot-accent-fg);
	border:        none;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	box-shadow:    0 4px 14px rgba(0, 0, 0, .22);
	z-index:       var(--chatbot-z);
}

#chatbot-toggle:hover {
	background: var(--chatbot-accent-dark);
}

/* High-contrast, accent-independent focus ring: a dark ring plus a white offset
   so it is visible on any accent/background (WCAG 2.4.7 / 2.4.11). */
#chatbot-toggle:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 4px 14px rgba(0, 0, 0, .22), 0 0 0 4px #ffffff, 0 0 0 6px #1a1a1a;
}

@media (prefers-reduced-motion: no-preference) {
	#chatbot-toggle        { transition: background .2s, transform .2s; }
	#chatbot-toggle:hover  { transform: scale(1.06); }
}

/* ── Panel ── */
#chatbot-panel {
	position:       fixed;
	bottom:         92px;
	right:          24px;
	width:          360px;
	height:         520px;
	background:     var(--chatbot-bg);
	border:         1px solid var(--chatbot-border);
	border-radius:  var(--chatbot-radius);
	box-shadow:     0 8px 32px rgba(0, 0, 0, .15);
	display:        flex;
	flex-direction: column;
	z-index:        var(--chatbot-z);
	overflow:       hidden;
}

@media (prefers-reduced-motion: no-preference) {
	#chatbot-panel { transition: opacity .2s, transform .2s; }
}

/* The closed panel is also given the `inert` attribute in JS, which removes it
   and its controls from the keyboard tab order and from assistive tech, so focus
   cannot land on the hidden input (WCAG 2.4.3 / 4.1.2). Using `inert` rather than
   `visibility:hidden` keeps the open animation while not delaying focusability of
   the controls when the panel is revealed. */
#chatbot-panel.chatbot-hidden {
	opacity:        0;
	pointer-events: none;
	transform:      translateY(12px);
}

/* Defensive: a stale/un-inert-ed hidden panel (e.g. inert unsupported) must still
   not capture clicks. inert handles keyboard/AT; this covers pointer. */
#chatbot-panel[inert] {
	pointer-events: none;
}

/* ── Header ── */
#chatbot-header {
	background:      var(--chatbot-accent);
	color:           var(--chatbot-accent-fg);
	padding:         14px 16px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-shrink:     0;
}

#chatbot-header-left {
	display:     flex;
	align-items: center;
	gap:         10px;
}

#chatbot-status-dot {
	width:         8px;
	height:        8px;
	background:    #4ade80;
	border-radius: 50%;
	flex-shrink:   0;
}

#chatbot-bot-name {
	font-weight: 600;
	font-size:   15px;
	line-height: 1;
}

/* Full-opacity accent-fg (no alpha dimming) so the glyph keeps maximum contrast
   on the accent background. Hover uses a subtle translucent backdrop instead. */
#chatbot-close {
	background:    none;
	border:        none;
	color:         var(--chatbot-accent-fg);
	cursor:        pointer;
	font-size:     18px;
	line-height:   1;
	padding:       4px;
	margin:        -4px;
	border-radius: 6px;
	display:       flex;
	align-items:   center;
}

#chatbot-close:hover {
	background: rgba(127, 127, 127, .25);
}

#chatbot-close:focus-visible {
	outline:        2px solid var(--chatbot-accent-fg);
	outline-offset: 1px;
}

/* ── Messages ── */
#chatbot-messages {
	flex:           1;
	overflow-y:     auto;
	padding:        16px;
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

@media (prefers-reduced-motion: no-preference) {
	#chatbot-messages { scroll-behavior: smooth; }
}

.chatbot-msg {
	display:   flex;
	max-width: 82%;
}

.chatbot-msg.bot  { align-self: flex-start; }
.chatbot-msg.user { align-self: flex-end;   }

.chatbot-bubble {
	padding:     10px 14px;
	border-radius: 14px;
	font-size:   14px;
	line-height: 1.55;
	word-break:  break-word;
	white-space: pre-wrap;
}

.chatbot-msg.bot  .chatbot-bubble {
	background:             var(--chatbot-bot-bubble);
	color:                  var(--chatbot-text);
	border-bottom-left-radius: 4px;
}

.chatbot-msg.user .chatbot-bubble {
	background:              var(--chatbot-user-bubble);
	color:                   var(--chatbot-user-text);
	border-bottom-right-radius: 4px;
}

/* ── Typing indicator ── */
.chatbot-typing {
	display:     flex;
	align-items: center;
	gap:         5px;
	padding:     12px 14px;
}

.chatbot-typing span {
	width:         7px;
	height:        7px;
	background:    #6b7280;
	border-radius: 50%;
}

/* Animate the typing dots only when motion is allowed; under reduced-motion the
   three dots remain as a static "typing" affordance (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
	.chatbot-typing span {
		animation: chatbot-bounce 1.2s infinite ease-in-out;
	}

	.chatbot-typing span:nth-child(2) { animation-delay: .2s; }
	.chatbot-typing span:nth-child(3) { animation-delay: .4s; }

	@keyframes chatbot-bounce {
		0%, 60%, 100% { transform: translateY(0); }
		30%           { transform: translateY(-6px); }
	}
}

/* ── Input area ── */
#chatbot-input-area {
	padding:      10px 12px;
	border-top:   1px solid var(--chatbot-border);
	display:      flex;
	gap:          8px;
	align-items:  center;
	flex-shrink:  0;
}

#chatbot-input {
	flex:          1;
	padding:       9px 13px;
	border:        1px solid var(--chatbot-border);
	border-radius: 8px;
	font-size:     14px;
	font-family:   inherit;
	outline:       none;
	background:    var(--chatbot-bg);
	color:         var(--chatbot-text);
}

@media (prefers-reduced-motion: no-preference) {
	#chatbot-input { transition: border-color .15s, box-shadow .15s; }
}

/* Visible focus indicator that does not depend on the (configurable) accent
   meeting contrast: a dark ring is always perceivable (WCAG 2.4.7). */
#chatbot-input:focus-visible {
	border-color: var(--chatbot-accent);
	box-shadow:   0 0 0 2px #ffffff, 0 0 0 4px #1a1a1a;
}

#chatbot-send {
	width:         38px;
	height:        38px;
	flex-shrink:   0;
	background:    var(--chatbot-accent);
	color:         var(--chatbot-accent-fg);
	border:        none;
	border-radius: 8px;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
	#chatbot-send { transition: background .15s; }
}

#chatbot-send:hover  { background: var(--chatbot-accent-dark); }

#chatbot-send:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff, 0 0 0 6px #1a1a1a;
}

#chatbot-send:disabled {
	opacity: .5;
	cursor:  not-allowed;
}

/* ── Tool status indicator (shown mid-stream while a tool runs) ── */
.chatbot-bubble.chatbot-tool-status {
	color:       var(--chatbot-muted);
	font-style:  italic;
	font-size:   13px;
}

/* ── Mobile ── */
@media (max-width: 480px) {
	#chatbot-panel {
		right:         0;
		bottom:        0;
		width:         100%;
		height:        100%;
		border-radius: 0;
		border:        none;
	}

	#chatbot-toggle {
		bottom: 16px;
		right:  16px;
	}
}

/* ── In-chat links ────────────────────────────────────────────────────────── */
.chatbot-bubble .chatbot-link {
	color:           var(--chatbot-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight:     500;
	word-break:      break-word;
}

.chatbot-bubble .chatbot-link:hover {
	opacity: 0.8;
}

/* ── Product cards ─────────────────────────────────────────────────────────── */
.chatbot-cards-msg {
	max-width: 100%;
	width:     100%;
}

.chatbot-products {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	width:          100%;
}

.chatbot-card {
	display:       flex;
	gap:           10px;
	padding:       10px;
	border:        1px solid var(--chatbot-border);
	border-radius: 12px;
	background:    #fff;
}

.chatbot-card-img {
	width:         64px;
	height:        64px;
	flex-shrink:   0;
	border-radius: 8px;
	object-fit:    cover;
	background:    var(--chatbot-bot-bubble);
}

.chatbot-card-body {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

.chatbot-card-title {
	font-weight:     600;
	font-size:       14px;
	line-height:     1.3;
	color:           var(--chatbot-text);
	text-decoration: none;
	word-break:      break-word;
}

a.chatbot-card-title:hover {
	color: var(--chatbot-accent);
}

.chatbot-card-price {
	font-size:   13px;
	font-weight: 600;
	color:       var(--chatbot-text);
}

.chatbot-card-price .was {
	margin-right:    6px;
	font-weight:     400;
	color:           var(--chatbot-muted);
	text-decoration: line-through;
}

/* ── Star rating (issue #11) ──────────────────────────────────────────────────
   ★avg (count), shown only when the product has reviews (the element is omitted
   in JS otherwise). The filled overlay is clipped to (avg/5)*100% over a grey
   base so fractional ratings render precisely with just the ★ glyph. */
.chatbot-card-rating {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   12px;
	line-height: 1;
}

.chatbot-card-stars {
	position:       relative;
	display:        inline-block;
	white-space:    nowrap;
	font-size:      13px;
	line-height:    1;
	/* Empty (base) stars colour. */
	color:          #d1d5db;
}

.chatbot-card-stars-empty {
	display: block;
}

.chatbot-card-stars-filled {
	position:    absolute;
	top:         0;
	left:        0;
	overflow:    hidden;
	white-space: nowrap;
	/* #b45309 (amber-700) = 4.8:1 on the white card so the filled stars are not a
	   colour-only signal failing contrast; the numeric "4.5 (24)" text and the
	   aria-label also convey the value (WCAG 1.4.1 / 1.4.11). */
	color:       #b45309;
}

.chatbot-card-rating-text {
	color:       var(--chatbot-muted);
	font-weight: 600;
}

.chatbot-card-stock {
	font-size: 11px;
	color:     #15803d;
}

.chatbot-card-stock.out {
	color: #b91c1c;
}

.chatbot-card-desc {
	font-size:           12px;
	line-height:         1.4;
	color:               var(--chatbot-muted);
	display:             -webkit-box;
	-webkit-line-clamp:  2;
	line-clamp:          2;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

/* ── Variation selector (issue #12) ───────────────────────────────────────────
   A labelled <select> for variable products. The label is a real, associated
   <label> (for/id) so the control has an accessible name; the focus ring matches
   the card buttons' accent-independent dark ring on a white spacer (WCAG 2.4.7). */
.chatbot-card-var-label {
	display:     block;
	margin-top:  5px;
	font-size:   11px;
	font-weight: 600;
	color:       var(--chatbot-muted);
}

.chatbot-card-var-select {
	margin-top:    3px;
	width:         100%;
	max-width:     100%;
	box-sizing:    border-box;
	padding:       5px 8px;
	font-size:     12px;
	line-height:   1.4;
	color:         var(--chatbot-text);
	background:    #fff;
	border:        1px solid var(--chatbot-border);
	border-radius: 7px;
	cursor:        pointer;
}

.chatbot-card-var-select:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff;
}

.chatbot-card-actions {
	display:     flex;
	gap:         8px;
	margin-top:  5px;
}

.chatbot-card-view,
.chatbot-card-add {
	font-size:       12px;
	font-weight:     500;
	padding:         5px 12px;
	border-radius:   7px;
	cursor:          pointer;
	text-decoration: none;
	line-height:     1.4;
}

/* Shared visible focus indicator for the card controls — accent-independent dark
   ring on a white spacer so it is perceivable on any accent (WCAG 2.4.7). */
.chatbot-card-view:focus-visible,
.chatbot-card-add:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff;
}

.chatbot-card-view {
	color:      var(--chatbot-accent);
	background: transparent;
	border:     1px solid var(--chatbot-border);
}

.chatbot-card-view:hover {
	border-color: var(--chatbot-accent);
}

.chatbot-card-add {
	color:      var(--chatbot-accent-fg);
	background: var(--chatbot-accent);
	border:     1px solid var(--chatbot-accent);
}

.chatbot-card-add:hover {
	background: var(--chatbot-accent-dark);
}

.chatbot-card-stock-icon {
	font-weight: 700;
}

/* ── Comparison table (issue #13) ──────────────────────────────────────────────
   A real <table> rendered side-by-side. The scroll wrapper keeps a wide table from
   breaking the narrow chat panel: it scrolls horizontally on small screens and is a
   focusable, labelled region so it is keyboard-scrollable (WCAG 2.1.1 / 1.4.10). */
.chatbot-compare-scroll {
	width:           100%;
	max-width:       100%;
	overflow-x:      auto;
	-webkit-overflow-scrolling: touch;
	border:          1px solid var(--chatbot-border);
	border-radius:   12px;
	background:      #fff;
}

/* Accent-independent dark focus ring so the scrollable region's focus is always
   perceivable (WCAG 2.4.7), matching the card controls. */
.chatbot-compare-scroll:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff;
}

.chatbot-compare {
	border-collapse: collapse;
	width:           100%;
	/* Give each column room; the wrapper scrolls if the total exceeds the panel. */
	min-width:       max-content;
	font-size:       12px;
	line-height:     1.4;
	color:           var(--chatbot-text);
}

/* Caption conveys the table's purpose to AT; visually small and muted. */
.chatbot-compare-caption {
	caption-side:  top;
	text-align:    left;
	padding:       8px 10px 6px;
	font-size:     11px;
	font-weight:   600;
	color:         var(--chatbot-muted);
}

.chatbot-compare th,
.chatbot-compare td {
	padding:       7px 10px;
	text-align:    left;
	vertical-align: top;
	border-bottom: 1px solid var(--chatbot-border);
	/* Keep cells from collapsing too narrow while still allowing wrap on long values. */
	min-width:     84px;
}

/* Column headers (the products) — emphasised, with a subtle fill. The row headers
   (attribute names) sit in the first column, also emphasised. */
.chatbot-compare thead th,
.chatbot-compare-corner {
	background:    var(--chatbot-bot-bubble);
	font-weight:   600;
}

.chatbot-compare-rowhead {
	background:    var(--chatbot-bot-bubble);
	font-weight:   600;
	white-space:   nowrap;
}

.chatbot-compare-name {
	color:           var(--chatbot-text);
	text-decoration: none;
	font-weight:     600;
	word-break:      break-word;
}

a.chatbot-compare-name {
	color: var(--chatbot-accent);
}

a.chatbot-compare-name:hover {
	text-decoration: underline;
}

.chatbot-compare-cell .was {
	margin-right:    6px;
	font-weight:     400;
	color:           var(--chatbot-muted);
	text-decoration: line-through;
}

/* Actions cell: stack the View / Add controls so they stay tappable in a narrow
   column. They reuse the card button styles (.chatbot-card-view / -add). */
.chatbot-compare-actions {
	white-space: normal;
}

.chatbot-compare-actions .chatbot-card-view,
.chatbot-compare-actions .chatbot-card-add {
	display:     inline-block;
	margin:      2px 4px 2px 0;
}

/* ── Reply feedback / thumbs (#50) ────────────────────────────────────────────
   A small toolbar appended under a finalized bot reply: a muted prompt + two real
   toggle buttons (👍/👎). The selected state is conveyed by border weight + a
   background tint AND the aria-pressed state AND which glyph was chosen — never by
   colour alone (WCAG 1.4.1). The muted prompt uses --chatbot-muted (>=4.5:1). */
.chatbot-feedback {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin:      4px 0 2px 2px;
	flex-wrap:   wrap;
}

.chatbot-feedback-prompt,
.chatbot-feedback-status {
	font-size: 12px;
	color:     var(--chatbot-muted);
}

.chatbot-feedback-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       32px;
	min-height:      32px;
	padding:         2px 6px;
	font-size:       14px;
	line-height:     1;
	background:      transparent;
	border:          1px solid var(--chatbot-border);
	border-radius:   7px;
	cursor:          pointer;
}

.chatbot-feedback-btn:hover:not([disabled]) {
	border-color: var(--chatbot-accent);
}

/* Accent-independent dark focus ring on a white spacer — perceivable on any accent
   (matches the card controls, WCAG 2.4.7). */
.chatbot-feedback-btn:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff;
}

/* Chosen rating: heavier accent border + tint. Not colour-alone — the disabled
   state, the aria-pressed value, and the picked glyph also signal the selection. */
.chatbot-feedback-btn.is-selected {
	border-color: var(--chatbot-accent);
	border-width: 2px;
	background:   var(--chatbot-bot-bubble);
}

.chatbot-feedback-btn[disabled] {
	cursor:  default;
	opacity: 1; /* keep contrast — don't grey out the chosen toggle */
}

/* The unpicked button fades once a choice is made so the selection reads clearly. */
.chatbot-feedback-btn[disabled]:not(.is-selected) {
	opacity: .45;
}

/* ── Proactive nudge (issue #65) ──────────────────────────────────────────────
   A small, dismissible card anchored just above the toggle. Shown ONLY when the
   server supplied a grounded value signal; the copy is honest (no urgency) and the
   controls are real, keyboard-operable buttons. */
#chatbot-nudge {
	position:       fixed;
	bottom:         92px;
	right:          24px;
	width:          300px;
	max-width:      calc(100vw - 48px);
	background:     var(--chatbot-bg);
	color:          var(--chatbot-text);
	border:         1px solid var(--chatbot-border);
	border-radius:  var(--chatbot-radius);
	box-shadow:     0 8px 32px rgba(0, 0, 0, .15);
	padding:        14px 16px;
	z-index:        var(--chatbot-z);
}

@media (prefers-reduced-motion: no-preference) {
	#chatbot-nudge {
		animation: chatbot-nudge-in .2s ease-out;
	}
}

@keyframes chatbot-nudge-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.chatbot-nudge-text {
	margin:      0 0 10px;
	font-size:   14px;
	line-height: 1.4;
}

.chatbot-nudge-actions {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.chatbot-nudge-open {
	flex:          1 1 auto;
	background:    var(--chatbot-accent);
	color:         var(--chatbot-accent-fg);
	border:        none;
	border-radius: 8px;
	padding:       8px 12px;
	font-size:     13px;
	font-weight:   600;
	cursor:        pointer;
}

.chatbot-nudge-open:hover { background: var(--chatbot-accent-dark); }

.chatbot-nudge-dismiss {
	flex:          0 0 auto;
	background:    var(--chatbot-bot-bubble);
	color:         var(--chatbot-text);
	border:        1px solid var(--chatbot-border);
	border-radius: 8px;
	width:         32px;
	height:        32px;
	font-size:     14px;
	line-height:   1;
	cursor:        pointer;
}

/* High-contrast, accent-independent focus ring (matches the toggle/feedback
   controls, WCAG 2.4.7 / 2.4.11). */
.chatbot-nudge-open:focus-visible,
.chatbot-nudge-dismiss:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff;
}

@media (max-width: 480px) {
	#chatbot-nudge {
		right:  16px;
		bottom: 88px;
		width:  auto;
		left:   16px;
	}
}

/* ── Voice input/output (issue #64) ───────────────────────────────────────────
   The mic (speech-to-text) and speaker (text-to-speech) controls sit in the input
   row, next to Send. Built by JS only when the merchant enabled voice AND the
   browser supports the relevant Web Speech API — so an unsupported browser simply
   never renders them and text works unchanged. Styled to match Send: same size and
   the same accent-independent dark focus ring (WCAG 2.4.7). The active/recording
   state is conveyed by the accent fill AND the aria-pressed state (set in JS) — never
   by colour alone (WCAG 1.4.1). */
#chatbot-mic,
#chatbot-speak {
	width:           38px;
	height:          38px;
	flex-shrink:     0;
	background:      transparent;
	color:           var(--chatbot-text);
	border:          1px solid var(--chatbot-border);
	border-radius:   8px;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

#chatbot-mic:hover,
#chatbot-speak:hover {
	border-color: var(--chatbot-accent);
}

#chatbot-mic:focus-visible,
#chatbot-speak:focus-visible {
	outline:        2px solid #1a1a1a;
	outline-offset: 2px;
	box-shadow:     0 0 0 4px #ffffff, 0 0 0 6px #1a1a1a;
}

#chatbot-mic:disabled,
#chatbot-speak:disabled {
	opacity: .5;
	cursor:  not-allowed;
}

/* Recording / active: accent fill so the on-state is obvious; the aria-pressed
   attribute carries the same meaning for assistive tech, so the cue is not
   colour-alone. */
#chatbot-mic.is-recording,
#chatbot-speak.is-active {
	background:   var(--chatbot-accent);
	color:        var(--chatbot-accent-fg);
	border-color: var(--chatbot-accent);
}

/* A gentle pulse while recording — purely decorative reinforcement of the on-state,
   and opt-in so it never plays for a reduced-motion user (the reduced-motion catch-all
   below also neutralises it for elements inside the widget root). */
@media (prefers-reduced-motion: no-preference) {
	#chatbot-mic.is-recording {
		animation: chatbot-mic-pulse 1.4s ease-in-out infinite;
	}
}

@keyframes chatbot-mic-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
	50%      { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0); }
}

/* Visually-hidden but screen-reader-available: the polite live region that announces
   voice status (listening / errors). Standard clip pattern. */
.chatbot-sr-only {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

/* ── Reduced motion safety net ────────────────────────────────────────────────
   Non-essential transitions/animations are opt-in via the no-preference queries
   above; this scoped catch-all neutralises anything that slips through (e.g. a
   theme forcing a transition onto these elements) when the user asks to reduce
   motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	#fahad-ai-chatbot-root *,
	#chatbot-toggle,
	#chatbot-panel {
		animation-duration:        .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:       .001ms !important;
		scroll-behavior:           auto !important;
	}
}