/**
 * Nadira chat widget styles.
 *
 * Everything is scoped under #nadira-chat-root and carries its own tokens with
 * literal brand values, because a WordPress theme will not have the NadirEO
 * design system loaded. `box-sizing`, fonts and resets are restated on the
 * widget's own elements so an opinionated theme cannot reshape them.
 *
 * Brand values come from the Visual Identity Manual v1.2 (nadireo.css):
 * Deep Orbit Blue #003366, Earthlink Teal #008A88, Zenith White #F0F0F0.
 */

#nadira-chat-root {
	--nadira-teal: #008a88;
	--nadira-teal-hi: #1fb8b6;
	--nadira-blue: #003366;
	--nadira-ink: #003366;
	--nadira-ink-muted: #5a6b7a;
	--nadira-surface: #ffffff;
	--nadira-surface-2: #f5f7f9;
	--nadira-border: rgba(0, 51, 102, 0.14);
	--nadira-on-teal: #ffffff;
	--nadira-radius: 14px;
	--nadira-font: 'Avenir Next', 'Avenir', 'Manrope', system-ui, -apple-system,
		'Segoe UI', Roboto, Arial, sans-serif;

	/* A viewport-sized layer that ignores pointer events itself, so only the
	   launcher and the panel are clickable and the page stays interactive. */
	position: fixed;
	inset: 0;
	z-index: 99000;
	pointer-events: none;
	font-family: var(--nadira-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--nadira-ink);
}

#nadira-chat-root[hidden] {
	display: none;
}

#nadira-chat-root * {
	box-sizing: border-box;
}

#nadira-chat-root > * {
	pointer-events: auto;
}

/* ------------------------------------------------------------- launcher */

/* The launcher is one positioned object holding the bubble and the pill, so
   they travel together — and so the bubble sits beside the pill by layout
   rather than by a hard-coded offset that guessed the pill's width. */
.nadira-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.is-left .nadira-launcher {
	right: auto;
	left: 20px;
	/* Bubble on the far side, so it never sits off the edge of the window. */
	flex-direction: row-reverse;
}

.nadira-launcher[hidden] {
	display: none;
}

.nadira-fab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--nadira-teal);
	color: var(--nadira-on-teal);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(0, 138, 136, 0.42);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Drag handle for the closed state. It is also the button that opens the
   chat, so the JS only treats a movement past a few pixels as a drag. */
.nadira-fab {
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.nadira-launcher.is-dragging .nadira-fab {
	cursor: grabbing;
	transform: none;
}

.nadira-launcher.is-moved .nadira-bubble {
	animation: none;
}

@media (max-width: 520px) {
	.nadira-fab { touch-action: auto; }
}

.nadira-fab:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(0, 138, 136, 0.52);
	background: var(--nadira-teal);
	color: var(--nadira-on-teal);
}

.nadira-fab:disabled {
	opacity: 0.6;
	cursor: default;
}

.nadira-fab svg {
	width: 20px;
	height: 20px;
	flex: none;
}

/* Pin the launcher's own typography. A theme that sizes buttons or their
   inner spans would otherwise reshape the only control the visitor sees. */
#nadira-chat-root .nadira-fab,
#nadira-chat-root .nadira-fab span {
	font-family: var(--nadira-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nadira-on-teal);
}

/* Attention bubble next to the launcher. Filled teal rather than a white
   surface so it stays legible over any hero image. */
.nadira-bubble {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px 9px 14px;
	border: 1px solid var(--nadira-teal);
	border-radius: 14px;
	background: var(--nadira-teal);
	color: var(--nadira-on-teal);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	animation: nadira-bubble-in 0.28s ease-out;
}

.nadira-bubble::after {
	content: '';
	position: absolute;
	right: -6px;
	top: 50%;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(45deg);
	background: var(--nadira-teal);
}

.is-left .nadira-bubble::after {
	right: auto;
	left: -6px;
}

.nadira-bubble-text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

@keyframes nadira-bubble-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- panel */

.nadira-panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: min(600px, calc(100vh - 40px));
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 0;
	border: 1px solid var(--nadira-border);
	border-radius: var(--nadira-radius);
	background: var(--nadira-surface);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
	animation: nadira-panel-in 0.18s ease-out;
	overflow: hidden;
}

.is-left .nadira-panel {
	right: auto;
	left: 20px;
}

@keyframes nadira-panel-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.nadira-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--nadira-border);
	background: var(--nadira-surface);
	/* The drag handle. `touch-action: none` so a finger drags the panel
	   instead of scrolling the page underneath it, and no text selection,
	   because selecting the title is never what a drag means. */
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.nadira-panel.is-dragging .nadira-head {
	cursor: grabbing;
}

