/* The signup chat with Brainpage, an AI agent: the full page /start and the pop-up on the home pages.
   Only those pages link this file (ApplicationHelper#site_stylesheet_paths leaves out pages/). It uses the
   colour tokens on .bp-page (toolkit.css): ink, ultramarine blue, coral, lilac. Every rule starts with sc-.
   Design briefs: docs/plans/signup-chat-v4-marketing-brief.md and docs/plans/signup-chat-v5-hero-brief.md
   (21 October 2026).

   The panel is an agent builder, not a support chat. It has two states:
   1. The hero (no visitor message yet), in one column: the headline, one line that says why the visitor enters
      the company, the field for the company website or name with one strong button, one quiet line of job
      buttons, and the trial line. The message box at the bottom is hidden.
   2. The conversation (.has-conversation): the hero shrinks to its short headline. Under it, one left-aligned
      column, like a page that fills in: the visitor's words as a small quiet tag, the research as a progress card,
      the agent's short text, the 3 agent cards under a heading (one under the other), and the sign-in as a strong
      ultramarine block, like the close of the home page. A quiet "Ask anything" box stays at the bottom.

   Sizes:
   - Desktop: a panel up to 640 px wide, in both states. Its height follows the content, up to min(760px, 90vh);
     then only the content scrolls. The top of the panel stays at a fixed place (where a panel of full height would
     be centered), so the panel grows downward and does not move while a reply streams. In the pop-up it sits on a
     dark, slightly blurred page; on /start it sits on a pale lilac page.
   - Phone (640 px wide or less, or 500 px high or less, for a phone held sideways): the panel is a sheet at the
     bottom of the screen with round top corners. Its height follows the content, up to the visible height minus a
     small gap at the top; then only the content scrolls. It follows the visual viewport (signup_chat_controller.js
     sets --sc-height and --sc-top), so a field stays above the keyboard. The hero's headline, line, field and
     button show without a scroll at 360 x 740.

   Colour: ultramarine carries the actions (the hero's button, the agent cards' edge, the sign-in block) and the end
   of the headline. Coral marks only research in progress and keyboard focus. Lilac washes make the stages. */

/* The full page and the open pop-up lock the page behind them. */
html:has(.sc-app--page), html:has(.sc-app--page) body, html.sc-locked, html.sc-locked body { overflow: hidden; overscroll-behavior: none; }
/* The bar at the bottom of a home page must not cover the end of the page. */
html.sc-has-bar body { padding-bottom: 84px; }

/* The top of the panel on a desktop: where a panel of full height (min(760px, 90vh)) is centered. */
:root { --sc-panel-top: calc((100vh - min(760px, 90vh)) / 2); }
@supports (height: 100dvh) { :root { --sc-panel-top: calc((100dvh - min(760px, 90dvh)) / 2); } }

