/* ==========================================================================
   Rooty - the Liferoot World website assistant
   --------------------------------------------------------------------------
   A clean, Apple-minimal glass widget in the bottom-right corner. It follows
   the site's theme tokens (light or dark) and keeps only the luminous orb
   colours of its own, so it never fights the page it floats over.

   Layers (see CONTRACT.md): launcher 260 / panel 270.
   Every class is namespaced "lrc-". The root is <div id="lr-core">.
   ========================================================================== */

#lr-core {
  /* Palette: the site's theme tokens, with light fallbacks */
  --lrc-ink: var(--ink, #0E1A1C);
  --lrc-ink-2: var(--ink-2, #384548);
  --lrc-ink-3: var(--ink-3, #56666A);
  --lrc-primary: var(--primary, #16474B);
  --lrc-on-primary: var(--on-primary, #FFFFFF);
  --lrc-accent: var(--accent, #3F7A2E);
  --lrc-glass: rgba(255, 255, 255, 0.92); /* light: small grey text stays >= 4.5:1 over any page */
  --lrc-glass-solid: var(--surface, #FFFFFF);  /* fallback when backdrop-filter is unsupported */
  --lrc-card: var(--surface, #FFFFFF);
  --lrc-bubble: color-mix(in srgb, var(--lrc-ink) 7%, var(--lrc-card));
  --lrc-hover: var(--surface-hover, #EEF3F2);
  --lrc-line: var(--line, rgba(14, 26, 28, 0.10));
  --lrc-line-2: var(--line-strong, rgba(14, 26, 28, 0.22));
  --lrc-control: var(--control-border, rgba(14, 26, 28, 0.5));
  --lrc-stop: #8A5A12;          /* white icon 5.9:1, edge vs white bar 5.9:1 */
  --lrc-on-stop: #FFFFFF;
  --lrc-sheen: rgba(255, 255, 255, 0.5);
  --lrc-shadow: 0 24px 60px rgba(14, 26, 28, 0.18), 0 2px 8px rgba(14, 26, 28, 0.06);
  --lrc-danger: var(--danger, #B42318);
  --lrc-focus: var(--focus, #1F7F76);

  /* Type */
  --lrc-fs: 15px;               /* message text: 15 / 17 / 20px via the Text size setting */
  --lrc-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
  --lrc-body: var(--font-body, "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --lrc-display: var(--font-display, "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif);

  /* Geometry */
  --lrc-gap: calc(24px + env(safe-area-inset-right, 0px));
  --lrc-pad: 14px;              /* one left/right inset for header, log, input and footer */
  --lrc-bottom: calc(24px + var(--lr-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px));
  --lrc-spring: cubic-bezier(0.32, 1.32, 0.52, 1);
  --lrc-ease: cubic-bezier(0.22, 0.8, 0.24, 1);

  font-family: var(--lrc-body);
  font-size: var(--lrc-fs);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #lr-core { --lrc-sheen: rgba(255, 255, 255, 0.06); --lrc-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3); --lrc-stop: #E0B46A; --lrc-on-stop: #1D1405; --lrc-glass: var(--glass-strong, rgba(16, 27, 29, 0.88)); }
}
:root[data-theme="dark"] #lr-core { --lrc-sheen: rgba(255, 255, 255, 0.06); --lrc-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3); --lrc-stop: #E0B46A; --lrc-on-stop: #1D1405; --lrc-glass: var(--glass-strong, rgba(16, 27, 29, 0.88)); }
#lr-core[data-size="1"] { --lrc-fs: 17px; }
#lr-core[data-size="2"] { --lrc-fs: 20px; }

#lr-core *,
#lr-core *::before,
#lr-core *::after { box-sizing: border-box; }

/* Zero-specificity reset (:where) so the component classes below set sizes */
:where(#lr-core) :where(button, input, textarea) { font: inherit; color: inherit; }
:where(#lr-core) button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#lr-core svg { display: block; flex: none; }

/* Visually hidden, still read by screen readers */
.lrc-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* One consistent, high-visibility focus ring for everything interactive */
/* Browsers without :focus-visible drop this rule and keep their default ring */
#lr-core :focus:not(:focus-visible) { outline: none; }
#lr-core :focus-visible {
  outline: 3px solid var(--lrc-focus);
  outline-offset: 3px;
}

/* ==========================================================================
   1. Launcher (orb + pill label)
   ========================================================================== */
.lrc-launcher {
  position: fixed;
  z-index: 260;
  right: var(--lrc-gap);
  bottom: var(--lrc-bottom);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 999px;
  transition: bottom 0.35s var(--lrc-ease), transform 0.45s var(--lrc-spring), opacity 0.25s ease, visibility 0s linear 0s;
  transform-origin: 100% 100%;
}
#lr-core .lrc-launcher:focus-visible { outline-offset: 6px; }
.lrc-open .lrc-launcher {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  pointer-events: none;
  transition: bottom 0.35s var(--lrc-ease), transform 0.3s var(--lrc-ease), opacity 0.2s ease, visibility 0s linear 0.3s;
}

/* The orb (shared by the launcher and the panel header) */
.lrc-orb {
  position: relative;
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.lrc-orb--lg {
  box-shadow:
    0 0 0 3px var(--lrc-glass-solid),
    0 0 0 4px var(--lrc-line),
    0 10px 28px rgba(14, 26, 28, 0.2),
    0 0 30px rgba(63, 216, 198, 0.28);
  background: radial-gradient(circle at 50% 50%, #0b2226 0 60%, #081416 100%);
  transition: box-shadow 0.3s ease, transform 0.35s var(--lrc-spring);
}
.lrc-launcher:hover .lrc-orb--lg,
.lrc-launcher:focus-visible .lrc-orb--lg {
  transform: scale(1.06);
  box-shadow:
    0 0 0 3px var(--lrc-glass-solid),
    0 0 0 4px var(--lrc-line-2),
    0 12px 32px rgba(14, 26, 28, 0.24),
    0 0 44px rgba(63, 216, 198, 0.45);
}
.lrc-orb--sm { width: 32px; height: 32px; background: #081416; box-shadow: 0 0 0 1px var(--lrc-line), 0 0 22px rgba(63, 216, 198, 0.28); }
.lrc-orb-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
}

/* CSS fallback orb (no WebGL, or the context was lost) */
.lrc-orb-fallback {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85) 0 4%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 62% 70%, rgba(155, 227, 106, 0.9) 0 18%, rgba(155, 227, 106, 0) 50%),
    radial-gradient(circle at 40% 45%, #3FD8C6 0 26%, #1B8F86 56%, #0B3538 78%, #061A1C 100%);
  box-shadow: inset 0 0 12px rgba(63, 216, 198, 0.8), inset 0 0 2px rgba(232, 197, 143, 0.9);
}
.lrc-orb-fallback::before {
  content: "";
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(63, 216, 198, 0) 0deg, rgba(63, 216, 198, 0.55) 70deg, rgba(155, 227, 106, 0.45) 140deg, rgba(232, 197, 143, 0.35) 200deg, rgba(63, 216, 198, 0) 280deg);
  mix-blend-mode: screen;
  animation: lrc-spin 7s linear infinite;
}
.lrc-nogl .lrc-orb-canvas { display: none; }
.lrc-nogl .lrc-orb-fallback { display: block; }

/* The breathing halo behind the launcher orb (works with and without WebGL) */
.lrc-orb--lg::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 216, 198, 0.2) 0 45%, rgba(63, 216, 198, 0) 70%);
  z-index: -1;
  animation: lrc-breathe 4.2s ease-in-out infinite;
  pointer-events: none;
}

/* "Ask Rooty" pill, desktop only (>= 1024px; on tablets the 260px pill
   would sit over single-column content), visible at rest */
.lrc-launcher-label {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: var(--lrc-ink);
  font-family: var(--lrc-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  background: var(--lrc-glass);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--lrc-line);
  box-shadow: inset 0 1px 0 var(--lrc-sheen), 0 8px 24px rgba(14, 26, 28, 0.12);
  transition: border-color 0.2s ease, transform 0.35s var(--lrc-spring), opacity 0.2s ease;
}
.lrc-launcher-label::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F6FFF9 0 12%, #6FE3D3 30%, #3FB9A9 55%, #3F8F4A 100%);
  box-shadow: 0 0 8px rgba(63, 216, 198, 0.6);
}
.lrc-launcher:hover .lrc-launcher-label { border-color: var(--lrc-line-2); transform: translateX(-2px); }
@media (min-width: 1024px) {
  .lrc-launcher-label { display: inline-flex; }
}
/* Compact (page scrolled, or the Support Hub): only the orb, so the pill never
   covers content or catches its clicks; hover or keyboard focus shows it again.
   The button's accessible name does not change. */
.lrc-launcher--compact { pointer-events: none; }
.lrc-launcher--compact .lrc-orb { pointer-events: auto; }
.lrc-launcher--compact .lrc-launcher-label { opacity: 0; transform: translateX(8px); }
.lrc-launcher--compact:hover .lrc-launcher-label,
.lrc-launcher--compact:focus-visible .lrc-launcher-label { opacity: 1; transform: none; }

/* Speech-bubble toast next to the launcher (mobile auto-minimise) */
.lrc-toast-wrap {
  position: fixed;
  z-index: 260;
  right: var(--lrc-gap);
  bottom: calc(var(--lrc-bottom) + 70px);
  max-width: min(300px, calc(100vw - 32px));
  pointer-events: none;
  transition: bottom 0.35s var(--lrc-ease);
}
.lrc-toast {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  text-align: left;
  font-size: 15px;
  line-height: 1.4;
  color: var(--lrc-ink);
  background: var(--lrc-glass-solid);
  border: 1px solid var(--lrc-line-2);
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 10px 30px rgba(14, 26, 28, 0.16);
  opacity: 0;
  visibility: hidden; /* not left in the accessibility tree with stale text */
  transform: translateY(8px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity 0.25s ease, transform 0.35s var(--lrc-spring), visibility 0s linear 0.35s;
  pointer-events: none;
}
.lrc-toast.lrc-show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.lrc-toast::after {
  content: "";
  position: absolute; right: 22px; bottom: -7px;
  width: 12px; height: 12px;
  background: inherit;
  border-right: 1px solid var(--lrc-line-2);
  border-bottom: 1px solid var(--lrc-line-2);
  transform: rotate(45deg);
}
.lrc-open .lrc-toast-wrap { display: none; }

/* ==========================================================================
   2. Panel
   ========================================================================== */
.lrc-panel {
  position: fixed;
  z-index: 270;
  right: var(--lrc-gap);
  bottom: var(--lrc-bottom);
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(620px, calc(100vh - 120px - var(--lr-bottom-offset, 0px)));
  height: min(620px, calc(100dvh - 120px - var(--lr-bottom-offset, 0px)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--lrc-ink);
  border-radius: 24px;
  background: var(--lrc-glass-solid);
  border: 1px solid var(--lrc-line);
  box-shadow:
    inset 0 1px 0 var(--lrc-sheen),
    var(--lrc-shadow);
  transform-origin: 100% 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.9);
  transition:
    transform 0.28s var(--lrc-ease),
    opacity 0.2s ease,
    bottom 0.35s var(--lrc-ease),
    height 0.35s var(--lrc-ease),
    visibility 0s linear 0.28s;
  isolation: isolate;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lrc-panel {
    background: var(--lrc-glass);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
  }
}
.lrc-open .lrc-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    transform 0.55s var(--lrc-spring),
    opacity 0.22s ease,
    bottom 0.35s var(--lrc-ease),
    height 0.35s var(--lrc-ease),
    visibility 0s linear 0s;
}

/* Decorative light: a soft sheen at the top of the glass and one thin brand hairline */
.lrc-glow {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--lrc-sheen), rgba(255, 255, 255, 0) 38%);
}
.lrc-glow::before {
  content: "";
  position: absolute; left: 28px; right: 28px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(63, 216, 198, 0), rgba(63, 216, 198, 0.55), rgba(155, 227, 106, 0.45), rgba(232, 197, 143, 0));
}

/* ---------- Header ---------- */
.lrc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 10px var(--lrc-pad);
  flex: none;
  position: relative;
  border-bottom: 1px solid var(--lrc-line);
}
.lrc-head-text { min-width: 0; flex: 1; }
.lrc-title {
  margin: 0;
  font-family: var(--lrc-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--lrc-ink);
}
.lrc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--lrc-ink-3);
  white-space: nowrap;
  min-width: 0;
}
.lrc-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lrc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: none;
  background: var(--lrc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc-accent) 18%, transparent);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.lrc-state-listening .lrc-dot { background: var(--lrc-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc-primary) 22%, transparent); animation: lrc-pulse 0.9s ease-in-out infinite; }
