/**
 * CX Chat visitor widget.
 *
 * DESIGN NOTES (deliberate, please do not "tidy" these away)
 *
 * - ONE accent, injected from settings. Nothing else is coloured. A second hue
 *   would compete with the send button, which is the only action that matters.
 * - Presence is a 7px SOLID dot plus plain text, never a pale tinted badge with
 *   darker text of the same hue. That badge is the single most recognisable
 *   "designed by an AI" tell and it also reads as decoration rather than status.
 * - Separation is whitespace first, hairlines second. Borders AND shadows on the
 *   same element is belt-and-braces styling that makes a UI look nervous.
 * - No pure white and no pure black. An off-white canvas and deep slate text are
 *   easier to sit with, and the slight warmth reads as considered rather than
 *   default.
 * - Everything on a 4px rhythm.
 *
 * PSYCHOLOGY
 * - The header answers "who am I talking to and will they actually reply", which
 *   is the anxiety that stops people opening a chat at all.
 * - A human takeover is announced loudly, because that is the moment a annoyed
 *   visitor relaxes, and burying it wastes it.
 * - Suggested choices are recognition, not recall. Tapping "Basseterre" beats
 *   making someone spell it.
 *
 * Scoped under #cxchat-widget-root so the host theme cannot leak in, and we
 * cannot leak out.
 */

#cxchat-widget-root {
	--cxw-accent: #0b6bcb;

	--cxw-canvas: #f7f7f5;
	--cxw-surface: #fdfdfc;
	--cxw-ink: #14181f;
	--cxw-ink-soft: #5c6672;
	--cxw-line: #e6e8ea;
	--cxw-live: #16a34a;

	--cxw-r-sm: 8px;
	--cxw-r-md: 14px;
	--cxw-r-lg: 20px;

	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;

	font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cxw-ink);
	-webkit-font-smoothing: antialiased;
}

#cxchat-widget-root * { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
	#cxchat-widget-root {
		--cxw-canvas: #16191d;
		--cxw-surface: #1e2227;
		--cxw-ink: #edeef0;
		--cxw-ink-soft: #9aa3ad;
		--cxw-line: #2c3138;
	}
}

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

.cxw-launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cxw-accent);
	color: #fff;
	cursor: pointer;

	/* The one place a shadow earns its keep: it lifts the launcher off whatever
	   arbitrary page content happens to be behind it. */
	box-shadow: 0 8px 24px rgba(20, 24, 31, 0.26);
	transition: transform 0.16s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.cxw-launcher:hover { transform: scale(1.06); }
.cxw-launcher:active { transform: scale(0.97); }

.cxw-launcher img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Unread pip. Only ever shown when a real reply landed while the panel was shut,
   never as decoration. Honest urgency, or none. */
.cxw-dot {
	display: none;
	position: absolute;
	top: 1px;
	right: 1px;
	width: 14px;
	height: 14px;
	border: 2.5px solid var(--cxw-canvas);
	border-radius: 50%;
	background: #d64545;
}

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

.cxw-panel {
	position: absolute;
	right: 0;
	bottom: 76px;

	display: flex;
	flex-direction: column;
	width: 384px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 132px);

	overflow: hidden;
	border-radius: var(--cxw-r-lg);
	background: var(--cxw-canvas);
	box-shadow: 0 16px 48px rgba(20, 24, 31, 0.2);

	/* Fade, never slide. */
	animation: cxw-in 0.18s ease;
}

.cxw-panel[hidden] { display: none; }

@keyframes cxw-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cxw-panel { animation: none; }
	.cxw-launcher { transition: none; }
}

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

.cxw-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 16px 20px;
	background: var(--cxw-accent);
	color: #fff;
}

.cxw-head-id {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cxw-head-face {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.2);
	font-size: 16px;
	font-weight: 600;
}

.cxw-head-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

/* Presence: solid dot, plain text. Not a pill. */
.cxw-head-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 1px;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.82);
}

.cxw-dot-live {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cxw-live);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.cxw-close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.8;
}

.cxw-close:hover {
	background: rgba(255, 255, 255, 0.14);
	opacity: 1;
}

/* --------------------------------------------------------------- Thread */

.cxw-body {
	flex: 1;
	min-height: 0;
	padding: 20px 16px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cxw-msg {
	display: flex;
	margin-bottom: 12px;
}

.cxw-msg.cxw-you { justify-content: flex-end; }

.cxw-bubble {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: var(--cxw-r-md);
	background: var(--cxw-surface);
	white-space: pre-wrap;
	word-wrap: break-word;

	/* Hairline only. No shadow as well. */
	border: 1px solid var(--cxw-line);
}

/* The visitor's own words are the accent, so their eye can find its place in the
   thread instantly without reading a word. */
.cxw-you .cxw-bubble {
	border-color: transparent;
	background: var(--cxw-accent);
	color: #fff;
	border-bottom-right-radius: var(--cxw-r-sm);
}

.cxw-bot .cxw-bubble,
.cxw-agent .cxw-bubble {
	border-bottom-left-radius: var(--cxw-r-sm);
}

/* A human's reply must not look like the bot's. */
.cxw-who {
	margin-bottom: 3px;
	color: var(--cxw-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- Choices */

.cxw-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px 0;
}

/* Outlined, not filled: an offer, not something the visitor has already said.
   Filling these would make them read as sent messages. */
.cxw-choice {
	padding: 8px 14px;
	border: 1.5px solid var(--cxw-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--cxw-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.cxw-choice:hover {
	background: var(--cxw-accent);
	color: #fff;
}

/* --------------------------------------------------------------- Typing */

.cxw-typing {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 14px;
}

.cxw-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cxw-ink-soft);
	animation: cxw-bounce 1.3s infinite ease-in-out;
}

.cxw-typing span:nth-child(2) { animation-delay: 0.16s; }
.cxw-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes cxw-bounce {
	0%, 65%, 100% { opacity: 0.32; transform: translateY(0); }
	32%           { opacity: 1;    transform: translateY(-4px); }
}

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

.cxw-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px 16px;
	background: var(--cxw-canvas);
}

.cxw-form input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var(--cxw-line);
	border-radius: 999px;
	background: var(--cxw-surface);
	color: var(--cxw-ink);
	font: inherit;
}

.cxw-form input::placeholder { color: var(--cxw-ink-soft); }

.cxw-form input:focus {
	outline: 2px solid var(--cxw-accent);
	outline-offset: -1px;
	border-color: transparent;
}

/* 46px, comfortably over the 44px minimum target. */
.cxw-form button {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cxw-accent);
	color: #fff;
	cursor: pointer;
	transition: transform 0.12s ease;
}

.cxw-form button:hover { transform: scale(1.05); }
.cxw-form button:active { transform: scale(0.95); }

/* ---------------------------------------------------------------- Phone */

@media (max-width: 480px) {
	#cxchat-widget-root {
		right: 16px;
		bottom: 16px;
	}

	.cxw-panel {
		width: calc(100vw - 24px);
		height: calc(100vh - 108px);
		right: -4px;
	}

	/* Clear the Android nav and gesture bar. */
	.cxw-form { padding-bottom: 50px; }
}