/* GENERATED by scripts/bundle-css.mjs — do not edit. */
/* assistant-ui prebuilt styles (scoped under :where(.aui-root)). */

/* ===== @assistant-ui/react-ui/styles/index.css ===== */
/* src/styles/base.css */
:where(.aui-root) *,
:where(.aui-root) ::before,
:where(.aui-root) ::after {
  --aui-border-spacing-x: 0;
  --aui-border-spacing-y: 0;
  --aui-translate-x: 0;
  --aui-translate-y: 0;
  --aui-rotate: 0;
  --aui-skew-x: 0;
  --aui-skew-y: 0;
  --aui-scale-x: 1;
  --aui-scale-y: 1;
  --aui-ring-inset: ;
  --aui-ring-offset-width: 0px;
  --aui-ring-offset-color: #fff;
  --aui-ring-color: rgb(59 130 246 / 0.5);
  --aui-ring-offset-shadow: 0 0 #0000;
  --aui-ring-shadow: 0 0 #0000;
  --aui-shadow: 0 0 #0000;
  --aui-shadow-colored: 0 0 #0000;
  --aui-blur: ;
  --aui-brightness: ;
  --aui-contrast: ;
  --aui-grayscale: ;
  --aui-hue-rotate: ;
  --aui-invert: ;
  --aui-saturate: ;
  --aui-sepia: ;
  --aui-drop-shadow: ;
  --aui-backdrop-blur: ;
  --aui-backdrop-brightness: ;
  --aui-backdrop-contrast: ;
  --aui-backdrop-grayscale: ;
  --aui-backdrop-hue-rotate: ;
  --aui-backdrop-invert: ;
  --aui-backdrop-opacity: ;
  --aui-backdrop-saturate: ;
  --aui-backdrop-sepia: ;
  --aui-contain-size: ;
  --aui-contain-layout: ;
  --aui-contain-paint: ;
  --aui-contain-style: ;
}
:where(.aui-root) ::backdrop {
  --aui-border-spacing-x: 0;
  --aui-border-spacing-y: 0;
  --aui-translate-x: 0;
  --aui-translate-y: 0;
  --aui-rotate: 0;
  --aui-skew-x: 0;
  --aui-skew-y: 0;
  --aui-scale-x: 1;
  --aui-scale-y: 1;
  --aui-ring-inset: ;
  --aui-ring-offset-width: 0px;
  --aui-ring-offset-color: #fff;
  --aui-ring-color: rgb(59 130 246 / 0.5);
  --aui-ring-offset-shadow: 0 0 #0000;
  --aui-ring-shadow: 0 0 #0000;
  --aui-shadow: 0 0 #0000;
  --aui-shadow-colored: 0 0 #0000;
  --aui-blur: ;
  --aui-brightness: ;
  --aui-contrast: ;
  --aui-grayscale: ;
  --aui-hue-rotate: ;
  --aui-invert: ;
  --aui-saturate: ;
  --aui-sepia: ;
  --aui-drop-shadow: ;
  --aui-backdrop-blur: ;
  --aui-backdrop-brightness: ;
  --aui-backdrop-contrast: ;
  --aui-backdrop-grayscale: ;
  --aui-backdrop-hue-rotate: ;
  --aui-backdrop-invert: ;
  --aui-backdrop-opacity: ;
  --aui-backdrop-saturate: ;
  --aui-backdrop-sepia: ;
  --aui-contain-size: ;
  --aui-contain-layout: ;
  --aui-contain-paint: ;
  --aui-contain-style: ;
}
:where(.aui-root) *,
:where(.aui-root) ::before,
:where(.aui-root) ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
:where(.aui-root) ::before,
:where(.aui-root) ::after {
  --aui-content: "";
}
:where(.aui-root) html,
:where(.aui-root) :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
:where(.aui-root) body {
  margin: 0;
  line-height: inherit;
}
:where(.aui-root) hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
:where(.aui-root) abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
:where(.aui-root) h1,
:where(.aui-root) h2,
:where(.aui-root) h3,
:where(.aui-root) h4,
:where(.aui-root) h5,
:where(.aui-root) h6 {
  font-size: inherit;
  font-weight: inherit;
}
:where(.aui-root) a {
  color: inherit;
  text-decoration: inherit;
}
:where(.aui-root) b,
:where(.aui-root) strong {
  font-weight: bolder;
}
:where(.aui-root) code,
:where(.aui-root) kbd,
:where(.aui-root) samp,
:where(.aui-root) pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
:where(.aui-root) small {
  font-size: 80%;
}
:where(.aui-root) sub,
:where(.aui-root) sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
:where(.aui-root) sub {
  bottom: -0.25em;
}
:where(.aui-root) sup {
  top: -0.5em;
}
:where(.aui-root) table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:where(.aui-root) button,
:where(.aui-root) input,
:where(.aui-root) optgroup,
:where(.aui-root) select,
:where(.aui-root) textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:where(.aui-root) button,
:where(.aui-root) select {
  text-transform: none;
}
:where(.aui-root) button,
:where(.aui-root) input:where([type=button]),
:where(.aui-root) input:where([type=reset]),
:where(.aui-root) input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:where(.aui-root) :-moz-focusring {
  outline: auto;
}
:where(.aui-root) :-moz-ui-invalid {
  box-shadow: none;
}
:where(.aui-root) progress {
  vertical-align: baseline;
}
:where(.aui-root) ::-webkit-inner-spin-button,
:where(.aui-root) ::-webkit-outer-spin-button {
  height: auto;
}
:where(.aui-root) [type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
:where(.aui-root) ::-webkit-search-decoration {
  -webkit-appearance: none;
}
:where(.aui-root) ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
:where(.aui-root) summary {
  display: list-item;
}
:where(.aui-root) blockquote,
:where(.aui-root) dl,
:where(.aui-root) dd,
:where(.aui-root) h1,
:where(.aui-root) h2,
:where(.aui-root) h3,
:where(.aui-root) h4,
:where(.aui-root) h5,
:where(.aui-root) h6,
:where(.aui-root) hr,
:where(.aui-root) figure,
:where(.aui-root) p,
:where(.aui-root) pre {
  margin: 0;
}
:where(.aui-root) fieldset {
  margin: 0;
  padding: 0;
}
:where(.aui-root) legend {
  padding: 0;
}
:where(.aui-root) ol,
:where(.aui-root) ul,
:where(.aui-root) menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(.aui-root) dialog {
  padding: 0;
}
:where(.aui-root) textarea {
  resize: vertical;
}
:where(.aui-root) input::-moz-placeholder,
:where(.aui-root) textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}
:where(.aui-root) input::placeholder,
:where(.aui-root) textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
:where(.aui-root) button,
:where(.aui-root) [role=button] {
  cursor: pointer;
}
:where(.aui-root) :disabled {
  cursor: default;
}
:where(.aui-root) img,
:where(.aui-root) svg,
:where(.aui-root) video,
:where(.aui-root) canvas,
:where(.aui-root) audio,
:where(.aui-root) iframe,
:where(.aui-root) embed,
:where(.aui-root) object {
  display: block;
  vertical-align: middle;
}
:where(.aui-root) img,
:where(.aui-root) video {
  max-width: 100%;
  height: auto;
}
:where(.aui-root) [hidden]:where(:not([hidden=until-found])) {
  display: none;
}
@keyframes aui-enter {
  from {
    opacity: var(--aui-enter-opacity, 1);
    transform: translate3d(var(--aui-enter-translate-x, 0), var(--aui-enter-translate-y, 0), 0) scale3d(var(--aui-enter-scale, 1), var(--aui-enter-scale, 1), var(--aui-enter-scale, 1)) rotate(var(--aui-enter-rotate, 0));
  }
}
@keyframes aui-exit {
  to {
    opacity: var(--aui-exit-opacity, 1);
    transform: translate3d(var(--aui-exit-translate-x, 0), var(--aui-exit-translate-y, 0), 0) scale3d(var(--aui-exit-scale, 1), var(--aui-exit-scale, 1), var(--aui-exit-scale, 1)) rotate(var(--aui-exit-rotate, 0));
  }
}

/* src/styles/tailwindcss/base-components.css */
.aui-root {
  color: hsl(var(--aui-foreground));
}
.aui-root * {
  border-color: hsl(var(--aui-border));
}
.aui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: calc(var(--aui-radius) - 2px);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.aui-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --aui-ring-offset-shadow: var(--aui-ring-inset) 0 0 0 var(--aui-ring-offset-width) var(--aui-ring-offset-color);
  --aui-ring-shadow: var(--aui-ring-inset) 0 0 0 calc(1px + var(--aui-ring-offset-width)) var(--aui-ring-color);
  box-shadow:
    var(--aui-ring-offset-shadow),
    var(--aui-ring-shadow),
    var(--aui-shadow, 0 0 #0000);
  --aui-ring-color: hsl(var(--aui-ring)) ;
}
.aui-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.aui-button svg {
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.aui-button-primary {
  background-color: hsl(var(--aui-primary));
  color: hsl(var(--aui-primary-foreground));
  --aui-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --aui-shadow-colored: 0 1px 3px 0 var(--aui-shadow-color), 0 1px 2px -1px var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
}
.aui-button-primary:hover {
  background-color: hsl(var(--aui-primary) / 0.9);
}
.aui-button-outline {
  border-width: 1px;
  border-color: hsl(var(--aui-input));
  background-color: hsl(var(--aui-background));
  --aui-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --aui-shadow-colored: 0 1px 2px 0 var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
}
.aui-button-outline:hover {
  background-color: hsl(var(--aui-accent));
  color: hsl(var(--aui-accent-foreground));
}
.aui-button-ghost:hover {
  background-color: hsl(var(--aui-accent));
  color: hsl(var(--aui-accent-foreground));
}
.aui-button-medium {
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.aui-button-icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
}
.aui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.aui-avatar-root {
  position: relative;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
}
.aui-avatar-image {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.aui-avatar-fallback {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--aui-muted));
}
.aui-tooltip-content {
  z-index: 50;
  overflow: hidden;
  border-radius: calc(var(--aui-radius) - 2px);
  background-color: hsl(var(--aui-primary));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--aui-primary-foreground));
  animation-name: aui-enter;
  animation-duration: 150ms;
  --aui-enter-opacity: initial;
  --aui-enter-scale: initial;
  --aui-enter-rotate: initial;
  --aui-enter-translate-x: initial;
  --aui-enter-translate-y: initial;
  --aui-enter-opacity: 0;
  --aui-enter-scale: .95 ;
}
.aui-tooltip-content[data-state=closed] {
  animation-name: aui-exit;
  animation-duration: 150ms;
  --aui-exit-opacity: initial;
  --aui-exit-scale: initial;
  --aui-exit-rotate: initial;
  --aui-exit-translate-x: initial;
  --aui-exit-translate-y: initial;
  --aui-exit-opacity: 0;
  --aui-exit-scale: .95 ;
}
.aui-tooltip-content[data-side=bottom] {
  --aui-enter-translate-y: -0.5rem ;
}
.aui-tooltip-content[data-side=left] {
  --aui-enter-translate-x: 0.5rem ;
}
.aui-tooltip-content[data-side=right] {
  --aui-enter-translate-x: -0.5rem ;
}
.aui-tooltip-content[data-side=top] {
  --aui-enter-translate-y: 0.5rem ;
}
.aui-dialog-overlay {
  position: fixed;
  inset: 0px;
  z-index: 50;
  background-color: rgb(0 0 0 / 0.8);
}
.aui-dialog-overlay[data-state=open] {
  animation-name: aui-enter;
  animation-duration: 150ms;
  --aui-enter-opacity: initial;
  --aui-enter-scale: initial;
  --aui-enter-rotate: initial;
  --aui-enter-translate-x: initial;
  --aui-enter-translate-y: initial ;
}
.aui-dialog-overlay[data-state=closed] {
  animation-name: aui-exit;
  animation-duration: 150ms;
  --aui-exit-opacity: initial;
  --aui-exit-scale: initial;
  --aui-exit-rotate: initial;
  --aui-exit-translate-x: initial;
  --aui-exit-translate-y: initial;
  --aui-exit-opacity: 0 ;
}
.aui-dialog-overlay[data-state=open] {
  --aui-enter-opacity: 0 ;
}
.aui-dialog-content {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
}
.aui-dialog-content[data-state=open] {
  animation-name: aui-enter;
  animation-duration: 150ms;
  --aui-enter-opacity: initial;
  --aui-enter-scale: initial;
  --aui-enter-rotate: initial;
  --aui-enter-translate-x: initial;
  --aui-enter-translate-y: initial ;
}
.aui-dialog-content[data-state=closed] {
  animation-name: aui-exit;
  animation-duration: 150ms;
  --aui-exit-opacity: initial;
  --aui-exit-scale: initial;
  --aui-exit-rotate: initial;
  --aui-exit-translate-x: initial;
  --aui-exit-translate-y: initial;
  --aui-exit-opacity: 0 ;
}
.aui-dialog-content[data-state=open] {
  --aui-enter-opacity: 0 ;
}
.aui-dialog-content[data-state=closed] {
  --aui-exit-scale: .95 ;
}
.aui-dialog-content[data-state=open] {
  --aui-enter-scale: .95 ;
}
.aui-dialog-content[data-state=closed] {
  --aui-exit-translate-x: -50%;
  --aui-exit-translate-y: -48% ;
}
.aui-dialog-content[data-state=open] {
  --aui-enter-translate-x: -50%;
  --aui-enter-translate-y: -48% ;
}
.aui-dialog-content {
  display: grid;
  --aui-translate-x: -50%;
  --aui-translate-y: -50%;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
  --aui-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --aui-shadow-colored: 0 10px 15px -3px var(--aui-shadow-color), 0 4px 6px -4px var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
  transition-duration: 200ms;
  animation-duration: 200ms;
}

