/* ========================================================================
   EXPLAN v2 chrome — layout 骨架 + 顶栏 / 侧栏 / 滑出菜单
   ========================================================================
   设计原则:
   1. header / sidebar / sidebar-expand 三段同色 var(--bg-page), 形成 L 型连续
      控制面板. mask 落下时这条控制带依然顶层可读.
   2. sidebar hover 用 :has(.wb-rail:hover) + .wb-rail-open 双轨
      触发, JS 主动调用兼容. mockup 视觉就是 hover 自动出菜单.
   3. .wb-focus-mask body 直属 fixed, 跟 wb-rail 同 stacking level 竞争 z.
      wb-rail z 1700 > mask z 1500 → sidebar 不被遮.
   4. 所有 .app-shell-surface--* 装饰层 CSS 移除 — v1 玻璃浮起设计废弃,
      v2 用扁平 bg 对比代替.
   5. content-area 严禁加 will-change/transform/filter/contain — 让里面的
      #mainOrb fixed 永远跟随 viewport, 不退化为 absolute.
   ======================================================================== */

/* ============================================================================
   1. Header (顶栏) — 永远在 mask 之上, logo 不被遮
   ============================================================================ */
header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: var(--header-h);
    /* v1: header 透明, 背景由 .app-chrome chrome frame 提供 (顶栏段) — "一个整体" */
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
    z-index: var(--z-header);
    transition: background 0.3s ease;
}

/* Logo 居中 — agency app 标志, mask-image + brand 蓝色填色 */
.logo {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    height: var(--header-h);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    line-height: 0;
}

html[data-app-kind="user"] header .logo {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.wb-topbar-brand-mark {
    display: block;
    --logo-mark-h: 38px;                   /* 加大 (原 30px) */
    height: var(--logo-mark-h);
    width: calc(var(--logo-mark-h) * 2.4);
    flex-shrink: 0;
    background-color: var(--brand-logo-color);
    -webkit-mask-image: var(--logo-mark-url);
    mask-image: var(--logo-mark-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* 加粗主要靠 SVG 描边(explan_logo.svg 的 path stroke-width); 这里只留 0.5px 投影做边缘平滑 */
    filter:
        drop-shadow(0.5px 0 0 var(--brand-logo-color))
        drop-shadow(-0.5px 0 0 var(--brand-logo-color))
        drop-shadow(0 0.5px 0 var(--brand-logo-color))
        drop-shadow(0 -0.5px 0 var(--brand-logo-color));
}

/* Header actions — 右上, user chip + 历史 icon */
.wb-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
    margin-left: auto;
}

.wb-topbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--topbar-btn-h);           /* 跟历史 icon 按钮等高 (hover 区也一致) */
    padding: 0 14px;
    margin-right: 2px;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.wb-topbar-user:hover { background: var(--chip-bg-hover); }
.wb-topbar-user-name {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-main);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip — 鼠标悬停延迟 500ms 出现, 显示套餐+点数 */
.wb-topbar-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 10px 14px;
    border-radius: var(--radius-base);
    background: var(--glass-panel-bg);
    border: 1px solid var(--divider);
    box-shadow: var(--float-shadow-sm);
    font-size: var(--font-sm);
    color: var(--text-main);
    line-height: 1.6;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 3;
}
.wb-topbar-user:hover .wb-topbar-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease 0.5s, transform 0.18s ease 0.5s, visibility 0s linear 0.5s;
}
.wb-topbar-tooltip-line { color: var(--text-main); }
.wb-topbar-tooltip-line + .wb-topbar-tooltip-line {
    color: var(--text-grey);
    margin-top: 2px;
}

/* 顶栏 icon 按钮 (历史记录入口) */
.wb-topbar-icon-btn,
.user-icon-btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--topbar-btn-h);            /* 跟个人中心 chip 等高等宽, hover 区一致 */
    height: var(--topbar-btn-h);
    border-radius: 999px;
    color: var(--svg-icon);
    transition: background 0.15s ease, color 0.15s ease;
}
.wb-topbar-icon-btn:hover,
.user-icon-btn:hover {
    background: var(--chip-bg-hover);
    color: var(--text-main);
}
.user-icon { width: 18px; height: 18px; fill: currentColor; }

/* 顶栏左上角"显示模式"按钮 — 默认隐藏, 仅手机版(见 drawer.css)在顶栏左上角显示; 桌面版显示模式仍在左侧 rail。
   样式与顶栏 icon 按钮一致; 图标(跟随系统/亮/暗)由 initThemeModeControls 统一刷新。 */
