:root {
  --bg: #ffffff;
  --fg: #26272b;
  --muted: #656872;
  --line: #dddde0;
  --danger: #a3271f;
  --radius: 10px;

  /* The marketsite palette, for the page around the widget - neutral-900,
     neutral-800 and neutral-200 above, primary here. Copied as literals on
     purpose: this UI is a cross-origin iframe, so none of the theme's tokens
     or @font-face rules reach it. Source: theme.json presets. Fonts are the
     other half of matching the theme and are still outstanding. */
  --accent: #bee034;
  --accent-fg: #26272b;
  --accent-dark: #abca2f;
  --accent-tint: #f2f9da;
  --widget-h: 560px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* The widget keeps the Lime Connect palette in both colour schemes: it is a
     picture of the product, not a themed part of this page. Its lime is the
     *product* green and deliberately not --accent above, which is the
     marketsite's: the two differ, and the widget has to look like the app it
     is a picture of rather than like the page it sits on. */
  --lime: #8dc63f;
  --lime-dark: #7cb336;
  --widget-bg: #ffffff;
  --widget-fg: #1d2129;
  --widget-line: #e6e9ed;
  --bubble-agent: #d9dee6;
  --bubble-visitor: #eaf3d9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181f;
    --fg: #eef1f4;
    --muted: #9aa5b1;
    --line: #2b323c;
    --danger: #f0857c;
    /* The light tint would be a near-white flash here; the accent at low
       alpha reads as the same gesture against a dark pill. */
    --accent-tint: rgba(190, 224, 52, 0.14);
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute is the switch the whole UI is built on, and a `display`
   rule outranks the UA stylesheet's [hidden] - so state it here and mean it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}

/* ----------------------------------------------------------------- steps --
   The three-step flow, above both columns. It is a progress indicator, not a
   control: the step the visitor is on is the one the right column shows. */

.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  list-style: none;
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 20px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The connector between two steps. Drawn on the item rather than as a
   separate element so the list stays three items long. */
.steps li + li::before {
  content: "";
  width: 36px;
  height: 1px;
  margin-right: 4px;
  background: var(--line);
}

.step-no {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.steps li.on { color: var(--fg); font-weight: 600; }
.steps li.on .step-no {
  color: var(--accent-fg);
  background: var(--accent);
}

/* Layout: the widget on the left, the flow on the right, from the first
   paint. Stacked below 860px, where the URL form leads until the agent is
   ready - see .ready below. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  max-width: 1060px;
  margin: 0 auto;
  /* The steps above hold the gap to whatever the page puts there; this one
     is the seam between the steps and the flow they describe. */
  padding: 30px 20px 0;
}

/* Field and button read as one control: the pill is the row, and the button
   sits inside it. */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}

input[type="text"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: none;
  border-radius: 999px;
}

/* The pill takes the focus ring for the field inside it, so focus shows as
   one ring rather than a ring around a ring. */
.row:focus-within { border-color: var(--accent-dark); box-shadow: 0 0 0 1px var(--accent-dark); }
.row input[type="text"]:focus-visible { outline: none; }

button:focus-visible,
a.cta:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

/* Everything else that takes text: one ring, drawn over its own border. */
input[type="text"]:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: -1px;
}

/* The marketsite's button: a pill with a 2px border of its own colour, dark
   ink on the lime rather than white - #bee034 is far too light to carry white
   text. Padding is 11/17 against the 2px border so the box matches the 12/14
   plus 1px of the input it sits beside. */