.lrc-state-thinking .lrc-dot { background: #C99A4F; box-shadow: 0 0 0 3px rgba(201, 154, 79, 0.22); animation: lrc-pulse 1.2s ease-in-out infinite; }
.lrc-state-speaking .lrc-dot { background: var(--lrc-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc-primary) 22%, transparent); animation: lrc-pulse 0.6s ease-in-out infinite; }
.lrc-state-navigating .lrc-dot { background: var(--lrc-accent); animation: lrc-pulse 0.5s ease-in-out infinite; }

.lrc-head-btns { display: flex; gap: 2px; flex: none; }
.lrc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--lrc-ink-3);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lrc-icon-btn:hover { background: var(--lrc-hover); color: var(--lrc-ink); }
.lrc-icon-btn[aria-expanded="true"] { background: var(--lrc-hover); color: var(--lrc-ink); }
/* ---------- Message log ---------- */
.lrc-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px var(--lrc-pad) 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--lrc-ink) 25%, transparent) transparent;
}
#lr-core .lrc-log:focus-visible { outline-offset: -3px; border-radius: 4px; }
.lrc-log::-webkit-scrollbar { width: 8px; }
.lrc-log::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lrc-ink) 22%, transparent); border-radius: 8px; }

.lrc-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  animation: lrc-rise 0.36s var(--lrc-ease) both;
}
.lrc-msg--user { align-items: flex-end; }
.lrc-msg--bot { align-items: flex-start; }
.lrc-restored { animation: none; }

