/**
 * Maizey Chat — Stylesheet
 *
 * All selectors are namespaced under .maizey-* or #maizey-chat-* to prevent
 * bleed-in from the Kadence theme and bleed-out into site content.
 *
 * Design tokens (CSS custom properties) are scoped to the widget root so they
 * cannot conflict with any theme variables.
 *
 * Structure:
 *   1.  Custom properties (design tokens)
 *   2.  Widget base & reset
 *   3.  FAB trigger button
 *   4.  Panel — compact chat overlay
 *   5.  Panel header
 *   6.  Messages area & bubbles
 *   7.  Typing indicator
 *   8.  Copy Response button
 *   9.  Sources section
 *   10. Disclaimer banner
 *   11. Input area
 *   12. Fullscreen overlay
 *   13. Sidebar
 *   14. Session list
 *   15. Main chat area (fullscreen)
 *   16. Footer note
 *   17. Login required state
 *   18. Utility / shared
 *   19. Responsive — mobile (≤ 480px)
 *   20. Reduced motion
 */

/* =============================================================================
   1. Custom Properties
   ============================================================================= */

.maizey-chat-widget,
.maizey-chat-fab {
	--maizey-navy:        #013058;
	--maizey-blue:        #215387;
	--maizey-gold:        #ffcc00;
	--maizey-gold-dark:   #e6b800;
	--maizey-gray-light:  #f4f4f4;
	--maizey-gray-mid:    #e0e0e0;
	--maizey-gray-text:   #666666;
	--maizey-off-white:   #f8f8f8;
	--maizey-white:       #ffffff;
	--maizey-danger:      #d63638;
	--maizey-text:        #1a1a1a;
	--maizey-text-light:  #555555;

	--maizey-radius-sm:   6px;
	--maizey-radius-md:   12px;
	--maizey-radius-lg:   18px;
	--maizey-radius-pill: 9999px;

	--maizey-shadow-panel: 0 8px 32px rgba(1, 48, 88, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
	--maizey-shadow-fab:   0 4px 16px rgba(1, 48, 88, 0.22);

	--maizey-font:        'Encode Sans', 'Encode Sans Semi Condensed', system-ui, -apple-system, sans-serif;
	--maizey-sidebar-w:   280px;
	--maizey-panel-w:     400px;
	--maizey-panel-h:     560px;
	--maizey-z:           99999;

	--maizey-transition:  200ms ease;
}

/* =============================================================================
   2. Widget Base & Reset
   ============================================================================= */

/* Scoped reset — prevents Kadence/theme styles leaking into the widget */
.maizey-chat-widget *,
.maizey-chat-widget *::before,
.maizey-chat-widget *::after,
.maizey-chat-fab,
.maizey-chat-fab *,
.maizey-session-menu,
.maizey-session-menu * {
	box-sizing: border-box;
	font-family: var(--maizey-font);
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

.maizey-chat-widget {
	position: fixed;
	bottom: 106px;   /* sit above the FAB (includes bubble tail) */
	right: 24px;
	z-index: var(--maizey-z);
	pointer-events: none;  /* widget root is invisible; children handle events */
}

/* Hidden state — widget not yet opened */
.maizey-chat-widget[hidden] {
	display: block !important; /* override [hidden] so JS can toggle .is-open */
	visibility: hidden;
	opacity: 0;
}

/* Screen-reader utility (matches WP core pattern) */
.maizey-chat-widget .screen-reader-text,
.maizey-chat-fab .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   3. FAB — Floating Action Button
   ============================================================================= */

.maizey-chat-fab {
	position: fixed;
	bottom: 42px;   /* extra room for the bubble tail below */
	right: 24px;
	z-index: var(--maizey-z);
	display: flex;
	align-items: center;
	gap: 8px;
	/* Padding is 3px lighter per side than the visual target: the transparent
	   border below adds those 3px back, so the outer box is unchanged. */
	padding: 18px 17px 18px 13px;
	background: var(--maizey-gold);
	color: var(--maizey-navy);
	border: 3px solid transparent;  /* reserved for the gold hover border — no layout shift */
	border-radius: var(--maizey-radius-md);  /* rounded rectangle, not pill */
	box-shadow: var(--maizey-shadow-fab);
	cursor: pointer;
	transition: background var(--maizey-transition), border-color var(--maizey-transition), transform var(--maizey-transition), box-shadow var(--maizey-transition);
	/* fill-mode is "backwards", not "both": backwards applies the from-state during
	   the 0.3s delay (preventing a pre-animation flash), while NOT retaining the
	   final transform afterwards. "both" would retain translateY(0) forever and
	   permanently override the :hover lift below. */
	animation: maizey-fab-enter 0.6s ease-out 0.3s backwards;
	pointer-events: auto;

	/* Ink colour for the icon's inner text lines — flips with the state so the
	   lines always contrast the bubble fill (which uses currentColor). */
	--maizey-fab-icon-ink: var(--maizey-gold);
}

/* Blue treatment is hover-only. Keyboard focus deliberately does NOT recolour
   the button: closePanel() calls fab.focus() to return focus to the dialog's
   trigger, so after an ESC-close the FAB would otherwise sit in the blue hover
   state with no pointer near it. Focus is conveyed by the outline further down
   instead, which is what SC 2.4.7 asks for. */
.maizey-chat-fab:hover {
	background: var(--maizey-blue);
	color: var(--maizey-white);
	border-color: var(--maizey-gold);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(1, 48, 88, 0.28);

	--maizey-fab-icon-ink: var(--maizey-navy);
}

/* Animation-reset utility — toggled by JS in closePanel() to reliably restart
   the FAB enter animation. The class is added for one double-rAF tick so
   Safari sees a genuine "animation: none" frame before the animation
   re-attaches from the stylesheet, which void offsetWidth does not guarantee. */
.maizey-chat-fab.maizey-fab-anim-reset {
	animation: none;
}

/* Tail follows the button background — hover only, matching the rule above */
.maizey-chat-fab:hover::before {
	border-color: var(--maizey-blue) transparent transparent transparent;
}

/* Icon bubble fill turns gold on hover to stay readable on blue */
.maizey-chat-fab:hover .maizey-fab-icon {
	color: var(--maizey-gold);
}

.maizey-chat-fab:active {
	transform: translateY(0);
}

/* Entrance — pops up from below the viewport with a slight overshoot.
   translateY is a percentage so the travel scales with the button's own height
   rather than a fixed pixel distance. The overshoot lives in the keyframes and
   is paired with a plain ease-out; combining it with a >1 cubic-bezier would
   double-count the bounce and wobble. */
@keyframes maizey-fab-enter {
	0%   { transform: translateY(120%) scale(0.85); opacity: 0; }
	60%  { transform: translateY(-8px) scale(1.04); opacity: 1; }
	80%  { transform: translateY(2px)  scale(0.99); opacity: 1; }
	100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Speech bubble tail — bottom-left pointing downward.
   Offsets absorb the 3px border so the tail keeps the same visual attachment
   point and protrusion it had before the border existed. */
.maizey-chat-fab::before {
	content: '';
	position: absolute;
	bottom: -18px;
	left: 13px;
	z-index: -1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 32px 42px 0 0;
	border-color: var(--maizey-gold) transparent transparent transparent;
	transition: border-color var(--maizey-transition);
}


.maizey-fab-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--maizey-navy);
}

.maizey-fab-label {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: left;
}

.maizey-fab-label-top {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.85;
	white-space: nowrap;
}

.maizey-fab-label-bottom {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* FAB hidden when panel or fullscreen is open */
body.maizey-panel-open .maizey-chat-fab,
body.maizey-fullscreen .maizey-chat-fab {
	animation: none;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.85);
}

/* =============================================================================
   4. Panel — Compact Chat Overlay
   ============================================================================= */

.maizey-panel {
	position: fixed;
	bottom: 75px;
	right: 24px;
	z-index: var(--maizey-z);
	width: var(--maizey-panel-w);
	height: var(--maizey-panel-h);
	max-height: calc(100vh - 112px);
	background: var(--maizey-white);
	border-radius: var(--maizey-radius-md);
	box-shadow: var(--maizey-shadow-panel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: auto;

	/* Hidden by default */
	opacity: 0;
	transform: translateY(16px) scale(0.97);
	visibility: hidden;
	transition:
		opacity var(--maizey-transition),
		transform var(--maizey-transition),
		visibility var(--maizey-transition);
}

body.maizey-panel-open .maizey-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	visibility: visible;
}

/* Panel hidden when fullscreen is active */
body.maizey-fullscreen .maizey-panel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* =============================================================================
   5. Panel Header
   ============================================================================= */

.maizey-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--maizey-navy);
	flex-shrink: 0;
}

