.demo {

  --purple: var(--mn-violet);
  --purple-glow: var(--mn-violet-rgb);
  --ink: var(--mn-ink);
  --text-body: #3A3548;
  --text-trace: #5B4B86;
  --text-deep-purple: var(--mn-violet-ink);

  --text-faint: #767381;

  --trace-label: #7A69A8;
  --purple-border: #C9B7F0;

  --violet-hl: #EAE1FB;
  --bubble-user: #EDE6FB;
  --bubble-ai: #F5F4F8;
  --surface-tint: #F4F1FE;
  --border-hairline: var(--mn-hairline);
  --border: #E2E0E9;

  --item-bg: #fff;
  --item-bd: var(--border);
  --item-bd-hi: var(--purple-border);
  --item-bg-hi: var(--surface-tint);

  --win-chip: 54px;
  --win-chip-out: .24;

  --drift-k: 1;
  --dfont-body: 'Onest', system-ui, sans-serif;
  --dfont-display: 'Familjen Grotesk', system-ui, sans-serif;
  --dfont-mono: ui-monospace, Menlo, monospace;

  --trace-step: 420ms;

  --mask-tok-bg-rgb: 236, 234, 241;
  --mask-tok-bg: rgb(var(--mask-tok-bg-rgb));
  --mask-tok-ink: #5F5B6B;
  --mask-tok-size: 11px;

  --mask-stock: #FFFFFF;

  --mask-pill-pad: 9px 12px;

  --mask-recede-text: #6E6486;
  --mask-recede-icon: #9A93AE;
  --mask-fill-held:   rgba(255, 255, 255, .60);

  --mask-edge-floor: .08;

  --mask-tok-bg-floor: .45;

  --elev-near:    var(--mn-elev-near);
  --elev-surface: var(--mn-elev-surface);

  --r-card: 14px;
  --r-item: 10px;
  --r-control: 8px;
  --r-inline: 5px;

  --dt-doc: 18px;
  --dt-body: 13px;
  --dt-sm: 12px;
  --dt-label: 11px;

  width: 100%;

  max-width: 392px;
  min-width: 0;
  margin: 0 auto;
  position: relative;
  font-family: var(--dfont-body);
  color: var(--ink);
  padding: 6px 0;
}

.demo-knowledge {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 13px;
}

.demo-doc {
  overflow: hidden; background: #fff; border-radius: var(--r-item);
  border: 1px solid var(--item-bd);
  padding: 9px 11px 11px;
}
.demo-knowledge .demo-doc {
  border-width: 0; max-height: 0; opacity: 0; transform: translateY(6px);
  margin-top: 0; padding: 0 11px;
  transition: opacity var(--mn-dur-lg) ease, transform var(--mn-dur-lg) ease, max-height var(--mn-dur-lg) ease,
              padding var(--mn-dur-lg) ease, margin var(--mn-dur-lg) ease, border-width var(--mn-dur-md) ease;
}
.demo-knowledge.is-reading .demo-doc {
  max-height: 190px; opacity: 1; transform: none; margin-top: 9px;
  padding: 9px 11px 11px; border-width: 1px;
}

.demo-doc-head {
  display: flex; align-items: center; gap: 6px;
  font: 600 var(--dt-body)/1.2 var(--dfont-display); color: var(--text-body);
}
.demo-doc-head svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--text-faint); }
.demo-doc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.demo-doc-body {
  overflow: hidden; max-height: 200px; opacity: 1;
  transition: max-height var(--mn-dur-lg) ease, opacity var(--mn-dur-md) ease;
}
.demo-knowledge.is-filed .demo-doc-body { max-height: 0; opacity: 0; }

.demo-knowledge.is-filed .demo-doc { padding-bottom: 9px; }
.demo-doc-rule { height: 1px; background: var(--border-hairline); margin: 8px 0; }

.demo-doc-line { margin: 0 0 5px; font: 400 var(--dt-body)/1.45 var(--dfont-body); color: var(--text-body); }

.demo-knowledge.is-inked .demo-doc-line .demo-highlight {
  background-size: 100% 100%; font-weight: 600;
  transition: background-size var(--mn-dur-xl) var(--mn-ease-standard),
              font-weight 0s linear var(--mn-dur-xl);
}

@media (prefers-reduced-motion: reduce) {

  :where(html:not([data-motion="on"])) :is(.demo-doc) { transition: none; }
}

.demo-catchup { display: flex; flex-direction: column; min-height: 0; }

.demo-conversation {
  padding: 0;
  display: flex; flex-direction: column; gap: 13px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: smooth;
}
.demo-conversation::-webkit-scrollbar { width: 0; height: 0; }

.demo-user {
  align-self: flex-end; max-width: 90%;
  max-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--mn-dur-md) ease, transform var(--mn-dur-md) ease, max-height var(--mn-dur-lg) ease;
}
.demo-user.is-shown { opacity: 1; transform: translateY(0); max-height: 160px; }

.demo-bubble {
  padding: 11px 14px; font: 400 var(--dt-body)/1.5 var(--dfont-body); color: var(--text-body);
}

.demo-bubble--user { background: var(--bubble-user); color: var(--text-deep-purple); border-radius: var(--r-card) var(--r-card) 4px var(--r-card); }
.demo-bubble--answer { background: var(--bubble-ai); border-radius: var(--r-card) var(--r-card) var(--r-card) 4px; }

.demo-trace {
  align-self: stretch;
  border-left: 2px solid var(--purple);
  overflow: hidden;
  opacity: 0; max-height: 0; border-left-width: 0; margin-top: -13px;
  transition: opacity var(--mn-dur-md) ease, max-height var(--mn-dur-lg) ease, margin var(--mn-dur-md) ease, border-width var(--mn-dur-md) ease;
}
.demo-trace.is-open { opacity: 1; max-height: 420px; border-left-width: 2px; margin-top: 0; }
.demo-trace-inner { padding: 8px 0 8px 15px; font: 400 var(--dt-body)/1.5 var(--dfont-body); color: var(--text-trace); }