.lrc-bubble {
  max-width: 86%;
  padding: 9px 13px;
  font-size: var(--lrc-fs);
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  border-radius: 18px;
}
.lrc-msg--bot .lrc-bubble {
  color: var(--lrc-ink);
  background: var(--lrc-bubble);
  border: 1px solid transparent;
  border-bottom-left-radius: 6px;
}
.lrc-msg--user .lrc-bubble {
  color: var(--lrc-on-primary);
  background: var(--lrc-primary);
  border: 1px solid transparent;
  border-bottom-right-radius: 6px;
  box-shadow: none;
}
.lrc-bubble strong { color: inherit; font-weight: 650; }
.lrc-note {
  display: block;
  margin-top: 6px;
  font-size: max(13px, calc(var(--lrc-fs) - 2px));
  color: var(--lrc-ink-3);
}

/* Navigation / status line ("Taking you to Liferoot Foods...") */
.lrc-msg--nav {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  font-size: max(13px, calc(var(--lrc-fs) - 2px));
  font-weight: 400;
  color: var(--lrc-ink-3);
}
.lrc-nav-dot {
  width: 12px; height: 1.5px; flex: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--lrc-primary), var(--lrc-accent));
}

/* Notices (voice unavailable, errors) */
.lrc-msg--notice .lrc-bubble {
  border-color: rgba(192, 162, 120, 0.6);
  background: rgba(192, 162, 120, 0.14);
}