.wb-topbar-theme-btn {
    display: none;
    background: transparent; border: none; outline: none; cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
    width: var(--topbar-btn-h); height: var(--topbar-btn-h);
    border-radius: 999px; color: var(--svg-icon);
    transition: background 0.15s ease, color 0.15s ease;
}
.wb-topbar-theme-btn:hover { background: var(--chip-bg-hover); color: var(--text-main); }
.wb-topbar-theme-btn svg { width: 20px; height: 20px; display: block; }

/* ============================================================================
   2. Main wrapper — 整体布局容器
   sidebar + content-area + drawer (drawer 浮在右侧 fixed)
   ============================================================================ */
.wb-shell {
    height: var(--app-layout-height, 100vh);
    display: flex;
    padding: var(--header-h) var(--frame-content-offset) 0 0;
    gap: var(--surface-gap);
    position: relative;
    transition: padding-right var(--anim-drawer-d) var(--ease-apple);
}

/* aside — sidebar 容器, 固定宽 sidebar-rail-shell-w (69px), 内含 rail + slide-out indicator */
aside {
    width: var(--sidebar-rail-shell-w);
    min-width: var(--sidebar-rail-shell-w);
    height: var(--sidebar-panel-h);
    background: transparent;
    overflow: visible !important;
    padding: 0 var(--sidebar-pad-r) 0 var(--sidebar-pad-l);
    /* 展开式单行: 去掉 aside 的 z-index + isolation 自成层叠上下文 ——
       否则里面 fixed 的 .wb-rail 被钉在 aside 层级(1700)内, 升到遮罩之上(--z-mask+1)也逃不出去、照样被虚化盖住。
       aside 现在只是 69px 占位, 无需自成层叠。 */
    margin: var(--layout-gap) 0;
    display: flex;
    gap: var(--sidebar-gap);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    align-self: flex-start;
}

aside::before { display: none; }
aside::after { display: none; }

/* 展开式单行重构: 不再用 aside::after 拼"图标栏+滑出菜单"统一背景 ——
   现在背景由 .wb-rail 自身提供(hover 时整条变宽 + 转实色), 见下方 .wb-rail。 */

/* ============================================================================
   3. Sidebar rail — 主 icon 栏, L 型控制带的左竖边
   ============================================================================ */
.wb-rail {
    /* 展开式单行侧栏: fixed, 整条 top:0 → bottom:0 撑满视口高度(展开时背景到顶到底),
       图标/文字靠 padding 落在内容区(顶栏下方 / 底部边距上方); 平时窄, hover 变宽 + 背景转实色。 */
    position: fixed;
    left: var(--sidebar-pad-l);
    top: 0;
    bottom: 0;
    width: var(--sidebar-rail-w);          /* 收起: 窄 */
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--layout-gap) + 16px) 10px calc(var(--frame-content-offset) + 14px);
    flex-shrink: 0;
    background: transparent;               /* 收起: 透明, 背景由 .app-chrome 左栏段提供 */
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    overflow: hidden;                      /* 裁掉文字溢出, 收起时只见图标 */
    z-index: calc(var(--z-mask) + 1);      /* 始终浮在遮罩之上: 展开/收起全程 rail 都不被虚化层盖到 */
    /* 只动画宽度; 背景不淡入(瞬间实色)避免展开时透过半透明背景看到底下的虚化层闪一下 */
    transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover/打开: 整条变宽到 --rail-indicator-right(跟 .app-curtain 切口同宽, 自动对齐)+ 实色背景 + 右侧切直角 */
