@webless/agent 0.6.2 → 0.6.4

package/dist/embed.css

@@ -264,6 +264,49 @@ html.webless-agent-page-shift {
   }
 }
 
+/* src/react/styles/primitives.css */
+.webless-agent-root {
+  --as-card: var(--as-surface);
+  --as-card-border: var(--as-border);
+  --as-card-radius: var(--as-radius-lg);
+  --as-primary: var(--as-brand);
+  --as-primary-foreground: #fff;
+  --as-muted: var(--as-text-muted);
+  --as-accent: var(--as-brand-soft);
+}
+.webless-agent-root .as-card {
+  padding: 14px 16px;
+  border: 1px solid var(--as-card-border);
+  border-radius: var(--as-card-radius);
+  background: var(--as-card);
+}
+.webless-agent-root .as-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--as-accent);
+  color: var(--as-primary);
+  font-size: 11px;
+  font-weight: 650;
+}
+.webless-agent-root .as-button {
+  appearance: none;
+  min-height: 36px;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--as-primary);
+  color: var(--as-primary-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 650;
+}
+.webless-agent-root .as-button:focus-visible {
+  outline: 2px solid var(--as-primary);
+  outline-offset: 2px;
+}
+
 /* src/react/styles/all.css */
 
 /* src/react/components/AgentActivityBubble/AgentActivityBubble.css */