/* Thinking dots */
.lrc-dots { display: inline-flex; gap: 6px; align-items: center; height: 1.5em; }
.lrc-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lrc-primary);
  animation: lrc-dot 1.2s ease-in-out infinite;
}
.lrc-dots i:nth-child(2) { animation-delay: 0.15s; background: color-mix(in srgb, var(--lrc-primary) 55%, var(--lrc-accent)); }
.lrc-dots i:nth-child(3) { animation-delay: 0.3s; background: var(--lrc-accent); }

/* Action buttons under bot messages */
.lrc-actions {
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%;
}
.lrc-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
  margin: 0;
  font-size: calc(var(--lrc-fs) - 1px);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  color: var(--lrc-ink);
  background: color-mix(in srgb, var(--lrc-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lrc-primary) 60%, transparent);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lrc-act:hover { background: color-mix(in srgb, var(--lrc-primary) 14%, transparent); border-color: var(--lrc-primary); }
.lrc-act:active { transform: scale(0.98); }
.lrc-act svg { color: var(--lrc-primary); }
.lrc-act[disabled] { opacity: 0.55; cursor: default; }
a.lrc-act { text-decoration: none; } /* "Send it by email" link */

/* Suggestions under the greeting: a quiet row of chips */
.lrc-msg--suggest { align-items: flex-start; }
.lrc-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.lrc-sugg {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  margin: 0;
  font-size: calc(var(--lrc-fs) - 1px);
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  color: var(--lrc-ink);
  background: var(--lrc-card);
  border: 1px solid var(--lrc-control);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lrc-sugg:hover { border-color: var(--lrc-primary); color: var(--lrc-primary); }

/* Settings popover (text size, read aloud, suggestions, team) */
.lrc-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 10px;
  z-index: 5;
  min-width: 232px;
  display: grid;
  gap: 2px;
  padding: 6px;
  max-height: calc(100vh - 180px - var(--lr-bottom-offset, 0px));
  max-height: calc(100dvh - 180px - var(--lr-bottom-offset, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lrc-glass-solid);
  border: 1px solid var(--lrc-line-2);
  border-radius: 14px;
  box-shadow: var(--lrc-shadow);
}
.lrc-menu[hidden] { display: none; }
.lrc-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lrc-ink);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.lrc-menu-item:hover { background: var(--lrc-hover); }
.lrc-menu-value { color: var(--lrc-ink-3); font-weight: 400; font-size: 13px; }
.lrc-menu-switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--lrc-control);
  transition: background 0.2s ease;
}
.lrc-menu-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.lrc-menu-item[aria-pressed="true"] .lrc-menu-switch { background: var(--lrc-primary); }
.lrc-menu-item[aria-pressed="true"] .lrc-menu-switch::after { transform: translateX(14px); background: var(--lrc-on-primary); }
.lrc-menu-sep { border: 0; border-top: 1px solid var(--lrc-line); margin: 4px 6px; }

