ui-soxo-bootstrap-core 2.6.59 → 2.6.61

package/core/modules/steps/steps.scss

@@ -1,1051 +1,1068 @@
-/* ── Page shell ─────────────────────────────────────────── */
-
-.process-steps-page {
-  display: flex;
-  flex-direction: column;
-  /* The app shell's `.right-section` is `height: 100vh` with a fixed 56px header
-     (`.page-wrapper`) on top of it plus 15px padding. A plain `height: 100%`
-     makes this page a full 100vh — so its bottom runs past the viewport under the
-     header and forces a page scroll in normal view. Bound it to the space that is
-     actually visible below the header instead. (In full screen the promoted
-     `.steps-viewport` is 100vh via the Fullscreen API, so this doesn't apply.) */
-  height: calc(100vh - 86px);
-  min-height: 0;
-  width: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.steps-viewport {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.steps-main-card {
-  display: flex;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  .ant-card-body {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-    width: 100%;
-    padding: 0;
-    background: #ffffff;
-    overflow: hidden;
-  }
-}
-
-/* ── Patient info bar ───────────────────────────────────── */
-
-.steps-patient-bar {
-  flex: 0 0 auto;
-  padding: 0;
-  background: #f8fbff;
-  border-bottom: 1px solid #e8eef8;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-}
-
-.steps-patient-bar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Transform GuestInfoComponent into a single-row horizontal strip */
-
-.steps-patient-bar .guest-info {
-  margin: 0 !important;
-  border: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
-  border-radius: 0 !important;
-  width: 100%;
-}
-
-.steps-patient-bar .guest-info > .ant-card-body,
-.steps-patient-bar .guest-info > div > .ant-card-body,
-.steps-patient-bar .guest-info > div {
-  padding: 0 !important;
-}
-
-.steps-patient-bar .guest-info .ant-row {
-  display: flex !important;
-  flex-direction: row !important;
-  flex-wrap: nowrap !important;
-  margin: 0 !important;
-  gap: 0 !important;
-  row-gap: 0 !important;
-  align-items: stretch !important;
-  width: max-content !important;
-  min-width: 100% !important;
-}
-
-.steps-patient-bar .guest-info .ant-row > [class*='ant-col'] {
-  flex: 0 0 auto !important;
-  max-width: none !important;
-  width: auto !important;
-  padding: 0 !important;
-}
-
-.steps-patient-bar .guest-info .information {
-  display: flex !important;
-  flex-direction: column !important;
-  justify-content: center !important;
-  padding: 6px 16px !important;
-  border: none !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-  height: 100% !important;
-  min-height: 40px !important;
-  box-shadow: none !important;
-  border-right: 1px solid #dde5f0 !important;
-  white-space: nowrap !important;
-}
-
-.steps-patient-bar .guest-info .ant-row > [class*='ant-col']:first-child .information {
-  padding-left: 16px !important;
-}
-
-.steps-patient-bar .guest-info .ant-row > [class*='ant-col']:last-child .information {
-  border-right: none !important;
-}
-
-/* Label */
-.steps-patient-bar .guest-info .information label,
-.steps-patient-bar .guest-info .information .label,
-.steps-patient-bar .guest-info .information small,
-.steps-patient-bar .guest-info .information > span:first-child {
-  font-size: 10px !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.07em !important;
-  color: #9eafc2 !important;
-  line-height: 1 !important;
-  margin: 0 0 3px !important;
-  display: block !important;
-}
-
-/* Value */
-.steps-patient-bar .guest-info .information strong,
-.steps-patient-bar .guest-info .information h4,
-.steps-patient-bar .guest-info .information h5,
-.steps-patient-bar .guest-info .information .value,
-.steps-patient-bar .guest-info .information > span:last-child,
-.steps-patient-bar .guest-info .information p {
-  font-size: 13px !important;
-  font-weight: 700 !important;
-  color: #1e293b !important;
-  margin: 0 !important;
-  line-height: 1.3 !important;
-  white-space: nowrap !important;
-}
-
-/* ── Top bar (breadcrumbs + nav actions) ────────────────── */
-
-.steps-top-bar {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 24px;
-  min-height: 70px;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
-  /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
-     Matches the onboarding reference without the frosted-glass treatment. */
-  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
-  background: linear-gradient(180deg, #a7c2c6 100%, #eff3e3 100%);
-}
-
-.steps-breadcrumb-strip {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  /* `safe center` keeps the steps centered when they fit, but falls back to
-     start-aligned when there are too many to fit (>6). Plain `center` would clip
-     BOTH ends on overflow — cutting off the active step's label (e.g. "Guest
-     Details") and making it unreachable even though the strip scrolls. */
-  justify-content: safe center;
-  gap: clamp(28px, 3vw, 52px);
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  scrollbar-width: none;
-  padding: 0 8px;
-}
-
-.steps-breadcrumb-strip::-webkit-scrollbar {
-  height: 0;
-  display: none;
-}
-
-/* Full-screen toggle — grey frosted pill anchored to the far left. */
-.steps-fullscreen-toggle {
-  flex: 0 0 auto;
-}
-
-.steps-fullscreen-toggle.ant-btn,
-.steps-fullscreen-toggle.ant-btn-dashed {
-  height: 38px;
-  padding: 0 18px;
-  border-radius: 999px;
-  background: #07232E33;
-  border: 1px solid #dbe3e6;
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  transition: all 0.2s ease;
-}
-
-.steps-fullscreen-toggle.ant-btn:hover,
-.steps-fullscreen-toggle.ant-btn:focus {
-  background: #ffffff;
-  border-color: #ffffff;
-  color: #000000;
-  transform: translateY(-1px);
-}
-
-.steps-nav-actions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  /*
-    Anchors the Back + primary CTA to the far right. In fullscreen the
-    breadcrumb strip is not rendered, so this margin keeps the group pinned
-    right with only the Full Screen toggle sitting on the left.
-  */
-  margin-left: auto;
-}
-
-.steps-nav-actions .ant-btn {
-  min-height: 40px;
-  border-radius: 999px;
-  padding: 0 18px;
-  font-size: 13px;
-  font-weight: 600;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-/* Secondary (Back / previous-process) — solid white pill. */
-.steps-nav-actions .ant-btn-default {
-  background: #ffffff;
-  border-color: #dbe3e6;
-  color: #4a5a68;
-}
-
-.steps-nav-actions .ant-btn-default:hover,
-.steps-nav-actions .ant-btn-default:focus {
-  background: #f4f7f8;
-  border-color: #c3ccd0;
-  color: #253a5b;
-}
-
-.steps-nav-actions .ant-btn:active {
-  transform: scale(0.97);
-}
-
-.steps-breadcrumb-strip::-webkit-scrollbar {
-  height: 3px;
-}
-
-/* ── Resume banner ──────────────────────────────────────── */
-
-.steps-resume-banner {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 14px;
-  background: #fff8e1;
-  border-bottom: 1px solid #f5e3a3;
-  color: #5b4400;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.steps-resume-banner-text {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.steps-resume-banner-actions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.steps-breadcrumb-strip::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.steps-breadcrumb-strip::-webkit-scrollbar-thumb {
-  background: #d0dff5;
-  border-radius: 4px;
-}
-
-.steps-breadcrumb-item {
-  /* Compact, natural-width steps that sit centered with connector lines
-     between them — matching the onboarding reference. */
-  position: relative;
-  flex: 0 0 auto;
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  border: none;
-  background: transparent;
-  border-radius: 999px;
-  padding: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  color: #7a8792;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  min-height: 34px;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Thin connecting line drawn into the gap toward the next step.
-   Width matches the strip's gap so it spans the space without overhanging. */
-.steps-breadcrumb-item:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  width: clamp(28px, 3vw, 52px);
-  height: 1px;
-  background: rgba(37, 58, 91, 0.2);
-  transform: translateY(-50%);
-}
-
-.steps-breadcrumb-item:active {
-  transform: scale(0.97);
-}
-
-/* Number bubble — default (upcoming) solid muted circle. */
-.steps-breadcrumb-index {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  background: #ffffff;
-  border: 1px solid #d3dbdf;
-  color: #8a97a2;
-  flex: 0 0 auto;
-  transition: all 0.2s ease;
-}
-
-.steps-breadcrumb-item:hover .steps-breadcrumb-index {
-  border-color: rgba(37, 58, 91, 0.35);
-  color: #253a5b;
-}
-
-/* Label is shown only for the active step (upcoming steps are circle-only,
-   as in the reference). */
-.steps-breadcrumb-label {
-  display: none;
-  font-size: 13px;
-  font-weight: 500;
-  color: inherit;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ACTIVE — solid white rounded pill with dark navy text. */
-.steps-breadcrumb-item.active {
-  background: #ffffff;
-  padding: 4px 16px 4px 6px;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
-  color: #253a5b;
-  font-weight: 600;
-}
-
-.steps-breadcrumb-item.active .steps-breadcrumb-index {
-  background: #ffffff;
-  border-color: rgba(37, 58, 91, 0.25);
-  color: #253a5b;
-}
-
-.steps-breadcrumb-item.active .steps-breadcrumb-label {
-  display: inline;
-  color: #253a5b;
-}
-
-/* COMPLETED — filled navy circle. */
-.steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #253a5b;
-  border-color: #253a5b;
-  color: #ffffff;
-}
-
-/* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */
-.steps-nav-actions .ant-btn-primary {
-  background: #253a5b;
-  border-color: #253a5b;
-  border-radius: 999px;
-  padding: 0 30px;
-  min-height: 40px;
-  box-shadow: 0 8px 20px rgba(37, 58, 91, 0.28);
-}
-
-.steps-nav-actions .ant-btn-primary:hover,
-.steps-nav-actions .ant-btn-primary:focus {
-  background: #1d3054;
-  border-color: #1d3054;
-  transform: translateY(-1px);
-  box-shadow: 0 12px 26px rgba(37, 58, 91, 0.36);
-}
-
-.steps-nav-actions .ant-btn-primary:disabled,
-.steps-nav-actions .ant-btn-primary[disabled] {
-  background: #c8d0e0;
-  border-color: #c8d0e0;
-  color: #ffffff;
-  box-shadow: none;
-  transform: none;
-}
-
-.steps-breadcrumb-empty {
-  color: #64748b;
-  font-size: 12px;
-}
-
-/* ── Content area ───────────────────────────────────────── */
-
-.steps-content-panel {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.steps-stage-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 10px 14px;
-  box-sizing: border-box;
-  position: relative;
-    background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
-}
-.steps-stage-body.is-swipe-enabled {
-  touch-action: pan-y;
-}
-
-/* ── Touch-device floating nav arrows ───────────────────── */
-
-.steps-touch-nav {
-  position: absolute;
-  top: 50%;
-  z-index: 6;
-  width: 52px;
-  height: 52px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: rgba(30, 58, 138, 0.55);
-  backdrop-filter: blur(8px) saturate(140%);
-  -webkit-backdrop-filter: blur(8px) saturate(140%);
-  color: #ffffff;
-  font-size: 18px;
-  cursor: pointer;
-  box-shadow:
-    0 10px 24px rgba(15, 23, 42, 0.22),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-50%) scale(0.82);
-  transition:
-    opacity 260ms ease,
-    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
-    visibility 0s linear 260ms,
-    background-color 200ms ease,
-    box-shadow 200ms ease;
-  -webkit-tap-highlight-color: transparent;
-  touch-action: manipulation;
-}
-
-/*
-  Decorative pulsing ring around the button.
-  - Drawn via ::before so it does not interfere with click targets.
-  - Only animates while the button is visible and enabled, to keep the
-    idle state calm instead of visually noisy.
-*/
-.steps-touch-nav::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.45);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.steps-touch-nav.is-visible:not(:disabled)::before {
-  animation: steps-touch-nav-ring 2.4s ease-out infinite;
-}
-
-/*
-  Radial wash behind the icon for depth.
-  - Keeps the icon glyph crisp against varied content backgrounds.
-*/
-.steps-touch-nav::after {
-  content: '';
-  position: absolute;
-  inset: 4px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%);
-  pointer-events: none;
-}
-
-.steps-touch-nav .anticon {
-  position: relative;
-  z-index: 1;
-  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25));
-}
-
-.steps-touch-nav:hover:not(:disabled),
-.steps-touch-nav:focus-visible:not(:disabled) {
-  background: rgba(30, 58, 138, 0.92);
-  box-shadow:
-    0 14px 30px rgba(15, 23, 42, 0.32),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
-  outline: none;
-}
-
-.steps-touch-nav:hover:not(:disabled),
-.steps-touch-nav:focus-visible:not(:disabled),
-.steps-touch-nav.is-visible:hover:not(:disabled),
-.steps-touch-nav.is-visible:focus-visible:not(:disabled) {
-  opacity: 1;
-}
-
-.steps-touch-nav:active:not(:disabled) {
-  transform: translateY(-50%) scale(0.94);
-  transition:
-    transform 120ms ease,
-    opacity 120ms ease,
-    background-color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.steps-touch-nav:disabled {
-  background: rgba(148, 163, 184, 0.38);
-  color: rgba(255, 255, 255, 0.7);
-  cursor: not-allowed;
-  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-}
-
-.steps-touch-nav:disabled::after {
-  display: none;
-}
-
-.steps-touch-nav-left {
-  left: 14px;
-}
-
-.steps-touch-nav-right {
-  right: 14px;
-}
-
-.steps-touch-nav.is-visible {
-  opacity: 0.68;
-  visibility: visible;
-  transform: translateY(-50%) scale(1);
-  transition:
-    opacity 260ms ease,
-    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
-    visibility 0s linear 0s,
-    background-color 200ms ease,
-    box-shadow 200ms ease;
-}
-
-@keyframes steps-touch-nav-ring {
-  0% {
-    opacity: 0.55;
-    transform: scale(1);
-  }
-
-  65% {
-    opacity: 0;
-    transform: scale(1.45);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(1.45);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .steps-touch-nav {
-    transition:
-      opacity 120ms linear,
-      visibility 0s linear 120ms;
-    transform: translateY(-50%);
-  }
-
-  .steps-touch-nav.is-visible {
-    transform: translateY(-50%);
-    transition:
-      opacity 120ms linear,
-      visibility 0s linear 0s;
-  }
-
-  .steps-touch-nav.is-visible:not(:disabled)::before {
-    animation: none;
-  }
-}
-
-.steps-stage-body::-webkit-scrollbar {
-  width: 5px;
-}
-
-.steps-stage-body::-webkit-scrollbar-track {
-  background: #f4f8ff;
-  border-radius: 4px;
-}
-
-.steps-stage-body::-webkit-scrollbar-thumb {
-  background: #c5d5ee;
-  border-radius: 4px;
-}
-
-.steps-stage-body::-webkit-scrollbar-thumb:hover {
-  background: #93b4e0;
-}
-
-.steps-chat-step-card {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #e8eef8;
-  border-radius: 10px;
-  padding: 14px 16px;
-  background: #ffffff;
-  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04);
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-/* Step card animations */
-
-.steps-chat-step-card.slide-forward {
-  animation: step-slide-forward 300ms ease;
-}
-
-.steps-chat-step-card.slide-backward {
-  animation: step-slide-backward 300ms ease;
-}
-
-.steps-chat-step-card.slide-forward .steps-index-pill,
-.steps-chat-step-card.slide-backward .steps-index-pill,
-.steps-chat-step-card.slide-forward .steps-title,
-.steps-chat-step-card.slide-backward .steps-title,
-.steps-chat-step-card.slide-forward .steps-description,
-.steps-chat-step-card.slide-backward .steps-description,
-.steps-chat-step-card.slide-forward .steps-chat-step-component,
-.steps-chat-step-card.slide-backward .steps-chat-step-component {
-  opacity: 0;
-  animation: step-text-reveal 460ms ease forwards;
-}
-
-.steps-chat-step-card.slide-forward .steps-index-pill,
-.steps-chat-step-card.slide-backward .steps-index-pill {
-  animation-delay: 40ms;
-}
-
-.steps-chat-step-card.slide-forward .steps-title,
-.steps-chat-step-card.slide-backward .steps-title {
-  animation-delay: 100ms;
-}
-
-.steps-chat-step-card.slide-forward .steps-description,
-.steps-chat-step-card.slide-backward .steps-description {
-  animation-delay: 160ms;
-}
-
-.steps-chat-step-card.slide-forward .steps-chat-step-component,
-.steps-chat-step-card.slide-backward .steps-chat-step-component {
-  animation-delay: 220ms;
-}
-
-@keyframes step-slide-forward {
-  from {
-    opacity: 0;
-    transform: translateX(24px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes step-slide-backward {
-  from {
-    opacity: 0;
-    transform: translateX(-24px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes step-text-reveal {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.steps-chat-step-top {
-  flex: 0 0 auto;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f1f5fb;
-}
-
-.steps-index-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: #eaf2ff;
-  color: #1d4ed8;
-  font-size: 10px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.steps-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  color: #111827;
-  line-height: 1.3;
-}
-
-.steps-description {
-  margin: 4px 0 0;
-  color: #4b5563;
-  line-height: 1.5;
-  font-size: 13px;
-}
-
-.steps-chat-step-component {
-  // margin-top: 10px;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  width: 100%;
-  max-width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scroll-behavior: smooth;
-  scrollbar-width: thin;
-  scrollbar-color: #c5d5ee #f4f8ff;
-}
-
-.steps-chat-step-component::-webkit-scrollbar {
-  width: 6px;
-}
-
-.steps-chat-step-component::-webkit-scrollbar-track {
-  background: #f4f8ff;
-  border-radius: 4px;
-}
-
-.steps-chat-step-component::-webkit-scrollbar-thumb {
-  background: #c5d5ee;
-  border-radius: 4px;
-}
-
-.steps-chat-step-component::-webkit-scrollbar-thumb:hover {
-  background: #93b4e0;
-}
-
-.steps-chat-step-component > * {
-  flex: 0 0 auto;
-  min-width: 0;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.steps-chat-loading {
-  flex: 1 1 auto;
-  min-height: 120px;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-/* Frosted skeleton card that fills the stage while a step loads (replaces the
-   old centered spinner) — matches the soft gradient step surfaces. */
-.steps-chat-loading__card {
-  width: 100%;
-  max-width: 1100px;
-  align-self: stretch;
-  padding: 28px 32px;
-  box-sizing: border-box;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.42);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  box-shadow: 0 2px 10px rgba(20, 50, 64, 0.05);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-}
-
-/* ── Narration bar (hidden by default via NARRATION_CONTROLS_ENABLED) ── */
-
-.steps-narration-bar {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 8px 16px;
-  border-top: 1px solid #e8eef8;
-  background: #ffffff;
-}
-
-.steps-narration-bar .ant-btn {
-  min-height: 34px;
-  border-radius: 8px;
-  padding: 0 14px;
-  font-size: 13px;
-  font-weight: 600;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.steps-voice-provider-select {
-  min-width: 140px !important;
-}
-
-.steps-voice-select {
-  min-width: 180px !important;
-}
-
-/* ── Fullscreen ─────────────────────────────────────────── */
-
-.steps-viewport:fullscreen,
-.steps-viewport:-webkit-full-screen {
-  background: #f7fbff;
-}
-
-.steps-viewport:fullscreen .steps-main-card,
-.steps-viewport:-webkit-full-screen .steps-main-card {
-  height: 100%;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.steps-viewport:fullscreen .steps-stage-body,
-.steps-viewport:-webkit-full-screen .steps-stage-body {
-  padding: 3px;
-}
-
-/* ── Small laptops (13" / 1366px and below) ─────────────── */
-
-@media (max-width: 1366px) {
-  .steps-top-bar {
-    // padding: 6px 10px;
-    gap: 6px;
-  }
-
-  .steps-nav-actions {
-    gap: 4px;
-  }
-
-  .steps-nav-actions .ant-btn {
-    min-height: 32px;
-    padding: 0 10px;
-    font-size: 12px;
-  }
-
-  .steps-breadcrumb-item {
-    padding: 5px 10px;
-    font-size: 11px;
-    min-height: 30px;
-  }
-
-  .steps-breadcrumb-index {
-    width: 18px;
-    height: 18px;
-    font-size: 10px;
-  }
-
-  .steps-stage-body {
-    padding: 8px 12px;
-  }
-
-  .steps-chat-step-card {
-    padding: 9px;
-  }
-
-  .steps-title {
-    font-size: 15px;
-  }
-
-  .steps-description {
-    font-size: 12px;
-  }
-}
-
-/* ── Mobile ─────────────────────────────────────────────── */
-
-@media (max-width: 768px) {
-  .steps-patient-bar {
-    padding: 8px 12px;
-  }
-
-  .steps-patient-bar-sep {
-    margin: 0 10px;
-  }
-
-  .steps-patient-field-label {
-    font-size: 9px;
-  }
-
-  .steps-patient-field-value {
-    font-size: 12px;
-  }
-
-  .steps-top-bar {
-    padding: 6px 12px;
-    gap: 6px;
-  }
-
-  .steps-nav-actions .ant-btn {
-    min-height: 36px;
-    padding: 0 10px;
-    font-size: 12px;
-  }
-
-  .steps-breadcrumb-item {
-    padding: 5px 10px;
-    font-size: 11px;
-    min-height: 30px;
-  }
-
-  .steps-stage-body {
-    padding: 12px;
-  }
-
-  .steps-chat-step-card {
-    padding: 14px 16px;
-    border-radius: 10px;
-  }
-
-  .steps-title {
-    font-size: 16px;
-  }
-
-  .steps-description {
-    font-size: 13px;
-  }
-
-  .steps-narration-bar {
-    padding: 8px 12px;
-  }
-
-  .steps-touch-nav {
-    width: 44px;
-    height: 44px;
-    font-size: 16px;
-  }
-
-  .steps-touch-nav-left {
-    left: 8px;
-  }
-
-  .steps-touch-nav-right {
-    right: 8px;
-  }
-}
-
-/* ── Reduced motion ─────────────────────────────────────── */
-
-@media (prefers-reduced-motion: reduce) {
-  .steps-chat-step-card.slide-forward,
-  .steps-chat-step-card.slide-backward,
-  .steps-chat-step-card.slide-forward .steps-index-pill,
-  .steps-chat-step-card.slide-backward .steps-index-pill,
-  .steps-chat-step-card.slide-forward .steps-title,
-  .steps-chat-step-card.slide-backward .steps-title,
-  .steps-chat-step-card.slide-forward .steps-description,
-  .steps-chat-step-card.slide-backward .steps-description,
-  .steps-chat-step-card.slide-forward .steps-chat-step-component,
-  .steps-chat-step-card.slide-backward .steps-chat-step-component {
-    animation: none !important;
-    opacity: 1 !important;
-    transform: none !important;
-  }
-}
+/* ── Page shell ─────────────────────────────────────────── */
+
+.process-steps-page {
+  display: flex;
+  flex-direction: column;
+  /* The app shell's `.right-section` is `height: 100vh` with a fixed 56px header
+     (`.page-wrapper`) on top of it plus 15px padding. A plain `height: 100%`
+     makes this page a full 100vh — so its bottom runs past the viewport under the
+     header and forces a page scroll in normal view. Bound it to the space that is
+     actually visible below the header instead. (In full screen the promoted
+     `.steps-viewport` is 100vh via the Fullscreen API, so this doesn't apply.) */
+  height: calc(100vh - 86px);
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.steps-viewport {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.steps-main-card {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .ant-card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+    padding: 0;
+    background: #ffffff;
+    overflow: hidden;
+  }
+}
+
+/* ── Patient info bar ───────────────────────────────────── */
+
+.steps-patient-bar {
+  flex: 0 0 auto;
+  padding: 0;
+  background: #f8fbff;
+  border-bottom: 1px solid #e8eef8;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.steps-patient-bar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Transform GuestInfoComponent into a single-row horizontal strip */
+
+.steps-patient-bar .guest-info {
+  margin: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  width: 100%;
+}
+
+.steps-patient-bar .guest-info > .ant-card-body,
+.steps-patient-bar .guest-info > div > .ant-card-body,
+.steps-patient-bar .guest-info > div {
+  padding: 0 !important;
+}
+
+.steps-patient-bar .guest-info .ant-row {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  margin: 0 !important;
+  gap: 0 !important;
+  row-gap: 0 !important;
+  align-items: stretch !important;
+  width: max-content !important;
+  min-width: 100% !important;
+}
+
+.steps-patient-bar .guest-info .ant-row > [class*='ant-col'] {
+  flex: 0 0 auto !important;
+  max-width: none !important;
+  width: auto !important;
+  padding: 0 !important;
+}
+
+.steps-patient-bar .guest-info .information {
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  padding: 6px 16px !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  height: 100% !important;
+  min-height: 40px !important;
+  box-shadow: none !important;
+  border-right: 1px solid #dde5f0 !important;
+  white-space: nowrap !important;
+}
+
+.steps-patient-bar .guest-info .ant-row > [class*='ant-col']:first-child .information {
+  padding-left: 16px !important;
+}
+
+.steps-patient-bar .guest-info .ant-row > [class*='ant-col']:last-child .information {
+  border-right: none !important;
+}
+
+/* Label */
+.steps-patient-bar .guest-info .information label,
+.steps-patient-bar .guest-info .information .label,
+.steps-patient-bar .guest-info .information small,
+.steps-patient-bar .guest-info .information > span:first-child {
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.07em !important;
+  color: #9eafc2 !important;
+  line-height: 1 !important;
+  margin: 0 0 3px !important;
+  display: block !important;
+}
+
+/* Value */
+.steps-patient-bar .guest-info .information strong,
+.steps-patient-bar .guest-info .information h4,
+.steps-patient-bar .guest-info .information h5,
+.steps-patient-bar .guest-info .information .value,
+.steps-patient-bar .guest-info .information > span:last-child,
+.steps-patient-bar .guest-info .information p {
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  color: #1e293b !important;
+  margin: 0 !important;
+  line-height: 1.3 !important;
+  white-space: nowrap !important;
+}
+
+/* ── Top bar (breadcrumbs + nav actions) ────────────────── */
+
+.steps-top-bar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  min-height: 70px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
+     Matches the onboarding reference without the frosted-glass treatment. */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+  background: linear-gradient(180deg, #a7c2c6 100%, #eff3e3 100%);
+}
+
+.steps-breadcrumb-strip {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  /* `safe center` keeps the steps centered when they fit, but falls back to
+     start-aligned when there are too many to fit (>6). Plain `center` would clip
+     BOTH ends on overflow — cutting off the active step's label (e.g. "Guest
+     Details") and making it unreachable even though the strip scrolls. */
+  justify-content: safe center;
+  gap: clamp(28px, 3vw, 52px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  padding: 0 8px;
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+
+/* Full-screen toggle — grey frosted pill anchored to the far left. */
+.steps-fullscreen-toggle {
+  flex: 0 0 auto;
+}
+
+.steps-fullscreen-toggle.ant-btn,
+.steps-fullscreen-toggle.ant-btn-dashed {
+  height: 38px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: #07232E33;
+  border: 1px solid #dbe3e6;
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+}
+
+.steps-fullscreen-toggle.ant-btn:hover,
+.steps-fullscreen-toggle.ant-btn:focus {
+  background: #ffffff;
+  border-color: #ffffff;
+  color: #000000;
+  transform: translateY(-1px);
+}
+
+.steps-nav-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  /*
+    Anchors the Back + primary CTA to the far right. In fullscreen the
+    breadcrumb strip is not rendered, so this margin keeps the group pinned
+    right with only the Full Screen toggle sitting on the left.
+  */
+  margin-left: auto;
+}
+
+.steps-nav-actions .ant-btn {
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 18px;
+  font-size: 13px;
+  font-weight: 600;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+/* Secondary (Back / previous-process) — solid white pill. */
+.steps-nav-actions .ant-btn-default {
+  background: #ffffff;
+  border-color: #dbe3e6;
+  color: #4a5a68;
+}
+
+.steps-nav-actions .ant-btn-default:hover,
+.steps-nav-actions .ant-btn-default:focus {
+  background: #f4f7f8;
+  border-color: #c3ccd0;
+  color: #253a5b;
+}
+
+.steps-nav-actions .ant-btn:active {
+  transform: scale(0.97);
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar {
+  height: 3px;
+}
+
+/* ── Resume banner ──────────────────────────────────────── */
+
+.steps-resume-banner {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 14px;
+  background: #fff8e1;
+  border-bottom: 1px solid #f5e3a3;
+  color: #5b4400;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.steps-resume-banner-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.steps-resume-banner-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar-thumb {
+  background: #d0dff5;
+  border-radius: 4px;
+}
+
+.steps-breadcrumb-item {
+  /* Compact, natural-width steps that sit centered with connector lines
+     between them — matching the onboarding reference. */
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  border: none;
+  background: transparent;
+  border-radius: 999px;
+  padding: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #7a8792;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  min-height: 34px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Thin connecting line drawn into the gap toward the next step.
+   Width matches the strip's gap so it spans the space without overhanging. */
+.steps-breadcrumb-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  width: clamp(28px, 3vw, 52px);
+  height: 1px;
+  background: rgba(37, 58, 91, 0.2);
+  transform: translateY(-50%);
+}
+
+.steps-breadcrumb-item:active {
+  transform: scale(0.97);
+}
+
+/* Number bubble — default (upcoming) solid muted circle. */
+.steps-breadcrumb-index {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  background: #ffffff;
+  border: 1px solid #d3dbdf;
+  color: #8a97a2;
+  flex: 0 0 auto;
+  transition: all 0.2s ease;
+}
+
+.steps-breadcrumb-item:hover .steps-breadcrumb-index {
+  border-color: rgba(37, 58, 91, 0.35);
+  color: #253a5b;
+}
+
+/* Label is shown only for the active step (upcoming steps are circle-only,
+   as in the reference). */
+.steps-breadcrumb-label {
+  display: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: inherit;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ACTIVE — solid white rounded pill with dark navy text. */
+.steps-breadcrumb-item.active {
+  background: #ffffff;
+  padding: 4px 16px 4px 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
+  color: #253a5b;
+  font-weight: 600;
+}
+
+.steps-breadcrumb-item.active .steps-breadcrumb-index {
+  background: #ffffff;
+  border-color: rgba(37, 58, 91, 0.25);
+  color: #253a5b;
+}
+
+.steps-breadcrumb-item.active .steps-breadcrumb-label {
+  display: inline;
+  color: #253a5b;
+}
+
+/* COMPLETED — filled navy circle. */
+.steps-breadcrumb-item.completed .steps-breadcrumb-index {
+  background: #253a5b;
+  border-color: #253a5b;
+  color: #ffffff;
+}
+
+/* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */
+.steps-nav-actions .ant-btn-primary {
+  background: #253a5b;
+  border-color: #253a5b;
+  border-radius: 999px;
+  padding: 0 30px;
+  min-height: 40px;
+  box-shadow: 0 8px 20px rgba(37, 58, 91, 0.28);
+}
+
+.steps-nav-actions .ant-btn-primary:hover,
+.steps-nav-actions .ant-btn-primary:focus {
+  background: #1d3054;
+  border-color: #1d3054;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(37, 58, 91, 0.36);
+}
+
+.steps-nav-actions .ant-btn-primary:disabled,
+.steps-nav-actions .ant-btn-primary[disabled] {
+  background: #c8d0e0;
+  border-color: #c8d0e0;
+  color: #ffffff;
+  box-shadow: none;
+  transform: none;
+}
+
+.steps-breadcrumb-empty {
+  color: #64748b;
+  font-size: 12px;
+}
+
+/* ── Content area ───────────────────────────────────────── */
+
+.steps-content-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.steps-stage-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px 14px;
+  box-sizing: border-box;
+  position: relative;
+    background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
+}
+.steps-stage-body.is-swipe-enabled {
+  touch-action: pan-y;
+}
+/* Zoomed in (full screen): scroll natively in both axes. */
+.steps-stage-body.is-zoomed {
+  overflow: auto;
+}
+.steps-stage-body.is-swipe-enabled.is-zoomed {
+  touch-action: pan-x pan-y;
+}
+
+/* Wrapper for step content; transformed for full-screen zoom. */
+.steps-zoom-layer {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+}
+
+/* ── Touch-device floating nav arrows ───────────────────── */
+
+.steps-touch-nav {
+  position: absolute;
+  top: 50%;
+  z-index: 6;
+  width: 52px;
+  height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(30, 58, 138, 0.55);
+  backdrop-filter: blur(8px) saturate(140%);
+  -webkit-backdrop-filter: blur(8px) saturate(140%);
+  color: #ffffff;
+  font-size: 18px;
+  cursor: pointer;
+  box-shadow:
+    0 10px 24px rgba(15, 23, 42, 0.22),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-50%) scale(0.82);
+  transition:
+    opacity 260ms ease,
+    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
+    visibility 0s linear 260ms,
+    background-color 200ms ease,
+    box-shadow 200ms ease;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+/*
+  Decorative pulsing ring around the button.
+  - Drawn via ::before so it does not interfere with click targets.
+  - Only animates while the button is visible and enabled, to keep the
+    idle state calm instead of visually noisy.
+*/
+.steps-touch-nav::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.45);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.steps-touch-nav.is-visible:not(:disabled)::before {
+  animation: steps-touch-nav-ring 2.4s ease-out infinite;
+}
+
+/*
+  Radial wash behind the icon for depth.
+  - Keeps the icon glyph crisp against varied content backgrounds.
+*/
+.steps-touch-nav::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%);
+  pointer-events: none;
+}
+
+.steps-touch-nav .anticon {
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25));
+}
+
+.steps-touch-nav:hover:not(:disabled),
+.steps-touch-nav:focus-visible:not(:disabled) {
+  background: rgba(30, 58, 138, 0.92);
+  box-shadow:
+    0 14px 30px rgba(15, 23, 42, 0.32),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
+  outline: none;
+}
+
+.steps-touch-nav:hover:not(:disabled),
+.steps-touch-nav:focus-visible:not(:disabled),
+.steps-touch-nav.is-visible:hover:not(:disabled),
+.steps-touch-nav.is-visible:focus-visible:not(:disabled) {
+  opacity: 1;
+}
+
+.steps-touch-nav:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.94);
+  transition:
+    transform 120ms ease,
+    opacity 120ms ease,
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.steps-touch-nav:disabled {
+  background: rgba(148, 163, 184, 0.38);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: not-allowed;
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.steps-touch-nav:disabled::after {
+  display: none;
+}
+
+.steps-touch-nav-left {
+  left: 14px;
+}
+
+.steps-touch-nav-right {
+  right: 14px;
+}
+
+.steps-touch-nav.is-visible {
+  opacity: 0.68;
+  visibility: visible;
+  transform: translateY(-50%) scale(1);
+  transition:
+    opacity 260ms ease,
+    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
+    visibility 0s linear 0s,
+    background-color 200ms ease,
+    box-shadow 200ms ease;
+}
+
+@keyframes steps-touch-nav-ring {
+  0% {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+
+  65% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .steps-touch-nav {
+    transition:
+      opacity 120ms linear,
+      visibility 0s linear 120ms;
+    transform: translateY(-50%);
+  }
+
+  .steps-touch-nav.is-visible {
+    transform: translateY(-50%);
+    transition:
+      opacity 120ms linear,
+      visibility 0s linear 0s;
+  }
+
+  .steps-touch-nav.is-visible:not(:disabled)::before {
+    animation: none;
+  }
+}
+
+.steps-stage-body::-webkit-scrollbar {
+  width: 5px;
+}
+
+.steps-stage-body::-webkit-scrollbar-track {
+  background: #f4f8ff;
+  border-radius: 4px;
+}
+
+.steps-stage-body::-webkit-scrollbar-thumb {
+  background: #c5d5ee;
+  border-radius: 4px;
+}
+
+.steps-stage-body::-webkit-scrollbar-thumb:hover {
+  background: #93b4e0;
+}
+
+.steps-chat-step-card {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e8eef8;
+  border-radius: 10px;
+  padding: 14px 16px;
+  background: #ffffff;
+  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Step card animations */
+
+.steps-chat-step-card.slide-forward {
+  animation: step-slide-forward 300ms ease;
+}
+
+.steps-chat-step-card.slide-backward {
+  animation: step-slide-backward 300ms ease;
+}
+
+.steps-chat-step-card.slide-forward .steps-index-pill,
+.steps-chat-step-card.slide-backward .steps-index-pill,
+.steps-chat-step-card.slide-forward .steps-title,
+.steps-chat-step-card.slide-backward .steps-title,
+.steps-chat-step-card.slide-forward .steps-description,
+.steps-chat-step-card.slide-backward .steps-description,
+.steps-chat-step-card.slide-forward .steps-chat-step-component,
+.steps-chat-step-card.slide-backward .steps-chat-step-component {
+  opacity: 0;
+  animation: step-text-reveal 460ms ease forwards;
+}
+
+.steps-chat-step-card.slide-forward .steps-index-pill,
+.steps-chat-step-card.slide-backward .steps-index-pill {
+  animation-delay: 40ms;
+}
+
+.steps-chat-step-card.slide-forward .steps-title,
+.steps-chat-step-card.slide-backward .steps-title {
+  animation-delay: 100ms;
+}
+
+.steps-chat-step-card.slide-forward .steps-description,
+.steps-chat-step-card.slide-backward .steps-description {
+  animation-delay: 160ms;
+}
+
+.steps-chat-step-card.slide-forward .steps-chat-step-component,
+.steps-chat-step-card.slide-backward .steps-chat-step-component {
+  animation-delay: 220ms;
+}
+
+@keyframes step-slide-forward {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes step-slide-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes step-text-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.steps-chat-step-top {
+  flex: 0 0 auto;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f1f5fb;
+}
+
+.steps-index-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #eaf2ff;
+  color: #1d4ed8;
+  font-size: 10px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.steps-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+}
+
+.steps-description {
+  margin: 4px 0 0;
+  color: #4b5563;
+  line-height: 1.5;
+  font-size: 13px;
+}
+
+.steps-chat-step-component {
+  // margin-top: 10px;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: thin;
+  scrollbar-color: #c5d5ee #f4f8ff;
+}
+
+.steps-chat-step-component::-webkit-scrollbar {
+  width: 6px;
+}
+
+.steps-chat-step-component::-webkit-scrollbar-track {
+  background: #f4f8ff;
+  border-radius: 4px;
+}
+
+.steps-chat-step-component::-webkit-scrollbar-thumb {
+  background: #c5d5ee;
+  border-radius: 4px;
+}
+
+.steps-chat-step-component::-webkit-scrollbar-thumb:hover {
+  background: #93b4e0;
+}
+
+.steps-chat-step-component > * {
+  flex: 0 0 auto;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.steps-chat-loading {
+  flex: 1 1 auto;
+  min-height: 120px;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Frosted skeleton card that fills the stage while a step loads (replaces the
+   old centered spinner) — matches the soft gradient step surfaces. */
+.steps-chat-loading__card {
+  width: 100%;
+  max-width: 1100px;
+  align-self: stretch;
+  padding: 28px 32px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 2px 10px rgba(20, 50, 64, 0.05);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* ── Narration bar (hidden by default via NARRATION_CONTROLS_ENABLED) ── */
+
+.steps-narration-bar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid #e8eef8;
+  background: #ffffff;
+}
+
+.steps-narration-bar .ant-btn {
+  min-height: 34px;
+  border-radius: 8px;
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 600;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.steps-voice-provider-select {
+  min-width: 140px !important;
+}
+
+.steps-voice-select {
+  min-width: 180px !important;
+}
+
+/* ── Fullscreen ─────────────────────────────────────────── */
+
+.steps-viewport:fullscreen,
+.steps-viewport:-webkit-full-screen {
+  background: #f7fbff;
+}
+
+.steps-viewport:fullscreen .steps-main-card,
+.steps-viewport:-webkit-full-screen .steps-main-card {
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.steps-viewport:fullscreen .steps-stage-body,
+.steps-viewport:-webkit-full-screen .steps-stage-body {
+  padding: 3px;
+}
+
+/* ── Small laptops (13" / 1366px and below) ─────────────── */
+
+@media (max-width: 1366px) {
+  .steps-top-bar {
+    // padding: 6px 10px;
+    gap: 6px;
+  }
+
+  .steps-nav-actions {
+    gap: 4px;
+  }
+
+  .steps-nav-actions .ant-btn {
+    min-height: 32px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  .steps-breadcrumb-item {
+    padding: 5px 10px;
+    font-size: 11px;
+    min-height: 30px;
+  }
+
+  .steps-breadcrumb-index {
+    width: 18px;
+    height: 18px;
+    font-size: 10px;
+  }
+
+  .steps-stage-body {
+    padding: 8px 12px;
+  }
+
+  .steps-chat-step-card {
+    padding: 9px;
+  }
+
+  .steps-title {
+    font-size: 15px;
+  }
+
+  .steps-description {
+    font-size: 12px;
+  }
+}
+
+/* ── Mobile ─────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .steps-patient-bar {
+    padding: 8px 12px;
+  }
+
+  .steps-patient-bar-sep {
+    margin: 0 10px;
+  }
+
+  .steps-patient-field-label {
+    font-size: 9px;
+  }
+
+  .steps-patient-field-value {
+    font-size: 12px;
+  }
+
+  .steps-top-bar {
+    padding: 6px 12px;
+    gap: 6px;
+  }
+
+  .steps-nav-actions .ant-btn {
+    min-height: 36px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  .steps-breadcrumb-item {
+    padding: 5px 10px;
+    font-size: 11px;
+    min-height: 30px;
+  }
+
+  .steps-stage-body {
+    padding: 12px;
+  }
+
+  .steps-chat-step-card {
+    padding: 14px 16px;
+    border-radius: 10px;
+  }
+
+  .steps-title {
+    font-size: 16px;
+  }
+
+  .steps-description {
+    font-size: 13px;
+  }
+
+  .steps-narration-bar {
+    padding: 8px 12px;
+  }
+
+  .steps-touch-nav {
+    width: 44px;
+    height: 44px;
+    font-size: 16px;
+  }
+
+  .steps-touch-nav-left {
+    left: 8px;
+  }
+
+  .steps-touch-nav-right {
+    right: 8px;
+  }
+}
+
+/* ── Reduced motion ─────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .steps-chat-step-card.slide-forward,
+  .steps-chat-step-card.slide-backward,
+  .steps-chat-step-card.slide-forward .steps-index-pill,
+  .steps-chat-step-card.slide-backward .steps-index-pill,
+  .steps-chat-step-card.slide-forward .steps-title,
+  .steps-chat-step-card.slide-backward .steps-title,
+  .steps-chat-step-card.slide-forward .steps-description,
+  .steps-chat-step-card.slide-backward .steps-description,
+  .steps-chat-step-card.slide-forward .steps-chat-step-component,
+  .steps-chat-step-card.slide-backward .steps-chat-step-component {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}