body:has(.wb-rail:hover) .wb-rail,
body.wb-rail-open .wb-rail {
    width: calc(var(--rail-indicator-right) - var(--sidebar-pad-l));
    background: var(--chrome-solid-bg);
    /* 浮到遮罩(.app-curtain z=--z-mask)之上: rail 实色背景自己盖住侧栏区, 不再靠遮罩 mask 切口
       (切口跟动画中的 rail 宽度不同步, 会闪一条透明带) */
    z-index: calc(var(--z-mask) + 1);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wb-rail-group--top,
.wb-rail-group--bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* tab 之间的间距 (批改中心 ↔ 资料中心) 单独加大, 让两个主入口视觉上明显分开 */
.wb-rail-group--top {
    gap: 18px;
}
.wb-rail-group--bottom {
    margin-top: auto;
    gap: 6px;
    padding-bottom: 0;
}

/* rail item — 图标 + 文字 同一行按钮(展开式单行) */
.wb-rail-tab {
    position: relative;
    width: 100%;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-grey);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-base);
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* 图标恒定宽 = 收起态内容宽(40px), 图标永远居中、不随展开左右移动 */
.wb-rail-icon {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-rail-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.wb-rail-action .wb-rail-icon svg {
    width: 18px;
    height: 18px;
}
/* 文字平时藏起来(也被 .wb-rail overflow:hidden 裁掉), hover/打开时显现 */
.wb-rail-label {
    opacity: 0;
    font-size: var(--font-md);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding-right: 12px;
    transition: opacity 0.16s ease 0.06s;   /* 稍延后, 等条变宽出空间再淡入文字 */
}
body:has(.wb-rail:hover) .wb-rail-label,
body.wb-rail-open .wb-rail-label {
    opacity: 1;
}
.wb-rail-tab:hover {
    background: var(--chip-bg);
    color: var(--text-main);
}
.wb-rail-tab.active {
    background: var(--vitality-blue);
    color: #FFFFFF;
}
.wb-rail-action.active {
    background: transparent;
    color: inherit;
}
.wb-rail-action.wb-rail-action--danger { color: var(--text-grey); }
.wb-rail-action.wb-rail-action--danger:hover { color: var(--brand-secondary); }
.wb-rail-tab::after { display: none; }

/* ============================================================================
   4. Sidebar slide-out indicator — hover 触发, 紧贴 rail 右侧滑出
   ============================================================================ */
.wb-rail-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;                            /* v2: 紧贴 rail 右边, 无 gap (旧版 +3.5px 会让 hover 跨越时闪烁) */
    width: var(--rail-indicator-w);
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    /* v1: menu 透明, 背景由 aside::after 横跨块提供 (rail + menu 一个整体) */
    background: transparent;
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition:
        opacity 0.22s cubic-bezier(0.4, 0, 0.6, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;                            /* 在 aside stacking 内, 低于 rail (rail z=2) 但能滑出来 */
}

/* hover 侧栏时: 顶栏整体浮到遮罩 (.app-curtain z=2500) 之上, 中央 logo 不被遮.
   header-actions (右上用户/历史) 虚化退后, 只突出 logo (跟 v1 行为一致). */
body:has(.wb-rail:hover) header,
body.wb-rail-open header {
    z-index: 2600;                            /* > .app-curtain (--z-mask 2500) */
}
body:has(.wb-rail:hover) .wb-topbar-actions,
body.wb-rail-open .wb-topbar-actions {
    opacity: 0.25;
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* hover 触发: rail 或 indicator 任一 hover 都保持显示, 防鼠标从 rail 移到 indicator 时闪烁 */
body:has(.wb-rail:hover) .wb-rail-menu,
body:has(.wb-rail-menu:hover) .wb-rail-menu,
body.wb-rail-open .wb-rail-menu {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* 点击 tab 切换后, 即使鼠标还停在 rail 上, 也强制把整条 rail 收起(覆盖 :hover 展开)+ 虚化层淡出,
   让用户点完立刻看到新内容; 顶栏随之恢复全亮(下方规则, 这样跟"已收起"状态一致, 不再出现 rail 还开着顶栏却跳全亮)。
   鼠标真正移开时 JS(mouseleave) 撤掉 .wb-rail-suppressed。!important 用于压过 :has(.wb-rail:hover) 的展开。 */
body.wb-rail-suppressed .wb-rail {
    width: var(--sidebar-rail-w) !important;
    background: transparent !important;
}
body.wb-rail-suppressed .wb-rail-label { opacity: 0 !important; }
body.wb-rail-suppressed .app-curtain {
    opacity: 0 !important;
    visibility: hidden !important;
}
body.wb-rail-suppressed .wb-topbar-actions {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* 同步: hover 时 rail 也要去掉右圆角 (跟 indicator 拼 L 型) */
body:has(.wb-rail-menu:hover) .wb-rail {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wb-rail-menu-group--top,
.wb-rail-menu-group--bottom {
    display: contents;
}

.wb-rail-menu-item {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--radius-base);
    color: var(--text-grey);
    font-size: var(--font-md);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.24s ease, transform 0.24s ease, color 0.18s ease, background 0.15s ease;
    z-index: 2;
}
.wb-rail-menu-item:hover {
    background: var(--chip-bg);
    color: var(--text-main);
}
.wb-rail-menu-item-label {
    display: inline-block;
    transition: opacity 0.2s ease;
}
.wb-rail-menu-item.is-highlighted {
    color: var(--vitality-blue);
    background: transparent;
}

body:has(.wb-rail:hover) .wb-rail-menu-item,
body.wb-rail-open .wb-rail-menu-item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 60ms;
}

/* ============================================================================
   5. Theme switcher — sidebar 底部三选一 (light / system / dark)
   ============================================================================ */
.wb-rail-menu-item--theme {
    overflow: visible;
    padding: 0 12px;
    justify-content: flex-start;
}
.wb-rail-menu-item--theme .wb-rail-menu-item-label {
    display: none;
}

.wb-rail-theme-panel {
    position: static;
    width: 62px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.wb-rail-theme-segment {
    display: grid;
    grid-template-columns: repeat(3, 18px);
    gap: 3px;
    width: 62px;
    height: 20px;
    padding: 1px;
    border-radius: 999px;
    background: var(--accent-soft-bg);
}

.wb-rail-theme-option {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-grey);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.22s ease, color 0.18s ease, transform 0.18s ease;
}
.wb-rail-theme-option svg {
    width: 12.5px;
    height: 12.5px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wb-rail-theme-option[data-theme-mode-option="light"] svg {
    width: 12px;
    height: 12px;
}
.wb-rail-theme-option:hover { color: var(--text-main); }
.wb-rail-theme-option:active { transform: scale(0.96); }
.wb-rail-theme-option.is-active {
    background: var(--theme-control-active-bg);
    color: var(--theme-control-active-text);
}

/* ============================================================================
   6. Focus mask — 已废弃, 由 v1 .app-curtain (base.css) 接管全局遮罩.
   .app-curtain 用 mask 切出侧栏区不遮 (比纯 inset 遮罩更精确还原 v1), z=--z-mask.
   .wb-focus-mask DOM 保留但无样式 (空 div, 无害); 实际遮罩走 .app-curtain.
   ============================================================================ */

/* ============================================================================
   7. Aside stage — 左侧学员配置卡 (默认工作台 / settings panel)
   ============================================================================ */
.wb-aside {
    position: fixed;
    left: calc(var(--sidebar-rail-shell-w) + var(--surface-gap));
    top: calc(var(--header-h) + var(--layout-gap));
    width: var(--sidebar-panel-w);
    /* 底边直接锚 fixed bottom(跟上传区同一机制), 不用 height/100vh —— iPad/模拟器上 100vh 算的不是真实视口, 用高度会短一截对不齐 */
    bottom: var(--frame-content-offset);
    z-index: var(--z-aside);
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-shadow);
    border-radius: var(--radius-base);
    overflow: hidden;
    transition: opacity 0.28s ease;
}

.wb-aside-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: none;
    margin: 0;
    padding: var(--aside-scroll-pad-top) var(--aside-scroll-pad-x) var(--aside-scroll-pad-bottom) var(--aside-scroll-pad-x);
}
.wb-aside-scroll::-webkit-scrollbar { display: none; }

/* wb-aside-panel — 多 view 切换 (downloads / review / blank) */
.wb-aside-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.wb-aside-panel.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.wb-aside-panel--blank { background: transparent; }

/* ============================================================================
   8. Workspace tab: downloads — 多 stage 横向布局
   ============================================================================ */
body.wb-tab-downloads aside {
    width: var(--sidebar-rail-shell-w);
    min-width: var(--sidebar-rail-shell-w);
}
body.wb-tab-downloads .wb-aside {
    opacity: 0;
    pointer-events: none;
}

.wb-downloads-menu {
    position: fixed;
    top: calc(var(--header-h) + var(--layout-gap));
    left: calc(var(--sidebar-rail-shell-w) + var(--surface-gap));
    width: var(--downloads-menu-w);
    bottom: var(--frame-content-offset);
    display: flex;
    flex-direction: column;
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-shadow);
    border-radius: var(--radius-base);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-aside);
    transform: translateX(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease, border-radius 0.3s ease;
}
body.wb-tab-downloads .wb-downloads-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.wb-downloads-menu.is-list-expanded {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* 与右侧列表拼接时, 裁掉右侧投影, 避免交界处叠出阴影缝 */
    clip-path: inset(-40px 0 -40px -40px);
}

.wb-downloads-list {
    position: fixed;
    top: calc(var(--header-h) + var(--layout-gap));
    left: calc(var(--sidebar-rail-shell-w) + var(--surface-gap) + var(--downloads-menu-w));
    width: var(--downloads-list-w);
    bottom: var(--frame-content-offset);
    display: flex;
    flex-direction: column;
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-shadow);
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    overflow: hidden;
    /* 与左侧菜单拼成一个整体: 裁掉左侧投影, 不在菜单/列表交界处叠出一道阴影缝 */
    clip-path: inset(-40px -40px -40px 0);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-aside);
    transform: translateX(-20px);
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.wb-downloads-list.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.wb-downloads-preview {
    position: fixed;
    top: calc(var(--header-h) + var(--layout-gap));
    left: calc(var(--sidebar-rail-shell-w) + var(--surface-gap) + var(--downloads-menu-w) + var(--downloads-list-w) + var(--layout-gap));
    right: var(--frame-content-offset);
    bottom: var(--frame-content-offset);
    display: flex;
    flex-direction: column;
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-panel-backdrop);
    -webkit-backdrop-filter: var(--glass-panel-backdrop);
    box-shadow: var(--glass-panel-shadow);
    border-radius: var(--radius-base);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--z-aside);
    transform: translateY(15px) scale(0.98);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.4s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wb-downloads-preview.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