/* ---------- Cards: lead form, review ---------- */
.lrc-msg--card { align-items: stretch; }
.lrc-card {
  width: 100%;
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--lrc-card);
  border: 1px solid var(--lrc-line);
  box-shadow: 0 1px 2px rgba(14, 26, 28, 0.04);
}
.lrc-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: max(13px, calc(var(--lrc-fs) - 2px));
  font-weight: 500;
  color: var(--lrc-ink-3);
}
.lrc-card-title::before {
  content: "";
  width: 6px; height: 6px; border-radius: 1px;
  background: var(--lrc-primary);
  transform: rotate(45deg);
}

/* Lead-capture form */
.lrc-form {
  display: flex; flex-direction: column; gap: 8px;
}
.lrc-form[aria-disabled="true"] { opacity: 0.6; }
.lrc-label {
  display: block;
  font-size: calc(var(--lrc-fs) - 1px);
  font-weight: 600;
  color: var(--lrc-ink);
}
.lrc-optional { font-weight: 400; color: var(--lrc-ink-2); }
.lrc-field {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font-size: var(--lrc-fs);
  line-height: 1.4;
  color: var(--lrc-ink);
  background: var(--lrc-card);
  border: 1.5px solid var(--lrc-control);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.lrc-field { min-height: 88px; resize: vertical; }
.lrc-field::placeholder { color: var(--lrc-ink-3); opacity: 1; }
#lr-core .lrc-field:focus-visible {
  outline: none;
  border-color: var(--lrc-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc-focus) 25%, transparent);
  border-radius: 14px;
}
.lrc-field[aria-invalid="true"] { border-color: var(--lrc-danger); }
.lrc-hint { margin: 0; font-size: max(13px, calc(var(--lrc-fs) - 2px)); color: var(--lrc-ink-3); }
.lrc-error {
  margin: 0;
  font-size: max(13px, calc(var(--lrc-fs) - 2px));
  font-weight: 600;
  color: var(--lrc-danger);
}
.lrc-error:empty { display: none; }

