ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

package/core/modules/steps/steps.scss

@@ -1,907 +1,907 @@
-/* ── Page shell ─────────────────────────────────────────── */
-
-.process-steps-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  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: 8px;
-  padding: 6px 12px;
-  border-bottom: 1px solid #e8eef8;
-  background: #f8fbff;
-  min-height: 50px;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.steps-breadcrumb-strip {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  scrollbar-width: thin;
-  scrollbar-color: #d0dff5 transparent;
-  padding-bottom: 2px;
-}
-
-.steps-nav-actions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.steps-nav-actions .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;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-}
-
-.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 {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  border: 1.5px solid #dce6f5;
-  background: #f8fbff;
-  border-radius: 999px;
-  padding: 6px 14px;
-  cursor: pointer;
-  transition: all 0.18s ease;
-  color: #475569;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  min-height: 34px;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.steps-breadcrumb-item:hover {
-  background: #eef5ff;
-  border-color: #c8d9f6;
-  color: #1d4ed8;
-}
-
-.steps-breadcrumb-item:active {
-  transform: scale(0.96);
-}
-
-.steps-breadcrumb-item.active {
-  background: #1e3a8a;
-  border-color: #1e3a8a;
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.steps-breadcrumb-item.completed {
-  border-color: #86efac;
-  background: #f0fdf4;
-  color: #15803d;
-}
-
-.steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #16a34a;
-  color: #ffffff;
-}
-
-.steps-breadcrumb-item.active .steps-breadcrumb-index {
-  background: rgba(255, 255, 255, 0.22);
-  color: #ffffff;
-}
-
-.steps-breadcrumb-index {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 700;
-  background: #e2e8f4;
-  color: #1e293b;
-  flex: 0 0 auto;
-}
-
-.steps-breadcrumb-label {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.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;
-}
-
-.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 {
-  min-height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── 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;
+  height: 100%;
+  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: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid #e8eef8;
+  background: #f8fbff;
+  min-height: 50px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.steps-breadcrumb-strip {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: thin;
+  scrollbar-color: #d0dff5 transparent;
+  padding-bottom: 2px;
+}
+
+.steps-nav-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.steps-nav-actions .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;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.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 {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1.5px solid #dce6f5;
+  background: #f8fbff;
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  min-height: 34px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.steps-breadcrumb-item:hover {
+  background: #eef5ff;
+  border-color: #c8d9f6;
+  color: #1d4ed8;
+}
+
+.steps-breadcrumb-item:active {
+  transform: scale(0.96);
+}
+
+.steps-breadcrumb-item.active {
+  background: #1e3a8a;
+  border-color: #1e3a8a;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.steps-breadcrumb-item.completed {
+  border-color: #86efac;
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.steps-breadcrumb-item.completed .steps-breadcrumb-index {
+  background: #16a34a;
+  color: #ffffff;
+}
+
+.steps-breadcrumb-item.active .steps-breadcrumb-index {
+  background: rgba(255, 255, 255, 0.22);
+  color: #ffffff;
+}
+
+.steps-breadcrumb-index {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  background: #e2e8f4;
+  color: #1e293b;
+  flex: 0 0 auto;
+}
+
+.steps-breadcrumb-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.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;
+}
+
+.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 {
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── 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;
+  }
+}