/* Keep the original people and story; real Mate pages replace the AI panels. */
#workflow.ms-scene-products {
  --ms-narrative-height: 560px;
  --ms-product-height: 520px;
  --ms-disclosure-surface: #fff;
  --ms-disclosure-ink: #748092;
}

#workflow.ms-scene-products [hidden] {
  display: none !important;
}

#workflow.ms-scene-products .mate-visual {
  padding: 16px 18px 14px;
  border: 1px solid #dfe8f3;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: none;
}

#workflow.ms-scene-products .mate-visual > .mate-relay {
  margin-bottom: 12px;
  background: white;
}

#workflow.ms-scene-products .mate-scene.ms-screen-scene,
#workflow.ms-scene-products .mate-scene.ms-narrative-scene {
  display: grid;
  place-items: stretch;
  width: 100%;
  height: var(--ms-narrative-height);
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  background: transparent;
}

#workflow.ms-scene-products .ms-narrative-scene {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, .37fr) minmax(0, .63fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

#workflow.ms-scene-products .ms-scene-art {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 8px;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 14px 0;
  background: transparent;
}

#workflow.ms-scene-products .ms-scene-art > svg,
#workflow.ms-scene-products .ms-scene-art > img.ms-character-canvas {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  max-height: 380px;
  margin: 0;
  overflow: visible;
  background: transparent;
  object-fit: contain;
  border-radius: 14px;
}

#workflow.ms-scene-products .ms-scene-art .mate-scene-signal:not([data-ms-beat]),
#workflow.ms-scene-products .ms-scene-art .mate-scene-note:not([data-ms-beat]),
#workflow.ms-scene-products .ms-scene-art .mate-scene-feedback:not([data-ms-beat]) {
  animation: none;
}

#workflow.ms-scene-products .ms-scene-roles {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 12px;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0;
  color: #687f99;
  font-size: .875rem;
  line-height: 1.5;
  text-align: center;
}

#workflow.ms-scene-products .ms-scene-roles > * {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  overflow-wrap: anywhere;
}

html[dir="rtl"] #workflow.ms-scene-products .ms-ai-output,
html[dir="rtl"] #workflow.ms-scene-products .ms-scene-roles > * {
  direction: rtl;
}

#workflow.ms-scene-products .ms-actor-manager,
#workflow.ms-scene-products .ms-actor-doctor {
  opacity: .65;
  transition: opacity .2s ease;
}

#workflow.ms-scene-products:not([data-story-beat]) .ms-actor-manager,
#workflow.ms-scene-products[data-story-beat="0"] .ms-actor-manager,
#workflow.ms-scene-products[data-story-beat="2"] .ms-actor-manager,
#workflow.ms-scene-products[data-story-beat="1"] .ms-actor-doctor {
  opacity: 1;
}

#workflow.ms-scene-products:not([data-story-beat]) .ms-scene-roles [data-ms-role="manager"],
#workflow.ms-scene-products[data-story-beat="0"] .ms-scene-roles [data-ms-role="manager"],
#workflow.ms-scene-products[data-story-beat="2"] .ms-scene-roles [data-ms-role="manager"],
#workflow.ms-scene-products[data-story-beat="1"] .ms-scene-roles [data-ms-role="doctor"],
#workflow.ms-scene-products:not([data-story-beat]) .ms-scene-roles .ms-role-manager,
#workflow.ms-scene-products[data-story-beat="0"] .ms-scene-roles .ms-role-manager,
#workflow.ms-scene-products[data-story-beat="2"] .ms-scene-roles .ms-role-manager,
#workflow.ms-scene-products[data-story-beat="1"] .ms-scene-roles .ms-role-doctor {
  color: #0757b6;
  font-weight: 500;
}

#workflow.ms-scene-products .ms-scene-product {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px 0;
  background: transparent;
}

#workflow.ms-scene-products .ms-scene-product .ms-device {
  max-width: 100%;
  margin: 0;
  background: white;
  box-shadow: none;
}

#workflow.ms-scene-products .ms-scene-product .ms-device-phone {
  width: min(286px, 100%);
  aspect-ratio: 720 / 1306;
  border-radius: 11px;
}

#workflow.ms-scene-products .ms-scene-product .ms-device-clin {
  width: min(740px, 100%);
  aspect-ratio: 1156 / 812;
}