.lrc-topics {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0;
}
.lrc-topics legend { padding: 0; margin: 0 0 10px; }
.lrc-topic { position: relative; display: inline-flex; }
.lrc-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lrc-topic span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  font-size: calc(var(--lrc-fs) - 1px);
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--lrc-control);
  background: var(--lrc-card);
  color: var(--lrc-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lrc-topic span:hover { border-color: var(--lrc-primary); }
.lrc-topic input:checked + span {
  background: var(--lrc-primary);
  border-color: var(--lrc-primary);
  color: var(--lrc-on-primary);
}
.lrc-topic input:checked + span::before { content: "\2713"; margin-right: 8px; color: inherit; }
.lrc-topic input:focus-visible + span { outline: 3px solid var(--lrc-focus); outline-offset: 3px; }

.lrc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: calc(var(--lrc-fs) - 1px);
  line-height: 1.45;
  color: var(--lrc-ink);
  cursor: pointer;
}
.lrc-check input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--lrc-primary);
  cursor: pointer;
}

.lrc-form-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lrc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  min-width: 48px;
  padding: 8px 16px;
  margin: 0;
  font-size: calc(var(--lrc-fs) - 1px);
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lrc-btn:active { transform: scale(0.98); }
.lrc-btn--primary {
  color: var(--lrc-on-primary);
  background: var(--lrc-primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lrc-primary) 25%, transparent);
}
.lrc-btn--primary:hover { filter: brightness(1.1); }
.lrc-btn--ghost {
  color: var(--lrc-ink);
  background: transparent;
  border-color: var(--lrc-line-2);
}
.lrc-btn--ghost:hover { background: var(--lrc-hover); }
.lrc-btn[disabled] { opacity: 0.6; cursor: default; filter: none; }

.lrc-review { margin: 0 0 12px; display: grid; gap: 10px; }
.lrc-review div { display: grid; gap: 2px; }
.lrc-review dt {
  font-size: max(13px, calc(var(--lrc-fs) - 2px));
  font-weight: 500;
  color: var(--lrc-ink-3);
}
.lrc-review dd { margin: 0; font-size: var(--lrc-fs); color: var(--lrc-ink); white-space: pre-line; overflow-wrap: anywhere; }

/* Inline link-style button (Privacy Policy) */
.lrc-linkbtn {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--lrc-primary);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lrc-linkbtn:hover { text-decoration-thickness: 2px; }

/* ---------- Chips + input bar ---------- */
.lrc-inputbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px var(--lrc-pad) 0;
  padding: 4px;
  border-radius: 25px; /* half its one-line height: a pill that stays a soft rectangle when it grows */
  background: var(--lrc-card);
  border: 1px solid var(--lrc-control);
  box-shadow: 0 1px 2px rgba(14, 26, 28, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lrc-inputbar:focus-within {
  border-color: var(--lrc-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc-focus) 22%, transparent);
}
.lrc-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  max-height: 124px;
  padding: 9px 6px 9px 12px;
  margin: 0;
  font-size: var(--lrc-fs);
  line-height: 1.4;
  color: var(--lrc-ink);
  background: transparent;
  border: 0;
  resize: none;
  overflow-y: hidden;
}
.lrc-input::placeholder { color: var(--lrc-ink-3); opacity: 1; }
#lr-core .lrc-input:focus-visible { outline: none; }

.lrc-round {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.lrc-round:active { transform: scale(0.95); }
.lrc-mic { color: var(--lrc-ink-2); background: var(--lrc-bubble); }
.lrc-mic:hover { color: var(--lrc-ink); background: var(--lrc-hover); }
.lrc-mic[aria-pressed="true"] {
  color: var(--lrc-on-primary);
  background: var(--lrc-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lrc-primary) 25%, transparent);
  animation: lrc-pulse-ring 1.3s ease-out infinite;
}
.lrc-mic.lrc-unavailable { opacity: 0.6; }
.lrc-send {
  color: var(--lrc-on-primary);
  background: var(--lrc-primary);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lrc-primary) 30%, transparent);
}
.lrc-send:hover { filter: brightness(1.1); }
#lr-core .lrc-send .lrc-i-stop { display: none; }
.lrc-busy .lrc-send { background: var(--lrc-stop); color: var(--lrc-on-stop); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lrc-stop) 25%, transparent); }
#lr-core.lrc-busy .lrc-send .lrc-i-send { display: none; }
#lr-core.lrc-busy .lrc-send .lrc-i-stop { display: block; }

