/*
 * Home page scripted conversations: the hero preview + Preview/Live switch (build A) and the agents
 * section player (build B). Behaviour in assets/js/hc-home-demo.js.
 * The preview chat mirrors the real Lucy widget (clean look) part for part: avatar header with the
 * live dot and menu, "You" + tinted bubble, agent name over a plain answer, SOURCES chips, time +
 * thumbs, follow-up suggestion pills, the hand-off card, composer with mic + send. Keep it in step
 * with lucy-widget.css when the real look changes.
 * The hero preview reuses the hero's own classes (.lh-pill, .lh-lit, .lh-q, .lh-chatframe, .lh-note)
 * from the page markup so it stacks exactly like the live hero it stands in for.
 */
#lx-hero[hidden], .lh-demo[hidden], .lx-liveswitch[hidden] { display: none !important; }

/* ---- the chat window ------------------------------------------------------------------ */
.lx-chat { --lxb: #2a2aff; display: flex; flex-direction: column; background: #fff; color: #111827; text-align: left; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lx-chat__head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 8px; }
.lx-chat__av { position: relative; flex: none; width: 38px; height: 38px; }
.lx-chat__avin { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #2a2aff; }
.lx-chat__avin img { width: 30px; height: 30px; object-fit: contain; display: block; }
.lx-chat--client .lx-chat__avin { background: var(--lxac, #2a2aff); color: #fff; }
.lx-chat__av i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: lx-live 2.4s ease-out infinite; }
@keyframes lx-live { 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.lx-chat__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lx-chat__name { font-size: 15.5px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-chat__sub { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-chat__tag { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a5a00; background: #fdf0d5; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.lx-chat__more { flex: none; width: 20px; height: 20px; color: #6b7280; }
.lx-chat__more svg, .lx-chat__mic svg, .lx-chat__clip svg { width: 100%; height: 100%; display: block; }
.lx-chat__thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: #d8dbe8 transparent; }
.lx-chat__thread > * { flex: none; animation: lx-in .28s ease both; }
@keyframes lx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lx-row { display: flex; flex-direction: column; max-width: 100%; }
.lx-row--u { align-items: flex-end; }
.lx-who { font-size: 12px; font-weight: 700; color: #6b7280; margin: 0 0 3px; }
.lx-row--u .lx-who { margin-right: 4px; }
.lx-bub { max-width: 88%; background: #eef1fd; color: #111827; border-radius: 14px; padding: 10px 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.lx-time { font-size: 9.5px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.lx-row--u .lx-time { margin: 4px 4px 0 0; }
.lx-txt { font-size: 15px; line-height: 1.5; color: #111827; overflow-wrap: anywhere; max-width: 94%; min-height: 1.5em; }
.lx-txt b { font-weight: 700; color: #111827; }
.lx-ln { display: block; }
.lx-ln + .lx-ln, .lx-li + .lx-ln { margin-top: 6px; }
.lx-li { display: block; position: relative; padding-left: 16px; margin-top: 4px; }
.lx-li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #9ca3af; }
.lx-dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.lx-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; animation: lx-dot 1.1s ease-in-out infinite; }
.lx-dots i:nth-child(2) { animation-delay: .15s; } .lx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lx-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* SOURCES, then time + thumbs: what the real widget puts under every answer */
.lx-src { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 8px; }
.lx-src__l { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9ca3af; margin-right: 2px; }
.lx-src__c { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid #e5e7eb; border-radius: 999px; padding: 2px 9px 2px 7px; font-size: 11.5px; line-height: 1.5; color: #374151; background: #fff; }
.lx-src__c svg { flex: none; width: 11px; height: 11px; color: #9ca3af; }
.lx-meta { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.lx-fb { width: 15px; height: 15px; color: #9ca3af; }
.lx-fb svg { width: 100%; height: 100%; display: block; }
/* follow-up suggestions: tappable pills in the brand colour */
.lx-sug { display: flex; flex-wrap: wrap; gap: 7px; margin-top: -4px; }
.lx-sug__c { border: 1px solid var(--lxb); color: var(--lxb); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; line-height: 1.3; background: #fff; transition: background .15s ease, color .15s ease; }
.lx-sug__c.is-on { background: var(--lxb); color: #fff; }
/* the hand-off card */
.lx-esc { align-self: stretch; max-width: 420px; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px 14px; background: #fafbff; display: flex; flex-direction: column; gap: 8px; }
.lx-esc__intro { font-size: 14px; font-weight: 600; color: #111827; }
.lx-esc__in { display: block; min-height: 38px; border: 1px solid #d1d5db; border-radius: 9px; background: #fff; padding: 8px 11px; font-size: 14px; line-height: 1.4; color: #111827; }
.lx-esc__in:empty::before { content: attr(data-ph); color: #9ca3af; }
.lx-esc__send { align-self: flex-start; background: var(--lxb); color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 13.5px; font-weight: 700; transition: transform .12s ease, filter .12s ease; }
.lx-esc__send.is-on { transform: scale(.96); filter: brightness(.85); }
.lx-esc__fine { font-size: 10.5px; color: #9ca3af; }
.lx-esc.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.lx-esc__done { font-size: 14px; font-weight: 600; color: #166534; }
.lx-esc__done::before { content: "\2713\00a0"; }
/* the owner's result line: not part of the real chat, so it reads as a note about it */
.lx-res { align-self: stretch; display: flex; gap: 8px; align-items: baseline; background: #e9f9ec; color: #14591f; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.lx-res::before { content: "For you"; flex: none; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; color: #fff; background: #2f9e42; border-radius: 4px; padding: 2px 6px; position: relative; top: -1px; }
.lx-div { align-self: stretch; height: 1px; background: #e5e7eb; margin: 4px 0; animation: none; }
/* composer */
.lx-chat__comp { display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 7px 8px 7px 16px; border: 1px solid #e5e7eb; border-radius: 22px; box-shadow: 0 6px 18px -12px rgba(17, 24, 39, .35); cursor: default; transition: border-color .15s ease, box-shadow .15s ease; }
.lx-chat__comp.is-typing { border-color: var(--lxb); box-shadow: 0 0 0 3px rgba(42, 42, 255, .12), 0 6px 18px -12px rgba(17, 24, 39, .35); }
.lx-chat__comp[role="button"] { cursor: text; }
.lx-chat__comp:focus-visible { outline: 3px solid #2a2aff; outline-offset: 2px; }
.lx-chat__clip { display: none; flex: none; width: 20px; height: 20px; color: #374151; }
.lx-chat__input { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.4; color: #111827; white-space: nowrap; overflow: hidden; }
.lx-chat__input:empty::before { content: attr(data-ph); color: #9ca3af; }
.lx-chat__comp.is-typing .lx-chat__input::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: #111827; animation: lx-caret 1s steps(1) infinite; }
@keyframes lx-caret { 50% { opacity: 0; } }
.lx-chat__mic { flex: none; width: 21px; height: 21px; color: #4b5563; }
.lx-chat__send { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #c7ceff; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.lx-chat__send.is-on { background: var(--lxb); }
.lx-chat__send svg { width: 17px; height: 17px; display: block; }
.lx-chat__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 16px 9px; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: #9ca3af; }
.lx-chat__count::before { content: "AI-generated responses · scripted preview · "; }
.lx-chat__ctrl { display: inline-flex; gap: 6px; }
.lx-chat .lx-chat__ctrl button {
	-webkit-appearance: none; appearance: none; position: relative; min-height: 26px; padding: 3px 12px; border: 1px solid #e0e2f0; border-radius: 999px;
	background: #fff; color: #1414c4; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none;
}
.lx-chat .lx-chat__ctrl button::after { content: ""; position: absolute; inset: -9px -2px; }
.lx-chat .lx-chat__ctrl button:hover { border-color: #2a2aff; background: #fff; color: #1414c4; }

/* ---- the Manage my Lucy look (owner side): "LUCY" label, grey bubble, paperclip composer ---- */
.lx-chat--mml .lx-chat__av { width: 12px; height: 12px; margin: 0 2px 0 4px; }
.lx-chat--mml .lx-chat__avin { display: none; }
.lx-chat--mml .lx-chat__av i { position: static; display: block; width: 12px; height: 12px; border: 0; }
.lx-chat--mml .lx-chat__head { border-bottom: 1px solid #eceef4; padding-bottom: 12px; }
.lx-chat--mml .lx-chat__thread { padding-top: 14px; }
.lx-chat--mml .lx-row--a .lx-who { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.lx-chat--mml .lx-row--a .lx-who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.lx-chat--mml .lx-bub { background: #f0f0f2; border-radius: 18px; }
.lx-chat--mml .lx-chat__clip { display: block; }
.lx-chat--mml .lx-chat__mic { display: none; }
.lx-chat--mml .lx-chat__comp { padding-left: 14px; gap: 10px; }
.lx-chat--mml .lx-chat__send { background: #a3a3a3; }
.lx-chat--mml .lx-chat__send.is-on { background: #111827; }

/* ---- the Preview / Live switch, built into the top of the chat window ------------------ */
.lx-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 9px 12px 9px 16px; background: #f4f5fc; border-bottom: 1px solid #e3e6f5; text-align: left; }
.lx-mode.is-live { background: #e9f9ec; border-bottom-color: #bfe9c8; }
.lx-mode__note { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-family: 'Klee One', 'Segoe Script', 'Bradley Hand', cursive; font-weight: 600; font-size: 17px; line-height: 1.15; color: #1414c4; }
.lx-mode.is-live .lx-mode__note { color: #14591f; }
.lx-mode__arrow { flex: none; width: 40px; height: 20px; }
.lx-mode__arrow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lx-mode.is-live .lx-mode__arrow { display: none; }
.lx-mode .lx-mode__sw {
	-webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 999px;
	background: transparent; color: #0c1030; font: inherit; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13.5px; font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none;
}
.lx-mode .lx-mode__sw:hover, .lx-mode .lx-mode__sw:focus { background: transparent; color: #0c1030; }
.lx-mode .lx-mode__sw:focus-visible { outline: 3px solid #2a2aff; outline-offset: 2px; }
.lx-mode__l { color: #0c1030; } .lx-mode__r { color: #8a8ca1; }
.lx-mode.is-live .lx-mode__l { color: #8a8ca1; } .lx-mode.is-live .lx-mode__r { color: #14591f; }
.lx-mode__track { position: relative; flex: none; width: 54px; height: 30px; border-radius: 999px; background: #c3c8ee; box-shadow: inset 0 1px 3px rgba(12, 16, 48, .25); transition: background .2s ease; }
.lx-mode__track i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(12, 16, 48, .35); transition: transform .2s ease; }
.lx-mode.is-live .lx-mode__track { background: #2fb344; }
.lx-mode.is-live .lx-mode__track i { transform: translateX(24px); }
.lx-mode:not(.is-live) .lx-mode__track { animation: lx-nudge 2.6s ease-in-out 1.5s 3; }
@keyframes lx-nudge { 0%, 100% { box-shadow: inset 0 1px 3px rgba(12, 16, 48, .25), 0 0 0 0 rgba(42, 42, 255, .45); } 50% { box-shadow: inset 0 1px 3px rgba(12, 16, 48, .25), 0 0 0 7px rgba(42, 42, 255, 0); } }
@media screen and (max-width: 560px) {
	.lx-mode { padding: 8px 8px 8px 12px; }
	.lx-mode__note { font-size: 15px; }
	.lx-mode__arrow { width: 30px; }
}

/* ---- A. hero preview ----------------------------------------------------------------- */
#lx-hero .lx-chat { height: clamp(460px, 60vh, 600px); }
#lx-hero .lh-pill[aria-selected="true"] { cursor: default; }
#lx-hero .lh-q {
	-webkit-appearance: none; appearance: none; border: 0; cursor: pointer; pointer-events: auto;
	letter-spacing: 0; text-transform: none; min-height: 0;
}
#lx-hero .lh-q:hover, #lx-hero .lh-q:focus { background: #fff; color: #0c1030; }
#lx-hero .lh-q[aria-pressed="true"] { box-shadow: 0 0 0 3px #61ce70, 0 16px 34px -16px rgba(0, 0, 0, .7); }
#lx-hero .lh-q:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media screen and (min-width: 1241px) { #lx-hero .lh-q { white-space: normal; } }
@media screen and (max-width: 1240px) {
	#lx-hero .lh-pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
	#lx-hero .lh-pills::-webkit-scrollbar { display: none; }
	#lx-hero .lh-pill { flex: none; min-height: 40px; }
}
@media screen and (max-width: 560px) {
	#lx-hero .lx-chat { height: clamp(440px, 64vh, 540px); }
	.lx-bub, .lx-txt { font-size: 14.5px; }
	.lx-sug__c { font-size: 13px; }
	.lx-chat__tag { display: none; }
	.lx-chat__count::before { content: "Scripted preview · "; }
}

/* ---- B. agents, with your kind of business ------------------------------------------- */
.lx-b { --lxac: #097063; --lxtint: #e2f3f1; max-width: 760px; margin: 34px auto 0; text-align: left; }
.lx-b.a-helpdesk { --lxac: #0a6aa8; --lxtint: #e3f0fb; }
.lx-b.a-faq { --lxac: #5f42d6; --lxtint: #ece8fc; }
.lx-b.a-sales { --lxac: #8a6207; --lxtint: #fbf0d9; }
.lx-b .lx-chat { --lxb: var(--lxac); }
.lx-b .lx-bub { background: var(--lxtint); }
.lx-b__lab { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lxac); text-align: center; }
.lx-b__biz { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.lx-b .lx-b__pill {
	-webkit-appearance: none; appearance: none; flex: none; min-height: 42px; padding: 8px 16px; border: 1.5px solid #dcdff0; border-radius: 999px;
	background: #fff; color: #0c1030; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: none;
	white-space: nowrap; cursor: pointer; box-shadow: none;
}
.lx-b .lx-b__pill:hover { border-color: var(--lxac); background: #fff; color: #0c1030; }
.lx-b .lx-b__pill[aria-pressed="true"] { background: var(--lxac); border-color: var(--lxac); color: #fff; }
.lx-b .lx-chat { height: 540px; border: 1px solid #e0e2f0; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 16, 48, .05), 0 30px 60px -30px rgba(12, 16, 48, .45); }
.lx-b__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 20px; }
.lx-b__cta small { font-size: 13px; color: #6d7594; }
.lx-b__fine { margin: 10px 0 0; text-align: center; font-size: 12px; color: #8a8ca1; }
.hac-card.lx-on { box-shadow: 0 0 0 3px var(--ac, #2a2aff), 0 26px 52px -22px rgba(12, 16, 48, .28); }
@media screen and (max-width: 782px) {
	.lx-b { margin-top: 24px; }
	.lx-b__biz { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
	.lx-b__biz::-webkit-scrollbar { display: none; }
	.lx-b .lx-chat { height: 540px; }
	.lx-b__cta .lh-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.lx-dots i, .lx-mode__track, .lx-chat__av i, .lx-chat__thread > *, .lx-chat__comp.is-typing .lx-chat__input::after { animation: none !important; }
	.lx-mode__track, .lx-mode__track i { transition: none; }
}