/* Stacking only. Visuals stay with homepage home-assistant.css / style.css. */

#Welcome .graffiti {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  display: block;
  z-index: -1;
  width: 80px;
  height: 60px;
  min-width: 0;
}

@media (max-width: 768px) {
  #Welcome .graffiti {
    display: none;
  }

  /* Hidden on mobile, still the page's h1 for screen readers. */
  .mainHome #Welcome {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mainHome .Introduction {
    padding-bottom: 0;
  }

  .homeStage h1 {
    margin: 0 0 var(--space-4) !important;
  }
}

[data-intro-chat].introChat {
  position: relative;
  width: 100%;
  --intro-titlebar-h: 20px;
  --intro-window-pad-x: 24px;
  --intro-window-pad-y: 48px;
}

/* Mac-style window chrome (desktop). Mobile drops the slab below. */
[data-intro-chat] .homeAssistant__inner {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #c8c8d0) 70%, #9a9aa4);
  background: #F4F6FA;
  box-shadow: 0 12px 32px -14px rgb(23 18 70 / 14%);
}

[data-intro-chat] .introChat__titlebar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--intro-titlebar-h);
  padding: 0 10px;
  border-bottom: 1px solid color-mix(in srgb, #bdbdbd 55%, transparent);
  background: #ededed;
}

[data-intro-chat] .introChat__traffic {
  position: absolute;
  left: 10px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transform: translateY(-50%);
}

/* The dots are the window's controls (home-assistant.js): close, minimise,
   expand. Each is a 9px dot with a taller hit area; the glyphs show while the
   pointer or the keyboard is on the group, as on a Mac. */
[data-intro-chat] .introChat__dot {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18) inset;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

[data-intro-chat] .introChat__dot::before {
  content: "";
  position: absolute;
  inset: -6px -2px;
}

[data-intro-chat] .introChat__dot:focus-visible {
  outline: 2px solid #5670ff;
  outline-offset: 2px;
}

