Spaces:
Running
Running
| .process-group { | |
| display: inline-flex; | |
| flex-direction: column; | |
| position: relative; | |
| z-index: 1; | |
| margin: var(--spacing-xs) 0; | |
| padding: var(--spacing-xs) 0; | |
| min-width: 200px; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| flex-shrink: 0; | |
| } | |
| .process-group.utility-only { | |
| display: none ; | |
| } | |
| .show-utility-messages .process-group.utility-only { | |
| display: flex ; | |
| } | |
| /* Embedded Process Group inside Response */ | |
| .process-group.embedded { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| margin: 0; | |
| border-radius: var(--border-radius) var(--border-radius) 0 0; | |
| /* border-bottom: 1px solid rgba(255, 255, 255, 0.08); */ | |
| background: transparent; | |
| } | |
| /* Message container with embedded process group */ | |
| .message-container.has-process-group { | |
| display: inline-flex; | |
| flex-direction: column; | |
| padding: 0; | |
| overflow: hidden; | |
| min-width: 200px; | |
| max-width: 100%; | |
| } | |
| .message-container.has-process-group > .message { | |
| border: none; | |
| background: transparent; | |
| margin: 0; | |
| } | |
| /* Process Group Header */ | |
| .process-group-header { | |
| display: flex; | |
| align-items: center; | |
| padding: 0; | |
| cursor: pointer; | |
| user-select: none; | |
| transition: opacity 0.15s ease; | |
| min-height: 22px; | |
| gap: 6px; | |
| white-space: nowrap; | |
| } | |
| .process-group-header:hover { | |
| opacity: 0.85; | |
| } | |
| /* Expand/collapse triangle - CSS-only (no Material Icons) */ | |
| .process-group-header .expand-icon { | |
| display: inline-block; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 4px 0 4px 6px; | |
| border-color: transparent transparent transparent var(--color-text); | |
| opacity: 0.5; | |
| transition: transform 0.2s ease, opacity 0.15s ease; | |
| flex-shrink: 0; | |
| font-size: 0; /* Hide any text content */ | |
| margin-right: 2px; | |
| } | |
| .process-group-header:hover .expand-icon { | |
| opacity: 0.8; | |
| } | |
| .process-group.expanded .process-group-header .expand-icon { | |
| transform: rotate(90deg); | |
| } | |
| /* Group icon removed - using status badges */ | |
| .process-group-header .group-icon { | |
| display: none; | |
| } | |
| /* Group title - prominent display */ | |
| .process-group-header .group-title { | |
| flex: 0 1 auto; | |
| font-size: var(--font-size-medium); | |
| font-weight: 500; | |
| color: var(--color-text-muted); | |
| opacity: 0.9; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 350px; | |
| } | |
| /* Step count badge */ | |
| .process-group-header .step-count { | |
| font-size: 0.65rem; | |
| color: var(--color-text); | |
| opacity: 0.5; | |
| flex-shrink: 0; | |
| padding: 1px 6px; | |
| font-family: var(--font-family-code); | |
| } | |
| /* =========================================== | |
| 3-Letter Status Code Badges | |
| =========================================== */ | |
| /* Base status badge */ | |
| .step-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| font-family: var(--font-family-code); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| flex-shrink: 0; | |
| line-height: 1; | |
| } | |
| /* Status badge with icon */ | |
| .step-badge .material-symbols-outlined { | |
| font-size: 0.8rem; | |
| line-height: 1; | |
| } | |
| /* Badge icon styling */ | |
| .step-badge .badge-icon { | |
| font-size: var(--font-size-xs); | |
| margin-right: 2px; | |
| opacity: 0.9; | |
| } | |
| /* Status colors */ | |
| /* Each status defines --step-accent for cascading to internal icons */ | |
| /* GEN - agent type (blue/cyan) */ | |
| .process-group .GEN { | |
| --step-accent: #38bdf8; | |
| } | |
| .light-mode .process-group .GEN { | |
| --step-accent: #0284c7; | |
| } | |
| /* END - response/done type (green) */ | |
| .process-group .END { | |
| --step-accent: #22c55e; | |
| } | |
| .light-mode .process-group .END { | |
| --step-accent: #15803d; | |
| } | |
| /* USE - tool usage (amber/yellow) */ | |
| .process-group .USE { | |
| --step-accent: #fbbf24; | |
| } | |
| .light-mode .process-group .USE { | |
| --step-accent: #b45309; | |
| } | |
| /* MCP - mcp type (amber/yellow) */ | |
| .process-group .MCP { | |
| --step-accent: #fbbf24; | |
| } | |
| .light-mode .process-group .MCP { | |
| --step-accent: #b45309; | |
| } | |
| /* SUB and RES - subagent type and response (teal) */ | |
| .process-group .SUB { | |
| --step-accent: #14b8a6; | |
| } | |
| .light-mode .process-group .SUB { | |
| --step-accent: #0f766e; | |
| } | |
| .process-group .RES { | |
| --step-accent: #14b8a6; | |
| } | |
| .light-mode .process-group .RES { | |
| --step-accent: #0f766e; | |
| } | |
| /* EXE - code_exe type (magenta/purple) */ | |
| .process-group .EXE { | |
| --step-accent: #ba68c8; | |
| } | |
| .light-mode .process-group .EXE { | |
| --step-accent: #7c3aed; | |
| } | |
| /* WWW - browser type (indigo) */ | |
| .process-group .WWW { | |
| --step-accent: #818cf8; | |
| } | |
| .light-mode .process-group .WWW { | |
| --step-accent: #4f46e5; | |
| } | |
| /* WAIT - progress type (slate) */ | |
| .process-group .HDL { | |
| --step-accent: #94a3b8; | |
| } | |
| .light-mode .process-group .HDL { | |
| --step-accent: #475569; | |
| } | |
| /* INF - info type (gray) */ | |
| .process-group .INF { | |
| --step-accent: #94a3b8; | |
| } | |
| .light-mode .process-group .INF { | |
| --step-accent: #475569; | |
| } | |
| /* HNT - hint type (yellow-green) */ | |
| .process-group .HNT { | |
| --step-accent: #a3e635; | |
| } | |
| .light-mode .process-group .HNT { | |
| --step-accent: #65a30d; | |
| } | |
| /* WRN - warning type (orange) */ | |
| .process-group .WRN { | |
| --step-accent: #f97316; | |
| } | |
| .light-mode .process-group .WRN { | |
| --step-accent: #c2410c; | |
| } | |
| /* ERR - error type (red) */ | |
| .process-group .ERR { | |
| --step-accent: var(--color-error-text); | |
| } | |
| .light-mode .process-group .ERR { | |
| --step-accent: var(--color-error-text); | |
| } | |
| /* UTL - util type (gray-blue) */ | |
| .process-group .UTL { | |
| --step-accent: #64748b; | |
| } | |
| .light-mode .process-group .UTL { | |
| --step-accent: #334155; | |
| } | |
| .process-group .step-badge{ | |
| color: var(--step-accent); | |
| } | |
| .process-group .kvps-key{ | |
| color: var(--step-accent); | |
| } | |
| /* Completed process group styling */ | |
| .process-group-completed { | |
| opacity: 0.95; | |
| } | |
| .process-group-completed .group-status { | |
| font-weight: 700; | |
| } | |
| /* Subtle completion indicator on the expand icon */ | |
| .process-group-completed .expand-icon { | |
| color: #22c55e; | |
| } | |
| /* Group status badge in header */ | |
| .process-group-header .group-status { | |
| margin-left: var(--spacing-xs); | |
| } | |
| /* Metrics row */ | |
| .process-group-header .group-metrics { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| /* margin-left: auto; */ | |
| margin-left: 2em; | |
| font-size: 0.65rem; | |
| font-family: var(--font-family-code); | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| } | |
| .process-group-header .group-metrics .material-symbols-outlined { | |
| font-size: var(--font-size-xs); | |
| opacity: 0.7; | |
| } | |
| .process-group-header .group-metrics span[class^="metric-"] { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 2px; | |
| } | |
| .process-group-header .group-metrics .metric-notifications { | |
| font-weight: 600; | |
| } | |
| .process-group-header .group-metrics .metric-notifications[hidden] { | |
| display: none; | |
| } | |
| .process-group-header .group-metrics .metric-notifications .material-symbols-outlined { | |
| opacity: 0.85; | |
| } | |
| /* Legacy timestamp/duration (for backwards compatibility) */ | |
| .process-group-header .group-timestamp { | |
| font-size: 0.65rem; | |
| color: rgba(255, 255, 255, 0.65); | |
| flex-shrink: 0; | |
| font-family: var(--font-family-code); | |
| display: none; /* Hidden, replaced by metrics */ | |
| } | |
| .process-group-header .group-duration { | |
| font-size: var(--font-size-xs); | |
| color: #81c784; | |
| flex-shrink: 0; | |
| font-family: var(--font-family-code); | |
| min-width: 40px; | |
| text-align: right; | |
| display: none; /* Hidden, replaced by metrics */ | |
| } | |
| /* Process Group Content - Animated expand/collapse */ | |
| .process-group-content { | |
| display: grid; | |
| grid-template-rows: 0fr; | |
| opacity: 0; | |
| margin-top: 0; | |
| padding-top: 0; | |
| border-top: 1px solid transparent; | |
| transition: grid-template-rows 0.25s ease-out, | |
| opacity 0.2s ease-out, | |
| margin-top 0.25s ease-out, | |
| padding-top 0.25s ease-out, | |
| border-color 0.2s ease-out; | |
| overflow: hidden; | |
| color: var(--color-text-muted); | |
| max-width: 100%; | |
| } | |
| .process-group-content > .process-steps { | |
| min-height: 0; | |
| } | |
| .process-group.expanded .process-group-content { | |
| grid-template-rows: 1fr; | |
| opacity: 1; | |
| margin-top: var(--spacing-xs); | |
| padding-top: var(--spacing-xs); | |
| /* border-top-color: var(--color-border); */ | |
| } | |
| /* Process Steps List */ | |
| .process-steps { | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| .process-group-show-more { | |
| align-self: flex-start; | |
| appearance: none; | |
| display: inline-flex; | |
| align-items: center; | |
| border: 0; | |
| background: transparent; | |
| color: var(--color-text-muted); | |
| cursor: pointer; | |
| font-family: var(--font-family-main); | |
| font-size: var(--font-size-xs); | |
| padding: var(--spacing-xs) 0; | |
| opacity: 0.7; | |
| text-decoration: none; | |
| transition: opacity 0.15s ease; | |
| } | |
| .process-group-show-more:hover, | |
| .process-group-show-more:focus-visible { | |
| opacity: 1; | |
| } | |
| /* Individual Process Step */ | |
| .process-step { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0.1em; | |
| transition: background-color 0.15s ease; | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| .process-step.message-util { | |
| display: none; | |
| } | |
| .show-utility-messages .process-step.message-util { | |
| display: flex; | |
| } | |
| /* Utility/Info/Hint steps have subtle background tint */ | |
| .process-step[data-type="util"], | |
| .process-step[data-type="info"], | |
| .process-step[data-type="hint"] { | |
| background-color: rgba(120, 115, 100, 0); | |
| } | |
| .process-step[data-type="util"]:hover, | |
| .process-step[data-type="info"]:hover, | |
| .process-step[data-type="hint"]:hover { | |
| background-color: rgba(255, 255, 255, 0.03); | |
| } | |
| .light-mode .process-step[data-type="util"]:hover, | |
| .light-mode .process-step[data-type="info"]:hover, | |
| .light-mode .process-step[data-type="hint"]:hover { | |
| background-color: rgba(0, 0, 0, 0.04); | |
| } | |
| /* Step Header (clickable) */ | |
| .process-step-header { | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| user-select: none; | |
| gap: 4px; | |
| min-height: 18px; | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| /* Step title */ | |
| .process-step-header .step-title { | |
| flex: 1; | |
| font-size: 0.8rem; | |
| /* color: var(--color-text-muted); */ | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| margin-left: var(--spacing-xs); | |
| min-width: 0; | |
| } | |
| /* Step expand icon - CSS triangle (no Material Icons) */ | |
| .process-step-header .step-expand-icon { | |
| display: inline-block; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 3px 0 3px 5px; | |
| border-color: transparent transparent transparent var(--color-text); | |
| opacity: 0.4; | |
| transition: transform 0.2s ease, opacity 0.15s ease; | |
| flex-shrink: 0; | |
| font-size: 0; /* Hide any text content */ | |
| margin-right: 2px; | |
| } | |
| .process-step-header:hover .step-expand-icon { | |
| opacity: 0.7; | |
| } | |
| /* Use direct child selector to prevent affecting nested steps */ | |
| .process-step.expanded > .process-step-header > .step-expand-icon { | |
| transform: rotate(90deg); | |
| } | |
| /* Step Detail Content - Animated expand/collapse */ | |
| .process-step-detail { | |
| /* display: grid; */ | |
| grid-template-rows: 0fr; | |
| opacity: 0; | |
| margin-top: 0; | |
| transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out, margin-top 0.2s ease-out; | |
| overflow: hidden; | |
| max-width: 100%; | |
| } | |
| .process-step-detail-content{ | |
| white-space: pre-wrap; | |
| } | |
| .process-step-detail, | |
| .process-step-detail-scroll { | |
| scrollbar-width: thin; /* Firefox */ | |
| -ms-overflow-style: thin; /* IE/Edge */ | |
| } | |
| /* Hide scrollbar for Chrome/Safari/Webkit */ | |
| .process-step-detail::-webkit-scrollbar, | |
| .process-step-detail-scroll::-webkit-scrollbar { | |
| width: thin; | |
| height: thin; | |
| } | |
| .process-step:not(.expanded) > .process-step-detail { | |
| margin-top: 0; | |
| } | |
| .process-step:not(.expanded) > .process-step-detail > .process-step-detail-scroll { | |
| padding: 0; | |
| margin-top: 0; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .process-step-detail > .process-step-detail-scroll { | |
| min-height: 0; | |
| } | |
| /* Use direct child selector (>) to prevent cascading to nested steps */ | |
| .process-step.expanded > .process-step-detail { | |
| /* grid-template-rows: 1fr; */ | |
| opacity: 1; | |
| overflow: hidden; | |
| margin-top: var(--spacing-xs); | |
| max-width: 100%; | |
| padding-left: 17px; | |
| padding-right: 1em; | |
| } | |
| .process-step.expanded > .process-step-detail > .process-step-detail-scroll { | |
| max-height: 40em; | |
| overflow: auto; | |
| max-width: 100%; | |
| width: fit-content; | |
| box-sizing: content-box; | |
| border-radius: var(--border-radius-sm); | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: thin; | |
| -ms-overflow-style: thin; | |
| scrollbar-color: rgba(255, 255, 255, 0.2) transparent; | |
| /* overscroll-behavior: contain; */ | |
| } | |
| .process-step.expanded > .process-step-detail > .process-step-detail-scroll > .process-step-detail-scroll { | |
| scrollbar-width: thin; | |
| -ms-overflow-style: thin; | |
| scrollbar-color: rgba(255, 255, 255, 0.2) transparent; | |
| } | |
| .process-step-detail-scroll { | |
| transition: max-height 0.2s ease-out, padding 0.2s ease-out, margin-top 0.2s ease-out; | |
| padding: var(--spacing-xs) 0; | |
| margin-top: var(--spacing-xxs); | |
| /* margin-left: 28px; */ | |
| background-color: transparent; | |
| font-size: var(--font-size-xs); | |
| line-height: 1.5; | |
| -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */ | |
| overscroll-behavior-x: contain; | |
| } | |
| /* .process-step-detail-scroll pre { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| font-family: var(--font-family-code); | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| } */ | |
| /* KVPs in step detail - CSS Grid for aligned columns */ | |
| .process-step-detail-scroll .step-kvps { | |
| display: grid; | |
| grid-template-columns: auto minmax(0, 1fr); | |
| gap: var(--spacing-xs) var(--spacing-sm); | |
| align-items: start; | |
| } | |
| .process-step-detail-scroll .step-kvp { | |
| display: contents; /* Children participate in parent grid */ | |
| } | |
| .process-step-detail-scroll .step-kvp-key { | |
| color: var(--step-accent, var(--color-primary)); | |
| font-weight: 500; | |
| opacity: 0.8; | |
| display: flex; | |
| align-items: center; | |
| justify-content: end; | |
| white-space: nowrap; | |
| } | |
| .process-step-detail-scroll .step-kvp-key .material-symbols-outlined { | |
| font-size: 0.9rem; | |
| color: var(--step-accent, var(--color-primary)) ; | |
| } | |
| .process-step-detail-scroll .step-kvp-value { | |
| /* color: var(--color-text); */ | |
| opacity: 0.85; | |
| word-break: break-word; | |
| overflow-wrap: anywhere; | |
| white-space: pre-wrap; | |
| font-size: 0.75rem; | |
| line-height: 1.5; | |
| min-width: 0; | |
| } | |
| .process-step-detail-scroll .step-kvp-value p { | |
| margin: 0; | |
| word-break: break-word; | |
| overflow-wrap: anywhere; | |
| } | |
| /* Tool arguments - CSS Grid for aligned columns */ | |
| /* .process-step-detail-scroll .step-tool-args { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 4px 8px; | |
| margin: var(--spacing-xs) 0; | |
| align-items: baseline; | |
| } */ | |
| /* .process-step-detail-scroll .tool-arg-row { | |
| display: contents; | |
| } */ | |
| /* .process-step-detail-scroll .tool-arg-label { | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| color: var(--step-accent, var(--color-primary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: end; | |
| } */ | |
| /* .process-step-detail-scroll .tool-arg-label .material-symbols-outlined { | |
| font-size: 0.9rem; | |
| opacity: 0.85; | |
| color: var(--step-accent, var(--color-primary)); | |
| } */ | |
| /* .process-step-detail-scroll .tool-arg-value { | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text); | |
| opacity: 0.85; | |
| word-break: break-word; | |
| font-family: var(--font-family-code); | |
| } */ | |
| /* Light mode tool args - transparent like dark mode */ | |
| /* .light-mode .process-step-detail-scroll .step-tool-args { | |
| background: transparent; | |
| border-left-color: transparent; | |
| } */ | |
| /* .process-step-detail-scroll .step-tool-header .tool-icon { | |
| font-size: 0.85rem; | |
| color: var(--step-accent, var(--color-warning)); | |
| opacity: 0.85; | |
| } */ | |
| /* .process-step-detail-scroll .step-tool-header .tool-label { | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| color: var(--step-accent, var(--color-warning)); | |
| opacity: 0.85; | |
| } */ | |
| /* .process-step-detail-scroll .step-tool-header .tool-name { | |
| font-size: 0.72rem; | |
| color: var(--color-text); | |
| opacity: 0.85; | |
| } */ | |
| /* Terminal output - self-contained scrollable block */ | |
| .process-step-detail .terminal-output { | |
| margin: var(--spacing-xs) 0 0 0; | |
| padding: var(--spacing-xs); | |
| background: rgba(0, 0, 0, 0.8); | |
| min-height: 5em; | |
| min-width: 20em; | |
| width: max-content; | |
| border-radius: var(--border-radius-sm); | |
| color: #c9d1d9; | |
| white-space: pre; | |
| font-family: monospace; | |
| /* max-width: fit-content; */ | |
| /* overflow: auto; */ | |
| /* -webkit-overflow-scrolling: touch; */ | |
| /* scrollbar-width: thin; */ | |
| /* scrollbar-color: rgba(255,255,255,0.2) transparent; */ | |
| /* overscroll-behavior: contain; */ | |
| } | |
| .process-step-detail .terminal-output::-webkit-scrollbar { | |
| width: 4px; | |
| height: 4px; | |
| } | |
| .process-step-detail .terminal-output::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .process-step-detail .terminal-output::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 2px; | |
| } | |
| .process-step-detail .terminal-output::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.35); | |
| } | |
| /* Light mode terminal */ | |
| .light-mode .process-step-detail .terminal-output { | |
| background: rgba(0, 0, 0, 0.05); | |
| color: black; | |
| scrollbar-color: rgba(0, 0, 0, 0.2) transparent; | |
| } | |
| .light-mode .process-step-detail .terminal-output::-webkit-scrollbar-thumb { | |
| background: rgba(0, 0, 0, 0.15); | |
| } | |
| .light-mode .process-step-detail .terminal-output::-webkit-scrollbar-thumb:hover { | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| /* Light mode adjustments */ | |
| .light-mode .process-group.expanded .process-group-content { | |
| border-top-color: rgba(0, 0, 0, 0.06); | |
| } | |
| .light-mode .process-step-detail-scroll { | |
| background-color: transparent; | |
| } | |
| /* Light mode text colors for process group */ | |
| .light-mode .process-group-header .group-title, | |
| .light-mode .process-step-header .step-title { | |
| color: var(--color-text-muted); | |
| } | |
| /* Animation for loading state */ | |
| @keyframes pulse-step { | |
| 0%, 100% { opacity: 0.5; } | |
| 50% { opacity: 0.8; } | |
| } | |
| .step-title.shiny-text { color: transparent ; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; } | |
| @keyframes shine { to { background-position: -100% center; } } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .process-group { | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| } | |
| .process-step-header .step-title { | |
| font-size: var(--font-size-xs); | |
| } | |
| .process-step-detail-scroll { | |
| margin-left: 0; | |
| } | |
| } | |
| /* =========================================== | |
| Preferences Visibility Controls | |
| These rules work with preferences-store toggles | |
| =========================================== */ | |
| /* .process-step.message-util { | |
| display: none; | |
| } | |
| .step-kvp.msg-thoughts { | |
| display: none; | |
| } | |
| .process-step-detail-scroll pre.msg-json { | |
| display: none; | |
| } */ | |
| /* Nested Process Steps (Subordinate Agents) */ | |
| .process-nested-container { | |
| display: grid; | |
| grid-template-rows: 0fr; | |
| opacity: 0; | |
| overflow: hidden; | |
| transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out; | |
| gap: 2px; | |
| max-width: 100%; | |
| } | |
| /* Only show nested container when parent step is expanded */ | |
| .process-step.expanded > .process-nested-container { | |
| grid-template-rows: 1fr; | |
| opacity: 1; | |
| margin-top: 2px; | |
| /* Keep overflow hidden to allow nested steps to control their own expansion */ | |
| } | |
| /* Inner wrapper to handle grid transition content */ | |
| .process-nested-inner { | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| /* All nested containers have same indentation (no cascading) */ | |
| .nested-step .process-nested-container { | |
| margin-left: 0; | |
| } | |
| /* Response content in process steps */ | |
| .process-step-detail-scroll .step-response-content { | |
| font-size: 0.75rem; | |
| line-height: 1.6; | |
| color: var(--color-text); | |
| opacity: 0.9; | |
| margin: var(--spacing-xs) 0; | |
| word-break: break-word; | |
| overflow-wrap: anywhere; | |
| } | |
| .process-step-detail-scroll .step-response-content p { | |
| margin: 0.5em 0; | |
| } | |
| .process-step-detail-scroll .step-response-content ul, | |
| .process-step-detail-scroll .step-response-content ol { | |
| margin: 0.5em 0; | |
| padding-left: 1.5em; | |
| } | |
| /* Warning/error content in process steps */ | |
| .process-step-detail-scroll .step-warning-content { | |
| font-size: 0.72rem; | |
| line-height: 1.5; | |
| color: var(--color-warning); | |
| opacity: 0.9; | |
| margin: var(--spacing-xs) 0; | |
| padding: var(--spacing-xs); | |
| border-left: 2px solid var(--color-warning); | |
| border-radius: 3px; | |
| } | |
| /* Browser screenshot content in process steps */ | |
| .process-step-detail-scroll .screenshot-img { | |
| max-width: 100%; | |
| max-height: 400px; | |
| border-radius: 4px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); | |
| transition: box-shadow 0.2s ease, filter 0.2s ease; | |
| object-fit: contain; | |
| } | |
| .process-step-detail-scroll .screenshot-img:hover { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| filter: brightness(1.02); | |
| } | |
| /* Light mode screenshot border */ | |
| .light-mode .process-step-detail-scroll .screenshot-img { | |
| border: 1px solid rgba(0, 0, 0, 0.15); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .light-mode .process-step-detail-scroll .screenshot-img:hover { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| /* View Details button in step detail */ | |
| .step-detail-actions { | |
| display: flex; | |
| padding-left: 18px; | |
| min-height: 0; /* Required for grid collapse animation */ | |
| } | |
| /* Hide View Details button when step is collapsed */ | |
| .process-step:not(.expanded) > .process-step-detail > .step-detail-actions { | |
| display: none; | |
| } | |