.demo-trace-label {
  font: 600 var(--dt-label)/1 var(--dfont-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--purple);

  display: flex; align-items: center; gap: 6px;
}

.demo-think { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.demo-think svg {
  position: absolute; inset: 0; width: 12px; height: 12px; display: block;
  transition: opacity var(--mn-dur-md) ease, transform var(--mn-dur-md) ease;
}
.demo-think-spin { animation: demo-think-spin 1s linear infinite; }
.demo-think-done { opacity: 0; transform: scale(.7); }

:is(.demo-trace, .demo-routing-trace).is-settled .demo-think-spin { opacity: 0; }
:is(.demo-trace, .demo-routing-trace).is-settled .demo-think-done { opacity: 1; transform: none; }
@keyframes demo-think-spin { to { transform: rotate(360deg); } }

:is(.demo-bubble--answer, .demo-routing-bubble--ai)
  :is(b, i, strong, em, .demo-highlight) {
  background-image: none;
}

.demo-answer,
.demo-routing-bubble--ai {
  align-self: flex-start; max-width: 100%; overflow: hidden;
  opacity: 0; max-height: 0; margin-top: -13px; transform: translateY(6px);
  transition: opacity var(--mn-dur-lg) ease, max-height var(--mn-dur-lg) ease, margin var(--mn-dur-md) ease, transform var(--mn-dur-lg) ease;
}
.demo-answer.is-shown,
.demo-routing.is-answering .demo-routing-bubble--ai {
  opacity: 1; max-height: 520px; margin-top: 0; transform: translateY(0);
}

.demo-composer {
  flex: 0 0 auto; margin-top: auto;

  display: flex; align-items: flex-end; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--border-hairline);
}