button,
a.cta {
  padding: 11px 17px;
  font: inherit;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

#url-submit,
.cta.primary {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

#url-submit:hover:not(:disabled),
.cta.primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* The theme's secondary: white pill, accent border, tinted on hover. Labels
   stay ink - the accent as text on white is 1.6:1. */
.cta.secondary {
  color: var(--fg);
  background: var(--bg);
  border-color: var(--accent);
}

.cta.secondary:hover {
  background: var(--accent-tint);
}

button:disabled { opacity: 0.5; cursor: default; }

.note,
.label {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.label {
  max-width: 1060px;
  margin: 20px auto 0;
  padding: 12px 20px 16px;
  text-align: center;
  border-top: 1px solid var(--line);
}

/* Smaller than the note it replaced under the field: it is a condition of
   use, not something the visitor has to read to get started. */
.note.consent { font-size: 0.76rem; }

.error { color: var(--danger); font-size: 0.9rem; margin: 10px 0 0; }
.error.big { font-size: 1rem; margin-bottom: 16px; }

.turnstile:empty { display: none; }
.turnstile { margin-top: 12px; }

/* crawl */
.panel-title { margin: 0 0 12px; font-size: 1.35rem; line-height: 1.25; }

.crawl { padding: 8px 0 4px; }
.crawl-found { margin: 0; font-size: 1.35rem; line-height: 1.25; min-height: 1.25em; }
.crawl-progress { margin: 4px 0 14px; font-size: 0.85rem; color: var(--muted); min-height: 1.5em; }
.crawl-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }

.crawl-pages { list-style: none; margin: 14px 0 0; padding: 0; }

.crawl-pages li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.crawl-pages li:last-child { border-bottom: 1px solid var(--line); }

.crawl-no { flex: none; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.crawl-body { min-width: 0; }
.crawl-title { display: block; font-size: 0.9rem; }

.crawl-path {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }

/* ---------------------------------------------------------------- widget --
   A copy of the Lime Connect chat widget: green header with the assistant's
   identity, scrolling body, pill composer. Fixed height so it reads as a
   widget rather than as a page section that grows with the conversation. */

.widget {
  display: flex;
  flex-direction: column;
  height: var(--widget-h);
  color: var(--widget-fg);
  background: var(--widget-bg);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(20, 24, 31, 0.08), 0 12px 32px rgba(20, 24, 31, 0.14);
  overflow: hidden;
}

.widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #ffffff;
  background: var(--lime);
}

.widget-id { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.widget-id strong {
  font-size: 1.05rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-id span { font-size: 0.8rem; opacity: 0.95; }

.head-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: block; width: 22px; height: 22px; opacity: 0.95; }
.icon-btn svg { width: 100%; height: 100%; display: block; }

.orb {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: radial-gradient(circle at 32% 28%, #8fd3ff 0%, #4a63f0 48%, #7b3ff2 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}
.orb svg { width: 22px; height: 22px; display: block; }
.orb.small { width: 30px; height: 30px; border-width: 1.5px; }
.orb.small svg { width: 17px; height: 17px; }

.widget-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  overflow-y: auto;
}

.messages { display: flex; flex-direction: column; gap: 12px; }

.msg { display: flex; flex-direction: column; align-items: flex-start; }
.msg.visitor { align-items: flex-end; }
/* Avatar sits at the bubble's baseline, the timestamp below it - as in the
   widget, where the time hangs under the message and not beside the avatar. */
.msg-line { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.msg.agent .msg-time { margin-left: 38px; }

.bubble {
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  border-radius: 6px;
}
.msg.agent .bubble { background: var(--bubble-agent); }
.msg.visitor .bubble { background: var(--bubble-visitor); }

.msg-time { margin: 4px 2px 0; font-size: 0.72rem; color: #8b939d; }

/* Three-dot "typing" bubble, shown until the first token arrives. */
.bubble.typing { display: flex; gap: 4px; padding: 14px; }
.bubble.typing i {
  width: 6px;
  height: 6px;
  background: #6f7883;
  border-radius: 50%;
  animation: blink 1.2s infinite ease-in-out;
}
.bubble.typing i:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing i:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble.typing i { animation: none; opacity: 0.5; }
}

/* The example questions live in the widget, pinned under the conversation. */
.starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.starters:empty { padding-top: 0; }

.chip {
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--widget-fg);
  background: var(--widget-bg);
  border: 1px solid var(--lime);
  border-radius: 999px;
  text-align: left;
}
.chip:hover { background: #f4f9ea; }

.widget-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  background: var(--widget-bg);
  border-top: 1px solid var(--widget-line);
}

.plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #4b535d;
  background: #f0f2f4;
  border-radius: 50%;
}
.plus svg { width: 20px; height: 20px; }

#chat-input {
  flex: 1 1 auto;
  padding: 11px 16px;
  font-size: 0.95rem;
  color: var(--widget-fg);
  background: var(--widget-bg);
  border: 1px solid #d5dae0;
  border-radius: 999px;
}
#chat-input::placeholder { color: #9aa2ac; }

#chat-submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #ffffff;
  background: var(--lime);
  border: none;
  border-radius: 50%;
}
#chat-submit svg { width: 22px; height: 22px; }
#chat-submit:hover:not(:disabled) { background: var(--lime-dark); }

/* --------------------------------------------------------------- sources -- */

.sources { padding-top: 4px; }
.sources h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 1.05rem;
}