#workflow.ms-scene-products .ms-scene-product .ms-device-work {
  width: min(878px, 100%);
  aspect-ratio: 1280 / 758;
}

#workflow.ms-scene-products .ms-scene-product .ms-page-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: white;
}

/* Replace only the poster's baked-in demo disclosure with selectable locale text. */
#workflow.ms-scene-products .ms-demo-disclosure {
  position: absolute;
  inset-inline: 2px;
  bottom: 1px;
  z-index: 2;
  min-height: 4%;
  padding: 4px 10px;
  border-radius: 0 0 8px 8px;
  background: var(--ms-disclosure-surface);
  color: var(--ms-disclosure-ink);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: break-word;
}

#workflow.ms-scene-products .ms-scene-product .ms-ai-output {
  padding: 13px 14px;
  border-color: #dce6f2;
  background: rgba(255, 255, 255, .985);
  box-shadow: none;
}

#workflow.ms-scene-products .ms-scene-product .ms-device-phone .ms-ai-output {
  top: 22%;
  bottom: 12%;
  padding: 11px 12px;
}

#workflow.ms-scene-products .ms-scene-product .ms-output-line {
  padding-block: 7px;
}

#workflow.ms-scene-products .ms-qc-phase {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#workflow.ms-scene-products:not([data-story-beat]) .ms-qc-phase[data-ms-qc-beat="0"],
#workflow.ms-scene-products[data-story-beat="0"] .ms-qc-phase[data-ms-qc-beat="0"],
#workflow.ms-scene-products[data-story-beat="1"] .ms-qc-phase[data-ms-qc-beat="1"],
#workflow.ms-scene-products[data-story-beat="2"] .ms-qc-phase[data-ms-qc-beat="2"] {
  display: grid;
}

#workflow.ms-scene-products .ms-qc-phase .ms-output-line,
#workflow.ms-scene-products .ms-qc-phase .ms-output-status {
  opacity: 1 !important;
  visibility: visible !important;
}

#workflow.ms-scene-products .ms-qc-art-image[data-ms-qc-art-beat] {
  display: none;
}

#workflow.ms-scene-products:not([data-story-beat]) .ms-qc-art-image[data-ms-qc-art-beat="0"],
#workflow.ms-scene-products[data-story-beat="0"] .ms-qc-art-image[data-ms-qc-art-beat="0"],
#workflow.ms-scene-products[data-story-beat="1"] .ms-qc-art-image[data-ms-qc-art-beat="1"],
#workflow.ms-scene-products[data-story-beat="2"] .ms-qc-art-image[data-ms-qc-art-beat="2"] {
  display: block;
}

#workflow.ms-scene-products .mate-beats > button.mate-beat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 5px;
  border: 0;
  border-top: 2px solid #d5e3f4;
  border-radius: 0;
  background: transparent;
  color: #5c7591;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

#workflow.ms-scene-products .mate-beats > button.mate-beat.is-current,
#workflow.ms-scene-products .mate-beats > button.mate-beat[aria-current="step"] {
  border-top-color: #0966d8;
  color: #0757b6;
}

#workflow.ms-scene-products .mate-beats > button.mate-beat.is-done {
  border-top-color: #88b5ed;
  color: #365c88;
}

#workflow.ms-scene-products .mate-beats > button.mate-beat:focus-visible {
  outline: 2px solid #0966d8;
  outline-offset: -2px;
}

#workflow.ms-scene-products .ms-handoff {
  border-top-color: #dfe8f4;
}

#workflow.ms-scene-products .ms-scene-art [data-ms-beat] {
  opacity: 0;
  visibility: hidden;
  transform-box: fill-box;
  transform-origin: center;
}

#workflow.ms-scene-products:not([data-story-beat]) .ms-scene-art [data-ms-beat~="0"],
#workflow.ms-scene-products[data-story-beat="0"] .ms-scene-art [data-ms-beat~="0"],
#workflow.ms-scene-products[data-story-beat="1"] .ms-scene-art [data-ms-beat~="1"],
#workflow.ms-scene-products[data-story-beat="2"] .ms-scene-art [data-ms-beat~="2"] {
  opacity: 1;
  visibility: visible;
}

#workflow.ms-scene-products[data-motion="running"] .ms-scene-art .ms-action-waves {
  animation: ms-story-waves 1.8s ease-in-out infinite;
}