/* src/styles/tailwindcss/thread.css */
.aui-thread-root {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  background-color: hsl(var(--aui-background));
}
.aui-thread-viewport {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  scroll-behavior: smooth;
  background-color: inherit;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
}
.aui-thread-viewport-footer {
  position: sticky;
  bottom: 0px;
  margin-top: 0.75rem;
  display: flex;
  width: 100%;
  max-width: var(--aui-thread-max-width);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-top-left-radius: var(--aui-radius);
  border-top-right-radius: var(--aui-radius);
  background-color: inherit;
  padding-bottom: 1rem;
}
.aui-thread-scroll-to-bottom {
  position: absolute;
  top: -2rem;
  border-radius: 9999px;
}
.aui-thread-scroll-to-bottom:disabled {
  visibility: hidden;
}
.aui-thread-followup-suggestions {
  display: flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.aui-thread-followup-suggestion {
  border-radius: 9999px;
  border-width: 1px;
  background-color: hsl(var(--aui-background));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.aui-thread-followup-suggestion:hover {
  background-color: hsl(var(--aui-muted) / 0.8);
}
.aui-thread-welcome-root {
  display: flex;
  width: 100%;
  max-width: var(--aui-thread-max-width);
  flex-grow: 1;
  flex-direction: column;
}
.aui-thread-welcome-center {
  display: flex;
  width: 100%;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.aui-thread-welcome-message {
  margin-top: 1rem;
  font-weight: 500;
}
.aui-thread-welcome-suggestions {
  margin-top: 0.75rem;
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
}
.aui-thread-welcome-suggestion {
  display: flex;
  max-width: 24rem;
  flex-grow: 1;
  flex-basis: 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--aui-radius);
  border-width: 1px;
  padding: 0.75rem;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.aui-thread-welcome-suggestion:hover {
  background-color: hsl(var(--aui-muted) / 0.8);
}
.aui-thread-welcome-suggestion-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.aui-composer-root {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  border-radius: var(--aui-radius);
  border-width: 1px;
  background-color: inherit;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  --aui-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --aui-shadow-colored: 0 1px 2px 0 var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.aui-composer-root:focus-within {
  border-color: hsl(var(--aui-ring) / 0.2);
}
.aui-composer-input {
  max-height: 10rem;
  flex-grow: 1;
  resize: none;
  border-style: none;
  background-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.aui-composer-input::-moz-placeholder {
  color: hsl(var(--aui-muted-foreground));
}
.aui-composer-input::placeholder {
  color: hsl(var(--aui-muted-foreground));
}
.aui-composer-input:focus {
  --aui-ring-offset-shadow: var(--aui-ring-inset) 0 0 0 var(--aui-ring-offset-width) var(--aui-ring-offset-color);
  --aui-ring-shadow: var(--aui-ring-inset) 0 0 0 calc(0px + var(--aui-ring-offset-width)) var(--aui-ring-color);
  box-shadow:
    var(--aui-ring-offset-shadow),
    var(--aui-ring-shadow),
    var(--aui-shadow, 0 0 #0000);
}
.aui-composer-input:disabled {
  cursor: not-allowed;
}
.aui-composer-send {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.aui-composer-cancel {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.aui-composer-attach {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.aui-composer-attachments {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 0.75rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.aui-attachment-root {
  position: relative;
  margin-top: 0.75rem;
}
.aui-attachment-content {
  display: flex;
  height: 3rem;
  width: 10rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--aui-radius);
  border-width: 1px;
  padding: 0.25rem;
}
.aui-attachment-preview-trigger {
  cursor: pointer;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.aui-attachment-preview-trigger:hover {
  background-color: hsl(var(--aui-accent) / 0.5);
}
.aui-attachment-thumb {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  background-color: hsl(var(--aui-muted));
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.aui-attachment-text {
  flex-grow: 1;
  flex-basis: 0px;
}
.aui-attachment-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-break: break-all;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: hsl(var(--aui-muted-foreground));
}
.aui-attachment-type {
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--aui-muted-foreground));
}
.aui-attachment-remove {
  position: absolute;
  right: -0.75rem;
  top: -0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--aui-muted-foreground));
}
.aui-attachment-remove > svg {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: hsl(var(--aui-background));
}
.aui-user-message-root {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: minmax(72px, 1fr) auto;
  row-gap: 0.5rem;
}
.aui-user-message-root:where(> *) {
  grid-column-start: 2;
}
.aui-user-message-root {
  width: 100%;
  max-width: var(--aui-thread-max-width);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
:where(.aui-user-message-root) > .aui-branch-picker-root {
  grid-column: 1 / -1;
  grid-column-start: 1;
  grid-row-start: 3;
  margin-right: -0.25rem;
  justify-content: flex-end;
}
.aui-user-branch-picker {
  grid-column: 1 / -1;
  grid-column-start: 1;
  grid-row-start: 3;
  margin-right: -0.25rem;
  justify-content: flex-end;
}
.aui-user-message-content {
  max-width: calc(var(--aui-thread-max-width) * 0.8);
  overflow-wrap: break-word;
  border-radius: 1.5rem;
  background-color: hsl(var(--aui-muted));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  color: hsl(var(--aui-foreground));
  grid-column-start: 2;
  grid-row-start: 2;
}
.aui-user-message-attachments {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 0.75rem;
  grid-column: 1 / -1;
  grid-column-start: 1;
  grid-row-start: 1;
  justify-content: flex-end;
}
.aui-user-action-bar-root {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  grid-column-start: 1;
  grid-row-start: 2;
  margin-right: 0.75rem;
  margin-top: 0.625rem;
}
.aui-edit-composer-root {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  width: 100%;
  max-width: var(--aui-thread-max-width);
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: hsl(var(--aui-muted));
}
.aui-edit-composer-input {
  display: flex;
  height: 2rem;
  width: 100%;
  resize: none;
  background-color: transparent;
  padding: 1rem;
  padding-bottom: 0px;
  color: hsl(var(--aui-foreground));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.aui-edit-composer-footer {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: flex-end;
}
.aui-assistant-message-root {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto 1fr;
  position: relative;
  width: 100%;
  max-width: var(--aui-thread-max-width);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
:where(.aui-assistant-message-root) > .aui-avatar-root {
  grid-column-start: 1;
  grid-row: 1 / -1;
  grid-row-start: 1;
  margin-right: 1rem;
}
.aui-assistant-avatar {
  grid-column-start: 1;
  grid-row: 1 / -1;
  grid-row-start: 1;
  margin-right: 1rem;
}
:where(.aui-assistant-message-root) > .aui-branch-picker-root {
  grid-column-start: 2;
  grid-row-start: 2;
  margin-left: -0.5rem;
  margin-right: 0.5rem;
}
.aui-assistant-branch-picker {
  grid-column-start: 2;
  grid-row-start: 2;
  margin-left: -0.5rem;
  margin-right: 0.5rem;
}
.aui-assistant-message-content {
  max-width: calc(var(--aui-thread-max-width) * 0.8);
  overflow-wrap: break-word;
  line-height: 1.75rem;
  color: hsl(var(--aui-foreground));
  grid-column: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 1;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.aui-assistant-action-bar-root {
  display: flex;
  gap: 0.25rem;
  color: hsl(var(--aui-muted-foreground));
  grid-column-start: 3;
  grid-row-start: 2;
  margin-left: -0.25rem;
}
.aui-assistant-action-bar-root[data-floating] {
  position: absolute;
  border-radius: calc(var(--aui-radius) - 2px);
  border-width: 1px;
  background-color: hsl(var(--aui-background));
  padding: 0.25rem;
  --aui-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --aui-shadow-colored: 0 1px 2px 0 var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
}
.aui-assistant-action-bar-feedback-positive[data-submitted] {
  --aui-text-opacity: 1;
  color: rgb(22 163 74 / var(--aui-text-opacity, 1));
}
.aui-assistant-action-bar-feedback-positive:hover[data-submitted] {
  --aui-text-opacity: 1;
  color: rgb(21 128 61 / var(--aui-text-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  .aui-assistant-action-bar-feedback-positive[data-submitted] {
    --aui-text-opacity: 1;
    color: rgb(34 197 94 / var(--aui-text-opacity, 1));
  }
  .aui-assistant-action-bar-feedback-positive:hover[data-submitted] {
    --aui-text-opacity: 1;
    color: rgb(74 222 128 / var(--aui-text-opacity, 1));
  }
}
.aui-assistant-action-bar-feedback-negative[data-submitted] {
  --aui-text-opacity: 1;
  color: rgb(220 38 38 / var(--aui-text-opacity, 1));
}
.aui-assistant-action-bar-feedback-negative:hover[data-submitted] {
  --aui-text-opacity: 1;
  color: rgb(185 28 28 / var(--aui-text-opacity, 1));
}
@media (prefers-color-scheme: dark) {
  .aui-assistant-action-bar-feedback-negative[data-submitted] {
    --aui-text-opacity: 1;
    color: rgb(239 68 68 / var(--aui-text-opacity, 1));
  }
  .aui-assistant-action-bar-feedback-negative:hover[data-submitted] {
    --aui-text-opacity: 1;
    color: rgb(248 113 113 / var(--aui-text-opacity, 1));
  }
}
.aui-branch-picker-root {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--aui-muted-foreground));
}
.aui-branch-picker-state {
  font-weight: 500;
}
.aui-text {
  white-space: pre-line;
}
@keyframes aui-pulse {
  50% {
    opacity: .5;
  }
}
.aui-text-running::after {
  animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --aui-content: "\25cf";
  content: var(--aui-content);
}
.aui-text-running:where([dir=ltr], [dir=ltr] *)::after {
  margin-left: 0.25rem;
}
.aui-text-running:where([dir=rtl], [dir=rtl] *)::after {
  margin-right: 0.25rem;
}
.aui-thread-list-root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}
.aui-thread-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--aui-radius);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.aui-thread-list-item:hover {
  background-color: hsl(var(--aui-muted));
}
.aui-thread-list-item:focus-visible {
  background-color: hsl(var(--aui-muted));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --aui-ring-offset-shadow: var(--aui-ring-inset) 0 0 0 var(--aui-ring-offset-width) var(--aui-ring-offset-color);
  --aui-ring-shadow: var(--aui-ring-inset) 0 0 0 calc(2px + var(--aui-ring-offset-width)) var(--aui-ring-color);
  box-shadow:
    var(--aui-ring-offset-shadow),
    var(--aui-ring-shadow),
    var(--aui-shadow, 0 0 #0000);
  --aui-ring-color: hsl(var(--aui-ring)) ;
}
.aui-thread-list-item[data-active] {
  background-color: hsl(var(--aui-muted));
}
.aui-thread-list-new {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  border-radius: var(--aui-radius);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: start;
}
.aui-thread-list-new:hover {
  background-color: hsl(var(--aui-muted));
}
.aui-thread-list-new[data-active] {
  background-color: hsl(var(--aui-muted));
}
.aui-thread-list-new > .lucide-plus {
  width: 1.25rem;
  height: 1.25rem;
}
.aui-thread-list-item-trigger {
  flex-grow: 1;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: start;
}
.aui-thread-list-item-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.aui-thread-list-item-archive {
  margin-left: auto;
  margin-right: 0.75rem;
  width: 1rem;
  height: 1rem;
  padding: 0px;
  color: hsl(var(--aui-foreground));
}
.aui-thread-list-item-archive:hover {
  color: hsl(var(--aui-primary));
}

/* src/styles/themes/default.css */
:root {
  --aui-background: 0 0% 100%;
  --aui-foreground: 240 10% 3.9%;
  --aui-card: 0 0% 100%;
  --aui-card-foreground: 240 10% 3.9%;
  --aui-popover: 0 0% 100%;
  --aui-popover-foreground: 240 10% 3.9%;
  --aui-primary: 240 5.9% 10%;
  --aui-primary-foreground: 0 0% 98%;
  --aui-secondary: 240 4.8% 95.9%;
  --aui-secondary-foreground: 240 5.9% 10%;
  --aui-muted: 240 4.8% 95.9%;
  --aui-muted-foreground: 240 3.8% 46.1%;
  --aui-accent: 240 4.8% 95.9%;
  --aui-accent-foreground: 240 5.9% 10%;
  --aui-destructive: 0 84.2% 60.2%;
  --aui-destructive-foreground: 0 0% 98%;
  --aui-border: 240 5.9% 90%;
  --aui-input: 240 5.9% 90%;
  --aui-ring: 240 10% 3.9%;
  --aui-radius: 0.5rem;
  --aui-thread-max-width: 42rem;
}
.dark {
  --aui-background: 0 0% 7%;
  --aui-foreground: 0 0% 98%;
  --aui-card: 240 10% 3.9%;
  --aui-card-foreground: 0 0% 98%;
  --aui-popover: 240 10% 3.9%;
  --aui-popover-foreground: 0 0% 98%;
  --aui-primary: 0 0% 98%;
  --aui-primary-foreground: 240 5.9% 10%;
  --aui-secondary: 240 3.7% 15.9%;
  --aui-secondary-foreground: 0 0% 98%;
  --aui-muted: 240 3.7% 15.9%;
  --aui-muted-foreground: 240 5% 64.9%;
  --aui-accent: 240 3.7% 15.9%;
  --aui-accent-foreground: 0 0% 98%;
  --aui-destructive: 0 62.8% 30.6%;
  --aui-destructive-foreground: 0 0% 98%;
  --aui-border: 240 3.7% 15.9%;
  --aui-input: 240 3.7% 15.9%;
  --aui-ring: 240 4.9% 83.9%;
}

/* src/styles/index.css */
/*# sourceMappingURL=index.css.map */

/* ===== @assistant-ui/react-ui/styles/modal.css ===== */
/* src/styles/tailwindcss/modal.css */
.aui-modal-content {
  z-index: 50;
  height: 500px;
  width: 400px;
  overflow: clip;
  border-radius: 0.75rem;
  border-width: 1px;
  background-color: hsl(var(--aui-popover));
  padding: 0px;
  color: hsl(var(--aui-popover-foreground));
  --aui-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --aui-shadow-colored: 0 4px 6px -1px var(--aui-shadow-color), 0 2px 4px -2px var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.aui-modal-content > .aui-thread-root {
  background-color: inherit;
}
.aui-modal-content[data-state=open] {
  animation-name: aui-enter;
  animation-duration: 150ms;
  --aui-enter-opacity: initial;
  --aui-enter-scale: initial;
  --aui-enter-rotate: initial;
  --aui-enter-translate-x: initial;
  --aui-enter-translate-y: initial ;
}
.aui-modal-content[data-state=closed] {
  animation-name: aui-exit;
  animation-duration: 150ms;
  --aui-exit-opacity: initial;
  --aui-exit-scale: initial;
  --aui-exit-rotate: initial;
  --aui-exit-translate-x: initial;
  --aui-exit-translate-y: initial;
  --aui-exit-opacity: 0 ;
}
.aui-modal-content[data-state=open] {
  --aui-enter-opacity: 0 ;
}
.aui-modal-content[data-state=closed] {
  --aui-exit-scale: 0 ;
}
.aui-modal-content[data-state=open] {
  --aui-enter-scale: 0;
  --aui-enter-translate-y: 50%;
  --aui-enter-translate-x: 50% ;
}
.aui-modal-content[data-state=closed] {
  --aui-exit-translate-y: 50%;
  --aui-exit-translate-x: 50% ;
}
.aui-modal-anchor {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
}
.aui-modal-button {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  --aui-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --aui-shadow-colored: 0 1px 3px 0 var(--aui-shadow-color), 0 1px 2px -1px var(--aui-shadow-color);
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.aui-modal-button:hover {
  --aui-scale-x: 1.1;
  --aui-scale-y: 1.1;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button:active {
  --aui-scale-x: .9;
  --aui-scale-y: .9;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-closed-icon {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.aui-modal-button-closed-icon[data-state=closed] {
  --aui-rotate: 0deg;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-closed-icon[data-state=open] {
  --aui-rotate: 90deg;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-closed-icon[data-state=closed] {
  --aui-scale-x: 1;
  --aui-scale-y: 1;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-closed-icon[data-state=open] {
  --aui-scale-x: 0;
  --aui-scale-y: 0;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-open-icon {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.aui-modal-button-open-icon[data-state=closed] {
  --aui-rotate: -90deg;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-open-icon[data-state=open] {
  --aui-rotate: 0deg;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-open-icon[data-state=closed] {
  --aui-scale-x: 0;
  --aui-scale-y: 0;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}
.aui-modal-button-open-icon[data-state=open] {
  --aui-scale-x: 1;
  --aui-scale-y: 1;
  transform: translate(var(--aui-translate-x), var(--aui-translate-y)) rotate(var(--aui-rotate)) skewX(var(--aui-skew-x)) skewY(var(--aui-skew-y)) scaleX(var(--aui-scale-x)) scaleY(var(--aui-scale-y));
}

/* src/styles/modal.css */
/*# sourceMappingURL=modal.css.map */

/* ===== @assistant-ui/react-ui/styles/markdown.css ===== */
/* src/styles/tailwindcss/markdown.css */
@keyframes aui-pulse {
  50% {
    opacity: .5;
  }
}
:where(.aui-md-running):empty::after,
:where(.aui-md-running) > :where(:not(ol):not(ul):not(pre)):last-child::after,
:where(.aui-md-running) > pre:last-child code::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child:not(:has(* > li)))::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child:not(:has(* > li)))::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child)::after {
  animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --aui-content: "\25cf";
  content: var(--aui-content);
}
:where(.aui-md-running):empty:where([dir=ltr], [dir=ltr] *)::after,
:where(.aui-md-running) > :where(:not(ol):not(ul):not(pre)):last-child:where([dir=ltr], [dir=ltr] *)::after,
:where(.aui-md-running) > pre:last-child code:where([dir=ltr], [dir=ltr] *)::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child:not(:has(* > li))):where([dir=ltr], [dir=ltr] *)::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child:not(:has(* > li))):where([dir=ltr], [dir=ltr] *)::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child):where([dir=ltr], [dir=ltr] *)::after {
  margin-left: 0.25rem;
}
:where(.aui-md-running):empty:where([dir=rtl], [dir=rtl] *)::after,
:where(.aui-md-running) > :where(:not(ol):not(ul):not(pre)):last-child:where([dir=rtl], [dir=rtl] *)::after,
:where(.aui-md-running) > pre:last-child code:where([dir=rtl], [dir=rtl] *)::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child:not(:has(* > li))):where([dir=rtl], [dir=rtl] *)::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child:not(:has(* > li))):where([dir=rtl], [dir=rtl] *)::after,
:where(.aui-md-running) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child) > :where(:is(ol, ul):last-child) > :where(li:last-child):where([dir=rtl], [dir=rtl] *)::after {
  margin-right: 0.25rem;
}
.aui-md-h1 {
  margin-bottom: 2rem;
  scroll-margin: 5rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.aui-md-h1:last-child {
  margin-bottom: 0px;
}
.aui-md-h2 {
  margin-bottom: 1rem;
  margin-top: 2rem;
  scroll-margin: 5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.aui-md-h2:first-child {
  margin-top: 0px;
}
.aui-md-h2:last-child {
  margin-bottom: 0px;
}
.aui-md-h3 {
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  scroll-margin: 5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.aui-md-h3:first-child {
  margin-top: 0px;
}
.aui-md-h3:last-child {
  margin-bottom: 0px;
}
.aui-md-h4 {
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  scroll-margin: 5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.aui-md-h4:first-child {
  margin-top: 0px;
}
.aui-md-h4:last-child {
  margin-bottom: 0px;
}
.aui-md-h5 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.aui-md-h5:first-child {
  margin-top: 0px;
}
.aui-md-h5:last-child {
  margin-bottom: 0px;
}
.aui-md-h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.aui-md-h6:first-child {
  margin-top: 0px;
}
.aui-md-h6:last-child {
  margin-bottom: 0px;
}
.aui-md-p {
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  line-height: 1.75rem;
}
.aui-md-p:first-child {
  margin-top: 0px;
}
.aui-md-p:last-child {
  margin-bottom: 0px;
}
.aui-md-a {
  font-weight: 500;
  color: hsl(var(--aui-primary));
  text-decoration-line: underline;
  text-underline-offset: 4px;
}
.aui-md-blockquote {
  border-left-width: 2px;
  padding-left: 1.5rem;
  font-style: italic;
}
.aui-md-ul {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  margin-left: 1.5rem;
  list-style-type: disc;
}
.aui-md-ul > li {
  margin-top: 0.5rem;
}
.aui-md-ol {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  margin-left: 1.5rem;
  list-style-type: decimal;
}
.aui-md-ol > li {
  margin-top: 0.5rem;
}
.aui-md-hr {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom-width: 1px;
}
.aui-md-table {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  width: 100%;
  border-collapse: separate;
  --aui-border-spacing-x: 0px;
  --aui-border-spacing-y: 0px;
  border-spacing: var(--aui-border-spacing-x) var(--aui-border-spacing-y);
  overflow-y: auto;
}
.aui-md-th {
  background-color: hsl(var(--aui-muted));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-weight: 700;
}
.aui-md-th:first-child {
  border-top-left-radius: var(--aui-radius);
}
.aui-md-th:last-child {
  border-top-right-radius: var(--aui-radius);
}
.aui-md-th[align=center] {
  text-align: center;
}
.aui-md-th[align=right] {
  text-align: right;
}
.aui-md-td {
  border-bottom-width: 1px;
  border-left-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}
.aui-md-td:last-child {
  border-right-width: 1px;
}
.aui-md-td[align=center] {
  text-align: center;
}
.aui-md-td[align=right] {
  text-align: right;
}
.aui-md-tr {
  margin: 0px;
  border-bottom-width: 1px;
  padding: 0px;
}
.aui-md-tr:first-child {
  border-top-width: 1px;
}
.aui-md-tr:last-child > td:first-child {
  border-bottom-left-radius: var(--aui-radius);
}
.aui-md-tr:last-child > td:last-child {
  border-bottom-right-radius: var(--aui-radius);
}
.aui-md-sup > a {
  font-size: 0.75rem;
  line-height: 1rem;
  text-decoration-line: none;
}
.aui-md-pre {
  overflow-x: auto;
  border-bottom-right-radius: var(--aui-radius);
  border-bottom-left-radius: var(--aui-radius);
  background-color: #000;
  padding: 1rem;
  --aui-text-opacity: 1;
  color: rgb(255 255 255 / var(--aui-text-opacity, 1));
}
.aui-md-inline-code {
  border-radius: 0.25rem;
  border-width: 1px;
  background-color: hsl(var(--aui-muted));
  font-weight: 600;
}
.aui-code-header-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top-left-radius: var(--aui-radius);
  border-top-right-radius: var(--aui-radius);
  background-color: #18181b;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --aui-text-opacity: 1;
  color: rgb(255 255 255 / var(--aui-text-opacity, 1));
}
.aui-code-header-language {
  text-transform: lowercase;
}
.aui-code-header-language > span {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* src/styles/markdown.css */
/*# sourceMappingURL=markdown.css.map */

/* ===== @assistant-ui/react-ui/styles/themes/default.css ===== */
:root {
  --aui-background: 0 0% 100%;
  --aui-foreground: 240 10% 3.9%;

  --aui-card: 0 0% 100%;
  --aui-card-foreground: 240 10% 3.9%;

  --aui-popover: 0 0% 100%;
  --aui-popover-foreground: 240 10% 3.9%;

  --aui-primary: 240 5.9% 10%;
  --aui-primary-foreground: 0 0% 98%;

  --aui-secondary: 240 4.8% 95.9%;
  --aui-secondary-foreground: 240 5.9% 10%;

  --aui-muted: 240 4.8% 95.9%;
  --aui-muted-foreground: 240 3.8% 46.1%;

  --aui-accent: 240 4.8% 95.9%;
  --aui-accent-foreground: 240 5.9% 10%;

  --aui-destructive: 0 84.2% 60.2%;
  --aui-destructive-foreground: 0 0% 98%;

  --aui-border: 240 5.9% 90%;
  --aui-input: 240 5.9% 90%;
  --aui-ring: 240 10% 3.9%;

  --aui-radius: 0.5rem;

  /* aui specific */
  --aui-thread-max-width: 42rem;
}

.dark {
  --aui-background: 0 0% 7%;
  --aui-foreground: 0 0% 98%;

  --aui-card: 240 10% 3.9%;
  --aui-card-foreground: 0 0% 98%;

  --aui-popover: 240 10% 3.9%;
  --aui-popover-foreground: 0 0% 98%;

  --aui-primary: 0 0% 98%;
  --aui-primary-foreground: 240 5.9% 10%;

  --aui-secondary: 240 3.7% 15.9%;
  --aui-secondary-foreground: 0 0% 98%;

  --aui-muted: 240 3.7% 15.9%;
  --aui-muted-foreground: 240 5% 64.9%;

  --aui-accent: 240 3.7% 15.9%;
  --aui-accent-foreground: 0 0% 98%;

  --aui-destructive: 0 62.8% 30.6%;
  --aui-destructive-foreground: 0 0% 98%;

  --aui-border: 240 3.7% 15.9%;
  --aui-input: 240 3.7% 15.9%;
  --aui-ring: 240 4.9% 83.9%;
}


/* ===== src/widget.css (local overrides) ===== */
/*
 * Web.Eng chatbot — overrides layered on top of assistant-ui's prebuilt styles.
 * Everything is scoped under .aui-root so it only affects the widget, and this
 * file is concatenated AFTER the prebuilt CSS (see scripts/bundle-css.mjs) so
 * these rules win without !important.
 */

/* Accent ramp. applyBrandTokens() overwrites these at runtime with the client's
   real brand colour; the fallbacks keep every accent rule below meaningful when
   no brand colour resolves, so the widget is never half-themed. */
.aui-root {
  --webeng-accent: var(--aui-primary);
  --webeng-accent-deep: var(--aui-primary);
  --webeng-accent-bright: var(--aui-primary);
}

/* Pin the LIGHT palette. assistant-ui's prebuilt CSS ships
   `@media (prefers-color-scheme: dark)` blocks that flip --aui-background and
   friends to near-black — so on a visitor whose OS is in dark mode the widget's
   surfaces went dark/see-through while the rest of our light design stayed put
   (the "transparent" launcher bar over the hero). This widget is deliberately
   light, so lock the tokens here where our (0,1,0) rule beats the media query's
   (0,1,0)-at-lower-source-order — later in the cascade wins. */
.aui-root {
  --aui-background: 0 0% 100%;
  --aui-foreground: 240 10% 10%;
  --aui-card: 0 0% 100%;
  --aui-popover: 0 0% 100%;
  --aui-muted: 220 14% 96%;
  --aui-muted-foreground: 220 9% 46%;
  --aui-border: 220 13% 91%;
  --aui-input: 220 13% 91%;
  --aui-accent: 220 14% 96%;
  --aui-accent-foreground: 240 10% 10%;
  color-scheme: light;
}

/* ----------------------------------------------------------------------------
 * DESIGN TOKENS — the single source of truth for scale in this widget.
 *
 * These exist because the widget accumulated 21 distinct shadows, 18 radii and
 * 22 font sizes across many small patches. Individually a 0.82rem vs 0.84rem
 * font or a slightly different shadow is invisible; collectively they are what
 * makes an interface feel unresolved. Every component below now picks from
 * these ramps, so parts designed weeks apart still look like one product.
 * Add a token before adding a value.
 * ------------------------------------------------------------------------- */
.aui-root {
  /* Type — 4 steps that actually differ, on a 16px root. */
  --wb-t-xs:   0.6875rem; /* 11px  badges, micro-meta */
  --wb-t-sm:   0.75rem;   /* 12px  captions, labels */
  --wb-t-md:   0.8125rem; /* 13px  card titles, options */
  --wb-t-base: 0.875rem;  /* 14px  body, messages */
  --wb-t-lg:   0.9375rem; /* 15px  composer, prominent */
  --wb-t-xl:   1.0625rem; /* 17px  headings */

  /* Radius — nesting-aware: a child sits one step below its parent. */
  --wb-r-sm:   0.5rem;    /*  8px  chips, inline code */
  --wb-r-md:   0.75rem;   /* 12px  option rows, thumbs */
  --wb-r-lg:   1rem;      /* 16px  cards, bubbles */
  --wb-r-xl:   1.25rem;   /* 20px  panels, sheets */
  --wb-r-2xl:  1.5rem;    /* 24px  the modal itself */
  --wb-r-full: 9999px;
  --wb-r-tail: 0.375rem;  /*  6px  the one tight corner on a chat bubble */

  /* Elevation — one light source, one hue, four steps. Two-layer shadows
     (tight contact + soft ambient) read as real depth; single blurs read flat. */
  --wb-e-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
  --wb-e-md: 0 2px 4px rgb(15 23 42 / 0.05), 0 4px 12px rgb(15 23 42 / 0.08);
  --wb-e-lg: 0 4px 8px rgb(15 23 42 / 0.06), 0 12px 28px rgb(15 23 42 / 0.12);
  --wb-e-xl: 0 8px 16px rgb(15 23 42 / 0.08), 0 24px 48px rgb(15 23 42 / 0.16);
  --wb-e-up:   0 -8px 32px rgb(15 23 42 / 0.16);  /* bottom sheet rising */
  --wb-e-side: 18px 0 45px rgb(15 23 42 / 0.18);  /* history drawer */

  /* Filled brand controls get a tinted glow, not a grey one. */
  --wb-e-accent:    0 2px 8px hsl(var(--webeng-accent) / 0.30);
  --wb-e-accent-lg: 0 4px 14px hsl(var(--webeng-accent) / 0.38);
  --wb-ring: 0 0 0 3px hsl(var(--webeng-accent) / 0.14);

  /* Spacing — everything snaps to a 4px grid (0.25rem steps), with a 6px
     half-step (0.375rem) for genuinely tight clusters like icon gaps. Values
     had drifted into near-miss pairs (0.2/0.25, 0.4/0.45, 0.6/0.65) that read
     as misalignment rather than intent. */

  /* Motion — one easing everywhere. Springy out-curve, no bounce. */
  --wb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wb-fast: 150ms;  /* colour/opacity micro-feedback */
  --wb-mid:  250ms;  /* enter/exit */
  --wb-slow: 400ms;  /* layout moves */

  /* Neutral surface for pills that sit on unknown page imagery. */
  --wb-scrim: 220 9% 42%;

  /* Long-travel move: the launcher crossing the viewport at the footer. */
  --wb-travel: 700ms;

  /* Launcher / panel geometry. The panel's bottom is CALCULATED from these, so
     changing the launcher's offset (or the mobile breakpoint below) keeps the
     close button tucked under the panel automatically. Previously all three
     were independent magic numbers and the gap drifted per breakpoint. */
  --wb-launcher-bottom: 1.5rem;
  --wb-close-size: 3.1rem;
  --wb-close-gap: 0.625rem;

  /* Floating surfaces are explicitly opaque white. These elements sit over page
     content we do not control — dark footers, hero imagery — so they must not
     depend on a token that a host theme or OS dark-mode query could flip. */
  --wb-float: #fff;
}

/* The brand mark holds an SVG glyph, sized relative to its tile. */
.webeng-launcher-mark svg {
  width: 68%;
  height: 68%;
  position: relative;
  z-index: 1;
}

/* A slow halo breathing out of the mark: signals "live assistant" without a
   spinner, which would falsely imply work in progress. Deliberately long and
   low-contrast — a fast or strong pulse becomes a distraction on every page. */
@keyframes webeng-halo {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.45); opacity: 0;    }
}
.webeng-launcher-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: hsl(var(--webeng-accent) / 0.45);
  animation: webeng-halo 2.8s var(--wb-ease) infinite;
  pointer-events: none;
}
.webeng-launcher-mark {
  position: relative;
  isolation: isolate;
}
/* Honour reduced-motion: keep the mark, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
  .webeng-launcher-mark::after { animation: none; opacity: 0; }
}


/* ----------------------------------------------------------------------------
 * BUG FIX: horizontal scroll on the welcome screen.
 * The welcome suggestions rendered as a single non-wrapping flex row and
 * overflowed the ~400px modal, making the whole thread scroll sideways (which
 * clipped the welcome text and chips). Wrap them and forbid horizontal scroll.
 * ------------------------------------------------------------------------- */
.aui-root .aui-thread-welcome-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
}

.aui-root .aui-thread-viewport,
.aui-root .aui-thread-welcome-root,
.aui-root .aui-thread-welcome-message {
  overflow-x: hidden;
  max-width: 100%;
}

/* Anything that streams long unbroken tokens/URLs must wrap, not push width. */
.aui-root .aui-thread-welcome-message,
.aui-root .aui-md-root,
.aui-root [class*="message-content"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ----------------------------------------------------------------------------
 * Spacing & polish
 * ------------------------------------------------------------------------- */

/* Host-theme isolation reset. The site's own theme styles raw HTML tags
   globally (GeneratePress, plus the EastvaalDigital Tailwind base layer — e.g.
   `p { @apply mb-2 }` => margin-bottom:.5rem, and `ul,ol {…}`). Those bleed into
   the modal because assistant-ui's resets are :where(.aui-root) (zero
   specificity) and lose to bare element selectors. Re-zero the affected
   elements with a `.aui-root :where(…)` selector — specificity (0,1,0), which
   beats bare element rules (0,0,1) — then assistant-ui and our higher-specificity
   .webeng-md rules re-apply the intended spacing. This kills the whole class of
   typography bleed in one rule instead of patching properties one by one. */
.aui-root :where(p, ul, ol, li, dl, dd, dt, blockquote, figure, pre, hr, table, fieldset, h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
}

/* Host-theme ICON isolation. Same bleed class as the typography reset above,
   but for SVGs. Client themes ship bare `svg { fill:#000; … }` rules
   (GeneratePress, plus the Tailwind base layer) which leak into the modal.
   assistant-ui's icons are lucide, drawn from the inline `fill="none"
   stroke="currentColor"` presentation attributes — and aui sets no CSS fill/
   stroke of its own. Inline presentation attributes have lower priority than
   ANY stylesheet rule, so the theme's bare `svg{}` (specificity 0,0,1) repaints
   every icon — the launcher bot glyph and the composer send arrow get filled
   solid and vanish against the button. Re-assert the lucide contract with a
   `.aui-root svg.lucide` selector (0,2,1), which beats the bare `svg` rule; aui's
   own per-icon SIZE rules still win, so this governs fill/stroke only.
   Scoped to `.lucide` (every lucide icon carries it) so it does NOT touch our
   own DotMatrix svg, which is genuinely fill-drawn. */
.aui-root svg.lucide {
  fill: none;
  stroke: currentColor;
}


/* Host-theme control isolation. Some child themes load Tailwind's form reset
   after the widget, which can erase assistant-ui button and input styling. */
.aui-root .aui-button-primary {
  background-color: hsl(var(--aui-primary));
  color: hsl(var(--aui-primary-foreground));
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
}
.aui-root .aui-button-primary:hover {
  background-color: hsl(var(--aui-primary) / 0.9);
}
.aui-root .aui-button-outline {
  border-width: 1px;
  border-color: hsl(var(--aui-input));
  background-color: hsl(var(--aui-background));
  box-shadow:
    var(--aui-ring-offset-shadow, 0 0 #0000),
    var(--aui-ring-shadow, 0 0 #0000),
    var(--aui-shadow);
}
.aui-root .aui-button-outline:hover {
  background-color: hsl(var(--aui-accent));
  color: hsl(var(--aui-accent-foreground));
}
.aui-root .aui-composer-input {
  border: 0;
  background-color: transparent;
  color: hsl(var(--aui-foreground));
  box-shadow: none;
}
.aui-root .aui-composer-input::placeholder {
  color: hsl(var(--aui-muted-foreground));
}

/* ----------------------------------------------------------------------------
 * Fin-style message bubbles.
 * User: solid accent fill, white text, tail on the lower-right corner.
 * Assistant: quiet bordered card with a tail on the upper-left, so the two
 * speakers read as distinct without an avatar.
 * ------------------------------------------------------------------------- */
.aui-root .aui-user-message-content {
  background: linear-gradient(135deg, hsl(var(--webeng-accent)) 0%, hsl(var(--webeng-accent-deep)) 100%);
  color: hsl(var(--aui-primary-foreground));
  border-radius: var(--wb-r-xl) var(--wb-r-xl) var(--wb-r-tail) var(--wb-r-xl);
  padding: 0.75rem 1rem;
  box-shadow: var(--wb-e-accent);
}
.aui-root .aui-user-message-content * {
  color: inherit;
}

.aui-root .aui-assistant-message-content {
  background: hsl(var(--aui-muted) / 0.55);
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-tail) var(--wb-r-xl) var(--wb-r-xl) var(--wb-r-xl);
  padding: 0.75rem 1rem;
  color: hsl(var(--aui-foreground));
}
/* The card supplies the message's own padding now, so drop the row's extra
   top padding that used to separate bare-text messages. */
.aui-root .aui-assistant-message-root {
  padding-top: 0.5rem;
}

/* Base font size. GeneratePress sets `body { font-size: 17px }`, which leaks
   into the modal: assistant-ui's base rules are :where(.aui-root) (zero
   specificity) so they lose to that inherited body size. An explicit .aui-root
   rule (specificity 0,1,0) wins, restoring a compact 14px chat size for BOTH
   the user message and the assistant answer (keeps them equal). */
.aui-root {
  font-size: 14px;
}

/* The assistant message had 16px bottom padding, leaving a big gap above the
   action bar. Tighten it for even, compact spacing. */
.aui-root .aui-assistant-message-root {
  padding-bottom: 0.25rem;
}

.aui-root .aui-thread-viewport {
  padding-left: 1rem;
  padding-right: 1rem;
  scroll-padding-bottom: 1rem;
}

.aui-root .aui-thread-welcome-root {
  padding: 0;
}

.aui-root .webeng-welcome-copy {
  width: 100%;
  padding: 1rem;
  border-radius: var(--wb-r-lg);
  background: hsl(var(--aui-muted, 220 14% 96%));
  text-align: left;
}

.aui-root .webeng-welcome-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: hsl(var(--aui-primary));
  font-size: var(--wb-t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aui-root .webeng-welcome-title {
  margin: 0;
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-xl);
  font-weight: 700;
  line-height: 1.2;
}

.aui-root .webeng-welcome-prompt {
  max-width: 22rem;
  margin: 0.5rem 0 0;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-base);
  line-height: 1.4;
}

/* Empty-state layout: greeting, composer, then compact suggestion chips. */
.aui-root .aui-thread-viewport:has(.aui-thread-welcome-root) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.aui-root .aui-thread-viewport:has(.aui-thread-welcome-root) .aui-thread-welcome-root {
  display: contents;
}

.aui-root .aui-thread-viewport:has(.aui-thread-welcome-root) .aui-thread-welcome-center {
  order: 1;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.aui-root .aui-thread-viewport:has(.aui-thread-welcome-root) .aui-thread-viewport-footer {
  position: static;
  order: 2;
  margin-top: 1.4rem;
  padding-bottom: 0;
  background: transparent;
}

.aui-root .aui-thread-viewport:has(.aui-thread-welcome-root) .aui-thread-welcome-suggestions {
  order: 3;
  margin-top: 0.9rem;
}

/* Suggestion pills: intentional, wrapping chips that don't clip their text. */
.aui-root .aui-thread-welcome-suggestion {
  flex: 0 1 auto;
  max-width: 100%;
  height: auto;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--wb-r-full);
  background-color: hsl(var(--aui-background));
  box-shadow: var(--wb-e-md);
  font-size: var(--wb-t-md);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  transition: background-color var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease), transform var(--wb-fast) var(--wb-ease);
}
.aui-root .aui-thread-welcome-suggestion:hover {
  transform: translateY(-1px);
}

/* Own the label colour. Host themes style bare <button> — GeneratePress's
   customizer emits `button:hover { color:#fff }`, which turned these labels
   white on our white chip. We set the background but never the colour, so the
   theme won on hover. */
.aui-root .aui-thread-welcome-suggestion,
.aui-root .webeng-suggestion {
  color: hsl(var(--aui-foreground));
}

.aui-root .aui-thread-welcome-suggestion:hover,
.aui-root .aui-thread-welcome-suggestion:focus,
.aui-root .webeng-suggestion:hover,
.aui-root .webeng-suggestion:focus {
  color: hsl(var(--webeng-accent));
}
.aui-root .aui-thread-welcome-suggestion-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

/* Composer: large rounded input with the action pinned to the lower right. */
/* Zipchat-style composer: a soft CARD, not a pill — the placeholder sits on its
   own line at the top and the round send action sits on a row beneath it. */
.aui-root .aui-composer-root {
  position: relative;
  min-height: 5.4rem;
  align-items: flex-start;
  border-radius: var(--wb-r-xl);
  border: 1px solid hsl(var(--aui-border));
  background-color: hsl(var(--aui-background));
  padding: 1rem 1rem 3.4rem 1.25rem;
  box-shadow: var(--wb-e-lg);
}

.aui-root .aui-composer-input {
  width: 100%;
  min-height: 1.6rem;
  max-height: 7rem;
  padding: 0;
  /* Larger, quieter placeholder — Zipchat's "Ask AI…" reads as a heading. */
  font-size: var(--wb-t-lg);
  line-height: 1.4;
}
.aui-root .aui-composer-input::placeholder {
  color: hsl(var(--aui-muted-foreground));
  opacity: 0.85;
}

.aui-root .aui-composer-send,
.aui-root .aui-composer-cancel {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  top: auto;
  transform: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  border-radius: var(--wb-r-full);
  padding: 0.5rem;
}
/* Neutral until there is something to send, accent on hover — matches
   Zipchat's muted circular arrow. */
.aui-root .aui-composer-send {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-muted-foreground));
  box-shadow: none;
  transition: background var(--wb-fast), color var(--wb-fast);
}
.aui-root .aui-composer-send:hover {
  background: hsl(var(--webeng-accent));
  color: #fff;
}

/* ----------------------------------------------------------------------------
 * Rich markdown (assistant answers) — rendered via MarkdownTextPrimitive into
 * .webeng-md. Bold, lists, and especially GFM comparison TABLES.
 * ------------------------------------------------------------------------- */
.aui-root .webeng-md {
  /* Inherit the message bubble's size so the assistant answer matches the
     user message (don't shrink it). */
  font-size: inherit;
  line-height: 1.55;
}
.aui-root .webeng-md > :first-child {
  margin-top: 0;
}
.aui-root .webeng-md > :last-child {
  margin-bottom: 0;
}
.aui-root .webeng-md p {
  margin: 0.5rem 0;
}
.aui-root .webeng-md strong {
  font-weight: 650;
}
.aui-root .webeng-md ul,
.aui-root .webeng-md ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}
.aui-root .webeng-md li {
  margin: 0.25rem 0;
}
.aui-root .webeng-md h1,
.aui-root .webeng-md h2,
.aui-root .webeng-md h3 {
  font-weight: 650;
  line-height: 1.3;
  margin: 0.75rem 0 0.375rem;
}
.aui-root .webeng-md a {
  color: hsl(var(--aui-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aui-root .webeng-md code {
  font-size: 0.85em;
  background: hsl(var(--aui-muted, 220 14% 96%));
  padding: 0.1em 0.35em;
  border-radius: var(--wb-r-sm);
}

/* Comparison tables — the headline rich element. The table sizes to its content
   and scrolls horizontally inside its OWN wrapper, so wide comparisons never
   stretch or clip the modal. */
.aui-root .webeng-md-tablewrap {
  margin: 0.5rem 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-sm);
}
.aui-root .webeng-md table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--wb-t-md);
}
.aui-root .webeng-md th,
.aui-root .webeng-md td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  border-bottom: 1px solid hsl(var(--aui-border));
}
.aui-root .webeng-md thead th {
  background: hsl(var(--aui-muted, 220 14% 96%));
  font-weight: 650;
}
.aui-root .webeng-md tbody tr:last-child td {
  border-bottom: 0;
}

/* ----------------------------------------------------------------------------
 * Loading indicator (DotMatrix) — shown during the bot's warm-up, before the
 * first token streams. Driven by inline styles on each dot + these keyframes.
 * ------------------------------------------------------------------------- */
@property --aui-dot-matrix-hi {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --aui-dot-matrix-lo {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.15;
}
@keyframes aui-dot-matrix-blink {
  0%,
  100% {
    opacity: var(--aui-dot-matrix-hi, 1);
  }
  50% {
    opacity: var(--aui-dot-matrix-lo, 0.15);
  }
}
/* Typing indicator: an assistant-shaped bubble with three pulsing dots. It
   deliberately mirrors .aui-assistant-message-content (same fill, border, tail)
   so the bubble stays put and simply fills with text when the reply arrives —
   rather than one element vanishing and another appearing in its place. */
.aui-root .webeng-typing {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-tail) var(--wb-r-xl) var(--wb-r-xl) var(--wb-r-xl);
  background: hsl(var(--aui-muted) / 0.55);
}
/* …but when assistant-ui renders it through the message's Empty slot it lands
   INSIDE .aui-assistant-message-content, which already draws that exact bubble
   — so the standalone chrome became a border inside a border. Nested, the
   indicator is just the dots; the surrounding bubble is the bubble. */
.aui-root .aui-assistant-message-content .webeng-typing {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.aui-root .webeng-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.aui-root .webeng-typing-dots i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--wb-r-full);
  background: hsl(var(--webeng-accent) / 0.75);
  animation: webeng-typing-dot 1.25s var(--wb-ease) infinite;
}
/* Staggered so the group reads as a travelling wave, not three dots blinking
   in unison. */
.aui-root .webeng-typing-dots i:nth-child(2) { animation-delay: 0.16s; }
.aui-root .webeng-typing-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes webeng-typing-dot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-0.2rem); }
}
/* Reduced motion: hold the dots visible rather than animating them. */
@media (prefers-reduced-motion: reduce) {
  .aui-root .webeng-typing-dots i {
    animation: none;
    opacity: 0.6;
  }
}
.webeng-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* assistant-ui's default "A" avatar stays hidden; ours replaces it. The
   message is a grid `56px 0 1fr`, so column 1 is narrowed rather than removed —
   it now holds the site's own mark. */
.aui-root .aui-avatar-root {
  display: none;
}
.aui-root .aui-assistant-message-root {
  grid-template-columns: 1.6rem 0 minmax(0, 1fr);
  column-gap: 0.35rem;
}

/* The same accent tile the launcher uses, so the assistant is recognisable in
   both places. */
.aui-root .webeng-assistant-avatar {
  grid-column: 1;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--wb-r-sm);
  background: linear-gradient(
    145deg,
    hsl(var(--webeng-accent-bright)) 0%,
    hsl(var(--webeng-accent-deep)) 100%
  );
  color: #fff;
}

.aui-root .webeng-assistant-avatar svg {
  width: 68%;
  height: 68%;
}


/* The foot spans the content column, not the avatar gutter. */
.aui-root .webeng-assistant-foot {
  grid-column: 3;
}

/* Mobile: sit on the bottom edge. Set on .aui-root so the panel sees the same
   value as the launcher. Nothing on these pages occupies the bottom
   persistently — the only `fixed bottom-0` is inside the closed filter drawer. */
@media (max-width: 1023.98px) {
  .aui-root {
    --wb-launcher-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .aui-root.webeng-launcher {
    z-index: 60;
  }
  .aui-modal-content {
    z-index: 60;
  }
}

@media (max-width: 480px) {
  .aui-root.aui-modal-content {
    width: min(400px, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }
}

/* ----------------------------------------------------------------------------
 * Zipchat/Fin-style launcher — an "Ask anything…" pill with the opening
 * suggestions stacked above it, replacing the default corner bubble.
 * ------------------------------------------------------------------------- */
/* Centred at the bottom of the viewport, like Zipchat — not tucked in a corner.
   The bar itself is a wide search field, so it reads as "ask us anything"
   rather than as a small support bubble. */
.aui-root.webeng-launcher {
  position: fixed;
  bottom: var(--wb-launcher-bottom);
  /* Anchored from the RIGHT edge and centred via transform. Anchoring this way
     (rather than left:50%) is what lets the collapse animate: `right` goes from
     50% to a fixed inset and `transform` unwinds — both animatable. Anchoring
     from the left would need `left:auto`, which snaps instead of moving. */
  right: 50%;
  left: auto;
  transform: translateX(50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: min(34rem, calc(100vw - 2rem));
  /* Deliberately slower than a normal transition: this is a large object
     crossing the viewport, and short durations made it read as a twitch. Long
     travel wants long duration or the motion feels nervous. */
  transition:
    right var(--wb-travel) var(--wb-ease),
    transform var(--wb-travel) var(--wb-ease),
    width var(--wb-travel) var(--wb-ease),
    bottom var(--wb-travel) var(--wb-ease);
}
/* Footer state: shrink to a compact puck in the bottom-RIGHT corner — out of
   the footer's way, and where a chat launcher is conventionally found. */
.aui-root.webeng-launcher.webeng-launcher-collapsed {
  right: 1.25rem;
  transform: translateX(0);
  width: 3.5rem;
}
.aui-root.webeng-launcher.webeng-launcher-collapsed .webeng-launcher-suggestions,
.aui-root.webeng-launcher.webeng-launcher-collapsed .webeng-launcher-teaser {
  display: none;
}
.aui-root.webeng-launcher.webeng-launcher-collapsed .webeng-launcher-bar {
  width: 3.5rem;
  height: 3.5rem;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0;
  gap: 0;
  justify-content: center;
}
/* No arrow in the puck: at this size the mark alone is the affordance, and a
   second glyph only crowds it. */
.aui-root.webeng-launcher.webeng-launcher-collapsed .webeng-launcher-send {
  width: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
/* The mark grows slightly as it becomes the entire control. */
.aui-root.webeng-launcher.webeng-launcher-collapsed .webeng-launcher-mark {
  width: 2rem;
  height: 2rem;
}
/* Text collapses away smoothly; the mark + send remain as the puck. */
.aui-root.webeng-launcher.webeng-launcher-collapsed .webeng-launcher-bar-text {
  max-width: 0;
  opacity: 0;
  margin: 0;
}
.webeng-launcher-bar-text {
  max-width: 20rem;
  opacity: 1;
  transition: max-width var(--wb-travel) var(--wb-ease), opacity var(--wb-mid) var(--wb-ease);
}

/* Open: the bar is replaced by the round close button, centred in its place. */
.aui-root.webeng-launcher.webeng-launcher-open {
  width: auto;
  align-items: center;
}
.webeng-launcher-close {
  width: var(--wb-close-size);
  height: var(--wb-close-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--wb-r-full);
  background: var(--wb-float);
  color: hsl(var(--aui-foreground));
  box-shadow: var(--wb-e-lg);
  cursor: pointer;
  transition: transform var(--wb-fast), box-shadow var(--wb-fast);
}
.webeng-launcher-x,
.webeng-launcher-close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.webeng-launcher-close:hover {
  transform: scale(1.06);
  box-shadow: var(--wb-e-xl);
}

/* Proactive teaser card shown on load, above the launcher — Zipchat's opening
   move. Dismissible, and dismissal sticks for the visit. */
.webeng-launcher-teaser {
  width: 100%;
  max-width: 20rem;
  padding: 0.75rem;
  border-radius: var(--wb-r-lg);
  background: var(--wb-float);
  box-shadow: var(--wb-e-lg);
  animation: webeng-fade-in var(--wb-mid) ease-out;
}
.webeng-launcher-teaser-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.webeng-launcher-teaser-head strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-sm);
  font-weight: 600;
}
.webeng-launcher-teaser-close {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--wb-r-full);
  background: transparent;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-xl);
  line-height: 1;
  cursor: pointer;
}
.webeng-launcher-teaser-close:hover {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-foreground));
}
/* The message itself is the button — clicking it opens the chat. */
.webeng-launcher-teaser-msg {
  display: block;
  width: 100%;
  padding: 0.75rem 0.75rem;
  border: 0;
  border-radius: var(--wb-r-lg);
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-base);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background var(--wb-fast);
}
.webeng-launcher-teaser-msg:hover {
  background: hsl(var(--webeng-accent) / 0.08);
}