body:not(.wb-tab-downloads) .wb-downloads-list,
body:not(.wb-tab-downloads) .wb-downloads-preview {
    display: none;
}

body.wb-tab-downloads #upload-zone,
body.wb-tab-downloads .wb-mobile-bar {
    display: none !important;
}

body.wb-tab-downloads section#content-area {
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    padding-left: calc(var(--downloads-menu-w) + var(--layout-gap));
    padding-bottom: var(--frame-content-offset);   /* 上传区已隐藏 → 不留底部位, 预览铺满到底 */
}

/* 批改中: 上传区下滑收起 → 同样不为它留底部位, 预览铺满到底(不露出上传区那条空) */
section#content-area:has(#exhibit-zone.wb-is-generating) {
    padding-bottom: var(--frame-content-offset);
}

body.wb-tab-downloads:has(.wb-downloads-list.is-open) section#content-area {
    padding-left: calc(var(--downloads-menu-w) + var(--downloads-list-w) + var(--layout-gap));
}

body.wb-tab-downloads.wb-drawer-open .wb-downloads-preview {
    right: calc(var(--drawer-w) + var(--frame-content-offset) + var(--layout-gap));
}

/* ============================================================================
   9. Content area — 主工作区
   ⚠️ 严禁加 will-change/transform/filter/contain — 任何这些属性都会让
      content-area 变成 containing block, 导致 #mainOrb (position:fixed)
      退化为 absolute 定位, 主区缩窄时 orb 跟着移.
   ============================================================================ */
