/* Revolutionary Chat Bot, frontend styles.
 *
 * The accent color is injected via an inline <style> as --rcb-accent, with
 * three companions computed in PHP (RCB_Plugin::accent_palette()):
 *   --rcb-accent-contrast  text drawn ON the accent (black or white)
 *   --rcb-accent-ink       accent-colored text on white, or dark text when
 *                          the accent is too light to read (gold, yellow)
 *   --rcb-accent-ring      translucent accent for focus shadows
 * The accent itself is only ever a fill, border or underline.
 *
 * Surfaces and text use --rcb-* tokens. When the theme runs a color mode
 * (html[data-color-mode], multipurpose-theme 1.48+) they follow its
 * --dash-mode-* palette, so the panel is readable in light and dark mode.
 */

.rcb-widget,
.rcb-embed {
	--rcb-surface: #fff;
	--rcb-surface-alt: #f7f8fa;
	--rcb-text: #1f2937;
	--rcb-muted: #4b5563;
	--rcb-border: #e5e7eb;
	--rcb-input-border: #9ca3af;
	--rcb-link: var(--rcb-accent-ink, #111827);
}
html[data-color-mode] .rcb-widget,
html[data-color-mode] .rcb-embed {
	--rcb-surface: var(--dash-mode-surface, #fff);
	--rcb-surface-alt: var(--dash-mode-surface-alt, #f7f8fa);
	--rcb-text: var(--dash-mode-text, #1f2937);
	--rcb-muted: var(--dash-mode-muted, #4b5563);
	--rcb-border: var(--dash-mode-border, #e5e7eb);
	--rcb-input-border: var(--dash-mode-muted, #9ca3af);
}
html[data-color-mode="dark"] .rcb-widget,
html[data-color-mode="dark"] .rcb-embed {
	--rcb-surface: var(--dash-mode-surface, #111827);
	--rcb-surface-alt: var(--dash-mode-bg, #0b1120);
	--rcb-text: var(--dash-mode-text, #f3f4f6);
	--rcb-muted: var(--dash-mode-muted, #cbd5e1);
	--rcb-border: var(--dash-mode-border, #374151);
	--rcb-input-border: var(--dash-mode-muted, #6b7280);
	/* The accent may be dark (fails on a dark panel), so links in dark mode
	   use the panel's own text color with the accent as the underline. */
	--rcb-link: var(--rcb-text);
}

.rcb-widget {
	position: fixed;
	bottom: 20px;
	z-index: 99999;
	/* Match the active theme's body font via the suite font contract. */
	font-family: var(--rev-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
.rcb-widget.rcb-pos-br { right: 20px; }
.rcb-widget.rcb-pos-bl { left: 20px; }

/* Keep clear of the reCAPTCHA badge -------------------------------------------
   Google fixes .grecaptcha-badge to the bottom right of every page that loads
   reCAPTCHA v3 (bottom: 14px, 60px tall, so it owns 14px to 74px up from the
   bottom edge) and it expands leftward on hover. A bottom-right launcher sits
   exactly on top of it: measured on revolutionaryrmm.com 2026-10-02, launcher
   x=1360..1420 over badge x=1370..1626 at 1440px wide, and the same overlap at
   390px. The badge is a Google term of service item on those sites, so it must
   stay readable.

   Bottom left is the default and avoids this entirely. This rule covers the
   site that chooses bottom right anyway: lift the widget above the badge, and
   give the panel back the height the lift costs it so it still fits a short
   viewport. Scoped with :has() so a site without reCAPTCHA is untouched; where
   :has() is unsupported the default corner already keeps the two apart. */
body:has(.grecaptcha-badge) .rcb-widget.rcb-pos-br { bottom: 84px; }
body:has(.grecaptcha-badge) .rcb-widget.rcb-pos-br .rcb-panel { max-height: calc(100vh - 184px); }
body:has(.grecaptcha-badge) .rcb-ticket-result.rcb-pos-br { bottom: 84px; }

/* Launcher (round icon button) -------------------------------------------- */
.rcb-launcher {
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px;
	background: var(--rcb-accent, #2563eb);
	color: var(--rcb-accent-contrast, #fff);
	border: 0;
	border-radius: 50%;
	padding: 0; line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rcb-launcher:hover { filter: brightness(1.05); box-shadow: 0 10px 28px rgba(0,0,0,.22); transform: scale(1.05); }
.rcb-launcher:active { transform: scale(.96); }
.rcb-launcher:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rcb-surface, #fff), 0 0 0 6px var(--rcb-accent-ink, #111827); }
.rcb-launcher .rcb-launcher-icon.dashicons { font-size: 30px; width: 30px; height: 30px; }
/* Persona avatar on the launcher. The button stays 60px, so the 44px touch
   target is untouched whatever the image is; the image is squared off with
   object-fit so a non-square upload is cropped, never stretched. */
.rcb-launcher .rcb-launcher-avatar {
	width: 38px; height: 38px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: transparent;
}
.rcb-widget.is-open .rcb-launcher { display: none; }

/* Panel ------------------------------------------------------------------- */
.rcb-widget .rcb-panel {
	display: none;
	position: absolute;
	bottom: 0;
	width: 400px;
	max-width: calc(100vw - 40px);
	height: 580px;
	max-height: calc(100vh - 120px);
}
.rcb-widget.rcb-pos-br .rcb-panel { right: 0; }
.rcb-widget.rcb-pos-bl .rcb-panel { left: 0; }
.rcb-widget.is-open .rcb-panel { display: flex; }

.rcb-panel {
	flex-direction: column;
	background: var(--rcb-surface, #fff);
	color: var(--rcb-text, #1f2937);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
	border: 1px solid var(--rcb-border, rgba(0,0,0,.06));
}

/* Resize grip: the free top corner of the floating window (top-left when the
   window is anchored right, top-right when anchored left). Hidden on phones,
   where the window already fills the screen. */
.rcb-resize {
	position: absolute; top: 0; left: 0; z-index: 2;
	width: 28px; height: 28px;
	padding: 0; border: 0; background: transparent;
	color: var(--rcb-accent-contrast, #fff);
	cursor: nwse-resize;
	touch-action: none;
	border-radius: 14px 0 0 0;
}
.rcb-widget.rcb-pos-bl .rcb-resize { left: auto; right: 0; cursor: nesw-resize; border-radius: 0 14px 0 0; }
.rcb-resize::before {
	content: "";
	position: absolute; top: 7px; left: 7px;
	width: 13px; height: 13px;
	background:
		linear-gradient(135deg, transparent 0 42%, currentColor 42% 52%, transparent 52% 100%),
		linear-gradient(135deg, transparent 0 66%, currentColor 66% 76%, transparent 76% 100%);
	opacity: .8;
}
.rcb-widget.rcb-pos-bl .rcb-resize::before { left: auto; right: 7px; transform: scaleX(-1); }
.rcb-resize:hover::before { opacity: 1; }
.rcb-resize:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* Keep the grip clear of the header content on desktop. */
@media (min-width: 481px) {
	.rcb-widget.rcb-pos-br .rcb-panel-head { padding-left: 36px; }
	.rcb-widget.rcb-pos-bl .rcb-panel-head { padding-right: 36px; }
}
@media (max-width: 480px) {
	.rcb-resize { display: none; }
}

/* Inline (shortcode/block) embeds render the panel in flow. */
.rcb-embed { margin: 1.5em 0; }
.rcb-embed-title { margin: 0 0 .5em; }
.rcb-embed .rcb-panel {
	display: flex;
	position: static;
	width: 100%;
	max-width: 480px;
	height: 480px;
}

.rcb-panel-head {
	display: flex; align-items: center; gap: 10px;
	background: var(--rcb-accent, #2563eb);
	color: var(--rcb-accent-contrast, #fff);
	padding: 8px 8px 8px 16px;
	min-height: 56px;
}
.rcb-panel-head { padding-top: 10px; padding-bottom: 10px; }
.rcb-panel-avatar.dashicons { font-size: 22px; width: 22px; height: 22px; flex: 0 0 auto; }
.rcb-panel-avatar-img {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex: 0 0 auto;
	/* A hairline so a dark avatar still has an edge on a dark accent header. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Name and the automated-assistant line stack beside the avatar. min-width:0
   lets a long name truncate instead of pushing the close button off the
   header at 390px. */
.rcb-panel-identity { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; gap: 1px; }
.rcb-panel-title {
	font-size: 15px; font-weight: 700; line-height: 1.2;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The disclosure. Small, but full-opacity weight-600 text on the accent, not a
   faded caption: a visitor has to be able to read it. */
.rcb-panel-role {
	font-size: 11px; font-weight: 600; line-height: 1.3;
	letter-spacing: .02em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcb-panel-close {
	background: transparent; border: 0; color: inherit;
	font-size: 26px; line-height: 1; cursor: pointer;
	opacity: .85; padding: 0;
	min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
}
.rcb-panel-close:hover { opacity: 1; }
.rcb-panel-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

.rcb-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex; flex-direction: column; gap: 10px;
	background: var(--rcb-surface-alt, #f7f8fa);
}
.rcb-msg { display: flex; }
.rcb-msg-user { justify-content: flex-end; }
/* A bot message is a column: the bubble, then anything that belongs under it
   (the feedback prompt, the fallback offers). */
.rcb-msg-bot { flex-direction: column; align-items: flex-start; }
.rcb-bubble {
	max-width: 80%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 15px; line-height: 1.5;
	word-wrap: break-word;
}
.rcb-msg-bot .rcb-bubble {
	background: var(--rcb-surface, #fff);
	color: var(--rcb-text, #1f2937);
	border: 1px solid var(--rcb-border, #e5e7eb);
	border-bottom-left-radius: 4px;
}
.rcb-msg-user .rcb-bubble {
	background: var(--rcb-accent, #2563eb);
	color: var(--rcb-accent-contrast, #fff);
	border-bottom-right-radius: 4px;
}
.rcb-bubble p { margin: 0 0 .5em; }
.rcb-bubble p:last-child { margin-bottom: 0; }
.rcb-bubble a { color: inherit; text-decoration: underline; }
/* Links in bot replies: readable ink, the accent as the underline only. */
.rcb-msg-bot .rcb-bubble a {
	color: var(--rcb-link, #111827);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--rcb-accent, #2563eb);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.rcb-msg-bot .rcb-bubble a:hover { text-decoration-thickness: 3px; }
.rcb-bubble a:focus-visible { outline: 2px solid var(--rcb-link, #111827); outline-offset: 2px; border-radius: 2px; }

/* Waiting indicator.
 *
 * Deliberately NOT a "typing" animation. Three bouncing dots are the web's
 * shorthand for a person at a keyboard, and this bot is not one. The bubble
 * says what is actually happening, the bot is looking through the answers, and
 * it is shown only while the request is really in flight: there is no
 * artificial delay anywhere in the widget. */
.rcb-searching .rcb-bubble {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--rcb-muted, #4b5563);
	font-style: normal;
}
.rcb-searching-label { font-size: 13px; }
.rcb-searching-pulse { display: inline-flex; gap: 3px; }
.rcb-searching-pulse i {
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--rcb-accent, #2563eb);
	opacity: .45;
	animation: rcb-pulse 1.4s infinite ease-in-out both;
}
.rcb-searching-pulse i:nth-child(2) { animation-delay: .18s; }
.rcb-searching-pulse i:nth-child(3) { animation-delay: .36s; }
@keyframes rcb-pulse {
	0%, 70%, 100% { opacity: .35; }
	35% { opacity: 1; }
}

/* Answer feedback (was this helpful?) */
.rcb-feedback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0 2px 2px;
	font-size: 13px;
	color: var(--rcb-muted, #4b5563);
}
.rcb-feedback-label { color: var(--rcb-muted, #4b5563); }
.rcb-feedback-btn {
	border: 1px solid var(--rcb-border, #e5e7eb);
	background: var(--rcb-surface, #fff);
	border-radius: 999px;
	padding: 0 14px;
	min-height: 44px; min-width: 44px;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	color: var(--rcb-text, #374151);
}
.rcb-feedback-btn:hover { border-color: var(--rcb-accent, #2563eb); box-shadow: inset 0 -3px 0 var(--rcb-accent, #2563eb); }
.rcb-feedback-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rcb-accent-ring, rgba(17,24,39,.25)); border-color: var(--rcb-accent-ink, #111827); }

/* Suggestion chips */
.rcb-suggestions {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 10px 12px;
	background: var(--rcb-surface-alt, #f7f8fa);
	border-top: 1px solid var(--rcb-border, #eceef1);
}
/* Chips: the accent is the border; the label stays in readable text color. */
.rcb-chip {
	background: var(--rcb-surface, #fff);
	border: 2px solid var(--rcb-accent, #2563eb);
	color: var(--rcb-text, #1f2937);
	border-radius: 999px;
	padding: 6px 14px;
	min-height: 44px;
	font-size: 13px; font-weight: 600; line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.rcb-chip:hover { background: var(--rcb-accent, #2563eb); color: var(--rcb-accent-contrast, #fff); }
.rcb-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rcb-accent-ring, rgba(17,24,39,.25)); }

/* Composer */
.rcb-form {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--rcb-border, #eceef1);
	background: var(--rcb-surface, #fff);
}
.rcb-input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	border: 1px solid var(--rcb-input-border, #9ca3af);
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	outline: none;
	color: var(--rcb-text, #1f2937);
	background: var(--rcb-surface, #fff);
}
.rcb-input::placeholder { color: var(--rcb-muted, #4b5563); opacity: 1; }
.rcb-input:focus { border-color: var(--rcb-accent-ink, #111827); box-shadow: 0 0 0 3px var(--rcb-accent-ring, rgba(17,24,39,.25)); }
.rcb-send {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border: 0; border-radius: 50%;
	background: var(--rev-btn-bg, var(--rcb-accent, #2563eb));
	color: var(--rev-btn-color, var(--rcb-accent-contrast, #fff));
	box-shadow: var(--rev-btn-shadow, none);
	transition: var(--rev-btn-transition, filter .15s ease, transform .15s ease, box-shadow .15s ease);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.rcb-send:hover {
	background: var(--rev-btn-bg-hover, var(--rcb-accent, #2563eb));
	box-shadow: var(--rev-btn-shadow-hover, var(--rev-btn-shadow, none));
	filter: brightness(1.05);
	transform: translateY(var(--rev-btn-lift, 0));
}
.rcb-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rcb-surface, #fff), 0 0 0 5px var(--rcb-accent-ink, #111827); }
.rcb-send:disabled { opacity: .5; cursor: default; }
.rcb-send .dashicons { font-size: 20px; width: 20px; height: 20px; }

/* A visitor who has asked their system for less motion gets none of the
   widget's: no launcher scale on hover or press, no pulsing indicator, no
   transitions. Everything still changes state, it just changes instantly. */
@media (prefers-reduced-motion: reduce) {
	.rcb-launcher,
	.rcb-chip,
	.rcb-send {
		transition: none;
	}
	.rcb-launcher:hover,
	.rcb-launcher:active,
	.rcb-send:hover {
		transform: none;
	}
	.rcb-searching-pulse i {
		animation: none;
		opacity: .55;
	}
}

@media (max-width: 480px) {
	.rcb-widget .rcb-panel {
		width: calc(100vw - 24px);
		height: calc(100vh - 100px);
	}
	.rcb-widget.rcb-pos-br { right: 12px; }
	.rcb-widget.rcb-pos-bl { left: 12px; }
	/* The badge keeps its 14px offset on a phone, so the lift and the height it
	   costs the panel carry over to the narrow layout too. */
	body:has(.grecaptcha-badge) .rcb-widget.rcb-pos-br .rcb-panel { max-height: calc(100vh - 164px); }
	/* At 390px the panel is 366px wide. The avatar gives up 4px rather than the
	   disclosure line, which never shrinks or wraps away. */
	.rcb-panel-avatar-img { width: 32px; height: 32px; }
	.rcb-panel-head { padding-left: 12px; gap: 8px; }
}

/* ── Fallback offers: open a ticket, book a call ─────────────────────────
 * Rendered by the server into the bot's reply when it had no answer. Both
 * are ordinary HTML, a link and a form that posts the normal way, so they
 * keep working with JavaScript off once they are on screen. Every target is
 * at least 44px tall.
 * ────────────────────────────────────────────────────────────────────── */
.rcb-offers {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0 44px;
	max-width: 100%;
}
.rcb-offer-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 2px solid var(--rcb-accent, #2563eb);
	border-radius: 999px;
	background: var(--rcb-surface, #fff);
	color: var(--rcb-link, #111827);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.rcb-offer-link:hover { background: var(--rcb-accent, #2563eb); color: var(--rcb-accent-contrast, #fff); }
.rcb-offer-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rcb-accent-ring, rgba(17,24,39,.25)); }
.rcb-offer-form {
	border: 1px solid var(--rcb-input-border, #9ca3af);
	border-radius: 14px;
	padding: 12px;
	background: var(--rcb-surface, #fff);
}
.rcb-offer-label {
	display: block;
	margin: 0 0 8px;
	color: var(--rcb-text, #1f2937);
	font-size: 13px;
	font-weight: 600;
}
.rcb-offer-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rcb-offer-email {
	flex: 1 1 160px;
	min-width: 0;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--rcb-input-border, #9ca3af);
	border-radius: 999px;
	background: var(--rcb-surface, #fff);
	color: var(--rcb-text, #1f2937);
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	outline: none;
}
.rcb-offer-email:focus { border-color: var(--rcb-accent-ink, #111827); box-shadow: 0 0 0 3px var(--rcb-accent-ring, rgba(17,24,39,.25)); }
.rcb-offer-submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--rev-btn-bg, var(--rcb-accent, #2563eb));
	color: var(--rev-btn-color, var(--rcb-accent-contrast, #fff));
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.rcb-offer-submit:hover { filter: brightness(1.05); }
.rcb-offer-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rcb-surface, #fff), 0 0 0 5px var(--rcb-accent-ink, #111827); }
/* Honeypot: off screen rather than display:none, which some bots skip. */
.rcb-offer-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ── What happened after a ticket was submitted ──────────────────────────
 * Printed by the server on the page the visitor came back to, so it reads
 * with JavaScript off. Dismiss is a plain link back to the same page.
 * ────────────────────────────────────────────────────────────────────── */
.rcb-ticket-result {
	position: fixed;
	bottom: 96px;
	z-index: 99998;
	max-width: min(360px, calc(100vw - 32px));
	padding: 14px 16px;
	border-radius: 14px;
	border-left: 4px solid var(--rcb-accent, #2563eb);
	background: var(--rcb-surface, #fff);
	color: var(--rcb-text, #1f2937);
	box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
	font-size: 14px;
	line-height: 1.45;
}
.rcb-ticket-result.rcb-pos-br { right: 20px; }
.rcb-ticket-result.rcb-pos-bl { left: 20px; }
.rcb-ticket-result.is-warn { border-left-color: #b45309; }
.rcb-ticket-result p { margin: 0 0 8px; }
.rcb-ticket-result-close {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--rcb-link, #111827);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--rcb-accent, #2563eb);
	text-underline-offset: 3px;
}