/* Site chat widget — the visitor-facing Chatbot Add-on.
   Plan: COMMAND/plans/2026-09-04-chat-addon-rethink.md §11.1.

   THE LOOK IS THE LAYERLY BRIDGE CHAT'S, copied from layerly-admin.js (#la-panel, #la-trigger,
   .la-msg*, .la-stream-status, #la-input-box, #la-send), value for value: a 44px launcher with a
   24px inset and a navy-style lift on hover; a 400 x 700 panel with a 16px radius, a 1px border and
   a deep soft shadow that pops in; 13px / 1.55 messages 11px apart; the visitor's message in a
   tinted, bordered 10px-radius bubble at 85%, the assistant's as plain text at 92% under a 9px
   byline; "what it is doing now" as the small mono pill with the pulsing orb; one tinted, bordered,
   12px-radius input box holding a borderless textarea and, under it, a 30px round send.
   Two differences from the bridge chat, both on purpose: no blue bar across the top, and no extra
   icons inside the input box.

   COLOUR is the business site's, from one input:
     --lc-accent   inline from the plugin when the platform set one; otherwise the site's own tokens
                   (Elementor kit global, WordPress palette, engine --color-primary); otherwise a
                   neutral slate. Never a Layerly colour.
     --lc-ink      readable text ON an accent fill by WCAG contrast (white, near-black, or black when
                   neither reaches 4.5:1). The plugin computes it for a configured accent and the
                   script for an inherited one; the relative-colour line is only the first paint.
     tints         the input box and the visitor's bubble are the accent mixed into the surface.
   Accent is only ever a fill (launcher, send, orb) or a tint; words are fixed near-black / near-white
   on a surface, so no site colour can make text unreadable. Light or dark: the script looks at what
   the widget sits on and sets data-scheme; until then prefers-color-scheme decides.

   THE PANEL OPENS WITH CSS, NOT JAVASCRIPT (:has on the hidden checkbox, with a root-class fallback
   set by the script). Perfmatters Delay JS holds every script until the first user interaction and
   EATS that first click, so a JS-opened panel is dead on exactly the click that matters. Opening in
   CSS means the panel works before the script has loaded; this is why no client's Perfmatters
   exclusions need editing (a live-site Class D change we would otherwise need on ~91 sites).

   MOTION lives ONLY inside prefers-reduced-motion: no-preference blocks. */

.layerly-chat, .layerly-chat *, .layerly-chat *::before, .layerly-chat *::after { box-sizing: border-box; }

