/*
 * n8n Inline Chat
 * Inherits the theme's font and text colour so it reads as part of the page.
 * Override --nic-surface or --nic-line on .nic to fit a specific section.
 */

.nic {
	--nic-accent: #1d6a80;
	--nic-on-accent: #fff;
	--nic-height: 60;
	--nic-line: color-mix(in srgb, currentColor 18%, transparent);
	--nic-muted: color-mix(in srgb, currentColor 64%, transparent);
	--nic-surface: color-mix(in srgb, currentColor 3%, transparent);
	--nic-radius: 18px;
	--nic-beam-color: var(--nic-accent);
	--nic-beam-speed: 2.4s;
	--nic-beam-opacity: 1;
	--nic-beam-length: 25;
	--nic-idle-color: currentColor;
	--nic-idle-speed: 16s;
	--nic-idle-opacity: 0.7;
	--nic-glow-size: 140px;
	--nic-glow-from: 60%;
	--nic-glow-rot: 40%;
	--nic-glow-top: 0%;
	--nic-glow-bottom: 0%;
	--nic-beam-width: 1.5px;

	position: relative;
	width: 100%;
	margin: 0 0 1.5em;
	color: inherit;
	font: inherit;
	text-align: left;
}

.nic *,
.nic *::before,
.nic *::after {
	box-sizing: border-box;
}

/* ---------- Card: bar alone when closed, pane + bar when open ---------- */

.nic-card {
	background: var(--nic-surface);
	border: 1px solid var(--nic-line);
	border-radius: var(--nic-radius);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nic-card:focus-within {
	border-color: color-mix(in srgb, var(--nic-accent) 70%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nic-accent) 18%, transparent);
}

.nic-pane {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nic.is-open .nic-pane {
	grid-template-rows: 1fr;
}

.nic-pane-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 0.34s;
}

.nic.is-open .nic-pane-inner {
	visibility: visible;
	transition-delay: 0s;
}

/* Fixed height lives on the body so the grid row can animate between 0 and this height. */
.nic-pane-body {
	display: flex;
	flex-direction: column;
	height: calc(var(--nic-height) * 1vh);
	height: calc(var(--nic-height) * 1dvh);
	min-height: 320px;
}

/* ---------- Header ---------- */

.nic-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 10px 10px 20px;
	border-bottom: 1px solid var(--nic-line);
}

