ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1-dev.31

package/core/modules/steps/steps.scss

@@ -1,159 +1,776 @@
-.timeline-card .ant-card-body {
-  // padding: 20px;
-  border: none;
-  min-height: 400px;
-  // position: fixed; /* For positioning the arrow */
+/* ── 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;
 }
 
-.timeline-sidebar {
+.steps-viewport {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  transition: all 0.3s ease;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
-.timeline-step {
+.steps-main-card {
   display: flex;
-  cursor: pointer;
+  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;
+  }
 }
 
-.timeline-step.active .step-number {
-  background: #3b82f6;
-  color: white;
+/* ── 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;
 }
 
-.timeline-step.completed .step-number {
-  background:  #22c55e;
-  color: white;
+/* 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%;
 }
 
-.step-marker {
+.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;
-  flex-direction: column;
   align-items: center;
-  margin-right: 14px;
+  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;
 }
 
-.step-number {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #d9d9d9;
+.steps-breadcrumb-strip {
+  flex: 1 1 auto;
+  min-width: 0;
   display: flex;
   align-items: center;
-  justify-content: 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;
 }
 
-.vertical-line {
-  width: 2px;
+.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;
-  background: #d9d9d9;
+  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;
 }
 
-.step-info {
+.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;
-  justify-content: center;
+  overflow: hidden;
 }
 
-.step-title {
-  font-size: 13px;
-  font-weight: 500;
+.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;
 }
 
-.step-main {
-  font-size: 15px;
-  font-weight: 600;
+.steps-stage-body.is-swipe-enabled {
+  touch-action: pan-y;
 }
 
-.toggle-arrow {
+/* ── Touch-device floating nav arrows ───────────────────── */
+
+.steps-touch-nav {
   position: absolute;
   top: 50%;
-  right: -12px; /* Position it just outside the card body padding */
-  transform: translateY(-50%);
-  width: 24px;
-  height: 24px;
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 50%;
-  display: flex;
+  z-index: 6;
+  width: 48px;
+  height: 48px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(30, 58, 138, 0.88);
+  color: #ffffff;
+  font-size: 18px;
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  z-index: 10;
-  transition: all 0.3s ease;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-50%) scale(0.85);
+  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms, background-color 160ms ease;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.steps-touch-nav:hover:not(:disabled),
+.steps-touch-nav:focus-visible:not(:disabled) {
+  background: rgba(30, 58, 138, 1);
+  outline: none;
+}
+
+.steps-touch-nav:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.steps-touch-nav:disabled {
+  background: rgba(148, 163, 184, 0.7);
+  cursor: not-allowed;
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
+}
+
+.steps-touch-nav-left {
+  left: 10px;
+}
+
+.steps-touch-nav-right {
+  right: 10px;
+}
+
+.steps-touch-nav.is-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(-50%) scale(1);
+  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s, background-color 160ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .steps-touch-nav {
+    transition: opacity 120ms linear, visibility 0s linear 120ms;
+    transform: translateY(-50%);
+  }
 
-  &:hover {
-    background: #f5f5f5;
+  .steps-touch-nav.is-visible {
+    transform: translateY(-50%);
+    transition: opacity 120ms linear, visibility 0s linear 0s;
   }
 }
 
-/* ============================
-   MOBILE & TABLET VIEW FIXES
-   ============================ */
+.steps-stage-body::-webkit-scrollbar {
+  width: 5px;
+}
 
-   
+.steps-stage-body::-webkit-scrollbar-track {
+  background: #f4f8ff;
+  border-radius: 4px;
+}
 
-@media (max-width: 992px) {   // iPad & tablets
-  .timeline-card .ant-card-body {
-    padding: 12px;
-    min-height: auto;
+.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);
   }
 
-  .timeline-sidebar {
-    flex-direction: row !important;
-    overflow-x: auto;
-    gap: 12px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
+  to {
+    opacity: 1;
+    transform: translateX(0);
   }
+}
 
-  .timeline-step {
-    flex-direction: column;
-    align-items: center;
+@keyframes step-slide-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
   }
 
-  .step-marker {
-    margin-right: 0;
+  to {
+    opacity: 1;
+    transform: translateX(0);
   }
+}
 
-  .step-info {
-    text-align: center;
+@keyframes step-text-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
   }
 
-  .toggle-arrow {
-    display: none !important; /* Hide collapse icon */
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-@media (max-width: 768px) {   // mobile screens
-  .timeline-sidebar {
-    gap: 8px;
+.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: 6px;
+}
+
+/* ── 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: 12px 14px;
+  }
+
+  .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;
   }
 
-  .step-number {
-    width: 24px;
-    height: 24px;
+  .steps-nav-actions .ant-btn {
+    min-height: 36px;
+    padding: 0 10px;
     font-size: 12px;
   }
 
-  .step-title {
+  .steps-breadcrumb-item {
+    padding: 5px 10px;
     font-size: 11px;
+    min-height: 30px;
   }
 
-  .step-main {
+  .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;
   }
 
-  .vertical-line {
-    display: none;
+  .steps-narration-bar {
+    padding: 8px 12px;
   }
 
-  /* Card layout full width */
-  .timeline-card .ant-card-body {
-    padding: 10px;
+  .steps-touch-nav {
+    width: 42px;
+    height: 42px;
+    font-size: 16px;
+  }
+
+  .steps-touch-nav-left {
+    left: 6px;
+  }
+
+  .steps-touch-nav-right {
+    right: 6px;
   }
 }
 
+/* ── 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;
+  }
+}