/* 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-.

   The chat is one panel of limited size, so the text and the message box stay close together:
   - Desktop: a panel about 500 px wide. Its height follows the conversation, up to min(720px, 88vh); then
     only the conversation 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 conversation, up to the
     visible height minus a small gap at the top; then only the conversation scrolls. It follows the visual
     viewport (signup_chat_controller.js sets --sc-height and --sc-top), so the message box stays above
     the keyboard.

   Inside the panel: the agent's words are plain text, like a letter, with no avatar or name (the header
   names Brainpage). The first line of the opening is a short bold heading. The visitor's words sit in pale
   lilac bubbles on the right. Three things carry weight: the first quick reply of the opening (filled),
   the agent cards (white blocks with the toolkit's raised edge) and the ultramarine sign-in buttons.
   Coral marks only research in progress and keyboard focus. */

/* 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(720px, 88vh)) is centered. */
:root { --sc-panel-top: calc((100vh - min(720px, 88vh)) / 2); }
@supports (height: 100dvh) { :root { --sc-panel-top: calc((100dvh - min(720px, 88dvh)) / 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-top: var(--sc-panel-top); }
/* Dark and slightly blurred, so the page text behind the panel does not compete with it. */
.sc-dialog::backdrop { background: rgb(16 14 46 / .68); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sc-dialog__body { display: contents; }

.sc-app {
  --sc-muted: #575166;
  --sc-soft: #f3f1fd;
  --sc-soft-edge: #e4e0f7;
  --sc-blue-side: #211d99;
  --sc-on-blue: #e8e6ff;
  --sc-text-size: 17px;
  --sc-text-leading: 1.5;
  position: relative;
  width: min(500px, 100%);
  /* The height follows the conversation, up to this limit. Then .sc-scroll scrolls. */
  max-height: min(720px, 88vh);
  max-height: min(720px, 88dvh);
  display: flex;
  flex-direction: column;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #dcd8ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 0 #211d9914, 0 40px 80px -36px #0b085e80;
  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; }
.sc-app p, .sc-app h1, .sc-app h2, .sc-app ul { margin: 0; }
.sc-app :focus-visible { outline: 3px solid var(--tk-coral); outline-offset: 3px; }
/* Light, not decoration: a pale lilac glow at the top of the panel, fading to white. */
.sc-app::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(420px, 60%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, #ebe7fc 0%, #f5f3fe 46%, rgb(255 255 255 / 0) 100%);
}
.sc-col { width: calc(100% - 40px); margin-inline: auto; }
.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 panel's top bar: who is writing (Brainpage, an AI agent), a quiet way out to the sign-in page,
   and in the pop-up the close control. */
.sc-bar { flex: none; border-bottom: 1px solid #ebe8f4; background: rgb(255 255 255 / .72); }
.sc-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
/* The name, with "AI agent" under it. */
.sc-ident { display: grid; grid-template-columns: 30px auto; grid-template-areas: "tile name" "tile role"; column-gap: 10px; align-items: center; min-width: 0; }
.sc-ident .sc-avatar { grid-area: tile; }
.sc-ident__name { grid-area: name; font-size: 17px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.sc-wordmark { color: inherit; text-decoration: none; }
.sc-ident__role { grid-area: role; color: var(--sc-muted); font-size: 12px; font-weight: 650; line-height: 1.25; 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: 6px; 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; margin-right: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--tk-ink); cursor: pointer; }
.sc-close svg { width: 22px; height: 22px; }

/* The conversation. Only this area scrolls. */
.sc-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* Text fades out under the top bar instead of a hard cut. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
.sc-log { display: flex; flex-direction: column; gap: 22px; padding: 22px 0 24px; }

/* The agent's message: plain text with no avatar or name (the header names Brainpage). */
.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; box-shadow: 0 2px 0 var(--sc-blue-side); }
.sc-avatar--bar { width: 30px; height: 30px; font-size: 16px; border-radius: 7px; }
.sc-msg__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sc-text { font-size: var(--sc-text-size); line-height: var(--sc-text-leading); white-space: pre-line; overflow-wrap: break-word; text-wrap: pretty; }
.sc-text a { color: var(--tk-blue); }
/* The opening: 3 short paragraphs. The first one is a short heading. */
.sc-opening { display: grid; gap: 10px; }
.sc-text--lead { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }

/* The visitor's message. */
.sc-msg--visitor { display: flex; justify-content: flex-end; }
.sc-bubble { max-width: 86%; padding: 10px 16px; border: 1px solid var(--sc-soft-edge); border-radius: 16px 16px 5px 16px; background: var(--sc-soft); font-size: 16px; font-weight: 500; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Typing dots: exactly 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: calc(var(--sc-text-size) * var(--sc-text-leading)); }
.sc-typing__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-blue); opacity: .3; }

/* Research progress. Finished steps get a check; the running step has a coral dot.
   When the agent's text continues, only the last line stays. */
.sc-status__lines { list-style: none; padding: 0; display: grid; gap: 6px; }
.sc-status__line { display: flex; align-items: center; gap: 10px; color: var(--sc-muted); font-size: 14px; line-height: 1.4; }
.sc-status__mark { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--tk-lilac); color: var(--tk-blue); }
.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: transparent; }
.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(:last-child) { display: none; }