#workflow.ms-scene-products[data-motion="running"] .ms-scene-art .ms-action-speech {
  animation: ms-story-speech 2.4s ease-in-out infinite;
}

#workflow.ms-scene-products[data-motion="running"] .ms-scene-art .ms-action-transfer .ms-transfer-packet {
  animation: ms-story-transfer 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

#workflow.ms-scene-products[data-motion="running"] .ms-scene-art .ms-action-edit {
  animation: ms-story-edit 1.5s ease-in-out infinite;
}

#workflow.ms-scene-products[data-motion="running"] .ms-scene-art .ms-action-review {
  animation: ms-story-review 1.9s ease-in-out infinite;
}

#workflow.ms-scene-products[data-motion="running"] .ms-scene-art .ms-action-confirm {
  animation: ms-story-confirm 2s ease-out infinite;
}

@keyframes ms-story-waves {
  0%, 100% { opacity: .45; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes ms-story-speech {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes ms-story-transfer {
  0%, 12% { opacity: 0; transform: translateX(0); }
  28% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(18px); }
}

@keyframes ms-story-edit {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(1px, -1px) rotate(-1deg); }
}

@keyframes ms-story-review {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes ms-story-confirm {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (max-width: 1050px) and (min-width: 761px) {
  #workflow.ms-scene-products .ms-narrative-scene {
    grid-template-columns: minmax(0, .33fr) minmax(0, .67fr);
    gap: 12px;
  }

  #workflow.ms-scene-products .mate-visual {
    padding-inline: 14px;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-ai-output {
    padding: 10px 11px;
  }
}

@media (max-width: 760px) {
  #workflow.ms-scene-products {
    --ms-narrative-height: 680px;
    --ms-product-height: 480px;
  }

  #workflow.ms-scene-products .mate-visual {
    padding: 12px 10px 13px;
    border-radius: 10px;
  }

  #workflow.ms-scene-products .ms-narrative-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 170px minmax(0, 1fr);
    gap: 12px;
  }

  #workflow.ms-scene-products .ms-scene-art {
    gap: 4px;
    padding: 0;
  }

  #workflow.ms-scene-products .ms-scene-art > svg {
    max-width: 260px;
    max-height: 142px;
  }

  #workflow.ms-scene-products .ms-scene-roles {
    gap: 10px;
    min-height: 22px;
    font-size: .8125rem;
    line-height: 1.45;
  }

  #workflow.ms-scene-products .ms-scene-product {
    padding: 0;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-phone {
    width: min(264px, 100%);
    aspect-ratio: 720 / 1306;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-desktop {
    width: 100%;
    height: var(--ms-product-height);
    max-height: var(--ms-product-height);
    aspect-ratio: auto;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-desktop .ms-page-image {
    height: 140px;
    object-fit: contain;
    border-bottom: 1px solid #e2eaf4;
  }

  #workflow.ms-scene-products .ms-device-desktop .ms-demo-disclosure {
    top: 112px;
    bottom: auto;
    min-height: 28px;
    max-height: 28px;
    padding: 2px 5px;
    font-size: 8px;
    line-height: 1.4;
    border-radius: 0;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-desktop .ms-ai-output {
    position: static;
    inset: auto;
    width: 100%;
    height: calc(var(--ms-product-height) - 140px);
    padding: 12px 13px;
    border: 0;
    border-radius: 0;
    background: white;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-phone .ms-ai-output {
    top: 20%;
    bottom: 10%;
    padding: 10px 11px;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-phone .ms-output-heading,
  #workflow.ms-scene-products .ms-scene-product .ms-device-phone .ms-output-lines,
  #workflow.ms-scene-products .ms-scene-product .ms-device-phone .ms-output-input,
  #workflow.ms-scene-products .ms-scene-product .ms-device-phone .ms-output-status {
    font-size: .84375rem;
    line-height: 1.55;
  }

  #workflow.ms-scene-products .mate-beats {
    min-height: 48px;
    margin-top: 10px;
  }

  #workflow.ms-scene-products .mate-beats > button.mate-beat {
    padding: 7px 3px;
    font-size: .8125rem;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #workflow.ms-scene-products .ms-scene-art [data-ms-beat] {
    animation: none !important;
  }

  #workflow.ms-scene-products .ms-scene-art *,
  #workflow.ms-scene-products .ms-actor-manager,
  #workflow.ms-scene-products .ms-actor-doctor {
    animation: none !important;
    transition: none !important;
  }
}