.layerly-chat {
  --lc-brand: var(--e-global-color-primary, var(--wp--preset--color--primary, var(--color-primary, #2d3340)));
  --lc-accent: var(--lc-brand);
  --lc-ink: #ffffff;
  --lc-surface: #ffffff;
  --lc-elevated: #f1f2f4;
  --lc-text: #14161c;
  --lc-muted: #4a5163;
  --lc-border: rgba(20, 22, 28, .10);
  --lc-border2: rgba(20, 22, 28, .17);
  --lc-edge: #8a8f9c;
  --lc-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lc-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  position: fixed; right: 24px; bottom: 24px; z-index: 99990;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--lc-font); font-size: 13px; line-height: 1.55; color: var(--lc-text);
  letter-spacing: normal; text-transform: none; text-align: left;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .layerly-chat {
    --lc-elevated: color-mix(in srgb, var(--lc-accent) 9%, #ffffff);
    --lc-border: color-mix(in srgb, var(--lc-text) 10%, transparent);
    --lc-border2: color-mix(in srgb, var(--lc-text) 17%, transparent);
    --lc-edge: color-mix(in srgb, var(--lc-text) 50%, var(--lc-surface));
  }
}
/* First-paint ink for an INHERITED accent; the script replaces it with the exact WCAG answer. */
@supports (color: hsl(from red h s l)) {
  .layerly-chat { --lc-ink: hsl(from var(--lc-accent) 0 0% calc((l - 58) * -100)); }
}

/* Dark — the bridge chat's own dark surfaces (#111118 / #1a1a24), tinted by the accent. */
@media (prefers-color-scheme: dark) {
  .layerly-chat:not([data-scheme="light"]) {
    --lc-surface: #111118; --lc-elevated: #1a1a24; --lc-text: #e8e8f0; --lc-muted: #b6bccb;
    --lc-border: rgba(232, 232, 240, .12); --lc-border2: rgba(232, 232, 240, .2); --lc-edge: #7d8394;
  }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .layerly-chat:not([data-scheme="light"]) {
      --lc-elevated: color-mix(in srgb, var(--lc-accent) 14%, #1a1a24);
      --lc-border: color-mix(in srgb, var(--lc-text) 12%, transparent);
      --lc-border2: color-mix(in srgb, var(--lc-text) 20%, transparent);
      --lc-edge: color-mix(in srgb, var(--lc-text) 50%, var(--lc-surface));
    }
  }
}
.layerly-chat[data-scheme="dark"] {
  --lc-surface: #111118; --lc-elevated: #1a1a24; --lc-text: #e8e8f0; --lc-muted: #b6bccb;
  --lc-border: rgba(232, 232, 240, .12); --lc-border2: rgba(232, 232, 240, .2); --lc-edge: #7d8394;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .layerly-chat[data-scheme="dark"] {
    --lc-elevated: color-mix(in srgb, var(--lc-accent) 14%, #1a1a24);
    --lc-border: color-mix(in srgb, var(--lc-text) 12%, transparent);
    --lc-border2: color-mix(in srgb, var(--lc-text) 20%, transparent);
    --lc-edge: color-mix(in srgb, var(--lc-text) 50%, var(--lc-surface));
  }
}

/* A host theme's own button / input / label rules must not reach in. */
.layerly-chat button, .layerly-chat input, .layerly-chat textarea, .layerly-chat label {
  font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; margin: 0;
}
.layerly-chat button, .layerly-chat textarea, .layerly-chat input:not([type="checkbox"]) {
  -webkit-appearance: none; appearance: none; box-shadow: none; min-width: 0;
}
.layerly-chat p, .layerly-chat ul { margin: 0; padding: 0; }
.layerly-chat svg { display: block; flex: none; }
.layerly-chat .layerly-chat__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Launcher: the bridge trigger (44px, accent fill, lift on hover) with the button text beside the
   icon. It STAYS on screen with the panel open and folds to the round chevron button. ── */
.layerly-chat .layerly-chat__launcher { position: relative; display: block; }
.layerly-chat .layerly-chat__toggle {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border-radius: 999px;
}
.layerly-chat .layerly-chat__face {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--lc-accent); color: var(--lc-ink);
  font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.layerly-chat .layerly-chat__ico { width: 20px; height: 20px; }
.layerly-chat .layerly-chat__face .layerly-chat__ico--chev { display: none; }
.layerly-chat:is(.is-open, :has(.layerly-chat__toggle:checked)) .layerly-chat__face .layerly-chat__ico--chat { display: none; }
.layerly-chat:is(.is-open, :has(.layerly-chat__toggle:checked)) .layerly-chat__face .layerly-chat__ico--chev { display: block; }
.layerly-chat:is(.is-open, :has(.layerly-chat__toggle:checked)) .layerly-chat__face { width: 44px; padding: 0; }
.layerly-chat:is(.is-open, :has(.layerly-chat__toggle:checked)) .layerly-chat__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* A ring that reads on any page: light inside, dark outside. */
.layerly-chat .layerly-chat__toggle:focus-visible + .layerly-chat__face,
.layerly-chat .layerly-chat__close:focus-visible,
.layerly-chat .layerly-chat__btn:focus-visible,
.layerly-chat .layerly-chat__send:focus-visible,
.layerly-chat .layerly-chat__link:focus-visible,
.layerly-chat .layerly-chat__card-link:focus-visible {
  outline: 0; box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #14161c;
}

/* ── Panel: #la-panel — 400 x 700, 16px radius, 1px border, deep soft shadow. ── */
.layerly-chat .layerly-chat__panel {
  position: relative; display: none; flex-direction: column; overflow: hidden;
  width: min(400px, calc(100vw - 48px)); height: min(700px, calc(100dvh - 120px));
  background: var(--lc-surface); color: var(--lc-text);
  border: 1px solid var(--lc-border2); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .2); transform-origin: bottom right;
}
.layerly-chat:is(.is-open, :has(.layerly-chat__toggle:checked)) .layerly-chat__panel { display: flex; }

/* The way out on a phone, where the sheet covers the launcher. Not a bar: one round button. */
.layerly-chat .layerly-chat__close {
  display: none; position: absolute; top: 8px; right: 8px; z-index: 3; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--lc-text);
  background: var(--lc-elevated); border: 1px solid var(--lc-border);
}

/* #la-messages: 14px gutters, 11px between messages. */
.layerly-chat .layerly-chat__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 11px; padding: 14px 14px 16px; background: var(--lc-surface);
}
.layerly-chat .layerly-chat__log:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--lc-text); }
.layerly-chat .layerly-chat__item { display: flex; flex-direction: column; gap: 4px; }
.layerly-chat .layerly-chat__item--me { align-items: flex-end; }
.layerly-chat .layerly-chat__item--bot { align-items: flex-start; }

