/* Kept outside .App; override --nessa-quick-actions-bottom to adjust chatbot clearance. */
.nessa-quick-actions {
	--nqa-orange: #f58220;
	--nqa-wa: #25d366;
	--nqa-wa-dark: #1ebe5b;
	--nqa-ink: #1f2937;
	--nqa-muted: #6b7280;
	--nqa-line: #eceff2;
	--nqa-bottom: calc(var(--nessa-quick-actions-bottom, 120px) + env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: env(safe-area-inset-right, 0px);
	bottom: var(--nqa-bottom);
	z-index: 40;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 6px 8px 6px 6px;
	border: 1px solid var(--nqa-line);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	background: #ffffff;
	box-shadow: -8px 12px 32px rgba(17, 24, 39, .12), 0 2px 6px rgba(17, 24, 39, .05);
	color: var(--nqa-ink);
	font: 500 14px/1.25 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
	text-decoration: none;
	animation: nqa-enter .28s ease-out;
	transition: box-shadow .2s ease;
}

.nessa-quick-actions *,
.nessa-quick-actions *::before,
.nessa-quick-actions *::after { box-sizing: border-box; }

/* Solid WhatsApp disc with a short attention ring after page load. */
.nessa-quick-actions__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--nqa-wa), var(--nqa-wa-dark));
	box-shadow: 0 4px 12px rgba(37, 211, 102, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
	color: #ffffff;
	transition: transform .2s ease;
}

.nessa-quick-actions__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
	animation: nqa-ring 2s ease-out 1s 3;
	pointer-events: none;
}

.nessa-quick-actions svg { display: block; width: 24px; height: 24px; }

/* Label collapses to nothing until hover/focus, so the dock grows leftwards from the icon. */
.nessa-quick-actions__text {
	display: flex;
	flex-direction: column;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	transition: max-width .3s ease, margin .3s ease, opacity .2s ease;
}

.nessa-quick-actions__text strong { color: var(--nqa-ink); font-size: 14px; font-weight: 700; }
.nessa-quick-actions__text small { color: var(--nqa-muted); font-size: 12px; font-weight: 500; }

.nessa-quick-actions:focus-visible { outline: 2px solid var(--nqa-orange); outline-offset: 2px; }

.nessa-quick-actions:focus-visible .nessa-quick-actions__text {
	max-width: 160px;
	margin: 0 12px 0 10px;
	opacity: 1;
}

@media (hover: hover) {
	.nessa-quick-actions:hover { box-shadow: -10px 14px 36px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .06); }
	.nessa-quick-actions:hover .nessa-quick-actions__icon { transform: scale(1.06); }
	.nessa-quick-actions:hover .nessa-quick-actions__text {
		max-width: 160px;
		margin: 0 12px 0 10px;
		opacity: 1;
	}
}

@keyframes nqa-enter {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes nqa-ring {
	from { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
	to { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.nessa-quick-actions,
	.nessa-quick-actions *,
	.nessa-quick-actions *::after { animation: none !important; transition: none !important; }
	.nessa-quick-actions:hover .nessa-quick-actions__icon { transform: none; }
}

@media print { .nessa-quick-actions { display: none; } }