/* =====================================================================
   Lion Click Chat — "J.A.R.V.I.S. / Stark HUD" dark theme
   ---------------------------------------------------------------------
   Look: near-black background, electric-cyan neon glows, warm amber-gold
   holographic accents, glassy blurred panel.

   The CYAN ACCENT is driven by --lcc-primary, which is set from the
   "Primary color" field on the Lion Click Chat settings page. Change that
   field to recolor every cyan element (borders, glows, send button, user
   bubbles, launcher). The dark base is fixed to preserve the HUD look.
   ===================================================================== */

:root {
	--lcc-primary: #00d4ff;                 /* electric cyan (admin-overridable) */
	--lcc-primary-light: #5eeaff;           /* lighter cyan for highlights */
	--lcc-accent: #ffae3b;                  /* warm amber-gold */
	--lcc-accent-deep: #ff9d00;

	--lcc-bg-0: #050810;                    /* deepest near-black */
	--lcc-bg-1: #0a1018;                    /* dark navy */
	--lcc-surface: rgba(10, 18, 28, 0.82);  /* glassy panel fill */
	--lcc-surface-solid: #0a1320;

	--lcc-text: #e8f6ff;                    /* near-white body */
	--lcc-text-muted: #8aa6b8;              /* muted cyan-grey */

	--lcc-radius: 16px;
	--lcc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Translucent cyan derived from the (overridable) primary color. */
	--lcc-glow-strong: color-mix(in srgb, var(--lcc-primary) 65%, transparent);
	--lcc-glow-soft:   color-mix(in srgb, var(--lcc-primary) 32%, transparent);
	--lcc-line:        color-mix(in srgb, var(--lcc-primary) 38%, transparent);
	--lcc-accent-glow: color-mix(in srgb, var(--lcc-accent) 55%, transparent);
}

#lcc-widget * { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Floating launcher bubble — pulsing cyan glow + rotating HUD ring
   --------------------------------------------------------------------- */
.lcc-launcher {
	position: fixed;
	bottom: 22px;
	right: 22px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lcc-primary) 22%, transparent), transparent 60%),
		var(--lcc-bg-1);
	color: #fff;
	border: 1.5px solid var(--lcc-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2147483000;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--lcc-primary) 25%, transparent),
		0 0 18px var(--lcc-glow-strong),
		0 8px 30px rgba(0, 0, 0, 0.55);
	transition: transform .18s ease, box-shadow .18s ease;
	animation: lcc-pulse 2s ease-in-out infinite;
}
.lcc-launcher:hover { transform: scale(1.06); }
.lcc-launcher svg {
	width: 28px; height: 28px;
	fill: var(--lcc-primary-light);
	filter: drop-shadow(0 0 4px var(--lcc-glow-strong));
	position: relative;
	z-index: 2;
}
/* Rotating arc ring (Stark reactor feel) */
.lcc-launcher::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--lcc-primary);
	border-right-color: color-mix(in srgb, var(--lcc-primary) 40%, transparent);
	opacity: .9;
	animation: lcc-spin 3.2s linear infinite;
}
/* Inner thin ring accent */
.lcc-launcher::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--lcc-primary) 30%, transparent);
}
.lcc-launcher.lcc-hidden { display: none; }

@keyframes lcc-pulse {
	0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lcc-primary) 25%, transparent), 0 0 14px var(--lcc-glow-soft), 0 8px 30px rgba(0,0,0,.55); }
	50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lcc-primary) 35%, transparent), 0 0 26px var(--lcc-glow-strong), 0 8px 30px rgba(0,0,0,.55); }
}
@keyframes lcc-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   Chat panel — glassy dark with cyan neon edge
   --------------------------------------------------------------------- */
