/**
 * Niramay Admin Dashboard - website webchat widget.
 *
 * Every colour, size and offset comes from the inline custom properties printed by
 * Niramay_Webchat::inline_css() (Settings > Webchat), with a fallback here so the stylesheet still
 * renders a sane widget if the inline block is stripped by a minifier or a CSP.
 *
 * The stylesheet is scoped to `.nrm-webchat-root` only, so it can never touch the theme.
 */

.nrm-webchat-root {
	--nrm-wc-primary: #ac4d1c;
	--nrm-wc-side: right;
	--nrm-wc-launcher: 60px;
	--nrm-wc-offset-y: 20px;
	--nrm-wc-offset-x: 20px;
	--nrm-wc-radius: 16px;
	--nrm-wc-ink: #ffffff;
	--nrm-wc-surface: #ffffff;
	--nrm-wc-surface-2: #f6f7f6;
	--nrm-wc-text: #202824;
	--nrm-wc-muted: #6b7772;
	--nrm-wc-border: rgba(20, 40, 32, 0.14);
	--nrm-wc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 2147483000;
	font-family: var(--nrm-wc-font);
}

/* A theme is free to put margins on divs, forms, buttons and fields. Reset them inside the widget
   so the panel's own spacing is the only spacing: without this, a theme's `div { margin-bottom }`
   opens gaps inside the message log and pushes the composer away from the last bubble. */
.nrm-webchat-root *,
.nrm-webchat-root *::before,
.nrm-webchat-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ---------------- Launcher ---------------- */

.nrm-webchat-root .nrm-wc-launcher {
	position: fixed;
	bottom: var(--nrm-wc-offset-y);
	right: var(--nrm-wc-offset-x);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: var(--nrm-wc-launcher);
	height: var(--nrm-wc-launcher);
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--nrm-wc-primary);
	color: var(--nrm-wc-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(16, 32, 26, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nrm-webchat-root .nrm-wc-launcher:hover { transform: translateY(-2px); }
.nrm-webchat-root .nrm-wc-launcher:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; }
.nrm-webchat-root .nrm-wc-launcher[aria-expanded="true"] { transform: none; }

.nrm-webchat-root .nrm-wc-launcher-icon { display: inline-flex; }
.nrm-webchat-root .nrm-wc-launcher-icon svg { width: 24px; height: 24px; }
.nrm-webchat-root .nrm-wc-launcher-label { white-space: nowrap; }

.nrm-webchat-root .nrm-wc-launcher-badge {
	position: absolute;
	top: -6px;
	inset-inline-end: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #d92d20;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nrm-webchat-root .nrm-wc-launcher-badge[hidden] { display: none; }

/* Launcher on the left when the setting says so. */
.nrm-webchat-root .nrm-wc-launcher[data-nrm-side="left"] {
	right: auto;
	left: var(--nrm-wc-offset-x);
}

/* ---------------- Panel ---------------- */

.nrm-webchat-root .nrm-wc-panel {
	position: fixed;
	bottom: calc(var(--nrm-wc-offset-y) + var(--nrm-wc-launcher) + 12px);
	right: var(--nrm-wc-offset-x);
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100vw - 32px));
	max-height: min(620px, calc(100vh - var(--nrm-wc-offset-y) - var(--nrm-wc-launcher) - 32px));
	overflow: hidden;
	border: 1px solid var(--nrm-wc-border);
	border-radius: var(--nrm-wc-radius);
	background: var(--nrm-wc-surface);
	color: var(--nrm-wc-text);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 22px 48px rgba(14, 28, 22, 0.28);
}

.nrm-webchat-root .nrm-wc-panel[hidden] { display: none; }
.nrm-webchat-root .nrm-wc-panel[data-nrm-side="left"] {
	right: auto;
	left: var(--nrm-wc-offset-x);
}

.nrm-webchat-root .nrm-wc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--nrm-wc-primary);
	color: var(--nrm-wc-ink);
}

.nrm-webchat-root .nrm-wc-head-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: 0 0 auto;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nrm-webchat-root .nrm-wc-head-mark svg { width: 22px; height: 22px; }
.nrm-webchat-root .nrm-wc-head-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
	padding-block: 1px;
}
.nrm-webchat-root .nrm-wc-title { font-size: 16px; font-weight: 700; line-height: 1.25; }
.nrm-webchat-root .nrm-wc-subtitle { font-size: 12.5px; line-height: 1.35; opacity: 0.92; }

.nrm-webchat-root .nrm-wc-close {
	flex: 0 0 auto;
	margin-left: 0;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.nrm-webchat-root .nrm-wc-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------------- Messages ---------------- */

.nrm-webchat-root .nrm-wc-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	background: var(--nrm-wc-surface-2);
	display: flex;
	flex-direction: column;
	gap: 12px;
	scrollbar-width: thin;
}