section#content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
    padding-left: calc(var(--sidebar-panel-w) + var(--layout-gap));
    /* v2: 给底部 fixed upload-zone 留位 (upload-zone 脱离 flex, 这里 padding 让 exhibit-zone 不延伸到上传区) */
    padding-bottom: calc(var(--upload-zone-h) + var(--frame-content-offset) + var(--layout-gap));
    transition: padding-left var(--anim-drawer-d) var(--ease-apple), opacity 0.35s ease;
    position: relative;
    z-index: var(--z-content);
    margin-bottom: 0;
}

/* drawer 打开时给抽屉让位 */
body.wb-drawer-open:not(:has(#report-modal.show)) .wb-shell {
    padding-right: calc(var(--drawer-w) + var(--frame-content-offset) + var(--layout-gap));
}

body.wb-drawer-open section#content-area {
    transform: none;
}

/* ============================================================================
   10. wb-rail-open 状态下的 stage 让位
   ============================================================================ */
body.wb-rail-open .wb-aside,
body.wb-rail-open section#content-area,
body.wb-rail-open .wb-drawer,
body.wb-rail-open #settings-modal {
    pointer-events: none;
}

body.wb-rail-open .wb-aside {
    opacity: 0;
}

body.wb-tab-downloads.wb-rail-open .wb-downloads-menu,
body.wb-tab-downloads.wb-rail-open .wb-downloads-list,
body.wb-tab-downloads.wb-rail-open .wb-downloads-preview {
    opacity: 0;
    pointer-events: none;
}

body:not(.wb-tab-downloads).wb-rail-open .wb-downloads-menu {
    opacity: 0;
    pointer-events: none;
}