ui-soxo-bootstrap-core 2.6.1-dev.17 → 2.6.1-dev.19

package/core/modules/steps/steps.scss

@@ -1,426 +1,608 @@
 .process-steps-page {
-  height: 100dvh;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  min-height: 100vh;
+  height: 100vh;
+}
 
-  &.consultation-mode {
-    background: linear-gradient(180deg, #c8d2d6 0%, #d5d7d1 21%, #d9d8c6 40%, #c6cebe 58%, #a8c0c0 71%, #6e9fbb 84%, #367495 93%, #0a4d6e 100%);
-    padding: 12px;
-  }
+.steps-viewport {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: 100%;
+  min-height: 0;
+}
 
-  &.is-fullscreen {
-    padding: 12px;
+.steps-main-card {
+  display: flex;
+  flex: 1 1 auto;
+  height: 100%;
+  min-height: 0;
+  border: 1px solid #dfe8f7;
+  border-radius: 18px;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+
+  .ant-card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 14px 16px 16px;
+    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+    border-radius: 18px;
   }
 }
 
-.process-steps-page.consultation-mode .process-steps-card {
+.timeline-sidebar.collapsed {
+  align-items: center;
+}
+
+.timeline-sidebar.collapsed .timeline-step {
+  padding: 6px 4px;
   border: none;
   background: transparent;
   box-shadow: none;
 }
 
-.process-steps-page.consultation-mode .process-steps-card > .ant-card-body {
-  padding: 10px;
+.timeline-sidebar.collapsed .step-marker {
+  margin-right: 0;
 }
 
-.process-steps-card {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
+.steps-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding-bottom: 10px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #e7eef9;
+}
 
-  .ant-card-body {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
+.steps-breadcrumb-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 2px 0;
+  scrollbar-width: thin;
 }
 
-.process-steps-row {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
+.steps-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #dce6f5;
+  background: #f8fbff;
+  border-radius: 999px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #334155;
+  max-width: 260px;
 }
 
-.process-steps-timeline-col,
-.process-steps-content-col {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  box-sizing: border-box;
+.steps-breadcrumb-item:hover {
+  background: #eef5ff;
+  border-color: #c8d9f6;
 }
 
-.process-steps-timeline-col {
-  position: sticky;
-  top: 0;
-  align-self: flex-start;
-  height: 100%;
-  max-height: 100%;
+.steps-breadcrumb-item.active {
+  background: #1d4ed8;
+  border-color: #1d4ed8;
+  color: #ffffff;
 }
 
-.process-steps-timeline-col .timeline-card {
-  height: 100%;
-  width: 100%;
+.steps-breadcrumb-item.completed {
+  border-color: #8bd0a4;
+  background: #f0fbf4;
 }
 
-.process-steps-content-col {
-  flex: 1;
-  max-height: 100%;
-  overflow: hidden;
-  // background: #fff;
-  // border: 1px solid #e5ebf3;
-  // border-radius: 14px;
-  // box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
-  // padding: 14px 16px;
-  position: relative;
-  z-index: 2;
+.steps-breadcrumb-item.completed .steps-breadcrumb-index {
+  background: #16a34a;
+  color: #ffffff;
 }
 
-.process-steps-content-col > .action-buttons-layout {
-  flex: 1;
-  min-height: 0;
-  height: 100%;
+.steps-breadcrumb-item.active .steps-breadcrumb-index {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
 }
 
-.process-step-header {
-  margin-bottom: 20px;
-  flex-shrink: 0;
+.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;
 }
 
-.process-step-title {
-  margin: 0;
-  font-size: 16px;
+.steps-breadcrumb-label {
+  font-size: 12px;
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.process-step-description {
-  margin: 0;
-  color: #666;
+.steps-breadcrumb-empty {
+  color: #64748b;
+  font-size: 12px;
+  padding: 0 4px;
 }
 
-.timeline-card {
-  height: 100%;
-  border: none !important;
-  border-radius: 12px;
-  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 15%, var(--surface-color)), var(--surface-color));
+.steps-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex: 0 0 auto;
+
+  .ant-btn {
+    border-radius: 8px;
+    height: 32px;
+    padding: 0 12px;
+  }
 
-  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
+  .ant-select {
+    min-width: 150px;
+  }
+}
 
-  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 20%, transparent);
+.steps-voice-provider-select {
+  min-width: 140px !important;
+}
 
-  transition: all 0.3s ease;
-  // background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
-  // box-shadow:
-  // inset 0 1px 2px rgba(255, 255, 255, 0.8),
-  // inset 0 8px 16px rgba(15, 23, 42, 0.08),
-  // inset 0 -2px 8px rgba(15, 23, 42, 0.04);
+.steps-voice-select {
+  min-width: 190px !important;
 }
 
-.timeline-card .ant-card-body {
-  padding: 8px;
-  border: none;
-  min-height: 100%;
-  position: relative;
-  overflow: visible;
+.steps-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+}
+
+.steps-content-column,
+.steps-guest-column {
+  display: flex;
+  min-height: 0;
 }
 
-.timeline-sidebar-wrap {
+.steps-content-panel {
+  width: 100%;
   height: 100%;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  overflow: hidden;
 }
 
-.timeline-sidebar {
+.steps-stage-body {
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  transition: all 0.3s ease;
-  height: 100%;
   overflow-y: auto;
+  padding: 0;
+}
+
+.steps-chat-step-card {
+  width: 100%;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 100%;
+  border: 1px solid #dbe7fb;
+  border-radius: 14px;
+  padding: 16px;
+  background: #ffffff;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
+}
+
+.steps-chat-step-card.slide-forward {
+  animation: step-slide-forward 320ms ease;
+}
+
+.steps-chat-step-card.slide-backward {
+  animation: step-slide-backward 320ms 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 .guest-guide-card,
+.steps-chat-step-card.slide-backward .guest-guide-card,
+.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 520ms ease forwards;
+}
 
-  scrollbar-width: thin; /* Firefox */
-  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+.steps-chat-step-card.slide-forward .steps-index-pill,
+.steps-chat-step-card.slide-backward .steps-index-pill {
+  animation-delay: 40ms;
+}
 
-  &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0);
+.steps-chat-step-card.slide-forward .steps-title,
+.steps-chat-step-card.slide-backward .steps-title {
+  animation-delay: 120ms;
+}
+
+.steps-chat-step-card.slide-forward .steps-description,
+.steps-chat-step-card.slide-backward .steps-description {
+  animation-delay: 180ms;
+}
+
+.steps-chat-step-card.slide-forward .guest-guide-card,
+.steps-chat-step-card.slide-backward .guest-guide-card {
+  animation-delay: 240ms;
+}
+
+.steps-chat-step-card.slide-forward .steps-chat-step-component,
+.steps-chat-step-card.slide-backward .steps-chat-step-component {
+  animation-delay: 300ms;
+}
+
+@keyframes step-slide-forward {
+  from {
+    opacity: 0;
+    transform: translateX(28px);
   }
 
-  &:hover::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.25);
+  to {
+    opacity: 1;
+    transform: translateX(0);
   }
+}
 
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+@keyframes step-slide-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-28px);
   }
 
-  &::-webkit-scrollbar-track {
-    background: transparent;
+  to {
+    opacity: 1;
+    transform: translateX(0);
   }
+}
 
-  &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.25);
-    border-radius: 10px;
+@keyframes step-text-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-16px);
+    clip-path: inset(0 0 100% 0);
   }
 
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.4);
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    clip-path: inset(0 0 0 0);
   }
-  padding-right: 4px;
 }
 