.maizey-logo {
	display: block;
	height: 25px;
	width: auto;
	object-fit: contain;
}

.maizey-panel-header-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.maizey-panel-subtitle {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.04em;
	margin-left: 50px;
	color: var(--maizey-gold);
}

.maizey-panel-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Base icon button */
.maizey-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--maizey-radius-sm);
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	transition: background var(--maizey-transition), color var(--maizey-transition);
}

.maizey-btn-icon svg {
	width: 20px;
	height: 20px;
}

.maizey-btn-icon:hover,
.maizey-btn-icon:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	color: var(--maizey-white);
	outline: 2px solid var(--maizey-gold);
	outline-offset: 1px;
}

/* Panel New Chat button — floating pill above input area, expands leftward on hover */
.maizey-btn-panel-new-chat {
	position: absolute;
	bottom: 78px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	max-width: 42px;
	height: 42px;
	overflow: hidden;
	padding: 0 11px;
	white-space: nowrap;
	background: var(--maizey-gold);
	color: var(--maizey-navy);
	border: none;
	border-radius: 21px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition:
		max-width 280ms cubic-bezier(0.4, 0, 0.2, 1),
		gap 280ms ease,
		box-shadow var(--maizey-transition);
}

.maizey-btn-panel-new-chat svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.maizey-btn-panel-new-chat:hover,
.maizey-btn-panel-new-chat:focus-visible {
	max-width: 140px;
	gap: 6px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
	outline: 2px solid var(--maizey-navy);
	outline-offset: 2px;
}