.lcc-panel {
	position: fixed;
	bottom: 22px;
	right: 22px;
	width: 374px;
	max-width: calc(100vw - 32px);
	height: 564px;
	max-height: calc(100vh - 44px);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--lcc-primary) 6%, transparent), transparent 28%),
		var(--lcc-surface);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	border: 1px solid var(--lcc-line);
	border-radius: var(--lcc-radius);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--lcc-primary) 18%, transparent),
		0 0 30px var(--lcc-glow-soft),
		0 18px 60px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 2147483000;
	font-family: var(--lcc-font);
	color: var(--lcc-text);
	animation: lcc-pop .2s ease;
}
@keyframes lcc-pop {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lcc-panel.lcc-hidden { display: none; }

/* Header */
.lcc-header {
	position: relative;
	background:
		radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--lcc-primary) 16%, transparent), transparent 55%),
		var(--lcc-bg-0);
	color: var(--lcc-text);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 11px;
	border-bottom: 1px solid var(--lcc-line);
}
.lcc-header::after {
	/* glowing underline */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lcc-primary), transparent);
	box-shadow: 0 0 10px var(--lcc-glow-strong);
}
.lcc-header .lcc-avatar {
	width: 36px; height: 36px; border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lcc-accent) 30%, transparent), var(--lcc-bg-1) 70%);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; flex: 0 0 auto;
	border: 1.5px solid var(--lcc-accent);
	box-shadow: 0 0 12px var(--lcc-accent-glow);
}
.lcc-header .lcc-titles { line-height: 1.25; }
.lcc-header .lcc-title {
	font-weight: 700; font-size: 15px;
	letter-spacing: .3px;
	text-shadow: 0 0 8px var(--lcc-glow-soft);
}
.lcc-header .lcc-status {
	font-size: 12px;
	color: var(--lcc-primary-light);
	opacity: .95;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Small pulsing green "online" dot in the chat header status line. */
.lcc-header .lcc-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #2fe27a;
	box-shadow: 0 0 6px rgba(47, 226, 122, 0.85), 0 0 11px rgba(47, 226, 122, 0.45);
	animation: lcc-online-pulse 1.8s ease-in-out infinite;
}
@keyframes lcc-online-pulse {
	0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px rgba(47,226,122,.85), 0 0 11px rgba(47,226,122,.45); }
	50%      { opacity: .55; transform: scale(.78); box-shadow: 0 0 4px rgba(47,226,122,.55); }
}
.lcc-header .lcc-close {
	margin-left: auto; background: none; border: none; color: var(--lcc-text-muted);
	cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 6px;
	transition: color .15s ease, text-shadow .15s ease;
}
.lcc-header .lcc-close:hover { color: var(--lcc-primary-light); text-shadow: 0 0 8px var(--lcc-glow-strong); }

/* Messages area with subtle HUD grid */
.lcc-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: var(--lcc-bg-0);
	background-image:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--lcc-primary) 8%, transparent), transparent 55%),
		linear-gradient(color-mix(in srgb, var(--lcc-primary) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--lcc-primary) 6%, transparent) 1px, transparent 1px);
	background-size: 100% 100%, 26px 26px, 26px 26px;
}
/* Scrollbar */
.lcc-messages::-webkit-scrollbar { width: 8px; }
.lcc-messages::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--lcc-primary) 35%, transparent);
	border-radius: 8px;
}

