@webless/agent 0.12.1 → 0.13.1

package/dist/react.css

@@ -18,6 +18,22 @@
   --as-radius-sm: 8px;
   --as-radius-md: 12px;
   --as-radius-lg: 16px;
+  --as-brand-mark-size: 24px;
+  --as-brand-mark-size-compact: 22px;
+  --as-brand-wordmark-header-height: 20px;
+  --as-brand-wordmark-header-max-width: 96px;
+  --as-brand-wordmark-message-height: 18px;
+  --as-brand-wordmark-message-max-width: 80px;
+  --as-brand-identity-gap: 6px;
+  --as-discovery-row-min-height: 46px;
+  --as-discovery-row-padding: 12px 16px;
+  --as-discovery-row-gap: 10px;
+  --as-discovery-row-font-size: 14px;
+  --as-discovery-row-font-weight: 400;
+  --as-discovery-row-line-height: 1.5;
+  --as-focus-inset-ring: inset 0 0 0 2px var(--as-brand);
+  --as-focus-link-padding-block: 2px;
+  --as-focus-link-padding-inline: 4px;
   --as-font-body:
     "Mulish",
     "Avenir Next",
@@ -39,11 +55,26 @@
   color: var(--as-text);
   -webkit-font-smoothing: antialiased;
 }
+.webless-agent-root img.as-brand-logo-img {
+  display: block;
+  flex-shrink: 0;
+  object-fit: contain;
+  object-position: left center;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: high-quality;
+}
 .webless-agent-root button,
 .webless-agent-root input,
 .webless-agent-root textarea {
   font: inherit;
 }
+.webless-agent-root :is(a[href], button:not(:disabled), summary) {
+  cursor: pointer;
+}
+.webless-agent-root :is(a[href], button:not(:disabled), summary) :is(*, svg) {
+  cursor: inherit;
+  pointer-events: none;
+}
 @media (prefers-reduced-motion: reduce) {
   .webless-agent-root *,
   .webless-agent-root *::before,
@@ -547,6 +578,263 @@ html.webless-agent-page-shift {
   }
 }
 