/* The header's own controls stay buttons, not handles. */
.nadira-head .nadira-icon-btn {
	cursor: pointer;
	touch-action: auto;
}

/* A panel restored to a stored position must not also slide in from the
   corner it no longer sits in. */
.nadira-panel.is-moved {
	animation: none;
}

@media (max-width: 520px) {
	/* Full-bleed by design down here, so it is not a movable object. */
	.nadira-head {
		cursor: default;
		touch-action: auto;
	}
}

.nadira-head-title {
	flex: 1;
	min-width: 0;
}

.nadira-head-title b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--nadira-blue);
}

.nadira-head-title span {
	display: block;
	font-size: 12px;
	color: var(--nadira-ink-muted);
}

.nadira-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--nadira-ink-muted);
	cursor: pointer;
}

.nadira-icon-btn:hover:not(:disabled) {
	background: var(--nadira-surface-2);
	color: var(--nadira-blue);
}

.nadira-icon-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.nadira-icon-btn svg {
	width: 16px;
	height: 16px;
}

.nadira-bubble .nadira-icon-btn {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.92);
}

.nadira-bubble .nadira-icon-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.nadira-bubble .nadira-icon-btn svg {
	width: 11px;
	height: 11px;
}

/* ----------------------------------------------------------------- body */

.nadira-body {
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--nadira-surface);
}

.nadira-empty {
	padding: 18px 4px;
	text-align: center;
	color: var(--nadira-ink-muted);
}

.nadira-empty p {
	margin: 0 0 14px;
	font-size: 13px;
}

.nadira-prompts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nadira-prompt {
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--nadira-border);
	border-radius: 10px;
	background: var(--nadira-surface-2);
	color: var(--nadira-ink);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.nadira-prompt:hover {
	border-color: var(--nadira-teal);
}

.nadira-msg {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.nadira-msg.is-user {
	align-items: flex-end;
}

.nadira-msg-body {
	max-width: 92%;
	padding: 9px 12px;
	border-radius: 12px;
	background: var(--nadira-surface-2);
	color: var(--nadira-ink);
	font-size: 13.5px;
	overflow-wrap: anywhere;
}

.nadira-msg.is-user .nadira-msg-body {
	background: var(--nadira-teal);
	color: var(--nadira-on-teal);
}

.nadira-msg-body > *:first-child { margin-top: 0; }
.nadira-msg-body > *:last-child  { margin-bottom: 0; }

.nadira-msg-body p,
.nadira-msg-body ul,
.nadira-msg-body ol {
	margin: 0 0 8px;
}

.nadira-msg-body ul,
.nadira-msg-body ol {
	padding-left: 20px;
}

.nadira-msg-body li {
	margin: 2px 0;
}

/* Typography has to be pinned on the descendants, not just the container.
   A theme's own `p` / `li` / heading rules apply to those elements directly,
   which beats inheriting from .nadira-msg-body -- so the answer body would
   render at the theme's article size while the rest of the chat stayed at
   13.5px. Everything here is ID-scoped so even a theme selector like
   `.entry-content p` cannot outrank it. */
#nadira-chat-root .nadira-msg-body,
#nadira-chat-root .nadira-msg-body p,
#nadira-chat-root .nadira-msg-body ul,
#nadira-chat-root .nadira-msg-body ol,
#nadira-chat-root .nadira-msg-body li,
#nadira-chat-root .nadira-msg-body a,
#nadira-chat-root .nadira-msg-body strong,
#nadira-chat-root .nadira-msg-body em {
	font-family: var(--nadira-font);
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

#nadira-chat-root .nadira-msg-body h3,
#nadira-chat-root .nadira-msg-body h4,
#nadira-chat-root .nadira-msg-body h5,
#nadira-chat-root .nadira-msg-body h6 {
	margin: 10px 0 6px;
	font-family: var(--nadira-font);
	font-size: 14px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nadira-blue);
}

#nadira-chat-root .nadira-msg-body code,
#nadira-chat-root .nadira-pre,
#nadira-chat-root .nadira-pre code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.45;
}

.nadira-msg-body a {
	color: var(--nadira-teal);
	text-decoration: underline;
}

.nadira-msg-body code {
	padding: 1px 4px;
	border-radius: 4px;
	background: rgba(0, 51, 102, 0.08);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}

.nadira-pre {
	margin: 8px 0;
	padding: 10px;
	overflow-x: auto;
	border-radius: 8px;
	background: rgba(0, 51, 102, 0.06);
}

.nadira-pre code {
	padding: 0;
	background: none;
}