.maizey-panel-new-chat-label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 160ms ease 120ms;
}

.maizey-btn-panel-new-chat:hover .maizey-panel-new-chat-label,
.maizey-btn-panel-new-chat:focus-visible .maizey-panel-new-chat-label {
	opacity: 1;
}

/* =============================================================================
   6. Messages Area & Bubbles
   ============================================================================= */

.maizey-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
	background: var(--maizey-off-white);
}

/* Scrollbar styling */
.maizey-messages::-webkit-scrollbar { width: 6px; }
.maizey-messages::-webkit-scrollbar-track { background: transparent; }
.maizey-messages::-webkit-scrollbar-thumb {
	background: var(--maizey-gray-mid);
	border-radius: var(--maizey-radius-pill);
}

/* Message row wrapper */
.maizey-message {
	display: flex;
	flex-direction: column;
	max-width: 85%;
	animation: maizey-fade-in 180ms ease forwards;
}

.maizey-message--user {
	align-self: flex-end;
	align-items: flex-end;
}

.maizey-message--maizey {
	align-self: flex-start;
	align-items: flex-start;
}

/* Bubble */
.maizey-bubble {
	padding: 10px 14px;
	border-radius: var(--maizey-radius-lg);
	font-size: 14px;
	color: var(--maizey-text);
	line-height: 1.6;
	word-break: break-word;
	white-space: pre-wrap;
}

.maizey-message--user .maizey-bubble {
	background: var(--maizey-blue);
	color: var(--maizey-white);
	border-bottom-right-radius: var(--maizey-radius-sm);
}