.nic-title {
	flex: 1;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nic .nic-btn {
	appearance: none;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--nic-muted);
	font: inherit;
	font-size: 0.875em;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.nic .nic-btn:hover {
	background: var(--nic-line);
	color: inherit;
}



/* ---------- Conversation ---------- */

.nic-log {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nic-msg {
	max-width: 85%;
	margin: 0;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.nic-msg-user {
	align-self: flex-end;
	padding: 10px 15px;
	border-radius: 18px 18px 4px 18px;
	background: var(--nic-accent);
	color: var(--nic-on-accent);
}

.nic-msg-user a {
	color: inherit;
}

/* Assistant replies read like page text, marked by the accent rule. */
.nic-msg-assistant {
	align-self: flex-start;
	padding: 2px 0 2px 16px;
	border-left: 2px solid var(--nic-accent);
}

.nic-msg-assistant a {
	color: var(--nic-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nic-msg-error {
	align-self: flex-start;
	padding-left: 16px;
	border-left: 2px solid #c2410c;
	color: #c2410c;
	font-size: 0.925em;
}

.nic-typing {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	height: 1.55em;
}

.nic-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nic-accent);
	animation: nic-dot 1.1s ease-in-out infinite;
}

.nic-typing span:nth-child(2) { animation-delay: 0.15s; }
.nic-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes nic-dot {
	0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Input bar ---------- */

.nic-bar {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 7px 7px 7px 19px; /* +1px transparent border = same size as before */
}

/*
 * Open: the bar becomes a framed bar inside the container. It eases inward
 * from the edges while its own ring appears; the closed bar is unchanged.
 */
.nic-bar {
	position: relative;
	border: 1px solid transparent;
	border-radius: var(--nic-radius);
	transition: margin 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease, box-shadow 0.15s ease, border-radius 0.4s ease;
}

.nic.is-open .nic-bar {
	margin: 4px 12px 12px;
	border-color: var(--nic-line);
	border-radius: calc(var(--nic-radius) - 4px);
}

.nic.is-open .nic-card {
	border-radius: calc(var(--nic-radius) + 4px);
}

/* Focus moves from the whole card to the framed bar once the chat is open. */
.nic.is-open .nic-card:focus-within {
	border-color: var(--nic-line);
	box-shadow: none;
}

.nic.is-open .nic-bar:focus-within {
	border-color: color-mix(in srgb, var(--nic-accent) 70%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nic-accent) 18%, transparent);
}

.nic textarea.nic-input {
	flex: 1;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	max-height: 9em;
	margin: 0;
	padding: 9px 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: max(16px, 1em); /* 16px+ stops iOS from zooming on focus */
	line-height: 1.5;
	resize: none;
	overflow-y: auto;
}

.nic textarea.nic-input::placeholder {
	color: var(--nic-muted);
	opacity: 1;
}

.nic .nic-send {
	appearance: none;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nic-accent);
	box-shadow: none;
	color: var(--nic-on-accent);
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.nic .nic-send:hover:not(:disabled) {
	transform: translateY(-1px);
}

.nic .nic-send:disabled {
	background: color-mix(in srgb, currentColor 14%, transparent);
	color: color-mix(in srgb, currentColor 70%, transparent);
	cursor: default;
}

/* ---------- Under the bar ---------- */

.nic-below {
	padding: 0 4px;
}

.nic .nic-resume {
	appearance: none;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--nic-accent);
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	cursor: pointer;
}

.nic .nic-resume[hidden],
.nic.has-history .nic-starters {
	display: none;
}

.nic-starters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.nic .nic-starter {
	appearance: none;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--nic-line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.nic .nic-starter:hover {
	border-color: var(--nic-accent);
	color: var(--nic-accent);
}

.nic-notice {
	margin: 10px 0 0;
	color: var(--nic-muted);
	font-size: 0.8em;
	line-height: 1.45;
}

.nic-notice a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Page builder preview ---------- */

.nic-preview textarea.nic-input {
	pointer-events: none;
}

.nic-preview .nic-notice {
	padding: 0 4px;
}

/* ---------- Focus, accessibility, motion ---------- */

.nic button:focus-visible,
.nic a:focus-visible {
	outline: 2px solid var(--nic-accent);
	outline-offset: 2px;
}

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

@media (max-width: 600px) {
	.nic-bar { padding-left: 15px; }
	.nic-head { padding-left: 16px; }
	.nic-log { padding: 18px 16px; }
	.nic-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
	.nic-pane,
	.nic-pane-inner,
	.nic-card,
	.nic .nic-send { transition: none; }
	.nic-typing span { animation: none; opacity: 0.6; }
}

/* ======================================================================
 * Full-page mode (the chat page). Additive only: inline styles above are
 * unchanged. The chat fills its container; messages scroll inside and the
 * input stays at the bottom.
 * ==================================================================== */

.nic-full {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: var(--nic-full-min, min(78vh, 720px));
	margin-bottom: 0;
}

.nic-full .nic-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.nic-full .nic-pane {
	display: flex;
	flex: 1;
	min-height: 0;
	transition: none;
}

.nic-full .nic-pane-inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	visibility: visible;
	transition: none;
}

.nic-full .nic-pane-body {
	flex: 1;
	height: auto;
	min-height: 0;
}

.nic-full .nic-bar {
	flex-shrink: 0;
}

.nic .nic-back {
	flex-shrink: 0;
	text-decoration: none;
}

.nic .nic-back[hidden] {
	display: none;
}

.nic-full .nic-head .nic-back:not([hidden]) + .nic-title {
	padding-left: 6px;
}


/* ======================================================================
 * 1.3 additions
 * ==================================================================== */

/* Card radius eases along with the bar when opening. */
.nic-card {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.4s ease;
}

/* ---------- Grows with conversation (inline option) ---------- */

.nic-grow .nic-pane-body {
	height: auto;
	min-height: 0;
	max-height: calc(var(--nic-max, 75) * 1vh);
	max-height: calc(var(--nic-max, 75) * 1dvh);
}

.nic-grow .nic-log {
	flex: 0 1 auto;
}

/* ---------- Jump to latest ---------- */

.nic-pane-body {
	position: relative;
}

.nic .nic-jump {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 2;
	transform: translateX(-50%);
	appearance: none;
	margin: 0;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--nic-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: var(--nic-on-accent);
	font: inherit;
	font-size: 0.8em;
	line-height: 1.4;
	text-transform: none;
	cursor: pointer;
}

.nic .nic-jump[hidden] {
	display: none;
}

/* ---------- Chat page: suggested questions under the greeting ---------- */

.nic-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 0;
}

.nic-chips .nic-starter {
	min-height: 44px; /* touch target */
	display: inline-flex;
	align-items: center;
}

/* ---------- Compact bar (44px, for footer launchers) ---------- */

.nic-compact .nic-bar {
	padding: 2px 2px 2px 15px;
	align-items: center;
}

.nic.nic-compact textarea.nic-input {
	padding: 7px 0;
	font-size: 16px; /* fixed so the bar is 44px whatever the theme's text size */
	line-height: 22px;
}

.nic.nic-compact .nic-send {
	width: 36px;
	height: 36px;
}

/* Keep a 44px touch target around the smaller button. */
.nic-compact .nic-send::before {
	content: "";
	position: absolute;
	inset: -4px;
}

.nic-compact .nic-send {
	position: relative;
}

/* ---------- Beam (drawn by beam.js as an SVG stroke at an even pace) ---------- */

.nic-beam-svg {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	border-radius: calc(var(--nic-radius) - 4px); /* matches the open, framed bar */
	overflow: visible;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

/* Closed: the beam runs just inside the card's border (the card clips its edge). */
.nic:not(.is-open) .nic-beam-svg {
	border-radius: calc(var(--nic-radius) - 1px);
}

.nic-beam-svg rect {
	fill: none;
	stroke: var(--nic-b-color, var(--nic-beam-color));
	stroke-linecap: round;
}

.nic-beam-svg .nic-beam-t1 { opacity: 0.22; }
.nic-beam-svg .nic-beam-t2 { opacity: 0.5; }
.nic-beam-svg .nic-beam-t3 { opacity: 1; }

.nic-beam-svg[data-beam="reply"] {
	--nic-b-color: var(--nic-beam-color);
	opacity: var(--nic-beam-opacity);
	transition: opacity 0.2s ease-in;
}

/* ---------- Glow: a soft light travelling along the bar's border ---------- */

.nic-glow {
	--nic-glow-r: calc(var(--nic-radius) - 4px);
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	border-radius: var(--nic-glow-r);
	overflow: hidden; /* the light leaks inward only */
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.nic:not(.is-open) .nic-glow {
	--nic-glow-r: calc(var(--nic-radius) - 1px);
}

.nic-glow-light {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--nic-glow-size);
	height: var(--nic-glow-size);
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--nic-idle-color) 0%, color-mix(in srgb, var(--nic-idle-color) 40%, transparent) 38%, transparent 100%);
	offset-path: inset(0 round var(--nic-glow-r));
	offset-anchor: center;
	offset-rotate: 0deg;
	offset-distance: var(--nic-glow-from);
}