/* .la-msg-content: the visitor's message in a tinted, bordered bubble; the assistant's as plain text. */
.layerly-chat .layerly-chat__msg { font-size: 13px; line-height: 1.55; color: var(--lc-text); overflow-wrap: anywhere; }
.layerly-chat .layerly-chat__msg--me {
  align-self: flex-end; max-width: 85%; padding: 10px 12px; white-space: pre-wrap;
  background: var(--lc-elevated); border: 1px solid var(--lc-border); border-radius: 10px;
}
.layerly-chat .layerly-chat__msg--bot { align-self: flex-start; max-width: 92%; padding: 2px; background: transparent; border: 0; }
.layerly-chat .layerly-chat__msg p + p, .layerly-chat .layerly-chat__msg p + ul, .layerly-chat .layerly-chat__msg ul + p { margin-top: 8px; }
.layerly-chat .layerly-chat__msg ul { padding-left: 20px; list-style: disc; }
.layerly-chat .layerly-chat__msg li + li { margin-top: 3px; }
.layerly-chat .layerly-chat__msg strong { font-weight: 700; }
/* .la-msg-byline */
.layerly-chat .layerly-chat__by { padding: 0 4px; font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: .01em; color: var(--lc-muted); }
.layerly-chat .layerly-chat__item--me .layerly-chat__by { text-align: right; }

/* .la-stream-status: what it is doing right now — the mono pill with the pulsing orb. */
.layerly-chat .layerly-chat__step {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-top: 6px; padding: 4px 10px;
  background: var(--lc-elevated); border-radius: 8px; color: var(--lc-text);
  font-family: var(--lc-mono); font-size: 10px; font-weight: 500; line-height: 1.5;
}
.layerly-chat .layerly-chat__step-time { color: var(--lc-muted); font-weight: 400; }
.layerly-chat .layerly-chat__orb {
  display: inline-block; position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lc-accent);
}
.layerly-chat .layerly-chat__orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--lc-accent); opacity: 0;
}

/* The handoff card: the business's own details as links, in the visitor-bubble's tint. */
.layerly-chat .layerly-chat__card {
  display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 92%; padding: 10px;
  background: var(--lc-elevated); border: 1px solid var(--lc-border); border-radius: 10px;
}
.layerly-chat .layerly-chat__card-title { font-weight: 700; font-size: 13px; padding: 0 2px 4px; }
.layerly-chat .layerly-chat__card-link {
  display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px;
  color: var(--lc-text); text-decoration: none; background: var(--lc-surface); border: 1px solid var(--lc-border); overflow-wrap: anywhere;
}
.layerly-chat .layerly-chat__card-link:hover { text-decoration: underline; }
.layerly-chat .layerly-chat__card-key { flex: none; min-width: 78px; font-size: 12px; font-weight: 700; color: var(--lc-muted); }
.layerly-chat .layerly-chat__card-val { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.layerly-chat .layerly-chat__card-cta { margin-top: 6px; }

/* Buttons: the bridge's squarer pill (10px radius), accent fill with ink. */
.layerly-chat .layerly-chat__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 13px; line-height: 1.2;
}
.layerly-chat .layerly-chat__btn--primary { background: var(--lc-accent); color: var(--lc-ink); }
.layerly-chat .layerly-chat__btn--ghost { background: transparent; color: var(--lc-text); border-color: var(--lc-border2); }
.layerly-chat .layerly-chat__btn[disabled] { opacity: .55; cursor: default; }
.layerly-chat .layerly-chat__link {
  align-self: flex-start; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  color: var(--lc-text); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}

/* #la-input-area / #la-input-box: one tinted, bordered, 12px box; a borderless textarea; the round send beneath it. */
.layerly-chat .layerly-chat__form { flex: none; padding: 6px 12px 12px; background: var(--lc-surface); }
.layerly-chat .layerly-chat__box {
  display: block; padding: 10px 12px; background: var(--lc-elevated); border: 1px solid var(--lc-border); border-radius: 12px;
}
.layerly-chat .layerly-chat__box:focus-within {
  border-color: color-mix(in srgb, var(--lc-accent) 55%, var(--lc-text));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-accent) 28%, transparent);
}
.layerly-chat .layerly-chat__input {
  display: block; width: 100%; min-height: 20px; max-height: 120px; padding: 0; resize: none; border: 0; outline: 0; border-radius: 0;
  background: transparent; color: var(--lc-text); font-size: 13px; line-height: 1.5;
}
.layerly-chat .layerly-chat__input::placeholder { color: var(--lc-muted); opacity: 1; }
.layerly-chat .layerly-chat__actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; }
.layerly-chat .layerly-chat__send {
  display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--lc-accent); color: var(--lc-ink);
}
.layerly-chat .layerly-chat__send svg { width: 16px; height: 16px; }
.layerly-chat .layerly-chat__send[disabled] { opacity: .4; cursor: not-allowed; }
/* Before the script has booted, Send would do nothing; say so by looking inert. */
.layerly-chat:not([data-booted]) .layerly-chat__send { opacity: .4; pointer-events: none; }