/* The name label belongs under its bubble, not beside it. As a plain flex row it was laid out to the
   right of the bubble (the screenshot bug), so the message column stacks the two. */
.nrm-webchat-root .nrm-wc-msg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}
.nrm-webchat-root .nrm-wc-msg.nrm-wc-visitor { align-items: flex-end; }

.nrm-webchat-root .nrm-wc-bubble {
	max-width: 84%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.45;
	word-break: break-word;
	background: var(--nrm-wc-surface);
	border: 1px solid var(--nrm-wc-border);
}

.nrm-webchat-root .nrm-wc-msg.nrm-wc-visitor .nrm-wc-bubble {
	background: var(--nrm-wc-primary);
	border-color: transparent;
	color: var(--nrm-wc-ink);
}

.nrm-webchat-root .nrm-wc-msg-meta {
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--nrm-wc-muted);
	padding: 0 3px;
}

.nrm-webchat-root .nrm-wc-msg.nrm-wc-visitor .nrm-wc-msg-meta { text-align: right; }

.nrm-webchat-root .nrm-wc-typing { display: inline-flex; gap: 4px; align-items: center; }
.nrm-webchat-root .nrm-wc-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nrm-wc-muted);
	animation: nrm-wc-dot 1.2s infinite ease-in-out;
}
.nrm-webchat-root .nrm-wc-typing i:nth-child(2) { animation-delay: 0.15s; }
.nrm-webchat-root .nrm-wc-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes nrm-wc-dot {
	0%, 80%, 100% { transform: scale(0.75); opacity: 0.45; }
	40% { transform: scale(1); opacity: 1; }
}

/* ---------------- Pre-chat form ---------------- */

.nrm-webchat-root .nrm-wc-prechat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	background: var(--nrm-wc-surface);
	border-top: 1px solid var(--nrm-wc-border);
}

/* `hidden` set by the script must actually hide the form: the display above outranks the browser's
   [hidden] rule, so submitting it used to leave the name fields on screen. */
.nrm-webchat-root .nrm-wc-prechat[hidden] { display: none; }

.nrm-webchat-root .nrm-wc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--nrm-wc-muted); }
.nrm-webchat-root .nrm-wc-field-row { display: flex; align-items: center; gap: 12px; }

.nrm-webchat-root .nrm-wc-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--nrm-wc-border);
	border-radius: calc(var(--nrm-wc-radius) / 1.5);
	background: var(--nrm-wc-surface);
	color: var(--nrm-wc-text);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	resize: none;
}

.nrm-webchat-root .nrm-wc-input::placeholder { color: var(--nrm-wc-muted); opacity: 1; }
.nrm-webchat-root .nrm-wc-input:focus { outline: 2px solid var(--nrm-wc-primary); outline-offset: 1px; }

/* ---------------- Composer ---------------- */

.nrm-webchat-root .nrm-wc-compose {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 14px;
	background: var(--nrm-wc-surface);
	border-top: 1px solid var(--nrm-wc-border);
}

.nrm-webchat-root .nrm-wc-textarea { max-height: 120px; min-height: 44px; overflow-y: auto; }

.nrm-webchat-root .nrm-wc-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: calc(var(--nrm-wc-radius) / 1.5);
	background: var(--nrm-wc-primary);
	color: var(--nrm-wc-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}

.nrm-webchat-root .nrm-wc-send:disabled { opacity: 0.6; cursor: default; }
.nrm-webchat-root .nrm-wc-link {
	background: none;
	border: 0;
	color: var(--nrm-wc-muted);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------------- Footer, status, a11y ---------------- */

.nrm-webchat-root .nrm-wc-powered {
	padding: 8px 14px 10px;
	background: var(--nrm-wc-surface);
	color: var(--nrm-wc-muted);
	font-size: 11.5px;
	line-height: 1.4;
	text-align: center;
}

.nrm-webchat-root .nrm-wc-status {
	padding: 9px 14px;
	background: #fef3c7;
	color: #7a4a09;
	border-top: 1px solid #f4d08a;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: center;
}

.nrm-webchat-root .nrm-wc-status[hidden] { display: none; }
.nrm-webchat-root .nrm-wc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nrm-webchat-root .nrm-wc-loading {
	display: flex;
	justify-content: center;
	padding: 6px 0;
}

/* ---------------- Small screens ---------------- */

@media (max-width: 480px) {
	.nrm-webchat-root .nrm-wc-panel {
		left: 8px;
		right: 8px;
		width: auto;
		bottom: 8px;
		max-height: calc(100vh - 24px);
		border-radius: 14px;
	}
	.nrm-webchat-root .nrm-wc-launcher { padding: 0; width: var(--nrm-wc-launcher); justify-content: center; }
	.nrm-webchat-root .nrm-wc-launcher-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nrm-webchat-root .nrm-wc-launcher { transition: none; }
	.nrm-webchat-root .nrm-wc-typing i { animation: none; }
}