.lrc-foot {
  flex: none;
  margin: 0;
  padding: 8px var(--lrc-pad) 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--lrc-ink-2);
  text-align: center;
}
.lrc-foot .lrc-linkbtn { color: var(--lrc-ink-2); }

/* ==========================================================================
   Small screens: full-height bottom sheet
   ========================================================================== */
@media (max-width: 639.98px) {
  .lrc-panel {
    /* Full-height sheet. Fallback: pinned to all four edges. Where dvh is
       supported it is exactly the visible (dynamic) viewport height, so the
       input bar never hides behind the browser's toolbars. */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: 0;
    border-width: 0;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
    transform-origin: 50% 100%;
    transform: translateY(100%);
    opacity: 1;
  }
  @supports (height: 100dvh) {
    .lrc-panel { top: auto; height: 100dvh; }
  }
  .lrc-open .lrc-panel { transform: none; transition: transform 0.45s var(--lrc-ease), visibility 0s linear 0s; }
  .lrc-panel { transition: transform 0.32s var(--lrc-ease), visibility 0s linear 0.32s; }
  .lrc-head { padding: 10px 6px 8px var(--lrc-pad); }
  .lrc-log { padding: 14px var(--lrc-pad) 8px; }
  .lrc-inputbar { margin: 8px var(--lrc-pad) 0; }
  .lrc-foot { padding: 8px var(--lrc-pad) 10px; }
  .lrc-bubble { max-width: 92%; }
  #lr-core { --lrc-gap: calc(16px + env(safe-area-inset-right, 0px)); --lrc-pad: 12px; }
  /* the page behind the full-screen sheet does not scroll */
  html.lrc-sheet-open { overflow: hidden; }
  .lrc-head, .lrc-foot { touch-action: none; }
  .lrc-panel { overscroll-behavior: contain; }
}
/* 320-380px: keep the three 48px header buttons and fit the title beside them */
@media (max-width: 380px) {
  .lrc-head { gap: 8px; padding-left: 12px; }
  .lrc-head-btns { gap: 0; }
  .lrc-orb--sm { width: 28px; height: 28px; }
}

/* Short, wide viewports (phones in landscape, small laptop windows): use the
   full available height instead of a fixed 720px / 100vh - 120px panel. */
@media (min-width: 640px) and (max-height: 600px) {
  .lrc-panel {
    top: calc(12px + env(safe-area-inset-top, 0px));
    height: auto;
    /* A tall cookie banner must not squeeze the input bar out of view: past
       this minimum the panel (z 270) extends over the banner (z 250). */
    min-height: min(300px, calc(100vh - 24px));
    min-height: min(300px, calc(100dvh - 24px));
  }
  .lrc-foot { padding: 6px 16px 8px; }
}

