/* A small product story, not a looping decoration. The real interface captures
   remain on the product page; this is an explicitly illustrative flow. */
.home-chat-demo{min-width:0;overflow:hidden;background:#fff;border:1px solid #d2dbd7;border-radius:12px;box-shadow:0 22px 55px rgba(24,43,39,.09),0 2px 8px rgba(24,43,39,.045)}
.chat-demo-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid #e6ebe8}
.chat-demo-identity{display:flex;align-items:center;gap:.65rem;min-width:0;color:var(--ink);font-size:.86rem;font-weight:700;letter-spacing:-.02em}
.chat-demo-mark{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:8px;background:#21292a;color:#fff;font-size:.73rem;font-weight:800;letter-spacing:-.06em}
.chat-demo-label{flex:none;color:var(--ink-3);font:.62rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.chat-demo-thread{display:flex;flex-direction:column;gap:.72rem;padding:1.25rem 1.2rem 1.3rem;background:linear-gradient(135deg,#fcfdfc,#f6f8f6)}
.chat-demo-message{max-width:84%;padding:.62rem .85rem .7rem;border:1px solid #dee5e0;border-radius:10px 10px 10px 3px;background:#fff;box-shadow:0 1px 2px rgba(21,34,28,.035)}
.chat-demo-message span{display:block;margin-bottom:.25rem;color:#65716c;font:.66rem/1.3 var(--mono);letter-spacing:.035em;text-transform:uppercase}
.chat-demo-message p{margin:0;color:var(--ink);font-size:.81rem;line-height:1.48}
.chat-demo-message--visitor{align-self:flex-end;border-color:#252d2e;border-radius:10px 10px 3px 10px;background:#252d2e}
.chat-demo-message--visitor span,.chat-demo-message--visitor p{color:#fff}
.chat-demo-message--person{align-self:flex-end;border-color:#c5dcd1;background:#e8f3ec;border-radius:10px 10px 3px 10px}
.chat-demo-handoff{display:flex;align-items:center;gap:.55rem;margin:.05rem 0;color:#52655a;font:.68rem/1.45 var(--mono)}
.chat-demo-handoff::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#16835b;box-shadow:0 0 0 3px #e0eee6}
.chat-demo-footer{display:flex;justify-content:space-between;gap:.75rem;padding:.7rem 1.2rem;border-top:1px solid #e6ebe8;color:var(--ink-3);font:.65rem/1.4 var(--mono)}
.chat-demo-footer span:last-child{color:#607569}

@media(max-width:680px){
  .chat-demo-header{padding:.85rem 1rem}
  .chat-demo-thread{padding:1rem;gap:.62rem}
  .chat-demo-message{max-width:87%}
  .chat-demo-footer{padding:.7rem 1rem}
}

@media(prefers-reduced-motion:no-preference){
  .home-chat-feature.chat-motion-ready .home-chat-copy,
  .home-chat-feature.chat-motion-ready .home-chat-demo,
  .chat-story-motion.chat-motion-ready .shot,
  #handoff .convo.chat-motion-ready>*{transition:opacity .58s cubic-bezier(.2,.7,.2,1),transform .58s cubic-bezier(.2,.7,.2,1)}
  .home-chat-feature.chat-motion-ready:not(.chat-motion-visible) .home-chat-copy,
  .home-chat-feature.chat-motion-ready:not(.chat-motion-visible) .home-chat-demo,
  .chat-story-motion.chat-motion-ready:not(.chat-motion-visible) .shot,
  #handoff .convo.chat-motion-ready:not(.chat-motion-visible)>*{opacity:0;transform:translate3d(0,18px,0)}
  .home-chat-feature.chat-motion-ready.chat-motion-visible .home-chat-demo{transition-delay:.1s}
  .home-chat-feature.chat-motion-ready .chat-demo-message,
  .home-chat-feature.chat-motion-ready .chat-demo-handoff{transition:opacity .44s ease,transform .44s cubic-bezier(.2,.7,.2,1)}
  .home-chat-feature.chat-motion-ready:not(.chat-motion-visible) .chat-demo-message,
  .home-chat-feature.chat-motion-ready:not(.chat-motion-visible) .chat-demo-handoff{opacity:0;transform:translate3d(0,11px,0)}
  .home-chat-feature.chat-motion-ready.chat-motion-visible .chat-demo-message:nth-child(1){transition-delay:.22s}
  .home-chat-feature.chat-motion-ready.chat-motion-visible .chat-demo-message:nth-child(2){transition-delay:.38s}
  .home-chat-feature.chat-motion-ready.chat-motion-visible .chat-demo-message:nth-child(3){transition-delay:.54s}
  .home-chat-feature.chat-motion-ready.chat-motion-visible .chat-demo-handoff{transition-delay:.7s}
  .home-chat-feature.chat-motion-ready.chat-motion-visible .chat-demo-message:nth-child(5){transition-delay:.86s}
  #handoff .convo.chat-motion-ready.chat-motion-visible>*:nth-child(2){transition-delay:.12s}
  #handoff .convo.chat-motion-ready.chat-motion-visible>*:nth-child(3){transition-delay:.24s}
  #handoff .convo.chat-motion-ready.chat-motion-visible>*:nth-child(4){transition-delay:.36s}
  #handoff .convo.chat-motion-ready.chat-motion-visible>*:nth-child(5){transition-delay:.48s}
  #handoff .convo.chat-motion-ready.chat-motion-visible>*:nth-child(6){transition-delay:.6s}
}