.maizey-message--maizey .maizey-bubble {
	background: var(--maizey-white);
	border: 1px solid var(--maizey-gray-mid);
	border-bottom-left-radius: var(--maizey-radius-sm);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Error state */
.maizey-message--error .maizey-bubble {
	background: #fff0f0;
	border-color: var(--maizey-danger);
	color: var(--maizey-danger);
}

/* Timestamp */
.maizey-timestamp {
	font-size: 11px;
	color: var(--maizey-gray-text);
	margin-top: 4px;
	padding: 0 4px;
}

/* Markdown-rendered Maizey bubbles (.maizey-bubble--md)
   white-space: pre-wrap is intentionally overridden — block elements handle spacing. */
.maizey-bubble--md {
	white-space: normal;
}

.maizey-bubble--md .maizey-md-h {
	font-size: 14px;
	font-weight: 700;
	color: var(--maizey-navy);
	margin: 10px 0 4px;
	line-height: 1.4;
}

.maizey-bubble--md .maizey-md-h:first-child {
	margin-top: 0;
}

.maizey-bubble--md .maizey-md-hr {
	border: none;
	border-top: 1px solid var(--maizey-gray-mid);
	margin: 8px 0;
}

/* Links inside a response. Maizey returns raw HTML anchors, which the renderer
   re-materialises under an allowlist, so these only started appearing in v1.9.0 —
   before that they were escaped into visible markup. Ross Blue on the light-grey
   response bubble is 7.20:1, and the underline means colour is not the only cue
   (SC 1.4.1). word-break lets a long bare URL wrap instead of overflowing. */
.maizey-bubble--md a,
.maizey-message--maizey .maizey-bubble a {
	color: var(--maizey-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.maizey-bubble--md a:hover,
.maizey-message--maizey .maizey-bubble a:hover {
	color: var(--maizey-navy);
}

.maizey-bubble--md a:focus-visible,
.maizey-message--maizey .maizey-bubble a:focus-visible {
	outline: 2px solid var(--maizey-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Lists use a hanging indent: the marker is absolutely positioned in the gutter
   created by padding-left, so a wrapped line aligns with the first line's TEXT
   rather than running back underneath the bullet or number. The previous
   approach (list-style-position: inside on <ul>, and a static ::before counter
   on <ol>) placed the marker in the content flow, which is what caused wrapped
   text to slide under it.

   --maizey-md-gutter is the marker column width; it is the single value to
   change if the indent needs adjusting. Nested lists inherit it, so each level
   steps in by exactly one gutter. */
.maizey-bubble--md .maizey-md-ul,
.maizey-bubble--md .maizey-md-ol {
	--maizey-md-gutter: 1.6em;
	margin: 4px 0;
	padding-left: var(--maizey-md-gutter);
	list-style: none;
}

/* Nested list — no extra top/bottom margin against its parent item, and it sits
   inside the parent <li>'s content box so its own padding-left produces the
   next indent step. */
.maizey-bubble--md .maizey-md-ul .maizey-md-ul,
.maizey-bubble--md .maizey-md-ul .maizey-md-ol,
.maizey-bubble--md .maizey-md-ol .maizey-md-ul,
.maizey-bubble--md .maizey-md-ol .maizey-md-ol {
	margin: 4px 0 0;
}

.maizey-bubble--md .maizey-md-ul li,
.maizey-bubble--md .maizey-md-ol li {
	position: relative;
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.6;
}

/* Bullet for unordered items, drawn in the gutter. */
.maizey-bubble--md .maizey-md-ul > li::before {
	content: '\2022';
	position: absolute;
	left: calc(var(--maizey-md-gutter) * -1);
	width: var(--maizey-md-gutter);
	color: var(--maizey-gold-dark);
	font-weight: 700;
	text-align: left;
}

/* Nested bullets use a hollow marker so depth is distinguishable at a glance. */
.maizey-bubble--md .maizey-md-ul .maizey-md-ul > li::before {
	content: '\25E6';
}

/* Ordered list — namespaced counter replaces the native list-item counter.
   The Kadence theme resets counter-reset: list-item on every <li>, causing
   all items to render as "1." This counter (maizey-ol) is plugin-namespaced
   so no theme CSS can accidentally reset it. Each <ol> starts its own counter
   scope, so a nested list numbers independently of its parent. */
.maizey-bubble--md .maizey-md-ol {
	counter-reset: maizey-ol;
}

.maizey-bubble--md .maizey-md-ol > li {
	counter-increment: maizey-ol;
}

/* Number sits right-aligned in the gutter so 1. and 10. share a text edge. */
.maizey-bubble--md .maizey-md-ol > li::before {
	content: counter(maizey-ol) '.';
	position: absolute;
	left: calc(var(--maizey-md-gutter) * -1);
	width: calc(var(--maizey-md-gutter) - 0.4em);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.maizey-bubble--md .maizey-md-p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
}

.maizey-bubble--md .maizey-md-p:last-child,
.maizey-bubble--md .maizey-md-p:only-child {
	margin-bottom: 0;
}


.maizey-bubble--md code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 13px;
	background: var(--maizey-gray-light);
	border: 1px solid var(--maizey-gray-mid);
	border-radius: 3px;
	padding: 1px 5px;
}

.maizey-bubble--md strong {
	font-weight: 700;
	color: var(--maizey-navy);
}

.maizey-bubble--md a {
	color: var(--maizey-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.maizey-bubble--md a:hover {
	color: var(--maizey-navy);
}

/* =============================================================================
   7. Typing Indicator
   ============================================================================= */

.maizey-typing {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 12px 16px;
	background: var(--maizey-white);
	border: 1px solid var(--maizey-gray-mid);
	border-radius: var(--maizey-radius-lg);
	border-bottom-left-radius: var(--maizey-radius-sm);
	width: fit-content;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.maizey-typing-dot {
	width: 7px;
	height: 7px;
	background: var(--maizey-blue);
	border-radius: 50%;
	animation: maizey-bounce 1.2s infinite ease-in-out;
}

.maizey-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.maizey-typing-dot:nth-child(3) { animation-delay: 0.4s; }

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

@keyframes maizey-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   8. Copy Response Button
   ============================================================================= */

.maizey-btn-copy {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid var(--maizey-gray-mid);
	border-radius: var(--maizey-radius-sm);
	font-size: 12px;
	color: var(--maizey-gray-text);
	cursor: pointer;
	transition: background var(--maizey-transition), color var(--maizey-transition), border-color var(--maizey-transition);
}

.maizey-btn-copy svg {
	width: 13px;
	height: 13px;
}

.maizey-btn-copy:hover,
.maizey-btn-copy:focus-visible {
	background: var(--maizey-gray-light);
	color: var(--maizey-navy);
	border-color: var(--maizey-blue);
	outline: none;
}

.maizey-btn-copy.is-copied {
	color: #00a32a;
	border-color: #00a32a;
}

/* =============================================================================
   9. Sources Section
   ============================================================================= */

.maizey-sources {
	margin-top: 8px;
	padding: 10px 14px;
	background: var(--maizey-gray-light);
	border-radius: var(--maizey-radius-sm);
	border-left: 3px solid var(--maizey-gold);
	font-size: 13px;
	/* The message wrapper is a flex column with align-items:flex-start, so
	   children shrink to their content. Closed, that made the panel only as
	   wide as its summary; open, the source list stretched it — so the panel
	   visibly changed width on toggle. align-self:stretch pins it to the
	   bubble width in both states. box-sizing keeps the padding and 3px
	   border-left inside that width rather than overflowing it. */
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* <summary> is the accordion toggle. list-style:none + ::marker removes the
   default disclosure triangle in every engine; a custom chevron is drawn below
   so it can be positioned and rotated consistently. */
.maizey-sources-heading {
	display: flex;
	/* flex-start, not center: if the label wraps to two lines the badge and
	   chevron should stay on the first line with it, not float to the middle
	   of a taller row. */
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--maizey-navy);
	cursor: pointer;
	list-style: none;
}

.maizey-sources-heading::-webkit-details-marker { display: none; }
.maizey-sources-heading::marker { content: ''; }

.maizey-sources-heading:focus-visible {
	outline: 2px solid var(--maizey-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

.maizey-sources-heading-text {
	/* min-width:0 lets this shrink below its content width, so the count badge
	   and chevron keep their place instead of being pushed out by a long
	   label. Without it a flex item refuses to go narrower than its longest
	   unbreakable run. */
	flex: 1 1 auto;
	min-width: 0;
}

/* Source count — tells the reader how much is behind the collapsed heading. */
.maizey-sources-count {
	flex-shrink: 0;
	min-width: 18px;
	padding: 1px 6px;
	background: var(--maizey-gold);
	color: var(--maizey-navy);
	border-radius: var(--maizey-radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
}

/* Chevron, rotated when the accordion is open. */
.maizey-sources-heading::after {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--maizey-navy);
	border-bottom: 2px solid var(--maizey-navy);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform var(--maizey-transition);
	/* Nudged down to sit on the cap-height of the first line, now that the row
	   is top-aligned rather than centre-aligned. */
	margin-top: 2px;
}

.maizey-sources[open] > .maizey-sources-heading::after {
	transform: rotate(-135deg);
}

.maizey-sources-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--maizey-gray-mid);
}

/* Each row is its own flex line so the bullet occupies a fixed column and the
   wrapped remainder of a long URL aligns with the first line's text instead of
   sliding back underneath the bullet. */
.maizey-sources-list li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.maizey-sources-list li::before {
	content: '•';
	color: var(--maizey-gold-dark);
	font-weight: 700;
	/* Fixed-width, non-shrinking column: the bullet must not be squeezed or
	   pushed out of line by a long unbroken URL next to it. */
	flex: 0 0 auto;
	line-height: inherit;
}

/* The content beside the bullet absorbs the remaining width, so it is what
   wraps — within its own column, clear of the bullet. min-width:0 is required:
   a flex item will not shrink below the width of its longest unbreakable run
   without it, and a raw URL is exactly that. */
.maizey-sources-list li > .maizey-source-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Source links show the raw URL, which has no spaces to wrap at — break-word
   lets a long address wrap instead of overflowing the accordion. */
.maizey-sources-list a {
	color: var(--maizey-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.maizey-sources-list a:hover {
	color: var(--maizey-navy);
}

/* =============================================================================
   9b. Citations (verified links inside the sources accordion)
   ============================================================================= */

/* Citations repeat, in one checkable list, the links already placed inline on
   their first mention in the answer. Extra row spacing because each row is a
   full URL that often wraps. */
.maizey-sources-list--citations li {
	margin-bottom: 6px;
}

.maizey-sources-list--citations li:last-child {
	margin-bottom: 0;
}

/* Which subsite a verified citation lives on. Muted and inline so it reads as
   provenance attached to the title, not as a second link. */
.maizey-source-site {
	display: inline;
	margin-left: 6px;
	font-size: 12px;
	color: var(--maizey-gray-text);
	white-space: nowrap;
}

.maizey-source-site::before {
	content: '— ';
}

/* Context line introducing the external-sources list. Muted and italic so it
   reads as an explanation of what follows, not as a citation itself. */
.maizey-sources-note {
	margin: 12px 0 6px;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	color: var(--maizey-gray-text);
}

/* Visually-hidden text, for labels and announcements meant only for assistive
   technology. WordPress themes conventionally define .screen-reader-text, but
   this is a network-wide widget that cannot assume any particular theme does —
   and if the rule is missing, the input labels and the sources count label
   render as visible stray text. Defined here so the widget is self-contained.
   Not display:none, which would remove it from the accessibility tree. */
.maizey-chat-widget .screen-reader-text,
#maizey-sr-announcer {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   10. Disclaimer Banner
   ============================================================================= */

/* Inline trigger that opens the fullscreen view from the disclaimer text.
   Styled as a link because it reads as one mid-sentence, but it is a <button>:
   it performs an in-page action and has no URL. */
.maizey-disclaimer-fullscreen {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.maizey-disclaimer-fullscreen:hover {
	text-decoration-thickness: 2px;
}

.maizey-disclaimer-fullscreen:focus-visible {
	outline: 2px solid var(--maizey-navy);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Already in fullscreen — the trigger is disabled in JS (so it is also out of
   the tab order), and here it drops back to plain text. The sentence still
   reads correctly either way. */
.maizey-disclaimer-fullscreen:disabled {
	text-decoration: none;
	cursor: default;
	color: inherit;
	opacity: 1;
}

.maizey-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 16px 4px;
	padding: 10px 12px;
	background: #fffbea;
	border: 1px solid #f0d060;
	border-radius: var(--maizey-radius-sm);
	font-size: 12px;
	color: #5a4a00;
	line-height: 1.5;
	flex-shrink: 0;
}

.maizey-disclaimer-body {
	flex: 1;
}

.maizey-disclaimer p {
	margin: 0;
}

.maizey-btn-dismiss-disclaimer {
	flex-shrink: 0;
	background: transparent;
	border: none;
	font-size: 16px;
	line-height: 1;
	color: #5a4a00;
	cursor: pointer;
	padding: 0 2px;
	opacity: 0.6;
	transition: opacity var(--maizey-transition);
}

.maizey-btn-dismiss-disclaimer:hover {
	opacity: 1;
}

/* =============================================================================
   11. Input Area
   ============================================================================= */

.maizey-input-area {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 14px;
	background: var(--maizey-white);
	border-top: 1px solid var(--maizey-gray-mid);
	flex-shrink: 0;
}

.maizey-textarea {
	flex: 1;
	padding: 10px 12px;
	background: var(--maizey-off-white);
	border: 1px solid var(--maizey-gray-mid);
	border-radius: var(--maizey-radius-md);
	font-size: 14px;
	color: var(--maizey-text);
	resize: none;
	min-height: 42px;
	max-height: 120px;
	overflow-y: auto;
	line-height: 1.5;
	transition: border-color var(--maizey-transition), box-shadow var(--maizey-transition);
}

.maizey-textarea::placeholder {
	color: #aaaaaa;
}

.maizey-textarea:focus {
	outline: none;
	border-color: var(--maizey-blue);
	box-shadow: 0 0 0 3px rgba(33, 83, 135, 0.12);
	background: var(--maizey-white);
}

.maizey-btn-send {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--maizey-gold);
	color: var(--maizey-navy);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--maizey-transition), transform var(--maizey-transition), box-shadow var(--maizey-transition);
}

.maizey-btn-send svg {
	width: 20px;
	height: 20px;
}

.maizey-btn-send:hover:not(:disabled),
.maizey-btn-send:focus-visible:not(:disabled) {
	background: var(--maizey-gold-dark);
	transform: scale(1.06);
	box-shadow: 0 3px 10px rgba(255, 204, 0, 0.4);
	outline: 2px solid var(--maizey-navy);
	outline-offset: 2px;
}

.maizey-btn-send:disabled {
	background: var(--maizey-gray-mid);
	color: #aaaaaa;
	cursor: not-allowed;
}

/* =============================================================================
   12. Fullscreen Overlay
   ============================================================================= */

.maizey-fullscreen-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--maizey-z);
	display: flex;
	background: var(--maizey-white);
	pointer-events: auto;

	/* Hidden by default */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--maizey-transition), visibility var(--maizey-transition);
}

body.maizey-fullscreen .maizey-fullscreen-overlay {
	opacity: 1;
	visibility: visible;
}

/* =============================================================================
   13. Sidebar
   ============================================================================= */

.maizey-sidebar {
	width: var(--maizey-sidebar-w);
	flex-shrink: 0;
	background: var(--maizey-navy);
	color: var(--maizey-white);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.maizey-sidebar-header {
	padding: 20px 16px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
}

.maizey-sidebar-header .maizey-logo {
	height: 40px;
}

.maizey-sidebar-header-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* New Chat button */
.maizey-btn-new-chat {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	background: var(--maizey-gold);
	color: var(--maizey-navy);
	border: none;
	border-radius: var(--maizey-radius-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--maizey-transition), transform var(--maizey-transition);
}

.maizey-btn-new-chat svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.maizey-btn-new-chat:hover,
.maizey-btn-new-chat:focus-visible {
	background: var(--maizey-gold-dark);
	transform: translateY(-1px);
	outline: 2px solid var(--maizey-white);
	outline-offset: 2px;
}

/* Sidebar body — scrollable session list */
.maizey-sidebar-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 0;
}

.maizey-sidebar-body::-webkit-scrollbar { width: 4px; }
.maizey-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.maizey-sidebar-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--maizey-radius-pill);
}

.maizey-sidebar-heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.5);
	padding: 0 16px 8px;
}

/* Sidebar footer — delete all + user info */
.maizey-sidebar-footer {
	padding: 12px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}

/* Delete All button */
.maizey-btn-delete-all {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--maizey-radius-sm);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
	transition: background var(--maizey-transition), color var(--maizey-transition), border-color var(--maizey-transition);
}