.lcc-msg {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.lcc-msg a { color: var(--lcc-primary-light); text-decoration: underline; }
.lcc-msg.lcc-bot {
	background: rgba(13, 22, 34, 0.9);
	color: var(--lcc-text);
	align-self: flex-start;
	border: 1px solid color-mix(in srgb, var(--lcc-primary) 22%, transparent);
	border-bottom-left-radius: 4px;
	box-shadow: inset 0 0 18px color-mix(in srgb, var(--lcc-primary) 7%, transparent);
}
.lcc-msg.lcc-user {
	background: linear-gradient(135deg, var(--lcc-primary), color-mix(in srgb, var(--lcc-primary) 70%, #0a1018));
	color: #02141d;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	border: 1px solid var(--lcc-primary-light);
	box-shadow: 0 0 16px var(--lcc-glow-soft);
	font-weight: 500;
}
.lcc-msg.lcc-user a { color: #02141d; }

/* Typing indicator (cyan dots) */
.lcc-typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
.lcc-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--lcc-primary);
	box-shadow: 0 0 8px var(--lcc-glow-strong);
	display: inline-block;
	animation: lcc-bounce 1.2s infinite ease-in-out;
}
.lcc-typing span:nth-child(2) { animation-delay: .15s; }
.lcc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lcc-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* Quick-reply chips */
.lcc-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-start;
	max-width: 100%;
	margin-top: 2px;
}
.lcc-chip {
	background: rgba(8, 16, 26, 0.85);
	color: var(--lcc-primary-light);
	border: 1px solid color-mix(in srgb, var(--lcc-primary) 55%, transparent);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-family: var(--lcc-font);
	line-height: 1.25;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
	text-align: left;
}
.lcc-chip:hover,
.lcc-chip:focus {
	background: color-mix(in srgb, var(--lcc-primary) 16%, var(--lcc-bg-1));
	color: #fff;
	border-color: var(--lcc-primary);
	box-shadow: 0 0 14px var(--lcc-glow-strong);
	outline: none;
}
/* Amber accent chip (e.g. "Book a call") echoes the holographic globe */
.lcc-chip.lcc-chip-accent {
	color: var(--lcc-accent);
	border-color: color-mix(in srgb, var(--lcc-accent) 60%, transparent);
}
.lcc-chip.lcc-chip-accent:hover,
.lcc-chip.lcc-chip-accent:focus {
	background: color-mix(in srgb, var(--lcc-accent) 16%, var(--lcc-bg-1));
	color: #fff;
	border-color: var(--lcc-accent);
	box-shadow: 0 0 14px var(--lcc-accent-glow);
}

/* Input area */
.lcc-input {
	border-top: 1px solid var(--lcc-line);
	padding: 10px;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	background: var(--lcc-bg-0);
}
.lcc-input textarea {
	flex: 1 1 auto;
	resize: none;
	background: rgba(8, 16, 26, 0.9);
	border: 1px solid color-mix(in srgb, var(--lcc-primary) 30%, transparent);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--lcc-font);
	max-height: 110px;
	outline: none;
	color: var(--lcc-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lcc-input textarea::placeholder { color: var(--lcc-text-muted); }
.lcc-input textarea:focus {
	border-color: var(--lcc-primary);
	box-shadow: 0 0 0 1px var(--lcc-glow-soft), 0 0 14px var(--lcc-glow-soft);
}
.lcc-send {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	border-radius: 12px;
	border: 1px solid var(--lcc-primary-light);
	background: linear-gradient(135deg, var(--lcc-primary), color-mix(in srgb, var(--lcc-primary) 65%, #0a1018));
	color: #02141d;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 14px var(--lcc-glow-soft);
	transition: box-shadow .15s ease, transform .12s ease;
}
.lcc-send:hover { box-shadow: 0 0 20px var(--lcc-glow-strong); transform: translateY(-1px); }
.lcc-send:disabled { opacity: .5; cursor: default; box-shadow: none; }
.lcc-send svg { width: 20px; height: 20px; fill: #02141d; }

.lcc-footnote {
	text-align: center;
	font-size: 11px;
	color: var(--lcc-text-muted);
	letter-spacing: .4px;
	padding: 4px 0 9px;
	background: var(--lcc-bg-0);
}

/* ---------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
	.lcc-panel {
		width: 100vw;
		height: 100vh;
		height: 100dvh; /* full mobile sheet, accounting for browser chrome */
		max-width: 100vw;
		max-height: 100vh;
		max-height: 100dvh;
		bottom: 0; right: 0;
		border-radius: 0;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	/* Keep the header (with the X close button) reachable at the top of the sheet. */
	.lcc-header {
		position: sticky;
		top: 0;
		z-index: 5;
		flex: 0 0 auto;
	}
	/* Slightly smaller reply font on mobile for readability / fit. */
	.lcc-msg { font-size: 13px; }
	.lcc-launcher { bottom: 16px; right: 16px; }
	.lcc-chip { font-size: 12px; padding: 9px 14px; }
}

/* ---------------------------------------------------------------------
   Accessibility — respect reduced motion (disable pulse / rotation)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lcc-launcher { animation: none; }
	.lcc-launcher::before { animation: none; }
	.lcc-typing span { animation: none; opacity: .8; }
	.lcc-panel { animation: none; }
	.lcc-header .lcc-status-dot { animation: none; }
}

/* Fallback for browsers without color-mix(): keep it usable.
   (Modern evergreen browsers all support color-mix as of 2023+.) */
@supports not (color: color-mix(in srgb, red, blue)) {
	:root { --lcc-glow-strong: rgba(0,212,255,.6); --lcc-glow-soft: rgba(0,212,255,.3); --lcc-line: rgba(0,212,255,.4); --lcc-accent-glow: rgba(255,174,59,.5); }
	.lcc-msg.lcc-bot { border-color: rgba(0,212,255,.25); }
	.lcc-chip { border-color: rgba(0,212,255,.55); }
}

/* ---------------------------------------------------------------------
   Bot avatar beside replies (uploaded image or default lion circle)
   --------------------------------------------------------------------- */
.lcc-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	align-self: flex-start;
	max-width: 90%;
}
.lcc-row .lcc-msg {
	max-width: 100%;
}
.lcc-bot-avatar {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--lcc-bg-1);
	border: 1.5px solid var(--lcc-primary);
	box-shadow: 0 0 9px var(--lcc-glow-soft);
}
/* Default (no upload): amber-ringed lion emoji */
.lcc-bot-avatar-default {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	border-color: var(--lcc-accent);
	box-shadow: 0 0 9px var(--lcc-accent-glow);
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lcc-accent) 26%, transparent), var(--lcc-bg-1) 70%);
}
/* Header avatar when an image is uploaded */
.lcc-header .lcc-avatar-img {
	object-fit: cover;
	border: 1.5px solid var(--lcc-accent);
	box-shadow: 0 0 12px var(--lcc-accent-glow);
}