/* Unread badge on the collapsed bar. */
.webeng-launcher-bar {
  position: relative;
}
.webeng-launcher-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: var(--wb-r-full);
  background: hsl(var(--webeng-accent));
  color: #fff;
  font-size: var(--wb-t-xs);
  font-weight: 700;
  box-shadow: var(--wb-e-accent);
}

.webeng-launcher-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  max-width: 100%;
}

/* The launcher bar: a wide, centred search field — brand mark, quiet
   placeholder, neutral round send that takes the accent on hover. */
.webeng-launcher-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-height: 3.85rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: var(--wb-r-full);
  border: 1px solid hsl(var(--aui-border));
  background: var(--wb-float);
  box-shadow: var(--wb-e-lg);
  cursor: pointer;
  transition: box-shadow var(--wb-fast), transform var(--wb-fast), border-color var(--wb-fast);
}
.webeng-launcher-bar:hover {
  border-color: hsl(var(--webeng-accent) / 0.4);
  box-shadow: var(--wb-e-xl);
  transform: translateY(-1px);
}
/* Small brand mark, mirroring Zipchat's app icon in the collapsed bar. */
.webeng-launcher-mark {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  transition: width var(--wb-travel) var(--wb-ease), height var(--wb-travel) var(--wb-ease);
  display: grid;
  place-items: center;
  border-radius: var(--wb-r-sm);
  background: linear-gradient(145deg, hsl(var(--webeng-accent-bright)) 0%, hsl(var(--webeng-accent-deep)) 100%);
  color: #fff;
  font-size: var(--wb-t-sm);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.webeng-launcher-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-lg);
  text-align: left;
}
/* Neutral grey circle like Zipchat — the launcher is an invitation, not a
   primary CTA, so it does not shout in the brand colour. */
