/**
 * Chatbot Drawer — Minimalist Toolkit Aesthetic
 *
 * Neutral palette, sans-serif, thin borders, square-ish corners.
 * Single accent color exposed via --hr-chat-accent so customer sites
 * can theme it from their own CSS.
 *
 * Desktop: fixed right-edge tab + 420px slide-in drawer.
 * Mobile: FAB + full-screen slide-up sheet.
 *
 * @package HRAIEnhancer
 */

/* ==========================================================================
   Design Tokens
   Override --hr-chat-accent from a customer theme to brand the chatbot.
   ========================================================================== */

:root {
	--hr-chat-accent: #2C2C2C;
	--hr-chat-accent-hover: #4a4a4a;
	--hr-chat-accent-soft: rgba(44, 44, 44, 0.06);
	--hr-chat-accent-ring: rgba(44, 44, 44, 0.18);

	--hr-chat-bg: #ffffff;
	--hr-chat-bg-subtle: #f6f6f6;
	--hr-chat-text: #1a1a1a;
	--hr-chat-text-muted: #6b6b6b;
	--hr-chat-text-faint: #9a9a9a;
	--hr-chat-border: #e5e5e5;
	--hr-chat-border-strong: #cccccc;
	/* 3.45:1 on white — the WCAG 1.4.11 floor for a control whose only
	   boundary is a 1px border. border-strong (#ccc) measures 1.6:1 and
	   stays for dividers; ghost buttons and bare inputs take this one. */
	--hr-chat-border-control: #8a8a8a;

	--hr-chat-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

	--hr-chat-radius: 2px;
	--hr-chat-radius-pill: 999px;

	--hr-chat-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	--hr-chat-shadow-overlay: -8px 0 24px rgba(0, 0, 0, 0.06);
}

/* Launcher/drawer redesign tokens (v1.79) — scoped to the widget mounts, NOT
   :root, so host pages never see them and host :root rules can't collide.
   Server-side settings override these via the same scoped selector list
   (Plugin.php inline CSS). The -soft RGBA companions are pre-derived because
   arbitrary hex custom properties can't be alpha'd portably; color-mix()
   upgrades them where supported. */
.hr-chat-tab,
.hr-chat-drawer {
	--hr-chat-tab-g1: #5B4FE8;
	--hr-chat-tab-g2: #2E6BE6;
	--hr-chat-tab-g1-soft: rgba(91, 79, 232, 0.30);
	--hr-chat-tab-g2-soft: rgba(46, 107, 230, 0.30);
	--hr-chat-spec: #9FBAFF;
	--hr-chat-spec-soft: rgba(159, 186, 255, 0.55);
	--hr-chat-tab-shadow-color: rgba(46, 107, 230, 0.35);

	/* Orb trios (v1.81) — wide-hue triples derived from g1/g2 in OKLCH.
	   Plugin.php derives per-site values server-side and overrides these on
	   the same mount list; the hexes below are the default-palette results.
	   Two trios on purpose: the TAB trio is lightness-lifted so the blobs
	   screen-blend over the gradient body like light; the THINKING trio is
	   pinned to a calm equal-lightness band (~0.63-0.71 oklch) — with uneven
	   lightness the sectors read as bright rotating blades (spin-cycle),
	   with even lightness hue does the mixing and it reads as fluid. */
	--hr-chat-orb-c1: #7C7EFE;
	--hr-chat-orb-c2: #16BAC5;
	--hr-chat-orb-c3: #FB63E3;
	--hr-chat-orb-t1: #8184FF;
	--hr-chat-orb-t2: #15B9B5;
	--hr-chat-orb-t3: #E5349E;

	--hr-chat-drawer-w: 420px;
	--hr-chat-drawer-h: clamp(400px, 70vh, 700px);
	--hr-chat-radius-panel: 16px;
	--hr-chat-radius-tab: 34px;
	/* Interior language (round 2): bubbles and controls speak the panel's
	   rounded dialect, not the square host-toolkit --hr-chat-radius. */
	--hr-chat-radius-bubble: 16px;
	--hr-chat-radius-ctl: 12px;
	--hr-chat-anchor-offset: 0px;
	--hr-chat-tab-overlap: 2px;

	/* Shared motion tokens — tab travel and drawer slide MUST use the same
	   pair so the junction never shears. Close is deliberately faster. */
	--hr-chat-open-dur: 0.4s;
	--hr-chat-open-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--hr-chat-close-dur: 0.3s;
	--hr-chat-close-ease: cubic-bezier(0.33, 0, 0.2, 1);
}

@supports (height: 1svh) {
	.hr-chat-tab,
	.hr-chat-drawer {
		--hr-chat-drawer-h: clamp(400px, 70svh, 700px);
	}
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.hr-chat-tab,
	.hr-chat-drawer {
		--hr-chat-tab-g1-soft: color-mix(in srgb, var(--hr-chat-tab-g1) 30%, transparent);
		--hr-chat-tab-g2-soft: color-mix(in srgb, var(--hr-chat-tab-g2) 30%, transparent);
		--hr-chat-spec-soft: color-mix(in srgb, var(--hr-chat-spec) 55%, transparent);
		--hr-chat-tab-shadow-color: color-mix(in srgb, var(--hr-chat-tab-g2) 35%, transparent);
	}
}

/* Scoped baseline reset — the widget ships to arbitrary host themes.
   Covers pseudo-elements; launcher-critical geometry gets !important where
   common host rules (button { overflow:hidden }, global box-sizing) would
   otherwise amputate the outline tails or shift the junction math. */
.hr-chat-tab, .hr-chat-tab *, .hr-chat-tab *::before, .hr-chat-tab *::after,
.hr-chat-drawer, .hr-chat-drawer *, .hr-chat-drawer *::before, .hr-chat-drawer *::after {
	box-sizing: border-box;
}

.hr-chat-tab {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: var(--hr-chat-sans);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
}

/* SVG survival — host themes commonly ship `path { fill: … !important }`.
   Scoped + !important so every widget icon keeps its intended paint.
   #239: custom operator icons are exempt (--custom) — a branded multi-color
   mark must keep its own paint, not get flattened to currentColor. */
.hr-chat-tab .hr-chat-tab-icon:not(.hr-chat-tab-icon--custom) svg,
.hr-chat-tab .hr-chat-tab-icon:not(.hr-chat-tab-icon--custom) svg path {
	fill: currentColor !important;
	stroke: none !important;
}

.hr-chat-close-btn svg, .hr-chat-close-btn svg * ,
.hr-chat-mic-btn svg, .hr-chat-mic-btn svg *,
.hr-chat-send-btn svg, .hr-chat-send-btn svg *,
.hr-chat-handoff-btn svg, .hr-chat-handoff-btn svg * {
	fill: none !important;
	stroke: currentColor !important;
}

/* Pre-reveal state — both launchers are injected with this class so nothing
   flashes or enters the tab order before the intro state machine runs.
   visibility:hidden also removes focusability. */
.hr-chat-hidden {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Transition suppressor for style-commit snaps (set origin state, force
   layout, then animate to target on the next frame). */
.hr-chat-no-transition {
	transition: none !important;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes hrChatFadeInUp {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hrChatTypingPulse {
	0%, 80%, 100% { opacity: 0.25; }
	40%           { opacity: 0.9; }
}

@keyframes hrChatMicPulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--hr-chat-accent-ring); }
	50%      { box-shadow: 0 0 0 6px transparent; }
}

@keyframes hrChatSpin {
	to { transform: rotate(360deg); }
}

@keyframes hrChatPreloaderDots {
	0%, 20%   { content: ''; }
	40%       { content: '.'; }
	60%       { content: '..'; }
	80%, 100% { content: '...'; }
}

/* ==========================================================================
   1. Desktop Tab — Collapsed Trigger
   ========================================================================== */

.hr-chat-tab {
	position: fixed;
	right: 0;
	bottom: clamp(96px, calc(25% + var(--hr-chat-anchor-offset)), calc(100% - 180px));
	/* Eli's round-2 mockup: tighter semicircular bulge, icon-dominant
	   (icon ≈ 73% of the protrusion). Radius token = height/2. */
	width: 52px;
	height: 68px;
	background: transparent;
	color: #fff;
	border: none;
	border-radius: var(--hr-chat-radius-tab) 0 0 var(--hr-chat-radius-tab);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 999970;
	padding: 0;
	/* The tooltip is a child of the tab but sits fully outside its box
	   (right: calc(100% + 12px)); common host `button { overflow: hidden }`
	   rules would amputate it. Still load-bearing after the outline removal
	   in v1.112 — the tails were never the only reason. */
	overflow: visible !important;
	/* Entrance + open-travel live on the OUTER node (transform/opacity only);
	   hover/press/attention live on .hr-chat-tab-inner — no property contention. */
	transition: transform var(--hr-chat-close-dur) var(--hr-chat-close-ease),
	            opacity 0.3s ease;
}

/* Entrance origin — off the page edge. Mirrored variant for left placement. */
.hr-chat-tab.hr-chat-pre-enter {
	transform: translateX(calc(100% + 12px));
	opacity: 0;
}

.hr-chat-tab.hr-chat-pre-enter.hr-chat-enter-left {
	transform: translateX(calc(-100% - 12px));
}

/* Slide-in entrance (450ms decelerating; spring upgrade below). */
.hr-chat-tab.hr-chat-entering {
	transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
	            opacity 0.45s ease-out;
}

/* Tab rides the drawer's edge when open, overlapping the panel border by
   --hr-chat-tab-overlap so the 1px gradient border + antialiasing never
   ghost through the junction. Same motion tokens as the drawer. */
.hr-chat-tab.hr-chat-tab-open {
	transform: translateX(calc(-1 * (var(--hr-chat-drawer-w) - var(--hr-chat-tab-overlap))));
	transition: transform var(--hr-chat-open-dur) var(--hr-chat-open-ease),
	            opacity 0.3s ease;
}

.hr-chat-tab.hr-chat-tab-open.hr-chat-enter-left {
	transform: translateX(calc(var(--hr-chat-drawer-w) - var(--hr-chat-tab-overlap)));
}

@supports (transition-timing-function: linear(0, 1)) {
	.hr-chat-tab.hr-chat-entering {
		transition-timing-function: linear(0, 0.008 2.4%, 0.24 9.8%, 0.62 20.4%, 0.874 31.4%, 0.975 42%, 1.008 56%, 1 100%), ease-out;
	}
	.hr-chat-tab.hr-chat-tab-open {
		transition-timing-function: linear(0, 0.19 8%, 0.55 18%, 0.85 30%, 1.003 48%, 1.005 56%, 1 74%, 1 100%), ease;
	}
}