+/* src/react/components/LearnMore/LearnMore.css */
+.learn-more {
+  width: 100%;
+  min-width: 0;
+}
+.learn-more__heading {
+  margin: 0;
+  font-size: 12.5px;
+  font-weight: 650;
+  line-height: 1.5;
+}
+.learn-more__toggle {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  min-height: 44px;
+  margin: 0;
+  padding: 10px 16px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text-muted);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 650;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+.learn-more .learn-more__toggle {
+  width: auto;
+  background: transparent;
+}
+.learn-more .learn-more__toggle:hover {
+  color: var(--as-brand);
+  background: var(--as-brand-soft);
+}
+.learn-more__toggle:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.learn-more__chevron {
+  width: 14px;
+  height: 14px;
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.learn-more__toggle[aria-expanded=true] .learn-more__chevron {
+  transform: rotate(180deg);
+}
+.learn-more__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
+}
+.learn-more__panel--open {
+  grid-template-rows: 1fr;
+  visibility: visible;
+  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.learn-more__panel-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+.learn-more__questions {
+  margin: 0;
+  padding: 0 0 4px;
+  list-style: none;
+}
+.learn-more__questions li {
+  border-bottom: 1px solid var(--as-border);
+}
+.learn-more__questions li:last-child {
+  border-bottom: 0;
+}
+.learn-more__questions button {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: var(--as-discovery-row-gap);
+  width: 100%;
+  min-height: var(--as-discovery-row-min-height);
+  padding: var(--as-discovery-row-padding);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--as-text);
+  text-align: left;
+  font: inherit;
+  font-size: var(--as-discovery-row-font-size);
+  font-weight: var(--as-discovery-row-font-weight);
+  line-height: var(--as-discovery-row-line-height);
+  cursor: pointer;
+}
+.learn-more__question-icon {
+  display: inline-flex;
+  flex: 0 0 18px;
+  color: var(--as-text-muted);
+}
+.learn-more__question-text {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+.learn-more__question-arrow {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--as-text-muted);
+}
+.learn-more .learn-more__questions button:hover:not(:disabled) {
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
+}
+.learn-more .learn-more__questions button:hover:not(:disabled) .learn-more__question-arrow {
+  color: var(--as-brand);
+}
+.learn-more__questions button:focus-visible {
+  outline: none;
+  box-shadow: var(--as-focus-inset-ring);
+}
+.learn-more__questions button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+@media (prefers-reduced-motion: reduce) {
+  .learn-more__panel {
+    transition: none;
+  }
+  .learn-more__chevron {
+    transition: none;
+  }
+}
+
+/* src/react/components/SearchReferences/SearchReferences.css */
+.search-references {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 16px;
+  margin-top: 12px;
+}
+.search-references__heading {
+  width: fit-content;
+  min-height: 32px;
+  box-sizing: border-box;
+  padding: 6px 0;
+  margin: 0;
+  color: var(--as-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+  cursor: pointer;
+}
+.search-references__disclosure[open] > summary {
+  margin-bottom: 8px;
+}
+.search-references__list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.search-references__list > li {
+  border-bottom: 1px solid var(--as-border);
+}
+.search-references__list > li:last-child {
+  border-bottom: 0;
+}
+.search-references__source {
+  display: flex;
+  min-width: 0;
+  min-height: var(--as-discovery-row-min-height);
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--as-discovery-row-gap);
+  padding: var(--as-discovery-row-padding);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--as-text);
+  font-size: var(--as-discovery-row-font-size);
+  font-weight: var(--as-discovery-row-font-weight);
+  line-height: var(--as-discovery-row-line-height);
+  text-decoration: none;
+}
+.search-references__icon {
+  display: inline-flex;
+  flex: 0 0 18px;
+  color: var(--as-text-muted);
+}
+.search-references__icon img {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+.search-references__title {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+  font: inherit;
+}
+.search-references__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.search-references__cta {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 44px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  border: 1px solid var(--as-brand);
+  border-radius: 999px;
+  color: var(--as-text);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  text-decoration: none;
+}
+.search-references__list .search-references__source[href]:hover,
+.search-references .search-references__cta:hover {
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
+}
+.search-references__list .search-references__source[href]:hover .search-references__row-arrow {
+  color: var(--as-brand);
+}
+.search-references a:focus-visible,
+.search-references summary:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.search-references__list .search-references__source:focus-visible {
+  outline: none;
+  box-shadow: var(--as-focus-inset-ring);
+}
+.message-bubble__text:has(.search-references) {
+  width: 100%;
+}
+.search-references > details,
+.search-references__list > li {
+  min-width: 0;
+}
+.search-references__row-arrow {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--as-text-muted);
+}
+
 /* src/react/components/AnswerReceiptDialog/AnswerReceiptDialog.css */
 .agent-receipt-dialog {
   position: absolute;
@@ -668,13 +956,17 @@ html.webless-agent-page-shift {
 }
 .composer__field {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: 6px;
   padding: 5px 5px 5px 14px;
   border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
   border-radius: 999px;
   background: var(--as-surface);
   box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
+  transition: border-radius 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.composer--multiline .composer__field {
+  border-radius: 20px;
 }
 .composer__field:focus-within {
   border-color: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));
@@ -731,7 +1023,7 @@ html.webless-agent-page-shift {
   outline-offset: 2px;
 }
 .composer--dock .composer__field {
-  align-items: center;
+  align-items: flex-end;
   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));
@@ -742,6 +1034,9 @@ html.webless-agent-page-shift {
   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--dock.composer--multiline .composer__field {
+  border-radius: 24px;
+}
 .composer--dock .composer__input {
   padding: 11px 0;
   font-size: 15px;
@@ -950,6 +1245,9 @@ html.webless-agent-page-shift {
   .composer--form .composer__sheet {
     animation: none;
   }
+  .composer__field {
+    transition: none;
+  }
   .composer__send {
     transition: none;
   }
@@ -1035,151 +1333,46 @@ html.webless-agent-page-shift {
     color 0.15s ease;
   word-break: break-word;
 }
-.followups__chip:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
-  background: var(--as-brand-soft);
-  color: var(--as-brand);
-}
-.followups__chip:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.followups--dock {
-  width: 100%;
-  gap: 0;
-}
-.followups__scroll {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-start;
-  overflow-x: auto;
-  padding: 2px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.followups__scroll::-webkit-scrollbar {
-  display: none;
-}
-.followups__chip--dock {
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
+.followups .followups__chip {
   width: auto;
-  max-width: none;
-  padding: 8px 12px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-  text-align: left;
-}
-
-/* src/react/components/SearchReferences/SearchReferences.css */
-.search-references {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  gap: 16px;
-  margin-top: 12px;
-}
-.search-references__heading {
-  width: fit-content;
-  min-height: 32px;
-  box-sizing: border-box;
-  padding: 6px 0;
-  margin: 0;
-  color: var(--as-text);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.5;
-  cursor: pointer;
-}
-.search-references__disclosure[open] > summary {
-  margin-bottom: 8px;
-}
-.search-references__list {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
 }
-.search-references__source {
-  display: flex;
-  min-width: 0;
-  min-height: 52px;
-  box-sizing: border-box;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
-  border-radius: var(--as-radius-sm, 8px);
-  background: var(--as-surface-muted);
-  color: var(--as-text);
-  text-decoration: none;
-}
-.search-references__icon {
-  display: inline-flex;
-  flex: 0 0 18px;
-  color: var(--as-text-muted);
-}
-.search-references__copy {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
-.search-references__title,
-.search-references__domain {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.4;
+.followups .followups__chip:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
 }
-.search-references__title {
-  font-size: 13px;
-  font-weight: 500;
+.followups__chip:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-.search-references__domain {
-  color: var(--as-text-muted);
-  font-size: 11px;
+.followups--dock {
+  width: 100%;
+  gap: 0;
 }
-.search-references__actions {
+.followups__scroll {
   display: flex;
-  flex-wrap: wrap;
   gap: 8px;
+  justify-content: flex-start;
+  overflow-x: auto;
+  padding: 2px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
-.search-references__cta {
+.followups__scroll::-webkit-scrollbar {
+  display: none;
+}
+.followups__chip--dock {
   display: inline-flex;
-  max-width: 100%;
-  min-height: 44px;
-  box-sizing: border-box;
   align-items: center;
-  justify-content: center;
-  padding: 10px 20px;
-  border: 1px solid var(--as-brand);
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+  padding: 8px 12px;
   border-radius: 999px;
-  color: var(--as-text);
-  font-size: 13px;
-  font-weight: 650;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-  text-decoration: none;
-}
-.search-references__source[href]:hover,
-.search-references__cta:hover {
-  background: var(--as-brand-soft);
-  color: var(--as-brand);
-}
-.search-references a:focus-visible,
-.search-references summary:focus-visible {
-  outline: 2px solid var(--as-brand);
-  outline-offset: 2px;
-}
-.message-bubble__text:has(.search-references) {
-  width: 100%;
-}
-.search-references > details,
-.search-references__list > li {
-  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-align: left;
 }
 
 /* src/react/components/BookingCard/BookingCard.css */
@@ -1503,26 +1696,25 @@ html.webless-agent-page-shift {
   width: 100%;
   max-width: 100%;
 }
-.message-bubble__agent-row {
-  display: grid;
+.message-bubble__agent-stack {
+  display: flex;
   width: 100%;
-  grid-template-columns: 24px minmax(0, 1fr);
+  flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
+  gap: 8px;
 }
 .message-bubble__agent-avatar {
   position: relative;
   display: inline-flex;
-  width: 24px;
-  height: 24px;
+  width: var(--as-brand-mark-size-compact);
+  height: var(--as-brand-mark-size-compact);
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  margin-top: 1px;
   border-radius: 8px;
   background: var(--as-surface-muted);
 }
-.message-bubble__agent-avatar img {
+.message-bubble__agent-avatar:not(.message-bubble__agent-avatar--wide) img {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1531,6 +1723,28 @@ html.webless-agent-page-shift {
   background: var(--as-surface);
   object-fit: contain;
 }
+.message-bubble__agent-avatar--wide {
+  width: auto;
+  height: auto;
+  min-width: 0;
+  max-width: var(--as-brand-wordmark-message-max-width);
+  flex-shrink: 1;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+}
+.message-bubble__agent-avatar--wide img {
+  position: static;
+  display: block;
+  width: auto;
+  max-width: var(--as-brand-wordmark-message-max-width);
+  height: var(--as-brand-wordmark-message-height);
+  border-radius: 0;
+  background: transparent;
+  object-fit: contain;
+  object-position: left center;
+}
 .message-bubble__text {
   margin: 0;
   padding: 10px 12px;
@@ -1559,24 +1773,35 @@ html.webless-agent-page-shift {
 }
 .message-bubble__sources {
   display: grid;
-  gap: 6px;
+  gap: 0;
   margin: 10px 0 0;
   padding: 10px 0 0;
   border-top: 1px solid var(--as-border);
   list-style: none;
 }
+.message-bubble__sources > li {
+  border-bottom: 1px solid var(--as-border);
+}
+.message-bubble__sources > li:last-child {
+  border-bottom: 0;
+}
 .message-bubble__sources a {
   display: flex;
   min-width: 0;
+  min-height: var(--as-discovery-row-min-height);
   align-items: center;
-  gap: 8px;
+  gap: var(--as-discovery-row-gap);
+  padding: var(--as-discovery-row-padding);
+  border-radius: 6px;
   color: var(--as-text);
-  font-size: 12.5px;
-  font-weight: 600;
+  font-size: var(--as-discovery-row-font-size);
+  font-weight: var(--as-discovery-row-font-weight);
+  line-height: var(--as-discovery-row-line-height);
   text-decoration: none;
 }
 .message-bubble__sources a:hover {
   color: var(--as-brand);
+  background: var(--as-brand-soft);
 }
 .message-bubble__source-icon {
   display: grid;
@@ -1642,6 +1867,27 @@ html.webless-agent-page-shift {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+.message-bubble__markdown :is(a[href], [data-streamdown=link]):focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: var(--as-focus-inset-ring);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  padding: var(--as-focus-link-padding-block) var(--as-focus-link-padding-inline);
+  margin: 0;
+}
+.message-bubble__markdown ul > li > :is(a[href], [data-streamdown=link]):focus-visible {
+  border-radius: 6px;
+}
+.message-bubble__sources a:focus-visible {
+  outline: none;
+  border-radius: 6px;
+  box-shadow: var(--as-focus-inset-ring);
+}
+.agent-rail .message-bubble__markdown :is(a[href], [data-streamdown=link]):focus-visible,
+.agent-rail .message-bubble__sources a:focus-visible {
+  outline: none;
+}
 .message-bubble__markdown code {
   font-family:
     ui-monospace,
@@ -1671,10 +1917,18 @@ html.webless-agent-page-shift {
   color: var(--as-text-muted);
 }
 .message-bubble__speaker {
-  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.75rem;
-  opacity: 0.75;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+  color: var(--as-text-muted);
+}
+.message-bubble__agent-header {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: var(--as-brand-mark-size-compact);
+  align-items: center;
+  gap: 4px;
 }
 
 /* src/react/components/MessageActions/MessageActions.css */
@@ -1777,7 +2031,7 @@ html.webless-agent-page-shift {
   line-height: 1.3;
   text-align: left;
 }
-.agent-message-actions__menu-item:hover {
+.agent-message-actions__menu .agent-message-actions__menu-item:hover {
   background: var(--as-surface-muted);
 }
 .agent-message-actions__menu-item:focus-visible {
@@ -2504,6 +2758,13 @@ html.webless-agent-page-shift {
 .agent-rail :where(p, span, strong, button, label) {
   text-decoration: none;
 }
+.agent-rail :is(a[href], button:not(:disabled), summary) {
+  cursor: pointer;
+}
+.agent-rail :is(a[href], button:not(:disabled), summary) :is(*, svg) {
+  cursor: inherit;
+  pointer-events: none;
+}
 .agent-rail:focus {
   outline: none;
 }
@@ -2535,7 +2796,7 @@ html.webless-agent-page-shift {
   min-width: 0;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--as-brand-identity-gap);
 }
 .agent-rail__brand-label {
   overflow: hidden;
@@ -2557,10 +2818,10 @@ html.webless-agent-page-shift {
   background: var(--as-surface-muted);
 }
 .agent-rail__brand-mark {
-  width: 25px;
-  height: 25px;
-  flex-basis: 25px;
-  border-radius: 8px;
+  width: var(--as-brand-mark-size);
+  height: var(--as-brand-mark-size);
+  flex-basis: var(--as-brand-mark-size);
+  border-radius: var(--as-radius-sm);
   font-size: 11px;
 }
 .agent-rail__brand-logo {
@@ -2572,6 +2833,28 @@ html.webless-agent-page-shift {
   background: var(--as-surface);
   object-fit: contain;
 }
+.agent-rail__brand-mark--wide {
+  width: auto;
+  min-width: 0;
+  max-width: var(--as-brand-wordmark-header-max-width);
+  flex: 0 1 auto;
+  flex-basis: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+}
+.agent-rail__brand-mark--wide .agent-rail__brand-logo {
+  position: static;
+  display: block;
+  width: auto;
+  max-width: var(--as-brand-wordmark-header-max-width);
+  height: var(--as-brand-wordmark-header-height);
+  border-radius: 0;
+  background: transparent;
+  object-fit: contain;
+  object-position: left center;
+}
 .agent-rail__brand-spacer {
   width: 36px;
   height: 36px;
@@ -2654,7 +2937,7 @@ html.webless-agent-page-shift {
   flex-direction: column;
   gap: 20px;
   margin: 0 auto;
-  padding: 24px 20px 32px;
+  padding: 16px 16px 32px;
 }
 .agent-rail__turn-block {
   display: flex;
@@ -2724,7 +3007,7 @@ html.webless-agent-page-shift {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  padding: 13px 20px 14px;
+  padding: 13px 16px 14px;
   border-top: 1px solid var(--as-hairline);
   background: var(--as-surface);
 }
@@ -2799,7 +3082,7 @@ html.webless-agent-page-shift {
 }
 .agent-rail__disclaimer {
   flex-shrink: 0;
-  padding: 10px 20px 8px;
+  padding: 8px 16px 6px;
   background: var(--as-surface);
 }
 .agent-rail__disclaimer p {
@@ -2849,13 +3132,13 @@ html.webless-agent-page-shift {
 }
 .agent-rail--expanded .agent-rail__thread {
   max-width: 760px;
-  padding: 36px 24px 48px;
+  padding: 24px 24px 48px;
 }
 .agent-rail--expanded .agent-rail__welcome {
   width: 100%;
 }
 .agent-rail--expanded .agent-rail__composer-wrap {
-  padding: 16px 24px 18px;
+  padding: 16px 24px 16px;
 }
 .agent-rail--expanded .agent-rail__disclaimer,
 .agent-rail--expanded .composer,
@@ -2971,47 +3254,164 @@ html.webless-agent-page-shift {
     animation: none;
     transition: none;
   }
+  .agent-rail__sources-panel {
+    transition: none;
+  }
+  .agent-rail__sources-button-chevron {
+    transition: none;
+  }
 }
 .agent-rail__handoff {
-  padding: 0.625rem 1rem;
-  border-top: 1px solid var(--as-border);
   display: flex;
-  gap: 0.5rem;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  font-size: 0.8125rem;
+  gap: 10px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--as-hairline);
+  background: transparent;
+  font-size: 12px;
+  line-height: 1.45;
   color: var(--as-text-muted);
 }
-.agent-rail__handoff p {
+.agent-rail__handoff-dot {
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--as-success);
+}
+.agent-rail__handoff-status {
   margin: 0;
+  min-width: 0;
+  flex: 1;
 }
-.agent-rail__handoff button {
-  border: 0;
-  border-radius: 0.375rem;
+.agent-rail__handoff-status strong {
+  color: var(--as-text);
+  font-weight: 650;
+}
+.agent-rail__handoff-cta,
+.agent-rail__handoff-action {
+  appearance: none;
+  flex: 0 0 auto;
+  min-height: 32px;
+  padding: 6px 12px;
+  border: 1px solid var(--as-border);
+  border-radius: 999px;
   background: transparent;
   color: var(--as-text);
-  cursor: pointer;
   font: inherit;
-  font-weight: 600;
-  padding: 0.5rem;
-  min-height: 2.5rem;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+  transition: border-color 150ms ease, background 150ms ease;
 }
-.agent-rail__handoff button:hover {
+.agent-rail__handoff-cta:hover:not(:disabled),
+.agent-rail__handoff-action:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--as-brand) 40%, var(--as-border));
   background: var(--as-surface-muted);
 }
-.agent-rail__handoff button:focus-visible {
+.agent-rail__handoff-cta:focus-visible,
+.agent-rail__handoff-action:focus-visible {
   outline: 2px solid var(--as-brand);
   outline-offset: 2px;
 }
-.agent-rail__handoff button:disabled {
-  opacity: 0.5;
+.agent-rail__handoff-cta:disabled,
+.agent-rail__handoff-action:disabled {
+  opacity: 0.55;
   cursor: default;
 }
-.agent-rail__handoff [role=alert] {
-  width: 100%;
+.agent-rail__handoff-error {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   color: var(--as-danger);
 }
+.agent-rail__answer-footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.agent-rail__answer-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+.agent-rail__answer-actions:empty {
+  display: none;
+}
+.agent-rail__sources-button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3px;
+  margin-left: auto;
+  min-height: 44px;
+  padding: 10px 16px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text-muted);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 650;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+.agent-rail__answer-actions .agent-rail__sources-button {
+  width: auto;
+  background: transparent;
+}
+.agent-rail__answer-actions .agent-rail__sources-button:hover {
+  color: var(--as-brand);
+  background: var(--as-brand-soft);
+}
+.agent-rail__sources-button:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.agent-rail__sources-button-chevron {
+  display: inline-flex;
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-rail__sources-button-chevron svg {
+  width: 14px;
+  height: 14px;
+}
+.agent-rail__sources-button[aria-expanded=true] .agent-rail__sources-button-chevron {
+  transform: rotate(180deg);
+}
+.agent-rail__sources-panel {
+  display: grid;
+  width: 100%;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
+}
+.agent-rail__sources-panel--open {
+  grid-template-rows: 1fr;
+  visibility: visible;
+  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-rail__sources-panel-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+.agent-rail__sources-panel-inner > .search-references {
+  margin-top: 2px;
+}
+.agent-rail .learn-more .learn-more__toggle {
+  width: auto;
+  background: transparent;
+  padding-left: 0;
+}
+.agent-rail .learn-more .learn-more__toggle:hover {
+  color: var(--as-brand);
+  background: var(--as-brand-soft);
+}
 
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */
 .assist-edge-tab {
@@ -3083,10 +3483,6 @@ html.webless-agent-page-shift {
   border-radius: inherit;
   background: var(--pill-orb-from, var(--tab-fill));
 }
-.assist-edge-tab__mark--chip > .assist-edge-tab__logo {
-  width: 20px;
-  height: 20px;
-}
 .assist-edge-tab__custom-icon {
   width: 18px;
   height: 18px;
@@ -3280,15 +3676,16 @@ html.webless-agent-page-shift {
   --tab-ink: #1f2937;
   --tab-line: transparent;
   --pill-brand: var(--as-brand, #6366f1);
+  --pill-accent: var(--as-border, var(--as-brand, #6366f1));
   --pill-fill: #ffffff;
   --pill-title: #1f2937;
   --pill-subtitle: #9ca3af;
-  --pill-glow-strong: color-mix(in srgb, var(--pill-brand) 40%, transparent);
-  --pill-glow-soft: color-mix(in srgb, var(--pill-brand) 10%, transparent);
-  --pill-glow-shadow: color-mix(in srgb, var(--pill-brand) 15%, transparent);
+  --pill-glow-strong: color-mix(in srgb, var(--pill-accent) 40%, transparent);
+  --pill-glow-soft: color-mix(in srgb, var(--pill-accent) 10%, transparent);
+  --pill-glow-shadow: color-mix(in srgb, var(--pill-accent) 15%, transparent);
   --pill-orb-end: color-mix(in srgb, var(--pill-brand) 45%, #3b82f6);
   gap: 12px;
-  border: 1.5px solid var(--pill-brand);
+  border: 1.5px solid var(--pill-accent);
   background-color: #ffffff;
   background-image: none;
   color: var(--pill-title);
@@ -3330,9 +3727,9 @@ html.webless-agent-page-shift {
 }
 .assist-edge-tab__mark--chip {
   overflow: hidden;
-  width: 36px;
-  height: 36px;
-  flex-basis: 36px;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
   border: none;
   border-radius: 50%;
   background:
@@ -3343,11 +3740,33 @@ html.webless-agent-page-shift {
   color: #ffffff;
   box-shadow: none;
 }
+.assist-edge-tab__mark--chip:has(> .assist-edge-tab__logo),
+.assist-edge-tab__mark--chip:has(> .assist-edge-tab__custom-icon) {
+  background: var(--pill-logo-surface, #ffffff);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-accent, var(--pill-brand)) 24%, transparent);
+}
+.assist-edge-tab__mark--chip:has(> .assist-edge-tab__logo--wide) {
+  width: auto;
+  min-width: 48px;
+  max-width: 120px;
+  padding: 0 8px;
+  border-radius: 999px;
+}
 .assist-edge-tab__mark--chip > svg,
 .assist-edge-tab__mark--chip > .assist-edge-tab__custom-icon,
 .assist-edge-tab__mark--chip > .assist-edge-tab__logo {
   position: relative;
   z-index: 1;
+  flex-shrink: 0;
+  object-fit: contain;
+  object-position: center;
+}
+.assist-edge-tab__mark--chip > .assist-edge-tab__logo--chip,
+.assist-edge-tab__mark--chip > .assist-edge-tab__custom-icon--chip {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 .assist-edge-tab__mark--chip > .assist-edge-tab__chat-spark {
   color: #ffffff;