.demo-composer-input {
  flex: 1; min-height: 30px; display: flex; align-items: center;
  font: 400 var(--dt-body)/1.5 var(--dfont-body); color: var(--text-faint);
}
.demo-composer-send {
  width: 30px; height: 30px; border-radius: var(--r-control); background: var(--purple);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.demo-composer-send svg { display: block; }

.demo-chat-row-snippet .demo-highlight,
.demo-doc-line .demo-highlight {
  font-weight: 400;
  background-image: linear-gradient(var(--violet-hl), var(--violet-hl));
  background-repeat: no-repeat; background-position: left center;
  background-size: 0% 100%;
  padding: 1px 3px; border-radius: 3px;
  transition: background-size var(--mn-dur-xl) var(--mn-ease-standard);
}

.demo-mask {
  position: relative;

  flex: 1; min-height: 0;

  isolation: isolate;
}

.demo-mask-chip {
  position: absolute; overflow: hidden;

  padding: var(--mask-pill-pad);
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  width: max-content; max-width: 82%;

  background: var(--mask-stock); border-radius: var(--r-item);

  border: 1px solid rgba(var(--purple-glow),
    max(var(--mask-edge-floor), var(--mask-edge, .12) * var(--mask-edge-k)));

  will-change: transform, translate;

  animation-duration: var(--mask-cycle), var(--mask-cycle), var(--mask-cycle);
  animation-timing-function: linear, var(--mn-ease-out), var(--mn-ease-standard);
  animation-iteration-count: infinite;
  animation-play-state: var(--mask-run);
}

.demo-mask-icon {
  flex: 0 0 auto; color: var(--purple);
  animation-duration: var(--mask-cycle);
  animation-timing-function: var(--mn-ease-standard);
  animation-iteration-count: infinite;
  animation-name: demo-mask-dim;
  animation-play-state: var(--mask-run);
}
.demo-mask-icon svg { width: 100%; height: 100%; display: block; }

.demo-mask-val {
  display: grid; grid-template-areas: "v";

  --tok-on: 0;
  animation-duration: var(--mask-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: var(--mask-run);
}
.demo-mask-real {
  display: block; font: 400 var(--dt-body)/1.35 var(--dfont-body);
  color: var(--text-body); white-space: nowrap;

  grid-area: v; justify-self: start;
  margin: 0 -3px; padding: 0 3px; border-radius: var(--r-inline);

  opacity: calc(1 - var(--tok-on));

  animation-duration: var(--mask-cycle);
  animation-timing-function: var(--mn-ease-standard);
  animation-iteration-count: infinite;
  animation-name: demo-mask-ink;
  animation-play-state: var(--mask-run);
}
.demo-mask-tok-lay {
  grid-area: v; margin: -2px -3px; padding: 2px 3px; display: flex; align-items: center;

  opacity: var(--tok-on);
}
.demo-mask-tok {
  font: 500 var(--mask-tok-size)/1.4 var(--dfont-mono);
  color: var(--mask-tok-ink); background: var(--mask-tok-bg);
  border-radius: var(--r-inline); padding: 1px 5px; white-space: nowrap;

  animation-duration: var(--mask-cycle);
  animation-timing-function: var(--mn-ease-standard);
  animation-iteration-count: infinite;
  animation-name: demo-mask-tok-dim;
  animation-play-state: var(--mask-run);
}

.demo-mask-edge {

  position: absolute; top: 0; bottom: 0; left: -11px; right: -11px; z-index: 9;
  background: linear-gradient(to right,
    rgba(var(--purple-glow), 0) 0, rgba(var(--purple-glow), .30) 7px,
    rgb(var(--purple-glow)) 10px, rgb(var(--purple-glow)) 12px,
    rgba(var(--purple-glow), .30) 15px, rgba(var(--purple-glow), 0) 22px);
  opacity: 0; pointer-events: none;
  animation-duration: var(--mask-cycle);
  animation-timing-function: var(--mn-ease-in-out);
  animation-iteration-count: infinite;
  animation-play-state: var(--mask-run);
}

.demo-mask-chip--near { --mask-edge: .24; }
.demo-mask-chip--near .demo-mask-real { letter-spacing: -.01em; }
.demo-mask-chip--near .demo-mask-icon { width: 14px; height: 14px; }
.demo-mask-chip--near .demo-mask-tok { padding: 2px 6px; }
.demo-mask-chip--mid { --mask-edge: .15; }
.demo-mask-chip--mid .demo-mask-real { font-size: calc(var(--dt-body) - 1px); }
.demo-mask-chip--mid .demo-mask-icon { width: 13px; height: 13px; }
.demo-mask-chip--far { --mask-edge: .09; }
.demo-mask-chip--far .demo-mask-real { font-size: calc(var(--dt-body) - 2px); }
.demo-mask-chip--far .demo-mask-icon { width: 12px; height: 12px; }
.demo-mask-chip--far .demo-mask-tok { font-size: calc(var(--mask-tok-size) - 1px); }

.demo-mask-reply {

  position: absolute;

  border-radius: var(--r-item);
  left: 4%; right: 4%;

  top: 50.47%; translate: 0 -50%;
  background: var(--mask-stock);
  border: 1px solid rgba(var(--purple-glow), .26);
  color: var(--text-body);
  padding: 10px 12px;

  box-shadow: 0 0 30px -9px rgba(var(--purple-glow), .20),
              0 -22px 44px -24px rgba(var(--purple-glow), .34),
              0 22px 44px -24px rgba(var(--purple-glow), .34),
              0 1px 3px rgba(var(--mn-ink-rgb), .07);

  transform-origin: 50% 50%; opacity: 0;
  clip-path: inset(50% -70px 50% -70px);
  animation-duration: var(--mask-cycle), var(--mask-cycle);
  animation-timing-function: linear, var(--mn-ease-out);
  animation-iteration-count: infinite, infinite;
  animation-name: demo-mask-reply-in, demo-mask-card-open;
  animation-play-state: var(--mask-run);
}

.demo-mask-reply-head { display: flex; align-items: center; gap: 8px; }
.demo-mask-reply-body { margin-block-start: 7px; }

.demo-mask-reply-who { font: 600 12.5px/1 var(--dfont-display); color: var(--purple); }

.demo-mask-mark,
.demo-window-mark {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: var(--r-inline);
  display: grid; place-items: center; font: 700 11px/1 var(--dfont-display);
}
.demo-mask-mark { background: var(--purple); color: #fff; }
.demo-window-mark { background: rgba(255, 255, 255, .22); color: #fff; }
.demo-mask-note {
  display: block; font: 400 12.5px/1.5 var(--dfont-body); opacity: 0;
  animation-duration: var(--mask-cycle);
  animation-timing-function: var(--mn-ease-out-soft);
  animation-iteration-count: infinite; animation-name: demo-mask-note-in;
  animation-play-state: var(--mask-run);
}
.demo-mask-note b { font-weight: 600; }

.demo-mask-note-lead { display: block; margin-block-end: 10px; }
.demo-mask-note-ident { display: block; font-weight: 600; }
.demo-mask-note-body { display: block; }

[data-mask] {
  --mask-cycle: 11.0s; --mask-run: paused;

  --mask-stage-h: 405px;
  display: flex; flex-direction: column; min-height: var(--mask-stage-h);
}
[data-mask].is-live { --mask-run: running; }
@media (min-width: 1000px) { [data-mask] { --mask-stage-h: 418px; } }

@keyframes demo-mask-ed-addr { 0%, 2.93% { transform: translateX(0); opacity: 0 } 3.18% { transform: translateX(0); opacity: 1 } 15.45% { transform: translateX(calc(100% - 22px)); opacity: 1 } 16.45%, 100% { transform: translateX(calc(100% - 22px)); opacity: 0 } }
.demo-mask-chip--addr .demo-mask-edge { animation-name: demo-mask-ed-addr; }
@keyframes demo-mask-ed-dob { 0%, 8.39% { transform: translateX(0); opacity: 0 } 8.64% { transform: translateX(0); opacity: 1 } 20.91% { transform: translateX(calc(100% - 22px)); opacity: 1 } 21.91%, 100% { transform: translateX(calc(100% - 22px)); opacity: 0 } }
.demo-mask-chip--dob .demo-mask-edge { animation-name: demo-mask-ed-dob; }
@keyframes demo-mask-ed-pref { 0%, 13.84% { transform: translateX(0); opacity: 0 } 14.09% { transform: translateX(0); opacity: 1 } 26.36% { transform: translateX(calc(100% - 22px)); opacity: 1 } 27.36%, 100% { transform: translateX(calc(100% - 22px)); opacity: 0 } }
.demo-mask-chip--pref .demo-mask-edge { animation-name: demo-mask-ed-pref; }
@keyframes demo-mask-ed-phone { 0%, 19.3% { transform: translateX(0); opacity: 0 } 19.55% { transform: translateX(0); opacity: 1 } 31.82% { transform: translateX(calc(100% - 22px)); opacity: 1 } 32.82%, 100% { transform: translateX(calc(100% - 22px)); opacity: 0 } }
.demo-mask-chip--phone .demo-mask-edge { animation-name: demo-mask-ed-phone; }
@keyframes demo-mask-ed-name { 0%, 24.75% { transform: translateX(0); opacity: 0 } 25% { transform: translateX(0); opacity: 1 } 37.27% { transform: translateX(calc(100% - 22px)); opacity: 1 } 38.27%, 100% { transform: translateX(calc(100% - 22px)); opacity: 0 } }
.demo-mask-chip--name .demo-mask-edge { animation-name: demo-mask-ed-name; }
@keyframes demo-mask-ed-kept { 0%, 30.2% { transform: translateX(0); opacity: 0 } 30.45% { transform: translateX(0); opacity: 1 } 42.73% { transform: translateX(calc(100% - 22px)); opacity: 1 } 43.73%, 100% { transform: translateX(calc(100% - 22px)); opacity: 0 } }
.demo-mask-chip--kept .demo-mask-edge { animation-name: demo-mask-ed-kept; }

@keyframes demo-mask-tok-addr { 0%, 10.91% { --tok-on: 0 } 11.16%, 100% { --tok-on: 1 } }
.demo-mask-chip--addr .demo-mask-val { animation-name: demo-mask-tok-addr; }
@keyframes demo-mask-tok-dob { 0%, 16.36% { --tok-on: 0 } 16.61%, 100% { --tok-on: 1 } }
.demo-mask-chip--dob .demo-mask-val { animation-name: demo-mask-tok-dob; }
@keyframes demo-mask-tok-phone { 0%, 27.27% { --tok-on: 0 } 27.52%, 100% { --tok-on: 1 } }
.demo-mask-chip--phone .demo-mask-val { animation-name: demo-mask-tok-phone; }
@keyframes demo-mask-tok-name { 0%, 32.73% { --tok-on: 0 } 32.98%, 100% { --tok-on: 1 } }
.demo-mask-chip--name .demo-mask-val { animation-name: demo-mask-tok-name; }

@keyframes demo-mask-recede {
  0%, 54.09% { background: var(--mask-stock); --mask-edge-k: 1 }
  64%, 92.73% { background: var(--mask-fill-held); --mask-edge-k: 0 }
  98.64%, 100% { background: var(--mask-stock); --mask-edge-k: 1 }
}
@keyframes demo-mask-ink {
  0%, 54.09% { color: var(--text-body) }
  64%, 92.73% { color: var(--mask-recede-text) }
  98.64%, 100% { color: var(--text-body) }
}
@keyframes demo-mask-dim {
  0%, 54.09% { color: var(--purple) }
  64%, 92.73% { color: var(--mask-recede-icon) }
  98.64%, 100% { color: var(--purple) }
}

@keyframes demo-mask-tok-dim {
  0%, 54.09% { color: var(--mask-tok-ink); background: var(--mask-tok-bg) }
  64%, 92.73% { color: var(--mask-recede-text); background: rgba(var(--mask-tok-bg-rgb), var(--mask-tok-bg-floor)) }
  98.64%, 100% { color: var(--mask-tok-ink); background: var(--mask-tok-bg) }
}

@keyframes demo-mask-part-addr { 0%, 47% { translate: 0 0 } 57%, 92.73% { translate: 0 -48.1px } 98.64%, 100% { translate: 0 0 } }
@keyframes demo-mask-part-dob { 0%, 47% { translate: 0 0 } 57%, 92.73% { translate: 0 -42.1px } 98.64%, 100% { translate: 0 0 } }
@keyframes demo-mask-part-pref { 0%, 47% { translate: 0 0 } 57%, 92.73% { translate: 0 -42.1px } 98.64%, 100% { translate: 0 0 } }
@keyframes demo-mask-part-phone { 0%, 47% { translate: 0 0 } 57%, 92.73% { translate: 0 48.67px } 98.64%, 100% { translate: 0 0 } }
@keyframes demo-mask-part-name { 0%, 47% { translate: 0 0 } 57%, 92.73% { translate: 0 42.1px } 98.64%, 100% { translate: 0 0 } }
@keyframes demo-mask-part-kept { 0%, 47% { translate: 0 0 } 57%, 92.73% { translate: 0 56.7px } 98.64%, 100% { translate: 0 0 } }

@keyframes demo-mask-drift-addr { 0% { transform: translate3d(0px, -2.98px, 0) rotate(0.59deg) } 10% { transform: translate3d(0.94px, -3.09px, 0) rotate(0.1deg) } 20% { transform: translate3d(1.52px, -2.02px, 0) rotate(-0.43deg) } 30% { transform: translate3d(1.52px, -0.18px, 0) rotate(-0.8deg) } 40% { transform: translate3d(0.94px, 1.73px, 0) rotate(-0.86deg) } 47% { transform: translate3d(0.3px, 2.71px, 0) rotate(-0.71deg) } 50% { transform: translate3d(0px, 2.22px, 0) rotate(-0.44deg) } 57% { transform: translate3d(-0.1px, 0.48px, 0) rotate(-0.04deg) } 65% { transform: translate3d(-0.19px, 0.4px, 0) rotate(0.03deg) } 75% { transform: translate3d(-0.24px, 0.17px, 0) rotate(0.1deg) } 85% { transform: translate3d(-0.19px, -0.12px, 0) rotate(0.13deg) } 92.73% { transform: translate3d(-0.11px, -0.32px, 0) rotate(0.12deg) } 96% { transform: translate3d(-0.21px, -1.38px, 0) rotate(0.39deg) } 100% { transform: translate3d(0px, -2.98px, 0) rotate(0.59deg) } }
@keyframes demo-mask-drift-dob { 0% { transform: translate3d(-1.75px, -0.9px, 0) rotate(0.72deg) } 10% { transform: translate3d(-0.45px, -2.03px, 0) rotate(0.58deg) } 20% { transform: translate3d(1.02px, -2.39px, 0) rotate(0.21deg) } 30% { transform: translate3d(2.1px, -1.84px, 0) rotate(-0.23deg) } 40% { transform: translate3d(2.38px, -0.58px, 0) rotate(-0.59deg) } 47% { transform: translate3d(2.03px, 0.46px, 0) rotate(-0.71deg) } 50% { transform: translate3d(1.3px, 0.67px, 0) rotate(-0.54deg) } 57% { transform: translate3d(0.13px, 0.26px, 0) rotate(-0.1deg) } 65% { transform: translate3d(-0.05px, 0.35px, 0) rotate(-0.06deg) } 75% { transform: translate3d(-0.25px, 0.33px, 0) rotate(0deg) } 85% { transform: translate3d(-0.35px, 0.19px, 0) rotate(0.06deg) } 92.73% { transform: translate3d(-0.34px, 0.03px, 0) rotate(0.1deg) } 96% { transform: translate3d(-1.12px, -0.17px, 0) rotate(0.37deg) } 100% { transform: translate3d(-1.75px, -0.9px, 0) rotate(0.72deg) } }
@keyframes demo-mask-drift-pref { 0% { transform: translate3d(1.85px, 2.45px, 0) rotate(-0.09deg) } 10% { transform: translate3d(2.4px, 1.18px, 0) rotate(-0.44deg) } 20% { transform: translate3d(2.03px, -0.54px, 0) rotate(-0.63deg) } 30% { transform: translate3d(0.88px, -2.05px, 0) rotate(-0.58deg) } 40% { transform: translate3d(-0.6px, -2.78px, 0) rotate(-0.3deg) } 47% { transform: translate3d(-1.53px, -2.66px, 0) rotate(-0.03deg) } 50% { transform: translate3d(-1.38px, -1.82px, 0) rotate(0.07deg) } 57% { transform: translate3d(-0.35px, -0.24px, 0) rotate(0.05deg) } 65% { transform: translate3d(-0.35px, -0.05px, 0) rotate(0.08deg) } 75% { transform: translate3d(-0.23px, 0.2px, 0) rotate(0.1deg) } 85% { transform: translate3d(-0.02px, 0.38px, 0) rotate(0.07deg) } 92.73% { transform: translate3d(0.15px, 0.42px, 0) rotate(0.03deg) } 96% { transform: translate3d(0.75px, 1.44px, 0) rotate(0.04deg) } 100% { transform: translate3d(1.85px, 2.45px, 0) rotate(-0.09deg) } }
@keyframes demo-mask-drift-phone { 0% { transform: translate3d(2.1px, 0.32px, 0) rotate(-0.7deg) } 10% { transform: translate3d(1.02px, 1.65px, 0) rotate(-0.67deg) } 20% { transform: translate3d(-0.45px, 2.36px, 0) rotate(-0.38deg) } 30% { transform: translate3d(-1.75px, 2.17px, 0) rotate(0.05deg) } 40% { transform: translate3d(-2.38px, 1.14px, 0) rotate(0.47deg) } 47% { transform: translate3d(-2.28px, 0.14px, 0) rotate(0.66deg) } 50% { transform: translate3d(-1.57px, -0.24px, 0) rotate(0.52deg) } 57% { transform: translate3d(-0.21px, -0.19px, 0) rotate(0.11deg) } 65% { transform: translate3d(-0.05px, -0.32px, 0) rotate(0.08deg) } 75% { transform: translate3d(0.17px, -0.36px, 0) rotate(0.03deg) } 85% { transform: translate3d(0.33px, -0.26px, 0) rotate(-0.04deg) } 92.73% { transform: translate3d(0.36px, -0.11px, 0) rotate(-0.08deg) } 96% { transform: translate3d(1.24px, -0.15px, 0) rotate(-0.34deg) } 100% { transform: translate3d(2.1px, 0.32px, 0) rotate(-0.7deg) } }
@keyframes demo-mask-drift-name { 0% { transform: translate3d(-2.03px, -2.26px, 0) rotate(0.17deg) } 10% { transform: translate3d(-2.4px, -0.85px, 0) rotate(0.5deg) } 20% { transform: translate3d(-1.85px, 0.88px, 0) rotate(0.64deg) } 30% { transform: translate3d(-0.6px, 2.28px, 0) rotate(0.54deg) } 40% { transform: translate3d(0.88px, 2.8px, 0) rotate(0.23deg) } 47% { transform: translate3d(1.75px, 2.53px, 0) rotate(-0.05deg) } 50% { transform: translate3d(1.51px, 1.68px, 0) rotate(-0.12deg) } 57% { transform: translate3d(0.36px, 0.2px, 0) rotate(-0.06deg) } 65% { transform: translate3d(0.33px, 0px, 0) rotate(-0.09deg) } 75% { transform: translate3d(0.19px, -0.25px, 0) rotate(-0.09deg) } 85% { transform: translate3d(-0.02px, -0.4px, 0) rotate(-0.06deg) } 92.73% { transform: translate3d(-0.19px, -0.41px, 0) rotate(-0.02deg) } 96% { transform: translate3d(-0.87px, -1.38px, 0) rotate(0deg) } 100% { transform: translate3d(-2.03px, -2.26px, 0) rotate(0.17deg) } }
@keyframes demo-mask-drift-kept { 0% { transform: translate3d(0px, 2.98px, 0) rotate(-0.59deg) } 10% { transform: translate3d(-0.94px, 3.09px, 0) rotate(-0.1deg) } 20% { transform: translate3d(-1.52px, 2.02px, 0) rotate(0.43deg) } 30% { transform: translate3d(-1.52px, 0.18px, 0) rotate(0.8deg) } 40% { transform: translate3d(-0.94px, -1.73px, 0) rotate(0.86deg) } 47% { transform: translate3d(-0.3px, -2.71px, 0) rotate(0.71deg) } 50% { transform: translate3d(0px, -2.22px, 0) rotate(0.44deg) } 57% { transform: translate3d(0.1px, -0.48px, 0) rotate(0.04deg) } 65% { transform: translate3d(0.19px, -0.4px, 0) rotate(-0.03deg) } 75% { transform: translate3d(0.24px, -0.17px, 0) rotate(-0.1deg) } 85% { transform: translate3d(0.19px, 0.12px, 0) rotate(-0.13deg) } 92.73% { transform: translate3d(0.11px, 0.32px, 0) rotate(-0.12deg) } 96% { transform: translate3d(0.21px, 1.38px, 0) rotate(-0.39deg) } 100% { transform: translate3d(0px, 2.98px, 0) rotate(-0.59deg) } }

@keyframes demo-mask-reply-in { 0%, 54.08% { opacity: 0 } 54.09% { opacity: 1 } 92.73% { opacity: 1 } 98.64%, 100% { opacity: 0 } }
@keyframes demo-mask-card-open {
  0%, 54.09% { clip-path: inset(50% -70px 50% -70px); transform: scale(.95) }
  64%, 100% { clip-path: inset(-75% -70px -75% -70px); transform: scale(1) }
}
@keyframes demo-mask-note-in { 0%, 58.64% { opacity: 0 } 65.91% { opacity: 1 } 92.73% { opacity: 1 } 97.73%, 100% { opacity: 0 } }

.demo-mask-chip--addr { left: 8%; top: 35.28%; z-index: 5; animation-name: demo-mask-drift-addr, demo-mask-part-addr, demo-mask-recede; }
.demo-mask-chip--dob { left: 13%; top: 11.82%; z-index: 3; animation-name: demo-mask-drift-dob, demo-mask-part-dob, demo-mask-recede; }
.demo-mask-chip--pref { left: 18%; top: 18.45%; z-index: 1; animation-name: demo-mask-drift-pref, demo-mask-part-pref, demo-mask-recede; }
.demo-mask-chip--phone { left: 31%; top: 51.8%; z-index: 4; animation-name: demo-mask-drift-phone, demo-mask-part-phone, demo-mask-recede; }
.demo-mask-chip--name { left: 33%; top: 78.85%; z-index: 6; animation-name: demo-mask-drift-name, demo-mask-part-name, demo-mask-recede; }
.demo-mask-chip--kept { left: 48%; top: 62.63%; z-index: 2; animation-name: demo-mask-drift-kept, demo-mask-part-kept, demo-mask-recede; }

@media (prefers-reduced-motion: reduce) {
  :where(html:not([data-motion="on"])) :is(.demo-mask, .demo-mask-chip, .demo-mask-real,
    .demo-mask-val, .demo-mask-icon, .demo-mask-tok-lay, .demo-mask-tok, .demo-mask-edge,
    .demo-mask-reply, .demo-mask-note) { animation: none !important; }
  :where(html:not([data-motion="on"])) :is(.demo-mask-reply,
    .demo-mask-note) { opacity: 1; }

  :where(html:not([data-motion="on"])) :is(.demo-mask-chip--addr, .demo-mask-chip--dob,
    .demo-mask-chip--phone, .demo-mask-chip--name) { --tok-on: 1; }

  :where(html:not([data-motion="on"])) .demo-mask-reply { clip-path: none; }

  :where(html:not([data-motion="on"])) .demo-mask-chip--addr { translate: 0 -48.1px; }
  :where(html:not([data-motion="on"])) .demo-mask-chip--dob { translate: 0 -42.1px; }
  :where(html:not([data-motion="on"])) .demo-mask-chip--pref { translate: 0 -42.1px; }
  :where(html:not([data-motion="on"])) .demo-mask-chip--phone { translate: 0 48.67px; }
  :where(html:not([data-motion="on"])) .demo-mask-chip--name { translate: 0 42.1px; }
  :where(html:not([data-motion="on"])) .demo-mask-chip--kept { translate: 0 56.7px; }
  :where(html:not([data-motion="on"])) .demo-mask-chip {
    --mask-edge-k: 0;
    background: var(--mask-fill-held);
  }
  :where(html:not([data-motion="on"])) .demo-mask-real { color: var(--mask-recede-text); }
  :where(html:not([data-motion="on"])) .demo-mask-icon { color: var(--mask-recede-icon); }

  :where(html:not([data-motion="on"])) .demo-mask-tok {
    color: var(--mask-recede-text);
    background: rgba(var(--mask-tok-bg-rgb), var(--mask-tok-bg-floor));
  }
}

.demo-chat-rows { display: flex; flex-direction: column; }

.demo-chat-row.is-in:first-child { margin-top: 9px; }
.demo-chat-row.is-in:not(:first-child) { margin-top: 6px; }

.demo-chat-row {
  display: flex; flex-direction: column; gap: 2px; padding: 0 10px;
  border: 1px solid var(--item-bd); border-width: 0; border-radius: var(--r-item); background: var(--item-bg);
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px);

  transition: opacity var(--mn-dur-lg) ease, transform var(--mn-dur-lg) ease, max-height var(--mn-dur-lg) ease, padding var(--mn-dur-lg) ease, margin var(--mn-dur-lg) ease, border-color var(--mn-dur-md) ease, border-width var(--mn-dur-md) ease, background var(--mn-dur-md) ease;
}

.demo-chat-row.is-in { opacity: 1; transform: none; max-height: 72px; padding: 8px 10px; border-width: 1px; }

.demo-chat-row-head {
  display: flex; align-items: baseline; gap: 8px;
}

.demo-chat-row-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--dt-body)/1.15 var(--dfont-display); color: var(--text-body);
}

.demo-chat-row-date {
  flex: 0 0 auto; font: 600 10px/1 var(--dfont-body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.demo-chat-row-body {

  overflow: hidden; max-height: 48px; opacity: 1;
  transition: max-height var(--mn-dur-lg) ease, opacity var(--mn-dur-md) ease;
}
.demo-catchup.is-filed .demo-chat-row-body { max-height: 0; opacity: 0; }

.demo-catchup.is-filed .demo-chat-row { gap: 0; }

.demo-chat-row-snippet { font: 400 var(--dt-body)/1.35 var(--dfont-body); color: var(--text-body); }

.demo-chat-row.is-hi .demo-chat-row-snippet .demo-highlight {
  background-size: 100% 100%; font-weight: 600;
  transition: background-size var(--mn-dur-xl) var(--mn-ease-standard),
              font-weight 0s linear var(--mn-dur-xl);
}

@media (min-width: 1000px) {
  .demo {

    max-width: 432px;
    --dt-doc: 20px;
    --win-chip: 60px; --win-chip-out: .42;
    --dt-body: 14px; --dt-sm: 13px; --dt-label: 12px;
    --mask-tok-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  :where(html:not([data-motion="on"])) .demo-chat-row { transition: none; }

  :where(html:not([data-motion="on"])) .demo-chat-row-snippet .demo-highlight {
    transition: none;
  }

  :where(html:not([data-motion="on"])) .demo-think-spin { animation: none; }
  :where(html:not([data-motion="on"])) .demo-think svg { transition: none; }
}

.demo-routing {

  display: flex; flex-direction: column; gap: 13px;

  justify-content: flex-start;
}

.demo-routing-bubble {
  display: block;
  font: 400 var(--dt-body)/1.5 var(--dfont-body); padding: 11px 14px;
}

.demo-routing-bubble--user {
  align-self: flex-end; max-width: 90%;
  transition: opacity var(--mn-dur-xl) var(--mn-ease-in-out), transform var(--mn-dur-xl) var(--mn-ease-in-out);
  background: var(--bubble-user); color: var(--text-deep-purple);
  border-radius: var(--r-card) var(--r-card) 4px var(--r-card);
  opacity: 0; transform: translateY(-7px);
}

.demo-routing-bubble--ai {
  background: var(--bubble-ai); color: var(--text-body);
  border-radius: var(--r-card) var(--r-card) var(--r-card) 4px;
  white-space: pre-wrap;
}
.demo-routing.is-ask       .demo-routing-bubble--user { opacity: 1; transform: none; }

.demo-routing-trace {
  align-self: stretch;
  border-left: 2px solid var(--purple);
  overflow: hidden;
  opacity: 0; max-height: 0; border-left-width: 0; margin-top: -12px;
  transition: opacity var(--mn-dur-md) ease, max-height var(--mn-dur-lg) ease, margin var(--mn-dur-md) ease, border-width var(--mn-dur-md) ease;
}
.demo-routing.is-thinking .demo-routing-trace {
  opacity: 1; max-height: 260px; border-left-width: 2px; margin-top: 0;
}

.demo-routing-trace-inner {
  padding: 8px 0 8px 15px;
  font: 400 var(--dt-body)/1.5 var(--dfont-body); color: var(--text-trace);
}

.demo-routing-trace-label {
  font: 600 var(--dt-label)/1 var(--dfont-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--purple);

  display: flex; align-items: center; gap: 6px;
}

.demo-routing-note,
.demo-routing-reason {
  margin: 0;
}

.demo-routing-reason { color: var(--text-deep-purple); }

.demo-routing-trace-inner > * {
  overflow: hidden;
  max-height: 0; opacity: 0; transform: translateY(6px); margin-top: 0;
  transition: opacity var(--mn-dur-lg) ease, transform var(--mn-dur-lg) ease, max-height var(--mn-dur-lg) ease, margin var(--mn-dur-lg) ease;
}
.demo-routing.is-thinking .demo-routing-trace-label {
  max-height: 30px; opacity: 1; transform: none;
}
.demo-routing.is-thinking .demo-routing-note {
  max-height: 72px; opacity: 1; transform: none; margin-top: 9px; transition-delay: var(--trace-step);
}
.demo-routing.is-thinking .demo-routing-models {
  max-height: 80px; opacity: 1; transform: none; margin-top: 10px; transition-delay: calc(var(--trace-step) * 2);
}

.demo-routing.is-committed .demo-routing-note {
  max-height: 0; opacity: 0; margin-top: 0; transition-delay: 0s;
}
.demo-routing.is-committed .demo-routing-reason {
  max-height: 72px; opacity: 1; transform: none; margin-top: 9px; transition-delay: .12s;
}

.demo-routing-models { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.demo-routing-model {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--item-bg); border: 1px solid var(--item-bd); border-radius: var(--r-item);
  white-space: nowrap;

  transition: opacity var(--mn-dur-md) ease, border-color var(--mn-dur-md) ease, background var(--mn-dur-md) ease;
}

.demo-routing-model-logo {
  width: 14px; height: 14px; display: block; flex: 0 0 auto;
  transform: translateY(0.7px);
}

.demo-routing-model-name {
  font: 600 var(--dt-body)/14px var(--dfont-display); color: var(--text-body); white-space: nowrap;
}

@media (max-width: 420px) {
  .demo-routing-model-name { display: none; }
  .demo-routing-model { padding: 6px 7px; }

  .demo-routing .demo-composer { display: none; }
}

.demo-routing-model.is-hi { border-color: var(--item-bd-hi); background: var(--item-bg-hi); }

.demo-routing.is-committed .demo-routing-model.is-miss { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  :where(html:not([data-motion="on"])) :is(.demo-routing-bubble, .demo-routing-trace,
    .demo-routing-note, .demo-routing-model) {
    transition: none !important; animation: none !important;
  }

  :where(html:not([data-motion="on"])) .demo-window-chip { animation: none !important; }
}

.demo-window-wrap { position: relative; }
.demo-window {
  position: relative; z-index: 1;

  background: #fff; border: 1px solid rgba(var(--purple-glow), .26);
  border-radius: 14px; overflow: hidden;

  box-shadow: var(--elev-surface);
}

.demo-window-bar { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--border-hairline); background: #F6F5F8; }
.demo-window-dots { display: flex; gap: 4px; flex: none; }
.demo-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.demo-window-dots--ghost i { background: transparent; }

.demo-window-address { flex: 1; max-width: 170px; margin-inline: auto; height: 18px; display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 0 9px; box-sizing: border-box; border-radius: 999px; background: #fff; border: 1px solid var(--border-hairline); color: var(--text-faint); }
.demo-window-url { font: 400 9.5px/1 var(--dfont-body); color: var(--mn-muted); letter-spacing: .01em; }

.demo-window-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--purple); color: #fff; }
.demo-window-top svg, .demo-window-address svg, .demo-window-user svg, .demo-window-send svg { display: block; }

.demo-window-title { font: 600 13px/1 var(--dfont-display); color: #fff; letter-spacing: -.01em; }
.demo-window-user { margin-left: auto; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.demo-window-body { padding: 22px 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.demo-window-greeting { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding-top: 4px; }

.demo-window-hello { font: 600 var(--dt-doc)/1.2 var(--dfont-display); color: var(--ink); letter-spacing: -.015em; }

.demo-window-composer { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 999px; padding: 9px 8px 9px 14px; }
.demo-window-placeholder { flex: 1; font: 400 var(--dt-body)/1.2 var(--dfont-body); color: var(--text-faint); }
.demo-window-mic { color: var(--text-faint); flex: none; display: block; }
.demo-window-send { width: 27px; height: 27px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; flex: none; }

.demo-window-label { font: 600 var(--dt-label)/1 var(--dfont-body); letter-spacing: .1em; text-transform: uppercase; color: var(--trace-label); }

.demo-window-suggested { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.demo-window-suggestion { display: flex; flex-direction: column; gap: 2px; padding: 9px 2px; }
.demo-window-suggestion + .demo-window-suggestion { border-top: 1px solid var(--border-hairline); }
.demo-window-suggestion-title { font: 600 var(--dt-sm)/1.3 var(--dfont-body); color: var(--text-body); }
.demo-window-suggestion-detail { font: 400 var(--dt-label)/1.4 var(--dfont-body); color: var(--text-faint); }

.demo-window-chip {
  position: absolute; z-index: 2;
  width: var(--win-chip); height: var(--win-chip); border-radius: 50%;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-near);
}
.demo-window-chip .demo-model-logo { display: block; width: calc(var(--win-chip) * .46); height: calc(var(--win-chip) * .46); }
.demo-window-chip--1 { left: calc(var(--win-chip) * var(--win-chip-out) * -1); top: 17%; }
.demo-window-chip--2 { right: calc(var(--win-chip) * var(--win-chip-out) * -1); top: 45%; }
.demo-window-chip--3 { left: 24%; bottom: calc(var(--win-chip) * var(--win-chip-out) * -1); }

.demo-window-chip--1 { animation: demo-chip-drift-a 7.3s ease-in-out -1.1s infinite; }
.demo-window-chip--2 { animation: demo-chip-drift-b 8.9s ease-in-out -3.4s infinite; }
.demo-window-chip--3 { animation: demo-chip-drift-c 6.7s ease-in-out -5.2s infinite; }

@property --mask-edge-k { syntax: '<number>'; inherits: true; initial-value: 1; }

@property --tok-on { syntax: '<number>'; inherits: true; initial-value: 0; }

@keyframes demo-chip-drift-a { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(calc(4px * var(--drift-k)), calc(-8px * var(--drift-k)), 0) rotate(calc(2.2deg * var(--drift-k))); } }
@keyframes demo-chip-drift-b { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(calc(-6px * var(--drift-k)), calc(6px * var(--drift-k)), 0) rotate(calc(-1.8deg * var(--drift-k))); } }
@keyframes demo-chip-drift-c { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(calc(6px * var(--drift-k)), calc(7px * var(--drift-k)), 0) rotate(calc(1.6deg * var(--drift-k))); } }

.demo-dictate {
  display: flex; flex-direction: column;
  min-height: 100%;
}

.demo-dictate-body {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; flex: 1;

  padding: 26px 22px 24px;
  box-sizing: border-box;
}

.demo-dictate-transcript,
.demo-dictate-actions { max-width: 380px; width: 100%; }

.demo-dictate-transcript { flex: 1; margin-top: 32px; }

.demo-dictate-status {
  font: 600 var(--dt-label)/1 var(--dfont-body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  text-align: center; min-height: 11px;
}
.demo-dictate.is-recording .demo-dictate-status { color: var(--purple); }

.demo-dictate-mic {
  position: relative; flex: none;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--item-bg); border: 1px solid var(--item-bd);
  color: var(--text-faint);
  transition: background var(--mn-dur-sm) ease, border-color var(--mn-dur-sm) ease,
              color var(--mn-dur-sm) ease;
}
.demo-dictate-mic > svg { width: 26px; height: 26px; display: block; position: relative; z-index: 1; }
.demo-dictate.is-recording .demo-dictate-mic {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
.demo-dictate.is-working .demo-dictate-mic,
.demo-dictate.is-done .demo-dictate-mic { color: var(--purple); border-color: var(--purple-border); }
.demo-dictate-ring {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid var(--purple); opacity: 0;

  pointer-events: none;
}
.demo-dictate.is-recording .demo-dictate-ring { animation: dictatePulse 1.5s ease-out infinite; }
@keyframes dictatePulse {
  0%   { opacity: .5; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.45); }
}

.demo-dictate-transcript {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; border-radius: var(--r-item);
  border: 1px solid var(--border-hairline); background: #FBFAFD;
  font: 400 var(--dt-body)/1.45 var(--dfont-body); color: var(--text-body);
}
.demo-dictate-placeholder { color: var(--text-faint); }
.demo-dictate-placeholder.is-hidden { display: none; }

.demo-dictate-placeholder.is-measuring { display: none; }
.demo-dictate-out { display: block; }

.demo-dictate-actions {
  width: 100%; display: flex; gap: 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--mn-dur-sm) ease, transform var(--mn-dur-sm) ease;
}
.demo-dictate-actions.is-shown { opacity: 1; transform: none; }
.demo-dictate-btn {
  flex: 1; text-align: center; padding: 8px 10px; border-radius: 999px;
  font: 600 var(--dt-label)/1.2 var(--dfont-body);
  border: 1px solid var(--item-bd); color: var(--text-body); background: var(--item-bg);
}
.demo-dictate-btn--send { background: var(--purple); border-color: var(--purple); color: #fff; }

@media (prefers-reduced-motion: reduce) {

  :where(html:not([data-motion="on"])) :is(.demo-dictate-ring) { animation: none !important; }
  :where(html:not([data-motion="on"])) :is(.demo-dictate-actions,
    .demo-dictate-mic) { transition: none !important; }
}