/* Gradient body — hover/press/highlight all happen here, never on the
   positioned outer node. */
.hr-chat-tab-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/* Round-3 hover (no scale): the gradient body overhangs the page edge by
	   6px (viewport clips it), so the hover slide-out never opens a gap at
	   the edge. Left placement mirrors via Plugin.php inline CSS. */
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--hr-chat-tab-g1) 0%, var(--hr-chat-tab-g2) 100%);
	border-radius: inherit;
	overflow: hidden;
	box-shadow: 0 4px 20px var(--hr-chat-tab-shadow-color);
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

/* Static highlight layer — hover "brightens" by fading THIS in; animating
   filter is banned (paint cost). */
.hr-chat-tab-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 65%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease-out;
}

/* Ambient orb (v1.81) — three chromatic blobs + one depth layer drifting
   under the icon, clipped for free by .hr-chat-tab-inner's overflow:hidden.
   Strictly compositor-only: translate/scale/rotate, no filter (the ban above
   stands), blend modes composite on the GPU. Each blob runs two perpendicular
   oscillators on non-harmonic periods (a Lissajous wander) over a slow global
   rotation; overlaps screen-blend so the trio mixes like light. Wake (hover /
   focus / .hr-chat-tab-wake from JS) brightens here; the accompanying
   SPEED-UP lives in chatbot.js via Animation.updatePlaybackRate(), which
   preserves currentTime — a duration change would jump the layers. */
.hr-chat-tab-orb {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.82;
	transition: opacity 0.9s ease;
	animation: hrChatOrbCurrent 40s linear infinite;
}

.hr-chat-tab-orb i,
.hr-chat-tab-orb b {
	position: absolute;
	display: block;
}

/* Oversized so the wander never exposes a corner. */
.hr-chat-tab-orb i { inset: -50%; }

.hr-chat-tab-orb b {
	inset: 0;
	mix-blend-mode: screen;
}

.hr-chat-tab-orb i:nth-child(1) { animation: hrChatOrbX1 12s ease-in-out infinite alternate; }
.hr-chat-tab-orb i:nth-child(2) { animation: hrChatOrbX2 14.5s ease-in-out infinite alternate; }
.hr-chat-tab-orb i:nth-child(3) { animation: hrChatOrbX3 18s ease-in-out infinite alternate; }
.hr-chat-tab-orb i:nth-child(4) { animation: hrChatOrbX4 15.5s ease-in-out infinite alternate; }

/* Off-centre gradient origins keep the overlap seams (where the mixing
   happens) travelling with the wander. */
.hr-chat-tab-orb i:nth-child(1) b {
	background: radial-gradient(circle at 32% 34%, var(--hr-chat-orb-c1) 0%, transparent 62%);
	animation: hrChatOrbY1 17s ease-in-out infinite alternate;
}

.hr-chat-tab-orb i:nth-child(2) b {
	background: radial-gradient(circle at 66% 60%, var(--hr-chat-orb-c2) 0%, transparent 58%);
	animation: hrChatOrbY2 10.5s ease-in-out infinite alternate;
}

.hr-chat-tab-orb i:nth-child(3) b {
	background: radial-gradient(circle at 55% 28%, var(--hr-chat-orb-c3) 0%, transparent 55%);
	animation: hrChatOrbY3 13s ease-in-out infinite alternate;
}

/* Depth layer: specular kiss + shading, normal blend, painted last so it
   sits over the colour mix. */
.hr-chat-tab-orb i:nth-child(4) b {
	mix-blend-mode: normal;
	background:
		radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
		radial-gradient(circle at 60% 75%, rgba(0, 0, 0, 0.38) 0%, transparent 58%);
	animation: hrChatOrbY4 11.5s ease-in-out infinite alternate;
}

.hr-chat-tab:hover .hr-chat-tab-orb,
.hr-chat-tab:focus-visible .hr-chat-tab-orb,
.hr-chat-tab.hr-chat-tab-wake .hr-chat-tab-orb {
	opacity: 1;
}

@keyframes hrChatOrbCurrent { to { transform: rotate(360deg); } }
@keyframes hrChatOrbX1 { from { transform: translate3d(-20%, 0, 0); }    to { transform: translate3d(17.5%, 0, 0); } }
@keyframes hrChatOrbX2 { from { transform: translate3d(16.25%, 0, 0); }  to { transform: translate3d(-18.75%, 0, 0); } }
@keyframes hrChatOrbX3 { from { transform: translate3d(-11.25%, 0, 0); } to { transform: translate3d(21.25%, 0, 0); } }
@keyframes hrChatOrbX4 { from { transform: translate3d(13.75%, 0, 0); }  to { transform: translate3d(-16.25%, 0, 0); } }
@keyframes hrChatOrbY1 { from { transform: translate3d(0, -16.25%, 0) scale(0.92); } to { transform: translate3d(0, 18.75%, 0) scale(1.18); } }
@keyframes hrChatOrbY2 { from { transform: translate3d(0, 20%, 0) scale(1.15); }     to { transform: translate3d(0, -15%, 0) scale(0.90); } }
@keyframes hrChatOrbY3 { from { transform: translate3d(0, -18.75%, 0) scale(1.05); } to { transform: translate3d(0, 13.75%, 0) scale(0.85); } }
@keyframes hrChatOrbY4 { from { transform: translate3d(0, 15%, 0) scale(1.08); }     to { transform: translate3d(0, -12.5%, 0) scale(0.90); } }

/* Hover: the bulge slides out from the edge (the 6px overhang keeps the
   edge covered) + shadow deepen + highlight fade-in. No scale. */
.hr-chat-tab:hover .hr-chat-tab-inner {
	transform: translateX(-4px);
	box-shadow: 0 6px 26px var(--hr-chat-tab-shadow-color);
}

.hr-chat-tab:hover .hr-chat-tab-inner::after {
	opacity: 0.12;
}

/* Press: settle halfway back with a flattened shadow. */
.hr-chat-tab:active .hr-chat-tab-inner {
	transform: translateX(-2px);
	box-shadow: 0 2px 10px var(--hr-chat-tab-shadow-color);
	transition-duration: 0.1s;
}

/* Open state: the tab rides the drawer junction — kill the overhang (it
   would paint a gradient strip OVER the panel edge; tab z 999970 > drawer
   999950) and pin the slide so hover can't crack the junction. The button
   box overlaps the panel by --hr-chat-tab-overlap; pulling the inner back
   to overlap-1px leaves exactly 1px of gradient over the panel's 1px
   border — border ghost covered, no visible protrusion (round 4). */
.hr-chat-tab.hr-chat-tab-open .hr-chat-tab-inner {
	right: calc(var(--hr-chat-tab-overlap) - 1px);
}

.hr-chat-tab.hr-chat-tab-open:hover .hr-chat-tab-inner,
.hr-chat-tab.hr-chat-tab-open:active .hr-chat-tab-inner {
	transform: none;
}

.hr-chat-tab:focus-visible {
	outline: 2px solid var(--hr-chat-spec);
	outline-offset: 3px;
}

.hr-chat-tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	/* Round-3: slight optical shift TOWARD the page edge. */
	margin-left: 2px;
	/* Must out-rank the absolutely-positioned orb in paint order. */
	position: relative;
	z-index: 1;
}

.hr-chat-tab-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* #239 — custom raster icon: contain inside the 34px icon box so any
   aspect ratio sits centered without distortion. */
.hr-chat-tab-icon .hr-chat-tab-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ----- Tab Tooltip ----- */

.hr-chat-tab-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
	background: var(--hr-chat-text);
	color: #fff;
	padding: 8px 12px;
	border-radius: var(--hr-chat-radius);
	font-family: var(--hr-chat-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	width: max-content;
	max-width: 240px;
	box-shadow: var(--hr-chat-shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.hr-chat-tab-tooltip::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-width: 5px 0 5px 6px;
	border-style: solid;
	border-color: transparent transparent transparent var(--hr-chat-text);
}

/* Hover-show is opt-in per site settings (v1.82) — JS stamps
   .hr-chat-tooltip-hover on the tab when enabled. Keyboard focus keeps the
   tooltip unconditionally (accessible name reinforcement). */
.hr-chat-tab.hr-chat-tooltip-hover:hover .hr-chat-tab-tooltip,
.hr-chat-tab:focus-visible .hr-chat-tab-tooltip,
.hr-chat-tab.hr-chat-tab-tooltip-auto .hr-chat-tab-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.hr-chat-tab.hr-chat-tab-open .hr-chat-tab-tooltip {
	display: none;
}

/* ==========================================================================
   2. Desktop Drawer
   ========================================================================== */

.hr-chat-drawer {
	position: fixed;
	right: 0;
	bottom: clamp(16px, calc(10% + var(--hr-chat-anchor-offset)), calc(100vh - var(--hr-chat-drawer-h) - 16px));
	transform: translateX(100%);
	width: var(--hr-chat-drawer-w);
	height: var(--hr-chat-drawer-h);
	/* 1px gradient border with radius: double-background (border-image can't
	   round corners; masks deliberately avoided on the drawer). */
	background: linear-gradient(var(--hr-chat-bg), var(--hr-chat-bg)) padding-box,
	            linear-gradient(165deg, var(--hr-chat-tab-g1-soft), var(--hr-chat-tab-g2-soft)) border-box;
	border: 1px solid transparent;
	border-right: none;
	border-radius: var(--hr-chat-radius-panel) 0 0 var(--hr-chat-radius-panel);
	box-shadow: var(--hr-chat-shadow-overlay);
	z-index: 999950;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	/* Close is deliberately faster than open; both share the tab's tokens so
	   the junction never shears. */
	transition: transform var(--hr-chat-close-dur) var(--hr-chat-close-ease),
	            visibility 0s linear var(--hr-chat-close-dur);
}

@supports (height: 1svh) {
	.hr-chat-drawer {
		bottom: clamp(16px, calc(10% + var(--hr-chat-anchor-offset)), calc(100svh - var(--hr-chat-drawer-h) - 16px));
	}
}

.hr-chat-drawer.hr-chat-open {
	transform: translateX(0);
	pointer-events: auto;
	visibility: visible;
	transition: transform var(--hr-chat-open-dur) var(--hr-chat-open-ease),
	            visibility 0s linear 0s;
}

@supports (transition-timing-function: linear(0, 1)) {
	.hr-chat-drawer.hr-chat-open {
		transition-timing-function: linear(0, 0.19 8%, 0.55 18%, 0.85 30%, 1.003 48%, 1.005 56%, 1 74%, 1 100%), linear;
	}
}

/* First-open content stagger — once, removed by JS after it plays. */
@keyframes hrChatStaggerUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hr-chat-drawer.hr-chat-first-open .hr-chat-header      { animation: hrChatStaggerUp 0.35s ease-out 0.05s both; }
.hr-chat-drawer.hr-chat-first-open .hr-chat-messages    { animation: hrChatStaggerUp 0.35s ease-out 0.09s both; }
.hr-chat-drawer.hr-chat-first-open .hr-chat-input-area  { animation: hrChatStaggerUp 0.35s ease-out 0.13s both; }

/* ==========================================================================
   2b. Tab outline motion
   ========================================================================== */

/* Overlay — click to close */
.hr-chat-overlay {
	position: fixed;
	inset: 0;
	z-index: 999940;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background 0.35s ease;
}

.hr-chat-overlay.hr-chat-overlay-visible {
	background: rgba(0, 0, 0, 0.12);
	pointer-events: auto;
}

/* ==========================================================================
   3. Drawer Header
   ========================================================================== */

.hr-chat-header {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px 12px 18px;
	background: var(--hr-chat-bg);
	flex-shrink: 0;
}

/* Gradient hairline instead of a flat gray border — the panel's border
   language carried inside, fading at the edges. */
.hr-chat-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--hr-chat-tab-g1-soft) 18%,
		var(--hr-chat-tab-g2-soft) 82%,
		transparent);
	pointer-events: none;
}