-.timeline-step {
-  display: flex;
-  align-items: flex-start;
-  cursor: pointer;
-  border: 1px solid #e4eaf3;
-  border-radius: 10px;
-  background: #fff;
-  padding: 10px 12px;
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
+.steps-chat-step-top {
+  margin-bottom: 12px;
+}
+
+.steps-index-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: #eaf2ff;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 8px;
 }
 
-.timeline-step:hover {
-  border-color: #b7c8ea;
-  box-shadow: 0 2px 8px rgba(24, 45, 84, 0.08);
-  transform: translateY(-1px);
+.steps-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
 }
 
-.timeline-step.active .step-number {
-  background: #1f6fe5;
-  border-color: #1f6fe5;
-  color: white;
+.steps-description {
+  margin: 6px 0 0;
+  color: #4b5563;
+  line-height: 1.5;
 }
 
-.timeline-step.completed .step-number {
-  background: #2fa857;
-  border-color: #2fa857;
-  color: white;
+.guest-guide-card {
+  margin-top: 12px;
+  padding: 12px 14px;
+  border: 1px solid #e4edf9;
+  border-radius: 10px;
+  background: #f6faff;
 }
 
-.timeline-step.active {
-  border-color: #96b9f7;
-  box-shadow: 0 0 0 1px rgba(31, 111, 229, 0.2);
+.guest-guide-title {
+  margin: 0 0 6px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #1d4ed8;
 }
 
-.timeline-step.completed {
-  border-color: #cfead9;
+.guest-guide-expectation,
+.guest-guide-note,
+.guest-guide-tip {
+  margin: 0;
+  color: #334155;
+  line-height: 1.5;
 }
 
-.step-marker {
+.guest-guide-note,
+.guest-guide-tip {
+  margin-top: 6px;
+}
+
+.steps-chat-step-component {
+  margin-top: 14px;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  align-items: center;
-  margin-right: 12px;
-  min-width: 34px;
+  min-height: 0;
 }
 
-.step-number {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  border: 2px solid #d4dde9;
-  background: #fff;
-  color: #5b6678;
+.steps-chat-step-component > * {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.steps-chat-loading {
+  min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
 }
 
-.vertical-line {
-  width: 2px;
-  min-height: 14px;
-  flex: 1;
-  margin-top: 6px;
-  background: #d5deea;
+.steps-viewport:fullscreen,
+.steps-viewport:-webkit-full-screen {
+  background: radial-gradient(circle at top, #eef4ff 0%, #f7fbff 45%, #ffffff 100%);
+  padding: 16px;
+}
+
+.steps-viewport:fullscreen .steps-main-card,
+.steps-viewport:-webkit-full-screen .steps-main-card {
+  height: 100%;
 }
 
-.timeline-step.completed .vertical-line {
-  background: #2fa857;
+.steps-viewport:fullscreen .steps-main-card .ant-card-body,
+.steps-viewport:-webkit-full-screen .steps-main-card .ant-card-body {
+  height: 100%;
+}
+
+.steps-viewport:fullscreen .steps-layout,
+.steps-viewport:-webkit-full-screen .steps-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.steps-viewport:fullscreen .steps-content-panel,
+.steps-viewport:fullscreen .steps-guest-panel,
+.steps-viewport:-webkit-full-screen .steps-content-panel,
+.steps-viewport:-webkit-full-screen .steps-guest-panel {
+  height: 100%;
 }
 
-.step-info {
+.steps-viewport:fullscreen .steps-stage-panel,
+.steps-viewport:-webkit-full-screen .steps-stage-panel {
+  border-radius: 0;
+  border: none;
+  background: transparent;
+}
+
+.steps-viewport:fullscreen .steps-stage-body,
+.steps-viewport:-webkit-full-screen .steps-stage-body {
+  max-width: 1280px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 8px;
+}
+
+.steps-viewport:fullscreen .steps-chat-step-card,
+.steps-viewport:-webkit-full-screen .steps-chat-step-card {
+  min-height: calc(100vh - 90px);
+}
+
+.steps-guest-panel {
+  width: 100%;
+  min-height: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  min-width: 0;
+  border: 1px solid #dfe9f8;
+  border-radius: 14px;
+  background: #ffffff;
+  overflow: hidden;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
 }
 
-.step-title {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: #6b7280;
-  margin-bottom: 2px;
+.steps-guest-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  padding: 11px 12px;
+  border-bottom: 1px solid #ebf1fa;
+  background: linear-gradient(90deg, #f2f7ff 0%, #fbfdff 100%);
 }
 
-.step-main {
+.steps-guest-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+}
+
+.steps-guest-highlight {
+  display: none;
+}
+
+.steps-guest-name {
   font-size: 16px;
-  font-weight: 600;
-  color: #1f2937;
+  font-weight: 700;
   line-height: 1.2;
-  margin-bottom: 2px;
 }
 
-.step-desc {
-  font-size: 13px;
-  color: #7a8495;
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.toggle-arrow {
-  position: absolute;
-  top: 50%;
-  right: -12px;
-  transform: translateY(-50%);
-  width: 30px;
-  height: 30px;
-  background: #fff;
-  border: 1px solid #b8c9e4;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #1f3f74;
-  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
-  z-index: 40;
-  transition:
-    background-color 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-
-  &:hover {
-    background: #f0f6ff;
-    border-color: #90abd1;
-    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.24);
-  }
+.steps-guest-meta {
+  margin-top: 4px;
+  font-size: 12px;
+  opacity: 0.92;
+}
 
-  &:active {
-    transform: translateY(-50%) scale(0.96);
-  }
+.steps-guest-body .guest-info {
+  margin: 0;
+  box-shadow: none;
+  border: 1px solid #e4ebf7;
+  border-radius: 12px;
 }
 
-.timeline-sidebar.collapsed {
-  align-items: center;
+.steps-guest-body .guest-info .information {
+  background: #f9fbff;
+  border: 1px solid #ebf1fa;
+  border-radius: 10px;
+  padding: 8px 10px;
+  height: 100%;
 }
 
-.timeline-sidebar.collapsed .timeline-step {
-  padding: 6px 4px;
-  border: none;
-  background: transparent;
-  box-shadow: none;
+.steps-guest-body .guest-info .ant-row > [class*='ant-col'] {
+  flex: 0 0 100%;
+  max-width: 100%;
 }
 
-.timeline-sidebar.collapsed .step-marker {
-  margin-right: 0;
+.steps-guest-fallback {
+  border: 1px dashed #cbd7eb;
+  border-radius: 10px;
+  background: #f8fbff;
+  padding: 12px;
+  color: #334155;
+  line-height: 1.5;
 }
 
-/* ============================
-   MOBILE & TABLET VIEW FIXES
-   ============================ */
+.steps-guest-fallback p {
+  margin: 0 0 6px;
+}
 
-@media (max-width: 992px) {
-  // iPad & tablets
-  .process-steps-page,
-  .process-steps-row {
-    min-height: auto;
-    height: auto;
-    overflow: visible;
-  }
+.steps-guest-fallback p:last-child {
+  margin-bottom: 0;
+}
 
-  .process-steps-page.consultation-mode {
-    padding: 8px;
+.steps-guest-fallback-text {
+  color: #64748b;
+}
+
+@media (max-width: 1200px) {
+  .steps-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
   }
 
-  .process-steps-card,
-  .process-steps-card .ant-card-body,
-  .process-steps-content-col {
-    overflow: visible;
+  .steps-header-actions {
+    justify-content: flex-start;
   }
+}
 
-  .process-steps-content-col {
-    padding: 12px;
-    border-radius: 12px;
-    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
+@media (max-width: 992px) {
+  .process-steps-page {
+    min-height: 100vh;
+    height: 100vh;
   }
 
-  .process-steps-timeline-col {
-    position: static;
-    top: auto;
-    align-self: stretch;
-    height: auto;
-    max-height: none;
+  .steps-main-card {
+    height: 100%;
+    min-height: 0;
   }
 
-  .timeline-card .ant-card-body {
+  .steps-main-card .ant-card-body {
     padding: 12px;
-    min-height: auto;
-    overflow: visible;
   }
 
-  .timeline-sidebar {
-    flex-direction: row !important;
-    overflow-x: auto;
-    overflow-y: visible;
-    gap: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
+  .steps-layout {
+    min-height: auto;
+    overflow: visible;
   }
 
-  .timeline-step {
-    min-width: 190px;
+  .steps-content-panel {
+    min-height: auto;
   }
 
-  .step-marker {
-    margin-right: 10px;
+  .steps-stage-body {
+    padding: 0;
   }
 
-  .vertical-line {
-    display: none;
+  .steps-guest-column {
+    min-height: 260px;
   }
+}
 
-  .toggle-arrow {
-    display: none !important; /* Hide collapse icon */
+@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 .guest-guide-card,
+  .steps-chat-step-card.slide-backward .guest-guide-card,
+  .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;
+    clip-path: inset(0 0 0 0) !important;
   }
 }
 
 @media (max-width: 768px) {
-  // mobile screens
-  .timeline-sidebar {
-    gap: 8px;
+  .steps-breadcrumb-item {
+    max-width: 200px;
+    padding: 5px 9px;
   }
 
-  .step-number {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
+  .steps-title {
+    font-size: 16px;
   }
 
-  .step-title {
-    font-size: 11px;
+  .steps-description {
+    font-size: 13px;
   }
 
-  .step-main {
-    font-size: 14px;
+  .steps-header-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(120px, 1fr));
+    width: 100%;
   }
 
-  .step-desc {
-    font-size: 12px;
+  .steps-header-actions .ant-btn {
+    width: 100%;
   }
 
-  /* Card layout full width */
-  .timeline-card .ant-card-body {
-    padding: 10px;
+  .steps-header-actions .ant-select {
+    width: 100%;
   }
 }