.webeng-launcher-send {
  flex: 0 0 auto;
  transition:
    width var(--wb-travel) var(--wb-ease),
    opacity var(--wb-mid) var(--wb-ease),
    background var(--wb-fast) var(--wb-ease),
    color var(--wb-fast) var(--wb-ease);
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-muted-foreground));
  transition: background var(--wb-fast), color var(--wb-fast);
}
.webeng-launcher-bar:hover .webeng-launcher-send {
  background: hsl(var(--webeng-accent));
  color: #fff;
}
.webeng-launcher-send svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
 * LAYOUT FIX: make the modal a flex column so content appended AFTER <Thread>
 * (suggestion buttons, the lead CTA, and the interactive form) is always
 * visible. The prebuilt CSS sets `.aui-modal-content { height:500px;
 * overflow:clip }` and `.aui-thread-root { height:100% }`, so Thread alone
 * filled the entire modal and everything after it was clipped off the bottom.
 * Here we let Thread flex/shrink and give the appended blocks a real slot.
 * ------------------------------------------------------------------------- */
.aui-root.aui-modal-content {
  display: flex;
  flex-direction: column;
  /* Own the coordinate space for absolutely-positioned children — the history
     drawer's backdrop is `position: absolute; inset: 0`. Without this the modal
     is static, so that backdrop resolved against Radix's `position: fixed`
     popper wrapper instead, and `overflow: hidden` does NOT clip an absolutely
     positioned descendant whose containing block sits outside the scroller. The
     drawer escaped the panel: nothing rounded its outer corners and nothing
     stopped it overhanging the modal's edges. Only desktop was affected —
     below 1024px the modal is `position: fixed`, which made it a containing
     block by accident, which is why the drawer looked right on a phone and
     wrong on a laptop. */
  position: relative;
  /* Wider than aui's default so inventory can be browsed three-across instead of
     one long column. Capped against the viewport so it still fits a phone. */
  width: min(560px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  /* Size the panel against the space Radix will actually place it in, not
     against the viewport. It is anchored ABOVE the fixed close button with
     `avoidCollisions={false}` (see ChatWidget), so its bottom is pinned at
     `100dvh - launcher-bottom - close-size - sideOffset` and the top is
     wherever the height leaves it. Measuring from the full viewport instead
     put the top at a constant -53.6px on EVERY desktop window shorter than
     766px — 1024x768 and 1280x800 both lose the header, and with collisions
     off nothing pushes it back. Reserving the launcher stack plus a 1rem
     gutter keeps the top edge at +14px at any height. Mobile replaces this
     with a full-screen panel. */
  height: min(
    680px,
    calc(
      100dvh - var(--wb-launcher-bottom) - var(--wb-close-size) -
        var(--wb-close-gap) - 1rem
    )
  );
  overflow: hidden;
  border-radius: var(--wb-r-2xl);
  box-shadow: var(--wb-e-xl);
}
.aui-root.aui-modal-content > .aui-thread-root {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* Product header and visit-level conversation history. */
.aui-root .webeng-chat-header {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  min-height: 4.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* No right reserve: assistant-ui renders no close button inside the panel
     (its modal button lives on the launcher), so 3rem was held for an element
     that never appears — leaving a visible dead gap after "New". */
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--aui-border));
  /* A whisper of the brand behind the identity block, so the header reads as
     Morgan's rather than as a generic chat chrome. */
  background:
    linear-gradient(
      180deg,
      hsl(var(--webeng-accent) / 0.07) 0%,
      hsl(var(--webeng-accent) / 0) 100%
    ),
    hsl(var(--aui-background));
}

