@webless/agent 0.3.1 → 0.4.0

package/dist/react.css

@@ -24,7 +24,7 @@
     "Segoe UI",
     sans-serif;
   --as-font-display: "Space Grotesk", sans-serif;
-  --as-shadow-rail: 0 0 0 1px rgb(42 51 70 / 0.06), -8px 0 24px -12px rgb(18 4 62 / 0.12);
+  --as-shadow-rail: 0 0 0 1px color-mix(in srgb, var(--as-text) 6%, transparent), -8px 0 28px -14px color-mix(in srgb, var(--as-text) 22%, transparent);
   --as-z-rail: 40;
   --as-z-mobile: 1000;
 }
@@ -63,6 +63,7 @@
   inset: 0;
   pointer-events: none;
   z-index: var(--as-z-mobile);
+  isolation: isolate;
 }
 .webless-agent-root__shell {
   position: fixed;
@@ -105,24 +106,25 @@
   pointer-events: none;
   z-index: 1;
 }
-.webless-agent-root__shell--expanded:not(.webless-agent-root__shell--collapsed) .webless-agent-root__backdrop {
+.webless-agent-root__backdrop {
   position: fixed;
   inset: 0;
   z-index: 0;
   border: none;
   padding: 0;
   margin: 0;
-  background: rgb(18 4 62 / 0.18);
+  background: color-mix(in srgb, var(--as-text) 18%, transparent);
   cursor: pointer;
   pointer-events: auto;
 }
+.webless-agent-root__backdrop--mobile {
+  background: color-mix(in srgb, var(--as-text) 24%, transparent);
+  -webkit-backdrop-filter: blur(1.5px);
+  backdrop-filter: blur(1.5px);
+  touch-action: none;
+}
 .webless-agent-root__shell--expanded:not(.webless-agent-root__shell--collapsed) .agent-rail {
   pointer-events: auto;
-  width: 95vw;
-  min-width: 0;
-  max-width: none;
-  height: 95dvh;
-  max-height: 95dvh;
 }
 .webless-agent-root__rail-slot .agent-rail {
   min-width: 0;
@@ -142,9 +144,13 @@
     height: 100%;
     transform: none;
     opacity: 1;
-    pointer-events: auto;
+    pointer-events: none;
     z-index: calc(var(--as-z-mobile) + 1);
   }
+  .webless-agent-root__rail-slot .agent-rail {
+    width: 100%;
+    pointer-events: auto;
+  }
 }
 
 /* src/react/styles/page-shift.css */
@@ -279,45 +285,52 @@ html.webless-agent-page-shift {
 
 /* src/react/components/AgentActivityBubble/AgentActivityBubble.css */
 .agent-activity-bubble {
-  align-self: flex-start;
+  display: flex;
   width: 100%;
   max-width: 100%;
-  display: flex;
   flex-direction: column;
+  align-self: flex-start;
   align-items: stretch;
-  gap: 8px;
+  gap: 9px;
 }
 .agent-activity-bubble__status {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 9px;
   margin: 0;
   color: var(--as-text-muted);
   font-size: 12px;
   font-weight: 650;
+  line-height: 1.4;
 }
 .agent-activity-bubble__pulse {
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
+  flex: 0 0 8px;
   border-radius: 999px;
   background: var(--as-success);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-success) 10%, transparent);
 }
 .agent-activity-bubble__pulse.is-active {
   background: var(--as-brand);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--as-brand) 12%, transparent);
   animation: agent-activity-pulse 1.8s ease-in-out infinite;
 }