.nadira-dots {
	color: var(--nadira-ink-muted);
	font-size: 13px;
	font-style: italic;
}

/* Service chips returned by /recommend/sse */
/* Suggested services are stacked buttons, not a row of pills: they are the
   main call to action under an answer, and each one is a service name that
   needs room to be read rather than a tag to be scanned. Same shape as the
   empty-state prompt buttons on purpose. */
.nadira-chips {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	max-width: 92%;
}

/* The building blocks are context, not the answer: same shape, less weight. */
.nadira-chips.is-supporting {
	margin-top: 2px;
	opacity: 0.85;
}

#nadira-chat-root .nadira-chips.is-supporting a.nadira-chip,
#nadira-chat-root .nadira-chips.is-supporting a.nadira-chip:link,
#nadira-chat-root .nadira-chips.is-supporting a.nadira-chip:visited {
	font-weight: 400;
	font-size: 12.5px;
	padding: 7px 12px;
	background: transparent;
}

.nadira-chips-label {
	width: 100%;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nadira-ink-muted);
}

.nadira-chip {
	display: block;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--nadira-border);
	border-radius: 10px;
	background: var(--nadira-surface-2);
	color: var(--nadira-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.nadira-chip:hover {
	border-color: var(--nadira-teal);
	background: var(--nadira-surface-2);
	color: var(--nadira-ink);
}

/* A chip that links to a service page is an <a>, and theme anchor rules would
   otherwise repaint and underline it into looking like body-text link. Same
   lesson as the launcher in 0.6.0: pin every state a theme likes to style, so
   a linked service is visually indistinguishable from a button. */
#nadira-chat-root a.nadira-chip,
#nadira-chat-root a.nadira-chip:link,
#nadira-chat-root a.nadira-chip:visited,
#nadira-chat-root a.nadira-chip:hover,
#nadira-chat-root a.nadira-chip:focus,
#nadira-chat-root a.nadira-chip:active {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid var(--nadira-border);
	border-radius: 10px;
	background: var(--nadira-surface-2);
	color: var(--nadira-ink);
	font-family: var(--nadira-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: left;
	box-shadow: none;
}

#nadira-chat-root a.nadira-chip:hover,
#nadira-chat-root a.nadira-chip:focus {
	border-color: var(--nadira-teal);
}

/* Small outbound mark, so a button that leaves the page says so. */
#nadira-chat-root a.nadira-chip::after {
	content: ' \2197'; /* north-east arrow */
	font-weight: 400;
	opacity: 0.6;
}

.nadira-sources {
	max-width: 92%;
	font-size: 12px;
	color: var(--nadira-ink-muted);
}

#nadira-chat-root .nadira-sources,
#nadira-chat-root .nadira-sources summary,
#nadira-chat-root .nadira-sources li,
#nadira-chat-root .nadira-sources em {
	font-family: var(--nadira-font);
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
}

.nadira-sources summary {
	cursor: pointer;
	color: var(--nadira-teal);
}

.nadira-sources ul {
	margin: 6px 0 0;
	padding-left: 16px;
}

.nadira-sources li {
	margin-bottom: 6px;
}

.nadira-sources em {
	display: block;
	opacity: 0.85;
}

#nadira-chat-root .nadira-mono {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	color: var(--nadira-ink);
}

/* ----------------------------------------------------------------- foot */

.nadira-foot {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--nadira-border);
	background: var(--nadira-surface);
}

.nadira-foot textarea {
	flex: 1;
	min-height: 38px;
	max-height: 120px;
	padding: 9px 10px;
	border: 1px solid var(--nadira-border);
	border-radius: 10px;
	background: var(--nadira-surface);
	color: var(--nadira-ink);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.4;
	resize: none;
	overflow-y: auto;
}

.nadira-foot textarea:focus {
	outline: 2px solid var(--nadira-teal);
	outline-offset: -1px;
	border-color: var(--nadira-teal);
}

.nadira-send {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--nadira-teal);
	color: var(--nadira-on-teal);
}

.nadira-send:hover:not(:disabled) {
	background: var(--nadira-teal-hi);
	color: var(--nadira-on-teal);
}

/* --------------------------------------------------------- small screens */

@media (max-width: 520px) {
	.nadira-panel {
		right: 8px;
		left: 8px;
		bottom: 8px;
		width: auto;
		max-width: none;
		height: min(78vh, calc(100vh - 16px));
	}

	.is-left .nadira-panel {
		left: 8px;
		right: 8px;
	}

	.nadira-bubble {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nadira-panel,
	.nadira-bubble {
		animation: none;
	}

	.nadira-fab {
		transition: none;
	}
}