.maizey-btn-delete-all svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.maizey-btn-delete-all:hover,
.maizey-btn-delete-all:focus-visible {
	background: rgba(214, 54, 56, 0.15);
	border-color: var(--maizey-danger);
	color: #ff8b8c;
	outline: none;
}

/* User info strip */
.maizey-user-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.maizey-user-avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--maizey-white);
}

.maizey-user-avatar--guest svg {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.7);
}

.maizey-user-name {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =============================================================================
   14. Session List
   ============================================================================= */

/* Date group label (Today, Yesterday, Older) */
.maizey-session-group-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.4);
	padding: 10px 16px 4px;
}

/* Individual session item */
.maizey-session-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px 8px 16px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background var(--maizey-transition), border-color var(--maizey-transition);
	position: relative;
}

.maizey-session-item:hover {
	background: rgba(255, 255, 255, 0.07);
}

.maizey-session-item:focus-visible {
	outline: 2px solid var(--maizey-gold);
	outline-offset: -2px;
}

/* Active session */
.maizey-session-item.is-active {
	border-left-color: var(--maizey-gold);
	background: rgba(255, 255, 255, 0.1);
}

.maizey-session-title-text {
	flex: 1;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.maizey-session-item.is-active .maizey-session-title-text {
	color: var(--maizey-white);
	font-weight: 600;
}

/* Session menu trigger (...) */
.maizey-btn-session-menu {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--maizey-radius-sm);
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	opacity: 0;
	font-size: 18px;
	letter-spacing: 1px;
	transition: opacity var(--maizey-transition), background var(--maizey-transition), color var(--maizey-transition);
}