.aui-root .webeng-chat-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.aui-root .webeng-chat-identity strong {
  font-size: var(--wb-t-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aui-root .webeng-chat-identity span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-xs);
  white-space: nowrap;
}
.aui-root .webeng-chat-identity i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: var(--wb-r-full);
  background: #22c55e;
}

.aui-root .webeng-chat-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.aui-root .webeng-chat-header-actions .webeng-header-action {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--wb-fast), border-color var(--wb-fast), color var(--wb-fast);
}
/* Stroke icons instead of the "↶" / "＋" glyphs, which rendered at different
   optical weights and sat off the text baseline. */
.aui-root .webeng-chat-header-actions .webeng-header-action svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aui-root .webeng-chat-header-actions .webeng-header-action em {
  font-style: normal;
}
.aui-root .webeng-chat-header-actions .webeng-header-action-new {
  border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--webeng-accent)) 0%, hsl(var(--webeng-accent-deep)) 100%);
  color: hsl(var(--aui-primary-foreground));
  box-shadow: var(--wb-e-accent);
}
/* Keep the primary action reading as primary on hover — the shared hover rule
   below would otherwise repaint it as a plain grey chip. */
.aui-root .webeng-chat-header-actions .webeng-header-action-new:hover {
  border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--webeng-accent)) 0%, hsl(var(--webeng-accent-deep)) 100%);
  color: hsl(var(--aui-primary-foreground));
  filter: brightness(1.07);
}
.aui-root .webeng-chat-header-actions .webeng-header-action:hover {
  background: hsl(var(--aui-muted));
  border-color: hsl(var(--aui-muted-foreground) / 0.3);
  color: hsl(var(--aui-foreground));
}

.aui-root.webeng-suggestions-active .aui-composer-root {
  display: none;
}

@media (max-width: 390px) {
  .aui-root .webeng-chat-header-actions .webeng-header-action em { display: none; }
  .aui-root .webeng-chat-header-actions .webeng-header-action { width: 2rem; justify-content: center; padding: 0; }
}

@keyframes webeng-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes webeng-slide-in {
  from { transform: translateX(-8%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.aui-root .webeng-history-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  background: rgb(15 23 42 / 0.4);
  backdrop-filter: blur(4px);
  animation: webeng-fade-in var(--wb-fast) ease-out;
}
.aui-root .webeng-history-panel {
  width: min(90%, 340px);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  /* Sharp on every corner. This is a drawer over the conversation, not a card
     floating on it: the right edge is an internal boundary against the
     backdrop, and rounding it made a full-height drawer read as a card with its
     left side chopped off. The left corners need no radius of their own either
     — the drawer is flush to the modal's edges, and the modal already clips
     them to its own 1.5rem curve via `overflow: hidden`. Setting a 1.25rem
     radius there only nests a tighter arc inside a wider one. */
  border-radius: 0;
  background: hsl(var(--aui-background));
  box-shadow: var(--wb-e-side);
  animation: webeng-slide-in var(--wb-mid) var(--wb-ease);
}
.aui-root .webeng-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid hsl(var(--aui-border));
}
.aui-root .webeng-history-heading strong,
.aui-root .webeng-history-heading span { display: block; }
.aui-root .webeng-history-heading strong { font-size: var(--wb-t-lg); }
.aui-root .webeng-history-heading span {
  margin-top: 0.2rem;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-sm);
}
.aui-root .webeng-history-heading button {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-muted));
  font-size: var(--wb-t-xl);
  cursor: pointer;
}
.aui-root .webeng-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  overflow-y: auto;
}
.aui-root .webeng-history-list button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-md);
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-foreground));
  text-align: left;
  cursor: pointer;
  transition: border-color var(--wb-fast), background var(--wb-fast), transform var(--wb-fast);
}
/* Accent rail that grows on hover — gives the list a sense of selection without
   adding another border or colour block. */
.aui-root .webeng-history-list button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 2px;
  border-radius: var(--wb-r-full);
  background: hsl(var(--webeng-accent));
  opacity: 0;
  transition: opacity var(--wb-fast), top var(--wb-fast), bottom var(--wb-fast);
}
.aui-root .webeng-history-list button:hover {
  border-color: hsl(var(--webeng-accent) / 0.4);
  background: hsl(var(--webeng-accent) / 0.04);
  transform: translateX(1px);
}
.aui-root .webeng-history-list button:hover::before {
  opacity: 1;
  top: 0.5rem;
  bottom: 0.5rem;
}
.aui-root .webeng-history-list strong { font-size: var(--wb-t-md); }
.aui-root .webeng-history-list span,
.aui-root .webeng-history-empty {
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-sm);
}
.aui-root .webeng-history-empty { padding: 1rem 0; line-height: 1.5; }
.aui-root .webeng-history-new {
  margin-top: auto;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--aui-primary));
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-primary));
  color: hsl(var(--aui-primary-foreground));
  font-size: var(--wb-t-md);
  font-weight: 600;
  cursor: pointer;
}

