/* ==========================================================================
   NotyLab Site Assistant — floating chat widget
   Built on the theme tokens (--color-*) so colour schemes and dark mode
   follow the site automatically; every token has a standalone fallback.
   ========================================================================== */

.nlsa {
	--nlsa-primary: var(--color-primary, #4F46E5);
	--nlsa-primary-rgb: var(--color-primary-rgb, 79, 70, 229);
	/* --nlsa-fill backs white text; --nlsa-primary colours text and outlines. */
	--nlsa-fill: var(--nlsa-primary);
	--nlsa-accent: #9333EA;
	--nlsa-gradient: linear-gradient(135deg, var(--nlsa-fill) 0%, var(--nlsa-accent) 100%);
	--nlsa-tint: rgba(var(--nlsa-primary-rgb), .08);
	--nlsa-tint-strong: rgba(var(--nlsa-primary-rgb), .14);

	--nlsa-surface: var(--color-surface, #FFFFFF);
	--nlsa-canvas: var(--color-bg, #F8FAFC);
	--nlsa-raised: #FFFFFF;
	--nlsa-border: var(--color-border, #E2E8F0);
	--nlsa-border-soft: var(--color-border-light, #F1F5F9);
	--nlsa-text: var(--color-text, #0F172A);
	--nlsa-heading: var(--color-heading, #0F172A);
	--nlsa-muted: var(--color-text-secondary, #475569);
	--nlsa-subtle: var(--color-text-muted, #94A3B8);
	--nlsa-success: var(--color-success, #10B981);
	--nlsa-error: var(--color-error, #EF4444);
	--nlsa-error-rgb: var(--color-error-rgb, 239, 68, 68);

	--nlsa-shadow-panel: 0 0 0 1px rgba(15, 23, 42, .04), 0 12px 24px -8px rgba(15, 23, 42, .12), 0 32px 64px -16px rgba(15, 23, 42, .22);
	--nlsa-shadow-bubble: 0 1px 2px rgba(15, 23, 42, .05);
	--nlsa-ease: cubic-bezier(.22, 1, .36, 1);

	/* Icons (masks, so they take currentColor) */
	--nlsa-i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3.5l1.8 4.9a3 3 0 0 0 1.8 1.8l4.9 1.8-4.9 1.8a3 3 0 0 0-1.8 1.8L11 20.5l-1.8-4.9a3 3 0 0 0-1.8-1.8L2.5 12l4.9-1.8a3 3 0 0 0 1.8-1.8z'/%3E%3Cpath d='M19 1.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E");
	--nlsa-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.9 14 10h5.8a2 2 0 0 1 1.9 2.6l-2.3 8a2 2 0 0 1-1.9 1.4H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.8a2 2 0 0 0 1.8-1.1L12 2a3.1 3.1 0 0 1 3 3.9z'/%3E%3C/svg%3E");
	--nlsa-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14V2'/%3E%3Cpath d='M9 18.1 10 14H4.2a2 2 0 0 1-1.9-2.6l2.3-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.8a2 2 0 0 0-1.8 1.1L12 22a3.1 3.1 0 0 1-3-3.9z'/%3E%3C/svg%3E");
	--nlsa-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--nlsa-i-retry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
	--nlsa-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.7 9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--nlsa-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
	--nlsa-i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
	--nlsa-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2' fill='black'/%3E%3C/svg%3E");
	--nlsa-i-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.2 7.8-1.8 5.4a2 2 0 0 1-1.2 1.2l-5.4 1.8 1.8-5.4a2 2 0 0 1 1.2-1.2z'/%3E%3C/svg%3E");
	--nlsa-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");

	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 99990;
	font-family: Inter, "IRANSansX", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--nlsa-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@supports (color: color-mix(in oklab, red, blue)) {
	.nlsa { --nlsa-accent: color-mix(in oklab, var(--nlsa-fill) 55%, #C026D3); }
}

[data-theme="dark"] .nlsa {
	/* The dark theme lightens --color-primary for text; fills need the deeper shade. */
	--nlsa-fill: var(--color-primary-hover, #6366F1);
	--nlsa-canvas: var(--color-bg, #1E1E1E);
	--nlsa-raised: var(--color-surface-alt, #2D2D2D);
	--nlsa-tint: rgba(var(--nlsa-primary-rgb), .16);
	--nlsa-tint-strong: rgba(var(--nlsa-primary-rgb), .26);
	--nlsa-shadow-panel: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 64px -12px rgba(0, 0, 0, .7);
	--nlsa-shadow-bubble: none;
}

.nlsa *,
.nlsa *::before,
.nlsa *::after { box-sizing: border-box; }

.nlsa button {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	-webkit-tap-highlight-color: transparent;
}

.nlsa svg { display: block; flex: none; }

/* Shared mask-icon mechanics */
.nlsa-prompts button::before,
.nlsa-feedback button::before,
.nlsa-cta::after,
.nlsa-retry::before,
.nlsa-foot__note::before,
.nlsa-msg.is-error > div:first-child::before {
	content: "";
	flex: none;
	background: currentColor;
	-webkit-mask: var(--nlsa-icon) center / contain no-repeat;
	mask: var(--nlsa-icon) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Launcher */

.nlsa-launch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0;
	padding-inline: 7px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--nlsa-gradient);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 28px -6px rgba(var(--nlsa-primary-rgb), .6), 0 3px 8px rgba(15, 23, 42, .12);
	transition: transform .3s var(--nlsa-ease), box-shadow .3s var(--nlsa-ease), padding .35s var(--nlsa-ease), gap .35s var(--nlsa-ease);
	isolation: isolate;
}

.nlsa-launch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(var(--nlsa-primary-rgb), .45);
	animation: nlsa-beacon 2.4s var(--nlsa-ease) 1.2s 2;
}

.nlsa-launch:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 36px -8px rgba(var(--nlsa-primary-rgb), .7), 0 4px 10px rgba(15, 23, 42, .14);
}

.nlsa-launch:active { transform: translateY(0) scale(.97); }

.nlsa-launch__orb {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset;
}

.nlsa-launch__orb svg {
	grid-area: 1 / 1;
	width: 20px;
	height: 20px;
	transition: transform .4s var(--nlsa-ease), opacity .25s ease;
}

.nlsa-launch__chevron { opacity: 0; transform: rotate(-90deg) scale(.5); }

.nlsa-launch__label {
	max-width: 180px;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .35s var(--nlsa-ease), opacity .2s ease;
}

.nlsa-launch[aria-expanded="true"] { padding-inline: 7px; gap: 0; }
.nlsa-launch[aria-expanded="true"] .nlsa-launch__label { max-width: 0; opacity: 0; }
.nlsa-launch[aria-expanded="true"] .nlsa-launch__spark { opacity: 0; transform: rotate(90deg) scale(.5); }
.nlsa-launch[aria-expanded="true"] .nlsa-launch__chevron { opacity: 1; transform: none; }
.nlsa-launch[aria-expanded="true"]::after { animation: none; }

/* --------------------------------------------------------------------- Panel */

.nlsa-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 32px));
	height: min(680px, calc(100vh - 120px));
	min-height: 320px;
	overflow: hidden;
	background: var(--nlsa-canvas);
	border-radius: 24px;
	box-shadow: var(--nlsa-shadow-panel);
	transform-origin: calc(100% - 26px) 100%;
	animation: nlsa-panel-in .38s var(--nlsa-ease);
}

.nlsa-panel[hidden] { display: none; }

/* Header */
.nlsa-head {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 14px 16px 18px;
	padding-inline: 18px 14px;
	background:
		radial-gradient(120% 180% at 0% 0%, rgba(var(--nlsa-primary-rgb), .12) 0%, transparent 55%),
		var(--nlsa-surface);
	border-bottom: 1px solid var(--nlsa-border);
}

.nlsa-head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--nlsa-gradient);
}

.nlsa-head__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.nlsa-avatar {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: var(--nlsa-gradient);
	color: #FFFFFF;
	box-shadow: 0 6px 16px -6px rgba(var(--nlsa-primary-rgb), .7), 0 1px 0 rgba(255, 255, 255, .25) inset;
}

.nlsa-avatar svg { width: 21px; height: 21px; }

.nlsa-avatar::after {
	content: "";
	position: absolute;
	inset-inline-end: -3px;
	bottom: -3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--nlsa-success);
	border: 2.5px solid var(--nlsa-surface);
}

.nlsa-head__text { min-width: 0; }

.nlsa-head strong {
	display: block;
	color: var(--nlsa-heading);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nlsa-status {
	display: block;
	margin-top: 2px;
	color: var(--nlsa-muted);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nlsa-head-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.nlsa-icon-btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: var(--nlsa-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.nlsa-icon-btn svg { width: 18px; height: 18px; }
.nlsa-icon-btn:hover { background: var(--nlsa-tint); color: var(--nlsa-primary); }
.nlsa-icon-btn:disabled { opacity: .4; cursor: default; background: transparent; color: var(--nlsa-muted); }

/* ------------------------------------------------------------------ Messages */

.nlsa-messages {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 16px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--nlsa-border) transparent;
}

.nlsa-messages::-webkit-scrollbar { width: 6px; }
.nlsa-messages::-webkit-scrollbar-thumb { background: var(--nlsa-border); border-radius: 6px; }

/* Empty-state intro */
.nlsa-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 12px 6px;
	text-align: center;
	animation: nlsa-rise .5s var(--nlsa-ease) both;
}

.nlsa-intro__orb {
	position: relative;
	width: 60px;
	height: 60px;
	margin-bottom: 14px;
	border-radius: 20px;
	background: var(--nlsa-gradient);
	color: #FFFFFF;
	box-shadow: 0 0 0 6px var(--nlsa-tint), 0 14px 30px -10px rgba(var(--nlsa-primary-rgb), .8);
}

.nlsa-intro__orb::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 28px;
	height: 28px;
	background: currentColor;
	-webkit-mask: var(--nlsa-i-spark) center / contain no-repeat;
	mask: var(--nlsa-i-spark) center / contain no-repeat;
}

.nlsa-intro strong {
	display: block;
	color: var(--nlsa-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.015em;
}

.nlsa-intro p {
	max-width: 290px;
	margin: 6px 0 0;
	color: var(--nlsa-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* Message shell: the shell follows the widget's direction (so avatars and
   alignment stay put), while its content follows the text's own direction. */
.nlsa-msg {
	position: relative;
	max-width: 88%;
	font-size: 14px;
	line-height: 1.65;
	direction: inherit;
	unicode-bidi: normal;
	animation: nlsa-rise .32s var(--nlsa-ease) both;
}

.nlsa-msg[dir="rtl"] { text-align: right; }
.nlsa-msg[dir="ltr"] { text-align: left; }
.nlsa-msg[dir="rtl"] > * { direction: rtl; }
.nlsa-msg[dir="ltr"] > * { direction: ltr; }

.nlsa-msg > div:first-child {
	padding: 11px 15px;
	border-radius: 18px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.nlsa-msg--user { align-self: flex-end; }

.nlsa-msg--user > div:first-child {
	background: var(--nlsa-gradient);
	color: #FFFFFF;
	border-bottom-right-radius: 6px;
	box-shadow: 0 6px 16px -8px rgba(var(--nlsa-primary-rgb), .7);
}

.nlsa-msg--assistant {
	align-self: flex-start;
	max-width: 92%;
	padding-inline-start: 38px;
}

.nlsa-msg--assistant::before,
.nlsa-msg--assistant::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 2px;
	width: 28px;
	height: 28px;
}

.nlsa-msg--assistant::before {
	border-radius: 10px;
	background: var(--nlsa-gradient);
	box-shadow: 0 4px 10px -4px rgba(var(--nlsa-primary-rgb), .7);
}

.nlsa-msg--assistant::after {
	background: #FFFFFF;
	-webkit-mask: var(--nlsa-i-spark) center / 15px no-repeat;
	mask: var(--nlsa-i-spark) center / 15px no-repeat;
}

.nlsa-msg--assistant > div:first-child {
	background: var(--nlsa-raised);
	color: var(--nlsa-text);
	border: 1px solid var(--nlsa-border);
	border-bottom-left-radius: 6px;
	box-shadow: var(--nlsa-shadow-bubble);
}

/* Bubble tails point at the sender's side of the widget, whatever the text direction. */
html[dir="rtl"] .nlsa-msg--user > div:first-child { border-bottom-right-radius: 18px; border-bottom-left-radius: 6px; }
html[dir="rtl"] .nlsa-msg--assistant > div:first-child { border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }

/* Assistant is thinking */
.nlsa-msg.is-waiting > div:first-child {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--nlsa-muted);
	font-size: 13px;
}

.nlsa-msg.is-waiting > div:first-child::before {
	--nlsa-dot: no-repeat radial-gradient(circle closest-side, currentColor 90%, transparent);
	content: "";
	flex: none;
	width: 26px;
	height: 8px;
	color: var(--nlsa-primary);
	background: var(--nlsa-dot) 0% 50%, var(--nlsa-dot) 50% 50%, var(--nlsa-dot) 100% 50%;
	background-size: calc(100% / 3) 100%;
	animation: nlsa-typing 1s infinite linear;
}

/* Request failed */
.nlsa-msg.is-error > div:first-child {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	background: rgba(var(--nlsa-error-rgb), .07);
	border-color: rgba(var(--nlsa-error-rgb), .28);
	color: var(--nlsa-text);
}

.nlsa-msg.is-error > div:first-child::before {
	--nlsa-icon: var(--nlsa-i-alert);
	width: 17px;
	height: 17px;
	margin-top: 3px;
	color: var(--nlsa-error);
}

/* CTA link */
.nlsa .nlsa-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--nlsa-tint);
	color: var(--nlsa-primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background .18s ease, gap .25s var(--nlsa-ease);
}

.nlsa .nlsa-cta::after { --nlsa-icon: var(--nlsa-i-arrow); width: 15px; height: 15px; }
.nlsa .nlsa-cta:hover { background: var(--nlsa-tint-strong); gap: 11px; color: var(--nlsa-primary); }
.nlsa-msg[dir="rtl"] .nlsa-cta::after { transform: scaleX(-1); }

/* Follow-up actions */
.nlsa-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.nlsa-actions button {
	min-height: 34px;
	padding: 6px 13px;
	border: 1px solid rgba(var(--nlsa-primary-rgb), .28);
	border-radius: 999px;
	background: var(--nlsa-surface);
	color: var(--nlsa-primary);
	font-size: 12.5px;
	font-weight: 550;
	line-height: 1.3;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.nlsa-actions button:hover:not(:disabled) { background: var(--nlsa-tint); border-color: var(--nlsa-primary); }

.nlsa-actions .nlsa-suggest { border-style: dashed; }
.nlsa-actions button:disabled {
	border-color: var(--nlsa-border);
	color: var(--nlsa-subtle);
	cursor: default;
}

/* Feedback */
.nlsa-feedback {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: var(--nlsa-muted);
	font-size: 12px;
	line-height: 1.4;
}

.nlsa-feedback > span:first-child { margin-inline-end: 4px; }

.nlsa-feedback button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	min-width: 36px;
	padding: 5px 11px;
	border: 1px solid var(--nlsa-border);
	border-radius: 999px;
	background: var(--nlsa-surface);
	color: var(--nlsa-muted);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.nlsa-feedback button::before { width: 14px; height: 14px; }
.nlsa-feedback button:nth-of-type(1)::before { --nlsa-icon: var(--nlsa-i-up); }
.nlsa-feedback button:nth-of-type(2)::before { --nlsa-icon: var(--nlsa-i-down); }
.nlsa-feedback button:hover:not(:disabled) { border-color: var(--nlsa-primary); color: var(--nlsa-primary); background: var(--nlsa-tint); }
.nlsa-feedback [role="status"]:not(:empty) { flex-basis: 100%; color: var(--nlsa-error); }

/* Retry */
.nlsa-retry {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	margin-top: 8px;
	padding: 6px 14px;
	border: 1px solid var(--nlsa-border);
	border-radius: 999px;
	background: var(--nlsa-surface);
	color: var(--nlsa-heading);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.nlsa-retry::before { --nlsa-icon: var(--nlsa-i-retry); width: 14px; height: 14px; }
.nlsa-retry:hover { border-color: var(--nlsa-primary); color: var(--nlsa-primary); }

/* ------------------------------------------------------- Suggested questions */

.nlsa-prompts {
	flex: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 0 16px 12px;
	animation: nlsa-rise .5s var(--nlsa-ease) .08s both;
}

.nlsa-prompts[hidden] { display: none; }

.nlsa-prompts button {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 12px;
	border: 1px solid var(--nlsa-border);
	border-radius: 14px;
	background: var(--nlsa-raised);
	color: var(--nlsa-text);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	text-align: start;
	cursor: pointer;
	box-shadow: var(--nlsa-shadow-bubble);
	transition: transform .25s var(--nlsa-ease), border-color .18s ease, background .18s ease, box-shadow .25s ease;
}

.nlsa-prompts button::before {
	width: 18px;
	height: 18px;
	color: var(--nlsa-primary);
}

.nlsa-prompts button:nth-child(1)::before { --nlsa-icon: var(--nlsa-i-target); }
.nlsa-prompts button:nth-child(2)::before { --nlsa-icon: var(--nlsa-i-tag); }
.nlsa-prompts button:nth-child(3)::before { --nlsa-icon: var(--nlsa-i-compass); }
.nlsa-prompts button:nth-child(4)::before { --nlsa-icon: var(--nlsa-i-lock); }

.nlsa-prompts button:hover:not(:disabled) {
	transform: translateY(-2px);
	border-color: rgba(var(--nlsa-primary-rgb), .45);
	background: var(--nlsa-surface);
	box-shadow: 0 8px 20px -10px rgba(var(--nlsa-primary-rgb), .45);
}

.nlsa-prompts button:disabled { opacity: .55; cursor: wait; }

/* ------------------------------------------------------------------ Composer */

.nlsa-form {
	flex: none;
	padding: 12px 16px 8px;
	background: var(--nlsa-surface);
	border-top: 1px solid var(--nlsa-border);
}

.nlsa-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 6px 6px 6px 16px;
	padding-inline: 16px 6px;
	border: 1.5px solid var(--nlsa-border);
	border-radius: 20px;
	background: var(--nlsa-canvas);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.nlsa-composer:focus-within {
	border-color: rgba(var(--nlsa-primary-rgb), .6);
	background: var(--nlsa-surface);
	box-shadow: 0 0 0 4px rgba(var(--nlsa-primary-rgb), .12);
}

.nlsa-form textarea {
	flex: 1;
	min-width: 0;
	min-height: 38px;
	max-height: 110px;
	margin: 0 !important;
	padding: 8px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--nlsa-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	resize: none;
}

.nlsa-form textarea::placeholder { color: var(--nlsa-subtle); opacity: 1; }

.nlsa-form button {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nlsa-gradient);
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 6px 14px -6px rgba(var(--nlsa-primary-rgb), .8);
	transition: transform .25s var(--nlsa-ease), opacity .2s ease, filter .2s ease;
}

.nlsa-form button svg { width: 18px; height: 18px; }
.nlsa-form button:hover:not(:disabled) { transform: scale(1.06); }
.nlsa-form button:active:not(:disabled) { transform: scale(.94); }
.nlsa-composer:has(textarea:placeholder-shown) button { opacity: .4; filter: grayscale(.4); box-shadow: none; }
.nlsa-form button:disabled { opacity: .4; cursor: wait; }
.nlsa-form.is-loading button svg { animation: nlsa-pulse 1s ease-in-out infinite; }

/* -------------------------------------------------------------------- Footer */

.nlsa-foot {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 10px;
	padding: 0 16px 12px;
	background: var(--nlsa-surface);
	color: var(--nlsa-muted);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

.nlsa-foot__note { display: inline-flex; align-items: center; gap: 5px; }
.nlsa-foot__note::before { --nlsa-icon: var(--nlsa-i-shield); width: 13px; height: 13px; color: var(--nlsa-success); }

.nlsa .nlsa-foot__link {
	color: var(--nlsa-primary);
	font-weight: 600;
	text-decoration: none;
}

.nlsa .nlsa-foot__link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------------------- Focus */

.nlsa button:focus-visible,
.nlsa a:focus-visible {
	outline: 2px solid var(--nlsa-primary);
	outline-offset: 2px;
}

.nlsa .nlsa-launch:focus-visible { outline-offset: 3px; }
.nlsa .nlsa-form textarea:focus-visible { outline: none !important; }

/* ---------------------------------------------------------------- Motion */

@keyframes nlsa-panel-in {
	from { opacity: 0; transform: translateY(14px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes nlsa-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes nlsa-typing {
	0%, 100% { background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 100%; }
	20% { background-size: calc(100% / 3) 30%, calc(100% / 3) 100%, calc(100% / 3) 100%; }
	40% { background-size: calc(100% / 3) 100%, calc(100% / 3) 30%, calc(100% / 3) 100%; }
	60% { background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 30%; }
}

@keyframes nlsa-beacon {
	0% { box-shadow: 0 0 0 0 rgba(var(--nlsa-primary-rgb), .45); }
	100% { box-shadow: 0 0 0 16px rgba(var(--nlsa-primary-rgb), 0); }
}

@keyframes nlsa-pulse {
	50% { opacity: .35; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.nlsa *,
	.nlsa *::before,
	.nlsa *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------ Theme integration */

/* Keep the launcher clear of the theme's back-to-top control. */
body:not(.rtl):has(.nlsa) .back-to-top { inset-inline-end: auto; inset-inline-start: var(--space-8, 32px); }

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 600px) {
	.nlsa { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }

	.nlsa-launch { width: 56px; height: 56px; padding: 0; gap: 0; justify-content: center; }
	.nlsa-launch__orb { width: 56px; height: 56px; background: transparent; box-shadow: none; }
	.nlsa-launch__orb svg { width: 24px; height: 24px; }
	.nlsa-launch__label { display: none; }
	.nlsa-launch[aria-expanded="true"] { display: none; }

	.nlsa-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		max-height: none;
		min-height: 0;
		border-radius: 0;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		transform-origin: 50% 100%;
		animation-name: nlsa-rise;
	}

	.nlsa-head { padding: 14px 10px 14px 16px; padding-inline: 16px 10px; }
	.nlsa-messages { padding: 18px 14px 14px; }
	.nlsa-prompts { padding-inline: 14px; }
	.nlsa-form { padding-inline: 14px; }
	.nlsa-form textarea { font-size: 16px; }
	.nlsa-msg { max-width: 92%; }

	body:not(.rtl):has(.nlsa) .back-to-top { inset-inline-start: var(--space-4, 16px); }
}

@media (max-width: 360px) {
	.nlsa-prompts { grid-template-columns: 1fr; }
	.nlsa-prompts button { min-height: 44px; }
}