.maizey-session-item:hover .maizey-btn-session-menu,
.maizey-session-item.is-active .maizey-btn-session-menu {
	opacity: 1;
}

.maizey-btn-session-menu:hover,
.maizey-btn-session-menu:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	color: var(--maizey-white);
	outline: none;
}

/* Session context menu dropdown */
.maizey-session-menu {
	position: fixed;
	z-index: 100009; /* Above fullscreen overlay (99999); hardcoded because menu is appended to <body>, outside --maizey-z custom property scope */
	background: var(--maizey-white);
	border: 1px solid var(--maizey-gray-mid);
	border-radius: var(--maizey-radius-sm);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
	min-width: 160px;
	padding: 4px 0;
	display: none;
}

.maizey-session-menu.is-open {
	display: block;
}

.maizey-session-menu button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 14px;
	background: transparent;
	border: none;
	font-size: 13px;
	color: var(--maizey-danger);
	cursor: pointer;
	transition: background var(--maizey-transition);
}

.maizey-session-menu button:hover,
.maizey-session-menu button:focus-visible {
	background: #fff0f0;
	outline: none;
}

/* Empty state */
.maizey-session-list-empty {
	padding: 16px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
	text-align: center;
	line-height: 1.6;
}

/* =============================================================================
   15. Main Chat Area (Fullscreen)
   ============================================================================= */