.hr-chat-header-id {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.hr-chat-header-name {
	font-family: var(--hr-chat-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--hr-chat-text);
	line-height: 1.3;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hr-chat-header-subtitle {
	font-family: var(--hr-chat-sans);
	font-size: 12px;
	color: var(--hr-chat-text-muted);
	margin-top: 2px;
}

.hr-chat-header-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hr-chat-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hr-chat-reset-btn {
	font-family: var(--hr-chat-sans);
	font-size: 12px;
	font-weight: 500;
	color: var(--hr-chat-text-muted);
	background: transparent;
	border: 1px solid var(--hr-chat-border);
	border-radius: var(--hr-chat-radius-pill);
	padding: 5px 12px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.hr-chat-reset-btn:hover {
	color: var(--hr-chat-text);
	border-color: var(--hr-chat-border-strong);
	background: var(--hr-chat-bg-subtle);
}

.hr-chat-reset-btn:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

.hr-chat-close-btn {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: transparent;
	border: none;
	color: var(--hr-chat-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
}

.hr-chat-close-btn:hover {
	background: var(--hr-chat-bg-subtle);
	color: var(--hr-chat-text);
}

.hr-chat-close-btn:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

.hr-chat-close-btn svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* ----- Always-visible handoff button + operator-presence dot (4.1) ----- */

.hr-chat-handoff-btn {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: transparent;
	border: none;
	color: var(--hr-chat-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
}

.hr-chat-handoff-btn:hover {
	background: var(--hr-chat-bg-subtle);
	color: var(--hr-chat-text);
}

.hr-chat-handoff-btn:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

.hr-chat-handoff-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.hr-chat-handoff-icon svg {
	width: 17px;
	height: 17px;
}

/* Presence dot — gray when an operator is offline, green when reachable. Only
   shown at all when a live-operator channel exists (button has .has-presence). */
.hr-chat-handoff-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 7px;
	height: 7px;
	border-radius: var(--hr-chat-radius-pill);
	background: var(--hr-chat-text-faint);
	box-shadow: 0 0 0 2px var(--hr-chat-bg);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	pointer-events: none;
}

.hr-chat-handoff-btn.has-presence .hr-chat-handoff-dot {
	opacity: 1;
	transform: scale(1);
}

.hr-chat-handoff-btn.is-live .hr-chat-handoff-dot {
	background: #22c55e;
}

/* Tooltip — anchored below the header button; copy swaps by presence state. */
.hr-chat-handoff-tooltip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--hr-chat-text);
	color: #fff;
	padding: 6px 10px;
	border-radius: var(--hr-chat-radius);
	font-family: var(--hr-chat-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	width: max-content;
	max-width: 200px;
	box-shadow: var(--hr-chat-shadow);
	opacity: 0;
	transform: translateY(-3px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 2;
}

.hr-chat-handoff-tooltip::after {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 9px;
	border-width: 0 5px 6px 5px;
	border-style: solid;
	border-color: transparent transparent var(--hr-chat-text) transparent;
}

.hr-chat-handoff-btn:hover .hr-chat-handoff-tooltip,
.hr-chat-handoff-btn:focus-visible .hr-chat-handoff-tooltip {
	opacity: 1;
	transform: translateY(0);
}

/* Live "AI is paused" banner (4.3). */
.hr-chat-live-banner {
	flex-shrink: 0;
	background: var(--hr-chat-accent-soft);
	color: var(--hr-chat-text-muted);
	font-family: var(--hr-chat-sans);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	padding: 7px 12px;
	border-bottom: 1px solid var(--hr-chat-border);
}

.hr-chat-live-banner[hidden] {
	display: none;
}

/* ==========================================================================
   4. Message Area
   ========================================================================== */

.hr-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px 18px;
	scroll-behavior: smooth;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--hr-chat-bg);
}

.hr-chat-messages::-webkit-scrollbar {
	width: 5px;
}

.hr-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

.hr-chat-messages::-webkit-scrollbar-thumb {
	background: var(--hr-chat-tab-g2-soft);
	border-radius: 5px;
}

.hr-chat-messages::-webkit-scrollbar-thumb:hover {
	background: var(--hr-chat-tab-g2);
}

.hr-chat-messages {
	scrollbar-width: thin;
	scrollbar-color: var(--hr-chat-tab-g2-soft) transparent;
}

/* ==========================================================================
   5. Chat Bubbles
   ========================================================================== */

.hr-chat-bubble-user,
.hr-chat-bubble-assistant {
	max-width: 85%;
	word-break: break-word;
	overflow-wrap: break-word;
	font-family: var(--hr-chat-sans);
	font-size: 14px;
	line-height: 1.55;
}

/* User bubble — the tab's gradient, right-aligned, tail corner tucked.
   Same paint as the launcher so "my words" and "the brand" read as one. */
.hr-chat-bubble-user {
	background: linear-gradient(160deg, var(--hr-chat-tab-g1) 0%, var(--hr-chat-tab-g2) 100%);
	color: #fff;
	border-radius: var(--hr-chat-radius-bubble) var(--hr-chat-radius-bubble) 4px var(--hr-chat-radius-bubble);
	align-self: flex-end;
	padding: 10px 16px;
	box-shadow: 0 2px 10px var(--hr-chat-tab-shadow-color);
}

/* Assistant bubble — soft neutral fill, borderless, left-aligned */
.hr-chat-bubble-assistant {
	background: var(--hr-chat-bg-subtle);
	border: none;
	color: var(--hr-chat-text);
	border-radius: var(--hr-chat-radius-bubble) var(--hr-chat-radius-bubble) var(--hr-chat-radius-bubble) 4px;
	align-self: flex-start;
	padding: 11px 16px;
}

.hr-chat-bubble-assistant p {
	margin: 0 0 6px;
}

.hr-chat-bubble-assistant p:last-child {
	margin-bottom: 0;
}

.hr-chat-bubble-assistant strong {
	color: var(--hr-chat-text);
	font-weight: 600;
}

.hr-chat-bubble-assistant a {
	color: var(--hr-chat-tab-g2);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.hr-chat-bubble-assistant a:hover {
	color: var(--hr-chat-tab-g1);
}

/* Prose links underline; card/view-all anchors inside a bubble do not (the
   generic bubble-link rule outweighs .hr-chat-card's own reset). */
.hr-chat-bubble-assistant a.hr-chat-card,
.hr-chat-bubble-assistant .hr-chat-card *,
.hr-chat-bubble-assistant a.hr-chat-view-all {
	text-decoration: none;
}

/* Bubble entrance animation */
.hr-chat-bubble-enter {
	animation: hrChatFadeInUp 0.25s ease forwards;
}

/* Notice text when restoring cards from a prior session */
.hr-chat-cards-notice {
	margin: 8px 0 0;
	font-family: var(--hr-chat-sans);
	font-size: 12px;
	color: var(--hr-chat-text-faint);
	font-style: italic;
}

/* ==========================================================================
   6. Typing Indicator
   ========================================================================== */

.hr-chat-typing {
	background: var(--hr-chat-bg-subtle);
	border: none;
	border-radius: var(--hr-chat-radius-bubble) var(--hr-chat-radius-bubble) var(--hr-chat-radius-bubble) 4px;
	align-self: flex-start;
	padding: 11px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--hr-chat-sans);
	font-size: 13px;
	color: var(--hr-chat-text-muted);
}

.hr-chat-typing-text {
	line-height: 1.4;
	font-style: italic;
}

.hr-chat-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.hr-chat-typing-dots span {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hr-chat-text-muted);
	opacity: 0.25;
	animation: hrChatTypingPulse 1.2s ease-in-out infinite;
}

.hr-chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.hr-chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.hr-chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Thinking orb (v1.81) — replaces the three dots while the AI works; runs
   only for the duration of a request, which is the orb's actual Siri
   semantics. On the §1 filter ban: that rule protects the always-on 52x68
   tab. This surface is 22x22 and request-bounded, so one STATIC blur+
   contrast is affordable — and necessary: screen-blended conic gradients
   wash out to grey without contrast(), and the blur hides conic banding.
   Motion itself is still transform-only.
   EDGE: no mask, no reliance on the overflow clip for the visible edge —
   Safari aliases both border-radius clips and masks on filtered layers
   (jagged ring). Instead the ::after vignette paints the bubble's own
   background colour back over the rim, so the visible edge is drawn by an
   antialiased gradient ramp and the clip boundary has no contrast left to
   show, in every engine. Only valid because the indicator always renders on
   the --hr-chat-bg-subtle bubble. */
.hr-chat-typing-orb {
	position: relative;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
}

.hr-chat-typing-orb::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(circle closest-side, transparent 72%, var(--hr-chat-bg-subtle) 95%);
}

.hr-chat-typing-orb-fx {
	position: absolute;
	inset: 0;
	/* Deep base so screen blending reads as emitted light, not milk. */
	background: #171d38;
	filter: blur(2.5px) contrast(1.75) saturate(1.15);
	/* Safari: filtered children ESCAPE border-radius/overflow clipping (long-
	   standing WebKit bug), so the blurred square bled past the circle.
	   clip-path applies AFTER the filter on this same element and Safari
	   antialiases it properly; the vignette then hides any residual edge. */
	-webkit-clip-path: circle(closest-side at 50% 50%);
	clip-path: circle(closest-side at 50% 50%);
}

.hr-chat-typing-orb i,
.hr-chat-typing-orb b {
	position: absolute;
	display: block;
}

.hr-chat-typing-orb i { inset: -25%; }