+.agent-activity-bubble__pulse.is-error {
+  background: var(--as-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-danger) 10%, transparent);
+}
 .agent-activity-bubble__details {
   overflow: hidden;
   border: 1px solid var(--as-border);
-  border-radius: var(--as-radius-md);
-  background: color-mix(in srgb, var(--as-surface-muted) 62%, var(--as-surface));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--as-surface-muted) 48%, var(--as-surface));
 }
 .agent-activity-bubble__details summary {
   display: flex;
+  min-height: 42px;
   align-items: center;
-  min-height: 36px;
-  padding: 0 11px;
+  padding: 0 13px;
   color: var(--as-text-muted);
   cursor: pointer;
   font-size: 12px;
@@ -328,11 +341,20 @@ html.webless-agent-page-shift {
   display: none;
 }
 .agent-activity-bubble__details summary::after {
-  content: "+";
+  width: 20px;
+  height: 20px;
   margin-left: auto;
+  border-radius: 999px;
   color: var(--as-text-subtle);
-  font-size: 16px;
+  content: "+";
+  font-size: 17px;
   font-weight: 400;
+  line-height: 19px;
+  text-align: center;
+}
+.agent-activity-bubble__details summary:hover::after {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
 }
 .agent-activity-bubble__details[open] summary::after {
   content: "\2212";
@@ -341,68 +363,119 @@ html.webless-agent-page-shift {
   display: grid;
   gap: 0;
   margin: 0;
-  padding: 0 11px 10px;
+  padding: 1px 13px 13px;
   list-style: none;
 }
 .agent-activity-bubble__step {
   position: relative;
   display: grid;
-  grid-template-columns: 20px minmax(0, 1fr);
-  gap: 8px;
-  min-height: 36px;
-  padding: 5px 0;
+  min-height: 48px;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 10px;
+  padding: 6px 0;
 }
 .agent-activity-bubble__step:not(:last-child)::after {
   position: absolute;
-  top: 25px;
-  bottom: -5px;
-  left: 7px;
+  top: 32px;
+  bottom: -8px;
+  left: 13px;
   width: 1px;
   background: var(--as-border);
   content: "";
 }
 .agent-activity-bubble__step-icon {
+  position: relative;
+  z-index: 1;
   display: inline-flex;
+  width: 28px;
+  height: 28px;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
+  overflow: hidden;
   border: 1px solid var(--as-border);
-  border-radius: 999px;
+  border-radius: 9px;
   background: var(--as-surface);
-  color: var(--as-success);
-  font-size: 10px;
-  font-weight: 800;
+  color: var(--as-text-muted);
+  font-size: 11px;
+  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;
+  background: var(--as-surface);
+  object-fit: contain;
+}
+.agent-activity-bubble__step[data-kind=specialist] .agent-activity-bubble__step-icon {
+  border-color: color-mix(in srgb, var(--as-brand) 18%, var(--as-border));
+  background: var(--as-brand-soft);
+  color: var(--as-brand);
 }
 .agent-activity-bubble__step[data-state=active] .agent-activity-bubble__step-icon {
-  border: 4px solid color-mix(in srgb, var(--as-brand) 18%, var(--as-surface));
-  background: var(--as-brand);
+  border-color: color-mix(in srgb, var(--as-brand) 36%, var(--as-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-brand) 8%, transparent);
+}
+.agent-activity-bubble__step[data-state=completed] .agent-activity-bubble__step-icon::after {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  display: grid;
+  width: 11px;
+  height: 11px;
+  place-items: center;
+  border: 2px solid var(--as-surface);
+  border-radius: 999px;
+  background: var(--as-success);
+  color: #fff;
+  content: "\2713";
+  font-size: 7px;
+  line-height: 1;
 }
 .agent-activity-bubble__step[data-state=error] .agent-activity-bubble__step-icon {
-  border-color: color-mix(in srgb, var(--as-danger) 30%, transparent);
-  background: color-mix(in srgb, var(--as-danger) 8%, var(--as-surface));
+  border-color: color-mix(in srgb, var(--as-danger) 30%, var(--as-border));
+  background: color-mix(in srgb, var(--as-danger) 7%, var(--as-surface));
   color: var(--as-danger);
 }
 .agent-activity-bubble__step-copy {
   display: grid;
-  gap: 2px;
   min-width: 0;
+  gap: 3px;
+  padding-top: 2px;
+}
+.agent-activity-bubble__step-heading {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 7px;
 }
-.agent-activity-bubble__step-copy strong {
+.agent-activity-bubble__step-heading strong {
   overflow: hidden;
   color: var(--as-text);
   font-size: 12px;
-  font-weight: 650;
+  font-weight: 680;
   line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.agent-activity-bubble__step-copy small {
+.agent-activity-bubble__step-heading small {
+  flex: 0 0 auto;
   color: var(--as-text-subtle);
-  font-size: 11px;
+  font-size: 10px;
+  font-weight: 550;
   line-height: 1.35;
 }
+.agent-activity-bubble__step-detail {
+  color: var(--as-text-subtle);
+  font-size: 11px;
+  line-height: 1.4;
+}
 @keyframes agent-activity-pulse {
   50% {
     opacity: 0.55;
@@ -421,12 +494,13 @@ html.webless-agent-page-shift {
   gap: 6px;
   padding: 6px;
   border: 1px solid var(--as-border);
-  border-radius: var(--as-radius-lg);
-  background: var(--as-surface-muted);
+  border-radius: 16px;
+  background: var(--as-surface);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
 }
 .composer__field:focus-within {
-  border-color: rgb(111 22 255 / 0.35);
-  box-shadow: 0 0 0 3px rgb(111 22 255 / 0.1);
+  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__input {
   flex: 1;
@@ -434,6 +508,7 @@ html.webless-agent-page-shift {
   border: none;
   background: transparent;
   resize: none;
+  field-sizing: content;
   padding: 8px 6px 8px 8px;
   font-size: 13px;
   line-height: 1.45;
@@ -453,7 +528,7 @@ html.webless-agent-page-shift {
   height: 34px;
   border-radius: 999px;
   background: var(--as-brand);
-  color: #fff;
+  color: var(--as-visitor-text);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -474,14 +549,14 @@ html.webless-agent-page-shift {
 .composer--dock .composer__field {
   align-items: center;
   padding: 5px 5px 5px 13px;
-  background: var(--as-surface-muted);
+  background: var(--as-surface);
   border: 1px solid var(--as-border);
   border-radius: 999px;
   box-shadow: none;
 }
 .composer--dock .composer__field:focus-within {
-  border-color: rgb(111 22 255 / 0.35);
-  box-shadow: 0 0 0 3px rgb(111 22 255 / 0.1);
+  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__input {
   padding: 11px 0;
@@ -504,10 +579,11 @@ html.webless-agent-page-shift {
   gap: 8px;
 }
 .followups__label {
-  font-size: 12px;
-  font-weight: 700;
+  font-size: 11px;
+  font-weight: 650;
   color: var(--as-text-subtle);
-  letter-spacing: 0.02em;
+  letter-spacing: 0.055em;
+  text-transform: uppercase;
 }
 .followups__list {
   display: flex;
@@ -520,19 +596,34 @@ html.webless-agent-page-shift {
   background: var(--as-surface);
   color: var(--as-text);
   font-size: 13px;
-  font-weight: 600;
+  position: relative;
+  font-weight: 580;
   line-height: 1.4;
   text-align: left;
-  border-radius: var(--as-radius-sm);
-  padding: 10px 12px;
+  border-radius: 12px;
+  padding: 11px 34px 11px 12px;
   cursor: pointer;
   transition: border-color 0.15s ease, background 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: rgb(111 22 255 / 0.25);
+  border-color: color-mix(in srgb, var(--as-brand) 28%, 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;
   cursor: not-allowed;
@@ -566,13 +657,16 @@ html.webless-agent-page-shift {
   white-space: nowrap;
   text-align: left;
 }
+.followups__chip--dock::after {
+  display: none;
+}
 
 /* src/react/components/MessageBubble/MessageBubble.css */
 .message-bubble {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  max-width: 92%;
+  max-width: 86%;
 }
 .message-bubble--visitor {
   align-self: flex-end;
@@ -586,21 +680,23 @@ html.webless-agent-page-shift {
 .message-bubble__text {
   margin: 0;
   padding: 10px 12px;
-  border-radius: var(--as-radius-md);
-  font-size: 13px;
-  line-height: 1.5;
+  border-radius: 14px;
+  font-size: 14px;
+  line-height: 1.55;
   word-break: break-word;
 }
 .message-bubble--visitor .message-bubble__text {
   background: var(--as-visitor-bubble);
   color: var(--as-visitor-text);
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 5px;
 }
 .message-bubble--agent .message-bubble__text {
-  background: var(--as-surface-muted);
+  width: 100%;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
   color: var(--as-text);
-  border: 1px solid var(--as-border);
-  border-bottom-left-radius: 4px;
 }
 .message-bubble__markdown > :first-child {
   margin-top: 0;
@@ -633,7 +729,7 @@ html.webless-agent-page-shift {
   padding: 0;
   border: 0;
   background: transparent;
-  color: inherit;
+  color: var(--as-brand);
   font: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -652,64 +748,80 @@ html.webless-agent-page-shift {
 /* src/react/components/AgentRail/AgentRail.css */
 .agent-rail {
   --rail-width: var(--as-rail-max-width);
+  position: relative;
+  z-index: var(--as-z-rail);
   display: flex;
-  flex-direction: column;
   width: var(--rail-width);
-  max-width: var(--rail-width);
   min-width: var(--rail-width);
+  max-width: var(--rail-width);
   height: 100%;
   max-height: 100dvh;
+  flex-direction: column;
   overflow: hidden;
-  background: var(--as-surface);
   border-left: 1px solid var(--as-border);
+  background: var(--as-surface);
   box-shadow: var(--as-shadow-rail);
   color: var(--as-text);
   font-family: var(--as-font-body);
-  position: relative;
-  z-index: var(--as-z-rail);
+}
+.agent-rail:focus {
+  outline: none;
 }
 .agent-rail__header {
+  position: relative;
+  z-index: 1;
   flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--as-border);
+  background: color-mix(in srgb, var(--as-surface) 96%, var(--as-surface-muted));
 }
 .agent-rail__brand-row {
   display: grid;
-  grid-template-columns: 32px 1fr 32px;
-  align-items: center;
-  min-height: 32px;
   min-width: 0;
+  min-height: 36px;
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
 }
 .agent-rail__identity {
   grid-column: 2;
-  grid-row: 1;
   display: flex;
+  min-width: 0;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  min-width: 0;
 }
 .agent-rail__brand-label {
   overflow: hidden;
   font-family: var(--as-font-display);
   font-size: 14px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  line-height: 1;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+  line-height: 1.2;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.agent-rail__brand-mark {
+.agent-rail__brand-mark,
+.agent-rail__welcome-mark {
   position: relative;
-  width: 24px;
-  height: 24px;
-  flex: 0 0 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--as-brand);
+  color: var(--as-visitor-text);
+  font-weight: 750;
+}
+.agent-rail__brand-mark {
+  width: 25px;
+  height: 25px;
+  flex-basis: 25px;
   border-radius: 8px;
+  font-size: 11px;
 }
-.agent-rail__brand-logo {
+.agent-rail__brand-logo,
+.agent-rail__welcome-logo {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -718,242 +830,344 @@ html.webless-agent-page-shift {
   background: var(--as-surface);
   object-fit: contain;
 }
-.agent-rail__brand-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--as-brand);
-  color: var(--as-visitor-text);
-  font-size: 11px;
-  font-weight: 750;
-}
 .agent-rail__brand-spacer {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
+}
+.agent-rail__actions {
+  grid-column: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
 }
 .agent-rail__collapse,
 .agent-rail__close,
+.agent-rail__new-chat,
 .agent-rail__expand {
   appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--as-text-subtle);
-  width: 32px;
-  height: 32px;
-  margin: 0;
-  padding: 0;
-  border-radius: 8px;
   display: inline-flex;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--as-text-muted);
   cursor: pointer;
-  flex-shrink: 0;
-  grid-row: 1;
+  transition:
+    background 150ms ease,
+    color 150ms ease,
+    opacity 150ms ease;
 }
 .agent-rail__collapse,
 .agent-rail__close {
   grid-column: 1;
   justify-self: start;
 }
-.agent-rail__expand {
-  grid-column: 3;
-  justify-self: end;
-}
 .agent-rail__collapse:hover,
 .agent-rail__close:hover,
+.agent-rail__new-chat:hover:not(:disabled),
 .agent-rail__expand:hover {
   background: var(--as-surface-muted);
   color: var(--as-text);
 }
+.agent-rail__collapse:focus-visible,
+.agent-rail__close:focus-visible,
+.agent-rail__new-chat:focus-visible,
+.agent-rail__expand:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 1px;
+}
+.agent-rail__new-chat:disabled {
+  opacity: 0.32;
+  cursor: default;
+}
 .agent-rail__collapse svg,
 .agent-rail__close svg,
+.agent-rail__new-chat svg,
 .agent-rail__expand svg {
-  width: 16px;
-  height: 16px;
+  width: 17px;
+  height: 17px;
 }
 .agent-rail__transcript {
-  flex: 1 1 auto;
   min-height: 0;
-  overflow-y: auto;
+  flex: 1 1 auto;
   overflow-x: hidden;
+  overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 14px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+  background: var(--as-surface);
   scroll-behavior: smooth;
+  scrollbar-color: color-mix(in srgb, var(--as-text) 18%, transparent) transparent;
+  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
 }
+.agent-rail__thread {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0 auto;
+  padding: 20px 16px 26px;
+}
+.agent-rail__welcome {
+  display: flex;
+  min-height: 100%;
+  flex: 1 0 auto;
+  flex-direction: column;
+  justify-content: center;
+  gap: 22px;
+  padding: 28px 2px 18px;
+}
+.agent-rail__welcome-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 13px;
+  box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--as-brand) 70%, transparent);
+  font-size: 16px;
+}
+.agent-rail__welcome-copy {
+  display: grid;
+  gap: 9px;
+}
+.agent-rail__welcome-copy h2 {
+  margin: 0;
+  color: var(--as-text);
+  font-family: var(--as-font-display);
+  font-size: clamp(21px, 3vw, 25px);
+  font-weight: 650;
+  letter-spacing: -0.035em;
+  line-height: 1.15;
+}
+.agent-rail__welcome-copy p {
+  max-width: 42ch;
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
 .agent-rail__timeline-slot,
 .agent-rail__followups-slot {
   flex-shrink: 0;
 }
+.agent-rail__error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--as-danger) 24%, var(--as-border));
+  border-radius: var(--as-radius-md);
+  background: color-mix(in srgb, var(--as-danger) 6%, var(--as-surface));
+  color: var(--as-text);
+}
+.agent-rail__error div {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+.agent-rail__error strong {
+  font-size: 12px;
+  font-weight: 700;
+}
+.agent-rail__error p {
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.agent-rail__error button {
+  appearance: none;
+  flex: 0 0 auto;
+  padding: 7px 10px;
+  border: 1px solid color-mix(in srgb, var(--as-brand) 26%, var(--as-border));
+  border-radius: 999px;
+  background: var(--as-surface);
+  color: var(--as-text);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 650;
+}
+.agent-rail__error button:hover {
+  background: var(--as-brand-soft);
+}
+.agent-rail__error button:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
 .agent-rail__composer-wrap {
+  position: relative;
+  z-index: 1;
   flex-shrink: 0;
-  padding: 12px 12px 14px;
+  padding: 12px 14px 13px;
   border-top: 1px solid var(--as-border);
-  background: var(--as-surface);
+  background: color-mix(in srgb, var(--as-surface) 96%, var(--as-surface-muted));
 }
 .agent-rail__footer {
-  margin-top: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  margin-top: 7px;
 }
-.agent-rail__footer-disclaimer {
+.agent-rail__footer p {
   margin: 0;
-  text-align: center;
-  font-size: 11px;
   color: var(--as-text-subtle);
+  font-size: 10.5px;
   line-height: 1.35;
-}
-.agent-rail__footer-note {
-  margin: 0;
   text-align: center;
-  font-size: 11px;
-  color: var(--as-text-subtle);
-  line-height: 1.35;
-}
-.agent-rail--mobile-fullscreen {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  max-width: none;
-  min-width: 0;
-  height: 100dvh;
-  max-height: 100dvh;
-  overflow: hidden;
-  z-index: var(--as-z-mobile);
-  border-left: none;
-  box-shadow: none;
 }
 .agent-rail--expanded {
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 95vw;
-  height: 95dvh;
-  max-width: none;
+  z-index: calc(var(--as-z-mobile) + 1);
+  width: min(960px, calc(100vw - 48px));
   min-width: 0;
-  max-height: 95dvh;
+  max-width: 960px;
+  height: min(860px, calc(100dvh - 48px));
+  max-height: calc(100dvh - 48px);
+  overflow: hidden;
   transform: translate(-50%, -50%);
-  z-index: calc(var(--as-z-mobile) + 1);
-  background: var(--as-surface);
   border: 1px solid var(--as-border);
-  border-radius: var(--as-radius-lg);
-  box-shadow: 0 0 0 1px rgb(42 51 70 / 0.04), 0 28px 80px -24px rgb(18 4 62 / 0.35);
+  border-radius: 22px;
+  background: var(--as-surface);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 8%, transparent), 0 32px 90px -30px color-mix(in srgb, var(--as-text) 46%, transparent);
   transition:
     width 320ms cubic-bezier(0.22, 1, 0.36, 1),
     height 320ms cubic-bezier(0.22, 1, 0.36, 1),
     transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
     border-radius 320ms cubic-bezier(0.22, 1, 0.36, 1),
     box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
-  overflow: hidden;
 }
-.agent-rail--expanded .agent-rail__header,
-.agent-rail--expanded .agent-rail__transcript,
-.agent-rail--expanded .agent-rail__dock-wrap {
-  background: var(--as-surface);
+.agent-rail--expanded .agent-rail__thread {
+  max-width: 760px;
+  padding: 28px 24px 36px;
 }
-.agent-rail--expanded .agent-rail__transcript {
-  padding: 20px 24px 25px;
-  align-items: center;
+.agent-rail--expanded .agent-rail__welcome {
+  width: 100%;
+  max-width: 680px;
+  margin: 0 auto;
 }
-.agent-rail--expanded .agent-rail__transcript .message-bubble {
-  width: 85%;
-  max-width: 85%;
+.agent-rail--expanded .agent-rail__composer-wrap {
+  padding: 16px 24px 18px;
 }
-.agent-rail--expanded .agent-rail__transcript .message-bubble__text {
-  font-size: 16px;
-  padding: 12px 14px;
+.agent-rail--expanded .agent-rail__composer-wrap > .composer,
+.agent-rail--expanded .agent-rail__footer {
+  width: min(712px, 100%);
+  margin-right: auto;
+  margin-left: auto;
 }
-.agent-rail--expanded .agent-rail__transcript .tool-timeline__streaming-text {
-  font-size: 16px;
-  padding: 12px 14px;
+.agent-rail--expanded .agent-rail__footer {
+  margin-top: 8px;
 }
-.agent-rail--expanded .agent-rail__transcript .message-bubble--visitor {
-  align-self: center;
-  align-items: flex-end;
+.agent-rail--mobile-fullscreen {
+  position: fixed;
+  inset: auto 0 0;
+  z-index: calc(var(--as-z-mobile) + 1);
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  height: min(78dvh, 720px);
+  min-height: min(520px, calc(100dvh - 12px));
+  max-height: calc(100dvh - 8px);
+  overflow: hidden;
+  border: 1px solid var(--as-border);
+  border-bottom: none;
+  border-radius: 22px 22px 0 0;
+  background: var(--as-surface);
+  box-shadow: 0 -24px 72px -28px color-mix(in srgb, var(--as-text) 42%, transparent);
 }
-.agent-rail--expanded .agent-rail__transcript .message-bubble--agent {
-  align-self: center;
-  align-items: flex-start;
+.agent-rail--mobile-fullscreen .agent-rail__header {
+  padding-top: 16px;
 }
-.agent-rail--expanded .agent-rail__transcript .agent-activity-bubble,
-.agent-rail--expanded .agent-rail__transcript [role=alert] {
-  align-self: center;
-  align-items: flex-start;
-  width: 85%;
-  max-width: 85%;
+.agent-rail--mobile-fullscreen .agent-rail__brand-row {
+  grid-template-columns: minmax(0, 1fr) auto 40px;
 }
-.agent-rail--expanded .agent-rail__dock-wrap {
-  flex-shrink: 0;
-  width: 70%;
-  max-width: 70%;
-  align-self: center;
-  padding: 18px 0 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
+.agent-rail--mobile-fullscreen .agent-rail__identity {
+  grid-column: 1;
+  justify-content: flex-start;
 }
-.agent-rail--expanded .agent-rail__dock-followups {
-  width: 100%;
+.agent-rail--mobile-fullscreen .agent-rail__actions {
+  grid-column: 2;
 }
-.agent-rail--expanded .agent-rail__dock-followups .followups__scroll {
-  justify-content: flex-start;
+.agent-rail--mobile-fullscreen .agent-rail__close {
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
 }
-.agent-rail--expanded .agent-rail__dock {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  padding: 12px;
-  border: 1px solid var(--as-border);
-  border-radius: calc(var(--as-radius-lg) + 4px);
-  background: var(--as-surface);
+.agent-rail--mobile-fullscreen .agent-rail__close,
+.agent-rail--mobile-fullscreen .agent-rail__new-chat {
+  width: 40px;
+  height: 40px;
 }
-.agent-rail--expanded .agent-rail__footer {
-  margin-top: 0;
-  width: 100%;
+.agent-rail--mobile-fullscreen .agent-rail__header::before {
+  position: absolute;
+  top: 7px;
+  left: 50%;
+  width: 34px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--as-text) 16%, transparent);
+  content: "";
+  transform: translateX(-50%);
+}
+.agent-rail--mobile-fullscreen .agent-rail__thread {
+  padding: 20px 16px 24px;
+}
+.agent-rail--mobile-fullscreen .agent-rail__welcome {
+  padding-top: 20px;
+  padding-bottom: 12px;
+}
+.agent-rail--mobile-fullscreen .agent-rail__composer-wrap {
+  padding: 11px 12px max(12px, env(safe-area-inset-bottom));
 }
 .agent-rail--mobile-fullscreen .agent-rail__close {
-  display: grid;
+  display: inline-flex;
 }
 .agent-rail--mobile-fullscreen .agent-rail__collapse {
   display: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .agent-rail--expanded {
-    transition: none;
-  }
-}
 @media (max-width: 767px) {
-  .agent-rail {
-    position: fixed;
-    inset: 0;
+  .agent-rail:not(.agent-rail--mobile-fullscreen) {
     width: 100%;
-    max-width: none;
     min-width: 0;
-    height: 100dvh;
-    max-height: 100dvh;
-    overflow: hidden;
-    z-index: var(--as-z-mobile);
-    border-left: none;
-    box-shadow: none;
+    max-width: none;
   }
   .agent-rail .agent-rail__close {
-    display: grid;
+    display: inline-flex;
   }
-  .agent-rail .agent-rail__collapse {
+  .agent-rail .agent-rail__collapse,
+  .agent-rail .agent-rail__expand {
     display: none;
   }
+  .agent-rail__welcome-copy h2 {
+    font-size: 23px;
+  }
+  .agent-rail__error {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+@media (max-width: 767px) and (max-height: 620px) {
+  .agent-rail--mobile-fullscreen {
+    height: calc(100dvh - 8px);
+  }
+  .agent-rail--mobile-fullscreen .agent-rail__welcome {
+    justify-content: flex-start;
+  }
 }
 @media (min-width: 768px) {
   .agent-rail .agent-rail__close {
     display: none !important;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .agent-rail--expanded {
+    transition: none;
+  }
+}
 
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */
 .assist-edge-tab {
@@ -979,7 +1193,7 @@ html.webless-agent-page-shift {
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
-  box-shadow: -6px 0 20px -12px rgb(18 4 62 / 0.28);
+  box-shadow: -6px 0 20px -12px color-mix(in srgb, var(--as-text) 28%, transparent);
   transition:
     transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
     opacity 240ms ease,
@@ -1136,7 +1350,7 @@ html.webless-agent-page-shift {
   --tab-fill: var(--as-brand);
   --tab-ink: #fff;
   --tab-line: transparent;
-  box-shadow: -8px 0 22px -10px rgb(111 22 255 / 0.55);
+  box-shadow: -8px 0 22px -10px color-mix(in srgb, var(--as-brand) 55%, transparent);
 }
 .assist-edge-tab--fill.assist-edge-tab--right,
 .assist-edge-tab--fill.assist-edge-tab--left {
@@ -1168,6 +1382,59 @@ html.webless-agent-page-shift {
     min-height: 148px;
     width: 36px;
   }
+  .assist-edge-tab--mobile,
+  .assist-edge-tab--mobile.assist-edge-tab--right,
+  .assist-edge-tab--mobile.assist-edge-tab--left,
+  .assist-edge-tab--mobile.assist-edge-tab--top,
+  .assist-edge-tab--mobile.assist-edge-tab--bottom {
+    top: auto;
+    right: max(14px, env(safe-area-inset-right));
+    bottom: max(14px, env(safe-area-inset-bottom));
+    left: auto;
+    width: auto;
+    min-width: 0;
+    max-width: min(220px, calc(100vw - 28px));
+    height: 48px;
+    min-height: 48px;
+    padding: 0 17px 0 13px;
+    flex-direction: row;
+    justify-content: center;
+    gap: 9px;
+    border: 1px solid color-mix(in srgb, var(--as-brand) 18%, var(--as-border));
+    border-radius: 999px;
+    background: var(--as-surface);
+    color: var(--as-text);
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 8%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--as-text) 32%, transparent);
+    transform: translateY(calc(100% + 24px));
+  }
+  .assist-edge-tab--mobile.is-visible,
+  .assist-edge-tab--mobile.is-visible:hover {
+    transform: translateY(0);
+  }
+  .assist-edge-tab--mobile.is-visible:hover {
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 8%, transparent), 0 14px 36px -12px color-mix(in srgb, var(--as-text) 38%, transparent);
+  }
+  .assist-edge-tab--mobile .assist-edge-tab__mark {
+    width: 22px;
+    height: 22px;
+    flex-basis: 22px;
+    border-radius: 7px;
+    background: var(--as-brand);
+    color: var(--as-visitor-text);
+    font-size: 10px;
+    font-weight: 750;
+  }
+  .assist-edge-tab--mobile .assist-edge-tab__label {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--as-text);
+    font-size: 14px;
+    letter-spacing: -0.01em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    writing-mode: initial;
+    transform: none;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .assist-edge-tab,