/* ===== 工作台加载动画 =====
   使用方：
   - static/js/workbench-loading.js：首屏挂到 #workbench 内，React 渲染完成后移除
   - src/base/WorkbenchLoading：页签内容懒加载时的占位
   颜色跟随顶部导航主题色（--xw-accent，见 theme.css） */

.xw-wb-loading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background-color: #fff;
    /* 中心极淡的主题色光晕，避免大白板过于空；不支持 color-mix 时回退纯白 */
    background-image:
        radial-gradient(520px 320px at 50% 46%,
            color-mix(in srgb, var(--xw-accent, #1456f0) 5%, transparent),
            transparent 72%);
}

/* 定位基准：#workbench 本身没有 position，absolute 会相对视口铺满，必须补上 */
#workbench {
    position: relative;
}

/* 覆盖整个工作台区域（导航栏以下） */
.xw-wb-loading--overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.xw-wb-loading.is-hiding {
    opacity: 0;
    transition: opacity 0.24s ease;
    pointer-events: none;
}

.xw-wb-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    animation: xw-wb-enter 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 中心：系统 / 租户 Logo 直接展示，不加任何白色底衬 */
.xw-wb-loading-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    animation: xw-wb-float 3.6s ease-in-out infinite;
}

.xw-wb-loading-badge--image {
    filter: drop-shadow(0 12px 24px rgba(23, 43, 77, 0.14));
}

/* 无 Logo（默认图也加载失败）时的兜底：主题色渐变块 */
.xw-wb-loading-badge:not(.xw-wb-loading-badge--image) {
    border-radius: 26px;
    background-color: var(--xw-accent, #1456f0);
    background-image: linear-gradient(135deg,
            color-mix(in srgb, var(--xw-accent, #1456f0) 55%, #fff),
            var(--xw-accent, #1456f0));
    box-shadow:
        0 20px 40px -14px color-mix(in srgb, var(--xw-accent, #1456f0) 55%, transparent);
}

.xw-wb-loading-symbol {
    width: 46px;
    height: 46px;
    display: block;
}

.xw-wb-loading-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 不定长进度条：主题色光带在浅色轨道上循环 */
.xw-wb-loading-bar {
    position: relative;
    width: 148px;
    height: 3px;
    margin-top: 30px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--xw-accent, #1456f0) 12%, transparent);
}

.xw-wb-loading-bar > span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44%;
    border-radius: inherit;
    background: linear-gradient(90deg,
            transparent,
            var(--xw-accent, #1456f0) 72%,
            var(--xw-accent, #1456f0));
    /* 负延迟：首帧就有光带在轨道内，避免刚出现时进度条看起来是静止的 */
    animation: xw-wb-bar 1.2s ease-in-out infinite;
    animation-delay: -0.35s;
}

.xw-wb-loading-title {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1px;
    color: #4e5969;
}

@keyframes xw-wb-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes xw-wb-bar {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

@keyframes xw-wb-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}