/* LeadPilot chat widget. Scoped to .lp-chat so themes cannot bleed in. */

.lp-chat {
	--lp-accent: #0f766e;
	--lp-bg: #ffffff;
	--lp-text: #1f2937;
	--lp-muted: #6b7280;
	--lp-line: #e5e7eb;
	position: fixed;
	bottom: 20px;
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.lp-chat--right { right: 20px; }
.lp-chat--left  { left: 20px; }

.lp-launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--lp-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
	transition: transform .15s ease;
	position: relative;
	margin-left: auto;
}
.lp-launcher:hover { transform: translateY(-2px); }
.lp-launcher:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 3px; }

.lp-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid #fff;
}

.lp-panel {
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
	background: var(--lp-bg);
	color: var(--lp-text);
	border: 1px solid var(--lp-line);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 12px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
}

.lp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--lp-accent);
	color: #fff;
}
.lp-title { font-weight: 600; font-size: 15px; }
.lp-close {
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 4px;
	display: flex;
	opacity: .85;
}
.lp-close:hover { opacity: 1; }

.lp-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #f9fafb;
}

.lp-msg { max-width: 85%; }
.lp-msg--visitor { align-self: flex-end; text-align: right; }
.lp-msg--agent { align-self: flex-start; }

.lp-who {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lp-muted);
	margin-bottom: 4px;
}

.lp-body {
	margin: 0;
	padding: 9px 13px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--lp-line);
	white-space: pre-wrap;
	word-wrap: break-word;
	text-align: left;
}
.lp-msg--visitor .lp-body {
	background: var(--lp-accent);
	border-color: var(--lp-accent);
	color: #fff;
}

.lp-msg.is-new { animation: lp-in .18s ease-out; }
@keyframes lp-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

.lp-notice {
	margin: 0;
	font-size: 13px;
	color: #b91c1c;
	text-align: center;
}

/* This class was written for "Could not send" and is red. 1.21.2 gave the log
   its first piece of good news -- the confirmation that an email was saved --
   and it inherited the failure colour, so the one moment the widget had
   something reassuring to say, it said it in the colour of an error. */
.lp-notice.is-good { color: #15803d; }

/* Renamed from .lp-form, which collided with the public form wrapper. */
.lp-chat-form {
	border-top: 1px solid var(--lp-line);
	padding: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lp-row { display: flex; gap: 8px; }

.lp-input,
.lp-email {
	flex: 1 1 auto;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	font: inherit;
	color: var(--lp-text);
	background: #fff;
	box-sizing: border-box;
}
.lp-input:focus,
.lp-email:focus {
	outline: none;
	border-color: var(--lp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent);
}

.lp-send {
	flex: 0 0 auto;
	width: 42px;
	border: 0;
	border-radius: 10px;
	background: var(--lp-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-send:hover { filter: brightness(1.06); }

/* The lead form.
   Every selector here is scoped to `.lp-chat` on purpose. `.lp-lead-*` is new
   and unique today, but eight shipped bugs in this plugin were one class name
   meaning two things in two stylesheets that happened to load on the same page
   -- and a public page can carry this widget and a LeadPilot form at once. */
.lp-chat .lp-lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	background: color-mix(in srgb, var(--lp-accent) 5%, #fff);
	/* The form can be taller than the panel once a site asks for six fields, so
	   it scrolls rather than pushing the message row off the bottom -- the same
	   answer 1.15.1 gave the report tables, for the same reason: clipped is
	   unreachable, and unreachable looks broken rather than cramped. */
	max-height: 58%;
	overflow-y: auto;
}

.lp-chat .lp-lead-intro {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--lp-text);
}

.lp-chat .lp-lead-rows { display: flex; flex-direction: column; gap: 8px; }
.lp-chat .lp-lead-row { display: flex; flex-direction: column; gap: 3px; }

.lp-chat .lp-lead-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--lp-text);
}
.lp-chat .lp-lead-req { color: #b91c1c; margin-left: 2px; }

.lp-chat .lp-lead-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--lp-line);
	border-radius: 8px;
	font: inherit;
	color: var(--lp-text);
	background: #fff;
	box-sizing: border-box;
}
.lp-chat .lp-lead-input:focus {
	outline: none;
	border-color: var(--lp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent);
}
.lp-chat .lp-lead-input[aria-invalid="true"] { border-color: #b91c1c; }

.lp-chat .lp-lead-error {
	margin: 0;
	font-size: 12px;
	color: #b91c1c;
}

/* Full width, not the 42px square the message row's icon button uses: this one
   carries a word, and a square would clip it in any language with a longer one
   than "Save". */
.lp-chat .lp-lead-save {
	padding: 9px 14px;
	border: 0;
	border-radius: 10px;
	background: var(--lp-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.lp-chat .lp-lead-save:hover { filter: brightness(1.06); }
.lp-chat .lp-lead-save:disabled { opacity: .6; cursor: default; }
.lp-chat .lp-lead-save:focus-visible {
	outline: 2px solid var(--lp-accent);
	outline-offset: 2px;
}

.lp-chat .lp-lead-note {
	margin: 0;
	font-size: 12px;
	color: var(--lp-muted, #6b7280);
}
.lp-chat .lp-lead-note.is-bad { color: #b91c1c; }

/* ---------------------------------------------------------------------------
   `hidden` means hidden. One rule, covering the whole widget.

   The `hidden` attribute is `display: none` in the browser's own stylesheet,
   and a UA rule loses to any author rule that sets `display`. This widget
   hides five things from JavaScript -- the panel, the unread dot, the typing
   line, the email prompt and its message -- and two of them carry
   `display: flex` from a class rule, so `hidden` did nothing to either.

   `.lp-panel` is the one that mattered and it had been shipping: the panel
   carried the attribute and computed to `flex` anyway, which is a chat window
   that will not close. `.lp-email-wrap` was the same bug arriving new, and it
   put the email box on screen the moment the widget opened, before anybody had
   sent a message for it to be a reply to.

   Found by opening a page and looking at it. The markup was right and the
   JavaScript was right; only the resolved style was wrong, which is the
   seventh and eighth bug of exactly this shape in this plugin and the reason
   `tools/qa-css-collisions.php` now looks for it.

   One rule rather than a `[hidden]` guard beside each layout rule, and
   `!important` so that position in the file stops mattering: the attribute is
   a statement of intent, and no rule added later -- above or below -- should be
   able to overrule it by accident. This is the one place in the plugin where
   `!important` is the cheaper mistake.
   --------------------------------------------------------------------------- */
.lp-chat [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.lp-launcher, .lp-msg.is-new { transition: none; animation: none; }
}

@media (max-width: 480px) {
	.lp-panel { width: calc(100vw - 32px); height: 70vh; }
}

/* The other side is typing. Scoped to the widget root: `.lp-typing` also
   exists in the admin Inbox, and one class name meaning two things in two
   stylesheets is how six shipped bugs in this plugin started. These two never
   load on the same page, but the scope costs nothing and the rule is absolute. */
.lp-chat .lp-typing {
	padding: 4px 14px 6px;
	font-size: 12px;
	font-style: italic;
	color: var(--lp-muted, #6b7280);
}
@media ( prefers-reduced-motion: no-preference ) {
	.lp-chat .lp-typing { animation: lp-typing-fade .25s ease-in; }
}
@keyframes lp-typing-fade { from { opacity: 0; } to { opacity: 1; } }