/* When the interactive form is showing, hide the composer text area so the
 * options take its place and the visitor focuses on the form (per design). */
.aui-root.webeng-form-active .aui-composer-root {
  display: none;
}

/* The composer stays available after an enquiry is submitted — the visitor can
   keep asking questions, and the conversation keeps being recorded against the
   lead. Only the follow-up CTA is retired. */

.aui-root .webeng-session-done {
  padding: 0.75rem 1rem;
  border-top: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-muted, 220 14% 96%));
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-base);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Managed Turnstile challenge, inside the panel rather than pinned to the
   viewport corner where it was routinely missed. Collapsed to nothing on the
   ordinary invisible pass: Turnstile still renders into the slot, but with
   `appearance: interaction-only` that render is empty, so there is no padding
   or border to give away a check that never troubled the visitor. */
.aui-root .webeng-turnstile:not(.is-needed) {
  /* No padding, border or background until there is something to show, so the
     wrapper collapses to nothing around Turnstile's own hidden render. */
  contain: layout;
}

.aui-root .webeng-turnstile.is-needed {
  display: block;
  padding: 0.75rem 1rem;
  border-top: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-muted, 220 14% 96%));
}

.aui-root .webeng-turnstile-prompt {
  margin: 0 0 0.5rem;
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-base);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* The challenge iframe is a fixed 300px; centring keeps it from sitting flush
   against one edge on a panel wider than that, and scrolls rather than
   overflows on one narrower. */
.aui-root .webeng-turnstile-slot:not(:empty) {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

/* Suggestions stay inside the conversation instead of covering it. */
/* A column with a fixed heading and ONE scrolling body.
 *
 * This capped itself at 18rem and scrolled, while .webeng-choice-grid inside it
 * ALSO declared overflow-y — two nested scroll containers, the inner one with no
 * height to scroll within. Five tiles carrying a qualifier overflow 18rem by a
 * hair, so the last option ("Speak to a sales specialist") was cut in half with
 * no way to reach it: the answer a visitor most needs when none of the
 * categories fit was the one they could not tap.
 *
 * The heading stays put, the grid scrolls, and min-height:0 is what lets a flex
 * child shrink below its content instead of pushing the last row out of view. */
.aui-root .webeng-choice-inline {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(28rem, 55dvh);
  overflow: hidden;
  border-top: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-background));
}

/* Heading row: Back sits left of the prompt so it is found where a back
   control is expected, without competing with the answers themselves. */
.aui-root .webeng-choice-inline-heading {
  position: relative;
  flex: 0 0 auto;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid hsl(var(--aui-border));
}
.aui-root .webeng-choice-back {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.aui-root .webeng-choice-back svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aui-root .webeng-choice-back:hover {
  border-color: hsl(var(--webeng-accent) / 0.5);
  color: hsl(var(--webeng-accent-deep));
}

.aui-root .webeng-choice-inline-heading strong,
.aui-root .webeng-choice-inline-heading span {
  display: block;
}
.aui-root .webeng-choice-inline-heading button {
  padding: 0;
  border: 0;
  background: transparent;
  color: hsl(var(--aui-primary));
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.aui-root .webeng-choice-inline-heading strong {
  font-size: var(--wb-t-md);
  line-height: 1.35;
}

.aui-root .webeng-choice-inline-heading span {
  margin-top: 0.2rem;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-sm);
}

/* Also auto-fit, so answer tiles gain a third column in the wider modal rather
   than stretching into two very long pills. */
.aui-root .webeng-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  /* The one scrolling body of .webeng-choice-inline — see the note there. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A tile carrying a qualifier needs room for three things, not one. At 9rem it
   gets three columns in the modal and "Brand-new specials" hyphenates across
   two lines next to a count chip — the layout that made these read as cramped.
   Short-answer grids (a list of 20 makes) keep the narrow columns, so this only
   widens the grids that earned it. */
.aui-root .webeng-choice-grid:has(.webeng-choice-meta) {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
/* One column on a phone: two 13.5rem tiles cannot both fit, and auto-fit would
   otherwise stretch a lone tile across the full width of the row below it. */
@media (max-width: 30rem) {
  .aui-root .webeng-choice-grid:has(.webeng-choice-meta) {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------------
 * INVENTORY CARDS
 *
 * Rebuilt as one component. Previously every card carried a large empty
 * selection ring (noise on all four cards to communicate a state that applies
 * to one), letterboxed thumbnails that made a grid of mixed source photos look
 * ragged, and a boxed "View details" button that competed with the card's own
 * tap target and clipped mid-row.
 *
 * Now: the photo leads, one fixed card height so rows align, selection shown by
 * border + a check that only appears when it means something, and details
 * demoted to a quiet link.
 * ------------------------------------------------------------------------- */
.aui-root .webeng-vehicle-results {
  flex: 0 0 auto;
  display: grid;
  /* auto-FILL, not auto-fit: both land on three across in the 560px modal, but
     auto-fit collapses the empty tracks, so a single result stretched to the
     full width and rendered as one enormous card with a giant photograph. A
     lone special is exactly that case. auto-fill keeps the track, so one card
     is card-sized. */
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  /* Rows take their content's height instead of being distributed, so a card
     can never be squeezed shorter than the text it contains. */
  grid-auto-rows: max-content;
  align-content: start;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-muted) / 0.35);
  /* Sized to show two whole rows. The old height cut the second row through the
     middle of a button, which reads as broken rather than as "scroll for more". */
  height: min(24rem, 48dvh);
  max-height: min(24rem, 48dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* An unanswered question owns the panel.
 *
 * A picker is a question the visitor must answer before anything else happens,
 * and the rows above it are the previous step. Showing both put an arbitrary
 * handful of vehicles above a question about WHICH vehicles to show, and cost
 * the answer list so much room that its last option could not be reached.
 *
 * Enforced here rather than in the prompt. The assistant was told repeatedly to
 * send the buttons alone and complied inconsistently — the tool now withholds
 * the rows, but a card block it writes anyway must still not land on screen.
 * CSS cannot be talked out of it.
 *
 * The cards are not destroyed, only hidden: answering the question reveals the
 * results for that answer. The cost is the narrowing case at 12-or-fewer
 * matches, where cards and refinement chips were designed to sit together — one
 * rule to revert if that turns out to matter more. */
/* An unanswered question shares the panel with its results; it does not replace
 * them.
 *
 * Hiding the cards outright removed the ones a reply had genuinely just sent —
 * "Here are 12 of the 95 used specials" above an empty space, which is the same
 * broken promise the block was meant to prevent, only inverted. Whether cards
 * belong on screen is decided by whether the reply sent any: a broad question
 * gets none because search_specials withholds the rows, so there is nothing to
 * suppress here, and a narrowed answer keeps the twelve it showed.
 *
 * What CSS owes the picker is room. The cards claim up to 48dvh and the picker
 * another 28rem, more than a phone panel has, which is what pushed the last
 * option out of reach. While a question is open the cards yield to a third of
 * the height and keep their own scroll.
 *
 * `.aui-root.aui-modal-content` is compound — one element, both classes. As a
 * descendant selector this matched nothing and appeared to do nothing at all. */
.aui-root.aui-modal-content:has(.webeng-choice-inline) .webeng-vehicle-results {
  /* Enough for a whole row. At 11rem this cut a card in half — the visitor saw
     a badge, a slice of photograph and nothing else, which is the same fault
     the pane's own height was chosen to avoid. The picker no longer depends on
     this to be reachable (it scrolls internally now), so the cards only need to
     stop dominating, not shrink to a sliver. */
  height: auto;
  min-height: 0;
  max-height: min(19rem, 36dvh);
}

.aui-root .webeng-vehicle-result {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-lg);
  background: #fff;
  box-shadow: var(--wb-e-sm);
  cursor: pointer;
  transition:
    border-color var(--wb-fast) var(--wb-ease),
    box-shadow var(--wb-fast) var(--wb-ease),
    transform var(--wb-fast) var(--wb-ease);
}
.aui-root .webeng-vehicle-result:hover,
.aui-root .webeng-vehicle-result:focus-visible {
  border-color: hsl(var(--webeng-accent) / 0.4);
  box-shadow: var(--wb-e-md);
  transform: translateY(-2px);
  outline: none;
}
.aui-root .webeng-vehicle-result.selected {
  border-color: hsl(var(--webeng-accent));
  box-shadow: var(--wb-e-accent);
}

/* Photo leads the card. A fixed ratio with `cover` gives a uniform grid from
   inconsistent source photos — `contain` letterboxed each one differently and
   made the row look misaligned. */
.aui-root .webeng-vehicle-result-media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  min-height: 0;
  /* Soft plate behind the photo: when an image URL 404s the element is hidden
     (see the img onError), so this is what remains — a clean surface rather
     than a hole, and the card keeps its shape in the grid. */
  background:
    linear-gradient(160deg, hsl(220 14% 97%) 0%, hsl(220 13% 93%) 100%);
  overflow: hidden;
}
.aui-root .webeng-vehicle-result-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aui-root .webeng-vehicle-result-condition {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--wb-r-full);
  background: #16a34a;
  color: #fff;
  font-size: var(--wb-t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: var(--wb-e-sm);
}
.aui-root .webeng-vehicle-result-condition.is-new {
  background: hsl(var(--webeng-accent));
}


/* Selection overlay. A full-media wash with a centred check reads as "choose
   this one" far better than a small radio dot, and because it is invisible at
   rest the grid stays quiet — nothing is drawn on nine cards to describe a
   state that belongs to one. */
.aui-root .webeng-vehicle-result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: hsl(var(--webeng-accent-deep) / 0.72);
  opacity: 0;
  transition: opacity var(--wb-mid) var(--wb-ease);
  pointer-events: none;
}
.aui-root .webeng-vehicle-result:hover .webeng-vehicle-result-overlay,
.aui-root .webeng-vehicle-result:focus-visible .webeng-vehicle-result-overlay,
.aui-root .webeng-vehicle-result.selected .webeng-vehicle-result-overlay {
  opacity: 1;
}

.aui-root .webeng-vehicle-result-check {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--wb-r-full);
  background: #fff;
  /* Springs in slightly after the wash so the check reads as a response to the
     hover rather than part of the background. */
  transform: scale(0.7);
  opacity: 0;
  transition:
    transform var(--wb-mid) var(--wb-ease),
    opacity var(--wb-fast) var(--wb-ease);
  transition-delay: 60ms;
}
.aui-root .webeng-vehicle-result:hover .webeng-vehicle-result-check,
.aui-root .webeng-vehicle-result:focus-visible .webeng-vehicle-result-check,
.aui-root .webeng-vehicle-result.selected .webeng-vehicle-result-check {
  transform: scale(1);
  opacity: 1;
}
.aui-root .webeng-vehicle-result-check svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: hsl(var(--webeng-accent-deep));
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aui-root .webeng-vehicle-result-overlay-label {
  color: #fff;
  font-size: var(--wb-t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Selected cards keep the wash permanently, so the choice stays legible after
   the pointer moves away. */
.aui-root .webeng-vehicle-result.selected .webeng-vehicle-result-overlay {
  background: hsl(var(--webeng-accent-deep) / 0.82);
}
@media (prefers-reduced-motion: reduce) {
  .aui-root .webeng-vehicle-result-overlay,
  .aui-root .webeng-vehicle-result-check {
    transition: none;
  }
}

.aui-root .webeng-vehicle-result-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  min-width: 0;
  /* Grows to fill a taller row, but never shrinks below its own content. */
  flex: 1 0 auto;
}
/* Two lines reserved whether or not they are used, so every card in a row is
   the same height and the grid bottom stays straight. */
.aui-root .webeng-vehicle-result-body > strong {
  font-size: var(--wb-t-md);
  font-weight: 600;
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aui-root .webeng-vehicle-result-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.aui-root .webeng-vehicle-result-price b {
  font-size: var(--wb-t-base);
  font-weight: 700;
  color: hsl(var(--webeng-accent-deep));
}
/* The old price, struck through — evidence of a saving, so it is worth the
   space, but quiet enough not to compete with the price being asked. */
.aui-root .webeng-vehicle-result-price s {
  color: hsl(220 9% 46%);
  font-size: var(--wb-t-xs);
  text-decoration-thickness: 1px;
}
/* Quiet link, not a button: the card itself is the primary action, and a boxed
   button beside it split the target in two. */
.aui-root .webeng-vehicle-result-body > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.25rem;
  color: hsl(220 9% 46%);
  font-size: var(--wb-t-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.aui-root .webeng-vehicle-result-body > a:hover {
  color: hsl(var(--webeng-accent-deep));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Answer tile. The model sends one string ("New — in stock now (157)"); the tile
   breaks it into a heading, a quiet qualifier and a count chip so it reads as a
   choice rather than a record. Left-aligned: centred text makes a two-line tile
   look like a caption, and the counts stop lining up. */
.aui-root .webeng-choice-card {
  position: relative;
  min-height: 3.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 2.6rem 0.7rem 0.85rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-lg);
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-md);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--wb-fast), border-color var(--wb-fast), background var(--wb-fast);
}


.aui-root .webeng-choice-card:hover,
.aui-root .webeng-choice-card:focus-visible {
  transform: translateY(-2px);
  border-color: hsl(var(--webeng-accent));
  background: hsl(var(--webeng-accent) / 0.04);
  box-shadow: var(--wb-e-accent-lg);
}
.aui-root .webeng-choice-card:active {
  transform: translateY(0);
}
/* The label is the answer being chosen — let it take the accent on hover so the
   whole tile reads as one target rather than a photo with text under it. */
.aui-root .webeng-choice-card:hover > span:last-child {
  color: hsl(var(--webeng-accent-deep));
}

.aui-root .webeng-lead-cta {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid hsl(var(--aui-border));
}

/* Deliberately quiet: a full-width solid pill directly under the composer reads
   as the send button and gets clicked by mistake. This is an optional shortcut,
   so it stays outlined and only fills in on hover. */
.aui-root .webeng-lead-cta-btn {
  width: auto;
  padding: 0.5rem 1rem;
  border-radius: var(--wb-r-full);
  border: 1px solid hsl(var(--aui-primary));
  background: transparent;
  color: hsl(var(--aui-primary));
  font-size: var(--wb-t-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--wb-fast), color var(--wb-fast);
}

.aui-root .webeng-lead-cta-btn:hover,
.aui-root .webeng-lead-cta-btn:focus-visible {
  background: hsl(var(--aui-primary));
  color: hsl(var(--aui-primary-foreground));
}

/* -------------------------------------------------------------------------
 * Inline follow-up form — interactive fields rendered after AI response.
 * Replaces the %%FORM%% marker block; cleared after visitor submits.
 * ------------------------------------------------------------------------- */
/* The dealership sheet is rendered inside this element but must cover the whole
   panel, so this container cannot clip it. `overflow: visible` when a sheet is
   open; the scroll cap still applies the rest of the time. */
/* While a sheet is open the form must stop being the sheet's frame.
   `position: relative` here made the form the containing block for the
   backdrop's `inset: 0` — and because an absolutely positioned child adds no
   height, the form stayed as tall as its own fields, so a 43-item picker got a
   couple of centimetres to render in. Dropping to `static` lets the backdrop
   resolve against the panel instead, which is what it was always meant to fill.
   Lifting max-height and overflow as well, so nothing clips it on the way. */
.aui-root .webeng-inline-form:has(.webeng-sheet-backdrop) {
  position: static;
  overflow: visible;
  max-height: none;
}
.aui-root .webeng-inline-form {
  position: relative;
  width: 100%;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid hsl(var(--aui-border));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 18rem;
  overflow-y: auto;
  flex: 0 0 auto;
  background: hsl(var(--aui-background));
}

/* Stepper footer: circular back, dot progress, circular next. */
/* Pinned to the bottom of the form's own scroll area. The form is capped at
   18rem and scrolls, so once it holds three fields the action fell below the
   fold and came out visually clipped — the one control the visitor needs, half
   drawn. Sticky keeps it on screen at every scroll position; the negative
   margin and matching padding let its background run to the form's edges
   instead of leaving a strip of scrolling content showing beneath it. */
.aui-root .webeng-form-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Clear space above the divider. The sticky footer sits on top of the form's
     content, so a tight margin let the last row of chips run into — and 2px
     under — its border. */
  margin: 0.9rem -1rem -1rem;
  padding: 0.75rem 1rem 0.9rem;
  border-top: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-background));
}
.aui-root .webeng-form-nav {
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--wb-r-full);
  background: transparent;
  color: hsl(var(--aui-muted-foreground));
  cursor: pointer;
  transition: background var(--wb-fast), color var(--wb-fast), opacity var(--wb-fast);
}
.aui-root .webeng-form-nav svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aui-root .webeng-form-nav:hover:not(:disabled) {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-foreground));
}
.aui-root .webeng-form-nav:disabled {
  opacity: 0.32;
  cursor: default;
}
/* Next is the filled affordance, like Zipchat's black circle. */
.aui-root .webeng-form-nav-next {
  background: hsl(var(--webeng-accent));
  color: #fff;
  box-shadow: var(--wb-e-accent);
}
.aui-root .webeng-form-nav-next:hover:not(:disabled) {
  background: hsl(var(--webeng-accent-deep));
  color: #fff;
}
.aui-root .webeng-form-nav-next:disabled {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-muted-foreground));
  box-shadow: none;
}
/* Field-level nudge, e.g. a phone number that is too short to dial. Quiet
   rather than alarming: it appears while someone is still typing, so it is a
   hint, not a rejection. */