/* Inside the bar: a faint wash of light. */
.nic-glow > .nic-glow-light {
	opacity: 0.35;
}

/* On the border itself: the same light, brighter, so the edge catches it. */
.nic-glow-edge {
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Slow circling: closed bar only, until the first tap or click. */
.nic-glow-circle[data-idle="on"]:not(.is-open) .nic-glow {
	opacity: var(--nic-idle-opacity);
}

.nic-glow-circle[data-idle="on"]:not(.is-open) .nic-glow-light {
	animation: nic-glow-run var(--nic-idle-speed) linear infinite;
}

.nic-glow-circle.nic-offscreen .nic-glow-light {
	animation-play-state: paused;
}

@keyframes nic-glow-run {
	from { offset-distance: var(--nic-glow-from); }
	to { offset-distance: calc(var(--nic-glow-from) + 100%); }
}

/* Follows scroll: always on; steps aside while a reply is on its way. */
.nic-glow-scroll .nic-glow {
	opacity: var(--nic-idle-opacity);
}

.nic-glow-scroll[data-state="thinking"] .nic-glow {
	opacity: 0;
}

@supports (animation-timeline: view()) {
	.nic-glow-scroll {
		view-timeline-name: --nic-glow;
		view-timeline-axis: block;
		view-timeline-inset: var(--nic-glow-top) var(--nic-glow-bottom);
	}

	.nic-glow-scroll .nic-glow-light {
		animation: nic-glow-scroll linear both;
		animation-timeline: --nic-glow;
		animation-range: cover 0% cover 100%;
	}
}

@keyframes nic-glow-scroll {
	from { offset-distance: var(--nic-glow-from); }
	to { offset-distance: calc(var(--nic-glow-from) + var(--nic-glow-rot)); }
}

/* ---------- Touch screens: scrolling stays inside the conversation at its ends ---------- */

@media (pointer: coarse) {
	.nic-log {
		overscroll-behavior: contain;
	}
}

/* ---------- Message list tail (typing, error, chips, handover note) ---------- */

.nic-log-tail {
	display: contents;
}

/* ---------- Long-conversation note (inline, soft handover) ---------- */

.nic-handover {
	align-self: stretch;
	padding: 12px 14px;
	border: 1px solid var(--nic-line);
	border-radius: calc(var(--nic-radius) - 4px);
}

.nic-handover p {
	margin: 0 0 10px;
	color: var(--nic-ho-note, var(--nic-muted));
	font-size: 0.9em;
	line-height: 1.5;
}

.nic .nic-handover-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--nic-ho-border, var(--nic-line));
	border-radius: 999px;
	background: var(--nic-ho-bg, transparent);
	color: var(--nic-ho-color, inherit);
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nic .nic-handover-btn:hover {
	border-color: var(--nic-ho-border-hover, var(--nic-accent));
	background: var(--nic-ho-bg-hover, var(--nic-ho-bg, transparent));
	color: var(--nic-ho-color-hover, var(--nic-accent));
}

