/* ==========================================================================
   core.css —— SceneBase 骨架样式
   区域划分、固定/滚动、步骤条、环节卡片、诊断报告。
   业务场景只需要补自己的视觉细节。
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、整页分区
   -------------------------------------------------------------------------- */

.sceneRoot {
    box-sizing: border-box;
    font: 13px/1.5 -apple-system, "Microsoft YaHei", Arial, sans-serif;
    color: #333333;
}

.sceneRoot *,
.sceneRoot *::before,
.sceneRoot *::after {
    box-sizing: inherit;
}

/**
 * 固定区 + 滚动区。
 *
 * 用 flex 而不是 position:fixed —— 固定区高度由内容自己决定，
 * 滚动区吃掉剩下的空间，谁都不用写魔法像素值。
 */
.sceneRootFixed {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sceneRootFixed .sceneFixed {
    flex: 0 0 auto;
    background: #fff;
    z-index: 10;
}

.sceneRootFixed .sceneScroll {
    flex: 1 1 auto;
    min-height: 0; /* 关键：不加这行，flex 子项会被内容撑开，滚动失效 */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   二、区域
   -------------------------------------------------------------------------- */

.sceneHeaderRegion:empty,
.sceneCoreInfoRegion:empty,
.sceneStepBarRegion:empty,
.sceneStepsRegion:empty,
.sceneReportRegion:empty {
    display: none;
}

.sceneHeaderRegion {
    padding: 8px 16px;
    border-bottom: 1px solid #eaedf2;
}

.sceneCoreInfoRegion {
    border-bottom: 1px solid #eaedf2;
}

.sceneStepBarRegion {
    background: #fff;
    border-bottom: 1px solid #eaedf2;
}

.sceneStepsRegion {
    padding: 0 16px;
}

.sceneReportRegion {
    padding: 0 16px 16px;
}

/* --------------------------------------------------------------------------
   三、步骤条
   -------------------------------------------------------------------------- */

.stepBar {
    background: #fff;
}

/* 标题栏和「诊断核心信息」保持同一套浅蓝底，避免下面看起来像挂在核心信息里 */
.stepBarHead {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-bottom: 1px solid #eaedf2;
    background: #f2f9fd;
}

/* 不用 flex 的 gap：Chrome 84 以下不支持，会静默失效。改用 margin。 */
.stepBarHead > * {
    margin-right: 8px;
}

.stepBarHead > *:last-child {
    margin-right: 0;
}

.stepBarTitle {
    font-size: 14px;
    font-weight: 700;
    color: #0085d0;
}

.stepBarSummary {
    font-size: 12px;
    color: #666666;
}

.stepBarSummary i {
    font-style: normal;
    color: #333333;
}

.stepBarSummary i.red {
    color: #f65a56;
}

/* 新框架自带的轻量按钮，不依赖宿主旧的 .t-btn 样式 */
.snBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #9cc7e3;
    border-radius: 4px;
    background: #fff;
    color: #0085d0;
    font-size: 12px;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.snBtn:hover { background: #e9f4fa; }
.snBtn:active { background: #daecf7; }

.snBtn.snBtnPrimary {
    background: #0085d0;
    border-color: #0085d0;
    color: #fff;
}

.snBtn.snBtnPrimary:hover {
    background: #1a93d9;
    border-color: #1a93d9;
}

.snBtn.snBtnPrimary:active {
    background: #0074b5;
    border-color: #0074b5;
}

.snBtn.disabled,
.snBtn[disabled] {
    background: #fafafa;
    border-color: #d5dce6;
    color: #bbbbbb;
    cursor: not-allowed;
}

/**
 * 步骤条轨道。
 * 默认横向滚动（环节多时不换行），SceneLayout 配 stepBarOverflow: 'wrap' 才换行。
 */
.stepBarViewport {
    position: relative;
    display: flex;
    align-items: center;
}

/* 轨道：横向滚动，但不显示原生滚动条 */
.stepBarTrack {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stepBarTrack::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 两侧翻页箭头 */
.stepBarNav {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0 4px;
    border: 1px solid #d5dce6;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    cursor: pointer;
}

.stepBarViewport.isScrollable .stepBarNav {
    display: flex;
}

.stepBarNav i {
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #666666;
    border-right: 1.5px solid #666666;
}

.stepBarNav.isPrev i {
    margin-left: 2px;
    transform: rotate(-135deg);
}

.stepBarNav.isNext i {
    margin-right: 2px;
    transform: rotate(45deg);
}

.stepBarNav:hover {
    border-color: #9cc7e3;
}

.stepBarNav:hover i {
    border-color: #0085d0;
}

.stepBarNav.isDisabled {
    opacity: .35;
    cursor: default;
}

.stepBarNav.isDisabled:hover {
    border-color: #d5dce6;
}

.stepBarNav.isDisabled:hover i {
    border-color: #666666;
}

/* 轨道两端渐隐，卡片切边不生硬 */
.stepBarViewport::before,
.stepBarViewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 2;
    pointer-events: none;
    display: none;
}

.stepBarViewport.isScrollable::before,
.stepBarViewport.isScrollable::after {
    display: block;
}

.stepBarViewport::before {
    left: 32px;
    background: linear-gradient(90deg, #ffffff 20%, rgba(255, 255, 255, 0));
}

.stepBarViewport::after {
    right: 32px;
    background: linear-gradient(270deg, #ffffff 20%, rgba(255, 255, 255, 0));
}

.stepBarList {
    display: inline-flex;
    align-items: stretch;
    white-space: nowrap;
}

.stepBarWrap .stepBarTrack {
    overflow: visible;
}

.stepBarWrap .stepBarList {
    display: flex;
    flex-wrap: wrap;
    /* gap 在 Chrome 84 以下不生效，用负外边距 + 子项 margin 模拟 */
    margin: -4px;
}

.stepBarWrap .stepBarList .stepBarItem {
    margin: 4px;
}

/* 换行模式放不下箭头，卡片之间留白即可 */
.stepBarWrap .stepBarLink {
    display: none;
}

.stepBarWrap .stepBarViewport .stepBarNav {
    display: none;
}

.stepBarWrap .stepBarViewport::before,
.stepBarWrap .stepBarViewport::after {
    display: none;
}

/* 单个环节卡片：等宽等高，圆形序号 + 两行文本 */
.stepBarItem {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 204px;
    height: 68px;
    padding: 8px 8px 8px 10px;
    border: 1px solid #c5cdd8;
    border-radius: 4px;
    background: #fafafa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s, transform .1s;
}

/* 圆形序号；和标题同一行，垂直居中对齐 */
.stepBarDot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: -1px 8px 0 0;
    border-radius: 50%;
    background: #d5dce6;
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    line-height: 1;
}

.stepBarBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.stepBarTitleRow {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.stepBarName {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 32px;
    overflow: hidden;
    color: #333333;
    font-size: 12px;
    line-height: 16px;
    white-space: normal;
    word-break: break-all;
}

/* 第二行：类型色标 + 结果，和标题文字左边对齐 */
.stepBarMeta {
    display: flex;
    align-items: baseline;
    min-width: 0;
    margin-left: 26px;
    padding-top: 4px;
    font-size: 12px;
    line-height: 16px;
}

.stepBarType {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 16px;
    color: #0085d0;
}

.stepBarType::after {
    content: '·';
    margin: 0 6px;
    color: #c5cdd8;
    font-weight: normal;
}

/* 没有结果摘要时，类型后面不留分隔点 */
.stepBarMeta .stepBarType:last-child::after {
    content: '';
    margin: 0;
}

.stepBarType.isAuto {
    color: #78909c;
}

.stepBarType.isCustom {
    color: #f38900;
}

.stepBarResult {
    overflow: hidden;
    color: #999999;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 卡片之间的双箭头图标：参考老诊断页的连接符轮廓，按当前风格重画成线性图标 */
.stepBarLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    margin: 0 7px;
    color: #8a98a8;
}

.stepBarLink svg {
    display: block;
    width: 15px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 状态配色：完成 / 进行中 / 异常 / 无数据 / 中止 */
.stepBarItem[data-step-state="done"] {
    background: #ffffff;
}

.stepBarItem[data-step-state="done"] .stepBarDot { background: #90c31f; }
.stepBarItem[data-step-state="done"] .stepBarResult { color: #5a8a00; }

.stepBarItem[data-step-state="loading"] {
    border-color: #9cc7e3;
    background: #f2f9fd;
}

.stepBarItem[data-step-state="loading"] .stepBarDot { background: #0085d0; }
.stepBarItem[data-step-state="loading"] .stepBarResult { color: #0074b5; }

.stepBarItem[data-step-state="error"] {
    border-color: #f7b9b6;
    background: #fff7f7;
}

.stepBarItem[data-step-state="error"] .stepBarDot { background: #f65a56; }
.stepBarItem[data-step-state="error"] .stepBarResult { color: #d93b37; }

.stepBarItem[data-step-state="stopped"] {
    border-color: #f3d08a;
    background: #fef9f1;
}

.stepBarItem[data-step-state="stopped"] .stepBarDot { background: #f38900; }
.stepBarItem[data-step-state="stopped"] .stepBarResult { color: #c76f00; }

/* 悬浮 / 按下：只给卡片反馈，环节标题保持深色 */
.stepBarItem:hover {
    border-color: #0085d0;
    background: #f2f9fd;
    box-shadow: 0 2px 8px rgba(0, 133, 208, .14);
}


.stepBarItem:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* 当前环节 */
.stepBarItem.isCurrent {
    border-color: #0085d0;
    background: #e9f4fa;
    box-shadow: 0 0 0 2px rgba(0, 133, 208, .16);
}

.stepBarItem.isCurrent .stepBarDot { background: #0085d0; }

.stepBarItem.isCurrent .stepBarName {
    font-weight: 600;
}

/* snTooltip 里的卡片提示内容：标题固定深色，只有结果按环节状态着色 */
.stepBarTip {
    --step-tip-meta: #666666;
}

.stepBarTip[data-step-state="done"] {
    --step-tip-meta: #5a8a00;
}

.stepBarTip[data-step-state="error"] {
    --step-tip-meta: #d93b37;
}

.stepBarTip[data-step-state="stopped"] {
    --step-tip-meta: #c76f00;
}

.stepBarTip[data-step-state="loading"] {
    --step-tip-meta: #0074b5;
}

.stepBarTip[data-step-state="pending"],
.stepBarTip[data-step-state="empty"] {
    --step-tip-meta: #999999;
}

.stepBarTipTitle {
    font-size: 13px;
    line-height: 1.5;
    color: #333333;
}

.stepBarTipMeta {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--step-tip-meta);
}

/* --------------------------------------------------------------------------
   四、核心诊断信息
   -------------------------------------------------------------------------- */

.coreInfoPanel {
    background: #fff;
}

/* 标题栏按设计规范：36px 高、#e9f4fa 底、13px 加粗 #0085d0 */
.coreInfoTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    margin: 0;
    padding: 0 16px;
    background: #e9f4fa;
    font-size: 13px;
    font-weight: bold;
    color: #0085d0;
}

/* 标题栏右侧的加载状态 */
.coreInfoStatus {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: normal;
    color: #666666;
}

.coreInfoStatus.isLoading {
    color: #0085d0;
}

.coreInfoStatus > span {
    margin-left: 4px;
}

.coreInfoHeadRight {
    display: inline-flex;
    align-items: center;
}

/* 标题栏右侧折叠操作 */
.coreInfoFold {
    margin-left: 12px;
    color: #0085d0;
    font-size: 13px;
    font-weight: normal;
    line-height: 36px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.coreInfoFold:hover {
    text-decoration: underline;
}

.coreInfoFold::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-135deg) translateY(-2px);
    vertical-align: 1px;
}

.coreInfoPanel.isCollapsed .coreInfoFold::after {
    transform: rotate(45deg) translateY(-2px);
}

.coreInfoPanel.isCollapsed .coreInfoBody {
    display: none;
}

.coreInfoSpinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #9cc7e3;
    border-top-color: #0085d0;
    border-radius: 50%;
    animation: coreInfoSpin .8s linear infinite;
}

@keyframes coreInfoSpin {
    to { transform: rotate(360deg); }
}

/* 字段左右结构：标签右对齐，值在右侧；4 列自适应 */
.coreInfoGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 24px;
    padding: 12px 16px 16px;
}

.coreInfoItem {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: 0;
}

/* 独占一整行，不受当前列数影响 */
.coreInfoItem.isFullRow {
    grid-column: 1 / -1;
}

.coreInfoLabel {
    flex: 0 0 84px;
    margin-right: 8px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 22px;
    color: #666666;
}

/* 单行省略，完整内容放 title 悬浮显示 */
.coreInfoValue {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 22px;
    color: #333333;
}

/* 有操作按钮的字段：值按内容宽度，按钮紧跟值，不被 flex 推到行尾 */
.coreInfoItem.hasAction .coreInfoValue {
    flex: 0 1 auto;
}

/* displayType=tags：值支持数组，一个值一个 pill */
.coreInfoTags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -4px;
}

/* tags 要换行，不能套单行省略 */
.coreInfoItem.isTags .coreInfoValue {
    overflow: visible;
    white-space: normal;
}

.coreInfoTagItem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 180px;
    height: 22px;
    margin: 0 4px 4px 0;
    padding: 0 7px;
    overflow: hidden;
    border-radius: 11px;
    background: #ecf1f4;
    color: #333333;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
}

.coreInfoTagText {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coreInfoValue.isPlaceholder {
    color: #bbbbbb;
}

/* 接口未回来时，值区显示一个小转圈，标签始终保持可见 */
.coreInfoItem.isLoading .coreInfoValue {
    color: transparent;
}

.coreInfoItem.isLoading .coreInfoValue::after {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    border: 2px solid #d8e8f3;
    border-top-color: #0085d0;
    border-radius: 50%;
    animation: coreInfoSpin .8s linear infinite;
}

.coreInfoAction {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 22px;
    margin-left: 8px;
    padding: 0 10px;
    border: 1px solid #9cc7e3;
    border-radius: 11px;
    background: #ffffff;
    color: #0085d0;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
}

.coreInfoAction:hover {
    border-color: #0085d0;
    background: #e9f4fa;
    text-decoration: none;
}

/* 字段没有值：隐藏 '--'，操作直接占值的位置 */
.coreInfoItem.isActionOnly .coreInfoValue {
    display: none;
}

.coreInfoItem.isActionOnly .coreInfoAction {
    margin-left: 0;
}

/* 默认内联详情（场景没接管 onFieldClick 时用）；整行宽度，换到下一行 */
.coreInfoDetail {
    flex: 0 0 100%;
    margin-top: 4px;
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid #eaedf2;
    border-radius: 4px;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

/* 内容区变窄时逐级降列，避免值被挤断 */
@media (max-width: 1200px) {
    .coreInfoGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .coreInfoGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 核心信息字段：星级 / 状态标签 */
.coreInfoStars {
    color: #f38900;
    letter-spacing: 1px;
}

.coreInfoTag {
    display: inline-block;
    height: 18px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 18px;
    vertical-align: 1px;
}

.coreInfoTag.isOk {
    background: #edf5db;
    color: #418915;
}

.coreInfoTag.isWarn {
    background: #fef1e0;
    color: #ed650a;
}

.coreInfoTag.isDanger {
    background: #ffebeb;
    color: #df2220;
}

.coreInfoTag.isGray {
    background: #ecf1f4;
    color: #666666;
}

/* 核心信息详情内容：提示 / loading */
.coreInfoDialogLoading {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #666666;
}

.coreInfoDialogLoading .coreInfoSpinner {
    margin-right: 8px;
}

.coreInfoNotice {
    font-size: 13px;
    line-height: 22px;
    color: #333333;
    word-break: break-all;
}

.coreInfoDialogEmpty {
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

.coreInfoRuleList {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    overflow: hidden;
}

.coreInfoRuleList li {
    display: flex;
    align-items: center;
    min-height: 30px;
    border-bottom: 1px solid #eaedf2;
}

.coreInfoRuleLabel {
    flex: 0 0 88px;
    margin-right: 8px;
    text-align: right;
    font-size: 13px;
    color: #666666;
}

.coreInfoRuleValue {
    flex: 1 1 auto;
    font-size: 13px;
    color: #333333;
}

@media (max-width: 640px) {
    .coreInfoGrid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   五、环节卡片
   -------------------------------------------------------------------------- */

.stepContainer {
    padding: 0;
}

.stepBox {
    border-bottom: 1px solid #eaedf2;
    padding: 10px 0;
}

.stepHead {
    display: flex;
    align-items: center;
}

.stepHead > * {
    margin-right: 10px;
}

.stepHead > *:last-child {
    margin-right: 0;
}

.stepHead dd {
    margin: 0;
}

/* 标题和结果放同一行：标题在左，诊断结果跟在后面；空的 clear 节点不参与布局 */
.stepHead dd:not(.clear) {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    min-width: 0;
}

.stepHead dd.clear {
    display: none;
}

.stepHead .title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stepHead .tips {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stepHead .tips:not(:empty)::before {
    content: '·';
    margin: 0 8px;
    color: #c5cdd8;
}

.stepHead .greenC {
    color: #5a8a00;
    font-style: normal;
}

.stepHead .blueC {
    color: #0074b5;
    font-style: normal;
}

.stepHead .redC {
    color: #d93b37;
    font-style: normal;
}

.stepHead .grayC {
    color: #999999;
    font-style: normal;
}

/* 没有表格 / 选项的纯结果环节：不显示折叠入口 */
.stepBox.stepNoCollapse .stepToggle {
    display: none;
}

.stepBox.stepNoCollapse .stepBody {
    padding-top: 0;
}

.stepToggle {
    font-size: 12px;
    color: #0085d0;
    cursor: pointer;
    font-style: normal;
    white-space: nowrap;
}

.stepReselect {
    margin-left: 8px;
    font-size: 12px;
    color: #0085d0;
    text-decoration: none;
    white-space: nowrap;
}

.stepReselect:hover {
    text-decoration: underline;
}

.stepBody {
    padding: 8px 0 0;
}

.stepBox.stepCollapsed .stepBody {
    display: none;
}

.stepLoading,
.stepError,
.stepEmpty {
    padding: 12px 0;
    font-size: 13px;
    color: #666666;
}

/* 长接口环节的加载态：标题行右侧已经写了「查询中…」，这里再给一个轻量转圈 */
.stepLoading {
    display: flex;
    align-items: center;
    color: #0085d0;
}

.stepLoading .loadingIcon {
    width: 13px;
    height: 13px;
    margin-right: 8px;
    border: 2px solid #d5e6f1;
    border-top-color: #0085d0;
    border-radius: 50%;
    animation: stepLoadingSpin .8s linear infinite;
}

@keyframes stepLoadingSpin {
    to { transform: rotate(360deg); }
}

.stepError { color: #f65a56; }

/* 首个模型调用失败时还没有环节卡片，错误提示挂在环节区顶部 */
.stepGlobalError {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #f7b9b6;
    border-radius: 4px;
    background: #fff7f7;
    color: #d93b37;
    font-size: 13px;
    line-height: 20px;
}

.stepQuestion {
    font-size: 13px;
    color: #666666;
    margin-bottom: 6px;
}

.stepOptions {
    margin: 4px 0 0;
}

/* 提交中禁掉整块选项：choiceGroup 的点击在 li 上，只禁 input 拦不住 */
.stepOptions.disabled {
    pointer-events: none;
}

/* 人工点选后正在推进下一环节：先藏起重选，避免请求还在飞时被回滚 */
.stepBox.stepAdvancing .stepReselect {
    display: none;
}

.stepContent > .stepSubmit {
    margin-top: 8px;
}

.stepInputWrap {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.stepInput {
    width: 240px;
    height: 30px;
    margin-right: 8px;
    padding: 0 8px;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    background: #fff;
    color: #333333;
    font-size: 13px;
    font-family: inherit;
}

.stepInput:focus {
    border-color: #0085d0;
    outline: none;
}

/* --------------------------------------------------------------------------
   六、诊断报告
   -------------------------------------------------------------------------- */

.reportBox {
    background: #fff;
    border-top: 1px solid #eaedf2;
    padding: 12px 0;
}

.reportLabel {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 13px;
    color: #333333;
}

.diagReport .ideaImg,
.diagReport .boreImg {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 22px;
    color: #666666;
}

/* --------------------------------------------------------------------------
   七、底部操作区
   --------------------------------------------------------------------------
   它是固定区的一部分（.sceneFixed 里），不是 position:fixed 钉在视口上。
   场景容器通常不等于整个视口（上面还有宿主外壳），锚视口会飘。
   -------------------------------------------------------------------------- */

.sceneFooterRegion:empty {
    display: none;
}

.sceneFooterRegion {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #d5dce6;
    padding: 8px 16px;
}

/* 底部业务按钮：fixed 底栏，常显按钮全程可见（同老页面 bottomComBtns） */
.bottomActionsBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #fff;
    border-top: 1px solid #d5dce6;
    box-shadow: 0 -2px 8px rgba(13, 35, 67, 0.08);
    padding: 10px 16px;
}

.bottomActionsBar.isEmpty {
    display: none;
}

.buttonGroups {
    background: #fff;
}

.buttonGroups .sn-buttonGroup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 次按钮（默认）：白底蓝字描边；主按钮 isPrimary 蓝底白字；危险 isDanger 红 */
.buttonGroups .busiBtn {
    font-size: 13px;
    line-height: 28px;
    height: 30px;
    padding: 0 16px;
    margin-right: 10px;
    border: 1px solid #0085d0;
    border-radius: 4px;
    background: #fff;
    color: #0085d0;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
}

/* 居中时不把最后一个按钮的右间距算进可视宽度 */
.buttonGroups .busiBtn:last-child {
    margin-right: 0;
}

.buttonGroups .busiBtn.isPrimary {
    border-color: #0085d0;
    background: #0085d0;
    color: #fff;
}

.buttonGroups .busiBtn.isDanger {
    border-color: #f65a56;
    background: #fff;
    color: #f65a56;
}

.buttonGroups .busiBtn.isDanger.isPrimary {
    background: #f65a56;
    color: #fff;
}

.buttonGroups .busiBtn.disabled {
    border-color: #d5dce6;
    background: #fafafa;
    color: #bbbbbb;
    cursor: not-allowed;
}