.aui-root .webeng-form-hint {
  color: hsl(0 65% 45%);
  font-size: var(--wb-t-sm);
  line-height: 1.35;
}

/* Named action for a typed step (see the note at its use site). Sized to the
   same 2.35rem height as the circular nav buttons it sits beside, so swapping
   between the two never shifts the footer row. */
.aui-root .webeng-form-continue {
  min-height: 2.35rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--wb-r-full);
  background: hsl(var(--webeng-accent));
  color: #fff;
  box-shadow: var(--wb-e-accent);
  font-size: var(--wb-t-md);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.aui-root .webeng-form-continue:hover:not(:disabled) {
  background: hsl(var(--webeng-accent-deep));
}
.aui-root .webeng-form-continue:disabled {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-muted-foreground));
  box-shadow: none;
  cursor: default;
}

.aui-root .webeng-form-dots {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* An unanswered question reads as an outline, not a faint fill: a 0.3-alpha dot
 * on the sheet background is close enough to invisible that the visitor cannot
 * count how many questions are left, which is the only job this row has. */
.aui-root .webeng-form-dots span {
  box-sizing: border-box;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: var(--wb-r-full);
  border: 1px solid hsl(var(--aui-muted-foreground) / 0.45);
  background: transparent;
  transition: background var(--wb-fast), border-color var(--wb-fast),
    width var(--wb-fast);
}
/* Answered and current are solid, so the ring would only muddy their edge. */
.aui-root .webeng-form-dots span.done,
.aui-root .webeng-form-dots span.active {
  border-color: transparent;
}
.aui-root .webeng-form-dots span.done {
  background: hsl(var(--webeng-accent) / 0.45);
}
.aui-root .webeng-form-dots span.active {
  width: 0.9rem;
  background: hsl(var(--webeng-accent));
}

.aui-root .webeng-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* The question reads as a heading, not a field caption. */
.aui-root .webeng-form-label {
  font-size: var(--wb-t-lg);
  font-weight: 650;
  line-height: 1.35;
  color: hsl(var(--aui-foreground));
  text-transform: none;
  letter-spacing: -0.01em;
}

/* Full-width option rows separated by hairlines (Zipchat's list treatment);
   Yes/No stays two-across since a binary choice as stacked rows wastes space. */
/* Chips that wrap, not a stacked list. Anything long or numerous now goes to
   the OptionSheet, so what reaches this grid is short by definition — and one
   full-width row per title turned an eight-way choice into a scroll. Wrapping
   pills put five or so on a line and make the whole set visible at once. */
.aui-root .webeng-form-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.aui-root .webeng-form-yesno {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.aui-root .webeng-form-opts .webeng-form-opt {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  text-align: center;
}
.aui-root .webeng-form-opts .webeng-form-opt:hover {
  background: hsl(var(--webeng-accent) / 0.05);
  border-color: hsl(var(--aui-border));
}
.aui-root .webeng-form-opts .webeng-form-opt.selected {
  background: hsl(var(--webeng-accent) / 0.08);
  color: hsl(var(--webeng-accent-deep));
  font-weight: 650;
}

.aui-root .webeng-form-opt {
  min-height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: var(--wb-t-md);
  line-height: 1.3;
  padding: 0.25rem 0.75rem;
  border-radius: var(--wb-r-full);
  border: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-foreground));
  cursor: pointer;
  transition: background var(--wb-fast), border-color var(--wb-fast), color var(--wb-fast);
}

/* Trigger for a field that opens the OptionSheet. Reads as a select, not as
   another answer pill, so it is never mistaken for the choice itself. */
.aui-root .webeng-form-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-md);
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-base);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--wb-fast), background var(--wb-fast), box-shadow var(--wb-fast);
}
.aui-root .webeng-form-picker > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aui-root .webeng-form-picker > em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: var(--wb-t-sm);
  font-weight: 700;
  color: hsl(var(--webeng-accent));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aui-root .webeng-form-picker:hover {
  border-color: hsl(var(--webeng-accent) / 0.5);
  background: hsl(var(--webeng-accent) / 0.04);
}
.aui-root .webeng-form-picker.selected {
  border-color: hsl(var(--webeng-accent) / 0.55);
  color: hsl(var(--aui-foreground));
  font-weight: 600;
}

/* The sheet itself — covers the modal so a long list gets real estate instead of
   scrolling inside an 18rem box. */
@keyframes webeng-sheet-in {
  from { transform: translateY(6%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* Fixed to the viewport, not absolute inside the form.
   The sheet lives in the DOM inside .webeng-inline-form, which is capped at
   18rem with overflow-y:auto — so an absolutely positioned backdrop was
   confined to that box AND clipped by its scroll container. Its `max-height:
   88%` then resolved against a ~288px parent, leaving the 43-item list zero
   height once the header and filter had taken their share: the sheet rendered
   with a visible title and an empty body. Fixed positioning escapes both the
   height cap and the clip. */
.aui-root .webeng-sheet-backdrop {
  /* Absolute, not fixed: Radix gives the panel an inline `transform`, which
     makes it the containing block for fixed descendants anyway — so `fixed`
     would resolve against the panel and only look like it escaped. Absolute
     against the panel is honest, and the panel is now tall enough to hold a
     full-height sheet. */
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(15 23 42 / 0.42);
  backdrop-filter: blur(4px);
  animation: webeng-fade-in var(--wb-fast) ease-out;
}
.aui-root .webeng-sheet {
  display: flex;
  flex-direction: column;
  /* Matches the modal so the sheet reads as part of it rather than as a
     full-width overlay across the whole page. */
  width: 100%;
  max-width: 100%;
  /* Explicit viewport heights: a percentage of a fixed-inset parent is fine,
     but stating both floor and ceiling guarantees the list always has room. */
  height: 100%;
  /* Leave the chat header visible above the sheet: covering it removes the
     only way back and makes the picker feel like a different screen rather
     than a step inside the conversation. */
  max-height: calc(100% - 3.5rem);
  border-radius: var(--wb-r-xl) var(--wb-r-xl) 0 0;
  background: hsl(var(--aui-background));
  box-shadow: var(--wb-e-up);
  animation: webeng-sheet-in var(--wb-mid) var(--wb-ease);
  overflow: hidden;
}
.aui-root .webeng-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid hsl(var(--aui-border));
}
.aui-root .webeng-sheet-head strong {
  display: block;
  font-size: var(--wb-t-base);
  line-height: 1.3;
}
.aui-root .webeng-sheet-head span {
  display: block;
  margin-top: 0.15rem;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-sm);
}
.aui-root .webeng-sheet-head button {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-xl);
  line-height: 1;
  cursor: pointer;
}
.aui-root .webeng-sheet-search {
  padding: 0.75rem 1rem 0.5rem;
}
.aui-root .webeng-sheet-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-md);
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-base);
  outline: none;
  transition: border-color var(--wb-fast), box-shadow var(--wb-fast);
}
.aui-root .webeng-sheet-search input:focus {
  border-color: hsl(var(--webeng-accent));
  box-shadow: var(--wb-ring);
}
.aui-root .webeng-sheet-list {
  flex: 1 1 auto;
  min-height: 0; /* without this a flex child refuses to shrink and scroll */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Head and filter keep their natural height; only the list scrolls. */
.aui-root .webeng-sheet-head,
.aui-root .webeng-sheet-search {
  flex: 0 0 auto;
}
.aui-root .webeng-sheet-list button {
  padding: 0.75rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--wb-r-md);
  background: transparent;
  color: hsl(var(--aui-foreground));
  font-size: var(--wb-t-md);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background var(--wb-fast), border-color var(--wb-fast);
}
.aui-root .webeng-sheet-list button:hover {
  border-color: hsl(var(--webeng-accent) / 0.35);
  background: hsl(var(--webeng-accent) / 0.05);
}
.aui-root .webeng-sheet-list button.selected {
  border-color: hsl(var(--webeng-accent));
  background: hsl(var(--webeng-accent) / 0.08);
  color: hsl(var(--webeng-accent-deep));
  font-weight: 650;
}
.aui-root .webeng-sheet-empty {
  padding: 1.25rem 0.75rem;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-md);
  text-align: center;
}

.aui-root .webeng-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.aui-root .webeng-form-back {
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--aui-border));
  border-radius: var(--wb-r-sm);
  background: transparent;
  color: hsl(var(--aui-foreground));
  cursor: pointer;
}

.aui-root .webeng-form-opt:hover {
  background: hsl(var(--aui-muted));
  border-color: hsl(var(--aui-muted-foreground) / 0.4);
}

.aui-root .webeng-form-opt.selected {
  background: hsl(var(--aui-primary));
  border-color: hsl(var(--aui-primary));
  color: hsl(var(--aui-primary-foreground));
}

.aui-root .webeng-form-email {
  font-size: var(--wb-t-base);
  padding: 0.375rem 0.75rem;
  border-radius: var(--wb-r-sm);
  border: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-foreground));
  outline: none;
  transition: border-color var(--wb-fast);
}

.aui-root .webeng-form-email:focus {
  border-color: hsl(var(--aui-primary));
}

.aui-root .webeng-form-email::placeholder {
  color: hsl(var(--aui-muted-foreground));
}

/* Free-text answers (describe the fault, which part you need). Same treatment
   as the single-line input so a form mixing the two still reads as one set of
   fields — it differs only in being tall enough to see what you wrote. */
.aui-root .webeng-form-textarea {
  font: inherit;
  font-size: var(--wb-t-base);
  padding: 0.5rem 0.75rem;
  border-radius: var(--wb-r-sm);
  border: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-background));
  color: hsl(var(--aui-foreground));
  outline: none;
  transition: border-color var(--wb-fast);
  /* Vertical only: a widened textarea escapes the panel. */
  resize: vertical;
  min-height: 5.5rem;
  max-height: 12rem;
  width: 100%;
  box-sizing: border-box;
}

.aui-root .webeng-form-textarea:focus {
  border-color: hsl(var(--aui-primary));
}

.aui-root .webeng-form-textarea::placeholder {
  color: hsl(var(--aui-muted-foreground));
}

.aui-root .webeng-form-submit {
  margin-top: 0.2rem;
  padding: 0.5rem 1rem;
  border-radius: var(--wb-r-full);
  border: none;
  background: hsl(var(--aui-primary));
  color: hsl(var(--aui-primary-foreground));
  font-size: var(--wb-t-md);
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity var(--wb-fast);
}

.aui-root .webeng-form-submit:hover {
  opacity: 0.88;
}

/* ----------------------------------------------------------------------------
 * LAUNCHER — host-proof surface rules.
 * Scoped under .aui-root.webeng-launcher (0,2,0 or higher) so the host theme
 * cannot win, with every paint property stated explicitly for each state.
 * ------------------------------------------------------------------------- */
.aui-root.webeng-launcher .webeng-launcher-bar,
.aui-root.webeng-launcher .webeng-launcher-bar:hover,
.aui-root.webeng-launcher .webeng-launcher-bar:focus,
.aui-root.webeng-launcher .webeng-launcher-bar:focus-visible,
.aui-root.webeng-launcher .webeng-launcher-bar:active {
  background-color: #fff;
  background-image: none;
  color: #18181b;
}
.aui-root.webeng-launcher .webeng-launcher-close,
.aui-root.webeng-launcher .webeng-launcher-close:hover,
.aui-root.webeng-launcher .webeng-launcher-close:focus,
.aui-root.webeng-launcher .webeng-launcher-close:active {
  background-color: #fff;
  background-image: none;
  color: #18181b;
}
.aui-root.webeng-launcher .webeng-launcher-teaser {
  background-color: #fff;
  background-image: none;
}


/* The send stays neutral until hover: the launcher is an invitation, not a
   primary CTA. Accent on hover is the one place it earns the brand colour. */
.aui-root.webeng-launcher .webeng-launcher-send {
  background-color: hsl(220 14% 96%);
  background-image: none;
  color: hsl(220 9% 46%);
}
.aui-root.webeng-launcher .webeng-launcher-bar:hover .webeng-launcher-send {
  background-color: hsl(var(--webeng-accent));
  color: #fff;
}
/* The identity mark keeps the brand gradient — the single accent that is
   always visible, and the thing that makes the launcher recognisably Morgan. */
.aui-root.webeng-launcher .webeng-launcher-mark {
  color: #fff;
}

/* ----------------------------------------------------------------------------
 * Launcher motion: send alignment, typed caret, staggered prompts.
 * ------------------------------------------------------------------------- */

/* The send sits hard right. It needs `margin-left:auto` rather than relying on
   the text to fill the bar: the text is max-width capped (so it can collapse
   to zero for the footer puck), which left the send floating mid-bar. */
.aui-root.webeng-launcher .webeng-launcher-send {
  margin-left: auto;
}

