@webless/agent 0.4.1 → 0.6.0

package/dist/embed.css

@@ -106,23 +106,6 @@
   pointer-events: none;
   z-index: 1;
 }
-.webless-agent-root__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  border: none;
-  padding: 0;
-  margin: 0;
-  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;
 }
@@ -291,113 +274,140 @@ html.webless-agent-page-shift {
   flex-direction: column;
   align-self: flex-start;
   align-items: stretch;
-  gap: 9px;
+  gap: 7px;
 }
 .agent-activity-bubble__status {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 8px;
   margin: 0;
   color: var(--as-text-muted);
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 650;
   line-height: 1.4;
 }
 .agent-activity-bubble__pulse {
-  width: 8px;
-  height: 8px;
-  flex: 0 0 8px;
+  position: relative;
+  display: grid;
+  width: 15px;
+  height: 15px;
+  flex: 0 0 15px;
+  place-items: center;
   border-radius: 999px;
   background: var(--as-success);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-success) 10%, transparent);
+  color: #fff;
+}
+.agent-activity-bubble__pulse::after {
+  content: "\2713";
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1;
 }
 .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);
+  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;
 }
+.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);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-danger) 10%, transparent);
+}
+.agent-activity-bubble__pulse.is-error::after {
+  content: "!";
 }
 .agent-activity-bubble__details {
-  overflow: hidden;
-  border: 1px solid var(--as-border);
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--as-surface-muted) 48%, var(--as-surface));
+  border: 0;
+  background: transparent;
 }