[data-intro-chat] .introChat__dot--close { background-color: #ff5f57; }
[data-intro-chat] .introChat__dot--min { background-color: #febc2e; }
[data-intro-chat] .introChat__dot--max { background-color: #28c840; }

[data-intro-chat] .introChat__traffic:hover .introChat__dot--close,
[data-intro-chat] .introChat__traffic:focus-within .introChat__dot--close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2.8 2.8l3.4 3.4M6.2 2.8L2.8 6.2' stroke='%23000' stroke-opacity='.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

[data-intro-chat] .introChat__traffic:hover .introChat__dot--min,
[data-intro-chat] .introChat__traffic:focus-within .introChat__dot--min {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2.2 4.5h4.6' stroke='%23000' stroke-opacity='.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

[data-intro-chat] .introChat__traffic:hover .introChat__dot--max,
[data-intro-chat] .introChat__traffic:focus-within .introChat__dot--max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2.2 4.5h4.6M4.5 2.2v4.6' stroke='%23000' stroke-opacity='.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

[data-intro-chat] .introChat__reopen {
  display: none;
}

[data-intro-chat] .introChat__appTitle {
  font-family: var(--font-meta);
  font-size: calc(0.6875rem * var(--ds-font-scale));
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #4a4a4a;
  user-select: none;
}

[data-intro-chat] .introChat__demoBadge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.12em 0.45em;
  border-radius: 999px;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #c62828;
  vertical-align: 0.05em;
}

[data-intro-chat] .introChat__composer {
  box-sizing: border-box;
  padding: 8px var(--intro-window-pad-x) var(--intro-window-pad-y);
}

[data-intro-chat] .introChat__composer .homeAssistant__form {
  margin-bottom: 10px;
}

/* The whole conversation is in the HTML and shows without any script. On load
   the nine opening messages pop in one after another (later answers keep
   home-assistant.css's own entry), the same on every screen size; no
   scroll runway, no sticky window, nothing tied to scrolling. */
[data-intro-chat] .homeAssistant {
  display: flex !important;
  position: relative;
  min-height: 0;
}

[data-intro-chat] .homeAssistant__thread {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--intro-window-pad-y) var(--intro-window-pad-x) 12px;
  min-height: 50vh;
  overflow: visible;
}

/* Mobile: bubbles float on the page — no window chrome or title bar. */
@media (max-width: 768px) {
  [data-intro-chat].introChat {
    --intro-window-pad-x: 16px;
    --intro-window-pad-y: 12px;
  }

  [data-intro-chat] .homeAssistant__inner {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  [data-intro-chat] .introChat__titlebar {
    display: none;
  }

  [data-intro-chat] .homeAssistant__thread {
    padding: 0;
    gap: var(--space-5);
    min-height: 0;
  }

  /* Composer as a messaging input bar: quick-reply chips in one scrolling
     row, a pill field with a round send button, the small print under it. */
  [data-intro-chat] .introChat__composer {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-3);
    padding-right: var(--intro-window-pad-x);
    padding-bottom: var(--intro-window-pad-y);
    padding-left: var(--intro-window-pad-x);
  }

  [data-intro-chat] .introChat__composer .homeAssistant__suggestions {
    order: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-2);
    margin-top: 0;
    margin-right: calc(-1 * var(--intro-window-pad-x));
    margin-bottom: var(--space-2);
    margin-left: calc(-1 * var(--intro-window-pad-x));
    padding-top: 2px;
    padding-right: var(--intro-window-pad-x);
    padding-bottom: 6px;
    padding-left: var(--intro-window-pad-x);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--intro-window-pad-x);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__suggestions::-webkit-scrollbar {
    display: none;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__suggestions li {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__chip {
    white-space: nowrap;
    padding: 7px 12px 7px 10px;
    /* !important: canvas-board.css styles the chips with !important too. */
    border: 1px solid var(--frgd) !important;
    color: var(--frgd);
    background: var(--bkgd, #fff) !important;
    font-weight: 500;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__chip:hover:not(:disabled),
  [data-intro-chat] .introChat__composer .homeAssistant__chip:focus-visible {
    background: var(--action) !important;
    border-color: var(--frgd) !important;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__form {
    order: 2;
    margin-bottom: var(--space-2);
  }

  [data-intro-chat] .introChat__composer .homeAssistant__input {
    padding-top: 12px;
    padding-right: 54px;
    padding-bottom: 12px;
    padding-left: 18px;
    border: 1px solid var(--border, #e1e0e7);
    border-radius: 999px;
    background: var(--bkgd, #fff);
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
  }

  [data-intro-chat] .introChat__composer .homeAssistant__field:focus-within .homeAssistant__input {
    border-color: var(--frgd);
    box-shadow: 0 0 0 3px var(--action);
  }

  /* !important: canvas-board.css paints the homepage send button in the
     yellow CTA style with !important; on a phone it is the chat's own blue. */
  [data-intro-chat] .introChat__composer .homeAssistant__submit {
    right: 5px;
    width: 36px;
    height: 36px;
    border: 0 !important;
    color: var(--bkgd, #fff) !important;
    background: var(--frgd) !important;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__submit:hover,
  [data-intro-chat] .introChat__composer .homeAssistant__submit:focus-visible {
    background: color-mix(in srgb, var(--frgd) 80%, #fff) !important;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__submit .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--bkgd, #fff) !important;
    fill: var(--bkgd, #fff) !important;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__disclaimer {
    order: 3;
    margin: 0;
  }

  [data-intro-chat] .introChat__composer .homeAssistant__cqMadeBy {
    order: 4;
    margin: 6px 0 0;
  }
}

[data-intro-chat] .homeAssistant__message {
  margin-bottom: 0;
}

[data-intro-chat] img.intro-company-logo {
  display: inline;
  height: 1em;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 0.08em;
  padding: 0;
  border-radius: 0;
  vertical-align: -0.18em;
  object-fit: contain;
}

[data-intro-chat] img.intro-company-logo--wide {
  height: 0.9em;
  vertical-align: -0.08em;
}

[data-intro-chat] [data-chat-step] {
  display: grid;
  grid-template-rows: 1fr;
}

[data-intro-chat] [data-chat-step] > .introChat__stepInner {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  min-width: 0;
  padding: 2px 4px;
}

[data-intro-chat] [data-chat-step].homeAssistant__message--user > .introChat__stepInner {
  justify-content: flex-end;
}

/* Each bubble springs out of its tail corner 75ms after the one before it,
   its avatar a beat earlier; then the composer rises and its topic chips
   follow, 1.45s in all. The step number is set per nth-child and the delay
   sits inside the animation shorthand: scripts/critical-css.mjs copies rules
   out of the CSSOM, and there a var() shorthand followed by its own
   animation-delay comes back as empty longhands. */
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(2) { --intro-step: 1; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(3) { --intro-step: 2; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(4) { --intro-step: 3; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(5) { --intro-step: 4; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(6) { --intro-step: 5; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(7) { --intro-step: 6; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(8) { --intro-step: 7; }
[data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(9) { --intro-step: 8; }

[data-intro-chat] .homeAssistant__suggestions li:nth-child(2) { --intro-chip: 1; }
[data-intro-chat] .homeAssistant__suggestions li:nth-child(3) { --intro-chip: 2; }
[data-intro-chat] .homeAssistant__suggestions li:nth-child(4) { --intro-chip: 3; }
[data-intro-chat] .homeAssistant__suggestions li:nth-child(5) { --intro-chip: 4; }

/* Damped springs sampled into linear() (12% and 4% overshoot). Browsers
   without linear() keep the cubic-bezier. */
[data-intro-chat].introChat {
  --intro-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --intro-spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (animation-timing-function: linear(0, 1)) {
  [data-intro-chat].introChat {
    --intro-spring: linear(0, 0.009 1.2%, 0.056 3.1%, 0.15 5.4%, 0.286 8%, 0.452 10.8%, 0.626 13.8%, 0.791 17%, 0.93 20.4%, 1.033 23.9%, 1.096 27.5%, 1.124 31.3%, 1.123 35.2%, 1.102 39.2%, 1.072 43.4%, 1.042 47.6%, 1.016 51.9%, 0.997 56.3%, 0.987 60.9%, 0.984 65.5%, 0.986 70.2%, 0.99 75%, 0.994 79.8%, 0.998 84.7%, 1 89.8%, 1.002 94.8%, 1);
    --intro-spring-soft: linear(0, 0.004 1.2%, 0.025 3.1%, 0.068 5.4%, 0.133 8%, 0.219 10.8%, 0.318 13.8%, 0.426 17%, 0.535 20.4%, 0.64 23.9%, 0.736 27.5%, 0.819 31.3%, 0.888 35.2%, 0.943 39.2%, 0.983 43.4%, 1.011 47.6%, 1.028 51.9%, 1.036 56.3%, 1.038 60.9%, 1.036 65.5%, 1.031 70.2%, 1.025 75%, 1.019 79.8%, 1.013 84.7%, 1.009 89.8%, 1.005 94.8%, 1);
  }
}

/* The text is never hidden: bubbles move by transform only. Fading from 0
   kept the LCP bubble (a .homeAssistant__bubbleBody) invisible until its step
   fired, so mobile LCP waited ~3–9s on the stagger. Only the avatars and the
   topic chips start at opacity 0; they are small and never the LCP element.
   The message rows themselves stand still, which also keeps
   home-assistant.css's fade-in off these nine. */
@media (prefers-reduced-motion: no-preference) {
  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(-n+9) {
    animation-name: none;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(-n+9) .homeAssistant__bubble {
    transform-origin: 0 100%;
    animation: introChatPop 0.55s var(--intro-spring) calc(60ms + var(--intro-step, 0) * 75ms) both;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--user:nth-child(-n+9) .homeAssistant__bubble {
    transform-origin: 100% 100%;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message:nth-child(-n+9) .homeAssistant__avatar {
    animation: introChatAvatar 0.5s var(--intro-spring) calc(10ms + var(--intro-step, 0) * 75ms) both;
  }

  [data-intro-chat] .introChat__composer {
    animation: introChatRise 0.55s var(--intro-spring-soft) 0.66s both;
  }

  [data-intro-chat] .homeAssistant__suggestions li {
    animation: introChatChip 0.45s var(--intro-spring) calc(0.78s + var(--intro-chip, 0) * 55ms) both;
  }
}

@keyframes introChatPop {
  from {
    transform: translate3d(0, 10px, 0) scale(0.88);
  }
}

@keyframes introChatAvatar {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
  }
}

@keyframes introChatRise {
  from {
    transform: translate3d(0, 14px, 0);
  }
}

@keyframes introChatChip {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.9);
  }
  40% {
    opacity: 1;
  }
}

/* Window states, desktop only (the title bar and its dots do not exist on
   mobile). home-assistant.js sets data-window on .introChat and keeps it in
   memory only, so a reload opens the window as it shipped. */
@media (min-width: 769px) {
  /* Minimised: the title bar alone; a click on it brings the window back. */
  [data-intro-chat][data-window="min"] .homeAssistant__inner {
    max-width: 320px;
    margin: 0 auto;
  }

  [data-intro-chat][data-window="min"] .homeAssistant__thread,
  [data-intro-chat][data-window="min"] .introChat__composer {
    display: none;
  }

  [data-intro-chat][data-window="min"] .introChat__titlebar {
    border-bottom: 0;
    cursor: pointer;
  }

  /* Closed: the window is gone and a small launcher takes its place. */
  [data-intro-chat][data-window="closed"] .homeAssistant {
    display: none !important;
  }

  [data-intro-chat][data-window="closed"] .introChat__reopen {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 auto var(--space-6);
    padding: 4px 14px 4px 4px;
    border: 1px solid color-mix(in srgb, var(--border, #c8c8d0) 70%, #9a9aa4);
    border-radius: 999px;
    background: #F4F6FA;
    font-family: var(--font-meta);
    font-size: calc(0.6875rem * var(--ds-font-scale));
    letter-spacing: 0.02em;
    line-height: 1;
    color: #4a4a4a;
    cursor: pointer;
  }

  [data-intro-chat][data-window="closed"] .introChat__reopen:hover {
    background: #fff;
  }

  [data-intro-chat][data-window="closed"] .introChat__reopen:focus-visible {
    outline: 2px solid #5670ff;
    outline-offset: 2px;
  }

  [data-intro-chat] .introChat__reopen img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  /* With the window out of the way the carousel behind it keeps its band. */
  [data-intro-chat][data-window="min"]:has(.introChat__glass.is-ready),
  [data-intro-chat][data-window="closed"]:has(.introChat__glass.is-ready) {
    min-height: clamp(460px, calc(100vh - 99px), 860px);
  }

  /* Expanded: the window fills the screen over a dimmed page, above the
     canvas rails, and the thread scrolls inside it. */
  html:has([data-intro-chat][data-window="max"]) body {
    overflow: hidden;
  }

  [data-intro-chat][data-window="max"] .homeAssistant {
    z-index: 2147483600;
  }

  [data-intro-chat][data-window="max"] .homeAssistant::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(18 20 28 / 55%);
  }

  [data-intro-chat][data-window="max"] .homeAssistant__inner {
    position: fixed;
    inset: clamp(12px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgb(0 0 0 / 30%);
  }

  [data-intro-chat][data-window="max"] .introChat__titlebar {
    flex: none;
  }

  [data-intro-chat][data-window="max"] .homeAssistant__thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 32px max(var(--intro-window-pad-x), calc(50% - 400px)) 12px;
  }

  [data-intro-chat][data-window="max"] .homeAssistant__message {
    flex: none;
  }

  [data-intro-chat][data-window="max"] .introChat__composer {
    flex: none;
    padding: 8px max(var(--intro-window-pad-x), calc(50% - 400px)) 20px;
  }

  /* The window morphs between states where view transitions exist. */
  [data-intro-chat].introChat--morphing .homeAssistant__inner {
    view-transition-name: intro-chat-window;
  }

  ::view-transition-group(intro-chat-window) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---- Mobile: a messaging-app conversation -------------------------------
   Up to 768px the window chrome is gone (above) and the thread reads like a
   one-to-one chat: a header with the person's avatar, name, role and two
   actions (CV, email) in place of the hero; a "Today" divider; and bubbles
   without a per-message avatar, since the header already shows who is
   talking. Consecutive bubbles from the same side sit close together and
   only the last one of a run keeps its tail, as in WhatsApp or Messenger. */
[data-intro-chat] .introChat__mobileBar {
  display: none;
}

@media (max-width: 768px) {
  /* The hero (round logo + name) is what the chat header now says. It stays in
     the DOM for screen readers and the page's h1. */
  body.homepage .homeStage {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* The chat block is one solid surface; the dotted page shows again below. */
  [data-intro-chat].introChat {
    background: var(--accent, #f5f6f8);
    border-bottom: 1px solid var(--border, #e1e0e7);
  }

  [data-intro-chat] .introChat__mobileBar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    width: 100%;
    /* Longhands on purpose: scripts/critical-css.mjs reads the CSSOM, where a
       var() shorthand plus one longhand serialises as empty longhands. */
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-right: 8px;
    padding-bottom: 10px;
    padding-left: var(--intro-window-pad-x);
    border-bottom: 1px solid var(--border, #e1e0e7);
    background: var(--bkgd, #fff);
  }

  [data-intro-chat] .introChat__peer {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: var(--frgd);
    text-decoration: none;
  }

  [data-intro-chat] .introChat__peerAvatar {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
  }

  [data-intro-chat] .introChat__peerAvatar img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--action);
  }

  /* Presence dot: the chat answers on its own. */
  [data-intro-chat] .introChat__presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bkgd, #fff);
    background: #34c759;
  }

  [data-intro-chat] .introChat__peerText {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }

  [data-intro-chat] .introChat__peerName {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: calc(1.0625rem * var(--ds-font-scale));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  [data-intro-chat] .introChat__peerStatus {
    overflow: hidden;
    font-family: var(--font-text);
    font-size: calc(0.8125rem * var(--ds-font-scale));
    line-height: 1.25;
    color: color-mix(in srgb, var(--frgd) 62%, transparent);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  [data-intro-chat] .introChat__barActions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  [data-intro-chat] .introChat__barAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--frgd);
    text-decoration: none;
  }

  [data-intro-chat] .introChat__barAction svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  [data-intro-chat] .introChat__barAction:active {
    background: var(--accent);
  }

  [data-intro-chat] .introChat__barAction:focus-visible,
  [data-intro-chat] .introChat__peer:focus-visible {
    outline: 2px solid #5670ff;
    outline-offset: 2px;
    border-radius: 999px;
  }

  /* Thread: no avatars, bubbles against the gutter, a day divider on top. */
  [data-intro-chat] .homeAssistant {
    margin-top: 0;
  }

  [data-intro-chat] .homeAssistant__thread {
    gap: 0;
    padding: var(--space-2) 0 0;
  }

  [data-intro-chat] .homeAssistant__thread::before {
    content: "Today";
    align-self: center;
    margin: 0 0 var(--space-3);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-meta);
    font-size: var(--text-meta);
    line-height: 1.4;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--frgd) 62%, transparent);
    background: var(--bkgd, #fff);
  }

  [data-intro-chat] .homeAssistant__avatar {
    display: none;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message {
    margin-top: 10px;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message:first-child {
    margin-top: 0;
  }

  /* The step grid's auto column would size itself to the bubble's text and
     then let a percentage max-width shrink the bubble below it; a definite
     column keeps the percentage relative to the thread. */
  [data-intro-chat] [data-chat-step] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-intro-chat] [data-chat-step] > .introChat__stepInner {
    padding: 0;
  }

  [data-intro-chat] .homeAssistant__bubble {
    max-width: 84%;
    border-radius: 18px;
  }

  [data-intro-chat] .homeAssistant__bubble--bot {
    border-bottom-left-radius: 4px;
  }

  [data-intro-chat] .homeAssistant__bubble.homeAssistant__bubble--user {
    border-bottom-right-radius: 4px;
  }

  /* Runs from the same side: 2px apart, tail only on the last one. */
  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--bot + .homeAssistant__message--bot,
  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--user + .homeAssistant__message--user {
    margin-top: 2px;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--bot:has(+ .homeAssistant__message--bot) .homeAssistant__bubble--bot {
    border-bottom-left-radius: 18px;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--bot + .homeAssistant__message--bot .homeAssistant__bubble--bot {
    border-top-left-radius: 4px;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--user:has(+ .homeAssistant__message--user) .homeAssistant__bubble--user {
    border-bottom-right-radius: 18px;
  }

  [data-intro-chat] .homeAssistant__thread > .homeAssistant__message--user + .homeAssistant__message--user .homeAssistant__bubble--user {
    border-top-right-radius: 4px;
  }

  /* The thinking line has no bubble; keep it off the left edge. */
  [data-intro-chat] .homeAssistant__message--reasoning {
    padding-left: var(--space-2);
  }

  [data-intro-chat] .homeAssistant {
    padding-bottom: var(--space-3);
  }
}

/* ---- Luma-style glow, bottom only --------------------------------------
   Both sizes: a faint pastel glow, after Luma's event pages, along the foot of
   the chat band only. Three soft blobs in the site's colours sit on the bottom
   edge, each fading to transparent at its own box edge, so the band's top
   and sides keep their own surface. Static, and no grain: on the yellow page
   a multiplied grain turned the glow grey. */
[data-intro-chat].introChat {
  isolation: isolate;
}

[data-intro-chat].introChat::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 340px;
  pointer-events: none;
}

[data-intro-chat].introChat::before {
  background-image:
    radial-gradient(closest-side, rgb(150 160 255 / 16%), transparent),
    radial-gradient(closest-side, rgb(255 126 182 / 13%), transparent),
    radial-gradient(closest-side, rgb(255 208 47 / 20%), transparent);
  background-size: 60% 340px, 50% 300px, 60% 340px;
  background-position: 0% 100%, 50% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Desktop: a little room under the window for the glow to show. The page
   behind is the yellow wash, where any blue mixes to grey, so the glow here
   is mostly white light with a hint of lilac and pink under the window. */
@media (min-width: 769px) {
  [data-intro-chat].introChat {
    padding-bottom: 32px;
  }

  [data-intro-chat].introChat::before {
    background-image:
      radial-gradient(closest-side, rgb(255 255 255 / 55%), transparent),
      radial-gradient(closest-side, rgb(200 182 255 / 18%), transparent),
      radial-gradient(closest-side, rgb(255 140 190 / 14%), transparent),
      radial-gradient(closest-side, rgb(255 255 255 / 55%), transparent);
    background-size: 50% 340px, 40% 300px, 40% 300px, 50% 340px;
    background-position: 0% 100%, 30% 100%, 70% 100%, 100% 100%;
  }
}