/* The full page /start: a pale lilac field with the panel at the fixed top. On a phone the panel fills the screen. */
.sc-page { position: fixed; inset: 0; z-index: 1; display: grid; justify-items: center; align-items: start; padding: max(24px, var(--sc-panel-top)) 24px 24px; background: radial-gradient(80% 70% at 50% 0%, #ebe7fc 0%, #f5f3fe 55%, #fbfaff 100%); }

/* The pop-up: a <dialog> in the top layer that covers the screen. The panel is its child, so a click on
   the dimmed area around the panel targets the dialog itself (signup_popup_controller.js#backdrop). */
.sc-dialog { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; overscroll-behavior: contain; }
.sc-dialog[open] { display: grid; justify-items: center; align-items: start; padding: var(--sc-panel-top) 24px 0; }
/* Dark and slightly blurred, so the page text behind the panel does not compete with it. */
.sc-dialog::backdrop { background: rgb(16 14 46 / .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sc-dialog__body { display: contents; }

.sc-app {
  --sc-muted: #575166;
  --sc-body: #3b3850;
  --sc-soft: #f3f1fd;
  --sc-soft-edge: #e4e0f7;
  --sc-blue-side: #211d99;
  --sc-on-blue: #e8e6ff;
  --sc-gutter: 44px;
  --sc-column: 552px;
  position: relative;
  width: min(640px, 100%);
  /* The height follows the content, up to this limit. Then .sc-scroll scrolls. */
  max-height: min(760px, 90vh);
  max-height: min(760px, 90dvh);
  display: flex;
  flex-direction: column;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  /* Light, not decoration: a lilac wash from the top left corner, behind the headline, fading to white. */
  background: radial-gradient(75% 60% at 0% 0%, #efebfd 0%, rgb(247 245 254 / .7) 45%, rgb(255 255 255 / 0) 75%), #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 50px 100px -40px #0b085e99, 0 0 0 1px #2a24a81f;
  color: var(--tk-ink);
  font-family: "Archivo", sans-serif;
  text-align: left;
}
.sc-app:focus { outline: none; }
.sc-app *, .sc-app *::before, .sc-app *::after { box-sizing: border-box; }
:where(.sc-app) :where(p, h1, h2, h3, ul, figure) { margin: 0; }
.sc-app :focus-visible { outline: 3px solid var(--tk-coral); outline-offset: 3px; }
:where(.sc-app) button { font: inherit; }
.sc-nobreak { white-space: nowrap; }
.sc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The top edge: the wordmark, the quiet way out to the sign-in page, and in the pop-up the close control. */
.sc-bar { flex: none; position: relative; z-index: 1; }
.sc-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px calc(var(--sc-gutter) - 12px) 0 var(--sc-gutter); }
/* The name, and next to it the quiet label "AI agent": the visitor talks to an AI, and the panel says so. */
.sc-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sc-brand { color: var(--tk-ink); font-size: 21px; font-weight: 900; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.sc-who__role { padding-left: 10px; border-left: 1px solid #d9d5e8; color: var(--sc-muted); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.sc-bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
/* A quiet way out: small and muted, with a thin underline. It keeps a 44 px tap target and the focus ring.
   The link may break into 2 lines in a long language, so the close control always fits. */
.sc-skip { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--sc-muted); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: right; text-decoration: underline; text-decoration-color: #bdb8d4; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.sc-close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tk-ink); cursor: pointer; }
.sc-close svg { width: 22px; height: 22px; }

/* The content. Only this area scrolls. Text fades out under the top edge instead of a hard cut. */
.sc-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.sc-canvas { padding: 14px var(--sc-gutter) 40px; }

/* ---------- 1. The hero ---------- */

/* One column with a clear order: the headline, the line, the field, then two quiet lines. */
.sc-hero { display: block; }
/* Two parts, each on its own line(s): what the visitor does (ink), then what it gives them (ultramarine). */
.sc-hero__title { font-size: 40px; font-weight: 900; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.sc-hero__accent { display: block; color: var(--tk-blue); }
/* The short headline shows only after the first message (see the conversation below). */
.sc-hero__short { display: none; }
.sc-hero__more { margin-top: 18px; }
.sc-hero__lede { max-width: 30em; color: var(--sc-body); font-size: 18px; line-height: 1.45; text-wrap: pretty; }

/* The website field: one raised white bar with the field and the ultramarine button. The company field under
   a reply (.sc-entry--inline) is the same, a little smaller. */
.sc-entry { margin-top: 24px; }
.sc-entry__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 750; line-height: 1.3; }
.sc-entry__row { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1.5px solid var(--tk-rule); border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #191a230a, 0 26px 44px -32px #2a24a8; transition: border-color 140ms ease-out, box-shadow 140ms ease-out; }
.sc-entry__row:focus-within { border-color: var(--tk-blue); box-shadow: 0 0 0 4px var(--tk-lilac), 0 26px 44px -32px #2a24a8; }
/* 16px at least, so iOS Safari does not zoom the page when the field gets focus. */
.sc-entry__input { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--tk-ink); font: inherit; font-size: 18px; font-weight: 500; }
.sc-entry__input::placeholder { color: #6f6a80; font-weight: 400; }
.sc-app .sc-entry__input:focus-visible { outline: none; }
.sc-entry__input[aria-invalid="true"]::placeholder { color: #a3341a; }
.sc-entry__button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 22px; border: 0; border-radius: 9px; background: var(--tk-blue); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 var(--sc-blue-side); transition: background-color 140ms ease-out, transform 140ms ease-out; }
.sc-entry__button .tk-icon { width: 20px; height: 20px; transition: transform 160ms ease-out; }
.sc-entry__button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sc-blue-side); }
.sc-entry__error { margin-top: 8px; color: #a3341a; font-size: 14px; font-weight: 650; line-height: 1.4; }
.sc-entry__error[hidden] { display: none; }
.sc-entry__skip { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 2px; border: 0; background: none; color: var(--sc-muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: #bdb8d4; text-underline-offset: .25em; cursor: pointer; }

/* The job buttons, for a visitor with no website: one quiet line of small text buttons after a label. */
.sc-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.sc-jobs__label { margin-right: 2px; color: var(--sc-muted); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sc-job { min-height: 34px; padding: 6px 12px; border: 1px solid #dcd8ef; border-radius: 999px; background: #fff; color: var(--tk-ink); font-size: 14px; font-weight: 650; line-height: 1.2; letter-spacing: -.005em; text-align: left; cursor: pointer; transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out; }
.sc-job:active { transform: translateY(1px); }

/* The trial line: quiet, with a small check. */
.sc-trial { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--sc-body); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: -.005em; }
.sc-trial .tk-icon { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--tk-lilac); color: var(--tk-blue); }

/* The first frame of the pop-up: the hero with its controls off, drawn as the real one. */
.sc-app--loading .sc-entry__button, .sc-app--loading .sc-job { cursor: default; }

/* ---------- 2. The conversation ---------- */

/* The panel has no minimum height: its height follows the content, as in the hero. Its top stays at
   --sc-panel-top, so a short reply gives a short panel that grows downward, with no empty white area. */

/* The hero shrinks to its short headline ("Create an agent in 1 minute."), on one line. */
.has-conversation .sc-hero__more, .has-conversation .sc-hero__full { display: none; }
.has-conversation .sc-hero__short { display: inline; }
.has-conversation .sc-hero__title { font-size: 26px; line-height: 1.1; letter-spacing: -.035em; }
.has-conversation .sc-canvas { padding-bottom: 28px; }

.sc-log { display: flex; flex-direction: column; gap: 20px; }
.has-conversation .sc-log { margin-top: 22px; }
.sc-log:empty { display: none; }
.sc-msg__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.sc-msg__body > * { max-width: var(--sc-column); }
.sc-msg__body > .sc-build { max-width: none; width: 100%; }
.sc-text { font-size: 18px; line-height: 1.5; white-space: pre-line; overflow-wrap: break-word; text-wrap: pretty; }
.sc-text a { color: var(--tk-blue); }

/* The visitor's words: a small quiet tag, like the input of a form. */
.sc-msg--visitor { display: flex; }
.sc-said { max-width: min(var(--sc-column), 100%); padding: 6px 14px; border-radius: 999px; background: #f1f0f6; color: var(--sc-body); font-size: 15px; font-weight: 600; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Typing dots: one line of text high, so the first words take their place without a jump. */
.sc-typing { display: flex; align-items: center; gap: 6px; height: 27px; }
.sc-typing__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-blue); opacity: .3; }

/* Research progress: a card of steps. A finished step has a check; the running step a coral dot.
   When the agent's text continues, the first and the last step stay ("Reading acme.com", "Found Acme"). */
.sc-status { padding: 12px 16px; border: 1px solid #e9e6f8; border-radius: 14px; background: linear-gradient(180deg, #f7f5fe 0%, #f3f1fd 100%); }
.sc-status__lines { display: grid; gap: 8px; padding: 0; list-style: none; }
.sc-status__line { display: flex; align-items: center; gap: 10px; color: var(--sc-body); font-size: 15px; font-weight: 600; line-height: 1.35; }
.sc-status__mark { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tk-blue); color: #fff; }
.sc-status__mark .tk-icon { width: 13px; height: 13px; }
.sc-status__line.is-active { color: var(--tk-ink); }
.sc-status__line.is-active .sc-status__mark { background: #fff; box-shadow: inset 0 0 0 1.5px #f6c3b4; }
.sc-status__line.is-active .tk-icon { visibility: hidden; }
.sc-status__line.is-active .sc-status__mark::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--tk-coral); }
.sc-status.is-done .sc-status__line:not(:first-child):not(:last-child) { display: none; }

/* Quick replies: outlined pills. */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { min-height: 44px; padding: 9px 18px; border: 1.5px solid var(--tk-blue); border-radius: 999px; background: #fff; color: var(--tk-blue); font-size: 15px; font-weight: 750; line-height: 1.2; letter-spacing: -.005em; text-align: left; cursor: pointer; transition: background-color 140ms ease-out, transform 140ms ease-out; }
.sc-chip:active { transform: translateY(1px); }

/* The company field under a reply. */
.sc-entry--inline { width: 100%; margin-top: 0; }
.sc-entry--inline .sc-entry__input { height: 50px; font-size: 17px; }
.sc-entry--inline .sc-entry__button { height: 50px; font-size: 16px; }

/* The agents: a heading, then 3 cards (one row on a wide screen). White cards with the toolkit's raised
   ultramarine edge, on a lilac stage. The chosen card turns blue. */
.sc-build { margin-top: 4px; padding: 20px; border-radius: 18px; background: radial-gradient(80% 90% at 100% 0%, #e7e2fd 0%, rgb(240 237 253 / .6) 45%, rgb(248 247 254 / 0) 85%), #f7f6fe; box-shadow: inset 0 0 0 1px #e9e6f8; }
.sc-build__title { margin-bottom: 14px; font-size: 24px; font-weight: 900; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.sc-agents { display: grid; gap: 12px; padding: 0; list-style: none; }
.sc-agents__item { display: flex; min-width: 0; }
.sc-agent { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 18px 18px 14px; border: 1px solid #e1ddf3; border-radius: 14px; background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #211d9926, 0 22px 36px -28px #0b085e; transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.sc-agent__name { display: block; font-size: 19px; font-weight: 850; line-height: 1.15; letter-spacing: -.025em; }
.sc-agent__does { display: block; color: var(--sc-body); font-size: 15px; line-height: 1.45; }
.sc-agent__facts { display: grid; gap: 6px; margin-top: 2px; padding-top: 10px; border-top: 1px solid #ebe8f4; }
.sc-agent__fact { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.4; }
.sc-agent__label { color: var(--sc-muted); }
.sc-agent__value { font-weight: 600; }
.sc-agent__pick { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--tk-blue); font-size: 15px; font-weight: 750; }
.sc-agent__pick .tk-icon { width: 18px; height: 18px; transition: transform 160ms ease-out; }
.sc-agent:disabled { cursor: default; box-shadow: 0 2px 0 #211d9914; }
.sc-agent:disabled .sc-agent__pick { display: none; }
.sc-agent.is-chosen { border-color: var(--tk-blue); background: var(--tk-blue); color: #fff; box-shadow: 0 3px 0 var(--sc-blue-side), 0 22px 34px -22px #2a24a8; }
.sc-agent.is-chosen .sc-agent__does, .sc-agent.is-chosen .sc-agent__label { color: var(--sc-on-blue); }
.sc-agent.is-chosen .sc-agent__facts { border-top-color: rgb(255 255 255 / .22); }
/* While the research runs: "Designing agents for <company>" over 3 placeholder cards, the same shape as the agent
   cards. Grey bars on white, with a soft light that moves across them (no motion with reduced motion). */
.sc-draft__line { margin-bottom: 14px; color: var(--sc-muted); font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.sc-ghost { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 18px 18px 20px; border: 1px solid #e9e6f8; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #211d9912; }
.sc-ghost__bar { --sc-ghost: #efedf9; display: block; width: 92%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--sc-ghost) 0%, var(--sc-ghost) 40%, #fbfaff 50%, var(--sc-ghost) 60%, var(--sc-ghost) 100%) 0 0 / 300% 100%; }
.sc-ghost__bar--name { --sc-ghost: #e4e0f6; width: 62%; height: 15px; margin-bottom: 3px; }
.sc-ghost__bar--short { width: 54%; }
.sc-ghost__rule { display: block; height: 1px; margin: 3px 0 2px; background: #efedf6; }
.sc-ghost__bar--label { width: 30%; height: 8px; }
.sc-ghost__bar--value { width: 74%; }
/* In the 640 px panel the cards stand one under the other, and each card puts its 3 facts in one row, each label
   over its value. So a card stays short. */
@media (min-width: 641px) and (min-height: 501px) {
  .sc-agent__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .sc-agent__fact { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1px; }
  .sc-agent__label { font-size: 13px; }
}

/* Sign-in: the strong last step, on ultramarine like the close of the home page. The agent's reason is the
   heading. The Register buttons are white. */
.sc-signin { position: relative; display: grid; gap: 14px; width: 100%; padding: 26px 24px 22px; border-radius: 18px; overflow: hidden; color: #fff;
  background: radial-gradient(90% 80% at 100% 0%, #4d4ad9 0%, rgb(61 58 202 / .6) 40%, rgb(52 49 189 / 0) 75%), linear-gradient(160deg, #3834c4 0%, #2c29a6 100%);
  box-shadow: 0 3px 0 var(--sc-blue-side), 0 30px 50px -30px #1a1680; }
.sc-signin__reason { font-size: 26px; font-weight: 900; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.sc-providers { display: grid; gap: 10px; margin-top: 2px; }
.sc-provider { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px 10px 10px; border-radius: 10px; background: #fff; color: var(--tk-ink); text-decoration: none; box-shadow: 0 3px 0 #1b1880, 0 18px 30px -22px #0b085e; transition: background-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out; }
.sc-provider__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--sc-soft); }
.sc-provider__mark svg { display: block; width: 22px; height: 22px; }
.sc-provider__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-provider__label { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.sc-provider__sub { color: var(--sc-muted); font-size: 14px; line-height: 1.35; }
.sc-provider__arrow { display: grid; place-items: center; color: var(--tk-blue); }
.sc-provider__arrow .tk-icon { width: 20px; height: 20px; transition: transform 160ms ease-out; }
.sc-provider:active { transform: translateY(2px); box-shadow: 0 1px 0 #1b1880; }
.sc-signin :focus-visible { outline-color: #fff; }
.sc-signin__access { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--sc-on-blue); font-size: 14px; line-height: 1.45; }
.sc-signin__access li { position: relative; padding-left: 16px; }
.sc-signin__access li::before { content: ""; position: absolute; top: calc(.725em - 3px); left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sc-signin__free { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.sc-signin__free .tk-icon { flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; color: var(--tk-blue); }
.sc-signin__note { color: var(--sc-on-blue); font-size: 14px; line-height: 1.5; }
.sc-signin__note a { display: inline-block; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.sc-signin__terms { color: #d4d1fb; font-size: 12px; line-height: 1.5; }
.sc-signin__terms a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* A failed reply. */
.sc-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: 100%; padding: 12px 14px 12px 16px; border: 1px solid #f4c9bb; border-radius: 12px; background: #fff6f3; }
.sc-error[hidden] { display: none; }
.sc-error__text { flex: 1 1 200px; font-size: 15px; line-height: 1.45; }
.sc-error__retry { min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--tk-ink); color: #fff; font-size: 15px; font-weight: 750; cursor: pointer; }
.sc-error__retry[hidden] { display: none; }

/* The quiet "Ask anything" box at the bottom. Hidden while the hero shows: its field comes first. */
.sc-dock { flex: none; position: relative; padding: 8px var(--sc-gutter) 18px; background: #fff; }
.sc-app:not(.has-conversation) .sc-dock { display: none; }
.sc-dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0), #fff); }
.sc-composer { display: grid; gap: 6px; max-width: var(--sc-column); }
.sc-field { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: end; gap: 8px; padding: 4px 4px 4px 16px; border: 1px solid #e2dfec; border-radius: 12px; background: #faf9fd; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease-out; }
.sc-field:focus-within { border-color: var(--tk-blue); background: #fff; box-shadow: 0 0 0 3px var(--tk-lilac); }
.sc-input { display: block; width: 100%; min-height: 40px; max-height: 144px; padding: 9px 0; border: 0; background: transparent; color: var(--tk-ink); font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.sc-input::placeholder { color: #6f6a80; }
.sc-app .sc-input:focus-visible { outline: none; }
.sc-send { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 9px; background: var(--tk-lilac); color: var(--tk-blue); cursor: pointer; transition: background-color 140ms ease-out, color 140ms ease-out; }
.sc-send .tk-icon { width: 20px; height: 20px; }
.sc-send:disabled { background: #ebe9f3; color: #8d88a3; cursor: default; }
/* The keyboard hint is for screen readers only (aria-describedby on the text box). The "characters left"
   warning near the limit shows on screen (is-shown, signup_chat_controller.js). */
.sc-hint { padding-left: 4px; color: var(--sc-muted); font-size: 12px; line-height: 1.4; }
.sc-hint:not(.is-shown) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The bar at the bottom of a home page after the visitor closes the pop-up. A click opens the same chat.
   It sits at the left, so it never covers the chat launcher at the bottom right. */
.sc-minibar { position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; font-family: "Archivo", sans-serif; }
.sc-minibar[hidden] { display: none; }
.sc-minibar__button { display: flex; align-items: center; gap: 12px; min-height: 56px; max-width: min(420px, calc(100vw - 112px)); padding: 10px 16px 10px 12px; border: 1px solid #211d99; border-radius: 12px; background: var(--tk-blue); color: #fff; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #211d99, 0 22px 40px -18px #0b085eb3; transition: background-color 140ms ease-out, transform 140ms ease-out; }
.sc-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--tk-blue); color: #fff; font-size: 14px; font-weight: 900; line-height: 1; }
.sc-minibar__button .sc-avatar { flex: 0 0 auto; width: 30px; height: 30px; background: #fff; color: var(--tk-blue); font-size: 16px; }
.sc-minibar__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-minibar__icon { flex: 0 0 auto; width: 20px; height: 20px; }
.sc-minibar__button:focus-visible { outline: 3px solid var(--tk-coral); outline-offset: 3px; }
.sc-minibar__button:active { transform: translateY(2px); box-shadow: 0 1px 0 #211d99; }

/* Hover only where a pointer can hover. On a touch screen the hover style would stay on after a tap. */
@media (hover: hover) {
  .sc-skip:hover { color: var(--tk-blue); text-decoration-color: currentColor; }
  .sc-close:hover { background: var(--sc-soft); }
  .sc-entry__button:not(:disabled):hover { background: var(--tk-blue-hover); }
  .sc-entry__button:not(:disabled):hover .tk-icon { transform: translateX(3px); }
  .sc-entry__skip:hover { color: var(--tk-blue); text-decoration-color: currentColor; }
  /* A job button or an agent card under a pointer that has not moved since it appeared (for example the click on
     the page's button that opened the panel) looks like the others: .is-pointer-still
     (signup_chat_controller.js#holdHover). */
  .sc-job:not(:disabled):hover { border-color: var(--tk-blue); color: var(--tk-blue); }
  .is-pointer-still .sc-job:not(:disabled):hover { border-color: #dcd8ef; color: var(--tk-ink); }
  .sc-chip:hover { background: var(--sc-soft); }
  .sc-agent:not(:disabled):hover { border-color: var(--tk-blue); box-shadow: 0 3px 0 var(--tk-blue), 0 22px 34px -22px #2a24a8; transform: translateY(-1px); }
  .sc-agent:not(:disabled):hover .sc-agent__pick .tk-icon { transform: translateX(3px); }
  .is-pointer-still .sc-agent:not(:disabled):hover { border-color: #e1ddf3; box-shadow: 0 3px 0 #211d9926, 0 22px 36px -28px #0b085e; transform: none; }
  .is-pointer-still .sc-agent:not(:disabled):hover .sc-agent__pick .tk-icon { transform: none; }
  .sc-provider:hover { background: #f6f5ff; box-shadow: 0 3px 0 #16136b, 0 22px 34px -20px #0b085e; transform: translateY(-1px); }
  .sc-provider:hover .sc-provider__arrow .tk-icon { transform: translateX(3px); }
  .sc-signin__note a:hover { color: var(--tk-lilac); }
  .sc-error__retry:hover { background: #2e2f3d; }
  .sc-send:not(:disabled):hover { background: var(--tk-blue); color: #fff; }
  .sc-minibar__button:hover { background: var(--tk-blue-hover); }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-typing__dot { animation: sc-wait 1.2s ease-in-out infinite; }
  .sc-typing__dot:nth-child(2) { animation-delay: .16s; }
  .sc-typing__dot:nth-child(3) { animation-delay: .32s; }
  .sc-status__line.is-active .sc-status__mark::after { animation: sc-pulse 1.1s ease-in-out infinite; }
  .sc-ghost__bar { animation: sc-shimmer 1.8s ease-in-out infinite; }
  .sc-agents__item:nth-child(2) .sc-ghost__bar { animation-delay: .15s; }
  .sc-agents__item:nth-child(3) .sc-ghost__bar { animation-delay: .3s; }
  .sc-log > .sc-msg:last-child { animation: sc-arrive 260ms ease-out both; }
  .sc-build, .sc-signin { animation: sc-rise 320ms ease-out both; }
  .sc-dialog[open] .sc-app { animation: sc-rise 220ms ease-out both; }
  .sc-dialog[open]::backdrop { animation: sc-arrive 200ms ease-out both; }
  .sc-minibar:not([hidden]) { animation: sc-rise 200ms ease-out both; }
}
@keyframes sc-wait { 0%, 70%, 100% { opacity: .25; transform: none; } 35% { opacity: .9; transform: translateY(-3px); } }
@keyframes sc-pulse { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes sc-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sc-app *, .sc-app *::before, .sc-app *::after, .sc-minibar * { transition: none !important; animation: none !important; }
  .sc-typing__dot { opacity: .5; }
}

/* Phone, upright or sideways: the panel becomes a sheet at the bottom of the visible area. A sideways phone
   is wide but short (844 x 390).
   - The bottom edge of the sheet is the bottom edge of the visual viewport (--sc-top + --sc-height), so the
     keyboard never covers a field. The sheet is fixed to the layout viewport, so `bottom` is the layout
     viewport height minus that edge. Without the script, the sheet sits at the bottom of the screen.
   - The height follows the content, up to the visible height minus --sc-sheet-gap. The dimmed page
     shows in that gap. A tap on the gap minimizes the chat, as a tap on the dimmed area does on a desktop.
   - /start is not a sheet: see .sc-app--page below. */
@media (max-width: 640px), (max-height: 500px) {
  :root { --sc-sheet-gap: 40px; }
  .sc-page { padding: 0; }
  .sc-app { --sc-gutter: 20px; position: fixed; left: 0; right: 0; top: auto; bottom: calc(100% - var(--sc-top, 0px) - var(--sc-height, 100%)); width: 100%; height: auto; max-height: calc(var(--sc-height, 100dvh) - var(--sc-sheet-gap)); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px -24px #0b085e66; }
  /* /start is a full page, not a pop-up: the panel fills the visible area from its top edge. The
     content does not grow to fill the panel, so the message box sits directly under the last message.
     When the content is longer than the panel, it scrolls and the message box stays at the bottom. */
  .sc-app--page { top: var(--sc-top, 0px); bottom: auto; height: var(--sc-height, 100dvh); max-height: none; border-radius: 0; box-shadow: none; }
  .sc-app--page .sc-scroll { flex: 0 1 auto; }
  .sc-dialog[open] .sc-app { animation: none; }
  .sc-bar__inner { min-height: 56px; padding-top: 4px; }
  .sc-brand { font-size: 19px; }
  .sc-canvas { padding: 6px var(--sc-gutter) 26px; }

  .sc-hero__title { font-size: clamp(30px, 8.6vw, 36px); }
  .sc-hero__more { margin-top: 12px; }
  .sc-hero__lede { font-size: 16px; line-height: 1.42; }
  .sc-entry { margin-top: 18px; }
  /* The field and the button stack, each the full width. */
  .sc-entry__row { display: grid; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sc-entry__row:focus-within { box-shadow: none; }
  .sc-entry__input { height: 54px; padding: 0 16px; border: 1.5px solid var(--tk-rule); border-radius: 12px; background: #fff; font-size: 17px; }
  .sc-entry__input:focus { border-color: var(--tk-blue); box-shadow: 0 0 0 3px var(--tk-lilac); }
  .sc-entry__button { width: 100%; height: 54px; }
  .sc-entry--inline .sc-entry__input, .sc-entry--inline .sc-entry__button { height: 50px; }
  .sc-jobs { margin-top: 16px; }
  .sc-jobs__label { font-size: 13px; }
  .sc-job { min-height: 34px; padding: 5px 11px; font-size: 13.5px; }
  .sc-trial { margin-top: 18px; font-size: 13px; }
  .sc-draft__line { margin-bottom: 12px; font-size: 16px; }
  /* On a phone the placeholder cards are short, so the research lines above them stay in view. */
  .sc-ghost { gap: 8px; padding: 14px 16px; }
  .sc-ghost__rule, .sc-ghost__bar--short, .sc-ghost__bar--label, .sc-ghost__bar--value { display: none; }

  .has-conversation .sc-hero__title { font-size: 22px; }
  .has-conversation .sc-log { margin-top: 18px; }
  .sc-text { font-size: 17px; }
  .sc-build { padding: 16px; margin-inline: -4px; width: calc(100% + 8px) !important; }
  .sc-build__title { font-size: 21px; margin-bottom: 12px; }
  .sc-signin { padding: 22px 18px 20px; }
  .sc-signin__reason { font-size: 22px; }
  .sc-dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sc-minibar { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .sc-minibar__button { max-width: calc(100vw - 96px); min-height: 52px; gap: 10px; padding: 10px 14px 10px 10px; font-size: 15px; }
  .sc-minibar__icon { display: none; }
}
@media (max-height: 500px) { :root { --sc-sheet-gap: 24px; } }
@media (max-width: 380px) {
  .sc-agent__fact { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-provider__label { font-size: 16px; }
  .sc-provider__sub { font-size: 13px; }
  .sc-job { padding-inline: 10px; font-size: 13px; }
}