/* =========================================================================
 * Shupav Chat widget
 * Brand tokens are fixed (navy/blue/green + the shupav.com pink launcher).
 * UX quality (touch targets, motion, focus, scrim) follows standard rules.
 * ====================================================================== */
#nairo-chat-root {
	--nc-navy: #002269;
	--nc-blue: #1E61D6;
	--nc-green: #74C427;
	--nc-green-ink: #0a2200;
	--nc-pink: #ED2E6A;
	--nc-pink-deep: #d11f57;
	--nc-ink: #0F172A;
	--nc-muted: #5a6584;
	--nc-line: #E2E8F0;
	--nc-white: #ffffff;
	--nc-wa: #25D366;
	/* Customizable via admin (Chat settings). Fallbacks match the default scheme. */
	--nc-launcher: var(--nc-blue);
	--nc-launcher-ink: #ffffff;
	--nc-header: var(--nc-navy);
	--nc-header-ink: #ffffff;
	--nc-accent: var(--nc-blue);
	--nc-radius: 16px;
	--nc-font: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99990;
	font-family: var(--nc-font);
}

/* ---- Launcher ---- */
.nc-launcher {
	position: relative;
	width: 60px;
	height: 60px;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--nc-launcher);
	color: var(--nc-launcher-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
	margin-left: auto;
}
.nc-launcher:hover { filter: brightness(0.94); }
.nc-launcher:active { transform: scale(0.96); }
.nc-launcher:focus-visible { outline: 3px solid var(--nc-blue); outline-offset: 3px; }
.nc-launcher__icon { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity 160ms ease, transform 200ms ease; }
.nc-launcher__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.7); font-size: 30px; line-height: 1; }
#nairo-chat-root.is-open .nc-launcher__icon--open { opacity: 0; transform: rotate(45deg) scale(0.7); }
#nairo-chat-root.is-open .nc-launcher__icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* ---- Panel ---- */
.nc-panel {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 340px;
	max-width: calc(100vw - 32px);
	background: var(--nc-white);
	border-radius: var(--nc-radius);
	box-shadow: 0 18px 50px rgba(0, 12, 40, 0.28);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}
#nairo-chat-root.is-open .nc-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.nc-panel__head {
	background: var(--nc-header);
	color: var(--nc-header-ink);
	padding: 18px 18px 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.nc-panel__greeting { font-size: 15px; font-weight: 600; line-height: 1.4; }
.nc-panel__close {
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	color: var(--nc-header-ink);
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms ease;
}
.nc-panel__close:hover { background: rgba(255, 255, 255, 0.28); }
.nc-panel__close:focus-visible { outline: 2px solid var(--nc-green); outline-offset: 2px; }

.nc-panel__body { padding: 14px; }

/* ---- Action rows ---- */
.nc-actions { display: flex; flex-direction: column; gap: 10px; }
.nc-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--nc-line);
	border-radius: 12px;
	background: var(--nc-white);
	color: var(--nc-ink);
	font-family: var(--nc-font);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
	text-align: left;
}
.nc-action:hover { border-color: var(--nc-blue); box-shadow: 0 4px 14px rgba(30, 97, 214, 0.12); }
.nc-action:focus-visible { outline: 2px solid var(--nc-blue); outline-offset: 2px; }
.nc-action__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: none; color: #fff; }
.nc-action--wa .nc-action__icon { background: var(--nc-wa); }
.nc-action--call .nc-action__icon { background: var(--nc-accent); }
.nc-action--form .nc-action__icon { background: var(--nc-accent); }

/* ---- Enquiry form mount ---- */
.nc-enquiry { margin-top: 12px; max-height: 60vh; overflow-y: auto; }
.nc-enquiry.is-visible { display: block; }

/* ---- Mobile: dock as a bottom sheet, respect safe areas ---- */
@media (max-width: 480px) {
	#nairo-chat-root { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
	.nc-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transform-origin: bottom center;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.nc-panel__body { padding-bottom: 18px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.nc-launcher, .nc-launcher__icon, .nc-panel, .nc-action, .nc-panel__close { transition: none; }
}

/* ---- Display target (set by admin: web / mobile / both) ----
 * Breakpoint at 768px. "web" = desktop and up, "mobile" = below 768px.
 */
@media (max-width: 767.98px) {
	#nairo-chat-root.nc-show-web { display: none; }
}
@media (min-width: 768px) {
	#nairo-chat-root.nc-show-mobile { display: none; }
}