/* The note about what we read and how long we keep it, folded into the
   heading it belongs to. Hover or focus opens it; it is a button rather than
   a span so the keyboard reaches it. */
.info {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
}
.info:hover { color: var(--fg); }
.info svg { width: 16px; height: 16px; }

.tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: 18rem;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.info:hover .tip,
.info:focus .tip { opacity: 1; visibility: visible; }
.sources-meta { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.sources-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }

.sources-list { list-style: none; margin: 14px 0 0; padding: 0; }

.sources-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.sources-list li:last-child { border-bottom: 1px solid var(--line); }

/* Dot filled = the page the last answer cited. */
.sources-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 50%;
}
.sources-list li.used::before { background: var(--accent); border-color: var(--accent); }

.source-body { min-width: 0; }
.source-title { font-size: 0.9rem; }
.source-title a { color: inherit; text-decoration: none; }
.source-title a:hover { text-decoration: underline; }
.sources-list li.used .source-title { font-weight: 600; }

.source-path {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.used-badge {
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- banner --
   Fills the column beside the widget and centres on both axes, so the two
   read as one composition rather than a page with a notice stuck to it. */

.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--widget-h);
  padding: 32px 28px 24px;
  text-align: center;
  background: rgba(127, 140, 155, 0.1);
  border-radius: 14px;
}

.banner-body { max-width: 30rem; margin: auto 0; }

.banner h3 {
  margin: 0 0 14px;
  font-size: 1.5rem;
  line-height: 1.3;
  /* The headline is two sentences on two lines - the break is part of it. */
  white-space: pre-line;
}
.banner p { margin: 0 0 20px; font-size: 0.95rem; color: var(--muted); }
.banner .ctas { justify-content: center; }

.banner .banner-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--fg);
  background: var(--bg);
  border-radius: var(--radius);
}

.banner .banner-foot { margin: 24px 0 0; }

.banner-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 50%;
}
.banner-close:hover { background: rgba(127, 140, 155, 0.18); }
.banner-close svg { width: 18px; height: 18px; }

/* "Try another URL" is the quiet way out of a failure, next to two CTAs. */
.linky {
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  text-decoration: underline;
}
.linky:hover { color: var(--fg); }

.ctas { display: flex; flex-wrap: wrap; gap: 8px; }

/* The banner's single CTA points onward, so it carries an arrow. */
.cta.primary { display: inline-flex; align-items: center; gap: 8px; }
.cta.primary svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  :root { --widget-h: 520px; }

  /* Wrapped onto three lines the connectors point at nothing, so the steps
     become a plain list. */
  .steps { gap: 8px 14px; }
  .steps li + li::before { display: none; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* Stacked, the two columns need a seam: a hairline and room on both sides
     of it, or the widget's green header butts straight into the form. The
     line goes on whichever column ends up second - see .ready. */
  body:not(.ready) .lane,
  body.ready .side {
    margin-top: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  /* Stacked, the banner only needs to hold its own content. */
  .banner { min-height: 0; padding: 28px 20px 20px; }
  /* Until the agent answers, the form is the point of the page. */
  body:not(.ready) .side { order: -1; }
}

@media (max-width: 480px) {
  /* Too narrow for the field and the button side by side, so the pill comes
     apart into the two controls it is made of. */
  .row {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: none;
    border: none;
  }
  .row:focus-within { box-shadow: none; }
  /* flex-basis follows the main axis, so the 240px basis above would become
     the field's *height* once the row stacks. */
  .row input[type="text"] {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
  }
  .ctas .cta { flex: 1 1 100%; text-align: center; justify-content: center; }
  .msg-stack { max-width: 85%; }
}