-.agent-activity-bubble__details summary {
+.agent-activity-bubble__summary {
+  appearance: none;
   display: flex;
-  min-height: 42px;
+  width: 100%;
+  min-height: 34px;
   align-items: center;
-  padding: 0 13px;
+  gap: 9px;
+  margin: 0;
+  padding: 0 2px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
   color: var(--as-text-muted);
   cursor: pointer;
+  font-family: inherit;
   font-size: 12px;
   font-weight: 650;
-  list-style: none;
-}
-.agent-activity-bubble__details summary::-webkit-details-marker {
-  display: none;
+  text-align: left;
 }
-.agent-activity-bubble__details summary::after {
-  width: 20px;
-  height: 20px;
-  margin-left: auto;
-  border-radius: 999px;
+.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: "+";
-  font-size: 17px;
-  font-weight: 400;
-  line-height: 19px;
-  text-align: center;
+  content: "";
+  transform: rotate(45deg) translate(-1px, -1px);
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
-.agent-activity-bubble__details summary:hover::after {
-  background: var(--as-surface-muted);
+.agent-activity-bubble__summary:hover {
   color: var(--as-text);
 }
-.agent-activity-bubble__details[open] summary::after {
-  content: "\2212";
+.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[aria-expanded=true]::before {
+  transform: rotate(225deg) translate(-1px, -1px);
 }
 .agent-activity-bubble__steps {
   display: grid;
   gap: 0;
   margin: 0;
-  padding: 1px 13px 13px;
+  padding: 3px 0 2px 24px;
   list-style: none;
 }
 .agent-activity-bubble__step {
   position: relative;
   display: grid;
-  min-height: 48px;
-  grid-template-columns: 28px minmax(0, 1fr);
+  min-height: 50px;
+  grid-template-columns: 26px minmax(0, 1fr);
   align-items: flex-start;
   gap: 10px;
-  padding: 6px 0;
+  padding: 5px 0;
 }
 .agent-activity-bubble__step:not(:last-child)::after {
   position: absolute;
-  top: 32px;
-  bottom: -8px;
-  left: 13px;
+  top: 30px;
+  bottom: -6px;
+  left: 12px;
   width: 1px;
-  background: var(--as-border);
+  background: color-mix(in srgb, var(--as-text) 11%, transparent);
   content: "";
 }
 .agent-activity-bubble__step-icon {
   position: relative;
   z-index: 1;
   display: inline-flex;
-  width: 28px;
-  height: 28px;
+  width: 25px;
+  height: 25px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 1px solid var(--as-border);
-  border-radius: 9px;
-  background: var(--as-surface);
+  border: 0;
+  border-radius: 8px;
+  background: var(--as-surface-muted);
   color: var(--as-text-muted);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 750;
 }
 .agent-activity-bubble__step-icon svg {
@@ -414,46 +424,28 @@ html.webless-agent-page-shift {
   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-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%, 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;
   min-width: 0;
-  gap: 3px;
+  gap: 2px;
   padding-top: 2px;
 }
 .agent-activity-bubble__step-heading {
   display: flex;
   min-width: 0;
   align-items: baseline;
-  gap: 7px;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 .agent-activity-bubble__step-heading strong {
   overflow: hidden;
@@ -466,14 +458,14 @@ html.webless-agent-page-shift {
 }
 .agent-activity-bubble__step-heading small {
   flex: 0 0 auto;
-  color: var(--as-text-subtle);
-  font-size: 10px;
+  color: var(--as-text-muted);
+  font-size: 10.5px;
   font-weight: 550;
   line-height: 1.35;
 }
 .agent-activity-bubble__step-detail {
-  color: var(--as-text-subtle);
-  font-size: 11px;
+  color: var(--as-text-muted);
+  font-size: 11.5px;
   line-height: 1.4;
 }
 @keyframes agent-activity-pulse {
@@ -481,6 +473,14 @@ html.webless-agent-page-shift {
     opacity: 0.55;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .agent-activity-bubble__pulse.is-active {
+    animation: none;
+  }
+  .agent-activity-bubble__summary::before {
+    transition: none;
+  }
+}
 
 /* src/react/components/Composer/Composer.css */
 .composer {
@@ -493,9 +493,9 @@ html.webless-agent-page-shift {
   align-items: flex-end;
   gap: 6px;
   padding: 6px;
-  border: 1px solid var(--as-border);
+  border: 1px solid var(--as-control-border, color-mix(in srgb, var(--as-text) 14%, transparent));
   border-radius: 16px;
-  background: var(--as-surface);
+  background: color-mix(in srgb, var(--as-surface-muted) 42%, var(--as-surface));
   box-shadow: 0 1px 2px color-mix(in srgb, var(--as-text) 5%, transparent);
 }
 .composer__field:focus-within {
@@ -516,7 +516,7 @@ html.webless-agent-page-shift {
   max-height: 96px;
 }
 .composer__input::placeholder {
-  color: var(--as-text-subtle);
+  color: var(--as-text-muted);
 }
 .composer__input:focus {
   outline: none;
@@ -549,8 +549,8 @@ html.webless-agent-page-shift {
 .composer--dock .composer__field {
   align-items: center;
   padding: 5px 5px 5px 13px;
-  background: var(--as-surface);
-  border: 1px solid var(--as-border);
+  background: color-mix(in srgb, var(--as-surface-muted) 42%, 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,8 +564,8 @@ html.webless-agent-page-shift {
   max-height: 48px;
 }
 .composer--dock .composer__send {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
 }
 .composer--dock .composer__send svg {
   width: 15px;
@@ -661,6 +661,211 @@ html.webless-agent-page-shift {
   display: none;
 }
 
+/* src/react/components/BookingCard/BookingCard.css */
+.booking-card {
+  width: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
+}
+.booking-card__form,
+.booking-card__step,
+.booking-card__identity,
+.booking-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.booking-card__form {
+  padding: 16px;
+}
+.booking-card__step {
+  gap: 16px;
+}
+.booking-card__identity,
+.booking-card__field {
+  gap: 8px;
+}
+.booking-card__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--as-text);
+  text-wrap: balance;
+}
+.booking-card__tz,
+.booking-card__field span {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--as-text-muted, var(--as-text));
+}
+.booking-card__step-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.booking-card__month {
+  display: grid;
+  grid-template-columns: 32px 1fr 32px;
+  align-items: center;
+  gap: 8px;
+}
+.booking-card__month-title {
+  margin: 0;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--as-text);
+}
+.booking-card__nav {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--as-text);
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.booking-card__nav:hover:not(:disabled) {
+  background: var(--as-surface-muted, #f4f6fb);
+}
+.booking-card__nav:disabled {
+  color: var(--as-text-subtle);
+  cursor: default;
+}
+.booking-card__nav:focus-visible,
+.booking-card__day:focus-visible,
+.booking-card__time:focus-visible,
+.booking-card__field input:focus-visible,
+.booking-card__field select:focus-visible,
+.booking-card__submit:focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.booking-card__weekdays,
+.booking-card__calendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+.booking-card__calendar {
+  min-height: calc((36px * 6) + (4px * 5));
+}
+.booking-card__weekdays span {
+  min-height: 24px;
+  color: var(--as-text-muted, var(--as-text));
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+}
+.booking-card__day {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  aspect-ratio: 1;
+  min-height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--as-text-subtle);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: default;
+}
+.booking-card__day--available {
+  background: var(--as-brand-soft);
+  color: var(--as-text);
+  cursor: pointer;
+}
+.booking-card__day--available:hover {
+  background: var(--as-brand-light);
+}
+.booking-card__day--selected,
+.booking-card__day--selected:hover {
+  background: var(--as-visitor-bubble, var(--as-brand));
+  color: var(--as-visitor-text, #fff);
+}
+.booking-card__times {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.booking-card__times:has(:nth-child(7)) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.booking-card__time {
+  appearance: none;
+  width: 100%;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 1px solid var(--as-brand);
+  border-radius: var(--as-radius-sm);
+  background: var(--as-surface);
+  color: var(--as-text);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 650;
+  cursor: pointer;
+  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.booking-card__time:hover {
+  background: var(--as-brand-soft);
+}
+.booking-card__time--selected {
+  background: var(--as-visitor-bubble, var(--as-brand));
+  color: var(--as-visitor-text, #fff);
+}
+.booking-card__field input,
+.booking-card__field select {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  padding: 8px 12px;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
+  color: var(--as-text);
+  font: inherit;
+  font-size: 13px;
+}
+.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);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.booking-card__submit:hover {
+  filter: brightness(1.04);
+}
+@media (prefers-reduced-motion: reduce) {
+  .booking-card__time {
+    transition: none;
+  }
+}
+
 /* src/react/components/MessageBubble/MessageBubble.css */
 .message-bubble {
   display: flex;
@@ -668,6 +873,16 @@ html.webless-agent-page-shift {
   gap: 8px;
   max-width: 86%;
 }
+.message-bubble--agent:has(.booking-card) {
+  align-self: stretch;
+  width: 100%;
+  max-width: 100%;
+}
+.message-bubble .booking-card {
+  width: 100%;
+  max-width: none;
+  box-sizing: border-box;
+}
 .message-bubble--visitor {
   align-self: flex-end;
   align-items: flex-end;
@@ -675,8 +890,37 @@ html.webless-agent-page-shift {
 .message-bubble--agent {
   align-self: flex-start;
   align-items: flex-start;
+  width: 100%;
   max-width: 100%;
 }
+.message-bubble__agent-row {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 24px minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 10px;
+}
+.message-bubble__agent-avatar {
+  position: relative;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-top: 1px;
+  border-radius: 8px;
+  background: var(--as-surface-muted);
+}
+.message-bubble__agent-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--as-surface);
+  object-fit: contain;
+}
 .message-bubble__text {
   margin: 0;
   padding: 10px 12px;
@@ -691,9 +935,10 @@ html.webless-agent-page-shift {
   border-bottom-right-radius: 5px;
 }
 .message-bubble--agent .message-bubble__text {
-  width: 100%;
+  min-width: 0;
+  width: auto;
   padding: 0;
-  border: none;
+  border: 0;
   border-radius: 0;
   background: transparent;
   color: var(--as-text);
@@ -748,6 +993,8 @@ html.webless-agent-page-shift {
 /* src/react/components/AgentRail/AgentRail.css */
 .agent-rail {
   --rail-width: var(--as-rail-max-width);
+  --as-hairline: color-mix(in srgb, var(--as-text) 9%, transparent);
+  --as-control-border: color-mix(in srgb, var(--as-text) 14%, transparent);
   position: relative;
   z-index: var(--as-z-rail);
   display: flex;
@@ -758,7 +1005,7 @@ html.webless-agent-page-shift {
   max-height: 100dvh;
   flex-direction: column;
   overflow: hidden;
-  border-left: 1px solid var(--as-border);
+  border-left: 1px solid var(--as-hairline);
   background: var(--as-surface);
   box-shadow: var(--as-shadow-rail);
   color: var(--as-text);
@@ -771,9 +1018,9 @@ html.webless-agent-page-shift {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--as-border);
-  background: color-mix(in srgb, var(--as-surface) 96%, var(--as-surface-muted));
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--as-hairline);
+  background: var(--as-surface);
 }
 .agent-rail__brand-row {
   display: grid;
@@ -802,16 +1049,13 @@ html.webless-agent-page-shift {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.agent-rail__brand-mark,
-.agent-rail__welcome-mark {
+.agent-rail__brand-mark {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  background: var(--as-brand);
-  color: var(--as-visitor-text);
-  font-weight: 750;
+  background: var(--as-surface-muted);
 }
 .agent-rail__brand-mark {
   width: 25px;
@@ -820,8 +1064,7 @@ html.webless-agent-page-shift {
   border-radius: 8px;
   font-size: 11px;
 }
-.agent-rail__brand-logo,
-.agent-rail__welcome-logo {
+.agent-rail__brand-logo {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -911,45 +1154,15 @@ html.webless-agent-page-shift {
   width: 100%;
   min-height: 100%;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
   margin: 0 auto;
-  padding: 20px 16px 26px;
+  padding: 24px 20px 32px;
 }
 .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;
+  flex-shrink: 0;
+  gap: 18px;
 }
 .agent-rail__timeline-slot,
 .agent-rail__followups-slot {
@@ -1004,86 +1217,83 @@ html.webless-agent-page-shift {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  padding: 12px 14px 13px;
-  border-top: 1px solid var(--as-border);
-  background: color-mix(in srgb, var(--as-surface) 96%, var(--as-surface-muted));
+  padding: 13px 20px 14px;
+  border-top: 1px solid var(--as-hairline);
+  background: var(--as-surface);
 }
 .agent-rail__footer {
   margin-top: 7px;
 }
 .agent-rail__footer p {
+  display: grid;
+  gap: 2px;
   margin: 0;
-  color: var(--as-text-subtle);
-  font-size: 10.5px;
+  color: var(--as-text-muted);
+  font-size: 11px;
   line-height: 1.35;
   text-align: center;
 }
 .agent-rail--expanded {
   position: fixed;
-  top: 50%;
-  left: 50%;
+  inset: 0;
   z-index: calc(var(--as-z-mobile) + 1);
-  width: min(960px, calc(100vw - 48px));
-  min-width: 0;
-  max-width: 960px;
-  height: min(860px, calc(100dvh - 48px));
-  max-height: calc(100dvh - 48px);
+  width: 100vw;
+  min-width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
   overflow: hidden;
-  transform: translate(-50%, -50%);
-  border: 1px solid var(--as-border);
-  border-radius: 22px;
+  transform: none;
+  border: 0;
+  border-radius: 0;
   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);
+  box-shadow: none;
+  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.agent-rail--expanded .agent-rail__brand-row {
+  max-width: 1120px;
+  margin: 0 auto;
 }
 .agent-rail--expanded .agent-rail__thread {
   max-width: 760px;
-  padding: 28px 24px 36px;
+  padding: 36px 24px 48px;
 }
 .agent-rail--expanded .agent-rail__welcome {
   width: 100%;
-  max-width: 680px;
-  margin: 0 auto;
 }
 .agent-rail--expanded .agent-rail__composer-wrap {
   padding: 16px 24px 18px;
 }
-.agent-rail--expanded .agent-rail__composer-wrap > .composer,
+.agent-rail--expanded .composer,
 .agent-rail--expanded .agent-rail__footer {
-  width: min(712px, 100%);
+  width: min(760px, 100%);
   margin-right: auto;
   margin-left: auto;
 }
 .agent-rail--expanded .agent-rail__footer {
-  margin-top: 8px;
+  margin-top: 7px;
 }
 .agent-rail--mobile-fullscreen {
   position: fixed;
-  inset: auto 0 0;
+  inset: 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);
+  height: 100dvh;
+  min-height: 100dvh;
+  max-height: 100dvh;
   overflow: hidden;
-  border: 1px solid var(--as-border);
-  border-bottom: none;
-  border-radius: 22px 22px 0 0;
+  border: 0;
+  border-radius: 0;
   background: var(--as-surface);
-  box-shadow: 0 -24px 72px -28px color-mix(in srgb, var(--as-text) 42%, transparent);
+  box-shadow: none;
 }
 .agent-rail--mobile-fullscreen .agent-rail__header {
-  padding-top: 16px;
+  padding-top: max(12px, env(safe-area-inset-top));
 }
 .agent-rail--mobile-fullscreen .agent-rail__brand-row {
-  grid-template-columns: minmax(0, 1fr) auto 40px;
+  grid-template-columns: minmax(0, 1fr) auto 44px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__identity {
   grid-column: 1;
@@ -1099,26 +1309,18 @@ html.webless-agent-page-shift {
 }
 .agent-rail--mobile-fullscreen .agent-rail__close,
 .agent-rail--mobile-fullscreen .agent-rail__new-chat {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
 }
 .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%);
+  content: none;
 }
 .agent-rail--mobile-fullscreen .agent-rail__thread {
-  padding: 20px 16px 24px;
+  padding: 24px 16px 32px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__welcome {
-  padding-top: 20px;
-  padding-bottom: 12px;
+  padding-top: 0;
+  padding-bottom: 8px;
 }
 .agent-rail--mobile-fullscreen .agent-rail__composer-wrap {
   padding: 11px 12px max(12px, env(safe-area-inset-bottom));
@@ -1142,9 +1344,6 @@ html.webless-agent-page-shift {
   .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;
@@ -1152,11 +1351,17 @@ html.webless-agent-page-shift {
 }
 @media (max-width: 767px) and (max-height: 620px) {
   .agent-rail--mobile-fullscreen {
-    height: calc(100dvh - 8px);
+    height: 100dvh;
   }
   .agent-rail--mobile-fullscreen .agent-rail__welcome {
     justify-content: flex-start;
   }
+  .agent-rail--mobile-fullscreen .agent-rail__composer-wrap {
+    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
+  }
+  .agent-rail--mobile-fullscreen .agent-rail__footer p span:first-child {
+    display: none;
+  }
 }
 @media (min-width: 768px) {
   .agent-rail .agent-rail__close {
@@ -1172,8 +1377,8 @@ html.webless-agent-page-shift {
 /* src/react/components/AssistEdgeTab/AssistEdgeTab.css */
 .assist-edge-tab {
   --tab-ink: var(--as-brand);
-  --tab-fill: #fff;
-  --tab-line: rgb(111 22 255 / 0.35);
+  --tab-fill: var(--as-surface);
+  --tab-line: color-mix(in srgb, var(--as-brand) 32%, var(--as-border));
   --tab-along: 50%;
   --tab-inset: 0px;
   position: fixed;
@@ -1234,6 +1439,12 @@ html.webless-agent-page-shift {
   background: var(--tab-fill);
   object-fit: contain;
 }
+.assist-edge-tab__custom-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
 .assist-edge-tab__label {
   font-family: var(--as-font-display);
   font-size: 13px;
@@ -1315,8 +1526,8 @@ html.webless-agent-page-shift {
   transform: translateX(-50%) translateY(-2px);
 }
 .assist-edge-tab--outline {
-  --tab-fill: #f7f6fa;
-  --tab-line: rgb(111 22 255 / 0.45);
+  --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));
 }
 .assist-edge-tab--outline.assist-edge-tab--right,
 .assist-edge-tab--outline.assist-edge-tab--left {
@@ -1332,7 +1543,7 @@ html.webless-agent-page-shift {
   border-bottom: 1px solid var(--tab-line);
 }
 .assist-edge-tab--ask {
-  --tab-fill: #efe8fb;
+  --tab-fill: color-mix(in srgb, var(--as-brand) 10%, var(--as-surface));
   --tab-line: transparent;
 }
 .assist-edge-tab--ask.assist-edge-tab--right,