/* Search in looks, as an AI stylist (round 17): the chat chrome of
   business/includes/r17_stylist_story.html. The story itself (states 1 to 4,
   the cards, the try-on, the basket) is look_story_css.html and
   frontend/js/home-story.js, unchanged.
     state 1  the visitor's message types itself in the assistant's window
     state 2+ the stylist's answer shows under it, then the look as cards
   Without JS (state 4 in the markup) and under reduced motion the answer is
   simply there. Square corners, Ink and Mist, Signal only for the Spark. */
.r17s .r17s-me { align-self: flex-end; max-width: 82%; padding: 10px 14px; background: #121110; color: #FFFFFF; }
.r17s .r17s-bot { align-self: flex-start; max-width: 88%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 14px; background: #F2F2F2; color: #121110; }
.r17s .r17s-bot > span:not(.r17s-more) { flex: 1 1 0; min-width: 0; }
.r17s .r17s-more { flex-basis: 100%; padding-left: 22px; }
.r17s .r17s-window { box-shadow: 0 18px 50px rgba(18, 17, 16, .10); }
.r17s .r17s-bot { transition: opacity .48s cubic-bezier(.2, 0, 0, 1) .2s, transform .48s cubic-bezier(.2, 0, 0, 1) .2s; }
.js .r17s [data-state="1"] .r17s-bot { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
/* The window fills the stage, so it stays put: no zoom on the request. */
.js .look-story.r17s [data-state="1"] .story-canvas,
.js .look-story.r17s [data-state="4"] .story-canvas { transform: none; }
/* Cards sit on white in the window: give the packshots a hairline. */
.r17s .story-stage .story-card-media { box-shadow: inset 0 0 0 1px #E6E4E1; }
@media (prefers-reduced-motion: reduce) {
  .r17s .r17s-bot { transition: none; }
}