/* Leave my details: replaces the conversation while it is open. */
.layerly-chat .layerly-chat__lead { display: none; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; gap: 12px; padding: 16px 14px 12px; }
.layerly-chat.is-collecting .layerly-chat__lead { display: flex; }
.layerly-chat.is-collecting .layerly-chat__log, .layerly-chat.is-collecting .layerly-chat__form { display: none; }
.layerly-chat .layerly-chat__lead-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.layerly-chat .layerly-chat__lead-sub { margin-top: -6px; color: var(--lc-muted); font-size: 13px; }
.layerly-chat .layerly-chat__field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; }
.layerly-chat .layerly-chat__field em { font-weight: 400; font-style: normal; color: var(--lc-muted); }
.layerly-chat .layerly-chat__field input {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--lc-border2); border-radius: 12px;
  background: var(--lc-elevated); color: var(--lc-text); font-size: 16px; font-weight: 400;
}
.layerly-chat .layerly-chat__field input:focus {
  outline: 0; border-color: color-mix(in srgb, var(--lc-accent) 55%, var(--lc-text)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-accent) 28%, transparent);
}
.layerly-chat .layerly-chat__lead-error {
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--lc-elevated); color: var(--lc-text); border: 1px solid var(--lc-text);
}
.layerly-chat .layerly-chat__lead-error[hidden] { display: none; }
.layerly-chat .layerly-chat__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.layerly-chat .layerly-chat__row .layerly-chat__btn--primary { flex: 1 1 150px; }

/* ── Phones: a full-screen sheet, as the bridge chat's is. The launcher is covered, so one round
   button carries the way out. 44px targets; 16px field text so iOS does not zoom. ── */
@media (max-width: 560px) {
  .layerly-chat { right: 14px; bottom: 14px; }
  .layerly-chat .layerly-chat__panel {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0;
  }
  .layerly-chat .layerly-chat__close { display: flex; top: calc(8px + env(safe-area-inset-top)); }
  .layerly-chat .layerly-chat__log { padding-top: calc(60px + env(safe-area-inset-top)); }
  .layerly-chat .layerly-chat__lead { padding-top: calc(60px + env(safe-area-inset-top)); }
  .layerly-chat .layerly-chat__form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .layerly-chat .layerly-chat__msg { font-size: 15px; }
  .layerly-chat .layerly-chat__by { font-size: 11px; }
  .layerly-chat .layerly-chat__input { font-size: 16px; }
  .layerly-chat .layerly-chat__send { width: 44px; height: 44px; }
  .layerly-chat .layerly-chat__send svg { width: 20px; height: 20px; }
  .layerly-chat:is(.is-open, :has(.layerly-chat__toggle:checked)) .layerly-chat__launcher { display: none; }
  html:has(.layerly-chat__toggle:checked) { overflow: hidden; }
}
@media (pointer: coarse) {
  .layerly-chat .layerly-chat__send { width: 44px; height: 44px; }
  .layerly-chat .layerly-chat__input { font-size: 16px; }
}

@media (forced-colors: active) {
  .layerly-chat .layerly-chat__face, .layerly-chat .layerly-chat__panel, .layerly-chat .layerly-chat__msg--me,
  .layerly-chat .layerly-chat__box { border: 1px solid CanvasText; }
}

/* ── Motion — only for readers who have not asked for less (the bridge chat's own: la-pop, la-orb). ── */
@media (prefers-reduced-motion: no-preference) {
  .layerly-chat .layerly-chat__panel { animation: lc-pop .2s cubic-bezier(.34, 1.56, .64, 1); }
  .layerly-chat .layerly-chat__item { animation: lc-msg .18s ease-out; }
  .layerly-chat .layerly-chat__face { transition: transform .18s ease, box-shadow .18s ease; }
  .layerly-chat .layerly-chat__toggle:hover + .layerly-chat__face { transform: translateY(-1px) scale(1.05); box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }
  .layerly-chat .layerly-chat__send, .layerly-chat .layerly-chat__btn { transition: transform .15s ease, opacity .2s ease; }
  .layerly-chat .layerly-chat__send:hover:not([disabled]) { transform: translateY(-1px); }
  .layerly-chat .layerly-chat__box { transition: border-color .2s, box-shadow .2s; }
  .layerly-chat .layerly-chat__orb { animation: lc-orb-core 1.4s ease-in-out infinite; }
  .layerly-chat .layerly-chat__orb::after { animation: lc-orb-halo 1.4s ease-out infinite; }
}
@keyframes lc-pop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes lc-msg { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lc-orb-core { 0%, 100% { transform: scale(.8); opacity: .8; } 50% { transform: scale(1); opacity: 1; } }
@keyframes lc-orb-halo { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }