@webless/agent 0.13.0 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/embed.css CHANGED
@@ -18,6 +18,22 @@
18
18
  --as-radius-sm: 8px;
19
19
  --as-radius-md: 12px;
20
20
  --as-radius-lg: 16px;
21
+ --as-brand-mark-size: 24px;
22
+ --as-brand-mark-size-compact: 22px;
23
+ --as-brand-wordmark-header-height: 20px;
24
+ --as-brand-wordmark-header-max-width: 96px;
25
+ --as-brand-wordmark-message-height: 18px;
26
+ --as-brand-wordmark-message-max-width: 80px;
27
+ --as-brand-identity-gap: 6px;
28
+ --as-discovery-row-min-height: 46px;
29
+ --as-discovery-row-padding: 12px 16px;
30
+ --as-discovery-row-gap: 10px;
31
+ --as-discovery-row-font-size: 14px;
32
+ --as-discovery-row-font-weight: 400;
33
+ --as-discovery-row-line-height: 1.5;
34
+ --as-focus-inset-ring: inset 0 0 0 2px var(--as-brand);
35
+ --as-focus-link-padding-block: 2px;
36
+ --as-focus-link-padding-inline: 4px;
21
37
  --as-font-body:
22
38
  "Mulish",
23
39
  "Avenir Next",
@@ -39,11 +55,26 @@
39
55
  color: var(--as-text);
40
56
  -webkit-font-smoothing: antialiased;
41
57
  }
58
+ .webless-agent-root img.as-brand-logo-img {
59
+ display: block;
60
+ flex-shrink: 0;
61
+ object-fit: contain;
62
+ object-position: left center;
63
+ image-rendering: -webkit-optimize-contrast;
64
+ image-rendering: high-quality;
65
+ }
42
66
  .webless-agent-root button,
43
67
  .webless-agent-root input,
44
68
  .webless-agent-root textarea {
45
69
  font: inherit;
46
70
  }
71
+ .webless-agent-root :is(a[href], button:not(:disabled), summary) {
72
+ cursor: pointer;
73
+ }
74
+ .webless-agent-root :is(a[href], button:not(:disabled), summary) :is(*, svg) {
75
+ cursor: inherit;
76
+ pointer-events: none;
77
+ }
47
78
  @media (prefers-reduced-motion: reduce) {
48
79
  .webless-agent-root *,
49
80
  .webless-agent-root *::before,
@@ -647,65 +678,139 @@ summary.agent-transcript__activity-heading::before {
647
678
 
648
679
  /* src/react/components/LearnMore/LearnMore.css */
649
680
  .learn-more {
650
- margin-top: 20px;
651
681
  width: 100%;
652
682
  min-width: 0;
653
683
  }
654
684
  .learn-more__heading {
655
- margin: 0 0 8px;
656
- color: var(--as-text-muted);
657
- font-size: 13px;
685
+ margin: 0;
686
+ font-size: 12.5px;
658
687
  font-weight: 650;
659
688
  line-height: 1.5;
660
689
  }
690
+ .learn-more__toggle {
691
+ appearance: none;
692
+ display: inline-flex;
693
+ align-items: center;
694
+ justify-content: flex-start;
695
+ gap: 4px;
696
+ min-height: 44px;
697
+ margin: 0;
698
+ padding: 10px 16px;
699
+ border: 0;
700
+ border-radius: 8px;
701
+ background: transparent;
702
+ color: var(--as-text-muted);
703
+ font: inherit;
704
+ font-size: 12.5px;
705
+ font-weight: 650;
706
+ text-align: left;
707
+ cursor: pointer;
708
+ transition: background 150ms ease, color 150ms ease;
709
+ }
710
+ .learn-more .learn-more__toggle {
711
+ width: auto;
712
+ background: transparent;
713
+ }
714
+ .learn-more .learn-more__toggle:hover {
715
+ color: var(--as-brand);
716
+ background: var(--as-brand-soft);
717
+ }
718
+ .learn-more__toggle:focus-visible {
719
+ outline: 2px solid var(--as-brand);
720
+ outline-offset: 2px;
721
+ }
722
+ .learn-more__chevron {
723
+ width: 14px;
724
+ height: 14px;
725
+ transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
726
+ }
727
+ .learn-more__toggle[aria-expanded=true] .learn-more__chevron {
728
+ transform: rotate(180deg);
729
+ }
730
+ .learn-more__panel {
731
+ display: grid;
732
+ grid-template-rows: 0fr;
733
+ visibility: hidden;
734
+ transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
735
+ }
736
+ .learn-more__panel--open {
737
+ grid-template-rows: 1fr;
738
+ visibility: visible;
739
+ transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
740
+ }
741
+ .learn-more__panel-inner {
742
+ min-height: 0;
743
+ overflow: hidden;
744
+ }
661
745
  .learn-more__questions {
662
746
  margin: 0;
663
- padding: 0;
747
+ padding: 0 0 4px;
664
748
  list-style: none;
665
749
  }
666
750
  .learn-more__questions li {
667
751
  border-bottom: 1px solid var(--as-border);
668
752
  }
753
+ .learn-more__questions li:last-child {
754
+ border-bottom: 0;
755
+ }
669
756
  .learn-more__questions button {
670
757
  appearance: none;
671
758
  display: flex;
672
759
  align-items: center;
673
- justify-content: space-between;
674
- gap: 14px;
760
+ gap: var(--as-discovery-row-gap);
675
761
  width: 100%;
676
- min-height: 46px;
677
- padding: 12px;
762
+ min-height: var(--as-discovery-row-min-height);
763
+ padding: var(--as-discovery-row-padding);
678
764
  border: 0;
679
765
  border-radius: 6px;
680
766
  background: transparent;
681
767
  color: var(--as-text);
682
768
  text-align: left;
683
769
  font: inherit;
684
- font-size: 14px;
685
- line-height: 1.5;
770
+ font-size: var(--as-discovery-row-font-size);
771
+ font-weight: var(--as-discovery-row-font-weight);
772
+ line-height: var(--as-discovery-row-line-height);
686
773
  cursor: pointer;
687
774
  }
688
- .learn-more__questions span {
775
+ .learn-more__question-icon {
776
+ display: inline-flex;
777
+ flex: 0 0 18px;
778
+ color: var(--as-text-muted);
779
+ }
780
+ .learn-more__question-text {
689
781
  min-width: 0;
782
+ flex: 1;
690
783
  overflow-wrap: anywhere;
691
784
  }
692
- .learn-more__questions svg {
785
+ .learn-more__question-arrow {
693
786
  width: 18px;
694
787
  height: 18px;
695
788
  flex-shrink: 0;
696
- color: var(--as-brand);
789
+ color: var(--as-text-muted);
697
790
  }
698
- .learn-more__questions button:hover:not(:disabled) {
791
+ .learn-more .learn-more__questions button:hover:not(:disabled) {
699
792
  background: var(--as-brand-soft);
793
+ color: var(--as-brand);
794
+ }
795
+ .learn-more .learn-more__questions button:hover:not(:disabled) .learn-more__question-arrow {
796
+ color: var(--as-brand);
700
797
  }
701
798
  .learn-more__questions button:focus-visible {
702
- outline: 2px solid var(--as-brand);
703
- outline-offset: 2px;
799
+ outline: none;
800
+ box-shadow: var(--as-focus-inset-ring);
704
801
  }
705
802
  .learn-more__questions button:disabled {
706
803
  opacity: 0.5;
707
804
  cursor: default;
708
805
  }
806
+ @media (prefers-reduced-motion: reduce) {
807
+ .learn-more__panel {
808
+ transition: none;
809
+ }
810
+ .learn-more__chevron {
811
+ transition: none;
812
+ }
813
+ }
709
814
 
710
815
  /* src/react/components/SearchReferences/SearchReferences.css */
711
816
  .search-references {
@@ -732,22 +837,30 @@ summary.agent-transcript__activity-heading::before {
732
837
  }
733
838
  .search-references__list {
734
839
  display: grid;
735
- gap: 6px;
736
840
  margin: 0;
737
841
  padding: 0;
738
842
  list-style: none;
739
843
  }
844
+ .search-references__list > li {
845
+ border-bottom: 1px solid var(--as-border);
846
+ }
847
+ .search-references__list > li:last-child {
848
+ border-bottom: 0;
849
+ }
740
850
  .search-references__source {
741
851
  display: flex;
742
852
  min-width: 0;
743
- min-height: 52px;
853
+ min-height: var(--as-discovery-row-min-height);
744
854
  box-sizing: border-box;
745
855
  align-items: center;
746
- gap: 10px;
747
- padding: 12px 0;
748
- border-bottom: 1px solid var(--as-border);
856
+ gap: var(--as-discovery-row-gap);
857
+ padding: var(--as-discovery-row-padding);
858
+ border-radius: 6px;
749
859
  background: transparent;
750
860
  color: var(--as-text);
861
+ font-size: var(--as-discovery-row-font-size);
862
+ font-weight: var(--as-discovery-row-font-weight);
863
+ line-height: var(--as-discovery-row-line-height);
751
864
  text-decoration: none;
752
865
  }
753
866
  .search-references__icon {
@@ -755,24 +868,17 @@ summary.agent-transcript__activity-heading::before {
755
868
  flex: 0 0 18px;
756
869
  color: var(--as-text-muted);
757
870
  }
758
- .search-references__copy {
759
- display: grid;
871
+ .search-references__icon img {
872
+ width: 18px;
873
+ height: 18px;
874
+ border-radius: 4px;
875
+ object-fit: contain;
876
+ }
877
+ .search-references__title {
760
878
  min-width: 0;
761
879
  flex: 1;
762
- gap: 2px;
763
- }
764
- .search-references__title,
765
- .search-references__domain {
766
880
  overflow-wrap: anywhere;
767
- line-height: 1.4;
768
- }
769
- .search-references__title {
770
- font-size: 13px;
771
- font-weight: 500;
772
- }
773
- .search-references__domain {
774
- color: var(--as-text-muted);
775
- font-size: 11px;
881
+ font: inherit;
776
882
  }
777
883
  .search-references__actions {
778
884
  display: flex;
@@ -796,16 +902,23 @@ summary.agent-transcript__activity-heading::before {
796
902
  overflow-wrap: anywhere;
797
903
  text-decoration: none;
798
904
  }
799
- .search-references__source[href]:hover,
800
- .search-references__cta:hover {
905
+ .search-references__list .search-references__source[href]:hover,
906
+ .search-references .search-references__cta:hover {
801
907
  background: var(--as-brand-soft);
802
908
  color: var(--as-brand);
803
909
  }
910
+ .search-references__list .search-references__source[href]:hover .search-references__row-arrow {
911
+ color: var(--as-brand);
912
+ }
804
913
  .search-references a:focus-visible,
805
914
  .search-references summary:focus-visible {
806
915
  outline: 2px solid var(--as-brand);
807
916
  outline-offset: 2px;
808
917
  }
918
+ .search-references__list .search-references__source:focus-visible {
919
+ outline: none;
920
+ box-shadow: var(--as-focus-inset-ring);
921
+ }
809
922
  .message-bubble__text:has(.search-references) {
810
923
  width: 100%;
811
924
  }
@@ -813,7 +926,7 @@ summary.agent-transcript__activity-heading::before {
813
926
  .search-references__list > li {
814
927
  min-width: 0;
815
928
  }
816
- .search-references__external {
929
+ .search-references__row-arrow {
817
930
  width: 18px;
818
931
  height: 18px;
819
932
  flex-shrink: 0;
@@ -941,13 +1054,17 @@ summary.agent-transcript__activity-heading::before {
941
1054
  }
942
1055
  .composer__field {
943
1056
  display: flex;
944
- align-items: center;
1057
+ align-items: flex-end;
945
1058
  gap: 6px;
946
1059
  padding: 5px 5px 5px 14px;
947
1060
  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
948
1061
  border-radius: 999px;
949
1062
  background: var(--as-surface);
950
1063
  box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
1064
+ transition: border-radius 180ms cubic-bezier(0.22, 1, 0.36, 1);
1065
+ }
1066
+ .composer--multiline .composer__field {
1067
+ border-radius: 20px;
951
1068
  }
952
1069
  .composer__field:focus-within {
953
1070
  border-color: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));
@@ -1004,7 +1121,7 @@ summary.agent-transcript__activity-heading::before {
1004
1121
  outline-offset: 2px;
1005
1122
  }
1006
1123
  .composer--dock .composer__field {
1007
- align-items: center;
1124
+ align-items: flex-end;
1008
1125
  padding: 5px 5px 5px 14px;
1009
1126
  background: var(--as-surface);
1010
1127
  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
@@ -1015,6 +1132,9 @@ summary.agent-transcript__activity-heading::before {
1015
1132
  border-color: color-mix(in srgb, var(--as-brand) 42%, var(--as-border));
1016
1133
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 10%, transparent);
1017
1134
  }
1135
+ .composer--dock.composer--multiline .composer__field {
1136
+ border-radius: 24px;
1137
+ }
1018
1138
  .composer--dock .composer__input {
1019
1139
  padding: 11px 0;
1020
1140
  font-size: 15px;
@@ -1223,6 +1343,9 @@ summary.agent-transcript__activity-heading::before {
1223
1343
  .composer--form .composer__sheet {
1224
1344
  animation: none;
1225
1345
  }
1346
+ .composer__field {
1347
+ transition: none;
1348
+ }
1226
1349
  .composer__send {
1227
1350
  transition: none;
1228
1351
  }
@@ -1308,7 +1431,10 @@ summary.agent-transcript__activity-heading::before {
1308
1431
  color 0.15s ease;
1309
1432
  word-break: break-word;
1310
1433
  }
1311
- .followups__chip:hover:not(:disabled) {
1434
+ .followups .followups__chip {
1435
+ width: auto;
1436
+ }
1437
+ .followups .followups__chip:hover:not(:disabled) {
1312
1438
  border-color: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
1313
1439
  background: var(--as-brand-soft);
1314
1440
  color: var(--as-brand);
@@ -1668,26 +1794,25 @@ summary.agent-transcript__activity-heading::before {
1668
1794
  width: 100%;
1669
1795
  max-width: 100%;
1670
1796
  }
1671
- .message-bubble__agent-row {
1672
- display: grid;
1797
+ .message-bubble__agent-stack {
1798
+ display: flex;
1673
1799
  width: 100%;
1674
- grid-template-columns: 24px minmax(0, 1fr);
1800
+ flex-direction: column;
1675
1801
  align-items: flex-start;
1676
- gap: 10px;
1802
+ gap: 8px;
1677
1803
  }
1678
1804
  .message-bubble__agent-avatar {
1679
1805
  position: relative;
1680
1806
  display: inline-flex;
1681
- width: 24px;
1682
- height: 24px;
1807
+ width: var(--as-brand-mark-size-compact);
1808
+ height: var(--as-brand-mark-size-compact);
1683
1809
  align-items: center;
1684
1810
  justify-content: center;
1685
1811
  overflow: hidden;
1686
- margin-top: 1px;
1687
1812
  border-radius: 8px;
1688
1813
  background: var(--as-surface-muted);
1689
1814
  }
1690
- .message-bubble__agent-avatar img {
1815
+ .message-bubble__agent-avatar:not(.message-bubble__agent-avatar--wide) img {
1691
1816
  position: absolute;
1692
1817
  inset: 0;
1693
1818
  width: 100%;
@@ -1696,6 +1821,28 @@ summary.agent-transcript__activity-heading::before {
1696
1821
  background: var(--as-surface);
1697
1822
  object-fit: contain;
1698
1823
  }
1824
+ .message-bubble__agent-avatar--wide {
1825
+ width: auto;
1826
+ height: auto;
1827
+ min-width: 0;
1828
+ max-width: var(--as-brand-wordmark-message-max-width);
1829
+ flex-shrink: 1;
1830
+ padding: 0;
1831
+ overflow: hidden;
1832
+ border: 0;
1833
+ background: transparent;
1834
+ }
1835
+ .message-bubble__agent-avatar--wide img {
1836
+ position: static;
1837
+ display: block;
1838
+ width: auto;
1839
+ max-width: var(--as-brand-wordmark-message-max-width);
1840
+ height: var(--as-brand-wordmark-message-height);
1841
+ border-radius: 0;
1842
+ background: transparent;
1843
+ object-fit: contain;
1844
+ object-position: left center;
1845
+ }
1699
1846
  .message-bubble__text {
1700
1847
  margin: 0;
1701
1848
  padding: 10px 12px;
@@ -1724,24 +1871,35 @@ summary.agent-transcript__activity-heading::before {
1724
1871
  }
1725
1872
  .message-bubble__sources {
1726
1873
  display: grid;
1727
- gap: 6px;
1874
+ gap: 0;
1728
1875
  margin: 10px 0 0;
1729
1876
  padding: 10px 0 0;
1730
1877
  border-top: 1px solid var(--as-border);
1731
1878
  list-style: none;
1732
1879
  }
1880
+ .message-bubble__sources > li {
1881
+ border-bottom: 1px solid var(--as-border);
1882
+ }
1883
+ .message-bubble__sources > li:last-child {
1884
+ border-bottom: 0;
1885
+ }
1733
1886
  .message-bubble__sources a {
1734
1887
  display: flex;
1735
1888
  min-width: 0;
1889
+ min-height: var(--as-discovery-row-min-height);
1736
1890
  align-items: center;
1737
- gap: 8px;
1891
+ gap: var(--as-discovery-row-gap);
1892
+ padding: var(--as-discovery-row-padding);
1893
+ border-radius: 6px;
1738
1894
  color: var(--as-text);
1739
- font-size: 12.5px;
1740
- font-weight: 600;
1895
+ font-size: var(--as-discovery-row-font-size);
1896
+ font-weight: var(--as-discovery-row-font-weight);
1897
+ line-height: var(--as-discovery-row-line-height);
1741
1898
  text-decoration: none;
1742
1899
  }
1743
1900
  .message-bubble__sources a:hover {
1744
1901
  color: var(--as-brand);
1902
+ background: var(--as-brand-soft);
1745
1903
  }
1746
1904
  .message-bubble__source-icon {
1747
1905
  display: grid;
@@ -1807,6 +1965,27 @@ summary.agent-transcript__activity-heading::before {
1807
1965
  text-decoration: underline;
1808
1966
  text-underline-offset: 2px;
1809
1967
  }
1968
+ .message-bubble__markdown :is(a[href], [data-streamdown=link]):focus-visible {
1969
+ outline: none;
1970
+ border-radius: 4px;
1971
+ box-shadow: var(--as-focus-inset-ring);
1972
+ box-decoration-break: clone;
1973
+ -webkit-box-decoration-break: clone;
1974
+ padding: var(--as-focus-link-padding-block) var(--as-focus-link-padding-inline);
1975
+ margin: 0;
1976
+ }
1977
+ .message-bubble__markdown ul > li > :is(a[href], [data-streamdown=link]):focus-visible {
1978
+ border-radius: 6px;
1979
+ }
1980
+ .message-bubble__sources a:focus-visible {
1981
+ outline: none;
1982
+ border-radius: 6px;
1983
+ box-shadow: var(--as-focus-inset-ring);
1984
+ }
1985
+ .agent-rail .message-bubble__markdown :is(a[href], [data-streamdown=link]):focus-visible,
1986
+ .agent-rail .message-bubble__sources a:focus-visible {
1987
+ outline: none;
1988
+ }
1810
1989
  .message-bubble__markdown code {
1811
1990
  font-family:
1812
1991
  ui-monospace,
@@ -1836,10 +2015,18 @@ summary.agent-transcript__activity-heading::before {
1836
2015
  color: var(--as-text-muted);
1837
2016
  }
1838
2017
  .message-bubble__speaker {
1839
- display: block;
1840
- margin-bottom: 0.25rem;
1841
- font-size: 0.75rem;
1842
- opacity: 0.75;
2018
+ margin: 0;
2019
+ font-size: 12px;
2020
+ font-weight: 650;
2021
+ letter-spacing: 0.01em;
2022
+ color: var(--as-text-muted);
2023
+ }
2024
+ .message-bubble__agent-header {
2025
+ display: inline-flex;
2026
+ max-width: 100%;
2027
+ min-height: var(--as-brand-mark-size-compact);
2028
+ align-items: center;
2029
+ gap: 4px;
1843
2030
  }
1844
2031
 
1845
2032
  /* src/react/components/MessageActions/MessageActions.css */
@@ -1942,7 +2129,7 @@ summary.agent-transcript__activity-heading::before {
1942
2129
  line-height: 1.3;
1943
2130
  text-align: left;
1944
2131
  }
1945
- .agent-message-actions__menu-item:hover {
2132
+ .agent-message-actions__menu .agent-message-actions__menu-item:hover {
1946
2133
  background: var(--as-surface-muted);
1947
2134
  }
1948
2135
  .agent-message-actions__menu-item:focus-visible {
@@ -2669,6 +2856,13 @@ summary.agent-transcript__activity-heading::before {
2669
2856
  .agent-rail :where(p, span, strong, button, label) {
2670
2857
  text-decoration: none;
2671
2858
  }
2859
+ .agent-rail :is(a[href], button:not(:disabled), summary) {
2860
+ cursor: pointer;
2861
+ }
2862
+ .agent-rail :is(a[href], button:not(:disabled), summary) :is(*, svg) {
2863
+ cursor: inherit;
2864
+ pointer-events: none;
2865
+ }
2672
2866
  .agent-rail:focus {
2673
2867
  outline: none;
2674
2868
  }
@@ -2700,7 +2894,7 @@ summary.agent-transcript__activity-heading::before {
2700
2894
  min-width: 0;
2701
2895
  align-items: center;
2702
2896
  justify-content: center;
2703
- gap: 8px;
2897
+ gap: var(--as-brand-identity-gap);
2704
2898
  }
2705
2899
  .agent-rail__brand-label {
2706
2900
  overflow: hidden;
@@ -2722,10 +2916,10 @@ summary.agent-transcript__activity-heading::before {
2722
2916
  background: var(--as-surface-muted);
2723
2917
  }
2724
2918
  .agent-rail__brand-mark {
2725
- width: 25px;
2726
- height: 25px;
2727
- flex-basis: 25px;
2728
- border-radius: 8px;
2919
+ width: var(--as-brand-mark-size);
2920
+ height: var(--as-brand-mark-size);
2921
+ flex-basis: var(--as-brand-mark-size);
2922
+ border-radius: var(--as-radius-sm);
2729
2923
  font-size: 11px;
2730
2924
  }
2731
2925
  .agent-rail__brand-logo {
@@ -2737,6 +2931,28 @@ summary.agent-transcript__activity-heading::before {
2737
2931
  background: var(--as-surface);
2738
2932
  object-fit: contain;
2739
2933
  }
2934
+ .agent-rail__brand-mark--wide {
2935
+ width: auto;
2936
+ min-width: 0;
2937
+ max-width: var(--as-brand-wordmark-header-max-width);
2938
+ flex: 0 1 auto;
2939
+ flex-basis: auto;
2940
+ padding: 0;
2941
+ overflow: hidden;
2942
+ border: 0;
2943
+ background: transparent;
2944
+ }
2945
+ .agent-rail__brand-mark--wide .agent-rail__brand-logo {
2946
+ position: static;
2947
+ display: block;
2948
+ width: auto;
2949
+ max-width: var(--as-brand-wordmark-header-max-width);
2950
+ height: var(--as-brand-wordmark-header-height);
2951
+ border-radius: 0;
2952
+ background: transparent;
2953
+ object-fit: contain;
2954
+ object-position: left center;
2955
+ }
2740
2956
  .agent-rail__brand-spacer {
2741
2957
  width: 36px;
2742
2958
  height: 36px;
@@ -2819,7 +3035,7 @@ summary.agent-transcript__activity-heading::before {
2819
3035
  flex-direction: column;
2820
3036
  gap: 20px;
2821
3037
  margin: 0 auto;
2822
- padding: 24px 20px 32px;
3038
+ padding: 16px 16px 32px;
2823
3039
  }
2824
3040
  .agent-rail__turn-block {
2825
3041
  display: flex;
@@ -2889,7 +3105,7 @@ summary.agent-transcript__activity-heading::before {
2889
3105
  position: relative;
2890
3106
  z-index: 1;
2891
3107
  flex-shrink: 0;
2892
- padding: 13px 20px 14px;
3108
+ padding: 13px 16px 14px;
2893
3109
  border-top: 1px solid var(--as-hairline);
2894
3110
  background: var(--as-surface);
2895
3111
  }
@@ -2964,7 +3180,7 @@ summary.agent-transcript__activity-heading::before {
2964
3180
  }
2965
3181
  .agent-rail__disclaimer {
2966
3182
  flex-shrink: 0;
2967
- padding: 10px 20px 8px;
3183
+ padding: 8px 16px 6px;
2968
3184
  background: var(--as-surface);
2969
3185
  }
2970
3186
  .agent-rail__disclaimer p {
@@ -3014,13 +3230,13 @@ summary.agent-transcript__activity-heading::before {
3014
3230
  }
3015
3231
  .agent-rail--expanded .agent-rail__thread {
3016
3232
  max-width: 760px;
3017
- padding: 36px 24px 48px;
3233
+ padding: 24px 24px 48px;
3018
3234
  }
3019
3235
  .agent-rail--expanded .agent-rail__welcome {
3020
3236
  width: 100%;
3021
3237
  }
3022
3238
  .agent-rail--expanded .agent-rail__composer-wrap {
3023
- padding: 16px 24px 18px;
3239
+ padding: 16px 24px 16px;
3024
3240
  }
3025
3241
  .agent-rail--expanded .agent-rail__disclaimer,
3026
3242
  .agent-rail--expanded .composer,
@@ -3136,47 +3352,84 @@ summary.agent-transcript__activity-heading::before {
3136
3352
  animation: none;
3137
3353
  transition: none;
3138
3354
  }
3355
+ .agent-rail__sources-panel {
3356
+ transition: none;
3357
+ }
3358
+ .agent-rail__sources-button-chevron {
3359
+ transition: none;
3360
+ }
3139
3361
  }
3140
3362
  .agent-rail__handoff {
3141
- padding: 0.625rem 1rem;
3142
- border-top: 1px solid var(--as-border);
3143
3363
  display: flex;
3144
- gap: 0.5rem;
3145
3364
  align-items: center;
3146
- justify-content: space-between;
3147
- flex-wrap: wrap;
3148
- font-size: 0.8125rem;
3365
+ gap: 10px;
3366
+ padding: 10px 16px;
3367
+ border-top: 1px solid var(--as-hairline);
3368
+ background: transparent;
3369
+ font-size: 12px;
3370
+ line-height: 1.45;
3149
3371
  color: var(--as-text-muted);
3150
3372
  }
3151
- .agent-rail__handoff p {
3373
+ .agent-rail__handoff-dot {
3374
+ flex: 0 0 auto;
3375
+ width: 6px;
3376
+ height: 6px;
3377
+ border-radius: 999px;
3378
+ background: var(--as-success);
3379
+ }
3380
+ .agent-rail__handoff-status {
3152
3381
  margin: 0;
3382
+ min-width: 0;
3383
+ flex: 1;
3153
3384
  }
3154
- .agent-rail__handoff button {
3155
- border: 0;
3156
- border-radius: 0.375rem;
3385
+ .agent-rail__handoff-status strong {
3386
+ color: var(--as-text);
3387
+ font-weight: 650;
3388
+ }
3389
+ .agent-rail__handoff-cta,
3390
+ .agent-rail__handoff-action {
3391
+ appearance: none;
3392
+ flex: 0 0 auto;
3393
+ min-height: 32px;
3394
+ padding: 6px 12px;
3395
+ border: 1px solid var(--as-border);
3396
+ border-radius: 999px;
3157
3397
  background: transparent;
3158
3398
  color: var(--as-text);
3159
- cursor: pointer;
3160
3399
  font: inherit;
3161
- font-weight: 600;
3162
- padding: 0.5rem;
3163
- min-height: 2.5rem;
3400
+ font-size: 12px;
3401
+ font-weight: 650;
3402
+ cursor: pointer;
3403
+ transition: border-color 150ms ease, background 150ms ease;
3164
3404
  }
3165
- .agent-rail__handoff button:hover {
3405
+ .agent-rail__handoff-cta:hover:not(:disabled),
3406
+ .agent-rail__handoff-action:hover:not(:disabled) {
3407
+ border-color: color-mix(in srgb, var(--as-brand) 40%, var(--as-border));
3166
3408
  background: var(--as-surface-muted);
3167
3409
  }
3168
- .agent-rail__handoff button:focus-visible {
3410
+ .agent-rail__handoff-cta:focus-visible,
3411
+ .agent-rail__handoff-action:focus-visible {
3169
3412
  outline: 2px solid var(--as-brand);
3170
3413
  outline-offset: 2px;
3171
3414
  }
3172
- .agent-rail__handoff button:disabled {
3173
- opacity: 0.5;
3415
+ .agent-rail__handoff-cta:disabled,
3416
+ .agent-rail__handoff-action:disabled {
3417
+ opacity: 0.55;
3174
3418
  cursor: default;
3175
3419
  }
3176
- .agent-rail__handoff [role=alert] {
3177
- width: 100%;
3420
+ .agent-rail__handoff-error {
3421
+ display: flex;
3422
+ flex: 1;
3423
+ align-items: center;
3424
+ justify-content: space-between;
3425
+ gap: 8px;
3178
3426
  color: var(--as-danger);
3179
3427
  }
3428
+ .agent-rail__answer-footer {
3429
+ display: flex;
3430
+ flex-direction: column;
3431
+ width: 100%;
3432
+ }
3180
3433
  .agent-rail__answer-actions {
3181
3434
  display: flex;
3182
3435
  align-items: center;
@@ -3189,18 +3442,28 @@ summary.agent-transcript__activity-heading::before {
3189
3442
  }
3190
3443
  .agent-rail__sources-button {
3191
3444
  appearance: none;
3445
+ display: inline-flex;
3446
+ align-items: center;
3447
+ justify-content: flex-start;
3448
+ gap: 3px;
3192
3449
  margin-left: auto;
3193
3450
  min-height: 44px;
3194
- padding: 8px 4px;
3451
+ padding: 10px 16px;
3195
3452
  border: 0;
3196
- border-radius: 6px;
3453
+ border-radius: 8px;
3197
3454
  background: transparent;
3198
3455
  color: var(--as-text-muted);
3199
3456
  font: inherit;
3200
- font-size: 12px;
3457
+ font-size: 12.5px;
3458
+ font-weight: 650;
3201
3459
  cursor: pointer;
3460
+ transition: background 150ms ease, color 150ms ease;
3202
3461
  }
3203
- .agent-rail__sources-button:hover {
3462
+ .agent-rail__answer-actions .agent-rail__sources-button {
3463
+ width: auto;
3464
+ background: transparent;
3465
+ }
3466
+ .agent-rail__answer-actions .agent-rail__sources-button:hover {
3204
3467
  color: var(--as-brand);
3205
3468
  background: var(--as-brand-soft);
3206
3469
  }
@@ -3208,14 +3471,44 @@ summary.agent-transcript__activity-heading::before {
3208
3471
  outline: 2px solid var(--as-brand);
3209
3472
  outline-offset: 2px;
3210
3473
  }
3211
- .agent-receipt-dialog__count {
3212
- margin-left: 8px;
3213
- color: var(--as-text-muted);
3214
- font-weight: 400;
3474
+ .agent-rail__sources-button-chevron {
3475
+ display: inline-flex;
3476
+ transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
3477
+ }
3478
+ .agent-rail__sources-button-chevron svg {
3479
+ width: 14px;
3480
+ height: 14px;
3481
+ }
3482
+ .agent-rail__sources-button[aria-expanded=true] .agent-rail__sources-button-chevron {
3483
+ transform: rotate(180deg);
3484
+ }
3485
+ .agent-rail__sources-panel {
3486
+ display: grid;
3487
+ width: 100%;
3488
+ grid-template-rows: 0fr;
3489
+ visibility: hidden;
3490
+ transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
3491
+ }
3492
+ .agent-rail__sources-panel--open {
3493
+ grid-template-rows: 1fr;
3494
+ visibility: visible;
3495
+ transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
3496
+ }
3497
+ .agent-rail__sources-panel-inner {
3498
+ min-height: 0;
3499
+ overflow: hidden;
3500
+ }
3501
+ .agent-rail__sources-panel-inner > .search-references {
3502
+ margin-top: 2px;
3503
+ }
3504
+ .agent-rail .learn-more .learn-more__toggle {
3505
+ width: auto;
3506
+ background: transparent;
3507
+ padding-left: 0;
3215
3508
  }
3216
- .agent-rail__turn-block:has(.message-bubble__agent-row) > :is(.agent-rail__answer-actions, .learn-more, .search-references) {
3217
- margin-left: 34px;
3218
- width: calc(100% - 34px);
3509
+ .agent-rail .learn-more .learn-more__toggle:hover {
3510
+ color: var(--as-brand);
3511
+ background: var(--as-brand-soft);
3219
3512
  }
3220
3513
 
3221
3514
  /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */
@@ -3288,10 +3581,6 @@ summary.agent-transcript__activity-heading::before {
3288
3581
  border-radius: inherit;
3289
3582
  background: var(--pill-orb-from, var(--tab-fill));
3290
3583
  }
3291
- .assist-edge-tab__mark--chip > .assist-edge-tab__logo {
3292
- width: 20px;
3293
- height: 20px;
3294
- }
3295
3584
  .assist-edge-tab__custom-icon {
3296
3585
  width: 18px;
3297
3586
  height: 18px;
@@ -3485,15 +3774,16 @@ summary.agent-transcript__activity-heading::before {
3485
3774
  --tab-ink: #1f2937;
3486
3775
  --tab-line: transparent;
3487
3776
  --pill-brand: var(--as-brand, #6366f1);
3777
+ --pill-accent: var(--as-border, var(--as-brand, #6366f1));
3488
3778
  --pill-fill: #ffffff;
3489
3779
  --pill-title: #1f2937;
3490
3780
  --pill-subtitle: #9ca3af;
3491
- --pill-glow-strong: color-mix(in srgb, var(--pill-brand) 40%, transparent);
3492
- --pill-glow-soft: color-mix(in srgb, var(--pill-brand) 10%, transparent);
3493
- --pill-glow-shadow: color-mix(in srgb, var(--pill-brand) 15%, transparent);
3781
+ --pill-glow-strong: color-mix(in srgb, var(--pill-accent) 40%, transparent);
3782
+ --pill-glow-soft: color-mix(in srgb, var(--pill-accent) 10%, transparent);
3783
+ --pill-glow-shadow: color-mix(in srgb, var(--pill-accent) 15%, transparent);
3494
3784
  --pill-orb-end: color-mix(in srgb, var(--pill-brand) 45%, #3b82f6);
3495
3785
  gap: 12px;
3496
- border: 1.5px solid var(--pill-brand);
3786
+ border: 1.5px solid var(--pill-accent);
3497
3787
  background-color: #ffffff;
3498
3788
  background-image: none;
3499
3789
  color: var(--pill-title);
@@ -3535,9 +3825,9 @@ summary.agent-transcript__activity-heading::before {
3535
3825
  }
3536
3826
  .assist-edge-tab__mark--chip {
3537
3827
  overflow: hidden;
3538
- width: 36px;
3539
- height: 36px;
3540
- flex-basis: 36px;
3828
+ width: 48px;
3829
+ height: 48px;
3830
+ flex: 0 0 48px;
3541
3831
  border: none;
3542
3832
  border-radius: 50%;
3543
3833
  background:
@@ -3548,11 +3838,33 @@ summary.agent-transcript__activity-heading::before {
3548
3838
  color: #ffffff;
3549
3839
  box-shadow: none;
3550
3840
  }
3841
+ .assist-edge-tab__mark--chip:has(> .assist-edge-tab__logo),
3842
+ .assist-edge-tab__mark--chip:has(> .assist-edge-tab__custom-icon) {
3843
+ background: var(--pill-logo-surface, #ffffff);
3844
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-accent, var(--pill-brand)) 24%, transparent);
3845
+ }
3846
+ .assist-edge-tab__mark--chip:has(> .assist-edge-tab__logo--wide) {
3847
+ width: auto;
3848
+ min-width: 48px;
3849
+ max-width: 120px;
3850
+ padding: 0 8px;
3851
+ border-radius: 999px;
3852
+ }
3551
3853
  .assist-edge-tab__mark--chip > svg,
3552
3854
  .assist-edge-tab__mark--chip > .assist-edge-tab__custom-icon,
3553
3855
  .assist-edge-tab__mark--chip > .assist-edge-tab__logo {
3554
3856
  position: relative;
3555
3857
  z-index: 1;
3858
+ flex-shrink: 0;
3859
+ object-fit: contain;
3860
+ object-position: center;
3861
+ }
3862
+ .assist-edge-tab__mark--chip > .assist-edge-tab__logo--chip,
3863
+ .assist-edge-tab__mark--chip > .assist-edge-tab__custom-icon--chip {
3864
+ width: auto;
3865
+ height: auto;
3866
+ max-width: 100%;
3867
+ max-height: 100%;
3556
3868
  }
3557
3869
  .assist-edge-tab__mark--chip > .assist-edge-tab__chat-spark {
3558
3870
  color: #ffffff;