/* Blinking caret after the typed text. */
@keyframes webeng-caret-blink {
  0%, 45%  { opacity: 1; }
  55%, 100% { opacity: 0; }
}
.webeng-caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: hsl(var(--webeng-accent));
  animation: webeng-caret-blink 1.1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .webeng-caret { animation: none; opacity: 0; }
}

/* ----------------------------------------------------------------------------
 * Panel placement.
 *
 * Radix positions the popover with INLINE styles, which beat stylesheet rules,
 * so overriding placement needs !important here. Scoped tightly to the modal so
 * nothing else is affected.
 * ------------------------------------------------------------------------- */

/* Desktop: centred in the viewport, sitting directly above the circular close
   so panel and close share one vertical axis. */
@media (min-width: 1024px) {
  /* Placement is Radix's job (see AssistantModal.Content props): it anchors the
     panel to the launcher and keeps it centred on the close button. Overriding
     position/left/bottom here fought those inline styles and pushed the panel
     off centre. Only the size is ours. */
  .aui-root.aui-modal-content {
    width: min(560px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* Mobile / tablet: full screen. A 400px panel on a 390px phone is a window
   inside a window — vehicle cards and forms need the room. The breakpoint
   matches the launcher's own (1023.98px) so panel and close never disagree
   about where the bottom of the screen is. */
@media (max-width: 1023.98px) {
  /* Neutralise Radix's popper wrapper first. It carries an inline
     `transform: translate(...)`, which makes it the containing block for any
     `position: fixed` descendant — so the fullscreen rule below was sizing the
     panel against the WRAPPER instead of the viewport, and the panel came out
     mispositioned or invisible on phones. Flattening the wrapper lets `fixed`
     mean what it says. */
  [data-radix-popper-content-wrapper]:has( > .aui-modal-content ) {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 60 !important;
  }
  .aui-root.aui-modal-content {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  /* Give the results their own generous slice of a short screen, and never let
     the thread squeeze them out. On a phone the panel is only ~600px tall
     before the keyboard appears; the cards sit BELOW the thread, so without a
     floor they were pushed off-screen and the visitor was told about 23 sedans
     they could not see. */
  .aui-root .webeng-vehicle-results {
    height: auto;
    min-height: 14rem;
    max-height: 52dvh;
  }
  /* The thread yields first — it can scroll, the cards cannot appear at all if
     they have no room. */
  .aui-root.aui-modal-content > .aui-thread-root {
    min-height: 6rem;
    flex: 1 1 0;
  }

  /* The panel covers the launcher on mobile, so its circular close is
     unreachable and the header close takes over. Hide it WITHOUT display:none:
     this element is Radix's popover anchor, and an anchor with no box cannot be
     measured — the panel then fails to position and never appears at all. Zero
     opacity keeps the box (and therefore the positioning) intact. */
  .aui-root.webeng-launcher.webeng-launcher-open {
    opacity: 0;
    pointer-events: none;
  }
}

/* Header close: mobile only. On desktop the circular close under the panel
   already does this job, and two closes on one screen is one too many. */
.aui-root .webeng-header-close {
  display: none;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-foreground));
  cursor: pointer;
}
.aui-root .webeng-header-close svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1023.98px) {
  /* Corner-anchored: on a fullscreen panel the close belongs at the screen's
     top-right, where a phone user reaches for it, not tucked in beside the
     History/New pills. */
  .aui-root .webeng-chat-header {
    padding-right: 3.25rem;
  }
  .aui-root .webeng-header-close {
    display: grid;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Minimise chip on the bar's top-right corner. It sits outside the trigger
   because a <button> may not contain another <button>. */
.aui-root.webeng-launcher .webeng-launcher-min {
  position: absolute;
  right: 0.5rem;
  bottom: 3.35rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid hsl(220 13% 91%);
  border-radius: var(--wb-r-full);
  background-color: #fff;
  background-image: none;
  color: hsl(220 9% 46%);
  box-shadow: var(--wb-e-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.aui-root.webeng-launcher .webeng-launcher-min svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
/* Revealed on hover/focus of the launcher — always-visible it competes with
   the send button for attention on every page. */
.aui-root.webeng-launcher:hover .webeng-launcher-min,
.aui-root.webeng-launcher .webeng-launcher-min:focus-visible {
  opacity: 1;
}
.aui-root.webeng-launcher .webeng-launcher-min:hover {
  color: hsl(var(--webeng-accent-deep));
  border-color: hsl(var(--webeng-accent) / 0.45);
}
@media (hover: none) {
  /* No hover on touch — keep it permanently available instead. */
  .aui-root.webeng-launcher .webeng-launcher-min { opacity: 1; }
}

/* The ask button: visually the bar's send arrow, but a real sibling button so
   it can submit while the bar itself only opens. Positioned over the bar's
   right end, matching .webeng-launcher-send exactly. */
.aui-root.webeng-launcher .webeng-launcher-ask {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--wb-r-full);
  background-color: hsl(220 14% 96%);
  background-image: none;
  color: hsl(220 9% 46%);
  cursor: pointer;
  transition: background-color var(--wb-fast) var(--wb-ease), color var(--wb-fast) var(--wb-ease);
}
.aui-root.webeng-launcher .webeng-launcher-ask svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Accent when the launcher is hovered — same treatment the inert arrow had, so
   the swap between the two is invisible. */
.aui-root.webeng-launcher:hover .webeng-launcher-ask,
.aui-root.webeng-launcher .webeng-launcher-ask:hover,
.aui-root.webeng-launcher .webeng-launcher-ask:focus-visible {
  background-color: hsl(var(--webeng-accent));
  color: #fff;
}
/* Reserve the arrow's space in the bar so the text never runs under it. */
.aui-root.webeng-launcher .webeng-launcher-bar {
  padding-right: 3.5rem;
}

/* View-all tile: occupies the last grid slot, deliberately distinct from a
   vehicle card (no photo, accent-tinted) so it reads as an exit to the full
   listing rather than another vehicle to choose. */
.aui-root .webeng-vehicle-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  border: 1px dashed hsl(var(--webeng-accent) / 0.45);
  border-radius: var(--wb-r-lg);
  background: hsl(var(--webeng-accent) / 0.05);
  color: hsl(var(--webeng-accent-deep));
  text-align: center;
  text-decoration: none;
  transition:
    background var(--wb-fast) var(--wb-ease),
    border-color var(--wb-fast) var(--wb-ease),
    transform var(--wb-fast) var(--wb-ease);
}
.aui-root .webeng-vehicle-more:hover {
  background: hsl(var(--webeng-accent) / 0.1);
  border-color: hsl(var(--webeng-accent));
  transform: translateY(-2px);
}
.aui-root .webeng-vehicle-more-count {
  font-size: var(--wb-t-xl);
  font-weight: 800;
  line-height: 1.1;
}
.aui-root .webeng-vehicle-more strong {
  font-size: var(--wb-t-md);
  font-weight: 650;
  line-height: 1.25;
}
.aui-root .webeng-vehicle-more-go {
  color: hsl(220 9% 46%);
  font-size: var(--wb-t-xs);
  font-weight: 600;
}


/* ----------------------------------------------------------------------------
 * Touch text-entry sizing. MUST STAY LAST IN THIS FILE.
 *
 * iOS Safari silently zooms the whole page in whenever a focused text field
 * computes under 16px — and it never zooms back out, so the visitor is left
 * pinching a page they were reading a moment ago. The widget's type ramp tops
 * out at 15px, so every typeable surface is pinned to exactly 16px below the
 * desktop breakpoint.
 *
 * `px`, not `rem`: a host theme setting `html { font-size: 62.5% }` would
 * quietly put a rem value back under the threshold.
 *
 * Last in the file because a media query adds NO specificity. These selectors
 * are all (0,2,0), exactly matching the component rules that set their normal
 * size, so this block only wins by source order. It first shipped up beside the
 * composer, which put it BEFORE .webeng-form-email and .webeng-sheet-search —
 * both of which then overrode it, and the lead form's name and phone fields
 * carried on zooming on iPhone while the composer looked fixed. Adding a rule
 * for a new input below this block will silently reintroduce that bug.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .aui-root .aui-composer-input,
  .aui-root .webeng-form-email,
  .aui-root .webeng-form-textarea,
  .aui-root .webeng-sheet-search input {
    font-size: 16px;
  }
}

/* Heading above a group of answer tiles. Only rendered when the assistant sends
   several labelled groups at once — the "show me everything" case — where the
   label is what separates a make from a condition. A single question sends one
   unlabelled group and looks exactly as it always has. */
.aui-root .webeng-choice-group-label {
  margin: 0.75rem 0.75rem 0;
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aui-root .webeng-choice-group-label + .webeng-choice-grid {
  padding-top: 0.4rem;
}

/* Edit control on a user message. assistant-ui hides its own behind hover, which
   does not exist on a phone, so this one is always present (see
   EditableUserMessage). Quiet until touched: it sits beside the bubble and must
   not compete with it. */
/* The pencil belongs beside the bubble it edits, not stranded on a row above it.
   assistant-ui lays a user message out as a two-column grid — a flexible gutter,
   then the bubble — and drops every child into column 2, which is what put the
   control on its own line. Moving the bar into the gutter and right-aligning it
   parks the pencil hard against the bubble's left edge, vertically centred. */
.aui-root .aui-user-message-root > .webeng-user-actions {
  /* Under the message, not beside it, and only while the message is hovered or
     focused — a pencil sitting permanently next to every line reads as clutter. */
  grid-column: 2;
  grid-row: 2;
  opacity: 0;
  transition: opacity var(--wb-fast) var(--wb-ease);
  display: flex;
  /* assistant-ui's own .aui-user-action-bar-root — whose class this element also
     carries — sets `flex-direction: column`. Left at that, the axes below mean
     the opposite of what they read as: justify-content would push the pencil
     down the row and align-items would centre it in the gutter, which is what
     left it floating mid-gap. Stating the direction makes the two lines that
     follow mean what they say. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  gap: 0.25rem;
  margin: 0;
  padding-right: 0.4rem;
}
.aui-root .aui-user-message-root:hover > .webeng-user-actions,
.aui-root .aui-user-message-root:focus-within > .webeng-user-actions {
  opacity: 1;
}

/* Touch has no hover, so keep it visible there rather than unreachable. */
@media (hover: none) {
  .aui-root .aui-user-message-root > .webeng-user-actions {
    opacity: 1;
  }
}

.aui-root .aui-user-message-root > .aui-user-message-content {
  grid-column: 2;
  grid-row: 1;
}
.aui-root .webeng-user-edit {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--wb-r-full);
  background: transparent;
  color: hsl(var(--aui-muted-foreground));
  cursor: pointer;
  transition: background var(--wb-fast), color var(--wb-fast);
}
.aui-root .webeng-user-edit svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aui-root .webeng-user-edit:hover,
.aui-root .webeng-user-edit:focus-visible {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-foreground));
}

/* --- Answer tile internals (see .webeng-choice-card above) --- */
.aui-root .webeng-choice-label {
  font-size: var(--wb-t-base);
  font-weight: 650;
  line-height: 1.25;
  color: hsl(var(--aui-foreground));
}
/* The qualifier is context, not the answer — it must never compete with it. */
.aui-root .webeng-choice-meta {
  font-size: var(--wb-t-xs);
  font-weight: 500;
  line-height: 1.3;
  color: hsl(var(--aui-muted-foreground));
}
/* Count sits in the corner as a chip so a column of tiles can be compared at a
   glance. Tabular figures keep the digits aligned between rows. */
.aui-root .webeng-choice-count {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--wb-r-full);
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-muted-foreground));
  font-size: var(--wb-t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.aui-root .webeng-choice-card.selected {
  border-color: hsl(var(--webeng-accent));
  background: hsl(var(--webeng-accent) / 0.06);
  box-shadow: var(--wb-ring);
}
.aui-root .webeng-choice-card.selected .webeng-choice-label {
  color: hsl(var(--webeng-accent-deep));
}
.aui-root .webeng-choice-card.selected .webeng-choice-count {
  background: hsl(var(--webeng-accent));
  color: #fff;
}
/* A tick in the corner is the clearest "this one is on" signal, and it does not
   depend on colour alone. */
.aui-root .webeng-choice-card.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: hsl(var(--webeng-accent));
}

/* Confirm bar for the multi-select (grouped) view. Sticks to the bottom of the
   scrolling panel so the action stays reachable however long the list runs. */
.aui-root .webeng-choice-apply {
  position: sticky;
  bottom: 0;
  display: flex;
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--aui-border));
  background: hsl(var(--aui-background));
}
.aui-root .webeng-choice-apply-btn {
  flex: 1;
  min-height: 2.6rem;
  border: 0;
  border-radius: var(--wb-r-full);
  background: linear-gradient(135deg, hsl(var(--webeng-accent)) 0%, hsl(var(--webeng-accent-deep)) 100%);
  color: #fff;
  font-size: var(--wb-t-md);
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--wb-e-accent);
  transition: filter var(--wb-fast) var(--wb-ease);
}
.aui-root .webeng-choice-apply-btn:hover:not(:disabled) {
  filter: brightness(1.07);
}
.aui-root .webeng-choice-apply-btn:disabled {
  background: hsl(var(--aui-muted));
  color: hsl(var(--aui-muted-foreground));
  box-shadow: none;
  cursor: default;
}

/* Special-offer badge on a result card. Deliberately the accent rather than the
   neutral stock badge — a running deal is the most commercially interesting
   thing in a grid and should be the first thing the eye lands on. */
.aui-root .webeng-vehicle-result-condition.is-special {
  background: linear-gradient(135deg, hsl(var(--webeng-accent)) 0%, hsl(var(--webeng-accent-deep)) 100%);
  color: #fff;
  box-shadow: var(--wb-e-accent);
  letter-spacing: 0.04em;
}

/* Single-step form: no Back, no dots, so the action has the row to itself and
   stretches rather than floating at the right end of an empty bar. */
.aui-root .webeng-form-foot-single {
  justify-content: stretch;
}
.aui-root .webeng-form-foot-single .webeng-form-continue {
  flex: 1;
}


/* Byline + thumbs under an assistant reply: who answered on the left, the
   rating on the right. Always visible — a rating nobody can see is never given,
   and the byline has to be readable for it to do its job. */
.aui-root .webeng-assistant-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.1rem;
  padding: 0 0.25rem;
}

.aui-root .webeng-assistant-byline {
  font-size: var(--wb-t-sm);
  color: hsl(var(--aui-muted-foreground));
  line-height: 1.2;
}

.aui-root .webeng-assistant-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  /* Sits inside the foot row, so no padding of its own. */
  margin-left: auto;
}

.aui-root .webeng-assistant-actions button {
  color: hsl(var(--aui-muted-foreground));
  background: transparent;
  border-radius: var(--wb-r-sm);
  padding: 0.15rem;
  transition: color var(--wb-fast) var(--wb-ease),
    background-color var(--wb-fast) var(--wb-ease);
}

.aui-root .webeng-assistant-actions button:hover,
.aui-root .webeng-assistant-actions button:focus-visible {
  color: hsl(var(--webeng-accent));
  background-color: hsl(var(--aui-accent));
}

/* assistant-ui sets a bare data-submitted on the chosen rating — no value, so
   matching ='true' never fired and a rated reply lost its mark. */
.aui-root .webeng-feedback[data-submitted] {
  color: hsl(var(--webeng-accent));
}