@@ -274,7 +317,7 @@ html.webless-agent-page-shift {
   flex-direction: column;
   align-self: flex-start;
   align-items: stretch;
-  gap: 7px;
+  gap: 8px;
 }
 .agent-activity-bubble__status {
   display: flex;
@@ -289,13 +332,13 @@ html.webless-agent-page-shift {
 .agent-activity-bubble__pulse {
   position: relative;
   display: grid;
-  width: 15px;
-  height: 15px;
-  flex: 0 0 15px;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
   place-items: center;
   border-radius: 999px;
-  background: var(--as-success);
-  color: #fff;
+  background: var(--as-brand);
+  color: var(--as-surface);
 }
 .agent-activity-bubble__pulse::after {
   content: "\2713";
@@ -304,16 +347,13 @@ html.webless-agent-page-shift {
   line-height: 1;
 }
 .agent-activity-bubble__pulse.is-active {
-  background: var(--as-brand);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 11%, transparent);
-  animation: agent-activity-pulse 1.8s ease-in-out infinite;
+  border: 2px solid color-mix(in srgb, var(--as-brand) 26%, transparent);
+  border-top-color: var(--as-brand);
+  background: transparent;
+  animation: agent-activity-spin 0.9s linear infinite;
 }
 .agent-activity-bubble__pulse.is-active::after {
   content: "";
-  width: 5px;
-  height: 5px;
-  border-radius: inherit;
-  background: currentColor;
 }
 .agent-activity-bubble__pulse.is-error {
   background: var(--as-danger);
@@ -322,136 +362,122 @@ html.webless-agent-page-shift {
   content: "!";
 }
 .agent-activity-bubble__details {
-  border: 0;
-  background: transparent;
+  overflow: hidden;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
 }
 .agent-activity-bubble__summary {
   appearance: none;
   display: flex;
   width: 100%;
-  min-height: 34px;
+  min-height: 38px;
   align-items: center;
-  gap: 9px;
+  justify-content: space-between;
+  gap: 10px;
   margin: 0;
-  padding: 0 2px;
+  padding: 7px 12px;
   border: 0;
-  border-radius: 8px;
   background: transparent;
-  color: var(--as-text-muted);
+  color: var(--as-text);
   cursor: pointer;
   font-family: inherit;
-  font-size: 12px;
-  font-weight: 650;
+  font-size: 12.5px;
   text-align: left;
 }
-.agent-activity-bubble__summary::before {
-  width: 6px;
-  height: 6px;
-  flex: 0 0 6px;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  color: var(--as-text-subtle);
-  content: "";
-  transform: rotate(45deg) translate(-1px, -1px);
-  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+.agent-activity-bubble__summary-title {
+  font-weight: 700;
 }
-.agent-activity-bubble__summary:hover {
-  color: var(--as-text);
+.agent-activity-bubble__summary-toggle {
+  flex: 0 0 auto;
+  color: var(--as-text-muted);
+  font-size: 12px;
+  font-weight: 600;
 }
-.agent-activity-bubble__summary:focus-visible {
-  outline: none;
-  color: var(--as-text);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--as-text) 46%, transparent);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 4px;
+.agent-activity-bubble__summary:hover .agent-activity-bubble__summary-toggle {
+  color: var(--as-brand);
 }
-.agent-activity-bubble__summary[aria-expanded=true]::before {
-  transform: rotate(225deg) translate(-1px, -1px);
+.agent-activity-bubble__summary:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: -2px;
 }
 .agent-activity-bubble__steps {
   display: grid;
   gap: 0;
   margin: 0;
-  padding: 3px 0 2px 24px;
+  padding: 6px 12px 12px;
+  border-top: 1px solid var(--as-border);
   list-style: none;
 }
 .agent-activity-bubble__step {
   position: relative;
   display: grid;
-  min-height: 50px;
-  grid-template-columns: 26px minmax(0, 1fr);
+  min-height: 42px;
+  grid-template-columns: 18px minmax(0, 1fr);
   align-items: flex-start;
   gap: 10px;
-  padding: 5px 0;
+  padding: 8px 0 4px;
 }
 .agent-activity-bubble__step:not(:last-child)::after {
   position: absolute;
-  top: 30px;
-  bottom: -6px;
-  left: 12px;
-  width: 1px;
-  background: color-mix(in srgb, var(--as-text) 11%, transparent);
+  top: 29px;
+  bottom: -9px;
+  left: 8px;
+  width: 2px;
+  background: color-mix(in srgb, var(--as-text) 10%, transparent);
   content: "";
 }
+.agent-activity-bubble__step--child {
+  margin-left: 9px;
+}
 .agent-activity-bubble__step-icon {
   position: relative;
   z-index: 1;
-  display: inline-flex;
-  width: 25px;
-  height: 25px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border: 0;
-  border-radius: 8px;
-  background: var(--as-surface-muted);
-  color: var(--as-text-muted);
-  font-size: 10px;
-  font-weight: 750;
-}
-.agent-activity-bubble__step-icon svg {
-  width: 15px;
-  height: 15px;
-}
-.agent-activity-bubble__step-icon img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border: 2px solid color-mix(in srgb, var(--as-text) 18%, transparent);
+  border-radius: 999px;
   background: var(--as-surface);
-  object-fit: contain;
+  color: var(--as-surface);
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1;
 }
-.agent-activity-bubble__step[data-kind=specialist] .agent-activity-bubble__step-icon {
-  background: var(--as-brand-soft);
-  color: var(--as-brand);
+.agent-activity-bubble__step[data-state=completed] .agent-activity-bubble__step-icon {
+  border-color: var(--as-brand);
+  background: var(--as-brand);
+}
+.agent-activity-bubble__step[data-state=completed] .agent-activity-bubble__step-icon::after {
+  content: "\2713";
 }
 .agent-activity-bubble__step[data-state=active] .agent-activity-bubble__step-icon {
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 8%, transparent);
+  border-color: color-mix(in srgb, var(--as-brand) 26%, transparent);
+  border-top-color: var(--as-brand);
+  background: transparent;
+  animation: agent-activity-spin 0.9s linear infinite;
 }
 .agent-activity-bubble__step[data-state=error] .agent-activity-bubble__step-icon {
-  background: color-mix(in srgb, var(--as-danger) 7%, var(--as-surface));
-  color: var(--as-danger);
+  border-color: var(--as-danger);
+  background: var(--as-surface);
 }
 .agent-activity-bubble__step-copy {
   display: grid;
   min-width: 0;
   gap: 2px;
-  padding-top: 2px;
 }
 .agent-activity-bubble__step-heading {
   display: flex;
   min-width: 0;
   align-items: baseline;
   gap: 8px;
-  flex-wrap: wrap;
 }
 .agent-activity-bubble__step-heading strong {
   overflow: hidden;
   color: var(--as-text);
-  font-size: 12px;
-  font-weight: 680;
+  font-size: 12.5px;
+  font-weight: 700;
   line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -461,18 +487,52 @@ html.webless-agent-page-shift {
   font-size: 11.5px;
   line-height: 1.4;
 }
-@keyframes agent-activity-pulse {
-  50% {
-    opacity: 0.55;
+.agent-activity-bubble__delegation {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+.agent-activity-bubble__step-retry {
+  appearance: none;
+  justify-self: start;
+  margin: 2px 0 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--as-brand);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11.5px;
+  font-weight: 650;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.agent-activity-bubble__step-retry:hover {
+  color: var(--as-text);
+}
+.agent-activity-bubble__step-retry:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+@keyframes agent-activity-spin {
+  to {
+    transform: rotate(360deg);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .agent-activity-bubble__pulse.is-active {
+  .agent-activity-bubble__pulse.is-active,
+  .agent-activity-bubble__step[data-state=active] .agent-activity-bubble__step-icon {
     animation: none;
   }
-  .agent-activity-bubble__summary::before {
-    transition: none;
-  }
 }
 
 /* src/react/components/Composer/Composer.css */
@@ -483,12 +543,12 @@ html.webless-agent-page-shift {
 }
 .composer__field {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: 6px;
-  padding: 6px;
+  padding: 5px 5px 5px 14px;
   border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
-  border-radius: 16px;
-  background: color-mix(in srgb, var(--as-surface-muted) 42%, var(--as-surface));
+  border-radius: 999px;
+  background: var(--as-surface);
   box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
 }
 .composer__field:focus-within {
@@ -502,7 +562,7 @@ html.webless-agent-page-shift {
   background: transparent;
   resize: none;
   field-sizing: content;
-  padding: 8px 6px 8px 8px;
+  padding: 8px 0;
   font-size: 13px;
   line-height: 1.45;
   color: var(--as-text);
@@ -521,7 +581,7 @@ html.webless-agent-page-shift {
   height: 34px;
   border-radius: 999px;
   background: var(--as-brand);
-  color: var(--as-visitor-text);
+  color: var(--as-surface);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -541,8 +601,8 @@ html.webless-agent-page-shift {
 }
 .composer--dock .composer__field {
   align-items: center;
-  padding: 5px 5px 5px 13px;
-  background: color-mix(in srgb, var(--as-surface-muted) 42%, var(--as-surface));
+  padding: 5px 5px 5px 14px;
+  background: var(--as-surface);
   border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
   border-radius: 999px;
   box-shadow: none;
@@ -564,6 +624,112 @@ html.webless-agent-page-shift {
   width: 15px;
   height: 15px;
 }
+.composer--form .composer__sheet {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
+  border-radius: 22px;
+  background: var(--as-surface);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
+  animation: composer-form-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.composer--form .composer__sheet:focus-within {
+  border-color: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 10%, transparent);
+}
+.composer__row {
+  padding: 12px 16px 10px;
+  border-bottom: 1px solid var(--as-hairline, color-mix(in srgb, var(--as-text) 9%, transparent));
+}
+.composer__row--grow {
+  padding-bottom: 8px;
+}
+.composer__label {
+  display: block;
+  min-width: 0;
+}
+.composer__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;
+}
+.composer__control {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--as-text);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.45;
+}
+.composer__control--area {
+  resize: none;
+  min-height: 72px;
+  field-sizing: content;
+  max-height: 140px;
+}
+.composer__control::placeholder {
+  color: color-mix(in srgb, var(--as-text) 62%, transparent);
+}
+.composer__control:focus {
+  outline: none;
+}
+.composer__error {
+  margin: 6px 0 0;
+  color: var(--as-danger);
+  font-size: 12px;
+  line-height: 1.35;
+}
+.composer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 8px 8px 8px 16px;
+}
+.composer__send:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.composer--form .composer__send {
+  width: 36px;
+  height: 36px;
+}
+@keyframes composer-form-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .composer--form .composer__sheet {
+    animation: none;
+  }
+  .composer__send {
+    transition: none;
+  }
+}
+.composer--dock.composer--form .composer__control {
+  font-size: 15px;
+}
+.composer--dock.composer--form .composer__send {
+  width: 44px;
+  height: 44px;
+}
 
 /* src/react/components/FollowUpChips/FollowUpChips.css */
 .followups {
@@ -580,42 +746,33 @@ html.webless-agent-page-shift {
 }
 .followups__list {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 .followups__chip {
   appearance: none;
+  display: inline-flex;
+  align-items: center;
   border: 1px solid var(--as-border);
   background: var(--as-surface);
   color: var(--as-text);
-  font-size: 13px;
-  position: relative;
-  font-weight: 580;
+  font-size: 12.5px;
+  font-weight: 600;
   line-height: 1.4;
   text-align: left;
-  border-radius: 12px;
-  padding: 11px 34px 11px 12px;
+  border-radius: 999px;
+  padding: 8px 14px;
   cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease;
   word-break: break-word;
 }
-.followups__chip::after {
-  position: absolute;
-  top: 50%;
-  right: 13px;
-  color: var(--as-text-subtle);
-  content: "\2192";
-  font-size: 13px;
-  transform: translateY(-50%);
-  transition: transform 150ms ease, color 150ms ease;
-}
 .followups__chip:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--as-brand) 28%, var(--as-border));
+  border-color: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
   background: var(--as-brand-soft);
-}
-.followups__chip:hover:not(:disabled)::after {
   color: var(--as-brand);
-  transform: translate(2px, -50%);
 }
 .followups__chip:disabled {
   opacity: 0.5;
@@ -650,9 +807,6 @@ html.webless-agent-page-shift {
   white-space: nowrap;
   text-align: left;
 }
-.followups__chip--dock::after {
-  display: none;
-}
 
 /* src/react/components/BookingCard/BookingCard.css */
 .booking-card {
@@ -675,6 +829,48 @@ html.webless-agent-page-shift {
 .booking-card__form {
   padding: 16px;
 }
+.booking-card__steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+  padding: 0 0 4px;
+  list-style: none;
+}
+.booking-card__step-indicator {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  color: var(--as-text-subtle);
+  font-size: 11px;
+  font-weight: 650;
+}
+.booking-card__step-indicator > span:first-child {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid var(--as-border);
+  border-radius: 999px;
+  color: inherit;
+  font-size: 11px;
+}
+.booking-card__step-indicator--active {
+  color: var(--as-text);
+}
+.booking-card__step-indicator--active > span:first-child {
+  border-color: var(--as-brand);
+  background: var(--as-brand);
+  color: var(--as-visitor-text);
+}
+.booking-card__step-indicator--complete {
+  color: var(--as-brand);
+}
+.booking-card__step-indicator--complete > span:first-child {
+  border-color: var(--as-brand);
+}
 .booking-card__step {
   gap: 16px;
 }
@@ -747,6 +943,35 @@ html.webless-agent-page-shift {
   outline: 2px solid var(--as-brand);
   outline-offset: 2px;
 }
+.booking-card__loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 13px;
+  line-height: 1.4;
+}
+.booking-card__loading::before {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  border: 2px solid color-mix(in srgb, var(--as-brand) 30%, var(--as-border));
+  border-top-color: var(--as-brand);
+  border-radius: 50%;
+  content: "";
+  animation: booking-card-spin 0.7s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .booking-card__loading::before {
+    animation: none;
+  }
+}
+@keyframes booking-card-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .booking-card__weekdays,
 .booking-card__calendar {
   display: grid;
@@ -832,19 +1057,30 @@ html.webless-agent-page-shift {
   padding: 8px 12px;
   border: 1px solid var(--as-border);
   border-radius: var(--as-radius-md);
-  background: var(--as-surface);
+  background: var(--as-surface-muted, #f4f6fb);
   color: var(--as-text);
+  caret-color: var(--as-text);
+  -webkit-text-fill-color: var(--as-text);
+  color-scheme: light;
   font: inherit;
   font-size: 13px;
 }
+.booking-card__field input:-webkit-autofill,
+.booking-card__field input:-webkit-autofill:hover,
+.booking-card__field input:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--as-text);
+  caret-color: var(--as-text);
+  box-shadow: 0 0 0 1000px var(--as-surface-muted, #f4f6fb) inset;
+}
 .booking-card__submit {
   width: 100%;
   min-height: 44px;
   padding: 8px 12px;
   border: 0;
   border-radius: var(--as-radius-md);
-  background: var(--as-visitor-bubble, #111);
-  color: var(--as-visitor-text, #fff);
+  background: var(--as-brand);
+  color: #fff;
+  -webkit-text-fill-color: #fff;
   font: inherit;
   font-size: 13px;
   font-weight: 600;
@@ -923,18 +1159,54 @@ html.webless-agent-page-shift {
   word-break: break-word;
 }
 .message-bubble--visitor .message-bubble__text {
-  background: var(--as-visitor-bubble);
-  color: var(--as-visitor-text);
-  border-bottom-right-radius: 5px;
+  padding: 10px 14px;
+  border-radius: var(--as-radius-lg);
+  border-bottom-right-radius: 6px;
+  background: var(--as-brand-soft);
+  color: var(--as-text);
+  white-space: pre-wrap;
+  text-decoration: none;
 }
 .message-bubble--agent .message-bubble__text {
   min-width: 0;
-  width: auto;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-lg);
+  background: var(--as-surface);
+  color: var(--as-text);
+}
+.message-bubble__sources {
+  display: grid;
+  gap: 6px;
+  margin: 10px 0 0;
+  padding: 10px 0 0;
+  border-top: 1px solid var(--as-border);
+  list-style: none;
+}
+.message-bubble__sources a {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
   color: var(--as-text);
+  font-size: 12.5px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.message-bubble__sources a:hover {
+  color: var(--as-brand);
+}
+.message-bubble__source-icon {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  place-items: center;
+  border-radius: 6px;
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
+  font-size: 11px;
 }
 .message-bubble__markdown > :first-child {
   margin-top: 0;
@@ -983,6 +1255,338 @@ html.webless-agent-page-shift {
   font-size: 0.92em;
 }
 
+/* src/react/components/ConfirmationCard/ConfirmationCard.css */
+.confirmation-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-lg);
+  background: var(--as-surface);
+  color: var(--as-text);
+}
+.confirmation-card__heading {
+  display: grid;
+  gap: 4px;
+}
+.confirmation-card__heading strong {
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.4;
+  text-wrap: pretty;
+}
+.confirmation-card__heading p {
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.confirmation-card__actions {
+  display: grid;
+  gap: 8px;
+}
+.confirmation-card__action {
+  appearance: none;
+  min-height: 40px;
+  padding: 8px 14px;
+  border: 1px solid var(--as-border);
+  border-radius: 10px;
+  background: var(--as-surface);
+  color: var(--as-text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 650;
+}
+.confirmation-card__action--primary {
+  border-color: var(--as-brand);
+  background: var(--as-brand);
+  color: #fff;
+}
+.confirmation-card__action--danger {
+  border-color: color-mix(in srgb, var(--as-danger) 40%, var(--as-border));
+  color: var(--as-danger);
+}
+.confirmation-card__action:hover:not(:disabled) {
+  border-color: var(--as-brand);
+}
+.confirmation-card__action--primary:hover:not(:disabled) {
+  filter: brightness(1.04);
+}
+.confirmation-card__action:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.confirmation-card__action:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .confirmation-card__action--primary:hover:not(:disabled) {
+    filter: none;
+  }
+}
+
+/* src/react/components/HumanInputCard/HumanInputCard.css */
+.human-input-card {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid color-mix(in srgb, var(--as-brand) 24%, var(--as-border));
+  border-radius: var(--as-radius-md);
+  background: color-mix(in srgb, var(--as-brand-soft) 42%, var(--as-surface));
+  color: var(--as-text);
+}
+.human-input-card__heading {
+  display: grid;
+  gap: 4px;
+}
+.human-input-card__heading strong {
+  font-size: 13px;
+  font-weight: 700;
+}
+.human-input-card__heading p {
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.human-input-card__unavailable {
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 12px;
+}
+.human-input-card__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.human-input-card__option {
+  appearance: none;
+  display: grid;
+  gap: 2px;
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid var(--as-control-border);
+  border-radius: 10px;
+  background: var(--as-surface);
+  color: var(--as-text);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+.human-input-card__option--primary {
+  border-color: var(--as-brand);
+  background: var(--as-brand);
+  color: var(--as-visitor-text);
+}
+.human-input-card__option--danger {
+  color: var(--as-danger);
+}
+.human-input-card__option small {
+  max-width: 34ch;
+  color: inherit;
+  font-size: 11px;
+  opacity: 0.8;
+}
+.human-input-card__option:hover:not(:disabled) {
+  border-color: var(--as-brand);
+}
+.human-input-card__option:focus-visible,
+.human-input-card form input:focus-visible,
+.human-input-card form button:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.human-input-card__option:disabled,
+.human-input-card form button:disabled,
+.human-input-card form input:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.human-input-card form {
+  display: grid;
+  gap: 6px;
+}
+.human-input-card form label {
+  font-size: 12px;
+  font-weight: 650;
+}
+.human-input-card form div {
+  display: flex;
+  gap: 8px;
+}
+.human-input-card form input {
+  min-width: 0;
+  min-height: 38px;
+  flex: 1 1 auto;
+  padding: 8px 10px;
+  border: 1px solid var(--as-control-border);
+  border-radius: 10px;
+  background: var(--as-surface);
+  color: var(--as-text);
+  font: inherit;
+}
+.human-input-card form button {
+  min-height: 38px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--as-brand);
+  color: var(--as-visitor-text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 650;
+}
+
+/* src/react/components/ToolResultCard/ToolResultCard.css */
+.tool-result-card {
+  display: grid;
+  width: 100%;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
+  color: var(--as-text);
+  font-size: 12px;
+}
+.tool-result-card__heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tool-result-card__heading strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+.tool-result-card__status {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--as-success);
+}
+.tool-result-card--failed .tool-result-card__status,
+.tool-result-card--rejected .tool-result-card__status {
+  background: var(--as-danger);
+}
+.tool-result-card p {
+  margin: 0;
+  color: var(--as-text-muted);
+  line-height: 1.45;
+}
+.tool-result-card dl {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+}
+.tool-result-card dl div {
+  display: grid;
+  grid-template-columns: minmax(80px, 0.45fr) minmax(0, 1fr);
+  gap: 10px;
+}
+.tool-result-card dt {
+  color: var(--as-text-muted);
+}
+.tool-result-card dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.tool-result-card__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.tool-result-card__links a {
+  color: var(--as-brand);
+  font-weight: 650;
+  text-underline-offset: 2px;
+}
+.tool-result-card__links a:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+
+/* src/react/components/CollectionResultCard/CollectionResultCard.css */
+.collection-result-card__list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.collection-result-card__list li {
+  display: grid;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--as-border);
+}
+.collection-result-card__list li:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+.collection-result-card__item-title {
+  font-size: 13px;
+  font-weight: 650;
+}
+.collection-result-card__empty {
+  margin: 0;
+  color: var(--as-text-muted);
+}
+.collection-result-card__list a {
+  color: var(--as-brand);
+  font-weight: 650;
+  text-underline-offset: 2px;
+}
+
+/* src/react/components/EntityResultCard/EntityResultCard.css */
+.entity-result-card {
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
+}
+@media (prefers-reduced-motion: reduce) {
+  .entity-result-card {
+    transition: none;
+  }
+}
+
+/* src/react/components/SignatureResultCard/SignatureResultCard.css */
+.signature-result-card__badge {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--as-surface-muted, rgb(255 255 255 / 0.06));
+  color: var(--as-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: capitalize;
+}
+.signature-result-card__cta {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  border-radius: var(--as-radius-md);
+  background: var(--as-brand);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 650;
+  text-decoration: none;
+}
+.signature-result-card__cta:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .signature-result-card__cta {
+    transition: none;
+  }
+}
+
 /* src/react/components/AgentRail/AgentRail.css */
 .agent-rail {
   --rail-width: var(--as-rail-max-width);
@@ -1003,6 +1607,10 @@ html.webless-agent-page-shift {
   box-shadow: var(--as-shadow-rail);
   color: var(--as-text);
   font-family: var(--as-font-body);
+  text-decoration: none;
+}
+.agent-rail :where(p, span, strong, button, label) {
+  text-decoration: none;
 }
 .agent-rail:focus {
   outline: none;
@@ -1151,6 +1759,12 @@ html.webless-agent-page-shift {
   margin: 0 auto;
   padding: 24px 20px 32px;
 }
+.agent-rail__turn-block {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+}
 .agent-rail__welcome {
   display: flex;
   flex-direction: column;
@@ -1507,9 +2121,8 @@ html.webless-agent-page-shift {
 }
 .assist-edge-tab--bottom {
   left: var(--tab-along);
-  bottom: var(--tab-inset);
-  border-bottom: none;
-  border-radius: 999px 999px 0 0;
+  bottom: max(calc(var(--tab-inset) + 24px), env(safe-area-inset-bottom));
+  border-radius: 999px;
   transform: translateX(-50%) translateY(calc(100% + 18px));
 }
 .assist-edge-tab--bottom.is-visible {
@@ -1518,6 +2131,23 @@ html.webless-agent-page-shift {
 .assist-edge-tab--bottom.is-visible:hover {
   transform: translateX(-50%) translateY(-2px);
 }
+.assist-edge-tab--bottom.assist-edge-tab--align-start {
+  left: max(calc(var(--tab-inset) + 24px), env(safe-area-inset-left));
+  transform: translateY(calc(100% + 42px));
+}
+.assist-edge-tab--bottom.assist-edge-tab--align-end {
+  right: max(calc(var(--tab-inset) + 24px), env(safe-area-inset-right));
+  left: auto;
+  transform: translateY(calc(100% + 42px));
+}
+.assist-edge-tab--bottom.assist-edge-tab--align-start.is-visible,
+.assist-edge-tab--bottom.assist-edge-tab--align-end.is-visible {
+  transform: translateY(0);
+}
+.assist-edge-tab--bottom.assist-edge-tab--align-start.is-visible:hover,
+.assist-edge-tab--bottom.assist-edge-tab--align-end.is-visible:hover {
+  transform: translateY(-2px);
+}
 .assist-edge-tab--outline {
   --tab-fill: color-mix(in srgb, var(--as-surface) 96%, var(--as-text) 4%);
   --tab-line: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));