.hr-chat-typing-orb b {
	inset: 0;
	border-radius: 50%;
	mix-blend-mode: screen;
}

/* Two-oscillator flow: the wrapper wanders and breathes on one period while
   the painted child spins on another, so the swirl churns off-centre.
   Periods are non-harmonic so the layers never re-phase mid-request. */
.hr-chat-typing-orb i:nth-child(1) { animation: hrChatOrbFlowA 5.3s ease-in-out infinite alternate; }
.hr-chat-typing-orb i:nth-child(2) { animation: hrChatOrbFlowB 7.1s ease-in-out infinite alternate; }
.hr-chat-typing-orb i:nth-child(3) { animation: hrChatOrbFlowC 6.2s ease-in-out infinite alternate; }
.hr-chat-typing-orb i:nth-child(1) b { animation: hrChatOrbSpinA 3.2s linear infinite; }
.hr-chat-typing-orb i:nth-child(2) b { animation: hrChatOrbSpinB 4.6s linear infinite; }
.hr-chat-typing-orb i:nth-child(3) b { animation: hrChatOrbSpinC 2.4s linear infinite; }

.hr-chat-typing-orb i:nth-child(1) b { background: conic-gradient(from 0deg,   var(--hr-chat-orb-t1) 0deg, transparent 130deg, var(--hr-chat-orb-t1) 360deg); }
.hr-chat-typing-orb i:nth-child(2) b { background: conic-gradient(from 120deg, var(--hr-chat-orb-t2) 0deg, transparent 150deg, var(--hr-chat-orb-t2) 360deg); }
.hr-chat-typing-orb i:nth-child(3) b { background: conic-gradient(from 240deg, var(--hr-chat-orb-t3) 0deg, transparent 200deg, var(--hr-chat-orb-t3) 360deg); }

@keyframes hrChatOrbSpinA { to { transform: rotate(360deg); } }
@keyframes hrChatOrbSpinB { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes hrChatOrbSpinC { to { transform: rotate(360deg); } }

@keyframes hrChatOrbFlowA { from { transform: translate3d(-14%, -8%, 0) scale(0.92); } to { transform: translate3d(11%, 10%, 0) scale(1.16); } }
@keyframes hrChatOrbFlowB { from { transform: translate3d(12%, -11%, 0) scale(1.14); } to { transform: translate3d(-10%, 9%, 0) scale(0.90); } }
@keyframes hrChatOrbFlowC { from { transform: translate3d(-7%, 12%, 0) scale(1.05); }  to { transform: translate3d(13%, -9%, 0) scale(0.88); } }

/* ==========================================================================
   7. Property Cards
   ========================================================================== */

.hr-chat-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin-top: 10px;
}