.maizey-chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--maizey-off-white);
}

.maizey-chat-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	height: 60px;
	background: var(--maizey-white);
	border-bottom: 1px solid var(--maizey-gray-mid);
	flex-shrink: 0;
}

.maizey-session-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--maizey-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Close fullscreen button (label + icon on white background) */
.maizey-btn-close-fullscreen {
	color: var(--maizey-gray-text);
	/* Overrides .maizey-btn-icon's square icon-only sizing, which would clip
	   the label. */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 6px 10px;
}

.maizey-btn-close-fullscreen-label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.maizey-btn-close-fullscreen:hover,
.maizey-btn-close-fullscreen:focus-visible {
	background: var(--maizey-gray-light);
	color: var(--maizey-navy);
	outline-color: var(--maizey-blue);
}

.maizey-fullscreen-messages {
	/* Full-width so the scrollbar sits at the viewport right edge.
	   clamp() keeps content centered at the same effective ~896px width
	   (860px minus the original 32px side padding × 2). */
	padding: 24px clamp(32px, calc((100% - 896px) / 2), 50%);
	max-width: none;
	width: 100%;
	margin: 0;
}

/* =============================================================================
   16. Chat Footer (Fullscreen)
   ============================================================================= */

.maizey-chat-footer {
	background: var(--maizey-white);
	border-top: 1px solid var(--maizey-gray-mid);
	flex-shrink: 0;
}

