/**
 * 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-head-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Ending a chat and minimising it are different acts with different
   consequences, so they are two controls, and the destructive one says what it
   does in words rather than hiding behind an icon. */
.cxw-end {
	padding: 6px 10px;
	border: 0;
	border-radius: var(--cxw-r-sm);
	background: transparent;
	color: rgba(255, 255, 255, 0.86);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.cxw-end:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.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);
}

/* Every bubble says who is speaking. A visitor should never have to work out
   whether they are reading themselves, the bot, or a real person. */
.cxw-who {
	margin-bottom: 3px;
	color: var(--cxw-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* On the accent bubble the accent colour would be invisible. */
.cxw-you .cxw-who {
	color: rgba(255, 255, 255, 0.78);
}

/* A phone number, an email and a listing link are the whole point of an answer,
   and as plain text on a phone they were useless: the visitor had to memorise a
   number and retype it into the dialler. */
.cxw-link {
	color: var(--cxw-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.cxw-link:hover {
	text-decoration: none;
}

.cxw-you .cxw-link {
	color: #fff;
}

/* -------------------------------------------------------------- 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; }
}