/* Quick replies. */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { min-height: 44px; padding: 9px 16px; border: 1.5px solid var(--tk-blue); border-radius: 8px; background: #fff; color: var(--tk-blue); font: inherit; font-size: 15px; font-weight: 700; 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 main choice of the opening ("Suggest agents for me"): filled. */
.sc-chip--primary { background: var(--tk-blue); color: #fff; box-shadow: 0 2px 0 var(--sc-blue-side); }

/* Agent cards: white blocks with the toolkit's raised ultramarine edge. The chosen card turns blue. */
.sc-agents { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 2px; }
.sc-agent { display: grid; gap: 8px; width: 100%; padding: 16px 18px 14px; border: 1px solid var(--tk-rule); border-radius: 6px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #211d9926, 0 18px 30px -24px #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: #3b3850; font-size: 15px; line-height: 1.45; }
.sc-agent__facts { display: grid; gap: 5px; 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: 4px; 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: none; }
.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); }

/* Sign-in: the same Register buttons as /get-started, on a pale lilac panel. */
.sc-signin { display: grid; gap: 12px; margin-top: 4px; padding: 18px 16px; border-radius: 8px; background: var(--sc-soft); }
.sc-signin__reason { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.sc-providers { display: grid; gap: 10px; }
.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: 6px; background: var(--tk-blue); color: #fff; text-decoration: none; box-shadow: 0 3px 0 var(--sc-blue-side), 0 18px 30px -22px #2a24a8; 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: 4px; background: #fff; }
.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-on-blue); font-size: 14px; line-height: 1.35; }
.sc-provider__arrow { display: grid; place-items: center; }
.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 #16136b; }
.sc-signin__access { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; 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: var(--tk-blue); }
.sc-signin__free { display: flex; align-items: center; gap: 10px; margin-top: 2px; 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-muted); font-size: 14px; line-height: 1.5; }
.sc-signin__note a { display: inline-block; color: var(--tk-blue); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.sc-signin__terms { color: var(--sc-muted); 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; padding: 12px 14px 12px 16px; border: 1px solid #f4c9bb; border-radius: 8px; 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: 6px; background: var(--tk-ink); color: #fff; font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
.sc-error__retry[hidden] { display: none; }

/* The message box, at the bottom of the panel. The conversation fades out just above it. */
.sc-dock { flex: none; position: relative; padding: 6px 0 16px; background: #fff; }
.sc-dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0), #fff); }
.sc-composer { display: grid; gap: 6px; }
.sc-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 8px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--tk-rule); border-radius: 12px; background: #fff; box-shadow: 0 2px 0 #191a230a, 0 22px 40px -30px #2a24a8; transition: border-color 140ms ease-out, box-shadow 140ms ease-out; }
.sc-field:focus-within { border-color: var(--tk-blue); box-shadow: 0 0 0 3px var(--tk-lilac), 0 22px 40px -30px #2a24a8; }
/* 16px at least, so iOS Safari does not zoom the page when the text box gets focus. */
.sc-input { display: block; width: 100%; min-height: 44px; max-height: 144px; padding: 11px 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-input:disabled { background: transparent; }
.sc-app .sc-input:focus-visible { outline: none; }
.sc-send { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--tk-blue); color: #fff; cursor: pointer; transition: background-color 140ms ease-out; }
.sc-send .tk-icon { width: 22px; height: 22px; }
.sc-send:disabled, .sc-app--loading .sc-send { background: #c9c6dc; 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-minibar__button .sc-avatar { flex: 0 0 auto; width: 30px; height: 30px; background: #fff; color: var(--tk-blue); box-shadow: none; 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-chip:not(.sc-chip--primary):hover { background: var(--sc-soft); }
  .sc-chip--primary:hover { border-color: var(--tk-blue-hover); background: var(--tk-blue-hover); }
  .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); }
  .sc-provider:hover { background: var(--tk-blue-hover); box-shadow: 0 3px 0 #16136b, 0 22px 34px -20px #2a24a8; transform: translateY(-1px); }
  .sc-provider:hover .sc-provider__arrow .tk-icon { transform: translateX(3px); }
  .sc-signin__note a:hover { color: var(--tk-blue-hover); }
  .sc-error__retry:hover { background: #2e2f3d; }
  .sc-send:not(:disabled):hover { background: var(--tk-blue-hover); }
  .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-log > .sc-msg:last-child { animation: sc-arrive 240ms ease-out both; }
  .sc-dialog[open] .sc-app { animation: sc-rise 200ms 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-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 the message box. 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 conversation, 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 { 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: 0; border-radius: 16px 16px 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
     conversation does not grow to fill the panel, so the message box sits directly under the last message.
     When the chat is longer than the panel, the conversation 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-text--lead { font-size: 20px; }
  .sc-dialog[open] .sc-app { animation: none; }
  .sc-col { width: calc(100% - 32px); max-width: 640px; }
  .sc-bar__inner { min-height: 58px; }
  .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; }
}