.maizey-current-chat-label {
	padding: 8px 32px 0;
	font-size: 12px;
	color: var(--maizey-gray-text);
	max-width: 860px;
	margin: 0 auto;
}

.maizey-current-chat-label strong {
	color: var(--maizey-navy);
}

.maizey-current-chat-label .maizey-current-title {
	color: var(--maizey-blue);
}

.maizey-fullscreen-input {
	max-width: 960px;
	margin: 0 auto;
	padding: 12px 32px;
	border-top: none;
}

/* Per-response accuracy notice, under the sources accordion. Muted and small
   so it reads as a standing caveat rather than part of the answer. */
.maizey-response-disclaimer {
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--maizey-gray-text);
}

/* Hidden in fullscreen, where the same warning is permanently visible in the
   footer. Messages render into both containers, so this is scoped by container
   rather than decided at build time: the same message exists in each, and each
   should show what suits its own chrome. */
.maizey-fullscreen-messages .maizey-response-disclaimer {
	display: none;
}

.maizey-footer-note {
	padding: 8px 32px 12px;
	font-size: 11px;
	color: var(--maizey-gray-text);
	text-align: center;
	border-top: 1px solid var(--maizey-gray-mid);
	max-width: 860px;
	margin: 0 auto;
}

.maizey-footer-note a {
	color: var(--maizey-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.maizey-footer-note a:hover {
	color: var(--maizey-navy);
}

/* =============================================================================
   17. Login Required State
   ============================================================================= */

.maizey-login-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 24px;
	text-align: center;
	gap: 12px;
}

.maizey-login-prompt svg {
	width: 40px;
	height: 40px;
	color: var(--maizey-gray-mid);
}

.maizey-login-prompt p {
	font-size: 14px;
	color: var(--maizey-gray-text);
	max-width: 240px;
	line-height: 1.6;
}

/* =============================================================================
   18. Utility / Shared
   ============================================================================= */

/* Generic .maizey-btn base */
.maizey-btn {
	font-family: var(--maizey-font);
	font-size: 14px;
	cursor: pointer;
}

/* Focus ring — consistent across all interactive elements inside the widget,
   which sit on navy or white surfaces where gold reads clearly. */
.maizey-chat-widget *:focus-visible {
	outline: 2px solid var(--maizey-gold);
	outline-offset: 2px;
}

/* The FAB needs its own navy ring rather than the widget-wide gold one. Keyboard
   focus leaves the button in its default gold state (see the hover rule above),
   so a gold ring would be the same colour as the button it outlines (1.00:1),
   and gold against the page behind it is only 1.51:1 — under the 3:1 SC 1.4.11
   requires. Navy is 8.87:1 against the gold button and 13.42:1 against a white
   page, separating cleanly from both neighbours. */
.maizey-chat-fab:focus-visible {
	outline: 2px solid var(--maizey-navy);
	outline-offset: 2px;
}

/* =============================================================================
   19. Responsive — Mobile (≤ 480px)
   ============================================================================= */

@media (max-width: 480px) {

	.maizey-panel {
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		border-top-left-radius: var(--maizey-radius-md);
		border-top-right-radius: var(--maizey-radius-md);
	}

	.maizey-chat-fab {
		bottom: 16px;
		right: 16px;
	}

	.maizey-chat-widget {
		bottom: 0;
		right: 0;
	}

	/* Fullscreen: hide sidebar, show full-width main area */
	.maizey-sidebar {
		display: none;
	}

	.maizey-chat-main {
		width: 100%;
	}

	.maizey-fullscreen-messages,
	.maizey-fullscreen-input,
	.maizey-current-chat-label,
	.maizey-footer-note {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =============================================================================
   20. Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

	.maizey-panel,
	.maizey-fullscreen-overlay,
	.maizey-chat-fab,
	.maizey-message,
	.maizey-btn-send,
	.maizey-btn-new-chat,
	.maizey-btn-panel-new-chat,
	.maizey-panel-new-chat-label {
		transition: none;
		animation: none;
	}

	.maizey-btn-panel-new-chat:hover .maizey-panel-new-chat-label,
	.maizey-btn-panel-new-chat:focus-visible .maizey-panel-new-chat-label {
		opacity: 1;
	}

	.maizey-typing-dot {
		animation: none;
		opacity: 1;
	}

	/* Sources accordion chevron — snap between states, no rotation tween. */
	.maizey-sources-heading::after {
		transition: none;
	}

	@keyframes maizey-bounce { from, to { transform: none; } }
	@keyframes maizey-fab-enter { from, to { transform: none; opacity: 1; } }
	@keyframes maizey-fade-in { from, to { opacity: 1; transform: none; } }
}