@appsolutely-io/waypoint 0.0.0-stage → 0.1.1-next.1

package/dist/styles.css

@@ -0,0 +1,811 @@
+.waypoint {
+  /* Its padding and border count inside its width, so it is never wider
+     than its container (WCAG 1.4.10). */
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  container-type: inline-size;
+  color: var(--wp-foreground);
+  background: var(--wp-background);
+  font-family: var(--wp-font-family);
+  font-size: var(--wp-font-size);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius);
+  padding: var(--wp-space);
+  box-shadow: var(--wp-shadow);
+}
+.waypoint * {
+  box-sizing: border-box;
+}
+.waypoint .wp-shell {
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
+  gap: var(--wp-space);
+}
+/* The plan column only while a plan is shown. */
+.waypoint .wp-shell[data-has-aside] {
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr) minmax(0, 1fr);
+}
+/* No rail column without a conversation list (or a host's own rail). */
+.waypoint .wp-shell:not([data-has-rail]) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.waypoint .wp-shell:not([data-has-rail])[data-has-aside] {
+  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
+}
+.waypoint .wp-shell:not([data-has-rail]) > [data-part="rail"] {
+  display: none;
+}
+.waypoint main {
+  min-inline-size: 0;
+}
+/* In the conversation (narrow), the plan stands apart from what follows. */
+.waypoint main > [data-plan] {
+  margin-block-end: var(--wp-space);
+}
+.waypoint [data-part] {
+  color: var(--wp-foreground);
+  transition: color var(--wp-motion) var(--wp-easing);
+}
+/* A visible focus ring, 3:1 against what is around it (WCAG 1.4.11). */
+.waypoint :focus-visible {
+  outline: 2px solid var(--wp-focus-ring);
+  outline-offset: 2px;
+}
+/* Status by tone; the text always says it too. */
+.waypoint [data-reply-state="writing"] {
+  color: var(--wp-muted);
+}
+.waypoint [data-reply-state="overdue"],
+.waypoint [data-tone="warning"] {
+  color: var(--wp-warning);
+}
+.waypoint [data-reply-state="failed"],
+.waypoint [data-reply-state="unavailable"],
+.waypoint [data-reply-ended],
+.waypoint [data-tone="danger"] {
+  color: var(--wp-danger);
+}
+.waypoint [data-tone="success"] {
+  color: var(--wp-success);
+}
+.waypoint [data-body-unavailable] [data-part="bubble"] {
+  display: none;
+}
+/* A bubble's text and its blocks are spaced like Markdown blocks. */
+.waypoint [data-part="bubble"] > * + * {
+  margin-block-start: var(--wp-space);
+}
+.waypoint [data-part="bubble"] {
+  padding: var(--wp-space);
+  border-radius: var(--wp-radius);
+  background: var(--wp-surface);
+  margin-block-end: var(--wp-space);
+}
+/* Who wrote a message, first in its bubble and close to what it says. */
+.waypoint [data-sender] {
+  display: block;
+  color: var(--wp-muted);
+  font-size: var(--wp-font-size-sm);
+  font-weight: 600;
+}
+.waypoint [data-sender] + * {
+  margin-block-start: var(--wp-space1);
+}
+/* The user's messages sit at the inline end on an accent-tinted surface,
+   the assistant's at the start on the surface. The tint is 16% in dark,
+   where the surfaces are closer, so the two read as far apart as in light.
+   It is used only where its colours are checked: waypoint's tokens, and a
+   host antd theme whose colours the antd skin can read (it checks or
+   adjusts them there). Under a `theme` prop, whose colours are not
+   checked, or colours the skin cannot read (the skin sets the same two
+   properties), the bubble keeps the plain surface, where those colours
+   already hold, with an accent start edge. */
+/* Set on every chat, so an outer chat's or a host's values never leak in. */
+.waypoint {
+  --wp-user-tint: 12%;
+  --wp-user-edge: 0px;
+}
+.waypoint[data-color-scheme="dark"] {
+  --wp-user-tint: 16%;
+}
+.waypoint[data-custom-theme] {
+  --wp-user-tint: 0%;
+  --wp-user-edge: 3px;
+}
+.waypoint article:is([data-role="user"], [data-role="pending"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.waypoint
+  article:is([data-role="user"], [data-role="pending"])
+  > [data-part="bubble"] {
+  max-inline-size: 85%;
+  background: color-mix(
+    in srgb,
+    var(--wp-accent) var(--wp-user-tint),
+    var(--wp-surface)
+  );
+  border-inline-start: var(--wp-user-edge) solid var(--wp-accent);
+}
+.waypoint .wp-outline {
+  margin-block-end: var(--wp-space);
+}
+.waypoint .wp-outline ol {
+  list-style: none;
+  /* Apart from the toggle, with a visible edge whatever the platform's
+     scrollbars do. */
+  margin: var(--wp-space1) 0 0;
+  padding: var(--wp-space1);
+  max-block-size: 12rem;
+  overflow: auto;
+  border-block: 1px solid var(--wp-border);
+}
+/* The filter spans the outline, so a narrow chat keeps it whole. */
+.waypoint .wp-outline [data-outline-filter] {
+  margin-block-start: var(--wp-space1);
+}
+.waypoint .wp-outline [data-outline-filter] input {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: 24px;
+}
+.waypoint .wp-outline [data-outline-filter] [role="status"] {
+  margin: var(--wp-space1) 0 0;
+}
+.waypoint .wp-outline [data-outline-filter] [role="status"]:empty {
+  display: none;
+}
+/* Drawn inside the link, so the scroller never clips it; an outline, not a
+   shadow, so it stays under forced colors. */
+.waypoint .wp-outline a:focus-visible {
+  outline: 2px solid var(--wp-focus-ring);
+  outline-offset: -2px;
+}
+.waypoint .wp-outline a {
+  /* A target of at least 24 by 24 px with room between (WCAG 2.5.8). */
+  display: block;
+  min-block-size: 24px;
+  min-inline-size: 24px;
+  padding-block: 2px;
+  margin-block: 2px;
+}
+.waypoint .wp-transcript {
+  overflow: auto;
+  max-block-size: 32rem;
+  overflow-anchor: none;
+}
+.waypoint [data-back-to-latest] {
+  flex-shrink: 0;
+  margin-block-start: var(--wp-space);
+}
+.waypoint textarea {
+  inline-size: 100%;
+  min-block-size: 3rem;
+  resize: vertical;
+  color: inherit;
+  background: var(--wp-background);
+  /* An input's boundary must be seen (3:1); the decorative border is not. */
+  border: 1px solid var(--wp-control-border);
+  border-radius: var(--wp-radius);
+  padding-inline: var(--wp-space);
+}
+.waypoint input:not([type="checkbox"], [type="radio"]),
+.waypoint select {
+  border: 1px solid var(--wp-control-border);
+}
+/* Fields typed into (text, numbers, dates and any later such type) and
+   selects take the chat's colours, as the textarea does, not the user
+   agent's for the scheme; antd draws its own, and file, range and colour
+   inputs keep the platform's. */
+.waypoint
+  input:not(
+    [type="file"],
+    [type="range"],
+    [type="color"],
+    [type="hidden"],
+    [type="checkbox"],
+    [type="radio"],
+    .ant-input,
+    .ant-picker *
+  ),
+.waypoint select {
+  color: inherit;
+  background: var(--wp-background);
+}
+/* The selected tab is marked by a thick accent edge, a cue that is not
+   colour alone, drawn inside it so selecting a tab moves nothing. */
+.waypoint [role="tab"][aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 var(--wp-accent);
+}
+.waypoint button,
+.waypoint input {
+  font: inherit;
+}
+.waypoint button {
+  cursor: pointer;
+  margin-inline-end: var(--wp-space);
+}
+/* The space is between buttons: the last one in a group ends at the
+   group's edge, so a group aligned to the end lines up with what is above. */
+.waypoint button:last-child,
+.waypoint button:not(:has(~ button)) {
+  margin-inline-end: 0;
+}
+/* An empty status after a group's buttons (it says Copied, or Loading)
+   takes no place in the row, so the row ends at its last button; it stays
+   in the page, so what it says later is still announced. */
+.waypoint [role="group"] > [role="status"]:empty {
+  position: absolute;
+}
+/* Neutral buttons are drawn from the tokens, so an unavailable one can
+   look different from an available one. */
+.waypoint button:not(.ant-btn) {
+  color: var(--wp-foreground);
+  background: var(--wp-surface);
+  border: 1px solid var(--wp-control-border);
+  border-radius: var(--wp-radius);
+  padding: var(--wp-space1) var(--wp-space2);
+}
+.waypoint button:not(.ant-btn) {
+  transition: border-color var(--wp-motion-fast) var(--wp-easing);
+}
+.waypoint button:not(.ant-btn):hover:not(:disabled, [aria-disabled="true"]) {
+  border-color: var(--wp-accent);
+}
+/* An unavailable action: muted (still 4.5:1), no hover change, and still
+   focusable so its reason can be reached. */
+.waypoint button:not(.ant-btn):is(:disabled, [aria-disabled="true"]),
+.waypoint .ant-btn.ant-btn[aria-disabled="true"],
+.waypoint .ant-btn.ant-btn[aria-disabled="true"]:hover {
+  color: var(--wp-muted);
+  cursor: not-allowed;
+}
+/* The conversation list has no bullets, wherever it is shown. */
+.waypoint .wp-rail ul {
+  list-style: none;
+  margin: 0;
+  padding-inline-start: 0;
+}
+.waypoint .wp-rail li + li {
+  margin-block-start: var(--wp-space1);
+}
+.waypoint .wp-rail ul ul {
+  padding-inline-start: var(--wp-space);
+}
+.waypoint a {
+  color: var(--wp-accent);
+}
+.waypoint [role="alert"] {
+  color: var(--wp-danger);
+}
+/* A reply still streaming in says so under its text, with a dot that
+   pulses (still under reduced motion); the reply row says it once. */
+.waypoint [data-writing] {
+  display: block;
+  color: var(--wp-muted);
+  font-size: var(--wp-font-size-sm);
+}
+.waypoint [data-writing]::before {
+  content: "";
+  display: inline-block;
+  inline-size: 0.5em;
+  block-size: 0.5em;
+  margin-inline-end: var(--wp-space1);
+  border-radius: 50%;
+  background: var(--wp-accent);
+  animation: wp-writing calc(var(--wp-motion-slow) * 4) var(--wp-easing)
+    infinite alternate;
+}
+@keyframes wp-writing {
+  to {
+    opacity: 0.25;
+  }
+}
+/* A message still being sent, or not sent, says so under its bubble. */
+.waypoint [data-pending-status] {
+  margin-block: 0 var(--wp-space1);
+  color: var(--wp-muted);
+  font-size: var(--wp-font-size-sm);
+}
+.waypoint [data-pending-status="failed"] {
+  color: var(--wp-danger);
+}
+/* A message's problem, its action and its details sit at the message's
+   side, like "Not sent": an action that wraps stays there, and opening the
+   details moves nothing. */
+.waypoint article > [role="alert"] {
+  justify-content: flex-end;
+}
+.waypoint article > [data-problem-details] {
+  align-self: stretch;
+  text-align: end;
+}
+/* A field's validation when it is invalid: the danger tone, with the word
+   "Invalid" in front as the cue that is not colour. */
+.waypoint .wp-invalid {
+  color: var(--wp-danger);
+}
+/* A text field's label sits above it, at every width. */
+.waypoint label > input:not([type="checkbox"], [type="radio"]) {
+  display: block;
+}
+.waypoint .wp-attachments,
+.waypoint [role="tabpanel"] > ul {
+  padding-inline-start: 0;
+  list-style-type: none;
+}
+.waypoint .wp-attachments > li,
+.waypoint [role="tabpanel"] > ul > li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wp-space1);
+  margin-block-end: var(--wp-space1);
+}
+/* A fill's suggestion for an edited field reads as one aside: a small
+   label over its value, its validation under it, its answers in a row. */
+.waypoint [data-suggestion] {
+  display: grid;
+  gap: var(--wp-space1);
+  margin-block: var(--wp-space1);
+  padding-inline-start: var(--wp-space1);
+  border-inline-start: 3px solid var(--wp-accent);
+}
+.waypoint [data-suggestion] p {
+  margin: 0;
+}
+.waypoint [data-suggestion] > p:first-child {
+  color: var(--wp-muted);
+  font-size: var(--wp-font-size-sm);
+  font-weight: 600;
+}
+/* "Invalid" leads its first message on one line. */
+.waypoint .wp-invalid > strong {
+  margin-inline-end: var(--wp-space1);
+}
+.waypoint .wp-invalid > strong + p {
+  display: inline;
+}
+/* A row of answers or actions; a reason wraps under them. */
+.waypoint .wp-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wp-space1);
+}
+.waypoint .wp-actions > [data-reason] {
+  order: 1;
+  flex-basis: 100%;
+}
+/* A flow's parameters, one per line, with Run and its reason after them. */
+.waypoint .wp-flow-form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: var(--wp-space1);
+}
+/* An alert's action reads as its own control, not part of the sentence;
+   when it wraps, it lines up with the sentence's start. */
+.waypoint [role="alert"]:has(> button) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--wp-space1);
+}
+.waypoint [role="alert"] > button {
+  margin-inline: 0;
+}
+/* A plan step's facts (risk, undo, status): one row of separate items. */
+.waypoint .wp-step-facts {
+  list-style: none;
+  margin: var(--wp-space1) 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wp-space1) var(--wp-space);
+}
+/* Table columns stay apart at any font size. */
+.waypoint table th,
+.waypoint table td {
+  padding-inline: var(--wp-space1);
+}
+/* The toggle and the title share the top row; a long title wraps. */
+.waypoint [data-part="topBar"] {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space1);
+  margin-block-end: var(--wp-space2);
+}
+.waypoint [data-part="topBar"] h2 {
+  margin-block: 0;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+.waypoint [data-rail-toggle] [aria-expanded="true"] {
+  box-shadow: inset 0 -2px 0 var(--wp-accent);
+}
+/* A drawer is a sheet over the chat and the page: it never moves the
+   chat, is at most the viewport tall, and its content scrolls inside it. */
+.waypoint .wp-drawer {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 1000;
+  inline-size: min(24rem, 100%);
+  max-block-size: 100dvh;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wp-space1);
+  padding: var(--wp-space);
+  color: var(--wp-foreground);
+  background: var(--wp-surface);
+  border-inline-start: 1px solid var(--wp-border);
+  box-shadow: var(--wp-shadow);
+}
+/* The sheet can be as wide as the viewport: its own ring is drawn inside,
+   in either skin. */
+.waypoint .wp-drawer:focus-visible,
+.waypoint .ant-drawer-content:focus-visible,
+.waypoint :is(.wp-drawer, .ant-drawer-content) .wp-rail summary:focus-visible {
+  outline-offset: -2px;
+}
+.waypoint :is(.wp-drawer, .ant-drawer-content) .wp-rail summary {
+  margin-block: var(--wp-space1);
+  padding-inline: var(--wp-space1);
+}
+.waypoint .wp-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wp-space1);
+}
+.waypoint .wp-drawer-header h2 {
+  margin: 0;
+  font-size: var(--wp-font-size-lg);
+}
+.waypoint .wp-drawer-header button {
+  margin-inline-end: 0;
+}
+.waypoint .wp-drawer-body {
+  flex: 1;
+  min-block-size: 0;
+  overflow-y: auto;
+}
+/* antd's drawer renders in place; over the viewport like the neutral one,
+   so its height is the viewport's and its body scrolls. */
+.waypoint .ant-drawer-inline {
+  position: fixed;
+}
+.waypoint .wp-markdown {
+  overflow-wrap: anywhere;
+}
+/* Blocks are spaced by the token, not by the newlines between them; a soft
+   line break inside a paragraph or cell still breaks, and code keeps its
+   own whitespace. */
+.waypoint .wp-markdown :is(p, td, th) {
+  white-space: pre-wrap;
+}
+.waypoint .wp-markdown > * {
+  margin-block: 0;
+}
+.waypoint .wp-markdown > * + * {
+  margin-block-start: var(--wp-space);
+}
+/* Table cells keep their words whole: a table wider than the bubble
+   scrolls inside its own region instead. */
+.waypoint .wp-markdown :is(td, th) {
+  overflow-wrap: normal;
+}
+/* A task list shows its boxes, not bullets as well; the box is drawn from
+   the tokens so done and open read apart (the engine fades disabled
+   boxes), and an open box's edge keeps 3:1 against the bubble (WCAG
+   1.4.11), as the muted text colour does. */
+.waypoint .wp-markdown .task-list-item {
+  list-style: none;
+}
+.waypoint .wp-markdown .task-list-item input[type="checkbox"] {
+  appearance: none;
+  inline-size: 1em;
+  block-size: 1em;
+  margin: 0 var(--wp-space1) 0 0;
+  vertical-align: -0.125em;
+  border: 1px solid var(--wp-muted);
+  border-radius: 2px;
+  background: var(--wp-background);
+  opacity: 1;
+}
+.waypoint .wp-markdown .task-list-item input[type="checkbox"]:checked {
+  background: var(--wp-foreground);
+  box-shadow: inset 0 0 0 2px var(--wp-background);
+}
+/* Forced colours drop backgrounds and shadows: bubbles keep a border and
+   the open toggle and the current row a visible edge. After the rules it
+   overrides, so it wins at equal specificity. */
+@media (forced-colors: active) {
+  .waypoint [data-part="bubble"] {
+    border: 1px solid CanvasText;
+  }
+  .waypoint [data-rail-toggle] [aria-expanded="true"],
+  .waypoint [aria-current="page"] {
+    border-block-end: 2px solid Highlight;
+  }
+  /* The selected tab's inset edge is dropped with shadows: an outline,
+     which takes no space, marks it instead. */
+  .waypoint [role="tab"][aria-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  /* An unavailable action in the system's unavailable colour. */
+  .waypoint button:not(.ant-btn):is(:disabled, [aria-disabled="true"]),
+  .waypoint .ant-btn.ant-btn[aria-disabled="true"] {
+    color: GrayText;
+    border-color: GrayText;
+  }
+  /* The token fill that marks a done task box would become the canvas;
+     drawn in the system's colours, it stays. */
+  .waypoint .wp-markdown .task-list-item input[type="checkbox"] {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+  .waypoint .wp-markdown .task-list-item input[type="checkbox"]:checked {
+    background: CanvasText;
+  }
+}
+/* A block quote is set in by the token behind a start border, not by the
+   engine's wide margins, so what it quotes fits a narrow bubble. */
+.waypoint .wp-markdown blockquote {
+  margin-inline: 0;
+  padding-inline-start: var(--wp-space);
+  border-inline-start: 3px solid var(--wp-muted);
+}
+.waypoint .wp-markdown blockquote > * {
+  margin-block: 0;
+}
+.waypoint .wp-markdown blockquote > * + * {
+  margin-block-start: var(--wp-space);
+}
+/* An image never exceeds its bubble. */
+.waypoint .wp-markdown img {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+/* Code blocks and tables scroll inside themselves, never the transcript. */
+.waypoint [data-scroll-region] {
+  max-inline-size: 100%;
+  overflow-x: auto;
+}
+/* Every control is a target of at least 24 by 24 px (WCAG 2.5.8), and 44
+   by 44 on a coarse pointer; inline links in message text are exempt. */
+.waypoint button,
+.waypoint select,
+.waypoint summary,
+.waypoint nav a,
+.waypoint li > a,
+.waypoint .wp-check,
+.waypoint .ant-checkbox-wrapper,
+.waypoint .ant-btn,
+.waypoint .ant-input,
+.waypoint .ant-picker {
+  min-block-size: 24px;
+  min-inline-size: 24px;
+}
+.waypoint nav a,
+.waypoint li > a,
+.waypoint .wp-check,
+.waypoint .ant-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+/* A checkbox's label is its target; the box itself takes the accent. */
+.waypoint .wp-check {
+  gap: var(--wp-space1);
+}
+.waypoint input[type="checkbox"] {
+  accent-color: var(--wp-accent);
+}
+/* antd keeps button labels on one line at a fixed height; with enlarged
+   text that pushes the chat sideways, so labels wrap inside the chat. The
+   fixed height stays as the minimum: the skin passes antd's control height
+   (in px, unitless), the small and large sizes are 0.75 and 1.25 of it as
+   antd derives them, and a target is never under 24px (44px for a coarse
+   pointer, below). */
+.waypoint .ant-btn {
+  --wp-target: 24px;
+  max-inline-size: 100%;
+  block-size: auto;
+  min-block-size: max(var(--wp-target), var(--wp-btn, 0) * 1px);
+  white-space: normal;
+}
+.waypoint .ant-btn-sm {
+  min-block-size: max(var(--wp-target), var(--wp-btn, 0) * 0.75px);
+}
+.waypoint .ant-btn-lg {
+  min-block-size: max(var(--wp-target), var(--wp-btn, 0) * 1.25px);
+}
+@media (pointer: coarse) {
+  .waypoint button,
+  .waypoint select,
+  .waypoint summary,
+  .waypoint nav a,
+  .waypoint li > a,
+  .waypoint .wp-check,
+  .waypoint .ant-checkbox-wrapper,
+  .waypoint .ant-btn,
+  .waypoint input:not([type="checkbox"], [type="radio"], [type="hidden"]),
+  .waypoint .ant-input,
+  .waypoint .ant-picker {
+    min-block-size: 44px;
+    min-inline-size: 44px;
+  }
+  .waypoint .ant-btn {
+    --wp-target: 44px;
+  }
+  /* An inline citation is a few characters wide: its touch area grows to
+     44 by 44 around it, and the text it sits in does not move. */
+  .waypoint a[data-wp-cite] {
+    position: relative;
+  }
+  .waypoint a[data-wp-cite]::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: max(100%, 44px);
+    block-size: max(100%, 44px);
+    transform: translate(-50%, -50%);
+  }
+}
+.waypoint .wp-sr {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+@container (max-width: 40rem) {
+  .waypoint .wp-shell,
+  .waypoint .wp-shell[data-has-aside],
+  .waypoint .wp-shell:not([data-has-rail])[data-has-aside] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .waypoint [data-part="rail"] {
+    order: 2;
+  }
+}
+.waypoint[data-layout="panel"] {
+  position: relative;
+  inline-size: 100%;
+}
+/* The page layout fills the page: the transcript takes the height left,
+   and the composer sits at the bottom. Other layouts keep the transcript's
+   cap, since their host decides their height. */
+.waypoint[data-layout="page"] {
+  display: flex;
+  flex-direction: column;
+}
+.waypoint[data-layout="page"] > .wp-shell {
+  flex: 1;
+  min-block-size: 0;
+}
+/* Without a conversation list, the page's chat stays a readable width,
+   centred, instead of running lines across a wide screen. */
+.waypoint[data-layout="page"] > .wp-shell:not([data-has-rail]) {
+  inline-size: 100%;
+  max-inline-size: 60rem;
+  margin-inline: auto;
+}
+.waypoint[data-layout="page"] main,
+.waypoint[data-layout="page"] main > [data-part="transcript"],
+.waypoint[data-layout="page"] main > [data-part="transcript"] > div {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+}
+.waypoint[data-layout="page"] main > [data-part="transcript"],
+.waypoint[data-layout="page"] main > [data-part="transcript"] > div,
+.waypoint[data-layout="page"] .wp-transcript {
+  flex: 1;
+}
+.waypoint[data-layout="page"] .wp-transcript {
+  max-block-size: none;
+}
+.waypoint[data-layout="page"] {
+  inline-size: 100%;
+  min-block-size: 100dvh;
+  border: 0;
+  border-radius: 0;
+}
+.waypoint[data-layout="floating"] {
+  position: fixed;
+  inset-inline-end: var(--wp-space);
+  inset-block-end: var(--wp-space);
+  inline-size: min(32rem, calc(100% - 2 * var(--wp-space)));
+  max-block-size: calc(100dvh - 2 * var(--wp-space));
+  overflow: auto;
+}
+.waypoint[data-layout="sheet"] {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  inline-size: 100%;
+  max-block-size: 80dvh;
+  overflow: auto;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* The adornment takes its own column beside the field instead of lying
+   over it, so the field's end (where long text and the caret go) is never
+   covered; the field narrows only while the adornment is shown. */
+.wp-field-parent {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 0.25rem;
+  align-items: start;
+}
+.wp-field-parent > * {
+  grid-column: 1;
+}
+.wp-field-parent > .wp-field-adornment {
+  grid-column: 2;
+  grid-row: 1;
+}
+/* A suggestion spans the adornment's column too, so its answers fit on
+   one row at narrow widths. */
+.wp-field-parent > :has(> [data-suggestion]) {
+  grid-column: 1 / -1;
+}
+.wp-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* Under reduced motion a reply being written fades in rather than typing
+   out: a change of opacity only, nothing moves. */
+@keyframes wp-fade-in {
+  from {
+    opacity: 0.4;
+  }
+}
+/* A message's actions and the reply's controls sit in one wrapping row. */
+.waypoint [data-part="messageActions"] [role="group"],
+.waypoint [data-version-walk],
+.waypoint [data-reply-controls] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wp-space1);
+}
+/* What ends a message (its actions, a failed message's controls and its
+   problem's details) and the reply's controls end with the chat's spacing,
+   as a bubble does, so they never touch the next message or the row
+   below. */
+.waypoint [data-part="messageActions"] [role="group"],
+.waypoint [data-part="failedSendControls"]:not(:empty),
+.waypoint article > [data-problem-details],
+.waypoint [data-reply-controls] {
+  margin-block-end: var(--wp-space);
+}
+/* Previous points the way the reading goes back. */
+.waypoint[dir="rtl"] [data-version-walk] > button {
+  transform: scaleX(-1);
+}
+/* Reduced motion: nothing inside the chat animates, generated effects such
+   as a skin's click wave included; state still changes, at once. */
+@media (prefers-reduced-motion: reduce) {
+  .waypoint *,
+  .waypoint *::before,
+  .waypoint *::after {
+    transition-duration: 0s !important;
+    animation-duration: 0s !important;
+    animation-iteration-count: 1 !important;
+  }
+  .waypoint .wp-markdown[data-fade] {
+    animation: wp-fade-in 240ms ease-out !important;
+  }
+}