/* Filled */
.nic.nic-ho-filled .nic-handover-btn {
	border-color: var(--nic-ho-border, transparent);
	background: var(--nic-ho-bg, var(--nic-accent));
	color: var(--nic-ho-color, var(--nic-on-accent));
}

.nic.nic-ho-filled .nic-handover-btn:hover {
	border-color: var(--nic-ho-border-hover, var(--nic-ho-border, transparent));
	background: var(--nic-ho-bg-hover, var(--nic-ho-bg, var(--nic-accent)));
	color: var(--nic-ho-color-hover, var(--nic-ho-color, var(--nic-on-accent)));
	opacity: 0.92;
}

/* Text link */
.nic.nic-ho-link .nic-handover-btn {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--nic-ho-bg, transparent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.nic-bar,
	.nic-card {
		transition: none;
	}

	/* A steady accent ring instead of the moving beam; the glow rests. */
	.nic-beam-svg {
		display: none;
	}

	.nic-glow-light,
	.nic-glow-scroll .nic-glow-light {
		animation: none !important;
	}

	.nic-beam[data-state="thinking"] .nic-bar {
		border-color: var(--nic-beam-color);
	}
}


/* ======================================================================
 * 1.6: header switches, × close, message spacing
 * Per-device switches set these properties from the Elementor widget:
 *   --nic-head-display, --nic-name-display, --nic-new-display,
 *   --nic-back-display (flex/inline-flex or none), --nic-head-gap.
 * ==================================================================== */

.nic-head {
	display: var(--nic-head-display, flex);
}

.nic .nic-title {
	display: var(--nic-name-display, block);
}

/* Hidden buttons stay in the page, so shortcuts that press them keep working. */
.nic .nic-head .nic-new {
	display: var(--nic-new-display, inline-flex);
	margin-left: auto;
	flex-shrink: 0;
}

.nic .nic-back:not([hidden]) {
	display: var(--nic-back-display, inline-block);
	white-space: nowrap;
}

/* Narrow screens: "← Back" instead of "← Back to where you were". */
@media (max-width: 600px) {
	.nic .nic-back-long {
		display: none;
	}
}

/* × close: right end of the header, or the open chat's corner when the header is hidden. */
.nic:not(.nic-full) .nic-head {
	padding-right: 52px;
	min-height: 52px;
}

.nic .nic-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.nic .nic-close::before {
	content: "";
	position: absolute;
	inset: -4px; /* 44px tap area */
}

.nic .nic-close:hover {
	background: var(--nic-line);
}

/* Header hidden: keep messages clear of the ×. */
.nic:not(.nic-full) .nic-log {
	padding-top: calc(22px + var(--nic-head-gap, 0px));
}

/* Messages: spacing set per device in the widget. */
.nic .nic-log {
	gap: var(--nic-msg-gap, 16px);
}