.hr-chat-card {
	background: var(--hr-chat-bg);
	border: 1px solid var(--hr-chat-border);
	border-radius: var(--hr-chat-radius-ctl);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hr-chat-card:hover {
	border-color: var(--hr-chat-tab-g2-soft);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
}

.hr-chat-card:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

.hr-chat-card-thumb {
	width: 25%;
	min-width: 72px;
	max-width: 90px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.hr-chat-card-body {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	flex: 1;
}

.hr-chat-card-title {
	font-family: var(--hr-chat-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--hr-chat-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

/* v1.41 — Proactive Recovery pulse on chatbot tab when explorer hits zero
   results. v1.79: ring color derives from the gradient's soft companion so
   the pulse matches whatever the tab is themed to (was hardcoded indigo). */
@keyframes hr-chat-tab-pulse {
	0%   { box-shadow: 0 0 0 0 var(--hr-chat-tab-g2-soft, rgba(99, 102, 241, 0.55)); }
	70%  { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0); }
	100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.hr-chat-tab.hr-chat-tab-pulse {
	animation: hr-chat-tab-pulse 1.8s ease-out infinite;
}

/* v1.49 — Property Page Chat attention nudge: finite pulse (3 iterations
   over ~5.4s) that fires once when the visitor lands on a single-property
   page. Pairs with the unread dot. JS adds the class on init and removes
   it via animationend so it doesn't replay on browser back/forward. */
.hr-chat-tab.hr-chat-tab-pulse-once {
	animation: hr-chat-tab-pulse 1.8s ease-out 3;
}

.hr-chat-card-reason {
	margin-top: 2px;
	font-size: 11px;
	color: var(--hr-chat-text-muted, #6b7280);
	font-family: var(--hr-chat-sans);
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.hr-chat-card-meta {
	display: flex;
	align-items: center;
	margin-top: 4px;
	font-size: 12px;
	gap: 8px;
	font-family: var(--hr-chat-sans);
}

.hr-chat-card-price {
	color: var(--hr-chat-text);
	font-weight: 600;
	white-space: nowrap;
}

.hr-chat-card-detail {
	color: var(--hr-chat-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Staged provisional cards (aise#280): display-only candidates badged until
   the live calendar check lands. No pointer affordance — there's nothing to
   click until the upgrade swaps in the full linked card. */
.hr-chat-card-provisional {
	cursor: default;
}

.hr-chat-card-provisional:hover {
	border-color: var(--hr-chat-border);
	box-shadow: none;
}

.hr-chat-card-badge {
	display: block;
	margin-top: 4px;
	font-family: var(--hr-chat-sans);
	font-size: 11px;
	font-style: italic;
	color: var(--hr-chat-text-muted, #6b7280);
	line-height: 1.3;
}

/* Live check couldn't verify this home — kept visible, clearly tentative. */
.hr-chat-card-unverified {
	opacity: 0.72;
}

/* Verified NOT bookable for these dates (e.g. min-stay) — kept visible with
   the reason so the guest knows WHY it left the list. */
.hr-chat-card-dropped {
	opacity: 0.6;
}

.hr-chat-card-dropped .hr-chat-card-badge {
	font-style: normal;
}

/* Resolved-window summary line under a staged watch plan bubble. */
.hr-chat-watch-pending {
	margin: 8px 0 0;
	font-family: var(--hr-chat-sans);
	font-size: 12px;
	color: var(--hr-chat-text-muted, #6b7280);
}

/* "View all results" link */
.hr-chat-view-all {
	display: block;
	margin-top: 10px;
	padding: 8px 0;
	font-family: var(--hr-chat-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--hr-chat-tab-g2);
	text-decoration: none;
	text-align: center;
	border-top: 1px solid var(--hr-chat-border);
	transition: color 0.15s ease;
}

.hr-chat-view-all:hover {
	color: var(--hr-chat-tab-g1);
	text-decoration: underline;
}

/* ==========================================================================
   8. Suggestion Chips
   ========================================================================== */

.hr-chat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* Chips — gradient-tinted pills that invite the tap; the tint comes from the
   same -soft companions the panel border uses, so site theming carries. */
.hr-chat-chip {
	background: var(--hr-chat-bg);
	border: 1px solid var(--hr-chat-tab-g2-soft);
	border-radius: var(--hr-chat-radius-pill);
	padding: 7px 14px;
	font-family: var(--hr-chat-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--hr-chat-text);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
	            transform 0.15s ease, box-shadow 0.15s ease;
	line-height: 1.4;
}

.hr-chat-chip:hover {
	background: var(--hr-chat-bg-subtle);
	border-color: var(--hr-chat-tab-g2);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px var(--hr-chat-tab-g2-soft);
}

.hr-chat-chip:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

/* ==========================================================================
   9. Input Area
   ========================================================================== */

.hr-chat-input-area {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: var(--hr-chat-bg);
}

/* Mirror of the header's gradient hairline. */
.hr-chat-input-area::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--hr-chat-tab-g1-soft) 18%,
		var(--hr-chat-tab-g2-soft) 82%,
		transparent);
	pointer-events: none;
}

/* Host-theme armor (round 5): client themes routinely style bare
   `input[type="text"]` with attribute/compound selectors that out-rank a
   single class — on one production site the composer input collapsed to a
   26px pill with 2px padding and the theme's border. The box model below is
   pinned with !important at element+class weight; the brand vars still flow
   through, so per-site theming is unaffected. `transition` is deliberately
   NOT pinned — the reduced-motion block must keep beating it. */
.hr-chat-input-area input.hr-chat-input {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	border: 1px solid var(--hr-chat-border) !important;
	border-radius: var(--hr-chat-radius-ctl) !important;
	padding: 10px 14px !important;
	font-family: var(--hr-chat-sans) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-indent: 0 !important;
	background: var(--hr-chat-bg-subtle) !important;
	color: var(--hr-chat-text) !important;
	box-shadow: none !important;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hr-chat-input-area input.hr-chat-input::placeholder {
	color: var(--hr-chat-text-faint) !important;
	opacity: 1 !important;
}

/* Focus ring speaks --hr-chat-spec — same luminous tint as the hairline.
   outline is force-killed: host themes commonly ship a dotted
   `:focus-visible` outline that lands on top of this ring and reads harsh
   (round 4); the accent border + soft ring below remain the visible focus
   indicator. !important throughout so the state beats the armored base. */
.hr-chat-input-area input.hr-chat-input:focus,
.hr-chat-input-area input.hr-chat-input:focus-visible {
	outline: none !important;
	border-color: var(--hr-chat-tab-g2) !important;
	background: var(--hr-chat-bg) !important;
	box-shadow: 0 0 0 3px var(--hr-chat-spec-soft) !important;
}

/* Mic button — box model armored like the input (border-color and background
   stay un-pinned: the hover/active/recording states must keep overriding). */
.hr-chat-mic-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	width: 38px !important;
	min-width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	border-radius: var(--hr-chat-radius-ctl) !important;
	background: transparent;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: var(--hr-chat-border);
	color: var(--hr-chat-text-muted);
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hr-chat-mic-btn:hover {
	background: var(--hr-chat-bg-subtle);
	color: var(--hr-chat-text);
	border-color: var(--hr-chat-border-strong);
}

.hr-chat-mic-btn:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

.hr-chat-mic-btn svg {
	width: 17px;
	height: 17px;
	pointer-events: none;
}

.hr-chat-mic-btn.hr-chat-mic-active {
	background: var(--hr-chat-tab-g2);
	color: #fff;
	border-color: var(--hr-chat-tab-g2);
	animation: hrChatMicPulse 1.4s ease-in-out infinite;
}

/* Send button — the gradient again, sized as the row's anchor. Box model
   armored; no state changes the border, so it can pin fully. */
.hr-chat-send-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	width: 38px !important;
	min-width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	border-radius: var(--hr-chat-radius-ctl) !important;
	background: linear-gradient(160deg, var(--hr-chat-tab-g1) 0%, var(--hr-chat-tab-g2) 100%);
	color: #fff;
	border: none !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 !important;
	box-shadow: 0 2px 8px var(--hr-chat-tab-shadow-color);
	transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.hr-chat-send-btn:hover {
	box-shadow: 0 4px 14px var(--hr-chat-tab-shadow-color);
	transform: translateY(-1px);
}

.hr-chat-send-btn:active {
	transform: translateY(0) scale(0.96);
}

.hr-chat-send-btn:focus-visible {
	outline: 2px solid var(--hr-chat-tab-g2);
	outline-offset: 2px;
}

.hr-chat-send-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.hr-chat-send-btn svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

/* ==========================================================================
   10. Overlay suppression + unread indicator
   (The mobile corner FAB retired in #218 part 2 — the edge tab is the one
   launcher at every breakpoint.)
   ========================================================================== */

/* #218 — hidden while a foreign full-screen overlay (toolkit search modal,
   offcanvas nav, lightbox) holds the page scroll-locked; the launcher's
   z-index would otherwise float it over the overlay's surface. Quick fade;
   visibility flips after the fade so it never traps focus or taps mid-hide.
   Restore path uses the base transition (visibility is not in that list, so
   it snaps visible and the opacity fades in). Applied by the overlay watch
   in chatbot.js (mobile breakpoint only). */
.hr-chat-tab.hr-chat-overlay-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* Unread indicator — red dot on the tab when the closed chatbot
   has content the user hasn't seen yet (e.g. after a mobile auto-close
   that fired before the user could read the response). */
.hr-chat-tab.hr-chat-has-unread::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e53935;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	z-index: 1;
}

.hr-chat-tab.hr-chat-has-unread::after {
	top: 10px;
	left: 12px;
}

/* ==========================================================================
   12. Navigation Preloader
   Shown while navigating from chat to the explorer page.
   ========================================================================== */

.hr-chat-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.hr-chat-preloader.hr-chat-preloader-visible {
	opacity: 1;
	pointer-events: auto;
}

.hr-chat-preloader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 0 24px;
	text-align: center;
}

.hr-chat-preloader-spinner {
	width: 36px;
	height: 36px;
	border: 2px solid var(--hr-chat-border);
	border-top-color: var(--hr-chat-accent);
	border-radius: 50%;
	animation: hrChatSpin 0.8s linear infinite;
}

.hr-chat-preloader-text {
	font-family: var(--hr-chat-sans);
	font-size: 14px;
	color: var(--hr-chat-text-muted);
	letter-spacing: 0.01em;
}

.hr-chat-preloader-text::after {
	content: '';
	display: inline-block;
	width: 1.2em;
	text-align: left;
	animation: hrChatPreloaderDots 1.4s steps(4, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.hr-chat-preloader-spinner {
		animation: none;
		border-top-color: var(--hr-chat-border);
	}
	.hr-chat-preloader-text::after {
		animation: none;
		content: '...';
	}
}

/* ==========================================================================
   13. Toast Notification
   ========================================================================== */

.hr-chat-toast {
	position: absolute;
	bottom: 70px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--hr-chat-text);
	color: #fff;
	padding: 8px 14px;
	border-radius: 10px;
	font-family: var(--hr-chat-sans);
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	z-index: 10;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hr-chat-toast.hr-chat-toast-visible {
	opacity: 1;
	pointer-events: auto;
}

.hr-chat-toast-undo {
	background: none;
	border: none;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	font-family: var(--hr-chat-sans);
	cursor: pointer;
	margin-left: 10px;
	padding: 0;
	text-decoration: underline;
}

/* ==========================================================================
   14. Mobile — edge tab at 25% + full-screen slide-up drawer (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
	/* #218 part 2 (Option A): the desktop edge tab, mobile-sized — 44×58,
	   flush to the edge, anchored 25% up. Modal action rows, cookie bars and
	   sticky booking CTAs live in the bottom ~15% of the screen; at 25% the
	   tab clears them by construction and the overlay watch (part 1) becomes
	   a safety net. Radius token = height/2, same law as desktop. */
	.hr-chat-tab {
		width: 44px;
		height: 58px;
		--hr-chat-radius-tab: 29px;
	}

	/* The mobile drawer is a full-screen sheet (z 999950) below the tab
	   (z 999970): no edge-travel here — the open class fades the tab out
	   instead, same fade → visibility pattern as the overlay watch. The
	   restore path rides the base transition (visibility not listed, so it
	   snaps visible and opacity fades in). The 3-class selector pins the
	   left-placement travel mirror too. */
	.hr-chat-tab.hr-chat-tab-open,
	.hr-chat-tab.hr-chat-tab-open.hr-chat-enter-left {
		transform: none;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	/* Tooltip pair (#196/#202) carries to mobile unchanged — left of the
	   tab as on desktop, width capped so it can never kiss the far edge on
	   narrow viewports. */
	.hr-chat-tab-tooltip {
		max-width: min(240px, calc(100vw - 88px));
	}

	.hr-chat-drawer {
		position: fixed;
		inset: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		min-height: 0;
		/* Reset the desktop double-background gradient border. */
		background: var(--hr-chat-bg);
		border: none;
		border-top: 1px solid var(--hr-chat-tab-g2-soft);
		border-radius: 0;
		box-shadow: none;
		transform: translateY(100%);
		transition: transform var(--hr-chat-close-dur) var(--hr-chat-close-ease),
		            visibility 0s linear var(--hr-chat-close-dur);
	}

	.hr-chat-drawer.hr-chat-open {
		transform: translateY(0);
		transition: transform var(--hr-chat-open-dur) var(--hr-chat-open-ease),
		            visibility 0s linear 0s;
	}

	.hr-chat-header {
		padding-top: calc(12px + env(safe-area-inset-top));
	}

	.hr-chat-input-area {
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
	}

	/* iOS Safari auto-zooms any focused input rendering under 16px. The
	   composer is pinned at 14px for desktop; on mobile the zoom (and the
	   detached-caret repaints it drags along) is worse than the size bump,
	   so 16px wins here. Same rule for the Home search field (0.95rem). */
	.hr-chat-input-area input.hr-chat-input,
	.hr-chat-home-search input {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   15. Accessibility — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hr-chat-close-btn,
	.hr-chat-chip,
	.hr-chat-card,
	.hr-chat-mic-btn,
	.hr-chat-send-btn,
	.hr-chat-input,
	.hr-chat-toast {
		transition: none;
	}

	/* Launchers: explicit opacity-only reveal — NOT a blanket transition:none,
	   which would also kill the promised fades. Transforms still apply, they
	   just change instantly (the tab must still reposition when the drawer
	   opens or the junction breaks). */
	.hr-chat-tab,
	.hr-chat-tab.hr-chat-entering,
	.hr-chat-tab.hr-chat-tab-open {
		transition: opacity 0.2s ease !important;
	}

	.hr-chat-tab.hr-chat-pre-enter {
		transform: none;
	}

	.hr-chat-tab-inner {
		transition: none;
	}

	.hr-chat-tab:hover .hr-chat-tab-inner,
	.hr-chat-tab:active .hr-chat-tab-inner {
		transform: none;
	}

	/* Orbs hold still: the static colour mix stays (it is the design), only
	   the drift/swirl stops. */
	.hr-chat-tab-orb,
	.hr-chat-tab-orb i,
	.hr-chat-tab-orb b,
	.hr-chat-typing-orb i,
	.hr-chat-typing-orb b {
		animation: none !important;
	}

	/* Drawer: crossfade instead of slide. */
	.hr-chat-drawer {
		transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
		opacity: 0;
	}

	.hr-chat-drawer.hr-chat-open {
		opacity: 1;
		transition: opacity 0.25s ease, visibility 0s linear 0s !important;
	}

	/* Self-propelled / attention motion is removed entirely, not slowed.
	   This also closes the long-standing gap where the pulse animations
	   survived reduced-motion. */
	.hr-chat-tab.hr-chat-tab-pulse,
	.hr-chat-tab.hr-chat-tab-pulse-once {
		animation: none !important;
	}

	.hr-chat-drawer.hr-chat-first-open .hr-chat-header,
	.hr-chat-drawer.hr-chat-first-open .hr-chat-messages,
	.hr-chat-drawer.hr-chat-first-open .hr-chat-input-area {
		animation: none !important;
	}

	.hr-chat-bubble-enter {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.hr-chat-typing span {
		animation: none;
		opacity: 0.6;
	}

	.hr-chat-mic-btn.hr-chat-mic-active {
		animation: none;
	}

	/* Round-2 hover lifts are motion — pin them under reduced motion. */
	.hr-chat-chip:hover,
	.hr-chat-send-btn:hover,
	.hr-chat-send-btn:active {
		transform: none;
	}
}

/* ============================================================================
   Lead Capture Form (v1.42)
   ============================================================================ */

.hr-chat-lead-bubble {
	background: transparent;
	padding: 0;
	max-width: 100%;
	width: 100%;
}

.hr-chat-lead-form {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 14px;
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hr-chat-lead-label {
	display: block;
	margin: 0;
}

.hr-chat-lead-form input[type="text"],
.hr-chat-lead-form input[type="email"],
.hr-chat-lead-form input[type="tel"],
.hr-chat-lead-form textarea {
	width: 100%;
	padding: 9px 12px;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: inherit;
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hr-chat-lead-form input:focus,
.hr-chat-lead-form textarea:focus {
	outline: none;
	border-color: var(--hr-chat-tab-g2, #2b6cb0);
	background: #fff;
	box-shadow: 0 0 0 3px var(--hr-chat-spec-soft, rgba(159, 186, 255, 0.35));
}

.hr-chat-lead-form textarea {
	resize: vertical;
	min-height: 56px;
}

.hr-chat-lead-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hr-chat-lead-error {
	margin: 0;
	font-size: 13px;
	color: #b91c1c;
}

.hr-chat-lead-submit {
	margin-top: 4px;
	padding: 10px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(160deg, var(--hr-chat-tab-g1, #5B4FE8) 0%, var(--hr-chat-tab-g2, #2E6BE6) 100%);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.hr-chat-lead-submit:hover {
	box-shadow: 0 3px 12px var(--hr-chat-tab-shadow-color, rgba(46, 107, 230, 0.35));
}

.hr-chat-lead-submit:disabled,
.hr-chat-lead-submit.is-loading {
	opacity: 0.7;
	cursor: progress;
}

/* ----- Error Bubble -----
   .hr-chat-retry-btn shipped with markup but no rule, so it rendered as a raw
   UA button inside an otherwise styled widget. Quiet/secondary on purpose: a
   failure is not a call to action, and the contact line above it is the more
   useful exit. */

.hr-chat-bubble-content.hr-chat-bubble-error p {
	margin: 0 0 8px;
}

.hr-chat-bubble-content.hr-chat-bubble-error p:last-of-type {
	margin-bottom: 10px;
}

.hr-chat-error-contact a {
	color: var(--hr-chat-link, #2E6BE6);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.hr-chat-retry-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--hr-chat-text, #1d2327);
	background: transparent;
	border: 1px solid var(--hr-chat-border, rgba(0, 0, 0, 0.16));
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hr-chat-retry-btn:hover {
	background: var(--hr-chat-surface-2, rgba(0, 0, 0, 0.04));
	border-color: var(--hr-chat-border-strong, rgba(0, 0, 0, 0.28));
}

.hr-chat-retry-btn:focus-visible {
	outline: 2px solid var(--hr-chat-link, #2E6BE6);
	outline-offset: 2px;
}

.hr-chat-lead-success {
	background: rgba(46, 125, 50, 0.08);
	border: 1px solid rgba(46, 125, 50, 0.2);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------------
   Live-operator takeover (#120)
   A human reply must read unmistakably different from the AI: a soft
   accent wash + a "[Name] from the team" label above the message.
   ---------------------------------------------------------------------- */

.hr-chat-bubble-operator .hr-chat-bubble-content {
	background: var(--hr-chat-accent-soft);
	border-left: 3px solid var(--hr-chat-accent);
	/* Inset the text/label off the accent border so it isn't flush against it. */
	padding: 8px 12px;
	border-radius: 0 var(--hr-chat-radius-ctl) var(--hr-chat-radius-ctl) 0;
}

.hr-chat-operator-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hr-chat-accent);
	margin-bottom: 4px;
}

/* Live system notes (connected / handed back) — quiet, centered, italic. */
.hr-chat-live-system .hr-chat-bubble-content {
	background: transparent;
	border-left: none;
	color: var(--hr-chat-text-muted);
	font-style: italic;
	font-size: 13px;
}

/* Two-tier handoff (#119): the "talk to a live person now" option sits above
   the contact form; hidden when no operator is available. */
.hr-chat-live-option {
	margin-bottom: 10px;
}

.hr-chat-live-btn {
	display: block;
	width: 100%;
	padding: 10px 14px;
	background: linear-gradient(160deg, var(--hr-chat-tab-g1) 0%, var(--hr-chat-tab-g2) 100%);
	color: #fff;
	border: none;
	border-radius: var(--hr-chat-radius-ctl);
	font-family: var(--hr-chat-sans);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}

.hr-chat-live-btn:hover {
	box-shadow: 0 3px 12px var(--hr-chat-tab-shadow-color);
}

.hr-chat-live-btn.is-loading {
	opacity: 0.6;
	cursor: default;
}

/* ======================================================================
   Watch Card (aise#261)
   ====================================================================== */

.hr-chat-watch-card .hr-chat-watch-dates {
	margin: 0 0 6px;
}

.hr-chat-watch-list {
	margin: 0 0 8px;
	padding-left: 18px;
}

.hr-chat-watch-list li {
	margin: 2px 0;
}

.hr-chat-watch-note {
	margin: 0 0 6px;
	font-size: 0.85em;
	opacity: 0.8;
}

.hr-chat-watch-form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 6px;
}

.hr-chat-lead-error.hr-chat-watch-ok {
	color: inherit;
	opacity: 0.9;
}

/* ======================================================================
   Word-by-word animate-in (#325 Phase 1)
   Model replies only — operator bubbles and restored history never get
   the spans (gated in JS). The keyframe runs forwards to opacity 1 so
   markup captured mid-animation (Start Over's Undo restores
   $messages.html() verbatim) re-runs to fully visible instead of
   restoring invisible text.
   ====================================================================== */
.hr-chat-words-animating .hr-chat-word {
	opacity: 0;
	animation: hr-chat-word-in 0.18s ease-out forwards;
}

@keyframes hr-chat-word-in {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hr-chat-words-animating .hr-chat-word {
		animation: none;
		opacity: 1;
	}
}

/* ======================================================================
   Watch card v2 (#326)
   Inline activate form styled after the reference watcher card, kept
   on-brand (accent vars, sharp card radius, pill chips/button). The
   post-submit state is the honest double-opt-in intermediate — never
   "active" at submit time (activation happens from the email, ckit#362).
   ====================================================================== */
.hr-chat-watch-card-v2 {
	border: 1px solid var(--hr-chat-border);
	border-radius: var(--hr-chat-radius);
	background: var(--hr-chat-bg);
	padding: 12px 14px;
}

.hr-chat-watch-v2-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
}

.hr-chat-watch-v2-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--hr-chat-text);
	vertical-align: -2px;
}

.hr-chat-watch-v2-icon svg {
	width: 16px;
	height: 16px;
}

.hr-chat-watch-v2-line {
	margin: 0 0 8px;
	color: var(--hr-chat-text);
}

.hr-chat-watch-v2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.hr-chat-watch-chip {
	background: var(--hr-chat-bg-subtle);
	border: 1px solid var(--hr-chat-border);
	border-radius: var(--hr-chat-radius-pill);
	padding: 2px 10px;
	font-size: 0.85em;
	color: var(--hr-chat-text);
	white-space: nowrap;
}

.hr-chat-watch-chip a {
	color: inherit;
	text-decoration: none;
}

.hr-chat-watch-chip a:hover {
	text-decoration: underline;
}

.hr-chat-watch-form-v2 {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.hr-chat-watch-form-v2 input[type="email"] {
	width: auto;
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
	border: 1px solid var(--hr-chat-border-strong);
	border-radius: var(--hr-chat-radius-pill);
	padding: 8px 14px;
}

.hr-chat-watch-form-v2 input[type="email"]:focus {
	outline: none;
	border-color: var(--hr-chat-accent);
	box-shadow: 0 0 0 3px var(--hr-chat-accent-ring);
}

.hr-chat-watch-activate {
	border-radius: var(--hr-chat-radius-pill);
	background: var(--hr-chat-accent);
	color: #fff;
	border: none;
	padding: 8px 18px;
	cursor: pointer;
	white-space: nowrap;
}

.hr-chat-watch-activate:hover:not(:disabled) {
	background: var(--hr-chat-accent-hover);
}

.hr-chat-watch-activate:disabled {
	opacity: 0.6;
	cursor: default;
}

.hr-chat-watch-v2-micro {
	margin: 6px 0 0;
	font-size: 0.8em;
	color: var(--hr-chat-text-muted);
}

.hr-chat-watch-v2-body {
	margin: 0;
	color: var(--hr-chat-text);
}

/* ======================================================================
   Tabbed shell (#327 Phase A) — HOME · CHAT
   Rendered only behind config.tabsUi.enabled. View switching is CSS-only
   (hr-chat-view-home on the drawer): the chat panes are hidden, never
   detached, so transcript state survives any number of flips.
   Icon-over-label tab geometry per the reference bar; the unread dot
   rides the CHAT icon corner so both tabs stay identical in size.
   ====================================================================== */
.hr-chat-tabbar {
	display: flex;
	flex-shrink: 0;
	border-top: 1px solid var(--hr-chat-border);
	background: var(--hr-chat-bg);
	padding: 6px 0 8px;
}

.hr-chat-tabbar-btn {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: none;
	border: 0;
	padding: 6px 0 10px;
	color: var(--hr-chat-text-faint);
	cursor: pointer;
	transition: color 0.15s ease;
}

.hr-chat-tabbar-btn:hover {
	color: var(--hr-chat-text-muted);
}

.hr-chat-tabbar-btn.hr-chat-tabbar-active {
	color: var(--hr-chat-text);
}

.hr-chat-tabbar-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.hr-chat-tabbar-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Sentence case, no tracking. Uppercase micro-labels were the widget's
   loudest chrome: seven of them were visible at once on HOME. */
.hr-chat-tabbar-label {
	font-family: var(--hr-chat-sans);
	font-size: 0.68rem;
	font-weight: 550;
	letter-spacing: 0.01em;
	line-height: 1;
}

/* Active marker: a 3px dot under the label (reference convention) —
   quieter than an underline and symmetric for any tab count. */
.hr-chat-tabbar-btn.hr-chat-tabbar-active::after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--hr-chat-accent);
}

.hr-chat-tabbar-dot {
	position: absolute;
	top: -2px;
	right: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e0483e;
	box-shadow: 0 0 0 2px var(--hr-chat-bg);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.hr-chat-tabbar-dot-on {
	opacity: 1;
	transform: scale(1);
}

.hr-chat-home {
	display: none;
	flex: 1;
	overflow-y: auto;
	padding: 0;
	background: var(--hr-chat-bg);
}

/* Hero band: the launcher's brand gradient as a soft wash, so the top
   section reads as its own surface. color-mix keeps it derived from the
   themable gradient tokens; browsers without it fall back to the flat
   bg declared first. */
.hr-chat-home-hero {
	padding: 26px 20px 18px;
	background: var(--hr-chat-bg-subtle);
	background: linear-gradient(165deg,
		color-mix(in srgb, var(--hr-chat-tab-g1) 9%, transparent),
		color-mix(in srgb, var(--hr-chat-tab-g2) 5%, transparent)),
		var(--hr-chat-bg);
	border-bottom: 1px solid var(--hr-chat-border);
}

.hr-chat-view-home .hr-chat-home {
	display: block;
}

/* The live banner is deliberately NOT hidden here. It only ever shows during
   an operator takeover, and suppressing it per-view meant "a team member is
   with you" blinked off the moment a guest tapped Home or Waitlist while the
   live session kept running underneath. Availability is a property of the
   session, not of the tab being looked at. */
.hr-chat-view-home .hr-chat-messages,
.hr-chat-view-home .hr-chat-input-area {
	display: none !important;
}

/* Staggered entry: each block rises in once per view switch. */
@keyframes hr-chat-home-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.hr-chat-view-home .hr-chat-home > * {
	animation: hr-chat-home-rise 0.3s ease both;
}

.hr-chat-view-home .hr-chat-home > *:nth-child(2) { animation-delay: 0.06s; }
.hr-chat-view-home .hr-chat-home > *:nth-child(3) { animation-delay: 0.11s; }
.hr-chat-view-home .hr-chat-home > *:nth-child(4) { animation-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
	.hr-chat-view-home .hr-chat-home > * {
		animation: none;
	}
}

.hr-chat-home-brand {
	margin: 0 0 20px;
}

.hr-chat-home-site {
	margin: 0 0 7px;
	font-size: 0.74rem;
	font-weight: 550;
	letter-spacing: 0.01em;
	color: var(--hr-chat-text-muted);
}

.hr-chat-home-hi {
	margin: 0;
	font-size: 1.55rem;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--hr-chat-text);
}

/* One control, not two. The send button sits INSIDE the field: an outlined
   pill next to a floating filled circle read as two competing shapes. */
.hr-chat-home-search {
	position: relative;
	display: block;
	margin: 0;
}

.hr-chat-home-search input {
	width: 100%;
	min-width: 0;
	height: 48px;
	border: 0;
	border-radius: var(--hr-chat-radius-pill);
	/* Inset ring instead of a border so the field keeps its exact box while
	   focus thickens the ring. */
	box-shadow: inset 0 0 0 1px var(--hr-chat-border-strong);
	padding: 0 54px 0 18px;
	font-family: var(--hr-chat-sans);
	font-size: 0.95rem;
	color: var(--hr-chat-text);
	background: var(--hr-chat-bg);
	transition: box-shadow 0.15s ease;
}

.hr-chat-home-search input::placeholder {
	color: var(--hr-chat-text-faint);
}

.hr-chat-home-search input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--hr-chat-accent), 0 0 0 3px var(--hr-chat-accent-ring);
}

/* Forced-colors mode blanks box-shadow per CSS Color Adjust, which would
   leave this field with no boundary AND no focus ring, since both now live
   in shadows. Hand both back as real border/outline in that mode only. */
@media (forced-colors: active) {
	.hr-chat-home-search input {
		border: 1px solid ButtonBorder;
	}

	.hr-chat-home-search input:focus {
		outline: 2px solid Highlight;
		outline-offset: 1px;
	}
}

.hr-chat-home-search button {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--hr-chat-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.hr-chat-home-search button:hover {
	background: var(--hr-chat-accent-hover);
}

.hr-chat-home-search button svg {
	width: 15px;
	height: 15px;
	/* The paper-plane glyph is weighted toward its top-right corner;
	   nudge down-left to optically center it in the round button. */
	transform: translate(-1px, 1px);
}

.hr-chat-home-search-note {
	display: flex;
	/* flex-start, not center: the note wraps to two lines and a centered dot
	   sits between them — it should ride the FIRST line, next to "Live". */
	align-items: flex-start;
	gap: 6px;
	margin: 10px 2px 0;
	text-align: left;
	font-size: 0.72rem;
	color: var(--hr-chat-text-faint);
}

/* Live-availability tell: the calendar behind these answers is live, so the
   note that says so carries the same pulse the operator-presence dot uses. */
.hr-chat-home-live-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	/* Optically center the dot on the first line's text (0.72rem type,
	   ~1.5 line box): (line-box − dot) / 2, ring shadow excluded. */
	margin-top: 5px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
	.hr-chat-home-live-dot {
		animation: hr-chat-live-pulse 2.4s ease-in-out infinite;
	}
}

@keyframes hr-chat-live-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16); }
	50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.06); }
}

.hr-chat-home-resume {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	background: var(--hr-chat-accent-soft);
	border: 1px solid var(--hr-chat-border);
	border-radius: var(--hr-chat-radius);
	padding: 12px 36px 12px 14px;
	margin: 18px 20px 0;
	width: calc(100% - 40px);
	cursor: pointer;
	font-family: var(--hr-chat-sans);
	transition: border-color 0.15s ease;
}

.hr-chat-home-resume:hover {
	border-color: var(--hr-chat-border-strong);
}

/* Chevron affordance, drawn — no glyph fonts, no emoji. */
.hr-chat-home-resume::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid var(--hr-chat-text-muted);
	border-right: 1.5px solid var(--hr-chat-text-muted);
	transform: translateY(-50%) rotate(45deg);
}

.hr-chat-home-resume-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 550;
	letter-spacing: 0.01em;
	color: var(--hr-chat-text-muted);
	margin-bottom: 7px;
}

.hr-chat-home-resume-you {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--hr-chat-text);
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hr-chat-home-resume-ai {
	display: block;
	font-size: 0.84rem;
	color: var(--hr-chat-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hr-chat-home-heading {
	margin: 0 0 4px;
	font-size: 0.74rem;
	font-weight: 550;
	letter-spacing: 0.01em;
	color: var(--hr-chat-text-muted);
}

.hr-chat-home-popular {
	margin: 0;
	padding: 20px 20px 22px;
}

.hr-chat-home-popular-list {
	display: flex;
	flex-direction: column;
}

/* Menu rows, not boxes: hairline separators keep the list quiet. */
.hr-chat-home-question {
	position: relative;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--hr-chat-border);
	/* Leading-glyph grid: the 20px left inset is the hanging indent every
	   wrapped line aligns to, so a three-line prompt still reads as ONE row.
	   Right padding drops to 8px now that nothing sits there — the extra
	   measure is what pulls most prompts back from three lines to two. */
	padding: 13px 8px 13px 20px;
	font-family: var(--hr-chat-sans);
	/* 0.84rem matches .hr-chat-home-resume-ai, the pane's other interactive
	   subline — NOT 0.88rem, which is bespoke-copy's size and would tie the
	   rows back to body copy. Weight 500 buys back the "UI label, not prose"
	   read the size drop costs. */
	font-size: 0.84rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--hr-chat-text);
	cursor: pointer;
	transition: color 0.15s ease;
}

/* The prompts are the pane's most-tapped affordance and at rest on a fine
   pointer they carried no mark at all (Eli read them as static copy, 8/5).
   The chevron moves to the LEADING edge and stays put: it anchors the row's
   start, which is what wrapping destroys, it survives on touch where there
   is no hover to approach with, and currentColor carries it into the accent
   on hover and into forced colors intact. Still one mark per row, so the
   old five-chevrons-of-clutter objection holds — it just resolves at the
   other end of the row. */
.hr-chat-home-question::before {
	content: '';
	position: absolute;
	/* First line's optical center: 13px padding + half the 19.5px line box.
	   NOT top:50% — on a three-line prompt that floats mid-paragraph. */
	top: 23px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	/* 0.55 over white is ~3.9:1. The mark IS the affordance, so it has to
	   clear WCAG 1.4.11 on its own. text-faint @ 0.5 measured 1.6:1. */
	opacity: 0.55;
	transition: left 0.15s ease, opacity 0.15s ease;
}

.hr-chat-home-question:hover,
.hr-chat-home-question:focus-visible {
	color: var(--hr-chat-accent);
}

.hr-chat-home-question:hover::before,
.hr-chat-home-question:focus-visible::before,
.hr-chat-home-question:active::before {
	left: 4px;
	opacity: 1;
}

/* The widget's own ring, not the UA's; inset so it never collides with the
   neighbouring rows' hairlines. Matches the .hr-chat-chip convention. */
.hr-chat-home-question:focus-visible {
	outline: 2px solid var(--hr-chat-accent);
	outline-offset: -2px;
}

/* opacity survives forced-colors, so a 0.55 mark would stay faint there.
   Hand it back at full strength — same pattern as the search field above. */
@media (forced-colors: active) {
	.hr-chat-home-question::before {
		opacity: 1;
	}
}

/* Closing block, no band. The grey fill plus its top rule made the pane end
   on a fourth stacked surface; whitespace separates it just as well. */
.hr-chat-home-bespoke {
	padding: 14px 20px 24px;
}

.hr-chat-home-bespoke-copy {
	margin: 0 0 12px;
	font-size: 0.88rem;
	color: var(--hr-chat-text-muted);
	line-height: 1.55;
}

.hr-chat-home-bespoke-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Ghost, not solid. This is the pane's least-used action and it sat as its
   heaviest element, directly above the tab bar. */
.hr-chat-home-cta {
	border: 1px solid var(--hr-chat-border-control);
	border-radius: var(--hr-chat-radius-pill);
	background: var(--hr-chat-bg);
	color: var(--hr-chat-text);
	padding: 9px 18px;
	font-family: var(--hr-chat-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hr-chat-home-cta:hover {
	background: var(--hr-chat-bg-subtle);
	border-color: var(--hr-chat-accent);
}

.hr-chat-home-phone {
	font-size: 0.85rem;
	font-weight: 550;
	color: var(--hr-chat-text-muted);
	text-decoration: none;
}

.hr-chat-home-phone:hover {
	text-decoration: underline;
}

/* display:block/flex on these would defeat the [hidden] attribute the JS
   toggles (UA display:none loses to any authored display) — restate it. */
.hr-chat-home-resume[hidden],
.hr-chat-home-popular[hidden],
.hr-chat-home-phone[hidden] {
	display: none;
}

/* The list's final hairline would double with the bespoke section's top
   rule right below it. */
.hr-chat-home-question:last-child {
	border-bottom: 0;
}

/* ======================================================================
   Watchers pane (#327 Phase B) — session-fenced watch list + toggles.
   Same CSS-only view switch as HOME: hr-chat-view-watchers on the drawer
   hides the chat panes without detaching them.
   ====================================================================== */
/* White, not grey. The grey field existed to make the cards read as cards;
   with hairline rows there is nothing to lift off a backdrop. */
.hr-chat-watchers {
	display: none;
	flex: 1;
	overflow-y: auto;
	background: var(--hr-chat-bg);
}

.hr-chat-view-watchers .hr-chat-watchers {
	display: flex;
	flex-direction: column;
}

/* Same reasoning as the HOME rule above: the live-takeover banner survives a
   view switch. */
.hr-chat-view-watchers .hr-chat-messages,
.hr-chat-view-watchers .hr-chat-input-area {
	display: none !important;
}

/* Staggered entry, the HOME-pane convention: pane blocks rise on each view
   switch, and body children rise again when the fetch swaps loading for
   cards/empty state (the .html() replace recreates the nodes, so the
   animation re-fires exactly when new content lands). */
.hr-chat-view-watchers .hr-chat-watchers > * {
	animation: hr-chat-home-rise 0.3s ease both;
}

.hr-chat-view-watchers .hr-chat-watchers > *:nth-child(2) { animation-delay: 0.06s; }
.hr-chat-view-watchers .hr-chat-watchers > *:nth-child(3) { animation-delay: 0.11s; }

.hr-chat-view-watchers .hr-chat-watchers-body > * {
	animation: hr-chat-home-rise 0.3s ease both;
}

.hr-chat-view-watchers .hr-chat-watchers-body > *:nth-child(2) { animation-delay: 0.06s; }
.hr-chat-view-watchers .hr-chat-watchers-body > *:nth-child(3) { animation-delay: 0.11s; }
.hr-chat-view-watchers .hr-chat-watchers-body > *:nth-child(4) { animation-delay: 0.16s; }
.hr-chat-view-watchers .hr-chat-watchers-body > *:nth-child(n+5) { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
	.hr-chat-view-watchers .hr-chat-watchers > *,
	.hr-chat-view-watchers .hr-chat-watchers-body > * {
		animation: none;
	}
}

/* Head band: same soft brand wash as the HOME hero — derived from the
   themable gradient tokens so per-site settings carry through here too.
   Browsers without color-mix fall back to the flat subtle bg. */
.hr-chat-watchers-head {
	background: var(--hr-chat-bg-subtle);
	background: linear-gradient(165deg,
		color-mix(in srgb, var(--hr-chat-tab-g1) 9%, transparent),
		color-mix(in srgb, var(--hr-chat-tab-g2) 5%, transparent)),
		var(--hr-chat-bg);
	border-bottom: 1px solid var(--hr-chat-border);
	color: var(--hr-chat-text);
	padding: 18px 20px 14px;
}

/* A greeting, not a nameplate. The 0.22em-tracked all-caps title over an
   all-caps subtitle was the single loudest element in the widget. */
.hr-chat-watchers-title {
	margin: 0 0 4px;
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.hr-chat-watchers-sub {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.5;
	color: var(--hr-chat-text-muted);
}

.hr-chat-watchers-body {
	flex: 1;
	padding: 4px 0 4px;
}

.hr-chat-watchers-loading {
	margin: 12px 20px;
	font-size: 0.85rem;
	color: var(--hr-chat-text-muted);
}

/* Rows, not cards. Four bordered-and-shadowed boxes floating on grey read as
   four separate objects; a hairline list reads as one waitlist. */
.hr-chat-watchers-card {
	position: relative;
	background: var(--hr-chat-bg);
	border-bottom: 1px solid var(--hr-chat-border);
	padding: 14px 20px;
	margin: 0;
}

.hr-chat-watchers-card:last-child {
	border-bottom: 0;
}

.hr-chat-watchers-card-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Fixed box regardless of the source image's aspect ratio, so a portrait
   photo can't stretch the row. */
.hr-chat-watchers-thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--hr-chat-radius);
	object-fit: cover;
	display: block;
	background: var(--hr-chat-bg-subtle);
}

/* Placeholder keeps the text column aligned when a home has no photo (or a
   multi-home watch, where no single cover is the honest one). */
.hr-chat-watchers-thumb-empty {
	box-shadow: inset 0 0 0 1px var(--hr-chat-border);
}

.hr-chat-watchers-card-main {
	flex: 1;
	min-width: 0;
}

.hr-chat-watchers-card-title {
	margin: 0 0 3px;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--hr-chat-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Single-home titles link to the property page. Quiet affordance in the
   redesign's language: faint underline always there (a title that navigates
   with no tell is a hidden feature), full-strength on hover/focus. Explicit
   styling because the drawer is NOT isolated from host-theme link CSS (#172). */
.hr-chat-watchers-card-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.hr-chat-watchers-card-link:hover,
.hr-chat-watchers-card-link:focus-visible {
	text-decoration-color: currentColor;
}

.hr-chat-watchers-card-sub {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--hr-chat-text-muted);
}

/* Chip only for states the guest cannot act on. Active and guest-paused are
   carried by the switch alone — showing both was saying it twice. */
.hr-chat-watchers-pill {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.72rem;
	font-weight: 550;
	letter-spacing: 0.01em;
	color: var(--hr-chat-text-muted);
	text-align: right;
}

.hr-chat-watchers-pill::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hr-chat-text-faint);
}

.hr-chat-watchers-pill-pending::before {
	background: #e6a23c;
}

.hr-chat-watchers-hint {
	margin: 6px 0 0 60px; /* aligns under the text column, past the thumb */
	font-size: 0.75rem;
	color: var(--hr-chat-text-faint);
}

/* The pause/resume switch now sits in the row's flex flow rather than
   absolutely against the card, so nothing needs padding reserved for it.
   Checkbox is visually hidden but keyboard/AT reachable; the knob paints
   state. */
.hr-chat-watchers-switch {
	position: relative;
	flex-shrink: 0;
	display: inline-block;
	width: 40px;
	height: 24px;
	cursor: pointer;
}

.hr-chat-watchers-toggle {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

/* The off state is now the ONLY indication a row is paused (the text pill it
   used to sit beside is gone), so the track has to clear WCAG 1.4.11's 3:1
   for a control's state. --hr-chat-border-strong (#ccc) is 1.61:1 on white,
   which was passable as decoration next to a "Paused" chip and is not
   passable as the state itself. */
.hr-chat-watchers-knob {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: #767676;
	transition: background 0.15s ease;
	pointer-events: none;
}

.hr-chat-watchers-knob::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

/* Green, not accent (Eli 8/5): ON here means "actively watching", a live
   state, not a themed control — the same signal family as the Home pane's
   live dot (#22c55e). Its 600-weight sibling because the track must clear
   the same 3:1 state bar as the off state above; #22c55e measures ~2.1:1. */
.hr-chat-watchers-toggle:checked + .hr-chat-watchers-knob {
	background: #16a34a;
}

.hr-chat-watchers-toggle:checked + .hr-chat-watchers-knob::after {
	transform: translateX(16px);
}

.hr-chat-watchers-toggle:focus-visible + .hr-chat-watchers-knob {
	box-shadow: 0 0 0 3px var(--hr-chat-accent-ring);
}

.hr-chat-watchers-toggle:disabled + .hr-chat-watchers-knob {
	opacity: 0.55;
}

.hr-chat-watchers-card-error {
	margin: 6px 0 0 60px; /* same text-column alignment as the hint */
	font-size: 0.75rem;
	color: #c0392b;
}

/* The rows own their horizontal padding now, so the pane body no longer
   supplies any — the blocks that are not rows bring their own. */
.hr-chat-watchers-empty {
	background: var(--hr-chat-bg);
	padding: 18px 20px 20px;
	text-align: left;
}

.hr-chat-watchers-empty-lead {
	margin: 0 0 6px;
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--hr-chat-text);
}

.hr-chat-watchers-empty-copy {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--hr-chat-text-muted);
}

/* Sentence case at .hr-chat-home-cta's size and tracking: these were the
   pane's only uppercase tracked controls, a pre-redesign leftover. Filled
   where the Home CTA is ghost, because here it IS the primary. min-height
   carries the 44px target the old 10px/0.72rem stack missed by ~10px. */
.hr-chat-watchers-empty-cta,
.hr-chat-watchers-retry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 14px;
	border: 0;
	border-radius: var(--hr-chat-radius-pill);
	background: var(--hr-chat-accent);
	color: #fff;
	padding: 0 18px;
	font-family: var(--hr-chat-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hr-chat-watchers-empty-cta:hover,
.hr-chat-watchers-retry:hover {
	background: var(--hr-chat-accent-hover);
}

/* "Find my waitlist" (#346) — the email → magic-link entry under the empty
   state, collapsed behind a native <details> disclosure since 1.157.0. */
.hr-chat-watchers-recover {
	background: var(--hr-chat-bg);
	border-top: 1px solid var(--hr-chat-border);
	/* Closed, this block is one 44px row of type. The old 16/18 padding was
	   sized for a permanently-open form. */
	padding: 2px 20px 10px;
	margin-top: 4px;
	text-align: left;
}

/* Disclosure, not a second block. Recovery is the minority path and it sat
   open with a form and a filled pill, which is what made the empty state
   bottom-heavy. Closed by default, the question itself is the signpost for
   the guest who needs it. */
.hr-chat-watchers-recover-lead {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hr-chat-accent);
	cursor: pointer;
	list-style: none;
}

/* Safari keeps its own marker even under display:flex. */
.hr-chat-watchers-recover-lead::-webkit-details-marker {
	display: none;
}

/* Same chevron primitive as the Home prompts, rotated to say "expands"
   rather than "goes somewhere". currentColor keeps it on the accent. */
.hr-chat-watchers-recover-lead::after {
	content: '';
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.hr-chat-watchers-recover[open] .hr-chat-watchers-recover-lead::after {
	transform: translateY(1px) rotate(225deg);
}

.hr-chat-watchers-recover-lead:focus-visible {
	outline: 2px solid var(--hr-chat-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.hr-chat-watchers-recover-copy {
	margin: 0 0 10px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--hr-chat-text-muted);
}

.hr-chat-watchers-recover-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.hr-chat-watchers-recover-email {
	flex: 1 1 160px;
	min-width: 0;
	min-height: 44px;
	border: 1px solid var(--hr-chat-border-control);
	border-radius: var(--hr-chat-radius-pill);
	padding: 9px 14px;
	font-family: var(--hr-chat-sans);
	font-size: 0.85rem;
	color: var(--hr-chat-text);
	background: var(--hr-chat-bg);
}

.hr-chat-watchers-recover-email:focus {
	outline: none;
	border-color: var(--hr-chat-accent);
	box-shadow: 0 0 0 3px var(--hr-chat-accent-ring);
}

/* Ghost, not solid — the .hr-chat-home-cta recipe verbatim. Even revealed,
   this must never be a second filled pill competing with the primary. */
.hr-chat-watchers-recover-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid var(--hr-chat-border-control);
	border-radius: var(--hr-chat-radius-pill);
	background: var(--hr-chat-bg);
	color: var(--hr-chat-text);
	padding: 0 18px;
	font-family: var(--hr-chat-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hr-chat-watchers-recover-btn:hover {
	background: var(--hr-chat-bg-subtle);
	border-color: var(--hr-chat-accent);
}

.hr-chat-watchers-recover-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.hr-chat-watchers-empty-cta:focus-visible,
.hr-chat-watchers-retry:focus-visible,
.hr-chat-watchers-recover-btn:focus-visible {
	outline: 2px solid var(--hr-chat-accent);
	outline-offset: 2px;
}

.hr-chat-watchers-recover-msg {
	margin: 10px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--hr-chat-text-muted);
}

.hr-chat-watchers-recover-msg[hidden] {
	display: none;
}

/* Uniform retry affordance after the ack — quiet text-link, not a CTA:
   it must read as "fix a typo", never as a second send button. */
.hr-chat-watchers-recover-again {
	display: inline-block;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--hr-chat-sans);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hr-chat-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.hr-chat-watchers-recover-again:hover {
	color: var(--hr-chat-accent-hover);
}

.hr-chat-watchers-recover-again[hidden] {
	display: none;
}

/* iOS zoom guard (#343 rule): text inputs at 16px on mobile. */
@media (max-width: 768px) {
	.hr-chat-watchers-recover-email {
		font-size: 16px;
	}
}

.hr-chat-watchers-note {
	margin: 0;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--hr-chat-border);
	font-size: 0.72rem;
	line-height: 1.55;
	color: var(--hr-chat-text-faint);
}

/* display:flex above would defeat the [hidden] the JS toggles — restate it
   (the home-pane precedent). Same for the per-card error line. */
.hr-chat-watchers[hidden],
.hr-chat-watchers-card-error[hidden] {
	display: none;
}