@media (max-width: 480px) {
	.lcc-bot-avatar { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------------
   Auto-welcome teaser bubble (HUD style)
   --------------------------------------------------------------------- */
.lcc-teaser {
	position: fixed;
	right: 22px;
	bottom: 96px;
	width: 280px;
	max-width: calc(100vw - 44px);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--lcc-primary) 7%, transparent), transparent 30%),
		var(--lcc-surface);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	color: var(--lcc-text);
	border: 1px solid var(--lcc-line);
	border-radius: 14px;
	padding: 13px 34px 13px 14px;
	font-family: var(--lcc-font);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
	z-index: 2147483000;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--lcc-primary) 16%, transparent),
		0 0 22px var(--lcc-glow-soft),
		0 14px 40px rgba(0, 0, 0, 0.55);
	animation: lcc-teaser-in .28s ease;
}
.lcc-teaser:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lcc-primary) 26%, transparent), 0 0 28px var(--lcc-glow-strong), 0 14px 40px rgba(0,0,0,.55); }
.lcc-teaser-body { color: var(--lcc-text); }
.lcc-teaser-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	color: var(--lcc-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
}
.lcc-teaser-close:hover { color: var(--lcc-primary-light); }
/* little pointer toward the launcher */
.lcc-teaser::after {
	content: "";
	position: absolute;
	right: 26px;
	bottom: -7px;
	width: 13px;
	height: 13px;
	background: var(--lcc-surface);
	border-right: 1px solid var(--lcc-line);
	border-bottom: 1px solid var(--lcc-line);
	transform: rotate(45deg);
}
@keyframes lcc-teaser-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
	.lcc-teaser { right: 16px; bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
	.lcc-teaser { animation: none; }
}

/* Honeypot — visually hidden but present for bots (a11y-safe) */
.lcc-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.lcc-hp-field { display: block; }