/* Touch screens keep comfortable 44px targets */
@media (pointer: coarse) {
  .lrc-icon-btn, .lrc-round { width: 44px; height: 44px; }
  .lrc-sugg, .lrc-act, .lrc-btn, .lrc-topic span, .lrc-menu-item { min-height: 44px; }
  .lrc-input { min-height: 44px; }
  .lrc-field { min-height: 48px; }
  .lrc-inputbar { border-radius: 27px; }
  .lrc-foot { padding-top: 2px; padding-bottom: 4px; }
  .lrc-foot .lrc-linkbtn { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
}
/* iOS zooms the page when a field under 16px gets focus: phones and touch screens get 16px+ */
@media (max-width: 639.98px), (pointer: coarse) {
  .lrc-input, .lrc-field { font-size: max(16px, var(--lrc-fs)); }
}

/* Phones: the full-screen sheet is solid, not frosted (nothing useful shows through) */
@media (max-width: 639.98px) {
  .lrc-panel { background: var(--lrc-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   Arrival spotlight
   core.js adds these to the page element Rooty just took the visitor to,
   for about 1.6 s. They sit outside #lr-core, so they read the site's own
   tokens: --focus is deep teal in the light theme and light teal in the
   dark one. Only outline is used on cards (--ring) so their own radius,
   background and shadow are untouched; headings (--text) also get a soft
   tinted halo. --light is for light text on a photo or dark band.
   ========================================================================== */
.lrc-spotlight {
  --lrc-spot: var(--focus, #1F7F76);
  outline: 2px solid transparent;
  outline-offset: 8px;
  animation: lrc-spot-ring 1.6s var(--ease, cubic-bezier(0.2, 0.75, 0.2, 1)) both;
}
.lrc-spotlight--text {
  border-radius: var(--r-sm, 12px);
  animation-name: lrc-spot-halo;
}
.lrc-spotlight--light { --lrc-spot: #FFFFFF; }

@keyframes lrc-spot-ring {
  0% { outline-color: transparent; outline-offset: 16px; }
  22%, 70% { outline-color: var(--lrc-spot); outline-offset: 8px; }
  100% { outline-color: transparent; outline-offset: 8px; }
}
@keyframes lrc-spot-halo {
  0% { outline-color: transparent; outline-offset: 16px; background-color: transparent; box-shadow: 0 0 0 0 transparent; }
  22%, 70% {
    outline-color: var(--lrc-spot);
    outline-offset: 8px;
    background-color: color-mix(in srgb, var(--lrc-spot) 11%, transparent);
    box-shadow: 0 0 20px 8px color-mix(in srgb, var(--lrc-spot) 13%, transparent); /* one soft layer: no seam at the edge */
  }
  100% { outline-color: transparent; outline-offset: 8px; background-color: transparent; box-shadow: 0 0 20px 8px transparent; }
}

/* Reduced motion: the same highlight, shown still (core.js removes it). */
@media (prefers-reduced-motion: reduce) {
  .lrc-spotlight { animation: none; outline-color: var(--lrc-spot); }
  .lrc-spotlight--text {
    background-color: color-mix(in srgb, var(--lrc-spot) 11%, transparent);
    box-shadow: 0 0 20px 8px color-mix(in srgb, var(--lrc-spot) 13%, transparent);
  }
}
@media (forced-colors: active) {
  .lrc-spotlight, .lrc-spotlight--text { animation: none; outline-color: Highlight; background-color: transparent; box-shadow: none; }
}
@media print {
  .lrc-spotlight, .lrc-spotlight--text { animation: none; outline: 0; background-color: transparent; box-shadow: none; }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes lrc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lrc-spin { to { transform: rotate(360deg); } }
@keyframes lrc-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes lrc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes lrc-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes lrc-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(31, 127, 118, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(31, 127, 118, 0); }
}

/* ==========================================================================
   Preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #lr-core *,
  #lr-core *::before,
  #lr-core *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lrc-orb--lg::after { opacity: 0.8; transform: none; }
  .lrc-orb-fallback::before { transform: rotate(30deg); }
}

@media (prefers-contrast: more) {
  #lr-core {
    --lrc-line: color-mix(in srgb, var(--lrc-ink) 40%, transparent);
    --lrc-line-2: color-mix(in srgb, var(--lrc-ink) 65%, transparent);
    --lrc-ink-2: var(--lrc-ink);
    --lrc-ink-3: color-mix(in srgb, var(--lrc-ink) 85%, transparent);
  }
  .lrc-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lrc-glass-solid); }
  .lrc-glow { display: none; }
  .lrc-msg--user .lrc-bubble { border-color: var(--lrc-ink); }
  .lrc-act, .lrc-sugg, .lrc-field, .lrc-inputbar { border-color: var(--lrc-ink); }
}

@media (forced-colors: active) {
  .lrc-panel, .lrc-bubble, .lrc-card, .lrc-act, .lrc-sugg, .lrc-menu, .lrc-btn, .lrc-inputbar, .lrc-toast, .lrc-launcher-label {
    border: 1px solid CanvasText;
  }
  .lrc-orb { forced-color-adjust: none; }
  .lrc-menu-switch { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  .lrc-menu-switch::after { background: CanvasText; top: 1px; left: 1px; }
  .lrc-menu-item[aria-pressed="true"] .lrc-menu-switch { background: Highlight; border-color: Highlight; }
  .lrc-menu-item[aria-pressed="true"] .lrc-menu-switch::after { background: HighlightText; }
  .lrc-mic[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  #lr-core :focus-visible { outline-color: Highlight; }
}

@media print {
  #lr-core { display: none !important; }
}